/**
 * Character Creator - Terminal Boot Sequence Styles
 * Pip-Boy / Wasteland OS Aesthetic - Diegetic Retro-Futurism
 * CRT monitor with texture, noise, and industrial design
 */

/* ============================================
   GLOBAL ATMOSPHERE - THE CRT MONITOR
   ============================================ */

/* Body/HTML base styling for Pip-Boy aesthetic */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #050a05 !important; /* Deep green-black, not pure black */
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
    color: #39ff14;

/* Ensure character creator screen starts at top */
body:has(.terminal-boot-sequence.active),
html:has(.terminal-boot-sequence.active),
body:has(.terminal-boot-sequence:not(.hidden)),
html:has(.terminal-boot-sequence:not(.hidden)) {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;

/* ============================================
   EMERGENCY RESET - NUCLEAR OPTION
   High-specificity overrides to force cockpit layout
   ============================================ */

/* Force body/html reset - HIGHEST PRIORITY - DESKTOP ONLY */
@media (min-width: 768px) {
    body .tactical-dashboard.terminal-boot-sequence,
    html .tactical-dashboard.terminal-boot-sequence,
    .tactical-dashboard.terminal-boot-sequence,
    #character-creator-dashboard.tactical-dashboard.terminal-boot-sequence {
        display: grid !important;
        grid-template-columns: 200px 1fr 320px !important; /* Compact Sidebar, Flex Center, Dossier */
        grid-template-rows: 100vh !important;
        gap: 0 !important;
        width: 100vw !important;
        min-width: 780px !important; /* 200 + 260 + 320 = minimum width for all columns */
        height: 100vh !important;
        
        /* PIP-BOY BACKGROUND TEXTURE: The Grid Pattern */
        background-color: #050a05 !important; /* Deep green-black base */
        background-image: 
            /* The tactical grid lines */
            linear-gradient(rgba(57, 255, 20, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(57, 255, 20, 0.1) 1px, transparent 1px),
            /* The CRT Vignette (Dark corners - curved monitor effect) */
            radial-gradient(circle at center, transparent 60%, #000 100%),
            /* Subtle scanline texture */
            linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
            linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)) !important;
        background-size: 40px 40px, 40px 40px, 100% 100%, 100% 2px, 3px 100% !important;
        background-position: center !important;
        
        /* CRT BLOOM - The glow around text */
        text-shadow: 0 0 4px rgba(57, 255, 20, 0.6) !important;
        
        /* CURVED CORNERS - The physical screen bezel */
        box-shadow: inset 0 0 100px rgba(0,0,0,0.9) !important; /* Deep inner shadow */
        
        overflow-y: auto !important;
        overflow-x: hidden !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 99999 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;

    /* Ensure body/html scroll to top when character creator is active */
    body:has(.tactical-dashboard.terminal-boot-sequence.active),
    html:has(.tactical-dashboard.terminal-boot-sequence.active),
    body:has(#character-creator-dashboard.active),
    html:has(#character-creator-dashboard.active) {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;

/* SCANLINE OVERLAY - The Flicker Effect - DESKTOP ONLY */
@media (min-width: 768px) {
    .tactical-dashboard.terminal-boot-sequence::before,
    .terminal-boot-sequence.tactical-dashboard::before {
        content: " ";
        display: block;
        position: absolute;
        top: 0; 
        left: 0; 
        bottom: 0; 
        right: 0;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
        z-index: 999; /* On top of everything */
        background-size: 100% 2px, 3px 100%;
        pointer-events: none; /* Click through it */
        animation: crt-flicker 0.15s infinite;
        opacity: 0.3;

@keyframes crt-flicker {
    0% { opacity: 0.28; }
    50% { opacity: 0.3; }
    100% { opacity: 0.28; }

/* Fallback for single class - DESKTOP ONLY */
@media (min-width: 768px) {
    body .tactical-dashboard,
    body .terminal-boot-sequence,
    html .tactical-dashboard,
    html .terminal-boot-sequence {
        display: grid !important;
        grid-template-columns: 200px 1fr 320px !important; /* MATCHES MAIN RULE */
        grid-template-rows: 100vh !important;
        gap: 0 !important;
        width: 100vw !important;
        min-width: 780px !important; /* 200 + 260 + 320 = 780px minimum */
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 99999 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;

/* Ensure all three grid children are explicitly positioned and visible - DESKTOP ONLY */
@media (min-width: 768px) {
    body .tactical-dashboard > aside:first-of-type,
    body .terminal-boot-sequence > aside:first-of-type,
    html .tactical-dashboard > aside:first-of-type,
    html .terminal-boot-sequence > aside:first-of-type,
    body .tactical-dashboard .dashboard-sidebar,
    body .terminal-boot-sequence .dashboard-sidebar,
    html .tactical-dashboard .dashboard-sidebar,
    html .terminal-boot-sequence .dashboard-sidebar {
        grid-column: 1 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

    body .tactical-dashboard > main,
    body .terminal-boot-sequence > main,
    html .tactical-dashboard > main,
    html .terminal-boot-sequence > main,
    body .tactical-dashboard .dashboard-console,
    body .terminal-boot-sequence .dashboard-console,
    html .tactical-dashboard .dashboard-console,
    html .terminal-boot-sequence .dashboard-console {
        grid-column: 2 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

    body .tactical-dashboard > aside:last-of-type,
    body .terminal-boot-sequence > aside:last-of-type,
    html .tactical-dashboard > aside:last-of-type,
    html .terminal-boot-sequence > aside:last-of-type,
    body .tactical-dashboard .dashboard-dossier,
    body .terminal-boot-sequence .dashboard-dossier,
    html .tactical-dashboard .dashboard-dossier,
    html .terminal-boot-sequence .dashboard-dossier {
        grid-column: 3 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

/* COLUMN 1: SIDEBAR - PIP-BOY HARDWARE MENU (COMPACT) - DESKTOP ONLY */
@media (min-width: 768px) {
    body .dashboard-sidebar,
    body .boot-nav,
    html .dashboard-sidebar,
    html .boot-nav {
        border-right: 4px solid #1a331a !important; /* Thicker, chunky border */
        background: rgba(0, 10, 0, 0.8) !important;
        padding: 12px 10px !important; /* Reduced padding */
        color: #2e8b57 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* Start from top, not space-between */
        width: 200px !important; /* Reduced from 260px */
        min-width: 200px !important;
        max-width: 200px !important;
        height: 100vh !important;
        overflow-y: auto !important;
        position: relative !important;
        gap: 8px !important; /* Add small gap between sections */
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1 !important;

/* Decorative "Screw" or system marker in top left */
.dashboard-sidebar::before,
.boot-nav::before {
    content: "SYS.MEM_32884"; 
    position: absolute;
    top: 5px; 
    left: 5px;
    font-size: 0.5rem;
    opacity: 0.5;
    color: #2e8b57;
    z-index: 1;
    pointer-events: none;

/* COLUMN 2: CENTER CONSOLE - PIP-BOY VIEWPORT - DESKTOP ONLY */
@media (min-width: 768px) {
    body .dashboard-console,
    body .boot-stage-container,
    html .dashboard-console,
    html .boot-stage-container {
        position: relative !important;
        border-right: 2px solid #1a441a !important;
        background: transparent !important; /* Remove background so grid shows through */
        overflow-y: auto !important; /* Scroll ONLY the middle */
        overflow-x: hidden !important;
        padding: 40px !important; /* More breathing room */
        width: auto !important;
        min-width: 0 !important; /* Allow flex shrinking */
        height: 100vh !important;
        box-sizing: border-box !important;
        grid-column: 2 !important; /* Force console to column 2 */
        flex-shrink: 1 !important; /* Allow console to shrink if needed */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1 !important;

/* Add a "Top Bar" to the center console like a window header */
.dashboard-console::after,
.boot-stage-container::after {
    content: "";
    position: absolute;
    top: 10px; 
    left: 10px; 
    right: 10px;
    height: 2px;
    background: #2e8b57;
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;

/* Custom Scrollbar for the center */
body .dashboard-console::-webkit-scrollbar,
body .boot-stage-container::-webkit-scrollbar {
    width: 8px !important;

body .dashboard-console::-webkit-scrollbar-thumb,
body .boot-stage-container::-webkit-scrollbar-thumb {
    background: #39ff14 !important;
    border-radius: 4px !important;

body .dashboard-console::-webkit-scrollbar-track,
body .boot-stage-container::-webkit-scrollbar-track {
    background: #000 !important;

/* COLUMN 3: THE DOSSIER - THE CRITICAL FIX - FORCE VISIBILITY - DESKTOP ONLY */
@media (min-width: 768px) {
    body .dashboard-dossier,
    body .live-dossier,
    html .dashboard-dossier,
    html .live-dossier,
    .dashboard-dossier,
    .live-dossier {
        background: rgba(0, 15, 0, 0.95) !important; /* Darker, solid background */
        border-left: 4px solid #39ff14 !important; /* Bright edge - chunky border */
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        box-shadow: -10px 0 50px rgba(0,0,0,1) !important; /* Deep shadow to separate it */
        z-index: 100 !important; /* Higher z-index */
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        grid-column: 3 !important; /* Force it to be in the 3rd column */
        flex-shrink: 0 !important; /* Never shrink the dossier */
        order: 3 !important; /* Ensure it's last in flex order */
        /* Temporary debug: Add a subtle background pattern to make it visible */
        background-image: linear-gradient(90deg, rgba(57, 255, 20, 0.05) 0%, transparent 5%) !important;

/* Dossier Header - FORCE GREEN BAR */
body .dossier-header,
body .live-dossier-header,
html .dossier-header,
html .live-dossier-header {
    background: #39ff14 !important; /* Bright green header */
    color: #000 !important; /* Black text for contrast */
    padding: 15px !important;
    font-weight: 900 !important; /* Extra bold */
    text-align: center !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 4px solid #1a331a !important; /* Chunky border */

/* Dossier Body/Content - FORCE STYLING */
body .dossier-content,
body .dossier-frame,
body .dossier-body,
html .dossier-content,
html .dossier-frame,
html .dossier-body {
    padding: 20px !important;
    color: #39ff14 !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    font-family: 'Courier New', monospace !important;

/* --- UPGRADED DATA READOUT - Tactical Readout with Dotted Leaders --- */
.data-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important; /* Aligns text to bottom of dotted line */
    margin-bottom: 12px !important;
    font-size: 0.85rem !important;
    color: #2e8b57 !important; /* Darker green for labels */
    position: relative !important;
    min-height: 20px !important;

/* The dotted line filler - spans between label and value */
.data-row::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 4px !important;
    height: 0 !important;
    border-bottom: 1px dotted #1a441a !important;
    margin-left: 80px !important; /* Start after label */
    margin-right: 60px !important; /* End before value */
    opacity: 0.5 !important;
    z-index: 0 !important;
    pointer-events: none !important;

/* The Label (Left side) */
.data-row > span:first-child {
    background: #000 !important;
    padding-right: 10px !important;
    position: relative !important;
    z-index: 1 !important;
    color: #2e8b57 !important;
    min-width: 80px !important;

/* The Value (Bright Green, Right side) */
.data-val {
    color: #39ff14 !important;
    text-shadow: 0 0 5px rgba(57, 255, 20, 0.5) !important;
    font-weight: bold !important;
    background: #000 !important;
    padding-left: 10px !important;
    position: relative !important;
    z-index: 1 !important;
    order: 2 !important; /* Forces value to the right */
    min-width: 60px !important;
    text-align: right !important;

/* Biometric scan box */
.biometric-scan {
    border: 1px solid #335533 !important;
    padding: 10px !important;
    text-align: center !important;
    margin-top: 10px !important;
    background: rgba(0, 10, 0, 0.3) !important;

.biometric-scan-label {
    font-size: 0.7rem !important;
    color: #2e8b57 !important;
    margin-bottom: 5px !important;

.biometric-scan-pattern {
    height: 60px !important;
    background: repeating-linear-gradient(45deg, #051105, #051105 10px, #0a220a 10px, #0a220a 20px) !important;
    border: 1px solid #1a331a !important;

/* Scroll Frame - Ensure it works */
body .scroll-frame,
html .scroll-frame {
    min-height: 100% !important;
    height: auto !important;
    overflow-y: visible !important; /* Let parent handle scrolling */
    padding: 0 !important;
    box-sizing: border-box !important;

/* Screen container */
#character-creator-container {
    min-height: 100vh;
    padding: 20px;
    background: var(--surface-0, #121418);

/* ============================================
   CRT TURN-ON ANIMATION
   ============================================ */

@keyframes turn-on {
    0% {
        transform: scale(1, 0.8) translate3d(0, 0, 0);
        filter: brightness(30);
        opacity: 1;

    3.5% {
        transform: scale(1, 0.8) translate3d(0, 100%, 0);

    3.6% {
        transform: scale(1, 0.8) translate3d(0, -100%, 0);
        opacity: 1;

    9% {
        transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        filter: brightness(30);
        opacity: 0;

    11% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        filter: contrast(0) brightness(0);
        opacity: 0;

    100% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        filter: contrast(1) brightness(1.2) saturate(1.1);
        opacity: 1;

.crt-container {
    animation: turn-on 4s linear;
    animation-fill-mode: forwards;

/* ============================================
   TERMINAL BOOT SEQUENCE LAYOUT
   ============================================ */

/* ============================================
   TACTICAL DASHBOARD - Main Container
   ============================================ */

:root {
    --neon-green: #39ff14;
    --dark-bg: #0a0a0a;
    --terminal-border: 1px solid #335533;

/* MOBILE: Default flex column layout */
.tactical-dashboard,
.terminal-boot-sequence {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100vw;
    background: var(--dark-bg, #0a0a0a);
    font-family: 'Courier New', monospace;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 99999 !important;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    box-sizing: border-box;
    color: var(--neon-green, #39ff14);

/* DESKTOP: Tactical Dashboard "Cockpit" Mode - Panelized Layout */
@media (min-width: 768px) {
    .tactical-dashboard,
    .terminal-boot-sequence {
        display: grid !important;
        /* 200px Sidebar | Flexible Center | 320px Fixed Dossier - MATCHES HIGH-SPECIFICITY RULES */
        grid-template-columns: 200px 1fr 320px !important;
        grid-template-rows: 100vh !important; /* Lock to screen height */
        gap: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        
        /* Deep background with CRT texture overlay */
        background-color: #050a05 !important;
        background-image: 
            radial-gradient(circle at center, rgba(0, 50, 0, 0.1) 0%, #000 100%),
            linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
            linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)) !important;
        background-size: 100% 100%, 2px 2px, 3px 3px !important; /* CRT Texture */

@media (min-width: 1920px) {
    .terminal-boot-sequence {
        max-width: 1920px;
        left: 50%;
        margin-left: -960px; /* Half of max-width */

/* Scanline effect */
.terminal-boot-sequence::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 1;

/* ============================================
   NAVIGATION TREE / DASHBOARD SIDEBAR
   ============================================ */

/* COLUMN 1: SIDEBAR */
.dashboard-sidebar,
.boot-nav {
    width: 100%;
    background: var(--surface-1, #1A1D23);
    border-right: 1px solid #1a331a;
    padding-right: 15px;
    padding: 20px 15px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    overflow-y: auto;
    min-height: 100vh;
    box-sizing: border-box;

.system-boot {
    color: var(--signal-cyan, #00F0FF);

.kernel-info {
    color: var(--terminal-dim, #666);
    font-size: 12px;

@media (min-width: 768px) {
    .boot-nav {
        height: 100%;
        min-height: auto;
        overflow-y: auto;
        padding-right: 20px;

@media (min-width: 1200px) {
    .boot-nav {
        width: 100%;
        padding: 30px;
        border-right: 2px solid var(--signal-cyan, #00F0FF);
        border-bottom: none;
        height: auto;
        min-height: 100vh;
        box-sizing: border-box;

.nav-header,
.system-boot {
    color: var(--signal-cyan, #00F0FF);
    font-size: 10px; /* Reduced from 14px */
    margin-bottom: 8px; /* Reduced from 20px */
    text-transform: uppercase;
    letter-spacing: 1px; /* Reduced from 2px */
    font-weight: bold;

.nav-tree {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 0 0 auto; /* Don't grow, just take needed space */
    display: flex;
    flex-direction: column;
    gap: 4px; /* Tight spacing between items */

.nav-item {
    color: var(--terminal-dim, #666);
    font-size: 10px; /* Reduced from 12px */
    padding: 4px 0; /* Reduced from 8px */
    cursor: pointer;
    transition: color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Reduced from 1px */
    line-height: 1.3; /* Tighter line height */
    white-space: nowrap; /* Prevent wrapping */

.nav-item:hover {
    color: var(--signal-amber, #FFB800);

.nav-item.active {
    color: var(--signal-cyan, #00F0FF);
    animation: blink 1s ease-in-out infinite;

.nav-item.completed {
    color: var(--signal-emerald, #00E055);

.nav-footer,
.kernel-info {
    color: var(--terminal-dim, #666);
    font-size: 8px; /* Reduced from 10px */
    margin-top: 8px; /* Reduced from auto/20px */
    padding-top: 8px; /* Reduced from 20px */
    border-top: 1px solid var(--terminal-dim, #666);
    line-height: 1.2;

/* ============================================
   RESOURCE MONITOR (Left Sidebar Addition)
   ============================================ */

.resource-monitor {
    margin-top: 8px; /* Reduced from 30px */
    padding-top: 8px; /* Reduced from 20px */
    border-top: 1px solid var(--terminal-dim, #666);

.resource-monitor-header {
    color: var(--signal-cyan, #00F0FF);
    font-size: 9px; /* Reduced from 12px */
    margin-bottom: 6px; /* Reduced from 15px */
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Reduced from 1px */

.energy-graph {
    height: 50px; /* Reduced from 100px */
    background: var(--surface-2, #252A33);
    border: 1px solid var(--signal-amber, #FFB800);
    position: relative;
    overflow: hidden;
    margin-bottom: 6px; /* Reduced from 10px */

.energy-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, 
        var(--signal-emerald, #00E055) 0%,
        var(--signal-amber, #FFB800) 50%,
        var(--signal-crimson, #FF2A2A) 100%);
    transition: height 0.3s ease;
    border-top: 1px solid var(--signal-amber, #FFB800);

.energy-graph-label {
    position: absolute;
    top: 5px;
    left: 5px;
    color: var(--terminal-dim, #666);
    font-size: 10px;
    text-transform: uppercase;

/* ============================================
   LIVE DOSSIER (Right Column)
   ============================================ */

/* ============================================
   DASHBOARD DOSSIER / LIVE DOSSIER
   ============================================ */

.dashboard-dossier,
.live-dossier {
    background: var(--surface-1, #1A1D23);
    border: 1px solid var(--terminal-dim, #335533);
    padding: 20px;
    position: relative;
    z-index: 2;
    overflow-y: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

/* Desktop: Dossier as Physical Device */
@media (min-width: 768px) {
    .dashboard-dossier,
    .live-dossier {
        border: 1px solid #1a441a; /* Darker, less shiny border */
        background: #000;
        padding: 0; /* Content handles padding */
        display: flex;
        flex-direction: column;
        box-shadow: 0 0 3px rgba(26, 68, 26, 0.15); /* Very subtle, darker glow */
        position: relative;
        height: 100%;
        min-height: auto;
        overflow: hidden;

    /* Dossier header bar */
    .dossier-header,
    .live-dossier-header {
        background: #0d2e0d; /* Dark green instead of bright */
        color: #2e8b57; /* Muted green text instead of black */
        padding: 10px 15px;
        font-weight: bold;
        letter-spacing: 2px;
        text-transform: uppercase;
        font-size: 0.8rem;
        display: flex;
        justify-content: space-between;
        margin: 0;
        border-bottom: 1px solid #1a441a; /* Darker border */

    /* Dossier content area */
    .dossier-content,
    .dossier-frame {
        padding: 20px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 20px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #39ff14 #0a0a0a;

    .dossier-content::-webkit-scrollbar,
    .dossier-frame::-webkit-scrollbar {
        width: 6px;

    .dossier-content::-webkit-scrollbar-thumb,
    .dossier-frame::-webkit-scrollbar-thumb {
        background: #39ff14;
        border-radius: 3px;

/* Dossier frame wrapper */
.dossier-frame {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;

/* Confidential stamp */
.stamp-confidential {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 3rem;
    color: rgba(57, 255, 20, 0.1);
    pointer-events: none;
    font-weight: bold;
    border: 4px solid rgba(57, 255, 20, 0.1);
    padding: 10px;
    z-index: 0;

/* Launch button */
.launch-btn {
    margin-top: auto;
    background: var(--neon-green, #39ff14);
    color: black;
    border: none;
    padding: 15px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
    transition: all 0.3s ease;

.launch-btn:hover {
    background: white;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.5);

.live-dossier-header {
    color: var(--signal-cyan, #00F0FF);
    font-size: 18px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid var(--signal-cyan, #00F0FF);
    padding-bottom: 10px;

/* Mobile: Keep original styling */
@media (max-width: 767px) {
    .live-dossier-header {
        color: var(--signal-cyan, #00F0FF);
        font-size: 18px;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 2px;
        border-bottom: 2px solid var(--signal-cyan, #00F0FF);
        padding-bottom: 10px;
        background: transparent;
        padding: 10px 0;

/* Confidential Stamp */
.dossier-id-card::before {
    content: "CONFIDENTIAL";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 3rem;
    color: rgba(0, 255, 0, 0.1);
    pointer-events: none;
    font-weight: bold;
    border: 4px solid rgba(0, 255, 0, 0.1);
    padding: 10px;
    z-index: 0;

.dossier-id-card {
    background: rgba(0, 20, 0, 0.3);
    border: 2px solid var(--terminal-green, #00FF00);
    padding: 20px;
    margin-bottom: 20px;
    min-height: 200px;
    position: relative;

.dossier-id-card::after {
    content: "CLASSIFIED";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 3rem;
    color: var(--signal-crimson, #FF2A2A);
    opacity: 0.1;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 5px;

.dossier-field {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed var(--terminal-dim, #666);
    padding-bottom: 8px;

.dossier-field-label {
    color: var(--terminal-dim, #666);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;

.dossier-field-value {
    color: var(--terminal-green, #00FF00);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;

.dossier-field-value.empty {
    color: var(--terminal-dim, #666);
    font-style: italic;

.dossier-stats-chart {
    margin: 20px 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--signal-cyan, #00F0FF);

.stat-radar {
    width: 100%;
    height: 200px;
    position: relative;

.stat-radar svg {
    width: 100%;
    height: 100%;

.stat-radar-line {
    stroke: var(--signal-cyan, #00F0FF);
    stroke-width: 2;
    fill: rgba(0, 240, 255, 0.1);

.stat-radar-point {
    fill: var(--signal-cyan, #00F0FF);
    r: 4;

.stat-radar-label {
    fill: var(--terminal-green, #00FF00);
    font-size: 12px;
    text-anchor: middle;

.dossier-history-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--terminal-dim, #666);

.dossier-log {
    margin-bottom: 15px;

.dossier-log p {
    margin: 8px 0;
    font-size: 12px;
    color: var(--terminal-green, #00FF00);

.dossier-history-item {
    margin-bottom: 10px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-left: 2px solid var(--signal-emerald, #00E055);
    font-size: 12px;

.dossier-history-item.empty {
    border-left-color: var(--terminal-dim, #666);
    color: var(--terminal-dim, #666);
    font-style: italic;

.dossier-preview-class {
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 176, 0, 0.1);
    border: 2px dashed var(--signal-amber, #FFB800);
    display: none;

.dossier-preview-class.active {
    display: block;

.dossier-preview-class-name {
    color: var(--signal-amber, #FFB800);
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;

.dossier-preview-class-desc {
    color: var(--terminal-dim, #666);
    font-size: 12px;
    line-height: 1.6;

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }

/* ============================================
   STAGE CONTAINER
   ============================================ */

/* ============================================
   DASHBOARD CONSOLE / STAGE CONTAINER
   ============================================ */

.dashboard-console,
.boot-stage-container {
    flex: 1;
    padding: 0;
    position: relative;
    z-index: 2;
    overflow: hidden;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
    background: var(--surface-0, #121418);
    border: var(--terminal-border, 1px solid #335533);

/* Scrollable frame inside console */
.scroll-frame {
    height: 100%;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--neon-green, #39ff14) transparent;

.scroll-frame::-webkit-scrollbar {
    width: 8px;

.scroll-frame::-webkit-scrollbar-track {
    background: transparent;

.scroll-frame::-webkit-scrollbar-thumb {
    background: var(--neon-green, #39ff14);
    border-radius: 4px;

/* Module groups - removed, stages are direct children now */

/* Terminal cards - match blueprint styling */
.terminal-card {
    border: var(--terminal-border, 1px solid #335533);
    padding: 20px;
    margin-bottom: 20px;
    background: rgba(0, 20, 0, 0.3);
    position: relative;

/* CRITICAL: Only show active stage, hide all others */
/* CRITICAL: One screen at a time - hide all stages by default */
.terminal-card.boot-stage,
.boot-stage {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;

/* CRITICAL: Only show the active stage */
.terminal-card.boot-stage.active,
.boot-stage.active {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
    animation: fadeIn 0.5s ease-in;

/* CRITICAL: Ensure completed stages stay hidden */
.terminal-card.boot-stage.completed,
.boot-stage.completed {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;

/* Desktop: Console column with border and scrollable frame */
@media (min-width: 768px) {
    /* COLUMN 2: CENTER CONSOLE (The Workspace) */
    .dashboard-console,
    .boot-stage-container {
        /* Create a distinct 'well' for the inputs */
        border: 1px solid #335533 !important;
        background: rgba(0, 15, 0, 0.5) !important; /* Semi-transparent dark green */
        padding: 20px !important;
        overflow-y: auto !important; /* Internal scrolling only */
        position: relative !important;
        height: 100% !important;
        min-height: auto !important;
        box-sizing: border-box !important;
        
        /* Custom Scrollbar */
        scrollbar-width: thin;
        scrollbar-color: #39ff14 #0a0a0a;

    .dashboard-console::-webkit-scrollbar,
    .boot-stage-container::-webkit-scrollbar {
        width: 8px;

    .dashboard-console::-webkit-scrollbar-track,
    .boot-stage-container::-webkit-scrollbar-track {
        background: #0a0a0a;

    .dashboard-console::-webkit-scrollbar-thumb,
    .boot-stage-container::-webkit-scrollbar-thumb {
        background: #39ff14;
        border-radius: 4px;

    /* Scrollable content wrapper */
    .scroll-frame {
        height: 100%;
        overflow-y: auto;
        padding: 20px;
        box-sizing: border-box;
        scrollbar-width: thin;
        scrollbar-color: #39ff14 #0a0a0a;

    .scroll-frame::-webkit-scrollbar {
        width: 8px;

    .scroll-frame::-webkit-scrollbar-track {
        background: #0a0a0a;

    .scroll-frame::-webkit-scrollbar-thumb {
        background: #39ff14;
        border-radius: 4px;

@media (min-width: 1200px) {
    .boot-stage-container {
        padding: 40px 60px;
        max-width: 100%;
        margin: 0;
        border-right: 2px solid var(--signal-cyan, #00F0FF);
        height: auto;
        min-height: 100vh;
        box-sizing: border-box;

@media (min-width: 1600px) {
    .boot-stage-container {
        padding: 50px 80px;

/* CRITICAL: One screen at a time - additional rule to ensure stages are hidden */
.boot-stage,
.terminal-card.boot-stage {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

.boot-stage.active,
.terminal-card.boot-stage.active {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;

/* Terminal card styling - ensure cards work with stages */
/* Removed duplicate - using definition above */

/* Desktop: Make stages more compact and dashboard-like */
@media (min-width: 1200px) {
    /* Make stages more compact on desktop - focused module view */
    .boot-stage.active {
        padding: 25px 0;
        max-width: 100%;
        border-left: 2px solid var(--signal-cyan, #00F0FF);
        padding-left: 30px;
        margin-left: 0;

    .boot-stage.active .terminal-header {
        font-size: 22px;
        margin-bottom: 25px;
        border-bottom: 1px solid var(--terminal-dim, #666);
        padding-bottom: 10px;

    /* Compact form elements */
    .boot-stage.active .input-group {
        margin-bottom: 20px;

    .boot-stage.active .terminal-actions {
        margin-top: 25px;
        padding-top: 20px;
        border-top: 1px solid var(--terminal-dim, #666);

    /* Stage 2: Make power meter more compact and prominent */
    .boot-stage.active #stage-2 .power-meter {
        margin-bottom: 25px;
        padding: 15px 20px;
        background: rgba(0, 240, 255, 0.05);
        border: 1px solid var(--signal-cyan, #00F0FF);

    /* Stage 3: Make decrypt grid more compact and grid-like */
    .boot-stage.active #stage-3 .decrypt-grid {
        gap: 12px;
        display: grid;
        grid-template-columns: 1fr;

    .boot-stage.active #stage-3 .decrypt-row {
        padding: 12px 15px;
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid var(--terminal-dim, #666);
        transition: all 0.2s ease;

    .boot-stage.active #stage-3 .decrypt-row:hover {
        border-color: var(--signal-cyan, #00F0FF);
        background: rgba(0, 240, 255, 0.05);

    /* Stage 3b: Make loadout grid more compact */
    .boot-stage.active #stage-3b .loadout-grid {
        gap: 30px;

    /* Stage 4: Final review should be centered and prominent */
    .boot-stage.active #stage-4 {
        text-align: center;
        padding: 40px 20px;

/* Multi-column layout for desktop */
@media (min-width: 1200px) {
    /* Stage 2: Stats - two columns with power meter spanning */
    .slider-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;

    .power-meter {
        grid-column: 1 / -1;

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }

.terminal-header,
.terminal-card h3 {
    color: var(--signal-cyan, #00F0FF);
    font-size: 24px;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 10px var(--signal-cyan, #00F0FF);

@media (min-width: 1200px) {
    .terminal-header {
        font-size: 28px;
        margin-bottom: 30px;

/* ============================================
   STAGE 1: IDENTITY
   ============================================ */

.input-group {
    margin-bottom: 30px;

@media (min-width: 1200px) {
    .input-group {
        margin-bottom: 40px;

.input-group label {
    display: block;
    color: var(--signal-cyan, #00F0FF);
    font-size: 14px;
    margin-bottom: 10px;
    text-transform: uppercase;

.alias-row {
    display: flex;
    gap: 10px;
    align-items: center;

.terminal-input {
    flex: 1;
    background: var(--surface-1, #1A1D23);
    border: 2px solid var(--signal-cyan, #00F0FF);
    color: var(--terminal-green, #00FF00);
    padding: 12px;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;

.terminal-input:focus {
    outline: none;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);

.terminal-input::placeholder {
    color: var(--terminal-dim, #666);
    animation: blink 1s ease-in-out infinite;

/* ============================================
   STAGE 2: STAT ALLOCATION
   ============================================ */

.power-meter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--surface-1, #1A1D23);
    border: 2px solid var(--signal-amber, #FFB800);
    margin-bottom: 30px;
    font-size: 18px;

@media (min-width: 1200px) {
    .power-meter {
        padding: 30px 40px;
        margin-bottom: 40px;
        font-size: 20px;

    #points-display {
        font-size: 48px;

.power-meter span:first-child {
    color: var(--terminal-dim, #666);
    text-transform: uppercase;

#points-display {
    font-size: 32px;
    font-weight: bold;
    color: var(--signal-amber, #FFB800);

.slider-group {
    margin-bottom: 30px;

@media (min-width: 1200px) {
    .slider-group {
        margin-bottom: 40px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;

    .slider-row {
        padding: 20px;
        margin-bottom: 0;

/* Stage 2: Clean Card-Based Stat Allocation */
.stage-2-container {
    max-width: 900px;
    margin: 0 auto;

.power-meter {
    background: rgba(0, 20, 0, 0.4);
    border: 2px solid #1a441a;
    border-radius: 4px;
    padding: 20px 30px;
    margin-bottom: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;

.power-meter-label {
    color: #2e8b57;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;

.power-meter-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;

.power-meter-value .text-glow {
    font-size: 3rem;
    font-weight: bold;
    color: #39ff14;
    text-shadow: 0 0 20px rgba(57, 255, 20, 0.8);

.power-meter-unit {
    color: #2e8b57;
    font-size: 1.2rem;

/* Stat Allocation Grid - 3 cards side by side */
.stat-allocation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 40px;

.stat-card {
    background: rgba(0, 15, 0, 0.5);
    border: 2px solid #1a441a;
    border-radius: 4px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: all 0.3s ease;

.stat-card:hover {
    border-color: #2e8b57;
    background: rgba(0, 20, 0, 0.6);

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;

.stat-name {
    font-size: 1.4rem;
    font-weight: bold;
    color: #39ff14;
    text-transform: uppercase;
    letter-spacing: 1px;

.stat-value-display {
    font-size: 2rem;
    font-weight: bold;
    min-width: 50px;
    text-align: right;

.stat-subtitle {
    font-size: 0.75rem;
    color: #2e8b57;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: -10px;
    margin-bottom: 5px;

.stat-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;

.btn-stat-adjust {
    min-width: 40px;
    height: 40px;
    background: rgba(26, 68, 26, 0.5);
    border: 1px solid #1a441a;
    color: #39ff14;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

.btn-stat-adjust:hover {
    background: rgba(57, 255, 20, 0.2);
    border-color: #39ff14;
    transform: scale(1.1);

.btn-stat-adjust:active {
    transform: scale(0.95);

.stat-slider {
    flex: 1;
    height: 8px;
    background: var(--surface-2, #252A33);
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
    transition: all 0.3s ease;

/* Legacy support - keep old classes for backwards compatibility */
.slider-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--surface-1, #1A1D23);
    border-left: 4px solid var(--signal-cyan, #00F0FF);

.slider-row label {
    min-width: 200px;
    color: var(--terminal-green, #00FF00);
    text-transform: uppercase;
    font-size: 14px;

/* Desktop: Slider container for side-by-side layout */
.stat-slider-container {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;

.stat-slider {
    flex: 1;
    height: 8px;
    background: var(--surface-2, #252A33);
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
    transition: all 0.3s ease;

.stat-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--signal-cyan, #00F0FF);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px var(--signal-cyan, #00F0FF);
    transition: all 0.3s ease;

.stat-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--signal-cyan, #00F0FF);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px var(--signal-cyan, #00F0FF);
    transition: all 0.3s ease;

/* Color-coded slider states */
.stat-slider.safe {
    border: 1px solid var(--signal-emerald, #00E055);

.stat-slider.safe::-webkit-slider-thumb {
    background: var(--signal-emerald, #00E055);
    box-shadow: 0 0 10px var(--signal-emerald, #00E055);

.stat-slider.safe::-moz-range-thumb {
    background: var(--signal-emerald, #00E055);
    box-shadow: 0 0 10px var(--signal-emerald, #00E055);

.stat-slider.warning {
    border: 1px solid var(--signal-amber, #FFB800);
    animation: pulse-warning 1s ease-in-out infinite;

.stat-slider.warning::-webkit-slider-thumb {
    background: var(--signal-amber, #FFB800);
    box-shadow: 0 0 15px var(--signal-amber, #FFB800);

.stat-slider.warning::-moz-range-thumb {
    background: var(--signal-amber, #FFB800);
    box-shadow: 0 0 15px var(--signal-amber, #FFB800);

.stat-slider.error {
    border: 1px solid var(--signal-crimson, #FF2A2A);
    animation: pulse-error 0.5s ease-in-out infinite;

.stat-slider.error::-webkit-slider-thumb {
    background: var(--signal-crimson, #FF2A2A);
    box-shadow: 0 0 20px var(--signal-crimson, #FF2A2A);

.stat-slider.error::-moz-range-thumb {
    background: var(--signal-crimson, #FF2A2A);
    box-shadow: 0 0 20px var(--signal-crimson, #FF2A2A);

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }

@keyframes pulse-error {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }

.slider-row.warning .stat-value {
    color: var(--signal-amber, #FFB800);

.slider-row.error .stat-value {
    color: var(--signal-crimson, #FF2A2A);
    animation: shake 0.3s ease-in-out;

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }

.stat-value {
    min-width: 50px;
    text-align: right;
    font-size: 24px;
    font-weight: bold;

/* ============================================
   STAGE 3: HISTORY DECRYPT
   ============================================ */

.decrypt-grid {
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;

@media (min-width: 1200px) {
    .decrypt-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 40px;

.decrypt-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
    padding: 15px;
    background: var(--surface-1, #1A1D23);
    border-left: 4px solid var(--signal-emerald, #00E055);

.decrypt-output {
    flex: 1;
    color: var(--terminal-dim, #666);
    font-size: 16px;
    min-height: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;

.decrypt-output.text-emerald {
    color: var(--signal-emerald, #00E055);
    text-shadow: 0 0 10px var(--signal-emerald, #00E055);

.text-dim {
    opacity: 0.5;

/* ============================================
   STAGE 4: DOSSIER
   ============================================ */

.dossier-preview {
    border: 2px solid var(--terminal-green, #00FF00);
    background: rgba(0, 20, 0, 0.5);
    padding: 30px;
    margin-bottom: 30px;
    font-family: 'Courier New', monospace;
    position: relative;
    min-height: 400px;

@media (min-width: 1200px) {
    .dossier-preview {
        padding: 50px;
        margin-bottom: 40px;
        min-height: 500px;

.dossier-preview::after {
    content: "CONFIDENTIAL";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 4rem;
    color: var(--signal-crimson, #FF2A2A);
    opacity: 0.2;
    border: 4px solid var(--signal-crimson, #FF2A2A);
    padding: 10px 40px;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 5px;

.dossier-header {
    color: var(--signal-cyan, #00F0FF);
    font-size: 20px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid var(--signal-cyan, #00F0FF);
    padding-bottom: 10px;

.dossier-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed var(--terminal-dim, #666);
    padding: 12px 0;

.dossier-label {
    color: var(--terminal-dim, #666);
    text-transform: uppercase;
    letter-spacing: 1px;

.dossier-value {
    color: var(--terminal-green, #00FF00);
    font-weight: bold;
    text-transform: uppercase;

.dossier-loading {
    color: var(--signal-amber, #FFB800);
    text-align: center;
    padding: 40px;
    animation: blink 1s ease-in-out infinite;

.dossier-status {
    color: var(--signal-emerald, #00E055);
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    border-top: 2px solid var(--signal-emerald, #00E055);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 18px;

.text-center {
    text-align: center;

.text-blink {
    animation: blink 1s ease-in-out infinite;

.boot-stage.completed {
    opacity: 0.5;
    pointer-events: none;

/* ============================================
   LOADOUT STAGE
   ============================================ */

.loadout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;

@media (min-width: 1200px) {
    .loadout-grid {
        grid-template-columns: 1fr 1.5fr;
        gap: 50px;
        margin-bottom: 40px;

.role-column label,
.gear-column label {
    display: block;
    color: var(--signal-cyan, #00F0FF);
    font-size: 14px;
    margin-bottom: 15px;
    text-transform: uppercase;

/* Holographic Chip Container */
/* ============================================
   VOID MONOLITHS - Step 4 Class Selection
   ============================================ */

/* --- LAYOUT GRID --- */
.monolith-grid {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* This creates 3 equal columns that stretch to fill space */
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 20px !important; /* Big gap = Negative Space */
    margin-top: 20px !important;
    height: 300px !important; /* Fixed height makes them look like pillars */

/* Legacy role-selector support */
.role-selector.monolith-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-top: 20px !important;
    height: 300px !important;

/* --- THE CARD (BASE) --- */
.monolith-card {
    position: relative !important;
    cursor: pointer !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* Transparent background is key for negative space */
    background: transparent !important; 
    border: 1px solid #1a331a !important; /* Very subtle border */
    transition: all 0.4s ease !important;
    display: flex !important;
    flex-direction: column !important;
    user-select: none !important;
    min-height: 300px !important;

/* Hide the ugly radio circle */
.monolith-card input { 
    display: none; 

/* --- CONTENT STYLING --- */
.monolith-card .card-content {
    height: 100% !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Center everything */
    justify-content: center !important;
    text-align: center !important;
    opacity: 0.5 !important; /* Dim by default (Focus Management) */
    transition: opacity 0.3s !important;

.icon-layer {
    font-size: 2.5rem;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 5px rgba(57,255,20,0.2));

.title-layer {
    font-size: 1.2rem;
    color: #39ff14;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-weight: bold;

.stat-layer {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 0.7rem;
    color: #2e8b57;

.stat-layer span {
    border: 1px solid #2e8b57;
    padding: 2px 6px;

.desc-layer {
    font-size: 0.8rem;
    color: #88cc88;
    line-height: 1.4;
    max-width: 80%;
    transition: opacity 0.2s ease;
    /* Hide description when inactive to reduce clutter */
    opacity: 0; 
    transform: translateY(10px);
    transition: all 0.3s;

/* --- INTERACTION STATES --- */

/* Hover: Slight wake up */
.monolith-card:hover {
    border-color: #447744;

.monolith-card:hover .card-content {
    opacity: 0.8;

/* SELECTED: The "Power On" Moment */
.monolith-card input:checked + .card-content {
    opacity: 1; /* Full Brightness */

.monolith-card input:checked + .card-content .desc-layer {
    opacity: 1; /* Reveal Description */
    transform: translateY(0);

.monolith-card:has(input:checked) {
    border-color: #39ff14;
    /* Tighter, less intense glow */
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.15);
    /* Subtle gradient fill */
    background: linear-gradient(to bottom, rgba(57,255,20,0.02), transparent);

/* Fallback for browsers that don't support :has() */
.monolith-card.selected {
    border-color: #39ff14;
    /* Tighter, less intense glow */
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.15);
    /* Subtle gradient fill */
    background: linear-gradient(to bottom, rgba(57,255,20,0.02), transparent);

.monolith-card.selected .card-content {
    opacity: 1;

.monolith-card.selected .card-content .desc-layer {
    opacity: 1;
    transform: translateY(0);

/* Full description layer styling - ALWAYS VISIBLE */
.full-desc-layer {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    color: rgba(57, 255, 20, 0.95) !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    border-top: 2px solid rgba(57, 255, 20, 0.5) !important;
    transition: all 0.3s ease !important;
    display: block !important; /* Always visible */
    opacity: 1 !important; /* Fully visible */
    max-width: 100% !important;
    word-wrap: break-word !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 1 !important;
    background: rgba(0, 20, 0, 0.2) !important; /* Slight background to make it stand out */
    border-radius: 4px !important;
    margin-bottom: 8px !important;

.monolith-card:hover .full-desc-layer,
.monolith-card:has(input:checked) .full-desc-layer {
    display: block !important;
    opacity: 1 !important; /* Full opacity on hover/selection */
    animation: fadeIn 0.3s ease;

/* Make descriptions more visible on cards */
.monolith-card .card-content {
    min-height: auto !important;

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);

    to {
        opacity: 1;
        transform: translateY(0);

/* --- SCANLINE (Optional Flair) --- */
.scan-line {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 5px;
    background: #39ff14;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 0 10px #39ff14;

.monolith-card input:checked ~ .scan-line,
.monolith-card.selected .scan-line {
    opacity: 1;

/* Step container and section title */
.step-container {
    margin-bottom: 30px;

.section-title {
    color: #39ff14;
    font-size: 1rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;

/* Legacy support for old holo-chip structure */
.holo-chip-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
    height: 300px;

/* Hover Effects */
.holo-chip:hover .chip-inner {
    background: rgba(57, 255, 20, 0.1);
    border-color: #39ff14;
    transform: translateY(-2px);

/* Selected State (When Radio is Checked) */
.holo-chip input:checked + .chip-inner {
    background: rgba(57, 255, 20, 0.2);
    border: 1px solid #39ff14;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.15);

.holo-chip input:checked + .chip-inner .chip-title {
    text-shadow: 0 0 10px #39ff14;

/* Content Styling */
.chip-header,
.chip-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5px;
    font-size: 0.7rem;
    color: #447744;

.chip-id {
    font-size: 0.7rem;
    color: #447744;
    letter-spacing: 1px;

.chip-icon {
    font-size: 1.2rem;
    opacity: 0.7;

.chip-title {
    color: #39ff14;
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(57, 255, 20, 0.5);

.chip-stats {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;

.chip-stats span,
.stat-tag {
    font-size: 0.6rem;
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid #1a331a;
    color: #88cc88;
    padding: 2px 4px;
    margin-right: 5px;
    border-radius: 2px;

/* Scanline Animation */
.chip-scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background: linear-gradient(to bottom, transparent, rgba(57, 255, 20, 0.1), transparent);
    animation: scan 3s infinite linear;
    pointer-events: none;
    z-index: 1;

@keyframes scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(50%); }

/* Optional: Add a subtle moving shine */
.chip-inner::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 45%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 55%
    );
    transform: rotate(45deg);
    animation: hologram-shine 3s infinite linear;
    pointer-events: none;

@keyframes hologram-shine {
    0% { transform: translateY(-100%) rotate(45deg); }
    100% { transform: translateY(100%) rotate(45deg); }

/* Legacy role-card support (for compatibility) */
.role-card {
    border: 2px solid var(--terminal-dim, #666);
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--surface-1, #1A1D23);
    position: relative;

.role-card:hover {
    border-color: var(--terminal-green, #00FF00);
    background: rgba(0, 50, 0, 0.2);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
    transform: translateY(-2px);

.role-card.selected {
    border-color: var(--signal-amber, #FFB800);
    background: rgba(255, 176, 0, 0.1);
    box-shadow: 0 0 20px rgba(255, 176, 0, 0.4);

.role-name {
    color: var(--signal-amber, #FFB800);
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;

.role-desc {
    color: var(--terminal-dim, #666);
    font-size: 12px;
    font-style: italic;

.gear-column.disabled {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(1);

/* Ensure ship button row is always visible, even when gear panel is disabled */
.gear-row:has(#btn-roll-ship),
.gear-row:has([id="btn-roll-ship"]) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

/* Make ship button visible even when gear panel is disabled (user should see it exists) */
.gear-column.disabled .gear-row:has(#btn-roll-ship),
.gear-column.disabled .gear-row:has([id="btn-roll-ship"]) {
    opacity: 0.5 !important; /* Slightly more visible than other disabled items */
    pointer-events: auto !important; /* Allow clicking to show it needs role selection */

.gear-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dotted var(--terminal-dim, #666);
    padding-bottom: 10px;

.gear-row .gear-label {
    flex-shrink: 0;
    min-width: 80px;
    visibility: visible !important;
    display: inline-block !important;
    opacity: 1 !important;

.gear-label {
    width: 80px;
    color: var(--terminal-dim, #666);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
    visibility: visible !important;
    display: inline-block !important;
    opacity: 1 !important;

.btn-terminal.tiny {
    padding: 6px 12px;
    font-size: 11px;
    min-width: 100px;

/* ============================================
   DOSSIER ENHANCEMENTS
   ============================================ */

.dossier-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;

@media (min-width: 1200px) {
    .dossier-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        margin-bottom: 30px;

.dossier-col {
    display: flex;
    flex-direction: column;

.dossier-divider {
    color: var(--signal-cyan, #00F0FF);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 20px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--signal-cyan, #00F0FF);

.dossier-text {
    color: var(--terminal-green, #00FF00);
    line-height: 1.8;
    margin-bottom: 15px;

.dossier-footer {
    color: var(--signal-emerald, #00E055);
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    border-top: 2px solid var(--signal-emerald, #00E055);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 18px;

/* ============================================
   TERMINAL BUTTONS
   ============================================ */

.terminal-actions {
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
    grid-column: 1 / -1;

@media (min-width: 1200px) {
    .terminal-actions {
        margin-top: 40px;
        gap: 20px;

.btn-terminal {
    background: var(--surface-1, #1A1D23);
    border: 2px solid var(--signal-cyan, #00F0FF);
    color: var(--signal-cyan, #00F0FF);
    padding: 12px 24px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;

.btn-terminal:hover:not(:disabled) {
    background: var(--signal-cyan, #00F0FF);
    color: var(--surface-0, #121418);
    box-shadow: 0 0 20px var(--signal-cyan, #00F0FF);

.btn-terminal:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--terminal-dim, #666);
    color: var(--terminal-dim, #666);

.btn-terminal.small {
    padding: 8px 16px;
    font-size: 12px;

.btn-terminal.btn-amber {
    border-color: var(--signal-amber, #FFB800);
    color: var(--signal-amber, #FFB800);

.btn-terminal.btn-amber:hover:not(:disabled) {
    background: var(--signal-amber, #FFB800);
    color: var(--surface-0, #121418);
    box-shadow: 0 0 20px var(--signal-amber, #FFB800);

.text-glow {
    text-shadow: 0 0 10px currentColor;
    animation: pulse-glow 2s ease-in-out infinite;

@keyframes pulse-glow {
    0%, 100% { text-shadow: 0 0 10px currentColor; }
    50% { text-shadow: 0 0 20px currentColor, 0 0 30px currentColor; }

@keyframes flash-complete {
    0%, 100% { 
        opacity: 1;
        text-shadow: 0 0 10px var(--signal-emerald, #00E055);

    50% { 
        opacity: 0.8;
        text-shadow: 0 0 30px var(--signal-emerald, #00E055), 0 0 50px var(--signal-emerald, #00E055);
        transform: scale(1.05);

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-cyan { color: var(--signal-cyan, #00F0FF); }
.text-amber { color: var(--signal-amber, #FFB800); }
.text-emerald { color: var(--signal-emerald, #00E055); }
.text-crimson { color: var(--signal-crimson, #FF2A2A); }

/* ============================================
   RESPONSIVE
   ============================================ */

/* ============================================
   DESKTOP OPTIMIZATIONS
   ============================================ */

@media (min-width: 1200px) {
    .nav-header {
        font-size: 16px;
        margin-bottom: 30px;

    .nav-item {
        font-size: 14px;
        padding: 10px 0;

    .input-group label {
        font-size: 16px;
        margin-bottom: 15px;

    .terminal-input {
        padding: 15px;
        font-size: 18px;

    .slider-row label {
        min-width: 250px;
        font-size: 16px;

    .stat-value {
        font-size: 28px;
        min-width: 60px;

    .dossier-header {
        font-size: 24px;
        margin-bottom: 30px;

    .dossier-text {
        font-size: 16px;
        line-height: 2;

    .role-name {
        font-size: 18px;

    .role-desc {
        font-size: 14px;

    .btn-terminal {
        padding: 15px 30px;
        font-size: 16px;

@media (min-width: 1600px) {
    .boot-stage-container {
        padding: 100px 150px;

    .terminal-header {
        font-size: 40px;
        margin-bottom: 50px;

    .loadout-grid {
        gap: 60px;

/* ============================================
   MOBILE OPTIMIZATIONS (< 1024px)
   ============================================ */

@media (max-width: 767px) {
    /* Ensure mobile uses flex column layout */
    .terminal-boot-sequence:not(.tactical-dashboard) {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 0 !important;
        padding: 10px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;

    /* On mobile, still show dossier but stack it */
    .tactical-dashboard.terminal-boot-sequence {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        transform: translateZ(0) !important; /* Force hardware acceleration */

    /* Remove grid column assignments on mobile */
    .dashboard-sidebar,
    .boot-nav,
    .dashboard-console,
    .boot-stage-container,
    .dashboard-dossier,
    .live-dossier {
        grid-column: auto !important;
        width: 100% !important;
        max-width: 100% !important;

    /* Mobile: Sidebar becomes a compact header */
    .boot-nav,
    .dashboard-sidebar {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        max-height: 200px !important; /* Limit sidebar height on mobile */
        border-right: none !important;
        border-bottom: 2px solid var(--signal-cyan, #00F0FF) !important;
        padding: 10px 15px !important;
        order: 1;
        overflow-y: auto !important;

    /* Mobile: Compact navigation tree */
    .nav-tree {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        flex-wrap: wrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 5px 0;

    .nav-tree::-webkit-scrollbar {
        display: none;

    .nav-item {
        font-size: 10px;
        padding: 6px 10px;
        white-space: nowrap;
        min-width: fit-content;
        flex-shrink: 0;

    /* Hide resource monitor on mobile */
    .resource-monitor {
        display: none !important;

    /* Mobile: Main content area */
    .boot-stage-container,
    .dashboard-console {
        padding: 15px 10px !important;
        border: none !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        order: 2;
        flex: 1 1 auto;
        min-width: 0 !important;

    /* Mobile: Compact stage headers */
    .boot-stage.active .terminal-header {
        font-size: 18px !important;
        margin-bottom: 15px !important;

    /* Mobile: Touch-friendly buttons */
    .btn-terminal {
        min-height: 44px; /* iOS touch target minimum */
        padding: 12px 16px !important;
        font-size: 14px !important;
        touch-action: manipulation; /* Prevents double-tap zoom */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

    .btn-terminal.tiny {
        min-height: 44px;
        padding: 10px 16px !important;
        font-size: 12px !important;

    /* Mobile: Holographic chips - single column, larger touch targets */
    /* Mobile: Monolith cards stack vertically */
    .monolith-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
        gap: 15px !important;

    .monolith-card {
        min-height: 200px !important;
        height: auto !important;

    .monolith-card .card-content {
        min-height: 200px !important;

    /* Legacy role-selector support */
    .role-selector.monolith-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;

    .holo-chip {
        width: 100%;

    .chip-inner {
        height: 100px !important; /* Slightly smaller on mobile */
        padding: 12px !important;
        min-height: 80px;

    .chip-title {
        font-size: 1rem !important;

    /* Mobile: Keep Dossier visible but make it stack below */
    .dashboard-dossier,
    .live-dossier {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 250px !important;
        max-height: 50vh !important; /* Limit height on mobile */
        order: 3 !important;
        border-left: none !important;
        border-top: 2px solid #1a441a !important;
        display: flex !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-top: 20px !important;

    /* Mobile: Prevent layout shifts */
    .tactical-dashboard.terminal-boot-sequence {
        transform: translateZ(0) !important; /* Force hardware acceleration */
        will-change: auto !important;

    /* Mobile: Ensure proper scrolling container */
    .scroll-frame {
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding: 0 !important;

    /* Mobile: Terminal card spacing */
    .terminal-card {
        padding: 15px 12px !important;
        margin-bottom: 15px !important;

    /* Mobile: Better header sizing */
    .terminal-card h3,
    .terminal-header {
        font-size: 1.4rem !important;
        margin-bottom: 15px !important;
        line-height: 1.3 !important;

    /* Mobile: Compact loadout grid */
    .loadout-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;

    .dossier-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;

    /* Mobile: Better spacing for inputs */
    .terminal-input {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 12px 15px !important;

    /* Mobile: Polished Stat Allocation Section */
    .power-meter {
        padding: 15px 12px !important; /* Reduced padding */
        margin-bottom: 20px !important;
        font-size: 14px !important; /* Smaller font */
        display: flex !important;
        flex-direction: column !important; /* Stack on mobile */
        align-items: center !important;
        gap: 8px !important;
        border: 1px solid var(--signal-cyan, #00F0FF) !important;
        background: rgba(0, 240, 255, 0.05) !important;

    .power-meter span:first-child {
        font-size: 11px !important;
        letter-spacing: 1px !important;

    #points-display {
        font-size: 32px !important; /* Still prominent but smaller */
        line-height: 1;

    .slider-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important; /* Consistent spacing */
        margin-bottom: 20px !important;

    /* Mobile: Stack stat cards vertically */
    .stat-allocation-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 30px !important;

    .stat-card {
        padding: 20px 15px !important;

    .stat-name {
        font-size: 1.2rem !important;

    .stat-value-display {
        font-size: 1.8rem !important;

    .stat-controls {
        gap: 10px !important;

    .btn-stat-adjust {
        min-width: 44px !important; /* Touch-friendly */
        height: 44px !important;
        font-size: 1.3rem !important;

    .stat-slider {
        min-height: 48px !important; /* Touch-friendly */
        height: 48px !important;

    .slider-row {
        display: flex !important;
        flex-direction: column !important; /* Stack vertically on mobile */
        gap: 10px !important;
        margin-bottom: 0 !important; /* Gap handles spacing */
        padding: 12px !important; /* Reduced padding */
        background: rgba(0, 20, 0, 0.3) !important;
        border-left: 3px solid var(--signal-cyan, #00F0FF) !important; /* Thinner border */
        border-radius: 2px !important;

    .slider-row label {
        min-width: auto !important; /* Remove fixed width */
        width: 100% !important;
        font-size: 12px !important; /* Smaller label */
        margin-bottom: 0 !important;
        font-weight: bold !important;
        letter-spacing: 0.5px !important;
        color: var(--terminal-green, #00FF00) !important;

    /* Stat value and slider in a row */
    .slider-row .stat-slider-container {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;

    .stat-slider {
        flex: 1 !important;
        min-height: 48px !important; /* Larger touch target */
        height: 48px !important; /* Fixed height for consistency */
        touch-action: pan-x !important; /* Better touch scrolling */
        -webkit-appearance: none !important;
        appearance: none !important;
        background: var(--surface-2, #252A33) !important;
        border-radius: 4px !important;
        outline: none !important;

    /* Larger thumb for mobile */
    .stat-slider::-webkit-slider-thumb {
        width: 28px !important; /* Larger thumb */
        height: 28px !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background: var(--signal-cyan, #00F0FF) !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        box-shadow: 0 0 12px var(--signal-cyan, #00F0FF) !important;
        border: 2px solid #000 !important; /* Better contrast */

    .stat-slider::-moz-range-thumb {
        width: 28px !important;
        height: 28px !important;
        background: var(--signal-cyan, #00F0FF) !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        border: 2px solid #000 !important;
        box-shadow: 0 0 12px var(--signal-cyan, #00F0FF) !important;

    .stat-value {
        min-width: 50px !important;
        width: 50px !important; /* Fixed width */
        text-align: center !important; /* Center align */
        font-size: 20px !important; /* Readable but not huge */
        font-weight: bold !important;
        flex-shrink: 0 !important; /* Don't shrink */
        padding: 4px 8px !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border: 1px solid var(--terminal-dim, #666) !important;
        border-radius: 2px !important;

    /* Mobile: Compact decrypt grid */
    .decrypt-grid {
        gap: 10px !important;

    .decrypt-row {
        padding: 12px !important;
        min-height: 44px;

    /* Mobile: Compact gear rows */
    .gear-row {
        padding: 10px 0 !important;
        margin-bottom: 12px !important;

    /* Mobile: Ensure proper scrolling */
    .boot-stage-container {
        -webkit-overflow-scrolling: touch;

    /* Mobile: Remove desktop-only borders and effects */
    .boot-stage.active {
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;

/* ============================================
   VERY SMALL SCREENS (iPhone SE, etc. - < 400px)
   ============================================ */

@media (max-width: 399px) {
    /* Even more compact for very small screens */
    .tactical-dashboard.terminal-boot-sequence {
        padding: 5px !important;

    .boot-nav,
    .dashboard-sidebar {
        padding: 8px 10px !important;
        max-height: 150px !important;

    .nav-item {
        font-size: 9px !important;
        padding: 5px 8px !important;

    .boot-stage-container,
    .dashboard-console {
        padding: 10px 5px !important;

    .terminal-header {
        font-size: 16px !important;
        margin-bottom: 10px !important;

    .input-group {
        margin-bottom: 15px !important;

    .terminal-input {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 10px 12px !important;

    .btn-terminal {
        padding: 10px 14px !important;
        font-size: 13px !important;

    /* Very small screens: Even more compact stats */
    .power-meter {
        padding: 12px 10px !important;
        font-size: 12px !important;

    #points-display {
        font-size: 28px !important;

    .stat-allocation-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;

    .stat-card {
        padding: 15px 12px !important;

    .stat-name {
        font-size: 1.1rem !important;

    .stat-value-display {
        font-size: 1.5rem !important;

    .stat-controls {
        gap: 8px !important;

    .btn-stat-adjust {
        min-width: 36px !important;
        height: 36px !important;
        font-size: 1.2rem !important;

    .stat-slider {
        min-height: 44px !important;
        height: 44px !important;

    .stat-slider::-webkit-slider-thumb {
        width: 24px !important;
        height: 24px !important;

    .stat-slider::-moz-range-thumb {
        width: 24px !important;
        height: 24px !important;

    .slider-row {
        padding: 10px !important;
        gap: 8px !important;

    .slider-row label {
        font-size: 11px !important;

    .stat-value {
        font-size: 18px !important;
        width: 45px !important;
        min-width: 45px !important;

    .dashboard-dossier,
    .live-dossier {
        min-height: 250px !important;
        max-height: 40vh !important;
        padding: 10px !important;

    .dossier-header {
        font-size: 0.7rem !important;
        padding: 10px !important;

    .dossier-content {
        padding: 10px !important;
        font-size: 0.8rem !important;

    .monolith-card {
        min-height: 150px !important;

    .chip-inner {
        min-height: 70px !important;
        padding: 10px !important;

/* ============================================
   PIP-BOY DECORATIVE FLAVOR TEXT
   ============================================ */

/* Flavor Text positioning - fills empty space */
.ui-decor-top-right {
    position: absolute;
    top: 20px; 
    right: 340px; /* Left of the Dossier */
    font-size: 0.8rem;
    font-weight: bold;
    border: 1px solid #39ff14;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.8);
    color: #39ff14;
    z-index: 50;
    pointer-events: none;

.ui-decor-bottom-left {
    position: absolute;
    bottom: 20px; 
    left: 280px; /* Right of the Sidebar */
    font-size: 1.5rem; /* Big like HP display */
    font-weight: bold;
    color: #39ff14;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.8);
    z-index: 50;
    pointer-events: none;

.ui-decor-bottom-right {
    position: absolute;
    bottom: 20px; 
    right: 340px; /* Left of the Dossier */
    font-size: 1.5rem;
    font-weight: bold;
    color: #39ff14;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.8);
    z-index: 50;
    pointer-events: none;

/* Hide decorative text on mobile */
@media (max-width: 767px) {
    .ui-decor-top-right,
    .ui-decor-bottom-left,
    .ui-decor-bottom-right {
        display: none !important;

/* Show Live Dossier and Resource Monitor only on desktop */
@media (min-width: 768px) {
    .live-dossier {
        display: flex !important;

    .resource-monitor {
        display: block !important;

/* ============================================
   FINAL REVIEW DRAWER (Stage 4)
   ============================================ */

.final-review-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;

.final-review-summary {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
    min-height: 300px;

.final-review-summary .terminal-header {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #39ff14;
    text-shadow: 0 0 20px rgba(57, 255, 20, 0.5);

.summary-text {
    color: #88cc88;
    font-size: 1.1rem;
    margin-bottom: 30px;
    max-width: 600px;

#btn-toggle-dossier-drawer {
    padding: 15px 30px;
    font-size: 1rem;
    border: 2px solid #00F0FF;
    background: rgba(0, 240, 255, 0.1);
    color: #00F0FF;
    cursor: pointer;
    transition: all 0.3s ease;

#btn-toggle-dossier-drawer:hover {
    background: rgba(0, 240, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);

.drawer-icon {
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.3s ease;

/* Drawer Container */
.dossier-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    border-top: 2px solid #1a441a;
    box-shadow: 0 -1px 4px rgba(26, 68, 26, 0.2);
    z-index: 1000;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 80vh;
    display: flex;
    flex-direction: column;

/* Collapsed state - only show handle */
.dossier-drawer.collapsed {
    transform: translateY(calc(100% - 60px)); /* Show only 60px (handle height) */

/* Expanded state - show full drawer */
.dossier-drawer.expanded {
    transform: translateY(0);

/* Drawer Handle */
.drawer-handle {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    cursor: pointer;
    background: rgba(57, 255, 20, 0.1);
    border-bottom: 1px solid #39ff14;
    user-select: none;
    padding: 0 20px;
    flex-shrink: 0;

.drawer-handle:hover {
    background: rgba(57, 255, 20, 0.15);

.handle-line {
    flex: 1;
    height: 2px;
    background: #39ff14;
    opacity: 0.5;

.handle-text {
    color: #39ff14;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;

/* Drawer Content */
.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    max-height: calc(80vh - 60px);
    background: #000;

.drawer-content .dossier-preview {
    margin-bottom: 20px;

.drawer-content .terminal-actions {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    border-top: 1px solid #335533;

/* Desktop: Drawer appears from bottom, takes up less space */
@media (min-width: 768px) {
    .dossier-drawer {
        left: auto;
        right: 0;
        width: 600px;
        max-width: 90vw;

    .dossier-drawer.collapsed {
        transform: translateY(calc(100% - 50px)); /* Smaller handle on desktop */

    .drawer-handle {
        height: 50px;

    .drawer-content {
        max-height: calc(80vh - 50px);

/* Mobile: Full width drawer */
@media (max-width: 767px) {
    .dossier-drawer {
        left: 0;
        right: 0;
        width: 100%;

    .final-review-summary {
        padding: 20px 15px;
        min-height: 200px;

    .final-review-summary .terminal-header {
        font-size: 1.5rem;

    .summary-text {
        font-size: 1rem;

    #btn-toggle-dossier-drawer {
        padding: 12px 24px;
        font-size: 0.9rem;

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}