/* ====== MATRIX ORANGE THEME ====== */
:root{
  --bg:#0a0a0a;
  --grid:#11131a;
  --panel:#0f1116;
  --panel-2:#12151d;
  --ink:#f5f5f5;
  --muted:#9aa3ad;
  --line:#1e2533;

  --accent:#ff6a00;     /* neon orange */
  --accent-2:#ff8a00;   /* amber */
  --accent-3:#ffb347;   /* peach */
  --good:#00f5a0;

  --radius-xl:22px;
  --shadow:0 18px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.02);
  --glow:0 0 0.8rem rgba(255,106,0,.55), 0 0 2.2rem rgba(255,138,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; color:var(--ink); background:var(--bg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;}
code{font-family:inherit}

/* BACKDROP MATRIX CANVAS */
#bg-matrix{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(255,106,0,.12) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(1000px 500px at 120% 120%, rgba(255,138,0,.12) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #090909 0%, #060606 100%);
}
.theme-matrix::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(0deg, transparent 0 49%, rgba(255,106,0,.05) 50%, transparent 51%),
    linear-gradient(90deg, transparent 0 49%, rgba(255,106,0,.05) 50%, transparent 51%);
  background-size: 100% 22px, 22px 100%;
  opacity:.35;
}

/* 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,.82), rgba(10,12,18,.82));
  border:1px solid #1f2736;
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,106,0,.05) inset;
}
.neon{box-shadow: var(--glow)}
.neon-frame{box-shadow: inset 0 0 0 2px rgba(255,106,0,.35), inset 0 0 24px rgba(255,106,0,.22)}

/* 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}
.splash.glow{filter:drop-shadow(0 0 10px rgba(255,106,0,.6))}
.muted{color:var(--muted)}
.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;
}
.tab:hover{transform:translateY(-1px); box-shadow:0 4px 18px rgba(255,106,0,.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,106,0,.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, #ff8a00, #ff6a00); border-color:#ff7a00; color:#101217; box-shadow:0 10px 30px rgba(255,106,0,.25)}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 26px rgba(255,106,0,.2)}
.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,.28), 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 360px}
@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 */
.live{display:flex; align-items:center; justify-content:space-between; 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 auto auto; align-items:center; gap:10px}
.progress{height:12px; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:#0c0e13}
.progress.big{height:16px; width:min(560px, 48vw)}
.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}

/* GLITCH small effect for headline */
.glitch{position:relative}
.glitch::before,.glitch::after{
  content:attr(data-text); content:attr(data-text);
  position:absolute; inset:0; pointer-events:none; opacity:.0;
}
.glitch:hover::before{opacity:.3; transform:translate(1px,-1px); color:#ffb347}
.glitch:hover::after{opacity:.3; transform:translate(-1px,1px); color:#ff6a00}

/* HEATS */
.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,106,0,.04), rgba(255,106,0,.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,106,0,.06), 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,106,0,.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}

/* 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,106,0,.05), rgba(255,106,0,.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,106,0,.06), rgba(255,106,0,.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,106,0,.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 (keep sprite layout) */
.track-rect{
  position:relative; width:100%; height:min(60vw,560px);
  background-image:url(images/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/mud.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}

/* HORSE SPRITES (as before) */
.horse{position:absolute; transform:translate(-50%,-50%); z-index:3}
.horse.runLeft,.horse.runRight{width:96px; height:60px; background-image:url(images/horse2.png)}
.horse.runUp,.horse.runDown{width:48px; height:64px; background-image:url(images/horse2.png)}
.horse .rider{position:absolute; left:40px; top:8px}
.horse .rider .head{width:32px; height:32px; background-image:url(images/head0.png)}
.horse .rider .body{width:32px; height:32px; background-image:url(images/body0.png)}
.horse.runRight{background-position:0 -320px; animation:horseRight steps(1) .5s infinite}
.horse.runRight .rider .body{background-position:-96px -320px}
.horse.runRight .rider .head{background-position:0 -96px}
@keyframes horseRight{0%,100%{background-position:0 -320px}50%{background-position:0 -512px}}
.horse.runLeft{background-position:0 -256px; animation:horseLeft steps(1) .5s infinite}
.horse.runLeft .rider .body{background-position:-32px -320px}
.horse.runLeft .rider .head{background-position:0 -32px}
@keyframes horseLeft{0%,100%{background-position:0 -256px}50%{background-position:0 -450px}}
.horse.runDown{background-position:48px 192px; animation:horseDown steps(1) .75s infinite}
.horse.runDown .rider{left:8px; top:-8px}
.horse.runDown .rider .body{background-position:-64px -320px}
.horse.runDown .rider .head{background-position:0 -64px}
@keyframes horseDown{0%,100%{background-position:48px -192px}33%{background-position:48px -380px}66%{background-position:48px 0}}
.horse.runUp{background-position:0 192px; animation:horseUp steps(1) .75s infinite}
.horse.runUp .rider{left:8px; top:-8px}
.horse.runUp .rider .body{background-position:0 -320px}
.horse.runUp .rider .head{background-position:0 0}
@keyframes horseUp{0%,100%{background-position:0 -192px}33%{background-position:0 -380px}66%{background-position:0 0}}

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

/* Small responsive tweaks */
@media (max-width: 520px){
  .intro-content{padding:18px}
  .intro-content h1{font-size:22px}
}