/* Turfland prototype: PS2-era San Andreas look. All sizes inside the TV scale with --u (1 % of screen height). */

[hidden] { display: none !important; }

@font-face { font-family: 'Pricedown'; src: url('fonts/pricedown.otf') format('opentype'); font-display: block; }
@font-face { font-family: 'Michroma'; src: url('fonts/michroma.ttf') format('truetype'); font-display: block; }

:root {
  --sarc-blue: #061a5c;
  --sarc-blue-2: #0c2f8c;
  --gold: #f2c531;
  --green: #4fd33a;
  --hud-green: #37c23e;
  --o: 0.28vmin;
}

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  color: #fff;
  font-family: "Arial Black", Impact, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
#app { position: fixed; inset: 0; }

/* Outlined text for window-level elements */
.clock, .money, #big-text, .progress .label, #pause .logo, .mbet .m-main {
  text-shadow:
    var(--o) 0 0 #000, calc(-1 * var(--o)) 0 0 #000, 0 var(--o) 0 #000, 0 calc(-1 * var(--o)) 0 #000,
    var(--o) var(--o) 0 #000, calc(-1 * var(--o)) calc(-1 * var(--o)) 0 #000,
    var(--o) calc(-1 * var(--o)) 0 #000, calc(-1 * var(--o)) var(--o) 0 #000;
}

/* ---------- TV ---------- */
/* The wrap spans the window but only the set takes taps, so the room and its floor marker stay reachable. */
#tv-wrap {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transform-origin: 0 0;
  pointer-events: none;
}
/* The betting shop out of focus behind the set: the TV is an object in a room, not a flat panel on black. */
#room-backdrop {
  position: fixed; inset: 0; z-index: 5;
  background: #000 center / cover no-repeat;
  background-image: var(--room-desktop);
  filter: brightness(0.38) saturate(0.7) blur(7px);
  transform: scale(1.06);
  transition: opacity 0.45s;
  pointer-events: none;
}
#room-backdrop::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.8) 100%);
}
.interior #room-backdrop, [data-state="loading"] #room-backdrop { opacity: 0; }
/* Standing back, the set is one object: a click anywhere on it walks up to the screen, its buttons are out of reach. */
.interior #sarc { pointer-events: none; }
/* --bezel: 1 at the set (the HTML body, glass and rounded tube are the set), 0 standing back in the
   shop, where the 3D body is the set and the picture must run flat to its bezel. app.js drives it. */
#app { --bezel: 1; }
.interior #screen { cursor: pointer; }

#tv {
  position: relative;
  height: min(100vh, 75vw);
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
  padding: 1.6vmin;
  pointer-events: auto;
}
/* Landscape: the HUD (29vmin wide) keeps a column of its own at the right edge. The set moves left,
   and shrinks only when the window is too narrow, rather than slide under the clock and the money;
   the back arrow keeps its strip on the left. Below 80 % of the height the set stops shrinking. */
@media (orientation: landscape) {
  #tv-wrap { justify-content: flex-start; }
  #tv {
    --hud-col: 33vmin;
    --arrow-col: 11vmin;
    --tv-h: min(100vh, 75vw, max(80vh, calc((100vw - var(--hud-col) - var(--arrow-col)) * 0.75)));
    height: var(--tv-h);
    margin-left: max(0px, min(calc((100vw - var(--tv-h) * 4 / 3) / 2), calc(100vw - var(--hud-col) - var(--tv-h) * 4 / 3)));
  }
}
#tv::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  opacity: var(--bezel);
  background: linear-gradient(165deg, #343434 0%, #1c1c1c 40%, #0d0d0d 100%);
  border-radius: 1.6vmin;
  box-shadow:
    inset 0 0 0 0.25vmin #444,
    inset 0 0.35vmin 0.5vmin rgba(255, 255, 255, 0.1),
    inset 0 0 2vmin #000,
    0 0 0 0.15vmin #000,
    0 3vmin 8vmin rgba(0, 0, 0, 0.9),
    0 0.8vmin 2vmin rgba(0, 0, 0, 0.7);
}
/* Glass in front of the tube: a diagonal reflection and dark, curved corners. */
#glass {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  opacity: var(--bezel);
  background: linear-gradient(112deg,
    rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.04) 100%);
  box-shadow: inset 0 0 0 0.3vmin rgba(0, 0, 0, 0.9), inset 0 0 4vmin rgba(0, 0, 0, 0.55);
}
#screen {
  position: relative; width: 100%; height: 100%;
  background: var(--sarc-blue);
  overflow: hidden;
  border-radius: calc(0.8vmin * var(--bezel));
  --u: 7.2px;
}
#race-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated;
  display: none;
  filter: sepia(0.18) saturate(1.2) contrast(1.05);
}
[data-state="awaiting"] #race-canvas,
[data-state="racing"] #race-canvas,
[data-state="finish"] #race-canvas { display: block; }

/* ---------- SARC ---------- */
#sarc { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* Key hints and the on-air light sit on the top edge of the tube: part of the set, not of the window. */
#keybar {
  flex: 0 0 auto; box-sizing: border-box;
  display: flex; align-items: center; gap: calc(var(--u) * 3);
  height: calc(var(--u) * 4.6);
  padding: 0 calc(var(--u) * 2.5);
  background: #03103a;
  font: bold calc(var(--u) * 2.1) Arial, sans-serif; letter-spacing: 0.04em;
  color: #c9d2f5; white-space: nowrap; overflow: hidden;
}
#keybar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#keybar-text b { color: var(--gold); font-weight: bold; margin-right: 0.25em; }
#keybar-text .sep { display: inline-block; width: calc(var(--u) * 2.4); }
#keybar-text.status { color: #fff; }
#keybar-text.error { color: #ff6b5b; }
#keybar-text.flash { color: var(--gold); }
#keybar .onair { flex: 0 0 auto; display: flex; align-items: center; gap: calc(var(--u) * 0.9); color: #ff5a4a; }
#keybar .onair i { width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); border-radius: 50%; background: #ff2d1e; box-shadow: 0 0 calc(var(--u) * 0.8) #ff2d1e; animation: onair 1.6s steps(2, jump-none) infinite; }
@keyframes onair { 50% { opacity: 0.25; box-shadow: none; } }

#sarc-top {
  flex: 0 0 20%; position: relative; box-sizing: border-box;
  display: flex; align-items: center; gap: calc(var(--u) * 3);
  padding: 0 calc(var(--u) * 3);
  background: linear-gradient(#123a9c, #071f6c);
  border-bottom: calc(var(--u) * 0.7) solid var(--gold);
}
.logo {
  flex: 0 0 auto;
  width: calc(var(--u) * 15); height: calc(var(--u) * 15);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff5a4a, #c41414 70%);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-9deg);
  font-style: italic; font-size: calc(var(--u) * 5); letter-spacing: -0.03em;
  box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.6) 0 #000;
  text-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 #000;
}
.title { flex: 1; text-align: center; text-shadow: calc(var(--u) * 0.45) calc(var(--u) * 0.45) 0 #000; }
.track { font-size: calc(var(--u) * 6); letter-spacing: 0.03em; line-height: 1; }
.dist { font-size: calc(var(--u) * 3.6); color: var(--gold); margin-top: calc(var(--u) * 0.8); }
.yours {
  display: none; flex: 1; align-items: center; justify-content: center; gap: calc(var(--u) * 2);
  font-size: calc(var(--u) * 5); text-shadow: calc(var(--u) * 0.45) calc(var(--u) * 0.45) 0 #000;
}
.yours .lbl { color: var(--gold); }
.sq {
  display: inline-block; flex: 0 0 auto; box-sizing: border-box;
  width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4);
  border: calc(var(--u) * 0.5) solid #000;
}
.map { position: absolute; right: calc(var(--u) * 2); top: 50%; transform: translateY(-50%); height: 72%; opacity: 0.22; }

[data-state="awaiting"] .title, [data-state="racing"] .title, [data-state="finish"] .title, [data-state="result"] .title { display: none; }
[data-state="awaiting"] .yours, [data-state="racing"] .yours, [data-state="finish"] .yours, [data-state="result"] .yours { display: flex; }
[data-state="awaiting"] #sarc-top, [data-state="racing"] #sarc-top, [data-state="finish"] #sarc-top {
  background: linear-gradient(rgba(18, 58, 156, 0.85), rgba(7, 31, 108, 0.85));
  box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2.5) rgba(0, 0, 0, 0.55);
  z-index: 1;
}

#sarc-mid { flex: 1; position: relative; min-height: 0; }

#board {
  position: absolute; inset: 0; box-sizing: border-box;
  display: none; flex-direction: column;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 4);
}
[data-state="board"] #board, [data-state="submitting"] #board { display: flex; }
#board-main { flex: 1; min-height: 0; display: flex; gap: calc(var(--u) * 2.5); }
#rows { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-evenly; }
.row {
  display: flex; align-items: center; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1.5);
  border-left: calc(var(--u) * 1.5) solid transparent;
  font-size: calc(var(--u) * 3.9); line-height: 1;
  text-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 #000;
  cursor: pointer;
}
.row.selected { border-left-color: var(--green); background: rgba(255, 255, 255, 0.09); }
.row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .odds { color: var(--gold); min-width: calc(var(--u) * 9); text-align: right; }
.row .mult { font-family: Arial, sans-serif; font-weight: bold; font-size: calc(var(--u) * 2.6); color: #d6ddff; min-width: calc(var(--u) * 8); text-align: right; }

/* Dossier of the selected runner: the picture is the point, everything else is a caption. */
#dossier {
  flex: 0 0 36%; box-sizing: border-box; min-height: 0;
  display: flex; flex-direction: column; gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.2);
  background: rgba(0, 0, 0, 0.28);
  border: calc(var(--u) * 0.45) solid rgba(255, 255, 255, 0.14);
}
#dossier .portrait {
  position: relative; flex: 1; min-height: 0; align-self: center;
  aspect-ratio: 1 / 1; max-width: 100%;
  border: calc(var(--u) * 0.6) solid #000; box-sizing: border-box;
  background: #000; overflow: hidden;
  box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 #000;
}
#dossier .portrait svg, #dossier .portrait img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#dossier .portrait .odds-tag {
  position: absolute; right: 0; bottom: 0;
  padding: calc(var(--u) * 0.3) calc(var(--u) * 1);
  background: var(--gold); color: #000;
  font-size: calc(var(--u) * 3.4); line-height: 1;
  border: calc(var(--u) * 0.45) solid #000; border-right: 0; border-bottom: 0;
}
#dossier .d-name {
  font-size: calc(var(--u) * 3.6); line-height: 1; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 #000;
}
#dossier .d-sub {
  display: flex; justify-content: space-between; gap: calc(var(--u) * 1);
  font: bold calc(var(--u) * 2.2) Arial, sans-serif; color: #b9c4ff; white-space: nowrap;
}
#dossier .d-form { color: #fff; letter-spacing: 0.06em; }
#dossier .d-form .win { color: var(--gold); }
#dossier .d-pay {
  display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1);
  background: rgba(0, 0, 0, 0.35); border-left: calc(var(--u) * 0.8) solid var(--green);
  font-size: calc(var(--u) * 2.6); line-height: 1; white-space: nowrap;
}
#dossier .d-pay .val { color: var(--green); font-size: calc(var(--u) * 3.6); text-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 #000; }

#bet-row {
  flex: 0 0 auto; display: flex; align-items: center; gap: calc(var(--u) * 1.6);
  margin-top: calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 3.8);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.5);
  background: rgba(0, 0, 0, 0.3);
  text-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 #000;
}
#bet-row .chips { display: flex; gap: calc(var(--u) * 0.7); }
#bet-row .chip {
  font-size: calc(var(--u) * 2.3); line-height: 1; padding: calc(var(--u) * 0.7) calc(var(--u) * 1);
  background: #0b2478; border: calc(var(--u) * 0.35) solid #000; color: #c9d2f5;
  text-shadow: none; box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 #000;
}
#bet-row .chip.active { background: var(--gold); color: #000; }
#bet-row .amt { color: var(--gold); min-width: calc(var(--u) * 13); text-align: center; }
/* The arrows are small glyphs: their tap area reaches well past them, into the row's gaps. */
#bet-row .arrow {
  font-size: calc(var(--u) * 2.8);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.3);
  margin: calc(var(--u) * -0.9) calc(var(--u) * -1);
}
#bet-row .cur { font-size: calc(var(--u) * 2.4); padding: calc(var(--u) * 0.5) calc(var(--u) * 1); border: calc(var(--u) * 0.4) solid #fff; }
#bet-row .go {
  margin-left: auto;
  font-size: calc(var(--u) * 3.2); line-height: 1;
  padding: calc(var(--u) * 0.8) calc(var(--u) * 2.6);
  background: #c41414; color: #fff;
  border: calc(var(--u) * 0.45) solid #000;
  box-shadow: calc(var(--u) * 0.45) calc(var(--u) * 0.45) 0 #000;
}
#bet-row .go:hover { background: #dd2418; }
#bet-row .go:active { transform: translate(calc(var(--u) * 0.45), calc(var(--u) * 0.45)); box-shadow: none; }

#placings {
  position: absolute; inset: 0; box-sizing: border-box; margin: 0; list-style: none;
  padding: calc(var(--u) * 2) calc(var(--u) * 8);
  display: none; flex-direction: column; justify-content: space-evenly;
  font-size: calc(var(--u) * 5.2);
  text-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 #000;
}
[data-state="result"] #placings { display: flex; }
.pl { display: flex; align-items: center; gap: calc(var(--u) * 3); opacity: 0; transform: translateX(-8%); transition: opacity 0.2s, transform 0.2s; }
.pl.show { opacity: 1; transform: none; }
.pl .pos { color: var(--gold); min-width: calc(var(--u) * 10); }

#sarc-bottom {
  flex: 0 0 23%; box-sizing: border-box;
  display: flex; flex-direction: column;
  background: #08175a;
  border-top: calc(var(--u) * 0.7) solid var(--gold);
}
.ads { flex: 1; min-height: 0; display: flex; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 1.3) calc(var(--u) * 2.5) 0; }
.ad {
  flex: 1; display: flex; gap: calc(var(--u) * 1); box-sizing: border-box; overflow: hidden;
  background: #f2e8cf; color: #1d1d1d;
  font-family: Arial, sans-serif; font-weight: bold; font-size: calc(var(--u) * 2); line-height: 1.15;
  padding: calc(var(--u) * 0.8);
  border: calc(var(--u) * 0.4) solid #000;
}
.ad img { width: 40%; object-fit: cover; image-rendering: pixelated; border: 1px solid #000; }
.ad b { font-family: "Arial Black", Impact, sans-serif; font-size: calc(var(--u) * 2.4); color: #a01010; }
.ad i { color: #444; }
.ad.text-only { background: #e9d9a8; }
.ad.free { background: repeating-linear-gradient(135deg, #f2e8cf 0 6px, #e6dcc0 6px 12px); border-style: dashed; }
.ad.free b { color: #1d1d1d; }
.positions { display: none; flex: 1; align-items: center; justify-content: center; gap: calc(var(--u) * 4); }
.positions .sq { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-width: calc(var(--u) * 0.6); }
.ticker {
  height: calc(var(--u) * 5.5); display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  font-size: calc(var(--u) * 3.2); background: rgba(0, 0, 0, 0.25);
}
.ticker span { display: inline-block; padding-left: 100%; animation: ticker 16s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }
[data-state="awaiting"] .ads, [data-state="racing"] .ads, [data-state="finish"] .ads,
[data-state="awaiting"] .ticker, [data-state="racing"] .ticker, [data-state="finish"] .ticker { display: none; }
[data-state="awaiting"] .positions, [data-state="racing"] .positions, [data-state="finish"] .positions { display: flex; }
[data-state="awaiting"] #sarc-bottom, [data-state="racing"] #sarc-bottom, [data-state="finish"] #sarc-bottom {
  background: rgba(8, 23, 90, 0.85);
  box-shadow: 0 calc(var(--u) * -0.8) calc(var(--u) * 2.5) rgba(0, 0, 0, 0.55);
  z-index: 1;
}

#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash.on { animation: flash 0.5s ease-out forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

#crt {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
}
/* The tube's dark corners: part of the HTML set, gone with it when standing back. */
#crt::after {
  content: ''; position: absolute; inset: 0; opacity: var(--bezel);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.55) 100%);
}

/* ---------- Window-level layers ---------- */
#loading { position: fixed; inset: 0; z-index: 40; background: #000; }
[data-state]:not([data-state="loading"]) #loading { display: none; }
#loading img { width: 100%; height: 100%; object-fit: cover; display: block; }
.progress { position: absolute; bottom: 6vmin; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2vmin; }
.progress .label { font-family: Pricedown, Impact, sans-serif; font-size: 4.5vmin; letter-spacing: 0.02em; }
.progress .bar { width: 42vmin; height: 3.2vmin; border: 0.5vmin solid #000; background: rgba(0, 0, 0, 0.45); box-sizing: border-box; }
.progress .fill { height: 100%; width: 0; background: #f28c1e; transition: width 0.2s; }

#help-box {
  position: fixed; top: 2vmin; left: 2.5vmin; z-index: 20;
  max-width: 34vw; box-sizing: border-box;
  background: rgba(0, 0, 0, 0.62); color: #fff;
  padding: 1.2vmin 1.6vmin;
  font: bold 1.9vmin Arial, sans-serif; line-height: 1.35;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
#help-box.error { color: #ff6b5b; }
#help-box.flash { color: var(--gold); }
#help-box.hint { color: var(--gold); }
.paused #help-box, .paused #big-text, .paused #hud { display: none; }

#hud { position: fixed; top: 1.6vmin; right: 2.5vmin; z-index: 20; text-align: right; pointer-events: none; transition: opacity 0.3s; }
[data-state="loading"] #hud { display: none; }
/* Walking to or from the set the HUD steps aside, like in a cutscene: gone at once, back with a fade
   at its new place, so it never slides across the screen of the set. */
.transition #hud { opacity: 0; transition: none; }
.clock { font-family: Pricedown, Impact, sans-serif; font-size: 5vmin; line-height: 1; color: #fff; }
.fist { display: block; margin: 0.6vmin 0 0 auto; width: 4.2vmin; height: 4.2vmin; }
.money { font-family: Pricedown, Impact, sans-serif; font-size: 6vmin; line-height: 1; color: var(--hud-green); letter-spacing: 0.02em; margin-top: 0.4vmin; }
.sub { font: bold 1.9vmin Arial, sans-serif; margin-top: 0.6vmin; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }

#big-text {
  position: fixed; inset: 0; z-index: 25; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-family: Pricedown, Impact, sans-serif; font-size: 14vmin; line-height: 1; letter-spacing: 0.01em;
  color: var(--gold);
  --o: 0.55vmin;
  text-shadow:
    var(--o) 0 0 #201400, calc(-1 * var(--o)) 0 0 #201400, 0 var(--o) 0 #201400, 0 calc(-1 * var(--o)) 0 #201400,
    var(--o) var(--o) 0 #201400, calc(-1 * var(--o)) calc(-1 * var(--o)) 0 #201400,
    var(--o) calc(-1 * var(--o)) 0 #201400, calc(-1 * var(--o)) var(--o) 0 #201400,
    1vmin 1.1vmin 0 #000;
  animation: bigtext 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#big-text.lost { color: #a3332b; }
@keyframes bigtext { from { transform: scale(2.2); opacity: 0; } to { transform: none; opacity: 1; } }
.wasted #tv-wrap, .wasted #interior { filter: grayscale(0.75) brightness(0.8); }

/* ---------- Pause menu ---------- */
#pause {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(0, 0, 0, 0.84);
  display: grid; grid-template-columns: 32% 1fr; box-sizing: border-box;
  padding: 12vmin 6vmin 6vmin;
  font-family: Michroma, "Bank Gothic", sans-serif;
}
#pause .logo {
  position: absolute; top: 3vmin; left: 4vmin;
  width: auto; height: auto; border-radius: 0; background: none; box-shadow: none;
  font-family: Pricedown, Impact, sans-serif; font-style: normal; font-size: 7.5vmin; letter-spacing: 0.01em;
  color: #f0c040; transform: rotate(-4deg);
}
#pause .menu { list-style: none; margin: 0; padding: 0; font-size: 3.1vmin; align-self: start; }
#pause .menu li { padding: 1.2vmin 2vmin; margin-bottom: 1vmin; color: #7f7f7f; cursor: pointer; }
#pause .menu li.active { background: #000; color: #fff; box-shadow: 0 0 0 1px #333; }
/* The content column scrolls on its own: BRIEF and ROADMAP run longer than the screen. */
#pause .content { color: #d8d8d8; font: 2.1vmin/1.7 Arial, sans-serif; padding: 0 2vmin 0 5vmin; max-height: calc(100vh - 18vmin); overflow-y: auto; }
#pause .content p { margin: 0 0 1.5vmin; max-width: 70vmin; }
#pause .content b { color: #fff; }
#pause .content a { color: var(--gold); text-decoration: none; }
#pause .content a:hover { text-decoration: underline; }
#pause .content .mono { font-family: Consolas, monospace; font-size: 0.9em; word-break: break-all; }
#pause .content .hint { color: #8a8a8a; font-size: 1.8vmin; }
/* Roadmap: when / what / status, one line per stage, like the mission list. */
.rm { display: grid; grid-template-columns: 16vmin 1fr 7vmin; gap: 2vmin; align-items: start; max-width: 86vmin; padding: 1.3vmin 0; border-bottom: 1px solid #333; }
.rm .when { font-family: Michroma, sans-serif; font-size: 1.7vmin; color: var(--gold); padding-top: 0.35vmin; white-space: nowrap; }
.rm .tag { font-family: Michroma, sans-serif; font-size: 1.4vmin; color: #8a8a8a; text-align: right; padding-top: 0.5vmin; }
.rm .tag.live { color: #6fcf6f; }
.rm .tag.next { color: #fff; }
.rm + .hint { margin-top: 1.5vmin; }
.kv { display: flex; justify-content: space-between; gap: 4vmin; max-width: 60vmin; padding: 1vmin 0; border-bottom: 1px solid #333; font-family: Michroma, sans-serif; font-size: 1.9vmin; }
.kv b { color: #fff; font-weight: normal; }
.seg { display: inline-block; width: 2.4vmin; height: 1.6vmin; margin-left: 0.4vmin; background: #333; vertical-align: middle; }
.seg.on { background: #f0c040; }
/* AUDIO: the lit row takes the keys; every segment and the RADIO row take a click or a tap. */
.kv.vol .seg { cursor: pointer; }
.kv.vol.active span:first-child { color: var(--gold); }
.kv .off { margin-left: 1.2vmin; color: #ff6b5b; font-size: 0.85em; }
.kv.radio { cursor: pointer; }

/* ---------- Interior ---------- */
#interior { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #000; }
/* Standing back, a drag turns the head (app.js): the page must not scroll or zoom under the finger. */
#app.interior { touch-action: none; }
.interior #interior { cursor: grab; }
.interior.dragging, .interior.dragging * { cursor: grabbing !important; }
#room-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; animation: flicker 4s steps(1) infinite; }
@keyframes flicker { 0%, 100% { filter: brightness(1); } 47% { filter: brightness(1.03); } 49% { filter: brightness(0.98); } 73% { filter: brightness(1.02); } }
/* GTA-style floating arrow at the left edge: step back from the set into the shop. */
#back-arrow {
  position: fixed; left: 2vmin; top: 50%; z-index: 20;
  width: 9vmin; height: 9vmin; margin-top: -4.5vmin;
  filter: drop-shadow(0.5vmin 0.6vmin 0 rgba(0, 0, 0, 0.7));
  animation: bob 1.1s ease-in-out infinite alternate;
  transition: opacity 0.3s;
}
#back-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
#back-arrow:hover { animation-duration: 0.45s; }
#back-arrow:hover .face { fill: #fff08a; }
@keyframes bob { from { transform: translateX(0); } to { transform: translateX(-1.2vmin); } }
.interior #back-arrow, .transition #back-arrow, [data-state="loading"] #back-arrow { opacity: 0; pointer-events: none; }
#marker {
  position: absolute; width: 150px; height: 140px; transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0));
  animation: blink 1s steps(2, jump-none) infinite;
  cursor: pointer;
}
#marker:hover { animation: none; opacity: 1; background: linear-gradient(to top, rgba(255, 235, 80, 0.85), rgba(255, 215, 0, 0)); }
#marker::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -18px; height: 46px; box-sizing: border-box;
  border: 4px solid rgba(255, 228, 60, 0.95); border-radius: 50%;
  background: rgba(255, 215, 0, 0.35);
}
@keyframes blink { 0% { opacity: 1; } 100% { opacity: 0.45; } }
#interior-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  height: 4.6vmin; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 2vmin;
  padding: 0 2vmin;
  background: rgba(0, 0, 0, 0.88);
  font: bold 1.9vmin Arial, sans-serif; color: #ddd;
}
#interior-bar .label { color: var(--gold); margin-right: 0.6vmin; }
#interior-bar .ca { display: flex; align-items: center; gap: 1vmin; min-width: 0; }
#ca-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Consolas, monospace; font-weight: normal; }
#ca-copy { border: 1px solid #888; padding: 0.2vmin 0.8vmin; font-size: 1.6vmin; color: #fff; }
#interior-bar nav { display: flex; gap: 2.4vmin; }
#interior-bar a { color: #fff; text-decoration: none; }
#interior-bar a:hover, #ca-copy:hover { color: var(--gold); }

/* ---------- Phone ---------- */
/* Betting slip under the set: SARC-blue paper, gold rule, the same runners as the board as big tap targets. */
#mobile-controls {
  display: none; position: fixed; left: 0; right: 0; top: 75vw; bottom: 0; z-index: 12;
  flex-direction: column; justify-content: flex-end; gap: 1.6vh;
  padding: 1.6vh 3vw calc(1vh + env(safe-area-inset-bottom)); box-sizing: border-box;
  background: linear-gradient(rgba(6, 26, 92, 0.92), rgba(3, 12, 46, 0.97));
  border-top: 3px solid var(--gold);
  box-shadow: 0 -1vh 3vh rgba(0, 0, 0, 0.6);
}
#mobile-controls button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.m-horses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; }
.m-horses button {
  width: 100%; min-height: 48px; box-sizing: border-box;
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 2vw; align-items: center;
  padding: 1.1vh 2.4vw; text-align: left;
  background: rgba(0, 0, 0, 0.35); border: 2px solid rgba(255, 255, 255, 0.12);
  border-left: 5px solid transparent;
}
.m-horses button.on { background: rgba(79, 211, 58, 0.16); border-color: var(--green); border-left-color: var(--green); }
.m-horses .sq { grid-row: 1 / 3; width: 5.5vw; height: 5.5vw; border-width: 2px; }
.m-horses .nm { grid-column: 2 / 4; font-size: 3.6vw; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 #000; }
.m-horses .od { font-size: 3.4vw; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.m-horses .mx { font: bold 3.2vw Arial, sans-serif; color: #d6ddff; }
.m-live {
  display: none; align-items: center; gap: 2.5vw; padding: 1.4vh 3vw;
  background: rgba(0, 0, 0, 0.35); border-left: 5px solid var(--green);
  font-size: 4.2vw; text-shadow: 1px 1px 0 #000;
}
.m-live .sq { width: 5.5vw; height: 5.5vw; border-width: 2px; }
.m-live b { margin-left: auto; color: var(--green); font-weight: normal; }
.m-chips {
  display: flex; gap: 2vw; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
  margin: 0 -3vw; padding: 0.4vh 3vw 1vh;
}
.m-chips::-webkit-scrollbar { display: none; }
.m-chips button {
  flex: 0 0 auto; min-height: 44px; padding: 0 4vw;
  font-size: 4vw; color: #c9d2f5;
  background: #0b2478; border: 2px solid #000; box-shadow: 2px 3px 0 #000;
}
.m-chips button.on { background: var(--gold); color: #000; }
.m-chips button.short { opacity: 0.4; }
.mbet {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3vh;
  width: 100%; min-height: 64px; padding: 1.2vh 0;
  background: #c41414; color: #fff; border: 3px solid #000; box-shadow: 0 5px 0 #000;
}
.mbet:active { transform: translateY(4px); box-shadow: 0 1px 0 #000; }
.mbet .m-main { font-family: Pricedown, Impact, sans-serif; font-size: 9vw; line-height: 1; }
.mbet .m-sub { font: bold 3.3vw Arial, sans-serif; color: #ffd9d2; text-shadow: 1px 1px 0 #000; }
.mbet .m-sub:empty { display: none; }
.m-foot { display: flex; justify-content: space-between; }
.m-foot button { min-height: 40px; padding: 0 2vw; font: bold 3.4vw Arial, sans-serif; color: #8f9bd0; letter-spacing: 0.05em; }
/* Only the board takes a stake; during a race the slip shows the live ticket, the button waits. */
#app:not([data-state="board"]) .m-horses, #app:not([data-state="board"]) .m-chips { display: none; }
[data-state="submitting"] .m-live, [data-state="awaiting"] .m-live, [data-state="racing"] .m-live,
[data-state="finish"] .m-live, [data-state="result"] .m-live { display: flex; }
[data-state="submitting"] .mbet, [data-state="awaiting"] .mbet, [data-state="racing"] .mbet, [data-state="finish"] .mbet { display: none; }
/* Keyboard hints mean nothing under a thumb. */
@media (pointer: coarse) {
  [data-state="board"] #keybar-text[class=""], [data-state="result"] #keybar-text[class=""] { visibility: hidden; }
}
.interior #mobile-controls { display: none; }

@media (orientation: portrait) {
  #room-backdrop { background-image: var(--room-mobile); }
  /* The set, the HUD and the slip stack top to bottom; app.js (layoutPhone) sizes the set to what
     the slip leaves and puts the HUD in the gap. */
  #tv-wrap { align-items: flex-start; }
  #tv { height: var(--phone-tv-h, 75vw); }
  #mobile-controls { display: flex; top: auto; }
  #mobile-controls > * { flex-shrink: 0; }
  #back-arrow { display: none; } /* the slip's SHOP button does its job */
  #hud { top: var(--phone-hud-top, calc(75vw + 1.2vh)); right: 3vw; transform: scale(0.8); transform-origin: top right; }
  #help-box { top: var(--phone-hud-top, calc(75vw + 1.2vh)); left: 3vw; max-width: 52vw; font-size: 2.6vmin; }
  .interior #hud, .interior #help-box { top: calc(1.6vmin + env(safe-area-inset-top)); }
  /* The shop's link bar under a thumb: readable text and a tappable COPY. */
  #interior-bar { height: auto; min-height: 44px; padding: 0 3vw env(safe-area-inset-bottom); gap: 3vw; font-size: 3.1vw; }
  #ca-copy { font-size: 3vw; padding: 1.2vw 2.4vw; }
  #interior-bar nav { gap: 4.5vw; }
  /* Menu on top, text below, the whole overlay scrolls; phone-sized type. */
  #pause { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 16vmin 5vw 4vh; overflow-y: auto; }
  #pause .menu { font-size: 4.4vw; }
  #pause .content { padding: 3vmin 0 0; max-height: none; overflow: visible; font-size: 3.4vw; }
  #pause .content p, .kv, .rm { max-width: none; }
  #pause .content .hint { font-size: 3vw; }
  .kv { font-size: 3.2vw; }
  .rm { grid-template-columns: 23vw 1fr 12vw; gap: 3vw; }
  .rm .when { font-size: 2.8vw; }
  .rm .tag { font-size: 2.4vw; }
  #big-text { font-size: 16vw; }
}
/* A short portrait window (browser toolbars, small phones): the slip tightens first, so the set
   above it has less to give up. */
@media (orientation: portrait) and (max-height: 720px) {
  #mobile-controls { gap: 1vh; padding-top: 1vh; }
  .m-horses button { min-height: 42px; padding-top: 0.6vh; padding-bottom: 0.6vh; }
  .m-chips { padding-top: 0; padding-bottom: 0.6vh; }
  .m-chips button { min-height: 38px; }
  .mbet { min-height: 52px; padding: 0.6vh 0; }
  .mbet .m-main { font-size: 8vw; }
  .m-foot button { min-height: 32px; }
}