/* ============================================================
   LOGIN/REGISTRO ARCADE — CSS COMPLETO (refactor v2)
   Consolas: PS5, Xbox, Nintendo Classic, SEGA, Neo-Geo, Dreamcast,
             Game Boy, PC-Engine, Atari, Switch, GameCube
   ============================================================ */

/* ------------------------------------------------------------
   Base variables (paleta y tipografías)
   ------------------------------------------------------------ */
:root {
  --arc-bg: #0b0e1a;
  --arc-panel: #11162a;
  --arc-primary: #00e5ff;
  --arc-accent: #ff2df1;
  --arc-success: #00ffa3;
  --arc-warning: #ffcc00;
  --arc-danger: #ff3b3b;
  --arc-text: #e7f0ff;
  --arc-muted: #94a6c7;
  --arc-line: rgba(0, 229, 255, 0.15);
  --arc-radius: 14px;
  --arc-shadow: 0 0 18px rgba(0, 229, 255, 0.25);
  --arc-font-display: 'Press Start 2P', system-ui, monospace;
  --arc-font-ui: 'Montserrat', system-ui, Arial, sans-serif;
  --arc-font-sci: 'Orbitron', var(--arc-font-ui);
}

/* ------------------------------------------------------------
   Reset y canvas a pantalla completa
   ------------------------------------------------------------ */

.arcade-bg {
  width: 100%;
  min-height: 60vh; /* Asegura que cubra toda la altura visible */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab,var(--arc-primary),transparent 85%),transparent 60%),
    radial-gradient(1200px 600px at 110% 110%,color-mix(in oklab,var(--arc-accent),transparent 85%),transparent 60%),
    linear-gradient(180deg,var(--arc-bg),color-mix(in oklab,var(--arc-bg),#000 10%));
  background-size: cover;
  background-position: center;
  position: relative;
  isolation: isolate;
}

/* Fondo dinámico sutil global */
.arcade-bg::before,
.arcade-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.arcade-bg::before {
  background:
    radial-gradient(1px 1px at 20% 30%, color-mix(in oklab, var(--arc-primary), transparent 70%), transparent 60%),
    radial-gradient(1px 1px at 60% 70%, color-mix(in oklab, var(--arc-accent), transparent 70%), transparent 60%),
    radial-gradient(1px 1px at 85% 20%, color-mix(in oklab, var(--arc-muted), transparent 70%), transparent 60%);
  opacity: .25;
}
.arcade-bg::after {
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 2px, transparent 3px 6px);
  opacity: .10;
}

/* Stage: envuelve el form */
.arcade-stage {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* ------------------------------------------------------------
   HUD superior
   ------------------------------------------------------------ */
.arcade-hud {
  border-bottom: 2px solid var(--arc-primary);
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--arc-primary), transparent 95%), transparent),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--arc-line) 8px 9px);
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  padding: 0 20px; /* ajusta si quieres más separación de los bordes */
  gap: 16px; /* separación extra entre title y subtitle */
}

.arcade-hud .title {
  font-family: var(--arc-font-display);
  color: var(--arc-primary);
  text-shadow: 0 0 8px color-mix(in oklab, var(--arc-primary), transparent 50%);
  flex: 1;
  text-align: left;
  font-size: 1.1em; /* ajusta tamaño si quieres */
  padding: 0;
  letter-spacing: 2px;   /* separa letras */
  word-spacing: 6px;     /* separa palabras */
}

.arcade-hud .subtitle {
  font-family: var(--arc-font-sci);
  color: var(--arc-accent);
  flex: 1;
  text-align: right;
  font-size: 0.95em; /* un poco mayor para legibilidad */
  text-transform: uppercase;
  letter-spacing: 2px;   /* más aire entre letras */
  word-spacing: 6px;     /* más aire entre palabras */
  padding: 0;
}


/* ------------------------------------------------------------
   Card/form compacto y responsivo
   ------------------------------------------------------------ */
/* Formulario */
.arcade-form {
  width: 100%;
  padding: 16px;
  background: linear-gradient(180deg,var(--arc-panel),color-mix(in oklab,var(--arc-panel),#000 10%));
  border: 2px solid var(--arc-primary);
  border-radius: var(--arc-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35),0 0 0 3px var(--arc-line) inset;
  color: var(--arc-text);
  font-family: var(--arc-font-ui);
  transform-origin: top center;
  animation: loadIn .5s ease-out both;
  margin-bottom: 0;
}

/* Títulos y textos */
.arcade-form h1,
.arcade-form h2,
.arcade-form h3 {
  font-family: var(--arc-font-display);
  letter-spacing: 0.5px;
  color: var(--arc-primary);
  text-shadow: 0 0 10px color-mix(in oklab, var(--arc-primary), transparent 70%);
  margin: 0 0 12px;
  font-size: 18px;
}

.arcade-subtext {
  font-family: var(--arc-font-ui);
  color: var(--arc-muted);
  font-size: 14px;
  margin-bottom: 14px;
}

/* Inputs */
.arcade-form input[type="text"],
.arcade-form input[type="email"],
.arcade-form input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  margin: 8px 0 12px;
  border-radius: 10px;
  border: 2px solid var(--arc-primary);
  background: linear-gradient(90deg, color-mix(in oklab, var(--arc-panel), #000 5%), var(--arc-panel));
  color: var(--arc-text);
  outline: none;
  box-shadow: inset 0 0 10px color-mix(in oklab, var(--arc-primary), transparent 85%);
  font-family: var(--arc-font-ui);
  transition: box-shadow .25s ease, border-color .25s ease, transform .08s ease, background .25s ease;
}

.arcade-form input:focus {
  border-color: var(--arc-accent);
  box-shadow: 0 0 14px color-mix(in oklab, var(--arc-accent), transparent 70%), inset 0 0 14px color-mix(in oklab, var(--arc-accent), transparent 80%);
  transform: translateY(-1px);
}

/* Labels y hints */
.arcade-label {
  display: block;
  font-family: var(--arc-font-ui);
  font-weight: 700;
  color: var(--arc-text);
  margin-top: 6px;
}
.arcade-hint {
  font-family: var(--arc-font-ui);
  color: var(--arc-muted);
  font-size: 12px;
  margin-top: -6px;
  margin-bottom: 10px;
}

/* Estados y validación */
.arcade-form .is-invalid {
  border-color: var(--arc-danger) !important;
  animation: shake .3s ease-in-out both;
}

/* Botones */
.arcade-btn {
  display: inline-grid;
  place-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 2px solid var(--arc-primary);
  color: #09121f;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in oklab, var(--arc-primary), #fff 25%), var(--arc-primary)),
    linear-gradient(180deg, color-mix(in oklab, var(--arc-primary), #000 5%), var(--arc-primary));
  font-family: var(--arc-font-display);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .6px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.25), 0 0 12px color-mix(in oklab, var(--arc-primary), transparent 70%);
  transition: transform .08s ease, box-shadow .25s ease, filter .2s ease;
}
.arcade-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 12px 26px rgba(0,0,0,.3), 0 0 16px color-mix(in oklab, var(--arc-primary), transparent 50%);
}
.arcade-btn:active {
  transform: translateY(0) scale(0.98);
  filter: brightness(0.95);
}

/* Grupo de botones */
.arcade-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* Mensajes */
.arcade-msg {
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--arc-font-ui);
  color: var(--arc-success);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--arc-success), transparent 90%), transparent),
    linear-gradient(0deg, color-mix(in oklab, var(--arc-success), transparent 92%), transparent);
  border: 2px solid color-mix(in oklab, var(--arc-success), transparent 30%);
  border-radius: 12px;
  padding: 12px;
  box-shadow: inset 0 0 18px color-mix(in oklab, var(--arc-success), transparent 85%);
  margin-bottom: 12px;
  animation: levelUp .6s ease-out both;
}
.arcade-msg.error {
  color: var(--arc-danger);
  border-color: color-mix(in oklab, var(--arc-danger), transparent 35%);
  box-shadow: inset 0 0 18px color-mix(in oklab, var(--arc-danger), transparent 85%);
  animation: shake .4s ease-in-out both, glitch 1.4s linear infinite;
}

/* Links secundarios */
.arcade-links {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.arcade-links a {
  color: var(--arc-muted);
  text-decoration: none;
  font-family: var(--arc-font-ui);
}
.arcade-links a:hover { color: var(--arc-primary); }

/* Campos con icono */
.arcade-field { position: relative; }
.arcade-field .icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  opacity: .75; color: var(--arc-muted);
}
.arcade-field input { padding-left: 36px !important; }

/* Utilidades */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-8 { margin-top: 8px !important; }
.mb-8 { margin-bottom: 8px !important; }
.mt-16 { margin-top: 16px !important; }
.mb-16 { margin-bottom: 16px !important; }
.center { text-align: center !important; }
.full { width: 100% !important; }
.hidden { display: none !important; }

/* ------------------------------------------------------------
   Animaciones base
   ------------------------------------------------------------ */
@keyframes loadIn {
  0% { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes levelUp {
  0% { transform: scale(.9); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
@keyframes glitch {
  0% { clip-path: inset(0 0 80% 0); }
  20% { clip-path: inset(10% 0 60% 0); }
  40% { clip-path: inset(40% 0 20% 0); }
  60% { clip-path: inset(20% 0 40% 0); }
  80% { clip-path: inset(60% 0 10% 0); }
  100% { clip-path: inset(0 0 80% 0); }
}

/* ===================================================================
   SKINS AVANZADOS POR CONSOLA — PALETAS OFICIALES + EFECTOS ÉPICOS
   Pega estos bloques al final de tu style.css, reemplazando los skins viejos
   =================================================================== */

/* -------------------------
   NES / SNES — CRT scanlines + glitch rojo
   Paleta: rojo Nintendo (#E70009), grises clásicos
   ------------------------- */
.arcade-skin-nintendo {
  --arc-bg: #0a0a0a;
  --arc-panel: #1f1f1f;
  --arc-primary: #e70009;
  --arc-accent: #ffffff;
  --arc-text: #f4f4f4;
  --arc-line: rgba(255,255,255,0.02);
}
.arcade-skin-nintendo.arcade-bg {
  background:
    repeating-linear-gradient(180deg, var(--arc-line) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(0deg, #1f1f1f 0 3px, #0a0a0a 3px 6px),
    linear-gradient(180deg, var(--arc-bg), #101010);
  animation: nesScan 4s linear infinite, nesGlitch .7s steps(2) infinite;
}

@keyframes nesScan {
  to { background-position: 0 100vh, 0 0, 0 0; }
}

.arcade-form.arcade-skin-nintendo {
  border: 2px solid var(--arc-primary);
  box-shadow: inset 0 0 6px rgba(231,0,9,0.3), 0 16px 40px rgba(0,0,0,0.5);
  animation: nesPop .5s ease-out both;
}

.arcade-form.arcade-skin-nintendo .arcade-btn {
  background: var(--arc-primary);
  color: #fff;
  animation: nesBlink 1s steps(2,end) infinite;
}


/* -------------------------
   SEGA Genesis — Grid eléctrico + pulso azul
   Paleta: #00A3E0 (azul), #FFE14A (amarillo)
   ------------------------- */
.arcade-skin-sega {
  --arc-bg: #070c18;
  --arc-panel: #0e1625;
  --arc-primary: #00a3e0;
  --arc-accent: #ffe14a;
  --arc-text: #d0eafd;
  --arc-line: rgba(0,163,224,0.12);
}
.arcade-skin-sega.arcade-bg {
  background:
    repeating-linear-gradient(45deg, var(--arc-line) 0 5px, transparent 5px 10px),
    linear-gradient(90deg, var(--arc-bg), #0a1120 50%, var(--arc-bg));
  background-size: 20px 20px, 200% 100%;
  animation: segaSweep 5s linear infinite, segaPulse 3s ease-in-out infinite;
}
@keyframes segaSweep {
  to { background-position: 0 0, 200% 0; }
}
@keyframes segaPulse {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.2) saturate(1.1); }
}
.arcade-form.arcade-skin-sega {
  border-color: var(--arc-primary);
  box-shadow: inset 0 0 20px rgba(0,163,224,0.2), 0 12px 36px rgba(0,0,0,0.4);
  animation: segaSlide .6s ease-out both;
}
@keyframes segaSlide {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.arcade-form.arcade-skin-sega .arcade-btn {
  background: linear-gradient(180deg, var(--arc-primary), #005fa3);
  box-shadow: 0 0 16px rgba(0,163,224,0.4);
}


/* -------------------------
   PlayStation 5 — Halo azul + shimmer púrpura
   Paleta: #0A84FF, #6B5CFF
   ------------------------- */
.arcade-skin-ps5 {
  --arc-bg: #f5f5f8;
  --arc-panel: #ffffff;
  --arc-primary: #0a84ff;
  --arc-accent: #6b5cff;
  --arc-text: #202028;
  --arc-line: rgba(10,132,255,0.12);
}
.arcade-skin-ps5.arcade-bg {
  background:
    radial-gradient(circle at 40% 10%, rgba(10,132,255,0.08), transparent 70%),
    linear-gradient(180deg, var(--arc-bg), #eaf1ff);
  animation: ps5Glow 5s ease-in-out infinite;
}
@keyframes ps5Glow {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.1) saturate(1.05); }
}
.arcade-form.arcade-skin-ps5 {
  background: linear-gradient(180deg, #ffffff, color-mix(in oklab,#ffffff,#cfd8ea 12%));
  border-color: var(--arc-primary);
  box-shadow: 0 14px 44px rgba(10,132,255,0.2), inset 0 0 0 3px rgba(10,132,255,0.12);
  overflow: hidden;
}

.arcade-form.arcade-skin-ps5 .arcade-btn {
  background: linear-gradient(180deg, var(--arc-primary), #0055cc);
  animation: ps5Pulse 2s ease-in-out infinite;
}
@keyframes ps5Pulse {
  50% { box-shadow: 0 12px 32px rgba(10,132,255,0.35); }
}


/* -------------------------
   Xbox Series X — Neblina verde + partículas
   Paleta: #107C10, #3BCCFF
   ------------------------- */
.arcade-skin-xbox {
  --arc-bg: #0c0c0c;
  --arc-panel: #161616;
  --arc-primary: #107c10;
  --arc-accent: #3bccff;
  --arc-text: #e5ffeb;
  --arc-line: rgba(16,124,16,0.15);
}
.arcade-skin-xbox.arcade-bg {
  background:
    radial-gradient(circle at 50% 50%, var(--arc-line), transparent 70%),
    linear-gradient(180deg, var(--arc-bg), #161616);
}
.arcade-skin-xbox.arcade-bg::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(16,124,16,0.4), transparent 60%),
    radial-gradient(2px 2px at 80% 70%, rgba(59,204,255,0.4), transparent 60%);
  animation: xboxDrift 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes xboxDrift {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(6px,-6px); }
}
.arcade-form.arcade-skin-xbox {
  border-color: var(--arc-primary);
  box-shadow: inset 0 0 0 3px rgba(16,124,16,0.12), 0 14px 40px rgba(0,0,0,0.5);
  animation: xboxPulse 2s ease-in-out infinite alternate;
}
@keyframes xboxPulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.2); }
}
.arcade-form.arcade-skin-xbox .arcade-btn {
  background: linear-gradient(180deg, var(--arc-primary), #0a6a0a);
  box-shadow: 0 0 18px rgba(16,124,16,0.45);
}


/* -------------------------
   Neo-Geo — Diamante dorado + shimmer
   Paleta: #FFCF33, #00B7FF
   ------------------------- */
.arcade-skin-neogeo {
  --arc-bg: #070707;
  --arc-panel: #111111;
  --arc-primary: #ffcf33;
  --arc-accent: #00b7ff;
  --arc-text: #f7f0d8;
  --arc-line: rgba(255,207,51,0.15);
}
.arcade-skin-neogeo.arcade-bg {
  background:
    repeating-linear-gradient(45deg, var(--arc-line) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, var(--arc-bg), #131313);
}

.arcade-form.arcade-skin-neogeo {
  border-color: var(--arc-primary);
  box-shadow: inset 0 0 0 3px rgba(255,207,51,0.12), 0 18px 44px rgba(0,0,0,0.45);
}


/* -------------------------
   Dreamcast — Espiral naranja + glow suave
   Paleta: #FF6B2B, #00BFD4
   ------------------------- */
.arcade-skin-dreamcast {
  --arc-bg: #f0f4f7;
  --arc-panel: #ffffff;
  --arc-primary: #ff6b2b;
  --arc-accent: #00bfd4;
  --arc-text: #262626;
  --arc-line: rgba(255,107,43,0.12);
}
.arcade-skin-dreamcast.arcade-bg {
  background:
    conic-gradient(from 0deg at 50% 50%, rgba(255,107,43,0.08) 0% 25%, transparent 25% 50%, rgba(255,107,43,0.08) 50% 75%, transparent 75% 100%),
    linear-gradient(180deg, var(--arc-bg), #eef2f5);
}

.arcade-form.arcade-skin-dreamcast .arcade-btn {
  background: linear-gradient(180deg, var(--arc-primary), #c94c1a);
}


/* -------------------------
   Game Boy — Scanlines verdes + jitter
   Paleta Game Boy original: #0F380F, #306230, #9BBC0F
   ------------------------- */
.arcade-skin-gameboy {
  --arc-bg: #0f380f;
  --arc-panel: #306230;
  --arc-primary: #9bbc0f;
  --arc-accent: #8bac0f;
  --arc-text: #e0f8d0;
  --arc-line: rgba(155,188,15,0.12);
}
.arcade-skin-gameboy.arcade-bg {
  image-rendering: pixelated;
  background:
    repeating-linear-gradient(180deg, var(--arc-line) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, var(--arc-bg), #11251a);
  animation: gbScan 5s linear infinite;
}
@keyframes gbScan {
  to { background-position: 0 100%; }
}
.arcade-form.arcade-skin-gameboy .arcade-btn {
  background: var(--arc-primary);
  border: 2px solid var(--arc-accent);
}


/* -------------------------
   PC-Engine / TurboGrafx — Barras verticales rojas + flicker
   Paleta: #E60012, #F7F87F
   ------------------------- */
.arcade-skin-pcengine {
  --arc-bg: #2a1212;
  --arc-panel: #3b1f1f;
  --arc-primary: #e60012;
  --arc-accent: #f7f87f;
  --arc-text: #f2e9e9;
  --arc-line: rgba(230,0,18,0.12);
}
.arcade-skin-pcengine.arcade-bg {
  background:
    repeating-linear-gradient(90deg, var(--arc-line) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, var(--arc-bg), #17172a);
  animation: pcScroll 6s linear infinite;
}

@keyframes pcScroll {
  to { background-position: 100% 0; }
}


/* -------------------------
   Atari 2600 — Líneas anaranjadas + static
   Paleta: #FF7F27, #FFD27F
   ------------------------- */
.arcade-skin-atari {
  --arc-bg: #2b1a0d;
  --arc-panel: #3c2a1b;
  --arc-primary: #ff7f27;
  --arc-accent: #ffd27f;
  --arc-text: #ffeede;
  --arc-line: rgba(255,127,39,0.12);
}
.arcade-skin-atari.arcade-bg {
  background:
    repeating-linear-gradient(0deg, var(--arc-line) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, var(--arc-bg), #1a0e06);
  animation: atariHeat 4s ease-in-out infinite;
}

@keyframes atariHeat {
  50% { filter: brightness(1.2) saturate(1.1); }
}

.arcade-form.arcade-skin-atari .arcade-btn {
  background: linear-gradient(180deg, var(--arc-primary), #b84f00);
  text-shadow: 0 0 6px rgba(255,127,39,0.35);
}


/* ------------------------------------------------------------
   Nintendo Switch — Blue Makeover con texto blanco legible
   Paleta: #1565C0 (azul principal), #0D47A1 (azul oscuro), #FF3B3B (Joy-Con rojo)
   ------------------------------------------------------------ */
.arcade-skin-switch {
  --arc-bg: #1565C0;    /* azul para la mitad derecha */
  --arc-accent: #FF3B3B; /* rojo para la mitad izquierda */
  --arc-panel: #0D47A1;
  --arc-primary: #FFFFFF;  /* color de texto principal */
  --arc-text: #FFFFFF;     /* blanco para todos los textos */
  --arc-muted: #A3C5F5;
  --arc-line: rgba(255,255,255,0.15);
}

/* Fondo animado degradado azul */
.arcade-skin-switch.arcade-bg {
  background: linear-gradient(90deg, var(--arc-accent) 0% 50%, var(--arc-bg) 50% 100%);
  background-size: 200% 200%;
  animation: switchWave 6s ease-in-out infinite;
}

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

/* Formulario con panel azul oscuro y borde rojo */
.arcade-form.arcade-skin-switch {
  background: linear-gradient(180deg, var(--arc-panel) 0%, var(--arc-bg) 100%);
  border: 2px solid var(--arc-accent);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.3), 0 16px 40px rgba(0,0,0,0.4);
}

/* Botón rojo Joy-Con con texto blanco */
.arcade-form.arcade-skin-switch .arcade-btn {
  background: var(--arc-accent);
  color: var(--arc-text);
  border-color: var(--arc-accent);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  transition: transform .2s ease, box-shadow .3s ease;
}

.arcade-form.arcade-skin-switch .arcade-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,0.6);
}

/* Header (Continuar / MODO: NINTENDO SWITCH) */
.arcade-hud.arcade-skin-switch {
  background:
    linear-gradient(0deg, rgba(255,255,255,0.03) 0%, transparent),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--arc-line) 8px 9px);
}

.arcade-hud.arcade-skin-switch .title,
.arcade-hud.arcade-skin-switch .subtitle {
  color: var(--arc-text) !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
  font-size: 1.4rem;         /* tamaño mayor para visibilidad */
  line-height: 1;
  padding: 0;
}

.arcade-hud.arcade-skin-switch .subtitle {
  background: var(--arc-panel);
  border-radius: 4px;
  padding: 4px 8px;
  text-transform: uppercase;
}

/* -------------------------
   GameCube — Violeta vibrante + negro
   Inspiración: #6A0DAD (violeta), #000000 (negro), #CFCBFF (texto claro)
   ------------------------- */
.arcade-skin-gamecube {
  --arc-bg: #000000;
  --arc-panel: #1a001f;
  --arc-primary: #6A0DAD; /* Violeta GameCube */
  --arc-accent: #9A4DFF;  /* Acento más claro */
  --arc-text: #CFCBFF;    /* Texto claro con tinte violeta */
  --arc-line: rgba(106,13,173,0.08);
}

.arcade-skin-gamecube.arcade-bg {
  background:
    radial-gradient(800px 400px at 50% 0%, var(--arc-primary), transparent 70%),
    linear-gradient(180deg, var(--arc-bg), #0a0a0a);
  animation: gcGlow 12s ease-in-out infinite;
}

@keyframes gcGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

.arcade-form.arcade-skin-gamecube .arcade-btn {
  background: linear-gradient(145deg, var(--arc-primary), var(--arc-accent));
  border: 2px solid var(--arc-accent);
  color: var(--arc-text);
  text-shadow: 0 0 4px rgba(255,255,255,0.2);
  box-shadow: 0 0 8px var(--arc-primary);
}


/* ------------------------------------------------------------
   Responsive tweaks
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  .arcade-form { padding: 14px; }
  .arcade-hud .title { font-size: 14px; }
}