/* src/style.css */
:root {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: #eaf7ff;
    background: #020407;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #07111a 0%,
            #020407 72%
        );
}

body {
    position: relative;
}

#app {
    display: none;
}

canvas {
    position: fixed;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    touch-action: none;
    user-select: none;
}

.swarm-hud {
    position: fixed;

    top: 22px;
    left: 22px;

    width: 220px;

    padding: 15px 17px;

    border: 1px solid
        rgba(
            105,
            199,
            255,
            0.25
        );

    border-radius: 6px 6px 0 0;
    border-bottom: 0;

    background:
        rgba(
            4,
            10,
            16,
            0.76
        );

    box-shadow:
        0 0 40px
        rgba(
            0,
            128,
            255,
            0.06
        );

    backdrop-filter:
        blur(7px);

    pointer-events: none;

    letter-spacing:
        0.08em;
}

.hud-title {
    margin-bottom: 14px;

    color: #dff7ff;

    font-size: 16px;
    font-weight: 600;

    letter-spacing:
        0.22em;
}

.hud-threat {
    margin: -4px 0 12px;

    padding: 6px 8px;

    border: 1px solid
        rgba(
            105,
            199,
            255,
            0.22
        );

    border-radius: 4px;

    color: #8fcfe9;

    background:
        rgba(
            12,
            35,
            48,
            0.48
        );

    font-size: 9px;
    font-weight: 800;

    letter-spacing:
        0.14em;

    text-align: center;
}

.hud-threat[data-level="5"] {
    border-color:
        rgba(
            255,
            91,
            91,
            0.52
        );

    color: #ff9a8d;

    background:
        rgba(
            75,
            16,
            18,
            0.42
        );
}

.hud-row {
    display: flex;
    align-items: center;
    justify-content:
        space-between;

    margin-top: 6px;

    color: #7493a6;

    font-size: 11px;
}

.hud-row strong {
    color: #ccefff;

    font-size: 13px;
}

.hud-signal {
    margin-top: 15px;

    padding-top: 11px;

    border-top: 1px solid
        rgba(
            92,
            202,
            255,
            0.14
        );

    color: #60ff98;

    font-size: 10px;
    font-weight: 700;
}

.hud-help {
    margin-top: 7px;

    color: #486575;

    font-size: 9px;
    line-height: 1.45;
}

.signal-panel {
    position: fixed;

    top: 22px;
    right: 22px;

    width: 210px;

    padding: 14px;

    z-index: 20;

    border: 1px solid
        rgba(
            105,
            199,
            255,
            0.25
        );

    border-radius: 6px;

    background:
        rgba(
            4,
            10,
            16,
            0.84
        );

    backdrop-filter:
        blur(7px);
}

.panel-title {
    margin-bottom: 6px;

    color: #daf6ff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing:
        0.18em;
}

.bandwidth {
    margin-bottom: 10px;

    color: #7e9bac;

    font-size: 10px;

    letter-spacing:
        0.08em;
}

.signal-button,
.signal-clear {
    position: relative;

    width: 100%;

    margin-top: 5px;

    padding: 9px 34px;

    border: 1px solid
        #243845;

    border-radius: 4px;

    color: #7894a5;

    background:
        rgba(
            7,
            15,
            22,
            0.92
        );

    font: inherit;

    font-size: 10px;
    font-weight: 700;

    letter-spacing:
        0.08em;

    cursor: pointer;
}

.signal-hotkey {
    position: absolute;

    top: 50%;
    right: 9px;

    transform:
        translateY(-50%);

    color: #506b7b;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0;
}

.signal-button:hover:not(:disabled)
.signal-hotkey,
.signal-button.selected
.signal-hotkey,
.signal-clear:hover
.signal-hotkey {
    color: #9cc7da;
}

.signal-button:hover:not(:disabled),
.signal-clear:hover {
    border-color:
        #4e89a7;

    color: #d7f5ff;
}

.signal-button.selected {
    border-color:
        #70d7ff;

    color: #e5faff;
}

.signal-button.active::before {
    content: "● ";

    color: #63ff9a;
}

.signal-button::after {
    content: attr(data-slot-count);

    position: absolute;
    top: 50%;
    right: 31px;

    transform: translateY(-50%);

    color: #5f7d8c;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0;
}

.signal-button.active::after,
.signal-button.selected::after {
    color: #9bc2d3;
}

.signal-button:disabled {
    opacity: 0.32;

    cursor: not-allowed;
}

.signal-clear {
    margin-top: 10px;

    color: #8296a1;

    font-size: 9px;
}

.hud-wave {
    margin-top: 14px;

    padding-top: 10px;

    border-top: 1px solid
        rgba(
            92,
            202,
            255,
            0.14
        );

    color: #ffc65c;

    font-size: 11px;
    font-weight: 700;

    letter-spacing:
        0.08em;
}

.swarm-hud.game-over {
    border-color:
        rgba(
            255,
            70,
            70,
            0.65
        );
}

.swarm-hud.game-over
.hud-wave {
    color: #ff5353;

    font-size: 15px;
}

.upgrade-overlay {
    position: fixed;

    inset: 0;

    z-index: 50;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    background:
        rgba(
            0,
            4,
            9,
            0.76
        );

    backdrop-filter:
        blur(5px);
}

.upgrade-overlay[hidden] {
    display: none;
}

.upgrade-title {
    margin-bottom: 20px;

    color: #e4f8ff;

    font-size: 19px;
    font-weight: 700;

    letter-spacing:
        0.2em;
}

.upgrade-choices {
    display: flex;

    gap: 15px;

    width:
        min(
            900px,
            calc(
                100vw -
                40px
            )
        );
}

.upgrade-card {
    flex: 1;

    min-height: 150px;

    padding: 20px;

    border: 1px solid
        #315267;

    border-radius: 7px;

    background:
        linear-gradient(
            160deg,
            rgba(
                15,
                33,
                44,
                0.96
            ),
            rgba(
                5,
                12,
                18,
                0.96
            )
        );

    color: #dff7ff;

    cursor: pointer;

    text-align: left;
}

.upgrade-card:hover:not(:disabled) {
    border-color:
        #66cfff;

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 35px
        rgba(
            31,
            151,
            255,
            0.13
        );
}

.upgrade-card:disabled {
    cursor: default;
    opacity: 1;
}

.upgrade-card strong {
    display: block;

    margin-bottom: 13px;

    color: #9fe4ff;

    font-size: 15px;

    letter-spacing:
        0.04em;
}

.upgrade-card span {
    display: block;

    color: #7895a4;

    font-size: 12px;

    line-height: 1.5;
}

@media (
    max-width: 720px
) {
    .upgrade-choices {
        flex-direction: column;
    }

    .signal-panel {
        top: auto;
        right: 12px;
        bottom: 12px;

        width: 180px;
    }
}

.core-panel {
    position: fixed;

    left: 50%;
    bottom: 0;

    z-index: 20;

    width: 640px;

    padding: 12px 14px;

    transform:
        translateX(-50%);

    border: 1px solid
        rgba(
            105,
            199,
            255,
            0.25
        );

    border-radius: 6px;

    background:
        rgba(
            4,
            10,
            16,
            0.86
        );

    backdrop-filter:
        blur(7px);
}

.core-population {
    display: flex;

    justify-content:
        space-between;

    color: #7896a7;

    font-size: 10px;

    letter-spacing:
        0.08em;
}

.core-population strong {
    color: #d7f3ff;

    font-size: 12px;
}

.core-queue {
    min-height: 15px;

    margin-top: 4px;

    color: #5b8298;

    font-size: 9px;

    letter-spacing:
        0.08em;
}

.core-action {
    width:
        calc(
            25% -
            7px
        );

    margin:
        8px 3px 0;

    padding:
        9px 6px;

    border: 1px solid
        #294454;

    border-radius: 4px;

    color: #9bc8dd;

    background:
        rgba(
            8,
            18,
            25,
            0.94
        );

    font: inherit;

    font-size: 9px;
    font-weight: 700;

    letter-spacing:
        0.05em;

    cursor: pointer;
}

.core-action:hover:not(:disabled) {
    border-color:
        #5bcfff;

    color: #e1f8ff;

    background:
        rgba(
            17,
            40,
            52,
            0.96
        );
}

.core-action:disabled {
    opacity: 0.3;

    cursor: not-allowed;
}

.run-summary {
    position: fixed;

    inset: 0;

    z-index: 70;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    background:
        rgba(
            0,
            3,
            7,
            0.88
        );

    backdrop-filter:
        blur(8px);
}

.run-summary[hidden] {
    display: none;
}

.run-summary-title {
    margin-bottom: 24px;

    color: #ff6666;

    font-size: 30px;

    font-weight: 700;

    letter-spacing:
        0.22em;
}

.run-summary-stats {
    width: 330px;

    padding: 18px 22px;

    border-top: 1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-bottom: 1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );
}

.run-summary-stats > div {
    display: flex;

    justify-content:
        space-between;

    margin: 7px 0;

    color: #7895a5;

    font-size: 10px;

    letter-spacing:
        0.07em;
}

.run-summary-stats strong {
    color: #e0f5ff;

    font-size: 11px;
}

.restart-button {
    margin-top: 24px;

    padding:
        13px 28px;

    border: 1px solid
        #4f91ad;

    border-radius: 5px;

    color: #dcf7ff;

    background:
        rgba(
            14,
            35,
            46,
            0.94
        );

    font: inherit;

    font-size: 11px;

    font-weight: 700;

    letter-spacing:
        0.12em;

    cursor: pointer;
}

.restart-button:hover {
    border-color:
        #7cdbff;

    background:
        rgba(
            22,
            52,
            68,
            0.98
        );
}

@media (
    max-width: 800px
) {
    .core-panel {
        width:
            min(
                500px,
                calc(
                    100vw -
                    24px
                )
            );
    }

    .core-action {
        width: 100%;

        margin:
            5px 0 0;
    }
}

.sector-overlay {
    position: fixed;

    inset: 0;

    z-index: 60;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    background:
        rgba(
            0,
            4,
            9,
            0.78
        );

    backdrop-filter:
        blur(7px);
}

.sector-overlay[hidden] {
    display: none;
}

.sector-title {
    color: #9fe4ff;

    font-size: 24px;
    font-weight: 700;

    letter-spacing:
        0.18em;
}

.sector-details {
    width: 360px;

    margin-top: 22px;

    padding: 18px 22px;

    border-top: 1px solid
        rgba(
            100,
            200,
            255,
            0.18
        );

    border-bottom: 1px solid
        rgba(
            100,
            200,
            255,
            0.18
        );
}

.sector-details > div:not(
    .sector-warning
) {
    display: flex;

    justify-content:
        space-between;

    margin: 8px 0;

    color: #7895a5;

    font-size: 11px;

    letter-spacing:
        0.08em;
}

.sector-details strong {
    color: #e1f6ff;
}

.sector-warning {
    margin-top: 18px;

    color: #617f8f;

    font-size: 10px;

    line-height: 1.6;

    letter-spacing:
        0.08em;

    text-align: center;
}

.sector-actions {
    display: flex;

    gap: 14px;

    margin-top: 24px;
}

.sector-action {
    min-width: 180px;

    padding: 13px 20px;

    border-radius: 5px;

    font: inherit;

    font-size: 11px;
    font-weight: 700;

    letter-spacing:
        0.11em;

    cursor: pointer;
}

.sector-action.extract {
    border: 1px solid
        #50717f;

    color: #a8c5d0;

    background:
        rgba(
            10,
            22,
            28,
            0.94
        );
}

.sector-action.continue {
    border: 1px solid
        #56cfff;

    color: #dff8ff;

    background:
        rgba(
            13,
            39,
            51,
            0.96
        );
}

.sector-action:hover {
    transform:
        translateY(-2px);
}

.run-summary-subtitle {
    margin-top: -12px;
    margin-bottom: 20px;

    color: #6f8e9d;

    font-size: 10px;

    letter-spacing:
        0.14em;
}

.sector-status {
    position: fixed;

    top: 18px;
    left: 50%;

    z-index: 15;

    max-width: 480px;

    padding: 9px 18px;

    transform:
        translateX(-50%);

    border: 1px solid
        rgba(
            105,
            199,
            255,
            0.15
        );

    border-radius: 5px;

    background:
        rgba(
            4,
            10,
            16,
            0.68
        );

    backdrop-filter:
        blur(5px);

    pointer-events: none;

    text-align: center;
}

.sector-status-title {
    color: #a8ddef;

    font-size: 10px;
    font-weight: 700;

    letter-spacing:
        0.13em;
}

.sector-status-description {
    margin-top: 4px;

    color: #587684;

    font-size: 8px;

    line-height: 1.4;

    letter-spacing:
        0.04em;
}

.sector-preview {
    display: block !important;

    margin-top: 18px !important;

    padding: 13px;

    border: 1px solid
        rgba(
            98,
            205,
            255,
            0.16
        );

    border-radius: 5px;

    background:
        rgba(
            9,
            22,
            30,
            0.62
        );

    text-align: center;
}

.sector-preview span {
    display: block;

    color: #547688;

    font-size: 8px;

    letter-spacing:
        0.13em;
}

.sector-preview strong {
    display: block;

    margin-top: 6px;

    color: #9fe4ff;

    font-size: 13px;

    letter-spacing:
        0.1em;
}

.sector-preview p {
    margin:
        8px 0 0;

    color: #708c99;

    font-size: 9px;

    line-height: 1.5;
}

.preparation-overlay {
    position: fixed;

    inset: 0;

    z-index: 80;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            rgba(
                8,
                24,
                34,
                0.94
            ),
            rgba(
                0,
                3,
                7,
                0.97
            )
        );

    backdrop-filter:
        blur(8px);
}

.preparation-overlay[hidden] {
    display: none;
}

.preparation-header {
    text-align: center;
}

.preparation-kicker {
    color: #5b879b;

    font-size: 9px;

    letter-spacing:
        0.24em;
}

.preparation-title {
    margin-top: 7px;

    color: #dff7ff;

    font-size: 22px;
    font-weight: 700;

    letter-spacing:
        0.17em;
}

.preparation-memory {
    margin-top: 10px;

    color: #ffcc64;

    font-size: 11px;
    font-weight: 700;

    letter-spacing:
        0.12em;
}

.preparation-cards {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(
                150px,
                210px
            )
        );

    gap: 12px;

    width: 1100px;

    margin-top: 26px;
}


.preparation-cards.swarm-types-enabled {
    grid-template-columns:
        repeat(
            3,
            minmax(
                190px,
                250px
            )
        );

    justify-content: center;

    width: min(
        810px,
        calc(100vw - 48px)
    );
}

.preparation-cards.swarm-types-hidden {
    display: block;

    width: min(
        320px,
        calc(100vw - 48px)
    );

    margin-top: 18px;
}

.preparation-cards.swarm-types-hidden .preparation-action {
    padding: 13px 18px;

    font-size: 10px;
}

.preparation-card {
    display: flex;

    flex-direction: column;

    min-height: 230px;

    padding: 16px;

    border: 1px solid
        rgba(
            91,
            200,
            255,
            0.28
        );

    border-radius: 6px;

    background:
        linear-gradient(
            160deg,
            rgba(
                15,
                34,
                45,
                0.96
            ),
            rgba(
                5,
                12,
                18,
                0.97
            )
        );
}

.preparation-card.locked {
    border-color:
        rgba(
            100,
            120,
            130,
            0.16
        );

    opacity: 0.72;
}

.preparation-card strong {
    color: #a8e6ff;

    font-size: 12px;

    letter-spacing:
        0.08em;
}

.preparation-card p {
    flex: 1;

    margin:
        12px 0 18px;

    color: #718d9a;

    font-size: 10px;

    line-height: 1.55;
}

.preparation-action {
    width: 100%;

    padding: 10px;

    border: 1px solid
        #3c728a;

    border-radius: 4px;

    color: #dff7ff;

    background:
        rgba(
            13,
            34,
            44,
            0.95
        );

    font: inherit;

    font-size: 9px;
    font-weight: 700;

    letter-spacing:
        0.08em;

    cursor: pointer;
}

.preparation-action:hover:not(:disabled) {
    border-color:
        #68d5ff;

    transform:
        translateY(-1px);
}

.preparation-action:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}

.preparation-footnote {
    margin-top: 18px;

    color: #465e69;

    font-size: 8px;

    letter-spacing:
        0.12em;
}

.run-memory {
    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 20px;
}

.run-memory span {
    color: #668696;

    font-size: 9px;

    letter-spacing:
        0.14em;
}

.run-memory strong {
    margin-top: 5px;

    color: #ffcc64;

    font-size: 24px;
}

.run-memory small {
    margin-top: 4px;

    color: #728a95;

    font-size: 9px;

    letter-spacing:
        0.08em;
}

@media (
    max-width: 950px
) {
    .preparation-cards {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    150px,
                    1fr
                )
            );

        max-height: 65vh;

        overflow-y: auto;
    }
}

.core-action.pulse {
    border-color:
        rgba(
            105,
            220,
            255,
            0.42
        );

    color: #bcefff;
}

.core-action.pulse:hover:not(:disabled) {
    box-shadow:
        0 0 24px
        rgba(
            78,
            207,
            255,
            0.15
        );
}

.archive-research {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                190px,
                260px
            )
        );

    gap: 12px;

    width: 820px;

    margin-top: 22px;
}

.archive-card {
    display: flex;

    flex-direction: column;

    min-height: 155px;

    padding: 14px;

    border: 1px solid
        rgba(
            255,
            203,
            92,
            0.18
        );

    border-radius: 6px;

    background:
        rgba(
            18,
            17,
            12,
            0.82
        );
}

.archive-card.unlocked {
    border-color:
        rgba(
            255,
            203,
            92,
            0.5
        );
}

.archive-card strong {
    color: #ffd06b;

    font-size: 11px;

    letter-spacing:
        0.08em;
}

.archive-card p {
    flex: 1;

    color: #8e8877;

    font-size: 9px;

    line-height: 1.5;
}

.archive-action {
    padding: 9px;

    border: 1px solid
        #695b37;

    border-radius: 4px;

    color: #ffe3a3;

    background:
        rgba(
            37,
            31,
            17,
            0.95
        );

    font: inherit;

    font-size: 8px;
    font-weight: 700;

    letter-spacing:
        0.08em;

    cursor: pointer;
}

.archive-action:disabled {
    opacity: 0.42;

    cursor: not-allowed;
}

.preparation-section-title {
    margin-top: 26px;

    color: #718e9c;

    font-size: 9px;

    letter-spacing:
        0.18em;
}

.audio-control {
    position: fixed;

    right: 16px;
    bottom: 16px;

    z-index: 95;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 7px 9px;

    border: 1px solid
        rgba(
            105,
            199,
            255,
            0.28
        );

    border-radius: 4px;

    color: #789aaa;

    background:
        rgba(
            4,
            10,
            16,
            0.84
        );

    font: inherit;

    font-size: 8px;
    font-weight: 700;

    letter-spacing:
        0.09em;

    backdrop-filter:
        blur(5px);
}

.audio-control:hover {
    border-color:
        rgba(
            105,
            215,
            255,
            0.5
        );
}

.audio-control__mute {
    padding: 2px 3px;

    border: 0;

    color: inherit;

    background:
        transparent;

    font: inherit;

    font-size: inherit;
    font-weight: inherit;

    letter-spacing:
        inherit;

    cursor: pointer;
}

.audio-control__mute:hover {
    color: #d8f6ff;
}

.audio-control__volume {
    display: flex;
    align-items: center;
    gap: 5px;

    cursor: pointer;
}

.audio-control__label {
    color: #587786;

    font-size: 7px;
}

.audio-control__slider {
    width: 72px;

    accent-color: #69c7ff;

    cursor: pointer;
}

.audio-control__value {
    min-width: 22px;

    color: #9bb8c5;

    text-align: right;

    font-size: 7px;
    letter-spacing:
        0.04em;
}

.main-menu {
    position: fixed;

    inset: 0;

    z-index: 70;

    overflow: hidden;

    color: #dff7ff;

    background:
        #020407;
}

.main-menu[hidden] {
    display: none;
}

.main-menu-backdrop {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 30% 45%,
            rgba(
                29,
                112,
                143,
                0.16
            ),
            transparent 32%
        ),
        radial-gradient(
            circle at 75% 55%,
            rgba(
                87,
                39,
                118,
                0.1
            ),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #020407,
            #061018 55%,
            #020407
        );
}

.main-menu-backdrop::before {
    content: "";

    position: absolute;

    inset: -20%;

    opacity: 0.11;

    background-image:
        linear-gradient(
            rgba(
                85,
                180,
                220,
                0.16
            )
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(
                85,
                180,
                220,
                0.16
            )
            1px,
            transparent 1px
        );

    background-size:
        52px 52px;

    transform:
        perspective(800px)
        rotateX(62deg)
        translateY(22%);

    transform-origin:
        center;
}

.main-menu-content {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(
            360px,
            1fr
        )
        minmax(
            340px,
            520px
        );

    gap: 56px;

    align-items: center;

    width: 1180px;

    min-height: 900px;

    margin: 0 auto;
}

.main-menu-brand {
    min-width: 0;

    max-width: 620px;
}

.main-menu-kicker {
    color: #52798b;

    font-size: 10px;
    font-weight: 700;

    letter-spacing:
        0.28em;
}

.main-menu h1 {
    margin:
        8px 0 0;

    color: #e3f8ff;

    font-size: 92px;

    font-weight: 800;

    line-height: 0.95;

    letter-spacing:
        0.02em;

    white-space: nowrap;

    text-shadow:
        0 0 42px
        rgba(
            76,
            209,
            255,
            0.13
        );
}

.main-menu-tagline {
    margin-top: 18px;

    color: #77dfff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing:
        0.28em;
}

.main-menu-intro {
    max-width: 500px;

    margin:
        26px 0 0;

    color: #718d99;

    font-size: 13px;

    line-height: 1.75;
}

.main-menu-play {
    min-width: 260px;

    margin-top: 34px;

    padding:
        15px 28px;

    border: 1px solid
        #55cfff;

    border-radius: 5px;

    color: #e3f9ff;

    background:
        linear-gradient(
            180deg,
            rgba(
                18,
                62,
                80,
                0.97
            ),
            rgba(
                9,
                35,
                47,
                0.97
            )
        );

    box-shadow:
        0 0 26px
        rgba(
            61,
            193,
            240,
            0.08
        );

    font: inherit;

    font-size: 11px;
    font-weight: 800;

    letter-spacing:
        0.15em;

    cursor: pointer;

    transition:
        transform 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.main-menu-play:hover {
    transform:
        translateY(-2px);

    border-color:
        #a4ecff;

    box-shadow:
        0 0 34px
        rgba(
            61,
            193,
            240,
            0.2
        );
}

.main-menu-meta {
    display: flex;

    gap: 36px;

    margin-top: 28px;
}

.main-menu-meta > div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.main-menu-meta span {
    color: #455f6b;

    font-size: 8px;

    letter-spacing:
        0.12em;
}

.main-menu-meta strong {
    color: #9fb7c1;

    font-size: 10px;

    letter-spacing:
        0.06em;
}

.main-menu-meta > div:first-child strong {
    color: #ffd269;

    font-size: 16px;
}

.main-menu-guide {
    padding:
        24px 26px;

    border: 1px solid
        rgba(
            92,
            190,
            230,
            0.15
        );

    border-radius: 8px;

    background:
        linear-gradient(
            160deg,
            rgba(
                13,
                30,
                40,
                0.82
            ),
            rgba(
                4,
                10,
                15,
                0.9
            )
        );

    backdrop-filter:
        blur(9px);
}

.guide-heading {
    margin-bottom: 18px;

    color: #6b94a5;

    font-size: 9px;
    font-weight: 700;

    letter-spacing:
        0.2em;
}

.guide-step {
    display: grid;

    grid-template-columns:
        38px 1fr;

    gap: 11px;

    padding:
        13px 0;

    border-top: 1px solid
        rgba(
            91,
            152,
            177,
            0.1
        );
}

.guide-number {
    color: #345566;

    font-size: 10px;
    font-weight: 700;

    letter-spacing:
        0.08em;
}

.guide-step strong {
    color: #a6d9eb;

    font-size: 10px;

    letter-spacing:
        0.08em;
}

.guide-step p {
    margin:
        6px 0 0;

    color: #607985;

    font-size: 10px;

    line-height: 1.55;
}

.signal-legend {
    display: flex;

    gap: 19px;

    margin-top: 18px;

    padding-top: 17px;

    border-top: 1px solid
        rgba(
            91,
            152,
            177,
            0.12
        );
}

.signal-legend > div {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #6d8995;

    font-size: 8px;
    font-weight: 700;

    letter-spacing:
        0.08em;
}

.signal-dot {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.signal-dot.salvage {
    background: #55e88b;

    box-shadow:
        0 0 8px
        rgba(
            85,
            232,
            139,
            0.55
        );
}

.signal-dot.threat {
    background: #ff5353;

    box-shadow:
        0 0 8px
        rgba(
            255,
            83,
            83,
            0.55
        );
}

.signal-dot.ward {
    background: #4aa8ff;

    box-shadow:
        0 0 8px
        rgba(
            74,
            168,
            255,
            0.55
        );
}

.main-menu-version {
    position: absolute;

    right: 18px;
    bottom: 17px;

    z-index: 3;

    color: #29414d;

    font-size: 7px;

    letter-spacing:
        0.1em;
}

@media (
    max-width: 900px
) {
    .main-menu {
        overflow-y: auto;
    }

    .main-menu-content {
        grid-template-columns:
            1fr;

        gap: 30px;

        align-items: start;

        width:
            calc(
                100vw -
                36px
            );

        padding:
            70px 0;
    }

    .main-menu-guide {
        margin-bottom: 40px;
    }

    .main-menu-meta {
        flex-direction: column;

        gap: 12px;
    }
}

#swarmkind-ui-root {
    position: fixed;

    left: 0;
    top: 0;

    width: 1600px;
    height: 900px;

    z-index: 20;

    overflow: hidden;

    transform-origin:
        0 0;

    pointer-events: none;
}

#swarmkind-ui-root > * {
    pointer-events: auto;
}

#swarmkind-ui-root
.sector-status {
    pointer-events: none;
}

.camera-control {
    position: absolute;

    right: 16px;
    bottom: 52px;

    z-index: 30;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 6px;

    pointer-events: auto;
}

.camera-control-hint {
    padding:
        5px 8px;

    border-radius: 3px;

    color: #405f6d;

    background:
        rgba(
            2,
            8,
            12,
            0.68
        );

    font-size: 7px;
    font-weight: 700;

    letter-spacing:
        0.07em;

    white-space: nowrap;
}

.camera-control-row {
    display: flex;

    align-items: center;

    gap: 5px;

    padding: 5px;

    border: 1px solid
        rgba(
            99,
            199,
            240,
            0.18
        );

    border-radius: 5px;

    background:
        rgba(
            4,
            12,
            18,
            0.84
        );

    backdrop-filter:
        blur(5px);
}

.camera-control button {
    min-width: 28px;
    height: 28px;

    padding:
        0 8px;

    border: 1px solid
        rgba(
            94,
            184,
            220,
            0.24
        );

    border-radius: 3px;

    color: #9fc4d3;

    background:
        rgba(
            13,
            32,
            41,
            0.95
        );

    font: inherit;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.camera-control button:hover:not(:disabled) {
    border-color:
        #61cff8;

    color: #e0f8ff;
}

.camera-control button:disabled {
    opacity: 0.3;

    cursor: default;
}

.camera-control .camera-fit {
    min-width: 42px;

    font-size: 8px;

    letter-spacing:
        0.08em;
}

.camera-control
[data-camera="zoom"] {
    min-width: 40px;

    color: #6e93a3;

    font-size: 8px;
    font-weight: 700;

    text-align: center;
}


/*
 * Touch devices get intentionally
 * larger controls rather than relying
 * on tiny desktop buttons.
 */
@media (
    pointer: coarse
) {
    .camera-control button {
        min-width: 46px;
        height: 44px;

        font-size: 15px;
    }

    .camera-control
    .camera-fit {
        min-width: 58px;

        font-size: 10px;
    }

    .camera-control
    [data-camera="zoom"] {
        min-width: 52px;

        font-size: 10px;
    }

    .camera-control-hint {
        display: none;
    }

    .signal-panel button,
    .core-panel button,
    .upgrade-panel button,
    .sector-overlay button,
    .preparation-overlay button {
        min-height: 44px;
    }
}

.raid-banner {
    position: absolute;

    left: 50%;
    top: 92px;

    z-index: 40;

    width: 440px;

    padding:
        12px 18px
        13px;

    border-top:
        1px solid
        rgba(
            255,
            106,
            88,
            0.55
        );

    border-bottom:
        1px solid
        rgba(
            255,
            106,
            88,
            0.22
        );

    color: #d9edf4;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                32,
                10,
                12,
                0.9
            )
            16%,
            rgba(
                24,
                9,
                12,
                0.94
            )
            84%,
            transparent
        );

    text-align: center;

    pointer-events: none;

    opacity: 0;

    transform:
        translateX(-50%)
        translateY(-9px);

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.raid-banner[hidden] {
    display: none;
}

.raid-banner.show {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}

.raid-banner-eyebrow {
    color: #a45c58;

    font-size: 7px;
    font-weight: 800;

    letter-spacing:
        0.2em;
}

.raid-banner-title {
    margin-top: 4px;

    color: #ff9b8b;

    font-size: 15px;
    font-weight: 800;

    letter-spacing:
        0.12em;
}

.raid-banner-subtitle {
    margin-top: 5px;

    color: #738d98;

    font-size: 8px;

    letter-spacing:
        0.035em;
}

.raid-banner.boss {
    border-top-color:
        rgba(
            196,
            124,
            255,
            0.8
        );

    border-bottom-color:
        rgba(
            196,
            124,
            255,
            0.32
        );

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                28,
                13,
                41,
                0.92
            )
            16%,
            rgba(
                24,
                10,
                37,
                0.96
            )
            84%,
            transparent
        );
}

.raid-banner.boss
.raid-banner-eyebrow {
    color: #9365ad;
}

.raid-banner.boss
.raid-banner-title {
    color: #dab0ff;

    font-size: 17px;
}

.sector-routes {
    display: grid;

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

    gap: 10px;

    width: 920px;

    margin:
        16px auto 4px;
}

.sector-route {
    display: flex;

    flex-direction: column;

    min-height: 168px;

    padding:
        14px 15px;

    border:
        1px solid
        rgba(
            84,
            139,
            160,
            0.2
        );

    border-radius:
        6px;

    color:
        #91aab5;

    background:
        linear-gradient(
            160deg,
            rgba(
                10,
                24,
                31,
                0.94
            ),
            rgba(
                4,
                10,
                15,
                0.95
            )
        );

    font: inherit;

    text-align:
        left;

    cursor: pointer;

    transition:
        transform 120ms ease,
        border-color 120ms ease,
        background 120ms ease,
        box-shadow 120ms ease;
}

.sector-route:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(
            86,
            199,
            236,
            0.48
        );
}

.sector-route.selected {
    border-color:
        rgba(
            87,
            213,
            255,
            0.82
        );

    background:
        linear-gradient(
            160deg,
            rgba(
                12,
                43,
                56,
                0.97
            ),
            rgba(
                5,
                17,
                24,
                0.98
            )
        );

    box-shadow:
        0 0 24px
        rgba(
            62,
            190,
            235,
            0.1
        );
}

.sector-route-heading {
    color:
        #bdeaff;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.09em;
}

.sector-route-description {
    flex: 1;

    margin-top:
        9px;

    color:
        #607b87;

    font-size:
        9px;

    line-height:
        1.5;
}

.sector-route-effects {
    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-top:
        12px;

    padding-top:
        10px;

    border-top:
        1px solid
        rgba(
            89,
            137,
            155,
            0.12
        );

    font-size:
        8px;

    line-height:
        1.35;
}

.sector-route-effects span {
    display:
        inline-block;

    width: 47px;

    margin-right:
        4px;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.07em;
}

.sector-route-reward {
    color:
        #7edba0;
}

.sector-route-reward span {
    color:
        #4b9b68;
}

.sector-route-risk {
    color:
        #dc8e85;
}

.sector-route-risk span {
    color:
        #a15853;
}

.sector-memory-state {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(117, 217, 255, 0.32);
    background: rgba(7, 19, 27, 0.72);
}

.sector-memory-state > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sector-memory-state > div:nth-child(2) strong {
    color: #ff8b8b;
}

.sector-memory-state > div:nth-child(3) strong {
    color: #8fffb4;
}

.sector-memory-state small {
    grid-column: 1 / -1;
    opacity: 0.75;
    line-height: 1.35;
}

.run-memory-lost {
    color: #ff8b8b;
}
.main-menu-new-game {
    margin-top: 12px;
    padding: 7px 12px;
    border: 1px solid rgba(107, 153, 171, 0.2);
    border-radius: 4px;
    color: #4e6c78;
    background: transparent;
    font: inherit;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
}

.main-menu-new-game:hover {
    border-color: rgba(128, 197, 221, 0.5);
    color: #9cc3d0;
}

.main-menu-reset-confirm {
    width: 430px;
    max-width: 90vw;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 103, 103, 0.34);
    border-radius: 5px;
    background: rgba(35, 9, 13, 0.86);
}

.main-menu-reset-confirm[hidden] {
    display: none;
}

.main-menu-reset-confirm strong,
.main-menu-reset-confirm span {
    display: block;
}

.main-menu-reset-confirm strong {
    color: #ffd0d0;
    font-size: 9px;
    letter-spacing: 0.12em;
}

.main-menu-reset-confirm span {
    margin-top: 6px;
    color: #a77f84;
    font-size: 8px;
    line-height: 1.5;
}

.main-menu-reset-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.main-menu-reset-actions button {
    padding: 7px 10px;
    border: 1px solid rgba(120, 160, 175, 0.26);
    border-radius: 3px;
    color: #8da9b3;
    background: rgba(6, 14, 19, 0.9);
    font: inherit;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.main-menu-reset-actions button.danger {
    border-color: rgba(255, 96, 96, 0.48);
    color: #ffc3c3;
    background: rgba(61, 12, 17, 0.92);
}

.main-menu-reset-actions button:disabled {
    opacity: 0.45;
    cursor: default;
}

/* 13G-7 — Endless / scoreboard polish */

.hud-endless {
    margin: 6px 0 10px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 205, 92, 0.5);
    border-radius: 4px;
    color: #ffe49a;
    background: rgba(42, 29, 7, 0.76);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-align: center;
    box-shadow: 0 0 20px rgba(255, 193, 70, 0.08);
}

.hud-endless[hidden] {
    display: none;
}

.main-menu-secondary-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.main-menu-secondary-actions .main-menu-new-game,
.main-menu-scoreboard {
    margin-top: 0;
}

.main-menu-scoreboard {
    padding: 7px 12px;
    border: 1px solid rgba(255, 205, 92, 0.28);
    border-radius: 4px;
    color: #b9a16d;
    background: rgba(30, 23, 8, 0.34);
    font: inherit;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
}

.main-menu-scoreboard:hover {
    border-color: rgba(255, 213, 111, 0.64);
    color: #ffe4a1;
    background: rgba(44, 31, 8, 0.56);
}

.scoreboard-overlay,
.endless-decision-overlay {
    position: fixed;
    inset: 0;
    z-index: 92;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(1, 5, 8, 0.84);
    backdrop-filter: blur(8px);
}

.scoreboard-overlay[hidden],
.endless-decision-overlay[hidden] {
    display: none;
}

.scoreboard-panel {
    width: min(760px, 92vw);
    max-height: min(760px, 88vh);
    padding: 20px;
    border: 1px solid rgba(107, 208, 255, 0.34);
    border-radius: 7px;
    background:
        radial-gradient(circle at 80% 0%, rgba(87, 43, 119, 0.12), transparent 34%),
        linear-gradient(160deg, rgba(8, 23, 31, 0.98), rgba(3, 10, 15, 0.99));
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.58);
}

.scoreboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(104, 190, 225, 0.14);
}

.scoreboard-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scoreboard-header span,
.scoreboard-profile label,
.scoreboard-columns,
.scoreboard-status {
    color: #5f8494;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.scoreboard-header strong {
    color: #dff8ff;
    font-size: 18px;
    letter-spacing: 0.12em;
}

.scoreboard-header button {
    padding: 8px 11px;
    border: 1px solid rgba(111, 194, 224, 0.24);
    border-radius: 4px;
    color: #82a8b7;
    background: rgba(3, 12, 18, 0.8);
    font: inherit;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
}

.scoreboard-profile {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-top: 16px;
}

.scoreboard-profile label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scoreboard-profile input {
    width: 190px;
    padding: 8px 10px;
    border: 1px solid rgba(107, 208, 255, 0.3);
    border-radius: 4px;
    color: #dff8ff;
    background: rgba(3, 13, 19, 0.92);
    font: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    outline: none;
}

.scoreboard-profile input:focus {
    border-color: rgba(105, 220, 255, 0.78);
}

.scoreboard-profile small {
    max-width: 350px;
    color: #526d78;
    font-size: 8px;
    line-height: 1.45;
    text-align: right;
}

.scoreboard-columns,
.scoreboard-row {
    display: grid;
    grid-template-columns: 42px minmax(150px, 1fr) 120px 80px 70px;
    gap: 10px;
    align-items: center;
}

.scoreboard-columns {
    margin-top: 18px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(98, 181, 214, 0.14);
}

.scoreboard-list {
    max-height: 430px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(86, 173, 207, 0.45)
        transparent;
}

.scoreboard-list::-webkit-scrollbar {
    width: 9px;
}

.scoreboard-list::-webkit-scrollbar-track {
    margin-block: 6px;
    background: rgba(86, 173, 207, 0.035);
    border-left: 1px solid rgba(86, 173, 207, 0.05);
}

.scoreboard-list::-webkit-scrollbar-thumb {
    min-height: 42px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(86, 173, 207, 0.45);
    background-clip: content-box;
}

.scoreboard-list::-webkit-scrollbar-thumb:hover {
    background: rgba(113, 206, 240, 0.68);
    background-clip: content-box;
}

.scoreboard-list::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

.scoreboard-row {
    min-height: 38px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(84, 153, 181, 0.08);
    color: #708e9b;
    font-size: 9px;
}

.scoreboard-row:nth-child(1) {
    background: rgba(255, 204, 92, 0.055);
}

.scoreboard-row strong {
    color: #c7eaf6;
    font-size: 9px;
}

.scoreboard-row:nth-child(1) strong {
    color: #ffe19a;
}

.scoreboard-empty {
    padding: 42px 10px;
    color: #587684;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
}

.scoreboard-status {
    margin-top: 12px;
    text-align: center;
}

.endless-decision-panel {
    width: min(780px, 92vw);
    padding: 28px;
    border: 1px solid rgba(255, 199, 78, 0.38);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% -15%, rgba(255, 195, 67, 0.12), transparent 42%),
        linear-gradient(165deg, rgba(20, 20, 14, 0.99), rgba(4, 11, 16, 0.99));
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.65);
    text-align: center;
}

.endless-decision-kicker {
    color: #d9a94b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.endless-decision-panel h2 {
    margin: 8px 0 0;
    color: #fff0c0;
    font-size: 28px;
    letter-spacing: 0.13em;
}

.endless-decision-panel > p {
    max-width: 620px;
    margin: 16px auto 0;
    color: #79919a;
    font-size: 10px;
    line-height: 1.65;
}

.endless-decision-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 22px;
}

.endless-decision-stats > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 8px;
    border: 1px solid rgba(255, 205, 91, 0.12);
    background: rgba(30, 24, 10, 0.34);
}

.endless-decision-stats span {
    color: #796b4a;
    font-size: 7px;
    letter-spacing: 0.1em;
}

.endless-decision-stats strong {
    color: #ffe09a;
    font-size: 14px;
}

.endless-decision-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 22px;
}

.endless-decision-actions button {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px;
    border: 1px solid rgba(110, 196, 227, 0.27);
    border-radius: 5px;
    color: #afd6e3;
    background: rgba(7, 20, 27, 0.9);
    font: inherit;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.endless-decision-actions button:hover {
    transform: translateY(-2px);
    border-color: rgba(123, 218, 250, 0.68);
}

.endless-decision-actions button.push {
    border-color: rgba(255, 197, 73, 0.45);
    color: #ffe3a0;
    background: rgba(45, 31, 7, 0.82);
}

.endless-decision-actions button.push:hover {
    border-color: rgba(255, 213, 115, 0.86);
    background: rgba(62, 42, 7, 0.92);
}

.endless-decision-actions strong {
    font-size: 11px;
    letter-spacing: 0.12em;
}

.endless-decision-actions span {
    color: #69828d;
    font-size: 8px;
    line-height: 1.45;
}

.endless-decision-actions .push span {
    color: #a58b54;
}

.endless-decision-panel > small {
    display: block;
    margin-top: 18px;
    color: #665d43;
    font-size: 7px;
    letter-spacing: 0.1em;
}

@media (max-width: 760px) {
    .scoreboard-columns,
    .scoreboard-row {
        grid-template-columns: 32px minmax(100px, 1fr) 86px 58px 48px;
        gap: 5px;
    }

    .scoreboard-profile {
        align-items: stretch;
        flex-direction: column;
    }

    .scoreboard-profile small {
        text-align: left;
    }

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

    .endless-decision-actions {
        grid-template-columns: 1fr;
    }
}

/* 13G-7.3 — gameplay UI declutter/readability */
.swarm-hud {
    width: 220px;
}

.hud-role-grid {
    display: grid;
    gap: 5px;
    margin-top: 3px;
    padding: 9px 0 10px;
    border-top: 1px solid rgba(92, 202, 255, 0.10);
    border-bottom: 1px solid rgba(92, 202, 255, 0.10);
}

.hud-role-row {
    display: grid;
    grid-template-columns: 25px 1fr auto;
    align-items: center;
    gap: 7px;
    min-height: 26px;
    color: #6e8fa0;
    font-size: 9px;
    letter-spacing: 0.1em;
}

.hud-role-icon {
    width: 24px;
    height: 24px;
    overflow: visible;
}

.hud-role-row strong {
    color: #d4f2ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.core-panel {
    width: 760px;
}

.core-population {
    display: none;
}

.preparation-card {
    min-height: 205px;
}

.preparation-card p {
    margin: 12px 0 14px;
    color: #88a5b2;
    font-size: 10px;
    line-height: 1.45;
}

.upgrade-card {
    min-height: 125px;
    padding: 18px 20px;
}

.upgrade-card strong {
    margin-bottom: 11px;
}

@media (max-width: 800px) {
    .core-panel {
        width: min(560px, calc(100vw - 24px));
    }
}


/* 13G-7.9 — role readability + lightweight action feedback */
.hud-role-row {
    position: relative;
    border-radius: 4px;
    transition: background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

.hud-role-row[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    z-index: 140;
    width: 250px;
    padding: 8px 10px;
    transform: translate(4px, -50%);
    border: 1px solid rgba(113, 203, 242, 0.34);
    border-radius: 4px;
    color: #d8f4ff;
    background: rgba(3, 10, 15, 0.97);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
    font-size: 9px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.02em;
    text-align: left;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 100ms ease, transform 100ms ease, visibility 100ms ease;
}

.hud-role-row[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

.hud-role-row.tutorial-highlight {
    color: #bff4ff;
    background: rgba(78, 207, 255, 0.10);
    box-shadow: 0 0 0 1px rgba(95, 219, 255, 0.42), 0 0 18px rgba(68, 202, 255, 0.18);
}

.signal-feedback {
    min-height: 12px;
    margin: -3px 0 3px;
    color: #ffc96b;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
}

.signal-feedback[hidden] {
    display: none;
}

.signal-feedback.pulse {
    animation: action-feedback-pulse 260ms ease-out;
}

.signal-button.unavailable {
    opacity: 0.48;
    border-color: rgba(255, 191, 91, 0.28);
}

.signal-button.unavailable:hover {
    opacity: 0.72;
    border-color: rgba(255, 201, 107, 0.64);
    color: #ffd88b;
}

@keyframes action-feedback-pulse {
    0% { transform: translateY(2px); opacity: 0.25; }
    100% { transform: translateY(0); opacity: 1; }
}


/* 13G-7.20 — live role stats + searchable system guide */
.hud-faq-button {
    width: 100%;
    margin-top: 9px;
    padding: 7px 8px;
    border: 1px solid rgba(103, 201, 242, 0.22);
    border-radius: 3px;
    color: #79aabb;
    background: rgba(4, 18, 25, 0.72);
    font: inherit;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.hud-faq-button:hover,
.hud-faq-button:focus-visible {
    color: #d7f6ff;
    border-color: rgba(103, 216, 255, 0.62);
    background: rgba(15, 49, 62, 0.9);
    outline: none;
}

.hud-role-row[data-tooltip]::after {
    width: 330px;
}

.faq-overlay {
    position: fixed;
    inset: 0;
    z-index: 2200;
    pointer-events: auto;
}

.faq-overlay[hidden] {
    display: none;
}

.faq-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 5, 8, 0.72);
    backdrop-filter: blur(2px);
}

.faq-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(820px, calc(100vw - 48px));
    max-height: min(760px, calc(100vh - 48px));
    transform: translate(-50%, -50%);
    overflow: hidden;
    border: 1px solid rgba(93, 202, 244, 0.32);
    border-radius: 6px;
    color: #b9d7e1;
    background:
        linear-gradient(
            180deg,
            rgba(7, 25, 34, 0.99),
            rgba(3, 12, 17, 0.995)
        );
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(113, 221, 255, 0.04) inset;
}

.faq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 22px 16px;
    border-bottom: 1px solid rgba(103, 202, 240, 0.14);
}

.faq-header span {
    display: block;
    margin-bottom: 5px;
    color: #4e9bb8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.faq-header h2 {
    margin: 0;
    color: #e3f8ff;
    font-size: 21px;
    letter-spacing: 0.1em;
}

.faq-close {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(103, 202, 240, 0.26);
    border-radius: 3px;
    color: #b7dce8;
    background: rgba(10, 35, 45, 0.7);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.faq-close:hover,
.faq-close:focus-visible {
    color: #ffffff;
    border-color: rgba(103, 220, 255, 0.65);
    outline: none;
}

.faq-search-wrap {
    padding: 13px 22px;
    border-bottom: 1px solid rgba(103, 202, 240, 0.1);
}

.faq-search {
    box-sizing: border-box;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid rgba(103, 202, 240, 0.22);
    border-radius: 3px;
    color: #d8f5ff;
    background: rgba(2, 10, 14, 0.72);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.faq-search::placeholder {
    color: #527482;
}

.faq-search:focus {
    border-color: rgba(104, 220, 255, 0.58);
    outline: none;
}

.faq-content {
    min-height: 0;
    padding: 10px 22px 18px;
    overflow-y: auto;
    scrollbar-color: rgba(86, 173, 207, 0.45) transparent;
}

.faq-entry {
    border-bottom: 1px solid rgba(103, 202, 240, 0.09);
}

.faq-entry[hidden] {
    display: none;
}

.faq-entry summary {
    position: relative;
    padding: 14px 28px 14px 2px;
    color: #9fd6e8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.1em;
    cursor: pointer;
    list-style: none;
}

.faq-entry summary::-webkit-details-marker {
    display: none;
}

.faq-entry summary::after {
    content: "+";
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    color: #5da9c5;
    font-size: 16px;
}

.faq-entry[open] summary::after {
    content: "−";
}

.faq-entry summary:hover {
    color: #e2f8ff;
}

.faq-entry-body {
    padding: 0 26px 17px 2px;
    color: #87aab7;
    font-size: 11px;
    line-height: 1.62;
    letter-spacing: 0.01em;
}

.faq-entry-body strong {
    color: #c8edf8;
    font-weight: 800;
}

.faq-entry-visuals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}

.faq-visual-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 11px;
    border: 1px solid color-mix(in srgb, var(--faq-accent) 34%, rgba(103, 202, 240, 0.14));
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(8, 26, 34, 0.92), rgba(5, 16, 22, 0.92));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.015) inset;
}

.faq-visual-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--faq-accent) 9%, rgba(255, 255, 255, 0.02));
}

.faq-visual-svg {
    width: 42px;
    height: 42px;
    overflow: visible;
}

.faq-visual-copy {
    min-width: 0;
}

.faq-visual-copy strong {
    display: block;
    margin-bottom: 3px;
    color: #def5ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.faq-visual-copy span {
    display: block;
    color: #79a1af;
    font-size: 9px;
    line-height: 1.45;
    letter-spacing: 0.02em;
}

.faq-entry-copy {
    display: block;
}

.faq-empty {
    padding: 30px 0;
    color: #5d7f8b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-align: center;
}

.faq-footer {
    padding: 11px 22px;
    border-top: 1px solid rgba(103, 202, 240, 0.11);
    color: #537887;
    background: rgba(0, 8, 12, 0.45);
    font-size: 9px;
    letter-spacing: 0.05em;
}

@media (max-width: 760px) {
    .faq-panel {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .faq-header,
    .faq-search-wrap,
    .faq-content,
    .faq-footer {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hud-role-row[data-tooltip]::after {
        width: 250px;
    }
}


.preparation-guide-button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(103, 202, 240, 0.18);
    border-radius: 3px;
    color: #6f9cab;
    background: rgba(5, 21, 28, 0.72);
    font: inherit;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.09em;
    cursor: pointer;
}

.preparation-guide-button:hover,
.preparation-guide-button:focus-visible {
    color: #d9f5ff;
    border-color: rgba(103, 218, 255, 0.56);
    background: rgba(12, 44, 56, 0.82);
    outline: none;
}

/* 13G-7.21 — dangerous raid readability */
.raid-banner-hazards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-top: 9px;
}

.raid-banner-hazards[hidden] {
    display: none;
}

.raid-hazard {
    --raid-hazard-color: #ff9b8b;

    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 18px;
    padding: 2px 7px 2px 5px;
    border: 1px solid color-mix(in srgb, var(--raid-hazard-color) 42%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--raid-hazard-color) 84%, #ffffff);
    background: color-mix(in srgb, var(--raid-hazard-color) 8%, rgba(5, 10, 14, 0.88));
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.raid-hazard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    color: var(--raid-hazard-color);
    background: color-mix(in srgb, var(--raid-hazard-color) 11%, transparent);
    font-size: 10px;
    line-height: 1;
}

.raid-hazard-volatile {
    --raid-hazard-color: #ff58ce;
}

.raid-hazard-armored {
    --raid-hazard-color: #64a8ff;
}

.raid-hazard-swift {
    --raid-hazard-color: #ffe45e;
}

.raid-hazard-jammer {
    --raid-hazard-color: #d36cff;
}

.raid-hazard-aegis {
    --raid-hazard-color: #6ee7ff;
}

.raid-hazard-hunter-grid {
    --raid-hazard-color: #ff6969;
}

.raid-hazard-siege-lock {
    --raid-hazard-color: #63b8ff;
}

.raid-hazard-command-mesh {
    --raid-hazard-color: #c987ff;
}

.raid-hazard-multi-stage {
    --raid-hazard-color: #ffb45e;
}

/* 13G-7.22 — upgraded run summary */
.run-summary {
    box-sizing: border-box;
    padding: 28px 18px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(86, 173, 207, 0.45) transparent;
}

.run-summary::-webkit-scrollbar {
    width: 9px;
}

.run-summary::-webkit-scrollbar-track {
    background: rgba(86, 173, 207, 0.035);
}

.run-summary::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(86, 173, 207, 0.45);
    background-clip: content-box;
}

.run-summary::-webkit-scrollbar-thumb:hover {
    background: rgba(113, 206, 240, 0.68);
    background-clip: content-box;
}

.run-summary-title {
    margin-bottom: 20px;
}

.run-summary-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    box-sizing: border-box;
    width: min(520px, 92vw);
}

.run-summary-stats > div {
    min-width: 0;
}

.run-summary-build {
    box-sizing: border-box;
    width: min(520px, 92vw);
    margin-top: 14px;
    padding: 13px 15px 14px;
    border: 1px solid rgba(93, 185, 220, 0.14);
    border-radius: 5px;
    background:
        linear-gradient(
            155deg,
            rgba(15, 35, 44, 0.72),
            rgba(5, 14, 19, 0.84)
        );
}

.run-summary-build[hidden] {
    display: none;
}

.run-build-heading {
    margin-bottom: 9px;
    color: #5d899a;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.run-build-swarm-type {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(93, 185, 220, 0.1);
}

.run-build-swarm-type span,
.run-build-group > span {
    color: #587582;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.run-build-swarm-type strong {
    color: #d9f3ff;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.run-build-group {
    margin-top: 10px;
}

.run-build-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.run-build-chip {
    padding: 4px 7px;
    border: 1px solid rgba(96, 190, 226, 0.16);
    border-radius: 999px;
    color: #91bdcc;
    background: rgba(14, 34, 43, 0.72);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.045em;
}

.run-build-chip.major {
    border-color: rgba(196, 124, 255, 0.28);
    color: #d7aff7;
    background: rgba(39, 19, 52, 0.58);
}

.run-build-empty {
    color: #405c68;
    font-size: 8px;
    letter-spacing: 0.08em;
}

.run-memory {
    margin-top: 15px;
}

.restart-button {
    margin-top: 18px;
}

@media (max-width: 600px) {
    .run-summary-stats {
        grid-template-columns: 1fr;
    }

    .run-summary-title {
        font-size: 23px;
        letter-spacing: 0.15em;
        text-align: center;
    }

    .run-summary-subtitle {
        max-width: 88vw;
        text-align: center;
        line-height: 1.5;
    }
}

/* 13G-7.23 — first-discovery system callouts */
.discovery-callout {
    --discovery-accent: #6ee7ff;

    position: fixed;
    top: 94px;
    right: 22px;
    z-index: 58;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    box-sizing: border-box;
    width: min(390px, calc(100vw - 44px));
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--discovery-accent) 42%, rgba(98, 181, 214, 0.12));
    border-radius: 6px;
    background:
        radial-gradient(
            circle at 0 0,
            color-mix(in srgb, var(--discovery-accent) 13%, transparent),
            transparent 45%
        ),
        rgba(4, 13, 18, 0.97);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.52);
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.discovery-callout[hidden] {
    display: none;
}

.discovery-callout.show {
    opacity: 1;
    transform: translateX(0);
}

.discovery-callout-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 1px solid color-mix(in srgb, var(--discovery-accent) 30%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--discovery-accent) 6%, rgba(255, 255, 255, 0.01));
}

.discovery-callout-svg {
    width: 46px;
    height: 46px;
}

.discovery-callout-eyebrow {
    color: color-mix(in srgb, var(--discovery-accent) 74%, #9fb4bd);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.discovery-callout-title {
    margin-top: 3px;
    color: #e4f7ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.discovery-callout-description {
    margin-top: 6px;
    color: #7899a6;
    font-size: 9px;
    line-height: 1.52;
}

.discovery-callout-actions {
    display: flex;
    gap: 7px;
    margin-top: 10px;
}

.discovery-callout-actions button {
    padding: 6px 8px;
    border-radius: 3px;
    font: inherit;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.09em;
    cursor: pointer;
}

.discovery-callout-guide {
    border: 1px solid color-mix(in srgb, var(--discovery-accent) 50%, transparent);
    color: #dff7ff;
    background: color-mix(in srgb, var(--discovery-accent) 10%, rgba(8, 23, 29, 0.94));
}

.discovery-callout-dismiss {
    border: 1px solid rgba(111, 149, 163, 0.2);
    color: #7694a0;
    background: rgba(8, 18, 23, 0.82);
}

.discovery-callout-actions button:hover,
.discovery-callout-actions button:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.16);
}

@media (max-width: 700px) {
    .discovery-callout {
        top: 78px;
        right: 12px;
        width: min(360px, calc(100vw - 24px));
    }
}

.run-summary {
    justify-content: flex-start;
    padding-top: clamp(28px, 6vh, 64px);
    padding-bottom: 36px;
}

.raid-hazard-icon svg {
    width: 12px;
    height: 12px;
}

/* Swarmkind desktop cursor language. Keep touch/coarse-pointer devices native. */
@media (pointer: fine) {
    html,
    body,
    canvas,
    #app {
        cursor:
            url("./assets/cursor-default.svg") 4 4,
            default;
    }

    button,
    a,
    select,
    input[type="button"],
    input[type="submit"],
    [role="button"],
    [data-clickable="true"],
    .archive-node,
    .firmware-card,
    .major-firmware-card,
    .milestone-card,
    .threat-level-card {
        cursor:
            url("./assets/cursor-interactive.svg") 14 14,
            pointer !important;
    }

    button:disabled,
    input:disabled,
    select:disabled,
    [aria-disabled="true"] {
        cursor:
            url("./assets/cursor-default.svg") 4 4,
            not-allowed !important;
    }
}


/* Main menu — quiet launch-screen layout. Preserves the existing Swarmkind visual language. */
.main-menu-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(980px, calc(100vw - 48px));
    min-height: 100vh;
    margin: 0 auto;
}

.main-menu-brand {
    width: min(760px, 100%);
    max-width: none;
    text-align: center;
}

.main-menu-kicker {
    color: #52798b;
    font-size: 9px;
    letter-spacing: 0.32em;
}

.main-menu h1 {
    margin-top: 12px;
    font-size: clamp(58px, 7vw, 104px);
    line-height: 0.92;
}

.main-menu-tagline {
    margin-top: 20px;
    font-size: 12px;
    letter-spacing: 0.34em;
}

.main-menu-intro,
.main-menu-guide {
    display: none;
}

.main-menu-play {
    display: block;
    width: min(320px, 100%);
    min-width: 0;
    margin: 42px auto 0;
    padding: 16px 30px;
}


.main-menu-secondary-actions {
    justify-content: center;
    width: min(320px, 100%);
    gap: 10px;
    margin: 14px auto 0;
}

.main-menu-secondary-actions .main-menu-scoreboard,
.main-menu-secondary-actions .main-menu-new-game {
    flex: 1 1 0;
    min-height: 38px;
    padding: 9px 14px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.13em;
    background: rgba(6, 18, 24, 0.82);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.main-menu-secondary-actions .main-menu-scoreboard {
    border-color: rgba(255, 205, 92, 0.42);
    color: #c8ae72;
    background: rgba(35, 27, 10, 0.56);
}

.main-menu-secondary-actions .main-menu-new-game {
    border-color: rgba(92, 190, 230, 0.34);
    color: #7fa7b7;
    background: rgba(7, 25, 33, 0.64);
}

.main-menu-secondary-actions .main-menu-scoreboard:hover {
    border-color: rgba(255, 219, 124, 0.72);
    color: #ffe1a0;
    background: rgba(47, 35, 10, 0.7);
}

.main-menu-secondary-actions .main-menu-new-game:hover {
    border-color: rgba(111, 211, 247, 0.64);
    color: #b6d7e3;
    background: rgba(10, 35, 45, 0.76);
}

.main-menu-meta {
    justify-content: center;
    gap: 34px;
    margin-top: 34px;
}

.main-menu-meta > div {
    align-items: center;
}

.main-menu-meta > div + div {
    position: relative;
}

.main-menu-meta > div + div::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 3px;
    bottom: 3px;
    width: 1px;
    background: rgba(77, 129, 149, 0.13);
}

.main-menu-reset-confirm {
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

@media (max-width: 900px) {
    .main-menu {
        overflow-y: auto;
    }

    .main-menu-content {
        width: min(720px, calc(100vw - 32px));
        min-height: 100svh;
        padding: 56px 0 72px;
    }

    .main-menu h1 {
        font-size: clamp(50px, 13vw, 78px);
        white-space: normal;
    }

    .main-menu-play {
        margin-top: 34px;
    }

    .main-menu-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 26px;
    }
}

@media (max-width: 520px) {
    .main-menu-content {
        width: calc(100vw - 24px);
        padding-top: 44px;
    }

    .main-menu-kicker {
        font-size: 7px;
    }

    .main-menu-tagline {
        font-size: 9px;
        letter-spacing: 0.25em;
    }


    .main-menu-meta {
        margin-top: 28px;
    }
}

/* 0.14.1 — subtle space depth for menu surfaces */
.main-menu-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.72;
    background:
        radial-gradient(
            circle at -4% 34%,
            rgba(5, 10, 16, 0.98) 0 155px,
            rgba(68, 121, 145, 0.08) 157px,
            transparent 160px
        ),
        radial-gradient(
            circle at 103% 74%,
            rgba(5, 9, 15, 0.98) 0 210px,
            rgba(90, 67, 113, 0.07) 212px,
            transparent 215px
        ),
        radial-gradient(
            circle at 84% -9%,
            rgba(7, 13, 19, 0.94) 0 115px,
            rgba(70, 124, 146, 0.055) 117px,
            transparent 120px
        );
}

/*
 * Mobile readability pass.
 * The DOM UI is authored in a 1600x900 virtual space and then scaled down
 * with the game viewport. On phones that can make otherwise sensible 8-11px
 * labels physically tiny, so touch-first devices get larger virtual type.
 */
@media (pointer: coarse), (hover: none) and (max-width: 1100px) {
    #swarmkind-ui-root button,
    #swarmkind-ui-root input {
        font-size: 16px !important;
    }

    #swarmkind-ui-root small,
    #swarmkind-ui-root label {
        font-size: 14px !important;
    }

    #swarmkind-ui-root p,
    #swarmkind-ui-root summary {
        font-size: 16px !important;
    }

    .swarm-hud {
        width: 280px;
        padding: 17px 19px;
    }

    .hud-title {
        font-size: 22px;
    }

    .hud-threat,
    .hud-wave,
    .hud-endless {
        font-size: 17px;
    }

    .hud-help,
    .hud-signal,
    .signal-feedback,
    .hud-faq-button {
        font-size: 15px;
    }

    .hud-role-row {
        grid-template-columns: 34px 1fr auto;
        min-height: 34px;
        font-size: 16px;
    }

    .hud-role-icon {
        width: 32px;
        height: 32px;
    }

    .hud-role-row strong {
        font-size: 19px;
    }

    .signal-panel {
        width: 265px;
        padding: 16px;
    }

    .panel-title {
        font-size: 19px;
    }

    .bandwidth {
        font-size: 16px;
    }

    .signal-button,
    .signal-clear {
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 17px !important;
    }

    .signal-hotkey,
    .signal-button::after {
        font-size: 14px;
    }

    .core-panel {
        width: 900px;
        padding: 15px 18px;
    }

    .core-header-stat,
    .core-health-label,
    .core-queue,
    .core-feedback {
        font-size: 16px !important;
    }

    .core-header-stat strong,
    .core-health-label strong,
    .core-population strong {
        font-size: 19px !important;
    }

    .core-action {
        font-size: 16px !important;
    }

    .onboarding-panel {
        width: 650px !important;
        padding: 18px 22px 20px !important;
    }

    .onboarding-panel > div:nth-of-type(1) {
        font-size: 21px !important;
    }

    .onboarding-panel > div:nth-of-type(2) {
        font-size: 27px !important;
    }

    .onboarding-panel > div:nth-of-type(3) {
        font-size: 20px !important;
        line-height: 1.5 !important;
    }

    .onboarding-panel > button {
        font-size: 17px !important;
        min-width: 220px !important;
        padding: 12px 18px !important;
    }

    .tutorial-spotlight > div:not([data-side]) {
        font-size: 17px;
    }

    .tutorial-spotlight strong {
        font-size: 18px !important;
    }

    .tutorial-spotlight span,
    .tutorial-spotlight b {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .upgrade-title,
    .sector-title,
    .preparation-title,
    .faq-header h2,
    .scoreboard-header strong,
    .milestone-title,
    .archive-skills-title,
    .major-firmware-title,
    .run-summary-title {
        font-size: 26px !important;
    }

    .upgrade-card strong,
    .preparation-card strong,
    .archive-card strong,
    .major-firmware-card strong,
    .faq-entry summary,
    .milestone-card-topline strong,
    .archive-skill-tooltip-title,
    .sector-route-heading,
    .endless-decision-actions strong {
        font-size: 18px !important;
    }

    .upgrade-card span,
    .preparation-card p,
    .archive-card p,
    .major-firmware-description,
    .major-firmware-effect,
    .faq-entry-body,
    .faq-visual-copy span,
    .milestone-card p,
    .archive-skill-tooltip p,
    .archive-skill-tooltip-effect,
    .sector-route-description,
    .sector-warning,
    .sector-status-description,
    .endless-decision-actions span,
    .discovery-callout-description {
        font-size: 16px !important;
    }

    .preparation-kicker,
    .preparation-memory,
    .preparation-footnote,
    .archive-skills-kicker,
    .archive-skills-memory,
    .archive-skills-intro,
    .milestone-kicker,
    .milestone-memory,
    .scoreboard-header span,
    .scoreboard-profile label,
    .scoreboard-columns,
    .scoreboard-status,
    .run-summary-subtitle,
    .run-build-heading,
    .run-build-swarm-type span,
    .run-build-group > span,
    .discovery-callout-eyebrow,
    .raid-hazard {
        font-size: 15px !important;
    }

    .scoreboard-row,
    .scoreboard-row strong,
    .run-summary-stats > div,
    .run-summary-stats strong,
    .run-build-chip,
    .run-build-empty,
    .sector-details > div:not(.sector-warning),
    .faq-visual-copy strong,
    .milestone-summary span,
    .milestone-summary strong,
    .milestone-section-header strong,
    .milestone-section-header span,
    .archive-skill-branch-header strong,
    .archive-skill-branch-header span,
    .archive-skill-tier-label,
    .archive-skill-tooltip-kicker,
    .archive-skill-tooltip-type,
    .threat-level-selector-heading,
    .threat-level-button-title,
    .threat-level-detail {
        font-size: 16px !important;
    }

    .preparation-cards {
        max-height: 700px;
    }

    .faq-panel {
        width: 1160px;
        max-height: 820px;
    }

    .scoreboard-panel {
        width: 1080px;
        max-height: 810px;
    }

    .preparation-cards.swarm-types-enabled {
        width: 980px;
    }

    .upgrade-choices {
        width: 1180px;
    }

    .discovery-callout {
        width: 470px;
    }

    .discovery-callout-title {
        font-size: 20px;
    }

    .main-menu-content {
        width: 1180px;
        min-height: 900px;
        padding: 0;
    }

    .main-menu h1 {
        font-size: 92px;
    }

    .main-menu-kicker {
        font-size: 15px;
    }

    .main-menu-tagline {
        font-size: 17px;
    }

    .main-menu-secondary-actions .main-menu-scoreboard,
    .main-menu-secondary-actions .main-menu-new-game {
        font-size: 15px !important;
    }

    .main-menu-meta span,
    .main-menu-meta strong,
    .main-menu-version {
        font-size: 14px !important;
    }
}


/* src/ui/ArchiveTree.css */
.preparation-header-compact {
    padding-bottom: 10px;
}

.preparation-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.preparation-section-title-primary {
    margin-top: 18px;
}

.archive-skills-button {
    position: relative;
    min-width: 230px;
    min-height: 40px;
    padding: 0 42px 0 18px;
    border: 1px solid rgba(117, 217, 255, 0.38);
    background: rgba(7, 22, 31, 0.9);
    color: #bfefff;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    cursor: pointer;
    transition:
        border-color 120ms ease,
        background 120ms ease,
        box-shadow 120ms ease,
        transform 120ms ease;
}

.archive-skills-button:hover,
.archive-skills-button:focus-visible {
    border-color: rgba(117, 217, 255, 0.78);
    background: rgba(10, 35, 47, 0.96);
    outline: none;
}

.archive-skills-button:active {
    transform: translateY(1px);
}

.archive-skills-button.has-affordable {
    border-color: rgba(131, 255, 178, 0.82);
    box-shadow:
        0 0 0 1px rgba(131, 255, 178, 0.14),
        0 0 22px rgba(131, 255, 178, 0.15);
}

.archive-skills-badge {
    position: absolute;
    top: 50%;
    right: 12px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    transform: translateY(-50%);
    border: 1px solid rgba(139, 255, 183, 0.9);
    border-radius: 11px;
    background: rgba(22, 72, 47, 0.92);
    color: #aaffc6;
    font-size: 10px;
    line-height: 19px;
    text-align: center;
    box-sizing: border-box;
}

.archive-skills-modal[hidden] {
    display: none;
}

.archive-skills-modal {
    position: absolute;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
}

.archive-skills-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 5, 8, 0.86);
    backdrop-filter: blur(5px);
}

.archive-skills-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(1540px, calc(100% - 24px));
    height: min(820px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    overflow: hidden;
    border: 1px solid rgba(117, 217, 255, 0.38);
    background:
        linear-gradient(
            180deg,
            rgba(7, 20, 29, 0.995),
            rgba(3, 10, 16, 0.998)
        );
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.64),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.archive-skills-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(117, 217, 255, 0.18);
    box-sizing: border-box;
}

.archive-skills-kicker {
    margin-bottom: 4px;
    color: rgba(117, 217, 255, 0.6);
    font-size: 9px;
    letter-spacing: 0.18em;
}

.archive-skills-title {
    display: block;
    color: #dff7ff;
    font-size: 20px;
    letter-spacing: 0.11em;
}

.archive-skills-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.archive-skills-respec {
    min-width: 150px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 194, 107, 0.34);
    background: rgba(39, 27, 12, 0.68);
    color: #ffd596;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition:
        border-color 120ms ease,
        background 120ms ease,
        color 120ms ease,
        box-shadow 120ms ease;
}

.archive-skills-respec:hover:not(:disabled),
.archive-skills-respec:focus-visible:not(:disabled) {
    border-color: rgba(255, 204, 123, 0.78);
    background: rgba(62, 40, 14, 0.88);
    color: #ffe7bd;
    outline: none;
}

.archive-skills-respec.confirm {
    border-color: rgba(255, 111, 111, 0.82);
    background: rgba(75, 20, 20, 0.92);
    color: #ffd1d1;
    box-shadow: 0 0 18px rgba(255, 82, 82, 0.14);
}

.archive-skills-respec:disabled {
    cursor: default;
    opacity: 0.34;
}

.archive-skills-memory {
    color: #ffd36b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.archive-skills-close {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(117, 217, 255, 0.3);
    background: rgba(9, 26, 36, 0.86);
    color: #ccefff;
    font: inherit;
    font-size: 22px;
    line-height: 34px;
    cursor: pointer;
}

.archive-skills-close:hover,
.archive-skills-close:focus-visible {
    border-color: rgba(117, 217, 255, 0.8);
    background: rgba(14, 42, 56, 0.95);
    outline: none;
}

.archive-skills-intro {
    padding: 8px 18px;
    border-bottom: 1px solid rgba(117, 217, 255, 0.1);
    color: rgba(205, 232, 242, 0.66);
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: 0.035em;
}

/*
 * Desktop layout:
 * one coherent four-column Archive board + one fixed details rail.
 * The details rail never participates in tree sizing, so hover/pinning
 * cannot move the skill tree.
 */
.archive-skills-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 286px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.archive-skill-branches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
    min-height: 0;
    padding: 12px;
    overflow: auto;
    background:
        radial-gradient(
            circle at 50% 16%,
            rgba(71, 185, 224, 0.035),
            transparent 46%
        );
}

/*
 * Branches are columns in one shared board rather than four cards.
 */
.archive-skill-branch {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    border: 0;
    border-left: 1px solid rgba(117, 217, 255, 0.12);
    background: transparent;
}

.archive-skill-branch:first-child {
    border-left: 0;
}

.archive-skill-branch-header {
    min-height: 58px;
    padding: 10px 8px 9px;
    border-bottom: 1px solid rgba(117, 217, 255, 0.13);
    box-sizing: border-box;
    text-align: center;
}

.archive-skill-branch-header strong,
.archive-skill-branch-header span {
    display: block;
}

.archive-skill-branch-header strong {
    color: #d5f4ff;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.075em;
}

.archive-skill-branch-header span {
    margin-top: 5px;
    color: rgba(117, 217, 255, 0.5);
    font-size: 7px;
    letter-spacing: 0.12em;
}

.archive-skill-track {
    position: relative;
    display: grid;
    grid-template-rows:
        repeat(
            5,
            minmax(82px, 1fr)
        );
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px 8px 24px;
}

/*
 * Exact prerequisite connector layer.
 *
 * Lines are drawn by PreparationPanel from the prerequisite arrays in
 * archive.ts, using the real laid-out positions of parent/child nodes.
 * This means a tooltip requirement and its visible connector can no
 * longer disagree.
 */
.archive-skill-connectors {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.archive-skill-connector {
    fill: none;
    stroke: rgba(117, 217, 255, 0.2);
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.archive-skill-connector.alternative {
    stroke-dasharray: 4 5;
}

.archive-skill-connector.locked {
    stroke: rgba(117, 217, 255, 0.13);
}

.archive-skill-connector.satisfied {
    stroke: rgba(117, 217, 255, 0.5);
    filter: drop-shadow(
        0 0 2px
        rgba(117, 217, 255, 0.16)
    );
}

.archive-skill-tier {
    position: relative;
    z-index: 2;
    display: block;
    min-height: 92px;
}

.archive-skill-tier-label {
    position: absolute;
    top: 50%;
    left: 2px;
    z-index: 4;
    width: 22px;
    height: 18px;
    transform: translateY(-50%);
    border: 1px solid rgba(117, 217, 255, 0.16);
    border-radius: 10px;
    background: rgba(3, 11, 17, 0.96);
    color: rgba(174, 225, 243, 0.5);
    font-size: 7px;
    line-height: 16px;
    text-align: center;
}

.archive-skill-tier-nodes {
    position: absolute;
    inset:
        0
        12px
        0
        28px;
    z-index: 2;
}

.archive-skill-node {
    position: absolute;
    top: 50%;
    left: var(
        --archive-node-x,
        50%
    );
    width: 44px;
    height: 44px;
    padding: 0;
    transform:
        translate(
            -50%,
            -50%
        );
    border: 1px solid rgba(117, 217, 255, 0.28);
    background: rgba(5, 16, 24, 0.985);
    color: #b9e7f7;
    font: inherit;
    cursor: pointer;
    transition:
        border-color 100ms ease,
        background 100ms ease,
        box-shadow 100ms ease,
        opacity 100ms ease,
        transform 100ms ease;
}

.archive-skill-node:hover,
.archive-skill-node:focus-visible,
.archive-skill-node.selected {
    z-index: 5;
    border-color: rgba(117, 217, 255, 0.9);
    background: rgba(11, 39, 51, 0.99);
    outline: none;
    transform:
        translate(
            -50%,
            calc(-50% - 1px)
        );
}

.archive-skill-node-major {
    border-width: 2px;
}

.archive-skill-node-capstone {
    border-width: 2px;
    box-shadow:
        inset 0 0 0 2px rgba(117, 217, 255, 0.08),
        0 0 12px rgba(117, 217, 255, 0.05);
}

.archive-skill-node-locked {
    opacity: 0.28;
}

.archive-skill-node-funding {
    opacity: 0.52;
}

.archive-skill-node-researchable {
    border-color: rgba(132, 255, 181, 0.9);
    color: #adffc8;
    box-shadow:
        0 0 0 1px rgba(132, 255, 181, 0.08),
        0 0 15px rgba(132, 255, 181, 0.13);
}

.archive-skill-node-researched {
    border-color: rgba(117, 217, 255, 0.72);
    background: rgba(8, 37, 48, 0.99);
}

.archive-skill-node-glyph {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.archive-skill-node-rank {
    position: absolute;
    right: 3px;
    bottom: 2px;
    color: rgba(213, 239, 248, 0.5);
    font-size: 6px;
    letter-spacing: 0.03em;
}

.archive-skill-dormant {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 88px;
    padding: 10px 12px;
    border: 1px dashed rgba(117, 217, 255, 0.14);
    opacity: 0.42;
}

.archive-skill-dormant span {
    margin-bottom: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.archive-skill-dormant small {
    font-size: 9px;
    line-height: 1.4;
}

/*
 * Fixed detail rail: it can change contents or scroll without ever
 * changing tree width/height.
 */
.archive-skill-tooltip {
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    border-left: 1px solid rgba(117, 217, 255, 0.16);
    background: rgba(3, 10, 16, 0.97);
    overflow: auto;
}

.archive-skill-tooltip-kicker {
    margin-bottom: 8px;
    color: rgba(117, 217, 255, 0.58);
    font-size: 8px;
    letter-spacing: 0.14em;
}

.archive-skill-tooltip-title {
    display: block;
    color: #e3f8ff;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 0.055em;
}

.archive-skill-tooltip-type {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 6px;
    border: 1px solid rgba(117, 217, 255, 0.2);
    color: rgba(190, 230, 244, 0.68);
    font-size: 8px;
    letter-spacing: 0.1em;
}

.archive-skill-tooltip p {
    margin: 13px 0;
    color: rgba(213, 237, 246, 0.75);
    font-size: 10px;
    line-height: 1.5;
}

.archive-skill-tooltip-effect {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: start;
    margin: 10px 0 12px;
    padding: 9px;
    border: 1px solid rgba(111, 246, 166, 0.18);
    background: rgba(29, 91, 57, 0.12);
}

.archive-skill-tooltip-effect span {
    color: rgba(122, 255, 178, 0.72);
    font-size: 7px;
    letter-spacing: 0.1em;
}

.archive-skill-tooltip-effect strong {
    color: rgba(183, 255, 211, 0.86);
    font-size: 8px;
    line-height: 1.45;
}

.archive-skill-tooltip-requirements {
    margin: 12px 0;
    padding: 8px;
    border-left: 2px solid rgba(255, 202, 103, 0.62);
    background: rgba(69, 50, 17, 0.2);
    color: rgba(255, 220, 150, 0.8);
    font-size: 8px;
    line-height: 1.45;
    letter-spacing: 0.06em;
}

.archive-skill-tooltip-action {
    width: 100%;
    margin-top: 6px;
}

.archive-skill-tooltip-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    opacity: 0.62;
}

.archive-skill-tooltip-empty span {
    margin-bottom: 8px;
    color: rgba(117, 217, 255, 0.6);
    font-size: 8px;
    letter-spacing: 0.16em;
}

.archive-skill-tooltip-empty strong {
    color: #d9f3fc;
    font-size: 13px;
    letter-spacing: 0.08em;
}

.archive-skill-tooltip-empty p,
.archive-skill-tooltip-empty small {
    max-width: 230px;
}

.archive-skill-tooltip-empty small {
    color: rgba(139, 255, 183, 0.62);
    font-size: 8px;
    line-height: 1.4;
}

/*
 * Keep the true four-column tree at normal desktop widths.
 * We only tighten the node geometry on narrower desktop windows.
 */
@media (max-width: 1100px) {
    .archive-skills-dialog {
        width: calc(100% - 14px);
        height: calc(100% - 14px);
        max-height: calc(100% - 14px);
    }

    .archive-skills-body {
        grid-template-columns: minmax(0, 1fr) 238px;
    }

    .archive-skill-branches {
        padding: 7px;
    }

    .archive-skill-branch-header {
        padding-left: 4px;
        padding-right: 4px;
    }

    .archive-skill-branch-header strong {
        font-size: 8px;
    }

    .archive-skill-branch-header span {
        font-size: 6px;
    }

    .archive-skill-track {
        padding-left: 3px;
        padding-right: 3px;
    }

    .archive-skill-tier-label {
        left: 0;
        width: 19px;
        font-size: 6px;
    }

    .archive-skill-tier-nodes {
        inset:
            0
            8px
            0
            22px;
    }

    .archive-skill-node {
        width: 38px;
        height: 38px;
    }

    .archive-skill-node-glyph {
        font-size: 10px;
    }

    .archive-skill-node-rank {
        font-size: 5px;
    }

    .archive-skill-tooltip {
        padding: 12px;
    }
}

/*
 * Very narrow screens are allowed to scroll the tree board horizontally
 * instead of silently collapsing the four disciplines back into 2x2.
 * That preserves the mental model of the Archive.
 */
@media (max-width: 760px) {
    .preparation-toolbar {
        flex-direction: column;
    }

    .archive-skills-button {
        width: min(320px, 90%);
    }

    .archive-skills-body {
        grid-template-columns: minmax(0, 1fr) 220px;
    }

    .archive-skill-branches {
        grid-template-columns: repeat(4, minmax(165px, 1fr));
        min-width: 700px;
    }
}

.preparation-main-menu-button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(105, 199, 255, 0.2);
    background: rgba(5, 15, 22, 0.8);
    color: #668592;
    font: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
}

.preparation-main-menu-button:hover,
.preparation-main-menu-button:focus-visible {
    border-color: rgba(117, 217, 255, 0.58);
    color: #c4ecf8;
    outline: none;
}

.preparation-toolbar .preparation-memory {
    margin-top: 0;
}

/* 13G-7.3 — preparation toolbar readability */
.preparation-scoreboard-button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(105, 199, 255, 0.2);
    background: rgba(5, 15, 22, 0.8);
    color: #668592;
    font: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
}

.preparation-scoreboard-button:hover,
.preparation-scoreboard-button:focus-visible {
    border-color: rgba(117, 217, 255, 0.58);
    color: #c4ecf8;
    outline: none;
}

.preparation-guide {
    width: min(780px, calc(100% - 40px));
    margin: 6px auto 10px;
    padding: 10px 14px;
    border: 1px solid rgba(111, 220, 255, 0.34);
    background: rgba(6, 21, 29, 0.9);
    text-align: center;
    box-sizing: border-box;
}

.preparation-guide[hidden] {
    display: none;
}

.preparation-guide strong {
    display: block;
    color: #8ee8ff;
    font-size: 10px;
    letter-spacing: 0.14em;
}

.preparation-guide span {
    display: block;
    margin-top: 4px;
    color: #93aeb9;
    font-size: 9px;
    line-height: 1.45;
}

.preparation-guide-target {
    border-color: rgba(122, 239, 255, 0.95) !important;
    box-shadow:
        0 0 0 1px rgba(122, 239, 255, 0.24),
        0 0 24px rgba(92, 214, 255, 0.2) !important;
    animation: preparation-guide-pulse 1.5s ease-in-out infinite;
}

@keyframes preparation-guide-pulse {
    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .preparation-guide-target {
        animation: none;
    }
}


/* src/ui/CorePanelExpansion.css */
.core-action.surge {
    border-color: rgba(99, 245, 196, 0.32);
    color: #b4fbe3;
    background:
        linear-gradient(180deg, rgba(23, 69, 63, 0.72), rgba(8, 29, 29, 0.82));
}

.core-action.surge:hover:not(:disabled) {
    border-color: rgba(112, 255, 210, 0.64);
    box-shadow: 0 0 18px rgba(73, 236, 188, 0.12);
}

.core-action.surge:disabled {
    box-shadow: none;
}

.core-header-stats {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 1.7fr) 1fr;
    align-items: end;
    gap: 16px;
    margin-top: 7px;
}

.core-header-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #6f91a2;
    font-size: 8px;
    letter-spacing: 0.12em;
}

.core-header-stat strong {
    color: #d7f3ff;
    font-size: 14px;
    letter-spacing: 0.04em;
}

.core-header-salvage {
    align-items: flex-start;
}

.core-header-swarm {
    align-items: flex-end;
}

.core-health-summary {
    min-width: 0;
}

.core-health-label {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 9px;
    margin-bottom: 4px;
    color: #7398aa;
    font-size: 8px;
    letter-spacing: 0.12em;
}

.core-health-label strong {
    color: #dff7ff;
    font-size: 12px;
    letter-spacing: 0.04em;
}

.core-health-bar {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 1px solid rgba(92, 185, 220, 0.22);
    border-radius: 999px;
    background: rgba(4, 12, 17, 0.94);
}

.core-health-fill {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #69e3a0;
    box-shadow: 0 0 10px rgba(105, 227, 160, 0.2);
    transition: width 100ms linear, background 100ms ease;
}

.core-health-fill[data-state="warning"] {
    background: #ffc15a;
    box-shadow: 0 0 10px rgba(255, 193, 90, 0.18);
}

.core-health-fill[data-state="critical"] {
    background: #ff5a67;
    box-shadow: 0 0 12px rgba(255, 90, 103, 0.22);
}

.core-fabrication-progress {
    width: 100%;
    height: 4px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(72, 111, 132, 0.22);
}

.core-fabrication-progress[hidden] {
    display: none;
}

.core-fabrication-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: rgba(116, 218, 255, 0.82);
    box-shadow: 0 0 8px rgba(95, 205, 255, 0.28);
    transition: width 80ms linear;
}

.core-action-row {
    display: grid;
    gap: 7px;
    margin-top: 8px;
}

.core-action-row-purchases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.core-action-row-abilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 6px;
}

.core-action-row .core-action {
    width: 100%;
    margin: 0;
}

.core-action[data-tooltip] {
    position: relative;
}

.core-action[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    z-index: 120;
    width: 250px;
    padding: 8px 9px;
    transform: translate(-50%, 4px);
    border: 1px solid rgba(113, 203, 242, 0.34);
    border-radius: 4px;
    color: #d8f4ff;
    background: rgba(3, 10, 15, 0.97);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
    font-size: 9px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-align: left;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 100ms ease, transform 100ms ease, visibility 100ms ease;
}

.core-action[data-tooltip]:hover::after,
.core-action[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (max-width: 800px) {
    .core-header-stats {
        grid-template-columns: 1fr 1.35fr 1fr;
        gap: 8px;
    }

    .core-action-row-purchases,
    .core-action-row-abilities {
        grid-template-columns: 1fr;
    }
}


/* 13G-7.9 — small inline feedback instead of modal errors */
.core-feedback {
    min-height: 12px;
    margin-top: 4px;
    color: #ffc96b;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
}

.core-feedback[hidden] {
    display: none;
}

.core-feedback.pulse {
    animation: core-feedback-pulse 260ms ease-out;
}

.core-action.unavailable {
    opacity: 0.48;
    border-color: rgba(255, 191, 91, 0.22);
}

.core-action.unavailable:hover {
    opacity: 0.72;
    border-color: rgba(255, 201, 107, 0.56);
    color: #ffd88b;
}

@keyframes core-feedback-pulse {
    0% { transform: translateY(2px); opacity: 0.25; }
    100% { transform: translateY(0); opacity: 1; }
}


/* src/ui/ExpeditionExitControl.css */
.expedition-exit-control {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 46;
    min-width: 86px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(105, 199, 255, 0.2);
    border-radius: 4px;
    background: rgba(4, 10, 16, 0.68);
    color: #5e7f8e;
    font: inherit;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.09em;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition:
        border-color 120ms ease,
        color 120ms ease,
        background 120ms ease;
}

.expedition-exit-control[hidden] {
    display: none;
}

.expedition-exit-control:hover {
    border-color: rgba(120, 214, 250, 0.5);
    color: #b6dbe8;
    background: rgba(8, 20, 28, 0.88);
}

.expedition-exit-control.confirm {
    border-color: rgba(255, 105, 105, 0.62);
    color: #ffd0d0;
    background: rgba(54, 14, 18, 0.9);
}


/* src/ui/MajorFirmwarePanel.css */
.major-firmware-overlay {
    position: absolute;
    inset: 0;
    z-index: 74;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 44%, rgba(20, 58, 76, 0.20), transparent 44%),
        rgba(2, 7, 11, 0.86);
    backdrop-filter: blur(5px);
}

.major-firmware-overlay[hidden] {
    display: none;
}

.major-firmware-shell {
    width: 1040px;
    max-width: calc(100% - 80px);
    padding: 28px 30px 30px;
    border: 1px solid rgba(108, 222, 255, 0.28);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(10, 27, 38, 0.98), rgba(4, 13, 20, 0.98));
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.48),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.major-firmware-kicker {
    color: rgba(116, 220, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.major-firmware-title {
    margin-top: 5px;
    color: #e7f8ff;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.major-firmware-intro {
    margin: 9px 0 8px;
    max-width: 760px;
    color: rgba(218, 238, 247, 0.74);
    font-size: 15px;
    line-height: 1.5;
}

.major-firmware-installed {
    min-height: 20px;
    margin: 10px 0 18px;
    color: rgba(255, 216, 111, 0.78);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.major-firmware-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.major-firmware-card {
    position: relative;
    min-height: 292px;
    padding: 19px;
    border: 1px solid rgba(121, 199, 225, 0.22);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(17, 43, 57, 0.94), rgba(7, 20, 29, 0.98));
    color: #eaf9ff;
    text-align: left;
    cursor: pointer;
    transition:
        transform 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.major-firmware-card:hover {
    transform: translateY(-3px);
    border-color: rgba(118, 225, 255, 0.64);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

.major-firmware-card strong {
    display: block;
    margin: 10px 0 11px;
    font-size: 20px;
    letter-spacing: 0.035em;
}

.major-firmware-family {
    color: rgba(120, 220, 255, 0.72);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.major-firmware-description,
.major-firmware-effect,
.major-firmware-install {
    display: block;
}

.major-firmware-description {
    min-height: 76px;
    color: rgba(219, 238, 246, 0.72);
    font-size: 14px;
    line-height: 1.45;
}

.major-firmware-effect {
    margin-top: 14px;
    color: #8df5c2;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
}


.major-firmware-install {
    position: absolute;
    right: 18px;
    bottom: 17px;
    left: 18px;
    padding-top: 11px;
    border-top: 1px solid rgba(122, 205, 232, 0.14);
    color: rgba(185, 235, 251, 0.84);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.major-firmware-card.family-redline {
    border-color: rgba(255, 119, 102, 0.35);
}

.major-firmware-card.family-bastion {
    border-color: rgba(255, 215, 119, 0.32);
}

.major-firmware-card.family-reclamation {
    border-color: rgba(126, 235, 165, 0.32);
}

@media (max-width: 920px) {
    .major-firmware-cards {
        grid-template-columns: 1fr;
    }

    .major-firmware-shell {
        max-height: calc(100% - 40px);
        overflow-y: auto;
    }

    .major-firmware-card {
        min-height: 250px;
    }
}

.major-firmware-card.family-replication {
    border-color: rgba(105, 211, 255, 0.42);
}

.major-firmware-card.family-logistics {
    border-color: rgba(126, 235, 193, 0.38);
}

/* 13G-7.3 — keep major choices mechanical and scan-friendly. */
.major-firmware-card {
    min-height: 220px;
}

.major-firmware-card strong {
    margin-bottom: 18px;
}

.major-firmware-effect {
    margin-top: 4px;
}

@media (max-width: 920px) {
    .major-firmware-card {
        min-height: 210px;
    }
}


/* src/ui/MilestonePanel.css */
.milestone-button {
    position: relative;
    min-width: 210px;
    min-height: 40px;
    padding: 0 42px 0 18px;
    border: 1px solid rgba(255, 211, 107, 0.34);
    background: rgba(24, 20, 8, 0.72);
    color: #ffe39a;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    cursor: pointer;
    transition:
        border-color 120ms ease,
        background 120ms ease,
        box-shadow 120ms ease,
        transform 120ms ease;
}

.milestone-button:hover,
.milestone-button:focus-visible {
    border-color: rgba(255, 220, 130, 0.78);
    background: rgba(46, 37, 13, 0.88);
    outline: none;
}

.milestone-button:active {
    transform: translateY(1px);
}

.milestone-button.has-claimable {
    border-color: rgba(139, 255, 183, 0.9);
    color: #afffc9;
    box-shadow:
        0 0 0 1px rgba(139, 255, 183, 0.12),
        0 0 22px rgba(139, 255, 183, 0.14);
}

.milestone-button-badge {
    position: absolute;
    top: 50%;
    right: 12px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    transform: translateY(-50%);
    border: 1px solid rgba(139, 255, 183, 0.9);
    border-radius: 11px;
    background: rgba(22, 72, 47, 0.92);
    color: #aaffc6;
    font-size: 10px;
    line-height: 19px;
    text-align: center;
    box-sizing: border-box;
}

.milestone-modal[hidden] {
    display: none;
}

.milestone-modal {
    position: absolute;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
}

.milestone-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 5, 8, 0.88);
    backdrop-filter: blur(5px);
}

.milestone-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(1320px, calc(100% - 40px));
    height: min(800px, calc(100% - 34px));
    overflow: hidden;
    border: 1px solid rgba(255, 211, 107, 0.32);
    background:
        linear-gradient(
            180deg,
            rgba(18, 17, 10, 0.995),
            rgba(4, 10, 14, 0.998)
        );
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.66),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.milestone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255, 211, 107, 0.15);
    box-sizing: border-box;
}

.milestone-kicker {
    margin-bottom: 4px;
    color: rgba(255, 211, 107, 0.55);
    font-size: 9px;
    letter-spacing: 0.18em;
}

.milestone-title {
    color: #fff2c7;
    font-size: 20px;
    letter-spacing: 0.11em;
}

.milestone-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.milestone-memory {
    color: #ffd36b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.milestone-close {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 211, 107, 0.28);
    background: rgba(37, 31, 13, 0.8);
    color: #ffe9ad;
    font: inherit;
    font-size: 22px;
    line-height: 34px;
    cursor: pointer;
}

.milestone-close:hover,
.milestone-close:focus-visible {
    border-color: rgba(255, 220, 130, 0.8);
    outline: none;
}

.milestone-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border-bottom: 1px solid rgba(255, 211, 107, 0.12);
    background: rgba(255, 255, 255, 0.025);
}

.milestone-summary > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
}

.milestone-summary span {
    color: rgba(220, 227, 230, 0.55);
    font-size: 8px;
    letter-spacing: 0.13em;
}

.milestone-summary strong {
    color: #e7f6fb;
    font-size: 11px;
}

.milestone-summary .claimable strong {
    color: #9dffc0;
}

.milestone-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px;
    overflow: auto;
}

.milestone-section + .milestone-section {
    margin-top: 18px;
}

.milestone-section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 211, 107, 0.11);
}

.milestone-section-header strong {
    color: #ffe6a4;
    font-size: 10px;
    letter-spacing: 0.12em;
}

.milestone-section-header span {
    color: rgba(190, 209, 217, 0.45);
    font-size: 7px;
    letter-spacing: 0.12em;
}

.milestone-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.milestone-card {
    display: flex;
    flex-direction: column;
    min-height: 132px;
    padding: 11px;
    box-sizing: border-box;
    border: 1px solid rgba(117, 217, 255, 0.14);
    background: rgba(6, 16, 22, 0.82);
}

.milestone-card.completed {
    border-color: rgba(255, 211, 107, 0.28);
}

.milestone-card.claimable {
    border-color: rgba(139, 255, 183, 0.62);
    box-shadow: inset 0 0 18px rgba(76, 190, 116, 0.045);
}

.milestone-card.claimed {
    opacity: 0.68;
    border-color: rgba(117, 217, 255, 0.24);
}

.milestone-card-topline {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
}

.milestone-card-topline span {
    color: #e0f5fc;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.065em;
}

.milestone-card-topline strong {
    flex: 0 0 auto;
    color: #ffd36b;
    font-size: 7px;
    letter-spacing: 0.06em;
}

.milestone-card p {
    margin: 8px 0 10px;
    color: rgba(204, 226, 234, 0.64);
    font-size: 8px;
    line-height: 1.45;
}

.milestone-progress-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-top: auto;
}

.milestone-progress-track {
    height: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
}

.milestone-progress-track i {
    display: block;
    height: 100%;
    background: rgba(117, 217, 255, 0.62);
}

.milestone-card.completed .milestone-progress-track i {
    background: rgba(255, 211, 107, 0.78);
}

.milestone-card.claimable .milestone-progress-track i {
    background: rgba(139, 255, 183, 0.86);
}

.milestone-progress-row > span {
    color: rgba(221, 239, 246, 0.58);
    font-size: 7px;
}

.milestone-action {
    width: 100%;
    min-height: 28px;
    margin-top: 9px;
    border: 1px solid rgba(117, 217, 255, 0.2);
    background: rgba(8, 25, 34, 0.8);
    color: rgba(211, 238, 247, 0.72);
    font: inherit;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.milestone-card.claimable .milestone-action:not(:disabled) {
    border-color: rgba(139, 255, 183, 0.74);
    background: rgba(21, 67, 43, 0.62);
    color: #adffc8;
    cursor: pointer;
}

.milestone-card.claimable .milestone-action:not(:disabled):hover,
.milestone-card.claimable .milestone-action:not(:disabled):focus-visible {
    background: rgba(31, 91, 59, 0.78);
    outline: none;
}

.milestone-action:disabled {
    opacity: 0.52;
}

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

@media (max-width: 680px) {
    .milestone-dialog {
        width: calc(100% - 14px);
        height: calc(100% - 14px);
    }

    .milestone-grid {
        grid-template-columns: 1fr;
    }
}

/* Milestone modal scrollbar — keep it visually inside the Archive panel. */
.milestone-content {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 211, 107, 0.42)
        rgba(255, 211, 107, 0.045);
}

.milestone-content::-webkit-scrollbar {
    width: 9px;
}

.milestone-content::-webkit-scrollbar-track {
    margin-block: 8px;
    background: rgba(255, 211, 107, 0.045);
    border-left: 1px solid rgba(255, 211, 107, 0.06);
}

.milestone-content::-webkit-scrollbar-thumb {
    min-height: 42px;
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        rgba(255, 211, 107, 0.42);
    background-clip: content-box;
}

.milestone-content::-webkit-scrollbar-thumb:hover {
    background:
        rgba(255, 225, 145, 0.68);
    background-clip: content-box;
}

.milestone-content::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}


/* src/ui/RewardedChoiceRerollPanel.css */
.rewarded-choice-reroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 78;

    pointer-events: auto;
}

/*
 * Keep the rewarded action visually attached to the choice it affects.
 * The UI viewport is laid out against the game's fixed presentation space,
 * so these two placements stay stable across browser scaling.
 */
.rewarded-choice-reroll[data-placement="firmware"] {
    top: 565px;
}

.rewarded-choice-reroll[data-placement="major-firmware"] {
    top: 714px;
}

.rewarded-choice-reroll[hidden] {
    display: none;
}

.rewarded-choice-reroll-button {
    padding: 6px 10px;
    border: 1px solid rgba(150, 217, 236, 0.22);
    border-radius: 999px;

    background: rgba(7, 18, 25, 0.72);
    color: rgba(205, 235, 244, 0.64);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.2);

    cursor: pointer;

    font: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    opacity: 0.82;
    transition:
        opacity 120ms ease,
        border-color 120ms ease,
        color 120ms ease,
        background 120ms ease;
}

.rewarded-choice-reroll-button:hover:not(:disabled),
.rewarded-choice-reroll-button:focus-visible:not(:disabled) {
    opacity: 1;
    border-color: rgba(150, 217, 236, 0.46);
    background: rgba(15, 38, 50, 0.84);
    color: rgba(226, 248, 255, 0.9);
}

.rewarded-choice-reroll-button:disabled {
    cursor: default;
    opacity: 0.46;
}


/* src/ui/RewardedRecoveryPanel.css */
.rewarded-recovery {
    position: absolute;
    left: 50%;
    bottom: 112px;
    transform: translateX(-50%);
    z-index: 80;

    width: min(500px, calc(100% - 36px));
    box-sizing: border-box;
    padding: 14px 16px;

    border: 1px solid rgba(111, 220, 255, 0.42);
    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(10, 23, 34, 0.97),
            rgba(4, 10, 16, 0.97)
        );

    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.48),
        inset 0 0 22px rgba(65, 190, 255, 0.06);

    color: #e8f8ff;
    text-align: center;
}

.rewarded-recovery[hidden] {
    display: none;
}

.rewarded-recovery-kicker {
    margin-bottom: 4px;
    color: rgba(143, 225, 255, 0.72);
    font-size: 11px;
    letter-spacing: 0.18em;
}

.rewarded-recovery-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.rewarded-recovery-details {
    margin: 6px auto 12px;
    max-width: 430px;
    color: rgba(220, 241, 249, 0.76);
    font-size: 12px;
    line-height: 1.45;
}

.rewarded-recovery-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.rewarded-recovery button {
    min-width: 152px;
    padding: 9px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.rewarded-recovery button:disabled {
    cursor: default;
    opacity: 0.58;
}

.rewarded-recovery-accept {
    border: 1px solid rgba(94, 223, 255, 0.7);
    background: rgba(47, 176, 218, 0.16);
    color: #c8f6ff;
}

.rewarded-recovery-decline {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(230, 241, 245, 0.62);
}

.rewarded-recovery.recovered {
    border-color: rgba(126, 245, 173, 0.52);
}


/* src/ui/ThreatLevelSelector.css */
.threat-level-selector {
    display: grid;
    grid-template-columns:
        minmax(0, 650px)
        minmax(0, 1fr);
    gap: 12px;
    width: min(1070px, calc(100vw - 28px));
    min-height: 112px;
    margin: 10px auto 12px;
    padding: 10px 12px;
    border:
        1px solid
        rgba(117, 217, 255, 0.16);
    background:
        linear-gradient(
            90deg,
            rgba(5, 17, 25, 0.92),
            rgba(4, 12, 18, 0.78)
        );
}

.threat-level-selector-main {
    min-width: 0;
}

.threat-level-selector-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.threat-level-selector-heading strong {
    color: #d8eef7;
    font-size: 10px;
    letter-spacing: 0.13em;
}

.threat-level-selector-heading span {
    color: rgba(170, 211, 228, 0.48);
    font-size: 7px;
    letter-spacing: 0.1em;
}

.threat-level-buttons {
    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );
    gap: 6px;
}

.threat-level-button {
    position: relative;
    min-width: 0;
    min-height: 58px;
    padding: 8px 9px;
    border:
        1px solid
        rgba(117, 217, 255, 0.18);
    background:
        rgba(3, 12, 18, 0.88);
    color:
        rgba(184, 221, 235, 0.62);
    text-align: left;
    cursor: pointer;
    transition:
        border-color 100ms ease,
        background 100ms ease,
        color 100ms ease,
        transform 100ms ease;
}

.threat-level-button:hover:not(:disabled) {
    border-color:
        rgba(117, 217, 255, 0.44);
    color: #e6f8ff;
    transform: translateY(-1px);
}

.threat-level-button.selected {
    border-color:
        rgba(117, 217, 255, 0.82);
    background:
        rgba(18, 67, 86, 0.34);
    color: #eafaff;
    box-shadow:
        inset 0 0 16px
        rgba(117, 217, 255, 0.07);
}

.threat-level-button.locked {
    border-color:
        rgba(122, 143, 152, 0.12);
    background:
        rgba(5, 10, 13, 0.66);
    color:
        rgba(129, 151, 159, 0.28);
    cursor: not-allowed;
}

.threat-level-button-number {
    display: block;
    margin-bottom: 2px;
    color: #75d9ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.threat-level-button.locked
.threat-level-button-number {
    color:
        rgba(129, 151, 159, 0.32);
}

.threat-level-button-title {
    display: block;
    overflow: hidden;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.threat-level-button-lock {
    position: absolute;
    top: 6px;
    right: 7px;
    font-size: 7px;
    opacity: 0.65;
}

.threat-level-detail {
    display: flex;
    min-width: 0;
    min-height: 90px;
    flex-direction: column;
    justify-content: center;
    padding-left: 16px;
    border-left:
        1px solid
        rgba(117, 217, 255, 0.12);
}

.threat-level-detail-title {
    color: #dceff6;
    font-size: 13px;
    letter-spacing: 0.08em;
}

.threat-level-detail-effects {
    margin-top: 9px;
    padding: 7px 8px;
    border:
        1px solid
        rgba(117, 217, 255, 0.12);
    background:
        rgba(11, 31, 42, 0.46);
    color:
        rgba(164, 225, 247, 0.78);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.055em;
}

.threat-level-detail-requirement {
    margin-top: 7px;
    color:
        rgba(255, 207, 90, 0.82);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.threat-level-detail-requirement.unlocked {
    color:
        rgba(101, 242, 154, 0.84);
}

@media (
    max-width: 950px
) {
    .threat-level-selector {
        grid-template-columns: 1fr;
        width: min(680px, calc(100vw - 24px));
        min-height: 0;
    }

    .threat-level-detail {
        min-height: 0;
        padding-top: 8px;
        padding-left: 0;
        border-top:
            1px solid
            rgba(117, 217, 255, 0.12);
        border-left: 0;
    }
}