:root{
  --bg:#0b0f14;--pan:#121821;--ln:#1f2937;--fg:#e5eaf0;--dim:#8b98a8;--ac:#4cc9f0;
  --sat-t:env(safe-area-inset-top,0px);
  --sat-r:env(safe-area-inset-right,0px);
  --sat-b:env(safe-area-inset-bottom,0px);
  --sat-l:env(safe-area-inset-left,0px);
  /* Hosted bar + title + playbar + page padding. Overestimate so the
     980×620 bake never loses to chrome on a short landscape phone. */
  --preview-chrome:12.5rem
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);
font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
padding:22px;padding-left:max(22px,var(--sat-l));padding-right:max(22px,var(--sat-r));
padding-bottom:max(22px,var(--sat-b));overflow-x:clip}
h1{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);margin:0 0 4px}
h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
margin:26px 0 8px;border-bottom:1px solid var(--ln);padding-bottom:5px}
.sub{color:var(--dim);margin-bottom:18px}
.kv{background:var(--pan);border:1px solid var(--ln);border-radius:8px;padding:12px 14px;
margin-bottom:14px}
.kv b{color:var(--fg)}
#mapframe{position:relative;width:min(100%,980px,calc((100svh - var(--preview-chrome))*980/620));
max-width:100%;aspect-ratio:980/620;overflow:hidden;background:#0e141b;
border:1px solid var(--ln);border-radius:8px;min-height:140px;
margin-inline:auto}
/* Center the 980x620 bake. origin 0 0 cropped NW land on phone when scale failed. */
#map{position:absolute;left:50%;top:50%;width:980px;height:620px;overflow:hidden;
transform:translate(-50%,-50%) scale(1);transform-origin:center center}
#map img{position:absolute;width:257px;height:257px}
canvas{position:absolute;left:0;top:0;width:980px;height:620px}
.wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;font-size:12px;white-space:nowrap}
th,td{padding:6px 10px;border-bottom:1px solid var(--ln);text-align:left}
th{color:var(--dim);font-weight:600;text-transform:uppercase;font-size:10.5px;
letter-spacing:.08em}
td.n{text-align:right} td.nm{color:var(--ac);font-weight:600}
.tag{background:#1f2937;color:var(--dim);border-radius:8px;padding:1px 6px;font-size:10px}
.foot{color:var(--dim);font-size:11px;margin-top:8px}

#stage{position:relative;width:min(100%,980px);max-width:100%;margin-inline:auto}
#empty{position:absolute;left:0;right:0;top:38%;text-align:center;padding:0 36px;
color:var(--dim);pointer-events:none;z-index:3}
#empty .big{font-size:15px;color:var(--fg);margin-bottom:8px}
#playbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;
background:var(--pan);border:1px solid var(--ln);border-radius:8px;padding:10px 12px}
#playbar button{background:#1b2836;color:var(--fg);border:1px solid var(--ln);
border-radius:6px;padding:5px 10px;font:12px ui-monospace,Menlo,monospace;cursor:pointer}
#playbar button:hover{background:#243140}
#playbar button.on{background:#14361f;color:#5ddb8a;border-color:#245c38}
#btnPlay{min-width:72px}
#scrub{flex:1;min-width:160px;accent-color:var(--ac)}
#clock{color:var(--ac);font-variant-numeric:tabular-nums;min-width:11em}
#playbar label{color:var(--dim);cursor:pointer;user-select:none}
#playbar .speeds{display:flex;gap:4px}

/* Phone portrait: map on the first screen, stats below. */
@media (max-width:720px) and (orientation:portrait){
  body{padding:8px;padding-left:max(8px,var(--sat-l));padding-right:max(8px,var(--sat-r));
  padding-bottom:max(16px,var(--sat-b));display:flex;flex-direction:column}
  :root,body{--preview-chrome:11rem}
  h1{order:1;font-size:13px;margin:0 0 6px}
  #stage{order:2;width:100%}
  .foot{order:2}
  .sub,.kv,h2,.wrap{order:3}
  h2:first-of-type{display:none}
  #playbar{gap:6px;padding:8px;margin-top:8px}
  #playbar button{padding:8px 10px;min-height:40px}
  #scrub{min-width:72px}
  #clock{min-width:0;font-size:11px}
}

/* Short landscape (and any short viewport): keep the river on screen. */
@media (max-height:540px){
  body{padding:6px 10px;padding-left:max(10px,var(--sat-l));padding-right:max(10px,var(--sat-r));
  padding-bottom:max(6px,var(--sat-b));display:flex;flex-direction:column}
  :root,body{--preview-chrome:9rem}
  h1{order:1;font-size:12px;margin:0 0 4px}
  #stage{order:2;width:100%}
  .foot{order:2}
  .sub,.kv,h2,.wrap{order:3}
  h2:first-of-type{display:none}
  #playbar{gap:6px;padding:6px 8px;margin-top:6px}
  #playbar button{padding:6px 10px;min-height:36px}
  #scrub{min-width:80px}
  #clock{min-width:0;font-size:11px}
}

@media (pointer:coarse){
  #playbar button{min-height:40px;min-width:40px;padding:8px 12px}
  #playbar label{min-height:40px;display:inline-flex;align-items:center;gap:6px}
  #scrub{min-height:32px}
}


/* generated from style="" attributes, which CSP blocks */
.x-bd299c8a { font-size:11.5px }