/* STONKS DEFIED — y2k / Sony Ericsson era styling */
:root {
  --bg: #061033;
  --bg2: #0a1a4d;
  --grid: #13275e;
  --map: #3d7bff;
  --drv: #ffd60a;
  --text: #cfe0ff;
  --dim: #5d76b8;
  --accent: #ffd60a;
  --good: #39e07a;
  --danger: #ff5d5d;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: 'VT323', 'Courier New', monospace;
  color: var(--text);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* CRT / old LCD scanlines */
#scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.10) 2px 3px);
  mix-blend-mode: multiply;
}

.hidden { display: none !important; }

/* ---------- fake phone status bar ---------- */
#statusbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 12px calc(2px);
  padding-top: max(4px, env(safe-area-inset-top));
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--dim);
  border-bottom: 1px solid var(--grid);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  pointer-events: none;
}
#statusbar .carrier { color: var(--text); }
#statusbar #sb-clock { margin-left: auto; }
#statusbar .sig {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 47px;
  height: 14px;
  line-height: 0;
  transform: translateY(1px);
}
#statusbar .sig i {
  display: block;
  width: 10px;
  background: var(--dim);
  box-shadow: inset 0 1px color-mix(in srgb, var(--text) 18%, transparent);
}
#statusbar .sig i:nth-child(1) { height: 5px; }
#statusbar .sig i:nth-child(2) { height: 8px; }
#statusbar .sig i:nth-child(3) { height: 11px; }
#statusbar .sig i:nth-child(4) { height: 14px; }

/* ---------- menu screens ---------- */
.screen {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 44px 18px 20px;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
}
.screen.active { display: flex; }

.title {
  font-family: 'Major Mono Display', 'VT323', monospace;
  font-size: clamp(34px, 8vw, 58px);
  line-height: 1.02;
  color: var(--text);
  text-shadow: 0 0 18px color-mix(in srgb, var(--map) 55%, transparent);
  letter-spacing: 2px;
}
.av-monogram {
  display: inline-grid;
  place-items: center;
  font-family: 'Major Mono Display', monospace;
  line-height: 1;
  letter-spacing: 0;
  color: var(--accent);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: rotate(-3deg);
  transition: color .3s ease, -webkit-text-stroke .3s ease,
    transform 1.3s ease-in-out, opacity .6s ease, visibility .6s ease;
}
.av-monogram span { grid-area: 1 / 1; text-align: center; }
body.content-ready .av-monogram { opacity: 1; visibility: visible; }
.av-monogram:hover,
.av-monogram:focus-visible {
  color: var(--text);
  -webkit-text-stroke: 1px var(--bg);
  transform: scale(1.08) rotate(-183deg);
  outline: none;
}
.av-title {
  font-size: .9em;
  text-shadow: 0 0 14px var(--accent);
}
.subtitle {
  font-size: clamp(15px, 3vw, 20px);
  color: var(--dim);
  letter-spacing: 4px;
  margin-bottom: 8px;
}
.scr-head {
  font-family: 'Major Mono Display', 'VT323', monospace;
  font-size: clamp(20px, 5vw, 30px);
  letter-spacing: 3px;
  margin-bottom: 6px;
  color: var(--text);
}

.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, 92vw);
}

.mbtn {
  font-family: inherit;
  font-size: 21px;
  letter-spacing: 2px;
  padding: 9px 16px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg2) 70%, transparent);
  border: 2px solid var(--grid);
  cursor: pointer;
  text-align: center;
  transition: none;
}
.mbtn:hover, .mbtn.sel {
  border-color: var(--map);
  background: var(--map);
  color: var(--bg);
  box-shadow: 0 0 16px color-mix(in srgb, var(--map) 60%, transparent);
}
.mbtn.sel::before { content: '\25B8 '; }
.mbtn.primary { border-color: var(--accent); }
.mbtn.back { font-size: 17px; opacity: 0.85; }

.foot {
  font-size: 14px;
  color: var(--dim);
  letter-spacing: 2px;
  margin-top: 10px;
}
.version-tag {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 1px;
  opacity: 0.7;
  margin-top: -4px;
}

/* level cards */
#level-grid {
  max-height: min(58vh, 520px);
  overflow-y: auto;
  padding-right: 4px;
  flex-shrink: 1;
}
#level-grid .mbtn { flex-shrink: 0; }
.mbtn.lvl { text-align: left; line-height: 1.25; }
.l-row1 { display: block; font-size: 21px; }
.l-row1 b { color: var(--accent); }
.mbtn.lvl:hover .l-row1 b, .mbtn.lvl.sel .l-row1 b { color: var(--bg); }
.l-row2 { display: block; font-size: 14px; opacity: 0.75; letter-spacing: 1px; }
.medal { color: var(--good); }
.mbtn.lvl:hover .medal, .mbtn.lvl.sel .medal { color: var(--bg); }

/* colorschemes */
.mbtn.scheme { display: flex; align-items: center; gap: 12px; justify-content: center; }
.mbtn.scheme.locked { opacity: 0.55; }
.chips { display: inline-flex; gap: 3px; }
.chips i {
  width: 14px; height: 14px;
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.35);
}

/* ticker screen */
.tick-box { display: flex; flex-direction: column; gap: 10px; width: min(760px, 94vw); }
#ticker-input {
  align-self: center;
  width: min(420px, 100%);
  box-sizing: border-box;
  font-family: inherit;
  font-size: 30px;
  letter-spacing: 6px;
  text-align: center;
  padding: 8px;
  color: var(--accent);
  background: var(--bg);
  border: 2px solid var(--map);
  outline: none;
  text-transform: uppercase;
}
.tick-box > #ticker-go { align-self: center; width: min(420px, 100%); }
#ticker-input.sel, #ticker-input:focus { box-shadow: 0 0 16px color-mix(in srgb, var(--map) 60%, transparent); }
#ticker-status { min-height: 22px; font-size: 17px; color: var(--dim); letter-spacing: 2px; }
.ticker-suggestions {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 12px;
  width: 100%;
  text-align: left;
}
.suggest-group {
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid var(--grid);
}
.suggest-head {
  margin-bottom: 6px;
  color: var(--dim);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
}
#suggest-wire { float: right; color: var(--accent); }
.suggest-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ticker-chip {
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--grid);
  color: var(--text);
  background: color-mix(in srgb, var(--bg2) 78%, transparent);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 1px;
  cursor: pointer;
}
.ticker-chip b { color: var(--accent); font-weight: normal; }
.ticker-chip .move { margin-left: 4px; color: var(--dim); }
.ticker-chip.gain .move { color: var(--good); }
.ticker-chip.loss .move { color: var(--danger); }
.ticker-chip:hover, .ticker-chip.sel, .ticker-chip:focus-visible {
  outline: none;
  color: var(--bg);
  border-color: var(--map);
  background: var(--map);
}
.ticker-chip:hover b, .ticker-chip.sel b,
.ticker-chip:hover .move, .ticker-chip.sel .move { color: var(--bg); }
.suggest-loading { color: var(--dim); font-size: 14px; letter-spacing: 1px; }
.note { font-size: 14px; color: var(--dim); line-height: 1.5; letter-spacing: 1px; }
.note b { color: var(--text); }

@media (max-width: 680px) {
  .ticker-suggestions { grid-template-columns: 1fr; gap: 7px; }
  .suggest-group { padding-top: 5px; }
  .suggest-head { margin-bottom: 4px; }
  .ticker-chip { padding: 4px 6px; }
}

/* credits */
.credits { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.av-credits {
  font-size: 64px;
  border: 3px solid var(--accent);
  padding: 18px 22px;
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent);
  margin: 26px 0;
}
.cr-main { font-size: 26px; letter-spacing: 4px; line-height: 1.4; }
.cr-sub { font-size: 16px; color: var(--dim); letter-spacing: 2px; line-height: 1.5; }
.cr-tiny { font-size: 13px; color: var(--dim); opacity: 0.8; letter-spacing: 1px; line-height: 1.6; }

/* Matrix colorscheme: dark menu haze, green code, blue disc-menu glow */
body.matrix-theme {
  background:
    radial-gradient(ellipse at 18% 38%, rgba(42,255,80,0.06), transparent 32%),
    radial-gradient(ellipse at 82% 32%, rgba(110,130,255,0.08), transparent 34%),
    linear-gradient(90deg, #000 0%, #031007 45%, #000 100%);
}
body.matrix-theme #app::before {
  content: "10110010 01101101 01010100 00110101 11001010 01001110 10100101 00101100 11100101 01001011 00110110 10101001 01010010 01110100 00101101 11101010";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  padding: 18px;
  color: rgba(30, 255, 69, 0.06);
  font-size: 18px;
  letter-spacing: 7px;
  line-height: 1.8;
  word-break: break-all;
  text-shadow: 0 0 6px rgba(30,255,69,0.2);
  background:
    repeating-linear-gradient(90deg, transparent 0 36px, rgba(28,255,67,0.025) 36px 38px),
    radial-gradient(ellipse at 50% 48%, transparent 0 28%, rgba(0,0,0,0.84) 70%);
  opacity: 0.42;
}
body.matrix-theme #game,
body.matrix-theme .screen,
body.matrix-theme #hud,
body.matrix-theme #overlay,
body.matrix-theme #toast,
body.matrix-theme #touch {
  position: absolute;
}
body.matrix-theme #game { z-index: 0; }
body.matrix-theme .screen { z-index: 10; }
body.matrix-theme #statusbar {
  color: var(--text);
  border-bottom-color: rgba(28,255,67,0.28);
  background: rgba(0, 8, 3, 0.74);
  text-shadow: 0 0 5px rgba(28,255,67,0.2);
}
body.matrix-theme .title,
body.matrix-theme .scr-head {
  color: var(--accent);
  padding: 4px 22px;
  border-radius: 12px;
  text-shadow:
    0 0 5px rgba(255,255,255,0.9),
    0 0 14px rgba(96,112,255,0.86),
    0 0 26px rgba(96,112,255,0.7);
  background:
    linear-gradient(90deg, transparent 0%, rgba(64,74,180,0.12) 14%, rgba(178,190,255,0.28) 50%, rgba(64,74,180,0.12) 86%, transparent 100%);
}
body.matrix-theme .subtitle,
body.matrix-theme .foot,
body.matrix-theme .note,
body.matrix-theme #ticker-status,
body.matrix-theme .l-row2 {
  color: var(--dim);
  text-shadow: 0 0 5px rgba(28,255,67,0.16);
}
body.matrix-theme .mbtn,
body.matrix-theme #ticker-input,
body.matrix-theme .hbtn,
body.matrix-theme .tbtn,
body.matrix-theme #ov-box {
  border-radius: 8px;
  border-color: rgba(28,255,67,0.52);
  color: var(--text);
  background: rgba(0, 10, 4, 0.9);
  box-shadow:
    inset 0 0 8px rgba(28,255,67,0.06),
    0 0 6px rgba(28,255,67,0.1);
  text-shadow: 0 0 5px rgba(28,255,67,0.2);
}
body.matrix-theme .mbtn:hover,
body.matrix-theme .mbtn.sel,
body.matrix-theme #ticker-input.sel,
body.matrix-theme #ticker-input:focus,
body.matrix-theme .hbtn:hover,
body.matrix-theme .tbtn.on {
  color: #001507;
  background: #19b84a;
  border-color: #82ff9e;
  box-shadow:
    0 0 8px rgba(28,255,67,0.38),
    0 0 18px rgba(28,255,67,0.14),
    inset 0 0 5px rgba(255,255,255,0.16);
  text-shadow: none;
}
body.matrix-theme .mbtn.primary,
body.matrix-theme .tbtn.big {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow:
    inset 0 0 12px rgba(184,196,255,0.14),
    0 0 16px rgba(120,132,255,0.35);
}
body.matrix-theme .tbtn.big.on {
  color: #000;
  background: var(--accent);
}
body.matrix-theme .mbtn.primary.sel,
body.matrix-theme .mbtn.primary:hover {
  color: #001507;
  border-color: #82ff9e;
}
body.matrix-theme .l-row1 b,
body.matrix-theme .t-arrow,
body.matrix-theme .monogram,
body.matrix-theme #ov-title,
body.matrix-theme #hud-sym {
  color: var(--accent);
  text-shadow:
    0 0 5px rgba(255,255,255,0.9),
    0 0 14px rgba(100,115,255,0.8);
}
body.matrix-theme .mbtn.sel .l-row1 b,
body.matrix-theme .mbtn.sel .l-row2,
body.matrix-theme .mbtn.sel .t-arrow {
  color: #001507;
  text-shadow: none;
}
body.matrix-theme .chips i {
  border-color: rgba(28,255,67,0.55);
  box-shadow: 0 0 6px currentColor;
}
body.matrix-theme #scan {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.24) 2px 3px),
    repeating-linear-gradient(90deg, rgba(28,255,67,0.025) 0 1px, transparent 1px 5px);
  mix-blend-mode: normal;
  opacity: 0.38;
}
body.matrix-theme #overlay {
  background:
    radial-gradient(ellipse at center, rgba(28,255,67,0.04), rgba(0,0,0,0.8) 70%);
}
body.matrix-theme #toast {
  color: #001503;
  background: var(--map);
  border-radius: 7px;
}

/* Tron colorscheme: cyan grid, orange rider, hard arcade glow */
body.tron-theme {
  background:
    radial-gradient(ellipse at 50% 64%, rgba(0,229,255,0.16), transparent 36%),
    linear-gradient(180deg, #020716 0%, #030a20 48%, #01030a 100%);
}
body.tron-theme #app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(rgba(0,229,255,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.08) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 76%, transparent 0 24%, rgba(0,0,0,0.72) 74%);
  background-size: 72px 72px, 72px 72px, 100% 100%;
  box-shadow: inset 0 0 80px rgba(0,229,255,0.12);
}
body.tron-theme #game,
body.tron-theme .screen,
body.tron-theme #hud,
body.tron-theme #overlay,
body.tron-theme #toast,
body.tron-theme #touch {
  position: absolute;
}
body.tron-theme #game { z-index: 0; }
body.tron-theme .screen { z-index: 10; }
body.tron-theme #statusbar {
  color: var(--map);
  border-bottom-color: rgba(0,229,255,0.35);
  background: rgba(1, 7, 22, 0.78);
  text-shadow: 0 0 10px rgba(0,229,255,0.7);
}
body.tron-theme .title,
body.tron-theme .scr-head,
body.tron-theme #hud-sym,
body.tron-theme #ov-title {
  color: var(--text);
  text-shadow:
    0 0 5px rgba(255,255,255,0.8),
    0 0 16px rgba(0,229,255,0.9),
    0 0 34px rgba(0,229,255,0.44);
}
body.tron-theme .mbtn,
body.tron-theme #ticker-input,
body.tron-theme .hbtn,
body.tron-theme .tbtn,
body.tron-theme #ov-box {
  border-color: rgba(0,229,255,0.75);
  color: var(--text);
  background: rgba(2, 10, 32, 0.78);
  box-shadow:
    inset 0 0 14px rgba(0,229,255,0.1),
    0 0 16px rgba(0,229,255,0.18);
  text-shadow: 0 0 8px rgba(0,229,255,0.55);
}
body.tron-theme .mbtn:hover,
body.tron-theme .mbtn.sel,
body.tron-theme #ticker-input.sel,
body.tron-theme #ticker-input:focus,
body.tron-theme .hbtn:hover,
body.tron-theme .tbtn.on {
  color: #160800;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow:
    0 0 18px rgba(255,140,26,0.85),
    0 0 42px rgba(255,140,26,0.36),
    inset 0 0 8px rgba(255,255,255,0.42);
  text-shadow: none;
}
body.tron-theme .l-row1 b,
body.tron-theme .t-arrow,
body.tron-theme .monogram,
body.tron-theme .note b {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(255,140,26,0.8);
}
body.tron-theme .subtitle,
body.tron-theme .foot,
body.tron-theme .note,
body.tron-theme .l-row2,
body.tron-theme #ticker-status,
body.tron-theme #hud-price,
body.tron-theme #hud-date,
body.tron-theme #hud-par {
  color: var(--dim);
  text-shadow: 0 0 8px rgba(0,229,255,0.35);
}
body.tron-theme #scan {
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.22) 2px 3px),
    repeating-linear-gradient(90deg, rgba(0,229,255,0.03) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: 0.72;
}
body.tron-theme #toast {
  color: #020716;
  background: var(--accent);
  box-shadow: 0 0 24px rgba(255,140,26,0.75);
}

/* Gravity Defied: flat early-J2ME sky, dirt line, minimal effects */
body.gravity-theme { background: #9fb4bb; }
body.gravity-theme #statusbar {
  color: var(--text);
  border-bottom-color: var(--grid);
  background: rgba(217,226,226,0.78);
}
body.gravity-theme .title,
body.gravity-theme .scr-head,
body.gravity-theme #hud-sym,
body.gravity-theme #ov-title { text-shadow: none; }
body.gravity-theme .mbtn,
body.gravity-theme #ticker-input,
body.gravity-theme .hbtn,
body.gravity-theme .tbtn,
body.gravity-theme #ov-box,
body.gravity-theme .ticker-chip {
  border-color: var(--grid);
  color: var(--text);
  background: rgba(217,226,226,0.58);
  box-shadow: none;
  text-shadow: none;
}
body.gravity-theme .mbtn:hover,
body.gravity-theme .mbtn.sel,
body.gravity-theme #ticker-input:focus,
body.gravity-theme .hbtn:hover,
body.gravity-theme .tbtn.on,
body.gravity-theme .ticker-chip:hover,
body.gravity-theme .ticker-chip.sel {
  color: var(--bg2);
  border-color: var(--map);
  background: var(--map);
  box-shadow: none;
}
body.gravity-theme #scan {
  opacity: 0.12;
  mix-blend-mode: multiply;
}
body.gravity-theme #overlay { background: rgba(159,180,187,0.58); }

/* Chrome colorscheme: cold metal, glassy highlights */
body.chrome-theme {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,255,255,0.1), transparent 34%),
    linear-gradient(180deg, #1b2026 0%, #07090c 54%, #15191e 100%);
}
body.chrome-theme #app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,0.12) 44%, transparent 52%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 5px);
  opacity: 0.8;
}
body.chrome-theme #game,
body.chrome-theme .screen,
body.chrome-theme #hud,
body.chrome-theme #overlay,
body.chrome-theme #toast,
body.chrome-theme #touch,
body.chrome-theme #unlock-pop {
  position: absolute;
}
body.chrome-theme #game { z-index: 0; }
body.chrome-theme .screen { z-index: 10; }
body.chrome-theme #statusbar {
  color: var(--text);
  border-bottom-color: rgba(255,255,255,0.28);
  background: rgba(8, 10, 13, 0.82);
}
body.chrome-theme .title,
body.chrome-theme .scr-head,
body.chrome-theme #hud-sym,
body.chrome-theme #ov-title {
  color: var(--accent);
  text-shadow:
    0 1px 0 #74808c,
    0 0 15px rgba(159,247,255,0.45);
}
body.chrome-theme .mbtn,
body.chrome-theme #ticker-input,
body.chrome-theme .hbtn,
body.chrome-theme .tbtn,
body.chrome-theme #ov-box,
body.chrome-theme #unlock-pop {
  border-color: rgba(238,246,251,0.65);
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2), rgba(112,124,136,0.12) 42%, rgba(0,0,0,0.26)),
    rgba(13, 16, 20, 0.84);
  box-shadow:
    inset 0 1px rgba(255,255,255,0.35),
    inset 0 -12px 24px rgba(0,0,0,0.22),
    0 0 16px rgba(159,247,255,0.12);
}
body.chrome-theme .mbtn:hover,
body.chrome-theme .mbtn.sel,
body.chrome-theme #ticker-input.sel,
body.chrome-theme #ticker-input:focus,
body.chrome-theme .hbtn:hover,
body.chrome-theme .tbtn.on {
  color: #05070a;
  background:
    linear-gradient(180deg, #fff, #b8c4ce 48%, #f5fbff);
  border-color: #fff;
  text-shadow: none;
  box-shadow:
    0 0 18px rgba(255,255,255,0.62),
    inset 0 0 10px rgba(118,244,255,0.35);
}
body.chrome-theme .l-row1 b,
body.chrome-theme .t-arrow,
body.chrome-theme .monogram,
body.chrome-theme .note b {
  color: var(--good);
  text-shadow: 0 0 12px rgba(118,244,255,0.65);
}

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top));
  pointer-events: none;
  text-shadow: 0 0 6px rgba(0,0,0,0.4);
}
.hud-cell { display: flex; flex-direction: column; gap: 0; }
.hud-left { align-items: flex-start; max-width: min(42vw, 250px); }
.hud-mid { align-items: center; }
.hud-right { flex-direction: row; gap: 8px; pointer-events: auto; }
#hud-sym { font-size: 22px; color: var(--accent); letter-spacing: 2px; }
#hud-co {
  max-width: 100%;
  margin-top: -2px;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.88;
}
#hud-price { font-size: 17px; color: var(--dim); }
#hud-date { font-size: 14px; color: var(--dim); letter-spacing: 1px; opacity: 0.85; }
#hud-time { font-size: 30px; letter-spacing: 2px; }
#hud-time.over { color: var(--danger); }
#hud-par { font-size: 14px; color: var(--dim); letter-spacing: 2px; }
.hbtn {
  font-family: inherit;
  font-size: 19px;
  width: 42px; height: 42px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg2) 70%, transparent);
  border: 2px solid var(--grid);
  cursor: pointer;
}
.hbtn:hover { border-color: var(--map); }

#banner {
  position: absolute;
  top: 24%;
  left: 0; right: 0;
  z-index: 30;
  text-align: center;
  font-size: clamp(22px, 5vw, 34px);
  letter-spacing: 4px;
  color: var(--accent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent);
  pointer-events: none;
  animation: blink 1.1s steps(2) infinite;
}
#banner.danger { color: var(--danger); text-shadow: 0 0 16px color-mix(in srgb, var(--danger) 60%, transparent); animation: none; }
@keyframes blink { 50% { opacity: 0.35; } }

/* ---------- touch controls ---------- */
#touch {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
  pointer-events: none;
}
.tpad { display: flex; gap: 10px; pointer-events: auto; }
.tbtn {
  font-family: inherit;
  font-size: 24px;
  letter-spacing: 1px;
  width: 74px; height: 74px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg2) 55%, transparent);
  border: 2px solid var(--map);
  border-radius: 10px;
  touch-action: none;
}
.tbtn.big { width: 96px; height: 96px; font-size: 27px; border-color: var(--accent); color: var(--accent); }
.tbtn.small { height: 74px; align-self: flex-end; }
.tbtn.on { background: var(--map); color: var(--bg); }
.tbtn.big.on { background: var(--accent); }

/* ---------- overlay dialog ---------- */
#overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}
#ov-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: min(380px, 88vw);
  padding: 22px 20px;
  background: var(--bg);
  border: 2px solid var(--map);
  box-shadow: 0 0 30px color-mix(in srgb, var(--map) 45%, transparent);
  text-align: center;
}
#ov-title {
  font-family: 'Major Mono Display', 'VT323', monospace;
  font-size: clamp(20px, 5vw, 27px);
  letter-spacing: 2px;
  color: var(--accent);
}
#ov-sub { font-size: 17px; color: var(--dim); line-height: 1.5; letter-spacing: 1px; }
#ov-sub .good { color: var(--good); }
#ov-sub .bad { color: var(--danger); }
#ov-btns { display: flex; flex-direction: column; gap: 8px; width: 100%; }

/* ---------- toast ---------- */
#toast {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  font-size: 19px;
  letter-spacing: 2px;
  color: var(--bg);
  background: var(--accent);
  padding: 8px 18px;
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent);
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

#unlock-pop {
  position: absolute;
  left: 50%;
  top: max(70px, calc(env(safe-area-inset-top) + 58px));
  transform: translateX(-50%);
  z-index: 58;
  min-width: min(420px, 86vw);
  padding: 12px 18px 14px;
  text-align: center;
  color: var(--text);
  background: color-mix(in srgb, var(--bg2) 88%, black);
  border: 2px solid var(--accent);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--accent) 46%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--map) 18%, transparent);
  pointer-events: none;
}
.unlock-title {
  font-size: 17px;
  letter-spacing: 3px;
  color: var(--dim);
}
#unlock-name {
  margin-top: 4px;
  font-family: 'Major Mono Display', 'VT323', monospace;
  font-size: clamp(20px, 5vw, 30px);
  letter-spacing: 2px;
  color: var(--accent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent);
}
#unlock-hint {
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--text);
}

/* landscape phones: tighter menus */
@media (max-height: 480px) {
  .screen { gap: 8px; padding-top: 30px; }
  .title { font-size: 30px; }
  .mbtn { font-size: 18px; padding: 6px 14px; }
  .av-credits { font-size: 40px; padding: 12px 16px; margin: 8px 0; }
  .tbtn { width: 62px; height: 62px; }
  .tbtn.big { width: 78px; height: 78px; }
}