:root{
  --night:#1a1611; --stone:#262019; --stone2:#2f2720; --hair:#453a2d;
  --ink:#ece2d0; --dim:#a89980; --sand:#cdb188; --porphyry:#7e2231;
  --gold:#c8a24a; --bad:#d2553f; --good:#7fa05a;
  --display:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --ui:Optima,Candara,'Gill Sans','Gill Sans MT','Trebuchet MS',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--night); color:var(--ink); font-family:var(--ui);
  font-size:14px; line-height:1.45; -webkit-text-size-adjust:100%;
}
#app{display:flex; flex-direction:column; min-height:100%}

header{
  display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
  padding:.7rem 1rem .55rem; border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg,#221c16,#1a1611);
}
h1{
  font-family:var(--display); font-size:1.42rem; font-weight:600;
  letter-spacing:.13em; margin:0; color:var(--sand);
}
#version{color:var(--dim); font-size:.82rem; letter-spacing:.05em}
#tabs{margin-left:auto; display:flex; gap:.35rem}
#tabs button{
  font:inherit; background:transparent; color:var(--dim); border:1px solid var(--hair);
  padding:.3rem .8rem; border-radius:2px; cursor:pointer;
}
#tabs button[aria-selected="true"]{background:var(--porphyry); color:#f6ece0; border-color:#96303f}
#tabs button:hover{color:var(--ink)}
#status{
  padding:.4rem 1rem; color:var(--dim); border-bottom:1px solid var(--hair);
  font-style:italic; min-height:1.9rem; font-family:var(--display);
}

main{display:grid; grid-template-columns:290px minmax(0,1fr) 330px; gap:0; flex:1; min-height:0}
aside{
  background:var(--stone); overflow-y:auto; padding:.75rem .85rem 2rem;
  max-height:calc(100vh - 6.5rem);
}
#info{border-right:1px solid var(--hair)}
#controls{border-left:1px solid var(--hair); background:var(--stone2)}
#centre{display:flex; flex-direction:column; min-width:0; padding:.6rem}
#boardwrap{flex:1; min-height:0; display:flex; align-items:center; justify-content:center}
canvas{display:block; border:1px solid var(--hair); border-radius:2px; touch-action:none; cursor:grab}
canvas:active{cursor:grabbing}
#cameratools{display:flex; gap:.35rem; align-items:center; padding-top:.5rem; color:var(--dim); font-size:.82rem}
#cameratools button{
  font:inherit; background:var(--stone2); color:var(--ink); border:1px solid var(--hair);
  width:2rem; height:1.8rem; border-radius:2px; cursor:pointer;
}
#cameratools button:hover{border-color:var(--gold)}

.panel-head{
  font-family:var(--display); font-size:1rem; font-weight:600; color:var(--gold);
  margin:1.1rem 0 .4rem; padding-bottom:.2rem; border-bottom:1px solid var(--hair);
}
aside .panel-head:first-child{margin-top:.2rem}
.row{display:flex; justify-content:space-between; gap:.6rem; padding:.13rem 0; border-bottom:1px dotted #3a3126}
.row-k{color:var(--dim)}
.row-v{text-align:right}
.row.bad .row-v{color:var(--bad)}
.note{color:var(--dim); margin:.45rem 0; font-size:.87rem}
.hint{color:var(--dim); font-size:.8rem; display:block; line-height:1.3}

.tbl{width:100%; table-layout:fixed; border-collapse:collapse; font-size:.84rem; margin-top:.3rem}
.tbl td,.tbl th{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tbl col.c-place{width:2.4rem} .tbl col.c-num{width:2.1rem} .tbl col.c-fate{width:3.1rem}
.tbl th{text-align:left; color:var(--dim); font-weight:400; border-bottom:1px solid var(--hair); padding:.2rem .25rem}
.tbl td{padding:.2rem .25rem; border-bottom:1px dotted #3a3126}
.tbl tr.mine td{background:rgba(126,34,49,.24)}
.tbl td.fate{color:var(--bad); font-size:.8rem}
.swatch{display:inline-block; width:.65rem; height:.65rem; border-radius:50%; border:1px solid #1a1611}

.lanegrid{display:grid; grid-template-columns:1fr 1fr; gap:.25rem}
.lanecell{background:#221c16; border:1px solid var(--hair); padding:.25rem .4rem; font-size:.8rem}
.lanecell b{display:block; color:var(--sand); font-weight:600}

.log{max-height:15rem; overflow-y:auto; margin-top:.3rem; font-size:.84rem}
.logline{padding:.16rem 0; border-bottom:1px dotted #3a3126; color:var(--dim)}
.logline.wreck,.logline.death,.logline.iugula{color:var(--bad)}
.logline.hit,.logline.ram,.logline.missio{color:var(--sand)}
.logline.finish,.logline.hold{color:var(--good)}

.field{margin:.55rem 0}
.field-k{color:var(--dim); margin-bottom:.25rem}
.bigval{font-family:var(--display); font-size:2rem; color:var(--sand); line-height:1}
.range{width:100%; accent-color:var(--porphyry)}
.warn{min-height:1.1rem; font-size:.82rem; color:var(--gold); margin-top:.25rem}
.warn.bad{color:var(--bad)}

.lanebtns{display:grid; grid-template-columns:repeat(4,1fr); gap:.25rem}
.lanebtn{
  font:inherit; background:#221c16; color:var(--ink); border:1px solid var(--hair);
  padding:.3rem .1rem; border-radius:2px; cursor:pointer; text-align:center;
}
.lanebtn b{display:block; font-size:1rem; color:var(--sand)}
.lanebtn span{font-size:.75rem; color:var(--dim)}
.lanebtn.on{background:var(--porphyry); border-color:#96303f}
.lanebtn.on span,.lanebtn.on b{color:#f6ece0}
.lanebtn.blocked{opacity:.45}

.btn{
  font:inherit; background:var(--porphyry); color:#f6ece0; border:1px solid #96303f;
  padding:.42rem .9rem; border-radius:2px; cursor:pointer;
}
.btn:disabled{background:#3a3128; color:#7c7062; border-color:var(--hair); cursor:default}
.btnrow{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin:.5rem 0}
.chip{
  font:inherit; background:#221c16; color:var(--ink); border:1px solid var(--hair);
  width:1.7rem; height:1.7rem; border-radius:2px; cursor:pointer;
}
.chipbtn,.actbtn{
  font:inherit; background:#221c16; color:var(--ink); border:1px solid var(--hair);
  padding:.3rem .6rem; border-radius:2px; cursor:pointer; text-align:left;
}
.actbtn{display:block; width:100%; margin-bottom:.25rem}
.actbtn b{color:var(--sand); font-weight:600}
.chipbtn.on,.actbtn.on{background:var(--porphyry); border-color:#96303f}
.chipbtn.on,.actbtn.on b{color:#f6ece0}
.actbtn:disabled,.chipbtn:disabled{opacity:.45; cursor:default}

.sel,.num{
  font:inherit; background:#221c16; color:var(--ink); border:1px solid var(--hair);
  padding:.28rem .4rem; border-radius:2px; width:100%; margin-bottom:.3rem;
}
.num{width:6rem}
.buyrow,.skillrow{display:flex; align-items:center; gap:.4rem; margin-bottom:.3rem; flex-wrap:wrap}
.buyrow-k{color:var(--dim); min-width:5.2rem}
.buyrow .sel{flex:1; margin-bottom:0}
.skillval{font-family:var(--display); font-size:1.1rem; color:var(--sand); min-width:1.2rem; text-align:center}
.skillrow .hint{flex-basis:100%}
.check{display:flex; align-items:center; gap:.35rem; color:var(--dim); font-size:.85rem}
.stack{margin-bottom:.4rem}

.gauge{border:1px solid var(--hair)}
.gaugeband{padding:.3rem .45rem; border-bottom:1px solid var(--hair); background:#221c16}
.gaugeband:last-child{border-bottom:0}
.gaugeband.here{background:rgba(200,162,74,.16); border-left:3px solid var(--gold)}
.gaugeband b{color:var(--sand); font-weight:600}
.gaugemarks{display:flex; gap:.4rem; margin:.12rem 0}
.mk{font-size:.75rem; color:#6f6355; border:1px solid #3a3126; padding:0 .3rem; border-radius:2px}
.mk.on{color:#1a1611; background:var(--sand); border-color:var(--sand)}
.manbox{border:1px solid var(--hair); padding:.4rem .5rem; margin-bottom:.4rem; background:#221c16}
.manbox.mine{border-color:#96303f}
.manbox b{color:var(--sand)}

@media (max-width:980px){
  main{grid-template-columns:1fr}
  aside{max-height:none}
  #info{order:3; border-right:0; border-top:1px solid var(--hair)}
  #controls{order:2; border-left:0; border-top:1px solid var(--hair)}
  #centre{order:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* v1.6.0 presentation pass ------------------------------------------------ */
#quickbar{display:flex;gap:.3rem;margin-left:.35rem}
#quickbar button{
  font:inherit;background:#221c16;color:var(--dim);border:1px solid var(--hair);
  padding:.3rem .6rem;border-radius:2px;cursor:pointer;white-space:nowrap
}
#quickbar button:hover,#quickbar button.on{color:var(--ink);border-color:var(--gold)}
#quickbar button.on{background:rgba(200,162,74,.12)}

#racehud{display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;margin:0 0 .45rem}
#racehud.show{display:grid}
.hudcell{background:linear-gradient(180deg,#2a231c,#211b16);border:1px solid var(--hair);padding:.35rem .55rem;min-width:0}
.hudcell .k{display:block;color:var(--dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.hudcell .v{display:block;color:var(--sand);font-family:var(--display);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#stable-hero{display:none;position:relative;width:100%;height:100%;min-height:420px;align-items:center;justify-content:center;overflow:hidden;background:#100d0a}
#stable-hero.show{display:flex}
#stable-hero img{display:block;max-width:min(82%,760px);max-height:calc(100vh - 10.5rem);object-fit:contain;box-shadow:0 18px 55px rgba(0,0,0,.55);border:1px solid #6b5236}
.hero-copy{position:absolute;left:50%;bottom:1.35rem;transform:translateX(-50%);width:min(76%,680px);padding:.7rem 1rem;text-align:center;background:rgba(18,14,10,.88);border:1px solid rgba(200,162,74,.45);box-shadow:0 8px 26px rgba(0,0,0,.45)}
.hero-copy strong{display:block;font-family:var(--display);letter-spacing:.14em;color:var(--gold);font-size:1rem}
.hero-copy span{display:block;color:var(--ink);font-size:.84rem;margin-top:.2rem}

body.focus-mode main{grid-template-columns:1fr}
body.focus-mode aside{display:none}
body.focus-mode #centre{padding:.45rem .8rem .7rem}
body.focus-mode #racehud{grid-template-columns:repeat(4,minmax(120px,1fr))}

.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:1rem}
.modal[hidden]{display:none}
.modal-card{position:relative;width:min(620px,94vw);background:var(--stone2);border:1px solid var(--gold);box-shadow:0 20px 70px rgba(0,0,0,.7);padding:1.2rem 1.35rem 1.35rem}
.modal-card h2{font-family:var(--display);color:var(--gold);margin:.1rem 2rem .6rem 0}
.modal-card p{color:var(--ink)}
.modal-close{position:absolute;right:.6rem;top:.45rem;border:0;background:transparent;color:var(--sand);font-size:1.8rem;cursor:pointer;line-height:1}
.shortcut-grid{display:grid;grid-template-columns:max-content 1fr;gap:.45rem .8rem;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--hair)}
kbd{font-family:var(--ui);background:#18130f;border:1px solid var(--hair);border-bottom-color:#6a5945;border-radius:3px;padding:.05rem .3rem;color:var(--sand)}

@media (max-width:1180px){#quickbar{width:100%;margin-left:0}#quickbar button{flex:1}}
@media (max-width:980px){
  #racehud{grid-template-columns:repeat(2,minmax(0,1fr))}
  #stable-hero{min-height:360px}
  #stable-hero img{max-height:70vh}
  .hero-copy{bottom:.7rem}
}


/* v1.7.0 race-awareness pass --------------------------------------------- */
#cameratools #zoom-follow{width:auto;padding:0 .55rem}
#cameratools #zoom-follow.on{border-color:var(--gold);color:var(--sand);background:rgba(200,162,74,.12)}
.race-progress{display:grid;gap:.28rem;margin:.35rem 0 .65rem}
.progress-row{display:grid;grid-template-columns:minmax(5rem,1fr) 2.2fr 2rem;gap:.4rem;align-items:center;font-size:.76rem}
.progress-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
.progress-row.mine .progress-name{color:var(--sand);font-weight:600}
.progress-track{height:.5rem;background:#17120f;border:1px solid var(--hair);position:relative;overflow:hidden}
.progress-fill{display:block;height:100%;min-width:2px}
.progress-lap{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
.hudcell.danger .v{color:var(--bad)}
.hudcell.safe .v{color:var(--good)}
@media (max-width:980px){.progress-row{grid-template-columns:minmax(4.5rem,1fr) 2fr 2rem}}


/* v1.8.0 accessibility and tablet-control pass --------------------------- */
body.high-contrast{--bg:#050505;--stone:#0d0d0d;--stone2:#151515;--ink:#fff7e6;--dim:#e6d4b8;--sand:#ffe0a3;--gold:#ffd75a;--hair:#8e7a58;--porphyry:#b51f3f;--bad:#ff6b6b;--good:#7dff9b}
body.high-contrast header,body.high-contrast aside,body.high-contrast #status{background:#080808}
body.high-contrast .row,body.high-contrast .tbl td,body.high-contrast .logline{border-color:#76664a}
body.high-contrast .tbl tr.mine td{background:rgba(255,215,90,.18)}
body.high-contrast canvas{border-color:#d7b85c}


/* v1.9.0 telemetry pass -------------------------------------------------- */
#racealert{display:none;margin:-.1rem 0 .45rem;padding:.38rem .6rem;border:1px solid var(--hair);background:#201a15;color:var(--dim);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#racealert.show{display:block}
#racealert.safe{border-left:3px solid var(--good)}
#racealert.caution{border-left:3px solid var(--gold);color:var(--sand)}
#racealert.danger{border-left:3px solid var(--bad);color:#ffd0c8;background:rgba(126,34,49,.16)}
.tactical-readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;margin:.25rem 0 .7rem;padding-bottom:.65rem;border-bottom:1px solid var(--hair)}
.tactical-cell{background:#211b16;border:1px solid var(--hair);padding:.35rem .45rem;min-width:0}
.tactical-cell .k{display:block;color:var(--dim);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}
.tactical-cell .v{display:block;color:var(--sand);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.high-contrast #racealert,body.high-contrast .tactical-cell{background:#0b0b0b}
@media (max-width:620px){#racealert{white-space:normal}.tactical-readout{grid-template-columns:1fr 1fr}}


/* v1.10.0 control and season-dashboard pass ------------------------------- */
#tool-pause:disabled{opacity:.42;cursor:default;border-color:var(--hair)!important;background:#221c16!important;color:var(--dim)!important}
body.race-paused #board{filter:saturate(.55) brightness(.72)}
body.race-paused #racealert{border-left:3px solid var(--gold);color:var(--sand)}
body.race-paused #racealert::before{content:'PAUSED  •  ';font-weight:700;color:var(--gold);letter-spacing:.06em}


/* v1.11.0 race-planning pass --------------------------------------------- */
.race-planner{margin:.15rem 0 .75rem;padding:.55rem .6rem;background:#1d1813;border:1px solid var(--hair);border-left:3px solid var(--gold)}
.planner-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;margin:.25rem 0 .5rem}
.planner-btn{width:100%;text-align:center}
.risk-meter{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.45rem;padding:.35rem .45rem;border:1px solid var(--hair);background:#18130f;font-size:.78rem}
.risk-meter .risk-label{color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-size:.67rem}
.risk-meter b{font-family:var(--display);letter-spacing:.06em;color:var(--sand)}
.risk-meter .risk-detail{color:var(--dim);text-align:right}
.risk-meter.safe{border-left:3px solid var(--good)}
.risk-meter.safe b{color:var(--good)}
.risk-meter.caution{border-left:3px solid var(--gold)}
.risk-meter.caution b{color:var(--gold)}
.risk-meter.danger{border-left:3px solid var(--bad);background:rgba(126,34,49,.14)}
.risk-meter.danger b{color:var(--bad)}
body.high-contrast .race-planner,body.high-contrast .risk-meter{background:#090909}
@media (max-width:620px){.planner-buttons{grid-template-columns:1fr}.risk-meter{grid-template-columns:auto auto}.risk-meter .risk-detail{grid-column:1/-1;text-align:left}}

/* v1.12.0 — race chronicle */
.chronicle-card{width:min(820px,96vw);max-height:min(82vh,760px);display:flex;flex-direction:column}
.chronicle-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;margin:.2rem 0 .75rem}
.chronicle-stat{border:1px solid var(--hair);background:#201a15;padding:.5rem .55rem}
.chronicle-stat .k{display:block;color:var(--dim);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}
.chronicle-stat .v{display:block;color:var(--sand);font-size:1rem;font-weight:700;margin-top:.15rem}
.chronicle-filters{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.65rem}
.chronicle-filters button{padding:.38rem .7rem}
.chronicle-filters button.on{border-color:var(--gold);color:var(--gold)}
.chronicle-list{overflow:auto;border-top:1px solid var(--hair);padding-top:.35rem}
.chronicle-entry{display:grid;grid-template-columns:4.2rem 7rem 1fr;gap:.6rem;padding:.48rem .3rem;border-bottom:1px solid var(--hair);align-items:start}
.chronicle-entry .turn{color:var(--dim);font-variant-numeric:tabular-nums}
.chronicle-entry .kind{color:var(--gold);text-transform:uppercase;font-size:.68rem;letter-spacing:.06em}
.chronicle-entry.incident .kind{color:#ffb0a5}
.chronicle-entry.finish .kind{color:var(--good)}
.race-summary{border:1px solid var(--hair);padding:.65rem;margin:.55rem 0;background:#201a15}
.race-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin:.45rem 0}
.race-summary-cell{border:1px solid var(--hair);padding:.42rem .5rem}
.race-summary-cell .k{display:block;color:var(--dim);font-size:.68rem;text-transform:uppercase}
.race-summary-cell .v{display:block;color:var(--sand);font-weight:700;margin-top:.12rem}
body.high-contrast .chronicle-stat,body.high-contrast .race-summary,body.high-contrast .race-summary-cell{background:#0b0b0b}
@media (max-width:620px){.chronicle-summary{grid-template-columns:1fr 1fr}.chronicle-entry{grid-template-columns:3.4rem 5.4rem 1fr}.race-summary-grid{grid-template-columns:1fr}}


/* v1.13.0 — arena tactical pass */
.arena-tactics{display:grid;grid-template-columns:1fr auto;gap:.3rem .55rem;align-items:center;margin:.15rem 0 .7rem;padding:.55rem .6rem;border:1px solid var(--hair);border-left:3px solid var(--gold);background:#1d1813}
.arena-tactics>b{color:var(--sand);font-family:var(--display);letter-spacing:.04em}
.arena-tactics .hint{grid-column:1/-1}
.arena-edge{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);font-weight:700}
.arena-edge.good{color:var(--good)}
.arena-edge.bad{color:var(--bad)}
body.high-contrast .arena-tactics{background:#090909}


/* v1.14.0 — pre-race scouting pass */
.scout-card{width:min(980px,97vw);max-height:min(86vh,820px);display:flex;flex-direction:column}
.scout-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;margin:.2rem 0 .75rem}
.scout-stat{border:1px solid var(--hair);background:#201a15;padding:.5rem .55rem;min-width:0}
.scout-stat .k{display:block;color:var(--dim);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}
.scout-stat .v{display:block;color:var(--sand);font-size:.98rem;font-weight:700;margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scout-table-wrap{overflow:auto;border-top:1px solid var(--hair);padding-top:.35rem}
.scout-table{min-width:780px}
.scout-table th,.scout-table td{white-space:nowrap}
.scout-table td:nth-child(n+3),.scout-table th:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums}
.scout-note{margin-top:.7rem;padding:.55rem .65rem;border:1px solid var(--hair);border-left:3px solid var(--gold);background:#1d1813;color:var(--dim);line-height:1.45}
body.high-contrast .scout-stat,body.high-contrast .scout-note{background:#090909}
@media (max-width:720px){.scout-summary{grid-template-columns:1fr 1fr}.scout-card{padding:1rem}.scout-table{font-size:.74rem}}

/* v1.15.0 — interactive track minimap */
#boardwrap{position:relative}
#minimap{display:none;position:absolute;right:.7rem;bottom:.7rem;width:260px;height:118px;max-width:38%;border:1px solid var(--gold);border-radius:4px;background:#241e18;box-shadow:0 4px 18px rgba(0,0,0,.48);z-index:6;cursor:crosshair;opacity:.94}
#minimap.show{display:block}
#zoom-minimap.on{border-color:var(--gold);color:var(--sand)}
body.focus-mode #minimap{right:.9rem;bottom:.9rem}
body.high-contrast #minimap{border-color:#fff;background:#000}
@media (max-width:760px){#minimap{width:190px;height:86px;max-width:45%;right:.35rem;bottom:.35rem}}