/* simulator.css */

/* ===== CSS Variables ===== */

:root {

    /* Primary Colors */

    --primary-dark: #0a0a0f;

    --primary-darker: #050508;

    --primary-light: #1a1a24;

    

    /* Accent Colors */

    --accent-red: #ff003c;

    --accent-red-dark: #cc002f;

    --accent-blue: #0066ff;

    --accent-blue-dark: #0052cc;

    --accent-cyan: #00e0ff;

    --accent-green: #00ff88;

    --accent-yellow: #ffaa00;

    --accent-purple: #8a2be2;

    

    /* Status Colors */

    --status-critical: #ff003c;

    --status-warning: #ffaa00;

    --status-ok: #00ff88;

    --status-info: #0066ff;

    

    /* Text Colors */

    --text-primary: #ffffff;

    --text-secondary: #b0b0c0;

    --text-muted: #808090;

    

    /* UI Colors */

    --ui-bg: rgba(10, 10, 15, 0.95);

    --ui-surface: rgba(20, 20, 30, 0.9);

    --ui-surface-light: rgba(40, 40, 55, 0.9);

    --ui-border: rgba(255, 255, 255, 0.1);

    

    /* Shadows */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);

    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);

    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.6);

    

    /* Glows */

    --glow-red: 0 0 20px rgba(255, 0, 60, 0.5);

    --glow-blue: 0 0 20px rgba(0, 102, 255, 0.5);

    --glow-cyan: 0 0 20px rgba(0, 224, 255, 0.5);

    --glow-green: 0 0 20px rgba(0, 255, 136, 0.5);

    

    /* Transitions */

    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    

    /* Border Radius */

    --radius-sm: 4px;

    --radius-md: 8px;

    --radius-lg: 12px;

    --radius-xl: 16px;

    

    /* Fonts */

    --font-main: 'Inter', sans-serif;

    --font-heading: 'Montserrat', sans-serif;

    --font-tech: 'Orbitron', monospace;

}



/* ===== Base Styles ===== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: var(--font-main);

    background: var(--primary-dark);

    color: var(--text-primary);

    overflow-x: hidden;

    min-height: 100vh;

    position: relative;

}



.simulator-container {

    position: relative;

    min-height: 100vh;

    background: linear-gradient(135deg, var(--primary-darker) 0%, var(--primary-dark) 100%);

}



/* ===== Loading Screen ===== */

.loading-screen {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, #000000 0%, var(--primary-dark) 100%);

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.5s, visibility 0.5s;

}



.loading-screen.active {

    opacity: 1;

    visibility: visible;

}



.loading-content {

    text-align: center;

    max-width: 800px;

    padding: 2rem;

}



.loading-logo {

    margin-bottom: 3rem;

    animation: logoFloat 3s ease-in-out infinite;

}



.logo-pulse {

    width: 120px;

    height: 120px;

    margin: 0 auto 1.5rem;

    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-purple) 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    animation: pulse 2s ease-in-out infinite;

    box-shadow: var(--glow-red);

    position: relative;

}



.logo-pulse::before {

    content: '';

    position: absolute;

    top: -10px;

    left: -10px;

    right: -10px;

    bottom: -10px;

    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-purple) 100%);

    border-radius: 50%;

    z-index: -1;

    opacity: 0.5;

    animation: pulseOuter 3s ease-in-out infinite;

}



.logo-text {

    font-family: var(--font-heading);

    font-size: 3.5rem;

    font-weight: 900;

    color: white;

}



.logo-text-full h1 {

    font-family: var(--font-heading);

    font-size: 2.5rem;

    font-weight: 800;

    margin-bottom: 0.5rem;

    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.logo-text-full h2 {

    font-size: 1.2rem;

    color: var(--text-secondary);

    font-weight: 400;

    letter-spacing: 2px;

}



.loading-bar {

    width: 100%;

    height: 4px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: var(--radius-md);

    overflow: hidden;

    margin: 2rem 0;

}



.loading-progress {

    width: 0%;

    height: 100%;

    background: linear-gradient(90deg, var(--accent-red) 0%, var(--accent-cyan) 100%);

    border-radius: var(--radius-md);

    transition: width 0.3s ease;

    animation: progressShimmer 2s linear infinite;

}



.loading-status {

    font-size: 1.1rem;

    color: var(--text-secondary);

    margin-bottom: 0.5rem;

    font-family: var(--font-tech);

    letter-spacing: 1px;

}



.loading-tip {

    font-size: 0.9rem;

    color: var(--text-muted);

    font-style: italic;

}



/* ===== Setup Phase ===== */

.setup-phase {

    padding: 90px 2rem 2rem;

    max-width: 1400px;

    margin: 0 auto;

}



.setup-header {

    text-align: center;

    margin-bottom: 3rem;

    padding-bottom: 2rem;

    border-bottom: 1px solid var(--ui-border);

    position: relative;

}



.setup-header::after {

    content: '';

    position: absolute;

    bottom: -1px;

    left: 50%;

    transform: translateX(-50%);

    width: 200px;

    height: 3px;

    background: linear-gradient(90deg, transparent 0%, var(--accent-red) 50%, transparent 100%);

}



.setup-title h1 {

    font-family: var(--font-heading);

    font-size: 2.8rem;

    font-weight: 800;

    margin-bottom: 0.5rem;

    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-blue) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.setup-title h2 {

    font-size: 1.3rem;

    color: var(--text-secondary);

    font-weight: 400;

    letter-spacing: 3px;

    margin-bottom: 1rem;

    text-transform: uppercase;

}



.setup-subtitle {

    display: flex;

    justify-content: center;

    gap: 2rem;

    margin-top: 1rem;

}



.tagline {

    color: var(--accent-cyan);

    font-weight: 500;

    font-style: italic;

}



.version {

    color: var(--text-muted);

    font-family: var(--font-tech);

    font-size: 0.9rem;

}



.setup-stats {

    display: flex;

    justify-content: center;

    gap: 2rem;

    margin-top: 2rem;

    flex-wrap: wrap;

}



.stat-box {

    background: var(--ui-surface);

    border-radius: var(--radius-lg);

    padding: 1rem 1.5rem;

    min-width: 120px;

    text-align: center;

    border: 1px solid var(--ui-border);

    transition: all var(--transition-base);

}



.stat-box:hover {

    transform: translateY(-5px);

    border-color: var(--accent-cyan);

    box-shadow: var(--glow-cyan);

}



.stat-box i {

    font-size: 1.5rem;

    color: var(--accent-cyan);

    margin-bottom: 0.5rem;

    display: block;

}



.stat-value {

    font-family: var(--font-tech);

    font-size: 2rem;

    font-weight: 700;

    color: var(--text-primary);

    display: block;

    line-height: 1;

}



.stat-label {

    font-size: 0.9rem;

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* Setup Steps */

.setup-step {

    display: none;

    animation: fadeIn 0.5s ease;

}



.setup-step.active {

    display: block;

}



.step-header {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    margin-bottom: 2rem;

    padding: 1.5rem;

    background: var(--ui-surface);

    border-radius: var(--radius-lg);

    border: 1px solid var(--ui-border);

}



.step-number {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-blue) 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: var(--font-tech);

    font-size: 1.8rem;

    font-weight: 700;

    color: white;

    flex-shrink: 0;

}



.step-title h3 {

    font-size: 1.5rem;

    margin-bottom: 0.5rem;

    color: var(--text-primary);

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.step-title h3 i {

    color: var(--accent-cyan);

}



.step-title p {

    color: var(--text-secondary);

    font-size: 1rem;

}



/* Industry Grid */

.industry-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 1.5rem;

    margin-bottom: 2rem;

}



.industry-card {

    background: var(--ui-surface);

    border-radius: var(--radius-lg);

    padding: 2rem;

    border: 2px solid transparent;

    transition: all var(--transition-base);

    cursor: pointer;

    position: relative;

    overflow: hidden;

}



.industry-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, var(--accent-red) 0%, var(--accent-blue) 100%);

    opacity: 0;

    transition: opacity var(--transition-base);

}



.industry-card:hover {

    transform: translateY(-5px);

    border-color: var(--accent-cyan);

    box-shadow: var(--glow-cyan);

}



.industry-card:hover::before {

    opacity: 1;

}



.industry-card.selected {

    border-color: var(--accent-green);

    box-shadow: var(--glow-green);

}



.industry-card.selected::before {

    opacity: 1;

    background: linear-gradient(90deg, var(--accent-green) 0%, var(--accent-cyan) 100%);

}



.industry-icon {

    font-size: 2.5rem;

    margin-bottom: 1rem;

    color: var(--accent-cyan);

}



.industry-card h4 {

    font-size: 1.3rem;

    margin-bottom: 0.5rem;

    color: var(--text-primary);

}



.industry-card p {

    color: var(--text-secondary);

    font-size: 0.95rem;

    margin-bottom: 1rem;

    line-height: 1.5;

}



.industry-stats {

    display: flex;

    gap: 1rem;

    margin-top: 1rem;

}



.industry-stat {

    font-size: 0.85rem;

    color: var(--text-muted);

}



.industry-stat i {

    margin-right: 0.25rem;

    color: var(--accent-yellow);

}



/* Scenario Grid */

.scenario-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

    gap: 1.5rem;

    margin-bottom: 2rem;

}



.scenario-card {

    background: var(--ui-surface);

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    border: 2px solid transparent;

    transition: all var(--transition-base);

    cursor: pointer;

    position: relative;

    overflow: hidden;

}



.scenario-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, var(--accent-red) 0%, var(--accent-purple) 100%);

}



.scenario-card:hover {

    transform: translateY(-3px);

    box-shadow: var(--shadow-lg);

}



.scenario-card.selected {

    border-color: var(--accent-red);

    box-shadow: var(--glow-red);

}



.scenario-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 1rem;

}



.scenario-title {

    font-size: 1.2rem;

    font-weight: 600;

    color: var(--text-primary);

}



.scenario-difficulty {

    padding: 0.25rem 0.75rem;

    border-radius: var(--radius-full);

    font-size: 0.8rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.scenario-difficulty.easy {

    background: rgba(0, 255, 136, 0.1);

    color: var(--accent-green);

    border: 1px solid var(--accent-green);

}



.scenario-difficulty.medium {

    background: rgba(255, 170, 0, 0.1);

    color: var(--accent-yellow);

    border: 1px solid var(--accent-yellow);

}



.scenario-difficulty.hard {

    background: rgba(255, 0, 60, 0.1);

    color: var(--accent-red);

    border: 1px solid var(--accent-red);

}



.scenario-difficulty.critical {

    background: rgba(255, 0, 60, 0.2);

    color: var(--accent-red);

    border: 1px solid var(--accent-red);

    animation: pulseCritical 2s infinite;

}



.scenario-description {

    color: var(--text-secondary);

    font-size: 0.95rem;

    margin-bottom: 1rem;

    line-height: 1.5;

}



.scenario-meta {

    display: flex;

    justify-content: space-between;

    margin-top: 1rem;

    padding-top: 1rem;

    border-top: 1px solid var(--ui-border);

}



.scenario-time {

    color: var(--text-muted);

    font-size: 0.9rem;

}



.scenario-time i {

    color: var(--accent-yellow);

    margin-right: 0.25rem;

}



.scenario-decisions {

    color: var(--text-muted);

    font-size: 0.9rem;

}



.scenario-decisions i {

    color: var(--accent-cyan);

    margin-right: 0.25rem;

}



/* Configuration Panel */

.config-panel {

    background: var(--ui-surface);

    border-radius: var(--radius-lg);

    padding: 2rem;

    border: 1px solid var(--ui-border);

}



.config-section {

    margin-bottom: 2rem;

    padding-bottom: 2rem;

    border-bottom: 1px solid var(--ui-border);

}



.config-section:last-child {

    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: none;

}



.config-section h4 {

    font-size: 1.2rem;

    margin-bottom: 1.5rem;

    color: var(--text-primary);

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.config-section h4 i {

    color: var(--accent-cyan);

}



/* Difficulty Selector */

.difficulty-selector {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.5rem;

}



.difficulty-option {

    background: var(--ui-surface-light);

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    border: 2px solid transparent;

    transition: all var(--transition-base);

    cursor: pointer;

}



.difficulty-option:hover {

    border-color: var(--accent-cyan);

    transform: translateY(-3px);

}



.difficulty-option.active {

    border-color: var(--accent-green);

    box-shadow: var(--glow-green);

}



.difficulty-icon {

    font-size: 2rem;

    margin-bottom: 1rem;

    color: var(--accent-cyan);

}



.difficulty-option h5 {

    font-size: 1.1rem;

    margin-bottom: 1rem;

    color: var(--text-primary);

}



.difficulty-option ul {

    list-style: none;

    margin-bottom: 1.5rem;

}



.difficulty-option li {

    color: var(--text-secondary);

    font-size: 0.9rem;

    margin-bottom: 0.5rem;

    padding-left: 1rem;

    position: relative;

}



.difficulty-option li::before {

    content: '✓';

    position: absolute;

    left: 0;

    color: var(--accent-green);

}



.select-btn {

    width: 100%;

    padding: 0.75rem;

    background: var(--ui-surface);

    border: 1px solid var(--ui-border);

    color: var(--text-secondary);

    border-radius: var(--radius-md);

    cursor: pointer;

    font-weight: 600;

    transition: all var(--transition-base);

}



.select-btn:hover {

    background: var(--accent-blue);

    color: white;

    border-color: var(--accent-blue);

}



.difficulty-option.active .select-btn {

    background: var(--accent-green);

    color: white;

    border-color: var(--accent-green);

}



/* Team Configuration */

.team-config {

    background: var(--ui-surface-light);

    border-radius: var(--radius-lg);

    padding: 1.5rem;

}



.team-member {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem;

    background: var(--ui-surface);

    border-radius: var(--radius-md);

    margin-bottom: 1rem;

}



.member-role {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    font-weight: 500;

    color: var(--text-primary);

}



.member-role i {

    color: var(--accent-cyan);

}



.member-name {

    background: transparent;

    border: 1px solid var(--ui-border);

    padding: 0.5rem 1rem;

    border-radius: var(--radius-md);

    color: var(--text-primary);

    font-family: var(--font-main);

    font-size: 1rem;

    width: 200px;

}



.add-member-btn {

    background: var(--ui-surface);

    border: 2px dashed var(--ui-border);

    color: var(--text-secondary);

    padding: 1rem;

    border-radius: var(--radius-md);

    cursor: pointer;

    font-weight: 500;

    transition: all var(--transition-base);

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

}



.add-member-btn:hover {

    border-color: var(--accent-cyan);

    color: var(--accent-cyan);

}



/* Audio Settings */

.audio-control {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1rem;

    padding: 1rem;

    background: var(--ui-surface-light);

    border-radius: var(--radius-md);

}



.audio-control label {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    cursor: pointer;

    font-weight: 500;

    color: var(--text-primary);

}



.audio-control input[type="checkbox"] {

    width: 18px;

    height: 18px;

    cursor: pointer;

}



.test-btn {

    background: var(--ui-surface);

    border: 1px solid var(--ui-border);

    color: var(--text-secondary);

    padding: 0.5rem 1rem;

    border-radius: var(--radius-md);

    cursor: pointer;

    font-size: 0.9rem;

    transition: all var(--transition-base);

}



.test-btn:hover {

    background: var(--accent-blue);

    color: white;

    border-color: var(--accent-blue);

}



.volume-control {

    width: 150px;

}



.volume-control input[type="range"] {

    width: 100%;

    height: 4px;

    background: var(--ui-border);

    border-radius: var(--radius-full);

    outline: none;

    -webkit-appearance: none;

}



.volume-control input[type="range"]::-webkit-slider-thumb {

    -webkit-appearance: none;

    width: 16px;

    height: 16px;

    background: var(--accent-cyan);

    border-radius: 50%;

    cursor: pointer;

}



.audio-control small {

    color: var(--text-muted);

    font-size: 0.85rem;

    margin-left: 2.5rem;

    margin-top: 0.25rem;

    display: block;

}



/* Launch Panel */

.launch-panel {

    background: var(--ui-surface);

    border-radius: var(--radius-lg);

    padding: 2rem;

    border: 1px solid var(--ui-border);

}



.launch-summary {

    display: grid;

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

    gap: 1.5rem;

    margin-bottom: 2rem;

    padding: 1.5rem;

    background: var(--ui-surface-light);

    border-radius: var(--radius-lg);

}



.summary-item {

    display: flex;

    flex-direction: column;

}



.summary-label {

    font-size: 0.9rem;

    color: var(--text-muted);

    margin-bottom: 0.25rem;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.summary-value {

    font-size: 1.2rem;

    font-weight: 600;

    color: var(--text-primary);

    font-family: var(--font-tech);

}



.launch-warnings {

    margin-bottom: 2rem;

}



.warning-box {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

    padding: 1.5rem;

    background: rgba(255, 170, 0, 0.1);

    border: 1px solid var(--accent-yellow);

    border-radius: var(--radius-lg);

    margin-bottom: 1rem;

}



.warning-box:last-child {

    background: rgba(0, 102, 255, 0.1);

    border-color: var(--accent-blue);

}



.warning-box i {

    font-size: 1.5rem;

    color: var(--accent-yellow);

    margin-top: 0.25rem;

}



.warning-box:last-child i {

    color: var(--accent-blue);

}



.warning-box h5 {

    font-size: 1.1rem;

    margin-bottom: 0.5rem;

    color: var(--text-primary);

}



.warning-box p {

    color: var(--text-secondary);

    font-size: 0.95rem;

    line-height: 1.5;

}



.launch-controls {

    text-align: center;

}



.launch-btn {

    position: relative;

    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-purple) 100%);

    color: white;

    border: none;

    padding: 1.5rem 3rem;

    font-size: 1.3rem;

    font-weight: 700;

    border-radius: var(--radius-lg);

    cursor: pointer;

    transition: all var(--transition-base);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    min-width: 400px;

    text-transform: uppercase;

    letter-spacing: 2px;

    overflow: hidden;

    box-shadow: var(--glow-red);

    animation: launchPulse 2s infinite;

}



.launch-btn::before {

    content: '';

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-purple) 100%);

    border-radius: var(--radius-lg);

    z-index: -1;

    filter: blur(20px);

    opacity: 0.7;

}



.launch-btn:hover {

    transform: scale(1.05);

    animation: none;

    box-shadow: 0 0 40px rgba(255, 0, 60, 0.8);

}



.launch-countdown {

    position: absolute;

    top: -10px;

    right: -10px;

    width: 40px;

    height: 40px;

    background: var(--accent-blue);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: var(--font-tech);

    font-weight: 700;

    font-size: 1.2rem;

    animation: countdownPulse 1s infinite;

}



.launch-disclaimer {

    margin-top: 1.5rem;

    padding: 1rem;

    background: rgba(255, 0, 60, 0.1);

    border: 1px solid var(--accent-red);

    border-radius: var(--radius-md);

}



.launch-disclaimer p {

    color: var(--text-secondary);

    font-size: 0.9rem;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

}



.launch-disclaimer i {

    color: var(--accent-red);

}



/* Setup Controls */

.setup-controls {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 3rem;

    padding-top: 2rem;

    border-top: 1px solid var(--ui-border);

}



.nav-btn {

    padding: 0.75rem 1.5rem;

    background: var(--ui-surface);

    border: 1px solid var(--ui-border);

    color: var(--text-primary);

    border-radius: var(--radius-md);

    cursor: pointer;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    transition: all var(--transition-base);

}



.nav-btn:hover:not(:disabled) {

    background: var(--accent-blue);

    border-color: var(--accent-blue);

}



.nav-btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



.prev-btn i {

    margin-right: 0.5rem;

}



.next-btn i {

    margin-left: 0.5rem;

}



.step-indicators {

    display: flex;

    gap: 2rem;

}



.step-indicator {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.5rem;

    cursor: pointer;

}



.indicator-dot {

    width: 12px;

    height: 12px;

    background: var(--ui-border);

    border-radius: 50%;

    transition: all var(--transition-base);

}



.step-indicator.active .indicator-dot {

    background: var(--accent-cyan);

    box-shadow: 0 0 10px var(--accent-cyan);

}



.step-indicator span {

    font-size: 0.9rem;

    color: var(--text-muted);

    transition: all var(--transition-base);

}



.step-indicator.active span {

    color: var(--text-primary);

    font-weight: 500;

}



/* ===== Simulation Phase ===== */

.simulation-phase {

    display: none;

    position: relative;

    height: 100vh;

    overflow: hidden;

}



/* Emergency Header */

.emergency-header {

    position: fixed;

    top: 70px;

    left: 0;

    right: 0;

    height: 70px;

    background: rgba(10, 10, 15, 0.95);

    backdrop-filter: blur(10px);

    border-bottom: 2px solid var(--accent-red);

    z-index: 100;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 2rem;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

    animation: emergencyFlash 5s infinite;

}



.emergency-status {

    display: flex;

    align-items: center;

    gap: 2rem;

}



.status-indicator {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1rem;

    border-radius: var(--radius-md);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: 0.9rem;

}



.status-indicator.critical {

    background: rgba(255, 0, 60, 0.2);

    color: var(--accent-red);

    border: 1px solid var(--accent-red);

    animation: pulseCritical 1s infinite;

}



.status-indicator i {

    font-size: 1.2rem;

}



.incident-code {

    font-family: var(--font-tech);

    font-size: 1.1rem;

}



.code-label {

    color: var(--text-muted);

    margin-right: 0.5rem;

}



.code-value {

    color: var(--accent-cyan);

    font-weight: 700;

}



.time-elapsed {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-family: var(--font-tech);

    font-size: 1.2rem;

    color: var(--accent-green);

}



.time-elapsed i {

    color: var(--accent-yellow);

}



.emergency-alerts {

    display: flex;

    align-items: center;

    gap: 1.5rem;

}



.alert-marquee {

    width: 400px;

    height: 40px;

    background: rgba(255, 0, 60, 0.1);

    border: 1px solid var(--accent-red);

    border-radius: var(--radius-md);

    display: flex;

    align-items: center;

    padding: 0 1rem;

    overflow: hidden;

    position: relative;

}



.alert-marquee::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 4px;

    height: 100%;

    background: var(--accent-red);

    animation: marqueeFlash 1s infinite;

}



.alert-marquee span {

    color: var(--accent-red);

    font-weight: 600;

    white-space: nowrap;

    animation: marqueeScroll 20s linear infinite;

}



.emergency-btn {

    padding: 0.75rem 1.5rem;

    background: var(--ui-surface);

    border: 1px solid var(--accent-red);

    color: var(--accent-red);

    border-radius: var(--radius-md);

    cursor: pointer;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all var(--transition-base);

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.emergency-btn:hover {

    background: var(--accent-red);

    color: white;

}



/* Simulation Dashboard */

.simulation-dashboard {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 1.5rem;

    padding: 140px 2rem 2rem;

    height: calc(100vh - 70px);

    overflow: hidden;

}



/* Decision Panel */

.decision-panel {

    background: var(--ui-surface);

    border-radius: var(--radius-lg);

    border: 1px solid var(--ui-border);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    box-shadow: var(--shadow-lg);

}



.decision-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 1.5rem;

    background: rgba(0, 0, 0, 0.3);

    border-bottom: 1px solid var(--ui-border);

}



.decision-phase, .decision-progress, .time-remaining {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.phase-label, .progress-label {

    color: var(--text-muted);

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.phase-value {

    color: var(--accent-cyan);

    font-weight: 700;

    font-family: var(--font-tech);

    font-size: 1.1rem;

}



.progress-value {

    color: var(--text-primary);

    font-weight: 700;

    font-family: var(--font-tech);

    font-size: 1.2rem;

}



.time-remaining {

    padding: 0.5rem 1rem;

    background: rgba(255, 0, 60, 0.1);

    border: 1px solid var(--accent-red);

    border-radius: var(--radius-md);

    color: var(--accent-red);

    font-weight: 700;

    font-family: var(--font-tech);

    font-size: 1.2rem;

    animation: timePulse 1s infinite;

}



.decision-content {

    flex: 1;

    padding: 2rem;

    overflow-y: auto;

}



.situation-box {

    background: var(--ui-surface-light);

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    margin-bottom: 2rem;

    border-left: 4px solid var(--accent-cyan);

}



.situation-box h3 {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 1rem;

    color: var(--accent-cyan);

    font-size: 1.2rem;

}



.situation-text {

    color: var(--text-secondary);

    line-height: 1.6;

    font-size: 1.1rem;

}



.situation-text p {

    margin-bottom: 1rem;

}



.options-container {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.option-card {

    background: var(--ui-surface-light);

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    border: 2px solid transparent;

    cursor: pointer;

    transition: all var(--transition-base);

    position: relative;

    overflow: hidden;

}



.option-card:hover {

    transform: translateX(5px);

    border-color: var(--accent-cyan);

    background: rgba(0, 224, 255, 0.05);

}



.option-card.selected {

    border-color: var(--accent-green);

    background: rgba(0, 255, 136, 0.05);

}



.option-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 1rem;

}



.option-id {

    font-family: var(--font-tech);

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--accent-cyan);

}



.option-text {

    color: var(--text-primary);

    font-size: 1.1rem;

    line-height: 1.5;

    margin-bottom: 1rem;

}



.option-scores {

    display: flex;

    gap: 1rem;

    margin-top: 1rem;

    padding-top: 1rem;

    border-top: 1px solid var(--ui-border);

}



.score-tag {

    display: flex;

    align-items: center;

    gap: 0.25rem;

    font-size: 0.9rem;

    color: var(--text-muted);

}



.score-tag i {

    color: var(--accent-yellow);

}



.decision-controls {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 1.5rem;

    background: rgba(0, 0, 0, 0.3);

    border-top: 1px solid var(--ui-border);

}



.control-btn {

    padding: 0.75rem 1.5rem;

    background: var(--ui-surface);

    border: 1px solid var(--ui-border);

    color: var(--text-primary);

    border-radius: var(--radius-md);

    cursor: pointer;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    transition: all var(--transition-base);

}



.control-btn:hover {

    background: var(--accent-blue);

    border-color: var(--accent-blue);

}



.skip-btn {

    background: rgba(255, 0, 60, 0.1);

    border-color: var(--accent-red);

    color: var(--accent-red);

}



.skip-btn:hover {

    background: var(--accent-red);

    color: white;

}



.stress-indicator {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.stress-indicator span:first-child {

    color: var(--text-muted);

    font-size: 0.9rem;

}



.stress-bar {

    width: 200px;

    height: 10px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: var(--radius-full);

    overflow: hidden;

}



.stress-fill {

    height: 100%;

    background: linear-gradient(90deg, var(--accent-green) 0%, var(--accent-yellow) 50%, var(--accent-red) 100%);

    transition: width 0.5s ease;

}



.stress-indicator span:last-child {

    font-family: var(--font-tech);

    font-weight: 700;

    min-width: 40px;

}



/* Resources Panel */

.resources-panel {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    overflow-y: auto;

}



.resource-meters {

    background: var(--ui-surface);

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    border: 1px solid var(--ui-border);

}



.meter-box {

    margin-bottom: 1.5rem;

}



.meter-box:last-child {

    margin-bottom: 0;

}



.meter-header {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 0.5rem;

    color: var(--text-primary);

    font-weight: 600;

}



.meter-header i {

    color: var(--accent-cyan);

}



.meter-bar {

    height: 12px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: var(--radius-full);

    overflow: hidden;

    margin-bottom: 0.5rem;

}



.meter-fill {

    height: 100%;

    transition: width 0.5s ease;

}



.time-fill {

    background: linear-gradient(90deg, var(--accent-green) 0%, var(--accent-yellow) 50%, var(--accent-red) 100%);

}



.budget-fill {

    background: linear-gradient(90deg, #00ff88 0%, #00e0ff 100%);

}



.staff-fill {

    background: linear-gradient(90deg, #0066ff 0%, #8a2be2 100%);

}



.reputation-fill {

    background: linear-gradient(90deg, #ffaa00 0%, #ff003c 100%);

}



.meter-value {

    text-align: right;

    font-family: var(--font-tech);

    font-weight: 700;

    color: var(--text-primary);

}



.score-panel {

    background: var(--ui-surface);

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    border: 1px solid var(--ui-border);

}



.score-panel h4 {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 1.5rem;

    color: var(--text-primary);

}



.score-panel h4 i {

    color: var(--accent-yellow);

}



.score-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1rem;

    margin-bottom: 1.5rem;

}



.score-box {

    background: var(--ui-surface-light);

    border-radius: var(--radius-md);

    padding: 1rem;

    text-align: center;

}



.score-label {

    font-size: 0.8rem;

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 0.5rem;

}



.score-value {

    font-family: var(--font-tech);

    font-size: 1.8rem;

    font-weight: 700;

    margin-bottom: 0.5rem;

}



.technical .score-value { color: var(--accent-cyan); }

.ethical .score-value { color: var(--accent-green); }

.business .score-value { color: var(--accent-yellow); }

.leadership .score-value { color: var(--accent-blue); }



.score-bar {

    height: 6px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: var(--radius-full);

    overflow: hidden;

}



.score-fill {

    height: 100%;

    transition: width 0.5s ease;

}



.technical .score-fill { background: var(--accent-cyan); }

.ethical .score-fill { background: var(--accent-green); }

.business .score-fill { background: var(--accent-yellow); }

.leadership .score-fill { background: var(--accent-blue); }



.overall-score {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem;

    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-purple) 100%);

    border-radius: var(--radius-md);

}



.overall-label {

    font-size: 0.9rem;

    font-weight: 600;

    color: rgba(255, 255, 255, 0.9);

    text-transform: uppercase;

    letter-spacing: 1px;

}



.overall-value {

    font-family: var(--font-tech);

    font-size: 2.2rem;

    font-weight: 800;

    color: white;

}



.event-log {

    background: var(--ui-surface);

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    border: 1px solid var(--ui-border);

    flex: 1;

}



.event-log h4 {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 1rem;

    color: var(--text-primary);

}



.event-log h4 i {

    color: var(--accent-green);

}



.log-content {

    height: 200px;

    overflow-y: auto;

    background: rgba(0, 0, 0, 0.3);

    border-radius: var(--radius-md);

    padding: 1rem;

}



.log-entry {

    display: flex;

    gap: 1rem;

    margin-bottom: 0.75rem;

    font-size: 0.9rem;

}



.log-time {

    color: var(--accent-cyan);

    font-family: var(--font-tech);

    min-width: 70px;

}



.log-text {

    color: var(--text-secondary);

}



.team-status {

    background: var(--ui-surface);

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    border: 1px solid var(--ui-border);

}



.team-status h4 {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 1rem;

    color: var(--text-primary);

}



.team-status h4 i {

    color: var(--accent-blue);

}



.team-list {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.team-member-status {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0.75rem;

    background: var(--ui-surface-light);

    border-radius: var(--radius-md);

}



.member-name {

    font-weight: 500;

    color: var(--text-primary);

}



.member-stress {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.9rem;

}



.stress-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

}



.stress-dot.low {

    background: var(--accent-green);

    box-shadow: 0 0 8px var(--accent-green);

}



.stress-dot.medium {

    background: var(--accent-yellow);

    box-shadow: 0 0 8px var(--accent-yellow);

}



.stress-dot.high {

    background: var(--accent-red);

    box-shadow: 0 0 8px var(--accent-red);

    animation: pulse 1s infinite;

}



/* Emergency Effects */

.emergency-effects {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    pointer-events: none;

    z-index: 50;

    opacity: 0;

    transition: opacity 0.3s;

}



/* Sound Wave */

.sound-wave {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100px;

    background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 100%);

    z-index: 60;

    pointer-events: none;

    opacity: 0.5;

}



/* ===== Report Phase ===== */

.report-phase {

    display: none;

    padding: 90px 2rem 2rem;

    max-width: 1200px;

    margin: 0 auto;

}



.report-header {

    background: var(--ui-surface);

    border-radius: var(--radius-lg);

    padding: 2rem;

    margin-bottom: 2rem;

    border: 1px solid var(--ui-border);

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

}



.report-title h1 {

    font-family: var(--font-heading);

    font-size: 2rem;

    margin-bottom: 1rem;

    color: var(--text-primary);

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.report-title h1 i {

    color: var(--accent-red);

}



.report-meta {

    display: flex;

    gap: 2rem;

    color: var(--text-secondary);

    font-size: 0.9rem;

}



.report-id, .report-date, .report-classification {

    padding: 0.25rem 0.75rem;

    background: var(--ui-surface-light);

    border-radius: var(--radius-md);

}



.report-id span {

    color: var(--accent-cyan);

    font-weight: 600;

}



.report-classification {

    color: var(--accent-red);

    font-weight: 700;

}



.report-controls {

    display: flex;

    gap: 1rem;

}



.report-btn {

    padding: 0.75rem 1.5rem;

    background: var(--ui-surface);

    border: 1px solid var(--ui-border);

    color: var(--text-primary);

    border-radius: var(--radius-md);

    cursor: pointer;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    transition: all var(--transition-base);

}



.report-btn:hover {

    background: var(--accent-blue);

    border-color: var(--accent-blue);

}



.report-btn.primary {

    background: var(--accent-green);

    border-color: var(--accent-green);

    color: white;

}



.report-btn.primary:hover {

    background: var(--accent-green-dark);

    border-color: var(--accent-green-dark);

}



.report-content {

    background: white;

    border-radius: var(--radius-lg);

    padding: 3rem;

    color: #333;

    box-shadow: var(--shadow-xl);

}



/* Print styles for report */

@media print {

    .report-content {

        box-shadow: none;

        padding: 0;

    }

    

    .report-header, .report-controls {

        display: none;

    }

}



/* ===== Animations ===== */

@keyframes logoFloat {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-10px); }

}



@keyframes pulse {

    0%, 100% { transform: scale(1); }

    50% { transform: scale(1.05); }

}



@keyframes pulseOuter {

    0%, 100% { transform: scale(1); opacity: 0.5; }

    50% { transform: scale(1.2); opacity: 0.2; }

}



@keyframes progressShimmer {

    0% { background-position: -200px 0; }

    100% { background-position: 200px 0; }

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(20px); }

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

}



@keyframes launchPulse {

    0%, 100% { box-shadow: var(--glow-red); }

    50% { box-shadow: 0 0 30px rgba(255, 0, 60, 0.8); }

}



@keyframes countdownPulse {

    0%, 100% { transform: scale(1); }

    50% { transform: scale(1.2); }

}



@keyframes emergencyFlash {

    0%, 100% { border-bottom-color: var(--accent-red); }

    50% { border-bottom-color: transparent; }

}



@keyframes pulseCritical {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.7; }

}



@keyframes marqueeFlash {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.5; }

}



@keyframes marqueeScroll {

    0% { transform: translateX(100%); }

    100% { transform: translateX(-100%); }

}



@keyframes timePulse {

    0%, 100% { box-shadow: 0 0 10px rgba(255, 0, 60, 0.5); }

    50% { box-shadow: 0 0 20px rgba(255, 0, 60, 0.8); }

}



@keyframes strobe {

    0%, 100% { opacity: 1; }

    25% { opacity: 0.3; }

    50% { opacity: 0.7; }

    75% { opacity: 0.1; }

}



@keyframes shake {

    0%, 100% { transform: translateX(0); }

    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }

    20%, 40%, 60%, 80% { transform: translateX(5px); }

}



@keyframes glitch {

    0% { transform: translate(0); }

    20% { transform: translate(-2px, 2px); }

    40% { transform: translate(-2px, -2px); }

    60% { transform: translate(2px, 2px); }

    80% { transform: translate(2px, -2px); }

    100% { transform: translate(0); }

}



/* ===== Mobile Responsive ===== */

@media (max-width: 768px) {

    .setup-phase {

        padding: 70px 1rem 1rem;

    }

    

    .setup-title h1 {

        font-size: 2rem;

    }

    

    .setup-title h2 {

        font-size: 1rem;

        letter-spacing: 2px;

    }

    

    .setup-stats {

        gap: 1rem;

    }

    

    .stat-box {

        min-width: 90px;

        padding: 0.75rem 1rem;

    }

    

    .stat-value {

        font-size: 1.5rem;

    }

    

    .industry-grid {

        grid-template-columns: 1fr;

    }

    

    .scenario-grid {

        grid-template-columns: 1fr;

    }

    

    .difficulty-selector {

        grid-template-columns: 1fr;

    }

    

    .launch-summary {

        grid-template-columns: 1fr;

    }

    

    .launch-btn {

        min-width: auto;

        width: 100%;

        padding: 1rem;

        font-size: 1.1rem;

    }

    

    .simulation-dashboard {

        grid-template-columns: 1fr;

        padding: 120px 1rem 1rem;

        gap: 1rem;

    }

    

    .emergency-header {

        padding: 0 1rem;

        height: 60px;

        top: 70px;

    }

    

    .emergency-alerts {

        display: none;

    }

    

    .decision-header {

        flex-direction: column;

        gap: 0.5rem;

        align-items: flex-start;

    }

    

    .stress-bar {

        width: 150px;

    }

    

    .report-phase {

        padding: 70px 1rem 1rem;

    }

    

    .report-header {

        flex-direction: column;

        gap: 1.5rem;

    }

    

    .report-meta {

        flex-direction: column;

        gap: 0.5rem;

    }

    

    .report-content {

        padding: 1.5rem;

    }

}



@media (max-width: 480px) {

    .setup-title h1 {

        font-size: 1.6rem;

    }

    

    .step-header {

        flex-direction: column;

        text-align: center;

        gap: 1rem;

    }

    

    .setup-controls {

        flex-direction: column;

        gap: 1rem;

    }

    

    .step-indicators {

        order: -1;

        width: 100%;

        justify-content: space-between;

    }

    

    .step-indicator span {

        display: none;

    }

    

    .decision-controls {

        flex-direction: column;

        gap: 1rem;

    }

    

    .stress-indicator {

        width: 100%;

        justify-content: center;

    }

}



/* ===== Admin Modal ===== */

.admin-modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    z-index: 10000;

    align-items: center;

    justify-content: center;

}



.admin-modal.active {

    display: flex;

}



.admin-content {

    background: var(--ui-surface);

    border-radius: var(--radius-lg);

    width: 90%;

    max-width: 800px;

    max-height: 90vh;

    overflow: hidden;

    border: 2px solid var(--accent-cyan);

    box-shadow: var(--glow-cyan);

}



.admin-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1.5rem;

    background: var(--ui-surface-light);

    border-bottom: 1px solid var(--ui-border);

}



.admin-header h3 {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--text-primary);

}



.admin-header h3 i {

    color: var(--accent-cyan);

}



.close-admin {

    background: none;

    border: none;

    color: var(--text-muted);

    font-size: 2rem;

    cursor: pointer;

    line-height: 1;

    transition: color var(--transition-fast);

}



.close-admin:hover {

    color: var(--accent-red);

}



.admin-body {

    padding: 2rem;

    overflow-y: auto;

    max-height: calc(90vh - 80px);

}



/* ===== Utility Classes ===== */

.hidden {

    display: none !important;

}



.disabled {

    opacity: 0.5;

    cursor: not-allowed !important;

}



.text-center {

    text-align: center;

}



.text-right {

    text-align: right;

}



.mt-1 { margin-top: 0.5rem; }

.mt-2 { margin-top: 1rem; }

.mt-3 { margin-top: 1.5rem; }

.mt-4 { margin-top: 2rem; }



.mb-1 { margin-bottom: 0.5rem; }

.mb-2 { margin-bottom: 1rem; }

.mb-3 { margin-bottom: 1.5rem; }

.mb-4 { margin-bottom: 2rem; }



/* ===== Loading Overlay ===== */

.loading-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    z-index: 9998;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s;

}



.loading-overlay.active {

    opacity: 1;

    visibility: visible;

}



.loading-spinner {

    width: 60px;

    height: 60px;

    border: 4px solid var(--ui-border);

    border-top-color: var(--accent-cyan);

    border-radius: 50%;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    to { transform: rotate(360deg); }

}



/* ===== Voice Waveform ===== */

.voice-waveform {

    display: flex;

    align-items: center;

    gap: 2px;

    height: 20px;

    margin: 1rem 0;

}



.wave-bar {

    width: 4px;

    background: var(--accent-cyan);

    border-radius: var(--radius-full);

    animation: wave 1.5s ease-in-out infinite;

}



.wave-bar:nth-child(2) { animation-delay: 0.1s; }

.wave-bar:nth-child(3) { animation-delay: 0.2s; }

.wave-bar:nth-child(4) { animation-delay: 0.3s; }

.wave-bar:nth-child(5) { animation-delay: 0.4s; }

.wave-bar:nth-child(6) { animation-delay: 0.5s; }

.wave-bar:nth-child(7) { animation-delay: 0.6s; }

.wave-bar:nth-child(8) { animation-delay: 0.7s; }



@keyframes wave {

    0%, 100% { height: 4px; }

    50% { height: 20px; }

}



/* ===== Emergency Alert Styles ===== */

.alert-crt {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 999;

    background: repeating-linear-gradient(

        0deg,

        rgba(0, 0, 0, 0.05) 0px,

        rgba(0, 0, 0, 0.05) 1px,

        transparent 1px,

        transparent 2px

    );

    animation: crtScan 8s linear infinite;

}



@keyframes crtScan {

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

    100% { transform: translateY(100%); }

}



/* ===== Subliminal Effects ===== */

.subliminal-flash {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: white;

    z-index: 9999;

    opacity: 0;

    pointer-events: none;

}



@keyframes subliminalFlash {

    0%, 100% { opacity: 0; }

    50% { opacity: 0.1; }

}



/* ===== Glitch Text Effect ===== */

.glitch-text {

    position: relative;

    display: inline-block;

}



.glitch-text::before,

.glitch-text::after {

    content: attr(data-text);

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.glitch-text::before {

    left: 2px;

    text-shadow: -2px 0 red;

    animation: glitch-anim-1 2s infinite linear alternate-reverse;

}



.glitch-text::after {

    left: -2px;

    text-shadow: 2px 0 blue;

    animation: glitch-anim-2 3s infinite linear alternate-reverse;

}



@keyframes glitch-anim-1 {

    0% { clip: rect(20px, 9999px, 21px, 0); }

    5% { clip: rect(32px, 9999px, 69px, 0); }

    10% { clip: rect(54px, 9999px, 75px, 0); }

    15% { clip: rect(12px, 9999px, 43px, 0); }

    20% { clip: rect(65px, 9999px, 99px, 0); }

    25% { clip: rect(34px, 9999px, 78px, 0); }

    30% { clip: rect(87px, 9999px, 92px, 0); }

    35% { clip: rect(23px, 9999px, 56px, 0); }

    40% { clip: rect(76px, 9999px, 88px, 0); }

    45% { clip: rect(45px, 9999px, 67px, 0); }

    50% { clip: rect(98px, 9999px, 100px, 0); }

    55% { clip: rect(12px, 9999px, 34px, 0); }

    60% { clip: rect(65px, 9999px, 87px, 0); }

    65% { clip: rect(34px, 9999px, 56px, 0); }

    70% { clip: rect(87px, 9999px, 92px, 0); }

    75% { clip: rect(23px, 9999px, 45px, 0); }

    80% { clip: rect(76px, 9999px, 88px, 0); }

    85% { clip: rect(45px, 9999px, 67px, 0); }

    90% { clip: rect(98px, 9999px, 100px, 0); }

    95% { clip: rect(12px, 9999px, 34px, 0); }

    100% { clip: rect(65px, 9999px, 87px, 0); }

}



@keyframes glitch-anim-2 {

    0% { clip: rect(65px, 9999px, 87px, 0); }

    5% { clip: rect(12px, 9999px, 34px, 0); }

    10% { clip: rect(98px, 9999px, 100px, 0); }

    15% { clip: rect(45px, 9999px, 67px, 0); }

    20% { clip: rect(76px, 9999px, 88px, 0); }

    25% { clip: rect(23px, 9999px, 45px, 0); }

    30% { clip: rect(87px, 9999px, 92px, 0); }

    35% { clip: rect(34px, 9999px, 56px, 0); }

    40% { clip: rect(65px, 9999px, 87px, 0); }

    45% { clip: rect(12px, 9999px, 34px, 0); }

    50% { clip: rect(98px, 9999px, 100px, 0); }

    55% { clip: rect(45px, 9999px, 67px, 0); }

    60% { clip: rect(76px, 9999px, 88px, 0); }

    65% { clip: rect(23px, 9999px, 45px, 0); }

    70% { clip: rect(87px, 9999px, 92px, 0); }

    75% { clip: rect(34px, 9999px, 56px, 0); }

    80% { clip: rect(65px, 9999px, 87px, 0); }

    85% { clip: rect(12px, 9999px, 34px, 0); }

    90% { clip: rect(98px, 9999px, 100px, 0); }

    95% { clip: rect(45px, 9999px, 67px, 0); }

    100% { clip: rect(76px, 9999px, 88px, 0); }

}

/* ===== MOBILE OPTIMIZATIONS ===== */

@media (max-width: 768px) {

    .mobile-device {

        /* Adjustments for mobile */

    }

    

    .mobile-note {

        font-size: 0.8rem;

        color: var(--accent-yellow);

        display: block;

        margin-top: 0.25rem;

        font-style: italic;

    }

    

    /* Larger touch targets */

    .industry-card, .scenario-card, .option-card {

        min-height: 120px;

    }

    

    .nav-btn, .control-btn, .report-btn {

        min-height: 44px;

        min-width: 44px;

    }

    

    /* Adjust font sizes for mobile */

    .setup-title h1 {

        font-size: 2rem;

    }

    

    .setup-title h2 {

        font-size: 1rem;

    }

    

    .step-title h3 {

        font-size: 1.2rem;

    }

    

    /* Better loading screen for mobile */

    .loading-content {

        padding: 1rem;

    }

    

    .logo-pulse {

        width: 80px;

        height: 80px;

    }

    

    .logo-text {

        font-size: 2.5rem;

    }

    

    /* Battery optimization */

    .emergency-effects {

        animation-duration: 2s !important;

    }

    

    /* Disable heavy effects on low battery */

    @media (max-width: 480px) and (orientation: portrait) {

        .stress-fill {

            transition: width 1s ease;

        }

        

        .emergency-effects {

            display: none;

        }

    }

}



/* ===== TOUCH FEEDBACK ===== */

.industry-card:active,

.scenario-card:active,

.option-card:active,

.nav-btn:active,

.control-btn:active {

    transform: scale(0.98);

    transition: transform 0.1s;

}



/* ===== KODULAR WEBVIEW SPECIFIC ===== */

@media (max-aspect-ratio: 3/4) {

    /* Very tall screens (common in Kodular) */

    .simulation-dashboard {

        grid-template-columns: 1fr;

        height: calc(100vh - 120px);

    }

    

    .decision-panel {

        height: 60vh;

    }

    

    .resources-panel {

        height: 40vh;

        overflow-y: scroll;

    }

}



/* ===== SAFARI/IOS SPECIFIC ===== */

@supports (-webkit-touch-callout: none) {

    /* iOS specific styles */

    .loading-screen {

        -webkit-backdrop-filter: blur(10px);

        backdrop-filter: blur(10px);

    }

    

    /* Fix for iOS audio */

    audio {

        display: block;

        visibility: hidden;

        position: absolute;

    }

}



/* ===== ANDROID SPECIFIC ===== */

@supports not (-webkit-touch-callout: none) {

    /* Android specific styles */

    .loading-screen {

        background: linear-gradient(135deg, #000000 0%, #0a0a0f 100%);

    }

}



/* ===== FALLBACK STYLES ===== */

.no-web-speech .enable-voice {

    display: none;

}



.no-audio .audio-settings {

    opacity: 0.5;

    pointer-events: none;

}



/* ===== LOADING FALLBACK ===== */

.loading-fallback {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: var(--primary-dark);

    z-index: 10000;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 2rem;

}



.loading-fallback h2 {

    color: var(--accent-cyan);

    margin-bottom: 1rem;

}



.loading-fallback p {

    color: var(--text-secondary);

    margin-bottom: 2rem;

}



.loading-fallback-btn {

    padding: 1rem 2rem;

    background: var(--accent-blue);

    color: white;

    border: none;

    border-radius: var(--radius-md);

    font-size: 1rem;

    cursor: pointer;

}