/* ===== FLIPER — PIXEL ARCADE THEME ===== */
html { scroll-behavior: smooth; }

body {
  font-family: 'Space Grotesk', sans-serif;
  background-color: #08080f;
  background-image:
    linear-gradient(rgba(47,232,224,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,232,224,0.035) 1px, transparent 1px);
  background-size: 8px 8px;
}

.font-display { font-family: 'Press Start 2P', cursive; }

/* ── CRT scanlines ── */
.scanlines {
  position: relative;
}
.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.14) 3px,
    rgba(0,0,0,0.14) 4px
  );
  pointer-events: none;
  z-index: 0;
}

/* ── LED strip topo do header ── */
.led-strip {
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #c6ff3a 0px,   #c6ff3a 8px,
    #0a0a14 8px,   #0a0a14 10px,
    #b14eff 10px,  #b14eff 18px,
    #0a0a14 18px,  #0a0a14 20px,
    #2fe8e0 20px,  #2fe8e0 28px,
    #0a0a14 28px,  #0a0a14 30px,
    #ff3a8c 30px,  #ff3a8c 38px,
    #0a0a14 38px,  #0a0a14 40px
  );
  opacity: 0.85;
}

/* ── Pixel cards ── */
.card-glow {
  border-radius: 0 !important;
  transition: transform 0.05s steps(2), box-shadow 0.05s steps(2), border-color 0.05s steps(2);
}
.card-glow:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 0 rgba(0,0,0,0.9) !important;
}

/* CRT overlay nas prévias */
.crt-screen {
  position: relative;
}
.crt-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.09) 2px,
    rgba(0,0,0,0.09) 4px
  );
  z-index: 3;
  pointer-events: none;
}
.crt-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.5) 100%);
  z-index: 4;
  pointer-events: none;
}

/* ── Botão Jogar: label swap ── */
.play-btn .label-default { display: inline-flex; }
.play-btn .label-hover { display: none; }
.play-btn:hover .label-default { display: none; }
.play-btn:hover .label-hover { display: inline-flex; }

/* ── Arcade buttons ── */
.arcade-btn {
  border-radius: 0 !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.7);
  transition: box-shadow 0.05s steps(1), transform 0.05s steps(1);
}
.arcade-btn:hover {
  box-shadow: 0 2px 0 rgba(0,0,0,0.7);
  transform: translateY(2px);
}
.arcade-btn:active {
  box-shadow: 0 0 0 rgba(0,0,0,0.7);
  transform: translateY(4px);
}

/* ── Pixel divider ── */
.pixel-divider {
  border: none;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    #c6ff3a 0, #c6ff3a 8px,
    transparent 8px, transparent 12px
  );
  opacity: 0.35;
  margin: 0;
}

/* ── Blink ── */
@keyframes blink-px {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.blink      { animation: blink-px 1s   steps(1) infinite; }
.blink-slow { animation: blink-px 1.8s steps(1) infinite; }

/* ── Score / saldo display ── */
.score-display {
  text-shadow: 0 0 8px currentColor, 0 0 20px currentColor;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #08080f; }
::-webkit-scrollbar-thumb {
  background: #2fe8e030;
  border-radius: 0;
  border-left: 2px solid #2fe8e015;
}

/* ── Foco ── */
a:focus-visible, button:focus-visible {
  outline: 3px solid #c6ff3a;
  outline-offset: 2px;
}

/* ── Pulse (step) ── */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}
.pulse-soft { animation: pulse-soft 2s steps(4) infinite; }

/* ── Coin pop ── */
@keyframes coin-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.coin-pop { animation: coin-pop 0.3s steps(3); }

/* ── Modal in ── */
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-in { animation: modal-in 0.15s steps(5) forwards; }

/* ── Row in (feed) ── */
@keyframes row-in {
  from { opacity: 0; background-color: rgba(47,232,224,0.12); }
  to   { opacity: 1; background-color: transparent; }
}
.row-in { animation: row-in 0.4s steps(4) ease-out; }

/* ── Live dot ── */
@keyframes live-dot {
  0%, 100% { box-shadow: 0 0 0 0   rgba(198,255,58,0.7); }
  70%       { box-shadow: 0 0 0 6px rgba(198,255,58,0);   }
}
.live-dot { animation: live-dot 1.4s steps(3) infinite; }

/* ── Attract screen flicker ── */
@keyframes attract {
  0%, 88%, 100% { opacity: 1; }
  90%  { opacity: 0.75; }
  92%  { opacity: 1; }
  94%  { opacity: 0.8; }
}
.attract { animation: attract 7s steps(1) infinite; }

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