/* ════════════════════════════════════════════════════════════════════
   DOPPELGANGER — ARCADE RETRO UI OVERLAY
   Aplica a pantallas previas al juego (login, registro, onboarding).
   NO afecta al canvas ni a la UI en-juego (HUD, chat, phone…).
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --arc-bg:#05050a;
  --arc-bg2:#0a0c1e;
  --arc-ink:#e6ecff;
  --arc-dim:#8891b3;
  --arc-neon:#39ff14;
  --arc-pink:#ff2d95;
  --arc-cyan:#00f0ff;
  --arc-amber:#ffb000;
  --arc-violet:#a855f7;
  --arc-red:#ff004d;
  --arc-pixel:4px;
}

/* ——— Auth screen background ——— */
#auth-screen{
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%,rgba(168,85,247,.18),transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 30%,rgba(0,240,255,.14),transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(255,45,149,.14),transparent 60%),
    linear-gradient(180deg,#0a0c1e 0%,#05050a 100%) !important;
  position:relative;
  overflow:auto;
}
#auth-screen::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 10% 20%,#fff,transparent),
    radial-gradient(1px 1px at 30% 70%,#fff,transparent),
    radial-gradient(1px 1px at 60% 40%,#fff,transparent),
    radial-gradient(1px 1px at 85% 85%,#fff,transparent),
    radial-gradient(1px 1px at 45% 15%,#fff,transparent),
    radial-gradient(2px 2px at 15% 50%,var(--arc-pink),transparent),
    radial-gradient(2px 2px at 90% 30%,var(--arc-cyan),transparent);
  opacity:.6;
  animation:arcTwinkle 4s steps(20) infinite;
}
#auth-screen::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.22) 0,rgba(0,0,0,0.22) 2px,transparent 2px,transparent 4px);
  mix-blend-mode:multiply;
}
@keyframes arcTwinkle{0%,100%{opacity:.45}50%{opacity:.8}}

#auth-screen > *{position:relative;z-index:2}

/* ——— Auth container ——— */
#auth-screen .auth-container{
  background:var(--arc-bg2) !important;
  border:var(--arc-pixel) solid var(--arc-ink) !important;
  box-shadow:
    8px 8px 0 0 var(--arc-pink),
    8px 8px 0 var(--arc-pixel) var(--arc-ink) !important;
  border-radius:0 !important;
  padding:28px !important;
  max-width:480px;
  margin:32px auto;
  backdrop-filter:none !important;
}

/* ——— Logo ——— */
#auth-screen .logo{
  text-align:center;margin-bottom:20px;
}
#auth-screen .logo-icon{
  font-size:48px;
  filter:drop-shadow(0 0 12px var(--arc-cyan));
  animation:arcBob 2.4s ease-in-out infinite;
}
@keyframes arcBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#auth-screen .logo h1,
#auth-screen h1{
  font-family:'Press Start 2P',monospace !important;
  font-size:22px !important;
  line-height:1.4 !important;
  margin:16px 0 10px !important;
  color:#fff !important;
  text-shadow:
    3px 3px 0 var(--arc-pink),
    -3px -3px 0 var(--arc-cyan) !important;
  letter-spacing:2px !important;
  background:none !important;
  -webkit-text-fill-color:#fff !important;
}
#auth-screen .tagline{
  font-family:'VT323',monospace !important;
  font-size:20px !important;
  color:var(--arc-dim) !important;
  margin-top:6px;
}
#auth-screen .auth-intro,
#auth-screen .auth-intro p{
  font-family:'VT323',monospace !important;
  font-size:18px !important;
  color:var(--arc-dim) !important;
  background:rgba(0,240,255,0.04) !important;
  border:2px solid var(--arc-cyan) !important;
  border-radius:0 !important;
  padding:12px !important;
  margin:16px 0 !important;
}

/* ——— Tabs ——— */
#auth-screen .auth-tabs{
  display:flex;gap:0;margin:20px 0;
  border:3px solid var(--arc-ink);
}
#auth-screen .auth-tabs .tab{
  flex:1;
  font-family:'Press Start 2P',monospace !important;
  font-size:11px !important;
  padding:14px 8px !important;
  background:var(--arc-bg) !important;
  color:var(--arc-dim) !important;
  border:none !important;
  border-radius:0 !important;
  cursor:pointer;
  letter-spacing:1px;
  transition:none;
}
#auth-screen .auth-tabs .tab+.tab{border-left:3px solid var(--arc-ink) !important}
#auth-screen .auth-tabs .tab.active{
  background:var(--arc-neon) !important;
  color:#000 !important;
  text-shadow:none !important;
}
#auth-screen .auth-tabs .tab:hover:not(.active){color:var(--arc-cyan) !important;background:rgba(0,240,255,0.06) !important}

/* ——— Forms ——— */
#auth-screen .auth-form input,
#auth-screen input[type="text"],
#auth-screen input[type="email"],
#auth-screen input[type="password"]{
  font-family:'VT323',monospace !important;
  font-size:20px !important;
  padding:12px 14px !important;
  background:#000 !important;
  color:var(--arc-neon) !important;
  border:3px solid var(--arc-ink) !important;
  border-radius:0 !important;
  margin-bottom:12px !important;
  width:100%;
  outline:none !important;
  caret-color:var(--arc-neon);
  letter-spacing:1px;
  box-shadow:none !important;
}
#auth-screen .auth-form input::placeholder{color:var(--arc-dim) !important;opacity:.7}
#auth-screen .auth-form input:focus{
  border-color:var(--arc-cyan) !important;
  box-shadow:0 0 0 2px var(--arc-cyan) !important;
}

/* ——— Primary button ——— */
#auth-screen .btn-primary,
#auth-screen button[type="submit"]{
  display:inline-block;
  font-family:'Press Start 2P',monospace !important;
  font-size:13px !important;
  padding:16px 20px !important;
  width:100%;
  color:#000 !important;
  background:var(--arc-neon) !important;
  border:none !important;
  border-radius:0 !important;
  cursor:pointer;
  letter-spacing:2px;
  text-transform:uppercase;
  box-shadow:
    4px 4px 0 0 #000,
    8px 8px 0 0 rgba(57,255,20,0.3) !important;
  transition:transform .05s;
  margin-top:8px;
  text-shadow:none !important;
}
#auth-screen .btn-primary:hover,
#auth-screen button[type="submit"]:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 0 #000,10px 10px 0 0 rgba(57,255,20,0.3) !important;
}
#auth-screen .btn-primary:active,
#auth-screen button[type="submit"]:active{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 0 #000 !important;
}

/* ——— Onboarding panels ——— */
#auth-screen .onboarding-flow{
  margin-top:20px;
}
#auth-screen .onboarding-steps{
  display:flex;gap:0;margin-bottom:20px;
  border:3px solid var(--arc-ink);
}
#auth-screen .onboarding-step{
  flex:1;text-align:center;
  font-family:'Press Start 2P',monospace !important;
  font-size:10px !important;
  padding:10px 6px !important;
  background:var(--arc-bg) !important;
  color:var(--arc-dim) !important;
  letter-spacing:1px;
}
#auth-screen .onboarding-step+.onboarding-step{border-left:3px solid var(--arc-ink)}
#auth-screen .onboarding-step.active{background:var(--arc-cyan) !important;color:#000 !important}

#auth-screen .onboarding-panel{
  background:#000 !important;
  border:3px solid var(--arc-cyan) !important;
  border-radius:0 !important;
  padding:20px !important;
}
#auth-screen .onboarding-panel h2{
  font-family:'Press Start 2P',monospace !important;
  font-size:14px !important;
  color:var(--arc-cyan) !important;
  margin-bottom:12px !important;
  letter-spacing:1px;
}
#auth-screen .onboarding-panel p{
  font-family:'VT323',monospace !important;
  font-size:18px !important;
  color:var(--arc-dim) !important;
}
#auth-screen .question-card{
  display:block;
  background:var(--arc-bg2) !important;
  border:2px solid var(--arc-violet) !important;
  border-radius:0 !important;
  padding:14px !important;
  margin:12px 0 !important;
  font-family:'VT323',monospace !important;
  font-size:18px !important;
  color:var(--arc-ink) !important;
}
#auth-screen .question-card input[type="range"]{
  width:100%;margin:8px 0;accent-color:var(--arc-pink);
}
#auth-screen .question-scale{
  display:block;font-size:15px;color:var(--arc-dim);margin-top:4px;
}

/* ——— Mobile ——— */
@media(max-width:520px){
  #auth-screen .auth-container{
    margin:16px 8px;
    box-shadow:
      4px 4px 0 0 var(--arc-pink),
      4px 4px 0 3px var(--arc-ink) !important;
  }
  #auth-screen .logo h1,#auth-screen h1{font-size:16px !important}
  #auth-screen .auth-tabs .tab{font-size:10px !important}
}