/* THE JAR — Phosphor HUD. The chrome around the organism. */
:root{
  --bg:#01060a; --p:#27ff9a; --p-dim:#0c6b42; --ink:#9fffd0; --amber:#ffb000;
  --red:#ff4d4d; --gold:#ffd24a; --grid:rgba(39,255,154,.07);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:"DejaVu Sans Mono","SF Mono",Menlo,Consolas,monospace;overflow:hidden}
#jar{position:fixed;inset:0;display:block;z-index:1}

/* CRT overlays (DOM-side; the WebGL pass adds bloom + scanlines too) */
.vig{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(120% 120% at 50% 45%,transparent 52%,rgba(0,0,0,.62) 100%)}
.flick{position:fixed;inset:0;pointer-events:none;z-index:6;background:var(--p);
  mix-blend-mode:overlay;opacity:0;animation:fl 9s infinite steps(1)}
@keyframes fl{0%,97%{opacity:0}98%{opacity:.012}99%{opacity:.035}100%{opacity:0}}

.hud{position:fixed;z-index:10;padding:13px 15px;border:1px solid var(--p-dim);
  background:rgba(1,8,6,.62);backdrop-filter:blur(2px);
  box-shadow:0 0 18px rgba(39,255,154,.10),inset 0 0 24px rgba(39,255,154,.04);
  text-shadow:0 0 6px rgba(39,255,154,.45)}

#title{top:16px;left:16px;max-width:min(44ch,46vw)}
#title h1{margin:0 0 2px;font-size:15px;letter-spacing:.42em;color:var(--p)}
#title .sub{font-size:10.5px;color:var(--p-dim);letter-spacing:.2em;text-transform:uppercase}
#title .blurb{margin-top:7px;font-size:11px;line-height:1.5;color:var(--ink);opacity:.82}

#legend{top:16px;right:16px;font-size:11px;line-height:1.85;min-width:188px}
#legend h2{margin:0 0 7px;font-size:10px;letter-spacing:.25em;color:var(--amber);text-transform:uppercase}
#legend .row{display:flex;align-items:center;gap:8px}
#legend .dot{width:9px;height:9px;border-radius:50%;flex:none}

#clock{position:fixed;z-index:10;top:16px;left:50%;transform:translateX(-50%);
  font-size:12px;letter-spacing:.18em;color:var(--p);text-shadow:0 0 8px rgba(39,255,154,.6);
  padding:6px 14px;border:1px solid var(--p-dim);background:rgba(1,8,6,.5)}
#clock .day{color:var(--p-dim);font-size:10px;letter-spacing:.2em}
#clock.dark{color:var(--p-dim);text-shadow:none;border-color:#10241b}

/* transport / scrubber */
#transport{position:fixed;z-index:12;left:16px;right:16px;bottom:14px;
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  border:1px solid var(--p-dim);background:rgba(1,8,6,.74);backdrop-filter:blur(3px);
  box-shadow:0 0 22px rgba(39,255,154,.10)}
.btn{font:inherit;font-size:12px;letter-spacing:.08em;color:var(--p);cursor:pointer;
  background:rgba(39,255,154,.06);border:1px solid var(--p-dim);padding:7px 12px;
  text-shadow:0 0 6px rgba(39,255,154,.4);white-space:nowrap;transition:.12s}
.btn:hover{background:rgba(39,255,154,.16);border-color:var(--p)}
.btn:active{transform:translateY(1px)}
.btn.amber{color:var(--amber);border-color:#6b4a00;text-shadow:0 0 6px rgba(255,176,0,.4)}
.btn.amber:hover{background:rgba(255,176,0,.14);border-color:var(--amber)}

#scrub-wrap{flex:1;position:relative;height:30px;display:flex;align-items:center}
#scrub{appearance:none;-webkit-appearance:none;width:100%;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--p-dim),#10241b);outline:none;cursor:pointer}
#scrub::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--p);box-shadow:0 0 10px var(--p);cursor:pointer;border:0}
#scrub::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--p);
  box-shadow:0 0 10px var(--p);cursor:pointer;border:0}
/* event-density ticks rendered into this layer behind the slider */
#ticks{position:absolute;left:0;right:0;top:2px;height:7px;pointer-events:none}
#ticks span{position:absolute;bottom:0;width:1px;background:var(--p);opacity:.5}
#ticks span.esc{background:var(--red);opacity:.9}
#ticks span.sale{background:var(--gold);opacity:.9}
#ticks span.out{background:var(--p-dim);opacity:.85}

.speed{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--p-dim)}
#speed{font:inherit;font-size:11px;color:var(--p);background:rgba(1,8,6,.8);
  border:1px solid var(--p-dim);padding:5px 6px}
#status{font-size:10.5px;color:var(--p-dim);letter-spacing:.1em;min-width:120px;text-align:right}

.tip{position:fixed;z-index:14;pointer-events:none;font-size:11px;padding:6px 9px;
  border:1px solid var(--p);background:rgba(1,10,7,.94);color:var(--p);display:none;
  text-shadow:0 0 5px rgba(39,255,154,.6);white-space:nowrap}

.boot{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--p);font-size:13px;letter-spacing:.34em;
  text-shadow:0 0 10px rgba(39,255,154,.6)}
.boot.err{color:var(--amber);text-shadow:0 0 10px rgba(255,176,0,.5);
  flex-direction:column;gap:10px;font-size:12px;text-align:center;padding:24px}
.boot.err code{color:var(--ink);font-size:11px;letter-spacing:.04em;opacity:.85}

@media(max-width:720px){#legend{display:none}#title{max-width:80vw}
  #transport{flex-wrap:wrap}#status{display:none}}