/* Bundled so the app works offline (SIL OFL, see fonts/OFL.txt). */
@font-face { font-family: 'Press Start 2P'; src: url('fonts/PressStart2P-Regular.woff2') format('woff2'); font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Press Start 2P'; src: url('fonts/PressStart2P-LatinExt.woff2') format('woff2'); font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --red: #e10600;
  --ink: #0b0d14;
  --panel: rgba(11, 13, 20, 0.88);
  --px: 'Press Start 2P', ui-monospace, monospace;
  --u: min(1vw, 1vh);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #000; color: #fff;
  font-family: var(--px); user-select: none; -webkit-user-select: none;
  touch-action: none; overscroll-behavior: none;
}
#view {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
  image-rendering: pixelated; image-rendering: crisp-edges; display: block;
}
[hidden] { display: none !important; }
button { font-family: var(--px); color: #fff; cursor: pointer; }
img { image-rendering: pixelated; }

.txt-shadow, #hud, #flash { text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); }
#hud .tl { position: absolute; left: max(12px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); display: flex; gap: 12px; align-items: flex-start; }
#hudPos { font-size: clamp(24px, 7vmin, 56px); color: #ffd700; line-height: 1; }
#hudPos small { font-size: 0.45em; color: #fff; }
.icon { pointer-events: auto; width: 40px; height: 40px; border: 3px solid #fff; background: rgba(0,0,0,.55);
  font-size: 12px; box-shadow: 3px 3px 0 #000; }
.icon.small { width: 34px; height: 34px; font-size: 14px; }
.icon.off { opacity: .4; text-decoration: line-through; }
#hud .tc { position: absolute; left: 50%; transform: translateX(-50%); top: max(10px, env(safe-area-inset-top)); text-align: center; }
#hudLap { font-size: clamp(11px, 2.6vmin, 20px); }
#hudTime { font-size: clamp(10px, 2.2vmin, 16px); color: #cfe; margin-top: 6px; }
#battery { margin-top: 10px; display: flex; align-items: center; gap: 6px; justify-content: center;
  background: rgba(0,0,0,.55); border: 3px solid #fff; padding: 5px 8px; box-shadow: 3px 3px 0 #000; }
#battMode { font-size: 8px; color: #9fa; }
#battFill { display: flex; gap: 2px; padding: 2px; border: 2px solid #fff; position: relative; }
#battFill::after { content: ''; position: absolute; right: -6px; top: 30%; width: 4px; height: 40%; background: #fff; }
#battFill i { display: block; width: clamp(7px, 1.6vmin, 12px); height: clamp(12px, 2.8vmin, 20px); background: #222; }
#battFill i.g { background: #3ee05a; } #battFill i.y { background: #f4d020; } #battFill i.r { background: #f03020; }
#battPct { font-size: clamp(10px, 2vmin, 14px); min-width: 4.2em; text-align: right; }
#battery .bolt { width: 1em; font-size: 12px; color: #60d0ff; visibility: hidden; text-shadow: none; }
#battery.charging .bolt { visibility: visible; animation: blink .35s steps(2) infinite; }
#battery.low { border-color: #f03020; animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
#hud .tr { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top));
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#minimap { width: clamp(80px, 20vmin, 150px); height: auto; aspect-ratio: 1; image-rendering: pixelated; border: 3px solid #fff; box-shadow: 3px 3px 0 #000; }
#hud .me { display: flex; align-items: center; gap: 6px; font-size: 8px; }
#hudFace { width: 28px; height: 28px; border: 2px solid #fff; }
#hudSpeed { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  font-size: clamp(16px, 4.5vmin, 34px); }
#hudSpeed small { font-size: 0.4em; margin-left: 4px; }

#lights { position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 10px;
  background: #111; padding: 10px 14px; border: 4px solid #fff; box-shadow: 4px 4px 0 #000; }
#lights i { width: clamp(22px, 6vmin, 44px); aspect-ratio: 1; background: #3a0000; border: 3px solid #000; }
#lights i.on { background: #ff1a1a; box-shadow: 0 0 14px #f00; }
#flash { position: fixed; top: 42%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(22px, 8vmin, 64px);
  color: #ffd700; pointer-events: none; white-space: nowrap; animation: pop .25s steps(3); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(2.2); } }

/* ---------- touch pad ---------- */
#touch { position: fixed; inset: auto 0 0 0; height: 46vh; display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); touch-action: none; }
#touch button { touch-action: none; width: clamp(64px, 17vmin, 120px); aspect-ratio: 1; border: 4px solid rgba(255,255,255,.85);
  background: rgba(0,0,0,.35); font-size: clamp(16px, 4vmin, 28px); box-shadow: 4px 4px 0 rgba(0,0,0,.5); border-radius: 0; }
#touch button.down { background: rgba(255,255,255,.35); transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
#touch .steer, #touch .pedals { display: flex; gap: clamp(10px, 3vmin, 24px); align-items: flex-end; }
#touch .gas { width: clamp(80px, 22vmin, 150px); background: rgba(40,180,60,.45); font-size: clamp(13px, 3vmin, 22px); }
#touch .brake { background: rgba(225,6,0,.45); font-size: clamp(11px, 2.4vmin, 18px); }
@media (orientation: portrait) {
  #touch .pedals { flex-direction: column-reverse; align-items: flex-end; }
  #touch .steer { margin-bottom: 0; }
}

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: rgba(0,0,0,.25); }
.panel { background: var(--panel); border: 4px solid #fff; box-shadow: 6px 6px 0 #000, inset 0 0 0 4px var(--red);
  padding: 18px; width: min(920px, 100%); max-height: 100%; overflow: auto; touch-action: pan-y; text-align: center; }
.panel.small { width: min(360px, 100%); display: flex; flex-direction: column; gap: 12px; }
.logo .badge { display: inline-block; background: var(--red); padding: 6px 10px; font-size: 10px; box-shadow: 3px 3px 0 #000; }
.logo h1 { margin: 10px 0 6px; font-size: clamp(26px, 6vmin, 52px); color: #ffd700; text-shadow: 4px 4px 0 var(--red), 7px 7px 0 #000; letter-spacing: 2px; }
.logo p { margin: 0; font-size: 9px; color: #9fa; }
.logo h1 small { display: block; margin-top: 8px; font-size: 0.36em; letter-spacing: 0.5em; color: #fff; text-shadow: 2px 2px 0 var(--red), 4px 4px 0 #000; }
.panel h2 { font-size: 11px; margin: 16px 0 10px; color: #fff; }
#driverGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.card { position: relative; background: #151a28; border: 3px solid var(--team); padding: 6px 4px 6px; display: flex; flex-direction: column;
  align-items: center; gap: 5px; box-shadow: 3px 3px 0 #000; }
.card img { width: 56px; height: 56px; border: 2px solid #000; }
.card .num { position: absolute; top: 3px; left: 4px; font-size: 8px; background: var(--team); color: #000; padding: 2px 3px; }
.card .nm { font-size: 8px; line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; }
.card.sel { background: #2a3150; outline: 3px solid #ffd700; transform: translate(-2px,-2px); box-shadow: 5px 5px 0 #000; }
#pick { margin-top: 14px; display: flex; gap: 14px; align-items: center; text-align: left; border: 3px solid var(--team); padding: 10px; background: #10141f; }
#pickFace { width: 84px; height: 84px; border: 3px solid #fff; flex: none; }
#pick .txt { flex: 1; display: flex; flex-direction: column; gap: 6px; }
#pickName { font-size: 16px; color: #ffd700; }
#pickTeam { font-size: 8px; color: #aab; }
#pickNote { font-size: 8px; line-height: 1.6; color: #dfe; font-family: var(--px); }
#pickBest { font-size: 8px; color: #9fa; }
.big { background: var(--red); border: 3px solid #fff; padding: 14px 18px; font-size: 13px; box-shadow: 4px 4px 0 #000; }
.big:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 #000; }
.big.alt { background: #26304a; }
.help { margin-top: 14px; font-size: 7px; color: #889; line-height: 1.8; }
.help .tp { display: none; }
@media (pointer: coarse) { .help .kb { display: none; } .help .tp { display: inline; } }
.foot { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 8px; }
.foot a { color: #aab; }
#results h1 { font-size: clamp(20px, 5vmin, 36px); color: #ffd700; text-shadow: 3px 3px 0 var(--red); margin: 6px 0 10px; }
#resSub { font-size: 9px; line-height: 1.8; color: #cfe; }
#resTable { width: 100%; border-collapse: collapse; font-size: 9px; margin: 10px 0 14px; }
#resTable td { padding: 3px 6px; text-align: left; border-bottom: 1px solid #222a3a; }
#resTable td:first-child { width: 2.5em; text-align: right; color: #aab; }
#resTable td:last-child { text-align: right; }
#resTable img { width: 20px; height: 20px; vertical-align: middle; }
#resTable .sw { display: inline-block; width: 6px; height: 12px; margin-right: 8px; vertical-align: middle; }
#resTable tr.me td { background: #3a2a10; color: #ffd700; }
.row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; font-size: 14px; color: #ffd700; }
@media (max-height: 480px) {
  .logo h1 { font-size: 26px; margin: 6px 0 4px; }
  .panel { padding: 10px; }
  .panel h2 { margin: 8px 0 6px; }
  #driverGrid { grid-template-columns: repeat(8, 1fr); gap: 5px; }
  .card img { width: 40px; height: 40px; }
  #pick { margin-top: 8px; padding: 6px; }
  #pickFace { width: 56px; height: 56px; }
}

#tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 4px; padding: 2px 5px 2px 2px;
  background: rgba(10,12,20,.8); border-left: 4px solid #fff; font-size: 8px; white-space: nowrap; transform-origin: 50% 100%;
  text-shadow: 1px 1px 0 #000; }
.tag img { width: 16px; height: 16px; }
@media (max-height: 480px) {
  .logo .badge, .logo p, .help { display: none; }
  .logo h1 { margin-top: 0; }
}
@media (orientation: portrait) {
  #hud .tc { top: calc(max(10px, env(safe-area-inset-top)) + 118px); }
  #minimap { width: 84px; }
}

/* Tilt steering: no steering buttons, brake under the left thumb, gas under the right. */
#touch.tilt .steer { display: none; }
#touch.tilt .pedals { width: 100%; justify-content: space-between; flex-direction: row; }
#touch.tilt .brake { width: clamp(80px, 22vmin, 150px); }
#flash.long { font-size: clamp(14px, 4.5vmin, 36px); }

/* Team radio subtitle, F1 broadcast style */
#radio { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, env(safe-area-inset-bottom)) + clamp(48px, 9vmin, 70px));
  max-width: min(560px, 70vw); background: rgba(10,12,20,.88); border: 3px solid #fff; border-left: 8px solid #e10600;
  box-shadow: 3px 3px 0 #000; padding: 6px 10px; pointer-events: none; text-align: left; }
#radio .lbl { display: flex; align-items: center; gap: 2px; font-size: 7px; color: #e10600; margin-bottom: 5px; }
#radio .lbl i { width: 3px; background: #e10600; animation: eq .3s steps(3) infinite alternate; }
#radio .lbl i:nth-child(1) { height: 6px; } #radio .lbl i:nth-child(2) { height: 9px; animation-delay: .1s; } #radio .lbl i:nth-child(3) { height: 5px; animation-delay: .2s; margin-right: 5px; }
@keyframes eq { to { transform: scaleY(.4); } }
#radio .txt { font-size: clamp(8px, 1.8vmin, 11px); line-height: 1.6; color: #fff; text-transform: uppercase; }
@media (orientation: portrait) { #radio { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 120px); max-width: 86vw; } }

/* Multiplayer lobby */
#lobby { margin: 12px auto 0; display: inline-flex; align-items: center; gap: 8px; font-size: 8px; line-height: 1.6;
  padding: 6px 10px; border: 2px solid #556; background: #10141f; max-width: 100%; text-align: left; }
#lobby .dot { width: 8px; height: 8px; flex: none; background: #667; }
#lobby.on { border-color: #3ee05a; } #lobby.on .dot { background: #3ee05a; }
#lobby.live { border-color: #e10600; color: #ffd700; } #lobby.live .dot { background: #e10600; animation: blink .6s steps(2) infinite; }
.card.taken, .card.done { opacity: .45; filter: grayscale(.8); cursor: not-allowed; }
.card.taken::before, .card.done::before { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) rotate(-12deg);
  background: #e10600; color: #fff; font-size: 8px; padding: 3px 5px; box-shadow: 2px 2px 0 #000; z-index: 1; }
.card.taken::before { content: var(--t-taken, 'TAKEN'); }
.card.done::before { content: var(--t-done, 'FINISHED'); background: #26304a; }
#resWait { font-size: 9px; color: #ffd700; animation: blink 1s steps(2) infinite; }
#resTable .pl { font-size: 6px; background: #ffd700; color: #000; padding: 1px 3px; margin-left: 6px; vertical-align: middle; }
.tag.human { background: rgba(60,40,0,.9); border-left-color: #ffd700 !important; }
.tag.human span::after { content: ' ★'; color: #ffd700; }
@media (max-height: 480px) { #lobby { margin-top: 6px; } }
#radio.under { display: none; }

/* Timing tower: who's AI, who's a real driver */
#tower { position: absolute; left: max(12px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + clamp(48px, 9vmin, 70px));
  display: flex; flex-direction: column; gap: 2px; font-size: 8px; }
#tower div { display: flex; align-items: center; gap: 5px; background: rgba(10,12,20,.78); padding: 3px 6px 3px 4px; min-width: 104px; box-shadow: 2px 2px 0 #000; }
#tower b { width: 1.6em; text-align: right; color: #aab; }
#tower i { width: 3px; height: 9px; }
#tower em { margin-left: auto; font-style: normal; font-size: 6px; color: #889; }
#tower em.pl { color: #ffd700; font-size: 8px; }
#tower em.me { color: #000; background: #ffd700; padding: 1px 3px; }
#tower div.me { background: rgba(80,60,0,.9); }
#tower div.pl { box-shadow: 2px 2px 0 #000, inset 0 0 0 1px #ffd700; }
@media (orientation: portrait) { #tower { top: calc(max(10px, env(safe-area-inset-top)) + 210px); } }
.tag.ai span::before { content: var(--t-ai, 'AI'); font-size: 6px; color: #000; background: #889; padding: 1px 2px; margin-right: 4px; vertical-align: 1px; }
/* After the flag: waiting for the rest */
#finBanner { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  background: rgba(10,12,20,.9); border: 3px solid #fff; box-shadow: 4px 4px 0 #000; padding: 8px 12px; font-size: clamp(8px, 1.8vmin, 11px);
  pointer-events: none; max-width: 90vw; line-height: 1.6; }
#finBanner .flag { flex: none; width: 24px; height: 16px; background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 8px 8px; }
#tower em.me { font-size: 7px; }

/* Nickname, random pick, fifty cards */
#nickRow { margin: 12px auto 0; display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 9px; }
#nickInput { font-family: var(--px); font-size: 12px; width: 13em; padding: 8px; background: #0b0d14; color: #ffd700; border: 3px solid #fff;
  text-transform: uppercase; touch-action: manipulation; user-select: text; -webkit-user-select: text; }
#nickInput::placeholder { color: #556; }
.panel h2 { display: flex; align-items: center; justify-content: center; gap: 12px; }
.icon.wide { width: auto; padding: 0 8px; font-size: 7px; }
#driverGrid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); max-height: 46vh; overflow-y: auto; padding: 4px; }
.card img { width: 44px; height: 44px; }
.card .nm { font-size: 7px; }
@media (max-height: 480px) { #driverGrid { grid-template-columns: repeat(10, 1fr); max-height: 38vh; } .card img { width: 34px; height: 34px; } #nickRow { margin-top: 6px; } }

/* Language pickers */
.foot .langs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.foot select { font-family: var(--px); font-size: 8px; color: #fff; background: #0b0d14; border: 2px solid #fff; padding: 6px 4px; border-radius: 0; }
.foot .radioLang { display: flex; gap: 6px; align-items: center; color: #aab; }
.foot .radioLang[hidden] { display: none !important; }
#touch button.long { font-size: clamp(9px, 2.1vmin, 15px); }

/* AA batteries (in-app purchase) */
#aa { margin-top: 12px; display: flex; gap: 12px; align-items: center; text-align: left; border: 3px solid #ffd700; padding: 8px 10px; background: #10141f; }
#aa .cell { flex: none; position: relative; width: 22px; height: 40px; background: linear-gradient(#ffd700 0 30%, #1a1a1a 0); border: 2px solid #fff;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; font-size: 6px; color: #ffd700; }
#aa .cell::before { content: ''; position: absolute; top: -6px; left: 50%; width: 8px; height: 4px; margin-left: -4px; background: #fff; }
#aa .cell b { font-weight: normal; }
#aa .txt { flex: 1; display: flex; flex-direction: column; gap: 6px; }
#aaName { font-size: 10px; color: #ffd700; }
#aaInfo { font-size: 7px; line-height: 1.6; color: #dfe; }
#aa button { flex: none; height: 34px; }
#aa button[hidden] { display: none; }
#aaToggle.off { opacity: .5; }
#battery.aa #battMode { color: #ffd700; }
@media (max-height: 480px) { #aa { margin-top: 6px; padding: 5px 8px; } #aa .cell { height: 30px; } }

/* Race nights and the shop */
.menuRow { margin: 10px auto 0; display: flex; gap: 10px; justify-content: center; }
#roomBar { margin: 10px auto 0; display: flex; gap: 8px; align-items: center; text-align: left; border: 3px solid #ffd700; padding: 8px 10px; background: #10141f; font-size: 8px; line-height: 1.7; }
#roomBar .txt { flex: 1; }
#roomBar b { color: #ffd700; font-weight: normal; font-size: 10px; }
#roomCode { color: #9fa; }
#roomBar[hidden], #night [hidden], #shop [hidden] { display: none !important; }
#night .panel, #shop .panel { max-width: 640px; }
.intro { font-size: 8px; line-height: 1.7; color: #dfe; margin: 8px 0; }
.fine { font-size: 7px; line-height: 1.6; color: #889; margin: 8px 0; }
.codeRow { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 10px 0; }
#codeInput, #roomNameInput, .personal input { font-family: var(--px); font-size: 12px; padding: 8px; background: #0b0d14; color: #ffd700; border: 3px solid #fff;
  text-transform: uppercase; user-select: text; -webkit-user-select: text; width: 11em; }
#nightCode { font-size: clamp(20px, 6vmin, 34px); color: #ffd700; text-shadow: 3px 3px 0 var(--red); margin: 6px 0 10px; letter-spacing: 2px; }
#nightSettings { display: flex; flex-direction: column; gap: 8px; margin: 12px auto; max-width: 420px; font-size: 9px; }
#nightSettings label { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper b { font-weight: normal; min-width: 2em; text-align: center; color: #ffd700; }
#nightSeated { font-size: 8px; line-height: 1.8; color: #dfe; }
table.standings { width: 100%; border-collapse: collapse; font-size: 8px; margin: 6px 0 10px; }
table.standings td { padding: 3px 6px; text-align: left; border-bottom: 1px solid #222a3a; }
table.standings td:first-child { width: 2.5em; text-align: right; color: #aab; }
table.standings td:last-child, table.standings th:last-child { text-align: right; color: #ffd700; }
table.standings tr.me td { background: #3a2a10; color: #ffd700; }
#nightMsg, #shopMsg { font-size: 8px; color: #ff9080; min-height: 1em; }
.shopSec { border-top: 2px solid #222a3a; padding-top: 6px; margin-top: 10px; }
.engRow { display: flex; gap: 8px; align-items: center; text-align: left; padding: 6px 0; border-bottom: 1px solid #1c2232; }
.engRow .nm { flex: 1; font-size: 9px; line-height: 1.6; }
.engRow .nm small { display: block; font-size: 7px; color: #aab; }
.engRow.on .nm { color: #ffd700; }
.engRow button { flex: none; height: 30px; }
.personal { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.personal input { font-size: 10px; width: 11em; padding: 6px; }
.star { color: #ffd700; }
#resSeason h2 { font-size: 10px; color: #ffd700; margin: 4px 0; }
button.flag { margin-left: 6px; padding: 0 5px; font-size: 8px; line-height: 15px; background: transparent; color: #ff9080; border: 1px solid #ff9080; vertical-align: middle; }
button.flag:active { color: #ff9080; border-color: #ff9080; }

/* Info screen */
.footBtns { display: flex; gap: 8px; align-items: center; }
#info [hidden] { display: none !important; }
#info .panel { max-width: 640px; }
.infoLogo { font-size: clamp(20px, 5vmin, 34px); color: #ffd700; text-shadow: 3px 3px 0 var(--red), 5px 5px 0 #000; margin: 6px 0 4px; }
.infoLogo small { display: block; margin-top: 6px; font-size: 0.4em; letter-spacing: 0.5em; color: #fff; }
a.icon { display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; }
#docView { text-align: left; max-height: 50vh; overflow-y: auto; margin: 12px 0; padding: 10px 14px; background: #10141f; border: 2px solid #222a3a;
  font: 13px/1.6 system-ui, -apple-system, sans-serif; color: #dfe; user-select: text; -webkit-user-select: text; }
#docView h1 { font-size: 18px; color: #ffd700; } #docView h2 { font-size: 15px; color: #fff; margin-top: 18px; }
#docView a { color: #9fa; } #docView .muted { color: #889; }

/* Tablets: the menus were drawn for phones; scale them up so the pixel text stays readable. */
@media (min-width: 1000px) and (min-height: 760px), (min-width: 760px) and (min-height: 1000px) {
  .screen .panel { zoom: 1.3; }
  #hud .tl, #hud .tc, #hud .tr, #tower, #hudSpeed, #radio, #finBanner { zoom: 1.25; }
}