:root{
  --ink:#e9f4ef; --dim:#8fa8a0;
  --spore:#64ffc8; --lumen:#ffd27a; --deep:#0b0f14;
  --panel:rgba(10,18,22,.72);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--deep);color:var(--ink);
  font:400 15px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:none}
#view{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}

/* ---- boot ---------------------------------------------------------------- */
#boot{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:.6rem;
  background:radial-gradient(120% 90% at 50% 40%,#12313a 0%,#0b0f14 62%);z-index:50;
  transition:opacity .5s ease}
#boot[hidden]{display:none}
#boot.gone{opacity:0;pointer-events:none}
#boot h1{margin:.4rem 0 0;font-size:clamp(28px,7vw,54px);letter-spacing:.34em;font-weight:600;
  text-indent:.34em;color:var(--ink);text-shadow:0 0 28px rgba(100,255,200,.35)}
.boot-sub{margin:0;color:var(--dim);font-size:13px;letter-spacing:.06em}
.boot-bar{width:min(300px,60vw);height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;margin-top:1.2rem}
.boot-bar i{display:block;height:100%;width:0%;background:var(--spore);box-shadow:0 0 12px var(--spore);
  transition:width .25s ease}
.boot-step{margin:0;color:var(--dim);font-size:11.5px;letter-spacing:.1em;text-transform:lowercase;min-height:1.2em}
.boot-mark{display:flex;gap:10px;align-items:flex-end;height:34px}
.boot-mark .spore{width:10px;height:10px;border-radius:50%;background:var(--spore);
  box-shadow:0 0 16px var(--spore);animation:rise 1.5s ease-in-out infinite}
.boot-mark .spore:nth-child(2){animation-delay:.22s;opacity:.75}
.boot-mark .spore:nth-child(3){animation-delay:.44s;opacity:.5}
@keyframes rise{0%,100%{transform:translateY(6px) scale(.9)}50%{transform:translateY(-8px) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.boot-mark .spore{animation:none}}

/* ---- hud ----------------------------------------------------------------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;
  padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
#hud[hidden]{display:none!important}
.hud-top{display:flex;align-items:baseline;gap:.55rem}
.stat b{font-size:clamp(26px,5vw,38px);font-weight:600;letter-spacing:-.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.75)}
.stat span{margin-left:.35rem;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.stat.rate b{font-size:14px;color:var(--spore);font-weight:500;text-shadow:0 0 12px rgba(100,255,200,.45)}
.hud-goal{margin-top:.15rem;display:flex;align-items:baseline;gap:.5rem;font-size:12.5px}
.hud-goal span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.hud-goal b{font-weight:500;color:var(--ink);text-shadow:0 2px 10px rgba(0,0,0,.7)}
.hud-goal i{font-style:normal;color:var(--lumen);font-size:11.5px}
.combo{position:fixed;left:50%;top:calc(50% + 46px);transform:translateX(-50%);
  font-size:20px;font-weight:600;color:var(--lumen);opacity:0;transition:opacity .12s;
  text-shadow:0 0 18px rgba(255,210,122,.6)}
.combo.on{opacity:1}
.reticle{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px}
.reticle i{position:absolute;inset:9px;border-radius:50%;background:rgba(255,255,255,.85);
  box-shadow:0 0 8px rgba(0,0,0,.6)}