*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;padding:0;width:100%;height:100%;height:100vh;height:100dvh;
  overflow:hidden;background:var(--color-paper);
  font-family:'Pretendard','Segoe UI',Roboto,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  color:#fff;word-break:keep-all;overflow-wrap:break-word;
  overscroll-behavior:none;-webkit-overscroll-behavior:none;
  user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;
  position:fixed;inset:0;
}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% 0%,#153345 0,transparent 65%),#080f1b;z-index:-3}
body:after{content:"";position:fixed;inset:0;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:48px 48px;z-index:-2;pointer-events:none}
#particles{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;will-change:transform,opacity;animation:spark-float linear infinite}
@keyframes spark-float{from{transform:translateY(105vh);opacity:0}15%{opacity:1}to{transform:translateY(-10vh);opacity:0}}

.app{height:100%;width:min(1040px,100%);margin:auto;display:grid;grid-template-columns:228px minmax(0,1fr) 228px;grid-template-rows:minmax(0,1fr);gap:16px;align-items:start;justify-content:center;padding:16px;position:relative;z-index:1;touch-action:none}
.app,.app *{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.side{
  max-height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--color-rule) transparent;
  background:var(--surface-panel);border:1px solid color-mix(in oklch,var(--color-rule) 65%,transparent);border-radius:var(--radius-panel);padding:10px;
  box-shadow:none;display:flex;flex-direction:column;gap:6px;touch-action:pan-y;
}
.side > *{flex-shrink:0}
.side::-webkit-scrollbar{width:4px}
.side::-webkit-scrollbar-thumb{background:var(--color-rule);border-radius:4px}
.side[data-scroll-more="true"]::before{
  content:"↓";position:sticky;top:calc(100% - 30px);align-self:flex-end;z-index:8;
  width:16px;height:24px;flex-shrink:0;margin:0 -13px -33px 0;display:grid;place-items:center;
  border-radius:5px;background:var(--color-paper-3);border:1px solid var(--color-primary);color:var(--color-focus);
  box-shadow:0 3px 10px #03091488;font:900 13px/1 sans-serif;pointer-events:none;
}

.logo{font-weight:900;font-size:27px;letter-spacing:-1px;text-align:left;line-height:1.15;margin:6px 10px 10px;color:var(--color-ink);user-select:none}
.side.left .logo{white-space:nowrap}
.side.left .logo small{display:inline;font-size:24px;margin:0 0 0 6px}
.logo small{display:block;font-size:24px;margin-top:4px}

.card{padding:7px 10px;border:1px solid transparent;border-bottom-color:color-mix(in oklch,var(--color-rule) 40%,transparent);border-radius:8px;background:transparent;position:relative}
.label{font-size:11px;font-weight:700;color:var(--color-muted);letter-spacing:.3px}
.stat-pair{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:6px}
.stat-pair .card{min-width:0;background:var(--color-paper-2);border-bottom-color:transparent}
.value{font:800 24px/1.15 var(--font-mono);font-variant-numeric:tabular-nums;margin-top:4px;color:var(--color-ink);overflow-wrap:anywhere}
.stat-pair .score-card{background:var(--surface-score)}
.score-card .value{font-size:34px;color:var(--color-primary);letter-spacing:-.5px}
.combo-card{overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.combo-card[data-tier="warming"]{border-color:#c084fc99;box-shadow:inset 0 0 18px #c084fc14,0 0 14px #c084fc1f}
.combo-card[data-tier="fire"]{border-color:#ff55e9bb;box-shadow:inset 0 0 20px #ff20de1c,0 0 18px #ff20de33}
.combo-card[data-tier="unstoppable"]{border-color:#ff9f43dd;box-shadow:inset 0 0 22px #ff8a1c22,0 0 22px #ff881155}
.combo-card[data-tier="legendary"]{border-color:#ffe135ee;box-shadow:inset 0 0 24px #ffe13526,0 0 28px #ff881166}
.combo-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;color:var(--color-ink-2);font-size:10px;font-weight:700;letter-spacing:.4px}
.combo-tier{color:#c4b5fd;letter-spacing:1px}
.combo-target{color:var(--color-muted);font-variant-numeric:tabular-nums}
.combo-meter{height:4px;margin-top:6px;border-radius:999px;background:var(--color-paper-3);overflow:hidden;border:1px solid var(--color-rule)}
.combo-meter-fill{height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,#8b5cf6,#ec4899);box-shadow:0 0 10px #c084fc;transition:width .25s ease,background .25s ease}
.combo-card[data-tier="unstoppable"] .combo-meter-fill{background:linear-gradient(90deg,#f97316,#facc15);box-shadow:0 0 10px #fb923c}
.combo-card[data-tier="legendary"] .combo-meter-fill{background:linear-gradient(90deg,#facc15,#fff7ae);box-shadow:0 0 12px #ffe135}
.combo-record{margin-top:6px;font-size:10px;line-height:1.35;color:var(--color-muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.combo-record[data-phase="tie"]{color:#a7f3d0}
.combo-record[data-phase="new"],.mobile-badge.cmb.is-record #mobileComboTarget{color:#fde68a}
.mobile-badge.cmb[data-tier="warming"]{background:#301435;color:#e9d5ff;border-color:#c084fc}
.mobile-badge.cmb[data-tier="fire"]{background:#5b164d;color:#ffd1f4;border-color:#f472d0;box-shadow:0 0 8px #ec489966}
.mobile-badge.cmb[data-tier="unstoppable"]{background:#46240b;color:#fed7aa;border-color:#fb923c;box-shadow:0 0 8px #fb923c55}
.mobile-badge.cmb[data-tier="legendary"]{background:#3b300a;color:#fef3c7;border-color:#fde047;box-shadow:0 0 8px #fde04755}
.combo{color:var(--color-puzzle)!important}
.combo.hot{animation:comboHot .35s ease-out}
@keyframes comboHot{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.stack-card{padding-bottom:9px}
.stack-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stack-tier{font-size:11px;font-weight:900;letter-spacing:.6px;color:#67e8f9}
.stack-card[data-tier="caution"]{border-color:#fbbf2488;box-shadow:inset 0 0 18px #fbbf2414,0 0 14px #fbbf241f}
.stack-card[data-tier="danger"]{border-color:#fb7185bb;box-shadow:inset 0 0 20px #fb71851c,0 0 18px #fb718533}
.stack-card[data-tier="critical"]{border-color:#f43f5edd;box-shadow:inset 0 0 22px #f43f5e24,0 0 24px #f43f5e44}
.stack-card[data-tier="caution"] .stack-tier{color:#fcd34d}
.stack-card[data-tier="danger"] .stack-tier,.stack-card[data-tier="critical"] .stack-tier{color:#fb7185}
.stack-meter{height:6px;margin-top:7px;border-radius:999px;background:var(--color-paper-3);overflow:hidden;border:1px solid var(--color-rule)}
.stack-meter-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#22d3ee,#38bdf8);box-shadow:0 0 10px #22d3ee;transition:width .25s ease,background .25s ease}
.stack-card[data-tier="caution"] .stack-meter-fill{background:linear-gradient(90deg,#facc15,#f97316);box-shadow:0 0 10px #facc15}
.stack-card[data-tier="danger"] .stack-meter-fill,.stack-card[data-tier="critical"] .stack-meter-fill{background:linear-gradient(90deg,#fb7185,#f43f5e);box-shadow:0 0 12px #fb7185}
.stack-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;color:var(--color-muted);font-size:10px;font-weight:700;letter-spacing:.3px}
.stack-meta strong{color:#fff;font-variant-numeric:tabular-nums}
@media(max-width:800px),(max-height:540px){
  .mobile-badge.stack-safe{color:#67e8f9;border-color:rgba(34,211,238,.6)}
  .mobile-badge.stack-caution{color:#fcd34d;border-color:rgba(250,204,21,.7)}
  .mobile-badge.stack-danger,.mobile-badge.stack-critical{color:#fb7185;border-color:rgba(251,113,133,.75);background:rgba(64,12,32,.85)}
}

.mini-viewport{width:100%;height:56px;position:relative;border-radius:8px;background:var(--color-paper);overflow:hidden;border:1px solid var(--color-rule)}
.next-card .label,.cam-header .label{margin-bottom:6px}
.side .next-card,.side .hold-card{background:var(--color-paper-2);border-bottom-color:transparent}
.side .next-card .mini-viewport{height:var(--size-primary-preview)}
#nextContainer{border-color:color-mix(in oklch,var(--color-primary) 50%,var(--color-rule));background:var(--surface-score)}
.next-queue{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:5px;align-items:stretch;justify-items:stretch}
.next-item{min-width:0;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid transparent;background:var(--color-paper-2);border-radius:6px;padding:3px 2px}
.next-index{font:700 8px/1 var(--font-mono);color:var(--color-muted)}
.next-item .mino{width:min(44px,100%);height:30px}
.next-item .mino i{min-height:6px}
.next-item.lead{border-color:color-mix(in oklch,var(--color-primary) 50%,var(--color-rule));background:var(--color-paper-3)}
.mino{display:grid;gap:1px;width:42px;height:32px}
.mino i{display:block;border-radius:2px;background:transparent;min-height:6px}
.mino.lead{width:48px;height:36px}
.board-next-strip{display:none}
.board-next-strip:empty{display:none!important}
.mini-viewport canvas{display:block;width:100%!important;height:100%!important}
.mini-viewport[data-empty]::after,.mobile-mini-viewport[data-empty]::after{content:"남은 블록 없음";position:absolute;inset:0;display:grid;place-items:center;font:600 11px/1.3 var(--font-body);color:var(--color-muted);pointer-events:none}
.mobile-mini-viewport[data-empty]::after{content:"없음";font-size:9px}
.mini-viewport.spent canvas,.mobile-mini-viewport.spent canvas{opacity:.38;filter:grayscale(.55) brightness(.8)}
.hold-preview-hint{display:none;position:absolute;inset:0;align-items:center;justify-content:center;padding:2px;color:var(--color-muted);font:600 11px/1.3 var(--font-body);text-align:center;pointer-events:none;text-wrap:balance}
[data-hold-state="empty"] > .hold-preview-hint,[data-hold-state="unavailable"] > .hold-preview-hint{display:flex}
.mobile-mini-viewport .hold-preview-hint{font-size:9px}
.mini-viewport.hold-blocked,.mobile-mini-viewport.hold-blocked{
  animation:holdBlocked .32s ease-out;
  border-color:#fb7185;
  box-shadow:inset 0 0 18px rgba(251,113,133,.2),0 0 12px rgba(251,113,133,.28);
}
@keyframes holdBlocked{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}
.hold-status{
  margin-top:6px;color:var(--color-muted);font:600 10px/1.4 var(--font-body);
  text-align:center;transition:color .2s ease;
}
.hold-status.ready{color:var(--color-primary)}
.hold-status.used{color:#f59e0b}
#desktopHoldButton[aria-disabled="true"]{opacity:.65;border-color:#f59e0b;filter:saturate(.3);cursor:not-allowed;box-shadow:none}
#padHold[aria-disabled="true"] .pad-lbl{color:#fde68a}

.controls{font-size:11px;line-height:1.75;color:var(--color-ink-2)}
.key{display:inline-block;min-width:24px;padding:2px 6px;margin-right:4px;border:1px solid #536880;border-bottom-width:2px;border-radius:5px;background:var(--color-paper-3);text-align:center;color:var(--color-ink);font-weight:700;font-size:10px}

button{border:0;font-weight:900;letter-spacing:.5px;cursor:pointer;border-radius:12px;padding:11px;width:100%;background:var(--color-primary);color:var(--color-accent-ink);box-shadow:none;transition:transform .15s ease-out,filter .15s ease-out,box-shadow .15s ease-out,background .15s ease-out}
button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  button:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:none}
  button:active{transform:scale(.97) translateY(0)}
}
button.secondary{background:var(--color-paper-2);border:1px solid var(--color-rule);color:var(--color-ink-2);box-shadow:none}
.side.left > button{padding:6px 10px}
@media (hover:hover) and (pointer:fine){
  button.secondary:hover{background:var(--color-paper-3);border-color:var(--color-muted)}
}

/* Right sidebar compact action row and keys */
.side-controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 6px;font-size:10.5px;color:var(--color-ink-2);line-height:1.45;margin-top:5px}
.side-controls-grid .key{min-width:18px;padding:1px 5px;font-size:10px;margin-right:3px}
.side-act-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;box-sizing:border-box;margin-top:2px}
.side-act-btn{
  padding:10px 4px;font:800 12px/1.3 var(--font-body);border-radius:var(--radius-control);
  display:flex;align-items:center;justify-content:center;gap:5px;width:100%;
  cursor:pointer;box-shadow:none;filter:none;transform:none;letter-spacing:0;
  transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.side-act-btn.pause{background:var(--color-paper-2);border:1px solid var(--color-rule);color:var(--color-ink)}
.side-act-btn.pause[aria-pressed="true"]{background:var(--surface-selected);color:var(--color-accent-ink);border-color:transparent}
.side-act-btn.restart{background:var(--color-paper-2);border:1px solid var(--color-rule);color:var(--color-ink-2)}
#desktopHoldButton{background:var(--color-paper-2);color:var(--color-ink);border:1px solid var(--color-rule);box-shadow:none;filter:none;transform:none}

/* Left sidebar buttons share the flat style of the right sidebar actions */
.side.left > button{
  font:800 12px/1.3 var(--font-body);border-radius:var(--radius-control);letter-spacing:0;
  box-shadow:none;filter:none;transform:none;cursor:pointer;
  transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out);
}
.side.left > button.secondary{background:var(--color-paper-2);border:1px solid var(--color-rule);color:var(--color-ink-2)}
.side.left > button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .side.left > button:hover{background:var(--color-paper-3);filter:none;transform:none;box-shadow:none}
}
.side.left > button:active{transform:scale(.98)}

/* Camera preset buttons */
.cam-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:4px}
.cam-btn{
  padding:6px 2px;min-height:28px;font:700 11px/1.3 var(--font-body);
  background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:8px;
  color:var(--color-ink-2);box-shadow:none;filter:none;transform:none;letter-spacing:0;
  transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.cam-btn.active{background:var(--color-paper-3);border-color:var(--color-rule);color:var(--color-ink)}
.cam-btn:focus-visible,.side-act-btn:focus-visible,#desktopHoldButton:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;box-shadow:none}
@media(hover:hover) and (pointer:fine){
  .cam-btn:hover,.side-act-btn:hover{background:var(--color-paper-3);filter:none;transform:none;box-shadow:none}
}
.cam-btn:active,.side-act-btn:active,#desktopHoldButton:active{transform:scale(.98)}

.boardWrap{position:relative;width:100%;height:100%;min-width:0;min-height:0;display:flex;justify-content:center;align-items:center;overflow:hidden}
.boardFrame{--board-accent:var(--color-classic);position:relative;width:100%;height:100%;border:1px solid color-mix(in oklch,var(--board-accent) 35%,var(--color-rule));border-radius:20px;background:var(--color-paper);padding:6px;box-shadow:var(--shadow-board);display:flex;flex-direction:column;transition:border-color .2s ease,background .35s ease,box-shadow .35s ease;will-change:transform;transform-origin:center center}
.boardInner,.boardInner *{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;touch-action:none}
.boardFrame.danger{box-shadow:0 0 40px #ff2e6388,0 0 90px #ff2e6333}
.boardFrame.danger:not(.juice-punch){animation:dangerPulse 1.15s ease-in-out infinite}
@keyframes dangerPulse{0%,100%{filter:none}50%{filter:saturate(1.25) brightness(1.08)}}
.boardFrame.locking{box-shadow:0 0 36px #ffffff66,0 0 70px #00f0ff55}
.boardFrame.b2b:not(.danger):not(.locking){box-shadow:0 0 40px #ffe13577,0 0 80px #ff881144}
.boardFrame.juice-punch{animation:juicePunch .16s ease-out}
@keyframes juicePunch{0%{transform:scale(1.025)}100%{transform:scale(1)}}
.juice-flash{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;border-radius:20px}
.juice-flash.go{animation:juiceFlash .2s ease-out}
@keyframes juiceFlash{0%{opacity:.5}100%{opacity:0}}
.juice-dust-layer{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden;border-radius:20px}
.juice-dust{position:absolute;width:5px;height:5px;border-radius:50%;pointer-events:none}
.reduce-motion-btn{
  width:auto;min-height:28px;padding:4px 10px;font:800 11px/1.3 var(--font-body);border-radius:8px;
  background:var(--color-paper-2);border:1px solid var(--color-rule);color:var(--color-ink-2);
  cursor:pointer;box-shadow:none;filter:none;transform:none;
  transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.reduce-motion-btn.on{background:var(--surface-selected);border-color:transparent;color:var(--color-accent-ink)}
.reduce-motion-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;transform:none;transition:none}
@media(hover:hover) and (pointer:fine){
  .reduce-motion-btn:hover{background:var(--color-paper-3);filter:none;transform:none;box-shadow:none}
  .reduce-motion-btn.on:hover{background:var(--surface-selected)}
}
.reduce-motion-btn:active:not(:focus-visible){transform:scale(.98)}
.app[data-mode="speed"] .boardFrame{--board-accent:var(--color-speed)}
.app[data-mode="sprint"] .boardFrame{--board-accent:var(--color-sprint)}
.app[data-mode="puzzle"] .boardFrame{--board-accent:var(--color-puzzle)}
.app[data-mode="battle"] .boardFrame{--board-accent:var(--color-battle)}
.boardInner{position:relative;width:100%;flex:1;min-height:0;border-radius:20px;overflow:hidden;background:#070f1c}
#threeCanvas{width:100%!important;height:100%!important;display:block;cursor:default;touch-action:none}

/* Mode Display & Dynamic HUD Components */
.mode-card{
  display:flex;flex-direction:column;gap:3px;
  background:var(--color-paper-2);
  border:1px solid transparent;border-bottom-color:var(--color-rule);border-radius:8px;padding:9px 10px;
}
.mode-card-top{display:flex;justify-content:space-between;align-items:center}
.mode-pill{
  --mode-color:var(--color-classic);
  display:inline-flex;align-items:center;gap:7px;width:fit-content;
  font:700 12px/1.3 var(--font-body);letter-spacing:0;
  padding:4px 10px 4px 8px;border-radius:6px;
  background:var(--color-paper-3);color:var(--color-ink);
}
.mode-pill::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--mode-color);flex-shrink:0}
.mode-pill.speed{--mode-color:var(--color-speed)}
.mode-pill.sprint{--mode-color:var(--color-sprint)}
.mode-pill.puzzle{--mode-color:var(--color-puzzle)}
.mode-pill.battle{--mode-color:var(--color-battle)}
.mode-switch-btn{
  font-size:10px;font-weight:700;color:var(--color-ink-2);background:var(--color-paper-3);border:1px solid var(--color-rule);
  border-radius:6px;padding:2px 7px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease;width:auto;box-shadow:none;
}
.mode-switch-btn:hover{color:var(--color-ink);border-color:var(--color-primary);background:var(--color-paper-3);transform:none;filter:none;box-shadow:none}
.mode-desc-text{font-size:11px;color:var(--color-muted);line-height:1.35}
.mode-desc-text.b2b-ready{color:#fde68a;font-weight:800}
.mobile-badge.mode-classic.b2b-ready{
  color:#fde68a;background:rgba(120,83,12,.32);border-color:rgba(251,191,36,.7);
}
#modePerk.technique-complete:not(.b2b-ready),
#mobileModeBadge.technique-complete:not(.b2b-ready){color:#a7f3d0}

/* Sprint 40L Timer Card */
.sprint-timer-card{
  display:none;flex-direction:column;gap:4px;
  border-color:rgba(16,185,129,0.45);
  background:linear-gradient(145deg,rgba(6,28,22,0.85),rgba(6,16,24,0.92));
}
.sprint-time-val{
  font-family:'Orbitron',monospace;font-size:24px;font-weight:900;color:#34d399;
  text-shadow:0 0 16px rgba(52,211,153,0.7);letter-spacing:1px;line-height:1.1;
}
.sprint-prog-bar-wrap{
  width:100%;height:6px;background:#0d1e18;border:1px solid rgba(16,185,129,0.35);
  border-radius:3px;margin:4px 0 2px;overflow:hidden;
}
.sprint-prog-bar-fill{
  height:100%;width:0%;background:linear-gradient(90deg,#10b981,#00f0ff);
  box-shadow:0 0 10px #10b981;transition:width .15s ease;
}
.sprint-sub-row{display:flex;justify-content:space-between;font-size:11px;color:#a7f3d0}
.speed-timer-card{border-color:rgba(251,146,60,.5);background:linear-gradient(145deg,rgba(40,20,6,.85),rgba(20,12,24,.92))}
.speed-timer-card .label{color:#fdba74}
.speed-timer-card .sprint-time-val{color:#fb923c;text-shadow:0 0 16px rgba(251,146,60,.7)}
.speed-timer-card .sprint-prog-bar-wrap{background:#241508;border-color:rgba(251,146,60,.35)}
.speed-timer-card .sprint-prog-bar-fill{background:linear-gradient(90deg,#fb923c,#facc15);box-shadow:0 0 10px #fb923c;transition:none}
.speed-timer-card .sprint-sub-row{color:#fed7aa}
.speed-timer-card.is-urgent{border-color:rgba(251,113,133,.7)}
.speed-timer-card.is-urgent .sprint-time-val{color:#fb7185;text-shadow:0 0 16px rgba(251,113,133,.7)}

/* Score Boost Tag for Speed Rush */
.score-boost-tag{
  display:none;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:900;
  background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;padding:1px 6px;
  border-radius:4px;letter-spacing:.5px;margin-left:6px;box-shadow:0 0 8px rgba(249,115,22,0.6);
  vertical-align:middle;animation:boostPulse 1.2s ease-in-out infinite alternate;
}
@keyframes boostPulse{
  0%{transform:scale(0.95);opacity:0.85}
  100%{transform:scale(1.05);opacity:1;box-shadow:0 0 14px rgba(249,115,22,0.9)}
}


.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px;z-index:10;background:color-mix(in oklch,var(--color-paper) 80%,transparent);backdrop-filter:blur(8px)}
.modal{
  text-align:left;padding:var(--space-xl);width:min(420px,100%);max-height:100%;
  overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:8px;scrollbar-width:thin;
  scrollbar-color:var(--color-rule) transparent;border:1px solid var(--color-rule);
  border-radius:var(--radius-panel);background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);box-shadow:0 12px 40px color-mix(in oklch,var(--color-paper) 70%,transparent);
}
.overlay.is-paused .modal{border-color:var(--color-primary)}
#mobilePauseBtn[aria-pressed="true"],.side-act-btn.pause[aria-pressed="true"]{border-color:var(--color-primary);color:var(--color-ink);background:var(--color-paper-3);box-shadow:none}
#overlayText{margin-bottom:var(--space-lg)}
.modal .overlay-title{
  margin:0;font-size:clamp(20px,3vw,26px);font-weight:800;line-height:1.25;
  color:var(--color-ink);overflow-wrap:anywhere;
}
.modal .overlay-title.success{color:var(--color-sprint)}
.modal .overlay-title.failure{color:var(--color-error)}
.modal .overlay-subtitle{margin:6px 0 0;color:var(--color-muted);font-size:12px;line-height:1.4}
.modal .overlay-note{display:block;margin:10px 0 0;color:var(--color-ink-2);font-size:12px;line-height:1.5}
.overlay-metric{display:flex;flex-direction:column;gap:var(--space-xs);margin-top:var(--space-lg);padding:var(--space-lg);background:var(--surface-score);border-radius:var(--radius-control)}
.overlay-caption{font-size:11px;font-weight:600;color:var(--color-muted)}
.overlay-value{font:800 clamp(26px,4vw,var(--type-result))/1.2 var(--font-mono);color:var(--color-ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.record-result{display:block;margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-paper-2);border-radius:var(--radius-control);font-size:12px;font-weight:700;line-height:1.5;color:var(--color-ink-2)}
.record-result.new{color:var(--color-battle)}
.run-end-feedback{
  display:flex;flex-direction:column;gap:4px;margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);
  border:0;border-radius:var(--radius-control);background:var(--color-paper-2);
  font-size:11px;line-height:1.5;color:var(--color-ink-2);
}
.run-end-feedback strong{color:var(--color-error);font-size:12px;font-weight:700}
.run-summary{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;
  margin-top:var(--space-md);padding-top:var(--space-sm);border-top:1px solid var(--color-rule);
  color:var(--color-muted);font-size:11px;line-height:1.5;
}
.run-summary > span{min-width:0;padding:var(--space-sm);border-radius:var(--radius-control);background:var(--color-paper-2);overflow-wrap:anywhere}
.run-summary > span:last-child:nth-child(odd){grid-column:1 / -1}
.run-summary strong{color:var(--color-ink);font-weight:800;font-variant-numeric:tabular-nums}
.technique-summary{margin-top:var(--space-sm)}
.technique-summary strong{color:var(--color-battle)}
.modal .graphics-status{color:var(--color-primary);font-size:12px;line-height:1.4;margin:6px 0 12px}
.mobile-pause-extra{display:none;flex-direction:column;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--color-rule)}
.overlay.is-paused .mobile-pause-extra{display:flex}
.pause-settings-label{font:600 11px/1.4 var(--font-body);color:var(--color-muted)}
.overlay-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm);position:sticky;bottom:calc(var(--space-sm) - var(--space-xl));padding-top:var(--space-sm);background:var(--color-paper);box-shadow:0 var(--space-sm) 0 var(--color-paper)}
.overlay-actions #start{grid-column:1 / -1}
.overlay:not(.is-paused) .overlay-actions #overlayMenuBtn{grid-column:1 / -1}
@media(max-width:800px),(max-height:540px){
  .overlay-value{font-size:32px}
  .overlay-metric{padding:var(--space-md);margin-top:var(--space-md)}
}
.mobile-pause-extra-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modal button{
  min-height:44px;font:700 14px/1.3 var(--font-body);padding:10px 12px;
  border:1px solid var(--color-rule);border-radius:var(--radius-control);
  background:var(--color-paper-2);color:var(--color-ink-2);box-shadow:none;filter:none;transform:none;
  transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.modal #start{background:var(--color-paper-3);color:var(--color-ink);border-color:var(--color-primary)}
.modal button:active{transform:scale(.98)}
.modal button:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.modal button:disabled{opacity:.45;cursor:not-allowed;transform:none}
@media(hover:hover) and (pointer:fine){
  .modal button:not(:disabled):hover{background:var(--color-paper-3);filter:none;box-shadow:none;transform:none}
}
.overlay,
.controls-modal,
.bgm-modal {
  touch-action: auto;
}
.overlay .modal,
.controls-dialog,
.bgm-dialog {
  user-select: text;
  -webkit-user-select: text;
}
.overlay .modal,
.overlay .modal * {
  touch-action: pan-y pinch-zoom;
}
.controls-dialog,
.bgm-dialog {
  touch-action: auto;
  max-height: min(90dvh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tetrisBanner,
.scorePop,
.clearCallout,
.speedBonusBanner,
.levelUp{
  position:absolute;pointer-events:none;z-index:6;opacity:0;white-space:nowrap;
  font-weight:900;letter-spacing:.5px;will-change:transform,opacity;
}
.tetrisBanner{
  left:50%;top:22%;transform:translate(-50%,0);
  font-size:clamp(20px,3.8vw,30px);color:#fff;
  text-shadow:0 0 10px #fff,0 0 24px #ff30ef,0 0 50px #5a36ff;
}
.clearCallout{
  left:50%;top:24%;transform:translate(-50%,0);
  font-family:'Orbitron','Chakra Petch',sans-serif;
  font-size:clamp(16px,3.2vw,23px);color:#b9f6ff;
  text-shadow:0 0 10px #00f0ff,0 0 24px #00a8cc;
}
.clearCallout.clear-2{color:#f0b7ff;text-shadow:0 0 10px #c084fc,0 0 24px #8b5cf6}
.clearCallout.clear-3{color:#ffd58a;text-shadow:0 0 10px #f97316,0 0 24px #ea580c}
.clearCallout.combo-break{color:#fb7185;text-shadow:0 0 10px #fb7185,0 0 24px #be123c}
.scorePop{
  right:20px;top:24%;color:#ffd43b;
  font-size:clamp(18px,3.4vw,25px);
  text-shadow:0 0 10px #ff8811,0 0 22px #ff2e63;
}
.speedBonusBanner{
  left:50%;top:16%;transform:translate(-50%,0);
  font-size:clamp(14px,2.6vw,18px);color:#fdba74;
  text-shadow:0 0 10px #ff5500,0 0 22px #f97316;
}
.levelUp{
  right:20px;top:16%;color:#ffd43b;
  font-size:clamp(16px,3vw,22px);
  text-shadow:0 0 15px #ff7a00;
}
.tetrisBanner.show{animation:bannerFloatPop .58s cubic-bezier(0.23,1,0.32,1) both}
.clearCallout.show{animation:calloutFloatPop .54s cubic-bezier(0.23,1,0.32,1) both}
.scorePop.show{animation:scoreFloatPop .62s cubic-bezier(0.23,1,0.32,1) both}
.speedBonusBanner.show{animation:speedFloatPop .65s cubic-bezier(0.23,1,0.32,1) both}
.levelUp.show{animation:levelFloatPop .7s cubic-bezier(0.23,1,0.32,1) both}
@keyframes bannerFloatPop{
  0%{opacity:0;transform:translate(-50%,10px) scale(0.92)}
  20%{opacity:.95;transform:translate(-50%,0) scale(1.05)}
  70%{opacity:.95;transform:translate(-50%,-4px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-16px) scale(0.96)}
}
@keyframes calloutFloatPop{
  0%{opacity:0;transform:translate(-50%,8px) scale(0.92)}
  22%{opacity:.95;transform:translate(-50%,0) scale(1.04)}
  70%{opacity:.95;transform:translate(-50%,-4px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-16px) scale(0.96)}
}
@keyframes scoreFloatPop{
  0%{opacity:0;transform:translateY(8px) scale(0.92)}
  22%{opacity:.95;transform:translateY(0) scale(1.06)}
  70%{opacity:.95;transform:translateY(-5px) scale(1)}
  100%{opacity:0;transform:translateY(-18px) scale(0.95)}
}
@keyframes speedFloatPop{
  0%{opacity:0;transform:translate(-50%,8px) scale(0.92)}
  20%{opacity:.95;transform:translate(-50%,0) scale(1.04)}
  70%{opacity:.95;transform:translate(-50%,-4px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-16px) scale(0.96)}
}
@keyframes levelFloatPop{
  0%{opacity:0;transform:translateY(6px) scale(0.92)}
  25%{opacity:.95;transform:translateY(0) scale(1.06)}
  70%{opacity:.95;transform:translateY(-4px) scale(1)}
  100%{opacity:0;transform:translateY(-16px) scale(0.96)}
}
html[data-reduce-motion="true"] :is(#scorePop,#clearCallout,#banner,#speedBonusBanner,#levelUp).show{
  animation:readableFloatFeedback .85s ease-out both!important;
}
@keyframes readableFloatFeedback{
  0%{opacity:0}
  15%{opacity:.95}
  75%{opacity:.95}
  100%{opacity:0}
}
html[data-game-paused="true"] :is(#scorePop,#clearCallout,#banner,#speedBonusBanner,#levelUp).show{
  animation-play-state:paused!important;
}
.level-speed{margin-top:2px;color:var(--color-ink-2);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.level-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px;color:var(--color-muted);font-size:10px;font-weight:700;letter-spacing:.35px}
.level-meta strong{color:var(--color-primary);font-variant-numeric:tabular-nums}
.level-track{height:4px;margin-top:6px;border-radius:999px;background:var(--color-paper-3);overflow:hidden;border:1px solid var(--color-rule)}
.level-track-fill{height:100%;width:0%;border-radius:inherit;background:var(--color-primary);transition:width .25s ease}
.board-readout{
  align-self:flex-start;flex-shrink:0;display:flex;align-items:center;gap:9px;margin-bottom:4px;
  padding:6px 10px;border:1px solid transparent;border-radius:8px;
  background:transparent;
  color:var(--color-ink-2);font:700 11px/1 var(--font-mono);letter-spacing:.3px;
  pointer-events:none;
}
.board-readout-mode{color:var(--board-accent)}
.board-readout-divider{width:1px;height:11px;background:rgba(148,163,184,.35)}
.board-readout-bottom{
  align-self:flex-start;flex-shrink:0;max-width:100%;box-sizing:border-box;margin-top:4px;padding:5px 8px;border-radius:7px;
  background:transparent;border:1px solid transparent;color:var(--color-muted);
  font:700 10px/1.4 var(--font-mono);letter-spacing:.3px;pointer-events:none;
}
.board-readout-bottom.ready{color:var(--color-ink-2);border-color:var(--color-rule)}
.board-readout-bottom.locking{color:#fcd34d;border-color:rgba(251,191,36,.45)}
#boardActionStatus.danger{color:#fb7185}
.board-readout-bottom.danger{color:#fb7185;border-color:rgba(251,113,133,.55)}

.record-chase{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex:0 0 auto;
  margin-bottom:4px;padding:4px 9px;border:1px solid var(--color-rule);border-radius:7px;
  background:var(--color-paper-2);color:var(--color-ink);font-size:11px;line-height:1.3;font-variant-numeric:tabular-nums;
}
.record-chase[hidden]{display:none}
.record-chase-label{flex-shrink:0;color:var(--color-muted);font-weight:700}
.record-chase strong{text-align:right;overflow-wrap:anywhere}
.record-chase.is-beaten{border-color:#6ee7b7;color:#a7f3d0;background:#08251f}
.record-chase[data-mode="speed"]{flex-wrap:wrap}
.record-chase[data-pace="ahead"]:not(.is-beaten){border-color:#6ee7b7;color:#a7f3d0}
.record-chase[data-pace="behind"]:not(.is-beaten){border-color:#d6ad5a;color:#fde68a}
.record-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Sprint's finish-line challenge stays visible on phones as well as desktop. */
.sprint-chase{
  flex:0 0 auto;min-width:0;margin-bottom:4px;padding:5px 9px;
  border:1px solid var(--color-rule);border-radius:9px;background:var(--color-paper-2);color:var(--color-ink);
  font-size:11px;line-height:1.3;font-variant-numeric:tabular-nums;
}
.sprint-chase[hidden]{display:none}
.sprint-chase-heading,.sprint-chase-detail{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.sprint-chase-heading{font-weight:800;color:var(--color-sprint)}
.sprint-chase-heading strong{color:var(--color-ink)}
.sprint-chase-heading strong,.sprint-chase-detail strong{text-align:right;overflow-wrap:anywhere}
.sprint-chase-detail{color:var(--color-muted);font-size:9px}
.sprint-split{margin-top:3px;color:var(--color-sprint);font-size:10px;font-weight:700;overflow-wrap:anywhere}
.sprint-chase-track{
  position:relative;height:5px;margin:4px 0;overflow:hidden;border-radius:3px;background:#102f38;
}
.sprint-chase-track span{
  display:block;height:100%;background:linear-gradient(90deg,#10b981,#67e8f9);
  transform:scaleX(0);transform-origin:left;
}
.sprint-chase-track::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 2px),#071d22 calc(25% - 2px),#071d22 25%);
}
.sprint-chase[data-phase="last"]{border-color:#fbbf24}
.sprint-chase[data-phase="last"] .sprint-chase-heading{color:#fde68a}
.sprint-chase[data-phase="last"] .sprint-chase-heading strong{color:inherit}
.sprint-chase[data-phase="complete"]{border-color:#6ee7b7;background:#08251f}
@media(max-width:430px),(max-height:540px){
  .sprint-chase{padding:4px 7px;border-radius:7px}
}

/* Classic relay occupies its own compact row, never the playfield or sidebars. */
.mission-strip{
  flex:0 0 auto;min-width:0;margin-bottom:4px;padding:5px 9px;
  border:1px solid var(--color-rule);border-radius:9px;background:var(--color-paper-2);
  color:var(--color-ink);pointer-events:none;
}
.mission-strip[hidden]{display:none}
.mission-heading{display:flex;align-items:baseline;gap:8px;min-width:0;line-height:1.25}
.mission-number{
  flex-shrink:0;color:#67e8f9;font:800 9px/1.25 'Orbitron','Chakra Petch',monospace;
  font-variant-numeric:tabular-nums;letter-spacing:.3px;
}
.mission-goal{min-width:0;font-size:12px;font-weight:800;overflow-wrap:break-word}
.mission-detail{display:flex;align-items:center;gap:7px;margin-top:3px;min-width:0;line-height:1.2}
.mission-progress{flex:1;min-width:16px;height:4px;overflow:hidden;border-radius:3px;background:#273756}
.mission-progress-fill{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:#38bdf8}
.mission-progress-text{flex-shrink:0;color:#c7e7ff;font:700 10px/1.2 'Chakra Petch',monospace;font-variant-numeric:tabular-nums}
.mission-reward{flex-shrink:0;color:var(--color-ink-2);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.mission-strip.is-complete{border-color:#6ee7b7;background:#08251f}
.mission-strip.is-complete .mission-number,.mission-strip.is-complete .mission-goal{color:#a7f3d0}
.mission-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Fever shares the mission heading; its gauge never adds a HUD row. */
.fever-hud{
  display:flex;align-items:center;gap:5px;flex:0 1 auto;min-width:0;margin-left:auto;
  color:#c7e7ff;font:800 10px/1.25 'Chakra Petch',monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fever-hud[hidden]{display:none}
#feverLabel{flex-shrink:0}
#feverProgress{flex:0 1 30px;width:30px;min-width:8px;height:4px;overflow:hidden;border-radius:3px;background:#273756}
#feverFill{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:#67e8f9}
.fever-hud.is-active{color:#fde68a}
.fever-hud.is-active #feverProgress{background:#553817}
.fever-hud.is-active #feverFill{background:#fbbf24}
.fever-hud.is-paused{color:#cbd5e1}
.fever-hud.is-active.is-paused{color:#fde68a}
.boardFrame.fever-active{
  background:#fbbf24;box-shadow:0 0 24px #f59e0b66,0 0 48px #f59e0b22;
}
html[data-reduce-motion="true"] .boardFrame.fever-active{box-shadow:0 0 0 1px #fde68a}
@media(prefers-reduced-motion:reduce){
  html:not([data-reduce-motion="false"]) .boardFrame.fever-active{box-shadow:0 0 0 1px #fde68a}
}
@media(max-width:430px),(max-height:540px){
  .mission-strip{padding:4px 7px;border-radius:7px}
  .mission-heading{gap:6px}
  .mission-number{font-size:9px;letter-spacing:0}
  .mission-goal{font-size:11px}
  .mission-detail{gap:5px;margin-top:2px}
  .fever-hud{gap:3px;letter-spacing:-.2px}
  #feverProgress{flex-basis:16px;width:16px}
}
@media(max-height:540px) and (orientation:landscape){
  .mission-heading{gap:3px}
  .mission-number{font-size:8.5px}
  .mission-goal{flex:1;font-size:9px;overflow-wrap:anywhere}
  .fever-hud{flex-shrink:0;gap:2px;font-size:9px}
  #feverProgress{flex-basis:8px;width:8px}
}
@media(max-height:400px) and (orientation:landscape){
  .mission-heading{flex-wrap:wrap;row-gap:2px}
  .mission-goal{flex:1 0 100%;order:1;overflow-wrap:break-word}
}

/* Puzzle hints stay outside the playfield and never interrupt gameplay. */
.puzzle-strip{
  flex:0 0 auto;min-width:0;margin-bottom:4px;padding:5px 9px;
  border:1px solid var(--color-rule);border-radius:9px;background:var(--color-paper-2);
  color:var(--color-ink);font-variant-numeric:tabular-nums;
}
.puzzle-strip[hidden],#puzzleHint[hidden],.puzzle-select-panel[hidden],.intro-level-box[hidden]{display:none}
.puzzle-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 8px;min-width:0;line-height:1.25}
#puzzleStage,#puzzleGoal{grid-column:1}
#puzzleHintBtn{grid-column:2;grid-row:1 / span 2;width:auto}
#puzzleStage{flex:0 0 auto;color:var(--color-puzzle);font:800 9px/1.25 var(--font-mono);white-space:nowrap}
#puzzleGoal{flex:1 0 100%;min-width:0;font-size:11px;font-weight:800;overflow-wrap:break-word}
.puzzle-detail{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;margin-top:3px;min-width:0}
#puzzleRemaining{flex:0 0 auto;color:var(--color-muted);font-size:10px;white-space:nowrap}
#puzzleMastery{flex:0 0 auto;color:var(--color-puzzle);font-size:10px;font-weight:800;white-space:nowrap}
#puzzleMastery.is-assisted{color:var(--color-muted);font-weight:600}
#puzzleProgress{flex:1 1 24px;min-width:16px;height:4px;overflow:hidden;border-radius:3px;background:#303354}
#puzzleProgressFill{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#67e8f9,#a78bfa)}
#puzzleProgressText{flex:0 0 auto;font:700 10px/1.2 'Chakra Petch',monospace;white-space:nowrap}
#puzzleHintBtn{
  flex:0 0 auto;appearance:none;cursor:pointer;border:1px solid var(--color-rule);border-radius:5px;
  padding:3px 6px;background:var(--color-paper-3);color:var(--color-ink);font-family:inherit;font-size:10px;font-weight:700;line-height:1.2;
}
#puzzleHintBtn:hover{border-color:var(--color-puzzle)}
#puzzleHintBtn:active{background:var(--color-rule)}
#puzzleHintBtn:focus-visible,#puzzleStageSelect:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
#puzzleHint{margin:5px 0 0;padding-top:4px;border-top:1px solid #39305e;color:#ddd6fe;font-size:11px;line-height:1.4;overflow-wrap:break-word}
.puzzle-strip.is-complete{border-color:#67e8f9}
#puzzleAnnouncement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.puzzle-select-panel{
  display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center;gap:6px;
  padding:10px 14px;border:1px solid rgba(167,139,250,.4);border-radius:14px;background:rgba(23,18,48,.7);
}
.puzzle-select-panel label{color:#c4b5fd;font-size:10.5px;font-weight:800;letter-spacing:.5px}
#puzzleStageSelect{width:100%;min-width:0;max-width:100%;padding:7px 8px;border:1px solid var(--color-rule);border-radius:7px;background:var(--color-paper-3);color:var(--color-ink);font:inherit;font-size:12px;color-scheme:dark}
@media(max-width:430px),(max-height:540px){
  .puzzle-strip{padding:4px 7px;border-radius:7px}
  .puzzle-heading{gap:2px 6px}
  #puzzleStage{font-size:9px}
  #puzzleGoal,#puzzleHint{font-size:10px}
  .puzzle-detail{gap:3px 5px;margin-top:2px}
}
@media(max-width:800px){
  .puzzle-select-panel{padding:7px 5px;border-radius:12px;gap:4px}
  .puzzle-select-panel label{font-size:8.5px}
  #puzzleStageSelect{font-size:10px;padding:5px 4px}
}
@media(max-height:400px) and (orientation:landscape){
  #puzzleStage{font-size:8.5px}
  #puzzleGoal{font-size:9px}
  #puzzleRemaining,#puzzleProgressText,#puzzleHintBtn{font-size:9px}
}
@media(max-height:520px){
  .puzzle-select-panel{padding:4px 6px;gap:3px}
  #puzzleStageSelect{padding:3px 4px;font-size:9px}
}
@media(pointer:coarse){
  #puzzleStageSelect,#puzzleHintBtn{min-height:44px}
  .puzzle-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  #puzzleStage,#puzzleGoal{grid-column:1}
  #puzzleHintBtn{grid-column:2;grid-row:1 / span 2;min-width:44px}
}
@media(pointer:coarse) and (max-height:520px){
  .puzzle-select-panel{padding-block:calc(var(--space-xs) / 2);gap:0}
}
/* Battle pressure is a static, separate HUD row; it never covers the board or pad. */
.battle-strip{
  display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0;margin-bottom:4px;padding:6px 9px;
  border:1px solid var(--color-rule);border-radius:9px;background:var(--color-paper-2);color:var(--color-ink);
  font-variant-numeric:tabular-nums;
}
.battle-strip[hidden]{display:none}
.battle-heading{
  display:flex;flex:1 1 0;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;line-height:1.3;
}
#battleState{color:var(--color-speed);font:800 11px/1.3 'Orbitron','Chakra Petch',monospace;overflow-wrap:anywhere}
#battleIncoming,#battleAttack{font-size:11px;font-weight:800;overflow-wrap:anywhere}
#battleIncoming{padding:3px 5px;border:1px solid var(--color-rule);border-radius:4px;background:var(--color-paper-3);color:var(--color-ink)}
#battleAttack{color:var(--color-ink-2)}
.battle-body{display:flex;flex:2 1 0;align-items:center;gap:10px;min-width:0}
#cpuBoard{
  display:block;flex:0 0 auto;width:50px;height:100px;max-width:none;
  border:1px solid var(--color-rule);border-radius:3px;background:#030514;image-rendering:pixelated;
}
.battle-details{display:flex;flex:1 1 0;flex-direction:column;gap:5px;min-width:0;font-size:11px;line-height:1.35;overflow-wrap:anywhere}
#cpuLines{color:var(--color-ink);font-weight:800}
#battleSent{color:#e2e8f0}
#cpuNext{color:#cbd5e1;font:700 10px/1.3 'Chakra Petch',monospace}
#battleProjection{color:var(--color-ink-2);font-size:10px;font-weight:800}
#battleProjection.is-defense{color:#a7f3d0}
#battleProjection.is-attack{color:#fde68a}
#battleProjection.has-rise{color:#fdba74}
#battleTip{color:var(--color-muted);font-size:10px}
#battleTip.is-response{color:#a7f3d0;font-weight:800}
#battleTip.is-counter{color:#fde68a}
.battle-strip.has-incoming{border-color:#fb923c;background:#2d1b10}
.battle-strip.has-incoming #battleIncoming{background:#542413;border-color:#fb923c;color:#ffedd5}
.battle-strip.is-won{border-color:#6ee7b7;background:#08251f}
.battle-strip.is-won #battleState{color:#a7f3d0}
.battle-strip.is-lost{border-color:#fb7185;background:#30141c}
.battle-strip.is-lost #battleState{color:#fecdd3}
#battleAnnouncement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:800px) and (orientation:portrait){
  .battle-strip{gap:7px;padding:4px 7px;border-radius:7px}
  .battle-heading{gap:4px}
  .battle-body{gap:7px}
  #cpuBoard{width:40px;height:80px}
  #battleState,#battleIncoming,#battleAttack,.battle-details{font-size:10px}
  .battle-details{gap:3px}
  #cpuNext,#battleTip,#battleProjection{font-size:9px}
}
@media(max-height:540px) and (orientation:landscape){
  .battle-strip{display:block;padding:3px 6px;border-radius:6px}
  .battle-heading{flex-direction:row;align-items:center;flex-wrap:wrap;gap:3px 5px}
  .battle-body{gap:5px;margin-top:3px}
  #cpuBoard{width:30px;height:60px}
  #battleState,#battleIncoming,#battleAttack,.battle-details{font-size:9px}
  #battleIncoming{padding:2px 3px}
  .battle-details{gap:2px}
  #cpuNext,#battleProjection{font-size:9px}
  #battleTip{display:none}
  #battleTip.is-response{display:block}
}
.robot{width:75px;height:60px;margin:6px auto 0;border-radius:24px 24px 18px 18px;background:linear-gradient(145deg,#fff,#9fb5d9);box-shadow:0 0 20px #3adfff;position:relative;flex-shrink:0}
.boardFrame.danger .board-readout{border-color:rgba(251,113,133,.6)}
.boardFrame.locking .board-readout{border-color:rgba(251,191,36,.55)}
.robot:before{content:"";position:absolute;left:18px;top:18px;width:10px;height:10px;border-radius:50%;background:#20d9ff;box-shadow:28px 0 #20d9ff,0 0 10px #20d9ff,28px 0 10px #20d9ff}
.robot:after{content:"";position:absolute;left:33px;top:-11px;width:8px;height:14px;background:#9fb5d9;border-radius:4px;box-shadow:0 -4px 0 2px #24d9ff}

.sound-toggle{position:absolute;top:14px;right:14px;width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-paper-2);border:1px solid var(--color-rule);box-shadow:0 3px 12px #03091466;z-index:4;cursor:pointer}
.sound-toggle svg{width:20px;height:20px;fill:var(--color-ink-2)}
.sound-toggle:hover svg{fill:#20d9ff}

/* BGM Widget & Equalizer UI */
.bgm-card{display:flex;flex-direction:column;gap:7px}
.bgm-header{display:flex;justify-content:space-between;align-items:center}
.bgm-eq{display:inline-flex;align-items:flex-end;gap:2.5px;height:12px}
.bgm-eq span{width:3px;height:30%;background:var(--color-primary);border-radius:1px;animation:eqBounce 0.75s ease-in-out infinite alternate}
.bgm-eq span:nth-child(1){animation-delay:0.1s;height:45%}
.bgm-eq span:nth-child(2){animation-delay:0.35s;height:95%}
.bgm-eq span:nth-child(3){animation-delay:0.2s;height:60%}
.bgm-eq span:nth-child(4){animation-delay:0.45s;height:85%}
.bgm-eq.paused span{animation:none;height:25%!important;opacity:0.35}
@keyframes eqBounce{0%{height:20%}50%{height:100%}100%{height:35%}}

.bgm-track-badge{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;box-sizing:border-box;text-align:left;
  background:var(--color-paper-2);
  border:1px solid var(--color-rule);border-radius:8px;
  padding:8px 10px;cursor:pointer;user-select:none;
  transition:background-color .18s ease,border-color .18s ease;
  box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  .bgm-track-badge:hover{border-color:var(--color-primary);background:var(--color-paper-3);transform:none;filter:none;box-shadow:none}
}
.bgm-track-badge:active{transform:scale(.97)}
.bgm-track-name{font-size:11px;font-weight:800;color:var(--color-ink);display:flex;align-items:center;gap:6px;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgm-track-step{font-size:11px;color:var(--color-muted);font-weight:700}

.bgm-ctrl-row{display:flex;gap:5px;align-items:center;width:100%;box-sizing:border-box}
.bgm-nav-btn{
  width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:900;border-radius:6px;background:var(--color-paper-3);border:1px solid var(--color-rule);
  color:var(--color-ink-2);box-shadow:none;cursor:pointer;flex-shrink:0;transition:background-color .15s ease,border-color .15s ease;
}
.bgm-nav-btn:hover{background:var(--color-paper-3);border-color:var(--color-primary);color:var(--color-ink);transform:none;filter:none;box-shadow:none}
.bgm-vol-row{display:flex;align-items:center;gap:4px;flex:1;min-width:0;background:var(--color-paper);padding:3px 6px;border-radius:6px;border:1px solid var(--color-rule);box-sizing:border-box}
.bgm-vol-slider{
  flex:1;min-width:0;width:100%;height:4px;-webkit-appearance:none;background:var(--color-rule);border-radius:2px;outline:none;cursor:pointer;margin:0;
}
.bgm-vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--color-primary);box-shadow:none;cursor:pointer;
}
.bgm-vol-slider:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
.bgm-vol-row > label,.sfx-vol-row > label{flex:none;font:700 10px/1.3 var(--font-body);color:var(--color-ink-2)}
/* On-screen Toast Notification */
.audio-toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(40px);
  background:rgba(8,12,32,0.94);border:1px solid rgba(0,240,255,0.7);border-radius:12px;
  padding:10px 20px;font-family:'Orbitron','Chakra Petch','Pretendard',sans-serif;
  font-size:12px;font-weight:800;color:#fff;letter-spacing:.5px;
  box-shadow:0 0 30px rgba(0,240,255,0.4),0 8px 24px rgba(0,0,0,0.8);
  z-index:999999;pointer-events:none;opacity:0;transition:all .22s cubic-bezier(0.16,1,0.3,1);
  display:flex;align-items:center;gap:8px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.audio-toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* Mobile Only Elements (Hidden on Desktop) */
.mobile-top-bar, .mobile-gamepad, .touch-bar {
  display: none;
}

@media(max-width:1100px) and (min-width:801px) and (min-height:541px){
  .app{grid-template-columns:200px 1fr 200px;gap:12px;padding:10px}
  .side{padding:8px}
  .logo{font-size:25px}.logo small{font-size:20px}
  .value{font-size:26px}
}
@media(max-width:800px), (max-height:540px){
  .sound-toggle{display:none!important}
}

/* Common Mobile Controls Styling */
.pad-btn{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:0;border-radius:10px;
  cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;
  transition:transform .08s ease,box-shadow .08s ease;
}
.pad-btn *{pointer-events:none!important;user-select:none!important;-webkit-user-select:none!important}
.pad-btn.nav-btn,.pad-btn.act-rot,.pad-btn.center-hold{
  background:var(--color-paper-2);border:1px solid var(--color-rule);color:var(--color-ink-2);
  box-shadow:0 3px 0 #050b14,inset 0 1px 0 #ffffff0d;
}
.pad-btn.nav-btn:active,.pad-btn.act-rot:active,.pad-btn.center-hold:active{
  transform:translateY(2px);background:var(--color-paper-3);border-color:var(--color-primary);
  box-shadow:0 1px 0 #050b14;color:var(--color-ink);
}
.pad-btn.act-rot{background:var(--color-paper-3);color:var(--color-ink);border-color:var(--color-muted)}
.pad-btn.act-slam{
  background:var(--color-primary);border:1px solid var(--color-primary);color:var(--color-accent-ink);
  box-shadow:0 3px 0 color-mix(in oklch,var(--color-primary) 45%,var(--color-paper));
}
.pad-btn.act-slam:active{
  transform:translateY(2px);background:color-mix(in oklch,var(--color-primary) 85%,white);
  box-shadow:0 1px 0 color-mix(in oklch,var(--color-primary) 45%,var(--color-paper));color:var(--color-accent-ink);
}
.pad-icon{font-size:16px;line-height:1;font-weight:900}
.pad-lbl{font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:0;margin-top:2px;opacity:1}
#padUp{display:none}

@keyframes juicePunchMobile{0%{transform:scale(1.012)}100%{transform:scale(1)}}

/* Mobile HUD look shared by portrait and landscape (incl. landscape phones wider than 800px). */
@media(max-width:800px),(max-height:540px){
  .board-next-strip .next-item.lead{background:var(--surface-score);border-color:var(--color-primary)}
  .mobile-hud-box{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:10px;
    padding:1px 3px;cursor:default;min-width:52px;height:48px;position:relative;user-select:none;flex-shrink:0;box-sizing:border-box;
  }
  .mobile-hud-box[role="button"]{cursor:pointer}
  .mobile-hud-box[role="button"]:active{background:var(--color-paper-3);border-color:var(--color-primary)}
  .mobile-hud-box[aria-disabled="true"],#padHold[aria-disabled="true"]{opacity:.62;border-color:rgba(251,113,133,.5);filter:saturate(.7)}
  .mobile-hud-box:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
  .mobile-hud-label{font-size:9px;font-weight:800;color:var(--color-muted);letter-spacing:0;white-space:nowrap;text-transform:uppercase;line-height:1;margin-bottom:1px}
  .mobile-hud-label span{color:var(--color-primary)}
  .mobile-mini-viewport{width:46px;height:32px;position:relative;overflow:hidden;border-radius:4px}
  .mobile-mini-viewport canvas{display:block;width:100%!important;height:100%!important}
  
  .mobile-stats-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:48px;overflow:hidden}
  .mobile-score-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--surface-score);border-radius:6px;box-shadow:0 0 0 3px var(--surface-score)}
  .mobile-score-line{display:flex;align-items:baseline;justify-content:center;gap:4px;min-width:0;max-width:100%}
  .mobile-score-lbl{font:700 9px/1 var(--font-body);color:var(--color-muted)}
  .mobile-score-val{
    font:900 17px/1.1 var(--font-mono);color:var(--color-ink);max-width:100%;min-width:0;
    overflow-wrap:anywhere;text-align:center;font-variant-numeric:tabular-nums;
  }
  .mobile-drop-speed{font:700 9px/1 var(--font-mono);color:var(--color-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
  .mobile-badges-row{display:flex;gap:2px;align-items:center;flex-wrap:nowrap;justify-content:center;overflow:hidden;max-width:100%}
  .mobile-badge{font:700 9px/1.3 var(--font-body);padding:1px 3px;border-radius:4px;background:var(--color-paper-2);border:1px solid var(--color-rule);color:var(--color-muted);white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums}
  .mobile-badge.lvl,.mobile-badge.lns{color:var(--color-ink-2)}
  .mobile-badge.cmb{color:var(--color-muted);border-color:var(--color-rule)}
  .mobile-badge.mode-classic{color:var(--color-classic);border-color:var(--color-rule);background:var(--color-paper-2)}
  .mobile-badge.mode-speed{color:var(--color-speed);border-color:var(--color-rule);background:var(--color-paper-2)}
  .mobile-badge.mode-sprint{color:var(--color-sprint);border-color:var(--color-rule);background:var(--color-paper-2)}
  .mobile-badge.mode-puzzle{color:var(--color-puzzle);border-color:var(--color-rule);background:var(--color-paper-2)}
  .mobile-badge.mode-battle{color:var(--color-battle);border-color:var(--color-rule);background:var(--color-paper-2)}
  .mobile-timer-badge{font:800 15px/1 var(--font-mono);color:var(--color-ink);background:var(--surface-score);padding:0 6px;border-radius:5px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .mobile-timer-badge.is-urgent{color:#fecdd3;background:#7f1d3a}

  .mob-act-btn{
    width:44px;min-width:44px;height:44px;padding:0;display:flex;flex-direction:column;gap:1px;align-items:center;justify-content:center;
    font-size:17px;border-radius:10px;background:var(--color-paper-2);border:1px solid var(--color-rule);color:var(--color-ink-2);
    box-shadow:none;filter:none;transform:none;cursor:pointer;touch-action:manipulation;
  }
  #mobilePauseBtn{
    background:var(--color-paper-3);border-color:var(--color-primary);color:var(--color-ink);
  }
  .mob-act-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}
  .mob-act-btn::after{content:attr(data-caption);font:700 9px/1.1 var(--font-body);white-space:nowrap;color:var(--color-ink-2)}
  #mobilePauseBtn[aria-pressed="true"]::after{content:"계속"}
  @media(hover:hover) and (pointer:fine){
    .mob-act-btn:hover{background:var(--color-paper-3);filter:none;transform:none;box-shadow:none}
  }
  .mob-act-btn:active{background:var(--color-paper-3);transform:scale(.97)}
}

/* Narrow screens and short portrait keep controls in normal document flow. */
@media(max-width:800px) and (min-height:541px), (max-width:800px) and (orientation:portrait){
  html,body{overflow:hidden!important;height:100%!important;height:100vh!important;height:100dvh!important;width:100%!important;position:fixed!important;inset:0!important}
  .app{
    display:flex;flex-direction:column;align-items:stretch!important;justify-content:flex-start!important;
    padding:max(6px,env(safe-area-inset-top,6px)) max(6px,env(safe-area-inset-right,6px)) max(6px,env(safe-area-inset-bottom,6px)) max(6px,env(safe-area-inset-left,6px));
    height:100vh!important;height:100dvh!important;width:100vw!important;gap:5px;overflow:hidden;box-sizing:border-box;position:fixed;inset:0;touch-action:none;
  }
  .side.left,.side.right,.boardHud{display:none!important}
  
  /* Shared portrait HUD: primary controls above full-width run information. */
  .mobile-top-bar{
    display:grid;grid-template-columns:50px minmax(0,1fr) 50px 44px;grid-template-rows:minmax(44px,auto) auto;
    align-items:center;gap:3px 4px;
    width:100%!important;box-sizing:border-box!important;align-self:stretch!important;
    height:auto!important;min-height:72px!important;max-height:none!important;flex:0 0 auto!important;
    padding:3px 5px;background:var(--color-paper);
    border:1px solid var(--color-rule);border-radius:14px;box-shadow:none;
    z-index:10;overflow:hidden;
  }
  .mobile-hud-box{min-width:0;width:50px;height:44px;padding:2px 3px}
  .mobile-top-bar > .mobile-hud-box:first-child{grid-area:1 / 1}
  .mobile-top-bar > .mobile-hud-box:nth-child(3){grid-area:1 / 3}
  .mobile-mini-viewport{width:44px;height:28px}
  .mobile-stats-center{display:contents}
  .mobile-score-wrap{grid-area:1 / 2;display:flex;align-items:center;align-self:center;justify-content:center;gap:3px;min-width:0;max-width:100%}
  .mobile-badges-row{
    grid-area:2 / 1 / 3 / -1;display:flex;flex-wrap:wrap;gap:3px;align-items:center;justify-content:center;
    overflow:visible;max-width:100%;border-top:1px solid var(--color-rule);padding-top:3px;
  }
  .mobile-quick-actions{
    grid-area:1 / 4;display:flex;align-items:center;justify-content:flex-end;
    width:44px;flex:0 0 44px;height:44px;margin:0;padding:0;
  }
  /* Board Frame Stretched with overflow containment */
  .boardWrap{
    flex:1;min-height:0;max-height:none;height:auto!important;width:100%!important;
    order:0;display:flex;justify-content:center;align-items:stretch;padding:4px 6px;
    overflow:hidden;contain:layout;box-sizing:border-box;
  }
  .boardFrame{width:100%;height:100%;border-radius:16px;padding:4px;box-sizing:border-box;will-change:transform;transform-origin:center center}
  .boardFrame.juice-punch{animation:juicePunchMobile .14s cubic-bezier(0.2,0,0,1)}
  .boardInner{border-radius:14px}
  .board-next-strip{
    display:flex;flex-direction:column;position:absolute;right:6px;top:50%;
    transform:translateY(-50%);z-index:4;gap:5px;pointer-events:none;
    padding:6px 4px;border-radius:10px;background:rgba(7,15,28,.7);
    border:1px solid rgba(48,66,88,.55);
  }
  .board-next-strip .mino{width:22px;height:16px}
  .board-next-strip .mino.lead{width:28px;height:20px}
  .board-next-strip .next-item{min-height:30px;gap:1px;padding:2px 1px;border-color:var(--color-rule);background:#121e2edd;border-radius:5px}
  .board-next-strip .next-index{display:none}
  .board-next-strip .mino{width:24px;height:17px}
  .board-next-strip .mino i{min-height:3px}
  .board-next-strip .next-item.lead .mino{width:30px;height:21px}

  /* The former horizontal controls used an 84px row; keep that board height. */
  .mobile-gamepad{
    display:grid!important;position:relative!important;width:100%!important;
    grid-template-columns:100px minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);
    grid-template-rows:92px;align-items:center;gap:6px;
    padding:9px 8px calc(9px + env(safe-area-inset-bottom, 0px));
    background:var(--color-paper);
    border:1px solid var(--color-rule);border-radius:16px;
    box-shadow:0 4px 20px #03091466;
    flex-shrink:0;z-index:10;pointer-events:auto;box-sizing:border-box;
  }
  .mobile-gamepad .pad-cluster.nav{
    grid-area:1 / 1;display:grid;width:100px;height:100px;
    grid-template-columns:42px 16px 42px;grid-template-rows:42px 16px 42px;
    position:relative;isolation:isolate;
  }
  .mobile-gamepad .pad-cluster.nav::before{
    content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
    background:var(--color-paper-2);border:1px solid var(--color-rule);box-shadow:inset 0 2px 12px #050b14;
  }
  .mobile-gamepad .pad-cluster.nav::after{
    content:"";grid-area:2 / 2;border-radius:50%;pointer-events:none;
    background:var(--color-paper-3);border:1px solid var(--color-rule);
  }
  .mobile-gamepad .pad-cluster.nav .pad-btn{
    z-index:1;width:42px;height:42px;min-height:0;border-radius:50%;
  }
  #padUp{grid-area:1 / 2;justify-self:center;display:flex}
  #padLeft{grid-area:2 / 1;align-self:center}
  #padRight{grid-area:2 / 3;align-self:center}
  #padDown{grid-area:3 / 2;justify-self:center}
  .mobile-gamepad .center-hold{
    grid-area:1 / 2;display:flex;height:64px;min-height:0;flex-direction:column;
  }
  .mobile-gamepad .pad-cluster.actions{display:contents}
  .mobile-gamepad .pad-cluster.actions .pad-btn{height:64px;min-height:0}
  #padCcw{grid-area:1 / 3}#padCw{display:none}#padSlam{grid-area:1 / 4}
  .pad-icon{font-size:18px}
  .pad-lbl{font-size:9.5px;letter-spacing:0;white-space:nowrap}
}

@media(max-width:430px) and (orientation:portrait){
  .mobile-score-val{font-size:17px;letter-spacing:0}
  .mobile-score-val.is-wide{font-size:12px}
}
/* Short landscape uses side controls; portrait keeps its gamepad below the board. */
@media(max-height:540px) and (orientation:landscape){
  html,body{overflow:hidden!important;height:100%!important;height:100vh!important;height:100dvh!important;width:100%!important;position:fixed!important;inset:0!important}
  .overlay .modal{width:min(420px,100%);padding:16px 10px}
  .side.left, .side.right, .boardHud { display: none !important; }
  .app {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: fixed !important;
    inset: 0 !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }
  .mobile-top-bar {
    display: flex !important;
    position: absolute !important;
    top: max(4px, env(safe-area-inset-top, 4px)) !important;
    left: max(8px, env(safe-area-inset-left, 8px)) !important;
    height:46px !important;
    padding:2px 8px !important;
    z-index: 20 !important;
    border-radius: 12px !important;
    border: 1px solid var(--color-rule) !important;
    box-shadow: none !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .mobile-hud-box {
    width:48px !important;min-width:48px !important;
    height: 36px !important;
    padding: 2px 4px !important;
  }
  .mobile-hud-label {
    font-size: 9px !important;
    margin-bottom: 1px !important;
  }
  .mobile-mini-viewport {
    width: 44px !important;
    height: 24px !important;
  }
  .mobile-stats-center{height:42px;min-width:0}
  .mobile-score-wrap {
    gap: 4px !important;
  }
  .mobile-score-lbl {
    font-size: 9px !important;
  }
  .mobile-score-val {
    font-size: 16px !important;
  }
  .mobile-badges-row{gap:3px !important;flex-wrap:wrap;overflow:visible}
  .mobile-badge {
    font-size: 9px !important;
    padding: 1px 4px !important;
  }
  .mobile-quick-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 44px !important;
    flex: 0 0 44px !important;
    height: 44px !important;
  }
  .mob-act-btn {
    width: 44px !important;
    height: 44px !important;
  }
  .boardWrap {
    height:calc(100dvh - 54px) !important;
    max-height: none !important;
    width: auto !important;
    aspect-ratio: 10 / 18 !important;
    margin-top:50px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 4px !important;
  }
  .boardFrame {
    width: 100% !important;
    height: 100% !important;
    padding: 3px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    will-change: transform !important;
    transform-origin: center center !important;
  }
  .boardFrame.juice-punch { animation: juicePunchMobile .14s cubic-bezier(0.2,0,0,1) !important; }
  .boardInner {
    border-radius: 12px !important;
  }
  .board-next-strip{
    display:flex !important;flex-direction:column;position:absolute;right:4px;top:52%;
    transform:translateY(-50%);z-index:4;gap:3px;pointer-events:none;
    padding:4px 3px;border-radius:8px;background:rgba(7,15,28,.7);
    border:1px solid rgba(48,66,88,.55);
  }
  .board-next-strip .mino{width:18px;height:13px}
  .board-next-strip .mino.lead{width:22px;height:16px}
  .board-next-strip .next-item{min-height:22px;gap:1px;padding:1px;border-radius:4px}
  .board-next-strip .next-index{display:none}
  .board-next-strip .mino{width:19px;height:13px}
  .board-next-strip .mino i{min-height:2px}
  .board-next-strip .next-item.lead .mino{width:23px;height:16px}
  .mobile-gamepad {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
    z-index: 30 !important;
    padding: 0 !important;
  }
  /* Left hand cluster */
  .mobile-gamepad .pad-cluster.nav {
    position: absolute !important;
    left: max(12px, env(safe-area-inset-left, 12px)) !important;
    bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
    width: 180px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    pointer-events: auto !important;
  }
  .mobile-gamepad .pad-cluster.nav .pad-btn {
    flex: 1 !important;
    height: 46px !important;
  }
  .mobile-gamepad .center-hold {
    position: absolute !important;
    left: max(12px, env(safe-area-inset-left, 12px)) !important;
    bottom: max(60px, calc(60px + env(safe-area-inset-bottom, 10px))) !important;
    width: 180px !important;
    height: 38px !important;
    flex: none !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .mobile-gamepad .center-hold .pad-icon {
    font-size: 14px !important;
  }
  .mobile-gamepad .center-hold .pad-lbl {
    font-size: 9px !important;
    margin-top: 0 !important;
  }
  /* Right hand cluster: 2 columns for rot, 1 full width for slam on top */
  .mobile-gamepad .pad-cluster.actions {
    position: absolute !important;
    right: max(12px, env(safe-area-inset-right, 12px)) !important;
    bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
    width: 180px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 38px 46px !important;
    gap: 4px !important;
    pointer-events: auto !important;
  }
  .mobile-gamepad .pad-cluster.actions .act-slam {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    height: 38px !important;
    flex-direction: row !important;
    gap: 6px !important;
  }
  .mobile-gamepad .pad-cluster.actions .act-slam .pad-lbl {
    margin-top: 0 !important;
  }
  .mobile-gamepad .pad-cluster.actions .act-rot {
    grid-row: 2 !important;
    height: 46px !important;
  }
  .pad-btn {
    border-radius: 10px !important;
  }
}
@media(max-height:540px) and (max-width:800px) and (orientation:landscape){
  .mobile-top-bar{gap:4px !important;padding:3px 5px !important}
}
/* =========================================================================
   EPIC 3D ARCADE INTRO SCREEN
   ========================================================================= */
/* Intro hierarchy: mode selection, personal target, then one primary action. */
#introScreen{--color-mode:var(--color-classic)}
#introScreen[data-mode="speed"]{--color-mode:var(--color-speed)}
#introScreen[data-mode="sprint"]{--color-mode:var(--color-sprint)}
#introScreen[data-mode="puzzle"]{--color-mode:var(--color-puzzle)}
#introScreen[data-mode="battle"]{--color-mode:var(--color-battle)}
:where(#introScreen) :is(.intro-mode-card,.intro-level-pill,.intro-aux-btn,.intro-launch-btn){box-shadow:none}
:where(#introScreen) :is(.intro-mode-card,.intro-level-pill,.intro-aux-btn,.intro-launch-btn):hover{
  box-shadow:none;filter:none;transform:none;
}
#introScreen{
  position:fixed;inset:0;width:100%;height:100%;height:100dvh;z-index:9999;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  touch-action:pan-y pinch-zoom;
  display:flex;justify-content:center;align-items:flex-start;
  padding:max(20px,env(safe-area-inset-top,20px)) max(16px,env(safe-area-inset-right,16px)) max(28px,calc(20px + env(safe-area-inset-bottom,0px))) max(16px,env(safe-area-inset-left,16px));
  box-sizing:border-box;
  background:radial-gradient(ellipse at 50% 20%,#173246 0%,#080f1b 75%);
  font-family:var(--font-body);
  transition:opacity 180ms var(--ease-out),visibility 180ms;
}
@media(max-width:800px), (max-height:540px){
  #introScreen{overscroll-behavior:none}
}
#introScreen::-webkit-scrollbar{width:5px}
#introScreen::-webkit-scrollbar-track{background:transparent}
#introScreen::-webkit-scrollbar-thumb{background:#3c4c8f66;border-radius:4px}
#introScreen.hide{opacity:0;visibility:hidden;pointer-events:none}
#intro3DCanvas{position:fixed;inset:0;width:100vw!important;height:100dvh!important;z-index:1;pointer-events:none;opacity:.28}
.intro-vignette{position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at center,transparent 25%,#080f1b88 75%,#080f1b 100%)}

.intro-shell{
  position:relative;z-index:10;width:min(1024px,96vw);margin:auto 0;
  box-sizing:border-box;
  background:var(--surface-panel);
  border:1px solid var(--color-rule);border-radius:24px;
  padding:var(--space-xl) var(--space-2xl) 20px;box-shadow:var(--shadow-panel);
  display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:16px;
}

.intro-badge{
  align-self:flex-start;display:inline-flex;color:var(--color-muted);
  font-size:11px;font-weight:600;letter-spacing:.5px;
}

.intro-title-wrap{margin:0;display:flex;flex-direction:column;align-items:flex-start;width:100%}
.intro-title{
  margin:0;font-family:var(--font-body);font-size:clamp(42px,6.5vw,60px);
  font-weight:900;letter-spacing:-2.5px;line-height:1.1;overflow-wrap:anywhere;min-width:0;
  color:var(--color-ink);
  user-select:none;display:inline-flex;align-items:baseline;gap:10px;
}
.intro-title .title-3d{
  font-family:var(--font-display);font-size:.7em;color:var(--color-primary);font-weight:900;
}
.intro-tagline{margin-top:8px;font-size:13px;color:var(--color-ink-2);font-weight:500}

.intro-section-label{
  align-self:flex-start;font-size:13px;font-weight:700;color:var(--color-ink-2);
  margin:4px 0 -6px;display:flex;align-items:center;gap:8px;
}

.intro-mode-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%}
.intro-mode-card{--color-mode:var(--color-classic)}
.intro-mode-card[data-mode="speed"]{--color-mode:var(--color-speed)}
.intro-mode-card[data-mode="sprint"]{--color-mode:var(--color-sprint)}
.intro-mode-card[data-mode="puzzle"]{--color-mode:var(--color-puzzle)}
.intro-mode-card[data-mode="battle"]{--color-mode:var(--color-battle)}
.intro-mode-card{
  position:relative;width:100%;appearance:none;font:inherit;color:inherit;
  background:var(--color-paper-2);border:1px solid transparent;
  border-radius:var(--radius-control);padding:var(--space-lg) var(--space-md);cursor:pointer;display:flex;flex-direction:column;
  align-items:flex-start;text-align:left;user-select:none;gap:10px;
  transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  .intro-mode-card:hover{background:var(--color-paper-3);border-color:var(--color-rule)}
}
.intro-mode-card.active{
  background:var(--surface-selected);color:var(--color-accent-ink);
  border-color:transparent;box-shadow:none;
}
.intro-mode-card.active::after{
  content:"✓" / "";position:absolute;top:12px;right:12px;
  width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
  background:var(--color-accent-ink);color:var(--color-primary);font:800 12px/1 var(--font-body);
}
.intro-mode-card:active{transform:scale(.98)}
.intro-mode-card:focus-visible,.intro-level-pill:focus-visible{
  outline:2px solid var(--color-focus);outline-offset:3px;
}
.intro-mode-piece.mino{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);width:48px;height:32px;gap:3px;margin:6px 0}
.intro-mode-card[data-mode="classic"] .intro-mode-piece{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;width:64px;height:15px;margin:14.5px 0}
.intro-mode-piece i{min-height:0;border-radius:2px}
.intro-mode-piece i.filled{background:var(--color-mode);box-shadow:inset 0 1px 0 #ffffff55}
.intro-mode-name{font-family:var(--font-body);font-size:16px;font-weight:800;color:var(--color-ink)}
.intro-mode-desc{font-size:13px;color:var(--color-muted);line-height:1.5}
.intro-mode-badge{
  font-size:10px;font-weight:600;color:var(--color-muted);letter-spacing:0;
}

.intro-goal{
  width:100%;box-sizing:border-box;margin:0;padding:10px var(--space-md);
  display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-items:center;
  border:0;border-radius:var(--radius-control);
  background:var(--color-paper-2);color:var(--color-ink-2);text-align:left;font-size:12px;line-height:1.5;
  font-variant-numeric:tabular-nums;
}
.intro-mode-card.active .intro-mode-name{color:var(--color-accent-ink)}
.intro-mode-card.active :is(.intro-mode-desc,.intro-mode-badge){color:color-mix(in oklch,var(--color-accent-ink) 80%,var(--color-primary))}
.intro-mode-card.active .intro-mode-piece i.filled{background:color-mix(in srgb,var(--color-mode) 62%,var(--color-accent-ink))}
.intro-goal-rules{min-width:0;color:var(--color-muted)}
.intro-goal-target{color:var(--color-primary);font-size:14px;min-width:0;text-wrap:pretty}
.intro-sub-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);width:100%;gap:28px;align-items:stretch}
.intro-level-box,.intro-records-box{
  flex:1;background:transparent;border:0;
  border-radius:var(--radius-control);padding:8px 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;min-width:0;
}
.intro-box-title{font-size:11px;font-weight:600;color:var(--color-muted);letter-spacing:0}
.intro-setting-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 8px;width:100%;min-width:0}
.intro-setting-hint{color:var(--color-ink-2);font:600 11px/1.4 var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}
.intro-level-pills{display:flex;gap:6px;width:100%;justify-content:flex-start}
.intro-level-pill{
  flex:1;max-width:72px;min-height:44px;padding:6px 0;font-family:var(--font-body);font-size:12px;font-weight:700;
  border-radius:8px;background:var(--color-paper-2);border:1px solid var(--color-rule);
  color:var(--color-ink-2);cursor:pointer;transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  .intro-level-pill:not(:disabled):hover{border-color:var(--color-primary)}
}
.intro-level-pill:not(:disabled):active{transform:scale(.97)}
.intro-level-pill.unavailable,.intro-level-pill:disabled{
  opacity:1;cursor:not-allowed;color:var(--color-muted);background:var(--color-paper-2);
  border-color:var(--color-rule);border-style:dashed;box-shadow:none;transform:none;
}
.intro-level-pill.active{
  background:var(--surface-selected);border-color:transparent;color:var(--color-accent-ink);
  box-shadow:none;
}

.intro-stats-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%}
.intro-stat-item{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;padding:6px 8px;border-radius:8px}
.intro-stat-label{font-size:10px;color:var(--color-muted);font-weight:500}
.intro-stat-val{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--color-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#introScreen[data-mode="classic"] [data-record-mode="classic"],
#introScreen[data-mode="speed"] [data-record-mode="speed"],
#introScreen[data-mode="sprint"] [data-record-mode="sprint"]{
  background:var(--surface-score);
}
#introScreen[data-mode="classic"] [data-record-mode="classic"] .intro-stat-label,
#introScreen[data-mode="speed"] [data-record-mode="speed"] .intro-stat-label,
#introScreen[data-mode="sprint"] [data-record-mode="sprint"] .intro-stat-label{color:var(--color-ink);font-weight:700}

.intro-cta-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center;gap:8px 28px;width:100%;margin-top:0;padding-top:16px;border-top:1px solid var(--color-rule)}
.intro-launch-btn{
  position:relative;width:100%;min-height:56px;padding:16px 20px;font-family:var(--font-body);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  font-size:18px;font-weight:900;color:var(--color-accent-ink);border:1px solid var(--color-primary);
  border-radius:var(--radius-control);background:var(--color-primary);letter-spacing:0;
  cursor:pointer;filter:none;box-shadow:none;transform:none;
  transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.intro-launch-content{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.intro-launch-icon{width:26px;height:26px;flex:none;color:var(--color-accent-ink);pointer-events:none}
#introLaunchLabel{min-width:0;text-align:left;line-height:1.3;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
@media(hover:hover) and (pointer:fine){
  .intro-launch-btn:hover{background:color-mix(in oklch,var(--color-primary) 85%,white);filter:none;transform:none;box-shadow:none}
}
.intro-launch-btn:active:not(:focus-visible){transform:scale(.98);box-shadow:none}
.intro-launch-key{
  flex:none;padding:3px 6px;border:1px solid #06101f55;border-radius:6px;
  background:#06101f26;color:#06101fcc;font:700 11px/1.2 var(--font-mono);
}
.intro-launch-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px;transform:none;transition:none}

.intro-aux-btns{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-sm);width:100%}
.intro-aux-btn{
  min-width:0;min-height:44px;padding:8px 12px;font-size:11px;font-weight:600;border-radius:var(--radius-control);
  background:transparent;border:1px solid var(--color-rule);color:var(--color-ink-2);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.intro-aux-btn.audio-pending{border-color:var(--color-primary);color:var(--color-primary)}
@media(hover:hover) and (pointer:fine){
  .intro-aux-btn:hover{background:var(--color-paper-3);border-color:var(--color-muted)}
}
.intro-aux-btn:active{transform:scale(.97)}
.intro-vol-panel > summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:600;color:var(--color-ink-2);text-align:left;list-style:none}
.intro-vol-panel > summary::-webkit-details-marker{display:none}
.intro-vol-panel > summary::after{content:"+";font:600 16px/1 var(--font-mono)}
.intro-vol-panel[open] > summary::after{content:"−"}
.intro-vol-panel > summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px;border-radius:4px}
.intro-prompt{font-size:10px;color:var(--color-muted);line-height:1.5;text-align:right}
.intro-prompt kbd{font:600 10px/1.5 var(--font-mono);border:1px solid var(--color-rule);border-radius:4px;padding:1px 4px;color:var(--color-ink-2)}
.intro-prompt > span{margin:0 8px}
.intro-vol-panel .intro-vol-row{margin-top:4px;min-height:44px}
.intro-vol-panel{
  width:100%;align-self:start;
  background:transparent;border:1px solid transparent;
  border-radius:var(--radius-control);padding:0 var(--space-md);
}
.intro-vol-panel[open]{background:var(--color-paper-2);border-color:var(--color-rule);padding-bottom:12px}
.intro-vol-panel[open] > summary{justify-content:space-between;border-bottom:1px solid var(--color-rule)}
.intro-vol-row{display:flex;align-items:center;gap:12px}
.intro-vol-row > label,.intro-vol-row > span:first-child{font-size:12px;font-weight:600;color:var(--color-ink-2);min-width:56px;flex:none}
.intro-vol-pct{font-size:12px;font-weight:600;color:var(--color-ink-2);min-width:36px;text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.intro-vol-panel .reduce-motion-btn{min-height:44px;min-width:64px}
.intro-vol-panel .bgm-vol-slider{height:44px;background:transparent}
.intro-vol-panel .bgm-vol-slider::-webkit-slider-runnable-track{height:4px;background:var(--color-rule);border-radius:4px}
.intro-vol-panel .bgm-vol-slider::-webkit-slider-thumb{width:18px;height:18px;margin-top:-7px;background:var(--color-primary);box-shadow:none}
.intro-vol-panel .bgm-vol-slider::-moz-range-track{height:4px;background:var(--color-rule);border-radius:4px}
.intro-vol-panel .bgm-vol-slider::-moz-range-thumb{width:18px;height:18px;background:var(--color-primary);border:0;border-radius:50%}
.sfx-vol-row{display:flex;align-items:center;gap:6px;width:100%;background:var(--color-paper-2);padding:4px 6px;border-radius:8px;border:1px solid var(--color-rule);box-sizing:border-box}
.motion-setting-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.motion-setting-row > span{font:700 10.5px/1.3 var(--font-body);color:var(--color-ink-2)}
.motion-setting-row .reduce-motion-btn,.intro-vol-row .reduce-motion-btn{flex:none;margin-left:auto}

.intro-prompt{font-family:var(--font-body);font-weight:500}

.controls-modal{
  position:fixed;inset:0;z-index:10000;
  background:color-mix(in oklch,var(--color-paper) 85%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;
  align-items:center;justify-content:center;padding:20px;
}
.controls-modal.show{display:flex}

.controls-dialog{
  width:min(560px,100%);max-height:min(720px,calc(100dvh - 40px));
  background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);
  border:1px solid var(--color-rule);border-radius:var(--radius-panel);
  text-align:left;display:flex;flex-direction:column;
  scrollbar-width:thin;scrollbar-color:var(--color-rule) transparent;
  scroll-padding-block:90px 80px;
}
.controls-header,.controls-footer{
  position:sticky;z-index:2;flex-shrink:0;background:var(--color-paper);
}
.controls-header{top:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--color-rule)}
.controls-header > div{min-width:0}
.controls-header h3{margin:0;font-size:20px;font-weight:800;line-height:1.25;color:var(--color-ink)}
.controls-mode-label{margin:6px 0 0;color:var(--color-muted);font-size:12px;line-height:1.5}
.controls-content{flex-shrink:0;display:flex;flex-direction:column;gap:24px;min-width:0;padding:20px}
.controls-section{display:flex;flex-direction:column;gap:12px;min-width:0}
.controls-section h4{margin:0;font-size:14px;font-weight:700;color:var(--color-ink)}
.controls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ctrl-item{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  gap:8px;min-width:0;padding:10px;border-radius:var(--radius-control);
  background:var(--color-paper-2);border:1px solid var(--color-rule);
}
.ctrl-item-wide{
  grid-column:1 / -1;justify-content:flex-start;gap:6px;padding:10px 0;
  background:none;border:0;border-bottom:1px solid var(--color-rule);border-radius:0;
}
.ctrl-item[hidden]{display:none}
/* Touch instructions precede keyboard controls when no fine pointer is available. */
@media(hover:hover) and (pointer:fine){.ctrl-touch{display:none}}
.ctrl-keys{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--color-muted);font-size:11px}
.ctrl-key{
  display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:26px;
  padding:2px 6px;border-radius:6px;background:var(--color-paper-3);border:1px solid var(--color-rule);
  color:var(--color-ink);font:700 12px/1.2 var(--font-mono);white-space:nowrap;
}
.ctrl-desc{min-width:0;font-size:13px;color:var(--color-ink-2);font-weight:500;line-height:1.6;overflow-wrap:anywhere}
.ctrl-label{font-size:13px;font-weight:700;color:var(--color-ink)}
.controls-gestures{margin:0;display:grid;gap:8px;font-size:13px;line-height:1.5}
.controls-gestures > div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px}
.controls-gestures dt{color:var(--color-muted)}
.controls-gestures dd{margin:0;color:var(--color-ink-2)}
.controls-details{border:1px solid var(--color-rule);border-radius:var(--radius-control);background:var(--color-paper-2)}
.controls-details summary{min-height:44px;padding:12px;color:var(--color-ink-2);font-size:13px;font-weight:700;line-height:1.5;cursor:pointer;border-radius:var(--radius-control)}
.controls-details[open] > summary{border-bottom:1px solid var(--color-rule)}
.controls-details p{margin:12px;font-size:13px;line-height:1.6;color:var(--color-ink-2)}
.controls-details > .controls-grid{padding:12px}
.controls-footer{bottom:0;padding:12px 20px;border-top:1px solid var(--color-rule)}
.controls-dialog button{
  min-height:44px;padding:10px 12px;border:1px solid var(--color-rule);
  border-radius:var(--radius-control);background:var(--color-paper-2);
  color:var(--color-ink-2);font:700 14px/1.3 var(--font-body);
  box-shadow:none;filter:none;transform:none;
  transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.controls-dialog .controls-close-btn{width:44px;flex-shrink:0;padding:0;display:flex;align-items:center;justify-content:center;font-size:18px}
.controls-dialog .controls-done-btn{width:100%}
.controls-dialog button:active{transform:scale(.98)}
.controls-dialog :is(button,summary):focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  .controls-dialog button:hover,.controls-details summary:hover{background:var(--color-paper-3);filter:none;box-shadow:none;transform:none}
}


/* BGM Playlist & Track Selector Modal */
.bgm-modal{
  position:fixed;inset:0;z-index:10000;
  background:color-mix(in oklch,var(--color-paper) 85%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;
  align-items:center;justify-content:center;padding:16px;
}
.bgm-modal.show{display:flex}
.bgm-dialog{
  width:min(560px,100%);max-height:min(720px,calc(100dvh - 32px));
  background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);
  border:1px solid var(--color-rule);border-radius:var(--radius-panel);
  text-align:left;display:flex;flex-direction:column;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--color-rule) transparent;
  scroll-padding-block:110px 175px;
}
.bgm-modal-header,.bgm-settings{
  position:sticky;z-index:2;flex-shrink:0;background:var(--color-paper);
}
.bgm-modal-header{top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--color-rule)}
.bgm-modal-header > div{min-width:0}
.bgm-modal-header h3{margin:0;color:var(--color-ink);font-size:20px;line-height:1.25;font-weight:800}
.bgm-modal-subtitle{margin:6px 0 0;color:var(--color-muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.bgm-track-list{display:flex;flex-direction:column;gap:8px;flex-shrink:0;min-width:0;padding:16px 20px}
.bgm-dialog button{
  min-height:44px;padding:10px 12px;border:1px solid var(--color-rule);
  border-radius:var(--radius-control);background:var(--color-paper-2);
  color:var(--color-ink-2);font:700 14px/1.3 var(--font-body);
  box-shadow:none;filter:none;transform:none;
  transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.bgm-dialog .bgm-close-btn{width:44px;flex-shrink:0;padding:0;display:flex;align-items:center;justify-content:center;font-size:18px}
.bgm-dialog .bgm-track-item{
  width:100%;appearance:none;display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:80px;text-align:left;cursor:pointer;user-select:none;
}
.bgm-dialog .bgm-track-item.active{background:var(--color-paper-3);border-color:var(--color-primary)}
.bgm-track-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.bgm-track-icon{width:28px;font-size:20px;flex-shrink:0;text-align:center}
.bgm-track-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.bgm-track-title{font-size:13px;font-weight:800;line-height:1.4;color:var(--color-ink);overflow-wrap:anywhere}
.bgm-track-desc{font-size:12px;font-weight:500;line-height:1.5;color:var(--color-ink-2);overflow-wrap:anywhere}
.bgm-track-facts{display:flex;flex-wrap:wrap;gap:3px 8px;font-size:11px;font-weight:500;line-height:1.4;color:var(--color-muted)}
.bgm-track-bpm{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.bgm-track-state{flex-shrink:0;font-size:11px;font-weight:700;color:var(--color-muted);white-space:nowrap}
.bgm-track-item.active .bgm-track-state{color:var(--color-primary)}
.bgm-settings{bottom:0;padding:12px 20px;border-top:1px solid var(--color-rule)}
.bgm-volume-row{display:grid;grid-template-columns:52px minmax(0,1fr) 40px;align-items:center;gap:8px;min-height:44px}
.bgm-volume-row label{font-size:12px;color:var(--color-ink-2)}
.bgm-volume-row output{text-align:right;font:700 13px/1.4 var(--font-mono);color:var(--color-ink-2);font-variant-numeric:tabular-nums}
.bgm-volume-row input{height:44px;background:transparent;appearance:none;border-radius:6px}
.bgm-volume-row input::-webkit-slider-runnable-track{height:4px;background:var(--color-rule);border-radius:2px}
.bgm-volume-row input::-moz-range-track{height:4px;background:var(--color-rule);border-radius:2px}
.bgm-volume-row input::-webkit-slider-thumb{appearance:none;width:16px;height:16px;margin-top:-6px;border:0;background:var(--color-primary);box-shadow:none}
.bgm-volume-row input::-moz-range-thumb{width:16px;height:16px;border:0;background:var(--color-primary);box-shadow:none}
.bgm-dialog .bgm-done-btn{width:100%;margin-top:8px}
.bgm-dialog button:active{transform:scale(.98)}
.bgm-dialog :is(button,input):focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  .bgm-dialog button:hover{background:var(--color-paper-3)}
}
@media(max-width:430px){
  .bgm-modal-header{padding:14px 16px}
  .bgm-track-list{padding:12px 16px}
  .bgm-settings{padding:12px 16px}
}
@media(max-width:800px){
  #introScreen{
    padding:max(14px,env(safe-area-inset-top,14px)) max(10px,env(safe-area-inset-right,10px)) max(22px,calc(16px + env(safe-area-inset-bottom,0px))) max(10px,env(safe-area-inset-left,10px));
  }
  .intro-shell{
    width:100%;max-width:480px;padding:12px;gap:4px;border-radius:20px;
  }
  .intro-badge{font-size:10px;letter-spacing:.3px}
  .intro-title-wrap{margin:0}
  .intro-title{font-size:clamp(32px,8.5vw,44px);letter-spacing:-1px}
  .intro-tagline{font-size:11px;margin-top:4px;line-height:1.4}
  .intro-section-label{font-size:11px;margin:4px 0 0;letter-spacing:0}
  
  .intro-mode-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
  .intro-mode-card{
    padding:8px 4px;border-radius:10px;flex-direction:column;text-align:center;align-items:center;gap:4px;min-height:64px;justify-content:center;
  }
  .intro-mode-card[data-mode="battle"]{grid-column:span 2}
  .intro-mode-card.active::after{top:5px;right:5px;width:14px;height:14px;font-size:9px}
  .intro-mode-piece.mino{display:none}
  .intro-mode-name{font-size:12px;letter-spacing:0;line-height:1.2;white-space:nowrap}
  .intro-mode-desc{display:none}
  .intro-mode-badge{
    font-size:10px;white-space:nowrap;line-height:1.3;
  }
  
  .intro-goal{margin:0;padding:7px 8px;font-size:10px;grid-template-columns:minmax(0,1fr);gap:3px}
  .intro-goal-target{font-size:11px}
  .intro-sub-row{display:flex;flex-direction:row;gap:8px;width:100%;align-items:stretch}
  .intro-level-box,.intro-records-box{padding:5px 0;gap:6px;min-width:0;flex:1}
  .intro-box-title{font-size:10px;letter-spacing:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .intro-setting-hint{font-size:10px}
  .intro-level-pills{gap:4px}
  .intro-level-pill{padding:5px 0;font-size:11px;border-radius:6px;max-width:none}
  
  .intro-stats-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
  .intro-stat-item{min-width:0;gap:1px}
  .intro-stat-label{font-size:9px}
  .intro-stat-val{max-width:100%;overflow-wrap:anywhere;font-size:15px}
  
  .intro-cta-wrap{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:0;padding-top:10px;width:100%}
  .intro-launch-btn{min-height:44px;padding:13px 16px;font-size:15px;width:100%;letter-spacing:0}
  .intro-aux-btns{gap:6px;width:100%}
  .intro-aux-btn{flex:1;padding:8px 4px;font-size:10.5px;border-radius:8px;justify-content:center}
  .intro-vol-panel > summary{justify-content:center;text-align:center}
  .intro-prompt{display:none}
  
  .controls-header{padding:14px 16px}
  .controls-content{padding:16px;gap:20px}
  .controls-footer{padding:12px 16px}
}

@media(min-width:361px) and (max-width:430px) and (min-height:621px){
  .intro-stat-label{font-size:11px}
}

@media(max-width:360px){
  .intro-shell{padding:12px 10px;gap:8px}
  .intro-title{font-size:28px}
  .intro-mode-name{font-size:11px}
  .intro-level-pill{font-size:10px}
  .intro-stat-val{font-size:13px}
}

@media(max-width:430px){
  .intro-sub-row{flex-direction:column}
  .intro-stat-label{white-space:nowrap}
}

@media(max-height:620px){
  .intro-shell{padding:10px 12px;gap:6px}
  .intro-badge{display:none}
  .intro-tagline{display:none}
  .intro-title{font-size:24px}
  .intro-section-label{display:none}
  .intro-cta-wrap{gap:6px}
  .intro-launch-btn{padding:12px 16px}
}
@media(max-height:620px){
  .intro-goal{margin:-3px 0;padding:3px 8px;font-size:10px}
}
@media(max-height:520px){
  #introScreen{padding:4px 8px!important}
  .intro-shell{padding:8px 14px!important;gap:3px!important;max-width:780px!important}
  .intro-badge{display:none!important}
  .intro-tagline{display:none!important}
  .intro-title{font-size:18px!important}
  .intro-section-label{display:none!important}
  .intro-mode-grid{gap:6px!important;margin-top:5px}
  .intro-mode-card{padding:5px 3px!important;min-height:48px!important}
  .intro-mode-piece.mino{display:none}
  .intro-mode-badge{font-size:10px;line-height:1.1}
  .intro-mode-card{gap:3px}
  .intro-mode-name{font-size:11px!important}
  .intro-mode-desc{display:none!important}
  .intro-sub-row{gap:6px!important}
  .intro-level-box,.intro-records-box{padding:4px 6px!important}
  .intro-level-pill{padding:3px 0!important;font-size:10px!important;min-height:32px}
  .intro-launch-btn{padding:8px 12px!important;font-size:13px!important}
  .intro-aux-btn{padding:5px 4px!important;font-size:10px!important}
}
button:focus-visible,input:focus-visible{
  outline:2px solid var(--color-focus);outline-offset:3px;
}
@media(max-width:800px),(max-height:540px){
  .board-readout,.board-readout-bottom{display:none}

  .level-meta,.level-track{display:none}
}

html[data-reduce-motion="true"] * ,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
html[data-reduce-motion="true"] #introScreen.hide{transform:none}
@media(prefers-reduced-motion:reduce){
  html:not([data-reduce-motion="false"]) *,
  html:not([data-reduce-motion="false"]) *::before,
  html:not([data-reduce-motion="false"]) *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  html:not([data-reduce-motion="false"]) #introScreen.hide{transform:none}
}

/* Keyboard shortcut hints are noise on touch-only devices. */
@media(hover:none) and (pointer:coarse){.intro-prompt,.intro-launch-key,.kbd-hint{display:none}}

/* Pause has nothing to act on once a run is finished; the result overlay owns replay/menu. */
.side-act-btn:disabled,#mobilePauseBtn:disabled{opacity:.4;cursor:not-allowed;border-color:var(--color-rule)}
.side-act-btn:disabled:active,#mobilePauseBtn:disabled:active{transform:none}

/* Portrait D-pad: each direction owns a full triangular quadrant of the pad, so no touch on the
   pad lands in a dead gap. 40px circles stay as the visual targets and fit inside their wedges.
   Each button's box is its half of the pad, keeping its geometric center inside its own wedge. */
@media(max-width:800px) and (min-height:541px), (max-width:800px) and (orientation:portrait){
  .mobile-gamepad .pad-cluster.nav{display:block}
  .mobile-gamepad .pad-cluster.nav::after{
    position:absolute;left:50%;top:50%;width:16px;height:16px;transform:translate(-50%,-50%);
  }
  .mobile-gamepad .pad-cluster.nav .pad-btn{
    position:absolute;border-radius:0;isolation:isolate;
    background:transparent;border:0;box-shadow:none;transform:none;
  }
  .mobile-gamepad .pad-cluster.nav .pad-btn::before{
    content:"";position:absolute;z-index:-1;width:40px;height:40px;border-radius:50%;box-sizing:border-box;
    background:var(--color-paper-2);border:1px solid var(--color-rule);
    box-shadow:0 3px 0 #050b14,inset 0 1px 0 #ffffff0d;
  }
  .mobile-gamepad .pad-cluster.nav .pad-btn:active{background:transparent;border:0;box-shadow:none;transform:none}
  .mobile-gamepad .pad-cluster.nav .pad-btn:active::before{
    background:var(--color-paper-3);border-color:var(--color-primary);box-shadow:0 1px 0 #050b14;translate:0 2px;
  }
  .mobile-gamepad .pad-cluster.nav .pad-btn:focus-visible{outline:none}
  .mobile-gamepad .pad-cluster.nav .pad-btn:focus-visible::before{outline:2px solid var(--color-focus);outline-offset:-4px}
  #padUp{left:0;top:0;width:100%;height:50%;padding:0 0 10px;clip-path:polygon(0 0,100% 0,50% 100%)}
  #padDown{left:0;bottom:0;width:100%;height:50%;padding:10px 0 0;clip-path:polygon(50% 0,100% 100%,0 100%)}
  #padLeft{left:0;top:0;width:50%;height:100%;padding:0 10px 0 0;clip-path:polygon(0 0,100% 50%,0 100%)}
  #padRight{right:0;top:0;width:50%;height:100%;padding:0 0 0 10px;clip-path:polygon(0 50%,100% 0,100% 100%)}
  #padUp::before{left:calc(50% - 20px);top:0}
  .mobile-gamepad .pad-cluster.nav #padUp::before{background:var(--color-paper-3);border-color:var(--color-muted)}
  .mobile-gamepad .pad-cluster.nav #padUp:active::before{border-color:var(--color-primary)}
  #padDown::before{left:calc(50% - 20px);bottom:0}
  #padLeft::before{left:0;top:calc(50% - 20px)}
  #padRight::before{right:0;top:calc(50% - 20px)}
}

/* Difficulty controls keep their touch target even in short windows. */
@media(pointer:coarse){.intro-level-pill{min-height:44px}}
@media(pointer:coarse) and (max-height:520px){
  .intro-shell{padding-block:var(--space-xs)!important}
  .intro-sub-row{gap:var(--space-xs)!important}
  .intro-cta-wrap{padding-top:var(--space-sm)}
}

/* Short landscape: hold and hard drop reach the 44px touch minimum. */
@media(max-height:540px) and (orientation:landscape){
  .mobile-gamepad .center-hold{height:44px!important;bottom:max(64px, calc(64px + env(safe-area-inset-bottom, 10px)))!important}
  .mobile-gamepad .pad-cluster.actions{grid-template-rows:44px 46px!important}
  .mobile-gamepad .pad-cluster.actions .act-slam{height:44px!important}
}

/* HUD polish: keep guide header on one line, readable guide button */
.side-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.side.right .card > div:first-child .label{white-space:nowrap}
.side.right .intro-aux-btn{padding:4px 10px!important;font-size:11px!important;white-space:nowrap;min-height:28px;width:auto!important;flex:none;border-radius:6px}

/* Roomier desktop typography; compact windows keep their existing fit. */
@media(min-width:901px){
  .intro-box-title{font-size:12px}
  .intro-stat-label{font-size:11px}
  .intro-level-pill{font-size:13px;padding:7px 0}
  .intro-aux-btn{font-size:12px;padding:9px 8px}
}

/* Primary dialog actions (resume / start / retry / confirm) are filled like the intro launch button */
.modal #start,.controls-dialog .controls-done-btn,.bgm-dialog .bgm-done-btn{
  background:var(--color-primary);
  color:var(--color-accent-ink);border-color:var(--color-primary);font-size:16px;font-weight:900;min-height:48px;
  box-shadow:none;
}
.modal #start:active,.controls-dialog .controls-done-btn:active,.bgm-dialog .bgm-done-btn:active{transform:translateY(3px);box-shadow:0 0 0 transparent,inset 0 1px 0 #ffffff80}
/* Secondary dialog actions use the flat sidebar style instead of the global glowing button */
.modal button.secondary{font:800 14px/1.3 var(--font-body);min-height:44px;background:var(--color-paper-2);border:1px solid var(--color-rule);color:var(--color-ink-2);box-shadow:none;filter:none;transform:none;letter-spacing:0}
.modal button.secondary:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){
  .modal #start:not(:disabled):hover,.controls-dialog .controls-done-btn:hover,.bgm-dialog .bgm-done-btn:hover{
    background:var(--color-primary);
    filter:brightness(1.08);transform:translateY(-1px);
    box-shadow:none;
  }
  .modal button.secondary:hover{background:var(--color-paper-3);filter:none;transform:none;box-shadow:none}
}

/* Sprint adds a timer card to the left panel; tighten spacing so the menu button stays on-screen at ~800px tall. */
@media(min-width:801px) and (max-height:860px){
  .side{gap:3px}
  .side .card{padding-top:4px;padding-bottom:4px}
}