/* ===== POSTCARD BACK — the written side of a living postcard =====
   The art is one of Michael's 15 finished plates (assets/postcard-backs/), which already
   have the printed rules drawn on them. Everything here is the TEXT that sits on those
   rules; src/postcard-back.js positions it. Nothing is hard-coded to one plate.

   Type = Andika. The @font-face declarations that used to sit here have MOVED to the one
   shared home, assets/fonts/fonts.css, which AnimaLingo.html loads before this file — so the
   postcard back and the rest of the app now use the very same font files, declared once.
   Which font goes where is decided at the top of styles/main.css (--font-read / --font-display).
   Hindi and Arabic now have app fonts of their own (added 2026-07-28) and ride along inside
   --font-read. Chinese and Japanese deliberately use the iPad's own lettering (PingFang /
   Hiragino) — they have no alphabet, so a font would either weigh over a megabyte or go blank
   the day we add a new word. Full reasoning: the font rule at the top of styles/main.css. */

/* The rendered back fills its face exactly; the face already rounds + clips the corners,
   so the plate's corners match the front by construction (nothing is baked into the art). */
#pc-back-real{
  position:absolute; inset:0;
  display:none;                /* JS shows it once it has actually drawn a card; until then
                                  the pure-CSS .pc-back underneath stays visible */
  overflow:hidden;
  background:#fbf3e2;          /* shows for the one frame before the plate decodes */
}
#pc-back-real .pcb-plate{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  object-fit:fill;             /* plate and card share the 79:53 shape — no crop, no letterbox */
}
/* One field of information, sitting on one of the printed rules. JS sets left/top/width,
   the type size and the line height (all derived from the card's real on-screen size, so
   landscape and portrait read at the same physical size). */
/* .pcb-room is the offscreen MEASURING room (src/postcard-back.js): the layout is built and
   measured there — the real host usually sits inside the hidden flip coin where everything
   measures zero — then the finished elements move across. It must style fields identically. */
#pc-back-real .pcb-f, .pcb-room .pcb-f{
  position:absolute;
  font-family:var(--font-read);   /* Andika — see the :root block in styles/main.css */
  font-weight:400;
  color:#4A3B2A;
  white-space:normal;
  -webkit-font-smoothing:antialiased;
}
#pc-back-real .pcb-f b, .pcb-room .pcb-f b{ font-weight:700; }   /* the To:/From: labels only */

/* The smiley and the heart are PICTURES, not emoji characters (assets/icons/twemoji-*.svg,
   loaded from disk — nothing is fetched). Sized to the line's own type so they scale with it,
   and nudged down a hair so they sit optically on the writing rather than floating above it. */
#pc-back-real .pcb-pic, .pcb-room .pcb-pic{
  display:inline-block;
  height:1em; width:1em;
  vertical-align:-0.14em;
  margin-left:0.15em;
}

/* ★ RESTING ON THE WRITTEN SIDE — a plain flat element, no 3D anywhere.
   The card had never STOPPED half turned over before, and once movement stops iPad WebKit
   gives up hiding the reverse of a turned face — a static, MIRRORED picture side (TEST 328,
   Michael's report). So the coin is only ever used while it is actually turning: the moment
   the flip lands, the coin is hidden and this same element is placed flat inside the card's
   own box (under the tap catcher), where it is just an ordinary image with text — nothing
   left for the browser's 3D bookkeeping to get wrong. The wrapper's own rounded corners
   clip it, exactly as they clip the card. src/landmarks.js moves the element between its
   two homes (coin face for the spin, card box at rest); both parents make it fill them. */

/* Tap-flip only — the coin's photo of the live card's CURRENT frame (video + overlays +
   rope frame, composited in order). Above the poster (z1) and the pin thumbnail (z2). */
#flip-snap{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0;
  z-index:3;
}

/* Invisible tap catcher over the live card. The card is an iframe, and a tap inside an
   iframe never reaches the parent page — so without this, tapping the postcard could not
   be felt at all. Sits above the card, below nothing: the flip proxy is pointer-events:none. */
#pc-tap{
  position:absolute; inset:0;
  z-index:3;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* ===== The card's controls (Michael's design, 2026-07-27) ===== */

/* Tap-to-speak: each line on the written side is its own tap target. A tapped line gives a
   brief warm glow — the same "I heard you" beat every tappable thing in the app gives. */
#pc-back-real .pcb-tap{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
#pc-back-real .pcb-said{ animation:pcbSaid 0.9s ease-out; }
@keyframes pcbSaid{
  0%{ text-shadow:0 0 0 rgba(217,136,74,0); }
  25%{ text-shadow:0 0 10px rgba(217,136,74,.85); }
  100%{ text-shadow:0 0 0 rgba(217,136,74,0); }
}

/* The NAME BUTTON: slides down from behind the card (it paints under the wrapper — DOM order),
   showing the landmark's name in the current language. Tapping it turns the card over, both
   ways. READING face — ★ corrected 2026-07-28: this pill used to use the decorative face, on the
   reasoning that it was the landmark's version of the big animal name. But it holds a TRANSLATED
   name, and the decorative face has no Russian and no Polish accents, so those languages were
   silently drawn by the iPad instead. Every word in the app now uses the reading face; see the
   font rule at the top of styles/main.css.
   Motion = the app-wide zoom curve; JS sets top (parked under the card edge → slid out). */
#pc-name-btn{
  position:absolute; left:50%;
  transform:translateX(-50%);
  display:none;
  font-family:var(--font-read);
  /* 22px, down from 26px — Michael 2026-07-28: standardising the pill made it BIGGER, and on the
     portrait cards it clashed with the postcard. Standardise DOWNWARD. JS shrinks it further,
     per card, whenever a language needs more room than the card can give. */
  /* ★ Michael 2026-07-28: +50% and BOLD, with the pill itself NO bigger. The extra height comes
     out of the pill's own top/bottom padding (JS trims it to whatever keeps the box at exactly the
     size it was at 22px), so the lettering grows into air the pill was already carrying. */
  font-size:33px; font-weight:700; color:#4A3B2A;
  background:#fff7e8;
  border:3px solid #e8b04a; border-radius:999px;
  padding:8px 26px;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  cursor:pointer; white-space:nowrap;
  /* the pill is locked to ONE width per postcard (see measurePcNamePill) — border-box so that
     locked number is the pill you SEE, and centred so a short name sits in the middle of it */
  box-sizing:border-box; text-align:center;
  -webkit-tap-highlight-color:transparent;
  /* ★ Michael 2026-07-28: the old app-wide zoom curve (slow→fast→slow) read as CLUNKY on a slide
     that starts from a standstill behind the card — it crept, lurched, then crept again. A slide-OUT
     wants a single decelerating move: fastest at the very start, easing to a stop. Same curve is
     used by the flag wheel below so the two move as one gesture. */
  transition:top .55s cubic-bezier(0.16,1,0.3,1);
}
/* flex, so the name sits dead centre inside the ONE size the pill is locked to — a Japanese or
   Arabic name has a taller line than a Latin one, and with the height locked the extra room has
   to be shared above and below instead of pushing the pill open */
#pc-name-btn.show{ display:flex; align-items:center; justify-content:center; }

/* The SOUND-IT-OUT button (Michael's spec, 2026-07-28). A circle exactly as TALL as the name pill
   beside it, wearing the same gold outline and the same brown letters, so the two are obviously
   one family — teal fill and a lowercase "abc" tell it apart. The letters are in the reading font
   every word a child reads is set in. It sits 25px off the pill's right edge (JS measures that,
   since the pill's width changes with every landmark and language) and rides down on the same
   curve — but 25% LATER, so it follows the name out from behind the card, not alongside it.
   ★ IT NEVER CHANGES COLOUR (Michael, 2026-07-28). It is teal with the pill's own brown letters,
   whichever spelling the card is currently showing — the writing on the card is the answer to
   "which one am I on", not the button. */
#pc-roman-btn{
  position:absolute;
  display:none;
  align-items:center; justify-content:center;
  box-sizing:border-box;                      /* JS sizes it — always the name pill's own height */
  background:#33B8AD;
  border:3px solid #e8b04a; border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  font-family:var(--font-read); font-weight:700; font-size:23px;
  color:#4A3B2A; letter-spacing:.5px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  /* ★ Michael 2026-07-30: it no longer follows the pill down a quarter-beat behind it. It rides
     down HIDDEN BEHIND the pill (so the vertical move is the pill's exactly — same duration, same
     curve, no delay) and then steps SIDEWAYS out from under it, which is the .38s left move. On
     the way out it slides back behind the pill at the same moment the pill rises. JS decides when
     each move happens; the CSS only says how they feel. */
  transition:top .55s cubic-bezier(0.16,1,0.3,1),
             left .38s cubic-bezier(0.16,1,0.3,1),
             transform .18s ease-out;
}
#pc-roman-btn.show{ display:flex; }
#pc-roman-btn:active{ transform:scale(.92); }
/* THE TWO FACES (Michael, 2026-07-28). The button always shows what you GET by tapping it:
   the card is in its own writing → "abc"; the card is sounded out → the wireframe globe, the
   international symbol for language. One is hidden while the other shows. */
#pc-roman-btn > #pc-roman-globe{ display:none; width:87%; height:87%; }
/* "abc" is hung on the ROUND PART OF THE b — the bowl — not on the line of type and not on the
   whole letter (Michael, 2026-07-28: "the center of, like, the circle in the b"). Both of those
   sit too low: the b's tall stem drags the letter's middle upward, and a line of type is measured
   down to a descender that "abc" hasn't got. Measured in the real font at 100px — the bowl's
   middle is 24.9px above the baseline, the whole letter's is 38.45px — so the text is lifted the
   0.1355em between them, plus the 0.031em the line itself was sitting low. */
#pc-roman-btn > #pc-roman-abc{ position:relative; top:-0.167em; }
#pc-roman-btn.globe > #pc-roman-abc{ display:none; }
#pc-roman-btn.globe > #pc-roman-globe{ display:block; }

/* The LANGUAGE WHEEL below the card — the Animals carousel, unmodified (.lang-slider in
   main.css does the look); this only places it on the postcard overlay. Hidden until the
   overlay is active so a warming card never shows a stray wheel. */
/* ★ Michael 2026-07-28: the wheel sits 20px HIGHER than it did (bottom 4px → 24px), and it now
   SLIDES UP into place at the same instant the name button slides out — one gesture, same curve,
   same duration. Parked = nudged down and invisible; JS adds .pc-in to send it home. */
/* ★ INVISIBLE MUST ALSO MEAN UNTOUCHABLE (Michael 2026-08-01). The parked wheel used to be
   faded out and nothing more — and a faded thing still catches fingers. The card is open, so
   the overlay is live, so the wheel underneath the card was fully swipeable while nobody could
   see it: it turned, it clicked, and it changed the language. `visibility:hidden` takes it out
   of reach AND stops the iPad drawing thirteen flags nobody is looking at.
   The `0s linear .55s` on visibility is what lets it still SLIDE AWAY: it stays reachable for
   the .55s the slide takes, then switches off in one step at the end. (Never `display:none`
   here — the postcard's size measurement reads this wheel's box while the card is warming up,
   and a display:none element has no box to read.) */
#postcard-overlay #lm-lang-slider{
  position:absolute; left:50%; bottom:24px;
  transform:translate(-50%, 60px);
  opacity:0;
  width:min(680px, 92vw);
  display:none;
  visibility:hidden; pointer-events:none;
  transition:transform .55s cubic-bezier(0.16,1,0.3,1), opacity .35s ease-out, visibility 0s linear .55s;
}
#postcard-overlay.active #lm-lang-slider{ display:block; }
#postcard-overlay #lm-lang-slider.pc-in{
  transform:translate(-50%, 0); opacity:1;
  visibility:visible; pointer-events:auto;
  transition:transform .55s cubic-bezier(0.16,1,0.3,1), opacity .35s ease-out, visibility 0s linear 0s;
}

/* The karaoke highlight on the card changes COLOUR AND NOTHING ELSE (Michael 2026-08-23, after
   the second report). No block of its own and no fixed space box: those made the line wider than
   the size it was measured at, so its end fell outside the box and the card cut the letters off.
   The word keeps the font's own spaces and its own place. */
#pc-back-real .syl-plain, .pcb-room .syl-plain, #pc-name-btn .syl-plain{
  transition:color .1s ease;
}
#pc-back-real .syl-plain.lit, .pcb-room .syl-plain.lit, #pc-name-btn .syl-plain.lit{
  color:#FF3060;
}