/* DVD Dodger - Retro Arcade CRT Aesthetic */

:root {
  --bg-deep: #0a0420;
  --bg-mid: #1a0a3e;
  --bg-light: #2d1167;
  --neon-pink: #ff2e93;
  --neon-cyan: #00f0ff;
  --neon-yellow: #ffd23f;
  --neon-purple: #a855f7;
  --neon-green: #39ff14;
  --grid: #3f1d8a;
  --text-dim: #9d8acf;
}

@font-face { font-display: swap; }

body { margin: 0; background: #0b0b18; }

* {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.px-font { font-family: 'Press Start 2P', 'VT323', monospace; letter-spacing: 0.02em; }
.mono-font { font-family: 'VT323', 'Courier New', monospace; }

/* CRT scanlines overlay */
.crt-scanlines {
  position: absolute; inset: 0; 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
  );
  z-index: 200;
}
.crt-scanlines::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* Pixel-stepped border using box-shadow */
.pixel-border {
  box-shadow:
    0 -4px 0 0 currentColor,
    0 4px 0 0 currentColor,
    -4px 0 0 0 currentColor,
    4px 0 0 0 currentColor;
}

/* Neon glow text */
.neon-pink { color: var(--neon-pink); text-shadow: 0 0 6px rgba(255,46,147,0.8), 0 0 14px rgba(255,46,147,0.5); }
.neon-cyan { color: var(--neon-cyan); text-shadow: 0 0 6px rgba(0,240,255,0.8), 0 0 14px rgba(0,240,255,0.5); }
.neon-yellow { color: var(--neon-yellow); text-shadow: 0 0 6px rgba(255,210,63,0.8), 0 0 14px rgba(255,210,63,0.4); }
.neon-green { color: var(--neon-green); text-shadow: 0 0 6px rgba(57,255,20,0.8), 0 0 14px rgba(57,255,20,0.5); }

/* Arcade gradient backdrop with grid */
.arcade-bg {
  background:
    linear-gradient(180deg, #0a0420 0%, #1a0a3e 60%, #3d1178 100%);
  position: relative;
  overflow: hidden;
}
.arcade-bg::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(400px) rotateX(62deg);
  transform-origin: center bottom;
  opacity: 0.6;
  mask-image: linear-gradient(180deg, transparent 0%, black 40%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 40%);
}
.arcade-bg::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: radial-gradient(ellipse at top, rgba(168,85,247,0.25), transparent 70%);
  pointer-events: none;
}

/* Chunky pixel button */
.px-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Press Start 2P', monospace;
  color: #fff; background: var(--bg-deep);
  padding: 18px 20px;
  cursor: pointer;
  transition: transform 0.06s;
  user-select: none;
  border: 0;
}
.px-btn:active { transform: translate(2px, 2px); }

/* Sprite animation for player disc (2x2, 4 frames) */
@keyframes disc-spin {
  0%   { background-position: 0 0; }
  25%  { background-position: -100% 0; }
  50%  { background-position: 0 -100%; }
  75%  { background-position: -100% -100%; }
  100% { background-position: 0 0; }
}
.player-disc {
  background-image: url('assets/player-disc.png');
  background-size: 200% 200%;
  animation: disc-spin 0.32s steps(1) infinite;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  will-change: transform;
}

.dvd-logo {
  background-image: url('assets/dvd-video.png');
  background-size: 300% 300%;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  will-change: transform;
}

/* Title blink */
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0.25 } }
.blink { animation: blink 1.1s steps(1) infinite; }

/* Bobbing title */
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }

/* Dialog overlay */
.dialog-scrim {
  position: absolute; inset: 0; z-index: 500;
  background: rgba(5, 1, 20, 0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadein 0.18s ease;
}
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
@keyframes popin { from { opacity: 0; transform: scale(0.86) } to { opacity: 1; transform: scale(1) } }

.dialog-card {
  animation: popin 0.22s cubic-bezier(.2,1.4,.4,1);
}

/* Marquee lights */
@keyframes marquee-pulse {
  0%, 100% { background: var(--neon-yellow); box-shadow: 0 0 10px var(--neon-yellow), 0 0 18px rgba(255,210,63,0.6); }
  50% { background: var(--neon-pink); box-shadow: 0 0 10px var(--neon-pink), 0 0 18px rgba(255,46,147,0.6); }
}

/* Joystick nub gradient */
.joy-nub {
  background:
    radial-gradient(circle at 35% 30%, #ff6bb3 0%, var(--neon-pink) 40%, #b01264 100%);
  box-shadow:
    inset -4px -5px 8px rgba(0,0,0,0.35),
    inset 3px 3px 4px rgba(255,255,255,0.4),
    0 6px 14px rgba(0,0,0,0.45);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.4); border-radius: 3px; }

/* Toggle switch */
.tg-track {
  width: 52px; height: 28px; border-radius: 16px; position: relative;
  transition: background 0.2s;
  cursor: pointer;
}
.tg-nub {
  position: absolute; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  transition: left 0.2s, background 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Rank row highlight pulse */
@keyframes you-glow {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--neon-cyan), 0 0 12px rgba(0,240,255,0.35) }
  50% { box-shadow: inset 0 0 0 2px var(--neon-cyan), 0 0 24px rgba(0,240,255,0.7) }
}
.you-row { animation: you-glow 2s ease-in-out infinite; }

/* small stars sprinkled */
.starfield::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 20%, #fff, transparent),
    radial-gradient(1px 1px at 78% 12%, #fff, transparent),
    radial-gradient(1px 1px at 42% 30%, #fff, transparent),
    radial-gradient(1px 1px at 90% 45%, #fff, transparent),
    radial-gradient(1px 1px at 25% 55%, #fff, transparent),
    radial-gradient(1px 1px at 62% 22%, #fff, transparent);
  opacity: 0.6;
  animation: blink 3s steps(1) infinite;
}