/* ── Asteroid Blaster — hidden easter egg chrome ─────────────────────────── */
.g-pill{
  position:relative;background:rgba(10,10,10,.86);border:1px solid rgba(57,255,20,.42);
  color:#efede7;font-family:var(--sans);font-size:var(--t-lab);font-weight:700;
  letter-spacing:var(--tr-lab);text-transform:uppercase;border-radius:0;padding:.6rem 1.1rem;cursor:pointer;
}
#astroDim{position:fixed;inset:0;width:100vw;height:100vh;z-index:99996;pointer-events:none;display:none;background:rgba(0,0,0,.86)}
#astroCanvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:99997;pointer-events:none;display:none}

/* A quiet marker that rewards noticing: hairline box, greyscale sprite, and a
   label that only unfolds once you reach for it. Pressing P works too. */
#game-launch{
  position:fixed;right:var(--pad);bottom:1.1rem;z-index:99950;
  display:inline-flex;align-items:center;gap:0;
  padding:.5rem .7rem;border:1px solid var(--rule);background:var(--paper);color:var(--mute);
  font-size:var(--t-lab);font-weight:700;letter-spacing:var(--tr-lab);text-transform:uppercase;
  opacity:0;transform:translateY(6px);pointer-events:none;cursor:pointer;
  transition:opacity .5s var(--ez),transform .5s var(--ez),
             color .3s var(--ez),border-color .3s var(--ez),background .3s var(--ez);
}
body.scrolled #game-launch{opacity:1;transform:none;pointer-events:auto;border-color:var(--ink);color:var(--ink)}
body.scrolled #game-launch:hover{color:var(--paper);background:var(--ink);border-color:var(--ink)}
#game-launch img{height:17px;width:auto;filter:none;opacity:1}
/* The label unfolds on approach, as the marker was always meant to. Parked open
   it is a 86px slab pinned over the right margin, which lands on top of the
   right-aligned project tags as they pass the foot of the viewport. */
#game-launch .gl-t{
  display:inline-block;white-space:nowrap;max-width:0;margin-left:0;opacity:0;overflow:hidden;
  transition:max-width .35s var(--ez),opacity .25s var(--ez),margin-left .35s var(--ez);
}
#game-launch:hover .gl-t,#game-launch:focus-visible .gl-t{max-width:5rem;margin-left:.5rem;opacity:1}
/* and it steps aside entirely at the foot of the page, where it otherwise sat
   directly on top of the "Back to top" link */
body.foot-in #game-launch{opacity:0;transform:translateY(6px);pointer-events:none}
body.astro-active #game-launch{display:none}
@media (max-width:600px){#game-launch{display:none}}
html.coarse body:not(.astro-active) #game-launch{display:inline-flex}

#astroExit{position:fixed;top:1rem;right:var(--pad);z-index:99999;display:none;align-items:center}
#astroTipWrap{position:fixed;top:1rem;left:0;right:0;z-index:99998;display:none;justify-content:center;pointer-events:none}
#astroTip{pointer-events:auto;text-align:center;line-height:1.9;letter-spacing:.12em}
body.astro-active #astroDim,body.astro-active #astroCanvas{display:block}
body.astro-active #astroExit{display:flex}
body.astro-active #astroTipWrap{display:flex}
#astroScore{position:fixed;left:var(--pad);bottom:1rem;z-index:99999;display:none;
  font-family:var(--sans);font-size:var(--t-lab);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#efede7;font-variant-numeric:tabular-nums}
body.astro-active #astroScore{display:block}

#astroOver{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;cursor:pointer}
#astroOver.on{display:flex}
#astroOverCard{text-align:center;padding:2.2rem 2.8rem;background:rgba(10,10,10,.92);
  border:1px solid rgba(57,255,20,.42);color:#efede7;font-family:var(--sans)}
#astroOverCard .ao-t{font-size:var(--t-lab);letter-spacing:.2em;text-transform:uppercase;color:#ff7a63;margin-bottom:.9rem;font-weight:700}
#astroOverCard .ao-s{font-size:2.1rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-bottom:1rem}
#astroOverCard .ao-h{font-size:var(--t-lab);letter-spacing:.16em;text-transform:uppercase;color:rgba(239,237,231,.55)}

#astroTouch{position:fixed;inset:0;z-index:99998;display:none;pointer-events:none;touch-action:none}
html.coarse body.astro-active #astroTouch{display:block}
#astroStick,#astroFire{position:absolute;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#astroStick{left:1.4rem;bottom:1.8rem;width:138px;height:138px;border-radius:50%;background:rgba(10,10,10,.5);border:1px solid rgba(57,255,20,.3)}
#astroKnob{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;
  background:rgba(57,255,20,.2);border:1px solid rgba(57,255,20,.65);pointer-events:none;transition:transform .07s linear}
#astroStick.on #astroKnob{background:rgba(57,255,20,.34)}
#astroFire{right:1.4rem;bottom:2.3rem;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,6,6,.55);border:1px solid rgba(255,90,70,.5);color:#ffb4a6;
  font-family:var(--sans);font-size:var(--t-lab);font-weight:700;letter-spacing:.16em}
#astroFire.on{background:rgba(255,90,70,.3);color:#fff}
html.coarse body.astro-active #astroScore{bottom:auto;top:1rem;left:var(--pad)}
html.coarse body.astro-active #astroTipWrap{top:4.2rem}
body.astro-active{overscroll-behavior:none}
html.coarse body.astro-active{touch-action:none}