/* ===== THE INTRO CARDS (Chase, 2026-09-22): one per game, a beat before it starts, a different
   picture for each so the floor knows at a glance which one today is. Same shell for all four;
   only the artwork and the word change. Skippable on click or Space; reduced-motion = a plain card. */
.gi { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(6, 10, 18, .86); backdrop-filter: blur(3px); cursor: pointer; }
.gi.hidden { display: none; }
.gi-card { position: relative; width: min(520px, 92vw); border-radius: 18px; padding: 34px 28px 28px; text-align: center; color: #fff; background: linear-gradient(160deg, #101a2c, #0b1220); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.55); animation: gi-in .45s cubic-bezier(.2,.9,.3,1.2) both; }
.gi-kicker { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); animation: gi-fade .4s .15s both; }
.gi-title { font-size: 34px; font-weight: 800; letter-spacing: -.01em; margin: 8px 0 4px; animation: gi-fade .45s .3s both; }
.gi-sub { font-size: 14px; color: rgba(255,255,255,.7); animation: gi-fade .45s .55s both; }
.gi-art { height: 84px; margin: 6px auto 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.gi-skip { margin-top: 14px; font-size: 12px; color: rgba(255,255,255,.4); animation: gi-fade .4s 1s both; }
@keyframes gi-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes gi-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* warm-up: seven bars lighting up left to right - the seven lines */
.gi-warmup .gi-art i { width: 14px; height: 40px; border-radius: 4px; background: rgba(255,255,255,.14); animation: gi-light .25s both; animation-delay: calc(var(--i) * .11s + .35s); }
@keyframes gi-light { to { background: #f5c542; box-shadow: 0 0 18px rgba(245,197,66,.6); } }

/* match: his waveform, then theirs, settling onto his */
.gi-match .gi-art { gap: 3px; }
.gi-match .gi-art i { width: 6px; border-radius: 3px; height: 8px; background: #7fb4f5; animation: gi-wave 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * .06s); }
.gi-match .gi-art i.me { background: #f5c542; animation-name: gi-wave-me; animation-delay: calc(var(--i) * .06s + .45s); }
@keyframes gi-wave { 0%,100% { height: 8px; } 50% { height: calc(18px + var(--h) * 1px); } }
@keyframes gi-wave-me { 0% { height: 4px; opacity: .2; } 60% { height: calc(30px + var(--h) * 1px); opacity: 1; } 100% { height: calc(18px + var(--h) * 1px); } }

/* find it fast: buttons flicking past, one snapping into focus, a stopwatch */
.gi-findfast .gi-art { flex-direction: column; gap: 5px; }
.gi-findfast .gi-art b { display: block; width: 240px; height: 14px; border-radius: 7px; background: rgba(255,255,255,.12); animation: gi-flick .5s both; animation-delay: calc(var(--i) * .12s + .3s); }
.gi-findfast .gi-art b.hit { background: #2f7bf5; animation: gi-snap .5s .95s both; box-shadow: 0 0 0 2px rgba(47,123,245,.5); }
@keyframes gi-flick { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes gi-snap { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1.02); } }
.gi-findfast .gi-stopwatch { position: absolute; right: 26px; top: 26px; font-size: 22px; animation: gi-tick .6s steps(1) infinite; }
@keyframes gi-tick { 50% { transform: rotate(12deg); } }

/* is it a yes: a green tick and a grey maybe; the maybe flips over */
.gi-isyes .gi-art { gap: 26px; font-size: 40px; font-weight: 800; }
.gi-isyes .gi-yes { color: #22c55e; animation: gi-fade .4s .3s both; }
.gi-isyes .gi-maybe { color: rgba(255,255,255,.35); display: inline-block; animation: gi-flip .9s .7s both; }
@keyframes gi-flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); color: rgba(255,255,255,.35); } 51% { color: #ef4444; } 100% { transform: rotateY(0); color: #ef4444; } }

/* mystery: a shuffle, cards fanning, the name landing last */
.gi-mystery .gi-art { position: relative; height: 90px; }
.gi-mystery .gi-art s { position: absolute; width: 56px; height: 76px; border-radius: 8px; background: linear-gradient(160deg, #2b3a58, #16223a); border: 1px solid rgba(255,255,255,.12); text-decoration: none; animation: gi-fan .7s cubic-bezier(.2,.9,.3,1.1) both; animation-delay: calc(var(--i) * .1s + .2s); }
@keyframes gi-fan { from { transform: rotate(0) translateY(20px); opacity: 0; } to { transform: rotate(calc(var(--r) * 1deg)) translateX(calc(var(--x) * 1px)); opacity: 1; } }
.gi-mystery .gi-title { animation-delay: .9s; }

@media (prefers-reduced-motion: reduce) { .gi *, .gi-card { animation: none !important; } }