/* Track Cycling - styles.  No external font, no external image, no import. */
:root{
  --ink:#e9ecf4; --dim:#98a0b4; --bg:#0b0d13; --panel:#141824; --panel2:#1c2132;
  --line:#2a3146; --hot:#ff5a4d; --cool:#4aa8ff; --good:#5fd28a; --warn:#ffc94d;
  --sh:0 10px 40px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); overflow:hidden;
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-variant-numeric:tabular-nums}
canvas#gl{position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none}

/* ---- HUD -------------------------------------------------------------------------------- */
#hud{position:fixed; inset:0; pointer-events:none; display:flex; flex-direction:column;
  padding:max(10px,env(safe-area-inset-top)) 70px 14px; gap:8px}
.hud-top{padding-left:50px}
.hud-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.hud-top{justify-content:flex-start}
.hud-msg{min-height:26px; justify-content:center}
#hudMsg{background:rgba(10,12,18,.72); border:1px solid var(--line); border-radius:8px;
  padding:4px 12px; font-weight:600; letter-spacing:.01em; opacity:0; transition:opacity .25s}
#hudMsg.on{opacity:1}
.hud-bottom{margin-top:auto; align-items:flex-end; gap:14px}
.hud-flags{justify-content:center; min-height:22px}
.chip{background:rgba(10,12,18,.66); border:1px solid var(--line); border-radius:999px;
  padding:4px 12px; font-size:13px; font-weight:600; color:var(--ink)}
.flag{background:rgba(10,12,18,.8); border:1px solid var(--cool); color:var(--cool);
  border-radius:6px; padding:2px 10px; font-size:11px; font-weight:700; letter-spacing:.09em}
.flag.warn{border-color:var(--warn); color:var(--warn)}
.flag.bad{border-color:var(--hot); color:var(--hot)}
.dial{background:rgba(10,12,18,.68); border:1px solid var(--line); border-radius:12px;
  padding:8px 16px 6px; text-align:center; min-width:112px}
.dial-val{font-size:34px; font-weight:700; line-height:1}
.dial-lab{font-size:11px; color:var(--dim); letter-spacing:.12em; margin-top:2px}
.bars{display:flex; flex-direction:column; gap:5px; flex:1 1 190px; max-width:340px}
.bar{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--dim)}
.bar-lab{width:44px; letter-spacing:.06em; text-transform:uppercase}
.bar-num{width:58px; text-align:right; color:var(--ink)}
.bar-track{position:relative; flex:1; height:9px; border-radius:5px; background:rgba(10,12,18,.72);
  border:1px solid var(--line); overflow:hidden}
.bar-track i{position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg,var(--cool),var(--good)); transition:width .08s linear}
.bar-track.alt i{background:linear-gradient(90deg,var(--good),var(--warn),var(--hot))}
.bar-track.ctr i{left:50%; width:0; background:var(--hot)}
.mini{background:rgba(10,12,18,.62); border:1px solid var(--line); border-radius:12px; padding:6px;
  line-height:0}
.mini canvas{width:180px; height:105px}

#touch{position:fixed; left:0; right:0; bottom:0; display:flex; gap:10px;
  padding:12px 12px max(12px,env(safe-area-inset-bottom)); justify-content:center; z-index:5}
/* keep the speed dial and power bars clear of the touch buttons */
body:has(#touch:not([hidden])) #hud{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.tbtn{pointer-events:auto; background:rgba(20,24,36,.86); color:var(--ink); border:1px solid var(--line);
  border-radius:14px; min-width:74px; height:58px; font-size:18px; font-weight:700}
.tbtn.wide{min-width:120px}
.tbtn:active{background:var(--panel2)}
@media (max-width:420px){.tbtn,.tbtn.wide{min-width:0; padding:0 6px; flex:1 1 0} .tbtn.wide{flex-grow:1.4}}
.corner{position:fixed; top:max(10px,env(safe-area-inset-top)); left:14px; z-index:6;
  background:rgba(20,24,36,.86); color:var(--ink); border:1px solid var(--line); border-radius:10px;
  width:42px; height:38px; font-size:16px; cursor:pointer}
.corner.right{left:auto; right:14px; width:auto; padding:0 12px; font-size:12px; letter-spacing:.08em}
.corner:hover{background:var(--panel2)}

/* ---- panels ----------------------------------------------------------------------------- */
.panel{position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(6,8,13,.78); backdrop-filter:blur(3px); overflow:auto}
.panel[hidden]{display:none !important}
.sheet{background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh);
  padding:24px 26px; width:min(560px,100%); max-height:calc(100vh - 40px); overflow:auto}
.sheet.narrow{width:min(420px,100%)}
.sheet.wide{width:min(820px,100%)}
h1{margin:0 0 6px; font-size:30px; letter-spacing:-.01em}
h2{margin:0 0 12px; font-size:22px}
h3{margin:22px 0 6px; font-size:15px; color:var(--cool); letter-spacing:.02em}
.lede{margin:0 0 18px; color:var(--dim)}
.lede b,.sheet p b,.tally b{color:var(--ink)}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.fld{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--dim)}
.fld span{letter-spacing:.06em; text-transform:uppercase}
select{background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:8px;
  padding:8px 9px; font:inherit; font-size:13px; width:100%}
.evblurb{margin:14px 0 4px; color:var(--dim); font-size:13px; min-height:38px}
.btnrow{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
button{background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:10px 18px; font:inherit; font-weight:600; cursor:pointer}
button:hover{background:#252b40}
button.primary{background:var(--cool); border-color:var(--cool); color:#06101d}
button.primary:hover{background:#6cb9ff}
.keys{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:16px; font-size:12px; color:var(--dim)}
kbd{background:var(--panel2); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px;
  padding:1px 6px; font:inherit; font-size:11px; margin-right:3px}
.bests{margin:14px 0 0; font-size:12px; color:var(--dim)}
.foot{margin:16px 0 0; font-size:11px; color:#6d768c}
.sheet p{margin:0 0 10px}
.sheet a{color:var(--cool)}
ul.limits{margin:6px 0 0; padding-left:20px; color:var(--dim)}
ul.limits li{margin-bottom:7px}
ul.limits b{color:var(--ink)}
table.tally{border-collapse:collapse; width:100%; margin:8px 0 4px; font-size:13px}
table.tally th{text-align:left; padding:5px 10px 5px 0; color:var(--dim); font-weight:600;
  letter-spacing:.05em; font-size:11px; text-transform:uppercase; white-space:nowrap}
table.tally td{padding:5px 10px 5px 0; color:var(--dim)}
table.tally td:first-of-type{color:var(--ink); font-variant-numeric:tabular-nums; width:48px}
code{background:var(--panel2); border-radius:4px; padding:1px 5px; font-size:12px}
#resBody{font-size:14px}
#resBody table{border-collapse:collapse; width:100%; margin:4px 0 8px}
#resBody td,#resBody th{padding:5px 8px 5px 0; text-align:left; border-bottom:1px solid var(--line)}
#resBody th{font-size:11px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase}
#resBody tr.me td{color:var(--cool); font-weight:700}
#resBody .big{font-size:34px; font-weight:700; letter-spacing:-.02em}
#resBody .note{color:var(--dim); font-size:12px}

@media (max-width:620px){
  .grid{grid-template-columns:1fr}
  .mini{display:none}
  .dial-val{font-size:26px}
  .sheet{padding:18px}
  h1{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .bar-track i{transition:none}
  #hudMsg{transition:none}
}