* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0c10; }
body { font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: #e8ecf0; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; transition: opacity 0.3s; }
#hud.hidden-hud { opacity: 0; }
#hud.cinema #cluster, #hud.cinema #strip, #hud.cinema #haul-panel,
#hud.cinema #dispatch, #hud.cinema #controls-hint { opacity: 0; transition: opacity 0.4s; }

#cluster {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  width: min(860px, 92vw); aspect-ratio: 860 / 240; height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5));
}
#strip {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: min(520px, 72vw); aspect-ratio: 520 / 34; height: auto;
}
#haul-panel {
  position: absolute; top: 12px; right: 14px; text-align: right;
  background: rgba(10,12,16,0.62); padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(130,140,150,0.25); min-width: 190px;
}
#haul-panel .money { font-size: 22px; font-weight: 700; color: #ffd77a; letter-spacing: 0.5px; }
#haul-panel .haul-line { font-size: 12.5px; margin-top: 3px; color: #dfe5ea; }
#haul-panel .haul-line.dim { color: #98a2ac; }

#toast {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%) translateY(-8px);
  text-align: center; opacity: 0; transition: all 0.45s ease; pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-title { font-size: 26px; font-weight: 800; letter-spacing: 3px; text-shadow: 0 2px 10px rgba(0,0,0,0.7); color: #f4ede0; }
.toast-sub { font-size: 14px; color: #cfd6dc; margin-top: 4px; text-shadow: 0 1px 6px rgba(0,0,0,0.8); }

#center-msg {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; font-size: 30px; font-weight: 800; letter-spacing: 4px;
  color: #ffdf9a; text-shadow: 0 2px 14px rgba(0,0,0,0.8); opacity: 0; transition: opacity 0.3s;
}
#center-msg.show { opacity: 1; }
#center-msg .small { display: block; font-size: 15px; font-weight: 400; letter-spacing: 1px; color: #e0e6ea; margin-top: 8px; }

#prompt {
  position: absolute; bottom: 36%; left: 50%; transform: translateX(-50%);
  background: rgba(12,14,18,0.78); border: 1px solid rgba(255,215,122,0.4);
  padding: 10px 18px; border-radius: 10px; font-size: 14.5px; line-height: 1.5;
  text-align: center; opacity: 0; transition: opacity 0.25s;
}
#prompt.show { opacity: 1; }

#dispatch {
  position: absolute; left: 14px; bottom: 16px; max-width: 330px;
  background: rgba(10,14,10,0.75); border: 1px solid rgba(110,190,120,0.35);
  border-radius: 8px; padding: 10px 12px; font-family: 'Courier New', monospace;
  font-size: 13px; line-height: 1.45; color: #cfe8d2;
  opacity: 0; transition: opacity 0.3s; transform-origin: bottom left;
}
#dispatch.show { opacity: 1; }
.cb-from { color: #7fd08a; font-weight: 700; }
.cb-cursor { animation: blink 0.7s infinite; }
@keyframes blink { 50% { opacity: 0; } }

#controls-hint {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: 1px; color: rgba(190,200,210,0.4);
}

.key {
  display: inline-block; background: #2a2f36; border: 1px solid #4a525c;
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 7px; font-size: 11.5px;
  font-family: 'Courier New', monospace; font-weight: 700; color: #e8ecf0; margin: 0 1px;
}

#damage-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(160,30,20,0.55) 100%);
}

#letterbox { position: fixed; inset: 0; pointer-events: none; z-index: 11; }
#letterbox .bar {
  position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height 0.5s ease;
}
#letterbox .bar.top { top: 0; }
#letterbox .bar.bottom { bottom: 0; }
#letterbox.show .bar { height: 9vh; }

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 30; display: flex; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #1a2432 0%, #0a0e15 70%);
  transition: opacity 0.5s; overflow-y: auto;
}
.overlay.gone { opacity: 0; pointer-events: none; }

.title-inner, .pause-inner { text-align: center; max-width: 680px; padding: 30px 20px; margin: auto; }
.title-kicker { letter-spacing: 6px; font-size: 13px; color: #8fa0b0; }
#title h1 {
  font-size: clamp(52px, 11vw, 96px); font-weight: 900; letter-spacing: 8px;
  background: linear-gradient(180deg, #f4e8ce, #d29a52 60%, #9e2b25);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.05; margin: 6px 0 0;
}
.title-sub {
  font-size: clamp(18px, 3.4vw, 26px); letter-spacing: 14px; color: #b9c9d8; margin-top: 2px; font-weight: 300;
}
.title-blurb { margin: 22px auto 8px; font-size: 14.5px; line-height: 1.65; color: #aeb9c4; max-width: 560px; }
#title-stats { font-size: 13px; color: #ffd77a; margin-top: 6px; min-height: 18px; }

#btn-start, #btn-resume {
  margin-top: 20px; font-size: 19px; font-weight: 800; letter-spacing: 3px;
  padding: 14px 44px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #b8402f, #8e2418); color: #ffe9c8;
  border: 1px solid #d8794f; box-shadow: 0 6px 22px rgba(180,60,30,0.35);
  transition: transform 0.12s, box-shadow 0.12s;
}
#btn-start:hover, #btn-resume:hover { transform: translateY(-2px); box-shadow: 0 9px 28px rgba(200,80,40,0.45); }

.settings-row { margin-top: 18px; display: flex; gap: 26px; justify-content: center; font-size: 13px; color: #9fabb6; }
.settings-row label { display: flex; align-items: center; gap: 8px; }
.settings-row select {
  background: #1c232c; color: #e0e6ea; border: 1px solid #3a4450; border-radius: 6px; padding: 4px 8px; font-size: 13px;
}
.settings-row input[type=range] { width: 110px; accent-color: #c86a3a; }

.controls-block { margin: 26px auto 0; max-width: 520px; text-align: left; }
.ctl-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13px; color: #aeb9c4;
  align-items: center;
}
.ctl-grid > div:nth-child(odd) { text-align: right; white-space: nowrap; }

.pause-inner h2 { letter-spacing: 8px; font-size: 34px; color: #f4ede0; }
.pause-tip { margin-top: 18px; font-size: 12px; color: #7a8794; }

/* ---------- loading ---------- */
.loading-inner { text-align: center; width: min(420px, 84vw); }
.loading-logo { font-size: 30px; font-weight: 900; letter-spacing: 5px; color: #f4e8ce; }
.loading-logo span { display: block; font-size: 14px; letter-spacing: 10px; color: #b9c9d8; font-weight: 300; margin-top: 4px; }
.loading-track { margin: 26px auto 12px; height: 6px; background: #232b36; border-radius: 3px; overflow: hidden; }
#loading-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #c86a3a, #ffd77a); transition: width 0.3s; }
#loading-text { font-size: 12.5px; color: #8fa0b0; letter-spacing: 1px; }

/* ---------- touch controls ---------- */
#touch-controls { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.tc {
  position: absolute; pointer-events: auto; user-select: none; -webkit-user-select: none;
  background: rgba(20,24,30,0.55); border: 1px solid rgba(140,150,160,0.4); border-radius: 14px;
  color: #e8ecf0; font-weight: 800; display: flex; align-items: center; justify-content: center;
  font-size: 20px; touch-action: none;
}
.tc.on { background: rgba(200,106,58,0.65); }
.tc-left  { left: 16px;  bottom: 110px; width: 84px; height: 84px; }
.tc-right { left: 112px; bottom: 110px; width: 84px; height: 84px; }
.tc-brake { right: 112px; bottom: 110px; width: 84px; height: 84px; font-size: 14px; }
.tc-gas   { right: 16px; bottom: 110px; width: 84px; height: 110px; font-size: 14px; }
.tc-cam   { right: 16px; top: 90px; width: 64px; height: 44px; font-size: 13px; }
.tc-horn  { right: 90px; top: 90px; width: 64px; height: 44px; font-size: 13px; }

@media (max-width: 900px) {
  #cluster { width: 96vw; bottom: 6px; }
  #dispatch { display: none; }
  #haul-panel { padding: 6px 10px; }
  #haul-panel .money { font-size: 16px; }
  #controls-hint { display: none; }
}