:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --accent: #35e0ff;
  --ink: #fff;
  --panel: rgba(18, 16, 14, 0.72);
  font-family: system-ui, -apple-system, "PingFang HK", "Noto Sans HK", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a1613; color: var(--ink); }
body { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }

button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
.hud-top {
  position: absolute; top: calc(10px + var(--sat)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center;
}
.pill {
  background: var(--panel); border-radius: 12px; padding: 6px 12px;
  display: flex; flex-direction: column; align-items: center; font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 16px; min-width: 64px;
}
.pill.big { font-size: 22px; padding: 8px 16px; }
.pill .lbl { font-size: 10px; opacity: 0.7; font-weight: 600; letter-spacing: 0.04em; }

.hud-speed {
  position: absolute; bottom: calc(14px + var(--sab)); left: 50%; transform: translateX(-50%);
  font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 2px 6px #000a;
}
.hud-speed small { font-size: 12px; margin-left: 4px; opacity: 0.8; }

.steer-bar {
  position: absolute; bottom: calc(60px + var(--sab)); left: 50%; transform: translateX(-50%);
  width: 26vw; max-width: 220px; height: 6px; background: #ffffff33; border-radius: 3px;
}
#steer-dot {
  position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 6px #000a;
}

.hud-buttons {
  position: absolute; top: calc(10px + var(--sat)); left: calc(10px + var(--sal));
  display: flex; gap: 6px; pointer-events: auto;
}
.hud-buttons button {
  background: var(--panel); border: 1px solid #ffffff22; border-radius: 10px;
  min-width: 44px; height: 40px; padding: 0 10px; font-size: 17px;
}
.tilt-only { display: none; }
body.touch:not(.mode-stick) .tilt-only { display: inline-block; }

/* ---------- Touch controls ---------- */
#touch { display: none; }
body.touch #touch { display: block; }

#stick-zone {
  position: absolute; left: 0; top: 70px; bottom: 0; width: 45vw; pointer-events: auto; display: none;
}
body.touch.mode-stick #stick-zone { display: block; }
.stick-hint {
  position: absolute; left: calc(24px + var(--sal)); bottom: calc(24px + var(--sab));
  font-size: 13px; opacity: 0.55;
}
#stick-base {
  position: absolute; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%;
  border: 2px solid #ffffff55; background: #ffffff14; display: none;
}
#stick-base.show { display: block; }
#stick-knob {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border-radius: 50%;
  background: #ffffffb0; transform: translate(-50%, -50%);
}

.tbtn {
  position: absolute; pointer-events: auto; border: 3px solid #ffffff55; color: #fff; font-weight: 800;
  text-shadow: 0 1px 3px #0008; touch-action: none;
}
.tbtn.active { filter: brightness(1.35); transform: scale(0.95); border-color: #fff; }
.tbtn.gas {
  right: calc(18px + var(--sar)); bottom: calc(18px + var(--sab));
  width: 26vh; height: 26vh; min-width: 96px; min-height: 96px; border-radius: 50%;
  background: #2fbf4fbb; font-size: 26px;
}
.tbtn.brake {
  right: calc(18px + var(--sar) + max(26vh, 96px) + 14px); bottom: calc(18px + var(--sab));
  width: 20vh; height: 20vh; min-width: 76px; min-height: 76px; border-radius: 50%;
  background: #e0453acc; font-size: 18px;
}
.tbtn.hb {
  right: calc(18px + var(--sar)); bottom: calc(18px + var(--sab) + max(26vh, 96px) + 12px);
  width: max(26vh, 96px); height: 12vh; min-height: 44px; border-radius: 14px;
  background: #f0a020bb; font-size: 16px;
}

/* ---------- Overlays ---------- */
.overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #0006, #000b); padding: 16px;
}
.card {
  background: #1d1916ee; border: 1px solid #ffffff1c; border-radius: 18px; padding: 22px 24px;
  width: min(440px, 100%); max-height: 100%; overflow: auto; text-align: center;
  box-shadow: 0 20px 60px #000a;
}
h1 { margin: 0 0 4px; font-size: 30px; letter-spacing: 0.02em; color: var(--accent); }
h2 { margin: 0 0 12px; }
.sub { margin: 0 0 14px; opacity: 0.85; }
.label { margin: 8px 0 6px; font-weight: 700; font-size: 14px; opacity: 0.8; }
.hint { font-size: 13px; opacity: 0.7; line-height: 1.5; margin: 8px 0; }
.msg { font-size: 13px; color: #ffb4a8; min-height: 1em; margin: 8px 0 0; }
.bests { margin: 12px 0; font-size: 14px; opacity: 0.9; font-variant-numeric: tabular-nums; }

.seg { display: inline-flex; background: #ffffff10; border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { background: none; border: 0; padding: 10px 16px; border-radius: 9px; font-size: 16px; }
.seg button.on { background: var(--accent); color: #062a33; font-weight: 800; }
.check { display: block; margin: 10px 0 0; font-size: 14px; }

.card button { display: block; width: 100%; margin-top: 10px; padding: 12px; border-radius: 12px;
  border: 1px solid #ffffff2a; background: #ffffff12; font-size: 16px; }
.card .seg button { display: inline-block; width: auto; margin: 0; border: 0; }
.card button.primary { background: var(--accent); color: #062a33; border: 0; font-weight: 800; font-size: 18px; }
.card button:disabled { opacity: 0.5; }

.touch-only { display: none; }
body.touch .touch-only { display: block; }
body.touch .desktop-only { display: none; }

.total { font-size: 28px; font-weight: 800; margin: 6px 0; font-variant-numeric: tabular-nums; }
#fin-laps { list-style: none; padding: 0; margin: 8px 0; font-variant-numeric: tabular-nums; }
#fin-laps li { padding: 3px 0; }

/* ---------- Big text ---------- */
#countdown, #flash {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(0.8);
  font-size: 96px; font-weight: 900; color: #fff; text-shadow: 0 6px 24px #000c;
  opacity: 0; transition: opacity 0.15s, transform 0.15s; pointer-events: none;
}
#flash { font-size: 54px; color: var(--accent); }
#countdown.show, #flash.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#toast { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 13px; opacity: 0.8; pointer-events: none; }

#portrait-hint {
  display: none; position: fixed; bottom: calc(110px + var(--sab)); left: 50%; transform: translateX(-50%);
  background: var(--panel); padding: 6px 12px; border-radius: 10px; font-size: 13px; pointer-events: none;
}
@media (orientation: portrait) and (pointer: coarse) {
  #portrait-hint { display: block; }
}

/* ---------- race positions & minimap ---------- */
#minimap {
  position: absolute; left: calc(10px + var(--sal)); bottom: calc(12px + var(--sab));
  width: 150px; border-radius: 10px; pointer-events: none;
}
body.touch #minimap { left: auto; right: calc(10px + var(--sar)); bottom: auto; top: calc(62px + var(--sat)); width: 110px; }
#pos-list {
  position: absolute; left: calc(10px + var(--sal)); top: calc(60px + var(--sat));
  font-size: 13px; line-height: 1.55; background: var(--panel); border-radius: 10px; padding: 6px 10px;
  pointer-events: none; font-weight: 600;
}
#pos-list:empty { display: none; }
#pos-list .me, #fin-table .me { color: var(--accent); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; border: 1px solid #0006; }
body.touch #pos-list { font-size: 11px; top: calc(58px + var(--sat)); }
#fin-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
#fin-table td { padding: 5px 6px; border-bottom: 1px solid #ffffff14; text-align: left; }
#fin-table td:first-child { width: 24px; font-weight: 800; }
#fin-table td:last-child { text-align: right; }
.seg.wrap { flex-wrap: wrap; justify-content: center; }
.seg + .seg { margin-left: 6px; }
#ai-opts .seg { margin-top: 2px; }
.card .label { margin-top: 12px; }