/* Little Words — games/shared/engine3.css
 * Structural styles for the three config-driven engine families:
 *   .lw-quiz  → quiz-show-engine.js
 *   .lw-bingo → bingo-engine.js
 *   .lw-race  → board-race-engine.js
 * Everything here is layout/behaviour only. A themed game ships nothing but a
 * theme.css that paints the scene gradient and accents, so the same structural
 * rules serve every theme and no game forks the engine's CSS.
 */

/* ============================ quiz_show ============================ */
.lw-quiz .board-wrap { position:absolute; inset:0; z-index:3; display:flex; align-items:center;
  justify-content:center; padding:14px; padding-top:52px; padding-bottom:16px; }
.lw-quiz .quiz-grid { grid-template-columns:repeat(3,1fr); max-width:min(94vw,480px); }
@media (min-aspect-ratio:5/4) { .lw-quiz .quiz-grid { max-width:min(70vh,520px); } }

.lw-quiz .bubble-cell { background:rgba(255,251,245,.14); border-color:rgba(255,251,245,.55); }
.lw-quiz .bubble-cell .tile-art { position:absolute; inset:6%; }
.lw-quiz .bubble-cell .tile-art svg { width:100%; height:100%; }
.lw-quiz .bubble-cell.popping { animation:bub-pop .32s ease-in; }
@keyframes bub-pop { 0%{transform:scale(1)} 60%{transform:scale(1.12)} 100%{transform:scale(.9); opacity:.7} }
.lw-quiz .bubble-cell.taken { background:rgba(255,251,245,.9); border-color:var(--gold); }
.lw-quiz .bubble-cell .won { font-size:clamp(.9rem,3.6vw,1.4rem); line-height:1.1; letter-spacing:-2px;
  text-align:center; padding:4px; }

.lw-quiz #scene-question { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:16px; }
.lw-quiz .q-head { text-align:center; z-index:5; background:rgba(255,251,245,.94); border-radius:20px;
  padding:14px 18px; box-shadow:var(--shadow); max-width:min(560px,92vw); }
.lw-quiz .q-prompt { font-family:var(--lw-font-display, inherit); font-weight:800; color:var(--navy);
  font-size:clamp(1.1rem,4.4vw,1.6rem); margin:0 0 8px; }
.lw-quiz #scene-question .choice-row { z-index:5; padding:0 8px; }
.lw-quiz .choice-card.glow { box-shadow:0 0 0 4px var(--gold), 0 8px 20px rgba(30,42,74,.3); }

@media (max-height:620px) {
  .lw-quiz .board-wrap { padding-top:46px; }
  .lw-quiz .quiz-grid { max-width:min(64vh,420px); }
}

/* ============================== bingo ============================== */
.lw-bingo .turn-bar { position:absolute; left:50%; transform:translateX(-50%); top:8px; z-index:9;
  background:rgba(255,251,245,.94); border-radius:999px; padding:6px 16px; font-weight:800;
  color:var(--navy); font-size:.92rem; box-shadow:0 3px 10px rgba(30,42,74,.18); }

.lw-bingo .board-wrap { position:absolute; inset:0; z-index:3; display:flex; align-items:center;
  justify-content:center; padding:14px; padding-top:48px; padding-bottom:128px; }
.lw-bingo .bingo-grid { grid-template-columns:repeat(3,1fr); max-width:min(92vw,440px); }
@media (min-aspect-ratio:5/4) { .lw-bingo .bingo-grid { max-width:min(58vh,440px); } }

.lw-bingo .bingo-cell { background:#fff; }
.lw-bingo .bingo-cell img { width:100%; height:100%; object-fit:cover; }
.lw-bingo .bingo-cell .cell-lab { position:absolute; left:0; right:0; bottom:0;
  background:rgba(255,251,245,.94); font-weight:700; font-size:clamp(.6rem,2.4vw,.82rem);
  color:var(--navy); padding:2px 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:center; }
.lw-bingo .bingo-cell .chip { position:absolute; inset:8%; width:84%; height:84%; object-fit:contain;
  animation:chip-drop .38s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
@keyframes chip-drop { 0%{transform:scale(1.7) translateY(-20px); opacity:0} 100%{transform:none; opacity:1} }
.lw-bingo .bingo-cell.covered { border-color:var(--coral); }
.lw-bingo .bingo-cell.winline { animation:win-flash .7s ease-in-out 3; }
@keyframes win-flash { 0%,100%{ box-shadow:none } 50%{ box-shadow:0 0 0 5px var(--gold) } }
.lw-bingo .bingo-cell.wobble { animation:cell-wob .38s ease-in-out; }
@keyframes cell-wob { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-4deg)} 70%{transform:rotate(4deg)} }

.lw-bingo .call-row { position:absolute; left:50%; transform:translateX(-50%);
  bottom:max(12px, env(safe-area-inset-bottom)); z-index:8; display:flex; flex-direction:column;
  align-items:center; gap:6px; }
.lw-bingo .caller { width:clamp(72px,17vw,104px); aspect-ratio:1; }
.lw-bingo .caller img, .lw-bingo .caller svg { width:100%; height:100%; object-fit:contain; }
.lw-bingo .caller.rolling { animation:caller-roll .7s ease-in-out; }
@keyframes caller-roll { 0%,100%{transform:rotate(0) scale(1)} 25%{transform:rotate(-6deg) scale(1.05)}
  75%{transform:rotate(6deg) scale(1.05)} }

.lw-bingo .pcount { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.lw-bingo .pcount .big-btn { flex:1; min-width:130px; }

@media (prefers-reduced-motion:reduce) {
  .lw-bingo .bingo-cell.winline, .lw-bingo .caller.rolling, .lw-bingo .bingo-cell .chip { animation:none }
}
@media (max-height:640px) {
  .lw-bingo .board-wrap { padding-bottom:112px; padding-top:42px; }
  .lw-bingo .caller { width:64px; }
}

/* ============================ board_race =========================== */
.lw-race .board-holder { position:absolute; left:50%; top:44px; transform:translateX(-50%); z-index:4;
  width:min(94vw,520px); }
.lw-race .path { position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(6px,1.8vw,12px); }
.lw-race .tile { position:relative; aspect-ratio:1; border-radius:50%; background:rgba(255,251,245,.9);
  border:4px solid var(--pale-gold, #F0DDA8); box-shadow:0 3px 8px rgba(30,42,74,.18);
  display:flex; align-items:center; justify-content:center; }
.lw-race .tile .n { font-weight:800; color:var(--soft-navy); font-size:clamp(.7rem,2.6vw,1rem); opacity:.75; }
.lw-race .tile.start { border-color:var(--sage); }
.lw-race .tile.goal { background:rgba(255,247,220,.96); border-color:var(--gold); }
.lw-race .tile.goal .goal-star { width:86%; height:86%; object-fit:contain; }
.lw-race .tile.goal.won { animation:goal-pulse .9s ease-in-out infinite; }
@keyframes goal-pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(232,195,106,.9) }
  50%{ box-shadow:0 0 0 14px rgba(232,195,106,0) } }

.lw-race .tokens { position:absolute; inset:0; pointer-events:none; }
.lw-race .token { position:absolute; width:clamp(30px,7.4vw,44px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  transition:left .26s cubic-bezier(.34,1.56,.64,1), top .26s cubic-bezier(.34,1.56,.64,1); z-index:6; }
.lw-race .token img { width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 3px 5px rgba(30,42,74,.4)); }
.lw-race .token.bud { z-index:5; }
.lw-race .token.hopping { animation:tok-hop .28s ease-out; }
@keyframes tok-hop { 0%,100%{ margin-top:0 } 50%{ margin-top:-10px } }

.lw-race .spin-row { position:absolute; left:50%; transform:translateX(-50%);
  bottom:max(14px, env(safe-area-inset-bottom)); z-index:8; display:flex; flex-direction:column;
  align-items:center; gap:6px; }
.lw-race .spinner-btn { position:relative; width:clamp(88px,22vw,120px); height:clamp(88px,22vw,120px);
  min-width:44px; min-height:44px; border-radius:50%; background:none; border:none; padding:0; }
.lw-race .spinner-btn:disabled { opacity:.85; }
.lw-race .spinner-btn .dial { position:absolute; inset:0; display:block; }
.lw-race .spinner-btn .dial svg { width:100%; height:100%; }
.lw-race .spinner-btn .needle { position:absolute; left:50%; top:6%; width:0; height:0; margin-left:-9px;
  border-left:9px solid transparent; border-right:9px solid transparent;
  border-top:16px solid var(--deep-coral); }
.lw-race .spinner-btn .spin-num { position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:2.4rem; font-weight:800; color:var(--navy); opacity:0;
  transform:scale(.4); transition:all .25s cubic-bezier(.34,1.56,.64,1);
  text-shadow:0 2px 0 #fff, 0 0 12px #fff; }
.lw-race .spinner-btn .spin-num.show { opacity:1; transform:scale(1); }
.lw-race .spinner-btn:active, .lw-race .spinner-btn.pressing { transform:scale(.94); }
.lw-race .spin-lab { font-weight:700; color:var(--navy); background:rgba(255,251,245,.92);
  border-radius:999px; padding:4px 14px; font-size:.92rem; box-shadow:0 2px 8px rgba(30,42,74,.16); }

.lw-race .host-say { left:12px; bottom:auto; top:8px; }
@media (min-width:720px) { .lw-race .board-holder { width:min(64vh,520px); } }
@media (max-height:660px) {
  .lw-race .board-holder { top:40px; width:min(74vw,380px); }
  .lw-race .spinner-btn { width:78px; height:78px; }
}
@media (prefers-reduced-motion:reduce) { .lw-race .tile.goal.won, .lw-race .token.hopping { animation:none } }