/* USAGE GRAND PRIX — broadcast dashboard.
   Adapted from the design handoff "Usage Grand Prix". This file owns the
   entire visual language; we deliberately do NOT link parkit's base.css
   here because the broadcast aesthetic (CRT scanlines, neon, JetBrains
   Mono everywhere) diverges from the rest of PärKit. The two racers' lane
   colors come from inline --c (set per-fighter) and --par / --sj (the
   defaults). */

:root{
  --bg:        #07070a;
  --bg-2:      #0e0e15;
  --ink:       #f6f5ef;
  --ink-dim:   rgba(246, 245, 239, .55);
  --ink-faint: rgba(246, 245, 239, .18);
  --line:      rgba(246, 245, 239, .10);

  /* Racers */
  --par: #ff4fa3;     /* Pär — hot pink hedgehog */
  --sj:  #3df0ff;     /* SJ  — electric cyan bee */

  /* Status */
  --hot:  #ff3b3b;    /* sprint / ≥ 90 % */
  --warn: #ffb000;    /* ≥ 70 % */
  --cool: #3df0ff;    /* < 25 % */
  --gold: #ffd23f;    /* DIREKT wedge / brand gradient */
}

*{box-sizing:border-box;margin:0;padding:0}

html{font-size:15px}
body{
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(61, 240, 255, .08), transparent 60%),
    radial-gradient(1000px 500px at 10% 110%, rgba(255, 79, 163, .08), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  min-height:100vh;
  overflow-x:hidden;
}
/* CRT scanlines — subtle but defines the broadcast feel. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.025) 0px,
    rgba(255,255,255,.025) 1px,
    transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}
/* Vignette */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.6) 100%);
}

/* Type helpers */
.display, .logo, .lane .label, .name, .plan, .ttl, .head, .reel h3, .kind, .who, .weather{
  font-family:"Bungee", sans-serif;letter-spacing:.02em;
}
.mono{font-family:"JetBrains Mono", monospace}

a{color:var(--par);text-decoration:none}
a:hover{text-decoration:underline}

/* ─── App scaffold ─── */
#app{max-width:1480px;margin:0 auto;padding:18px 20px 100px}

/* ─── Broadcast header ─── */
.header{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:14px 18px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  position:relative;overflow:hidden;
}
.brand{display:flex;align-items:center;gap:14px}
.brand-meta{min-width:0}
.brand .logo{
  font-size:32px;line-height:.9;
  background:linear-gradient(180deg,#fff 30%, var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(255,210,63,.35);
}
.brand-meta{display:flex;flex-direction:column;gap:6px}
.sub{
  font-size:11px;color:var(--ink-dim);letter-spacing:.18em;text-transform:uppercase;
}
.brand-pills{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.onair{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border:1px solid var(--hot);border-radius:6px;
  color:var(--hot);font-family:"Bungee",sans-serif;font-size:12px;
  animation:onair-blink 1.6s steps(2,end) infinite;
  box-shadow:0 0 20px rgba(255,59,59,.35), inset 0 0 8px rgba(255,59,59,.2);
}
.onair .dot{width:8px;height:8px;border-radius:50%;background:var(--hot);box-shadow:0 0 12px var(--hot)}
@keyframes onair-blink{50%{opacity:.4}}

.round{text-align:center;min-width:0}
.round .round-label{
  font-family:"Bungee",sans-serif;font-size:20px;letter-spacing:.06em;
}

.filters{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pillrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pill{
  appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink-dim);
  padding:6px 10px;border-radius:999px;
  font:600 11px/1 "JetBrains Mono", monospace;letter-spacing:.08em;
  cursor:pointer;text-transform:uppercase;transition:background .12s, color .12s, border-color .12s;
  font-family:inherit;
}
.pill:hover{color:var(--ink);border-color:var(--ink-dim)}
.pill.on{background:var(--ink);color:#000;border-color:var(--ink)}

.pill.live{
  color:var(--par);border-color:color-mix(in srgb, var(--par) 50%, transparent);
  background:color-mix(in srgb, var(--par) 8%, transparent);
  animation:livepulse 1.2s ease-in-out infinite;
  text-transform:none;
  cursor:help;
}
.pill.live .live-count{font-weight:700;margin-right:4px}
@keyframes livepulse{
  50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--par) 0%, transparent)}
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--par) 50%, transparent)}
}
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .pill.live{background:rgba(255,79,163,.08);border-color:rgba(255,79,163,.5)}
}

/* ─── Ticker ─── */
.ticker{
  margin-top:10px;border:1px solid var(--line);border-radius:10px;
  background:linear-gradient(90deg, rgba(255,210,63,.08), rgba(255,210,63,0));
  overflow:hidden;display:flex;align-items:stretch;height:38px;
}
.ticker .badge{
  display:flex;align-items:center;
  padding:0 24px 0 14px;background:var(--gold);color:#0a0a0a;
  font-family:"Bungee",sans-serif;font-size:13px;letter-spacing:.05em;
  clip-path:polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  white-space:nowrap;
}
.ticker .stream{flex:1;overflow:hidden;position:relative;display:flex;align-items:center}
.ticker .track{
  display:flex;gap:46px;white-space:nowrap;
  animation:ticker 60s linear infinite;
  padding-left:20px;font-size:13px;color:var(--ink);
}
.ticker .track span b{color:var(--gold);margin-right:6px;font-family:"Bungee",sans-serif}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ─── Race track ─── */
.track-wrap{
  margin-top:18px;border:1px solid var(--line);border-radius:14px;
  background:
    radial-gradient(800px 240px at 50% 50%, rgba(255,255,255,.04), transparent 70%),
    linear-gradient(180deg,#0b0b12, #08080d);
  padding:18px 18px 22px;position:relative;overflow:hidden;
}
.track-wrap::before{
  /* stadium lights */
  content:"";position:absolute;left:-10%;right:-10%;top:-30px;height:80px;
  background:
    radial-gradient(50% 100% at 25% 0,#fff,transparent 60%),
    radial-gradient(50% 100% at 75% 0,#fff,transparent 60%);
  opacity:.06;pointer-events:none;
}
.track-meta{
  display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px;gap:12px;
}
.track-meta .ttl{font-family:"Bungee",sans-serif;font-size:18px;letter-spacing:.06em}
.track-meta .ttl .accent{color:var(--gold)}
.track-meta .stat{font-size:11px;color:var(--ink-dim);letter-spacing:.12em;text-transform:uppercase;text-align:right}

.lanes{display:flex;flex-direction:column;gap:10px}

.lane{
  --c: var(--par);
  position:relative;height:78px;border:1px solid rgba(255,255,255,.06);
  border-radius:10px;overflow:hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 60px),
    linear-gradient(180deg,#0a0a10,#0d0d15);
}
.lane .label{
  position:absolute;left:12px;top:8px;display:flex;align-items:center;gap:8px;
  font-family:"Bungee",sans-serif;font-size:14px;color:var(--c);
  text-shadow:0 0 12px color-mix(in srgb, var(--c) 60%, transparent);
  z-index:3;max-width:calc(100% - 76px);min-width:0;
}
.lane .label .lane-no{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--c);color:#000;font-size:11px;
  box-shadow:0 0 14px var(--c);
}
.lane .label .host{
  color:var(--ink-dim);font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.08em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lane .pct{
  position:absolute;right:12px;top:8px;
  max-width:38%;text-align:right;
  font:700 12px/1.15 "JetBrains Mono", monospace;color:var(--c);
  text-shadow:0 0 8px color-mix(in srgb, var(--c) 50%, transparent);z-index:3;
}
.lane .bar{
  position:absolute;left:0;right:0;bottom:0;height:34px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--c) 12%, transparent),
    color-mix(in srgb, var(--c) 55%, transparent));
  width:var(--pct, 0%);
  transition:width .35s cubic-bezier(.22,1,.36,1);
}
.lane .pace-line{
  position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity:.55;z-index:2;
  box-shadow:0 0 10px rgba(255,210,63,.35);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .lane .bar{background:var(--c);opacity:.55}
}
.lane .bar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, transparent 0, rgba(255,255,255,.18) 50%, transparent 100%);
  transform:translateX(-100%);
  animation:lane-shimmer 3.2s ease-in-out infinite;
}
@keyframes lane-shimmer{
  50%{transform:translateX(120%)}
  100%{transform:translateX(120%)}
}

.lane .runner{
  /* left = pct of lane width, translateX(-50%) centers the runner on
     that point so the emoji rides the leading edge of the bar fill.
     The design's prototype animated transform:translateX(pct%) which
     resolves against the runner's own 54px width — visibly broken at
     real percentages. left:% resolves against the lane (parent), which
     is what we want. */
  position:absolute;bottom:6px;left:var(--pct, 0%);
  width:54px;height:54px;display:grid;place-items:center;
  transform:translateX(-50%);
  transition:left .35s cubic-bezier(.22,1,.36,1);
  z-index:4;pointer-events:none;
  filter:drop-shadow(0 0 12px var(--c));
}
.lane.crown .runner{animation:bob .9s ease-in-out infinite}
@keyframes bob{
  0%,100%{transform:translate(-50%, 0)}
  50%    {transform:translate(-50%, -4px)}
}
.lane .runner .emo{font-size:34px;line-height:1}
.lane .runner .crown{
  position:absolute;top:-12px;font-size:18px;
  filter:drop-shadow(0 0 8px var(--gold));
  animation:crown-wob 1.2s ease-in-out infinite;
}
@keyframes crown-wob{
  50%{transform:translateY(-3px) rotate(-6deg)}
  0%,100%{transform:translateY(0) rotate(6deg)}
}

/* sprint trail chevrons */
.lane.sprint .runner::before, .lane.sprint .runner::after{
  content:"⟫";position:absolute;font-family:"Bungee",sans-serif;color:var(--c);font-size:20px;
  left:-22px;top:50%;transform:translateY(-50%);opacity:.7;
  animation:trail .6s linear infinite;
}
.lane.sprint .runner::after{left:-40px;opacity:.4;animation-delay:.15s}
@keyframes trail{
  0%{transform:translate(0,-50%);opacity:.8}
  100%{transform:translate(-12px,-50%);opacity:0}
}

.lane .finish{
  position:absolute;right:0;top:0;bottom:0;width:14px;
  background-image:
    linear-gradient(45deg,#fff 25%,transparent 25%),
    linear-gradient(-45deg,#fff 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#fff 75%),
    linear-gradient(-45deg,transparent 75%,#fff 75%);
  background-size:8px 8px;
  background-position:0 0, 0 4px, 4px -4px, -4px 0;
  background-color:#000;
  animation:finishflag .4s linear infinite;
  z-index:2;
}
@keyframes finishflag{to{background-position:8px 0, 8px 4px, 12px -4px, 4px 0}}

.lane.empty{
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-dim);font-family:"JetBrains Mono",monospace;
  font-size:13px;letter-spacing:.04em;
  background:linear-gradient(180deg,#0a0a10,#0d0d15);
}

/* ─── Status bar (warnings, fetch errors, transient toasts) ─── */
.status-bar{
  margin:10px 0 0;
  font-size:12px;color:var(--ink-dim);
  min-height:14px;letter-spacing:.04em;
}
.status-bar.error{color:var(--hot)}
.status-bar.warn{color:var(--warn)}

/* ─── Fighter row + mascot booth ─── */
.row{display:grid;grid-template-columns:1fr 320px;gap:14px;margin-top:14px;align-items:stretch}
.fighters{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:1180px){
  .row{grid-template-columns:1fr}
  .fighters{grid-template-columns:1fr 1fr}
}
@media (max-width:740px){
  .fighters{grid-template-columns:1fr}
}

.fighter{
  --c: var(--par);
  border:1px solid color-mix(in srgb, var(--c) 35%, var(--line));
  border-radius:14px;padding:16px 16px 14px;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 60%),
    linear-gradient(180deg,#0a0a10,#070710);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 0 30px color-mix(in srgb, var(--c) 8%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .fighter{
    border-color:rgba(255,79,163,.35);
    background:linear-gradient(180deg,#0a0a10,#070710);
  }
}
.fighter::before{
  content:"";position:absolute;inset:-2px;border-radius:14px;pointer-events:none;
  background:linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, transparent), transparent 40%);
  mix-blend-mode:overlay;opacity:.5;
}
.fighter .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;min-width:0}
.fighter .who{display:flex;align-items:center;gap:12px}
.fighter .who > div{min-width:0}
.fighter .who .ava{
  width:64px;height:64px;display:grid;place-items:center;border-radius:14px;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c) 50%, #000), #000);
  border:1px solid color-mix(in srgb, var(--c) 60%, transparent);
  font-size:36px;line-height:1;
  box-shadow:0 0 24px color-mix(in srgb, var(--c) 40%, transparent), inset 0 0 18px rgba(0,0,0,.6);
}
.fighter .name{
  font-family:"Bungee",sans-serif;font-size:24px;line-height:1;color:var(--c);
  text-shadow:0 0 12px color-mix(in srgb, var(--c) 50%, transparent);
  overflow-wrap:anywhere;
}
.fighter .handle{
  font-size:11px;color:var(--ink-dim);letter-spacing:.1em;margin-top:4px;
  font-family:"JetBrains Mono",monospace;overflow-wrap:anywhere;
}
.fighter .plan{
  display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;
  border:1px solid color-mix(in srgb, var(--c) 60%, transparent);color:var(--c);
  font-family:"Bungee",sans-serif;font-size:11px;letter-spacing:.08em;
  white-space:nowrap;
}
.fighter .stats{
  margin-top:14px;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:8px;
}
.fighter .stat{
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  background:rgba(255,255,255,.02);min-width:0;
}
.fighter .stat .k{
  font-size:9px;letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase;
  font-family:"JetBrains Mono",monospace;overflow-wrap:anywhere;
}
.fighter .stat .v{
  font:800 22px/1 "JetBrains Mono", monospace;margin-top:4px;font-variant-numeric:tabular-nums;
}
.fighter .stat .v.schedule-v{
  font-size:12px;line-height:1.25;white-space:normal;
}
.fighter .stat .v .pct-sym{font-size:14px;font-weight:700}
.v.hot{color:var(--hot)}
.v.warn{color:var(--warn)}
.v.cool{color:var(--c)}

.fighter .spark{
  margin-top:12px;position:relative;height:42px;
  border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02);
  overflow:hidden;padding:6px;
}
.fighter .spark svg{width:100%;height:100%;display:block}

.fighter .meter{margin-top:12px}
.fighter .meter .lbl{
  display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em;
  color:var(--ink-dim);text-transform:uppercase;margin-bottom:4px;font-family:"JetBrains Mono",monospace;
}
.fighter .meter .bar{
  height:10px;border-radius:6px;background:rgba(255,255,255,.05);overflow:hidden;position:relative;
}
.fighter .meter .bar > i{
  display:block;height:100%;width:var(--w, 0%);
  background:linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, #fff));
  box-shadow:0 0 12px color-mix(in srgb, var(--c) 70%, transparent);
  transition:width .4s ease;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .fighter .meter .bar > i{background:var(--c)}
}
.fighter .effort{margin-top:8px}
.fighter .pace-meter{margin-top:8px}
.fighter .pace-meter .bar > i{
  background:linear-gradient(90deg, var(--gold), var(--c));
}
.fighter .effort .bar > i{
  width:97%;
  background:linear-gradient(90deg, var(--hot), var(--warn));
  animation:effort-pulse 1.4s ease-in-out infinite;
}
@keyframes effort-pulse{50%{filter:brightness(1.2) saturate(1.2)}}

.fighter .moves{
  margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:6px;
  font-size:10px;color:var(--ink);letter-spacing:.05em;
}
.fighter .moves .mv{
  border:1px dashed color-mix(in srgb, var(--c) 40%, var(--line));
  border-radius:6px;padding:6px 8px;background:rgba(255,255,255,.02);
  font-family:"JetBrains Mono",monospace;
}
.fighter .moves .mv b{
  color:var(--c);display:block;font-family:"Bungee",sans-serif;
  font-size:11px;letter-spacing:.06em;margin-bottom:2px;font-weight:400;
}
.fighter .moves .mv span{color:var(--ink-dim)}

.fighter.empty .stats,.fighter.empty .spark,.fighter.empty .meter,.fighter.empty .moves{
  opacity:.35;
}
.fighter .empty-msg{
  margin-top:12px;font-family:"JetBrains Mono",monospace;
  font-size:11px;color:var(--ink-dim);letter-spacing:.06em;
}

/* ─── Mascot column ─── */
.mascot{
  border:1px solid var(--line);border-radius:14px;padding:14px;
  background:linear-gradient(180deg,#0a0a12,#070710);
  display:flex;flex-direction:column;min-height:320px;
}
.mascot .head{
  display:flex;justify-content:space-between;align-items:center;
  font-family:"Bungee",sans-serif;font-size:13px;letter-spacing:.06em;color:var(--gold);
}
.mascot .head .gap{
  font-size:10px;color:var(--ink-dim);font-family:"JetBrains Mono",monospace;letter-spacing:.08em;
  font-weight:400;
}
.mascot .stage{
  margin-top:10px;flex:1;min-height:200px;border-radius:10px;
  background:
    radial-gradient(60% 60% at 50% 100%, rgba(255,210,63,.10), transparent 70%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px);
  border:1px solid rgba(255,255,255,.05);
  position:relative;display:flex;align-items:flex-end;justify-content:center;padding:14px;
}
.tama{
  --eye: #7cff7c;
  --glow: rgba(255,210,63,.35);
  width:132px;height:126px;line-height:1;
  position:relative;display:block;
  filter:drop-shadow(0 0 20px var(--glow));
  animation:tama-bob 2.2s ease-in-out infinite;
  cursor:default;user-select:none;
}
@keyframes tama-bob{50%{transform:translateY(-6px) rotate(-2deg)}}
.cat-body{
  position:absolute;left:30px;bottom:10px;width:74px;height:62px;
  background:linear-gradient(160deg,#20202a,#030305 70%);
  border-radius:48% 48% 42% 42%;
  box-shadow:inset 10px 8px 14px rgba(255,255,255,.05), inset -10px -10px 18px rgba(0,0,0,.8);
}
.cat-head{
  position:absolute;left:26px;top:24px;width:80px;height:70px;
  background:linear-gradient(145deg,#1d1d26,#020204 72%);
  border-radius:46% 46% 42% 42%;
  box-shadow:inset 8px 7px 12px rgba(255,255,255,.055), inset -9px -10px 18px rgba(0,0,0,.86);
}
.cat-ear{
  position:absolute;top:-14px;width:31px;height:34px;
  background:#08080d;border-radius:6px 80% 4px 80%;
  transform:rotate(33deg);
  box-shadow:inset 5px 5px 0 rgba(255,79,163,.12);
}
.cat-ear.left{left:5px}
.cat-ear.right{right:5px;transform:scaleX(-1) rotate(33deg)}
.cat-eye{
  position:absolute;top:27px;width:15px;height:19px;
  background:radial-gradient(circle at 58% 42%, #0a0a0a 0 20%, var(--eye) 22% 100%);
  border-radius:50%;
  box-shadow:0 0 10px color-mix(in srgb, var(--eye) 70%, transparent);
}
.cat-eye.left{left:20px}
.cat-eye.right{right:20px}
.cat-nose{
  position:absolute;left:50%;top:47px;width:7px;height:5px;
  transform:translateX(-50%);
  background:#141419;border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
.cat-whiskers{
  position:absolute;top:49px;width:27px;height:12px;
  border-top:1px solid rgba(246,245,239,.42);
  border-bottom:1px solid rgba(246,245,239,.22);
}
.cat-whiskers.left{left:-10px;transform:rotate(8deg)}
.cat-whiskers.right{right:-10px;transform:rotate(-8deg)}
.cat-tail{
  position:absolute;right:4px;bottom:32px;width:52px;height:68px;
  border:13px solid #07070b;border-left:0;border-bottom:0;
  border-radius:0 54px 0 0;
  transform:rotate(10deg);
  transform-origin:bottom left;
  animation:tail-flick 3.4s ease-in-out infinite;
}
@keyframes tail-flick{
  45%{transform:rotate(18deg)}
  55%{transform:rotate(4deg)}
}
.bubble{
  position:absolute;top:14px;left:14px;right:14px;
  background:#fff;color:#0a0a0a;border-radius:12px;padding:10px 12px 12px;
  font-family:"JetBrains Mono",monospace;font-size:12px;line-height:1.45;
  box-shadow:0 8px 0 rgba(0,0,0,.4);
}
.bubble::after{
  content:"";position:absolute;left:42%;bottom:-8px;border:8px solid transparent;
  border-top-color:#fff;border-bottom:0;
}
.bubble b{font-family:"Bungee",sans-serif;color:#000}
.mascot .actions{
  margin-top:10px;display:flex;gap:6px;flex-wrap:wrap;
}
.mascot .actions button{
  appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--ink);
  font:600 10px/1 "JetBrains Mono", monospace;letter-spacing:.06em;
  padding:8px 10px;border-radius:6px;cursor:pointer;text-transform:uppercase;
  transition:border-color .12s, color .12s;
}
.mascot .actions button:hover{border-color:var(--gold);color:var(--gold)}

/* mood-driven tama tweaks */
.tama.mood-chill{--eye:#7cff7c;--glow:rgba(57,255,141,.45)}
.tama.mood-watching{--eye:#ffd23f;--glow:rgba(255,210,63,.45)}
.tama.mood-worried{--eye:#ffb000;--glow:rgba(255,176,0,.5)}
.tama.mood-feral{
  --eye:#ff3b3b;--glow:rgba(255,59,59,.55);
  animation:tama-vibe .35s ease-in-out infinite;
}
.tama.mood-dead{--eye:#f6f5ef;--glow:rgba(246,245,239,.2);filter:grayscale(.65) drop-shadow(0 0 14px var(--glow))}
.tama.mood-dead .cat-eye{height:3px;top:35px;border-radius:2px;background:var(--eye)}
.tama.mood-worried .cat-eye{height:24px;top:23px}
.tama.mood-feral .cat-ear.left{transform:rotate(20deg)}
.tama.mood-feral .cat-ear.right{transform:scaleX(-1) rotate(20deg)}
@keyframes tama-vibe{50%{transform:translate(2px,-3px) rotate(3deg)}}

/* ─── Reel ─── */
.reel{
  margin-top:14px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,#0a0a12,#08080f);
  padding:14px 16px;
}
.reel h3{
  margin:0 0 8px;
  font-family:"Bungee",sans-serif;font-size:14px;letter-spacing:.06em;color:var(--ink);
  font-weight:400;
}
.reel h3 .accent{color:var(--gold)}
.reel ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px;
  max-height:240px;overflow:auto;
}
.reel li{
  --c: var(--gold);
  display:grid;grid-template-columns:auto auto minmax(0, 1fr) auto;gap:10px;align-items:center;
  border-left:3px solid var(--c);
  padding:8px 10px;background:rgba(255,255,255,.02);border-radius:6px;font-size:12px;
}
.reel li .kind{
  font-family:"Bungee",sans-serif;font-size:11px;color:var(--c);letter-spacing:.06em;
}
.reel li .who{font-family:"Bungee",sans-serif;color:#fff;font-size:11px}
.reel li .body{color:var(--ink-dim);font-family:"JetBrains Mono",monospace;min-width:0;overflow-wrap:anywhere}
.reel li .ts{
  color:var(--ink-faint);font-size:10px;font-variant-numeric:tabular-nums;
  font-family:"JetBrains Mono",monospace;
}
.reel li.kind-sprint{--c: var(--hot)}
.reel li.kind-reset{--c: var(--par)}
.reel li.kind-meltdown{--c: #ff8a3d}
.reel li.kind-confetti{--c: var(--gold)}
.reel li.fresh{animation:freshpop .9s ease-out}
@keyframes freshpop{
  0%{transform:translateY(-6px) scale(.98);background:rgba(255,255,255,.12)}
  100%{transform:none;background:rgba(255,255,255,.02)}
}
.reel li.empty-row{
  --c: var(--ink-faint);
  color:var(--ink-dim);font-style:italic;
}

/* ─── HUD ─── */
.hud{margin-top:14px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}
@media (max-width:880px){.hud{grid-template-columns:1fr 1fr}}
.hud .cell{
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  background:linear-gradient(180deg,#0a0a12,#08080f);position:relative;overflow:hidden;
}
.hud .cell .k{
  font-size:9px;letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase;
  font-family:"JetBrains Mono",monospace;
}
.hud .cell .v{
  font:800 24px/1 "JetBrains Mono", monospace;margin-top:6px;font-variant-numeric:tabular-nums;
}
.hud .cell .v.hot{color:var(--hot)}
.hud .cell .v.par-c{color:var(--par)}
.hud .cell .v.lead{color:var(--cool);font-size:18px}
.hud .cell .lead-sub{
  font-size:10px;color:var(--ink-dim);margin-top:4px;font-style:italic;
}
.hud .v.weather{
  color:var(--gold);font-size:14px;letter-spacing:.04em;
  font-family:"Bungee",sans-serif;font-weight:400;
}

.hud .cell.countdown{
  grid-column:1 / -1;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;
}
.hud .cell.countdown .cd-sub{
  font-size:11px;color:var(--ink-dim);margin-top:2px;font-style:italic;
}
.hud .cell.countdown .v{color:var(--ink)}
.hud .cell.countdown .polling-dot{
  display:flex;align-items:center;gap:6px;font-size:10px;color:var(--ink-dim);
  letter-spacing:.12em;text-transform:uppercase;
  font-family:"JetBrains Mono",monospace;
}
.hud .cell.countdown .polling-dot .dot{
  width:8px;height:8px;border-radius:50%;background:var(--par);
  box-shadow:0 0 8px var(--par);animation:polldot 1.6s ease-in-out infinite;
}
@keyframes polldot{50%{opacity:.4}}

/* ─── Confetti / flash / shake / toast ─── */
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.conf{
  position:absolute;top:-12px;width:8px;height:14px;border-radius:1px;
  animation:confdrop 4.5s linear forwards;will-change:transform;
}
@keyframes confdrop{
  0%{transform:translateY(-20px) rotate(0)}
  100%{transform:translateY(110vh) rotate(720deg)}
}

.flash{
  position:fixed;inset:0;pointer-events:none;z-index:60;
  background:radial-gradient(60% 50% at 50% 50%, rgba(255,255,255,.15), transparent 70%);
  opacity:0;
}
.flash.go{animation:flashgo .9s ease-out}
@keyframes flashgo{
  0%{opacity:0}
  20%{opacity:1}
  100%{opacity:0}
}

body.shake{animation:shake .5s linear}
@keyframes shake{
  10%{transform:translate(2px,1px)}
  20%{transform:translate(-3px,-2px)}
  30%{transform:translate(4px,-1px)}
  40%{transform:translate(-2px,3px)}
  50%{transform:translate(3px,2px)}
  60%{transform:translate(-4px,-1px)}
  70%{transform:translate(2px,-2px)}
  80%{transform:translate(-2px,1px)}
  90%{transform:translate(1px,2px)}
}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%, 20px);
  background:#fff;color:#000;padding:10px 16px;border-radius:8px;
  font:700 12px/1.2 "JetBrains Mono", monospace;letter-spacing:.04em;
  box-shadow:0 8px 0 rgba(0,0,0,.4), 0 0 30px rgba(255,210,63,.3);
  z-index:70;opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.toast.show{opacity:1;transform:translate(-50%, 0)}

/* ─── Footer ─── */
.dash-footer{
  margin-top:24px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;
  font-size:11px;color:var(--ink-dim);letter-spacing:.04em;flex-wrap:wrap;gap:8px;
  font-family:"JetBrains Mono",monospace;
}
.dim{color:var(--ink-dim)}

/* ─── Mobile ─── */
@media (max-width:880px){
  .header{grid-template-columns:1fr;gap:10px}
  .filters{align-items:flex-start}
  .round{text-align:left}
  .brand .logo{font-size:26px}
}
@media (max-width:600px){
  html{font-size:14px}
  #app{padding:14px 12px 80px}
  .brand{align-items:flex-start}
  .sub{letter-spacing:.12em}
  .track-meta{align-items:flex-start;flex-direction:column}
  .track-meta .stat{text-align:left}
  .lane{height:64px}
  .lane .label{font-size:12px;gap:6px;max-width:calc(100% - 58px)}
  .lane .label .host{display:none}
  .lane .pct{right:8px;font-size:12px}
  .lane .runner{width:42px;height:42px}  /* transform stays translateX(-50%) from the base rule */
  .lane.crown .runner{animation:none}
  .lane .runner .emo{font-size:26px}
  .fighter{padding:14px 12px}
  .fighter .top{flex-wrap:wrap}
  .fighter .who .ava{width:52px;height:52px;font-size:30px;border-radius:10px}
  .fighter .name{font-size:20px}
  .fighter .stats{grid-template-columns:repeat(2, minmax(0, 1fr));gap:6px}
  .fighter .stat{padding:7px 6px}
  .fighter .stat .v{font-size:19px}
  .fighter .moves{grid-template-columns:1fr}
  .mascot .head{align-items:flex-start;flex-direction:column;gap:4px}
  .reel li{grid-template-columns:auto 1fr auto}
  .reel li .body{grid-column:1 / -1}
  .hud{grid-template-columns:1fr}
  .hud .cell.countdown{grid-template-columns:1fr auto}
  .hud .cell.countdown .polling-dot{grid-column:1 / -1}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
  .ticker .track{animation:none}
  .ticker .stream{overflow:auto}
  .lane .bar::after{display:none}
  body.shake{animation:none}
  .flash.go{animation:none;opacity:0}
  .conf{display:none}
}