/* ============================================
   ARSKASOFT // SYNTHWAVE OS
   ============================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-0: #08001a;
  --bg-1: #14002b;
  --bg-2: #2a0044;

  --pink: #ff2cb6;
  --pink-hot: #ff4dd9;
  --magenta: #d600ff;
  --cyan: #00f0ff;
  --cyan-soft: #7afcff;
  --purple: #8a2be2;
  --orange: #ffae00;
  --yellow: #ffe629;
  --green: #00ff9c;

  --ink: #f5f0ff;
  --ink-dim: #b8a8d6;
  --ink-mute: #7a6c9c;

  --mono: 'VT323', 'Courier New', monospace;
  --pixel: 'Press Start 2P', monospace;
  --display: 'Major Mono Display', monospace;
  --body: 'Space Grotesk', system-ui, sans-serif;

  --grid-cyan: rgba(0, 240, 255, 0.95);
  --grid-pink: rgba(255, 44, 182, 0.95);
}

html { scroll-behavior: smooth; }

/* ========== CUSTOM SCROLLBARS (slim, synthwave) ========== */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,44,182,0.6) rgba(0,0,0,0.4);
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.4);
  border-left: 1px solid rgba(0,240,255,0.08);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff2cb6 0%, #d600ff 50%, #00f0ff 100%);
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.4);
  background-clip: padding-box;
  box-shadow: 0 0 6px rgba(255,44,182,0.45);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff4dd9 0%, #d600ff 50%, #7afcff 100%);
  background-clip: padding-box;
  box-shadow: 0 0 10px var(--cyan), 0 0 12px var(--pink);
}
::-webkit-scrollbar-corner { background: rgba(0,0,0,0.4); }

body {
  font-family: var(--body);
  background: #000;
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: crosshair;
  position: relative;
}

a { color: inherit; text-decoration: none; }

/* ========== BACKGROUND LAYERS ========== */

.bg {
  position: fixed; inset: 0;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
}

.bg__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 75%, #ff2cb6 0%, transparent 35%),
    radial-gradient(ellipse at 50% 100%, #ff8be0 0%, transparent 50%),
    linear-gradient(180deg,
      #02000a 0%,
      #0a0030 30%,
      #2a0044 55%,
      #6b0073 75%,
      #c20a7e 90%,
      #ff2cb6 100%);
}

.bg__stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 27% 9%, #fff, transparent),
    radial-gradient(2px 2px at 45% 22%, #fff, transparent),
    radial-gradient(1px 1px at 63% 14%, #fff, transparent),
    radial-gradient(1px 1px at 78% 28%, #fff, transparent),
    radial-gradient(2px 2px at 88% 12%, #fff, transparent),
    radial-gradient(1px 1px at 8% 35%, #fff, transparent),
    radial-gradient(1px 1px at 35% 6%, #fff, transparent),
    radial-gradient(1px 1px at 55% 32%, #ffe9ff, transparent),
    radial-gradient(1px 1px at 92% 38%, #fff, transparent),
    radial-gradient(2px 2px at 18% 45%, #fff, transparent),
    radial-gradient(1px 1px at 70% 40%, #fff, transparent);
  background-size: 100% 60%;
  background-repeat: no-repeat;
  animation: twinkle 4s ease-in-out infinite;
  opacity: 0.85;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.4; }
}

/* Canvas layer holding the gravity-well stars (desktop only — see app.js) */
.bg__stars .stars-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The big synthwave sun */
.bg__sun {
  position: absolute;
  left: 50%;
  bottom: 22vh;
  transform: translateX(-50%);
  width: 60vh;
  height: 60vh;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 60px rgba(255, 44, 182, 0.6));
}

.bg__sun-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    /* horizontal slits */
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 14px,
      rgba(0,0,0,0.85) 14px,
      rgba(0,0,0,0.85) 18px
    ),
    /* the gradient orb */
    linear-gradient(180deg,
      #ffe629 0%,
      #ffae00 25%,
      #ff4dd9 55%,
      #d600ff 80%,
      #6b00aa 100%);
  -webkit-mask: radial-gradient(circle, #000 60%, transparent 60%);
  mask: radial-gradient(circle, #000 60%, transparent 60%);
  animation: sunPulse 6s ease-in-out infinite;
}

@keyframes sunPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

/* Distant mountain silhouette */
.bg__mountains {
  position: absolute;
  left: 0; right: 0;
  bottom: 22vh;
  height: 18vh;
  z-index: 1;
}
.bg__mountains svg { width: 100%; height: 100%; display: block; }

/* The infinite scrolling grid floor */
.bg__grid {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -28vh;
  height: 50vh;
  background-image:
    linear-gradient(var(--grid-cyan) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-cyan) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  transform: perspective(450px) rotateX(62deg);
  transform-origin: center top;
  animation: gridScroll 1.6s linear infinite;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.7))
          drop-shadow(0 0 10px rgba(0, 240, 255, 0.35));
  z-index: 1;
}

@keyframes gridScroll {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 60px, 0 0; }
}

.bg__horizon-glow {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(22vh - 2px);
  height: 4px;
  background: linear-gradient(90deg, transparent, #00f0ff 20%, #ff2cb6 50%, #00f0ff 80%, transparent);
  box-shadow: 0 0 30px #ff2cb6, 0 0 60px #00f0ff, 0 0 12px #fff;
  z-index: 2;
}

/* Small palm silhouettes scattered along the horizon */
.bg__mountain-palms {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;        /* same plane as mountains; after them in DOM so they paint on top */
}
.mountain-palm {
  position: absolute;
  bottom: 22vh;
  width: 110px;
  height: 110px;
  /* Match the mountain gradient mid-tone so palms read as part of the silhouette */
  color: #0d001f;
  transform: translateX(-50%) scale(var(--scale, 0.5)) scaleX(var(--flip, 1));
  transform-origin: bottom center;
}
.mountain-palm svg { width: 100%; height: 100%; display: block; }

/* ========== SHOOTER MODE ========== */
.shooter-btn {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 4px;
  color: #fff;
  background: rgba(255, 44, 182, 0.12);
  border: 2px solid var(--pink);
  padding: 0.55rem 1.3rem;
  cursor: pointer;
  text-shadow: 0 0 8px var(--pink), 0 0 14px rgba(255, 44, 182, 0.5);
  box-shadow: 0 0 14px rgba(255, 44, 182, 0.35), inset 0 0 8px rgba(255, 44, 182, 0.15);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background 0.18s, box-shadow 0.18s, transform 0.18s, color 0.18s;
  outline: none;
}
.shooter-btn:hover,
.shooter-btn:focus-visible {
  background: rgba(255, 44, 182, 0.28);
  box-shadow:
    0 0 22px var(--pink),
    0 0 44px rgba(255, 44, 182, 0.55),
    inset 0 0 14px rgba(255, 44, 182, 0.25);
  transform: translateY(-2px);
}
.shooter-btn[aria-pressed="true"] {
  background: rgba(0, 240, 255, 0.16);
  border-color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan), 0 0 14px rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4), inset 0 0 8px rgba(0, 240, 255, 0.15);
}

.shooter-indicator {
  position: fixed;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.shooter-indicator__title {
  display: block;
  font-family: var(--pixel);
  font-size: 13px;
  letter-spacing: 5px;
  color: var(--pink);
  text-shadow: 0 0 8px var(--pink), 0 0 16px rgba(255, 44, 182, 0.55);
  animation: shooterPulse 1.2s ease-in-out infinite;
}
.shooter-indicator__stage {
  display: block;
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 6px;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan), 0 0 22px rgba(0, 240, 255, 0.55);
  margin-top: 0.4rem;
}
.shooter-indicator__hint {
  display: block;
  font-family: var(--pixel);
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan);
  margin-top: 0.45rem;
  opacity: 0.8;
}
@keyframes shooterPulse {
  0%, 100% { opacity: 0.55; transform: scale(1);    }
  50%      { opacity: 1;    transform: scale(1.03); }
}
body.shooter-mode .shooter-indicator { opacity: 1; }

/* Stage-break cinematic overlay — shows "STAGE COMPLETE" then "STAGE N"
   with a scale-in + flash sequence. Activated by body.is-stage-break. */
.stage-break {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
body.is-stage-break .stage-break { opacity: 1; }
.stage-break__inner {
  text-align: center;
  /* Subtle backdrop so the text reads against any bg */
  padding: 2rem 3rem;
  background: radial-gradient(ellipse at center,
    rgba(2, 0, 18, 0.85) 0%,
    rgba(2, 0, 18, 0.4) 60%,
    transparent 100%);
}
.stage-break__title {
  display: block;
  font-family: var(--pixel);
  font-size: 18px;
  letter-spacing: 8px;
  color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan), 0 0 26px rgba(0, 240, 255, 0.6);
  opacity: 0;
  transform: translateY(-12px);
}
.stage-break__next {
  display: block;
  font-family: var(--display);
  font-size: 64px;
  letter-spacing: 10px;
  color: var(--pink);
  text-shadow: 0 0 18px var(--pink), 0 0 40px rgba(255, 44, 182, 0.65);
  margin-top: 1rem;
  opacity: 0;
  transform: scale(0.6);
}
/* When is-stage-break is on body, replay the entry animations on each break.
   The JS toggles the class off → reflow → on so these fire fresh every time. */
body.is-stage-break .stage-break__title { animation: stageTitleIn 0.55s 0.15s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
body.is-stage-break .stage-break__next  { animation: stageNextIn  0.7s 0.65s cubic-bezier(0.18, 0.85, 0.25, 1) forwards; }
@keyframes stageTitleIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes stageNextIn {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 760px) {
  .stage-break__next { font-size: 44px; letter-spacing: 6px; }
}

/* Game-over overlay — same architecture as the stage-break overlay but a red
   "GAME OVER" treatment. Activated by body.is-game-over. */
.game-over {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
body.is-game-over .game-over { opacity: 1; }
.game-over__inner {
  text-align: center;
  padding: 2rem 3rem;
  background: radial-gradient(ellipse at center,
    rgba(20, 0, 5, 0.92) 0%,
    rgba(20, 0, 5, 0.5) 60%,
    transparent 100%);
}
.game-over__title {
  display: block;
  font-family: var(--display);
  font-size: 72px;
  letter-spacing: 12px;
  color: #ff2c2c;
  text-shadow: 0 0 18px #ff2c2c, 0 0 40px rgba(255, 44, 44, 0.65);
  opacity: 0;
  transform: scale(0.6);
}
.game-over__sub {
  display: block;
  font-family: var(--pixel);
  font-size: 12px;
  letter-spacing: 6px;
  color: var(--pink);
  text-shadow: 0 0 8px var(--pink);
  margin-top: 1.4rem;
  opacity: 0;
}
body.is-game-over .game-over__title { animation: gameOverIn   0.7s 0.1s cubic-bezier(0.18, 0.85, 0.25, 1) forwards; }
body.is-game-over .game-over__sub   { animation: gameOverSubIn 0.5s 0.8s ease forwards; }
@keyframes gameOverIn {
  0%   { opacity: 0; transform: scale(0.6); }
  55%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes gameOverSubIn { to { opacity: 1; } }
@media (max-width: 760px) {
  .game-over__title { font-size: 50px; letter-spacing: 8px; }
}

/* Fade the page chrome, content sections, the footer, AND the chat launcher
   out so the synthwave bg becomes the game arena. ESC is the only exit. */
.topbar,
main > section,
.footer,
.aw-launcher,
.aw-greeting {
  transition: opacity 0.7s ease;
}
body.shooter-mode .topbar,
body.shooter-mode main > section,
body.shooter-mode .footer,
body.shooter-mode .aw-launcher,
body.shooter-mode .aw-greeting {
  opacity: 0;
  pointer-events: none;
}

/* Crosshair cursor in shooter mode — yellow main reticle layered over a thick
   black outline so it stays visible against the pink sun, the cyan grid, the
   dark sky, and everything in between. Center dot in pink. The "18 18"
   hotspot pins the click point to the dead-center of the 36×36 SVG. */
body.shooter-mode,
body.shooter-mode .bg__rider,
body.shooter-mode .bg-ufo {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'><g stroke='%23000' stroke-width='5' fill='none' stroke-linecap='round'><circle cx='18' cy='18' r='12'/><line x1='18' y1='1' x2='18' y2='10'/><line x1='18' y1='26' x2='18' y2='35'/><line x1='1' y1='18' x2='10' y2='18'/><line x1='26' y1='18' x2='35' y2='18'/></g><g stroke='%23ffe629' stroke-width='2.4' fill='none' stroke-linecap='round'><circle cx='18' cy='18' r='12'/><line x1='18' y1='1' x2='18' y2='10'/><line x1='18' y1='26' x2='18' y2='35'/><line x1='1' y1='18' x2='10' y2='18'/><line x1='26' y1='18' x2='35' y2='18'/></g><circle cx='18' cy='18' r='2.2' fill='%23ff2cb6' stroke='%23000' stroke-width='0.8'/></svg>") 18 18, crosshair;
}

/* Disable text-selection (click-and-drag "painting") site-wide so the user
   can't accidentally highlight content while shooting / browsing. Drag-image
   ghosts on <img>/<svg>/<a> are suppressed for the same reason. The chat
   widget is the lone exception — users need to be able to read/copy messages
   there, so selection + drag are restored inside .aw-panel. */
body, body * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
img, svg, a {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Re-enable inside the chat widget panel. */
.aw-panel,
.aw-panel * {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
}
.aw-panel img,
.aw-panel svg,
.aw-panel a {
  -webkit-user-drag: auto;
  user-drag: auto;
}

/* Always let users type/select inside form fields (defensive — covers any
   stray <input>/<textarea> that might exist outside the chat widget). */
input,
textarea,
select {
  user-select: text;
  -webkit-user-select: text;
}

/* ========== KILL COUNTER ========== */
.kill-counter {
  position: fixed;
  top: 4rem;             /* below the sticky topbar so it isn't blurred/hidden */
  left: 0.6rem;
  z-index: 101;          /* above the topbar's z-index 100 just in case it scrolls past */
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.35rem 0.55rem;
  background: rgba(2, 0, 14, 0.75);
  border: 1px solid rgba(255, 44, 182, 0.45);
  font-family: var(--pixel);
  font-size: 8px;
  letter-spacing: 1.2px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  box-shadow: 0 0 12px rgba(255, 44, 182, 0.2);
}
.kill-counter__row {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  min-width: 56px;
}
.kill-counter__label {
  color: var(--pink);
  text-shadow: 0 0 4px var(--pink);
}
.kill-counter__value {
  color: #fff;
  text-shadow: 0 0 4px var(--cyan), 0 0 8px var(--cyan);
  min-width: 2ch;
  text-align: right;
}

/* Layer for the bike + UFOs — sits BEHIND page content so cards/titles
   visually cover them. Clicks are routed via a document-level handler in
   app.js since lowering the z-index also moves it behind the content's
   hit-testing layer. */
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: -5;        /* above .bg (-10), below page content (auto/0) */
  pointer-events: none;
  overflow: hidden;
}

/* E-bike rider — JS-spawned + driven (see spawnBike in app.js). One bike per
   instance, multiple can coexist, each appears at a random Z-depth on the grid
   floor from a random side. All positioning + animation handled inline by JS. */
.bg__rider {
  position: absolute;
  left: 0;
  /* Sprite size scales with viewport — `--vp-scale` is set on <html> by JS to
     (innerWidth / 2560), so on a 2K monitor the bike is 52×48 CSS px, on a
     1280-wide window it's 26×24, etc. Keeps the bike's % of viewport constant. */
  width:  calc(52px * var(--vp-scale, 1));
  height: calc(48px * var(--vp-scale, 1));
  /* Single drop-shadow instead of stacked — every additional drop-shadow is a
     separate full-element filter pass during rasterization. */
  filter: drop-shadow(0 0 5px rgba(255, 44, 182, 0.55));
  pointer-events: auto;     /* clickable inside the otherwise-pass-through fx-layer */
  cursor: pointer;
  /* GPU-promote so per-frame transform updates don't trigger paint on other
     elements in the scene. `contain` further isolates the bike's paint region. */
  will-change: transform;
  contain: layout style paint;
  transform: translateZ(0);
}
.bg__rider svg { width: 100%; height: 100%; display: block; pointer-events: none; }


/* ========== SHOOTING STARS ========== */
.shooting-star {
  position: absolute;
  top: var(--y, 10vh);
  left: var(--x, 50vw);
  width: var(--len, 110px);
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 240, 255, 0.55) 55%,
    rgba(0, 240, 255, 1) 88%,
    #ffffff 100%);
  border-radius: 1px;
  box-shadow: 0 0 5px rgba(0, 240, 255, 0.85), 0 0 12px rgba(0, 240, 255, 0.45);
  pointer-events: none;
  transform-origin: 100% 50%;   /* pivot at the head (right end) */
  opacity: 0;
  z-index: 4;
  animation: shootingStarFly var(--dur, 1.1s) linear forwards;
  will-change: transform, opacity;
}
@keyframes shootingStarFly {
  0%   { transform: rotate(var(--angle, 30deg)) translateX(calc(var(--travel, 320px) * -1)); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: rotate(var(--angle, 30deg)) translateX(var(--travel, 320px));            opacity: 0; }
}

/* ========== UFO ========== */
.bg-ufo {
  position: absolute;
  top: 0; left: 0;
  /* Scales with viewport (see .bg__rider comment). */
  width:  calc(64px * var(--vp-scale, 1));
  height: calc(38px * var(--vp-scale, 1));
  /* Single drop-shadow for cheaper rasterization (was two stacked). */
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.55));
  will-change: transform, opacity;
  contain: layout style paint;
  transform: translateZ(0);
  pointer-events: auto;
  cursor: pointer;
}
.bg-ufo svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.bg-ufo.is-falling { filter: drop-shadow(0 0 8px rgba(255, 230, 41, 0.9)) drop-shadow(0 0 18px rgba(255, 44, 182, 0.7)); }

/* Splitter UFO — yellow body + pink dome, with a matching halo so it reads as
   a distinct enemy class against the regular cyan-haloed UFOs. */
.bg-ufo--splitter {
  filter: drop-shadow(0 0 5px rgba(255, 230, 41, 0.7))
          drop-shadow(0 0 12px rgba(255, 44, 182, 0.55));
}

/* ========== POWER-UP BAR (bottom-middle) ========== */
.powerup-bar {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: none;                /* shown only in shooter mode */
  flex-direction: row;
  gap: 0.9rem;
  z-index: 200;
  /* Completely transparent to mouse — clicks fall through to whatever (bikes,
     UFOs, the boss) is behind. The bar is decoration + key-press hints only. */
  pointer-events: none !important;
}
body.shooter-mode .powerup-bar { display: flex; }
/* Belt-and-suspenders: every descendant explicitly disables pointer events
   too, in case any browser fails to inherit. */
.powerup-bar * { pointer-events: none !important; }

.powerup {
  --c: var(--cyan);
  position: relative;
  width: 70px;
  height: 70px;
  background: rgba(2, 0, 14, 0.55);
  border: 2px solid var(--c);
  overflow: hidden;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: 0 0 12px color-mix(in oklab, var(--c) 40%, transparent);
  /* Faded while charging, full opacity when ready. JS toggles `is-ready`. */
  opacity: 0.38;
  transition: opacity 0.25s ease, box-shadow 0.25s;
}
.powerup.is-ready { opacity: 1; }
.powerup--slow { --c: var(--cyan); }
.powerup--ally { --c: #00ff9c;     }

/* Cooldown fill — rises vertically from the bottom as the power recharges. */
.powerup__fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;                   /* JS drives this 0 → 100 % */
  background: linear-gradient(to top,
    color-mix(in oklab, var(--c) 60%, transparent) 0%,
    color-mix(in oklab, var(--c) 12%, transparent) 100%);
  transition: height 0.18s linear;
  z-index: 1;
}
.powerup__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  z-index: 2;
}
.powerup__key {
  font-family: var(--display);
  font-size: 28px;
  color: var(--c);
  text-shadow: 0 0 8px var(--c), 0 0 16px color-mix(in oklab, var(--c) 50%, transparent);
  line-height: 1;
}
.powerup__label {
  font-family: var(--pixel);
  font-size: 8px;
  letter-spacing: 2.5px;
  color: color-mix(in oklab, var(--c) 80%, white 20%);
  text-shadow: 0 0 4px var(--c);
}

/* Ready state — pulses the outer glow and fills the cooldown bar to 100. */
.powerup.is-ready {
  animation: powerupReadyPulse 1.1s ease-in-out infinite;
}
.powerup.is-ready .powerup__fill { height: 100%; }

@keyframes powerupReadyPulse {
  0%, 100% { box-shadow: 0 0 12px color-mix(in oklab, var(--c) 60%, transparent); }
  50%      { box-shadow: 0 0 24px var(--c), 0 0 40px color-mix(in oklab, var(--c) 50%, transparent); }
}

/* Flash when consumed — quick bright-white pop. */
.powerup.is-fired {
  animation: powerupFired 0.4s ease-out;
}
@keyframes powerupFired {
  0%   { box-shadow: 0 0 30px #fff, 0 0 50px var(--c); }
  100% { box-shadow: 0 0 12px color-mix(in oklab, var(--c) 40%, transparent); }
}

/* ========== BOSS UFO ========== */
.bg-boss {
  position: fixed;
  top: 0; left: 0;
  /* Scales with viewport. Boss is ~5× the regular UFO width. */
  width:  calc(320px * var(--vp-scale, 1));
  height: calc(160px * var(--vp-scale, 1));
  z-index: 1;
  pointer-events: auto;
  cursor: crosshair;
  filter: drop-shadow(0 0 8px rgba(255, 44, 182, 0.85))
          drop-shadow(0 0 24px rgba(0, 240, 255, 0.55));
  will-change: transform;
  animation: bossHover 4.5s ease-in-out infinite;
}
.bg-boss svg { width: 100%; height: 100%; display: block; pointer-events: none; }
@keyframes bossHover {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 44, 182, 0.85)) drop-shadow(0 0 24px rgba(0, 240, 255, 0.55)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 44, 182, 1))   drop-shadow(0 0 36px rgba(0, 240, 255, 0.8));  }
}
/* Damage flash — red drop-shadow + small shake. JS toggles this class for
   ~180ms each hit. `bossHitShake` uses the individual `translate` property so
   it composes with the JS-set `transform: translate(x, y)` (which positions
   the boss) instead of clobbering it. */
.bg-boss.is-hit {
  filter: drop-shadow(0 0 14px #ff2c2c) drop-shadow(0 0 30px #ff5050) brightness(1.55) saturate(1.4);
  animation: bossHitShake 0.18s ease-out;
}
@keyframes bossHitShake {
  0%, 100% { translate: 0 0; }
  20%      { translate: -5px  2px; }
  40%      { translate:  5px -2px; }
  60%      { translate: -4px  1px; }
  80%      { translate:  4px -1px; }
}

/* Damage smoke — dark grey-magenta puffs that drift up from the boss when
   it's below ~50 % HP. JS spawns them at an interval that tightens as HP
   drops further. --dx randomizes the lateral drift per puff. */
.boss-smoke {
  position: fixed;
  width: calc(22px * var(--vp-scale, 1));
  height: calc(22px * var(--vp-scale, 1));
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle,
    rgba(95, 50, 80, 0.78) 0%,
    rgba(50, 25, 50, 0.5)  45%,
    transparent             100%);
  box-shadow: 0 0 10px rgba(255, 60, 110, 0.35);
  transform: translate(-50%, -50%) scale(0.5);
  animation: bossSmoke 1.7s ease-out forwards;
  will-change: transform, opacity;
  --dx: 0px;
}
@keyframes bossSmoke {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0.9; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% - 90px)) scale(2.6); opacity: 0; }
}

/* Energy shield wrapping the boss after every 5 hits. Spawned as a child of
   the boss element so it follows the boss transform automatically. */
.bg-boss__shield {
  position: absolute;
  inset: -8% -6%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(0, 240, 255, 0.18) 0%,
    rgba(0, 240, 255, 0.42) 60%,
    rgba(0, 240, 255, 0) 100%);
  border: 2px solid rgba(0, 240, 255, 0.85);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.9), inset 0 0 30px rgba(0, 240, 255, 0.6);
  pointer-events: none;
  animation: bossShieldPulse 0.8s ease-in-out infinite;
}
@keyframes bossShieldPulse {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%      { transform: scale(1.05); opacity: 0.75; }
}

/* Boss pulse / shockwave — JS attaches one of these to .bg-boss when the
   boss raises its shield. Math: starting width is 60px, scale at full
   expansion is ~27 → 1620px diameter → 810px radius, matching the JS
   pulsePeakRadius of 800*vp closely. */
.bg-boss__pulse {
  position: absolute;
  top: 50%; left: 50%;
  width:  calc(60px * var(--vp-scale, 1));
  height: calc(60px * var(--vp-scale, 1));
  border-radius: 50%;
  border: 3px solid rgba(0, 240, 255, 0.9);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.7),
              0 0 56px rgba(255, 44, 182, 0.55),
              inset 0 0 22px rgba(0, 240, 255, 0.4);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  animation: bossPulseRing 750ms ease-out forwards;
}
@keyframes bossPulseRing {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0;    border-color: rgba(0, 240, 255, 1);   }
  20%  { transform: translate(-50%, -50%) scale(5);   opacity: 1;    border-color: rgba(0, 240, 255, 0.95); }
  60%  { transform: translate(-50%, -50%) scale(22);  opacity: 0.65; border-color: rgba(255, 44, 182, 0.75); }
  100% { transform: translate(-50%, -50%) scale(27);  opacity: 0;    border-color: rgba(255, 44, 182, 0);   }
}

/* ========== BOSS HP BAR (top-middle) ========== */
.boss-hp {
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 220;
  display: none;                          /* JS toggles via inline display */
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1.4rem;
  background: rgba(2, 0, 14, 0.75);
  border: 2px solid var(--pink);
  font-family: var(--pixel);
  pointer-events: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 0 18px rgba(255, 44, 182, 0.5);
}
.boss-hp__label {
  font-size: 11px;
  letter-spacing: 5px;
  color: var(--pink);
  text-shadow: 0 0 8px var(--pink);
}
.boss-hp__bar {
  width: 260px;
  height: 14px;
  background: rgba(255, 44, 182, 0.12);
  border: 1px solid rgba(255, 44, 182, 0.6);
  overflow: hidden;
  position: relative;
}
.boss-hp__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, #ff2cb6 0%, #ff8be0 70%, #ffe629 100%);
  box-shadow: 0 0 12px var(--pink);
  transition: width 0.18s ease-out;
}
.boss-hp__text {
  font-size: 10px;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 0 6px var(--cyan);
}

/* Green laser fired by the Ally UFO. Linear gradient with a bright white head
   and trailing green tail, plus a neon glow. transform-origin pins rotation
   around the right edge so JS only has to set translate + rotate. */
.ally-laser {
  position: absolute;
  top: 0; left: 0;
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(to right,
    rgba(0, 255, 156, 0) 0%,
    rgba(0, 255, 156, 0.45) 40%,
    rgba(0, 255, 156, 1) 80%,
    #ffffff 100%);
  box-shadow:
    0 0 5px rgba(0, 255, 156, 1),
    0 0 12px rgba(0, 255, 156, 0.7);
  pointer-events: none;
  transform-origin: 100% 50%;
  will-change: transform;
  z-index: 1;
}

/* Friendly ALLY UFO — green main glow with a magenta secondary halo so the
   bloom matches the multicolor synthwave SVG (green body + magenta dome +
   cyan rim + yellow lights). Not clickable, and pulses to draw the eye. */
.bg-ufo--ally {
  filter: drop-shadow(0 0 6px rgba(0, 255, 156, 0.9))
          drop-shadow(0 0 16px rgba(255, 44, 182, 0.55));
  pointer-events: none !important;
  cursor: default !important;
  animation: allyPulse 0.9s ease-in-out infinite;
}
@keyframes allyPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(0, 255, 156, 0.9))  drop-shadow(0 0 16px rgba(255, 44, 182, 0.55)); }
  50%      { filter: drop-shadow(0 0 10px rgba(0, 255, 156, 1))   drop-shadow(0 0 26px rgba(255, 44, 182, 0.8));  }
}

/* Permanent ally UFOs — boss rewards. Shinier than the temp ally (gold-tinted
   halo + stronger pulse) and leave a green particle trail behind them. They
   also wear a callsign label that the player picked. */
.bg-ufo--permanent {
  animation: permanentShine 1.6s ease-in-out infinite;
}
@keyframes permanentShine {
  0%, 100% {
    filter: drop-shadow(0 0 8px  rgba(0, 255, 156, 1))
            drop-shadow(0 0 22px rgba(0, 255, 156, 0.6))
            drop-shadow(0 0 32px rgba(255, 230, 41, 0.35));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(0, 255, 156, 1))
            drop-shadow(0 0 34px rgba(0, 255, 156, 0.85))
            drop-shadow(0 0 48px rgba(255, 230, 41, 0.6));
  }
}

/* Callsign label that follows a permanent UFO. */
.bg-ufo__name {
  position: fixed;
  top: 0; left: 0;
  z-index: 2;
  font-family: 'VT323', monospace;
  font-size: calc(15px * var(--vp-scale, 1));
  letter-spacing: 0.08em;
  color: #00ff9c;
  text-shadow: 0 0 6px rgba(0, 255, 156, 0.9),
               0 0 12px rgba(0, 255, 156, 0.6),
               0 0 18px rgba(255, 230, 41, 0.4);
  pointer-events: none;
  white-space: nowrap;
  will-change: transform;
  animation: nameGlowPulse 1.6s ease-in-out infinite;
}
@keyframes nameGlowPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Boss victory / naming modal — full-screen overlay with the synthwave panel.
   Opens when the boss dies; blocks input behind it until the player names
   their new ally. */
.boss-victory {
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: rgba(8, 0, 24, 0.78);
  backdrop-filter: blur(4px);
}
.boss-victory.is-visible {
  display: flex;
  animation: bossVictoryFade 0.45s ease-out;
}
@keyframes bossVictoryFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.boss-victory__panel {
  background: linear-gradient(135deg, rgba(255, 44, 182, 0.18), rgba(0, 240, 255, 0.18));
  border: 2px solid rgba(0, 255, 156, 0.7);
  border-radius: 10px;
  padding: 38px 52px 32px;
  text-align: center;
  box-shadow: 0 0 28px rgba(0, 255, 156, 0.55),
              0 0 56px rgba(255, 44, 182, 0.45);
  max-width: 520px;
  width: 90%;
  animation: bossVictoryPanel 0.5s ease-out;
}
@keyframes bossVictoryPanel {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.boss-victory__title {
  font-family: 'Press Start 2P', monospace;
  font-size: 22px;
  color: #00ff9c;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(0, 255, 156, 0.9),
               0 0 18px rgba(0, 255, 156, 0.55);
}
.boss-victory__sub {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: #f0f0ff;
  margin-bottom: 28px;
  line-height: 1.3;
}
.boss-victory__label {
  display: block;
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: #00f0ff;
  margin-bottom: 8px;
  letter-spacing: 0.14em;
}
.boss-victory__input {
  font-family: 'VT323', monospace;
  font-size: 26px;
  text-align: center;
  width: 80%;
  background: rgba(0, 0, 24, 0.72);
  border: 2px solid rgba(0, 240, 255, 0.6);
  color: #00ff9c;
  padding: 8px 12px;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  outline: none;
  text-shadow: 0 0 6px rgba(0, 255, 156, 0.7);
}
.boss-victory__input:focus {
  border-color: #00ff9c;
  box-shadow: 0 0 12px rgba(0, 255, 156, 0.65);
}
.boss-victory__confirm {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  padding: 12px 30px;
  background: linear-gradient(135deg, #ff2cb6, #00f0ff);
  color: #0a001a;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.1em;
  box-shadow: 0 0 16px rgba(0, 255, 156, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.boss-victory__confirm:hover {
  transform: scale(1.05);
  box-shadow: 0 0 22px rgba(0, 255, 156, 0.85);
}

/* Slow-mo orb power-up — small cyan timer icon that floats across the sky.
   Translate is driven by JS via the `translate:` individual property so we can
   keep the CSS rotate animation independent. */
.slowmo-orb {
  position: absolute;
  top: 0; left: 0;
  /* Scales with viewport (see .bg__rider comment). */
  width:  calc(40px * var(--vp-scale, 1));
  height: calc(40px * var(--vp-scale, 1));
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.85))
          drop-shadow(0 0 18px rgba(0, 240, 255, 0.5));
  will-change: translate, rotate;
  animation: orbSpin 3s linear infinite, orbPulse 1.4s ease-in-out infinite;
}
.slowmo-orb svg { width: 100%; height: 100%; display: block; pointer-events: none; }
@keyframes orbSpin {
  to { rotate: 360deg; }
}
@keyframes orbPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.85)) drop-shadow(0 0 18px rgba(0, 240, 255, 0.5)); }
  50%      { filter: drop-shadow(0 0 14px rgba(0, 240, 255, 1))   drop-shadow(0 0 28px rgba(0, 240, 255, 0.7)); }
}
/* Ally orb — primary green halo, secondary magenta halo so the synthwave
   neon contrast carries into the glow on top of the SVG accent colors. */
.slowmo-orb--ally {
  filter: drop-shadow(0 0 8px rgba(0, 255, 156, 0.9))
          drop-shadow(0 0 18px rgba(255, 44, 182, 0.45));
  animation: orbSpin 3s linear infinite, allyOrbPulse 1.4s ease-in-out infinite;
}
@keyframes allyOrbPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(0, 255, 156, 0.9))  drop-shadow(0 0 18px rgba(255, 44, 182, 0.45)); }
  50%      { filter: drop-shadow(0 0 14px rgba(0, 255, 156, 1))   drop-shadow(0 0 28px rgba(255, 44, 182, 0.7));  }
}

/* Slow-mo screen treatment — cyan vignette + slight chromatic tint so the
   player FEELS time slowing. Activated by body.is-slowmo for SLOWMO_DURATION. */
body.is-slowmo::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 240;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    transparent 25%,
    rgba(0, 240, 255, 0.10) 60%,
    rgba(0, 240, 255, 0.32) 100%);
  mix-blend-mode: screen;
  animation: slowmoVignette 5s ease-out forwards;
}
@keyframes slowmoVignette {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ========== EXPLOSION + SCREEN-SHAKE + NEON FLASH ========== */
.fx-explosion {
  position: fixed;
  width: 0;
  height: 0;
  z-index: 9998;
  pointer-events: none;
}
.fx-explosion__shock {
  position: absolute;
  left: 0; top: 0;
  width: 30px;
  height: 30px;
  margin: -15px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 30px #fff, 0 0 60px rgba(255, 44, 182, 0.8);
  animation: fxShock 0.55s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
}
.fx-explosion__particle {
  position: absolute;
  left: 0; top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin: -4.5px;
  animation: fxParticle 0.95s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  will-change: transform, opacity;
}
@keyframes fxShock {
  0%   { transform: scale(0.2); opacity: 1; }
  60%  { opacity: 0.65; }
  100% { transform: scale(11); opacity: 0; }
}
@keyframes fxParticle {
  0%   { transform: translate(0, 0) scale(1.4); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.2); opacity: 0; }
}

/* Brief radial neon flash overlay */
.fx-flash {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: radial-gradient(circle at var(--fx-x, 50%) var(--fx-y, 50%),
    rgba(255, 230, 41, 0.55) 0%,
    rgba(255, 44, 182, 0.45) 20%,
    rgba(0, 240, 255, 0.22) 45%,
    transparent 75%);
  mix-blend-mode: screen;
  animation: fxFlash 0.55s ease-out forwards;
}
@keyframes fxFlash {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Screen shake — applied to body's direct children INSTEAD of body itself,
   because putting a transform on body breaks position:fixed (it makes body
   the containing block, so .bg and the explosion get repositioned relative
   to body — which causes the dark-background-during-shake and the
   explosion-drifts-when-scrolled bugs). Shaking each sibling separately
   keeps the visual effect while preserving fixed positioning. */
@keyframes fxShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-7px, -3px) rotate(-0.4deg); }
  20% { transform: translate( 8px,  4px) rotate( 0.5deg); }
  30% { transform: translate(-6px,  6px) rotate(-0.3deg); }
  40% { transform: translate( 7px, -2px) rotate( 0.3deg); }
  50% { transform: translate(-8px,  3px) rotate(-0.2deg); }
  60% { transform: translate( 5px, -5px) rotate( 0.2deg); }
  70% { transform: translate(-4px,  6px) rotate(-0.1deg); }
  80% { transform: translate( 6px, -4px); }
  90% { transform: translate(-3px,  2px); }
}
body.fx-shake > .bg,
body.fx-shake > .topbar,
body.fx-shake > main,
body.fx-shake > .fx-layer {
  animation: fxShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* CRT scanlines */
.bg__scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.18) 0,
    rgba(0,0,0,0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 5;
  mix-blend-mode: multiply;
  animation: scanFlicker 4s steps(60) infinite;
}

@keyframes scanFlicker {
  0%, 100% { opacity: 1; }
  47% { opacity: 0.92; }
  48% { opacity: 1; }
}

.bg__noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
  z-index: 6;
  animation: noiseShift 0.4s steps(8) infinite;
}

@keyframes noiseShift {
  0% { transform: translate(0,0); }
  20% { transform: translate(-2%, 1%); }
  40% { transform: translate(2%, -1%); }
  60% { transform: translate(-1%, 2%); }
  80% { transform: translate(1%, -2%); }
  100% { transform: translate(0,0); }
}

.bg__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.7) 100%);
  z-index: 7;
}

.bg__tracking {
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  top: -60px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.04) 30%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 70%,
    transparent 100%);
  filter: blur(2px);
  animation: tracking 9s linear infinite;
  z-index: 8;
}

@keyframes tracking {
  0% { top: -60px; }
  100% { top: 110%; }
}

/* ========== BOOT OVERLAY ========== */

.boot {
  position: fixed; inset: 0;
  background: #000;
  z-index: 9999;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  color: var(--cyan);
  padding: 4rem 2rem;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.boot.boot--done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot__inner {
  width: 100%;
  max-width: 640px;
  text-shadow: 0 0 8px var(--cyan), 0 0 2px #fff;
}

.boot__header {
  font-size: 18px;
  letter-spacing: 1px;
  border-bottom: 1px dashed var(--cyan);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  opacity: 0.85;
}

.boot__log {
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1.25;
  white-space: pre-wrap;
  min-height: 14em;
  margin-bottom: 1.5rem;
}

.boot__log .ok { color: var(--green); text-shadow: 0 0 8px var(--green); }
.boot__log .warn { color: var(--orange); text-shadow: 0 0 8px var(--orange); }
.boot__log .err  { color: var(--pink); text-shadow: 0 0 8px var(--pink); }

.boot__bar {
  height: 14px;
  border: 1px solid var(--cyan);
  background: rgba(0,240,255,0.05);
  position: relative;
  margin-bottom: 0.6rem;
}

.boot__bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  box-shadow: 0 0 12px var(--cyan);
  transition: width 0.15s linear;
}

.boot__hint {
  font-size: 16px;
  text-align: right;
  opacity: 0.6;
  animation: blink 1s steps(2) infinite;
}

@keyframes blink {
  50% { opacity: 0.1; }
}

/* CRT switch-off animation when boot ends */
.boot.boot--off .boot__inner {
  animation: crtOff 0.55s ease forwards;
}

@keyframes crtOff {
  0%   { transform: scale(1, 1); filter: brightness(1); }
  40%  { transform: scale(1, 0.06); filter: brightness(2); }
  70%  { transform: scale(0.04, 0.04); filter: brightness(3); }
  100% { transform: scale(0, 0); filter: brightness(0); opacity: 0; }
}

/* ========== TOPBAR ========== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(8,0,26,0.85), rgba(8,0,26,0.5) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 240, 255, 0.25);
}

/* ========== TOPBAR PLAYER (always visible, centered in topbar) ========== */
.topbar__player {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem;
  background: linear-gradient(180deg, rgba(20,0,43,0.55) 0%, rgba(8,0,24,0.55) 100%);
  border: 1px solid rgba(0,240,255,0.3);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 14px rgba(255,44,182,0.25);
  justify-self: center;
  min-width: 0;
  max-width: 720px;
  width: 100%;
}

/* Transport buttons */
.mpm__btn {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0,240,255,0.4);
  background: radial-gradient(circle at 35% 28%, #2a1a3a 0%, #100020 80%, #06000f 100%);
  color: var(--cyan);
  font-size: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 6px rgba(0,240,255,0.2);
  text-shadow: 0 0 6px var(--cyan);
  transition: transform 0.1s, color 0.15s, border-color 0.15s, box-shadow 0.2s;
  flex-shrink: 0;
}
.mpm__btn:hover  { color: #fff; border-color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55), 0 0 12px var(--cyan); }
.mpm__btn:active { transform: scale(0.92); }
.mpm__play {
  width: 34px; height: 34px;
  font-size: 12px;
  background: radial-gradient(circle at 35% 28%, #ff5fd5 0%, #b3187a 40%, #4a0028 100%);
  border-color: rgba(255,44,182,0.7);
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,0.6), 0 0 10px var(--pink);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 14px rgba(255,44,182,0.55);
}
.mpm__play:hover { border-color: var(--pink); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.2), 0 0 20px rgba(255,44,182,0.85); }
.mpm__icon { position: absolute; line-height: 1; }
.mpm__icon--play  { display: grid; place-items: center; }
.mpm__icon--pause { display: none; font-size: 10px; letter-spacing: 1px; }
.mp-playing .mpm__icon--play  { display: none; }
.mp-playing .mpm__icon--pause { display: grid; }

/* LCD screen — spectrum + title/time + seek */
.mpm__screen {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  background: linear-gradient(180deg, #0a0a18, #050010);
  border: 1px solid rgba(0,240,255,0.4);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.6),
    inset 0 0 14px rgba(0,240,255,0.12);
  position: relative;
}
.mpm__screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,240,255,0.05) 0 1px, transparent 1px 3px);
  pointer-events: none;
  mix-blend-mode: screen;
  border-radius: 3px;
}
.mpm__spectrum {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 14px;
  flex-shrink: 0;
}
.mpm__spectrum span {
  flex: 1;
  height: 6%;
  background: linear-gradient(180deg, var(--pink) 0%, var(--magenta) 40%, var(--cyan) 100%);
  border-radius: 1px 1px 0 0;
  transition: height 60ms linear;
}
.mpm__spectrum.is-idle span:nth-child(odd)  { height: 14%; }
.mpm__spectrum.is-idle span:nth-child(even) { height: 6%; }

.mpm__screen-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.mpm__title {
  font-family: var(--pixel);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #fff;
  text-shadow: 0 0 6px var(--pink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mpm__time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cyan);
  text-shadow: 0 0 4px var(--cyan);
  flex-shrink: 0;
  letter-spacing: 1px;
}
.mpm__sep { color: var(--ink-mute); margin: 0 2px; }

/* Seek bar — slim line at the bottom of the screen */
.mpm__seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--pink) 0% var(--mp-fill,0%), rgba(0,240,255,0.15) var(--mp-fill,0%) 100%);
  border: none;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  margin-top: 1px;
}
.mpm__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px; height: 9px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid var(--pink);
  box-shadow: 0 0 6px var(--pink);
  cursor: pointer;
}
.mpm__seek::-moz-range-thumb {
  width: 9px; height: 9px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid var(--pink);
  box-shadow: 0 0 6px var(--pink);
  cursor: pointer;
}

/* Volume — icon visible always, slider hidden until hover/focus on the wrap */
.mpm__vol-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.mpm__vol-btn {
  font-size: 13px;
}
.mp-muted .mpm__vol-btn { color: var(--ink-mute); border-color: rgba(122,108,156,0.4); }
.mpm__vol {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 4px;
  margin-left: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--cyan) 0% var(--mp-vol-fill,5%), rgba(0,240,255,0.15) var(--mp-vol-fill,5%) 100%);
  border: 1px solid rgba(0,240,255,0.35);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: width 0.28s cubic-bezier(0.2,0.85,0.25,1), opacity 0.22s ease, margin-left 0.28s cubic-bezier(0.2,0.85,0.25,1);
}
.mpm__vol-wrap:hover .mpm__vol,
.mpm__vol-wrap:focus-within .mpm__vol,
.mpm__vol-wrap.is-open .mpm__vol {
  width: 80px;
  opacity: 1;
  pointer-events: auto;
  margin-left: 0.4rem;
}
/* On touch-only devices: keep the slider permanently visible (no hover state to reveal it) */
@media (hover: none) {
  .mpm__vol { width: 70px; opacity: 1; pointer-events: auto; margin-left: 0.4rem; }
}
.mpm__vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  cursor: pointer;
}
.mpm__vol::-moz-range-thumb {
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  cursor: pointer;
}

/* Tablet/desktop intermediate sizing (single-row topbar) */
@media (max-width: 1100px) and (min-width: 761px) {
  .topbar__player { max-width: 460px; }
  .mpm__vol-wrap:hover .mpm__vol,
  .mpm__vol-wrap:focus-within .mpm__vol,
  .mpm__vol-wrap.is-open .mpm__vol { width: 60px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .mpm__spectrum { display: none; }
  .mpm__vol { display: none; }
  .topbar__player { max-width: 360px; padding: 0.35rem 0.7rem; gap: 0.45rem; }
}

/* ===== Mobile: 2-row topbar — logo+hamburger row 1, player row 2 ===== */
@media (max-width: 760px) {
  .topbar__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo  right"
      "player player";
    row-gap: 0.55rem;
    padding: 0.55rem 0.9rem;
  }
  .logo           { grid-area: logo; font-size: 18px; gap: 0.2rem; }
  .topbar__right  { grid-area: right; gap: 0.55rem; }
  .topbar__player {
    grid-area: player;
    max-width: 100%;
    width: 100%;
    padding: 0.4rem 0.6rem;
    gap: 0.5rem;
  }
  /* Player has full row width now — spectrum + volume fit again */
  .mpm__spectrum { display: flex; }
  .mpm__vol-wrap { display: flex; }
  .mpm__vol      { display: block; }
  .mpm__vol-wrap:hover .mpm__vol,
  .mpm__vol-wrap:focus-within .mpm__vol,
  .mpm__vol-wrap.is-open .mpm__vol { width: 56px; margin-left: 0.35rem; }
  /* Slightly smaller buttons on phones */
  .mpm__btn       { width: 28px; height: 28px; font-size: 10px; }
  .mpm__play      { width: 32px; height: 32px; font-size: 11px; }
  .mpm__title     { font-size: 8px; }
  .mpm__time      { font-size: 11px; }
  /* Dropdown drops a touch lower so it doesn't overlap row 2's player */
  .nav            { top: calc(100% + 6px); }
}

/* Very narrow phones — drop the clock so the right side stays tidy */
@media (max-width: 420px) {
  .status-time { display: none; }
  .topbar__player { padding: 0.35rem 0.5rem; gap: 0.4rem; }
  .mpm__vol-wrap:hover .mpm__vol,
  .mpm__vol-wrap:focus-within .mpm__vol,
  .mpm__vol-wrap.is-open .mpm__vol { width: 48px; }
}

.topbar__inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-self: end;
}

.logo {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink);
  position: relative;
}

.logo__bracket { color: var(--pink); text-shadow: 0 0 8px var(--pink); }

.logo__text {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, var(--cyan) 60%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(255, 44, 182, 0.6));
}

.logo__cursor {
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan);
  animation: blink 1s steps(2) infinite;
}

/* Hamburger dropdown menu */
.nav-menu { position: relative; }

.nav-toggle {
  width: 38px;
  height: 34px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,240,255,0.4);
  border-radius: 4px;
  cursor: pointer;
  padding: 8px 9px;
  display: grid;
  align-content: center;
  gap: 5px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--cyan);
  box-shadow: 0 0 4px var(--cyan);
  transition: transform 0.25s ease, opacity 0.18s ease;
  transform-origin: center;
}
.nav-toggle:hover {
  border-color: var(--cyan);
  background: rgba(0,240,255,0.08);
  box-shadow: 0 0 12px rgba(0,240,255,0.3);
}
.nav-toggle.is-open {
  border-color: var(--pink);
  background: rgba(255,44,182,0.1);
  box-shadow: 0 0 14px rgba(255,44,182,0.5);
}
.nav-toggle.is-open span { background: var(--pink); box-shadow: 0 0 6px var(--pink); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 0.4rem 0;
  font-family: var(--mono);
  font-size: 18px;
  background: linear-gradient(180deg, rgba(20,0,43,0.96), rgba(8,0,24,0.96));
  border: 1px solid var(--pink);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(0,240,255,0.18) inset,
    0 8px 24px rgba(0,0,0,0.6),
    0 0 28px rgba(255,44,182,0.4);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.nav::before {
  /* little neon arrow pointing at the toggle */
  content: '';
  position: absolute;
  top: -7px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, rgba(20,0,43,0.96), rgba(20,0,43,0.96));
  border-left: 1px solid var(--pink);
  border-top: 1px solid var(--pink);
  transform: rotate(45deg);
}
.nav a {
  position: relative;
  padding: 0.6rem 1.1rem 0.6rem 1.6rem;
  color: var(--ink-dim);
  letter-spacing: 1.5px;
  border-left: 2px solid transparent;
  transition: color 0.18s, background 0.18s, border-color 0.18s, text-shadow 0.18s, padding-left 0.18s;
}
.nav a::before {
  content: '>';
  position: absolute;
  left: 0.6rem;
  color: var(--pink);
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
}
.nav a:hover, .nav a.is-active {
  color: var(--cyan);
  background: rgba(0,240,255,0.08);
  border-left-color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
}
.nav a:hover::before, .nav a.is-active::before { opacity: 1; }

.topbar__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink-dim);
}

.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green), 0 0 2px #fff;
  animation: dotPulse 1.4s ease-in-out infinite;
}
.dot--g { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dot--p { background: var(--pink); box-shadow: 0 0 8px var(--pink); }

@keyframes dotPulse {
  50% { opacity: 0.4; }
}

.status-text { color: var(--green); text-shadow: 0 0 6px var(--green); }
.status-time { color: var(--cyan); text-shadow: 0 0 6px var(--cyan); margin-left: 0.4rem; }

@media (max-width: 760px) {
  .topbar__status { font-size: 15px; }
}

/* ========== HERO ========== */

.hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 6rem 1.5rem 7rem;
  text-align: center;
  position: relative;
}

.hero__tag {
  font-family: var(--mono);
  color: var(--cyan);
  font-size: 22px;
  letter-spacing: 4px;
  text-shadow: 0 0 8px var(--cyan);
  margin-bottom: 1rem;
}

.hero__title {
  font-family: var(--display);
  font-size: clamp(56px, 13vw, 180px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -1px;
  margin-bottom: 1.5rem;
}

.hero__line {
  width: min(720px, 80%);
  height: 2px;
  margin: 0 auto 1.25rem;
  background: linear-gradient(90deg, transparent, var(--cyan) 30%, var(--pink) 70%, transparent);
  box-shadow: 0 0 12px var(--pink), 0 0 24px var(--cyan);
}

.hero__sub {
  font-family: var(--mono);
  font-size: 26px;
  color: var(--ink);
  letter-spacing: 1px;
  min-height: 1.4em;
  margin-bottom: 2rem;
}

.prompt { color: var(--green); margin-right: 0.4em; text-shadow: 0 0 6px var(--green); }
.caret {
  display: inline-block;
  color: var(--cyan);
  margin-left: 2px;
  animation: blink 1s steps(2) infinite;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 3rem;
}

.meta-chip {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink-dim);
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(0,240,255,0.35);
  background: rgba(0,240,255,0.04);
  letter-spacing: 1px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.meta-chip span {
  color: var(--pink);
  margin-right: 0.5em;
  text-shadow: 0 0 6px var(--pink);
}

.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--cyan);
  letter-spacing: 3px;
  text-shadow: 0 0 8px var(--cyan);
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
  50% { transform: translateY(8px); }
}

/* GLITCH TEXT */
.glitch {
  position: relative;
  display: inline-block;
  color: #fff;
  text-shadow:
    0 0 12px var(--pink),
    0 0 30px var(--magenta),
    2px 2px 0 #00000080;
}
.glitch--cyan {
  color: var(--cyan);
  text-shadow:
    0 0 12px var(--cyan),
    0 0 30px var(--cyan-soft);
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: transparent;
}
.glitch::before {
  color: var(--pink);
  transform: translate(-3px, 0);
  mix-blend-mode: screen;
  animation: glitchA 3.2s infinite steps(1);
  clip-path: inset(0 0 70% 0);
}
.glitch::after {
  color: var(--cyan);
  transform: translate(3px, 0);
  mix-blend-mode: screen;
  animation: glitchB 3.2s infinite steps(1);
  clip-path: inset(70% 0 0 0);
}
.glitch--cyan::before { color: var(--pink); }
.glitch--cyan::after  { color: #fff; }

@keyframes glitchA {
  0%, 92%, 100% { transform: translate(-3px, 0); clip-path: inset(0 0 70% 0); }
  93% { transform: translate(-7px, -2px); clip-path: inset(15% 0 55% 0); }
  95% { transform: translate(5px, 1px);  clip-path: inset(40% 0 30% 0); }
  97% { transform: translate(-2px, 2px); clip-path: inset(65% 0 5% 0); }
}
@keyframes glitchB {
  0%, 92%, 100% { transform: translate(3px, 0); clip-path: inset(70% 0 0 0); }
  93% { transform: translate(7px, 2px); clip-path: inset(50% 0 20% 0); }
  95% { transform: translate(-5px, -1px); clip-path: inset(30% 0 40% 0); }
  97% { transform: translate(2px, -2px); clip-path: inset(10% 0 60% 0); }
}

/* ========== SECTION HEAD ========== */

.section-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
  font-family: var(--mono);
}

.section-head__num {
  font-family: var(--pixel);
  font-size: 14px;
  color: var(--pink);
  text-shadow: 0 0 8px var(--pink);
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--pink);
  background: rgba(255,44,182,0.08);
}

.section-head__title {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 0 12px var(--cyan), 0 0 30px var(--pink);
}

.section-head__line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 8px var(--cyan);
}

.section-head__count {
  font-size: 22px;
  color: var(--green);
  text-shadow: 0 0 6px var(--green);
}
.section-head__count--archive { color: var(--orange); text-shadow: 0 0 6px var(--orange); }

/* ========== ABOUT ========== */

.about {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.about__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 880px) {
  .about__grid { grid-template-columns: 1fr; gap: 2rem; }
}

.about__avatar { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.avatar-frame {
  position: relative;
  width: 280px;
  height: 280px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(0,240,255,0.4);
  box-shadow:
    0 0 0 4px rgba(0,0,0,0.6),
    0 0 30px rgba(0,240,255,0.4),
    0 0 60px rgba(255,44,182,0.3);
  overflow: hidden;
  clip-path: polygon(
    14px 0, 100% 0, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.08);
  filter: blur(6px) saturate(1.4) brightness(1.15);
  transition:
    opacity   0.42s ease,
    transform 0.55s cubic-bezier(0.18, 0.85, 0.25, 1),
    filter    0.45s ease;
  z-index: 1;
  will-change: opacity, transform, filter;
}
.avatar-img.is-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0) saturate(1) brightness(1);
  z-index: 2;
}

/* Brief neon flash on the frame border + corners on each swap */
.avatar-frame.is-flash {
  animation: avatarSwapFlash 0.55s ease-out;
}
.avatar-frame.is-flash .corner {
  animation: avatarCornerFlash 0.55s ease-out;
}
@keyframes avatarSwapFlash {
  0%   { box-shadow: 0 0 0 4px rgba(0,0,0,0.6), 0 0 60px rgba(0,240,255,0.95), 0 0 110px rgba(255,44,182,0.85); }
  40%  { box-shadow: 0 0 0 4px rgba(0,0,0,0.6), 0 0 45px rgba(0,240,255,0.7),  0 0 90px  rgba(255,44,182,0.6);  }
  100% { box-shadow: 0 0 0 4px rgba(0,0,0,0.6), 0 0 30px rgba(0,240,255,0.4),  0 0 60px  rgba(255,44,182,0.3);  }
}
@keyframes avatarCornerFlash {
  0%   { border-color: #fff; box-shadow: 0 0 16px var(--cyan), 0 0 24px #fff; }
  100% { border-color: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
}

/* Subtle pulse on the frame while auto-cycling */
.avatar-frame.is-cycling {
  animation: avatarFramePulse 4.5s ease-in-out infinite;
}
@keyframes avatarFramePulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(0,0,0,0.6), 0 0 30px rgba(0,240,255,0.4), 0 0 60px rgba(255,44,182,0.3); }
  50%     { box-shadow: 0 0 0 4px rgba(0,0,0,0.6), 0 0 42px rgba(0,240,255,0.7), 0 0 90px rgba(255,44,182,0.55); }
}



.corner {
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--cyan);
  z-index: 3;
  box-shadow: 0 0 8px var(--cyan);
}
.corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; }

.avatar-scan {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,240,255,0.25) 50%, transparent 70%);
  mix-blend-mode: screen;
  animation: avatarScan 3s linear infinite;
  z-index: 2;
}
@keyframes avatarScan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.avatar-pixel {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px);
  z-index: 2; pointer-events: none;
}

.avatar-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  width: 100%;
  max-width: 280px;          /* matches .avatar-frame width */
}
.thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: #000;
  border: 1px solid rgba(0,240,255,0.4);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) contrast(1.05); transition: filter 0.18s; }
.thumb:hover { transform: translateY(-3px); border-color: var(--pink); box-shadow: 0 0 16px var(--pink); z-index: 1; }
.thumb:hover img { filter: none; }
.thumb.is-active { border-color: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.thumb.is-active img { filter: none; }

@media (max-width: 600px) {
  .avatar-thumbs { max-width: 220px; }
}

/* Terminal */
.terminal {
  background: rgba(2, 0, 14, 0.9);
  border: 1px solid rgba(0,240,255,0.4);
  box-shadow: 0 0 30px rgba(0,240,255,0.25), inset 0 0 30px rgba(0,240,255,0.05);
  font-family: var(--mono);
  margin-bottom: 1.5rem;
  clip-path: polygon(
    14px 0, 100% 0, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.terminal__head {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(0,240,255,0.25);
  background: rgba(0,240,255,0.05);
}
.t-dot { width: 12px; height: 12px; border-radius: 50%; }
.t-dot--r { background: #ff5f56; box-shadow: 0 0 6px #ff5f56; }
.t-dot--y { background: #ffbd2e; box-shadow: 0 0 6px #ffbd2e; }
.t-dot--g { background: #27c93f; box-shadow: 0 0 6px #27c93f; }
.terminal__title { color: var(--ink-dim); font-size: 18px; margin-left: 0.4rem; }

.terminal__body {
  padding: 1.25rem 1.5rem;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Two-column info row — small left label, larger value on the right */
.info-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: baseline;
  gap: 0.9rem;
  padding-left: 0.4rem;
  border-left: 2px solid var(--pink);
  position: relative;
}
.info-row::before {
  /* small pink dot at the start of the row's accent bar */
  content: '';
  position: absolute;
  left: -5px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
}
.info-row__label {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--cyan-soft);
  text-shadow: 0 0 4px var(--cyan);
  text-transform: uppercase;
  padding-top: 4px;
}
.info-row__value {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.info-row__main {
  font-family: var(--mono);
  font-size: 22px;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 0 8px rgba(255,255,255,0.15);
  letter-spacing: 0.2px;
}
.info-row__at {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan);
  letter-spacing: 0.5px;
  width: fit-content;
  transition: color 0.18s, text-shadow 0.18s;
}
.info-row__at-mark {
  color: var(--pink);
  text-shadow: 0 0 6px var(--pink);
  margin-right: 0.25rem;
}
.info-row__at:hover {
  color: #fff;
  text-shadow: 0 0 8px var(--cyan), 0 0 14px var(--pink);
}
.info-row__at:hover .info-row__at-mark { color: #fff; }

@media (max-width: 560px) {
  .info-row { grid-template-columns: 60px 1fr; gap: 0.6rem; }
  .info-row__main { font-size: 18px; }
  .info-row__at   { font-size: 13px; }
}

/* ========== ABOUT META ========== */
.about-meta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem 1.15rem 1.1rem;
  background: linear-gradient(180deg, rgba(8, 0, 22, 0.92), rgba(3, 0, 14, 0.94));
  border: 1px solid rgba(255, 44, 182, 0.22);
  border-left: 3px solid var(--pink);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 24px rgba(255, 44, 182, 0.12);
}
.about-meta::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.about-meta__line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}

.about-meta__tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--tag-c, var(--pink));
  background: color-mix(in oklab, var(--tag-c, var(--pink)) 14%, transparent);
  color: var(--tag-c, var(--pink));
  text-shadow: 0 0 6px color-mix(in oklab, var(--tag-c, var(--pink)) 60%, transparent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--tag-c, var(--pink)) 25%, transparent);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  white-space: nowrap;
  flex-shrink: 0;
}
.about-meta__tag--pink { --tag-c: var(--pink); }
.about-meta__tag--cyan { --tag-c: var(--cyan); }

.about-meta__value {
  min-width: 0;
}

.about-meta__link {
  color: var(--cyan);
  text-decoration: none;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.35);
  border-bottom: 1px solid rgba(0, 240, 255, 0.35);
  transition: color 0.18s, border-color 0.18s, text-shadow 0.18s;
}
.about-meta__link:hover {
  color: #fff;
  border-bottom-color: var(--pink);
  text-shadow: 0 0 8px var(--cyan), 0 0 14px var(--pink);
}
.about-meta__arrow {
  display: inline-block;
  margin-left: 0.2rem;
  transition: transform 0.18s;
}
.about-meta__link:hover .about-meta__arrow {
  transform: translate(2px, -2px);
}

.about-meta__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.3rem;
  padding-top: 0.95rem;
  border-top: 1px dashed rgba(0, 240, 255, 0.18);
}

.skill-tag {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.85rem;
  border: 1px solid color-mix(in oklab, var(--tag-c, var(--cyan)) 55%, transparent);
  background: color-mix(in oklab, var(--tag-c, var(--cyan)) 10%, transparent);
  color: color-mix(in oklab, var(--tag-c, var(--cyan)) 85%, white 15%);
  text-shadow: 0 0 6px color-mix(in oklab, var(--tag-c, var(--cyan)) 50%, transparent);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: transform 0.15s, box-shadow 0.15s, color 0.15s;
  cursor: default;
  user-select: none;
}
.skill-tag:hover {
  transform: translateY(-1px);
  color: #fff;
  box-shadow: 0 0 16px color-mix(in oklab, var(--tag-c, var(--cyan)) 60%, transparent);
}
.skill-tag--pink   { --tag-c: var(--pink); }
.skill-tag--cyan   { --tag-c: var(--cyan); }
.skill-tag--purple { --tag-c: var(--magenta); }
.skill-tag--green  { --tag-c: var(--green); }

.about-meta__motto {
  font-family: var(--body);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-dim);
  margin: 0.6rem 0 0;
  letter-spacing: 0.08em;
  text-align: center;
}

@media (max-width: 560px) {
  .about-meta { padding: 0.85rem 0.95rem 0.95rem; }
  .about-meta__line { font-size: 15px; gap: 0.5rem; }
  .about-meta__tag  { font-size: 10px; padding: 0.22rem 0.5rem; }
  .skill-tag        { font-size: 12px; padding: 0.32rem 0.65rem; }
}

/* ========== PROJECTS ========== */

.projects {
  max-width: 1280px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
}

.card {
  position: relative;
  background: rgba(2, 0, 14, 0.85);
  border: 1px solid var(--c, var(--cyan));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  /* Snappy lift with a tiny overshoot — feels like a synthwave punch */
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.14s ease;
  clip-path: polygon(
    16px 0, 100% 0, 100% calc(100% - 16px),
    calc(100% - 16px) 100%, 0 100%, 0 16px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 0 20px rgba(0, 0, 0, 0.6),
    0 0 0 var(--c, var(--cyan));
}

.card:hover {
  transform: translateY(-6px);
  /* Glow runs a one-shot pulse on hover-enter (overshoot, then settle) */
  animation: cardGlowPulse 0.275s ease-out forwards;
}

@keyframes cardGlowPulse {
  0% {
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.5),
      0 0 8px var(--c, var(--cyan)),
      0 0 20px rgba(0, 0, 0, 0.6);
  }
  35% {
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.5),
      0 0 60px var(--c, var(--cyan)),
      0 22px 50px rgba(0,0,0,0.75);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.5),
      0 0 30px var(--c, var(--cyan)),
      0 18px 40px rgba(0,0,0,0.7);
  }
}

.card__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #000;
}

.card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter:
    saturate(1.2)
    contrast(1.15)
    brightness(0.85);
  transition: filter 0.4s ease, transform 0.5s ease;
  image-rendering: auto;
}

/* Pixelation effect — uses image-rendering on a transformed clone */
.card__img--pixel {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform: scale(1.001); /* trigger gpu layer */
  transition: opacity 0.4s ease, filter 0.4s ease;
  filter: hue-rotate(-10deg) saturate(1.4) contrast(1.2);
  opacity: 1;
}

.card:hover .card__img--pixel {
  opacity: 0;
}
.card:hover .card__img {
  /* Animation handles both scale and filter — punches past the target then settles */
  animation: cardImgWake 0.275s ease-out forwards;
}

@keyframes cardImgWake {
  0%   { transform: scale(1);    filter: saturate(1.2) contrast(1.15) brightness(0.85); }
  35%  { transform: scale(1.09); filter: saturate(1.7) contrast(1.4)  brightness(1.18); }
  100% { transform: scale(1.04); filter: saturate(1.4) contrast(1.2)  brightness(1); }
}

/* Color tint over media */
.card__media::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(2,0,14,0.85) 100%),
    linear-gradient(135deg, color-mix(in oklab, var(--c) 25%, transparent), transparent 60%);
  z-index: 2;
  pointer-events: none;
}

.card__status {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 1px;
  padding: 0.2rem 0.6rem;
  background: rgba(0,0,0,0.85);
  border: 1px solid var(--green);
  color: var(--green);
  text-shadow: 0 0 6px var(--green);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.card__status::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: dotPulse 1.4s ease-in-out infinite;
}
.card__status--archived {
  border-color: var(--orange); color: var(--orange); text-shadow: 0 0 6px var(--orange);
}
.card__status--archived::before { background: var(--orange); box-shadow: 0 0 6px var(--orange); }

.card__id {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  font-family: var(--pixel);
  font-size: 9px;
  color: var(--c, var(--cyan));
  background: rgba(0,0,0,0.85);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--c, var(--cyan));
  letter-spacing: 1px;
  text-shadow: 0 0 4px var(--c);
}

.card__body {
  flex: 1;
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
}

.card__title {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 0 10px var(--c);
  line-height: 1.1;
}

.card__desc {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  flex: 1;
}

.card__features {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}
.feat {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--c, var(--cyan));
  border: 1px solid color-mix(in oklab, var(--c) 50%, transparent);
  background: color-mix(in oklab, var(--c) 10%, transparent);
  padding: 0.1rem 0.5rem;
  letter-spacing: 0.5px;
}

.card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px dashed color-mix(in oklab, var(--c) 50%, transparent);
  font-family: var(--mono);
  font-size: 16px;
  color: var(--c, var(--cyan));
  letter-spacing: 1px;
}
.card__cta .arrow {
  display: inline-block;
  transition: transform 0.25s;
}
.card:hover .card__cta .arrow { transform: translateX(6px); }

/* Footer */
.footer {
  margin-top: 4rem;
  padding: 2rem 1.5rem 4rem;
  font-family: var(--mono);
  /* Same treatment as .topbar, mirrored: transparent fade-in at the top,
     dark opaque at the bottom + cyan border on the joining edge. */
  background: linear-gradient(180deg, transparent, rgba(8,0,26,0.5) 25%, rgba(8,0,26,0.85));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0, 240, 255, 0.25);
}
.footer__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.footer__line {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan) 30%, var(--pink) 70%, transparent);
  box-shadow: 0 0 8px var(--pink);
  margin-bottom: 2rem;
}

.footer__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 760px) {
  .footer__row { grid-template-columns: 1fr; text-align: center; }
}

.footer__logo {
  font-family: var(--display);
  font-size: 24px;
  color: #fff;
  text-shadow: 0 0 10px var(--cyan), 0 0 20px var(--pink);
  margin-bottom: 0.4rem;
}
.footer__sub { font-size: 16px; color: var(--ink-mute); }

.footer__art {
  font-family: var(--display);
  font-size: 36px;
  line-height: 1;
  letter-spacing: 6px;
  text-align: center;
  margin: 0;
  background: linear-gradient(180deg, var(--cyan) 0%, #fff 30%, var(--pink-hot) 65%, var(--magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 0 8px rgba(0,240,255,0.55))
    drop-shadow(0 0 16px rgba(255,44,182,0.55));
  animation: footerArtPulse 4s ease-in-out infinite;
}
@keyframes footerArtPulse {
  0%,100% { filter: drop-shadow(0 0 8px  rgba(0,240,255,0.55)) drop-shadow(0 0 16px rgba(255,44,182,0.55)); }
  50%     { filter: drop-shadow(0 0 14px rgba(0,240,255,0.85)) drop-shadow(0 0 26px rgba(255,44,182,0.85)); }
}
.footer__art-tag {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--cyan-soft);
  text-shadow: 0 0 6px var(--cyan);
  letter-spacing: 3px;
  margin-top: 0.5rem;
  text-align: center;
  opacity: 0.9;
}
@media (max-width: 760px) {
  .footer__art { font-size: 28px; letter-spacing: 4px; }
}
@media (max-width: 500px) {
  .footer__art { font-size: 22px; letter-spacing: 3px; }
  .footer__art-tag { font-size: 12px; letter-spacing: 2px; }
}

.footer__col--right {
  text-align: right;
  display: flex; flex-direction: column; gap: 0.3rem;
}
@media (max-width: 760px) { .footer__col--right { text-align: center; align-items: center; } }

.footer__sig {
  font-size: 16px;
  color: var(--ink-dim);
  display: inline-flex; align-items: center; gap: 0.5rem;
  justify-content: flex-end;
}

/* ========== GLITCH SWEEP (occasional full-screen pass) ========== */
.glitch-sweep {
  position: fixed; inset: 0;
  z-index: 60;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(255,44,182,0.18) 48%,
      rgba(0,240,255,0.18) 52%,
      transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateY(-100%);
}
.glitch-sweep.is-firing {
  animation: sweep 0.55s ease-out;
}
@keyframes sweep {
  0%   { opacity: 0; transform: translateY(-100%); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(120%); }
}

body.is-glitched main { animation: pageGlitch 0.32s steps(2); }
@keyframes pageGlitch {
  0%   { transform: translate(0,0); filter: hue-rotate(0); }
  25%  { transform: translate(4px,-2px); filter: hue-rotate(40deg); }
  50%  { transform: translate(-3px,2px); filter: hue-rotate(-30deg); }
  75%  { transform: translate(2px,1px); filter: hue-rotate(20deg); }
  100% { transform: translate(0,0); filter: none; }
}

/* ========== MEDIA QUERIES ========== */

@media (max-width: 600px) {
  .topbar__inner { padding: 0.7rem 1rem; }
  .topbar__status .status-text { display: none; }
  .hero { padding: 3rem 1rem 4rem; }
  .hero__meta { gap: 0.4rem; }
  .meta-chip { font-size: 14px; padding: 0.3rem 0.6rem; }
  .terminal__body { font-size: 18px; padding: 1rem; }
  .avatar-frame { width: 220px; height: 220px; }
}

/* ========== INTRO MESSAGE ========== */
.intro-msg {
  position: relative;
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-left: 3px solid var(--cyan);
  background:
    linear-gradient(180deg, rgba(10, 0, 28, 0.96), rgba(4, 0, 16, 0.96));
  padding: 1rem 1.1rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 24px rgba(0, 240, 255, 0.18);
}
.intro-msg::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.intro-msg__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.45);
  margin-bottom: 0.55rem;
}
.intro-msg__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: introPulse 1.6s ease-in-out infinite;
}
@keyframes introPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}
.intro-msg__body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.intro-msg__body strong {
  color: var(--pink);
  text-shadow: 0 0 8px rgba(255, 44, 182, 0.45);
  font-weight: 700;
}
.intro-msg__sub {
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink-dim);
}

/* ========== PROJECT MODAL ========== */
.modal {
  --c: var(--cyan);
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.modal[hidden] { display: none; }
.modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(20,0,43,0.85) 0%, rgba(0,0,0,0.92) 100%);
  backdrop-filter: blur(4px);
}
.modal__panel {
  position: relative;
  width: min(820px, 100%);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(20,0,43,0.96), rgba(8,0,26,0.96));
  border: 1px solid var(--c);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 24px rgba(0, 240, 255, 0.18),
    0 0 64px var(--c);
  padding: 1.6rem 1.6rem 1.8rem;
  transform: translateY(12px) scale(0.98);
  transition: transform .22s ease;
  font-family: var(--body);
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }
.modal__panel::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.modal__close {
  position: absolute;
  top: 0.5rem; right: 0.7rem;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color .15s ease, transform .15s ease;
}
.modal__close:hover { color: var(--c); transform: scale(1.2); }
.modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin-bottom: 0.9rem;
  padding-right: 2rem;
}
.modal__id { color: var(--c); }
.modal__status {
  border: 1px solid var(--ink-mute);
  padding: 0.1rem 0.5rem;
  color: var(--ink-dim);
}
.modal__media {
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  background: #000;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 65vh;
  overflow: hidden;
}
.modal__img,
.modal__video {
  display: block;
  max-width: 100%;
  max-height: 65vh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(1.05) contrast(1.05);
}
.modal__video { width: 100%; background: #000; }
.modal__img[hidden],
.modal__video[hidden] { display: none; }
.modal__title {
  font-family: var(--pixel);
  font-size: 16px;
  color: var(--c);
  text-shadow: 0 0 8px var(--c);
  margin-bottom: 0.6rem;
  letter-spacing: 0.04em;
}
.modal__desc {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-dim);
}

@media (max-width: 600px) {
  .modal { padding: 0.8rem; }
  .modal__panel { padding: 1.2rem 1.1rem 1.4rem; }
  .modal__title { font-size: 14px; }
  .modal__desc { font-size: 14px; }
}

/* ========== CONTACT FORM ========== */
.contact-sec {
  max-width: 1280px;
  margin: 5rem auto 0;
  padding: 0 2rem;
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2.5rem;
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* Left column — info / channels */
.contact-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.4rem 1.6rem;
  font-family: var(--mono);
  color: var(--ink-dim);
  background:
    linear-gradient(180deg, rgba(20,0,43,0.55) 0%, rgba(8,0,26,0.65) 100%);
  border: 1px solid rgba(0,240,255,0.18);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35),
    inset 0 0 24px rgba(138,43,226,0.08),
    0 0 18px rgba(138,43,226,0.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.contact-aside__tag {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
}
.contact-aside__body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 360px;
}

/* Info panel — STATUS/LATENCY/BANDWIDTH readout */
.contact-aside__panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.9rem 1rem;
  background: linear-gradient(180deg, rgba(20,0,43,0.55), rgba(8,0,26,0.55));
  border: 1px solid rgba(0,240,255,0.25);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), inset 0 0 14px rgba(0,240,255,0.08);
  max-width: 320px;
}
.contact-aside__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,240,255,0.15);
  font-size: 13px;
  letter-spacing: 1.5px;
}
.contact-aside__row:last-child { border-bottom: none; }
.contact-aside__k { color: var(--cyan-soft); text-shadow: 0 0 4px var(--cyan); }
.contact-aside__v { color: var(--ink); }
.contact-aside__v--ok { color: var(--green); text-shadow: 0 0 6px var(--green); }

/* Channel list */
.contact-aside__channel-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ink-mute);
  margin-bottom: 0.1rem;
}
.contact-aside__channels {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contact-aside__channel {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--ink-dim);
  font-size: 14px;
  letter-spacing: 1px;
  transition: color 0.15s, border-color 0.15s, background 0.15s, text-shadow 0.15s, transform 0.12s;
  width: fit-content;
}
.contact-aside__channel:hover {
  color: #fff;
  border-color: rgba(0,240,255,0.4);
  background: rgba(0,240,255,0.06);
  text-shadow: 0 0 6px var(--cyan);
  transform: translateX(2px);
}
.contact-aside__prompt { color: var(--pink); text-shadow: 0 0 6px var(--pink); }
.contact-aside__ch-name { color: var(--cyan); min-width: 64px; }
.contact-aside__ch-val { color: inherit; }

.contact-form {
  position: relative;
  background:
    linear-gradient(180deg, rgba(20,0,43,0.85) 0%, rgba(8,0,26,0.92) 100%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(0,240,255,0.025) 22px 23px);
  background-blend-mode: normal, screen;
  border: 1px solid var(--pink);
  border-radius: 6px;
  padding: 1.4rem 1.6rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(0,240,255,0.2),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -2px 0 rgba(0,0,0,0.6),
    0 0 30px rgba(255,44,182,0.4),
    0 0 80px rgba(138,43,226,0.32);
  animation: contactPulse 4.5s ease-in-out infinite;
}
@keyframes contactPulse {
  0%,100% { box-shadow: inset 0 0 0 1px rgba(0,240,255,0.2), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -2px 0 rgba(0,0,0,0.6), 0 0 30px rgba(255,44,182,0.4), 0 0 80px rgba(138,43,226,0.32); }
  50%     { box-shadow: inset 0 0 0 1px rgba(0,240,255,0.3), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -2px 0 rgba(0,0,0,0.6), 0 0 45px rgba(255,44,182,0.65), 0 0 110px rgba(138,43,226,0.5); }
}

/* Corner brackets — same idea as the avatar frame */
.contact-form__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  z-index: 3;
  pointer-events: none;
}
.contact-form__corner--tl { top: 6px;    left: 6px;    border-right: none; border-bottom: none; }
.contact-form__corner--tr { top: 6px;    right: 6px;   border-left: none;  border-bottom: none; }
.contact-form__corner--bl { bottom: 6px; left: 6px;    border-right: none; border-top: none;    }
.contact-form__corner--br { bottom: 6px; right: 6px;   border-left: none;  border-top: none;    }

/* Moving scanline inside the form */
.contact-form__scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.55;
  filter: blur(0.5px);
  animation: contactScan 7s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes contactScan {
  0%   { transform: translateY(0);   opacity: 0.7; }
  50%  { opacity: 0.2; }
  100% { transform: translateY(420px); opacity: 0.7; }
}

/* Head bar */
.contact-form__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--cyan-soft);
  text-shadow: 0 0 6px var(--cyan);
  letter-spacing: 1.5px;
  padding: 0.1rem 0.3rem 0.55rem;
  border-bottom: 1px dashed rgba(0,240,255,0.25);
  margin-bottom: 0.4rem;
}
.contact-form__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: contactDot 1.4s ease-in-out infinite;
}
@keyframes contactDot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.contact-form__head-bars {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.contact-form__head-bars span {
  display: block;
  width: 6px;
  height: 6px;
  background: rgba(255,44,182,0.3);
  border-radius: 1px;
  animation: contactBars 1.2s steps(2) infinite;
}
.contact-form__head-bars span:nth-child(1) { animation-delay: 0s; }
.contact-form__head-bars span:nth-child(2) { animation-delay: 0.4s; }
.contact-form__head-bars span:nth-child(3) { animation-delay: 0.8s; }
@keyframes contactBars {
  0%,100% { background: rgba(255,44,182,0.25); box-shadow: none; }
  50%     { background: var(--pink-hot); box-shadow: 0 0 6px var(--pink-hot); }
}

/* Fields */
.contact-form__field {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.contact-form__label {
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--cyan-soft);
  text-shadow: 0 0 4px var(--cyan);
  text-transform: uppercase;
  opacity: 0.9;
}

/* Input wrappers: hold a `>` prompt + the field with an animated focus underline */
.contact-form__input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(0,240,255,0.35);
  border-radius: 4px;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.contact-form__input-wrap:focus-within {
  border-color: var(--pink);
  background: rgba(0,0,0,0.7);
  box-shadow: 0 0 0 1px rgba(255,44,182,0.4), 0 0 18px rgba(255,44,182,0.25);
}
/* Animated focus underline */
.contact-form__input-wrap::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pink), var(--cyan), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.2,0.85,0.25,1);
  pointer-events: none;
}
.contact-form__input-wrap:focus-within::after { transform: scaleX(1); }

.contact-form__prompt {
  font-family: var(--mono);
  font-size: 17px;
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan);
  padding: 10px 0 10px 12px;
  user-select: none;
  align-self: center;
}
.contact-form__input-wrap--area .contact-form__prompt {
  align-self: flex-start;
  padding-top: 10px;
}

.contact-form input[type="text"],
.contact-form textarea {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.3px;
  padding: 10px 12px 10px 8px;
  outline: none;
  resize: vertical;
  caret-color: var(--cyan);
}
.contact-form textarea { min-height: 110px; max-height: 320px; line-height: 1.45; }
.contact-form input[type="text"]::placeholder,
.contact-form textarea::placeholder { color: var(--ink-mute); }

/* Status row */
.contact-form__row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(0,240,255,0.18);
}
.contact-form__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 1.5px;
  color: var(--ink-mute);
  min-height: 18px;
}
.contact-form__status::before {
  content: '';
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-mute);
  box-shadow: none;
  transition: background 0.18s, box-shadow 0.18s;
}
.contact-form__status.is-pending          { color: var(--cyan); text-shadow: 0 0 6px var(--cyan); }
.contact-form__status.is-pending::before  { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); animation: contactDot 0.9s ease-in-out infinite; }
.contact-form__status.is-ok               { color: var(--green); text-shadow: 0 0 6px var(--green); }
.contact-form__status.is-ok::before       { background: var(--green); box-shadow: 0 0 6px var(--green); }
.contact-form__status.is-err              { color: var(--orange); text-shadow: 0 0 6px var(--orange); }
.contact-form__status.is-err::before      { background: var(--orange); box-shadow: 0 0 6px var(--orange); }

/* Submit button */
.contact-form__submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 2px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #ff2cb6 0%, #d600ff 50%, #6b00b3 100%);
  border: 1px solid var(--pink);
  border-radius: 4px;
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,0.6), 0 0 8px var(--pink);
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -2px 4px rgba(0,0,0,0.45),
    0 0 18px rgba(255,44,182,0.55);
  transition: transform 0.1s, box-shadow 0.2s, opacity 0.2s, padding 0.2s;
}
.contact-form__submit:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -2px 4px rgba(0,0,0,0.45),
    0 0 30px rgba(255,44,182,0.95),
    0 0 8px var(--cyan);
}
.contact-form__submit:active   { transform: translateY(1px); }
.contact-form__submit:disabled { opacity: 0.5; cursor: not-allowed; }
.contact-form__submit-label  { position: relative; z-index: 2; }
.contact-form__submit-arrow  {
  position: relative;
  z-index: 2;
  font-size: 14px;
  transition: transform 0.2s;
}
.contact-form__submit:hover .contact-form__submit-arrow { transform: translate(2px, -2px); }

/* Sweep highlight on hover */
.contact-form__submit-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  transition: left 0.45s ease;
  pointer-events: none;
}
.contact-form__submit:hover .contact-form__submit-sweep { left: 120%; }

@media (max-width: 600px) {
  .contact-sec { padding: 0 1rem; }
  .contact-form { padding: 1.1rem; }
  .contact-form input[type="text"],
  .contact-form textarea { font-size: 16px; }
  .contact-form__row { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .contact-form__submit { justify-content: center; }
}


/* ===== Leaderboard button (under PLAY SHOOTER) ===== */
.lb-btn {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 13px; letter-spacing: 3px;
  color: var(--cyan-soft);
  background: rgba(0, 240, 255, 0.08);
  border: 2px solid var(--cyan);
  padding: 0.4rem 1rem; cursor: pointer; display: block; width: 100%;
  text-shadow: 0 0 8px var(--cyan), 0 0 14px rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3), inset 0 0 8px rgba(0, 240, 255, 0.12);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background .18s, box-shadow .18s, transform .18s;
}
.lb-btn:hover, .lb-btn:focus-visible {
  background: rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.5), inset 0 0 12px rgba(0, 240, 255, 0.2);
  transform: translateY(-1px); outline: none;
}

/* ===== Leaderboard modal ===== */
.lb-overlay {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(ellipse at center, rgba(20, 0, 43, .7), rgba(8, 0, 26, .93));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: lbFade .2s ease;
}
.lb-overlay[hidden] { display: none; }
.lb-modal {
  position: relative; width: 420px; max-width: 100%; max-height: 86vh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(42, 0, 68, .96), rgba(20, 0, 43, .98));
  border: 2px solid var(--pink); border-radius: 4px;
  box-shadow: 0 0 30px rgba(255, 44, 182, .5), 0 0 80px rgba(138, 43, 226, .4), inset 0 0 30px rgba(138, 43, 226, .2);
  padding: 26px 22px 20px; animation: lbPop .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes lbFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes lbPop { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }
.lb-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--ink-dim); font-size: 18px; cursor: pointer; line-height: 1; }
.lb-close:hover { color: var(--pink-hot); text-shadow: 0 0 8px var(--pink); }
.lb-title { font-family: var(--display); font-size: 26px; letter-spacing: 4px; text-align: center; color: #fff; text-shadow: 0 0 10px var(--pink), 0 0 22px var(--purple); }
.lb-subtitle { text-align: center; font-size: 10px; letter-spacing: 3px; color: var(--cyan-soft); margin: 4px 0 18px; }
.lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid rgba(138, 43, 226, .4); border-radius: 3px; background: rgba(138, 43, 226, .08); }
.lb-rank { font-family: var(--display); font-size: 15px; width: 26px; text-align: center; color: var(--ink-dim); flex-shrink: 0; }
.lb-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--purple); background: rgba(0, 0, 0, .3); flex-shrink: 0; }
.lb-name { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .5px; }
.lb-stage { font-family: var(--display); font-size: 13px; letter-spacing: 1px; color: var(--cyan); text-shadow: 0 0 8px rgba(0, 240, 255, .5); flex-shrink: 0; }
.lb-row--top { border-color: var(--pink); background: rgba(255, 44, 182, .1); box-shadow: 0 0 12px rgba(255, 44, 182, .25); }
.lb-row--1 .lb-rank { color: var(--yellow); text-shadow: 0 0 10px var(--yellow); }
.lb-row--2 .lb-rank { color: var(--cyan-soft); text-shadow: 0 0 8px var(--cyan); }
.lb-row--3 .lb-rank { color: var(--pink-hot); text-shadow: 0 0 8px var(--pink); }
.lb-empty, .lb-loading { text-align: center; color: var(--ink-mute); font-size: 12px; letter-spacing: 2px; padding: 22px 0; }
.lb-me { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(138, 43, 226, .4); text-align: center; font-family: var(--display); font-size: 14px; color: var(--green); text-shadow: 0 0 8px rgba(0, 255, 156, .5); letter-spacing: 1px; }
.lb-me__lbl { color: var(--ink-dim); }
.lb-me__plays { color: var(--ink-mute); font-size: 11px; }
.lb-login { color: var(--ink-mute); font-family: monospace; letter-spacing: 1px; }

/* Leaderboard button inside the GAME OVER overlay */
.game-over__lb { width: auto; display: inline-block; margin: 20px auto 0; pointer-events: none; }
body.is-game-over .game-over__lb { pointer-events: auto; }
.game-over__sub { white-space: nowrap; }

/* Leaderboard: reserve space for 10 rows, scroll beyond; faded empty slots */
.lb-list { max-height: min(580px, 60vh); overflow-y: auto; }
.lb-row--empty { opacity: .35; }
.lb-row--empty .lb-name { color: var(--ink-mute); }
.lb-av--empty { background: rgba(138, 43, 226, .15); }

/* Leaderboard exit animation (mirrors the open) */
.lb-overlay.lb-closing { animation: lbFadeOut .2s ease forwards; }
.lb-overlay.lb-closing .lb-modal { animation: lbPopOut .2s cubic-bezier(.4, 0, .6, 1) forwards; }
@keyframes lbFadeOut { from { opacity: 1 } to { opacity: 0 } }
@keyframes lbPopOut { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(10px) scale(.97) } }