/* =========================================================
   WarRoom — Cyber Theme Layer
   Layered on top of warroom.css.
   Depends on --primary, --bg, --surface injected by header.php.
   ========================================================= */

/* ── Cyber Root Additions ───────────────────────────────── */
:root {
    --neon:         var(--primary, #00f3ff);
    --neon-dim:     color-mix(in srgb, var(--neon) 40%, transparent);
    --neon-glow-sm: 0 0 6px var(--neon-dim), 0 0 2px var(--neon);
    --neon-glow-md: 0 0 12px var(--neon-dim), 0 0 4px var(--neon);
    --neon-glow-lg: 0 0 24px var(--neon-dim), 0 0 8px var(--neon);
    --bevel-size:   12px;
    --scan-speed:   8s;
}

/* ── Scanline Overlay (body pseudo-element) ─────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.08) 2px,
        rgba(0, 0, 0, 0.08) 4px
    );
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: multiply;
}

/* ── Custom Scrollbars ──────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--neon-dim) var(--surface, #1a1a1f);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--surface, #1a1a1f);
}

::-webkit-scrollbar-thumb {
    background: var(--neon-dim);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neon);
}

/* ── Beveled Box ────────────────────────────────────────── */
.bevel-box {
    clip-path: polygon(
        var(--bevel-size) 0%,
        100% 0%,
        100% calc(100% - var(--bevel-size)),
        calc(100% - var(--bevel-size)) 100%,
        0% 100%,
        0% var(--bevel-size)
    );
    position: relative;
}

.bevel-box-sm {
    --bevel-size: 7px;
    clip-path: polygon(
        var(--bevel-size) 0%,
        100% 0%,
        100% calc(100% - var(--bevel-size)),
        calc(100% - var(--bevel-size)) 100%,
        0% 100%,
        0% var(--bevel-size)
    );
}

/* ── Neon Glow Utilities ────────────────────────────────── */
.neon-border {
    border-color: var(--neon) !important;
    box-shadow: var(--neon-glow-sm);
}

.neon-glow-sm { box-shadow: var(--neon-glow-sm); }
.neon-glow-md { box-shadow: var(--neon-glow-md); }
.neon-glow-lg { box-shadow: var(--neon-glow-lg); }

.neon-text {
    color: var(--neon);
    text-shadow: 0 0 8px var(--neon-dim), 0 0 2px var(--neon);
}

/* ── Pulsing Neon Animation ─────────────────────────────── */
@keyframes neonPulse {
    0%, 100% { box-shadow: var(--neon-glow-sm); }
    50%       { box-shadow: var(--neon-glow-lg); }
}

@keyframes neonTextPulse {
    0%, 100% { text-shadow: 0 0 4px var(--neon-dim); }
    50%       { text-shadow: 0 0 14px var(--neon-dim), 0 0 4px var(--neon); }
}

.neon-pulse        { animation: neonPulse 2.5s ease-in-out infinite; }
.neon-text-pulse   { animation: neonTextPulse 2.5s ease-in-out infinite; }

/* ── Site Header — Cyber Upgrade ────────────────────────── */
.site-header {
    border-bottom-color: var(--neon-dim);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 1px 0 var(--neon-dim);
}

.faction-name {
    color: var(--neon);
    text-shadow: 0 0 10px var(--neon-dim), 0 0 2px var(--neon);
    letter-spacing: 0.08em;
}

/* ── Tab Navigation — Cyber Upgrade ─────────────────────── */
.tab-link.active {
    color: var(--neon);
    border-bottom-color: var(--neon);
    text-shadow: 0 0 8px var(--neon-dim);
}

.tab-link:hover {
    color: var(--neon);
    text-decoration: none;
}

/* ── Stat Cards — Cyber Upgrade ─────────────────────────── */
.stat-card {
    border-color: var(--neon-dim);
    box-shadow: var(--neon-glow-sm);
    clip-path: polygon(
        10px 0%,
        100% 0%,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0% 100%,
        0% 10px
    );
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.stat-card:hover {
    border-color: var(--neon);
    box-shadow: var(--neon-glow-md);
}

.stat-value.accent { color: var(--neon); }

/* ── Widget — Cyber Upgrade ─────────────────────────────── */
.widget {
    border-color: var(--neon-dim);
    box-shadow: var(--neon-glow-sm);
    clip-path: polygon(
        12px 0%,
        100% 0%,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        0% 100%,
        0% 12px
    );
}

.widget-header {
    border-bottom-color: var(--neon-dim);
    color: var(--neon);
    letter-spacing: 0.12em;
}

/* ── Chain Goal Section — Cyber Upgrade ─────────────────── */
.chain-goal-section {
    border-color: var(--neon-dim);
    box-shadow: var(--neon-glow-sm);
}

/* ── Progress & Chain Bar — Neon Glow ───────────────────── */
.progress-bar.green,
.chain-bar.green {
    box-shadow: 0 0 8px var(--success), 0 0 2px var(--success);
}

.progress-bar.yellow,
.chain-bar.yellow {
    box-shadow: 0 0 8px #f39c12, 0 0 2px #f39c12;
}

/* ── Section Title — Cyber Accent ───────────────────────── */
.section-title {
    border-bottom-color: var(--neon-dim);
    color: var(--neon);
    text-shadow: 0 0 10px var(--neon-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Table — Cyber Upgrade ──────────────────────────────── */
thead th {
    border-bottom-color: var(--neon-dim);
    color: var(--neon);
    letter-spacing: 0.1em;
}

tbody tr:hover { background: rgba(0, 243, 255, 0.04); }

/* ── Buttons — Cyber Upgrade ────────────────────────────── */
.btn-primary {
    background: transparent;
    border: 1px solid var(--neon);
    color: var(--neon);
    box-shadow: var(--neon-glow-sm);
    text-shadow: 0 0 6px var(--neon-dim);
    letter-spacing: 0.04em;
    transition: box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.btn-primary:hover {
    background: var(--neon-dim);
    box-shadow: var(--neon-glow-md);
    text-decoration: none;
}

.btn-ghost {
    border-color: var(--neon-dim);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-ghost:hover {
    border-color: var(--neon);
    box-shadow: var(--neon-glow-sm);
}

/* ── Forms — Cyber Focus States ─────────────────────────── */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--neon);
    box-shadow: 0 0 0 2px var(--neon-dim);
}

/* ── Alerts — Neon Left Border ──────────────────────────── */
.alert-info {
    border-left-color: var(--neon);
}

/* ── Card (Mockup / Shared) — Cyber ─────────────────────── */
.card {
    border-color: var(--neon-dim);
    box-shadow: var(--neon-glow-sm);
}

.card-header {
    border-bottom-color: var(--neon-dim);
    color: var(--neon);
    letter-spacing: 0.08em;
}

/* ── War Scoreboard — Cyber ─────────────────────────────── */
.war-scoreboard {
    border-color: var(--neon-dim);
    box-shadow: var(--neon-glow-sm);
}

.war-score.own { color: var(--neon); }

/* ── Branding Widget — Cyber ─────────────────────────────── */
.faction-logo-placeholder {
    border-color: var(--neon);
    color: var(--neon);
    box-shadow: var(--neon-glow-sm);
}

.faction-brand-name {
    color: var(--neon);
    text-shadow: 0 0 6px var(--neon-dim);
}

/* ── Meta Pills — Cyber ─────────────────────────────────── */
.meta-pill {
    border-color: var(--neon-dim);
    color: var(--neon);
    font-size: 0.68rem;
}

/* ── Badges — Neon Accent ───────────────────────────────── */
.badge-traveling {
    background: color-mix(in srgb, var(--neon) 15%, transparent);
    color: var(--neon);
}

/* ── OC Pulse Alert ─────────────────────────────────────── */
.oc-ready {
    animation: neonPulse 1.5s ease-in-out infinite;
    border-color: var(--neon);
}

/* ── Count Badge ─────────────────────────────────────────── */
.count-badge {
    border-color: var(--neon-dim);
    color: var(--neon);
}

/* ── Chain Summary in Header ─────────────────────────────── */
.chain-count {
    color: var(--neon);
    text-shadow: 0 0 6px var(--neon-dim);
}

/* ── Faction Logo Border ─────────────────────────────────── */
.faction-logo {
    border: 1px solid var(--neon-dim);
    box-shadow: var(--neon-glow-sm);
}

/* ── Subsection Title ────────────────────────────────────── */
.subsection-title {
    color: var(--neon);
    text-shadow: 0 0 6px var(--neon-dim);
    border-bottom: 1px solid var(--neon-dim);
    padding-bottom: 0.35rem;
}

/* ── War Info Pills ──────────────────────────────────────── */
.war-info-pill {
    border-color: var(--neon-dim);
    box-shadow: var(--neon-glow-sm);
}

/* ── Chain Bar Glow ──────────────────────────────────────── */
#chain-bar-wrap {
    border: 1px solid var(--neon-dim);
    border-radius: 0 0 4px 4px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}