/* v3/app.css — All styles, single file. */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; background:#070a1a; color:#c9d3ea; font-family: ui-monospace, "SF Mono", Menlo, monospace; overflow:hidden; }
.page { width:100vw; height:100vh; display:flex; align-items:stretch; justify-content:center; flex-direction:column; overflow:hidden; }
.stage-wrap { flex:1 1 auto; min-height:0; display:grid; place-items:center; padding:0; }
.stage {
  position:relative;
  /* Per-chassis vars override these defaults */
  --stage-ar: 16/10;
  --stage-w: min(96vw, 88vh * 16/10);
  --screen-cx: 50%;
  --screen-cy: 50%;
  --screen-w: 96%;
  --screen-mh: 96%;
  --screen-radius: 6px;
  aspect-ratio: var(--stage-ar);
  width: var(--stage-w);
  height: auto;
  background:#0b0f24;
  border:1px solid #1a2440;
  border-radius:14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.02);
}

/* --- Scenes — 16:10 rect centered in the chassis cutout --- */
.scene {
  position:absolute;
  left: var(--screen-cx); top: var(--screen-cy);
  transform: translate(-50%,-50%);
  aspect-ratio: 16/10;
  width: var(--screen-w);
  max-width: var(--screen-mw, 100%);
  max-height: var(--screen-mh);
  display:none;
  flex-direction:column;
  background:#070a1a;
  overflow:hidden;
  border-radius: var(--screen-radius);
  z-index:2;
}
.scene.active { display:flex; }

/* Canvas fills its scene */
.scene[data-scene="lobby"] canvas,
.scene[data-scene="ingame"] canvas {
  width:100%; height:100%; display:block;
  background:#070a1a;
  image-rendering: pixelated;
}

/* --- Arcade grid --- */
.arcade-head { padding: 18px 24px 8px; align-self:flex-start; }
.arcade-title { font-size: 22px; color:#f5b301; letter-spacing: 4px; font-weight:700; }
.arcade-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:12px; padding: 8px 24px 24px; overflow:auto; width:100%; height: calc(100% - 70px); align-content:flex-start; }
.game-card { background: linear-gradient(180deg,#11172e,#0b0f24); border:1px solid #1a2440; border-radius:10px; padding: 14px 10px; display:flex; flex-direction:column; gap:8px; cursor:pointer; transition: transform .15s, border-color .15s; }
.game-card:hover { transform: translateY(-2px); }
.game-card.sel, .game-card.nav-focus { border-color:#f5b301; box-shadow: 0 0 0 1px #f5b301, 0 8px 24px rgba(245,179,1,.15); transform: translateY(-2px); }
.game-card .art { aspect-ratio: 16/9; background:#070a1a; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size: 22px; font-weight:700; letter-spacing:1px; overflow:hidden; }
.game-card .art .letters span { display:inline-block; padding: 0 2px; }
.game-card .art .lk { color:#ef4444; } .game-card .art .lu { color:#f5b301; }
.game-card .art .ll { color:#22c55e; } .game-card .art .lg { color:#38bdf8; }
.game-card .art .la { color:#a855f7; } .game-card .art .lm { color:#ec4899; }
.game-card .art .le { color:#fde68a; } .game-card .art .ls { color:#9aa7c8; }
.game-card .meta { display:flex; flex-direction:column; gap:2px; }
.game-card .name { font-size: 12px; color:#c9d3ea; font-weight:600; }
.game-card .genre { font-size: 10px; color:#7b88ad; text-transform: uppercase; letter-spacing: 1px; }
.game-card .hi { display:flex; justify-content:space-between; font-size:10px; color:#f5b301; margin-top:4px; }

/* HUD buttons / hint rail positioned at scene top-corners so they live inside the screen */
.scene[data-scene="lobby"], .scene[data-scene="arcade"], .scene[data-scene="ingame"] { z-index:2; }

/* --- HUD buttons --- */
.hud-btn { position:absolute; top:12px; background: rgba(11,15,36,.7); border:1px solid #1a2440; color:#c9d3ea; font-family:inherit; font-size:11px; padding:6px 10px; border-radius:6px; cursor:pointer; z-index:20; }
.hud-btn:hover { border-color:#f5b301; color:#f5b301; }
.back-btn { left:12px; display:none; }
.back-btn.show, .scene[data-scene="arcade"] ~ .back-btn, .scene[data-scene="ingame"] ~ .back-btn { display:inline-block; }
.scene[data-scene="lobby"].active ~ .back-btn { display:none; }
.gear-btn { right:12px; font-size:14px; }

/* --- Hint rail --- */
.input-hint-rail { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:15; pointer-events:none; }
.input-hint-rail .chip { display:inline-flex; align-items:center; gap:6px; background: rgba(11,15,36,.85); border:1px solid #1a2440; padding:4px 10px; border-radius:99px; font-size:10px; color:#9aa7c8; }
.input-hint-rail .chip .hk { display:inline-block; width:18px; height:18px; line-height:18px; text-align:center; border-radius:4px; background:#1a2440; color:#f5b301; font-weight:700; font-size:10px; }
.input-hint-rail .chip .hk.dpad { background:#1a2440; color:#9aa7c8; }
.input-hint-rail .chip.pulse { box-shadow: 0 0 0 2px #f5b301; }

/* --- On-screen controls (overlay; positioned per-chassis in chassis.css) --- */
.controls { position:absolute; inset:0; pointer-events:none; z-index:10; }
.controls > * { pointer-events:auto; }
.controls .k, .controls .fb, .controls .s { user-select:none; cursor:pointer; }
.controls .k.empty { visibility:hidden; }
.controls .k.pressed, .controls .fb.pressed, .controls .fb.flash {
  filter: brightness(1.4);
  transform: scale(0.94);
}
.controls .fb.btn-disabled, .controls .s.btn-disabled { opacity:.3; pointer-events:none; }

/* --- PC keyboard deck (lives outside .stage, only shown for device-pc) --- */
.pc-deck { display:none; }

/* --- HP bar --- */
.hpbar { position:absolute; top:12px; left:60px; display:flex; gap:3px; z-index:15; }
.hpbar .cell { width:10px; height:10px; border-radius:2px; background:#1a2440; }
.hpbar .cell.lk { background:#ef4444; } .hpbar .cell.lu { background:#f5b301; }
.hpbar .cell.ll { background:#22c55e; } .hpbar .cell.lg { background:#38bdf8; }
.hpbar .cell.la { background:#a855f7; } .hpbar .cell.lm { background:#ec4899; }
.hpbar .cell.le { background:#fde68a; } .hpbar .cell.ls { background:#9aa7c8; }
.hpbar .cell.off { background:#1a2440; opacity:.3; }

/* --- Pause / Gameover modal --- */
.modal { background:#0b0f24; border:1px solid #f5b301; border-radius:12px; padding: 24px 36px; text-align:center; min-width:260px; }
.m-title { font-size:24px; letter-spacing:6px; color:#f5b301; margin-bottom:18px; font-weight:700; }
.m-list { display:flex; flex-direction:column; gap:8px; }
.m-list button { background:#1a2440; color:#c9d3ea; border:1px solid transparent; padding: 8px 14px; border-radius:6px; font-family:inherit; font-size:12px; cursor:pointer; letter-spacing:2px; }
.m-list button.sel, .m-list button.nav-focus, .m-list button:hover { background:#f5b301; color:#0b0f24; }
.go-score, .go-hi { font-size:12px; color:#9aa7c8; margin-bottom:8px; letter-spacing:2px; }
.go-score span { color:#f5b301; }

/* --- Settings panel --- */
.settings-overlay { position:fixed; inset:0; background: rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:100; }
.settings-overlay.open { display:flex; }
.settings-panel { background:#0b0f24; border:1px solid #1a2440; border-radius:12px; width: min(680px, 92vw); max-height: 90vh; overflow:hidden; display:flex; flex-direction:column; }
.settings-head { display:flex; align-items:center; justify-content:space-between; padding: 10px 14px; border-bottom:1px solid #1a2440; }
.tabs { display:flex; gap:4px; }
.tabs button { background:transparent; color:#7b88ad; border:none; padding: 6px 10px; font-family:inherit; font-size:11px; cursor:pointer; border-radius:6px; letter-spacing:1px; text-transform:uppercase; }
.tabs button.sel, .tabs button.nav-focus { background:#f5b301; color:#0b0f24; }
.close-x { background:transparent; border:none; color:#9aa7c8; font-size:20px; cursor:pointer; padding:4px 10px; }
.settings-body { padding: 16px 18px; overflow:auto; }
.page-section { display:none; }
.page-section.active { display:block; }
.page-section h3 { font-size:11px; color:#7b88ad; margin: 18px 0 8px; letter-spacing:2px; text-transform:uppercase; }
.device-grid { display:grid; grid-template-columns: repeat(6, 1fr); gap:6px; }
.device-grid .card { padding: 14px 8px; text-align:center; background:#1a2440; border-radius:6px; cursor:pointer; font-size:11px; border:1px solid transparent; }
.device-grid .card.sel, .device-grid .card.nav-focus { border-color:#f5b301; color:#f5b301; }
.seg { display:flex; gap:4px; flex-wrap:wrap; }
.seg button { background:#1a2440; color:#c9d3ea; border:1px solid transparent; padding: 6px 10px; border-radius:6px; font-family:inherit; font-size:11px; cursor:pointer; }
.seg button.sel, .seg button.nav-focus { background:#f5b301; color:#0b0f24; }
.kb-grid { display:grid; grid-template-columns: 1fr 1fr; gap:4px 18px; font-size:11px; }
.kb-grid > div:nth-child(odd) { color:#f5b301; font-weight:600; }
.row { display:flex; align-items:center; gap:10px; }
.row input[type="range"] { flex:1; }
.toggle { background:#1a2440; padding: 6px 12px; border-radius:99px; font-size:10px; cursor:pointer; }
.toggle.on { background:#22c55e; color:#0b0f24; }
.storage { background:#1a2440; border-radius:4px; overflow:hidden; height:10px; }
.storage .bar { height:100%; background: linear-gradient(90deg, #22c55e, #f5b301); width:0; transition: width .2s; }
.dim { color:#7b88ad; font-size:10px; margin-top:4px; }
button.danger { background:#ef4444; color:#fff; border:none; padding: 8px 14px; border-radius:6px; cursor:pointer; font-family:inherit; font-size:11px; }

/* Phone sim console */
.phone-sim { display:none; flex-direction:column; gap:8px; padding:8px; background:#0b0f24; border:1px solid #1a2440; border-radius:8px; min-width:160px; }
.controls.mode-phone-sim .phone-sim { display:flex; }
.controls.mode-phone-sim .dpad, .controls.mode-phone-sim .face, .controls.mode-phone-sim .sys { display:none; }
.ps-header { font-size:10px; color:#f5b301; letter-spacing:2px; }
.ps-pad { display:grid; grid-template-columns: repeat(2,1fr); gap:4px; }
.ps-pad button { background:#1a2440; color:#c9d3ea; border:none; padding:4px 6px; font-size:10px; border-radius:4px; cursor:pointer; font-family:inherit; }
.ps-log { max-height:60px; overflow:auto; font-size:9px; color:#7b88ad; }
.ps-finger { display:none; position:fixed; width:24px; height:24px; border-radius:50%; background:rgba(245,179,1,.5); pointer-events:none; transform:translate(-50%,-50%); z-index:999; box-shadow:0 0 12px rgba(245,179,1,.8); }

/* Frames - simplified */
.frame { display:none; }
.nes-pad-mount { display:none; }

/* Style variants */
.style-mono { filter: grayscale(1); }
.style-neon { filter: saturate(1.6) contrast(1.1); }
.style-chroma { filter: hue-rotate(40deg) saturate(1.3); }

/* Nav focus */
html:not(.nav-show-focus) .nav-focus { outline:none; }
.nav-focus { outline:2px solid #f5b301; outline-offset:2px; }

/* Loading screen */
.load-screen { position:fixed; inset:0; z-index:9999; background:#070a1a; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; transition:opacity .4s ease; }
.load-screen.done { opacity:0; pointer-events:none; }
.load-logo { display:flex; gap:4px; font-weight:900; font-size:32px; letter-spacing:-.02em; }
.load-logo span { padding:4px 10px; border-radius:4px; line-height:1; }
.load-logo .lk { background:#b86c3b; color:#0b1020; }
.load-logo .lu { background:#f0a73d; color:#0b1020; }
.load-logo .ll { background:#4a4a4a; color:#dcdcdc; }
.load-bar-wrap { width:240px; height:6px; background:#1a2440; border-radius:3px; overflow:hidden; }
.load-bar { height:100%; width:0%; background:linear-gradient(90deg,#3b82f6,#f5b301); border-radius:3px; transition:width .2s ease; }
.load-msg { color:#7b88ad; font-size:11px; letter-spacing:.12em; }

/* Focus pill */
.focus-pill { display:none; position:fixed; top:10px; left:50%; transform:translateX(-50%); padding:7px 14px; background:rgba(244,180,0,.95); color:#1a1206; font-size:10px; letter-spacing:1px; border-radius:6px; z-index:9999; pointer-events:none; }
.focus-pill.show { display:block; }

/* Topbar / tabbar */
.topbar { display:flex; align-items:center; gap:18px; padding:10px 16px; background:#fff; color:#0b1020; border-bottom:1px solid #e6e9f2; font-family:ui-sans-serif,system-ui,sans-serif; flex-shrink:0; }
.tb-logo { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.06em; color:#0284c7; font-size:15px; }
.tb-mark { width:28px; height:28px; border-radius:6px; background:#0b1020; display:grid; place-items:center; color:#f5b301; font-weight:900; font-size:10px; box-shadow:inset 0 0 0 2px #f5b301; }
.tb-nav { display:flex; gap:14px; font-weight:600; color:#0ea5e9; font-size:12px; }
.tb-nav a { color:#0ea5e9; text-decoration:none; cursor:pointer; }
.tb-sp { flex:1; }
.tabbar { display:flex; justify-content:center; gap:10px; padding:8px; background:#fff; border-bottom:1px solid #e6e9f2; flex-shrink:0; }
.tabpill { padding:6px 18px; border-radius:22px; border:1px solid #e6e9f2; font-weight:700; font-size:13px; color:#475569; background:#fff; cursor:pointer; font-family:inherit; }
.tabpill.active { background:#f5b301; color:#0b1020; border-color:#e9a800; }

/* Lobby HUD chrome */
.lobby-hud-top { position:absolute; top:10px; left:0; right:0; display:flex; justify-content:space-between; padding:0 14px; z-index:3; pointer-events:none; }
.kg-brand { font-weight:900; letter-spacing:.18em; font-size:14px; display:flex; gap:2px; align-items:center; background:rgba(7,11,23,.7); padding:5px 10px; border:1px solid #2a3866; border-radius:4px; }
.kg-brand .k1 { color:#b86c3b; }
.kg-brand .u  { color:#f0a73d; }
.kg-brand .l1, .kg-brand .l2 { color:#dcdcdc; }
.kg-brand .g-lobby { color:#f5b301; margin-left:8px; font-size:10px; letter-spacing:.2em; }
.gp-pill { display:none; align-items:center; gap:6px; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.4); color:#22c55e; font-size:10px; padding:3px 8px; border-radius:12px; letter-spacing:.12em; font-weight:700; pointer-events:auto; }
.gp-pill.show { display:inline-flex; }
.gp-pill .dot { width:6px; height:6px; border-radius:50%; background:#22c55e; }
.lobby-prompt { position:absolute; left:50%; bottom:50px; transform:translateX(-50%); background:#f5b301; color:#070b17; padding:6px 14px; border-radius:4px; font-weight:900; letter-spacing:.15em; font-size:12px; z-index:3; pointer-events:none; box-shadow:0 0 0 3px #070b17,0 0 24px rgba(245,179,1,.4); opacity:0; transition:opacity .15s; text-transform:uppercase; }
.lobby-prompt.show { opacity:1; }
.lobby-statusline { position:absolute; bottom:0; left:0; right:0; height:26px; display:flex; align-items:center; justify-content:center; gap:14px; font-size:9px; color:#7b88ad; letter-spacing:.08em; z-index:3; background:linear-gradient(180deg,rgba(5,8,16,0) 0%,#070b17 60%); border-top:1px solid #1a2a55; pointer-events:none; }
.lobby-statusline .k { background:#1a2a55; color:#f5b301; padding:1px 6px; border-radius:3px; font-weight:800; }

/* Stage chrome buttons */
.mute-btn { right:108px; }
.fs-btn { right:64px; }
.mute-btn.muted { color:#ef4444; }

/* Ship mode - hide chrome */
.ship-mode .hud-btn, .ship-mode .pc-deck { display:none !important; }

/* Phone-sized viewport: shrink stage edge insets */
@media (max-width: 700px) {
  .stage-wrap { padding:4px; }
}

/* --- Scores scene --- */
.scores-list { padding: 8px 24px 24px; overflow:auto; width:100%; height: calc(100% - 70px); display:flex; flex-direction:column; gap:4px; }
.score-row { display:grid; grid-template-columns: 32px 1fr 1fr 100px; gap:16px; align-items:center; padding:10px 16px; background:#0b0f24; border:1px solid #1a2440; border-radius:6px; }
.score-row:hover { border-color:#2a3866; cursor:pointer; }
.score-row .rank { color:#7b88ad; font-size:11px; font-weight:700; text-align:right; }
.score-row .name { color:#c9d3ea; font-weight:700; font-size:13px; }
.score-row .genre { color:#7b88ad; font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.score-row .pts { color:#f5b301; font-size:16px; font-weight:800; text-align:right; font-variant-numeric:tabular-nums; }
.score-row.unplayed .pts { color:#475070; }

/* --- Sound Designer modal --- */
.sd-modal { position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:9998; }
.sd-modal.open { display:flex; }
.sd-shell { width:920px; max-width:96vw; max-height:90vh; background:#0a0f1e; border:1px solid #2a3866; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.6); display:flex; flex-direction:column; overflow:hidden; }
.sd-head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #1a2444; background:linear-gradient(180deg,#0c142a,#0a0f1e); }
.sd-head h3 { margin:0; color:#f5b301; letter-spacing:.15em; font-size:13px; font-weight:700; }
.sd-head .ctrls { display:flex; gap:8px; align-items:center; }
.sd-x { background:none; border:none; color:#7b88ad; font-size:22px; cursor:pointer; padding:0 8px; }
.sd-x:hover { color:#fff; }
.sd-body { display:grid; grid-template-columns: 220px 1fr; min-height:0; flex:1; overflow:hidden; }
.sd-col { padding:12px; overflow:auto; min-height:0; }
.sd-col + .sd-col { border-left:1px solid #1a2444; }
.sd-col h4 { font-size:9px; color:#5a6685; letter-spacing:.18em; margin:0 0 8px; text-transform:uppercase; }
.sd-events { display:flex; flex-direction:column; gap:3px; }
.sd-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.sd-row label { color:#7b88ad; font-size:10px; letter-spacing:.1em; text-transform:uppercase; min-width:34px; }
.sd-row input[type="range"] { flex:1; min-width:120px; }
.sd-row span { color:#f5b301; font-size:11px; min-width:30px; font-variant-numeric:tabular-nums; }
.sd-picker { display:flex; gap:3px; flex-wrap:wrap; }
.sd-grid { background:#06091a; border:1px solid #1a2444; border-radius:4px; padding:8px; margin-bottom:10px; overflow:auto; }
.sd-btn { background:#1a2440; color:#c9d3ea; border:1px solid #2a3866; padding:6px 14px; border-radius:5px; font-family:inherit; font-size:11px; cursor:pointer; font-weight:700; letter-spacing:.05em; }
.sd-btn.primary { background:#f5b301; color:#0b0f24; border-color:#f5b301; }
.sd-btn:hover { border-color:#f5b301; }

/* Scores tab pill active state */
.tabpill[data-tab="scores"].active { background:#f5b301; color:#0b0f24; }