/* ═══════════════════════════════════════════════════════════
   REALM OF FURY — Retro Arcade Beat'em Up Website
   CRT + Arcade Cabinet Aesthetic
   ═══════════════════════════════════════════════════════════ */

/* ── Reset & Base ──────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Neon palette */
  --neon-cyan: #00f7ff;
  --neon-magenta: #ff00e5;
  --neon-purple: #b829ff;
  --neon-gold: #ffd700;
  --neon-green: #39ff14;
  --neon-red: #ff1744;

  /* Surface */
  --bg-dark: #0a0a12;
  --bg-cabinet: #1a1a2e;
  --bg-screen: #050510;
  --bg-card: rgba(15, 15, 35, 0.85);

  /* Text */
  --text-primary: #e0e0ff;
  --text-dim: #7a7a9a;

  /* Font */
  --font-pixel: 'Press Start 2P', monospace;
  --font-body: 'Segoe UI', system-ui, sans-serif;

  /* Sizes */
  --cabinet-max-w: 960px;
  --cabinet-radius: 32px;
  --screen-radius: 18px;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #000;
  font-family: var(--font-body);
  color: var(--text-primary);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  overflow-x: hidden;
  /* Subtle starfield bg */
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, .15) 50%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, .1) 50%, transparent 100%),
    radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, .12) 50%, transparent 100%),
    radial-gradient(1px 1px at 60% 50%, rgba(255, 255, 255, .08) 50%, transparent 100%);
  background-size: 200px 200px;
}

/* ── ARCADE CABINET ────────────────────────────────────────── */
.cabinet {
  width: 100%;
  max-width: var(--cabinet-max-w);
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Marquee (top of cabinet) ─────────────────────────────── */
.cabinet-top {
  width: 92%;
  display: flex;
  justify-content: center;
}

.cabinet-marquee {
  width: 100%;
  background: linear-gradient(180deg, #2a0845 0%, #1a0530 100%);
  border: 3px solid var(--neon-purple);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 14px 20px 10px;
  text-align: center;
  box-shadow:
    0 0 15px rgba(184, 41, 255, .4),
    inset 0 0 20px rgba(184, 41, 255, .15);
}

.marquee-text {
  font-family: var(--font-pixel);
  font-size: clamp(10px, 2.2vw, 18px);
  color: var(--neon-gold);
  text-shadow:
    0 0 8px rgba(255, 215, 0, .8),
    0 0 20px rgba(255, 215, 0, .4);
  letter-spacing: 4px;
}

/* ── Bezel (screen surround) ──────────────────────────────── */
.cabinet-bezel {
  width: 100%;
  background: linear-gradient(135deg, #2c2c3a 0%, #1a1a28 40%, #0f0f1c 100%);
  border: 3px solid #333;
  border-radius: var(--cabinet-radius);
  padding: 24px;
  box-shadow:
    0 0 40px rgba(0, 0, 0, .8),
    inset 0 2px 0 rgba(255, 255, 255, .05),
    inset 0 -2px 0 rgba(0, 0, 0, .5);
  /* Subtle metallic texture */
  background-image:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, .01) 2px,
      rgba(255, 255, 255, .01) 4px);
}

/* ── CRT SCREEN ────────────────────────────────────────────── */
.crt-screen {
  position: relative;
  width: 100%;
  border-radius: var(--screen-radius);
  overflow: hidden;
  background: var(--bg-screen);
  /* CRT curvature via subtle border-radius + shadow */
  box-shadow:
    inset 0 0 80px rgba(0, 247, 255, .06),
    inset 0 0 20px rgba(0, 0, 0, .8),
    0 0 2px rgba(0, 247, 255, .3);
  /* Bombatura (barrel distortion illusion) */
  border: 2px solid rgba(0, 247, 255, .15);
}

/* Scanline overlay */
.scanline-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(to bottom,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.12) 2px,
      rgba(0, 0, 0, 0.12) 4px);
  mix-blend-mode: multiply;
}

/* CRT edge glow */
.crt-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100;
  border-radius: var(--screen-radius);
  box-shadow:
    inset 0 0 120px rgba(0, 0, 0, .7),
    inset 0 0 40px rgba(0, 0, 0, .4);
  /* Slight vignette for CRT edge darkening */
  background: radial-gradient(ellipse at center,
      transparent 60%,
      rgba(0, 0, 0, .5) 100%);
}

/* CRT flicker animation */
@keyframes crt-flicker {
  0% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  93% {
    opacity: 0.96;
  }

  94% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.crt-screen {
  animation: crt-flicker 8s infinite;
}

/* ── Cabinet bottom (controls decoration) ─────────────────── */
.cabinet-bottom {
  width: 92%;
  background: linear-gradient(180deg, #1a1a28 0%, #0f0f1c 100%);
  border: 3px solid #333;
  border-top: none;
  border-radius: 0 0 20px 20px;
  padding: 20px 30px 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
}

.cabinet-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.joystick {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 40% 35%, #555, #222);
  border-radius: 50%;
  border: 3px solid #444;
  box-shadow:
    0 4px 0 #111,
    0 0 10px rgba(0, 0, 0, .5);
  position: relative;
}

.joystick::after {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 22px;
  background: linear-gradient(180deg, #666, #333);
  border-radius: 7px 7px 4px 4px;
  border: 2px solid #555;
}

.buttons-row {
  display: flex;
  gap: 14px;
}

.arcade-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .15);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, .5),
    inset 0 2px 4px rgba(255, 255, 255, .1);
}

.btn-a {
  background: radial-gradient(circle at 40% 35%, #ff4444, #aa0000);
}

.btn-b {
  background: radial-gradient(circle at 40% 35%, #44aaff, #0044aa);
}

.btn-c {
  background: radial-gradient(circle at 40% 35%, #ffdd44, #aa8800);
}

/* ═══════════════════════════════════════════════════════════
   SHARED SECTION STYLES
   ═══════════════════════════════════════════════════════════ */
.section {
  min-height: 100vh;
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.section-title {
  font-family: var(--font-pixel);
  font-size: clamp(12px, 2.5vw, 20px);
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(0, 247, 255, .6);
  letter-spacing: 3px;
  margin-bottom: 8px;
  text-align: center;
}

.section-subtitle {
  font-family: var(--font-pixel);
  font-size: clamp(7px, 1.2vw, 10px);
  color: var(--text-dim);
  margin-bottom: 40px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 1 — HERO / LANDING (image-based)
   ═══════════════════════════════════════════════════════════ */
.section-hero {
  padding: 0;
  min-height: auto;
  position: relative;
  overflow: visible;
  /* allow box-shadow glow to spread on ALL sides */
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Arcade Cabinet Bezel overlay */
.hero-bezel-overlay {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 10;
}

/* Wraps the inner hero screen so it sits naturally inside the bezel hole */
.hero-content-wrapper {
  position: absolute;
  width: 80%;
  /* Scales the hero to fit inside most of the bezel width */
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 22%
}

/* Full-bleed hero image inside wrapper */
.hero-bg-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── PRESS START interactive overlay ──────────────────────── */
/* Transparent button positioned exactly over the "PRESS START" in the image.
   Position is set dynamically by JS (positionPressStart in script.js)
   based on the known pixel coordinates of the button within hero-bg.jpg. */
.press-start-overlay {
  position: absolute;
  /* Fallback position — JS will override these on load + resize */
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: transparent;
  border: none;
  /* Rounded rectangle matching the PRESS START shape in the image */
  border-radius: 12px;
  cursor: pointer;
  z-index: 3;
  /* Neon glow — 0 offset so light radiates equally from ALL sides */
  box-shadow:
    0 0 15px 6px rgba(160, 80, 255, .5),
    0 0 35px 12px rgba(160, 80, 255, .25),
    inset 0 0 12px rgba(160, 80, 255, .1);
  animation: press-start-pulse 1.8s ease-in-out infinite;
  transition: box-shadow .2s ease, filter .2s ease;
}

.press-start-overlay:hover {
  box-shadow:
    0 0 25px 10px rgba(160, 80, 255, .7),
    0 0 55px 18px rgba(160, 80, 255, .35),
    0 0 90px 24px rgba(160, 80, 255, .15),
    inset 0 0 18px rgba(160, 80, 255, .2);
  filter: brightness(1.3);
}

.press-start-overlay:active {
  box-shadow:
    0 0 10px 4px rgba(160, 80, 255, .5),
    inset 0 0 10px rgba(160, 80, 255, .15);
}

@keyframes press-start-pulse {

  0%,
  100% {
    box-shadow:
      0 0 15px 6px rgba(160, 80, 255, .4),
      0 0 35px 12px rgba(160, 80, 255, .18),
      inset 0 0 12px rgba(160, 80, 255, .08);
  }

  50% {
    box-shadow:
      0 0 25px 10px rgba(160, 80, 255, .65),
      0 0 55px 18px rgba(160, 80, 255, .3),
      0 0 90px 24px rgba(160, 80, 255, .12),
      inset 0 0 18px rgba(160, 80, 255, .15);
  }
}

/* Screen reader only — title is inside the image */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Glitch effect (still used on CTA title) */
.glitch {
  animation: glitch-anim 4s infinite;
}

@keyframes glitch-anim {

  0%,
  95%,
  100% {
    text-shadow: 0 0 10px rgba(255, 215, 0, .6), 0 0 40px rgba(255, 215, 0, .3);
  }

  96% {
    text-shadow: -3px 0 var(--neon-cyan), 3px 0 var(--neon-magenta);
  }

  97% {
    text-shadow: 3px 0 var(--neon-magenta), -3px 0 var(--neon-cyan);
  }

  98% {
    text-shadow: 0 0 10px rgba(255, 215, 0, .6);
  }
}

/* Pulse glow (reused on wishlist button) */
@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 23, 68, .3), 0 6px 0 #700;
  }

  50% {
    box-shadow: 0 0 40px rgba(255, 23, 68, .6), 0 6px 0 #700;
  }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   SEPARATOR
   ═══════════════════════════════════════════════════════════ */
.section-separator {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  padding: 100px 0;
  position: relative;
  z-index: 5;
}

.arcade-divider {
  width: 80%;
  max-width: 800px;
  height: 4px;
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-purple);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.arcade-divider::before,
.arcade-divider::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--neon-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

.arcade-divider::before {
  left: -8px;
}

.arcade-divider::after {
  right: -8px;
}

.divider-icon {
  background: var(--bg-screen);
  padding: 0 16px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.goblin-sprite-container {
  height: 80px;
  /* Modifica se il goblin risulta tagliato in altezza */
  width: 80px;
  /* Modifica se il goblin risulta tagliato in larghezza */
  position: relative;
  filter: drop-shadow(0 0 10px var(--neon-cyan));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: play-goblin-frames 1.2s infinite;
}

@keyframes play-goblin-frames {

  0%,
  33.32% {
    background-image: url('assets/goblin1.png');
  }

  33.33%,
  66.65% {
    background-image: url('assets/goblin2.png');
  }

  66.66%,
  100% {
    background-image: url('assets/goblin3.png');
  }
}

.goblin2-sprite-container {
  height: 80px;
  width: 80px;
  position: relative;
  filter: drop-shadow(0 0 10px var(--neon-cyan));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: play-goblin2-frames 1.6s infinite;
}

@keyframes play-goblin2-frames {

  0%,
  12.49% {
    background-image: url('assets/goblin2/000.png');
  }

  12.5%,
  24.99% {
    background-image: url('assets/goblin2/001.png');
  }

  25%,
  37.49% {
    background-image: url('assets/goblin2/002.png');
  }

  37.5%,
  49.99% {
    background-image: url('assets/goblin2/003.png');
  }

  50%,
  62.49% {
    background-image: url('assets/goblin2/004.png');
  }

  62.5%,
  74.99% {
    background-image: url('assets/goblin2/005.png');
  }

  75%,
  87.49% {
    background-image: url('assets/goblin2/006.png');
  }

  87.5%,
  100% {
    background-image: url('assets/goblin2/007.png');
  }
}

.goblin3-sprite-container {
  height: 80px;
  width: 80px;
  position: relative;
  filter: drop-shadow(0 0 10px var(--neon-cyan));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: play-goblin3-frames 1.6s infinite;
}

@keyframes play-goblin3-frames {

  0%,
  12.49% {
    background-image: url('assets/goblin3/000.png');
  }

  12.5%,
  24.99% {
    background-image: url('assets/goblin3/001.png');
  }

  25%,
  37.49% {
    background-image: url('assets/goblin3/002.png');
  }

  37.5%,
  49.99% {
    background-image: url('assets/goblin3/003.png');
  }

  50%,
  62.49% {
    background-image: url('assets/goblin3/004.png');
  }

  62.5%,
  74.99% {
    background-image: url('assets/goblin3/005.png');
  }

  75%,
  87.49% {
    background-image: url('assets/goblin3/006.png');
  }

  87.5%,
  100% {
    background-image: url('assets/goblin3/007.png');
  }
}

/* ═══════════════════════════════════════════════════════════
   SECTION 2 — CHARACTER SELECT
   ═══════════════════════════════════════════════════════════ */
.section-characters {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0, 247, 255, .06) 0%, transparent 60%),
    var(--bg-screen);
}

.char-selection-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  max-width: 1000px;
}

.char-roster {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 120px;
  flex-shrink: 0;
}

.char-slot {
  width: 100%;
  background: var(--bg-card);
  border: 2px solid rgba(0, 247, 255, .15);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all .25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 100px;
  font-family: inherit;
  color: inherit;
}

.char-slot:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 20px rgba(0, 247, 255, .2);
  transform: translateY(-4px);
}

.char-slot.active {
  border-color: var(--neon-gold);
  box-shadow:
    0 0 20px rgba(255, 215, 0, .3),
    inset 0 0 15px rgba(255, 215, 0, .05);
}

.char-portrait {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
}

.portrait-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(184, 41, 255, .2), rgba(0, 247, 255, .1));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 255, 255, .15);
  border-radius: 8px;
}

.portrait-icon {
  font-size: 28px;
  width: 85%;
  height: 85%;
  object-fit: contain;
  filter: grayscale(0.3);
}

.char-name {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--text-primary);
  text-align: center;
  letter-spacing: 1px;
}

.char-slot.active .char-name {
  color: var(--neon-gold);
  text-shadow: 0 0 6px rgba(255, 215, 0, .5);
}

/* Character Detail Card */
.char-detail {
  flex: 1;
  width: 100%;
  background: var(--bg-card);
  border: 2px solid rgba(0, 247, 255, .15);
  border-radius: 16px;
  padding: 24px;
  box-shadow:
    0 0 30px rgba(0, 0, 0, .5),
    inset 0 0 30px rgba(0, 247, 255, .03);
  animation: fadeIn .4s ease;
}

.char-detail-inner {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.char-detail-art {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  align-self: center;
  position: relative;
}

.char-detail-art img {
  width: 100%;
  height: auto;
  object-fit: contain;
  /* VHS visual grading without saturation boost */
  filter: contrast(1.2) brightness(1.1) hue-rotate(-5deg) blur(0.5px);
  animation: vhs-glitch-img 4s infinite linear;
}

@keyframes vhs-glitch-img {

  0%,
  14%,
  16%,
  49%,
  51%,
  84%,
  86%,
  100% {
    transform: translate(0, 0) skew(0deg);
    filter: contrast(1.2) brightness(1.1) hue-rotate(-5deg) blur(0.5px);
  }

  15% {
    transform: translate(-3px, 1px) skew(1deg);
    filter: drop-shadow(-3px 0 rgba(255, 0, 0, 0.6)) drop-shadow(3px 0 rgba(0, 255, 255, 0.6)) contrast(1.3) brightness(1.2) hue-rotate(-5deg) blur(1px);
  }

  50% {
    transform: translate(3px, -2px) skew(-2deg);
    filter: drop-shadow(3px 0 rgba(255, 0, 0, 0.6)) drop-shadow(-3px 0 rgba(0, 255, 255, 0.6)) contrast(1.4) brightness(1.2) hue-rotate(-5deg) blur(1px);
  }

  85% {
    transform: translate(-2px, 2px) skew(2deg);
    filter: drop-shadow(-3px 0 rgba(255, 0, 0, 0.6)) drop-shadow(3px 0 rgba(0, 255, 255, 0.6)) contrast(1.5) brightness(1.3) hue-rotate(-5deg) blur(2px);
  }
}

/* VHS Tracking band overlay */
.char-detail-art::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.4) 10%,
      rgba(255, 255, 255, 0) 20%);
  animation: vhs-tracking 3s linear infinite;
  mix-blend-mode: overlay;
  z-index: 2;
}

@keyframes vhs-tracking {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(500%);
  }
}

.detail-art-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(184, 41, 255, .15), rgba(0, 247, 255, .08));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255, 255, 255, .1);
  border-radius: 12px;
}

.detail-art-icon {
  font-size: 56px;
  opacity: .5;
}

.char-detail-info {
  flex: 1;
  min-width: 0;
}

.char-detail-name {
  font-family: var(--font-pixel);
  font-size: clamp(20px, 3vw, 26px);
  color: var(--neon-gold);
  text-shadow: 0 0 8px rgba(255, 215, 0, .5);
  margin-bottom: 8px;
}

.char-detail-class {
  font-family: var(--font-pixel);
  font-size: clamp(15px, 2vw, 17px);
  color: var(--neon-purple);
  text-shadow: 0 0 6px rgba(184, 41, 255, .4);
  margin-bottom: 24px;
  letter-spacing: 2px;
}

/* Stat bars */
.char-stats {
  margin-bottom: 16px;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.stat-label {
  font-family: var(--font-pixel);
  font-size: 16px;
  color: var(--text-dim);
  width: 60px;
  text-align: right;
  flex-shrink: 0;
}

.stat-bar {
  flex: 1;
  height: 14px;
  background: rgba(255, 255, 255, .05);
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
}

.stat-fill {
  height: 100%;
  border-radius: 7px;
  transition: width .5s ease;
  position: relative;
}

.stat-fill[data-stat="STR"] {
  background: linear-gradient(90deg, #ff1744, #cc0000);
  box-shadow: 0 0 6px rgba(255, 23, 68, .4);
}

.stat-fill[data-stat="CON"] {
  background: linear-gradient(90deg, #39ff14, #00cc00);
  box-shadow: 0 0 6px rgba(57, 255, 20, .4);
}

.stat-fill[data-stat="AGI"] {
  background: linear-gradient(90deg, #ffd700, #cc9900);
  box-shadow: 0 0 6px rgba(255, 215, 0, .4);
}

.stat-fill[data-stat="INT"] {
  background: linear-gradient(90deg, #448aff, #0044cc);
  box-shadow: 0 0 6px rgba(68, 138, 255, .4);
}

/* Bio */
.char-detail-bio {
  font-size: 20px;
  line-height: 1.7;
  color: var(--text-dim);
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding-top: 16px;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 3 — GAMEPLAY FEATURES
   ═══════════════════════════════════════════════════════════ */
.section-features {
  background:
    radial-gradient(ellipse at 30% 60%, rgba(184, 41, 255, .08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 40%, rgba(255, 23, 68, .06) 0%, transparent 50%),
    var(--bg-screen);
  padding: 80px 24px;
  min-height: auto;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 60px;
}

.features-bezel-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1000px;
}

.features-bezel-overlay {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 10;
  top: 120px;
  /* Aumenta questo valore per abbassare maggiormente la cornice rispetto al contenuto */
}

.features-content-wrapper {
  position: absolute;
  width: 80%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Allow for some padding if the content gets cramped inside the box */
  padding: 40px 0;
}

.joypad-interactive-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 300px;
  width: 35%;
  margin: -13px auto 0 auto;
  position: relative;
  top: -100px;
  /* Spostamento richiesto in alto */
  z-index: 11;
}

.joypad-wrapper {
  position: relative;
  width: 100%;
  cursor: pointer;
  transition: transform 0.1s;
}

.joypad-wrapper:active {
  transform: scale(0.95) translateY(2px);
}

.features-joypad {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.8));
}

.joypad-pulled {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.is-pulled .joypad-base {
  opacity: 0;
}

.is-pulled .joypad-pulled {
  opacity: 1;
}

.joypad-arrow {
  position: absolute;
  right: 60%;
  margin-right: 15px;
  width: 75px;
  height: auto;
  pointer-events: none;
  margin-top: -300px;
  filter: drop-shadow(0 0 10px var(--neon-gold));
}

.blinking-arrow {
  animation: blink-arrow 0.6s infinite alternate ease-in-out;
}

@keyframes blink-arrow {
  0% {
    opacity: 0.3;
    transform: translateX(-10px) rotate(-90deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(-90deg);
  }
}

.features-image-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 0 auto;
  padding: 20px 0;
}

.floppy-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.feature-floppy {
  position: relative;
  width: 400px;
  /* Ulteriormente ingranditi da 320px a 400px */
  flex-shrink: 0;
  margin-left: -200px;
  /* Scalata la sovrapposizione in negativo a metà di 400px */
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease, margin 0.3s ease;
  /* Scroll reveal initial state */
  opacity: 0;
  transform: translateY(30px);
  filter: drop-shadow(-5px 0px 15px rgba(0, 0, 0, 0.6));
}

.feature-floppy:first-child {
  margin-left: 0;
}

.feature-floppy.visible {
  opacity: 1;
  transform: translateY(0);
}

.feature-floppy.visible:hover {
  z-index: 10;
  transform: translateY(-20px) scale(1.05);
  /* Si solleva quando ci passi il mouse */
  filter: drop-shadow(0 15px 25px rgba(0, 247, 255, 0.5));
}

.floppy-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  /* Applica angoli arrotondati se utile */
}

.floppy-label {
  position: absolute;
  top: 18%;
  margin-top: -4px;
  left: 28%;
  /* Prima era 26% */
  width: 44%;
  /* Prima era 48%. Testo più stretto. */
  height: 45%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 5px;
  box-sizing: border-box;
  overflow: hidden;
}

.floppy-title {
  font-family: var(--font-pixel), 'Courier New', monospace;
  font-size: clamp(7px, 1.2vw, 13px);
  color: #1a1a1a;
  /* Inchiostro scuro */
  margin-bottom: 6px;
  line-height: 1.2;
}

.floppy-desc {
  font-family: var(--font-pixel), 'Courier New', monospace;
  font-size: clamp(5px, 0.8vw, 9px);
  color: #333;
  line-height: 1.4;
}

/* ── CAROUSEL ─────────────────────────────────────────────── */
.carousel {
  width: 100%;
  max-width: 700px;
  position: relative;
  margin-bottom: 30px;
  margin-top: 60px;
  border-radius: 8px;
}

.carousel-track-container {
  overflow: hidden;
  border-radius: 6px;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.carousel-track {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  height: 100%;
  transition: transform 0.4s ease-in-out;
}

.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
}

.carousel-slide img,
.carousel-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.1) brightness(0.9);
}

.carousel-btn {
  position: absolute;
  top: calc(50% - 20px);
  background: rgba(15, 15, 35, 0.9);
  border: 2px solid var(--neon-purple);
  color: var(--neon-cyan);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 10;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.carousel-btn:hover {
  box-shadow: 0 0 15px var(--neon-purple);
  background: var(--neon-purple);
  color: #fff;
  transform: scale(1.1);
}

.carousel-btn.prev {
  left: -20px;
}

.carousel-btn.next {
  right: -20px;
}

.carousel-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  position: absolute;
  bottom: -24px;
  left: 0;
  right: 0;
}

.carousel-indicator {
  border: 0;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.carousel-indicator:hover {
  background: rgba(255, 255, 255, 0.5);
}

.carousel-indicator.current-slide {
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
  border: 2px solid #fff;
}

/* ═══════════════════════════════════════════════════════════
   SECTION GAMEOVER
   ═══════════════════════════════════════════════════════════ */
.section-gameover {
  background: transparent;
  padding: 40px 24px 100px;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.gameover-box {
  font-family: var(--font-pixel);
  font-size: clamp(24px, 4vw, 42px);
  color: #ffffff;
  background: rgba(15, 15, 35, 0.4);
  border: 4px solid var(--neon-magenta);
  border-radius: 12px;
  padding: 24px 40px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  box-shadow:
    0 0 15px rgba(255, 0, 229, 0.6),
    inset 0 0 15px rgba(255, 0, 229, 0.3);
  text-align: center;
  margin-bottom: 24px;
  letter-spacing: 2px;
  cursor: pointer;
  animation: gameover-pulse 1.5s infinite ease-in-out;
  transition: transform 0.2s ease;
}

.gameover-box:hover {
  transform: scale(1.05);
}

.gameover-box:active {
  transform: scale(0.95);
}

@keyframes gameover-pulse {

  0%,
  100% {
    box-shadow:
      0 0 10px rgba(255, 0, 229, 0.4),
      inset 0 0 10px rgba(255, 0, 229, 0.2);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  }

  50% {
    box-shadow:
      0 0 35px rgba(255, 0, 229, 1),
      inset 0 0 25px rgba(255, 0, 229, 0.8);
    text-shadow: 0 0 15px rgba(255, 255, 255, 1);
  }
}

.gameover-countdown {
  font-family: var(--font-pixel);
  font-size: clamp(60px, 10vw, 100px);
  color: #ffffff;
  /* Thick black pixel outline */
  text-shadow:
    -4px -4px 0 #000,
    4px -4px 0 #000,
    -4px 4px 0 #000,
    4px 4px 0 #000,
    -4px 0 0 #000,
    4px 0 0 #000,
    0 -4px 0 #000,
    0 4px 0 #000;
  text-align: center;
  margin-bottom: 0px;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}

@keyframes shake-light {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }

  25% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(1deg);
  }

  75% {
    transform: translate(1px, -1px) rotate(0deg);
  }

  100% {
    transform: translate(1px, 1px) rotate(0deg);
  }
}

@keyframes shake-medium {
  0% {
    transform: translate(2px, 2px) rotate(0deg);
  }

  25% {
    transform: translate(-2px, -3px) rotate(-2deg);
  }

  50% {
    transform: translate(-2px, 3px) rotate(2deg);
  }

  75% {
    transform: translate(2px, -2px) rotate(0deg);
  }

  100% {
    transform: translate(2px, 2px) rotate(0deg);
  }
}

@keyframes shake-strong {
  0% {
    transform: translate(4px, 4px) rotate(0deg);
  }

  20% {
    transform: translate(-4px, -5px) rotate(-4deg);
  }

  40% {
    transform: translate(-5px, 0px) rotate(4deg);
  }

  60% {
    transform: translate(5px, 5px) rotate(0deg);
  }

  80% {
    transform: translate(-4px, 5px) rotate(-4deg);
  }

  100% {
    transform: translate(4px, 4px) rotate(0deg);
  }
}

.shake-light {
  animation: shake-light 0.3s infinite;
  color: #fffbdf;
}

.shake-medium {
  animation: shake-medium 0.2s infinite;
  color: #ffdf99;
}

.shake-strong {
  animation: shake-strong 0.15s infinite;
  color: #ff5555;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 4 — CTA / STEAM WISHLIST
   ═══════════════════════════════════════════════════════════ */
.section-cta {
  display: none;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(255, 215, 0, .08) 0%, transparent 50%),
    var(--bg-screen);
  text-align: center;
  justify-content: flex-start;
  padding-top: 0px;
  padding-bottom: 150px;
  min-height: auto;
}

.section-cta.show-cta {
  display: flex;
  animation: fadeIn 0.8s ease-out forwards;
}

.cta-content {
  max-width: 500px;
}

.cta-title {
  font-family: var(--font-pixel);
  font-size: clamp(16px, 3.5vw, 32px);
  color: var(--neon-gold);
  text-shadow:
    0 0 10px rgba(255, 215, 0, .6),
    0 0 40px rgba(255, 215, 0, .2);
  margin-bottom: 16px;
}

.cta-sub {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dim);
  margin-bottom: 32px;
}

.btn-wishlist {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-pixel);
  font-size: clamp(10px, 1.8vw, 14px);
  color: #fff;
  background: linear-gradient(180deg, #1b2838 0%, #0e1a2b 100%);
  border: 2px solid rgba(0, 247, 255, .3);
  border-radius: 12px;
  padding: 18px 36px;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow:
    0 0 20px rgba(0, 247, 255, .15),
    0 6px 0 #0a1018;
}

.btn-wishlist:hover {
  border-color: var(--neon-cyan);
  box-shadow:
    0 0 40px rgba(0, 247, 255, .3),
    0 4px 0 #0a1018;
  transform: translateY(2px);
}

.btn-wishlist:active {
  transform: translateY(5px);
  box-shadow: 0 0 15px rgba(0, 247, 255, .15), 0 1px 0 #0a1018;
}

.btn-wishlist-icon {
  font-size: 20px;
}

.btn-wishlist.pulse-glow {
  animation: wishlist-pulse 2.5s ease-in-out infinite;
}

@keyframes wishlist-pulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(0, 247, 255, .15), 0 6px 0 #0a1018;
  }

  50% {
    box-shadow: 0 0 40px rgba(0, 247, 255, .35), 0 6px 0 #0a1018;
  }
}

/* Socials */
.cta-socials {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text-dim);
  font-size: 18px;
  text-decoration: none;
  transition: all .25s ease;
}

.social-link:hover {
  background: rgba(0, 247, 255, .1);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 15px rgba(0, 247, 255, .2);
  transform: translateY(-3px);
}

.cta-footer {
  margin-top: 30px;
  font-family: var(--font-pixel);
  font-size: 7px;
  color: rgba(255, 255, 255, .15);
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════════════════════
   UTILITIES & ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll-reveal for feature cards is handled via JS adding .visible */

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cabinet-bezel {
    padding: 12px;
    border-radius: 20px;
  }

  .crt-screen {
    border-radius: 12px;
  }

  .section {
    padding: 40px 16px;
  }

  /* Char Selection mobile layout */
  .char-selection-wrapper {
    flex-direction: column;
  }

  .char-roster {
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .char-detail-inner {
    flex-direction: column;
    align-items: center;
  }

  .char-detail-art {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-bottom: 20px;
  }

  .char-slot {
    min-width: 70px;
    padding: 8px;
    flex: 1 1 70px;
  }

  .char-portrait {
    width: 56px;
    height: 56px;
    margin: 0 auto;
  }

  .portrait-icon {
    font-size: 20px;
  }

  /* Gameplay Features mobile fix */
  .floppy-row {
    flex-direction: column;
    width: 100%;
  }

  .feature-floppy, .feature-floppy:first-child {
    width: 90%;
    max-width: 400px;
    margin-left: 0 !important;
    margin-bottom: 30px;
  }

  .features-bezel-overlay {
    top: 40px;
  }

  .joypad-interactive-container {
    width: 80%;
    top: -30px;
  }

  .joypad-arrow {
    margin-top: -100px;
    right: 80%;
    width: 50px;
  }

  .carousel-btn.prev {
    left: 10px;
  }

  .carousel-btn.next {
    right: 10px;
  }

  /* Cabinet UI */
  .cabinet-marquee {
    padding: 10px 14px 8px;
  }

  .cabinet-bottom {
    padding: 14px 20px 18px;
  }

  .joystick {
    width: 30px;
    height: 30px;
  }

  .joystick::after {
    width: 10px;
    height: 16px;
    top: -8px;
  }

  .arcade-btn {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 480px) {
  .char-slot {
    min-width: 60px;
    padding: 6px;
  }

  .char-portrait {
    width: 44px;
    height: 44px;
  }

  .char-name {
    font-size: 6px;
  }

  .gameover-countdown {
    font-size: 60px;
  }

  .joypad-arrow {
    margin-top: -80px;
    right: 85%;
    width: 40px;
  }
}