body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.15) 4px,
    rgba(0,0,0,0.15) 6px
  );
  z-index: 5;
}


body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgba(255,77,255,0.2),
    rgba(0,255,255,0.15),
    rgba(26,255,26,0.1),
    rgba(255,77,255,0.2)
  );
  background-size: 200% 200%;
  animation: neonSweep 6s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  z-index: 6;
}


@keyframes neonSweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


@font-face {
  font-family: 'Press Start 2P';
  src: url('../assets/font/PressStart2P.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}


:root {
  --nintendo-bg: #0f0f0f;
  --beat-pink: #ff4dff;
  --beat-cyan: #00ffff;
  --beat-green: #1aff1a;
  --nintendo-gray: #8b956d;
  --dark-green: #0f2027;
}


* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  height: 100vh;
  background: var(--nintendo-bg);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}


.pixel-perfect {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}


::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--nintendo-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--beat-cyan);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--beat-pink);
}


.slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.slider-thumb::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--beat-pink);
  border: 2px solid var(--beat-cyan);
  box-shadow: 0 0 10px rgba(255, 77, 255, 0.8);
  transition: all 0.2s ease;
}
.slider-thumb::-webkit-slider-thumb:hover {
  background: var(--beat-cyan);
  border-color: var(--beat-pink);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
  transform: scale(1.1);
}
.slider-thumb::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--beat-pink);
  border: 2px solid var(--beat-cyan);
  box-shadow: 0 0 10px rgba(255, 77, 255, 0.8);
  transition: all 0.2s ease;
}
.slider-thumb::-moz-range-thumb:hover {
  background: var(--beat-cyan);
  border-color: var(--beat-pink);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
  transform: scale(1.1);
}


button:focus {
  outline: 2px solid var(--beat-cyan);
  outline-offset: 2px;
}
button:disabled {
  filter: grayscale(1) opacity(0.5);
  cursor: not-allowed !important;
}


@keyframes retro-glow {
  0%,100% { text-shadow: 0 0 5px var(--beat-cyan),0 0 10px var(--beat-cyan),0 0 15px var(--beat-cyan); }
  50%     { text-shadow: 0 0 10px var(--beat-pink),0 0 20px var(--beat-pink),0 0 30px var(--beat-pink); }
}
@keyframes border-glow {
  0%,100% { border-color:var(--beat-cyan); box-shadow:0 0 20px rgba(0,255,255,0.3); }
  50%     { border-color:var(--beat-pink); box-shadow:0 0 20px rgba(255,77,255,0.3); }
}
@keyframes vinyl-spin {
  from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}


.text-glow   { animation: retro-glow 2s ease-in-out infinite; }
.border-glow { animation: border-glow 3s ease-in-out infinite; }


.loading-dots::after { content:''; animation: loading-dots 1.5s steps(4,end) infinite; }
@keyframes loading-dots {
  0%,20%   { content:''; }
  40%      { content:'.'; }
  60%      { content:'..'; }
  80%,100% { content:'...'; }
}


@media (max-width:480px) {
  html,body{font-size:10px;}
  .slider-thumb::-webkit-slider-thumb{height:24px;width:24px;}
  .slider-thumb::-moz-range-thumb {height:24px;width:24px;}
}
@media (min-width:481px) and (max-width:768px) { html,body{font-size:11px;} }
@media (min-width:769px) { html,body{font-size:12px;} }


@media (-webkit-min-device-pixel-ratio:2) { .pixel-perfect{image-rendering:pixelated;} }


@media (prefers-reduced-motion:reduce) {
  * { animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important; }
}


::selection { background: var(--beat-pink); color: var(--nintendo-bg); }


.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hardware-accel { transform: translateZ(0); backface-visibility: hidden; }
.pixel-art      { image-rendering: pixelated; }


@media print {
  body{background:white!important;color:black!important;}
  .no-print{display:none!important;}
}