/* Games page and arcade stage. Every colour, font and shadow is an app.css token; the hard offset
   shadow stays an affordance for pressables, as in the rest of the app. */

/* ===================================================================== games grid */
.gm-hub { margin:0 0 26px; }
.gm-hub-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:14px; }
.gm-hub-head h2 { font-size:28px; line-height:1.1; }
.gm-hub-sub { font-size:13.5px; color:var(--text-2); }
.gm-cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; }
.gm-card {
  position:relative; display:block; padding:0; text-align:left; overflow:hidden; min-width:0; aspect-ratio:3/2;
  background:var(--blue-200); border:2px solid var(--ink); border-radius:16px; box-shadow:var(--shadow);
  transition:transform .1s, box-shadow .1s;
}
.gm-card:active { transform:translate(2px,4px); box-shadow:none; }
.gm-card.on { box-shadow:var(--shadow), 0 0 0 3px var(--yellow); }
.gm-card-cover { position:absolute; inset:0; display:block; overflow:hidden; }
.gm-card-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.gm-card-cover.fallback { display:grid; place-items:center; background:linear-gradient(135deg, var(--blue-300), var(--blue)); }
.gm-card-cover.fallback .gm-card-icon { width:38%; height:auto; object-fit:contain; margin-bottom:22%; }
/* The covers keep their lower third clear for this label. */
.gm-card-body { position:absolute; left:14px; right:14px; bottom:14px; display:flex; flex-direction:column; gap:2px; padding:11px 15px; min-width:0; background:rgba(255,255,255,.94); border:2px solid var(--ink); border-radius:14px; }
.gm-card-tag { font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-card strong { font-family:var(--display); font-weight:400; font-size:22px; line-height:1.15; color:var(--ink); }
.gm-card small { font-size:13.5px; line-height:1.35; color:var(--text-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:1000px) { .gm-cards { gap:14px; } .gm-card strong { font-size:18px; } .gm-card small { font-size:12px; } .gm-card-body { left:10px; right:10px; bottom:10px; padding:8px 11px; } }
@media (max-width:700px) {
  .gm-hub { margin-bottom:20px; }
  .gm-hub-head h2 { font-size:24px; }
  .gm-cards { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .gm-card strong { font-size:14px; }
  .gm-card small, .gm-card-tag { display:none; }
  .gm-card-body { left:7px; right:7px; bottom:7px; padding:6px 8px; }
}

/* song sheet: the existing picker, inside a modal */
.gm-song-dialog { max-width:min(1180px, calc(100vw - 24px)); width:100%; }
.gm-song-sheet { display:flex; flex-direction:column; max-height:min(88vh, 900px); padding:18px 20px; }
.gm-song-sheet .kb-pick-head { margin-bottom:10px; }
.gm-song-close { margin-left:auto; }
.gm-song-scroll { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 2px 8px; }
.gm-song-scroll .kb-genres { position:sticky; top:0; z-index:1; background:var(--white); }
@media (max-width:700px) { .gm-song-sheet { max-height:92vh; padding:12px 12px 8px; } .gm-song-dialog { max-width:calc(100vw - 12px); } }

/* ===================================================================== arcade stage */
/* One shell for every game: the game fills the screen; only four things sit on top of it. */
.ar-stage {
  position:fixed; inset:0; z-index:60; overflow:hidden; background:#9de5fa; color:var(--ink);
  font-family:var(--sans); touch-action:manipulation;
  --ar-yt-w:178px; --ar-yt-h:100.125px; --ar-edge-x:max(16px, env(safe-area-inset-left)); --ar-edge-r:max(16px, env(safe-area-inset-right));
  --ar-edge-t:max(14px, env(safe-area-inset-top)); --ar-edge-b:max(14px, env(safe-area-inset-bottom));
}
.ar-stage[hidden] { display:none; }
.fruit-mode { background:#123b42; }
.runner-mode { background:#f7c5b5; }
.powder-mode { background:#d5edf5; }
.riffwild-mode { background:#bacdc7; }
.ar-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* the game */
.ar-shell { position:absolute; inset:0; isolation:isolate; overflow:hidden; }
.ar-shell canvas#ar-game { position:absolute; inset:0; width:100%; height:100%; touch-action:none; z-index:1; }
#ar-fruit-3d, #ar-runner-3d, #ar-powder-3d, #ar-riffwild-3d { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
#ar-fruit-3d[hidden], #ar-runner-3d[hidden], #ar-powder-3d[hidden], #ar-riffwild-3d[hidden] { display:none; }
.runner-rush .ar-shell { box-shadow:inset 0 0 0 4px #72e7cc; }
.fruit-rush .ar-shell { box-shadow:inset 0 0 0 4px #ffd970; }
.powder-rush .ar-shell { box-shadow:inset 0 0 0 4px #defbff; }
.ar-impact-flash { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; box-shadow:inset 0 0 35px 8px #8de753, inset 0 0 0 4px #c7ff8f; }
.ar-impact-flash[data-kind=miss] { box-shadow:inset 0 0 45px 10px #ff8e80, inset 0 0 0 5px #f15f54; }
.ar-impact-flash[data-kind=streak] { box-shadow:inset 0 0 48px 10px #ffda55, inset 0 0 0 5px #fff4a2; }
/* The running score is drawn as game text, not as a panel. */
.ar-score-wrap { position:absolute; left:50%; top:var(--ar-edge-t); z-index:3; transform:translateX(-50%); display:flex; align-items:center; gap:8px; pointer-events:none; }
.ar-score-wrap strong {
  font-family:var(--display); font-size:clamp(26px, 5.4vh, 40px); line-height:1; color:var(--white); font-variant-numeric:tabular-nums;
  -webkit-text-stroke:1.5px var(--ink); paint-order:stroke fill; text-shadow:3px 4px 0 var(--ink); transform-origin:center;
}
.ar-stage[data-state="ready"] .ar-score-wrap, .ar-stage[data-state="loading"] .ar-score-wrap, .ar-stage[data-state="error"] .ar-score-wrap, .ar-stage[data-state="idle"] .ar-score-wrap, .ar-stage[data-state="starting"] .ar-score-wrap, .ar-stage[data-state="countdown"] .ar-score-wrap { visibility:hidden; }
.ar-combo-badge { display:block; padding:2px 9px; border-radius:999px; background:#e2f7cd; border:2px solid var(--ink); color:#427b1e; font-size:10px; font-weight:800; letter-spacing:.5px; transform-origin:center; }
.ar-combo-badge[data-level=streak] { background:#fff0ab; color:#96700b; }
.ar-feedback { position:absolute; top:22%; left:50%; z-index:3; transform:translateX(-50%); font-family:var(--display); font-size:clamp(22px, 4vh, 30px); color:#fffef2; -webkit-text-stroke:1px #418b26; text-shadow:0 2px 0 #418b26, 2px 0 0 #418b26, -2px 0 0 #418b26, 0 -2px 0 #418b26; pointer-events:none; white-space:nowrap; }
.ar-feedback[data-kind=miss] { color:#fff4ef; -webkit-text-stroke-color:#bd4f46; text-shadow:0 2px 0 #bd4f46, 2px 0 0 #bd4f46, -2px 0 0 #bd4f46, 0 -2px 0 #bd4f46; }
.ar-feedback[data-kind=streak] { color:#fff4ad; -webkit-text-stroke-color:#986e1d; text-shadow:0 2px 0 #986e1d, 2px 0 0 #986e1d, -2px 0 0 #986e1d, 0 -2px 0 #986e1d; }
.runner-mode .ar-feedback, .powder-mode .ar-feedback { visibility:hidden; }

/* the four overlays: exit, pause, video, lyrics */
.ar-corner {
  position:absolute; top:var(--ar-edge-t); z-index:80; width:44px; height:44px; display:grid; place-items:center;
  border:2px solid var(--ink); border-radius:13px; background:var(--white); box-shadow:var(--shadow-sm); transition:transform .1s, box-shadow .1s;
}
.ar-corner svg { width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.ar-corner:active { transform:translate(2px,3px); box-shadow:none; }
.ar-corner[hidden] { display:none; }
.ar-corner-left { left:var(--ar-edge-x); }
.ar-corner-right { right:var(--ar-edge-r); }
.ar-yt { position:absolute; left:var(--ar-edge-x); bottom:var(--ar-edge-b); width:var(--ar-yt-w); height:var(--ar-yt-h); z-index:40; border:2px solid var(--ink); border-radius:12px; overflow:hidden; background:#000; }
.ar-yt iframe, #ar-yt-player { display:block; width:100%; height:100%; border:0; }
.ar-yt-tag { position:absolute; left:8px; top:8px; padding:2px 10px; border:2px solid var(--ink); border-radius:999px; background:var(--red); color:var(--white); font-family:var(--display); font-size:12px; }
.ar-lyrics {
  position:absolute; left:calc(var(--ar-yt-w) + var(--ar-edge-x) + 24px); right:calc(var(--ar-yt-w) + var(--ar-edge-r) + 24px); bottom:var(--ar-edge-b); z-index:20;
  min-height:var(--ar-yt-h); display:flex; flex-direction:column; justify-content:flex-end; align-items:center; text-align:center; gap:4px; pointer-events:none;
}
.ar-line {
  margin:0; font-family:var(--display); color:var(--white); line-height:1.22; -webkit-text-stroke:1.5px var(--ink); paint-order:stroke fill;
  text-shadow:0 3px 0 var(--ink), 0 6px 18px rgba(0,0,0,.45); display:flex; flex-wrap:wrap; justify-content:center; gap:0 .28em; max-width:100%; overflow-wrap:anywhere;
}
.ar-line-now { font-size:clamp(24px, 4.2vh, 40px); }
.ar-line-next { font-size:clamp(14px, 2.4vh, 22px); opacity:.62; }
.ar-line-now span.active, .ar-line-now span.past { color:var(--yellow); }
.ar-line:empty { display:none; }

/* cards between plays: paused and result */
.ar-sheet { position:absolute; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:16px; overflow-y:auto; background:rgba(16,20,24,.42); color:var(--ink); }
.ar-sheet[hidden] { display:none; }
.ar-card { width:min(420px, 100%); margin:auto; padding:22px 22px 20px; background:var(--white); border:2px solid var(--ink); border-radius:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; text-align:center; }
.ar-card h2 { font-size:clamp(22px, 3.4vh, 28px); line-height:1.1; margin:0 0 4px; }
.ar-card p { font-size:13.5px; line-height:1.5; color:var(--text-2); margin:0 0 10px; }
.ar-chip { font-size:10px; letter-spacing:.11em; text-transform:uppercase; font-weight:700; color:var(--blue-600); margin:0 0 6px; }
.ar-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:4px; }
.ar-actions .btn { font-size:14px; }
.ar-floating-bird { display:block; width:88px; height:74px; background-size:contain; background-repeat:no-repeat; background-position:center; margin:0 0 4px; animation:ar-bob 2.7s ease-in-out infinite; }
@keyframes ar-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
.ar-result-stars { font-size:26px; color:#eeb700; letter-spacing:8px; margin-bottom:8px; }
.ar-result-stats { display:flex; gap:24px; margin-bottom:10px; }
.ar-result-stats strong { display:block; font-family:var(--display); font-size:26px; color:var(--ink); }
.ar-result-stats span { font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--muted); }
.ar-result-detail { max-width:340px; }

/* the full-page intro: song loading, then 3 · 2 · 1 on the video clock, then GO! */
.ar-intro {
  position:absolute; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; color:var(--white);
  background:radial-gradient(90% 70% at 50% 40%, rgba(16,20,24,.35), rgba(16,20,24,.72)); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:opacity .38s ease; animation:ar-intro-in .35s ease-out;
}
.ar-intro[hidden] { display:none; }
.ar-intro.leaving { opacity:0; pointer-events:none; }
@keyframes ar-intro-in { from { opacity:0; } to { opacity:1; } }
.ar-intro-body { display:flex; flex-direction:column; align-items:center; gap:4px; width:min(600px, 100%); }
.ar-intro .ar-chip { color:var(--yellow); font-size:12px; letter-spacing:.14em; text-shadow:0 2px 0 var(--ink); }
.ar-intro h2 { font-size:clamp(26px, 5.4vh, 46px); line-height:1.1; margin:0; color:var(--white); -webkit-text-stroke:1.5px var(--ink); paint-order:stroke fill; text-shadow:0 3px 0 var(--ink), 0 8px 24px rgba(0,0,0,.45); }
.ar-ready-artist { margin:0; font-size:clamp(14px, 2.2vh, 18px); color:rgba(255,255,255,.85); text-shadow:0 1px 0 var(--ink); }
.ar-count { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:min(52vh, 320px); height:min(52vh, 320px); margin:6px 0 0; }
.ar-count[hidden] { display:none; }
.ar-count-ring { position:absolute; inset:0; border-radius:50%; border:5px solid rgba(255,255,255,.7); box-shadow:0 0 0 3px rgba(23,23,23,.35), inset 0 0 0 3px rgba(23,23,23,.35); opacity:0; }
.ar-count-ring.tick { animation:ar-ring 1s ease-out; }
@keyframes ar-ring { 0% { transform:scale(.5); opacity:.95; } 100% { transform:scale(1.18); opacity:0; } }
.ar-count strong {
  font-family:var(--display); font-size:clamp(120px, 34vh, 230px); line-height:1; color:var(--white);
  -webkit-text-stroke:5px var(--ink); paint-order:stroke fill; text-shadow:7px 9px 0 var(--ink);
}
.ar-count strong.tick { animation:ar-count-pop .9s cubic-bezier(.2,1.5,.35,1); }
@keyframes ar-count-pop { 0% { transform:scale(2.2) rotate(-8deg); opacity:0; } 30% { transform:scale(.94) rotate(2deg); opacity:1; } 55% { transform:scale(1.07) rotate(0); } 100% { transform:scale(1); } }
.ar-count-note { margin:2px 0 0; padding:5px 16px; border:2px solid var(--ink); border-radius:999px; background:var(--white); color:var(--ink); font-family:var(--display); font-size:15px; }
.riffwild-mode .ar-count-note { visibility:hidden; }
.ar-go {
  position:absolute; left:50%; top:50%; z-index:72; transform:translate(-50%,-50%); pointer-events:none; opacity:0;
  font-family:var(--display); font-size:clamp(96px, 30vh, 220px); line-height:1; color:var(--yellow);
  -webkit-text-stroke:6px var(--ink); paint-order:stroke fill; text-shadow:8px 10px 0 var(--ink);
}
.ar-go[hidden] { display:none; }
.ar-go.burst { animation:ar-go 1s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes ar-go { 0% { transform:translate(-50%,-50%) scale(.35) rotate(-10deg); opacity:0; } 22% { transform:translate(-50%,-50%) scale(1.15) rotate(3deg); opacity:1; } 55% { transform:translate(-50%,-50%) scale(1) rotate(0); opacity:1; } 100% { transform:translate(-50%,-50%) scale(1.7); opacity:0; } }
.ar-loader { display:flex; gap:9px; margin:18px 0 6px; }
.ar-loader[hidden] { display:none; }
.ar-loader i { width:13px; height:13px; border-radius:50%; background:var(--white); border:2px solid var(--ink); animation:ar-dot 1s ease-in-out infinite; }
.ar-loader i:nth-child(2) { animation-delay:.16s; } .ar-loader i:nth-child(3) { animation-delay:.32s; }
@keyframes ar-dot { 0%,100% { transform:translateY(0); opacity:.55; } 50% { transform:translateY(-9px); opacity:1; } }
.ar-status { min-height:1.2em; margin:6px 0 0; font-size:14px; color:rgba(255,255,255,.85); text-shadow:0 1px 0 var(--ink); }
.ar-best { margin:4px 0 0; font-size:13.5px; font-weight:700; color:var(--yellow); text-shadow:0 1px 0 var(--ink); }
.ar-best:empty, .ar-status:empty { display:none; }
.ar-message { width:min(440px, 100%); margin:12px 0 0; padding:10px 12px; border:2px solid var(--ink); border-radius:12px; background:var(--pale-yellow); color:var(--ink); font-size:13.5px; line-height:1.5; text-shadow:none; }
.ar-message[hidden] { display:none; }
.ar-start { margin-top:12px; font-size:16px; padding:11px 22px; }
.ar-start[hidden] { display:none; }

@media (max-width:700px) {
  .ar-stage { --ar-yt-w:132px; --ar-yt-h:74.25px; --ar-edge-x:max(12px, env(safe-area-inset-left)); --ar-edge-r:max(12px, env(safe-area-inset-right)); }
  .ar-corner { width:40px; height:40px; }
  .ar-lyrics { left:12px; right:12px; bottom:calc(var(--ar-yt-h) + var(--ar-edge-b) + 14px); min-height:0; }
  .ar-line-now { font-size:clamp(20px, 3.6vh, 30px); }
  .ar-line-next { font-size:clamp(13px, 2.2vh, 18px); }
  .ar-card { padding:16px 16px 14px; }
}
@media (max-height:520px) {
  .ar-card { padding:14px 18px 12px; }
  .ar-floating-bird { display:none; }
  .ar-count { width:min(70vh, 220px); height:min(70vh, 220px); margin:0; }
  .ar-intro h2 { font-size:24px; }
}
@media (prefers-reduced-motion:reduce) { .ar-stage *, .ar-stage *::before, .ar-stage *::after { animation:none !important; transition:none !important; } }