/* Helbreath Alianza - estilo oficial.
   Paleta sacada de la portada real del juego: piedra negra, acero, brasas naranjas
   y oro. Rojo (Aresden) contra azul (Elvine). */

:root {
  --bg: #0a0908;
  --bg-2: #100d0b;
  --panel: #15110e;
  --panel-2: #1c1713;
  --line: #2f2519;
  --line-2: #443423;

  --text: #ded4c2;
  --muted: #8e8371;
  --dim: #635a4c;

  --gold: #c79a48;
  --gold-soft: #a8864a;
  --ember: #d4571f;
  --ember-2: #8a3a14;

  --red: #c0392b;      /* Aresden */
  --blue: #2e6fd6;     /* Elvine */
  --green: #3ec46d;
  --steel: #a3adb8;

  --radius: 10px;
  --maxw: 1180px;
  --shadow: 0 10px 34px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Fondo vivo pero BARATO: brasas y niebla con gradientes, cero imagenes extra.
   No hay video ni gifs -> no pesa ni ralentiza el movil. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 600px at 12% -8%, rgba(192, 57, 43, .13), transparent 62%),
    radial-gradient(1100px 600px at 88% -6%, rgba(46, 111, 214, .11), transparent 62%),
    radial-gradient(900px 700px at 50% 108%, rgba(212, 87, 31, .09), transparent 60%),
    var(--bg);
}

/* Textura sutil de piedra (ruido en CSS puro). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 4px);
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: #e5bd6b; }

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; letter-spacing: .5px; margin: 0 0 .6em; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; color: #ece2cd; }
h3 { font-size: 1.12rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------- cabecera */
header.top {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(10,9,8,.97), rgba(10,9,8,.88));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(9px);
}
.top .wrap { display: flex; align-items: center; gap: 18px; height: 66px; }
.top .brand img { height: 40px; display: block; }

nav.menu { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap; }
nav.menu a {
  padding: 8px 12px; border-radius: 7px; color: var(--muted);
  font-size: 13.5px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; transition: .16s;
}
nav.menu a:hover { color: var(--text); background: rgba(255,255,255,.05); }
nav.menu a.active { color: var(--gold); background: rgba(199,154,72,.10); }

.burger {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  color: var(--text); font-size: 20px; border-radius: 8px; padding: 5px 11px; cursor: pointer;
}

/* ---------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: 8px; border: 1px solid transparent;
  font-weight: 700; font-size: 14px; letter-spacing: .8px; text-transform: uppercase;
  cursor: pointer; transition: .18s; text-align: center;
}
.btn-primary {
  background: linear-gradient(180deg, #c8571f, #8f3a13);
  border-color: #d97a3a; color: #fff;
  box-shadow: 0 5px 20px rgba(200, 87, 31, .30);
}
.btn-primary:hover { filter: brightness(1.13); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,.04); border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--gold-soft); color: var(--gold); }
.btn-discord { background: #5865f2; border-color: #7983f5; color: #fff; }
.btn-discord:hover { filter: brightness(1.12); color: #fff; }
.btn-sm { padding: 7px 14px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #000;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url("/static/img/hero.jpg") center/cover no-repeat;
  opacity: .40;
  transform: scale(1.06);
  animation: drift 32s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: scale(1.06) translate(0,0); } to { transform: scale(1.12) translate(-14px,-10px); } }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,.30) 0%, rgba(10,9,8,.72) 62%, var(--bg) 100%);
}
.hero-inner { position: relative; z-index: 2; text-align: center; padding: 74px 20px 60px; }
.hero-logo { max-width: 620px; width: 88%; filter: drop-shadow(0 8px 30px rgba(0,0,0,.8)); }
.hero-tag {
  margin: 6px 0 30px; color: #b6a893; font-size: 15px;
  letter-spacing: 5px; text-transform: uppercase; font-weight: 600;
}
.hero-tag .ares { color: #e0685c; }
.hero-tag .elv { color: #6ea3ee; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* barra de guerra rojo vs azul */
.warbar { height: 3px; display: flex; }
.warbar i { flex: 1; }
.warbar i:first-child { background: linear-gradient(90deg, var(--red), rgba(192,57,43,.15)); }
.warbar i:last-child { background: linear-gradient(90deg, rgba(46,111,214,.15), var(--blue)); }

/* ---------------------------------------------------------------- tarjetas */
.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card h3 { color: var(--gold); margin-bottom: 12px; }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

/* franja de estadisticas en vivo */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: -40px 0 46px; position: relative; z-index: 5; }
.stat {
  background: linear-gradient(180deg, #191410, #120f0c);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 18px 16px; text-align: center; box-shadow: var(--shadow);
}
.stat .k { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }
.stat .v { font-size: 30px; font-weight: 800; font-family: Georgia, serif; color: #f0e6d2; line-height: 1.25; }
.stat .v.on { color: var(--green); }
.stat .v.off { color: #e05a4d; }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.dot.on { background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 2s infinite; }
.dot.off { background: #e05a4d; box-shadow: 0 0 10px #e05a4d; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

section { padding: 46px 0; }
.section-title { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.section-title h2 { margin: 0; }
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }

/* ---------------------------------------------------------------- ranking */
.rank-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid transparent;
}
.rank-row + .rank-row { margin-top: 3px; }
.rank-row:nth-child(odd) { background: rgba(255,255,255,.018); }
.rank-pos { width: 30px; text-align: center; font-weight: 800; color: var(--dim); font-size: 14px; }
.rank-name { flex: 1; font-weight: 600; }
.rank-val { font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.rank-lv { color: var(--dim); font-size: 12px; margin-left: 6px; }

.rank-row.p1 { background: linear-gradient(90deg, rgba(199,154,72,.16), transparent); border-color: rgba(199,154,72,.35); }
.rank-row.p2 { background: linear-gradient(90deg, rgba(180,190,200,.11), transparent); border-color: rgba(180,190,200,.25); }
.rank-row.p3 { background: linear-gradient(90deg, rgba(176,110,58,.12), transparent); border-color: rgba(176,110,58,.28); }
.rank-row.p1 .rank-pos, .rank-row.p2 .rank-pos, .rank-row.p3 .rank-pos { font-size: 17px; }

.medal { font-size: 17px; }

/* ---------------------------------------------------------------- tablas */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
tbody tr:hover { background: rgba(255,255,255,.025); }

/* rarezas */
.tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.tag.comun { background: rgba(160,160,160,.14); color: #b9b9b9; }
.tag.medio { background: rgba(70,160,90,.15); color: #6fcf90; }
.tag.raro { background: rgba(60,120,220,.16); color: #7aa9f0; }
.tag.elite { background: rgba(200,90,30,.17); color: #e8944f; }
.tag.boss { background: rgba(192,57,43,.20); color: #ef7a6c; }

/* ---------------------------------------------------------------- formularios */
label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 6px; font-weight: 700; }
input[type=text], input[type=password], input[type=email], input[type=number], select, textarea {
  width: 100%; padding: 11px 13px; border-radius: 8px;
  background: #0d0b09; border: 1px solid var(--line-2); color: var(--text);
  font-size: 15px; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-soft); box-shadow: 0 0 0 3px rgba(199,154,72,.10); }
.field { margin-bottom: 16px; }
textarea { resize: vertical; min-height: 120px; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }
.alert.err { background: rgba(192,57,43,.13); border: 1px solid rgba(192,57,43,.42); color: #f0a79e; }
.alert.ok { background: rgba(62,196,109,.11); border: 1px solid rgba(62,196,109,.38); color: #8fe3ac; }
.alert.info { background: rgba(46,111,214,.11); border: 1px solid rgba(46,111,214,.35); color: #9dc0f2; }

.narrow { max-width: 460px; margin: 0 auto; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }

/* ---------------------------------------------------------------- pie */
footer {
  margin-top: 60px; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.42));
  padding: 40px 0 26px;
}
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; }
footer h4 { color: var(--gold); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 12px; }
footer a { display: block; color: var(--muted); font-size: 14px; padding: 3px 0; }
footer a:hover { color: var(--gold); }
.copyright { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12.5px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .g4, .stats { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: 1fr 1fr; }
  footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .burger { display: block; }
  nav.menu {
    display: none; position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; background: #0e0c0a; border-bottom: 1px solid var(--line);
    padding: 10px; gap: 2px;
  }
  nav.menu.open { display: flex; }
  nav.menu a { padding: 12px 14px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; margin-top: -26px; }
  .hero-inner { padding: 48px 16px 42px; }
  .hero-tag { letter-spacing: 3px; font-size: 12.5px; }
  h1 { font-size: 1.6rem; }
  footer .cols { grid-template-columns: 1fr; }
  .table-scroll { overflow-x: auto; }
}


/* ============================================================
   PREMIUM UI (2026-07-25): limites del servidor + pulido visual.
   Bloque autocontenido y facil de revertir (borrar de aqui abajo).
   ============================================================ */
#st-uptime { font-size: 24px; font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .5px; }

/* Tarjeta: Nivel / Stat / Critical maximos */
.server-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  text-align: center; padding: 22px 16px; margin: 0 0 30px; position: relative; overflow: hidden;
  background:
    radial-gradient(130% 150% at 50% -25%, rgba(199,154,72,.12), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 34px rgba(0,0,0,.42); }
.server-caps::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .55; }
.server-caps .cap { padding: 6px 4px; }
.server-caps .cap + .cap { border-left: 1px solid var(--line); }
.server-caps .cap-k { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }
.server-caps .cap-v { font-size: 36px; font-weight: 800; font-family: Georgia, serif; line-height: 1.12; margin-top: 6px;
  color: var(--gold);
  background: linear-gradient(180deg, #f6e2ab, var(--gold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 26px rgba(199,154,72,.22); }
@media (max-width: 560px) { .server-caps { grid-template-columns: 1fr; }
  .server-caps .cap + .cap { border-left: 0; border-top: 1px solid var(--line); padding-top: 12px; } }

/* Elevacion + brillo dorado al pasar el mouse (tarjetas y stats) */
html { scroll-behavior: smooth; }
.card, .stat { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease; }
.card:hover, .stat:hover { transform: translateY(-4px); border-color: var(--gold-soft);
  box-shadow: 0 16px 42px rgba(0,0,0,.55), 0 0 0 1px rgba(199,154,72,.20), 0 6px 30px rgba(199,154,72,.10); }
.server-caps:hover { transform: translateY(-4px); }

/* Stats con efecto vidrio y filo dorado superior */
.stat { position: relative; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(28,23,19,.74), rgba(21,17,14,.74));
  -webkit-backdrop-filter: blur(9px) saturate(1.1); backdrop-filter: blur(9px) saturate(1.1); }
.stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .45; }
.stat .v { text-shadow: 0 2px 18px rgba(199,154,72,.16); }
.stat .v.on { text-shadow: 0 2px 20px rgba(62,196,109,.28); }

/* Botones con micro-interaccion */
.btn { transition: transform .18s ease, box-shadow .25s ease, filter .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: 0 12px 32px rgba(212,87,31,.38); filter: brightness(1.05); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .stat, .btn, .server-caps { transition: none; }
  .card:hover, .stat:hover, .btn:hover, .server-caps:hover { transform: none; }
}


/* Tienda de Coins: un poco mas ancha que .narrow para que el catalogo de 2 columnas
   no se salga del contenedor; asi la tarjeta "Enviar a" y la rejilla quedan alineadas. */
.narrow.shop { max-width: 720px; }


/* Pildora compacta "Apertura oficial" (owner 2026-07-31): mismo look que la maqueta premium que le
   gusto, con punto ambar (mamey) que parpadea. Reusa @keyframes pulse (el mismo del punto verde de estado). */
.opening {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(10, 9, 8, .6);
  font-size: 13.5px; letter-spacing: .3px;
}
.opening b { color: var(--gold); }
.opening .pip {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ember); box-shadow: 0 0 10px var(--ember);
  animation: pulse 2s infinite;
}

/* ---- Selector de idioma (owner 2026-09-19) ------------------------------------ */
details.langpick { position: relative; }
details.langpick > summary {
  list-style: none; cursor: pointer; padding: 8px 12px; border-radius: 7px;
  color: var(--muted); font-size: 13.5px; font-weight: 600; letter-spacing: .4px;
  transition: .16s; user-select: none;
}
details.langpick > summary::-webkit-details-marker { display: none; }
details.langpick > summary:hover,
details.langpick[open] > summary { color: var(--text); background: rgba(255,255,255,.05); }
details.langpick > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.langpick-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 230px;
  padding: 6px; background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
nav.menu .langpick-list a { text-transform: none; letter-spacing: 0; font-size: 14px; padding: 8px 10px; }
@media (max-width: 720px) {
  .langpick-list { position: static; margin-top: 4px; box-shadow: none; }
}


/* ---- Cadena de las gemas magicas (guia) — owner 2026-09-20 --------------------- */
.gem-chain { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.gem-step { flex: 1; min-width: 210px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px; }
.gem-imgs { display: flex; gap: 6px; align-items: flex-end; min-height: 42px; margin-bottom: 6px; flex-wrap: wrap; }
.gem-imgs img { height: 34px; image-rendering: pixelated; }
.gem-cap { font-weight: 700; color: var(--gold); margin-bottom: 2px; }
.gem-arrow { align-self: center; color: var(--gold); font-size: 22px; }
@media (max-width: 720px) { .gem-arrow { display: none; } }


/* ---------------------------------------------------------------------------------------------
   --- cursor del juego (owner 2026-09-21) -----------------------------------------------------
   El guantelete es el MISMO sprite del cliente: frame 0 y 1 del sprite 8 de
   interface/game_dialogs.pak. Los numeros detras de la url son el punto exacto que "pincha"
   (el hotspot), sacados del pivote que trae el propio sprite. Siempre va un cursor normal de
   respaldo detras por si el png no carga o el navegador no lo admite.
   --------------------------------------------------------------------------------------------- */
html, body { cursor: url("/static/img/cursor/arrow.png") 1 1, default; }

a, button, summary, label, select, details, [role="button"], .dt-chip, .dt-mapa, .dt-sug-it,
.dt-link, .ver-mas, input[type="submit"], input[type="button"], input[type="checkbox"],
input[type="radio"] { cursor: url("/static/img/cursor/hand.png") 4 7, pointer; }

/* En campos de texto se deja el cursor del sistema: ahi hace falta ver donde se escribe. */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], textarea { cursor: text; }

/* Boton de silencio, abajo a la derecha. Discreto, pero a mano. */
.snd-toggle { position: fixed; right: 14px; bottom: 14px; z-index: 90; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid var(--line-2); background: rgba(21,17,14,.92); color: var(--muted);
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.5); transition: color .15s, border-color .15s; }
.snd-toggle:hover { color: var(--gold); border-color: var(--gold-soft); }
@media print { .snd-toggle { display: none; } }

/* Split de bandos ahora (owner 2026-09-25) */
.stat .faction-nums{font-variant-numeric:tabular-nums;font-weight:700}
.stat .faction-nums .fac-sep{opacity:.55;font-weight:400;margin:0 6px;font-size:.8em}
.stat .fac-reco{font-size:12px;margin-top:3px;opacity:.9}