/* ═══════════════════════════════════════════════════
   Reskin del index para que combine con el estilo de
   pkmn-online: fondo azul oscuro, tarjetas con borde
   fino y glow, tipografía "Press Start 2P" / "VT323".

   Es un archivo APARTE a propósito: para volver al look
   original basta con quitar (o comentar) el <link> a este
   fichero en index.html, sin tocar style.css.
   ═══════════════════════════════════════════════════ */

:root {
  --bg:        #080d1a;
  --bg2:       #0e1528;
  --bg3:       #14203a;
  --panel:     #0b1220;
  --border:    #1e3060;
  --border2:   #2a4a8a;
  --accent:    #4a9eff;
  --gold:      #ffd700;
  --green:     #00e676;
  --red:       #ff1744;
  --text:      #e8f0fe;
  --text-dim:  #5a6a8a;
  --text-mid:  #9aaace;
  --font-px:   'Press Start 2P', monospace;
  --font-vt:   'VT323', monospace;
  --r:         3px;
  --shadow:    0 4px 24px rgba(74,158,255,.18);
  --glow:      0 0 24px rgba(74,158,255,.35);
  --glow-gold: 0 0 20px rgba(255,215,0,.4);
}

body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-vt);
  font-size:18px;
}

.franja {
  background:var(--panel);
  border-top:2px solid var(--border);
  border-bottom:2px solid var(--border);
}

.site-title {
  font-family:var(--font-px);
  font-size:clamp(9px, 3vw, 13px);
  letter-spacing:2px;
  color:var(--gold);
  text-shadow:var(--glow-gold);
  flex:0 1 auto;
  text-align:left;
}

/* ── CABECERA ESTILO pkmn-online (game-header), sin selector de región ── */
.game-header {
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:var(--shadow);
}

.header-right { display:flex; align-items:center; gap:12px; flex:0 0 auto; }

.btn-icon {
  background:transparent;
  border:none;
  color:var(--text);
  font-size:20px;
  cursor:pointer;
  padding:4px 8px;
  transition:color .15s;
}
.btn-icon:hover { color:var(--accent); }

/* ── PANEL LATERAL (drawer) del menú, a pantalla completa en vertical
   y que empuja el contenido de la página hacia la izquierda ── */
html, body { overflow-x:hidden; }

#page-wrap {
  transition:transform .3s ease;
}
#page-wrap.menu-open {
  transform:translateX(-280px);
}

.site-drawer {
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:280px;
  max-width:80vw;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border-left:2px solid var(--border);
  box-shadow:var(--shadow);
  padding-top:64px;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .3s ease;
  z-index:300;
}
.site-drawer.open { transform:translateX(0); }

.site-drawer-close {
  position:absolute;
  top:12px;
  right:16px;
  background:transparent;
  border:none;
  color:var(--text);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  padding:4px 8px;
  transition:color .15s;
}
.site-drawer-close:hover { color:var(--accent); }

#siteDrawerOverlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  z-index:250;
}
#siteDrawerOverlay.open { opacity:1; visibility:visible; }

.site-drawer .menu-dropdown-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:16px 20px;
  font-family:var(--font-vt);
  font-size:20px;
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid var(--border);
  transition:background .12s, color .12s;
}
.site-drawer .menu-dropdown-item:hover { background:var(--bg3); color:var(--accent); }

@media (max-width: 700px) {
  .game-header { flex-wrap:wrap; row-gap:8px; }
}

/* ── BOTONES DE AUTENTICACIÓN ── */
.auth-btn {
  border:none;
  background:var(--accent);
  color:#000;
  box-shadow:0 4px 0 #1a4aaa;
}
.auth-btn:hover { background:#6ab4ff; box-shadow:0 4px 0 #1a4aaa; }
.auth-btn-secondary { background:var(--bg3); color:var(--text); box-shadow:0 4px 0 #06091a; }

.daily-bonus-btn { background:var(--gold); color:#000; border-color:#7a5000; box-shadow:0 4px 0 #7a5000; }
.daily-bonus-btn:disabled { background:var(--bg3); border-color:var(--border); color:var(--text-dim); box-shadow:none; }

.auth-user-btn { background:var(--bg3); border-color:var(--border2); color:var(--text); border-radius:var(--r); }
.auth-avatar { border:2px solid var(--border2); }

.avatar-picker-option { border-color:var(--border); }
.avatar-picker-option:hover { border-color:var(--accent); }
.avatar-picker-option.selected { border-color:var(--gold); box-shadow:var(--glow-gold); }
.avatar-price-badge { background:var(--panel); border-color:var(--border2); color:var(--gold); }

.auth-user-info { color:var(--text); }
.auth-coins { color:var(--gold); opacity:1; }

.auth-menu { background:var(--panel); border-color:var(--border2); box-shadow:var(--shadow); }
.auth-menu-item { color:var(--text); }
.auth-menu-item:hover { background:var(--bg3); color:var(--accent); }

/* ── MODAL DE LOGIN/REGISTRO ── */
.auth-modal-overlay { background:rgba(0,0,0,.75); }
.auth-modal { background:var(--panel); border-color:var(--border2); border-radius:var(--r); box-shadow:var(--glow); color:var(--text); }
.auth-modal h2 { font-family:var(--font-px); font-size:14px; color:var(--gold); text-shadow:var(--glow-gold); }
.auth-modal input { background:var(--bg2); border-color:var(--border); color:var(--text); font-family:var(--font-vt); font-size:18px; border-radius:var(--r); }
.auth-modal input:focus { border-color:var(--accent); }
.auth-modal input::placeholder { color:var(--text-dim); }
.auth-modal-close { color:var(--text-dim); }
.auth-modal-close:hover { color:var(--red); }
.auth-form-error { color:var(--red); }
.auth-switch { color:var(--text-mid); }
.auth-switch a { color:var(--accent); }

/* ── TARJETAS DE LA HOME ── */
.wii-box2 {
  background:#23345c;
  border:2px solid var(--border2);
  border-radius:var(--r);
  box-shadow:none;
  color:var(--text);
  font-family:var(--font-vt);
  font-weight:normal;
}

.wii-box {
  background:#23345c;
  border:2px solid var(--border2);
  border-radius:var(--r);
  box-shadow:none;
  color:var(--text);
  font-weight:normal;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wii-box:hover { background:#2c4070; }
.wii-box:hover {
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:var(--glow);
}

.wii-box-titulo {
  font-family:var(--font-px);
  font-size:clamp(7px, 3vw, 12px);
  line-height:1.7;
  color:var(--text);
}

/* ── FORMULARIO DE FEEDBACK ── */
.feedback-box { background:var(--bg2); border-color:var(--border); border-radius:var(--r); color:var(--text); }
.feedback-titulo { font-family:var(--font-px); font-size:11px; color:var(--gold); }
#feedback-mensaje { background:var(--bg3); border-color:var(--border); color:var(--text); font-family:var(--font-vt); font-size:18px; border-radius:var(--r); }
#feedback-mensaje::placeholder { color:var(--text-dim); }
#feedback-estado { color:var(--text-dim); }
.feedback-exito { color:var(--green); }
.feedback-error { color:var(--red); }

/* ── PÁGINAS LEGALES ── */
.legal-content {
  max-width: 760px;
  margin: 32px auto 48px;
  padding: 0 20px;
  line-height: 1.6;
}

.legal-content h1 {
  font-family: var(--font-px);
  font-size: clamp(13px, 3.5vw, 18px);
  color: var(--gold);
  text-shadow: var(--glow-gold);
  margin: 0 0 24px;
}

.legal-content h2 {
  font-family: var(--font-px);
  font-size: clamp(10px, 2.5vw, 13px);
  color: var(--accent);
  margin: 28px 0 10px;
}

.legal-content p,
.legal-content li {
  color: var(--text);
}

.legal-content ul {
  padding-left: 22px;
}

.legal-content a {
  color: var(--accent);
}

.legal-content .legal-updated {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: -12px;
}

.legal-footer-nav {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 12px;
  font-family: var(--font-vt);
  font-size: 15px;
}

.legal-footer-nav a {
  color: var(--text-mid);
}

.legal-footer-nav a:hover {
  color: var(--accent);
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; height:5px; background-color:var(--bg); }
::-webkit-scrollbar-thumb { background-color:var(--border2); border-radius:3px; border:none; }
::-webkit-scrollbar-thumb:hover { background-color:var(--accent); }
* { scrollbar-width:thin; scrollbar-color:var(--border2) var(--bg); }

@media (max-width: 700px) {
  .franja { font-size:.9rem; }
}