/* ==========================================================================
   PotterHead — Capa visual estilo World of Warcraft (v5.6.0)
   Marcos dorados biselados, paneles de piedra oscura, botones tipo
   "Entrar al mundo" y títulos dorados con contorno.
   Se carga DESPUÉS de style.css y login-gate.css: para volver al diseño
   anterior basta con quitar el enqueue 'potterhead-wow' de functions.php.
   ========================================================================== */

:root {
  --wow-gold: #ffd100;          /* dorado "texto de título" de WoW */
  --wow-gold-hi: #fff2a8;
  --wow-gold-lo: #8a6a12;
  --wow-bronze: #5c4310;
  --wow-stone-1: #1b1712;
  --wow-stone-2: #0f0d0a;
  --wow-ink: #060504;
  --wow-text: #e9dcc0;
  --wow-red-1: #a01818;
  --wow-red-2: #5e0707;
  --wow-blue-1: #1f5fa8;
  --wow-blue-2: #0b2a52;
  --wow-border: linear-gradient(180deg, #ffe58a 0%, #b88a1c 45%, #6b4a0c 100%);
  --wow-bevel:
    inset 0 0 0 1px rgba(255,214,102,.55),
    inset 0 0 0 3px #0a0806,
    inset 0 0 0 4px rgba(184,138,28,.55),
    inset 0 0 40px rgba(0,0,0,.65);
}

/* ---------- Scrollbar y selección ---------- */
::selection { background: rgba(255,209,0,.35); color: #fff; }
html { scrollbar-color: #8a6a12 #0b0906; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #0b0906; border-left: 1px solid #3a2a08; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #6b4a0c, #d9a62b 50%, #6b4a0c);
  border: 1px solid #1a1206; border-radius: 2px;
}

/* ---------- Cabecera: barra de piedra con filete dorado ---------- */
.hm-header {
  background:
    linear-gradient(180deg, rgba(34,28,20,.98) 0%, rgba(12,10,7,.98) 100%);
  border-bottom: 2px solid transparent;
  border-image: var(--wow-border) 1;
  box-shadow: 0 6px 24px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,214,102,.25);
}
.hm-logo-text {
  color: var(--wow-gold) !important;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(255,209,0,.35);
  letter-spacing: .06em;
}
.hm-nav ul li a {
  color: #d9c9a0;
  border-radius: 2px;
  border: 1px solid transparent;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  text-shadow: 0 1px 0 #000;
}
.hm-nav ul li a:hover,
.hm-nav ul li a.active,
.hm-nav ul li.current-menu-item > a,
.hm-nav ul li a[aria-current="page"] {
  color: var(--wow-gold-hi);
  background: linear-gradient(180deg, rgba(255,209,0,.16), rgba(255,209,0,.03));
  border-color: rgba(255,209,0,.45);
  box-shadow: 0 0 14px rgba(255,209,0,.18), inset 0 0 8px rgba(255,209,0,.12);
}
.hm-lang-btn { border-radius: 2px; }
.hm-lang-btn.hm-lang-active {
  background: linear-gradient(180deg, #3a2a08, #1a1206);
  border-color: var(--wow-gold-lo); color: var(--wow-gold);
}

/* ---------- Botón estilo WoW (reutilizable) ---------- */
.hm-auth-btn,
.hm-profile-btn,
.hm-logout-btn,
.ph-enter,
.ph-hat {
  position: relative;
  font-family: 'Cinzel', Georgia, serif !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wow-gold) !important;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(0,0,0,.8);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 48%, rgba(0,0,0,.28) 52%, rgba(0,0,0,.1) 100%),
    linear-gradient(180deg, var(--wow-red-1), var(--wow-red-2)) !important;
  border: 1px solid #1a0505 !important;
  border-radius: 3px !important;
  box-shadow:
    0 0 0 1px #d9a62b,
    0 0 0 3px #0a0806,
    0 0 0 4px rgba(184,138,28,.7),
    0 6px 14px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
  transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}
.hm-auth-btn:hover,
.hm-profile-btn:hover,
.ph-enter:hover,
.ph-hat:hover,
.ph-enter:focus-visible,
.ph-hat:focus-visible {
  filter: brightness(1.25) saturate(1.1);
  box-shadow:
    0 0 0 1px #ffe58a, 0 0 0 3px #0a0806, 0 0 0 4px rgba(255,214,102,.85),
    0 0 22px rgba(255,209,0,.45), 0 6px 14px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.4) !important;
  transform: none;
}
.hm-auth-btn:active, .ph-enter:active, .ph-hat:active { transform: translateY(1px); filter: brightness(.9); }
/* El segundo botón (Sombrero) en azul, como el botón secundario de Battle.net */
.ph-hat {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 48%, rgba(0,0,0,.28) 52%, rgba(0,0,0,.1) 100%),
    linear-gradient(180deg, var(--wow-blue-1), var(--wow-blue-2)) !important;
}

/* ---------- Login y registro (page-login.php) ---------- */
.hm-auth-page {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,209,0,.07), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.8));
}
.hm-auth-card {
  max-width: 480px;
  border-radius: 4px;
  color: var(--wow-text);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--wow-stone-1) 0%, var(--wow-stone-2) 100%);
  box-shadow:
    0 0 0 1px #000,
    0 0 0 2px #d9a62b,
    0 0 0 5px #0a0806,
    0 0 0 6px rgba(184,138,28,.65),
    0 40px 100px rgba(0,0,0,.95),
    var(--wow-bevel);
}
/* esquinas ornamentales */
.hm-auth-card::before {
  inset: 8px; height: auto; border-radius: 2px;
  background: none;
  border: 1px solid rgba(255,209,0,.22);
  pointer-events: none;
}
.hm-auth-card::after {
  content: '◆'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  color: var(--wow-gold); font-size: 1.1rem; line-height: 1;
  text-shadow: 0 0 10px rgba(255,209,0,.7), 0 2px 0 #000;
  background: #0a0806; padding: 0 .6rem;
}
.hm-auth-icon { filter: drop-shadow(0 0 12px rgba(255,209,0,.5)); }
.hm-auth-title {
  color: var(--wow-gold);
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(255,209,0,.35);
  letter-spacing: .05em;
}
.hm-auth-subtitle { color: #b9a678; text-shadow: 0 1px 0 #000; }
.hm-auth-form label { color: var(--wow-gold); text-shadow: 0 1px 0 #000; }
.hm-auth-form input[type="text"],
.hm-auth-form input[type="email"],
.hm-auth-form input[type="password"] {
  background: linear-gradient(180deg, #050403, #14100a);
  color: #fff3cf;
  border: 1px solid #5c4310;
  border-radius: 2px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.85), 0 0 0 1px #000;
}
.hm-auth-form input::placeholder { color: #6e6244; }
.hm-auth-form input:focus {
  border-color: var(--wow-gold);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.85), 0 0 0 1px #000, 0 0 12px rgba(255,209,0,.4);
}
.hm-auth-form .hm-field-accept label { color: #cdbd93; text-transform: none; letter-spacing: 0; font-family: 'Crimson Text', Georgia, serif; font-size: .92rem; }
.hm-auth-form .hm-field-accept a, .hm-auth-links a { color: #6fb4ff; text-decoration: none; }
.hm-auth-form .hm-field-accept a:hover, .hm-auth-links a:hover { color: #b9dcff; text-decoration: underline; }
.hm-auth-links { color: #b9a678; }
.hm-auth-btn { width: 100%; padding: 1rem; font-size: .95rem; margin-top: .8rem; }
.hm-auth-msg { border-radius: 2px; text-shadow: 0 1px 0 #000; }
.hm-auth-msg.error   { background: rgba(160,24,24,.25); border: 1px solid #a01818; color: #ff8a80; }
.hm-auth-msg.success { background: rgba(30,120,40,.22); border: 1px solid #2f8f3a; color: #9be7a2; }

/* ---------- Perfil ---------- */
.hm-profile-header, .hm-result-card, .hm-profile-info {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--wow-stone-1), var(--wow-stone-2)) !important;
  border: 1px solid #5c4310 !important;
  border-radius: 3px !important;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(217,166,43,.6), var(--wow-bevel) !important;
  color: var(--wow-text) !important;
}
.hm-profile-section-title, .hm-result-card-title {
  color: var(--wow-gold) !important; text-shadow: 0 2px 0 #000;
}
.hm-profile-avatar { border: 2px solid #d9a62b !important; box-shadow: 0 0 0 2px #000, 0 0 18px rgba(255,209,0,.35) !important; }

/* ---------- Portada: panel de acceso tipo "pantalla de login" de WoW ---------- */
/* Título "PotterHead": dorado WoW. Se usa degradado recortado en el texto, así que
   NO lleva text-shadow (se vería a través de las letras transparentes y lo ensuciaría);
   el contorno y el resplandor van con drop-shadow. */
.ph-gate .ph-title {
  color: transparent;
  text-shadow: none;
  background: linear-gradient(180deg, #fff6b0 0%, #ffd100 38%, #e0a000 62%, #a86f00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 2px 0 #000)
    drop-shadow(0 0 2px rgba(0,0,0,.9))
    drop-shadow(0 0 22px rgba(255,190,0,.45));
}
.ph-panel {
  border-radius: 3px;
  border: 1px solid #000;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, rgba(27,23,18,.93), rgba(10,8,6,.96));
  box-shadow:
    0 0 0 1px #d9a62b,
    0 0 0 4px #0a0806,
    0 0 0 5px rgba(184,138,28,.7),
    0 30px 80px rgba(0,0,0,.8),
    var(--wow-bevel),
    inset 0 0 44px var(--ph-accent-glow);
}
.ph-field label { color: var(--wow-gold); text-shadow: 0 1px 0 #000; letter-spacing: .08em; }
.ph-field input[type="text"], .ph-field input[type="password"], .ph-field__wrap input {
  background: linear-gradient(180deg, #050403, #14100a) !important;
  border: 1px solid #5c4310 !important;
  border-radius: 2px !important;
  color: #fff3cf !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.85), 0 0 0 1px #000 !important;
}
.ph-field input:focus { border-color: var(--wow-gold) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.85), 0 0 0 1px #000, 0 0 12px rgba(255,209,0,.4) !important; }
.ph-menu a { text-transform: uppercase; letter-spacing: .1em; text-shadow: 0 1px 0 #000; }
.ph-menu a:hover { color: var(--wow-gold-hi); text-shadow: 0 0 12px rgba(255,209,0,.6), 0 1px 0 #000; }

/* ---------- Pie ---------- */
.castle-footer {
  border-top: 2px solid transparent;
  border-image: var(--wow-border) 1;
  background: linear-gradient(180deg, #14100a, #050403);
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .hm-auth-btn, .ph-enter, .ph-hat { transition: none; }
}
@media (max-width: 600px) {
  .hm-auth-card { padding: 2.2rem 1.25rem; }
}