/* MeowKuda — playable race simulation (2026-09-27)
 * Self-contained stylesheet for /sim. Mobile-first (Android WebView), no hover-only
 * affordances. Does NOT depend on site.css so a shared-file edit can never break it.
 *
 * 2026-09-27: back to the LANE view. The lane area's background is painted from the RACE'S
 * OWN surface — .track-turf (green) / .track-aw (sand) / .track-neutral (fallback).
 */
:root{
  --bg:#07070f; --bg2:#0c0c1a; --card:rgba(16,16,40,0.72);
  --border:rgba(255,255,255,0.08); --border2:rgba(255,255,255,0.16);
  --gold:#f0b90b; --gold2:#e8a400; --gold3:#fcd34d;
  --accent:#dc2626; --green:#10b981; --cyan:#22d3ee; --purple:#8b5cf6;
  --text:#f1f5f9; --text2:#94a3b8; --text3:#64748b;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:radial-gradient(1200px 700px at 20% -10%,rgba(220,38,38,.18),transparent 60%),
             radial-gradient(900px 600px at 110% 110%,rgba(240,185,11,.12),transparent 60%),
             var(--bg);
  color:var(--text); min-height:100vh; padding:10px 10px 34px;
  -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:820px;margin:0 auto}
a{color:var(--gold3)}

/* ── header ── */
.sim-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.brand{font-weight:800;letter-spacing:.5px;font-size:15px}
.brand span{color:var(--gold)}
.back{font-size:12px;color:var(--text2);text-decoration:none;border:1px solid var(--border);
      border-radius:999px;padding:5px 11px;white-space:nowrap}
.back:active{background:rgba(255,255,255,.06)}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
      padding:12px;margin-bottom:10px;backdrop-filter:blur(6px)}
.race-head h1{font-size:16px;font-weight:800;line-height:1.25}
.race-sub{color:var(--text2);font-size:12px;margin-top:3px;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.chip{font-size:11px;font-weight:600;border:1px solid var(--border2);border-radius:999px;
      padding:3px 9px;color:var(--text);background:rgba(255,255,255,.04);white-space:nowrap}
.chip.gold{color:#1b1402;background:var(--gold);border-color:var(--gold)}
.chip.cyan{color:#04222a;background:var(--cyan);border-color:var(--cyan)}
.chip.green{color:#04241a;background:var(--green);border-color:var(--green)}
.chip.surface{color:#0b1a10;background:#7fd08a;border-color:#7fd08a}
.track-aw .chip.surface{color:#2a1c08;background:#e3b878;border-color:#e3b878}

/* ── mode toggle ── */
.modes{display:flex;gap:6px;margin-bottom:10px}
.modes button{flex:1;font:inherit;font-size:12px;font-weight:700;color:var(--text2);
  background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;
  padding:9px 6px;cursor:pointer;min-height:40px}
.modes button.on{color:#1b1402;background:var(--gold);border-color:var(--gold)}
.modes button[disabled]{opacity:.4;cursor:not-allowed}

/* ── track ── */
.track-wrap{position:relative;border:1px solid var(--border);border-radius:12px;
  background:linear-gradient(180deg,#0b1020,#07070f);padding:8px 8px 10px;overflow:hidden}
.track-meta{display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:var(--text3);margin-bottom:6px;gap:8px}
.clock{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;font-weight:700;color:var(--gold3)}
.leader{font-size:11px;color:var(--text2);text-align:right;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ruler{position:relative;height:14px;margin:0 0 4px;border-bottom:1px dashed rgba(255,255,255,.14)}

/* ── course map (Boss, 2026-10-02) ───────────────────────────────────────────────
   The race's own course diagram, with one marker per runner moving along the
   DRAWN course from the start to the finish line, in step with the lanes below.
   Sized so it can never push the controls off a 390px phone: the stage keeps the
   diagram's 500x353 ratio and is capped at 34vh, so its height is bounded. */
.map-wrap{margin:0 0 8px}
.map-stage{position:relative;width:100%;max-width:calc(34vh * 500 / 353);
  aspect-ratio:500 / 353;margin:0 auto;border-radius:9px;overflow:hidden;
  border:1px solid var(--border);background:#0b1020}
.map-img{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-runners{position:absolute;inset:0}
.map-tag{position:absolute;left:5px;bottom:4px;font-size:8px;font-weight:700;letter-spacing:.2px;
  color:#0b0b12;background:rgba(240,185,11,.9);border-radius:4px;padding:1px 4px;white-space:nowrap}
/* one marker per runner — transform-only, no layout, no per-frame image work */
.mrun{position:absolute;left:0;top:0;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;font-weight:800;
  color:#1b1402;background:var(--gold3);border:1.5px solid rgba(7,7,15,.85);
  box-shadow:0 1px 4px rgba(0,0,0,.5);will-change:transform;transform:translate3d(-99px,-99px,0)}
.mrun.last{background:#cbd5e1}
.mrun .mno{line-height:1}
/* Runner NAME on a map marker: REMOVED entirely (Riz, 2026-10-02). The saddle NUMBER is the only
   label, at both the small and the maximised size. There is no name element and no name-culling
   rule; the name is kept only as the marker's hover/long-press tooltip (title attribute). */
.ruler i{position:absolute;bottom:0;transform:translateX(-50%);font-style:normal;
  font-size:9px;color:var(--text3);white-space:nowrap}
.ruler i.fin{color:var(--gold3);font-weight:700}

.lanes{position:relative;border-radius:9px}
/* ── surface-matched track: green turf / all-weather sand / neutral fallback ── */
.track-turf .lanes{background:linear-gradient(180deg,#1f5f2b,#123d1b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.track-turf .lane{border-bottom-color:rgba(255,255,255,.07)}
.track-aw .lanes{background:linear-gradient(180deg,#b0884f,#7c5d33);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.track-aw .lane{border-bottom-color:rgba(60,40,15,.28)}
.track-neutral .lanes{background:linear-gradient(180deg,#242a38,#171b26)}
.lane{position:relative;height:24px;border-bottom:1px solid rgba(255,255,255,.035)}
.lane:last-child{border-bottom:none}
.lane .barrier{position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:2px;
  background:repeating-linear-gradient(180deg,#e5e7eb 0 4px,#0b1020 4px 8px)}
.runner{position:absolute;top:1px;left:0;height:22px;display:flex;align-items:center;gap:3px;
  will-change:transform;transform:translate3d(0,0,0)}
.runner .sil{position:relative;z-index:1;width:20px;height:20px;border-radius:5px;background:#0e1226;border:1px solid var(--border2);
  object-fit:cover;flex:0 0 auto}
.runner .sil.ph{display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--text3)}
.runner .num{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700;
  background:rgba(240,185,11,.92);color:#1b1402;border-radius:4px;padding:1px 4px;flex:0 0 auto}
.runner .nm{font-size:10px;font-weight:600;white-space:nowrap;max-width:78px;overflow:hidden;
  text-overflow:ellipsis;background:rgba(7,7,15,.72);padding:1px 4px;border-radius:4px}
/* Barrier / gate number (Boss, 2026-09-27): sits at the START of the track in the left gutter,
   not beside the horse's saddle number. The lanes are ordered by draw, so it reads 1..N down. */
.lane .barrier .dno{position:absolute;left:1px;top:50%;transform:translateY(-50%);
  width:18px;text-align:center;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9px;font-weight:700;line-height:1;padding:3px 0;border-radius:3px;
  background:rgba(120,170,255,.20);color:#cfe0ff;border:1px solid rgba(120,170,255,.40);
  z-index:2}
.finish{position:absolute;top:0;bottom:0;width:2px;right:6px;
  background:repeating-linear-gradient(180deg,var(--gold) 0 5px,transparent 5px 10px);opacity:.85;z-index:0}

/* ── controls ── */
.ctrls{display:flex;gap:8px;margin-top:10px}
.ctrls button{flex:1;font:inherit;font-size:13px;font-weight:800;border-radius:11px;padding:12px 8px;
  border:1px solid var(--border2);cursor:pointer;min-height:46px}
.btn-go{background:linear-gradient(180deg,var(--gold3),var(--gold2));color:#1b1402;border-color:var(--gold)}
.btn-go:disabled{opacity:.55}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--text)}

/* ── result ── */
.result h2{font-size:13px;font-weight:800;margin-bottom:2px}
.result .tag{display:inline-block;font-size:10px;font-weight:800;border-radius:999px;padding:2px 8px;
  margin-bottom:8px}
.tag.model{background:rgba(34,211,238,.18);color:var(--cyan);border:1px solid rgba(34,211,238,.5)}
.tag.real{background:rgba(16,185,129,.18);color:var(--green);border:1px solid rgba(16,185,129,.5)}
.podium{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.plc{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:10px;padding:7px 9px}
.plc .pos{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:800;font-size:14px;width:24px;
  text-align:center;color:var(--text2)}
.plc.p1{border-color:rgba(240,185,11,.6);background:rgba(240,185,11,.10)}
.plc.p1 .pos{color:var(--gold)}
.plc.p2{border-color:rgba(203,213,225,.45)}
.plc.p3{border-color:rgba(217,119,6,.45)}
.plc img{width:24px;height:24px;border-radius:5px;border:1px solid var(--border2);background:#0e1226}
.plc .who{flex:1;min-width:0}
.plc .who b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plc .who small{color:var(--text3);font-size:10.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plc .pr{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--text2);text-align:right}
.plc .pr em{display:block;font-style:normal;font-size:9.5px;color:var(--text3)}
.rest{margin-top:6px}
.rest summary{cursor:pointer;font-size:12px;color:var(--text2);padding:6px 0;list-style:none}
.rest summary::-webkit-details-marker{display:none}
.rest summary::before{content:'▸ ';color:var(--gold)}
.rest[open] summary::before{content:'▾ '}
.rest ol{margin:4px 0 0 18px;font-size:12px;color:var(--text2);line-height:1.7}

/* ── honest framing / notes ── */
.note{font-size:11.5px;color:var(--text2);line-height:1.6}
.note b{color:var(--text)}
.warn{border-left:3px solid var(--accent);padding-left:9px}
details.tbl summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--text);padding:4px 0}
.tbl table{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:6px}
.tbl td,.tbl th{border-bottom:1px solid var(--border);padding:4px 6px;text-align:left}
.tbl th{color:var(--text3);font-weight:600}
.tbl td:last-child,.tbl th:last-child{text-align:right;font-family:'JetBrains Mono',ui-monospace,monospace}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* ── loading / error ── */
.msg{font-size:13px;color:var(--text2);text-align:center;padding:22px 10px;line-height:1.6}
.spin{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--gold);margin:0 auto 10px;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

@media (min-width:560px){
  body{padding:18px 16px 44px}
  .race-head h1{font-size:19px}
  .lane{height:27px}
  .runner{height:25px}
  .runner .sil{width:23px;height:23px}
  .runner .nm{max-width:150px;font-size:11px}
}

/* Race commentary (Boss, 2026-09-30): the call during a run and during a replay.
   Text only — the bugle is synthesised in sim.js, so nothing loads over the network. */
.commentary{
  margin:8px 0 0;padding:7px 11px;border-radius:9px;min-height:33px;
  display:flex;align-items:center;
  font-size:12.5px;font-weight:700;line-height:1.35;color:#ffd98a;
  background:linear-gradient(90deg,rgba(240,185,11,.05),rgba(240,185,11,.13),rgba(240,185,11,.05));
  border:1px solid rgba(240,185,11,.22);
}
@media (prefers-reduced-motion: reduce){ .commentary{ transition:none } }

/* FINISH chip on the line itself (Boss, 2026-09-30, option B): the line is inset from the wall so
   the field can run on into the run-out, so it must be unmistakable rather than a stray mark. */
.finish span{position:absolute;top:1px;right:100%;margin-right:3px;
  font-size:8.5px;font-weight:900;letter-spacing:.5px;color:var(--gold);
  background:rgba(7,7,15,.92);border:1px solid rgba(240,185,11,.4);
  padding:1px 4px;border-radius:4px;white-space:nowrap}

/* Finishing POSITION badge (Boss, 2026-09-30): 1st, 2nd, 3rd … appears on the horse the moment it
   reaches the line. Each badge sits on its own lane, so the labels never cover one another even
   though the whole field converges on the line at the post. */
.fin-pos{position:absolute;right:100%;margin-right:-5px;top:50%;transform:translateY(-50%) scale(.6);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
  font-size:10px;font-weight:900;letter-spacing:.3px;color:#0b0b12;
  background:var(--gold);border-radius:6px;padding:2px 5px;white-space:nowrap;
  box-shadow:0 1px 6px rgba(240,185,11,.5);z-index:0}
.fin-pos.on{opacity:1;transform:translateY(-50%) scale(1)}
@media (prefers-reduced-motion: reduce){ .fin-pos{transition:none} }

/* ── maximised course map (Boss, 2026-10-02) ──────────────────────────────────────
   Tap the map to watch the race on a near-fullscreen stage. The SAME #mapStage node is
   moved in here, so the live markers keep running on the same clock. Sizing: the largest
   landscape fit of the viewport (the diagram is 500x353). In landscape the overlay fills
   the screen; in portrait it fills the width and keeps the diagram's true aspect ratio
   (never stretched, never a CSS zoom of a fixed-pixel overlay). */
.mapmax{position:fixed;inset:0;z-index:80;display:none;flex-direction:column;align-items:center;
  justify-content:center;background:rgba(4,6,14,.95);padding:8px;box-sizing:border-box}
.mapmax.on{display:flex}
.mapmax-body{display:flex;align-items:center;justify-content:center;width:100%}
.mapmax .map-stage{width:min(calc(100vw - 12px), calc((100vh - 96px) * 500 / 353));
  max-width:none;margin:0}
@media (orientation:landscape){
  .mapmax .map-stage{width:min(calc(100vw - 12px), calc((100vh - 44px) * 500 / 353))}
}
.mapmax .map-tag{font-size:10px;left:7px;bottom:6px}
.mapmax-hud{position:absolute;top:calc(8px + env(safe-area-inset-top));left:0;right:0;
  display:flex;align-items:center;justify-content:center;gap:12px;padding:0 12px;
  font-size:13px;color:var(--text2)}
.mapmax-hud .mm-clock{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:800;
  font-size:15px;color:var(--gold3)}
.mapmax-hud .mm-leader{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapmax-hint{position:absolute;bottom:calc(12px + env(safe-area-inset-bottom));left:0;right:0;
  text-align:center;font-size:11px;color:var(--text3)}
.mapmax-hud .mm-go{font-family:inherit;font-size:12px;font-weight:800;letter-spacing:.2px;
  color:#1b1402;background:var(--gold3);border:1px solid rgba(7,7,15,.6);border-radius:999px;
  padding:5px 12px;cursor:pointer;white-space:nowrap}
.mapmax-hud .mm-go:disabled{opacity:.55;cursor:default}