/* Race to the Star — theme styles */
.scene.themed { background:linear-gradient(180deg,#BFE3F5 0%, #CFEBD9 46%, #A8D89C 100%); }

.board-holder { position:absolute; left:50%; top:44px; transform:translateX(-50%); z-index:4;
  width:min(94vw,520px); }
.path { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(6px,1.8vw,12px); }
.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; }
.tile .n { font-weight:800; color:var(--soft-navy); font-size:clamp(.7rem,2.6vw,1rem); opacity:.75; }
.tile.start { border-color:var(--sage); }
.tile.goal { background:rgba(255,247,220,.96); border-color:var(--gold); }
.tile.goal .goal-star { width:86%; height:86%; object-fit:contain; }
.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) } }

.tokens { position:absolute; inset:0; pointer-events:none; }
.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; }
.token img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(30,42,74,.4)); }
.token.bud { z-index:5; }
.token.hopping { animation:tok-hop .28s ease-out; }
@keyframes tok-hop { 0%,100%{ margin-top:0 } 50%{ margin-top:-10px } }

.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; }
.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; }
.spinner-btn:disabled { opacity:.85; }
.spinner-btn .dial { position:absolute; inset:0; display:block; }
.spinner-btn .dial svg { width:100%; height:100%; }
.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); }
.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; }
.spinner-btn .spin-num.show { opacity:1; transform:scale(1); }
.spinner-btn:active, .spinner-btn.pressing { transform:scale(.94); }
.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); }

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