/**
 * ============================================================
 *  PROTOCOL: ZERO_DAY v5.1
 *  BARRY_OS TERMINAL THEME
 *  "Junkyard Cyberpunk / BIOS Terminal Aesthetic"
 * ============================================================
 */

/* ========== ROOT VARIABLES ========== */
:root {
    /* Base colors */
    --bg: #050505;
    --bg-dark: #020202;
    --bg-panel: rgba(5, 5, 5, 0.95);
    
    /* Terminal greens */
    --green: #2CFF3E;
    --green-dim: rgba(44, 255, 62, 0.3);
    --green-dark: #0a1f0a;
    --green-glow: 0 0 10px rgba(44, 255, 62, 0.5);
    
    /* Danger/Alert */
    --red: #FF3B3B;
    --red-dim: rgba(255, 59, 59, 0.3);
    
    /* Warning */
    --orange: #FF4A12;
    --orange-dim: rgba(255, 74, 18, 0.3);
    
    /* Info */
    --blue: #44AAFF;
    --blue-dim: rgba(68, 170, 255, 0.3);
    
    /* Accent - Barry brass/gold */
    --brass: #C9A227;
    --brass-dim: rgba(201, 162, 39, 0.3);
    --yellow: #FFD700;
    --yellow-dim: rgba(255, 215, 0, 0.3);
    
    /* Singularity */
    --purple: #9C27B0;
    --purple-dim: rgba(156, 39, 176, 0.3);
    
    /* Neutrals */
    --white: #E8E8E8;
    --gray: #8A8A8A;
    --gray-dark: #2A2A2A;
    --gray-darker: #1a1a1a;
    
    /* Panel styling */
    --panel-border: rgba(44, 255, 62, 0.3);
    --panel-border-strong: rgba(44, 255, 62, 0.6);
    --panel-glow: 0 0 20px rgba(44, 255, 62, 0.15);
    
    /* Effects */
    --scanline-opacity: 0.04;
    --noise-opacity: 0.03;
    --glitch-red: #ff0040;
    
    /* Fonts */
    --font-display: 'VT323', monospace;
    --font-mono: 'Roboto Mono', 'Courier New', monospace;
    
    /* Layer colors */
    --layer-social: #4CAF50;
    --layer-finance: #FFD700;
    --layer-infra: #FF6B35;
    --layer-gov: #9C27B0;
    --layer-mil: #F44336;
}

/* ========== THEME CLASS ========== */
.theme-terminal {
    --bg: #050505;
    --panel-bg: rgba(0, 0, 0, 0.92);
}

/* ========== RESET ========== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    font-family: var(--font-mono);
    color: var(--white);
}

/* Selection */
::selection {
    background: var(--green);
    color: var(--bg);
}
::-moz-selection {
    background: var(--green);
    color: var(--bg);
}

/* ========== GAME WRAPPER ========== */
.game-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    background: var(--bg);
}

/* ========== HEADER - BARRY_OS BAR ========== */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: linear-gradient(180deg, 
        rgba(10, 10, 10, 0.98) 0%, 
        rgba(5, 5, 5, 0.95) 100%
    );
    border-bottom: 2px solid var(--green);
    box-shadow: var(--green-glow), inset 0 -1px 0 rgba(44, 255, 62, 0.1);
    flex-shrink: 0;
    z-index: 100;
    position: relative;
}

/* Scanline effect on header */
.game-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
    );
    pointer-events: none;
    opacity: var(--scanline-opacity);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-center {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Barry Avatar */
.barry-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--brass);
    box-shadow: 0 0 10px var(--brass-dim);
    transition: all 0.3s ease;
    object-fit: cover;
}

.barry-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--brass);
}

.barry-avatar.angry {
    border-color: var(--red);
    box-shadow: 0 0 15px var(--red-dim);
    animation: avatarPulse 0.5s ease-in-out infinite;
}

.barry-avatar.based {
    border-color: var(--green);
    box-shadow: 0 0 20px var(--green-dim);
}

.barry-avatar.cooked {
    border-color: var(--orange);
    filter: saturate(0.5);
}

@keyframes avatarPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Title Stack */
.title-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.game-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--green);
    letter-spacing: 2px;
    text-shadow: var(--green-glow);
    line-height: 1;
}

.header-subline {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--gray);
    letter-spacing: 1px;
}

.header-subline .cursor {
    color: var(--green);
    animation: cursorBlink 1s step-end infinite;
}

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

#header-status {
    color: var(--green);
}

/* Difficulty Badge */
.difficulty-badge {
    font-family: var(--font-display);
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 2px;
    background: var(--brass);
    color: #000;
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 0 8px var(--brass-dim);
}

.difficulty-badge.easy { background: var(--green); }
.difficulty-badge.hard { background: var(--orange); }
.difficulty-badge.extreme { background: var(--red); color: var(--white); }
.difficulty-badge.nightmare { background: var(--purple); color: var(--white); }

/* Day Counter & Timer */
.day-counter {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--brass);
    text-shadow: 0 0 8px var(--brass-dim);
}

.timer {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--gray);
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--gray-dark);
}

/* Header Buttons - Terminal Style */
.header-btn {
    background: transparent;
    border: 1px solid var(--panel-border);
    color: var(--green);
    padding: 6px 12px;
    font-family: var(--font-display);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    letter-spacing: 1px;
}

.header-btn::before {
    content: '[';
    margin-right: 4px;
    opacity: 0.7;
}

.header-btn::after {
    content: ']';
    margin-left: 4px;
    opacity: 0.7;
}

.header-btn:hover {
    background: rgba(44, 255, 62, 0.1);
    border-color: var(--green);
    box-shadow: var(--green-glow);
}

.header-btn.active {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--brass);
    color: var(--brass);
}

.header-btn.danger {
    border-color: var(--red-dim);
    color: var(--red);
}

.header-btn.danger:hover {
    background: rgba(255, 59, 59, 0.1);
    border-color: var(--red);
    box-shadow: 0 0 10px var(--red-dim);
}

/* ========== HUD - SCANNER PANELS ========== */
#game-hud {
    position: absolute;
    top: 58px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    z-index: 80;
    pointer-events: none;
}

#game-hud.hidden { display: none; }

/* HUD Panel Base - Scanner Window Style */
.hud-panel {
    background: var(--bg-panel);
    border: 1px solid var(--panel-border);
    padding: 0;
    pointer-events: auto;
    flex: 1;
    max-width: 260px;
    position: relative;
    box-shadow: var(--panel-glow), inset 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Scanner window header */
.hud-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(180deg, 
        rgba(44, 255, 62, 0.1) 0%, 
        transparent 100%
    );
    border-bottom: 1px solid var(--panel-border);
    pointer-events: none;
}

/* Scanline overlay on panels */
.hud-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.05) 2px,
        rgba(0, 0, 0, 0.05) 4px
    );
    pointer-events: none;
    opacity: 0.5;
}

/* Panel Header */
.hud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    background: rgba(44, 255, 62, 0.05);
    border-bottom: 1px solid var(--panel-border);
    position: relative;
    z-index: 1;
}

.hud-title {
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--green);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hud-badge {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    padding: 2px 6px;
    background: var(--green);
    color: var(--bg);
    font-weight: bold;
}

.hud-badge.dormant {
    background: var(--gray-dark);
    color: var(--gray);
}

.hud-badge.warning {
    background: var(--orange);
    color: var(--bg);
}

.hud-badge.danger {
    background: var(--red);
    color: var(--white);
    animation: badgePulse 1s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Panel Content */
.hud-content {
    padding: 10px 12px;
    position: relative;
    z-index: 1;
}

.hud-section {
    margin-bottom: 10px;
}

.hud-section:last-child {
    margin-bottom: 0;
}

.hud-label {
    font-family: var(--font-display);
    font-size: 0.7rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 2px;
}

.hud-value {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--green);
    text-shadow: var(--green-glow);
    line-height: 1.2;
}

.hud-sub {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--gray);
    display: block;
}

/* Value colors */
.gp-value {
    color: var(--brass);
    text-shadow: 0 0 8px var(--brass-dim);
}

.threat-value {
    color: var(--orange);
    text-shadow: 0 0 8px var(--orange-dim);
}

.restore-value {
    color: var(--red);
    text-shadow: 0 0 8px var(--red-dim);
}
/* ========== PROGRESS BARS ========== */
.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--gray-dark);
    margin-top: 4px;
    position: relative;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background-color 0.3s ease;
    position: relative;
}

/* Glow effect on progress */
.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
}

.infection-bar .progress-fill {
    background: linear-gradient(90deg, var(--green-dark), var(--green));
    box-shadow: 0 0 8px var(--green-dim);
}

.infection-bar .progress-target {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--white);
    opacity: 0.6;
    box-shadow: 0 0 5px var(--white);
}

.threat-bar .progress-fill {
    background: linear-gradient(90deg, var(--orange), #ff6b35);
    box-shadow: 0 0 8px var(--orange-dim);
}

.restore-bar .progress-fill {
    background: linear-gradient(90deg, #cc0000, var(--red));
    box-shadow: 0 0 8px var(--red-dim);
}

/* Upgrade Button in HUD */
.upgrade-btn {
    margin-top: 10px;
    width: 100%;
    padding: 8px;
    background: rgba(44, 255, 62, 0.05);
    border: 1px solid var(--panel-border);
    color: var(--green);
    font-family: var(--font-display);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 1px;
}

.upgrade-btn::before { content: '[ '; opacity: 0.7; }
.upgrade-btn::after { content: ' ]'; opacity: 0.7; }

.upgrade-btn:hover {
    background: rgba(44, 255, 62, 0.15);
    border-color: var(--green);
    box-shadow: var(--green-glow);
}

/* Hold Display */
.hold-display {
    display: none;
    margin-top: 10px;
    padding: 8px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--brass);
    text-align: center;
    text-shadow: 0 0 10px var(--brass-dim);
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid var(--brass-dim);
    animation: holdPulse 1s ease-in-out infinite;
}

@keyframes holdPulse {
    0%, 100% { opacity: 1; border-color: var(--brass-dim); }
    50% { opacity: 0.8; border-color: var(--brass); }
}

/* Status classes */
.status-safe { color: var(--green); }
.status-warning { color: var(--orange); }
.status-danger { 
    color: var(--red); 
    animation: blink 1s infinite; 
}

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

/* Patch Rate */
.patch-rate {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--orange);
    margin-left: 6px;
    opacity: 0.8;
}

#quiet-indicator {
    font-size: 0.7rem;
    margin-left: 4px;
}

/* Active Effects */
.active-effects {
    display: none;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.effect-icon {
    font-size: 1.1rem;
    padding: 2px 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
}

/* Layer Breakdown */
.layer-breakdown {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.layer-stat {
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

/* Special Nodes */
.special-nodes {
    display: none;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.special-node {
    font-size: 1rem;
    padding: 2px 4px;
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid var(--brass-dim);
    border-radius: 2px;
}

/* ========== CANVAS CONTAINER ========== */
.canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: 
        radial-gradient(ellipse at center, rgba(44, 255, 62, 0.02) 0%, transparent 60%),
        var(--bg);
}

/* Scanlines overlay */
.canvas-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
    pointer-events: none;
    z-index: 10;
    opacity: var(--scanline-opacity);
}

/* Noise overlay */
.canvas-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 11;
    opacity: var(--noise-opacity);
    mix-blend-mode: overlay;
}

/* Vignette */
.canvas-container .vignette {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
    z-index: 12;
}

#network-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

#network-canvas:active { cursor: grabbing; }
#network-canvas.crosshair { cursor: crosshair; }

/* ========== ZOOM CONTROLS ========== */
.zoom-controls {
    position: absolute;
    bottom: 50px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 75;
}

.zoom-btn {
    width: 32px;
    height: 32px;
    background: var(--bg-panel);
    border: 1px solid var(--panel-border);
    color: var(--green);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-btn:hover {
    background: rgba(44, 255, 62, 0.1);
    border-color: var(--green);
    box-shadow: var(--green-glow);
}

.zoom-level {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--gray);
    text-align: center;
    padding: 4px 0;
    background: var(--bg-panel);
    border: 1px solid var(--gray-dark);
}

/* ========== MINIMAP ========== */
.minimap {
    position: absolute;
    bottom: 50px;
    left: 12px;
    width: 140px;
    height: 90px;
    background: var(--bg-panel);
    border: 1px solid var(--panel-border);
    z-index: 75;
    overflow: hidden;
    box-shadow: var(--panel-glow);
}

.minimap.hidden { display: none; }

.minimap::before {
    content: 'MAP';
    position: absolute;
    top: 2px;
    left: 4px;
    font-family: var(--font-display);
    font-size: 0.6rem;
    color: var(--green);
    opacity: 0.5;
    z-index: 1;
}

#minimap-canvas {
    width: 100%;
    height: 100%;
}

.minimap-viewport {
    position: absolute;
    border: 1px solid var(--green);
    background: rgba(44, 255, 62, 0.1);
    pointer-events: none;
}

/* ========== FPS COUNTER ========== */
.fps-counter {
    position: absolute;
    top: 62px;
    right: 15px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--gray);
    background: var(--bg-panel);
    padding: 3px 6px;
    border: 1px solid var(--gray-dark);
    z-index: 100;
}

.fps-counter.hidden { display: none; }

/* ========== FEEDBACK ========== */
#feedback-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 60;
}

.click-feedback {
    position: absolute;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: bold;
    pointer-events: none;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    opacity: 0;
    text-shadow: 0 0 10px currentColor;
    letter-spacing: 1px;
}

.click-feedback.show {
    animation: feedbackPop 1.5s ease-out forwards;
}

.click-feedback.success { color: var(--green); }
.click-feedback.error { color: var(--red); }
.click-feedback.warning { color: var(--orange); }
.click-feedback.neutral { color: var(--gray); }

@keyframes feedbackPop {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
    20% { transform: translate(-50%, -80%) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -150%) scale(0.9); }
}

/* ========== EVENT POPUP ========== */
.event-popup {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-panel);
    border: 2px solid var(--green);
    padding: 12px 20px;
    max-width: 380px;
    text-align: center;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--panel-glow);
}

.event-popup.active { opacity: 1; visibility: visible; }
.event-popup.event-good { border-color: var(--green); }
.event-popup.event-bad { border-color: var(--red); }
.event-popup.event-mixed { border-color: var(--brass); }

.event-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.75rem;
}

.event-type {
    font-family: var(--font-display);
    padding: 2px 8px;
    letter-spacing: 1px;
}

.event-good .event-type { background: var(--green); color: #000; }
.event-bad .event-type { background: var(--red); color: var(--white); }
.event-mixed .event-type { background: var(--brass); color: #000; }

.event-duration { color: var(--gray); }

.event-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.event-body {
    font-size: 0.85rem;
    color: var(--gray);
    line-height: 1.4;
}

/* ========== NEWS TICKER - SYSTEM LOG ========== */
.news-ticker {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    border-top: 1px solid var(--panel-border);
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 70;
}

.ticker-label {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--green);
    white-space: nowrap;
    opacity: 0.8;
}

.ticker-label::before {
    content: '>';
    margin-right: 6px;
    color: var(--brass);
}

.ticker-text {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--green);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 0 5px var(--green-dim);
}

/* ========== ABILITY BAR ========== */
.ability-bar {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-panel);
    border: 2px solid var(--panel-border);
    border-radius: 4px;
    z-index: 75;
    box-shadow: var(--panel-glow);
}

.ability-bar.hidden { display: none; }

.ability-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--gray-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-width: 65px;
}

.ability-btn:hover {
    background: rgba(44, 255, 62, 0.1);
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: var(--green-glow);
}

.ability-btn.on-cooldown {
    opacity: 0.5;
    cursor: not-allowed;
}
.ability-btn.on-cooldown:hover {
    transform: none;
    box-shadow: none;
}

.ability-btn.unaffordable {
    border-color: var(--red-dim);
}
.ability-btn.unaffordable .ability-cost {
    color: var(--red);
}

.ability-btn.active {
    border-color: var(--brass);
    background: rgba(201, 162, 39, 0.15);
    box-shadow: 0 0 15px var(--brass-dim);
}

.ability-key {
    position: absolute;
    top: 2px;
    left: 2px;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--gray);
    background: rgba(0, 0, 0, 0.8);
    padding: 1px 4px;
    border-radius: 2px;
}

.ability-icon {
    font-size: 1.3rem;
    margin-bottom: 2px;
}

.ability-name {
    font-family: var(--font-display);
    font-size: 0.65rem;
    color: var(--white);
    text-align: center;
    letter-spacing: 0.5px;
}

.ability-cost {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--brass);
}

.ability-cooldown {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.15);
    height: 0%;
    transition: height 0.2s linear;
}
/* ========== OVERLAYS - TERMINAL WINDOWS ========== */
.game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.94);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.game-overlay.active {
    display: flex !important;
}

/* Overlay Box - Terminal Window Style */
.overlay-box {
    background: var(--bg-panel);
    border: 2px solid var(--green);
    padding: 0;
    max-width: 480px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 
        var(--panel-glow),
        0 0 60px rgba(44, 255, 62, 0.1),
        inset 0 0 60px rgba(0, 0, 0, 0.5);
    position: relative;
}

.overlay-box.large { max-width: 680px; }
.overlay-box.tutorial-box { max-width: 780px; }

/* Terminal window header bar */
.overlay-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: linear-gradient(180deg, 
        rgba(44, 255, 62, 0.15) 0%, 
        rgba(44, 255, 62, 0.05) 100%
    );
    border-bottom: 1px solid var(--panel-border);
}

/* Overlay content wrapper */
.overlay-content {
    padding: 40px 35px 30px;
}

.overlay-title {
    font-family: var(--font-display);
    font-size: 2rem;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 3px;
    position: relative;
}

.overlay-title::before { content: '[ '; opacity: 0.6; }
.overlay-title::after { content: ' ]'; opacity: 0.6; }

.overlay-title.green { 
    color: var(--green); 
    text-shadow: var(--green-glow); 
}
.overlay-title.red { 
    color: var(--red); 
    text-shadow: 0 0 20px var(--red-dim); 
}
.overlay-title.yellow, .overlay-title.brass { 
    color: var(--brass); 
    text-shadow: 0 0 20px var(--brass-dim); 
}
.overlay-title.blue { 
    color: var(--blue); 
    text-shadow: 0 0 20px var(--blue-dim); 
}

.overlay-subtitle {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--gray);
    text-align: center;
    margin-bottom: 25px;
}

.overlay-subtitle::before {
    content: '> ';
    color: var(--green);
    opacity: 0.7;
}

/* ========== DIFFICULTY SELECTOR ========== */
.difficulty-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.difficulty-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--gray-dark);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.difficulty-btn:hover {
    border-color: var(--green);
    background: rgba(44, 255, 62, 0.05);
    transform: translateX(5px);
    box-shadow: var(--green-glow);
}

.difficulty-btn::before {
    content: '▶';
    color: var(--green);
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 0.8rem;
}

.difficulty-btn:hover::before {
    opacity: 1;
}

.diff-icon { 
    font-size: 1.6rem; 
}

.diff-info { 
    flex: 1; 
}

.diff-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--white);
    display: block;
    margin-bottom: 2px;
    letter-spacing: 1px;
}

.diff-desc {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--gray);
}

/* ========== SEED INPUT ========== */
.seed-input-section {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-dark);
}

.seed-input-section .seed-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--gray);
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.seed-input-section .seed-label::before {
    content: '> ';
    color: var(--brass);
}

.seed-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--gray-dark);
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 1px;
}

.seed-input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: var(--green-glow);
}

.seed-input::placeholder {
    color: var(--gray-dark);
}

/* ========== RECORDS ========== */
.records-section {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-dark);
}

.records-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--brass);
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.records-title::before {
    content: '// ';
    opacity: 0.5;
}

.records-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.record-item {
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border: 1px solid var(--gray-dark);
}

.record-item.win {
    border-color: var(--green-dim);
    background: rgba(44, 255, 62, 0.05);
}

.record-label {
    font-size: 0.7rem;
    color: var(--gray);
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.record-value {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--white);
}

.no-records {
    grid-column: span 2;
    text-align: center;
    color: var(--gray);
    font-style: italic;
    padding: 15px;
    font-size: 0.85rem;
}

/* ========== TUTORIAL ========== */
.tutorial-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 20px;
}

.tutorial-col h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--brass);
    margin-bottom: 10px;
    margin-top: 15px;
    letter-spacing: 1px;
}

.tutorial-col h3::before {
    content: '// ';
    opacity: 0.5;
}

.tutorial-col h3:first-child { margin-top: 0; }

.tutorial-col p {
    font-size: 0.85rem;
    color: var(--gray);
    line-height: 1.5;
}

.tutorial-list {
    list-style: none;
    padding: 0;
}

.tutorial-list li {
    padding: 5px 0 5px 18px;
    position: relative;
    font-size: 0.8rem;
    color: var(--white);
}

.tutorial-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--green);
    font-family: var(--font-display);
}

.hl-green { color: var(--green); font-weight: bold; }
.hl-red { color: var(--red); font-weight: bold; }
.hl-yellow, .hl-brass { color: var(--brass); font-weight: bold; }
.hl-blue { color: var(--blue); font-weight: bold; }
.hl-orange { color: var(--orange); font-weight: bold; }

/* ========== PAUSE ========== */
.pause-stats {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin: 20px 0;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gray);
}

.pause-stats span span {
    color: var(--green);
}

/* ========== SETTINGS ========== */
.settings-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--white);
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-dark);
}

.setting-row:last-child {
    border-bottom: none;
}

.setting-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.setting-row input[type="range"] {
    width: 110px;
    cursor: pointer;
    accent-color: var(--green);
}

.setting-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--green);
}

.setting-row select {
    padding: 5px 10px;
    background: var(--bg);
    border: 1px solid var(--panel-border);
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    cursor: pointer;
}

.setting-row select:focus {
    outline: none;
    border-color: var(--green);
}

/* ========== LEGEND ========== */
.legend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.legend-section h3 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--brass);
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--gray-dark);
    letter-spacing: 1px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: var(--gray);
}

.legend-color {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.legend-line {
    width: 28px;
    height: 3px;
    flex-shrink: 0;
}

.legend-line.normal { background: rgba(255, 255, 255, 0.25); }
.legend-line.bridge { background: var(--brass); height: 4px; }
.legend-line.cut { 
    background: repeating-linear-gradient(
        90deg, 
        var(--red), 
        var(--red) 4px, 
        transparent 4px, 
        transparent 8px
    ); 
}

/* ========== GAME OVER SEED SECTION ========== */
.seed-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--gray-dark);
}

.seed-section .seed-label {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--gray);
    letter-spacing: 1px;
}

.seed-value {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--green);
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 12px;
    border: 1px solid var(--panel-border);
    letter-spacing: 2px;
}

.copy-btn {
    background: rgba(44, 255, 62, 0.1);
    border: 1px solid var(--panel-border);
    color: var(--green);
    padding: 6px 12px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 1px;
}

.copy-btn:hover {
    background: var(--green);
    color: var(--bg);
}

.copy-btn.copied {
    background: var(--green);
    color: var(--bg);
}

/* Barry Quote in Game Over */
.barry-quote {
    text-align: center;
    margin: 15px 0;
    padding: 10px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--brass);
    font-style: italic;
    opacity: 0.9;
}

.barry-quote::before {
    content: '> BARRY: "';
    color: var(--green);
}

.barry-quote::after {
    content: '"';
    color: var(--green);
}

/* ========== ACTION BUTTONS ========== */
.action-btn {
    display: block;
    width: 100%;
    padding: 14px 28px;
    margin-top: 12px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: transparent;
    position: relative;
}

.action-btn::before { content: '[ '; opacity: 0.6; }
.action-btn::after { content: ' ]'; opacity: 0.6; }

.action-btn.large {
    font-size: 1.4rem;
    padding: 16px 35px;
}

.action-btn.green {
    background: var(--green);
    color: var(--bg);
    border: 2px solid var(--green);
}

.action-btn.green:hover {
    box-shadow: var(--green-glow), 0 0 30px var(--green-dim);
    transform: scale(1.02);
}

.action-btn.red {
    border: 2px solid var(--red);
    color: var(--red);
}

.action-btn.red:hover {
    background: var(--red);
    color: var(--bg);
    box-shadow: 0 0 20px var(--red-dim);
}

.action-btn:not(.green):not(.red) {
    border: 2px solid var(--gray);
    color: var(--gray);
}

.action-btn:not(.green):not(.red):hover {
    border-color: var(--white);
    color: var(--white);
}

.button-row {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.button-row .action-btn {
    flex: 1;
    margin-top: 0;
}

/* ========== STATS GRID (Game Over) ========== */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 20px 0;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--gray-dark);
}

.stat-row:first-child {
    grid-column: span 2;
    background: rgba(44, 255, 62, 0.08);
    border-color: var(--green-dim);
}

.stat-row:last-child {
    grid-column: span 2;
}

.stat-label {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--gray);
    letter-spacing: 1px;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--white);
}

.stat-value.win { color: var(--green); }
.stat-value.lose { color: var(--red); }

/* ========== UPGRADE PANEL ========== */
.upgrade-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 950px;
    max-height: 82vh;
    background: var(--bg-panel);
    border: 2px solid var(--green);
    z-index: 1001;
    display: none;
    flex-direction: column;
    box-shadow: var(--panel-glow), 0 0 80px rgba(44, 255, 62, 0.1);
}

.upgrade-panel.active { display: flex; }

.upgrade-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 20px;
    background: rgba(44, 255, 62, 0.08);
    border-bottom: 1px solid var(--panel-border);
}

.upgrade-panel-header h2 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--green);
    margin: 0;
    letter-spacing: 2px;
}

.upgrade-panel-header h2::before { content: '[ '; opacity: 0.6; }
.upgrade-panel-header h2::after { content: ' ]'; opacity: 0.6; }

.upgrade-panel-gp {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--brass);
    display: block;
    margin-top: 4px;
}

.close-btn {
    background: none;
    border: 1px solid var(--panel-border);
    color: var(--green);
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background: var(--green);
    color: var(--bg);
}

.upgrade-grid {
    display: flex;
    gap: 12px;
    padding: 15px;
    overflow-y: auto;
    flex-wrap: wrap;
}

.upgrade-branch {
    flex: 1;
    min-width: 170px;
    max-width: 190px;
}

.branch-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gray-dark);
    letter-spacing: 1px;
}

.upgrade-card {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--gray-dark);
    padding: 8px 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upgrade-card:hover:not(.purchased):not(.locked):not(.unaffordable) {
    border-color: var(--green);
    background: rgba(44, 255, 62, 0.05);
    transform: translateX(3px);
}

.upgrade-card.purchased {
    border-color: var(--green);
    background: rgba(44, 255, 62, 0.1);
    cursor: default;
}

.upgrade-card.locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.upgrade-card.unaffordable {
    border-color: var(--red-dim);
    cursor: not-allowed;
}

.upgrade-card[data-branch="singularity"] {
    border-color: var(--purple-dim);
    background: rgba(156, 39, 176, 0.05);
}

.upgrade-card[data-branch="singularity"].purchased {
    border-color: var(--purple);
    background: rgba(156, 39, 176, 0.15);
}

.upgrade-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.upgrade-name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--white);
    letter-spacing: 0.5px;
}

.upgrade-cost {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--brass);
    white-space: nowrap;
}

.upgrade-card.purchased .upgrade-cost { color: var(--green); }
.upgrade-card.unaffordable .upgrade-cost { color: var(--red); }

.upgrade-desc {
    font-size: 0.65rem;
    color: var(--gray);
    margin-bottom: 3px;
    line-height: 1.3;
}

.upgrade-quote {
    font-size: 0.6rem;
    font-style: italic;
    color: var(--green-dim);
}

.upgrade-requires {
    font-size: 0.6rem;
    color: var(--orange);
    margin-top: 3px;
}

.upgrade-condition {
    font-size: 0.55rem;
    color: var(--brass);
    margin-top: 2px;
    font-style: italic;
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 900px) {
    #game-hud { flex-wrap: wrap; }
    .hud-left, .hud-center { flex: 1 1 45%; max-width: none; }
    .hud-right { display: none; }
    .upgrade-grid { flex-wrap: wrap; }
    .upgrade-branch { flex: 1 1 45%; max-width: none; }
    .legend-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .game-header {
        flex-wrap: wrap;
        gap: 4px;
        padding: 4px 8px;
    }
    
    .header-left, .header-right { flex: 1; }
    
    .header-center {
        order: 3;
        width: 100%;
        justify-content: center;
    }
    
    .game-title { font-size: 1rem; }
    .barry-avatar { width: 24px; height: 24px; }
    .header-subline { display: none; }
    
    /* Игровые панели (HUD) - В одну прозрачную строку */
    #game-hud {
        flex-direction: row;
        top: 60px;
        left: 5px;
        right: 5px;
        gap: 5px;
        pointer-events: none; /* Пропускаем клики на карту */
    }
    
    .hud-left, .hud-center {
        flex: 1;
        max-width: 50%;
        pointer-events: auto;
    }
    
    .hud-panel { 
        padding: 0; 
        background: rgba(5, 5, 5, 0.85); 
    }
    
    .hud-header { padding: 2px 5px; }
    .hud-title { font-size: 0.65rem; }
    
    .hud-content { 
        padding: 4px 6px; 
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .hud-section { margin-bottom: 0; }
    .hud-value { font-size: 1.1rem; }
    
    /* Скрываем лишнюю инфу для экономии места на экране */
    .layer-breakdown, .special-nodes, .hud-sub {
        display: none !important;
    }
    
    .upgrade-btn {
        margin-top: 2px;
        padding: 4px;
        font-size: 0.75rem;
    }
    
    /* Панель способностей внизу - одна скроллируемая строка */
    .ability-bar {
        bottom: 25px;
        padding: 4px;
        gap: 4px;
        width: 95%;
        max-width: none;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        justify-content: flex-start;
        background: rgba(5, 5, 5, 0.85);
    }
    
    .ability-btn {
        padding: 4px;
        min-width: 50px;
        flex-shrink: 0;
    }
    
    .ability-icon { font-size: 1rem; }
    .ability-name { font-size: 0.5rem; }
    .ability-cost { font-size: 0.45rem; }
    .ability-key { display: none; }
    
    .overlay-box { margin: 10px; }
    .overlay-content { padding: 25px 15px 15px; }
    .overlay-title { font-size: 1.4rem; }
    
    .tutorial-columns {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .upgrade-grid {
        flex-direction: column;
        padding: 12px;
    }
    
    .upgrade-branch {
        flex: 1 1 100%;
        min-width: auto;
        max-width: none;
    }
    
    .stats-grid { grid-template-columns: 1fr; }
    .stat-row:first-child, .stat-row:last-child { grid-column: span 1; }
    .button-row { flex-direction: column; }
    
    .news-ticker { padding: 5px 8px; }
    .ticker-label { font-size: 0.6rem; }
    .ticker-text { font-size: 0.6rem; }
    
    .minimap { display: none; }
    
    .zoom-controls {
        bottom: 80px;
        right: 5px;
        transform: scale(0.8);
        transform-origin: bottom right;
    }
}

@media (max-width: 480px) {
    .game-title { font-size: 0.9rem; }
    .header-btn { padding: 3px 6px; font-size: 0.65rem; }
    .difficulty-badge { font-size: 0.6rem; padding: 2px 4px; }
    .barry-avatar { width: 20px; height: 20px; }
    .overlay-content { padding: 20px 12px 15px; }
    .overlay-title { font-size: 1.2rem; }
    .action-btn { padding: 10px 15px; font-size: 0.9rem; }
}


/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

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

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

/* ========== ACCESSIBILITY ========== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .canvas-container::before,
    .canvas-container::after {
        display: none;
    }
}

*:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* Reduced motion class */
body.reduced-motion * {
    animation: none !important;
    transition: none !important;
}

body.reduced-motion .canvas-container::before,
body.reduced-motion .canvas-container::after {
    display: none;
}

/* ========== COLORBLIND MODES ========== */
body.colorblind-protanopia {
    --green: #00D4AA;
    --green-dim: rgba(0, 212, 170, 0.3);
    --red: #FFB000;
    --red-dim: rgba(255, 176, 0, 0.3);
    --orange: #FFDD00;
    --orange-dim: rgba(255, 221, 0, 0.3);
}

body.colorblind-deuteranopia {
    --green: #00BFFF;
    --green-dim: rgba(0, 191, 255, 0.3);
    --red: #FF6B00;
    --red-dim: rgba(255, 107, 0, 0.3);
    --orange: #FFD700;
    --orange-dim: rgba(255, 215, 0, 0.3);
}

body.colorblind-tritanopia {
    --green: #FF69B4;
    --green-dim: rgba(255, 105, 180, 0.3);
    --red: #FF4500;
    --red-dim: rgba(255, 69, 0, 0.3);
    --yellow: #00CED1;
    --yellow-dim: rgba(0, 206, 209, 0.3);
    --brass: #00CED1;
    --brass-dim: rgba(0, 206, 209, 0.3);
}

/* ========== HOTFIX ========== */
.game-overlay.active {
    display: flex !important;
}