/* ==========================================================================
   BASE MODAL STYLES
   ==========================================================================

   Universal styles shared across all modals:
   - Settings Modal (#settingsContent)
   - HUB Modal (#upgradeModal)
   - HowTo/Tutorial Modal
   - Confirmation Modals (#confirmationContent, #rebootModalContent)
   - `.modal-content` shells share `--modal-circuit-vein-layers` (DRY PCB trace underlay) + `--modal-bg`.
   - `--modal-corner-frame-layers` + `--modal-frame-rgb`: Mother-style inset bracket accents on all panel shells.
   - `#motherUI` (Core/Breach) and `#towerStatus` reuse the same vein + corner variables for visual consistency.
   - `.modal-overlay` (modals, pause, game over, tower wheel backdrop) uses `--modal-overlay-vignette` + `--modal-overlay-backdrop` for one consistent look.

   This file contains:
   - CSS Variables for common values
   - Shared utility classes
   - Modal overlay and backdrop
   - Base modal container styles
   - Modal animations (fade, grow, slide)
   - Standardized close buttons
   - Common modal headers
   - Modal state classes (.is-opening, .is-closing)
   - Locked item/tab shared styles

   Last Updated: 2025-01-XX (Optimized)
   ========================================================================== */

/* ==========================================================================
   CSS VARIABLES - Shared values across all modals
   ========================================================================== */

:root {
    /* Border radius values */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;

    /* Padding values */
    --padding-xs: 4px 8px;
    --padding-sm: 8px 12px;
    --padding-md: 10px 16px;
    --padding-lg: 15px;
    --padding-xl: 20px;

    /* Standard modal background — gradient to match Core/Breach panels */
    --modal-bg: linear-gradient(135deg, rgba(5, 16, 14, 0.96), rgba(3, 10, 12, 0.94));
    --modal-bg-flat: rgba(3, 10, 12, 0.94);

    /*
     * Shared “circuit vein” trace grid (DRY) — layered *under* each panel’s own gradient.
     * Applied on .modal-content + shells that override background (.settings / .tutorial / .hub-modal).
     */
    --modal-circuit-vein-layers:
        repeating-linear-gradient(90deg,
            transparent 0 36px,
            rgba(0, 255, 170, 0.05) 36px 37px,
            transparent 37px 74px),
        repeating-linear-gradient(0deg,
            transparent 0 32px,
            rgba(0, 210, 200, 0.045) 32px 33px,
            transparent 33px 64px),
        repeating-linear-gradient(128deg,
            transparent 0 52px,
            rgba(0, 255, 200, 0.035) 52px 53px,
            transparent 53px 120px);
    --modal-circuit-vein-layers-red:
        repeating-linear-gradient(90deg,
            transparent 0 36px,
            rgba(255, 54, 54, 0.105) 36px 37px,
            transparent 37px 74px),
        repeating-linear-gradient(0deg,
            transparent 0 32px,
            rgba(255, 120, 72, 0.075) 32px 33px,
            transparent 33px 64px),
        repeating-linear-gradient(128deg,
            transparent 0 52px,
            rgba(255, 38, 74, 0.065) 52px 53px,
            transparent 53px 120px);

    /* Full-screen overlays (modals, pause, wheel backdrop, game over): shared vignette + blur */
    --modal-overlay-vignette: radial-gradient(
        ellipse 72% 68% at 50% 48%,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 28%,
        rgba(0, 0, 0, 0.55) 52%,
        rgba(0, 0, 0, 0.92) 76%,
        rgba(0, 0, 0, 0.98) 100%
    );
    --modal-overlay-backdrop: blur(4px) saturate(1.15) contrast(1.06);
    --modal-panel-backdrop: none;

    /* Standard border width (sleeker baseline across modals/panels) */
    --border-width: 1px;

    --main-modal-width: 92%;
    --main-modal-max-width: min(1120px, 96vw);
    --main-modal-mobile-width: 95%;
    --main-modal-narrow-width: 98%;
    --modal-stack-down-mask: linear-gradient(180deg, #000 0%, #000 68%, rgba(0, 0, 0, 0.45) 84%, transparent 100%);

    /* Corner bracket frame (DRY — matches #motherUI edge accents) */
    --modal-frame-rgb: 0 255 170;
    --modal-corner-frame-opacity: 0.85;
    --modal-corner-frame-layers:
        linear-gradient(90deg,
            rgb(var(--modal-frame-rgb) / 0.42) 0 16px,
            transparent 16px calc(100% - 16px),
            rgb(var(--modal-frame-rgb) / 0.42) calc(100% - 16px)) top / 100% 1px no-repeat,
        linear-gradient(90deg,
            rgb(var(--modal-frame-rgb) / 0.28) 0 10px,
            transparent 10px calc(100% - 10px),
            rgb(var(--modal-frame-rgb) / 0.28) calc(100% - 10px)) bottom / 100% 1px no-repeat,
        linear-gradient(180deg,
            rgb(var(--modal-frame-rgb) / 0.34) 0 12px,
            transparent 12px calc(100% - 12px),
            rgb(var(--modal-frame-rgb) / 0.34) calc(100% - 12px)) left / 1px 100% no-repeat,
        linear-gradient(180deg,
            rgb(var(--modal-frame-rgb) / 0.24) 0 8px,
            transparent 8px calc(100% - 8px),
            rgb(var(--modal-frame-rgb) / 0.24) calc(100% - 8px)) right / 1px 100% no-repeat;
    --modal-corner-top-right-layers:
        linear-gradient(90deg,
            transparent 0 calc(100% - 48px),
            rgb(var(--modal-frame-rgb) / 0.46) calc(100% - 48px) calc(100% - 8px),
            transparent calc(100% - 8px)) top / 100% 1px no-repeat,
        linear-gradient(180deg,
            rgb(var(--modal-frame-rgb) / 0.34) 0 30px,
            transparent 30px) right 8px top 8px / 1px 48px no-repeat;
}

/* ==========================================================================
   HUD-STYLE MODAL TITLES (match in-game CORE / SYSTEM PROCESSORS strips)
   ========================================================================== */

.modal-hud-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 0 4px 0;
    padding: 0 44px 5px 0;
    font-size: clamp(12px, 2.2vw, 18px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-align: left;
    line-height: 1.25;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.modal-hud-title .modal-resource-display,
.modal-hud-title .modal-units-display,
.modal-hud-title .modal-energy-display {
    letter-spacing: 0.05em;
    text-transform: none;
}

.modal-hud-title--hub {
    color: #9efbff;
    border-bottom-color: rgba(0, 255, 255, 0.28);
    text-shadow: 0 0 14px rgba(0, 255, 255, 0.22);
}

.modal-hud-title--hub .modal-hud-title__primary {
    color: inherit;
}

.modal-hud-title--tutorial {
    color: #e8c4ff;
    border-bottom-color: rgba(204, 68, 255, 0.38);
    text-shadow: 0 0 14px rgba(204, 68, 255, 0.3);
}

.modal-hud-title--tutorial .modal-hud-title__primary {
    color: inherit;
}

.modal-hud-title--settings {
    color: #ffff00;
    border-bottom-color: rgba(255, 255, 0, 0.3);
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.3);
}

.modal-hud-title--settings .modal-hud-title__primary {
    color: inherit;
}

/* Pause overlay: styled with settings-modal + pause-* classes in simple-modals.css */

/* ==========================================================================
   SHARED UTILITY CLASSES
   ========================================================================== */

/* Scan line effect - applied to tutorial, hub, and settings modal content */
.tutorial-content::before,
.hub-modal-content::before,
.settings-modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    background: repeating-linear-gradient(90deg,
            transparent,
            transparent 50px,
            #00cccc 50px,
            #00cccc 51px);
    animation: pauseScanScroll 15s linear infinite;
}

/* Shared locked item/tab styles - used across Core/Breach UI and modals */
.locked-item,
.locked-tab {
    cursor: pointer;
    opacity: 0.85 !important;
    filter: grayscale(0.3) brightness(0.8) !important;
    border: var(--border-width) dashed rgba(255, 68, 68, 0.6) !important;
    border-image: linear-gradient(45deg, rgba(255, 68, 68, 0.4), rgba(255, 68, 68, 0.8), rgba(255, 68, 68, 0.4)) 1;
    background: linear-gradient(135deg, rgba(8, 4, 6, 0.95) 0%, rgba(12, 6, 8, 0.9) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 68, 68, 0.2) 0%, transparent 70%) !important;
    color: rgba(255, 180, 180, 0.9) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        0 0 6px rgba(255, 68, 68, 0.25),
        0 0 10px rgba(255, 68, 68, 0.15),
        inset 0 0 4px rgba(255, 68, 68, 0.1),
        inset 0 0 8px rgba(0, 0, 0, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 68, 68, 0.2) !important;
    position: relative;
    overflow: hidden;
    animation: lockedFieldsetPulse 3s ease-in-out infinite, lockedBorderPulse 2s ease-in-out infinite;
    text-shadow: 0 0 4px rgba(255, 100, 100, 0.5), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.locked-item::before,
.locked-tab::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background:
        repeating-linear-gradient(90deg,
            transparent,
            transparent 12px,
            rgba(255, 68, 68, 0.15) 12px,
            rgba(255, 68, 68, 0.15) 14px),
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 68, 68, 0.2) 20%,
            rgba(255, 68, 68, 0.4) 40%,
            rgba(255, 68, 68, 0.5) 50%,
            rgba(255, 68, 68, 0.4) 60%,
            rgba(255, 68, 68, 0.2) 80%,
            transparent 100%);
    animation: lockedScanLine 6.6s ease-in-out infinite;
    pointer-events: none;
    filter: saturate(1.5) contrast(1.5) brightness(1.5);
    z-index: 1;
}

.locked-item:hover,
.locked-tab:hover {
    cursor: not-allowed;
    background: linear-gradient(135deg, rgba(8, 4, 6, 0.95) 0%, rgba(12, 6, 8, 0.9) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 68, 68, 0.2) 0%, transparent 70%) !important;
    color: rgba(255, 180, 180, 0.9) !important;
    border-color: rgba(255, 68, 68, 0.6) !important;
    transform: none;
    box-shadow:
        0 0 6px rgba(255, 68, 68, 0.25),
        0 0 10px rgba(255, 68, 68, 0.15),
        inset 0 0 4px rgba(255, 68, 68, 0.1),
        inset 0 0 8px rgba(0, 0, 0, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 68, 68, 0.2) !important;
}

.locked-item:active,
.locked-tab:active {
    transform: none;
    opacity: 0.8;
}

/* Locked item animations */
@keyframes lockedFieldsetPulse {

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

    50% {
        opacity: 0.95;
        transform: translateZ(0) scale(1.01);
    }
}

@keyframes lockedBorderPulse {

    0%,
    100% {
        border-color: rgba(255, 68, 68, 0.6);
    }

    50% {
        border-color: rgba(255, 68, 68, 0.9);
    }
}

@keyframes lockedScanLine {

    0%,
    100% {
        transform: translateX(-100%) scaleX(0.8);
        opacity: 0;
        filter: saturate(.6);
    }

    50% {
        transform: translateX(100%) scaleX(1.2);
        opacity: 1;
        filter: contrast(4.5);
    }
}

/* ==========================================================================
   EVOLUTION PROGRESS BAR ANIMATIONS - Shared across HUB and Core/Breach UI
   ========================================================================== */

@keyframes dmgEvolutionPulse {
    0% {
        box-shadow: 0 0 8px #ff0000;
    }

    50% {
        box-shadow: 0 0 20px #ff0000, 0 0 30px #ff000088;
    }

    100% {
        box-shadow: 0 0 8px #ff0000;
    }
}

@keyframes rngEvolutionPulse {
    0% {
        box-shadow: 0 0 8px #00ff00;
    }

    50% {
        box-shadow: 0 0 20px #00ff00, 0 0 30px #00ff0088;
    }

    100% {
        box-shadow: 0 0 8px #00ff00;
    }
}

@keyframes spdEvolutionPulse {
    0% {
        box-shadow: 0 0 8px #0000ff;
    }

    50% {
        box-shadow: 0 0 20px #0000ff, 0 0 30px #0000ff88;
    }

    100% {
        box-shadow: 0 0 8px #0000ff;
    }
}

/* ==========================================================================
   MODAL ANIMATIONS
   ========================================================================== */

@keyframes modalFadeInGrow {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes modalFadeOutShrink {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* NOTE: @keyframes pauseScanScroll is defined in CBDstyles.css */

@keyframes contentSlideUpIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ==========================================================================
   MODAL OVERLAY - Full screen backdrop
   ========================================================================== */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-overlay-vignette);
    backdrop-filter: var(--modal-overlay-backdrop);
    -webkit-backdrop-filter: var(--modal-overlay-backdrop);
    z-index: 200;
    /* Higher than welcome screen (z-index: 66) to appear on top */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.modal-overlay[style*="display: flex"] {
    display: flex !important;
}

/* Pause / game-over — pin stacking to modal layer */
#pauseOverlay.modal-overlay,
#gameOverScreen.modal-overlay {
    z-index: 200;
}

.modal-overlay.is-opening {
    opacity: 1;
}

.modal-overlay.is-closing {
    opacity: 0;
}

/* ==========================================================================
   BASE MODAL CONTENT CONTAINER
   ========================================================================== */

.modal-content {
    background-color: var(--modal-bg-flat);
    background-image: var(--modal-corner-frame-layers), var(--modal-circuit-vein-layers), var(--modal-bg);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 2px solid var(--primary-color);
    border-radius: var(--radius-xl);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 4px rgba(255, 255, 255, 0.06) inset;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    margin: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
}

:where(
    .modal-content,
    .settings-modal-content,
    .tutorial-content,
    .hub-modal-content,
    #confirmationContent,
    #rebootModalContent,
    #pauseContent,
    #idleRewardContent,
    #settingsContent,
    #motherUI,
    #towerStatus,
    #coreStatusUI,
    #breachStatusUI,
    #towerInfo,
    #towerWheel .tower-option-wheel
) {
    backdrop-filter: var(--modal-panel-backdrop) !important;
    -webkit-backdrop-filter: var(--modal-panel-backdrop) !important;
}

#confirmationModal.tower-confirmation-modal.modal-overlay {
    backdrop-filter: var(--modal-overlay-backdrop) !important;
    -webkit-backdrop-filter: var(--modal-overlay-backdrop) !important;
}

body:has(#confirmationModal[style*="display: flex"]) .modal-overlay:not(#confirmationModal) {
    backdrop-filter: var(--modal-panel-backdrop) !important;
    -webkit-backdrop-filter: var(--modal-panel-backdrop) !important;
}

body:has(#confirmationModal[style*="display: flex"]) #towerWheel {
    filter: none;
}

.modal-content.tutorial-content,
.modal-content.hub-modal-content,
#settingsContent.modal-content.settings-modal-content {
    width: var(--main-modal-width);
    max-width: var(--main-modal-max-width);
}

/* Modal opening/closing animations */
.modal-overlay.is-opening .modal-content,
.tutorial-content.is-opening,
#rebootModalContent.is-opening,
#confirmationContent.is-opening {
    animation: modalFadeInGrow 0.2s ease-out forwards;
}

.modal-overlay.is-closing .modal-content,
.tutorial-content.is-closing,
#rebootModalContent.is-closing,
#confirmationContent.is-closing {
    animation: modalFadeOutShrink 0.18s ease-in forwards;
}

/* ==========================================================================
   STANDARDIZED CLOSE BUTTON - Used across all modals
   Matches Core/Breach X button style for consistency
   ========================================================================== */

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 20px;
    height: 20px;
    padding: 0;
    background: #ff4444;
    color: #ffffff;
    border: var(--border-width) solid #ff6666;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    z-index: 1001;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 6px rgba(255, 68, 68, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: #ff6666;
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.55);
    transform: scale(1.04);
}

.modal-close-btn:active {
    transform: scale(0.98);
}

/* Optional footer hint — wired by wireModalOutsideDismiss() in modals.js */
.modal-outside-hint {
    margin: 14px 0 0;
    padding: 0;
    font-family: var(--main-font, 'Courier Prime', monospace);
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(0, 204, 102, 0.62);
    font-style: italic;
    opacity: 0.85;
}

/* ==========================================================================
   MODAL HEADER - Standard header used in most modals
   ========================================================================== */


.modal-header h2,
.modal-header h3 {
    color: #00cccc;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 0 0 6px rgba(0, 204, 204, 0.4);
}

/* ==========================================================================
   SHARED LOCKED-ITEM EFFECT - Used by H.U.B. cards & tower wheel slots
   Red locked state: pulse glow, scan sweep, grayscale + dim
   ========================================================================== */

.locked-item {
    cursor: not-allowed;
    border: 2px dashed rgba(255, 68, 68, 0.6) !important;
    opacity: 0.82;
    filter: grayscale(0.35) brightness(0.8);
    box-shadow:
        0 0 12px rgba(255, 68, 68, 0.25),
        inset 0 0 12px rgba(255, 68, 68, 0.08),
        inset 0 0 20px rgba(0, 0, 0, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden;
    position: relative;
    animation: lockedPulse 2.8s ease-in-out infinite;
}

.locked-item:hover,
.locked-item:focus,
.locked-item:active {
    animation: lockedPulse 2.8s ease-in-out infinite !important;
}

/* Shimmer sweep on hover */
.locked-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 68, 68, 0.15), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.locked-item:hover::before {
    left: 100%;
}

/* Scan sweep overlay */
.locked-item::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background:
        repeating-linear-gradient(90deg,
            transparent 0 12px,
            rgba(255, 78, 78, 0.08) 12px 13px),
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 96, 96, 0.18) 45%,
            rgba(255, 96, 96, 0.26) 50%,
            rgba(255, 96, 96, 0.18) 55%,
            transparent 100%);
    opacity: 0.22;
    z-index: 1;
    pointer-events: none;
    filter: saturate(1.1) contrast(1.15);
    animation: lockedScanSweep 7.2s ease-in-out infinite;
}

@keyframes lockedPulse {
    0%, 100% {
        box-shadow:
            0 0 9px rgba(255, 72, 72, 0.3),
            inset 0 0 9px rgba(255, 72, 72, 0.1),
            inset 0 0 20px rgba(0, 0, 0, 0.5),
            0 4px 16px rgba(0, 0, 0, 0.45);
    }
    50% {
        box-shadow:
            0 0 14px rgba(255, 88, 88, 0.45),
            inset 0 0 12px rgba(255, 88, 88, 0.16),
            inset 0 0 20px rgba(0, 0, 0, 0.5),
            0 4px 16px rgba(0, 0, 0, 0.45);
    }
}

@keyframes lockedScanSweep {
    0%, 100% { transform: translateX(-115%); opacity: 0; }
    50% { transform: translateX(115%); opacity: 1; }
}

.locked-item .tower-name,
.locked-item h4 {
    color: #ff6666 !important;
    text-shadow: 0 0 6px rgba(255, 102, 102, 0.6), 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.locked-item .tower-cost {
    color: #ff4444 !important;
    text-shadow: 0 0 4px rgba(255, 68, 68, 0.8), 0 1px 2px rgba(0, 0, 0, 0.9) !important;
    background: rgba(255, 68, 68, 0.1);
    padding: 1px;
    border-radius: 4px;
}

/* ==========================================================================
   SHARED TAB NAVIGATION - Used by Tutorial, H.U.B., and Settings modals
   Source of truth for .modal-tabs and .tab-btn styles
   ========================================================================== */

.modal-tabs {
    display: flex;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
    border-bottom: var(--border-width) solid var(--primary-color);
    overflow: visible;
    flex-wrap: wrap;
    margin-top: 4px;
    margin-bottom: 10px;
    z-index: 5;
    gap: 4px;
    padding: 4px;
    box-shadow: 0 1px 4px rgba(0, 255, 0, 0.08);
}

#upgradeModal .modal-tabs,
#idleRewardModal .modal-tabs {
    align-items: stretch;
    gap: 6px;
    padding: 5px 8px 7px;
    border-top: 1px solid rgba(0, 221, 255, 0.22);
    border-bottom: 1px solid rgba(0, 255, 136, 0.78);
    background:
        linear-gradient(180deg, rgba(0, 32, 36, 0.56), rgba(0, 0, 0, 0.18)),
        linear-gradient(90deg, rgba(0, 255, 136, 0.05), rgba(0, 221, 255, 0.04));
    box-shadow:
        inset 0 1px 0 rgba(0, 221, 255, 0.16),
        0 2px 10px rgba(0, 255, 136, 0.08);
}

.tab-btn {
    background: linear-gradient(180deg, rgba(32, 42, 48, 0.96) 0%, rgba(16, 22, 28, 0.98) 55%, rgba(8, 12, 16, 0.99) 100%);
    border: 1px solid rgba(0, 255, 0, 0.25);
    color: var(--text-color-light);
    padding: 8px 10px;
    cursor: pointer;
    font-family: var(--main-font);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.7px;
    transition: all 0.2s ease;
    border-bottom: var(--border-width) solid transparent;
    white-space: nowrap;
    flex: 1;
    min-width: 120px;
    width: 26%;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin: 0;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 0 rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.55);
}

#upgradeModal .modal-tabs .tab-btn,
#idleRewardModal .modal-tabs .tab-btn {
    min-height: 38px;
    padding: 7px 10px;
    margin: 0 !important;
}

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

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

.tab-btn:hover {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.1), rgba(0, 255, 0, 0.03));
    color: var(--primary-color);
    border-color: rgba(0, 255, 0, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 255, 0, 0.15);
}

.tab-btn.active {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.2), rgba(0, 255, 0, 0.1));
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 4px rgba(0, 255, 0, 0.2);
    transform: translateY(-2px);
    position: relative;
}

.tab-btn.upgrade-available,
.tab-btn.claimable-loot,
.tab-btn.achievement-pending {
    --tab-alert-color: #ffd700;
    --tab-alert-rgb: 255, 215, 0;
    color: var(--tab-alert-color) !important;
    border-color: rgba(var(--tab-alert-rgb), 0.92) !important;
    background:
        linear-gradient(180deg, rgba(var(--tab-alert-rgb), 0.22) 0%, rgba(10, 12, 16, 0.98) 58%, rgba(0, 0, 0, 0.99) 100%),
        repeating-linear-gradient(90deg, rgba(var(--tab-alert-rgb), 0.16) 0 2px, transparent 2px 6px) !important;
    text-shadow:
        0 0 8px rgba(var(--tab-alert-rgb), 0.95),
        0 0 16px rgba(var(--tab-alert-rgb), 0.45) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 0 rgba(var(--tab-alert-rgb), 0.24),
        0 0 14px rgba(var(--tab-alert-rgb), 0.62),
        0 0 28px rgba(var(--tab-alert-rgb), 0.28) !important;
    animation: tabAlertPulse 1.15s ease-in-out infinite;
}

.tab-btn.achievement-pending {
    --tab-alert-color: #00ff88;
    --tab-alert-rgb: 0, 255, 136;
}

.tab-btn.achievement-pending::after {
    content: attr(data-tab-alert-label);
    position: absolute;
    top: 3px;
    right: 5px;
    min-width: 18px;
    height: 13px;
    padding: 0 4px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tab-alert-color);
    color: #001611;
    font-size: 7px;
    line-height: 1;
    letter-spacing: 0.7px;
    font-weight: 900;
    box-shadow:
        0 0 8px rgba(var(--tab-alert-rgb), 0.95),
        0 0 18px rgba(var(--tab-alert-rgb), 0.56);
    z-index: 20;
    pointer-events: none;
}

.tab-btn.upgrade-available::after,
.tab-btn.claimable-loot::after {
    content: none;
    display: none;
}

.tab-btn.upgrade-available::before,
.tab-btn.claimable-loot::before,
.tab-btn.achievement-pending::before {
    left: -20%;
    opacity: 0.82;
    background: linear-gradient(90deg, transparent, rgba(var(--tab-alert-rgb), 0.42), transparent);
    animation: tabAlertScan 1.3s ease-in-out infinite;
}

@keyframes tabAlertPulse {
    0%, 100% {
        filter: saturate(1.05) brightness(1);
        transform: translateY(0);
    }
    50% {
        filter: saturate(1.42) brightness(1.18);
        transform: translateY(-2px);
    }
}

@keyframes tabAlertScan {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(240%);
    }
}

/* ==========================================================================
   PAUSE INDICATOR - Shown at top of modals when game is paused
   ========================================================================== */

.pause-indicator {
    top: 10px;
    right: 40px;
    left: auto;
    background: rgba(255, 165, 0, 0.15);
    border: 1px solid rgba(255, 165, 0, 0.4);
    border-radius: var(--radius-md);
    padding: 4px 8px;
    color: #ffaa00;
    font-size: calc(9px + 0.5vw);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Cyan "facelift" variant — used by HUB, Settings, Reboot modals */
.styled-pause-indicator {
    color: #00cccc;
    font-size: clamp(10px, 2.2vw, 13px);
    background: rgba(0, 204, 204, 0.15);
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid rgba(0, 204, 204, 0.5);
    box-shadow: 0 0 8px rgba(0, 204, 204, 0.3);
    text-shadow: 0 0 4px rgba(0, 204, 204, 0.8);
    text-align: center;
    margin-bottom: 10px;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   SHARED GAME ACTION BUTTONS (.game-btn)
   ========================================================================== */

/* Standard Action Button - Dark with borders (matching Core/Breach style) */
.game-btn {
    padding: 7px 12px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
    border: 1px solid rgba(255, 255, 0, 0.3);
    color: #ffff00;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 1em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    display: inline-block;
    text-align: center;
}

.game-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.2), rgba(255, 255, 0, 0.1));
    border-color: rgba(255, 255, 0, 0.5);
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.3);
    transform: translateY(-1px);
}

.game-btn:active {
    transform: translateY(0);
    box-shadow: 0 0 8px rgba(255, 255, 0, 0.2);
}

.game-btn.active {
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.3), rgba(255, 255, 0, 0.2));
    color: #ffff00;
    border-color: rgba(255, 255, 0, 0.5);
    box-shadow: 0 0 12px rgba(255, 255, 0, 0.4);
}

/* ==========================================================================
   MODAL CORNER FRAME (DRY) — Mother UI bracket accents on panel shells
   ::after where pseudo is free; background-image prepend where ::after is taken.
   ========================================================================== */

:where(
    #towerStatus,
    #towerInfo,
    #coreStatusUI,
    #breachStatusUI,
    #pauseContent,
    #rebootModalContent,
    #confirmationContent,
    #settingsContent,
    #upgradeContent,
    #idleRewardContent,
    #tutorialModal .tutorial-content,
    .tut-finish__panel,
    .tut-skip-confirm__panel,
    #welcomeScreen .welcome-stats
)::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: max(4px, calc(var(--radius-xl, 8px) - 3px));
    pointer-events: none;
    z-index: 1;
    background: var(--modal-corner-frame-layers);
    opacity: var(--modal-corner-frame-opacity);
}

#confirmationContent {
    --modal-panel-surface: var(--modal-circuit-vein-layers), linear-gradient(135deg, rgba(5, 16, 14, 0.96), rgba(3, 10, 12, 0.94));
}

/* Per-panel accent (matches border-top / theme) */
#pauseContent {
    --modal-frame-rgb: 0 255 170;
    --modal-corner-frame-opacity: 0.95;
}

#pauseContent::after {
    background: var(--modal-corner-top-right-layers), var(--modal-corner-frame-layers);
}

#rebootModalContent {
    --modal-frame-rgb: 255 165 0;
}

#confirmationContent {
    --modal-frame-rgb: 0 255 136;
    --modal-corner-frame-opacity: 0.95;
}

#confirmationContent.save-reset-content {
    --modal-frame-rgb: 255 68 68;
}

#confirmationContent.reboot-content {
    --modal-frame-rgb: 255 165 0;
}

.tut-finish__panel,
.tut-skip-confirm__panel {
    --modal-frame-rgb: 0 255 120;
}

#coreStatusUI,
#breachStatusUI {
    --modal-frame-rgb: var(--mother-shell-rgb, 0 255 200);
}

#settingsContent {
    --modal-frame-rgb: 255 220 64;
    --modal-corner-frame-opacity: 0.9;
}

#upgradeContent {
    --modal-corner-frame-opacity: 0.9;
}

#idleRewardContent {
    --modal-corner-frame-opacity: 0.9;
}

#tutorialModal .tutorial-content {
    --modal-frame-rgb: 204 68 255;
    --modal-corner-frame-opacity: 0.9;
}

#towerInfo {
    --modal-frame-rgb: 0 255 170;
    --modal-corner-frame-opacity: 0.75;
}

#welcomeScreen .welcome-stats {
    --modal-frame-rgb: 0 255 238;
    --modal-corner-frame-opacity: 0.72;
}

/* Scroll-heavy modals: fade on the scroll body so shell ::after stays free for - | brackets. */
.modal-content--green-bottom-fade {
    position: relative;
}

.modal-content--green-bottom-fade .settings-main,
.modal-content--green-bottom-fade .tutorial-main {
    position: relative;
}

.modal-content--green-bottom-fade .settings-main::after,
.modal-content--green-bottom-fade .tutorial-main::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 52px;
    background: linear-gradient(to top, rgba(0, 25, 0, 1) 0%, rgba(0, 25, 0, 0.8) 50%, transparent 100%);
    pointer-events: none;
    z-index: 5;
}

/* Inner modal cards — inset - | when a child panel needs the same DNA */
:where(
    .settings-section,
    .music-now-panel
)::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: max(3px, calc(var(--radius-lg, 6px) - 2px));
    pointer-events: none;
    z-index: 1;
    background: var(--modal-corner-frame-layers);
    opacity: var(--modal-corner-frame-opacity, 0.72);
}

.music-now-panel,
.music-playlist-panel,
.settings-section {
    position: relative;
    isolation: isolate;
}

.music-now-panel,
.settings-section {
    --modal-frame-rgb: 255 220 64;
}

.music-playlist-panel {
    --modal-frame-rgb: 0 255 200;
    --modal-corner-frame-opacity: 0.72;
}

.music-playlist-panel::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: max(3px, calc(var(--radius-lg, 6px) - 2px));
    pointer-events: none;
    z-index: 1;
    background: var(--modal-corner-frame-layers);
    opacity: var(--modal-corner-frame-opacity, 0.72);
}

/* Pause / tower confirm / reboot: green wash behind action buttons only (not header). */
.modal-actions-bottom-fade {
    position: relative;
    z-index: 2;
    isolation: isolate;
}

.modal-actions-bottom-fade::after {
    content: '';
    position: absolute;
    left: -14px;
    right: -14px;
    bottom: -10px;
    height: min(120px, 100%);
    background: linear-gradient(
        to top,
        rgba(0, 32, 14, 1) 0%,
        rgba(0, 26, 12, 0.88) 32%,
        rgba(0, 18, 9, 0.45) 58%,
        transparent 100%
    );
    box-shadow: 0 -8px 28px rgba(0, 255, 100, 0.12);
    pointer-events: none;
    z-index: 0;
    border-radius: 0 0 var(--radius-xl, 8px) var(--radius-xl, 8px);
}

.modal-actions-bottom-fade > * {
    position: relative;
    z-index: 1;
}

#confirmationButtons.modal-actions-bottom-fade::after,
#rebootModalButtons.modal-actions-bottom-fade::after {
    display: none;
}

#pauseContent .pause-modal-settings,
#confirmationContent > .modal-header,
#confirmationContent > .settings-section,
#rebootModalContent > .modal-header,
#rebootModalContent > .settings-section {
    position: relative;
    z-index: 2;
}

#pauseContent > .modal-close-btn,
#pauseContent #closePauseBtn {
    position: absolute;
    top: 18px;
    right: 10px;
    left: auto;
    z-index: 1002;
}

#confirmationContent > .modal-close-btn,
#rebootModalContent > .modal-close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1002;
}

/* Shared modal card primitives. Feature-specific CSS owns content and state. */
.modal-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.modal-system-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl, 8px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.25s ease, transform 0.2s ease;
}

.modal-system-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -105%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--card-shine-rgb, 255, 255, 255), var(--card-shine-alpha, 0.08)), transparent);
    transition: left var(--card-shine-duration, 0.6s) ease;
    z-index: 1;
    pointer-events: none;
}

.modal-system-card:hover {
    transform: translateY(-1px);
}

.modal-system-card:not(.locked):hover::before {
    left: 105%;
}

@media (max-width: 640px) {
    .modal-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 360px) {
    .modal-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.game-btn.affordable {
    background: linear-gradient(135deg, rgba(0, 80, 40, 0.7), rgba(0, 60, 30, 0.5));
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.5);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.25);
    cursor: pointer;
}

.game-btn.affordable:hover {
    background: linear-gradient(135deg, rgba(0, 120, 60, 0.8), rgba(0, 100, 50, 0.6));
    border-color: rgba(0, 255, 136, 0.7);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
    transform: translateY(-1px);
}

.game-btn.affordable:active {
    transform: translateY(0);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

.game-btn.disabled,
.game-btn:disabled {
    background: linear-gradient(135deg, rgba(51, 51, 51, 0.7), rgba(51, 51, 51, 0.5));
    color: #ff0000;
    border: var(--border-width, 2px) dashed rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.6;
}

/* ==========================================================================
   MOBILE RESPONSIVE - Modal adjustments for smaller screens
   ========================================================================== */

@media (max-width: 640px) {
    .modal-content {
        width: 95%;
        max-width: none;
        max-height: 90vh;
        padding: 12px;
    }

    .modal-content.tutorial-content,
    .modal-content.hub-modal-content,
    #settingsContent.modal-content.settings-modal-content {
        width: var(--main-modal-mobile-width);
    }

    .modal-header {
        padding: 8px 12px;
    }

    .modal-header h2,
    .modal-header h3 {
        font-size: 16px;
    }


    .modal-close-btn {
        /* Mobile: modest touch target, still smaller than legacy 32px */
        width: 26px;
        height: 26px;
        font-size: 16px;
        top: 8px;
        right: 10px;
    }

    /* Smaller screens (480px and below) */
    @media (max-width: 480px) {
        .modal-content {
            width: 98%;
            max-height: 92vh;
            padding: 10px;
        }

        .modal-content.tutorial-content,
        .modal-content.hub-modal-content,
        #settingsContent.modal-content.settings-modal-content {
            width: var(--main-modal-narrow-width);
        }

        .modal-header h2,
        .modal-header h3 {
            font-size: 14px;
            letter-spacing: 1px;
        }

        .pause-indicator {
            font-size: 10px;
            padding: 4px 8px;
        }
    }
}