/* ENGINE — base layout, screens, controls (Marcus Bell). Art appends its own block below. */
:root {
  --bg: #0b0a14;
  --ink: #f4f1ff;
  --dim: #a9a3c4;
  --panel: rgba(12, 10, 24, 0.86);
  --line: rgba(255, 255, 255, 0.14);
  --gold: #ffd23f;
  --hot: #ff3b5c;
  --drums: #FF5A36; --bass: #3DD6F5; --guitar: #F5C542; --keys: #9B7BFF;
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --font: "Arial Black", "Helvetica Neue", Helvetica, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; width: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink); font-family: var(--body);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body { position: fixed; inset: 0; }
#stage { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; height: 100dvh; touch-action: none; background: var(--bg); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; touch-action: manipulation; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0.05em 0.4em; margin-right: 0.35em;
  border: 1px solid currentColor; border-radius: 0.3em; font: 800 0.85em/1.3 var(--body); text-align: center; opacity: 0.85;
}
html.coarse .only-fine { display: none !important; }
html.fine .only-coarse { display: none !important; }

/* ---------- screens ---------- */
.screen {
  position: fixed; inset: 0; z-index: 10; touch-action: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
  padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));
  text-align: center; overflow: auto;
}
.btn {
  min-height: 48px; padding: 0.7em 1.1em; border-radius: 12px;
  border: 2px solid var(--line); background: rgba(255, 255, 255, 0.06); color: var(--ink);
  font: 900 clamp(14px, 1.7vw, 18px)/1.1 var(--font); letter-spacing: 0.04em; cursor: pointer;
}
.btn:hover, .btn:focus-visible { border-color: var(--ink); outline: none; }
.btn.on { border-color: var(--gold); color: var(--gold); }
.btn-go { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-big { font-size: clamp(18px, 3vw, 30px); padding: 0.8em 1.6em; }

/* TITLE */
.screen-title {
  justify-content: flex-end;
  /* fallback only; Art's .keyart (later in this file) owns the final look */
  background: linear-gradient(180deg, rgba(11,10,20,0.15) 0%, rgba(11,10,20,0.35) 55%, rgba(11,10,20,0.92) 100%),
    url("../img/keyart.jpg") center / cover no-repeat, var(--bg);
}
.title-block { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding-bottom: 6vh; }
.title-logo { margin: 0; font: 900 clamp(40px, 9vw, 120px)/0.9 var(--font); letter-spacing: -0.02em; text-shadow: 0 4px 0 #000, 0 0 30px rgba(0,0,0,0.7); }
.title-tag { margin: 0; font: 700 clamp(15px, 2.2vw, 24px)/1.3 var(--body); text-shadow: 0 2px 6px #000; }
.title-challenge { margin: 0; padding: 0.5em 0.9em; border-radius: 10px; background: rgba(0,0,0,0.6); color: var(--gold); font: 800 clamp(14px, 2vw, 20px)/1.3 var(--body); }
.prompt { animation: nc-pulse 1.1s ease-in-out infinite; background: rgba(0,0,0,0.55); }
.title-url { position: absolute; bottom: calc(10px + var(--sab)); right: calc(14px + var(--sar)); margin: 0; font: 700 12px var(--body); color: var(--dim); }
@keyframes nc-pulse { 50% { transform: scale(1.04); } }

/* JOIN */
.screen-join { background: rgba(11, 10, 20, 0.92); gap: 0.9rem; }
.join-head { margin: 0; font: 900 clamp(26px, 5vw, 56px)/1 var(--font); }
.join-sub { margin: 0; color: var(--dim); font-size: clamp(14px, 2vw, 20px); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 18px); width: min(980px, 100%); }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5em;
  padding: clamp(8px, 1.2vw, 16px); border-radius: 16px; border: 3px solid var(--line);
  background: rgba(255,255,255,0.04); cursor: pointer; min-height: 48px; touch-action: none;
}
.tile .avatar { width: 100%; max-width: 180px; aspect-ratio: 1; height: auto; border-radius: 12px; object-fit: cover; filter: grayscale(1) brightness(0.55); transition: filter 120ms; pointer-events: none; }
.tile-label { font: 900 clamp(13px, 1.8vw, 20px)/1.1 var(--font); color: var(--lane); white-space: nowrap; }
.tile-label kbd { margin: 0 0 0 0.3em; color: var(--ink); }
.tile-who { font: 800 clamp(12px, 1.4vw, 15px)/1 var(--body); letter-spacing: 0.12em; color: var(--dim); }
.tile.claimed { border-color: var(--lane); background: color-mix(in srgb, var(--lane) 16%, transparent); }
.tile.claimed .avatar { filter: none; }
.tile.claimed .tile-who { color: var(--ink); }
.tile.hitflash { animation: nc-tile 220ms ease-out; }
@keyframes nc-tile { 0% { transform: scale(1.07); box-shadow: 0 0 0 6px var(--lane); } 100% { transform: none; box-shadow: none; } }
.join-msg { min-height: 1.3em; margin: 0; color: var(--gold); font-weight: 800; }
.join-actions, .calib-actions, .pause-actions, .results-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.join-foot { margin: 0; color: var(--dim); font-size: 13px; }

/* CALIBRATE */
.screen-calib { background: rgba(11, 10, 20, 0.95); }
.calib-head { margin: 0; font: 900 clamp(30px, 6vw, 64px)/1 var(--font); }
.calib-text { margin: 0; font-size: clamp(16px, 2.4vw, 24px); }
.calib-dots { display: flex; gap: 12px; }
.calib-dots .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); }
.calib-dots .dot.on { background: var(--ink); }
.calib-result { min-height: 1.4em; margin: 0; font: 900 clamp(20px, 3vw, 32px)/1.2 var(--font); color: var(--gold); }

/* COUNT (over the canvas; never blocks the tap zones) */
.screen-count { pointer-events: none; background: transparent; justify-content: center; }
.count-num { font: 900 clamp(120px, 30vh, 320px)/1 var(--font); color: var(--ink); text-shadow: 0 6px 0 #000; min-height: 1em; }
.count-num.pop { animation: nc-count 0.46s ease-out; }
@keyframes nc-count { 0% { transform: scale(1.5); opacity: 0.4; } 30% { opacity: 1; } 100% { transform: scale(1); opacity: 0.85; } }
.count-help { position: absolute; bottom: calc(12% + var(--sab)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.count-hints { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hint { padding: 0.35em 0.7em; border-radius: 8px; background: rgba(0,0,0,0.7); border: 2px solid var(--lane); color: var(--lane); font: 900 clamp(14px, 1.8vw, 20px)/1 var(--font); }
.count-line { margin: 0; padding: 0.3em 0.7em; background: rgba(0,0,0,0.6); border-radius: 8px; font: 800 clamp(14px, 1.8vw, 20px)/1.2 var(--body); }

/* PLAY: canvas only; HUD is drawn by render.js */
.screen-play { display: none; }

/* PAUSE */
.screen-pause { background: rgba(5, 4, 12, 0.82); }
.pause-head { margin: 0; font: 900 clamp(40px, 8vw, 90px)/1 var(--font); }
.pause-sub { margin: 0; font-size: clamp(16px, 2.4vw, 24px); color: var(--dim); }
.pause-num { font-size: clamp(80px, 18vh, 200px); min-height: 0; }

/* FAIL */
.screen-fail { pointer-events: none; background: transparent; }
.fail-stamp {
  display: flex; flex-direction: column; align-items: center; gap: 0.3em; padding: 0.5em 0.8em;
  border: 6px solid var(--hot); border-radius: 10px; color: var(--hot); background: rgba(0,0,0,0.55);
  transform: rotate(-8deg); animation: nc-stamp 220ms cubic-bezier(.2,1.6,.4,1);
}
.fail-big { font: 900 clamp(28px, 6vw, 72px)/1 var(--font); }
.fail-when { font: 800 clamp(16px, 2.4vw, 26px)/1 var(--body); }
@keyframes nc-stamp { 0% { transform: rotate(-8deg) scale(2.2); opacity: 0; } 100% { transform: rotate(-8deg) scale(1); opacity: 1; } }

/* RESULTS: one card that reads at 16:9 and 9:16 */
.screen-results { background: rgba(8, 7, 16, 0.94); gap: 0.8rem; justify-content: flex-start; touch-action: pan-y; }
.card {
  width: min(760px, 100%); margin-top: auto; padding: clamp(14px, 2.4vw, 28px); border-radius: 18px;
  border: 2px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: clamp(8px, 1.4vw, 14px);
}
.card-kicker { margin: 0; font: 900 12px/1 var(--font); letter-spacing: 0.3em; color: var(--dim); }
.card-band { margin: 0; font: 900 clamp(28px, 6.4vw, 64px)/0.95 var(--font); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.card-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.stat { flex: 1 1 140px; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,0.05); }
.stat-k { font: 800 11px/1 var(--body); letter-spacing: 0.18em; color: var(--dim); }
.stat-v { font: 900 clamp(22px, 4vw, 40px)/1 var(--font); }
.grade[data-grade="S"] { color: var(--gold); }
.grade[data-grade="SHUT-DOWN"] { color: var(--hot); font-size: clamp(18px, 3vw, 30px); }
.card-shutdown { margin: 0; color: var(--hot); font-weight: 800; }
.card-people { justify-content: space-between; }
.person { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px; border-radius: 12px; background: rgba(255,255,255,0.05); }
.person > div { display: flex; flex-direction: column; gap: 4px; }
.person-v { font: 900 clamp(15px, 2.2vw, 22px)/1.1 var(--font); }
.avatar.sm { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.avatar.xs { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.strip { display: flex; flex-direction: column; gap: 6px; }
.strip-lane { display: grid; grid-template-columns: 28px 9.2em 1fr 52px; gap: 8px; align-items: center; text-align: left; }
.strip-lane.bot { opacity: 0.6; }
.strip-name { font: 900 13px/1 var(--font); color: var(--lane); white-space: nowrap; }
.strip-bar { height: 10px; border-radius: 5px; background: rgba(255,255,255,0.1); overflow: hidden; }
.strip-fill { display: block; height: 100%; background: var(--lane); }
.strip-pc { font: 800 13px/1 var(--body); text-align: right; }
.card-beat { margin: 0; font: 900 clamp(15px, 2.2vw, 22px)/1.2 var(--font); color: var(--gold); }
.card-url { margin: 0; font: 800 12px/1 var(--body); letter-spacing: 0.1em; color: var(--dim); }
.results-actions { margin-bottom: auto; }
.results-link { margin: 0; padding: 0.4em 0.8em; background: rgba(0,0,0,0.6); border-radius: 8px; font: 600 13px var(--body); user-select: all; -webkit-user-select: all; word-break: break-all; }

@media (max-aspect-ratio: 1/1) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile .avatar { max-width: 120px; }
}
@media (max-height: 520px) {
  .screen { gap: 0.5rem; }
  .tile .avatar { max-width: 92px; }
  .card { gap: 6px; padding: 12px; }
  .card-band { font-size: clamp(22px, 5vw, 40px); }
  .stat { padding: 6px; }
  .stat-v { font-size: 22px; }
  .avatar.sm { width: 40px; height: 40px; }
  .strip { gap: 3px; }
}

/* ---------- in-game chrome ---------- */
.pause-btn {
  position: fixed; z-index: 30; top: calc(8px + var(--sat)); right: calc(8px + var(--sar));
  width: 48px; height: 48px; border-radius: 12px; border: 2px solid var(--line);
  background: rgba(0,0,0,0.5); color: var(--ink); font: 900 22px/1 var(--body); cursor: pointer; touch-action: none;
}
body[data-screen="play"] .pause-btn, body[data-screen="count"] .pause-btn { top: calc(56px + var(--sat)); }
html.fine .pause-btn { opacity: 0.55; }

/* touch tap zones: full height, human lanes only, side by side */
.zones {
  position: fixed; z-index: 5; inset: 0; display: flex;
  padding: 0 var(--sar) var(--sab) var(--sal);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.zone { position: relative; flex: 1 1 0; border-right: 1px solid rgba(255,255,255,0.08); }
.zone:last-child { border-right: 0; }
.zone-label {
  position: absolute; left: 50%; bottom: calc(10px + var(--sab)); transform: translateX(-50%);
  padding: 0.3em 0.6em; border-radius: 8px; background: rgba(0,0,0,0.55); border: 2px solid var(--lane, #fff);
  font: 900 15px/1 var(--font); white-space: nowrap; pointer-events: none;
}

/* portrait phone: TURN IT SIDEWAYS (only blocks during count/play/join) */
.rotate { display: none; }
html.coarse.portrait .rotate {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(11,10,20,0.96); font: 900 clamp(28px, 9vw, 48px)/1.1 var(--font); text-align: center; padding: 24px;
}
html.coarse.portrait body[data-screen="results"] .rotate { display: none; }   /* the card reads at 9:16 */
html.coarse.portrait .rotate span { animation: nc-rot 1.6s ease-in-out infinite; display: inline-block; }
@keyframes nc-rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

.toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(24px + var(--sab)); transform: translate(-50%, 20px);
  padding: 0.7em 1.1em; border-radius: 12px; background: var(--ink); color: var(--bg);
  font: 900 15px/1.2 var(--font); opacity: 0; pointer-events: none; transition: opacity 160ms, transform 160ms;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.debug {
  position: fixed; z-index: 70; left: calc(6px + var(--sal)); bottom: calc(6px + var(--sab)); margin: 0;
  padding: 6px 8px; background: rgba(0,0,0,0.75); color: #9f9; font: 11px/1.35 ui-monospace, Menlo, Consolas, monospace;
  pointer-events: none; white-space: pre; border-radius: 6px;
}
.noscript { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font: 900 24px var(--font); }
@media (prefers-reduced-motion: reduce) {
  .prompt, .count-num.pop, .tile.hitflash, .fail-stamp, html.coarse.portrait .rotate span { animation: none !important; }
}
/* /ENGINE */

/* ART — Marisol Vance (Art & VFX). Owns the key-art screens and the canvas-adjacent chrome look.
   Canvas draws the city, highway and HUD; these rules only dress the DOM screens over it. */
.keyart {
  background:
    radial-gradient(120% 80% at 50% 105%, rgba(5,4,12,0.96) 0%, rgba(5,4,12,0.78) 32%, rgba(5,4,12,0.18) 62%, rgba(5,4,12,0) 80%),
    linear-gradient(180deg, rgba(5,4,12,0.55) 0%, rgba(5,4,12,0) 22%, rgba(5,4,12,0) 48%, rgba(5,4,12,0.88) 100%),
    url("../img/keyart.jpg") center 38% / cover no-repeat,
    #0b0a14;
}
.screen-title.keyart .title-logo {
  background: linear-gradient(180deg, #FFF7E8 0%, #FFE2A8 55%, #FF9A5A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 0; text-shadow: none;
  filter: drop-shadow(0 4px 0 #07060c) drop-shadow(0 0 28px rgba(255,140,90,0.35));
  letter-spacing: -0.03em;
}
.screen-title .title-tag { color: #F4F1FF; letter-spacing: 0.02em; }
.screen-title .prompt {
  border-color: rgba(255,226,168,0.7); color: #FFE2A8; background: rgba(7,6,12,0.62);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 10px 30px rgba(0,0,0,0.45);
}
.screen-title .title-challenge { border: 1px solid rgba(255,211,63,0.45); }

/* JOIN + RESULTS: let the breathing city show through instead of a flat wall of ink */
.screen-join { background: radial-gradient(90% 70% at 50% 45%, rgba(8,7,16,0.72) 0%, rgba(8,7,16,0.9) 100%); }
.screen-results.keyart, .screen-results {
  background:
    linear-gradient(180deg, rgba(5,4,12,0.80) 0%, rgba(5,4,12,0.90) 60%, rgba(5,4,12,0.96) 100%),
    url("../img/keyart.jpg") center 38% / cover no-repeat, #0b0a14;
}
.tile { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); }
.tile .avatar { border-radius: 50%; box-shadow: 0 0 0 3px #07060c, 0 0 0 5px rgba(255,255,255,0.12); }
.tile.claimed .avatar { box-shadow: 0 0 0 3px #07060c, 0 0 0 6px var(--lane), 0 0 34px color-mix(in srgb, var(--lane) 55%, transparent); }
.tile-label .tile-shape { -webkit-text-stroke: 1px #07060c; }
.card {
  background: linear-gradient(180deg, rgba(20,16,36,0.92), rgba(10,8,20,0.94));
  border-color: rgba(255,226,168,0.22);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.card-band {
  background: linear-gradient(180deg, #FFF7E8 0%, #FFD9A0 70%, #FF9A5A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.avatar.sm, .avatar.xs { border-radius: 50%; box-shadow: 0 0 0 2px #07060c, 0 0 0 3px rgba(255,255,255,0.18); }
.strip-fill { box-shadow: 0 0 12px color-mix(in srgb, var(--lane) 60%, transparent); }
.count-num { color: #FFF4DA; text-shadow: 0 6px 0 #07060c, 0 0 40px rgba(255,170,110,0.35); }
.hint { background: rgba(7,6,12,0.78); }
.zone-label { background: rgba(7,6,12,0.72); font-size: 12px; padding: 0.35em 0.6em; border-width: 1.5px; }
/* tap zones: a faint lane-coloured floor glow shows which half is yours; labels move to the outer
   corners so they never sit on the canvas pads (avatars + shapes at the hit line) */
.zone::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--lane, #fff) 16%, transparent), transparent);
}
.zones[data-count="1"] .zone-label,
.zones[data-count="2"] .zone:first-child .zone-label { left: calc(10px + var(--sal)); transform: none; }
.zones[data-count="2"] .zone:last-child .zone-label { left: auto; right: calc(10px + var(--sar)); transform: none; }
.zones[data-count="4"] .zone-label { display: none; }  /* Hard: quarters follow lane order; the floor tint is enough */
.fail-stamp { background: rgba(7,6,12,0.72); box-shadow: 0 0 0 3px #07060c, 0 18px 50px rgba(0,0,0,0.6); }
@media (prefers-reduced-motion: reduce) {
  .screen-title.keyart .title-logo { filter: drop-shadow(0 4px 0 #07060c); }
}
/* landscape phone: the whole results card + its buttons fit one screen */
@media (max-height: 520px) and (min-aspect-ratio: 4/3) {
  .screen-results { justify-content: center; gap: 6px; padding-top: calc(6px + var(--sat)); padding-bottom: calc(6px + var(--sab)); }
  .screen-results .card { margin-top: 0; padding: 8px 14px; gap: 5px; width: min(820px, 100%); }
  .screen-results .card-kicker { display: none; }
  .screen-results .card-band { font-size: clamp(20px, 6.2vh, 30px); }
  .screen-results .card-row { gap: 6px; }
  .screen-results .stat { flex-direction: row; align-items: baseline; justify-content: center; gap: 8px; padding: 4px 8px; }
  .screen-results .stat-k { font-size: 9px; }
  .screen-results .stat-v { font-size: 20px; }
  .screen-results .person { padding: 4px 8px; }
  .screen-results .person-v { font-size: 15px; }
  .screen-results .avatar.sm { width: 30px; height: 30px; }
  .screen-results .strip { gap: 2px; }
  .screen-results .strip-lane { grid-template-columns: 18px minmax(84px, auto) 1fr 44px; gap: 6px; }
  .screen-results .avatar.xs { width: 18px; height: 18px; }
  .screen-results .strip-name, .screen-results .strip-pc { font-size: 11px; }
  .screen-results .strip-bar { height: 7px; }
  .screen-results .card-beat { font-size: 14px; }
  .screen-results .card-url { font-size: 10px; }
  .screen-results .results-actions { margin-bottom: 0; gap: 8px; }
  .screen-results .results-actions .btn { min-height: 44px; padding: 0.5em 1em; font-size: 14px; }
}
/* /ART */

/* ENGINE: stems loading on PLAY */
.btn-go.loading { pointer-events: none; font-variant-numeric: tabular-nums; animation: nc-load-pulse 1s ease-in-out infinite; }
@keyframes nc-load-pulse { 50% { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .btn-go.loading { animation: none; } }

/* ENGINE: song picker (levels from the song-to-level box) */
.btn-song { border-color: var(--gold); color: var(--gold); max-width: min(100%, 26em); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }