/* ======================= RACE BNB — MATRIX ORANGE THEME ======================= */
:root{
  --bg:#0a0b0e;
  --grid:#10131b;
  --panel:#0f1218;
  --panel-2:#131822;
  --ink:#f4f6fb;
  --muted:#9aa4b2;
  --line:#21293a;

  --accent:#ff7a1a;      /* neon orange */
  --accent-2:#ff9a2a;    /* amber */
  --accent-3:#ffc267;    /* peach */
  --good:#00f5a0;

  --radius-xl:20px;
  --radius-lg:16px;
  --shadow:0 18px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.02);
  --glow:0 0 .9rem rgba(255,122,26,.55), 0 0 2.2rem rgba(255,154,42,.35);

  --font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font:14px/1.45 var(--font);
}
a{color:inherit; text-decoration:none}
code{font-family:inherit}

/* ======================= BACKDROP MATRIX CANVAS ======================= */
#bg-matrix{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 600px at -12% -20%, rgba(255,122,26,.12) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(900px 520px at 120% 120%, rgba(255,154,42,.10) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #0a0b0e, #07080b);
}
.theme-matrix::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(0deg, transparent 0 49%, rgba(255,122,26,.06) 50%, transparent 51%),
    linear-gradient(90deg, transparent 0 49%, rgba(255,122,26,.05) 50%, transparent 51%);
  background-size: 100% 22px, 22px 100%;
  opacity:.32;
}

/* ======================= GLASS / NEON ======================= */
.glass{
  background:rgba(16,18,25,.58);
  backdrop-filter: blur(10px);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.glass-strong{
  background:linear-gradient(180deg, rgba(18,20,28,.86), rgba(10,12,18,.86));
  border:1px solid #1f2736;
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,122,26,.06) inset;
}
.neon{box-shadow: var(--glow)}
.neon-frame{box-shadow: inset 0 0 0 2px rgba(255,122,26,.38), inset 0 0 24px rgba(255,154,42,.24)}

/* ======================= TOP BAR ======================= */
.top{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:900}
.brand b{letter-spacing:.2px}
.muted{color:var(--muted)}
.actions{display:flex; gap:8px}

.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{
  padding:10px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel-2); color:var(--ink); cursor:pointer; font-weight:800;
  position:relative; transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.tab:hover{transform:translateY(-1px); box-shadow:0 4px 18px rgba(255,122,26,.18)}
.tab[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--accent);}
.tab[aria-selected="true"]::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-2px; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 8px var(--accent);
}
.live-dot{
  width:8px;height:8px;border-radius:999px;background:var(--accent);
  display:inline-block;margin-right:6px; box-shadow:0 0 12px rgba(255,122,26,.9); animation:pulse 1.2s infinite
}
@keyframes pulse{0%,100%{transform:scale(.8);opacity:.8}50%{transform:scale(1.15);opacity:1}}

/* ======================= BUTTONS ======================= */
.btn{
  padding:10px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font-weight:800; cursor:pointer;
  position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, background .2s;
}
.btn.primary{
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color:#ff7a1a; color:#0f1218; box-shadow:0 10px 30px rgba(255,122,26,.25)
}
.btn.ghost{background:var(--panel-2)}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 26px rgba(255,122,26,.22)}
.btn::after{
  content:""; position:absolute; inset:auto 0 0 0; height:0;
  background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.26), rgba(255,255,255,0));
  transform:translateY(100%); transition:transform .35s ease;
}
.btn:hover::after{height:3px; transform:translateY(0%)}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ======================= LAYOUT ======================= */
.layout{
  display:grid; gap:16px; padding:18px;
  grid-template-columns: 1fr 380px;
}
@media (max-width:1100px){ .layout{grid-template-columns:1fr} }

.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-xl); box-shadow:var(--shadow); overflow:hidden;
}

/* ======================= LIVE BAR ======================= */
.live{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 18px
}
.kicker{font-weight:800; color:var(--accent)}
.headline{font-size:20px; font-weight:900}
.label{font-size:12px}
.live-right{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px;
  width:min(720px, 58vw);
}
.progress{height:12px; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:#0c0f15}
.progress.big{height:16px}
.progress .bar{height:100%; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3))}
.scan{background-image: repeating-linear-gradient( -45deg, rgba(255,255,255,.06) 0 8px, transparent 8px 16px)}
.scan .bar{position:relative}
.scan .bar::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient( -45deg, rgba(0,0,0,.0) 0 12px, rgba(0,0,0,.1) 12px 24px);
  mix-blend-mode:overlay; pointer-events:none; animation:scan-move 1.2s linear infinite;
}
@keyframes scan-move{from{background-position:0 0}to{background-position:60px 0}}
.time{font-weight:900; font-variant-numeric:tabular-nums}

/* subtle hover glitch */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text); position:absolute; inset:0; pointer-events:none; opacity:.0;}
.glitch:hover::before{opacity:.26; transform:translate(1px,-1px); color:#ffc267}
.glitch:hover::after{opacity:.26; transform:translate(-1px,1px); color:#ff7a1a}

/* ======================= HEATS GRID ======================= */
.heats-panel{display:grid; grid-auto-rows:min-content}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:linear-gradient(180deg, rgba(255,122,26,.05), rgba(255,122,26,.02))
}
.heats{
  display:grid; gap:14px; padding:14px;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
}
@media (max-width:1400px){ .heats{grid-template-columns: repeat(3, minmax(240px, 1fr))} }
@media (max-width:980px){ .heats{grid-template-columns: repeat(2, minmax(240px, 1fr))} }
@media (max-width:640px){ .heats{grid-template-columns: 1fr} }

.heat{
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, #0f1219, #0e1117);
  padding:12px; display:grid; gap:10px;
  box-shadow: inset 0 0 0 1px rgba(255,122,26,.07), 0 10px 30px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .2s ease;
}
.heat:hover{transform:translateY(-2px); box-shadow:0 20px 40px rgba(255,122,26,.18)}
.hhead{display:flex; align-items:center; justify-content:space-between}
.tag{font-size:12px; padding:3px 10px; border:1px solid var(--line); border-radius:999px; background:#12161f}
.slots{display:grid; gap:8px}
.slot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border:1px solid #1b2030; border-radius:10px; background:#0e1117; font-size:12px
}
.slot:hover{border-color:#272f45; background:#10141d}
.slot .muted{color:#8390a3}

/* ======================= RIGHT COLUMN ======================= */
.side{display:grid; grid-template-rows:auto auto 1fr; gap:12px; padding:12px}
.side-head{
  padding:12px 14px; font-weight:900; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,122,26,.06), rgba(255,122,26,.02))
}
.search{display:flex; gap:8px; padding:0 12px}
input[type="text"]{
  flex:1; padding:12px 14px; border-radius:10px; border:1px solid #242a3a;
  background:#0d1016; color:var(--ink)
}
.board{max-height:420px; overflow:auto; display:grid; gap:8px; padding:0 12px 12px}
.row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border:1px solid #1b2030; border-radius:10px; background:#0e1117}
.tiny{font-size:12px}

/* ======================= SKELETON ======================= */
.skeleton{padding:12px}
.skeleton .row.sk{
  height:38px; border-radius:10px;
  background:linear-gradient(90deg,#141a22 0%,#1a2130 40%,#141a22 80%);
  margin-bottom:8px; animation:shine 1.3s linear infinite
}
@keyframes shine{0%{background-position:-200px 0} 100%{background-position:200px 0}}
.skeleton .tiny{padding:4px 2px}

/* ======================= MODALS ======================= */
.modal{position:fixed; inset:0; display:none; place-items:center; z-index:9999}
.modal[aria-hidden="false"]{display:grid}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(8px)}
.modal-card{
  position:relative; z-index:1; width:min(1120px,96vw);
  border-radius:18px; overflow:hidden; background:var(--panel);
  border:1px solid #1f2736; box-shadow:var(--shadow);
}
.close{
  position:absolute; right:12px; top:10px; width:40px; height:40px; border-radius:10px;
  border:1px solid #1f2736; background:#0f131b; color:#fff
}
.viewer-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-bottom:1px solid #1f2736;
  background:linear-gradient(180deg, rgba(255,122,26,.06), rgba(255,122,26,.03))
}
.viewer-title{display:flex; align-items:center; gap:8px}
.chip{padding:2px 8px; background:#11271f; border:1px solid #1c3a2c; border-radius:999px; color:#00f5a0; font-weight:800; font-size:12px}
.viewer-tools{display:flex; align-items:center; gap:10px}

/* ======================= INTRO (onboarding) ======================= */
.modal-card.intro{
  width: min(980px, 96vw);
  display: grid; grid-template-rows: auto 1fr; gap: 0; padding:0;
  border-radius: 18px;
}
.intro-media{margin:0; width:100%; aspect-ratio:21/9; background:#0f1218; overflow:hidden; border-bottom:1px solid #1f2736; position:relative}
.intro-banner{width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.05) saturate(1.1) brightness(.9)}
.scanline{position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,0)); mix-blend-mode:overlay; pointer-events:none; animation:scan-vert 3s linear infinite}
@keyframes scan-vert{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

.intro-content{padding: 22px 26px 20px; display:grid; gap:12px}
.intro-badge{display:inline-block; padding:6px 10px; border-radius:999px; background:#2a1a0e; border:1px solid #3a2413; color:#ff8a00; font-weight:800}
.neon-text{text-shadow:0 0 18px rgba(255,122,26,.35)}
.lead{font-size:16px; font-weight:700; margin:6px 0 2px}
.bullets{margin: 2px 0 0 18px; padding: 0}
.bullets li{margin: 6px 0; line-height: 1.35}
.pill{display:inline-block; margin:0 6px 6px 0; padding:4px 10px; border-radius:999px; background:#141a22; border:1px solid #222a3a; font-weight:800; white-space:nowrap}
.cta{display:flex; gap:10px; margin-top: 8px; flex-wrap: wrap}

/* ======================= TRACK AREA ======================= */
.track-rect{
  position:relative; width:100%; height:min(60vw,560px);
  background-image:url(images/track_bg.png);
  border:18px solid transparent; border-image:url(images/outer.png) 16 round;
  overflow:hidden;
}
.track-rect::before{
  content:''; position:absolute; inset:12% 8%;
  background-image:url(images/asphalt.png);
  border:16px solid transparent; border-image:url(images/inner.png) 16 fill round; border-radius:14px;
}
.tree{position:absolute; right:10%; top:36%; width:140px; pointer-events:none; filter:drop-shadow(0 0 12px rgba(0,0,0,.6))}
.startline{
  position:absolute; left:12%; top:10%; width:12px; height:80%;
  background:linear-gradient(45deg,#000 25%,#fffc 25%,#fffc 50%,#000 50%,#000 75%,#fffc 75%);
  background-size:12px 12px; border-radius:3px; z-index:2
}

/* ======================= VEHICLE SPRITES ======================= */
/* We support BOTH .car* and legacy .horse* classes to avoid JS refactors. */
.car,.horse{position:absolute; transform:translate(-50%,-50%); z-index:3}

/* horizontal sprites */
.car.runLeft,.car.runRight,.horse.runLeft,.horse.runRight{
  width:96px; height:60px; background-image:url(images/car_sprites.png)
}
/* vertical sprites */
.car.runUp,.car.runDown,.horse.runUp,.horse.runDown{
  width:48px; height:64px; background-image:url(images/car_sprites.png)
}

/* adapt rider placeholders (legacy DOM) — keep zero size for cars */
.horse .rider{position:absolute; left:40px; top:8px}
.horse .rider .head,.horse .rider .body{width:0; height:0; background:none}

/* animations */
.car.runRight,.horse.runRight{background-position:0 -320px; animation:vRight steps(1) .5s infinite}
.car.runLeft,.horse.runLeft{background-position:0 -256px; animation:vLeft steps(1) .5s infinite}
.car.runDown,.horse.runDown{background-position:48px 192px; animation:vDown steps(1) .75s infinite}
.car.runUp,.horse.runUp{background-position:0 192px; animation:vUp steps(1) .75s infinite}

@keyframes vRight{0%,100%{background-position:0 -320px}50%{background-position:0 -512px}}
@keyframes vLeft{0%,100%{background-position:0 -256px}50%{background-position:0 -450px}}
@keyframes vDown{0%,100%{background-position:48px -192px}33%{background-position:48px -380px}66%{background-position:48px 0}}
@keyframes vUp{0%,100%{background-position:0 -192px}33%{background-position:0 -380px}66%{background-position:0 0}}

/* ======================= LEGEND ======================= */
.legend{padding:10px; display:grid; gap:8px; background:linear-gradient(180deg, rgba(255,122,26,.05), rgba(255,122,26,.02))}
.legend .row{background:#0e1117; border:1px solid #1b2030}

/* ======================= SMALL TWEAKS ======================= */
@media (max-width: 520px){
  .intro-content{padding:18px}
  .intro-content h1{font-size:22px}
}