:root {
  --bg:           #06001e;
  --bg2:          #0c0033;
  --cyan:         #4dd0ff;
  --cyan-dim:     #1a6688;
  --cyan-glow:    rgba(77,208,255,0.18);
  --purple:       #8833ff;
  --red:          #ff2200;
  --red-glow:     rgba(255,34,0,0.14);
  --green:        #00ff88;
  --gold:         #ffb700;
  --gold-bright:  #ffd766;
  --gold-dim:     #6b4a00;
  --gold-glow:    rgba(255,183,0,0.16);
  --light-blue:      #8ad8ff;
  --light-blue-glow: rgba(138,216,255,0.25);
  --discord:      #5865f2;
  --text:         #b8c8ff;
  --text-dim:     #556699;
  --border:       #2a0088;
  --border-bright:#5500cc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  background-image: url('pattern-test-1-200.png');
  background-repeat: repeat;
  color: var(--text);
  font-family: 'VT323', monospace;
  font-size: 18px;
  cursor: url('custom-cursor.png') 0 0, auto;
  overflow-x: hidden;
  animation: bg-scroll 18s linear infinite;
}

img { image-rendering: pixelated; }

@keyframes bg-scroll {
  from { background-position: 0 0; }
  to   { background-position: 384px 384px; }
}

/* SPLASH SCREEN */
#splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: var(--bg);
  background-image: url('pattern-test-1-200.png');
  background-repeat: repeat;
  animation: bg-scroll 18s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}

#splash-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.13) 2px,
    rgba(0,0,0,0.13) 4px
  );
}

.splash-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 36px 28px;
  border: 2px solid var(--light-blue);
  background: rgba(6,0,30,0.92);
  box-shadow:
    0 0 0 1px var(--border-bright),
    0 0 30px var(--light-blue-glow),
    inset 0 0 40px rgba(0,0,0,0.6);
  max-width: 500px;
  width: 90%;
  text-align: center;
  animation: splash-pulse 4s ease-in-out infinite;
}

@keyframes splash-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px var(--border-bright),
      0 0 30px var(--light-blue-glow),
      inset 0 0 40px rgba(0,0,0,0.6);
  }
  50% {
    box-shadow: 0 0 0 1px var(--border-bright),
      0 0 55px rgba(138,216,255,0.45),
      0 0 90px rgba(138,216,255,0.1),
      inset 0 0 40px rgba(0,0,0,0.6);
  }
}

/* Splash corner characters */
.sc {
  position: absolute;
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--cyan);
  opacity: 0.55;
  line-height: 1;
  pointer-events: none;
}
.sc-tl { top: 5px;  left: 7px; }
.sc-tr { top: 5px;  right: 7px; }
.sc-bl { bottom: 5px; left: 7px; }
.sc-br { bottom: 5px; right: 7px; }

/* Splash boot info */
.splash-boot {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--text-dim);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  letter-spacing: 1px;
  margin-bottom: -4px;
}
.splash-boot-sep { color: var(--border-bright); }

/* Splash access footer */
.splash-access {
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: var(--border-bright);
  letter-spacing: 2px;
  margin-top: -6px;
}

.splash-pre {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--text-dim);
  letter-spacing: 2px;
}

.splash-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 32px;
  color: var(--light-blue);
  text-shadow:
    0 0 10px var(--light-blue),
    0 0 30px var(--light-blue-glow),
    0 0 60px rgba(138,216,255,0.15);
  letter-spacing: 8px;
  animation: glitch 5s step-end infinite;
}

.splash-rule {
  width: 80%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--light-blue), transparent);
}

.splash-text {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: var(--text);
  line-height: 1.9;
  letter-spacing: 1px;
}

.splash-emojis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 0;
  padding: 14px 28px;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,34,0,0.38) 0%, rgba(255,34,0,0.1) 50%, transparent 75%);
}

.splash-emoji {
  width: 72px;
  height: 72px;
}

.splash-emoji-gun {
  transform: scaleX(-1);
}

.splash-emoji-devil {
  cursor: url('custom-cursor.png') 0 0, pointer;
}

.splash-emoji-devil:hover {
  animation: devil-shake 0.25s step-end infinite;
}

@keyframes devil-shake {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  20%       { transform: rotate(-12deg) translateX(-3px); }
  40%       { transform: rotate(12deg) translateX(3px); }
  60%       { transform: rotate(-7deg) translateX(-2px); }
  80%       { transform: rotate(7deg) translateX(2px); }
}

/* Splash warning scroll */
.splash-warning-wrap {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(255,34,0,0.35);
  padding-top: 7px;
  margin-top: -4px;
}

.splash-warning {
  font-family: 'Press Start 2P', monospace;
  font-size: 5px;
  color: var(--red);
  letter-spacing: 1px;
  display: block;
}

#splash-enter {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--cyan);
  background: rgba(77,208,255,0.04);
  border: 2px solid var(--cyan);
  padding: 12px 32px;
  cursor: url('custom-cursor.png') 0 0, pointer;
  letter-spacing: 2px;
  transition: all 0.15s;
  margin-top: 4px;
}

#splash-enter:hover {
  background: var(--cyan);
  color: var(--bg);
  box-shadow: 0 0 12px var(--cyan);
  animation: btn-shake 0.25s step-end;
}

@keyframes btn-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-3px); }
  40%       { transform: translateX(3px); }
  60%       { transform: translateX(-2px); }
  80%       { transform: translateX(2px); }
}

.splash-hint {
  font-family: 'Press Start 2P', monospace;
  font-size: 5px;
  color: var(--text-dim);
  letter-spacing: 1px;
  animation: blink 2s step-end infinite;
}

/* LOADING SCREEN */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: #000323;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 1;
  transition: opacity 0.6s ease;
}

#loading-icon {
  width: 192px;
  height: 192px;
  image-rendering: pixelated;
}

#loading-text-gif {
  width: 200px;
  image-rendering: pixelated;
}

#loading-status {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--cyan);
  letter-spacing: 2px;
  text-align: center;
  min-width: 320px;
  text-shadow: 0 0 6px var(--cyan);
}

/* SCANLINES */
#scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.11) 2px,
    rgba(0,0,0,0.11) 4px
  );
}

/* TOP MARQUEE */
.top-bar {
  background: var(--bg2);
  border-bottom: 2px solid var(--cyan);
  color: var(--cyan);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 7px 0;
  box-shadow: 0 2px 12px var(--cyan-glow);
  position: relative;
  z-index: 200;
}

/* HEADER */
#site-header {
  background: var(--bg2);
  border-bottom: 3px solid var(--border-bright);
  padding: 11px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 18px rgba(85,0,204,0.4);
}

.header-logo { display: flex; align-items: center; gap: 10px; }
.header-icon { height: 38px; }
.header-text-logo { height: 24px; }

.header-nav { display: flex; gap: 3px; flex-wrap: wrap; }

.header-nav a {
  color: var(--cyan);
  text-decoration: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 5px 8px;
  border: 1px solid var(--cyan-dim);
  transition: all 0.12s;
  letter-spacing: 0.5px;
}

.header-nav a:hover {
  background: var(--cyan);
  color: var(--bg);
  box-shadow: 0 0 10px var(--cyan);
  border-color: var(--cyan);
}

/* HERO */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 52px 24px 44px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('space-background.png');
  background-size: cover;
  background-position: center;
  opacity: 0.72;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(6,0,30,0.3) 0%, rgba(6,0,30,0.88) 100%),
    linear-gradient(to right, rgba(6,0,30,0.5) 0%, transparent 22%, transparent 78%, rgba(6,0,30,0.5) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 600px;
  width: 100%;
}

.hero-logo-text {
  width: 408px;
  max-width: 90%;
}

.hero-tagline {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--cyan);
  letter-spacing: 1px;
  text-shadow: 0 0 10px var(--cyan);
}

.hero-sub {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: var(--purple);
  letter-spacing: 2px;
  text-shadow: 0 0 8px var(--purple);
}

.hero-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.hero-btn {
  color: var(--cyan);
  text-decoration: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 7px 13px;
  border: 2px solid var(--cyan);
  background: rgba(77,208,255,0.04);
  transition: all 0.12s;
  letter-spacing: 0.5px;
}

.hero-btn:hover {
  background: var(--cyan);
  color: var(--bg);
  box-shadow: 0 0 12px var(--cyan);
}

.hero-btn-red {
  color: var(--red);
  border-color: var(--red);
  background: var(--red-glow);
}
.hero-btn-red:hover {
  background: var(--red);
  color: white;
  box-shadow: 0 0 12px var(--red);
}

.hero-btn-discord {
  color: var(--discord);
  border-color: var(--discord);
  background: rgba(88,101,242,0.06);
}
.hero-btn-discord:hover {
  background: var(--discord);
  color: white;
  box-shadow: 0 0 12px rgba(88,101,242,0.5);
}

/* The ask, above the fold. It sits below the three navigation buttons rather
   than among them: those send you somewhere, this one asks for something, and
   flattening that into a fourth identical button would hide the difference.
   Gold ties it to the pact section it scrolls to. */
.hero-support {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 10px 20px;
  text-decoration: none;
  border: 2px solid var(--gold);
  background: rgba(255,183,0,0.07);
  box-shadow: 0 0 16px var(--gold-glow);
  transition: all 0.12s;
}
.hero-support:hover {
  background: var(--gold);
  box-shadow: 0 0 22px rgba(255,183,0,0.5);
}
.hero-support:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.hero-support-main {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--gold-bright);
  letter-spacing: 1px;
  text-shadow: 0 0 8px var(--gold-glow);
}
.hero-support:hover .hero-support-main { color: var(--bg); text-shadow: none; }

.hero-support-sub {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 1px;
}
.hero-support:hover .hero-support-sub { color: var(--bg); }

.hero-corner {
  position: absolute;
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: var(--text-dim);
  z-index: 2;
}
.hero-corner-tl { top: 10px; left: 14px; }
.hero-corner-tr { top: 10px; right: 14px; }
.hero-corner-bl { bottom: 10px; left: 14px; }
.hero-corner-br { bottom: 10px; right: 14px; }

/* SYS DIVIDER */
.sys-divider {
  background: var(--bg2);
  border-top: 2px solid var(--border-bright);
  border-bottom: 2px solid var(--border-bright);
  text-align: center;
  padding: 6px 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--border-bright);
  letter-spacing: 3px;
  text-shadow: 0 0 5px var(--purple);
  overflow: hidden;
}

/* STATUS STRIP */
.status-strip {
  background: rgba(12,0,51,0.92);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 16px;
  font-family: 'VT323', monospace;
  font-size: 15px;
}

.status-strip .sep { color: var(--border-bright); }
.strip-hint { color: var(--text-dim); font-size: 13px; }

.status-online {
  color: var(--green);
  text-shadow: 0 0 6px var(--green);
  animation: blink 1.8s step-end infinite;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
}

.strip-link {
  color: var(--cyan);
  text-decoration: none;
  transition: color 0.12s;
}
.strip-link:hover { color: white; text-shadow: 0 0 5px var(--cyan); }

/* PAGE WRAP */
.page-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* PX DIVIDER */
.px-divider {
  text-align: center;
  padding: 10px 0;
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--border);
  letter-spacing: 1px;
  user-select: none;
}
.px-divider::before {
  content: '// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ //';
  word-break: break-all;
}

/* CONTENT SECTIONS */
.c-section {
  background: rgba(12,0,51,0.68);
  border: 2px solid var(--border-bright);
  padding: 20px;
  position: relative;
}
.c-section-green { border-color: #003322; box-shadow: 0 0 14px rgba(0,255,136,0.06); }
.c-section-red   { border-color: #440000; box-shadow: 0 0 14px var(--red-glow); }
.c-section-purple{ border-color: #330066; box-shadow: 0 0 14px rgba(136,51,255,0.1); }
.c-section-cyan  { border-color: var(--cyan-dim); box-shadow: 0 0 14px var(--cyan-glow); }
/* Gold is used by exactly one section — the pact. Nothing else on the page
   claims it, so the money lives somewhere visually unmistakable, and it stops
   SUPPORT from colliding with the red PACKS section directly above it. */
.c-section-gold  { border-color: var(--gold-dim); box-shadow: 0 0 14px var(--gold-glow); }

/* FAKE WINDOW CONTROLS (decorative only) */
.win-btns {
  display: flex;
  gap: 3px;
  margin-left: auto;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
}

.win-btn {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(184,200,255,0.35);
  background: rgba(6,0,30,0.55);
  color: var(--text);
  font-family: 'VT323', monospace;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.12);
}

.win-btn-x {
  color: #ff6644;
}

.win-btns-splash {
  position: absolute;
  top: 5px;
  right: 26px;
  z-index: 3;
}

/* SECTION TITLE — old-school window title bar */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: white;
  margin: -20px -20px 16px;
  padding: 6px 8px;
  background: linear-gradient(to right, var(--border-bright), rgba(85,0,204,0.18));
  border-bottom: 2px solid var(--border-bright);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
  animation: glitch 6s step-end infinite;
}

.c-section-green .section-title {
  background: linear-gradient(to right, #004433, rgba(0,68,51,0.15));
  border-bottom-color: #003322;
  color: var(--green);
}

.c-section-cyan .section-title {
  background: linear-gradient(to right, var(--cyan-dim), rgba(26,102,136,0.15));
  border-bottom-color: var(--cyan-dim);
  color: white;
}

.c-section-red .section-title {
  background: linear-gradient(to right, #550000, rgba(85,0,0,0.15));
  border-bottom-color: #440000;
  color: #ff6644;
}

.c-section-purple .section-title {
  background: linear-gradient(to right, #440088, rgba(68,0,136,0.18));
  border-bottom-color: #330066;
  color: #cfa8ff;
}

.c-section-gold .section-title {
  background: linear-gradient(to right, var(--gold-dim), rgba(107,74,0,0.15));
  border-bottom-color: var(--gold-dim);
  color: var(--gold-bright);
}

.title-emoji {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

@keyframes glitch {
  0%, 87%, 100% { text-shadow: 0 0 8px var(--cyan); }
  89%  { text-shadow:  3px 0 var(--red),   -3px 0 var(--cyan); }
  91%  { text-shadow: -2px 0 var(--purple),  2px 0 var(--cyan); }
  93%  { text-shadow:  1px 0 var(--red),    0 0 8px var(--cyan); }
  95%  { text-shadow:  0 0 8px var(--cyan); }
}

/* NEW BADGE */
.new-badge {
  display: inline-block;
  background: var(--red);
  color: white;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  padding: 3px 6px;
  animation: blink 0.7s step-end infinite;
  margin-left: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* CREW WIDGET */
.crew-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--bg2);
  border: 1px solid var(--border-bright);
  padding: 10px 22px;
  margin-bottom: 16px;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.6),
    0 2px 0 rgba(255,255,255,0.03),
    0 0 14px rgba(85,0,204,0.12);
  transform: translateY(-2px);
}

.crew-member {
  display: flex;
  align-items: center;
  gap: 10px;
}

.crew-portrait {
  width: 38px;
  height: 38px;
}

.crew-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.crew-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--cyan);
  text-shadow: 0 0 5px var(--cyan);
  letter-spacing: 1px;
}

.crew-role {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 1px;
}

.crew-role-sub {
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

.crew-sep {
  color: var(--border-bright);
  font-family: 'VT323', monospace;
  font-size: 22px;
  user-select: none;
}

/* ABOUT */
.about-inner {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.about-avatar {
  width: 186px;
  flex-shrink: 0;
  border: 2px solid var(--border-bright);
  align-self: flex-start;
}

/* TERMINAL */
.terminal-box {
  flex: 1;
  min-width: 0;
  border: 2px solid var(--green);
  background: rgba(0,0,8,0.96);
  box-shadow: 0 0 10px rgba(0,255,136,0.08), inset 0 0 28px rgba(0,0,0,0.7);
  position: relative;
  overflow: hidden;
}

.terminal-box::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0,255,136,0.2);
  top: 0;
  animation: terminal-scan 3s linear infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes terminal-scan {
  from { top: 0; }
  to   { top: 100%; }
}

.terminal-topbar {
  background: rgba(0,255,136,0.07);
  border-bottom: 1px solid rgba(0,255,136,0.3);
  color: var(--green);
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.terminal-body {
  padding: 13px;
  line-height: 1.9;
  font-size: 17px;
}

.prompt { color: var(--green); margin-right: 6px; }

/* UPSCALED IMAGES */
.img-loading-text {
  width: 200px;
  vertical-align: middle;
}

.img-loading-bar { width: 168px; }

/* SOULS BOX */
.souls-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 16px 0;
}

.souls-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--border-bright);
  background: var(--bg2);
  padding: 6px 18px;
  gap: 2px;
  box-shadow: 0 0 8px rgba(85,0,204,0.2);
}

.souls-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 5px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

.souls-number {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--purple);
  text-shadow: 0 0 8px var(--purple);
  letter-spacing: 2px;
  white-space: nowrap;
  display: inline-block;
  min-width: 7ch;
  text-align: center;
}

/* WAVE-TEST — smaller in contact */
.wave-small {
  width: 200px;
  max-width: 100%;
  animation: screen-flicker 8s step-end infinite;
}

@keyframes screen-flicker {
  0%, 97%, 100% { opacity: 1; }
  98%            { opacity: 0.7; }
  99%            { opacity: 0.9; }
}

/* CARDS */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.cards-grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.card {
  border: 2px solid var(--border-bright);
  background: rgba(6,0,30,0.88);
  transition: border-color 0.12s, transform 0.12s;
  display: flex;
  flex-direction: column;
}
.card:hover { border-color: var(--cyan-dim); transform: translateY(-2px); }

.card-header {
  background: var(--border-bright);
  color: var(--bg);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.card-body {
  padding: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 1;
}



.card-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--cyan);
  text-shadow: 0 0 5px var(--cyan);
}

.card-desc {
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.4;
  text-align: center;
}

.card-title-sm {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--cyan);
  text-shadow: 0 0 5px var(--cyan);
}

.card-emoji-sm {
  width: 36px;
  height: 36px;
}

.card-tool { border-color: var(--cyan-dim); }
.card-tool:hover { border-color: var(--cyan); }
.card-tool .card-header { background: var(--cyan-dim); color: white; }


.card-btn {
  color: var(--red);
  text-decoration: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 5px 10px;
  border: 1px solid var(--red);
  background: var(--red-glow);
  transition: all 0.12s;
  display: inline-block;
  margin-top: auto;
}
.card-btn:hover { background: var(--red); color: white; }


/* CYBER DECK */
.cyberdeck-inner {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.cyberdeck-info {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cyberdeck-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
  letter-spacing: 1px;
  line-height: 1.6;
  animation: glitch 7s step-end infinite;
}

.cyberdeck-sub {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--text-dim);
  letter-spacing: 2px;
}

.cyberdeck-visual {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cyberdeck-logo {
  width: 96px;
  height: 96px;
}

.cta-btn-cyan {
  background: transparent;
  color: var(--cyan);
  border-color: var(--cyan);
}
.cta-btn-cyan:hover {
  background: var(--cyan);
  color: var(--bg);
  box-shadow: 0 0 14px var(--cyan);
}

/* ITCH PROMO */



.itch-headline {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--red);
  text-shadow: 0 0 5px var(--red);
  animation: glitch-red 7s step-end infinite;
}

@keyframes glitch-red {
  0%, 87%, 100% { text-shadow: 0 0 5px var(--red); }
  89%  { text-shadow:  3px 0 var(--cyan),   -3px 0 var(--red); }
  91%  { text-shadow: -2px 0 var(--purple),  2px 0 var(--red); }
  93%  { text-shadow:  1px 0 var(--cyan),    0 0 5px var(--red); }
  95%  { text-shadow:  0 0 5px var(--red); }
}

.itch-sub {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--text-dim);
}

/* GAMES — live itch.io widgets
   The old cards illustrated each game with an unrelated site gif. These carry
   the real cover art, the real price and itch's own download button, themed to
   the site palette so the embed does not read as a foreign object. */
.game-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.game-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 2px solid var(--green);
  padding-left: 12px;
}

.game-tag {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--green);
  letter-spacing: 1px;
}

.game-meta { display: flex; flex-direction: column; gap: 5px; }
.game-meta .card-desc { text-align: left; }

.itch-embed {
  width: 100%;
  max-width: 552px;
  height: 167px;
  border: 0;
  display: block;
  /* itch serves the widget over https and it is the only third-party frame on
     the page; if it ever fails to load the surrounding copy still stands. */
  background: var(--bg2);
}

/* ASSET PACKS GRID
   Twelve pieces of real animated pixel art is the loudest thing on the page,
   and it is the actual product. So the chrome around each card stays deliberately
   quiet — a border, a name, a price — and the work does the selling. */
.packs-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.packs-intro .small { line-height: 1.5; margin-top: 4px; }

.packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px;
}

.pack {
  display: flex;
  flex-direction: column;
  border: 2px solid #440000;
  background: rgba(6,0,30,0.88);
  text-decoration: none;
  padding-bottom: 10px;
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.pack:hover {
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 0 12px var(--red-glow);
}
.pack:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.pack-art {
  width: 100%;
  /* height:auto is load-bearing. The width/height attributes on the tag are a
     presentational hint (height:250px); with both dimensions resolved the
     aspect-ratio below is ignored and object-fit crops ~30% off every cover —
     which on these is where maciaz's baked-in title text lives. */
  height: auto;
  aspect-ratio: 315 / 250;
  object-fit: cover;
  display: block;
  border-bottom: 2px solid #440000;
  background: var(--bg2);
  /* img is globally pixelated for the 1x sprites; these covers are being
     scaled DOWN from 315px, where nearest-neighbour just aliases the art. */
  image-rendering: auto;
}
.pack:hover .pack-art { border-bottom-color: var(--red); }

.pack-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--cyan);
  text-shadow: 0 0 5px var(--cyan-glow);
  line-height: 1.55;
  padding: 10px 9px 0;
}

.pack-kind {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 1px;
  padding: 4px 9px 0;
}

/* The badge carries real information: which packs you can take for free. */
.pack-price {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: white;
  letter-spacing: 0.5px;
  padding: 9px 9px 0;
  margin-top: auto;
}
.pack-free {
  color: var(--green);
  font-size: 6px;
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(0,255,136,0.35);
}

.cta-btn {
  display: inline-block;
  margin-top: 8px;
  color: white;
  background: var(--red);
  text-decoration: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 9px 15px;
  border: 2px solid var(--red);
  transition: all 0.12s;
  align-self: flex-start;
  letter-spacing: 0.5px;
}
.cta-btn:hover {
  background: transparent;
  color: var(--red);
  box-shadow: 0 0 12px var(--red);
}

/* CONTACT */
.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.contact-body {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  line-height: 1.8;
}

.discord-btn {
  display: inline-block;
  color: var(--discord);
  background: rgba(88,101,242,0.06);
  text-decoration: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 9px 15px;
  border: 2px solid var(--discord);
  transition: all 0.12s;
  letter-spacing: 0.5px;
}
.discord-btn:hover {
  background: var(--discord);
  color: white;
  box-shadow: 0 0 12px rgba(88,101,242,0.5);
}

/* 88x31 BADGES */
.badges-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px 0;
  text-align: center;
}

.badges-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--text-dim);
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.b88 {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 116px;
  height: 42px;
  border: 1px solid var(--cyan-dim);
  background: var(--bg2);
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--cyan);
  text-align: center;
  text-decoration: none;
  line-height: 1.6;
  padding: 4px;
  transition: all 0.1s;
}
.b88:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  background: rgba(77,208,255,0.08);
}
.b88-green   { border-color: #003322; color: var(--green); }
.b88-green:hover { border-color: var(--green); box-shadow: 0 0 6px var(--green); }
.b88-red     { border-color: #440000; color: var(--red); }
.b88-red:hover { border-color: var(--red); box-shadow: 0 0 6px var(--red); }
.b88-purple  { border-color: #330066; color: var(--purple); }
.b88-purple:hover { border-color: var(--purple); box-shadow: 0 0 6px var(--purple); }
.b88-discord { border-color: #3a3f8a; color: var(--discord); }
.b88-discord:hover { border-color: var(--discord); box-shadow: 0 0 6px rgba(88,101,242,0.5); }
.b88-dim     { border-color: var(--border); color: var(--text-dim); }


/* ==========================================================================
   SUPPORT / THE PACT
   ========================================================================== */

/* Hidden by default. support-config.js puts .pact-live on <html> as soon as
   at least one Stripe Payment Link is filled in, which reveals the nav item,
   the status-strip link, the section, the badge and the footer line together.
   Until then the studio advertises nothing it can't deliver — that is what
   makes this whole feature safe to deploy before Stripe is set up.
   Written as :not() rather than a display override so each element keeps its
   own display value (inline-flex badges, grid, etc.) when revealed. */
html:not(.pact-live) .pact-hideable { display: none !important; }

.nav-support {
  color: var(--gold) !important;
  border-color: var(--gold-dim) !important;
}
.nav-support:hover {
  background: var(--gold) !important;
  color: var(--bg) !important;
  box-shadow: 0 0 10px var(--gold) !important;
  border-color: var(--gold) !important;
}

.strip-link-support {
  color: var(--gold);
  text-shadow: 0 0 5px var(--gold-glow);
}
.strip-link-support:hover { color: var(--gold-bright); text-shadow: 0 0 6px var(--gold); }

/* #site-header is sticky, so a nav click to #support would otherwise park the
   section title underneath it. This is the desktop-sized fallback only —
   support-config.js overwrites it with the header's measured height, which is
   what makes it correct once the nav wraps on narrow screens. Scoped to this
   section; the site's other anchors have the same issue, but that is existing
   behaviour and not mine to change. */
#support { scroll-margin-top: 78px; }

.pact-intro {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px;
}

.pact-headline {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: var(--gold);
  text-shadow: 0 0 6px var(--gold-glow);
  letter-spacing: 1px;
  animation: glitch-gold 8s step-end infinite;
}

@keyframes glitch-gold {
  0%, 87%, 100% { text-shadow: 0 0 6px var(--gold-glow); }
  89%  { text-shadow:  3px 0 var(--red),   -3px 0 var(--cyan); }
  91%  { text-shadow: -2px 0 var(--purple),  2px 0 var(--gold); }
  93%  { text-shadow:  1px 0 var(--red),    0 0 6px var(--gold); }
  95%  { text-shadow:  0 0 6px var(--gold-glow); }
}

/* The line that frames the whole section as a contract terminal: the tiers
   below are its clauses, the buttons are the signature. */
.pact-await {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--green);
  letter-spacing: 2px;
}

.pact-sub {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--text);
  letter-spacing: 1px;
  margin-bottom: 4px;
}

/* Tier cards ------------------------------------------------------------- */
/* 204px, not the 196px the other card grids use: the clause lines are nowrap
   and 171px wide, so a third column may only form once each card can hold them
   (204 - 28px padding = 176px). Below that the grid drops to two and nothing
   gets silently clipped by the overflow guard on .pact-lines. */
.pact-grid { grid-template-columns: repeat(auto-fill, minmax(204px, 1fr)); }

.card-pact { border-color: var(--gold-dim); }
.card-pact:hover { border-color: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }
.card-pact .card-header { background: var(--gold-dim); color: var(--gold-bright); }

.card-pact .card-body { gap: 6px; }

.card-pact-pick {
  border-color: var(--gold);
  box-shadow: 0 0 14px var(--gold-glow);
}
.card-pact-pick .card-header { background: var(--gold); color: var(--bg); }

.pact-pick-tag {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: var(--bg);
  background: rgba(6,0,30,0.15);
  border: 1px solid rgba(6,0,30,0.55);
  padding: 3px 5px;
  margin-left: auto;
  letter-spacing: 1px;
  animation: blink 1.6s step-end infinite;
  flex-shrink: 0;
}

.pact-price {
  font-family: 'Press Start 2P', monospace;
  font-size: 20px;
  color: var(--gold-bright);
  text-shadow: 0 0 10px var(--gold-glow);
  letter-spacing: 1px;
  line-height: 1.4;
}

.pact-per {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--text-dim);
  text-shadow: none;
  letter-spacing: 1px;
  margin-left: 3px;
}

/* Contract clauses. Same dot-leader idiom as the ABOUT terminal
   (> STUDIO........ DEVILMAYPLAY) rather than a bulleted feature list —
   and the inherited line carries the tier escalation structurally. */
.pact-lines {
  text-align: left;
  width: 100%;
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--text);
  line-height: 1.75;
  letter-spacing: 0.5px;
  margin: 4px 0 10px;
  padding-top: 8px;
  border-top: 1px solid var(--gold-dim);
  white-space: nowrap;
  overflow: hidden;
}

.pact-d       { color: var(--gold-dim); }
.pact-yes     { color: var(--gold); }
.pact-inherit { color: var(--text-dim); }

.card-btn-pact {
  color: white;
  background: var(--red);
  border-color: var(--red);
  letter-spacing: 0.5px;
  padding: 8px 10px;
  text-align: center;
  width: 100%;
}
.card-btn-pact:hover {
  background: transparent;
  color: var(--red);
  box-shadow: 0 0 12px var(--red);
}

/* Yearly + custom -------------------------------------------------------- */
.pact-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

/* Secondary to the red SIGN buttons: gold keeps them in the section's family
   while the filled red stays the one obvious primary action. */
.pact-alt-btn {
  color: var(--gold);
  text-decoration: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 9px 14px;
  border: 1px solid var(--gold-dim);
  background: rgba(255,183,0,0.04);
  letter-spacing: 0.5px;
  transition: all 0.12s;
  cursor: url('custom-cursor.png') 0 0, pointer;
}
.pact-alt-btn:hover {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
}

/* Trust block ------------------------------------------------------------ */
.pact-trust {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  line-height: 1.5;
}

.pact-trust-line {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--text);
  letter-spacing: 1px;
  line-height: 2;
}
.pact-trust .sep { color: var(--border-bright); }

.pact-manage {
  margin-top: 4px;
  color: var(--text-dim);
  text-decoration: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  transition: all 0.12s;
  cursor: url('custom-cursor.png') 0 0, pointer;
}
.pact-manage:hover {
  color: var(--cyan);
  border-color: var(--cyan-dim);
  box-shadow: 0 0 8px var(--cyan-glow);
}

/* This is the one part of the page that takes money, so it gets a visible
   keyboard focus ring even though the rest of the site relies on the UA
   default. Scoped rather than global — the site's own styling is left alone. */
.card-btn-pact:focus-visible,
.pact-alt-btn:focus-visible,
.pact-manage:focus-visible,
.nav-support:focus-visible,
.strip-link-support:focus-visible,
.b88-support:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* Blink and glitch are the site's house style, but the pact section stacks
   several of them next to a payment decision. Scoped to what this feature
   added; the rest of the page keeps the animation the studio chose. */
@media (prefers-reduced-motion: reduce) {
  .pact-headline,
  .pact-pick-tag,
  .pact-await .blink-cursor,
  .b88-support,
  .pact-offline {
    animation: none;
  }
}

/* Not-yet-configured state — set by support-config.js.
   Keeps unconfigured buttons visibly inert instead of dead-linking. */
.pact-offline {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(1);
  animation: blink 2.4s step-end infinite;
}

.footer-support-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px dotted var(--gold-dim);
}
.footer-support-link:hover { color: var(--gold-bright); text-shadow: 0 0 5px var(--gold); }

/* Not .about-avatar — that carries align-self:flex-start, which pins it to the
   left of the otherwise centred confirmation column. */
.pact-thanks-mascot { width: 96px; height: 96px; }

.b88-gold { border-color: var(--gold-dim); color: var(--gold); }
.b88-gold:hover { border-color: var(--gold); box-shadow: 0 0 6px var(--gold-glow); }
.b88-support { animation: blink 3.5s step-end infinite; }

/* SEE MORE */
.see-more-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 0 4px;
}

.see-more-btn {
  color: var(--cyan);
  text-decoration: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 9px 20px;
  border: 1px solid var(--cyan-dim);
  background: rgba(77,208,255,0.04);
  letter-spacing: 1px;
  transition: all 0.12s;
}

.see-more-btn:hover {
  background: var(--cyan);
  color: var(--bg);
  border-color: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

/* FOOTER */
#site-footer {
  background: var(--bg2);
  border-top: 3px solid var(--border-bright);
  padding: 26px 24px;
  text-align: center;
  margin-top: 24px;
  box-shadow: 0 -4px 18px rgba(85,0,204,0.28);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  max-width: 760px;
  margin: 0 auto;
}

.footer-mascot {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
}

.footer-logo { height: 20px; }

.footer-divider {
  width: 280px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-bright), transparent);
  margin: 5px 0;
}

/* UTILITIES */
.small  { font-size: 14px; }
.dim    { color: var(--text-dim); }
.cyan   { color: var(--cyan); text-shadow: 0 0 5px var(--cyan); }
.green  { color: var(--green); }

.blink-text {
  animation: blink 0.9s step-end infinite;
  color: var(--red);
  font-size: 13px;
}
.blink-cursor {
  animation: blink 0.75s step-end infinite;
  color: var(--green);
  font-size: 18px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* SCROLLBAR */
::-webkit-scrollbar       { width: 7px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-bright); }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

::selection { background: var(--purple); color: white; }

/* RESPONSIVE */
@media (max-width: 580px) {
  .about-inner  { flex-direction: column; }
  .about-avatar { width: 100%; max-width: 248px; align-self: center; }
  .crew-widget  { flex-wrap: wrap; gap: 12px; }
  #site-header  { flex-direction: column; align-items: flex-start; }
  .hero-logo-text { width: 90%; }
  .hero-wave    { width: 90%; }
  .section-title { font-size: 8px; }
  .px-divider::before { content: '// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ //'; }
  .pact-grid       { grid-template-columns: 1fr; }
  .pact-headline   { font-size: 11px; }
  .pact-alt        { flex-direction: column; }
  .pact-alt-btn    { text-align: center; }
  .pact-trust-line { font-size: 6px; }
}