*, *::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; --dimmer:#0c420c;
        --cyan:   #00e8ff; --amber: #ffb000; --red: #ff3333;
        --font:   'Share Tech Mono','Courier New',monospace;
        --title:  'VT323','Courier New',monospace;
    }
    html, body {
        min-height:100vh; background:var(--bg); color:var(--green);
        font-family:var(--font); font-size:clamp(13px,1.6vw,15px);
        line-height:1.6; overflow-x:hidden;
    }
    body::after {
        content:''; position:fixed; inset:0; pointer-events:none; z-index:999;
        background:repeating-linear-gradient(0deg,transparent,transparent 2px,
                   rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 4px);
    }
    a { color:var(--bright); text-decoration:none; }
    a:hover { text-decoration:underline; }

    /* ── Header ── */
    .fac-header {
        display:flex; align-items:center; justify-content:space-between;
        padding:.8rem 1.4rem; border-bottom:1px solid var(--dimmer);
        flex-wrap:wrap; gap:.6rem;
    }
    .fac-header-left { display:flex; align-items:center; gap:.8rem; }
    .fac-header-glyph { font-family:var(--title); font-size:1.8rem; color:var(--bright);
        text-shadow:0 0 12px var(--glow); line-height:1; }
    .fac-header h1 { font-family:var(--title); font-size:clamp(1.4rem,4vw,2rem);
        color:var(--bright); text-shadow:0 0 10px var(--glow); letter-spacing:.08em; line-height:1; }
    .fac-header-sub { font-size:.65rem; color:var(--dim); letter-spacing:.12em; margin-top:.2rem; }
    .fac-nav { display:flex; gap:1rem; align-items:center; }
    .fac-nav a { font-size:.7rem; color:var(--dim); letter-spacing:.1em; }
    .fac-nav a:hover { color:var(--green); }

    /* ── Body ── */
    .fac-body {
        max-width:860px; margin:0 auto; padding:2rem 1.4rem 4rem;
        display:flex; flex-direction:column; gap:1.8rem;
    }

    /* ── Alert de auth ── */
    #fac-auth-gate { display:none; }
    .fac-auth-msg {
        border:1px solid rgba(255,176,0,.4); background:rgba(255,176,0,.04);
        padding:.8rem 1.2rem; font-size:.72rem; color:var(--amber);
        letter-spacing:.08em; display:flex; align-items:center; gap:.8rem;
    }
    .fac-auth-msg a { color:var(--amber); border-bottom:1px solid currentColor; }

    /* ── Intro ── */
    .fac-intro {
        font-size:.72rem; color:var(--dim); letter-spacing:.06em;
        line-height:1.6; border-left:2px solid var(--dimmer); padding-left:.8rem;
    }

    /* ── Global stats bar ── */
    .fac-global-bar {
        display:flex; gap:2rem; flex-wrap:wrap;
        border:1px solid var(--dimmer); padding:.6rem 1rem;
        font-size:.65rem; color:var(--dim); letter-spacing:.08em;
    }
    .fac-global-stat .lbl { color:var(--dimmer); }
    .fac-global-stat .val { color:var(--green); font-family:var(--title); font-size:1.1em; }

    /* ── Faction cards ── */
    .fac-cards { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
    @media (max-width:600px) { .fac-cards { grid-template-columns:1fr; } }

    .fac-card {
        border:1px solid var(--dimmer); padding:1.2rem 1.4rem;
        display:flex; flex-direction:column; gap:.8rem;
        position:relative; overflow:hidden;
        transition:border-color .2s, box-shadow .2s;
    }
    .fac-card::before {
        content:''; position:absolute; top:0; left:0; right:0; height:2px;
        background:var(--fc, var(--green));
        box-shadow:0 0 12px var(--fc, var(--green));
    }
    .fac-card:hover { border-color:var(--fc, var(--green)); box-shadow:0 0 18px rgba(57,255,20,.06); }

    .fac-card-top { display:flex; align-items:flex-start; gap:.8rem; }
    .fac-glyph {
        font-family:var(--title); font-size:2.4rem; line-height:1;
        color:var(--fc, var(--green));
        text-shadow:0 0 14px var(--fc, var(--green));
        flex-shrink:0;
    }
    .fac-name {
        font-family:var(--title); font-size:1.6rem; line-height:1;
        color:var(--fc, var(--green)); letter-spacing:.06em;
    }
    .fac-freq { font-size:.6rem; color:var(--dim); letter-spacing:.1em; margin-top:.25rem; }

    .fac-lore { font-size:.7rem; color:var(--dim); line-height:1.6; border-left:1px solid var(--dimmer); padding-left:.7rem; }
    .fac-welcome { font-size:.68rem; color:var(--dimmer); font-style:italic; }

    /* ── Stats de facción ── */
    .fac-stats {
        display:flex; gap:1.4rem; border-top:1px solid var(--dimmer); padding-top:.7rem;
        font-size:.65rem; color:var(--dim); flex-wrap:wrap;
    }
    .fac-stat .lbl { color:var(--dimmer); display:block; }
    .fac-stat .val { color:var(--fc, var(--green)); font-family:var(--title); font-size:1.3em; }

    /* ── Top members ── */
    .fac-top-title { font-size:.62rem; color:var(--dimmer); letter-spacing:.1em; margin-bottom:.3rem; }
    .fac-top-list { display:flex; flex-direction:column; gap:.15rem; }
    .fac-top-entry {
        display:flex; gap:.5rem; align-items:center;
        font-size:.65rem; color:var(--dim);
    }
    .fac-top-pos { color:var(--dimmer); width:1.2em; flex-shrink:0; }
    .fac-top-name { color:var(--fc, var(--green)); flex:1; }
    .fac-top-rep { color:var(--dimmer); font-size:.6rem; }

    /* ── Botón de unirse ── */
    .fac-join-area { border-top:1px solid var(--dimmer); padding-top:.8rem; }
    .fac-join-btn {
        display:inline-block; width:100%;
        background:none; border:1px solid var(--fc, var(--green));
        color:var(--fc, var(--green)); font-family:var(--font);
        font-size:.72rem; letter-spacing:.1em; cursor:pointer;
        padding:.4rem .8rem; text-align:center;
        transition:background .12s;
    }
    .fac-join-btn:hover { background:rgba(57,255,20,.06); }
    .fac-join-btn:disabled { opacity:.35; cursor:not-allowed; }

    .fac-status-badge {
        font-size:.65rem; letter-spacing:.1em; padding:.25rem .7rem;
        border:1px solid currentColor; display:inline-block;
    }
    .fac-status-member { color:var(--fc, var(--green)); }
    .fac-status-locked { color:var(--dimmer); border-color:var(--dimmer); }
    .fac-status-guest  { color:var(--dim); border-color:var(--dim); }

    .fac-req { font-size:.62rem; color:var(--dimmer); margin-top:.3rem; }

    /* ── Reglas inter-facción ── */
    .fac-rules {
        border:1px solid var(--dimmer); padding:.8rem 1rem;
        font-size:.67rem; color:var(--dim); line-height:1.7;
    }
    .fac-rules-title { color:var(--green); letter-spacing:.1em; margin-bottom:.5rem; font-size:.72rem; }

    /* ── Loading skeleton ── */
    .fac-loading { color:var(--dimmer); font-size:.72rem; letter-spacing:.1em; padding:1rem 0; }
    .fac-loading::after { content:'_'; animation:blink 1s step-end infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

    @media (max-width:480px) {
        .fac-body { padding:1.2rem .9rem 3rem; }
        .fac-header { padding:.6rem .9rem; }
    }


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



/* ── Utilidades extraídas de atributos style= (CSP sprint5) ── */
._u1 { display:none }
._u2 { color:var(--bright) }
._u3 { color:${color};border-color:${color} }
._u4 { color:var(--dimmer) }
._u5 { --fc:${color} }
._u6 { color:var(--red) }