* { box-sizing: border-box; margin: 0; }
:root {
  --bg: #0b0e13; --panel: #141922; --panel2: #1b2230; --line: #232c3d;
  --txt: #dfe7f3; --dim: #8394ad; --go: #2ecc71; --bad: #e5484d; --gold: #f5b301;
}
body {
  background: radial-gradient(1200px 700px at 35% -10%, #131a26 0%, var(--bg) 60%);
  color: var(--txt); font: 15px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
  min-height: 100vh; display: grid; place-items: center; padding: 18px;
}
main { display: flex; gap: 18px; align-items: stretch; max-width: 1400px; width: 100%; }

/* ---- stage ---- */
.stage { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stage header { display: flex; justify-content: space-between; align-items: baseline; }
h1 { font-size: 17px; letter-spacing: 2.5px; }
h1 span { color: var(--gold); font-weight: 600; }
.phase { font-size: 12px; letter-spacing: 2px; color: var(--dim); }
.canvas-wrap { position: relative; display: grid; place-items: center; }
canvas { height: min(78vh, 900px); aspect-ratio: 9 / 16; width: auto; max-width: 100%;
  display: block; border-radius: 10px; background: #0d1117; border: 1px solid var(--line); }
/* wide (desktop) mode: cinematic 16:9 bare-track canvas + DOM overlays */
body.wide canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.tower, .lap { display: none; }
body.wide .tower { position: absolute; top: 12px; left: 12px; display: flex;
  flex-direction: column; gap: 3px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
body.wide .tower .row { display: flex; gap: 6px; align-items: center;
  background: rgba(10, 13, 19, .8); border: 1px solid #2a3448; border-radius: 5px;
  padding: 1.5px 8px 1.5px 5px; min-width: 104px; }
.tower .p { color: var(--dim); width: 19px; }
.tower .dot { width: 9px; height: 9px; border-radius: 3px; }
.tower .row.you { border-color: var(--gold); }
.tower .gap { margin-left: auto; color: var(--dim); font-size: 10px; }
body.wide .lap { display: block; position: absolute; top: 12px; right: 14px; font-size: 13px;
  letter-spacing: 2px; background: rgba(10, 13, 19, .8); border: 1px solid #2a3448;
  border-radius: 6px; padding: 4px 12px; font-weight: 700; }
.lap.final { color: var(--gold); border-color: var(--gold); }

.result { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(8, 10, 15, .72); backdrop-filter: blur(3px); border-radius: 10px; }
.result.hidden { display: none; }
.result .card { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 30px; text-align: center; min-width: 340px; box-shadow: 0 18px 60px rgba(0,0,0,.5); }
.result .flagline { font-size: 12px; letter-spacing: 3px; color: var(--dim); }
.result .winner { font-size: 26px; font-weight: 900; margin: 8px 0 2px; }
.result .order { color: var(--dim); font-size: 12px; letter-spacing: 1px; margin: 8px 0 14px; }
.result .payline { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.result .payline.win { color: var(--go); } .result .payline.loss { color: var(--bad); }
.result .bal { color: var(--dim); font-size: 13px; margin-bottom: 16px; }
.result button { width: 100%; background: linear-gradient(180deg, #2ecc71, #1f9e56);
  border: 0; color: #04130a; font-weight: 900; letter-spacing: 2px; font-size: 14px;
  padding: 12px; border-radius: 10px; cursor: pointer; }
.result button:hover { filter: brightness(1.08); }

.stage footer { display: flex; justify-content: space-between; align-items: center;
  color: var(--dim); font-size: 11.5px; }
.ghost { background: none; border: 1px solid var(--line); color: var(--dim); border-radius: 6px;
  padding: 3px 10px; font-size: 11px; cursor: pointer; }
.ghost:hover { color: var(--txt); border-color: var(--dim); }

/* ---- side panel ---- */
.panel { width: 320px; flex-shrink: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.balance { display: flex; align-items: baseline; gap: 8px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.balance label { font-size: 10px; letter-spacing: 2px; color: var(--dim); }
.balance b { font-size: 22px; margin-left: auto; font-variant-numeric: tabular-nums; }
.balance i { color: var(--dim); font-style: normal; font-size: 11px; }
h2 { font-size: 11px; letter-spacing: 2px; color: var(--dim); margin-top: 4px; }
h2 span { float: right; font-weight: 400; letter-spacing: 0; text-transform: none; }

.cars { display: flex; flex-direction: column; gap: 5px; }
.car { display: flex; align-items: center; gap: 9px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer;
  transition: border-color .12s, transform .06s; }
.car:hover { border-color: #3b4a66; }
.car.sel { border-color: var(--gold); background: #221f14; }
.car .swatch { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.car .nm { font-size: 13px; }
.car .imp { font-size: 10.5px; color: var(--dim); }
.car .pay { margin-left: auto; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.car:disabled, .car.locked { opacity: .55; pointer-events: none; }

.betrow { display: flex; gap: 8px; }
#bet { width: 90px; background: var(--panel2); color: var(--txt); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 16px; font-weight: 700; }
.chips { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.chips button { background: var(--panel2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 999px; padding: 4px 9px; font-size: 11px; cursor: pointer; }
.chips button:hover { border-color: var(--gold); }
.potential { font-size: 12.5px; color: var(--dim); min-height: 18px; }
.potential b { color: var(--go); }

#start { background: linear-gradient(180deg, #2ecc71, #1f9e56); border: 0; color: #04130a;
  font-weight: 900; letter-spacing: 2px; font-size: 15px; padding: 13px; border-radius: 10px;
  cursor: pointer; }
#start:hover:not(:disabled) { filter: brightness(1.08); }
#start:disabled { background: var(--panel2); color: var(--dim); cursor: not-allowed; }
button { font-family: inherit; color: inherit; }  /* buttons don't inherit color by default */
.car { color: var(--txt); }

.history { display: flex; gap: 5px; flex-wrap: wrap; min-height: 22px; }
.history .h { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7);
  border: 2px solid transparent; }
.history .h.win { border-color: var(--go); box-shadow: 0 0 6px rgba(46,204,113,.5); }

@media (max-width: 1080px) { main { flex-direction: column; } .panel { width: 100%; } }