/* ============================================================
   LAMUS — sistema de diseño
   Tema LIGHT por defecto + override [data-theme="dark"] (night mode).
   El acento (--accent) lo pone cada juego inline; el neutro es la
   marca roja LAMUS (--brand).
   ============================================================ */
:root {
    /* Marca */
    --brand:    #e5352b;
    --brand-2:  #b32218;
    --accent:   #e5352b;   /* fallback; cada juego lo pisa */
    --accent-2: #b32218;
    /* Acento legible como TEXTO (se oscurece en light para contraste) */
    --accent-ink: color-mix(in srgb, var(--accent) 72%, #0a0a0a);
    /* Acento de fondo para botones (oscurecido -> texto blanco siempre legible) */
    --accent-solid: color-mix(in srgb, var(--accent) 82%, #141414);

    /* Paleta LIGHT (por defecto) */
    --bg:       #f3f4f6;
    --bg-2:     #e9ebef;
    --panel:    #ffffff;
    --panel-2:  #ffffff;
    --line:     #e4e7ec;
    --line-2:   #d3d8e0;
    --text:     #171923;
    --muted:    #667085;
    --input-bg: #f7f8fa;
    --topbar-bg:rgba(255,255,255,.85);
    --shadow:   0 10px 30px rgba(20,20,50,.08);
    --shadow-lg:0 20px 50px rgba(20,20,50,.14);

    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --radius: 8px;
    --radius-sm: 6px;
    --pill: 999px;
}
:root[data-theme="dark"] {
    --bg:       #161617;
    --bg-2:     #1e1e20;
    --panel:    #202022;
    --panel-2:  #202022;
    --line:     #2c2c2f;
    --line-2:   #3a3a3e;
    --text:     #e8e9ec;
    --muted:    #9a9aa2;
    --input-bg: #161617;
    --topbar-bg:rgba(22,22,23,.85);
    --shadow:   0 10px 30px rgba(0,0,0,.4);
    --shadow-lg:0 20px 50px rgba(0,0,0,.55);
    /* En dark aclaramos el acento para que resalte como texto */
    --accent-ink: color-mix(in srgb, var(--accent) 82%, #ffffff);
    --accent-solid: var(--accent);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
/* Los controles nativos siguen el theme del sitio (no el del SO) */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Estilo base para TODOS los campos (los que no tienen clase propia usaban el nativo oscuro) */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
select, textarea {
    background: var(--input-bg); color: var(--text);
    border: 1px solid var(--line-2); border-radius: var(--radius-sm);
    font-family: inherit; font-size: .95rem; padding: 8px 11px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
body {
    margin: 0; color: var(--text); background: var(--bg);
    font-family: var(--font); letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased; min-height: 100vh;
    transition: background .25s, color .25s;
}
a { color: var(--accent-ink); text-decoration: none; transition: color .15s; }
a:hover { color: var(--text); }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.015em; margin: 0 0 .4em; }
.wrap { width: min(1200px, 92vw); margin: 0 auto; }
.main { padding: 40px 0 80px; }

/* ---------- Topbar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.topbar.has-sub { border-bottom: none; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.net-brand { display: flex; align-items: baseline; gap: 7px; }
.net-name { font-weight: 600; font-size: 1.5rem; letter-spacing: .5px; color: var(--brand); }
.net-logo { height: 26px; width: auto; display: block; }
.net-sub  { font-weight: 600; font-size: .72rem; letter-spacing: 3px; color: var(--muted); text-transform: uppercase; }

.game-switch { display: flex; align-items: center; gap: 6px; }
.gs-item { position: relative; padding: 8px 13px; border-radius: var(--radius-sm); color: var(--muted); font-weight: 500; font-size: .92rem; }
.gs-item:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.gs-item.active { color: var(--text); }
.gs-item.active::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2px; background: var(--brand); border-radius: 2px; }
.gs-item.soon { opacity: .55; cursor: default; }
.gs-item.soon:hover { background: transparent; color: var(--muted); }
.soon-tag { font-size: .58rem; vertical-align: super; color: var(--accent); margin-left: 3px; text-transform: uppercase; letter-spacing: .5px; }
.gs-sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; }
.gs-account { color: var(--muted); font-weight: 600; font-size: .92rem; padding: 8px 4px; }
.gs-account:hover { color: var(--text); }
/* Chip de cuenta (avatar + nombre) */
.acc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--pill); border: none; background: transparent; color: var(--text); font-weight: 600; font-size: .9rem; }
.acc-chip:hover { color: var(--accent-ink); }
.acc-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.acc-av-ph { display: inline-grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 600; font-size: .9rem; }
.acc-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: none; background: transparent; color: var(--text); cursor: pointer; font-size: 1.05rem; line-height: 1; opacity: .8; }
.theme-toggle:hover { opacity: 1; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: inline; }

.nav-toggle, .nav-burger { display: none; }

/* Dropdown Wiki */
.gs-dd { position: relative; }
.gs-dd > summary { list-style: none; cursor: pointer; }
.gs-dd > summary::-webkit-details-marker { display: none; }
.gs-menu { position: absolute; top: 100%; left: 0; min-width: 190px; margin-top: 6px; padding: 6px; z-index: 60;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.gs-menu a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--text); font-weight: 600; font-size: .9rem; }
.gs-menu a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
.subnav-dd { display: flex; align-items: center; }
.subnav-dd > summary { display: flex; align-items: center; line-height: 1; color: var(--muted); font-weight: 600; font-size: .95rem; cursor: pointer; list-style: none; }
.subnav-dd > summary::-webkit-details-marker { display: none; }
.subnav-dd > summary:hover, .subnav-dd > summary.active { color: var(--text); }
.subnav-dd .gs-menu a { display: block; text-transform: none; letter-spacing: 0; }

/* Drop Table */
.inv-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--pill); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #fff; background: #c0392b; vertical-align: middle; }
/* Drop Table filtros */
.drop-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.drop-filters input[type="text"], .drop-filters select { padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--input-bg); color: var(--text); font-family: inherit; font-size: 1rem; }
.drop-filters input[type="text"] { flex: 1; min-width: 200px; }
.drop-filters select:focus, .drop-filters input:focus { outline: none; border-color: var(--accent); }

/* Event Timer */
.ev-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.ev-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ev-cat { display: inline-block; padding: 3px 10px; border-radius: var(--pill); font-size: .72rem; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: .5px; }
.ev-when { color: var(--muted); font-size: .82rem; font-weight: 600; text-transform: capitalize; }
.ev-name { font-size: 1.1rem; font-weight: 600; color: var(--text); }
.ev-zone { color: var(--muted); font-size: .84rem; margin-top: 3px; }
.ev-countdown { margin-top: 12px; font-size: 1.7rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-ink); letter-spacing: .5px; }
.ev-countdown.soon { color: #e8a33d; }
.ev-countdown.live { color: #2ec26a; }
td.ev-cd { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-ink); white-space: nowrap; }
td.ev-cd.soon { color: #e8a33d; }
td.ev-cd.live { color: #2ec26a; }
.ev-row .ev-cat { display: inline-block; padding: 3px 10px; border-radius: var(--pill); font-size: .72rem; font-weight: 600; color: #fff; }

/* Paginador */
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.pager-info { color: var(--muted); font-weight: 600; font-size: .9rem; }

/* Página de reglamento / artículos */
.article { max-width: 840px; margin: 0 auto; }
.rules-sec { margin-bottom: 30px; }
.rules-sec > h2 { font-size: 1.4rem; color: var(--text); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 16px; }
.rule { margin-bottom: 16px; }
.rule h3 { font-size: 1rem; color: var(--accent-ink); margin-bottom: 4px; }
.rule p { color: var(--muted); margin: 0 0 8px; line-height: 1.65; }

/* ---------- Botones ---------- */
.btn { display: inline-block; padding: 10px 20px; border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem; border: 1px solid transparent; cursor: pointer; transition: filter .15s, background .15s, border-color .15s, transform .1s; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 8px 15px; font-size: .88rem; }
.btn-lg { padding: 14px 30px; font-size: 1.05rem; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-primary { color: #fff; background: var(--accent-solid); }
.btn-primary:hover { color: #fff; filter: brightness(1.08); }
/* CTA de la topbar (Crear cuenta): rojo de marca, legible en cualquier tema */
header.topbar .btn-primary { background: var(--brand); box-shadow: none; }
header.topbar .btn-primary:hover { background: var(--brand-2); filter: none; box-shadow: none; }
.btn-ghost { color: var(--text); border-color: var(--line-2); background: transparent; }
.btn-ghost:hover { color: var(--text); border-color: var(--accent); }
.btn-secondary { color: var(--text); background: var(--panel); border-color: var(--line-2); }
.btn-secondary:hover { color: var(--text); border-color: var(--accent); }

/* ---------- Subbar (juego activo) ---------- */
.subbar { background: transparent; border-top: 1px solid var(--line); border-bottom: none; }
.subbar-inner { display: flex; align-items: center; gap: 22px; height: 48px; }
.subbar-game { font-weight: 600; color: var(--accent-ink); }
.subnav { display: flex; align-items: center; gap: 20px; }
.subnav a, .subnav-dd > summary { display: inline-flex; align-items: center; line-height: 1; }
.subnav a { color: var(--muted); font-weight: 600; font-size: .95rem; }
.subnav a:hover, .subnav a.active { color: var(--text); }
/* Estado del servidor (derecha del subbar) */
.srv-status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; }
.srv-label { color: var(--muted); font-weight: 600; }
.srv-status .srv-dot { width: 10px; height: 10px; border-radius: 50%; }
.srv-status.on { color: #2ec26a; } .srv-status.on .srv-dot { background: #2ec26a; box-shadow: 0 0 8px #2ec26a; }
.srv-status.off { color: #e5544a; } .srv-status.off .srv-dot { background: #e5544a; box-shadow: 0 0 8px #e5544a; }

/* ---------- Landing: banners de juego ---------- */
.games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.game-banner {
    position: relative; display: block; min-height: 330px; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--line); background: #10131a; box-shadow: var(--shadow);
    color: #fff; transition: transform .2s, box-shadow .2s;
}
.game-banner.wide { grid-column: 1 / -1; min-height: 260px; }
.game-banner:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: #fff; }
.gb-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .4s; }
.game-banner:hover .gb-img { transform: scale(1.05); }
.gb-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,16,.15) 0%, rgba(8,10,16,.55) 60%, rgba(8,10,16,.85) 100%); }
.gb-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 34px; }
.gb-title { font-family: var(--font); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; margin: 0; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.gb-sub { margin: 6px 0 0; color: rgba(255,255,255,.85); font-weight: 500; font-size: 1.05rem; }
.gb-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 600; font-size: .9rem; color: #fff; background: color-mix(in srgb, var(--gc, var(--brand)) 85%, #000); padding: 8px 16px; border-radius: var(--pill); }
.game-banner.soon { pointer-events: auto; }
.game-banner.soon .gb-body { opacity: .96; }

/* Cinta de esquina */
.gb-ribbon { position: absolute; top: 20px; right: -46px; transform: rotate(45deg); background: var(--brand); color: #fff; font-weight: 600; font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; padding: 6px 60px; box-shadow: 0 4px 12px rgba(0,0,0,.3); }

/* ---------- Hero (páginas de juego) ---------- */
.hero { position: relative; text-align: center; padding: 70px 24px 56px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: var(--panel); }
.hero .eyebrow { color: var(--accent-ink); letter-spacing: 3px; text-transform: uppercase; font-weight: 600; font-size: .82rem; }
.hero h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); line-height: 1.03; margin: 12px 0 10px; color: var(--text); }
.hero p.lead { color: var(--muted); font-size: 1.15rem; max-width: 620px; margin: 0 auto 28px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Hero con imagen de fondo del juego */
.hero-img { border: none; color: #fff;
    background-image: linear-gradient(180deg, rgba(8,10,16,.45), rgba(8,10,16,.86)), var(--hero-img);
    background-size: cover; background-position: center; }
.hero-img h1 { color: #fff; }
.hero-img p.lead { color: rgba(255,255,255,.85); }
.hero-img .eyebrow { color: #fff; opacity: .9; }
/* Video intro en la esquina del hero */
.hero-video { position: absolute; right: 18px; bottom: 18px; width: min(300px, 42vw); aspect-ratio: 16/9; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 10px 30px rgba(0,0,0,.5); object-fit: cover; z-index: 2; background: #000; }
@media (max-width: 720px) { .hero-video { position: static; width: 100%; margin: 16px auto 0; display: block; } }

/* Header con arte para la página de rankings */
.rank-hero { position: relative; text-align: center; padding: 46px 24px; border-radius: 18px; overflow: hidden; margin-bottom: 26px; color: #fff;
    background-image: linear-gradient(180deg, rgba(8,10,16,.5), rgba(8,10,16,.85)), var(--hero-img);
    background-size: cover; background-position: center; box-shadow: var(--shadow); }
.rank-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 4px; }
.rank-hero p { color: rgba(255,255,255,.82); margin: 0; }

/* Nick clickeable en tablas */
.clink { transition: color .15s; }
.clink:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Ficha de personaje ---------- */
.char-hero { position: relative; min-height: 240px; display: flex; align-items: flex-end; border-radius: 18px; overflow: hidden; color: #fff; padding: 28px 32px;
    background-image: linear-gradient(180deg, rgba(8,10,16,.35) 0%, rgba(8,10,16,.55) 55%, rgba(8,10,16,.9) 100%), var(--hero-img);
    background-size: cover; background-position: center; box-shadow: var(--shadow); }
.char-back { position: absolute; top: 18px; left: 22px; color: rgba(255,255,255,.85); font-weight: 600; }
.char-back:hover { color: #fff; }
.char-hero-body h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); margin: 8px 0 6px; }
.char-hero-class { font-size: .82rem; }
.char-hero-meta { display: flex; flex-wrap: wrap; gap: 18px; color: rgba(255,255,255,.9); font-weight: 600; }
.rates { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.rate { border: 1px solid var(--line); border-radius: var(--pill); padding: 8px 18px; background: var(--bg-2); color: var(--muted); }
.rate b { color: var(--accent-ink); }

/* ---------- Secciones / grids / cards ---------- */
.section { margin-top: 52px; }
.section-head { text-align: center; margin-bottom: 28px; }
.section-head h2 { font-size: 1.6rem; }
.section-head h2 span { color: var(--accent-ink); }
.section-head p { color: var(--muted); margin: 0; }
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); transition: border-color .2s, transform .15s, box-shadow .2s; }
.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card .ico { font-size: 1.7rem; margin-bottom: 8px; display: inline-flex; }
.card .ico img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,.3)); }
.card h3 { font-size: 1.12rem; color: var(--text); }
.card p { color: var(--muted); margin: 0; }
.stat { text-align: center; padding: 22px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat .num { font-size: 2rem; font-weight: 600; color: var(--text); letter-spacing: -0.02em; }
.stat .lbl { color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; font-size: .78rem; margin-top: 2px; }

/* ---------- Tablas / rankings ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.table-scroll { overflow-x: auto; }
table.rank { width: 100%; border-collapse: collapse; min-width: 640px; }
table.rank th, table.rank td { padding: 13px 14px; text-align: left; vertical-align: middle; }
table.rank thead th { background: var(--bg-2); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-size: .78rem; font-weight: 600; border-bottom: 1px solid var(--line); }
table.rank tbody tr { border-bottom: 1px solid var(--line); }
table.rank tbody tr:last-child { border-bottom: none; }
table.rank tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
table.rank td.num, table.rank th.num { text-align: left; font-variant-numeric: tabular-nums; }
table.rank .cbadge { justify-content: flex-start; }
.rankpos { font-weight: 600; width: 52px; color: var(--muted); }
/* Top 3: medalla en lugar del número + leve tinte de fila */
.rankpos.top1, .rankpos.top2, .rankpos.top3 { font-size: 0; }
.rankpos.top1::before, .rankpos.top2::before, .rankpos.top3::before { font-size: 1.3rem; line-height: 1; }
.rankpos.top1::before { content: '🥇'; }
.rankpos.top2::before { content: '🥈'; }
.rankpos.top3::before { content: '🥉'; }
.rank tbody tr:has(td.top1) { background: linear-gradient(90deg, rgba(224,164,0,.14), transparent 46%); box-shadow: inset 3px 0 0 #e0a400; }
.rank tbody tr:has(td.top2) { background: linear-gradient(90deg, rgba(154,163,178,.14), transparent 46%); box-shadow: inset 3px 0 0 #9aa3b2; }
.rank tbody tr:has(td.top3) { background: linear-gradient(90deg, rgba(193,116,58,.14), transparent 46%); box-shadow: inset 3px 0 0 #c1743a; }
.cname { font-weight: 600; color: var(--text); }
.badge-class { display: inline-block; padding: 3px 10px; border-radius: var(--pill); font-size: .78rem; font-weight: 600; color: #fff; letter-spacing: .3px; }
.reset-tag { color: var(--accent-ink); font-weight: 600; }

/* Badge de clase con icono */
.cbadge { display: inline-flex; align-items: center; gap: 10px; }
.cicon { width: 48px; height: 48px; object-fit: contain; flex: none;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
.cbadge-name { font-weight: 500; font-size: .9rem; color: var(--text); white-space: nowrap; }
.char-hero .cbadge-name { color: #fff; }
.char-hero-class .cicon { width: 66px; height: 66px; }
.cicon-ph { display: inline-grid; place-items: center; color: #fff; font-weight: 600; font-size: .95rem; border-radius: 12px; filter: none; box-shadow: 0 2px 5px rgba(0,0,0,.3); }

/* Emblema de guild (partes apiladas) */
.emblem { position: relative; display: inline-block; flex: none; }
.emblem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Link de guild */
.glink { color: var(--accent-ink); font-weight: 600; }
.glink:hover { color: var(--text); text-decoration: underline; }

/* Ficha de guild (hero) */
.guild-hero { position: relative; display: flex; align-items: center; gap: 20px; min-height: 180px; padding: 26px 30px; border-radius: 18px; overflow: hidden; color: #fff; box-shadow: var(--shadow); }
.guild-hero .char-back { position: absolute; top: 16px; left: 22px; }
.guild-hero-body h1 { color: #fff; margin: 0 0 8px; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.guild-hero-meta { display: flex; flex-wrap: wrap; gap: 18px; color: rgba(255,255,255,.9); font-weight: 600; }
.guild-hero-meta b { color: #fff; }
.guild-hero-meta .glink { color: #fff; text-decoration: underline; }

/* Widget Castle Siege (dueño del castillo) */
/* Castle Siege — card especial "beige/pergamino" con detalle dorado */
.castle { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: var(--radius);
    border: 1px solid var(--line); box-shadow: var(--shadow);
    background: linear-gradient(135deg, #f7f5ef 0%, #f1ece0 100%);
    margin-bottom: 26px; }
.castle-emblem { flex: none; filter: drop-shadow(0 3px 8px rgba(90,70,20,.25)); }
.castle-ico { font-size: 3rem; line-height: 1; }
.castle-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.castle-label { color: #a07f2e; text-transform: uppercase; letter-spacing: 1.2px; font-size: .72rem; font-weight: 600; }
.castle-badge { color: #b8862b; }
.castle-owner { font-size: 1.5rem; font-weight: 600; color: #2a2018; align-self: flex-start;
    display: inline-block; padding-bottom: 5px; margin-bottom: 2px;
    border-bottom: 2px solid; border-image: linear-gradient(90deg, #c0392b 0%, #c9a94e 100%) 1; }
.castle-owner a { color: #2a2018; }
.castle-owner a:hover { color: #c0392b; }
.castle-owner .none { color: #8a7a5a; font-weight: 600; font-size: 1.1rem; border: none; }
.castle-meta { color: #6b5a3f; font-size: .86rem; margin-top: 2px; }
.castle-meta a, .castle .clink { color: #a12722; }
.castle-meta a:hover { color: #7d1a17; }
.castle-meta b { color: #a07f2e; }
/* Castle con imagen de fondo elegida */
.castle.castle-img { position: relative; overflow: hidden; border-color: var(--line);
    background: linear-gradient(120deg, rgba(8,10,16,.82) 0%, rgba(8,10,16,.45) 100%), var(--castle-img);
    background-size: cover; background-position: center; }
.castle.castle-img .castle-label { color: #e8c977; }
.castle.castle-img .castle-badge { color: #f0d489; }
.castle.castle-img .castle-owner { color: #fff; }
.castle.castle-img .castle-owner a { color: #fff; }
.castle.castle-img .castle-owner a:hover { color: #ffd8a8; }
.castle.castle-img .castle-meta { color: rgba(255,255,255,.82); }
.castle.castle-img .castle-meta a, .castle.castle-img .clink { color: #ffc9a3; }
/* ---------- Cronograma Castle Siege ---------- */
.cs-sched { padding: 20px 22px; }
.cs-state { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .03em; padding: 4px 12px; border-radius: 999px; margin-bottom: 16px; }
.cs-state-active   { color: #1e9e5a; background: color-mix(in srgb,#1e9e5a 15%,transparent); }
.cs-state-upcoming { color: var(--accent-ink); background: color-mix(in srgb,var(--accent) 15%,transparent); }
.cs-state-ended    { color: var(--muted); background: color-mix(in srgb,var(--muted) 15%,transparent); }
.cs-phases { list-style: none; margin: 0; padding: 0; position: relative; }
.cs-phases::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line-2); }
.cs-phase { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 0 9px 26px; }
.cs-dot { position: absolute; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); border: 2px solid var(--line-2); }
.cs-phase.is-done .cs-dot { background: var(--muted); border-color: var(--muted); }
.cs-phase.is-live .cs-dot { background: var(--accent-solid); border-color: var(--accent-solid); box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent); }
.cs-ph-name { flex: 1; font-weight: 600; }
.cs-phase.is-done .cs-ph-name, .cs-phase.is-done .cs-ph-time { color: var(--muted); }
.cs-phase.is-upcoming .cs-ph-name { color: var(--text); }
.cs-phase.is-live .cs-ph-name { color: var(--accent-ink); }
.cs-now { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff;
    background: var(--accent-solid); padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.cs-ph-time { flex: none; color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.cs-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 720px) { .cs-layout { grid-template-columns: 1fr; } }
.cs-guilds { padding: 18px 20px; }
.cs-guilds-h { margin: 0 0 12px; font-size: 1rem; }
.cs-guilds-h span { display: inline-block; margin-left: 6px; min-width: 22px; text-align: center; font-size: .78rem; font-weight: 700; color: var(--accent-ink); background: color-mix(in srgb,var(--accent) 16%,transparent); padding: 1px 8px; border-radius: 999px; }
.cs-guilds-empty { color: var(--muted); font-size: .9rem; margin: 0; }
.cs-guilds-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-guilds-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--input-bg); border: 1px solid var(--line-2); }
.cs-guild-meta { flex: none; color: var(--muted); font-size: .82rem; }

/* ---------- Roadmap ---------- */
:root { --rm-done1:#2ee88f; --rm-done2:#1e9e5a; --rm-prog1:#ffb43a; --rm-prog2:#e07b18; }
/* Hero */
.rm-hero { position: relative; overflow: hidden; border-radius: 20px; margin-top: 16px; padding: 44px 32px;
    background: linear-gradient(120deg, rgba(10,12,18,.92) 0%, rgba(10,12,18,.62) 55%, rgba(10,12,18,.35) 100%), var(--rm-img);
    background-size: cover; background-position: center 32%; color: #fff; }
.rm-hero-in { position: relative; max-width: 640px; }
/* Variante widget (link en el inicio) */
.rm-hero-widget { display: block; text-decoration: none; padding: 26px 26px; margin-top: 0;
    transition: transform .18s ease, box-shadow .18s ease; }
.rm-hero-widget:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.rm-w-h { display: block; color: #fff; font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 2px; }
.rm-w-sub { color: rgba(255,255,255,.82); margin: 0 0 18px; font-size: .95rem; }
.rm-w-see { display: inline-block; margin-top: 16px; color: #fff; font-weight: 700; font-size: .9rem; }
.rm-hero-widget:hover .rm-w-see { color: var(--accent-2, #ffd873); }
.rm-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-2, #ffd873); }
.rm-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.1rem); margin: 8px 0 6px; letter-spacing: -.02em; }
.rm-hero p { color: rgba(255,255,255,.82); margin: 0 0 22px; }
.rm-progress { max-width: 460px; }
.rm-bar { display: flex; height: 8px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.rm-bar span { display: block; height: 100%; transition: width .6s ease; }
.rm-bar .rm-bar-done { background: linear-gradient(90deg, var(--rm-done1), var(--rm-done2)); }
.rm-bar .rm-bar-prog { background: linear-gradient(90deg, var(--rm-prog1), var(--rm-prog2)); }
.rm-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: .84rem; color: rgba(255,255,255,.9); }
.rm-leg { display: inline-flex; align-items: center; gap: 7px; }
.rm-d { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rm-d-done { background: var(--rm-done1); }
.rm-d-progress { background: var(--rm-prog1); }
.rm-d-planned { background: rgba(255,255,255,.5); }

/* Timeline */
.rm-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.rm-timeline::before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px;
    background: linear-gradient(180deg, var(--line-2), color-mix(in srgb,var(--line-2) 30%,transparent)); }
.rm-node { position: relative; padding: 0 0 18px 46px; }
.rm-node:last-child { padding-bottom: 0; }
.rm-bullet { position: absolute; left: 6px; top: 20px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--panel); border: 3px solid var(--muted); box-sizing: border-box; z-index: 1; }
.rm-node.is-done .rm-bullet { border-color: var(--rm-done2); background: var(--rm-done1); box-shadow: 0 0 0 4px color-mix(in srgb,var(--rm-done1) 22%,transparent); }
.rm-node.is-progress .rm-bullet { border-color: var(--rm-prog2); background: var(--rm-prog1); box-shadow: 0 0 0 4px color-mix(in srgb,var(--rm-prog1) 26%,transparent); animation: rmPulse 1.8s ease-in-out infinite; }
@keyframes rmPulse { 0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb,var(--rm-prog1) 30%,transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb,var(--rm-prog1) 6%,transparent); } }

.rm-card { position: relative; overflow: hidden; padding: 18px 20px; border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 5%,var(--panel)), var(--panel));
    border: 1px solid var(--line); box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.rm-card:hover { transform: translateX(3px); box-shadow: var(--shadow-lg); }
.rm-node.is-done .rm-card { border-color: color-mix(in srgb,var(--rm-done2) 34%,var(--line));
    background: linear-gradient(135deg, color-mix(in srgb,var(--rm-done1) 9%,var(--panel)), var(--panel)); }
.rm-node.is-progress .rm-card { border-color: color-mix(in srgb,var(--rm-prog2) 34%,var(--line));
    background: linear-gradient(135deg, color-mix(in srgb,var(--rm-prog1) 10%,var(--panel)), var(--panel)); }
.rm-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.rm-title { margin: 0; font-size: 1.14rem; line-height: 1.2; }
.rm-desc { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.rm-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.rm-pill i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: currentColor; }
.rm-pill.rm-planned  { color: var(--muted); background: color-mix(in srgb, var(--muted) 15%, transparent); }
.rm-pill.rm-progress { color: #b56b0a; background: color-mix(in srgb, var(--rm-prog1) 20%, transparent); }
.rm-pill.rm-done     { color: #1a874e; background: color-mix(in srgb, var(--rm-done1) 22%, transparent); }
@media (prefers-reduced-motion: reduce) { .rm-node.is-progress .rm-bullet { animation: none; } }

/* Editor de roadmap (admin) */
.rm-editor { padding: 16px 20px; }
.rm-editor[open] { padding-bottom: 20px; }
.rm-editor > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.rm-editor > summary::-webkit-details-marker { display: none; }
.rm-editor > summary strong { display: block; font-size: 1.05rem; }
.rm-editor > summary small { display: block; color: var(--muted); font-size: .85rem; margin-top: 2px; }
.rm-editor > summary .opt-caret { color: var(--muted); transition: transform .2s ease; }
.rm-editor[open] > summary .opt-caret { transform: rotate(180deg); }
.rm-elist { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.rm-ecard { position: relative; display: flex; align-items: stretch; gap: 12px; padding: 14px 14px 14px 10px;
    border-radius: 14px; background: var(--panel); border: 1px solid var(--line-2);
    box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease; }
.rm-ecard::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--muted); }
.rm-ecard.is-done::before     { background: var(--rm-done1); }
.rm-ecard.is-progress::before { background: var(--rm-prog1); }
.rm-ecard.is-planned::before  { background: color-mix(in srgb,var(--muted) 55%,transparent); }
.rm-ecard.rm-dragging { opacity: .45; border-style: dashed; }
.rm-drag { flex: none; align-self: center; cursor: grab; color: var(--muted); font-size: 1.1rem; padding: 0 2px; user-select: none; }
.rm-drag:active { cursor: grabbing; }
.rm-ecard-body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rm-ein { width: 100%; padding: 9px 12px; border-radius: 9px; background: var(--input-bg);
    border: 1px solid var(--line-2); color: var(--text); font-family: inherit; font-size: .92rem; }
.rm-ein-title { font-weight: 600; }
.rm-ein-desc { resize: vertical; line-height: 1.5; }
.rm-ein:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
/* Control segmentado de estado */
.rm-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--input-bg); border: 1px solid var(--line-2); align-self: flex-start; flex-wrap: wrap; }
.rm-seg-btn { border: none; background: transparent; color: var(--muted); cursor: pointer; font-family: inherit;
    font-size: .74rem; font-weight: 700; padding: 6px 13px; border-radius: 999px; transition: background .15s ease, color .15s ease; }
.rm-seg-btn:hover { color: var(--text); }
.rm-seg-btn.active.seg-planned  { background: color-mix(in srgb,var(--muted) 22%,transparent); color: var(--text); }
.rm-seg-btn.active.seg-progress { background: linear-gradient(90deg,var(--rm-prog1),var(--rm-prog2)); color: #3a2600; }
.rm-seg-btn.active.seg-done     { background: linear-gradient(90deg,var(--rm-done1),var(--rm-done2)); color: #063; }
.rm-del { flex: none; align-self: flex-start; background: transparent; border: 1px solid transparent; cursor: pointer;
    font-size: 1rem; padding: 6px 8px; border-radius: 8px; opacity: .6; transition: opacity .15s ease, background .15s ease; }
.rm-del:hover { opacity: 1; background: color-mix(in srgb,var(--brand) 14%,transparent); }
.rm-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; cursor: pointer;
    background: transparent; border: 1px dashed var(--line-2); color: var(--muted); font-family: inherit; font-weight: 600;
    font-size: .9rem; padding: 10px 16px; border-radius: 10px; width: 100%; justify-content: center; transition: border-color .15s ease, color .15s ease; }
.rm-add:hover { border-color: var(--accent); color: var(--accent-ink); }
.rm-editor-foot { margin-top: 16px; display: flex; justify-content: flex-end; }
@media (max-width: 560px) { .rm-ecard { flex-wrap: wrap; } .rm-seg { width: 100%; justify-content: space-between; } }

.tabs { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 20px; justify-content: flex-start; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-weight: 600; font-size: .8rem; }
.tab:hover { color: var(--text); border-color: var(--accent); }
.tab.active { color: #fff; background: var(--accent-solid); border-color: transparent; }

/* ---------- Formularios / auth ---------- */
.auth-wrap { max-width: 440px; margin: 30px auto; }
.form-card { padding: 34px; }
.form-card h1 { text-align: center; font-size: 1.7rem; }
.form-card .sub { text-align: center; color: var(--muted); margin: -6px 0 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; color: var(--muted); font-weight: 600; font-size: .92rem; }
.field input { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; background: var(--input-bg); border: 1px solid var(--line-2); color: var(--text); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.field .hint { color: var(--muted); font-size: .82rem; margin-top: 4px; }
.form-foot { text-align: center; margin-top: 18px; color: var(--muted); }
.check-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; color: var(--muted); font-size: .9rem; cursor: pointer; user-select: none; }
.check-row input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ---------- Búsqueda de cuentas (admin) ---------- */
.acs-list { display: flex; flex-direction: column; gap: 12px; }
.acs-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px;
    background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color .15s ease; }
.acs-card:hover { border-color: color-mix(in srgb,var(--accent) 35%,var(--line)); }
.acs-info { flex: 1; min-width: 0; }
.acs-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acs-name { font-size: 1.1rem; font-weight: 700; color: var(--text); text-decoration: none; }
.acs-name:hover { color: var(--accent-ink); }
.acs-meta { display: flex; flex-wrap: wrap; gap: 14px; margin: 5px 0 10px; color: var(--muted); font-size: .84rem; }
.acs-chars { display: flex; flex-wrap: wrap; gap: 6px; }
.acs-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600;
    background: color-mix(in srgb, var(--cc, var(--accent)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--cc, var(--accent)) 40%, transparent); color: var(--text); }
.acs-chip small { color: var(--muted); font-weight: 500; font-size: .74rem; }
.acs-nochars { color: var(--muted); font-size: .82rem; font-style: italic; }
.acs-btn { flex: none; }
@media (max-width: 560px) { .acs-card { flex-direction: column; align-items: stretch; } }

/* ---------- Salud del sitio (admin) ---------- */
.hz-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; }
.hz-pill { font-size: .82rem; font-weight: 700; padding: 5px 13px; border-radius: 999px; }
.hz-pill.hz-ok   { color: #1a874e; background: color-mix(in srgb,#2ec26a 16%,transparent); }
.hz-pill.hz-warn { color: #b56b0a; background: color-mix(in srgb,#f0a020 20%,transparent); }
.hz-pill.hz-fail { color: #b23b3b; background: color-mix(in srgb,var(--brand) 15%,transparent); }
.hz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.hz-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px;
    background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hz-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted); }
.hz-card.hz-ok   .hz-dot { background: #2ec26a; }
.hz-card.hz-warn .hz-dot { background: #f0a020; }
.hz-card.hz-fail .hz-dot { background: #e5352b; box-shadow: 0 0 0 3px color-mix(in srgb,#e5352b 20%,transparent); }
.hz-card.hz-info .hz-dot { background: #6b7280; }
.hz-card.hz-fail { border-color: color-mix(in srgb,#e5352b 40%,var(--line)); }
.hz-body { min-width: 0; }
.hz-body strong { display: block; font-size: .92rem; }
.hz-body small { display: block; color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ---------- Herramientas de juego (admin) ---------- */
.muted { color: var(--muted); }
.gt-head { display: flex; align-items: center; gap: 16px; margin: 18px 0 14px; }
.gt-ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 14px; font-size: 1.6rem;
    background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 22%,transparent), color-mix(in srgb,var(--accent) 8%,transparent)); }
.gt-head h2 { margin: 0; font-size: 1.4rem; }
.gt-head h2 span { color: var(--muted); font-weight: 500; }
.gt-head p { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.gt-warn { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; font-size: .9rem;
    background: color-mix(in srgb,#f0a020 12%,var(--panel)); border: 1px solid color-mix(in srgb,#f0a020 40%,var(--line)); }
.gt-warn span { font-size: 1.1rem; }
.gt-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px; align-items: start; }
.gt-grid-wide { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .gt-grid, .gt-grid-wide { grid-template-columns: 1fr; } }
.gt-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 22px; }
.gt-card h3 { margin: 0 0 14px; font-size: 1.05rem; }
.gt-label { display: block; margin: 12px 0 5px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.gt-label:first-of-type { margin-top: 0; }
.gt-input { width: 100%; padding: 11px 13px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--line-2);
    color: var(--text); font-family: inherit; font-size: .95rem; }
.gt-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
textarea.gt-input { resize: vertical; line-height: 1.5; }
.gt-row { display: grid; grid-template-columns: 1fr 90px 120px; gap: 10px; }
@media (max-width: 520px) { .gt-row { grid-template-columns: 1fr; } }
.gt-card .btn { margin-top: 18px; }
.gt-result { margin-top: 8px; padding: 9px 12px; border-radius: 9px; font-size: .85rem; }
.gt-result.gt-ok { color: #1a874e; background: color-mix(in srgb,#2ec26a 15%,transparent); border: 1px solid color-mix(in srgb,#2ec26a 35%,transparent); }
.gt-result.gt-bad { color: #b23b3b; background: color-mix(in srgb,var(--brand) 12%,transparent); border: 1px solid color-mix(in srgb,var(--brand) 35%,transparent); }
/* Formulario a lo ancho con secciones */
.gt-form-grid { display: flex; flex-direction: column; gap: 20px; }
.gt-fieldset { }
.gt-sec { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--accent-ink); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.gt-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gt-row3 { display: grid; grid-template-columns: 1fr 120px 180px; gap: 14px; }
@media (max-width: 620px) { .gt-row2, .gt-row3 { grid-template-columns: 1fr; } }
.gt-select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; }
.gt-send { margin-top: 22px; min-width: 220px; }
.gt-table-wrap { overflow-x: auto; }
.gt-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.gt-table th { text-align: left; padding: 8px 10px; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); }
.gt-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); }
.gt-table tr:last-child td { border-bottom: 0; }
.gt-strong { font-weight: 600; }
.gt-date { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.gt-empty { text-align: center; color: var(--muted); padding: 18px; }

/* ---------- Descargas ---------- */
.dl-hero { position: relative; overflow: hidden; border-radius: 20px; margin-top: 16px; padding: 44px 32px;
    background: linear-gradient(120deg, rgba(10,12,18,.92) 0%, rgba(10,12,18,.6) 55%, rgba(10,12,18,.35) 100%), var(--dl-img);
    background-size: cover; background-position: center 35%; color: #fff; }
.dl-hero-in { position: relative; max-width: 640px; }
.dl-hero .dl-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-2, #ffd873); }
.dl-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.1rem); margin: 8px 0 6px; letter-spacing: -.02em; }
.dl-hero p { color: rgba(255,255,255,.85); margin: 0; }
.dl-note { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px 20px; border-radius: 14px;
    background: color-mix(in srgb, #f0a020 12%, var(--panel)); border: 1px solid color-mix(in srgb, #f0a020 40%, var(--line)); }
.dl-note-ic { font-size: 1.4rem; flex: none; line-height: 1.2; }
.dl-note strong { display: block; margin-bottom: 3px; }
.dl-note ul { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.5; font-size: .9rem; }
.dl-note li { margin: 0; }
.dl-note code { background: var(--input-bg); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 6px; font-size: .85em; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.dl-card { padding: 20px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 7%,var(--panel)), var(--panel));
    border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.dl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb,var(--accent) 35%,var(--line)); }
.dl-card-off { opacity: .65; }
.dl-card-off:hover { transform: none; box-shadow: var(--shadow); border-color: var(--line); }
.dl-card-head { display: flex; align-items: center; justify-content: space-between; }
.dl-badge { font-size: .74rem; font-weight: 800; letter-spacing: .03em; color: var(--accent-ink);
    background: color-mix(in srgb, var(--accent) 15%, transparent); padding: 4px 11px; border-radius: 999px; }
.dl-mirror { font-size: .78rem; color: var(--muted); font-weight: 600; }
.dl-card-body { display: flex; align-items: center; gap: 14px; }
.dl-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 1.4rem;
    color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent))); }
.dl-type { margin: 0 0 2px; font-size: 1.05rem; line-height: 1.2; }
.dl-size { color: var(--muted); font-size: .86rem; font-weight: 600; }
.dl-card .btn { margin-top: auto; }
.dl-disabled { cursor: default; opacity: .7; }
.dl-prereq-intro { color: var(--muted); margin: 0 0 12px; }
.dl-prereq-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dl-prereq { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px;
    background: var(--panel); border: 1px solid var(--line); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.dl-prereq:hover { border-color: var(--accent); transform: translateY(-2px); }
.dl-prereq-ic { font-size: 1.3rem; flex: none; }
.dl-prereq-body { flex: 1; }
.dl-prereq-body strong { display: block; color: var(--text); }
.dl-prereq-body small { color: var(--muted); font-size: .82rem; }
.dl-prereq-dl { flex: none; font-weight: 700; font-size: .85rem; color: var(--accent-ink); }
/* Editor de descargas */
.dl-editor > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.dl-editor > summary::-webkit-details-marker { display: none; }
.dl-editor > summary strong { display: block; font-size: 1.05rem; }
.dl-editor > summary small { display: block; color: var(--muted); font-size: .85rem; margin-top: 2px; }
.dl-editor > summary .opt-caret { color: var(--muted); transition: transform .2s ease; }
.dl-editor[open] > summary .opt-caret { transform: rotate(180deg); }
.dl-elist { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.dl-ecard { padding: 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.dl-erow { display: flex; gap: 8px; }
.dl-e-size { max-width: 140px; }
.dl-e-host { max-width: 200px; }
@media (max-width: 560px) { .dl-erow { flex-wrap: wrap; } .dl-e-size, .dl-e-host { max-width: none; } }
/* Grilla de ajustes (SMTP en admin → Opciones) */
.opt-hint { color: var(--muted); font-size: .88rem; margin: 4px 0 14px; }
.opt-hint code { background: var(--input-bg); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; font-size: .85em; }
.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; }
.opt-grid .field { margin-bottom: 12px; }
.opt-grid .field-2 { grid-column: 1 / -1; }
.opt-grid select { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; background: var(--input-bg); border: 1px solid var(--line-2); color: var(--text); }
.opt-grid select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
@media (max-width: 560px) { .opt-grid { grid-template-columns: 1fr; } }
/* Desplegable de config (SMTP) */
.opt-collapse > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 4px 0; }
.opt-collapse > summary::-webkit-details-marker { display: none; }
.opt-collapse > summary strong { display: block; font-size: 1.05rem; }
.opt-collapse > summary small { display: block; color: var(--muted); font-size: .85rem; margin-top: 2px; }
.opt-collapse > summary .opt-caret { color: var(--muted); transition: transform .2s ease; flex: none; }
.opt-collapse[open] > summary .opt-caret { transform: rotate(180deg); }
.opt-smtp-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.opt-smtp-actions .acct-inline { margin: 0; min-width: 260px; }
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-weight: 600; }
.alert-error { background: color-mix(in srgb, #e5352b 12%, transparent); border: 1px solid color-mix(in srgb, #e5352b 45%, transparent); color: #c62b22; }
.alert-success { background: color-mix(in srgb, #1aa251 12%, transparent); border: 1px solid color-mix(in srgb, #1aa251 45%, transparent); color: #158043; }
:root[data-theme="dark"] .alert-error { color: #ffb3ac; }
:root[data-theme="dark"] .alert-success { color: #a9f0c2; }

/* ---------- Panel usuario ---------- */
.panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); margin-bottom: 26px; }
.ph-av { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--line); }
.ph-av-ph { display: inline-grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 600; font-size: 1.6rem; }
.panel-head .who { font-size: 1.4rem; font-weight: 600; color: var(--text); }
.panel-head .who span { color: var(--accent-ink); }
.game-block { margin-bottom: 32px; }
.game-block h2 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
.game-block h2 .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--gc); }
.char-card { display: flex; flex-direction: column; gap: 10px; }
.char-card .char-top { display: flex; align-items: center; justify-content: space-between; }
.char-card .char-name { font-size: 1.1rem; font-weight: 600; color: var(--text); }
.char-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 6px; }
.char-stats .kv { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.char-stats .kv span:first-child { color: var(--muted); }
.char-stats .kv span:last-child { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.empty { text-align: center; color: var(--muted); padding: 34px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: transparent; margin-top: 60px; }
.footer-inner { padding: 28px 0; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.footer-top { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.footer-games { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.footer-games a { color: var(--muted); }
.footer-copy { color: var(--muted); font-size: .84rem; opacity: .8; }

/* ---------- Selector de estilo (flotante) ---------- */
.style-switch { position: fixed; left: 16px; bottom: 16px; z-index: 80; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--pill); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.style-switch .ss-label { color: var(--muted); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 0 8px; }
.style-switch a { padding: 6px 14px; border-radius: var(--pill); color: var(--muted); font-weight: 600; font-size: .84rem; }
.style-switch a:hover { color: var(--text); }
.style-switch a.on { color: #fff; background: var(--accent-solid); }

/* ---------- Admin ---------- */
.btn-danger { color: #fff; background: #d33a2f; }
.btn-danger:hover { color: #fff; filter: brightness(1.08); }
.gs-admin { color: var(--brand) !important; font-weight: 600; }
.admin-bar { display: flex; align-items: center; gap: 18px; padding: 12px 16px; margin: 20px 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); box-shadow: var(--shadow); }
.admin-badge { font-weight: 600; letter-spacing: 1px; color: var(--brand); font-size: .85rem; }
.admin-bar nav { display: flex; gap: 6px; }
.admin-bar nav a { padding: 7px 14px; border-radius: var(--pill); color: var(--muted); font-weight: 600; font-size: .9rem; }
.admin-bar nav a:hover { color: var(--text); background: var(--bg-2); }
.admin-bar nav a.active { color: #fff; background: var(--brand); }
.admin-search { display: flex; gap: 10px; margin-bottom: 14px; max-width: 480px; }
.admin-search input { flex: 1; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--input-bg); color: var(--text); font-family: inherit; font-size: 1rem; }
.admin-search input:focus { outline: none; border-color: var(--accent); }
.tag { display: inline-block; padding: 3px 10px; border-radius: var(--pill); font-size: .74rem; font-weight: 600; letter-spacing: .3px; vertical-align: middle; }
.tag-ok    { background: color-mix(in srgb, #1aa251 16%, transparent); color: #158043; }
.tag-ban   { background: color-mix(in srgb, #e5352b 16%, transparent); color: #c62b22; }
.tag-admin { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
:root[data-theme="dark"] .tag-ok { color: #7ee6a7; }
:root[data-theme="dark"] .tag-ban { color: #ff9a92; }

/* ---------- Editor de textos (admin) ---------- */
.cms-fab { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; align-items: center; gap: 8px; flex-direction: row-reverse; }
.cms-fab-toggle { width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; background: var(--brand); color: #fff; font-size: 1.2rem; box-shadow: var(--shadow-lg); transition: transform .2s; flex: none; }
.cms-fab.collapsed .cms-fab-toggle { transform: none; }
.cms-fab:not(.collapsed) .cms-fab-toggle { transform: rotate(90deg); }
.cms-fab-items { display: flex; align-items: center; gap: 8px; }
.cms-fab.collapsed .cms-fab-items { display: none; }
.cms-btn { padding: 11px 16px; border-radius: var(--pill); font-weight: 600; font-size: .85rem; border: 1px solid var(--line-2); cursor: pointer; box-shadow: var(--shadow-lg); }
.cms-btn-main { color: #fff; background: var(--brand); border-color: transparent; }
.cms-btn-admin { color: #fff; background: var(--accent); border-color: transparent; text-decoration: none; display: inline-flex; align-items: center; }
.cms-btn-admin:hover { color: #fff; filter: brightness(1.08); }
.cms-btn-save { color: #fff; background: #1aa251; border-color: transparent; }
.cms-btn-cancel { color: var(--text); background: var(--panel); }
.cms-editing .cms-ed { outline: 2px dashed color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; border-radius: 3px; cursor: text; transition: outline-color .15s; }
.cms-editing .cms-ed:hover { outline-color: var(--brand); }
.cms-editing .cms-ed:focus { outline: 2px solid var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }

/* Panel de ajustes de tema */
.theme-panel { position: fixed; right: 18px; bottom: 70px; z-index: 91; width: 260px; padding: 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.theme-panel .tp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.theme-panel .tp-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; }
.theme-panel .tp-hint { color: var(--muted); font-size: .74rem; margin-bottom: 12px; }
.theme-panel .tp-scroll { max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.theme-panel .tp-row { margin-bottom: 12px; }
.theme-panel .tp-row label { display: flex; justify-content: space-between; color: var(--muted); font-size: .82rem; font-weight: 600; margin-bottom: 5px; }
.theme-panel .tp-val { color: var(--accent-ink); }
.theme-panel .tp-input { width: 100%; }
.theme-panel input[type="range"] { accent-color: var(--brand); }
.theme-panel input[type="color"] { height: 34px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--input-bg); cursor: pointer; padding: 2px; }
.theme-panel .tp-actions { display: flex; gap: 8px; margin-top: 8px; }
.theme-panel .tp-actions .cms-btn { flex: 1; box-shadow: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .games-grid { grid-template-columns: 1fr; }
    .game-banner, .game-banner.wide { min-height: 240px; }
    .nav-burger { display: block; font-size: 1.5rem; color: var(--text); cursor: pointer; background: none; border: none; }
    .game-switch { position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--panel); border-bottom: 1px solid var(--line); max-height: 0; overflow: hidden; transition: max-height .3s ease; box-shadow: var(--shadow); }
    .nav-toggle:checked ~ .game-switch { max-height: 560px; }
    .gs-item, .gs-account { width: 100%; padding: 15px 6vw; border-bottom: 1px solid var(--line); border-radius: 0; }
    .gs-item.active::after { display: none; }
    .gs-sep { display: none; }
    .game-switch .btn { margin: 12px 6vw; }
    .theme-toggle { margin: 12px 6vw; width: auto; }
    .subbar-inner { gap: 14px; }
}
@media (max-width: 520px) { .grid-4 { grid-template-columns: 1fr; } }

/* ==================================================================
   Novedades (home) + Entradas / blog
   ================================================================== */
.news-grid{ display:grid; grid-template-columns: 1.7fr 1fr; gap:16px; }
@media (max-width:820px){ .news-grid{ grid-template-columns:1fr; } }

.feat-card{
    position:relative; display:flex; align-items:flex-end; min-height:300px;
    border-radius:var(--radius); overflow:hidden; text-decoration:none;
    background-size:cover; background-position:center; box-shadow:var(--shadow);
    border:1px solid var(--line); transition:transform .15s ease, box-shadow .15s ease;
}
.feat-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.feat-cat{
    position:absolute; top:14px; left:14px; padding:4px 11px; border-radius:999px;
    background:var(--accent-solid); color:#fff; font-size:.72rem; font-weight: 600;
    letter-spacing:.03em; text-transform:uppercase;
}
.feat-body{ padding:20px 22px; width:100%; }
.feat-body h3{ margin:0 0 6px; color:#fff; font-size:1.5rem; line-height:1.2; }
.feat-meta{ color:rgba(255,255,255,.8); font-size:.85rem; }

.news-side{ display:flex; flex-direction:column; gap:12px; }
.cat-panel{
    display:flex; align-items:center; justify-content:space-between; flex:1;
    padding:16px 18px; border-radius:var(--radius); text-decoration:none;
    background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow);
    transition:border-color .15s ease, transform .15s ease;
}
.cat-panel:hover{ border-color:var(--accent); transform:translateY(-1px); }
.cp-name{ font-weight: 600; color:var(--text); }
.cp-count{
    min-width:30px; text-align:center; padding:2px 9px; border-radius:999px;
    background:var(--pill); color:var(--accent-ink); font-weight: 600; font-size:.85rem;
}

.cl-list{ margin-top:16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.cl-head{ padding:12px 18px; font-weight: 600; color:var(--text); border-bottom:1px solid var(--line); background:var(--bg-2); }
.cl-row{ display:flex; gap:14px; align-items:center; padding:11px 18px; text-decoration:none; border-bottom:1px solid var(--line); transition:background .12s ease; }
.cl-row:last-child{ border-bottom:0; }
.cl-row:hover{ background:var(--bg-2); }
.cl-date{ color:var(--muted); font-size:.85rem; font-variant-numeric:tabular-nums; min-width:44px; }
.cl-title{ color:var(--text); font-weight:600; }

/* --- Post individual --- */
.post-single{ max-width:none; margin:0; }          /* hero al ancho del contenido (logo → server status) */
.post-single .post-body,
.post-single > div:last-child{ max-width:860px; margin-left:auto; margin-right:auto; }  /* cuerpo legible, centrado */
.post-hero{
    position:relative; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end;
    padding:26px 28px; border-radius:var(--radius); overflow:hidden;
    background-size:cover; background-position:center; box-shadow:var(--shadow); margin-top:16px;
}
.post-cat{
    align-self:flex-start; padding:5px 13px; border-radius:999px; margin-bottom:12px;
    background:var(--accent-solid); color:#fff; font-size:.75rem; font-weight: 600;
    letter-spacing:.03em; text-transform:uppercase; text-decoration:none;
}
.post-hero h1{ margin:0 0 14px; color:#fff; font-size:2.2rem; line-height:1.15; }
.post-meta{ display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.85); font-size:.92rem; }
.pm-av{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.5); }
.pm-av-ph{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--accent-solid); color:#fff; font-weight: 600; }
.pm-author{ font-weight: 600; }
.pm-dot{ opacity:.6; }
.post-body{ margin-top:26px; color:var(--text); font-size:1.06rem; line-height:1.75; }
.post-body a{ color:var(--accent-ink); }

/* --- Cards de categoría --- */
.post-card{
    display:flex; flex-direction:column; text-decoration:none;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;
}
.post-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.pc-img{ position:relative; height:160px; background-size:cover; background-position:center; }
.pc-cat{
    position:absolute; top:10px; left:10px; padding:3px 10px; border-radius:999px;
    background:var(--accent-solid); color:#fff; font-size:.68rem; font-weight: 600;
    letter-spacing:.03em; text-transform:uppercase;
}
.pc-body{ padding:14px 16px 16px; }
.pc-body h3{ margin:0 0 8px; color:var(--text); font-size:1.1rem; line-height:1.25; }
.pc-date{ color:var(--muted); font-size:.83rem; }
.pager-info{ color:var(--muted); font-size:.9rem; }

/* --- Changelogs en formato banner (home) --- */
.cl-banners{ display:flex; flex-direction:column; gap:16px; }
.post-banner{
    position:relative; display:flex; align-items:flex-end; min-height:130px;
    border-radius:var(--radius); overflow:hidden; text-decoration:none;
    box-shadow:var(--shadow); border:1px solid var(--line);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* capa de imagen (escala en hover) */
.pb-img{
    position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center;
    transition:transform .35s ease;
}
/* gradiente: negro fuerte abajo para integrar el título */
.post-banner::after{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(8,10,16,.05) 0%, rgba(8,10,16,.25) 45%, rgba(8,10,16,.92) 100%);
}
.post-banner:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--brand) 45%, transparent); }
.post-banner:hover .pb-img{ transform:scale(1.03); }
.pb-cat{
    position:absolute; top:14px; left:16px; z-index:2; padding:4px 11px; border-radius:6px;
    background:var(--accent-solid); color:#fff; font-family:var(--font); font-size:.7rem; font-weight: 600;
    letter-spacing:.05em; text-transform:uppercase;
}
.pb-body{ position:relative; z-index:2; padding:16px 18px; }
.pb-body h3{ margin:0 0 4px; color:#fff; font-family:var(--font); font-size:1.4rem; line-height:1.12; font-weight: 600; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.pb-meta{ font-family:var(--font); font-size:.76rem; letter-spacing:.03em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.pb-time{ color:rgba(255,255,255,.7); }
.pb-more{ color:var(--accent); font-weight: 600; }

/* ==================================================================
   Home layouts (inicio MU Legend) — switcher + widgets
   ================================================================== */
/* Punto de estado genérico */
.srv-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--muted); vertical-align:middle; }
.srv-dot.on  { background:#2ec26a; box-shadow:0 0 8px #2ec26a; }
.srv-dot.off { background:#e5544a; box-shadow:0 0 8px #e5544a; }

/* Switcher de layout (solo admin) */
.home-switch { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 18px; padding:10px 14px;
    background:var(--panel); border:1px dashed var(--line-2); border-radius:var(--radius-sm); box-shadow:var(--shadow); }
.hsw-label { color:var(--muted); font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.hsw-btn { padding:6px 14px; border-radius:var(--pill); font-size:.88rem; font-weight:600; color:var(--muted);
    border:1px solid var(--line); background:var(--bg-2); }
.hsw-btn:hover { color:var(--text); border-color:var(--accent); }
.hsw-btn.active { color:#fff; background:var(--accent-solid); border-color:transparent; }
.hsw-save { margin-left:auto; padding:6px 14px; border-radius:var(--pill); border:none; cursor:pointer;
    background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent-ink); font-weight:600; font-size:.85rem; }
.hsw-save:hover { background:color-mix(in srgb, var(--accent) 22%, transparent); }

/* Hero compacto + chip de servidor */
.hero.hero-compact { padding-top:44px; padding-bottom:40px; }
.hero.hero-compact h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
.hero-srv { display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.9); font-weight:600; font-size:.9rem;
    padding:9px 16px; border-radius:var(--pill); background:rgba(0,0,0,.35); backdrop-filter:blur(6px); }

/* Fila de tarjetas de resumen */
.home-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .home-cards { grid-template-columns:1fr; } }
.hcard { display:flex; align-items:center; gap:14px; padding:18px 20px; background:var(--panel);
    border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); text-decoration:none; }
.hcard-link { transition:transform .15s ease, border-color .15s ease; }
.hcard-link:hover { transform:translateY(-2px); border-color:var(--accent); }
.hcard-ico { width:46px; height:46px; flex:none; display:grid; place-items:center; font-size:1.4rem; border-radius:14px;
    background:color-mix(in srgb, var(--accent) 12%, transparent); }
.hcard-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.hcard-label { color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; }
.hcard-value { color:var(--text); font-size:1.3rem; font-weight:600; }
.hcard-value-sm { font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.hcard .emblem { margin-left:auto; flex:none; }

/* Split principal / lateral */
.home-split { display:grid; grid-template-columns:1.7fr 1fr; gap:22px; align-items:start; }
.home-split-wide { grid-template-columns:1.9fr 1fr; }
@media (max-width:900px){ .home-split, .home-split-wide { grid-template-columns:1fr; } }
.hs-side { display:flex; flex-direction:column; gap:18px; }

/* Card compacta (changelogs / anuncios / clases) */
.clc-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.clc-head { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); }
.clc-head span { font-weight:600; color:var(--text); }
.clc-head a { font-size:.82rem; color:var(--accent-ink); }
.clc-row { display:flex; gap:12px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--line); text-decoration:none; transition:background .12s ease; }
.clc-row:last-child, .ann-row:last-child { border-bottom:0; }
.clc-row:hover, .ann-row:hover { background:var(--bg-2); }
.clc-thumb { width:52px; height:40px; flex:none; border-radius:6px; background-size:cover; background-position:center; }
.clc-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.clc-title { color:var(--text); font-weight:600; font-size:.92rem; line-height:1.25; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.clc-time { color:var(--muted); font-size:.78rem; }
.ann-row { display:flex; gap:12px; align-items:flex-start; padding:11px 16px; border-bottom:1px solid var(--line); text-decoration:none; transition:background .12s ease; }
.ann-dot { width:8px; height:8px; flex:none; margin-top:6px; border-radius:50%; background:var(--accent); }

/* Distribución de clases */
.cdist { padding:14px 16px; display:flex; flex-direction:column; gap:11px; }
.cdist-row { display:flex; align-items:center; gap:10px; }
.cdist-name { display:flex; align-items:center; gap:7px; width:120px; flex:none; color:var(--text); font-size:.85rem; font-weight:500; }
.cdist-name .cicon { width:20px; height:20px; }
.cdist-bar { flex:1; height:8px; border-radius:99px; background:var(--bg-2); overflow:hidden; }
.cdist-bar span { display:block; height:100%; border-radius:99px; }
.cdist-pct { width:38px; text-align:right; color:var(--muted); font-size:.82rem; font-variant-numeric:tabular-nums; }

/* PK recientes — compacto y discreto (sidebar inicio) */
.pk-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.pk-head { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; border-bottom:1px solid var(--line); }
.pk-head span { font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.pk-head a { font-size:.74rem; color:var(--muted); font-weight:400; }
.pk-head a:hover { color:var(--accent-ink); }
.pk-list { padding:4px 0; }
.pk-row { padding:7px 14px; border-bottom:1px solid var(--line); }
.pk-row:last-child { border-bottom:0; }
.pk-line { display:flex; align-items:center; gap:6px; font-size:.86rem; min-width:0; }
.pk-sword { color:var(--brand); font-size:.82rem; flex:none; }
.pk-ico { width:20px; height:20px; flex:none; object-fit:contain; }
.pk-row-streak .pk-ico { width:22px; height:22px; filter:drop-shadow(0 0 4px color-mix(in srgb,var(--brand) 55%,transparent)); }
.pk-mult { flex:none; font-size:.72rem; font-weight:800; color:#fff; background:var(--brand); padding:1px 7px; border-radius:999px; }
.pk-k { color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40%; }
.pk-arrow { color:var(--muted); font-size:.78rem; flex:none; }
.pk-v { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40%; }
.pk-sub { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-left:2px; margin-top:1px; }
.pk-zone { color:var(--muted); font-size:.7rem; opacity:.8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pk-time { color:var(--muted); font-size:.7rem; font-variant-numeric:tabular-nums; flex:none; }
.pk-empty { padding:12px 14px; color:var(--muted); font-size:.82rem; }

/* Widget Próximos eventos (sidebar inicio) */
.evw-row { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line); }
.evw-row:last-child { border-bottom:0; }
.evw-dot { width:9px; height:9px; flex:none; border-radius:50%; }
.evw-info { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.evw-name { color:var(--text); font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evw-when { color:var(--muted); font-size:.75rem; }
.evw-cd { flex:none; font-weight:600; font-size:.85rem; font-variant-numeric:tabular-nums; color:var(--accent-ink); white-space:nowrap; }
.evw-cd.soon { color:#e8a33d; }
.evw-cd.live { color:#2ec26a; }

/* ==================================================================
   Editor de disposición del inicio (drag & drop, admin)
   ================================================================== */
.home-col { display:flex; flex-direction:column; gap:16px; }   /* mismo ritmo que .cl-banners para alinear filas entre columnas */

/* Barra de herramientas del modo edición */
.home-edit-toolbar { position:sticky; top:74px; z-index:40; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    margin:14px 0 4px; padding:12px 16px; border-radius:var(--radius); background:var(--panel);
    border:1px solid var(--accent); box-shadow:var(--shadow-lg); }
.het-title { font-weight:600; color:var(--text); }
.het-hint { color:var(--muted); font-size:.84rem; flex:1; min-width:180px; }
.het-actions { display:flex; gap:8px; }

/* Widgets en modo edición */
.home-editing .home-widget { position:relative; border:1px dashed var(--line-2); border-radius:var(--radius); padding:10px; background:color-mix(in srgb, var(--accent) 3%, var(--panel)); }
.home-editing .home-widget:hover { border-color:var(--accent); }
.home-widget.dragging { opacity:.5; }
.hw-handle { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:6px 10px; border-radius:var(--radius-sm);
    background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent-ink); font-weight:600; font-size:.82rem;
    cursor:grab; user-select:none; }
.home-widget.hw-collapsed .hw-handle { margin-bottom:0; }
.hw-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hw-count { display:inline-flex; align-items:center; gap:4px; flex:none; font-weight:600; font-size:.76rem; cursor:default; }
.hw-count input { width:48px; padding:3px 6px; border-radius:6px; border:1px solid var(--line-2); background:var(--panel); color:var(--text); font-family:inherit; font-size:.8rem; text-align:center; }
.hw-toggle { flex:none; cursor:pointer; border:none; border-radius:999px; padding:3px 11px; font-family:inherit; font-weight:700; font-size:.72rem;
    background:color-mix(in srgb, var(--brand) 15%, transparent); color:var(--brand); transition:background .15s ease; }
.hw-toggle:hover { background:color-mix(in srgb, var(--brand) 28%, transparent); }
.home-col-hidden .hw-toggle { background:color-mix(in srgb, #1e9e5a 16%, transparent); color:#1a874e; }
.home-col-hidden .hw-toggle:hover { background:color-mix(in srgb, #1e9e5a 28%, transparent); }
/* ocultar el contenido del widget colapsado en modo edición (dejar solo el handle) */
.home-editing .home-widget.hw-collapsed > :not(.hw-handle) { display:none; }
.home-editing .home-col { min-height:80px; }
.home-col.col-over { outline:2px dashed var(--accent); outline-offset:4px; border-radius:var(--radius); }

/* Zona de ocultos */
.home-hidden-zone { margin-top:22px; padding:14px 16px; border:1px dashed var(--line-2); border-radius:var(--radius); background:var(--bg-2); }
.hhz-label { font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; font-size:.78rem; margin-bottom:10px; }
.home-col-hidden { min-height:56px; flex-direction:row; flex-wrap:wrap; gap:10px; }
.home-col-hidden .home-widget { flex:0 0 auto; padding:0; background:var(--panel); }

/* ==================================================================
   Hero de landing (full-bleed, protagonista) — inicio MU Legend
   ================================================================== */
body { overflow-x: clip; }   /* evita scroll horizontal por el full-bleed */

#home-hero {
    position: relative;
    /* rompe el ancho del contenedor y ocupa TODO el viewport */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -40px;                 /* se come el padding-top de .main */
    min-height: min(45vh, 460px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 48px 24px 60px;
    border: none; border-radius: 0; box-shadow: none;
    background-image: linear-gradient(180deg, rgba(8,10,16,.35) 0%, rgba(8,10,16,.55) 55%, rgba(8,10,16,.92) 100%), var(--hero-img);
    background-size: cover; background-position: center 30%;
}
/* override de las esquinas redondeadas del estilo moderno */
[data-style="modern"] #home-hero { border-radius: 0; }

.hero-inner { max-width: 900px; }
#home-hero .eyebrow { font-size: .95rem; letter-spacing: 4px; }
#home-hero h1 {
    font-size: clamp(3rem, 8vw, 6rem); line-height: 1.02; margin: 16px 0 18px;
    letter-spacing: -0.02em; text-shadow: 0 6px 40px rgba(0,0,0,.55);
}
#home-hero p.lead { font-size: clamp(1.1rem, 2.2vw, 1.55rem); max-width: 720px; margin: 0 auto 34px; color: rgba(255,255,255,.9); }
#home-hero .hero-actions { gap: 16px; }
#home-hero .hero-actions .btn-lg { padding: 16px 40px; font-size: 1.05rem; }

/* Indicador de scroll */
.hero-scroll {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 44px; display: grid; place-items: center;
    color: #fff; font-size: 1.8rem; line-height: 1; border-radius: 50%;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
    text-decoration: none; animation: heroBob 1.8s ease-in-out infinite;
}
.hero-scroll:hover { background: rgba(255,255,255,.2); color: #fff; }
@keyframes heroBob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

@media (max-width: 720px) {
    #home-hero { min-height: 40vh; padding: 40px 20px 52px; }
}

/* Selector de imágenes del inicio (modo edición) */
.home-img-panel { margin:8px 0 4px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); }
.hip-rows { display:flex; flex-wrap:wrap; gap:22px; }
.hip-row { display:flex; align-items:center; gap:12px; }
.hip-label { font-weight:600; font-size:.85rem; color:var(--text); }
.hip-preview { width:96px; height:54px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background-size:cover; background-position:center; flex:none; }
.hip-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px; margin-top:14px; max-height:340px; overflow-y:auto; padding:4px; }
.hip-thumb { height:74px; border-radius:var(--radius-sm); border:2px solid transparent; background-size:cover; background-position:center; cursor:pointer; padding:0; }
.hip-thumb:hover { border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.hip-thumb.sel { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }

/* Iconos sociales en la topbar */
.social-ico { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; color:var(--muted); opacity:.85; transition:color .15s, background .15s, opacity .15s; }
.social-ico:hover { color:var(--text); opacity:1; background:color-mix(in srgb, var(--accent) 10%, transparent); }
[data-style="modern"] .social-ico { border-radius:var(--pill); }

/* Selector de idioma */
.lang-dd { position: relative; }
.lang-dd > summary.lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: .85rem; cursor: pointer; list-style: none; }
.lang-dd > summary::-webkit-details-marker { display: none; }
.lang-btn:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.lang-caret { font-size: .7rem; opacity: .7; }
.lang-menu { right: 0; left: auto; min-width: 165px; }
.lang-menu a { display: flex; gap: 8px; align-items: center; }
.lang-menu a.active { color: var(--brand); }
[data-style="modern"] .lang-btn { border-radius: var(--pill); }

/* Ocultar la barra/marca de Google Translate */
.goog-te-banner-frame.skiptranslate, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; position: static !important; }
.goog-te-gadget, .goog-te-gadget-icon, #goog-gt-tt, .goog-tooltip, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ==================================================================
   Tienda (LEGEND Shop + Founder Packs)
   ================================================================== */
.shop-card { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 20px 20px; text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center; transition:transform .15s ease, border-color .15s ease; }
.shop-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.shop-card.shop-pop { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow); }
.shop-badge { position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:var(--accent-solid); color:#fff; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:3px 12px; border-radius:999px; white-space:nowrap; }
.shop-amt { font-size:2.1rem; font-weight:700; color:var(--text); line-height:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
.shop-unit { font-size:.72rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.shop-bonus { display:inline-block; padding:3px 12px; border-radius:999px; font-size:.82rem; font-weight:700; color:#1c7c3e; background:color-mix(in srgb, #2ec26a 18%, transparent); }
.shop-bonus-none { color:var(--muted); background:var(--bg-2); font-weight:500; }
.shop-price { font-size:1.2rem; font-weight:700; color:var(--accent-ink); margin:4px 0 6px; }
.shop-card .btn-block { margin-top:auto; }

/* Políticas desplegables (sin caja, marcador triángulo por defecto) */
.policy { margin-top:16px; }
.policy > summary { cursor:pointer; padding:6px 0; font-weight:600; color:var(--text); }
.policy-body { padding:6px 0 8px; color:var(--muted); font-size:.9rem; }
.policy-intro { font-weight:700; color:var(--text); margin:6px 0 10px; }
.policy-body ol { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:9px; }
.policy-body li { line-height:1.6; }
.policy-body strong { color:var(--text); }
.policy-body p { margin:12px 0 0; }

/* Checkout: selección de medio de pago */
.co-sum { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.co-title { font-weight:700; font-size:1.1rem; color:var(--text); }
.co-sub { color:var(--muted); font-size:.88rem; }
.co-price { font-size:1.5rem; font-weight:700; color:var(--accent-ink); white-space:nowrap; }
.co-methods { display:flex; flex-direction:column; gap:12px; }
.co-method { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left;
    padding:16px 18px; border-radius:var(--radius); border:1px solid var(--line-2); background:var(--bg-2);
    color:var(--text); font-size:1rem; cursor:pointer; transition:border-color .15s ease, transform .1s ease; }
.co-method:hover { border-color:var(--accent); transform:translateY(-1px); }
.co-method-name { font-weight:600; }
.co-method-amt { font-weight:700; color:var(--accent-ink); }

.founder-card { --fz-tint:transparent; position:relative; overflow:hidden;
    background:
        linear-gradient(160deg, color-mix(in srgb,var(--fz-tint) 20%,transparent) 0%, color-mix(in srgb,var(--fz-tint) 5%,transparent) 45%, transparent 72%),
        linear-gradient(0deg, color-mix(in srgb,var(--panel) 90%,transparent), color-mix(in srgb,var(--panel) 90%,transparent)),
        url(../img/mulegend/BackgroundBook.png) center/cover no-repeat,
        var(--panel);
    border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 22px; display:flex; flex-direction:column; gap:12px; }
.founder-card > .btn { margin-top:auto; }   /* empuja el botón al fondo -> alineados aunque el contenido difiera */
.founder-card.founder-silver   { --fz-tint:#9aa3b2; border-top:3px solid #9aa3b2; }
.founder-card.founder-gold     { --fz-tint:#e0a400; border-top:3px solid #e0a400; }
.founder-card.founder-platinum { --fz-tint:#7fd3e6; border-top:3px solid #7fd3e6; }
.founder-off { position:absolute; top:14px; right:14px; background:var(--brand); color:#fff; font-weight:700; font-size:.72rem; padding:3px 9px; border-radius:6px; }
.founder-title { margin:0; font-size:1.3rem; }
.founder-price { display:flex; flex-direction:column; gap:2px; }
.founder-before { color:var(--muted); text-decoration:line-through; font-size:.9rem; }
.founder-now { font-size:1.6rem; font-weight:700; color:var(--accent-ink); }
.founder-list { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; }
.founder-list li { position:relative; padding-left:20px; color:var(--text); font-size:.9rem; }
.founder-list li::before { content:'✦'; position:absolute; left:0; color:var(--accent-ink); }

/* Dropdown de cuenta */
.acc-dd { position: relative; }
.acc-dd > summary { list-style: none; cursor: pointer; }
.acc-dd > summary::-webkit-details-marker { display: none; }
.acc-menu { right: 0; left: auto; min-width: 220px; white-space: nowrap; }

/* Toast de caché borrada */
.cache-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:120;
    background:var(--panel); border:1px solid var(--accent); color:var(--text); font-weight:600;
    padding:11px 18px; border-radius:var(--radius); box-shadow:var(--shadow-lg); }

/* Historial de compras */
.oh-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.oh-search { padding:9px 14px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--input-bg); color:var(--text); font-family:inherit; font-size:.95rem; min-width:220px; }
.oh-search:focus { outline:none; border-color:var(--accent); }
.oh-prod { display:inline-flex; align-items:center; gap:9px; }
.oh-ico { width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:7px; font-size:.95rem; background:var(--bg-2); }
.oh-founder { background:color-mix(in srgb, #e0a400 22%, transparent); }
.oh-wcoins { background:color-mix(in srgb, #e5b23a 20%, transparent); }
.oh-method { display:inline-flex; align-items:center; gap:6px; color:var(--muted); }
.oh-m-paypal { color:#2b6cb0; }
.oh-m-mercadopago { color:#1a7fd6; }
.oh-badge { display:inline-block; padding:3px 11px; border-radius:999px; font-size:.76rem; font-weight:700; }
.oh-ok { color:#1c7c3e; background:color-mix(in srgb, #2ec26a 18%, transparent); }
.oh-pend { color:#8a6d1a; background:color-mix(in srgb, #e0a400 20%, transparent); }

/* Opciones de admin — toggles */
.form-card h3 { margin:20px 0 6px; font-size:1.05rem; }
.opt-row { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.opt-row input { display:none; }
.opt-switch { flex:none; width:42px; height:24px; border-radius:999px; background:var(--line-2); position:relative; transition:background .15s; margin-top:2px; }
.opt-switch::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.opt-row input:checked + .opt-switch { background:var(--accent-solid); }
.opt-row input:checked + .opt-switch::after { transform:translateX(18px); }
.opt-text { display:flex; flex-direction:column; gap:2px; }
.opt-text strong { color:var(--text); }
.opt-text small { color:var(--muted); font-size:.85rem; }

/* ==================================================================
   Panel "Mi cuenta"
   ================================================================== */
.acct-hero { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:22px 24px; margin-top:16px;
    background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel));
    border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.acct-av, .acct-av-ph { width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; }
.acct-av-ph { display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-weight:700; font-size:1.6rem; }
/* Avatar clickeable para cambiar la foto */
.acct-av-form { flex:none; margin:0; }
.acct-av-wrap { display:inline-block; cursor:pointer; border-radius:50%; }
.acct-av-wrap .acct-av, .acct-av-wrap .acct-av-ph { display:block; transition:filter .15s ease, box-shadow .15s ease; }
.acct-av-wrap:hover .acct-av, .acct-av-wrap:hover .acct-av-ph { filter:brightness(.9); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent); }
.acct-id { flex:1; min-width:160px; }
.acct-id h1 { margin:0; font-size:1.6rem; }
.acct-since { color:var(--muted); font-size:.9rem; }
.acct-chips { display:flex; gap:10px; }
.acct-chip { text-align:center; padding:8px 16px; border-radius:var(--radius-sm); background:var(--bg-2); border:1px solid var(--line); }
.acct-chip-n { display:block; font-size:1.25rem; font-weight:700; color:var(--accent-ink); line-height:1.1; }
.acct-chip-l { font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.acct-logout { flex:none; }

.acct-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
@media (max-width:760px){ .acct-grid { grid-template-columns:1fr; } }
.acct-col { display:flex; flex-direction:column; gap:18px; }
.acct-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; }
.acct-card h3 { margin:0 0 14px; font-size:1.05rem; }
.acct-form { display:flex; flex-direction:column; gap:10px; }
.acct-form label { font-size:.82rem; color:var(--muted); font-weight:600; }
.acct-form input { padding:10px 13px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--input-bg); color:var(--text); font-family:inherit; font-size:.95rem; }
.acct-form input:focus { outline:none; border-color:var(--accent); }
.acct-inline { display:flex; gap:8px; }
.acct-inline input { flex:1; }
.acct-sep { height:1px; background:var(--line); margin:18px 0; }
.acct-avform { display:flex; align-items:center; gap:14px; }
.acct-av-sm, .acct-av-sm.acct-av-ph { width:54px; height:54px; border-radius:50%; flex:none; object-fit:cover; }
.acct-av-sm.acct-av-ph { display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-weight:700; font-size:1.3rem; }
.acct-file { width:100%; margin-bottom:8px; color:var(--muted); font-size:.82rem; }
/* Avatar por defecto = icono de clase: contener y darle fondo para que no se recorte */
.acct-av.acct-av-class, .acct-av-sm.acct-av-class {
    object-fit:contain; padding:8px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, #0000), color-mix(in srgb, var(--accent-2) 22%, #0000)), var(--surface-2, rgba(0,0,0,.04));
}
.acc-av.acc-av-class { object-fit:contain; padding:3px; background:var(--surface-2, rgba(0,0,0,.06)); }
.acct-links { display:flex; flex-direction:column; gap:2px; }
.acct-links a { display:block; padding:11px 12px; border-radius:var(--radius-sm); color:var(--text); font-weight:500; }
.acct-links a:hover { background:var(--bg-2); color:var(--accent-ink); }

/* Filtros del panel de pagos */
.pay-cfg { padding:10px 14px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:.85rem; color:var(--muted); margin-bottom:14px; }
.pay-cfg b { color:var(--text); }
.pay-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pay-filters input[type=text], .pay-filters select { padding:9px 13px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--input-bg); color:var(--text); font-family:inherit; font-size:.92rem; }
.pay-filters input[type=text] { flex:1; min-width:220px; }

/* ID de pago completo (admin + usuario) */
.pay-txn { font-size:.8rem; color:var(--muted); font-family:ui-monospace,Consolas,monospace; word-break:break-all; }
.oh-bar-right { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Filtros de fecha en pagos */
.pf-date { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.85rem; }
.pf-date input { padding:8px 10px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--input-bg); color:var(--text); font-family:inherit; }

/* Layout tabla + top donadores */
.pay-layout { display:grid; grid-template-columns:1fr 280px; gap:18px; align-items:start; margin-top:6px; }
@media (max-width:900px){ .pay-layout { grid-template-columns:1fr; } }
.pay-donors { align-self:start; }
.donor-row { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line); text-decoration:none; }
.donor-row:last-child { border-bottom:0; }
.donor-row:hover { background:var(--bg-2); }
.donor-pos { width:22px; text-align:center; font-weight:700; color:var(--muted); flex:none; }
.donor-name { flex:1; color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.donor-usd { color:var(--accent-ink); font-weight:700; font-size:.9rem; white-space:nowrap; }

/* Tabs de período en top donadores */
.donor-tabs { display:flex; gap:4px; }
.donor-tabs a { padding:3px 9px; border-radius:999px; font-size:.72rem; font-weight:600; color:var(--muted); background:var(--bg-2); }
.donor-tabs a:hover { color:var(--text); }
.donor-tabs a.active { color:#fff; background:var(--accent-solid); }

/* Timeline plegable en pagos */
.tl-panel > summary { cursor:pointer; font-weight:600; color:var(--text); list-style:none; }
.tl-panel > summary::-webkit-details-marker { display:none; }
.tl-panel > summary::before { content:'▸'; color:var(--muted); margin-right:8px; }
.tl-panel[open] > summary::before { content:'▾'; }

/* Toggle de alertas de sonido de eventos */
.ev-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
/* Widget: solo campanita */
.evt-sound-toggle:not(.evt-full) { cursor:pointer; border:none; background:none; padding:2px 4px; font-size:1.1rem; line-height:1; opacity:.6; }
.evt-sound-toggle:not(.evt-full):hover { opacity:1; }
.evt-sound-toggle:not(.evt-full).on { opacity:1; }
/* Página de eventos: botón con texto/borde (estilo btn) + estado activo */
.evt-sound-toggle.evt-full { cursor:pointer; }
.evt-sound-toggle.evt-full.on { color:var(--accent-ink); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }

/* Formato del contenido de entradas (markdown liviano) */
.post-body p { margin:0 0 14px; }
.post-body strong { color:var(--text); font-weight:700; }
.post-body em { font-style:italic; }
.post-body h2, .post-body h3, .post-body h4, .post-body h5 { margin:22px 0 10px; color:var(--text); line-height:1.25; }
.post-body h2 { font-size:1.5rem; } .post-body h3 { font-size:1.4rem; } .post-body h4 { font-size:1.2rem; } .post-body h5 { font-size:1.05rem; }
.post-body ul, .post-body ol { margin:0 0 14px; padding-left:24px; display:flex; flex-direction:column; gap:6px; }
.post-body li { line-height:1.6; }
.post-body code { background:var(--bg-2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:.9em; font-family:ui-monospace,Consolas,monospace; }
.post-body a { color:var(--accent-ink); text-decoration:underline; }

/* Imágenes dentro del contenido de entradas */
.post-body .post-img { max-width:100%; height:auto; border-radius:var(--radius); margin:8px 0; display:block; }

/* Lightbox de imágenes de entradas */
.post-body img { cursor: zoom-in; max-width:100%; height:auto; border-radius:var(--radius); }
.img-lightbox { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
    background:rgba(6,8,12,.9); padding:24px; cursor:zoom-out; }
.img-lightbox.open { display:flex; }
.img-lightbox img { max-width:96vw; max-height:96vh; width:auto; height:auto; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6); }

/* Partículas del hero */
.hero-particles { position:absolute; inset:0; z-index:1; pointer-events:none; }

/* Caras de usuarios conectados flotando (fondo del hero, detrás del texto) */
#home-hero .hero-inner { position:relative; z-index:2; }
.hero-faces { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.hero-face { position:absolute; bottom:-70px; display:flex; flex-direction:column; align-items:center; gap:6px;
    opacity:0; animation-name:heroFaceFloat; animation-timing-function:linear; animation-iteration-count:infinite;
    will-change:transform,opacity; }
.hero-face-av { width:46px; height:46px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
    border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); box-shadow:0 4px 18px rgba(0,0,0,.3); }
.hero-face-av img { width:100%; height:100%; object-fit:cover; }
.hero-face-ph { color:#fff; font-weight:700; font-size:1.1rem; }
.hero-face-nick { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:.72rem; color:rgba(255,255,255,.9); background:rgba(0,0,0,.3); padding:1px 8px; border-radius:999px;
    text-shadow:0 1px 4px rgba(0,0,0,.6); }
@keyframes heroFaceFloat {
    0%   { transform:translateY(0);       opacity:0; }
    15%  { opacity:.5; }
    85%  { opacity:.5; }
    100% { transform:translateY(-560px);  opacity:0; }
}
@media (prefers-reduced-motion: reduce) { .hero-face { animation:none; display:none; } }
#home-hero .hero-inner { position:relative; z-index:2; }

/* ==================================================================
   Constructor de menú (admin, drag & drop)
   ================================================================== */
.mb-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.mb-root { display:flex; flex-direction:column; gap:8px; min-height:60px; max-width:820px;
    background:var(--bg-2); border:1px dashed var(--line-2); border-radius:var(--radius); padding:12px; }
.mb-node { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); }
.mb-item { display:flex; align-items:center; gap:10px; padding:8px 12px; }
.mb-handle { cursor:grab; color:var(--muted); font-size:1rem; flex:none; user-select:none; }
.mb-label, .mb-gname { flex:1; min-width:0; }
.mb-def { color:var(--muted); font-size:.76rem; white-space:nowrap; }
.mb-en-wrap { flex:none; display:inline-flex; }
.mb-drag { opacity:.5; }

.mb-group { padding:10px 12px; border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); }
.mb-group-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.mb-del { flex:none; border:none; background:none; color:var(--muted); cursor:pointer; font-size:1rem; border-radius:6px; padding:2px 7px; }
.mb-del:hover { color:#fff; background:#c0392b; }
.mb-children { display:flex; flex-direction:column; gap:6px; min-height:38px; margin-left:22px;
    padding:8px; border:1px dashed var(--line-2); border-radius:var(--radius-sm); background:var(--bg-2); }
.mb-children:empty::before { content:'Soltá ítems acá para agruparlos'; color:var(--muted); font-size:.8rem; }
.mb-zone.mb-over { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent); }

/* Castle Siege clickeable */
.castle[data-href] { cursor:pointer; }
/* Alinea el 2º widget del sidebar (Eventos) con el 2º banner de changelogs */
.hs-side .castle { min-height: 130px; margin-bottom: 0; }   /* sin margen extra: alinea con los banners de la izquierda */

/* Botón de contorno dentro del hero: siempre legible sobre la imagen oscura */
#home-hero .btn-ghost { color:#fff; border-color:rgba(255,255,255,.55); background:transparent; }
#home-hero .btn-ghost:hover { color:#fff; border-color:#fff; background:rgba(255,255,255,.14); }

/* ==================================================================
   Permisos de admin (tarjetas)
   ================================================================== */
.perm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:16px; }
.perm-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; }
.perm-card.perm-owner { border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 6%, var(--panel)), var(--panel)); }
.perm-head { display:flex; align-items:center; gap:12px; }
.perm-av { width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-2)); }
.perm-id { flex:1; min-width:0; }
.perm-name { display:block; font-weight:700; color:var(--text); }
.perm-name small { color:var(--muted); font-weight:400; }
.perm-sub { font-size:.82rem; color:var(--muted); }
.perm-badge { font-size:.72rem; font-weight:700; color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 14%, transparent); padding:4px 10px; border-radius:999px; white-space:nowrap; }
.perm-body { margin-top:14px; display:flex; flex-direction:column; gap:14px; }
.perm-gtitle { font-size:.74rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600; margin-bottom:4px; }
.perm-row { display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer; }
.perm-row input { display:none; }
.perm-row input:checked + .opt-switch { background:var(--accent-solid); }
.perm-row input:checked + .opt-switch::after { transform:translateX(18px); }
.perm-row input:disabled + .opt-switch { opacity:.55; }
.perm-lbl { color:var(--text); font-size:.92rem; }
.perm-lbl small { color:var(--muted); }

/* Revelar contraseña (admin) */
.pw-reveal { display:inline-flex; align-items:center; gap:8px; }
.pw-eye { border:none; background:none; cursor:pointer; font-size:.95rem; padding:0 2px; }

/* Badge de Fundador en el perfil */
/* Título equipado in-game (color del juego) */
.acct-title-row { margin:2px 0 4px; font-size:.9rem; color:var(--muted); }
/* Seguridad desplegable */
.acct-collapse > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none; }
.acct-collapse > summary::-webkit-details-marker { display:none; }
.acct-collapse > summary strong { display:block; font-size:1.05rem; }
.acct-collapse > summary small { display:block; color:var(--muted); font-size:.85rem; margin-top:2px; }
.acct-collapse > summary .opt-caret { color:var(--muted); transition:transform .2s ease; flex:none; }
.acct-collapse[open] > summary .opt-caret { transform:rotate(180deg); }
.ml-title { font-weight:700; color:var(--text); }
.acct-title-char { color:var(--muted); font-size:.82rem; }

.founder-badge-tag { display:inline-block; vertical-align:middle; font-size:.7rem; font-weight:700; letter-spacing:.03em;
    padding:4px 12px; border-radius:999px; margin-left:8px; color:#3a2c00;
    background:linear-gradient(135deg,#ffd873,#e0a400); }

/* ---- Zona Fundador (Mi cuenta) ---- */
.founder-zone { margin:22px 0; border:1px solid color-mix(in srgb,#d4af37 40%,var(--line-2)); }
.founder-zone.founder-zone-pending { border-color:color-mix(in srgb,#d4af37 70%,transparent);
    box-shadow:0 0 0 3px color-mix(in srgb,#d4af37 14%,transparent); }
.fz-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.fz-head h3 { margin:0; }
.fz-head .founder-badge-tag { margin-left:0; }
.fz-alert { margin-left:auto; font-size:.78rem; font-weight:700; color:#8a5a00;
    background:color-mix(in srgb,#ffd873 40%,transparent); padding:3px 10px; border-radius:999px; }
.fz-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.fz-item { display:flex; align-items:center; gap:12px; padding:14px; border-radius:var(--radius-sm);
    background:var(--input-bg); border:1px solid var(--line-2); }
.fz-ic { font-size:1.5rem; flex:none; line-height:1; }
.fz-body { flex:1; min-width:0; }
.fz-body strong { display:block; font-size:.95rem; }
.fz-body small { display:block; color:var(--muted); font-size:.8rem; margin-top:2px; }
.fz-item .btn { flex:none; }
.fz-done { flex:none; font-weight:700; font-size:.85rem; color:#1e9e5a;
    background:color-mix(in srgb,#1e9e5a 14%,transparent); padding:5px 12px; border-radius:999px; }
@media (max-width:640px){ .fz-grid{ grid-template-columns:1fr; } }

/* ==================================================================
   Buscador de personajes / guilds
   ================================================================== */
.sr-form { display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 20px auto 22px; }
.sr-form input { flex: 1; min-width: 0; padding: 13px 16px; border-radius: 12px; background: var(--input-bg); border: 1px solid var(--line-2); color: var(--text); font-family: inherit; font-size: 1rem; }
.sr-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
.sr-form .ns-btn { flex: none; width: 44px; height: 44px; cursor: pointer; padding: 0; border: none; background: transparent; }
.sr-group { margin-bottom: 22px; }
.sr-group h3 { font-size: 1rem; margin: 0 0 10px; }
.sr-group h3 span { display: inline-block; margin-left: 6px; font-size: .75rem; font-weight: 700; color: var(--accent-ink); background: color-mix(in srgb,var(--accent) 15%,transparent); padding: 1px 8px; border-radius: 999px; }
.sr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.sr-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel);
    border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.sr-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--accent) 35%,var(--line)); }
.sr-item .cbadge { flex: none; }
.sr-emb { flex: none; width: 34px; height: 34px; display: grid; place-items: center; font-size: 1.1rem; }
.sr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sr-name { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-meta { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-cp { flex: none; text-align: right; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.sr-cp small { display: block; font-size: .62rem; color: var(--muted); font-weight: 600; }

/* Buscador en la barra (dropdown en vivo) */
.nav-search { position: relative; margin-left: auto; }
.nav-search form { display: flex; align-items: center; gap: 4px; }
.nav-search input { width: 200px; max-width: 40vw; padding: 7px 14px; border-radius: var(--pill);
    background: var(--input-bg); border: 1px solid var(--line-2); color: var(--text); font-family: inherit; font-size: .86rem; transition: width .2s ease, border-color .15s ease; }
.nav-search input:focus { outline: none; border-color: var(--accent); width: 250px; }
.nav-search .ns-btn { flex: none; width: 36px; height: 36px; cursor: pointer; padding: 0; border: none; background: transparent; }
.nav-search-drop { position: absolute; top: calc(100% + 6px); right: 0; width: min(360px, 88vw); z-index: 80;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
    padding: 8px; max-height: 70vh; overflow-y: auto; }
.nsd-group { margin-bottom: 6px; }
.nsd-h { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 4px 8px; }
.nav-search-drop .sr-item { box-shadow: none; border: none; border-radius: 8px; padding: 8px 10px; }
.nav-search-drop .sr-item:hover { transform: none; background: color-mix(in srgb,var(--accent) 10%,transparent); }
/* En la vista previa: solo el ícono de clase, sin el texto (la página completa sí lo muestra) */
.nav-search-drop .cbadge-name { display: none; }
.nsd-all { display: block; text-align: center; padding: 9px; margin-top: 4px; border-top: 1px solid var(--line-2);
    font-weight: 700; font-size: .84rem; color: var(--accent-ink); }
.nsd-empty { padding: 16px; text-align: center; color: var(--muted); font-size: .88rem; }

/* ---- Skeleton (estados de carga) ---- */
.skel { display: block; border-radius: 6px; background: linear-gradient(90deg,
        color-mix(in srgb,var(--muted) 14%,transparent) 25%,
        color-mix(in srgb,var(--muted) 26%,transparent) 37%,
        color-mix(in srgb,var(--muted) 14%,transparent) 63%);
    background-size: 400% 100%; animation: skelShimmer 1.3s ease infinite; }
@keyframes skelShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skel-av { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.skel-line { height: 12px; width: 70%; margin: 3px 0; }
.skel-line.sm { width: 45%; height: 10px; }
.sr-skel { pointer-events: none; }
.skel-cd { width: 58px; height: 14px; display: inline-block; vertical-align: middle; border-radius: 5px; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ==================================================================
   RESPONSIVE — pase integral tablet / celular
   ================================================================== */
img { max-width: 100%; }

/* ---- Tablet (≤900px) ---- */
@media (max-width: 900px) {
    /* Menú del juego (subnav): una sola fila horizontal con scroll si no entra */
    .subbar-inner { height: auto; gap: 8px 14px; flex-wrap: wrap; padding: 8px 0; }
    .subnav { width: 100%; gap: 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .subnav::-webkit-scrollbar { display: none; }
    .subnav > a, .subnav-dd { flex: none; white-space: nowrap; }
    .srv-status { flex: none; }
    /* Buscador de la barra a lo ancho en celular/tablet */
    .nav-search { margin-left: 0; width: 100%; order: 3; }
    .nav-search input, .nav-search input:focus { width: 100%; max-width: none; }
    .nav-search-drop { width: 100%; }

    /* Barra del panel admin: scroll horizontal */
    .admin-bar { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
    .admin-bar nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .admin-bar nav::-webkit-scrollbar { display: none; }
    .admin-bar nav a { flex: 0 0 auto; white-space: nowrap; }
}

/* ---- Celular (≤640px) ---- */
@media (max-width: 640px) {
    .wrap { width: 94vw; }
    .main { padding: 24px 0 56px; }

    /* Tipografía / secciones */
    .section-head { margin-bottom: 20px; }
    .section-head h2 { font-size: 1.3rem; }
    h1 { font-size: 1.7rem; }

    /* Heros */
    #home-hero { min-height: auto; padding: 34px 18px 42px; margin-top: -24px; }
    #home-hero h1 { font-size: clamp(2rem, 11vw, 2.8rem); margin: 10px 0 12px; }
    #home-hero p.lead { font-size: 1.02rem; margin-bottom: 22px; }
    .rank-hero { padding: 28px 18px; }
    .rm-hero, .dl-hero { padding: 30px 20px; border-radius: 16px; }
    .rm-hero h1, .dl-hero h1 { font-size: clamp(1.8rem, 9vw, 2.4rem); }
    .gt-head { gap: 12px; }
    .gt-ic { width: 44px; height: 44px; font-size: 1.3rem; }

    /* Botones */
    .hero-actions { flex-direction: column; width: 100%; }
    .hero-actions .btn, .hero-actions .btn-lg { width: 100%; text-align: center; }
    #home-hero .hero-actions .btn-lg { padding: 14px 20px; }
    .btn-lg { padding: 12px 22px; font-size: 1rem; }

    /* Cards / paneles: menos padding */
    .card, .panel { padding: 18px; }
    .form-card { padding: 22px 18px; }
    .gt-card, .acct-card, .hz-card { padding: 16px; }
    .founder-card, .shop-card { padding: 20px 16px; }
    .section { margin-top: 24px !important; }

    /* Tablas: celdas más compactas (siguen con scroll horizontal) */
    table.rank th, table.rank td { padding: 9px 10px; font-size: .85rem; }
    .gt-table th, .gt-table td { padding: 7px 8px; }

    /* Cuenta */
    .acct-hero { padding: 18px 16px; gap: 14px; }
    .acct-chips { width: 100%; }
    .acct-chip { flex: 1; padding: 8px 10px; }
    .acct-inline { flex-direction: column; align-items: stretch; }
    .acct-inline .btn { width: 100%; }

    /* Filtros (pagos / drops) a full width */
    .pay-filters, .drop-filters, .oh-bar { gap: 8px; }
    .pay-filters input[type=text], .pay-filters select,
    .drop-filters input[type=text], .drop-filters select,
    .oh-search { min-width: 0; width: 100%; flex: 1 1 100%; }

    /* Grillas que aún no colapsaban */
    .dl-grid, .hz-grid, .roadmap { grid-template-columns: 1fr; }

    /* Búsqueda de cuentas (cards) */
    .acs-card { flex-direction: column; align-items: stretch; }
    .acs-btn { width: 100%; text-align: center; }

    /* Footer centrado */
    .footer-inner, .footer-copy { text-align: center; }
}

/* ---- Celular chico (≤420px) ---- */
@media (max-width: 420px) {
    .net-logo { height: 22px; }
    #home-hero h1 { font-size: 2rem; }
    .section-head h2 { font-size: 1.2rem; }
    .acct-chips { flex-wrap: wrap; }
    .acct-chip { flex: 1 1 30%; }
    .cs-ph-time { font-size: .8rem; }
}

/* ==================================================================
   FIX menú móvil (hamburguesa + desplegables) e inputs iOS
   ================================================================== */
@media (max-width: 960px) {
    /* El menú abierto no recorta submenús y scrollea si es alto */
    .nav-toggle:checked ~ .game-switch { max-height: 85vh; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; }

    /* Cada elemento del menú ocupa toda la fila y es fácil de tocar */
    .game-switch > * { width: 100%; margin: 0; }
    .game-switch .lang-btn,
    .game-switch .acc-chip,
    .game-switch .social-ico,
    .game-switch .theme-toggle,
    .game-switch .gs-account {
        display: flex; align-items: center; justify-content: flex-start; gap: 10px;
        width: 100%; padding: 14px 6vw; border-bottom: 1px solid var(--line);
        border-radius: 0; margin: 0; height: auto;
    }
    .game-switch > .btn { display: block; width: auto; margin: 12px 6vw; text-align: center; }
    .game-switch .acc-av { width: 26px; height: 26px; }
    .lang-caret { margin-left: auto; }

    /* Submenús (idioma / cuenta) INLINE dentro del menú: sin absolute, sin recorte */
    .game-switch .gs-dd .gs-menu {
        position: static; box-shadow: none; border: none; margin: 0; padding: 0;
        min-width: 0; width: 100%; background: color-mix(in srgb, var(--accent) 6%, transparent);
    }
    .game-switch .gs-dd .gs-menu a { padding: 12px 9vw; border-bottom: 1px solid var(--line); }

    /* Desplegable "Servidor" de la subnav (la subnav ahora envuelve, no recorta) */
    .subnav-dd { position: relative; }
    .subnav-dd .gs-menu { z-index: 70; }
}

/* iOS no hace zoom al enfocar si el input es >= 16px */
@media (max-width: 640px) {
    input, select, textarea,
    .field input, .gt-input, .rm-ein,
    .acct-form input, .acct-form select, .acct-form textarea,
    .oh-search, .admin-search input,
    .pay-filters input, .pay-filters select,
    .drop-filters input, .drop-filters select { font-size: 16px; }
}

/* ==================================================================
   Hero mejorado (rates / online / countdown / discord / rotativo)
   ================================================================== */
.btn-discord { background: #5865F2; color: #fff; border-color: transparent; }
.btn-discord:hover { background: #4752c4; color: #fff; filter: none; }

/* Fondo rotativo (crossfade), detrás del contenido y con velo */
.hero-rot { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-rot .hr-layer { position: absolute; inset: 0; background-size: cover; background-position: center 30%; opacity: 0; transition: opacity 1.2s ease; }
.hero-rot .hr-layer.on { opacity: 1; }
.hero-rot::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,10,16,.35) 0%, rgba(8,10,16,.55) 55%, rgba(8,10,16,.92) 100%); }

/* Barra de info (rates / online / temporada) */
.hero-bar { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; margin-top: 24px; }
.hb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: .82rem; font-weight: 600;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.hb-rate b { color: var(--accent-2, #ffd873); font-weight: 800; }
.hb-season { background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 45%,transparent), color-mix(in srgb,var(--accent) 22%,transparent)); border-color: transparent; font-weight: 800; letter-spacing: .02em; }
.hb-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ee88f; box-shadow: 0 0 8px #2ee88f; }
.hb-online.off .hb-dot { background: #e5352b; box-shadow: none; }

/* Countdown al próximo evento */
.hero-next { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 8px 16px;
    border-radius: 999px; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: .9rem; }
.hn-label { color: rgba(255,255,255,.7); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.hn-name { font-weight: 700; }
.hn-cd { font-weight: 800; color: var(--accent-2, #ffd873); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .hero-next { flex-wrap: wrap; justify-content: center; gap: 4px 10px; } .hn-label { width: 100%; } }

/* ==================================================================
   Slider de Guilds (footer, marquee automático)
   ================================================================== */
.guild-slider { margin-top: 30px; overflow: hidden; }
.gsl-head { margin: 0 0 12px; }
.gsl-head span { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.gsl-head span::after { content: ' · Comunidad'; color: var(--accent-ink); font-weight: 500; font-size: .9rem; }
.gsl-viewport { overflow: hidden; width: 100%; cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.gsl-viewport.grabbing { cursor: grabbing; }
.gsl-viewport.grabbing .gsl-card { pointer-events: none; }
.gsl-track { display: flex; gap: 12px; width: max-content; padding: 2px 12px; will-change: transform;
    user-select: none; animation: gslMove var(--gsl-dur, 40s) linear infinite; }
.gsl-track a, .gsl-track img { -webkit-user-drag: none; user-select: none; }
.guild-slider:hover .gsl-track { animation-play-state: paused; }
@keyframes gslMove { from { transform: translateX(0); } to { transform: translateX(calc(-100% / var(--gsl-dupe, 2))); } }
.gsl-card { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; width: 230px; padding: 10px 14px; border-radius: 12px;
    background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.gsl-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-2px); }
.gsl-card .emblem { flex: none; }
.gsl-info { min-width: 0; display: flex; flex-direction: column; }
.gsl-name { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsl-meta { font-size: .78rem; color: var(--muted); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .gsl-track { animation: none; } .gsl-viewport { overflow-x: auto; } }

/* ==================================================================
   Widget Top 3 · Nivel
   ================================================================== */
.tl-list { padding: 6px; }
.tl-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; transition: background .15s ease; }
.tl-row:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.tl-row + .tl-row { border-top: 1px solid var(--line-2); }
.tl-medal { flex: none; font-size: 1.25rem; width: 26px; text-align: center; }
.tl-cls { flex: none; width: 30px; height: 30px; object-fit: contain; }
.tl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tl-name { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-meta { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.tl-cp { flex: none; text-align: right; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; font-size: .9rem; }
.tl-cp small { display: block; font-size: .6rem; color: var(--muted); font-weight: 600; }
.tl-p1 .tl-name { color: var(--accent-ink); }


/* ===================== ARENA ===================== */
.ar-profile { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:18px; }
.ar-stat { position:relative; background:linear-gradient(160deg,var(--panel),color-mix(in srgb,var(--panel) 85%,var(--bg))); border:1px solid var(--line); border-radius:var(--radius); padding:16px 10px; text-align:center; overflow:hidden; }
.ar-stat::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.5; }
.ar-stat .ar-n { display:block; font-size:1.55rem; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; line-height:1.1; letter-spacing:-.02em; }
.ar-stat .ar-l { display:block; font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-top:4px; font-weight:700; }
.ar-stat.ar-earn .ar-n { color:var(--accent-ink); }
.ar-stat.ar-bal { background:linear-gradient(150deg,var(--accent),var(--accent-solid)); border-color:transparent; }
.ar-stat.ar-bal::before { display:none; }
.ar-stat.ar-bal .ar-n, .ar-stat.ar-bal .ar-l { color:#fff; }

.ar-create { display:flex; flex-wrap:wrap; align-items:stretch; gap:20px; background:linear-gradient(160deg,var(--panel),color-mix(in srgb,var(--panel) 88%,var(--bg))); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin-top:18px; box-shadow:var(--shadow); }
.ar-create label { font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; }

/* peleador */
.ar-cf { display:flex; flex-direction:row; align-items:stretch; gap:14px; flex:1 1 360px; min-width:300px; }
.ar-cf-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ar-cf-name { font-size:1.15rem; font-weight:900; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ar-cf-meta { font-size:.76rem; color:var(--muted); }
.ar-cf-sel { margin-top:6px; }
.ar-cf-sel select { width:100%; }
/* render de WCArena: al costado derecho, abajo, sin recuadro ni fondo, natural */
.ar-cf-render { flex:none; align-self:flex-end; height:132px; width:auto; max-width:45%; object-fit:contain; object-position:right bottom; margin:0 -10px -14px 0; pointer-events:none; }

/* apuesta */
.ar-cb { display:flex; flex-direction:column; gap:8px; flex:1 1 220px; min-width:200px; padding-left:20px; border-left:1px solid var(--line); }
.ar-bet-box { display:flex; align-items:center; gap:8px; background:var(--input-bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:6px 12px; }
.ar-bet-box:focus-within { border-color:var(--accent); }
.ar-bet-box input { flex:1; border:none; background:none; outline:none; padding:2px 0; font-size:1.15rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.ar-bet-box input::-webkit-outer-spin-button, .ar-bet-box input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.ar-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ar-chip { cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:var(--pill); padding:4px 12px; font-size:.8rem; font-weight:800; transition:all .12s; }
.ar-chip:hover { border-color:var(--accent); color:var(--accent-ink); transform:translateY(-1px); }
.ar-win-hint { margin:2px 0 0; font-size:.8rem; color:var(--muted); }
.ar-win-hint b { color:#2ec26a; font-weight:900; font-size:.95rem; }

/* acciones */
.ar-ca { display:flex; flex-direction:column; justify-content:center; gap:10px; flex:1 1 180px; min-width:170px; padding-left:20px; border-left:1px solid var(--line); }
.ar-ca .btn { width:100%; text-align:center; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }

@media (max-width:820px) {
    .ar-cb, .ar-ca { padding-left:0; border-left:0; }
}

.ar-rooms-head { display:flex; align-items:center; justify-content:space-between; margin:26px 0 14px; }
.ar-rooms-head h2 { margin:0; font-size:1.2rem; display:flex; align-items:center; gap:10px; }
.ar-count { display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 8px; border-radius:var(--pill); background:var(--accent); color:#fff; font-size:.82rem; font-weight:800; }
.ar-head-right { display:inline-flex; align-items:center; gap:12px; }
.ar-live { display:inline-flex; align-items:center; gap:7px; font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.arena-sound-toggle { cursor:pointer; border:none; background:none; padding:2px 4px; font-size:1.2rem; line-height:1; opacity:.55; transition:opacity .15s, transform .15s; }
.arena-sound-toggle:hover { opacity:1; transform:scale(1.1); }
.arena-sound-toggle.on { opacity:1; }
.ar-live-dot { width:9px; height:9px; border-radius:50%; background:#2ec26a; box-shadow:0 0 0 0 rgba(46,194,106,.6); animation:arPulse 1.8s infinite; }
@keyframes arPulse { 0%{box-shadow:0 0 0 0 rgba(46,194,106,.55);} 70%{box-shadow:0 0 0 8px rgba(46,194,106,0);} 100%{box-shadow:0 0 0 0 rgba(46,194,106,0);} }

.ar-rooms { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
.ar-empty { grid-column:1/-1; text-align:center; color:var(--muted); padding:48px 20px; border:1.5px dashed var(--line); border-radius:var(--radius); background:var(--panel); }

.ar-room { display:flex; flex-direction:column; background:linear-gradient(165deg,var(--panel),color-mix(in srgb,var(--panel) 82%,var(--bg))); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .18s, box-shadow .18s, border-color .18s; }
.ar-room.ar-new { animation:arIn .35s ease; }
.ar-room.ar-out { animation:arOut .3s ease forwards; pointer-events:none; }
@keyframes arIn { from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:none;} }
@keyframes arOut { from{opacity:1;} to{opacity:0; transform:translateY(-6px) scale(.98);} }
.ar-room:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-lg); }
.ar-room.is-mine { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); }
.ar-room-top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 16px 12px; }
.ar-fighter { display:flex; align-items:center; gap:12px; min-width:0; }
.ar-cls-frame { position:relative; flex:none; width:52px; height:52px; border-radius:14px; padding:2px; background:linear-gradient(140deg,var(--accent),var(--accent-solid)); display:grid; place-items:center; }
.ar-cls { width:100%; height:100%; border-radius:12px; object-fit:cover; background:var(--bg); display:block; }
.ar-cls-ph { color:#fff; font-size:1.4rem; }
.ar-fi { min-width:0; }
.ar-fname { display:block; font-weight:800; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:1.02rem; }
.ar-fmeta { display:block; font-size:.74rem; color:var(--muted); margin-top:1px; }
.ar-tag { flex:none; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); border:1px solid var(--line); border-radius:var(--pill); padding:3px 9px; }
.ar-tag-mine { color:var(--accent-ink); border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.ar-room-bot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--bg) 40%,transparent); }
.ar-actf { margin:0; display:inline-flex; }
.ar-pot { display:flex; align-items:center; gap:8px; }
.ar-pot b { font-size:1.15rem; font-weight:900; color:var(--accent-ink); font-variant-numeric:tabular-nums; }
.ar-pot small { font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
.ar-coin { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffe08a,#f0a92c 60%,#c07d16); color:#7a4a00; font-weight:900; font-size:.8rem; flex:none; box-shadow:inset 0 -2px 3px rgba(0,0,0,.2); }
.ar-note { font-size:.8rem; color:var(--muted); margin-top:18px; text-align:center; }

.ar-badge { display:inline-block; padding:3px 12px; border-radius:var(--pill); font-size:.72rem; font-weight:800; }
.ar-badge.ar-w { background:rgba(46,194,106,.16); color:#2ec26a; }
.ar-badge.ar-lo { background:rgba(200,80,80,.14); color:#d16a6a; }

/* barra de progreso + reclamo global */
.ar-achv-top { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:18px; background:linear-gradient(160deg,var(--panel),color-mix(in srgb,var(--panel) 88%,var(--bg))); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; box-shadow:var(--shadow); }
.ar-achv-prog { flex:1 1 240px; min-width:200px; }
.ar-achv-prog-head { display:flex; justify-content:space-between; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:800; margin-bottom:6px; }
.ar-achv-prog-head b { color:var(--text); }
.ar-achv-bar { height:10px; border-radius:var(--pill); background:rgba(0,0,0,.15); overflow:hidden; }
.ar-achv-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-solid)); border-radius:var(--pill); transition:width .4s; }
.ar-achv-claim { display:flex; align-items:center; gap:14px; }
.ar-achv-pend { display:flex; align-items:center; gap:8px; }
.ar-achv-pend b { font-size:1.3rem; font-weight:900; color:var(--accent-ink); font-variant-numeric:tabular-nums; }
.ar-achv-pend small { font-size:.64rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }

.ar-achv { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-top:14px; }
.ar-ach { display:flex; align-items:center; gap:14px; background:linear-gradient(160deg,var(--panel),color-mix(in srgb,var(--panel) 85%,var(--bg))); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; transition:transform .15s, box-shadow .15s; }
.ar-ach.on { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.ar-ach.claimable { border-color:#2ec26a; }
.ar-ach:hover { transform:translateY(-2px); }
.ar-ach.off { opacity:.5; filter:grayscale(.7); }
.ar-ach-ic { font-size:1.9rem; flex:none; width:54px; height:54px; display:grid; place-items:center; border-radius:14px; background:color-mix(in srgb,var(--accent) 12%,transparent); }
.ar-ach.off .ar-ach-ic { background:var(--input-bg); }
.ar-ach.claimable .ar-ach-ic { background:rgba(46,194,106,.15); }
.ar-ach-b { flex:1; min-width:0; }
.ar-ach-b strong { display:block; color:var(--text); font-size:.96rem; }
.ar-ach-b small { display:block; color:var(--muted); font-size:.76rem; margin-top:1px; }
.ar-ach-rw { display:inline-flex; align-items:center; gap:5px; margin-top:5px; font-size:.78rem; font-weight:800; color:var(--accent-ink); }
.ar-ach-rw .ar-coin { width:18px; height:18px; font-size:.62rem; }
.ar-ach-act { flex:none; display:flex; align-items:center; }
.ar-ach-done { font-size:.78rem; font-weight:800; color:#2ec26a; white-space:nowrap; }
.ar-ach-lock { font-size:1.2rem; opacity:.7; }

/* ---- Fight replay (theme-aware: sigue el tema del sitio) ---- */
.af-arena { max-width:900px; margin:22px auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.af-stage { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; }

.af-side { position:relative; min-height:320px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; transition:filter .35s, opacity .35s; background:var(--panel); }
.af-side::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, color-mix(in srgb,var(--cls) 45%, var(--panel)) 0%, var(--panel) 94%); opacity:.6; }
.af-render { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 10%; z-index:0; }
.af-render-ic { object-fit:contain; object-position:center; padding:48px; opacity:.85; }
.af-b .af-render { transform:scaleX(-1); }
.af-side.dead { opacity:.4; filter:grayscale(.9); }

/* flash rojo al recibir daño */
.af-flashfx { position:absolute; inset:0; z-index:2; background:radial-gradient(circle at center, rgba(224,70,58,.5), transparent 70%); opacity:0; pointer-events:none; }
.af-side.flash .af-flashfx { animation:afFlash .22s; }
@keyframes afFlash { 0%{opacity:.9;} 100%{opacity:0;} }

/* corona del ganador */
.af-crown { position:absolute; top:12px; left:50%; transform:translateX(-50%) translateY(-16px) scale(.5); z-index:4; font-size:2rem; opacity:0; transition:.4s; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.af-side.victor .af-crown { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
.af-side.victor { z-index:2; }
.af-side.victor::before { background:linear-gradient(180deg, color-mix(in srgb,var(--cls) 55%, var(--panel)) 0%, var(--panel) 94%); opacity:.7; }

.af-info { position:relative; z-index:3; padding:16px 18px; background:linear-gradient(180deg, transparent, var(--panel) 78%); }
.af-b .af-info { text-align:right; }
.af-cls-tag { display:inline-flex; align-items:center; gap:6px; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:color-mix(in srgb,var(--cls) 82%, transparent); padding:4px 10px; border-radius:var(--pill); }
.af-cls-tag img { width:15px; height:15px; }
.af-name { margin:9px 0 2px; font-size:1.45rem; color:var(--text); font-weight:900; }
.af-meta { font-size:.8rem; color:var(--muted); margin-bottom:11px; }
.af-hpbar { position:relative; height:22px; background:color-mix(in srgb,var(--text) 14%, transparent); border-radius:var(--pill); overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.2); }
.af-b .af-hpfill { inset:0 0 0 auto; }
.af-hpfill { position:absolute; inset:0 auto 0 0; width:100%; background:linear-gradient(90deg,#2ea043,#7ada4f); transition:width .5s cubic-bezier(.4,0,.2,1); }
.af-hpfill.low { background:linear-gradient(90deg,#e0533a,#f0a03a); }
.af-hptxt { position:relative; z-index:1; font-size:.74rem; font-weight:800; color:var(--text); line-height:22px; }

/* números de daño flotantes sobre el retrato */
.af-dmgpop { position:absolute; top:38%; left:50%; z-index:6; transform:translate(-50%,0); font-size:1.6rem; font-weight:900; color:#e0432e; text-shadow:0 2px 6px rgba(255,255,255,.5); pointer-events:none; animation:afPop 0.95s ease-out forwards; }
.af-dmgpop.crit { font-size:2.2rem; color:#e08a1e; }
.af-dmgpop.miss { font-size:1.2rem; color:#2f86d6; font-weight:800; }
@keyframes afPop { 0%{opacity:0; transform:translate(-50%,10px) scale(.6);} 20%{opacity:1; transform:translate(-50%,0) scale(1.1);} 100%{opacity:0; transform:translate(-50%,-46px) scale(1);} }

.af-center { position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--panel); padding:0 20px; }
.af-vsbadge { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-size:1.5rem; font-weight:900; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-solid)); border:3px solid var(--panel); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent); }
.af-potbox { text-align:center; background:color-mix(in srgb,var(--text) 6%, transparent); border:1px solid var(--line); color:var(--text); border-radius:var(--radius-sm); padding:8px 14px; }
.af-potbox span { display:block; font-weight:900; font-size:1.15rem; color:var(--accent-ink); }
.af-potbox small { font-size:.58rem; text-transform:uppercase; opacity:.75; letter-spacing:.04em; }

/* barra de controles (turno / velocidad / omitir) — flush bajo el escenario */
.af-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 16px; background:color-mix(in srgb,var(--text) 4%, var(--panel)); border-top:1px solid var(--line); }
.af-turn { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.af-ctrl-btns { display:flex; gap:8px; }
.af-cbtn { cursor:pointer; border:1px solid var(--line-2); background:transparent; color:var(--text); border-radius:var(--pill); padding:5px 14px; font-size:.8rem; font-weight:800; transition:all .12s; }
.af-cbtn:hover { border-color:var(--accent); }
.af-cbtn-skip { background:linear-gradient(135deg,var(--accent),var(--accent-solid)); border-color:transparent; color:#fff; }
.af-controls.af-done { display:none; }

.af-log { display:flex; flex-direction:column; gap:6px; height:250px; overflow-y:auto; background:var(--bg); padding:14px 16px; font-size:.9rem; scroll-behavior:smooth; }
.af-log-hint { color:var(--muted); font-style:italic; margin:auto; }
.af-line { max-width:82%; padding:7px 12px; border-radius:12px; background:var(--panel); border:1px solid var(--line); color:var(--text); animation:afFade .28s; line-height:1.35; }
.af-line.sys { align-self:center; max-width:100%; background:transparent; border:0; color:var(--muted); font-style:italic; padding:3px; text-align:center; }
.af-line.af-by0 { align-self:flex-start; border-left:3px solid color-mix(in srgb,var(--text) 18%,transparent); }
.af-line.af-by1 { align-self:flex-end; border-right:3px solid color-mix(in srgb,var(--text) 18%,transparent); text-align:right; }
@keyframes afFade { from{opacity:0; transform:translateY(6px);} to{opacity:1;} }
.af-ico { margin:0 6px 0 0; }
.af-by1 .af-ico { margin:0 0 0 6px; }
.af-who { font-weight:800; }
.af-dmg { color:#e0432e; font-weight:800; }
.af-dmg.crit { color:#e08a1e; }
.af-dodge { color:#2f86d6; font-weight:700; }

/* resultado — dentro del visor */
.af-result { padding:22px 20px; text-align:center; border-top:1px solid var(--line); background:var(--panel); animation:arIn .4s; }
.af-banner { border-radius:var(--radius-sm); padding:22px; }
.af-banner.win { background:rgba(46,194,106,.14); border:1px solid rgba(46,194,106,.45); }
.af-banner.lose { background:rgba(224,70,58,.12); border:1px solid rgba(224,70,58,.4); }
.af-banner.neutral { background:color-mix(in srgb,var(--text) 5%, transparent); border:1px solid var(--line); }
.af-banner h2 { margin:0 0 6px; font-size:1.6rem; color:var(--text); }
.af-banner p { margin:0; color:var(--muted); font-weight:800; font-size:1.05rem; }
.af-actions { display:flex; gap:12px; justify-content:center; margin-top:16px; flex-wrap:wrap; }

@media (max-width:720px) {
    .ar-profile { grid-template-columns:repeat(3,1fr); }
    .ar-cf, .ar-cb, .ar-ca { flex:1 1 100%; min-width:0; }
    .af-stage { grid-template-columns:1fr; }
    .af-side { min-height:240px; }
    .af-center { flex-direction:row; padding:12px; gap:16px; }
    .af-b .af-render { transform:none; }
    .af-b .af-info { text-align:left; }
    .af-b .af-hpfill { inset:0 auto 0 0; }
}

/* ---- Ranking (lista con clase) ---- */
.rk-list { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.rk-row { display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; transition:transform .15s, border-color .15s; }
.rk-row:hover { transform:translateY(-2px); border-color:var(--accent); }
.rk-top1 { border-color:#e6b53c; background:linear-gradient(100deg,color-mix(in srgb,#e6b53c 12%,var(--panel)),var(--panel) 55%); }
.rk-top2 { border-color:color-mix(in srgb,#b8c0cc 60%,var(--line)); }
.rk-top3 { border-color:color-mix(in srgb,#cd7f4a 55%,var(--line)); }
.rk-pos { flex:none; width:40px; text-align:center; font-size:1.05rem; font-weight:900; color:var(--muted); font-variant-numeric:tabular-nums; }
.rk-top1 .rk-pos, .rk-top2 .rk-pos, .rk-top3 .rk-pos { font-size:1.6rem; width:40px; }
.rk-frame { width:48px; height:48px; border-radius:13px; }
.rk-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rk-name { font-weight:800; font-size:1.05rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-meta { font-size:.78rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-metric { flex:none; text-align:right; min-width:110px; padding-left:12px; border-left:1px solid var(--line); }
.rk-metric-v { display:block; font-size:1.4rem; font-weight:900; color:var(--accent-ink); font-variant-numeric:tabular-nums; line-height:1.1; }
.rk-metric small { font-size:.62rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; }
@media (max-width:560px) {
    .rk-metric { min-width:0; }
    .rk-meta { white-space:normal; }
}

/* ---- Historial (actividad: peleas + reclamos) ---- */
.ar-hist { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.ar-hi { display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 16px; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
a.ar-hi:hover { border-color:var(--accent); transform:translateY(-1px); }
.ar-hi-ic { font-size:1.5rem; flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:11px; background:rgba(46,194,106,.12); }
.ar-hi-badge { flex:none; padding:5px 13px; border-radius:var(--pill); font-size:.72rem; font-weight:800; }
.ar-hi-badge.ar-w { background:rgba(46,194,106,.16); color:#2ec26a; }
.ar-hi-badge.ar-lo { background:rgba(200,80,80,.14); color:#d16a6a; }
.ar-hi-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ar-hi-title { color:var(--text); font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ar-hi-title b { font-weight:800; }
.ar-hi-vs { color:var(--muted); font-size:.8rem; margin:0 3px; }
.ar-hi-date { font-size:.72rem; color:var(--muted); }
.ar-hi-amt { flex:none; font-weight:900; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ar-hi-amt.pos { color:#2ec26a; }
.ar-hi-amt.neg { color:#d16a6a; }
.ar-hi-amt.ref { color:#4a9de0; font-weight:800; font-size:.9rem; }
.ar-hi-strike { color:var(--muted); text-decoration:line-through; font-weight:600; margin-right:4px; }
.ar-hi-reftag { display:inline-block; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#4a9de0; background:rgba(74,157,224,.14); border:1px solid rgba(74,157,224,.4); border-radius:var(--pill); padding:1px 8px; margin-left:6px; vertical-align:middle; }
.ar-hi-refunded { border-color:rgba(74,157,224,.4); }

@media (max-width:600px) {
    .rk-sub { display:none; }
    .ar-hi-ic, .ar-hi-badge { display:none; }
}

/* ===================== ADMIN: WC ARENA ===================== */
.gt-check { display:flex; align-items:center; gap:8px; font-size:.92rem; color:var(--text); cursor:pointer; }
.gt-hint { display:block; font-size:.72rem; color:var(--muted); margin-top:3px; }
.ar-adm-stats { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:16px; }
.ar-adm-stat { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 10px; text-align:center; }
.ar-adm-stat span { display:block; font-size:1.15rem; font-weight:800; color:var(--text); }
.ar-adm-stat small { display:block; font-size:.64rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-top:3px; }
.ar-adm-search { display:flex; gap:8px; margin-top:6px; max-width:460px; }
.ar-adm-search .gt-input { flex:1; }
.ar-adm-user { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-start; background:color-mix(in srgb,var(--text) 4%,transparent); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; margin-top:12px; }
.ar-adm-uinfo { display:flex; flex-direction:column; gap:3px; min-width:240px; }
.ar-adm-uinfo strong { font-size:1.1rem; color:var(--accent-ink); }
.ar-adm-uinfo span { font-size:.82rem; color:var(--muted); }
.ar-adm-uinfo b { color:var(--text); }
.ar-adm-refund { min-width:280px; }
.ar-adm-refrow { display:flex; gap:8px; margin-top:5px; }
.ar-adm-refrow .gt-input { width:110px; }
.ar-adm-refrow .gt-input[name="reason"] { width:auto; flex:1; }
.ar-adm-ref { color:#d16a6a; font-weight:700; font-size:.8rem; }
@media (max-width:720px) { .ar-adm-stats { grid-template-columns:repeat(3,1fr); } }

/* ===================== WC ARENA · REGLAS ===================== */
.ar-rules { margin-top:18px; display:flex; flex-direction:column; gap:16px; }

/* Hero de intro */
.ar-rules-hero { display:flex; align-items:center; gap:18px; padding:24px 26px; border-radius:var(--radius); position:relative; overflow:hidden;
    background:linear-gradient(120deg, color-mix(in srgb,var(--accent) 16%,var(--panel)), var(--panel) 60%); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); }
.ar-rules-hero-ic { flex:none; width:64px; height:64px; border-radius:18px; display:grid; place-items:center; font-size:2rem;
    background:linear-gradient(135deg,var(--accent),var(--accent-solid)); box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 60%,transparent); }
.ar-rules-hero h2 { margin:0 0 4px; font-size:1.5rem; letter-spacing:-.01em; }
.ar-rules-hero p { margin:0; color:var(--muted); max-width:70ch; }

/* Pasos numerados */
.ar-rules-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; counter-reset:none; }
.ar-rstep { position:relative; display:flex; gap:14px; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px; overflow:hidden; transition:transform .15s, border-color .15s; }
.ar-rstep::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(180deg,var(--accent),var(--accent-solid)); }
.ar-rstep:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); }
.ar-rnum { flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:900; font-size:1.15rem; color:#fff;
    background:linear-gradient(135deg,var(--accent),var(--accent-solid)); box-shadow:0 6px 14px -6px color-mix(in srgb,var(--accent) 55%,transparent); }
.ar-rstep-b strong { display:block; color:var(--text); font-size:1rem; margin-bottom:4px; }
.ar-rstep-b p { margin:0; font-size:.85rem; color:var(--muted); line-height:1.45; }

/* Tarjetas de detalle */
.ar-rules-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.ar-rcard { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; transition:transform .15s, border-color .15s, box-shadow .15s; }
.ar-rcard:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); box-shadow:var(--shadow); }
.ar-rcard-h { display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.ar-rcard-ic { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:1.25rem; }
.ar-ic-red    { background:rgba(224,83,58,.14); }
.ar-ic-gold   { background:rgba(240,169,44,.16); }
.ar-ic-blue   { background:rgba(74,157,224,.15); }
.ar-ic-purple { background:rgba(150,110,220,.16); }
.ar-ic-green  { background:rgba(46,194,106,.15); }
.ar-ic-teal   { background:rgba(38,180,180,.15); }
.ar-rcard-h h3 { margin:0; font-size:1.02rem; color:var(--text); line-height:1.2; }
.ar-rcard p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.5; }
.ar-rcard ul { margin:0; padding:0; list-style:none; }
.ar-rcard li { position:relative; padding:4px 0 4px 20px; color:var(--muted); font-size:.9rem; line-height:1.45; border-bottom:1px dashed var(--line); }
.ar-rcard li:last-child { border-bottom:0; }
.ar-rcard li::before { content:"›"; position:absolute; left:4px; top:4px; color:var(--accent-ink); font-weight:900; }
.ar-rcard b { color:var(--text); font-weight:800; }
.ar-rcard a { color:var(--accent-ink); font-weight:700; }
@media (max-width:640px) { .ar-rules-steps { grid-template-columns:1fr; } .ar-rules-hero { flex-direction:column; text-align:center; } }

/* ===== WC Arena en perfil de personaje ===== */
.ch-ar-sub { font-size:.78rem; font-weight:600; color:var(--muted); }
.ch-arena { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-top:6px; }
.ch-ar-stat { text-align:center; background:color-mix(in srgb,var(--text) 4%,transparent); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 6px; }
.ch-ar-stat span { display:block; font-size:1.2rem; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; }
.ch-ar-stat small { display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-top:2px; }
.ch-ar-bal span { color:var(--accent-ink); }
@media (max-width:720px) { .ch-arena { grid-template-columns:repeat(3,1fr); } }

/* ===================== BADGES DE MENÚ (HOT / NEW) ===================== */
.menu-badge { display:inline-block; font-size:.44rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1; padding:2px 3px 1px; border-radius:3px; color:#fff; }
.menu-badge-new { background:#2ec26a; }
.menu-badge-hot { background:#ef4444; }

/* En la barra: etiqueta chica flotante arriba a la derecha, pegada al ítem */
.subnav { gap:26px; }
.subnav > a.subnav-lnk { position:relative; overflow:visible; }
.subnav-lnk .menu-badge { position:absolute; top:-8px; right:-3px; }
/* En desplegables: mini, a la derecha del texto */
.gs-menu a { position:relative; }
.gs-menu a .menu-badge { position:absolute; top:50%; right:10px; transform:translateY(-50%); }

/* selector de badge en el editor de menú */
.mb-badge { flex:none; font-size:.78rem; font-weight:700; padding:5px 8px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--input-bg); color:var(--text); cursor:pointer; }
.mb-badge:focus { outline:none; border-color:var(--accent); }

/* WC Arena admin · top jugadores */
.ar-top-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
@media (max-width:820px) { .ar-top-grid { grid-template-columns:1fr; } }

/* WC Arena admin · zona peligrosa (wipe) */
.ar-danger { border-color:color-mix(in srgb,#e0533a 45%,var(--line)); }
.ar-danger h3 { color:#e0533a; }
.ar-wipe-form { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ar-wipe-form .gt-input { width:auto; flex:1; min-width:220px; max-width:320px; }

/* ===================== WC ARENA · LOBBY + FEED LATERAL ===================== */
.ar-lobby { display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; margin-top:8px; }
.ar-lobby-main { min-width:0; }
.ar-lobby-side { position:sticky; top:80px; }
.ar-feed { background:linear-gradient(170deg,var(--panel),color-mix(in srgb,var(--panel) 88%,var(--bg))); border:1px solid var(--line); border-radius:var(--radius); padding:6px; overflow:hidden; }
.ar-feed-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px 8px; }
.ar-feed-head h3 { margin:0; font-size:.95rem; color:var(--text); }
.ar-feed-list { display:flex; flex-direction:column; }
.ar-feed-empty { color:var(--muted); font-size:.84rem; text-align:center; padding:22px 12px; margin:0; line-height:1.6; }
.ar-feed-item { display:flex; gap:11px; align-items:center; padding:10px; border-radius:var(--radius-sm); text-decoration:none; color:inherit; transition:background .12s; }
.ar-feed-item:hover { background:color-mix(in srgb,var(--accent) 9%,transparent); }
.ar-feed-item + .ar-feed-item { border-top:1px solid var(--line); }
.ar-feed-item.ar-new { animation:afFade .35s ease; }
.ar-feed-medal { flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:10px; font-size:1rem; background:radial-gradient(circle at 40% 30%, rgba(240,185,60,.25), rgba(240,185,60,.08)); }
.ar-feed-body { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.ar-feed-line { font-size:.85rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ar-feed-win { font-weight:800; color:var(--accent-ink); }
.ar-feed-vs { color:var(--muted); font-size:.78rem; }
.ar-feed-meta { font-size:.7rem; color:var(--muted); }
@media (max-width:900px) { .ar-lobby { grid-template-columns:1fr; } .ar-lobby-side { position:static; } }

/* ===================== WC ARENA · ELEMENTOS ===================== */
/* selector de elemento en el panel de crear */
.ar-elem-row { display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.ar-elem-lbl { font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; }
.ar-elem-pick { display:inline-flex; gap:6px; }
.ar-elem { width:34px; height:34px; padding:3px; border-radius:9px; border:1px solid var(--line); background:var(--input-bg); cursor:pointer; display:grid; place-items:center; opacity:.55; filter:grayscale(.4); transition:all .12s; }
.ar-elem img { width:100%; height:100%; object-fit:contain; display:block; }
.ar-elem:hover { opacity:1; filter:none; border-color:var(--line-2); }
.ar-elem.on { opacity:1; filter:none; border-color:var(--el); box-shadow:0 0 0 2px color-mix(in srgb,var(--el) 45%,transparent); background:color-mix(in srgb,var(--el) 12%,var(--input-bg)); }

/* ícono de elemento en la tarjeta de sala (esquina del marco de clase) */
.ar-cls-frame { position:relative; }
.ar-room-elem { position:absolute; right:-4px; bottom:-4px; width:20px; height:20px; border-radius:50%; background:var(--panel); padding:2px; box-shadow:0 1px 4px rgba(0,0,0,.35); }

/* lista de reglas de elementos */
.ar-elem-rules { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.ar-elem-rules li { display:flex; align-items:center; gap:6px; font-size:.86rem; color:var(--muted); }
.ar-elem-rules img { width:22px; height:22px; object-fit:contain; flex:none; }
.ar-elem-rules b { color:var(--text); margin-right:2px; }
.ar-elem-arrow { color:var(--muted); font-size:.78rem; margin:0 2px; }
.ar-elem-note { margin-top:10px !important; font-size:.82rem; }

/* elemento en el replay de pelea */
.af-elem { position:absolute; top:12px; left:12px; z-index:4; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.4); padding:6px; }
.af-b .af-elem { left:auto; right:12px; }

/* WC Arena · ID de sala + refund admin + motivo en historial */
.ar-room-tags { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
.ar-room-id { font-size:.62rem; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; }
.ar-hi-reason { display:block; font-size:.72rem; color:#4a9de0; margin-top:1px; }
.ar-refund-form { display:flex; flex-direction:column; gap:6px; min-width:190px; }
.ar-refund-form .gt-input { font-size:.8rem; padding:5px 8px; }
.ar-refund-btns { display:flex; gap:6px; }
.ar-refund-btns .btn { flex:1; }

/* WC Arena · elementos en historial / feed / admin */
.ar-hi-el { width:18px; height:18px; object-fit:contain; vertical-align:-4px; margin-right:3px; }
.ar-feed-el { width:16px; height:16px; object-fit:contain; vertical-align:-3px; margin-right:2px; }
.ar-feed-lose { color:var(--muted); }
.ar-adm-p { white-space:nowrap; }
.ar-adm-el { width:16px; height:16px; object-fit:contain; vertical-align:-3px; margin-right:4px; }
.ar-adm-act { white-space:nowrap; }

/* refund compacto (details que se expande en la celda, sin recortarse) */
.ar-refund-dd { display:inline-block; }
.ar-refund-dd > summary { cursor:pointer; list-style:none; font-size:.8rem; font-weight:800; color:var(--accent-ink); padding:5px 11px; border:1px solid var(--line-2); border-radius:var(--pill); white-space:nowrap; }
.ar-refund-dd > summary::-webkit-details-marker { display:none; }
.ar-refund-dd[open] > summary { border-color:var(--accent); }
.ar-refund-pop { margin-top:8px; width:230px; display:flex; flex-direction:column; gap:8px; }
.ar-refund-pop .gt-input { width:100%; font-size:.82rem; padding:6px 8px; }
.ar-refund-btns { display:flex; gap:6px; }
.ar-refund-btns .btn { flex:1; }

/* WC Arena · aviso juego de azar */
.ar-rules-warn { display:flex; gap:14px; align-items:flex-start; margin-top:18px; padding:16px 18px; border-radius:var(--radius); border:1px solid color-mix(in srgb, #f0a020 55%, var(--line)); background:color-mix(in srgb, #f0a020 12%, var(--panel)); }
.ar-rules-warn-ic { font-size:1.5rem; line-height:1; flex:none; }
.ar-rules-warn h3 { margin:0 0 4px; font-size:1rem; color:var(--ink); }
.ar-rules-warn p { margin:0; font-size:.86rem; line-height:1.55; color:var(--muted); }