html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #0f0f0f;
}

#app,
#game-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ---- Game screens (HUD, cards, touch controls) ----
   One style everywhere: dark panels with a 2 px gold edge, bold italic text, gold for the
   main action. Colours come from src/config (set as variables in src/ui/mount.ts). */

/* Nothing in the game is text to select, and nothing zooms or scrolls the page. */
html,
body {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font:
    italic 800 14px system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  color: #fff;
}

#app {
  position: relative;
}

/* Hidden until src/main.ts has set the page's layout (ad columns), so the game area
   never visibly moves into place. */
body:not(.layout-ready) #app {
  visibility: hidden;
}

#ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#ui [hidden] {
  display: none !important;
}

/* ---- Buttons ---- */

button {
  font: inherit;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn,
.tbtn {
  color: #fff;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 10px;
  min-height: 44px;
  padding: 0 16px;
}

.btn.primary,
.btn[aria-pressed='true'],
.tbtn.pressed {
  background: var(--gold);
  color: var(--panel);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn:focus-visible,
.tbtn:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}

.btn.wide {
  min-width: 70%;
}

.btn.small {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.btn.chip {
  padding: 0 12px;
}

/* ---- Readouts: a small gold label over a big value ---- */

.readout {
  display: flex;
  flex-direction: column;
  background: var(--hud-panel);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 3px 9px 4px;
  line-height: 1.1;
}

.readout small {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 1px;
}

.readout .value {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.faster {
  color: var(--faster);
}

.slower {
  color: var(--slower);
}

.record {
  color: var(--record);
}

/* ---- HUD ---- */

.hud {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 8px;
  right: 8px;
}

/* Mouse and keyboard screens are wide: keep the HUD in a centred band over the track
   instead of out at the window's corners. Phones keep it edge to edge. */
@media (pointer: fine) {
  .hud {
    /* Half of AD_LAYOUT.desktopHudBand (src/config/ads.ts). */
    left: max(8px, calc(50% - 320px));
    right: max(8px, calc(50% - 320px));
  }
}

.readouts {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.quit {
  margin-left: auto;
}

/* Mute: a speaker icon, in the home menu and before Quit in the race. */
.btn.mute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.hud-mute {
  margin-left: auto;
}

.hud-mute + .quit {
  margin-left: 0;
}

/* Sector chips under the readouts: grey ahead, gold edge for the one being driven, filled
   with the split's colour once done. */
.sectors {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.sector-chip {
  width: 40px;
  padding: 2px 0;
  text-align: center;
  font-size: 12px;
  border-radius: 6px;
  border: 2px solid #444;
  background: var(--hud-panel);
  color: #888;
}

.sector-chip.current {
  border-color: var(--gold);
  color: var(--gold);
}

.sector-chip.faster,
.sector-chip.slower,
.sector-chip.record {
  color: #1a1a1f;
}

.sector-chip.faster {
  border-color: var(--faster);
  background: var(--faster);
}

.sector-chip.slower {
  border-color: var(--slower);
  background: var(--slower);
}

.sector-chip.record {
  border-color: var(--record);
  background: var(--record);
}

/* ---- Start lights (top centre, below the readouts) ---- */

.start {
  position: absolute;
  top: calc(96px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.lights {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: var(--hud-panel);
  border: 2px solid var(--border);
  border-radius: 12px;
}

.light {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  background: #0b0b0d;
  border-radius: 8px;
}

.bulb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2a1414;
  border: 2px solid #000;
}

.light.on .bulb {
  background: #ff2a2a;
  box-shadow: 0 0 10px rgba(255, 42, 42, 0.7);
}

@media (min-width: 700px) {
  .bulb {
    width: 30px;
    height: 30px;
  }
}

.notice {
  background: var(--hud-panel);
  border: 2px solid currentColor;
  border-radius: 10px;
  padding: 4px 12px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* ---- Cards ---- */

/* The layer scrolls when a card is taller than the screen; auto margins centre the card
   without hiding its top. */
.cards {
  position: absolute;
  inset: 0;
  display: flex;
  background: rgba(10, 10, 14, 0.78);
  padding: 12px;
  overflow: auto;
  pointer-events: auto;
}

.card {
  margin: auto;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.card h1 {
  margin: 0;
  font-size: 26px;
  color: var(--gold);
}

.card .logo {
  display: block;
  width: 84%;
  max-width: 320px;
  height: auto;
}

.card p {
  margin: 0;
}

.card .sub {
  color: var(--cream);
  opacity: 0.8;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
}

.card .sub.slower {
  color: var(--slower);
  opacity: 1;
}

.card .sub.quiet {
  font-size: 11px;
  opacity: 0.55;
  margin-top: -4px;
}

.card .label {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.card .note {
  color: var(--gold);
  line-height: 1.35;
}

.card .big-time {
  font-size: 34px;
  font-variant-numeric: tabular-nums;
}

.delta {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.row {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.readout.sector {
  align-items: center;
  min-width: 72px;
}

.laps {
  width: 86%;
  font-variant-numeric: tabular-nums;
  background: #111114;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 6px 4px;
}

.lap-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 8px;
}

.lap-row .best {
  color: var(--gold);
}

.lap-row.dnf {
  color: var(--slower);
}

/* ---- Menu screens (Stage 5) ---- */

.card .logo {
  image-rendering: auto;
}

.card .map {
  width: 100%;
  max-width: 300px;
  height: 110px;
  border-radius: 10px;
  background: #111114;
  border: 2px solid #333;
  box-sizing: border-box;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
}

.stats .readout {
  align-items: center;
  min-width: 0;
}

.stats .value {
  font-size: 16px;
}

.dots {
  letter-spacing: 3px;
  color: var(--gold);
}

.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}

.tiles .btn {
  width: 100%;
}

.row.spread {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.board {
  width: 100%;
  font-variant-numeric: tabular-nums;
  background: #111114;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  box-sizing: border-box;
}

.board .r {
  display: grid;
  grid-template-columns: 34px 1fr auto 52px;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 6px;
  text-align: left;
  border: 0;
  border-radius: 6px;
  align-items: center;
  background: transparent;
  color: #fff;
}

.board .r:hover {
  background: #22222a;
}

.board .r.me {
  background: var(--gold);
  color: var(--panel);
}

.board .r small {
  font-size: 10px;
  opacity: 0.7;
  font-weight: 600;
  text-align: right;
}

.board .gap {
  text-align: center;
  opacity: 0.5;
}

.who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag {
  opacity: 0.55;
  font-weight: 600;
}

.swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
}

.sw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 72px;
  padding: 8px 2px;
  border: 2px solid #444;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font-size: 11px;
}

.sw.on {
  border-color: var(--gold);
  background: #2a2a20;
}

.sw.locked {
  opacity: 0.45;
  cursor: default;
}

.sw i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #000;
}

.sw i.galaxy {
  background: conic-gradient(#a0f, #0af, #0f8, #fd0, #f0a, #a0f) !important;
}

.sw small {
  font-weight: 600;
  opacity: 0.8;
}

.car-preview {
  height: 120px;
  width: auto;
}

.toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 4px 2px;
  border: 0;
  border-bottom: 1px solid #2c2c33;
  background: transparent;
  color: #fff;
  text-align: left;
}

.toggle small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.6;
}

.switch {
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: #444;
  position: relative;
}

.toggle[aria-checked='true'] .switch {
  background: var(--gold);
}

.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

.toggle[aria-checked='true'] .switch::after {
  left: 23px;
}

#ui input {
  pointer-events: auto;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

#ui input[type='range'] {
  width: 100%;
  min-height: 44px;
  accent-color: var(--gold);
}

.field {
  width: 100%;
  display: flex;
  gap: 6px;
}

.field input {
  flex: 1;
  min-width: 0;
  font: inherit;
  /* 16 px stops iPhones zooming in on focus. */
  font-size: 16px;
  border-radius: 10px;
  border: 2px solid #555;
  background: #111114;
  color: #fff;
  padding: 0 10px;
  min-height: 44px;
}

.field input:disabled {
  opacity: 0.6;
}

.btn.danger {
  border-color: var(--slower);
  color: var(--slower);
}

pre.share {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  white-space: pre-wrap;
  background: #111114;
  border-radius: 10px;
  padding: 8px;
  font:
    600 12px ui-monospace,
    monospace;
  margin: 0;
  -webkit-user-select: text;
  user-select: text;
}

/* ---- Touch controls ---- */

.touch {
  position: absolute;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  /* Kept clear of the screen's left and right edges: iPhone browsers hold back a touch
     that starts near an edge (it may be a back/forward swipe), which delayed Go. */
  padding: 0 max(28px, env(safe-area-inset-right, 0px)) 0 max(28px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}

.touch div {
  display: flex;
  gap: 10px;
}

.tbtn {
  width: 68px;
  height: 68px;
  padding: 0;
  font-size: 24px;
  font-style: normal;
  opacity: 0.88;
  touch-action: none;
  /* The touch buttons are plain elements (see touchControls.ts), so they get the button
     look here: centred label, border inside the size, and they take touches. */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tbtn.pressed {
  opacity: 1;
}

/* Very narrow phones (320 px): smaller buttons so the two pairs fit, still clear of the edges. */
@media (max-width: 359px) {
  .touch {
    padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0
      max(20px, env(safe-area-inset-left, 0px));
  }

  .touch div {
    gap: 6px;
  }

  .tbtn {
    width: 60px;
    height: 60px;
  }
}

.hud *,
.touch *,
.start {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* The bot check before a new player's first lap (Turnstile), and the no-server notice. */
.bot-check {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}

.bot-check-box,
.offline {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.offline {
  margin: 40px auto;
  max-width: 420px;
  box-sizing: border-box;
}

/* Link to a plain page such as the privacy notice. */
.card .page-link {
  display: block;
  margin: 12px 0 4px;
  color: var(--gold);
  font-size: 14px;
  text-align: center;
}

/* ---- Advertising (spec 26.3) ----
   The ad sits outside the game's layers. Its box has the ad's size before the ad loads, so
   nothing moves when it arrives. Sizes come from src/config/ads.ts (set in src/ui/adSlot.ts). */

.ad {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.ad[hidden],
.ad [hidden] {
  display: none !important;
}

/* Collapsed during a run: still there, unchanged, but out of sight and out of reach. */
.ad.collapsed {
  visibility: hidden;
}

.ad-unit {
  width: var(--ad-w);
  height: var(--ad-h);
  overflow: hidden;
  pointer-events: auto;
}

.ad-hide {
  pointer-events: auto;
  color: var(--cream);
  background: none;
  border: 0;
  height: var(--ad-hide-row);
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.8;
}

/* Phone: a full-width strip across the top in the panel colour, the 320 x 50 ad centred in
   it and "× Hide ad" under the ad. It lies over the top of the (dimmed) game on menus and is
   hidden during runs, so the race is full screen and the game never resizes. */
:root {
  --strip-top: calc(env(safe-area-inset-top, 0px) + var(--ad-h) + var(--ad-hide-row));
}

.ad-top {
  top: 0;
  left: 0;
  right: 0;
  padding-top: env(safe-area-inset-top, 0px);
  align-items: center;
  background: var(--panel);
  box-shadow: inset 0 -2px 0 var(--border);
}

.ad-top .ad-hide {
  align-self: flex-end;
  margin-right: 8px;
}

/* The menus start below the strip. */
body.ad-strip-on .cards {
  padding-top: calc(12px + var(--strip-top) + var(--strip-gap));
}

/* Desktop: a column beside the game, or one on each side of it on wide windows. The scenery
   runs up to them; the HUD, menus and car sit mid-screen, at least 150 px from them
   (src/services/adPolicy.ts minGameWidth). */
body.ads-desktop #app {
  width: calc(100% - var(--ad-w) - var(--ad-edge));
}

body.ads-desktop.ads-two #app {
  margin-left: calc(var(--ad-w) + var(--ad-edge));
  width: calc(100% - 2 * (var(--ad-w) + var(--ad-edge)));
}

.ad-desktop {
  top: 50%;
  transform: translateY(-50%);
}

.ad-right {
  right: var(--ad-edge);
}

.ad-left {
  left: var(--ad-edge);
  align-items: flex-start;
}

/* Stand-in ads (?ads=fake) for trying the layout without AdSense. */
.fake-ad {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #d8d8d8;
  border: 1px dashed #777;
  color: #333;
  font-size: 11px;
  font-style: normal;
}