/* ==========================================================================
   Giga-Blade · «Noche de Midgard»
   Sistema de diseno del portal. Sin JavaScript (CSP estricta): todo es CSS.
   Orden: 1 tokens · 2 base · 3 maquetacion · 4 cabecera/pie · 5 botones · 6 avisos
          7 formularios · 8 paneles y piezas · 9 inicio · 10 registro · 11 cuenta
          12 ficha de personaje · 13 wiki y paginas ajenas · 14 movimiento y accesibilidad
   Modo oscuro = «noche» (por defecto). Modo claro = «amanecer», disenado aparte.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Superficies */
  --fondo: #0a0e1f;
  --panel: #121a36;
  --campo: #0b1126;
  --borde: #2a3563;
  --borde-suave: #1d2650;
  --linea-campo: #6a76a8;
  /* Texto */
  --tinta: #f2ebdb;
  --tinta-suave: #b4b9d3;
  --titulo: #f8f1de;
  /* Oro envejecido: ornamento y titulos */
  --oro: #d9b36a;
  --oro-brillo: #f0cf8a;
  --oro-hondo: #8c6a2a;
  --oro-suave: rgba(217, 179, 106, .12);
  --filete: rgba(217, 179, 106, .32);
  --sobre-oro: #241a05;
  /* Rosa del Poring: color de accion */
  --acento: #ff8fb0;
  --acento-oscuro: #ffa8c3;
  --acento-suave: #2e1a3f;
  --accion-1: #ff9db8;
  --accion-2: #f0638d;
  --accion-texto: #2a0a17;
  --accion-brillo: rgba(240, 99, 141, .45);
  /* Semanticos */
  --ok: #6fe0a5;
  --ok-suave: #12352c;
  --error: #ff9d8f;
  --error-suave: #3f1a24;
  --foco: #f0cf8a;
  /* Sombras y radios */
  --sombra: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 14px 34px -14px rgba(2, 4, 16, .8);
  --sombra-hover: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 20px 40px -14px rgba(2, 4, 16, .9), 0 0 0 1px var(--filete);
  --radio: 14px;
  --radio-chico: 10px;
  /* Escala de espaciado (4 px) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px;
  --gutter: 16px;
  /* Tipografia: pilas del sistema (sin fuentes web) */
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Escenografia dependiente del tema */
  --cabecera: rgba(8, 12, 30, .94);
  --pie: #070a18;
  --cielo: linear-gradient(180deg, #060919 0%, #0b1131 34%, #151b50 62%, #28235e 82%, #46306e 100%);
  --cielo-perfil: linear-gradient(180deg, #0a0f2a 0%, #141b4d 55%, #2a2360 100%);
  --luna-fondo: radial-gradient(circle at 61% 63%, rgba(150, 130, 90, .34) 0 5.5%, transparent 6.5%), radial-gradient(circle at 33% 57%, rgba(150, 130, 90, .26) 0 9%, transparent 10%), radial-gradient(circle at 55% 29%, rgba(150, 130, 90, .24) 0 4.5%, transparent 5.5%), radial-gradient(circle at 36% 34%, #fffdf2, #f6e7c0 46%, #d6bf88);
  --luna-brillo: 0 0 36px 8px rgba(255, 236, 190, .26), 0 0 150px 70px rgba(139, 111, 224, .24);
  --brillo-castillo: rgba(139, 111, 224, .55);
  --cresta-1: #131a45;
  --cresta-2: #0a0e1f;
  --estrellas: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520'><g fill='%23fff3d6'><g fill-opacity='0.6'><circle cx='125' cy='144' r='0.5'/><circle cx='147' cy='453' r='0.9'/><circle cx='132' cy='321' r='0.5'/><circle cx='336' cy='198' r='0.7'/><circle cx='470' cy='326' r='0.5'/><circle cx='258' cy='257' r='0.9'/><circle cx='399' cy='391' r='0.5'/><circle cx='441' cy='72' r='0.9'/><circle cx='340' cy='464' r='0.5'/><circle cx='106' cy='142' r='0.5'/><circle cx='333' cy='250' r='0.5'/></g><g fill-opacity='0.3'><circle cx='440' cy='44' r='0.5'/><circle cx='66' cy='381' r='0.5'/><circle cx='403' cy='17' r='0.9'/><circle cx='145' cy='517' r='0.5'/><circle cx='78' cy='35' r='0.9'/><circle cx='134' cy='191' r='0.7'/><circle cx='507' cy='287' r='0.9'/><circle cx='252' cy='499' r='0.9'/><circle cx='261' cy='214' r='0.7'/><circle cx='324' cy='287' r='0.9'/><circle cx='146' cy='516' r='0.7'/><circle cx='30' cy='5' r='0.7'/><circle cx='217' cy='10' r='0.7'/></g><g fill-opacity='0.45'><circle cx='410' cy='141' r='0.7'/><circle cx='334' cy='204' r='0.9'/><circle cx='420' cy='379' r='0.5'/><circle cx='80' cy='240' r='0.7'/><circle cx='71' cy='18' r='0.7'/><circle cx='268' cy='145' r='0.9'/><circle cx='105' cy='282' r='0.7'/><circle cx='123' cy='272' r='0.7'/><circle cx='371' cy='382' r='0.7'/><circle cx='478' cy='224' r='0.9'/><circle cx='470' cy='396' r='0.5'/><circle cx='253' cy='194' r='0.5'/><circle cx='50' cy='510' r='0.5'/></g><g fill-opacity='1'><circle cx='65' cy='300' r='1.3'/></g><g fill-opacity='0.7'><circle cx='316' cy='237' r='1.6'/></g><g fill-opacity='0.85'><circle cx='36' cy='0' r='1'/></g></g><path d='M488 366h6M491 363v6M330 418h6M333 415v6' stroke='%23ffe2a0' stroke-width='.8' stroke-opacity='.8' stroke-linecap='round'/></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='760' height='760'><g fill='%23fff3d6'><g fill-opacity='0.6'><circle cx='186' cy='277' r='0.7'/><circle cx='623' cy='196' r='0.5'/><circle cx='319' cy='370' r='0.9'/><circle cx='645' cy='236' r='0.7'/><circle cx='55' cy='416' r='0.7'/><circle cx='33' cy='531' r='0.5'/><circle cx='716' cy='495' r='0.5'/><circle cx='306' cy='240' r='0.9'/><circle cx='641' cy='391' r='0.5'/><circle cx='293' cy='33' r='0.9'/><circle cx='465' cy='480' r='0.5'/></g><g fill-opacity='0.3'><circle cx='177' cy='371' r='0.9'/><circle cx='179' cy='175' r='0.5'/><circle cx='325' cy='584' r='0.5'/><circle cx='652' cy='448' r='0.5'/><circle cx='427' cy='711' r='0.7'/><circle cx='54' cy='469' r='0.5'/><circle cx='205' cy='515' r='0.5'/><circle cx='472' cy='301' r='0.5'/></g><g fill-opacity='0.45'><circle cx='109' cy='172' r='0.5'/><circle cx='315' cy='759' r='0.5'/><circle cx='227' cy='549' r='0.7'/></g><g fill-opacity='0.85'><circle cx='402' cy='692' r='1.6'/></g><g fill-opacity='1'><circle cx='96' cy='503' r='1.3'/></g></g><path d='M325 351h10M330 346v10M313 355h8M317 351v8M68 615h10M73 610v10' stroke='%23ffe2a0' stroke-width='.8' stroke-opacity='.8' stroke-linecap='round'/></svg>");
  --estrellas-brillo: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='640'><g fill='%23fff3d6'><g fill-opacity='1'><circle cx='152' cy='469' r='1.6'/><circle cx='231' cy='319' r='1'/><circle cx='180' cy='511' r='1.3'/><circle cx='429' cy='157' r='1.3'/></g><g fill-opacity='0.7'><circle cx='42' cy='103' r='1.3'/><circle cx='541' cy='303' r='1.6'/><circle cx='304' cy='627' r='1.3'/><circle cx='153' cy='571' r='1.3'/><circle cx='568' cy='341' r='1.3'/><circle cx='102' cy='51' r='1.6'/><circle cx='64' cy='293' r='1.3'/></g><g fill-opacity='0.45'><circle cx='627' cy='228' r='0.7'/></g></g><path d='M256 406h6M259 403v6M155 76h8M159 72v8M568 589h6M571 586v6M308 113h8M312 109v8' stroke='%23ffe2a0' stroke-width='.8' stroke-opacity='.8' stroke-linecap='round'/></svg>");
  --fondo-cuerpo:
    radial-gradient(900px 520px at 84% -20px, rgba(122, 95, 208, .22), transparent 70%),
    radial-gradient(760px 480px at 4% 60px, rgba(60, 92, 210, .15), transparent 70%),
    linear-gradient(180deg, #0c1232 0, #0a0e1f 340px);
  --halo: rgba(255, 246, 222, .85);
  --vidrio: rgba(10, 14, 36, .66);
  --arte: linear-gradient(180deg, #1c2566, #141b46 72%, #121a36);
  --medallon: radial-gradient(circle at 50% 24%, #7d89c2 0, #414c88 55%, #232b5c 100%);
  --aro: conic-gradient(from 200deg, #8c6a2a, #f3d794, #b48c3e, #fbe8b4, #8c6a2a 55%, #d9b36a, #8c6a2a);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --fondo: #f7f0e1;
      --panel: #fffaf0;
      --campo: #fffdf8;
    --borde: #dccfb2;
    --borde-suave: #ebe0c8;
    --linea-campo: #8a8368;
    --tinta: #1e2347;
    --tinta-suave: #4a4f75;
    --titulo: #171b3d;
    --oro: #765209;
    --oro-brillo: #674706;
    --oro-hondo: #b58a2c;
    --oro-suave: rgba(134, 96, 15, .1);
    --filete: rgba(134, 96, 15, .34);
    --sobre-oro: #ffffff;
    --acento: #c0305f;
    --acento-oscuro: #9d1f4a;
    --acento-suave: #fde4ea;
    --accion-1: #c8346a;
    --accion-2: #a52252;
    --accion-texto: #ffffff;
    --accion-brillo: rgba(165, 34, 82, .35);
    --ok: #17703f;
    --ok-suave: #dff2e6;
    --error: #a8231b;
    --error-suave: #fbe4e1;
    --foco: #2c36a8;
    --sombra: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 30px -16px rgba(70, 50, 20, .38);
    --sombra-hover: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 36px -14px rgba(70, 50, 20, .45), 0 0 0 1px var(--filete);
    --cabecera: rgba(255, 250, 240, .95);
    --pie: #ecdfc3;
    --cielo: linear-gradient(180deg, #b6c3ee 0%, #d4d2f0 32%, #f3d9dc 62%, #fbe3c9 84%, #fff0d6 100%);
    --cielo-perfil: linear-gradient(180deg, #c3cdf0 0%, #e6d8ee 55%, #fbe0d0 100%);
    --luna-fondo: radial-gradient(circle at 40% 38%, #fffbea, #ffe1a8 52%, #f7b982);
    --luna-brillo: 0 0 50px 16px rgba(255, 205, 150, .55), 0 0 170px 90px rgba(255, 170, 160, .3);
    --brillo-castillo: rgba(255, 214, 160, .7);
    --cresta-1: #bdb6dd;
    --cresta-2: #f7f0e1;
    --estrellas: none;
    --estrellas-brillo: none;
    --fondo-cuerpo:
      radial-gradient(1000px 520px at 82% -30px, rgba(255, 196, 150, .5), transparent 68%),
      radial-gradient(800px 480px at 0% 40px, rgba(176, 190, 255, .38), transparent 70%),
      linear-gradient(180deg, #f3e9d6 0, #f7f0e1 340px);
    --halo: rgba(30, 35, 71, .55);
    --vidrio: rgba(255, 250, 240, .8);
    --arte: linear-gradient(180deg, #d3d0f1, #f3e6e6 72%, #fffaf0);
    --medallon: radial-gradient(circle at 50% 24%, #fbf0d2 0, #e3c98f 58%, #bd9b55 100%);
    --aro: conic-gradient(from 200deg, #7a560c, #d9b261, #9f7620, #efd291, #7a560c 55%, #c69a3c, #7a560c);
    color-scheme: light;
  }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--fondo); scroll-padding-top: 88px; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--fondo);
  background-image: var(--estrellas), var(--fondo-cuerpo);
  color: var(--tinta);
  font: 1rem/1.6 var(--sans);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
a { color: var(--acento-oscuro); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--oro-brillo); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; letter-spacing: .005em; margin: 0 0 .55em; color: var(--titulo); text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
code { font: .9em var(--mono); background: var(--oro-suave); color: var(--oro-brillo); border: 1px solid var(--filete); padding: .08em .45em; border-radius: 6px; overflow-wrap: anywhere; }
pre { overflow-x: auto; }
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: .88rem; }
hr { border: 0; border-top: 1px solid var(--borde); margin: var(--e5) 0; }
small { font-size: .85em; }
.num { font-variant-numeric: tabular-nums; }
.txt { color: var(--tinta-suave); }

/* Antetitulo: versalitas pequenas, espaciadas, doradas */
.antetitulo {
  display: flex; align-items: center; gap: .8em;
  margin: 0 0 .7em;
  font: 700 .74rem/1.2 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--oro);
}
.antetitulo::before { content: ""; width: 1.8em; height: 1px; background: currentColor; opacity: .75; flex: none; }
.entrada { color: var(--tinta-suave); font-size: 1.08rem; margin-top: 0; max-width: 60ch; }

/* ---------- 3. Maquetacion ---------- */
.contenedor { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.principal { padding-top: var(--e6); padding-bottom: var(--e8); }
main { flex: 1; min-width: 0; }
main:focus { outline: none; }
.avisos { padding-top: var(--e5); }
.avisos .aviso:last-child { margin-bottom: 0; }
.avisos + .principal { padding-top: var(--e5); }
@media (min-width: 720px) { :root { --gutter: 24px; } .principal { padding-top: var(--e7); } }

.saltar {
  position: absolute; left: var(--e4); top: -80px; z-index: 100;
  background: var(--panel); color: var(--tinta); border: 2px solid var(--oro); border-radius: var(--radio-chico);
  padding: .7em 1.1em; font-weight: 700; text-decoration: none;
}
.saltar:focus { top: var(--e3); }

.divisor {
  display: block; width: min(100%, 440px); height: 28px; margin: var(--e7) auto;
  background: linear-gradient(90deg, var(--oro-hondo), var(--oro-brillo) 50%, var(--oro-hondo));
  -webkit-mask: url("divisor.svg") center / contain no-repeat; mask: url("divisor.svg") center / contain no-repeat;
  opacity: .9;
}
.seccion__cab { margin-bottom: var(--e5); }
.seccion__cab h2 { margin-bottom: 0; }
.seccion__cab--centro { text-align: center; }
.seccion__cab--centro .antetitulo { justify-content: center; }
.seccion__cab--centro .antetitulo::after { content: ""; width: 1.8em; height: 1px; background: currentColor; opacity: .75; }

/* ---------- 4. Cabecera y pie ---------- */
.cabecera { position: relative; z-index: 30; background: var(--cabecera); border-bottom: 1px solid var(--borde-suave); }
.cabecera::after {
  content: ""; position: absolute; inset: auto 0 -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--filete) 18%, var(--oro) 50%, var(--filete) 82%, transparent); opacity: .8;
}
@media (min-width: 720px) { .cabecera { position: sticky; top: 0; } }
.cabecera__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--e5); min-height: 72px; }
.marca { display: inline-flex; align-items: center; gap: 12px; padding-block: 8px; color: var(--tinta); text-decoration: none; }
.marca:hover { color: var(--tinta); }
.marca__sello {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid transparent;
  background: radial-gradient(circle at 50% 30%, #4a56a6, #151c48) padding-box, var(--aro) border-box;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6);
}
.marca__sello img { display: block; width: 30px; height: 30px; }
.marca__texto { display: grid; gap: 4px; }
.marca__nombre { font: 700 1.4rem/1 var(--serif); letter-spacing: .01em; }
.marca__lema { font: 700 .62rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--oro); }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e1); }
.menu a:not(.boton), .enlace {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radio-chico);
  font: 600 .95rem var(--sans); color: var(--tinta-suave); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.menu a:not(.boton):hover, .enlace:hover { color: var(--tinta); background: var(--oro-suave); }
.menu a[aria-current="page"] { color: var(--tinta); }
.menu a[aria-current="page"]::after { content: ""; position: absolute; inset: auto 14px 6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--oro-hondo), var(--oro-brillo), var(--oro-hondo)); }
.menu .boton { margin-left: var(--e2); }
.en-linea { display: inline-flex; margin: 0; }
@media (max-width: 719px) {
  .cabecera__fila { min-height: 0; padding-top: 4px; }
  .menu { width: 100%; justify-content: space-between; border-top: 1px solid var(--borde-suave); margin-top: 2px; padding: 4px 0; }
  .menu a:not(.boton), .enlace { padding: 0 10px; }
  .menu .boton { margin-left: 0; }
}
@media (max-width: 359px) {
  .menu a:not(.boton), .enlace { padding: 0 7px; font-size: .9rem; }
  .menu .boton { padding-inline: .8em; font-size: .88rem; }
}

.pie { position: relative; margin-top: var(--e7); background: var(--pie); color: var(--tinta-suave); font-size: .9rem; padding: var(--e7) 0 var(--e6); }
.pie::before {
  content: ""; position: absolute; inset: auto 0 100%; height: clamp(48px, 9vw, 110px); pointer-events: none;
  background: var(--pie); -webkit-mask: url("cresta-cerca.svg") bottom / 100% 100% no-repeat; mask: url("cresta-cerca.svg") bottom / 100% 100% no-repeat;
}
.pie::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--filete) 30%, var(--oro) 50%, var(--filete) 70%, transparent); opacity: .6; }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3) var(--e5); }
.pie p { margin: 0; }
.pie__marca { display: inline-flex; align-items: center; gap: 10px; font: 700 1.1rem var(--serif); color: var(--tinta); }
.pie__marca img { width: 28px; height: 28px; }
.pie__texto { max-width: 52ch; }

/* ---------- 5. Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 46px; padding: .55em 1.5em;
  font: 700 .98rem/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; text-align: center; cursor: pointer;
  color: var(--accion-texto);
  background: linear-gradient(180deg, var(--accion-1), var(--accion-2));
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 20px -8px var(--accion-brillo);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.boton:hover { color: var(--accion-texto); filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 12px 26px -8px var(--accion-brillo); }
.boton:active { transform: translateY(0); filter: brightness(.96); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.boton--secundario { color: var(--oro-brillo); background: transparent; border: 1.5px solid var(--oro); box-shadow: none; }
.boton--secundario:hover { color: var(--oro-brillo); background: var(--oro-suave); filter: none; box-shadow: 0 0 0 3px var(--oro-suave); }
.boton--chico { min-height: 44px; padding: .35em 1.1em; font-size: .92rem; }
.boton--grande { min-height: 54px; padding: .6em 2em; font-size: 1.05rem; }
.boton--ancho { display: flex; width: 100%; margin-top: var(--e2); }
.boton .icono { width: 1.15em; height: 1.15em; }
.icono { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }

/* ---------- 6. Avisos ---------- */
.aviso {
  --av: var(--oro); --av-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.4M12 7.6v.2'/%3E%3C/svg%3E");
  display: flex; align-items: flex-start; gap: var(--e3);
  margin: 0 0 var(--e4); padding: 14px 18px;
  color: var(--tinta); background: color-mix(in srgb, var(--av) 11%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--av) 55%, transparent); border-left: 4px solid var(--av); border-radius: var(--radio-chico);
}
.aviso::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; background: var(--av);
  -webkit-mask: var(--av-icono) center / contain no-repeat; mask: var(--av-icono) center / contain no-repeat;
}
.aviso ul { margin: 0; padding-left: 1.15em; flex: 1; min-width: 0; }
.aviso li + li { margin-top: .3em; }
.aviso--ok { --av: var(--ok); --av-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M7.8 12.4l3 3 5.6-6'/%3E%3C/svg%3E"); }
.aviso--error { --av: var(--error); --av-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8l9.3 16.2H2.7z'/%3E%3Cpath d='M12 10v4.4M12 17.4v.2'/%3E%3C/svg%3E"); }

/* ---------- 7. Formularios ---------- */
.formulario { max-width: 640px; margin-inline: auto; }
.formulario--angosto { max-width: 480px; }
.campo { display: block; margin: 0 0 var(--e4); border: 0; padding: 0; min-width: 0; }
.campo > span, .campo legend { display: block; margin-bottom: 7px; padding: 0; font-weight: 700; font-size: .93rem; color: var(--tinta); }
.campo em { font-weight: 400; font-style: normal; color: var(--tinta-suave); }
.campo small { display: block; margin-top: 6px; font-size: .84rem; line-height: 1.45; color: var(--tinta-suave); }
input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="search"], select {
  display: block; width: 100%; min-height: 48px; padding: .6em .9em;
  font: inherit; color: var(--tinta); background: var(--campo);
  border: 1px solid var(--linea-campo); border-radius: var(--radio-chico);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18) inset; transition: border-color .15s, box-shadow .15s;
}
select { appearance: auto; }
input::placeholder { color: var(--tinta-suave); opacity: .8; }
input:hover, select:hover { border-color: var(--oro); }
input:focus-visible, select:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-color: var(--foco); }
input:user-invalid { border-color: var(--error); box-shadow: 0 0 0 1px var(--error), 0 2px 6px rgba(0, 0, 0, .18) inset; }
.campo:has(input:user-invalid) small { color: var(--error); font-weight: 600; }
.campo:has(input:user-invalid) small::before { content: "Revisa este campo · "; }
input:disabled { opacity: .6; cursor: not-allowed; }
input[type="date"] { min-height: 48px; }
.dos-columnas { display: grid; gap: 0 var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.opciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.opcion {
  display: inline-flex; align-items: center; gap: .6em; min-height: 48px; padding: 0 1.1em; cursor: pointer;
  background: var(--campo); border: 1px solid var(--linea-campo); border-radius: var(--radio-chico); color: var(--tinta);
  transition: border-color .15s, background .15s;
}
.opcion input { width: 1.15em; height: 1.15em; margin: 0; accent-color: var(--acento); }
.opcion:hover { border-color: var(--oro); }
.opcion:has(input:checked) { border-color: var(--oro); background: var(--oro-suave); font-weight: 600; }
.opcion:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.nota { margin: var(--e4) 0 0; font-size: .92rem; color: var(--tinta-suave); }
.nota a { display: inline-block; padding: 2px 0; }
.grupo__titulo { display: flex; align-items: center; gap: .6em; margin: 0 0 var(--e4); font: 700 .74rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.grupo__titulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--filete), transparent); }
.grupo + .grupo { margin-top: var(--e6); }

/* ---------- 8. Paneles y piezas ---------- */
.tarjeta, .tar {
  position: relative; min-width: 0;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: var(--e5);
}
.tarjeta::before, .tar::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid var(--filete); border-radius: calc(var(--radio) - 5px); opacity: .55;
}
.tarjeta > h2:first-child, .tar > h2:first-child { margin-top: 0; }
@media (max-width: 559px) { .tarjeta, .tar { padding: var(--e4) 18px; } }

.etiqueta {
  display: inline-flex; align-items: center; gap: .4em; padding: .2em .7em; border-radius: 999px;
  font: 700 .76rem/1.3 var(--sans); letter-spacing: .02em;
  color: var(--acento-oscuro); background: var(--acento-suave); border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent);
}
.etiqueta--gm { color: var(--sobre-oro); background: linear-gradient(180deg, var(--oro-brillo), var(--oro)); border-color: transparent; }
.etiqueta--ok { color: var(--ok); background: var(--ok-suave); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.etiqueta--ok::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }
.contador {
  display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 .45em; margin-left: .3em; vertical-align: .15em;
  font: 700 .8rem/1 var(--sans); color: var(--sobre-oro); background: linear-gradient(180deg, var(--oro-brillo), var(--oro)); border-radius: 999px;
}
.vacio { color: var(--tinta-suave); }
.cifra { display: block; font: 700 clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem)/1 var(--serif); color: var(--oro-brillo); font-variant-numeric: tabular-nums; }
.cifra__texto { display: block; margin-top: 6px; font-size: .84rem; letter-spacing: .04em; color: var(--tinta-suave); }

/* Datos clave/valor */
.datos { display: grid; grid-template-columns: minmax(max-content, 12.5em) minmax(0, 1fr); gap: 0 var(--e4); margin: 0; }
.datos dt, .datos dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--borde-suave); }
.datos dt { color: var(--tinta-suave); font-size: .9rem; }
.datos dd { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.datos dt:nth-last-of-type(1), .datos dd:last-of-type { border-bottom: 0; }

/* ---------- 9. Inicio ---------- */
.heroe { position: relative; isolation: isolate; overflow: hidden; background: var(--cielo); min-height: clamp(580px, 46vw, 680px); display: flex; align-items: center; }
.heroe__estrellas, .heroe__titileo { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.heroe__estrellas { background: var(--estrellas); opacity: .9; }
.heroe__titileo { background: var(--estrellas-brillo); animation: titilar 6s ease-in-out infinite alternate; }
.heroe__luna { position: absolute; z-index: -2; top: 9%; right: clamp(6%, 17vw, 24%); width: clamp(104px, 15vw, 210px); aspect-ratio: 1; border-radius: 50%; background: var(--luna-fondo); box-shadow: var(--luna-brillo); }
.heroe__paisaje { position: absolute; z-index: -1; inset: auto 0 0; height: clamp(230px, 34vw, 560px); background: url("prontera-noche.svg") 66% 100% / cover no-repeat; pointer-events: none; }
.heroe::before { content: ""; position: absolute; z-index: -2; inset: auto 0 0; height: 78%; pointer-events: none; background: radial-gradient(ellipse 36% 60% at 71% 76%, var(--brillo-castillo), transparent 72%); }
.heroe__contenido { position: relative; width: 100%; padding-block: 76px 210px; }
.heroe__texto { max-width: min(600px, 62%); }
@media (max-width: 719px) { .heroe__texto { max-width: none; } }
.heroe h1 { font-size: clamp(2.5rem, 1.5rem + 4.6vw, 4.5rem); line-height: 1.04; margin-bottom: .35em; text-shadow: 0 2px 30px rgba(8, 10, 40, .6); }
.heroe h1 span { display: block; color: var(--oro-brillo); }
.heroe .entrada { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--tinta); opacity: .92; }
.heroe__poring { position: absolute; z-index: 1; top: 30%; right: clamp(5%, 14vw, 19%); width: clamp(100px, 14vw, 190px); pointer-events: none; animation: flotar 6.5s ease-in-out infinite; }
.heroe__poring img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 24px rgba(255, 90, 140, .38)); }
@media (prefers-color-scheme: light) {
  .heroe__paisaje { background-image: url("prontera-alba.svg"); }
  .heroe h1 { text-shadow: 0 2px 24px rgba(255, 255, 255, .6); }
  .heroe .antetitulo, .perfil .antetitulo { color: var(--oro-brillo); }
  .heroe .entrada { color: var(--tinta); opacity: 1; }
  .heroe__poring img { filter: drop-shadow(0 14px 22px rgba(190, 40, 90, .3)); }
}
@media (max-width: 719px) {
  .heroe { min-height: 0; display: block; }
  .heroe__contenido { padding-block: 44px 280px; }
  .heroe__luna { top: auto; bottom: 36%; right: 8%; }
  .heroe__poring { top: auto; bottom: 150px; right: 22%; }
  .heroe__paisaje { background-position: 72% 100%; height: 260px; }
}

/* Estado del reino: franja que se apoya en el borde inferior del heroe */
.estado-reino { display: grid; gap: var(--e4) var(--e6); margin-top: -56px; padding: var(--e5) var(--e6) var(--e6); z-index: 2; }
@media (min-width: 720px) { .estado-reino { margin-top: -88px; } }
.estado-reino__cab h2 { margin: 0; }
.estado-reino__cab .antetitulo { margin-bottom: .4em; }
.estado { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.estado__item { display: grid; grid-template-columns: auto 1fr; column-gap: var(--e3); align-items: center; padding: var(--e3) var(--e4); background: var(--campo); border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.estado__item .icono { grid-row: span 2; width: 26px; height: 26px; color: var(--oro); }
.estado__nombre { font-size: .86rem; color: var(--tinta-suave); line-height: 1.3; }
.estado__valor { display: inline-flex; align-items: center; gap: .55em; font-size: 1rem; line-height: 1.3; }
.punto { position: relative; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.punto--ok { background: var(--ok); }
.punto--ok::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--ok); animation: pulso 2.4s ease-out infinite; }
.punto--caido { background: transparent; border: 2px solid var(--error); }
.estado__item--caido { border-color: color-mix(in srgb, var(--error) 55%, var(--borde)); background: var(--error-suave); }
.estado__item--caido .estado__valor { color: var(--error); }
.estado__item--caido .icono { color: var(--error); }
.estado__item--ok .estado__valor { color: var(--ok); }
.cifras { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4) var(--e6); }
@media (min-width: 640px) { .estado { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) {
  .estado-reino { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cab cab" "estado cifras"; align-items: center; }
  .estado-reino__cab { grid-area: cab; }
  .estado-reino .estado { grid-area: estado; }
  .estado-reino .cifras { grid-area: cifras; padding-left: var(--e6); border-left: 1px solid var(--filete); }
}
@media (max-width: 999px) { .estado-reino .cifras { padding-top: var(--e4); border-top: 1px solid var(--borde-suave); } }

.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: var(--e5); }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.paso { counter-increment: paso; padding-top: calc(var(--e5) + 22px); }
.paso::after {
  content: counter(paso); position: absolute; top: -22px; left: var(--e5);
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  font: 700 1.4rem/1 var(--serif); color: var(--oro-brillo);
  border: 2px solid transparent; background: radial-gradient(circle at 50% 30%, #3a4590, #131a40) padding-box, var(--aro) border-box;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .55);
}
@media (prefers-color-scheme: light) { .paso::after { color: #fff2cf; } }
.paso h3 { margin-bottom: .4em; }
.paso p { color: var(--tinta-suave); margin-bottom: .8em; }
.paso p:last-child { margin-bottom: 0; }
.paso__datos { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e3) 0 0; padding: 0; list-style: none; }
.paso__datos li { display: inline-flex; align-items: baseline; gap: .5em; padding: .3em .7em; background: var(--campo); border: 1px solid var(--borde); border-radius: var(--radio-chico); font-size: .85rem; color: var(--tinta-suave); }
.paso__datos code { background: none; border: 0; padding: 0; font-size: 1rem; font-weight: 700; color: var(--oro-brillo); user-select: all; }   /* un clic selecciona la IP/puerto para copiarlos */
.banda { display: grid; gap: var(--e4) var(--e5); align-items: center; margin-top: var(--e7); }
.banda .icono { width: 40px; height: 40px; color: var(--oro); }
.banda h2 { margin-bottom: .2em; font-size: 1.4rem; }
.banda p { margin: 0; color: var(--tinta-suave); }
@media (min-width: 720px) { .banda { grid-template-columns: auto 1fr auto; } }
/* ---------- 10. Registro, entrar y error ---------- */
.registro { display: grid; gap: var(--e6); align-items: start; }
.registro__emblema { display: block; width: 62px; aspect-ratio: 80 / 96; margin-bottom: var(--e4); background: url("emblema.svg") center / contain no-repeat; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .4)); }
.registro .formulario { max-width: none; margin: 0; }
.registro__notas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.registro__notas li { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: start; color: var(--tinta-suave); font-size: .95rem; line-height: 1.5; }
.registro__notas strong { display: block; color: var(--tinta); font-size: 1rem; }
.registro__notas .icono { width: 28px; height: 28px; margin-top: 2px; color: var(--oro); }
@media (min-width: 920px) {
  .registro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "intro form" "notas form"; column-gap: var(--e7); }
  .registro__intro { grid-area: intro; }
  .registro__form { grid-area: form; }
  .registro__notas { grid-area: notas; align-self: start; }
}
.formulario > h1 { margin-top: 0; }
.formulario .aviso { margin-bottom: var(--e5); }
.formulario--angosto { text-align: left; }
.formulario--angosto:not(.error) { margin-top: 44px; padding-top: 56px; }
.formulario--angosto:not(.error)::after {
  content: ""; position: absolute; top: -40px; left: 50%; width: 60px; height: 72px; margin-left: -30px;
  background: url("emblema.svg") center / contain no-repeat; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45));
}
.formulario--angosto:not(.error) > h1, .formulario--angosto:not(.error) > .entrada { text-align: center; margin-inline: auto; }
.cerrado { text-align: center; }
.cerrado .icono { display: block; width: 44px; height: 44px; margin: 0 auto var(--e3); color: var(--oro); }
.error { text-align: center; margin-top: 48px; }
.error h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); }
.error__poring { display: block; width: 84px; height: 84px; margin: 0 auto var(--e3); filter: drop-shadow(0 10px 16px rgba(255, 90, 140, .3)); animation: flotar 6s ease-in-out infinite; }

/* ---------- 11. Cuenta ---------- */
.perfil { position: relative; isolation: isolate; overflow: hidden; background: var(--cielo-perfil); padding-block: var(--e6) clamp(70px, 10vw, 118px); }
.perfil::before { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--estrellas); opacity: .85; }
.perfil__crestas { position: absolute; inset: auto 0 0; height: clamp(90px, 13vw, 170px); z-index: -1; pointer-events: none; }
.perfil__crestas::before, .perfil__crestas::after { content: ""; position: absolute; inset: 0; }
.perfil__crestas::before { background: var(--cresta-1); -webkit-mask: url("cresta-lejos.svg") bottom / 100% 100% no-repeat; mask: url("cresta-lejos.svg") bottom / 100% 100% no-repeat; opacity: .9; }
.perfil__crestas::after { top: 28%; background: var(--cresta-2); -webkit-mask: url("cresta-cerca.svg") bottom / 100% 100% no-repeat; mask: url("cresta-cerca.svg") bottom / 100% 100% no-repeat; }
.perfil__fila { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e4) var(--e5); align-items: center; }
.emblema {
  display: grid; place-items: center; width: clamp(76px, 12vw, 104px); aspect-ratio: 80 / 96;
  background: url("escudo.svg") center / contain no-repeat; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5));
}
.emblema__inicial { margin-top: -6%; font: 700 clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem)/1 var(--serif); color: #fbe7b3; text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 18px rgba(255, 210, 120, .45); }
.perfil__nombre { margin: 0 0 .3em; font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem); overflow-wrap: anywhere; }
.perfil__nombre span { color: var(--oro-brillo); }
.insignias { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; padding: 0; list-style: none; }
.insignia {
  display: inline-flex; align-items: center; gap: .45em; padding: .35em .9em .35em .7em; border-radius: 999px;
  font: 700 .82rem/1.3 var(--sans); letter-spacing: .02em; color: var(--tinta); background: var(--vidrio); border: 1px solid var(--filete);
}
.insignia .icono { width: 1.2em; height: 1.2em; color: var(--oro); }
.insignia--gm { color: var(--sobre-oro); background: linear-gradient(180deg, var(--oro-brillo), var(--oro)); border-color: transparent; }
.insignia--gm .icono { color: var(--sobre-oro); }
.insignia--vip { color: var(--oro-brillo); border-color: var(--oro); }
.resumen { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; background: var(--vidrio); border: 1px solid var(--filete); border-radius: var(--radio); }
.resumen li { flex: 1 1 auto; min-width: 0; padding: 14px 22px; text-align: center; }
.resumen li + li { border-left: 1px solid var(--filete); }
.resumen .cifra { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); overflow-wrap: anywhere; }
.resumen .cifra__texto { margin-top: 4px; }
.perfil__resumen { grid-column: 1 / -1; }
@media (min-width: 900px) { .perfil__fila { grid-template-columns: auto minmax(0, 1fr) auto; } .perfil__resumen { grid-column: auto; } }
@media (max-width: 479px) { .resumen li { padding: 12px 8px; } .perfil__fila { gap: var(--e3) var(--e4); } }

.cuenta__personajes { margin-top: calc(-1 * var(--e5)); }
.personajes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.personajes > li { display: flex; min-width: 0; }
.personaje {
  --m: 104px;
  position: relative; isolation: isolate; overflow: hidden; flex: 1;
  display: grid; justify-items: center; align-content: start; gap: 7px; text-align: center;
  padding: 20px 18px 16px; color: var(--tinta); text-decoration: none;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.personaje::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 112px; background: var(--estrellas), var(--arte); }
.personaje::after { content: ""; position: absolute; z-index: -1; inset: 5px; border: 1px solid var(--filete); border-radius: calc(var(--radio) - 5px); opacity: .5; }
.personaje:hover { color: var(--tinta); border-color: var(--oro); transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.personaje:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.personaje__avatar {
  position: relative; flex: none; width: var(--m); aspect-ratio: 1; margin-bottom: 4px; border-radius: 50%;
  border: 4px solid transparent; background: var(--medallon) padding-box, var(--aro) border-box;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .35);
}
.personaje__avatar svg { display: block; width: 112%; max-width: none; height: 112%; margin: -1% 0 0 -6%; clip-path: circle(44.6% at 50% 45.5%); filter: drop-shadow(0 0 1.5px var(--halo)); }
.personaje--activo .personaje__avatar::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--ok); animation: pulso 2.4s ease-out infinite; }
.personaje__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; min-width: 0; max-width: 100%; }
.personaje__nombre { font: 700 1.3rem/1.15 var(--serif); color: var(--titulo); overflow-wrap: anywhere; min-width: 0; }
.personaje__clase { font: 700 .72rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); overflow-wrap: anywhere; }
.personaje__niveles { display: flex; gap: var(--e2); margin-top: 4px; }
.nivel { display: inline-flex; align-items: baseline; gap: .45em; padding: .25em .8em; font-size: .9rem; background: var(--campo); border: 1px solid var(--borde); border-radius: 999px; }
.nivel small { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.nivel b { font-variant-numeric: tabular-nums; }
.personaje__zeny { display: inline-flex; align-items: center; gap: .45em; font-variant-numeric: tabular-nums; color: var(--oro-brillo); max-width: 100%; }
.personaje__zeny b { font: 700 1.15rem var(--serif); overflow-wrap: anywhere; }
.personaje__zeny small { color: var(--tinta-suave); font-size: .78rem; }
.personaje__zeny .icono { width: 1.3em; height: 1.3em; }
.personaje__pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; width: 100%; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--borde-suave); font-size: .86rem; color: var(--tinta-suave); }
.personaje__pie span { display: inline-flex; align-items: center; gap: .4em; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.personaje__pie .icono { width: 1.1em; height: 1.1em; color: var(--oro); }
.personaje__ver { display: inline-flex; align-items: center; gap: .4em; margin-top: 2px; font-size: .84rem; font-weight: 700; color: var(--acento-oscuro); }
.personaje:hover .personaje__ver { color: var(--oro-brillo); }
.personaje__ver .icono { transition: transform .18s; }
.personaje:hover .personaje__ver .icono { transform: translateX(3px); }
@media (max-width: 559px) {
  .personaje { --m: 84px; grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: var(--e4); align-content: center; padding: 16px; }
  .personaje::before { inset: 0 auto 0 0; width: 118px; height: auto; }
  .personaje__avatar { grid-row: 1 / span 6; align-self: center; margin: 0; }
  .personaje__cabeza, .personaje__pie { justify-content: flex-start; }
  .personaje__pie { margin-top: 2px; padding-top: 8px; }
}
.personaje-vacio { display: grid; justify-items: center; gap: var(--e3); padding: var(--e7) var(--e5); text-align: center; border: 1.5px dashed var(--filete); border-radius: var(--radio); background: var(--panel); }
.personaje-vacio img { width: 76px; height: 76px; filter: grayscale(.2) drop-shadow(0 10px 16px rgba(255, 90, 140, .25)); animation: flotar 6s ease-in-out infinite; }
.personaje-vacio p { margin: 0; max-width: 46ch; }

.cuenta__resto { display: grid; gap: var(--e5); margin-top: var(--e7); align-items: start; }
@media (min-width: 960px) { .cuenta__resto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.datos--cuenta { display: block; }
.dato { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px var(--e4); padding: 12px 0; border-bottom: 1px solid var(--borde-suave); }
.dato:first-child { padding-top: 0; }
.dato:last-child { border-bottom: 0; padding-bottom: 0; }
.dato dt { display: inline-flex; align-items: center; gap: .6em; padding: 0; border: 0; color: var(--tinta-suave); font-size: .9rem; }
.dato dt .icono { width: 1.2em; height: 1.2em; color: var(--oro); }
.dato dd { margin: 0; padding: 0; border: 0; min-width: 0; max-width: 100%; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.ajustes { display: grid; gap: var(--e5); scroll-margin-top: 96px; }
.ajustes > .seccion__cab { margin-bottom: 0; }
.ajustes h3 { margin-top: 0; }
.ajustes .nota { margin: 0 0 var(--e4); }
.ajustes .avisos { display: none; padding: 0; }
.ajustes .avisos .aviso { margin-bottom: 0; }
.cuenta__resto:has(#ajustes:target) .ajustes .avisos { display: block; }
body:has(#ajustes:target) .avisos--arriba { display: none; }

/* ---------- 12. Ficha de personaje (HTML ajeno: se maqueta solo con CSS) ---------- */
.migas { margin: 0 0 var(--e5); font-size: .92rem; }
.migas a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--borde); border-radius: 999px;
  background: var(--panel); color: var(--tinta-suave); font-weight: 600; text-decoration: none;
}
.migas a:hover { color: var(--tinta); border-color: var(--oro); }
.ficha { display: grid; gap: var(--e5); margin-bottom: var(--e5); }
.ficha__nombre { order: 1; display: grid; gap: 4px; justify-items: start; }
.ficha__izq { order: 2; }
.ficha__col { order: 3; }
.ficha__nombre__clase { order: -1; font: 700 .78rem/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--oro); overflow-wrap: anywhere; }
.ficha__nombre__txt { font: 700 clamp(2.1rem, 1.2rem + 3.6vw, 3.4rem)/1.05 var(--serif); color: var(--titulo); overflow-wrap: anywhere; }
.ficha__nombre .etiqueta { margin-top: var(--e2); }
.ficha__izq {
  width: 100%; max-width: 320px; margin-inline: auto; padding: 10px;
  border: 3px solid transparent; border-radius: 24px;
  background: var(--medallon) padding-box, var(--aro) border-box;
  box-shadow: 0 24px 44px -18px rgba(0, 0, 0, .7);
}
.ficha__izq svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.ficha__col { display: grid; gap: var(--e5); align-content: start; align-items: start; min-width: 0; }
.ficha__col > .datos { position: relative; padding: var(--e3) var(--e5); background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.ficha__col > .datos::before { content: ""; position: absolute; inset: 5px; pointer-events: none; border: 1px solid var(--filete); border-radius: calc(var(--radio) - 5px); opacity: .55; }
.ficha .tar { margin: 0; }
.tar__titulo { margin: 0 0 .7em; font-size: 1.25rem; color: var(--oro-brillo); }
.tar__sub { margin: 1.4em 0 .7em; font: 700 .74rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.tar .tabla { width: 100%; border-collapse: collapse; margin: 0; }
.tar .tabla tr { border-bottom: 1px solid var(--borde-suave); }
.tar .tabla tr:last-child { border-bottom: 0; }
.tar .tabla .tabla__col-etiqueta { width: 38%; }   /* <col> de personaje.html: sin style="" por la CSP */
.tar .tabla .tabla__col-nivel { width: 90px; }
.tar .tbl__k { padding: 10px 6px 10px 0; text-align: left; font-weight: 500; color: var(--tinta-suave); font-size: .92rem; }
.tar .tbl__v { padding: 10px 0 10px 6px; text-align: right; font-weight: 700; font-size: .92rem; overflow-wrap: anywhere; }
.tar .tbl__v--num { font-variant-numeric: tabular-nums; font-family: var(--serif); font-size: 1.05rem; color: var(--oro-brillo); }
.atributos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); margin: 0; }
.atributos__fila { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; background: var(--campo); border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.atributos__lbl { font: 700 .72rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.atributos__val { font: 700 1.6rem/1.1 var(--serif); font-variant-numeric: tabular-nums; color: var(--titulo); }
@media (min-width: 760px) {
  .ficha { grid-template-columns: minmax(230px, 320px) minmax(0, 1fr); column-gap: var(--e6); align-items: start; }
  .ficha__nombre { grid-column: 1 / -1; grid-row: 1; }
  .ficha__izq { grid-column: 1; grid-row: 2; position: sticky; top: 96px; margin-inline: 0; }
  .ficha__col { grid-column: 2; grid-row: 2; }
}
@media (min-width: 1000px) { .ficha { column-gap: var(--e7); } }
@media (min-width: 1120px) {
  .ficha__col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha__col > :nth-child(-n+2) { grid-column: 1 / -1; }
  .ficha__col > .datos { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: var(--e5); }
  .ficha__col > .datos dt:nth-of-type(even) { padding-left: var(--e3); }
  .ficha .atributos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- 13. Wiki y paginas ajenas: compatibilidad sin tocar wiki.css ---------- */
.wiki-subnav { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0 0 var(--e5); }
.wiki-subnav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--borde); border-radius: 999px; background: var(--panel); color: var(--tinta-suave); font-weight: 600; text-decoration: none; }
.wiki-subnav__link:hover { color: var(--tinta); border-color: var(--oro); }
.wiki-subnav__link--activa, .wiki-subnav__link--activa:hover { color: var(--sobre-oro); background: linear-gradient(180deg, var(--oro-brillo), var(--oro)); border-color: transparent; }
.wiki-dl { display: grid; grid-template-columns: minmax(max-content, 12em) minmax(0, 1fr); gap: 0 var(--e4); margin: var(--e4) 0; }
.wiki-dl dt, .wiki-dl dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--borde-suave); }
.wiki-dl dt { color: var(--tinta-suave); font-size: .92rem; }
.wiki-dl dd { font-weight: 600; overflow-wrap: anywhere; }
.wiki-item__aegis { font: .55em var(--mono); color: var(--tinta-suave); font-weight: 400; }
.wiki-item__desc { white-space: pre-line; color: var(--tinta-suave); }
.wiki-item__script { padding: var(--e4); background: var(--campo); border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.wiki-const { border: 0; }
.wiki-buscar input[type="search"] { min-height: 48px; padding: .6em .9em; border: 1px solid var(--linea-campo); background: var(--campo); border-radius: var(--radio-chico); }
.wiki-buscar select { width: auto; flex: none; }
.wiki-cabeza h1 { margin-top: 0; }
.wiki-linea > summary { min-height: 44px; }
.wiki-linea__titulo { font-family: var(--serif); font-size: 1.3rem; color: var(--titulo); }
.wiki-punto--ok { border-color: var(--ok); }
.wiki-ficha__niveles .cifra { text-align: center; }
html body .wiki-estado--gm, html body .wiki-marca--gm { color: var(--sobre-oro); background: linear-gradient(180deg, var(--oro-brillo), var(--oro)); }
.wiki-chip__nombre { color: var(--tinta); }
/* wiki_mob.html usa el skin antiguo de wiki.css con fondos claros fijos: se fija tinta oscura para que se lea tambien en modo oscuro */
.monstruo, .info-panel, .monster-drops { color: #2c2118; }
.monstruo h3, .info-panel h3, .monster-drops h3 { color: #2c2118; }
.info-panel a, .monster-drops a { color: #7a1d3c; }
.clear { clear: both; }

/* ---------- 14. Movimiento y accesibilidad ---------- */
@keyframes flotar { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
@keyframes pulso { 0% { transform: scale(.85); opacity: .85; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes titilar { from { opacity: .2; } to { opacity: 1; } }
:where(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
::selection { background: var(--oro); color: var(--sobre-oro); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .boton:hover, .personaje:hover, .personaje:hover .personaje__ver .icono { transform: none; }
  .heroe__titileo { opacity: .55; }
}
@media (forced-colors: active) {
  .tarjeta, .tar, .boton, .personaje, .estado__item, input, select, .opcion, .resumen, .insignia, .etiqueta, .aviso, .ficha__izq, .personaje__avatar { border: 1px solid CanvasText; }
  .heroe__estrellas, .heroe__titileo, .heroe__luna, .heroe__paisaje, .perfil__crestas, .divisor, .pie::before { display: none; }
  .punto--ok { background: Highlight; }
}