/* ==========================================================================
   ARTIFISIUM.COM MASTER UNIVERSE STYLESHEET (4-Color Pixel Edition)
   ========================================================================== */

:root {
    --bg-dark: #030303;
    --bg-card: #0a0a0a;
    --red: #ff0000;
    --blue: #005cff;
    --orange: #ff8000;
    --green: #00ff00; /* Ready for later use */
    --text-main: #e0e0e0;
    --text-muted: #888888;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Changed from black to transparent so the render behind it shows through */
    background-color: transparent; 
    color: var(--text-main);
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    line-height: 1.5;
    overflow-x: hidden;
    position: relative;
}

/* This styles the <div class="bg-cinematic"></div> in your HTML */
.bg-cinematic {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Dialed down the dark overlay from 0.65/0.78 to 0.45/0.60 to make the fire brighter */
    background: linear-gradient(rgba(3, 3, 3, 0.45), rgba(3, 3, 3, 0.60)), 
                url('ep4spoiler1greenclops.jpg');
    background-size: cover;
    background-position: center;
    z-index: -2; 
    pointer-events: none;
}

/* Gritty Cyber-Grid Overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 92, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 92, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -1;
    pointer-events: none;
}

/* --- TOP NAVBAR --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 5%;
    background-color: rgba(3, 3, 3, 0.95);
    border-bottom: 2px solid var(--red);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(255, 0, 0, 0.25);
}

.nav-brand {
    font-family: 'Silkscreen', monospace;
    font-size: 1.6rem;
    color: #ffffff;
    letter-spacing: 2px;
}

.nav-brand span {
    color: var(--red);
}

/* Flex container to space out the 4 orange buttons evenly */
.nav-links {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.creator-hatch-btn {
    font-family: 'Silkscreen', monospace;
    color: var(--orange);
    text-decoration: none;
    font-size: 0.95rem; /* Scaled slightly so all 4 fit cleanly side-by-side */
    padding: 8px 14px;
    border: 2px solid var(--orange);
    transition: all 0.25s ease;
    box-shadow: 0 0 10px rgba(255, 128, 0, 0.25);
    letter-spacing: 1px;
}

.creator-hatch-btn:hover {
    background-color: var(--orange);
    color: #000000;
    box-shadow: 0 0 25px rgba(255, 128, 0, 0.85);
    transform: scale(1.05);
}

/* Mobile Responsiveness: Stacks buttons neatly on phones */
@media (max-width: 900px) {
    .navbar {
        flex-direction: column;
        gap: 1.2rem;
        padding: 1.5rem 3%;
    }
    .nav-links {
        justify-content: center;
        gap: 0.8rem;
    }
    .creator-hatch-btn {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
}

/* --- MAIN CONTAINER --- */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 1.5rem 6rem 1.5rem;
}

/* --- HERO SHOWCASE --- */
.showcase-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 3rem;
}

.poster-frame {
    max-width: 650px;
    width: 100%;
    border: 3px solid #222;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.25);
    margin-bottom: 2.5rem;
}

.poster-frame img {
    width: 100%;
    height: auto;
    display: block;
}

.series-synopsis {
    max-width: 900px;
    font-size: 1.6rem;
    line-height: 1.6;
    color: #dedede;
    text-align: justify;
    padding: 0 1rem;
}

/* --- CATEGORY DIVIDERS (Orange Theme) --- */
.terminal-category {
    width: 100%;
    border-bottom: 2px solid var(--orange); /* Swapped from blue to orange */
    padding-bottom: 10px;
    margin-top: 3.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.category-tag {
    font-family: 'Silkscreen', monospace;
    color: var(--orange); /* Swapped text from blue to orange */
    font-size: 1.6rem;
    letter-spacing: 4px;
    text-shadow: 0 0 15px rgba(255, 128, 0, 0.6); /* Orange neon glow */
}

/* --- SHARED BANNER CARDS --- */
.seasons-feed, .factions-feed {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
}

.series-banner-link {
    text-decoration: none;
    display: block;
    width: 100%;
}

.series-banner {
    display: grid;
    grid-template-columns: 280px 1fr;
    align-items: stretch;
    width: 100%;
    min-height: 180px;
    background-color: var(--bg-card);
    border: 2px solid #222;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.banner-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #000;
}

.banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.banner-content {
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(to right, #0a0a0a, #111111);
}

.banner-content h2 {
    font-family: 'Silkscreen', monospace;
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
    color: #ffffff;
    transition: color 0.3s ease;
}

.banner-content p {
    font-size: 1.4rem;
    color: #aaaaaa;
}

/* Season 1 Active Hover (Red Glow) */
.series-banner-link:hover .s1-active-banner {
    border-color: var(--red);
    transform: translateY(-6px);
    box-shadow: 0 0 35px rgba(255, 0, 0, 0.45);
}

.series-banner-link:hover .s1-active-banner h2 {
    color: var(--red);
}

/* Locked Seasons (Blue Border / Grayscale) */
.locked-season-wrapper {
    width: 100%;
    cursor: default;
    user-select: none;
}

.locked-banner {
    border-color: rgba(0, 92, 255, 0.3) !important;
    opacity: 0.75;
}

.locked-season-wrapper:hover .locked-banner {
    border-color: var(--blue) !important;
    opacity: 1;
    box-shadow: 0 0 25px rgba(0, 92, 255, 0.25);
}

/* Desynchronized Shaking Engines for Locked Seasons */
@keyframes jitterA { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-1.5px, 0.5px); } 66% { transform: translate(1px, -1px); } }
@keyframes jitterB { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1.5px, 1px); } 75% { transform: translate(-1px, -1.5px); } }
@keyframes jitterC { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(1px, -0.5px); } 80% { transform: translate(-1.5px, -1px); } }
@keyframes jitterD { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-1px, 1.5px); } 60% { transform: translate(1.5px, -0.5px); } }

.jitter-a .locked-banner { animation: jitterA 0.19s infinite linear; }
.jitter-b .locked-banner { animation: jitterB 0.26s infinite ease-in-out; }
.jitter-c .locked-banner { animation: jitterC 0.22s infinite linear; }
.jitter-d .locked-banner { animation: jitterD 0.31s infinite ease-in-out; }

/* ==========================================================================
   FACTIONS SPECIFIC COLOR THEMES (Continuous Animation & Idle Outlines)
   ========================================================================== */

/* --- 1. REVOLUTION TRI-CLASS FADE ENGINE (Red -> Blue -> Green) --- */
@keyframes triClassFade {
    0% {
        border-color: #ff0000;
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
    }
    33% {
        border-color: #005cff;
        box-shadow: 0 0 15px rgba(0, 92, 255, 0.3);
    }
    66% {
        border-color: #00ff00;
        box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
    }
    100% {
        border-color: #ff0000;
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
    }
}

@keyframes triClassTextFade {
    0% { color: #ff0000; }
    33% { color: #005cff; }
    66% { color: #00ff00; }
    100% { color: #ff0000; }
}

/* Continuously cycles naturally without needing hover */
.revolution-card {
    animation: triClassFade 6s infinite ease-in-out;
}

.revolution-card h2 {
    animation: triClassTextFade 6s infinite ease-in-out;
}

/* Hovering intensifies the glow and lifts the card */
.series-banner-link:hover .revolution-card {
    transform: translateY(-6px);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
}


/* --- 2. THE COALITION (Permanent Idle Orange Outline) --- */
.coalition-card {
    border-color: var(--orange);
    box-shadow: 0 0 12px rgba(255, 128, 0, 0.2);
}

.series-banner-link:hover .coalition-card {
    border-color: var(--orange);
    transform: translateY(-6px);
    box-shadow: 0 0 35px rgba(255, 128, 0, 0.6);
}

.series-banner-link:hover .coalition-card h2 { 
    color: var(--orange); 
}


/* --- 3. OTHERS (Permanent Idle White Outline) --- */
.others-card {
    border-color: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

@keyframes whitePulse {
    0%, 100% {
        border-color: #ffffff;
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.9);
    }
    50% {
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
    }
}

@keyframes whiteTextPulse {
    0%, 100% { color: #ffffff; text-shadow: 0 0 20px rgba(255, 255, 255, 1); }
    50% { color: #888888; text-shadow: none; }
}

.series-banner-link:hover .others-card {
    animation: whitePulse 1.2s infinite ease-in-out;
    transform: translateY(-6px);
}

.series-banner-link:hover .others-card h2 {
    animation: whiteTextPulse 1.2s infinite ease-in-out;
}

/* --- THE TERMINAL BACKDOOR --- */
.terminal-section {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 5rem;
}

.terminal-btn-wrapper {
    position: relative;
    cursor: pointer;
    user-select: none;
}

.pixel-terminal-btn {
    font-family: 'Silkscreen', monospace;
    font-size: 1.8rem;
    color: var(--red);
    background-color: #050505;
    border: 3px solid var(--red);
    padding: 15px 45px;
    text-decoration: none;
    letter-spacing: 4px;
    display: inline-block;
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.4);
    transition: all 0.2s ease;
}

@keyframes terminalGlitch {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(2px, -1px); }
    60% { transform: translate(-1px, -2px); }
    80% { transform: translate(3px, 1px); }
}

.corrupted-terminal-btn {
    animation: terminalGlitch 0.16s infinite;
}

.terminal-btn-wrapper:hover .corrupted-terminal-btn {
    background-color: var(--red);
    color: #000000;
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.9);
    transform: scale(1.05);
}

.particle-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.corrupt-number-speck {
    position: absolute;
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--red);
    text-shadow: 0 0 8px var(--red);
    pointer-events: none;
}

/* --- FOOTER --- */
footer {
    text-align: center;
    padding: 4rem 2rem;
    background-color: #000000;
    border-top: 2px solid var(--green); /* Radioactive green border */
    box-shadow: 0 -12px 25px rgba(0, 255, 0, 0.35); /* Upward green neon glow */
    color: var(--green); /* Copyright text turned green */
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.6); /* Pixel font glow effect */
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   EXTERNAL LINKS HUB (`external_links.html` Exclusive Grid & Cards)
   ========================================================================== */

.external-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2.5rem;
    width: 100%;
    margin-top: 1rem;
}

/* Base Pixel Card */
.external-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-card);
    border: 2px solid #222;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* 1:1 Square Image Window */
.external-image-window {
    width: 100%;
    aspect-ratio: 1 / 1; /* Locks exact 1:1 square dimensions */
    background-color: #050505;
    border-bottom: 2px solid #222;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
    transition: border-color 0.25s ease;
}

.external-image-window img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Prevents stretching or cropping */
    display: block;
    transition: transform 0.35s ease;
}

/* Bottom Pixel Name Bar */
.external-name-bar {
    background: linear-gradient(to right, #0a0a0a, #111111);
    padding: 1.2rem 1rem;
    text-align: center;
    transition: background-color 0.25s ease;
}

.external-name-bar h2 {
    font-family: 'Silkscreen', monospace;
    color: #ffffff;
    font-size: 1.25rem;
    letter-spacing: 1px;
    margin: 0;
    transition: color 0.25s ease;
}

/* Hovering lifts the card and ignites Management Blue cyber-glow */
.series-banner-link:hover .external-card {
    border-color: var(--blue);
    transform: translateY(-6px);
    box-shadow: 0 0 35px rgba(0, 92, 255, 0.45);
}

.series-banner-link:hover .external-image-window {
    border-color: var(--blue);
}

.series-banner-link:hover .external-image-window img {
    transform: scale(1.08);
}

.series-banner-link:hover .external-name-bar h2 {
    color: var(--blue);
    text-shadow: 0 0 12px rgba(0, 92, 255, 0.8);
}

/* ==========================================================================
   EPISODE ARCHIVE (16:9 Grid & Green Flash Effect)
   ========================================================================== */

.episode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    width: 100%;
    margin-top: 1rem;
}

/* Base Episode Card */
.episode-card {
    background-color: var(--bg-card);
    border: 2px solid #222;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

/* 16:9 Exact Thumbnail Window */
.episode-thumb {
    width: 100%;
    aspect-ratio: 16 / 9; /* Locks it to a perfect 1920x1080 ratio */
    background-color: #000000;
    border-bottom: 2px solid #222;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.episode-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the 16:9 frame perfectly */
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.4s ease;
}

/* Title & Outline Container */
.episode-content {
    padding: 1.5rem;
    background: linear-gradient(to bottom, #0a0a0a, #050505);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* Scaled Title to prevent overflow */
.episode-content h3 {
    font-family: 'Silkscreen', monospace;
    font-size: 1.1rem; /* Kept small to fit long titles cleanly */
    color: #ffffff;
    letter-spacing: 1px;
    line-height: 1.3;
    margin: 0;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.episode-content p {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Green Flash Animation on Hover */
@keyframes greenStrobe {
    0%, 100% {
        border-color: var(--green);
        box-shadow: 0 0 25px rgba(0, 255, 0, 0.6);
    }
    50% {
        border-color: rgba(0, 255, 0, 0.3);
        box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
    }
}

.episode-card:hover {
    animation: greenStrobe 1s infinite ease-in-out;
    transform: translateY(-5px);
}

.episode-card:hover .episode-thumb {
    border-color: var(--green);
}

.episode-card:hover .episode-thumb img {
    opacity: 1;
    transform: scale(1.05);
}

.episode-card:hover .episode-content h3 {
    color: var(--green);
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.7);
}

/* ==========================================================================
   THE TEAM (`team.html` Exclusive Dossier Layout)
   ========================================================================== */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    width: 100%;
    margin-bottom: 4rem; /* Adds space before the next category header */
}

.team-link {
    text-decoration: none;
    display: block;
}

/* Base Dossier Box */
.personnel-card {
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.9), rgba(5, 5, 5, 0.95));
    border: 2px solid #222;
    border-radius: 4px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.personnel-card h3 {
    font-family: 'Silkscreen', monospace;
    color: #ffffff;
    font-size: 1.25rem;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    transition: color 0.25s ease;
}

.personnel-card .role-text {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin: 0;
    transition: color 0.25s ease;
}

/* Hover effects for clickable links */
.team-link:hover .personnel-card {
    border-color: var(--orange);
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(255, 128, 0, 0.35);
}

.team-link:hover .personnel-card h3 {
    color: var(--orange);
    text-shadow: 0 0 10px rgba(255, 128, 0, 0.6);
}

.team-link:hover .personnel-card .role-text {
    color: #ffffff;
}

/* Static Cards for Discord-only users (No hover lift, slightly dimmer) */
.static-card {
    cursor: default;
    border-color: #333;
    opacity: 0.85;
}

.static-card .role-text {
    color: #aaaaaa; /* Brighter gray so the Discord name stands out */
}

/* ==========================================================================
   FACTION LORE PAGES (`faction_revolution.html`)
   ========================================================================== */

/* Header & Status Banner */
.faction-container {
    max-width: 1000px;
}

.faction-main-title {
    font-family: 'Silkscreen', monospace;
    font-size: 2.5rem;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    text-align: left;
    width: 100%;
}

.faction-status-banner {
    display: flex;
    justify-content: flex-start; /* Changed from space-between to pull text left */
    gap: 3rem; /* Controls the exact distance between the logo and the status text */
    align-items: center;
    width: 100%;
    border-bottom: 2px solid #222;
    padding-bottom: 1.5rem;
    margin-bottom: 3rem;
}

.faction-header-logo {
    height: 320px; /* Massively increased from 80px */
    width: auto;
    object-fit: contain;
}

/* --- RESTORED FACTION HEADER TEXT --- */
.status-indicator {
    font-family: 'Silkscreen', monospace;
    font-size: 1.5rem;
    letter-spacing: 2px;
}

/* Color Utilities */
.red-text { color: var(--red); text-shadow: 0 0 15px rgba(255, 0, 0, 0.6); }
.blue-text { color: var(--blue); text-shadow: 0 0 15px rgba(0, 92, 255, 0.6); }
.green-text { color: var(--green); text-shadow: 0 0 15px rgba(0, 255, 0, 0.6); }
.status-active { color: var(--green); text-shadow: 0 0 12px rgba(0, 255, 0, 0.8); }
/* Glowing red leader text */
.leader-red {
    color: var(--red);
    text-shadow: 0 0 12px rgba(255, 0, 0, 0.8);
}
/* --- Coalition Color Utilities --- */
.orange-text { color: var(--orange); text-shadow: 0 0 15px rgba(255, 128, 0, 0.6); }
.leader-orange { color: var(--orange); text-shadow: 0 0 12px rgba(255, 128, 0, 0.8); }

/* --- Coalition Rank Hover Effect (Orange Glow) --- */
.class-link:hover .coalition-rank-card { 
    border-color: var(--orange); 
    transform: translateY(-5px); 
    box-shadow: 0 0 25px rgba(255, 128, 0, 0.4); 
}
.class-link:hover .coalition-rank-card .class-image-window { 
    border-color: var(--orange); 
}
.class-link:hover .coalition-rank-card h3 { 
    color: var(--orange); 
    text-shadow: 0 0 10px rgba(255, 128, 0, 0.6); 
}

/* --- Orange Fandom Wiki Button Override --- */
.pixel-wiki-btn-orange {
    color: var(--orange);
    border-color: var(--orange);
}

.pixel-wiki-btn-orange:hover {
    background-color: var(--orange);
    color: #000;
    box-shadow: 0 0 20px rgba(255, 128, 0, 0.7);
}

/* Typography */
.lore-heading {
    font-family: 'Silkscreen', monospace;
    font-size: 1.6rem;
    letter-spacing: 2px;
    width: 100%;
    margin-bottom: 1rem;
    border-bottom: 1px dashed #333;
    padding-bottom: 0.5rem;
/* Stacks the status and leader text vertically */
.faction-info-stack {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    justify-content: center;
}
}

.lore-paragraph {
    font-size: 1.5rem;
    color: #dedede;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: justify;
    width: 100%;
}

/* Classes 3-Column Grid */
.class-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    margin-bottom: 4rem;
}

.class-link {
    text-decoration: none;
    display: block;
}

.class-card {
    background-color: var(--bg-card);
    border: 2px solid #222;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.25s ease;
}

.class-image-window {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #050505;
    border-bottom: 2px solid #222;
    padding: 2rem;
    transition: border-color 0.25s ease;
}

.class-image-window img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.class-name-bar {
    background: linear-gradient(to bottom, #0a0a0a, #111111);
    padding: 1.2rem;
    text-align: center;
    transition: background-color 0.25s ease;
}

.class-name-bar h3 {
    font-family: 'Silkscreen', monospace;
    color: #ffffff;
    font-size: 1.4rem;
    letter-spacing: 1px;
    margin: 0;
    transition: color 0.25s ease;
}

/* Modifies the grid to center 2 items perfectly instead of leaving empty space */
.coalition-two-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px; /* Constrains the width so the boxes don't stretch too far */
    margin-left: auto;
    margin-right: auto;
}

/* Color-Coded Class Hover Effects */
.class-link:hover .labor-card { border-color: var(--green); transform: translateY(-5px); box-shadow: 0 0 25px rgba(0, 255, 0, 0.4); }
.class-link:hover .labor-card .class-image-window { border-color: var(--green); }
.class-link:hover .labor-card h3 { color: var(--green); text-shadow: 0 0 10px rgba(0, 255, 0, 0.6); }

.class-link:hover .combat-card { border-color: var(--red); transform: translateY(-5px); box-shadow: 0 0 25px rgba(255, 0, 0, 0.4); }
.class-link:hover .combat-card .class-image-window { border-color: var(--red); }
.class-link:hover .combat-card h3 { color: var(--red); text-shadow: 0 0 10px rgba(255, 0, 0, 0.6); }

.class-link:hover .management-card { border-color: var(--blue); transform: translateY(-5px); box-shadow: 0 0 25px rgba(0, 92, 255, 0.4); }
.class-link:hover .management-card .class-image-window { border-color: var(--blue); }
.class-link:hover .management-card h3 { color: var(--blue); text-shadow: 0 0 10px rgba(0, 92, 255, 0.6); }

.class-link:hover img { transform: scale(1.1); }

/* Fandom Wiki Action Button */
.wiki-btn-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.pixel-wiki-btn {
    font-family: 'Silkscreen', monospace;
    font-size: 1.2rem;
    color: var(--red);
    background-color: #050505;
    border: 2px solid var(--red);
    padding: 12px 30px;
    text-decoration: none;
    letter-spacing: 2px;
    transition: all 0.25s ease;
}

.pixel-wiki-btn:hover {
    background-color: var(--red);
    color: #000;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.7);
    transform: scale(1.05);
}

/* ==========================================================================
   MAGNETIC DOSSIER TRACK (`class_combat.html` Layout)
   ========================================================================== */

/* Horizontal Swipeable Track */
.dossier-track {
    display: flex;
    flex-direction: row;
    align-items: stretch !important; /* Forces cards to maintain identical heights */
    gap: 2.5rem;
    width: 100vw;
    max-width: 100vw;
    overflow-x: auto;
    padding: 3rem 50vw 4rem 50vw; 
    scroll-snap-type: x mandatory;
    cursor: grab;
    -webkit-overflow-scrolling: touch; 
}

.dossier-track.active-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

/* Portrait Card Styling (Red Outline Theme) */
.character-card {
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #0a0a0a, #050505);
    border: 2px solid var(--red);
    border-radius: 4px;
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.15);
    overflow: hidden;
    scroll-snap-align: center;
    transform: scale(0.85); /* Backwards/Dimmed Base State */
    opacity: 0.7;
    filter: brightness(0.85);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.35s ease, 
                box-shadow 0.35s ease, 
                filter 0.35s ease, 
                border-color 0.35s ease;
}

/* Active dead-center focus state (Triggers via JS when scrolled to the center) */
.character-card.focused-card {
    transform: scale(1.05); 
    opacity: 1;
    filter: brightness(1);
    border-color: #ffffff;
    box-shadow: 0 0 45px rgba(255, 0, 0, 0.65), inset 0 0 15px rgba(255, 0, 0, 0.2);
    z-index: 10;
}

.character-card:hover {
    border-color: #ffffff;
}

/* Top Image Window (1:1 Ratio) */
.card-image-window {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #000000;
    border-bottom: 2px solid var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.card-image-window img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bottom Data Readout Area */
.card-data-readout {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
}

.char-name {
    font-family: 'Silkscreen', monospace;
    color: #ffffff;
    font-size: 1.6rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    border-bottom: 1px dashed #333;
    padding-bottom: 8px;
}

.focused-card .char-name {
    color: var(--red);
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
}

.char-summary {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 2rem;
}

/* --- CHARACTER CARD STATUS INDICATOR MODULE --- */
.casting-status {
    margin-top: auto; 
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background-color: #0d0d0d;
    border: 1px solid #222;
    border-radius: 4px;
    font-family: 'Silkscreen', monospace;
    letter-spacing: 1.5px;
    font-size: 1.05rem;
}

/* The fixed green dot class */
.cast-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

/* Green Active Status */
.cast-open { color: var(--green); border-color: rgba(0, 255, 0, 0.3); }
.cast-open .cast-dot { background-color: var(--green); box-shadow: 0 0 10px var(--green); }

/* Red Terminated Status */
.cast-closed { 
    color: var(--red); 
    border-color: rgba(255, 0, 0, 0.3); 
}
.cast-closed .cast-dot { 
    background-color: var(--red); 
    box-shadow: 0 0 10px var(--red); 
}


/* --- FIXED MAGNETIC DOSSIER TRACK (The Math Breakout) --- */
.faction-container {
    overflow-x: visible !important; 
}

.dossier-track {
    display: flex;
    flex-direction: row;
    align-items: stretch !important; 
    gap: 2.5rem;
    
    /* The Flawless Container Breakout */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    
    overflow-x: auto;
    
    /* Viewport Padding: 50vw (half your screen) minus 175px (half the card) */
    /* This GUARANTEES the first card loads perfectly in the dead center */
    padding: 3rem calc(50vw - 175px) 4rem calc(50vw - 175px) !important; 
    
    scroll-snap-type: x mandatory;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
}

/* ==========================================================================
   MANAGEMENT DOSSIER THEME OVERRIDES (Cold Logic Blue)
   ========================================================================== */

/* Blue Borders and Dormant Glows */
.management-theme .character-card {
    border-color: var(--blue);
    box-shadow: 0 0 25px rgba(0, 92, 255, 0.15);
}

/* Blue Active Focus State */
.management-theme .character-card.focused-card {
    border-color: #ffffff;
    box-shadow: 0 0 45px rgba(0, 92, 255, 0.65), inset 0 0 15px rgba(0, 92, 255, 0.2);
}

/* Blue Image Window Underline */
.management-theme .card-image-window {
    border-color: var(--blue);
}

/* Blue Centered Name Text Glow */
.management-theme .focused-card .char-name {
    color: var(--blue);
    text-shadow: 0 0 10px rgba(0, 92, 255, 0.7);
}

/* Blue Scrollbar Hover Glow */
.management-theme .dossier-track::-webkit-scrollbar-thumb:hover {
    background: var(--blue);
    box-shadow: 0 0 15px rgba(0, 92, 255, 0.6);
}

/* Kill the buggy flex spacers */
.dossier-track::before,
.dossier-track::after {
    display: none !important;
}

/* Scrollbar styling */
.dossier-track::-webkit-scrollbar {
    height: 8px; 
}
.dossier-track::-webkit-scrollbar-track {
    background: #080808;
    border-radius: 5px;
    margin: 0 20vw; 
}
.dossier-track::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 5px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.dossier-track::-webkit-scrollbar-thumb:hover {
    background: var(--red);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
}

/* ==========================================================================
   COALITION DOSSIER THEME OVERRIDES (Tactical Orange)
   ========================================================================== */

/* Orange Borders and Dormant Glows */
.coalition-theme .character-card {
    border-color: var(--orange);
    box-shadow: 0 0 25px rgba(255, 128, 0, 0.15);
}

/* Orange Active Focus State */
.coalition-theme .character-card.focused-card {
    border-color: #ffffff;
    box-shadow: 0 0 45px rgba(255, 128, 0, 0.65), inset 0 0 15px rgba(255, 128, 0, 0.2);
}

/* Orange Image Window Underline */
.coalition-theme .card-image-window {
    border-color: var(--orange);
}

/* Orange Centered Name Text Glow */
.coalition-theme .focused-card .char-name {
    color: var(--orange);
    text-shadow: 0 0 10px rgba(255, 128, 0, 0.7);
}

/* Orange Scrollbar Hover Glow */
.coalition-theme .dossier-track::-webkit-scrollbar-thumb:hover {
    background: var(--orange);
    box-shadow: 0 0 15px rgba(255, 128, 0, 0.6);
}

/* ==========================================================================
   LABOR DOSSIER THEME OVERRIDES (Industrial Green)
   ========================================================================== */

/* Green Heading Utility */
.green-text { 
    color: var(--green); 
    text-shadow: 0 0 15px rgba(0, 255, 0, 0.6); 
}

/* Green Borders and Dormant Glows */
.labor-theme .character-card {
    border-color: var(--green);
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.15);
}

/* Green Active Focus State */
.labor-theme .character-card.focused-card {
    border-color: #ffffff;
    box-shadow: 0 0 45px rgba(0, 255, 0, 0.65), inset 0 0 15px rgba(0, 255, 0, 0.2);
}

/* Green Image Window Underline */
.labor-theme .card-image-window {
    border-color: var(--green);
}

/* Green Centered Name Text Glow */
.labor-theme .focused-card .char-name {
    color: var(--green);
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.7);
}

/* Green Scrollbar Hover Glow */
.labor-theme .dossier-track::-webkit-scrollbar-thumb:hover {
    background: var(--green);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
}

/* ==========================================================================
   MOBILE EXCLUSIVE OVERRIDES (Shrinks Buttons & Fixes Spacing on Phones)
   ========================================================================== */

@media (max-width: 768px) {

    /* --- GLOBAL MOBILE FIX --- */
    html, body {
        overflow-x: hidden !important;
        width: 100%;
    }

    /* --- 1. TOP NAVBAR BUTTONS --- */
    .navbar {
        flex-direction: column;
        gap: 1rem;
        padding: 1.2rem 3%;
    }

    .nav-links {
        justify-content: center;
        gap: 0.5rem; 
    }

    .creator-hatch-btn {
        font-size: 0.72rem; 
        padding: 5px 8px;   
        border-width: 1.5px;
        letter-spacing: 0px;
    }

    /* --- 2. THE TERMINAL BUTTON --- */
    .pixel-terminal-btn {
        font-size: 1.25rem; 
        padding: 10px 24px; 
        letter-spacing: 2px;
    }

    /* --- 3. BANNER LAYOUT ADJUSTMENTS --- */
    .series-banner {
        grid-template-columns: 1fr;
    }
    .banner-image {
        max-height: 220px;
    }
    .banner-content {
        padding: 1.2rem 1.5rem;
    }
    .banner-content h2 {
        font-size: 1.25rem;
    }

    /* --- EXTERNAL LINKS & EPISODES --- */
    .external-links-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.8rem;
    }
    .external-image-window {
        padding: 1rem;
    }
    .external-name-bar h2 {
        font-size: 1.1rem;
    }
    .episode-grid {
        grid-template-columns: 1fr;
    }

    /* --- FACTION PAGE OVERRIDES (With Overflow Fixes) --- */
    .faction-container {
        width: 100%;
        box-sizing: border-box;
        padding: 0 1rem; /* Keeps content away from screen edges */
        overflow-x: hidden;
    }

    .faction-main-title { 
        font-size: 1.8rem; 
        text-align: center; 
    }

    .faction-status-banner { 
        flex-direction: column !important; 
        gap: 1.2rem !important; 
        align-items: center !important; 
        text-align: center;
    }

    .faction-header-logo { 
        height: 120px !important; 
    }
    
    .status-indicator { 
        font-size: 1.2rem; 
    }

    .faction-info-stack { 
        align-items: center; 
        text-align: center; 
    }

    /* Force 3-column Class/Rank grid to stack into 1 column */
    .class-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
        gap: 1.5rem;
    }

    /* Stop text stretching on phones */
    .lore-paragraph {
        text-align: left !important; 
        font-size: 1.15rem;
        word-wrap: break-word;
    }
}
/* ==========================================================================
   FULL-BLEED CINEMATIC BACKGROUND DIORAMA
   ========================================================================== */

.bg-cinematic {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Layers a dark 82% opacity tint directly over the burning city render */
    background: linear-gradient(rgba(3, 3, 3, 0.82), rgba(3, 3, 3, 0.90)), 
                url('ep4spoiler1greenclops.jpg');
    background-size: cover;
    background-position: center;
    z-index: -3; /* Locks it beneath the grid overlay and content */
    pointer-events: none;
}