/* Global reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Dynamic Font Scaling - Base font size scales with viewport */
html {
    /* Base font scales from 12px on small screens to 16px on large screens */
    /* This provides automatic scaling for all rem-based sizes */
    font-size: clamp(12px, 2.5vw + 6px, 16px);
}

/* Math UI - Coordinate Graphing */
.graphContainer {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 20px auto;
    background: #000;
    border: 2px solid #00ffff;
    border-radius: 8px;
    overflow: hidden;
}

.graphGrid {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(#001a1a 0 1px, transparent 1px 30px),
        repeating-linear-gradient(90deg, #001a1a 0 1px, transparent 1px 30px);
}

.graphAxis {
    position: absolute;
    background: #006666;
}

.graphAxis.x {
    left: 0;
    right: 0;
    height: 2px;
}

.graphAxis.y {
    top: 0;
    bottom: 0;
    width: 2px;
}

.graphTick {
    position: absolute;
    background: #006666;
}
.graphTick.x {
    width: 2px;
    height: 6px;
}
.graphTick.y {
    width: 6px;
    height: 2px;
}
.graphTickLabel {
    position: absolute;
    font-family: monospace;
    font-size: 11px;
    color: #00ffff;
    text-shadow: 0 0 3px rgba(0,0,0,0.7);
}
.graphLine {
    position: absolute;
    height: 2px;
    background: #00ffff;
    transform-origin: left center;
}

/* Block Counting Isometric (scoped under .bcFigureScope) */
.bcFigureScope { 
    display: inline-block; 
    padding: 12px; 
    background: rgba(0, 20, 40, 0.3); 
    border: 1px solid rgba(0, 255, 255, 0.25); 
    border-radius: 8px; 
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.15);
}

.bcFigureScope svg { 
    overflow: visible; 
}

.bcFigureScope .bc-face--top { 
    fill: rgba(255,255,255,.92); 
    stroke: rgba(0,0,0,.92); 
    stroke-width: 2.2; 
    stroke-linejoin: round; 
    vector-effect: non-scaling-stroke; 
}

.bcFigureScope .bc-face--left { 
    fill: rgba(220,220,220,.92); 
    stroke: rgba(0,0,0,.92); 
    stroke-width: 2.2; 
    stroke-linejoin: round; 
    vector-effect: non-scaling-stroke; 
}

.bcFigureScope .bc-face--right { 
    fill: rgba(190,190,190,.92); 
    stroke: rgba(0,0,0,.92); 
    stroke-width: 2.2; 
    stroke-linejoin: round; 
    vector-effect: non-scaling-stroke; 
}

/* Table Reading with Sticky Headers (scoped under .trTableScope) */
.trTableScope { 
    display: inline-block; 
    padding: 16px; 
    background: rgba(0, 20, 40, 0.3); 
    border: 1px solid rgba(0, 255, 255, 0.25); 
    border-radius: 8px; 
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.15);
    max-width: 90vw;
}

.trTableScope .trLegendWrap {
    margin-bottom: 8px;
    font-size: 13px;
    color: #9ae6b4;
}

.trTableScope .trTableWrap {
    position: relative;
    overflow: auto;
    max-height: 500px;
    max-width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #ffffff;
}

.trTableScope .trTable {
    border-collapse: separate;
    border-spacing: 0;
    width: auto;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #222;
}

.trTableScope .trCorner {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 30;
    background: #d0d0d0;
    border: 1px solid #999;
    padding: 8px 12px;
    font-weight: normal;
    text-align: center;
    min-width: 50px;
}

.trTableScope .trColHdr {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #e8e8e8;
    border: 1px solid #aaa;
    padding: 8px 12px;
    font-weight: normal;
    text-align: center;
    min-width: 60px;
}

.trTableScope .trRowHdr {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #e8e8e8;
    border: 1px solid #aaa;
    padding: 8px 12px;
    font-weight: normal;
    text-align: center;
    min-width: 50px;
}

.trTableScope .trCell {
    background: #fafafa;
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: center;
    min-width: 60px;
}

.trTableScope .trCell--target {
    background: linear-gradient(135deg, #ffffcc 0%, #ffeb99 100%);
    box-shadow: inset 0 0 4px rgba(255,200,0,0.6);
}

/* Pulse animation for target highlighting */
@keyframes trPulse {
    0%, 100% { background-color: inherit; }
    50% { background-color: #fff4a3; }
}

.trTableScope .trPulseAnim {
    animation: trPulse 0.6s ease-in-out;
}

/* Legacy BC styles for backward compatibility */
.bc-scene {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    background: radial-gradient(circle at 25% 20%, rgba(0, 255, 255, 0.08), rgba(0, 20, 40, 0.9));
    border: 1px solid rgba(0, 255, 255, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.bc-legend {
    font-size: 12px;
    line-height: 1.4;
    color: #c8e8ff;
}

.bc-legend-line { opacity: 0.85; }

/* Table Reading Data Table Styles */
.data-table-container {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 255, 255, 0.2);
    padding: 20px;
    margin: 10px 0;
    border-radius: 6px;
    overflow-x: auto;
}

.data-table-container table {
    margin: 0 auto;
    border-collapse: collapse;
    background: rgba(0, 20, 40, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.data-table-container th,
.data-table-container td {
    padding: 10px 14px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    text-align: center;
}

.data-table-container th {
    background: rgba(0, 255, 255, 0.1);
    color: #00ffff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.data-table-container td {
    background: rgba(0, 40, 60, 0.3);
    color: #e8f6ff;
    font-size: 16px;
    font-family: 'Courier New', monospace;
}

.data-table-container tbody tr:hover td {
    background: rgba(0, 255, 255, 0.08);
    transition: background 0.2s ease;
}

.bc-grid {
    position: relative;
    width: 100%;
    overflow: visible;
    min-height: 160px;
}

.bc-column {
    position: absolute;
    transform-origin: bottom center;
    will-change: transform;
}

.bc-cube {
    position: absolute;
    background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.bc-cube::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(180deg, #15803d 0%, #0a4024 100%);
    transform-origin: top left;
    transform: skewY(30deg);
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.bc-cube::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 70%;
    background: linear-gradient(90deg, #16a34a 0%, #0d562e 100%);
    transform-origin: top left;
    transform: skewX(30deg);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.graphPoint {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ffff;
    box-shadow: 0 0 6px #00ffff;
}

.graphLabel {
    position: absolute;
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    color: #00ffff;
    transform: translate(12px, -16px);
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

.angleLabel {
    position: absolute;
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    color: var(--color-text, #00ffff);
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

.functionRuleBox {
    margin: 20px auto;
    padding: 12px 16px;
    border: 2px solid #00ffff;
    border-radius: 8px;
    background: #001a1a;
    color: #00ffff;
    font-family: monospace;
    max-width: 480px;
}

.functionTable,
.dataTable {
    margin: 20px auto;
    border-collapse: collapse;
    border: 2px solid #00ffff;
}

.functionTable th,
.functionTable td,
.dataTable th,
.dataTable td {
    border: 1px solid #00ffff;
    padding: 8px 10px;
    color: #fff;
}

.functionTable thead th,
.dataTable thead th {
    background: #001a1a;
    color: #00ffff;
}

/* Math UI - Transformation helpers */
.graphLineGhost {
    position: absolute;
    height: 2px;
    background: rgba(0, 255, 255, 0.55);
    transform-origin: left center;
    box-shadow: 0 0 3px rgba(0, 255, 255, 0.3);
}

.graphPointGhost {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(0, 255, 255, 0.45);
    border: 2px solid rgba(0, 255, 255, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 255, 255, 0.4);
}

.graphArrow {
    position: absolute;
    height: 2px;
    background: #00ffff;
    transform-origin: left center;
    box-shadow: 0 0 4px rgba(0, 255, 255, 0.6);
}

.graphArrowHead {
    position: absolute;
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #00ffff;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
}

.graphMirror {
    position: absolute;
    background: repeating-linear-gradient(
        to right,
        rgba(0,255,255,0.65),
        rgba(0,255,255,0.65) 6px,
        rgba(0,255,255,0.15) 6px,
        rgba(0,255,255,0.15) 12px
    );
}

/* ============================================
   MODERNIZED DESIGN SYSTEM
   Enhanced with glassmorphism, advanced gradients,
   and smooth animations using CSS variables
   ============================================ */

/* Theme CSS Custom Properties */
:root,
.theme-default {
    /* Default - Cyan Tron Theme */
    --color-bg: #000000;
    --color-bg-panel: rgba(0, 20, 40, 0.9);
    --color-primary: #00ffff;
    --color-primary-glow: rgba(0, 255, 255, 0.3);
    --color-primary-dim: rgba(0, 255, 255, 0.1);
    --color-secondary: #00ccff;
    --color-accent: #ff00ff;
    --color-text: #00ffff;
    --color-text-dim: rgba(0, 255, 255, 0.7);
    --color-success: #00ff00;
    --color-error: #ff0066;
    --color-warning: #ffaa00;
    
    /* Enhanced Design Tokens */
    --glass-blur: 12px;
    --glass-opacity: 0.85;
    --border-glow-spread: 20px;
    --animation-fast: 0.2s;
    --animation-normal: 0.3s;
    --animation-slow: 0.5s;
    --shadow-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-elevation-3: 0 8px 32px rgba(0, 0, 0, 0.5);
    --gradient-shine: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
}

.theme-eva01 {
    /* EVA-01 - Purple/Green Evangelion Theme */
    --color-bg: #201430;
    --color-bg-panel: rgba(32, 20, 48, 0.9);
    --color-primary: #87FF5F;
    --color-primary-glow: rgba(135, 255, 95, 0.3);
    --color-primary-dim: rgba(135, 255, 95, 0.1);
    --color-secondary: #B968FC;
    --color-accent: #D99145;
    --color-text: #E1D6F8;
    --color-text-dim: rgba(225, 214, 248, 0.7);
    --color-success: #8EDF5F;
    --color-error: #DB6088;
    --color-warning: #D99145;
}

.theme-eva02 {
    /* EVA-02 - Red/Orange Evangelion Theme */
    --color-bg: #280000;
    --color-bg-panel: rgba(40, 0, 0, 0.9);
    --color-primary: #FF5701;
    --color-primary-glow: rgba(255, 87, 1, 0.3);
    --color-primary-dim: rgba(255, 87, 1, 0.1);
    --color-secondary: #BD2A1E;
    --color-accent: #00A6BF;
    --color-text: #FFFF92;
    --color-text-dim: rgba(255, 255, 146, 0.7);
    --color-success: #00D200;
    --color-error: #BD2A1E;
    --color-warning: #da6606;
}

.theme-rx0 {
    /* RX-0 Unicorn - White/Red/Gold Gundam Unicorn Theme */
    --color-bg: #0a0a0f;
    --color-bg-panel: rgba(25, 25, 35, 0.9);
    --color-primary: #ffffff;
    --color-primary-glow: rgba(255, 255, 255, 0.4);
    --color-primary-dim: rgba(255, 255, 255, 0.15);
    --color-secondary: #ff3366;
    --color-accent: #ffd700;
    --color-text: #f0f0f5;
    --color-text-dim: rgba(240, 240, 245, 0.7);
    --color-success: #00ff88;
    --color-error: #ff3366;
    --color-warning: #ffaa00;
}

.theme-eva03 {
    /* EVA-03 - Black/Yellow/Orange (from EVA 03.jpg) */
    --color-bg: #0a0a00;
    --color-bg-panel: rgba(10, 10, 0, 0.9);
    --color-primary: #FFD700;
    --color-primary-glow: rgba(255, 215, 0, 0.3);
    --color-primary-dim: rgba(255, 215, 0, 0.1);
    --color-secondary: #FF8C00;
    --color-accent: #FFA500;
    --color-text: #FFF8DC;
    --color-text-dim: rgba(255, 248, 220, 0.7);
    --color-success: #FFD700;
    --color-error: #FF4500;
    --color-warning: #FFA500;
}

.theme-purple-gundam {
    /* Purple Gundam - Purple/Pink/White (from Purple Gundam.jpg) */
    --color-bg: #1a0a1f;
    --color-bg-panel: rgba(26, 10, 31, 0.9);
    --color-primary: #B026FF;
    --color-primary-glow: rgba(176, 38, 255, 0.3);
    --color-primary-dim: rgba(176, 38, 255, 0.1);
    --color-secondary: #FF1493;
    --color-accent: #ffffff;
    --color-text: #E6D5FF;
    --color-text-dim: rgba(230, 213, 255, 0.7);
    --color-success: #B026FF;
    --color-error: #FF1493;
    --color-warning: #FF69B4;
}

.theme-gray-gundam {
    /* Gray Gundam - Gray/Blue/White (from Gray Gundam.jpg) */
    --color-bg: #0f0f14;
    --color-bg-panel: rgba(15, 15, 20, 0.9);
    --color-primary: #B0B0B0;
    --color-primary-glow: rgba(176, 176, 176, 0.3);
    --color-primary-dim: rgba(176, 176, 176, 0.1);
    --color-secondary: #4A90E2;
    --color-accent: #ffffff;
    --color-text: #E0E0E0;
    --color-text-dim: rgba(224, 224, 224, 0.7);
    --color-success: #4A90E2;
    --color-error: #FF6B6B;
    --color-warning: #FFA500;
}

.theme-celestial-pink {
    /* Celestial Pink - Pink/Purple/Cyan/White (from Celestial Pink.jpg) */
    --color-bg: #1a0520;
    --color-bg-panel: rgba(26, 5, 32, 0.9);
    --color-primary: #FF1493;
    --color-primary-glow: rgba(255, 20, 147, 0.3);
    --color-primary-dim: rgba(255, 20, 147, 0.1);
    --color-secondary: #9370DB;
    --color-accent: #00FFFF;
    --color-text: #FFD0E6;
    --color-text-dim: rgba(255, 208, 230, 0.7);
    --color-success: #00FFFF;
    --color-error: #FF1493;
    --color-warning: #FFB6C1;
}

.theme-blue-terminal {
    /* Blue Terminal - Blue/Cyan/White (from Blue Terminal.jpg) */
    --color-bg: #000a1f;
    --color-bg-panel: rgba(0, 10, 31, 0.9);
    --color-primary: #0080FF;
    --color-primary-glow: rgba(0, 128, 255, 0.3);
    --color-primary-dim: rgba(0, 128, 255, 0.1);
    --color-secondary: #00FFFF;
    --color-accent: #FFFFFF;
    --color-text: #B0D9FF;
    --color-text-dim: rgba(176, 217, 255, 0.7);
    --color-success: #00FFFF;
    --color-error: #FF4444;
    --color-warning: #FFA500;
}

.theme-green-terminal {
    /* Green Terminal - Green/Lime/White (from Green Terminal.jpg) */
    --color-bg: #001a00;
    --color-bg-panel: rgba(0, 26, 0, 0.9);
    --color-primary: #00FF00;
    --color-primary-glow: rgba(0, 255, 0, 0.3);
    --color-primary-dim: rgba(0, 255, 0, 0.1);
    --color-secondary: #7FFF00;
    --color-accent: #FFFFFF;
    --color-text: #B0FFB0;
    --color-text-dim: rgba(176, 255, 176, 0.7);
    --color-success: #00FF00;
    --color-error: #FF4444;
    --color-warning: #FFAA00;
}

.theme-orange-terminal {
    /* Orange Terminal - Orange/Yellow/White (from Orange Terminal.jpg) */
    --color-bg: #1a0f00;
    --color-bg-panel: rgba(26, 15, 0, 0.9);
    --color-primary: #FF8C00;
    --color-primary-glow: rgba(255, 140, 0, 0.3);
    --color-primary-dim: rgba(255, 140, 0, 0.1);
    --color-secondary: #FFD700;
    --color-accent: #FFFFFF;
    --color-text: #FFE4B5;
    --color-text-dim: rgba(255, 228, 181, 0.7);
    --color-success: #FFD700;
    --color-error: #FF4500;
    --color-warning: #FFA500;
}

.theme-red-terminal {
    /* Red Terminal - Red/Orange/White (from Red Terminal.jpg) */
    --color-bg: #1a0000;
    --color-bg-panel: rgba(26, 0, 0, 0.9);
    --color-primary: #FF0000;
    --color-primary-glow: rgba(255, 0, 0, 0.3);
    --color-primary-dim: rgba(255, 0, 0, 0.1);
    --color-secondary: #FF4500;
    --color-accent: #FFFFFF;
    --color-text: #FFB0B0;
    --color-text-dim: rgba(255, 176, 176, 0.7);
    --color-success: #FF6347;
    --color-error: #FF0000;
    --color-warning: #FF8C00;
}

.theme-solo-leveling {
    /* Solo Leveling - Purple/Blue/Gold/White (from Solo Leveling Theme.jpg) */
    --color-bg: #0a0014;
    --color-bg-panel: rgba(10, 0, 20, 0.9);
    --color-primary: #8B00FF;
    --color-primary-glow: rgba(139, 0, 255, 0.3);
    --color-primary-dim: rgba(139, 0, 255, 0.1);
    --color-secondary: #4169E1;
    --color-accent: #FFD700;
    --color-text: #D8BFD8;
    --color-text-dim: rgba(216, 191, 216, 0.7);
    --color-success: #FFD700;
    --color-error: #FF1493;
    --color-warning: #FFA500;
}

.theme-nova-kit {
    /* Nova Kit - Cyan/Blue/White (from Nova Kit.jpg) */
    --color-bg: #001420;
    --color-bg-panel: rgba(0, 20, 32, 0.9);
    --color-primary: #00CED1;
    --color-primary-glow: rgba(0, 206, 209, 0.3);
    --color-primary-dim: rgba(0, 206, 209, 0.1);
    --color-secondary: #1E90FF;
    --color-accent: #FFFFFF;
    --color-text: #AFEEEE;
    --color-text-dim: rgba(175, 238, 238, 0.7);
    --color-success: #00CED1;
    --color-error: #FF6B6B;
    --color-warning: #FFA500;
}

.theme-hydra-kit {
    /* Hydra Kit - Green/Teal/Yellow (from Hydra Kit.jpg) */
    --color-bg: #001a14;
    --color-bg-panel: rgba(0, 26, 20, 0.9);
    --color-primary: #00FF7F;
    --color-primary-glow: rgba(0, 255, 127, 0.3);
    --color-primary-dim: rgba(0, 255, 127, 0.1);
    --color-secondary: #20B2AA;
    --color-accent: #FFFF00;
    --color-text: #B0FFC0;
    --color-text-dim: rgba(176, 255, 192, 0.7);
    --color-success: #00FF7F;
    --color-error: #FF4444;
    --color-warning: #FFFF00;
}

.theme-cyberpunk-purple {
    /* Cyberpunk Purple - Purple/Pink/Cyan/White (from Cyber Punk Purple.jpg) */
    --color-bg: #0f0020;
    --color-bg-panel: rgba(15, 0, 32, 0.9);
    --color-primary: #9D00FF;
    --color-primary-glow: rgba(157, 0, 255, 0.3);
    --color-primary-dim: rgba(157, 0, 255, 0.1);
    --color-secondary: #FF00FF;
    --color-accent: #00FFFF;
    --color-text: #E6D5FF;
    --color-text-dim: rgba(230, 213, 255, 0.7);
    --color-success: #00FFFF;
    --color-error: #FF1493;
    --color-warning: #FF69B4;
}

.theme-red-yellow-mech {
    /* Red/Yellow Mech - Red/Yellow/Orange (from Red Yellow Mech.jpg) */
    --color-bg: #1a0a00;
    --color-bg-panel: rgba(26, 10, 0, 0.9);
    --color-primary: #FF0000;
    --color-primary-glow: rgba(255, 0, 0, 0.3);
    --color-primary-dim: rgba(255, 0, 0, 0.1);
    --color-secondary: #FFFF00;
    --color-accent: #FF8C00;
    --color-text: #FFD9B3;
    --color-text-dim: rgba(255, 217, 179, 0.7);
    --color-success: #FFFF00;
    --color-error: #FF0000;
    --color-warning: #FF8C00;
}

.theme-gray-white-gundam {
    /* Gray/White Gundam - Gray/White/Blue (from Gray White Gundam.jpg) */
    --color-bg: #0a0a0f;
    --color-bg-panel: rgba(10, 10, 15, 0.9);
    --color-primary: #C0C0C0;
    --color-primary-glow: rgba(192, 192, 192, 0.3);
    --color-primary-dim: rgba(192, 192, 192, 0.1);
    --color-secondary: #FFFFFF;
    --color-accent: #4682B4;
    --color-text: #E8E8E8;
    --color-text-dim: rgba(232, 232, 232, 0.7);
    --color-success: #4682B4;
    --color-error: #FF6B6B;
    --color-warning: #FFA500;
}

.theme-purple-white-gundam {
    /* Purple/White Gundam - Purple/White/Gold (from Purple White Gundam.jpg) */
    --color-bg: #14001a;
    --color-bg-panel: rgba(20, 0, 26, 0.9);
    --color-primary: #9370DB;
    --color-primary-glow: rgba(147, 112, 219, 0.3);
    --color-primary-dim: rgba(147, 112, 219, 0.1);
    --color-secondary: #FFFFFF;
    --color-accent: #FFD700;
    --color-text: #E6D5FF;
    --color-text-dim: rgba(230, 213, 255, 0.7);
    --color-success: #FFD700;
    --color-error: #FF1493;
    --color-warning: #FFA500;
}

.theme-wb-mecha {
    /* WB Mecha - White/Blue/Red (from WB Mecha 01.jpg) */
    --color-bg: #0a0a14;
    --color-bg-panel: rgba(10, 10, 20, 0.9);
    --color-primary: #FFFFFF;
    --color-primary-glow: rgba(255, 255, 255, 0.3);
    --color-primary-dim: rgba(255, 255, 255, 0.1);
    --color-secondary: #1E90FF;
    --color-accent: #FF4444;
    --color-text: #F0F0F5;
    --color-text-dim: rgba(240, 240, 245, 0.7);
    --color-success: #1E90FF;
    --color-error: #FF4444;
    --color-warning: #FFA500;
}

.theme-yellow-terminal {
    /* Yellow Terminal - Yellow/Orange/Black (from Yellow Terminal.gif) */
    --color-bg: #141000;
    --color-bg-panel: rgba(20, 16, 0, 0.9);
    --color-primary: #FFFF00;
    --color-primary-glow: rgba(255, 255, 0, 0.3);
    --color-primary-dim: rgba(255, 255, 0, 0.1);
    --color-secondary: #FFD700;
    --color-accent: #FF8C00;
    --color-text: #FFFFCC;
    --color-text-dim: rgba(255, 255, 204, 0.7);
    --color-success: #FFFF00;
    --color-error: #FF4444;
    --color-warning: #FF8C00;
}

/* CRT Screen effect */
@keyframes flicker {
    0% { opacity: 0.97; }
    50% { opacity: 1; }
    100% { opacity: 0.97; }
}

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

@keyframes textGlow {
    0%, 100% { 
        text-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary); 
    }
    50% { 
        text-shadow: 0 0 20px var(--color-primary), 0 0 30px var(--color-primary), 0 0 40px var(--color-primary); 
    }
}

body {
    font-family: 'Courier New', 'Courier', monospace;
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* CRT Screen overlay */
body::before {
    content: '';
    position: fixed;
    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: 1000;
    animation: flicker 0.15s infinite;
}

/* Scanline effect */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-primary-dim);
    pointer-events: none;
    z-index: 999;
    animation: scanline 6s linear infinite;
}

/* Screen curvature effect */
#app-root {
    /* Removed filter and perspective as they create a containing block for position:fixed elements */
    /* filter: contrast(1.1) brightness(1.1); */
    /* perspective: 1000px; */
}

#app-root {
    width: 100%;
    max-width: 900px;
    padding: clamp(10px, 3vw, 20px);
    z-index: 1;
}

/* Card/Panel styles */
.panel {
    background: linear-gradient(
        145deg,
        var(--color-bg-panel) 0%,
        rgba(0, 10, 20, 0.95) 50%,
        var(--color-bg-panel) 100%
    );
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    padding: clamp(15px, 4vw, 30px);
    box-shadow: 
        0 0 30px var(--color-primary-glow),
        0 0 60px var(--color-primary-dim),
        inset 0 0 100px var(--color-primary-dim),
        0 20px 40px rgba(0, 0, 0, 0.5);
    margin-bottom: clamp(12px, 3vw, 20px);
    position: relative;
    animation: panelEnter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(var(--glass-blur, 12px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 12px));
}

/* Add extra bottom padding to panels with floating quiz buttons to prevent overlap */
.panel:has(.quiz-action-buttons) {
    padding-bottom: clamp(100px, 18vw, 140px);
}

@keyframes panelEnter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 255, 0.03) 2px,
        rgba(0, 255, 255, 0.03) 4px
    );
    pointer-events: none;
    border-radius: 8px;
}

.panel-header {
    font-size: clamp(1.1rem, 3vw + 0.3rem, 2.5rem);
    text-align: center;
    margin-bottom: clamp(15px, 3vw, 30px);
    text-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary), 0 0 30px var(--color-primary);
    letter-spacing: clamp(1px, 0.3vw, 4px);
    animation: textGlow 2s ease-in-out infinite, typeIn 1s steps(20);
    font-weight: bold;
    position: relative;
    color: var(--color-primary);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

@keyframes typeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   GUNDAM MECHA PANEL STYLES
   13 panel style variations with geometric cuts,
   panel lines, and technical mecha aesthetics
   SHAPE-ONLY: All colors inherit from active theme
   ======================================== */

/* Blue Mech Panel - Angular cuts with diagonal corner */
.panel-blue-mech {
    clip-path: polygon(
        0 0, 100% 0, 100% calc(100% - 20px), 
        calc(100% - 20px) 100%, 0 100%
    );
    border: 3px solid var(--color-primary);
    position: relative;
}

.panel-blue-mech::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid var(--color-primary);
    opacity: 0.3;
    pointer-events: none;
    clip-path: polygon(
        0 0, calc(100% - 10px) 0, 100% 10px,
        100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%
    );
}

.panel-blue-mech::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25px;
    height: 25px;
    border-left: 2px solid var(--color-primary);
    border-top: 2px solid var(--color-primary);
    transform: rotate(45deg);
    transform-origin: bottom right;
}

/* Cyberpunk Panels 01 - Tech panel cuts with circuit grid */
.panel-cyberpunk01 {
    clip-path: polygon(
        15px 0, 100% 0, 100% calc(100% - 15px),
        calc(100% - 15px) 100%, 0 100%, 0 15px
    );
    border: 2px solid var(--color-primary);
    position: relative;
}

.panel-cyberpunk01::before {
    content: '';
    position: absolute;
    inset: 8px;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        var(--color-primary) 2px,
        var(--color-primary) 3px
    ),
    repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 2px,
        var(--color-primary) 2px,
        var(--color-primary) 3px
    );
    opacity: 0.05;
    pointer-events: none;
}

.panel-cyberpunk01::after {
    content: '▶';
    position: absolute;
    top: 5px;
    left: 5px;
    color: var(--color-primary);
    font-size: 12px;
    opacity: 0.7;
}

/* Cyberpunk Panels 02 - Circuit board style with gradient borders */
.panel-cyberpunk02 {
    border: 1px solid var(--color-primary);
    border-radius: 0;
    position: relative;
}

.panel-cyberpunk02::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        45deg,
        var(--color-primary) 0%,
        transparent 30%,
        transparent 70%,
        var(--color-secondary) 100%
    );
    z-index: -1;
    opacity: 0.3;
}

.panel-cyberpunk02::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px dashed var(--color-primary);
    opacity: 0.2;
    pointer-events: none;
}

/* Gungale Panels - Angular military cuts */
.panel-gungale {
    clip-path: polygon(
        0 0, calc(100% - 30px) 0, 100% 30px,
        100% 100%, 30px 100%, 0 calc(100% - 30px)
    );
    border: 3px solid var(--color-primary);
    position: relative;
}

.panel-gungale::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    border-bottom: 2px solid var(--color-secondary);
    border-left: 2px solid var(--color-secondary);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.panel-gungale::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 35px;
    border-top: 2px solid var(--color-secondary);
    border-right: 2px solid var(--color-secondary);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* Pink Mech - Elegant technical panels with diamond */
.panel-pink-mech {
    border: 2px solid var(--color-primary);
    border-radius: 0;
    position: relative;
}

.panel-pink-mech::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid var(--color-primary);
    clip-path: polygon(
        10px 0, calc(100% - 10px) 0, 100% 10px,
        100% calc(100% - 10px), calc(100% - 10px) 100%,
        10px 100%, 0 calc(100% - 10px), 0 10px
    );
    opacity: 0.4;
}

.panel-pink-mech::after {
    content: '◆';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-primary);
    font-size: 16px;
    text-shadow: 0 0 10px var(--color-primary-glow);
}

/* Purple Mech - Purple geometric cuts with corner triangles */
.panel-purple-mech {
    clip-path: polygon(
        0 12px, 12px 0, 100% 0, 100% calc(100% - 12px),
        calc(100% - 12px) 100%, 0 100%
    );
    border: 2px solid var(--color-primary);
    position: relative;
}

.panel-purple-mech::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-secondary);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.panel-purple-mech::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-secondary);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Unicorn Panels - RX-0 style frames with horn accent */
.panel-unicorn {
    border: 3px solid var(--color-primary);
    border-radius: 2px;
    position: relative;
}

.panel-unicorn::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 6px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--color-primary) 50%, 
        transparent 100%
    );
    box-shadow: 0 0 15px var(--color-primary-glow);
}

.panel-unicorn::after {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid var(--color-primary);
    opacity: 0.3;
    pointer-events: none;
}

/* WB Mecha Panels - White/Blue technical style with corner cut */
.panel-wb-mecha {
    border: 2px solid var(--color-primary);
    border-radius: 0;
    clip-path: polygon(
        20px 0, 100% 0, 100% calc(100% - 20px),
        calc(100% - 20px) 100%, 0 100%, 0 20px
    );
    position: relative;
}

.panel-wb-mecha::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    border-right: 2px solid var(--color-secondary);
    border-bottom: 2px solid var(--color-secondary);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.panel-wb-mecha::after {
    content: '■';
    position: absolute;
    bottom: 8px;
    right: 8px;
    color: var(--color-primary);
    font-size: 14px;
    opacity: 0.5;
}

/* White SciFi 01 - Clean scifi borders with corner brackets */
.panel-white-scifi01 {
    border: 1px solid var(--color-primary);
    border-radius: 0;
    position: relative;
}

.panel-white-scifi01::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 40px;
    height: 40px;
    border-top: 3px solid var(--color-primary);
    border-left: 3px solid var(--color-primary);
}

.panel-white-scifi01::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 40px;
    height: 40px;
    border-bottom: 3px solid var(--color-primary);
    border-right: 3px solid var(--color-primary);
}

/* White SciFi 02 - Minimal tech frames with center line */
/* White SciFi 02 - Intricate clipped corners with double borders and hash decorations */
.panel-white-scifi02 {
    border: 2px solid var(--color-primary);
    border-radius: 0;
    position: relative;
    /* Clipped corners - top-left and bottom-right beveled */
    clip-path: polygon(
        20px 0%, 100% 0%, 100% calc(100% - 20px),
        calc(100% - 20px) 100%, 0% 100%, 0% 20px
    );
    background: linear-gradient(
        145deg,
        var(--color-bg-panel) 0%,
        rgba(0, 0, 0, 0.95) 100%
    );
}

.panel-white-scifi02::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid var(--color-primary);
    opacity: 0.5;
    clip-path: polygon(
        16px 0%, 100% 0%, 100% calc(100% - 16px),
        calc(100% - 16px) 100%, 0% 100%, 0% 16px
    );
    pointer-events: none;
}

.panel-white-scifi02::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 40px;
    height: 12px;
    background: repeating-linear-gradient(
        -45deg,
        var(--color-primary) 0px,
        var(--color-primary) 2px,
        transparent 2px,
        transparent 4px
    );
    opacity: 0.6;
}

/* White SciFi 03 - Modern panels with corner brackets */
.panel-white-scifi03 {
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    position: relative;
}

.panel-white-scifi03::before,
.panel-white-scifi03::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--color-secondary);
}

.panel-white-scifi03::before {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
}

.panel-white-scifi03::after {
    bottom: 8px;
    right: 8px;
    border-left: none;
    border-top: none;
}

/* Word Boxes - Text container style with system header */
.panel-word-boxes {
    border: 2px solid var(--color-primary);
    border-radius: 0;
    position: relative;
    padding: 35px 25px 25px 25px;
}

.panel-word-boxes::before {
    content: '[ SYSTEM ]';
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 11px;
    font-weight: bold;
    color: var(--color-primary);
    letter-spacing: 2px;
    opacity: 0.7;
}

.panel-word-boxes::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    border-bottom: 1px solid var(--color-primary);
    opacity: 0.3;
}

/* Yellow Mech - Warning panels with caution stripes */
.panel-yellow-mech {
    border: 3px solid var(--color-primary);
    border-radius: 0;
    position: relative;
}

.panel-yellow-mech::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: repeating-linear-gradient(
        45deg,
        var(--color-primary) 0px,
        var(--color-primary) 10px,
        transparent 10px,
        transparent 20px
    );
    opacity: 0.3;
}

.panel-yellow-mech::after {
    content: '⚠';
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--color-primary);
    font-size: 20px;
    animation: pulseWarning 2s ease-in-out infinite;
}

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

/* END GUNDAM MECHA PANEL STYLES */

/* ========================================
   UI LAYOUT SYSTEMS
   14 complete GUI restructuring layouts
   Each changes navigation, HUD, data readouts
   ======================================== */

/* Aida Layout - Grid-based tactical UI with corner HUD */
body.layout-aida #app-root {
    position: relative;
}

body.layout-aida #app-root::before {
    content: '◢ TACTICAL SYSTEM ACTIVE ◣';
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-primary);
    font-size: 11px;
    letter-spacing: 3px;
    z-index: 1000;
    opacity: 0.7;
}

body.layout-aida #app-root::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border-top: 2px solid var(--color-primary);
    border-left: 2px solid var(--color-primary);
    opacity: 0.3;
    pointer-events: none;
    z-index: 999;
}

body.layout-aida .panel {
    border-radius: 0;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

/* Blue Mech Layout - Cockpit HUD with status bars */
body.layout-blue-mech #app-root {
    border: 3px solid var(--color-primary);
    border-radius: 0;
    position: relative;
    min-height: 100vh;
}

body.layout-blue-mech #app-root::before {
    content: 'PILOT STATUS: OPTIMAL';
    position: fixed;
    bottom: 10px;
    right: 15px;
    color: var(--color-success);
    font-size: 10px;
    letter-spacing: 2px;
    z-index: 1000;
}

body.layout-blue-mech .panel-header {
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 15px;
    margin-bottom: 25px;
}

/* Blue Terminal Layout - Classic terminal with scan lines */
body.layout-blue-terminal {
    background: #000;
}

body.layout-blue-terminal #app-root {
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 255, 255, 0.03) 0px,
        transparent 1px,
        transparent 2px,
        rgba(0, 255, 255, 0.03) 3px
    );
}

body.layout-blue-terminal .panel {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--color-primary);
    box-shadow: 0 0 20px var(--color-primary-glow);
}

body.layout-blue-terminal .btn {
    border-radius: 0;
    text-shadow: 0 0 5px var(--color-primary);
}

/* Celestial Pink Layout - Elegant modern UI with soft edges */
body.layout-celestial-pink .panel {
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-bg-panel) 0%, rgba(255, 105, 180, 0.05) 100%);
}

body.layout-celestial-pink .panel-header {
    background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

body.layout-celestial-pink .btn {
    border-radius: 25px;
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-primary-dim) 100%);
}

/* Covert Ops Layout - Military stealth interface with brackets */
body.layout-covert-ops #app-root {
    position: relative;
}

body.layout-covert-ops #app-root::before,
body.layout-covert-ops #app-root::after {
    content: '';
    position: fixed;
    width: 80px;
    height: 80px;
    border: 3px solid var(--color-primary);
    opacity: 0.4;
    z-index: 999;
    pointer-events: none;
}

body.layout-covert-ops #app-root::before {
    top: 15px;
    left: 15px;
    border-right: none;
    border-bottom: none;
}

body.layout-covert-ops #app-root::after {
    bottom: 15px;
    right: 15px;
    border-left: none;
    border-top: none;
}

body.layout-covert-ops .panel {
    clip-path: polygon(
        30px 0, calc(100% - 30px) 0, 100% 30px,
        100% calc(100% - 30px), calc(100% - 30px) 100%,
        30px 100%, 0 calc(100% - 30px), 0 30px
    );
}

/* Green Terminal Layout - Matrix-style with green glow */
body.layout-green-terminal {
    background: #000;
}

body.layout-green-terminal #app-root {
    text-shadow: 0 0 5px var(--color-primary);
}

body.layout-green-terminal .panel {
    background: rgba(0, 20, 0, 0.95);
    box-shadow: 
        0 0 30px var(--color-primary-glow),
        inset 0 0 50px rgba(0, 255, 0, 0.1);
}

body.layout-green-terminal .panel-header {
    animation: textGlow 1.5s ease-in-out infinite;
}

/* Nova Kit Layout - Tech readout with data streams */
body.layout-nova-kit #app-root::before {
    content: '█████ DATA STREAM ACTIVE █████';
    position: fixed;
    top: 5px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--color-primary);
    font-size: 9px;
    letter-spacing: 2px;
    opacity: 0.5;
    z-index: 1000;
    animation: dataStream 3s linear infinite;
}

@keyframes dataStream {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

body.layout-nova-kit .panel {
    position: relative;
    overflow: hidden;
}

body.layout-nova-kit .panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    animation: scanLine 4s linear infinite;
}

@keyframes scanLine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Orange SciFi Layout - Futuristic orange HUD with hexagons */
body.layout-orange-scifi .panel {
    clip-path: polygon(
        10% 0, 90% 0, 100% 10%, 100% 90%,
        90% 100%, 10% 100%, 0 90%, 0 10%
    );
    background: 
        linear-gradient(var(--color-bg-panel) 0%, rgba(255, 140, 0, 0.05) 100%),
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 50px,
            rgba(255, 140, 0, 0.02) 50px,
            rgba(255, 140, 0, 0.02) 100px
        );
}

body.layout-orange-scifi .btn {
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    border-radius: 0;
}

/* Orange Terminal Layout - Amber terminal aesthetic */
body.layout-orange-terminal {
    background: #0a0500;
}

body.layout-orange-terminal .panel {
    background: rgba(20, 10, 0, 0.9);
    border-color: var(--color-primary);
    box-shadow: 0 0 25px rgba(255, 140, 0, 0.3);
}

body.layout-orange-terminal .btn {
    background: rgba(20, 10, 0, 0.95);
    border-radius: 0;
}

/* Pink Mech Layout - Pink gundam cockpit with feminine touch */
/* Removed floating "Combat System Online" text that was appearing behind content */

body.layout-pink-mech .panel {
    border: 2px solid;
    border-image: linear-gradient(45deg, var(--color-primary), var(--color-secondary)) 1;
    background: radial-gradient(ellipse at top, rgba(255, 105, 180, 0.08) 0%, var(--color-bg-panel) 60%);
}

body.layout-pink-mech .panel-header::before {
    content: '◆';
    margin-right: 10px;
}

body.layout-pink-mech .panel-header::after {
    content: '◆';
    margin-left: 10px;
}

/* Purple Mech Layout - Purple technical UI with angular design */
body.layout-purple-mech .panel {
    clip-path: polygon(
        12px 0, calc(100% - 12px) 0, 100% 12px,
        100% calc(100% - 12px), calc(100% - 12px) 100%,
        12px 100%, 0 calc(100% - 12px), 0 12px
    );
    background: linear-gradient(135deg, var(--color-bg-panel) 0%, rgba(128, 0, 255, 0.05) 100%);
}

body.layout-purple-mech .btn {
    clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}

/* Yellow Mech Layout - Warning system HUD with caution aesthetic */
body.layout-yellow-mech #app-root::before {
    content: '⚠ WARNING: HIGH PERFORMANCE MODE ⚠';
    position: fixed;
    top: 8px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--color-primary);
    font-size: 10px;
    letter-spacing: 2px;
    z-index: 1000;
    animation: pulseWarning 1.5s ease-in-out infinite;
}

body.layout-yellow-mech .panel {
    border: 3px solid var(--color-primary);
    border-top: 8px solid var(--color-primary);
    background: linear-gradient(to bottom, rgba(255, 200, 0, 0.05) 0%, var(--color-bg-panel) 30%);
}

body.layout-yellow-mech .panel::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: repeating-linear-gradient(
        45deg,
        var(--color-primary) 0px,
        var(--color-primary) 8px,
        transparent 8px,
        transparent 16px
    );
    opacity: 0.5;
}

/* Yellow Terminal Layout - Animated terminal with scan effects */
body.layout-yellow-terminal {
    background: #0a0a00;
}

body.layout-yellow-terminal #app-root {
    position: relative;
}

body.layout-yellow-terminal #app-root::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        rgba(255, 255, 0, 0.02) 1px,
        transparent 2px
    );
    animation: scanLines 8s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes scanLines {
    0% { transform: translateY(0); }
    100% { transform: translateY(20px); }
}

body.layout-yellow-terminal .panel {
    background: rgba(20, 20, 0, 0.95);
    border: 1px solid var(--color-primary);
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.2);
}

/* END UI LAYOUT SYSTEMS */

/* ========================================
   CHARACTER SCREEN LAYOUTS
   3 character/status screen variations
   ======================================== */

/* Equipment Loadout - Tactical gear grid layout */
body.char-equipment-loadout .status-container {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
}

body.char-equipment-loadout .character-avatar {
    grid-row: 1 / 3;
    width: 200px;
    height: 200px;
    border: 3px solid var(--color-primary);
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    position: relative;
}

body.char-equipment-loadout .character-avatar::after {
    content: 'PILOT';
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--color-primary);
}

body.char-equipment-loadout .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

body.char-equipment-loadout .stat-item {
    padding: 12px;
    border: 2px solid var(--color-primary);
    background: var(--color-bg);
    text-align: center;
}

body.char-equipment-loadout .stat-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--color-text-dim);
    margin-bottom: 5px;
}

body.char-equipment-loadout .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-primary);
}

/* Gundam Loadout - Mecha customization with radial slots */
body.char-gundam-loadout .status-container {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.char-gundam-loadout .character-avatar {
    width: 250px;
    height: 250px;
    border: 4px solid var(--color-primary);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--color-primary-dim) 0%, var(--color-bg) 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100px;
    margin: 30px auto;
    position: relative;
    box-shadow: 0 0 40px var(--color-primary-glow);
}

body.char-gundam-loadout .character-avatar::before {
    content: '';
    position: absolute;
    inset: -15px;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    opacity: 0.3;
}

body.char-gundam-loadout .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 600px;
    margin-top: 30px;
}

body.char-gundam-loadout .stat-item {
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-panel) 100%);
    border: 2px solid var(--color-primary);
    padding: 15px;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

body.char-gundam-loadout .stat-label {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--color-secondary);
    text-transform: uppercase;
}

body.char-gundam-loadout .stat-value {
    font-size: 28px;
    font-weight: bold;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary-glow);
}

/* Primary Stat Screen - Horizontal stat bars */
body.char-primary-stats .stats-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

body.char-primary-stats .stat-item {
    background: var(--color-bg);
    border: 2px solid var(--color-primary);
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

body.char-primary-stats .stat-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--stat-percent, 0%);
    background: linear-gradient(90deg, var(--color-primary-dim) 0%, transparent 100%);
    opacity: 0.3;
    transition: width 0.5s ease;
}

body.char-primary-stats .stat-label {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--color-text);
    text-transform: uppercase;
    z-index: 1;
}

body.char-primary-stats .stat-value {
    font-size: 20px;
    font-weight: bold;
    color: var(--color-primary);
    z-index: 1;
}

/* END CHARACTER SCREEN LAYOUTS */

/* ========================================
   BOOT ANIMATION VARIANTS
   5 different boot sequence styles
   ======================================== */

/* Classic Boot (existing default) - already implemented */

/* Inspiration 1 Boot - Fast tech startup */
body.boot-inspiration1 .boot-screen {
    background: linear-gradient(135deg, #000 0%, #001a1a 100%);
}

body.boot-inspiration1 .boot-line {
    animation: bootFadeInFast 0.15s ease-out forwards;
}

@keyframes bootFadeInFast {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Inspiration 2 Boot - Minimalist quick boot */
body.boot-inspiration2 .boot-screen {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.boot-inspiration2 .boot-logo {
    font-size: 80px;
    color: var(--color-primary);
    animation: logoFlash 0.5s ease-out;
}

@keyframes logoFlash {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

/* Inspiration 3 Boot - Detailed system check */
body.boot-inspiration3 .boot-screen {
    background: #000;
    padding: 40px;
}

body.boot-inspiration3 .boot-line {
    border-left: 3px solid var(--color-primary);
    padding-left: 10px;
    margin: 5px 0;
    animation: bootSlideIn 0.3s ease-out forwards;
}

@keyframes bootSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
        border-left-color: transparent;
    }
    to {
        opacity: 1;
        transform: translateX(0);
        border-left-color: var(--color-primary);
    }
}

/* Retro Tech Boot - CRT screen effect with glitch */
body.boot-retro-tech .boot-screen {
    background: #000;
    position: relative;
    overflow: hidden;
}

body.boot-retro-tech .boot-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        rgba(0, 255, 0, 0.05) 1px,
        transparent 2px,
        transparent 4px
    );
    animation: scanlineMove 8s linear infinite;
    pointer-events: none;
}

@keyframes scanlineMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(40px); }
}

body.boot-retro-tech .boot-line {
    text-shadow: 0 0 5px var(--color-primary);
    animation: bootGlitch 0.4s ease-out forwards;
}

@keyframes bootGlitch {
    0% { 
        opacity: 0;
        transform: translateX(-5px);
        filter: blur(2px);
    }
    20% {
        opacity: 0.5;
        transform: translateX(3px);
    }
    40% {
        opacity: 0.8;
        transform: translateX(-2px);
    }
    60% {
        opacity: 1;
        transform: translateX(1px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* END BOOT ANIMATION VARIANTS */

/* Button styles */
.btn {
    background: linear-gradient(180deg, var(--color-bg-panel) 0%, var(--color-bg) 100%);
    color: var(--color-text);
    border: 2px solid var(--color-primary);
    padding: clamp(8px, 1.5vw, 12px) clamp(14px, 3vw, 24px);
    font-size: clamp(0.7rem, 1.2vw, 0.95rem);
    cursor: pointer;
    border-radius: 6px;
    transition: all var(--animation-normal, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: clamp(1px, 0.3vw, 2px);
    font-family: 'Courier New', 'Courier', monospace;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    text-shadow: 0 0 8px var(--color-primary-glow, rgba(0, 255, 255, 0.3));
    white-space: nowrap;
    text-overflow: ellipsis;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 
        0 0 10px var(--color-primary-dim, rgba(0, 255, 255, 0.1)),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s ease;
    z-index: 1;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    background: linear-gradient(180deg, var(--color-primary-dim) 0%, var(--color-bg-panel) 100%);
    box-shadow: 
        0 0 20px var(--color-primary-glow),
        0 0 40px var(--color-primary-dim),
        0 5px 20px rgba(0, 0, 0, 0.4),
        inset 0 0 20px var(--color-primary-dim);
    transform: translateY(-3px) scale(1.02);
    color: var(--color-text);
    border-color: var(--color-primary);
    text-shadow: 0 0 15px var(--color-primary);
}

.btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 
        0 0 15px var(--color-primary-glow),
        inset 0 0 30px var(--color-primary-dim);
    transition-duration: 0.1s;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(50%);
    transform: none;
}

.btn-small {
    padding: clamp(5px, 1vw, 8px) clamp(10px, 2vw, 16px);
    font-size: clamp(0.65rem, 1.1vw, 0.9rem);
}

.btn-large {
    padding: clamp(10px, 2vw, 16px) clamp(18px, 4vw, 32px);
    font-size: clamp(0.85rem, 1.8vw, 1.2rem);
}

/* ============================================
   ENHANCED CARD SYSTEM
   Premium cards with glassmorphism, 
   animated borders, and hover effects
   ============================================ */

.subject-card,
.topic-card,
.mode-card,
.difficulty-card {
    background: linear-gradient(
        145deg,
        rgba(0, 30, 50, 0.9) 0%,
        var(--color-bg-panel) 50%,
        rgba(0, 20, 40, 0.95) 100%
    );
    border: 2px solid var(--color-primary);
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
        0 0 15px var(--color-primary-dim),
        inset 0 0 50px var(--color-primary-dim),
        0 8px 20px rgba(0, 0, 0, 0.3);
}

.subject-card::before,
.topic-card::before,
.mode-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    transition: left 0.6s ease;
    transform: skewX(-15deg);
}

.subject-card:hover::before,
.topic-card:hover::before,
.mode-card:hover::before {
    left: 150%;
}

.subject-card:hover,
.topic-card:hover,
.mode-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--color-primary);
    box-shadow: 
        0 0 30px var(--color-primary-glow),
        0 0 60px var(--color-primary-dim),
        0 20px 40px rgba(0, 0, 0, 0.4),
        inset 0 0 80px var(--color-primary-dim);
}

.subject-card:active,
.topic-card:active,
.mode-card:active {
    transform: translateY(-4px) scale(1.01);
    transition-duration: 0.1s;
}

/* Card corner decorations */
.subject-card::after,
.topic-card::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-top: 2px solid var(--color-primary);
    border-right: 2px solid var(--color-primary);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.subject-card:hover::after,
.topic-card:hover::after {
    opacity: 1;
    width: 30px;
    height: 30px;
    box-shadow: 0 0 10px var(--color-primary-glow);
}

/* Grid layouts */
.grid {
    display: grid;
    gap: 15px;
    margin: 20px 0;
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ============================================
   SCI-FI INTRICATE PANEL STYLE
   Inspired by White SciFi 02 reference
   Clipped corners, double borders, hash marks
   ============================================ */

/* Sci-Fi Panel - applies to cards and buttons when using .scifi-panel class */
.scifi-panel {
    position: relative;
    background: linear-gradient(
        145deg,
        var(--color-bg-panel) 0%,
        rgba(0, 0, 0, 0.95) 100%
    );
    border: 2px solid var(--color-primary);
    border-radius: 0 !important;
    /* Clipped corners - top-left and bottom-right beveled */
    clip-path: polygon(
        15px 0%, 100% 0%, 100% 0%,
        100% calc(100% - 15px), calc(100% - 15px) 100%,
        0% 100%, 0% 100%, 0% 15px
    );
    overflow: visible;
}

/* Inner border effect */
.scifi-panel::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid var(--color-primary);
    opacity: 0.4;
    clip-path: polygon(
        12px 0%, 100% 0%, 100% 0%,
        100% calc(100% - 12px), calc(100% - 12px) 100%,
        0% 100%, 0% 100%, 0% 12px
    );
    pointer-events: none;
    z-index: 1;
}

/* Hash decoration in corner */
.scifi-panel::after {
    content: '';
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 30px;
    height: 8px;
    background: repeating-linear-gradient(
        -45deg,
        var(--color-primary) 0px,
        var(--color-primary) 2px,
        transparent 2px,
        transparent 4px
    );
    opacity: 0.5;
    pointer-events: none;
    z-index: 2;
}

.scifi-panel:hover {
    border-color: var(--color-primary);
    box-shadow: 
        0 0 20px var(--color-primary-glow),
        0 0 40px var(--color-primary-dim),
        inset 0 0 30px var(--color-primary-dim);
}

.scifi-panel:hover::before {
    opacity: 0.7;
}

.scifi-panel:hover::after {
    opacity: 0.8;
}

/* Apply Sci-Fi style globally when panel style is white-scifi02 */
body.panel-style-white-scifi02 .subject-card,
body.panel-style-white-scifi02 .topic-card,
body.panel-style-white-scifi02 .mode-card,
body.panel-style-white-scifi02 .difficulty-card {
    background: linear-gradient(
        145deg,
        var(--color-bg-panel) 0%,
        rgba(0, 0, 0, 0.95) 100%
    ) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: 0 !important;
    overflow: visible !important;
    /* Beveled corners - top-left and bottom-right cut */
    clip-path: polygon(
        16px 0%, 
        100% 0%, 
        100% calc(100% - 16px), 
        calc(100% - 16px) 100%, 
        0% 100%, 
        0% 16px
    ) !important;
}

body.panel-style-white-scifi02 .subject-card::before,
body.panel-style-white-scifi02 .topic-card::before,
body.panel-style-white-scifi02 .mode-card::before,
body.panel-style-white-scifi02 .difficulty-card::before {
    content: '' !important;
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    right: 5px !important;
    bottom: 5px !important;
    width: auto !important;
    height: auto !important;
    border: 1px solid var(--color-primary) !important;
    opacity: 0.5 !important;
    clip-path: polygon(
        13px 0%, 
        100% 0%, 
        100% calc(100% - 13px), 
        calc(100% - 13px) 100%, 
        0% 100%, 
        0% 13px
    ) !important;
    pointer-events: none !important;
    background: transparent !important;
    transform: none !important;
    z-index: 1 !important;
}

body.panel-style-white-scifi02 .subject-card::after,
body.panel-style-white-scifi02 .topic-card::after,
body.panel-style-white-scifi02 .mode-card::after,
body.panel-style-white-scifi02 .difficulty-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    top: auto !important;
    left: auto !important;
    width: 30px !important;
    height: 8px !important;
    background: repeating-linear-gradient(
        -45deg,
        var(--color-primary) 0px,
        var(--color-primary) 2px,
        transparent 2px,
        transparent 4px
    ) !important;
    opacity: 0.6 !important;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    z-index: 2 !important;
}

body.panel-style-white-scifi02 .subject-card:hover::after,
body.panel-style-white-scifi02 .topic-card:hover::after,
body.panel-style-white-scifi02 .mode-card:hover::after,
body.panel-style-white-scifi02 .difficulty-card:hover::after {
    opacity: 0.8;
    width: 40px;
    height: 12px;
    box-shadow: none;
}

/* Sci-Fi style for buttons */
body.panel-style-white-scifi02 .btn {
    border-radius: 0 !important;
    clip-path: polygon(
        8px 0%, 
        100% 0%, 
        100% calc(100% - 8px), 
        calc(100% - 8px) 100%, 
        0% 100%, 
        0% 8px
    ) !important;
    position: relative;
}

body.panel-style-white-scifi02 .btn::after {
    content: '' !important;
    position: absolute !important;
    bottom: 3px !important;
    right: 3px !important;
    width: 16px !important;
    height: 5px !important;
    background: repeating-linear-gradient(
        -45deg,
        var(--color-primary) 0px,
        var(--color-primary) 1.5px,
        transparent 1.5px,
        transparent 3px
    ) !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
}

body.panel-style-white-scifi02 .btn:hover::after {
    opacity: 0.8 !important;
}

/* Sci-Fi style for panels */
body.panel-style-white-scifi02 .panel {
    border-radius: 0 !important;
    clip-path: polygon(
        20px 0%, 
        100% 0%, 
        100% calc(100% - 20px), 
        calc(100% - 20px) 100%, 
        0% 100%, 
        0% 20px
    ) !important;
}

/* Top-left hash decoration for panels */
body.panel-style-white-scifi02 .panel::before {
    content: '' !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 40px !important;
    height: 10px !important;
    background: repeating-linear-gradient(
        45deg,
        var(--color-primary) 0px,
        var(--color-primary) 2px,
        transparent 2px,
        transparent 4px
    ) !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* Small circle connector decoration */
body.panel-style-white-scifi02 .panel-header::after {
    content: '';
    position: absolute;
    top: -8px;
    right: 20%;
    width: 8px;
    height: 8px;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    background: transparent;
    opacity: 0.6;
}

/* Quiz option cards with sci-fi style */
body.panel-style-white-scifi02 .option-btn {
    border-radius: 0;
    clip-path: polygon(
        12px 0%, calc(100% - 12px) 0%, 100% 12px,
        100% 100%, 100% 100%,
        0% 100%, 0% 100%, 0% 12px
    );
}

body.panel-style-white-scifi02 .option-btn::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--color-primary);
    opacity: 0.3;
    clip-path: polygon(
        10px 0%, calc(100% - 10px) 0%, 100% 10px,
        100% 100%, 100% 100%,
        0% 100%, 0% 100%, 0% 10px
    );
    pointer-events: none;
}

/* Settings cards/boxes */
body.panel-style-white-scifi02 .settings-section {
    border-radius: 0;
    clip-path: polygon(
        15px 0%, calc(100% - 15px) 0%, 100% 15px,
        100% 100%, 100% 100%,
        0% 100%, 0% 100%, 0% 15px
    );
}

/* ============================================
   BLUE MECH INTRICATE PANEL STYLE
   EVA-00 inspired with angular cuts and accent stripes
   ============================================ */
body.panel-style-blue-mech .subject-card,
body.panel-style-blue-mech .topic-card,
body.panel-style-blue-mech .mode-card,
body.panel-style-blue-mech .difficulty-card {
    background: linear-gradient(145deg, var(--color-bg-panel) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
    border: 3px solid var(--color-primary) !important;
    border-radius: 0 !important;
    clip-path: polygon(
        0 0, 100% 0, 100% calc(100% - 18px), 
        calc(100% - 18px) 100%, 0 100%
    ) !important;
}

body.panel-style-blue-mech .subject-card::before,
body.panel-style-blue-mech .topic-card::before,
body.panel-style-blue-mech .mode-card::before,
body.panel-style-blue-mech .difficulty-card::before {
    content: '' !important;
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    width: auto !important;
    height: auto !important;
    border: 1px solid var(--color-primary) !important;
    opacity: 0.4 !important;
    pointer-events: none !important;
    background: transparent !important;
    transform: none !important;
    clip-path: polygon(
        0 0, 100% 0, 100% calc(100% - 14px), 
        calc(100% - 14px) 100%, 0 100%
    ) !important;
}

body.panel-style-blue-mech .subject-card::after,
body.panel-style-blue-mech .topic-card::after,
body.panel-style-blue-mech .mode-card::after,
body.panel-style-blue-mech .difficulty-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    top: auto !important;
    left: auto !important;
    width: 20px !important;
    height: 20px !important;
    border-left: 2px solid var(--color-secondary) !important;
    border-top: 2px solid var(--color-secondary) !important;
    transform: rotate(45deg) !important;
    transform-origin: bottom right !important;
    background: transparent !important;
    opacity: 0.7 !important;
}

body.panel-style-blue-mech .btn {
    border-radius: 0 !important;
    clip-path: polygon(
        0 0, 100% 0, 100% calc(100% - 10px), 
        calc(100% - 10px) 100%, 0 100%
    ) !important;
}

body.panel-style-blue-mech .panel {
    border-radius: 0 !important;
    clip-path: polygon(
        0 0, 100% 0, 100% calc(100% - 25px), 
        calc(100% - 25px) 100%, 0 100%
    ) !important;
}

/* ============================================
   CYBERPUNK 01 INTRICATE PANEL STYLE
   Tech panels with circuit grid and corner cuts
   ============================================ */
body.panel-style-cyberpunk01 .subject-card,
body.panel-style-cyberpunk01 .topic-card,
body.panel-style-cyberpunk01 .mode-card,
body.panel-style-cyberpunk01 .difficulty-card {
    background: linear-gradient(145deg, var(--color-bg-panel) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: 0 !important;
    clip-path: polygon(
        15px 0, 100% 0, 100% calc(100% - 15px),
        calc(100% - 15px) 100%, 0 100%, 0 15px
    ) !important;
}

body.panel-style-cyberpunk01 .subject-card::before,
body.panel-style-cyberpunk01 .topic-card::before,
body.panel-style-cyberpunk01 .mode-card::before,
body.panel-style-cyberpunk01 .difficulty-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 8px !important;
    width: auto !important;
    height: auto !important;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 3px,
        var(--color-primary) 3px,
        var(--color-primary) 4px
    ),
    repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 3px,
        var(--color-primary) 3px,
        var(--color-primary) 4px
    ) !important;
    opacity: 0.05 !important;
    pointer-events: none !important;
    border: none !important;
    transform: none !important;
}

body.panel-style-cyberpunk01 .subject-card::after,
body.panel-style-cyberpunk01 .topic-card::after,
body.panel-style-cyberpunk01 .mode-card::after,
body.panel-style-cyberpunk01 .difficulty-card::after {
    content: '◢' !important;
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    color: var(--color-primary) !important;
    font-size: 10px !important;
    opacity: 0.7 !important;
    border: none !important;
    background: transparent !important;
}

body.panel-style-cyberpunk01 .btn {
    border-radius: 0 !important;
    clip-path: polygon(
        8px 0, 100% 0, 100% calc(100% - 8px),
        calc(100% - 8px) 100%, 0 100%, 0 8px
    ) !important;
}

body.panel-style-cyberpunk01 .panel {
    border-radius: 0 !important;
    clip-path: polygon(
        20px 0, 100% 0, 100% calc(100% - 20px),
        calc(100% - 20px) 100%, 0 100%, 0 20px
    ) !important;
}

/* ============================================
   CYBERPUNK 02 INTRICATE PANEL STYLE
   Circuit board style with gradient borders
   ============================================ */
body.panel-style-cyberpunk02 .subject-card,
body.panel-style-cyberpunk02 .topic-card,
body.panel-style-cyberpunk02 .mode-card,
body.panel-style-cyberpunk02 .difficulty-card {
    background: linear-gradient(145deg, var(--color-bg-panel) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: 0 !important;
    box-shadow: 
        inset 2px 2px 0 var(--color-secondary),
        inset -2px -2px 0 var(--color-primary) !important;
}

body.panel-style-cyberpunk02 .subject-card::before,
body.panel-style-cyberpunk02 .topic-card::before,
body.panel-style-cyberpunk02 .mode-card::before,
body.panel-style-cyberpunk02 .difficulty-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 10px !important;
    width: auto !important;
    height: auto !important;
    border: 1px dashed var(--color-primary) !important;
    opacity: 0.3 !important;
    pointer-events: none !important;
    background: transparent !important;
    transform: none !important;
}

body.panel-style-cyberpunk02 .subject-card::after,
body.panel-style-cyberpunk02 .topic-card::after,
body.panel-style-cyberpunk02 .mode-card::after,
body.panel-style-cyberpunk02 .difficulty-card::after {
    content: '' !important;
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    bottom: auto !important;
    right: auto !important;
    width: 8px !important;
    height: 8px !important;
    background: var(--color-primary) !important;
    opacity: 0.5 !important;
    border: none !important;
}

body.panel-style-cyberpunk02 .btn {
    border-radius: 0 !important;
    box-shadow: 
        inset 1px 1px 0 var(--color-secondary),
        inset -1px -1px 0 var(--color-primary) !important;
}

body.panel-style-cyberpunk02 .panel {
    border-radius: 0 !important;
}

/* ============================================
   GUNGALE INTRICATE PANEL STYLE
   Avengers/Military HUD angular cuts
   ============================================ */
body.panel-style-gungale .subject-card,
body.panel-style-gungale .topic-card,
body.panel-style-gungale .mode-card,
body.panel-style-gungale .difficulty-card {
    background: linear-gradient(145deg, var(--color-bg-panel) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
    border: 3px solid var(--color-primary) !important;
    border-radius: 0 !important;
    clip-path: polygon(
        0 0, calc(100% - 25px) 0, 100% 25px,
        100% 100%, 25px 100%, 0 calc(100% - 25px)
    ) !important;
}

body.panel-style-gungale .subject-card::before,
body.panel-style-gungale .topic-card::before,
body.panel-style-gungale .mode-card::before,
body.panel-style-gungale .difficulty-card::before {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    height: auto !important;
    border: 1px solid var(--color-primary) !important;
    opacity: 0.3 !important;
    pointer-events: none !important;
    background: transparent !important;
    transform: none !important;
    clip-path: polygon(
        0 0, calc(100% - 18px) 0, 100% 18px,
        100% 100%, 18px 100%, 0 calc(100% - 18px)
    ) !important;
}

body.panel-style-gungale .subject-card::after,
body.panel-style-gungale .topic-card::after,
body.panel-style-gungale .mode-card::after,
body.panel-style-gungale .difficulty-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 25px solid var(--color-secondary) !important;
    border-left: 25px solid transparent !important;
    background: transparent !important;
    opacity: 0.5 !important;
}

body.panel-style-gungale .btn {
    border-radius: 0 !important;
    clip-path: polygon(
        0 0, calc(100% - 12px) 0, 100% 12px,
        100% 100%, 12px 100%, 0 calc(100% - 12px)
    ) !important;
}

body.panel-style-gungale .panel {
    border-radius: 0 !important;
    clip-path: polygon(
        0 0, calc(100% - 30px) 0, 100% 30px,
        100% 100%, 30px 100%, 0 calc(100% - 30px)
    ) !important;
}

/* ============================================
   PINK MECH INTRICATE PANEL STYLE
   Elegant technical panels with diamond accents
   ============================================ */
body.panel-style-pink-mech .subject-card,
body.panel-style-pink-mech .topic-card,
body.panel-style-pink-mech .mode-card,
body.panel-style-pink-mech .difficulty-card {
    background: linear-gradient(145deg, var(--color-bg-panel) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: 0 !important;
    clip-path: polygon(
        10px 0, calc(100% - 10px) 0, 100% 10px,
        100% calc(100% - 10px), calc(100% - 10px) 100%,
        10px 100%, 0 calc(100% - 10px), 0 10px
    ) !important;
}

body.panel-style-pink-mech .subject-card::before,
body.panel-style-pink-mech .topic-card::before,
body.panel-style-pink-mech .mode-card::before,
body.panel-style-pink-mech .difficulty-card::before {
    content: '' !important;
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    width: auto !important;
    height: auto !important;
    border: 1px solid var(--color-primary) !important;
    opacity: 0.4 !important;
    pointer-events: none !important;
    background: transparent !important;
    transform: none !important;
    clip-path: polygon(
        8px 0, calc(100% - 8px) 0, 100% 8px,
        100% calc(100% - 8px), calc(100% - 8px) 100%,
        8px 100%, 0 calc(100% - 8px), 0 8px
    ) !important;
}

body.panel-style-pink-mech .subject-card::after,
body.panel-style-pink-mech .topic-card::after,
body.panel-style-pink-mech .mode-card::after,
body.panel-style-pink-mech .difficulty-card::after {
    content: '◆' !important;
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    transform: translateY(-50%) !important;
    color: var(--color-primary) !important;
    font-size: 12px !important;
    opacity: 0.6 !important;
    border: none !important;
    background: transparent !important;
}

body.panel-style-pink-mech .btn {
    border-radius: 0 !important;
    clip-path: polygon(
        6px 0, calc(100% - 6px) 0, 100% 6px,
        100% calc(100% - 6px), calc(100% - 6px) 100%,
        6px 100%, 0 calc(100% - 6px), 0 6px
    ) !important;
}

body.panel-style-pink-mech .panel {
    border-radius: 0 !important;
    clip-path: polygon(
        15px 0, calc(100% - 15px) 0, 100% 15px,
        100% calc(100% - 15px), calc(100% - 15px) 100%,
        15px 100%, 0 calc(100% - 15px), 0 15px
    ) !important;
}

/* ============================================
   PURPLE MECH INTRICATE PANEL STYLE
   Similar to blue mech with gradient accents
   ============================================ */
body.panel-style-purple-mech .subject-card,
body.panel-style-purple-mech .topic-card,
body.panel-style-purple-mech .mode-card,
body.panel-style-purple-mech .difficulty-card {
    background: linear-gradient(145deg, var(--color-bg-panel) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: 0 !important;
    clip-path: polygon(
        0 0, calc(100% - 15px) 0, 100% 15px,
        100% 100%, 0 100%
    ) !important;
}

body.panel-style-purple-mech .subject-card::before,
body.panel-style-purple-mech .topic-card::before,
body.panel-style-purple-mech .mode-card::before,
body.panel-style-purple-mech .difficulty-card::before {
    content: '' !important;
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    right: 5px !important;
    bottom: 5px !important;
    width: auto !important;
    height: auto !important;
    border: 1px solid var(--color-primary) !important;
    opacity: 0.3 !important;
    pointer-events: none !important;
    background: transparent !important;
    transform: none !important;
    clip-path: polygon(
        0 0, calc(100% - 12px) 0, 100% 12px,
        100% 100%, 0 100%
    ) !important;
}

body.panel-style-purple-mech .subject-card::after,
body.panel-style-purple-mech .topic-card::after,
body.panel-style-purple-mech .mode-card::after,
body.panel-style-purple-mech .difficulty-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 15px solid var(--color-secondary) !important;
    border-left: 15px solid transparent !important;
    background: transparent !important;
    opacity: 0.6 !important;
}

body.panel-style-purple-mech .btn {
    border-radius: 0 !important;
    clip-path: polygon(
        0 0, calc(100% - 8px) 0, 100% 8px,
        100% 100%, 0 100%
    ) !important;
}

body.panel-style-purple-mech .panel {
    border-radius: 0 !important;
    clip-path: polygon(
        0 0, calc(100% - 20px) 0, 100% 20px,
        100% 100%, 0 100%
    ) !important;
}

/* ============================================
   UNICORN RX-0 INTRICATE PANEL STYLE
   Clean lines with corner brackets
   ============================================ */
body.panel-style-unicorn .subject-card,
body.panel-style-unicorn .topic-card,
body.panel-style-unicorn .mode-card,
body.panel-style-unicorn .difficulty-card {
    background: linear-gradient(145deg, var(--color-bg-panel) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: 0 !important;
}

body.panel-style-unicorn .subject-card::before,
body.panel-style-unicorn .topic-card::before,
body.panel-style-unicorn .mode-card::before,
body.panel-style-unicorn .difficulty-card::before {
    content: '' !important;
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    width: 20px !important;
    height: 20px !important;
    border-top: 2px solid var(--color-secondary) !important;
    border-left: 2px solid var(--color-secondary) !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
    background: transparent !important;
    transform: none !important;
    right: auto !important;
    bottom: auto !important;
}

body.panel-style-unicorn .subject-card::after,
body.panel-style-unicorn .topic-card::after,
body.panel-style-unicorn .mode-card::after,
body.panel-style-unicorn .difficulty-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 6px !important;
    right: 6px !important;
    top: auto !important;
    left: auto !important;
    width: 20px !important;
    height: 20px !important;
    border-bottom: 2px solid var(--color-secondary) !important;
    border-right: 2px solid var(--color-secondary) !important;
    background: transparent !important;
    opacity: 0.7 !important;
}

body.panel-style-unicorn .btn {
    border-radius: 0 !important;
}

body.panel-style-unicorn .panel {
    border-radius: 0 !important;
}

/* ============================================
   WB MECHA INTRICATE PANEL STYLE
   Black and white minimalist with thick borders
   ============================================ */
body.panel-style-wb-mecha .subject-card,
body.panel-style-wb-mecha .topic-card,
body.panel-style-wb-mecha .mode-card,
body.panel-style-wb-mecha .difficulty-card {
    background: linear-gradient(145deg, var(--color-bg-panel) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
    border: 4px solid var(--color-primary) !important;
    border-radius: 0 !important;
    clip-path: polygon(
        0 0, 100% 0, 100% calc(100% - 12px),
        calc(100% - 12px) 100%, 0 100%
    ) !important;
}

body.panel-style-wb-mecha .subject-card::before,
body.panel-style-wb-mecha .topic-card::before,
body.panel-style-wb-mecha .mode-card::before,
body.panel-style-wb-mecha .difficulty-card::before {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    height: auto !important;
    border: 2px solid var(--color-primary) !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
    background: transparent !important;
    transform: none !important;
    clip-path: polygon(
        0 0, 100% 0, 100% calc(100% - 8px),
        calc(100% - 8px) 100%, 0 100%
    ) !important;
}

body.panel-style-wb-mecha .subject-card::after,
body.panel-style-wb-mecha .topic-card::after,
body.panel-style-wb-mecha .mode-card::after,
body.panel-style-wb-mecha .difficulty-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    top: auto !important;
    left: auto !important;
    width: 12px !important;
    height: 12px !important;
    background: var(--color-primary) !important;
    clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;
    opacity: 0.8 !important;
    border: none !important;
}

body.panel-style-wb-mecha .btn {
    border-radius: 0 !important;
    border-width: 3px !important;
    clip-path: polygon(
        0 0, 100% 0, 100% calc(100% - 8px),
        calc(100% - 8px) 100%, 0 100%
    ) !important;
}

body.panel-style-wb-mecha .panel {
    border-radius: 0 !important;
    border-width: 4px !important;
    clip-path: polygon(
        0 0, 100% 0, 100% calc(100% - 20px),
        calc(100% - 20px) 100%, 0 100%
    ) !important;
}

/* ============================================
   WHITE SCIFI 01 INTRICATE PANEL STYLE
   Clean white borders with corner accents
   ============================================ */
body.panel-style-white-scifi01 .subject-card,
body.panel-style-white-scifi01 .topic-card,
body.panel-style-white-scifi01 .mode-card,
body.panel-style-white-scifi01 .difficulty-card {
    background: linear-gradient(145deg, var(--color-bg-panel) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: 0 !important;
}

body.panel-style-white-scifi01 .subject-card::before,
body.panel-style-white-scifi01 .topic-card::before,
body.panel-style-white-scifi01 .mode-card::before,
body.panel-style-white-scifi01 .difficulty-card::before {
    content: '' !important;
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    right: 4px !important;
    bottom: 4px !important;
    width: auto !important;
    height: auto !important;
    border: 1px solid var(--color-primary) !important;
    opacity: 0.4 !important;
    pointer-events: none !important;
    background: transparent !important;
    transform: none !important;
}

body.panel-style-white-scifi01 .subject-card::after,
body.panel-style-white-scifi01 .topic-card::after,
body.panel-style-white-scifi01 .mode-card::after,
body.panel-style-white-scifi01 .difficulty-card::after {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    width: 15px !important;
    height: 15px !important;
    border-top: 2px solid var(--color-secondary) !important;
    border-right: 2px solid var(--color-secondary) !important;
    background: transparent !important;
    opacity: 0.6 !important;
}

body.panel-style-white-scifi01 .btn {
    border-radius: 0 !important;
}

body.panel-style-white-scifi01 .panel {
    border-radius: 0 !important;
}

/* ============================================
   WHITE SCIFI 03 INTRICATE PANEL STYLE
   Modern panels with corner brackets
   ============================================ */
body.panel-style-white-scifi03 .subject-card,
body.panel-style-white-scifi03 .topic-card,
body.panel-style-white-scifi03 .mode-card,
body.panel-style-white-scifi03 .difficulty-card {
    background: linear-gradient(145deg, var(--color-bg-panel) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 4px !important;
}

body.panel-style-white-scifi03 .subject-card::before,
body.panel-style-white-scifi03 .topic-card::before,
body.panel-style-white-scifi03 .mode-card::before,
body.panel-style-white-scifi03 .difficulty-card::before {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    width: 25px !important;
    height: 25px !important;
    border-top: 2px solid var(--color-secondary) !important;
    border-left: 2px solid var(--color-secondary) !important;
    border-right: none !important;
    border-bottom: none !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
    background: transparent !important;
    transform: none !important;
    right: auto !important;
    bottom: auto !important;
}

body.panel-style-white-scifi03 .subject-card::after,
body.panel-style-white-scifi03 .topic-card::after,
body.panel-style-white-scifi03 .mode-card::after,
body.panel-style-white-scifi03 .difficulty-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    top: auto !important;
    left: auto !important;
    width: 25px !important;
    height: 25px !important;
    border-bottom: 2px solid var(--color-secondary) !important;
    border-right: 2px solid var(--color-secondary) !important;
    border-top: none !important;
    border-left: none !important;
    background: transparent !important;
    opacity: 0.7 !important;
}

body.panel-style-white-scifi03 .btn {
    border-radius: 4px !important;
}

body.panel-style-white-scifi03 .panel {
    border-radius: 4px !important;
}

/* ============================================
   WORD BOXES INTRICATE PANEL STYLE
   Text container style with system header bar
   ============================================ */
body.panel-style-word-boxes .subject-card,
body.panel-style-word-boxes .topic-card,
body.panel-style-word-boxes .mode-card,
body.panel-style-word-boxes .difficulty-card {
    background: linear-gradient(145deg, var(--color-bg-panel) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: 0 !important;
    padding-top: 30px !important;
}

body.panel-style-word-boxes .subject-card::before,
body.panel-style-word-boxes .topic-card::before,
body.panel-style-word-boxes .mode-card::before,
body.panel-style-word-boxes .difficulty-card::before {
    content: '// SYSTEM' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 24px !important;
    width: auto !important;
    background: var(--color-primary) !important;
    color: var(--color-bg) !important;
    font-family: 'Orbitron', monospace !important;
    font-size: 10px !important;
    line-height: 24px !important;
    padding-left: 10px !important;
    opacity: 1 !important;
    pointer-events: none !important;
    border: none !important;
    transform: none !important;
    bottom: auto !important;
}

body.panel-style-word-boxes .subject-card::after,
body.panel-style-word-boxes .topic-card::after,
body.panel-style-word-boxes .mode-card::after,
body.panel-style-word-boxes .difficulty-card::after {
    content: '×' !important;
    position: absolute !important;
    top: 0 !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: 24px !important;
    line-height: 24px !important;
    color: var(--color-bg) !important;
    font-size: 14px !important;
    opacity: 0.8 !important;
    border: none !important;
    background: transparent !important;
}

body.panel-style-word-boxes .btn {
    border-radius: 0 !important;
}

body.panel-style-word-boxes .panel {
    border-radius: 0 !important;
}

/* ============================================
   YELLOW MECH INTRICATE PANEL STYLE
   Warning/caution style with hazard stripes
   ============================================ */
body.panel-style-yellow-mech .subject-card,
body.panel-style-yellow-mech .topic-card,
body.panel-style-yellow-mech .mode-card,
body.panel-style-yellow-mech .difficulty-card {
    background: linear-gradient(145deg, var(--color-bg-panel) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
    border: 3px solid var(--color-primary) !important;
    border-radius: 0 !important;
    clip-path: polygon(
        0 0, 100% 0, 100% calc(100% - 15px),
        calc(100% - 15px) 100%, 0 100%
    ) !important;
}

body.panel-style-yellow-mech .subject-card::before,
body.panel-style-yellow-mech .topic-card::before,
body.panel-style-yellow-mech .mode-card::before,
body.panel-style-yellow-mech .difficulty-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 40px !important;
    height: 100% !important;
    background: repeating-linear-gradient(
        -45deg,
        var(--color-primary) 0px,
        var(--color-primary) 5px,
        transparent 5px,
        transparent 10px
    ) !important;
    opacity: 0.3 !important;
    pointer-events: none !important;
    border: none !important;
    transform: none !important;
}

body.panel-style-yellow-mech .subject-card::after,
body.panel-style-yellow-mech .topic-card::after,
body.panel-style-yellow-mech .mode-card::after,
body.panel-style-yellow-mech .difficulty-card::after {
    content: '⚠' !important;
    position: absolute !important;
    top: 8px !important;
    left: 10px !important;
    bottom: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    color: var(--color-primary) !important;
    font-size: 14px !important;
    opacity: 0.8 !important;
    border: none !important;
    background: transparent !important;
}

body.panel-style-yellow-mech .btn {
    border-radius: 0 !important;
    clip-path: polygon(
        0 0, 100% 0, 100% calc(100% - 8px),
        calc(100% - 8px) 100%, 0 100%
    ) !important;
}

body.panel-style-yellow-mech .panel {
    border-radius: 0 !important;
    clip-path: polygon(
        0 0, 100% 0, 100% calc(100% - 20px),
        calc(100% - 20px) 100%, 0 100%
    ) !important;
}

/* Player selection section */
.player-section {
    margin-bottom: 30px;
}

.player-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 15px;
}

.player-controls select,
.player-controls input {
    background: rgba(0, 0, 0, 0.9);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: 10px;
    font-size: 1rem;
    border-radius: 4px;
    flex: 1;
    min-width: 150px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.player-controls input:focus {
    outline: none;
    box-shadow: 0 0 10px var(--color-primary-glow);
    animation: inputFocus 0.3s ease-out;
}

@keyframes inputFocus {
    from {
        box-shadow: 0 0 0 rgba(0, 255, 255, 0);
    }
    to {
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    }
}

/* Terminal cursor effect */
.panel-header::after {
    content: '_';
    animation: cursorBlink 1s step-end infinite;
    margin-left: 5px;
}

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

/* Subject and Topic tiles */
.tile {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--color-primary);
    padding: clamp(10px, 2vw, 15px);
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: tileSlideIn 0.5s ease-out backwards;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: clamp(60px, 10vw, 80px);
}

@keyframes tileSlideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tile:nth-child(1) { animation-delay: 0.1s; }
.tile:nth-child(2) { animation-delay: 0.2s; }
.tile:nth-child(3) { animation-delay: 0.3s; }
.tile:nth-child(4) { animation-delay: 0.4s; }
.tile:nth-child(5) { animation-delay: 0.5s; }
.tile:nth-child(6) { animation-delay: 0.6s; }

.tile::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity 0.3s;
}

.tile:hover::before {
    opacity: 0.1;
}

.tile:hover {
    background: var(--color-primary-dim);
    box-shadow: 
        0 0 20px var(--color-primary-glow),
        0 0 40px var(--color-primary-glow),
        inset 0 0 20px var(--color-primary-dim);
    transform: translateY(-3px) scale(1.02);
    border-color: var(--color-primary);
    color: var(--color-text);
}

.tile:active {
    transform: translateY(-1px) scale(1);
}

.tile-title {
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    font-weight: bold;
    margin-bottom: clamp(4px, 1vw, 8px);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    color: var(--color-text);
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.tile-description {
    font-size: clamp(0.6rem, 1vw, 0.8rem);
    opacity: 0.8;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Quiz screen */
.quiz-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--color-primary);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    transition: border-color 0.3s ease;
}

.quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    box-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary);
    transition: width 0.5s ease-out;
    animation: progressPulse 2s ease-in-out infinite;
}

@keyframes progressPulse {
    0%, 100% { 
        opacity: 1;
        box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
    }
    50% { 
        opacity: 0.9;
        box-shadow: 0 0 15px #00ffff, 0 0 30px #00ffff;
    }
}

.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(15px, 3vw, 30px);
    flex-wrap: wrap;
    gap: clamp(8px, 2vw, 15px);
    animation: fadeInDown 0.5s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quiz-info {
    font-size: clamp(0.75rem, 1.4vw, 1.05rem);
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.timer {
    font-family: 'Courier New', monospace;
    font-size: clamp(1.1rem, 2.5vw, 2rem);
    font-weight: bold;
    padding: clamp(6px, 1.5vw, 10px) clamp(12px, 2.5vw, 20px);
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    text-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary);
    box-shadow: 
        0 0 20px var(--color-primary-glow),
        inset 0 0 10px var(--color-primary-dim);
    animation: timerPulse 1s ease-in-out infinite;
    transition: border-color 0.3s ease, text-shadow 0.3s ease, box-shadow 0.3s ease;
}

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

.timer.negative {
    color: #ff0000;
    border-color: #ff0000;
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
    animation: timerAlert 0.5s ease-in-out infinite;
}

@keyframes timerAlert {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 0 40px rgba(255, 0, 0, 0.8);
    }
}

.question-prompt {
    font-size: clamp(0.9rem, 1.8vw, 1.3rem);
    margin: clamp(15px, 3vw, 30px) 0;
    padding: clamp(15px, 3vw, 25px) clamp(12px, 2.5vw, 20px);
    background: var(--color-primary-dim);
    border: 2px solid var(--color-primary);
    border-left: 6px solid var(--color-primary);
    border-right: 6px solid var(--color-primary);
    line-height: 1.6;
    position: relative;
    box-shadow: 
        0 0 20px var(--color-primary-dim),
        inset 0 0 30px var(--color-primary-dim);
    animation: questionReveal 0.6s ease-out;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    clip-path: polygon(
        0 8px,
        8px 0,
        calc(100% - 8px) 0,
        100% 8px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0 calc(100% - 8px)
    );
}

.question-prompt::before {
    content: 'DATA';
    position: absolute;
    top: -2px;
    left: 20px;
    font-size: 0.7rem;
    color: var(--color-bg);
    background: var(--color-primary);
    padding: 2px 10px;
    letter-spacing: 3px;
    font-weight: bold;
}

.question-prompt::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        var(--color-primary-dim) 3px,
        var(--color-primary-dim) 6px
    );
}

@keyframes questionReveal {
    from {
        opacity: 0;
        transform: translateX(-30px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.options-grid {
    display: grid;
    gap: 15px;
    margin: 30px 0;
}

.option-btn {
    background: linear-gradient(
        135deg,
        rgba(0, 10, 20, 0.95) 0%,
        rgba(0, 0, 0, 0.9) 50%,
        rgba(0, 15, 30, 0.95) 100%
    );
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: clamp(10px, 2vw, 18px) clamp(12px, 2.5vw, 20px);
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: clamp(0.75rem, 1.3vw, 0.95rem);
    font-family: 'Courier New', 'Courier', monospace;
    position: relative;
    overflow: hidden;
    animation: optionAppear 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 
        0 0 12px var(--color-primary-dim),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 15px rgba(0, 0, 0, 0.3);
}

@keyframes optionAppear {
    from {
        opacity: 0;
        transform: translateX(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.option-btn:nth-child(1) { animation-delay: 0.1s; }
.option-btn:nth-child(2) { animation-delay: 0.2s; }
.option-btn:nth-child(3) { animation-delay: 0.3s; }
.option-btn:nth-child(4) { animation-delay: 0.4s; }

.option-btn::before {
    content: '>';
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    font-weight: bold;
    transition: all 0.3s ease;
    opacity: 0;
    text-shadow: 0 0 10px var(--color-primary);
}

.option-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transform: skewX(-15deg);
    transition: left 0.5s ease;
}

.option-btn:hover:not(:disabled)::after {
    left: 150%;
}

.option-btn:hover:not(:disabled)::before {
    left: 8px;
    opacity: 1;
}

.option-btn:hover:not(:disabled) {
    background: linear-gradient(
        135deg,
        var(--color-primary-dim) 0%,
        rgba(0, 20, 40, 0.9) 50%,
        var(--color-primary-dim) 100%
    );
    box-shadow: 
        0 0 25px var(--color-primary-glow),
        0 0 50px var(--color-primary-dim),
        inset 0 0 20px var(--color-primary-dim),
        0 8px 25px rgba(0, 0, 0, 0.4);
    padding-left: 35px;
    transform: translateX(8px) scale(1.01);
    border-color: var(--color-primary);
}

.option-btn.correct {
    border-color: var(--color-success);
    background: linear-gradient(
        135deg,
        rgba(0, 50, 0, 0.9) 0%,
        var(--color-primary-dim) 100%
    );
    box-shadow: 
        0 0 30px rgba(0, 255, 0, 0.5),
        0 0 60px rgba(0, 255, 0, 0.3),
        inset 0 0 30px rgba(0, 255, 0, 0.2);
    animation: correctPulse 0.6s ease-out;
}

@keyframes correctPulse {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.04); }
    60% { transform: scale(1.02); }
}

.option-btn.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-dim);
    box-shadow: 
        0 0 15px var(--color-primary-glow),
        inset 0 0 15px var(--color-primary-dim);
}

.option-btn.incorrect {
    border-color: #ff0000;
    background: linear-gradient(
        135deg,
        rgba(50, 0, 0, 0.9) 0%,
        rgba(255, 0, 0, 0.2) 100%
    );
    box-shadow: 
        0 0 25px rgba(255, 0, 0, 0.5),
        0 0 50px rgba(255, 0, 0, 0.3),
        inset 0 0 25px rgba(255, 0, 0, 0.2);
    animation: incorrectShake 0.5s ease-out;
}

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

.option-btn:disabled {
    cursor: not-allowed;
}

.option-label {
    font-weight: bold;
    margin-right: 10px;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

/* Feedback panel */
.feedback {
    margin: 30px 0;
    padding: 20px;
    border-radius: 4px;
    border: 2px solid;
    animation: feedbackSlideIn 0.5s ease-out;
    position: relative;
    overflow: hidden;
}

@keyframes feedbackSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
        max-height: 0;
        padding: 0 20px;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 500px;
        padding: 20px;
    }
}

.feedback::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: feedbackShimmer 2s ease-in-out;
}

@keyframes feedbackShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.feedback.correct {
    background: rgba(0, 255, 255, 0.1);
    border-color: #00ffff;
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.3),
        inset 0 0 30px rgba(0, 255, 255, 0.05);
}

.feedback.incorrect {
    background: rgba(255, 0, 0, 0.1);
    border-color: #ff0000;
    color: #ff6666;
    box-shadow: 
        0 0 20px rgba(255, 0, 0, 0.3),
        inset 0 0 30px rgba(255, 0, 0, 0.05);
}

.feedback-status {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    text-shadow: 0 0 10px currentColor;
    animation: feedbackStatusPulse 0.5s ease-out;
}

@keyframes feedbackStatusPulse {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.feedback-answer {
    margin: 10px 0;
    font-size: 1.1rem;
}

.feedback-explanation {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--color-primary);
    line-height: 1.6;
    transition: border-color 0.3s ease;
}

.feedback-fast-strategy {
    margin-top: 12px;
    padding: 10px 15px;
    background: rgba(255, 215, 0, 0.15);
    border-left: 3px solid #ffd700;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.feedback-fast-strategy strong {
    color: #ffd700;
    font-weight: 600;
}

.feedback-steps {
    margin-top: 12px;
    padding: 10px 15px;
    background: rgba(0, 255, 255, 0.08);
    border-left: 3px solid var(--color-primary);
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.feedback-steps strong {
    color: var(--color-primary);
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.feedback-steps ol {
    margin: 0;
    padding-left: 20px;
}

.feedback-steps li {
    margin-bottom: 5px;
}

/* Results screen */
.results-summary {
    text-align: center;
    margin: 30px 0;
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.score-display {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: bold;
    margin: 20px 0;
    text-shadow: 
        0 0 15px var(--color-primary),
        0 0 30px var(--color-primary),
        0 0 45px var(--color-primary);
    animation: scoreReveal 1s ease-out, scorePulse 2s ease-in-out infinite 1s;
}

@keyframes scoreReveal {
    0% {
        opacity: 0;
        transform: scale(0.5) rotateY(90deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotateY(0deg);
    }
    100% {
        transform: scale(1) rotateY(0deg);
    }
}

@keyframes scorePulse {
    0%, 100% { 
        transform: scale(1);
        text-shadow: 
            0 0 15px #00ffff,
            0 0 30px #00ffff,
            0 0 45px #00ffff;
    }
    50% { 
        transform: scale(1.05);
        text-shadow: 
            0 0 20px #00ffff,
            0 0 40px #00ffff,
            0 0 60px #00ffff,
            0 0 80px #00ffff;
    }
}

.stat-line {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    margin: 10px 0;
}

.history-section {
    margin-top: 40px;
}

.history-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 10px;
    transition: border-color 0.3s ease;
}

.history-list {
    max-height: 400px;
    overflow-y: auto;
}

.history-item {
    background: var(--color-primary-dim);
    border-left: 3px solid var(--color-primary);
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 4px;
    animation: historyItemSlide 0.4s ease-out backwards;
    transition: all 0.3s ease;
}

@keyframes historyItemSlide {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.history-item:nth-child(1) { animation-delay: 0.1s; }
.history-item:nth-child(2) { animation-delay: 0.2s; }
.history-item:nth-child(3) { animation-delay: 0.3s; }
.history-item:nth-child(4) { animation-delay: 0.4s; }
.history-item:nth-child(5) { animation-delay: 0.5s; }

.history-item:hover {
    background: var(--color-primary-dim);
    border-left-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: 0 0 15px var(--color-primary-dim);
}

.history-date {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 5px;
}

.history-topic {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.history-stats {
    font-size: 0.95rem;
}

/* Header controls for home screen */
.header-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

/* Action buttons */
.action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* Hide regular action-buttons when floating-nav is present on the same page */
body:has(.floating-nav) .action-buttons:not(.quiz-action-buttons) {
    display: none;
}

/* Floating action buttons for quiz screen - always visible */
.action-buttons.quiz-action-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    z-index: 1000;
    pointer-events: none; /* Allow clicking through the container */
    /* Remove the old full-width background gradient */
    margin: 0; /* Override default margin */
    padding: 0; /* Override default padding */
    justify-content: flex-end; /* Override default justify */
    flex-wrap: nowrap; /* Override default wrap */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
    opacity: 1;
}

/* Scroll-aware FAB behavior - hide on scroll down */
.quiz-action-buttons.fab-hidden {
    transform: translateY(10px);
    opacity: 0.3;
}

.quiz-action-buttons .btn {
    pointer-events: auto; /* Re-enable clicking for buttons */
    min-width: 140px;
    backdrop-filter: blur(10px); /* Add blur for better readability over content */
    /* Material Design elevation: 8-12dp shadow */
    box-shadow: 
        0 0 20px var(--color-primary-glow), 
        0 4px 12px rgba(0, 0, 0, 0.6),
        0 8px 16px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-action-buttons .btn:hover {
    transform: translateY(-3px) scale(1.05);
    /* Enhanced elevation on hover: 12-16dp */
    box-shadow: 
        0 0 30px var(--color-primary-glow), 
        0 6px 16px rgba(0, 0, 0, 0.8),
        0 12px 24px rgba(0, 0, 0, 0.6);
}

/* Responsive adjustments - tablet: move to left for thumb reach */
@media (max-width: 768px) {
    .quiz-action-buttons {
        left: 10px;
        right: auto;
        bottom: 10px;
        gap: 8px;
    }
    
    .quiz-action-buttons .btn {
        padding: 10px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }
    
    /* Adjust panel padding for tablet */
    .panel:has(.quiz-action-buttons) {
        padding-bottom: 120px;
    }
    
    .panel-header {
        font-size: 1.5rem;
    }

    .quiz-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .timer {
        font-size: 1.5rem;
    }

    .question-prompt {
        font-size: 1.1rem;
    }

    .score-display {
        font-size: 2rem;
    }

    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Mobile optimization - horizontal bottom bar for quiz buttons */
@media (max-width: 480px) {
    .quiz-action-buttons {
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: row;
        justify-content: space-around;
        padding: 10px;
        gap: 10px;
        background: linear-gradient(to top, var(--color-bg-panel) 0%, transparent 100%);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--color-primary);
    }
    
    .quiz-action-buttons .btn {
        flex: 1;
        min-width: 0;
        max-width: 180px;
        padding: 12px 16px;
        font-size: 0.85rem;
    }
    
    /* Adjust panel padding for mobile to account for bottom bar */
    .panel:has(.quiz-action-buttons) {
        padding-bottom: 100px;
    }
    
    /* Add bottom padding to quiz content to prevent overlap with nav bar */
    .panel {
        padding-bottom: 80px;
    }
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

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

/* RPG Character Status Screen */
.status-header {
    background: var(--color-primary-dim);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 
        0 0 20px var(--color-primary-dim),
        inset 0 0 30px var(--color-primary-dim);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.status-player-info {
    text-align: center;
    margin-bottom: 20px;
}

.status-name {
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    font-weight: bold;
    margin-bottom: 10px;
    text-shadow: 0 0 15px var(--color-primary), 0 0 30px var(--color-primary);
    animation: textGlow 2s ease-in-out infinite;
}

.status-level {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    margin-bottom: 5px;
    color: var(--color-warning);
    text-shadow: 0 0 10px var(--color-warning), 0 0 20px var(--color-warning);
    font-weight: bold;
}

.status-total-stats {
    font-size: clamp(1rem, 2vw, 1.2rem);
    opacity: 0.9;
}

.status-progress {
    margin-top: 20px;
}

.status-progress-label {
    font-size: 1rem;
    margin-bottom: 10px;
    text-align: center;
    opacity: 0.9;
}

.status-progress-bar {
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid var(--color-primary);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    transition: border-color 0.3s ease;
}

.status-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-warning));
    box-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary);
    transition: width 0.5s ease-out;
    animation: progressPulse 2s ease-in-out infinite;
}

.status-progress-text {
    text-align: center;
    margin-top: 8px;
    font-size: 0.95rem;
    opacity: 0.8;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.stat-item {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    padding: 15px;
    transition: all 0.3s ease;
    animation: tileSlideIn 0.4s ease-out backwards;
}

.stat-item:nth-child(1) { animation-delay: 0.05s; }
.stat-item:nth-child(2) { animation-delay: 0.1s; }
.stat-item:nth-child(3) { animation-delay: 0.15s; }
.stat-item:nth-child(4) { animation-delay: 0.2s; }
.stat-item:nth-child(5) { animation-delay: 0.25s; }
.stat-item:nth-child(6) { animation-delay: 0.3s; }
.stat-item:nth-child(7) { animation-delay: 0.35s; }
.stat-item:nth-child(8) { animation-delay: 0.4s; }

.stat-item:hover {
    background: var(--color-primary-dim);
    box-shadow: 0 0 15px var(--color-primary-glow);
    transform: translateY(-2px);
}

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

.stat-topic-name {
    font-weight: bold;
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.stat-points {
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: bold;
    color: var(--color-warning);
    text-shadow: 0 0 10px var(--color-warning);
}

.stat-bar {
    width: 100%;
    height: 12px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
    transition: border-color 0.3s ease;
}

.stat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    box-shadow: 0 0 8px var(--color-primary);
    transition: width 0.5s ease-out;
}

.stat-details {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Status screen layout */
.status-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 30px;
    margin-top: 20px;
}

.status-character-section {
    background: var(--color-primary-dim);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 25px;
    box-shadow: 
        0 0 20px var(--color-primary-dim),
        inset 0 0 30px var(--color-primary-dim);
}

.status-sprite-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    min-height: 200px;
}

.status-equipped-items {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-primary-dim);
    border-radius: 6px;
    padding: 15px;
    margin: 20px 0;
}

.equipped-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    margin: 4px 0;
    background: rgba(0, 255, 255, 0.05);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.equipped-item-row:hover {
    background: rgba(0, 255, 255, 0.1);
}

.equipped-icon {
    font-size: 1.3rem;
    width: 30px;
    text-align: center;
}

.equipped-name {
    font-size: 0.95rem;
    flex: 1;
    color: var(--color-secondary);
}

.status-stats-section {
    display: flex;
    flex-direction: column;
}

/* Achievements */
.achievements-container {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 20px;
    margin-top: 10px;
}

.achievement-list {
    display: grid;
    gap: 12px;
}

.achievement-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.6);
    border-left: 3px solid var(--color-primary);
    border-radius: 4px;
    transition: all 0.3s ease;
    animation: fadeInUp 0.4s ease-out backwards;
}

.achievement-item:nth-child(1) { animation-delay: 0.05s; }
.achievement-item:nth-child(2) { animation-delay: 0.1s; }
.achievement-item:nth-child(3) { animation-delay: 0.15s; }
.achievement-item:nth-child(4) { animation-delay: 0.2s; }
.achievement-item:nth-child(5) { animation-delay: 0.25s; }
.achievement-item:nth-child(6) { animation-delay: 0.3s; }

.achievement-item:hover {
    background: rgba(0, 255, 255, 0.1);
    border-left-color: var(--color-secondary);
    transform: translateX(5px);
}

.achievement-item.title {
    border-left-color: var(--color-warning);
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(0, 0, 0, 0.6));
}

.achievement-item.milestone {
    border-left-color: var(--color-secondary);
}

.achievement-item.award {
    border-left-color: var(--color-primary);
}

.achievement-item.mastery {
    border-left-color: #9b59b6;
}

.achievement-icon {
    font-size: 1.8rem;
    width: 40px;
    text-align: center;
    filter: drop-shadow(0 0 5px currentColor);
}

.achievement-info {
    flex: 1;
}

.achievement-name {
    font-size: 1.05rem;
    font-weight: bold;
    color: var(--color-secondary);
    margin-bottom: 4px;
    text-shadow: 0 0 10px var(--color-secondary-glow);
}

.achievement-description {
    font-size: 0.85rem;
    opacity: 0.8;
    color: var(--color-text-dim);
}

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

@media (max-width: 768px) {
    .status-layout {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .status-name {
        font-size: 1.5rem;
    }
    
    .status-level {
        font-size: 1.3rem;
    }
}


/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background: var(--color-bg-panel);
    border: 3px solid var(--color-primary);
    border-radius: 8px;
    padding: 0;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    box-shadow: 
        0 0 30px var(--color-primary-glow),
        inset 0 0 100px var(--color-primary-dim);
    animation: modalSlideIn 0.3s ease-out;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 2px solid var(--color-primary);
    background: var(--color-primary-dim);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    text-shadow: 0 0 10px var(--color-primary);
}

.modal-close {
    background: none;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    font-size: 1.5rem;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

.modal-close:hover {
    background: rgba(255, 0, 0, 0.2);
    border-color: var(--color-error);
    color: var(--color-error);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
}

.modal-body {
    padding: 25px;
    max-height: 60vh;
    overflow-y: auto;
}

.player-list {
    margin-bottom: 25px;
}

.player-item {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--color-primary);
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    animation: playerItemSlide 0.3s ease-out backwards;
}

@keyframes playerItemSlide {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.player-item:nth-child(1) { animation-delay: 0.05s; }
.player-item:nth-child(2) { animation-delay: 0.1s; }
.player-item:nth-child(3) { animation-delay: 0.15s; }
.player-item:nth-child(4) { animation-delay: 0.2s; }
.player-item:nth-child(5) { animation-delay: 0.25s; }

.player-item:hover {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    transform: translateX(5px);
}

.player-item.selected {
    background: rgba(0, 255, 255, 0.15);
    border-color: #ffff00;
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.4);
}

.player-name {
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.player-level {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    color: #ffff00;
    text-shadow: 0 0 10px #ffff00;
}

.new-player-form {
    display: flex;
    gap: 10px;
    padding-top: 15px;
    border-top: 2px solid rgba(0, 255, 255, 0.3);
}

/* ============================================================================
   CYBERPUNK AUTHENTICATION UI
   ============================================================================ */
.player-auth-modal {
    max-width: 600px;
    background: linear-gradient(135deg, #000a0f 0%, #001a1f 100%);
    border: 2px solid var(--color-primary);
    box-shadow: 
        0 0 40px rgba(0, 255, 255, 0.4),
        inset 0 0 60px rgba(0, 255, 255, 0.1);
}

.auth-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 30px) clamp(20px, 5vw, 40px);
    background: linear-gradient(90deg, var(--color-primary-dim) 0%, var(--color-warning-dim) 100%);
    border-bottom: 2px solid var(--color-primary);
}

.auth-title {
    margin: 0;
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-weight: 900;
    color: var(--color-primary);
    letter-spacing: clamp(2px, 0.3vw, 4px);
    text-shadow: 
        0 0 10px var(--color-primary),
        0 0 20px var(--color-primary-glow);
}

.auth-header-bracket {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(30px, 5vw, 50px);
    height: clamp(40px, 6vw, 60px);
    border: 2px solid var(--color-warning);
    box-shadow: 0 0 10px var(--color-warning-glow);
}

.auth-header-bracket.left {
    left: clamp(10px, 2vw, 20px);
    border-right: none;
    clip-path: polygon(0 0, 100% 0, 100% 30%, 30% 30%, 30% 70%, 100% 70%, 100% 100%, 0 100%);
}

.auth-header-bracket.right {
    right: clamp(10px, 2vw, 20px);
    border-left: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 70%, 70% 70%, 70% 30%, 0 30%);
}

.auth-section {
    margin: clamp(20px, 4vw, 30px) 0;
}

.auth-section-label {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(0.75rem, 1.5vw, 0.9rem);
    font-weight: 700;
    color: rgba(0, 255, 255, 0.7);
    letter-spacing: clamp(1px, 0.2vw, 2px);
    margin-bottom: clamp(12px, 2.5vw, 18px);
    padding-left: 10px;
    border-left: 3px solid rgba(0, 255, 255, 0.5);
}

/* Auth Input Field */
.auth-input-container {
    position: relative;
    margin-bottom: clamp(15px, 3vw, 20px);
}

.auth-input {
    width: 100%;
    padding: clamp(12px, 2.5vw, 16px) clamp(15px, 3vw, 20px);
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--color-warning);
    color: var(--color-primary);
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    letter-spacing: clamp(1px, 0.2vw, 2px);
    text-transform: uppercase;
    box-shadow: 
        0 0 15px var(--color-warning-dim),
        inset 0 0 20px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
    clip-path: polygon(
        0 0, calc(100% - 15px) 0, 100% 15px,
        100% 100%, 15px 100%, 0 calc(100% - 15px)
    );
}

.auth-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 
        0 0 25px var(--color-primary-glow),
        inset 0 0 20px var(--color-primary-dim);
}

.auth-input::placeholder {
    color: var(--color-warning);
    opacity: 0.5;
    letter-spacing: clamp(1px, 0.2vw, 2px);
}

.auth-input-corner {
    position: absolute;
    width: clamp(15px, 2.5vw, 20px);
    height: clamp(15px, 2.5vw, 20px);
    border: 2px solid var(--color-warning);
    opacity: 0.6;
    pointer-events: none;
}

.auth-input-corner.tl {
    top: -5px;
    left: -5px;
    border-right: none;
    border-bottom: none;
}

.auth-input-corner.tr {
    top: -5px;
    right: -5px;
    border-left: none;
    border-bottom: none;
}

.auth-input-corner.bl {
    bottom: -5px;
    left: -5px;
    border-right: none;
    border-top: none;
}

.auth-input-corner.br {
    bottom: -5px;
    right: -5px;
    border-left: none;
    border-top: none;
}

/* Player Auth List */
.player-auth-list {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vw, 15px);
}

.player-auth-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: clamp(10px, 2vw, 15px);
    background: rgba(0, 255, 255, 0.05);
    border: 2px solid rgba(0, 255, 255, 0.3);
    transition: all 0.3s ease;
    clip-path: polygon(
        0 0, calc(100% - 10px) 0, 100% 10px,
        100% 100%, 10px 100%, 0 calc(100% - 10px)
    );
}

.player-auth-item:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.player-auth-item.selected {
    background: rgba(255, 255, 0, 0.1);
    border-color: #ffff00;
    box-shadow: 0 0 25px rgba(255, 255, 0, 0.4);
}

.player-auth-sprite {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 4px;
    flex-shrink: 0;
}

.player-auth-sprite .pixel-character {
    transform: scale(0.5);
}

.player-auth-info {
    display: flex;
    align-items: center;
    gap: clamp(15px, 3vw, 20px);
    flex: 1;
}

.player-auth-name {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-weight: 700;
    color: var(--color-primary);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    letter-spacing: clamp(1px, 0.15vw, 2px);
}

.player-auth-level {
    font-size: clamp(0.85rem, 1.8vw, 1rem);
    color: #ffff00;
    text-shadow: 0 0 10px #ffff00;
    font-weight: 600;
}

/* Auth Buttons */
.btn-auth-play,
.btn-auth-create {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(0.8rem, 1.8vw, 0.95rem);
    font-weight: 700;
    letter-spacing: clamp(1px, 0.2vw, 2px);
    padding: clamp(8px, 1.8vw, 12px) clamp(15px, 3vw, 20px);
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1) 0%, rgba(0, 255, 255, 0.2) 100%);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
    clip-path: polygon(
        0 0, calc(100% - 8px) 0, 100% 8px,
        100% 100%, 8px 100%, 0 calc(100% - 8px)
    );
}

.btn-auth-play:hover,
.btn-auth-create:hover {
    background: linear-gradient(135deg, var(--color-primary-dim) 0%, var(--color-primary) 100%);
    box-shadow: 
        0 0 20px var(--color-primary-glow),
        inset 0 0 15px var(--color-primary-dim);
    transform: translateY(-2px);
}

.btn-auth-create {
    width: 100%;
    background: linear-gradient(135deg, var(--color-warning-dim) 0%, var(--color-warning) 100%);
    border-color: var(--color-warning);
    color: var(--color-warning);
    text-shadow: 0 0 5px var(--color-warning);
    box-shadow: 0 0 10px var(--color-warning-dim);
}

.btn-auth-create:hover {
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-glow) 100%);
    box-shadow: 
        0 0 20px var(--color-warning),
        inset 0 0 15px var(--color-warning-dim);
}

.auth-play-icon,
.auth-create-icon {
    display: inline-block;
    margin-right: 8px;
    font-size: 1.1em;
}

.new-player-form input {
    flex: 1;
    background: rgba(0, 0, 0, 0.9);
    color: #00ffff;
    border: 2px solid #00ffff;
    padding: 10px;
    font-size: 1rem;
    border-radius: 4px;
    font-family: 'Courier New', 'Courier', monospace;
}

.new-player-form input:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* ============================================================================
   Settings Page Styles
   ============================================================================ */
.settings-section {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 20px 0;
}

.setting-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
    align-items: center;
    padding: 15px;
    background: var(--color-primary-dim);
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.setting-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column: 1 / -1;
    margin-bottom: 5px;
}

.setting-name {
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-primary);
    transition: color 0.3s ease;
}

.setting-value {
    font-size: 0.9rem;
    color: var(--color-success);
    min-width: 50px;
    text-align: right;
    transition: color 0.3s ease;
}

.volume-slider {
    grid-column: 1 / 2;
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-primary-dim);
    outline: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-primary-glow);
    transition: all 0.2s;
}

.volume-slider::-webkit-slider-thumb:hover {
    background: var(--color-success);
    box-shadow: 0 0 15px var(--color-success);
    transform: scale(1.1);
}

.volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    cursor: pointer;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-primary-glow);
    transition: all 0.2s;
}

.volume-slider::-moz-range-thumb:hover {
    background: var(--color-success);
    box-shadow: 0 0 15px var(--color-success);
    transform: scale(1.1);
}

.test-sound-btn {
    grid-column: 2 / 3;
    padding: 8px 16px;
    white-space: nowrap;
}

/* Theme Selector */
.theme-selector {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.theme-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Courier New', 'Courier', monospace;
    color: var(--color-text);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 120px;
}

.theme-btn:hover {
    background: var(--color-primary-dim);
    box-shadow: 0 0 15px var(--color-primary-glow);
    transform: translateY(-2px);
}

.theme-btn.active {
    background: var(--color-primary-dim);
    border-color: var(--color-primary);
    box-shadow: 0 0 20px var(--color-primary-glow), inset 0 0 20px var(--color-primary-dim);
}

.theme-preview {
    width: 60px;
    height: 30px;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.theme-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 33.33%;
    height: 100%;
}

.theme-preview::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 33.33%;
    height: 100%;
}

.theme-preview-default {
    background: #000814;
}

.theme-preview-default::before {
    background: #00ffff;
}

.theme-preview-default::after {
    background: #00ccff;
}

.theme-preview-eva01 {
    background: #201430;
}

.theme-preview-eva01::before {
    background: #87FF5F;
}

.theme-preview-eva01::after {
    background: #B968FC;
}

.theme-preview-eva02 {
    background: #280000;
}

.theme-preview-eva02::before {
    background: #FF5701;
}

.theme-preview-eva02::after {
    background: #00A6BF;
}

.theme-preview-rx0 {
    background: #0a0a0f;
}

.theme-preview-rx0::before {
    background: #ffffff;
}

.theme-preview-rx0::after {
    background: #ff3366;
}

.theme-preview-eva03 {
    background: #0a0a00;
}

.theme-preview-eva03::before {
    background: #FFD700;
}

.theme-preview-eva03::after {
    background: #FF8C00;
}

.theme-preview-purple-gundam {
    background: #1a0a1f;
}

.theme-preview-purple-gundam::before {
    background: #B026FF;
}

.theme-preview-purple-gundam::after {
    background: #FF1493;
}

.theme-preview-gray-gundam {
    background: #0f0f14;
}

.theme-preview-gray-gundam::before {
    background: #B0B0B0;
}

.theme-preview-gray-gundam::after {
    background: #4A90E2;
}

.theme-preview-celestial-pink {
    background: #1a0520;
}

.theme-preview-celestial-pink::before {
    background: #FF1493;
}

.theme-preview-celestial-pink::after {
    background: #9370DB;
}

.theme-preview-blue-terminal {
    background: #000a1f;
}

.theme-preview-blue-terminal::before {
    background: #0080FF;
}

.theme-preview-blue-terminal::after {
    background: #00FFFF;
}

.theme-preview-green-terminal {
    background: #001a00;
}

.theme-preview-green-terminal::before {
    background: #00FF00;
}

.theme-preview-green-terminal::after {
    background: #7FFF00;
}

.theme-preview-orange-terminal {
    background: #1a0f00;
}

.theme-preview-orange-terminal::before {
    background: #FF8C00;
}

.theme-preview-orange-terminal::after {
    background: #FFD700;
}

.theme-preview-red-terminal {
    background: #1a0000;
}

.theme-preview-red-terminal::before {
    background: #FF0000;
}

.theme-preview-red-terminal::after {
    background: #FF4500;
}

.theme-preview-solo-leveling {
    background: #0a0014;
}

.theme-preview-solo-leveling::before {
    background: #8B00FF;
}

.theme-preview-solo-leveling::after {
    background: #4169E1;
}

.theme-preview-nova-kit {
    background: #001420;
}

.theme-preview-nova-kit::before {
    background: #00CED1;
}

.theme-preview-nova-kit::after {
    background: #1E90FF;
}

.theme-preview-hydra-kit {
    background: #001a14;
}

.theme-preview-hydra-kit::before {
    background: #00FF7F;
}

.theme-preview-hydra-kit::after {
    background: #20B2AA;
}

.theme-preview-cyberpunk-purple {
    background: #0f0020;
}

.theme-preview-cyberpunk-purple::before {
    background: #9D00FF;
}

.theme-preview-cyberpunk-purple::after {
    background: #FF00FF;
}

.theme-preview-red-yellow-mech {
    background: #1a0a00;
}

.theme-preview-red-yellow-mech::before {
    background: #FF0000;
}

.theme-preview-red-yellow-mech::after {
    background: #FFFF00;
}

.theme-preview-gray-white-gundam {
    background: #0a0a0f;
}

.theme-preview-gray-white-gundam::before {
    background: #C0C0C0;
}

.theme-preview-gray-white-gundam::after {
    background: #FFFFFF;
}

.theme-preview-purple-white-gundam {
    background: #14001a;
}

.theme-preview-purple-white-gundam::before {
    background: #9370DB;
}

.theme-preview-purple-white-gundam::after {
    background: #FFFFFF;
}

.theme-preview-wb-mecha {
    background: #0a0a14;
}

.theme-preview-wb-mecha::before {
    background: #FFFFFF;
}

.theme-preview-wb-mecha::after {
    background: #1E90FF;
}

.theme-preview-yellow-terminal {
    background: #141000;
}

.theme-preview-yellow-terminal::before {
    background: #FFFF00;
}

.theme-preview-yellow-terminal::after {
    background: #FFD700;
}

@media (max-width: 768px) {
    .theme-selector {
        justify-content: center;
    }
    
    .theme-btn {
        flex: 1;
        min-width: 100px;
    }
}

@media (max-width: 768px) {
    .setting-item {
        grid-template-columns: 1fr;
    }
    
    .test-sound-btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* ============================================================================
   Login Screen Styles
   ============================================================================ */
.login-section {
    max-width: 600px;
    margin: 0 auto;
}

.player-list-login {
    margin-bottom: 40px;
}

.player-item-login {
    background: var(--color-primary-dim);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 12px;
    display: flex;
    gap: 20px;
    align-items: center;
    transition: all 0.3s;
    cursor: pointer;
}

.player-item-login:hover {
    background: var(--color-primary-dim);
    border-color: var(--color-primary);
    box-shadow: 0 0 20px var(--color-primary-glow);
    transform: translateX(5px);
}

.player-sprite-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--color-primary-dim);
    border-radius: 6px;
    flex-shrink: 0;
}

.player-sprite-preview .pixel-character {
    transform: scale(0.6);
}

.player-info-login {
    flex: 1;
}

.player-name-login {
    font-size: clamp(1.2rem, 2.5vw, 1.4rem);
    font-weight: bold;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary-glow);
    margin-bottom: 5px;
}

.player-level-login {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: var(--color-warning);
    margin-bottom: 3px;
}

.player-stats-login {
    font-size: clamp(0.8rem, 1.5vw, 0.9rem);
    opacity: 0.8;
}

.player-action {
    margin-left: 20px;
}

.new-character-section {
    border-top: 2px solid var(--color-primary);
    padding-top: 30px;
    transition: border-color 0.3s ease;
}

.new-player-form-login {
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
}

.new-player-form-login input {
    flex: 1;
    background: var(--color-primary-dim);
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    padding: 12px 15px;
    color: var(--color-primary);
    font-family: 'Courier New', monospace;
    font-size: 1em;
    outline: none;
    transition: all 0.3s;
}

.new-player-form-login input::placeholder {
    color: rgba(0, 255, 255, 0.5);
}

.new-player-form-login input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--color-primary-glow);
}

.new-player-form-login .btn {
    white-space: nowrap;
}

/* Analytics & Results Screen */
.stat-box {
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    text-align: center;
    transition: border-color 0.3s ease;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

@media (max-width: 768px) {
    .player-item-login {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .player-action {
        margin-left: 0;
        width: 100%;
    }
    
    .player-action .btn {
        width: 100%;
    }
    
    .new-player-form-login {
        flex-direction: column;
    }
    
    .new-player-form-login .btn {
        width: 100%;
    }
    
    .stat-box {
        padding: 12px;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
}

/* ============================================================================
   RPG Equipment Loadout System
   ============================================================================ */

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

/* Character Display Section */
.character-display-section {
    background: var(--color-bg-panel);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 0 20px var(--color-primary-dim);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.character-info-box {
    text-align: center;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--color-primary-dim);
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.character-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.character-level {
    font-size: 1.1rem;
    color: var(--color-warning);
    margin-top: 5px;
    transition: color 0.3s ease;
}

.character-sp {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 5px;
}

.level-progress-mini {
    margin-top: 10px;
}

.progress-bar-mini {
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill-mini {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transition: width 0.3s;
    box-shadow: 0 0 10px var(--color-primary);
}

.progress-text-mini {
    font-size: 0.8rem;
    text-align: center;
    margin-top: 5px;
    opacity: 0.7;
}

/* Pixel Art Character Sprite */
.character-sprite-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    margin: 20px 0;
    min-height: 200px;
}

.pixel-character {
    position: relative;
    width: 80px;
    height: 120px;
    transform: scale(1.5);
}

/* Character parts using CSS pixel art (box-shadow technique) */
.pixel-head {
    position: absolute;
    top: 10px;
    left: 30px;
    width: 20px;
    height: 20px;
    background: #ffcc99;
    box-shadow: 
        0 0 0 2px #ffcc99,
        4px 0 0 2px #ffcc99,
        -4px 0 0 2px #ffcc99,
        0 4px 0 2px #ffcc99;
    border-radius: 4px;
}

.pixel-head.has-helmet {
    box-shadow: 
        0 0 0 2px #ffcc99,
        4px 0 0 2px #ffcc99,
        -4px 0 0 2px #ffcc99;
}

/* Different helmet styles */
.pixel-helmet {
    position: absolute;
    top: 8px;
    left: 28px;
    width: 24px;
    height: 12px;
    background: #ffaa00;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0 8px rgba(255, 170, 0, 0.5);
}

.pixel-helmet.helmet-crown {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
    border-radius: 2px 2px 0 0;
}

.pixel-helmet.helmet-circlet {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    height: 8px;
    top: 10px;
    box-shadow: 0 0 10px var(--color-primary-glow);
    border-radius: 2px;
}

/* Different armor styles */
.pixel-body {
    position: absolute;
    top: 35px;
    left: 25px;
    width: 30px;
    height: 35px;
    background: #0088cc;
    border-radius: 4px;
}

.pixel-body.has-armor {
    background: linear-gradient(135deg, #00aaff, #0066cc);
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
}

.pixel-body.armor-vestments {
    background: linear-gradient(135deg, #8833ff, #5500cc);
    box-shadow: 0 0 15px rgba(136, 51, 255, 0.6);
}

.pixel-body.armor-regalia {
    background: linear-gradient(135deg, #ff00ff, #aa00aa);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.8);
    border: 1px solid #ffaa00;
}

.pixel-arm-left {
    position: absolute;
    top: 40px;
    left: 18px;
    width: 8px;
    height: 25px;
    background: #ffcc99;
    border-radius: 3px;
}

.pixel-arm-right {
    position: absolute;
    top: 40px;
    left: 54px;
    width: 8px;
    height: 25px;
    background: #ffcc99;
    border-radius: 3px;
}

.pixel-arm-right.has-weapon {
    transform: rotate(-30deg);
    transform-origin: top center;
}

/* Different weapon styles */
.pixel-weapon {
    position: absolute;
    top: 38px;
    left: 62px;
    width: 4px;
    height: 30px;
    background: linear-gradient(180deg, #cccccc, #888888);
    box-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
    border-radius: 2px;
}

.pixel-weapon.weapon-blade {
    background: linear-gradient(180deg, #00ffff, #0088cc);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
    width: 5px;
}

.pixel-weapon.weapon-tome {
    width: 10px;
    height: 12px;
    background: linear-gradient(135deg, #8b4513, #654321);
    box-shadow: 0 0 10px rgba(139, 69, 19, 0.6);
    border-radius: 2px;
    top: 45px;
    left: 60px;
}

/* Different accessory styles */
.pixel-accessory {
    position: absolute;
    top: 25px;
    left: 50px;
    width: 8px;
    height: 8px;
    background: #ffff00;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
    animation: accessoryGlow 2s ease-in-out infinite;
}

.pixel-accessory.accessory-ring {
    width: 6px;
    height: 6px;
    background: #ff00ff;
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.9);
    top: 60px;
    left: 32px;
}

.pixel-accessory.accessory-badge {
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #ffd700, #ff6600);
    box-shadow: 0 0 15px rgba(255, 215, 0, 1);
    top: 42px;
    left: 32px;
    border-radius: 2px;
    animation: badgeGlow 1s ease-in-out infinite;
}

@keyframes badgeGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 1); transform: scale(1); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 1); transform: scale(1.1); }
}

@keyframes badgeGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 1); transform: scale(1); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 1); transform: scale(1.1); }
}

.pixel-leg-left {
    position: absolute;
    top: 70px;
    left: 28px;
    width: 10px;
    height: 30px;
    background: #0066aa;
    border-radius: 0 0 3px 3px;
}

.pixel-leg-right {
    position: absolute;
    top: 70px;
    left: 42px;
    width: 10px;
    height: 30px;
    background: #0066aa;
    border-radius: 0 0 3px 3px;
}

/* Equipment Slots */
.equipment-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.equipment-slot {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #444;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    transition: all 0.3s;
}

.equipment-slot.equipped {
    border-color: var(--color-primary);
    background: var(--color-primary-dim);
    box-shadow: 0 0 10px var(--color-primary-glow);
}

.equipment-slot.empty {
    opacity: 0.5;
}

.slot-icon {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.slot-label {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-bottom: 5px;
}

.equipped-item {
    margin-top: 5px;
}

.item-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.slot-empty-text {
    font-size: 0.8rem;
    opacity: 0.5;
    font-style: italic;
}

.btn-tiny {
    padding: 2px 8px;
    font-size: 0.7rem;
    background: rgba(255, 100, 100, 0.2);
    border: 1px solid #ff6666;
    color: #ff6666;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-tiny:hover {
    background: rgba(255, 100, 100, 0.4);
    box-shadow: 0 0 10px rgba(255, 100, 100, 0.5);
}

/* Equipment Bonus Box */
.equipment-bonus-box {
    margin-top: 20px;
    padding: 15px;
    background: rgba(0, 255, 0, 0.05);
    border: 2px solid var(--color-success);
    border-radius: 8px;
    transition: border-color 0.3s ease;
}

.bonus-title {
    font-weight: bold;
    color: var(--color-success);
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.bonus-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bonus-stat {
    padding: 4px 10px;
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid var(--color-success);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--color-success);
    text-shadow: 0 0 5px var(--color-success);
    transition: border-color 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}

.bonus-stat-none {
    opacity: 0.5;
    font-style: italic;
}

/* Inventory Section */
.inventory-section {
    background: var(--color-bg-panel);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 0 20px var(--color-primary-dim);
    max-height: 800px;
    overflow-y: auto;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.inventory-title {
    text-align: center;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary);
    margin-bottom: 20px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.inventory-grid {
    display: grid;
    gap: 15px;
}

.inventory-item {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #444;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s;
}

.inventory-item.unlocked {
    border-color: var(--color-primary);
    background: var(--color-primary-dim);
}

.inventory-item.unlocked:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-dim);
    box-shadow: 0 0 15px var(--color-primary-glow);
    transform: translateY(-2px);
}

.inventory-item.locked {
    opacity: 0.4;
}

.inventory-item.equipped-item-highlight {
    border-color: var(--color-warning);
    box-shadow: 0 0 15px var(--color-warning);
}

.item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.item-icon {
    font-size: 1.8rem;
}

.item-name-inv {
    font-weight: bold;
    color: var(--color-primary);
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.item-description {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 10px;
    line-height: 1.4;
}

.item-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.item-stat-bonus {
    padding: 3px 8px;
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid var(--color-success);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--color-success);
    transition: border-color 0.3s ease, color 0.3s ease;
}

.item-equipped-badge {
    padding: 8px;
    background: rgba(255, 170, 0, 0.2);
    border: 1px solid var(--color-warning);
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    color: var(--color-warning);
    transition: border-color 0.3s ease, color 0.3s ease;
}

.item-locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 6px;
}

.lock-icon {
    font-size: 2rem;
    margin-bottom: 5px;
}

.unlock-req {
    font-size: 0.9rem;
    color: #ff6666;
    font-weight: bold;
}

/* Subject Levels List */
.subject-levels-list {
    margin-top: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 15px;
}

.subject-level-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-primary-dim);
    transition: border-color 0.3s ease;
}

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

.subject-level-name {
    color: var(--color-primary);
    transition: color 0.3s ease;
}

.subject-level-value {
    font-weight: bold;
    color: var(--color-warning);
    transition: color 0.3s ease;
}

/* Mobile Responsive */
@media (max-width: 968px) {
    .loadout-container {
        grid-template-columns: 1fr;
    }
    
    .pixel-character {
        transform: scale(1.2);
    }
    
    .equipment-slots {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .equipment-slots {
        grid-template-columns: 1fr;
    }
    
    .pixel-character {
        transform: scale(1);
    }
}

/* ============================================================================
   Question Review Section (Test Results)
   ============================================================================ */

.question-review-section {
    margin: 30px 0;
    padding: 20px;
    background: var(--color-bg-panel);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.review-title {
    text-align: center;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary);
    margin-bottom: 25px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.review-question {
    margin-bottom: 25px;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid;
}

.review-question.review-correct {
    background: rgba(0, 255, 0, 0.05);
    border-color: var(--color-success);
}

.review-question.review-incorrect {
    background: rgba(255, 100, 100, 0.05);
    border-color: #ff6666;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.review-number {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--color-primary);
    transition: color 0.3s ease;
}

.review-status {
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
}

.status-correct {
    background: rgba(0, 255, 0, 0.2);
    border: 1px solid var(--color-success);
    color: var(--color-success);
    transition: border-color 0.3s ease, color 0.3s ease;
}

.status-incorrect {
    background: rgba(255, 100, 100, 0.2);
    border: 1px solid #ff6666;
    color: #ff6666;
}

.review-time {
    font-size: 0.9rem;
    opacity: 0.8;
}

.review-prompt {
    font-size: 1.1rem;
    margin-bottom: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 4px solid var(--color-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    transition: border-color 0.3s ease;
}

.review-options {
    margin: 15px 0;
}

.review-option {
    padding: 12px 15px;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #444;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
}

.review-option-correct {
    border-color: var(--color-success);
    background: rgba(0, 255, 0, 0.1);
}

.review-option-wrong {
    border-color: #ff6666;
    background: rgba(255, 100, 100, 0.1);
}

.review-option-label {
    font-weight: bold;
    color: var(--color-primary);
    min-width: 25px;
    transition: color 0.3s ease;
}

.review-option-text {
    flex: 1;
}

.review-badge-user {
    padding: 3px 10px;
    background: rgba(0, 170, 255, 0.3);
    border: 1px solid #00aaff;
    border-radius: 12px;
    font-size: 0.75rem;
    color: #00aaff;
    font-weight: bold;
}

.review-badge-correct {
    padding: 3px 10px;
    background: rgba(0, 255, 0, 0.3);
    border: 1px solid var(--color-success);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--color-success);
    font-weight: bold;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.review-explanation {
    margin-top: 15px;
    padding: 15px;
    background: var(--color-primary-dim);
    border-left: 4px solid var(--color-primary);
    border-radius: 4px;
    line-height: 1.6;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.review-explanation strong {
    color: var(--color-primary);
    transition: color 0.3s ease;
}

@media (max-width: 768px) {
    .review-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .review-option {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .review-badge-user,
    .review-badge-correct {
        margin-top: 5px;
    }
}

/* ============================================================================
   Home Controls Box & Analytics Sections
   ============================================================================ */

.home-controls-box {
    background: var(--color-bg-panel);
    border: 3px solid var(--color-primary);
    border-radius: 0;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 0 15px var(--color-primary-dim);
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    clip-path: polygon(
        0 10px,
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px)
    );
}

/* Warning stripes on top */
.home-controls-box::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 10%;
    width: 80%;
    height: 8px;
    background: repeating-linear-gradient(
        45deg,
        var(--color-warning) 0px,
        var(--color-warning) 10px,
        rgba(0, 0, 0, 0.8) 10px,
        rgba(0, 0, 0, 0.8) 20px
    );
    border: 1px solid var(--color-warning);
    z-index: 10;
}

/* Removed sliding gradient animation for cleaner look */

.home-controls-box > * {
    position: relative;
    z-index: 1;
}

.feedback-success {
    background: rgba(0, 255, 0, 0.05);
    border-color: var(--color-success);
    color: var(--color-success);
}

.analytics-section {
    background: var(--color-primary-dim);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 0 20px var(--color-primary-dim), inset 0 0 30px var(--color-primary-dim);
    transition: all 0.3s ease;
}

.improvement-box {
    margin-top: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid var(--color-primary);
    transition: all 0.3s ease;
}

.analytics-weak-section {
    background: rgba(255, 100, 100, 0.05);
    border: 2px solid var(--color-error);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 15px rgba(255, 100, 100, 0.1);
    transition: all 0.3s ease;
}

.analytics-strong-section {
    background: rgba(0, 255, 0, 0.05);
    border: 2px solid var(--color-success);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
    transition: all 0.3s ease;
}

.analytics-all-section {
    background: var(--color-primary-dim);
    border: 2px solid var(--color-secondary);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 15px var(--color-primary-dim);
    transition: all 0.3s ease;
}

/* ============================================================================
   LUXURY DESIGN ENHANCEMENTS
   ============================================================================ */

/* Glassmorphism effect for panels */
.panel.glass {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-primary);
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.37),
        0 0 20px var(--color-primary-glow),
        inset 0 0 50px var(--color-primary-dim);
}

/* Neon glow borders */
.neon-border {
    position: relative;
    border: 2px solid var(--color-primary);
    box-shadow: 
        0 0 5px var(--color-primary),
        0 0 10px var(--color-primary),
        0 0 20px var(--color-primary),
        inset 0 0 10px var(--color-primary-dim);
    animation: neonPulse 2s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% {
        box-shadow: 
            0 0 5px var(--color-primary),
            0 0 10px var(--color-primary),
            0 0 20px var(--color-primary),
            inset 0 0 10px var(--color-primary-dim);
    }
    50% {
        box-shadow: 
            0 0 10px var(--color-primary),
            0 0 20px var(--color-primary),
            0 0 30px var(--color-primary),
            0 0 40px var(--color-primary),
            inset 0 0 15px var(--color-primary-dim);
    }
}

/* Holographic gradient effect */
.holographic {
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-secondary) 25%,
        var(--color-accent) 50%,
        var(--color-secondary) 75%,
        var(--color-primary) 100%
    );
    background-size: 200% 200%;
    animation: holographicShift 4s ease infinite;
}

@keyframes holographicShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Particle background overlay */
.particle-bg {
    position: relative;
    overflow: hidden;
}

.particle-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, var(--color-primary-dim) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, var(--color-primary-dim) 1px, transparent 1px),
        radial-gradient(circle at 40% 20%, var(--color-primary-dim) 1px, transparent 1px),
        radial-gradient(circle at 90% 40%, var(--color-primary-dim) 1px, transparent 1px),
        radial-gradient(circle at 60% 70%, var(--color-primary-dim) 1px, transparent 1px);
    background-size: 200% 200%;
    opacity: 0.3;
    animation: particleFloat 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes particleFloat {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(10px, -10px); }
    50% { transform: translate(-5px, 5px); }
    75% { transform: translate(5px, 10px); }
}

/* Premium gradient borders */
.gradient-border {
    position: relative;
    background: var(--color-bg-panel);
    border-radius: 8px;
    padding: 2px;
}

.gradient-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    padding: 2px;
    background: linear-gradient(45deg, var(--color-primary), var(--color-secondary), var(--color-accent), var(--color-primary));
    background-size: 300% 300%;
    animation: gradientRotate 3s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

@keyframes gradientRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Cyber grid background */
.cyber-grid {
    position: relative;
    background-image: 
        linear-gradient(var(--color-primary-dim) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-primary-dim) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: -1px -1px;
}

/* 3D depth shadow */
.depth-shadow {
    box-shadow: 
        0 1px 1px var(--color-primary-dim),
        0 2px 2px var(--color-primary-dim),
        0 4px 4px var(--color-primary-dim),
        0 8px 8px var(--color-primary-dim),
        0 16px 16px var(--color-primary-dim);
}

/* Animated gradient text */
.gradient-text {
    background: linear-gradient(
        45deg,
        var(--color-primary),
        var(--color-secondary),
        var(--color-accent),
        var(--color-primary)
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientTextShift 3s ease infinite;
}

@keyframes gradientTextShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Floating animation for cards */
.float {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Glow pulse effect */
.glow-pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 5px var(--color-primary-glow);
    }
    50% {
        box-shadow: 
            0 0 20px var(--color-primary-glow),
            0 0 40px var(--color-primary-glow),
            0 0 60px var(--color-primary-glow);
    }
}

/* Premium button with shine effect */
.btn-premium {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border: none;
    box-shadow: 
        0 4px 15px var(--color-primary-glow),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

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

/* Hexagonal grid pattern */
.hex-pattern {
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 20px, var(--color-primary-dim) 20px, var(--color-primary-dim) 21px),
        repeating-linear-gradient(60deg, transparent, transparent 20px, var(--color-primary-dim) 20px, var(--color-primary-dim) 21px),
        repeating-linear-gradient(120deg, transparent, transparent 20px, var(--color-primary-dim) 20px, var(--color-primary-dim) 21px);
}

/* Scanline effect overlay */
.scanlines {
    position: relative;
}

.scanlines::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        transparent 1px,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 3px
    );
    pointer-events: none;
    animation: scanlineMove 10s linear infinite;
}

@keyframes scanlineMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(20px); }
}

/* ============================================================================
   CONDITIONAL VISUAL EFFECTS (Controlled by Settings Toggles)
   ============================================================================ */

/* Glassmorphism - Applied to panels when enabled */
.effect-glassmorphism .panel {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.37),
        0 0 20px var(--color-primary-glow),
        inset 0 0 50px var(--color-primary-dim);
}

.effect-glassmorphism .home-controls-box,
.effect-glassmorphism .analytics-section,
.effect-glassmorphism .analytics-weak-section,
.effect-glassmorphism .analytics-strong-section,
.effect-glassmorphism .analytics-all-section {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Neon Borders - Applied to buttons and panels when enabled */
.effect-neon-borders .btn,
.effect-neon-borders .option-btn {
    box-shadow: 
        0 0 5px var(--color-primary),
        0 0 10px var(--color-primary),
        0 0 20px var(--color-primary),
        inset 0 0 10px var(--color-primary-dim);
    animation: neonPulse 2s ease-in-out infinite;
}

.effect-neon-borders .home-controls-box,
.effect-neon-borders .panel {
    animation: neonPulse 2s ease-in-out infinite;
}

/* Floating Animations - Applied to cards and stat displays when enabled */
.effect-floating .stat-card,
.effect-floating .subject-tile,
.effect-floating .topic-tile,
.effect-floating .equipment-item,
.effect-floating .home-controls-box {
    animation: floating 3s ease-in-out infinite;
}

/* Gradient Effects - Applied to text and buttons when enabled */
.effect-gradients .panel-header,
.effect-gradients h1,
.effect-gradients h2 {
    background: linear-gradient(
        45deg,
        var(--color-primary),
        var(--color-secondary),
        var(--color-accent),
        var(--color-primary)
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientTextShift 3s ease infinite;
}

/* Premium Buttons - Applied when enabled */
.effect-premium-buttons .btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border: none;
    box-shadow: 
        0 4px 15px var(--color-primary-glow),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.effect-premium-buttons .btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

/* Toggle Switch Styling */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: 0.3s;
    border-radius: 24px;
    border: 2px solid var(--color-primary-dim);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: var(--color-text-dim);
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary-glow);
}

input:checked + .toggle-slider:before {
    transform: translateX(26px);
    background-color: white;
}

.setting-description {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-dim);
    margin-top: 2px;
}

/* ============================================================================
   TECHNICAL/MILITARY UI OVERHAUL - Evangelion-inspired
   ============================================================================ */

/* Angular panels with corner brackets */
.panel {
    border-radius: 0 !important;
    border-width: 3px !important;
    clip-path: polygon(
        0 12px,
        12px 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0 calc(100% - 12px)
    );
}

.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, var(--color-primary) 30px, transparent 30px),
        linear-gradient(180deg, var(--color-primary) 30px, transparent 30px),
        linear-gradient(270deg, var(--color-primary) 30px, transparent 30px),
        linear-gradient(180deg, var(--color-primary) 30px, transparent 30px),
        linear-gradient(90deg, var(--color-primary) 30px, transparent 30px),
        linear-gradient(0deg, var(--color-primary) 30px, transparent 30px),
        linear-gradient(270deg, var(--color-primary) 30px, transparent 30px),
        linear-gradient(0deg, var(--color-primary) 30px, transparent 30px);
    background-size:
        30px 3px, 3px 30px,
        30px 3px, 3px 30px,
        30px 3px, 3px 30px,
        30px 3px, 3px 30px;
    background-position:
        0 0, 0 0,
        100% 0, 100% 0,
        0 100%, 0 100%,
        100% 100%, 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.8;
    z-index: 1;
}

.panel > * {
    position: relative;
    z-index: 2;
}

/* Angular buttons with side markers */
.btn {
    border-radius: 0 !important;
    letter-spacing: 3px !important;
    clip-path: polygon(
        0 6px,
        6px 0,
        calc(100% - 6px) 0,
        100% 6px,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        6px 100%,
        0 calc(100% - 6px)
    );
}

.btn::before,
.btn::after {
    width: 6px !important;
    height: 100% !important;
    background: var(--color-primary) !important;
    opacity: 0.4 !important;
    top: 0 !important;
}

.btn::before {
    left: -3px !important;
}

.btn::after {
    right: -3px !important;
}

/* Technical tiles with angular box shape (no hexagon for better text wrapping) */
.tile {
    border-radius: 0 !important;
    border-width: 3px !important;
    clip-path: polygon(
        0 10px,
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px)
    ) !important;
}

.tile::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-top: 3px solid var(--color-secondary);
    border-right: 3px solid var(--color-secondary);
    z-index: 10;
}

/* Warning stripes for home controls */
.home-controls-box {
    border-radius: 0 !important;
    border-width: 3px !important;
    overflow: visible !important;
    clip-path: polygon(
        0 10px,
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px)
    );
}

.home-controls-box::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 10%;
    width: 80%;
    height: 8px;
    background: repeating-linear-gradient(
        45deg,
        var(--color-warning) 0px,
        var(--color-warning) 10px,
        rgba(0, 0, 0, 0.8) 10px,
        rgba(0, 0, 0, 0.8) 20px
    );
    border: 1px solid var(--color-warning);
    z-index: 10;
}

/* Question prompt with DATA label */
.question-prompt {
    border-radius: 0 !important;
    border-left-width: 6px !important;
    border-right-width: 6px !important;
    clip-path: polygon(
        0 8px,
        8px 0,
        calc(100% - 8px) 0,
        100% 8px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0 calc(100% - 8px)
    );
}

/* Option buttons - restore normal rectangular shape */
.option-btn {
    border-radius: 0 !important;
    padding: 15px 20px 15px 50px !important;
    /* Removed clip-path for normal rectangular buttons */
}

.option-btn::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: var(--color-primary);
    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
    opacity: 0.3;
    z-index: 0;
}

.option-label {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-weight: bold !important;
    color: var(--color-bg) !important;
    min-width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
    font-size: 0.9rem !important;
}

/* Angular progress bars with segments */
.progress-bar {
    border-radius: 0 !important;
    clip-path: polygon(
        0 4px,
        4px 0,
        calc(100% - 4px) 0,
        100% 4px,
        100% calc(100% - 4px),
        calc(100% - 4px) 100%,
        4px 100%,
        0 calc(100% - 4px)
    );
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 10px,
        var(--color-primary-dim) 10px,
        var(--color-primary-dim) 11px
    );
    opacity: 0.2;
    pointer-events: none;
    z-index: 10;
}

.progress-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 20px,
        rgba(0, 0, 0, 0.3) 20px,
        rgba(0, 0, 0, 0.3) 22px
    );
    pointer-events: none;
}

/* Analytics sections with technical borders */
.analytics-section,
.analytics-weak-section,
.analytics-strong-section,
.analytics-all-section {
    border-radius: 0 !important;
    border-width: 3px !important;
    clip-path: polygon(
        0 10px,
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px)
    );
}

/* Input fields angular styling */
input[type="text"],
input[type="range"],
select {
    border-radius: 0 !important;
}

/* Modal angular corners */
.modal-content {
    border-radius: 0 !important;
    clip-path: polygon(
        0 12px,
        12px 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0 calc(100% - 12px)
    );
}

/* Equipment items hexagonal */
.equipment-slot,
.inventory-item {
    border-radius: 0 !important;
    clip-path: polygon(
        0 6px,
        6px 0,
        calc(100% - 6px) 0,
        100% 6px,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        6px 100%,
        0 calc(100% - 6px)
    );
}

/* Stat displays with corner brackets */
.stat-display {
    position: relative;
    border-radius: 0 !important;
}

.stat-display::before,
.stat-display::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid var(--color-secondary);
}

.stat-display::before {
    top: 5px;
    left: 5px;
    border-right: none;
    border-bottom: none;
}

.stat-display::after {
    bottom: 5px;
    right: 5px;
    border-left: none;
    border-top: none;
}

/* Character display technical frame */
.character-display-section {
    border-radius: 0 !important;
    clip-path: polygon(
        0 15px,
        15px 0,
        calc(100% - 15px) 0,
        100% 15px,
        100% calc(100% - 15px),
        calc(100% - 15px) 100%,
        15px 100%,
        0 calc(100% - 15px)
    );
}

/* Grid pattern overlay for technical look */
.panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(var(--color-primary-dim) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-primary-dim) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

/* Hexagonal theme preview boxes */
.theme-preview {
    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    ) !important;
}

/* ============================================================================
   BOOT INITIALIZATION SEQUENCE - Cyberpunk HUD Style with Anime.js
   Fusion of Boot Inspiration 2 (Arasaka/Red HUD) + Boot Inspiration 3 (3D Rotating Logo)
   ============================================================================ */

#boot-sequence {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: 1200px;
}

/* CRT Scanline Overlay */
.boot-crt-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.1) 0px,
            rgba(0, 0, 0, 0.1) 1px,
            transparent 1px,
            transparent 2px
        );
    pointer-events: none;
    z-index: 1000;
    animation: crtFlicker 0.15s infinite;
}

/* Glitch Overlay */
.boot-glitch-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    background: transparent;
    animation: glitchFlash 4s infinite;
}

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

@keyframes glitchFlash {
    0%, 95%, 100% { 
        background: transparent; 
        transform: translateX(0);
    }
    96% { 
        background: rgba(255, 0, 0, 0.03); 
        transform: translateX(-2px);
    }
    97% { 
        background: rgba(0, 255, 255, 0.03); 
        transform: translateX(2px);
    }
    98% { 
        background: transparent; 
        transform: translateX(-1px);
    }
}

/* Skip Button */
.boot-skip-btn {
    position: absolute;
    bottom: 30px;
    right: 30px;
    padding: 12px 24px;
    background: rgba(255, 0, 0, 0.05);
    border: 1px solid rgba(255, 0, 0, 0.6);
    color: #ff0000;
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.boot-skip-btn:hover {
    background: rgba(255, 0, 0, 0.15);
    border-color: #ff0000;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.4), inset 0 0 10px rgba(255, 0, 0, 0.1);
    transform: scale(1.05);
}

.skip-text { font-weight: 500; }
.skip-arrow { font-size: 0.7rem; }

/* ===== PHASE SYSTEM ===== */
.boot-phase {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
}

/* ===== PHASE 1: HUD FRAME ===== */

/* Corner Brackets */
.hud-corner {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px solid #ff0000;
    opacity: 0;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
}

.hud-corner-tl {
    top: 12%;
    left: 8%;
    border-right: none;
    border-bottom: none;
}

.hud-corner-tr {
    top: 12%;
    right: 8%;
    border-left: none;
    border-bottom: none;
}

.hud-corner-bl {
    bottom: 12%;
    left: 8%;
    border-right: none;
    border-top: none;
}

.hud-corner-br {
    bottom: 12%;
    right: 8%;
    border-left: none;
    border-top: none;
}

/* Side Bars */
.hud-sidebar {
    position: absolute;
    top: 25%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}

.hud-sidebar-left { left: 8%; }
.hud-sidebar-right { right: 8%; }

.sidebar-segment {
    width: 4px;
    height: 30px;
    background: #ff0000;
    opacity: 0;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    transform-origin: center;
}

/* Status Bar */
.hud-status-bar {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    opacity: 0;
}

.status-bar-line {
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff0000);
    transform-origin: right center;
}

.status-bar-line.status-bar-right {
    background: linear-gradient(90deg, #ff0000, transparent);
    transform-origin: left center;
}

.status-text {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: 0.9rem;
    color: #ff0000;
    letter-spacing: 4px;
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
    white-space: nowrap;
    opacity: 0;
}

/* Chevrons */
.hud-chevrons {
    position: absolute;
    top: 20%;
    display: flex;
    gap: 3px;
}

.hud-chevrons-left {
    left: 20%;
}

.hud-chevrons-right {
    right: 20%;
}

.chevron {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    color: #ff0000;
    opacity: 0;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
}

/* Three Circles Logo */
.boot-logo-container {
    position: relative;
    width: 140px;
    height: 160px;
}

.boot-circle {
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ff4444, #ff0000, #cc0000);
    opacity: 0;
    box-shadow: 
        0 0 20px rgba(255, 0, 0, 0.8),
        0 0 40px rgba(255, 0, 0, 0.4),
        inset 0 0 15px rgba(255, 100, 100, 0.3);
}

.boot-circle-1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.boot-circle-2 {
    top: 40px;
    left: 10px;
}

.boot-circle-3 {
    top: 40px;
    right: 10px;
}

.boot-circle-stem {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 50px;
    background: linear-gradient(to bottom, #ff0000, #cc0000);
    opacity: 0;
    transform-origin: top center;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.boot-circle-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    border: 2px solid rgba(255, 0, 0, 0.5);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
}

/* Hash Marks */
.hud-hash-marks {
    position: absolute;
    bottom: 16%;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: #ff0000;
    opacity: 0;
    letter-spacing: -3px;
}

.hud-hash-left {
    left: 12%;
    transform: rotate(-25deg);
}

.hud-hash-right {
    right: 12%;
    transform: rotate(25deg);
}

/* Bottom Bar */
.hud-bottom-bar {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

.bottom-bar-segment {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ff0000, #ff0000, transparent);
    opacity: 0;
    transform-origin: center;
}

/* ===== PHASE 2: 3D TITLE ===== */

.title-3d-scene {
    perspective: 1200px;
    transform-style: preserve-3d;
    perspective-origin: center center;
}

.title-3d-container {
    position: relative;
    transform-style: preserve-3d;
    opacity: 0;
    backface-visibility: visible;
}

.title-3d-layer {
    font-family: 'Orbitron', 'Arial Black', sans-serif;
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
}

.title-3d-main {
    position: relative;
    color: #ffffff;
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.9),
        0 0 30px rgba(255, 255, 255, 0.6),
        0 0 60px rgba(0, 255, 255, 0.4),
        0 2px 0 rgba(0, 0, 0, 0.3),
        0 4px 0 rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.title-3d-red {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 0, 0, 0.7);
    transform: translate(-3px, 0);
    z-index: 1;
}

.title-3d-cyan {
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 255, 255, 0.7);
    transform: translate(3px, 0);
    z-index: 2;
}

/* Title Frame */
.title-frame {
    position: absolute;
    width: 110%;
    height: 180%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.frame-line {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    opacity: 0;
}

.frame-top { top: 0; }
.frame-bottom { bottom: 0; }

.frame-bracket {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.6);
    opacity: 0;
}

.frame-bracket-left { left: 0; }
.frame-bracket-right { right: 0; }

/* Status Box */
.boot-status-box {
    margin-top: 40px;
    padding: 12px 30px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    backdrop-filter: blur(5px);
}

.status-bracket {
    font-family: 'Courier New', monospace;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.7);
}

.status-box-text {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: 0.85rem;
    color: #ffffff;
    letter-spacing: 4px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Bottom Indicator */
.boot-bottom-indicator {
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    opacity: 0;
}

.indicator-chevron {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 0.6;
    transform: rotate(-90deg);
}

/* ===== PHASE 3: FINAL HUD ===== */

/* Coordinates */
.boot-coords {
    position: absolute;
    bottom: 30%;
    left: 6%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
}

.coord-line {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    display: flex;
    gap: 5px;
}

.coord-label { font-weight: bold; }
.coord-y .coord-label { color: #ff4444; }
.coord-x .coord-label { color: #44ff44; }
.coord-z .coord-label { color: #4488ff; }
.coord-value { color: rgba(255, 255, 255, 0.7); }

/* Radar */
.boot-radar {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 80px;
    opacity: 0;
}

.radar-ring {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50% 50% 0 0;
    border-bottom: none;
    opacity: 0;
}

.radar-ring-outer {
    width: 160px;
    height: 80px;
}

.radar-ring-mid {
    width: 100px;
    height: 50px;
}

.radar-ring-inner {
    width: 50px;
    height: 25px;
}

.radar-sweep {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 2px;
    height: 80px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), transparent);
    transform-origin: bottom center;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.radar-dot {
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

/* Progress Bar */
.boot-progress {
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    max-width: 350px;
    opacity: 0;
}

.progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    overflow: hidden;
}

.progress-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #00ff88, #00ffff);
    box-shadow: 0 0 15px rgba(0, 255, 200, 0.6);
    transform: scaleX(0);
    transform-origin: left;
}

.progress-markers {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}

.progress-markers span {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
    opacity: 0;
}

/* Labels */
.boot-labels {
    position: absolute;
    bottom: 4%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 4%;
}

.boot-labels span {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    opacity: 0;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .hud-corner {
        width: 50px;
        height: 50px;
    }
    
    .hud-corner-tl, .hud-corner-tr { top: 8%; }
    .hud-corner-bl, .hud-corner-br { bottom: 8%; }
    .hud-corner-tl, .hud-corner-bl { left: 4%; }
    .hud-corner-tr, .hud-corner-br { right: 4%; }
    
    .hud-sidebar { display: none; }
    
    .status-bar-line { width: 60px; }
    .status-text { font-size: 0.7rem; letter-spacing: 2px; }
    
    .hud-chevrons { display: none; }
    
    .boot-logo-container {
        width: 100px;
        height: 120px;
    }
    
    .boot-circle {
        width: 32px;
        height: 32px;
    }
    
    .boot-circle-1 { top: 0; }
    .boot-circle-2 { top: 28px; left: 8px; }
    .boot-circle-3 { top: 28px; right: 8px; }
    
    .boot-circle-ring {
        width: 110px;
        height: 110px;
    }
    
    .boot-circle-stem {
        height: 35px;
        bottom: 8px;
    }
    
    .hud-hash-marks { display: none; }
    
    .bottom-bar-segment { width: 50px; }
    
    .title-3d-layer {
        font-size: clamp(1.6rem, 7vw, 2.8rem);
    }
    
    .boot-status-box {
        padding: 8px 15px;
        margin-top: 25px;
    }
    
    .status-box-text {
        font-size: 0.65rem;
        letter-spacing: 2px;
    }
    
    .boot-coords { display: none; }
    
    .boot-radar {
        width: 100px;
        height: 50px;
    }
    
    .radar-ring-outer { width: 100px; height: 50px; }
    .radar-ring-mid { width: 60px; height: 30px; }
    .radar-ring-inner { width: 30px; height: 15px; }
    .radar-sweep { height: 50px; }
    
    .boot-progress { width: 70%; }
    
    .boot-skip-btn {
        bottom: 15px;
        right: 15px;
        padding: 8px 14px;
        font-size: 0.7rem;
    }
    
    .boot-labels span { font-size: 0.55rem; }
}

/* ===== PHASE SYSTEM ===== */
.boot-phase {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}

/* Phase 1: Flash & Logo (0-1.5s) */
.boot-phase-flash {
    animation: phaseFlash 1.5s ease-out forwards;
}

@keyframes phaseFlash {
    0% { opacity: 1; }
    60% { opacity: 1; }
    100% { opacity: 0; }
}

.boot-flash-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    animation: flashPulse 1.5s ease-out forwards;
}

@keyframes flashPulse {
    0% { opacity: 0; transform: scale(0.8); }
    20% { opacity: 1; transform: scale(1); }
    60% { opacity: 0.8; }
    100% { opacity: 0; transform: scale(1.2); }
}

.boot-logo-container {
    position: relative;
    z-index: 2;
}

.boot-logo-symbol {
    font-size: 120px;
    color: #000;
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    animation: logoAppear 1.5s ease-out forwards;
}

.boot-logo-glitch {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 120px;
    color: var(--color-primary);
    opacity: 0;
    animation: logoGlitch 1.5s ease-out forwards;
}

@keyframes logoAppear {
    0% { opacity: 0; transform: scale(0.5) rotate(-180deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(10deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes logoGlitch {
    0%, 90% { opacity: 0; transform: translate(0, 0); }
    92% { opacity: 0.8; transform: translate(-3px, 2px); }
    94% { opacity: 0.8; transform: translate(2px, -3px); }
    96% { opacity: 0.8; transform: translate(-2px, 3px); }
    100% { opacity: 0; transform: translate(0, 0); }
}

/* Phase 2: System Grid (1.5-3.5s) */
.boot-phase-grid {
    animation: phaseGrid 2s 1.5s ease-out forwards;
}

@keyframes phaseGrid {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

.boot-grid-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridScroll 2s linear infinite;
}

@keyframes gridScroll {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.boot-scan-line {
    position: absolute;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--color-primary) 50%, 
        transparent 100%);
    box-shadow: 0 0 20px var(--color-primary);
    animation: scanLine 2s ease-in-out infinite;
}

@keyframes scanLine {
    0% { top: 0%; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.boot-data-streams {
    position: absolute;
    width: 100%;
    height: 100%;
}

.data-stream {
    position: absolute;
    width: 2px;
    height: 100px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        var(--color-primary) 50%, 
        transparent 100%);
    animation: dataStreamFall 1.5s ease-in infinite;
    opacity: 0.6;
}

@keyframes dataStreamFall {
    0% { top: -100px; }
    100% { top: 100%; }
}

.boot-sys-init {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.8);
    padding: 40px;
    border: 1px solid var(--color-primary);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
    max-width: 600px;
}

.sys-line {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    color: var(--color-primary);
    margin: 10px 0;
    opacity: 0;
    animation: sysLineAppear 0.3s ease-out forwards;
}

.sys-success {
    color: #00ff00;
    font-weight: bold;
}

@keyframes sysLineAppear {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Phase 3: Title Reveal (3.5-5.5s) */
.boot-phase-title {
    animation: phaseTitle 2s 3.5s ease-out forwards;
}

@keyframes phaseTitle {
    0% { opacity: 0; }
    10% { opacity: 1; }
    100% { opacity: 1; }
}

.boot-title-bg {
    position: absolute;
    width: 100%;
    height: 100%;
}

.title-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-primary);
    animation: particleFloat 3s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(20px, -20px) scale(1.5); opacity: 1; }
}

.boot-title-brackets {
    position: absolute;
    width: 80%;
    height: 60%;
    max-width: 800px;
}

.bracket {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid var(--color-primary);
    animation: bracketExpand 0.5s ease-out forwards;
    opacity: 0;
}

.bracket-tl {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    animation-delay: 0.2s;
}

.bracket-tr {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    animation-delay: 0.3s;
}

.bracket-bl {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    animation-delay: 0.4s;
}

.bracket-br {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    animation-delay: 0.5s;
}

@keyframes bracketExpand {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

.boot-main-title {
    position: relative;
    z-index: 2;
    font-family: 'Orbitron', sans-serif;
    font-size: 5rem;
    font-weight: 900;
    color: var(--color-primary);
    text-shadow: 0 0 20px var(--color-primary), 0 0 40px var(--color-primary);
    letter-spacing: 0.2em;
    margin-bottom: 20px;
}

.title-char {
    display: inline-block;
    opacity: 0;
    animation: charReveal 0.5s ease-out forwards;
}

.title-spacer {
    display: inline-block;
    width: 0.5em;
}

@keyframes charReveal {
    0% { 
        opacity: 0; 
        transform: translateY(30px) rotateX(90deg);
        filter: blur(10px);
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) rotateX(0deg);
        filter: blur(0);
    }
}

.boot-subtitle {
    position: relative;
    z-index: 2;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    color: var(--color-secondary);
    letter-spacing: 0.3em;
    margin-bottom: 10px;
    opacity: 0;
    animation: subtitleFade 1s 0.8s ease-out forwards;
}

.boot-version {
    position: relative;
    z-index: 2;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: rgba(0, 255, 255, 0.6);
    opacity: 0;
    animation: subtitleFade 1s 1s ease-out forwards;
}

@keyframes subtitleFade {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .boot-main-title {
        font-size: 3rem;
        letter-spacing: 0.15em;
    }
    
    .boot-subtitle {
        font-size: 0.9rem;
        letter-spacing: 0.2em;
    }
    
    .boot-sys-init {
        padding: 20px;
        max-width: 90%;
    }
    
    .sys-line {
        font-size: 0.85rem;
    }
    
    .bracket {
        width: 40px;
        height: 40px;
    }
    
    .boot-skip-btn {
        bottom: 15px;
        right: 15px;
        padding: 8px 16px;
        font-size: 0.8rem;
    }
}

/* ============================================================================
   ACCESS GRANTED ANIMATION
   ============================================================================ */
#access-granted {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

#access-granted.access-fade-in {
    opacity: 1;
}

#access-granted.access-fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.access-granted-content {
    position: relative;
    text-align: center;
    padding: clamp(40px, 8vw, 80px);
}

.access-text {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(2rem, 8vw, 5rem);
    font-weight: 900;
    color: var(--color-warning);
    letter-spacing: clamp(3px, 0.5vw, 10px);
    text-shadow: 
        0 0 20px var(--color-warning),
        0 0 40px var(--color-warning),
        0 0 60px var(--color-warning-glow),
        0 0 80px var(--color-warning-glow);
    margin-bottom: clamp(15px, 3vw, 30px);
    animation: accessPulse 1.5s ease-in-out infinite;
}

.access-subtext {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    color: var(--color-warning);
    opacity: 0.7;
    letter-spacing: clamp(2px, 0.3vw, 5px);
    text-shadow: 0 0 10px var(--color-warning);
}

.access-corner {
    position: absolute;
    width: clamp(30px, 5vw, 60px);
    height: clamp(30px, 5vw, 60px);
    border: 2px solid var(--color-warning);
    box-shadow: 0 0 10px var(--color-warning), inset 0 0 10px var(--color-warning-dim);
}

.access-corner-tl {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    clip-path: polygon(0 0, 100% 0, 100% 20%, 20% 20%, 20% 100%, 0 100%);
}

.access-corner-tr {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 100%, 80% 20%, 0 20%);
}

.access-corner-bl {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    clip-path: polygon(0 0, 20% 0, 20% 80%, 100% 80%, 100% 100%, 0 100%);
}

.access-corner-br {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    clip-path: polygon(0 80%, 80% 80%, 80% 0, 100% 0, 100% 100%, 0 100%);
}

@keyframes accessPulse {
    0%, 100% {
        text-shadow: 
            0 0 20px var(--color-warning),
            0 0 40px var(--color-warning),
            0 0 60px var(--color-warning-glow),
            0 0 80px var(--color-warning-glow);
    }
    50% {
        text-shadow: 
            0 0 30px var(--color-warning),
            0 0 60px var(--color-warning),
            0 0 90px var(--color-warning-glow),
            0 0 120px var(--color-warning-glow);
    }
}

/* ===== PHASE SYSTEM ===== */
.boot-phase {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
}

/* Phase 1: System Initialization (0-4s) */
.boot-phase-1 {
    animation: phaseIn 0.5s ease-out forwards, phaseOut 0.5s ease-out 3.5s forwards;
    background: #000;
    z-index: 103;
}

.boot-system-init {
    text-align: center;
    width: clamp(300px, 85vw, 700px);
    position: relative;
    padding: clamp(30px, 5vw, 60px);
}

.sys-corners {
    position: absolute;
    inset: 0;
}

.sys-corner {
    position: absolute;
    width: clamp(25px, 4vw, 50px);
    height: clamp(25px, 4vw, 50px);
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 15px var(--color-primary-glow);
}

.sys-tl {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.sys-tr {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
}

.sys-bl {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
}

.sys-br {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

.sys-title {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(1.2rem, 3.5vw, 2rem);
    font-weight: 900;
    color: var(--color-primary);
    letter-spacing: clamp(3px, 0.6vw, 8px);
    text-shadow: 0 0 20px var(--color-primary-glow);
    margin-bottom: clamp(25px, 4vw, 40px);
    animation: titlePulse 2s ease-in-out infinite;
}

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

.sys-processes {
    margin: clamp(20px, 3vw, 35px) 0;
    text-align: left;
}

.sys-process {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2vw, 20px);
    padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 25px);
    margin: clamp(6px, 1.2vw, 10px) 0;
    background: rgba(0, 255, 255, 0.05);
    border-left: 3px solid var(--color-primary);
    opacity: 0;
    animation: processLoad 0.5s ease-out forwards;
    font-family: 'Courier New', monospace;
    font-size: clamp(0.85rem, 1.8vw, 1rem);
}

@keyframes processLoad {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.process-icon {
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary-glow);
}

.process-name {
    flex: 1;
    color: var(--color-primary);
    font-weight: 700;
    letter-spacing: clamp(1px, 0.2vw, 2px);
}

.process-status {
    color: var(--color-warning);
    font-weight: 700;
    text-shadow: 0 0 10px var(--color-warning);
}

.sys-loading-bar {
    width: 100%;
    height: clamp(20px, 3vw, 30px);
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--color-primary);
    margin: clamp(25px, 4vw, 40px) 0 clamp(10px, 2vw, 15px) 0;
    position: relative;
    overflow: hidden;
}

.sys-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-glow));
    width: 0%;
    animation: barFill 3.5s linear forwards;
    box-shadow: 0 0 20px var(--color-primary-glow);
}

@keyframes barFill {
    to { width: 100%; }
}

.sys-percentage {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 900;
    color: var(--color-warning);
    text-shadow: 0 0 15px var(--color-warning);
    text-align: center;
}

/* Phase 2: Welcome Screen (4-7s) */
.boot-phase-2 {
    animation: phaseIn 0.5s ease-out 4s forwards;
    background: #000;
    z-index: 102;
}

.boot-welcome-screen {
    text-align: center;
    position: relative;
    width: clamp(320px, 90vw, 800px);
    padding: clamp(40px, 6vw, 80px);
}

.welcome-shape-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(200px, 40vw, 400px);
    height: clamp(200px, 40vw, 400px);
}

.welcome-shape {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.welcome-hex-1 {
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
    border: 3px solid var(--color-primary);
    animation: shapeReveal 1s ease-out 0.3s forwards, shapePulse 3s ease-in-out infinite;
}

.welcome-hex-2 {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border: 3px solid var(--color-warning);
    transform: scale(0.7);
    animation: shapeReveal 1s ease-out 0.6s forwards, shapePulse 3s 0.5s ease-in-out infinite;
}

.welcome-hex-3 {
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    border: 3px solid var(--color-primary);
    transform: scale(0.4);
    animation: shapeReveal 1s ease-out 0.9s forwards, shapePulse 3s 1s ease-in-out infinite;
}

@keyframes shapeReveal {
    to {
        opacity: 0.6;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes shapePulse {
    0%, 100% {
        box-shadow: 0 0 10px currentColor;
        opacity: 0.4;
    }
    50% {
        box-shadow: 0 0 30px currentColor;
        opacity: 0.8;
    }
}

.shape-line {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid currentColor;
}

.welcome-main-text {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: clamp(3px, 0.6vw, 8px);
    margin-bottom: clamp(10px, 2vw, 15px);
    opacity: 0;
    animation: textFadeIn 0.8s ease-out 0.5s forwards;
}

.welcome-title {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 900;
    color: var(--color-warning);
    letter-spacing: clamp(4px, 1vw, 12px);
    text-shadow: 
        0 0 30px var(--color-warning),
        0 0 60px var(--color-warning-glow);
    margin: clamp(15px, 3vw, 25px) 0;
    opacity: 0;
    animation: textFadeIn 1s ease-out 0.8s forwards, titleGlow 2s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow: 
            0 0 30px var(--color-warning),
            0 0 60px var(--color-warning-glow);
    }
    50% {
        text-shadow: 
            0 0 50px var(--color-warning),
            0 0 100px var(--color-warning-glow);
    }
}

.welcome-subtitle {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: clamp(2px, 0.4vw, 5px);
    text-shadow: 0 0 15px var(--color-primary-glow);
    opacity: 0;
    animation: textFadeIn 0.8s ease-out 1.1s forwards;
}

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

.welcome-corners {
    position: absolute;
    inset: clamp(10px, 2vw, 20px);
}

.welcome-corner {
    position: absolute;
    width: clamp(30px, 5vw, 60px);
    height: clamp(30px, 5vw, 60px);
    border: 2px solid var(--color-primary);
    opacity: 0;
    animation: cornerFade 0.6s ease-out 1.4s forwards;
}

@keyframes cornerFade {
    to { opacity: 0.8; }
}

.wc-tl {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    clip-path: polygon(0 0, 100% 0, 100% 30%, 30% 30%, 30% 100%, 0 100%);
}

.wc-tr {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 100%, 70% 30%, 0 30%);
}

.wc-bl {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    clip-path: polygon(0 0, 30% 0, 30% 70%, 100% 70%, 100% 100%, 0 100%);
}

.wc-br {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    clip-path: polygon(0 70%, 70% 70%, 70% 0, 100% 0, 100% 100%, 0 100%);
}

.corner {
    position: absolute;
    width: clamp(40px, 8vw, 80px);
    height: clamp(40px, 8vw, 80px);
    border: clamp(2px, 0.5vw, 4px) solid var(--color-warning);
    animation: cornerExpand 2s ease-out forwards, cornerPulse 1.5s ease-in-out infinite;
}

.corner-tl {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.corner-tr {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
}

.corner-bl {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
}

.corner-br {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

@keyframes cornerExpand {
    from {
        width: clamp(15px, 3vw, 20px);
        height: clamp(15px, 3vw, 20px);
    }
    to {
        width: clamp(40px, 8vw, 80px);
        height: clamp(40px, 8vw, 80px);
    }
}

@keyframes cornerPulse {
    0%, 100% { opacity: 0.6; box-shadow: 0 0 10px var(--color-warning); }
    50% { opacity: 1; box-shadow: 0 0 30px var(--color-warning); }
}

.frameshift-text {
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: bold;
    letter-spacing: clamp(8px, 2vw, 16px);
    color: var(--color-warning);
    text-shadow: 0 0 40px var(--color-warning), 0 0 80px var(--color-warning);
    animation: frameshiftPulse 1.5s ease-in-out infinite;
    margin-top: 20px;
    font-family: 'Orbitron', 'Courier New', monospace;
}

.frameshift-subtext {
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    letter-spacing: 3px;
    color: var(--color-primary);
    text-shadow: 0 0 20px var(--color-primary-glow);
    margin-top: 20px;
    animation: subtextFade 2s ease-in forwards;
}

.frameshift-dots {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    justify-content: center;
}

.frameshift-dots span {
    font-size: 2rem;
    color: var(--color-warning);
    animation: dotPulse 1.5s ease-in-out infinite;
}

.frameshift-dots span:nth-child(1) { animation-delay: 0s; }
.frameshift-dots span:nth-child(2) { animation-delay: 0.3s; }
.frameshift-dots span:nth-child(3) { animation-delay: 0.6s; }

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

@keyframes dotPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes subtextFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Phase 2: Emergency Warning (3-5s) */
.boot-phase-2 {
    animation: phaseIn 0.3s ease-out 3s forwards, phaseOut 0.3s ease-out 4.7s forwards;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.2) 0%, #000 70%);
    z-index: 102;
}

.boot-emergency {
    width: clamp(280px, 85vw, 650px);
    padding: clamp(15px, 4vw, 35px);
    border: clamp(2px, 0.5vw, 4px) solid var(--color-error);
    background: rgba(40, 0, 0, 0.9);
    box-shadow: 0 0 60px var(--color-error), inset 0 0 40px rgba(255, 0, 0, 0.3);
    clip-path: polygon(
        15px 0,
        calc(100% - 15px) 0,
        100% 15px,
        100% calc(100% - 15px),
        calc(100% - 15px) 100%,
        15px 100%,
        0 calc(100% - 15px),
        0 15px
    );
    position: relative;
    animation: emergencyShake 0.1s ease-in-out infinite;
}

.emergency-stripe-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(15px, 3vw, 25px);
    background: repeating-linear-gradient(
        45deg,
        var(--color-warning) 0px,
        var(--color-warning) 20px,
        #000 20px,
        #000 40px
    );
    animation: stripeScroll 0.5s linear infinite;
}

@keyframes stripeScroll {
    from { background-position: 0 0; }
    to { background-position: 40px 0; }
}

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

.emergency-hexagons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.emergency-hex {
    width: clamp(30px, 5vw, 40px);
    height: clamp(30px, 5vw, 40px);
    background: var(--color-error);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: hexPulse 0.8s ease-in-out infinite;
    box-shadow: 0 0 20px var(--color-error);
}

.emergency-hex:nth-child(odd) { animation-delay: 0s; }
.emergency-hex:nth-child(even) { animation-delay: 0.4s; }

@keyframes hexPulse {
    0%, 100% { opacity: 0.5; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1); }
}

.emergency-header {
    text-align: center;
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    font-weight: bold;
    letter-spacing: clamp(8px, 2vw, 12px);
    color: var(--color-error);
    text-shadow: 0 0 30px var(--color-error);
    margin: 20px 0;
    animation: emergencyBlink 0.5s ease-in-out infinite;
}

.emergency-condition,
.emergency-message,
.emergency-status {
    text-align: center;
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    letter-spacing: 2px;
    margin: 10px 0;
    color: var(--color-warning);
    text-shadow: 0 0 15px var(--color-warning);
}

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

/* Phase 3: Main Terminal (5-15s) */
.boot-phase-3 {
    animation: phaseIn 0.5s ease-out 5s forwards;
    background: #000;
    z-index: 101;
}

@keyframes phaseIn {
    from { opacity: 0; transform: scale(0.95); pointer-events: none; }
    to { opacity: 1; transform: scale(1); pointer-events: all; }
}

@keyframes phaseOut {
    from { opacity: 1; transform: scale(1); pointer-events: all; }
    to { opacity: 0; transform: scale(0.95); pointer-events: none; visibility: hidden; }
}

.boot-container {
    width: clamp(280px, 92vw, 850px);
    max-height: calc(85vh - clamp(140px, 18vw, 180px));
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(15px, 3.5vw, 35px);
    border: clamp(2px, 0.4vw, 3px) solid var(--color-primary);
    clip-path: polygon(
        0 15px,
        15px 0,
        calc(100% - 15px) 0,
        100% 15px,
        100% calc(100% - 15px),
        calc(100% - 15px) 100%,
        15px 100%,
        0 calc(100% - 15px)
    );
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 
        0 0 40px var(--color-primary-glow),
        inset 0 0 60px var(--color-primary-dim);
    position: relative;
    animation: containerScan 3s ease-in-out infinite;
    scroll-behavior: smooth;
    margin-bottom: clamp(20px, 4vw, 30px);
}

/* Custom scrollbar for boot container */
.boot-container::-webkit-scrollbar {
    width: 8px;
}

.boot-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
    border-left: 1px solid var(--color-primary-dim);
}

.boot-container::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary-glow);
}

.boot-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}

@keyframes containerScan {
    0%, 100% { box-shadow: 0 0 40px var(--color-primary-glow), inset 0 0 60px var(--color-primary-dim); }
    50% { box-shadow: 0 0 60px var(--color-primary), inset 0 0 80px var(--color-primary-dim); }
}

/* User Info Section */
.boot-user-info {
    display: flex;
    gap: clamp(15px, 3vw, 30px);
    margin-bottom: clamp(12px, 2.5vw, 20px);
    padding: clamp(8px, 1.5vw, 12px);
    border-left: 3px solid var(--color-secondary);
    background: rgba(0, 255, 255, 0.05);
    opacity: 0;
    animation: bootLineAppear 0.5s ease-out 5.3s forwards;
}

.user-line {
    font-size: clamp(0.75rem, 1.6vw, 0.95rem);
    color: var(--color-text-dim);
    letter-spacing: 1px;
}

.user-name,
.session-id {
    color: var(--color-secondary);
    font-weight: bold;
    text-shadow: 0 0 10px var(--color-secondary);
}

/* Main Title */
.boot-main-title {
    margin: clamp(12px, 2.5vw, 20px) 0;
    opacity: 0;
    animation: bootLineAppear 0.8s ease-out 5.5s forwards;
}

.title-line {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.6rem, 1.4vw, 0.8rem);
    line-height: 1.4;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary-glow);
    letter-spacing: 1px;
}

/* MAGI System Display */
.boot-magi-display {
    margin: clamp(20px, 4vw, 35px) 0;
    padding: clamp(15px, 3vw, 25px);
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
    border: 2px solid var(--color-error);
    position: relative;
    opacity: 0;
    animation: bootLineAppear 0.8s ease-out 5.8s forwards;
}

.magi-header {
    text-align: center;
    font-size: clamp(0.7rem, 1.6vw, 0.9rem);
    font-weight: bold;
    letter-spacing: clamp(1px, 0.3vw, 2px);
    color: var(--color-error);
    text-shadow: 0 0 15px var(--color-error);
    margin-bottom: clamp(15px, 3vw, 25px);
    padding: clamp(8px, 1.5vw, 12px);
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid var(--color-error);
}

.magi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 2.5vw, 20px);
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

@media (max-width: 600px) {
    .magi-grid {
        grid-template-columns: 1fr;
    }
}

.magi-hex {
    aspect-ratio: 1.15;
    background: var(--color-error);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 30px var(--color-error);
    animation: magiPulse 2s ease-in-out infinite;
}

.magi-hex::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: rgba(20, 0, 0, 0.95);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.magi-balthasar {
    grid-column: span 2;
    max-width: 350px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .magi-balthasar {
        grid-column: span 1;
    }
}

.magi-hex-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: clamp(10px, 3vw, 20px);
}

.magi-label {
    font-size: clamp(0.55rem, 1.2vw, 0.7rem);
    color: var(--color-text-dim);
    margin-bottom: clamp(4px, 1vw, 8px);
    letter-spacing: 1px;
    border: 1px solid var(--color-text-dim);
    padding: 2px 6px;
    display: inline-block;
}

.magi-name {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 15px var(--color-error);
    margin: clamp(6px, 1.5vw, 10px) 0;
    line-height: 1.2;
}

.magi-number {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: bold;
    color: var(--color-error);
    text-shadow: 0 0 20px var(--color-error);
}

@keyframes magiPulse {
    0%, 100% { box-shadow: 0 0 30px var(--color-error); }
    50% { box-shadow: 0 0 50px var(--color-error), 0 0 80px rgba(255, 0, 0, 0.5); }
}

.magi-warning-sides {
    display: flex;
    justify-content: space-between;
    margin-top: clamp(15px, 3vw, 25px);
    gap: clamp(10px, 2vw, 20px);
}

.magi-warning-left,
.magi-warning-right {
    flex: 1;
    background: rgba(255, 0, 0, 0.1);
    border: 2px solid var(--color-error);
    padding: clamp(8px, 1.5vw, 12px);
    position: relative;
}

.warning-stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(8px, 1.5vw, 12px);
    background: repeating-linear-gradient(
        45deg,
        var(--color-warning) 0px,
        var(--color-warning) 10px,
        #000 10px,
        #000 20px
    );
}

.warning-text {
    text-align: center;
    font-size: clamp(0.7rem, 1.5vw, 0.9rem);
    font-weight: bold;
    color: var(--color-error);
    text-shadow: 0 0 10px var(--color-error);
    line-height: 1.5;
    margin-top: clamp(12px, 2vw, 18px);
}

/* Protocol Header */
.boot-protocol-header {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: bold;
    color: var(--color-secondary);
    text-shadow: 0 0 20px var(--color-secondary);
    margin: clamp(20px, 4vw, 35px) 0 clamp(15px, 3vw, 25px) 0;
    padding: clamp(10px, 2vw, 15px);
    background: rgba(0, 255, 255, 0.05);
    border-left: 4px solid var(--color-secondary);
    opacity: 0;
    animation: bootLineAppear 0.5s ease-out 6.2s forwards, protocolBlink 1.5s ease-in-out 6.5s infinite;
}

.protocol-arrow {
    margin-right: 10px;
    animation: arrowPulse 1s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% { opacity: 1; transform: translateX(0); }
    50% { opacity: 0.5; transform: translateX(5px); }
}

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

/* HUD Corners */
.boot-hud-corners {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10001;
}

.hud-corner {
    position: absolute;
    width: clamp(50px, 8vw, 90px);
    height: clamp(50px, 8vw, 90px);
    border: clamp(2px, 0.4vw, 3px) solid var(--color-primary);
}

.hud-tl {
    top: clamp(10px, 2vw, 20px);
    left: clamp(10px, 2vw, 20px);
    border-right: none;
    border-bottom: none;
    animation: cornerPulse 2s ease-in-out infinite;
}

.hud-tr {
    top: clamp(10px, 2vw, 20px);
    right: clamp(10px, 2vw, 20px);
    border-left: none;
    border-bottom: none;
    animation: cornerPulse 2s ease-in-out 0.5s infinite;
}

.hud-bl {
    bottom: clamp(10px, 2vw, 20px);
    left: clamp(10px, 2vw, 20px);
    border-right: none;
    border-top: none;
    animation: cornerPulse 2s ease-in-out 1s infinite;
}

.hud-br {
    bottom: clamp(10px, 2vw, 20px);
    right: clamp(10px, 2vw, 20px);
    border-left: none;
    border-top: none;
    animation: cornerPulse 2s ease-in-out 1.5s infinite;
}

.boot-timestamp {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: clamp(0.7rem, 1.5vw, 0.9rem);
    color: var(--color-secondary);
    text-shadow: 0 0 10px var(--color-secondary);
    opacity: 0;
    animation: bootLineAppear 0.5s ease-out 5.2s forwards;
}

.timestamp-label {
    margin-right: 5px;
    opacity: 0.7;
}

.boot-system-check {
    margin: 20px 0;
    font-size: clamp(0.75rem, 1.8vw, 0.9rem);
}

.boot-section-header {
    color: var(--color-secondary);
    font-weight: bold;
    letter-spacing: clamp(0.5px, 0.2vw, 1.5px);
    margin: clamp(12px, 2.5vw, 18px) 0 clamp(6px, 1.2vw, 10px) 0;
    padding: clamp(6px, 1.5vw, 10px);
    background: rgba(0, 255, 255, 0.05);
    border-left: 3px solid var(--color-secondary);
    text-shadow: 0 0 10px var(--color-secondary);
    opacity: 0;
    animation: bootLineAppear 0.3s ease-out forwards;
}

.section-icon {
    margin-right: 8px;
    color: var(--color-primary);
}

.boot-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-primary-dim);
    opacity: 0;
    animation: bootLineAppear 0.2s ease-out forwards;
    letter-spacing: 1px;
}

.boot-line.boot-spacer {
    border-bottom: none;
    padding: 4px 0;
    min-height: 5px;
}

.boot-line.boot-indent {
    padding-left: 20px;
    font-size: clamp(0.7rem, 1.6vw, 0.85rem);
}

/* Staggered animation delays */
.boot-section-header:nth-of-type(1) { animation-delay: 6.4s; }
.boot-section-header:nth-of-type(2) { animation-delay: 7.6s; }
.boot-section-header:nth-of-type(3) { animation-delay: 8.8s; }
.boot-section-header:nth-of-type(4) { animation-delay: 10s; }

.boot-system-check .boot-line:nth-child(2) { animation-delay: 6.5s; }
.boot-system-check .boot-line:nth-child(3) { animation-delay: 6.6s; }
.boot-system-check .boot-line:nth-child(4) { animation-delay: 6.7s; }
.boot-system-check .boot-line:nth-child(5) { animation-delay: 6.8s; }
.boot-system-check .boot-line:nth-child(6) { animation-delay: 6.9s; }
.boot-system-check .boot-line:nth-child(7) { animation-delay: 7.7s; }
.boot-system-check .boot-line:nth-child(8) { animation-delay: 7.8s; }
.boot-system-check .boot-line:nth-child(9) { animation-delay: 7.9s; }
.boot-system-check .boot-line:nth-child(10) { animation-delay: 8s; }
.boot-system-check .boot-line:nth-child(11) { animation-delay: 8.1s; }
.boot-system-check .boot-line:nth-child(12) { animation-delay: 8.9s; }
.boot-system-check .boot-line:nth-child(13) { animation-delay: 9s; }
.boot-system-check .boot-line:nth-child(14) { animation-delay: 9.1s; }
.boot-system-check .boot-line:nth-child(15) { animation-delay: 9.2s; }
.boot-system-check .boot-line:nth-child(16) { animation-delay: 9.3s; }
.boot-system-check .boot-line:nth-child(17) { animation-delay: 9.4s; }
.boot-system-check .boot-line:nth-child(18) { animation-delay: 10.1s; }
.boot-system-check .boot-line:nth-child(19) { animation-delay: 10.2s; }
.boot-system-check .boot-line:nth-child(20) { animation-delay: 10.3s; }
.boot-system-check .boot-line:nth-child(21) { animation-delay: 10.4s; }
.boot-system-check .boot-line:nth-child(22) { animation-delay: 10.5s; }

@keyframes bootLineAppear {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.boot-status {
    color: var(--color-success);
    font-weight: bold;
    text-shadow: 0 0 10px var(--color-success);
    font-family: 'Courier New', monospace;
    font-size: clamp(0.7rem, 1.5vw, 0.85rem);
}

.boot-status.warning {
    color: var(--color-warning);
    text-shadow: 0 0 10px var(--color-warning);
}

.boot-critical-status {
    margin-top: 15px;
    padding: 15px;
    background: rgba(0, 255, 255, 0.05);
    border: 2px solid var(--color-primary);
    clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
    );
    opacity: 0;
    animation: bootLineAppear 0.5s ease-out 11s forwards;
}

.critical-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: clamp(0.8rem, 1.8vw, 1rem);
}

.critical-icon {
    color: var(--color-primary);
    font-size: clamp(1rem, 2vw, 1.2rem);
    animation: criticalPulse 1.5s ease-in-out infinite;
}

@keyframes criticalPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

.boot-status-highlight {
    color: var(--color-primary);
    font-weight: bold;
    text-shadow: 0 0 15px var(--color-primary-glow);
    animation: statusBlink 1.5s ease-in-out infinite;
}

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

.boot-hexagon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(35px, 7vw, 50px), 1fr));
    gap: clamp(6px, 1.5vw, 10px);
    max-width: clamp(300px, 60vw, 450px);
    margin: clamp(20px, 4vw, 35px) auto;
    opacity: 0;
    animation: bootLineAppear 0.5s ease-out 11.5s forwards;
}

.boot-hexagon {
    width: 100%;
    aspect-ratio: 1;
    background: var(--color-primary-dim);
    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    animation: hexagonFill 0.3s ease-out forwards;
    opacity: 0;
}

.hex-id {
    font-size: clamp(0.6rem, 1.5vw, 0.8rem);
    color: #000;
    font-weight: bold;
    z-index: 1;
}

.boot-hexagon:nth-child(1) { animation-delay: 11.6s; }
.boot-hexagon:nth-child(2) { animation-delay: 11.7s; }
.boot-hexagon:nth-child(3) { animation-delay: 11.8s; }
.boot-hexagon:nth-child(4) { animation-delay: 11.9s; }
.boot-hexagon:nth-child(5) { animation-delay: 12s; }
.boot-hexagon:nth-child(6) { animation-delay: 12.1s; }
.boot-hexagon:nth-child(7) { animation-delay: 12.2s; }
.boot-hexagon:nth-child(8) { animation-delay: 12.3s; }

@keyframes hexagonFill {
    from {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(360deg);
        background: var(--color-primary);
        box-shadow: 0 0 20px var(--color-primary-glow);
    }
}

/* Static welcome message - always visible outside scroll container */
.boot-welcome-static {
    position: absolute;
    bottom: clamp(140px, 18vw, 200px);
    left: clamp(20px, 4vw, 40px);
    right: clamp(20px, 4vw, 40px);
    z-index: 100;
    opacity: 0;
    animation: bootLineAppear 0.5s ease-out 5.5s forwards;
    text-align: center;
    /* Hexagonal container sizing */
    display: flex;
    justify-content: center;
}

.boot-welcome-label {
    font-size: clamp(1.2rem, 3vw, 2rem);
    letter-spacing: clamp(3px, 0.5vw, 6px);
    color: var(--color-primary);
    text-shadow: 
        0 0 15px var(--color-primary),
        0 0 30px var(--color-primary-glow);
    font-family: 'Orbitron', 'Courier New', monospace;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    /* Add hexagonal background frame */
    padding: clamp(20px, 4vw, 40px) clamp(30px, 6vw, 60px);
}

/* Hexagonal frame for welcome message - Evangelion style */
/* Outer hexagon - solid border */
.boot-welcome-label::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: var(--color-primary); /* Solid cyan for border */
    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
    z-index: -1;
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.6),
        0 0 40px rgba(0, 255, 255, 0.3);
}

/* Inner hexagon - 30% opacity fill */
.boot-welcome-label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - clamp(4px, 0.5vw, 8px)); /* Responsive border width */
    height: calc(100% - clamp(4px, 0.5vw, 8px));
    background: rgba(0, 255, 255, 0.3); /* 30% opacity cyan fill */
    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
    z-index: -1;
}

/* Welcome message at end of boot sequence */
.boot-welcome-message {
    position: absolute;
    bottom: clamp(20px, 4vw, 30px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 101;
    transition: opacity 1s ease-in;
}

.welcome-text-main {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 900;
    color: var(--color-warning);
    letter-spacing: clamp(3px, 0.5vw, 8px);
    text-shadow: 
        0 0 20px var(--color-warning),
        0 0 40px var(--color-warning),
        0 0 60px var(--color-warning-glow);
    margin-bottom: clamp(8px, 1.5vw, 12px);
    text-transform: uppercase;
}

.welcome-text-sub {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: clamp(2px, 0.4vw, 6px);
    text-shadow: 
        0 0 15px var(--color-primary),
        0 0 30px rgba(0, 255, 255, 0.5);
    text-transform: uppercase;
}

.boot-warning-stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(12px, 2.5vw, 18px);
    background: repeating-linear-gradient(
        45deg,
        var(--color-warning) 0px,
        var(--color-warning) 15px,
        rgba(0, 0, 0, 0.8) 15px,
        rgba(0, 0, 0, 0.8) 30px
    );
    border-bottom: 2px solid var(--color-warning);
    animation: warningPulse 1s ease-in-out infinite;
    z-index: 10;
}

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

.boot-footer {
    text-align: center;
    margin-top: clamp(18px, 3.5vw, 30px);
    padding: clamp(12px, 2.5vw, 18px);
    opacity: 0;
    animation: bootLineAppear 0.5s ease-out 13.5s forwards;
}

.boot-footer-line {
    font-family: 'Courier New', monospace;
    font-size: clamp(0.65rem, 1.6vw, 0.85rem);
    letter-spacing: clamp(0.5px, 0.15vw, 1px);
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary-glow);
    line-height: 1.6;
}

.footer-welcome {
    font-weight: bold;
    color: var(--color-warning);
    text-shadow: 0 0 15px var(--color-warning);
    margin: 5px 0;
}

.footer-prompt {
    color: var(--color-secondary);
    text-shadow: 0 0 12px var(--color-secondary);
    animation: cursorBlink 1s step-end infinite;
}

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

/* ============================================================================
   HEXAGONAL DECORATIVE ELEMENTS
   ============================================================================ */

/* Hexagonal stat badges */
.stat-badge-hex {
    width: 60px;
    height: 60px;
    background: var(--color-primary);
    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 20px var(--color-primary-glow);
}

.stat-badge-hex::before {
    content: '';
    position: absolute;
    width: 52px;
    height: 52px;
    background: var(--color-bg);
    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
}

.stat-badge-hex-value {
    position: relative;
    z-index: 1;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--color-primary);
}

/* Hexagonal corner decorations */
.hex-corner-tl,
.hex-corner-tr,
.hex-corner-bl,
.hex-corner-br {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--color-secondary);
    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
    opacity: 0.6;
}

.hex-corner-tl { top: 20px; left: 20px; }
.hex-corner-tr { top: 20px; right: 20px; }
.hex-corner-bl { bottom: 20px; left: 20px; }
.hex-corner-br { bottom: 20px; right: 20px; }

/* Hexagonal pattern background */
.hex-pattern-bg {
    position: relative;
}

.hex-pattern-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 0% 0%, var(--color-primary-dim) 2px, transparent 2px),
        radial-gradient(circle at 50% 25%, var(--color-primary-dim) 2px, transparent 2px),
        radial-gradient(circle at 0% 50%, var(--color-primary-dim) 2px, transparent 2px);
    background-size: 40px 60px;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

/* ============================================================================
   EVANGELION-STYLE PAGE TRANSITIONS
   ============================================================================ */

.panel {
    animation: pageSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Screen wipe transition effect */
.screen-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    transform: scaleY(0);
    transform-origin: top;
    z-index: 9999;
    pointer-events: none;
}

.screen-transition.active {
    animation: screenWipe 0.6s cubic-bezier(0.87, 0, 0.13, 1);
}

@keyframes screenWipe {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }
    50% {
        transform: scaleY(1);
        transform-origin: top;
    }
    51% {
        transform: scaleY(1);
        transform-origin: bottom;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

/* Data stream effect during transitions */
@keyframes dataStream {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Technical readout flash */
.tech-flash {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: var(--color-primary);
    font-family: 'Courier New', monospace;
    letter-spacing: 10px;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    text-shadow: 0 0 30px var(--color-primary);
}

.tech-flash.show {
    animation: techFlash 0.6s ease-out;
}

@keyframes techFlash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ============================================================================
   GLOBAL HEXAGONAL BUTTON STYLING
   ============================================================================ */

/* Apply hexagonal shape to ALL buttons throughout the app */
.btn,
.select-player-btn,
.create-player-btn-login,
.test-sound-btn,
button {
    clip-path: polygon(
        10% 0%,
        90% 0%,
        100% 50%,
        90% 100%,
        10% 100%,
        0% 50%
    ) !important;
    position: relative;
}

/* Add corner indicators to hexagonal buttons */
.btn::before,
.btn::after {
    display: none !important;
}

/* Hexagonal buttons with symmetrical design */
.btn,
button {
    background: var(--color-bg);
    border: 2px solid var(--color-primary);
    color: var(--color-text);
    padding: 12px 32px;
    min-width: 140px;
    text-align: center;
    justify-content: center;
}

/* Ensure text is centered in hexagonal buttons */
.btn span,
button span {
    position: relative;
    z-index: 2;
}

/* Hexagonal hover state */
.btn:hover,
button:hover {
    background: var(--color-primary-dim);
    box-shadow: 
        0 0 20px var(--color-primary-glow),
        inset 0 0 30px var(--color-primary-dim);
    transform: scale(1.05);
}

/* Small hexagonal buttons */
.btn-small {
    padding: 8px 20px;
    min-width: 100px;
    font-size: 0.85rem;
}

/* Hexagonal input fields to match */
input[type="text"],
input[type="password"],
input[type="number"],
textarea {
    clip-path: polygon(
        5% 0%,
        95% 0%,
        100% 50%,
        95% 100%,
        5% 100%,
        0% 50%
    );
    border: 2px solid var(--color-primary);
    background: var(--color-bg-panel);
    padding: 10px 20px;
}

/* ============================================================================
   Achievement Notification Styles
   ============================================================================ */
.achievement-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--color-bg-panel);
    border: 2px solid var(--color-accent);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 
        0 0 30px var(--color-accent),
        inset 0 0 50px rgba(0, 0, 0, 0.5);
    z-index: 10001;
    display: flex;
    gap: 15px;
    align-items: center;
    min-width: 300px;
    animation: slideInRight 0.5s ease-out, fadeOut 0.5s ease-in 3.5s forwards;
    transition: opacity 0.5s;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

.achievement-icon {
    font-size: 3rem;
    line-height: 1;
    animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.achievement-content {
    flex: 1;
}

.achievement-title {
    font-size: 0.75rem;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
    font-weight: bold;
}

.achievement-name {
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: bold;
    margin-bottom: 5px;
    text-shadow: 0 0 10px var(--color-primary-glow);
}

.achievement-desc {
    font-size: 0.85rem;
    color: var(--color-text-dim);
}

@media (max-width: 768px) {
    .achievement-notification {
        top: 10px;
        right: 10px;
        left: 10px;
        min-width: unset;
        padding: 15px;
    }
    
    .achievement-icon {
        font-size: 2.5rem;
    }
    
    .achievement-name {
        font-size: 1rem;
    }
    
    .achievement-desc {
        font-size: 0.8rem;
    }
}

/* ============================================================================
   Achievements Screen Styles
   ============================================================================ */
.achievements-container {
    max-width: 900px;
    margin: 0 auto;
}

.achievements-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: var(--color-bg-panel);
    border: 2px solid var(--color-accent);
    border-radius: 8px;
    box-shadow: 0 0 20px var(--color-accent);
}

.achievement-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.achievement-count {
    font-size: 2.5rem;
    color: var(--color-accent);
    font-weight: bold;
    text-shadow: 0 0 20px var(--color-accent);
}

.achievement-label {
    font-size: 0.9rem;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.achievement-card {
    background: var(--color-bg-panel);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.achievement-card.unlocked {
    box-shadow: 0 0 20px var(--color-primary-glow);
}

.achievement-card.locked {
    opacity: 0.5;
    border-color: var(--color-text-dim);
}

.achievement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px var(--color-primary-glow);
}

.achievement-card-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.achievement-card-name {
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: bold;
    margin-bottom: 10px;
}

.achievement-card-desc {
    font-size: 0.85rem;
    color: var(--color-text-dim);
}

.challenges-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.challenge-card {
    background: var(--color-bg-panel);
    border: 2px solid var(--color-secondary);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    gap: 20px;
    align-items: center;
    transition: all 0.3s ease;
}

.challenge-card.complete {
    border-color: var(--color-success);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}

.challenge-card:hover {
    transform: translateX(5px);
    box-shadow: 0 0 20px var(--color-secondary);
}

.challenge-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.challenge-content {
    flex: 1;
}

.challenge-name {
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: bold;
    margin-bottom: 5px;
}

.challenge-desc {
    font-size: 0.85rem;
    color: var(--color-text-dim);
    margin-bottom: 10px;
}

.challenge-progress-bar {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-primary-dim);
    border-radius: 10px;
    height: 20px;
    overflow: hidden;
    margin-bottom: 5px;
}

.challenge-progress-fill {
    background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
    height: 100%;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px var(--color-secondary);
}

.challenge-progress-text {
    font-size: 0.8rem;
    color: var(--color-text-dim);
    text-align: right;
}

@media (max-width: 768px) {
    .achievements-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
    
    .achievement-card {
        padding: 15px;
    }
    
    .achievement-card-icon {
        font-size: 2.5rem;
    }
    
    .challenge-card {
        flex-direction: column;
        text-align: center;
    }
    
    .challenge-icon {
        font-size: 2rem;
    }
}

/* Floating Navigation Buttons */
.floating-nav {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
    pointer-events: none; /* Allow clicking through container */
}

.floating-nav-btn {
    background: var(--color-bg-panel);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    padding: 12px 20px;
    font-size: 1rem;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 0 20px var(--color-primary-glow), 0 4px 12px rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
    text-shadow: 0 0 5px var(--color-primary);
    min-width: 140px;
    text-align: center;
    pointer-events: auto; /* Re-enable for buttons */
    backdrop-filter: blur(10px); /* Add blur for better readability */
}

.floating-nav-btn:hover {
    background: var(--color-primary-dim);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 0 30px var(--color-primary-glow), 0 6px 16px rgba(0, 0, 0, 0.8);
}

.floating-nav-btn:active {
    transform: translateY(0) scale(1);
}

/* Tablet optimization - move to left for better thumb reach */
@media (max-width: 768px) {
    .floating-nav {
        left: 10px;
        right: auto;
        bottom: 10px;
        gap: 8px;
    }
    
    .floating-nav-btn {
        padding: 10px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }
}

/* Mobile optimization - horizontal bottom bar for best ergonomics */
@media (max-width: 480px) {
    .floating-nav {
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: row;
        justify-content: space-around;
        padding: 10px;
        gap: 10px;
        background: linear-gradient(to top, var(--color-bg-panel) 0%, transparent 100%);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--color-primary);
    }
    
    .floating-nav-btn {
        flex: 1;
        min-width: 0;
        max-width: 180px;
        padding: 12px 16px;
        font-size: 0.85rem;
    }
}

/* ============================================================================
   ENHANCED CYBERPUNK PANEL DESIGNS
   Inspired by mecha/Evangelion UI with internal artwork and unique shapes
   ============================================================================ */

/* Enhanced Tile Base with Internal Decorations */
.tile {
    position: relative;
}

/* Top-left corner bracket decoration */
.tile::before {
    content: '◢';
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 10px;
    color: var(--color-primary);
    opacity: 0.6;
    z-index: 5;
    text-shadow: 0 0 5px var(--color-primary);
}

/* Enhanced tile with internal circuit pattern */
.tile::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, transparent 85%, var(--color-primary-dim) 85%),
        linear-gradient(-135deg, transparent 95%, rgba(255,255,255,0.05) 95%);
    pointer-events: none;
    z-index: 1;
}

/* Subject tile enhanced decorations */
[data-subject-id]::before {
    content: '//SYS.MODULE';
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 7px;
    letter-spacing: 1px;
    color: var(--color-primary);
    opacity: 0.5;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 3px var(--color-primary);
}

/* Add scan line effect to tiles */
[data-subject-id]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 255, 255, 0.02) 2px,
            rgba(0, 255, 255, 0.02) 4px
        ),
        linear-gradient(135deg, transparent 80%, var(--color-primary-dim) 80%);
    pointer-events: none;
    z-index: 2;
}

/* Topic tiles with different decoration */
[data-topic-id]::before {
    content: '►QUEST';
    position: absolute;
    top: 5px;
    right: 8px;
    font-size: 6px;
    letter-spacing: 2px;
    color: var(--color-secondary, var(--color-primary));
    opacity: 0.7;
    font-family: 'Courier New', monospace;
}

/* Add diagonal stripe accent to tiles */
.grid .tile:nth-child(odd)::after {
    background: 
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 8px,
            rgba(255, 255, 255, 0.02) 8px,
            rgba(255, 255, 255, 0.02) 10px
        ),
        linear-gradient(135deg, transparent 85%, var(--color-primary-dim) 85%);
}

/* Tile bottom status bar decoration */
.tile-title::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    opacity: 0.4;
}

/* Enhanced Panel with Mecha Frame */
.panel {
    position: relative;
}

/* Panel corner accents */
.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-left: 3px solid var(--color-primary);
    border-top: 3px solid var(--color-primary);
    opacity: 0.6;
    z-index: 10;
    pointer-events: none;
}

.panel::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border-right: 3px solid var(--color-primary);
    border-bottom: 3px solid var(--color-primary);
    opacity: 0.6;
    z-index: 10;
    pointer-events: none;
}

/* ============================================================================
   ENHANCED BOOT ANIMATION EFFECTS
   More intricate anime.js driven visuals with glitch and chromatic aberration
   ============================================================================ */

/* Enhanced glitch overlay with RGB split */
.boot-glitch-overlay {
    background: transparent;
    animation: enhancedGlitch 3s infinite;
}

@keyframes enhancedGlitch {
    0%, 90%, 100% { 
        opacity: 0;
        transform: translate(0, 0);
    }
    91% { 
        opacity: 1;
        background: linear-gradient(90deg, rgba(255,0,0,0.1) 33%, rgba(0,255,0,0.1) 33%, rgba(0,255,0,0.1) 66%, rgba(0,0,255,0.1) 66%);
        transform: translate(-5px, 0);
    }
    93% { 
        opacity: 1;
        background: linear-gradient(90deg, rgba(0,255,255,0.1) 50%, rgba(255,0,255,0.1) 50%);
        transform: translate(5px, 0);
    }
    95% {
        opacity: 0.5;
        transform: translate(-2px, 2px);
    }
}

/* Enhanced HUD corners with glow animation */
.hud-corner {
    animation: cornerGlow 2s ease-in-out infinite alternate;
}

@keyframes cornerGlow {
    0% {
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.3), inset 0 0 5px rgba(255, 0, 0, 0.1);
    }
    100% {
        box-shadow: 0 0 25px rgba(255, 0, 0, 0.6), inset 0 0 10px rgba(255, 0, 0, 0.2);
    }
}

/* Enhanced three circles with pulse effect */
.boot-circle {
    animation: circlePulse 1.5s ease-in-out infinite;
}

.boot-circle-1 { animation-delay: 0s; }
.boot-circle-2 { animation-delay: 0.2s; }
.boot-circle-3 { animation-delay: 0.4s; }

@keyframes circlePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 40px rgba(255, 0, 0, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 40px rgba(255, 0, 0, 1), 0 0 80px rgba(255, 0, 0, 0.6);
    }
}

/* Enhanced 3D title with stronger chromatic aberration */
.title-3d-red {
    color: #ff0000;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
    animation: chromaticRed 2s ease-in-out infinite;
}

.title-3d-cyan {
    color: #00ffff;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    animation: chromaticCyan 2s ease-in-out infinite;
}

@keyframes chromaticRed {
    0%, 100% { transform: translateX(-3px) translateY(-1px); opacity: 0.7; }
    50% { transform: translateX(-5px) translateY(-2px); opacity: 0.9; }
}

@keyframes chromaticCyan {
    0%, 100% { transform: translateX(3px) translateY(1px); opacity: 0.7; }
    50% { transform: translateX(5px) translateY(2px); opacity: 0.9; }
}

/* Enhanced radar sweep */
.radar-sweep {
    animation: radarSweep 2s linear infinite;
}

@keyframes radarSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Scanning line effect for boot sequence */
#boot-sequence::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.8), transparent);
    animation: scanLine 3s linear infinite;
    z-index: 1001;
}

@keyframes scanLine {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Data stream effect on sides */
.hud-sidebar-left .sidebar-segment,
.hud-sidebar-right .sidebar-segment {
    animation: dataStream 0.8s ease-in-out infinite;
}

.hud-sidebar-left .sidebar-segment:nth-child(1) { animation-delay: 0s; }
.hud-sidebar-left .sidebar-segment:nth-child(2) { animation-delay: 0.15s; }
.hud-sidebar-left .sidebar-segment:nth-child(3) { animation-delay: 0.3s; }
.hud-sidebar-left .sidebar-segment:nth-child(4) { animation-delay: 0.45s; }
.hud-sidebar-left .sidebar-segment:nth-child(5) { animation-delay: 0.6s; }

.hud-sidebar-right .sidebar-segment:nth-child(1) { animation-delay: 0.1s; }
.hud-sidebar-right .sidebar-segment:nth-child(2) { animation-delay: 0.25s; }
.hud-sidebar-right .sidebar-segment:nth-child(3) { animation-delay: 0.4s; }
.hud-sidebar-right .sidebar-segment:nth-child(4) { animation-delay: 0.55s; }
.hud-sidebar-right .sidebar-segment:nth-child(5) { animation-delay: 0.7s; }

@keyframes dataStream {
    0%, 100% { 
        opacity: 0.3;
        transform: scaleY(0.8);
    }
    50% { 
        opacity: 1;
        transform: scaleY(1);
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
    }
}

/* Enhanced chevron animation */
.hud-chevrons-left .chevron,
.hud-chevrons-right .chevron {
    animation: chevronPulse 1s ease-in-out infinite;
}

.hud-chevrons-left .chevron:nth-child(1) { animation-delay: 0s; }
.hud-chevrons-left .chevron:nth-child(2) { animation-delay: 0.1s; }
.hud-chevrons-left .chevron:nth-child(3) { animation-delay: 0.2s; }
.hud-chevrons-left .chevron:nth-child(4) { animation-delay: 0.3s; }
.hud-chevrons-left .chevron:nth-child(5) { animation-delay: 0.4s; }
.hud-chevrons-left .chevron:nth-child(6) { animation-delay: 0.5s; }
.hud-chevrons-left .chevron:nth-child(7) { animation-delay: 0.6s; }

.hud-chevrons-right .chevron:nth-child(1) { animation-delay: 0.05s; }
.hud-chevrons-right .chevron:nth-child(2) { animation-delay: 0.15s; }
.hud-chevrons-right .chevron:nth-child(3) { animation-delay: 0.25s; }
.hud-chevrons-right .chevron:nth-child(4) { animation-delay: 0.35s; }
.hud-chevrons-right .chevron:nth-child(5) { animation-delay: 0.45s; }
.hud-chevrons-right .chevron:nth-child(6) { animation-delay: 0.55s; }
.hud-chevrons-right .chevron:nth-child(7) { animation-delay: 0.65s; }

@keyframes chevronPulse {
    0%, 100% { 
        opacity: 0.4;
        transform: translateX(0);
    }
    50% { 
        opacity: 1;
        transform: translateX(-5px);
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
    }
}

.hud-chevrons-right .chevron {
    animation-name: chevronPulseRight;
}

@keyframes chevronPulseRight {
    0%, 100% { 
        opacity: 0.4;
        transform: translateX(0);
    }
    50% { 
        opacity: 1;
        transform: translateX(5px);
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
    }
}

/* Progress bar fill animation */
.progress-fill {
    animation: progressFill 2s ease-out forwards;
    background: linear-gradient(90deg, #ff0000, #ff4444, #ff0000);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
}

@keyframes progressFill {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Boot labels flicker */
.boot-labels span {
    animation: labelFlicker 0.1s infinite;
}

.label-left { animation-delay: 0s; }
.label-right { animation-delay: 0.05s; }

@keyframes labelFlicker {
    0%, 95%, 100% { opacity: 1; }
    96% { opacity: 0.7; }
}

/* Enhanced status text typing cursor */
.status-text::after {
    content: '█';
    animation: cursorBlink 0.6s infinite;
    margin-left: 2px;
}

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

/* Hash marks animation */
.hud-hash-marks {
    animation: hashScroll 2s linear infinite;
}

.hud-hash-left {
    animation-direction: normal;
}

.hud-hash-right {
    animation-direction: reverse;
}

@keyframes hashScroll {
    0% { opacity: 0.3; letter-spacing: 2px; }
    50% { opacity: 0.6; letter-spacing: 4px; }
    100% { opacity: 0.3; letter-spacing: 2px; }
}

/* Additional Boot Animation Elements */

/* Hexagonal Grid Background */
.boot-hex-grid {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(30deg, rgba(255, 0, 0, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(255, 0, 0, 0.03) 87.5%, rgba(255, 0, 0, 0.03)),
        linear-gradient(150deg, rgba(255, 0, 0, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(255, 0, 0, 0.03) 87.5%, rgba(255, 0, 0, 0.03)),
        linear-gradient(30deg, rgba(255, 0, 0, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(255, 0, 0, 0.03) 87.5%, rgba(255, 0, 0, 0.03)),
        linear-gradient(150deg, rgba(255, 0, 0, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(255, 0, 0, 0.03) 87.5%, rgba(255, 0, 0, 0.03)),
        linear-gradient(60deg, rgba(255, 0, 0, 0.05) 25%, transparent 25.5%, transparent 75%, rgba(255, 0, 0, 0.05) 75%, rgba(255, 0, 0, 0.05)),
        linear-gradient(60deg, rgba(255, 0, 0, 0.05) 25%, transparent 25.5%, transparent 75%, rgba(255, 0, 0, 0.05) 75%, rgba(255, 0, 0, 0.05));
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
    opacity: 0.5;
    animation: hexGridPulse 4s ease-in-out infinite;
    z-index: 1;
}

@keyframes hexGridPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Data Stream Effects */
.boot-data-stream {
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    z-index: 2;
}

.boot-data-stream-left {
    left: 5%;
    background: linear-gradient(to bottom, 
        transparent 0%,
        rgba(255, 0, 0, 0.8) 10%,
        transparent 20%,
        rgba(255, 0, 0, 0.4) 30%,
        transparent 40%,
        rgba(255, 0, 0, 0.6) 50%,
        transparent 60%,
        rgba(255, 0, 0, 0.3) 70%,
        transparent 80%,
        rgba(255, 0, 0, 0.7) 90%,
        transparent 100%
    );
    animation: dataStreamFlow 2s linear infinite;
}

.boot-data-stream-right {
    right: 5%;
    background: linear-gradient(to bottom, 
        transparent 0%,
        rgba(255, 0, 0, 0.6) 15%,
        transparent 25%,
        rgba(255, 0, 0, 0.8) 35%,
        transparent 45%,
        rgba(255, 0, 0, 0.4) 55%,
        transparent 65%,
        rgba(255, 0, 0, 0.7) 75%,
        transparent 85%,
        rgba(255, 0, 0, 0.5) 95%,
        transparent 100%
    );
    animation: dataStreamFlow 2.5s linear infinite reverse;
}

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

/* Corner Labels */
.corner-label {
    position: absolute;
    font-size: 8px;
    color: rgba(255, 0, 0, 0.6);
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.hud-corner-tl .corner-label { bottom: -15px; left: 0; }
.hud-corner-tr .corner-label { bottom: -15px; right: 0; }
.hud-corner-bl .corner-label { top: -15px; left: 0; }
.hud-corner-br .corner-label { top: -15px; right: 0; }

/* Binary Decoration */
.binary-decoration {
    font-size: 8px;
    color: rgba(255, 0, 0, 0.4);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    animation: binaryFlicker 0.5s infinite;
}

@keyframes binaryFlicker {
    0%, 90%, 100% { opacity: 0.4; }
    95% { opacity: 0.8; }
}

/* Outer Ring for Logo */
.boot-circle-outer-ring {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid rgba(255, 0, 0, 0.2);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: outerRingRotate 10s linear infinite;
}

@keyframes outerRingRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Pulse Ring */
.boot-circle-pulse {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 2px solid rgba(255, 0, 0, 0.5);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulseRing 1.5s ease-out infinite;
}

@keyframes pulseRing {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Enhanced Sidebar Segments */
.sidebar-segment:nth-child(6) { animation-delay: 0.75s; }
.sidebar-segment:nth-child(7) { animation-delay: 0.9s; }

/* More Chevrons */
.hud-chevrons-left .chevron:nth-child(8) { animation-delay: 0.7s; }
.hud-chevrons-left .chevron:nth-child(9) { animation-delay: 0.8s; }
.hud-chevrons-right .chevron:nth-child(8) { animation-delay: 0.75s; }
.hud-chevrons-right .chevron:nth-child(9) { animation-delay: 0.85s; }

/* ============================================
   HOME PAGE - REDESIGNED LAYOUT
   Dual primary selectors + Results analytics
   ============================================ */

.home-main-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 45vw, 350px), 1fr));
    gap: clamp(15px, 3vw, 30px);
    margin: clamp(20px, 5vh, 40px) 0;
    width: 100%;
}

/* Primary Tile - AFOQT Practice or Subjects */
.home-primary-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 16px);
    padding: clamp(25px, 5vw, 40px);
    min-height: clamp(180px, 35vh, 280px);
    
    background: linear-gradient(135deg, 
        rgba(0, 255, 255, 0.1) 0%, 
        rgba(0, 100, 150, 0.05) 100%);
    
    border: 2px solid var(--color-primary);
    border-radius: 0;
    
    /* Sci-fi clip corners */
    clip-path: polygon(
        15px 0%, 100% 0%, 100% 0%,
        100% calc(100% - 15px), calc(100% - 15px) 100%,
        0% 100%, 0% 100%, 0% 15px
    );
    
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.3),
        inset 0 0 30px rgba(0, 255, 255, 0.05);
    
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    overflow: visible;
    text-align: center;
}

.home-primary-tile:hover {
    background: linear-gradient(135deg, 
        rgba(0, 255, 255, 0.2) 0%, 
        rgba(0, 150, 200, 0.1) 100%);
    
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.5),
        inset 0 0 40px rgba(0, 255, 255, 0.1),
        0 0 20px rgba(0, 255, 255, 0.3);
    
    transform: translateY(-3px);
}

.home-primary-tile:active {
    transform: translateY(1px);
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.3),
        inset 0 0 30px rgba(0, 255, 255, 0.05);
}

/* Inner border effect on primary tiles */
.home-primary-tile::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--color-primary);
    opacity: 0.3;
    clip-path: polygon(
        12px 0%, 100% 0%, 100% 0%,
        100% calc(100% - 12px), calc(100% - 12px) 100%,
        0% 100%, 0% 100%, 0% 12px
    );
    pointer-events: none;
    z-index: 1;
}

.home-tile-icon {
    font-size: clamp(42px, 12vw, 72px);
    line-height: 1;
    text-shadow: 0 0 10px var(--color-primary);
}

.home-tile-title {
    font-family: 'Courier New', monospace;
    font-size: clamp(18px, 4.5vw, 28px);
    font-weight: bold;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary);
    letter-spacing: 2px;
    position: relative;
    z-index: 2;
}

.home-tile-subtitle {
    font-family: 'Courier New', monospace;
    font-size: clamp(12px, 3vw, 16px);
    color: rgba(0, 255, 255, 0.7);
    text-shadow: 0 0 5px var(--color-primary);
    position: relative;
    z-index: 2;
}

.home-tile-description {
    font-family: 'Courier New', monospace;
    font-size: clamp(10px, 2.5vw, 13px);
    color: rgba(0, 255, 255, 0.5);
    line-height: 1.4;
    position: relative;
    z-index: 2;
    max-width: 100%;
}

/* Secondary section - Results & Analytics */
.home-secondary-section {
    margin-top: clamp(30px, 6vh, 50px);
    width: 100%;
}

.home-section-title {
    font-family: 'Courier New', monospace;
    font-size: clamp(16px, 4vw, 22px);
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary);
    margin-bottom: clamp(15px, 3vh, 25px);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Results Grid */
.home-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 30vw, 200px), 1fr));
    gap: clamp(12px, 2.5vw, 20px);
    width: 100%;
}

/* Individual Result Card */
.home-result-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.5vw, 10px);
    padding: clamp(15px, 3vw, 25px);
    min-height: clamp(120px, 25vh, 180px);
    
    background: linear-gradient(135deg, 
        rgba(50, 50, 100, 0.3) 0%, 
        rgba(0, 50, 100, 0.2) 100%);
    
    border: 2px solid rgba(0, 255, 255, 0.4);
    border-radius: 0;
    
    clip-path: polygon(
        8px 0%, 100% 0%, 100% 0%,
        100% calc(100% - 8px), calc(100% - 8px) 100%,
        0% 100%, 0% 100%, 0% 8px
    );
    
    box-shadow: 
        0 0 15px rgba(0, 255, 255, 0.2),
        inset 0 0 20px rgba(0, 255, 255, 0.05);
    
    transition: all 0.3s ease;
}

.home-result-card:hover {
    background: linear-gradient(135deg, 
        rgba(80, 80, 150, 0.4) 0%, 
        rgba(0, 80, 150, 0.3) 100%);
    
    border-color: rgba(0, 255, 255, 0.6);
    
    box-shadow: 
        0 0 25px rgba(0, 255, 255, 0.3),
        inset 0 0 30px rgba(0, 255, 255, 0.08);
}

/* Inner border on result cards */
.home-result-card::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    opacity: 0.5;
    clip-path: polygon(
        6px 0%, 100% 0%, 100% 0%,
        100% calc(100% - 6px), calc(100% - 6px) 100%,
        0% 100%, 0% 100%, 0% 6px
    );
    pointer-events: none;
    z-index: 1;
}

.home-result-label {
    font-family: 'Courier New', monospace;
    font-size: clamp(9px, 2vw, 11px);
    color: rgba(0, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
}

.home-result-score {
    font-family: 'Courier New', monospace;
    font-size: clamp(24px, 6vw, 36px);
    font-weight: bold;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary);
    position: relative;
    z-index: 2;
}

.home-result-detail {
    font-family: 'Courier New', monospace;
    font-size: clamp(9px, 2vw, 11px);
    color: rgba(0, 255, 255, 0.7);
    position: relative;
    z-index: 2;
    text-align: center;
}

.home-no-results {
    text-align: center;
    padding: clamp(20px, 4vh, 40px);
    color: rgba(0, 255, 255, 0.6);
    font-family: 'Courier New', monospace;
    font-size: clamp(12px, 3vw, 16px);
}

/* Table Reading (scoped) */
.table-reading-card {
    background: rgba(5, 15, 30, 0.85);
    border: 2px solid var(--color-primary, #00ffff);
    border-radius: 8px;
    padding: 12px;
    margin: 16px 0 20px;
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.2);
}
.tr-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
}
.table-reading-grid-wrapper {
    overflow-x: auto;
}
.table-reading-grid {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    color: #e6f5ff;
    font-size: 0.95rem;
}
.table-reading-grid th,
.table-reading-grid td {
    border: 1px solid rgba(0, 255, 255, 0.25);
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.35);
}
.table-reading-grid th.tr-header {
    background: rgba(0, 255, 255, 0.1);
    font-weight: 700;
    color: #8ae8ff;
}
.table-reading-grid th.tr-corner {
    background: rgba(0, 255, 255, 0.08);
}
.table-reading-grid td.tr-cell {
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.table-reading-grid td.tr-cell:hover {
    background: rgba(0, 255, 255, 0.08);
}
.table-reading-grid td.tr-target {
    background: rgba(0, 255, 255, 0.18);
    box-shadow: inset 0 0 0 2px rgba(0, 255, 255, 0.6);
    font-weight: 700;
    color: #ffffff;
}

/* Responsive adjustments for small screens */
@media (max-width: 600px) {
    .home-main-grid {
        grid-template-columns: 1fr;
    }
    
    .home-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .home-primary-tile {
        min-height: clamp(140px, 30vh, 200px);
    }
}

/* Extra small screens */
@media (max-width: 400px) {
    .home-tile-icon {
        font-size: clamp(32px, 10vw, 48px);
    }
    
    .home-tile-title {
        letter-spacing: 1px;
    }
}