/* BUSBANG — hand-painted Dhaka signboard UI */
:root {
  --ink: #15100c; --ink-2: #241b14; --paper: #f1e3c4; --paper-2: #e6d2a8; --tin: #2a221b; --tin-2: #3a2f25;
  --yellow: #ffd43b; --red: #e03131; --green: #2f9e44; --blue: #1c5bb8; --pink: #d6336c; --orange: #f76707; --cream: #fff4dc;
  --display: 'Anton', Impact, sans-serif; --label: 'Oswald', 'Arial Narrow', sans-serif; --bn: 'Baloo Da 2', 'Noto Sans Bengali', sans-serif; --bn-hand: 'Galada', 'Baloo Da 2', sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --stripe: repeating-linear-gradient(90deg, var(--red) 0 22px, var(--yellow) 22px 44px, var(--green) 44px 66px, var(--blue) 66px 88px, var(--pink) 88px 110px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--cream); font-family: var(--label); -webkit-font-smoothing: antialiased; }
#game-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; outline: none; }
button { font: inherit; color: inherit; }
.kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin: 0 2px; border: 2px solid var(--ink); border-bottom-width: 4px; border-radius: 4px; background: var(--cream); color: var(--ink); font: 700 11px var(--mono); line-height: 1; vertical-align: middle; }

/* ---------------- buttons ---------------- */
.btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 10px 18px; border: 3px solid var(--ink); border-radius: 6px; box-shadow: 5px 5px 0 var(--ink); cursor: pointer; transition: transform .07s, box-shadow .07s, filter .15s; text-transform: uppercase; }
.btn:hover:not(:disabled) { filter: brightness(1.08); transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn .btn-text { font: 400 22px var(--display); letter-spacing: .03em; line-height: 1; }
.btn .btn-sub { font: 600 10px var(--label); letter-spacing: .18em; opacity: .75; }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-red { background: var(--red); color: var(--cream); }
.btn-ghost { background: var(--paper-2); color: var(--ink); }
.btn-ghost.is-ready { background: var(--green); color: var(--cream); }
.btn-small { flex-direction: row; gap: 6px; padding: 7px 12px; font: 600 13px var(--label); letter-spacing: .06em; box-shadow: 3px 3px 0 var(--ink); border-width: 2px; }
.btn-small small { font: 500 11px var(--mono); opacity: .8; letter-spacing: 0; }
.btn-small:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.chip-btn { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 4px; border: 2px solid var(--ink); border-radius: 5px; background: var(--tin); color: var(--cream); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; font: 600 11px var(--label); letter-spacing: .1em; }
.chip-btn:hover { background: var(--tin-2); }
.chip-btn.active { background: var(--yellow); color: var(--ink); }
.link-btn { border: 0; background: none; color: var(--red); font: 700 11px var(--label); letter-spacing: .12em; cursor: pointer; padding: 0; }

/* ---------------- top bar ---------------- */
#top-chrome { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; pointer-events: none; }
body.phase-playing .brand { display: none; }
body.phase-playing .conn span { display: none; }
body.phase-playing .conn { padding: 0 8px; height: 30px; }
#top-chrome > * { pointer-events: auto; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-word { font: 400 22px var(--display); color: var(--yellow); letter-spacing: .02em; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--red), 5px 5px 0 var(--ink); }
.brand-bn { font: 400 22px var(--bn-hand); color: var(--cream); text-shadow: 2px 2px 0 var(--ink); }
.brand-route { font: 600 11px var(--bn); letter-spacing: .08em; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); padding: 1px 8px; transform: rotate(-2deg); box-shadow: 2px 2px 0 var(--ink); }
.chrome-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.telemetry { display: flex; gap: 10px; font: 500 11px var(--mono); color: #c9b896; background: #15100cb0; padding: 6px 10px; border-radius: 4px; }
.telemetry b { color: var(--cream); }
.conn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 5px; background: var(--tin); font: 600 11px var(--label); letter-spacing: .1em; box-shadow: 3px 3px 0 var(--ink); }
.conn i { width: 9px; height: 9px; border-radius: 50%; background: #999; }
.conn.status-online i { background: #51cf66; box-shadow: 0 0 8px #51cf66; }
.conn.status-connecting i { background: var(--yellow); animation: blink 1s infinite; }
.conn.status-offline i { background: var(--red); }
@keyframes blink { 50% { opacity: .2; } }

/* ---------------- lobby ---------------- */
.overlay-screen { position: fixed; inset: 0; z-index: 15; }
.overlay-screen.center { display: grid; place-items: center; background: #0d0907b8; backdrop-filter: blur(3px); z-index: 40; }
#lobby-overlay { display: grid; grid-template-columns: minmax(330px, 470px) 1fr minmax(290px, 360px); gap: 24px; padding: 74px 22px 22px; pointer-events: none; background: linear-gradient(90deg, #120c08e6 0%, #120c0880 28%, transparent 46%, transparent 70%, #120c0870 84%, #120c08cc 100%); }
#lobby-overlay > section { pointer-events: auto; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.lobby-left { grid-column: 1; overflow-y: auto; padding: 4px 8px 12px 2px; scrollbar-width: none; }
.lobby-right { grid-column: 3; }
.hero-kicker { font: 600 12px var(--bn); letter-spacing: .1em; color: var(--yellow); }
.hero-title { margin: 2px 0 0; font: 400 clamp(64px, 9vw, 116px) var(--display); line-height: .82; letter-spacing: .01em; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); text-shadow: 6px 6px 0 var(--red), 10px 10px 0 var(--ink); display: flex; gap: 12px; }
.hero-title span:last-child { color: var(--cream); }
.hero-bn { font: 400 clamp(26px, 3vw, 36px) var(--bn-hand); color: var(--cream); transform: rotate(-3deg); margin: 6px 0 0 6px; text-shadow: 3px 3px 0 var(--ink); }
.hero-copy { font: 400 15px/1.5 var(--label); color: #e9dcc0; max-width: 440px; margin: 10px 0 0; text-shadow: 0 1px 3px #000; }

.permit { position: relative; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 4px; box-shadow: 8px 8px 0 var(--ink); padding: 0 18px 18px; background-image: radial-gradient(circle at 20% 10%, #fff6 0, transparent 40%), repeating-linear-gradient(0deg, transparent 0 27px, #0000000a 27px 28px); }
.permit::before { content: ''; display: block; height: 10px; margin: 0 -18px 12px; background: var(--stripe); border-bottom: 3px solid var(--ink); }
.permit-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.permit-title { font: 400 26px var(--display); letter-spacing: .04em; line-height: 1; }
.permit-bn { font: 600 13px var(--bn); color: #6b5638; }
.stamp { font: 400 14px var(--display); letter-spacing: .08em; color: #8a7b62; border: 3px solid currentColor; border-radius: 4px; padding: 3px 8px; transform: rotate(-6deg); opacity: .8; }
.stamp.status-ready { color: var(--green); opacity: 1; animation: stamp .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes stamp { from { transform: rotate(-6deg) scale(2.2); opacity: 0; } }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field-label { display: flex; justify-content: space-between; align-items: baseline; font: 700 11px var(--label); letter-spacing: .16em; color: #5a4930; }
.field-value { font: 600 12px var(--bn); letter-spacing: 0; color: var(--ink); }
#player-name { width: 100%; height: 44px; padding: 0 12px; border: 3px solid var(--ink); border-radius: 4px; background: var(--cream); color: var(--ink); font: 400 22px var(--display); letter-spacing: .04em; text-transform: uppercase; outline: none; }
#player-name:focus { background: #fff; box-shadow: 0 0 0 3px var(--yellow); }
#player-name:disabled { opacity: .7; }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.color-swatch { position: relative; height: 40px; border: 3px solid var(--ink); border-radius: 5px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: transform .08s; background-image: linear-gradient(180deg, transparent 0 55%, #ffffffaa 55% 62%, transparent 62%); }
.color-swatch:hover { transform: translateY(-2px); }
.color-swatch.active { transform: translateY(-3px); box-shadow: 3px 6px 0 var(--ink); }
.color-swatch.active::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font: 400 20px var(--display); color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.patterns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pattern-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px; border: 3px solid var(--ink); border-radius: 5px; background: var(--paper-2); color: var(--ink); cursor: pointer; font: 700 11px var(--label); letter-spacing: .12em; box-shadow: 3px 3px 0 var(--ink); }
.pattern-btn.active { background: var(--yellow); }
.glyph { width: 56px; height: 16px; border: 2px solid var(--ink); background: var(--red); }
.g-stripe { background: linear-gradient(180deg, var(--red) 0 30%, #fff 30% 42%, var(--blue) 42% 80%, var(--yellow) 80%); }
.g-chevron { background: repeating-linear-gradient(120deg, var(--red) 0 7px, var(--blue) 7px 14px, var(--yellow) 14px 21px); }
.g-wave { background: radial-gradient(ellipse at 50% 110%, var(--blue) 45%, transparent 47%), radial-gradient(ellipse at 0% -10%, var(--yellow) 45%, transparent 47%), var(--red); }
.permit-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin-top: 4px; }

.depot { background: var(--tin); border: 3px solid var(--ink); border-radius: 4px; box-shadow: 8px 8px 0 var(--ink); overflow: hidden; display: flex; flex-direction: column; }
.depot-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; background: var(--ink-2); border-bottom: 3px solid var(--ink); font: 400 20px var(--display); letter-spacing: .05em; color: var(--yellow); }
.depot-bn { font: 400 18px var(--bn-hand); color: var(--cream); }
.depot-count { margin-left: auto; font: 600 12px var(--mono); color: #c9b896; }
.roster { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; max-height: 38vh; overflow-y: auto; }
.roster-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #1b1510; border: 2px solid #00000080; border-left: 8px solid var(--c); border-radius: 4px; }
.roster-item .r-name { font: 600 14px var(--label); letter-spacing: .06em; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-item .r-name.is-self { color: var(--yellow); }
.roster-item.empty { background: transparent; border: 2px dashed #ffffff26; border-left: 8px solid #ffffff1a; }
.roster-item.empty .r-name { color: #ffffff59; font-weight: 500; letter-spacing: .04em; }
.r-tag { font: 700 9px var(--label); letter-spacing: .14em; padding: 2px 6px; border-radius: 3px; background: #ffffff1a; }
.r-tag.host { background: var(--yellow); color: var(--ink); }
.r-tag.bot { background: var(--blue); }
.r-state { font: 700 10px var(--label); letter-spacing: .14em; padding: 3px 7px; border-radius: 3px; background: #5a4930; color: #e2d3b0; }
.r-state.ready { background: var(--green); color: #fff; }
.host-panel { padding: 12px; border-top: 3px solid var(--ink); background: var(--ink-2); display: flex; flex-direction: column; gap: 12px; }
.host-panel.hidden, .guest-wait.hidden { display: none; }
.bots-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bots-label { font: 400 16px var(--display); letter-spacing: .05em; color: var(--cream); }
.bots-sub { font: 400 12px var(--label); color: #a8957a; }
.stepper { display: flex; align-items: center; border: 3px solid var(--ink); border-radius: 5px; background: var(--cream); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.stepper button { width: 32px; height: 34px; border: 0; background: var(--yellow); font: 400 22px var(--display); cursor: pointer; color: var(--ink); }
.stepper button:hover { background: #ffe066; }
.stepper span { min-width: 34px; text-align: center; font: 400 22px var(--display); }
#btn-start { width: 100%; }
.guest-wait { padding: 14px; border-top: 3px solid var(--ink); font: 500 13px var(--label); letter-spacing: .1em; color: #c9b896; text-align: center; background: var(--ink-2); }
.keys-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 14px; background: #15100cc4; border: 2px solid #ffffff14; border-radius: 6px; font: 500 12px var(--label); color: #d9c9a6; }

/* ---------------- HUD (compact corner clusters) ---------------- */
#hud-overlay { position: fixed; inset: 0; z-index: 10; pointer-events: none; display: none; }
body.phase-playing #hud-overlay { display: block; }
body:not(.phase-lobby) #lobby-overlay { display: none; }
#hud-overlay button { pointer-events: auto; }
.plate { background: #17110ce0; border: 2px solid var(--ink); border-radius: 6px; box-shadow: 3px 3px 0 #000000a0; }
.hud-time { position: absolute; top: 14px; left: 16px; display: flex; align-items: center; gap: 8px; padding: 5px 10px 9px; background: #17110ce0; border: 2px solid var(--ink); border-radius: 6px; box-shadow: 3px 3px 0 #000000a0; font: 600 12px var(--label); letter-spacing: .06em; color: #c9b896; }
.hud-time .sun { font-size: 16px; filter: drop-shadow(0 0 5px #ffb84d); }
.hud-time b { color: var(--cream); }
#hud-day-time { font: 400 22px var(--display); letter-spacing: .03em; }
.day-pill { font: 400 12px var(--display); letter-spacing: .06em; background: var(--yellow); color: var(--ink); padding: 2px 6px; border-radius: 3px; }
.time-left b { font-family: var(--mono); font-weight: 700; }
.day-track { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #f2a65a, #ffe7a3 25%, #ffd08a 45%, #f06a3c 55%, #29305a 62%, #12162e 90%, #6a4f6a 100%); }
.day-track span { position: absolute; top: -2px; width: 3px; height: 7px; background: var(--cream); left: 0; }
.hud-cash { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 3px 14px 7px; text-align: center; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--ink); }
.cash-val { font: 400 34px var(--display); line-height: 1; letter-spacing: .02em; }
.cash-val .taka { font-size: 24px; margin-right: 3px; }
.cash-val.bump { animation: bump .35s; }
@keyframes bump { 40% { transform: scale(1.15); color: #1a6b2e; } }
.seats { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 600 11px var(--mono); }
.seat-bar { width: 128px; display: grid; grid-template-columns: repeat(32, 1fr); gap: 1px; height: 6px; }
.seat-bar i { background: #00000026; border-radius: 1px; }
.seat-bar i.on { background: var(--ink); }
.seat-bar.full i.on { background: var(--red); }
.hud-standings { position: absolute; top: 14px; right: 16px; width: 200px; margin-top: 40px; }
.standings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.lb-item { display: flex; align-items: center; gap: 7px; padding: 3px 8px; background: #17110cd0; border-left: 5px solid var(--c); border-radius: 3px; font: 600 12px var(--label); letter-spacing: .03em; color: #e9dcc0; }
.lb-item.is-self { background: #ffd43be0; color: var(--ink); }
.lb-item.dead { opacity: .45; text-decoration: line-through; }
.lb-rank { font: 400 13px var(--display); width: 12px; opacity: .7; }
.lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-money { font: 700 11px var(--mono); }
.lb-seats { display: none; }
.event-feed { position: absolute; top: 64px; left: 16px; width: 260px; display: flex; flex-direction: column; gap: 4px; }
.event-pill { align-self: flex-start; max-width: 260px; padding: 3px 8px; background: #17110ce0; color: #f1e3c4; border-left: 4px solid var(--k, var(--yellow)); border-radius: 3px; font: 500 12px var(--label); letter-spacing: .02em; animation: slidein .25s ease-out; }
.event-pill.out { animation: slideout .3s ease-in forwards; }
@keyframes slidein { from { transform: translateX(-20px); opacity: 0; } }
@keyframes slideout { to { transform: translateX(-30px); opacity: 0; } }
.kind-damage, .kind-elimination, .kind-penalty, .kind-error { --k: var(--red); }
.kind-repair { --k: #4fd1a5; } .kind-join, .kind-start { --k: var(--blue); } .kind-winner { --k: var(--green); }
.hud-map { position: absolute; left: 16px; bottom: 16px; width: 156px; height: 156px; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; box-shadow: 3px 3px 0 #000000a0; }
#minimap { display: block; width: 156px; height: 156px; }
.hud-bottom { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.prompt { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; background: #17110ce8; border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 #000000a0; color: var(--cream); animation: rise .18s ease-out; white-space: nowrap; }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
.prompt-body { display: flex; flex-direction: column; line-height: 1.1; }
.prompt-body b { font: 400 17px var(--display); letter-spacing: .03em; }
.prompt-body span { font: 500 11px var(--label); color: #c9b896; letter-spacing: .03em; }
.prompt-ico { font-size: 18px; }
.prompt-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); color: var(--ink); font: 700 12px var(--label); letter-spacing: .08em; cursor: pointer; }
.prompt-btn.ghost { background: var(--paper-2); }
.prompt-btn small { font: 500 10px var(--mono); opacity: .75; }
.prompt-btn:disabled { opacity: .45; cursor: not-allowed; }
.prompt-stop.hot { border-color: var(--orange); box-shadow: 0 0 0 3px #f7670766, 3px 3px 0 #000000a0; }
.prompt-warn { background: #5a1010ee; }
.garage-btns { display: flex; gap: 6px; }
.repair-progress { display: flex; align-items: center; gap: 8px; min-width: 200px; }
.repair-progress .track { flex: 1; height: 8px; background: #00000080; border-radius: 4px; overflow: hidden; }
.repair-progress .track span { display: block; height: 100%; width: 0; background: #4fd1a5; transition: width .2s linear; }
.repair-progress b { font: 700 12px var(--mono); }
.hud-speed { position: absolute; right: 14px; bottom: 12px; width: 148px; height: 160px; }
.gauge { width: 148px; height: 148px; filter: drop-shadow(3px 3px 0 #000000a0); }
.g-track { fill: #17110ce0; stroke: #2b221b; stroke-width: 4; }
.g-fill { fill: none; stroke: var(--yellow); stroke-width: 6; transform: rotate(135deg); transform-origin: 70px 70px; stroke-dasharray: 0 400; transition: stroke .3s; }
.g-hp-track { fill: none; stroke: #00000090; stroke-width: 5; }
.g-hp { fill: none; stroke: #51cf66; stroke-width: 5; transform: rotate(-90deg); transform-origin: 70px 70px; stroke-dasharray: 402 402; transition: stroke-dasharray .3s, stroke .3s; }
.g-needle { stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; transform-origin: 70px 70px; transition: transform .08s linear; }
.g-hub { fill: var(--ink); stroke: var(--yellow); stroke-width: 2; }
#gauge-ticks line { stroke: #8f7f62; stroke-width: 2; }
#gauge-ticks text { fill: #8f7f62; font: 600 8px var(--mono); text-anchor: middle; }
.speed-num { position: absolute; left: 0; width: 148px; top: 84px; text-align: center; line-height: 1; }
.speed-num b { display: block; font: 400 26px var(--display); color: var(--cream); }
.speed-num span { font: 600 8px var(--label); letter-spacing: .2em; color: #a8957a; }
.hp-readout { position: absolute; left: 0; width: 148px; bottom: 0; text-align: center; font: 600 10px var(--label); letter-spacing: .12em; color: #c9b896; text-shadow: 0 1px 2px #000; }
.hp-readout b { font: 700 11px var(--mono); color: var(--cream); }
.hull-cond { color: #51cf66; } .hull-cond.mid { color: var(--yellow); } .hull-cond.low { color: #ff6b6b; animation: blink .6s infinite; }
.gear { position: absolute; right: 0; top: 0; width: 26px; height: 26px; display: grid; place-items: center; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 4px; font: 400 15px var(--display); }
.icon-btn { width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 6px; background: #17110cd0; color: var(--cream); font: 700 14px var(--label); cursor: pointer; box-shadow: 2px 2px 0 #000000a0; }
.icon-btn:hover { background: var(--tin-2); }
.icon-btn.active { background: var(--yellow); color: var(--ink); }
.telemetry { display: none; }
body.show-perf .telemetry { display: flex; }
.lobby-hint { font: 500 12px var(--label); letter-spacing: .08em; color: #a8957a; text-align: right; }
.help-card .keys-card { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0 0 14px; font: 500 13px var(--label); }
/* conductor mode */
.boarding { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 14; pointer-events: none; }
body.phase-playing .boarding ~ * {}
.boarding-card .btn-small { font-size: 12px; pointer-events: auto; } /* only the GO button takes clicks: fare tags behind the banner stay clickable */
.boarding-card { pointer-events: none; display: flex; align-items: center; gap: 12px; padding: 5px 6px 5px 14px; background: var(--orange); color: var(--ink); border: 3px solid var(--ink); border-radius: 5px; box-shadow: 5px 5px 0 var(--ink); animation: rise .2s; white-space: nowrap; }
.boarding-title { display: flex; align-items: baseline; gap: 8px; font: 400 16px var(--display); letter-spacing: .05em; }
.boarding-title span:last-child { display: none; }
.boarding-bn { font: 400 24px var(--bn-hand); color: var(--cream); text-shadow: 2px 2px 0 var(--ink); }
.boarding-info { font: 600 12px var(--label); letter-spacing: .04em; }
.boarding-info b { font: 400 16px var(--display); }

/* modal cards */
.card { position: relative; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 5px; box-shadow: 10px 10px 0 var(--ink); padding: 0 24px 22px; max-width: min(92vw, 760px); max-height: 88vh; overflow: auto; }
.card::before { content: ''; display: block; height: 12px; margin: 0 -24px 16px; background: var(--stripe); border-bottom: 3px solid var(--ink); }
.card h2 { font: 400 34px var(--display); letter-spacing: .03em; margin: 0 0 8px; }
.results-kicker { font: 700 12px var(--bn); letter-spacing: .18em; color: #6b5638; }
.winner { text-align: center; padding: 14px; margin: 10px 0 14px; background: var(--yellow); border: 3px solid var(--ink); border-radius: 4px; box-shadow: 5px 5px 0 var(--ink); }
.winner-label { font: 700 11px var(--label); letter-spacing: .2em; }
.winner-name { font: 400 44px var(--display); letter-spacing: .03em; line-height: 1.05; }
.winner-score { font: 400 30px var(--display); color: var(--green); -webkit-text-stroke: 1px var(--ink); }
.results-table { width: 100%; border-collapse: collapse; font: 600 14px var(--label); }
.results-table th { text-align: left; font: 700 10px var(--label); letter-spacing: .16em; color: #6b5638; border-bottom: 3px solid var(--ink); padding: 6px; }
.results-table td { padding: 8px 6px; border-bottom: 1px dashed #00000040; }
.results-table .r { text-align: right; font-family: var(--mono); }
.results-table .chip { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--ink); margin-right: 8px; vertical-align: -1px; }
.results-actions { display: flex; justify-content: center; margin-top: 16px; }
.waiting { font: 600 13px var(--label); letter-spacing: .1em; color: #6b5638; }
.help-card { max-width: 820px; }
.help-head { display: flex; justify-content: space-between; align-items: flex-start; }
.close-x { width: 36px; height: 36px; border: 3px solid var(--ink); border-radius: 5px; background: var(--yellow); font: 400 18px var(--display); cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 18px; }
.help-block { background: #fff8e8; border: 2px solid var(--ink); border-radius: 4px; padding: 10px 12px; }
.help-block h3 { margin: 0 0 4px; font: 400 18px var(--display); letter-spacing: .04em; }
.help-block p { margin: 0; font: 400 14px/1.45 var(--label); }
#btn-dismiss-help { width: 100%; }
.conn-card { text-align: center; }
.conn-spin { width: 46px; height: 46px; margin: 0 auto 8px; border: 6px solid var(--ink); border-top-color: var(--yellow); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* touch */
.touch-controls { display: none; }
@media (hover: none) and (pointer: coarse) {
  body.phase-playing .touch-controls { display: flex; position: fixed; inset: auto 0 0 0; justify-content: space-between; padding: 0 16px 120px; z-index: 13; pointer-events: none; }
  .touch-left, .touch-right { display: flex; gap: 12px; pointer-events: auto; }
  .touch-right { flex-direction: column; }
  .touch-btn { width: 74px; height: 74px; border: 3px solid var(--ink); border-radius: 50%; background: #ffd43bcc; color: var(--ink); font-size: 26px; box-shadow: 4px 4px 0 var(--ink); }
}
@media (max-width: 1180px) {
  #lobby-overlay { display: block; overflow-y: auto; padding-top: 66px; background: #120c08d0; }
  #lobby-overlay > section { margin-bottom: 18px; }
  .lobby-left { overflow: visible; }
}
@media (max-width: 760px) {
  .brand-bn { display: none; }
  .hud-standings { display: none; }
  .hud-map { transform: scale(.8); transform-origin: bottom left; }
  .hud-speed { transform: scale(.8); transform-origin: bottom right; }
  .hud-bottom { bottom: 150px; }
  .event-feed { width: 200px; }
}
body.phase-lobby .brand-word, body.phase-lobby .brand-bn { display: none; }
body.no-ui #center-banner, body.no-ui .combo, body.no-ui #top-chrome, body.no-ui #lobby-overlay, body.no-ui #hud-overlay, body.no-ui #boarding-overlay, body.no-ui #passenger-tags, body.no-ui #event-feed, body.no-ui #popups { display: none !important; }

@media (max-height: 820px) and (min-width: 1181px) {
  .hero-title { font-size: clamp(54px, 7vw, 84px); }
  .hero-bn { font-size: 26px; margin-top: 2px; }
  .hero-copy { display: none; }
  .permit { padding-bottom: 12px; } .field { margin-bottom: 9px; } .color-swatch { height: 32px; } .pattern-btn { padding: 5px 4px; }
  #lobby-overlay { padding-top: 58px; }
}

body.cockpit-view .hud-bottom { bottom: auto; top: 96px; } /* keep stop prompts off the steering wheel in the cockpit */

/* scrapped: a slim bar at the bottom so the street stays in view while you decide */
.wreck-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 14; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 16px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 6px 6px 0 var(--ink); width: max-content; max-width: min(94vw, 600px); animation: wb-rise .25s; }
@keyframes wb-rise { from { transform: translate(-50%, 12px); opacity: 0; } }
.wb-head { display: flex; align-items: baseline; gap: 10px; }
.wb-bn { font: 400 30px/1 var(--bn-hand); color: var(--red); }
.wb-title { font: 400 22px/1 var(--display); letter-spacing: .04em; }
.wb-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wb-note { font: 500 12px var(--label); color: #6b5a44; text-align: center; max-width: 520px; }
.wb-watch { display: flex; align-items: center; gap: 10px; font: 600 12px var(--label); letter-spacing: .14em; }
.wb-watch b { color: var(--red); letter-spacing: .04em; }
.wb-arrow { width: 30px; height: 26px; border: 2px solid var(--ink); border-radius: 4px; background: var(--yellow); color: var(--ink); font: 400 12px var(--label); cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.wb-arrow:disabled { opacity: .35; cursor: default; }
body.spectating .hud-bottom { display: none; }
body.spectating .lb-item { pointer-events: auto; cursor: pointer; }
body.spectating .lb-item:not(.dead):hover { outline: 2px solid var(--yellow); }

/* depot: shift-length picker and the "shift in progress" panel */
.seg { display: flex; border: 3px solid var(--ink); border-radius: 5px; overflow: hidden; box-shadow: 3px 3px 0 var(--ink); background: var(--cream); }
.seg-btn { min-width: 38px; height: 34px; padding: 0 8px; border: 0; border-left: 2px solid var(--ink); background: var(--cream); font: 400 17px var(--display); color: var(--ink); cursor: pointer; }
.seg-btn:first-child { border-left: 0; }
.seg-btn.active { background: var(--yellow); }
.seg-btn:disabled { cursor: default; color: #6b5a44; }
.seg-btn.active:disabled { color: var(--ink); }
.seg-btn:not(.active):not(:disabled):hover { background: #ffe9a0; }
.running-panel { padding: 14px; border-top: 3px solid var(--ink); background: var(--ink-2); display: flex; flex-direction: column; gap: 9px; align-items: center; text-align: center; }
.running-panel.hidden { display: none; }
.running-head { font: 400 18px var(--display); letter-spacing: .05em; color: var(--yellow); }
.running-head span { color: var(--cream); font-size: 14px; }
.running-sub { font: 500 13px var(--label); color: #c9b896; }