/* Little Words — games/shared/engine2.css
   Layout shared by the engines 6–12 family (quiz show, color by speech, what's
   wrong, board race, bingo, fishing, this-or-that). Per-theme colours and props
   live in each game's own stylesheet; everything here is mechanic-level and
   theme-neutral.
   Rails baked in: every tappable control is ≥44px, .pressing gives the <100ms
   tap ack (game-kit delegates it), layouts are mobile-first at 375px. */

/* ---------- shared intro (host in the corner + panel) ---------- */
.intro-cluster { position:absolute; left:4%; bottom:26%; z-index:4; display:flex; flex-direction:column; gap:16px; max-width:min(320px,60vw); }
.host-el { width:clamp(120px,22vw,200px); flex:none; aspect-ratio:1; animation:host-bob 2.6s ease-in-out infinite; }
@keyframes host-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.host-el svg, .host-el img { width:100%; height:100%; object-fit:contain; }
.host-bubble { font-size:.98rem; }
/* The panel is its own positioned card (same contract as the engines 1-5 game
   stylesheets): an absolutely positioned box in the corner on wide screens,
   re-centered over the scene on phones. It MUST declare position + width here —
   without a positioning context the ≤620px `left:50%; translateX(-50%)` rule
   below has nothing to offset against and drags the Play button off-screen. */
.intro-panel { position:absolute; right:3%; bottom:4%; z-index:5; background:rgba(255,251,245,.92); border-radius:22px; box-shadow:var(--shadow); padding:20px 22px; text-align:center; width:min(360px, 60vw); }
.intro-panel h1 { font-size:clamp(1.5rem,4.6vw,2.2rem); }
.intro-panel .tagline { color:var(--body); font-size:.95rem; line-height:1.45; margin:8px 0 14px; }
.intro-panel .micro { margin-top:10px; font-size:.78rem; color:var(--muted); }
@media (max-width:620px) {
  .intro-cluster { left:4%; bottom:auto; top:8%; max-width:70vw; flex-direction:row; align-items:flex-end; }
  .host-el { order:-1; }
  .host-bubble { align-self:flex-start; }
  .intro-panel { left:50%; right:auto; transform:translateX(-50%); bottom:3%; width:min(420px, calc(100vw - 24px)); }
}

/* ---------- in-game host corner (asks, cheers, never scolds) ---------- */
.host-corner { position:absolute; left:8px; bottom:8px; z-index:9; width:clamp(78px,15vw,132px); aspect-ratio:1; pointer-events:none; }
.host-corner img, .host-corner svg { width:100%; height:100%; object-fit:contain; }
.host-corner.cheer { animation:host-cheer .6s ease-in-out 2; }
@keyframes host-cheer { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-12px) rotate(-4deg)} }
.host-say { position:absolute; left:calc(8px + clamp(78px,15vw,132px)); bottom:22px; z-index:9;
  max-width:min(52vw,300px); pointer-events:none; opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; }
.host-say.show { opacity:1; transform:none; }

/* ---------- choice row (quiz answers, this-or-that picks) ---------- */
.choice-row { display:flex; gap:clamp(8px,2.4vw,18px); align-items:stretch; justify-content:center;
  width:100%; max-width:660px; margin:0 auto; }
.choice-card { position:relative; flex:1; max-width:200px; min-width:92px; min-height:44px; background:#fff;
  border:3px solid var(--border); border-radius:18px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 6px 16px rgba(30,42,74,.18); transition:transform .14s, border-color .14s; }
.choice-card:active, .choice-card.pressing { transform:scale(.95); }
.choice-card img { width:100%; aspect-ratio:1; object-fit:cover; background:var(--cream); }
.choice-card .lab { font-weight:700; color:var(--navy); font-size:clamp(.8rem,2.6vw,1rem);
  padding:6px 4px 8px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.choice-card.chosen { border-color:var(--sage); }
.choice-card.flying { z-index:40; transition:all .62s cubic-bezier(.5,.05,.4,1); transform:scale(.3); opacity:.9; pointer-events:none; }
.choice-card.dimmed { opacity:.45; transition:opacity .3s; }

/* ---------- hotspot markers (color-by-speech, what's wrong) ---------- */
.hotspot { position:absolute; width:clamp(44px,11vw,58px); height:clamp(44px,11vw,58px); border-radius:50%;
  transform:translate(-50%,-50%); background:var(--cream); border:3px solid var(--deep-coral);
  color:var(--deep-coral); font-weight:800; font-size:1.3rem; line-height:1; display:flex;
  align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(30,42,74,.28); z-index:8;
  animation:hs-pulse 2.2s ease-in-out infinite; }
@keyframes hs-pulse { 0%,100%{ box-shadow:0 4px 12px rgba(30,42,74,.28) } 50%{ box-shadow:0 4px 20px rgba(242,139,110,.75) } }
.hotspot.pressing { transform:translate(-50%,-50%) scale(.9); }
.hotspot.done { animation:hs-away .4s forwards; pointer-events:none; }
@keyframes hs-away { to { opacity:0; transform:translate(-50%,-50%) scale(.2) } }
@media (prefers-reduced-motion:reduce) { .hotspot { animation:none } }

/* ---------- N-of-M tracker chip row ---------- */
.tracker { position:absolute; left:50%; transform:translateX(-50%); top:8px; z-index:9;
  display:flex; gap:5px; align-items:center; background:rgba(255,251,245,.92); border-radius:999px;
  padding:6px 12px; box-shadow:0 3px 10px rgba(30,42,74,.18); max-width:calc(100% - 20px); flex-wrap:wrap; justify-content:center; }
.tracker .pip { width:14px; height:14px; border-radius:50%; background:rgba(30,42,74,.16); }
.tracker .pip.on { background:var(--sage); animation:pip-pop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes pip-pop { 0%{transform:scale(.3)} 100%{transform:scale(1)} }
.tracker .lab { font-weight:700; color:var(--navy); font-size:.86rem; margin-left:4px; }

/* ---------- generic board grid (quiz, bingo) ---------- */
.grid-board { display:grid; gap:clamp(6px,1.8vw,14px); width:100%; max-width:560px; margin:0 auto; }
.grid-board .cell { position:relative; aspect-ratio:1; min-width:44px; min-height:44px; border-radius:16px;
  background:rgba(255,251,245,.9); border:3px solid var(--border); overflow:hidden; transition:transform .12s;
  display:flex; align-items:center; justify-content:center; contain:layout paint; }
.grid-board .cell:active, .grid-board .cell.pressing { transform:scale(.94); }
.grid-board .cell img { width:100%; height:100%; object-fit:cover; }
.grid-board .cell.taken { pointer-events:none; }

/* ---------- pass-and-play handoff card ---------- */
.handoff { position:absolute; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(30,42,74,.5); opacity:0; transition:opacity .3s; }
.handoff.show { opacity:1; }
.handoff .card { background:var(--cream); border-radius:24px; padding:26px 28px; text-align:center;
  max-width:min(380px,86vw); box-shadow:var(--shadow); }
.handoff h2 { font-size:1.5rem; color:var(--navy); }
.handoff p { color:var(--body); margin:8px 0 16px; }

/* ---------- shared celebration extras ---------- */
.star-tally { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:10px 0 4px; font-size:1.5rem; }
.win-line { font-weight:700; color:var(--deep-coral); }