:root {
  --bg: #111318;
  --panel: #1c1f27;
  --panel-2: #262a35;
  --line: #353a47;
  --text: #eef1f6;
  --muted: #a5adbd;
  --accent: #ff5a3c;
  --accent-2: #ffc83d;
  --good: #7ddc4a;
  --bad: #ff4a4a;
  --cyan: #6fe3ff;
  --radius: 10px;
  --hud-h: 44px;
  --header-h: 48px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--accent-2);
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.site-logo {
  font-weight: 800;
  font-size: 20px;
  text-decoration: none;
  color: var(--text);
  letter-spacing: 0.5px;
}

.site-logo span {
  color: var(--accent-2);
  font-weight: 600;
  font-size: 13px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}

.page {
  padding: 8px 8px 40px;
}

/* ---------- Game layout ---------- */

.game-root {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: min(1280px, calc((100vh - var(--header-h) - var(--hud-h) - 24px) * 1.7778));
  max-width: min(1280px, calc((100dvh - var(--header-h) - var(--hud-h) - 24px) * 1.7778));
  min-width: min(100%, 320px);
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 300px;
}

.loading .stage canvas { visibility: hidden; }

.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.hud {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  min-height: var(--hud-h);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.hud-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 800;
  font-size: 18px;
  white-space: nowrap;
}

.hud-item small {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.hud-level {
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
  max-width: 28%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-time small.over {
  color: var(--bad);
}

.hud-time small.under {
  color: var(--good);
}

.nut {
  width: 14px;
  height: 14px;
  align-self: center;
  background: var(--accent-2);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  position: relative;
}

.hud-stunts span {
  color: var(--cyan);
}

.hud-fuel .bar {
  width: 80px;
}

/* The battery reads like a battery: a nub on the right, green when charged,
   amber once the motor starts to sag, red and blinking when flat. */
.hud-battery .bar {
  width: 80px;
  position: relative;
  overflow: visible;
}
.hud-battery .bar::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 25%;
  width: 3px;
  height: 50%;
  border-radius: 0 2px 2px 0;
  background: rgba(255, 255, 255, 0.55);
}
.hud-battery .bar-fill {
  background: #5ee07a;
  border-radius: inherit;
}
.hud-battery.low .bar-fill {
  background: #ffb13c;
}
.hud-fuel.hot .bar-fill {
  background: #e8483a;
}
.hud-battery.flat .bar {
  animation: battery-blink 0.8s steps(2, jump-none) infinite;
  background: rgba(255, 70, 70, 0.45);
}
@keyframes battery-blink {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hud-battery.flat .bar {
    animation: none;
  }
}

.hud-spacer {
  flex: 1;
}

.bar {
  height: 10px;
  background: #0b0c10;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ff8a1f, #ffd166);
  transition: width 0.1s linear;
}

.btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
  transition:
    background 0.12s,
    transform 0.06s;
}

.btn:hover:not(:disabled) {
  background: #313645;
}

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

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

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

.btn-primary {
  background: linear-gradient(180deg, #ff6a45, #e0402a);
  border-color: #ff8a6a;
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #ff7d5c, #e84a33);
}

.btn-icon {
  min-width: 36px;
  padding: 5px 8px;
}

.toast {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  background: rgba(10, 12, 16, 0.85);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 700;
  font-size: 15px;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  z-index: 4;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
}

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

/* src/main.js places the buttons (layoutTouch): over the bottom of the view
   sideways, in a band of their own below it upright, or where the player put
   them in the layout editor. */
.touch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.tbtn {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  width: 64px;
  height: 64px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(20, 22, 30, 0.45);
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  opacity: var(--touch-opacity, 1);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.tbtn.gas {
  background: rgba(90, 200, 90, 0.45);
}

.tbtn.action {
  background: rgba(255, 200, 61, 0.4);
}

.tbtn.small {
  font-size: 14px;
}

.tbtn.down {
  background: rgba(255, 255, 255, 0.35);
}

/* Upright, the view keeps its shape and the buttons get the band below it. */
.game-root.touch-band .stage {
  aspect-ratio: auto;
}
.touch-band .stage canvas {
  bottom: auto;
  height: calc(100% - var(--band, 0px));
}
.touch-band .touch {
  top: auto;
  height: var(--band, 0px);
  background: #151821;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* The layout editor: the game stays paused and the buttons can be dragged. */
.touch.editing {
  z-index: 6;
}
.touch.editing .tbtn {
  outline: 2px dashed rgba(255, 200, 61, 0.9);
  outline-offset: 2px;
  cursor: grab;
}
.touch.editing .tbtn.dragging {
  cursor: grabbing;
  background: rgba(255, 255, 255, 0.35);
}
.overlay.editing {
  background: transparent;
  pointer-events: none;
  align-items: flex-start;
}
.overlay.editing .editor {
  pointer-events: auto;
}
.editor .toggle-row {
  margin-top: 6px;
}
.editor p {
  margin: 4px 0 0;
}

/* ---------- Overlay / menus ---------- */

.overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 16, 0.55);
  z-index: 5;
  overflow: auto;
  padding: 14px;
}

.overlay.show {
  display: flex;
}

.overlay.dim {
  background: rgba(10, 12, 16, 0.86);
}

/* A menu taller than the game box scrolls inside it (the box is only 300 px
   tall on phones), and the results buttons stay pinned to its bottom edge. */
.menu {
  width: min(780px, 100%);
  max-height: 100%;
  margin: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}


.panel-box {
  background: rgba(22, 25, 33, 0.92);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}

.menu h2 {
  margin: 0 0 10px;
  font-size: 24px;
}

.title {
  text-align: center;
}

.logo {
  font-size: clamp(38px, 8vw, 76px);
  font-weight: 900;
  letter-spacing: 3px;
  margin: 0;
  color: #fff;
  -webkit-text-stroke: 2px #1a0c08;
  text-shadow:
    0 4px 0 #b52a16,
    0 8px 24px rgba(0, 0, 0, 0.5);
  transform: rotate(-2deg);
}

.tagline {
  color: #e9edf5;
  margin: 8px 0 16px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.menu-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.menu-buttons .btn {
  padding: 12px 14px;
  font-size: 16px;
}

.menu-buttons .btn small {
  display: block;
  font-weight: 500;
  font-size: 12px;
  opacity: 0.85;
  margin-top: 3px;
}

.stat-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 14px;
}

.stat-row b {
  color: var(--text);
}

.goal {
  margin: 12px auto 0;
  max-width: 440px;
  text-align: left;
  font-size: 13px;
  color: var(--muted);
}

.goal .bar {
  height: 12px;
  margin-top: 4px;
}

.goal .bar-fill {
  background: linear-gradient(90deg, #ffc83d, #fff0b0);
}

.menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.menu-top h2 {
  margin: 0;
}

.bolts {
  font-weight: 800;
  color: var(--accent-2);
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.vehicle-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.vtab {
  padding: 6px 12px;
  border-radius: 999px;
}

.vtab.active {
  background: var(--accent);
  border-color: #ff8a6a;
  color: #fff;
}

.world-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.wtab {
  padding: 5px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.wtab.active {
  background: var(--accent);
  border-color: #ff8a6a;
  color: #fff;
}

.wtab.locked {
  opacity: 0.65;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.lcard {
  text-align: left;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 78px;
}

.lcard .num {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.lcard .nm {
  font-size: 15px;
}

.lcard .st {
  color: #555b69;
  letter-spacing: 2px;
  font-size: 15px;
}

.lcard .st .on {
  color: var(--accent-2);
}

.lcard .bt {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.lcard.locked {
  opacity: 0.5;
}

.results {
  text-align: center;
}

.results .big {
  font-size: clamp(30px, 6vw, 50px);
  font-weight: 900;
  margin: 0;
  letter-spacing: 2px;
}

.results .big.win {
  color: var(--good);
}

.results .big.lose {
  color: var(--bad);
}

.results .cause {
  color: var(--muted);
  margin: 2px 0 8px;
}

.stars {
  font-size: 40px;
  letter-spacing: 6px;
  color: #3b404d;
  margin: 4px 0;
}

.stars span.on {
  color: var(--accent-2);
  display: inline-block;
  animation: pop 0.35s ease-out both;
}

@keyframes pop {
  0% {
    transform: scale(0.2);
  }
  70% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.star-reqs {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.star-reqs .ok {
  color: var(--good);
}

.report {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  text-align: left;
  font-size: 14px;
  margin: 10px auto;
  max-width: 560px;
}

.report h4 {
  margin: 0 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.report ul {
  margin: 0;
  padding-left: 18px;
}

.report p {
  margin: 4px 0 0;
}

.report .stunt-list {
  grid-column: 1 / -1;
}

.report .stunt-list p {
  margin: 0;
}

.near {
  color: var(--accent-2);
  font-weight: 700;
  margin: 6px 0;
}

.ach-toast {
  color: var(--accent-2);
  font-weight: 700;
  margin: 4px 0;
}

.shop {
  display: grid;
  gap: 14px;
}

.shop h3 {
  margin: 0 0 6px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  min-width: 78px;
  font-size: 12px;
}

.swatch .chip {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.swatch.selected {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-2) inset;
}

.swatch.picked {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* No text under 12 px (the browser's "smaller" gives 10-11 px here). */
.swatch small,
.ach small {
  font-size: 12px;
}

.swatch.picked small {
  color: var(--accent);
  font-weight: 700;
}

.vehicle-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.vcard {
  text-align: left;
  padding: 10px;
  font-weight: 500;
  font-size: 13px;
}

.vcard b {
  font-size: 15px;
  display: block;
}

.vcard.selected {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-2) inset;
}

.ach-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.ach {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 13px;
  opacity: 0.55;
}

.ach.done {
  opacity: 1;
  border-color: var(--accent-2);
}

.ach b {
  display: block;
}

.toggle-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.keys {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}

kbd {
  background: #2a2e3a;
  border: 1px solid #454b5a;
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 0.9em;
  font-family: inherit;
}

.rotate-hint {
  display: none;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin: 6px;
}

.ad-slot {
  max-width: 970px;
  margin: 14px auto 0;
  min-height: 0;
}

.about {
  max-width: 820px;
  margin: 24px auto 0;
  color: #d5dae4;
  line-height: 1.55;
}

.about h1 {
  font-size: 26px;
}

.about h2 {
  font-size: 19px;
}

@media (max-width: 720px) {
  .hud {
    gap: 6px;
    padding: 3px 6px;
    min-height: 36px;
  }
  .hud-item {
    font-size: 14px;
  }
  .hud-level {
    display: none;
  }
  .hud-fuel .bar {
    width: 44px;
  }
  .hud-battery .bar {
    width: 44px;
  }
  .btn-icon {
    min-width: 30px;
    padding: 3px 6px;
  }
  .report {
    grid-template-columns: 1fr;
  }
  .stars {
    font-size: 30px;
  }
}

@media (orientation: portrait) and (max-width: 720px) {
  .game-root:not(.menu-mode) + .rotate-hint,
  .game-root:not(.menu-mode) .rotate-hint {
    display: block;
  }
  .stage {
    aspect-ratio: 4 / 3;
  }
}

/* Small screens: tighter menus, two level cards per row, and the injury and
   bolt lists as runs of text. */
@media (max-width: 480px), (max-height: 540px) {
  .panel-box {
    padding: 12px 14px;
  }
  .menu h2 {
    font-size: 20px;
  }
  .logo {
    font-size: 36px;
    -webkit-text-stroke-width: 1px;
  }
  .tagline {
    margin: 4px 0 8px;
    font-size: 14px;
  }
  .menu-buttons {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 6px;
    margin: 8px 0;
  }
  .menu-buttons .btn {
    padding: 8px 10px;
    font-size: 14px;
  }
  .menu-buttons .btn small {
    font-size: 11px;
  }
  .level-grid {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 6px;
  }
  .lcard {
    min-height: 0;
    padding: 8px;
  }
  .results .big {
    font-size: 30px;
  }
  .stars {
    font-size: 26px;
    margin: 0;
  }
  .report {
    grid-template-columns: 1fr;
    gap: 4px;
    font-size: 12px;
    margin: 6px auto;
  }
  .report ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    padding-left: 0;
    list-style: none;
  }
  .goal {
    margin-top: 6px;
  }
}

/* On touch screens the keyboard help has nothing to say: the title's key
   line and the "(R)" on buttons. */
.touch-ui .title .keys,
.touch-ui .key-hint {
  display: none;
}

/* Portrait phones: menus get the height the screen has to spare. */
@media (orientation: portrait) and (max-width: 720px) {
  .game-root.menu-mode .stage {
    aspect-ratio: auto;
    height: min(600px, calc(100vh - var(--header-h) - 24px));
    height: min(600px, calc(100dvh - var(--header-h) - 24px));
  }
}

/* Short landscape screens (phones held sideways): while riding, hide the site
   header and let the game fill the screen height. Pause and the results bring
   it back. */
@media (orientation: landscape) and (max-height: 540px) {
  :root {
    --hud-h: 36px;
  }
  body.riding .site-header {
    display: none;
  }
  body.riding .page {
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  body.riding .game-root {
    max-width: calc((100vh - var(--hud-h) - 2px) * 1.7778);
    max-width: calc((100dvh - var(--hud-h) - 2px) * 1.7778);
    border-radius: 0;
    border-width: 0;
  }
  .stage {
    min-height: 0;
  }
  /* Menus use the full width and the height left under the site header. */
  .game-root.menu-mode {
    max-width: min(1280px, 100%);
  }
  .game-root.menu-mode .stage {
    aspect-ratio: auto;
    min-height: 240px;
    height: calc(100vh - var(--header-h) - 18px);
    height: calc(100dvh - var(--header-h) - 18px);
  }
  /* The title has to fit in about 280 px: the page text below the game
     already says what the game is. */
  .title .tagline {
    display: none;
  }
  .title {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0 8px;
  }
  .title > * {
    grid-column: 1 / -1;
  }
  .title .menu-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
  .title > .goal {
    grid-column: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 6px 12px;
  }
  .goal .bar {
    height: 8px;
  }
  .title > .toggle-row {
    grid-column: auto;
    margin: 0;
  }
  .hud {
    gap: 6px;
    padding: 2px 6px;
    min-height: var(--hud-h);
  }
  .touch {
    left: env(safe-area-inset-left, 0px);
    right: env(safe-area-inset-right, 0px);
  }
}

/* While riding, a finger on the game box or (sideways) anywhere on the page
   steers, and never pans the page. Menus inside the game still scroll: each
   is its own scroll container. */
body.riding .game-root {
  touch-action: none;
}
@media (orientation: landscape) and (max-height: 540px) {
  body.riding {
    touch-action: none;
    overscroll-behavior: none;
  }
  /* A rule of its own: a browser without :has() drops only this one. */
  html:has(body.riding) {
    touch-action: none;
    overscroll-behavior: none;
  }
}

/* Touch screens: every button is at least 44 CSS px tall and every icon 44 px
   square (WCAG 2.2 target size, 2.5.5; Apple's Human Interface Guidelines). */
.touch-ui .btn {
  min-height: 44px;
}
.touch-ui .btn-icon {
  min-width: 44px;
}
:root.touch-ui {
  --hud-h: 49px;
}
.touch-ui .hud {
  padding-top: 2px;
  padding-bottom: 2px;
}
/* Portrait phones: the readouts sit in two rows, time and bolts over stunts
   and the fuel or battery gauge, so that Restart, Sound and Pause keep their
   44 px and stay on screen down to 320 px, however long the numbers get. A
   readout that still runs out of room cuts its par or best short, never a
   button. */
@media (orientation: portrait) and (max-width: 480px) {
  .hud {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, max-content) 1fr repeat(3, auto);
    grid-template-rows: auto auto;
  }
  .hud-item {
    min-width: 0;
  }
  .hud-time {
    grid-area: 1 / 1;
  }
  .hud-tokens {
    grid-area: 1 / 2;
  }
  .hud-stunts {
    grid-area: 2 / 1;
  }
  .hud-fuel,
  .hud-battery {
    grid-area: 2 / 2;
  }
  .hud-spacer {
    grid-area: 1 / 3 / 3;
  }
  #btn-restart {
    grid-area: 1 / 4 / 3;
  }
  #btn-mute {
    grid-area: 1 / 5 / 3;
  }
  #btn-pause {
    grid-area: 1 / 6 / 3;
  }
  #hud-par {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* Narrow portrait phones: a tighter HUD. */
@media (orientation: portrait) and (max-width: 400px) {
  .hud {
    gap: 4px;
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* Earned stars keep their result animation, including in calm mode. */

/* #1095: fullscreen and the installed app own the whole viewport. The stage
   flexes below the HUD; upright controls float over its bottom instead of
   adding a fixed-height band to a fixed-aspect scene. */
body .game-root.immersive {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.game-root.immersive .stage {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
  height: auto;
}
.immersive .hud {
  flex: none;
  gap: 8px;
  min-height: 60px;
  padding: max(8px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(68px, calc(env(safe-area-inset-left, 0px) + 60px));
}
@media (orientation: portrait) and (max-width: 480px) {
  .immersive .hud {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 0 repeat(3, 44px);
  }
  .immersive .hud-stunts {
    grid-area: 2 / 1 / 3 / 3;
    max-width: calc(100% - 36px);
    overflow: hidden;
  }
  .immersive .hud-battery,
  .immersive .hud-fuel {
    justify-self: end;
  }
  .immersive .hud-battery .bar,
  .immersive .hud-fuel .bar {
    width: 28px;
  }
}
.game-root .am-fs-exit {
  left: max(16px, env(safe-area-inset-left, 0px));
}
.immersive .touch {
  inset: 16px calc(env(safe-area-inset-right, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 16px) calc(env(safe-area-inset-left, 0px) + 16px);
}
.game-root.immersive .rotate-hint {
  display: none;
}
.immersive .overlay {
  top: max(60px, calc(env(safe-area-inset-top, 0px) + 52px));
  padding: 14px max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
}
.immersive .hud-item small {
  font-size: 13px;
}
@media (min-width: 601px) and (min-height: 601px) {
  .touch-ui .immersive .hud-item small,
  .touch-ui .immersive .hud-level {
    font-size: 15px;
  }
}
.immersive .btn {
  min-height: 44px;
}
.immersive .btn-icon {
  min-width: 44px;
}
.immersive .menu-buttons,
.immersive .level-grid,
.immersive .vehicle-tabs,
.immersive .world-tabs {
  gap: 8px;
}
@media (max-width: 1000px) {
  .immersive .hud-level {
    display: none;
  }
}
@media (orientation: portrait) {
  .immersive .touch {
    top: auto;
    height: var(--band, 160px);
  }
}
/* Wide tablets and desktops keep their scene's original scale: the HUD sits
   over its top edge rather than taking height away from the track. Saved
   touch layouts still start below that row. */
@media (min-width: 1000px) and (min-height: 601px) {
  .immersive .hud {
    position: absolute;
    inset: 0 0 auto;
    z-index: 4;
  }
  .immersive .touch {
    top: calc(env(safe-area-inset-top, 0px) + 76px);
  }
}
/* Installed apps have no site header; take the entire screen there too. */
.game-fullscreen .site-header,
.game-fullscreen .about,
.game-fullscreen .ad-slot,
.game-fullscreen .am-more,
.game-fullscreen .am-footer,
.game-fullscreen .am-guest-game {
  display: none;
}
.game-fullscreen .page {
  padding: 0;
}
.game-fullscreen body {
  overflow: hidden;
  overscroll-behavior: none;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
  .site-header, .about, .ad-slot {
    display: none;
  }
  .page {
    padding: 0;
  }
}

/* #1161: an open scene between compact facts and bottom actions. Only text
   strips and the buttons have backgrounds; the container never dims a crash. */
.overlay.open-results {
  background: transparent;
  overflow: hidden;
  pointer-events: none;
  top: var(--hud-h);
  padding: 8px max(12px, env(safe-area-inset-right, 0px)) max(16px, calc(env(safe-area-inset-bottom, 0px) + 16px)) max(12px, env(safe-area-inset-left, 0px));
}
.immersive .overlay.open-results {
  top: max(60px, calc(env(safe-area-inset-top, 0px) + 52px));
}
.open-results .results {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  overflow: visible;
  text-align: center;
}
.result-facts {
  align-self: center;
  width: min(900px, 100%);
  overflow: visible;
  overscroll-behavior: contain;
  pointer-events: auto;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 2px #000, 1px 0 2px #000, -1px 0 2px #000;
}
.result-facts > * {
  width: fit-content;
  max-width: 100%;
  margin: 2px auto;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(16, 20, 28, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.results .big { font-size: 24px; line-height: 1.1; margin: 0 auto 2px; }
.results .cause { margin: 2px auto; color: #fff; font-size: 14px; }
.results .stars { font-size: 20px; line-height: 1.1; letter-spacing: 3px; }
.results .star-reqs { gap: 2px 12px; margin: 2px auto; color: #fff; font-size: 14px; }
.results .near { font-size: 14px; }
.results .report { display: block; font-size: 14px; text-align: center; }
.results .report h4 { display: inline; font-size: 14px; color: #fff; text-transform: none; letter-spacing: 0; }
.results .report ul { display: inline; padding: 0; list-style: none; }
.results .report li { display: inline; margin-left: 8px; }
.results .report p { display: inline; }
.results .goal { font-size: 14px; margin: 2px auto; color: #fff; }
.results .goal .bar { display: none; }
.open-results .results .menu-buttons {
  align-self: center;
  width: min(900px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  pointer-events: auto;
  background: transparent;
}
.results .menu-buttons .btn {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 4px;
  font-size: 14px;
}
.results .menu-buttons .btn small { display: inline; font-size: 14px; margin-left: 4px; }
@media (min-width: 601px) and (min-height: 601px) {
  .touch-ui .result-facts, .touch-ui .results .cause,
  .touch-ui .results .star-reqs, .touch-ui .results .near,
  .touch-ui .results .report, .touch-ui .results .report h4,
  .touch-ui .results .goal, .touch-ui .results .menu-buttons .btn { font-size: 15px; }
}

.result-heading { padding-top: 3px; padding-bottom: 3px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.result-heading .big, .result-heading .stars { margin: 0; }
.result-details { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; font-size: 14px; line-height: 20px; }
.result-details [hidden] { display: none; }
.result-more { display: block; flex-shrink: 0; margin: 0; min-height: 44px; padding: 4px; border: 0; background: transparent; color: var(--accent-2); font: inherit; text-decoration: underline; cursor: pointer; }
.result-details > * { margin: 0; max-width: 100%; }
.result-bolts { font-weight: 700; color: var(--accent-2); }

.game-root.results-mode .play-hint { display: none; }
.results .stars span.on { animation: none; }

/* Results keep the page header available too. Short sideways phones use the
   width and height left under it instead of returning to a narrow aspect box. */
@media (orientation: landscape) and (max-height: 540px) {
  .game-root.results-mode:not(.immersive) { max-width: min(1280px, 100%); }
  .game-root.results-mode:not(.immersive) .stage {
    aspect-ratio: auto;
    min-height: 0;
    height: calc(100vh - var(--header-h) - var(--hud-h) - 18px);
    height: calc(100dvh - var(--header-h) - var(--hud-h) - 18px);
  }
}

/* Short screens keep the usual facts in three compact rows. Each strip
   still hugs its own text; there is no background across the free scene. */
@media (min-width: 600px) and (max-height: 540px) {
  .result-heading .big { font-size: 20px; }
  .result-facts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px; }
  .result-facts > * { margin: 0; }
  .result-facts .result-heading { order: -2; }
  .result-facts .result-bolts { order: -1; }
  .result-facts .result-details { flex: 0 1 190px; min-width: 0; }
  .result-details:has(.result-more:not([hidden])) { flex-wrap: nowrap; }
  .result-details:has(.result-more:not([hidden])) > :not(.result-more) { min-width: min-content; flex-shrink: 1; }
}

/* Upright page results leave room for the scene and readable strips. Use the
   available viewport height, capped on large desktop pages. */
.game-root.results-mode:not(.immersive) .stage {
  aspect-ratio: auto;
  min-height: 0;
  height: min(1000px, calc(100vh - var(--header-h) - var(--hud-h) - 18px));
  height: min(1000px, calc(100dvh - var(--header-h) - var(--hud-h) - 18px));
}

/* Readable facts on large 4K displays in either orientation. */
@media (min-width: 1500px) and (min-height: 1500px) {
  .result-facts, .results .cause, .results .star-reqs, .results .near,
  .results .report, .results .goal, .result-details { font-size: 36px; line-height: 48px; }
  .results .big { font-size: 52px; line-height: 1.2; }
  .result-heading { padding: 6px 8px; }
  .results .stars { font-size: 40px; }
}