/* ===========================
   MR V — VICTORIZA.COM
   Retro arcade / CRT theme
   © 2026 Victor. All rights reserved.
   Original design — not a template.
   Unauthorised reuse is prohibited.
   hi@victoriza.com
   =========================== */

:root {
  --bg: #050a05;
  --bg-2: #0a140a;
  --green: #39ff14;
  --green-dim: #1fa810;
  --green-dark: #0b3b08;
  --amber: #ffb000;
  --magenta: #ff2bd6;
  --cyan: #00f0ff;
  --red: #ff2a2a;
  --white: #e7ffe7;
  --muted: #6fa56f;
  --shadow: 0 0 8px var(--green), 0 0 18px rgba(57,255,20,0.45);
  --amber-dark: #5a3800;
  --magenta-dark: #5a0d4a;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-variant-ligatures: none; }

html, body {
  background: var(--bg);
  color: var(--green);
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 20px;
  line-height: 1.6;
  overflow-x: hidden;
  scroll-behavior: smooth;
  min-height: 100%;
}

body {
  position: relative;
  overflow-x: clip; /* clip ≠ hidden: doesn't create a BFC/scroll container, so position:sticky on .hud works */
  background:
    radial-gradient(ellipse at 50% -10%, rgba(57,255,20,0.10), transparent 60%),
    radial-gradient(ellipse at 50% 110%, rgba(0,240,255,0.07), transparent 60%),
    var(--bg);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--white); text-shadow: var(--shadow); }

/* Background canvas (stars + invaders) */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

/* CRT scanlines + flicker */
.crt {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.18) 0px,
      rgba(0,0,0,0.18) 1px,
      transparent 2px,
      transparent 3px
    );
  mix-blend-mode: multiply;
  animation: flicker 6s infinite steps(60);
  will-change: opacity;
}
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(57,255,20,0.03), rgba(57,255,20,0.03));
  pointer-events: none;
}
.vignette {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.85) 100%);
  transform: translateZ(0);
  will-change: transform;
}

@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.85; }
  98% { opacity: 0.95; }
  99% { opacity: 0.7; }
}

/* HUD */
.hud {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  border-bottom: 2px solid var(--green-dark);
  background: rgba(5,10,5,0.72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: 0 1px 0 var(--bg), 0 2px 0 var(--green-dark);
}
.hud-left { text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hud-row { display: flex; align-items: center; gap: 8px; }
.hud-credit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--amber);
  background: rgba(255, 176, 0, 0.06);
  color: var(--amber);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  box-shadow: inset 0 0 6px rgba(255, 176, 0, 0.15);
}
.hud-credit.bump { animation: hudCreditBump 0.5s ease; }
@keyframes hudCreditBump {
  0%   { transform: scale(1); color: var(--amber); }
  40%  { transform: scale(1.25); color: var(--white); text-shadow: 0 0 10px var(--amber); }
  100% { transform: scale(1); color: var(--amber); }
}
.hud-center {
  text-align: center;
  color: var(--amber);
  padding: 4px 14px;
  border-left: 1px solid var(--green-dark);
  border-right: 1px solid var(--green-dark);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.hud-press-start {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--green);
  text-shadow: 0 0 6px var(--green);
  letter-spacing: 1.5px;
  animation: blink 0.9s steps(2) infinite;
  background: transparent;
  border: 1px solid transparent;
  padding: 3px 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.1s;
}
.hud-press-start:hover,
.hud-press-start:focus-visible {
  color: var(--bg);
  background: var(--green);
  border-color: var(--green);
  text-shadow: none;
  outline: none;
  animation-play-state: paused;
}
.hud-press-start:active { transform: scale(0.94); }
.hud-press-start.no-credit {
  color: var(--red);
  text-shadow: 0 0 6px var(--red);
  animation: hudShake 0.4s steps(6);
}
@keyframes hudShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
.hud-hi-label-sm { display: none; }
.hud-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hud-label { color: var(--red); }
.hud-left  .hud-label { animation: blink 1s steps(2) infinite; }
.hud-right .hud-label { color: var(--green-dim); animation: none; }
.hud-score { color: var(--white); }
.hud-achv {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 9px;
  letter-spacing: 0.5px;
  background: rgba(255, 176, 0, 0.06);
  box-shadow: inset 0 0 6px rgba(255, 176, 0, 0.15);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.hud-achv:hover { background: rgba(255, 176, 0, 0.18); transform: translateY(-1px); }
.hud-achv:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.hud-right-bottom { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hud-music {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--green-dim);
  background: rgba(31, 168, 16, 0.06);
  color: var(--green-dim);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: inset 0 0 6px rgba(57, 255, 20, 0.10);
  transition: color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.hud-music:hover, .hud-music:focus-visible {
  color: var(--green);
  border-color: var(--green);
  background: rgba(57, 255, 20, 0.10);
  box-shadow: inset 0 0 6px rgba(57, 255, 20, 0.25), 0 0 8px rgba(57, 255, 20, 0.25);
  outline: none;
}
.hud-music.is-on {
  color: var(--green);
  border-color: var(--green);
  background: rgba(57, 255, 20, 0.10);
  box-shadow: inset 0 0 6px rgba(57, 255, 20, 0.25), 0 0 10px rgba(57, 255, 20, 0.30);
}
.hud-music.is-on .hud-music-ico { animation: hud-music-pulse 0.5s steps(2) infinite; }
@keyframes hud-music-pulse { 50% { transform: translateY(-1px); } }

/* ---- HUD SFX + CRT toggle buttons (shared base style with hud-music) ---- */
.hud-sfx, .hud-crt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--green-dim);
  background: rgba(31, 168, 16, 0.06);
  color: var(--green-dim);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: inset 0 0 6px rgba(57, 255, 20, 0.10);
  transition: color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.hud-sfx:hover, .hud-sfx:focus-visible,
.hud-crt:hover, .hud-crt:focus-visible {
  color: var(--green);
  border-color: var(--green);
  background: rgba(57, 255, 20, 0.10);
  box-shadow: inset 0 0 6px rgba(57, 255, 20, 0.25), 0 0 8px rgba(57, 255, 20, 0.25);
  outline: none;
}
.hud-sfx.is-on {
  color: var(--green);
  border-color: var(--green);
  background: rgba(57, 255, 20, 0.10);
  box-shadow: inset 0 0 6px rgba(57, 255, 20, 0.25), 0 0 10px rgba(57, 255, 20, 0.30);
}
/* CRT OFF state — dim it to signal disabled */
.hud-crt.is-off {
  color: var(--muted);
  border-color: #2a3a2a;
  background: rgba(0,0,0,0.08);
}

/* hide scanlines/vignette when CRT is toggled off */
body.crt-off .crt    { display: none; }
body.crt-off .vignette { display: none; }

@media (max-width: 720px) {
  .hud { padding: 10px 14px; font-size: 10px; gap: 8px; }
  .hud-center { display: none; }
  .hud-music { padding: 3px 6px; }
  .hud-sfx   { padding: 3px 6px; }
  .hud-crt   { padding: 3px 6px; }
}
@media (max-width: 768px) {
  /* Mobile HUD: score on left, burger on right — everything else in the menu */
  .hud         { padding: 8px 12px; font-size: 9px; gap: 0; position: sticky; top: 0; z-index: 100; }
  .hud-credit  { display: none; }
  .hud-achv    { display: none; }
  .hud-quests  { display: none; }
  .hud-music   { display: none; }
  .hud-sfx     { display: none; }
  .hud-crt     { display: none; }
  .hud-left    { gap: 0; }
  .hud-right   { gap: 0; }
  .hud-right-bottom { flex-direction: row; align-items: center; }
}

/* ---- Burger button (mobile only) ---- */
.hud-burger { display: none; }
@media (max-width: 768px) {
  .hud-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border: 1px solid var(--green-dim);
    background: rgba(31, 168, 16, 0.06);
    color: var(--green-dim);
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    cursor: pointer;
    box-shadow: inset 0 0 6px rgba(57, 255, 20, 0.10);
    transition: color 160ms ease, border-color 160ms ease,
                box-shadow 160ms ease, background 160ms ease;
    letter-spacing: 0;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
  }
  .hud-burger:hover,
  .hud-burger:focus-visible,
  .hud-burger.is-open {
    color: var(--green);
    border-color: var(--green);
    background: rgba(57, 255, 20, 0.12);
    box-shadow: inset 0 0 6px rgba(57, 255, 20, 0.25), 0 0 8px rgba(57, 255, 20, 0.25);
    outline: none;
  }
  .hud-burger.is-open { letter-spacing: 0; }
}

/* ---- Mobile menu drawer ---- */
.hud-mobile-menu  { display: none; }
.hud-mobile-backdrop { display: none; }
@media (max-width: 768px) {
  .hud-mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(3, 7, 3, 0.98);
    border-bottom: 2px solid var(--green-dim);
    box-shadow: 0 6px 40px rgba(57, 255, 20, 0.18);
    transform: translateY(-105%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    max-height: 92vh;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 20px;
    font-family: 'Press Start 2P', monospace;
  }
  .hud-mobile-menu.is-open { transform: translateY(0); }

  .hud-mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .hud-mobile-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Menu header */
  .hmm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--green-dark);
    background: rgba(57, 255, 20, 0.04);
    position: sticky;
    top: 0;
    z-index: 1;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .hmm-title-bar {
    font-size: 8px;
    color: var(--green);
    text-shadow: 0 0 8px var(--green);
    letter-spacing: 2px;
    animation: blink 1.2s steps(2) infinite;
  }
  .hmm-close {
    background: transparent;
    border: 1px solid var(--red);
    color: var(--red);
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    padding: 6px 10px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
  }
  .hmm-close:hover,
  .hmm-close:focus-visible {
    background: var(--red);
    color: var(--bg);
    outline: none;
  }

  /* Sections */
  .hmm-section { border-bottom: 1px solid var(--green-dark); }
  .hmm-section:last-child { border-bottom: none; }
  .hmm-section-label {
    padding: 10px 18px 5px;
    font-size: 9px;
    color: var(--muted);
    letter-spacing: 2.5px;
  }

  /* Items */
  .hmm-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px 20px;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--white);
    text-decoration: none;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(57, 255, 20, 0.07);
    cursor: pointer;
    letter-spacing: 0.5px;
    text-align: left;
    gap: 10px;
    min-height: 50px;
    transition: background 0.12s, color 0.12s;
    box-sizing: border-box;
  }
  .hmm-item:first-of-type { border-top: none; }
  .hmm-item:hover,
  .hmm-item:focus-visible {
    background: rgba(57, 255, 20, 0.08);
    color: var(--green);
    outline: none;
  }
  .hmm-item:active { background: rgba(57, 255, 20, 0.15); }

  /* Toggle ON indicator */
  .hmm-toggle.is-on {
    color: var(--green);
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.5);
  }
  .hmm-toggle.is-on::after {
    content: '● ON';
    margin-left: auto;
    font-size: 8px;
    color: var(--green);
    text-shadow: 0 0 6px var(--green);
    letter-spacing: 1px;
    white-space: nowrap;
  }
  .hmm-toggle:not(.is-on)::after {
    content: '○ OFF';
    margin-left: auto;
    font-size: 8px;
    color: var(--muted);
    letter-spacing: 1px;
    white-space: nowrap;
  }
}

/* .level-nav removed — navigation is now handled by the burger menu */

/* Language switcher */
.lang-switch {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
}
.footer .lang-switch {
  display: flex;
  justify-content: center;
  margin: 14px auto 6px;
}
.contact-share-outer {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.contact-share-outer > .contact-card {
  flex: 1;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  background: transparent;
  border: 1px solid var(--green-dark);
  color: var(--muted);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.lang-btn:hover, .lang-btn:focus-visible {
  border-color: var(--green-dim);
  color: var(--white);
  outline: none;
}
.lang-btn.active {
  border-color: var(--green);
  color: var(--green);
  background: rgba(57, 255, 20, 0.08);
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.35);
}
.lang-btn .flag {
  width: 14px;
  height: 9px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  border: 1px solid rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .lang-switch { gap: 2px; }
  .footer .lang-switch { margin-top: 10px; }
  .lang-btn { padding: 2px 4px; font-size: 7px; gap: 3px; }
  .lang-btn .flag { width: 11px; height: 7px; }
}

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

main { position: relative; z-index: 2; }

/* HERO */
.hero {
  min-height: calc(100vh - 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 24px;
  text-align: center;
}
.hero-inner {
  max-width: 900px;
  margin-inline: auto;
}

.logo-row {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 30px;
}

/* CSS pixel-art invaders (3 colors, animated) */
.invader {
  width: 56px;
  height: 56px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 8px var(--green));
  animation: bob 1s infinite steps(2);
}
.invader-a { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8' shape-rendering='crispEdges'><g fill='%2339ff14'><rect x='2' y='0' width='1' height='1'/><rect x='8' y='0' width='1' height='1'/><rect x='3' y='1' width='1' height='1'/><rect x='7' y='1' width='1' height='1'/><rect x='2' y='2' width='7' height='1'/><rect x='1' y='3' width='2' height='1'/><rect x='4' y='3' width='3' height='1'/><rect x='8' y='3' width='2' height='1'/><rect x='0' y='4' width='11' height='1'/><rect x='0' y='5' width='1' height='1'/><rect x='2' y='5' width='1' height='1'/><rect x='8' y='5' width='1' height='1'/><rect x='10' y='5' width='1' height='1'/><rect x='3' y='6' width='2' height='1'/><rect x='6' y='6' width='2' height='1'/></g></svg>"); }
.invader-b { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8' shape-rendering='crispEdges'><g fill='%2300f0ff'><rect x='5' y='0' width='1' height='1'/><rect x='4' y='1' width='3' height='1'/><rect x='3' y='2' width='5' height='1'/><rect x='2' y='3' width='2' height='1'/><rect x='5' y='3' width='1' height='1'/><rect x='7' y='3' width='2' height='1'/><rect x='1' y='4' width='9' height='1'/><rect x='0' y='5' width='1' height='1'/><rect x='2' y='5' width='1' height='1'/><rect x='8' y='5' width='1' height='1'/><rect x='10' y='5' width='1' height='1'/><rect x='1' y='6' width='1' height='1'/><rect x='4' y='6' width='3' height='1'/><rect x='9' y='6' width='1' height='1'/></g></svg>"); animation-delay: 0.2s; }
.invader-c { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' shape-rendering='crispEdges'><g fill='%23ff2bd6'><rect x='0' y='1' width='1' height='1'/><rect x='11' y='1' width='1' height='1'/><rect x='2' y='2' width='1' height='1'/><rect x='9' y='2' width='1' height='1'/><rect x='1' y='3' width='2' height='1'/><rect x='4' y='3' width='1' height='1'/><rect x='7' y='3' width='1' height='1'/><rect x='9' y='3' width='2' height='1'/><rect x='0' y='4' width='12' height='1'/><rect x='1' y='5' width='1' height='1'/><rect x='4' y='5' width='1' height='1'/><rect x='7' y='5' width='1' height='1'/><rect x='10' y='5' width='1' height='1'/><rect x='2' y='6' width='1' height='1'/><rect x='9' y='6' width='1' height='1'/></g></svg>"); animation-delay: 0.4s; }

@keyframes bob {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

.title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(48px, 14vw, 160px);
  color: var(--green);
  letter-spacing: 6px;
  text-shadow:
    0 0 6px var(--green),
    0 0 18px rgba(57,255,20,0.7),
    4px 4px 0 var(--green-dark);
  margin-bottom: 18px;
  position: relative;
  display: inline-block;
}

/* Glitch */
.glitch { position: relative; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.glitch::before {
  color: var(--magenta);
  transform: translate(2px, 0);
  mix-blend-mode: screen;
  animation: glitch1 2.8s infinite steps(40);
}
.glitch::after {
  color: var(--cyan);
  transform: translate(-2px, 0);
  mix-blend-mode: screen;
  animation: glitch2 3.4s infinite steps(40);
}
@keyframes glitch1 {
  0%, 92%, 100% { clip-path: inset(0 0 95% 0); transform: translate(2px,0);}
  93% { clip-path: inset(20% 0 60% 0); transform: translate(4px,-2px);}
  95% { clip-path: inset(60% 0 20% 0); transform: translate(-4px,2px);}
}
@keyframes glitch2 {
  0%, 88%, 100% { clip-path: inset(95% 0 0 0); transform: translate(-2px,0);}
  90% { clip-path: inset(50% 0 30% 0); transform: translate(-5px,1px);}
  92% { clip-path: inset(10% 0 70% 0); transform: translate(5px,-1px);}
}

.subtitle {
  font-family: 'Press Start 2P', monospace;
  color: var(--amber);
  font-size: 12px;
  letter-spacing: 3px;
  margin-bottom: 22px;
  animation: blink 1.2s steps(2) infinite;
}

.tagline {
  font-size: clamp(20px, 2.3vw, 24px);
  color: var(--white);
  margin-bottom: 30px;
  line-height: 1.42;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.tagline .muted { color: var(--muted); font-size: clamp(16px, 1.9vw, 18px); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 14px 22px;
  min-height: 44px;
  border: 2px solid var(--green);
  color: var(--green);
  background: rgba(11, 59, 8, 0.4);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
  box-shadow: 4px 4px 0 var(--green-dark);
  position: relative;
}
.btn:hover {
  background: var(--green);
  color: var(--bg);
  text-shadow: none;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--green-dark), 0 0 18px var(--green);
}
.btn:focus-visible {
  background: var(--green);
  color: var(--bg);
  text-shadow: none;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--green-dark), 0 0 18px var(--green);
  outline: 2px dashed var(--amber);
  outline-offset: 3px;
}
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--green-dark); }
.btn-primary {
  background: var(--green);
  color: var(--bg);
  animation: pulse 1.6s ease-in-out infinite;
}
.btn-share {
  border-color: var(--magenta);
  color: var(--magenta);
  text-shadow: 0 0 6px rgba(255, 43, 214, 0.45);
  box-shadow: 4px 4px 0 var(--magenta-dark);
}
.btn-share:hover {
  background: var(--magenta);
  color: var(--bg);
  text-shadow: none;
  box-shadow: 6px 6px 0 var(--magenta-dark), 0 0 18px var(--magenta);
}
.btn-share:focus-visible {
  background: var(--magenta);
  color: var(--bg);
  text-shadow: none;
  box-shadow: 6px 6px 0 var(--magenta-dark), 0 0 18px var(--magenta);
  outline: 2px dashed var(--amber);
  outline-offset: 3px;
}
.btn-share:active { box-shadow: 2px 2px 0 var(--magenta-dark); }

/* ── Share panel ─────────────────────────────────────── */
.share-wrap {
  position: relative;
  display: inline-flex;
}
.share-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-2);
  border: 2px solid var(--magenta);
  box-shadow: 4px 4px 0 var(--magenta-dark), 0 0 20px rgba(255,43,214,0.3);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  z-index: 200;
  animation: share-panel-in 0.12s ease;
}
.share-panel[hidden] { display: none; }
@keyframes share-panel-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.share-option {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 11px 14px;
  color: var(--magenta);
  background: transparent;
  border: none;
  border-bottom: 1px solid #2a0620;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.share-option:last-child { border-bottom: none; }
.share-option:hover,
.share-option:focus-visible {
  background: var(--magenta);
  color: var(--bg);
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary { animation: none; }
}
@media (max-width: 480px) {
  .btn { padding: 12px 16px; font-size: 10px; letter-spacing: 1.5px; flex: 1 1 auto; }
  .cta-row { gap: 10px; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 4px 4px 0 var(--green-dark), 0 0 0 var(--green); }
  50% { box-shadow: 4px 4px 0 var(--green-dark), 0 0 40px var(--green), 0 0 60px rgba(57,255,20,0.25); }
}

.insert-coin {
  margin-top: 20px;
  display: inline-block;
  padding: 8px 16px;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--amber);
  background: transparent;
  border: 1px dashed transparent;
  cursor: pointer;
  letter-spacing: 1.5px;
  animation: blink 0.9s steps(2) infinite;
  transition: color 0.15s, border-color 0.15s, transform 0.15s, text-shadow 0.15s;
}
.insert-coin:hover,
.insert-coin:focus-visible {
  color: var(--white);
  border-color: var(--amber);
  text-shadow: 0 0 8px var(--amber);
  transform: scale(1.05);
  outline: none;
  animation-play-state: paused;
}
.insert-coin:active { transform: scale(0.96); }
.insert-coin.coined {
  animation: coinFlash 0.6s steps(4);
}
@keyframes coinFlash {
  0%   { color: var(--amber); transform: scale(1); }
  30%  { color: var(--white); transform: scale(1.15) translateY(-4px); text-shadow: 0 0 12px var(--amber); }
  60%  { color: var(--amber); transform: scale(1.05); }
  100% { color: var(--amber); transform: scale(1); }
}

/* Coin slot widget — primary CTA to start Mini Invaders */

/* ---- Visitor counter — hero player number ---- */
.visitor-counter {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
  margin: 10px 0 8px;
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.visitor-counter.loaded { opacity: 1; }

/* ---- Screensaver: full-screen arcade leaderboard board ---- */
.mrv-saver-board {
  position: absolute;
  top: 46px;    /* below HUD bar */
  bottom: 72px; /* above marquee */
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
.mrv-saver-board-inner {
  width: min(560px, 94vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 4px;
}
.mrv-saver-board-eyebrow {
  font-size: 20px;
  letter-spacing: 10px;
  opacity: 0.55;
  margin-bottom: 8px;
  animation: blink 2.8s steps(2) infinite;
}
.mrv-saver-board-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(13px, 2.5vw, 20px);
  color: var(--amber);
  letter-spacing: 3px;
  text-shadow: 0 0 24px rgba(255, 176, 0, 0.7), 0 0 8px rgba(255, 176, 0, 0.4);
  margin: 0 0 6px;
  animation: blink 1.4s steps(2) infinite;
}
.mrv-saver-board-game {
  font-family: 'VT323', monospace;
  font-size: clamp(17px, 3vw, 24px);
  color: var(--green);
  letter-spacing: 8px;
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.4);
  margin-bottom: 10px;
}
.mrv-saver-board-divider {
  width: 100%;
  border: 0;
  border-top: 2px solid var(--green-dark);
  margin-bottom: 8px;
  opacity: 0.7;
}
.mrv-saver-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.mrv-hs-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 14px;
  border-bottom: 1px solid rgba(57, 255, 20, 0.07);
}
.mrv-hs-rank {
  font-family: 'VT323', monospace;
  font-size: 28px;
  color: var(--green-dim);
  line-height: 1;
  text-align: center;
}
.mrv-hs-name {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(8px, 1.4vw, 11px);
  color: var(--white);
  letter-spacing: 2px;
}
.mrv-hs-score {
  font-family: 'VT323', monospace;
  font-size: clamp(24px, 3.5vw, 32px);
  color: var(--green);
  text-align: right;
  line-height: 1;
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.35);
}
/* Top 3 podium highlight */
.mrv-hs-row:nth-child(1) .mrv-hs-rank  { color: var(--amber); font-size: 34px; }
.mrv-hs-row:nth-child(1) .mrv-hs-name  { color: var(--amber); }
.mrv-hs-row:nth-child(1) .mrv-hs-score { color: var(--amber); font-size: 36px; text-shadow: 0 0 16px rgba(255,176,0,0.7); }
.mrv-hs-row:nth-child(2) .mrv-hs-name  { color: #c0c0c0; }
.mrv-hs-row:nth-child(2) .mrv-hs-score { color: #c0c0c0; }
.mrv-hs-row:nth-child(3) .mrv-hs-name  { color: #c87533; }
.mrv-hs-row:nth-child(3) .mrv-hs-score { color: #c87533; }
.mrv-saver-board-footer {
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 4px;
  margin-top: 8px;
  animation: blink 2.2s steps(2) infinite;
}
@media (max-width: 480px) {
  .mrv-saver-board { top: 38px; }
  .mrv-hs-row { padding: 4px 8px; gap: 6px; }
  .mrv-saver-board-eyebrow { font-size: 16px; letter-spacing: 6px; }
}

.coin-slot {
  position: relative;
  margin-top: 16px;
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  font-family: 'Press Start 2P', monospace;
  color: var(--amber);
  background: linear-gradient(180deg, rgba(11, 59, 8, 0.35), rgba(5, 12, 5, 0.85));
  border: 2px solid var(--amber);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow:
    inset 0 0 0 4px rgba(255, 176, 0, 0.06),
    0 0 22px rgba(255, 176, 0, 0.22),
    4px 4px 0 var(--amber-dark);
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.45);
  animation: coinSlotPulse 2.8s ease-in-out infinite;
  overflow: visible;
}

/* ---- LED marquee chase on top of the cabinet ---- */
.coin-slot-leds {
  position: absolute;
  top: -3px;
  left: 18px;
  right: 18px;
  height: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}
.coin-slot-leds i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amber-dark);
  animation: ledChase 1.6s linear infinite;
}
.coin-slot-leds i:nth-child(1) { animation-delay: 0s; }
.coin-slot-leds i:nth-child(2) { animation-delay: 0.15s; }
.coin-slot-leds i:nth-child(3) { animation-delay: 0.30s; }
.coin-slot-leds i:nth-child(4) { animation-delay: 0.45s; }
.coin-slot-leds i:nth-child(5) { animation-delay: 0.60s; }
.coin-slot-leds i:nth-child(6) { animation-delay: 0.75s; }
.coin-slot-leds i:nth-child(7) { animation-delay: 0.90s; }
.coin-slot-leds i:nth-child(8) { animation-delay: 1.05s; }
@keyframes ledChase {
  0%, 70%, 100% { background: var(--amber-dark); box-shadow: none; }
  10%, 25%      { background: #ffd97a; box-shadow: 0 0 6px var(--amber), 0 0 12px var(--amber); }
}

/* ---- Cabinet rivets at the 4 corners ---- */
.coin-slot-rivet {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c9c9c9 0 22%, #6a6a6a 35% 70%, #1a1a1a 95%);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0.6), 0 0 2px rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: 3;
}
.coin-slot-rivet--tl { top: 6px;   left: 6px; }
.coin-slot-rivet--tr { top: 6px;   right: 6px; }
.coin-slot-rivet--bl { bottom: 6px; left: 6px; }
.coin-slot-rivet--br { bottom: 6px; right: 6px; }
.coin-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 4px);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.coin-slot:hover {
  outline: none;
  animation: none;
  transform: translate(-2px, -2px);
  box-shadow:
    inset 0 0 0 4px rgba(255, 176, 0, 0.1),
    0 0 48px rgba(255, 176, 0, 0.6),
    6px 6px 0 var(--amber-dark);
}
.coin-slot:focus-visible {
  outline: 2px dashed var(--amber);
  outline-offset: 4px;
  animation: none;
  transform: translate(-2px, -2px);
  box-shadow:
    inset 0 0 0 4px rgba(255, 176, 0, 0.1),
    0 0 48px rgba(255, 176, 0, 0.6),
    6px 6px 0 var(--amber-dark);
}
.coin-slot:active {
  animation: none;
  transform: translate(2px, 2px);
  box-shadow:
    inset 0 0 0 4px rgba(255, 176, 0, 0.06),
    0 0 18px rgba(255, 176, 0, 0.35),
    2px 2px 0 var(--amber-dark);
}
.coin-slot-rail {
  position: relative;
  width: 34px;
  height: 68px;
  background: linear-gradient(180deg, #1e0f00 0%, #0a0600 45%, #150b00 100%);
  border: 2px solid var(--amber);
  border-radius: 3px;
  overflow: visible;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,176,0,0.12);
}
.coin-slot-rail::after {
  content: '◉';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: rgba(255, 176, 0, 0.3);
  line-height: 1;
  pointer-events: none;
}
.coin-slot-arrow {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--amber);
  animation: blink 1s steps(2) infinite;
}
.coin-slot-mouth {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 5px;
  background: #000;
  border-radius: 1px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.95), 0 0 6px rgba(255,176,0,0.25);
}
.coin-slot-coin {
  position: absolute;
  top: -12px; left: 50%;
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  transform-style: preserve-3d;
  opacity: 0;
  pointer-events: none;
}
.coin-slot-coin::before,
.coin-slot-coin::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  box-shadow: 0 0 8px var(--amber);
}
.coin-slot-coin::before {
  background: radial-gradient(circle at 35% 30%, #ffe28a 0 28%, var(--amber) 32% 78%, #7a4a00 80% 100%);
}
.coin-slot-coin::after {
  background: linear-gradient(90deg, #5a3500, #ffd97a 50%, #5a3500);
  transform: rotateY(180deg);
}
.coin-slot:hover .coin-slot-coin,
.coin-slot:focus-visible .coin-slot-coin {
  animation: coinHover 1.2s ease-in-out infinite, coinSpin3D 1.1s linear infinite;
  opacity: 1;
}
@keyframes coinSpin3D {
  from { rotate: y 0deg; }
  to   { rotate: y 360deg; }
}
@keyframes coinHover {
  0%, 100% { transform: translateY(0); }
  60%      { transform: translateY(6px); }
}
.coin-slot.coined .coin-slot-coin {
  animation: coinDrop 0.6s ease-in forwards;
  opacity: 1;
}
@keyframes coinDrop {
  0%   { transform: translateY(-6px); opacity: 1; }
  60%  { transform: translateY(14px) scale(0.9); opacity: 1; }
  100% { transform: translateY(60px) scale(0.5); opacity: 0; }
}
.coin-slot-cta {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.coin-slot-line1 {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--amber);
  animation: blink 1.4s steps(2) infinite;
}
.coin-slot-line2 {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--white);
  opacity: 0.85;
}
.coin-slot-credits {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 176, 0, 0.45);
  background: rgba(30, 12, 0, 0.65);
  position: relative;
  box-shadow: 0 0 10px rgba(255,176,0,0.1);
}
.coin-slot-credits-lbl {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--amber);
  opacity: 0.7;
}
.coin-slot-credits-num {
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber);
}
.coin-slot.coined .coin-slot-credits-num {
  animation: creditPop 0.5s ease-out;
}
@keyframes creditPop {
  0%   { transform: scale(1); color: var(--amber); }
  40%  { transform: scale(1.4); color: var(--white); text-shadow: 0 0 12px var(--white); }
  100% { transform: scale(1); color: var(--amber); }
}

/* ---- "+1 CREDIT" floater rising from the credits box ---- */
.coin-slot-floater {
  position: absolute;
  top: -6px;
  left: 50%;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--green);
  text-shadow: 0 0 6px var(--green), 0 0 12px rgba(57,255,20,0.6);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transform: translateX(-50%);
}
.coin-slot.coined .coin-slot-floater {
  animation: creditFloat 0.9s ease-out forwards;
}
@keyframes creditFloat {
  0%   { opacity: 0; transform: translateX(-50%) translateY(4px); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-32px); }
}

/* ---- Spark burst from the slot mouth on insert ---- */
.coin-slot-sparks {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 5;
}
.coin-slot-sparks i {
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px var(--amber), 0 0 10px var(--amber);
  opacity: 0;
}
.coin-slot-sparks i:nth-child(1) { --dx:  24px; --dy: -6px; }
.coin-slot-sparks i:nth-child(2) { --dx:  18px; --dy:  18px; }
.coin-slot-sparks i:nth-child(3) { --dx:   0px; --dy:  28px; }
.coin-slot-sparks i:nth-child(4) { --dx: -18px; --dy:  18px; }
.coin-slot-sparks i:nth-child(5) { --dx: -24px; --dy:  -6px; }
.coin-slot-sparks i:nth-child(6) { --dx: -16px; --dy: -22px; }
.coin-slot-sparks i:nth-child(7) { --dx:   0px; --dy: -30px; }
.coin-slot-sparks i:nth-child(8) { --dx:  16px; --dy: -22px; }
.coin-slot.coined .coin-slot-sparks i {
  animation: sparkBurst 0.7s ease-out forwards;
}
@keyframes sparkBurst {
  0%   { opacity: 1; transform: translate(0, 0) scale(1.2); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}
@keyframes coinSlotPulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 4px rgba(255,176,0,0.06),
      0 0 22px rgba(255,176,0,0.22),
      4px 4px 0 var(--amber-dark);
  }
  50% {
    box-shadow:
      inset 0 0 0 4px rgba(255,176,0,0.16),
      0 0 48px rgba(255,176,0,0.55),
      4px 4px 0 var(--amber-dark);
  }
}
@media (prefers-reduced-motion: reduce) {
  .coin-slot { animation: none; }
  .coin-slot-arrow,
  .coin-slot-line1 { animation: none; }
  .coin-slot:hover .coin-slot-coin,
  .coin-slot:focus-visible .coin-slot-coin { animation: none; opacity: 1; }
  .coin-slot-leds i { animation: none; }
  .coin-slot.coined .coin-slot-sparks i,
  .coin-slot.coined .coin-slot-floater { animation: none; opacity: 0; }
}
@media (max-width: 480px) {
  .coin-slot { gap: 14px; padding: 20px 16px; margin-top: 32px; }
  .coin-slot-rail { width: 28px; height: 58px; }
  .coin-slot-line1 { font-size: 11px; letter-spacing: 1.5px; }
  .coin-slot-line2 { font-size: 9px; letter-spacing: 1px; }
  .coin-slot-credits { padding: 6px 10px; }
  .coin-slot-credits-num { font-size: 15px; }
}

/* Scroll hint under insert-coin CTA */
.scroll-surprise {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--muted);
  opacity: 0.95;
  text-decoration: none;
  transition: color 0.15s ease, text-shadow 0.15s ease, transform 0.15s ease;
}
.scroll-surprise-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--amber);
}
.scroll-surprise-arrow {
  animation: mrv-scroll-blink 0.95s steps(2) infinite;
}
.scroll-surprise-q {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.45);
}
.scroll-surprise-text {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}
.scroll-surprise:hover,
.scroll-surprise:focus-visible {
  color: var(--white);
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.45);
  transform: translateY(1px);
  outline: none;
}
.scroll-surprise[data-egg-count]::after {
  content: attr(data-egg-count);
  flex: 0 0 100%;
  display: block;
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: var(--cyan);
  letter-spacing: 1px;
  text-align: center;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s, max-height 0.2s;
  pointer-events: none;
}
.scroll-surprise:hover[data-egg-count]::after,
.scroll-surprise:focus-visible[data-egg-count]::after {
  opacity: 1;
  max-height: 40px;
}
@keyframes mrv-scroll-blink {
  50% { opacity: 0.2; transform: translateY(3px); }
}


/* Home/hero UX polish on tablets and phones */
@media (max-width: 720px) {
  .hero {
    min-height: calc(100vh - 46px);
    padding: 22px 14px 16px;
  }
  .logo-row {
    gap: 18px;
    margin-bottom: 20px;
  }
  .title {
    letter-spacing: 3px;
    margin-bottom: 14px;
  }
  .tagline {
    margin-bottom: 22px;
    line-height: 1.35;
  }
  .cta-row {
    margin-bottom: 22px;
    gap: 10px;
  }
  .btn {
    font-size: 10px;
    letter-spacing: 1px;
    padding: 12px 14px;
  }
  .coin-slot {
    grid-template-columns: auto 1fr;
    gap: 10px 12px;
    padding: 12px;
  }
  .coin-slot-credits {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(220px, 100%);
    flex-direction: row;
    justify-content: space-between;
    padding: 6px 10px;
  }
  .coin-slot-credits-lbl {
    font-size: 7px;
    letter-spacing: 1.2px;
  }
  .coin-slot-credits-num {
    font-size: 16px;
  }
  .scroll-surprise {
    margin-top: 6px;
    gap: 8px;
  }
  .scroll-surprise-text {
    font-size: 8px;
    letter-spacing: 1.1px;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: calc(100svh - 46px);
    position: relative;
    padding: 16px 16px 24px;
  }
  .hero-inner {
    max-width: 100%;
  }
  .invader {
    width: 36px;
    height: 36px;
  }
  .logo-row {
    gap: 14px;
    margin-bottom: 14px;
  }
  .title {
    font-size: clamp(38px, 18vw, 70px);
    letter-spacing: 2px;
    margin-bottom: 20px;
  }
  .tagline {
    font-size: clamp(17px, 4.8vw, 20px);
    margin-bottom: 16px;
  }
  .tagline .muted {
    font-size: clamp(14px, 4vw, 16px);
  }
  .btn {
    font-size: 9px;
    min-height: 44px;
  }
  .coin-slot {
    width: 100%;
    max-width: 420px;
    text-align: left;
  }
  .coin-slot-line1 {
    font-size: 10px;
    letter-spacing: 1.1px;
  }
  .coin-slot-line2 {
    font-size: 7px;
    letter-spacing: 0.8px;
  }
  .scroll-surprise {
    position: static;
    margin: 10px auto 0;
    width: 100%;
    justify-content: center;
    font-size: 9px;
    color: var(--amber);
    opacity: 1;
  }
  .scroll-surprise-text {
    color: var(--amber);
  }
  .scroll-surprise-icons {
    color: var(--amber);
  }
  .scroll-surprise-q {
    color: var(--amber);
    text-shadow: 0 0 8px rgba(255, 176, 0, 0.5);
  }
}

/* PANELS */
.panel {
  position: relative;
  max-width: 1100px;
  margin: 60px auto;
  padding: 40px 28px;
  background: rgba(5, 12, 5, 0.7);
  border: 2px solid var(--green-dim);
  box-shadow: 0 0 0 4px var(--bg), 0 0 24px rgba(57,255,20,0.25);
}
.panel-event {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px var(--bg), 0 0 28px rgba(255,176,0,0.3);
}
.panel-event::before { border-color: var(--amber); }
.event-live-tag {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--bg);
  background: var(--amber);
  padding: 4px 10px;
  margin-bottom: 14px;
  animation: blink 1s step-end infinite;
}
.event-title { color: var(--amber); text-shadow: 2px 2px 0 var(--amber-dark); }
.event-title::after { background: linear-gradient(90deg, var(--amber), transparent); }
.btn-amber {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(59, 30, 0, 0.4);
  box-shadow: 4px 4px 0 var(--amber-dark);
  text-shadow: 0 0 6px rgba(255,176,0,0.45);
}
.btn-amber:hover, .btn-amber:focus-visible {
  background: var(--amber);
  color: var(--bg);
  text-shadow: none;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--amber-dark), 0 0 18px var(--amber);
}
.btn-amber:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--amber-dark); }
.panel::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px dashed var(--green-dim);
  pointer-events: none;
  opacity: 0.4;
}

.section-head {
  position: relative;
  display: block;
  margin-bottom: 16px;
  padding-right: 0;
}
.section-head:has(.share-link) { padding-right: 48px; }
.section-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: linear-gradient(90deg, var(--green), transparent);
}
.section-head:has(.share-link)::after { right: 48px; }
.section-head .share-link {
  position: absolute;
  top: 0;
  right: 0;
  margin-left: 0;
}
.section-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: var(--green);
  margin-bottom: 0;
  text-shadow: 2px 2px 0 var(--green-dark);
  display: inline-block;
  position: relative;
  overflow-wrap: break-word;
  word-break: break-word;
}
.section-title::after {
  /* Underline moved to .section-head::after so it spans the full panel
     width regardless of title length. Keep selector for any external override. */
  display: none;
}
.share-link {
  background: transparent;
  border: 1px solid var(--green-dark);
  color: var(--muted);
  font-family: 'VT323', monospace;
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  margin-left: 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 2px;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.12s;
}
.share-link:hover, .share-link:focus-visible {
  color: var(--bg);
  background: var(--amber);
  border-color: var(--amber);
  outline: none;
}
.share-link:active { transform: translateY(1px); }
.share-link.copied {
  color: var(--bg);
  background: var(--green);
  border-color: var(--green);
}
.panel-sub {
  color: var(--muted);
  margin-bottom: 28px;
  font-size: 20px;
  max-width: 82ch;
  line-height: 1.65;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 30px;
}
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

/* About: 1 big card on left, 2 stacked smaller cards on right */
.about-grid { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
.about-side { display: flex; flex-direction: column; gap: 22px; }
.about-side .card { padding: 18px 20px; height: 100%; box-sizing: border-box; }
.about-side .card h3 { font-size: 12px; margin-bottom: 10px; }
.about-side .card .quote { font-size: 22px; padding-left: 10px; margin: 6px 0 12px; }
.about-side .card p { font-size: 18px; }
.now-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.now-list li { display: flex; align-items: center; gap: 10px; color: var(--white); font-size: 17px; }
.now-ico { font-size: 20px; }
.now-key { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--amber); min-width: 58px; }
.now-list a { color: var(--green); text-decoration: none; border-bottom: 1px solid var(--green-dim); transition: color 0.15s, border-color 0.15s; }
.now-list a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.card-hobbies { margin-top: 22px; padding: 22px; }
@media (max-width: 720px) {
  .about-grid { grid-template-columns: 1fr; }
}

.card {
  border: 2px solid var(--green-dim);
  padding: 22px;
  background: rgba(11, 30, 11, 0.5);
  position: relative;
}
.card h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--amber);
  margin-bottom: 12px;
}
.card p {
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.48;
}
.card .muted-line { color: var(--muted); font-size: 17px; }
.card .quote {
  font-size: 26px;
  color: var(--cyan);
  border-left: 3px solid var(--cyan);
  padding-left: 12px;
  margin: 8px 0 14px;
}

.hobbies-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--amber);
  margin-top: 14px;
  margin-bottom: 8px !important;
  letter-spacing: 1px;
}
.hobbies {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
}
.hobbies li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 38px;
  border: 2px solid var(--green-dim);
  background: rgba(11, 30, 11, 0.6);
  color: var(--white);
  font-size: 18px;
  box-shadow: 3px 3px 0 var(--green-dark);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s;
}
.hobbies li:hover {
  transform: translate(-2px, -2px);
  border-color: var(--green);
  color: var(--green);
  box-shadow: 5px 5px 0 var(--green-dark), 0 0 12px rgba(57,255,20,0.4);
}
.hobby-ico { font-size: 20px; filter: drop-shadow(0 0 4px var(--green)); transition: transform 0.2s ease; }
.hobbies li:hover .hobby-ico { transform: scale(1.15) rotate(-4deg); }

/* STATS */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 20px;
}
@media (max-width: 720px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }

.stats-row-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .stats-row-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stats-row-5 { grid-template-columns: repeat(2, 1fr); } }
.stats-row-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .stats-row-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stats-row-6 { grid-template-columns: repeat(2, 1fr); } }
.stats-row-7 { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 1200px) { .stats-row-7 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .stats-row-7 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .stats-row-7 .stat:last-child { grid-column: 2; } }
@media (max-width: 460px)  { .stats-row-7 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .stats-row-7 .stat:last-child { grid-column: 1 / -1; } }

.stat {
  text-align: center;
  padding: 18px 10px;
  border: 2px solid var(--green-dim);
  background: rgba(11, 30, 11, 0.4);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 110px;
}
.stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    transparent 0,
    transparent 3px,
    rgba(57,255,20,0.04) 3px,
    rgba(57,255,20,0.04) 4px
  );
  pointer-events: none;
}
.stat:hover {
  transform: translateY(-2px);
  border-color: var(--green);
  box-shadow: 0 4px 16px rgba(57,255,20,0.2);
}
.stat-num {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  color: var(--green);
  text-shadow: 0 0 10px var(--green);
  margin-bottom: 8px;
}
.stat-lbl {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.5px;
  font-family: 'Press Start 2P', monospace;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

@media (max-width: 900px) {
  .panel {
    margin: 44px auto;
    padding: 30px 20px;
  }
  .section-title {
    font-size: 14px;
    line-height: 1.35;
  }
  .panel-sub {
    font-size: 18px;
    margin-bottom: 22px;
  }
}

@media (max-width: 480px) {
  .panel {
    margin: 34px auto;
    padding: 22px 14px;
  }
  .section-title {
    font-size: 12px;
    margin-bottom: 6px;
  }
  .panel-sub {
    font-size: 17px;
    line-height: 1.45;
    margin-bottom: 18px;
  }
  .card {
    padding: 16px 14px;
  }
  .card h3 {
    font-size: 12px;
    margin-bottom: 9px;
  }
  .card p {
    font-size: 18px;
    line-height: 1.42;
  }
}

/* PROJECTS — NES-style cartridges */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-block: 8px;
  perspective: 1000px;
}
@media (max-width: 900px) { .projects-grid { grid-template-columns: 1fr; gap: 36px; } }

.cartridge {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  font-family: 'VT323', monospace;
  cursor: pointer;
  margin-top: 12px;
}
.cartridge.cartridge-locked { cursor: default; }

/* SOON / FEATURED tag floating top-left */
.cart-tag {
  position: absolute;
  top: -10px;
  left: 12px;
  z-index: 4;
  background: var(--bg);
  border: 2px solid var(--green);
  padding: 4px 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--green);
  letter-spacing: 1.5px;
}
.cartridge-featured .cart-tag { border-color: var(--amber); color: var(--amber); }
.cartridge-locked .cart-tag {
  border-color: var(--amber);
  color: var(--amber);
  animation: blink 2s steps(2) infinite;
}

/* Cartridge plastic shell — SNES warm purple-grey */
.cart-shell {
  position: relative;
  display: block;
  background: linear-gradient(
    145deg,
    #e0dde8 0%,
    #c8c4d0 20%,
    #b2aebe 50%,
    #9290a0 75%,
    #72707e 100%
  );
  border: 3px solid #48465a;
  border-radius: 6px 6px 2px 2px;
  padding: 18px 16px 0;
  box-shadow:
    /* Inner bevel — top-left bright, bottom-right dark */
    inset 2px 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 3px 0 rgba(255, 255, 255, 0.32),
    inset -2px -2px 0 rgba(0, 0, 0, 0.22),
    inset 0 -3px 0 rgba(0, 0, 0, 0.42),
    /* Extruded side/bottom face — stacked depth */
    3px 3px 0 #58566e,
    6px 6px 0 #3e3c52,
    9px 9px 0 #28263a,
    /* Soft ambient shadow */
    4px 20px 28px rgba(0, 0, 0, 0.4);
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease;
  will-change: transform;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Specular plastic shine — tracks mouse via JS --shine-x / --shine-y */
.cart-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px 4px 0 0;
  background: radial-gradient(
    ellipse 65% 45% at var(--shine-x, 38%) var(--shine-y, 22%),
    rgba(255, 255, 255, 0.24) 0%,
    rgba(255, 255, 255, 0.08) 40%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.25s ease;
}
@media (hover: hover) {
  .cartridge:hover .cart-shell::before,
  .cartridge:focus-visible .cart-shell::before {
    opacity: 1;
  }
}

/* Lab = cyan/teal cartridge */
.cartridge-lab .cart-tag { border-color: var(--cyan); color: var(--cyan); }
.cartridge-lab .cart-shell {
  background: linear-gradient(
    145deg,
    #2ab8cc 0%,
    #1a8a9a 22%,
    #0f7080 50%,
    #085060 75%,
    #043848 100%
  );
  border-color: #022a35;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 3px 0 rgba(255, 255, 255, 0.18),
    inset -2px -2px 0 rgba(0, 0, 0, 0.28),
    inset 0 -3px 0 rgba(0, 0, 0, 0.5),
    3px 3px 0 #0a4050,
    6px 6px 0 #052a35,
    9px 9px 0 #011820,
    4px 20px 28px rgba(0, 0, 0, 0.45);
}

/* Featured = gold cartridge (Zelda vibe) */
.cartridge-featured .cart-shell {
  background: linear-gradient(
    145deg,
    #eebc3a 0%,
    #d8a323 22%,
    #b88018 50%,
    #8a5808 75%,
    #5e3800 100%
  );
  border-color: #3a2300;
  box-shadow:
    inset 2px 2px 0 rgba(255, 220, 100, 0.45),
    inset 0 3px 0 rgba(255, 220, 100, 0.28),
    inset -2px -2px 0 rgba(60, 30, 0, 0.35),
    inset 0 -3px 0 rgba(60, 30, 0, 0.6),
    3px 3px 0 #5a3800,
    6px 6px 0 #3e2400,
    9px 9px 0 #2a1a00,
    4px 20px 28px rgba(0, 0, 0, 0.45);
}

/* Hover tilt + glow */
@media (hover: hover) {
  .cartridge:hover .cart-shell,
  .cartridge:focus-visible .cart-shell {
    transform: rotateX(-8deg) rotateY(10deg) translateY(-6px);
    box-shadow:
      inset 2px 2px 0 rgba(255, 255, 255, 0.55),
      inset 0 3px 0 rgba(255, 255, 255, 0.38),
      inset -2px -2px 0 rgba(0, 0, 0, 0.22),
      inset 0 -3px 0 rgba(0, 0, 0, 0.42),
      3px 3px 0 #58566e,
      6px 6px 0 #3e3c52,
      10px 10px 0 #28263a,
      14px 14px 0 #1c1a2e,
      4px 28px 36px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(57, 255, 20, 0.45);
  }
  .cartridge-lab:hover .cart-shell,
  .cartridge-lab:focus-visible .cart-shell {
    transform: rotateX(-8deg) rotateY(10deg) translateY(-6px);
    box-shadow:
      inset 2px 2px 0 rgba(255, 255, 255, 0.35),
      inset 0 3px 0 rgba(255, 255, 255, 0.2),
      inset -2px -2px 0 rgba(0, 0, 0, 0.28),
      inset 0 -3px 0 rgba(0, 0, 0, 0.5),
      3px 3px 0 #0a4050,
      6px 6px 0 #052a35,
      10px 10px 0 #011820,
      14px 14px 0 #000e14,
      4px 28px 36px rgba(0, 0, 0, 0.5),
      0 0 36px var(--cyan);
  }
  .cartridge-featured:hover .cart-shell,
  .cartridge-featured:focus-visible .cart-shell {
    transform: rotateX(-8deg) rotateY(10deg) translateY(-6px);
    box-shadow:
      inset 2px 2px 0 rgba(255, 220, 100, 0.5),
      inset 0 3px 0 rgba(255, 220, 100, 0.32),
      inset -2px -2px 0 rgba(60, 30, 0, 0.35),
      inset 0 -3px 0 rgba(60, 30, 0, 0.6),
      3px 3px 0 #5a3800,
      6px 6px 0 #3e2400,
      10px 10px 0 #2a1a00,
      14px 14px 0 #1a0e00,
      4px 28px 36px rgba(0, 0, 0, 0.5),
      0 0 36px var(--amber);
  }
  .cartridge-locked:hover .cart-shell,
  .cartridge-locked:focus-visible .cart-shell {
    transform: rotateX(-3deg) rotateY(3deg) translateY(-2px);
    box-shadow:
      inset 2px 2px 0 rgba(255, 255, 255, 0.5),
      inset 0 3px 0 rgba(255, 255, 255, 0.32),
      inset -2px -2px 0 rgba(0, 0, 0, 0.22),
      inset 0 -3px 0 rgba(0, 0, 0, 0.42),
      3px 3px 0 #58566e,
      6px 6px 0 #3e3c52,
      8px 8px 0 #28263a;
  }
  .cartridge:hover .cart-title,
  .cartridge:focus-visible .cart-title {
    text-shadow: 0 0 10px var(--green), 1px 1px 0 #c9b88a;
  }
  .cartridge-lab:hover .cart-title,
  .cartridge-lab:focus-visible .cart-title {
    text-shadow: 0 0 12px var(--cyan), 1px 1px 0 #c9b88a;
  }
  .cartridge-featured:hover .cart-title,
  .cartridge-featured:focus-visible .cart-title {
    text-shadow: 0 0 12px var(--amber), 1px 1px 0 #c9b88a;
  }
}

/* Paper label */
.cart-label {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    165deg,
    #fef6dc 0%,
    #f6e8c2 30%,
    #ead8a0 70%,
    #dec888 100%
  );
  border: 2px solid #1a1a1a;
  padding: 22px 12px 14px;
  color: #1a1a1a;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgba(150, 110, 40, 0.3),
    inset 2px 2px 0 rgba(255, 255, 255, 0.55),
    inset -1px -1px 0 rgba(100, 70, 20, 0.2);
  overflow: hidden;
  flex: 1;
}

/* Color stripes at top of label (NES Black Box style) */
.cart-stripes {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
  background: repeating-linear-gradient(90deg,
    var(--green)   0   12.5%,
    var(--amber)   12.5% 25%,
    var(--cyan)    25%   37.5%,
    var(--magenta) 37.5% 50%,
    var(--green)   50%   62.5%,
    var(--amber)   62.5% 75%,
    var(--cyan)    75%   87.5%,
    var(--magenta) 87.5% 100%);
  border-bottom: 2px solid #1a1a1a;
}

.cart-pixel {
  display: block;
  font-size: 52px;
  line-height: 1;
  margin: 6px 0 8px;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.18));
}
.cart-title {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #111;
  letter-spacing: 1px;
  line-height: 1.4;
  margin: 4px 0 8px;
  text-shadow: 1px 1px 0 #c9b88a;
  transition: text-shadow 0.2s ease;
}
.cart-tagline {
  display: block;
  font-size: 16px;
  line-height: 1.25;
  color: #4a3a18;
  margin: 0 4px 12px;
  min-height: 40px;
  flex: 1 0 auto;
}
.cart-why {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1.5;
  color: #6a3a08;
  background: rgba(255, 176, 0, 0.18);
  border-left: 2px solid #b06a10;
  padding: 6px 8px;
  margin: 0 4px 12px;
  letter-spacing: 0.5px;
}
.cart-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: #5a4516;
  border-top: 1px dashed rgba(90, 69, 22, 0.45);
  padding-top: 8px;
  letter-spacing: 1px;
}

/* Bottom waist (narrower section like real NES carts) — SNES dark grey */
.cart-waist {
  display: block;
  position: relative;
  margin: 10px 16px 0;
  height: 22px;
  background: linear-gradient(145deg, #6a6880 0%, #5a5870 40%, #3c3a4c 100%);
  border: 2px solid #28263a;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    3px 3px 0 #28263a,
    6px 6px 0 #1c1a2e;
}
.cartridge-featured .cart-waist {
  background: linear-gradient(145deg, #7a5010 0%, #5a3a05 40%, #3a2300 100%);
  border-color: #3a2300;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    3px 3px 0 #2a1a00,
    6px 6px 0 #1a0e00;
}
/* Screw holes — Phillips-style indentations on the waist strip */
.cart-waist::before,
.cart-waist::after {
  content: '+';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #7a7890, #28263a);
  border: 1px solid #18162a;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.2),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5);
  font-size: 7px;
  line-height: 11px;
  text-align: center;
  color: rgba(255, 255, 255, 0.15);
  font-family: monospace;
  pointer-events: none;
}
.cart-waist::before { left: 5px; }
.cart-waist::after  { right: 5px; }
/* Lab screw tint */
.cartridge-lab .cart-waist::before,
.cartridge-lab .cart-waist::after {
  background: radial-gradient(circle at 38% 32%, #1a7888, #03242e);
  border-color: #011820;
}
/* Featured screw tint */
.cartridge-featured .cart-waist::before,
.cartridge-featured .cart-waist::after {
  background: radial-gradient(circle at 38% 32%, #a06820, #3a2000);
  border-color: #281200;
}
/* Gold connector pins */
.cart-pins {
  position: absolute;
  inset: 5px 8px;
  background:
    linear-gradient(180deg, #f4c95a 0%, #b88412 60%, #5a3e00 100%),
    repeating-linear-gradient(90deg, #c9a449 0 4px, #1a1a1a 4px 6px);
  background-blend-mode: multiply;
  border: 1px solid #000;
  border-radius: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 150, 0.5);
}

/* New project cartridge: inherits SNES grey shell, green blinking tag */
.cartridge-new .cart-tag {
  border-color: var(--green);
  color: var(--green);
  animation: blink 1.8s steps(2) infinite;
}
@media (hover: hover) {
  .cartridge-new:hover .cart-shell,
  .cartridge-new:focus-visible .cart-shell {
    box-shadow:
      inset 2px 2px 0 rgba(255, 255, 255, 0.55),
      inset 0 3px 0 rgba(255, 255, 255, 0.38),
      inset -2px -2px 0 rgba(0, 0, 0, 0.22),
      inset 0 -3px 0 rgba(0, 0, 0, 0.42),
      3px 3px 0 #58566e,
      6px 6px 0 #3e3c52,
      10px 10px 0 #28263a,
      14px 14px 0 #1c1a2e,
      4px 28px 36px rgba(0, 0, 0, 0.5),
      0 0 32px rgba(57, 255, 20, 0.55);
  }
}

/* Locked: greyscale + SOLD OUT stamp */
.cartridge-locked .cart-shell { filter: grayscale(0.55) brightness(0.78); }
.cart-stamp {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-14deg);
  z-index: 3;
  border: 4px double var(--red);
  padding: 8px 18px;
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--red);
  background: rgba(10, 0, 0, 0.55);
  text-shadow: 0 0 8px var(--red);
  pointer-events: none;
  box-shadow: 0 0 12px rgba(255, 42, 42, 0.45);
  filter: grayscale(0); /* keep stamp red even when shell is greyed */
}

/* Action line below cartridge */
.cart-action {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--amber);
  letter-spacing: 2px;
  animation: blink 1.4s steps(2) infinite;
}
.cartridge-featured .cart-action { color: var(--amber); }
.cartridge-locked .cart-action { color: var(--red); animation: none; }

@media (prefers-reduced-motion: reduce) {
  .cart-shell { transition: none; }
  .cartridge:hover .cart-shell,
  .cartridge:focus-visible .cart-shell { transform: none; }
  .cart-action,
  .cartridge-locked .cart-tag { animation: none; }
}
@media (max-width: 480px) {
  .cart-pixel { font-size: 42px; }
  .cart-title { font-size: 10px; }
  .cart-tagline { font-size: 14px; min-height: 0; }
  .cart-stamp { font-size: 13px; padding: 6px 14px; }
}

/* CHARTS */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 28px;
}
.chart-wide { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .charts-grid { grid-template-columns: 1fr; }
  .chart-wide { grid-column: auto; }
}

/* Charts breakdown collapse toggle */
.charts-toggle {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(11, 59, 8, 0.3);
  border: 2px solid var(--green-dim);
  box-shadow: 4px 4px 0 var(--green-dark);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.charts-toggle:hover,
.charts-toggle:focus-visible {
  background: rgba(57, 255, 20, 0.08);
  border-color: var(--green);
  box-shadow: 4px 4px 0 var(--green-dim);
  outline: none;
  transform: translateY(-1px);
}
.charts-toggle:active { transform: translateY(1px); box-shadow: 2px 2px 0 var(--green-dark); }
.charts-toggle[aria-expanded="true"] {
  border-color: var(--cyan);
  box-shadow: 4px 4px 0 rgba(0, 240, 255, 0.3);
}
.charts-toggle-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--green);
  letter-spacing: 1px;
  transition: color 0.15s;
}
.charts-toggle[aria-expanded="true"] .charts-toggle-label {
  color: var(--cyan);
}
.charts-toggle-hint {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--muted);
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.charts-toggle::after {
  content: '[ LOAD \25be ]';
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--amber);
  letter-spacing: 1px;
  flex-shrink: 0;
  margin-left: 12px;
}
.charts-toggle[aria-expanded="true"]::after {
  content: '[ HIDE \25b4 ]';
  color: var(--cyan);
}
#charts-collapse:not([hidden]) {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: rigBodyIn 0.25s ease;
}
@media (max-width: 600px) {
  .charts-toggle { padding: 13px 14px; }
  .charts-toggle-label { font-size: 9px; }
  .charts-toggle-hint { display: none; }
}
.chart-card {
  border: 2px solid var(--green-dim);
  background: rgba(11, 30, 11, 0.5);
  padding: 22px;
  min-height: 220px;
}
.chart-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--amber);
  margin-bottom: 18px;
  letter-spacing: 1px;
}
.chart-scope {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--muted);
  border: 1px solid var(--muted);
  padding: 2px 5px;
  vertical-align: middle;
  letter-spacing: 0.5px;
  margin-left: 6px;
  opacity: 0.7;
}

/* Donut (single value) */
.donut-wrap { display: flex; justify-content: center; }
.donut { width: 180px; height: 180px; }
.donut-track {
  fill: none;
  stroke: var(--green-dark);
  stroke-width: 14;
}
.donut-fill {
  fill: none;
  stroke: var(--green);
  stroke-width: 14;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  filter: drop-shadow(0 0 6px var(--green));
  stroke-dasharray: 0 999;
  transition: stroke-dasharray 1.6s cubic-bezier(.2,.8,.2,1);
}
.donut-pct {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  fill: var(--white);
}
.donut-sub {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  fill: var(--muted);
}

/* Multi-segment ring */
.ring { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.ring-row {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
}
.ring-row .ring { max-width: 360px; }
.ring-row .legend { margin-top: 0; }
.legend-platform { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 720px) {
  .ring-row { grid-template-columns: 1fr; gap: 18px; }
  .ring-row .ring { max-width: 240px; }
}
.ring-seg {
  fill: none;
  stroke-width: 22;
  stroke-linecap: butt;
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
  filter: drop-shadow(0 0 4px currentColor);
  stroke-dasharray: 0 999;
  transition: stroke-dasharray 1.4s cubic-bezier(.2,.8,.2,1);
}

/* Pie chart wedges — 8-bit style */
.pie-seg {
  cursor: pointer;
  transform-origin: 100px 100px;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.45s steps(7), opacity 0.3s steps(3), filter 0.15s steps(2);
  filter: drop-shadow(2px 2px 0 var(--bg)) drop-shadow(0 0 6px currentColor);
  stroke: var(--bg);
  stroke-width: 2;
  stroke-linejoin: miter;
  shape-rendering: crispEdges;
}
.pie-seg.in { transform: scale(1) translate(0, 0); opacity: 1; }
.pie-seg-dither {
  pointer-events: none;
  transform-origin: 100px 100px;
  transform: scale(0);
  opacity: 0;
  mix-blend-mode: multiply;
  transition: transform 0.45s steps(7), opacity 0.3s steps(3);
  shape-rendering: crispEdges;
}
.pie-seg-dither.in { transform: scale(1) translate(0, 0); opacity: 0.65; }
.pie-seg.hover,
.pie-seg:hover {
  transform: scale(1.03) translate(var(--pie-ox, 0), var(--pie-oy, 0));
  filter: drop-shadow(3px 3px 0 var(--bg)) drop-shadow(0 0 16px currentColor) brightness(1.25);
  stroke: var(--white);
  stroke-width: 2.5;
}
.pie-seg-dither.hover {
  opacity: 0.3;
  transform: scale(1.03) translate(var(--pie-ox, 0), var(--pie-oy, 0));
}
.pie-cap-num {
  text-shadow: 0 0 6px var(--green);
  letter-spacing: 1px;
  animation: pieCapPulse 2.4s ease-in-out infinite;
}
.pie-cap-sub { letter-spacing: 1.5px; }
@keyframes pieCapPulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--green)); }
  50%      { filter: drop-shadow(0 0 10px var(--green)); }
}

/* Pie tooltip */
.pie-tip {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -130%);
  background: var(--bg);
  border: 2px solid var(--green);
  padding: 8px 12px;
  font-family: 'Press Start 2P', monospace;
  color: var(--white);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 5;
  white-space: nowrap;
  text-align: center;
  box-shadow: 3px 3px 0 var(--green-dark), 0 0 14px rgba(57,255,20,0.4);
  min-width: 110px;
}
.pie-tip.show { opacity: 1; }
.pie-tip-name {
  display: block;
  font-size: 9px;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-shadow: 0 0 6px currentColor;
}
.pie-tip-pct {
  display: block;
  font-size: 14px;
  color: var(--green);
  text-shadow: 0 0 6px var(--green);
  letter-spacing: 1px;
}
.pie-tip-val {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 1px;
}

/* Legend */
.legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
  margin-top: 16px;
  padding: 0;
}
.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--white);
  cursor: default;
  transition: color 0.15s ease, transform 0.15s ease;
}
.legend-platform li { cursor: pointer; }
.legend-platform li:hover { color: var(--green); transform: translateX(2px); }
.legend .swatch {
  width: 12px;
  height: 12px;
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.legend .pct { color: var(--muted); margin-left: auto; font-family: 'Press Start 2P', monospace; font-size: 10px; }

/* Bars */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 60px;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--white);
  transition: transform 0.15s ease;
  cursor: pointer;
}
.bar-row:hover { transform: translateX(2px); }
.bar-row:hover .bar-val { color: var(--green); text-shadow: 0 0 6px var(--green); }
.bar-row .bar-name { color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row.active-filter .bar-name { color: var(--cyan); }
.bar-row.active-filter .bar-fill { background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, #007a8a 6px 8px); box-shadow: 0 0 8px var(--cyan); }
.bar-row.active-filter .bar-val { color: var(--cyan); }
.bar-row.dim-filter { opacity: 0.35; }
.bar-track {
  height: 14px;
  background: var(--green-dark);
  position: relative;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(
    90deg,
    var(--green) 0 6px,
    var(--green-dim) 6px 8px
  );
  box-shadow: 0 0 8px var(--green);
  transition: width 1.4s cubic-bezier(.2,.8,.2,1);
}
.bar-row .bar-val {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--amber);
  text-align: right;
}
@media (max-width: 600px) {
  .bar-row { grid-template-columns: 110px 1fr 40px; font-size: 14px; }
}

/* ---- Games active-filter bar ---- */
.games-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 8px;
  padding: 8px 14px;
  border: 1px solid var(--cyan);
  background: rgba(0, 240, 255, 0.06);
  color: var(--cyan);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1px;
}
.games-filter-bar[hidden] { display: none; }
.games-filter-label { color: var(--muted); }
.games-filter-active { color: var(--cyan); flex: 1; }
.games-filter-clear {
  background: transparent;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 4px 8px;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.games-filter-clear:hover { background: var(--cyan); color: #000; }

/* Legend items — filterable */
.legend li { cursor: pointer; transition: opacity 0.15s; }
.legend li:hover { opacity: 0.75; }
.legend li.active-filter { outline: 1px solid var(--cyan); outline-offset: 2px; }
.legend li.dim-filter { opacity: 0.3; }

/* Hall of fame */
.hof {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 0;
}
.hof li {
  border: 2px solid var(--amber);
  background: rgba(60, 40, 0, 0.35);
  padding: 12px 14px;
  color: var(--white);
  font-size: 17px;
  position: relative;
  box-shadow: 3px 3px 0 var(--amber-dark);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  cursor: pointer;
}
.hof li:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--amber-dark), 0 0 14px var(--amber);
}
.hof li::before {
  content: "★";
  color: var(--amber);
  margin-right: 8px;
  filter: drop-shadow(0 0 4px var(--amber));
}
/* Non-HOF entries shown while a filter is active */
.hof li:not(.hof-entry-hall)::before {
  content: "·";
  opacity: 0.5;
}
.hof li:not(.hof-entry-hall) {
  border-color: var(--muted);
  background: rgba(20, 30, 20, 0.3);
  box-shadow: 2px 2px 0 #2a3a2a;
  opacity: 0.75;
}
.hof li:not(.hof-entry-hall):hover {
  opacity: 1;
}
.hof .hof-meta { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; padding-left: 22px; }

/* HOF RAWG tooltip */
.hof-tooltip {
  position: fixed;
  z-index: 9000;
  width: 320px;
  background: var(--bg);
  border: 2px solid var(--amber);
  box-shadow: 0 0 24px rgba(255,176,0,0.25), 4px 4px 0 var(--amber-dark);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.hof-tooltip.visible { opacity: 1; pointer-events: auto; }
.hof-tooltip-img {
  width: 100%;
  height: 154px;
  object-fit: cover;
  display: block;
  background: #0b1a0b;
}
.hof-tooltip-body {
  padding: 12px 14px 15px;
}
.hof-tooltip-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--amber);
  line-height: 1.7;
  margin: 0 0 8px;
  letter-spacing: 0.5px;
}
.hof-tooltip-meta {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0 0 6px;
}
.hof-tooltip-notfound { color: var(--red); }
.hof-tooltip-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.hof-tooltip-mc {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 4px 7px;
  border: 1px solid var(--green);
  color: var(--green);
}
.hof-tooltip-community {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--amber);
}
.hof-tooltip-time {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--cyan);
}
.hof-tooltip-beaten {
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 10px;
}
.hof-tooltip-beaten strong { color: var(--green); }
.hof-tooltip-genres {
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.5;
}
.hof-tooltip-genres span {
  display: inline-block;
  border: 1px solid var(--green-dark);
  padding: 1px 5px;
  margin: 2px 3px 2px 0;
  color: var(--green-dim);
  font-size: 14px;
}
.hof-tooltip-link {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--green-dark);
  pointer-events: auto;
}
.hof-tooltip-link:hover { color: var(--green); }
.hof-tooltip-loading {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--green-dim);
  text-align: left;
  padding: 18px 16px;
  min-height: 72px;
  display: flex;
  align-items: center;
}
.hof-modem-line::after {
  content: '_';
  animation: blink 0.6s step-end infinite;
  color: var(--green);
}
@media (hover: none) { .hof-tooltip { display: none !important; } }

/* Chart subtitle */
.chart-sub {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--muted);
  margin: -6px 0 12px;
  text-align: center;
  letter-spacing: 0.5px;
}

/* PC Rig */
/* Rig collapsed toggle button */
.rig-toggle {
  width: 100%;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(11, 59, 8, 0.3);
  border: 2px solid var(--green-dim);
  box-shadow: 4px 4px 0 var(--green-dark);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.rig-toggle:hover,
.rig-toggle:focus-visible {
  background: rgba(57, 255, 20, 0.08);
  border-color: var(--green);
  box-shadow: 4px 4px 0 var(--green-dim);
  outline: none;
  transform: translateY(-1px);
}
.rig-toggle:active { transform: translateY(1px); box-shadow: 2px 2px 0 var(--green-dark); }
.rig-toggle[aria-expanded="true"] {
  border-color: var(--cyan);
  box-shadow: 4px 4px 0 rgba(0, 240, 255, 0.3);
}
.rig-toggle-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--green);
  letter-spacing: 1px;
  transition: color 0.15s;
}
.rig-toggle[aria-expanded="true"] .rig-toggle-label {
  color: var(--cyan);
}
.rig-toggle-hint {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--muted);
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.rig-toggle::after {
  content: '[ LOAD \25be ]';
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--amber);
  letter-spacing: 1px;
  flex-shrink: 0;
  margin-left: 12px;
}
.rig-toggle[aria-expanded="true"]::after {
  content: '[ HIDE \25b4 ]';
  color: var(--cyan);
}

/* Rig body — hidden by default, animates in when revealed */
#rig-body[hidden] { display: none !important; }
#rig-body {
  animation: rigBodyIn 0.25s ease;
}
@keyframes rigBodyIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .rig-toggle { padding: 13px 14px; }
  .rig-toggle-label { font-size: 9px; }
  .rig-toggle-hint { display: none; }
}

.rig-card {
  border: 2px solid var(--green-dim);
  background: linear-gradient(180deg, rgba(0, 18, 24, 0.6), rgba(5, 14, 5, 0.7));
  box-shadow: 4px 4px 0 var(--green-dark), inset 0 0 40px rgba(0, 240, 255, 0.05);
  padding: 0 0 18px;
  margin-top: 14px;
}
.rig-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(0, 240, 255, 0.08);
  border-bottom: 1px solid var(--green-dim);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--cyan);
  letter-spacing: 1px;
}
.rig-dots {
  display: inline-flex;
  gap: 5px;
}
.rig-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green-dim);
  box-shadow: 0 0 4px currentColor;
}
.rig-dots i:nth-child(1) { background: #ff5f56; }
.rig-dots i:nth-child(2) { background: #ffbd2e; }
.rig-dots i:nth-child(3) { background: #27c93f; }
.rig-bar-title {
  flex: 1;
  text-align: center;
  color: var(--muted);
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rig-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  text-shadow: 0 0 6px var(--green);
}
.rig-led {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green), 0 0 14px var(--green);
  animation: rigBlink 1.6s steps(2) infinite;
}
@keyframes rigBlink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.25; }
}
.rig-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 14px;
  border-bottom: 1px dashed var(--green-dark);
  flex-wrap: wrap;
}
.rig-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan);
}
.rig-name::before {
  content: "> ";
  color: var(--green);
}
.rig-since {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--muted);
  letter-spacing: 1px;
}
.rig-specs {
  list-style: none;
  padding: 14px 16px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rig-spec {
  position: relative;
  display: grid;
  grid-template-columns: 28px 92px 1fr;
  align-items: center;
  gap: 0 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--green-dark);
  background: rgba(11, 59, 8, 0.18);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.rig-spec:hover {
  border-left-color: var(--cyan);
  background: rgba(0, 240, 255, 0.06);
  transform: translateX(2px);
}
.rig-spec-ico {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.4));
}
.rig-spec-lbl {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--cyan);
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 var(--green-dark);
}
.rig-spec-val {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: var(--white);
  letter-spacing: 0.3px;
}
.rig-spec-note {
  color: var(--muted);
  font-size: 17px;
}
.rig-foot {
  margin: 16px 20px 0;
  padding-top: 12px;
  border-top: 1px dashed var(--green-dark);
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.5px;
}
@media (max-width: 600px) {
  .rig-bar { padding: 7px 10px; gap: 8px; font-size: 8px; }
  .rig-bar-title { font-size: 8px; }
  .rig-header { padding: 14px 14px 12px; }
  .rig-name { font-size: 13px; }
  .rig-since { font-size: 15px; }
  .rig-specs { padding: 10px 10px 0; }
  .rig-spec { grid-template-columns: 24px 64px 1fr; gap: 0 8px; padding: 8px 10px; }
  .rig-spec-val { font-size: 17px; }
  .rig-spec-note { font-size: 14px; display: block; }
}

/* HISTORY — THE MACHINES */
.rig-history-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--green-dim);
  letter-spacing: 2px;
  margin: 36px 0 0;
  padding: 10px 4px;
  border-bottom: 1px dashed var(--green-dark);
}
.legacy-count {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-left: 10px;
  font-weight: normal;
}
.history-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}
@media (max-width: 1024px) {
  .history-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .history-grid { grid-template-columns: 1fr; }
}

.hist-card {
  background: #030803;
  border: 1px solid var(--green-dim);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  font-family: 'VT323', monospace;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.hist-card:hover {
  border-color: var(--amber);
  box-shadow: 0 0 12px rgba(255,176,0,0.18);
  transform: translateY(-2px);
}

.hist-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0a1a0a;
  border-bottom: 1px solid var(--green-dark);
  padding: 6px 12px;
  gap: 8px;
}
.hist-codename {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--amber);
  letter-spacing: 1px;
  white-space: nowrap;
}
.hist-years {
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: var(--muted);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.hist-specs {
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.hist-specs li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0 8px;
  font-size: 17px;
  line-height: 1.35;
}
.hist-lbl {
  color: var(--green-dim);
  font-size: 14px;
  font-family: 'Press Start 2P', monospace;
  align-self: start;
  padding-top: 1px;
  letter-spacing: 0;
}
.hist-val {
  color: var(--white);
}
.hist-note {
  color: var(--muted);
  font-size: 15px;
}

.hist-foot {
  margin: 0;
  padding: 8px 14px 10px;
  border-top: 1px dashed var(--green-dark);
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.3px;
  font-style: italic;
}

/* CONTACT */
.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 14px;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 14px;
  padding-top: 6px;
}
@media (max-width: 720px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
.contact-card {
  --cpx: 14px;
  --cpt: 16px;
  position: relative;
  display: grid;
  text-align: left;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "tag  tag  tag"
    "ico title  dmg"
    "ico  sub  arrow";
  align-items: center;
  gap: 4px 10px;
  padding: var(--cpt) var(--cpx);
  cursor: pointer;
  min-height: 72px;
  border: 2px solid var(--green-dim);
  background: rgba(11, 30, 11, 0.55);
  color: var(--green);
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--green-dark);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.contact-card::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed transparent;
  pointer-events: none;
  transition: border-color 0.2s ease;
}
.contact-card:hover,
.contact-card:focus-visible {
  transform: translate(-2px, -2px);
  border-color: var(--green);
  background: rgba(11, 59, 8, 0.55);
  box-shadow: 6px 6px 0 var(--green-dark), 0 0 18px rgba(57,255,20,0.35);
  outline: none;
}
.contact-card:hover::before { border-color: rgba(57,255,20,0.35); }
.contact-card:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--green-dark); }
.contact-card.primary {
  border-color: var(--green);
  background: rgba(11, 59, 8, 0.55);
  box-shadow: 4px 4px 0 var(--green-dark), 0 0 12px rgba(57,255,20,0.25);
}
.contact-ico {
  grid-area: ico;
  grid-row: 2 / 4;
  font-size: 24px;
  filter: drop-shadow(0 0 6px var(--green));
  transition: transform 0.2s ease;
}
.contact-card:hover .contact-ico { transform: scale(1.1) rotate(-4deg); }
.contact-title {
  grid-area: title;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--green);
  text-shadow: 1px 1px 0 var(--green-dark);
  line-height: 1.5;
}
.contact-sub {
  grid-area: sub;
  font-size: 15px;
  color: var(--white);
  line-height: 1.2;
}
.contact-arrow {
  grid-area: arrow;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--amber);
  transition: transform 0.2s ease, color 0.2s ease;
}
.contact-card:hover .contact-arrow { transform: translateX(4px); color: var(--green); }
.contact-card .atk-dmg { grid-area: dmg; text-align: right; align-self: center; margin-top: 0; }
@media (max-width: 600px) {
  .contact-grid { grid-template-columns: 1fr; gap: 12px; }
  .contact-card { --cpx: 16px; --cpt: 14px; padding: var(--cpt) var(--cpx); }
  .contact-ico { font-size: 22px; }
  .contact-title { font-size: 9px; }
  .contact-sub { font-size: 15px; }
}
.center { text-align: center; margin-top: 24px; }

/* FOOTER */
.footer {
  position: relative;
  z-index: 2;
  margin-top: 60px;
  border-top: 2px solid var(--green-dark);
  padding-top: 14px;
  background: rgba(5,10,5,0.7);
}
.marquee {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  overflow: hidden;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--green);
  padding: 10px 0;
  border-top: 1px solid var(--green-dark);
  border-bottom: 1px solid var(--green-dark);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee span {
  display: inline-block;
  animation: scroll-left 40s linear infinite;
}
@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.copy {
  text-align: center;
  padding: 18px 10px 4px;
  color: var(--muted);
  font-size: 16px;
  letter-spacing: 1px;
}
.version {
  text-align: center;
  padding: 0 10px 18px;
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--green-dim);
  opacity: 0.7;
  cursor: help;
  transition: opacity 0.2s, color 0.2s;
}
.version:hover {
  opacity: 1;
  color: var(--amber);
}
.footer-guestbook-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 8px;
  cursor: pointer;
  transition: color .2s;
}
.footer-guestbook-link:hover { color: var(--cyan); }

.footer-social-link {
  font-family: 'VT323', monospace;
  font-size: inherit;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.footer-social-link:hover { color: var(--green); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}

/* =====================================================
   UTILITIES + BOOT + ARCADE + ROULETTE
   ===================================================== */
.hidden,
[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* BOOT INTRO */
.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: pointer;
  animation: bootFade 0.4s ease 3.6s both;
}
@keyframes bootFade {
  to { opacity: 0; visibility: hidden; }
}
.boot-screen {
  width: 100%;
  max-width: 720px;
  font-family: 'VT323', monospace;
  color: var(--green);
  text-shadow: 0 0 6px var(--green);
  font-size: clamp(14px, 3.6vw, 22px);
  line-height: 1.5;
}
.boot-text {
  white-space: pre-wrap;
  margin: 0;
  font-family: inherit;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.boot-cursor {
  display: inline-block;
  color: var(--green);
  animation: blink 0.7s steps(2) infinite;
  font-family: 'VT323', monospace;
  font-size: clamp(14px, 3.6vw, 22px);
  margin-top: 6px;
}

/* ARCADE MODAL — hidden by default, shown only when .arcade has no .hidden class */
.arcade {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  background: #000;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.arcade::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: -1;
}
.arcade:not(.hidden) {
  display: flex;
}
/* Lock body scroll when arcade open */
body.arcade-open {
  overflow: hidden;
  touch-action: none;
}
.arcade-cabinet {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 24px);
  max-height: calc(100svh - 24px);
  margin: auto;
  background: #050a05;
  border: 3px solid var(--green);
  box-shadow: 0 0 0 4px var(--bg), 0 0 32px rgba(57,255,20,0.5);
  padding: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
/* Wrap canvas + overlay so overlay is positioned over the canvas only */
.arcade-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arcade-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 2px solid var(--green-dark);
  padding-bottom: 8px;
}
.arcade-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--amber);
  letter-spacing: 1px;
}
.arcade-close {
  background: transparent;
  border: 2px solid var(--green-dim);
  color: var(--green);
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.arcade-close:hover, .arcade-close:focus {
  background: var(--green);
  color: var(--bg);
}
.arcade-hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.5px;
}
.arcade-hud b { color: var(--green); display: block; margin-top: 4px; font-size: 11px; }
#arcade-canvas {
  display: block;
  width: 100%;
  max-height: 100%;
  height: auto;
  background: #000;
  border: 2px solid var(--green-dim);
  image-rendering: pixelated;
  touch-action: none;
  object-fit: contain;
}
.arcade-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
}
.arcade-overlay.hide { display: none; }
.arcade-overlay > * { pointer-events: auto; }
.arcade-msg {
  font-family: 'Press Start 2P', monospace;
  color: var(--amber);
  font-size: 18px;
  margin-bottom: 14px;
  text-shadow: 0 0 10px var(--amber);
  animation: blink 1s steps(2) infinite;
}
.arcade-controls {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.5px;
}

/* On-screen D-pad for touch/mobile */
.arcade-dpad {
  display: none;
  justify-content: space-between;
  align-items: stretch;
  gap: 10px;
  padding: 2px 0;
}
.arc-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 20px;
  flex: 1;
  min-height: 64px;
  background: rgba(57, 255, 20, 0.06);
  border: 2px solid var(--green-dim);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  border-radius: 2px;
  transition: background 80ms, border-color 80ms;
}
.arc-btn:active {
  background: rgba(57, 255, 20, 0.28);
  border-color: var(--green);
}
.arc-fire {
  background: rgba(255, 43, 214, 0.06);
  border-color: var(--magenta);
  color: var(--magenta);
  font-size: 26px;
}
.arc-fire:active {
  background: rgba(255, 43, 214, 0.28);
  border-color: var(--magenta);
}

/* Show D-pad + hide keyboard hint on touch-primary devices */
@media (hover: none) {
  .arcade-controls { display: none; }
  .arcade-dpad { display: flex; }
}

/* ROULETTE CARD */
.roulette-card {
  margin: 24px auto 0;
  max-width: 460px;
  border: 3px solid var(--amber);
  background: rgba(60, 40, 0, 0.45);
  box-shadow: 0 0 0 4px var(--bg), 0 0 24px rgba(255,176,0,0.45);
  padding: 22px 18px;
  text-align: center;
  animation: rouletteIn 0.5s ease;
}
@keyframes rouletteIn {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.roulette-flip {
  animation: flip 0.5s ease;
}
@keyframes flip {
  0% { transform: rotateY(0); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(0); }
}
.roulette-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  margin-bottom: 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--white);
  letter-spacing: 0.5px;
}
.roulette-filters label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.roulette-filters input { accent-color: var(--amber); }
.roulette-pixel {
  font-size: 48px;
  line-height: 1;
  margin: 6px 0 12px;
  filter: drop-shadow(0 0 8px var(--amber));
}
.roulette-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--green);
  margin-bottom: 10px;
  word-break: break-word;
  text-shadow: 0 0 8px rgba(57,255,20,0.6);
}
.roulette-meta {
  color: var(--white);
  font-size: 18px;
  margin-bottom: 16px;
}
.roulette-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.roulette-close {
  border-color: var(--red);
  color: var(--red);
  background: rgba(255, 42, 42, 0.06);
  box-shadow: 4px 4px 0 #400000;
  text-shadow: 0 0 6px rgba(255,42,42,0.4);
}
.roulette-close:hover,
.roulette-close:focus-visible {
  background: var(--red);
  color: var(--bg);
  text-shadow: none;
  box-shadow: 6px 6px 0 #400000, 0 0 14px var(--red);
  outline: none;
}

/* =====================================================
   MOBILE OPTIMIZATIONS (Android Chrome / iOS Safari)
   ===================================================== */

/* Use small viewport units where supported (fixes Android URL bar jump) */
@supports (height: 100svh) {
  .hero { min-height: calc(100svh - 62px); }
}

/* Tap targets + remove iOS tap highlight + better text rendering */
body { -webkit-tap-highlight-color: rgba(57,255,20,0.2); }
a, button, .btn { touch-action: manipulation; }

/* Tablet & below */
@media (max-width: 720px) {
  html, body { font-size: 18px; }
  .hud {
    padding: 10px 12px;
    font-size: 9px;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
  }
  .hud-center {
    grid-column: 1 / -1;
    order: 3;
    font-size: 8px;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--green-dark);
    padding: 5px 12px 3px;
    white-space: normal;
  }
  .hud-label { margin-right: 6px; }

  .panel {
    margin: 40px 12px;
    padding: 32px 18px;
  }
  .panel::before { inset: -6px; }

  .section-title { font-size: 12px; line-height: 1.4; }
  .section-title::after { width: 100%; }
  .panel-sub { font-size: 18px; line-height: 1.5; }

  .hero { padding: 22px 14px 16px; }
  .logo-row { gap: 18px; margin-bottom: 22px; }
  .invader { width: 44px; height: 44px; }
  .title { letter-spacing: 3px; }
  .subtitle { font-size: 10px; letter-spacing: 1.5px; }
  .tagline { font-size: 18px; line-height: 1.55; }
  .tagline .muted { font-size: 15px; }

  .btn {
    font-size: 10px;
    padding: 14px 16px;
    letter-spacing: 1.5px;
    min-height: 44px;
  }
  .cta-row { gap: 10px; }
  .cta-row .btn { flex: 1 1 auto; }
  .cta-row .share-wrap { flex: 1 1 100%; display: flex; justify-content: center; }
  .cta-row .btn-share { width: 100%; max-width: 300px; }

  .stat-num { font-size: 22px; text-shadow: 0 0 12px var(--green), 0 0 28px rgba(57,255,20,0.45); }
  .stat-lbl { font-size: 11px; letter-spacing: 0.5px; }
  .stat { padding: 14px 6px; min-height: 96px; }

  .chart-card { padding: 16px 12px; }
  .chart-title { font-size: 10px; }

  .legend { grid-template-columns: 1fr; gap: 4px 10px; }
  .legend li { font-size: 14px; }

  .hof { grid-template-columns: 1fr; }
  .hof li { font-size: 15px; }

  .arcade { padding: 8px; }
  .arcade-cabinet { padding: 10px; }
  .arcade-title { font-size: 9px; }
  .arcade-hud { font-size: 8px; }
  .arcade-hud b { font-size: 10px; }
  .arcade-msg { font-size: 14px; }
  .arcade-controls { display: none; }
  .arcade-dpad { display: flex; }
  .arc-btn { min-height: 60px; font-size: 18px; }
  .arc-fire { font-size: 22px; }

  .roulette-card { padding: 18px 14px; margin: 18px 8px 0; }
  .roulette-name { font-size: 12px; }
}

/* Phone */
@media (max-width: 480px) {
  .hud-right .hud-score { font-size: 0; }
  .hud-right .hud-score::before {
    content: "PLAYER 1";
    font-size: 9px;
    color: var(--white);
  }
  .stat { min-height: 86px; padding: 10px 4px; }
  .stat-num {
    text-shadow:
      0 0 14px var(--green),
      0 0 32px rgba(57,255,20,0.55);
  }
  .contact-grid { padding-top: 18px; }
  .contact-card { min-height: 60px; }
  .section-title::after { width: 100%; }
  .card { border-color: rgba(57,255,20,0.45); }
  .quest-log-close { min-width: 44px; min-height: 44px; }
  .mrv-term-close { min-width: 40px; min-height: 40px; font-size: 15px; }
  .title { letter-spacing: 2px; }
  .marquee { font-size: 9px; gap: 24px; }
  .copy { font-size: 13px; }

  .stats-row { gap: 10px; }
  .stats-row-5 { gap: 8px; }

  .bar-row { grid-template-columns: 90px 1fr 36px; gap: 8px; font-size: 13px; }
  .bar-row .bar-name { font-size: 13px; }
  .bar-row .bar-val { font-size: 9px; }

  .donut { width: 150px; height: 150px; }

  /* Hero: hide WHO AM I on mobile — one clear primary CTA */
  .cta-row a.btn[href="#about"] { display: none; }
  .cta-row .btn-primary { width: 100%; justify-content: center; }

  /* Force line breaks in tagline after "personal page" and before muted sub-line */
  .tagline strong::after { content: '\A'; white-space: pre; }
  .tagline .muted { display: block; margin-top: 8px; }
}

/* Very small */
@media (max-width: 360px) {
  .panel { margin: 28px 6px; padding: 22px 12px; }
  .btn { font-size: 9px; padding: 12px 12px; letter-spacing: 1px; }
  .roulette-filters { font-size: 8px; gap: 6px 10px; }
  .hud-achv { display: none !important; }
  .stat-lbl { font-size: 9px; }
  .stat-num { font-size: clamp(16px, 7vw, 20px); }
}

/* =====================================================
   LAYOUT POLISH — touch, safe-area, overflow, hover
   ===================================================== */

/* Disable hover effects on touch devices (no sticky hover after tap) */
@media (hover: none) {
  .btn:hover,
  .cartridge:hover .cart-shell,
  .hobbies li:hover,
  .hof li:hover,
  .stat:hover,
  .contact-card:hover,
  .card:hover,
  .arcade-close:hover,
  .hist-card:hover {
    transform: none;
    box-shadow: 4px 4px 0 var(--green-dark);
    background: rgba(11, 59, 8, 0.4);
    color: var(--green);
    text-shadow: none;
  }
  .stat:hover { box-shadow: none; border-color: var(--green-dim); background: rgba(11,30,11,0.4); }
  .contact-card:hover { box-shadow: 4px 4px 0 var(--green-dark); border-color: var(--green-dim); background: rgba(11,30,11,0.55); }
  .card:hover { box-shadow: none; border-color: var(--green-dim); }
  .hist-card:hover { transform: none; box-shadow: none; border-color: var(--green-dim); background: #030803; }
  .btn-primary:hover { background: var(--green); color: var(--bg); }
  .cartridge:hover .cart-title { text-shadow: 1px 1px 0 #c9b88a; }
}

/* Touch-specific active states — immediate visual feedback on tap */
@media (hover: none) and (pointer: coarse) {
  .stat:active {
    border-color: var(--green);
    background: rgba(11, 59, 8, 0.7);
    box-shadow: 0 0 18px rgba(57,255,20,0.35);
  }
  .hobbies li:active {
    border-color: var(--green);
    color: var(--green);
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--green-dark);
  }
  .hof li:active {
    border-color: var(--amber);
    color: var(--amber);
    background: rgba(255,176,0,0.08);
  }
  .contact-card:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--green-dark);
  }
  .cartridge:active .cart-shell {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--green-dark);
  }
}

/* Safe-area insets (notched phones, iOS / Android with edge-to-edge) */
@supports (padding: max(0px)) {
  .hud {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .footer {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  .arcade {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* Anchor scroll offset (so jumping to a section doesn't hide the title under HUD) */
section[id] { scroll-margin-top: 70px; }

/* Long-word handling on narrow screens */
.card p, .card .quote, .panel-sub, .tagline, .hof li, .roulette-meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* CRT power-on/off transition (nav clicks) */
.crt-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: var(--white);
  opacity: 0;
  transform: scaleY(1);
  transform-origin: center;
  will-change: transform, opacity;
}
.crt-transition.crt-off {
  animation: crtShutdown 220ms cubic-bezier(0.6, 0, 0.7, 0.2) forwards;
}
.crt-transition.crt-on {
  animation: crtPowerOn 320ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes crtShutdown {
  0%   { opacity: 0; transform: scaleY(1); }
  35%  { opacity: 0.85; transform: scaleY(1); background: var(--white); }
  60%  { opacity: 1; transform: scaleY(0.04); background: var(--white); }
  100% { opacity: 1; transform: scaleY(0.002); background: var(--green); }
}
@keyframes crtPowerOn {
  0%   { opacity: 1; transform: scaleY(0.002); background: var(--green); }
  25%  { opacity: 1; transform: scaleY(0.04); background: var(--white); }
  55%  { opacity: 0.7; transform: scaleY(1); background: var(--white); }
  100% { opacity: 0; transform: scaleY(1); background: var(--white); }
}
@media (prefers-reduced-motion: reduce) {
  .crt-transition.crt-off,
  .crt-transition.crt-on { animation: none; opacity: 0; }
}

/* Prevent any horizontal overflow leaking from glow/shadows */
main, .footer { overflow-x: clip; }

/* Crisp pixel sprites at any zoom */
.invader, .cart-pixel, .roulette-pixel {
  image-rendering: pixelated;
}

/* Better focus-visible outlines (accessibility, retro-tinted) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible {
  outline: 2px dashed var(--amber);
  outline-offset: 3px;
}

/* Tagline: force break only on wider viewports; let it flow on phones */
@media (max-width: 480px) {
  .tagline br { display: none; }
  .tagline .muted { display: block; margin-top: 8px; }

  /* Keep CTAs comfortable but not edge-to-edge */
  .cta-row .btn { flex: 1 1 140px; }

  /* Section margins tighter so we don't waste vertical space */
  .panel { margin: 28px 10px; }

  /* Roulette pixel a touch smaller */
  .roulette-pixel { font-size: 40px; }
}

/* Stat numbers: clamp so 7-digit values (coffees) don't overflow */
.stat-num { font-size: clamp(18px, 5vw, 28px); }
#g-owned, #g-total { font-size: clamp(16px, 4.5vw, 26px); }

/* =========================================================
   SEASONAL THEMES — date-based easter eggs
   Activated via body class .mrv-theme-<id> by script.js
   Override today with ?theme=<id> in URL for testing.
   All overlays are pointer-events:none so site stays interactive.
   ========================================================= */

/* Shared FX overlay base */
.mrv-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90; /* above page content (~10), below modals (150) */
  overflow: hidden;
}

/* ---- Banner ---- */
.mrv-theme-banner {
  --accent: var(--green);
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 140;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(5, 10, 5, 0.95);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px var(--bg), 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent);
  font-family: 'Press Start 2P', monospace;
  color: var(--accent);
  max-width: calc(100vw - 20px);
  transition: transform 480ms cubic-bezier(.2,.8,.2,1.2);
}
.mrv-theme-banner.show { transform: translate(-50%, 0); }
.mrv-theme-banner b { font-size: 10px; letter-spacing: 1px; }
.mrv-theme-banner span { font-family: 'VT323', monospace; font-size: 18px; color: var(--white); }
.mrv-theme-banner button {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font: inherit;
  font-size: 10px;
  width: 24px;
  height: 24px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mrv-theme-banner button:hover { background: var(--accent); color: var(--bg); }
@media (max-width: 480px) {
  .mrv-theme-banner { top: 64px; padding: 8px 10px; gap: 8px; }
  .mrv-theme-banner b { font-size: 8px; }
  .mrv-theme-banner span { font-size: 14px; }
}

/* ---- Matrix rain ---- */
.mrv-fx-matrix { background: transparent; }
body.mrv-theme-matrix { filter: hue-rotate(-10deg) saturate(1.1); }

/* ---- Snow (Navidad) ---- */
.mrv-fx-snow span {
  position: absolute;
  top: -5%;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 14px #00f0ff;
  animation: mrv-snow-fall linear infinite;
  will-change: transform;
}
@keyframes mrv-snow-fall {
  0%   { transform: translateY(-10vh) translateX(0) rotate(0deg); }
  100% { transform: translateY(110vh) translateX(40px) rotate(360deg); }
}
body.mrv-theme-christmas .arcade-title::before { content: "🎅 "; }

/* ---- Rain (Blade Runner) ---- */
.mrv-fx-rain span {
  position: absolute;
  top: -10%;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #00f0ff);
  animation: mrv-rain-fall linear infinite;
  will-change: transform;
}
@keyframes mrv-rain-fall {
  0%   { transform: translateY(-10vh); }
  100% { transform: translateY(120vh); }
}
body.mrv-theme-bladerunner {
  background: radial-gradient(ellipse at top, #1a0033 0%, var(--bg) 60%);
}
body.mrv-theme-bladerunner .title,
body.mrv-theme-bladerunner .panel-num,
body.mrv-theme-bladerunner .arcade-title {
  text-shadow: 0 0 6px #ff2bd6, 0 0 14px #00f0ff;
}

/* ---- Scanlines (CRT) ---- */
.mrv-fx-scanlines {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 3px
  );
  mix-blend-mode: multiply;
}

/* ---- INSERT COIN marquee ---- */
.mrv-fx-coin {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--amber);
  text-shadow: 0 0 8px var(--amber);
  pointer-events: none;
  animation: blink 1s steps(2) infinite;
  letter-spacing: 2px;
}
@media (max-width: 480px) { .mrv-fx-coin { font-size: 9px; bottom: 56px; } }

/* ---- Halloween ghosts ---- */
body.mrv-theme-halloween {
  filter: hue-rotate(-30deg) saturate(1.2);
  animation: mrv-flicker 6s infinite;
}
@keyframes mrv-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.55; }
  94% { opacity: 1; }
  96% { opacity: 0.7; }
  97% { opacity: 1; }
}
.mrv-fx-ghost {
  position: absolute;
  left: -10%;
  filter: drop-shadow(0 0 8px #ff7518);
  animation: mrv-ghost-drift linear infinite;
  opacity: 0.85;
}
@keyframes mrv-ghost-drift {
  0%   { transform: translateX(-10vw) translateY(0); }
  50%  { transform: translateX(55vw) translateY(-30px); }
  100% { transform: translateX(120vw) translateY(0); }
}

/* ---- BTTF time glitch ---- */
body.mrv-theme-bttf .title { color: var(--amber); text-shadow: 0 0 10px var(--amber); }
body.mrv-glitch-burst { animation: mrv-glitch 0.25s steps(4); }
@keyframes mrv-glitch {
  0%   { transform: translate(0, 0); filter: hue-rotate(0deg); }
  25%  { transform: translate(-2px, 1px); filter: hue-rotate(60deg); }
  50%  { transform: translate(2px, -1px); filter: hue-rotate(-30deg); }
  75%  { transform: translate(-1px, 2px); filter: hue-rotate(120deg); }
  100% { transform: translate(0, 0); filter: hue-rotate(0deg); }
}

/* ---- HAL 9000 message ---- */
.mrv-fx-hal {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translate(-50%, 20px);
  z-index: 130;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: #000;
  border: 1px solid #ff0000;
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: #ff5050;
  letter-spacing: 1px;
  max-width: calc(100vw - 24px);
  opacity: 0;
  transition: opacity 600ms ease, transform 600ms ease;
  pointer-events: none;
}
.mrv-fx-hal.show { opacity: 1; transform: translate(-50%, 0); }
.mrv-fx-hal .hal-eye {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffeeee, #ff0000 60%, #500 100%);
  box-shadow: 0 0 12px #ff0000;
  animation: mrv-hal-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes mrv-hal-pulse {
  0%, 100% { box-shadow: 0 0 6px #ff0000; }
  50%      { box-shadow: 0 0 18px #ff0000; }
}
body.mrv-theme-odyssey { background: #000; }

/* ---- Alien radar ping ---- */
.mrv-fx-radar {
  position: fixed;
  bottom: 14px;
  left: 14px;
  width: 60px;
  height: 60px;
  z-index: 95;
  border: 2px solid var(--red);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 60%, rgba(255,42,42,0.15) 100%);
}
.mrv-fx-radar span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--red);
  animation: mrv-radar 2.4s ease-out infinite;
}
@keyframes mrv-radar {
  0%   { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
body.mrv-theme-alien {
  filter: hue-rotate(-15deg) contrast(1.05);
}
body.mrv-theme-alien::before {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(255,42,42,0.12) 100%);
  pointer-events: none;
  z-index: 1;
  animation: mrv-flicker 4s infinite;
}

/* ---- Star Wars ---- */
body.mrv-theme-starwars { background: #000; }
body.mrv-theme-starwars .title { color: #ffe81f; text-shadow: 0 0 10px #ffe81f; }

/* ---- Star Trek LCARS stripe ---- */
.mrv-fx-lcars {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(to right, #00f0ff 0%, #ffb000 33%, #ff2bd6 66%, #00f0ff 100%);
  z-index: 96;
  animation: mrv-lcars 8s linear infinite;
  background-size: 200% 100%;
  pointer-events: none;
}
@keyframes mrv-lcars {
  0%   { background-position: 0 0; }
  100% { background-position: 200% 0; }
}
body.mrv-theme-startrek .title { color: #00f0ff; text-shadow: 0 0 10px #00f0ff; }

/* ---- Mario coins ---- */
.mrv-fx-coins span {
  position: absolute;
  bottom: -6%;
  color: #ffb000;
  text-shadow: 0 0 8px #ffb000, 0 0 16px #e52521;
  animation: mrv-coin-float linear infinite;
}
@keyframes mrv-coin-float {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(-110vh) scale(1.1); opacity: 0; }
}
body.mrv-theme-mario .title { color: #e52521; text-shadow: 0 0 8px #ffb000; }

/* ---- Pac-Man Day ---- */
body.mrv-theme-pacman .title { color: #FFD700; text-shadow: 0 0 8px #FFD700, 0 0 20px #2121DE; }

.mrv-fx-pellets span {
  position: absolute;
  bottom: -5%;
  color: #FFD700;
  text-shadow: 0 0 6px #FFD700;
  animation: mrv-pellet-float linear infinite;
  will-change: transform;
}
@keyframes mrv-pellet-float {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.9; }
  100% { transform: translateY(-110vh); opacity: 0; }
}
.mrv-fx-ghost-pac {
  position: fixed;
  left: -80px;
  font-size: 30px;
  pointer-events: none;
  z-index: 91;
  top: var(--top, 30%);
  animation: mrv-ghost-pac-drift linear infinite;
  animation-duration: var(--dur, 20s);
  animation-delay: var(--delay, 0s);
}
@keyframes mrv-ghost-pac-drift {
  0%   { transform: translateX(-80px); opacity: 0; }
  5%   { opacity: 0.7; }
  95%  { opacity: 0.7; }
  100% { transform: translateX(calc(100vw + 160px)); opacity: 0; }
}

/* ---- Tetris Day ---- */
body.mrv-theme-tetris .title { color: #00F0F0; text-shadow: 0 0 8px #00F0F0, 0 0 20px #A000F0; }

.mrv-fx-tetrominoes span {
  position: absolute;
  top: -10%;
  animation: mrv-tetro-fall linear infinite;
  will-change: transform;
}
@keyframes mrv-tetro-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.65; }
  92%  { opacity: 0.65; }
  100% { transform: translateY(115vh) rotate(90deg); opacity: 0; }
}

/* ---- Arkanoid Day ---- */
body.mrv-theme-arkanoid .title { color: #fff; text-shadow: 0 0 8px #CC99FF, 0 0 20px #CC99FF; }

.mrv-fx-bricks {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 89;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
}
.mrv-fx-bricks span {
  display: block;
  height: 12px;
  flex: 1 0 38px;
  opacity: 0.3;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.mrv-fx-arkanoid-ball {
  position: fixed;
  top: 60px;
  left: 15%;
  width: 9px;
  height: 9px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px #CC99FF, 0 0 14px #CC99FF;
  pointer-events: none;
  z-index: 91;
  animation: mrv-ball-bounce 10s linear infinite;
}
@keyframes mrv-ball-bounce {
  0%   { transform: translate(0, 0); }
  14%  { transform: translate(57vw, 35vh); }
  28%  { transform: translate(7vw, 62vh); }
  42%  { transform: translate(66vw, 18vh); }
  57%  { transform: translate(-6vw, 48vh); }
  71%  { transform: translate(48vw, 70vh); }
  85%  { transform: translate(23vw, 14vh); }
  100% { transform: translate(0, 0); }
}

/* ---- Street Fighter II Day ---- */
body.mrv-theme-streetfighter .title { color: #FF4400; text-shadow: 0 0 8px #FF4400, 0 0 20px #FFCC00; }

.mrv-fx-fight {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 130;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(20px, 5vw, 42px);
  color: #FFCC00;
  text-shadow: 0 0 10px #FF4400, 0 0 24px #FF4400, 3px 3px 0 #880000;
  opacity: 0;
  transition: transform 0.18s cubic-bezier(.2, 1.8, .4, 1), opacity 0.25s ease;
}
.mrv-fx-fight.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* ---- Birthday confetti ---- */
.mrv-fx-confetti {
  pointer-events: none;
}
.mrv-fx-confetti span {
  position: absolute;
  top: -5%;
  width: 6px;
  height: 10px;
  animation: mrv-confetti linear infinite;
  transform-origin: center;
  font-family: monospace;
  line-height: 1;
}
@keyframes mrv-confetti {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ---- Birthday fireworks ---- */
.mrv-fx-firework {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
}
.mrv-fx-firework span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: rotate(var(--angle)) translateY(0);
  animation: mrv-firework-particle 1.1s ease-out forwards;
}
@keyframes mrv-firework-particle {
  0%   { transform: rotate(var(--angle)) translateY(0);           opacity: 1; }
  60%  { transform: rotate(var(--angle)) translateY(var(--dist)); opacity: 1; }
  100% { transform: rotate(var(--angle)) translateY(calc(var(--dist) * 1.4)); opacity: 0; }
}
body.mrv-theme-birthday .title {
  background: linear-gradient(90deg, #39ff14, #ff2bd6, #00f0ff, #ffb000);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mrv-rainbow 4s linear infinite;
}
@keyframes mrv-rainbow {
  0%, 100% { filter: hue-rotate(0deg); }
  50%      { filter: hue-rotate(180deg); }
}

/* Reduced motion: kill all fx animations */
@media (prefers-reduced-motion: reduce) {
  .mrv-fx-snow span,
  .mrv-fx-rain span,
  .mrv-fx-ghost,
  .mrv-fx-coins span,
  .mrv-fx-confetti span,
  .mrv-fx-firework span,
  .mrv-fx-radar span,
  .mrv-fx-lcars,
  .mrv-fx-pellets span,
  .mrv-fx-ghost-pac,
  .mrv-fx-tetrominoes span,
  .mrv-fx-arkanoid-ball,
  body.mrv-theme-halloween,
  body.mrv-glitch-burst { animation: none !important; }
  .mrv-fx-matrix { display: none; }
}

/* =========================================================
   ACHIEVEMENT TOASTS
   ========================================================= */
.mrv-toast {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  right: 20px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-width: 240px;
  max-width: calc(100vw - 40px);
  background: rgba(5, 10, 5, 0.96);
  border: 2px solid var(--amber);
  box-shadow: 0 0 0 3px var(--bg), 0 0 22px rgba(255, 176, 0, 0.5);
  color: var(--white);
  font-family: 'VT323', monospace;
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(120%);
  transition: transform 480ms cubic-bezier(.2,.8,.2,1.2),
              opacity 280ms ease,
              visibility 0s linear 480ms;
  pointer-events: none;
}
.mrv-toast.show {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition: transform 480ms cubic-bezier(.2,.8,.2,1.2),
              opacity 200ms ease,
              visibility 0s linear 0s;
}
.mrv-toast .mrv-toast-icon { font-size: 24px; flex-shrink: 0; }
.mrv-toast b {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--amber);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.mrv-toast span { color: var(--white); }
@media (max-width: 480px) {
  .mrv-toast { right: 10px; left: 10px; min-width: 0; }
}

/* ---- Context banner (time / visit / battery) ---- */
.mrv-ctx-banner {
  --ctx-accent: var(--green);
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 200%);
  z-index: 140;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(5, 10, 5, 0.96);
  border: 2px solid var(--ctx-accent);
  box-shadow: 0 0 0 3px var(--bg), 0 0 22px color-mix(in srgb, var(--ctx-accent) 55%, transparent);
  font-family: 'Press Start 2P', monospace;
  color: var(--ctx-accent);
  max-width: calc(100vw - 24px);
  opacity: 0;
  visibility: hidden;
  transition: transform 480ms cubic-bezier(.2,.8,.2,1.2),
              opacity 280ms ease,
              visibility 0s linear 480ms;
}
.mrv-ctx-banner.show {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: transform 480ms cubic-bezier(.2,.8,.2,1.2),
              opacity 200ms ease,
              visibility 0s linear 0s;
}
.mrv-ctx-banner .mrv-ctx-icon { font-size: 22px; flex-shrink: 0; }
.mrv-ctx-banner b  { font-size: 9px; letter-spacing: 1px; display: block; margin-bottom: 3px; }
.mrv-ctx-banner span { font-family: 'VT323', monospace; font-size: 17px; color: var(--white); }
.mrv-ctx-banner button {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font: inherit;
  font-size: 12px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mrv-ctx-banner button:hover { background: var(--ctx-accent); color: var(--bg); }
@media (max-width: 480px) {
  .mrv-ctx-banner { bottom: 14px; padding: 8px 10px; gap: 7px; }
  .mrv-ctx-banner b { font-size: 7px; }
  .mrv-ctx-banner span { font-size: 14px; }
}

/* ---- Noclip mode ---- */
.mrv-noclip {
  opacity: 0.18 !important;
  filter: blur(1px) brightness(1.6);
  transition: opacity 600ms ease, filter 600ms ease;
  pointer-events: none;
  outline: 1px dashed var(--green-dim);
}

/* ---- Guy Fawkes mask (Nov 5) ---- */
.mrv-fawkes-mask {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 130;
  cursor: default;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(237, 232, 208, 0.25));
  transition: filter 300ms ease;
}
.mrv-fawkes-mask:hover {
  filter: drop-shadow(0 0 12px rgba(237, 232, 208, 0.7));
}
.mrv-fawkes-txt {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  white-space: nowrap;
  font-family: 'VT323', monospace;
  font-size: 17px;
  line-height: 1.3;
  color: #ede8d0;
  text-align: right;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
  text-shadow: 0 0 8px rgba(237,232,208,0.6);
}
.mrv-fawkes-mask:hover .mrv-fawkes-txt {
  opacity: 1;
}

/* ---- Cheat code overlays ---- */
.mrv-cheat-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.mrv-cheat-overlay.on { opacity: 1; }

/* Konami overlay */
.mrv-konami-overlay { background: rgba(0, 4, 28, 0.92); }
.mrv-cheat-code-seq {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(11px, 2vw, 20px);
  color: #00f0ff;
  letter-spacing: 6px;
  text-shadow: 0 0 18px #00f0ff, 0 0 40px #0088ff;
  margin-bottom: 22px;
  animation: mrv-overlay-flicker 0.12s infinite alternate;
}
.mrv-cheat-overlay-label {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(8px, 1.5vw, 14px);
  color: #39ff14;
  text-shadow: 0 0 10px #39ff14;
  letter-spacing: 4px;
}
@keyframes mrv-overlay-flicker {
  0%   { opacity: 1; }
  100% { opacity: 0.8; }
}

/* DOOM overlay */
.mrv-doom-overlay { background: rgba(8, 0, 0, 0.93); }
.mrv-doom-big {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(26px, 5vw, 64px);
  color: var(--dc, #ff4400);
  text-shadow: 0 0 20px var(--dc, #ff4400), 0 0 55px var(--dc, #ff4400);
  letter-spacing: 10px;
  margin-bottom: 14px;
  animation: mrv-doom-pulse 0.35s ease-in-out infinite alternate;
}
.mrv-doom-sub {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 1.2vw, 12px);
  color: #cccccc;
  letter-spacing: 3px;
  text-transform: uppercase;
}
@keyframes mrv-doom-pulse {
  from { transform: scale(1);    filter: brightness(1); }
  to   { transform: scale(1.05); filter: brightness(1.35); }
}

/* Hitchhiker / 42 overlay */
.mrv-42-overlay { background: rgba(0, 0, 12, 0.93); }
.mrv-42-number {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(52px, 10vw, 116px);
  color: #88aaff;
  text-shadow: 0 0 28px #4466ff, 0 0 70px #2233cc;
  line-height: 1;
  margin-bottom: 18px;
}
.mrv-42-msg {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(5px, 0.95vw, 10px);
  color: #aabbdd;
  letter-spacing: 2px;
  text-align: center;
  line-height: 2.2;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.mrv-42-sub {
  font-family: 'VT323', monospace;
  font-size: clamp(18px, 2.2vw, 26px);
  color: #556699;
}

@media (max-width: 480px) {
  .mrv-doom-big { letter-spacing: 4px; }
  .mrv-cheat-code-seq { letter-spacing: 2px; }
}

/* Mortal Kombat FINISH HIM overlay */
.mrv-mk-overlay { background: rgba(6, 0, 0, 0.95); }
.mrv-mk-finish {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(22px, 4.5vw, 52px);
  color: #ff2200;
  text-shadow: 0 0 18px #ff2200, 0 0 50px #990000, 4px 4px 0 #1a0000;
  letter-spacing: 8px;
  margin-bottom: 14px;
  animation: mrv-mk-shake 0.08s infinite alternate;
}
@keyframes mrv-mk-shake {
  from { transform: translateX(-2px) skewX(-1deg); }
  to   { transform: translateX(2px)  skewX(1deg); }
}
.mrv-mk-sub {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 1.1vw, 11px);
  color: #cc3300;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.mrv-mk-toasty {
  font-family: 'VT323', monospace;
  font-size: clamp(24px, 3vw, 36px);
  color: #ffaa00;
  letter-spacing: 3px;
  animation: mrv-mk-toasty-pop 0.4s cubic-bezier(.22,.68,0,1.3);
}
@keyframes mrv-mk-toasty-pop {
  from { transform: scale(0) rotate(-8deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}

/* NOCLIP overlay */
.mrv-noclip-overlay { background: rgba(0, 8, 0, 0.88); }
.mrv-noclip-big {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(14px, 2.8vw, 34px);
  color: #39ff14;
  text-shadow: 0 0 14px #39ff14, 0 0 40px #1fa810;
  letter-spacing: 6px;
  margin-bottom: 12px;
  animation: mrv-noclip-scan 1.8s linear infinite;
}
@keyframes mrv-noclip-scan {
  0%   { clip-path: inset(0 0 95% 0); opacity: 0; }
  5%   { opacity: 1; }
  95%  { clip-path: inset(0 0 0% 0); opacity: 1; }
  100% { clip-path: inset(0 0 0% 0); opacity: 1; }
}
.mrv-noclip-sub {
  font-family: 'VT323', monospace;
  font-size: clamp(18px, 2.5vw, 28px);
  color: #1fa810;
  letter-spacing: 2px;
}

/* Status report overlay */
.mrv-status-overlay { background: rgba(2, 4, 12, 0.93); }
.mrv-status-header {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(8px, 1.4vw, 14px);
  color: #ffb000;
  letter-spacing: 5px;
  text-shadow: 0 0 10px #ffb000;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.mrv-status-line {
  font-family: 'VT323', monospace;
  font-size: clamp(16px, 2vw, 22px);
  color: #aabbcc;
  letter-spacing: 1px;
  line-height: 1.9;
  text-align: left;
  width: min(420px, 90vw);
}
.mrv-status-line span { color: #ffb000; }

/* Pirate insult overlay */
.mrv-pirate-overlay { background: rgba(4, 2, 8, 0.93); }
.mrv-pirate-skull {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1;
  margin-bottom: 14px;
  animation: mrv-skull-bob 1.1s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 10px rgba(255,180,0,0.5));
}
@keyframes mrv-skull-bob {
  from { transform: translateY(0) rotate(-4deg); }
  to   { transform: translateY(-8px) rotate(4deg); }
}
.mrv-pirate-insult {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(8px, 1.5vw, 13px);
  color: #ffb000;
  text-shadow: 0 0 12px #ff8c00;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 12px;
}
.mrv-pirate-reply {
  font-family: 'VT323', monospace;
  font-size: clamp(18px, 2.2vw, 26px);
  color: #c8a060;
  letter-spacing: 1px;
  text-align: center;
  font-style: italic;
}

/* Zelda overlay */
.mrv-zelda-overlay { background: rgba(0, 6, 0, 0.93); }
.mrv-zelda-sword {
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1;
  margin-bottom: 14px;
  animation: mrv-zelda-swing 0.7s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 14px rgba(255,230,50,0.75));
}
@keyframes mrv-zelda-swing {
  from { transform: rotate(-20deg) translateY(0); }
  to   { transform: rotate(20deg) translateY(-8px); }
}
.mrv-zelda-msg {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 1.3vw, 13px);
  color: #ffe857;
  text-shadow: 0 0 10px #ffcc00, 0 0 30px #cc8800;
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 10px;
}
.mrv-zelda-sub {
  font-family: 'VT323', monospace;
  font-size: clamp(20px, 2.5vw, 30px);
  color: #aada88;
  letter-spacing: 5px;
}

/* Portal overlay */
.mrv-portal-overlay { background: rgba(0, 0, 10, 0.93); }
.mrv-portal-ring {
  font-size: clamp(52px, 10vw, 110px);
  line-height: 1;
  margin-bottom: 14px;
  color: #00aaff;
  text-shadow: 0 0 22px #0066ff, 0 0 65px #0033cc;
  animation: mrv-portal-spin 3s linear infinite;
}
@keyframes mrv-portal-spin {
  from { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  to   { transform: rotate(360deg) scale(1); }
}
.mrv-portal-msg {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 1.3vw, 13px);
  color: #ff8000;
  text-shadow: 0 0 10px #ff6600, 0 0 30px #cc4400;
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 12px;
}
.mrv-portal-sub {
  font-family: 'VT323', monospace;
  font-size: clamp(16px, 2vw, 24px);
  color: #aaaacc;
  letter-spacing: 1px;
  width: min(380px, 88vw);
  text-align: center;
}

/* Contra overlay */
.mrv-contra-overlay { background: rgba(6, 0, 0, 0.93); }
.mrv-contra-code {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px, 1.8vw, 20px);
  color: #ff4422;
  text-shadow: 0 0 12px #ff2200, 0 0 40px #aa1100;
  letter-spacing: 5px;
  margin-bottom: 16px;
}
.mrv-contra-msg {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 1.3vw, 13px);
  color: #ffcc00;
  text-shadow: 0 0 8px #ffaa00;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.mrv-contra-sub {
  font-family: 'VT323', monospace;
  font-size: clamp(18px, 2.2vw, 26px);
  color: #cc9966;
  letter-spacing: 1px;
}

/* Big Head Mode */
.mrv-bighead {
  font-size: clamp(80px, 22vw, 260px) !important;
  transition: font-size 0.35s cubic-bezier(.2,1.6,.4,1) !important;
}

/* Pong canvas overlay */
.mrv-pong-canvas {
  position: fixed;
  inset: 0;
  z-index: 9995;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* Arcade theme — dim background canvas so FX elements pop */
body.mrv-theme-pacman #bg-canvas,
body.mrv-theme-tetris #bg-canvas,
body.mrv-theme-arkanoid #bg-canvas,
body.mrv-theme-streetfighter #bg-canvas { opacity: 0.25; transition: opacity 0.8s; }

/* ---- Low power mode: amber tint ---- */
html.mrv-low-power { filter: sepia(0.4) hue-rotate(-10deg) saturate(1.3); }

/* =========================================================
   TERMINAL MODAL
   ========================================================= */
.mrv-term {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 16px;
}
.mrv-term.hidden { display: none; }

.mrv-term-box {
  width: 100%;
  max-width: 680px;
  max-height: min(520px, calc(100svh - 32px));
  background: #0a0f0a;
  border: 2px solid var(--green);
  box-shadow: 0 0 0 3px var(--bg), 0 0 40px rgba(57,255,20,0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'VT323', monospace;
}

/* Title bar */
.mrv-term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--green-dark);
  padding: 5px 10px;
  border-bottom: 1px solid var(--green-dim);
  flex-shrink: 0;
}
.mrv-term-dots { display: flex; gap: 5px; }
.mrv-term-dots i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green-dim);
}
.mrv-term-title {
  flex: 1;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--green);
  letter-spacing: 1px;
}
.mrv-term-close {
  background: transparent;
  border: 1px solid var(--green-dim);
  color: var(--green);
  font-size: 13px;
  min-width: 32px;
  min-height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mrv-term-close:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* Scrollable output */
.mrv-term-output {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px 6px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--green);
  min-height: 0;
  scroll-behavior: smooth;
}
.mrv-term-output::-webkit-scrollbar { width: 6px; }
.mrv-term-output::-webkit-scrollbar-track { background: transparent; }
.mrv-term-output::-webkit-scrollbar-thumb { background: var(--green-dark); }

/* Individual lines */
.term-line { white-space: pre-wrap; word-break: break-word; }
.term-line.cmd { color: var(--white); }
.term-line.cmd::before { content: 'visitor@victoriza.com:~$ '; color: var(--green); }
.term-line.err  { color: var(--red); }
.term-line.dim  { color: var(--muted); }
.term-line.bold { color: var(--amber); font-size: 22px; }
.term-line.gap  { height: 10px; display: block; }

/* Input row */
.mrv-term-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 12px;
  border-top: 1px solid var(--green-dark);
  flex-shrink: 0;
}
.mrv-term-prompt {
  font-size: 20px;
  color: var(--green);
  white-space: nowrap;
  flex-shrink: 0;
}
.mrv-term-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-family: 'VT323', monospace;
  font-size: 20px;
  caret-color: var(--green);
}

@media (max-width: 480px) {
  .mrv-term-box { max-height: calc(100svh - 20px); }
  .mrv-term-output { font-size: 17px; padding: 10px 12px 4px; }
  .mrv-term-prompt, .mrv-term-input { font-size: 17px; }
  .mrv-term-input-row { padding: 6px 12px 10px; }
}

/* =========================================================
   IDLE SCREENSAVER (DVD-style bouncing logo)
   ========================================================= */
.mrv-saver {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  animation: mrv-saver-fade 600ms ease both;
}
@keyframes mrv-saver-fade { from { opacity: 0; } to { opacity: 1; } }
.mrv-saver-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mrv-saver-hud {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 22px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--green-dim);
  letter-spacing: 2px;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(57,255,20,0.4);
}
.mrv-saver-hud-l { animation: blink 1.6s steps(2) infinite; }
.mrv-saver-hud-r b { color: var(--amber); margin-left: 6px; }
.mrv-saver-logo {
  position: absolute;
  top: 0;
  left: 0;
  padding: 18px 26px;
  border: 3px solid var(--green);
  color: var(--green);
  box-shadow: 0 0 24px var(--green);
  text-align: center;
  will-change: transform;
  transition: color 200ms, border-color 200ms, box-shadow 200ms;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.mrv-saver-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  letter-spacing: 4px;
}
.mrv-saver-sub {
  font-family: 'VT323', monospace;
  font-size: 16px;
  margin-top: 6px;
  opacity: 0.85;
}
.mrv-saver-rental {
  font-family: 'VT323', monospace;
  font-size: 13px;
  margin-top: 5px;
  color: #ffb000;
  opacity: 0.7;
  letter-spacing: 1px;
}
.mrv-saver-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--amber);
  animation: blink 1.4s steps(2) infinite;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(255,176,0,0.5);
  pointer-events: none;
}
.mrv-saver-marquee {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  height: 22px;
  overflow: hidden;
  border-top: 1px solid var(--green-dark);
  border-bottom: 1px solid var(--green-dark);
  background: rgba(0,30,0,0.4);
  pointer-events: none;
}
.mrv-saver-marquee-track {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--green);
  line-height: 22px;
  padding-left: 100%;
  animation: mrv-saver-marquee 28s linear infinite;
  letter-spacing: 1px;
}
@keyframes mrv-saver-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.mrv-saver-burst {
  position: absolute;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 12px currentColor;
  animation: mrv-saver-burst-fade 1.4s ease-out forwards;
  pointer-events: none;
  z-index: 5;
}
.mrv-saver-burst span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  animation: mrv-saver-spark 1.2s ease-out forwards;
}
@keyframes mrv-saver-burst-fade {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -90%) scale(1);   opacity: 0; }
}
@keyframes mrv-saver-spark {
  0%   { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
@media (max-width: 480px) {
  .mrv-saver-title { font-size: 20px; letter-spacing: 2px; }
  .mrv-saver-sub { font-size: 13px; }
  .mrv-saver-logo { padding: 12px 18px; }
  .mrv-saver-hud { font-size: 7px; padding: 0 12px; }
  .mrv-saver-marquee-track { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mrv-saver-logo {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
  }
  .mrv-saver-marquee-track { animation: none; padding-left: 0; text-align: center; }
}

/* MGS ALERT screensaver overlay */
.mrv-mgs-alert {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(180,0,0,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: mgs-alert-in 120ms steps(2) both;
}
.mrv-mgs-alert-out {
  animation: mgs-alert-out 400ms ease both;
}
@keyframes mgs-alert-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mgs-alert-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.mrv-mgs-exclaim {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(80px, 20vw, 160px);
  color: #fff;
  line-height: 1;
  animation: mgs-pulse 0.22s steps(2) infinite alternate;
  text-shadow: 0 0 40px #ff0, 0 0 80px #f00;
}
@keyframes mgs-pulse {
  from { transform: scale(1);    opacity: 1; }
  to   { transform: scale(1.06); opacity: 0.85; }
}
.mrv-mgs-label {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(18px, 5vw, 36px);
  color: #fff;
  letter-spacing: 8px;
  margin-top: 12px;
  text-shadow: 0 0 20px #f00;
}
.mrv-mgs-sub {
  font-family: 'VT323', monospace;
  font-size: clamp(16px, 3vw, 22px);
  color: rgba(255,255,255,0.75);
  margin-top: 14px;
  letter-spacing: 1px;
}

/* FF MP toast on contact card */
.contact-card { position: relative; }
.mp-toast {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #fff;
  background: rgba(0,0,60,0.88);
  border: 2px solid #5588ff;
  letter-spacing: 0.5px;
  opacity: 0;
  pointer-events: none;
}
.mp-toast-show {
  animation: mp-toast-anim 1.6s ease both;
}
@keyframes mp-toast-anim {
  0%   { opacity: 0; transform: translateY(6px); }
  15%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* ===========================================================
   #6 Real engagement score — popup + bump effect
   =========================================================== */
.hud-row { position: relative; }
.score-pop { animation: scorePop 380ms ease-out; }
@keyframes scorePop {
  0%   { transform: scale(1);   color: var(--green); }
  35%  { transform: scale(1.18); color: var(--amber); text-shadow: 0 0 8px var(--amber); }
  100% { transform: scale(1);   color: var(--green); }
}
.score-popup {
  position: absolute;
  top: -6px;
  left: 100%;
  margin-left: 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber);
  pointer-events: none;
  white-space: nowrap;
  animation: scorePopup 1.1s ease-out forwards;
}
@keyframes scorePopup {
  0%   { opacity: 0; transform: translateY(0); }
  20%  { opacity: 1; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-22px); }
}

/* ===========================================================
   #1 Quest log — HUD button + slide-in panel
   =========================================================== */
.hud-quests {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--green);
  background: transparent;
  border: 1px solid var(--green-dim);
  padding: 3px 8px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.hud-quests:hover,
.hud-quests:focus-visible { background: var(--green); color: #001b00; outline: none; transform: translateY(-1px); }
.hud-quests.quest-cleared {
  border-color: var(--amber);
  color: var(--amber);
  animation: questGlow 1.6s ease-in-out infinite;
}
@keyframes questGlow {
  0%, 100% { box-shadow: 0 0 0 var(--amber); }
  50%      { box-shadow: 0 0 14px var(--amber); }
}

.quest-log {
  position: fixed;
  top: 96px;
  left: 16px;
  width: min(340px, calc(100vw - 32px));
  background: linear-gradient(180deg, #0a1a0a, #050a05);
  border: 3px solid var(--green);
  box-shadow: 0 0 0 2px #000, 0 0 24px rgba(57, 255, 20, 0.35);
  padding: 14px 14px 12px;
  z-index: 980;
  transform: translateX(-110%);
  opacity: 0;
  transition: transform 0.28s ease-out, opacity 0.18s;
}
.quest-log.open { transform: translateX(0); opacity: 1; }
.quest-log.hidden { display: none; }
.quest-log-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.quest-log-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber);
}
.quest-log-close {
  background: transparent;
  border: 2px solid var(--green-dim);
  color: var(--green);
  min-width: 32px;
  min-height: 32px;
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quest-log-close:hover { background: var(--red); color: #fff; border-color: var(--red); }
.quest-log-sub {
  font-family: 'VT323', monospace;
  color: var(--muted);
  font-size: 16px;
  margin: 0 0 10px;
  line-height: 1.2;
}
.quest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.quest-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  align-items: center;
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--white);
  padding: 6px 8px;
  border: 1px solid var(--green-dim);
  background: rgba(57, 255, 20, 0.04);
}
.quest-item .quest-num {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--muted);
}
.quest-item .quest-check {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--green-dim);
  width: 14px;
  text-align: center;
}
.quest-item.quest-done {
  border-color: var(--amber);
  background: rgba(255, 176, 0, 0.07);
}
.quest-item.quest-done .quest-text { color: var(--amber); text-decoration: line-through; text-decoration-color: rgba(255,176,0,0.5); }
.quest-item.quest-done .quest-check { color: var(--amber); text-shadow: 0 0 6px var(--amber); }
.quest-log-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--green-dim);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--muted);
}
.quest-log-foot .quest-progress { color: var(--green); }

/* ===========================================================
   #2 Final Boss — arena, HP bar, sprite, attacks
   =========================================================== */
.boss-arena {
  margin: 8px 0 22px;
  padding: 18px 14px 20px;
  border: 3px solid var(--red);
  background:
    repeating-linear-gradient(180deg, rgba(255,42,42,0.05) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #1a0606 0%, #050a05 100%);
  position: relative;
  overflow: hidden;
}
.boss-arena.shake { animation: bossShake 0.32s ease; }
@keyframes bossShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.boss-arena.boss-down {
  border-color: var(--amber);
  background:
    repeating-linear-gradient(180deg, rgba(255,176,0,0.06) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #1a1305 0%, #050a05 100%);
}
.boss-warning {
  text-align: center;
  font-family: 'Press Start 2P', 'VT323', monospace;
  font-variant-emoji: text;
  font-size: 11px;
  color: var(--red);
  margin-bottom: 10px;
}
.boss-warning-blink { animation: bossBlink 0.6s steps(2, end) infinite; text-shadow: 0 0 6px var(--red); }
@keyframes bossBlink { 50% { opacity: 0.25; } }
.boss-arena.boss-down .boss-warning { display: none; }

.boss-stage {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 10px;
  justify-items: center;
}
.boss-hpbar {
  width: min(100%, 540px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--red);
}
.boss-hp-track {
  height: 14px;
  background: #1a0303;
  border: 2px solid var(--red);
  position: relative;
  overflow: hidden;
}
.boss-hp-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff5050, #ff2a2a);
  transition: width 0.45s cubic-bezier(.5,.0,.4,1), background 0.3s;
  position: relative;
}
.boss-hp-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 4px, transparent 4px 8px);
}
.boss-hp-fill.low  { background: linear-gradient(90deg, var(--amber), #ff8a2a); }
.boss-hp-fill.crit { background: linear-gradient(90deg, var(--red), #ffd24a); animation: bossCrit 0.4s steps(2, end) infinite; }
@keyframes bossCrit { 50% { filter: brightness(1.6); } }
.boss-hp-num { color: var(--white); font-size: 9px; min-width: 64px; text-align: right; }

.boss-name {
  font-family: 'Press Start 2P', 'VT323', monospace;
  font-variant-emoji: text;
  font-size: clamp(9px, 2.5vw, 12px);
  color: var(--amber);
  text-shadow: 0 0 8px var(--amber);
  letter-spacing: 0.05em;
}
.boss-sprite {
  position: relative;
  display: inline-block;
  padding: 4px;
  cursor: pointer;
}
.boss-sprite::before {
  content: attr(data-quote);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bg);
  color: var(--amber);
  border: 1px solid var(--amber);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  white-space: nowrap;
  padding: 6px 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 10;
}
.boss-sprite:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.boss-arena.boss-down .boss-sprite::before { display: none; }
.boss-emoji {
  font-size: 80px;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 0 10px rgba(255,42,42,0.6));
  animation: bossFloat 2.6s ease-in-out infinite;
}
.boss-arena.boss-down .boss-emoji {
  animation: none;
  filter: drop-shadow(0 0 12px var(--amber)) saturate(0.4);
  transform: rotate(180deg) translateY(8px);
  transition: transform 0.5s, filter 0.5s;
}
.boss-shadow {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 8px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.7), transparent 70%);
  border-radius: 50%;
}
@keyframes bossFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.boss-sprite.hit { animation: bossHit 0.32s steps(2, end); }
@keyframes bossHit {
  0%, 100% { filter: none; transform: translateX(0); }
  25%      { filter: invert(1) hue-rotate(180deg) brightness(2); transform: translateX(-4px); }
  75%      { filter: invert(1) hue-rotate(180deg) brightness(2); transform: translateX(4px); }
}
.boss-taunt {
  font-family: 'VT323', monospace;
  font-size: clamp(16px, 4vw, 20px);
  color: var(--white);
  margin: 4px 0 0;
  text-align: center;
  max-width: 540px;
  line-height: 1.3;
}
.boss-taunt.boss-hurt { color: var(--amber); animation: scorePop 380ms ease-out; }
.boss-taunt.boss-victory {
  color: var(--amber);
  text-shadow: 0 0 8px var(--amber);
  font-size: 20px;
}
.boss-instructions {
  font-family: 'VT323', monospace;
  font-size: 22px;
  color: var(--green);
  margin: 0 0 4px;
  letter-spacing: 0.5px;
}
/* ---- Guestbook live count ---- */
.guestbook-live {
  font-family: 'VT323', monospace;
  font-size: 19px;
  color: var(--muted);
  margin: 0 0 14px;
  letter-spacing: 0.5px;
  padding-left: 12px;
  border-left: 3px solid var(--green-dark);
}
.guestbook-live strong { color: var(--green); }
.boss-attack {
  position: relative;
}
.boss-attack .atk-tag {
  grid-area: tag;
  display: flex;
  align-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  background: var(--red);
  color: #fff;
  padding: 5px var(--cpx, 14px);
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 #000;
  margin: calc(-1 * var(--cpt, 16px)) calc(-1 * var(--cpx, 14px)) 10px;
  pointer-events: none;
}
.boss-attack[data-attack="github"] .atk-tag { background: var(--cyan); color: #001a1a; }
.boss-attack[data-attack="coffee"] .atk-tag { background: var(--magenta); color: #1a001a; }
.boss-attack[data-attack="share"] .atk-tag { background: var(--amber); color: #1a0e00; }
.boss-attack .atk-dmg {
  display: block;
  margin-top: 4px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--red);
  text-shadow: 0 0 4px var(--red);
}
.boss-attack[data-attack="github"] .atk-dmg { color: var(--cyan); text-shadow: 0 0 4px var(--cyan); }
.boss-attack[data-attack="coffee"] .atk-dmg { color: var(--magenta); text-shadow: 0 0 4px var(--magenta); }
.boss-attack[data-attack="share"] .atk-dmg { color: var(--amber); text-shadow: 0 0 4px var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .boss-emoji,
  .boss-warning-blink,
  .boss-hp-fill.crit,
  .hud-quests.quest-cleared { animation: none !important; }
  .boss-arena.shake,
  .boss-sprite.hit,
  .quest-log { transition: none !important; }
  .quest-log { transform: none; }
}
@media (max-width: 480px) {
  .boss-emoji { font-size: 58px; }
  .boss-name { font-size: 10px; letter-spacing: 0.03em; }
  .boss-warning { font-size: 9px; }
  .boss-taunt { font-size: 16px; }
  .boss-hpbar { font-size: 9px; }
  .boss-hp-num { font-size: 8px; min-width: 50px; }
  .boss-instructions { font-size: 17px; }
  .quest-log { top: auto; bottom: 12px; right: 8px; left: 8px; width: auto; }
}

/* ===========================================================
   A11y — site-wide focus ring + reduced-motion safety net
   =========================================================== */
:focus-visible {
  outline: 2px dashed var(--amber);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Focus-ring overrides — amber indicator for keyboard nav.
   Same specificity [0,1,1] as per-component outline:none rules;
   source-order wins since these come last.
   ============================================================ */
.hud-press-start:focus-visible {
  outline: 2px dashed var(--amber);
  outline-offset: 3px;
}
.hud-music:focus-visible,
.hud-sfx:focus-visible,
.hud-crt:focus-visible,
.hud-burger:focus-visible {
  box-shadow: inset 0 0 6px rgba(57,255,20,0.25), 0 0 8px rgba(57,255,20,0.25), 0 0 0 2px var(--amber);
}
.share-link:focus-visible {
  outline: 2px dashed var(--amber);
  outline-offset: 2px;
}
.hmm-close:focus-visible,
.hmm-item:focus-visible {
  outline: 2px dashed var(--amber);
  outline-offset: -2px;
}
.share-option:focus-visible,
.roulette-close:focus-visible {
  outline: 2px dashed var(--amber);
  outline-offset: -2px;
}
@media (max-width: 480px) {
  .visitor-counter { font-size: 10px; letter-spacing: 0.5px; }
}

/* ====================================================
   Mobile HUD overrides — end of file so cascade wins
   ==================================================== */
@media (max-width: 768px) {
  .hud-credit { display: none; }
  .hud-achv   { display: none; }
  .hud-quests { display: none; }
}