/* Retro Mode — pixel-art chrome skin for the homepage.
   Scoped entirely under html.retro-mode so it's inert until the toggle is clicked.
   Keeps the site's own accent colors; only restyles typography/borders/shadows. */

.retro-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: var(--accent, #bdf128);
  color: #08090b;
  border: 1px solid var(--accent, #bdf128);
  border-radius: 0;
  font: 700 11px/1 'Inter', Arial, sans-serif;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(189, 241, 40, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.retro-toggle:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(189, 241, 40, 0.35); }
.retro-toggle:active { transform: translateY(0); }
.retro-toggle-icon { font-size: 14px; line-height: 1; }

html.retro-mode .retro-toggle {
  background: #08090b;
  color: var(--accent, #bdf128);
  border-color: var(--accent, #bdf128);
  box-shadow: 3px 3px 0 var(--accent, #bdf128) !important;
}
html.retro-mode .retro-toggle:hover { transform: translate(-2px, -2px) !important; box-shadow: 5px 5px 0 var(--accent, #bdf128) !important; }
html.retro-mode .retro-toggle:active { transform: translate(1px, 1px) !important; box-shadow: 2px 2px 0 var(--accent, #bdf128) !important; }

@media (max-width: 560px) {
  .retro-toggle { padding: 9px 10px; }
  .retro-toggle-label { display: none; }
}

/* Secondary retro controls (music mute + play) live in their own floating
   cluster instead of the main nav row — the nav already has a lot in it
   (brand, 6 links, 2 social pills, MENU on mobile), and cramming more pills
   in there caused real clipping: on phones body's overflow-x:hidden silently
   hid the hamburger/social pills, and even on desktop it squeezed RETRO MODE
   onto two lines. Only the primary toggle stays in the nav. */
.retro-extras {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
html.retro-mode .retro-extras { display: flex; }

.retro-music-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: #08090b;
  color: var(--accent, #bdf128);
  border: 1px solid var(--accent, #bdf128);
  border-radius: 0;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--accent, #bdf128);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.retro-music-toggle:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--accent, #bdf128); }
.retro-music-toggle:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--accent, #bdf128); }
.retro-music-toggle[aria-pressed="false"] {
  color: #555;
  border-color: #555;
  box-shadow: 3px 3px 0 #555;
}
.retro-music-toggle[aria-pressed="false"]:hover { box-shadow: 5px 5px 0 #555; }

.retro-play-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: #08090b;
  color: var(--accent, #bdf128) !important;
  border: 1px solid var(--accent, #bdf128);
  font: 700 12px/1 'Inter', Arial, sans-serif;
  letter-spacing: 1.5px;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--accent, #bdf128);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.retro-play-link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--accent, #bdf128);
}

.retro-flash {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: var(--accent, #bdf128);
  opacity: 0;
  pointer-events: none;
}
@keyframes retroFlash {
  0% { opacity: 0; }
  20% { opacity: 0.85; }
  100% { opacity: 0; }
}
.retro-flash.is-flashing { animation: retroFlash 0.4s steps(2, end); }

/* ================= Retro skin — active only when html.retro-mode ================= */

html.retro-mode * {
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

html.retro-mode body {
  font-family: 'VT323', monospace !important;
  font-size: 19px;
}

html.retro-mode body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.18) 0px,
    rgba(0, 0, 0, 0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}

html.retro-mode .noise { opacity: 0.08; }

/* Pixel display font, everywhere a heading/label currently uses Barlow Condensed */
html.retro-mode h1,
html.retro-mode h2,
html.retro-mode h3,
html.retro-mode .brand,
html.retro-mode .section-kicker,
html.retro-mode .eyebrow,
html.retro-mode .btn,
html.retro-mode .nav nav a,
html.retro-mode .nav-live,
html.retro-mode .nav-toggle,
html.retro-mode .retro-toggle-label,
html.retro-mode .retro-play-link,
html.retro-mode .gallery-filter,
html.retro-mode .gallery-filters a,
html.retro-mode .hero-stamp,
html.retro-mode .stats strong,
html.retro-mode .days span,
html.retro-mode .game-meta strong,
html.retro-mode .platform h3,
html.retro-mode .platform-top b,
html.retro-mode .live-left strong {
  font-family: 'Press Start 2P', 'Barlow Condensed', sans-serif !important;
  letter-spacing: 0 !important;
}

/* Big display headings need a much smaller pixel-font size or they blow out the layout */
html.retro-mode .hero h1 {
  font-size: clamp(28px, 7vw, 56px) !important;
  line-height: 1.5 !important;
}
html.retro-mode .intro h2,
html.retro-mode .story-intro h2,
html.retro-mode .schedule h2,
html.retro-mode .section-head h2,
html.retro-mode .editorial-copy h2,
html.retro-mode .gallery-header h2,
html.retro-mode .featured-copy h2,
html.retro-mode .final-cta h2,
html.retro-mode .contact-card h2,
html.retro-mode .indie-dev-card h2,
html.retro-mode .beta-card h2 {
  font-size: clamp(20px, 5vw, 34px) !important;
  line-height: 1.5 !important;
}
html.retro-mode .story-card h3,
html.retro-mode .editorial-panel strong {
  font-size: 16px !important;
  line-height: 1.5 !important;
}
html.retro-mode .game-meta strong {
  font-size: 15px !important;
  line-height: 1.6 !important;
}
html.retro-mode .platform h3 {
  font-size: 22px !important;
  line-height: 1.5 !important;
}
html.retro-mode .hero-stamp {
  font-size: 15px !important;
}
html.retro-mode .stats strong {
  font-size: 20px !important;
}
html.retro-mode .days span {
  font-size: 15px !important;
}

/* Flatten every panel/card/control into hard pixel-game chrome: solid border, hard offset shadow, no gradients */
html.retro-mode .btn,
html.retro-mode .nav-live,
html.retro-mode .gallery-filter,
html.retro-mode .gallery-filters a,
html.retro-mode .story-card,
html.retro-mode .editorial-panel,
html.retro-mode .game-card,
html.retro-mode .platform,
html.retro-mode .archive-preview-card,
html.retro-mode .feature-card,
html.retro-mode .gallery-card,
html.retro-mode .featured-visual,
html.retro-mode .contact-form input,
html.retro-mode .contact-form textarea,
html.retro-mode .contact-form select,
html.retro-mode .lightbox-panel,
html.retro-mode .beta-card,
html.retro-mode .contact-card,
html.retro-mode .indie-dev-card,
html.retro-mode .hero-stamp,
html.retro-mode .live-band {
  border: 3px solid #000 !important;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6) !important;
  background-image: none !important;
  transition: none !important;
}

html.retro-mode .btn.primary { background: var(--accent) !important; color: #08090b !important; }
html.retro-mode .btn.ghost { background: #08090b !important; }
html.retro-mode .btn:before { content: none !important; }

html.retro-mode .btn:hover,
html.retro-mode .game-card:hover,
html.retro-mode .editorial-panel:hover,
html.retro-mode .platform:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.6) !important;
}
html.retro-mode .btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6) !important;
}

html.retro-mode .contact-form input:focus,
html.retro-mode .contact-form textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6) !important;
}