/* Fonts are inlined into dist/fonts.css by tools/build.mjs (works from file://). */
:root {
  --accent: #6fc3ff;
  --accent-2: #3a8dff;
  --accent-soft: rgba(111, 195, 255, 0.35);
  --panel: rgba(6, 14, 30, 0.72);
  --panel-2: rgba(10, 24, 48, 0.82);
  --line: rgba(130, 195, 255, 0.28);
  --text: #d6e8ff;
  --dim: #7f9bc0;
  --warn: #ff5a3a;
  --gold: #ffcf6a;
  --good: #7dffb0;
  --hud-font: 'Orbitron', 'Segoe UI', sans-serif;
  --ui-font: 'Rajdhani', 'Segoe UI', sans-serif;
  --s: min(1vw, 1.8vh);
}

html, body { margin: 0; height: 100%; background: #000; overflow: hidden; color: var(--text); font-family: var(--ui-font); user-select: none; -webkit-user-select: none; }
#app, #ui { position: fixed; inset: 0; }
#ui { pointer-events: none; }
#ui .interactive, #ui .screen.active { pointer-events: auto; }
#game-canvas { display: block; width: 100%; height: 100%; }
body.hide-cursor { cursor: none; }

.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.screen.active { opacity: 1; visibility: visible; transition: opacity .45s ease; }

/* ---------------------------------------------------------------- logo */
.logo { position: relative; font-family: var(--hud-font); line-height: 0.9; text-align: center; filter: drop-shadow(0 0 calc(var(--s) * 2) rgba(80, 160, 255, 0.35)); }
.logo .void { font-weight: 700; font-size: calc(var(--s) * 11); letter-spacing: 0.06em; display: flex; justify-content: center; align-items: center; }
.logo .void span.l { background: linear-gradient(180deg, #ffffff 0%, #e2eeff 35%, #7e96b8 50%, #eaf3ff 62%, #a3b8d4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo .eclipse { position: relative; width: 0.78em; height: 0.78em; margin: 0 0.04em; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #000 58%, #0a1a33 62%, #6fc3ff 66%, #e9f6ff 68%, #6fc3ff 71%, rgba(40, 120, 255, 0.35) 78%, transparent 82%); box-shadow: 0 0 calc(var(--s) * 4) rgba(80, 170, 255, 0.7), inset 0 0 calc(var(--s) * 1) rgba(0,0,0,1); }
.logo .eclipse::after { content: ''; position: absolute; left: 50%; top: -14%; width: 160%; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(200, 235, 255, 0.95), transparent); box-shadow: 0 0 12px #bfe4ff; }
.logo .strike { font-weight: 700; font-size: calc(var(--s) * 5.2); letter-spacing: 0.32em; margin-top: calc(var(--s) * 0.8); padding-left: 0.32em; background: linear-gradient(180deg, #ffffff 0%, #cfdcee 45%, #6f829e 55%, #dfe9f7 70%, #93a6c0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------- title */
#screen-title .left { position: absolute; left: 6vw; top: 9vh; }
#screen-title .menu { margin-top: calc(var(--s) * 5); }
#screen-title .tagline { position: absolute; left: 6vw; bottom: 6vh; font: 600 calc(var(--s) * 1.35) var(--ui-font); letter-spacing: 0.45em; color: var(--dim); }
.menu { display: flex; flex-direction: column; gap: calc(var(--s) * 0.7); }
.menu-item { position: relative; width: calc(var(--s) * 26); padding: calc(var(--s) * 0.95) calc(var(--s) * 2.2); font: 600 calc(var(--s) * 1.9) var(--ui-font); letter-spacing: 0.14em; color: #c4d8f2; background: linear-gradient(90deg, rgba(20, 42, 76, 0.55), rgba(20, 42, 76, 0)); border-left: 2px solid rgba(120, 180, 255, 0.25); clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%); cursor: pointer; transition: color .15s, background .2s, transform .2s, padding .2s; }
.menu-item::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(120, 190, 255, 0.35), transparent); }
.menu-item.sel { color: #fff; padding-left: calc(var(--s) * 2.8); background: linear-gradient(90deg, rgba(58, 141, 255, 0.72), rgba(40, 100, 220, 0.12) 80%, transparent); border-left: 3px solid #bfe6ff; text-shadow: 0 0 12px rgba(111, 195, 255, 0.9); }
.menu-item.sel::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; box-shadow: 0 0 14px 2px #6fc3ff; }
.menu-item.disabled { opacity: 0.4; }

.prompts { position: absolute; right: 3vw; bottom: 4vh; display: flex; gap: calc(var(--s) * 2.2); font: 600 calc(var(--s) * 1.3) var(--ui-font); letter-spacing: 0.12em; color: var(--dim); align-items: center; }
.prompts .p { display: flex; align-items: center; gap: 0.5em; }
.key { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; padding: 0 0.45em; border: 1px solid rgba(160, 205, 255, 0.55); border-radius: 4px; font: 700 0.85em var(--hud-font); color: #e8f4ff; background: rgba(20, 40, 70, 0.6); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.4); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.7em; padding: 0 0.3em; border-radius: 999px; font: 700 0.85em var(--hud-font); color: #fff; background: #2a3444; box-shadow: 0 0 0 1px rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0,0,0,0.35); }
.btn.xb-a { background: #3fa142; } .btn.xb-b { background: #d0342c; } .btn.xb-menu { border-radius: 6px; font-size: 0.7em; padding: 0 0.6em; }
.btn.ps-cross { background: #1d2230; color: #8fb8ff; } .btn.ps-circle { background: #1d2230; color: #ff6a7a; } .btn.ps-opt { border-radius: 6px; font-size: 0.62em; padding: 0 0.6em; }
.btn.sw { background: #2b2b2b; }

.device-toast { position: absolute; top: 3vh; left: 50%; transform: translateX(-50%) translateY(-120%); padding: 0.6em 1.4em; background: var(--panel-2); border: 1px solid var(--line); font: 600 calc(var(--s) * 1.3) var(--ui-font); letter-spacing: 0.14em; transition: transform .35s ease; }
.device-toast.show { transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------- panels */
.panel { background: linear-gradient(180deg, rgba(10, 24, 48, 0.82), rgba(4, 10, 24, 0.82)); border: 1px solid var(--line); box-shadow: 0 0 40px rgba(0,0,0,0.5), inset 0 0 30px rgba(60, 130, 255, 0.06); backdrop-filter: blur(6px); }
.panel-title { display: inline-block; padding: calc(var(--s) * 0.8) calc(var(--s) * 2.6) calc(var(--s) * 0.8) calc(var(--s) * 1.4); font: 500 calc(var(--s) * 2.4) var(--hud-font); letter-spacing: 0.14em; color: #eaf4ff; background: linear-gradient(90deg, rgba(30, 60, 110, 0.75), rgba(10, 24, 48, 0.4)); border: 1px solid var(--line); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
.center-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.backdrop-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 6, 18, 0.35), rgba(0, 4, 12, 0.85)); }
.footer-line { margin-top: calc(var(--s) * 2.4); font: 600 calc(var(--s) * 1.3) var(--ui-font); letter-spacing: 0.5em; color: var(--dim); text-align: center; }

/* ---------------------------------------------------------------- level select */
#screen-levels .wrap { width: min(92vw, 150vh); }
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--s) * 1.2); margin-top: calc(var(--s) * 1.8); }
.level-card { position: relative; aspect-ratio: 1 / 1.12; border: 1px solid rgba(130, 190, 255, 0.3); background: #02060e; cursor: pointer; overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; }
.level-card canvas, .level-card .thumb { position: absolute; inset: 0; width: 100%; height: 82%; object-fit: cover; }
.level-card .thumb.loading { background: linear-gradient(110deg, #06101f 30%, #0e2240 50%, #06101f 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
.level-card .num { position: absolute; left: 0.5em; top: 0.3em; font: 700 calc(var(--s) * 2.2) var(--hud-font); color: #fff; text-shadow: 0 0 8px rgba(0,0,0,0.9); }
.level-card .name { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; display: flex; align-items: center; padding-left: 0.7em; font: 600 calc(var(--s) * 1.35) var(--ui-font); letter-spacing: 0.1em; background: linear-gradient(180deg, rgba(8, 20, 40, 0.95), rgba(4, 10, 22, 1)); border-top: 1px solid rgba(130, 190, 255, 0.3); }
.level-card .cleared { position: absolute; right: 0.5em; top: 0.5em; font: 700 calc(var(--s) * 0.9) var(--hud-font); color: var(--good); letter-spacing: 0.1em; text-shadow: 0 0 6px rgba(0,0,0,1); }
.level-card.sel { border-color: #bfe6ff; transform: translateY(-4px) scale(1.03); box-shadow: 0 0 0 1px #6fc3ff, 0 0 26px rgba(111, 195, 255, 0.55); z-index: 2; }
.level-info { margin-top: calc(var(--s) * 1.4); min-height: 1.4em; font: 600 calc(var(--s) * 1.6) var(--ui-font); letter-spacing: 0.12em; color: var(--text); text-align: center; }

/* ---------------------------------------------------------------- HUD */
#hud { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
#hud.show { opacity: 1; }
.hud-level { position: absolute; left: 1.4vw; top: 2vh; padding: calc(var(--s) * 0.7) calc(var(--s) * 3) calc(var(--s) * 0.7) calc(var(--s) * 1.3); font: 500 calc(var(--s) * 1.75) var(--hud-font); letter-spacing: 0.1em; color: #eef6ff; background: linear-gradient(90deg, rgba(8, 20, 42, 0.85), rgba(8, 20, 42, 0.45)); border: 1px solid var(--line); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); text-shadow: 0 0 10px rgba(111, 195, 255, 0.5); }
.hud-level .wave { display: block; margin-top: 0.25em; font: 600 0.62em var(--ui-font); letter-spacing: 0.3em; color: var(--dim); }
.hud-score { position: absolute; right: 1.6vw; top: 1.6vh; text-align: right; }
.hud-score .label { font: 600 calc(var(--s) * 1.1) var(--hud-font); letter-spacing: 0.18em; color: var(--dim); }
.hud-score .value { font: 700 calc(var(--s) * 2.6) var(--hud-font); letter-spacing: 0.08em; color: #fff; text-shadow: 0 0 14px rgba(111, 195, 255, 0.6); font-variant-numeric: tabular-nums; }
.hud-score .hi { font: 600 calc(var(--s) * 1.1) var(--hud-font); color: var(--dim); letter-spacing: 0.12em; }
.hud-score .mult { margin-top: 0.3em; font: 700 calc(var(--s) * 1.6) var(--hud-font); color: var(--gold); text-shadow: 0 0 12px rgba(255, 180, 60, 0.7); opacity: 0; transition: opacity .2s; }
.hud-score .mult.on { opacity: 1; }
.hud-bottom { position: absolute; left: 1.4vw; bottom: 2vh; padding: calc(var(--s) * 1) calc(var(--s) * 1.4); min-width: calc(var(--s) * 24); background: linear-gradient(90deg, rgba(6, 16, 34, 0.8), rgba(6, 16, 34, 0.35)); border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.hud-row { display: flex; align-items: center; gap: calc(var(--s) * 1); margin: calc(var(--s) * 0.45) 0; }
.hud-row .k { width: calc(var(--s) * 6.6); font: 600 calc(var(--s) * 1.05) var(--hud-font); letter-spacing: 0.14em; color: var(--dim); }
.hud-row img { width: calc(var(--s) * 2.2); height: calc(var(--s) * 2.2); }
.hud-row .icons { display: flex; gap: calc(var(--s) * 0.35); align-items: center; }
.hud-row .icons img.off { opacity: 0.22; filter: grayscale(1); }
.power-bar { display: flex; gap: 3px; }
.power-bar i { display: block; width: calc(var(--s) * 1.25); height: calc(var(--s) * 1.1); background: rgba(80, 130, 200, 0.2); transform: skewX(-20deg); }
.power-bar i.on { background: linear-gradient(180deg, #bfe6ff, #3a8dff); box-shadow: 0 0 8px rgba(111, 195, 255, 0.8); }
.hud-weapon { font: 700 calc(var(--s) * 1.2) var(--hud-font); letter-spacing: 0.12em; color: #e8f4ff; }
.hud-flash { animation: hudflash .6s ease 3; }
@keyframes hudflash { 50% { filter: brightness(2.2); } }
.boss-bar { position: absolute; left: 50%; top: 2.2vh; width: min(46vw, 80vh); transform: translateX(-50%) translateY(-200%); transition: transform .6s ease; text-align: center; }
.boss-bar.show { transform: translateX(-50%) translateY(0); }
.boss-bar .name { font: 700 calc(var(--s) * 1.35) var(--hud-font); letter-spacing: 0.4em; color: #ffd0c0; text-shadow: 0 0 10px rgba(255, 80, 40, 0.8); margin-bottom: 0.4em; }
.boss-bar .track { height: calc(var(--s) * 1.1); background: rgba(40, 10, 10, 0.7); border: 1px solid rgba(255, 110, 80, 0.5); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); overflow: hidden; }
.boss-bar .fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff3a1a, #ffb04a); box-shadow: 0 0 12px #ff5a2a; transition: width .2s; }
.boss-bar .ghost { position: absolute; }
.pickup-toast { position: absolute; left: 50%; bottom: 16vh; transform: translateX(-50%); display: flex; align-items: center; gap: 0.6em; font: 700 calc(var(--s) * 1.8) var(--hud-font); letter-spacing: 0.2em; color: #fff; text-shadow: 0 0 14px rgba(111, 195, 255, 0.9); opacity: 0; }
.pickup-toast img { width: calc(var(--s) * 3); height: calc(var(--s) * 3); }
.pickup-toast.go { animation: toast 1.6s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.9); } 12% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-24px); } }
/* ---------------------------------------------------------------- touch */
html, body { touch-action: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
.touch-ui { position: absolute; inset: 0; pointer-events: none; display: none; }
body.touch-mode.in-play:not(.demo) .touch-ui { display: block; }
.touch-btn { position: absolute; pointer-events: auto; border: 1px solid rgba(160, 210, 255, 0.45); background: radial-gradient(circle at 50% 40%, rgba(40, 90, 160, 0.55), rgba(6, 14, 30, 0.7)); color: #e8f4ff; font: 700 18px var(--hud-font); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 18px rgba(80, 160, 255, 0.35); touch-action: none; user-select: none; -webkit-user-select: none; }
.touch-btn:active { transform: scale(0.92); background: radial-gradient(circle, rgba(111, 195, 255, 0.7), rgba(20, 50, 100, 0.8)); }
.tb-bomb { right: max(16px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); width: 78px; height: 78px; }
.tb-bomb img { width: 44px; height: 44px; }
.tb-bomb span { position: absolute; right: -2px; top: -2px; min-width: 24px; height: 24px; border-radius: 12px; background: #ff8a2a; color: #111; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.tb-pause { right: max(14px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 84px); width: 46px; height: 46px; font-size: 14px; border-radius: 12px; }
.prompts .p { pointer-events: auto; cursor: pointer; }
.key.tap { min-width: 2.6em; }

/* ---------------------------------------------------------------- small / portrait screens */
@media (max-width: 900px), (max-height: 520px) {
  :root { --s: min(1.9vw, 1.7vh); }
  .menu-item { width: calc(var(--s) * 34); font-size: calc(var(--s) * 2.3); padding-block: calc(var(--s) * 1.3); }
  .prompts { font-size: calc(var(--s) * 1.8); }
  .hud-score .value { font-size: calc(var(--s) * 3.2); }
  .hud-level { font-size: calc(var(--s) * 2.1); }
  .hud-row .k { font-size: calc(var(--s) * 1.4); width: calc(var(--s) * 8); }
  .hud-row img { width: calc(var(--s) * 2.8); height: calc(var(--s) * 2.8); }
  .power-bar i { width: calc(var(--s) * 1.7); height: calc(var(--s) * 1.4); }
  .hud-weapon { font-size: calc(var(--s) * 1.5); }
  .opt { font-size: calc(var(--s) * 2.1); padding-block: calc(var(--s) * 1.3); }
  .slider { width: calc(var(--s) * 14); }
  .stats { font-size: calc(var(--s) * 2); }
  .modal { max-height: 88vh; overflow-y: auto; padding: calc(var(--s) * 2.4); }
  .popup { font-size: calc(var(--s) * 1.8); }
}
@media (orientation: portrait) {
  #screen-title .left { left: 50%; transform: translateX(-50%); top: 7vh; display: flex; flex-direction: column; align-items: center; }
  #screen-title .logo { text-align: center !important; }
  #screen-title .void { justify-content: center !important; }
  #screen-title .menu { align-items: center; }
  #screen-title .tagline { left: 0; right: 0; text-align: center; bottom: 12vh; }
  .logo .void { font-size: calc(var(--s) * 13); }
  .logo .strike { font-size: calc(var(--s) * 6.2); }
  #screen-levels .center-wrap { justify-content: flex-start; overflow-y: auto; padding-block: 5vh 14vh; touch-action: pan-y; }
  #screen-levels .wrap { width: 92vw; }
  .level-grid { grid-template-columns: repeat(2, 1fr); }
  .level-card .name { font-size: calc(var(--s) * 2); }
  .level-card .num { font-size: calc(var(--s) * 3); }
  .prompts { left: 0; right: 0; justify-content: center; bottom: 3vh; }
  .hud-bottom { min-width: 0; padding: calc(var(--s) * 0.6) calc(var(--s) * 1); bottom: max(1vh, env(safe-area-inset-bottom)); }
  .hud-bottom .hud-row { margin: calc(var(--s) * 0.25) 0; }
  .hud-bottom .hud-row:last-child { display: none; }
  .hud-level { max-width: 50vw; font-size: calc(var(--s) * 1.7); padding-right: calc(var(--s) * 2.4); top: max(1.2vh, env(safe-area-inset-top)); }
  .hud-score { top: max(1vh, env(safe-area-inset-top)); }
  .hud-score .label { display: none; }
  .hud-score .value { font-size: calc(var(--s) * 2.8); }
  .boss-bar { top: calc(var(--s) * 13); width: 80vw; }
  .boss-bar:not(.show) { opacity: 0; }
  .demo-tag { white-space: normal; text-align: center; width: 80vw; bottom: 14vh; }
}

.demo-tag { position: absolute; left: 50%; bottom: 3.2vh; transform: translateX(-50%) translateY(200%); padding: 0.55em 1.6em; font: 600 calc(var(--s) * 1.3) var(--ui-font); letter-spacing: 0.2em; color: var(--text); background: rgba(6, 14, 30, 0.72); border: 1px solid var(--line); white-space: nowrap; opacity: 0; transition: transform .4s ease, opacity .4s ease; pointer-events: none; }
.demo-tag b { color: var(--gold); font-family: var(--hud-font); letter-spacing: 0.25em; animation: pulse 1.6s ease-in-out infinite; }
.demo-tag.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.fps { position: absolute; right: 1vw; bottom: 1vh; font: 600 12px var(--hud-font); color: var(--dim); }

/* ---------------------------------------------------------------- banners */
#banner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.bn { position: absolute; text-align: center; opacity: 0; }
.bn.go { animation: bnIn 3.2s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes bnIn { 0% { opacity: 0; transform: scale(1.3); filter: blur(8px); letter-spacing: 0.8em; } 14% { opacity: 1; transform: scale(1); filter: blur(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(0.97); } }
.bn .t1 { font: 500 calc(var(--s) * 1.6) var(--hud-font); letter-spacing: 0.6em; color: var(--dim); }
.bn .t2 { font: 700 calc(var(--s) * 5) var(--hud-font); letter-spacing: 0.12em; color: #fff; text-shadow: 0 0 30px rgba(111, 195, 255, 0.8); margin: 0.15em 0; }
.bn .t3 { font: 600 calc(var(--s) * 1.6) var(--ui-font); letter-spacing: 0.3em; color: var(--text); }
.bn .rule { width: calc(var(--s) * 40); height: 1px; margin: calc(var(--s) * 1) auto; background: linear-gradient(90deg, transparent, #6fc3ff, transparent); }
.bn.gold .t2 { color: var(--gold); text-shadow: 0 0 30px rgba(255, 190, 80, 0.8); }
.bn.warning { width: 100%; }
.bn.warning .stripe { height: calc(var(--s) * 2.2); background: repeating-linear-gradient(-45deg, rgba(255, 60, 30, 0.85) 0 18px, rgba(20, 0, 0, 0.6) 18px 36px); animation: stripe 1s linear infinite; }
@keyframes stripe { to { background-position: 51px 0; } }
.bn.warning .t2 { color: #ff5a3a; text-shadow: 0 0 30px rgba(255, 60, 30, 0.9); animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.bn.warning .body { padding: calc(var(--s) * 1.6) 0; background: rgba(30, 0, 0, 0.45); }
.flash-text { position: absolute; top: 30vh; left: 50%; transform: translateX(-50%); font: 700 calc(var(--s) * 2.2) var(--hud-font); letter-spacing: 0.25em; white-space: nowrap; opacity: 0; }
.flash-text.go { animation: ftext 1.8s ease forwards; }
.flash-text.warn { color: #ff7a5a; text-shadow: 0 0 18px rgba(255, 70, 40, 0.9); }
.flash-text.good { color: var(--good); text-shadow: 0 0 18px rgba(80, 255, 160, 0.9); }
@keyframes ftext { 0% { opacity: 0; transform: translateX(-50%) scale(1.4); } 15% { opacity: 1; transform: translateX(-50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-20px); } }

.popup { position: absolute; transform: translate(-50%, -50%); font: 700 calc(var(--s) * 1.25) var(--hud-font); color: #fff; text-shadow: 0 0 8px rgba(111, 195, 255, 0.9), 0 0 2px #000; white-space: nowrap; animation: popup 1s ease-out forwards; }
.popup .lbl { display: block; font-size: 0.7em; letter-spacing: 0.2em; color: var(--gold); text-align: center; }
.popup.big { font-size: calc(var(--s) * 2); color: var(--gold); }
@keyframes popup { 0% { opacity: 0; margin-top: 8px; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; margin-top: -36px; } }

/* ---------------------------------------------------------------- overlays (pause, clear, over) */
.modal { min-width: min(560px, 80vw); padding: calc(var(--s) * 3) calc(var(--s) * 4); text-align: center; }
.modal h1 { margin: 0 0 0.2em; font: 700 calc(var(--s) * 4) var(--hud-font); letter-spacing: 0.12em; color: #fff; text-shadow: 0 0 24px rgba(111, 195, 255, 0.7); }
.modal h2 { margin: 0 0 1.2em; font: 600 calc(var(--s) * 1.5) var(--ui-font); letter-spacing: 0.4em; color: var(--dim); }
.modal .menu { align-items: center; margin-top: calc(var(--s) * 2); }
.modal .menu-item { text-align: left; }
.stats { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--s) * 0.7) calc(var(--s) * 4); font: 600 calc(var(--s) * 1.7) var(--ui-font); letter-spacing: 0.12em; text-align: left; }
.stats .v { font-family: var(--hud-font); font-weight: 700; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.stats .total { grid-column: 1 / -1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); margin: 0.4em 0; }
.stats .gold { color: var(--gold); }
.gameover h1 { color: #ff6a4a; text-shadow: 0 0 30px rgba(255, 70, 40, 0.8); }

/* ---------------------------------------------------------------- options */
.opt-list { display: flex; flex-direction: column; gap: calc(var(--s) * 0.6); margin-top: calc(var(--s) * 2); min-width: min(640px, 84vw); }
.opt { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--s) * 0.9) calc(var(--s) * 1.6); font: 600 calc(var(--s) * 1.7) var(--ui-font); letter-spacing: 0.14em; background: rgba(20, 42, 76, 0.35); border-left: 2px solid rgba(120, 180, 255, 0.2); cursor: pointer; }
.opt.sel { background: linear-gradient(90deg, rgba(58, 141, 255, 0.55), rgba(40, 100, 220, 0.1)); border-left-color: #bfe6ff; color: #fff; }
.opt .val { display: flex; align-items: center; gap: 0.8em; font-family: var(--hud-font); font-size: 0.8em; }
.slider { width: calc(var(--s) * 18); height: 6px; background: rgba(120, 180, 255, 0.2); position: relative; }
.slider b { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #3a8dff, #bfe6ff); box-shadow: 0 0 8px #6fc3ff; }
.opt .arrows { color: var(--accent); }

/* ---------------------------------------------------------------- scores */
.score-table { margin-top: calc(var(--s) * 2); min-width: min(620px, 84vw); font: 600 calc(var(--s) * 1.8) var(--ui-font); letter-spacing: 0.12em; }
.score-row { display: grid; grid-template-columns: 3em 1fr 8em 5em; padding: calc(var(--s) * 0.55) calc(var(--s) * 1.4); border-bottom: 1px solid rgba(120, 180, 255, 0.12); }
.score-row.head { color: var(--dim); font-size: 0.75em; letter-spacing: 0.3em; }
.score-row .sc { font-family: var(--hud-font); text-align: right; color: #fff; }
.score-row .lv { text-align: right; color: var(--dim); }
.score-row.me { background: linear-gradient(90deg, rgba(255, 190, 80, 0.25), transparent); color: var(--gold); }
.score-row:nth-child(2) .sc { color: var(--gold); }
.name-entry { display: flex; gap: calc(var(--s) * 1.4); justify-content: center; margin: calc(var(--s) * 2.4) 0; }
.name-entry .ch { width: calc(var(--s) * 5.5); height: calc(var(--s) * 7); display: flex; align-items: center; justify-content: center; font: 700 calc(var(--s) * 4.5) var(--hud-font); color: #fff; border-bottom: 3px solid rgba(120, 180, 255, 0.3); background: rgba(20, 42, 76, 0.4); position: relative; }
.name-entry .ch.sel { border-bottom-color: #bfe6ff; color: var(--gold); text-shadow: 0 0 20px rgba(255, 190, 80, 0.8); }
.name-entry .ch.sel::before, .name-entry .ch.sel::after { position: absolute; left: 50%; transform: translateX(-50%); font-size: 0.35em; color: var(--accent); }
.name-entry .ch.sel::before { content: '▲'; top: -1.2em; }
.name-entry .ch.sel::after { content: '▼'; bottom: -1.4em; }
.credits { max-width: min(760px, 88vw); max-height: 62vh; overflow: auto; text-align: left; font: 500 calc(var(--s) * 1.45) var(--ui-font); letter-spacing: 0.04em; line-height: 1.45; color: var(--text); }
.credits h3 { font: 700 calc(var(--s) * 1.25) var(--hud-font); letter-spacing: 0.2em; color: var(--accent); margin: 1.2em 0 0.3em; }

/* ---------------------------------------------------------------- boot */
#screen-boot { background: #000; }
#screen-boot .center-wrap { gap: calc(var(--s) * 4); }
.load-bar { width: calc(var(--s) * 34); height: 3px; background: rgba(120, 180, 255, 0.15); overflow: hidden; }
.load-bar b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3a8dff, #bfe6ff); box-shadow: 0 0 10px #6fc3ff; transition: width .2s; }
.load-text { font: 600 calc(var(--s) * 1.4) var(--ui-font); letter-spacing: 0.5em; color: var(--dim); text-align: center; }
.press { animation: pulse 1.6s ease-in-out infinite; color: #e8f4ff; }
@keyframes pulse { 50% { opacity: 0.35; } }
.warp-fade { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .6s; pointer-events: none; }
.warp-fade.on { opacity: 1; }
.scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; opacity: 0.35; }