*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
        --bg:     #020602; --green: #20c20e; --bright: #39ff14;
        --glow:   rgba(57,255,20,0.45); --dim: #2a522a;
        --cyan:   #00e8ff; --amber: #ffb000; --red: #ff4444;
        --purple: #cc44ff;
    }
    html, body { min-height: 100vh; background: var(--bg); color: var(--green);
        font-family: 'Share Tech Mono','Courier New',monospace; font-size: 14px; line-height: 1.5; }
    body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
        background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px); }
    a { color: var(--bright); text-decoration: none; }
    a:hover { text-decoration: underline; }

    .wrap { max-width: 860px; margin: 0 auto; padding: 2rem 1rem 4rem; }

    /* ── Cabecera ───────────────────────────────────────────────── */
    .hdr { border-bottom: 1px solid var(--dim); padding-bottom: 1rem; margin-bottom: 1.5rem; }
    .logo { font-family:'VT323',monospace; font-size: clamp(1.6rem,5vw,2.4rem);
        color: var(--bright); text-shadow: 0 0 12px var(--glow);
        letter-spacing: .08em; line-height:1; display:block; }
    .subtitle { font-size:.72rem; color:var(--dim); letter-spacing:.12em; margin-top:.4rem; }
    .nav { margin-top:.8rem; display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.72rem; color:var(--dim); }
    .nav a { color:var(--dim); } .nav a:hover { color:var(--green); }

    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
    .cursor { animation: blink 1s step-end infinite; }

    /* ── Tabla ──────────────────────────────────────────────────── */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .rank-table { width: 100%; border-collapse: collapse; }
    .rank-table thead tr { border-bottom: 1px solid var(--dim); }
    .rank-table th { font-size:.62rem; color:var(--dim); letter-spacing:.1em;
        padding:.35rem .5rem; text-align:left; font-weight:normal; white-space:nowrap; }
    .rank-table td { padding:.45rem .5rem; font-size:.78rem; border-bottom: 1px solid #0a180a;
        vertical-align: middle; }
    .rank-table tbody tr { transition: background .12s; cursor: pointer; }
    .rank-table tbody tr:hover { background: rgba(57,255,20,.05); }

    /* Columnas */
    .col-rank  { width: 2.2rem; color: var(--dim); text-align: center; }
    .col-user  { min-width: 110px; }
    .col-tier  { width: 130px; }
    .col-rep   { width: 80px; text-align: right; }
    .col-dim   { width: 56px; text-align: right; font-size:.68rem; color:var(--dim); }

    /* Top 3 */
    .rank-1 td:first-child { color: var(--amber); font-size:.9rem; }
    .rank-1 .col-user { color: var(--bright); }
    .rank-1 .col-rep  { color: var(--bright); }
    .rank-2 .col-user { color: #c8f080; }
    .rank-2 .col-rep  { color: #c8f080; }
    .rank-3 .col-user { color: #90cc60; }
    .rank-3 .col-rep  { color: #90cc60; }

    /* Número de puesto especial */
    .rank-num { font-size:.65rem; }
    .rank-1 .rank-num { color: var(--amber); font-size:.85rem; text-shadow: 0 0 8px rgba(255,176,0,.5); }
    .rank-2 .rank-num { color: #aaaaaa; }
    .rank-3 .rank-num { color: #b07030; }

    /* Tier badges */
    .tier-badge { font-size:.60rem; letter-spacing:.08em; padding:.1rem .35rem;
        border: 1px solid currentColor; white-space:nowrap; }
    .tier-ESPECTRO      { color: #cccccc; }
    .tier-OPERADOR      { color: var(--bright); text-shadow: 0 0 6px var(--glow); }
    .tier-SOBREVIVIENTE { color: #90cc60; }
    .tier-CONTACTADO    { color: var(--green); }
    .tier-OBSERVADO     { color: #4aaa4a; }
    .tier-DESCONOCIDO   { color: var(--dim); }

    /* Glifo de facción */
    .faction-glyph { font-size:.80rem; margin-right:.3rem; opacity:.85; }

    /* Tags MALDITO / MARCADO */
    .tags { display: inline-flex; gap:.3rem; margin-left:.35rem; vertical-align: middle; }
    .tag { font-size:.52rem; letter-spacing:.06em; padding:.05rem .28rem;
        border: 1px solid currentColor; border-radius: 1px; }
    .tag-cursed { color: var(--purple); border-color: var(--purple); }
    .tag-marked  { color: var(--amber);  border-color: var(--amber); }

    /* Estados */
    .status { font-size:.75rem; color:var(--dim); padding:1.5rem 0; letter-spacing:.08em; }
    .status-error { color: var(--red); }

    /* Nota de actualización */
    .refresh-note { font-size:.60rem; color:#1a3a1a; letter-spacing:.06em; margin-top:.6rem; }

    /* Pie */
    .foot { margin-top:3rem; border-top:1px solid #0d200d; padding-top:1rem;
        font-size:.60rem; color:#1a3a1a; letter-spacing:.06em;
        display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
    #last-updated { color: #1f421f; }

    /* ── Responsive ──────────────────────────────────────────────── */
    @media (max-width:767px) { .wrap { padding:1.5rem .9rem 3rem; } }
    @media (max-width:600px) { .col-tier { width: 110px; } .col-rep { width: 68px; } }
    @media (max-width:520px) { .col-dim  { display: none; } .wrap { padding:1rem .6rem 3rem; } .nav > span { display: none; } }
    @media (max-width:380px) { .col-tier { width: 90px; } .col-rep { width: 58px; } .col-rank { width: 1.8rem; } }


/* ── Utilidades extraídas de atributos style= (Sprint 5 / CSP) ── */



/* ── Utilidades extraídas de atributos style= (CSP sprint5) ── */
._u1 { display:none }
._u2 { color:${esc(p.faction_color)} }