:root{
  --bg:#0a0e0b; --card:#10160fcc; --line:#ffffff16;
  --ink:#eaf3e2; --mut:#8ba079;
  --lime:#8ef04a; --pink:#ff90b6; --gold:#ffd24a; --red:#ff6a5a;
  --sans:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Courier New",monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden;
  -webkit-font-smoothing:antialiased}

/* depth background (all code-drawn) — fixed so it stays put while you scroll the length */
#bg{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:
    radial-gradient(1000px 620px at 72% 6%, #16281033 0%, transparent 60%),
    radial-gradient(760px 520px at 8% 96%, #12220e33 0%, transparent 55%),
    var(--bg);}
#bg .sprite{position:fixed;will-change:transform;transition:transform .25s ease-out}
#bg .floaty{will-change:transform;animation:drift ease-in-out infinite}
#bg .sprite canvas{display:block;image-rendering:pixelated;width:100%;height:auto}
@keyframes drift{0%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-26px) rotate(calc(var(--r) + 7deg))}100%{transform:translateY(0) rotate(var(--r))}}

/* ---------- fixed HUD ---------- */
.hud{position:fixed;top:0;left:0;right:0;z-index:10;padding:14px 20px 16px;
  background:linear-gradient(180deg,#0a0e0be8 0%,#0a0e0bcc 70%,#0a0e0b00 100%);
  backdrop-filter:blur(6px)}
.hud-top{display:flex;align-items:center;justify-content:space-between;max-width:940px;margin:0 auto}
.brand{font-weight:800;letter-spacing:.14em;font-size:16px}
.live{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mut);letter-spacing:.12em;text-transform:uppercase}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:pulse 1.2s infinite}
.live.stale .dot{background:#6b6b60;box-shadow:none;animation:none}
@keyframes pulse{50%{opacity:.25}}
.tagline{max-width:940px;margin:8px auto 12px;text-align:center;font-size:clamp(16px,2.4vw,22px);font-weight:800}
.tagline span{color:var(--lime)}
.tagline em{display:block;color:var(--pink);font-family:var(--mono);font-size:13px;font-style:normal;letter-spacing:.05em;margin-top:3px}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:940px;margin:0 auto;text-align:left}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;
  display:flex;flex-direction:column;gap:4px;min-height:78px;text-decoration:none;color:inherit;font-family:inherit}
.card label{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.card b{font-size:20px;font-family:var(--mono);font-weight:700;line-height:1.05}
.stat .change{font-size:11px;font-family:var(--mono)}
.change.up{color:var(--lime)} .change.down{color:var(--red)}
.mini-meter{height:5px;border-radius:5px;background:#0a120a;overflow:hidden;margin-top:2px}
.mini-meter i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--lime),var(--pink));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.stat small{font-size:10px;color:var(--mut)}
.buy{background:linear-gradient(180deg,#9bff56,#6fd034);justify-content:center;cursor:pointer;border-color:transparent}
.buy label{color:#0a3311}.buy b{color:#08210a;font-family:var(--sans);font-weight:800;font-size:16px}
.buy:hover{filter:brightness(1.05)}
.ca{cursor:pointer;text-align:left}
.ca .hint{color:var(--mut);opacity:.7;text-transform:none;letter-spacing:0}
.ca b{font-size:11px;word-break:break-all;color:var(--mut);font-weight:500;font-family:var(--mono)}
.card:hover{border-color:#ffffff2e}
.tools{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px auto 0;max-width:940px}
.tools button,.tools a{background:none;border:1px solid var(--line);border-radius:999px;color:var(--mut);
  font-family:var(--mono);font-size:12px;padding:6px 14px;cursor:pointer;text-decoration:none;letter-spacing:.04em}
.tools button:hover,.tools a:hover{color:var(--ink);border-color:#ffffff33}
.tools a.soon{opacity:.4;pointer-events:none}

/* ---------- the tower ---------- */
main{position:relative;z-index:1;padding-top:230px}   /* clear the fixed HUD so the tip shows */
#stage{display:flex;justify-content:center;align-items:flex-end;min-height:calc(100vh - 230px)}
#stage canvas{width:min(62vw,360px);height:auto;display:block;image-rendering:pixelated;
  transform-origin:50% 100%;will-change:transform;filter:drop-shadow(0 6px 12px #0008)}

.scroll-hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:11;
  font-family:var(--mono);font-size:12px;color:var(--mut);letter-spacing:.06em;
  background:#0a0e0bcc;border:1px solid var(--line);border-radius:999px;padding:7px 16px;
  animation:nudge 1.8s ease-in-out infinite;transition:opacity .4s}
@keyframes nudge{50%{transform:translate(-50%,4px)}}

footer{position:relative;z-index:1;text-align:center;padding:30px 20px 60px}
.fine{color:#5f7454;font-size:11px;line-height:1.6;max-width:60ch;margin:0 auto}

/* click-to-pump floaters */
.floater{position:fixed;z-index:30;pointer-events:none;font-family:var(--mono);font-weight:800;
  font-size:18px;color:var(--lime);text-shadow:0 1px 0 #000;animation:pop 900ms ease-out forwards}
@keyframes pop{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-90px) scale(1.3)}}

@media(max-width:720px){
  .cards{grid-template-columns:repeat(2,1fr)}
  #stage canvas{width:78vw}
}