/* Font Setup */
@font-face { font-family: 'Michroma'; src: url('font/Michroma.woff2') format('woff2'); }
@font-face { font-family: 'ShareTechMono'; src: url('font/ShareTechMono.woff2') format('woff2'); }
@font-face {
    font-family: 'Cinzel-Variable';
    src: url('font/Cinzel/Cinzel-VariableFont_wght.woff2') format('woff2-variations'),
        url('font/Cinzel/Cinzel-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
}
@font-face {
    font-family: 'Orbitron';
    src: url('font/Orbitron/static/Orbitron-Regular.woff2') format('woff2');
    font-style: normal;
}

:root {
    --bg-color: #0b0e14;
    --box-bg: rgba(255, 255, 255, 0);
    --box-border: rgba(255, 255, 255, 0);
    --text-main: #e0e0e0;
    --accent: #00d4ff;
    --gold-gradient: linear-gradient(to bottom, #FFE08E 0%, #D4AF37 50%, #8A6621 100%);
    --col-divider: rgba(0, 212, 255, 0.12);
    --cell-bg:     rgba(0, 212, 255, 0.03);
    --yes-color:   #00ff88;
    --no-color:    #ff4444;
    --panel-bg:    rgba(5, 8, 12, 0.65);
    --gold:        #d4a843;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Michroma', sans-serif;
    background-color: var(--bg-color);
    background-image: url('images/main_stars.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* Top Navigation Bar */
header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(11, 14, 20, 0.95) 0%, rgba(11, 14, 20, 0.4) 100%);
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    margin: 0;
    font-family: 'Cinzel-Variable', serif;
    font-weight: 600;
    font-size: 1.8rem;
    letter-spacing: 2px;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 0px rgba(0,0,0,1));
    text-decoration: none;
}

.account-access {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid var(--box-border);
    background: var(--box-bg);
    cursor: pointer;
    transition: all 0.3s ease;
}

.account-access img {
    width: 26px;
    height: 26px;
    opacity: 0.85;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.account-access:hover img {
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--accent));
}

/* Hamburger-style mobile menu trigger - hidden on tablet/desktop, where the
   transmissions panels are always visible in place instead of behind a drawer.
   Rendered as a solid var(--accent) silhouette (same blue as .footer-chevron)
   via mask-image rather than an <img>, since an <img>'s own SVG colors can't
   be recolored with CSS alone - the element itself carries no image, just a
   background-color clipped to the icon's shape. */
.menu-trigger {
    display: none;
    width: 26px;
    height: 26px;
    cursor: pointer;
    background-color: var(--accent);
    -webkit-mask-image: url('images/buttonicon_thrusters.svg');
    mask-image: url('images/buttonicon_thrusters.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: 0.85;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.menu-trigger:hover {
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--accent));
}

.header-right {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: var(--text-main);
    opacity: 0.6;
    text-decoration: none;
    transition: opacity 0.3s ease, color 0.3s ease;
}
.header-right:hover {
    opacity: 1;
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent);
}

/* Hero Section (The Star Gap) */
.hero {
    position: relative;
    text-align: center;
    height: 300px; 
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 { 
    font-family: 'Cinzel-Variable', serif; 
    font-weight: 900;
    font-size: 4rem; 
    margin: 0;
    letter-spacing: 8px;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 1px rgba(0,0,0,1));
}

.blurb { 
    position: absolute;
    bottom: 20px;
    font-size: 0.9rem;
    opacity: 0.8; 
    line-height: 1.6; 
    max-width: 800px; 
    text-align: center; 
    padding: 0 20px;
}

/* Main Content Area */
.main-content {
    background-color: var(--bg-color);
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 160px;
}

/* 2x2 Grid Layout */
.tile-container {
    display: grid;
    grid-template-columns: repeat(2, 150px);
    grid-template-rows: repeat(2, 150px);
    gap: 100px;
    margin: 40px auto;
}

.tile {
    width: 150px;
    height: 150px;
    background: var(--box-bg);
    border: 1px solid var(--box-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.05));
}

.tile:hover {
    transform: translateY(-10px);
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.15));
}

.tile-icon {
    width: 80px;
    height: auto;
    margin-bottom: 25px;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.tile:hover .tile-icon {
    opacity: 1;
}

.tile-text {
    font-family: 'Cinzel-Variable', serif;
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: 3px;
    color: var(--text-main);
    transition: color 0.3s ease;
}

.tile:hover .tile-text {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent);
}

/* Overlay System */
.overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay-content {
    /* 1. Window Appearance */
    background: rgba(5, 8, 12, 0.65) !important;
    backdrop-filter: blur(16px); /* The "Glass" blur */
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9), /* Inner depth */
                inset 0 0 2px rgba(0, 212, 255, 0.2), /* Subtle rim light */
                0 20px 40px rgba(0, 0, 0, 0.9);
    
    /* Remove top/bottom borders, keep sides and rounded corners */
    border-left: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    border-top: none;
    border-bottom: none;
    border-radius: 12px; 
    
    padding: 40px;

    /* 2. Sizing */
    width: max-content;
    min-width: 300px;
    /* A tall enough grid of sub-options (e.g. 4 stacked on mobile's
       single-column layout) can grow taller than the viewport - without a
       cap, .overlay's flex centering pushes the excess equally off both the
       top AND bottom of the screen, taking the close button with it above
       the visible area with no way to scroll back up to it. */
    max-height: 90vh;
    /* The mobile tier sets width to a min(vw, px) value - without
       border-box, this 40px padding gets added on top of that instead of
       included in it, which is exactly what overflowed .sidebar in the
       same way (see the box-sizing note on .sidebar/.lightbox-sidebar). */
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    position: relative;
    font-family: 'ShareTechMono', monospace;

    /* 3. Animation Setup - overflow-x stays hidden for the width-clip
       animation below, overflow-y is separated out so tall content scrolls
       instead of overflowing off-screen unreachably. */
    overflow-x: hidden;
    overflow-y: auto;
    animation: expandWindow 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.overlay-content a {
text-decoration: none;
color: inherit;
}

.close-btn {
    position: absolute;
    top: 15px; right: 20px;
    cursor: pointer;
    font-family: 'Cinzel-Variable', serif;
    font-weight: 900;
    font-size: 1.1rem;
    color: #8b0000;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}

.sub-option {
    padding: 20px;
    /* Maintaining your invisible box preference */
    border: 1px solid var(--box-border);
    background: var(--box-bg);
    text-align: center;
    cursor: pointer;
    white-space: nowrap; 
    
    /* Flexbox to stack icon over text */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Space between icon and text */

    transition: color 0.3s ease, text-shadow 0.3s ease, filter 0.3s ease;
    opacity: 0;
    animation: fadeInContents 0.3s ease forwards 0.3s; 
}

.sub-option:hover { color: var(--accent); }

.sub-icon {
    width: 100px;
    height: 100px;
    object-fit: contain; /* Ensures the image doesn't stretch */
    opacity: 0.8;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Subtle glow on the icon when the option is hovered */
.sub-option:hover .sub-icon {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.4));
}

/* Replaces the old inline style="grid-column: span 2" used on a handful of
   .sub-option entries - lets the mobile single-column override win cleanly
   instead of fighting inline-style specificity. */
.sub-option--wide {
    grid-column: span 2;
}

/* --- MOBILE SIDE MENU + FOOTER OVERLAY (structural, breakpoint-agnostic) ---
   On tablet/desktop these wrapper elements render as display:contents, which
   both (a) makes their children visible without ever calling openOverlay()
   and (b) removes the wrapper's own box - critical because a wrapper with
   backdrop-filter/transform would otherwise become a new containing block
   and hijack any position:fixed descendant (like .transmissions) into
   anchoring to the wrapper instead of the viewport. The <=767px block further
   down restores real overlay/drawer behaviour for mobile. */
#mobile-menu-overlay,
.side-menu-panel,
#footer-overlay,
.footer-overlay-content {
    display: contents;
}

/* Only meaningful once the wrappers above become real boxes again on mobile -
   harmless no-op on tablet/desktop since nothing generates a box to paint it. */
.side-menu-panel .close-btn,
.footer-overlay-content .close-btn {
    display: none;
}

/* Own-content drawer pages (Wikelo/Acervus Guide) duplicate their nav into
   the drawer instead of relocating it (see the guide-sidebar note above) -
   unlike .transmissions/.corner-referral, this duplicate has no position:fixed
   of its own to escape flow with, so display:contents on its ancestors above
   left it rendering inline in normal document flow at every breakpoint
   (wherever #mobile-menu-overlay sits in the HTML, typically right after
   .guide-layout) instead of staying hidden until the mobile drawer opens.
   Explicitly hidden here, restored in the <=767px block. */
.side-menu-panel .guide-sidebar-label,
.side-menu-panel .guide-nav {
    display: none;
}

/* The side-menu's own referral block is a second, independent instance of
   .corner-referral (populated by the same renderSiteReferral() call, see
   script.js) - without this it would inherit the base .corner-referral's
   position:fixed and render stacked exactly on top of the original. Hidden
   entirely outside mobile since the drawer itself is unreachable there. */
.side-menu-panel > .corner-referral {
    display: none;
}

.side-menu-panel {
    width: min(85vw, 320px);
    height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(5, 8, 12, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9),
                inset 0 0 2px rgba(0, 212, 255, 0.2),
                4px 0 30px rgba(0, 0, 0, 0.9);
    border-right: 1px solid var(--accent);
    padding: 60px 24px 40px;
    position: relative;
    animation: slideInMenu 0.35s ease-out forwards;
}

@keyframes slideInMenu {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

.footer-overlay-content {
    /* Fully opaque, not the glass-panel 0.85 alpha used elsewhere - this is
       the mobile equivalent of .footer-disclaimer and carries the same
       disclaimer/referral content, so it must never let page content show
       through when open. backdrop-filter is a no-op once background has no
       transparency left, kept only for consistency with the rest of the
       overlay family. */
    background: rgb(5, 8, 12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9),
                inset 0 0 2px rgba(0, 212, 255, 0.2),
                0 20px 40px rgba(0, 0, 0, 0.9);
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 40px 28px 28px;
    position: relative;
    width: min(90vw, 420px);
    /* Without this, content taller than the viewport just grows the box and
       lets .overlay's flex centering push the top (and the close button in
       it) off-screen above the visible area, with no way to scroll back up
       to reach it - see the matching fix on .overlay-content/.media-window
       for the general version of this bug. */
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    animation: expandWindow 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.footer-collapsed-bar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: rgba(11, 14, 20, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0, 212, 255, 0.2);
    cursor: pointer;
}

.footer-collapsed-badge {
    width: 32px;
    height: auto;
}

.footer-chevron {
    color: var(--accent);
    font-size: 0.9rem;
    opacity: 0.8;
}

/* --- OVERLAY ANIMATIONS --- */

@keyframes expandWindow {
    0% {
        max-width: 2px; /* Starts as a vertical line */
        padding-left: 0;
        padding-right: 0;
        opacity: 0;
    }
    15% {
        max-width: 2px; /* Holds the vertical line state briefly */
        padding-left: 0;
        padding-right: 0;
        opacity: 1; 
    }
    100% {
        max-width: 1200px; /* Expands to safely encompass the max-content width */
        padding-left: 40px;
        padding-right: 40px;
        opacity: 1;
    }
}

@keyframes fadeInContents {
    to {
        opacity: 1;
    }
}

/* Disclaimer */
.footer-disclaimer {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 40;
    /* Must always be fully opaque - this bar carries the legal disclaimer and
       sits over scrolling page content, so nothing behind it may ever show
       through. Previously had no background at all on "stars"-template pages
       (index.html, pentest.html, etc.) - only the grey-template pages
       (acervus_guide.html, wikelo.html, page_template_guide.html) opted into
       an opaque background via their own inline <style> override. This is
       now the default for every page instead of a per-page opt-in - kept to
       just the background-color (no padding/border-radius) so the
       already-correct grey-template pages, which override left/width/bottom
       themselves for a flush full-width bar, don't visually change. */
    background-color: var(--bg-color);
}

.footer-logo {
    object-fit: contain;
    filter: grayscale(1) brightness(0.8);
    transition: filter 0.3s ease;
}

.footer-logo:hover {
    filter: grayscale(0) brightness(1);
}

.footer-logo--cig {
    height: 100px;
    width: auto;
}

.footer-logo--rsi {
    width: 100px;
    height: 100px;
}

.disclaimer-text {
    max-width: 800px;
    text-align: center;
    font-family: 'ShareTechMono', monospace;
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

/* Referral */
.corner-referral {
    position: fixed;
    bottom: 8px;
    right: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    z-index: 50;
}

.referral-img {
    width: 75px;
    height: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.referral-img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.4));
}

.referral-text {
    font-family: 'ShareTechMono', monospace;
    font-weight: 100;
    font-size: 0.8rem;
    color: var(--text-main);
    line-height: 1.4;
    opacity: 0.8;
    text-align: right;
}

.referral-code {
    display: block;
    font-family: 'ShareTechMono', monospace;
    font-size: 1.4rem;
    color: #CFFBFF;
    margin: 4px 0;
    text-shadow: 0 0 5px rgba(207, 251, 255, 0.5);
}

/* Made By Community */
.corner-branding {
    position: fixed;
    bottom: 8px;
    left: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 50;
}

.community-badge {
    width: 75px;
    height: auto;
}

/* --- MEDIA PAGES --- */
#dynamic-content-area {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.media-window {
    background: rgba(5, 8, 12, 0.65) !important; /* Darker, transparent core */
    backdrop-filter: blur(16px); /* The "Glass" blur */
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9), /* Inner depth */
                inset 0 0 2px rgba(0, 212, 255, 0.2), /* Subtle rim light */
                0 20px 40px rgba(0, 0, 0, 0.9); /* Heavy drop shadow */
    /* overflow-x stays hidden for the width-clip animation below; overflow-y
       is split out so content taller than the viewport scrolls instead of
       .overlay's flex centering pushing the excess (and the close button
       with it) off-screen above the visible area with no way back to it. */
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 90vh;
    border-left: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    border-top: none;
    border-bottom: none;
    border-radius: 12px;
    padding: 40px;
    width: max-content;
    /* The mobile tier sets width to a min(vw, px) value - without
       border-box, this padding gets added on top of that instead of
       included in it, which is exactly what overflowed .sidebar in the
       same way (see the box-sizing note on .sidebar/.lightbox-sidebar). */
    box-sizing: border-box;
    position: relative;
    font-family: 'ShareTechMono', monospace;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: expandWindow 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Hide Scrollbar for Chrome, Safari and Opera */
.scroll-hide::-webkit-scrollbar,
.overlay-content::-webkit-scrollbar,
.media-window::-webkit-scrollbar {
    display: none;
}

/* Hide Scrollbar for IE, Edge and Firefox */
.scroll-hide,
.overlay-content,
.media-window {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.window-header {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.back-btn {
    color: var(--text-main);
    text-decoration: none;
    font-size: 1.5rem;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    cursor: pointer;
    position: absolute;
    left: 0;
}

.back-btn:hover {
    color: var(--accent);
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}

.window-title {
    width: 100%;
    text-align: center;
    font-family: 'Michroma', sans-serif;
    font-size: 1.2rem;
    color: var(--accent);
    letter-spacing: 2px;
}

/* --- MONITOR LINE SYSTEM --- */
.monitor-lines {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; /* Lets you click buttons through the lines */
    z-index: 50; 
}

.m-line {
    position: absolute;
    width: 100%;
    height: 1px;
    /* Dialed back opacity and glow for a much more subtle look */
    background: rgba(0, 212, 255, 0.15);
    box-shadow: 0 0 3px rgba(0, 212, 255, 0.3);
    opacity: 0;
}

/* Line 1: Steady Top to Bottom (Slower) */
.steady-down { animation: steadyDown 15s linear infinite; }
@keyframes steadyDown {
    0% { top: -2%; opacity: 0; }
    5% { opacity: 0.1; }
    95% { opacity: 0.1; }
    100% { top: 102%; opacity: 0; }
}

/* Line 2: Splits at 40%, goes up at different speeds (Slower) */
.split-slow-up { animation: splitSlowUp 18s ease-out infinite 2s; }
.split-fast-up { animation: splitFastUp 14s ease-in infinite 2s; }
@keyframes splitSlowUp {
    0%, 19% { top: 40%; opacity: 0; }
    20% { opacity: 0.1; top: 40%; }
    100% { top: -2%; opacity: 0; }
}
@keyframes splitFastUp {
    0%, 19% { top: 40%; opacity: 0; }
    20% { opacity: 0.1; top: 40%; }
    60% { top: -2%; opacity: 0; } 
    100% { top: -2%; opacity: 0; }
}

/* Line 3: Top to half, bounces up. Smaller line breaks and drops (Slower, Full Width) */
.bounce-main { animation: bounceMain 22s ease-in-out infinite 4s; }
.bounce-drop { animation: bounceDrop 22s ease-in infinite 4s; }
@keyframes bounceMain {
    0% { top: -2%; opacity: 0; }
    10% { opacity: 0.1; top: 10%; }
    50% { top: 50%; opacity: 0.1; } 
    90% { top: -2%; opacity: 0; } 
    100% { top: -2%; opacity: 0; }
}
@keyframes bounceDrop {
    0%, 49% { top: 50%; opacity: 0; width: 100%; left: 0; }
    /* Now spans the entire width of the window */
    50% { opacity: 0.1; top: 50%; width: 100%; left: 0; } 
    90% { top: 102%; opacity: 0; width: 100%; left: 0; }
    100% { top: 102%; opacity: 0; }
}

/* Line 4: Bottom to top, halfway up a smaller breaks and drops (Slower, Full Width) */
.up-main { animation: upMain 18s linear infinite 1s; }
.up-break { animation: upBreak 18s ease-in infinite 1s; }
@keyframes upMain {
    0% { top: 102%; opacity: 0; }
    5% { opacity: 0.1; }
    95% { opacity: 0.1; }
    100% { top: -2%; opacity: 0; }
}
@keyframes upBreak {
    0%, 49% { top: 50%; opacity: 0; width: 100%; left: 0; }
    /* Now spans the entire width of the window */
    50% { opacity: 0.1; top: 50%; width: 100%; left: 0; } 
    90% { top: 102%; opacity: 0; width: 100%; left: 0; } 
    100% { top: 102%; opacity: 0; }
}

/* --- MEDIA GRID (Screenshots & Videos) --- */

/* 5 columns, 200px each. Max height accommodates 3 rows of 110px + gaps */
.media-grid {
    display: grid;
    grid-template-columns: repeat(5, 200px);
    gap: 15px;
    max-height: 375px; /* (110px * 3 rows) + (15px * 2 gaps) */
    overflow-y: auto;
    padding-right: 10px; /* Space so the scrollbar doesn't overlap images */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) rgba(0, 212, 255, 0.1);

    /* Invisible box structure */
    border: 1px solid var(--box-border);
    background: var(--box-bg);
}

/* Custom Webkit Scrollbar to match the terminal UI */
.media-grid::-webkit-scrollbar {
    width: 6px;
}
.media-grid::-webkit-scrollbar-track {
    background: rgba(0, 212, 255, 0.1);
    border-radius: 3px;
}
.media-grid::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px;
}

.media-item {
    width: 200px;
    height: 110px;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid var(--accent);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.media-item:hover {
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

.media-item:hover img {
    opacity: 1;
    transform: scale(1.05);
}

/* --- LIGHTBOX --- */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    border: 1px solid var(--accent);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}

.lightbox-close {
    color: var(--text-main);
    font-family: 'ShareTechMono', monospace;
    margin-top: 15px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.lightbox-close:hover {
    color: var(--accent);
}

.lightbox-counter {
    display: none;
    font-family: 'ShareTechMono', monospace;
    font-size: 0.9rem;
    color: var(--accent);
    letter-spacing: 2px;
    margin-bottom: 10px;
    opacity: 0.7;
}

/* --- COMIC GRID --- */
.comic-grid {
    display: grid;
    grid-template-columns: repeat(5, 150px);
    gap: 20px;
    max-height: 440px; /* Approx 2 rows of 200px + gaps */
    padding: 10px;
    overflow-y: auto;
}

.comic-item {
    width: 150px;
    height: 200px;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid var(--accent);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.comic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.comic-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
    border-color: #fff;
}

.comic-item:hover img {
    opacity: 1;
}
/* --- RESOURCE LINK GRID --- */
.link-grid {
    display: grid;
    grid-template-columns: repeat(3, 180px);
    gap: 20px;
    padding: 10px;
}

.link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px;
    border: 1px solid var(--box-border);
    background: var(--box-bg);
    text-decoration: none;
    color: var(--text-main);
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease, filter 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.link-item:hover {
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.25);
}

.link-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.link-item:hover .link-icon {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.4));
}

.link-label {
    font-family: 'Cinzel-Variable', serif;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-align: center;
}

.link-url {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.65rem;
    opacity: 0.45;
    letter-spacing: 1px;
    text-align: center;
    transition: opacity 0.3s ease;
}

.link-item:hover .link-url {
    opacity: 0.75;
}

/* --- UNDER CONSTRUCTION --- */
.under-construction {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.construction-img {
    max-width: 300px;
    height: auto;
    opacity: 0.85;
}


/* --- WINDOW WRAPPER (media-window + sidebar pair) --- */
.window-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

/* --- SIDEBARS --- */
.sidebar,
.lightbox-sidebar {
    background: rgba(4, 12, 18, 0.92);
    border: 2px solid var(--accent);
    border-radius: 12px;
    padding: 16px 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 24px rgba(0, 212, 255, 0.25),
                inset 0 0 40px rgba(0, 212, 255, 0.06);
    /* Without this, a percentage width (e.g. .sidebar's mobile width:100%)
       only sizes the content box - this padding + border then get added on
       top of that, overflowing past the intended edge. .lightbox-sidebar
       already redeclared this itself further down; centralising it here
       fixes .sidebar too instead of leaving it as a per-class opt-in. */
    box-sizing: border-box;
}

/* CRT scanline texture overlay */
.sidebar::after,
.lightbox-sidebar::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.18) 3px,
        rgba(0, 0, 0, 0.18) 4px
    );
    pointer-events: none;
    z-index: 2;
}

.sidebar-header {
    font-family: 'ShareTechMono', monospace;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: left;
    color: rgba(0, 212, 255, 0.9);
    letter-spacing: 2px;
    margin: 0 0 12px 0;
    position: relative;
    z-index: 3;
    overflow-wrap: break-word;
    word-break: break-word;
}

.sidebar-body {
    font-family: 'ShareTechMono', monospace;
    font-weight: 400;
    font-size: 0.9rem;
    text-align: justify;
    color: rgba(0, 212, 255, 0.9);
    line-height: 1.7;
    margin: 0;
    white-space: pre-wrap;
    position: relative;
    z-index: 3;
}

/* Vanguard sidebar width */
.sidebar { width: 600px; }

/* Lightbox sidebar sizing and scroll */
.lightbox-sidebar {
    display: none;
    width: 380px;
    flex-shrink: 0;
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.35) rgba(0, 212, 255, 0.05);
}

.lightbox-sidebar::-webkit-scrollbar { width: 4px; }
.lightbox-sidebar::-webkit-scrollbar-track { background: rgba(0, 212, 255, 0.05); }
.lightbox-sidebar::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.35); border-radius: 2px; }

/* --- LIGHTBOX INNER LAYOUT (image + optional comic sidebar) --- */
.lightbox-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

/* Override the generic .lightbox img rule for the inner wrapper */
.lightbox-inner img {
    max-height: 85vh;
    max-width: 90vw;
    width: auto;
}

.lightbox-inner.has-sidebar img {
    max-width: 55vw;
}

/* --- PENTEST PAGE --- */

.hi-page {
    width: 100%;
    max-width: 1600px;
    padding: 40px 40px 260px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hi-title-row {
    display: flex;
    align-items: center;
    gap: 24px;
    border-bottom: 1px solid var(--col-divider);
    padding-bottom: 20px;
}
.hi-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hi-title {
    font-family: 'Cinzel-Variable', serif;
    font-weight: 600;
    font-size: 2.8rem;
    letter-spacing: 6px;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 0px rgba(0,0,0,1));
    line-height: 1;
}
.hi-version {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--accent);
    opacity: 0.55;
    text-transform: uppercase;
}
.hi-subtitle {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.75rem;
    letter-spacing: 3px;
    color: var(--accent);
    opacity: 0.7;
}

.hi-filters {
    display: flex;
    gap: 40px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.hi-filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.hi-filter-label {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: var(--accent);
    opacity: 0.6;
    white-space: nowrap;
    min-width: 60px;
}
.hi-filter-divider {
    width: 1px;
    height: 32px;
    background: var(--col-divider);
    align-self: center;
}

select {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: var(--text-main);
    background: rgba(0, 212, 255, 0.04);
    border: 1px solid rgba(0, 212, 255, 0.2);
    padding: 6px 28px 6px 10px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2300d4ff' opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    border-radius: 2px;
}
select:hover, select:focus {
    border-color: var(--accent);
    background-color: rgba(0, 212, 255, 0.08);
    color: var(--accent);
}
select option {
    background: var(--bg-color);
    color: var(--text-main);
    font-family: 'ShareTechMono', monospace;
}
.hi-filter-group select { min-width: 150px; }
.hi-main-select {
    width: 100%;
    font-size: 0.75rem;
    padding: 8px 28px 8px 10px;
    border-color: rgba(0, 212, 255, 0.3);
}

.hi-panel {
    display: grid;
    grid-template-columns:
        minmax(200px, 1.2fr)
        minmax(200px, 1.2fr)
        minmax(200px, 1.2fr)
        minmax(250px, 1.5fr)
        minmax(160px, 1fr)
        minmax(140px, 1fr)
        minmax(140px, 1fr);
    width: 100%;
    border-left: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    background: var(--panel-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.9),
                inset 0 0 2px rgba(0,212,255,0.2),
                0 20px 40px rgba(0,0,0,0.9);
    border-radius: 12px;
    overflow: hidden;
    min-width: min-content;
}

.hi-col-header {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 4px;
    color: var(--accent);
    padding: 12px 18px 10px;
    border-bottom: 1px solid rgba(0,212,255,0.25);
    border-right: 1px solid var(--col-divider);
    background: rgba(0,212,255,0.06);
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-start;
}
.hi-col-header:last-child { border-right: none; }
.hi-col-header-row {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.hi-header-check-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'ShareTechMono', monospace;
    font-size: 0.54rem;
    letter-spacing: 2px;
    color: rgba(0,212,255,0.38);
    cursor: pointer;
    border-top: 1px solid rgba(0,212,255,0.1);
    padding-top: 6px;
    user-select: none;
    transition: color 0.15s ease;
    text-transform: uppercase;
    width: 100%;
}
.hi-header-check-row:hover { color: rgba(0,212,255,0.7); }
.hi-header-check-row:has(.hi-header-check:checked) { color: var(--accent); }
.hi-header-check {
    appearance: none;
    -webkit-appearance: none;
    width: 9px;
    height: 9px;
    border: 1px solid rgba(0,212,255,0.35);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.hi-header-check:checked {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 5px rgba(0,212,255,0.7);
}
.hi-header-check:hover { border-color: rgba(0,212,255,0.7); }

.hi-sort-select {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.55rem;
    letter-spacing: 1px;
    color: var(--accent);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 3px;
    padding: 2px 4px;
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
    outline: none;
}
.hi-sort-select:hover,
.hi-sort-select:focus { border-color: var(--accent); background: rgba(0, 212, 255, 0.08); }
.hi-sort-select option { background: var(--bg-color); color: var(--accent); }

.hi-col-body {
    padding: 18px;
    border-right: 1px solid var(--col-divider);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--cell-bg);
}
.hi-col-body:last-child { border-right: none; }

.hi-mfr-logo-wrap {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 6px;
}
.hi-mfr-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    display: none;
}
.hi-mfr-logo.visible { display: block; }

.hi-col-body--center {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hi-awaiting {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.2);
    align-self: center;
    margin: auto;
}

.hi-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.hi-stat-row:last-child { border-bottom: none; }
.hi-stat-label {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.6rem;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
    flex-shrink: 0;
}
.hi-stat-val {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.72rem;
    color: var(--text-main);
    text-align: right;
}
.hi-stat-val--type { color: var(--accent); }
.hi-stat-val--alpha {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-main);
}
.hi-weapon-name {
    font-family: 'Michroma', sans-serif;
    font-size: 0.78rem;
    color: var(--text-main);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,212,255,0.15);
    line-height: 1.4;
}

.hi-armour-table { display: flex; flex-direction: column; gap: 0; width: 100%; }
.hi-armour-header {
    display: grid;
    grid-template-columns: 72px 70px 1fr;
    gap: 4px;
    padding: 4px 0 6px;
    border-bottom: 1px solid rgba(0,212,255,0.2);
    margin-bottom: 4px;
}
.hi-armour-header span {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.58rem;
    letter-spacing: 2px;
    color: rgba(0,212,255,0.5);
}
.hi-armour-row {
    display: grid;
    grid-template-columns: 72px 70px 1fr;
    gap: 4px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    align-items: center;
}
.hi-armour-row:last-child { border-bottom: none; }
.hi-armour-row--highlight { background: rgba(0,212,255,0.06); margin: 0 -4px; padding: 4px 4px; }
.hi-armour-type {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.65rem;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.5);
}
.hi-armour-red { font-family: 'ShareTechMono', monospace; font-size: 0.72rem; color: rgba(255,255,255,0.3); }
.hi-armour-red--active { color: #ff9944; }
.hi-armour-gate { font-family: 'ShareTechMono', monospace; font-size: 0.68rem; color: rgba(255,255,255,0.25); }
.hi-armour-gate--active { color: #ff6644; }

.hi-yes {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    letter-spacing: 3px;
    color: var(--yes-color);
    text-shadow: 0 0 20px var(--yes-color), 0 0 40px rgba(0,255,136,0.4);
    display: block;
}
.hi-no {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    letter-spacing: 3px;
    color: var(--no-color);
    text-shadow: 0 0 20px var(--no-color), 0 0 40px rgba(255,68,68,0.4);
    display: block;
}
.hi-defl-detail {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.58rem;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.3);
    margin-top: 8px;
    line-height: 1.6;
    display: block;
}

.hi-result-val {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--text-main);
    display: block;
    text-align: center;
    line-height: 1.2;
}
.hi-result-sub {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: var(--accent);
    opacity: 0.6;
    display: block;
    text-align: center;
    margin-top: 6px;
}
.hi-blocked {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: var(--no-color);
    opacity: 0.7;
    display: block;
    text-align: center;
}

.hi-loading {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: var(--accent);
    opacity: 0.5;
    text-align: center;
    padding: 60px 0;
    width: 100%;
    animation: hi-pulse 1.5s ease-in-out infinite;
}
@keyframes hi-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } }

.hi-panel-scroll {
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hi-panel-scroll::-webkit-scrollbar { display: none; }

/* --- ACERVUS HUB --- */
.acervus-hub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 20px 60px 10px;
    min-width: 320px;
}

.acervus-hub-logo {
    width: 160px;
    height: auto;
    opacity: 0.9;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.15));
}

.acervus-hub-actions {
    display: flex;
    align-items: center;
    gap: 36px;
}

.acervus-action-link {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.85rem;
    letter-spacing: 3px;
    color: var(--text-main);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.acervus-action-link:hover {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent);
}

.acervus-action-link--disabled {
    opacity: 0.4;
    cursor: default;
}

.acervus-action-link--disabled:hover {
    color: var(--text-main);
    text-shadow: none;
}

.acervus-guide-link {
    opacity: 0.55;
    font-size: 0.75rem;
    letter-spacing: 4px;
}

.acervus-privacy-link {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: #aaa;
    opacity: 0.4;
    text-decoration: none;
    margin-top: 0.5rem;
    cursor: pointer;
}

.acervus-privacy-link:hover {
    opacity: 0.8;
    color: var(--accent);
}

.acervus-discord-link {
    margin-top: 0.75rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.acervus-discord-link:hover {
    opacity: 1;
}

.acervus-discord-icon {
    width: 32px;
    height: 32px;
}

/* --- STANDALONE GUIDE SIDEBAR LABEL --- */
/* --- GUIDE PAGE LAYOUT (shared by acervus_guide.html, wikelo.html, and
   page_template_guide.html - previously duplicated inline in each) --- */
.guide-layout {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 1875px;
    padding: 48px 48px 220px;
    box-sizing: border-box;
    gap: 40px;
}

.guide-sidebar {
    position: sticky;
    top: 70px;
    width: 240px;
    min-width: 240px;
    flex-shrink: 0;
    align-self: flex-start;
}

/* Acervus Guide's narrower sidebar (just a label + nav, no hero image/desc) */
.guide-sidebar--narrow {
    width: 175px;
    min-width: 175px;
    overflow: hidden;
}

.guide-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.guide-nav a {
    font-family: 'Michroma', sans-serif;
    font-size: 0.62rem;
    color: rgba(224, 224, 224, 0.6);
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.5;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.guide-nav a:hover {
    color: var(--accent);
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

.guide-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Glass window - same appearance as overlay windows, embedded in page */
.guide-window {
    background: rgba(5, 8, 12, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9),
                inset 0 0 2px rgba(0, 212, 255, 0.2),
                0 20px 40px rgba(0, 0, 0, 0.9);
    border-left: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    border-top: none;
    border-bottom: none;
    border-radius: 12px;
    padding: 52px 60px;
    width: 100%;
    box-sizing: border-box;
}

.guide-sidebar-label {
    font-family: 'Cinzel-Variable', serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 4px;
    color: var(--accent);
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
    margin-bottom: 14px;
    text-transform: uppercase;
}

/* --- STANDALONE GUIDE PAGE TITLE --- */
.guide-page-title {
    font-family: 'Cinzel-Variable', serif;
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: 6px;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 1));
    text-align: center;
    text-transform: uppercase;
    margin: 0 0 28px;
}

/* --- ACERVUS GUIDE INDEX --- */
.guide-index-body {
    padding: 20px 24px 24px;
}
.guide-index-scroll {
    overflow-y: auto;
    max-height: 800px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,212,255,0.3) transparent;
}
.guide-index-scroll::-webkit-scrollbar { width: 4px; }
.guide-index-scroll::-webkit-scrollbar-track { background: transparent; }
.guide-index-scroll::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.3); border-radius: 2px; }
.guide-index-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.guide-index-item {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid rgba(0,212,255,0.15);
    border-radius: 4px;
    overflow: hidden;
    background: rgba(0,212,255,0.03);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}
.guide-index-item:hover {
    border-color: var(--accent);
    background: rgba(0,212,255,0.07);
    box-shadow: 0 0 12px rgba(0,212,255,0.2);
}
.guide-index-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    object-position: top;
    display: block;
    border-bottom: 1px solid rgba(0,212,255,0.1);
    transition: opacity 0.2s ease;
}
.guide-index-item:hover .guide-index-thumb { opacity: 0.85; }
.guide-index-label {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.58rem;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.55);
    text-align: center;
    padding: 7px 6px 8px;
    text-transform: uppercase;
    line-height: 1.4;
    transition: color 0.2s ease;
}
.guide-index-item:hover .guide-index-label { color: var(--accent); }

/* --- ACERVUS VIEWER (guide & patch notes) --- */
.media-window.acervus-viewer {
    width: min(92vw, 1800px);
    padding: 28px 32px;
    box-sizing: border-box;
}

.viewer-counter {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--accent);
    opacity: 0.6;
    position: absolute;
    right: 0;
}

#acervus-guide,
#acervus-patchnotes {
    width: 100%;
}

.viewer-page {
    display: none;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}

.viewer-img-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.viewer-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.guide-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.guide-placeholder-title {
    font-family: 'Cinzel-Variable', serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 4vw, 4rem);
    letter-spacing: 10px;
    margin: 0;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(2px 2px 2px #000);
}

.guide-placeholder-subtitle {
    font-family: 'ShareTechMono', monospace;
    font-size: clamp(0.6rem, 1.5vw, 1.2rem);
    margin-top: 30px;
    letter-spacing: 8px;
    text-transform: uppercase;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.5));
}

.viewer-sidebar {
    flex: 0 0 300px;
    min-width: 0;
    background: rgba(4, 12, 18, 0.92);
    border: 2px solid var(--accent);
    border-radius: 12px;
    padding: 18px 22px;
    position: relative;
    overflow-y: auto;
    max-height: calc(85vh - 160px);
    box-shadow: 0 0 24px rgba(0, 212, 255, 0.2), inset 0 0 40px rgba(0, 212, 255, 0.05);
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.35) rgba(0, 212, 255, 0.05);
}

.viewer-sidebar::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px, transparent 3px,
        rgba(0, 0, 0, 0.18) 3px, rgba(0, 0, 0, 0.18) 4px
    );
    pointer-events: none;
    z-index: 2;
}

.viewer-sidebar::-webkit-scrollbar { width: 4px; }
.viewer-sidebar::-webkit-scrollbar-track { background: rgba(0, 212, 255, 0.05); }
.viewer-sidebar::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.35); border-radius: 2px; }

.viewer-sidebar-title {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.9rem;
    color: var(--accent);
    letter-spacing: 2px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.25);
    position: relative;
    z-index: 3;
}

.viewer-sidebar-body {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.8rem;
    color: rgba(0, 212, 255, 0.85);
    line-height: 1.75;
    position: relative;
    z-index: 3;
}

.viewer-sidebar-body p {
    margin: 0 0 10px;
}

.viewer-sidebar-body p:last-child { margin-bottom: 0; }

.guide-subhead {
    display: block;
    color: var(--accent);
    letter-spacing: 2px;
    font-size: 0.74rem;
    margin: 14px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.18);
    position: relative;
    z-index: 3;
}

.guide-subhead:first-child { margin-top: 0; }

.viewer-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    width: 100%;
}

.viewer-nav-btn {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: var(--text-main);
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}

.viewer-nav-btn:hover {
    opacity: 1;
    color: var(--accent);
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

/* --- PATCH NOTES CONTENT --- */
.pn-version {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 3px;
    margin: 0 0 16px;
    position: relative;
    z-index: 3;
}

.pn-section-title {
    display: block;
    font-family: 'Michroma', sans-serif;
    font-size: 0.72rem;
    color: var(--accent);
    letter-spacing: 2px;
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    position: relative;
    z-index: 3;
}

.pn-section-title:first-of-type { margin-top: 0; }

.pn-text {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.78rem;
    color: rgba(0, 212, 255, 0.75);
    line-height: 1.7;
    margin: 0 0 8px;
    display: block;
    position: relative;
    z-index: 3;
}

.pn-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    position: relative;
    z-index: 3;
}

.pn-list li {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.76rem;
    color: rgba(0, 212, 255, 0.75);
    line-height: 1.65;
    padding-left: 14px;
    position: relative;
    margin-bottom: 4px;
}

.pn-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--accent);
    opacity: 0.6;
}

.pn-sublist {
    list-style: none;
    padding: 4px 0 4px 12px;
    margin: 4px 0 0;
}

.pn-sublist li {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.72rem;
    color: rgba(0, 212, 255, 0.6);
    line-height: 1.6;
    padding-left: 12px;
    position: relative;
    margin-bottom: 2px;
}

.pn-sublist li::before {
    content: '–';
    position: absolute;
    left: 0;
    opacity: 0.4;
}

.pn-text code, .pn-list li code, .pn-sublist li code {
    font-family: 'ShareTechMono', monospace;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 2px;
    padding: 1px 4px;
    font-size: 0.9em;
}

/* --- TRANSMISSIONS SECTION --- */
.transmissions {
    position: fixed;
    left: 28px;
    top: 375px;
    width: 300px;
    max-height: calc(100vh - 410px);
    overflow-y: auto;
    z-index: 10;
    padding-bottom: 20px;
}

.transmissions--right {
    left: auto;
    right: 28px;
}

.transmissions-label {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.65rem;
    color: rgba(0, 212, 255, 0.35);
    letter-spacing: 0.18em;
    border-bottom: 1px solid rgba(0, 212, 255, 0.08);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.transmissions-label--roundup {
    margin-top: 16px;
}

.devtracker-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.devtracker-loading {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.65rem;
    color: rgba(0, 212, 255, 0.25);
    letter-spacing: 0.12em;
    padding: 16px 0;
    text-align: center;
}

.devtracker-entry {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-left: 2px solid rgba(0, 212, 255, 0.4);
    padding: 15px 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}

.devtracker-entry:hover {
    background: rgba(0, 212, 255, 0.04);
    border-color: rgba(0, 212, 255, 0.35);
    border-left-color: var(--accent);
}

.devtracker-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.devtracker-author {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.9rem;
    color: var(--gold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.9;
}

.devtracker-time {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.82rem;
    color: rgba(0, 212, 255, 0.3);
    white-space: nowrap;
}

.devtracker-title {
    font-family: 'ShareTechMono', monospace;
    font-size: 1.08rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.35;
}

.devtracker-view-all {
    display: block;
    margin-top: 8px;
    font-family: 'ShareTechMono', monospace;
    font-size: 0.85rem;
    color: var(--gold);
    text-decoration: none;
    text-align: right;
}
.devtracker-view-all:hover {
    color: #f0c85a;
}

.devtracker-excerpt {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.62rem;
    color: rgba(0, 212, 255, 0.4);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.roundup-banner {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-top: 1px solid rgba(0, 212, 255, 0.3);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.roundup-banner:hover {
    background: rgba(0, 212, 255, 0.04);
    border-color: rgba(0, 212, 255, 0.3);
    border-top-color: var(--accent);
}

.roundup-banner-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.roundup-banner-label {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.55rem;
    color: rgba(0, 212, 255, 0.35);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.roundup-banner-title {
    font-family: 'Orbitron-Variable', 'Orbitron', sans-serif;
    font-size: 0.82rem;
    color: var(--gold);
    letter-spacing: 0.05em;
}

.roundup-banner-arrow {
    font-family: 'ShareTechMono', monospace;
    font-size: 1.4rem;
    color: var(--accent);
    opacity: 0.45;
    flex-shrink: 0;
}

.roundup-banner:hover .roundup-banner-arrow {
    opacity: 0.9;
}

.event-tile {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-top: 1px solid rgba(0, 212, 255, 0.3);
    padding: 10px 10px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}

.event-tile:hover {
    background: rgba(0, 212, 255, 0.04);
    border-color: rgba(0, 212, 255, 0.35);
    border-top-color: var(--accent);
}

.event-tile-img {
    width: 100%;
    height: auto;
    display: block;
}

.event-tile-title {
    font-family: 'Orbitron-Variable', 'Orbitron', sans-serif;
    font-size: 0.82rem;
    color: var(--gold);
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* --- ROADMAP ROUNDUP WINDOW --- */
.media-window.roundup-window {
    width: min(86vw, 1100px);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

.roundup-source-link {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.6rem;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 0.08em;
    margin-left: auto;
    padding-right: 36px;
    white-space: nowrap;
    align-self: center;
    transition: color 0.2s;
}

.roundup-source-link:hover {
    color: #f0c85a;
}

.roundup-body {
    overflow-y: auto;
    padding: 20px 28px 28px;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.3) rgba(0, 212, 255, 0.04);
}

.roundup-body::-webkit-scrollbar { width: 4px; }
.roundup-body::-webkit-scrollbar-track { background: rgba(0, 212, 255, 0.04); }
.roundup-body::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.3); border-radius: 2px; }

.roundup-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 14px auto;
}

.roundup-body p {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.82rem;
    color: rgba(255, 220, 120, 0.85);
    line-height: 1.75;
    margin: 0 0 14px;
}

.roundup-body h1, .roundup-body h2, .roundup-body h3,
.roundup-body h4, .roundup-body h5 {
    font-family: 'Orbitron-Variable', 'Orbitron', sans-serif;
    color: rgba(255, 255, 255, 0.88);
    margin: 22px 0 8px;
    letter-spacing: 0.04em;
}

.roundup-body strong, .roundup-body b {
    color: rgba(255, 255, 255, 0.88);
}

.roundup-body a {
    color: var(--accent);
    text-decoration: none;
}

.roundup-body a:hover {
    text-decoration: underline;
}

.roundup-body ul, .roundup-body ol {
    padding-left: 18px;
    margin: 0 0 14px;
}

.roundup-body li {
    font-family: 'ShareTechMono', monospace;
    font-size: 0.8rem;
    color: rgba(0, 212, 255, 0.72);
    line-height: 1.65;
    margin-bottom: 4px;
}

.roundup-body blockquote {
    border-left: 2px solid rgba(0, 212, 255, 0.3);
    padding-left: 14px;
    margin: 0 0 14px;
    color: rgba(0, 212, 255, 0.55);
}

/* --- WEEKLY UPDATE NEWSLETTER ---
   Reuses .media-window.roundup-window / .roundup-body / .roundup-source-link
   and the .roundup-body h1-h5/p/a rules above for identical fonts and colours -
   these classes only add the per-item image + flex layout. */
.newsletter-intro {
    padding: 0 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.15);
}

.newsletter-item {
    display: flex;
    gap: 18px;
    max-width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 212, 255, 0.08);
}

.newsletter-item:last-child {
    border-bottom: none;
}

.newsletter-item-img {
    width: 160px;
    max-width: 38%;
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(0, 212, 255, 0.15);
}

.newsletter-item-body {
    min-width: 0;
    flex: 1;
}

.newsletter-item--image-only {
    justify-content: center;
}

.newsletter-item--image-only .newsletter-item-img {
    width: 100%;
    max-width: 480px;
    max-height: 320px;
}
/* --- RESPONSIVE (Mobile / Tablet) ---
   Three tiers: Desktop (>=1440px, unqueried default CSS above), Tablet
   (768-1439px, resize-only - nothing hidden, nothing restructured), Mobile
   (<=767px, full single-column redesign with the hamburger side-menu and
   collapsible footer). Tablet must never hide content - only Mobile does.

   1439px (not 1280px) is the tablet ceiling deliberately - real tablets in
   landscape commonly exceed 1280px (iPad Pro 12.9" landscape is 1366px,
   Surface Pro 7 landscape is ~1368px), and landscape is the more common
   orientation for actual tablet use. A narrower ceiling left those devices
   falling through to the unqueried "desktop" tier with none of the tablet
   scaling applied. */

@media (min-width: 768px) and (max-width: 1439px) {
    /* bottom offsets bumped from the desktop default (8-10px) - on shorter
       tablet-range viewports (e.g. 1024x600) that margin left these only
       ~8-10px from the bottom edge, easy to mistake for missing entirely if
       a real device's browser chrome eats into the available height beyond
       what devtools emulation reports via window.innerHeight.

       .footer-disclaimer is centred and can run up to 95% of the viewport
       width (desktop default), while .corner-branding/.corner-referral are
       independently anchored to the bottom-left/right corners - at desktop
       widths there's enough horizontal room that these never meet, but
       narrower tablet widths (as low as 768px) don't have enough spare width
       for that to hold, and the two would visually collide/overlap into each
       other. Fixed with vertical separation instead of trying to fight for
       horizontal room at every possible tablet width: the corner icons sit
       in their own row well above the centred disclaimer row instead of
       sharing the same bottom position.

       Header logo, hero band, and every footer element are scaled to
       exactly 50% of their desktop size at this tier - the combination of a
       full-height hero band plus full-size header/footer was forcing
       scroll on tablet heights while the fixed footer/side panels stayed
       put, which read as cramped even before the opacity fix above. */
    .logo { font-size: 0.9rem; }
    .hero { height: 150px; }
    .blurb { font-size: 0.45rem; }

    .footer-logo--cig  { height: 50px; }
    .footer-logo--rsi  { width: 50px; height: 50px; }
    /* Capped to 50% of the viewport (not the old 800px desktop cap, which is
       wider than most of the tablet range outright) so the centred
       disclaimer row doesn't crowd out the corner icons - leaves 25% clear
       on each side for branding/referral to sit in the same row instead of
       needing their own row pushed above it. referral-text also gets an
       explicit cap since its two lines (set via a <br> in the template, see
       renderSiteReferral() in script.js) have no width constraint of their
       own otherwise and were the other half of the collision at the
       narrowest tablet widths (768px). */
    .disclaimer-text   { font-size: 0.4rem; max-width: 50vw; }
    .footer-disclaimer { gap: 10px; bottom: 20px; }
    .community-badge   { width: 37.5px; }
    .corner-branding   { bottom: 20px; left: 16px; }
    .referral-img      { width: 37.5px; }
    .referral-text     { font-size: 0.4rem; max-width: 130px; }
    .referral-code     { font-size: 0.7rem; }
    .corner-referral   { bottom: 20px; right: 16px; }
}

/* --- TABLET PORTRAIT: side panels move into the hamburger drawer ---
   At tablet widths in portrait orientation there isn't enough spare
   horizontal room for the fixed .transmissions/.transmissions--right side
   panels to sit beside the centred tile grid without overlapping it - that
   only works in landscape, or on genuinely wide desktop screens. Rather than
   the full mobile redesign, this borrows just the side-menu-drawer mechanism
   from the mobile tier below (same rules, duplicated rather than shared via
   a combined selector list, since the two tiers otherwise diverge on
   everything else - header/hero/footer sizing all stay at their normal
   tablet treatment here). The footer is deliberately untouched by this block
   - it stays exactly as the tablet tier above already has it (fixed, always
   visible, opaque), not converted to the mobile collapsed-bar pattern. */
@media (min-width: 768px) and (max-width: 1439px) and (orientation: portrait) {
    .menu-trigger { display: block; }

    #mobile-menu-overlay {
        display: none;
        justify-content: flex-start;
    }
    .side-menu-panel { display: block; }
    .side-menu-panel .close-btn { display: block; }

    .side-menu-panel > .corner-referral {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        position: static;
        margin-bottom: 28px;
        padding-bottom: 24px;
        border-bottom: 1px solid rgba(0, 212, 255, 0.15);
    }

    .transmissions,
    .transmissions--right {
        position: static;
        left: auto; right: auto; top: auto;
        width: 100%;
        max-height: none;
        overflow-y: visible;
        padding-bottom: 0;
        margin-bottom: 28px;
    }
    .transmissions--right { margin-bottom: 0; }

    .side-menu-panel .devtracker-excerpt { display: none; }
}

@media (max-width: 767px) {

    /* --- Header --- */
    .menu-trigger { display: block; flex-shrink: 0; }
    header { padding: 15px 12px; gap: 8px; }
    /* Prevent "THE STAR VAULT" wrapping to 2 lines at narrow widths - a
       wrapped logo's bounding box overlaps the menu-trigger icon (they're
       flex siblings), and since the logo paints later in DOM order its text
       can visually cover the icon even though both remain individually
       clickable. Shrinking + nowrap keeps everything on one row. */
    .logo {
        font-size: 1.05rem;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .account-access { flex-shrink: 0; }

    /* Remove the reserved 300px hero band entirely (not just the tagline
       text) - it was pushing the tile grid too far down the page. The
       starfield still shows underneath since it's a page-wide body
       background, not confined to .hero, so there's no visible seam. */
    .hero { display: none; }

    /* --- Side menu drawer + footer overlay: restore real overlay behaviour --- */
    #mobile-menu-overlay {
        display: none;
        justify-content: flex-start;
    }
    .side-menu-panel { display: block; }

    #footer-overlay { display: none; }
    .footer-overlay-content { display: flex; flex-direction: column; gap: 20px; }

    .side-menu-panel .close-btn,
    .footer-overlay-content .close-btn { display: block; }

    .side-menu-panel .guide-sidebar-label { display: block; }
    .side-menu-panel .guide-nav { display: flex; }

    .side-menu-panel > .corner-referral {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        position: static;
        margin-bottom: 28px;
        padding-bottom: 24px;
        border-bottom: 1px solid rgba(0, 212, 255, 0.15);
    }

    /* --- Transmissions: unpin from fixed side panels, stack in the drawer --- */
    .transmissions,
    .transmissions--right {
        position: static;
        left: auto; right: auto; top: auto;
        width: 100%;
        max-height: none;
        overflow-y: visible;
        padding-bottom: 0;
        margin-bottom: 28px;
    }
    .transmissions--right { margin-bottom: 0; }

    /* Side-menu devtracker entries: header + timestamp only, no excerpt body text */
    .side-menu-panel .devtracker-excerpt { display: none; }

    /* --- Footer overlay content: relocated .footer-disclaimer/.corner-branding/
       .corner-referral stack in the required order (Made By Community, disclaimer,
       referral) instead of their desktop fixed positions --- */
    #footer-overlay .footer-disclaimer,
    #footer-overlay .corner-branding,
    #footer-overlay .corner-referral {
        position: static;
        bottom: auto; left: auto; right: auto; top: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        max-height: none;
        overflow: visible;
        pointer-events: auto;
        z-index: auto;
    }
    #footer-overlay .footer-disclaimer {
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }
    #footer-overlay .corner-branding { align-items: center; }
    #footer-overlay .corner-referral {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    /* --- Collapsed footer bar --- */
    .footer-collapsed-bar { display: flex; }
    .main-content { padding-bottom: 90px; }

    /* --- Universal single column --- */
    .tile-container {
        grid-template-columns: 150px;
        grid-template-rows: repeat(4, 150px);
        gap: 40px;
    }

    .overlay-content {
        grid-template-columns: 1fr 1fr;
        width: min(92vw, 420px);
    }
    .sub-option--wide { grid-column: 1 / -1; }

    /* Icons/text in view-window option grids sized closer to the desktop
       look so 4-stacked overlays (e.g. Tools) don't grow past the viewport
       height and push the close button out of reach - see the max-height/
       overflow-y fix on .overlay-content above. Home screen tiles
       (.tile/.tile-icon) are a separate, untouched component. */
    .sub-option {
        padding: 12px;
        gap: 9px;
    }
    .sub-icon {
        width: 60px;
        height: 60px;
    }
    .sub-option span {
        font-size: 0.65rem;
    }

    .media-window {
        width: min(92vw, 480px);
        padding: 24px;
    }
    /* expandWindow's 100% keyframe hardcodes padding-left/right: 40px
       (forwards-filled, so it wins over any non-!important rule for those
       two properties specifically regardless of specificity) - harmless
       when a variant's intended padding is already 40px, but it silently
       overrides this base variant's narrower 24px on mobile, leaving less
       room than the comic/media grid sizing below assumes. Scoped away
       from acervus-viewer/roundup-window since their own 40px-ish paddings
       aren't affected by the same clash. */
    .media-window:not(.acervus-viewer):not(.roundup-window) {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .media-window.acervus-viewer { padding: 20px 16px; }
    .media-window.roundup-window { width: min(92vw, 480px); }

    .viewer-page { flex-direction: column; }
    .viewer-sidebar {
        flex: 0 0 auto;
        width: 100%;
        max-height: 35vh;
    }

    .lightbox-inner { flex-direction: column; }
    .lightbox-sidebar {
        width: 100%;
        max-height: 35vh;
    }
    .lightbox-inner.has-sidebar img {
        max-width: 90vw;
        max-height: 45vh;
    }

    /* Third "primary content + info sidebar" pattern alongside the two
       above (.viewer-page/.viewer-sidebar and .lightbox-inner/.lightbox-
       sidebar) - .window-wrapper/.sidebar, currently only used by
       resources/vanguard.html, but written generally since it's a reusable
       partial pattern, not page-specific. Comics correctly stacked already
       because it goes through the lightbox, not this pattern - anything
       using .window-wrapper needed this fix separately. */
    .window-wrapper { flex-direction: column; }
    .sidebar {
        width: 100%;
        max-height: 35vh;
        /* The shared base rule (.sidebar, .lightbox-sidebar) sets
           overflow:hidden for the desktop glass-panel look - .lightbox-
           sidebar overrides it back to auto itself, but .sidebar never did,
           so content past max-height was just clipped with no way to reach
           the rest of it instead of scrolling. */
        overflow-y: auto;
    }

    /* .link-grid (used by resources/vanguard.html and resources/websites.html)
       is a fixed 3-column grid that forces horizontal scroll on mobile.
       Brought in line with the .overlay-content/.sub-option view-window
       icons: 2 per row, same 60px icon size and same reduced padding/gap/
       label size, so every icon-based picker on the site matches. */
    .link-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 6px;
    }
    .link-item {
        padding: 12px;
        gap: 9px;
    }
    .link-icon {
        width: 60px;
        height: 60px;
    }
    .link-label {
        font-size: 0.65rem;
    }
    .link-url {
        font-size: 0.5rem;
    }

    /* Screenshot/Video and Comic thumbnail grids: same ~40% size reduction
       as the .sub-option/.sub-icon view-window icons above, so the media
       window has more room and matches the desktop look more closely.
       auto-fill/minmax (rather than a fixed repeat(N, px) like the desktop
       rule) lets the row reflow to however many thumbnails actually fit -
       the desktop grid's fixed-px columns would otherwise overflow the
       narrower mobile .media-window and get clipped unreachably by its
       overflow-x: hidden. */
    .media-grid {
        /* .media-window is flex/align-items:center, so a grid child with no
           explicit width shrink-wraps to its min-content instead of the
           container's full available width - auto-fill then has nothing to
           divide by and always collapses to a single column. width:100% +
           border-box gives it a definite size to fill again. */
        width: 100%;
        box-sizing: border-box;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 9px;
        max-height: 45vh;
        padding-right: 6px;
    }
    .media-item {
        width: 100%;
        height: 66px;
    }

    .comic-grid {
        width: 100%;
        box-sizing: border-box;
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 12px;
        max-height: 45vh;
        padding: 6px;
    }
    .comic-item {
        width: 100%;
        height: 120px;
    }

    .newsletter-item { flex-direction: column; }
    .newsletter-item-img {
        width: 100%;
        max-width: 100%;
    }

    /* --- Pentest calculator: pair each header directly above its own body
       cell via `order`, turning the 7-column table into 7 stacked rows.
       Relies on modifier classes added to pentest.html's header divs
       (hi-col-header--weapon etc.) matching the body cells' existing IDs. */
    .hi-page { padding: 24px 16px 110px; }
    .hi-panel {
        grid-template-columns: 1fr;
        min-width: 0;
    }
    .hi-panel-scroll { overflow-x: visible; }
    .hi-col-header {
        border-right: none;
        border-bottom: 1px solid rgba(0, 212, 255, 0.25);
    }
    .hi-col-body {
        border-right: none;
        min-height: auto;
    }

    .hi-panel > .hi-col-header--weapon     { order: 1; }
    #col-weapon                             { order: 2; }
    .hi-panel > .hi-col-header--damage     { order: 3; }
    #col-damage                             { order: 4; }
    .hi-panel > .hi-col-header--ship       { order: 5; }
    #col-ship                               { order: 6; }
    .hi-panel > .hi-col-header--armour     { order: 7; }
    #col-armour                             { order: 8; }
    .hi-panel > .hi-col-header--deflection { order: 9; }
    #col-deflection                         { order: 10; }
    .hi-panel > .hi-col-header--alpha      { order: 11; }
    #col-alpha                              { order: 12; }
    .hi-panel > .hi-col-header--dps        { order: 13; }
    #col-dps                                { order: 14; }
}


@media (max-width: 767px) {
    .guide-layout {
        flex-direction: column;
        padding: 24px 16px 110px;
        gap: 24px;
    }
    .guide-sidebar,
    .guide-sidebar--narrow {
        position: static;
        width: 100%;
        min-width: 0;
        overflow: visible;
    }
    /* The Contents/Contracts label + nav links move into the page's own
       mobile drawer instead (a small static duplicate, not a relocation -
       unlike .transmissions, a sticky/flex-positioned sidebar can't be moved
       out of .guide-layout and restored via display:contents, since contents
       mode only un-boxes ancestors, it doesn't re-parent content back into a
       specific flex layout). Any other sidebar content (e.g. Wikelo's hero
       image/description) stays inline and just stacks normally above main. */
    .guide-sidebar-nav { display: none; }
    .guide-window { padding: 28px 20px; }
}