/* =============================================================================
   8-bit Breach - Main Stylesheet
   Cyberpunk color palette and CSS custom properties
   ============================================================================= */

/* =============================================================================
   CSS-001: Cyberpunk Color Palette (16 colors)
   ============================================================================= */

:root {
    /* -------------------------------------------------------------------------
       Primary Colors - Neon Accents
       ------------------------------------------------------------------------- */
    --color-neon-cyan: #00fff9;
    --color-neon-magenta: #ff00ff;
    --color-neon-pink: #ff2a6d;
    --color-neon-yellow: #f9f002;

    /* -------------------------------------------------------------------------
       Secondary Colors - Electric Tones
       ------------------------------------------------------------------------- */
    --color-electric-blue: #05d9e8;
    --color-electric-purple: #7b2cbf;
    --color-electric-green: #39ff14;
    --color-electric-orange: #ff6b35;

    /* -------------------------------------------------------------------------
       Dark Colors - Backgrounds
       ------------------------------------------------------------------------- */
    --color-dark-void: #0d0221;
    --color-dark-purple: #1a1a2e;
    --color-dark-blue: #16213e;
    --color-dark-gray: #1f1f3d;

    /* -------------------------------------------------------------------------
       Status Colors - Game States
       ------------------------------------------------------------------------- */
    --color-status-healthy: #39ff14;
    --color-status-compromised: #ff2a6d;
    --color-status-isolated: #f9f002;
    --color-status-destroyed: #666666;

    /* -------------------------------------------------------------------------
       UI Colors - Interface Elements
       ------------------------------------------------------------------------- */
    --color-text-primary: #ffffff;
    --color-text-secondary: #a0a0c0;
    --color-text-muted: #666688;
    --color-border: #2a2a4a;
    --color-border-glow: #05d9e8;

    /* -------------------------------------------------------------------------
       Metric Colors - Dashboard Bars
       ------------------------------------------------------------------------- */
    --color-metric-budget: #f9f002;
    --color-metric-reputation: #05d9e8;
    --color-metric-availability: #39ff14;
    --color-metric-integrity: #ff00ff;

    /* -------------------------------------------------------------------------
       Grade Colors - Score Display
       ------------------------------------------------------------------------- */
    --color-grade-s: #f9f002;
    --color-grade-a: #39ff14;
    --color-grade-b: #05d9e8;
    --color-grade-c: #ff6b35;
    --color-grade-f: #ff2a6d;

    /* -------------------------------------------------------------------------
       Alert Colors - Warnings and Criticals
       ------------------------------------------------------------------------- */
    --color-alert-info: #05d9e8;
    --color-alert-warning: #f9f002;
    --color-alert-critical: #ff2a6d;
    --color-alert-success: #39ff14;

    /* -------------------------------------------------------------------------
       Typography - Font Families
       ------------------------------------------------------------------------- */
    --font-primary: 'Press Start 2P', monospace;
    --font-secondary: 'VT323', monospace;
    --font-mono: 'Courier New', monospace;

    /* -------------------------------------------------------------------------
       Spacing - Consistent Margins/Padding
       ------------------------------------------------------------------------- */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* -------------------------------------------------------------------------
       Border Radius - Pixel Art Style (minimal)
       ------------------------------------------------------------------------- */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;

    /* -------------------------------------------------------------------------
       Shadows - Glow Effects
       ------------------------------------------------------------------------- */
    --shadow-glow-cyan: 0 0 10px var(--color-neon-cyan), 0 0 20px var(--color-neon-cyan);
    --shadow-glow-magenta: 0 0 10px var(--color-neon-magenta), 0 0 20px var(--color-neon-magenta);
    --shadow-glow-pink: 0 0 10px var(--color-neon-pink), 0 0 20px var(--color-neon-pink);
    --shadow-glow-green: 0 0 10px var(--color-electric-green), 0 0 20px var(--color-electric-green);

    /* -------------------------------------------------------------------------
       Transitions - Animation Timings
       ------------------------------------------------------------------------- */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    /* -------------------------------------------------------------------------
       Z-Index Scale
       ------------------------------------------------------------------------- */
    --z-base: 0;
    --z-dropdown: 100;
    --z-modal: 200;
    --z-overlay: 300;
    --z-toast: 400;
}

/* =============================================================================
   CSS-002: Base Styles (Reset, Body, Headings)
   ============================================================================= */

/* -------------------------------------------------------------------------
   CSS Reset - Modern Minimal Reset
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Remove default list styles */
ul,
ol {
    list-style: none;
}

/* Remove default button styles */
button {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* Remove default anchor styles */
a {
    color: inherit;
    text-decoration: none;
}

/* Remove default image styles */
img,
svg {
    display: block;
    max-width: 100%;
}

/* Remove default form element styles */
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* -------------------------------------------------------------------------
   HTML & Body - Foundation
   ------------------------------------------------------------------------- */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    font-family: var(--font-primary);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-dark-void);
    background-image:
        radial-gradient(
            ellipse at top,
            var(--color-dark-purple) 0%,
            var(--color-dark-void) 50%
        );
    background-attachment: fixed;
}

/* -------------------------------------------------------------------------
   Typography - Headings
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

h1 {
    font-size: 1.5rem;
    text-shadow: var(--shadow-glow-cyan);
    color: var(--color-neon-cyan);
}

h2 {
    font-size: 1rem;
    color: var(--color-electric-blue);
}

h3 {
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

h4 {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

h5, h6 {
    font-size: 0.625rem;
    color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Typography - Body Text
   ------------------------------------------------------------------------- */
p {
    margin-bottom: var(--space-md);
    color: var(--color-text-secondary);
}

p:last-child {
    margin-bottom: 0;
}

strong, b {
    font-weight: 700;
    color: var(--color-text-primary);
}

em, i {
    font-style: italic;
}

small {
    font-size: 0.625rem;
    color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Typography - Links
   ------------------------------------------------------------------------- */
a {
    color: var(--color-neon-cyan);
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

a:hover,
a:focus {
    color: var(--color-neon-magenta);
    text-shadow: var(--shadow-glow-magenta);
}

a:active {
    color: var(--color-neon-pink);
}

/* -------------------------------------------------------------------------
   Typography - Code & Preformatted
   ------------------------------------------------------------------------- */
code,
pre {
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    background-color: var(--color-dark-gray);
    border-radius: var(--radius-sm);
}

code {
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-electric-green);
}

pre {
    padding: var(--space-md);
    overflow-x: auto;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

pre code {
    padding: 0;
    background: none;
}

/* -------------------------------------------------------------------------
   Selection - Highlight Color
   ------------------------------------------------------------------------- */
::selection {
    background-color: var(--color-neon-magenta);
    color: var(--color-dark-void);
}

::-moz-selection {
    background-color: var(--color-neon-magenta);
    color: var(--color-dark-void);
}

/* -------------------------------------------------------------------------
   Focus Styles - Accessibility
   ------------------------------------------------------------------------- */
:focus {
    outline: 2px solid var(--color-neon-cyan);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-neon-cyan);
    outline-offset: 2px;
}

/* =============================================================================
   CSS-003: Button Styles (.btn, .btn-primary, .btn-disabled)
   ============================================================================= */

/* -------------------------------------------------------------------------
   Base Button Style
   ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-primary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    background-color: var(--color-dark-gray);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
    text-decoration: none;
    user-select: none;
}

.btn:hover {
    background-color: var(--color-dark-blue);
    border-color: var(--color-border-glow);
    box-shadow: var(--shadow-glow-cyan);
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* -------------------------------------------------------------------------
   Primary Button - Cyan Accent
   ------------------------------------------------------------------------- */
.btn-primary {
    background-color: var(--color-dark-blue);
    border-color: var(--color-neon-cyan);
    color: var(--color-neon-cyan);
    box-shadow: 0 0 5px var(--color-neon-cyan);
}

.btn-primary:hover {
    background-color: var(--color-neon-cyan);
    color: var(--color-dark-void);
    box-shadow: var(--shadow-glow-cyan);
}

.btn-primary:active {
    background-color: var(--color-electric-blue);
    box-shadow: 0 0 5px var(--color-neon-cyan);
}

/* -------------------------------------------------------------------------
   Secondary Button - Subtle Style
   ------------------------------------------------------------------------- */
.btn-secondary {
    background-color: transparent;
    border-color: var(--color-text-muted);
    color: var(--color-text-secondary);
}

.btn-secondary:hover {
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
    background-color: var(--color-dark-gray);
    box-shadow: none;
}

.btn-secondary:active {
    background-color: var(--color-dark-purple);
}

/* -------------------------------------------------------------------------
   Danger Button - Red/Pink Accent
   ------------------------------------------------------------------------- */
.btn-danger {
    background-color: var(--color-dark-blue);
    border-color: var(--color-neon-pink);
    color: var(--color-neon-pink);
    box-shadow: 0 0 5px var(--color-neon-pink);
}

.btn-danger:hover {
    background-color: var(--color-neon-pink);
    color: var(--color-dark-void);
    box-shadow: var(--shadow-glow-pink);
}

.btn-danger:active {
    background-color: var(--color-status-compromised);
    box-shadow: 0 0 5px var(--color-neon-pink);
}

/* -------------------------------------------------------------------------
   Success Button - Green Accent
   ------------------------------------------------------------------------- */
.btn-success {
    background-color: var(--color-dark-blue);
    border-color: var(--color-electric-green);
    color: var(--color-electric-green);
    box-shadow: 0 0 5px var(--color-electric-green);
}

.btn-success:hover {
    background-color: var(--color-electric-green);
    color: var(--color-dark-void);
    box-shadow: var(--shadow-glow-green);
}

.btn-success:active {
    background-color: var(--color-status-healthy);
    box-shadow: 0 0 5px var(--color-electric-green);
}

/* -------------------------------------------------------------------------
   Disabled Button State
   ------------------------------------------------------------------------- */
.btn-disabled,
.btn:disabled,
.btn[disabled] {
    background-color: var(--color-dark-gray);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
    transform: none;
}

.btn-disabled:hover,
.btn:disabled:hover,
.btn[disabled]:hover {
    background-color: var(--color-dark-gray);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    box-shadow: none;
    transform: none;
}

/* -------------------------------------------------------------------------
   Button Sizes
   ------------------------------------------------------------------------- */
.btn-sm {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.625rem;
}

.btn-lg {
    padding: var(--space-lg) var(--space-2xl);
    font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
   Icon Button - Square with icon only
   ------------------------------------------------------------------------- */
.btn-icon {
    padding: var(--space-sm);
    min-width: 2.5rem;
    min-height: 2.5rem;
}

/* -------------------------------------------------------------------------
   Button Group
   ------------------------------------------------------------------------- */
.btn-group {
    display: flex;
    gap: var(--space-sm);
}

.btn-group-vertical {
    flex-direction: column;
}

/* =============================================================================
   CSS-004: Progress Bars / Metric Bars (.metric-bar)
   ============================================================================= */

/* -------------------------------------------------------------------------
   Metric Item Container
   ------------------------------------------------------------------------- */
.metric-item {
    margin-bottom: var(--space-xs);
}

.metric-item:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Metric Header - Label and Value
   ------------------------------------------------------------------------- */
.metric-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.metric-icon {
    font-size: 1rem;
    line-height: 1;
}

.metric-label {
    font-family: var(--font-primary);
    font-size: 0.625rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 1;
}

.metric-value {
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    color: var(--color-text-primary);
    min-width: 4rem;
    text-align: right;
}

/* -------------------------------------------------------------------------
   Metric Bar Container and Base Bar
   ------------------------------------------------------------------------- */
.metric-bar-container {
    position: relative;
}

.metric-bar {
    position: relative;
    height: 1rem;
    background-color: var(--color-dark-gray);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Pixel grid overlay effect */
.metric-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.2) 3px,
        rgba(0, 0, 0, 0.2) 4px
    );
    z-index: 1;
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   Metric Fill - The Actual Progress
   ------------------------------------------------------------------------- */
.metric-fill {
    height: 100%;
    min-width: 2px;
    transition: width var(--transition-normal);
    position: relative;
}

/* -------------------------------------------------------------------------
   Metric Type Colors (using CSS variables from palette)
   ------------------------------------------------------------------------- */
.metric-fill.budget {
    background: linear-gradient(
        180deg,
        var(--color-metric-budget) 0%,
        color-mix(in srgb, var(--color-metric-budget) 70%, black) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.metric-fill.reputation {
    background: linear-gradient(
        180deg,
        var(--color-metric-reputation) 0%,
        color-mix(in srgb, var(--color-metric-reputation) 70%, black) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.metric-fill.availability {
    background: linear-gradient(
        180deg,
        var(--color-metric-availability) 0%,
        color-mix(in srgb, var(--color-metric-availability) 70%, black) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.metric-fill.integrity {
    background: linear-gradient(
        180deg,
        var(--color-metric-integrity) 0%,
        color-mix(in srgb, var(--color-metric-integrity) 70%, black) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* -------------------------------------------------------------------------
   Warning State - Yellow/Orange Tint
   ------------------------------------------------------------------------- */
.metric-fill.warning {
    animation: pulse-warning 1s ease-in-out infinite;
}

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

/* -------------------------------------------------------------------------
   Critical State - Red Glow + Fast Pulse
   ------------------------------------------------------------------------- */
.metric-fill.critical {
    background: linear-gradient(
        180deg,
        var(--color-alert-critical) 0%,
        color-mix(in srgb, var(--color-alert-critical) 70%, black) 100%
    ) !important;
    animation: pulse-critical 0.5s ease-in-out infinite;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 8px var(--color-alert-critical);
}

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

/* -------------------------------------------------------------------------
   Metrics Alert Banner
   ------------------------------------------------------------------------- */
.metrics-alert {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    margin-top: var(--space-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: 0.5rem;
    text-transform: uppercase;
}

.metrics-alert.warning {
    background-color: color-mix(in srgb, var(--color-alert-warning) 20%, transparent);
    border: 1px solid var(--color-alert-warning);
    color: var(--color-alert-warning);
}

.metrics-alert.critical {
    background-color: color-mix(in srgb, var(--color-alert-critical) 20%, transparent);
    border: 1px solid var(--color-alert-critical);
    color: var(--color-alert-critical);
    animation: alert-glow 1s ease-in-out infinite;
}

@keyframes alert-glow {
    0%, 100% { box-shadow: 0 0 5px var(--color-alert-critical); }
    50% { box-shadow: 0 0 15px var(--color-alert-critical); }
}

.alert-icon {
    font-size: 1rem;
    line-height: 1;
}

.alert-icon.blink {
    animation: blink 0.5s step-end infinite;
}

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

.alert-text {
    flex: 1;
}

/* -------------------------------------------------------------------------
   Generic Progress Bar (Reusable)
   ------------------------------------------------------------------------- */
.progress-bar {
    position: relative;
    height: 0.5rem;
    background-color: var(--color-dark-gray);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: var(--color-electric-blue);
    transition: width var(--transition-normal);
}

.progress-fill.success {
    background-color: var(--color-electric-green);
}

.progress-fill.danger {
    background-color: var(--color-neon-pink);
}

/* =============================================================================
   CSS-005: Panels (.panel, .panel-dark)
   ============================================================================= */

/* -------------------------------------------------------------------------
   Base Panel Style
   ------------------------------------------------------------------------- */
.panel {
    background-color: var(--color-dark-purple);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    position: relative;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Panel with glow effect on hover */
.panel:hover {
    border-color: var(--color-border-glow);
}

/* -------------------------------------------------------------------------
   Panel Header / Title
   ------------------------------------------------------------------------- */
.panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-primary);
    font-size: 0.625rem;
    color: var(--color-electric-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.panel-title > span:first-child {
    font-size: 1rem;
}

/* -------------------------------------------------------------------------
   Panel Dark Variant - Deeper Background
   ------------------------------------------------------------------------- */
.panel-dark {
    background-color: var(--color-dark-void);
    border-color: var(--color-dark-gray);
}

.panel-dark:hover {
    border-color: var(--color-border);
}

/* -------------------------------------------------------------------------
   Panel Transparent - No Background
   ------------------------------------------------------------------------- */
.panel-transparent {
    background-color: transparent;
    border-color: var(--color-border);
}

/* -------------------------------------------------------------------------
   Panel with Glow - Neon Border Effect
   ------------------------------------------------------------------------- */
.panel-glow {
    border-color: var(--color-neon-cyan);
    box-shadow:
        0 0 5px var(--color-neon-cyan),
        inset 0 0 20px rgba(5, 217, 232, 0.05);
}

.panel-glow-pink {
    border-color: var(--color-neon-pink);
    box-shadow:
        0 0 5px var(--color-neon-pink),
        inset 0 0 20px rgba(255, 42, 109, 0.05);
}

.panel-glow-green {
    border-color: var(--color-electric-green);
    box-shadow:
        0 0 5px var(--color-electric-green),
        inset 0 0 20px rgba(57, 255, 20, 0.05);
}

/* -------------------------------------------------------------------------
   Panel Body / Content Area
   ------------------------------------------------------------------------- */
.panel-body {
    color: var(--color-text-secondary);
}

.panel-body p {
    margin-bottom: var(--space-sm);
}

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

/* -------------------------------------------------------------------------
   Panel Footer
   ------------------------------------------------------------------------- */
.panel-footer {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

/* -------------------------------------------------------------------------
   Panel Sizes
   ------------------------------------------------------------------------- */
.panel-sm {
    padding: var(--space-md);
}

.panel-lg {
    padding: var(--space-xl);
}

/* -------------------------------------------------------------------------
   Specific Panel Types - Game Components
   ------------------------------------------------------------------------- */

/* Threat Console Panel */
.threat-console {
    background-color: var(--color-dark-void);
    border-color: var(--color-neon-pink);
    box-shadow: inset 0 0 30px rgba(255, 42, 109, 0.1);
}

.threat-console .panel-title {
    color: var(--color-neon-pink);
    border-color: var(--color-neon-pink);
}

/* Threat Console - Flex layout for scrolling */
.threat-console {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.threat-console .console-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.threat-console .console-output {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* Metrics Dashboard Panel */
.metrics-dashboard {
    border-color: var(--color-electric-blue);
}

.metrics-dashboard .panel-title {
    color: var(--color-electric-blue);
    border-color: var(--color-electric-blue);
}

/* Infrastructure Map Panel */
.infrastructure-map {
    background-color: var(--color-dark-void);
    border-color: var(--color-neon-cyan);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.infrastructure-map .map-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.infrastructure-map .panel-title {
    color: var(--color-neon-cyan);
    border-color: var(--color-neon-cyan);
}

/* Actions Panel */
.actions-panel {
    background-color: var(--color-dark-blue);
    border-color: var(--color-electric-green);
    padding: 4px;
    overflow: hidden;
}

.actions-panel .panel-title {
    color: var(--color-electric-green);
    border-color: var(--color-electric-green);
}

/* Stats Section (End Screen) */
.stats-section {
    border-color: var(--color-neon-yellow);
}

.stats-section .panel-title {
    color: var(--color-neon-yellow);
    border-color: var(--color-neon-yellow);
}

/* Timeline Section (End Screen) */
.timeline-section {
    border-color: var(--color-electric-purple);
}

.timeline-section .panel-title {
    color: var(--color-electric-purple);
    border-color: var(--color-electric-purple);
}

/* Rules Section (How to Play) */
.rules-section {
    margin-bottom: var(--space-xl);
}

.rules-section:last-of-type {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Panel Grid Layout
   ------------------------------------------------------------------------- */
.panel-grid {
    display: grid;
    gap: var(--space-lg);
}

.panel-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.panel-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.panel-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* -------------------------------------------------------------------------
   Card Style Panel (Clickable)
   ------------------------------------------------------------------------- */
.panel-card {
    cursor: pointer;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}

.panel-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow-cyan);
}

.panel-card:active {
    transform: translateY(-2px);
}

/* =============================================================================
   CSS-006: Quit Modal Styles
   ============================================================================= */

/* -------------------------------------------------------------------------
   Quit Toggle Container
   ------------------------------------------------------------------------- */
.quit-toggle {
    position: relative;
}

/* -------------------------------------------------------------------------
   Modal Overlay - Full Screen Dark Background
   ------------------------------------------------------------------------- */
.quit-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

/* -------------------------------------------------------------------------
   Modal Box - Centered Content
   ------------------------------------------------------------------------- */
.quit-modal {
    background: var(--color-dark-purple);
    border: 2px solid var(--color-neon-pink);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    text-align: center;
    box-shadow: 0 0 20px var(--color-neon-pink),
                0 0 40px rgba(255, 42, 109, 0.3);
    min-width: 200px;
}

/* -------------------------------------------------------------------------
   Modal Question Text
   ------------------------------------------------------------------------- */
.quit-question {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    color: var(--color-neon-pink);
    margin-bottom: var(--space-lg);
    text-shadow: 0 0 10px var(--color-neon-pink);
}

/* -------------------------------------------------------------------------
   Modal Button Container
   ------------------------------------------------------------------------- */
.quit-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}