:root {
  --ink: #fff;
  --shadow: 0 2px 0 #0008, 0 0 8px #0006;
  --panel: #0b1a2acc;
  --accent: #ffcf3f;
  --font: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #bcd7ea;
  color: var(--ink);
  font: 16px/1.3 var(--font);
  user-select: none;
}

#view {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

[hidden] { display: none !important; }

#race {
  position: fixed;
  inset: 0;
  pointer-events: none;
  text-shadow: var(--shadow);
  font-variant-numeric: tabular-nums;
}

.top-left { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; }
.big { font-size: 40px; font-weight: 800; letter-spacing: 0.02em; }

.gauges {
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom));
  right: 20px;
  display: flex;
  align-items: flex-end;
  gap: 28px;
}
.gauge { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.gauge .value { font-size: clamp(44px, 9vw, 76px); font-weight: 900; letter-spacing: 0.01em; }
.gauge .unit { margin-top: 4px; font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.9; }
#grade { font-size: clamp(34px, 7vw, 56px); transition: color 0.2s; }
#grade.uphill { color: #ffb347; }
#grade.downhill { color: #8fd3ff; }
/* Steep: flashes red, so a car slowing on a climb has its reason on screen. */
.gauge.steep #grade { color: #ff4a3d; animation: steep 0.45s ease-in-out infinite alternate; }
.gauge.steep .unit { color: #ff8a80; }
@keyframes steep {
  from { color: #ff4a3d; text-shadow: 0 0 10px #ff2a1f, 0 2px 0 #0008; }
  to { color: #fff2ef; text-shadow: 0 0 2px #ff2a1f66, 0 2px 0 #0008; }
}
@media (prefers-reduced-motion: reduce) { .gauge.steep #grade { animation: none; } }
#time { font-size: 24px; }
#laps { margin: 6px 0 0; font: 15px/1.4 var(--font); opacity: 0.9; }

#banner {
  position: fixed;
  top: 28%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(48px, 12vw, 120px);
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 4px 0 #a33a00, var(--shadow);
  pointer-events: none;
}

#panel {
  position: fixed;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(460px, calc(100vw - 32px));
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--panel);
  backdrop-filter: blur(6px);
  text-align: center;
}
#panel h1 { margin: 0 0 6px; font-size: 28px; }
#panel p { margin: 6px 0; }
#panel .tagline { opacity: 0.85; font-style: italic; }
#panel .hints { margin-top: 12px; font-size: 14px; color: var(--accent); }
#panel .record, #panel .total { font-variant-numeric: tabular-nums; }
#panel.error h1 { color: #ff8a80; }

.stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 12px 0;
  text-align: left;
  font-size: 14px;
}
.stats dd { margin: 0; align-self: center; }
.bar {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) calc(var(--fill) * 100%), #ffffff26 0);
}

.results {
  margin: 8px auto;
  padding-left: 1.6em;
  width: fit-content;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.results .best { color: var(--accent); }

#credits {
  position: fixed;
  left: 8px;
  bottom: 4px;
  font-size: 11px;
  opacity: 0.8;
  text-shadow: 0 1px 2px #000a;
  pointer-events: none;
}

/* --- warp and garage --- */

#flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #fff8e6 45%, #ffd6f2 75%, #c8e8ff 100%);
  z-index: 5;
}

#warp-fx {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34%, #0008 62%, #000c 80%),
    conic-gradient(from 0deg, #ff3f8e, #ffb83f, #fff23f, #3fff9a, #3fd0ff, #8a5cff, #ff3f8e);
  mix-blend-mode: screen;
  animation: warp-spin 1.6s linear infinite;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 30%, #000 70%);
  mask: radial-gradient(circle at 50% 50%, transparent 0 30%, #000 70%);
  z-index: 4;
}
@keyframes warp-spin { to { transform: rotate(1turn); } }

#panel .badge {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-shadow: 0 0 10px #ff9f3f;
}
#panel .warning { color: #ffb0a0; font-size: 14px; }

.bar.compare {
  position: relative;
}
.bar.compare::after {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: calc(var(--base) * 100%);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  border-radius: 1px;
  opacity: 0.8;
}
.bar.up { background: linear-gradient(90deg, #6fe08a calc(var(--fill) * 100%), #ffffff26 0); }
.bar.down { background: linear-gradient(90deg, #ff8a6a calc(var(--fill) * 100%), #ffffff26 0); }

#panel.garage {
  left: max(20px, env(safe-area-inset-left));
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: min(420px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  text-align: left;
  background: linear-gradient(160deg, #3a2414e6, #1c120ae6);
  border: 2px solid #8a5a2e;
  box-shadow: 0 0 0 4px #1c120a99, 0 18px 40px #0008, inset 0 0 30px #ffb34722;
}
#panel.garage h1 {
  font-size: 30px;
  color: #ffcf7a;
  text-shadow: 0 0 14px #ff8a3f, 0 2px 0 #5a2a10;
  letter-spacing: 0.04em;
}
#panel.garage .tagline { margin-top: 0; font-size: 13px; }
#panel .car-name { font-size: 19px; font-weight: 800; color: #fff; margin: 8px 0 10px; }

.parts {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
}
.parts li {
  display: grid;
  grid-template-columns: 6.2em 1.6em 1fr 1.6em 2.6em;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.parts li .label { opacity: 0.8; }
.parts li .value { text-align: center; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parts li .count { font-size: 11px; opacity: 0.5; text-align: right; }
.parts li.selected {
  background: linear-gradient(90deg, #ffb34740, #ffb34710);
  box-shadow: inset 3px 0 0 var(--accent);
}
.parts li.selected .label { opacity: 1; color: var(--accent); }
.parts .chip {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: -0.05em;
  box-shadow: 0 0 0 1.5px #fff8;
}
#panel button {
  font: inherit;
  color: var(--ink);
  background: #ffffff1a;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
#panel button:hover { background: #ffffff33; }
.parts .arrow { padding: 2px 0; font-size: 11px; visibility: hidden; }
.parts li.selected .arrow, .parts li:hover .arrow { visibility: visible; }
#panel .buttons { display: flex; gap: 10px; margin-top: 12px; }
#panel .buttons button { flex: 1; padding: 9px; font-weight: 700; }
#panel .buttons .primary { background: var(--accent); color: #3a2010; }
#panel .buttons .primary:hover { background: #ffe07a; }
#panel.garage .hints { text-align: center; }

#banner small {
  display: block;
  font-size: clamp(18px, 3vw, 28px);
  color: #fff;
  text-shadow: var(--shadow);
}

/* --- multiplayer --- */

#panel button:disabled { opacity: 0.55; cursor: default; }
#panel button:disabled:hover { background: #ffffff1a; }
#panel .buttons .primary:disabled { background: #ffffff26; color: var(--ink); }
#panel .buttons .waiting { font-weight: 400; font-style: italic; }
#panel h1 .car-title { display: inline-flex; align-items: center; gap: 14px; }
#panel h1 .arrow { padding: 0 8px; font-size: 18px; background: none; }
#panel h1 .arrow:hover { color: var(--accent); background: none; }

.race-form { display: grid; gap: 10px; margin-top: 12px; text-align: left; }
.field { display: grid; gap: 4px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.95; }
.field input {
  font: 700 22px var(--font);
  color: var(--ink);
  background: #ffffff14;
  border: 2px solid #ffffff40;
  border-radius: 8px;
  padding: 8px 12px;
  outline: none;
  user-select: text;
  text-transform: none;
  letter-spacing: 0.02em;
}
.field input:focus { border-color: var(--accent); background: #ffffff1f; }
.field input.code { font-size: 34px; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
.field input::placeholder { color: #ffffff40; }
#panel .race-form .buttons { margin-top: 4px; }

#panel.lobby {
  left: max(20px, env(safe-area-inset-left));
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: min(400px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.code-box {
  display: grid;
  justify-items: center;
  padding: 10px 0 12px;
  margin: 4px 0 6px;
  border-radius: 12px;
  background: linear-gradient(160deg, #ffcf3f26, #ffcf3f0a);
  box-shadow: inset 0 0 0 2px #ffcf3f55;
}
.code-box .label, .code-box .state { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.code-box strong {
  font-size: clamp(44px, 9vw, 64px);
  line-height: 1.05;
  color: var(--accent);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 #a33a00, var(--shadow);
}
.code-box.closed { background: #ffffff0d; box-shadow: inset 0 0 0 2px #ffffff26; }
.code-box.closed strong { color: #ffffff80; text-shadow: none; }
#panel .link { margin: 0 0 8px; }
#panel .share { padding: 6px 16px; font-weight: 700; }

.players { list-style: none; margin: 8px 0; padding: 0; text-align: left; counter-reset: slot; }
.players li {
  display: grid;
  grid-template-columns: 1.6em auto auto 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  counter-increment: slot;
}
.players li::before { content: counter(slot); opacity: 0.6; font-size: 13px; }
.players li.you { background: #ffcf3f1f; }
.players .name { font-weight: 800; }
.players .host { font-size: 10px; letter-spacing: 0.1em; padding: 1px 5px; border-radius: 4px; background: var(--accent); color: #3a2010; }
.players .car { font-size: 13px; opacity: 0.75; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; grid-column: 4; }
.players .net { font-size: 13px; opacity: 0.8; cursor: help; }
.players .kick { padding: 0 6px; font-size: 12px; }
.players li.speaking { box-shadow: inset 0 0 0 2px var(--accent); animation: talking-row 0.6s ease-in-out infinite alternate; }
.players li.speaking .name { color: var(--accent); }
.players li.speaking .name::after { content: " 🔊"; }
@keyframes talking-row { to { box-shadow: inset 0 0 0 2px #ffcf3f55; } }

#panel .car-pick, #panel .laps-pick { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0; }
#panel .car-pick span { font-weight: 800; min-width: 10em; }
#panel .car-pick .arrow, #panel .laps-pick .arrow { padding: 2px 8px; font-size: 12px; }
#panel .laps-pick strong { min-width: 1.2em; font-size: 18px; }
#panel .picker { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0; }
#panel .picker .label { opacity: 0.8; }
#panel .picker .value { font-weight: 800; min-width: 8.5em; }
#panel .picker .arrow { padding: 2px 8px; font-size: 12px; }
#panel .assist-box { margin: 4px 0 8px; }
#panel .assist-box .picker { margin: 0; }
#panel .assist-pick .assist-badge { font-size: 12px; }
#panel .assist-hint { margin: 2px 0 0; font-size: 12px; opacity: 0.75; }

.race-results li { display: flex; justify-content: space-between; gap: 24px; min-width: 15em; }
.race-results li.you { color: var(--accent); }
.race-results .status { opacity: 0.7; font-style: italic; }

#standings {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 17px;
  line-height: 1.45;
}
#standings li { display: flex; gap: 8px; }
#standings .place { width: 1.2em; text-align: right; opacity: 0.75; }
#standings li.you { color: var(--accent); font-weight: 800; }

#standings .gap { margin-left: auto; padding-left: 10px; font-size: 0.85em; opacity: 0.85; }

/* The map of the loop (ui/minimap.js), where there's room for it. */
#map {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(26px, env(safe-area-inset-bottom));
  width: clamp(150px, 17vw, 220px);
  aspect-ratio: 1;
  padding: 6px;
  border-radius: 14px;
  background: #0b1a2a66;
}
#map svg { display: block; width: 100%; height: 100%; overflow: visible; }
#map polygon { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#map .road-edge { stroke: #0b1a2acc; stroke-width: 7px; }
#map .road { stroke: #e9eef2; stroke-width: 3.5px; }
#map .start { stroke: var(--accent); stroke-width: 3px; vector-effect: non-scaling-stroke; }
#map circle { fill: #fff; stroke: #0b1a2a; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
#map circle.you { fill: var(--accent); stroke-width: 2px; }
@media (max-width: 899px), (max-height: 599px) { #map { display: none; } }
.touch #map { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 104px); }

/* Karts close behind (ui/behind.js): arrows along the bottom of the screen. */
#behind { position: absolute; inset: auto 0 0 0; height: 0; }
#behind .arrow {
  --row: 0;
  position: absolute;
  bottom: calc(max(62px, env(safe-area-inset-bottom) + 44px) + var(--row) * 34px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
#behind .arrow span { padding: 2px 8px; border-radius: 6px; background: #0b1a2a99; }
#behind .arrow::after {
  content: "";
  margin-top: 2px;
  border: 9px solid transparent;
  border-top: 11px solid var(--accent);
  border-bottom: 0;
  filter: drop-shadow(0 1px 1px #0008);
}

#tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.tag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 2px 8px;
  border-radius: 6px;
  background: #0b1a2a99;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000a;
  will-change: transform;
}
.tag.speaking {
  background: #0b1a2acc;
  color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 14px #ffcf3fcc;
  animation: talking 0.6s ease-in-out infinite alternate;
}
.tag.speaking .name::before { content: "🔊 "; }
.tag.ai { background: #0b1a2a66; font-weight: 600; }
@keyframes talking { to { box-shadow: 0 0 0 2px var(--accent), 0 0 4px #ffcf3f66; } }
#standings .speaking { font-size: 0.85em; }

/* The steering assist's badge (ui/badge.js): a soft, glowing pill. Over our
   own car it floats on its own and glows brighter while the assist works
   (--help, 0..1). */
.assist-badge {
  --tint: #4fd1c5;
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tint) 28%, #0b1a2acc);
  box-shadow: 0 0 0 1.5px var(--tint);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.assist-badge.assist-copilot { --tint: #b18cff; }
.assist-badge.compact { padding: 2px 4px; line-height: 0; }
.wheel-icon { width: 1.15em; height: 1.15em; margin-right: 0.35em; vertical-align: -0.2em; }
.compact .wheel-icon { width: 12px; height: 12px; margin: 0; vertical-align: 0; }
.tag.assisted { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tag.assisted:not(:has(.name)) { padding: 0; background: none; }
.tag.self { --help: 0; }
.tag.self .assist-badge {
  font-size: 12px;
  box-shadow: 0 0 0 1.5px var(--tint), 0 0 calc(4px + var(--help) * 16px) calc(var(--help) * 3px) var(--tint);
  animation: assist-float 1.6s ease-in-out infinite alternate;
}
@keyframes assist-float { from { translate: 0 0; } to { translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .tag.self .assist-badge { animation: none; } }
.players .assist-badge, #standings .assist-badge, .race-results .assist-badge { margin-left: 6px; }

#talk {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--panel);
  font-weight: 800;
  pointer-events: none;
  z-index: 6;
}
#talk.muted, #talk.off { opacity: 0.85; }
#corner {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
  z-index: 7;
}
#corner button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  font-size: 20px;
  line-height: 40px;
  cursor: pointer;
}
#sound[aria-pressed="true"], #music[aria-pressed="true"] { box-shadow: 0 0 0 2px #ff6b5b; }
#music[aria-pressed="true"] { opacity: 0.55; }
#fullscreen[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
#panel .voice-pick, #panel .grid-pick { display: flex; align-items: center; gap: 10px; }
#panel .voice-pick button, #panel .grid-pick button { padding: 2px 10px; font-size: 13px; }
#talk.talking { color: var(--accent); box-shadow: 0 0 0 2px var(--accent); animation: talking 0.6s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .tag.speaking, #talk.talking, .players li.speaking { animation: none; } }

#toast {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--panel);
  backdrop-filter: blur(6px);
  font-size: 15px;
  text-align: center;
  user-select: text;
  z-index: 6;
}

/* Tablets and phones (html.touch, set by main.js): thumb buttons, no
   keyboard hints, the gauges up out of the gas button's way. */
#pads { position: fixed; inset: auto 0 0 0; pointer-events: none; z-index: 5; }
#pads button {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  font: 800 13px/1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#pads .icon { font-size: 34px; line-height: 1; margin-bottom: 2px; }
#gas {
  right: max(22px, env(safe-area-inset-right));
  width: 128px;
  height: 128px;
  background: radial-gradient(circle at 50% 35%, #ffe27a, #f0a81c 70%);
  box-shadow: 0 6px 0 #a86a00, 0 8px 18px #0006;
  color: #4a2a00;
  transition: transform 0.06s, box-shadow 0.06s;
}
#gas.held { transform: translateY(5px) scale(0.97); box-shadow: 0 1px 0 #a86a00, 0 3px 10px #0006; }
#talk-pad {
  left: max(22px, env(safe-area-inset-left));
  width: 92px;
  height: 92px;
  background: var(--panel);
  box-shadow: 0 0 0 2px #fff6;
}
#talk-pad .icon { font-size: 28px; }
#talk-pad.held { background: #2a4a2acc; box-shadow: 0 0 0 3px var(--accent), 0 0 16px var(--accent); }
.touch #panel .hints { display: none; }
.touch .gauges { bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 52px); right: max(16px, env(safe-area-inset-right)); }
.touch .gauge .value { font-size: clamp(32px, 6vw, 52px); }
.touch #grade { font-size: clamp(26px, 5vw, 40px); }
.touch #credits { left: 50%; transform: translateX(-50%); text-align: center; }
.touch #talk { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 110px); }
.touch #view { touch-action: none; } /* no pinch zoom or scrolling the page */
.touch #panel button { touch-action: manipulation; }

/* Held upright: ask for landscape. */
#rotate { display: none; }
@media (orientation: portrait) {
  .touch #rotate {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    background: #0b1a2af2;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
  }
  .touch #rotate .icon { display: block; margin-bottom: 12px; font-size: 64px; }
}