/* Is It On? — game-specific styles. */
.on-main { max-width: 900px; text-align: center; }
.on-title { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.on-title .inline-icon { width: 1.3em; height: 1.3em; }
.on-lede { margin-left: auto; margin-right: auto; }

.stage {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--panel-border); box-shadow: var(--shadow); background: #000;
}
.scene { display: block; width: 100%; height: auto; }
.world { transform-origin: 623px 362px; transition: transform .6s ease; }
.dim { opacity: 0; transition: opacity .5s ease; }
.fan { transform-box: fill-box; transform-origin: center; }
.fx { opacity: 0; transition: opacity .4s ease; }

.on-controls { margin: 1.25rem 0 .5rem; }
.on-btn { font-size: 1.25rem; min-width: 12rem; }

.countdown, .banner {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-weight: 900; text-shadow: 0 4px 24px rgba(0,0,0,.6);
}
.countdown { font-size: clamp(4rem, 18vw, 9rem); color: var(--accent); }
.countdown.tick { animation: tick .6s ease-out; }
@keyframes tick { from { transform: scale(1.8); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); opacity: .9; } }
.banner { opacity: 0; align-items: start; padding-top: 9%; }
.banner span {
  display: inline-block; padding: .3em .8em; border-radius: 14px; font-size: clamp(2rem, 8vw, 4.25rem);
  border: 4px solid var(--bg-1); transform: rotate(-3deg);
}

/* ---- SUSPENSE ---- */
.stage[data-state="suspense"] .dim { opacity: .55; animation: flicker 2.6s steps(1) infinite; }
.stage[data-state="suspense"] .world { transform: scale(1.15); animation: pulse .5s ease-in-out infinite; }
.stage[data-state="suspense"] .fan { animation: twitch .5s ease-in-out infinite; }
@keyframes flicker { 0%,100% { opacity: .55; } 22% { opacity: .35; } 25% { opacity: .7; } 61% { opacity: .4; } 64% { opacity: .6; } }
@keyframes pulse { 0%,100% { transform: scale(1.15); } 50% { transform: scale(1.19); } }
@keyframes twitch { 0%,100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }

/* ---- ON OUTCOME (placeholder) ---- */
.stage[data-state="on"] .world { transform: scale(1); }
.stage[data-state="on"] .fan { animation: spin .25s linear infinite, spinup 1s ease-out; }
.stage[data-state="on"] .fx-on { opacity: 1; }
.stage[data-state="on"] .shimmer path { animation: shimmer 1s ease-in-out infinite alternate; }
.stage[data-state="on"] .air-lines path { animation: air .7s linear infinite; }
.stage[data-state="on"] .banner { opacity: 1; animation: slam .5s cubic-bezier(.2,1.6,.4,1); }
.stage[data-state="on"] .banner span { background: var(--accent); color: var(--accent-text); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinup { from { filter: blur(0); } to { filter: blur(.6px); } }
@keyframes shimmer { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-8px); opacity: .3; } }
@keyframes air { from { stroke-dasharray: 0 60; } to { stroke-dasharray: 40 60; stroke-dashoffset: -40; } }

/* ---- OFF OUTCOME (placeholder) ---- */
.stage[data-state="off"] .world { transform: scale(1); filter: saturate(.55) brightness(.85); }
.stage[data-state="off"] .fan { animation: winddown 1.6s cubic-bezier(.1,.6,.3,1) forwards; }
.stage[data-state="off"] .fx-off { opacity: 1; }
.stage[data-state="off"] .zzz text { animation: drift 2s ease-in-out infinite alternate; }
.stage[data-state="off"] .banner { opacity: 1; animation: slam .5s cubic-bezier(.2,1.6,.4,1); }
.stage[data-state="off"] .banner span { background: var(--danger); color: #2a0010; }
@keyframes winddown { from { transform: rotate(0); } to { transform: rotate(200deg); } }
@keyframes drift { to { transform: translateY(-6px); } }

@keyframes slam { from { transform: scale(2.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Reduced motion: no zoom/pulse/spin; JS skips the countdown and just fades in. */
@media (prefers-reduced-motion: reduce) {
  .stage *, .stage { animation: none !important; transition: opacity .4s ease !important; }
  .stage[data-state] .world { transform: none !important; }
}
@media (max-width: 520px) { .on-btn { width: 100%; } }

.guess { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.guess-q { flex-basis: 100%; margin: 0; font-size: 1.4rem; font-weight: 800; }
.guess[hidden] { display: none; }
.verdict { font-size: 1.4rem; font-weight: 800; margin: 0 0 .75rem; }
.verdict.win { color: var(--accent); }
.verdict.lose { color: var(--muted); }
.verdict small { display: block; font-size: 1rem; font-weight: 600; color: var(--muted); }
.on-controls [hidden] { display: none !important; }
.banner { align-items: start; justify-items: end; padding: 9% 5% 0 0; }
.banner span { font-size: clamp(1.1rem, 5vw, 3rem); }