:root {
    --ink: #f3ead8;
    --ink-dim: #b9ad95;
    --panel: rgba(22, 18, 14, 0.86);
    --panel-2: rgba(40, 32, 24, 0.92);
    --line: rgba(243, 234, 216, 0.14);
    --accent: #f0a030;
    --accent-2: #ffcf6a;
    --good: #7fd36a;
    --bad: #ff5a42;
    --blue: #6ac8ff;
    --font: "Bahnschrift", "Segoe UI", system-ui, sans-serif;
    --display: "Bahnschrift Condensed", "Impact", "Haettenschweiler", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #120e0a; color: var(--ink); font-family: var(--font); user-select: none; }
#app, #app canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
/* a HUD part a first run hasn't been told about yet: it fades in when it is (hud.js) */
.later { opacity: 0 !important; visibility: hidden; }
#h-press-wrap, #h-weapons, #h-threat { transition: opacity 0.8s; }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.6); }
.hud-tl { position: absolute; left: 18px; top: 16px; width: 360px; }
/* the hull: big, labelled, colour-coded; a hit flashes and shakes it, a pale chip trails the loss */
.hull { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hull-lbl { font-family: var(--display); font-size: 20px; letter-spacing: 2px; color: #cfe8a8; width: 54px; }
.hull .bar.hp { flex: 1; height: 30px; margin: 0; border-width: 2px; border-color: rgba(200,240,170,.5); }
.hull .bar.hp span { font-size: 15px; letter-spacing: 1px; }
.hull .bar .fill.chip { background: rgba(255,240,200,.85); transition: none; }
.hull.mid .hull-lbl { color: #ffd060; }
.hull.mid .bar.hp { border-color: rgba(255,210,100,.6); }
.hull.mid .bar.hp .fill:not(.shield):not(.chip) { background: linear-gradient(#ffd060, #c88a1a); }
.hull.crit .hull-lbl { color: #ff5a3a; animation: blink .7s infinite; }
.hull.crit .bar.hp { border-color: #ff4a2a; box-shadow: 0 0 12px rgba(255,60,30,.7); animation: critglow .8s ease-in-out infinite; }
.hull.hit .bar.hp { animation: hullhit .3s; }
.hull.hit .bar.hp::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.55); animation: hitflash .3s forwards; }
@keyframes hullhit { 0% { transform: translateX(0); } 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } 100% { transform: translateX(0); } }
@keyframes hitflash { to { opacity: 0; } }
@keyframes critglow { 0%, 100% { box-shadow: 0 0 6px rgba(255,60,30,.5); } 50% { box-shadow: 0 0 18px rgba(255,60,30,.95); } }
.hull-warn { display: none; margin: -2px 0 6px 62px; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; color: #ff6a4a; animation: blink .9s infinite; }
.hull-warn.show { display: block; }
#hud:has(.hull.crit) .vignette { animation: critvig 1.4s ease-in-out infinite; }
@keyframes critvig { 0%, 100% { opacity: .15; } 50% { opacity: .45; } }
.veh-name { font-family: var(--display); font-size: 22px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.bar { position: relative; height: 20px; background: rgba(0,0,0,.55); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(#e85a3a, #a8301c); transition: width .12s; }
.bar.hp .fill { background: linear-gradient(#8fe06a, #3f9a2c); }
.bar.hp.low .fill:not(.shield):not(.chip) { background: linear-gradient(#ff6a4a, #b0261a); }
.bar .fill.shield { background: linear-gradient(rgba(120,210,255,.85), rgba(60,140,230,.85)); width: 0; }
.bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.bar.nitro { height: 12px; }
.bar.nitro .fill { background: linear-gradient(#7fd8ff, #2a7ac8); }
.bar.nitro span { font-size: 9px; }
.bar.ability { height: 16px; width: 200px; }
.bar.ability .fill { background: linear-gradient(#8a7a5a, #5a4a32); transition: none; }
.bar.ability.ready .fill { background: linear-gradient(#ffd060, #d08a20); }
.bar.ability.ready { box-shadow: 0 0 8px rgba(255,190,80,.55); }
.bar.ability span { font-size: 10px; }

.hud-tc { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); text-align: center; }
.time { font-family: var(--display); font-size: 34px; line-height: 1; }
.threat { font-size: 12px; letter-spacing: 2px; color: var(--accent-2); margin-top: 2px; }
.compass { margin-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; letter-spacing: 1px; color: #9ff09a; }
.compass .arrow { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 22px solid #9ff09a; filter: drop-shadow(0 0 4px #000); }
.compass.boss { color: #ff5a3a; }
.compass.boss .arrow { border-bottom-color: #ff3a2a; }
.compass.bossrun { animation: bossrun 0.34s ease-in-out infinite alternate; }
@keyframes bossrun { from { transform: scale(1); filter: none; } to { transform: scale(1.22); filter: drop-shadow(0 0 8px #ff3a2a); } }

.hud-tr { position: absolute; right: 18px; top: 14px; text-align: right; }
.money { font-family: var(--display); font-size: 38px; color: var(--accent-2); line-height: 1; }
.money.bump { animation: bump .25s; }
@keyframes bump { 50% { transform: scale(1.12); } }
.kills, .dist { font-size: 13px; color: var(--ink-dim); letter-spacing: 1px; }

/* progress to Haven, along the top */
.progress { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); width: min(560px, 46vw); height: 8px; }
.progress .track { position: absolute; inset: 0; border-radius: 4px; border: 1px solid rgba(0,0,0,.6); box-shadow: 0 1px 4px rgba(0,0,0,.6); opacity: .9; }
.progress .fin { position: absolute; top: 0; bottom: 0; right: 0; width: 9.4%; border-radius: 0 4px 4px 0; background: repeating-linear-gradient(135deg, rgba(200,40,20,.85) 0 4px, rgba(90,10,6,.85) 4px 8px); }
.progress .car { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent-2); border: 2px solid #2a1a08; box-shadow: 0 0 6px rgba(255,200,90,.8); }
.progress .gtick { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; background: #9ff09a; border-radius: 1px; box-shadow: 0 0 4px #000; }
.progress .flag { position: absolute; right: -4px; top: 11px; font-family: var(--display); font-size: 11px; letter-spacing: 1px; color: #ffd890; }
.progress .pkm { position: absolute; left: 0; top: 11px; font-size: 10px; letter-spacing: 1px; color: var(--ink-dim); }

/* fuel gauge, bottom centre */
.hud-bc { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 14px; align-items: flex-end; text-align: center; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
.hud-bc .gauge { position: relative; }
.hud-bc svg { display: block; }
.hud-bc .g-arc { fill: none; stroke: rgba(0,0,0,.55); stroke-width: 12; }
.hud-bc .g-red { fill: none; stroke: #c8442c; stroke-width: 12; }
.hud-bc .g-ticks line { stroke: var(--ink); stroke-width: 2.5; }
.hud-bc .g-lbl { fill: var(--ink); font: 700 13px var(--font); }
.hud-bc .g-name { fill: var(--ink-dim); font: 700 9px var(--font); letter-spacing: 2px; }
.hud-bc .g-needle { stroke: #ff8a3a; stroke-width: 3.5; stroke-linecap: round; transform-origin: 80px 80px; transition: transform .25s; }
.hud-bc .g-cap { fill: #2a2622; stroke: #ff8a3a; stroke-width: 2; }
.hud-bc .g-txt { margin-top: -4px; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--ink-dim); }
.hud-bc .gauge.low .g-red { animation: blink .6s infinite; }
.hud-bc .gauge.low .g-txt { color: #ff7a5a; }
/* ability pressure gauge: the arc fills amber to red, MAX lights up red when it is ready */
.hud-bc .g-fillarc { fill: none; stroke: #e0a040; stroke-width: 8; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .2s; }
.hud-bc .press .g-needle { stroke: #ffd060; }
.hud-bc .press .g-cap { stroke: #ffd060; }
.hud-bc .g-max { height: 20px; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: 4px; line-height: 20px; color: #ff3a24; visibility: hidden; text-shadow: 0 0 8px rgba(255,40,20,.8), 0 1px 2px #000; }
.hud-bc .press.max .g-max { visibility: visible; animation: blink .9s infinite; }
.hud-bc .press.max .g-fillarc { stroke: #ff4a2a; }
.hud-bc .press.max .g-needle { stroke: #ff4a2a; animation: needlebuzz .12s infinite; }
.hud-bc .press.max .g-cap { stroke: #ff4a2a; }
.hud-bc .press.max .g-txt { color: #ffd8a0; }
@keyframes needlebuzz { 0%, 100% { transform: rotate(90deg); } 50% { transform: rotate(87deg); } }
.hud-bc .gauge:not(.press) .g-max { display: none; }

.hud-bl { position: absolute; left: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 4px; }
.wslot { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 3px; padding: 4px 8px; font-size: 13px; min-width: 250px; }
.wslot .key { color: var(--ink-dim); font-size: 11px; width: 14px; }
.wslot .nm { flex: 1; }
.wslot .lv { color: var(--accent-2); font-size: 11px; }
.wslot.empty { color: var(--ink-dim); font-style: italic; }
.wslot.crew { border-color: rgba(106,200,255,.3); }
.wslot.crew .key { color: var(--blue); }
.gearline { font-size: 11px; color: var(--ink-dim); margin-top: 2px; max-width: 360px; }

.hud-br { position: absolute; right: 18px; bottom: 16px; text-align: right; }
#h-map { display: block; margin: 0 0 6px auto; width: 180px; height: 180px; border-radius: 50%; box-shadow: 0 4px 18px rgba(0,0,0,.55); }
.status { display: flex; gap: 6px; justify-content: flex-end; font-size: 11px; font-weight: 700; letter-spacing: 1px; min-height: 18px; }
.status span { padding: 2px 7px; border-radius: 2px; }
.surf { background: rgba(0,0,0,.5); color: var(--ink-dim); }
.surf.dirt { color: #d8b880; }
.surf.mud { color: #1a1208; background: #8a6a3a; }
.surf.water { color: #0a1a22; background: #6ab0d0; }
.surf.snow { color: #1a2028; background: #e8eef2; }
.surf.air { color: #1a1208; background: var(--accent-2); }
.status .warn { background: #c8442c; color: #fff; animation: blink 1s infinite; }
.status .warn.tip { background: #ff6a20; font-size: 1.15em; animation: blink 0.25s infinite; }
@keyframes blink { 50% { opacity: .55; } }
.speed { font-family: var(--display); font-size: 44px; line-height: 1; }
.speed small { font-size: 14px; margin-left: 4px; color: var(--ink-dim); }

.boss { position: absolute; left: 50%; top: 132px; transform: translateX(-50%); width: min(520px, 70vw); text-align: center; }
.boss .name { font-family: var(--display); font-size: 18px; letter-spacing: 3px; color: #ff8a6a; }
.boss .bar { height: 12px; }
.boss .bar .fill { background: linear-gradient(#ff5a3a, #8a1a10); }

.announce { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-family: var(--display); font-size: 56px; letter-spacing: 4px; opacity: 0; transition: opacity .3s; }
.announce.show { opacity: 1; }
.announce small { display: block; font-family: var(--font); font-size: 16px; letter-spacing: 2px; color: var(--ink-dim); }
.announce.danger { color: #ff7a5a; }
.announce.good { color: #a8f08a; }

.vignette { position: absolute; inset: 0; box-shadow: inset 0 0 160px 40px rgba(220, 20, 10, 0.85); opacity: 0; transition: opacity .08s; }

#floaters { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.floater { position: absolute; left: 0; top: 0; font-weight: 700; font-size: 14px; color: var(--accent-2); text-shadow: 0 1px 2px #000; white-space: nowrap; will-change: transform, opacity; }
.floater.big { font-size: 24px; color: #fff0a0; }
.floater.bad { color: #ff7a5a; }
.floater.info { color: #bfe8ff; font-size: 13px; }

/* ---------------- Screens ---------------- */
#screens { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.screen { position: absolute; inset: 0; pointer-events: auto; display: flex; align-items: center; justify-content: center; }
.screen.dim { background: radial-gradient(ellipse at center, rgba(10,8,6,.55), rgba(10,8,6,.88)); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 22px 26px; box-shadow: 0 20px 60px rgba(0,0,0,.6); max-height: 92vh; overflow: auto; }
h1.title { font-family: var(--display); font-size: clamp(54px, 9vw, 108px); letter-spacing: 6px; margin: 0; line-height: .9; color: var(--accent-2); text-shadow: 0 4px 0 #6a3a10, 0 10px 30px rgba(0,0,0,.8); }
.subtitle { letter-spacing: 3px; color: var(--ink-dim); margin: 10px 0 26px; font-size: 14px; }
.menu-wrap { text-align: center; }
.menu-col { display: flex; flex-direction: column; gap: 10px; align-items: center; }
button { font-family: var(--font); font-size: 15px; font-weight: 700; letter-spacing: 1px; color: #1a1208; background: var(--accent); border: 0; border-radius: 4px; padding: 10px 18px; cursor: pointer; transition: transform .06s, background .12s; }
button:hover:not(:disabled) { background: var(--accent-2); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { background: #4a443c; color: #8a8274; cursor: not-allowed; }
button.big { font-size: 20px; padding: 14px 40px; min-width: 260px; }
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button.ghost:hover:not(:disabled) { background: rgba(255,255,255,.08); }
button.sm { font-size: 12px; padding: 5px 9px; }
button.danger { background: #c8442c; color: #fff; }
/* confirmation dialog over a screen */
.confirm { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(8,6,4,.72); }
.confirm-box { max-width: 460px; border-color: #c8442c; box-shadow: 0 0 30px rgba(200,68,44,.35); }
.confirm-box h2 { font-family: var(--display); font-size: 28px; letter-spacing: 2px; margin: 0 0 10px; color: #ff7a5a; }
.confirm-text { font-size: 14px; line-height: 1.45; color: var(--ink); }
.confirm-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.mode-pick { display: flex; gap: 10px; margin: 6px 0 4px; }
.mode-card { width: 220px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.35); cursor: pointer; }
.mode-card.sel { border-color: var(--accent); background: rgba(240,160,48,.14); }
.mode-card b { display: block; font-size: 15px; margin-bottom: 4px; color: var(--accent-2); }
.mode-card span { font-size: 12px; color: var(--ink-dim); line-height: 1.35; }
.scrap { color: #9fd6ff; font-weight: 700; }
.controls { display: grid; grid-template-columns: auto auto; gap: 6px 22px; font-size: 14px; text-align: left; }
.controls .bind { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.controls kbd { display: inline-block; min-width: 22px; text-align: center; padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; background: rgba(255,255,255,.06); font-family: var(--font); font-size: 12px; }
.stats-grid { display: grid; grid-template-columns: auto auto; gap: 6px 30px; font-size: 16px; margin: 16px 0; text-align: left; }
.stats-grid b { color: var(--accent-2); text-align: right; }
/* daily road / shared road */
.road-card { display: flex; align-items: center; gap: 14px; width: min(520px, 92vw); box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.35); text-align: left; }
.road-card.link { border-color: var(--accent); background: rgba(240,160,48,.14); }
.road-card .info { flex: 1; font-size: 12px; color: var(--ink-dim); line-height: 1.4; }
.road-card .info b { display: block; font-size: 15px; letter-spacing: 1px; color: var(--accent-2); margin-bottom: 2px; }
.road-line { font-size: 13px; color: var(--ink-dim); margin: 6px 0 -4px; }
.road-line button { margin-left: 6px; }
.over-title { font-family: var(--display); font-size: 64px; letter-spacing: 4px; color: #ff6a4a; margin: 0; }

/* perks */
.perk-list { display: flex; flex-direction: column; gap: 8px; min-width: 460px; margin: 14px 0; }
.perk { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: rgba(0,0,0,.3); text-align: left; }
.perk .info { flex: 1; }
.perk .info b { display: block; }
.perk .info span { font-size: 12px; color: var(--ink-dim); }
.pips { display: flex; gap: 3px; }
.pip { width: 10px; height: 10px; border-radius: 2px; background: rgba(255,255,255,.12); }
.pip.on { background: var(--accent); }

/* ---------------- Shop ---------------- */
.shop { width: min(1180px, 96vw); height: min(760px, 94vh); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.shop header { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.shop header h1 { font-family: var(--display); font-size: 34px; letter-spacing: 3px; margin: 0; color: var(--accent-2); }
.shop header .cash { font-family: var(--display); font-size: 32px; color: var(--accent-2); margin-left: auto; }
.shop header .note { font-size: 12px; color: var(--good); }
.shop .cols { flex: 1; display: grid; grid-template-columns: 400px 1fr; min-height: 0; }
.shop section { overflow: auto; padding: 14px 18px; }
.shop section.loadout { border-right: 1px solid var(--line); background: rgba(0,0,0,.18); }
.shop h2 { font-family: var(--display); font-size: 24px; letter-spacing: 1px; margin: 0 0 6px; }
.shop h3 { font-size: 12px; letter-spacing: 2px; color: var(--ink-dim); margin: 16px 0 6px; text-transform: uppercase; font-weight: 600; }
.vstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; font-size: 12px; color: var(--ink-dim); margin: 6px 0 8px; }
.vstats b { color: var(--ink); }
.row { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 5px; background: rgba(0,0,0,.25); font-size: 13px; }
.row .nm { flex: 1; min-width: 0; }
.row .nm small { display: block; color: var(--ink-dim); font-size: 11px; }
.row.empty { color: var(--ink-dim); font-style: italic; }
.tag { font-size: 9px; letter-spacing: 1px; font-weight: 700; padding: 2px 5px; border-radius: 2px; background: #6a4a1a; color: #ffd890; margin-right: 4px; vertical-align: 1px; }
.tag.main { background: #a8301c; color: #fff; }
.tag.gear { background: #2a5a7a; color: #cfe8ff; }
.tag.def { background: #3a6a3a; color: #d8ffd0; }
.tag.crew { background: #24506a; color: #bfe8ff; }
.tag.new { background: #ffd040; color: #2a1604; margin-left: 6px; }
.tag.lock { background: #3a3632; color: #a89c88; margin-left: 6px; }
.card.locked { opacity: .55; }
.card.fresh { border-color: #ffd040; box-shadow: 0 0 10px rgba(255,208,64,.35); }
.hint-line.lockline { color: #c8b890; font-weight: 700; }
.newnote { color: #ffd040; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs button { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.tabs button.on { background: var(--accent); color: #1a1208; border-color: var(--accent); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.card { border: 1px solid var(--line); border-radius: 5px; padding: 12px; background: rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 6px; }
.card .ttl { font-weight: 700; font-size: 16px; }
.card .desc { font-size: 12px; color: var(--ink-dim); line-height: 1.35; flex: 1; }
.card .st { font-size: 11px; color: var(--ink); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.card .st span b { color: var(--accent-2); }
.card .why { font-size: 11px; color: var(--bad); min-height: 14px; }
.card .why.note { color: var(--ink-dim); }
.tag.best { background: #5ad06a; color: #0e2410; }
.card.best { border-color: #5ad06a; box-shadow: 0 0 0 1px #5ad06a55 inset; }
/* one bar for how hard a gun hits, and a word on what it's for (the numbers are on hover) */
.card .pow { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-dim); }
.card .pow i { flex: 1; height: 6px; background: #ffffff14; border-radius: 3px; overflow: hidden; }
.card .pow i b { display: block; height: 100%; background: var(--accent-2); border-radius: 3px; }
.card .pow em { font-style: normal; color: var(--ink); white-space: nowrap; }
.card.veh { flex-direction: row; gap: 12px; }
.card.veh .vbody { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.card.cur { border-color: var(--good); }
.card.sold { opacity: .45; }
.reroll { margin-top: 12px; display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--ink-dim); }
.price { font-variant-numeric: tabular-nums; }
.hpbar { height: 10px; background: rgba(0,0,0,.5); border-radius: 2px; overflow: hidden; margin: 4px 0 8px; border: 1px solid var(--line); }
.hpbar div { height: 100%; background: linear-gradient(#8fe06a, #3f9a2c); }
.svc { display: flex; gap: 6px; flex-wrap: wrap; }
.gpu-warn { max-width: 520px; padding: 10px 14px; margin: -4px 0 6px; border: 1px solid #c8442c; border-radius: 6px; background: rgba(120,30,16,.55); color: #ffd8c8; font-size: 13px; line-height: 1.45; text-align: left; }
.gpu-warn b { color: #fff; }
.hint-line { font-size: 12px; color: var(--ink-dim); margin-top: 6px; line-height: 1.4; }

/* ram combo */
.combo { position: absolute; right: 22px; top: 42%; text-align: right; }
.combo .cn { font-family: var(--display); font-size: 64px; line-height: .9; color: #ff9a4a; text-shadow: 0 2px 0 #5a1a08, 0 0 18px rgba(255,120,40,.5); }
.combo .cn.bump { animation: bump .2s; }
.combo .cl { font-size: 12px; letter-spacing: 2px; color: var(--ink); margin-top: 2px; }
.combo .cl span { color: var(--accent-2); margin-left: 6px; }
.combo .cbar { width: 170px; height: 4px; margin: 6px 0 0 auto; background: rgba(0,0,0,.5); border-radius: 2px; overflow: hidden; }
.combo .cbar div { height: 100%; background: linear-gradient(90deg, #ff5a2a, #ffcf6a); }
.combo .ctags { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: #bfe8ff; margin-top: 4px; min-height: 16px; }

/* settings */
.settings .set-h { font-size: 11px; letter-spacing: 2px; color: var(--ink-dim); margin: 14px 0 6px; text-transform: uppercase; font-weight: 600; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: 14px; }
.set-row > span:first-child { width: 150px; color: var(--ink); }
.set-row input[type=range] { flex: 1; accent-color: var(--accent); }
.set-row b { width: 46px; text-align: right; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.set-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }

/* gamepad focus ring */
.pad-focus { outline: 3px solid var(--accent-2) !important; outline-offset: 3px; box-shadow: 0 0 18px rgba(255,207,106,.45); }

#fps { position: fixed; right: 210px; bottom: 6px; font: 600 11px var(--font); color: #9ff09a; background: rgba(0,0,0,.5); padding: 2px 8px; border-radius: 3px; z-index: 30; pointer-events: none; }
.hpbar.fuelbar div { background: linear-gradient(#e8b040, #a87018); }
.bar.fuel { height: 14px; }
.bar.fuel .fill { background: linear-gradient(#e8b040, #a87018); }
.bar.fuel.low .fill { background: linear-gradient(#ff6a3a, #a8261a); animation: blink 0.8s infinite; }
.bar.fuel span { font-size: 10px; }
.evhint { position: absolute; left: 50%; bottom: 124px; transform: translateX(-50%); font-size: 15px; font-weight: 700; letter-spacing: 1px; color: #ffe8b0; background: rgba(0,0,0,.45); padding: 6px 14px; border-radius: 3px; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.evhint.show { opacity: 1; }
.tipbox { position: absolute; left: 50%; top: 150px; transform: translate(-50%, -8px); width: max-content; max-width: min(720px, 92vw); display: flex; gap: 14px; align-items: flex-start; font-size: 21px; line-height: 1.3; font-weight: 600; color: #f2e6cc; background: rgba(12,9,6,.78); border: 1px solid rgba(255,190,90,.45); border-left: 4px solid #ffb040; padding: 11px 18px; border-radius: 3px; opacity: 0; transition: opacity .3s, transform .3s; }
.tipbox b { color: #ffb040; font-family: var(--display); font-size: 24px; line-height: 1.15; letter-spacing: 1px; white-space: nowrap; }
.tipbox.show { opacity: 1; transform: translate(-50%, 0); }
/* a warning another driver left on their wreck (world/playerWrecks.js); click or tap appreciates it */
.warnbox { position: absolute; left: 50%; top: 214px; transform: translate(-50%, -8px); max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #e8f2f8; background: rgba(8,12,16,.8); border: 1px solid rgba(150,210,255,.35); border-left: 3px solid #8fd0ff; padding: 7px 16px; border-radius: 3px; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; cursor: pointer; }
.warnbox b { font-family: var(--display); font-size: 20px; letter-spacing: 1px; color: #cfe9ff; }
.warnbox span { font-size: 12px; color: #9fb6c6; letter-spacing: .5px; }
.warnbox.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.warnbox.done span { color: #8fd0ff; }
/* the warning composer on a daily's death screen: its own framed panel in the warning blue */
.warn-row { margin: 14px auto 10px; max-width: 540px; padding: 12px 18px 16px; border: 1px solid rgba(143,208,255,.6); border-radius: 6px; background: linear-gradient(rgba(34,66,96,.55), rgba(12,22,34,.55)); box-shadow: 0 0 22px rgba(143,208,255,.16), inset 0 0 18px rgba(143,208,255,.1); }
.warn-head { font-family: var(--display); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: #8fd0ff; }
.warn-text { font-family: var(--display); font-size: 30px; letter-spacing: 1px; color: #eef8ff; margin: 6px 0 12px; text-shadow: 0 0 14px rgba(143,208,255,.5); }
.warn-ctl { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.warn-pick { display: flex; align-items: center; gap: 10px; }
.warn-pick span { font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #cfe9ff; min-width: 62px; }
button.warn-arrow, button.warn-leave { background: #8fd0ff; color: #0b1620; }
button.warn-arrow:hover:not(:disabled), button.warn-leave:hover:not(:disabled) { background: #c2e7ff; }
button.warn-arrow { font-size: 20px; line-height: 1; padding: 11px 17px; min-width: 54px; }
button.warn-leave { font-size: 17px; padding: 12px 30px; }
.status .crew { background: #2a5a7a; color: #cfe8ff; }
.card.mod { border-color: rgba(127,211,106,.45); background: rgba(60,100,50,.18); }
.cards.mods { margin-bottom: 6px; }
.st .topheavy b { color: #ff8a50; }
.dist .haven { color: #ffd070; }
.diff-row { display: flex; gap: 8px; justify-content: center; }
.diff-row button.on { outline: 2px solid #ffd070; }
.won-title { font-family: var(--display); font-size: 52px; letter-spacing: 4px; color: #ffd070; margin: 0 0 6px; text-shadow: 0 0 18px rgba(255,190,80,.6); }
/* the barrel-step upgrade and an affordable vehicle: bright and pulsing, never mistaken for disabled */
.row button[data-tier]:not([disabled]) { background: linear-gradient(#ffe070, #ffb020); color: #2a1604; border-color: #fff0a0; animation: glowpulse 1.4s ease-in-out infinite; }
.row button[data-tier][disabled] { opacity: .45; }
.tabs button.glow { background: linear-gradient(#ffe070, #ffb020); color: #2a1604; border-color: #fff0a0; animation: glowpulse 1.4s ease-in-out infinite; }
/* end-of-run scrap card and the glowing Workshop buttons */
.ws-card { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid #3a5a70; border-radius: 6px; background: rgba(20,40,56,.55); text-align: left; }
.ws-card.ready { border-color: #9fd6ff; box-shadow: 0 0 18px rgba(120,200,255,.25); }
.ws-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-size: 20px; letter-spacing: 2px; color: #cfe8ff; }
.ws-head b { font-size: 30px; }
.ws-sub { font-size: 12px; color: var(--ink-dim); margin: 2px 0 8px; line-height: 1.4; }
.ws-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(159,214,255,.15); }
.ws-info { flex: 1; }
.ws-info small { display: block; font-size: 12px; color: var(--ink-dim); }
.ws-lv { font-size: 12px; color: #9fd6ff; }
.ws-next { font-size: 14px; }
.ws-next small { display: block; font-size: 12px; color: var(--ink-dim); margin-top: 4px; }
.ws-bar { height: 8px; margin-top: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.ws-bar div { height: 100%; background: linear-gradient(90deg, #4a90c0, #9fd6ff); }
button.ws-buy, button.ws-glow { background: linear-gradient(#c8ecff, #6ab8f0); color: #08202e; border: 1px solid #e0f4ff; animation: scrappulse 1.4s ease-in-out infinite; }
@keyframes scrappulse { 0%, 100% { box-shadow: 0 0 6px 1px rgba(120,200,255,.5); } 50% { box-shadow: 0 0 16px 4px rgba(150,215,255,.9); } }
button.ws-glow .scrap { color: #08202e; }
@keyframes glowpulse { 0%, 100% { box-shadow: 0 0 6px 1px rgba(255,200,60,.55); } 50% { box-shadow: 0 0 16px 4px rgba(255,210,80,.95); } }
.wslot .click { color: #ffa040; font-size: 0.85em; margin-left: 4px; }

/* ---------------- loading screen (shader warm-up) ---------------- */
#loading { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 12vh; gap: 14px; background: #120e0a; transition: opacity .5s; overflow: hidden; }
/* the intro clip (assets/intro.mp4, see index.html), darkened toward the title at the bottom */
#loading .ld-shots { position: absolute; inset: 0; background: #120e0a center / cover no-repeat url(assets/intro.jpg); }
#loading .ld-shots video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#loading .ld-shots::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(10,8,6,.25), rgba(10,8,6,.15) 45%, rgba(10,8,6,.88)); }
#loading #ld-cap { position: absolute; left: 6%; bottom: 7%; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); text-shadow: 0 1px 4px #000; z-index: 1; opacity: 0; transition: opacity .4s; }
#loading #ld-cap.on { opacity: 1; }
#loading .ld-skip { position: absolute; right: 6%; bottom: 7%; z-index: 2; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); text-shadow: 0 1px 4px #000; opacity: 0; transition: opacity .4s; }
#loading .ld-skip.on { opacity: 1; animation: ld-pulse 1.6s ease-in-out .4s infinite; }
@keyframes ld-pulse { 50% { opacity: .45; } }
#loading .ld-title, #loading .ld-sub, #loading .ld-bar { position: relative; z-index: 2; }
#loading.done { opacity: 0; pointer-events: none; }
#loading .ld-title { font-family: var(--display); font-size: clamp(48px, 8vw, 96px); letter-spacing: 6px; line-height: .9; color: var(--accent-2); text-shadow: 0 4px 0 #6a3a10, 0 10px 30px rgba(0,0,0,.8); }
#loading .ld-sub { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: var(--ink-dim); }
#loading .ld-bar { position: relative; width: min(260px, 60vw); height: 4px; overflow: hidden; background: rgba(243,234,216,.12); border-radius: 2px; }
#loading .ld-bar div { position: absolute; top: 0; bottom: 0; width: 35%; background: var(--accent); border-radius: 2px; animation: ld-slide 1.1s ease-in-out infinite; }
@keyframes ld-slide { from { left: -35%; } to { left: 100%; } }
.auto-tag { font-size: 11px; color: #9fd6ff; font-weight: 400; margin-left: 6px; }

/* ---- touch controls (phones / tablets) */
body.touch { touch-action: manipulation; -webkit-user-select: none; -webkit-touch-callout: none; }
body.touch #app, body.touch #app canvas { touch-action: none; }
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 6; display: none; }
#touch.show { display: block; }
#touch > * { pointer-events: auto; touch-action: none; }
.t-steer { position: absolute; left: 2vw; bottom: 3vh; width: min(36vw, calc(50vw - 175px)); max-width: 420px; height: 26vh; min-height: 110px; border-radius: 18px; background: rgba(10,8,6,.22); border: 1px solid rgba(255,230,190,.18); }
.t-track { position: absolute; left: 10%; right: 10%; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(255,230,190,.25); }
.t-knob { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,200,110,.45); border: 2px solid rgba(255,230,190,.7); }
.t-l, .t-r { position: absolute; top: 50%; transform: translateY(-50%); font-size: 26px; color: rgba(255,230,190,.45); }
.t-l { left: 5%; } .t-r { right: 5%; }
.t-btn { position: absolute; border-radius: 50%; border: 2px solid rgba(255,230,190,.55); background: rgba(10,8,6,.35); color: #f4e4c4; font-weight: 800; letter-spacing: 1px; padding: 0; }
.t-btn.down { background: rgba(255,170,60,.55); }
.t-brake { right: 3vw; bottom: 5vh; width: 17vh; height: 17vh; min-width: 84px; min-height: 84px; font-size: 15px; }
.t-nitro { right: calc(3vw + max(17vh, 84px) + 14px); bottom: 4vh; width: 12vh; height: 12vh; min-width: 62px; min-height: 62px; font-size: 12px; background: rgba(30,60,90,.45); }
.t-ability { right: 4vw; bottom: calc(5vh + max(17vh, 84px) + 14px); width: 11vh; height: 11vh; min-width: 58px; min-height: 58px; font-size: 11px; }
.t-pause { left: 12px; top: 74px; width: 44px; height: 44px; border-radius: 10px; font-size: 14px; }
#rotate { position: fixed; inset: 0; z-index: 40; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #120e0a; color: #f4e4c4; font-size: 18px; text-align: center; padding: 20px; }
#rotate div { font-size: 64px; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }
/* short landscape screens: shrink the HUD and menus to fit */
@media (max-height: 560px) {
    #hud { zoom: .68; }
    .screen { zoom: .7; }
    .screen .panel { max-height: calc(92vh / .7); }
    .screen .shop { height: calc(94vh / .7); width: min(1180px, calc(96vw / .7)); }
    #h-tip { font-size: 24px; max-width: min(900px, 92vw); }
    body.touch #h-tip { top: 128px; }      /* up under the compass, clear of the car and the thumbs */
    body.touch #h-warn { top: auto; bottom: calc(26vh + 84px); }
}
/* touch: the thumbs own the bottom corners, so the map and speed go top-right and the gun list goes */
body.touch .hud-br { top: 96px; bottom: auto; }
body.touch #h-map { width: 120px; height: 120px; }
body.touch .hud-bl { display: none; }

body.touch .hud-bc { zoom: .85; }
.t-ability { background: conic-gradient(rgba(255,200,90,.55) calc(var(--charge, 1) * 360deg), rgba(10,8,6,.35) 0); }
.t-ability.ready { border-color: #ff6a3a; box-shadow: 0 0 14px rgba(255,90,40,.8); }

/* ---- achievements: unlock popup (under the hull bar), gallery, end-screen section, detail view */
#ach-pop { position: fixed; left: 18px; top: 128px; z-index: 30; display: flex; gap: 12px; align-items: center; max-width: 380px; padding: 10px 16px 10px 10px; border-radius: 8px;
    background: linear-gradient(90deg, rgba(30,22,14,.95), rgba(30,22,14,.82)); border: 1px solid rgba(255,208,122,.55); box-shadow: 0 6px 24px rgba(0,0,0,.6), 0 0 18px rgba(255,190,90,.25);
    pointer-events: none; opacity: 0; transform: translateX(-30px); transition: opacity .35s, transform .35s; }
#ach-pop.show { opacity: 1; transform: none; }
#screens:has(.screen) ~ #ach-pop { opacity: 0; }      /* a menu opened while it was up */
#ach-pop .ap-glyph { width: 50px; height: 50px; flex: none; border-radius: 50%; border: 3px solid; display: flex; align-items: center; justify-content: center; font-size: 26px; background: rgba(0,0,0,.4); font-family: "Segoe UI Symbol", var(--font); }
#ach-pop .ap-txt { display: flex; flex-direction: column; line-height: 1.25; }
#ach-pop small { font-size: 10px; font-weight: 800; letter-spacing: 2.5px; color: #ffcf7a; }
#ach-pop b { font-family: var(--display); font-size: 24px; letter-spacing: 1px; color: #f8ead0; }
#ach-pop span { font-size: 12px; color: var(--ink-dim); }
body.touch #ach-pop { top: 126px; left: 70px; }

.ach-gallery { width: min(1060px, 94vw); }
.ag-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ag-head h2 { font-family: var(--display); font-size: 34px; letter-spacing: 3px; margin: 0; }
.ag-pct { text-align: right; min-width: 220px; }
.ag-pct b { font-family: var(--display); font-size: 22px; }
.ag-bar { height: 8px; margin: 4px 0; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.ag-bar div { height: 100%; background: linear-gradient(90deg, #c8842c, #ffd060); }
.ag-pct small { font-size: 12px; color: var(--ink-dim); }
.ag-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ag-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 16px; }
.ach-tile { display: flex; flex-direction: column; padding: 0; text-align: left; border-radius: 6px; overflow: hidden; background: rgba(0,0,0,.35); border: 1px solid var(--line); color: var(--ink); font-weight: 400; letter-spacing: 0; }
button.ach-tile:hover { border-color: #ffcf7a; transform: translateY(-2px); }
.at-img { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(ellipse at 50% 60%, #3a2c1e, #16100b) center / cover no-repeat; display: flex; align-items: center; justify-content: center; }
.at-img.has .at-glyph { position: absolute; right: 8px; bottom: 6px; font-size: 22px; text-shadow: 0 0 6px #000, 0 0 2px #000; }
.at-glyph { font-size: 44px; font-family: "Segoe UI Symbol", var(--font); color: #ffcf7a; }
.at-body { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px 11px; }
.at-body b { font-family: var(--display); font-size: 19px; letter-spacing: 1px; }
.at-body span { font-size: 12px; color: var(--ink-dim); line-height: 1.35; }
.at-body small { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.at-body .at-date { color: var(--ink-dim); font-weight: 600; letter-spacing: .5px; text-transform: none; }
.ach-tile.locked { opacity: .62; }
.ach-tile.locked .at-img { background: repeating-linear-gradient(135deg, #1a1410 0 10px, #15100c 10px 20px); }
.ach-tile.locked .at-glyph { color: #4a3e32; filter: blur(.4px); }

.ach-run { margin: 4px 0 14px; padding: 10px 12px; border: 1px solid rgba(255,208,122,.45); border-radius: 6px; background: rgba(40,28,16,.55); text-align: left; }
.ach-run .ar-head { font-family: var(--display); font-size: 17px; letter-spacing: 2px; color: #ffcf7a; margin-bottom: 8px; }
.ach-run .ar-head b { color: #f8ead0; margin-left: 6px; }
.ar-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 300px; overflow: auto; }
.ach-tile.small .at-body span, .ach-tile.small .at-date { display: none; }
.ach-tile.small .at-body b { font-size: 15px; }
.ach-tile.small .at-glyph { font-size: 30px; }
.ach-run.goal { border-color: var(--line); }
.ar-goal { display: flex; align-items: center; gap: 12px; }
.ar-goal .at-glyph { font-size: 30px; }
.ar-goal div { display: flex; flex-direction: column; }
.ar-goal b { font-family: var(--display); font-size: 18px; letter-spacing: 1px; }
.ar-goal span { font-size: 12px; color: var(--ink-dim); }

.ach-modal { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: rgba(8,6,4,.8); }
.am-box { width: min(980px, 94vw); padding: 16px; }
.am-media { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: #0d0a07; border-radius: 4px; overflow: hidden; }
.am-card { width: 100%; height: 100%; object-fit: contain; display: block; }
.am-loading { color: var(--ink-dim); font-size: 14px; letter-spacing: 2px; }
.am-info { display: flex; flex-direction: column; gap: 3px; margin: 12px 2px 10px; }
.am-info b { font-family: var(--display); font-size: 26px; letter-spacing: 1.5px; }
.am-info span { font-size: 14px; color: var(--ink); }
.am-info small { font-size: 12px; color: var(--ink-dim); }
.am-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@media (max-height: 560px) {
    .ag-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .am-box { width: min(760px, 120vh); }
}
/* a Behemoth's entrance: bars in, the HUD out, its name across the bottom */
#cine { position: fixed; inset: 0; pointer-events: none; z-index: 8; visibility: hidden; }
body.cine #cine { visibility: visible; }
body.cine #hud, body.cine #touch { opacity: 0; }
body.cine .announce { visibility: hidden; }
#hud { transition: opacity .18s; }
.cine-bar { position: absolute; left: 0; right: 0; height: 12vh; background: #000; transition: transform .28s cubic-bezier(.2,.8,.3,1); }
.cine-bar.top { top: 0; transform: translateY(-100%); }
.cine-bar.bot { bottom: 0; transform: translateY(100%); }
body.cine .cine-bar { transform: none; }
.cine-title { position: absolute; left: 0; right: 0; bottom: 14vh; text-align: center; opacity: 0; transform: scale(1.18); transition: opacity .16s, transform .32s cubic-bezier(.15,.9,.3,1); text-shadow: 0 2px 4px #000, 0 0 26px rgba(0,0,0,.9); }
#cine.roar .cine-title { opacity: 1; transform: none; }
.cine-title b { display: block; font-family: var(--display); font-size: clamp(44px, 9vh, 92px); letter-spacing: .14em; color: #ff5a3a; font-weight: 400; line-height: 1; }
.cine-title span { display: block; margin-top: 6px; font-size: clamp(13px, 2.2vh, 18px); letter-spacing: .1em; color: #e8e0d4; }
/* the death card: what did this to you, and what to do about it */
.panel.over { width: min(560px, calc(100vw - 16px)); box-sizing: border-box; }
/* the credits: one line a thing, its name (a link to where it came from), who made it, and what the game uses it for */
.panel.credits { width: min(640px, calc(100vw - 16px)); box-sizing: border-box; }
.credits h3 { margin: 14px 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); }
.cr-row { display: grid; grid-template-columns: 1.3fr 0.8fr 1.4fr; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 14px; align-items: baseline; }
.cr-row b { font-weight: 700; } .cr-row i { font-style: normal; color: var(--ink-dim); font-size: 13px; }
.cr-row a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.cr-row a:hover { text-decoration-color: currentColor; }
@media (max-width: 560px) { .cr-row { grid-template-columns: 1fr 1fr; } .cr-row i { grid-column: 1 / -1; } }
.dc { display: flex; gap: 12px; margin: 12px 0 4px; padding: 10px; text-align: left; background: rgba(120,40,20,.18); border: 1px solid rgba(255,106,74,.45); border-left: 3px solid #ff6a4a; border-radius: 4px; }
.dc-pic { flex: none; width: 92px; height: 92px; border-radius: 3px; overflow: hidden; background: #17110c; box-shadow: inset 0 0 0 1px rgba(255,190,120,.18); }
.dc-pic img { display: block; width: 100%; height: 100%; }
.dc-pic.icon svg { display: block; width: 100%; height: 100%; padding: 18px; box-sizing: border-box; stroke: #ff8a5a; fill: rgba(255,138,90,.14); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.dc-head b { font-family: var(--display); font-size: 24px; letter-spacing: 1px; color: #ffd0b0; line-height: 1.05; }
.dc-head span { font-size: 13px; font-weight: 700; color: #ff8a5a; }
.dc-stats { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; font-weight: 700; color: var(--accent-2); }
.dc-stats small { margin-right: 4px; font-size: 11px; font-weight: 400; color: var(--ink-dim); }
.dc-tip { font-size: 15px; line-height: 1.25; color: #f6ecd8; }
.dc-second { font-size: 12px; color: var(--ink-dim); }
/* Run it back never scrolls out of reach, however much the death screen has to say */
.menu-col.over-go { position: sticky; bottom: -22px; z-index: 2; margin: 0 -26px -22px; padding: 10px 26px 14px; background: #1a140e; border-top: 1px solid var(--line); }
@media (max-width: 480px) { .panel.over { padding-left: 14px; padding-right: 14px; } .menu-col.over-go { margin: 0 -14px -22px; padding: 10px 14px 14px; } .menu-col.over-go > div { flex-wrap: wrap; justify-content: center; } .dc-pic { width: 64px; height: 64px; } .dc-pic.icon svg { padding: 12px; } .dc-head b { font-size: 20px; } .over-title { font-size: 48px; } }
/* the comms window: who's talking (a painted face on a little screen, ui/commsPortrait.js, in .c-face) and what
   they say, under the hull. Subtitles always: their size is a setting. */
.comms { position: absolute; left: 18px; top: 122px; width: 396px; box-sizing: border-box; display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px 9px 8px; background: rgba(12,9,6,.82); border: 1px solid rgba(143,220,184,.35); border-left: 4px solid #8fdcb8; border-radius: 4px; box-shadow: 0 0 18px rgba(143,220,184,.14); opacity: 0; transition: opacity .15s, top .18s; pointer-events: none; }
.comms.show { opacity: 1; }
.comms.haven { border-left-color: #ffcf6a; border-color: rgba(255,207,106,.35); }
body:has(#ach-pop.show) .comms { top: 210px; }
.c-face { flex: none; width: 128px; height: 96px; border-radius: 3px; overflow: hidden; background: #0e0b08; box-shadow: 0 0 0 1px rgba(143,220,184,.4), 0 0 10px rgba(143,220,184,.12); }
.c-pic { display: block; width: 100%; height: 100%; }
.c-main { flex: 1; min-width: 0; }
.c-head { display: flex; align-items: baseline; gap: 7px; }
.c-head i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ff5a3a; box-shadow: 0 0 8px #ff5a3a; animation: blink .9s infinite; align-self: center; }
.c-head b { font-family: var(--display); font-size: 20px; letter-spacing: 1.5px; color: #b4f0d2; }
.comms.haven .c-head b { color: #ffe2a0; }
.c-head span { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--ink-dim); }
.c-sub { margin-top: 3px; font-size: 17px; line-height: 1.25; font-weight: 600; color: #f6efdc; }
body[data-subs="s"] .c-sub { font-size: 14px; }
body[data-subs="l"] .c-sub { font-size: 21px; }
.c-keys { display: none; margin-top: 6px; padding: 3px 7px; border-radius: 3px; background: rgba(143,220,184,.14); font-size: 13px; font-weight: 700; letter-spacing: .3px; color: #b4f0d2; }      /* a tip's keys, under the buddy's words */
.c-keys.show { display: inline-block; }
body.touch .comms { left: 66px; }
@media (max-height: 560px) { body.touch .comms { left: 90px; width: 350px; } body.touch #h-announce { top: 37%; } }      /* clear of the banner in the middle */
/* Haven's signal, by the progress bar's flag: it lights up as the station comes into range */
.progress .signal { position: absolute; right: -32px; top: 10px; display: none; align-items: flex-end; gap: 2px; height: 12px; }
.progress .signal.show { display: flex; }
.progress .signal u { width: 3px; background: rgba(255,216,144,.25); }
.progress .signal u:nth-child(1) { height: 4px; } .progress .signal u:nth-child(2) { height: 6px; } .progress .signal u:nth-child(3) { height: 9px; } .progress .signal u:nth-child(4) { height: 12px; }
.progress .signal[data-n="1"] u:nth-child(-n+1), .progress .signal[data-n="2"] u:nth-child(-n+2), .progress .signal[data-n="3"] u:nth-child(-n+3), .progress .signal[data-n="4"] u { background: #ffd890; }