/* ===== Defiende Tu Trono - game.css ===== */

:root{
  --bg:#070A12;
  --panel:rgba(255,255,255,0.04);
  --panel2:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.08);
  --text:#e8eefc;
  --muted:rgba(217,226,242,0.75);

  --ok:rgba(34,197,94,1);
  --err:rgba(239,68,68,1);
  --accent:rgba(124,58,237,1);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background: radial-gradient(1000px 500px at 20% 0%, rgba(124,58,237,0.10), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(56,189,248,0.08), transparent 60%),
              var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{color:#9db4ff; text-decoration:none;}
a:hover{text-decoration:underline;}

.container{
  width:min(1100px, 92vw);
  margin:0 auto;
  padding:18px 0 28px;
}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border-radius:16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.2px;
}
.brand .dot{
  width:10px;height:10px;border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 20px rgba(124,58,237,0.35);
}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.nav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(232,238,252,0.92);
}
.nav a:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}

main{padding:14px 2px;}

h1{margin:10px 0 8px; font-size:28px;}
h2{margin:16px 0 8px; font-size:18px;}

.small{color:var(--muted); font-size:13px; line-height:1.35;}

.grid{
  display:grid;
  gap:12px;
}

.stat{
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border-radius:16px;
  padding:12px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
}

.ok{
  border:1px solid rgba(34,197,94,0.25);
  background: rgba(34,197,94,0.08);
  color: rgba(210,255,225,0.95);
  padding:10px 12px;
  border-radius:14px;
  margin:10px 0;
}
.err{
  border:1px solid rgba(239,68,68,0.25);
  background: rgba(239,68,68,0.10);
  color: rgba(255,220,220,0.95);
  padding:10px 12px;
  border-radius:14px;
  margin:10px 0;
}

button{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(232,238,252,0.95);
  font-weight:800;
  cursor:pointer;
}
button:hover{background: rgba(255,255,255,0.10);}
button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Colores recursos (si los usas en spans) */
.res-gold{color: rgba(250,204,21,0.95);}
.res-mana{color: rgba(56,189,248,0.95);}
.res-ess{color: rgba(217,70,239,0.95);}
.res-relic{color: rgba(248,113,113,0.95);}

.footer{
  margin-top:18px;
  opacity:.85;
  text-align:center;
}
/* ===== Buildings visuals (Capa 9 - Paso 2) ===== */

.bcard{display:flex;flex-direction:column;gap:10px;}
.bhead{display:flex;align-items:center;gap:14px;}

.bicon{
  width:72px;height:72px;border-radius:20px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 12px 26px rgba(0,0,0,0.45);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.bicon img{
  width:52px;height:52px;object-fit:contain;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.18))
    drop-shadow(0 0 24px rgba(120,150,255,0.15));
}

.btitle{font-weight:900;font-size:16px;line-height:1.1;}
.bmeta{margin-top:2px;}
.costrow{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.costleft{display:flex;align-items:center;gap:8px;}
.cicon{width:16px;height:16px;object-fit:contain;opacity:0.95;}

.badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  font-size:12px;
  color: rgba(217,226,242,0.85);
}

/* Hover legendario */
.stat.bcard{
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat.bcard:hover{
  transform: translateY(-6px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.06) inset;
}
.stat.bcard:hover .bicon{
  transform: scale(1.05);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 28px rgba(120,150,255,.35),
    0 18px 36px rgba(0,0,0,.65);
}

/* Estados: si no puedes pagar, se ve “apagao” */
.bcard.is-locked{
  opacity:.62;
  filter: saturate(.85);
}
.bcard.is-locked button{
  opacity:.70;
}

/* Estados: si puedes pagar, se ve “ready” */
.bcard.is-ready{
  border-color: rgba(124,58,237,0.22);
}

/* ===== Colores por edificio (aura) ===== */
/* Fortaleza (violeta) */
.bcard[data-bkey="fortress"]{ border-color: rgba(124,58,237,0.25); }
.bcard[data-bkey="fortress"] .bicon{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 26px rgba(124,58,237,0.22),
    0 12px 26px rgba(0,0,0,0.45);
}

/* Mina de Oro (oro) */
.bcard[data-bkey="gold_mine"]{ border-color: rgba(250,204,21,0.22); }
.bcard[data-bkey="gold_mine"] .bicon{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 26px rgba(250,204,21,0.16),
    0 12px 26px rgba(0,0,0,0.45);
}

/* Santuario/Pozo de Maná (azul) */
.bcard[data-bkey="mana_sanctum"],
.bcard[data-bkey="mana_well"]{ border-color: rgba(56,189,248,0.22); }
.bcard[data-bkey="mana_sanctum"] .bicon,
.bcard[data-bkey="mana_well"] .bicon{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 26px rgba(56,189,248,0.16),
    0 12px 26px rgba(0,0,0,0.45);
}

/* Pozo de Esencia (magenta) */
.bcard[data-bkey="essence_pit"]{ border-color: rgba(217,70,239,0.22); }
.bcard[data-bkey="essence_pit"] .bicon{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 26px rgba(217,70,239,0.16),
    0 12px 26px rgba(0,0,0,0.45);
}

/* Relic Vault (rojo más oscuro) */
.bcard[data-bkey="relic_vault"]{ border-color: rgba(239,68,68,0.22); }
.bcard[data-bkey="relic_vault"] .bicon{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 26px rgba(239,68,68,0.14),
    0 12px 26px rgba(0,0,0,0.45);
}
/* =====================================================
   AUTH (Login / Register) — fantasía oscura (solo visual)
   Usa imágenes del proyecto: heroes + items + login-bg
   Se activa SOLO cuando existe .auth-screen/.auth-shell
   ===================================================== */

/* Fondo pantalla completa */
.auth-screen{
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 25% 18%, rgba(34,197,94,0.14), transparent 45%),
    radial-gradient(circle at 80% 78%, rgba(239,68,68,0.14), transparent 45%),
    url("../img/login-bg.jpg") center center / cover no-repeat;
}

.auth-screen::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(4,7,12,0.88), rgba(4,7,12,0.62));
}

/* Héroes a los lados (capas) */
.auth-screen::after{
  content:"";
  position:absolute;
  inset:-4% -6% -6% -6%;
  background-image:
    url("../img/heroes/shadow_carry.webp"),
    url("../img/heroes/warden_tank.webp"),
    url("../img/heroes/oracle_support.webp");
  background-repeat: no-repeat;
  background-position:
    left -40px bottom -20px,
    right -50px bottom -30px,
    center 110% ;
  background-size:
    min(520px, 55vw),
    min(520px, 55vw),
    min(420px, 45vw);
  opacity: 0.22;
  filter: saturate(1.05) contrast(1.05) blur(0px);
  pointer-events:none;
}

/* Niebla + partículas */
.auth-fx{
  position:absolute;
  inset:-18%;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,0.08), transparent 56%),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(circle at 55% 75%, rgba(255,255,255,0.05), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 10px);
  filter: blur(16px);
  opacity: .55;
  animation: authFogMove 10s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes authFogMove{
  from { transform: translate3d(-10px, -8px, 0) scale(1.03); }
  to   { transform: translate3d(10px, 10px, 0) scale(1.05); }
}

/* Layout */
.auth-shell{
  position: relative;
  width: min(1040px, 96vw);
  margin: 22px auto 42px;
  display:flex;
  align-items: stretch;
  justify-content:center;
  gap: 18px;
}

/* Panel creativo (izquierda) */
.auth-splash{
  flex: 1 1 520px;
  min-height: 520px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,12,20,0.55);
  box-shadow: 0 18px 55px rgba(0,0,0,0.55);
  overflow:hidden;
  position: relative;
  display:none;
}

.auth-splash .auth-splash-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(34,197,94,0.14), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(239,68,68,0.12), transparent 45%);
  opacity: .95;
}

.auth-splash .auth-splash-hero{
  position:absolute;
  inset:auto 0 0 0;
  height: 92%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
}

.auth-splash .auth-splash-hero img{
  width: min(540px, 50vw);
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.65));
}

/* Glow encima */
.auth-splash .auth-splash-vignette{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 45% 50%, transparent 35%, rgba(0,0,0,0.75) 100%);
}

/* Items flotando */
.auth-items{
  position:absolute;
  left: 16px;
  top: 16px;
  right: 16px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 2;
}

.auth-items .auth-item{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 14px 32px rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.auth-items .auth-item img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  image-rendering: auto;
}

/* Card auth (derecha) */
.auth-card{
  width: min(440px, 92vw);
  margin: 0;
  padding: 18px 18px 14px;
  border-radius: 18px;
  background: rgba(16,18,26,0.62);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 24px 60px rgba(0,0,0,0.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.auth-brand{ display:flex; align-items:center; gap:12px; margin-bottom: 12px; }
.auth-logo{
  width:44px; height:44px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), rgba(255,255,255,0.02)),
    linear-gradient(135deg, rgba(34,197,94,0.14), rgba(239,68,68,0.12));
  border:1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 26px rgba(0,0,0,0.55);
  font-size: 20px;
}
.auth-title{ font-weight: 950; font-size: 18px; letter-spacing: .2px; }
.auth-subtitle{ font-size: 12px; color: rgba(217,226,242,0.80); margin-top: 2px; }

.auth-err{ margin-top: 10px; border-radius: 14px; padding: 10px 12px; background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.18); }

.auth-form{ margin-top: 10px; }
.auth-label{ display:block; font-size: 12px; margin: 10px 0 6px; color: rgba(217,226,242,0.82); }
.auth-input{ width: 100%; padding: 12px 12px; border-radius: 12px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.10); color: rgba(240,245,255,0.92); outline: none; box-sizing: border-box; }
.auth-input:focus{ border-color: rgba(34,197,94,0.24); box-shadow: 0 0 0 1px rgba(34,197,94,0.10) inset, 0 0 0 4px rgba(34,197,94,0.12); }

.auth-btn{
  margin-top: 14px;
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(239,68,68,0.18));
  color: rgba(240,245,255,0.95);
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(0,0,0,0.55);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.auth-btn:hover{
  transform: translateY(-2px);
  filter: saturate(1.12);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 28px rgba(34,197,94,0.14), 0 0 28px rgba(239,68,68,0.10), 0 18px 44px rgba(0,0,0,0.70);
}

.auth-footer{ margin-top: 12px; display:flex; justify-content:center; gap:8px; font-size: 12px; color: rgba(217,226,242,0.78); }
.auth-link{ color: rgba(59,130,246,0.95); text-decoration: none; font-weight: 900; }
.auth-link:hover{ text-decoration: underline; }

/* Desktop: muestra splash */
@media (min-width: 980px){
  .auth-splash{ display:block; }
}

/* =========================
   HEADER PRO / NAV PRO
   ========================= */

.header.header-pro{
  position: sticky;
  top: 0;
  z-index: 1000;
  margin-bottom: 10px;

  background:
    radial-gradient(circle at 20% 20%, rgba(168,85,247,0.12), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(59,130,246,0.10), transparent 60%),
    rgba(10,12,20,0.55);

  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 18px 60px rgba(0,0,0,0.55);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
}

.brand .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(168,85,247,0.95);
  box-shadow: 0 0 18px rgba(168,85,247,0.55);
  display:inline-block;
}

.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-title{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;
}
.brand-sub{
  margin-top: 3px;
  font-size: 11px;
  opacity: .72;
}

/* NAV desktop */
.nav.nav-pro{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.nav.nav-pro a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;

  font-weight: 800;
  font-size: 13px;
  color: rgba(240,245,255,0.88);

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset;

  transition: transform .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}

.nav.nav-pro a:hover{
  transform: translateY(-2px);
  filter: saturate(1.12) contrast(1.05);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}

/* Activo (pill pro) */
.nav.nav-pro a.active{
  background: linear-gradient(90deg, rgba(168,85,247,0.40), rgba(59,130,246,0.35));
  border-color: rgba(168,85,247,0.25);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 12px 28px rgba(0,0,0,0.45);
}

/* Separador */
.nav-sep{
  width: 10px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: .8;
}

/* Logout más peligroso/pro */
.nav.nav-pro a.nav-logout{
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.20);
}
.nav.nav-pro a.nav-logout:hover{
  background: rgba(239,68,68,0.14);
  border-color: rgba(239,68,68,0.28);
}

/* Botón hamburguesa (solo móvil) */
.nav-toggle{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset;
  cursor:pointer;
  padding: 10px;
  gap: 5px;
  flex-direction: column;
  justify-content:center;
}

.nav-toggle span{
  display:block;
  height: 2px;
  width: 100%;
  background: rgba(240,245,255,0.85);
  border-radius: 999px;
  transition: transform .16s ease, opacity .16s ease;
}

.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Móvil: nav tipo drawer */
@media (max-width: 980px){
  .header-inner{ align-items:flex-start; }
  .nav-toggle{ display:flex; }

  .nav.nav-pro{
    position: absolute;
    top: calc(100% + 10px);
    right: 14px;
    left: 14px;

    display:none;
    padding: 12px;
    border-radius: 18px;

    background: rgba(10,12,20,0.72);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    box-shadow: 0 24px 60px rgba(0,0,0,0.70);

    gap: 10px;
    justify-content: flex-start;
  }

  .nav.nav-pro.is-open{ display:flex; }

  .nav.nav-pro a{
    flex: 1 1 calc(50% - 10px);
    min-width: 140px;
  }

  .nav-sep{ display:none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .nav.nav-pro a, .nav-toggle span{ transition:none !important; }
  .nav.nav-pro a:hover{ transform:none; }
}

/* ===== Titulo fuera del menu ===== */

.game-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.game-title .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#a855f7;
  box-shadow:0 0 18px rgba(168,85,247,.6);
}

.game-name{
  font-weight:900;
  font-size:20px;
}

.game-sub{
  font-size:11px;
  opacity:.7;
}

/* header ahora solo menu */

.header.header-pro{
  padding:12px;
}

.header-inner{
  justify-content:center;
}

/* menu centrado */

.nav.nav-pro{
  justify-content:center;
}

/* en movil igual */

@media(max-width:980px){
  .header-inner{
    justify-content:space-between;
  }
}

.game-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.game-title .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#a855f7;
  box-shadow:0 0 18px rgba(168,85,247,.6);
}

.game-name{
  font-weight:900;
  font-size:20px;
}

.game-sub{
  font-size:11px;
  opacity:.7;
}

.header-inner{
  justify-content:center;
}

.nav.nav-pro{
  justify-content:center;
}