:root {
    --neon-green: #39ff14;
    --neon-pink: #ff007f;
    --neon-cyan: #00f0ff;
    --crt-bg: #020604;
    --text-shield: 2px 2px 0px #000, -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000, 0px 4px 8px rgba(0,0,0,1);
}

html, body {
    background-color: #050508 !important;
    color: #ffffff !important; 
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

.screen-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #050508;
    padding: 20px;
}

.arcade-cabinet {
    background: #1a1a24;
    border: 24px solid #2d2d38; 
    border-radius: 40px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.95), inset 0 0 30px rgba(0,0,0,0.85);
    padding: 16px;
    width: 95vw;
    max-width: 1560px;      
    height: 90vh;           
    max-height: 920px;
    position: relative;
}

.crt-screen {
    background-color: var(--crt-bg);
    width: 100%;
    height: 100%;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    padding: 0; 
    box-shadow: inset 0 0 120px rgba(0,0,0,1);
    animation: crtTurnOn 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    transform-origin: center center;
}

.scanlines {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.35) 50%);
    background-size: 100% 4px;
    pointer-events: none;
}

.z-1 { z-index: 1; }
.z-2 { z-index: 2; position: relative; }
.z-highest { z-index: 9999 !important; pointer-events: none; }

.spa-layer { 
    display: none; 
    flex-direction: column; 
    justify-content: space-between; 
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    padding: 32px !important;
    box-sizing: border-box !important;
}

.spa-layer.active-layer { display: flex !important; }

.transparent-bg { background-color: transparent !important; }
.solid-bg { background-color: #000000 !important; }

.crt-boot-flash {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ffffff;
    z-index: 10000;
    pointer-events: none;
    animation: bootFlash 0.6s ease-out forwards;
}

@keyframes bootFlash {
    0% { opacity: 1; }
    10% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes crtTurnOn {
    0% { transform: scale(0.02, 0.005); filter: brightness(10) contrast(5); opacity: 0; }
    20% { transform: scale(0.8, 0.005); filter: brightness(8) contrast(5); opacity: 1; }
    45% { transform: scale(1, 0.01); filter: brightness(5) contrast(3); opacity: 1; }
    75% { transform: scale(1, 1); filter: brightness(2) contrast(1.5); opacity: 1; }
    100% { transform: scale(1, 1); filter: brightness(1) contrast(1); opacity: 1; }
}

#battleCanvas {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
    pointer-events: none;
}

.ui-layer {
    position: relative;
    pointer-events: auto;
    width: 100%;
}

.hud {
    display: flex;
    justify-content: space-between;
    font-size: 16px; 
    color: var(--neon-cyan);
    text-shadow: var(--text-shield);
    font-family: 'Press Start 2P', monospace;
    font-weight: bold;
}
.hud span { color: #fff; text-shadow: var(--text-shield); }

/* ⬇️ ADD THIS RULE ⬇️ */
.hud div:last-child {
    text-align: right;
    margin-right: -4px; /* Optical nudge to the right */
}

.menu-focal-zone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    gap: 35px; 
    width: 100%;
}

.title-container { text-align: center; margin-top: 10px; }

.arcade-tag.flash-title {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 4px;
    margin-bottom: 8px; 
    font-family: 'Press Start 2P', monospace;
    animation: neonGlowPulse 1.2s infinite alternate;
}

.presents-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    color: #95a5a6; 
    letter-spacing: 2px;
    margin-bottom: 16px;
    text-shadow: 2px 2px 0px #000;
}

@keyframes neonGlowPulse {
    0% { color: #ffea00; text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 0 0 10px #ff7700; }
    50% { color: #00f0ff; text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 0 0 15px #0077ff; }
    100% { color: #ff007f; text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 0 0 12px #ff0055; }
}

.main-title {
    font-size: 54px;
    background: linear-gradient(to bottom, #ffffff 0%, #ffea00 40%, #ff2200 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0px 3px 0px #000) drop-shadow(0px -3px 0px #000) drop-shadow(3px 0px 0px #000) drop-shadow(-3px 0px 0px #000) drop-shadow(0 0 12px rgba(255,0,0,0.6));
    margin-bottom: 8px;
    font-family: 'Press Start 2P', monospace;
    font-weight: bold;
}

.bot-title {
    color: var(--neon-pink);
    font-size: 36px;
    text-shadow: var(--text-shield), 0 0 8px var(--neon-pink);
    font-family: 'Press Start 2P', monospace;
    margin-bottom: 16px;
    font-weight: bold;
}

.slogan-text {
    font-family: 'VT323', monospace;
    font-size: 34px; 
    font-weight: bold;
    color: #ffffff;
    text-shadow: var(--text-shield), 0 0 12px rgba(0, 240, 255, 0.9);
    letter-spacing: 2px;
    margin-top: 6px;
}

.menu-container {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    border: 3px solid var(--neon-green);
    background: #040d05; 
    padding: 24px;
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.45), inset 0 0 15px rgba(0,0,0,1);
    border-radius: 8px;
    align-self: center;
}

.menu-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.menu-item { display: flex; align-items: center; padding: 12px; cursor: pointer; border-radius: 4px; background: rgba(0, 0, 0, 0.4); }
.menu-item .pointer { visibility: hidden; color: var(--neon-cyan); margin-right: 12px; font-family: 'Press Start 2P', monospace; text-shadow: var(--text-shield); }
.menu-item-text { font-size: 16px; color: #fff; font-family: 'Press Start 2P', monospace; text-shadow: var(--text-shield); font-weight: bold; }
.menu-item-desc { font-family: 'VT323', monospace; font-size: 26px; color: var(--neon-green); text-shadow: var(--text-shield); margin-left: auto; font-weight: bold; }

@media (hover: hover) {
    .menu-item:hover, .menu-item.active { background: rgba(57, 255, 20, 0.15); border: 1px solid rgba(57, 255, 20, 0.3); }
    .menu-item:hover .pointer, .menu-item.active .pointer { visibility: visible; }
    .menu-item:hover .menu-item-text, .menu-item.active .menu-item-text { color: var(--neon-cyan); text-shadow: var(--text-shield), 0 0 8px var(--neon-cyan); }
    .menu-item:hover .menu-item-desc, .menu-item.active .menu-item-desc { color: #ffffff; text-shadow: var(--text-shield), 0 0 8px var(--neon-green); }
}

.menu-item:active { background: rgba(57, 255, 20, 0.15) !important; border: 1px solid rgba(57, 255, 20, 0.3) !important; }
.menu-item:active .pointer { visibility: visible !important; }
.menu-item:active .menu-item-text { color: var(--neon-cyan) !important; text-shadow: var(--text-shield), 0 0 8px var(--neon-cyan) !important; }
.menu-item:active .menu-item-desc { color: #ffffff !important; text-shadow: var(--text-shield), 0 0 8px var(--neon-green) !important; }

.screen-footer { display: flex; justify-content: space-between; font-size: 13px; color: #cbdacf; font-family: 'Press Start 2P', monospace; font-weight: bold; }
.system-status { text-shadow: var(--text-shield); color: #a0a0a0; }
.footer-email-link { color: var(--neon-pink); text-shadow: var(--text-shield), 0 0 4px var(--neon-pink); text-decoration: none; cursor: pointer; }
.footer-email-link:hover { color: #ffffff; text-shadow: var(--text-shield), 0 0 14px var(--neon-pink); }

.bg-layer-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    image-rendering: pixelated;
}

#configInterface *, #configInterface *::before, #configInterface *::after,
#paymentInterface *, #paymentInterface *::before, #paymentInterface *::after,
#intelInterface .intel-content-zone *, #intelInterface .config-header *,
#trophiesInterface .high-score-zone *, #trophiesInterface .config-header *,
#contactInterface .payment-focal-zone *, #contactInterface .config-header * {
    text-shadow: none !important;
    filter: none !important;
    background-image: none !important;
}

.config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #222222;
    padding-bottom: 16px;
    margin-bottom: 24px;
    position: relative;
}

.config-main-title {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #00f0ff !important;
    margin: 0 !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0;
}

.header-runway-wrapper {
    flex-grow: 1;
    height: 48px;
    margin: 0 20px;
    position: relative;
    background: #08080c;
    border: 1px dashed #222233;
    border-radius: 4px;
    overflow: hidden;
}

#headerChaseCanvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

.config-section-heading {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #ffd700 !important; 
    margin: 0 0 4px 0 !important;
    letter-spacing: 0.5px !important;
}

.config-grid { 
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 24px; 
    flex-grow: 1; 
    margin-bottom: 20px;
    min-height: 0; 
}

.config-card {
    background: #111111 !important;
    border: 2px solid #333333 !important;
    border-radius: 8px !important;
    padding: 24px !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto; 
    min-height: 0; 
}

.config-card::-webkit-scrollbar { width: 6px; }
.config-card::-webkit-scrollbar-track { background: transparent; }
.config-card::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
.config-card::-webkit-scrollbar-thumb:hover { background: var(--neon-cyan); }

.form-group { display: flex; flex-direction: column; gap: 8px; }
.row-spacing { margin-top: 4px; }

.flat-label { font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; font-weight: bold !important; color: #00ff66 !important; letter-spacing: 0.5px !important; }
.intel-text { font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; color: #cccccc !important; line-height: 1.8; }

.flat-vector-icon { width: 48px; height: 48px; display: block; color: #888888; transition: color 0.2s ease; }

.flat-dropzone {
    border: 2px dashed #444444; border-radius: 6px; padding: 16px 12px;
    text-align: center; background: #161616; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.flat-dropzone input[type="file"] { display: none; }
.flat-dropzone:hover { border-color: #00f0ff; background: #1a2426; }
.flat-dropzone:hover .flat-vector-icon { color: #00f0ff; }

.svg-clapboard, .svg-script { width: 100%; height: 100%; }
.svg-clapboard .clap-top { transform-origin: 2px 9px; transition: transform 0.15s cubic-bezier(0.25, 1, 0.2, 1.1); }
.group-clapboard:hover .svg-clapboard .clap-top { transform: rotate(11deg) translate(2px, -3px); color: #ff007f !important; }
.svg-script .script-page { transform-origin: bottom center; }
.group-script:hover .svg-script { animation: textFlutterCycle 0.35s infinite alternate ease-in-out; }

@keyframes textFlutterCycle {
    0% { transform: skewX(0deg) scaleY(1); }
    50% { transform: skewX(-3deg) scaleY(0.97) skewY(1deg); }
    100% { transform: skewX(4deg) scaleY(1.02); }
}

.flat-dropzone-text { font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; font-weight: bold !important; color: #ffffff !important; line-height: 1.4 !important; }
.estimator-input-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }

.flat-numeric-input {
    background: #000000 !important;
    border: 2px solid #00ff66 !important; color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif !important; font-size: 18px !important; font-weight: bold !important;
    padding: 10px 14px !important; border-radius: 6px !important; outline: none !important; width: 100% !important; box-sizing: border-box !important;
}
.flat-numeric-input:focus { border-color: #00f0ff !important; }

.estimator-summary-box { background: #1c1c1c !important; border: 2px dashed #444444 !important; border-radius: 6px !important; padding: 14px !important; margin-top: auto; }
.summary-line { display: flex; justify-content: space-between; align-items: center; }
.summary-label { font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: bold !important; color: #aaaaaa !important; }
.summary-value { font-family: Arial, Helvetica, sans-serif !important; font-size: 24px !important; font-weight: 900 !important; color: #39ff14 !important; }

.flat-select-dropdown {
    background: #000000 !important; border: 2px solid #555555 !important; color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: bold !important;
    padding: 12px !important; border-radius: 6px !important; outline: none !important; cursor: pointer !important; width: 100% !important;
}
.flat-select-dropdown:focus { border-color: #00f0ff !important; }

.flat-checkbox-block { background: #000000; border: 2px solid #222222; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.flat-check-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.flat-check-row input[type="checkbox"] { transform: scale(1.2); cursor: pointer; margin-top: 2px; }
.flat-check-text { font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; color: #cccccc !important; }
.flat-check-row input:checked ~ .flat-check-text { color: #ffffff !important; font-weight: bold !important; }

.flat-table { width: 100%; border-collapse: collapse; }
.flat-th { font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: bold !important; color: #888888 !important; border-bottom: 2px solid #333333; padding-bottom: 8px; text-align: left; }
.flat-td { padding: 14px 0; border-bottom: 1px solid #222222; vertical-align: middle; }
.flat-radio-row { display: inline-flex; align-items: center; gap: 8px; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: bold !important; color: #ffffff !important; cursor: pointer; }
.flat-radio-row input[type="radio"] { transform: scale(1.2); cursor: pointer; }

.txt-white { font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; color: #ffffff !important; font-weight: bold !important; }
.txt-cyan { font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; color: #00f0ff !important; font-weight: 900 !important; }
.txt-pink { font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; color: #ff007f !important; font-weight: 900 !important; }
.txt-orange { font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; color: #ff9900 !important; font-weight: 900 !important; }

.override-btn-pink { background: #000000 !important; border: 2px solid #ff007f !important; color: #ff007f !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: bold !important; padding: 8px 16px !important; border-radius: 4px !important; cursor: pointer !important; flex-shrink: 0; }
.override-btn-pink:hover { background: #ff007f !important; color: #000000 !important; }
.override-btn-green { background: #000000 !important; border: 2px solid #39ff14 !important; color: #39ff14 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: bold !important; padding: 14px !important; border-radius: 6px !important; cursor: pointer !important; margin-top: 14px !important; width: 100% !important; letter-spacing: 0.5px !important; }
.override-btn-green:hover { background: #39ff14 !important; color: #000000 !important; }

/* HOW TO FIGHT & INTEL LAYER STYLES */
.intel-content-zone { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; flex-grow: 1; width: 100%; padding-top: 20px; padding-bottom: 60px; overflow-y: auto; }
.intel-text-blocks { max-width: 800px; width: 100%; margin-top: 40px; display: flex; flex-direction: column; gap: 24px; }
.intel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; margin-bottom: 0; }

.action-vignette-canvas { width: 100%; max-width: 600px; aspect-ratio: 600 / 250; margin: 0 auto; background: transparent; border: 3px solid #333; border-radius: 8px; display: block; box-shadow: inset 0 0 40px rgba(0,0,0,1); }

.retro-captcha { display: inline-flex; align-items: center; background: #f9f9f9; border: 2px solid #d3d3d3; padding: 12px 18px; border-radius: 3px; cursor: pointer; box-shadow: 0px 4px 15px rgba(0,0,0,0.5); transition: all 0.1s ease; margin-top: 10px; }
.retro-captcha:hover { background: #ffffff; box-shadow: 0px 4px 20px rgba(0,240,255,0.4); border-color: var(--neon-cyan); }
.rc-left { display: flex; align-items: center; }
.rc-checkbox { width: 28px; height: 28px; appearance: none; background: #fff; border: 2px solid #c1c1c1; border-radius: 2px; margin-right: 12px; cursor: pointer; position: relative; transition: all 0.2s; }
.rc-checkbox:checked { border-color: #009900; }
.rc-checkbox:checked::after { content: '✔'; position: absolute; top: -6px; left: 3px; font-size: 26px; color: #009900; font-family: sans-serif; }
.rc-text { font-family: 'Arial', sans-serif !important; font-weight: bold; font-size: 15px; color: #222 !important; margin-right: 24px; letter-spacing: 0; text-shadow: none !important; }
.rc-grid { display: grid; grid-template-columns: repeat(3, 10px); grid-template-rows: repeat(3, 10px); gap: 2px; }
.rc-square { background: #4285f4; border-radius: 1px; }
.rc-square.rc-active { background: #1a2426; }

/* HIGH SCORES LAYER STYLES */
.high-score-zone { display: flex; flex-direction: column; align-items: center; flex-grow: 1; width: 100%; padding: 20px 0; overflow-y: hidden; }
.arcade-board { border: 4px solid var(--neon-cyan); border-image: linear-gradient(to bottom, var(--neon-cyan), var(--neon-pink)) 1; position: relative; background: rgba(0, 0, 0, 0.85); box-shadow: 0 0 20px rgba(0, 240, 255, 0.4), inset 0 0 20px rgba(255, 0, 127, 0.2); overflow: hidden; padding-bottom: 50px; }
.hs-scroll-container { max-height: 45vh; overflow-y: auto; overflow-x: hidden; padding-right: 12px; }
.hs-scroll-container::-webkit-scrollbar { width: 14px; }
.hs-scroll-container::-webkit-scrollbar-track { background: #0a0a0a; border-left: 2px solid #333; }
.hs-scroll-container::-webkit-scrollbar-thumb { background: var(--neon-pink); border-radius: 2px; border: 2px solid #111; }
.hs-scroll-container::-webkit-scrollbar-thumb:hover { background: var(--neon-cyan); }
.high-score-board { width: 100%; max-width: 1000px; border-radius: 8px; padding: 24px; }
.hs-row { display: grid; grid-template-columns: 60px 160px 150px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px dashed #333; align-items: center; }
.hs-row:last-child { border-bottom: none; }
.hs-header { font-family: 'Press Start 2P', monospace; font-size: 14px; color: #888; border-bottom: 2px solid #444; padding-bottom: 12px; }
.hs-rank { font-family: 'Press Start 2P', monospace; font-size: 16px; color: #fff; text-align: left; text-shadow: var(--text-shield); }
.hs-name { font-family: 'Press Start 2P', monospace; font-size: 16px; color: var(--neon-cyan); text-shadow: var(--text-shield); }
.hs-score { font-family: 'Press Start 2P', monospace; font-size: 16px; color: var(--neon-green); text-align: right; padding-right: 20px; text-shadow: var(--text-shield); }
.hs-review { font-family: 'Press Start 2P', monospace; font-size: 10px; color: #ccc; line-height: 1.6; text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.hs-1st { background: rgba(255, 234, 0, 0.1); border: 1px solid rgba(255, 234, 0, 0.5); box-shadow: inset 0 0 15px rgba(255, 234, 0, 0.2); transform: scale(1.02); margin: 10px 0; padding: 16px 10px; }
.hs-1st .hs-rank { color: #ffea00; animation: neonGlowPulse 1.5s infinite alternate; }
.hs-1st .hs-review { color: #fff !important; text-shadow: 0 0 5px #ffea00 !important; }
.hs-2nd .hs-rank { color: #d3d3d3; } .hs-3rd .hs-rank { color: #cd7f32; }
.rank-4 .hs-rank { color: #00f0ff; } .rank-5 .hs-rank { color: #39ff14; } .rank-6 .hs-rank { color: #ff007f; }
.rank-7 .hs-rank { color: #9b59b6; } .rank-8 .hs-rank { color: #f1c40f; } .rank-9 .hs-rank { color: #e67e22; }
.rank-10 .hs-rank { color: #1abc9c; } .rank-11 .hs-rank { color: #e74c3c; } .rank-12 .hs-rank { color: #3498db; }
.rank-13 .hs-rank { color: #2ecc71; } .rank-14 .hs-rank { color: #ff69b4; } .rank-15 .hs-rank { color: #00ffff; }

.pixel-crown { display: inline-block; margin-right: 8px; animation: bounce 1s infinite alternate; }
.blink-cursor { animation: blinkStep 1s step-end infinite; }
@keyframes blinkStep { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-5px); } }

.screen-glitch { animation: extremeGlitch 0.15s infinite; filter: drop-shadow(4px 0px 0px rgba(255,0,127,0.8)) drop-shadow(-4px 0px 0px rgba(0,240,255,0.8)) !important; }
@keyframes extremeGlitch {
    0% { transform: translate(0) skewX(0); filter: hue-rotate(0deg); }
    20% { transform: translate(-8px, 4px) skewX(5deg); filter: hue-rotate(90deg); }
    40% { transform: translate(6px, -6px) skewX(-5deg); filter: hue-rotate(0deg); }
    60% { transform: translate(-4px, 8px) skewX(2deg); filter: hue-rotate(180deg); }
    80% { transform: translate(8px, -4px) skewX(-2deg); filter: hue-rotate(0deg); }
    100% { transform: translate(0) skewX(0); }
}

.hs-ticker-wrap { position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background: var(--neon-pink); overflow: hidden; display: flex; align-items: center; border-top: 2px solid #fff; }
.hs-ticker-move { display: flex; white-space: nowrap; animation: ticker 20s linear infinite; }
.hs-ticker-item { font-family: 'Press Start 2P', monospace; font-size: 12px; color: #000; padding: 0 50px; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* PAYMENT LAYER STYLES */
.payment-focal-zone { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; flex-grow: 1; width: 100%; padding-top: 40px; padding-bottom: 60px; overflow-y: auto; position: relative; }
.credits-required-title { font-size: 54px; font-family: 'Press Start 2P', monospace; font-weight: bold; text-align: center; margin-bottom: 8px; animation: criticalFlash 1.5s infinite linear; }

@keyframes criticalFlash {
    0%, 100% { color: #ff0000; text-shadow: 4px 4px 0 #000, 0 0 20px #ff0000; }
    20% { color: #00f0ff; text-shadow: 4px 4px 0 #000, 0 0 20px #00f0ff; }
    40% { color: #39ff14; text-shadow: 4px 4px 0 #000, 0 0 20px #39ff14; }
    60% { color: #ffea00; text-shadow: 4px 4px 0 #000, 0 0 20px #ffea00; }
    80% { color: #ff007f; text-shadow: 4px 4px 0 #000, 0 0 20px #ff007f; }
}

.payment-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 30px; width: 100%; max-width: 900px; padding-top: 20px; }
@keyframes hoverFloat { 0%, 100% { transform: translateY(var(--stagger)); } 50% { transform: translateY(calc(var(--stagger) - 8px)); } }

.payment-card { background: #111111 !important; border: 3px solid #333333 !important; border-radius: 8px !important; padding: 32px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; cursor: pointer; position: relative; flex: 1 1 calc(25% - 30px); min-width: 160px; animation: hoverFloat 3.5s ease-in-out infinite; transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; }
.payment-card:nth-child(even) { --stagger: 30px; animation-delay: -1.75s; }
.payment-card:nth-child(odd) { --stagger: 0px; animation-delay: 0s; }
.payment-card:hover { animation: none; border-color: var(--neon-cyan) !important; background: #1a2426 !important; box-shadow: 0 0 25px rgba(0, 240, 255, 0.6); transform: translateY(calc(var(--stagger) - 10px)) scale(1.05); z-index: 5; }

.pixel-coin-container { position: absolute; top: 0; left: 50%; transform: translateX(-50%); opacity: 0; pointer-events: none; z-index: 10; }
.pixel-coin { width: 48px; height: 48px; image-rendering: pixelated; }
.payment-card:hover .pixel-coin-container { animation: popCoin 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

@keyframes popCoin {
    0% { opacity: 0; transform: translate(-50%, 0) scale(0.5); }
    30% { opacity: 1; transform: translate(-50%, -40px) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -80px) scale(1); }
}

.payment-card:hover .retro-logo { filter: drop-shadow(0 0 8px var(--neon-cyan)); transform: scale(1.1); }
.retro-logo { width: 64px; height: 64px; display: block; color: #ffffff; transition: all 0.2s ease; }
.payment-name { font-family: 'Press Start 2P', monospace !important; font-size: 16px !important; color: #ffffff !important; text-align: center; }
.payment-card:hover .payment-name { color: var(--neon-cyan) !important; }

.cc-form-container { display: none; width: 100%; max-width: 600px; background: #111111; border: 2px dashed #444444; border-radius: 8px; padding: 32px; margin-top: 60px; box-shadow: inset 0 0 15px rgba(0,0,0,1); opacity: 0; transform: translateY(20px); }
.cc-form-container.active { display: block; animation: slideUpFade 0.4s ease forwards; }

.premium-inst-form { display: none; position: absolute; top: 20px; left: 10px; width: 210px; height: 480px; margin: 0; flex-direction: column; z-index: 20; opacity: 1; transform: none; animation: none; padding: 24px; }
.premium-inst-form .form-group { flex-grow: 1; display: flex; flex-direction: column; }
.premium-inst-form textarea { flex-grow: 1; height: 100% !important; }

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

.form-group-row { display: flex; gap: 16px; margin-top: 16px; }
.form-group-row > .form-group { flex: 1; }
.cc-input { background: #000000 !important; color: #39ff14 !important; letter-spacing: 2px !important; }

/* Bot Graveyard */
.bot-graveyard { position: relative; width: 320px; height: 120px; margin-top: 70px; margin-left: auto; margin-right: auto; pointer-events: none; }
.dead-bot { position: absolute; bottom: 0; width: 64px; height: 64px; }

.dead-bot.bot-1 { left: 40px; transform: rotate(-20deg); z-index: 1; }
.dead-bot.bot-2 { left: 90px; bottom: -10px; transform: rotate(15deg); z-index: 2; }
.dead-bot.bot-3 { left: 140px; transform: rotate(-5deg); z-index: 1; }
.dead-bot.bot-4 { left: 190px; bottom: -5px; transform: rotate(35deg); z-index: 3; }
.dead-bot.bot-5 { left: 60px; bottom: 25px; transform: rotate(110deg); z-index: 4; filter: brightness(0.6); }
.dead-bot.bot-6 { left: 120px; bottom: 20px; transform: rotate(-65deg); z-index: 5; filter: brightness(0.7); }
.dead-bot.bot-7 { left: 160px; bottom: 35px; transform: rotate(160deg); z-index: 2; filter: brightness(0.5); }
.dead-bot.bot-8 { left: 210px; bottom: 15px; transform: rotate(85deg); z-index: 4; filter: brightness(0.8); }

@keyframes botJitter {
    0%, 85% { transform: translate(0, 0) rotate(0deg); }
    87% { transform: translate(-6px, 4px) rotate(-8deg); }
    89% { transform: translate(6px, -4px) rotate(8deg); }
    91% { transform: translate(-4px, -6px) rotate(-5deg); }
    93% { transform: translate(4px, 6px) rotate(5deg); }
    95%, 100% { transform: translate(0, 0) rotate(0deg); }
}

.dead-bot-svg { width: 100%; height: 100%; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.8)); transform-origin: center; animation: botJitter 4s infinite linear; }

.zap, .zap::after { position: absolute; top: 50%; left: 50%; width: 2px; height: 26px; background: #fff; box-shadow: 0 0 8px #00f0ff, 0 0 15px #00f0ff; opacity: 0; transform-origin: center; z-index: 20; }
.zap { animation: electricZap 1.5s infinite; }
.zap::after { content: ''; width: 26px; height: 2px; animation: electricZapAlt 1.8s infinite; }

@keyframes electricZap { 0%, 88% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0.5); } 89% { opacity: 1; transform: translate(-40%, -60%) rotate(45deg) scale(1.5); } 90% { opacity: 0; } 92% { opacity: 1; transform: translate(-60%, -40%) rotate(-30deg) scale(2); } 94%, 100% { opacity: 0; } }
@keyframes electricZapAlt { 0%, 82% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0.5); } 83% { opacity: 1; transform: translate(-60%, -40%) rotate(-45deg) scale(1.8); } 84% { opacity: 0; } 86% { opacity: 1; transform: translate(-40%, -60%) rotate(30deg) scale(1.2); } 88%, 100% { opacity: 0; } }

.sparks, .sparks::after { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: transparent; z-index: 15; }
.sparks { animation: sparkPop 2.5s infinite cubic-bezier(0.1, 0.8, 0.3, 1); }
.sparks::after { content: ''; animation: sparkPopAlt 3.2s infinite cubic-bezier(0.1, 0.8, 0.3, 1); animation-delay: 0.5s; }

@keyframes sparkPop {
    0%, 80% { opacity: 0; box-shadow: 0 0 0 0 transparent; }
    82% { opacity: 1; box-shadow: -20px -40px 4px 4px #00f0ff, 30px -30px 6px 6px #39ff14, 10px -70px 4px 4px #ffea00, -50px -20px 6px 4px #ff007f; }
    87% { opacity: 1; box-shadow: -80px -120px 10px 4px #00f0ff, 130px -80px 10px 4px #39ff14, 40px -180px 10px 4px #ffea00, -140px -60px 12px 4px #ff007f; }
    92% { opacity: 0; box-shadow: -100px -80px 12px -2px #00f0ff, 150px -40px 12px -2px #39ff14, 50px -140px 12px -2px #ffea00, -160px -20px 14px -2px #ff007f; }
    95%, 100% { opacity: 0; box-shadow: 0 0 0 0 transparent; }
}

@keyframes sparkPopAlt {
    0%, 80% { opacity: 0; box-shadow: 0 0 0 0 transparent; }
    82% { opacity: 1; box-shadow: 40px -40px 4px 4px #ff007f, -30px -30px 6px 6px #00f0ff, -10px -70px 4px 4px #39ff14, 50px -20px 6px 4px #ffea00; }
    87% { opacity: 1; box-shadow: 100px -100px 10px 4px #ff007f, -90px -60px 10px 4px #00f0ff, -30px -160px 10px 4px #39ff14, 120px -40px 12px 4px #ffea00; }
    92% { opacity: 0; box-shadow: 120px -60px 12px -2px #ff007f, -110px -30px 12px -2px #00f0ff, -40px -120px 12px -2px #39ff14, 140px -10px 14px -2px #ffea00; }
    95%, 100% { opacity: 0; box-shadow: 0 0 0 0 transparent; }
}

.bot-1 .dead-bot-svg { animation-delay: 0.3s; } .bot-1 .sparks { animation-delay: 0.1s; } .bot-1 .zap { animation-delay: 0.2s; }
.bot-2 .dead-bot-svg { animation-delay: 1.8s; } .bot-2 .sparks { animation-delay: 1.4s; } .bot-2 .zap { animation-delay: 1.5s; }
.bot-3 .dead-bot-svg { animation-delay: 0.9s; } .bot-3 .sparks { animation-delay: 0.7s; } .bot-3 .zap { animation-delay: 0.8s; }
.bot-4 .dead-bot-svg { animation-delay: 2.5s; } .bot-4 .sparks { animation-delay: 2.1s; } .bot-4 .zap { animation-delay: 2.3s; }
.bot-5 .dead-bot-svg { animation-delay: 3.2s; } .bot-5 .sparks { animation-delay: 0.4s; } .bot-5 .zap { animation-delay: 0.1s; }
.bot-6 .dead-bot-svg { animation-delay: 1.2s; } .bot-6 .sparks { animation-delay: 2.8s; } .bot-6 .zap { animation-delay: 2.9s; }
.bot-7 .dead-bot-svg { animation-delay: 0.5s; } .bot-7 .sparks { animation-delay: 1.1s; } .bot-7 .zap { animation-delay: 0.9s; }
.bot-8 .dead-bot-svg { animation-delay: 2.1s; } .bot-8 .sparks { animation-delay: 1.9s; } .bot-8 .zap { animation-delay: 1.7s; }

.bot-bubble { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: #000; border: 2px solid #ff007f; color: #fff; padding: 6px 10px; font-family: 'Press Start 2P', monospace; font-size: 10px; border-radius: 4px; opacity: 0; transition: opacity 0.2s; white-space: nowrap; z-index: 10; }
.bot-bubble.show { opacity: 1; }

/* MATRIX CONTACT LAYER STYLES */
.matrix-form-container { width: 100%; max-width: 700px; background: rgba(0, 5, 0, 0.85); border: 3px solid var(--neon-green); border-radius: 8px; padding: 32px; box-shadow: 0 0 30px rgba(57, 255, 20, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.9); }
.matrix-label { color: var(--neon-green) !important; font-family: 'Press Start 2P', monospace !important; text-shadow: 1px 1px 0 #000; }
.matrix-input { background: rgba(0, 20, 0, 0.6) !important; border: 2px solid #1f4e1f !important; color: var(--neon-cyan) !important; font-family: 'VT323', monospace !important; font-size: 24px !important; }
.matrix-input:focus { border-color: var(--neon-green) !important; box-shadow: 0 0 15px rgba(57, 255, 20, 0.3); }
.matrix-btn { font-family: 'Press Start 2P', monospace !important; font-size: 18px !important; padding: 20px !important; text-shadow: 2px 2px 0 #000; box-shadow: 0 0 15px rgba(57, 255, 20, 0.4); animation: neonGlowPulse 2s infinite alternate; }

/* 8-BIT HUD ALIGNMENT & CHUNKY FIXES */
#arcadeHealthHUD { align-items: center; gap: 16px; width: 100%; margin-top: 15px; }
#arcadeHealthHUD.active { display: flex !important; }
#arcadeProgressContainer { flex-grow: 1; height: 36px; background: #111; border: 4px solid #222; border-radius: 0; position: relative; overflow: hidden; }
#arcadeProgressBar {
    height: 100%; width: 0%; background-color: var(--neon-pink);
    background-image: repeating-linear-gradient(
        to right, transparent, transparent 8px, #111 8px, #111 12px
    ) !important;
    transition: none !important; 
}

/* MINI-GAME OVERLAY */
#miniGameModal.active-modal { 
    display: flex !important; 
    position: fixed !important; 
    top: 0; left: 0; 
    width: 100vw; height: 100vh; 
    background: #020305 !important; 
    justify-content: center !important; 
    align-items: center !important;     
}

/* CARGO WARNING MODAL */
#cargoWarningModal.active-modal { 
    display: flex !important; 
    position: fixed !important; 
    top: 0; left: 0; 
    width: 100vw; height: 100vh; 
    background: rgba(2, 3, 5, 0.95) !important; 
}

/* ========================================================
   SUBTLE TEXT SCANLINES (Main, Payment, High Scores)
   ======================================================== */

.menu-focal-zone,
.payment-focal-zone,
.high-score-zone,
.format-content-wrapper {
    position: relative; 
}

.menu-focal-zone::after,
.payment-focal-zone::after,
.high-score-zone::after,
.format-content-wrapper::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    
    background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 50%);
    background-size: 100% 4px;
    z-index: 50; 
    pointer-events: none; 
}

/* ========================================================
   FORMAT DATABASE SPECIFIC STYLES (V7.0 - BLUR & JITTER)
   ======================================================== */
#formatInterface { overflow: hidden !important; }

/* The Quarantined Video Feedback Matrix */
.pixel-matrix-bg {
    position: absolute; 
    top: -10%; left: -10%; width: 120%; height: 120%; z-index: 0;
    pointer-events: none;
    background-color: #000;
    
    background-image: 
        repeating-linear-gradient(0deg, rgba(0,0,0,0.85) 0px, rgba(0,0,0,0.85) 4px, transparent 4px, transparent 8px),
        url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="1.5" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.45"/></svg>'),
        repeating-linear-gradient(90deg, rgba(255, 0, 127, 0.6) 0%, rgba(255, 0, 127, 0.6) 15%, rgba(0, 240, 255, 0.6) 15%, rgba(0, 240, 255, 0.6) 30%, rgba(57, 255, 20, 0.6) 30%, rgba(57, 255, 20, 0.6) 50%, rgba(255, 234, 0, 0.6) 50%, rgba(255, 234, 0, 0.6) 70%, rgba(138, 43, 226, 0.6) 70%, rgba(138, 43, 226, 0.6) 100%);
    background-size: 100% 100%, 100% 100%, 200% 100%;
    
    /* DOUBLE BLUR FOR LEGIBILITY */
    filter: blur(12px) contrast(1.5) saturate(2.5); 
    animation: jitterBarMorph 10s steps(100) infinite alternate;
}

.matrix-scanline-laser {
    position: absolute; top: -10%; left: 0; width: 100%; height: 15px; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(0, 240, 255, 0.8), rgba(255, 0, 127, 0.8), transparent);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.5), 0 0 40px rgba(255, 0, 127, 0.5);
    animation: laserScanDown 6s linear infinite;
}

/* Jittering Translate Logic to simulate Analog TV Tracking issues */
@keyframes jitterBarMorph {
    0% { transform: translate(0,0); background-position: 0 0, 0 0, 0% 0%; filter: blur(12px) contrast(1.5) saturate(2.5) hue-rotate(0deg); }
    10% { transform: translate(-3px, 4px); background-position: 0 0, 0 0, 10% 0%; }
    20% { transform: translate(4px, -2px); background-position: 0 0, 0 0, 20% 0%; filter: blur(10px) contrast(2) saturate(3) hue-rotate(20deg); }
    30% { transform: translate(-2px, 3px); background-position: 0 0, 0 0, 30% 0%; }
    50% { transform: translate(3px, -3px); background-position: 0 0, 0 0, 50% 0%; filter: blur(12px) contrast(1.5) saturate(2.5) hue-rotate(45deg); }
    70% { transform: translate(-4px, 2px); background-position: 0 0, 0 0, 70% 0%; }
    90% { transform: translate(2px, -4px); background-position: 0 0, 0 0, 90% 0%; filter: blur(14px) contrast(2) saturate(3) hue-rotate(70deg); }
    100% { transform: translate(0, 0); background-position: 0 0, 0 0, 100% 0%; background-size: 100% 100%, 100% 100%, 400% 100%; filter: blur(12px) contrast(1.5) saturate(2.5) hue-rotate(90deg); }
}

@keyframes laserScanDown {
    0% { transform: translateY(-10vh); }
    100% { transform: translateY(110vh); }
}

/* Custom Arcade Scrollbar for the Inner Box */
.format-scroll-box::-webkit-scrollbar { width: 14px; }
.format-scroll-box::-webkit-scrollbar-track { background: rgba(0,0,0,0.5); border-left: 2px solid #333; }
.format-scroll-box::-webkit-scrollbar-thumb { background: var(--neon-cyan); border-radius: 2px; border: 2px solid #111; }
.format-scroll-box::-webkit-scrollbar-thumb:hover { background: var(--neon-pink); }

.format-content-zone { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.cat-desc { margin-top: -10px; margin-bottom: 25px; color: #a0a0a0 !important; text-shadow: 2px 2px 0 #000; font-size: 22px !important; }

/* --------------------------------------------------------
   UNIFIED RETRO FORMAT BOXES (CARTOON CHUNKY)
   -------------------------------------------------------- */
.crt-zone { position: relative; margin-bottom: 50px; }
.format-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; position: relative; z-index: 5; }

.format-card { 
    position: relative;
    background: rgba(10, 10, 15, 0.85) !important; 
    border: 8px solid #111 !important;  /* Much thicker borders */
    border-radius: 20px !important;     /* Rounded like the arcade screen */
    box-shadow: none !important; 
    padding: 24px !important;
    overflow: hidden;
}

.format-name { font-family: 'Press Start 2P', monospace; font-size: 15px; color: #ffffff; margin-top: 0; margin-bottom: 16px; line-height: 1.4; letter-spacing: 1px; text-shadow: var(--text-shield); }
.format-p { font-family: 'VT323', monospace !important; font-size: 22px !important; color: #fff !important; text-shadow: 2px 2px 0 #000; line-height: 1.4; margin-bottom: 12px; }
.data-label { font-family: 'Press Start 2P', monospace; font-size: 12px; letter-spacing: 1px; padding-right: 8px; text-shadow: 2px 2px 0 #000; }

.cyan-label { color: var(--neon-cyan); }
.pink-label { color: var(--neon-pink); }
.green-label { color: var(--neon-green); }
.yellow-label { color: #ffea00; }

/* Kills old CSS animations & forces text above JS canvas */
.glow-cyan, .glow-pink, .glow-green, .glow-yellow { animation: none !important; box-shadow: none !important; }
.format-card > * { position: relative; z-index: 2; }
.card-border-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* --------------------------------------------------------
   3D ROUND ARCADE BUTTONS (TRUE CONCAVE INDENT)
   -------------------------------------------------------- */
.arcade-control-group {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 16px;
}

.arcade-round-btn {
    width: 80px; 
    height: 80px;
    border-radius: 50%;
    border: none;
    position: relative;
    cursor: pointer;
    outline: none;
    
    /* Outer Rim (Convex): Bright highlight top-left, shadow bottom-right */
    box-shadow: 
        inset 4px 4px 6px rgba(255, 255, 255, 0.5), 
        inset -4px -4px 6px rgba(0, 0, 0, 0.5), 
        0 12px 0 #111, 
        0 18px 20px rgba(0,0,0,0.8);
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.arcade-round-btn:active {
    transform: translateY(10px); /* Pushes the whole housing down */
    box-shadow: 
        inset 4px 4px 6px rgba(255, 255, 255, 0.5), 
        inset -4px -4px 6px rgba(0, 0, 0, 0.5), 
        0 2px 0 #111, 
        0 5px 10px rgba(0,0,0,0.8);
}

.pink-btn { background: var(--neon-pink); }
.green-btn { background: var(--neon-green); }

/* The Plunger Gap & Finger Indent (Concave Bowl) */
.btn-cap {
    position: absolute; 
    top: 14%; left: 14%; 
    width: 72%; height: 72%; 
    border-radius: 50%;
    
    /* The deep physical trench separating the plunger from the rim */
    border: 3px solid rgba(0, 0, 0, 0.8);
    
    /* Concave Bowl Math: 
       1. Heavy shadow falling into the top-left of the bowl
       2. Glare catching the bottom-right inner lip
    */
    background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%, rgba(255,255,255,0.4) 100%);
    box-shadow: 
        inset 6px 6px 12px rgba(0, 0, 0, 0.9), 
        inset -3px -3px 6px rgba(255, 255, 255, 0.5);
}

.arcade-btn-label {
    font-family: 'Press Start 2P', monospace; 
    font-size: 11px; 
    color: #fff; 
    text-shadow: 2px 2px 0 #000; 
    text-align: center; 
    line-height: 1.6;
}

/* Mobile Fallbacks */
@media (max-width: 768px) {
    .format-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1300px) { .premium-inst-form { position: relative; top: auto; left: auto; right: auto; width: 100%; max-width: 800px; height: 250px; margin-bottom: 30px; } }
@media (max-width: 1024px) { .config-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 768px) {
    .screen-wrapper { padding: 0; }
    .arcade-cabinet { 
        border: none; 
        border-radius: 0; 
        padding: 0; 
        width: 100vw; 
        height: 100dvh !important;
        max-height: 100dvh !important; 
    }
    
    #configInterface.shield-layer, 
    #paymentInterface.shield-layer, 
    #intelInterface.shield-layer, 
    #trophiesInterface.shield-layer,
    #contactInterface.shield-layer { 
        padding: 14px 14px 40px 14px !important; 
        height: auto !important;
        min-height: 100% !important;
        position: relative !important; 
    }

    .crt-screen { 
        border-radius: 0; 
        padding: 16px 12px 140px 12px !important; 
        overflow-y: auto !important; 
        display: flex; 
        flex-direction: column; 
    }
    
    .hud { 
        font-size: 10px; /* Dropped slightly so big numbers fit */
        padding-right: 0 !important; /* Kills the double padding */
        padding-left: 0 !important; 
        width: 100%;
    }
    .hud div:last-child {
        text-align: right; /* Forces Bots Blasted flush right */
        margin-right: -2px; /* Optical adjustment */
    }
    .header-runway-wrapper { display: none; } 
    
    .title-container { 
        margin-top: 8vh !important; 
        margin-bottom: auto !important; 
        transform: scale(0.85); 
        transform-origin: top center; 
    }
    .main-title { font-size: 30px; }
    
    .menu-focal-zone { position: relative; z-index: 10; justify-content: flex-end !important; margin-bottom: 20px; }
    .menu-container { padding: 12px 8px !important; width: 100% !important; max-width: 580px; }
    .menu-item { flex-direction: column !important; align-items: flex-start !important; padding: 10px !important; gap: 4px !important; }
    .menu-item-text { font-size: 13px !important; }
    .menu-item-desc { 
        margin-left: 0 !important; 
        margin-top: 6px !important; 
        font-size: 14px !important; 
        line-height: 1.5 !important; 
        white-space: normal !important; 
    }
    
    #battleCanvas { opacity: 0.35 !important; z-index: 0 !important; }

    .config-grid { 
        display: block !important; 
        height: auto !important; 
        max-height: none !important; 
        overflow: visible !important; 
        padding-bottom: 40px !important;
    }
    .config-card { 
        display: block !important; 
        background: #111111 !important; 
        border: 2px solid #333333 !important; 
        border-radius: 8px !important;
        padding: 20px !important; 
        margin-bottom: 24px !important; 
        height: auto !important; 
        max-height: none !important; 
        overflow: visible !important; 
    }
    
    .config-card .form-group {
        margin-bottom: 16px !important;
    }

    .config-header { flex-direction: column !important; align-items: center !important; gap: 16px !important; text-align: center; }
    .config-main-title { font-size: 20px !important; white-space: normal !important; text-align: center !important; }
    .override-btn-pink { width: 100% !important; margin: 0 !important; }
    
    .intel-grid { grid-template-columns: 1fr; }
    
    .payment-grid { flex-direction: column; align-items: center; }
    .payment-card { width: 100%; min-width: unset; transform: translateY(0) !important; --stagger: 0px !important; animation: none !important; }
    .credits-required-title { font-size: 26px !important; line-height: 1.4 !important; word-wrap: break-word !important; }
    .premium-inst-form { height: 200px; }
    
    .bot-graveyard { transform: scale(0.8); margin-top: 30px; }
    
    .hs-scroll-container { max-height: 50vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
    .hs-row { grid-template-columns: 1fr; text-align: center; gap: 8px; border-bottom: 2px solid #222; padding: 20px 0; }
    .hs-header { display: none; }
    .hs-score { text-align: center; padding-right: 0; }
    .hs-review { font-size: 9px; } 
    .hs-1st { transform: scale(1); margin: 0; }
    .arcade-board { padding-bottom: 40px; }
    
    #miniGameModal.active-modal { 
        display: flex !important; 
        position: fixed !important; 
        top: 0 !important; 
        left: 0 !important; 
        width: 100vw !important; 
        height: 100dvh !important; 
        z-index: 10000 !important;
        align-items: center !important; 
        justify-content: center !important; 
    }
    
    #miniGameModal .config-card { 
        height: auto !important; 
        max-height: 85dvh !important; 
        width: 95% !important;
        margin: auto !important; 
        display: flex !important; 
        flex-direction: column !important; 
        justify-content: center !important; 
        align-items: center !important; 
    }
    
    #miniGameCanvas { 
        width: 100% !important; 
        height: auto !important; 
        max-height: 50vh !important; 
        aspect-ratio: 16 / 9 !important; 
        object-fit: contain !important; 
        margin: auto !important; 
    }
    
    #gameDirective { padding: 0 16px !important; margin-top: auto !important; margin-bottom: auto !important; }
    #gameDirective h2 { font-size: 18px !important; text-align: center !important; width: 100% !important; margin-left: 0 !important; }
    #gameDirective p { text-align: center !important; }

    .arcade-glow { 
        background: rgba(57, 255, 20, 0.15) !important; 
        border: 1px solid rgba(57, 255, 20, 0.3) !important; 
    }
    .arcade-glow .pointer { 
        visibility: visible !important; 
    }
    .arcade-glow .menu-item-text { 
        color: var(--neon-cyan) !important; 
        text-shadow: var(--text-shield), 0 0 8px var(--neon-cyan) !important; 
    }
    .arcade-glow .menu-item-desc { 
        color: #ffffff !important; 
        text-shadow: var(--text-shield), 0 0 8px var(--neon-green) !important; 
    }
}

/* --------------------------------------------------------
   CARTOON FLOATING HELP ICON & SMOKE
   -------------------------------------------------------- */
.floating-help-icon {
    position: absolute;
    top: 0; 
    right: 0;  
    width: 36px; 
    height: 36px;
    background: var(--neon-green);
    color: #000;
    font-family: 'Press Start 2P', monospace;
    font-size: 20px;
    display: flex; justify-content: center; align-items: center;
    border-radius: 50%; 
    border: 3px solid #111; 
    cursor: pointer;
    opacity: 0;
    transform: scale(0);
    user-select: none;
    box-shadow: 0 4px 0 rgba(0, 150, 0, 1), 0 6px 10px rgba(0,0,0,0.5);
    transition: filter 0.2s;
    z-index: 10;
}

/* Triggered by JS to animate in */
.floating-help-icon.active {
    animation: 
        popIn 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
        cartoonHover 2.5s ease-in-out 0.5s infinite alternate;
}

.floating-help-icon:active {
    box-shadow: 0 0px 0 rgba(0, 150, 0, 1), 0 2px 5px rgba(0,0,0,0.5);
    margin-top: 4px;
}
.floating-help-icon:hover { filter: brightness(1.2); animation-play-state: paused; }

.smoke-burst {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 64px;
    height: 64px;
    background: radial-gradient(circle, #ffffff 20%, #dddddd 50%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    z-index: 9;
    pointer-events: none;
}

/* Fast cartoon poof */
.smoke-burst.active { animation: smokePop 0.8s ease-out forwards; }

@keyframes smokePop {
    0% { transform: scale(0); opacity: 1; filter: blur(2px); }
    40% { transform: scale(1.5); opacity: 0.8; filter: blur(4px); }
    100% { transform: scale(2.2); opacity: 0; filter: blur(8px); }
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0) rotate(-45deg); }
    100% { opacity: 1; transform: scale(1) rotate(15deg); } 
}

@keyframes cartoonHover {
    0% { transform: translateY(0) rotate(15deg); }
    100% { transform: translateY(-6px) rotate(5deg); }
}

/* --- THE SPEECH BUBBLE --- */
.pro-arcade-tooltip {
    position: absolute;
    top: -9999px; 
    left: -9999px;
    width: 280px; 
    background: #ffffff; 
    border: 4px solid #111; 
    border-radius: 16px; 
    color: #000;
    padding: 16px;
    font-family: 'Press Start 2P', monospace; 
    font-size: 11px;
    line-height: 1.8;
    z-index: 99999;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.8); 
    pointer-events: none;
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    transform-origin: bottom center;
    transition: opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
}

.pro-arcade-tooltip.visible { opacity: 1; transform: translateY(0) scale(1); }

.pro-arcade-tooltip::after {
    content: ''; position: absolute;
    bottom: -16px; left: 50%; margin-left: -12px;
    border-width: 16px 12px 0; border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    z-index: 2;
}

.pro-arcade-tooltip::before {
    content: ''; position: absolute;
    bottom: -22px; left: 50%; margin-left: -16px;
    border-width: 21px 16px 0; border-style: solid;
    border-color: #111 transparent transparent transparent;
    z-index: 1;
}

/* --- MULTI-SELECT DROPDOWN STYLES --- */
.multi-select-container { position: relative; width: 100%; }
.multi-select-options {
    display: none; 
    position: absolute; 
    top: 100%; left: 0; 
    width: 100%;
    background: #000000; 
    border: 2px solid #00f0ff; 
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    max-height: 250px; 
    overflow-y: auto; 
    z-index: 99; 
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.9);
}
.multi-select-container.open .multi-select-options { display: flex; flex-direction: column; gap: 12px; }
.multi-select-container.open .multi-select-header { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-color: #00f0ff !important; }
.multi-select-options::-webkit-scrollbar { width: 10px; }
.multi-select-options::-webkit-scrollbar-track { background: transparent; }
.multi-select-options::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }
.multi-select-options::-webkit-scrollbar-thumb:hover { background: var(--neon-cyan); }

/* The Speech Bubble Tail (White Inner) */
.pro-arcade-tooltip::after {
    content: ''; position: absolute;
    bottom: -16px; left: 50%; margin-left: -12px;
    border-width: 16px 12px 0; border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    z-index: 2;
}

/* The Speech Bubble Tail (Black Outline) */
.pro-arcade-tooltip::before {
    content: ''; position: absolute;
    bottom: -22px; left: 50%; margin-left: -16px;
    border-width: 21px 16px 0; border-style: solid;
    border-color: #111 transparent transparent transparent;
    z-index: 1;
}

/* Individual Cartoon Smoke Puffs */
.smoke-puff {
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 12px;
    background: #ffffff;
    border-radius: 50%;
    margin-top: -6px; margin-left: -6px;
    opacity: 0;
    z-index: 11;
    pointer-events: none;
    animation: puffOut 0.9s ease-out forwards;
}

@keyframes puffOut {
    0% { transform: translate(0, 0) scale(0.5); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(2); opacity: 0; }
}

/* =========================================
   SYSTEM SETTINGS HUB (TWO-MONITOR DESK)
   ========================================= */

#systemSettingsHub {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #00ffcc; text-align: center;
}

.heavy-crt-curve {
    border-radius: 40% / 8% !important;
    box-shadow: inset 0 0 100px rgba(0,0,0,1), inset 0 0 30px rgba(0,240,255,0.15) !important;
    overflow: hidden !important;
}

#systemSettingsHub .config-header {
    position: absolute; top: 32px; right: 32px; left: 32px;
    display: flex; justify-content: space-between; align-items: flex-start;
    border-bottom: none; z-index: 10; width: auto;
}

.hub-header h2 { font-size: 2.5rem; text-transform: uppercase; letter-spacing: 4px; text-shadow: 0 0 10px rgba(0, 255, 204, 0.7); margin-bottom: 10px; }
.hub-header p { font-family: monospace; opacity: 0.8; margin-top: 80px; }

/* 1. The Base Photo Background */
.dreamy-bg {
    position: absolute; top: -5%; left: -5%; width: 110%; height: 110%;
    background-color: #0a1118; 
    background-image: url('stock-photo-glitch-art-scan-line-background-scan-line-monitor-old-technology.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0; pointer-events: none;
    opacity: 0.85; 
    animation: slowPhotoPan 10s ease-in-out infinite alternate;
}

@keyframes slowPhotoPan {
    0% { transform: translate(0, 0) scale(1); filter: brightness(1); }
    100% { transform: translate(-2%, -2%) scale(1.05); filter: brightness(1.1); }
}

/* 2. Turn off the old synthetic CSS gradients */
.vcr-scratch,
.global-tv-noise, 
.dreamy-scanline {
    display: none !important;
}

/* The Steel Desk */
.workbench { display: flex; gap: 50px; margin-top: 40px; padding-bottom: 20px; border-bottom: 8px solid #222; perspective: 1000px; z-index: 5; }

.monitor-container {
    width: 420px; height: 350px; background: #1a1a1a; border: 4px solid #2a2a2a; border-radius: 15px 15px 5px 5px; padding: 15px;
    box-shadow: inset 0 0 15px #000, 0 15px 20px rgba(0,0,0,0.8), 0 0 0 2px #111; cursor: pointer; transition: all 0.3s ease; position: relative;
    z-index: 10;
}
.monitor-container:hover { transform: translateY(-8px) scale(1.03); box-shadow: inset 0 0 15px #000, 0 25px 25px rgba(0,0,0,0.9), 0 0 25px rgba(0, 255, 204, 0.5); z-index: 20; }

/* THE METAL V-SHAPED ANTENNAS (No glow, pure steel) */
.monitor-container::before, .monitor-container::after {
    content: ''; position: absolute; top: 15px; width: 8px; height: 0px; 
    background: linear-gradient(90deg, #555 0%, #ddd 40%, #fff 50%, #888 70%, #333 100%);
    border: 1px solid #111; border-bottom: none;
    border-radius: 4px 4px 0 0; z-index: -1; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: bottom center;
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.6); 
}
.monitor-container::before { left: 40%; transform: rotate(-22deg); }
.monitor-container::after { right: 40%; transform: rotate(22deg); }

.monitor-container:hover::before, .monitor-container:hover::after {
    top: -75px; height: 90px; 
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.6); 
}

/* THE DESCENDING FRANKENSTEIN PLASMA ARC */
.monitor-bezel::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 24px;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    /* Added preserveAspectRatio='none' so the spark physically stretches to touch the poles */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 L10,5 L20,35 L30,10 L45,30 L60,5 L75,35 L90,10 L100,20' fill='none' stroke='%23ffffff' stroke-width='3'/%3E%3Cpath d='M0,20 L15,30 L25,5 L40,35 L55,10 L70,30 L85,5 L100,20' fill='none' stroke='%23aaffff' stroke-width='1.5'/%3E%3Cpath d='M0,20 L5,20 L15,10 L25,25 L35,15 L50,20 L65,10 L80,25 L95,20 L100,20' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* Blinding white/blue core */
    filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 15px #00f0ff) drop-shadow(0 0 30px #00f0ff);
}

.monitor-container:hover .monitor-bezel::before {
    /* Fast, erratic animation */
    animation: frankensteinSpark 0.8s infinite;
}

/* This dynamically shrinks the width to perfectly match the V-shape gap as it travels down.
  The rapid scaleY flips cause violent, erratic jittering. 
*/
@keyframes frankensteinSpark {
    0%   { top: -75px; width: 145px; opacity: 1; transform: translateX(-50%) scaleY(1); }
    10%  { top: -68px; width: 138px; opacity: 0; }
    15%  { top: -65px; width: 135px; opacity: 1; transform: translateX(-50%) scaleY(-1.2); filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 40px #00f0ff); }
    25%  { top: -58px; width: 128px; opacity: 1; transform: translateX(-50%) scaleY(1.5); }
    35%  { top: -50px; width: 120px; opacity: 0.8; transform: translateX(-50%) scaleY(-0.8); }
    40%  { top: -45px; width: 115px; opacity: 0; }
    45%  { top: -40px; width: 110px; opacity: 1; transform: translateX(-50%) scaleY(1.3); filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #00f0ff); }
    55%  { top: -32px; width: 102px; opacity: 1; transform: translateX(-50%) scaleY(-1.1); }
    65%  { top: -25px; width: 95px; opacity: 1; transform: translateX(-50%) scaleY(1.4); }
    70%  { top: -20px; width: 90px; opacity: 0; }
    75%  { top: -15px; width: 85px; opacity: 1; transform: translateX(-50%) scaleY(-1.5); filter: drop-shadow(0 0 25px #fff) drop-shadow(0 0 50px #00f0ff); }
    85%  { top: -8px;  width: 78px; opacity: 1; transform: translateX(-50%) scaleY(1); }
    90%  { top: -2px;  width: 72px; opacity: 0; }
    100% { top: 5px;   width: 65px; opacity: 0; }
}

/* PRESERVED HARDWARE BEZEL AND BUTTONS */
.monitor-bezel { width: 100%; height: 100%; background: #0d0d0d; border-radius: 10px; padding: 10px 10px 24px 10px; box-shadow: inset 0 0 15px #000; position: relative; }

.monitor-hardware-buttons { position: absolute; bottom: 8px; right: 15px; display: flex; gap: 8px; z-index: 10; }
.hw-btn { width: 14px; height: 6px; background: #222; border-radius: 2px; box-shadow: inset 1px 1px 2px rgba(255,255,255,0.1), 1px 1px 3px rgba(0,0,0,1); }
.hw-power { background: #400; transition: all 0.2s; }
.monitor-container:hover .hw-power { background: #ff0000; box-shadow: 0 0 10px #ff0000, inset 1px 1px 3px #fff; }

/* BRIGHTER IDLE MONITORS WITH RESTORED HUM */
.mini-crt-screen { 
    width: 100%; height: 100%; 
    background: #114a3d; 
    border-radius: 40% / 10%; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; 
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), inset 0 0 15px rgba(0, 255, 204, 0.4); 
    border: 2px solid #001100; transition: background 0.3s ease; 
    animation: idleMonitorHum 0.1s infinite alternate ease-in-out; /* Sped up to create a visible hum */
}

@keyframes idleMonitorHum {
    0% { filter: brightness(1) contrast(1); }
    100% { filter: brightness(1.3) contrast(1.1); }
}

.monitor-static {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="2.5" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.8"/></svg>');
    opacity: 0.55; /* Raised opacity to make it visible */
    z-index: 1; mix-blend-mode: color-dodge; pointer-events: none;
    animation: idleStaticSizzle 0.1s steps(2) infinite; /* Sped up for visual sizzle */
}

@keyframes idleStaticSizzle {
    0% { background-position: 0 0; }
    100% { background-position: 15px 15px; } /* Increased movement */
}

/* PRESERVED ICON CSS */
.screen-content { position: relative; z-index: 3; padding: 20px; }
.custom-pixel-icon { 
    width: 60px; height: 60px; margin-bottom: 15px; 
    filter: grayscale(20%) brightness(1); 
    transition: all 0.3s ease; display: block; margin-left: auto; margin-right: auto; 
}

/* BRIGHTER IDLE TYPOGRAPHY */
.screen-content h3 { font-size: 1.5rem; margin-bottom: 10px; color: #55ffcc; text-shadow: 0 0 5px #55ffcc; letter-spacing: 2px; transition: all 0.3s ease; }
.screen-content p { font-size: 0.95rem; color: #55ffcc; text-shadow: 0 0 2px #55ffcc; line-height: 1.4; font-family: monospace; transition: all 0.3s ease; }

/* EXTREME HOVER STATES */
.monitor-container:hover .mini-crt-screen { background: #16755a; animation: monitorFlicker 0.15s infinite; }
@keyframes monitorFlicker { 0%, 100% { filter: brightness(1) contrast(1); } 50% { filter: brightness(1.4) contrast(1.3); } }

.monitor-container:hover .monitor-static { opacity: 0.6; animation: staticFlicker 0.05s infinite; }
@keyframes staticFlicker { 0% { background-position: 0 0; } 100% { background-position: 10px 10px; } }

.monitor-container:hover .custom-pixel-icon { filter: drop-shadow(0 0 15px #00ffcc) grayscale(0%) brightness(1.2); animation: floatIcon 1.5s infinite alternate ease-in-out; }
.monitor-container:hover .screen-content h3, .monitor-container:hover .screen-content p { color: #00ffcc; text-shadow: 0 0 10px #00ffcc; }
@keyframes floatIcon { from { transform: translateY(0); } to { transform: translateY(-5px); } }

.floppy-slider { transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.monitor-container:hover .floppy-slider { transform: translateX(18px); }

.signal-arc { opacity: 0; }
.monitor-container:hover .signal-arc { animation: signalPing 1.5s infinite ease-out; }
.signal-1 { animation-delay: 0s; }
.signal-2 { animation-delay: 0.25s; }
.signal-3 { animation-delay: 0.5s; }
@keyframes signalPing { 0% { opacity: 0; } 30% { opacity: 1; filter: drop-shadow(0 0 8px #00f0ff); } 100% { opacity: 0; } }

@media (max-width: 768px) {
    .workbench { flex-direction: column; border-bottom: none; gap: 30px; }
}

/* =========================================
   HEAVY INDUSTRIAL ENGINEERING PANEL
   ========================================= */

/* =========================================
   HEAVY INDUSTRIAL ENGINEERING PANEL
   ========================================= */

.heavy-machinery-panel {
    width: 100%; max-width: 1400px; margin: 0 auto; min-height: 800px;
    /* Vibrant, authentic Seafoam Green metallic texture */
    background-color: #559e7a;
    background-image: 
        url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.12" style="mix-blend-mode: multiply;"/></svg>'),
        linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.3) 100%);
    border: 12px solid #356e52;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 
        inset 4px 4px 15px rgba(255,255,255,0.3),
        inset -8px -8px 25px rgba(0,0,0,0.6),
        0 30px 60px rgba(0,0,0,0.95),
        0 0 50px rgba(57, 255, 20, 0.1); 
    position: relative;
    overflow: hidden;
}

/* SYSTEM GLITCH OVERRIDE (Triggered by Sync Knob) */
.system-glitch .status-light { animation: panicBlink 0.05s infinite !important; }
.system-glitch .btn-core { animation: panicBlink 0.08s infinite !important; }
.system-glitch .crt-glass { filter: brightness(1.5) contrast(2) hue-rotate(90deg) !important; }
.system-glitch .crt-internal-scanline { animation-duration: 0.1s !important; }

@keyframes panicBlink {
    0% { filter: brightness(0.2); box-shadow: none; }
    100% { filter: brightness(3); box-shadow: 0 0 30px currentColor, 0 0 60px #fff; }
}

/* Real-looking Philip's head screws */
.screw {
    position: absolute; width: 16px; height: 16px;
    background: linear-gradient(135deg, #a0a0a0, #444);
    border-radius: 50%; border: 1px solid #111;
    box-shadow: inset 1px 1px 3px rgba(255,255,255,0.6), 3px 3px 5px rgba(0,0,0,0.8);
}
.screw::after { content: ''; position: absolute; top: 6px; left: 2px; width: 10px; height: 2px; background: #222; transform: rotate(45deg); box-shadow: 0 1px 0 rgba(255,255,255,0.3); }
.screw::before { content: ''; position: absolute; top: 2px; left: 6px; width: 2px; height: 10px; background: #222; transform: rotate(45deg); box-shadow: 1px 0 0 rgba(255,255,255,0.3); }

.top-left { top: 16px; left: 16px; transform: rotate(15deg); }
.top-right { top: 16px; right: 16px; transform: rotate(85deg); }
.bottom-left { bottom: 16px; left: 16px; transform: rotate(-35deg); }
.bottom-right { bottom: 16px; right: 16px; transform: rotate(115deg); }

/* Stamped Metal Header */
.panel-header {
    background: #1a1c1a; border: 5px solid #111; border-radius: 10px;
    padding: 15px 30px; margin-bottom: 30px; position: relative;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: inset 0 8px 20px rgba(0,0,0,0.9), 0 3px 0 rgba(255,255,255,0.2);
}
.panel-header h2 { font-family: 'Arial Black', sans-serif; font-size: 28px; color: #a3b5a3; text-shadow: -2px -2px 0 #000, 1px 1px 0 rgba(255,255,255,0.1); margin: 0; letter-spacing: 2px; }

/* Hazard Striping */
.warning-stripe {
    position: absolute; bottom: -5px; left: 0; width: 100%; height: 10px;
    background: repeating-linear-gradient(45deg, #000, #000 15px, #ccbb00 15px, #ccbb00 30px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.machinery-grid { display: flex; gap: 25px; align-items: stretch; position: relative; z-index: 5; }

/* Deep Sunk Sub-panels */
.machine-module {
    background: linear-gradient(to bottom, #448263, #356b50);
    border: 4px solid #28573f; border-radius: 8px; padding: 20px;
    box-shadow: inset 3px 3px 8px rgba(255,255,255,0.15), inset -6px -6px 15px rgba(0,0,0,0.4), 8px 8px 20px rgba(0,0,0,0.7);
    position: relative; display: flex; flex-direction: column;
}

.routing-module { flex: 0 0 280px; }
.display-module { flex: 1; background: #2f3830; } 
.overrides-module { flex: 0 0 340px; }

/* Engraved Nameplates */
.module-title-plate {
    background: #050505; color: #ddd; font-family: 'Arial', sans-serif; font-weight: bold; font-size: 14px;
    text-align: center; padding: 8px; border: 3px solid #000; border-radius: 4px;
    box-shadow: inset 0 0 10px #000, 0 1px 0 rgba(255,255,255,0.2); margin-bottom: 20px; letter-spacing: 2px;
}
.bank-label { font-family: monospace; font-size: 11px; color: #8a9c8a; border-bottom: 2px solid #3a453c; padding-bottom: 4px; margin-bottom: 15px; }

/* --- 3D PULSING PUSH BUTTONS --- */
.mech-btn-row { display: flex; align-items: center; gap: 15px; margin-bottom: 16px; }
.mech-btn-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.grid-bank { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }

.mech-btn {
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, #444, #000); 
    border: 2px solid #000; padding: 6px; cursor: pointer; outline: none;
    box-shadow: 0 8px 15px rgba(0,0,0,0.8), inset 1px 1px 3px rgba(255,255,255,0.3);
    transition: transform 0.1s; display: flex; justify-content: center; align-items: center;
}

.btn-core {
    width: 100%; height: 100%; border-radius: 50%;
    box-shadow: inset 2px 2px 6px rgba(255,255,255,0.4), inset -2px -2px 8px rgba(0,0,0,0.8), 0 2px 5px rgba(0,0,0,0.9);
    transition: all 0.1s;
    /* Smoother, fluid, liquid-like pulsing */
    animation: btnStandby 3s infinite alternate ease-in-out;
}

/* Colors */
.btn-core.red { background: radial-gradient(circle at 30% 30%, #ff4d4d, #990000); color: #ff0000; }
.btn-core.blue { background: radial-gradient(circle at 30% 30%, #4da6ff, #004d99); color: #00f0ff; }
.btn-core.pink { background: radial-gradient(circle at 30% 30%, #ff66b3, #99004d); color: #ff007f; }
.btn-core.white { background: radial-gradient(circle at 30% 30%, #ffffff, #888888); color: #ffffff; }
.btn-core.purple { background: radial-gradient(circle at 30% 30%, #b366ff, #4d0099); color: #b000ff; }
.btn-core.orange { background: radial-gradient(circle at 30% 30%, #ffb366, #994d00); color: #ff9900; }
.btn-core.green { background: radial-gradient(circle at 30% 30%, #66ff66, #009900); color: #39ff14; }
.btn-core.yellow { background: radial-gradient(circle at 30% 30%, #ffff66, #999900); color: #ffea00; }

@keyframes btnStandby {
    0% { filter: brightness(0.4); box-shadow: inset 2px 2px 6px rgba(255,255,255,0.2), 0 0 2px currentColor; }
    100% { filter: brightness(1.3); box-shadow: inset 2px 2px 6px rgba(255,255,255,0.6), 0 0 14px currentColor; }
}

/* Intense strobe on active press */
.mech-btn:active { transform: translateY(6px); box-shadow: 0 2px 4px rgba(0,0,0,0.8), inset 1px 1px 2px rgba(255,255,255,0.2); }
.mech-btn.active .btn-core { animation: btnStrobe 0.15s infinite alternate; }

@keyframes btnStrobe {
    0% { filter: brightness(1.2); box-shadow: inset 4px 4px 8px rgba(255,255,255,0.8), 0 0 15px currentColor; }
    100% { filter: brightness(2.5); box-shadow: inset 6px 6px 12px rgba(255,255,255,1), 0 0 40px currentColor, 0 0 80px currentColor; }
}

.mech-label { font-family: 'Arial', sans-serif; font-weight: bold; font-size: 11px; color: #fff; text-shadow: 1px 1px 0 #000, 0 0 5px rgba(255,255,255,0.2); }

/* --- CENTER CRT SCREEN --- */
.indicator-bar { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; background: #111; padding: 12px; border-radius: 8px; border: 3px solid #050505; box-shadow: inset 0 0 10px #000; }
.status-light { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #000; background: #330000; box-shadow: inset 1px 1px 4px rgba(255,255,255,0.3); transition: all 0.1s; }
.light-label { font-family: monospace; font-size: 11px; color: #777; margin-left: -10px; font-weight: bold; }
.status-light.on-green { background: #39ff14; box-shadow: 0 0 20px #39ff14, inset 2px 2px 6px #fff; }
.status-light.on-red { background: #ff0000; box-shadow: 0 0 20px #ff0000, inset 2px 2px 6px #fff; }

.crt-bezel {
    flex: 1; background: #111; border-radius: 24px; padding: 30px;
    box-shadow: inset 0 0 30px #000, 0 15px 30px rgba(0,0,0,0.7);
    border-top: 6px solid #222; border-bottom: 6px solid #000; border-left: 3px solid #1a1a1a; border-right: 3px solid #1a1a1a;
}
.crt-glass {
    width: 100%; height: 100%; background: #010402; border-radius: 35% / 4%;
    box-shadow: inset 0 0 60px rgba(0,0,0,1), 0 0 0 12px #050505, 0 0 30px rgba(57, 255, 20, 0.4);
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(57,255,20,0.04) 2px, rgba(57,255,20,0.04) 4px);
    background-size: 100% 4px;
    
    /* Removed the ambientGlitch loop! It only hums now. */
    animation: crtHum 2s infinite alternate ease-in-out; 
}

@keyframes crtHum {
    0% { filter: brightness(0.95); }
    100% { filter: brightness(1.15) contrast(1.05); }
}

/* NEW: The JS-Triggered Random Glitch Class */
.random-glitch-active {
    animation: randomGlitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

@keyframes randomGlitch {
    0% { filter: hue-rotate(0deg) contrast(1) brightness(1); transform: skewX(0deg) translate(0, 0); }
    20% { filter: hue-rotate(40deg) contrast(1.5) brightness(1.3); transform: skewX(2deg) translate(2px, 1px); }
    40% { filter: hue-rotate(-30deg) contrast(0.8) brightness(0.7); transform: skewX(-2deg) translate(-2px, -1px); }
    60% { filter: hue-rotate(90deg) contrast(2.5) brightness(1.8); transform: skewX(4deg) translate(-3px, 2px); }
    80% { filter: hue-rotate(-60deg) contrast(0.5) brightness(0.5); transform: skewX(-3deg) translate(3px, -2px); }
    100% { filter: hue-rotate(0deg) contrast(1) brightness(1); transform: skewX(0deg) translate(0, 0); }
}

/* AMPED UP GLITCH: Physical tearing, bright flashes, and harsh color warps */
@keyframes ambientGlitch {
    0%, 82% { filter: hue-rotate(0deg) contrast(1) brightness(1); transform: skewX(0deg) translate(0, 0); }
    83% { filter: hue-rotate(40deg) contrast(1.5) brightness(1.3); transform: skewX(1deg) translate(2px, 1px); }
    85% { filter: hue-rotate(-30deg) contrast(0.8) brightness(0.7); transform: skewX(-1deg) translate(-2px, -1px); }
    87%, 94% { filter: hue-rotate(0deg) contrast(1) brightness(1); transform: skewX(0deg) translate(0, 0); }
    95% { filter: hue-rotate(90deg) contrast(2.5) brightness(1.8); transform: skewX(4deg) translate(-3px, 2px); }
    96% { filter: hue-rotate(-60deg) contrast(0.5) brightness(0.5); transform: skewX(-3deg) translate(3px, -2px); }
    98%, 100% { filter: hue-rotate(0deg) contrast(1) brightness(1); transform: skewX(0deg) translate(0, 0); }
}

/* Hard, realistic plastic screen protector glare */
.screen-glare-curved {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.03) 31%, rgba(255,255,255,0.12) 34%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 100%);
    pointer-events: none; z-index: 10; mix-blend-mode: screen;
}

/* Internal Sweeping Laser */
.crt-internal-scanline {
    position: absolute; top: 0; left: 0; width: 100%; height: 10px;
    background: rgba(57, 255, 20, 0.3);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.6);
    pointer-events: none; z-index: 9; opacity: 0.8;
    animation: internalScan 4s linear infinite;
}

@keyframes internalScan {
    0% { transform: translateY(-50px); }
    100% { transform: translateY(600px); }
}

.dos-inner-content { flex: 1; padding: 35px; overflow-y: auto; z-index: 5; }
.dos-inner-content::-webkit-scrollbar { display: none; } 
.lofi-logo-container { font-family: 'VT323', monospace; font-size: 16px; line-height: 1.1; margin-bottom: 20px; white-space: pre; font-weight: bold; letter-spacing: 2px;}
.dos-body { font-family: 'VT323', monospace; font-size: 28px; color: #39ff14; line-height: 1.4; text-shadow: 0 0 10px rgba(57, 255, 20, 0.9); }

/* --- RIGHT MODULE (GAUGES & DRAGGABLE KNOBS) --- */
.gauge-container {
    background: #0a0a0a; padding: 18px; border-radius: 10px; border: 4px solid #1a1a1a;
    box-shadow: inset 0 0 20px #000, 0 2px 0 rgba(255,255,255,0.15); margin-bottom: 20px; position: relative;
}
.gauge-container canvas { width: 100%; background: #020502; border-radius: 6px; box-shadow: inset 0 0 15px rgba(57, 255, 20, 0.3); border: 1px solid #111; }
.gauge-overlay { position: absolute; bottom: 8px; right: 25px; font-family: monospace; font-size: 11px; color: #555; font-weight: bold; }

.knob-rack { display: flex; justify-content: space-around; margin-top: 30px; background: #222522; padding: 20px; border-radius: 10px; border: 3px solid #111; box-shadow: inset 0 8px 15px #000; }
.analog-knob { display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: grab; }
.analog-knob:active { cursor: grabbing; }

.knob-dial {
    width: 60px; height: 60px; border-radius: 50%;
    background: conic-gradient(#666, #999, #444, #999, #666);
    border: 3px solid #000; box-shadow: 0 12px 15px rgba(0,0,0,0.9), inset 0 3px 4px rgba(255,255,255,0.6);
    position: relative; 
    transform-origin: center center;
}
/* Deep physical indent for the dial marker */
.knob-marker { position: absolute; top: 5px; left: 50%; width: 6px; height: 16px; background: #0a0a0a; transform: translateX(-50%); border-radius: 3px; box-shadow: inset 2px 2px 4px rgba(0,0,0,1), 1px 0 0 rgba(255,255,255,0.4); }
.knob-lbl { font-family: 'Arial', sans-serif; font-size: 12px; font-weight: bold; color: #a1b0a1; text-shadow: -1px -1px 0 #000; letter-spacing: 1px; }

.analog-toggle-btn {
    background: linear-gradient(to bottom, #d32f2f, #922b21); border: 4px solid #111; border-radius: 8px;
    color: #fff; font-family: 'Arial Black', sans-serif; font-size: 16px; padding: 12px 25px; cursor: pointer;
    box-shadow: 0 8px 0 #4a1510, 0 15px 20px rgba(0,0,0,0.6), inset 0 2px 3px rgba(255,255,255,0.5); text-shadow: 1px 1px 3px #000;
}
.analog-toggle-btn:active { transform: translateY(8px); box-shadow: 0 0px 0 #4a1510, 0 3px 8px rgba(0,0,0,0.7), inset 0 3px 8px rgba(0,0,0,0.8); }

@media (max-width: 1200px) {
    .machinery-grid { flex-direction: column; }
    .routing-module, .overrides-module { flex: none; }
    .crt-bezel { height: 450px; }
}

/* STRIPE ELEMENT FOCUS STATES */
.StripeElement--focus {
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.StripeElement--invalid {
    border-color: var(--neon-pink) !important;
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.3);
}

/* --- BULLETPROOF MODAL VISIBILITY LOCK --- */
#missionSuccessModal.secure-hidden-modal {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

#missionSuccessModal.secure-hidden-modal.mission-active {
    display: flex !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    animation: modalFadeIn 0.3s ease-out forwards;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* ==========================================
   FINAL CAPTAIN'S CHAIR POP-UP UI
   ========================================== */

/* The Pop-Up Box */
.synth-popup-box {
    position: relative; 
    width: 85vw; max-width: 1100px; 
    height: 70vh; max-height: 750px;
    background: #020005; 
    border: 6px solid var(--neon-pink); 
    border-radius: 12px;
    box-shadow: 0 0 50px rgba(255, 0, 127, 0.4), 0 20px 40px rgba(0,0,0,0.9);
    overflow: hidden; 
    transform: translate(0,0); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Reduced Ambient Cruising */
.cockpit-turbulence { animation: gentleCruise 3s ease-in-out infinite alternate; }
@keyframes gentleCruise {
    0% { transform: translateY(-2px); }
    100% { transform: translateY(2px); }
}

/* Intermittent Asteroid Strike Animation */
.asteroid-strike { animation: violentShake 0.6s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes violentShake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-8px, 12px) rotate(-1deg); }
    30% { transform: translate(12px, -8px) rotate(1deg); }
    50% { transform: translate(-12px, 4px) rotate(-0.5deg); }
    70% { transform: translate(8px, -4px) rotate(0.5deg); }
    90% { transform: translate(-4px, 4px) rotate(-0.2deg); }
}

/* THICK METAL WINDOW FRAMING */
.synth-window-struts { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px rgba(0,0,0,1); }
.s-top { position: absolute; top: 0; left: 0; width: 100%; height: 35px; background: #050505; border-bottom: 6px solid #111; box-shadow: 0 10px 30px rgba(0,0,0,0.9); }
.s-left-angle { position: absolute; top: -10%; left: 8%; width: 120px; height: 120%; background: #050505; border-right: 8px solid #1a1a1a; transform: rotate(28deg); box-shadow: 10px 0 30px rgba(0,0,0,0.9); }
.s-right-angle { position: absolute; top: -10%; right: 8%; width: 120px; height: 120%; background: #050505; border-left: 8px solid #1a1a1a; transform: rotate(-28deg); box-shadow: -10px 0 30px rgba(0,0,0,0.9); }

/* Foreground Pilot Seats */
.pilot-seat {
    position: absolute; bottom: -20px; width: 220px; height: 50%;
    background: linear-gradient(135deg, #111 0%, #000 100%);
    border: 5px solid #222; border-bottom: none;
    box-shadow: inset 10px 10px 30px rgba(0,0,0,0.9), 0 -10px 30px rgba(0,0,0,0.9);
}
.seat-left { left: -10px; border-radius: 60px 20px 0 0; transform: perspective(800px) rotateY(20deg); }
.seat-right { right: -10px; border-radius: 20px 60px 0 0; transform: perspective(800px) rotateY(-20deg); }

/* 3D Angled Dashboard */
.synth-dashboard-wrapper {
    position: absolute; bottom: -10px; left: 0; width: 100%; height: 42%; min-height: 250px;
    perspective: 1200px; pointer-events: none; display: flex; justify-content: center;
}

.heavy-machinery-angled {
    width: 85%; height: 100%; 
    transform: rotateX(35deg); transform-origin: bottom center;
    background-color: #559e7a;
    background-image: 
        url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.12" style="mix-blend-mode: multiply;"/></svg>'),
        linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.3) 100%);
    border: 10px solid #28573f; border-bottom: none; border-radius: 16px 16px 0 0; 
    padding: 20px; display: flex; justify-content: space-between; gap: 15px;
    box-shadow: inset 0 20px 40px rgba(0,0,0,0.9), 0 -20px 50px rgba(0,240,255,0.2);
    pointer-events: auto;
}

/* MASSIVE CENTER MODULE TO FIT TEXT */
.tactical-wing, .overrides-module { flex: 0.6 !important; display: flex; flex-direction: column; justify-content: space-between; padding: 10px !important; }
.display-module { flex: 3.5 !important; transform: translateZ(15px); padding: 15px !important; }

/* CLEAN BUTTON FIX */
.clean-btn::before, .clean-btn::after { display: none !important; }

/* --- CIRCULAR RADAR SCOPE --- */
.radar-circular-scope {
    width: 60px; height: 60px; border-radius: 50%;
    background: #001122; border: 4px solid #111; 
    box-shadow: 0 0 0 3px var(--neon-cyan), inset 0 0 20px #000;
    position: relative; overflow: hidden;
}
.radar-rings {
    position: absolute; inset: 0; border-radius: 50%;
    background-image: radial-gradient(transparent 30%, rgba(0, 240, 255, 0.2) 32%, transparent 34%, transparent 60%, rgba(0, 240, 255, 0.2) 62%, transparent 64%);
}
.radar-sweep-cyan { background: conic-gradient(from 0deg, rgba(0,240,255,0) 70%, rgba(0,240,255,0.8) 100%) !important; }

.radar-sweep-pink { 
    position: absolute; inset: 0; width: 100%; height: 100%; 
    border-radius: 50%; 
    background: conic-gradient(from 0deg, rgba(255,0,127,0) 70%, rgba(255,0,127,0.8) 100%); 
    animation: radarSpin 2s linear infinite; 
}
@keyframes radarSpin { 100% { transform: rotate(360deg); } }
.radar-bogey { position: absolute; width: 4px; height: 4px; background: #39ff14; border-radius: 50%; box-shadow: 0 0 8px #39ff14; z-index: 10; animation: bogeyBlink 0.5s infinite alternate; }
@keyframes bogeyBlink { 0% { opacity: 0.2; } 100% { opacity: 1; } }

/* --- HEAVY ROCKER TILT BUTTONS --- */
.heavy-rocker-btn {
    width: 100px; height: 35px; background: linear-gradient(to bottom, #333, #111);
    border: 3px solid #000; border-radius: 6px; color: var(--neon-cyan);
    font-family: 'Press Start 2P', monospace; font-size: 9px; text-shadow: 1px 1px 0 #000;
    box-shadow: 0 4px 0 #0a0a0a, inset 0 2px 4px rgba(255,255,255,0.2); cursor: pointer; transition: all 0.1s;
}
.heavy-rocker-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #0a0a0a; background: var(--neon-cyan); color: #000; text-shadow: none; }

/* --- HAZARD ABORT BUTTON --- */
.hazard-abort-btn {
    width: 100%; padding: 12px; font-size: 11px;
    background: repeating-linear-gradient(45deg, #ffea00, #ffea00 10px, #ccbb00 10px, #ccbb00 20px);
    border: 4px solid #111; border-radius: 6px; color: #111; font-weight: bold;
    box-shadow: 0 4px 0 #000, inset 0 0 10px rgba(0,0,0,0.5); text-shadow: none;
    font-family: 'Press Start 2P', monospace; cursor: pointer; transition: all 0.1s;
}
.hazard-abort-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #000; }

/* --- VIOLENT SHIP TILT CLASSES --- */
.ship-tilt-left { transform: rotateZ(-4deg) translateX(-30px) translateY(5px) !important; }
.ship-tilt-right { transform: rotateZ(4deg) translateX(30px) translateY(5px) !important; }
.stick-tilt-left { transform: rotate(-20deg) !important; }
.stick-tilt-right { transform: rotate(20deg) !important; }

/* --- PERFECTLY CENTERED HORIZONTAL Z-AXIS LASERS --- */
.synth-laser-blast {
    position: absolute; 
    bottom: 22%; 
    left: 50%; /* Both lasers anchor perfectly to the center of the ship */
    width: 400px;  
    height: 50px;  
    border-radius: 25px; 
    z-index: 5;
    animation: firePerspectiveLaser 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 
}

.laser-pink { background: #fff; box-shadow: 0 0 30px var(--neon-pink), 0 0 80px var(--neon-pink); }
.laser-cyan { background: #fff; box-shadow: 0 0 30px var(--neon-cyan), 0 0 80px var(--neon-cyan); }

@keyframes firePerspectiveLaser {
    0% { transform: translate3d(var(--start-x), 0, 0) rotate(var(--angle)) scale(1); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translate3d(var(--aim-x), -600px, -2000px) rotate(var(--angle)) scale(0.1); opacity: 0; }
}

@media (max-width: 768px) {
    .heavy-machinery-angled { flex-direction: column; transform: rotateX(20deg); height: auto; width: 95%; }
    .s-left-angle, .s-right-angle, .pilot-seat { display: none; }
}

/* --- BULLETPROOF MODAL VISIBILITY LOCK --- */
#missionSuccessModal.secure-hidden-modal {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

#missionSuccessModal.secure-hidden-modal.mission-active {
    display: flex !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    animation: modalFadeIn 0.3s ease-out forwards;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* --- FINAL ALIGNMENT & TYPOGRAPHY FIXES --- */

/* Tightens the internal padding of the Left Wing */
.tactical-wing {
    padding: 8px !important;
}

/* Reduces the gap between the Fire and Radar buttons */
.tactical-wing .button-bank {
    gap: 8px !important;
}

/* Slightly scales down the buttons strictly on the Left Wing so they don't overflow */
.tactical-wing .mech-btn {
    width: 42px !important;
    height: 42px !important;
}

/* Forces long email addresses to break cleanly at the @ symbol */
#modalEmailDisplay {
    word-break: normal !important; /* Changed from break-all */
    overflow-wrap: anywhere !important; /* Allows it to break elsewhere ONLY if the first half is still too long */
    white-space: normal !important;
    display: block !important;
    width: 100% !important;
}

/* --- FORMAT DATABASE SIDE DRAWER --- */
#formatInterface.side-drawer {
    display: block !important; 
    position: absolute !important;
    top: 0 !important;
    left: auto !important; 
    right: -100%; 
    width: 45%;
    height: 100%;
    z-index: 99999 !important;
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* RESTORED ARCADE FRAME CURVES */
    border-radius: 40% / 8% !important;
    box-shadow: inset 0 0 100px rgba(0,0,0,1), -10px 0 50px rgba(0,0,0,0.9) !important;
    border-left: 4px solid var(--neon-cyan) !important;
    background: rgba(2, 6, 4, 0.95) !important; 
}

#formatInterface.side-drawer.open {
    right: 0 !important;
}

@media (max-width: 1024px) {
    #formatInterface.side-drawer { width: 60% !important; }
}
@media (max-width: 768px) {
    #formatInterface.side-drawer { width: 95% !important; }

/* --- SYSTEM SETTINGS HUB MOBILE FIXES --- */
    /* Release the absolute positioning so text flows naturally */
    #systemSettingsHub .config-header {
        position: relative !important;
        top: 0 !important;
        right: auto !important;
        left: auto !important;
        margin-bottom: 10px !important;
    }
    
    .hub-header p { 
        margin-top: 15px !important; 
    }
    
    /* Shrink the monitors to fit mobile width */
    .workbench { 
        width: 100% !important;
        gap: 20px !important; 
        margin-top: 10px !important; 
    }
    
    .monitor-container { 
        width: 100% !important; 
        height: auto !important; 
        min-height: 340px !important; 
        padding: 10px !important;
    }

    /* --- FORMAT DATABASE MOBILE FIXES --- */
    /* Shrink the chunky physical buttons */
    .arcade-round-btn { 
        width: 60px !important; 
        height: 60px !important; 
    }
    
    .arcade-btn-label { 
        font-size: 9px !important; 
    }
    
    /* Lock the canvas height and let the sides crop gracefully */
    #formatLibraryCanvas, .action-vignette-canvas {
        height: 220px !important; 
        object-fit: cover !important; 
    }

/* Make the System Settings Hub scrollable on mobile */
    #systemSettingsHub {
        justify-content: flex-start !important;
        overflow-y: auto !important;
        padding-top: 20px !important;
        padding-bottom: 80px !important; /* Gives plenty of room below the bottom monitor */
    }
}

/* =========================================
   DEPLOYMENT CONSOLE ALIGNMENT FIXES
   ========================================= */

/* Stop the Abort button from breaking out of the bezel */
.heavy-machinery-panel .panel-header {
    flex-wrap: wrap;
    gap: 15px;
}

/* Dynamically shrink the title text before it forces the button out */
.heavy-machinery-panel .panel-header h2 {
    font-size: clamp(16px, 3vw, 28px);
}

/* Add extra space at the bottom of modules so buttons clear the screws */
.machine-module {
    padding-bottom: 45px !important; 
}

/* =========================================
   CAPTAIN'S CHAIR MOBILE OPTIMIZATION (RESTORED CLEAN LAYOUT)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Modal Container */
    .synth-popup-box {
        width: 95vw !important; height: 90vh !important; max-height: 90vh !important; border-width: 4px !important;
        display: flex !important; flex-direction: column !important; justify-content: flex-end !important;
    }

    /* 2. Window Framing */
    .synth-window-struts,
    .s-top,
    .s-left-angle, 
    .s-right-angle { 
        display: block !important; opacity: 1 !important; visibility: visible !important; 
    }
    .s-left-angle { left: -20px !important; width: 60px !important; transform: rotate(15deg) !important; z-index: 1 !important; }
    .s-right-angle { right: -20px !important; width: 60px !important; transform: rotate(-15deg) !important; z-index: 1 !important; }

    /* 3. Base Console Wrapper */
    .synth-dashboard-wrapper {
        position: relative !important; height: auto !important; bottom: 0 !important; perspective: none !important; z-index: 50 !important; display: block !important;
    }

    /* 4. The Main Console Plate */
    #missionSuccessModal .heavy-machinery-angled {
        width: 100% !important; height: auto !important; flex-direction: column !important;
        transform: none !important; padding: 15px !important; gap: 15px !important; display: flex !important;
        border-radius: 12px 12px 0 0 !important; overflow: visible !important;
    }

    /* 5. Flatten Wrappers (Now includes button banks to let the Fire button out) */
    #missionSuccessModal .machine-module,
    #missionSuccessModal .overrides-module,
    #missionSuccessModal .display-module,
    #missionSuccessModal .tactical-wing,
    #missionSuccessModal .button-bank,
    #missionSuccessModal .mech-btn-row {
        display: contents !important;
    }

    /* 6. HIDE ALL THE FLUFF */
    #missionSuccessModal .crt-bezel:first-child, /* Left monitor */
    #missionSuccessModal .mech-btn-row:last-child, /* Radar Shift button row */
    #missionSuccessModal .grid-bank, /* SYS/EMG/SYNC buttons */
    #missionSuccessModal .module-title-plate, 
    #missionSuccessModal .panel-header,
    #missionSuccessModal .gauge-container, 
    #missionSuccessModal .knob-rack, 
    #missionSuccessModal .radar-circular-scope,
    #missionSuccessModal .custom-pixel-icon,
    #missionSuccessModal .monitor-hardware-buttons,
    #missionSuccessModal .mech-label,
    #missionSuccessModal .screw {
        display: none !important;
    }

    /* 7. SET VERTICAL ORDER FOR THE SURVIVORS */
    #missionSuccessModal .dual-monitor-setup { order: 1 !important; display: block !important; width: 100% !important; height: auto !important; }
    
    /* MAGIC TRICK: Negative bottom margin pulls the flight stick row up around this button */
    #missionSuccessModal #ufoFireBtn { 
        order: 2 !important; display: flex !important; width: 60px !important; height: 60px !important; 
        margin: 5px auto -53px auto !important; z-index: 100 !important; position: relative !important; 
    }
    
    #missionSuccessModal .flight-stick-area { 
        order: 3 !important; display: flex !important; flex-direction: row !important; justify-content: space-between !important; 
        width: 100% !important; margin: 0 !important; padding: 0 !important; z-index: 50 !important; position: relative !important;
    }
    
    #missionSuccessModal #closeMissionModalBtn { 
        order: 4 !important; display: block !important; width: 100% !important; height: 55px !important; font-size: 16px !important; margin: 15px 0 0 0 !important; 
    }

    /* 8. FORMAT THE SINGLE RIGHT MONITOR (Restored from perfect patch) */
    #missionSuccessModal .crt-bezel:last-child {
        padding: 0 !important; border: 4px solid #111 !important; border-radius: 12px !important; 
        width: 100% !important; height: auto !important; box-shadow: inset 0 0 15px #000, 0 10px 20px rgba(0,0,0,0.8) !important;
    }
    
    #missionSuccessModal #monitor2 {
        height: auto !important; min-height: 150px !important; margin: 0 !important;
    }

    #missionSuccessModal .dos-inner-content {
        padding: 20px !important; display: flex !important; flex-direction: column !important; 
        justify-content: center !important; height: auto !important;
    }

    /* 9. INJECT "MISSION INITIATED" TEXT */
    #missionSuccessModal #monitor2 .dos-inner-content::before {
        content: "MISSION INITIATED";
        display: block !important;
        font-family: 'Press Start 2P', monospace !important;
        font-size: 16px !important;
        color: #ffea00 !important;
        text-shadow: 0 0 10px #ffea00 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }

    /* 10. TEXT SIZING SO IT DOESN'T CUT OFF */
    #missionSuccessModal #monitor2Sub {
        font-size: 12px !important; margin-bottom: 8px !important; white-space: normal !important; text-align: center !important;
    }
    
    #missionSuccessModal #modalEmailDisplay {
        font-size: 11px !important; word-wrap: break-word !important; white-space: normal !important; 
        width: 100% !important; text-align: center !important;
    }

    /* 11. TILT ROCKER SIZING (Leaves perfect 80px hole in center for Fire button) */
    #missionSuccessModal .heavy-rocker-btn {
        width: calc(50% - 40px) !important; height: 45px !important; font-size: 11px !important; margin: 0 !important;
    }

    /* 12. ALIGN LASERS */
    .synth-laser-blast { display: block !important; bottom: 240px !important; } 
    .laser-cyan { margin-left: -150px !important; }
    .laser-pink { margin-left: -50px !important; }
}

/* =========================================
   MINI ARCADE HARDWARE (SOLID PLASTIC & NEON)
   ========================================= */
.extended-intel-zone { margin-top: 60px; width: 100%; display: flex; flex-direction: column; gap: 80px; }
.intel-feature-row { display: flex; align-items: center; gap: 50px; width: 100%; }
.intel-feature-row.reverse-row { flex-direction: row-reverse; }

.mini-arcade-container {
    width: 320px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
    transform: perspective(800px) rotateY(15deg);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.9));
}
.reverse-row .mini-arcade-container { transform: perspective(800px) rotateY(-15deg); }
.mini-arcade-container:hover { transform: perspective(800px) rotateY(0deg) scale(1.08); z-index: 10; }

/* --- FLICKERING SOLID MARQUEES --- */
.mini-arcade-marquee {
    width: calc(100% + 16px); 
    margin: 0 -8px 15px -8px; /* FIXED: Removed the -28px top margin that was causing the clip */
    padding: 15px 0;
    text-align: center; font-family: 'Press Start 2P', monospace; font-size: 12px;
    border-radius: 8px 8px 0 0; border: 4px solid #111;
    background-color: #1a1a1a !important; 
    color: #fff;
    position: relative;
    z-index: 10;
}

.cyan-marquee { color: var(--neon-cyan); border-color: #005f66; animation: flickerCyan 4s infinite alternate; }
.pink-marquee { color: var(--neon-pink); border-color: #660033; animation: flickerPink 3.5s infinite alternate; }
.green-marquee { color: var(--neon-green); border-color: #1a660a; animation: flickerGreen 5s infinite alternate; }

@keyframes flickerCyan {
    0%, 20%, 24%, 55%, 58%, 82%, 84%, 88%, 90%, 96%, 98%, 100% { 
        text-shadow: 0 0 8px var(--neon-cyan); 
        box-shadow: inset 0 0 30px rgba(0,240,255,0.2), 0 5px 15px rgba(0,0,0,0.9); 
        color: #fff; 
    }
    21%, 23%, 56%, 57%, 83%, 89%, 97% { 
        text-shadow: none; 
        box-shadow: inset 0 0 0 rgba(0,240,255,0), 0 5px 15px rgba(0,0,0,0.9); 
        color: #444; 
    }
}

@keyframes flickerPink {
    0%, 15%, 18%, 42%, 46%, 72%, 74%, 78%, 80%, 86%, 88%, 100% { 
        text-shadow: 0 0 8px var(--neon-pink); 
        box-shadow: inset 0 0 30px rgba(255,0,127,0.2), 0 5px 15px rgba(0,0,0,0.9); 
        color: #fff; 
    }
    16%, 17%, 43%, 45%, 73%, 79%, 87% { 
        text-shadow: none; 
        box-shadow: inset 0 0 0 rgba(255,0,127,0), 0 5px 15px rgba(0,0,0,0.9); 
        color: #444; 
    }
}

@keyframes flickerGreen {
    0%, 30%, 35%, 62%, 64%, 68%, 70%, 92%, 94%, 100% { 
        text-shadow: 0 0 8px var(--neon-green); 
        box-shadow: inset 0 0 30px rgba(57,255,20,0.2), 0 5px 15px rgba(0,0,0,0.9); 
        color: #fff; 
    }
    31%, 34%, 63%, 69%, 93% { 
        text-shadow: none; 
        box-shadow: inset 0 0 0 rgba(57,255,20,0), 0 5px 15px rgba(0,0,0,0.9); 
        color: #444; 
    }
}

/* --- CRT SCREENS WITH SCANLINES --- */
.mini-arcade-cab {
    background-color: #151515 !important; border: 8px solid #2a2a35; border-radius: 4px 4px 0 0;
    padding: 20px; width: 100%; box-sizing: border-box; position: relative;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.9);
}
.mini-arcade-cab canvas {
    background-color: #020604 !important; border: 8px solid #000; border-radius: 8px;
    box-shadow: 0 0 20px currentColor; width: 100%; height: auto; aspect-ratio: 4/3; display: block;
}
.mini-arcade-cab::after {
    content: ''; position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; 
    background: linear-gradient(rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.3) 50%);
    background-size: 100% 4px; pointer-events: none; border-radius: 8px;
    box-shadow: inset 0 0 40px currentColor;
}
.glow-cyan .mini-arcade-cab::after { color: rgba(0, 240, 255, 0.3); }
.glow-pink .mini-arcade-cab::after { color: rgba(255, 0, 127, 0.3); }
.glow-green .mini-arcade-cab::after { color: rgba(57, 255, 20, 0.3); }

/* --- SOLID CONTROL PANEL --- */
.mini-arcade-panel {
    background-color: #2b2b36 !important; /* SOLID FIX */
    background-image: linear-gradient(to bottom, #3a3a45, #111) !important;
    width: 100%; height: 90px; border: 6px solid #1a1a22; border-top: none;
    border-radius: 0 0 16px 16px; display: flex; justify-content: space-between;
    padding: 10px 40px; box-sizing: border-box;
    transform: perspective(400px) rotateX(35deg); transform-origin: top;
    box-shadow: inset 0 5px 15px rgba(255,255,255,0.1), 0 25px 25px rgba(0,0,0,0.9);
}

/* --- GLOWING BUTTONS & JOYSTICK --- */
.ma-joy { width: 40px; height: 10px; background-color: #0a0a0a !important; border-radius: 50%; box-shadow: inset 0 0 5px #000; position: relative; margin-top: 20px; }
.ma-joy-stick { position: absolute; bottom: 5px; left: 14px; width: 12px; height: 45px; background-color: #888 !important; background-image: linear-gradient(to right, #444, #aaa, #444) !important; border-radius: 2px; }
.ma-joy-ball { 
    position: absolute; bottom: 40px; left: -4px; width: 48px; height: 48px; border-radius: 50%; 
    background-color: #ff0055 !important; background-image: radial-gradient(circle at 15px 15px, #ffea00, #ff0055) !important; 
    box-shadow: -5px 10px 10px rgba(0,0,0,0.6), 0 0 15px rgba(255, 0, 85, 0.8); 
}

.ma-btn-group { display: flex; gap: 15px; margin-top: 15px; }
.ma-btn { 
    width: 28px; height: 28px; border-radius: 50%; 
    box-shadow: inset -3px -3px 8px rgba(0,0,0,0.6), inset 3px 3px 8px rgba(255,255,255,0.4), 0 6px 0 #111, 0 10px 10px rgba(0,0,0,0.8); 
    animation: arcadeBtnPulse 1s infinite alternate ease-in-out;
}
@keyframes arcadeBtnPulse {
    0% { filter: brightness(0.8); box-shadow: inset -3px -3px 8px rgba(0,0,0,0.6), 0 6px 0 #111; }
    100% { filter: brightness(1.5); box-shadow: inset -3px -3px 8px rgba(0,0,0,0.6), 0 6px 0 #111, 0 0 20px currentColor; }
}
.btn-red { background-color: #ff0055 !important; color: #ff0055; } .btn-blue { background-color: #0088ff !important; color: #0088ff; } 
.btn-yellow { background-color: #ffea00 !important; color: #ffea00; } .btn-green { background-color: #39ff14 !important; color: #39ff14; } 
.btn-pink { background-color: #ff007f !important; color: #ff007f; } .btn-cyan { background-color: #00f0ff !important; color: #00f0ff; }

@media (max-width: 768px) {
    /* 1. Force kill any horizontal scrolling in the middle content area */
    .intel-content-zone, .extended-intel-zone { 
        overflow-x: hidden !important; 
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .intel-feature-row, .intel-feature-row.reverse-row { 
        flex-direction: column; 
        gap: 25px; 
        width: 100% !important; 
        box-sizing: border-box !important;
    }

    /* 2. Shrink the arcade container slightly so the glowing sign doesn't poke through the screen edge */
    .mini-arcade-container { 
        width: 92%; 
        max-width: 340px; 
        transform: none !important; 
        margin: 0 auto !important; 
    }

    /* 3. Scale down the control panel padding so the buttons fit on narrow phones */
    .mini-arcade-panel {
        padding: 10px 20px !important;
    }
}