@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

        html.game-backgrounded *,
        html.game-backgrounded *::before,
        html.game-backgrounded *::after {
            animation-play-state: paused !important;
        }

        :root {
            --bg: #000;
            --mining-hub-world-size: 480px;
            --text: #eef5ff;
            --text-dim: #b0c0d8;
            --text-muted: #8ea0b8;
            --accent: #00e8ff;
            --accent-2: #ff2bd6;
            --gold: #ffd400;
            --panel: rgba(4, 6, 22, 0.94);
            --panel-glass: rgba(6, 10, 32, 0.88);
            --neon-cyan: #00e8ff;
            --neon-magenta: #ff2bd6;
            --neon-glow-c: rgba(0, 232, 255, 0.55);
            --neon-glow-m: rgba(255, 43, 214, 0.45);
            --game-inset-top: env(safe-area-inset-top, 0px);
            --game-inset-bottom: env(safe-area-inset-bottom, 0px);
            --game-inset-left: env(safe-area-inset-left, 0px);
            --game-inset-right: env(safe-area-inset-right, 0px);
            --panel-top-h: 48px;
            --panel-bottom-h: 88px;
            --bottom-nav-model-height: 88px;
            --ui-font: 'Rajdhani', 'Segoe UI', sans-serif;
            --ui-fs-xs: 7px;
            --ui-fs-sm: 8px;
            --ui-fs-md: 10px;
            --ui-fs-lg: 12px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: var(--ui-font);
            font-weight: 500;
            background: var(--bg);
            color: var(--text);
            overflow: hidden;
            height: 100dvh;
            width: 100vw;
            position: fixed;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            padding: 0;
            -webkit-font-smoothing: antialiased;
        }

        /*
         * Telegram Desktop / macOS / широкий web: без body.zoom —
         * zoom сжимает flex (max-width/vw) и текст наползает на иконки.
         * Только чуть крупнее кегль и дыхание в HUD; телефон не трогаем.
         */
        html.layout-pc {
            --ui-fs-xs: 8px;
            --ui-fs-sm: 9px;
            --ui-fs-md: 11px;
            --ui-fs-lg: 13px;
        }
        html.layout-pc .top-hud-resources {
            gap: 5px;
        }

        /* Почта в верхней панели: читаемое отображение на ПК без изменения мобильного HUD. */
        html.layout-pc .hud-mail-dropdown {
            top: 52px;
            left: 8px;
            width: min(420px, calc(100vw - 32px));
            max-height: min(62dvh, 520px);
            padding: 8px 0;
            border: 1px solid rgba(83, 224, 255, 0.72);
            border-radius: 8px;
            background: linear-gradient(145deg, rgba(8, 29, 58, 0.99), rgba(5, 10, 25, 0.99));
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.72), 0 0 20px rgba(0, 232, 255, 0.18);
            font-size: 14px;
            line-height: 1.45;
        }
        html.layout-pc .hud-mail-title {
            margin: 0 10px 6px;
            padding: 4px 8px 8px;
            border-bottom: 1px solid rgba(83, 224, 255, 0.24);
            color: #ffe39a;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0.1em;
            line-height: 1.3;
        }
        html.layout-pc .hud-mail-row {
            padding: 12px 14px;
            border-bottom: 1px solid rgba(132, 205, 230, 0.2);
        }
        html.layout-pc .hud-mail-row-head {
            align-items: flex-start;
            gap: 9px;
            margin-bottom: 7px;
        }
        html.layout-pc .hud-mail-icon {
            width: 24px;
            flex: 0 0 24px;
            font-size: 22px;
            line-height: 1.2;
            text-align: center;
        }
        html.layout-pc .hud-mail-subject {
            color: #f3f8ff;
            font-size: 15px;
            font-weight: 600;
            line-height: 1.4;
            overflow-wrap: anywhere;
        }
        html.layout-pc .hud-mail-reward {
            margin: 0 0 9px 33px;
            color: #ffe39a;
            font-size: 15px;
            line-height: 1.5;
        }
        html.layout-pc .hud-mail-claim {
            min-height: 44px;
            padding: 10px 12px;
            border: 1px solid rgba(255, 212, 90, 0.72);
            border-radius: 5px;
            background: linear-gradient(180deg, rgba(92, 67, 12, 0.82), rgba(44, 29, 4, 0.92));
            color: #fff0a8;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.06em;
            line-height: 1.25;
        }
        html.layout-pc .hud-mail-claim:hover,
        html.layout-pc .hud-mail-claim:focus-visible {
            border-color: #ffe27d;
            background: linear-gradient(180deg, rgba(126, 91, 17, 0.92), rgba(62, 41, 5, 0.96));
            color: #fff9d7;
            outline: none;
        }
        html.layout-pc .hud-mail-empty {
            padding: 18px 14px;
            color: #b2c5d5;
            font-size: 14px;
            line-height: 1.45;
        }
        html.layout-pc .res-node {
            max-width: 64px;
        }
        html.layout-pc .hud-mail-btn {
            width: 30px;
            height: 30px;
            border-radius: 6px;
            font-size: 16px;
            border-color: rgba(83, 224, 255, 0.68);
            box-shadow: 0 0 10px rgba(0, 232, 255, 0.2);
        }
        html.layout-pc .res-node-fuel { max-width: 92px; }
        html.layout-pc .res-node-credits { max-width: 84px; }
        html.layout-pc .res-node-spice { max-width: 86px; }
        html.layout-pc .res-pill {
            gap: 4px;
            padding: 4px 6px 4px 5px;
        }
        html.layout-pc .res-gfx svg {
            width: 12px;
            height: 12px;
        }
        html.layout-pc .res-val {
            letter-spacing: 0.02em;
            font-size: 10px;
            max-width: 70px;
        }
        html.layout-pc .res-node-fuel .res-val {
            font-size: 9px;
            max-width: none;
        }
        html.layout-pc .res-node-credits .res-val {
            font-size: 11px;
            max-width: 88px;
        }
        html.layout-pc .res-pill-hero .res-val {
            max-width: 88px;
        }
        html.layout-pc.layout-pc-web {
            --ui-fs-xs: 8px;
            --ui-fs-sm: 9px;
            --ui-fs-md: 11px;
            --ui-fs-lg: 13px;
        }

        /* ПК: окна с hardcoded 3–6px (усиления / перки / капстоун) */
        html.layout-pc .faction-boost-now-label { font-size: 10px !important; letter-spacing: 0.06em; }
        html.layout-pc .faction-boost-now-value { font-size: 13px !important; line-height: 1.4; }
        html.layout-pc .faction-boost-now-rank { font-size: 11px !important; }
        html.layout-pc .faction-boost-section-title { font-size: 12px !important; margin: 10px 0 6px; }
        html.layout-pc .faction-boost-note { font-size: 11px !important; line-height: 1.45; }
        html.layout-pc .faction-boost-table { font-size: 11px !important; }
        html.layout-pc .faction-boost-table th { font-size: 10px !important; padding: 7px 5px; }
        html.layout-pc .faction-boost-table td { padding: 7px 5px; line-height: 1.4; }
        html.layout-pc .faction-boost-table .col-bonus { line-height: 1.45; }
        html.layout-pc .faction-boost-row .boost-st { font-size: 10px !important; }
        html.layout-pc .faction-boost-hangar-cell { font-size: 11px !important; padding: 7px 8px; }
        html.layout-pc .faction-boost-hangar-cell .hb-label { font-size: 10px !important; margin-bottom: 3px; }

        html.layout-pc .faction-capstone-label { font-size: 10px !important; }
        html.layout-pc .faction-capstone-name { font-size: 14px !important; }
        html.layout-pc .faction-capstone-blurb { font-size: 11px !important; }
        html.layout-pc .faction-capstone-st { font-size: 10px !important; padding: 3px 7px; }
        html.layout-pc .faction-capstone-list { font-size: 12px !important; line-height: 1.5; padding-left: 16px; }

        html.layout-pc .perk-row { gap: 10px; padding: 8px; margin: 6px 0; }
        html.layout-pc .perk-row-thumb { width: 52px; height: 52px; }
        html.layout-pc .perk-row-name { font-size: 13px !important; }
        html.layout-pc .perk-row-desc { font-size: 11px !important; line-height: 1.4; }
        html.layout-pc .perk-row-meta { font-size: 10px !important; }
        html.layout-pc .perk-row-actions .btn-sm {
            font-size: 12px !important;
            padding: 7px 10px !important;
        }
        html.layout-pc .perk-row-actions .res-gfx-inline svg,
        html.layout-pc .perk-row-actions .part-gfx-inline svg {
            width: 14px !important;
            height: 14px !important;
        }
        html.layout-pc #win-hangar .perk-row-thumb .perk-thumb svg {
            width: 36px;
            height: 36px;
        }
        html.layout-pc .ship-stat-label,
        html.layout-pc .ship-stat-val { font-size: 10px !important; width: auto; min-width: 18px; }
        html.layout-pc .ship-stat-bar-wrap { height: 6px; }
        html.layout-pc .upgrade-row { font-size: 12px !important; padding: 8px; }
        html.layout-pc .upgrade-section-title { font-size: 14px !important; }
        html.layout-pc .hangar-balance-hint { font-size: 11px !important; }
        html.layout-pc #win-hangar .wtitle { font-size: 14px !important; }

        /* Штаб фракции / карта — те же микрошрифты */
        html.layout-pc .faction-hq-header { font-size: 11px !important; }
        html.layout-pc .faction-hq-faction { font-size: 14px !important; }
        html.layout-pc .faction-hq-rank { font-size: 13px !important; }
        html.layout-pc .faction-hq-meta { font-size: 11px !important; }
        html.layout-pc .faction-penalty-note { font-size: 11px !important; }
        html.layout-pc #win-map-faction .checkin-title { font-size: 16px !important; }

        /* ── Звёзды ── */
        .stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, #0a1035 0%, #000 70%); }
        .star { position: absolute; border-radius: 50%; background: #fff; animation: twinkle var(--d, 2s) infinite; animation-delay: var(--delay, 0s); }
        @keyframes twinkle { 0%,100% { opacity: .15; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.2); } }
        @keyframes planetSlowSpin {
            from { transform: rotate(0deg) translateZ(0); }
            to { transform: rotate(360deg) translateZ(0); }
        }

        /* ── Верхняя панель ── */
        .top-panel {
            position: fixed;
            top: var(--game-inset-top);
            left: var(--game-inset-left);
            right: var(--game-inset-right);
            z-index: 100;
            background: transparent;
            padding: 0;
            overflow: visible;
            pointer-events: none;
            font-family: var(--ui-font);
            font-weight: 500;
        }
        .top-panel-inner {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            padding: 3px 4px 0;
            pointer-events: none;
        }
        .top-hud {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 31%) 1fr;
            grid-template-rows: 7px minmax(0, auto);
            column-gap: 4px;
            row-gap: 0;
            margin: -5px -6px 0;
            padding: 5px 5px 4px;
            min-height: 44px;
            pointer-events: auto;
            background: linear-gradient(180deg, rgba(8, 14, 42, 0.98) 0%, rgba(2, 4, 16, 0.96) 100%);
            border-bottom: 3px solid rgba(0, 232, 255, 0.55);
            box-shadow: 0 4px 20px rgba(0, 232, 255, 0.12), inset 0 -2px 0 rgba(255, 43, 214, 0.15);
            overflow: visible;
        }
        .top-hud-scanline {
            position: absolute;
            inset: 0;
            border-radius: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0, 232, 255, 0.012) 2px,
                rgba(0, 232, 255, 0.012) 3px
            );
            pointer-events: none;
        }

        /* Игрок — компактно слева */
        .top-player {
            grid-column: 1;
            grid-row: 2;
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
            max-width: none;
            min-width: 0;
            padding-bottom: 1px;
            align-self: end;
            position: relative;
            z-index: 1;
        }
        .top-player .avatar {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 1.5px solid var(--neon-cyan);
            box-shadow: 0 0 8px var(--neon-glow-c);
            background: #1a2040 center/cover no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            flex-shrink: 0;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }
        .top-player .avatar:active { transform: scale(0.94); }
        .top-player .avatar::before {
            content: '';
            position: absolute;
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 4px;
            background: linear-gradient(180deg, #3a4558, var(--neon-cyan));
            border-radius: 1px;
        }
        .top-player .avatar.has-photo { color: transparent; }
        .player-meta {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            min-width: 0;
            line-height: 1;
        }
        .player-row-top {
            display: flex;
            align-items: center;
            gap: 3px;
            min-width: 0;
            max-width: 100%;
        }
        .hud-mail-wrap {
            position: relative;
            flex-shrink: 0;
            margin-left: 1px;
        }
        .hud-mail-btn {
            -webkit-appearance: none;
            appearance: none;
            border: 1px solid rgba(0, 232, 255, 0.4);
            background: rgba(0, 10, 28, 0.85);
            border-radius: 4px;
            width: 18px;
            height: 18px;
            padding: 0;
            font-size: 9px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 6px rgba(0, 232, 255, 0.12);
        }
        .hud-mail-btn:active { transform: scale(0.92); }
        .hud-mail-dropdown {
            position: absolute;
            top: 46px;
            left: 6px;
            z-index: 250;
            width: min(calc(100vw - 16px), 360px);
            max-height: min(60dvh, 480px);
            overflow-y: auto;
            background: rgba(4, 12, 24, 0.94);
            border: 1px solid rgba(0, 232, 255, 0.4);
            border-radius: 6px;
            padding: 8px 0;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
            font-size: 14px;
            line-height: 1.45;
            pointer-events: auto;
        }
        .hud-mail-dropdown.hidden { display: none; }
        .hud-mail-title {
            color: #ffd480;
            font-size: 16px;
            letter-spacing: 0.08em;
            margin: 0 10px 6px;
            text-align: center;
            padding: 4px 8px 8px;
            border-bottom: 1px solid rgba(83, 224, 255, 0.24);
        }
        .hud-mail-row {
            padding: 10px 12px;
            border-bottom: 1px solid rgba(132, 205, 230, 0.2);
        }
        .hud-mail-row:last-child { border-bottom: none; }
        .hud-mail-row-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
        .hud-mail-icon { width: 24px; flex: 0 0 24px; font-size: 22px; line-height: 1.2; text-align: center; }
        .hud-mail-subject { flex: 1; min-width: 0; color: #f3f8ff; font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
        .hud-mail-reward { color: #ffe39a; font-size: 14px; margin: 4px 0 10px 32px; line-height: 1.5; overflow-wrap: anywhere; }
        .hud-mail-reward .res-gfx-inline svg,
        .hud-mail-reward .part-gfx-inline svg {
            width: clamp(18px, 1.7vw, 22px);
            height: clamp(18px, 1.7vw, 22px);
            display: inline-block;
            vertical-align: middle;
        }
        .hud-mail-claim {
            width: 100%;
            min-height: 44px;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.06em;
            line-height: 1.25;
            padding: 10px 12px;
            border: 1px solid rgba(255, 212, 0, 0.45);
            background: rgba(40, 32, 0, 0.55);
            color: #ffe880;
            border-radius: 3px;
            cursor: pointer;
        }
        .hud-mail-empty { text-align: center; color: #b2c5d5; padding: 14px 12px; font-size: 14px; line-height: 1.45; }
        .top-player .pname {
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.03em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #eef2fa;
            min-width: 0;
        }
        .top-player .plevel {
            font-size: 8px;
            color: #00e8ff;
            font-weight: 700;
            flex-shrink: 0;
            text-shadow: 0 0 8px rgba(0, 232, 255, 0.65), 0 0 14px rgba(0, 232, 255, 0.35);
            letter-spacing: 0.06em;
        }
        .player-vip {
            position: relative;
            display: inline-block;
            font-size: 7px;
            font-weight: 600;
            letter-spacing: 0.04em;
            color: #ffd400;
            white-space: nowrap;
            padding: 2px 5px;
            border: 2px solid #c9a020;
            border-radius: 3px;
            background: #2a2208;
            text-shadow: 0 0 6px rgba(255, 212, 0, 0.45);
            isolation: isolate;
        }
        .player-vip::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, #ffffff 0%, #ffd400 35%, transparent 68%);
            box-shadow: 0 0 4px #ffd400, 0 0 10px rgba(255, 212, 0, 0.95), 0 0 18px rgba(255, 212, 0, 0.45);
            opacity: 0;
            animation: vipSparkBorder 6s linear infinite;
            pointer-events: none;
            z-index: 2;
        }
        @keyframes vipSparkBorder {
            0%   { left: 0%;   top: 0%;   opacity: 0; }
            1%   { left: 0%;   top: 0%;   opacity: 1; }
            5.5% { left: 100%; top: 0%;   opacity: 1; }
            11%  { left: 100%; top: 100%; opacity: 1; }
            16.5%{ left: 0%;   top: 100%; opacity: 1; }
            22%  { left: 0%;   top: 0%;   opacity: 1; }
            23%  { opacity: 0; }
            100% { left: 0%;   top: 0%;   opacity: 0; }
        }
        .player-vip { cursor: pointer; }
        .player-vip.vip-lvl-3 {
            border-color: #ffd400;
            box-shadow: 0 0 8px rgba(255, 212, 0, 0.45);
            animation: vipBadgeGlow 3s ease-in-out infinite;
        }
        @keyframes vipBadgeGlow {
            0%, 100% { box-shadow: 0 0 6px rgba(255, 212, 0, 0.35); }
            50% { box-shadow: 0 0 12px rgba(255, 212, 0, 0.65); }
        }
        #player-ship.vip-trail .ship-flame { filter: drop-shadow(0 0 5px rgba(184, 92, 255, 0.95)) drop-shadow(0 0 10px rgba(126, 38, 210, 0.65)); }
        #player-ship.vip-red-trail .ship-flame,
        .vip-red-trail .ship-flame,
        .ship-flame.vip-red-flame { filter: drop-shadow(0 0 5px rgba(255, 65, 65, 0.95)) drop-shadow(0 0 10px rgba(180, 20, 20, 0.7)); }
        #player-ship.vip-purple-trail .ship-flame,
        .vip-purple-trail .ship-flame,
        .ship-flame.vip-purple-flame { filter: drop-shadow(0 0 5px rgba(184, 92, 255, 0.95)) drop-shadow(0 0 10px rgba(126, 38, 210, 0.65)); }
        #player-ship.vip-gold-trail .ship-flame,
        .vip-gold-trail .ship-flame,
        .ship-flame.vip-gold-flame { filter: drop-shadow(0 0 5px rgba(255, 212, 0, 0.95)) drop-shadow(0 0 10px rgba(255, 170, 0, 0.65)); }
        .laser-beam.laser-gold {
            stroke: #ffd400;
            filter: drop-shadow(0 0 6px #ffd400) drop-shadow(0 0 12px rgba(255, 180, 0, 0.6));
        }
        .laser-beam.laser-purple {
            stroke: #c56cff;
            filter: drop-shadow(0 0 6px #c56cff) drop-shadow(0 0 12px rgba(126, 38, 210, 0.75));
        }
        .laser-beam.laser-red {
            stroke: #ff3333;
            filter: drop-shadow(0 0 6px #ff3333) drop-shadow(0 0 12px rgba(180, 20, 20, 0.75));
        }
        .pvp-lb-row.vip-legend .pvp-lb-name,
        .spice-lb-dropdown .pvp-lb-row.vip-legend .pvp-lb-name { color: #ffd400; text-shadow: 0 0 6px rgba(255, 212, 0, 0.5); }
        .pvp-lb-row.vip-admiral.me { border-color: rgba(255, 212, 0, 0.45); }

        /* Шина проводов — на всю ширину панели */
        .hud-wire-bus {
            grid-column: 1 / -1;
            grid-row: 1;
            position: relative;
            top: auto;
            left: auto;
            right: auto;
            align-self: center;
            height: 3px;
            background: linear-gradient(180deg, #2a3448 0%, #1a2030 100%);
            border: 1px solid rgba(50, 65, 90, 0.7);
            border-radius: 2px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.4);
            pointer-events: none;
            z-index: 2;
        }
        .hud-wire-bus::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 1px;
            background: linear-gradient(90deg,
                rgba(0, 232, 255, 0.15),
                rgba(0, 232, 255, 0.35) 25%,
                rgba(255, 43, 214, 0.3) 50%,
                rgba(0, 232, 255, 0.35) 75%,
                rgba(0, 232, 255, 0.15));
            animation: busPulse 4s ease-in-out infinite;
        }
        @keyframes busPulse {
            0%, 100% { opacity: 0.45; }
            50% { opacity: 1; }
        }

        /* Ресурсы — провода от шины к индикаторам */
        .top-hud-resources {
            grid-column: 2;
            grid-row: 2;
            display: flex;
            align-items: stretch;
            justify-content: flex-end;
            gap: 3px;
            min-width: 0;
            padding-right: 1px;
            position: relative;
            z-index: 1;
        }
        .res-node {
            position: relative;
            display: flex;
            cursor: pointer;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            flex: 1;
            min-width: 0;
            max-width: 56px;
            z-index: 1;
        }
        .res-node:focus-visible .res-pill {
            outline: 2px solid rgba(255, 255, 255, 0.85);
            outline-offset: 2px;
        }
        .res-node-fuel {
            max-width: 78px;
            flex: 1.15;
        }
        .res-node-credits {
            max-width: 72px;
            flex: 1.4;
        }
        .res-node-spice {
            max-width: 74px;
            flex: 1.45;
        }
        .res-node-microchips,
        .res-node-artifact {
            min-width: 40px;
            flex: 1.15;
        }
        /* Разъём на шине */
        .res-node::before {
            content: '';
            position: absolute;
            top: -4px;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 5px;
            background: linear-gradient(180deg, #3a4558 0%, #2a3448 100%);
            border: 1px solid rgba(80, 100, 130, 0.75);
            border-bottom: 2px solid var(--neon-color, #00e8ff);
            border-radius: 0 0 3px 3px;
            box-shadow: 0 0 5px var(--neon-glow, rgba(0, 232, 255, 0.35));
            z-index: 3;
        }
        .hud-wire {
            position: relative;
            width: 2px;
            flex: 1;
            min-height: 3px;
            max-height: 8px;
            flex-shrink: 0;
            margin-top: -1px;
            background: linear-gradient(180deg, var(--neon-color, #00e8ff) 0%, #3a4558 40%, var(--neon-color, #00e8ff) 100%);
            border-radius: 1px;
            box-shadow: 0 0 5px var(--neon-glow, rgba(0, 232, 255, 0.3));
            opacity: 0.95;
            transition: opacity 0.1s, filter 0.1s;
            z-index: 2;
        }
        .hud-wire::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 3px;
            background: linear-gradient(180deg, #3a4558, var(--neon-color, #00e8ff));
            border: 1px solid rgba(80, 100, 130, 0.65);
            border-radius: 0 0 2px 2px;
            box-shadow: 0 0 4px var(--neon-glow, rgba(0, 232, 255, 0.4));
        }
        .res-pill {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 3px 5px 3px 4px;
            border-radius: 4px;
            background: rgba(0, 6, 20, 0.75);
            border: 2px solid rgba(0, 232, 255, 0.35);
            min-width: 0;
            width: 100%;
            justify-content: flex-start;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
            position: relative;
        }
        /* Гнездо на корпусе индикатора */
        .res-pill::before {
            content: '';
            position: absolute;
            top: -3px;
            left: 50%;
            transform: translateX(-50%);
            width: 7px;
            height: 3px;
            background: #141c2a;
            border: 1px solid rgba(80, 100, 130, 0.7);
            border-bottom: none;
            border-radius: 2px 2px 0 0;
            z-index: 0;
        }
        .res-pill-hero {
            border: 2px solid rgba(255, 212, 0, 0.55);
            background: rgba(36, 28, 6, 0.45);
            box-shadow: 0 0 8px rgba(255, 212, 0, 0.22);
        }
        .res-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 0;
            flex-shrink: 0;
            margin-left: -1px;
        }
        .res-gfx {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 0;
            vertical-align: middle;
            flex-shrink: 0;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
        }
        .res-gfx svg {
            display: block;
            width: 11px;
            height: 11px;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        .res-gfx-lg svg { width: 13px; height: 13px; }
        .res-gfx-inline svg { width: 10px; height: 10px; }
        .res-pill-hero .res-gfx svg { width: 12px; height: 12px; }
        .res-gfx-spice svg {
            filter: drop-shadow(0 0 4px rgba(255, 212, 0, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
        }
        .res-node-spice .res-pill-hero {
            border-color: rgba(255, 212, 0, 0.62);
            background: rgba(36, 28, 6, 0.62);
            box-shadow: 0 0 10px rgba(255, 212, 0, 0.32), inset 0 0 8px rgba(255, 190, 0, 0.08);
        }
        .res-node-spice .res-val {
            color: #ffe880;
            text-shadow: 0 0 8px rgba(255, 212, 0, 0.75);
            max-width: 78px;
            font-size: 9px;
            overflow: visible;
            text-overflow: clip;
        }
        .res-node-spice .res-pill-hero {
            padding: 3px 6px 3px 4px;
        }
        .res-node-artifact .res-pill {
            border-color: rgba(160, 100, 255, 0.55);
            background: rgba(28, 12, 48, 0.55);
            box-shadow: 0 0 8px rgba(160, 100, 255, 0.22);
        }
        .res-node-artifact .res-pill,
        .res-node-microchips .res-pill {
            gap: 1px;
            padding: 3px;
        }
        .res-node-artifact .res-val {
            min-width: 12px;
            color: #d8b0ff;
            text-shadow: 0 0 8px rgba(160, 100, 255, 0.65);
        }
        .res-node-microchips .res-val {
            min-width: 12px;
            color: #88eecc;
            text-shadow: 0 0 8px rgba(68, 221, 170, 0.65);
        }
        .neon-teal { --neon-color: #44ddaa; --neon-glow: rgba(68, 221, 170, 0.85); }
        .neon-purple { --neon-color: #b878ff; --neon-glow: rgba(184, 120, 255, 0.85); }
        .neon-silver { --neon-color: #c8d4e0; --neon-glow: rgba(200, 212, 224, 0.75); }
        .res-val {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: var(--neon-color, #e8f4ff);
            text-shadow: 0 0 6px var(--neon-glow, var(--neon-glow-c));
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 58px;
        }
        .res-node-fuel .res-val {
            max-width: none;
            overflow: visible;
            text-overflow: clip;
            font-size: 8px;
            letter-spacing: 0;
        }
        .res-node-fuel .res-pill {
            padding: 3px 5px;
            gap: 2px;
        }
        .res-node-credits .res-val {
            max-width: 78px;
            font-size: 10px;
            letter-spacing: 0.01em;
            color: #ffe880;
            text-shadow: 0 0 8px rgba(255, 212, 0, 0.75);
        }
        .res-node-credits .res-pill {
            gap: 2px;
            padding: 3px 4px 3px 2px;
            border-color: rgba(255, 212, 0, 0.5);
            background: rgba(32, 24, 4, 0.72);
            box-shadow: 0 0 8px rgba(255, 212, 0, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .res-pill-hero .res-val { max-width: 78px; }
        .res-node-spice .res-gfx-spice svg {
            transform-origin: center;
            animation: spiceCubeIdleRotate 8s ease-in-out infinite;
        }
        @keyframes spiceCubeIdleRotate {
            0%, 80% { transform: perspective(32px) rotateX(0) rotateY(0); }
            90% { transform: perspective(32px) rotateX(180deg) rotateY(180deg); }
            100% { transform: perspective(32px) rotateX(360deg) rotateY(360deg); }
        }
        .resource-exact-popover {
            position: fixed;
            z-index: 500;
            max-width: calc(100vw - 12px);
            padding: 5px 9px;
            border: 1px solid rgba(255, 212, 0, 0.72);
            border-radius: 5px;
            background: rgba(4, 10, 24, 0.97);
            box-shadow: 0 0 12px rgba(0, 232, 255, 0.28);
            color: #fff;
            font: 700 14px/1.2 var(--ui-font);
            text-shadow: 0 0 6px rgba(0, 232, 255, 0.5);
            white-space: nowrap;
            pointer-events: none;
        }
        .res-node-credits .res-pill {
            padding-left: 2px;
        }
        .top-panel .resource-neon {
            --neon-color: #00e8ff;
            --neon-glow: rgba(0, 232, 255, 0.85);
        }
        .neon-cyan   { --neon-color: #00e8ff; --neon-glow: rgba(0, 232, 255, 0.85); }
        .neon-magenta{ --neon-color: #ff2bd6; --neon-glow: rgba(255, 43, 214, 0.85); }
        .neon-lime   { --neon-color: #b8ff00; --neon-glow: rgba(184, 255, 0, 0.85); }
        .neon-orange { --neon-color: #ff6a1a; --neon-glow: rgba(255, 106, 26, 0.85); }
        .neon-gold   { --neon-color: #ffd400; --neon-glow: rgba(255, 212, 0, 0.85); }
        .neon-pink   { --neon-color: #ff5cf4; --neon-glow: rgba(255, 92, 244, 0.85); }
        .neon-blue   { --neon-color: #4da6ff; --neon-glow: rgba(77, 166, 255, 0.85); }
        .neon-green  { --neon-color: #45ff9a; --neon-glow: rgba(69, 255, 154, 0.85); }

        @keyframes neonBurnout {
            0%, 100% { opacity: 1; filter: brightness(1); }
            4%  { opacity: 0.08; filter: brightness(0.04); }
            7%  { opacity: 1; filter: brightness(2.4); }
            10% { opacity: 0.06; filter: brightness(0.03); }
            13% { opacity: 0.9; filter: brightness(1.4); }
            16% { opacity: 1; filter: brightness(1); }
        }
        .top-panel .resource-neon.neon-flicker {
            animation: neonBurnout 1.1s linear forwards;
        }
        .res-node:has(.resource-neon.neon-flicker) .hud-wire,
        .res-node:has(.resource-neon.neon-flicker)::before {
            animation: wireBurnout 1.1s linear forwards;
        }
        @keyframes wireBurnout {
            0%, 100% { opacity: 0.9; filter: brightness(1); box-shadow: 0 0 5px var(--neon-glow); }
            4%  { opacity: 0.05; filter: brightness(0.1); box-shadow: none; }
            7%  { opacity: 1; filter: brightness(2.5); box-shadow: 0 0 12px var(--neon-glow); }
            10% { opacity: 0.04; filter: brightness(0.05); box-shadow: none; }
            13% { opacity: 0.85; filter: brightness(1.6); box-shadow: 0 0 8px var(--neon-glow); }
            16% { opacity: 0.9; filter: brightness(1); }
        }


        /* ── Единое игровое поле ── */
        .mining-screen {
            position: fixed;
            top: var(--game-inset-top);
            bottom: calc(var(--game-inset-bottom) + var(--panel-bottom-h));
            left: var(--game-inset-left);
            right: var(--game-inset-right);
            z-index: 1;
            display: none;
            overflow: hidden;
            background: transparent;
        }
        .mining-screen.active { display: block; }
        .mining-viewport {
            position: absolute;
            top: var(--panel-top-h);
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            overflow: hidden;
            touch-action: none;
            cursor: crosshair;
            background: transparent;
        }
        /* HUD-кнопки — зафиксированы на экране, часть игрового поля */
        .mining-hud {
            position: absolute;
            top: var(--panel-top-h);
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 4;
            pointer-events: none;
        }
        .mining-hud-actions {
            position: absolute;
            top: 6px;
            display: flex;
            flex-direction: column;
            gap: 3px;
            pointer-events: auto;
        }
        .mining-hud-actions-left {
            left: 6px;
            align-items: flex-start;
        }
        .mining-hud-actions-right {
            right: 6px;
            align-items: flex-end;
        }
        .btn-action-collector {
            --action-neon: #41d9eb;
            --action-glow: rgba(52, 202, 220, .12);
        }
        .btn-action-collector .action-icon-image { width: 19px; height: 19px; margin: 0; }
        .btn-action-collector .action-icon-image img { width: 100%; height: 100%; object-fit: contain; }
        .btn-action-group {
            --action-neon: #35d6a0;
            --action-glow: rgba(53, 214, 160, 0.82);
            color: #b7ffe9;
            background-color: #062b25;
            background-image:
                linear-gradient(180deg, rgba(150, 255, 225, 0.14) 0%, transparent 40%),
                linear-gradient(180deg, #12604e 0%, #0b3d34 52%, #062b25 100%);
        }
        .btn-action-packs {
            --action-neon: #b46cff;
            --action-glow: rgba(180, 108, 255, 0.82);
            color: #e8caff;
            background-color: #180b2c;
            background-image:
                linear-gradient(180deg, rgba(210, 160, 255, 0.14) 0%, transparent 40%),
                linear-gradient(180deg, #4c1c72 0%, #2b1044 52%, #180b2c 100%);
        }
        .btn-action-spice {
            --action-neon: #c8a020;
            --action-glow: rgba(255, 200, 0, 0.75);
            color: #ffe880;
            background-color: #1a1400;
            width: 52px;
            height: 26px;
            font-size: 6px;
            padding: 0 2px;
            line-height: 1;
            background-image:
                linear-gradient(180deg, rgba(255, 220, 100, 0.14) 0%, transparent 40%),
                linear-gradient(180deg, #5a4800 0%, #322800 52%, #1a1400 100%);
        }
        .btn-action {
            --action-neon: #b80030;
            --action-glow: rgba(184, 0, 48, 0.85);
            -webkit-appearance: none;
            appearance: none;
            position: relative;
            overflow: hidden;
            isolation: isolate;
            font-family: 'Rajdhani', 'Segoe UI', sans-serif;
            font-size: 7px;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #ffb0ba;
            cursor: pointer;
            width: 72px;
            height: 34px;
            padding: 1px 3px;
            line-height: 1.05;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--action-neon);
            border-radius: 5px;
            background-color: #180008;
            background-image:
                linear-gradient(90deg, transparent 12%, rgba(255, 255, 255, 0.08) 12.5%, transparent 13%, transparent 86%, rgba(255, 255, 255, 0.06) 86.5%, transparent 87%),
                linear-gradient(180deg, rgba(255, 120, 140, 0.16) 0%, transparent 40%),
                linear-gradient(180deg, #5a001c 0%, #320010 52%, #180008 100%);
            box-shadow:
                0 3px 0 #220008,
                0 4px 12px rgba(0, 0, 0, 0.5),
                0 0 10px var(--action-glow),
                inset 0 1px 0 rgba(255, 140, 150, 0.25),
                inset 0 -2px 4px rgba(0, 0, 0, 0.45);
            text-shadow: 0 0 6px var(--action-glow);
            transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
        }
        .btn-action::before,
        .btn-action::after {
            position: absolute;
            z-index: -1;
            content: '';
            pointer-events: none;
        }
        .btn-action::before {
            top: 3px;
            right: 4px;
            width: 7px;
            height: 3px;
            border-top: 1px solid currentColor;
            border-right: 1px solid currentColor;
            opacity: 0.65;
        }
        .btn-action::after {
            bottom: 3px;
            left: 4px;
            width: 7px;
            height: 3px;
            border-bottom: 1px solid currentColor;
            border-left: 1px solid currentColor;
            opacity: 0.65;
        }
        .btn-action .action-icon {
            display: inline-flex;
            width: 15px;
            height: 15px;
            margin-bottom: 1px;
            color: currentColor;
            filter: drop-shadow(0 0 3px var(--action-glow));
        }
         .btn-action .action-icon svg {
             display: block;
             width: 100%;
             height: 100%;
         }
         .btn-action .action-icon-image img {
             display: block;
             width: 26px;
             height: 26px;
             object-fit: contain;
         }
         .btn-action-collector .action-icon-image {
             width: 27px;
             height: 27px;
             margin: 0;
             align-items: center;
             justify-content: center;
         }
         .btn-action-collector .action-icon-image img {
             width: 27px;
             height: 27px;
         }
         .pvp-lb-btn .top-button-art {
             display: block;
             width: 22px;
             height: 22px;
             object-fit: contain;
         }
        .btn-action .action-label {
            color: #9eccff;
            text-shadow: 0 0 4px rgba(0, 232, 255, 0.65), 0 0 9px rgba(0, 232, 255, 0.4);
        }
        .btn-action:hover .action-label {
            color: #c7e4ff;
            text-shadow: 0 0 5px rgba(0, 232, 255, 0.9), 0 0 12px rgba(0, 232, 255, 0.55);
        }
        .btn-action > br { display: none; }
        .btn-action:hover {
            filter: brightness(1.14);
            box-shadow:
                0 3px 0 #220008,
                0 4px 16px rgba(0, 0, 0, 0.55),
                0 0 15px var(--action-glow),
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                inset 0 -2px 4px rgba(0, 0, 0, 0.45);
        }
        .btn-action:active {
            transform: translateY(2px);
            filter: brightness(1.15);
            box-shadow:
                0 1px 0 #220008,
                0 2px 6px rgba(0, 0, 0, 0.45),
                0 0 14px var(--action-glow),
                inset 0 2px 6px rgba(0, 0, 0, 0.5);
        }

        /* Фиолетовый акцент только для содержимого основных кнопок HUD. */
        .mining-hud-actions .btn-action:not(.btn-action-collector) .action-icon,
        .mining-hud-actions .btn-action:not(.btn-action-collector) .action-label {
            color: #d9a1ff;
            text-shadow: 0 0 4px rgba(208, 137, 255, 0.78), 0 0 9px rgba(157, 63, 232, 0.5);
            animation: actionContentPulse 3.8s ease-in-out infinite;
        }
        .mining-hud-actions .btn-action:not(.btn-action-collector) .action-icon {
            filter: drop-shadow(0 0 4px rgba(208, 137, 255, 0.95)) drop-shadow(0 0 8px rgba(157, 63, 232, 0.6));
        }
        .mining-hud-actions .btn-action:not(.btn-action-collector):hover .action-icon,
        .mining-hud-actions .btn-action:not(.btn-action-collector):hover .action-label {
            color: #ebc8ff;
            text-shadow: 0 0 5px rgba(214, 139, 255, 0.95), 0 0 11px rgba(164, 75, 235, 0.65);
        }
        @keyframes actionContentPulse {
            0%, 100% { opacity: 0.9; }
            50% { opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .res-node-spice .res-gfx-spice svg { animation: none; }
            .mining-hud-actions .btn-action:not(.btn-action-collector) .action-icon,
            .mining-hud-actions .btn-action:not(.btn-action-collector) .action-label { animation: none; }
        }

        /* ── Нижняя навигация — консоль космического корабля ── */
        .bottom-nav {
            position: fixed;
            bottom: var(--game-inset-bottom);
            left: 0;
            right: 0;
            z-index: 100;
            padding: 0;
            background: transparent;
            border: none;
            box-shadow: none;
            pointer-events: none;
            font-family: 'Rajdhani', 'Segoe UI', sans-serif;
        }
        .cockpit-console {
            position: relative;
            pointer-events: auto;
            width: 100%;
            box-sizing: border-box;
            padding: 8px 12px 6px;
            background:
                linear-gradient(180deg, rgba(30, 42, 68, 0.98) 0%, rgba(12, 18, 32, 0.99) 45%, rgba(6, 10, 20, 1) 100%);
            border: 2px solid rgba(70, 90, 120, 0.7);
            border-bottom: none;
            border-left: none;
            border-right: none;
            border-radius: 16px 16px 0 0;
            box-shadow:
                0 -8px 32px rgba(0, 232, 255, 0.12),
                0 10px 28px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                inset 0 -4px 14px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(0, 232, 255, 0.08);
            overflow: hidden;
        }
        .cockpit-console::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 3px,
                rgba(0, 0, 0, 0.07) 3px,
                rgba(0, 0, 0, 0.07) 4px
            );
            pointer-events: none;
            opacity: 0.45;
        }
        .cockpit-console::after {
            content: '';
            position: absolute;
            top: 0;
            left: 10%;
            right: 10%;
            height: 2px;
            border-radius: 0 0 2px 2px;
            background: linear-gradient(90deg, transparent, rgba(0, 232, 255, 0.55), rgba(255, 43, 214, 0.45), transparent);
            box-shadow: 0 0 10px rgba(0, 232, 255, 0.3);
            pointer-events: none;
        }
        .cockpit-console-header {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 6px;
            padding: 0 4px;
            position: relative;
            z-index: 1;
        }
        .cockpit-corner-rivets {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 2;
        }
        .cockpit-rivet {
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 30%, #9aa8bc, #3a4658 55%, #1a2030);
            box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.18);
        }
        .cockpit-rivet-tl { top: 7px; left: 10px; }
        .cockpit-rivet-tr { top: 7px; right: 10px; }
        .cockpit-rivet-bl { bottom: 7px; left: 10px; }
        .cockpit-rivet-br { bottom: 7px; right: 10px; }
        .cockpit-console-title {
            font-size: 7px;
            font-weight: 600;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(0, 232, 255, 0.75);
            text-shadow: 0 0 8px rgba(0, 232, 255, 0.4);
        }
        .cockpit-console-deck {
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            gap: 4px;
            padding: 5px 4px;
            background: rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(50, 70, 100, 0.5);
            border-radius: 12px;
            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
            position: relative;
            z-index: 1;
        }
        .cockpit-console-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 5px;
            position: relative;
            z-index: 1;
        }
        .cockpit-led {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #334455;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
        }
        .cockpit-led.on {
            background: #00e8ff;
            box-shadow: 0 0 6px rgba(0, 232, 255, 0.8), 0 0 12px rgba(0, 232, 255, 0.4);
        }
        .cockpit-led.warn {
            background: #ff6a1a;
            box-shadow: 0 0 6px rgba(255, 106, 26, 0.8);
            animation: ledBlink 2s ease-in-out infinite;
        }
        .cockpit-led.ok {
            background: #45ff9a;
            box-shadow: 0 0 6px rgba(69, 255, 154, 0.7);
        }
        @keyframes ledBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.35; }
        }
        .nav-btn {
            -webkit-appearance: none;
            appearance: none;
            flex: 1;
            margin: 0;
            max-width: 88px;
            padding: 10px 3px 6px;
            position: relative;
            background-color: #0a0e18;
            background-image:
                linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 35%),
                linear-gradient(180deg, #1a2438 0%, #0e1424 55%, #060a12 100%);
            border: 1px solid rgba(60, 80, 110, 0.7);
            border-top-color: rgba(100, 130, 170, 0.5);
            border-bottom-color: rgba(20, 30, 50, 0.9);
            border-radius: 8px;
            color: #8aa0c0;
            font-family: inherit;
            font-size: 8px;
            font-weight: 600;
            letter-spacing: 0.03em;
            line-height: 1.25;
            cursor: pointer;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            box-shadow:
                0 4px 0 #030508,
                0 5px 12px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                inset 0 -2px 5px rgba(0, 0, 0, 0.4);
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
            transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease, border-color 0.12s ease, color 0.12s ease;
            transform: translateY(0);
        }
        .nav-btn .nav-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            color: #7290b8;
            transition: color 0.15s ease, filter 0.15s ease, transform 0.15s ease;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
        }
        .nav-btn .nav-icon svg {
            width: 100%;
            height: 100%;
            display: block;
        }
        .nav-btn .nav-label {
            display: block;
            line-height: 1.1;
        }
        .nav-btn:hover .nav-icon {
            color: #9eccff;
            filter: drop-shadow(0 0 4px rgba(0, 232, 255, 0.4));
        }
        .nav-btn.active .nav-icon {
            color: #00e8ff;
            filter: drop-shadow(0 0 6px rgba(0, 232, 255, 0.8)) drop-shadow(0 0 12px rgba(0, 232, 255, 0.4));
            transform: scale(1.05);
        }
        .nav-btn::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #2a3548;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
        }
        .nav-btn:active:not(:disabled) {
            transform: translateY(3px);
            filter: brightness(1.1);
            box-shadow:
                0 1px 0 #030508,
                0 2px 6px rgba(0, 0, 0, 0.45),
                inset 0 3px 8px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        .nav-btn.active {
            color: #e8f4ff;
            border-color: rgba(0, 232, 255, 0.55);
            background-image:
                linear-gradient(180deg, rgba(0, 232, 255, 0.12) 0%, transparent 40%),
                linear-gradient(180deg, #142840 0%, #0a1828 55%, #060e18 100%);
            box-shadow:
                0 4px 0 #041018,
                0 5px 14px rgba(0, 232, 255, 0.2),
                0 0 12px rgba(0, 232, 255, 0.15),
                inset 0 0 10px rgba(0, 232, 255, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
            text-shadow: 0 0 8px rgba(0, 232, 255, 0.5);
        }
        .nav-btn.active::before {
            background: #00e8ff;
            box-shadow: 0 0 6px rgba(0, 232, 255, 0.9), 0 0 12px rgba(0, 232, 255, 0.5);
        }
        .nav-btn.active:active:not(:disabled) {
            transform: translateY(3px);
            box-shadow:
                0 1px 0 #041018,
                0 2px 8px rgba(0, 232, 255, 0.25),
                inset 0 3px 10px rgba(0, 0, 0, 0.5);
        }

        .mining-world {
            position: absolute; left: 0; top: 0;
            will-change: transform;
            transform-origin: 0 0;
            background-color: #030615;
            background-image: url('../mines/Fon.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            box-sizing: border-box;
            border: 1px solid rgba(0, 232, 255, 0.25);
        }
        .mining-tap { display: none; }
        .mining-hub {
            position: absolute;
            transform: translate(-50%, -50%);
            width: var(--mining-hub-world-size); aspect-ratio: 1;
            pointer-events: none; z-index: 3;
            isolation: isolate;
        }
        .planet-wrap {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            clip-path: circle(50% at 50% 50%);
            overflow: hidden;
            background: transparent;
        }
        .planet-canvas {
            width: 100%; height: 100%; display: block;
            image-rendering: auto;
            transform-origin: 50% 50%;
            will-change: transform;
        }
        .player-ship {
            position: absolute; z-index: 10; pointer-events: none;
            transform: translate(-50%, -50%);
            transition: none;
        }
        /* Wargalot idle sprite in the mining world; the event HUD stays unobstructed. */
        .mining-event-boss {
            position: absolute;
            z-index: 8;
            width: var(--mining-hub-world-size);
            height: var(--mining-hub-world-size);
            overflow: hidden;
            pointer-events: none;
            user-select: none;
        }
        .mining-event-boss.hidden { display: none !important; }
        .mining-event-boss-frame {
            position: absolute;
            display: block;
            max-width: none;
            max-height: none;
            margin: 0;
            padding: 0;
            border: 0;
            image-rendering: auto;
            pointer-events: none;
            user-select: none;
            visibility: hidden;
        }
        .player-ship img,
        .player-ship canvas,
        .player-ship .ship-sprite-img {
            position: relative;
            z-index: 1;
            display: block;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            width: 43.5px;
            height: 43.5px;
            object-fit: contain;
            pointer-events: none;
        }
        .ship-flame {
            position: absolute;
            left: 0;
            top: 0;
            width: 12px;
            height: 30px;
            transform: translate(-50%, -50%);
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            pointer-events: none;
            z-index: 9;
            opacity: 0;
        }
        .ship-flame.active { opacity: 1; }
        .laser-layer {
            position: absolute; left: 0; top: 0;
            width: 100%; height: 100%;
            pointer-events: none; z-index: 35; overflow: visible;
        }
        .laser-beam {
            stroke: #40e8ff; stroke-width: 2; stroke-linecap: round;
            filter: drop-shadow(0 0 4px #40e8ff);
            animation: laserPulse .35s ease-in-out infinite alternate;
        }
        .laser-beam.laser-blue {
            stroke: #4488ff;
            filter: drop-shadow(0 0 5px #4488ff);
        }
        .laser-beam.laser-red {
            stroke: #ff3333;
            filter: drop-shadow(0 0 5px #ff3333);
        }
        .laser-beam.laser-white {
            stroke: #ffffff;
            filter: drop-shadow(0 0 5px #ffffff);
        }
        @keyframes laserPulse { from { opacity: .55; stroke-width: 1.5; } to { opacity: 1; stroke-width: 2.5; } }
        .pirate-duel-beam {
            stroke: #ffffff;
            stroke-width: 2.4;
            stroke-linecap: round;
            stroke-dasharray: 9 13;
            filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 11px rgba(255, 255, 255, .9));
            animation: pirateDuelBeam 1.05s linear infinite;
        }
        .pirate-duel-beam.pirate-duel-red,
        .pirate-duel-lock.pirate-duel-red,
        .pirate-duel-impact.pirate-duel-red {
            stroke: #ff3333;
            filter: drop-shadow(0 0 5px #ff3333) drop-shadow(0 0 13px rgba(255, 51, 51, .85));
        }
        .pirate-duel-beam.pirate-duel-purple,
        .pirate-duel-lock.pirate-duel-purple,
        .pirate-duel-impact.pirate-duel-purple {
            stroke: #c56cff;
            filter: drop-shadow(0 0 5px #c56cff) drop-shadow(0 0 13px rgba(184, 92, 255, .85));
        }
        .pirate-duel-beam.pirate-duel-gold,
        .pirate-duel-lock.pirate-duel-gold,
        .pirate-duel-impact.pirate-duel-gold {
            stroke: #ffd400;
            filter: drop-shadow(0 0 5px #ffd400) drop-shadow(0 0 13px rgba(255, 180, 0, .88));
        }
        .pirate-duel-lock {
            fill: none;
            stroke: #ffffff;
            stroke-width: 1.5;
            stroke-dasharray: 5 10;
            transform-box: fill-box;
            transform-origin: center;
            animation: pirateDuelLock 1.8s linear infinite;
        }
        .pirate-duel-lock-inner {
            stroke-width: 1;
            stroke-dasharray: 2 7;
            animation-direction: reverse;
            opacity: .72;
        }
        .pirate-duel-impact {
            fill: none;
            stroke: #ffffff;
            stroke-width: 1.6;
            opacity: 0;
            transform-box: fill-box;
            transform-origin: center;
            animation: pirateDuelImpact 1.1s ease-out infinite;
        }
        .pirate-duel-particle {
            fill: #ffffff;
            opacity: 0;
            filter: drop-shadow(0 0 4px #ffffff);
            animation: pirateDuelParticle 1.05s ease-out infinite;
        }
        .pirate-duel-particle.pirate-duel-red { fill: #ffaaa0; filter: drop-shadow(0 0 5px #ff3333); }
        .pirate-duel-particle.pirate-duel-purple { fill: #f0c6ff; filter: drop-shadow(0 0 5px #c56cff); }
        .pirate-duel-particle.pirate-duel-gold { fill: #fff4a3; filter: drop-shadow(0 0 5px #ffd400); }
        .mine-object.mine-pirate.pirate-duel-active {
            animation: pirateDuelTarget .34s ease-in-out infinite alternate;
        }
        .mine-object.mine-pirate.pirate-duel-red { filter: drop-shadow(0 0 9px rgba(255, 51, 51, .98)); }
        .mine-object.mine-pirate.pirate-duel-purple { filter: drop-shadow(0 0 9px rgba(197, 108, 255, .98)); }
        .mine-object.mine-pirate.pirate-duel-gold { filter: drop-shadow(0 0 10px rgba(255, 212, 0, .98)); }
        @keyframes pirateDuelBeam {
            from { stroke-dashoffset: 44; opacity: .35; }
            45% { opacity: 1; }
            to { stroke-dashoffset: -44; opacity: .35; }
        }
        @keyframes pirateDuelLock {
            to { transform: rotate(360deg); }
        }
        @keyframes pirateDuelImpact {
            0% { opacity: 0; transform: scale(.25); }
            22% { opacity: 1; }
            100% { opacity: 0; transform: scale(1.8); }
        }
        @keyframes pirateDuelParticle {
            0% { opacity: 0; transform: translate(0, 0) scale(.25); }
            18% { opacity: 1; }
            100% { opacity: 0; transform: translate(var(--particle-x), var(--particle-y)) scale(0); }
        }
        @keyframes pirateDuelTarget {
            from { filter: brightness(1) drop-shadow(0 0 5px currentColor); }
            to { filter: brightness(1.7) drop-shadow(0 0 13px currentColor); }
        }
        @media (prefers-reduced-motion: reduce) {
            .pirate-duel-beam,
            .pirate-duel-lock,
            .pirate-duel-impact,
            .pirate-duel-particle,
            .mine-object.mine-pirate.pirate-duel-active { animation-duration: 1.8s; }
        }
        .salvage-tether {
            stroke: rgba(255, 211, 86, .22);
            stroke-width: 8;
            stroke-linecap: round;
            stroke-dasharray: 2 18;
            filter: drop-shadow(0 0 8px rgba(255, 174, 54, .8));
            animation: salvageTether 1.1s linear infinite;
        }
        .salvage-link {
            stroke: #ffe36b;
            stroke-width: 1.8;
            stroke-linecap: round;
            filter: drop-shadow(0 0 5px #ff9d32);
            stroke-dasharray: 8 12;
            animation: salvageLink .7s linear infinite;
        }
        .salvage-ring {
            fill: none;
            stroke: #ffd45a;
            stroke-width: 1.5;
            opacity: 0;
            transform-box: fill-box;
            transform-origin: center;
            filter: drop-shadow(0 0 5px #ff8a30);
            animation: salvageRing 1.05s ease-out infinite;
        }
        .salvage-particle {
            fill: #fff1a8;
            opacity: 0;
            filter: drop-shadow(0 0 4px #ff9d32);
            animation: salvageSpark 1.25s ease-out infinite;
        }
        .salvage-tether.salvage-gold {
            stroke: rgba(255, 212, 0, .42);
            filter: drop-shadow(0 0 10px rgba(255, 212, 0, .95));
        }
        .salvage-tether.salvage-purple {
            stroke: rgba(197, 108, 255, .42);
            filter: drop-shadow(0 0 10px rgba(184, 92, 255, .95));
        }
        .salvage-tether.salvage-red {
            stroke: rgba(255, 51, 51, .42);
            filter: drop-shadow(0 0 10px rgba(255, 51, 51, .95));
        }
        .salvage-link.salvage-gold {
            stroke: #ffd400;
            filter: drop-shadow(0 0 7px #ffd400) drop-shadow(0 0 12px rgba(255, 180, 0, .8));
        }
        .salvage-link.salvage-purple {
            stroke: #c56cff;
            filter: drop-shadow(0 0 7px #c56cff) drop-shadow(0 0 12px rgba(126, 38, 210, .8));
        }
        .salvage-link.salvage-red {
            stroke: #ff3333;
            filter: drop-shadow(0 0 7px #ff3333) drop-shadow(0 0 12px rgba(180, 20, 20, .8));
        }
        .salvage-ring.salvage-gold {
            stroke: #ffd400;
            filter: drop-shadow(0 0 7px #ffd400) drop-shadow(0 0 12px rgba(255, 180, 0, .75));
        }
        .salvage-ring.salvage-purple {
            stroke: #c56cff;
            filter: drop-shadow(0 0 7px #c56cff) drop-shadow(0 0 12px rgba(126, 38, 210, .75));
        }
        .salvage-ring.salvage-red {
            stroke: #ff3333;
            filter: drop-shadow(0 0 7px #ff3333) drop-shadow(0 0 12px rgba(180, 20, 20, .75));
        }
        .salvage-particle.salvage-gold {
            fill: #fff4a3;
            filter: drop-shadow(0 0 5px #ffd400);
        }
        .salvage-particle.salvage-purple {
            fill: #f0c6ff;
            filter: drop-shadow(0 0 5px #c56cff);
        }
        .salvage-particle.salvage-red {
            fill: #ffb0a8;
            filter: drop-shadow(0 0 5px #ff3333);
        }
        .salvage-tether.salvage-white {
            stroke: rgba(255, 255, 255, .28);
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, .95));
        }
        .salvage-link.salvage-white {
            stroke: #ffffff;
            filter: drop-shadow(0 0 7px #ffffff);
        }
        .salvage-ring.salvage-white {
            stroke: #ffffff;
            filter: drop-shadow(0 0 7px #ffffff);
        }
        .salvage-particle.salvage-white {
            fill: #ffffff;
            filter: drop-shadow(0 0 5px #ffffff);
        }
        .mine-object.mine-wreck.salvage-active {
            filter: drop-shadow(0 0 7px rgba(255, 184, 66, .9));
            animation: salvageObjectPulse .38s ease-in-out infinite alternate;
        }
        .mine-object.mine-wreck.salvage-active.salvage-vip-gold {
            filter: drop-shadow(0 0 10px rgba(255, 212, 0, .98));
        }
        .mine-object.mine-wreck.salvage-active.salvage-vip-purple {
            filter: drop-shadow(0 0 10px rgba(184, 92, 255, .98));
        }
        .mine-object.mine-wreck.salvage-active.salvage-vip-red {
            filter: drop-shadow(0 0 10px rgba(255, 51, 51, .98));
        }
        .mine-object.mine-wreck.salvage-active.salvage-no-vip {
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, .98));
        }
        @keyframes salvageTether {
            to { stroke-dashoffset: -40; }
        }
        @keyframes salvageLink {
            0% { opacity: .25; stroke-dashoffset: 20; }
            45% { opacity: 1; }
            100% { opacity: .25; stroke-dashoffset: -20; }
        }
        @keyframes salvageRing {
            0% { opacity: 0; transform: scale(.45); }
            20% { opacity: .95; }
            100% { opacity: 0; transform: scale(1.7); }
        }
        @keyframes salvageSpark {
            0% { opacity: 0; transform: translate(0, 0) scale(.4); }
            18% { opacity: 1; }
            100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(0); }
        }
        @keyframes salvageObjectPulse {
            from { transform: translate(-50%, -50%) rotate(-2deg) scale(.94); }
            to { transform: translate(-50%, -50%) rotate(2deg) scale(1.08); }
        }
        .sound-wave {
            fill: none;
            stroke: rgba(255, 255, 255, 1);
            stroke-width: 3.5;
            stroke-linecap: round;
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, .95));
            animation: soundWavePulse .55s ease-out infinite;
        }
        .sound-wave.sound-wave-gold {
            stroke: #ffd400;
            filter: drop-shadow(0 0 8px #ffd400) drop-shadow(0 0 14px rgba(255, 180, 0, .8));
        }
        .sound-wave.sound-wave-purple {
            stroke: #c56cff;
            filter: drop-shadow(0 0 8px #c56cff) drop-shadow(0 0 14px rgba(126, 38, 210, .8));
        }
        .sound-wave.sound-wave-red {
            stroke: #ff3333;
            filter: drop-shadow(0 0 8px #ff3333) drop-shadow(0 0 14px rgba(180, 20, 20, .8));
        }
        @keyframes soundWavePulse {
            0% { opacity: .95; stroke-width: 3; }
            100% { opacity: .12; stroke-width: 1; }
        }
        .mine-object {
            position: absolute; z-index: 25; transform: translate(-50%, -50%);
            cursor: pointer; pointer-events: auto;
            filter: drop-shadow(0 0 6px rgba(255,200,80,.45));
            transition: opacity .3s, transform .2s;
            min-width: 44px; min-height: 44px;
            display: flex; align-items: center; justify-content: center;
            touch-action: manipulation;
        }
        .mine-object.mine-meteor { min-width: 56px; min-height: 56px; }
        .mine-object.mine-meteor,
        .mine-object.mine-wreck {
            transition: opacity .3s;
            animation: mineIdleFloat ease-in-out infinite;
        }
        .mine-object.mine-wreck.salvage-active { animation: salvageObjectPulse .38s ease-in-out infinite alternate; }
        .mine-object.mine-pirate { transition: opacity .3s; }
        .mine-object.mine-pirate canvas,
        .mine-object.mine-pirate .mine-sprite-img { transform: scale(.82); transform-origin: center; }
        .mine-object.mine-collector-bot {
            z-index: 28;
            min-width: 44px;
            min-height: 44px;
            filter: drop-shadow(0 0 7px rgba(80, 220, 255, .75));
        }
        .collector-bot-map-image {
            display: block;
            width: 38px;
            height: 38px;
            object-fit: contain;
            image-rendering: pixelated;
            pointer-events: none;
        }
        .mine-object.mine-collector-bot.collector-bot-scanning {
            filter: drop-shadow(0 0 8px rgba(74, 234, 255, .98));
        }
        .mine-object.mine-collector-bot.collector-bot-scanning::after {
            content: '';
            position: absolute;
            inset: -17px;
            border: 1px solid rgba(74, 234, 255, .9);
            border-radius: 50%;
            animation: collectorMapScan 1.2s ease-out infinite;
            pointer-events: none;
        }
        .mine-object.mine-collector-bot.collector-bot-complete {
            filter: drop-shadow(0 0 8px rgba(255, 36, 48, .98));
            animation: collectorMapAlert .55s ease-in-out infinite alternate;
        }
        .mine-object.mine-collector-bot.collector-bot-complete::after {
            content: '';
            position: absolute;
            inset: -13px;
            border: 2px solid rgba(255, 38, 48, .85);
            border-radius: 50%;
            animation: collectorMapAlertRing 1s ease-out infinite;
            pointer-events: none;
        }
        @keyframes collectorMapScan {
            from { opacity: .9; transform: scale(.55); }
            to { opacity: 0; transform: scale(1.7); }
        }
        @keyframes collectorMapAlert {
            from { opacity: .6; }
            to { opacity: 1; }
        }
        @keyframes collectorMapAlertRing {
            from { opacity: .95; transform: scale(.6); }
            to { opacity: 0; transform: scale(1.6); }
        }
        @keyframes mineIdleFloat {
            0%, 100% { transform: translate(-50%, -50%) rotate(-2deg) translate(0, 0); }
            33% { transform: translate(-50%, -50%) rotate(1.5deg) translate(2px, -3px); }
            66% { transform: translate(-50%, -50%) rotate(-1deg) translate(-2px, 2px); }
        }
        .mine-object canvas,
        .mine-object .mine-sprite-img {
            display: block;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            pointer-events: none;
        }
        .mine-object:active { transform: translate(-50%, -50%) scale(1.12); }
        .ship-sprite-img {
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            max-width: 100%;
            height: auto;
            pointer-events: none;
        }
        .ship-preview .ship-sprite-img {
            height: 130px;
            width: auto;
            max-width: 100%;
        }

        /* ── Окна ── */
        .overlay {
            position: fixed;
            top: calc(var(--game-inset-top) + var(--panel-top-h));
            bottom: calc(var(--game-inset-bottom) + var(--panel-bottom-h));
            left: var(--game-inset-left);
            right: var(--game-inset-right);
            z-index: 50; display: none; align-items: center; justify-content: center;
            pointer-events: none;
        }
        .overlay.active { display: flex; }
        .overlay.overlay-hud-modal {
            z-index: 200000;
            top: var(--game-inset-top);
            bottom: var(--game-inset-bottom);
            left: var(--game-inset-left);
            right: var(--game-inset-right);
            pointer-events: auto;
            cursor: pointer;
        }
        .overlay.overlay-hud-modal::before { pointer-events: none; }
        .overlay.overlay-hud-modal > .window { cursor: default; }
        .overlay.overlay-pvp {
            align-items: stretch;
            justify-content: center;
            padding: 0;
        }
        .overlay > .window { pointer-events: all; }
        .overlay::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 50% 40%, rgba(0, 232, 255, 0.06) 0%, rgba(0, 0, 0, 0.55) 70%);
            pointer-events: none;
        }
        .window {
            position: relative;
            background: linear-gradient(160deg, rgba(8, 14, 40, 0.97) 0%, rgba(4, 6, 20, 0.98) 100%);
            border: 1px solid rgba(0, 232, 255, 0.45);
            border-radius: 6px;
            padding: 14px 12px;
            width: min(90%, 340px);
            max-height: min(65vh, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 20px));
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            animation: slideUp .3s ease-out;
            box-shadow:
                0 0 24px rgba(0, 232, 255, 0.18),
                0 0 48px rgba(255, 43, 214, 0.08),
                inset 0 0 40px rgba(0, 232, 255, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
            font-family: 'Rajdhani', 'Segoe UI', sans-serif;
        }
        .window::before {
            content: '';
            position: absolute;
            top: 0; left: 12px; right: 12px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-magenta), transparent);
            opacity: 0.7;
            pointer-events: none;
        }
        @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

        /* ─── Карта звёздной системы ─── */
        .window-map {
            max-width: 420px;
            width: 94%;
            max-height: min(86vh, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 28px));
            padding: 15px 12px 16px;
            background:
                linear-gradient(145deg, rgba(8, 20, 48, .98), rgba(3, 7, 25, .99) 62%, rgba(29, 7, 47, .98)),
                radial-gradient(circle at 15% 0, rgba(0, 232, 255, .18), transparent 42%);
            border-color: rgba(89, 230, 255, .72);
            box-shadow:
                0 0 24px rgba(0, 232, 255, .24),
                0 0 58px rgba(255, 43, 214, .16),
                inset 0 0 34px rgba(0, 150, 255, .09),
                inset 0 1px 0 rgba(255, 255, 255, .12);
        }
        .window-map::after {
            content: '';
            position: absolute;
            inset: 7px;
            z-index: 0;
            border: 1px solid rgba(0, 232, 255, .18);
            border-radius: 4px;
            background:
                linear-gradient(90deg, rgba(0, 232, 255, .7) 0 18px, transparent 18px calc(100% - 18px), rgba(255, 43, 214, .7) calc(100% - 18px)),
                linear-gradient(180deg, rgba(0, 232, 255, .7) 0 18px, transparent 18px calc(100% - 18px), rgba(255, 43, 214, .7) calc(100% - 18px));
            background-size: 100% 1px, 1px 100%;
            background-position: top, left;
            background-repeat: no-repeat;
            pointer-events: none;
        }
        .window-map > * { position: relative; z-index: 1; }
        .window-map .wtitle {
            position: relative;
            margin-bottom: 7px;
            color: #e6fbff;
            letter-spacing: .14em;
            text-shadow: 0 0 8px rgba(0, 232, 255, .8), 0 0 20px rgba(255, 43, 214, .32);
        }
        .window-map .wtitle::before,
        .window-map .wtitle::after {
            position: absolute;
            top: 50%;
            color: var(--neon-magenta);
            font-size: .8em;
            text-shadow: 0 0 8px var(--neon-magenta);
            transform: translateY(-50%);
        }
        .window-map .wtitle::before { content: '◈'; right: calc(100% + 8px); }
        .window-map .wtitle::after { content: '◈'; left: calc(100% + 8px); }
        .window-map .map-header-note {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #8eeaff;
            font-size: var(--ui-fs-sm);
            letter-spacing: .11em;
            text-transform: uppercase;
        }
        .window-map .map-header-note::before,
        .window-map .map-header-note::after {
            content: '';
            width: 28px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--neon-cyan));
            box-shadow: 0 0 6px var(--neon-cyan);
        }
        .window-map .map-header-note::after { transform: scaleX(-1); }
        .window-map-sub {
            max-width: 440px;
            max-height: min(85vh, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 24px));
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            padding-top: 10px;
            padding-bottom: 12px;
        }
        #win-map-collision {
            max-height: min(86vh, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 24px));
        }
        .mode-window {
            background:
                linear-gradient(145deg, rgba(12, 24, 58, .98), rgba(4, 7, 24, .99) 58%, rgba(20, 7, 38, .98)),
                radial-gradient(circle at 50% 0, rgba(0, 232, 255, .16), transparent 48%);
            border-color: rgba(91, 220, 255, .62);
            box-shadow: 0 0 28px rgba(0, 220, 255, .2), 0 0 70px rgba(185, 45, 255, .13), inset 0 0 48px rgba(0, 160, 255, .06);
        }
        .mode-window::after {
            content: '';
            position: absolute;
            inset: 8px;
            border: 1px solid rgba(119, 230, 255, .11);
            border-radius: 4px;
            pointer-events: none;
        }
        .mode-window .map-header-note { position: relative; z-index: 1; color: #8fb6d2; }
        .mode-window .wtitle { text-shadow: 0 0 12px rgba(86, 225, 255, .55); }

        .invasion-lobby-hero,
        .collision-lobby-hero,
        .solo-boss-lobby-hero { position: relative; overflow: hidden; text-align: left; padding: 16px 15px; border: 1px solid rgba(85, 218, 255, .28); border-radius: 8px; background: linear-gradient(120deg, rgba(16, 52, 82, .62), rgba(20, 10, 52, .42)); box-shadow: inset 0 0 24px rgba(0, 200, 255, .08); }
        .invasion-lobby-hero::after,
        .collision-lobby-hero::after,
        .solo-boss-lobby-hero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(135, 239, 255, .035) 9px 10px); pointer-events: none; }
        .invasion-lobby-kicker,
        .collision-lobby-kicker,
        .solo-boss-lobby-kicker { position: relative; z-index: 1; color: #58e8ff; font-size: 9px; letter-spacing: .14em; font-weight: 600; }
        .invasion-lobby-lead,
        .collision-lobby-lead,
        .solo-boss-lobby-lead { position: relative; z-index: 1; margin-top: 7px; color: #f1fbff; font-size: 17px; line-height: 1.05; letter-spacing: .07em; font-weight: 600; text-shadow: 0 0 16px rgba(0, 219, 255, .4); }
        .invasion-lobby-hero p,
        .collision-lobby-hero p,
        .solo-boss-lobby-hero p { position: relative; z-index: 1; margin: 9px 0 0; color: #9ab7c9; font-size: 11px; line-height: 1.45; }

        .collision-lobby { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; text-align: center; }
        .collision-rift-mark { position: absolute; right: 17px; top: 17px; width: 58px; height: 58px; border: 1px solid rgba(194, 102, 255, .55); border-radius: 50%; box-shadow: 0 0 18px rgba(167, 48, 255, .35), inset 0 0 14px rgba(0, 225, 255, .2); transform: rotate(25deg); }
        .collision-rift-mark::before, .collision-rift-mark::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(91, 230, 255, .75); border-radius: 48% 52% 42% 58%; }
        .collision-rift-mark::after { inset: 18px; border-color: rgba(255, 94, 226, .8); }
        .collision-rift-mark span { position: absolute; inset: 25px; border-radius: 50%; background: #d886ff; box-shadow: 0 0 15px #cb56ff; }
        .collision-status-panel { padding: 10px 12px; border-left: 2px solid #43e7ff; border-right: 1px solid rgba(67, 231, 255, .25); background: rgba(0, 31, 56, .46); text-align: left; }
        .collision-status-label { color: #55e7ff; font-size: 9px; letter-spacing: .12em; }
        .collision-status { margin: 5px 0 0; min-height: 34px; color: #c9e4f3; line-height: 1.45; font-size: 12px; }
        .collision-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .collision-actions .btn { flex: 1; min-height: 46px !important; }
        .collision-actions #btn-collision-cancel { flex-basis: 100%; }
        .collision-create-btn { background: linear-gradient(135deg, rgba(0, 178, 229, .72), rgba(73, 58, 214, .74)) !important; border-color: rgba(111, 239, 255, .75) !important; box-shadow: 0 0 16px rgba(0, 205, 255, .25); }
        .collision-open-panel { padding: 10px 11px 8px; border: 1px solid rgba(67, 231, 255, .2); border-radius: 7px; background: rgba(2, 16, 34, .58); }
        .collision-room-heading { margin: 0 0 8px; color: #8eeaff; font-size: 10px; letter-spacing: .12em; }
        .collision-room-heading b { color: #ed8dff; font-size: 14px; }
        .collision-room-list { max-height: 190px; gap: 7px; }
        .collision-room-row { padding: 9px; border-color: rgba(0, 232, 255, .22); border-radius: 6px; background: linear-gradient(90deg, rgba(14, 53, 78, .5), rgba(14, 20, 52, .42)); box-shadow: inset 3px 0 rgba(78, 222, 255, .38); }
        .collision-room-row strong { color: #effbff; font-size: 11px; }
        .collision-room-row span { color: #8db1c5; }

        .invasion-lobby { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; text-align: center; }
        .invasion-hero-orbit { position: absolute; right: 17px; top: 15px; width: 58px; height: 58px; border: 1px dashed rgba(255, 186, 76, .7); border-radius: 50%; box-shadow: 0 0 18px rgba(255, 137, 46, .22); animation: modeOrbit 7s linear infinite; }
        .invasion-hero-orbit::before { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(255, 89, 136, .7); border-radius: 50%; }
        .invasion-hero-orbit span { position: absolute; right: -5px; top: 17px; color: #ffbd5b; font-size: 18px; text-shadow: 0 0 12px #ff6c2a; }
        @keyframes modeOrbit { to { transform: rotate(360deg); } }
        .invasion-progress-panel { padding: 11px 12px 9px; border: 1px solid rgba(255, 169, 66, .25); border-radius: 7px; background: rgba(36, 25, 20, .48); }
        .invasion-progress-head, .invasion-progress-foot { display: flex; justify-content: space-between; gap: 6px; color: #aebdca; font-size: 9px; letter-spacing: .08em; }
        .invasion-progress-head strong { color: #ffd078; }
        .invasion-progress-head small, .invasion-progress-foot { font-size: 8px; }
        .invasion-progress-track { position: relative; height: 7px; margin: 9px 0 6px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: visible; }
        .invasion-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff7d3d, #ffd25b); box-shadow: 0 0 10px rgba(255, 157, 45, .65); }
        .invasion-progress-track i { position: absolute; top: -3px; width: 2px; height: 13px; background: #ff5a89; box-shadow: 0 0 7px #ff477c; }
        .invasion-lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
        .invasion-lobby-stat { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 5px; margin: 0; padding: 9px 7px; border: 1px solid rgba(72, 219, 255, .16); border-radius: 6px; background: rgba(5, 27, 48, .52); text-align: left; font-size: 10px; color: #9cb8c7; }
        .invasion-stat-icon { color: #63eaff; font-size: 15px; text-align: center; }
        .invasion-lobby-stat strong { color: #eafaff; font-size: 13px; text-align: right; }
        .invasion-lobby-stat strong small { color: #7f9bad; font-size: 9px; }
        .invasion-lobby-alert, .solo-boss-lobby-alert { display: flex; gap: 8px; align-items: flex-start; padding: 8px 9px; color: #b5c9d7; border: 1px solid rgba(255, 174, 75, .22); border-radius: 5px; background: rgba(85, 41, 16, .22); text-align: left; font-size: 10px; line-height: 1.4; }
        .invasion-lobby-alert span:first-child, .solo-boss-lobby-alert span:first-child { color: #ffbd5b; font-size: 14px; }
        .invasion-start-btn { min-height: 48px !important; background: linear-gradient(135deg, rgba(255, 112, 52, .8), rgba(195, 43, 113, .72)) !important; border-color: rgba(255, 177, 90, .8) !important; box-shadow: 0 0 18px rgba(255, 93, 53, .28); }

        .solo-boss-lobby-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 11px; padding: 4px 0 8px; }
        .solo-boss-lobby-preview-wrap { position: relative; min-height: 154px; overflow: hidden; border: 1px solid rgba(255, 83, 150, .33); border-radius: 8px; background: radial-gradient(circle at center, rgba(88, 16, 101, .52), rgba(7, 9, 30, .92) 68%); box-shadow: inset 0 0 30px rgba(255, 0, 106, .1), 0 0 18px rgba(255, 24, 123, .11); }
        .solo-boss-lobby-preview-wrap::before { content: ''; position: absolute; inset: 12px 25%; border: 1px solid rgba(255, 93, 166, .22); transform: skewX(-20deg); }
        .solo-boss-lobby-scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 101, 177, .7); box-shadow: 0 0 10px #ff3e9e; animation: bossScan 3.2s linear infinite; }
        @keyframes bossScan { to { top: 100%; } }
        .solo-boss-lobby-preview { position: relative; z-index: 2; width: 148px; height: 148px; }
        .solo-boss-target-ring { position: absolute; z-index: 1; left: 50%; top: 50%; width: 105px; height: 105px; border: 1px solid rgba(255, 116, 182, .65); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 18px rgba(255, 0, 85, .3); animation: targetRing 2.2s ease-in-out infinite; }
        @keyframes targetRing { 50% { transform: translate(-50%, -50%) scale(1.17) rotate(45deg); opacity: .4; } }
        .solo-boss-threat-tag { position: absolute; right: 9px; bottom: 8px; z-index: 3; color: #ff91bd; font-size: 8px; letter-spacing: .12em; }
        .solo-boss-lobby-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
        .solo-boss-lobby-stat { padding: 9px 6px; border: 1px solid rgba(255, 93, 164, .23); border-radius: 6px; background: rgba(49, 13, 48, .42); text-align: center; }
        .solo-boss-lobby-stat span, .solo-boss-lobby-stat em { display: block; color: #a98fa8; font-size: 8px; font-style: normal; letter-spacing: .06em; }
        .solo-boss-lobby-stat strong { display: block; margin: 4px 0 2px; color: #ffe8f2; font-size: 17px; text-shadow: 0 0 9px rgba(255, 82, 150, .6); }
        .solo-boss-lobby-stat strong small { color: #ba89a6; font-size: 9px; }
        .solo-boss-lobby-stat strong.is-ready { color: #7dffdf; }
        .solo-boss-lobby-stat strong.is-empty { color: #ff668d; }
        .solo-boss-lobby-alert { border-color: rgba(255, 90, 151, .26); background: rgba(85, 15, 47, .25); }
        .solo-boss-lobby-alert span:first-child { color: #ff83b5; }
        .solo-boss-start-btn { min-height: 48px !important; background: linear-gradient(135deg, rgba(237, 39, 105, .86), rgba(112, 29, 180, .78)) !important; border-color: rgba(255, 115, 178, .8) !important; box-shadow: 0 0 20px rgba(255, 25, 123, .3); }
        #win-map-faction {
            height: min(76vh, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 36px));
            max-height: min(76vh, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 36px));
            padding-top: 8px;
            padding-bottom: 10px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        #win-map-faction #faction-hq-root {
            display: none;
        }
        /* Карусель: absolute-трек + фиксированная высота окна → панели скроллятся */
        .faction-hq-panels {
            flex: 1;
            min-height: 0;
            position: relative;
            overflow: hidden;
        }
        .faction-hq-panel-track {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            display: flex;
            width: 400%;
            height: 100%;
            transition: transform 0.28s ease-out;
            will-change: transform;
        }
        .faction-hq-panel {
            flex: 0 0 25%;
            width: 25%;
            height: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
            padding: 0 4px 12px 0;
        }
        .faction-hq-panel-dots {
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            gap: 8px;
            padding: 4px 0 2px;
        }
        .faction-hq-panel-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255, 212, 0, 0.2);
            border: 1px solid rgba(255, 212, 0, 0.4);
        }
        .faction-hq-panel-dot.active {
            background: rgba(255, 212, 0, 0.9);
            box-shadow: 0 0 6px rgba(255, 212, 0, 0.55);
        }
        .faction-market { padding: 0 2px 12px; color: #c8dce8; font-size: var(--ui-fs-md); }
        .faction-market-section-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 10px 0 5px; color: #00e8ff; font-size: var(--ui-fs-sm); font-weight: 600; letter-spacing: .07em; }
        .faction-market-section-title > span:last-child { color: #71899c; font-size: var(--ui-fs-xs); letter-spacing: 0; font-weight: 400; }
        .market-inventory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; }
        .market-inventory-item { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 3px; min-width: 0; padding: 4px 5px; border: 1px solid rgba(0, 232, 255, 0.18); border-radius: 4px; background: rgba(0, 16, 32, 0.48); }
        .market-inventory-item > span:first-child { display: flex; justify-content: center; }
        .market-inventory-item .part-chip { transform: scale(.78); transform-origin: center; }
        .market-inventory-label { overflow: hidden; color: #9db3c3; font-size: var(--ui-fs-xs); text-overflow: ellipsis; white-space: nowrap; }
        .market-inventory-item strong { color: #f0f7ff; font-size: var(--ui-fs-sm); }
        .faction-market-open { width: 100%; margin: 2px 0 7px; padding: 8px 10px !important; border-color: rgba(0, 232, 255, 0.75) !important; color: #eafcff !important; font-size: var(--ui-fs-md) !important; font-weight: 600 !important; }
        .faction-market-form { display: flex; flex-direction: column; gap: 8px; padding: 9px; margin: 0 0 10px; border: 1px solid rgba(0, 232, 255, 0.35); border-radius: 6px; background: linear-gradient(180deg, rgba(0, 40, 62, 0.5), rgba(0, 12, 28, 0.72)); }
        .market-form-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 5px; color: #e8f7ff; font-size: var(--ui-fs-md); }
        .market-form-preview { color: #ffd400; font-size: var(--ui-fs-sm); font-weight: 400; }
        .market-form-row { display: flex; gap: 6px; }
        .faction-market-form label { display: flex; flex-direction: column; gap: 4px; flex: 1; color: #9db3c3; font-size: var(--ui-fs-sm); }
        .faction-market-form select { min-width: 0; width: 100%; box-sizing: border-box; color: #e4f4ff; background: #101c2c; border: 1px solid #31516a; border-radius: 3px; padding: 6px; font: inherit; }
        .market-submit { width: 100%; padding: 7px 8px !important; font-size: var(--ui-fs-sm) !important; }
        .faction-market-alert { padding: 7px 8px; border: 1px solid rgba(255, 170, 70, 0.4); border-radius: 4px; background: rgba(75, 40, 0, 0.3); color: #ffd28a; font-size: var(--ui-fs-sm); line-height: 1.35; }
        .faction-market-orders-heading { margin-top: 12px; }
        .faction-market-order { padding: 8px; margin: 5px 0; border: 1px solid rgba(255, 212, 0, 0.28); border-radius: 5px; background: rgba(32, 24, 0, 0.28); color: #c8dce8; }
        .faction-market-order.own { border-color: rgba(0, 232, 255, 0.3); background: rgba(0, 24, 42, 0.38); }
        .faction-market-order-top, .faction-market-order-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
        .faction-market-order-top { margin-bottom: 7px; }
        .market-seller { color: #eaf7ff; font-size: var(--ui-fs-sm); font-weight: 600; }
        .market-order-status { color: #71899c; font-size: var(--ui-fs-xs); white-space: nowrap; }
        .faction-market-trade { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3px; }
        .faction-market-trade > div:last-child { text-align: right; }
        .market-part { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
        .market-part-icon { flex: 0 0 auto; }
        .market-part-icon .part-chip { transform: scale(.9); transform-origin: center; }
        .market-part strong { display: block; color: #f0f7ff; font-size: var(--ui-fs-sm); }
        .market-part small { display: block; margin-top: 2px; color: #71899c; font-size: var(--ui-fs-xs); }
        .faction-market-order-foot { margin-top: 7px; color: #6a8498; font-size: var(--ui-fs-xs); }
        .market-arrow { color: #ffd400; margin: 0 4px; font-size: var(--ui-fs-lg); }
        .faction-market-loading, .faction-market-empty { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 20px 8px; border: 1px dashed rgba(0, 232, 255, 0.2); border-radius: 5px; color: #71899c; text-align: center; font-size: var(--ui-fs-sm); }
        .faction-market-empty strong { color: #b7cad8; font-size: var(--ui-fs-md); }
        .market-empty-icon { color: #ffd400; font-size: 23px; }
        .faction-market-form.hidden { display: none; }
        .faction-hq-swipe-hint {
            flex-shrink: 0;
            font-size: 6px;
            line-height: 1.35;
            text-align: center;
            color: #6a8498;
            letter-spacing: 0.08em;
            margin-top: 2px;
        }
        #win-map-minigames {
            max-height: min(72vh, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 40px));
            padding: 9px 11px 12px;
            background:
                linear-gradient(145deg, rgba(7, 20, 43, .99), rgba(3, 7, 24, .99) 58%, rgba(24, 7, 42, .98)),
                radial-gradient(circle at 15% 0, rgba(0, 232, 255, .2), transparent 42%);
        }
        #win-map-minigames::before {
            background: linear-gradient(90deg, transparent, #00e8ff 22%, #ff2bd6 78%, transparent);
            box-shadow: 0 0 12px rgba(0, 232, 255, .7);
        }
        #win-map-minigames::after {
            inset: 7px;
            border-color: rgba(0, 232, 255, .22);
            background:
                linear-gradient(90deg, rgba(0, 232, 255, .65) 0 24px, transparent 24px calc(100% - 24px), rgba(255, 43, 214, .65) calc(100% - 24px)),
                linear-gradient(180deg, rgba(0, 232, 255, .65) 0 24px, transparent 24px calc(100% - 24px), rgba(255, 43, 214, .65) calc(100% - 24px));
            background-size: 100% 1px, 1px 100%;
            background-position: top, left;
            background-repeat: no-repeat;
        }
        #win-map-minigames .wtitle {
            margin-top: 0;
            margin-bottom: 3px;
            color: #f0fbff;
            letter-spacing: .16em;
            text-shadow: 0 0 10px rgba(0, 232, 255, .85), 0 0 22px rgba(255, 43, 214, .3);
        }
        #win-map-minigames .faction-hq-titlebar {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 25px;
            margin-bottom: 5px;
        }
        #win-map-minigames .faction-hq-titlebar .wtitle {
            width: 100%;
            text-align: center;
        }
        #win-map-minigames #btn-minigames-help {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
        }
        #win-map-minigames .map-header-note {
            margin: 0 0 9px;
            color: #83b7d1;
            font-size: 6px;
            letter-spacing: .16em;
            text-transform: uppercase;
        }
        #win-map-minigames .map-header-note::before,
        #win-map-minigames .map-header-note::after {
            width: 36px;
            background: linear-gradient(90deg, transparent, rgba(0, 232, 255, .85));
        }
        #win-map-minigames .map-back-btn {
            margin-bottom: 5px;
        }
        #win-map-invasion .checkin-header {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 6px;
            min-height: 24px;
        }
        #win-map-invasion .checkin-title {
            margin: 0;
            width: 100%;
            text-align: center;
            padding: 0 28px;
            box-sizing: border-box;
        }
        #win-map-invasion #btn-invasion-help {
            position: absolute;
            right: 0;
            top: -4px;
            margin: 0;
            z-index: 2;
        }
        .map-back-btn {
            display: block;
            width: 100%;
            margin-bottom: 8px;
            font-size: 6px !important;
            padding: 6px 8px !important;
            flex-shrink: 0;
        }
        .map-header-note {
            font-size: var(--ui-fs-sm);
            color: var(--text-dim);
            text-align: center;
            margin: -4px 0 8px;
            line-height: 1.45;
            font-weight: 500;
        }
        .star-map-viewport {
            position: relative;
            width: 100%;
            aspect-ratio: 1;
            max-height: min(72vh, 460px);
            margin: 7px auto 0;
            isolation: isolate;
            background:
                radial-gradient(ellipse 85% 70% at 50% 48%, rgba(18, 40, 95, .72) 0%, transparent 68%),
                radial-gradient(circle at 50% 50%, #071326 0%, #010208 100%);
            border: 1px solid rgba(0, 232, 255, .62);
            border-radius: 8px;
            overflow: hidden;
            box-shadow:
                inset 0 0 50px rgba(0, 90, 180, .28),
                inset 0 0 12px rgba(255, 43, 214, .12),
                0 0 18px rgba(0, 232, 255, .18);
        }
        .star-map-viewport::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            background:
                linear-gradient(rgba(0, 232, 255, .07) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 232, 255, .07) 1px, transparent 1px);
            background-size: 10% 10%;
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 90%);
            pointer-events: none;
        }
        .star-map-viewport::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: -18%;
            height: 18%;
            z-index: 2;
            background: linear-gradient(180deg, transparent, rgba(0, 232, 255, .18), transparent);
            border-bottom: 1px solid rgba(0, 232, 255, .65);
            box-shadow: 0 0 14px rgba(0, 232, 255, .55);
            animation: map-scan 5.5s linear infinite;
            pointer-events: none;
        }
        @keyframes map-scan {
            from { transform: translateY(0); }
            to { transform: translateY(655%); }
        }
        .star-map-viewport > * { z-index: 3; }
        .star-map-viewport .bg-nebula,
        .star-map-viewport .bg-particles { z-index: 0; }
        .star-map-viewport .star-map-twinkle { z-index: 1; }
        .star-map-viewport .star-map-orbit { z-index: 2; }
        .star-map-viewport .star-map-core,
        .star-map-viewport .map-system-node { z-index: 4; }
        .star-map-twinkle {
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(1px 1px at 8% 12%, rgba(255,255,255,0.85), transparent),
                radial-gradient(1px 1px at 18% 28%, rgba(180,220,255,0.7), transparent),
                radial-gradient(1.5px 1.5px at 32% 8%, rgba(255,255,255,0.75), transparent),
                radial-gradient(1px 1px at 42% 22%, rgba(200,180,255,0.55), transparent),
                radial-gradient(1px 1px at 55% 6%, rgba(255,255,255,0.65), transparent),
                radial-gradient(1.5px 1.5px at 68% 18%, rgba(255,255,255,0.8), transparent),
                radial-gradient(1px 1px at 78% 10%, rgba(255,220,180,0.55), transparent),
                radial-gradient(1px 1px at 88% 25%, rgba(160,220,255,0.6), transparent),
                radial-gradient(1px 1px at 95% 40%, rgba(255,255,255,0.5), transparent),
                radial-gradient(1.5px 1.5px at 12% 48%, rgba(255,255,255,0.7), transparent),
                radial-gradient(1px 1px at 25% 55%, rgba(180,200,255,0.45), transparent),
                radial-gradient(1px 1px at 38% 42%, rgba(255,255,255,0.55), transparent),
                radial-gradient(1px 1px at 62% 38%, rgba(200,255,255,0.5), transparent),
                radial-gradient(1.5px 1.5px at 72% 52%, rgba(255,255,255,0.65), transparent),
                radial-gradient(1px 1px at 85% 58%, rgba(255,200,220,0.45), transparent),
                radial-gradient(1px 1px at 6% 68%, rgba(160,220,255,0.55), transparent),
                radial-gradient(1px 1px at 22% 78%, rgba(255,255,255,0.6), transparent),
                radial-gradient(1.5px 1.5px at 48% 72%, rgba(255,255,255,0.7), transparent),
                radial-gradient(1px 1px at 58% 88%, rgba(180,220,255,0.5), transparent),
                radial-gradient(1px 1px at 75% 78%, rgba(255,255,255,0.55), transparent),
                radial-gradient(1px 1px at 90% 85%, rgba(200,180,255,0.45), transparent),
                radial-gradient(1.5px 1.5px at 15% 92%, rgba(255,255,255,0.5), transparent),
                radial-gradient(1px 1px at 35% 95%, rgba(255,220,180,0.4), transparent),
                radial-gradient(1px 1px at 92% 70%, rgba(255,255,255,0.6), transparent);
            opacity: 0.9;
            animation: map-twinkle 5s ease-in-out infinite alternate;
            pointer-events: none;
        }
        .star-map-twinkle::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(1px 1px at 50% 30%, rgba(255,255,255,0.35), transparent),
                radial-gradient(1px 1px at 30% 60%, rgba(180,220,255,0.3), transparent),
                radial-gradient(1px 1px at 70% 65%, rgba(255,255,255,0.28), transparent),
                radial-gradient(1px 1px at 45% 50%, rgba(200,255,255,0.22), transparent),
                radial-gradient(1px 1px at 80% 45%, rgba(255,255,255,0.25), transparent);
            animation: map-twinkle 7s ease-in-out infinite alternate-reverse;
            opacity: 0.7;
        }
        @keyframes map-twinkle { from { opacity: 0.55; } to { opacity: 1; } }
        .bg-nebula {
            position: absolute;
            inset: -12%;
            z-index: 0;
            pointer-events: none;
            opacity: 1;
            background:
                radial-gradient(ellipse 42% 34% at 8% 18%, rgba(126, 77, 255, .17) 0%, rgba(126, 77, 255, 0) 72%),
                radial-gradient(ellipse 45% 36% at 92% 78%, rgba(255, 74, 190, .15) 0%, rgba(255, 74, 190, 0) 70%),
                radial-gradient(ellipse 36% 30% at 86% 12%, rgba(39, 111, 255, .14) 0%, rgba(39, 111, 255, 0) 72%);
        }
        .bg-particles {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            opacity: .85;
        }
        .bg-particles span {
            position: absolute;
            width: 2px;
            height: 2px;
            border-radius: 50%;
            background: #b8dfff;
            box-shadow: 0 0 7px rgba(139, 222, 255, .85);
            animation: map-particle-drift 48s linear infinite;
        }
        .bg-particles span:nth-child(1) { left: 18%; top: 28%; animation-delay: -12s; }
        .bg-particles span:nth-child(2) { left: 72%; top: 58%; width: 3px; height: 3px; animation-duration: 56s; animation-delay: -29s; background: #ffc2f2; }
        .bg-particles span:nth-child(3) { left: 84%; top: 18%; animation-duration: 42s; animation-delay: -7s; background: #b7c9ff; }
        @keyframes map-particle-drift {
            from { transform: translate(0, 0); }
            to { transform: translate(52px, -42px); }
        }
        @keyframes rotate-slow {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        .star-map-orbit {
            position: absolute;
            left: 50%;
            top: 50%;
            border: 1.5px solid rgba(0, 232, 255, 0.26);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            will-change: transform;
            animation: rotate-slow 90s linear infinite;
        }
        .star-map-orbit.o1 {
            width: 58%;
            height: 58%;
            border-color: rgba(0, 232, 255, 0.3);
            animation-duration: 70s;
            animation-direction: reverse;
        }
        .star-map-orbit.o2 {
            width: 78%;
            height: 78%;
            border-color: rgba(0, 200, 255, 0.34);
        }
        .star-map-orbit.o3 {
            width: 96%;
            height: 96%;
            border-color: rgba(255, 80, 200, 0.28);
        }
        /* Центральная планета на карте */
        .star-map-core {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 78px;
            height: 78px;
            border-radius: 50%;
            background: transparent;
            box-shadow: none;
            z-index: 4;
            pointer-events: auto;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .star-map-core:active {
            transform: translate(-50%, -50%) scale(0.96);
        }
        .star-map-core::after { display: none; content: none; }
        .star-map-planet-glow {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 118%;
            height: 118%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(80, 190, 255, 0.3) 0%, transparent 68%);
            pointer-events: none;
            z-index: 1;
            animation: starMapPlanetPulse 3.2s ease-in-out infinite;
        }
        @keyframes starMapPlanetPulse {
            0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
            50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.06); }
        }
        .star-map-planet-wrap {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            overflow: hidden;
            clip-path: circle(50% at 50% 50%);
            -webkit-clip-path: circle(50% at 50% 50%);
            z-index: 2;
            box-shadow:
                0 0 16px rgba(64, 180, 255, 0.45),
                0 0 32px rgba(0, 140, 255, 0.22),
                inset 0 0 10px rgba(0, 0, 0, 0.35);
        }
        .star-map-planet-canvas {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            transform-origin: 50% 50%;
            will-change: transform;
            image-rendering: auto;
        }
        .map-system-node {
            position: absolute;
            transform: translate(-50%, -50%);
            z-index: 5;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 0;
            border: none;
            background: none;
            cursor: pointer;
            font-family: inherit;
            -webkit-tap-highlight-color: transparent;
        }
        .map-system-node:active { transform: translate(-50%, -50%) scale(0.92); }
        .map-system-node.map-node-large { transform: translate(-50%, -50%) scale(1.18); }
        .map-system-node.map-node-large:active { transform: translate(-50%, -50%) scale(1.0856); }
        .map-system-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            border: 2px solid rgba(0, 232, 255, .62);
            background: radial-gradient(circle at 30% 30%, rgba(40, 76, 124, .98), rgba(8, 14, 32, .98));
            box-shadow: 0 0 10px rgba(0, 232, 255, .32), inset 0 0 10px rgba(0, 232, 255, .12);
            transition: transform .15s, box-shadow .15s, border-color .15s;
        }
        .map-system-icon::before {
            content: '';
            position: absolute;
            width: 48px;
            height: 48px;
            border: 1px dashed currentColor;
            border-radius: 50%;
            opacity: .22;
            animation: map-node-pulse 2.8s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes map-node-pulse {
            50% { transform: scale(1.13); opacity: .5; }
        }
        .map-system-node:hover .map-system-icon,
        .map-system-node:focus-visible .map-system-icon {
            border-color: rgba(255, 212, 0, .9);
            box-shadow: 0 0 14px rgba(255, 212, 0, .48), 0 0 26px rgba(255, 43, 214, .2);
            transform: scale(1.08);
        }
        .map-system-image {
            width: 27px;
            height: 27px;
            display: block;
            object-fit: cover;
            border-radius: 50%;
        }
        .map-system-glyph {
            display: block;
            font-size: 22px;
            line-height: 1;
            filter: drop-shadow(0 0 5px currentColor);
        }
        .map-system-glyph-collision {
            color: #64e8ff;
            text-shadow: 2px 0 #ff43d6, 0 0 7px #00e8ff;
            transform: rotate(8deg);
        }
        .map-rift-glyph {
            display: block;
            width: 23px;
            height: 23px;
            border-radius: 50%;
            background: radial-gradient(ellipse at 50% 50%, #050505 0 24%, #62418c 28%, #0c1024 49%, #03040a 67%, transparent 70%);
            box-shadow: 0 0 5px #b26cff, 0 0 10px rgba(40, 0, 80, .9);
            transform: rotate(-18deg) skewX(-14deg);
        }
        .map-rift-glyph::after {
            content: '';
            display: block;
            width: 27px;
            height: 8px;
            border: 1px solid rgba(205, 145, 255, .8);
            border-left-color: transparent;
            border-right-color: transparent;
            border-radius: 50%;
            transform: translate(-3px, 7px) rotate(-20deg);
        }

        .map-system-name {
            font-size: 5px;
            font-weight: 700;
            color: #c8dce8;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            text-shadow: 0 0 6px rgba(0, 232, 255, 0.4);
            max-width: 56px;
            text-align: center;
            line-height: 1.2;
        }
        .map-system-sub {
            font-size: 4px;
            color: #b8bfcc;
        }
        .map-system-badge {
            font-size: 3px;
            padding: 1px 3px;
            border-radius: 2px;
            background: rgba(255, 120, 60, 0.25);
            color: #ffaa66;
            border: 1px solid rgba(255, 120, 60, 0.35);
        }
        .map-system-node.node-pvp .map-system-icon { border-color: #ff6b4a; }
        .map-system-node.node-pve .map-system-icon { border-color: #4ac9ff; }
        .map-system-node.node-social .map-system-icon { border-color: #b14aff; }
        .map-system-node.node-arcade .map-system-icon { border-color: #d4e857; }
        .collision-attempts {
            display: inline-block;
            background: rgba(0, 232, 255, .12);
            color: #9fefff;
            border-color: rgba(0, 232, 255, .35);
            white-space: nowrap;
        }
        .map-sys-boss .collision-attempts {
            background: rgba(255, 83, 150, .12);
            color: #ffb3d0;
            border-color: rgba(255, 83, 150, .38);
        }
        .collision-attempts.is-empty {
            background: rgba(148, 160, 174, .12);
            color: #7e8994;
            border-color: rgba(148, 160, 174, .28);
        }
        .map-sys-boss .collision-attempts.is-empty {
            background: rgba(148, 160, 174, .12);
            color: #7e8994;
            border-color: rgba(148, 160, 174, .28);
        }
        .progress-bar {
            width: 44px;
            height: 4px;
            margin-top: 1px;
            overflow: hidden;
            border-radius: 2px;
            background: rgba(255, 255, 255, .14);
        }
        .progress-fill {
            width: var(--progress, 0%);
            height: 100%;
            border-radius: inherit;
            background: #4ac9ff;
        }
        .progress-label { border: 0; padding: 0; background: none; color: #b8e9ff; }
        .badge-count {
            position: absolute;
            top: -6px;
            right: -6px;
            min-width: 14px;
            height: 14px;
            padding: 0 3px;
            border-radius: 50%;
            background: #ff4444;
            color: #fff;
            font-size: 8px;
            line-height: 14px;
            text-align: center;
        }
        .map-system-node .map-system-glyph svg,
        .map-faction-glyph svg {
            display: block;
            width: 24px;
            height: 24px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .map-faction-glyph svg { color: #b8dfff; }
        .map-system-glyph-minigames { color: #d4e857; }
        .map-system-glyph-minigames svg {
            width: 26px;
            height: 26px;
            transform: scale(1.08, 1.3);
        }
        .map-sys-invasion .map-system-icon { box-shadow: 0 0 12px rgba(74, 201, 255, .3); }
        .map-sys-collision .map-system-icon { box-shadow: 0 0 12px rgba(255, 107, 74, .3); background: radial-gradient(circle at 35% 30%, rgba(0, 110, 150, 0.95), rgba(8, 10, 34, 0.98)); }
        .map-sys-boss .map-system-icon {
            box-shadow: 0 0 12px rgba(74, 201, 255, .28);
        }
        .map-sys-boss .map-system-image {
            width: 32px;
            height: 32px;
            object-fit: contain;
            border-radius: 0;
            mix-blend-mode: normal;
        }
        .map-sys-minigames .map-system-icon { box-shadow: 0 0 12px rgba(212, 232, 87, .28); }
        .map-sys-faction .map-system-icon {
            box-shadow: 0 0 14px rgba(177, 74, 255, .35);
            background: radial-gradient(circle at 50% 40%, rgba(0, 232, 255, 0.12), rgba(4, 8, 24, 0.92));
        }
        .map-faction-glyph {
            display: block;
            width: 24px;
            height: 24px;
            margin: 0 auto;
            position: relative;
            color: #b8dfff;
            filter: drop-shadow(0 0 5px rgba(0, 232, 255, 0.75));
        }
        .map-faction-glyph svg {
            width: 24px;
            height: 24px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.6;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        #win-map-faction .checkin-header {
            flex-shrink: 0;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 4px;
        }
        #win-map-faction .checkin-header.faction-hq-titlebar {
            position: relative;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
        }
        #win-map-faction .checkin-title {
            margin: 0;
            text-align: center;
            width: 100%;
            letter-spacing: 0.08em;
        }
        #win-map-faction #btn-faction-help {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            margin-top: 0;
        }
        .faction-hq-header { text-align: center; padding: 0 0 4px; font-size: 6px; color: #8898a8; line-height: 1.55; }
        .faction-hq-identity {
            display: flex; flex-direction: column; align-items: center; gap: 4px;
            margin-bottom: 6px;
        }
        .faction-hq-faction { font-size: 9px; color: #ffd400; font-weight: 700; letter-spacing: 0.04em; }
        .faction-hq-rank-row {
            display: flex; align-items: center; justify-content: center; gap: 6px;
        }
        .faction-hq-rank { font-size: 9px; color: #e8f4ff; font-weight: 600; letter-spacing: 0.03em; }
        .faction-hq-meta { font-size: 6px; color: #6a8498; line-height: 1.4; }
        .faction-penalty-note { color: #ff8866; margin-top: 4px; font-size: 6px; line-height: 1.4; }
        .faction-progress {
            display: flex; flex-direction: column; gap: 8px;
            margin: 0 0 8px; padding: 7px 8px;
            border: 1px solid rgba(0, 232, 255, 0.18);
            border-radius: 6px;
            background: rgba(0, 12, 28, 0.5);
        }
        .faction-prog-row { display: flex; flex-direction: column; gap: 3px; }
        .faction-prog-label {
            display: flex; justify-content: space-between; font-size: 6px; line-height: 1.35; color: #8898a8;
        }
        .faction-prog-label strong { color: #c8dce8; font-weight: 600; }
        .faction-prog-bar {
            height: 6px; border-radius: 3px; overflow: hidden;
            background: rgba(255,255,255,0.08);
        }
        .faction-prog-fill {
            height: 100%; border-radius: 3px;
            background: linear-gradient(90deg, #00e8ff, #4488ff);
            transition: width 0.25s ease;
        }
        .faction-prog-fill.rep {
            background: linear-gradient(90deg, #ffb020, #ffd400);
        }
        .faction-prog-fill.lvl {
            background: linear-gradient(90deg, #40e878, #00c8a0);
        }
        .faction-promote-btn {
            width: 100%;
            margin-top: 2px;
            padding: 8px 10px !important;
            font-size: var(--ui-fs-sm) !important;
            font-weight: 600 !important;
            letter-spacing: 0.06em;
            border: 1px solid rgba(255, 212, 0, 0.55) !important;
            background: linear-gradient(180deg, rgba(255, 200, 40, 0.35), rgba(120, 70, 0, 0.45)) !important;
            color: #fff4c8 !important;
            text-shadow: 0 0 8px rgba(255, 212, 0, 0.35);
        }
        .faction-promote-btn:disabled {
            opacity: 1;
            filter: none;
            border-color: rgba(120, 140, 170, 0.45) !important;
            background: rgba(40, 48, 64, 0.72) !important;
            color: #b0c0d4 !important;
            text-shadow: none;
            cursor: not-allowed;
        }
        .faction-promote-btn:not(:disabled):active { transform: scale(0.98); }
        .faction-promote-hint { font-size: var(--ui-fs-xs); color: var(--text-dim); text-align: center; margin-top: 4px; font-weight: 500; }
        .faction-tasks-title, .faction-switch-title { font-size: var(--ui-fs-sm); color: #00e8ff; margin: 6px 0 4px; letter-spacing: 0.04em; font-weight: 600; }
        .faction-tasks { display: flex; flex-direction: column; gap: 6px; }
        .faction-task-row {
            padding: 7px 8px;
            border: 1px solid rgba(0, 232, 255, 0.2);
            border-radius: 4px;
            background: rgba(0, 16, 32, 0.45);
        }
        .faction-task-row.done { opacity: 0.65; }
        .faction-task-head { display: flex; justify-content: space-between; gap: 4px; font-size: var(--ui-fs-sm); line-height: 1.35; margin-bottom: 4px; color: var(--text); font-weight: 500; }
        .faction-task-label { color: #e8f2fa; font-weight: 500; }
        .faction-task-reward { color: var(--text-dim); font-size: var(--ui-fs-sm); line-height: 1.35; text-align: right; font-weight: 500; }
        .faction-task-bar { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
        .faction-task-fill { height: 100%; background: linear-gradient(90deg, #00e8ff, #4488ff); }
        .faction-task-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: var(--ui-fs-sm); line-height: 1.35; color: var(--text-dim); }
        .mastery-tasks-dock {
            position: sticky;
            top: 0;
            z-index: 5;
            margin: 0 -2px 8px;
            padding: 5px 4px 6px;
            border: 1px solid rgba(255, 212, 0, 0.42);
            border-radius: 8px;
            background: linear-gradient(180deg, rgba(10, 20, 42, 0.99), rgba(5, 10, 28, 0.97));
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42), 0 0 16px rgba(255, 212, 0, 0.1);
        }
        .mastery-tasks-title {
            display: flex;
            align-items: center;
            gap: 5px;
            margin: 0 2px 6px;
            color: #ffe27a;
            text-shadow: 0 0 8px rgba(255, 212, 0, 0.3);
        }
        .mastery-tasks-title > span { color: #ffd400; font-size: 1.2em; }
        .mastery-tasks-title small {
            margin-left: auto;
            color: #8ea0b8;
            font-size: var(--ui-fs-xs);
            font-weight: 500;
            letter-spacing: 0.02em;
        }
        .mastery-tasks { gap: 4px; }
        .mastery-task-row {
            position: relative;
            overflow: hidden;
            padding: 7px 8px;
            border-color: rgba(0, 232, 255, 0.38);
            background: linear-gradient(110deg, rgba(0, 48, 74, 0.68), rgba(8, 18, 43, 0.88));
            box-shadow: inset 3px 0 0 rgba(0, 232, 255, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.06);
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .mastery-task-row.ready {
            border-color: rgba(255, 212, 0, 0.78);
            background: linear-gradient(110deg, rgba(74, 54, 0, 0.76), rgba(25, 22, 18, 0.92));
            box-shadow: inset 3px 0 0 #ffd400, 0 0 10px rgba(255, 212, 0, 0.14);
        }
        .mastery-task-row.done {
            opacity: 0.72;
            border-color: rgba(64, 232, 120, 0.34);
            background: linear-gradient(110deg, rgba(10, 54, 48, 0.5), rgba(8, 20, 35, 0.84));
            box-shadow: inset 3px 0 0 rgba(64, 232, 120, 0.7);
        }
        .mastery-task-row .faction-task-label { font-weight: 600; }
        .mastery-task-row .faction-task-reward { color: #bdeeff; font-weight: 600; }
        .mastery-task-row.ready .faction-task-reward { color: #ffe27a; }
        .mastery-task-row .faction-task-bar { height: 4px; }
        .mastery-task-row .faction-task-fill { background: linear-gradient(90deg, #00e8ff, #40e878); box-shadow: 0 0 7px rgba(0, 232, 255, 0.5); }
        .mastery-task-row.ready .faction-task-fill { background: linear-gradient(90deg, #ff9d24, #ffd400); box-shadow: 0 0 7px rgba(255, 212, 0, 0.55); }
        .mastery-task-row.done .faction-task-fill { background: #40e878; box-shadow: 0 0 6px rgba(64, 232, 120, 0.35); }
        .mastery-task-row .faction-task-foot > span { font-weight: 600; }
        .mastery-task-row.ready .faction-task-foot > span { color: #ffe27a; }
        .mastery-task-row.done .faction-task-foot > span { color: #7cffb0; }
        .mastery-task-row .faction-task-claim { min-width: 74px; padding: 4px 7px !important; font-weight: 700 !important; }
        .mastery-intro { font-size: var(--ui-fs-sm); color: var(--text-dim); margin-bottom: 10px; line-height: 1.55; }
        .upgrade-row .btn-sm { font-size: var(--ui-fs-sm) !important; padding: 4px 6px !important; min-width: 0; max-width: 105px; letter-spacing: -0.02em; }
        .mastery-intro { font-size: var(--ui-fs-sm); color: var(--text-dim); margin-bottom: 10px; line-height: 1.55; }
        .mastery-intro p { margin: 0; }
        .mastery-branches { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
        .mastery-branch {
            position: relative;
            border: 1px solid rgba(0, 232, 255, 0.3);
            border-radius: 8px;
            background: linear-gradient(145deg, rgba(0, 27, 48, 0.72), rgba(7, 12, 32, 0.72));
            padding: 10px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 10px rgba(0, 232, 255, 0.05);
        }
        .mastery-branch:nth-child(3n + 2) { border-color: rgba(255, 176, 32, 0.34); }
        .mastery-branch:nth-child(3n) { border-color: rgba(255, 43, 214, 0.3); }
        .mastery-branch-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
        .mastery-branch-icon {
            font-size: 18px;
            line-height: 1;
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .faction-task-reward svg {
            width: 14px;
            height: 14px;
            display: inline-block;
            vertical-align: -2px;
            margin-right: 2px;
        }
        .mastery-branch-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
        .mastery-branch-title strong { color: #e8f2fa; font-size: var(--ui-fs-md); line-height: 1.3; font-weight: 600; }
        .mastery-branch-title small { color: var(--text-dim); font-size: var(--ui-fs-sm); line-height: 1.35; }
        .mastery-branch-lvl { font-size: var(--ui-fs-sm); line-height: 1.3; color: #ffd400; font-weight: 600; white-space: nowrap; }
        .mastery-branch-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 5px; }
        .mastery-branch-fill {
            height: 100%;
            background: linear-gradient(90deg, #00e8ff, #4488ff);
            box-shadow: 0 0 7px rgba(0, 232, 255, 0.45);
            transition: width 0.25s ease;
        }
        .mastery-branch:nth-child(3n + 2) .mastery-branch-fill { background: linear-gradient(90deg, #ffb020, #ffd400); box-shadow: 0 0 7px rgba(255, 212, 0, 0.45); }
        .mastery-branch:nth-child(3n) .mastery-branch-fill { background: linear-gradient(90deg, #ff2bd6, #9b6dff); box-shadow: 0 0 7px rgba(255, 43, 214, 0.4); }
        .mastery-fill-combat { background: linear-gradient(90deg, #ff5533, #ff9944); }
        .mastery-fill-mining { background: linear-gradient(90deg, #ffb020, #ffd400); }
        .mastery-fill-tactics { background: linear-gradient(90deg, #00e8ff, #4488ff); }
        .mastery-branch-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: var(--ui-fs-sm); line-height: 1.45; color: var(--text-dim); }
        .mastery-branch-foot strong { color: #7cffb0; font-weight: 600; }
        .mastery-branch-foot strong small { color: var(--text-dim); font-weight: 400; }
        .faction-switch-grid { display: flex; flex-direction: column; gap: 4px; }
        .faction-switch-btn {
            display: flex; flex-direction: column; gap: 2px;
            padding: 6px 8px; text-align: left; width: 100%;
            border: 1px solid rgba(255, 212, 0, 0.25);
            border-radius: 4px; background: rgba(32, 24, 0, 0.35);
            font-family: inherit; color: inherit; cursor: pointer;
        }
        .faction-switch-btn:disabled { opacity: 0.45; cursor: not-allowed; }
        .faction-switch-btn:active:not(:disabled) { transform: scale(0.98); }
        .faction-switch-sub { font-size: var(--ui-fs-xs); color: var(--text-dim); }
        .faction-frozen-tag { font-size: var(--ui-fs-xs); color: #88aacc; }
        .faction-empty { font-size: var(--ui-fs-sm); color: var(--text-dim); text-align: center; padding: 8px; }

        .faction-boost-now {
            margin: 0 0 8px;
            padding: 8px 8px 7px;
            border: 1px solid rgba(255, 212, 0, 0.4);
            border-radius: 6px;
            background: linear-gradient(180deg, rgba(255, 200, 40, 0.14), rgba(20, 14, 0, 0.55));
            text-align: center;
        }
        .faction-boost-now-label {
            font-size: 6px; line-height: 1.35;
            color: #8898a8;
            letter-spacing: 0.1em;
            margin-bottom: 3px;
        }
        .faction-boost-now-value {
            font-size: 9px;
            color: #ffd400;
            font-weight: 700;
            letter-spacing: 0.03em;
            line-height: 1.35;
        }
        .faction-boost-now-rank {
            margin-top: 3px;
            font-size: 7px; line-height: 1.35;
            color: #c8dce8;
        }
        .faction-boost-section-title {
            font-size: 8px; line-height: 1.35;
            color: #00e8ff;
            margin: 8px 0 4px;
            letter-spacing: 0.06em;
        }
        .faction-boost-section-title:first-child { margin-top: 0; }
        .faction-boost-note {
            font-size: 6px;
            color: #6a8498;
            line-height: 1.5;
            margin: 0 0 7px;
        }
        .faction-boost-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 6px;
            line-height: 1.45;
            table-layout: fixed;
        }
        .faction-boost-table th,
        .faction-boost-table td {
            padding: 7px 5px;
            text-align: left;
            border-bottom: 1px solid rgba(0, 232, 255, 0.12);
            vertical-align: middle;
        }
        .faction-boost-table th {
            color: #6a8498;
            font-weight: 600;
            letter-spacing: 0.04em;
            font-size: 6px;
            line-height: 1.35;
        }
        .faction-boost-table td { color: #c8dce8; }
        .faction-boost-table .col-rank { width: 22%; }
        .faction-boost-table .col-req { width: 22%; }
        .faction-boost-table .col-bonus { width: 40%; line-height: 1.5; }
        .faction-boost-table .col-st { width: 16%; text-align: center; }
        .faction-boost-row.locked td { color: #5a6a7a; opacity: 0.72; }
        .faction-boost-row.unlocked td { color: #a8c8b8; }
        .faction-boost-row.current {
            background: rgba(255, 212, 0, 0.1);
        }
        .faction-boost-row.current td {
            color: #ffe9a0;
            font-weight: 600;
        }
        .faction-boost-row .boost-st {
            font-size: 6px; line-height: 1.3;
            letter-spacing: 0.04em;
        }
        .faction-boost-row.current .boost-st { color: #ffd400; }
        .faction-boost-row.unlocked .boost-st { color: #40e878; }
        .faction-boost-row.locked .boost-st { color: #5a6a7a; }
        .faction-boost-hangar {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            margin-top: 2px;
        }
        .faction-boost-hangar-cell {
            padding: 7px 7px;
            border: 1px solid rgba(0, 232, 255, 0.18);
            border-radius: 4px;
            background: rgba(0, 12, 28, 0.45);
            font-size: 6px;
            line-height: 1.4;
            color: #c8dce8;
        }
        .faction-boost-hangar-cell strong {
            color: #ffd400;
            font-weight: 700;
        }
        .faction-boost-hangar-cell.slow strong { color: #ff8866; }
        .faction-boost-hangar-cell .hb-label {
            display: block;
            color: #6a8498;
            font-size: 5px;
            line-height: 1.3;
            margin-bottom: 3px;
        }
        .faction-capstone {
            margin: 0 0 8px;
            padding: 7px 8px;
            border: 1px solid rgba(0, 232, 255, 0.22);
            border-radius: 6px;
            background: rgba(0, 12, 28, 0.5);
        }
        .faction-capstone.active {
            border-color: rgba(255, 212, 0, 0.5);
            background: linear-gradient(180deg, rgba(255, 200, 40, 0.12), rgba(12, 18, 32, 0.65));
        }
        .faction-capstone.locked { opacity: 0.72; }
        .faction-capstone-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 4px;
        }
        .faction-capstone-label {
            font-size: 5px; line-height: 1.3;
            color: #6a8498;
            letter-spacing: 0.1em;
        }
        .faction-capstone-name {
            font-size: 9px; line-height: 1.3;
            color: #ffd400;
            font-weight: 700;
            margin-top: 1px;
        }
        .faction-capstone.active .faction-capstone-name { color: #ffe9a0; }
        .faction-capstone-blurb { font-size: 6px; line-height: 1.4; color: #8898a8; margin-top: 3px; }
        .faction-capstone-st {
            flex-shrink: 0;
            font-size: 5px; line-height: 1.3;
            letter-spacing: 0.06em;
            padding: 2px 5px;
            border-radius: 3px;
        }
        .faction-capstone-st.on {
            color: #102010;
            background: #ffd400;
            font-weight: 700;
        }
        .faction-capstone-st.off {
            color: #6a8498;
            border: 1px solid rgba(120, 140, 160, 0.35);
        }
        .faction-capstone-list {
            margin: 5px 0 2px;
            padding-left: 14px;
            font-size: 6px;
            color: #c8dce8;
            line-height: 1.5;
        }
        .faction-capstone.locked .faction-capstone-list { color: #6a8498; }

        .avatar-wrap {
            position: relative;
            width: 26px;
            height: 26px;
            flex-shrink: 0;
        }
        .avatar-wrap .avatar {
            width: 100%;
            height: 100%;
        }
        .rank-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            vertical-align: -2px;
        }
        .rank-badge svg { width: 100%; height: 100%; display: block; }
        .rank-badge-avatar {
            position: absolute;
            right: -3px;
            bottom: -3px;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: #0a1020;
            border: 1px solid rgba(0, 232, 255, 0.45);
            z-index: 2;
        }
        .rank-badge-avatar.hidden { display: none; }
        .rank-badge-inline { width: 12px; height: 12px; margin-right: 3px; }
        .rank-badge-hq { width: 26px; height: 26px; }
        .pvp-lb-name { display: inline-flex; align-items: center; gap: 2px; }
        .map-activity-placeholder {
            text-align: center;
            padding: 16px 8px;
            font-size: 6px;
            color: #8898a8;
            line-height: 1.55;
        }
        .map-activity-placeholder .map-ph-icon { font-size: 28px; display: block; margin-bottom: 8px; }
        .minigame-list {
            display: flex;
            flex-direction: column;
            gap: 9px;
            margin-top: 7px;
            padding: 9px 7px;
            border: 1px solid rgba(0, 232, 255, .16);
            border-radius: 5px;
            background:
                repeating-linear-gradient(0deg, rgba(0, 232, 255, .025) 0 1px, transparent 1px 5px),
                rgba(1, 9, 24, .58);
            box-shadow: inset 0 0 24px rgba(0, 120, 255, .07);
        }
        .minigame-row {
            position: relative;
            display: flex;
            align-items: center;
            gap: 9px;
            min-height: 69px;
            padding: 9px 8px;
            overflow: hidden;
            border: 1px solid rgba(0, 232, 255, .35);
            border-radius: 3px;
            background: linear-gradient(105deg, rgba(5, 34, 57, .82), rgba(3, 12, 31, .88) 62%, rgba(22, 8, 42, .72));
            cursor: pointer;
            text-align: left;
            width: 100%;
            font-family: inherit;
            color: inherit;
            transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
        }
        .minigame-row::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(127, 232, 255, .035) 8px 9px);
            pointer-events: none;
        }
        .minigame-row::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 3px;
            background: var(--neon-cyan);
            box-shadow: 0 0 10px var(--neon-cyan);
        }
        .minigame-row:hover,
        .minigame-row:focus-visible {
            border-color: rgba(0, 232, 255, .82);
            box-shadow: 0 0 16px rgba(0, 232, 255, .18), inset 0 0 18px rgba(0, 140, 255, .08);
            outline: none;
        }
        .minigame-row:active { transform: scale(.985); background: rgba(0, 44, 72, .82); }
        .minigame-row-galaga { border-color: rgba(255, 43, 214, .38); }
        .minigame-row-galaga::after { background: var(--neon-magenta); box-shadow: 0 0 10px var(--neon-magenta); }
        .minigame-row-icon-frame {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 43px;
            height: 43px;
            flex: 0 0 43px;
            border: 1px solid rgba(0, 232, 255, .55);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0, 232, 255, .2), rgba(0, 25, 47, .8) 68%);
            box-shadow: 0 0 11px rgba(0, 232, 255, .2), inset 0 0 10px rgba(0, 232, 255, .14);
        }
        .minigame-row-galaga .minigame-row-icon-frame {
            border-color: rgba(255, 43, 214, .62);
            background: radial-gradient(circle, rgba(255, 43, 214, .2), rgba(28, 7, 48, .8) 68%);
            box-shadow: 0 0 11px rgba(255, 43, 214, .2), inset 0 0 10px rgba(255, 43, 214, .14);
        }
        .minigame-row-icon { font-size: 22px; line-height: 1; text-align: center; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55)); }
        .minigame-row-index {
            position: absolute;
            right: -3px;
            bottom: -3px;
            min-width: 16px;
            padding: 2px 3px;
            border: 1px solid rgba(0, 232, 255, .45);
            border-radius: 2px;
            background: #061226;
            color: #75eaff;
            font-family: 'Press Start 2P', monospace;
            font-size: 5px;
            text-align: center;
        }
        .minigame-row-body { position: relative; z-index: 1; flex: 1; min-width: 0; }
        .minigame-row-topline { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
        .minigame-row-name { font-size: 9px; color: #e8f4ff; font-weight: 600; letter-spacing: .08em; }
        .minigame-row-status { color: #6ee8aa; font-size: 5px; letter-spacing: .12em; white-space: nowrap; }
        .minigame-row-galaga .minigame-row-status { color: #ff8bea; }
        .minigame-row-desc { display: block; font-size: var(--ui-fs-xs); color: #a5c4d5; margin-top: 4px; font-weight: 500; }
        .minigame-row-meta { display: block; margin-top: 5px; color: #50758c; font-family: 'Press Start 2P', monospace; font-size: 4px; letter-spacing: .06em; }
        .minigame-row-caret { position: relative; z-index: 1; flex: 0 0 auto; color: var(--neon-cyan); font-size: 18px; line-height: 1; text-shadow: 0 0 8px currentColor; }
        .minigame-row-galaga .minigame-row-caret { color: var(--neon-magenta); }
        /* Змейка: поле сжимается под экран, ИГРАТЬ всегда внизу и в зоне видимости */
        #win-map-snake {
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding-bottom: 8px;
        }
        #win-map-snake .wtitle {
            margin-bottom: 2px;
            flex-shrink: 0;
        }
        #win-map-snake .map-back-btn {
            flex-shrink: 0;
            margin-bottom: 2px;
        }
        .snake-hud {
            display: flex;
            justify-content: space-between;
            gap: 4px 8px;
            font-size: 5px;
            color: #8898a8;
            margin-bottom: 4px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }
        .snake-hud strong { color: #c8dce8; }
        .snake-canvas-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 4px;
            outline: none;
            flex: 1 1 auto;
            min-height: 0;
        }
        .snake-canvas-wrap:focus-visible {
            box-shadow: 0 0 0 2px rgba(0, 232, 255, 0.45);
            border-radius: 4px;
        }
        #snake-canvas {
            display: block;
            /* Ширина подгоняется под остаток высоты экрана — чтобы влезли d-pad и ИГРАТЬ */
            width: min(280px, 72vw, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 326px));
            max-width: 100%;
            height: auto;
            aspect-ratio: 1;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            border: 1px solid rgba(0, 232, 255, 0.35);
            border-radius: 4px;
            background: #040810;
            touch-action: none;
        }
        .snake-dpad {
            display: grid;
            grid-template-columns: repeat(3, 40px);
            grid-template-rows: repeat(3, 32px);
            gap: 3px;
            justify-content: center;
            margin: 0 auto 4px;
            flex-shrink: 0;
        }

        #snake-dpad {
            grid-template-columns: repeat(3, clamp(40px, 13vw, 52px));
            grid-template-rows: repeat(3, clamp(36px, 6vh, 44px));
            gap: clamp(2px, .8vw, 4px);
        }
        #snake-dpad button.snake-dpad-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            min-width: 0;
            min-height: 0;
            font-size: clamp(22px, 6vw, 26px);
            font-weight: 700;
            line-height: 1;
            touch-action: manipulation;
        }

        .snake-dpad-btn {
            border: 1px solid rgba(0, 232, 255, 0.35);
            background: rgba(0, 24, 48, 0.8);
            color: #00e8ff;
            border-radius: 4px;
            font-size: 13px;
            cursor: pointer;
            padding: 0;
            font-family: inherit;
        }
        .snake-dpad-btn:active { background: rgba(0, 80, 120, 0.6); }
        .snake-dpad-btn.hidden-cell { visibility: hidden; pointer-events: none; }
        .snake-status {
            font-size: 5px;
            text-align: center;
            color: #8898a8;
            min-height: 10px;
            max-height: 2.6em;
            overflow: hidden;
            margin-bottom: 4px;
            flex-shrink: 0;
            line-height: 1.25;
        }
        .snake-actions {
            text-align: center;
            flex-shrink: 0;
            margin-top: auto;
            position: sticky;
            bottom: 0;
            z-index: 3;
            padding: 6px 0 2px;
            background: linear-gradient(0deg, rgba(4, 12, 24, 0.98) 55%, rgba(4, 12, 24, 0));
        }
        .snake-actions .btn {
            width: 100%;
            max-width: 220px;
            min-height: 38px;
            font-size: 8px;
        }
        #win-map-shipline {
            max-width: 430px;
            max-height: min(92vh, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 10px));
            padding-top: 6px;
            padding-bottom: 6px;
            background: linear-gradient(145deg, rgba(58, 27, 12, .98), rgba(24, 10, 7, .99) 58%, rgba(43, 13, 24, .98));
            border-color: rgba(255, 174, 88, .72);
            box-shadow: 0 0 28px rgba(255, 126, 52, .22), 0 0 70px rgba(255, 43, 122, .12), inset 0 0 48px rgba(255, 113, 31, .07);
        }
        #win-map-shipline::before { background: linear-gradient(90deg, transparent, #ffb347, #ff6b35, transparent); }
        #win-map-shipline .wtitle { color: #ffd27a; text-shadow: 0 0 12px rgba(255, 166, 74, .65); }
        #win-map-shipline .snake-dpad-btn { border-color: rgba(255, 174, 88, .48); background: rgba(76, 31, 12, .8); color: #ffb347; }
        #win-map-shipline .snake-dpad-btn:active { background: rgba(150, 60, 20, .72); }
        .shipline-titlebar { position: relative; display: flex; align-items: center; justify-content: center; min-height: 24px; }
        .shipline-titlebar .hangar-help-btn { position: absolute; right: 0; top: 0; }
        .shipline-board-wrap { display: flex; justify-content: center; margin: 4px auto 8px; }
        .shipline-board {
            position: relative;
            display: block;
            width: min(184px, 47vw, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 220px));
            aspect-ratio: 3 / 7;
            overflow: hidden;
            border: 2px solid rgba(0, 232, 255, .6);
            background:
                radial-gradient(circle at 12% 8%, rgba(255, 255, 255, .9) 0 1px, transparent 1.8px),
                radial-gradient(circle at 42% 18%, rgba(116, 214, 255, .8) 0 1px, transparent 1.8px),
                radial-gradient(circle at 78% 12%, rgba(255, 255, 255, .8) 0 1px, transparent 1.8px),
                radial-gradient(circle at 24% 38%, rgba(116, 214, 255, .7) 0 1px, transparent 1.8px),
                radial-gradient(circle at 63% 48%, rgba(255, 255, 255, .75) 0 1px, transparent 1.8px),
                radial-gradient(circle at 88% 62%, rgba(116, 214, 255, .8) 0 1px, transparent 1.8px),
                radial-gradient(circle at 15% 78%, rgba(255, 255, 255, .75) 0 1px, transparent 1.8px),
                radial-gradient(circle at 52% 91%, rgba(116, 214, 255, .8) 0 1px, transparent 1.8px),
                #030814;
            background-size: 100% 100%;
            image-rendering: pixelated;
        }
        .shipline-board::after { content: ''; position: absolute; inset: 0 33.333% 0; border-left: 1px solid rgba(0, 232, 255, .2); border-right: 1px solid rgba(0, 232, 255, .2); pointer-events: none; }

        .shipline-player, .shipline-obstacle { position: absolute; left: calc((var(--lane) + .5) * 33.333%); top: calc((var(--row) + .5) * 10%); transform: translate(-50%, -50%); z-index: 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
        .shipline-player canvas { width: 30px !important; height: 30px !important; image-rendering: pixelated; }
        .shipline-obstacle { z-index: 3; }
        .shipline-obstacle canvas, .shipline-obstacle .mine-sprite-img { width: 28px !important; height: 28px !important; object-fit: contain; image-rendering: pixelated; }
        .shipline-obstacle.shipline-mine { filter: drop-shadow(0 0 5px rgba(255, 103, 42, .95)) drop-shadow(0 0 10px rgba(255, 42, 92, .55)); }
        .shipline-obstacle.shipline-mine .mine-sprite-img { transform: scale(1.08); }
        .shipline-controls { display: none; }
        .shipline-controls .snake-dpad-btn { min-height: 30px; font-size: 14px; line-height: 1; padding: 2px 8px; }
        .shipline-board { touch-action: pan-y; }
        #win-map-galaga {
            max-width: 480px;
            max-height: min(92vh, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 10px));
            padding-top: 6px;
            padding-bottom: 6px;
        }
        #galaga-canvas {
            display: block;
            width: min(380px, 92vw, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 190px));
            max-width: 100%;
            height: auto;
            aspect-ratio: 360 / 400;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            border: 1px solid rgba(0, 232, 255, 0.35);
            background: #030814;
            border-radius: 4px;
        }
        #galaga-controls {
            grid-template-columns: repeat(2, 64px);
            grid-template-rows: 44px;
            gap: 16px;
            margin: 10px auto 4px;
        }
        #galaga-controls .snake-dpad-btn {
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .minigame-row-voidbreaker { border-color: rgba(123, 102, 255, .46); }
        .minigame-row-voidbreaker::after { background: #a28bff; box-shadow: 0 0 10px #a28bff; }
        .minigame-row-voidbreaker .minigame-row-icon-frame {
            border-color: rgba(162, 139, 255, .7);
            background: radial-gradient(circle, rgba(134, 100, 255, .26), rgba(17, 12, 48, .88) 68%);
            box-shadow: 0 0 11px rgba(134, 100, 255, .24), inset 0 0 10px rgba(134, 100, 255, .18);
        }
        .minigame-row-voidbreaker .minigame-row-caret { color: #b4a4ff; }
        #win-map-voidbreaker {
            width: min(560px, calc(100vw - 16px));
            max-width: 560px;
            max-height: min(96dvh, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 8px));
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 6px clamp(6px, 2vw, 12px) 8px;
            background:
                radial-gradient(circle at 50% 36%, rgba(95, 65, 210, .18), transparent 50%),
                linear-gradient(150deg, rgba(8, 13, 37, .99), rgba(3, 7, 22, .99) 60%, rgba(24, 9, 44, .98));
            border-color: rgba(151, 124, 255, .62);
            box-shadow: 0 0 28px rgba(111, 82, 255, .2), inset 0 0 38px rgba(97, 69, 220, .08);
        }
        #win-map-voidbreaker::before { background: linear-gradient(90deg, transparent, #7d68ff, #42dfff, transparent); }
        #win-map-voidbreaker .wtitle {
            color: #d7d0ff;
            text-shadow: 0 0 10px rgba(130, 104, 255, .72), 0 0 20px rgba(0, 232, 255, .22);
        }
        #win-map-voidbreaker .map-back-btn { min-height: 34px; margin-bottom: 4px; padding: 6px 10px; }
        #win-map-voidbreaker .voidbreaker-titlebar .wtitle { margin-bottom: 4px; }
        .voidbreaker-titlebar { display: flex; justify-content: center; flex: 0 0 auto; }
        .voidbreaker-hud {
            justify-content: center;
            gap: 3px 12px;
            margin: 0 0 4px;
            color: #a5b6d4;
            font: 600 11px/1.25 'Rajdhani', sans-serif;
        }
        .voidbreaker-hud strong { color: #f3f4ff; }
        .voidbreaker-active-effects { flex-basis: 100%; text-align: center; color: #c7bcff; }
        .voidbreaker-field-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 0;
            margin: 0 auto 4px;
            flex: 0 0 auto;
        }
        #voidbreaker-canvas {
            display: block;
            height: min(620px, 70dvh, max(180px, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 242px)));
            width: auto;
            max-width: 100%;
            aspect-ratio: 480 / 620;
            border: 1px solid rgba(137, 117, 255, .6);
            border-radius: 4px;
            background: #030713;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
        }
        #voidbreaker-canvas:focus-visible { outline: 2px solid rgba(100, 224, 255, .75); outline-offset: 2px; }
        .voidbreaker-drop-legend {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 4px;
            flex: 0 0 auto;
            margin: 0 auto 4px;
            width: 100%;
        }
        .voidbreaker-drop-legend > span {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            min-width: 0;
            min-height: 32px;
            padding: 3px 4px;
            border: 1px solid rgba(142, 125, 230, .28);
            border-radius: 4px;
            background: rgba(27, 24, 63, .7);
            color: #c6c8e6;
            font: 600 clamp(12px, 3.2vw, 13px)/1.1 'Rajdhani', sans-serif;
            white-space: nowrap;
        }
        .voidbreaker-drop-legend > span > b {
            flex: 0 0 15px;
            color: #9deeff;
            font: 700 12px/1 Orbitron, sans-serif;
            text-align: center;
        }
        .voidbreaker-status {
            max-height: none;
            min-height: 1.25em;
            margin: 0 0 3px;
            color: #aebbd5;
            font: 600 clamp(12px, 3.2vw, 13px)/1.25 'Rajdhani', sans-serif;
            overflow: visible;
            overflow-wrap: anywhere;
            text-wrap: balance;
        }
        .voidbreaker-actions {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 7px;
            padding: 3px 0 2px;
            margin-top: 0;
            background: none;
            position: static;
            bottom: auto;
            z-index: auto;
        }
        .voidbreaker-actions .btn {
            width: auto;
            min-width: 112px;
            min-height: 38px;
            padding: 7px 12px;
            font: 700 11px/1.1 'Orbitron', sans-serif;
            touch-action: manipulation;
        }
        @media (max-height: 700px) {
            #voidbreaker-canvas {
                height: min(620px, 68dvh, max(160px, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 260px)));
            }
            #win-map-voidbreaker { padding-top: 4px; padding-bottom: 5px; }
            .voidbreaker-hud { margin-bottom: 2px; }
            .voidbreaker-actions .btn { min-height: 34px; }
        }
        @media (max-width: 360px) {
            .voidbreaker-drop-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .voidbreaker-drop-legend > span { min-height: 28px; }
            .voidbreaker-hud {
                display: grid;
                grid-template-columns: repeat(3, max-content);
                justify-content: center;
                gap: 2px 8px;
            }
        }
        @media (max-height: 700px) {
            #snake-canvas {
                width: min(220px, 64vw, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 306px));
            }
            #snake-dpad {
                grid-template-columns: repeat(3, clamp(38px, 12vw, 48px));
                grid-template-rows: repeat(3, clamp(34px, 5.7vh, 40px));
                gap: 2px;
            }
            #snake-dpad button.snake-dpad-btn { font-size: clamp(20px, 5.8vw, 23px); }
            .snake-actions .btn { min-height: 34px; }
        }
        @media (max-height: 600px) {
            #snake-canvas {
                width: min(168px, 52vw, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 262px));
            }

            #snake-dpad {
                grid-template-columns: repeat(3, clamp(36px, 11vw, 42px));
                grid-template-rows: repeat(3, 32px);
                gap: 2px;
            }
            #snake-dpad button.snake-dpad-btn { font-size: 20px; }

            #win-map-snake .snake-hud { margin-bottom: 6px; }
            .snake-status { margin-bottom: 2px; max-height: 1.4em; }
        }

        /* ── Столкновение ── */
        .collision-screen {
            position: fixed;
            inset: var(--game-inset-top) var(--game-inset-right) calc(var(--game-inset-bottom) + var(--panel-bottom-h)) var(--game-inset-left);
            z-index: 3;
            display: none;
            overflow: hidden;
            background: #040810;
        }
        .collision-screen.active { display: block; }
        .collision-hud {
            position: absolute;
            top: 0; left: 0; right: 0;
            z-index: 5;
            padding: 8px 10px;
            background: linear-gradient(180deg, rgba(4,8,16,.94), rgba(4,8,16,.55));
            color: #b8d8ff;
            font-size: 11px;
            line-height: 1.35;
            pointer-events: none;
        }
        .collision-hud-line { min-height: 15px; }
        .collision-hud-mob3-hint { color: #82d8ff; font-size: 10px; }
        .collision-hud-stats { display: flex; gap: 10px; flex-wrap: wrap; color: #86a5ba; }
        .collision-hud-stats strong { color: #8eeaff; }
        .collision-pilot-panels {
            position: absolute;
            inset: 0;
            z-index: 7;
            pointer-events: none;
        }
        .collision-pilot-panels[hidden] { display: none; }
        .collision-pilot-card {
            --pilot-accent: #37dff0;
            position: absolute;
            top: calc(var(--panel-top-h) + 132px);
            display: flex;
            width: min(136px, calc((100% - 26px) / 2));
            min-height: 38px;
            flex-direction: column;
            justify-content: center;
            gap: 2px;
            padding: 5px 8px 6px;
            border: 1px solid color-mix(in srgb, var(--pilot-accent) 58%, #253c4d);
            background:
                linear-gradient(90deg, color-mix(in srgb, var(--pilot-accent) 15%, transparent), transparent 42%),
                linear-gradient(180deg, rgba(15, 31, 44, .97), rgba(4, 11, 19, .96));
            box-shadow: inset 0 1px rgba(232, 245, 239, .1), 0 3px 10px rgba(0, 0, 0, .48);
            color: #f1eee2;
            clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
        }
        .collision-pilot-card.self {
            left: 8px;
            border-left: 2px solid var(--pilot-accent);
            text-align: left;
        }
        .collision-pilot-card.teammate {
            --pilot-accent: #dc75ff;
            right: 8px;
            align-items: flex-end;
            border-right: 2px solid var(--pilot-accent);
            text-align: right;
            clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
        }
        .collision-pilot-role {
            color: var(--pilot-accent);
            font-family: var(--ui-font, 'Rajdhani', sans-serif);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .12em;
            line-height: 1;
            text-transform: uppercase;
        }
        .collision-pilot-card strong {
            display: block;
            max-width: 100%;
            overflow: hidden;
            color: #f1eee2;
            font-family: var(--ui-font, 'Rajdhani', sans-serif);
            font-size: clamp(11px, 3.2vw, 14px);
            font-weight: 700;
            letter-spacing: .035em;
            line-height: 1.1;
            text-overflow: ellipsis;
            text-shadow: 0 1px 2px #000;
            white-space: nowrap;
        }
        .collision-arena { position: absolute; inset: var(--panel-top-h) 0 0; overflow: hidden; background: #060c18; touch-action: none; }
        .collision-bg-canvas {
            position: absolute;
            inset: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        .collision-world {
            position: absolute;
            left: 0; top: 0;
            width: 1120px; height: 1560px;
            transform-origin: 0 0;
            background: transparent;
        }
        .collision-entity,
        .collision-projectile {
            position: absolute;
            left: 0;
            top: 0;
            pointer-events: none;
            line-height: 0;
            transform-origin: center;
            contain: layout style;
        }
        .collision-ship { z-index: 4; width: 103.571429px; height: 103.571429px; text-align: center; }
        .collision-ship-body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
        .collision-ship-body .ship-sprite-img { width: 103.571429px !important; height: 103.571429px !important; position: relative; z-index: 1; }
        .collision-engine-flame {
            position: absolute;
            left: 50%;
            top: 84%;
            width: 8px;
            height: 16px;
            transform: translate(-50%, 0);
            image-rendering: pixelated;
            pointer-events: none;
            z-index: 0;
        }
        .collision-engine-flame.vip-purple-flame { filter: drop-shadow(0 0 5px rgba(184, 92, 255, .95)) drop-shadow(0 0 10px rgba(126, 38, 210, .65)); }
        .collision-engine-flame.vip-red-flame { filter: drop-shadow(0 0 5px rgba(255, 65, 65, .95)) drop-shadow(0 0 10px rgba(180, 20, 20, .7)); }
        .collision-engine-flame.vip-gold-flame { filter: drop-shadow(0 0 5px rgba(255, 212, 0, .95)) drop-shadow(0 0 10px rgba(255, 170, 0, .65)); }
        .collision-ship.dead { opacity: .22; filter: grayscale(1); }
        .collision-enemy { z-index: 3; width: 75px; height: 75px; display: flex; align-items: center; justify-content: center; }
        .collision-mob-sprite { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
        .collision-mob-sprite canvas,
        .collision-mob-sprite .mine-sprite-img { display: block; height: 44px; width: auto; transform: scale(1.7); transform-origin: center; image-rendering: pixelated; }
        .collision-mob-sprite.mob3-mob canvas,
        .collision-mob-sprite.mob3-mob .mine-sprite-img { transform: scale(1.9); }
        .collision-mob-sprite.detonator-mob canvas,
        .collision-mob-sprite.detonator-mob .mine-sprite-img { filter: drop-shadow(0 0 8px rgba(255, 80, 40, .75)); }
        .collision-mob-sprite.plasma-mob canvas,
        .collision-mob-sprite.plasma-mob .mine-sprite-img { filter: drop-shadow(0 0 5px rgba(64, 255, 210, .55)); }
        .collision-mob-sprite.laser-mob canvas,
        .collision-mob-sprite.laser-mob .mine-sprite-img { filter: drop-shadow(0 0 7px rgba(64, 255, 210, .9)); }
        .collision-mob-sprite.mob3-mob canvas,
        .collision-mob-sprite.mob3-mob .mine-sprite-img,
        .invasion-entity.enemy.mob3-mob canvas,
        .invasion-entity.enemy.mob3-mob .mine-sprite-img { filter: drop-shadow(0 0 8px rgba(80, 170, 255, .95)) drop-shadow(0 0 18px rgba(180, 80, 255, .75)); }
        .collision-mob { color: #ff7958; font-size: 36px; text-shadow: 0 0 12px #ff4020; }
        .collision-bomber { color: #ffb040; font-size: 38px; text-shadow: 0 0 14px #ff7020; }
        .collision-boss { width: 476px; height: 476px; filter: drop-shadow(0 0 16px rgba(200,80,255,.8)); }
        .collision-boss::after {
            content: attr(title);
            position: absolute;
            left: 50%;
            bottom: -18px;
            transform: translateX(-50%);
            color: #f0c8ff;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .04em;
            white-space: nowrap;
            text-shadow: 0 1px 3px #000, 0 0 8px rgba(190,80,255,.8);
        }
        .collision-boss-sprite { width: 476px; height: 476px; object-fit: contain; }
        .collision-boss-fallback { color: #e080ff; font-size: 180px; line-height: 1; text-shadow: 0 0 16px #d040ff; }
        .ship-sprite-fallback { display: inline-flex; align-items: center; justify-content: center; width: 103.571429px; height: 103.571429px; color: #8eeaff; font-size: 54px; text-shadow: 0 0 12px #00b8ff; }
        .collision-projectile {
            z-index: 6;
            width: 22px;
            height: 6px;
            border-radius: 3px;
            pointer-events: none;
            contain: strict;
        }
        .collision-projectile.player {
            background: linear-gradient(90deg, #ffffff 0%, #00e8ff 35%, #0077ff 80%, rgba(0, 119, 255, 0) 100%);
            box-shadow: 0 0 10px #00e8ff, 0 0 20px rgba(0, 232, 255, 0.8), 0 0 30px rgba(0, 150, 255, 0.5);
            border-radius: 3px;
            filter: drop-shadow(0 0 4px #00e8ff);
        }
        .collision-projectile.plasma {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: radial-gradient(circle, #ffffff 0%, #ff8833 35%, #ff2200 80%, rgba(255, 34, 0, 0) 100%);
            box-shadow: 0 0 12px #ff5500, 0 0 24px rgba(255, 85, 0, 0.85), 0 0 36px rgba(255, 0, 0, 0.5);
            filter: drop-shadow(0 0 5px #ff4400);
        }
        .collision-projectile.mob3 {
            width: 17px;
            height: 17px;
            border-radius: 50%;
            background: radial-gradient(circle, #ffffff 0%, #a6f3ff 18%, #6c66ff 52%, #a329ff 78%, rgba(163, 41, 255, 0) 100%);
            box-shadow: 0 0 12px #61d9ff, 0 0 25px rgba(131, 93, 255, .95), 0 0 40px rgba(205, 54, 255, .7);
            filter: drop-shadow(0 0 6px #a26cff);
            animation: collisionMob3Plasma 0.38s ease-in-out infinite alternate;
        }
        @keyframes collisionMob3Plasma {
            from { opacity: .84; }
            to { opacity: 1; }
        }
        .collision-projectile.laser {
            width: 28px;
            height: 6px;
            border-radius: 3px;
            background: linear-gradient(90deg, #ffffff 0%, #66ffdb 30%, #00ffaa 80%, rgba(0, 255, 170, 0) 100%);
            box-shadow: 0 0 12px #00ffaa, 0 0 24px rgba(0, 255, 170, 0.85), 0 0 36px rgba(0, 200, 120, 0.5);
            filter: drop-shadow(0 0 5px #00ffaa);
        }
        .collision-projectile.boss-pulse-host {
            width: 29px;
            height: 29px;
            background: transparent;
            box-shadow: none;
            contain: layout style;
        }
        .collision-boss-pulse-core {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle, #ffb0ff 0%, #c040e0 45%, #601080 100%);
            box-shadow: 0 0 14px #e060ff, 0 0 24px rgba(200, 80, 255, 0.7);
            animation: collisionBossPulse 0.45s ease-in-out infinite alternate;
        }
        @keyframes collisionLaserDash {
            from { background-position: 0 0; }
            to { background-position: 10px 0; }
        }
        @keyframes collisionLaserPulse {
            from { opacity: 0.8; }
            to { opacity: 1; }
        }
        @keyframes collisionBossPulse {
            from { transform: scale(0.82); opacity: 0.72; }
            to { transform: scale(1.18); opacity: 1; }
        }
        .collision-steer-pad {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 46%;
            z-index: 7;
            touch-action: none;
        }
        .collision-steer-pad.active {
            background: linear-gradient(180deg, transparent 0%, rgba(64, 200, 255, 0.045) 100%);
        }
        .collision-titlebar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 24px; }
        .collision-titlebar .wtitle { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; }
        .collision-titlebar .hangar-help-btn { margin-left: auto; }
        .collision-leaderboard-btn { margin-left: 0 !important; }
        .invasion-titlebar { margin-bottom: 2px; }
        .invasion-titlebar .wtitle { pointer-events: none; }
        .invasion-titlebar .invasion-leaderboard-btn {
            min-width: 44px;
            min-height: 44px;
            position: relative;
            z-index: 41;
            touch-action: manipulation;
        }
        .invasion-leaderboard-btn { color: #ffd778 !important; text-shadow: 0 0 9px rgba(255, 192, 86, .55); }
        .invasion-leaderboard-dropdown .collision-leaderboard { max-height: 250px; }
        .invasion-leaderboard-divider { height: 1px; margin: 7px 3px; background: linear-gradient(90deg, transparent, rgba(255, 215, 0, .72), transparent); }
        .invasion-leaderboard-own { border: 1px solid rgba(255, 215, 0, .4); background: rgba(255, 215, 0, .13); }
        .invasion-leaderboard-own b { color: #ffe28a; }
        .collision-leaderboard-dropdown {
            position: absolute;
            top: 42px;
            left: 6px;
            z-index: 40;
            width: min(94%, 280px);
            max-height: min(60vh, 320px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 8px;
            background: rgba(4, 12, 28, 0.98);
            border: 1px solid rgba(255, 215, 0, 0.45);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
        }
        .collision-leaderboard-dropdown.hidden { display: none; }
        .collision-leaderboard-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 6px 8px;
            color: var(--gold, #ffd700);
            font-size: 12px;
            font-weight: bold;
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        }
        .collision-leaderboard-heading .collision-refresh { margin: 0; }
        .collision-lobby { text-align: center; padding: 8px 0; }
        .collision-info, .collision-rewards { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; padding: 6px 7px; border: 1px solid rgba(0, 232, 255, 0.18); border-radius: 4px; background: rgba(0, 16, 32, 0.38); color: var(--text-dim); font-size: 11px; line-height: 1.35; }
        .collision-info strong, .collision-rewards strong { color: #8eeaff; font-size: 9px; letter-spacing: .08em; }
        .collision-rewards { border-color: rgba(255, 212, 0, 0.24); color: #d5b76b; }
        .collision-rewards strong { color: #ffe080; }
        .collision-status { margin: 12px 0; min-height: 40px; color: var(--text-dim); line-height: 1.5; }
        .collision-actions { display: flex; gap: 6px; flex-wrap: wrap; }
        .collision-actions #btn-collision-cancel { flex-basis: 100%; }
        .collision-actions .btn { flex: 1; }
        .collision-room-heading { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px; color: #8eeaff; font-size: 10px; letter-spacing: .08em; }
        .collision-refresh { border: 1px solid rgba(0,232,255,.25); border-radius: 4px; background: transparent; color: #8eeaff; cursor: pointer; font-size: 16px; line-height: 20px; }
        .collision-room-list { display: flex; flex-direction: column; gap: 5px; max-height: 180px; overflow-y: auto; text-align: left; }
        .collision-room-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px; border: 1px solid rgba(0,232,255,.16); border-radius: 4px; background: rgba(0,16,32,.35); color: var(--text-dim); font-size: 10px; line-height: 1.35; }
        .collision-room-row strong { color: #d8f5ff; }
        .collision-room-row span { color: #7f9aaa; }
        .collision-room-row .btn { width: auto !important; min-height: 30px !important; padding: 4px 7px; font-size: 9px; white-space: nowrap; }
        .collision-empty { padding: 14px 5px; color: var(--text-dim); font-size: 11px; }
        .collision-leaderboard {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-top: 6px;
            max-height: 250px;
            overflow-y: auto;
            padding: 0;
            text-align: left;
        }
        .collision-leaderboard-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 8px;
            background: rgba(255, 255, 255, 0.04);
            border-radius: 4px;
            font-size: 11px;
            color: #d8f5ff;
        }
        .collision-leaderboard-row.my-rank {
            background: rgba(255, 215, 0, 0.15);
            border: 1px solid rgba(255, 215, 0, 0.4);
        }
        .collision-leaderboard-row b {
            font-weight: bold;
            width: 28px;
            color: var(--gold, #ffd700);
        }
        .collision-leaderboard-row strong {
            flex: 1;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 0 6px;
            color: #e0e0e0;
            font-weight: normal;
        }
        .collision-leaderboard-row span {
            font-weight: bold;
            color: #00ffff;
            white-space: nowrap;
        }
        .collision-leaderboard-own {
            margin-top: 6px;
            padding: 6px 8px;
            background: rgba(255, 215, 0, 0.15);
            border: 1px solid rgba(255, 215, 0, 0.4);
            border-radius: 4px;
            color: #ffd700;
            font-size: 11px;
            font-weight: bold;
            text-align: center;
        }

         #win-map-collision .btn:not(.map-back-btn) { width: 100%; min-height: 38px; }

        /* ── Вторжение ── */
        .invasion-screen {
            position: fixed;
            top: var(--game-inset-top);
            bottom: calc(var(--game-inset-bottom) + var(--panel-bottom-h));
            left: var(--game-inset-left);
            right: var(--game-inset-right);
            z-index: 2;
            display: none;
            overflow: hidden;
            background: #040810;
        }
        .invasion-screen.active { display: block; }
        .invasion-hud-top {
            position: absolute;
            top: var(--panel-top-h); left: 0; right: 0;
            z-index: 5;
            padding: 6px 10px;
            background: linear-gradient(180deg, rgba(4,8,16,0.92), rgba(4,8,16,0.55));
            font-size: 11px;
            line-height: 1.45;
            color: #9ab0c0;
            pointer-events: none;
        }
        .invasion-hud-top strong { color: #e8f4ff; }
        .invasion-hud-fps {
            float: right;
            font-size: 9px;
            color: #6a9080;
            letter-spacing: 0.04em;
        }
        .invasion-hud-fps.low { color: #ff8866; }
        .invasion-hud-fps.mid { color: #d8b030; }
        .invasion-hud-keys {
            font-size: 9px;
            color: #5a7088;
            margin-top: 3px;
            letter-spacing: 0.02em;
        }
        .invasion-hud-bars { display: flex; gap: 8px; margin-top: 4px; }
        .invasion-bar-wrap { flex: 1; }
        .invasion-bar-label { font-size: 9px; color: #6a8090; margin-bottom: 2px; }
        .invasion-bar-track {
            height: 6px;
            background: rgba(255,255,255,0.08);
            border-radius: 3px;
            overflow: hidden;
        }
        .invasion-bar-fill { height: 100%; border-radius: 3px; transition: none; }
        .invasion-bar-fill.hp { background: #e04050; }
        .invasion-bar-fill.shield { background: #40b8e8; }
        .invasion-viewport {
            position: absolute;
            top: var(--panel-top-h);
            left: 0; right: 0; bottom: 0;
            overflow: hidden;
            touch-action: none;
        }
        .invasion-arena {
            position: absolute;
            inset: 0;
            overflow: hidden;
            background: #060c18;
        }
        .invasion-bg-canvas {
            position: absolute;
            inset: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        .invasion-player {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 4;
            pointer-events: none;
            line-height: 0;
            will-change: transform;
            contain: layout style;
        }
        .invasion-player .ship-sprite-img,
        .invasion-player canvas {
            display: block;
            width: 43.5px !important;
            height: 43.5px !important;
            object-fit: contain;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            pointer-events: none;
        }
        .invasion-world {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            will-change: transform;
            transform-origin: 0 0;
            box-sizing: border-box;
            background: transparent;
        }
        .invasion-stars { display: none; }
        .invasion-player.flying { opacity: 1; }
        .invasion-ship-body {
            position: relative;
            z-index: 1;
            width: 43.5px;
            height: 43.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 0;
            flex: 0 0 43.5px;
        }
        canvas.invasion-engine-flame.ship-flame {
            position: absolute;
            left: 50%;
            top: 88%;
            width: 8px !important;
            height: 16px !important;
            min-width: 0 !important;
            min-height: 0 !important;
            max-width: none !important;
            max-height: none !important;
            margin: 0 !important;
            padding: 0 !important;
            transform: translate(-50%, 0);
            image-rendering: pixelated !important;
            image-rendering: crisp-edges !important;
            pointer-events: none;
            z-index: 0;
            opacity: 0;
        }
        .invasion-player.flying .invasion-engine-flame.active { opacity: 1; }
        .invasion-player.vip-trail .invasion-engine-flame.active {
            filter: drop-shadow(0 0 5px rgba(184, 92, 255, 0.95)) drop-shadow(0 0 10px rgba(126, 38, 210, 0.65));
        }
        .invasion-player.vip-red-trail .invasion-engine-flame.active,
        .invasion-engine-flame.vip-red-flame {
            filter: drop-shadow(0 0 5px rgba(255, 65, 65, 0.95)) drop-shadow(0 0 10px rgba(180, 20, 20, 0.7));
        }
        .invasion-player.vip-purple-trail .invasion-engine-flame.active,
        .invasion-engine-flame.vip-purple-flame {
            filter: drop-shadow(0 0 5px rgba(184, 92, 255, 0.95)) drop-shadow(0 0 10px rgba(126, 38, 210, 0.65));
        }
        .invasion-player.vip-gold-trail .invasion-engine-flame.active {
            filter: drop-shadow(0 0 5px rgba(255, 212, 0, 0.95)) drop-shadow(0 0 10px rgba(255, 170, 0, 0.65));
        }
        .invasion-entity {
            position: absolute;
            left: 0;
            top: 0;
            pointer-events: none;
            line-height: 0;
            transform-origin: center center;
            will-change: transform;
            contain: layout style;
        }
        .invasion-entity.enemy:not(.boss) {
            width: 88px;
            height: 88px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .invasion-mob-sprite {
            flex: 0 0 auto;
            line-height: 0;
        }
        .invasion-entity.enemy canvas,
        .invasion-entity.enemy img { display: block; }
        .invasion-entity.enemy:not(.boss) canvas,
        .invasion-entity.enemy:not(.boss) .mine-sprite-img {
            transform: scale(1.7);
            transform-origin: center center;
        }
        .invasion-entity.enemy.mob3-mob canvas,
        .invasion-entity.enemy.mob3-mob .mine-sprite-img { transform: scale(1.9); }
        .invasion-entity.boss { filter: drop-shadow(0 0 14px rgba(180, 80, 255, 0.75)); z-index: 4; }
        .invasion-boss-sprite {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            animation: invasionBossPulse 1.2s ease-in-out infinite;
        }
        .invasion-boss-sprite::after {
            content: attr(title);
            position: absolute;
            left: 50%;
            bottom: -18px;
            transform: translateX(-50%);
            color: #f0c8ff;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .04em;
            white-space: nowrap;
            text-shadow: 0 1px 4px #000, 0 0 10px rgba(190, 80, 255, .9);
        }
        .invasion-boss-sprite-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center center;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            mix-blend-mode: screen;
            pointer-events: none;
            user-select: none;
        }
        .invasion-entity.boss.laser-warn .invasion-boss-sprite-img {
            filter: contrast(1.2) saturate(1.4) brightness(1.15) drop-shadow(0 0 10px #ff60ff);
        }
        .invasion-entity.boss.boss-dying .invasion-boss-sprite {
            animation: none;
        }
        .invasion-projectile.enemy.boss-pulse-host {
            width: 29px;
            height: 29px;
            background: transparent;
            box-shadow: none;
            contain: layout style;
            z-index: 5;
        }
        .invasion-projectile.enemy .boss-pulse-core {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle, #ffb0ff 0%, #c040e0 45%, #601080 100%);
            box-shadow: 0 0 14px #e060ff, 0 0 24px rgba(200, 80, 255, 0.7);
            animation: invasionBossPulseShot 0.45s ease-in-out infinite alternate;
        }
        @keyframes invasionBossPulseShot {
            from { transform: scale(0.82); opacity: 0.72; }
            to { transform: scale(1.18); opacity: 1; }
        }
        .invasion-boss-super-attack {
            position: absolute;
            left: 0;
            top: 0;
            height: 1px;
            pointer-events: none;
            z-index: 6;
            transform-origin: 0 50%;
        }
        .boss-super-void-tether {
            position: absolute;
            left: 0;
            top: 50%;
            height: 9px;
            transform: translateY(-50%);
            background: repeating-linear-gradient(90deg, #fff 0 4px, #b66cff 4px 18px, transparent 18px 28px);
            box-shadow: 0 0 12px #b66cff, 0 0 34px rgba(120, 60, 255, .85);
            animation: bossVoidTether .72s ease-out forwards;
        }
        .boss-super-void-tether::after {
            content: '';
            position: absolute;
            inset: -9px 0;
            background: linear-gradient(90deg, transparent, #b66cffaa, transparent);
            filter: blur(7px);
        }
        .boss-super-rocket,
        .boss-super-plasma-orb,
        .boss-super-slash { position: absolute; left: 0; top: 50%; display: block; }
        .boss-super-rocket {
            width: 32px; height: 11px; margin-top: calc(var(--rocket-lane) - 5px);
            border-radius: 60% 20% 20% 60%;
            background: linear-gradient(90deg, #ff5b18, #ffe9aa 58%, #fff);
            box-shadow: 0 0 9px #ff6220, 0 0 24px #ff2b0c;
            animation: bossRocketFly 1.05s var(--rocket-delay) ease-in forwards;
        }
        .boss-super-rocket::after { content: ''; position: absolute; right: 100%; top: 2px; width: 36px; height: 7px; background: linear-gradient(90deg, transparent, #ff4b1f); filter: blur(3px); }
        .boss-super-plasma-orb {
            width: 24px; height: 24px; margin-top: calc(var(--plasma-lane) - 12px);
            border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, #8ffff1 25%, #00a9ff 58%, transparent 72%);
            box-shadow: 0 0 14px #41f5dc, 0 0 34px #00aaff;
            animation: bossPlasmaFly 1.18s var(--plasma-delay) cubic-bezier(.2,.8,.2,1) forwards;
        }
        .boss-super-plasma-orb::after { content: ''; position: absolute; inset: 6px; border: 2px solid #d8ffff; border-radius: 50%; animation: bossPlasmaSpin .3s linear infinite; }
        .boss-super-slash {
            width: 90px; height: 18px; margin-top: calc(var(--slash-lane) - 9px);
            border-radius: 50%; background: linear-gradient(90deg, transparent, #ff426b 28%, #fff 53%, #ff426b 75%, transparent);
            box-shadow: 0 0 16px #ff426b, 0 0 34px #ff143f;
            animation: bossSlashFly 1.05s var(--slash-delay) ease-in forwards;
        }
        .boss-super-slash::after { content: ''; position: absolute; inset: -18px 14px; border: 2px solid #ff426b; border-left-color: transparent; border-right-color: transparent; transform: skewX(-28deg); }
        @keyframes bossVoidTether { from { opacity: 0; transform: translateY(-50%) scaleX(.02); } 18% { opacity: 1; } to { opacity: 0; transform: translateY(-50%) scaleX(1); } }
        @keyframes bossRocketFly { from { opacity: 0; transform: translateX(0) scale(.5); } 12% { opacity: 1; } to { opacity: 0; transform: translateX(var(--attack-length)) scale(1.1); } }
        @keyframes bossPlasmaFly { from { opacity: 0; transform: translate(-12px, -50%) scale(.3); } 10% { opacity: 1; } to { opacity: 0; transform: translate(var(--plasma-distance), -50%) scale(1.6); } }
        @keyframes bossPlasmaSpin { to { transform: rotate(360deg); } }
        @keyframes bossSlashFly { from { opacity: 0; transform: translateX(0) rotate(-8deg) scale(.5); } 12% { opacity: 1; } to { opacity: 0; transform: translateX(var(--slash-distance)) rotate(8deg) scale(1.3); } }
        .collision-world .invasion-boss-super-warning,
        .collision-world .invasion-boss-super-impact,
        .invasion-boss-super-warning,
        .invasion-boss-super-impact {
            position: absolute;
            left: 0;
            top: 0;
            width: 220px;
            height: 220px;
            margin: -110px 0 0 -110px;
            pointer-events: none;
            z-index: 7;
            transform-origin: center;
        }
        .invasion-boss-super-warning b {
            position: absolute;
            left: 50%;
            top: calc(50% + 92px);
            transform: translateX(-50%);
            color: #fff;
            font-size: 13px;
            letter-spacing: .18em;
            white-space: nowrap;
            text-shadow: 0 0 5px #000, 0 0 12px currentColor;
            animation: invasionBossWarningText .8s ease-in-out infinite alternate;
        }
        .boss-super-core,
        .boss-super-ring,
        .boss-super-cross,
        .boss-super-flash,
        .boss-super-rays {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            pointer-events: none;
        }
        .invasion-boss-super-warning .boss-super-core {
            width: 28px;
            height: 28px;
            background: #fff;
            box-shadow: 0 0 10px #fff, 0 0 28px currentColor;
            animation: invasionBossChargeCore .55s ease-in-out infinite alternate;
        }
        .invasion-boss-super-warning .boss-super-ring {
            width: 132px;
            height: 132px;
            border: 3px solid currentColor;
            box-shadow: 0 0 14px currentColor, inset 0 0 18px currentColor;
            animation: invasionBossChargeRing .9s linear infinite;
        }
        .invasion-boss-super-warning .boss-super-cross {
            width: 176px;
            height: 176px;
            border: 1px dashed currentColor;
            transform: translate(-50%, -50%) rotate(45deg);
            animation: invasionBossCross 1.2s linear infinite;
        }
        .invasion-boss-super-warning.boss-type-0 { color: #b66cff; }
        .invasion-boss-super-warning.boss-type-1 { color: #ffae45; }
        .invasion-boss-super-warning.boss-type-2 { color: #41f5dc; }
        .invasion-boss-super-warning.boss-type-3 { color: #ff426b; }
        .invasion-boss-super-warning.boss-type-1 .boss-super-ring { border-radius: 18%; transform: translate(-50%, -50%) rotate(45deg); }
        .invasion-boss-super-warning.boss-type-2 .boss-super-ring { border-style: double; animation-duration: .55s; }
        .invasion-boss-super-warning.boss-type-3 .boss-super-cross { border-style: solid; animation-duration: .65s; }
        .invasion-boss-super-impact { animation: invasionBossSuperImpact 1.2s ease-out forwards; }
        .invasion-boss-super-impact .boss-super-flash {
            width: 35%; height: 35%; background: #fff;
            box-shadow: 0 0 22px #fff, 0 0 70px currentColor;
            animation: invasionBossFlash .32s ease-out forwards;
        }
        .invasion-boss-super-impact .boss-super-ring {
            width: 24%; height: 24%; border: 5px solid currentColor;
            box-shadow: 0 0 18px currentColor, inset 0 0 12px currentColor;
            animation: invasionBossImpactRing .9s ease-out forwards;
        }
        .invasion-boss-super-impact .boss-super-core {
            width: 72%; height: 72%; border: 2px solid currentColor;
            box-shadow: 0 0 35px currentColor, inset 0 0 35px currentColor;
            animation: invasionBossImpactCore 1.05s ease-out forwards;
        }
        .invasion-boss-super-impact .boss-super-rays {
            width: 95%; height: 4px; border-radius: 0;
            background: linear-gradient(90deg, transparent, currentColor, transparent);
            transform: translate(-50%, -50%) rotate(0deg);
            box-shadow: 0 0 12px currentColor;
            animation: invasionBossRaySpin .65s linear infinite;
        }
        .invasion-boss-super-impact i {
            position: absolute;
            left: 50%; top: 50%; width: 5px; height: 28px;
            margin: -14px 0 0 -2px; border-radius: 4px;
            background: currentColor; box-shadow: 0 0 8px currentColor;
            transform-origin: 2px 110px;
            transform: rotate(var(--ray-angle));
            animation: invasionBossRay .95s ease-out forwards;
        }
        .invasion-boss-super-impact.boss-type-0 { color: #b66cff; }
        .invasion-boss-super-impact.boss-type-1 { color: #ffae45; }
        .invasion-boss-super-impact.boss-type-2 { color: #41f5dc; }
        .invasion-boss-super-impact.boss-type-3 { color: #ff426b; }
        .invasion-boss-super-impact.boss-type-1 .boss-super-rays { animation-duration: .4s; }
        .invasion-boss-super-impact.boss-type-2 .boss-super-core { border-style: double; }
        .invasion-boss-super-impact.boss-type-3 .boss-super-ring { border-radius: 18%; transform: translate(-50%, -50%) rotate(45deg); }
        .invasion-boss-super-impact-rocket .boss-super-core { background: radial-gradient(circle, #fff, #ffae45 38%, #ff3100 72%, transparent); border: 0; }
        .invasion-boss-super-impact-rocket .boss-super-ring { border-style: dashed; border-width: 3px; }
        .invasion-boss-super-impact-rocket .boss-super-rays { animation-duration: .3s; transform: translate(-50%, -50%) rotate(45deg); }
        .invasion-boss-super-impact-plasma .boss-super-core { background: radial-gradient(circle, #fff, #41f5dc 32%, #008cff 68%, transparent); border: 0; }
        .invasion-boss-super-impact-plasma .boss-super-ring { border-style: double; animation-duration: .55s; }
        .invasion-boss-super-impact-collapse .boss-super-core { background: #fff; border-color: #ff426b; box-shadow: 0 0 28px #ff426b, inset 0 0 20px #ff426b; }
        .invasion-boss-super-impact-collapse .boss-super-ring { border-radius: 18%; transform: translate(-50%, -50%) rotate(45deg); }
        .invasion-boss-super-impact-collapse .boss-super-rays { animation-duration: .3s; }
        @keyframes invasionBossChargeCore { from { transform: translate(-50%, -50%) scale(.6); } to { transform: translate(-50%, -50%) scale(1.5); } }
        @keyframes invasionBossChargeRing { to { transform: translate(-50%, -50%) rotate(360deg) scale(1.2); } }
        @keyframes invasionBossCross { to { transform: translate(-50%, -50%) rotate(405deg); } }
        @keyframes invasionBossWarningText { from { opacity: .55; } to { opacity: 1; } }
        @keyframes invasionBossFlash { from { transform: translate(-50%, -50%) scale(.2); opacity: 1; } to { transform: translate(-50%, -50%) scale(2.8); opacity: 0; } }
        @keyframes invasionBossImpactRing { from { transform: translate(-50%, -50%) scale(.3); opacity: 1; } to { transform: translate(-50%, -50%) scale(4); opacity: 0; } }
        @keyframes invasionBossImpactCore { from { transform: translate(-50%, -50%) scale(.2) rotate(0); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.5) rotate(180deg); opacity: 0; } }
        @keyframes invasionBossRaySpin { to { transform: translate(-50%, -50%) rotate(180deg); opacity: 0; } }
        @keyframes invasionBossRay { from { opacity: 1; transform: rotate(var(--ray-angle)) scaleY(.2); } to { opacity: 0; transform: rotate(var(--ray-angle)) scaleY(1.3); } }
        @keyframes invasionBossSuperImpact { 0% { opacity: 1; } 35% { opacity: 1; } 100% { opacity: 0; } }
        .invasion-kill-burst.boss-big::before {
            width: 38px;
            height: 38px;
            margin: -19px 0 0 -19px;
            border-width: 4px;
            border-color: #ff80ff;
            box-shadow:
                0 0 22px rgba(255, 120, 255, 1),
                0 0 40px rgba(200, 80, 255, 0.9),
                inset 0 0 10px rgba(255, 220, 255, 0.5);
        }
        .invasion-kill-burst.boss-big .invasion-kill-spark {
            width: 8px;
            height: 8px;
            background: #ffe0ff;
            box-shadow: 0 0 10px #ff90ff;
        }
        .invasion-floor-results {
            position: absolute;
            inset: 0;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(2, 6, 14, 0.82);
            padding: 16px;
        }
        .invasion-floor-results.hidden { display: none; }
        .invasion-floor-results-card {
            width: min(100%, 320px);
            background: linear-gradient(180deg, #0c1828 0%, #060c16 100%);
            border: 1px solid rgba(0, 232, 255, 0.25);
            border-radius: 10px;
            padding: 16px 18px;
            text-align: center;
        }
        .invasion-floor-results-title {
            font-size: 13px;
            letter-spacing: 0.1em;
            color: #00e8ff;
            margin-bottom: 12px;
        }
        .invasion-floor-results-stat {
            font-size: 12px;
            color: #8aa8c0;
            margin: 6px 0;
            line-height: 1.45;
        }
        .invasion-floor-results-stat strong { color: #e8f4ff; }
        .invasion-floor-results-loot {
            margin: 10px 0 4px;
            font-size: 12px;
            color: #b0d4e8;
            line-height: 1.5;
        }
        .invasion-floor-results-loot.empty { color: #5a7080; font-style: italic; }
        .invasion-floor-results-actions {
            display: flex;
            gap: 10px;
            margin-top: 14px;
            justify-content: center;
        }
        .invasion-floor-results-actions .btn { flex: 1; max-width: 140px; }
        .invasion-boss-ph {
            width: 52px; height: 52px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, #ff6060, #801818 70%);
            border: 2px solid #ff9090;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            box-shadow: 0 0 18px rgba(255,60,60,0.65);
            animation: invasionBossPulse 1.2s ease-in-out infinite;
        }
        @keyframes invasionBossPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.06); }
        }
        .invasion-projectile {
            position: absolute;
            left: 0;
            top: 0;
            width: 22px; height: 6px;
            border-radius: 3px;
            pointer-events: none;
            transform-origin: center center;
            will-change: transform;
            contain: strict;
        }
        .invasion-projectile.player {
            background: linear-gradient(90deg, #ffffff 0%, #00e8ff 35%, #0077ff 80%, rgba(0, 119, 255, 0) 100%);
            box-shadow: 0 0 10px #00e8ff, 0 0 20px rgba(0, 232, 255, 0.8), 0 0 30px rgba(0, 150, 255, 0.5);
            border-radius: 3px;
            filter: drop-shadow(0 0 4px #00e8ff);
        }
        .invasion-projectile.player-red,
        .collision-projectile.player-red {
            background: linear-gradient(90deg, #ffffff 0%, #ff7777 35%, #ff2222 80%, rgba(255, 34, 34, 0) 100%);
            box-shadow: 0 0 10px #ff3333, 0 0 20px rgba(255, 51, 51, .8), 0 0 30px rgba(180, 20, 20, .5);
            filter: drop-shadow(0 0 4px #ff3333);
        }
        .invasion-projectile.player-purple,
        .collision-projectile.player-purple {
            background: linear-gradient(90deg, #ffffff 0%, #df9cff 35%, #a632e8 80%, rgba(166, 50, 232, 0) 100%);
            box-shadow: 0 0 10px #c56cff, 0 0 20px rgba(197, 108, 255, .8), 0 0 30px rgba(126, 38, 210, .5);
            filter: drop-shadow(0 0 4px #c56cff);
        }
        .invasion-projectile.player-gold,
        .collision-projectile.player-gold {
            background: linear-gradient(90deg, #fffbd0 0%, #ffe066 35%, #ffd400 80%, rgba(255, 212, 0, 0) 100%);
            box-shadow: 0 0 10px #ffd400, 0 0 20px rgba(255, 212, 0, .8), 0 0 30px rgba(255, 170, 0, .5);
            filter: drop-shadow(0 0 4px #ffd400);
        }
        .invasion-projectile.enemy.plasma {
            width: 14px; height: 14px;
            border-radius: 50%;
            background: radial-gradient(circle, #ffffff 0%, #ff8833 35%, #ff2200 80%, rgba(255, 34, 0, 0) 100%);
            box-shadow: 0 0 12px #ff5500, 0 0 24px rgba(255, 85, 0, 0.85), 0 0 36px rgba(255, 0, 0, 0.5);
            filter: drop-shadow(0 0 5px #ff4400);
        }
        .invasion-projectile.enemy.mob3 {
            width: 17px; height: 17px;
            border-radius: 50%;
            background: radial-gradient(circle, #ffffff 0%, #a6f3ff 18%, #6c66ff 52%, #a329ff 78%, rgba(163, 41, 255, 0) 100%);
            box-shadow: 0 0 12px #61d9ff, 0 0 25px rgba(131, 93, 255, .95), 0 0 40px rgba(205, 54, 255, .7);
            filter: drop-shadow(0 0 6px #a26cff);
            animation: invasionMob3Plasma 0.38s ease-in-out infinite alternate;
        }
        @keyframes invasionMob3Plasma {
            from { opacity: .84; }
            to { opacity: 1; }
        }
        .invasion-projectile.enemy.laser {
            width: 28px; height: 6px;
            border-radius: 3px;
            background: linear-gradient(90deg, #ffffff 0%, #66ffdb 30%, #00ffaa 80%, rgba(0, 255, 170, 0) 100%);
            box-shadow: 0 0 12px #00ffaa, 0 0 24px rgba(0, 255, 170, 0.85), 0 0 36px rgba(0, 200, 120, 0.5);
            filter: drop-shadow(0 0 5px #00ffaa);
        }
        #invasion-player.invasion-stunned,
        .collision-ship.stunned { animation: invasionMob3Stun 0.22s ease-in-out infinite alternate; filter: saturate(.35) brightness(1.35) drop-shadow(0 0 12px #7d67ff); }
        @keyframes invasionMob3Stun {
            from { opacity: .68; }
            to { opacity: 1; }
        }
        @keyframes invasionLaserDash {
            from { background-position: 0 0; }
            to { background-position: 10px 0; }
        }
        @keyframes invasionLaserPulse {
            from { opacity: 0.8; }
            to { opacity: 1; }
        }
        .invasion-kill-burst {
            position: absolute;
            left: 0;
            top: 0;
            width: 6px;
            height: 6px;
            pointer-events: none;
            z-index: 4;
        }
        .invasion-kill-burst::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 14px;
            height: 14px;
            margin: -7px 0 0 -7px;
            border-radius: 50%;
            border: 3px solid #ff5520;
            box-shadow:
                0 0 10px rgba(255, 90, 30, 1),
                0 0 18px rgba(255, 140, 50, 0.75),
                inset 0 0 6px rgba(255, 200, 120, 0.35);
            animation: invasionKillRing 0.42s ease-out forwards;
            animation-delay: var(--collision-effect-delay, 0s);
        }
        .invasion-kill-burst.laser::before {
            border-color: #30ffcc;
            box-shadow:
                0 0 12px rgba(48, 255, 204, 1),
                0 0 20px rgba(64, 232, 255, 0.8),
                inset 0 0 6px rgba(180, 255, 240, 0.4);
        }
        .invasion-kill-burst.boss::before {
            width: 24px;
            height: 24px;
            margin: -12px 0 0 -12px;
            border-width: 4px;
            border-color: #ff2828;
            box-shadow:
                0 0 14px rgba(255, 40, 40, 1),
                0 0 26px rgba(255, 80, 60, 0.9),
                inset 0 0 8px rgba(255, 160, 140, 0.45);
            animation-duration: 0.55s;
        }
        .invasion-kill-spark {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 3px;
            height: 3px;
            margin: -1.5px 0 0 -1.5px;
            border-radius: 50%;
            background: #ffb060;
            box-shadow: 0 0 4px #ff8040;
            animation: invasionKillSpark 0.46s ease-out forwards;
            animation-delay: var(--collision-effect-delay, 0s);
        }
        .invasion-kill-burst.laser .invasion-kill-spark {
            background: #80ffee;
            box-shadow: 0 0 5px #40e8ff;
        }
        /* У каждого босса своя реакция попадания по кораблю игрока. */
        .invasion-kill-burst.ship-hit.boss-hit-type-0::before {
            width: 32px;
            height: 32px;
            margin: -16px 0 0 -16px;
            border-color: #b66cff;
            border-style: dashed;
            box-shadow: 0 0 14px #b66cff, inset 0 0 10px rgba(182, 108, 255, .65);
            animation: collisionBossHitVoid .72s ease-out forwards;
        }
        .invasion-kill-burst.ship-hit.boss-hit-type-0 .invasion-kill-spark {
            background: #e0c0ff;
            box-shadow: 0 0 7px #b66cff;
            animation-name: collisionBossHitVoidSpark;
        }
        .invasion-kill-burst.ship-hit.boss-hit-type-1::before {
            width: 30px;
            height: 20px;
            margin: -10px 0 0 -15px;
            border-color: #ffae45;
            border-radius: 28% 62% 28% 62%;
            box-shadow: 0 0 16px #ffae45, 0 0 30px #ff3100, inset 0 0 8px #fff0a0;
            animation: collisionBossHitRocket .48s ease-out forwards;
        }
        .invasion-kill-burst.ship-hit.boss-hit-type-1 .invasion-kill-spark {
            background: #fff0a0;
            box-shadow: 0 0 7px #ff5b18;
            animation-name: collisionBossHitRocketSpark;
        }
        .invasion-kill-burst.ship-hit.boss-hit-type-2::before {
            width: 26px;
            height: 26px;
            margin: -13px 0 0 -13px;
            border-color: #41f5dc;
            border-style: double;
            box-shadow: 0 0 14px #41f5dc, 0 0 28px #008cff, inset 0 0 8px #d8ffff;
            animation: collisionBossHitPlasma .62s ease-out forwards;
        }
        .invasion-kill-burst.ship-hit.boss-hit-type-2 .invasion-kill-spark {
            background: #d8ffff;
            box-shadow: 0 0 7px #00aaff;
            animation-name: collisionBossHitPlasmaSpark;
        }
        .invasion-kill-burst.ship-hit.boss-hit-type-3::before {
            width: 38px;
            height: 11px;
            margin: -5.5px 0 0 -19px;
            border-color: #ff426b;
            border-radius: 50%;
            transform: rotate(-35deg) scale(.35);
            box-shadow: 0 0 14px #ff426b, 0 0 28px #ff143f;
            animation: collisionBossHitSlash .55s ease-out forwards;
        }
        .invasion-kill-burst.ship-hit.boss-hit-type-3::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 38px;
            height: 11px;
            margin: -5.5px 0 0 -19px;
            border: 2px solid #ff9aae;
            border-left-color: transparent;
            border-right-color: transparent;
            transform: rotate(35deg) scale(.35);
            animation: collisionBossHitSlash .55s .04s ease-out forwards;
        }
        .invasion-kill-burst.ship-hit.boss-hit-type-3 .invasion-kill-spark {
            background: #ffb5c5;
            box-shadow: 0 0 7px #ff426b;
            animation-name: collisionBossHitSlashSpark;
        }
        @keyframes collisionBossHitVoid {
            0% { transform: rotate(0) scale(.25); opacity: 1; }
            100% { transform: rotate(180deg) scale(1.8); opacity: 0; }
        }
        @keyframes collisionBossHitVoidSpark {
            0% { transform: translate(0, 0) scale(1.2); opacity: 1; }
            100% { transform: translate(calc(var(--dx) * 1.4), calc(var(--dy) * 1.4)) scale(.1); opacity: 0; }
        }
        @keyframes collisionBossHitRocket {
            0% { transform: rotate(45deg) scale(.3); opacity: 1; }
            35% { transform: rotate(45deg) scale(1.35); opacity: 1; }
            100% { transform: rotate(45deg) scale(.65); opacity: 0; }
        }
        @keyframes collisionBossHitRocketSpark {
            0% { transform: translate(0, 0) scale(1.4); opacity: 1; }
            100% { transform: translate(calc(var(--dx) * 1.8), calc(var(--dy) * 1.8)) scale(.05); opacity: 0; }
        }
        @keyframes collisionBossHitPlasma {
            0% { transform: scale(.2); opacity: 1; }
            45% { transform: scale(1.1); opacity: .9; }
            100% { transform: scale(3.8); opacity: 0; }
        }
        @keyframes collisionBossHitPlasmaSpark {
            0% { transform: translate(0, 0) scale(1.5); opacity: 1; }
            100% { transform: translate(calc(var(--dx) * .7), calc(var(--dy) * .7)) scale(.1); opacity: 0; }
        }
        @keyframes collisionBossHitSlash {
            0% { opacity: 1; }
            100% { transform: rotate(var(--slash-angle, 35deg)) scale(1.45); opacity: 0; }
        }
        @keyframes collisionBossHitSlashSpark {
            0% { transform: translate(0, 0) scale(1.3); opacity: 1; }
            100% { transform: translate(calc(var(--dx) * 1.6), calc(var(--dy) * 1.6)) scale(.05); opacity: 0; }
        }
        .invasion-kill-burst.boss .invasion-kill-spark {
            width: 4px;
            height: 4px;
            margin: -2px 0 0 -2px;
            background: #ff9090;
            box-shadow: 0 0 6px #ff4040;
        }
        @keyframes invasionKillRing {
            0% { transform: scale(0.4); opacity: 1; }
            100% { transform: scale(3.2); opacity: 0; }
        }
        @keyframes invasionKillSpark {
            0% { transform: translate(0, 0) scale(1.2); opacity: 1; }
            100% { transform: translate(var(--dx), var(--dy)) scale(0.15); opacity: 0; }
        }
        .invasion-entity.enemy.laser-mob canvas,
        .invasion-entity.enemy.laser-mob .mine-sprite-img {
            filter: drop-shadow(0 0 5px rgba(64, 255, 210, 0.55));
        }
        .invasion-entity.enemy.mob3-mob canvas,
        .invasion-entity.enemy.mob3-mob .mine-sprite-img { filter: drop-shadow(0 0 8px rgba(80, 170, 255, .95)) drop-shadow(0 0 18px rgba(180, 80, 255, .75)); }
        .invasion-entity.enemy.detonator-mob canvas,
        .invasion-entity.enemy.detonator-mob .mine-sprite-img {
            filter: drop-shadow(0 0 8px rgba(255, 80, 40, 0.75));
        }
        .invasion-entity.enemy.detonator-mob.detonate-warn canvas,
        .invasion-entity.enemy.detonator-mob.detonate-warn .mine-sprite-img {
            animation: invasionDetonateWarn 0.18s ease-in-out infinite alternate;
            filter: drop-shadow(0 0 14px rgba(255, 220, 80, 0.95)) brightness(1.35);
        }
        @keyframes invasionDetonateWarn {
            from { transform: scale(1); }
            to { transform: scale(1.12); }
        }
        /* Процедурный взрыв бомбера — только круги/искры, без PNG-квадрата */
        .invasion-boom {
            position: absolute;
            left: 0;
            top: 0;
            width: var(--boom-size, 96px);
            height: var(--boom-size, 96px);
            margin: 0;
            z-index: 40;
            pointer-events: none;
            overflow: visible;
            background: transparent;
            border: none;
            box-shadow: none;
        }
        .invasion-boom-layer {
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%);
        }
        .invasion-boom-flash {
            width: 28%;
            height: 28%;
            background: radial-gradient(circle, #fffce8 0%, #ffe060 35%, rgba(255, 120, 20, 0) 70%);
            animation: invasionBoomFlash 0.22s ease-out forwards;
            animation-delay: var(--collision-effect-delay, 0s);
            z-index: 5;
        }
        .invasion-boom-core {
            width: 42%;
            height: 42%;
            background: radial-gradient(circle,
                #ffffff 0%,
                #ffe9a0 18%,
                #ffb020 42%,
                #ff4a10 68%,
                rgba(255, 40, 0, 0) 78%);
            filter: blur(0.4px);
            animation: invasionBoomCore 0.55s ease-out forwards;
            animation-delay: var(--collision-effect-delay, 0s);
            z-index: 4;
        }
        .invasion-boom-fire {
            width: 78%;
            height: 78%;
            background: radial-gradient(circle,
                rgba(255, 220, 100, 0.95) 0%,
                rgba(255, 110, 20, 0.75) 34%,
                rgba(220, 30, 10, 0.4) 58%,
                rgba(80, 0, 0, 0) 76%);
            animation: invasionBoomFire 0.7s ease-out forwards;
            animation-delay: var(--collision-effect-delay, 0s);
            z-index: 3;
        }
        .invasion-boom-glow {
            width: 110%;
            height: 110%;
            background: radial-gradient(circle,
                rgba(255, 160, 40, 0.55) 0%,
                rgba(255, 60, 10, 0.25) 40%,
                rgba(255, 30, 0, 0) 70%);
            animation: invasionBoomGlow 0.75s ease-out forwards;
            animation-delay: var(--collision-effect-delay, 0s);
            z-index: 1;
        }
        .invasion-boom-ring {
            width: 36%;
            height: 36%;
            border: 3px solid rgba(255, 210, 90, 0.95);
            box-shadow:
                0 0 10px rgba(255, 140, 40, 0.95),
                0 0 22px rgba(255, 60, 10, 0.75),
                inset 0 0 8px rgba(255, 230, 140, 0.45);
            background: transparent;
            animation: invasionBoomRing 0.55s ease-out forwards;
            animation-delay: var(--collision-effect-delay, 0s);
            z-index: 2;
        }
        .invasion-boom-ring.late {
            border-color: rgba(255, 90, 40, 0.85);
            animation-delay: 0.06s;
            animation-duration: 0.65s;
        }
        .invasion-boom-ember {
            position: absolute;
            left: 50%;
            top: 50%;
            width: var(--ember-size, 5px);
            height: var(--ember-size, 5px);
            margin: calc(var(--ember-size, 5px) / -2) 0 0 calc(var(--ember-size, 5px) / -2);
            border-radius: 50%;
            background: radial-gradient(circle, #fff6c0 0%, #ff9020 55%, #ff3000 100%);
            box-shadow: 0 0 6px #ff6020;
            animation: invasionBoomEmber 0.65s ease-out forwards;
            animation-delay: var(--collision-effect-delay, 0s);
            z-index: 6;
        }
        @keyframes invasionBoomFlash {
            0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
            40% { transform: translate(-50%, -50%) scale(1.35); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
        }
        @keyframes invasionBoomCore {
            0% { transform: translate(-50%, -50%) scale(0.25); opacity: 1; }
            35% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1.55); opacity: 0; }
        }
        @keyframes invasionBoomFire {
            0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0.95; }
            30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1.65); opacity: 0; }
        }
        @keyframes invasionBoomGlow {
            0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
            100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
        }
        @keyframes invasionBoomRing {
            0% { transform: translate(-50%, -50%) scale(0.35); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
        }
        .collision-boom { pointer-events: none; z-index: 40; will-change: opacity; }
        .collision-boom.laser .invasion-boom-core { background: radial-gradient(circle, #ffffff 0%, #a0fff0 22%, #30e0c0 52%, rgba(0, 80, 70, 0) 78%); }
        .collision-boom.laser .invasion-boom-fire { background: radial-gradient(circle, rgba(180, 255, 240, .95) 0%, rgba(30, 220, 180, .68) 38%, rgba(0, 80, 70, 0) 76%); }
        .collision-boom.laser .invasion-boom-ring { border-color: rgba(70, 255, 215, .95); box-shadow: 0 0 12px rgba(50, 255, 210, .95), 0 0 24px rgba(40, 220, 255, .75); }
        .collision-boom.boss .invasion-boom-core { background: radial-gradient(circle, #ffffff 0%, #ffb0ff 20%, #c040e0 52%, rgba(70, 0, 100, 0) 80%); }
        .collision-boom.boss .invasion-boom-fire { background: radial-gradient(circle, rgba(255, 210, 255, .95) 0%, rgba(190, 50, 230, .7) 38%, rgba(70, 0, 100, 0) 76%); }
        @keyframes invasionBoomEmber {
            0% { transform: translate(0, 0) scale(1.3); opacity: 1; }
            100% { transform: translate(var(--dx), var(--dy)) scale(0.15); opacity: 0; }
        }
        .invasion-player.invasion-kb-flash {
            animation: invasionKbFlash 0.32s ease-out;
        }
        @keyframes invasionKbFlash {
            0% { filter: brightness(2.2) drop-shadow(0 0 14px rgba(255, 90, 30, 1)); }
            55% { filter: brightness(1.35) drop-shadow(0 0 8px rgba(255, 140, 40, 0.85)); }
            100% { filter: none; }
        }
        .invasion-steer-pad {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 46%;
            z-index: 6;
            touch-action: none;
        }
        .invasion-steer-pad.active {
            background: linear-gradient(180deg, transparent 0%, rgba(64, 200, 255, 0.045) 100%);
        }
        .invasion-btn-exit {
            position: absolute;
            top: 86px; right: 8px;
            z-index: 7;
            width: 36px; height: 36px;
            border-radius: 8px;
            border: 1px solid rgba(255,100,100,0.45);
            background: rgba(40,10,10,0.75);
            color: #ff9090;
            font-size: 16px;
            cursor: pointer;
        }
        .invasion-lobby { text-align: center; padding: 4px 0 8px; }
        .invasion-lobby-stat {
            font-size: var(--ui-fs-md);
            color: var(--text-dim);
            margin: 6px 0;
            font-weight: 500;
        }
        .invasion-lobby-stat strong { color: var(--text); }
        .invasion-floor-msg {
            position: absolute;
            left: 50%; top: 42%;
            transform: translate(-50%, -50%);
            z-index: 8;
            padding: 10px 18px;
            background: rgba(0,20,40,0.88);
            border: 1px solid rgba(64,200,255,0.4);
            border-radius: 8px;
            color: #c8e8ff;
            font-size: 13px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.25s;
        }
        .invasion-floor-msg.show { opacity: 1; }
        .invasion-loot-drop {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 5;
            pointer-events: none;
            will-change: transform;
            filter: drop-shadow(0 0 6px rgba(255, 220, 80, 0.75));
        }
        .invasion-loot-drop .res-gfx svg,
        .invasion-loot-drop .part-gfx svg { width: 38px; height: 38px; display: block; }

        .wtitle {
            color: var(--gold);
            font-size: var(--ui-fs-lg);
            font-weight: 700;
            letter-spacing: 0.08em;
            text-align: center;
            margin-bottom: 10px;
            text-transform: uppercase;
            text-shadow: 0 0 10px rgba(255, 212, 0, 0.35);
        }
        .input {
            width: 100%; padding: 8px; margin: 6px 0;
            background: rgba(0, 8, 24, 0.85);
            border: 1px solid rgba(0, 232, 255, 0.45);
            border-radius: 4px;
            color: #e8f4ff;
            font-family: inherit; font-size: 10px; font-weight: 500;
            text-align: center;
            box-shadow: inset 0 0 12px rgba(0, 232, 255, 0.06), 0 0 8px rgba(0, 232, 255, 0.1);
        }
        .input:focus { outline: none; border-color: var(--neon-magenta); box-shadow: 0 0 12px var(--neon-glow-m); }
        .start-hint { font-size: 8px; color: #ff6688; text-align: center; min-height: 10px; margin-top: 2px; text-shadow: 0 0 6px rgba(255, 80, 100, 0.4); }
        .btn {
            width: 100%; padding: 9px; margin: 6px 0;
            background: linear-gradient(180deg, rgba(0, 50, 80, 0.55) 0%, rgba(4, 10, 28, 0.95) 100%);
            border: 1px solid rgba(0, 232, 255, 0.55);
            border-radius: 4px;
            color: #f2f7ff;
            font-family: inherit; font-size: var(--ui-fs-md); font-weight: 600;
            letter-spacing: 0.04em;
            cursor: pointer;
            box-shadow: 0 0 12px rgba(0, 232, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
        }
        .btn:active:not(:disabled) {
            transform: scale(0.98) translateY(1px);
            box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.55), 0 0 6px rgba(0, 232, 255, 0.15);
        }
        .btn:disabled {
            opacity: 0.72;
            cursor: not-allowed;
            color: #8a9aac;
            border-color: rgba(100, 120, 145, 0.38);
            background: linear-gradient(180deg, rgba(18, 26, 40, 0.88) 0%, rgba(8, 12, 22, 0.95) 100%);
            filter: grayscale(0.2);
            box-shadow: none;
            text-shadow: none;
        }
        /* Прокачка/активация: цена всегда читается; яркая подсветка — только когда хватает ресурсов */
        .upgrade-row .btn-sm:not(:disabled),
        .perk-row-actions .btn-sm:not(:disabled):not(.btn-equip),
        .faction-task-claim:not(:disabled),
        .container-actions .btn:not(:disabled) {
            border-color: rgba(0, 232, 255, 0.85);
            color: #f8fcff;
            background: linear-gradient(180deg, rgba(0, 78, 120, 0.78) 0%, rgba(4, 16, 40, 0.98) 100%);
            box-shadow: 0 0 12px rgba(0, 232, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14);
        }
        .perk-row-actions .btn-equip:not(:disabled):not(.active) {
            border-color: rgba(255, 212, 0, 0.7);
            color: #ffe880;
            background: linear-gradient(180deg, rgba(55, 42, 8, 0.62) 0%, rgba(18, 14, 4, 0.95) 100%);
            box-shadow: 0 0 10px rgba(255, 212, 0, 0.28);
        }
        .upgrade-row .btn-sm:disabled,
        .perk-row-actions .btn-sm:disabled {
            opacity: 0.78;
            color: #9aabbc;
            border-color: rgba(110, 130, 155, 0.36);
            background: linear-gradient(180deg, rgba(16, 24, 38, 0.9) 0%, rgba(8, 12, 20, 0.96) 100%);
            filter: grayscale(0.15);
            box-shadow: none;
        }
        .btn-back { border-color: rgba(120, 140, 180, 0.45); color: #b0bcd0; margin-top: 4px; box-shadow: none; }
        .group-task-window { text-align: center; }
        .group-task-card { display: flex; flex-direction: column; align-items: center; gap: 12px; }
        .group-task-icon { color: #35d6a0; font-size: 34px; text-shadow: 0 0 16px rgba(53, 214, 160, .8); }
        .group-task-description { color: #c5d5e8; font-size: var(--ui-fs-lg); line-height: 1.4; max-width: 340px; }
        .group-task-reward { color: #ffe18a; font-size: var(--ui-fs-md); line-height: 1.5; text-shadow: 0 0 8px rgba(255, 212, 0, .35); }
        .group-task-actions { display: flex; gap: 8px; width: 100%; justify-content: center; flex-wrap: wrap; }
        .group-task-actions .btn { margin-top: 0; }
        .group-task-status { min-height: 18px; color: #ffb4c1; font-size: var(--ui-fs-md); line-height: 1.35; }
        .group-task-done { color: #6dffc9; font-size: var(--ui-fs-lg); padding: 24px 0; text-shadow: 0 0 12px rgba(53, 214, 160, .65); }
        .clan-placeholder-window { text-align: center; }
        .clan-placeholder-card { display: flex; flex-direction: column; align-items: center; gap: 8px; }
        .clan-placeholder-icon { color: var(--neon-cyan); font-size: 38px; line-height: 1; text-shadow: 0 0 14px rgba(0, 232, 255, .8), 0 0 28px rgba(255, 43, 214, .35); animation: clanPlaceholderPulse 2.2s ease-in-out infinite; }
        .clan-placeholder-message { margin: 4px 0 0; color: #f2f7ff; font-size: var(--ui-fs-lg); font-weight: 700; letter-spacing: .08em; line-height: 1.35; text-shadow: 0 0 10px rgba(0, 232, 255, .35); }
        .clan-placeholder-note { max-width: 280px; margin: 0 0 6px; color: #a8c4d8; font-size: var(--ui-fs-md); line-height: 1.45; }
        .clan-placeholder-card .btn { margin: 2px 0 0; }
        @keyframes clanPlaceholderPulse {
            0%, 100% { opacity: .72; transform: scale(.96); }
            50% { opacity: 1; transform: scale(1.06); }
        }
        .btn-sm { width: auto; padding: 5px 9px; font-size: var(--ui-fs-sm); }
        .hidden { display: none !important; }
        .row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
        .card {
            border: 1px solid rgba(0, 232, 255, 0.4);
            border-radius: 4px;
            padding: 8px; text-align: center; cursor: pointer;
            font-size: 8px; font-weight: 500;
            width: 100%; display: flex; flex-direction: column; align-items: center;
            background: rgba(0, 12, 32, 0.45);
            box-shadow: 0 0 10px rgba(0, 232, 255, 0.08), inset 0 0 16px rgba(0, 0, 0, 0.25);
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .card.selected {
            border-color: var(--neon-magenta) !important;
            box-shadow: 0 0 18px var(--neon-glow-m), inset 0 0 12px rgba(255, 43, 214, 0.1) !important;
        }
        .upgrade-row {
            display: flex; justify-content: space-between; align-items: center;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(0, 232, 255, 0.3);
            border-radius: 4px;
            padding: 7px; margin: 5px 0;
            font-size: 10px; line-height: 1.35; font-weight: 500;
            background: linear-gradient(180deg, rgba(12, 36, 60, 0.78), rgba(0, 8, 24, 0.5));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.42), 0 3px 9px rgba(0, 0, 0, 0.28), 0 0 8px rgba(0, 232, 255, 0.05);
        }
        .upgrade-row > * { position: relative; z-index: 1; }
        .ship-name { font-size: 6px; color: var(--gold); margin-bottom: 8px; }
        .ship-preview {
            width: 100%; min-height: 200px; display: flex; align-items: center; justify-content: center;
            background: transparent;
            border: 1px solid rgba(0, 232, 255, 0.3); border-radius: 4px; padding: 10px 4px;
            box-shadow: none;
        }
        .ship-preview canvas { image-rendering: pixelated; image-rendering: crisp-edges; max-width: 100%; height: auto; }
        .overlay:has(#win-ship:not(.hidden)),
        .overlay:has(#win-hangar:not(.hidden)) {
            align-items: stretch;
            justify-content: stretch;
        }
        #win-ship {
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 6px 8px 5px;
            box-sizing: border-box;
            border-width: 2px;
            border-style: solid;
        }
        #ship-wtitle {
            flex-shrink: 0;
            margin-bottom: 6px;
            line-height: 1.3;
            font-size: 6px;
        }
        #win-ship .faction-brief {
            flex-shrink: 0;
            font-family: 'Rajdhani', 'Segoe UI', sans-serif;
            font-size: 7px;
            line-height: 1.35;
            color: #c8d0e0;
            background: rgba(0, 8, 24, 0.55);
            border: 1px solid rgba(0, 232, 255, 0.3);
            border-radius: 4px;
            padding: 6px 8px;
            margin-bottom: 8px;
            box-shadow: inset 0 0 14px rgba(0, 232, 255, 0.05), 0 0 10px rgba(0, 232, 255, 0.06);
        }
        #win-ship .faction-brief-title {
            font-size: 8px;
            font-weight: 600;
            letter-spacing: 0.04em;
            margin-bottom: 3px;
        }
        #win-ship .faction-brief p {
            margin: 0 0 4px;
            font-weight: 300;
        }
        #win-ship .faction-brief strong {
            font-weight: 600;
            color: #eef2fa;
        }
        #win-ship .faction-brief .brief-plus { color: #7fd4ff; }
        #win-ship .faction-brief .brief-minus { color: #ff9a8a; }
        #ship-list {
            flex-shrink: 0;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 5px;
            width: 100%;
            align-items: start;
        }
        #ship-list .card {
            width: auto;
            min-width: 0;
            padding: 4px;
            overflow: hidden;
            transition: border-color .15s, box-shadow .15s;
        }
        #ship-list .ship-name {
            font-size: 5px;
            margin-bottom: 6px;
            line-height: 1.2;
        }
        #ship-list .ship-preview {
            min-height: 104px;
            padding: 3px 1px;
        }
        #ship-list .ship-preview canvas,
        #ship-list .ship-preview .ship-sprite-img {
            max-width: 100%;
            height: auto;
        }
        .ship-stats {
            width: 100%;
            margin-top: 4px;
            font-family: 'Rajdhani', 'Segoe UI', sans-serif;
        }
        .ship-stat-row {
            display: flex;
            align-items: center;
            gap: 3px;
            margin-bottom: 2px;
        }
        .ship-stat-label {
            width: 12px;
            flex-shrink: 0;
            font-size: 3px;
            color: #9aa3b8;
            text-align: left;
        }
        .ship-stat-bar-wrap {
            flex: 1;
            height: 4px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 1px;
            overflow: hidden;
        }
        .ship-stat-bar {
            height: 100%;
            border-radius: 1px;
            min-width: 1px;
            transition: width .25s ease-out;
        }
        .ship-stat-bar.high {
            background: linear-gradient(90deg, #2a8844, #44cc66);
            box-shadow: 0 0 4px rgba(68, 204, 102, 0.45);
        }
        .ship-stat-bar.low {
            background: linear-gradient(90deg, #992222, #cc4444);
            box-shadow: 0 0 4px rgba(204, 68, 68, 0.35);
        }
        .ship-stat-bar.mid {
            background: #667788;
        }
        .ship-stat-val {
            width: 11px;
            flex-shrink: 0;
            font-size: 3px;
            text-align: right;
            color: #c8d0e0;
        }
        #ship-list .ship-stats { margin-top: 4px; }
        #hangar-ship .ship-stats {
            max-width: 280px;
            margin: 6px auto 0;
        }
        #hangar-ship .ship-stat-label,
        #hangar-ship .ship-stat-val { font-size: 4px; }
        #hangar-ship .ship-stat-bar-wrap { height: 5px; }
        #win-hangar {
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            min-height: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: max(8px, env(safe-area-inset-top)) 10px max(6px, env(safe-area-inset-bottom));
            box-sizing: border-box;
            border-width: 2px;
            border-style: solid;
        }
        #win-hangar > .wtitle {
            flex-shrink: 0;
            margin-bottom: 6px;
            font-size: 10px;
        }
        .hangar-header {
            flex-shrink: 0;
            text-align: center;
        }
        #hangar-ship {
            margin: 2px 0 4px;
        }
        #hangar-ship canvas,
        #hangar-ship .ship-sprite-img {
            max-height: 96px;
            width: auto;
            height: auto;
        }
        #hangar-res {
            font-size: 5px;
            margin-bottom: 6px;
        }
        /* Ангар — крупнее иконки перков, прокачки и сундуков */
        #win-hangar .res-gfx-inline svg,
        #win-hangar .res-gfx svg {
            width: 14px;
            height: 14px;
        }
        #win-hangar .part-gfx-inline svg,
        #win-hangar .part-gfx svg {
            width: 14px;
            height: 14px;
        }
        #win-hangar .upgrade-row .part-gfx svg,
        #win-hangar .upgrade-row .res-gfx-inline svg {
            width: 16px;
            height: 16px;
            vertical-align: -3px;
        }
        #win-hangar .hangar-part .part-gfx svg {
            width: 15px;
            height: 15px;
        }
         #win-hangar .container-icon {
             display: inline-flex;
             align-items: center;
             justify-content: center;
             position: relative;
             width: 60px;
             height: 60px;
             overflow: hidden;
             vertical-align: middle;
             flex-shrink: 0;
         }
         #win-hangar .container-art-frame {
             display: block;
             width: 100%;
             height: 100%;
             object-fit: contain;
         }
         #win-hangar .container-icon.container-art-animated .container-art-frame {
             position: absolute;
             inset: 0;
             opacity: 0;
             animation: container-art-frame 1s steps(1, end) infinite;
         }
         #win-hangar .container-icon.container-art-animated .container-art-frame:nth-child(1) { animation-delay: 0s; }
         #win-hangar .container-icon.container-art-animated .container-art-frame:nth-child(2) { animation-delay: .2s; }
         #win-hangar .container-icon.container-art-animated .container-art-frame:nth-child(3) { animation-delay: .4s; }
         #win-hangar .container-icon.container-art-animated .container-art-frame:nth-child(4) { animation-delay: .6s; }
         #win-hangar .container-icon.container-art-animated .container-art-frame:nth-child(5) { animation-delay: .8s; }
         @keyframes container-art-frame {
             0%, 19.9% { opacity: 1; }
             20%, 100% { opacity: 0; }
         }
         #win-hangar .container-on-belt .container-icon {
             width: 48px;
             height: 48px;
         }
         #win-hangar .container-scene.compact .container-on-belt .container-icon {
             width: 34px;
             height: 34px;
         }
        #win-hangar .perk-row-thumb .perk-thumb svg {
            width: 28px;
            height: 28px;
        }
        #win-hangar .perk-slot .perk-thumb svg {
            width: 26px;
            height: 26px;
        }
        #win-hangar .perk-row-actions .res-gfx-inline svg,
        #win-hangar .perk-row-actions .part-gfx-inline svg {
            width: 13px;
            height: 13px;
        }
        .hangar-ship-wrap {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .hangar-perk-slots {
            display: grid;
            grid-template-columns: repeat(2, 34px);
            grid-auto-rows: 34px;
            gap: 4px;
            justify-content: center;
            margin-bottom: 2px;
            min-height: 0;
        }
        .perk-slot {
            width: 34px;
            height: 34px;
            box-sizing: border-box;
            border: 1.5px dashed rgba(0, 232, 255, 0.35);
            border-radius: 4px;
            background: rgba(0, 8, 24, 0.65);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.45);
        }
        .perk-slot.empty::after {
            content: '+';
            font-size: 12px;
            color: rgba(0, 232, 255, 0.25);
            line-height: 1;
        }
        .perk-slot.filled {
            border-style: solid;
            background: rgba(0, 16, 32, 0.8);
            cursor: pointer;
        }
        .perk-slot-pvp.filled { border-color: rgba(255, 120, 60, 0.55); box-shadow: 0 0 6px rgba(255, 100, 40, 0.2); }
        .perk-slot-mining.filled { border-color: rgba(255, 200, 80, 0.55); box-shadow: 0 0 6px rgba(255, 180, 60, 0.2); }
        .perk-slot-rogue.filled { border-color: rgba(100, 200, 255, 0.5); box-shadow: 0 0 6px rgba(80, 180, 255, 0.18); }
        .perk-slot-universal.filled { border-color: rgba(68, 240, 193, 0.55); box-shadow: 0 0 6px rgba(68, 240, 193, 0.2); }
        .perk-thumb svg {
            display: block;
            width: 22px;
            height: 22px;
            overflow: visible;
            shape-rendering: geometricPrecision;
            filter: drop-shadow(0 0 3px rgba(0, 232, 255, .2));
        }
        .perk-thumb-sm svg { width: 18px; height: 18px; }
        .hangar-panels {
            flex: 1;
            min-height: 0;
            overflow: hidden;
            border-top: 1px solid rgba(0, 232, 255, 0.15);
            margin-top: 2px;
            touch-action: pan-y;
        }
        .hangar-panel-track {
            display: flex;
            width: 400%;
            height: 100%;
            transition: transform 0.28s ease-out;
        }
        .hangar-panel {
            width: 25%;
            flex-shrink: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            padding: 6px 2px 8px 0;
            box-sizing: border-box;
        }
        #hangar-panel-containers {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding-bottom: 4px;
        }
        #hangar-panel-containers .upgrade-section-head {
            flex-shrink: 0;
        }
        #container-panel-root {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .hangar-panel-dots {
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            gap: 8px;
            padding: 4px 0 2px;
        }
        .hangar-panel-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(0, 232, 255, 0.2);
            border: 1px solid rgba(0, 232, 255, 0.35);
        }
        .hangar-panel-dot.active {
            background: rgba(0, 232, 255, 0.85);
            box-shadow: 0 0 6px rgba(0, 232, 255, 0.6);
        }
        .hangar-swipe-hint {
            font-size: 6px;
            line-height: 1.35;
            text-align: center;
            color: #6a8498;
            letter-spacing: 0.08em;
            margin-top: 2px;
        }
        .collector-bot-offer-panel {
            text-align: center;
            overflow: hidden;
            background: linear-gradient(180deg, rgba(5, 14, 36, .96), rgba(2, 5, 18, .98));
        }
        .collector-bot-scene {
            position: relative;
            isolation: isolate;
            width: 100%;
            height: 112px;
            margin: 2px auto 8px;
            overflow: hidden;
            border: 1px solid rgba(0, 232, 255, .24);
            border-radius: 6px;
            background:
                radial-gradient(circle at 50% 50%, rgba(0, 91, 144, .18), transparent 52%),
                linear-gradient(180deg, #071630 0%, #020713 100%);
            box-shadow: inset 0 0 22px rgba(0, 0, 0, .62), 0 0 15px rgba(0, 127, 190, .12);
        }
        .collector-bot-offer-scene {
            width: min(100%, 330px);
            height: 146px;
            margin-bottom: 10px;
        }
        .collector-bot-stars,
        .collector-bot-stars::before,
        .collector-bot-stars::after {
            position: absolute;
            inset: -35%;
            pointer-events: none;
            content: '';
            background-repeat: repeat;
            transform: rotate(8deg);
        }
        .collector-bot-stars-far {
            opacity: .52;
            background-image: radial-gradient(circle, rgba(145, 222, 255, .85) 0 1px, transparent 1.3px);
            background-size: 43px 37px;
            animation: collector-stars-drift 18s linear infinite;
        }
        .collector-bot-stars-mid {
            opacity: .7;
            background-image: radial-gradient(circle, rgba(221, 248, 255, .95) 0 1px, transparent 1.5px);
            background-size: 67px 61px;
            animation: collector-stars-drift 10s linear infinite reverse;
        }
        .collector-bot-stars-near {
            opacity: .38;
            background-image: radial-gradient(circle, #fff 0 1.4px, transparent 1.8px);
            background-size: 101px 89px;
            animation: collector-stars-drift 6s linear infinite;
        }
        @keyframes collector-stars-drift {
            from { transform: translate3d(-3%, -4%, 0) rotate(8deg); }
            to { transform: translate3d(11%, 13%, 0) rotate(8deg); }
        }
        .collector-bot-scene::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(115deg, transparent 18%, rgba(0, 232, 255, .07) 50%, transparent 82%);
            animation: collector-space-sheen 7s ease-in-out infinite;
        }
        @keyframes collector-space-sheen {
            0%, 100% { opacity: .2; transform: translateX(-18%); }
            50% { opacity: .8; transform: translateX(18%); }
        }
        .collector-bot-scan {
            position: absolute;
            z-index: 3;
            left: 50%;
            top: 50%;
            width: 18px;
            height: 18px;
            border: 1px solid rgba(0, 232, 255, .72);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(.25);
            opacity: 0;
            pointer-events: none;
            box-shadow: 0 0 8px rgba(0, 232, 255, .75), inset 0 0 7px rgba(0, 232, 255, .35);
            animation: collector-scan-wave 5.2s ease-out infinite;
        }
        .collector-bot-scan-b {
            animation-delay: 2.6s;
            border-color: rgba(154, 117, 255, .72);
            box-shadow: 0 0 8px rgba(154, 117, 255, .75), inset 0 0 7px rgba(154, 117, 255, .35);
        }
        @keyframes collector-scan-wave {
            0%, 34% { opacity: 0; transform: translate(-50%, -50%) scale(.25); }
            39% { opacity: .9; }
            75% { opacity: 0; transform: translate(-50%, -50%) scale(7); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(7); }
        }
        .collector-bot-offer-image {
            position: absolute;
            z-index: 2;
            left: 50%;
            top: 50%;
            display: block;
            width: min(40%, 132px);
            height: 102px;
            margin: 0;
            object-fit: contain;
            transform: translate(-50%, -50%);
            filter: drop-shadow(0 0 12px rgba(0, 232, 255, .62));
            animation: collector-bot-hover 3.1s ease-in-out infinite;
        }
        @keyframes collector-bot-hover {
            0%, 100% { transform: translate(-50%, -50%) translateY(3px) rotate(-1deg); }
            50% { transform: translate(-50%, -50%) translateY(-5px) rotate(1deg); }
        }
        .collector-bot-offer-copy {
            color: #b0d4e8;
            font-family: 'Rajdhani', sans-serif;
            font-size: 10px;
            line-height: 1.45;
            text-align: left;
        }
        .collector-bot-offer-copy p { margin: 0 0 8px; }
        .collector-bot-offer-copy ul {
            margin: 0 0 8px;
            padding-left: 18px;
        }
        .collector-bot-offer-copy li { margin-bottom: 4px; }
        .collector-bot-offer-note {
            color: #d9edff;
            border-left: 2px solid rgba(0, 232, 255, .45);
            padding-left: 8px;
        }
        .collector-bot-offer-buy {
            width: 100%;
            margin-top: 6px;
        }
        .collector-bot-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            min-height: 240px;
            padding: 10px 8px 12px;
            border: 1px solid rgba(0, 232, 255, 0.35);
            border-radius: 6px;
            background: linear-gradient(145deg, rgba(8, 32, 52, .9), rgba(5, 10, 25, .96));
            box-shadow: inset 0 0 20px rgba(0, 232, 255, .06), 0 0 14px rgba(0, 232, 255, .08);
            color: #a9bfd5;
            text-align: center;
        }
        .collector-bot-card h3 { margin: 0; color: #a9f4ff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
        .collector-bot-card p { max-width: 290px; margin: 0; font-size: 9px; line-height: 1.45; }
        .collector-bot-scene .collector-bot-model {
            position: absolute;
            z-index: 2;
            left: 50%;
            top: 50%;
            width: min(38%, 118px);
            height: 82px;
            object-fit: contain;
            transform: translate(-50%, -50%);
            filter: drop-shadow(0 0 11px rgba(0, 232, 255, .58));
            animation: collector-bot-hover 3.1s ease-in-out infinite;
        }
        .collector-bot-action, .collector-bot-buy-inline { width: 100%; max-width: 290px; margin-top: auto; }
        .collector-bot-timer { color: #ffe77a; font-size: 28px; font-weight: 700; letter-spacing: .08em; text-shadow: 0 0 10px rgba(255, 212, 0, .5); }
        .collector-bot-reward-list { width: 100%; max-width: 290px; display: grid; gap: 4px; padding: 7px; border: 1px solid rgba(255, 212, 0, .35); border-radius: 4px; color: #e8f4ff; font-size: 10px; text-align: left; background: rgba(20, 22, 33, .65); }
        .collector-bot-reward-list > div { display: flex; align-items: center; gap: 5px; }
        .collector-bot-ready { border-color: rgba(255, 48, 48, .7); }
        .collector-bot-report { border-color: rgba(180, 108, 255, .55); }
        .collector-bot-reward-panel { border-color: rgba(255, 48, 48, .7); box-shadow: 0 0 28px rgba(255, 40, 48, .22); }
        .collector-bot-reward-status { margin: 0 0 10px; color: #ff5961; font-size: 10px; letter-spacing: .08em; animation: collectorMapAlert .55s ease-in-out infinite alternate; }
        .collector-bot-reward-claim { width: 100%; margin-top: 12px; }
        .container-scene {
            position: relative;
            height: 72px;
            margin: 4px 0 8px;
            border: 1px solid rgba(0, 232, 255, 0.22);
            border-radius: 4px;
            background: linear-gradient(180deg, rgba(0, 12, 28, 0.9) 0%, rgba(0, 6, 16, 0.95) 100%);
            overflow: hidden;
        }
        .container-belt {
            position: absolute;
            left: 0; right: 0;
            top: 50%;
            height: 10px;
            margin-top: -5px;
            background: repeating-linear-gradient(90deg, #2a3848 0 8px, #1a2430 8px 16px);
            animation: container-belt-move 1.2s linear infinite;
        }
        @keyframes container-belt-move {
            from { background-position: 0 0; }
            to { background-position: 16px 0; }
        }
        .container-scanner {
            position: absolute;
            top: 8px;
            width: 18px;
            height: 56px;
            border: 1px solid rgba(0, 232, 255, 0.35);
            background: rgba(0, 40, 60, 0.5);
        }
        .container-scanner.left { left: 8px; }
        .container-scanner.right { right: 8px; }
        .container-scanner::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 4px;
            width: 2px;
            height: 40px;
            margin-left: -1px;
            background: linear-gradient(180deg, transparent, rgba(255, 80, 120, 0.9));
            transform-origin: bottom center;
            animation: container-laser 1.4s ease-in-out infinite;
        }
        .container-scanner.right::after {
            background: linear-gradient(180deg, transparent, rgba(120, 200, 255, 0.9));
            animation-delay: 0.35s;
        }
        @keyframes container-laser {
            0%, 100% { transform: rotate(-12deg); opacity: 0.5; }
            50% { transform: rotate(12deg); opacity: 1; }
        }
        .container-scene.active .container-scanner::after {
            animation-duration: 0.55s;
        }
        .container-on-belt {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -58%);
            font-size: 28px;
            line-height: 1;
            filter: drop-shadow(0 0 6px rgba(255, 212, 0, 0.4));
            animation: container-pulse 1s ease-in-out infinite;
        }
        @keyframes container-pulse {
            0%, 100% { transform: translate(-50%, -58%) scale(1); }
            50% { transform: translate(-50%, -62%) scale(1.06); }
        }
        .container-timer {
            position: absolute;
            left: 0; right: 0;
            bottom: 4px;
            text-align: center;
            font-size: 5px;
            color: #8ec8e0;
            letter-spacing: 0.06em;
        }
        .container-list {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .container-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px;
            border: 1px solid rgba(0, 232, 255, 0.2);
            border-radius: 4px;
            background: rgba(0, 8, 24, 0.45);
            cursor: pointer;
        }
        .container-row.selected {
            border-color: rgba(255, 212, 0, 0.55);
            box-shadow: inset 0 0 8px rgba(255, 200, 0, 0.08);
        }
        .container-row-info { flex: 1; min-width: 0; }
        .container-row-name { font-size: 6px; color: #c8dce8; }
        .container-row-meta { font-size: var(--ui-fs-xs); color: var(--text-dim); margin-top: 2px; font-weight: 500; }
        .container-row-qty { font-size: 7px; color: #fff; min-width: 20px; text-align: right; }
        .container-actions { margin-top: 6px; text-align: center; }
        .container-actions .btn { width: 100%; max-width: 200px; }
        .container-loot-preview { font-size: var(--ui-fs-xs); color: var(--text-dim); text-align: center; margin-top: 4px; line-height: 1.5; font-weight: 500; }
        .container-slots {
            display: flex;
            gap: 6px;
            margin-bottom: 8px;
        }
        .container-slot-wrap {
            flex: 1;
            min-width: 0;
        }
        .container-slot-label {
            font-size: 4px;
            color: #6a8498;
            text-align: center;
            margin-bottom: 2px;
            letter-spacing: 0.06em;
        }
        .container-scene.compact {
            height: 58px;
            margin: 0;
        }
        .container-scene.compact .container-on-belt { font-size: 20px; }
        .container-scene.compact .container-scanner { height: 44px; top: 6px; }
        .container-scene.empty {
            display: flex;
            align-items: center;
            justify-content: center;
            border-style: dashed;
            opacity: 0.55;
        }
        .container-scene.empty span {
            font-size: 4px;
            color: #5a7080;
            letter-spacing: 0.08em;
        }
        .container-slot-claim {
            width: 100%;
            margin-top: 4px;
            font-size: 5px;
            padding: 4px 2px;
        }
        .container-vip-hint {
            font-size: var(--ui-fs-xs);
            color: var(--text-dim);
            text-align: center;
            margin-bottom: 6px;
            line-height: 1.45;
            font-weight: 500;
        }
        #container-reward-modal {
            z-index: 300000;
            padding: 12px;
        }
        #container-reward-modal .container-reward-window {
            width: min(88%, 320px);
            max-height: min(70vh, 400px);
            padding: 22px 18px 18px;
            text-align: center;
            border-color: rgba(255, 212, 0, .62);
            background: linear-gradient(155deg, rgba(13, 25, 49, .99), rgba(4, 8, 22, .99));
            box-shadow: 0 0 28px rgba(0, 232, 255, .2), 0 0 36px rgba(255, 212, 0, .12), inset 0 0 28px rgba(0, 232, 255, .05);
        }
        #container-reward-modal .container-reward-title {
            margin-bottom: 5px;
            color: #ffe47a;
        }
        .container-reward-subtitle {
            margin-bottom: 14px;
            color: #8edcf2;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .16em;
            text-shadow: 0 0 10px rgba(0, 232, 255, .28);
        }
        .container-reward-content {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            min-height: 54px;
            padding: 12px 8px;
            border: 1px solid rgba(0, 232, 255, .24);
            border-radius: 6px;
            background: linear-gradient(135deg, rgba(0, 31, 53, .72), rgba(18, 14, 35, .72));
            color: #fff2b0;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.45;
            text-shadow: 0 0 10px rgba(255, 212, 0, .24);
        }
        .container-reward-content .checkin-reward-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }
        .container-reward-content .ship-blueprint-reward {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 7px;
            max-width: 100%;
            text-align: center;
        }
        .container-reward-content .ship-blueprint-reward-image {
            display: block;
            width: min(144px, 100%);
            height: 92px;
            object-fit: contain;
            image-rendering: pixelated;
            filter: drop-shadow(0 0 12px rgba(39, 213, 255, .3));
        }
        .container-reward-content .ship-blueprint-reward-label {
            display: block;
            max-width: 100%;
            font-size: 13px;
            line-height: 1.4;
        }
        .container-reward-content .res-gfx-inline,
        .container-reward-content .part-gfx-inline,
        .container-reward-content .container-icon {
            width: 28px;
            height: 28px;
        }
        #container-reward-modal .container-reward-close {
            display: block;
            width: min(100%, 180px);
            min-height: 42px;
            margin: 16px auto 0;
            border-color: rgba(255, 212, 0, .72);
            color: #fff3b0;
            background: linear-gradient(180deg, rgba(100, 72, 12, .72), rgba(27, 20, 5, .98));
            box-shadow: 0 0 14px rgba(255, 212, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .14);
        }
        #promo-reward-modal {
            z-index: 300001;
            padding: 12px;
        }
        #promo-reward-modal .promo-reward-window {
            position: relative;
            width: min(88%, 340px);
            max-height: min(72vh, 440px);
            overflow: hidden;
            padding: 22px 18px 18px;
            border: 1px solid rgba(234, 194, 99, .76);
            border-radius: 2px;
            background: linear-gradient(145deg, rgba(15, 28, 43, .99), rgba(4, 10, 21, .99) 68%);
            box-shadow: 0 0 0 2px rgba(4, 9, 17, .92), 0 0 24px rgba(32, 173, 197, .17), inset 0 0 0 3px rgba(135, 197, 206, .07);
            text-align: center;
        }
        #promo-reward-modal .promo-reward-window::before {
            position: absolute;
            inset: 5px;
            border: 1px solid rgba(108, 192, 203, .24);
            background:
                linear-gradient(#e7c56f, #e7c56f) left top / 18px 1px no-repeat,
                linear-gradient(#e7c56f, #e7c56f) left top / 1px 12px no-repeat,
                linear-gradient(#e7c56f, #e7c56f) right bottom / 18px 1px no-repeat,
                linear-gradient(#e7c56f, #e7c56f) right bottom / 1px 12px no-repeat;
            content: '';
            pointer-events: none;
        }
        #promo-reward-modal .promo-reward-window > * {
            position: relative;
        }
        .promo-reward-kicker {
            margin-bottom: 10px;
            color: #82d7e1;
            font-family: 'Press Start 2P', monospace;
            font-size: 7px;
            line-height: 1.7;
            letter-spacing: .04em;
        }
        #promo-reward-modal .promo-reward-title {
            margin-bottom: 5px;
            color: #f4d47c;
            font-family: 'Orbitron', 'Rajdhani', sans-serif;
            font-size: 16px;
            line-height: 1.4;
        }
        .promo-reward-subtitle {
            margin-bottom: 12px;
            color: #a8c9d2;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .13em;
        }
        .promo-reward-content {
            max-height: min(42vh, 260px);
            overflow-y: auto;
            padding: 5px 10px;
            border: 1px solid rgba(92, 167, 184, .34);
            background: linear-gradient(135deg, rgba(13, 34, 47, .92), rgba(8, 18, 31, .96));
            text-align: left;
        }
        .promo-reward-list {
            display: flex;
            flex-direction: column;
            list-style: none;
        }
        .promo-reward-list li {
            display: flex;
            min-height: 40px;
            align-items: center;
            gap: 10px;
            padding: 5px 2px;
            border-bottom: 1px solid rgba(112, 158, 170, .16);
            color: #f0eee5;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.3;
        }
        .promo-reward-list li:last-child { border-bottom: 0; }
        .promo-reward-list .res-gfx-inline,
        .promo-reward-list .container-icon,
        .promo-reward-list .part-gfx-inline {
            width: 25px;
            height: 25px;
            flex: 0 0 25px;
        }
        .promo-reward-skin-tag {
            flex: 0 0 auto;
            padding: 4px 5px;
            border: 1px solid rgba(220, 87, 150, .58);
            color: #f2bbd8;
            font-family: 'Orbitron', 'Rajdhani', sans-serif;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .02em;
        }
        #promo-reward-modal .promo-reward-claim {
            display: block;
            width: min(100%, 210px);
            min-height: 46px;
            margin: 14px auto 0;
            border: 1px solid rgba(236, 199, 106, .82);
            border-radius: 2px;
            color: #fff1b6;
            background: linear-gradient(180deg, rgba(91, 66, 16, .94), rgba(30, 23, 9, .99));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 0 rgba(2, 6, 11, .82);
            font-size: 13px;
            letter-spacing: .08em;
        }
        #promo-reward-modal .promo-reward-claim:hover,
        #promo-reward-modal .promo-reward-claim:focus-visible {
            border-color: #ffe58b;
            color: #fff9df;
            box-shadow: 0 0 13px rgba(238, 193, 83, .22), inset 0 1px 0 rgba(255, 255, 255, .16);
            outline: none;
        }
        .res-node-spice { position: relative; max-width: 74px; }
        .spice-lb-dropdown {
            position: fixed;
            inset: 0;
            z-index: 3000;
            display: grid;
            place-items: center;
            box-sizing: border-box;
            padding: 6px;
            overflow: hidden;
            background: rgba(1, 5, 16, .9);
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
            color: #eaf4ff;
            font-family: var(--ui-font);
            overscroll-behavior: contain;
            touch-action: pan-y;
        }
        .spice-lb-dropdown.hidden { display: none; }
        .spice-lb-window {
            position: relative;
            box-sizing: border-box;
            width: min(1024px, calc(100vw - 12px), 61dvh);
            max-height: 92dvh;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            touch-action: pan-y;
            scrollbar-color: #247ab8 #04101e;
            scrollbar-width: thin;
        }
        .spice-lb-artboard {
            position: relative;
            width: 100%;
            aspect-ratio: 870 / 1808;
            overflow: hidden;
            container-type: inline-size;
            background-color: #020b18;
            background-image: url("../mines/TOP.png?v=20261007-top-model1");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            isolation: isolate;
        }
        .spice-lb-close {
            position: absolute;
            top: .15%;
            right: .6%;
            z-index: 8;
            display: grid;
            place-items: center;
            box-sizing: border-box;
            width: clamp(40px, 8cqw, 58px);
            height: clamp(40px, 8cqw, 58px);
            padding: 0;
            border: 0;
            color: #fff0f2;
            background: transparent;
            box-shadow: none;
            cursor: pointer;
        }
        .spice-lb-close::before {
            position: absolute;
            width: clamp(18px, 4cqw, 30px);
            aspect-ratio: 1;
            border: 1px solid rgba(255, 94, 119, .96);
            background: linear-gradient(180deg, rgba(111, 22, 43, .98), rgba(30, 7, 19, .99));
            box-shadow: inset 0 0 5px rgba(255, 64, 91, .36), 0 0 5px rgba(255, 44, 77, .42);
            clip-path: polygon(22% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 22%);
            content: "";
            transition: border-color .15s ease, filter .15s ease;
        }
        .spice-lb-close > span {
            position: relative;
            z-index: 1;
            display: grid;
            place-items: center;
            width: clamp(13px, 3.2cqw, 22px);
            height: clamp(13px, 3.2cqw, 22px);
            color: #fff0f2;
            font-family: var(--pixel-font, var(--ui-font));
            font-size: clamp(14px, 3.2cqw, 23px);
            font-weight: 900;
            line-height: .8;
            text-shadow: 0 1px 3px #21040d;
        }
        .spice-lb-close:hover::before,
        .spice-lb-close:focus-visible::before { border-color: #ffb5c1; filter: brightness(1.25); }
        .spice-lb-close:focus-visible { outline: 2px solid #7deeff; outline-offset: -3px; }
        .spice-lb-sr-only {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }
        .spice-lb-season-box,
        .spice-lb-fund,
        .spice-lb-help-toggle,
        .spice-lb-help,
        .spice-lb-podium,
        .spice-lb-podium-card,
        .spice-lb-my-position,
        .spice-lb-ranking,
        .spice-lb-rewards { position: absolute; z-index: 2; box-sizing: border-box; }
        .spice-lb-season-box {
            top: .2%;
            left: 55.5%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 42.5%;
            text-align: center;
            height: 4.2%;
            overflow: hidden;
            color: #d6efff;
            font-family: var(--pixel-font, var(--ui-font));
            line-height: 1;
            text-shadow: 0 1px 3px #001020, 0 0 8px rgba(38, 175, 255, .42);
        }
        .spice-lb-season-box > span { color: #51caff; font-size: clamp(7.5px, 1.75cqw, 17px); font-weight: 900; letter-spacing: .1em; }
        .spice-lb-season-box > strong { overflow: hidden; color: #f1f8ff; font-size: clamp(12px, 2.8cqw, 26px); font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
        .spice-lb-season-box > small { overflow: hidden; color: #b5d6eb; font-size: clamp(7.5px, 1.65cqw, 15px); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
        .spice-lb-fund {
            top: 6.25%;
            left: 18%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            width: 50%;
            height: 8.65%;
            padding: .7% 0 0;
            text-align: center;
            overflow: hidden;
            color: #f4f8ff;
            text-shadow: 0 1px 3px #001020, 0 0 6px #001020, 0 0 10px rgba(0, 8, 24, .95);
        }
        .spice-lb-fund-label { color: #8fe4ff; font-family: var(--pixel-font, var(--ui-font)); font-size: clamp(9.5px, 2.35cqw, 22px); font-weight: 900; letter-spacing: .08em; line-height: 1.08; text-align: center; }
        .spice-lb-fund-amount { display: flex; align-items: center; justify-content: center; gap: .5%; width: max-content; max-width: 100%; margin: .35% 0; color: #fff0ad; font-size: clamp(16px, 3.8cqw, 37px); font-weight: 900; letter-spacing: .04em; line-height: 1; }
        .spice-lb-fund-amount strong { flex: 0 0 auto; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .spice-lb-gram-icon { display: block; flex: 0 0 auto; width: clamp(20px, 4.7cqw, 44px); height: clamp(20px, 4.7cqw, 44px); object-fit: contain; filter: drop-shadow(0 0 5px rgba(56, 174, 255, .52)); }
        .spice-lb-fund-source { max-width: 96%; margin: .12% 0 0; color: #f4f8ff; font-size: clamp(9.5px, 1.7cqw, 15px); font-weight: 800; letter-spacing: .025em; line-height: 1.15; text-align: center; }
        .spice-lb-help-toggle {
            top: 12.65%;
            left: 69%;
            z-index: 4;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 29%;
            height: 1.8%;
            padding: 0;
            border: 0;
            color: #fff0ba;
            background: transparent;
            box-shadow: none;
            font-family: var(--pixel-font, var(--ui-font));
            font-size: clamp(6px, 1.2cqw, 11px);
            font-weight: 900;
            letter-spacing: .045em;
            line-height: 1.1;
            text-align: right;
            text-shadow: 0 1px 3px #001020, 0 0 6px #001020, 0 0 10px rgba(0, 8, 24, .95);
            cursor: pointer;
        }
        .spice-lb-help-toggle:hover,
        .spice-lb-help-toggle:focus-visible { color: #fff; outline: 1px dashed rgba(255, 235, 151, .55); outline-offset: 2px; }
        .spice-lb-help {
            top: 9.4%;
            left: 2.5%;
            width: 95%;
            max-height: 5%;
            overflow: auto;
            padding: 0;
            border: 0;
            color: #f0f7ff;
            background: transparent;
            box-shadow: none;
            font-size: clamp(7px, 1.2cqw, 11px);
            font-weight: 750;
            letter-spacing: .02em;
            line-height: 1.3;
            text-shadow: 0 1px 3px #001020, 0 0 6px #001020, 0 0 10px rgba(0, 8, 24, .95);
        }
        .spice-lb-help.hidden { display: none !important; }
        .spice-lb-podium { inset: 0; z-index: 1; pointer-events: none; }
        .spice-lb-podium-card {
            display: block;
            overflow: hidden;
            padding: 0;
            pointer-events: auto;
        }
        .spice-lb-podium-card[data-place="2"] { top: 16.35%; left: 1.45%; width: 31%; height: 18.9%; }
        .spice-lb-podium-card[data-place="1"] { top: 14.75%; left: 33.65%; width: 32.7%; height: 20.45%; }
        .spice-lb-podium-card[data-place="3"] { top: 16.35%; left: 67.55%; width: 31%; height: 18.9%; }
        .spice-lb-podium-card.me { filter: drop-shadow(0 0 8px rgba(89, 228, 255, .3)); }
        .spice-lb-ship-slot { position: absolute; top: 3%; left: 0; display: grid; place-items: end center; justify-items: center; width: 100%; height: 43%; overflow: hidden; pointer-events: none; }
        .spice-lb-podium-card[data-place="2"] .spice-lb-ship-slot { transform: translateX(.85cqw); }
        .spice-lb-podium-card[data-place="3"] .spice-lb-ship-slot { transform: translateX(-1.25cqw); }
        .spice-lb-ship-slot .ship-sprite-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
        .spice-lb-podium-info { position: absolute; top: 62%; right: 2%; bottom: 2%; left: 14%; z-index: 2; display: flex; flex-direction: row; align-items: center; gap: 2.5%; min-width: 0; text-align: left; }
        .spice-lb-podium-avatar { display: grid; flex: 0 0 24%; place-items: center; width: 24%; max-width: 24%; aspect-ratio: 1; margin-top: 0; overflow: hidden; border: 1px solid rgba(107, 218, 255, .75); border-radius: 50%; color: #effaff; background: radial-gradient(circle at 35% 25%, rgba(38, 137, 190, .65), rgba(5, 19, 39, .96) 72%); box-shadow: 0 0 5px rgba(36, 185, 255, .28); font-family: var(--pixel-font, var(--ui-font)); font-size: clamp(7px, 1.35cqw, 13px); font-weight: 900; line-height: 1; }
        .spice-lb-podium-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
        .spice-lb-podium-details { display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; min-width: 0; line-height: 1; text-align: left; }
        .spice-lb-podium-name { display: block; width: 100%; max-width: 100%; overflow: hidden; color: #eff8ff; font-size: clamp(8px, 2cqw, 18px); font-weight: 900; letter-spacing: .025em; line-height: 1; text-align: left; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 4px #000; }
        .spice-lb-podium-badges { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 4px; min-width: 0; margin-top: 0; line-height: 1; }
        .spice-lb-level-badge { padding: 0; border: 0; color: #d5efff; background: transparent; font-size: clamp(10px, 1.55cqw, 15px); font-weight: 850; letter-spacing: .04em; line-height: 1; white-space: nowrap; text-shadow: 0 1px 3px #001020, 0 0 5px #001020; }
        .spice-lb-vip { padding: 0; border: 0; color: #a6eaff; background: transparent; font-size: clamp(10px, 1.5cqw, 14px); font-weight: 900; letter-spacing: .05em; line-height: 1; white-space: nowrap; text-shadow: 0 1px 3px #001020, 0 0 5px #001020; }
        .spice-lb-vip-3 { color: #ff9a8f; }
        .spice-lb-vip-4 { color: #dcaaff; }
        .spice-lb-vip-5 { color: #ffe77a; }
        .spice-lb-fund-share { display: inline-flex; flex: 0 0 auto; align-items: center; color: #b9ffd2; font-size: clamp(8px, 1.35cqw, 12px); font-weight: 950; letter-spacing: -.015em; line-height: 1; white-space: nowrap; text-shadow: 0 1px 3px #001020, 0 0 5px rgba(0, 10, 20, .95); }
        .spice-lb-fund-share strong { color: #d8ffe5; font-size: inherit; font-weight: 950; }
        .spice-lb-fund-share.is-settled,
        .spice-lb-fund-share.is-settled strong { color: #ffe892; }
        .spice-lb-podium-score .spice-lb-fund-share { font-size: clamp(9px, 2.4cqw, 18px); }
        .spice-lb-podium-score { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 3px; min-height: 1em; margin-top: 0; color: #fff0a6; font-size: clamp(10px, 2.05cqw, 19px); font-weight: 900; letter-spacing: .045em; line-height: 1; white-space: nowrap; text-shadow: 0 1px 4px #000; }
        .spice-lb-podium-spice { display: inline-flex; flex: 0 0 auto; align-items: center; white-space: nowrap; }
        .spice-lb-podium-score .res-gfx-inline { width: clamp(10px, 1.9cqw, 19px); height: clamp(10px, 1.9cqw, 19px); }
        .spice-lb-empty-place { position: absolute; top: 32%; left: 0; width: 100%; color: rgba(170, 208, 232, .75); font-size: clamp(7px, 1.2cqw, 11px); font-weight: 800; text-align: center; }
        .spice-lb-my-position {
            top: 35.95%;
            left: 2.8%;
            display: grid;
            grid-template-columns: 7% 6.5% 28% 35% minmax(0, 1fr);
            align-items: center;
            gap: .5%;
            width: 94.3%;
            height: 7.45%;
            padding: .5% 1%;
            color: #edf8ff;
        }
        .spice-lb-my-rank { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
        .spice-lb-my-rank span { color: #65d9ff; font-size: clamp(8px, 1.2cqw, 12px); font-weight: 900; letter-spacing: .05em; line-height: 1.2; }
        .spice-lb-my-rank strong { color: #f4fbff; font-family: var(--pixel-font, var(--ui-font)); font-size: clamp(14px, 2.8cqw, 28px); line-height: 1; text-shadow: 0 0 7px rgba(73, 207, 255, .42); }
        .spice-lb-my-faction { display: grid; place-items: center; }
        .spice-lb-my-faction .rank-badge-inline { width: 88%; height: auto; max-height: 7cqw; }
        .spice-lb-my-player { min-width: 0; }
.spice-lb-my-player > strong { display: block; overflow: hidden; color: #f1f8ff; font-size: clamp(6px, calc(30cqw / var(--spice-lb-name-length)), 17px); font-weight: 900; letter-spacing: .025em; text-overflow: clip; white-space: nowrap; text-shadow: 0 1px 3px #001020; }
        .spice-lb-my-player .spice-lb-podium-badges { justify-content: flex-start; gap: 3px; width: 100%; overflow: hidden; margin-top: 2px; }
        .spice-lb-my-player .spice-lb-vip { font-size: clamp(10px, 1.8cqw, 17px); }
        .spice-lb-online { position: absolute; top: 5.15%; right: 7.1%; z-index: 9; display: flex; align-items: center; gap: 3px; width: max-content; max-width: 30%; margin: 0; color: #9df4c1; font-size: clamp(8px, 1.8cqw, 13px); font-weight: 900; letter-spacing: .04em; line-height: 1; white-space: nowrap; text-shadow: 0 1px 3px #001020, 0 0 5px rgba(0, 8, 24, .95); }
        .spice-lb-online > i { flex: 0 0 auto; width: .72em; height: .72em; border-radius: 50%; background: #75f5a8; box-shadow: 0 0 4px rgba(117, 245, 168, .82); }
        .spice-lb-online > strong { color: #edfff4; font-weight: 950; font-variant-numeric: tabular-nums; }
        .spice-lb-level-progress { min-width: 0; padding: 1px 3px; color: #e6f5ff; font-size: clamp(9px, 1.55cqw, 15px); font-weight: 850; letter-spacing: .045em; line-height: 1.12; text-shadow: 0 1px 3px #001020; }
        .spice-lb-level-progress-label { display: block; max-width: 100%; overflow: hidden; font-size: clamp(5.5px, 1.55cqw, 13px); text-overflow: clip; white-space: nowrap; line-height: 1.08; }
        .spice-lb-level-progress.is-eligible .spice-lb-level-progress-label { display: inline-block; box-sizing: border-box; max-width: 100%; padding: 1px 4px; border: 1px solid rgba(80, 222, 255, .9); color: #d7fbff; background: linear-gradient(180deg, rgba(0, 69, 96, .96), rgba(0, 29, 52, .98)); font-weight: 950; letter-spacing: .055em; text-align: center; clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 35%, 100% 100%, 3px 100%, 0 65%); }
        .spice-lb-progress { height: 10px; margin-top: 4px; overflow: hidden; border: 1px solid rgba(48, 154, 207, .75); background: rgba(2, 14, 30, .92); }
        .spice-lb-progress i { display: block; height: 100%; background: linear-gradient(90deg, #12b4df, #ffe052); box-shadow: 0 0 7px rgba(49, 215, 255, .48); }
        .spice-lb-level-progress.is-eligible .spice-lb-progress { border-color: rgba(80, 222, 255, .95); }
        .spice-lb-level-progress.is-eligible .spice-lb-progress i { background: linear-gradient(90deg, #12b4df, #6ceec4); }
        .spice-lb-my-score { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; min-width: 0; color: #fff0ad; font-size: clamp(11px, 2.05cqw, 20px); font-weight: 900; letter-spacing: .035em; line-height: 1.05; white-space: nowrap; text-shadow: 0 1px 4px #000; }
        .spice-lb-my-spice { display: flex; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0; }
        .spice-lb-my-score .res-gfx-inline { flex: 0 0 auto; width: clamp(14px, 2.7cqw, 27px); height: clamp(14px, 2.7cqw, 27px); }
        .spice-lb-ranking { top: 44.15%; left: 2.1%; width: 95.8%; height: 29.6%; overflow: hidden; }
        .spice-lb-rows {
            position: absolute;
            inset: 0;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
            scrollbar-width: thin;
            scrollbar-color: rgba(73, 207, 255, .9) rgba(2, 14, 30, .58);
        }
        .spice-lb-rows::-webkit-scrollbar { width: 4px; }
        .spice-lb-rows::-webkit-scrollbar-track { background: rgba(2, 14, 30, .58); }
        .spice-lb-rows::-webkit-scrollbar-thumb {
            border: 1px solid rgba(3, 16, 34, .82);
            background: linear-gradient(180deg, #76ecff, #168edb);
            box-shadow: 0 0 5px rgba(57, 213, 255, .55);
        }
        .spice-lb-rows::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #b3f5ff, #35b5ff); }
        .spice-lb-rows:focus-visible { outline: 1px solid rgba(73, 207, 255, .9); outline-offset: -1px; }
        .spice-lb-group-heading {
            display: flex;
            align-items: center;
            box-sizing: border-box;
            width: 100%;
            height: 10%;
            min-height: 10%;
            padding: 0 2.5%;
            overflow: hidden;
            color: #8deaff;
            background: linear-gradient(90deg, rgba(0, 70, 102, .58), rgba(2, 16, 33, .42));
            border-left: 2px solid rgba(83, 222, 255, .95);
            text-shadow: 0 1px 3px #001020;
        }
        .spice-lb-group-heading.is-below-threshold {
            color: #c4dcf2;
            background: linear-gradient(90deg, rgba(23, 52, 78, .62), rgba(2, 16, 33, .42));
            border-left-color: rgba(137, 179, 220, .9);
        }
        .spice-lb-group-heading > span {
            overflow: hidden;
            font-family: var(--pixel-font, var(--ui-font));
            font-size: clamp(7px, 1.45cqw, 13px);
            font-weight: 900;
            letter-spacing: .055em;
            line-height: 1;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .spice-lb-row {
            display: grid;
            grid-template-columns: 6% 6% 40% minmax(0, 1fr) 10% 13%;
            align-items: center;
            gap: .4%;
            box-sizing: border-box;
            width: 100%;
            height: 10%;
            min-height: 10%;
            padding: 0 1% 0 1.2%;
            overflow: hidden;
            color: #e4f3ff;
        }
        .spice-lb-row.me { background: linear-gradient(90deg, rgba(0, 213, 255, .16), rgba(0, 145, 222, .06)); box-shadow: inset 2px 0 #59e7ff; }
        .spice-lb-row-rank,
        .spice-lb-row-faction,
        .spice-lb-row-player,
        .spice-lb-row-score,
        .spice-lb-row-level { box-sizing: border-box; height: 72%; background-color: rgba(1, 9, 21, .34); }
        .spice-lb-row-rank { display: grid; place-items: center; overflow: hidden; color: #f1f8ff; font-size: clamp(11px, 1.9cqw, 16px); font-weight: 900; letter-spacing: .04em; text-shadow: 0 1px 3px #000; white-space: nowrap; }
        .spice-lb-row-faction { display: grid; place-items: center; min-width: 0; }
        .spice-lb-row-faction .rank-badge-inline { width: 90%; height: auto; max-height: 4.4cqw; }
        .spice-lb-row-player { position: relative; left: 3px; display: flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; white-space: nowrap; }
        .spice-lb-row-player > strong { flex: 0 1 auto; min-width: 0; max-width: 100%; max-height: 100%; overflow: hidden; color: #f5f9ff; font-size: clamp(5.5px, calc(48cqw / var(--spice-lb-name-length)), 14px); font-weight: 850; letter-spacing: .015em; line-height: 1; overflow-wrap: normal; text-overflow: clip; white-space: nowrap; text-shadow: 0 1px 3px #000; }
        .spice-lb-row-player .spice-lb-vip { flex: 0 0 auto; font-size: clamp(9px, 1.3cqw, 12px); }
        .spice-lb-row-resource-gap { display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; min-width: 0; }
        .spice-lb-row-resource-gap .spice-lb-fund-share { font-size: clamp(13px, 3.2cqw, 20px); transform: translateX(1px); }
        .spice-lb-row-score { display: grid; place-items: center; overflow: hidden; color: #fff1ac; font-size: clamp(9.5px, 1.6cqw, 14px); font-weight: 950; letter-spacing: .035em; text-align: center; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px #000; }
        .spice-lb-row-level { display: grid; place-items: center; overflow: hidden; color: #c4e8ff; font-size: clamp(9.5px, 1.5cqw, 13px); font-weight: 850; letter-spacing: .035em; text-align: center; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px #000; }
        .spice-lb-list-empty { display: grid; width: 100%; height: 100%; place-items: center; color: #c0e4ff; font-size: clamp(7px, 1.3cqw, 12px); text-align: center; text-shadow: 0 1px 4px #000; }
        .spice-lb-rewards {
            top: 74.3%;
            left: 2.5%;
            display: flex;
            flex-direction: column;
            width: 95%;
            height: 23.25%;
            overflow: hidden;
            padding: 1.1% 2.3%;
            color: #e8f4ff;
            background: linear-gradient(180deg, rgba(1, 9, 23, .48), rgba(1, 9, 23, .68));
            text-shadow: 0 1px 3px #001020, 0 0 7px rgba(0, 8, 24, .92);
        }
        .spice-lb-rewards h3 { flex: 0 0 auto; margin: 0; color: #ffe77a; font-family: var(--pixel-font, var(--ui-font)); font-size: clamp(11px, 2cqw, 20px); font-weight: 900; letter-spacing: .09em; line-height: 1.12; text-shadow: 0 1px 3px #001020, 0 0 7px rgba(0, 8, 24, .95); }
        .spice-lb-reward-title { flex: 0 0 auto; margin: .4% 0 .75%; color: #f2f8ff; font-size: clamp(9.5px, 1.45cqw, 14px); font-weight: 750; letter-spacing: .045em; line-height: 1.18; }
        .spice-lb-prize-list { display: grid; flex: 1 1 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); grid-auto-flow: column; gap: 0 1.5%; min-height: 0; }
        .spice-lb-prize-row { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1.2%; align-items: start; min-width: 0; min-height: 0; overflow: hidden; padding: 0; }
        .spice-lb-prize-rank { align-self: start; padding-top: .08em; color: #ffe28a; font-size: clamp(11.5px, 1.65cqw, 15px); font-weight: 950; letter-spacing: .035em; white-space: nowrap; text-shadow: 0 1px 3px #001020; }
        .spice-lb-prize-val { align-self: start; min-width: 0; color: #f4f8ff; font-size: clamp(11.5px, 1.65cqw, 15px); font-weight: 750; letter-spacing: .025em; line-height: 1.05; text-shadow: 0 1px 3px #001020; }
        .spice-lb-prize-hint { flex: 0 0 auto; margin-top: .25%; color: #c3ffd9; font-size: clamp(11.5px, 1.65cqw, 15px); font-weight: 850; letter-spacing: .035em; line-height: 1.1; text-shadow: 0 1px 3px #001020; }
        @media (max-width: 600px) {
            .spice-lb-dropdown { padding: 4px; }
            .spice-lb-window { width: min(1024px, calc(100vw - 8px), 61dvh); max-height: 94dvh; }
            .spice-lb-podium-details { gap: 1px; }
            .spice-lb-podium-score { row-gap: 1px; }
            .spice-lb-row { height: 12%; min-height: 12%; }
            .spice-lb-prize-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 0 1.5%; }
            .spice-lb-prize-row { grid-template-columns: max-content minmax(0, 1fr); gap: 1.2%; padding: 0; }
        }
        @media (max-width: 350px) {
            .spice-lb-season-box { left: 55%; width: 43%; }
            .spice-lb-help-toggle { left: 69%; width: 29%; }
            .spice-lb-fund { left: 16%; width: 53%; }
            .spice-lb-podium-details { gap: 0; }
            .spice-lb-podium-score { row-gap: 0; }
            .spice-lb-my-position { grid-template-columns: 7% 6% 28% 35% minmax(0, 1fr); gap: .3%; }
            .spice-lb-my-score { gap: 2px; }
            .spice-lb-row { grid-template-columns: 6% 6% 40% minmax(0, 1fr) 10% 13%; gap: .25%; }
            .spice-lb-row-level { font-size: clamp(9.5px, 1.5cqw, 13px); }
        }
        .spice-lb-my-position.is-unranked { grid-template-columns: minmax(0, 1fr); justify-items: center; }
        .spice-lb-my-position.is-unranked .spice-lb-level-progress { width: min(100%, 42cqw); text-align: center; }
        .perk-row {
            display: flex;
            align-items: stretch;
            gap: 9px;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(0, 232, 255, 0.28);
            border-radius: 6px;
            padding: 8px;
            margin: 6px 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 30%), linear-gradient(135deg, rgba(7, 29, 56, 0.9), rgba(0, 8, 24, 0.62));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.34), 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 9px rgba(0, 232, 255, 0.06);
            cursor: pointer;
            transition: border-color .18s, box-shadow .18s;
        }
        .perk-row > * { position: relative; z-index: 1; }
        .perk-row:hover {
            border-color: rgba(0, 232, 255, .62);
            box-shadow: 0 0 14px rgba(0, 232, 255, .08);
        }
        .perk-row:active {
            border-color: rgba(0, 232, 255, .72);
            box-shadow: inset 0 0 10px rgba(0, 232, 255, .08), 0 0 12px rgba(0, 232, 255, .12);
        }
        .perk-row.equipped {
            border-color: rgba(255, 212, 0, 0.55);
            box-shadow: inset 0 0 12px rgba(255, 200, 0, 0.07), 0 0 12px rgba(255, 212, 0, .05);
        }
        .perk-row-thumb {
            flex-shrink: 0;
            width: 42px;
            height: 42px;
            border-radius: 4px;
            border: 1px solid rgba(0, 232, 255, 0.25);
            background: rgba(0, 12, 28, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .perk-row-body {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .perk-row-name {
            font-size: 9px; line-height: 1.3;
            font-weight: 600;
            color: #e8f4ff;
            letter-spacing: 0.04em;
        }
        .perk-row-desc {
            font-size: 7px;
            color: #8eb0c4;
            line-height: 1.5;
        }
        .perk-row-meta {
            font-size: 6px; line-height: 1.35;
            color: #6a90a8;
        }
        .perk-row-cost {
            color: #ffcf5a;
            font-size: 7px;
            line-height: 1.3;
        }
        .perk-row-meta .perk-tag-pvp { color: #ff9955; }
        .perk-row-meta .perk-tag-mining { color: #ffcc55; }
        .perk-row-meta .perk-tag-rogue { color: #66bbff; }
        .perk-row-tags { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 3px; }
        .perk-tree-open {
            align-self: flex-start;
            margin-top: 3px;
            padding: 4px 7px;
            border: 1px solid rgba(0, 232, 255, .28);
            border-radius: 3px;
            background: rgba(0, 30, 50, .48);
            color: #8feaff;
            font: inherit;
            font-size: 7px;
            letter-spacing: .08em;
            cursor: pointer;
        }
        .perk-tree-open:hover { border-color: #00e8ff; background: rgba(0, 75, 105, .35); }
        .perk-paths { margin-top: 6px; }
        .perk-paths-title { display: block; color: #718aa4; font-size: 7px; line-height: 1.35; letter-spacing: .08em; margin-bottom: 4px; }
        .perk-path-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
        .perk-path-option { min-width: 0; padding: 4px 5px; border: 1px solid rgba(0, 232, 255, .2); border-radius: 3px; background: rgba(5, 17, 36, .7); color: #91aec9; font: inherit; text-align: left; cursor: pointer; }
        .perk-path-option b, .perk-path-option small { display: block; }
        .perk-path-option b { color: #d9ecff; font-size: 8px; line-height: 1.3; }
        .perk-path-option small { color: #6f8da8; font-size: 7px; line-height: 1.4; margin-top: 2px; }
        .perk-path-option:not(:disabled):hover { border-color: #00e8ff; }
        .perk-path-option.selected { border-color: #ff54d9; background: rgba(92, 15, 78, .35); }
        .perk-path-option.selected b { color: #ffb2ef; }
        .perk-path-option:disabled { cursor: default; opacity: .88; }
        .perk-tag-chip, .perk-fit-plus, .perk-fit-minus, .perk-fit-neutral { padding: 2px 4px; border: 1px solid rgba(0, 232, 255, .25); border-radius: 2px; font-size: 7px; line-height: 1.25; letter-spacing: .06em; }
        .perk-tag-chip { color: #8ceeff; background: rgba(0, 30, 45, .35); }
        .perk-fit-plus { color: #72f0b0; border-color: rgba(99, 240, 188, .45); background: rgba(39, 120, 78, .16); }
        .perk-fit-minus { color: #ff9a8a; border-color: rgba(255, 120, 90, .45); background: rgba(120, 39, 34, .16); }
        .perk-fit-neutral { color: #93a9bd; border-color: rgba(147, 169, 189, .24); }
        .perk-loadout-panel { padding: 7px; margin: 4px 0 7px; border: 1px solid rgba(255, 43, 214, .28); border-radius: 5px; background: linear-gradient(135deg, rgba(36, 9, 43, .65), rgba(3, 18, 35, .72)); }
        .perk-loadout-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; color: #cfe9f5; font-size: 8px; line-height: 1.45; }
        .perk-loadout-head b, .perk-active-effects b { color: #00e8ff; letter-spacing: .08em; }
        .perk-loadout-head small { display: block; color: #849db3; font-size: 7px; line-height: 1.35; margin-top: 2px; }
        .perk-loadout-fit { color: #63f0bc; white-space: nowrap; }
        .perk-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 6px 0; }
        .perk-preset-card { min-width: 0; padding: 6px; border: 1px solid rgba(0, 232, 255, .28); border-radius: 4px; background: rgba(5, 17, 36, .72); }
        .perk-preset-card.active { border-color: #ff54d9; background: rgba(86, 17, 79, .38); box-shadow: 0 0 10px rgba(255, 84, 217, .18); }
        .perk-preset-card.locked { border-color: rgba(255, 207, 90, .4); background: rgba(50, 35, 8, .45); }
        .perk-preset-title { display: flex; justify-content: space-between; gap: 4px; color: #d9ecff; font-size: 8px; letter-spacing: .06em; }
        .perk-preset-title b { color: #72f0b0; font-size: 7px; }
        .perk-preset-lock, .perk-preset-card > small { display: block; margin-top: 5px; color: #ffcf5a; font-size: 7px; line-height: 1.3; }
        .perk-preset-card > small { color: #9eb6c5; }
        .perk-preset-name { display: block; width: 100%; box-sizing: border-box; margin: 5px 0 4px; padding: 4px; border: 1px solid rgba(0, 232, 255, .25); border-radius: 3px; background: rgba(0, 8, 24, .65); color: #f1fbff; font: inherit; font-size: 8px; text-transform: uppercase; }
        .perk-preset-apply, .perk-preset-buy { width: 100%; padding: 4px; border: 1px solid rgba(0, 232, 255, .35); border-radius: 3px; background: rgba(0, 45, 70, .55); color: #9feeff; font: inherit; font-size: 7px; cursor: pointer; }
        .perk-preset-buy { margin-top: 7px; border-color: rgba(255, 207, 90, .65); color: #ffe27d; }
        .perk-preset-perks { display: grid; gap: 3px; margin-top: 5px; }
        .perk-preset-perk { display: flex; align-items: center; gap: 4px; min-width: 0; color: #d9ecff; font-size: 7px; }
        .perk-preset-perk b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .perk-preset-perk.empty { color: #71899c; border: 1px dashed rgba(113, 137, 156, .3); padding: 3px; }
        .perk-preset-synergy { min-height: 20px; margin-top: 5px; color: #72f0b0; font-size: 7px; line-height: 1.3; }
        .perk-preset-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 0; }
        .perk-preset-button { padding: 5px; text-align: left; border: 1px solid rgba(0, 232, 255, .2); border-radius: 3px; background: rgba(5, 17, 36, .7); color: #91aec9; font: inherit; cursor: pointer; }
        .perk-preset-button b, .perk-preset-button small { display: block; }
        .perk-preset-button b { color: #d9ecff; font-size: 7px; }
        .perk-preset-button small { color: #6f8da8; font-size: 6px; margin-top: 2px; }
        .perk-preset-button.active { border-color: #ff54d9; background: rgba(86, 17, 79, .55); }
        .perk-preset-button.active b { color: #ffb2ef; }
        .perk-active-effects { display: block; color: #94abc0; font-size: 7px; line-height: 1.45; }
        .perk-active-effects span { display: block; margin-top: 3px; }
        .perk-active-effects span:last-child { color: #ffe27d; }
        .perk-row-actions {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
            justify-content: center;
        }
        .perk-row-actions .btn-sm {
            font-size: var(--ui-fs-sm);
            padding: 5px 7px;
            white-space: nowrap;
        }
        .perk-row-actions .btn-equip {
            border-color: rgba(255, 212, 0, 0.45);
            color: #ffe880;
        }
        .perk-row-actions .btn-equip.active {
            background: rgba(60, 48, 8, 0.65);
            border-color: rgba(255, 212, 0, 0.7);
        }
        .perk-tree-overlay {
            position: fixed;
            inset: 0;
            z-index: 210000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px;
            background: radial-gradient(ellipse at 50% 35%, rgba(0, 232, 255, .08), rgba(0, 0, 0, .88) 68%);
        }
        .perk-tree-overlay.hidden { display: none; }
        .perk-tree-modal {
            position: relative;
            width: min(100%, 620px);
            max-height: min(90vh, 720px);
            overflow-y: auto;
            padding: 13px 12px 12px;
            border: 2px solid rgba(0, 232, 255, .58);
            border-radius: 9px;
            background: linear-gradient(165deg, rgba(10, 27, 53, .99), rgba(3, 8, 24, .99));
            box-shadow: 0 0 30px rgba(0, 232, 255, .2), 0 0 60px rgba(255, 43, 214, .1), inset 0 0 30px rgba(0, 232, 255, .05);
            animation: slideUp .24s ease-out;
        }
        .perk-tree-modal::before {
            content: '';
            position: absolute;
            top: 0; left: 18px; right: 18px;
            height: 3px;
            background: linear-gradient(90deg, transparent, #00e8ff, #ff2bd6, transparent);
            opacity: .9;
        }
        .perk-tree-modal .help-close { top: 10px; right: 10px; }
        .perk-tree-synergy-button {
            position: relative;
            z-index: 4;
            margin: 0 28px 8px 0;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-height: 28px;
            padding: 5px 8px;
            border: 1px solid rgba(255, 212, 90, .58);
            border-radius: 4px;
            background: rgba(39, 27, 5, .82);
            color: #ffe27d;
            font: inherit;
            font-size: 8px;
            letter-spacing: .06em;
            cursor: pointer;
            box-shadow: 0 0 8px rgba(255, 212, 90, .12), inset 0 0 8px rgba(255, 212, 90, .06);
        }
        .perk-tree-synergy-button:hover,
        .perk-tree-synergy-button:focus-visible,
        .perk-tree-synergy-button.active {
            border-color: #ffe27d;
            color: #fff3b3;
            outline: none;
            box-shadow: 0 0 10px rgba(255, 212, 90, .42), inset 0 0 10px rgba(255, 212, 90, .12);
        }
        .perk-tree-synergy-panel {
            position: relative;
            z-index: 3;
            margin: 0 34px 9px 0;
            padding: 8px;
            border: 1px solid rgba(255, 212, 90, .42);
            border-radius: 5px;
            background: rgba(21, 17, 7, .94);
            color: #d7e9ef;
            box-shadow: 0 0 12px rgba(255, 212, 90, .1), inset 0 0 12px rgba(255, 212, 90, .04);
        }
        .perk-tree-synergy-panel.hidden { display: none; }
        .perk-tree-synergy-title,
        .perk-tree-synergy-panel > b { display: block; color: #ffe27d; font-size: 9px; letter-spacing: .08em; }
        .perk-tree-synergy-panel > small { display: block; margin-top: 4px; color: #a8bdc9; font-size: 8px; line-height: 1.35; }
        .perk-tree-synergy-caption { margin-top: 3px; color: #8da5b2; font-size: 7px; }
        .perk-tree-synergy-table { margin-top: 7px; border: 1px solid rgba(140, 158, 169, .24); }
        .perk-tree-synergy-table-head,
        .perk-tree-synergy-table-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) 116px; gap: 6px; align-items: center; padding: 5px 6px; }
        .perk-tree-synergy-table-head { color: #ffe27d; background: rgba(255, 212, 90, .08); font-size: 7px; letter-spacing: .05em; }
        .perk-tree-synergy-table-row { border-top: 1px solid rgba(140, 158, 169, .14); color: #d7e9ef; font-size: 7px; }
        .perk-tree-synergy-table-row.current { background: rgba(0, 232, 255, .05); }
        .perk-tree-synergy-table-row.active { border-left: 2px solid #63f0bc; background: rgba(99, 240, 188, .08); }
        .perk-tree-synergy-table-row strong,
        .perk-tree-synergy-table-row small { display: block; }
        .perk-tree-synergy-table-row strong { color: #e8fbff; font-size: 8px; line-height: 1.25; }
        .perk-tree-synergy-table-row small { margin-top: 2px; color: #9eb6c5; font-size: 7px; line-height: 1.2; }
        .perk-tree-synergy-table-row > span:first-child { color: #a8bdc9; }
        .perk-tree-synergy-table-row .perk-tree-synergy-bonus { white-space: normal; }
        .perk-tree-synergy-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 2px 8px;
            margin-top: 6px;
            padding: 5px 6px;
            border-left: 2px solid rgba(140, 158, 169, .38);
            background: rgba(255, 255, 255, .025);
        }
        .perk-tree-synergy-row.active { border-left-color: #63f0bc; background: rgba(99, 240, 188, .08); }
        .perk-tree-synergy-pair strong,
        .perk-tree-synergy-pair small { display: block; }
        .perk-tree-synergy-pair strong { color: #e8fbff; font-size: 8px; line-height: 1.25; }
        .perk-tree-synergy-pair small,
        .perk-tree-synergy-row em { color: #9eb6c5; font-size: 7px; line-height: 1.25; font-style: normal; }
        .perk-tree-synergy-bonus { color: #ffe27d; font-size: 7px; line-height: 1.25; text-align: right; }
        .perk-tree-synergy-row.active .perk-tree-synergy-bonus { color: #63f0bc; }
        .perk-tree-synergy-row > em { grid-column: 1 / -1; }
        .perk-tree-modal-kicker, .perk-tree-modal-subtitle { display: none; }
        .perk-tree-modal-head {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 2px 28px 8px 0;
            padding-bottom: 7px;
            border-bottom: 2px solid rgba(0, 232, 255, .2);
        }
        .perk-tree-modal-thumb {
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(0, 232, 255, .44);
            border-radius: 6px;
            background: rgba(0, 12, 28, .8);
            box-shadow: 0 0 12px rgba(0, 232, 255, .12);
        }
        .perk-tree-modal-title { color: #edfbff; font-size: clamp(14px, 2.5vw, 19px); line-height: 1.2; letter-spacing: .05em; }
        .perk-tree-modal .perk-tree { margin-top: 0; }
        .perk-tree-style-picker {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 5px;
            margin: 0 0 8px;
            padding: 4px;
            border: 1px solid rgba(0, 232, 255, .16);
            background: rgba(0, 6, 20, .72);
        }
        .perk-tree-style-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-width: 0;
            padding: 6px 4px;
            border: 1px solid rgba(120, 154, 180, .2);
            background: rgba(9, 22, 42, .72);
            color: #7592a9;
            font: inherit;
            font-size: 7px;
            letter-spacing: .04em;
            cursor: pointer;
        }
        .perk-tree-style-btn b { color: #4e738c; font-size: 8px; }
        .perk-tree-style-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .perk-tree-style-btn.active {
            border-color: #00e8ff;
            color: #e8fcff;
            background: linear-gradient(180deg, rgba(0, 99, 128, .5), rgba(4, 25, 48, .82));
            box-shadow: 0 0 10px rgba(0, 232, 255, .2), inset 0 0 10px rgba(0, 232, 255, .08);
        }
        .perk-tree-style-btn.active b { color: #ffe27d; }
        .perk-tree {

            width: min(100%, 570px);
            margin: 0 auto;
            padding: 7px 6px 8px;
            border: 2px solid rgba(0, 232, 255, .24);
            border-radius: 6px;
            background: linear-gradient(180deg, rgba(4, 18, 38, .8), rgba(2, 8, 22, .86));
            overflow: hidden;
        }
        .perk-tree-flow { display: flex; flex-direction: column; align-items: center; }
        .perk-tree-level-row { display: flex; justify-content: center; width: 100%; }
        .perk-tree-connector {
            display: block;
            width: 2px;
            height: 11px;
            border-radius: 3px;
            background: #294b63;
            box-shadow: 0 0 5px rgba(0, 232, 255, .22);
            transition: background .2s, box-shadow .2s;
        }
        .perk-tree-connector.active {
            background: #00e8ff;
            box-shadow: 0 0 5px #00e8ff, 0 0 13px rgba(0, 232, 255, .85);
        }
        .perk-tree-node {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            width: min(100%, 250px);
            padding: 6px 8px 6px;
            border: 2px solid rgba(96, 130, 160, .3);
            border-radius: 6px;
            background: rgba(7, 20, 39, .9);
            text-align: center;
            transition: opacity .15s, filter .15s, border-color .15s, box-shadow .2s;
        }
        .perk-tree-node.locked { opacity: .48; filter: brightness(.68); }
        .perk-tree-node.unlocked { border-color: rgba(99, 240, 188, .7); box-shadow: 0 0 10px rgba(99, 240, 188, .22); }
        .perk-tree-node.branch-node { border-color: rgba(255, 212, 0, .62); }
        .perk-tree-node-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 27px;
            width: 27px;
            height: 27px;
            border: 1px solid rgba(0, 232, 255, .48);
            border-radius: 4px;
            background: linear-gradient(145deg, rgba(0, 80, 108, .8), rgba(4, 14, 32, .95));
            color: #8ff5ff;
            font-size: 11px;
            font-weight: 600;
            box-shadow: inset 0 0 8px rgba(0, 232, 255, .12);
        }
        .perk-tree-node.unlocked .perk-tree-node-icon { border-color: #63f0bc; color: #b4ffe0; box-shadow: 0 0 8px rgba(99, 240, 188, .3); }
        .perk-tree-node.node-level-3 .perk-tree-node-icon { border-color: #ffd45a; color: #ffe997; }
        .perk-tree-node.node-level-5 .perk-tree-node-icon { border-color: #ff54d9; color: #ffb2ef; }
        .perk-tree-node-copy { min-width: 0; flex: 1; text-align: left; }
        .perk-tree-node b { display: block; color: #e5f5ff; font-size: clamp(10px, 1.7vw, 13px); line-height: 1.2; }
        .perk-tree-node small { display: block; color: #a9c2d2; font-size: clamp(8px, 1.4vw, 10px); line-height: 1.25; margin-top: 3px; }
        .perk-tree-detail { color: #c0d8e5 !important; }
        .perk-tree-study {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
            min-height: 25px;
            margin-top: 5px;
            padding: 3px 6px;
            border: 2px solid rgba(255, 207, 90, .38);
            border-radius: 4px;
            background: rgba(54, 40, 8, .55);
            color: #ffdf78;
            font: inherit;
            font-size: clamp(8px, 1.4vw, 10px);
            letter-spacing: .06em;
            text-align: left;
        }
        .perk-tree-study strong { color: #fff1ac; font-size: clamp(9px, 1.5vw, 11px); white-space: nowrap; }
        .perk-tree-study.ready { border-color: #ffd45a; cursor: pointer; box-shadow: 0 0 9px rgba(255, 212, 90, .3); }
        .perk-tree-study.ready:hover { background: rgba(104, 71, 10, .75); box-shadow: 0 0 14px rgba(255, 212, 90, .55); }
        .perk-tree-study.done { justify-content: center; min-height: 0; padding: 3px; border-color: rgba(99, 240, 188, .35); background: rgba(31, 103, 72, .2); color: #72f0b0; font-size: 9px; }
        .perk-tree-branch-row { display: flex; flex-direction: column; align-items: center; width: 100%; }
        .perk-tree-branch-caption { position: relative; z-index: 1; margin-bottom: 11px; }
        .perk-tree-branch-caption::after { content: ''; position: absolute; left: 50%; bottom: -11px; width: 2px; height: 11px; border-radius: 3px; background: #294b63; }
        .perk-tree-branches { --branch-gap: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--branch-gap); width: min(100%, 520px); position: relative; }
        .perk-tree-branches::before { content: ''; position: absolute; top: -8px; left: calc((100% - var(--branch-gap)) / 4); right: calc((100% - var(--branch-gap)) / 4); height: 3px; border-radius: 3px; background: #294b63; }
        .perk-tree-branches.active::before { background: #00e8ff; box-shadow: 0 0 6px #00e8ff, 0 0 14px rgba(0, 232, 255, .8); }
        .perk-tree-branch { position: relative; min-width: 0; border: 2px solid rgba(0, 232, 255, .22); border-radius: 5px; background: rgba(3, 12, 27, .62); }
        .perk-tree-branch::before { content: ''; position: absolute; top: -8px; left: 50%; width: 2px; height: 8px; border-radius: 3px; background: #294b63; }
        .perk-tree-branches.active .perk-tree-branch::before { background: #00e8ff; box-shadow: 0 0 6px #00e8ff; }
        .perk-tree-branch.selected { border-color: rgba(255, 84, 217, .75); background: rgba(62, 14, 67, .36); box-shadow: 0 0 10px rgba(255, 84, 217, .2); }
        .perk-tree-branch-head { position: relative; width: 100%; min-height: 0; padding: 6px 18px; border: 0; background: transparent; color: #8fa7bb; font: inherit; text-align: center; cursor: pointer; }
        .perk-tree-branch-head b, .perk-tree-branch-head small, .perk-tree-branch-head em { display: block; }
        .perk-tree-branch-icon { display: inline-flex; align-items: center; justify-content: center; float: left; width: 24px; height: 24px; margin: 1px 5px 0 0; border: 1px solid rgba(255, 212, 0, .62); border-radius: 4px; color: #ffe27d; font-size: 13px; }
        .perk-tree-branch-copy { display: block; overflow: hidden; }
        .perk-tree-branch-head b { color: #f0dcff; font-size: clamp(9px, 1.7vw, 12px); line-height: 1.25; }
        .perk-tree-branch-head small { color: #a9c2d2; font-size: clamp(8px, 1.4vw, 10px); line-height: 1.35; margin-top: 5px; }
        .perk-tree-branch-head em { margin-top: 6px; color: #ffcf5a; font-size: 8px; font-style: normal; letter-spacing: .08em; }
        .perk-tree-branch-head:disabled { cursor: default; opacity: .92; }
        .perk-tree-branch-mark { position: absolute; top: 6px; right: 6px; color: #ffcf5a; font-size: 11px; }
        .perk-tree-path-steps { display: grid; gap: 2px; padding: 0 6px 6px; }
        .perk-tree-path-step { padding: 3px 4px; border-left: 2px solid rgba(0, 232, 255, .18); color: #7692a7; font-size: clamp(8px, 1.3vw, 9px); line-height: 1.25; text-align: center; }
        .perk-tree-path-step.unlocked { border-color: #ff54d9; color: #f0b8e8; }
        /* Вариант 02 — звёздная карта маршрутов: больше воздуха, холодная навигационная сетка. */
        .perk-tree-modal[data-tree-layout="star-map"] {
            width: min(100%, 1080px);
            border-color: rgba(108, 137, 255, .72);
            background: radial-gradient(circle at 50% 20%, rgba(30, 58, 128, .42), rgba(3, 7, 24, .99) 66%);
            box-shadow: 0 0 35px rgba(70, 112, 255, .22), inset 0 0 34px rgba(80, 90, 255, .08);
        }
        .perk-tree-modal[data-tree-layout="star-map"]::before { background: linear-gradient(90deg, transparent, #6e8cff, #d596ff, transparent); }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree { width: 100%; border-color: rgba(117, 139, 255, .42); background: linear-gradient(180deg, rgba(10, 19, 58, .7), rgba(2, 8, 28, .86)); }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-node { border-radius: 18px 5px 18px 5px; border-color: rgba(119, 145, 255, .48); background: rgba(12, 23, 61, .88); }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-node-icon { border-radius: 50%; border-color: #8d9cff; color: #d6dcff; background: radial-gradient(circle, rgba(94, 113, 255, .8), rgba(8, 15, 44, .95) 68%); }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-connector,
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branch::before { background: #657aff; box-shadow: 0 0 7px rgba(101, 122, 255, .8); }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branches::before { background: linear-gradient(90deg, #657aff, #d596ff, #657aff); }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branch { border-color: rgba(164, 122, 255, .48); background: rgba(26, 18, 65, .65); }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-path-step { border-left-color: rgba(173, 142, 255, .38); }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-flow { position: relative; padding: 5px 2px 8px; }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-node { min-height: 66px; padding: 8px 9px; }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-node-icon { flex-basis: 36px; width: 36px; height: 36px; font-size: 14px; }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-node b { font-size: clamp(11px, 2vw, 14px); }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-node small { font-size: clamp(9px, 1.55vw, 11px); }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-connector { height: 16px; }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branch-caption { margin-bottom: 16px; }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branch-caption::after { bottom: -16px; height: 16px; }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branch-head { padding: 9px 18px; }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branch-icon { width: 30px; height: 30px; font-size: 16px; }
        .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-path-step { padding: 5px 5px; font-size: clamp(8px, 1.35vw, 10px); }

        /* Вариант 03 — модульная панель: квадратные ячейки и акцент на статусе узла. */
        .perk-tree-modal[data-tree-layout="modules"] {
            border-color: rgba(255, 194, 74, .65);
            background: linear-gradient(145deg, rgba(29, 25, 25, .99), rgba(5, 10, 24, .99));
            box-shadow: 0 0 34px rgba(255, 174, 55, .14), inset 0 0 35px rgba(255, 193, 70, .06);
        }
        .perk-tree-modal[data-tree-layout="modules"]::before { background: linear-gradient(90deg, transparent, #ffd45a, #00e8ff, transparent); }
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree { border-color: rgba(255, 212, 90, .3); background: rgba(12, 14, 22, .9); }
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree-node { width: min(100%, 285px); border-radius: 2px; border-width: 1px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 3px), rgba(19, 24, 34, .96); }
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree-node-icon { border-radius: 2px; border-color: rgba(255, 212, 90, .7); color: #ffd45a; background: #151a24; }
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree-connector,
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree-branch::before { width: 3px; background: #555c66; box-shadow: none; }
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree-connector.active { background: #ffd45a; box-shadow: 0 0 7px rgba(255, 212, 90, .85); }
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree-branches::before { height: 2px; background: #555c66; }
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree-branches.active::before { background: #ffd45a; box-shadow: 0 0 7px rgba(255, 212, 90, .7); }
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree-branch { border-radius: 2px; border-color: rgba(255, 212, 90, .34); background: rgba(28, 29, 30, .75); }
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree-path-step { border-left-color: rgba(255, 212, 90, .35); }
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree-node { min-height: 72px; padding: 9px 10px; }
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree-node-icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 13px; }
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree-node b { font-size: clamp(11px, 1.9vw, 14px); }
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree-node small { font-size: clamp(9px, 1.5vw, 11px); }
        .perk-tree-modal[data-tree-layout="modules"] .perk-tree-connector { height: 15px; }

        @media (min-width: 640px) {
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-flow {
                display: grid;
                grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 2fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr);
                align-items: center;
                gap: 0;
                padding: 16px 8px;
            }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-level-row { width: 100%; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-level-row:nth-child(1) { grid-column: 1; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-connector:nth-child(2) { grid-column: 2; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-level-row:nth-child(3) { grid-column: 3; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-connector:nth-child(4) { grid-column: 4; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branch-row { grid-column: 5; width: 100%; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-connector:nth-child(6) { grid-column: 6; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-level-row:nth-child(7) { grid-column: 7; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-connector:nth-child(8) { grid-column: 8; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-level-row:nth-child(9) { grid-column: 9; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-connector { width: 100%; height: 3px; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-node { width: 100%; min-height: 92px; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-node-copy { text-align: center; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-detail { display: none; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-study { justify-content: center; margin-top: 7px; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branch-head small { display: none; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branch-head em { margin-top: 4px; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branch-caption { width: 100%; margin-bottom: 15px; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branch-caption::after { bottom: -15px; height: 15px; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branches { width: 100%; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branch-head { padding: 8px 6px; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branch-icon { float: none; margin: 0 auto 5px; }
            .perk-tree-modal[data-tree-layout="star-map"] .perk-tree-branch-copy { text-align: center; }
        }

        @media (max-width: 520px) {
            .perk-tree-modal { padding: 15px 8px 10px; }
            .perk-tree-modal-head { margin-right: 30px; }
            .perk-tree-modal-title { font-size: 15px; }
            .perk-tree { padding: 8px 5px 10px; }
            .perk-tree-node b { font-size: 10px; }
            .perk-tree-node small { font-size: 8px; }
            .perk-tree-study { min-height: 27px; font-size: 8px; }
            .perk-tree-study strong { font-size: 9px; }
            .perk-tree-branch-head b { font-size: 10px; }
            .perk-tree-branch-head small { font-size: 8px; }
            .perk-tree-branch-head em { font-size: 7px; }
            .perk-tree-node { width: min(100%, 250px); padding: 8px 7px 7px; }
            .perk-tree-connector { height: 13px; }
            .perk-tree-branch-caption { margin-bottom: 13px; }
            .perk-tree-branch-caption::after { bottom: -13px; height: 13px; }
            .perk-tree-branches { --branch-gap: 6px; grid-template-columns: 1fr; width: min(100%, 285px); }
            .perk-tree-branches::before { display: none; }
            .perk-tree-branch::before { top: -13px; height: 13px; }
            .perk-tree-branch + .perk-tree-branch { margin-top: 13px; }
            .perk-tree-branch-head { padding: 6px 16px; }
            .perk-tree-style-btn { flex-direction: column; gap: 2px; padding: 5px 2px; font-size: 6px; }
            .perk-tree-style-btn b { font-size: 7px; }
            .perk-tree-node { gap: 6px; }
            .perk-tree-node-icon { flex-basis: 23px; width: 23px; height: 23px; font-size: 9px; }
            .perk-tree-path-steps { padding-left: 5px; padding-right: 5px; }
        }
        .res-gfx-artifact svg { filter: drop-shadow(0 0 3px rgba(160, 100, 255, 0.65)); }
        .res-gfx-microchips svg { filter: drop-shadow(0 0 3px rgba(68, 221, 170, 0.65)); }
        @media (max-width: 520px) {
            .perk-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
            .perk-preset-card { padding: 5px; }
            .perk-preset-buttons { grid-template-columns: 1fr; }
            .perk-loadout-head { align-items: flex-start; flex-direction: column; }
        }
        .hangar-scroll {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            padding-right: 2px;
            margin-top: 2px;
            border-top: 1px solid rgba(0, 232, 255, 0.15);
            padding-top: 6px;
        }
        .hangar-scroll .upgrade-section-head {
            margin-top: 0;
        }
        .hangar-balance-hint {
            font-family: var(--ui-font);
            font-size: var(--ui-fs-xs);
            font-weight: 500;
            text-align: center;
            margin-top: 5px;
            color: var(--text-dim);
        }
        .hangar-balance-hint.ok { color: #44cc66; }
        .hangar-balance-hint.warn { color: #ccaa44; }
        .upgrade-row .upgrade-blocked {
            display: block;
            font-size: var(--ui-fs-xs);
            color: #cc8888;
            margin-top: 2px;
        }
        #win-ship .ship-actions {
            flex-shrink: 0;
            margin-top: auto;
            padding-top: 6px;
        }
        #win-ship .btn {
            flex-shrink: 0;
            margin: 2px 0;
            padding: 5px;
            font-size: 5px;
        }
        #win-ship .btn-back { margin-top: 4px; margin-bottom: 0; }
        #ship-list .card.selected {
            border-width: 2px;
            border-color: var(--neon-magenta) !important;
            box-shadow: 0 0 18px var(--neon-glow-m), inset 0 0 10px rgba(255, 43, 214, 0.12);
        }
        #ship-list .card.selected .ship-preview {
            border-color: rgba(255, 43, 214, 0.55);
            background: radial-gradient(ellipse at 50% 50%, rgba(255, 43, 214, 0.12) 0%, transparent 72%);
            box-shadow: inset 0 0 24px rgba(255, 43, 214, 0.1);
        }
        @media (max-height: 620px) {
            #ship-wtitle { font-size: 5px; margin-bottom: 3px; }
            #win-ship .faction-brief { font-size: 6px; padding: 3px 5px; margin-bottom: 4px; }
            #win-ship .faction-brief-title { font-size: 7px; }
            #ship-list { gap: 4px; }
            #ship-list .card { padding: 3px; }
            #ship-list .ship-name { font-size: 4px; margin-bottom: 3px; }
            #ship-list .ship-preview { min-height: 88px; padding: 2px 1px; }
            #ship-list .ship-preview .ship-sprite-img { max-height: 105px; }
            #win-ship .btn { padding: 3px; font-size: 4px; margin: 1px 0; }
        }
        .mine-loot {
            position: absolute; z-index: 40;
            transform: translate(-50%, -50%);
            font-size: 12px; font-weight: 600; line-height: 1.25; letter-spacing: 0.4px;
            color: #ffe566;
            text-shadow: 0 0 8px rgba(0,0,0,.95), 0 0 3px #000, 1px 1px 0 #000;
            white-space: nowrap; pointer-events: none;
            animation: mineLootFade 2.5s ease-out forwards;
        }
        .mine-loot .loot-sep { opacity: 0.45; margin: 0 3px; }
        .mine-loot .res-gfx svg { width: 16px; height: 16px; vertical-align: -3px; }
        .mine-loot .part-gfx svg { width: 16px; height: 16px; vertical-align: -3px; }
        .mine-loot-warning {
            padding: 6px 10px;
            border: 1px solid rgba(255, 190, 70, 0.82);
            border-radius: 5px;
            background: linear-gradient(135deg, rgba(48, 17, 10, 0.96), rgba(74, 37, 8, 0.94));
            box-shadow: 0 0 16px rgba(255, 105, 35, 0.48), inset 0 0 10px rgba(255, 190, 70, 0.12);
            color: #fff0b3;
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 0.06em;
        }
        .mine-loot-warning .res-gfx svg { width: 18px; height: 18px; vertical-align: -4px; }
        .hangar-res .res-gfx-inline { margin: 0 2px; }
        .help-body .part-gfx-inline,
        .help-formula .part-gfx-inline { vertical-align: -2px; margin-right: 2px; }
        .part-chip {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            vertical-align: middle;
        }
        .part-ico {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 0;
            flex-shrink: 0;
        }
        .part-gfx svg {
            display: block;
            width: 11px;
            height: 11px;
            image-rendering: auto;
            shape-rendering: geometricPrecision;
        }
        .part-gfx-inline svg { width: 10px; height: 10px; }
        .upgrade-row .part-gfx svg { width: 12px; height: 12px; }
        .hangar-part .part-gfx svg { width: 12px; height: 12px; }
        .part-hp .part-gfx svg { filter: drop-shadow(0 0 3px rgba(255, 70, 100, 0.65)); }
        .part-damage .part-gfx svg { filter: drop-shadow(0 0 3px rgba(255, 140, 50, 0.65)); }
        .part-shield .part-gfx svg { filter: drop-shadow(0 0 3px rgba(80, 160, 255, 0.65)); }
        .part-speed .part-gfx svg { filter: drop-shadow(0 0 3px rgba(60, 255, 220, 0.6)); }
        .part-luck .part-gfx svg { filter: drop-shadow(0 0 3px rgba(80, 255, 100, 0.6)); }
        .part-fuelTank .part-gfx svg { filter: drop-shadow(0 0 3px rgba(255, 200, 40, 0.65)); }
        .upgrade-row .upgrade-head {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .upgrade-row .upgrade-title {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .upgrade-row .upgrade-scope {
            font-size: var(--ui-fs-sm);
            font-weight: 500;
            letter-spacing: 0.03em;
            color: var(--text-dim);
            opacity: 1;
        }
        .upgrade-row .upgrade-parts {
            font-size: var(--ui-fs-sm);
            color: var(--text-dim);
            opacity: 1;
        }
        .hangar-parts {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 4px 8px;
            font-size: 6px;
            margin-bottom: 8px;
        }
        .hangar-part {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 3px 5px;
            border-radius: 3px;
            background: rgba(0, 12, 28, 0.55);
            border: 1px solid rgba(0, 232, 255, 0.18);
        }
        .hangar-part.part-hp { border-color: rgba(255, 70, 100, 0.35); }
        .hangar-part.part-damage { border-color: rgba(255, 140, 50, 0.35); }
        .hangar-part.part-shield { border-color: rgba(80, 160, 255, 0.35); }
        .hangar-part.part-speed { border-color: rgba(60, 255, 220, 0.3); }
        .hangar-part.part-luck { border-color: rgba(80, 255, 100, 0.3); }
        .hangar-part.part-fuelTank { border-color: rgba(255, 200, 40, 0.35); }
        .upgrade-section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin: 10px 0 4px;
        }
        .upgrade-section-title {
            margin: 0;
            font-size: 8px;
            line-height: 1.3;
        }
        .hangar-help-btn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid rgba(0, 232, 255, 0.45);
            background: rgba(0, 16, 32, 0.85);
            color: var(--neon-cyan);
            font-family: 'Rajdhani', sans-serif;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            padding: 0;
            box-shadow: 0 0 8px rgba(0, 232, 255, 0.2);
        }
        .hangar-help-btn:active { transform: scale(0.92); }
        .upgrade-next-bonus {
            font-size: 7px;
            color: #6ee8aa;
            font-weight: 400;
        }
        .hangar-faction-hint {
            font-size: var(--ui-fs-xs);
            font-weight: 500;
            color: var(--text-dim);
            opacity: 1;
            margin-top: 4px;
            letter-spacing: 0.02em;
        }
        .help-overlay {
            position: fixed;
            inset: 0;
            z-index: 200000;
            background: rgba(0, 0, 0, 0.78);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            box-sizing: border-box;
        }
        .help-overlay.hidden { display: none; }
        .help-panel {
            width: min(100%, 340px);
            max-height: 85vh;
            overflow-y: auto;
            background: linear-gradient(165deg, #0c1830 0%, #060c18 100%);
            border: 1px solid rgba(0, 232, 255, 0.38);
            border-radius: 6px;
            padding: 16px 18px 14px;
            box-shadow: 0 0 28px rgba(0, 232, 255, 0.12);
            position: relative;
        }
        .help-title {
            font-family: 'Rajdhani', sans-serif;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.12em;
            color: var(--neon-cyan);
            margin-bottom: 10px;
            padding-right: 24px;
        }
        .help-body {
            font-family: 'Rajdhani', sans-serif;
            font-size: 9px;
            font-weight: 400;
            line-height: 1.55;
            color: #b0d4e8;
            letter-spacing: 0.02em;
        }
        .help-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 7px;
            margin: 8px 0;
        }
        .help-table th, .help-table td {
            border: 1px solid rgba(0, 232, 255, 0.2);
            padding: 3px 5px;
            text-align: left;
            vertical-align: top;
        }
        .help-table th { color: var(--gold); }
        .help-body p { margin: 0 0 8px; }
        .help-body ul {
            margin: 0 0 8px;
            padding-left: 14px;
        }
        .help-body li { margin-bottom: 4px; }
        .help-body strong { color: #e8f8ff; font-weight: 600; }
        .help-formula {
            margin: 8px 0 0;
            padding: 8px 10px;
            border-radius: 6px;
            background: rgba(0, 24, 40, 0.55);
            font-size: 0.82rem;
            line-height: 1.45;
            color: #b8dce8;
        }
        .help-formula code {
            color: #ffe8a0;
            font-family: Consolas, 'Courier New', monospace;
            font-size: 0.8rem;
        }
        .player-panel {
            width: min(100%, 420px);
            max-height: 88vh;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .player-panel > #btn-stats-close {
            z-index: 1;
        }
        .player-panel-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            position: relative;
            margin-bottom: 8px;
        }
        .player-panel-header .help-title {
            margin: 0;
        }
        .player-panel-settings-btn {
            background: none;
            border: 1px solid transparent;
            font-size: 1.15rem;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 6px;
            transition: all 0.2s ease;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .player-panel-settings-btn:hover,
        .player-panel-settings-btn.active {
            background: rgba(0, 232, 255, 0.15);
            border-color: rgba(0, 232, 255, 0.4);
            transform: rotate(45deg);
        }
        .settings-card {
            background: rgba(4, 18, 36, 0.75);
            border: 1px solid rgba(0, 232, 255, 0.3);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            box-shadow: inset 0 0 15px rgba(0, 232, 255, 0.05);
        }
        .settings-title {
            font-family: 'Press Start 2P', monospace;
            font-size: 9px;
            color: #00e8ff;
            letter-spacing: 1px;
            margin-bottom: 4px;
            text-transform: uppercase;
        }
        .settings-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            background: rgba(0, 28, 52, 0.5);
            padding: 8px 10px;
            border-radius: 6px;
            border: 1px solid rgba(0, 232, 255, 0.15);
        }
        .settings-label {
            font-size: 13px;
            color: #d2f0ff;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 500;
        }
        .settings-toggle-btn {
            border: 1px solid rgba(0, 232, 255, 0.4);
            border-radius: 4px;
            background: rgba(0, 48, 72, 0.6);
            color: #00e8ff;
            font-family: 'Rajdhani', sans-serif;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            min-width: 60px;
            text-align: center;
        }
        .settings-toggle-btn.off {
            color: #ff6b81;
            border-color: rgba(255, 107, 129, 0.4);
            background: rgba(50, 10, 20, 0.6);
        }
        .settings-lang-btns {
            display: flex;
            gap: 6px;
        }
        .settings-lang-btn {
            border: 1px solid rgba(0, 232, 255, 0.25);
            border-radius: 4px;
            background: rgba(0, 24, 48, 0.45);
            color: #8eb8cc;
            font-family: 'Rajdhani', sans-serif;
            font-size: 11px;
            font-weight: 600;
            padding: 4px 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .settings-lang-btn.active {
            color: var(--neon-cyan);
            border-color: rgba(0, 232, 255, 0.6);
            background: rgba(0, 48, 72, 0.7);
            box-shadow: 0 0 8px rgba(0, 232, 255, 0.2);
        }
        .player-panel-tabs {
            display: flex;
            gap: 4px;
            margin: 0 0 10px;
            flex-shrink: 0;
        }
        .player-panel-tab {
            flex: 1;
            border: 1px solid rgba(0, 232, 255, 0.25);
            border-radius: 4px;
            background: rgba(0, 24, 48, 0.45);
            color: #8eb8cc;
            font-family: 'Rajdhani', sans-serif;
            font-size: 7px;
            font-weight: 600;
            letter-spacing: 0.08em;
            padding: 6px 4px;
            cursor: pointer;
        }
        .player-panel-tab.active {
            color: var(--neon-cyan);
            border-color: rgba(0, 232, 255, 0.55);
            background: rgba(0, 48, 72, 0.65);
            box-shadow: 0 0 10px rgba(0, 232, 255, 0.12);
        }
        .skins-panel { display: flex; flex-direction: column; gap: 10px; }
        .skins-intro, .skins-note, .promo-copy, .promo-hint { color: #8eb8cc; font-size: 8px; line-height: 1.45; }
        .ship-skin-faction { display: flex; flex-direction: column; gap: 6px; }
        .ship-skin-faction-title { margin: 2px 0 0; padding-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--skin-color) 40%, transparent); color: var(--skin-color); font-size: 8px; letter-spacing: .06em; }
        .ship-skins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
        .ship-skin-card { min-width: 0; padding: 6px 4px; border: 1px solid color-mix(in srgb, var(--skin-color) 45%, transparent); border-radius: 5px; background: rgba(0, 18, 32, .45); text-align: center; transition: opacity .2s, box-shadow .2s, border-color .2s; }
        .ship-skin-card.locked { opacity: .48; filter: saturate(.55); }
        .ship-skin-card.owned { opacity: 1; filter: none; }
        .ship-skin-card.selected { border-color: var(--skin-color); box-shadow: 0 0 13px color-mix(in srgb, var(--skin-color) 42%, transparent); }
        .ship-skin-name { min-height: 22px; color: #d9f5ff; font-size: 7px; line-height: 1.25; }
        .ship-skin-preview { height: 112px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .ship-skin-preview .ship-sprite-img, .ship-skin-preview canvas { max-width: 100%; max-height: 100%; }
        .ship-skin-action { width: 100%; min-height: 28px; padding: 4px 2px !important; font-size: 6px !important; }
        .ship-skin-action:disabled { opacity: .8; cursor: default; }
        .promo-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid rgba(0, 232, 255, .25); border-radius: 6px; background: rgba(4, 18, 36, .72); }
        .promo-title { color: var(--neon-cyan); font-size: 9px; letter-spacing: .12em; }
        .promo-form { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
        .promo-input { min-width: 0; width: 100%; margin: 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
        .promo-form .btn { width: 100%; padding: 6px 8px; font-size: 7px; }
        .promo-code-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px; border: 1px solid rgba(0, 232, 255, .38); border-radius: 5px; background: rgba(0, 31, 55, .75); color: #d9f5ff; cursor: pointer; text-align: left; }
        .promo-code-row:hover, .promo-code-row:focus-visible { border-color: var(--neon-cyan); box-shadow: 0 0 12px rgba(0, 232, 255, .18); outline: none; }
        .promo-code-row-label { color: var(--neon-cyan); font-size: 8px; letter-spacing: .1em; }
        .promo-code-row-value { color: #fff; font-size: 9px; letter-spacing: .1em; }
        .promo-hint { min-height: 12px; color: #ffd45a; }
        @media (max-width: 380px) { .ship-skins-grid { grid-template-columns: 1fr; } .ship-skin-card { display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; gap: 4px; } .ship-skin-name { grid-column: 1 / -1; } .ship-skin-preview { grid-row: span 2; } }
        .player-panel-body {
            overflow-y: auto;
            flex: 1;
            min-height: 0;
            padding-right: 2px;
        }
        .stats-grid-2col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px 10px;
        }
        @media (max-width: 380px) {
            .stats-grid-2col { grid-template-columns: 1fr; }
        }
        .stats-block {
            min-width: 0;
            background: rgba(0, 18, 32, 0.35);
            border: 1px solid rgba(0, 232, 255, 0.1);
            border-radius: 4px;
            padding: 6px 6px 4px;
        }
        .stats-block-wide { grid-column: 1 / -1; }
        .stats-section {
            margin: 0 0 4px;
            font-size: 7px;
            font-weight: 600;
            letter-spacing: 0.12em;
            color: var(--neon-cyan);
        }
        .stats-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 7px;
        }
        .stats-table td {
            padding: 2px 3px;
            border-bottom: 1px solid rgba(0, 232, 255, 0.08);
            vertical-align: middle;
        }
        .stats-table td:first-child { color: #8eb8cc; }
        .stats-table td:last-child {
            text-align: right;
            color: #e8f8ff;
            font-weight: 600;
        }
        .stats-note {
            margin: 8px 0 0;
            font-size: 7px;
            color: #6a90a8;
            line-height: 1.4;
            grid-column: 1 / -1;
        }
        .friends-ref-box {
            margin-bottom: 10px;
            padding: 8px 10px;
            border-radius: 4px;
            border: 1px solid rgba(255, 212, 0, 0.28);
            background: rgba(40, 32, 8, 0.35);
        }
        .friends-ref-label {
            font-size: 7px;
            color: var(--gold);
            letter-spacing: 0.1em;
            margin-bottom: 6px;
        }
        .friends-ref-link {
            font-size: 7px;
            color: #c8dce8;
            word-break: break-all;
            line-height: 1.45;
            margin-bottom: 8px;
        }
        .friends-ref-actions { display: flex; gap: 6px; flex-wrap: wrap; }
        .friends-ref-actions .btn { flex: 1; min-width: 100px; font-size: 7px; padding: 6px 8px; }
        .friends-bonus-box {
            margin-top: 8px;
            border-color: rgba(80, 200, 120, 0.35);
            background: rgba(40, 90, 55, 0.18);
        }
        .friends-bonus-line {
            font-size: 7px;
            color: #8eb8cc;
            line-height: 1.45;
            margin-top: 3px;
        }
        .friends-bonus-line strong { color: #e8f8ff; font-weight: 600; }
        .friends-mile-row.done .friend-name,
        .friends-mile-row.done .friend-faction { color: #7dcea0; }
        .ref-stage-track { display: inline-flex; gap: 2px; align-items: center; }
        .ref-stage-dot {
            display: inline-block;
            min-width: 10px;
            padding: 1px 3px;
            font-size: 6px;
            line-height: 1.2;
            border-radius: 2px;
            color: #5a7a8a;
            background: rgba(0, 40, 60, 0.45);
            border: 1px solid rgba(0, 232, 255, 0.12);
            text-align: center;
        }
        .ref-stage-dot.on {
            color: #c8ffe0;
            background: rgba(40, 120, 70, 0.45);
            border-color: rgba(100, 220, 140, 0.45);
        }
        .friends-list-head {
            display: grid;
            grid-template-columns: 1fr 1.2fr auto;
            gap: 6px;
            font-size: 6px;
            letter-spacing: 0.1em;
            color: #6a90a8;
            padding: 0 4px 4px;
            border-bottom: 1px solid rgba(0, 232, 255, 0.15);
            margin-bottom: 4px;
        }
        .friend-row {
            display: grid;
            grid-template-columns: 1fr 1.2fr auto;
            gap: 6px;
            align-items: center;
            font-size: 8px;
            padding: 5px 4px;
            border-bottom: 1px solid rgba(0, 232, 255, 0.08);
        }
        .friend-name { color: #e8f8ff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .friend-faction { color: #8eb8cc; font-size: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .friend-lvl { color: var(--gold); font-weight: 600; font-size: 7px; }
        .friends-empty {
            text-align: center;
            font-size: 8px;
            color: #6a90a8;
            padding: 16px 8px;
            line-height: 1.5;
        }
        .help-accordion { display: flex; flex-direction: column; gap: 4px; }
        .help-accordion-item {
            border: 1px solid rgba(0, 232, 255, 0.18);
            border-radius: 4px;
            background: rgba(0, 18, 32, 0.4);
            overflow: hidden;
        }
        .help-accordion-item.open { border-color: rgba(0, 232, 255, 0.38); }
        .help-accordion-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 10px;
            border: none;
            background: transparent;
            color: #c8e8ff;
            font-family: 'Rajdhani', sans-serif;
            font-size: 8px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-align: left;
            cursor: pointer;
        }
        .help-accordion-btn::after {
            content: '▸';
            color: var(--neon-cyan);
            flex-shrink: 0;
            transition: transform 0.15s ease;
        }
        .help-accordion-item.open .help-accordion-btn::after { transform: rotate(90deg); }
        .help-accordion-body {
            display: none;
            padding: 0 10px 10px;
            font-size: 8px;
            line-height: 1.5;
            color: #b0d4e8;
        }
        .help-accordion-item.open .help-accordion-body { display: block; }
        .help-accordion-body p { margin: 0 0 8px; }
        .help-accordion-body ul { margin: 0 0 8px; padding-left: 14px; }
        .help-accordion-body li { margin-bottom: 4px; }
        .help-accordion-body strong { color: #e8f8ff; }
        .help-accordion-body .help-table { font-size: 6px; }
        .onboarding-panel {
            width: min(100%, 360px);
            max-height: 85vh;
            overflow-y: auto;
            background: linear-gradient(165deg, #1a1408 0%, #0a0804 100%);
            border: 2px solid var(--gold);
            border-radius: 8px;
            padding: 18px 20px 16px;
            box-shadow: 0 0 32px rgba(255, 212, 0, 0.25), inset 0 0 24px rgba(255, 212, 0, 0.06);
        }
        .onboarding-title {
            font-family: 'Rajdhani', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.14em;
            color: var(--gold);
            margin-bottom: 12px;
            text-align: center;
        }
        .onboarding-body {
            font-family: 'Rajdhani', sans-serif;
            font-size: 9px;
            line-height: 1.6;
            color: #e8dcc0;
            letter-spacing: 0.02em;
        }
        .onboarding-body p { margin: 0 0 10px; }
        .onboarding-body ul {
            margin: 0 0 10px;
            padding-left: 14px;
        }
        .onboarding-body li { margin-bottom: 4px; }
        .onboarding-body strong { color: #ffe8a0; font-weight: 600; }
        .onboarding-actions {
            margin-top: 14px;
            display: flex;
            justify-content: center;
        }
        .onboarding-actions .btn { min-width: 120px; }

        .help-close {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 22px;
            height: 22px;
            border: 1px solid rgba(255, 100, 100, 0.4);
            border-radius: 4px;
            background: rgba(40, 8, 8, 0.6);
            color: #ff8888;
            font-size: 11px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }

        /* Чекин / батл-пасс — компактные центрированные панели */
        .overlay.overlay-hud-modal:has(#win-checkin:not(.hidden)),
        .overlay.overlay-hud-modal:has(#win-battlepass:not(.hidden)),
        .overlay:has(#win-checkin:not(.hidden)),
        .overlay:has(#win-battlepass:not(.hidden)) {
            align-items: center;
            justify-content: center;
            padding: 10px;
        }
        #win-checkin,
        #win-battlepass {
            width: auto;
            height: auto;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 10px 12px 12px;
            box-sizing: border-box;
            border-width: 2px;
            border-style: solid;
            border-radius: 8px;
            position: relative;
        }
        #win-checkin {
            width: min(94vw, 318px);
            max-height: min(84vh, 560px);
            border-color: rgba(0, 232, 255, 0.45);
            box-shadow: 0 0 28px rgba(0, 232, 255, 0.12);
        }
        #win-battlepass {
            width: min(96vw, 372px);
            max-height: min(88vh, 680px);
            border-color: rgba(255, 212, 0, 0.5);
            box-shadow:
                0 0 32px rgba(255, 212, 0, 0.14),
                inset 0 0 28px rgba(255, 212, 0, 0.05);
        }
        #win-battlepass::before {
            content: '';
            position: absolute;
            top: 0;
            left: 12px;
            right: 12px;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent);
            opacity: 0.85;
            pointer-events: none;
        }
        #win-checkin > .checkin-header,
        #win-battlepass > .checkin-header {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 6px;
        }
        #win-checkin .checkin-title,
        #win-battlepass .checkin-title {
            margin: 0;
            font-size: 10px;
        }
        #win-battlepass .checkin-title {
            color: var(--gold);
            font-size: 11px;
            text-shadow: 0 0 10px rgba(255, 212, 0, 0.35);
        }
        .checkin-status {
            flex-shrink: 0;
            font-size: 8px;
            text-align: center;
            color: #9aa3b8;
            margin-bottom: 8px;
            line-height: 1.45;
        }
        #win-battlepass .checkin-status strong { color: var(--gold); }
        .checkin-status strong { color: var(--neon-cyan); }
        .checkin-status.warn { color: #ccaa44; }
        #win-checkin .checkin-scroll {
            flex: 0 0 auto;
            overflow: visible;
            padding-right: 0;
        }
        #win-battlepass .checkin-scroll {
            flex: 1 1 auto;
            min-height: 140px;
            max-height: 54vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-right: 3px;
        }
        .checkin-scroll {
            padding-right: 2px;
        }
        .checkin-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 5px;
            margin-bottom: 8px;
        }
        .checkin-grid-7 {
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
        }
        .checkin-cell {
            position: relative;
            border: 1px solid rgba(0, 232, 255, 0.25);
            border-radius: 6px;
            padding: 5px 3px;
            text-align: center;
            background: rgba(0, 8, 24, 0.5);
            min-height: 44px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
        }
        #win-checkin .checkin-cell {
            min-height: 56px;
            padding: 6px 4px;
        }
        #win-battlepass .checkin-cell {
            box-sizing: border-box;
            height: 86px;
            min-height: 86px;
            padding: 18px 4px 4px;
            gap: 3px;
            border-width: 2px;
            border-radius: 9px;
            background: linear-gradient(160deg, rgba(3, 24, 42, 0.96), rgba(0, 8, 24, 0.9));
        }
        .checkin-cell-day {
            font-size: 8px;
            font-weight: 600;
            color: #8aa0c0;
        }
        #win-checkin .checkin-cell-day { font-size: 10px; }
        #win-battlepass .checkin-cell-day {
            position: absolute;
            top: 3px;
            left: 50%;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 25px;
            height: 14px;
            padding: 0 4px;
            transform: translateX(-50%);
            border: 1px solid rgba(0, 232, 255, 0.65);
            border-radius: 8px;
            background: rgba(0, 16, 32, 0.95);
            color: #b7f7ff;
            font-size: 9px !important;
            font-weight: 800;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }
        #win-battlepass .bp-premium .checkin-cell-day {
            border-color: rgba(255, 212, 0, 0.8);
            background: rgba(48, 35, 6, 0.96);
            color: #ffe47a;
        }
        .checkin-cell-reward {
            font-size: 6px;
            line-height: 1.25;
            color: #b8d0e0;
            word-break: break-word;
        }
        #win-checkin .checkin-cell-reward { font-size: 7px; }
        #win-battlepass .checkin-cell-reward { font-size: 6px; }
        .checkin-cell-reward .res-gfx-inline,
        .checkin-cell-reward .part-gfx-inline {
            width: 9px;
            height: 9px;
            vertical-align: -2px;
        }
        #win-checkin .checkin-cell-reward .res-gfx-inline,
        #win-checkin .checkin-cell-reward .part-gfx-inline {
            width: 10px;
            height: 10px;
        }
        #win-battlepass .checkin-cell-reward .res-gfx-inline,
        #win-battlepass .checkin-cell-reward .part-gfx-inline {
            width: 18px;
            height: 18px;
            vertical-align: -4px;
        }
        .checkin-cell.done {
            border-color: rgba(68, 204, 102, 0.5);
            background: rgba(20, 40, 28, 0.55);
        }
        .checkin-cell.done::after {
            content: '✓';
            position: absolute;
            top: 2px;
            right: 3px;
            font-size: 6px;
            color: #44cc66;
        }
        .checkin-cell.current {
            border-color: var(--neon-cyan);
            box-shadow: 0 0 10px rgba(0, 232, 255, 0.25);
            background: rgba(0, 40, 60, 0.55);
        }
        .checkin-cell.milestone .checkin-cell-day::after {
            content: ' ★';
            color: var(--gold);
            font-size: 6px;
        }
        .checkin-cell.bp-premium {
            border-color: rgba(255, 212, 0, 0.35);
            background: rgba(40, 32, 8, 0.35);
        }
        #win-battlepass .checkin-cell.bp-ship-reward {
            border-color: rgba(255, 212, 0, 0.9);
            background: linear-gradient(160deg, rgba(90, 62, 8, 0.75), rgba(0, 31, 48, 0.86));
            box-shadow: 0 0 10px rgba(255, 212, 0, 0.24), inset 0 0 10px rgba(255, 212, 0, 0.12);
        }
        #win-battlepass .checkin-cell.bp-ship-reward.locked { opacity: 0.88; }
        #win-battlepass .bp-ship-reward .checkin-cell-day { color: #ffe47a; font-weight: 800; }
        #win-battlepass .bp-ship-reward .checkin-cell-reward { color: #fff1b0; font-size: 6px; font-weight: 700; }
        .bp-ship-reward-image { width: 100%; height: 22px; flex: 0 0 22px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .bp-ship-reward-image > span { display: flex !important; max-width: 100%; max-height: 100%; align-items: center; justify-content: center; }
        .bp-ship-reward-image .ship-sprite-img, .bp-ship-reward-image canvas { width: auto !important; height: 20px !important; max-width: 100%; max-height: 100%; object-fit: contain; }
        #win-battlepass .checkin-cell.locked {
            opacity: 0.45;
        }
        .checkin-today {
            flex-shrink: 0;
            font-size: 8px;
            text-align: center;
            padding: 8px;
            margin-bottom: 8px;
            border: 1px solid rgba(0, 232, 255, 0.3);
            border-radius: 6px;
            background: rgba(0, 12, 28, 0.55);
            color: #c8e8ff;
            line-height: 1.45;
        }
        #win-battlepass .checkin-today {
            border-color: rgba(255, 212, 0, 0.28);
            background: rgba(32, 24, 6, 0.45);
        }
        .checkin-actions {
            flex-shrink: 0;
            margin-top: 2px;
        }
        .checkin-actions .btn-streak-claim {
            font-size: 11px;
            padding: 12px 10px;
            min-height: 44px;
            margin: 0;
        }
        .checkin-choices {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .checkin-choice-title {
            font-size: 8px;
            text-align: center;
            color: var(--gold);
            margin-bottom: 2px;
        }
        .checkin-choice-btn {
            width: 100%;
            padding: 10px 8px;
            font-size: 8px;
            line-height: 1.35;
            text-align: left;
            border: 1px solid rgba(0, 232, 255, 0.35);
            border-radius: 6px;
            background: rgba(0, 16, 32, 0.75);
            color: #d0e8ff;
            cursor: pointer;
            font-family: inherit;
            min-height: 40px;
        }
        #win-battlepass .checkin-choice-btn {
            border-color: rgba(255, 212, 0, 0.3);
            background: rgba(28, 22, 4, 0.65);
        }
        .checkin-choice-btn:active {
            transform: scale(0.98);
            border-color: var(--neon-cyan);
        }
        .checkin-done-msg {
            font-size: 8px;
            text-align: center;
            color: #44cc66;
            padding: 10px;
        }
        .bp-buy-bar {
            flex-shrink: 0;
            margin-top: 6px;
        }
        .bp-buy-bar .btn {
            margin: 4px 0 0;
            font-size: 10px;
            padding: 11px 10px;
            min-height: 42px;
        }
        .bp-paid-badge {
            font-size: 7px;
            text-align: center;
            color: var(--gold);
            margin-top: 4px;
        }
        @keyframes mineLootFade {
            0% { opacity: 0; transform: translate(-50%, -40%) scale(0.9); }
            12% { opacity: 1; transform: translate(-50%, -55%) scale(1); }
            78% { opacity: 1; }
            100% { opacity: 0; transform: translate(-50%, -75%) scale(1.02); }
        }
        .loot-feed { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 2147483000; pointer-events: none; display: flex; gap: 6px; flex-wrap: wrap; }
        .loot {
            font-size: 8px; font-weight: 600; letter-spacing: 0.04em;
            color: #ffd400;
            background: rgba(4, 8, 24, 0.92);
            border: 1px solid rgba(255, 212, 0, 0.45);
            border-radius: 4px;
            padding: 4px 10px;
            box-shadow: 0 0 12px rgba(255, 212, 0, 0.25), inset 0 0 8px rgba(255, 212, 0, 0.08);
            text-shadow: 0 0 6px rgba(255, 212, 0, 0.5);
            animation: fadeLoot 2.5s forwards;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
            justify-content: center;
            max-width: min(92vw, 340px);
        }
        .loot .res-gfx-inline,
        .loot .part-gfx-inline {
            width: 11px;
            height: 11px;
            flex-shrink: 0;
        }
        .loot-minigame {
            font-size: 12px;
            line-height: 1.3;
            padding: 7px 12px;
            gap: 6px;
            max-width: min(94vw, 380px);
            border-color: rgba(255, 212, 0, 0.72);
            box-shadow: 0 0 18px rgba(255, 212, 0, 0.38), inset 0 0 10px rgba(255, 212, 0, 0.12);
        }
        .loot-minigame .res-gfx-inline,
        .loot-minigame .part-gfx-inline { width: 16px; height: 16px; }
        .loot-minigame .res-gfx-inline svg,
        .loot-minigame .part-gfx-inline svg { width: 16px; height: 16px; }
        @keyframes fadeLoot { 0% { opacity:0; transform:translateY(8px); } 15%,80% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-8px); } }

        /* PvP */
        #win-pvp {
            position: relative;
            width: 96%;
            max-width: 440px;
            max-height: none;
            height: 100%;
            padding: 10px 10px 8px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-sizing: border-box;
        }
        #win-pvp .pvp-header { flex-shrink: 0; }
        #win-pvp .pvp-daily-bar { flex-shrink: 0; font-size: 6px; }
        #win-pvp .pvp-reward-tier { flex-shrink: 0; font-size: 5px; line-height: 1.4; }
        #win-pvp .pvp-log { flex-shrink: 0; font-size: 5px; min-height: 16px; }
        #win-pvp .pvp-status-line { flex-shrink: 0; font-size: 7px; }
        #win-pvp .pvp-actions { flex-shrink: 0; }
        .pvp-header {
            display: grid;
            grid-template-columns: 28px 1fr auto;
            align-items: center;
            gap: 4px;
            margin-bottom: 6px;
        }
        .pvp-header .wtitle {
            flex: none;
            margin: 0;
            text-align: center;
            grid-column: 2;
        }
        .pvp-header-actions {
            grid-column: 3;
            display: flex;
            gap: 4px;
            justify-content: flex-end;
        }
        .pvp-header-btn-left {
            grid-column: 1;
            justify-self: start;
        }
        .pvp-lb-btn { line-height: 1; }
        .pvp-history-dropdown {
            position: absolute;
            top: 28px;
            left: 6px;
            z-index: 40;
            width: min(92%, 240px);
            max-height: 200px;
            overflow-y: auto;
            background: rgba(4, 12, 28, 0.97);
            border: 1px solid rgba(255, 120, 60, 0.45);
            border-radius: 4px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
            padding: 6px;
            font-size: 5px;
        }
        .pvp-history-dropdown.hidden { display: none; }
        .pvp-history-title {
            color: #ffaa66;
            font-size: 5px;
            letter-spacing: 0.08em;
            margin-bottom: 4px;
            text-align: center;
        }
        .pvp-history-row {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 3px 2px;
            border-bottom: 1px solid rgba(255, 120, 60, 0.12);
        }
        .pvp-history-row:last-child { border-bottom: none; }
        .pvp-history-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a0c8e0; }
        .pvp-history-meta { color: #8898aa; font-size: 4px; flex-shrink: 0; }
        .pvp-history-revenge {
            font-size: 4px;
            padding: 2px 4px;
            border: 1px solid rgba(255, 120, 60, 0.55);
            background: rgba(255, 80, 40, 0.15);
            color: #ffaa66;
            border-radius: 2px;
            cursor: pointer;
            flex-shrink: 0;
        }
        .pvp-history-revenge:disabled { opacity: 0.35; cursor: default; }
        .pvp-history-empty { text-align: center; color: #8898aa; padding: 8px 4px; font-size: 5px; }
        .pvp-mail-wrap { position: relative; display: inline-flex; }
        .pvp-mail-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            min-width: 8px;
            height: 8px;
            padding: 0 2px;
            border-radius: 4px;
            background: #ff6655;
            color: #fff;
            font-size: 4px;
            line-height: 8px;
            text-align: center;
            pointer-events: none;
        }
        .pvp-mail-badge.hidden { display: none; }
        .pvp-mail-dropdown {
            position: absolute;
            top: 28px;
            right: 6px;
            z-index: 42;
            width: min(92%, 250px);
            max-height: 220px;
            overflow-y: auto;
            background: rgba(4, 12, 28, 0.97);
            border: 1px solid rgba(255, 200, 80, 0.45);
            border-radius: 4px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
            padding: 6px;
            font-size: 5px;
        }
        .pvp-mail-dropdown.hidden { display: none; }
        .pvp-mail-title { color: #ffd480; font-size: 5px; letter-spacing: 0.08em; margin-bottom: 4px; text-align: center; }
        .pvp-mail-row {
            padding: 5px 4px;
            border-bottom: 1px solid rgba(255, 200, 80, 0.12);
        }
        .pvp-mail-row:last-child { border-bottom: none; }
        .pvp-mail-row-head { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
        .pvp-mail-icon { font-size: 8px; flex-shrink: 0; }
        .pvp-mail-subject { flex: 1; color: #e8d8b0; line-height: 1.35; }
        .pvp-mail-reward { color: #a0c8e0; font-size: 4px; margin: 2px 0 4px; line-height: 1.4; }
        .pvp-mail-claim {
            font-size: 5px;
            padding: 3px 6px;
            border: 1px solid rgba(255, 200, 80, 0.55);
            background: rgba(255, 180, 40, 0.18);
            color: #ffd480;
            border-radius: 2px;
            cursor: pointer;
            width: 100%;
        }
        .pvp-mail-claim:disabled { opacity: 0.35; cursor: default; }
        .pvp-mail-empty { text-align: center; color: #8898aa; padding: 8px 4px; font-size: 5px; }
        .pvp-lb-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 4px;
        }
        .pvp-lb-tab {
            flex: 1;
            font-size: 4px;
            padding: 2px 4px;
            border: 1px solid rgba(0, 232, 255, 0.25);
            background: rgba(0, 40, 60, 0.35);
            color: #8898aa;
            border-radius: 2px;
            cursor: pointer;
        }
        .pvp-lb-tab.active {
            color: var(--neon-cyan);
            border-color: rgba(0, 232, 255, 0.55);
            background: rgba(0, 232, 255, 0.12);
        }
        .pvp-daily-bar {
            font-size: 5px;
            text-align: center;
            color: var(--neon-cyan);
            margin-bottom: 6px;
            line-height: 1.5;
        }
        .pvp-daily-bar .pvp-attacks { color: #ffaa55; }
        .pvp-daily-bar .pvp-rank-hint { color: var(--gold); }
        .pvp-lb-dropdown {
            position: absolute;
            top: 28px;
            right: 6px;
            z-index: 40;
            width: min(94%, 260px);
            max-height: min(72vh, 340px);
            overflow-y: auto;
            background: rgba(4, 12, 28, 0.97);
            border: 1px solid rgba(0, 232, 255, 0.45);
            border-radius: 4px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
            font-size: 4px;
            padding: 4px 0;
        }
        .pvp-lb-dropdown.hidden { display: none; }
        .pvp-lb-title {
            padding: 4px 8px;
            color: var(--gold);
            font-size: 5px;
            border-bottom: 1px solid rgba(0, 232, 255, 0.2);
        }
        .pvp-lb-row {
            display: flex;
            justify-content: space-between;
            gap: 4px;
            padding: 3px 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }
        .pvp-lb-row.me { background: rgba(0, 232, 255, 0.1); color: var(--neon-cyan); }
        .pvp-lb-row .lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .pvp-lb-sep {
            padding: 3px 8px;
            color: #668;
            font-size: 3px;
            border-top: 1px dashed rgba(255, 255, 255, 0.12);
        }
        .pvp-prize-block { padding: 0 0 4px; }
        .pvp-prize-row {
            display: flex;
            gap: 6px;
            padding: 2px 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            line-height: 1.35;
        }
        .pvp-prize-row:last-child { border-bottom: none; }
        .pvp-prize-rank {
            flex-shrink: 0;
            width: 34px;
            color: #ffcc66;
            font-size: 4px;
        }
        .pvp-prize-val {
            flex: 1;
            color: #a0c8e0;
            font-size: 4px;
        }
        .pvp-prize-hint {
            padding: 2px 8px 4px;
            color: #8898aa;
            font-size: 3px;
            line-height: 1.4;
        }
        .pvp-reward-tier { font-size: 4px; color: #8898aa; margin: 2px 0; }
        .pvp-reward-tier.hidden,
        .pvp-daily-bar.hidden { display: none; }
         .container-icon {
             display: inline-flex;
             align-items: center;
             justify-content: center;
             position: relative;
             width: 24px;
             height: 24px;
             overflow: hidden;
             vertical-align: middle;
             filter: drop-shadow(0 0 3px rgba(200, 212, 224, 0.45));
         }
         .container-art-frame {
             display: block;
             width: 100%;
             height: 100%;
             object-fit: contain;
         }
         .container-icon.container-art-animated .container-art-frame {
             position: absolute;
             inset: 0;
             opacity: 0;
             animation: container-art-frame 1s steps(1, end) infinite;
         }
         .container-icon.container-art-animated .container-art-frame:nth-child(1) { animation-delay: 0s; }
         .container-icon.container-art-animated .container-art-frame:nth-child(2) { animation-delay: .2s; }
         .container-icon.container-art-animated .container-art-frame:nth-child(3) { animation-delay: .4s; }
         .container-icon.container-art-animated .container-art-frame:nth-child(4) { animation-delay: .6s; }
         .container-icon.container-art-animated .container-art-frame:nth-child(5) { animation-delay: .8s; }
         @keyframes container-art-frame {
             0%, 19.9% { opacity: 1; }
             20%, 100% { opacity: 0; }
         }
         .container-icon.container-elite,
         .container-icon.container-gold { filter: drop-shadow(0 0 4px rgba(255, 212, 0, 0.35)); }
         #win-hangar .container-on-belt .container-icon {
             width: 48px;
             height: 48px;
         }
         #win-hangar .container-scene.compact .container-on-belt .container-icon {
             width: 34px;
             height: 34px;
         }
        .pvp-lobby {
            position: relative;
            flex: 1 1 auto;
            min-height: 240px;
            margin: 4px 0;
            border: 1px solid rgba(0, 232, 255, 0.22);
            border-radius: 4px;
            overflow: hidden;
            background: linear-gradient(180deg, #060614 0%, #0a1230 50%, #060614 100%);
            box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.7);
        }
        .pvp-lobby.hidden { display: none; }
        .pvp-vs {
            position: relative;
            flex: 1 1 auto;
            min-height: 200px;
            margin: 4px 0;
            border: 1px solid rgba(0, 232, 255, 0.28);
            border-radius: 4px;
            overflow: hidden;
            background: linear-gradient(180deg, #060818 0%, #0a1028 50%, #060818 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10px 8px;
            gap: 8px;
        }
        .pvp-vs.hidden { display: none; }
        .pvp-vs-scan {
            font-size: 7px;
            color: var(--neon-cyan);
            letter-spacing: 0.14em;
            animation: pvpScanPulse 1.2s ease-in-out infinite;
        }
        @keyframes pvpScanPulse {
            0%, 100% { opacity: 0.45; }
            50% { opacity: 1; text-shadow: 0 0 8px var(--neon-glow-c); }
        }
        .pvp-vs-match {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .pvp-vs-match.hidden { display: none; }
        .pvp-vs-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
        }
        .pvp-vs-side {
            flex: 1;
            text-align: center;
            min-width: 0;
        }
        .pvp-vs-side-name {
            font-size: 6px;
            color: #a0c8e0;
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .pvp-vs-side-meta { font-size: 4px; color: #8898aa; margin-top: 2px; }
        .pvp-vs-badge {
            font-size: 12px;
            font-weight: 700;
            color: #ff6655;
            text-shadow: 0 0 10px rgba(255, 80, 60, 0.6);
            flex-shrink: 0;
        }
        .pvp-vs-power {
            width: 100%;
            max-width: 280px;
            font-size: 4px;
            color: #8898aa;
        }
        .pvp-vs-power-row {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 3px 0;
        }
        .pvp-vs-power-label { width: 28px; flex-shrink: 0; text-align: right; }
        .pvp-vs-power-track {
            flex: 1;
            height: 6px;
            background: rgba(0, 8, 24, 0.8);
            border: 1px solid rgba(0, 232, 255, 0.2);
            border-radius: 2px;
            overflow: hidden;
        }
        .pvp-vs-power-fill {
            height: 100%;
            border-radius: 1px;
            transition: width 0.4s ease;
        }
        .pvp-vs-power-fill.you { background: linear-gradient(90deg, #0088aa, var(--neon-cyan)); }
        .pvp-vs-power-fill.en { background: linear-gradient(90deg, #aa3333, #ff6655); }
        .pvp-vs-power-val { width: 24px; text-align: left; flex-shrink: 0; color: #a0c8e0; }
        .pvp-vs-countdown {
            font-size: 18px;
            font-weight: 700;
            color: #ff6655;
            letter-spacing: 0.12em;
            text-shadow: 0 0 12px rgba(255, 80, 60, 0.65);
            min-height: 24px;
            line-height: 24px;
            animation: pvpVsCountPulse 1s ease-in-out infinite;
        }
        @keyframes pvpVsCountPulse {
            0%, 100% { transform: scale(1); opacity: 0.85; }
            50% { transform: scale(1.08); opacity: 1; }
        }
        #pvp-vs-my-ship canvas, #pvp-vs-en-ship canvas,
        #pvp-vs-my-ship .ship-sprite-img, #pvp-vs-en-ship .ship-sprite-img {
            width: 72px !important;
            height: 72px !important;
            object-fit: contain;
            margin: 0 auto;
            image-rendering: auto;
        }
        .pvp-half { overflow: visible; }
        .pvp-result {
            position: absolute;
            inset: 0;
            z-index: 20;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px;
            background: rgba(4, 8, 20, 0.92);
            backdrop-filter: blur(2px);
        }
        .pvp-result.hidden { display: none; }
        .pvp-result-title {
            font-size: 11px;
            letter-spacing: 0.1em;
            text-shadow: 0 0 12px currentColor;
        }
        .pvp-result-title.win { color: #40e878; }
        .pvp-result-title.lose { color: #ff6655; }
        .pvp-result-title.draw { color: #ffd400; }
        .pvp-result-stats {
            font-size: 5px;
            color: #a0c8e0;
            text-align: center;
            line-height: 1.6;
            max-width: 260px;
        }
        .pvp-result-score { font-size: 7px; color: var(--gold); margin-top: 2px; }
        .pvp-result .btn { font-size: 7px; margin-top: 4px; }
        .pvp-dmg-pop {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 8px;
            font-weight: 700;
            pointer-events: none;
            z-index: 12;
            animation: pvpDmgFloat 0.75s ease-out forwards;
            text-shadow: 0 0 6px currentColor;
        }
        .pvp-dmg-pop.shield { color: #55bbff; top: 38%; }
        .pvp-dmg-pop.hp { color: #ff6655; top: 42%; }
        .pvp-dmg-pop.crit { color: #ffd400; font-size: 9px; }
        .pvp-dmg-pop.proc { color: #ffaa66; font-size: 6px; top: 30%; }
        @keyframes pvpDmgFloat {
            0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
            100% { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(1.1); }
        }
        .pvp-lobby-space {
            position: absolute;
            inset: 0;
            overflow: hidden;
        }
        .pvp-lobby-stars {
            position: absolute;
            inset: 0;
            overflow: hidden;
        }
        .pvp-lobby-stars .pvp-starfield {
            position: absolute;
            left: -10%;
            right: -10%;
            top: -100%;
            height: 300%;
            background-repeat: repeat;
            will-change: transform;
        }
        .pvp-lobby-stars .pvp-starfield-far {
            background-image:
                radial-gradient(1px 1px at 12px 18px, rgba(255, 255, 255, 0.35), transparent),
                radial-gradient(1px 1px at 58px 42px, rgba(170, 190, 255, 0.28), transparent),
                radial-gradient(1px 1px at 88px 76px, rgba(255, 255, 255, 0.22), transparent);
            background-size: 100px 100px;
            animation: pvpStarFlyDownFar 20s linear infinite;
            opacity: 0.5;
        }
        .pvp-lobby-stars .pvp-starfield-mid {
            background-image:
                radial-gradient(1.5px 1.5px at 24px 12px, rgba(255, 255, 255, 0.5), transparent),
                radial-gradient(1px 1px at 72px 48px, rgba(180, 210, 255, 0.4), transparent);
            background-size: 80px 80px;
            animation: pvpStarFlyDownMid 12s linear infinite;
            opacity: 0.65;
        }
        .pvp-lobby-stars .pvp-starfield-near {
            background-image:
                radial-gradient(2px 2px at 16px 8px, rgba(255, 255, 255, 0.85), transparent),
                radial-gradient(1.5px 1.5px at 48px 32px, rgba(200, 230, 255, 0.7), transparent);
            background-size: 60px 60px;
            animation: pvpStarFlyDownNear 7s linear infinite;
            opacity: 0.85;
        }
        .pvp-lobby-ship {
            position: absolute;
            left: 50%;
            top: 54%;
            transform: translate(-50%, -50%);
            z-index: 3;
            animation: pvpLobbyFloat 4.5s ease-in-out infinite;
            line-height: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        @keyframes pvpLobbyFloat {
            0%, 100% { transform: translate(-50%, -50%); }
            50% { transform: translate(-50%, calc(-50% - 8px)); }
        }
        .pvp-arena.hidden { display: none; }
        .pvp-log.hidden { display: none; }
        .pvp-arena {
            position: relative;
            flex: 1 1 auto;
            min-height: 240px;
            height: auto;
            margin: 4px 0;
            border: 1px solid rgba(0, 232, 255, 0.28);
            border-radius: 4px;
            overflow: hidden;
            background: linear-gradient(180deg, #080818 0%, #0a1028 45%, #060818 55%, #080818 100%);
            box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.65);
        }
        .pvp-arena.pvp-shake { animation: pvpShake 0.18s ease; }
        .pvp-hyperspace {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
            z-index: 0;
        }
        .pvp-stars-half {
            position: absolute;
            left: 0;
            right: 0;
            height: 46%;
            overflow: hidden;
        }
        .pvp-stars-top { top: 0; }
        .pvp-stars-bottom { bottom: 0; }
        .pvp-starfield {
            position: absolute;
            left: -10%;
            right: -10%;
            top: -100%;
            height: 300%;
            background-repeat: repeat;
            will-change: transform;
        }
        .pvp-stars-top .pvp-starfield-far {
            background-image:
                radial-gradient(1px 1px at 12px 18px, rgba(255, 255, 255, 0.35), transparent),
                radial-gradient(1px 1px at 58px 42px, rgba(170, 190, 255, 0.28), transparent),
                radial-gradient(1px 1px at 88px 76px, rgba(255, 255, 255, 0.22), transparent),
                radial-gradient(1px 1px at 34px 92px, rgba(200, 220, 255, 0.2), transparent);
            background-size: 100px 100px;
            animation: pvpStarFlyDownFar 22s linear infinite;
            opacity: 0.55;
        }
        .pvp-stars-top .pvp-starfield-mid {
            background-image:
                radial-gradient(1.5px 1.5px at 22px 28px, rgba(255, 255, 255, 0.65), transparent),
                radial-gradient(1px 1px at 70px 14px, rgba(140, 180, 255, 0.5), transparent),
                radial-gradient(1.5px 1.5px at 44px 68px, rgba(255, 255, 255, 0.45), transparent),
                radial-gradient(1px 1px at 8px 54px, rgba(255, 255, 255, 0.4), transparent);
            background-size: 80px 80px;
            animation: pvpStarFlyDownMid 14s linear infinite;
            opacity: 0.7;
        }
        .pvp-stars-top .pvp-starfield-near {
            background-image:
                radial-gradient(2px 2px at 16px 24px, rgba(255, 255, 255, 0.95), transparent),
                radial-gradient(1.5px 1.5px at 48px 8px, rgba(180, 220, 255, 0.85), transparent),
                radial-gradient(2px 2px at 62px 52px, rgba(255, 255, 255, 0.9), transparent),
                radial-gradient(1px 1px at 28px 44px, rgba(255, 255, 255, 0.75), transparent);
            background-size: 64px 64px;
            animation: pvpStarFlyDownNear 8s linear infinite;
            opacity: 0.9;
        }
        .pvp-stars-bottom .pvp-starfield-far {
            background-image:
                radial-gradient(1px 1px at 12px 18px, rgba(255, 255, 255, 0.35), transparent),
                radial-gradient(1px 1px at 58px 42px, rgba(170, 190, 255, 0.28), transparent),
                radial-gradient(1px 1px at 88px 76px, rgba(255, 255, 255, 0.22), transparent),
                radial-gradient(1px 1px at 34px 92px, rgba(200, 220, 255, 0.2), transparent);
            background-size: 100px 100px;
            animation: pvpStarFlyDownFar 22s linear infinite;
            opacity: 0.55;
        }
        .pvp-stars-bottom .pvp-starfield-mid {
            background-image:
                radial-gradient(1.5px 1.5px at 22px 28px, rgba(255, 255, 255, 0.65), transparent),
                radial-gradient(1px 1px at 70px 14px, rgba(140, 180, 255, 0.5), transparent),
                radial-gradient(1.5px 1.5px at 44px 68px, rgba(255, 255, 255, 0.45), transparent),
                radial-gradient(1px 1px at 8px 54px, rgba(255, 255, 255, 0.4), transparent);
            background-size: 80px 80px;
            animation: pvpStarFlyDownMid 14s linear infinite;
            opacity: 0.7;
        }
        .pvp-stars-bottom .pvp-starfield-near {
            background-image:
                radial-gradient(2px 2px at 16px 24px, rgba(255, 255, 255, 0.95), transparent),
                radial-gradient(1.5px 1.5px at 48px 8px, rgba(180, 220, 255, 0.85), transparent),
                radial-gradient(2px 2px at 62px 52px, rgba(255, 255, 255, 0.9), transparent),
                radial-gradient(1px 1px at 28px 44px, rgba(255, 255, 255, 0.75), transparent);
            background-size: 64px 64px;
            animation: pvpStarFlyDownNear 8s linear infinite;
            opacity: 0.9;
        }
        .pvp-speed-lines {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .pvp-stars-top .pvp-speed-lines {
            background: repeating-linear-gradient(
                180deg,
                transparent 0,
                transparent 16px,
                rgba(255, 120, 80, 0.05) 17px,
                rgba(255, 255, 255, 0.06) 18px,
                transparent 20px
            );
            animation: pvpSpeedLinesDown 0.35s linear infinite;
        }
        .pvp-stars-bottom .pvp-speed-lines {
            background: repeating-linear-gradient(
                180deg,
                transparent 0,
                transparent 16px,
                rgba(120, 180, 255, 0.05) 17px,
                rgba(255, 255, 255, 0.07) 18px,
                transparent 20px
            );
            animation: pvpSpeedLinesDown 0.35s linear infinite;
        }
        .pvp-arena.pvp-battle-active .pvp-stars-top .pvp-starfield-far { animation-duration: 11s; }
        .pvp-arena.pvp-battle-active .pvp-stars-top .pvp-starfield-mid { animation-duration: 6.5s; }
        .pvp-arena.pvp-battle-active .pvp-stars-top .pvp-starfield-near { animation-duration: 3.5s; }
        .pvp-arena.pvp-battle-active .pvp-stars-bottom .pvp-starfield-far { animation-duration: 11s; }
        .pvp-arena.pvp-battle-active .pvp-stars-bottom .pvp-starfield-mid { animation-duration: 6.5s; }
        .pvp-arena.pvp-battle-active .pvp-stars-bottom .pvp-starfield-near { animation-duration: 3.5s; }
        .pvp-arena.pvp-battle-active .pvp-speed-lines { opacity: 1; }
        @keyframes pvpStarFlyUpFar { from { transform: translateY(0); } to { transform: translateY(-33.333%); } }
        @keyframes pvpStarFlyUpMid { from { transform: translateY(0); } to { transform: translateY(-33.333%); } }
        @keyframes pvpStarFlyUpNear { from { transform: translateY(0); } to { transform: translateY(-33.333%); } }
        @keyframes pvpStarFlyDownFar { from { transform: translateY(0); } to { transform: translateY(33.333%); } }
        @keyframes pvpStarFlyDownMid { from { transform: translateY(0); } to { transform: translateY(33.333%); } }
        @keyframes pvpStarFlyDownNear { from { transform: translateY(0); } to { transform: translateY(33.333%); } }
        @keyframes pvpSpeedLinesUp { from { background-position: 0 0; } to { background-position: 0 -40px; } }
        @keyframes pvpSpeedLinesDown { from { background-position: 0 0; } to { background-position: 0 40px; } }
        @keyframes pvpShake {
            0%, 100% { transform: translate(0, 0); }
            25% { transform: translate(-2px, 1px); }
            75% { transform: translate(2px, -1px); }
        }
        .pvp-half {
            position: absolute;
            left: 0; right: 0;
            height: 46%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4px 8px;
            box-sizing: border-box;
            z-index: 2;
        }
        .pvp-half-enemy { top: 0; flex-direction: column; justify-content: flex-end; padding-bottom: 2px; }
        .pvp-half-player { bottom: 0; flex-direction: column; justify-content: flex-start; padding-top: 2px; }
        .pvp-combatant.hidden { visibility: hidden; pointer-events: none; }
        .pvp-combatant-en {
            flex-direction: column;
            justify-content: flex-end;
        }
        .pvp-combatant-my {
            flex-direction: column;
            justify-content: flex-start;
        }
        .pvp-zone-divider {
            position: absolute;
            left: 0; right: 0;
            top: 46%;
            height: 8%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: 1px solid rgba(255, 80, 60, 0.35);
            border-bottom: 1px solid rgba(255, 80, 60, 0.35);
            background: linear-gradient(180deg, rgba(8, 8, 24, 0.95), rgba(255, 60, 40, 0.06), rgba(8, 8, 24, 0.95));
            z-index: 5;
        }
        .pvp-fx-layer {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 6;
        }
        .pvp-timer {
            position: relative;
            z-index: 7;
            font-size: 10px;
            font-weight: 600;
            color: #ff6655;
            text-shadow: 0 0 8px rgba(255, 80, 60, 0.6);
            letter-spacing: 0.08em;
        }
        .pvp-timer.urgent { color: #ff2222; animation: pvpTimerBlink 0.5s infinite; }
        @keyframes pvpTimerBlink { 50% { opacity: 0.5; } }
        .pvp-combatant {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            z-index: 2;
        }
        .pvp-name {
            font-size: 5px;
            color: #a0c8e0;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .pvp-perks-row {
            display: flex;
            gap: 3px;
            align-items: center;
            min-height: 14px;
            flex-shrink: 0;
        }
        .pvp-perk-slot {
            width: 14px; height: 14px;
            border: 1px solid rgba(255, 120, 60, 0.35);
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.35);
        }
        .pvp-perk-slot.empty { opacity: 0.35; border-style: dashed; }
        .pvp-perk-slot.proc { animation: pvpPerkProc 0.45s ease; }
        @keyframes pvpPerkProc {
            0%, 100% { box-shadow: none; }
            50% { box-shadow: 0 0 8px rgba(255, 140, 60, 0.85); }
        }
        .pvp-ship-wrap {
            position: relative;
            line-height: 0;
            animation: pvpShipBob 2.8s ease-in-out infinite;
            flex-shrink: 0;
        }
        .pvp-ship-stack {
            position: relative;
            display: inline-block;
            line-height: 0;
        }
        .pvp-ship-body {
            position: relative;
            z-index: 2;
            display: inline-block;
            line-height: 0;
        }
        canvas.pvp-engine-flame.ship-flame {
            position: absolute;
            left: 0;
            top: 0;
            width: 8px !important;
            height: 16px !important;
            min-width: 0 !important;
            min-height: 0 !important;
            max-width: none !important;
            max-height: none !important;
            margin: 0 !important;
            padding: 0 !important;
            image-rendering: pixelated !important;
            image-rendering: crisp-edges !important;
            pointer-events: none;
            z-index: 5;
            opacity: 1 !important;
        }
        .pvp-ship-wrap.vip-red-trail .pvp-engine-flame,
        .pvp-lobby-ship.vip-red-trail .pvp-engine-flame,
        .pvp-engine-flame.vip-red-flame {
            filter: drop-shadow(0 0 5px rgba(255, 65, 65, 0.95)) drop-shadow(0 0 10px rgba(180, 20, 20, 0.7));
        }
        .pvp-ship-wrap.vip-purple-trail .pvp-engine-flame,
        .pvp-lobby-ship.vip-purple-trail .pvp-engine-flame,
        .pvp-engine-flame.vip-purple-flame {
            filter: drop-shadow(0 0 5px rgba(184, 92, 255, 0.95)) drop-shadow(0 0 10px rgba(126, 38, 210, 0.65));
        }
        .pvp-ship-wrap.vip-gold-trail .pvp-engine-flame,
        .pvp-lobby-ship.vip-gold-trail .pvp-engine-flame {
            filter: drop-shadow(0 0 5px rgba(255, 212, 0, 0.95)) drop-shadow(0 0 10px rgba(255, 170, 0, 0.65));
        }
        canvas.pvp-engine-flame[data-size="lg"] {
            width: 10px !important;
            height: 20px !important;
        }
        .pvp-ship-wrap .ship-sprite-img,
        .pvp-ship-body .ship-sprite-img,
        .pvp-ship-body > span .ship-sprite-img,
        .pvp-ship-body canvas:not(.pvp-ship-flame) {
            display: block;
            position: relative;
            z-index: 2;
            width: 72px !important;
            height: 72px !important;
            max-height: none !important;
            object-fit: contain;
            image-rendering: auto;
        }
        .pvp-lobby-ship .ship-sprite-img,
        .pvp-lobby-ship .pvp-ship-body .ship-sprite-img,
        .pvp-lobby-ship .pvp-ship-body > span .ship-sprite-img,
        .pvp-lobby-ship .pvp-ship-body canvas:not(.pvp-ship-flame) {
            display: block;
            position: relative;
            z-index: 2;
            width: 104px !important;
            height: 104px !important;
            object-fit: contain;
            image-rendering: auto;
        }
        .pvp-half-enemy .pvp-ship-wrap {
            animation: pvpShipBobEn 2.8s ease-in-out infinite;
            animation-delay: -1.4s;
        }
        .pvp-ship-wrap.pvp-shoot { animation: pvpShipRecoil 0.22s ease; }
        .pvp-half-enemy .pvp-ship-wrap.pvp-shoot { animation: pvpShipRecoilEn 0.22s ease; }
        @keyframes pvpShipRecoil { 0% { transform: translateY(2px); } 100% { transform: translateY(0); } }
        @keyframes pvpShipRecoilEn { 0% { transform: scaleY(-1) translateY(2px); } 100% { transform: scaleY(-1) translateY(0); } }
        @keyframes pvpShipBob {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }
        @keyframes pvpShipBobEn {
            0%, 100% { transform: scaleY(-1) translateY(0); }
            50% { transform: scaleY(-1) translateY(-3px); }
        }
        .pvp-bars { width: 100%; max-width: 150px; flex-shrink: 0; }
        .pvp-bar-row {
            display: flex;
            align-items: center;
            gap: 3px;
            margin: 1px 0;
            font-size: 4px;
        }
        .pvp-bar-row.hidden { display: none; }
        .pvp-bar-label { width: 8px; color: #8898aa; flex-shrink: 0; }
        .pvp-bar-track {
            flex: 1;
            height: 6px;
            background: rgba(0, 8, 24, 0.8);
            border: 1px solid rgba(0, 232, 255, 0.25);
            border-radius: 2px;
            overflow: hidden;
        }
        .pvp-bar-fill { height: 100%; transition: width 0.18s linear; border-radius: 1px; }
        .pvp-bar-fill.shield {
            background: linear-gradient(90deg, #2266cc, #55bbff);
            box-shadow: 0 0 5px rgba(68, 170, 255, 0.45);
        }
        .pvp-bar-fill.hp {
            background: linear-gradient(90deg, #0088aa, var(--neon-cyan));
            box-shadow: 0 0 5px var(--neon-glow-c);
        }
        .pvp-bar-fill.hp.low {
            background: linear-gradient(90deg, #aa2222, #ff4444);
            box-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
        }
        .pvp-bar-val { width: 18px; text-align: right; color: #8898aa; flex-shrink: 0; font-size: 4px; }
        .pvp-log {
            font-size: 4px;
            color: #8898aa;
            min-height: 18px;
            max-height: 24px;
            overflow: hidden;
            text-align: center;
            line-height: 1.35;
            margin: 2px 0 4px;
        }
        .pvp-log .crit { color: #ffd400; }
        .pvp-log .shield-hit { color: #55bbff; }
        .pvp-log .hp-hit { color: #ff6655; }
        .pvp-status-line {
            text-align: center;
            font-size: 6px;
            margin: 4px 0;
            min-height: 10px;
        }
        .pvp-actions { text-align: center; }
        .pvp-actions .btn:disabled { opacity: 0.45; }
        .bar {
            height: 10px;
            background: rgba(0, 8, 24, 0.7);
            border: 1px solid rgba(0, 232, 255, 0.35);
            border-radius: 2px;
            margin: 4px 0;
            overflow: hidden;
            box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
        }
        .bar-fill { height: 100%; transition: width .2s; border-radius: 1px; }
        .bar-shield {
            background: linear-gradient(90deg, #2266cc, #44aaff);
            box-shadow: 0 0 6px rgba(68, 170, 255, 0.5);
        }
        .bar-hp {
            background: linear-gradient(90deg, #00aacc, var(--neon-cyan));
            box-shadow: 0 0 6px var(--neon-glow-c);
        }

        /* Экран загрузки */
        #load-screen {
            position: fixed;
            inset: 0;
            z-index: 100000;
            overflow: hidden;
            isolation: isolate;
            background: #03060c;
            transition: opacity 0.55s ease;
        }
        #load-screen::before {
            content: '';
            position: absolute;
            inset: -20px;
            z-index: -1;
            background: linear-gradient(rgba(2, 6, 18, 0.55), rgba(2, 6, 18, 0.68)), url('../mines/baner.png') center / cover no-repeat;
            filter: blur(16px) brightness(0.65);
            transform: scale(1.04);
        }
        #load-screen::after {
            content: '';
            position: absolute;
            inset: 48% 0 0;
            z-index: 2;
            pointer-events: none;
            background: linear-gradient(180deg, transparent, rgba(2, 6, 18, 0.32) 30%, rgba(2, 6, 18, 0.85));
        }
        #load-screen.fade-out {
            opacity: 0;
            pointer-events: none;
        }
        .load-banner {
            position: absolute;
            inset: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            pointer-events: none;
            user-select: none;
        }
        #load-screen .load-stars {
            position: absolute;
            inset: 0;
            z-index: 2;
            opacity: 0.2;
            pointer-events: none;
        }
        .load-progress {
            position: absolute;
            z-index: 3;
            left: 50%;
            bottom: calc(36px + env(safe-area-inset-bottom, 0px));
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            width: min(78vw, 320px);
            box-sizing: border-box;
            padding: 10px 14px 8px;
            border: 1px solid rgba(0, 232, 255, 0.25);
            border-radius: 12px;
            background: rgba(2, 10, 24, 0.76);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.38), inset 0 0 18px rgba(0, 180, 220, 0.06);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            transform: translateX(-50%);
        }
        .load-version {
            position: absolute;
            z-index: 4;
            right: 12px;
            bottom: calc(7px + env(safe-area-inset-bottom, 0px));
            left: 12px;
            font-family: 'Press Start 2P', monospace;
            font-size: 7px;
            color: rgba(0, 255, 255, 0.7);
            letter-spacing: 0.12em;
            text-align: center;
            text-shadow: 0 1px 8px #000;
        }
        .load-bar-wrap {
            width: 100%;
        }
        .load-bar-track {
            height: 6px;
            border-radius: 3px;
            background: rgba(0, 40, 60, 0.7);
            border: 1px solid rgba(0, 255, 255, 0.25);
            overflow: hidden;
            box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
        }
        .load-bar-fill {
            height: 100%;
            width: 0%;
            border-radius: 2px;
            background: linear-gradient(90deg, #0088aa, var(--neon-cyan), #66ffff);
            box-shadow: 0 0 10px var(--neon-glow-c);
            transition: width 0.15s ease-out;
        }
        .load-pct {
            font-family: 'Rajdhani', sans-serif;
            font-size: 18px;
            font-weight: 500;
            color: #a8f0ff;
            letter-spacing: 0.08em;
        }
        .load-status {
            font-family: 'Rajdhani', sans-serif;
            font-size: 13px;
            font-weight: 400;
            color: rgba(160, 220, 255, 0.8);
            letter-spacing: 0.06em;
            min-height: 1.2em;
            text-align: center;
        }
        @media (max-height: 560px) {
            .load-progress {
                bottom: calc(30px + env(safe-area-inset-bottom, 0px));
                gap: 2px;
                padding: 6px 12px 4px;
            }
            .load-pct {
                font-size: 15px;
                line-height: 1;
            }
            .load-status {
                font-size: 11px;
                min-height: 1em;
            }
        }

        /* ─── TON Wallet UI Tab & Elements ─── */
        .wallet-tab-card {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 4px;
        }
        .wallet-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0, 232, 255, 0.2);
            padding-bottom: 8px;
        }
        .wallet-title {
            font-family: 'Press Start 2P', monospace;
            font-size: 10px;
            color: var(--neon-cyan);
            letter-spacing: 0.05em;
        }
        .wallet-status {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.05em;
            padding: 2px 8px;
            border-radius: 12px;
        }
        .wallet-status.connected {
            color: #00ffaa;
            background: rgba(0, 255, 170, 0.12);
            border: 1px solid rgba(0, 255, 170, 0.3);
        }
        .wallet-status.disconnected {
            color: #ff6666;
            background: rgba(255, 102, 102, 0.12);
            border: 1px solid rgba(255, 102, 102, 0.3);
        }
        .wallet-desc {
            font-size: 13px;
            line-height: 1.4;
            color: #a8cce0;
            margin: 0;
        }
        .wallet-connect-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 16px;
            background: rgba(0, 30, 60, 0.4);
            border: 1px dashed rgba(0, 232, 255, 0.35);
            border-radius: 8px;
        }
        .wallet-ton-icon {
            font-size: 36px;
            filter: drop-shadow(0 0 10px rgba(0, 232, 255, 0.6));
        }
        .btn-ton-connect {
            background: linear-gradient(135deg, #0098ea, #00c6ff);
            color: #fff !important;
            font-weight: 700;
            border: none;
            box-shadow: 0 0 15px rgba(0, 152, 234, 0.4);
            padding: 10px 20px;
        }
        .btn-ton-connect:hover {
            box-shadow: 0 0 20px rgba(0, 152, 234, 0.7);
        }
        .wallet-info-box {
            background: rgba(0, 20, 40, 0.6);
            border: 1px solid rgba(0, 232, 255, 0.25);
            border-radius: 6px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .wallet-label {
            font-size: 11px;
            color: #7da5bc;
            text-transform: uppercase;
        }
        .wallet-address {
            font-family: monospace;
            font-size: 14px;
            color: #00e8ff;
            word-break: break-all;
            background: rgba(0, 0, 0, 0.3);
            padding: 6px 8px;
            border-radius: 4px;
            border: 1px solid rgba(0, 232, 255, 0.15);
        }
        .wallet-device-info {
            font-size: 12px;
            color: #8faec2;
        }
        .wallet-security-box {
            background: rgba(10, 25, 45, 0.5);
            border-left: 3px solid #00e8ff;
            padding: 10px 12px;
            border-radius: 0 6px 6px 0;
        }
        .wallet-sec-title {
            font-size: 12px;
            font-weight: 700;
            color: #00e8ff;
            margin-bottom: 4px;
        }
        .wallet-sec-desc {
            font-size: 11px;
            line-height: 1.35;
            color: #88a8bc;
        }

        /* TON Connect UI должен быть выше .help-overlay (z-index 200000). */
        #tc-widget-root,
        tc-root {
            position: fixed !important;
            z-index: 2147483647 !important;
        }
        html.ton-connect-open .help-overlay {
            z-index: 1 !important;
            pointer-events: none !important;
        }

        /* Контейнеры: крупные изображения и один управляемый скролл внутри ангара. */
        #win-hangar .container-row {
            gap: 10px;
            min-height: 72px;
        }
        #win-hangar .container-row .container-icon {
            width: 45px;
            height: 45px;
        }
        #win-hangar .container-slots {
            gap: 8px;
        }
        #win-hangar .container-scene.compact {
            height: 78px;
        }
        #win-hangar .container-scene.compact .container-scanner {
            height: 64px;
        }
        #win-hangar .container-scene.compact .container-on-belt .container-icon {
            width: 51px;
            height: 51px;
        }
        #container-panel-root {
            flex: 1 1 auto;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
        @media (max-height: 620px) {
            #win-hangar .container-scene.compact {
                height: 68px;
            }
            #win-hangar .container-scene.compact .container-scanner {
                height: 54px;
            }
            #win-hangar .container-scene.compact .container-on-belt .container-icon {
                width: 43.5px;
                height: 43.5px;
            }
        }

        /* Дерево прокачки: компактные круги-узлы и всплывающая информация. */
        .perk-tree-modal .perk-tree-style-picker { display: none; }
        .perk-tree-modal {
            width: min(100%, 560px) !important;
            background: radial-gradient(circle at 50% 28%, rgba(26, 74, 132, .34), rgba(3, 8, 24, .99) 64%) !important;
        }
        .perk-tree-modal .perk-tree {
            width: 100% !important;
            padding: 18px 10px 24px !important;
            border: 1px solid rgba(0, 232, 255, .22) !important;
            border-radius: 10px !important;
            background: radial-gradient(circle at 50% 12%, rgba(17, 64, 104, .3), rgba(2, 8, 22, .82) 55%) !important;
            overflow: visible !important;
        }
        .perk-tree-modal .perk-tree-flow {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 0 !important;
        }
        .perk-tree-modal .perk-tree-level-row,
        .perk-tree-modal .perk-tree-branch-row { width: 100% !important; }
        .perk-tree-modal .perk-tree-connector {
            width: 2px !important;
            height: 30px !important;
            margin: 0 !important;
            background: rgba(79, 113, 143, .55) !important;
            box-shadow: 0 0 4px rgba(0, 232, 255, .14) !important;
        }
        .perk-tree-modal .perk-tree-connector.active {
            background: #00e8ff !important;
            box-shadow: 0 0 7px #00e8ff, 0 0 18px rgba(0, 232, 255, .88) !important;
        }
        .perk-tree-modal .perk-tree-node-wrap {
            position: relative;
            display: flex;
            justify-content: center;
            width: 100%;
            min-height: 68px;
        }
        .perk-tree-modal .perk-tree-node {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 58px !important;
            height: 58px !important;
            min-height: 58px !important;
            padding: 0 !important;
            border: 2px solid rgba(102, 155, 190, .62) !important;
            border-radius: 50% !important;
            background: radial-gradient(circle at 35% 28%, rgba(34, 104, 151, .82), rgba(5, 18, 40, .98) 70%) !important;
            color: #9bdcff;
            cursor: pointer;
            transition: transform .18s, border-color .18s, box-shadow .2s, filter .2s;
        }
        .perk-tree-modal .perk-tree-node:hover,
        .perk-tree-modal .perk-tree-node:focus-visible { transform: scale(1.08); outline: none; border-color: #fff !important; }
        .perk-tree-modal .perk-tree-node.locked { opacity: .62 !important; filter: grayscale(.3) brightness(.72) !important; }
        .perk-tree-modal .perk-tree-node.unlocked {
            opacity: 1 !important;
            border-color: #63f0bc !important;
            box-shadow: 0 0 8px #63f0bc, 0 0 22px rgba(99, 240, 188, .58), inset 0 0 14px rgba(99, 240, 188, .22) !important;
        }
        .perk-tree-modal .perk-tree-node-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 100% !important;
            height: 100% !important;
            flex: none !important;
            border: 0 !important;
            border-radius: 50% !important;
            background: transparent !important;
            color: #9bdcff !important;
            font-size: 25px !important;
            box-shadow: none !important;
        }
        .perk-tree-modal .perk-tree-upgrade-glyph {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            color: inherit;
        }
        .perk-tree-modal .perk-tree-upgrade-glyph svg {
            display: block;
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        .perk-tree-modal .perk-tree-node-level { display: none; }
        .perk-tree-modal .perk-tree-node.unlocked .perk-tree-node-level { border-color: #63f0bc; color: #b4ffe0; }
        .perk-tree-modal .perk-tree-node-wrap.node-kind-branch .perk-tree-node { border-color: #ffd45a !important; color: #ffe997; }
        .perk-tree-modal .perk-tree-node-wrap.node-kind-breakthrough .perk-tree-node { border-color: #ff54d9 !important; color: #ffb2ef; }
        .perk-tree-modal .perk-tree-node-popover,
        .perk-tree-modal .perk-tree-branch-popover {
            position: absolute;
            z-index: 5;
            top: 64px;
            left: 50%;
            display: none;
            width: min(270px, calc(100vw - 54px));
            transform: translateX(-50%);
            padding: 9px 10px;
            border: 1px solid rgba(0, 232, 255, .55);
            border-radius: 7px;
            background: rgba(4, 15, 34, .98);
            box-shadow: 0 0 16px rgba(0, 232, 255, .2), 0 8px 22px rgba(0, 0, 0, .45);
            text-align: left;
        }
        .perk-tree-modal .perk-tree-node-wrap.is-open .perk-tree-node-popover,
        .perk-tree-modal .perk-tree-branch.is-open .perk-tree-branch-popover { display: block; }
        .perk-tree-modal .perk-tree-node-popover::before,
        .perk-tree-modal .perk-tree-branch-popover::before {
            content: '';
            position: absolute;
            top: -6px;
            left: calc(50% - 6px);
            width: 10px;
            height: 10px;
            border-top: 1px solid rgba(0, 232, 255, .55);
            border-left: 1px solid rgba(0, 232, 255, .55);
            background: #06152b;
            transform: rotate(45deg);
        }
        .perk-tree-modal .perk-tree-node-popover b,
        .perk-tree-modal .perk-tree-node-popover small,
        .perk-tree-modal .perk-tree-node-popover em,
        .perk-tree-modal .perk-tree-branch-popover b,
        .perk-tree-modal .perk-tree-branch-popover small { display: block; }
        .perk-tree-modal .perk-tree-node-popover b,
        .perk-tree-modal .perk-tree-branch-popover b { color: #e8fbff; font-size: 11px; line-height: 1.25; }
        .perk-tree-modal .perk-tree-node-popover small,
        .perk-tree-modal .perk-tree-branch-popover small { margin-top: 4px; color: #b2cbd9; font-size: 9px; line-height: 1.4; }
        .perk-tree-modal .perk-tree-node-popover em { margin-top: 6px; color: #ffd45a; font-size: 8px; font-style: normal; letter-spacing: .05em; }
        .perk-tree-modal .perk-tree-study { margin-top: 7px; }
        .perk-tree-modal .perk-tree-branches {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            align-items: start;
            gap: 26px !important;
            width: min(100%, 360px) !important;
            margin-top: 0;
            position: relative;
        }
        .perk-tree-modal .perk-tree-branches::before {
            content: '';
            position: absolute;
            top: -15px;
            left: 25%;
            right: 25%;
            display: block;
            height: 2px;
            background: rgba(79, 113, 143, .55);
        }
        .perk-tree-modal .perk-tree-branches::after {
            content: '';
            position: absolute;
            top: -30px;
            left: 50%;
            display: block;
            width: 2px;
            height: 15px;
            background: rgba(79, 113, 143, .55);
        }
        .perk-tree-modal .perk-tree-branches.active::before,
        .perk-tree-modal .perk-tree-branches.active::after { background: #00e8ff; box-shadow: 0 0 7px #00e8ff, 0 0 16px rgba(0, 232, 255, .8); }
        .perk-tree-modal .perk-tree-path {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 0;
            padding-top: 15px;
        }
        .perk-tree-modal .perk-tree-path::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 15px;
            background: rgba(79, 113, 143, .55);
        }
        .perk-tree-modal .perk-tree-branches.active .perk-tree-path::before { background: #00e8ff; box-shadow: 0 0 7px #00e8ff; }
        .perk-tree-modal .perk-tree-path.selected .perk-tree-node { border-color: #ff54d9 !important; }
        .perk-tree-modal .branch-connector {
            height: 30px !important;
            background: rgba(79, 113, 143, .55) !important;
        }
        .perk-tree-modal .perk-tree-path.unlocked .branch-connector { background: #00e8ff !important; box-shadow: 0 0 7px #00e8ff; }
        .perk-tree-modal .perk-tree-branch-head {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 58px;
            height: 58px;
            margin: 0 auto;
            padding: 0 !important;
            border: 2px solid rgba(201, 123, 255, .7);
            border-radius: 50%;
            background: radial-gradient(circle at 35% 28%, rgba(114, 54, 151, .88), rgba(27, 9, 53, .98) 70%);
            color: #f1cfff;
            cursor: pointer;
        }
        .perk-tree-modal .perk-tree-branch-head:hover,
        .perk-tree-modal .perk-tree-branch-head:focus-visible { border-color: #fff; outline: none; box-shadow: 0 0 12px rgba(213, 150, 255, .7); }
        .perk-tree-modal .perk-tree-branch.selected .perk-tree-branch-head { border-color: #ff54d9; box-shadow: 0 0 9px #ff54d9, 0 0 22px rgba(255, 84, 217, .55); }
        .perk-tree-modal .perk-tree-branch-mark { top: 2px; right: 3px; font-size: 9px; }
        .perk-tree-modal .perk-tree-branch-icon { float: none; width: auto; height: auto; margin: 0; border: 0; color: inherit; font-size: 22px; }
        .perk-tree-modal .perk-tree-branch-copy { display: none; }
        .perk-tree-modal .perk-tree-branch-popover { top: 66px; }
        .perk-tree-modal .perk-tree-path-steps { margin-top: 6px; padding: 0; }
        .perk-tree-modal .perk-tree-path-step { padding: 3px 4px; border-left: 2px solid rgba(173, 142, 255, .38); color: #a9c6d8; font-size: 8px; }
        .perk-tree-modal .perk-tree-path-step.unlocked { border-color: #ff54d9; color: #f0b8e8; }
        .perk-tree-modal .perk-tree-path-select { width: 100%; margin-top: 7px; padding: 5px; border: 1px solid rgba(255, 212, 90, .5); border-radius: 4px; background: rgba(61, 44, 7, .65); color: #ffe27d; font: inherit; font-size: 8px; cursor: pointer; }
        .perk-tree-modal .perk-tree-path-select:disabled { cursor: default; opacity: .72; }
        @media (max-width: 560px) {
            .perk-tree-modal { max-height: 92vh; }
            .perk-tree-modal .perk-tree { padding-left: 4px !important; padding-right: 4px !important; }
            .perk-tree-modal .perk-tree-connector { height: 24px !important; }
            .perk-tree-modal .perk-tree-node-wrap { min-height: 52px; }
            .perk-tree-modal .perk-tree-node,
            .perk-tree-modal .perk-tree-branch-head { width: 52px !important; height: 52px !important; min-height: 52px !important; }
            .perk-tree-modal .perk-tree-node-icon { font-size: 22px !important; }
            .perk-tree-modal .perk-tree-node-icon .perk-thumb { width: 25px; height: 25px; }
            .perk-tree-modal .perk-tree-node-popover,
            .perk-tree-modal .perk-tree-branch-popover { width: min(140px, calc(100vw - 42px)); }
            .perk-tree-modal .perk-tree-branches { width: min(100%, 260px) !important; gap: 14px !important; }
        }

        /* Финальная схема дерева: фон, цельные связи, активное свечение и компактные карточки. */
        .perk-tree-modal .perk-tree {
            position: relative;
            isolation: isolate;
            overflow: visible !important;
            min-height: 520px;
            background: radial-gradient(circle at 50% 45%, rgba(18, 70, 111, .22), rgba(2, 8, 22, .9) 66%) !important;
        }
        .perk-tree-modal .perk-tree-stars,
        .perk-tree-modal .perk-tree-stars::before,
        .perk-tree-modal .perk-tree-stars::after {
            position: absolute;
            inset: 0;
            pointer-events: none;
            content: '';
        }
        .perk-tree-modal .perk-tree-stars { z-index: 0; opacity: .62; overflow: hidden; }
        .perk-tree-modal .perk-tree-stars::before {
            background-image:
                radial-gradient(circle at 8% 16%, rgba(255,255,255,.8) 0 1px, transparent 1.7px),
                radial-gradient(circle at 22% 78%, rgba(126,222,255,.7) 0 1px, transparent 1.8px),
                radial-gradient(circle at 38% 28%, rgba(255,255,255,.65) 0 1px, transparent 1.7px),
                radial-gradient(circle at 56% 84%, rgba(199,170,255,.75) 0 1px, transparent 1.8px),
                radial-gradient(circle at 76% 22%, rgba(255,255,255,.78) 0 1px, transparent 1.7px),
                radial-gradient(circle at 91% 67%, rgba(126,222,255,.65) 0 1px, transparent 1.8px);
            animation: perkTreeStarsTwinkle 3.4s ease-in-out infinite alternate;
        }
        .perk-tree-modal .perk-tree-stars::after {
            background-image:
                radial-gradient(circle at 14% 48%, rgba(255,255,255,.7) 0 1px, transparent 1.6px),
                radial-gradient(circle at 31% 10%, rgba(255,220,138,.7) 0 1px, transparent 1.7px),
                radial-gradient(circle at 67% 54%, rgba(255,255,255,.65) 0 1px, transparent 1.6px),
                radial-gradient(circle at 84% 90%, rgba(184,157,255,.7) 0 1px, transparent 1.7px);
            animation: perkTreeStarsTwinkle 2.2s ease-in-out 1s infinite alternate-reverse;
        }
        @keyframes perkTreeStarsTwinkle { from { opacity: .25; } to { opacity: .95; } }
        .perk-tree-modal .perk-tree-ship {
            position: absolute;
            z-index: 0;
            left: 50%;
            top: 52%;
            width: 220px;
            height: 330px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translate(-50%, -50%) scale(1.55);
            opacity: .12;
            filter: saturate(.75) drop-shadow(0 0 18px rgba(0, 213, 255, .4));
            pointer-events: none;
        }
        .perk-tree-modal .perk-tree-ship canvas,
        .perk-tree-modal .perk-tree-ship .ship-sprite-img { max-width: 220px; max-height: 330px; width: auto; height: auto; }
        .perk-tree-modal .perk-tree-flow { position: relative; z-index: 1; }
        .perk-tree-modal .perk-tree-node-wrap { min-height: 58px; }
        .perk-tree-modal .perk-tree-node.unlocked {
            box-shadow: 0 0 8px #63f0bc, 0 0 22px rgba(99, 240, 188, .58), inset 0 0 14px rgba(99, 240, 188, .22) !important;
        }
        .perk-tree-modal .perk-tree-node-icon svg,
        .perk-tree-modal .perk-tree-branch-icon svg { width: 28px; height: 28px; }
        .perk-tree-modal .perk-tree-branch-icon { display: inline-flex; align-items: center; justify-content: center; }
        .perk-tree-modal .perk-tree-branch-icon svg { width: 25px; height: 25px; }
        .perk-tree-modal .perk-tree-branch-caption { margin-bottom: 18px; }
        .perk-tree-modal .perk-tree-branch-caption::after {
            display: block;
            bottom: -18px;
            height: 18px;
            background: rgba(79, 113, 143, .55);
            box-shadow: none;
        }
        .perk-tree-modal .perk-tree-branch-caption.active::after {
            background: #00e8ff;
            box-shadow: 0 0 7px #00e8ff, 0 0 16px rgba(0, 232, 255, .8);
        }
        .perk-tree-modal .perk-tree-branches { margin-top: 0; }
        .perk-tree-modal .perk-tree-branches::before {
            top: 0;
            left: 25%;
            right: 25%;
            height: 2px;
            background: rgba(79, 113, 143, .55);
            box-shadow: none;
        }
        .perk-tree-modal .perk-tree-branches.active::before {
            background: #00e8ff;
            box-shadow: 0 0 7px #00e8ff, 0 0 16px rgba(0, 232, 255, .8);
        }
        .perk-tree-modal .perk-tree-branch::before { top: 0; height: 18px; background: rgba(79, 113, 143, .55); box-shadow: none; }
        .perk-tree-modal .perk-tree-branches.active .perk-tree-branch::before { background: #00e8ff; box-shadow: 0 0 7px #00e8ff; }
        .perk-tree-modal .perk-tree-node-popover,
        .perk-tree-modal .perk-tree-branch-popover {
            width: min(135px, calc(100vw - 42px));
            min-width: 135px;
            padding: 7px 8px;
            border: 1px solid rgba(97, 132, 157, .72);
            border-radius: 4px;
            background: rgba(3, 12, 28, .98);
            box-shadow: 0 6px 14px rgba(0, 0, 0, .48);
            text-align: right;
            overflow-wrap: anywhere;
            word-break: normal;
        }
        .perk-tree-modal .perk-tree-node-wrap.unlocked.is-open .perk-tree-node-popover,
        .perk-tree-modal .perk-tree-branch.is-open.active .perk-tree-branch-popover {
            border-color: #00e8ff;
            box-shadow: 0 0 7px #00e8ff, 0 0 16px rgba(0, 232, 255, .64), 0 6px 14px rgba(0, 0, 0, .48);
        }
        .perk-tree-modal .perk-tree-node-wrap:not(.is-open) .perk-tree-node-popover,
        .perk-tree-modal .perk-tree-branch:not(.is-open) .perk-tree-branch-popover { box-shadow: 0 6px 14px rgba(0, 0, 0, .48); }
        .perk-tree-modal .perk-tree-node-popover b,
        .perk-tree-modal .perk-tree-node-popover small,
        .perk-tree-modal .perk-tree-node-popover em,
        .perk-tree-modal .perk-tree-branch-popover b,
        .perk-tree-modal .perk-tree-branch-popover small { line-height: 1.15; margin-top: 2px; }
        .perk-tree-modal .perk-tree-node-popover b,
        .perk-tree-modal .perk-tree-branch-popover b { font-size: 9px; }
        .perk-tree-modal .perk-tree-node-popover small,
        .perk-tree-modal .perk-tree-branch-popover small { font-size: 8px; }
        .perk-tree-modal .perk-tree-node-popover em { font-size: 7px; }
        .perk-tree-modal .perk-tree-node-popover::before,
        .perk-tree-modal .perk-tree-branch-popover::before { border-color: rgba(97, 132, 157, .72); }
        .perk-tree-modal .perk-tree-node-wrap.unlocked.is-open .perk-tree-node-popover::before,
        .perk-tree-modal .perk-tree-branch.is-open.active .perk-tree-branch-popover::before { border-color: #00e8ff; }
        @media (max-width: 560px) {
            .perk-tree-synergy-button { margin: 0 28px 8px 0; padding: 4px 6px; font-size: 7px; }
            .perk-tree-synergy-button span { display: none; }
            .perk-tree-synergy-panel { margin-right: 28px; }
            .perk-tree-synergy-table-head,
            .perk-tree-synergy-table-row { grid-template-columns: 62px minmax(0, 1fr); gap: 4px; }
            .perk-tree-synergy-table-head > span:last-child,
            .perk-tree-synergy-table-row > span:last-child { grid-column: 2; }
            .perk-tree-synergy-table-row { align-items: start; }
            .perk-tree-synergy-row { grid-template-columns: 1fr; gap: 3px; }
            .perk-tree-synergy-bonus { text-align: left; }
            .perk-tree-modal .perk-tree { min-height: 455px; }
            .perk-tree-modal .perk-tree-ship { transform: translate(-50%, -50%) scale(1.2); }
            .perk-tree-modal .perk-tree-node-wrap { min-height: 52px; }
            .perk-tree-modal .perk-tree-branch-caption { margin-bottom: 14px; }
            .perk-tree-modal .perk-tree-branch-caption::after { bottom: -14px; height: 14px; }
            .perk-tree-modal .perk-tree-branch::before { height: 14px; }
        }

        /* Дерево использует ту же консольную палитру, что и верхняя навигация. */
        .perk-tree-modal {
            border-color: rgba(0, 232, 255, .55) !important;
            background: radial-gradient(circle at 50% 28%, rgba(20, 62, 104, .42), rgba(6, 10, 18, .99) 66%) !important;
            box-shadow: 0 0 28px rgba(0, 232, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -14px 26px rgba(0, 0, 0, .38) !important;
        }
        .perk-tree-modal .perk-tree {
            border-color: rgba(60, 80, 110, .7) !important;
            background: linear-gradient(180deg, rgba(26, 36, 56, .9), rgba(6, 10, 18, .96)) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -12px 22px rgba(0, 0, 0, .3);
        }
        .perk-tree-modal .perk-tree-node,
        .perk-tree-modal .perk-tree-branch-head {
            border-color: rgba(96, 130, 160, .68) !important;
            background: linear-gradient(180deg, #1a2438 0%, #0e1424 55%, #060a12 100%) !important;
            box-shadow: 0 3px 0 #030508, inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -3px 7px rgba(0, 0, 0, .38);
            color: #9eccff !important;
        }
        .perk-tree-modal .perk-tree-node.unlocked {
            border-color: #00e8ff !important;
            box-shadow: 0 3px 0 #041018, 0 0 12px rgba(0, 232, 255, .3), inset 0 0 12px rgba(0, 232, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
        }
        .perk-tree-modal .perk-tree-path.selected .perk-tree-node,
        .perk-tree-modal .perk-tree-path.selected .perk-tree-branch-head {
            border-color: #00e8ff !important;
            box-shadow: 0 3px 0 #041018, 0 0 14px rgba(0, 232, 255, .44), inset 0 0 12px rgba(0, 232, 255, .14) !important;
        }
        .perk-tree-modal .perk-tree {
            --perk-wire: 3px;
            --perk-wire-gap: 32px;
            --perk-drop: 18px;
            --perk-wire-metal: linear-gradient(180deg, #3a4558 0%, #1a2030 100%);
            --perk-wire-metal-x: linear-gradient(90deg, #3a4558 0%, #1a2030 100%);
            --perk-wire-live: linear-gradient(180deg, #00e8ff 0%, #2a6a80 42%, #00e8ff 100%);
            --perk-wire-live-x: linear-gradient(90deg, #00e8ff 0%, #2a6a80 42%, #00e8ff 100%);
        }
        .perk-tree-modal .perk-tree-node-wrap {
            overflow: visible;
            min-height: 58px;
        }
        .perk-tree-modal .perk-tree-node { z-index: 2; overflow: visible; }
        .perk-tree-modal .perk-tree-connector,
        .perk-tree-modal .branch-connector,
        .perk-tree-modal .perk-tree-branches::before,
        .perk-tree-modal .perk-tree-branches::after,
        .perk-tree-modal .perk-tree-path::before {
            background: var(--perk-wire-metal) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 4px rgba(0, 0, 0, .45) !important;
            border-radius: 0 !important;
        }
        .perk-tree-modal .perk-tree-branches::before {
            background: var(--perk-wire-metal-x) !important;
        }
        /* ПК Telegram: общий масштаб и безопасная раскладка всех вкладок. */
        html.layout-pc {
            --panel-bottom-h: 112px;
            --bottom-nav-model-height: 112px;
        }
        html.layout-pc .bottom-nav {
            padding: 0 18px;
        }
        html.layout-pc .cockpit-console {
            max-width: 600px;
            margin: 0 auto;
            padding: 10px 18px 8px;
        }
        html.layout-pc .cockpit-console-deck {
            gap: 8px;
            padding: 6px 8px;
        }
        html.layout-pc .cockpit-console-title { font-size: 9px; }
        html.layout-pc .nav-btn {
            max-width: 150px;
            min-height: 58px;
            padding: 9px 8px 7px;
            font-size: 10px;
            letter-spacing: .05em;
            gap: 4px;
        }
        html.layout-pc .nav-btn .nav-icon { width: 25px; height: 25px; }

        /* Model lower navigation with transparent, interactive hit targets over the artwork. */
        .bottom-nav .cockpit-console {
            height: var(--bottom-nav-model-height);
            padding: 0;
            overflow: hidden;
            background: transparent;
            border: 0;
            border-radius: 0;
            box-shadow: none;
        }
        .bottom-nav .cockpit-console::before,
        .bottom-nav .cockpit-console::after,
        .bottom-nav .cockpit-corner-rivets,
        .bottom-nav .cockpit-console-header,
        .bottom-nav .cockpit-console-footer {
            display: none;
        }
        .bottom-nav .bottom-nav-model {
            position: absolute;
            z-index: 0;
            top: 50%;
            left: 50%;
            width: 100%;
            height: calc(var(--bottom-nav-model-height) * 1.795);
            object-fit: fill;
            transform: translate(-50%, -50%);
            pointer-events: none;
            user-select: none;
        }
        .bottom-nav .cockpit-console-deck {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 50%;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0 5%;
            gap: 1.5%;
            transform: translateX(-50%);
            background: transparent;
            border: 0;
            border-radius: 0;
            box-shadow: none;
        }
        .bottom-nav .nav-btn {
            flex: 1 1 0;
            min-width: 0;
            max-width: none;
            min-height: 0;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            color: transparent;
            font-size: 0;
            line-height: 1;
            text-shadow: none;
            background: transparent;
            border: 0;
            border-radius: 14px;
            box-shadow: none;
            transform: translateY(0);
            transition: transform 0.08s ease, filter 0.08s ease, background-color 0.12s ease, box-shadow 0.12s ease;
        }
        .bottom-nav .nav-btn .nav-icon,
        .bottom-nav .nav-btn .nav-label {
            opacity: 0;
            pointer-events: none;
        }
        .bottom-nav .nav-btn::before { display: none; }
        .bottom-nav .nav-btn:hover:not(.active) {
            filter: brightness(1.12);
            background: radial-gradient(ellipse at center, rgba(0, 232, 255, 0.08), transparent 76%);
        }
        .bottom-nav .nav-btn.active {
            color: transparent;
            background: radial-gradient(ellipse at center, rgba(0, 232, 255, 0.2), rgba(0, 232, 255, 0.06) 62%, transparent 82%);
            border: 0;
            box-shadow: inset 0 0 18px rgba(0, 232, 255, 0.4), 0 0 14px rgba(0, 232, 255, 0.28);
            text-shadow: none;
            filter: brightness(1.12);
        }
        .bottom-nav .nav-btn:active:not(:disabled) {
            transform: translateY(3px);
            filter: brightness(1.18);
            background-color: rgba(0, 232, 255, 0.12);
            box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.48), 0 0 12px rgba(0, 232, 255, 0.3);
        }
        .bottom-nav .nav-btn.active:active:not(:disabled) {
            transform: translateY(3px);
            box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.52), 0 0 14px rgba(0, 232, 255, 0.38);
        }
        @media (prefers-reduced-motion: reduce) {
            .bottom-nav .nav-btn { transition: none; }
        }

        html.layout-pc .mining-hud-actions { gap: 6px; }
        html.layout-pc .mining-hud-actions-left { left: 14px; }
        html.layout-pc .mining-hud-actions-right { right: 14px; }
        html.layout-pc .btn-action {
            width: 94px;
            height: 48px;
            padding: 3px 6px;
            font-size: 9px;
            line-height: 1.15;
        }
        html.layout-pc .btn-action .action-icon { width: 19px; height: 19px; }
        html.layout-pc .btn-action-spice { width: 66px; height: 34px; font-size: 8px; }

        html.layout-pc .window {
            width: min(92%, 560px);
            max-height: min(88vh, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 24px));
            padding: 18px 18px 16px;
            font-size: var(--ui-fs-md);
        }
        html.layout-pc .window-map { width: min(94%, 620px); max-width: 620px; padding: 16px 16px 18px; }
        html.layout-pc .window-map-sub { width: min(94%, 640px); max-width: 640px; padding: 14px 16px 18px; }
        html.layout-pc .wtitle { font-size: 16px; line-height: 1.25; letter-spacing: .09em; margin-bottom: 12px; }
        html.layout-pc .btn { font-size: 13px; line-height: 1.25; padding: 11px 12px; min-height: 42px; }
        html.layout-pc .btn-sm { font-size: 11px; padding: 7px 10px; min-height: 34px; }
        html.layout-pc .map-back-btn { font-size: 11px !important; padding: 9px 12px !important; margin-bottom: 10px; }
        html.layout-pc .map-header-note { font-size: 12px; line-height: 1.5; margin: -4px 0 12px; }
        html.layout-pc .hangar-help-btn { width: 32px; height: 32px; font-size: 17px; }

        html.layout-pc .star-map-viewport { max-height: min(70vh, 560px); }
        html.layout-pc .map-system-icon { width: 50px; height: 50px; font-size: 21px; }
        html.layout-pc .map-system-image { width: 37px; height: 37px; }
        html.layout-pc .map-system-glyph { font-size: 28px; }
        html.layout-pc .map-rift-glyph { width: 30px; height: 30px; }
        html.layout-pc .map-system-name { max-width: 110px; font-size: 10px; line-height: 1.25; letter-spacing: .05em; }
        html.layout-pc .map-system-sub { font-size: 9px; }
        html.layout-pc .map-system-badge { font-size: 8px; padding: 2px 5px; }
        html.layout-pc .map-faction-glyph,
        html.layout-pc .map-faction-glyph svg { width: 28px; height: 28px; }
        html.layout-pc .map-system-glyph-minigames svg {
            width: 30px;
            height: 30px;
            transform: scale(1.08, 1.3);
        }
        html.layout-pc .map-faction-glyph::after { font-size: 11px; line-height: 28px; }
        html.layout-pc .minigame-list { gap: 9px; margin-top: 8px; }
        html.layout-pc .minigame-row { gap: 13px; min-height: 88px; padding: 12px; }
        html.layout-pc .minigame-row-icon-frame { width: 56px; height: 56px; flex-basis: 56px; }
        html.layout-pc .minigame-row-icon { font-size: 30px; }
        html.layout-pc .minigame-row-name { font-size: 14px; line-height: 1.3; }
        html.layout-pc .minigame-row-status { font-size: 8px; }
        html.layout-pc .minigame-row-desc { font-size: 12px; line-height: 1.4; }
        html.layout-pc .minigame-row-meta { font-size: 6px; margin-top: 7px; }
        html.layout-pc .minigame-row-caret { font-size: 24px; }
        html.layout-pc #win-map-minigames .faction-hq-titlebar { min-height: 34px; }
        html.layout-pc #win-map-minigames #btn-minigames-help { width: 32px; height: 32px; }

        html.layout-pc #win-map-invasion .checkin-title,
        html.layout-pc #win-map-collision .wtitle,
        html.layout-pc #win-map-boss .wtitle,
        html.layout-pc #win-map-minigames .wtitle,
        html.layout-pc #win-map-snake .wtitle,
        html.layout-pc #win-map-galaga .wtitle { font-size: 16px; }
        html.layout-pc .collision-info,
        html.layout-pc .collision-rewards,
        html.layout-pc .collision-status { font-size: 13px; line-height: 1.5; }
        html.layout-pc .collision-info strong,
        html.layout-pc .collision-rewards strong { font-size: 11px; }
        html.layout-pc .collision-room-heading { font-size: 12px; }
        html.layout-pc .collision-room-row { font-size: 12px; line-height: 1.4; padding: 9px; }
        html.layout-pc .collision-room-row .btn { font-size: 11px; min-height: 34px !important; }
        html.layout-pc .collision-empty { font-size: 13px; }
        html.layout-pc .collision-refresh { font-size: 20px; line-height: 26px; }

        html.layout-pc .snake-hud { font-size: 11px; line-height: 1.4; }
        html.layout-pc .snake-status { font-size: 10px; line-height: 1.35; }
        html.layout-pc .snake-actions .btn { font-size: 12px; min-height: 44px; }
        html.layout-pc #snake-canvas { width: min(420px, 62vw, max(160px, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 367px))); }
        html.layout-pc .snake-dpad { grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 42px); gap: 4px; }
        html.layout-pc .snake-dpad-btn { font-size: 18px; }
        html.layout-pc #galaga-canvas { width: min(520px, 70vw, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 190px)); }
        html.layout-pc #galaga-controls { grid-template-columns: repeat(2, 80px); grid-template-rows: 52px; }

        html.layout-pc #win-checkin,
        html.layout-pc #win-battlepass { padding: 16px 18px 18px; }
        html.layout-pc #win-checkin { width: min(94vw, 430px); max-height: min(86vh, 680px); }
        html.layout-pc #win-battlepass { width: min(94vw, 760px); max-height: min(90vh, 800px); }
        html.layout-pc #win-checkin .checkin-title,
        html.layout-pc #win-battlepass .checkin-title { font-size: 16px; }
        html.layout-pc .checkin-status { font-size: 11px; line-height: 1.5; }
        html.layout-pc .checkin-grid { gap: 8px; }
        html.layout-pc .checkin-grid-7 { grid-template-columns: repeat(7, 1fr); }
        html.layout-pc .checkin-cell { min-height: 74px; padding: 8px 6px; gap: 5px; }
        html.layout-pc #win-battlepass .checkin-cell { min-height: 76px; padding: 8px 6px; gap: 6px; }
        html.layout-pc .bp-ship-reward-image { height: 44px; }
        html.layout-pc .bp-ship-reward-image .ship-sprite-img,
        html.layout-pc .bp-ship-reward-image canvas { height: 42px !important; }
        html.layout-pc #win-battlepass .bp-ship-reward .checkin-cell-reward { font-size: 8px; }
        html.layout-pc .checkin-cell-day { font-size: 11px; }
        html.layout-pc .checkin-cell-reward { font-size: 10px; line-height: 1.3; }
        html.layout-pc #win-checkin .checkin-cell-reward,
        html.layout-pc #win-battlepass .checkin-cell-reward { font-size: 10px; }
        html.layout-pc .checkin-cell-reward .res-gfx-inline,
        html.layout-pc .checkin-cell-reward .part-gfx-inline { width: 20px; height: 20px; vertical-align: -4px; }
        html.layout-pc .checkin-today { font-size: 11px; line-height: 1.5; padding: 10px; }
        html.layout-pc .checkin-choice-title { font-size: 11px; }
        html.layout-pc .checkin-choice-btn { font-size: 11px; min-height: 46px; padding: 11px 10px; }
        html.layout-pc .checkin-actions .btn-streak-claim,
        html.layout-pc .bp-buy-bar .btn { font-size: 13px; min-height: 46px; }

        html.layout-pc #win-pvp {
            width: min(96%, 820px);
            max-width: 820px;
            height: 100%;
            max-height: none;
            padding: 12px 18px 10px;
        }
        html.layout-pc #win-pvp .pvp-daily-bar { font-size: 10px; }
        html.layout-pc #win-pvp .pvp-reward-tier { font-size: 9px; }
        html.layout-pc #win-pvp .pvp-log { font-size: 9px; }
        html.layout-pc #win-pvp .pvp-status-line { font-size: 11px; }
        html.layout-pc .pvp-header { gap: 8px; margin-bottom: 10px; }
        html.layout-pc .pvp-history-dropdown,
        html.layout-pc .pvp-mail-dropdown,
        html.layout-pc .pvp-lb-dropdown { font-size: 10px; padding: 9px; }
        html.layout-pc .pvp-history-title,
        html.layout-pc .pvp-mail-title,
        html.layout-pc .pvp-lb-title { font-size: 10px; }
        html.layout-pc .pvp-history-meta,
        html.layout-pc .pvp-mail-reward,
        html.layout-pc .pvp-lb-sep,
        html.layout-pc .pvp-prize-hint { font-size: 9px; }
        html.layout-pc .pvp-history-revenge,
        html.layout-pc .pvp-mail-claim,
        html.layout-pc .pvp-lb-tab { font-size: 9px; padding: 5px 7px; }
        html.layout-pc .pvp-daily-bar { line-height: 1.5; }
        html.layout-pc .pvp-vs-scan { font-size: 10px; }
        html.layout-pc .pvp-vs-side-name { font-size: 10px; }
        html.layout-pc .pvp-vs-side-meta { font-size: 9px; }
        html.layout-pc .pvp-vs-power { font-size: 9px; }
        html.layout-pc .pvp-vs-power-label { width: 44px; }
        html.layout-pc .pvp-vs-power-val { width: 34px; }
        html.layout-pc .pvp-name { font-size: 9px; }
        html.layout-pc .pvp-bar-row { font-size: 8px; }
        html.layout-pc .pvp-bar-label { width: 14px; }
        html.layout-pc .pvp-bar-val { width: 28px; font-size: 8px; }
        html.layout-pc .pvp-log { font-size: 9px; line-height: 1.45; }
        html.layout-pc .pvp-status-line { font-size: 10px; }
        html.layout-pc .pvp-result-title { font-size: 16px; }
        html.layout-pc .pvp-result-stats { font-size: 10px; }
        html.layout-pc .pvp-result-score,
        html.layout-pc .pvp-result .btn { font-size: 10px; }

        html.layout-pc .help-panel,
        html.layout-pc .onboarding-panel { width: min(94vw, 560px); max-height: 88vh; padding: 20px 22px 18px; }
        html.layout-pc .help-title,
        html.layout-pc .onboarding-title { font-size: 15px; letter-spacing: .1em; }
        html.layout-pc .help-body,
        html.layout-pc .onboarding-body { font-size: 12px; line-height: 1.6; letter-spacing: .01em; }
        html.layout-pc .help-table { font-size: 10px; }
        html.layout-pc .help-table th,
        html.layout-pc .help-table td { padding: 6px 7px; }
        html.layout-pc .help-accordion-btn { font-size: 11px; padding: 11px 12px; }
        html.layout-pc .help-accordion-body { font-size: 11px; line-height: 1.55; padding: 0 12px 12px; }
        html.layout-pc .help-accordion-body .help-table { font-size: 9px; }
        html.layout-pc .player-panel { width: min(94vw, 700px); max-height: 90vh; }
        html.layout-pc .player-panel-tab { font-size: 11px; padding: 9px 7px; letter-spacing: .05em; }
        html.layout-pc .stats-section { font-size: 11px; }
        html.layout-pc .stats-table { font-size: 10px; }
        html.layout-pc .stats-table td { padding: 5px 6px; }
        html.layout-pc .friends-ref-label,
        html.layout-pc .friends-ref-link,
        html.layout-pc .friends-bonus-line,
        html.layout-pc .friends-list-head,
        html.layout-pc .friend-faction,
        html.layout-pc .friend-lvl { font-size: 10px; }
        html.layout-pc .friend-row,
        html.layout-pc .friends-empty { font-size: 11px; }
        html.layout-pc .settings-title { font-size: 11px; }
        html.layout-pc .settings-label { font-size: 14px; }
        html.layout-pc .settings-toggle-btn { font-size: 13px; }

        html.layout-pc .invasion-hud-top { font-size: 13px; line-height: 1.5; padding: 8px 14px; }
        html.layout-pc .invasion-hud-fps,
        html.layout-pc .invasion-hud-keys,
        html.layout-pc .invasion-bar-label { font-size: 11px; }
        html.layout-pc .invasion-floor-results-card { width: min(100%, 460px); padding: 22px 24px; }
        html.layout-pc .invasion-floor-results-title { font-size: 18px; }
        html.layout-pc .invasion-floor-results-stat,
        html.layout-pc .invasion-floor-results-loot { font-size: 14px; }
        html.layout-pc .invasion-floor-results-actions .btn { font-size: 13px; }
        html.layout-pc .loot { font-size: 11px; max-width: min(80vw, 520px); }

        html.layout-pc .solo-boss-hud-top { top: 18px; left: 18px; right: 18px; }
        html.layout-pc .solo-boss-timer { font-size: 24px; padding: 6px 16px; }
        html.layout-pc .solo-boss-btn-exit { width: 42px; height: 42px; font-size: 20px; }
        html.layout-pc .solo-boss-results-card { max-width: 460px; padding: 26px; }
        html.layout-pc .solo-boss-results-title { font-size: 24px; }
        html.layout-pc .solo-boss-results-body { font-size: 17px; }
        html.layout-pc .solo-boss-lb-dropdown { width: min(94%, 380px); }
        html.layout-pc .solo-boss-lb-heading { font-size: 15px; }
        html.layout-pc .solo-boss-lb-row { font-size: 13px; padding: 9px 10px; }

        /* На ПК длинные названия не должны залезать под графику или кнопки. */
        html.layout-pc .window,
        html.layout-pc .window * { min-width: 0; }
        html.layout-pc .window p,
        html.layout-pc .window li,
        html.layout-pc .window td,
        html.layout-pc .window th,
        html.layout-pc .window label,
        html.layout-pc .help-panel p,
        html.layout-pc .help-panel li {
            overflow-wrap: anywhere;
            word-break: normal;
        }
        html.layout-pc .window button,
        html.layout-pc .window .btn { white-space: normal; }
        html.layout-pc .window svg,
        html.layout-pc .window img,
        html.layout-pc .window .res-gfx,
        html.layout-pc .window .part-gfx,
        html.layout-pc .window .container-icon,
        html.layout-pc .window .perk-thumb { flex-shrink: 0; }
        html.layout-pc .pvp-name,
        html.layout-pc .pvp-vs-side-name,
        html.layout-pc .friend-name,
        html.layout-pc .friend-faction,
        html.layout-pc .collision-leaderboard-row strong,
        html.layout-pc .pvp-lb-row .lb-name { text-overflow: ellipsis; }

        /* Патруль: читаемый HUD и объёмная sci-fi панель на всех экранах. */
        #win-pvp {
            background:
                linear-gradient(180deg, rgba(9, 24, 55, 0.98), rgba(4, 8, 24, 0.99) 48%, rgba(11, 5, 29, 0.99)),
                radial-gradient(circle at 50% 0, rgba(0, 232, 255, 0.16), transparent 46%);
            border-color: rgba(76, 224, 255, 0.72);
            box-shadow: 0 0 28px rgba(0, 232, 255, 0.24), 0 0 54px rgba(255, 43, 214, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -18px 34px rgba(0, 0, 0, 0.36);
        }
        #win-pvp .pvp-header {
            padding: 5px 6px 7px;
            border-bottom: 1px solid rgba(0, 232, 255, 0.32);
            background: linear-gradient(180deg, rgba(18, 55, 86, 0.7), rgba(5, 15, 37, 0.46));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.24);
        }
        #win-pvp .pvp-header .wtitle {
            font-size: 15px;
            letter-spacing: 0.12em;
            color: #ffe27a;
            text-shadow: 0 0 8px rgba(255, 212, 0, 0.58), 0 0 18px rgba(255, 120, 40, 0.2);
        }
        #win-pvp .pvp-header .hangar-help-btn {
            border-color: rgba(83, 224, 255, 0.72);
            background: linear-gradient(145deg, rgba(15, 76, 105, 0.82), rgba(5, 18, 43, 0.96));
            color: #9bf3ff;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 10px rgba(0, 232, 255, 0.18);
        }
        #win-pvp .pvp-daily-bar {
            margin: 6px 0 8px;
            padding: 7px 9px;
            border: 1px solid rgba(255, 170, 85, 0.42);
            border-radius: 5px;
            background: linear-gradient(110deg, rgba(91, 38, 22, 0.62), rgba(29, 17, 39, 0.72));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 10px rgba(0, 0, 0, 0.28);
            color: #b9f5ff;
            font-size: 10px;
            line-height: 1.45;
        }
        #win-pvp .pvp-daily-bar .pvp-attacks { color: #ffb86b; font-weight: 700; }
        #win-pvp .pvp-daily-bar .pvp-rank-hint { color: #ffe27a; font-weight: 600; }
        #win-pvp .pvp-reward-tier {
            margin: 5px 4px;
            padding: 5px 7px;
            border-left: 3px solid #ff54d9;
            border-radius: 3px;
            background: linear-gradient(90deg, rgba(86, 25, 83, 0.48), rgba(25, 12, 45, 0.18));
            color: #e3c5ff;
            font-size: 9px;
            line-height: 1.45;
        }
        #win-pvp .pvp-log {
            margin: 5px 3px 7px;
            min-height: 24px;
            max-height: 38px;
            padding: 5px 7px;
            border: 1px solid rgba(0, 232, 255, 0.2);
            border-radius: 4px;
            background: rgba(1, 14, 34, 0.72);
            color: #a8c9d9;
            font-size: 9px;
            line-height: 1.4;
            box-shadow: inset 0 0 12px rgba(0, 232, 255, 0.04);
        }
        #win-pvp .pvp-status-line {
            min-height: 16px;
            margin: 6px 4px;
            padding: 6px 8px;
            border: 1px solid rgba(64, 232, 120, 0.32);
            border-radius: 4px;
            background: linear-gradient(90deg, rgba(15, 68, 62, 0.48), rgba(5, 25, 38, 0.58));
            color: #9fffc2;
            font-size: 10px;
            line-height: 1.35;
            text-shadow: 0 0 7px rgba(64, 232, 120, 0.28);
        }
        #win-pvp .pvp-actions .btn {
            min-height: 42px;
            margin: 6px 0 2px;
            border-color: rgba(0, 232, 255, 0.82);
            background: linear-gradient(180deg, rgba(0, 111, 145, 0.9), rgba(8, 24, 61, 0.98));
            color: #eaffff;
            font-size: 12px;
            letter-spacing: 0.08em;
            box-shadow: 0 0 16px rgba(0, 232, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -5px 12px rgba(0, 0, 0, 0.28);
        }
        #win-pvp .pvp-history-dropdown,
        #win-pvp .pvp-lb-dropdown {
            border-color: rgba(83, 224, 255, 0.62);
            border-radius: 6px;
            background: linear-gradient(145deg, rgba(8, 29, 58, 0.98), rgba(8, 9, 28, 0.99));
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.62), 0 0 16px rgba(0, 232, 255, 0.14);
            font-size: 10px;
        }
        #win-pvp .pvp-history-title,
        #win-pvp .pvp-lb-title { font-size: 11px; line-height: 1.35; }
        #win-pvp .pvp-history-meta,
        #win-pvp .pvp-lb-sep,
        #win-pvp .pvp-prize-hint { font-size: 9px; }
        #win-pvp .pvp-history-revenge,
        #win-pvp .pvp-lb-tab { font-size: 9px; padding: 5px 7px; }
        #win-pvp .pvp-history-name,
        #win-pvp .pvp-lb-row,
        #win-pvp .pvp-prize-val { font-size: 10px; line-height: 1.4; }
        #win-pvp .pvp-lobby,
        #win-pvp .pvp-vs,
        #win-pvp .pvp-arena {
            border-color: rgba(83, 224, 255, 0.46);
            box-shadow: inset 0 0 28px rgba(0, 232, 255, 0.08), 0 5px 16px rgba(0, 0, 0, 0.32);
        }
        #win-pvp .pvp-vs-scan { font-size: 10px; text-shadow: 0 0 10px rgba(0, 232, 255, 0.7); }
        #win-pvp .pvp-vs-side-name { font-size: 10px; color: #d7f7ff; }
        #win-pvp .pvp-vs-side-meta { font-size: 9px; color: #9ab4c8; }
        #win-pvp .pvp-vs-power { font-size: 9px; }
        #win-pvp .pvp-name { font-size: 10px; color: #d7f7ff; }
        #win-pvp .pvp-bar-row { font-size: 9px; }
        #win-pvp .pvp-bar-label { width: 14px; }
        #win-pvp .pvp-bar-val { width: 28px; font-size: 9px; color: #b1cad8; }
        #win-pvp .pvp-result-title { font-size: 18px; }
        #win-pvp .pvp-result-stats { font-size: 10px; line-height: 1.55; }
        #win-pvp .pvp-result-score,
        #win-pvp .pvp-result .btn { font-size: 11px; }
        html.layout-pc #win-pvp .pvp-header .wtitle { font-size: 18px; }
        html.layout-pc #win-pvp .pvp-daily-bar { font-size: 12px; }
        html.layout-pc #win-pvp .pvp-reward-tier,
        html.layout-pc #win-pvp .pvp-log { font-size: 11px; }
        html.layout-pc #win-pvp .pvp-status-line { font-size: 12px; }
        html.layout-pc #win-pvp .pvp-actions .btn { min-height: 46px; font-size: 14px; }

        @media (max-width: 560px) {
            #win-pvp { padding: 8px 8px 7px; }
            #win-pvp .pvp-header .wtitle { font-size: 14px; }
            #win-pvp .pvp-daily-bar { margin-top: 4px; padding: 6px 7px; }
            #win-pvp .pvp-lobby { min-height: 180px; }
            #win-pvp .pvp-actions .btn { min-height: 40px; font-size: 11px; }
        }

        .perk-tree-modal .perk-tree-connector.active,
        .perk-tree-modal .perk-tree-path.unlocked .branch-connector,
        .perk-tree-modal .perk-tree-branches.active::before,
        .perk-tree-modal .perk-tree-branches.active::after,
        .perk-tree-modal .perk-tree-branches.active .perk-tree-path::before {
            background: var(--perk-wire-live) !important;
            box-shadow: 0 0 5px rgba(0, 232, 255, .55), 0 0 10px rgba(0, 232, 255, .28) !important;
        }
        .perk-tree-modal .perk-tree-branches.active::before {
            background: var(--perk-wire-live-x) !important;
        }
        .perk-tree-modal .perk-tree-connector,
        .perk-tree-modal .branch-connector {
            position: relative;
            z-index: 1;
            width: var(--perk-wire) !important;
            height: var(--perk-wire-gap) !important;
            margin: -3px 0 !important;
        }
        .perk-tree-modal .perk-tree-connector::before,
        .perk-tree-modal .perk-tree-connector::after,
        .perk-tree-modal .branch-connector::before,
        .perk-tree-modal .branch-connector::after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 7px;
            height: 4px;
            background: linear-gradient(180deg, #3a4558 0%, #2a3448 100%);
            border: 1px solid rgba(80, 100, 130, .75);
            box-shadow: 0 0 4px rgba(0, 232, 255, .25);
            z-index: 3;
            border-radius: 1px;
        }
        .perk-tree-modal .perk-tree-connector::before,
        .perk-tree-modal .branch-connector::before {
            top: -1px;
            border-radius: 2px 2px 0 0;
            border-bottom: 2px solid #5a7188;
        }
        .perk-tree-modal .perk-tree-connector::after,
        .perk-tree-modal .branch-connector::after {
            bottom: -1px;
            border-radius: 0 0 2px 2px;
            border-top: 2px solid #5a7188;
        }
        .perk-tree-modal .perk-tree-connector.active::before,
        .perk-tree-modal .perk-tree-connector.active::after,
        .perk-tree-modal .perk-tree-path.unlocked .branch-connector::before,
        .perk-tree-modal .perk-tree-path.unlocked .branch-connector::after {
            border-bottom-color: #00e8ff;
            border-top-color: #00e8ff;
            box-shadow: 0 0 5px rgba(0, 232, 255, .45);
        }
        .perk-tree-modal .perk-tree-branches {
            --branch-gap: 26px;
            gap: var(--branch-gap) !important;
            margin-top: 0;
        }
        .perk-tree-modal .perk-tree-branches::before {
            top: 0;
            left: 25%;
            right: 25%;
            height: var(--perk-wire);
            margin-left: calc(var(--perk-wire) / -2);
            margin-right: calc(var(--perk-wire) / -2);
            width: auto;
            transform: none;
        }
        .perk-tree-modal .perk-tree-branches::after,
        .perk-tree-modal .perk-tree-branch::before,
        .perk-tree-modal .perk-tree-branch-caption::after {
            display: none;
        }
        .perk-tree-modal .perk-tree-path {
            padding-top: var(--perk-drop);
        }
        .perk-tree-modal .perk-tree-path::before {
            top: 0;
            left: 50%;
            width: var(--perk-wire);
            height: calc(var(--perk-drop) + 3px);
            transform: translateX(-50%);
        }
        .perk-tree-modal .perk-tree-path::after {
            content: '';
            position: absolute;
            left: 50%;
            top: calc(var(--perk-drop) - 2px);
            width: 7px;
            height: 4px;
            transform: translateX(-50%);
            background: linear-gradient(180deg, #3a4558 0%, #2a3448 100%);
            border: 1px solid rgba(80, 100, 130, .75);
            border-top: 2px solid #5a7188;
            border-radius: 0 0 2px 2px;
            box-shadow: 0 0 4px rgba(0, 232, 255, .25);
            z-index: 3;
        }
        .perk-tree-modal .perk-tree-path.unlocked::after {
            border-top-color: #00e8ff;
            box-shadow: 0 0 5px rgba(0, 232, 255, .45);
        }
        .perk-tree-modal .perk-tree-node::before,
        .perk-tree-modal .perk-tree-node::after {
            content: '';
            position: absolute;
            left: 50%;
            z-index: 3;
            width: 8px;
            height: 4px;
            transform: translateX(-50%);
            background: #141c2a;
            border: 1px solid rgba(80, 100, 130, .7);
            box-shadow: none;
        }
        .perk-tree-modal .perk-tree-node::before {
            top: -1px;
            border-top: none;
            border-radius: 0 0 2px 2px;
        }
        .perk-tree-modal .perk-tree-node::after {
            bottom: -1px;
            border-bottom: none;
            border-radius: 2px 2px 0 0;
        }
        .perk-tree-modal .perk-tree-node.unlocked::before,
        .perk-tree-modal .perk-tree-node.unlocked::after,
        .perk-tree-modal .perk-tree-path.unlocked .perk-tree-node::before,
        .perk-tree-modal .perk-tree-path.unlocked .perk-tree-node::after {
            border-color: rgba(0, 232, 255, .8);
            box-shadow: 0 0 4px rgba(0, 232, 255, .35);
        }
        .perk-tree-modal .perk-tree-level-row:first-child .perk-tree-node::before { display: none; }
        .perk-tree-modal .perk-tree-path .perk-tree-node-wrap:last-child .perk-tree-node::after { display: none; }
        .perk-tree-modal .perk-tree-node-icon svg {
            filter: drop-shadow(0 0 2px currentColor);
        }
        .perk-tree-modal .perk-tree-node.unlocked .perk-tree-node-icon svg {
            filter: drop-shadow(0 0 3px #00e8ff) drop-shadow(0 0 7px rgba(0, 232, 255, .9));
        }

        /* Голографические ядра: цвет соответствует роли перка и загорается вместе с узлом. */
        .perk-tree-modal .perk-tree-node-wrap { --perk-neon: #00e8ff; --perk-neon-rgb: 0, 232, 255; }
        .perk-tree-modal .perk-tree-node-wrap.perk-scope-pvp { --perk-neon: #ff4fba; --perk-neon-rgb: 255, 79, 186; }
        .perk-tree-modal .perk-tree-node-wrap.perk-scope-mining { --perk-neon: #ffd45a; --perk-neon-rgb: 255, 212, 90; }
        .perk-tree-modal .perk-tree-node-wrap.perk-scope-rogue { --perk-neon: #7b70ff; --perk-neon-rgb: 123, 112, 255; }
        .perk-tree-modal .perk-tree-node-wrap.perk-scope-universal { --perk-neon: #44f0c1; --perk-neon-rgb: 68, 240, 193; }
        .perk-tree-modal .perk-tree-node-wrap .perk-tree-node-icon .perk-thumb {
            position: relative;
            z-index: 1;
            padding: 3px;
            border: 1px solid rgba(var(--perk-neon-rgb), .4);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(var(--perk-neon-rgb), .2), rgba(3, 11, 29, .05) 68%);
            box-shadow: inset 0 0 8px rgba(var(--perk-neon-rgb), .18);
            transition: border-color .2s, background .2s, box-shadow .2s, filter .2s;
        }
        .perk-tree-modal .perk-tree-node.unlocked {
            border-color: var(--perk-neon) !important;
            background: radial-gradient(circle at 35% 28%, rgba(var(--perk-neon-rgb), .48), rgba(5, 18, 40, .98) 70%) !important;
            box-shadow: 0 0 9px var(--perk-neon), 0 0 25px rgba(var(--perk-neon-rgb), .72), inset 0 0 16px rgba(var(--perk-neon-rgb), .34) !important;
            animation: perk-node-pulse 2.2s ease-in-out infinite;
        }
        .perk-tree-modal .perk-tree-node.unlocked .perk-tree-node-icon .perk-thumb {
            border-color: var(--perk-neon);
            background: radial-gradient(circle, rgba(var(--perk-neon-rgb), .58), rgba(3, 11, 29, .1) 68%);
            box-shadow: 0 0 7px var(--perk-neon), 0 0 16px rgba(var(--perk-neon-rgb), .75), inset 0 0 8px rgba(255, 255, 255, .25);
            filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--perk-neon));
        }
        .perk-tree-modal .perk-tree-node.unlocked .perk-tree-node-icon svg {
            filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px var(--perk-neon));
        }
        .perk-tree-modal .perk-tree-node.unlocked .perk-tree-node-level {
            border-color: var(--perk-neon);
            color: #fff;
            background: #06152b;
            box-shadow: 0 0 7px rgba(var(--perk-neon-rgb), .8);
        }
        @keyframes perk-node-pulse {
            50% { box-shadow: 0 0 13px var(--perk-neon), 0 0 31px rgba(var(--perk-neon-rgb), .92), inset 0 0 20px rgba(var(--perk-neon-rgb), .42) !important; }
        }
        @media (prefers-reduced-motion: reduce) {
            .perk-tree-modal .perk-tree-node.unlocked { animation: none; }
        }
        @media (max-width: 560px) {
            .perk-tree-modal .perk-tree {
                --perk-wire-gap: 26px;
                --perk-drop: 16px;
            }
            .perk-tree-modal .perk-tree-branches { --branch-gap: 14px; }
            .perk-tree-modal .perk-tree-connector,
            .perk-tree-modal .branch-connector { height: var(--perk-wire-gap) !important; }
        }

        /* Рейтинг сезона использует общий адаптивный диалог на телефоне и ПК. */
        html.layout-pc #win-hangar #hangar-panel-containers .upgrade-section-title {
            font-size: 16px !important;
        }
        html.layout-pc #win-hangar #container-panel-root {
            padding-right: 4px;
        }
        html.layout-pc #win-hangar .container-vip-hint {
            margin-bottom: 10px;
            font-size: 12px;
            line-height: 1.45;
        }
        html.layout-pc #win-hangar .container-slots {
            gap: 10px;
            margin-bottom: 12px;
        }
        html.layout-pc #win-hangar .container-slot-label {
            margin-bottom: 4px;
            font-size: 10px;
            line-height: 1.2;
        }
        html.layout-pc #win-hangar .container-scene.compact {
            height: 96px;
        }
        html.layout-pc #win-hangar .container-scene.compact .container-scanner {
            top: 8px;
            height: 78px;
        }
        html.layout-pc #win-hangar .container-scene.compact .container-on-belt .container-icon {
            width: 64px;
            height: 64px;
        }
        html.layout-pc #win-hangar .container-timer {
            bottom: 6px;
            font-size: 10px;
            line-height: 1.2;
        }
        html.layout-pc #win-hangar .container-scene.empty span {
            font-size: 10px;
        }
        html.layout-pc #win-hangar .container-list {
            gap: 8px;
        }
        html.layout-pc #win-hangar .container-row {
            gap: 12px;
            min-height: 68px;
            padding: 9px 10px;
        }
        html.layout-pc #win-hangar .container-row .container-icon {
            width: 52px;
            height: 52px;
        }
        html.layout-pc #win-hangar .container-row-name {
            font-size: 13px;
            line-height: 1.3;
        }
        html.layout-pc #win-hangar .container-row-meta {
            margin-top: 4px;
            font-size: 11px;
            line-height: 1.35;
        }
        html.layout-pc #win-hangar .container-row-qty {
            min-width: 42px;
            font-size: 14px;
        }
        html.layout-pc #win-hangar .container-loot-preview {
            margin-top: 8px;
            font-size: 11px;
            line-height: 1.5;
        }
        html.layout-pc #win-hangar .container-actions {
            margin-top: 10px;
        }
        html.layout-pc #win-hangar .container-actions .btn,
        html.layout-pc #win-hangar .container-slot-claim {
            min-height: 40px;
            font-size: 12px;
        }

        /* Финальная типографика вкладок ПК: основной текст не меньше 10px. */
        html.layout-pc {
            --ui-fs-xs: 10px;
            --ui-fs-sm: 11px;
            --ui-fs-md: 12px;
            --ui-fs-lg: 14px;
        }
        html.layout-pc .window {
            font-size: 12px;
            line-height: 1.4;
        }
        html.layout-pc .window .wtitle,
        html.layout-pc .window .checkin-title {
            font-size: 16px !important;
            line-height: 1.25;
        }
        html.layout-pc .window .map-header-note,
        html.layout-pc .window .checkin-status,
        html.layout-pc .window .checkin-today,
        html.layout-pc .window .invasion-lobby-stat,
        html.layout-pc .window .collision-info,
        html.layout-pc .window .collision-rewards,
        html.layout-pc .window .collision-status,
        html.layout-pc .window .collision-room-row,
        html.layout-pc .window .faction-task-head,
        html.layout-pc .window .faction-task-reward,
        html.layout-pc .window .faction-task-foot,
        html.layout-pc .window .mastery-intro,
        html.layout-pc .window .mastery-branch-foot,
        html.layout-pc .window .faction-market,
        html.layout-pc .window .faction-market-form,
        html.layout-pc .window .faction-empty {
            font-size: 12px !important;
            line-height: 1.5;
        }
        html.layout-pc .window .collision-info strong,
        html.layout-pc .window .collision-rewards strong,
        html.layout-pc .window .collision-status-label,
        html.layout-pc .window .collision-room-heading,
        html.layout-pc .window .faction-tasks-title,
        html.layout-pc .window .faction-switch-title,
        html.layout-pc .window .faction-market-section-title {
            font-size: 11px !important;
        }
        html.layout-pc .window .faction-hq-header,
        html.layout-pc .window .faction-hq-meta,
        html.layout-pc .window .faction-penalty-note,
        html.layout-pc .window .faction-prog-label,
        html.layout-pc .window .faction-promote-hint,
        html.layout-pc .window .faction-switch-sub,
        html.layout-pc .window .faction-frozen-tag,
        html.layout-pc .window .faction-boost-note,
        html.layout-pc .window .faction-capstone-blurb,
        html.layout-pc .window .faction-boost-hangar-cell .hb-label {
            font-size: 11px !important;
            line-height: 1.45;
        }
        html.layout-pc .window .faction-hq-faction { font-size: 15px !important; }
        html.layout-pc .window .faction-hq-rank { font-size: 14px !important; }
        html.layout-pc .window .faction-boost-now-label,
        html.layout-pc .window .faction-capstone-label,
        html.layout-pc .window .faction-capstone-st,
        html.layout-pc .window .boost-st { font-size: 11px !important; }
        html.layout-pc .window .faction-boost-now-value,
        html.layout-pc .window .faction-capstone-name { font-size: 14px !important; }
        html.layout-pc .window .faction-boost-section-title { font-size: 13px !important; }
        html.layout-pc .window .faction-capstone-list { font-size: 12px !important; line-height: 1.5; }

        /* Стартовый выбор фракции и корабля также не должен оставаться с 3–8px. */
        html.layout-pc #faction-list small { font-size: 11px !important; line-height: 1.35; }
        html.layout-pc #win-ship .faction-brief { font-size: 12px !important; line-height: 1.45; }
        html.layout-pc #win-ship .faction-brief-title { font-size: 14px !important; }
        html.layout-pc #ship-list .card { padding: 10px; }
        html.layout-pc #ship-list .ship-name { font-size: 14px !important; line-height: 1.25; }
        html.layout-pc #ship-list .ship-stat-label,
        html.layout-pc #ship-list .ship-stat-val { font-size: 10px !important; }
        html.layout-pc #win-ship .ship-actions .btn { font-size: 13px !important; min-height: 42px; }

        /* Чекин, батл-пасс и наборы: текст карточек и служебные подписи. */
        html.layout-pc .checkin-cell-day { font-size: 12px !important; }
        html.layout-pc .checkin-cell-reward,
        html.layout-pc .checkin-choice-title,
        html.layout-pc .checkin-choice-btn,
        html.layout-pc .checkin-done-msg,
        html.layout-pc .bp-paid-badge { font-size: 11px !important; line-height: 1.45; }
        html.layout-pc .checkin-cell.done::after,
        html.layout-pc .checkin-cell.milestone .checkin-cell-day::after { font-size: 10px !important; }

        /* Командир: вкладки, статистика, друзья и настройки. */
        html.layout-pc .player-panel-tab { font-size: 12px !important; min-height: 40px; }
        html.layout-pc .stats-section { font-size: 12px !important; }
        html.layout-pc .stats-table,
        html.layout-pc .stats-note,
        html.layout-pc .friends-ref-label,
        html.layout-pc .friends-ref-link,
        html.layout-pc .friends-bonus-line,
        html.layout-pc .friends-list-head,
        html.layout-pc .friend-faction,
        html.layout-pc .friend-lvl,
        html.layout-pc .ref-stage-dot { font-size: 11px !important; line-height: 1.45; }
        html.layout-pc .friend-row,
        html.layout-pc .friends-empty { font-size: 12px !important; line-height: 1.45; }
        html.layout-pc .friends-ref-actions .btn { font-size: 12px !important; }
        html.layout-pc .settings-title { font-size: 12px !important; }
        html.layout-pc .settings-label { font-size: 14px !important; }
        html.layout-pc .settings-toggle-btn,
        html.layout-pc .settings-lang-btn { font-size: 13px !important; }
        html.layout-pc .help-accordion-btn { font-size: 12px !important; }
        html.layout-pc .help-accordion-body,
        html.layout-pc .help-accordion-body .help-table { font-size: 11px !important; line-height: 1.55; }

        /* Мини-игры и карта: вторичные подписи были 4–6px. */
        html.layout-pc #win-map-minigames .map-header-note,
        html.layout-pc .minigame-row-status,
        html.layout-pc .minigame-row-meta,
        html.layout-pc .faction-hq-swipe-hint,
        html.layout-pc .hangar-swipe-hint { font-size: 10px !important; line-height: 1.4; }
        html.layout-pc .minigame-row-desc { font-size: 12px !important; }
        html.layout-pc .map-system-name { font-size: 11px !important; }
        html.layout-pc .map-system-sub,
        html.layout-pc .map-system-badge { font-size: 10px !important; }

        /* PvP: читаемые подписи боя и раскрывающиеся панели. */
        html.layout-pc #win-pvp .pvp-history-dropdown,
        html.layout-pc #win-pvp .pvp-mail-dropdown,
        html.layout-pc #win-pvp .pvp-lb-dropdown { font-size: 12px !important; }
        html.layout-pc #win-pvp .pvp-history-title,
        html.layout-pc #win-pvp .pvp-mail-title,
        html.layout-pc #win-pvp .pvp-lb-title { font-size: 13px !important; }
        html.layout-pc #win-pvp .pvp-history-name,
        html.layout-pc #win-pvp .pvp-lb-row,
        html.layout-pc #win-pvp .pvp-prize-val,
        html.layout-pc #win-pvp .pvp-mail-subject,
        html.layout-pc #win-pvp .pvp-vs-side-name,
        html.layout-pc #win-pvp .pvp-name,
        html.layout-pc #win-pvp .pvp-bar-row,
        html.layout-pc #win-pvp .pvp-vs-power { font-size: 11px !important; line-height: 1.4; }
        html.layout-pc #win-pvp .pvp-history-meta,
        html.layout-pc #win-pvp .pvp-mail-reward,
        html.layout-pc #win-pvp .pvp-lb-sep,
        html.layout-pc #win-pvp .pvp-prize-rank,
        html.layout-pc #win-pvp .pvp-prize-hint,
        html.layout-pc #win-pvp .pvp-vs-side-meta,
        html.layout-pc #win-pvp .pvp-bar-val { font-size: 10px !important; }
        html.layout-pc #win-pvp .pvp-lb-tab,
        html.layout-pc #win-pvp .pvp-history-revenge,
        html.layout-pc #win-pvp .pvp-mail-claim { font-size: 11px !important; }
        html.layout-pc #win-pvp .pvp-vs-power-label { width: 52px; }
        html.layout-pc #win-pvp .pvp-vs-power-val { width: 46px; }
        html.layout-pc #win-pvp .pvp-log,
        html.layout-pc #win-pvp .pvp-reward-tier,
        html.layout-pc #win-pvp .pvp-status-line { font-size: 12px !important; line-height: 1.45; }
        html.layout-pc #win-pvp .pvp-result-stats,
        html.layout-pc #win-pvp .pvp-result-score { font-size: 12px !important; }

        /* ПАТРУЛЬ: оригинальный шаблон и действующие PvP-контролы в его панелях. */
        #win-pvp {
            align-self: center;
            flex: 0 0 auto;
            display: block;
            position: relative;
            width: min(96%, 800px, calc((100dvh - var(--game-inset-top) - var(--game-inset-bottom) - var(--panel-top-h) - var(--panel-bottom-h)) * 0.81048));
            max-width: none;
            height: auto;
            max-height: none;
            aspect-ratio: 1129 / 1393;
            margin: 0;
            padding: 0;
            overflow: visible;
            border: 0;
            border-radius: 0;
            background: url('../mines/patrol.png') center / 100% 100% no-repeat;
            box-shadow: none;
        }
        html.layout-pc #win-pvp {
            width: min(96%, 800px, calc((100dvh - var(--game-inset-top) - var(--game-inset-bottom) - var(--panel-top-h) - var(--panel-bottom-h)) * 0.81048));
            max-width: none;
            height: auto;
            max-height: none;
            padding: 0;
        }
        #win-pvp::before { display: none; }
        #win-pvp .pvp-header {
            position: absolute;
            inset: 0;
            z-index: 20;
            display: block;
            margin: 0;
            padding: 0;
            border: 0;
            background: none;
            box-shadow: none;
            pointer-events: none;
        }
        #win-pvp .pvp-header .wtitle {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
        }
        #win-pvp .pvp-header-actions {
            position: absolute;
            inset: 0;
            display: block;
            pointer-events: none;
        }
        #win-pvp .pvp-header .hangar-help-btn {
            position: absolute;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
            min-height: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: transparent;
            font-size: 0;
            text-shadow: none;
            pointer-events: auto;
            touch-action: manipulation;
        }
        #win-pvp .pvp-header .hangar-help-btn:hover {
            transform: none;
            background: transparent;
            filter: brightness(1.15);
        }
        #win-pvp .pvp-header .hangar-help-btn:focus-visible {
            outline: 2px solid #fff1a8;
            outline-offset: -3px;
        }
        #win-pvp #btn-pvp-history {
            top: 1%;
            left: 1%;
            width: max(42px, 7.5%);
            height: max(42px, 9%);
        }
        #win-pvp .pvp-header-actions #btn-pvp-help {
            top: 1%;
            left: 74.5%;
            width: max(38px, 5.7%);
            height: max(42px, 9%);
        }
        #win-pvp .pvp-header-actions #btn-pvp-leaderboard {
            top: 1%;
            left: 80.4%;
            width: max(38px, 6%);
            height: max(42px, 9%);
        }
        #win-pvp .pvp-header-actions #btn-pvp-close {
            top: 0.5%;
            right: 0.8%;
            width: max(44px, 8.5%);
            height: max(44px, 10%);
        }
        @media (max-width: 560px) {
            #win-pvp .pvp-header-actions #btn-pvp-help {
                left: 74.5%;
                width: 6%;
            }
            #win-pvp .pvp-header-actions #btn-pvp-leaderboard {
                left: 80.7%;
                width: 6%;
            }
            #win-pvp .pvp-header-actions #btn-pvp-close { width: 8.5%; }
            #win-pvp .pvp-daily-bar,
            #win-pvp .pvp-reward-tier,
            #win-pvp .pvp-status-line { font-size: clamp(8px, 2.1vw, 10px); }
            #win-pvp .pvp-log { font-size: clamp(8px, 2vw, 10px); }
        }
        #win-pvp .pvp-daily-bar {
            position: absolute;
            z-index: 5;
            top: 8%;
            left: 4%;
            width: 92%;
            height: 5.2%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin: 0;
            padding: 0 2%;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: #fff0d0;
            font-size: clamp(7px, 1.05vw, 12px);
            line-height: 1.15;
            text-align: center;
            text-shadow: 0 1px 3px #180d18;
        }
        #win-pvp .pvp-daily-bar .pvp-attacks { color: #fff1a8; }
        #win-pvp .pvp-lobby,
        #win-pvp .pvp-vs,
        #win-pvp .pvp-arena {
            position: absolute;
            z-index: 2;
            top: 13.8%;
            left: 1%;
            width: 98%;
            height: 63.2%;
            min-height: 0;
            margin: 0;
            border: 0;
            border-radius: 0;
            overflow: hidden;
            background: transparent;
            box-shadow: none;
        }
        #win-pvp .pvp-lobby-space { background: transparent; }
        #win-pvp .pvp-lobby-stars { display: none; }
        #win-pvp .pvp-vs {
            padding: 2%;
            gap: 2%;
        }
        #win-pvp .pvp-vs-scan {
            font-size: clamp(8px, 1vw, 12px);
            text-shadow: 0 1px 4px #000, 0 0 10px rgba(0, 232, 255, 0.7);
        }
        #win-pvp .pvp-arena { background: transparent; }
        #win-pvp .pvp-reward-tier {
            position: absolute;
            z-index: 5;
            top: 77.6%;
            left: 4%;
            width: 92%;
            height: 6.8%;
            display: -webkit-box;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin: 0;
            padding: 0 3%;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: #f3d5ff;
            font-size: clamp(7px, 1.05vw, 11px);
            line-height: 1.15;
            text-align: center;
            text-shadow: 0 1px 3px #13091e;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        html.layout-pc #win-pvp .pvp-reward-tier {
            font-size: clamp(16px, 1.32vw, 18px) !important;
            line-height: 1.15;
        }
        #win-pvp .pvp-reward-period {
            display: inline-block;
            max-width: 100%;
            overflow-wrap: anywhere;
            vertical-align: middle;
        }
        #win-pvp .pvp-reward-period + .pvp-reward-period::before { content: " · "; }
        #win-pvp .pvp-log {
            position: absolute;
            z-index: 8;
            top: 77.6%;
            left: 4%;
            width: 92%;
            height: 6.8%;
            min-height: 0;
            max-height: none;
            overflow: hidden;
            margin: 0;
            padding: 0 2%;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: #f2e4ff;
            font-size: clamp(7px, 1vw, 11px);
            line-height: 1.2;
            text-shadow: 0 1px 2px #000;
        }
        #win-pvp .pvp-status-line {
            position: absolute;
            z-index: 5;
            top: 85%;
            left: 7%;
            width: 86%;
            height: 4.8%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin: 0;
            padding: 0 2%;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: #c5fff1;
            font-size: clamp(7px, 1.05vw, 11px);
            line-height: 1.15;
            text-align: center;
            text-shadow: 0 1px 3px #001415;
        }
        #win-pvp .pvp-actions {
            position: absolute;
            z-index: 6;
            top: 90.5%;
            left: 4%;
            width: 92%;
            height: 9.1%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
        }
        #win-pvp .pvp-actions .btn {
            width: 100%;
            height: 100%;
            min-height: 44px;
            margin: 0;
            padding: 0 5%;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: #fff4d4;
            font-size: clamp(10px, 1.25vw, 14px);
            letter-spacing: 0.08em;
            line-height: 1.1;
            text-shadow: 0 1px 3px #050914;
            touch-action: manipulation;
        }
        @media (max-width: 560px) {
            #win-pvp .pvp-actions .btn {
                min-height: 0;
                font-size: clamp(10px, 3vw, 12px);
            }
        }
        #win-pvp .pvp-actions .btn:disabled {
            opacity: 0.58;
            filter: grayscale(0.65);
        }
        #win-pvp .pvp-history-dropdown,
        #win-pvp .pvp-lb-dropdown {
            top: 10.5%;
            max-height: min(62vh, 420px);
            z-index: 40;
        }
        #win-pvp .pvp-history-dropdown {
            left: 2.5%;
            width: min(46%, 360px);
        }
        #win-pvp .pvp-lb-dropdown {
            right: 2.5%;
            width: min(52%, 420px);
        }
        @media (max-width: 560px) {
            /* Reassert mobile type sizes after the template-specific base rules above. */
            #win-pvp .pvp-daily-bar,
            #win-pvp .pvp-status-line { font-size: clamp(9px, 2.8vw, 11px); }
            #win-pvp .pvp-log { font-size: clamp(8px, 2.4vw, 10px); }
            #win-pvp .pvp-reward-tier {
                display: block;
                font-size: clamp(9px, 2.8vw, 12px);
                line-height: 1.1;
                white-space: normal;
                overflow-wrap: normal;
            }
            #win-pvp .pvp-reward-period .container-icon {
                width: 12px;
                height: 12px;
            }
            #win-pvp .pvp-reward-period .res-gfx-inline svg {
                width: 8px;
                height: 8px;
            }
        }
        @media (max-width: 560px) {
            /* PC-mode typography must still fit the PvP template frames on narrow screens. */
            html.layout-pc #win-pvp .pvp-daily-bar,
            html.layout-pc #win-pvp .pvp-status-line {
                font-size: clamp(8px, 2.3vw, 11px) !important;
            }
            html.layout-pc #win-pvp .pvp-reward-tier,
            html.layout-pc #win-pvp .pvp-log {
                font-size: clamp(8px, 2.1vw, 10px) !important;
            }
            html.layout-pc #win-pvp .pvp-reward-tier { line-height: 1.1; }
            html.layout-pc #win-pvp .pvp-status-line { line-height: 1.15; }
            html.layout-pc #win-pvp .pvp-actions .btn {
                font-size: clamp(9px, 2.5vw, 12px) !important;
            }
        }
        @media (min-width: 361px) and (max-width: 560px) {
            /* Keep combat labels and ships inside the template's existing arena bays. */
            #win-pvp .pvp-combatant-en,
            #win-pvp .pvp-combatant-my { gap: 0; }
            #win-pvp .pvp-ship-wrap .ship-sprite-img,
            #win-pvp .pvp-ship-body .ship-sprite-img,
            #win-pvp .pvp-ship-body > span .ship-sprite-img,
            #win-pvp .pvp-ship-body canvas:not(.pvp-ship-flame) {
                width: 64px !important;
                height: 64px !important;
            }
        }
        @media (max-width: 360px) {
            /* Keep the complete combat HUD inside the arena's existing upper/lower bays. */
            #win-pvp .pvp-combatant-en,
            #win-pvp .pvp-combatant-my { gap: 0; }
            #win-pvp .pvp-bar-row { margin: 0; }
            #win-pvp .pvp-half-enemy .pvp-ship-wrap {
                position: relative;
                top: -2px;
            }
            #win-pvp .pvp-half-player .pvp-ship-wrap {
                position: relative;
                top: 2px;
            }
            #win-pvp .pvp-ship-wrap .ship-sprite-img,
            #win-pvp .pvp-ship-body .ship-sprite-img,
            #win-pvp .pvp-ship-body > span .ship-sprite-img,
            #win-pvp .pvp-ship-body canvas:not(.pvp-ship-flame) {
                width: 48px !important;
                height: 48px !important;
            }
        }

        /* Декоративные окна справки и подсказки. */
        html.layout-pc .help-body,
        html.layout-pc .onboarding-body { font-size: 13px !important; line-height: 1.6; }
        html.layout-pc .help-table { font-size: 11px !important; }
        html.layout-pc .help-table th,
        html.layout-pc .help-table td { padding: 7px 8px; }
        html.layout-pc .help-formula { font-size: 12px !important; }
        html.layout-pc .help-formula code { font-size: 11px !important; }

        /* Контейнеры: объемная нижняя панель ангара и акцент редкости. */
        #win-hangar #hangar-panel-containers {
            background:
                linear-gradient(180deg, rgba(4, 12, 30, 0.22), rgba(0, 3, 14, 0.5)),
                radial-gradient(circle at 50% 0%, rgba(0, 232, 255, 0.08), transparent 58%);
        }
        #win-hangar #container-panel-root {
            padding: 10px 6px 14px 2px;
            scrollbar-color: rgba(0, 232, 255, 0.45) rgba(3, 8, 22, 0.7);
        }
        #win-hangar .container-vip-hint {
            padding: 8px 10px;
            margin: 0 0 12px;
            border: 1px solid rgba(0, 232, 255, 0.22);
            border-radius: 7px;
            background: linear-gradient(135deg, rgba(10, 34, 58, 0.82), rgba(3, 10, 27, 0.92));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 5px 14px rgba(0, 0, 0, 0.34), 0 0 14px rgba(0, 154, 210, 0.08);
            color: #bdeeff;
            font-size: 11px;
            letter-spacing: 0.08em;
            line-height: 1.35;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
        }
        #win-hangar .container-slots {
            gap: 12px;
            margin: 0 0 15px;
        }
        #win-hangar .container-slot-wrap {
            padding: 7px;
            border: 1px solid rgba(0, 232, 255, 0.2);
            border-radius: 9px;
            background: linear-gradient(145deg, rgba(13, 35, 59, 0.72), rgba(2, 7, 21, 0.9));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -10px 18px rgba(0, 0, 0, 0.2), 0 7px 16px rgba(0, 0, 0, 0.38);
        }
        #win-hangar .container-slot-label {
            margin-bottom: 6px;
            color: #8fb9d1;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-shadow: 0 1px 3px #000;
        }
        #win-hangar .container-scene.compact {
            height: 94px;
            border-color: rgba(0, 232, 255, 0.38);
            border-radius: 7px;
            background:
                radial-gradient(circle at 50% 42%, rgba(0, 159, 218, 0.15), transparent 48%),
                linear-gradient(180deg, rgba(7, 30, 54, 0.96), rgba(1, 7, 20, 0.98));
            box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(154, 232, 255, 0.12), 0 0 13px rgba(0, 180, 240, 0.12);
        }
        #win-hangar .container-scene.compact .container-scanner {
            top: 9px;
            height: 76px;
            border-color: rgba(0, 232, 255, 0.42);
            background: linear-gradient(180deg, rgba(0, 112, 150, 0.28), rgba(0, 27, 52, 0.58));
            box-shadow: inset 0 0 8px rgba(0, 232, 255, 0.1);
        }
        #win-hangar .container-scene.compact .container-on-belt .container-icon {
            width: 63px;
            height: 63px;
            filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 9px rgba(0, 232, 255, 0.42));
        }
        #win-hangar .container-scene.empty {
            border-color: rgba(125, 170, 195, 0.28);
            background: linear-gradient(145deg, rgba(14, 30, 46, 0.55), rgba(1, 7, 18, 0.82));
            box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.55);
        }
        #win-hangar .container-scene.empty span {
            color: #7695a8;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.14em;
        }
        #win-hangar .container-list {
            gap: 10px;
        }
        #win-hangar .container-row {
            position: relative;
            gap: 13px;
            min-height: 78px;
            padding: 11px 13px;
            overflow: hidden;
            border: 1px solid rgba(83, 177, 220, 0.32);
            border-radius: 9px;
            background:
                linear-gradient(135deg, rgba(19, 52, 78, 0.9), rgba(4, 13, 31, 0.96) 64%),
                rgba(0, 8, 24, 0.7);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -10px 20px rgba(0, 0, 0, 0.22), 0 6px 14px rgba(0, 0, 0, 0.42), 0 0 12px rgba(0, 150, 210, 0.06);
            transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
        }
        #win-hangar .container-row::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(115deg, transparent 22%, rgba(255, 255, 255, 0.06) 47%, transparent 68%);
            opacity: 0;
            transform: translateX(-24%);
            transition: opacity 0.2s ease, transform 0.35s ease;
        }
        #win-hangar .container-row:hover,
        #win-hangar .container-row:focus-within {
            transform: translateY(-2px);
            border-color: rgba(0, 232, 255, 0.68);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 9px 20px rgba(0, 0, 0, 0.5), 0 0 17px rgba(0, 205, 255, 0.2);
        }
        #win-hangar .container-row:hover::after,
        #win-hangar .container-row:focus-within::after { opacity: 1; transform: translateX(24%); }
        #win-hangar .container-row.selected {
            border-color: rgba(255, 212, 0, 0.92);
            background: linear-gradient(135deg, rgba(72, 53, 10, 0.82), rgba(16, 14, 11, 0.96) 70%);
            box-shadow: inset 0 1px 0 rgba(255, 245, 180, 0.2), inset 0 -12px 22px rgba(0, 0, 0, 0.24), 0 9px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 196, 0, 0.22);
        }
        #win-hangar .container-row .container-icon {
            width: 54px;
            height: 54px;
            flex: 0 0 54px;
            filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.78)) drop-shadow(0 0 8px rgba(120, 210, 255, 0.32));
        }
        #win-hangar .container-row-info { position: relative; z-index: 1; }
        #win-hangar .container-row-name {
            display: inline-block;
            color: #e5f7ff;
            font-size: 16px;
            font-weight: 800;
            letter-spacing: 0.1em;
            line-height: 1.25;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 9px rgba(0, 205, 255, 0.28);
        }
        #win-hangar .container-row-meta {
            margin-top: 6px;
            color: #9db6c9;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.07em;
            line-height: 1.35;
        }
        #win-hangar .container-row-qty {
            position: relative;
            z-index: 1;
            min-width: 46px;
            padding: 6px 8px;
            border: 1px solid rgba(0, 232, 255, 0.28);
            border-radius: 6px;
            background: rgba(0, 12, 29, 0.62);
            color: #f4fbff;
            font-size: 16px;
            font-weight: 800;
            letter-spacing: 0.06em;
            line-height: 1;
            text-align: center;
            text-shadow: 0 0 8px rgba(0, 232, 255, 0.7);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        #win-hangar .container-row[data-container-type="advanced"] { border-color: rgba(180, 108, 255, 0.48); }
        #win-hangar .container-row[data-container-type="advanced"] .container-row-name { color: #d6b8ff; text-shadow: 0 2px 4px #000, 0 0 10px rgba(180, 108, 255, 0.55); }
        #win-hangar .container-row[data-container-type="gold"] { border-color: rgba(255, 168, 61, 0.58); }
        #win-hangar .container-row[data-container-type="standard"],
        #win-hangar .container-row[data-container-type="standard"].selected {
            border-color: rgba(190, 211, 226, 0.78);
            background: linear-gradient(135deg, rgba(58, 73, 88, 0.9), rgba(10, 17, 28, 0.98) 68%);
            box-shadow: inset 0 1px 0 rgba(245, 252, 255, 0.22), inset 0 -12px 22px rgba(0, 0, 0, 0.24), 0 7px 17px rgba(0, 0, 0, 0.48), 0 0 18px rgba(190, 211, 226, 0.18);
        }
        #win-hangar .container-row[data-container-type="standard"] .container-row-name {
            color: #e9f2f7;
            text-shadow: 0 2px 4px #000, 0 0 10px rgba(200, 222, 235, 0.62);
        }
        #win-hangar .container-row[data-container-type="standard"] .container-row-qty {
            border-color: rgba(190, 211, 226, 0.48);
            text-shadow: 0 0 8px rgba(210, 232, 245, 0.8);
        }
        #win-hangar .container-row[data-container-type="gold"] .container-row-name { color: #ffd78a; text-shadow: 0 2px 4px #000, 0 0 10px rgba(255, 168, 61, 0.58); }
        #win-hangar .container-row[data-container-type="elite"] {
            border-color: rgba(196, 91, 115, 0.9);
            background: linear-gradient(135deg, rgba(105, 27, 52, 0.96), rgba(29, 10, 22, 0.98) 68%);
            box-shadow: inset 0 1px 0 rgba(255, 214, 222, 0.28), inset 0 -12px 22px rgba(0, 0, 0, 0.28), 0 7px 17px rgba(0, 0, 0, 0.52), 0 0 23px rgba(190, 47, 86, 0.32);
        }
        #win-hangar .container-row[data-container-type="elite"] .container-row-name {
            position: relative;
            color: #f2f8fc;
            animation: elite-container-name 2.8s ease-in-out infinite;
        }
        #win-hangar .container-row[data-container-type="elite"] .container-row-name::after {
            content: '';
            position: absolute;
            left: -8%;
            right: -8%;
            bottom: -4px;
            height: 2px;
            border-radius: 50%;
            background: linear-gradient(90deg, transparent, #ffffff, #b9d4e5, #ffffff, transparent);
            box-shadow: 0 0 8px rgba(215, 237, 248, 0.95);
            animation: elite-container-underline 2.8s ease-in-out infinite;
        }
        @keyframes elite-container-name {
            0%, 100% { color: #f0c5d0; text-shadow: 0 2px 4px #000, 0 0 8px rgba(190, 67, 99, 0.62); }
            50% { color: #fff4f6; text-shadow: 0 2px 4px #000, 0 0 12px rgba(255, 213, 224, 0.98), 0 0 22px rgba(211, 55, 96, 0.72); }
        }
        @keyframes elite-container-underline {
            0%, 100% { opacity: 0.35; transform: scaleX(0.72); }
            50% { opacity: 1; transform: scaleX(1); }
        }
        #win-hangar .container-loot-preview {
            padding: 9px 10px;
            margin-top: 12px;
            border-top: 1px solid rgba(0, 232, 255, 0.16);
            border-bottom: 1px solid rgba(0, 232, 255, 0.12);
            color: #a9c4d5;
            font-size: 12px;
            letter-spacing: 0.05em;
            line-height: 1.5;
            text-shadow: 0 1px 3px #000;
        }
        #win-hangar .container-actions { margin-top: 12px; }
        #win-hangar .container-actions .btn,
        #win-hangar .container-slot-claim {
            min-height: 42px;
            border-radius: 7px;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.12em;
            box-shadow: 0 5px 12px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
        }
        #win-hangar .container-row-controls {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        #win-hangar .container-row-open {
            min-height: 28px;
            padding: 4px 7px;
            border-radius: 5px;
            font-size: 9px;
            letter-spacing: 0.06em;
            line-height: 1;
        }
        @media (max-width: 560px) {
            #win-hangar #container-panel-root { padding: 4px 3px 8px 1px; }
            #win-hangar .container-slots { gap: 6px; margin-bottom: 7px; }
            #win-hangar .container-slot-wrap { padding: 4px; }
            #win-hangar .container-slot-label { margin-bottom: 3px; font-size: 8px; }
            #win-hangar .container-scene.compact { height: 70px; }
            #win-hangar .container-scene.compact .container-scanner { top: 6px; height: 56px; }
            #win-hangar .container-scene.compact .container-on-belt .container-icon { width: 46px; height: 46px; }
            #win-hangar .container-timer { bottom: 3px; font-size: 8px; }
            #win-hangar .container-list { gap: 5px; }
            #win-hangar .container-row {
                gap: 7px;
                min-height: 52px;
                padding: 6px 7px;
                border-radius: 6px;
            }
            #win-hangar .container-row .container-icon { width: 36px; height: 36px; flex-basis: 36px; }
            #win-hangar .container-row-name { font-size: 11px; letter-spacing: 0.05em; }
            #win-hangar .container-row-meta { margin-top: 2px; font-size: 8px; letter-spacing: 0.03em; }
            #win-hangar .container-row-controls { gap: 4px; }
            #win-hangar .container-row-qty { min-width: 28px; padding: 4px 3px; font-size: 11px; }
            #win-hangar .container-row-open { min-height: 24px; padding: 4px 5px; font-size: 8px; }
        }
        @media (prefers-reduced-motion: reduce) {
            #win-hangar .container-row,
            #win-hangar .container-row::after,
            #win-hangar .container-row[data-container-type="elite"] .container-row-name,
            #win-hangar .container-row[data-container-type="elite"] .container-row-name::after { animation: none; transition: none; }
        }

        /* Бот остается в центре, а пространство вокруг него ускоряется, как при полете. */
        .collector-bot-scene .collector-bot-stars {
            z-index: 0;
            transform-origin: 50% 50%;
        }
        .collector-bot-scene .collector-bot-stars-far {
            animation: collector-stars-flight-far 11s linear infinite;
        }
        .collector-bot-scene .collector-bot-stars-mid {
            animation: collector-stars-flight-mid 5.5s linear infinite reverse;
        }
        .collector-bot-scene .collector-bot-stars-near {
            opacity: .56;
            animation: collector-stars-flight-near 2.4s linear infinite;
        }
        @keyframes collector-stars-flight-far {
            0% { transform: translate3d(-12%, -15%, 0) scale(.92) rotate(8deg); opacity: .18; }
            12% { opacity: .52; }
            100% { transform: translate3d(20%, 24%, 0) scale(1.12) rotate(8deg); opacity: .22; }
        }
        @keyframes collector-stars-flight-mid {
            0% { transform: translate3d(16%, 19%, 0) scale(1.02) rotate(8deg); opacity: .2; }
            10% { opacity: .78; }
            100% { transform: translate3d(-22%, -26%, 0) scale(1.22) rotate(8deg); opacity: .18; }
        }
        @keyframes collector-stars-flight-near {
            0% { transform: translate3d(-12%, -16%, 0) scale(.72) rotate(8deg); opacity: 0; }
            12% { opacity: .74; }
            100% { transform: translate3d(24%, 29%, 0) scale(1.48) rotate(8deg); opacity: 0; }
        }
        .collector-bot-scene::before {
            content: '';
            position: absolute;
            z-index: 1;
            inset: -70%;
            pointer-events: none;
            background:
                repeating-linear-gradient(102deg, transparent 0 24px, rgba(123, 224, 255, .22) 25px 26px, transparent 27px 76px),
                repeating-linear-gradient(102deg, transparent 0 43px, rgba(255, 255, 255, .12) 44px 45px, transparent 46px 112px);
            -webkit-mask-image: radial-gradient(ellipse at center, transparent 0 13%, #000 31%, transparent 69%);
            mask-image: radial-gradient(ellipse at center, transparent 0 13%, #000 31%, transparent 69%);
            opacity: 0;
            transform: scale(.58);
            animation: collector-flight-streaks 1.9s linear infinite;
        }
        @keyframes collector-flight-streaks {
            0% { opacity: 0; transform: scale(.58) translate3d(-2%, -2%, 0); background-position: 0 0, 0 0; }
            18% { opacity: .38; }
            100% { opacity: 0; transform: scale(1.28) translate3d(3%, 4%, 0); background-position: 92px 66px, -68px -48px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .collector-bot-scene .collector-bot-stars,
            .collector-bot-scene::before,
            .collector-bot-scene::after,
            .collector-bot-scene .collector-bot-model,
            .collector-bot-scene .collector-bot-scan { animation: none; }
        }

        #win-hangar {
            font-family: var(--ui-font);
            letter-spacing: 0.01em;
        }
        #win-hangar > .wtitle {
            letter-spacing: 0.12em;
            line-height: 1.25;
        }
        #win-hangar .hangar-header {
            padding: 0 4px;
        }
        #win-hangar .hangar-ship-wrap {
            width: min(100%, 390px);
            margin: 0 auto;
        }
        #win-hangar #hangar-ship {
            display: grid;
            grid-template-columns: auto minmax(120px, 190px);
            align-items: center;
            justify-content: center;
            column-gap: clamp(10px, 3vw, 20px);
            max-width: 360px;
            margin: 2px auto 3px;
        }
        #win-hangar #hangar-ship > span:first-child {
            justify-self: center;
        }
        #win-hangar #hangar-ship canvas,
        #win-hangar #hangar-ship .ship-sprite-img {
            max-height: clamp(96px, 20vh, 144px);
            image-rendering: auto;
        }
        #win-hangar #hangar-ship .ship-stats {
            width: 100%;
            max-width: none;
            margin: 0;
        }
        #win-hangar #hangar-ship .ship-stat-row {
            gap: 6px;
            margin-bottom: 3px;
        }
        #win-hangar #hangar-ship .ship-stat-label {
            width: 28px;
            font-size: 10px;
            line-height: 1.2;
            font-weight: 600;
            letter-spacing: 0.02em;
        }
        #win-hangar #hangar-ship .ship-stat-val {
            width: 28px;
            font-size: 10px;
            line-height: 1.2;
            font-weight: 600;
        }
        #win-hangar #hangar-ship .ship-stat-bar-wrap {
            height: 6px;
            border-radius: 3px;
        }
        #win-hangar #hangar-ship .hangar-balance-hint,
        #win-hangar #hangar-ship .hangar-faction-hint {
            grid-column: 1 / -1;
            font-size: 10px;
            line-height: 1.3;
            letter-spacing: 0.02em;
        }
        #win-hangar #hangar-ship .hangar-balance-hint {
            margin-top: 4px;
        }
        #win-hangar #hangar-res {
            margin: 3px 0 4px;
            padding-top: 5px;
            border-top: 1px solid rgba(0, 232, 255, 0.16);
            font-size: 13px;
            font-weight: 600;
            line-height: 1.4;
            letter-spacing: 0.02em;
        }
        #win-hangar #hangar-res > .res-gfx-inline {
            margin: 0 3px;
            vertical-align: -2px;
        }
        #win-hangar .hangar-parts {
            gap: 4px;
            margin: 5px 0 2px;
            font-size: 10px;
            line-height: 1.2;
            letter-spacing: 0.01em;
        }
        #win-hangar .hangar-part {
            gap: 4px;
            min-height: 22px;
            padding: 3px 6px;
            border-radius: 5px;
        }
        #win-hangar .hangar-part .part-gfx svg {
            width: 14px;
            height: 14px;
        }
        #win-hangar .hangar-panel {
            padding: 7px 3px 10px 0;
        }
        #win-hangar .upgrade-section-head {
            margin: 2px 0 6px;
        }
        #win-hangar .upgrade-section-title {
            font-size: 10px;
            line-height: 1.35;
            letter-spacing: 0.1em;
        }
        #win-hangar .upgrade-row {
            gap: 10px;
            margin: 6px 0;
            padding: 8px 10px;
            border-radius: 7px;
            font-size: 11px;
            line-height: 1.4;
            letter-spacing: 0.01em;
        }
        #win-hangar .upgrade-row .upgrade-head {
            flex: 1 1 auto;
            gap: 3px;
        }
        #win-hangar .upgrade-row .upgrade-title {
            gap: 6px;
            line-height: 1.3;
            font-weight: 600;
        }
        #win-hangar .upgrade-row .upgrade-scope,
        #win-hangar .upgrade-row .upgrade-parts {
            font-size: 9px;
            line-height: 1.3;
            letter-spacing: 0.03em;
        }
        #win-hangar .upgrade-row .btn-sm {
            line-height: 1.25;
            letter-spacing: 0.01em;
        }
        #win-hangar .hangar-balance-hint,
        #win-hangar .hangar-faction-hint {
            line-height: 1.35;
            letter-spacing: 0.02em;
        }
        #win-hangar .hangar-swipe-hint {
            font-size: 8px;
            line-height: 1.4;
            letter-spacing: 0.05em;
        }
        @media (max-width: 360px) {
            #win-hangar #hangar-ship {
                grid-template-columns: auto minmax(104px, 1fr);
                column-gap: 8px;
            }
            #win-hangar #hangar-ship .ship-stat-label,
            #win-hangar #hangar-ship .ship-stat-val {
                font-size: 9px;
            }
            #win-hangar #hangar-res {
                font-size: 12px;
            }
            #win-hangar .hangar-part {
                padding: 3px 4px;
            }
        }
        @media (max-height: 560px) {
            #win-hangar #hangar-ship canvas,
            #win-hangar #hangar-ship .ship-sprite-img {
                max-height: clamp(72px, 18vh, 104px);
            }
            #win-hangar #hangar-ship .hangar-balance-hint,
            #win-hangar #hangar-ship .hangar-faction-hint {
                margin-top: 2px;
                font-size: 9px;
            }
            #win-hangar #hangar-res {
                margin-bottom: 2px;
                padding-top: 3px;
            }
            #win-hangar .hangar-parts {
                margin: 3px 0 1px;
            }
        }

        /* Commander skins and promo tabs: readable at phone and desktop sizes. */
        .player-panel-tabs .player-panel-tab {
            font-size: 10px;
            line-height: 1.25;
            letter-spacing: .025em;
        }
        .player-panel-tabs .player-panel-tab[data-player-tab="skins"],
        .player-panel-tabs .player-panel-tab[data-player-tab="promo"] {
            color: #b8e8f5;
        }
        .skins-panel {
            gap: 14px;
        }
        .skins-intro,
        .skins-note,
        .promo-copy,
        .promo-hint {
            color: #b5d9e8;
            font-family: 'Rajdhani', sans-serif;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.6;
            letter-spacing: .015em;
        }
        .ship-skin-faction {
            gap: 9px;
        }
        .ship-skin-faction-title {
            padding-bottom: 7px;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.35;
            letter-spacing: .08em;
            text-shadow: 0 0 12px color-mix(in srgb, var(--skin-color) 48%, transparent);
        }
        .ship-skins-grid {
            gap: 10px;
        }
        .ship-skin-card {
            position: relative;
            overflow: hidden;
            padding: 10px 8px;
            border: 1px solid color-mix(in srgb, var(--skin-color) 58%, rgba(255, 255, 255, .18));
            border-radius: 10px;
            background: linear-gradient(155deg, rgba(10, 38, 58, .96), rgba(2, 12, 26, .94) 68%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -14px 24px rgba(0, 0, 0, .28), 0 5px 14px rgba(0, 0, 0, .38), 0 0 12px color-mix(in srgb, var(--skin-color) 15%, transparent);
            transform: translateZ(0);
            transition: opacity .2s, box-shadow .2s, border-color .2s, transform .2s, filter .2s;
        }
        .ship-skin-card::before {
            position: absolute;
            z-index: 0;
            inset: 0 0 auto;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--skin-color), transparent);
            content: '';
            opacity: .75;
            pointer-events: none;
        }
        .ship-skin-card > * {
            position: relative;
            z-index: 1;
        }
        .skin-class-guide {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 7px;
        }
        .skin-class-guide-item {
            display: grid;
            min-width: 0;
            gap: 3px;
            padding: 7px 8px;
            border: 1px solid color-mix(in srgb, var(--tier-color) 42%, transparent);
            border-top: 2px solid var(--tier-color);
            border-radius: 6px;
            background: linear-gradient(145deg, color-mix(in srgb, var(--tier-color) 10%, rgba(3, 15, 30, .94)), rgba(2, 12, 26, .92));
        }
        .skin-class-guide-item--standard,
        .ship-skin-card.tier-standard { --tier-color: #9bb7c5; }
        .skin-class-guide-item--specialized,
        .ship-skin-card.tier-specialized { --tier-color: #59dfc1; }
        .skin-class-guide-item--prototype,
        .ship-skin-card.tier-prototype { --tier-color: #c5a2ff; }
        .skin-class-guide-item strong {
            color: var(--tier-color);
            font: 800 clamp(6px, 1vw, 9px)/1.15 'Orbitron', 'Rajdhani', sans-serif;
            letter-spacing: .025em;
            overflow-wrap: anywhere;
        }
        .skin-class-guide-item span {
            color: #b5d9e8;
            font: 600 11px/1.25 'Rajdhani', sans-serif;
        }
        .skin-class-note {
            margin: -8px 0 0;
            color: #92adbd;
            font: 500 11px/1.35 'Rajdhani', sans-serif;
        }
        .skin-rarity-note {
            margin: -8px 0 0;
            color: #a8bfd0;
            font: 500 11px/1.35 'Rajdhani', sans-serif;
        }
        .ship-skin-card.locked {
            opacity: .62;
            filter: saturate(.65) brightness(.78);
        }
        .ship-skin-card.faction-locked {
            opacity: .72;
            filter: saturate(.72) brightness(.82);
        }
        .ship-skin-card.owned {
            opacity: 1;
            filter: none;
        }
        .ship-skin-card.selected {
            border-color: var(--skin-color);
            background: linear-gradient(155deg, color-mix(in srgb, var(--skin-color) 20%, #092238), rgba(2, 12, 26, .97) 72%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -14px 24px rgba(0, 0, 0, .2), 0 0 0 1px color-mix(in srgb, var(--skin-color) 45%, transparent), 0 7px 22px rgba(0, 0, 0, .45), 0 0 20px color-mix(in srgb, var(--skin-color) 48%, transparent);
            transform: translateY(-2px);
        }
        .ship-skin-name {
            min-height: 30px;
            color: #e1f8ff;
            font-family: 'Orbitron', 'Rajdhani', sans-serif;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.35;
            letter-spacing: .035em;
            text-shadow: 0 0 10px color-mix(in srgb, var(--skin-color) 38%, transparent);
            overflow-wrap: normal;
            word-break: normal;
            hyphens: none;
        }
        .ship-skin-card.tier-standard::after,
        .ship-skin-card.tier-specialized::after,
        .ship-skin-card.tier-prototype::after {
            position: absolute;
            z-index: 0;
            top: 10px;
            bottom: 10px;
            left: 0;
            width: 3px;
            border-radius: 0 4px 4px 0;
            background: var(--tier-color);
            box-shadow: 0 0 9px color-mix(in srgb, var(--tier-color) 55%, transparent);
            content: '';
            pointer-events: none;
        }
        .ship-skin-labels {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 4px;
            margin-bottom: 2px;
        }
        .ship-skin-tier-label,
        .ship-skin-rarity-label {
            display: inline-flex;
            min-height: 18px;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 2px 6px;
            border-radius: 999px;
            font: 800 clamp(6px, .72vw, 9px)/1.1 'Orbitron', 'Rajdhani', sans-serif;
            letter-spacing: .035em;
            overflow-wrap: anywhere;
        }
        .ship-skin-tier-label {
            border: 1px solid color-mix(in srgb, var(--tier-color) 54%, transparent);
            background: color-mix(in srgb, var(--tier-color) 10%, rgba(2, 12, 26, .9));
            color: var(--tier-color);
        }
        .ship-skin-rarity-label {
            border: 1px solid color-mix(in srgb, var(--rarity-color) 54%, transparent);
            background: color-mix(in srgb, var(--rarity-color) 10%, rgba(2, 12, 26, .9));
            color: var(--rarity-color);
        }
        .ship-skin-rarity-label.rarity-label--common { --rarity-color: #9bb7c5; }
        .ship-skin-rarity-label.rarity-label--rare { --rarity-color: #70d3ff; }
        .ship-skin-rarity-label.rarity-label--valuable { --rarity-color: #ffd36b; }
        .ship-skin-preview {
            height: 122px;
            filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .48));
        }
        .ship-skin-preview.has-bonus > * { transform: translateY(-5px); }
        .ship-skin-bonus {
            min-height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: -4px 0 4px;
            padding: 4px 6px;
            border: 1px solid color-mix(in srgb, var(--tier-color) 28%, transparent);
            border-radius: 6px;
            background: color-mix(in srgb, var(--tier-color) 6%, rgba(2, 12, 26, .76));
            color: #f0c5d4;
            font-family: 'Rajdhani', sans-serif;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.15;
            overflow-wrap: anywhere;
        }
        .ship-blueprint-progress {
            display: grid;
            gap: 5px;
            min-height: 32px;
            margin: 0 0 6px;
            color: #d5eaf2;
            font-family: 'Rajdhani', sans-serif;
            font-size: 10px;
            font-weight: 700;
            line-height: 1.2;
        }
        .ship-blueprint-progress strong { color: #ffe494; }
        .ship-blueprint-progress > i {
            display: block;
            height: 5px;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(255, 255, 255, .12);
        }
        .ship-blueprint-progress > i > b {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #23c8e4, #ffe494);
            box-shadow: 0 0 8px rgba(35, 200, 228, .55);
        }
        .ship-skin-action {
            min-height: 38px;
            padding: 6px 5px !important;
            font-size: 10px !important;
            line-height: 1.35;
            letter-spacing: .025em;
        }
        .ship-skin-action:disabled {
            opacity: .82;
            cursor: default;
        }
        .promo-panel {
            gap: 14px;
            padding: 16px;
            border-radius: 10px;
            background: linear-gradient(145deg, rgba(7, 29, 48, .94), rgba(2, 12, 26, .92));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 0, 0, .28);
        }
        .promo-title {
            font-family: 'Orbitron', 'Rajdhani', sans-serif;
            font-size: 15px;
            font-weight: 700;
            line-height: 1.4;
            letter-spacing: .1em;
        }
        .promo-copy {
            margin: 0;
        }
        .promo-form .btn {
            min-height: 42px;
            padding: 8px 12px;
            font-size: 13px;
            line-height: 1.35;
        }
        .promo-input {
            min-height: 44px;
            font-size: 16px;
            line-height: 1.4;
            letter-spacing: .12em;
        }
        .promo-code-row {
            min-height: 48px;
            padding: 12px;
        }
        .promo-code-row-label,
        .promo-code-row-value {
            font-family: 'Rajdhani', sans-serif;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.4;
            letter-spacing: .05em;
        }
        .promo-code-row-value {
            text-align: right;
            overflow-wrap: anywhere;
        }
        .promo-hint {
            min-height: 20px;
            color: #ffe08a;
        }
        @media (max-width: 600px) {
            .player-panel-tabs {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 5px;
            }
            .player-panel-tabs .player-panel-tab {
                min-width: 0;
                min-height: 36px;
                padding: 6px 3px;
                font-size: 10px;
                line-height: 1.2;
                white-space: normal;
            }
        }
        @media (max-width: 380px) {
            .player-panel-tabs { gap: 3px; }
            .player-panel-tabs .player-panel-tab { padding: 6px 2px; font-size: 9px; }
            .skin-class-guide { gap: 4px; }
            .skin-class-guide-item { gap: 2px; padding: 5px 4px; }
            .skin-class-guide-item strong { font-size: 6px; }
            .skin-class-guide-item span,
            .skin-class-note { font-size: 9px; }
            .ship-skins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .ship-skin-card { padding: 8px 6px; }
            .ship-skin-name { min-height: 34px; font-size: 10px; }
            .ship-skin-tier-label,
            .ship-skin-rarity-label { min-height: 16px; padding: 2px 4px; font-size: 6px; }
            .ship-skin-preview { height: 104px; }
            .ship-skin-action { font-size: 9px !important; }
            .promo-panel { padding: 12px; }
            .promo-code-row { align-items: flex-start; flex-direction: column; }
            .promo-code-row-value { text-align: left; }
        }
        html.layout-pc .player-panel-tabs .player-panel-tab {
            min-height: 42px;
            font-size: 13px;
            letter-spacing: .04em;
        }
        html.layout-pc .skins-intro,
        html.layout-pc .skins-note,
        html.layout-pc .promo-copy,
        html.layout-pc .promo-hint { font-size: 16px; line-height: 1.65; }
        html.layout-pc .skin-class-guide-item { padding: 9px 11px; }
        html.layout-pc .skin-class-guide-item strong { font-size: 11px; }
        html.layout-pc .skin-class-guide-item span,
        html.layout-pc .skin-class-note { font-size: 14px; }
        html.layout-pc .ship-skin-faction-title { font-size: 15px; }
        html.layout-pc .ship-skin-name { min-height: 36px; font-size: 13px; }
        html.layout-pc .ship-skin-tier-label,
        html.layout-pc .ship-skin-rarity-label { min-height: 22px; font-size: 10px; }
        html.layout-pc .skin-rarity-note { font-size: 14px; }
        html.layout-pc .ship-skin-preview { height: 150px; }
        html.layout-pc .ship-skin-bonus { min-height: 42px; font-size: 14px; }
        html.layout-pc .ship-blueprint-progress { min-height: 39px; font-size: 12px; }
        html.layout-pc .ship-skin-action { min-height: 42px; font-size: 12px !important; }
        html.layout-pc .promo-title { font-size: 18px; }
        html.layout-pc .promo-code-row-label,
        html.layout-pc .promo-code-row-value { font-size: 15px; }
        @media (prefers-reduced-motion: reduce) {
            .ship-skin-card { transition: none; }
        }

        /* Неоновая панель командира и читабельная статистика. */
        .player-panel.help-panel {
            border: 1px solid transparent;
            border-radius: 14px;
            background: linear-gradient(155deg, rgba(10, 28, 51, .98), rgba(3, 10, 24, .99)) padding-box,
                        linear-gradient(135deg, rgba(0, 232, 255, .9), rgba(74, 89, 255, .34) 48%, rgba(0, 232, 255, .72)) border-box;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -22px 42px rgba(0, 4, 18, .44),
                        0 18px 48px rgba(0, 0, 0, .55), 0 0 26px rgba(0, 232, 255, .2), 0 0 56px rgba(0, 114, 255, .1);
        }
        .player-panel-body.help-body {
            font-family: 'Rajdhani', sans-serif;
            font-size: 13px;
            line-height: 1.42;
            letter-spacing: .012em;
            scrollbar-color: rgba(0, 232, 255, .45) rgba(0, 16, 31, .55);
        }
        .stats-grid-2col { gap: 10px; }
        .stats-block {
            padding: 10px 11px 7px;
            border: 1px solid rgba(0, 210, 255, .2);
            border-radius: 9px;
            background: linear-gradient(145deg, rgba(5, 30, 49, .8), rgba(2, 14, 28, .76));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 5px 14px rgba(0, 0, 0, .15);
        }
        .stats-section {
            margin-bottom: 7px;
            font-family: 'Rajdhani', sans-serif;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: .09em;
            text-shadow: 0 0 10px rgba(0, 232, 255, .26);
        }
        .stats-table {
            table-layout: fixed;
            font-family: 'Rajdhani', sans-serif;
            font-size: 12px;
            line-height: 1.3;
            letter-spacing: .005em;
        }
        .stats-table td {
            padding: 4px 3px;
            border-bottom-color: rgba(0, 232, 255, .09);
            overflow-wrap: anywhere;
        }
        .stats-table td:first-child { width: 61%; color: #b7d6e5; }
        .stats-table td:last-child { width: 39%; color: #f0fbff; }
        .stats-note {
            font-size: 11px;
            line-height: 1.45;
            letter-spacing: .01em;
        }
        .ton-milestones-card {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            margin: 0 0 12px;
            padding: 13px 12px 10px;
            border: 1px solid rgba(0, 232, 255, .42);
            border-radius: 12px;
            background: radial-gradient(ellipse at 12% 0%, rgba(0, 198, 255, .16), transparent 48%),
                        linear-gradient(155deg, rgba(4, 30, 50, .96), rgba(2, 12, 25, .96) 72%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -16px 28px rgba(0, 0, 0, .24),
                        0 8px 22px rgba(0, 0, 0, .27), 0 0 17px rgba(0, 232, 255, .12);
        }
        .ton-milestones-card::after {
            position: absolute;
            z-index: -1;
            inset: 5px;
            border: 1px solid rgba(0, 232, 255, .1);
            border-radius: 8px;
            content: '';
            pointer-events: none;
        }
        .ton-milestones-heading {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 12px;
        }
        .ton-milestones-kicker {
            display: block;
            margin-bottom: 3px;
            color: #71cfe7;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .13em;
        }
        .ton-milestones-heading h2 {
            margin: 0;
            color: #e7fbff;
            font-size: 17px;
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: .1em;
            text-shadow: 0 0 13px rgba(0, 232, 255, .56);
        }
        .ton-milestones-total {
            max-width: 55%;
            color: #b8eafa;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.3;
            text-align: right;
        }
        .ton-milestone-track {
            position: relative;
            display: flex;
            height: 17px;
            margin: 0 2px 12px;
            overflow: hidden;
            border: 1px solid rgba(190, 132, 255, .55);
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(12, 5, 29, .98), rgba(28, 12, 54, .96));
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, .78), inset 0 1px 0 rgba(255, 255, 255, .09),
                        0 0 10px rgba(168, 85, 247, .24), 0 0 20px rgba(168, 85, 247, .12);
        }
        .ton-milestone-fill {
            position: absolute;
            z-index: 1;
            inset: 1px auto 1px 1px;
            width: var(--ton-fill, 0%);
            border-radius: inherit;
            background: linear-gradient(90deg, #6d28d9, #a855f7 58%, #e879f9);
            box-shadow: 0 0 10px rgba(168, 85, 247, .95), 0 0 20px rgba(168, 85, 247, .46),
                        inset 0 1px 0 rgba(255, 255, 255, .62), inset 0 -2px 3px rgba(54, 8, 112, .52);
            transition: width .7s cubic-bezier(.2, .8, .2, 1);
        }
        .ton-milestone-track > span {
            position: relative;
            z-index: 2;
            flex: var(--ton-segment-width, 1) 0 0;
            border-right: 1px solid rgba(3, 14, 28, .9);
            box-shadow: 1px 0 0 rgba(179, 247, 255, .25);
        }
        .ton-milestone-track > span:last-child { border-right: 0; box-shadow: none; }
        .ton-milestone-list {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 5px;
        }
        .ton-milestone-node {
            display: flex;
            min-width: 0;
            align-items: center;
            flex-direction: column;
            gap: 3px;
            padding: 6px 2px 5px;
            border: 1px solid rgba(103, 175, 201, .2);
            border-radius: 8px;
            background: linear-gradient(150deg, rgba(14, 38, 58, .78), rgba(3, 15, 29, .82));
            text-align: center;
        }
        .ton-milestone-node.ready {
            border-color: rgba(194, 111, 255, .72);
            background: linear-gradient(150deg, rgba(48, 22, 76, .9), rgba(14, 11, 36, .94));
            box-shadow: inset 0 0 13px rgba(168, 85, 247, .16), 0 0 12px rgba(168, 85, 247, .2),
                        0 3px 8px rgba(0, 0, 0, .26);
        }
        .ton-milestone-node.claimed {
            border-color: rgba(93, 231, 177, .46);
            background: linear-gradient(150deg, rgba(12, 49, 48, .8), rgba(3, 20, 28, .84));
        }
        .ton-milestone-reward {
            display: grid;
            width: 38px;
            height: 38px;
            place-items: center;
            position: relative;
            isolation: isolate;
            overflow: visible;
            border: 1px solid rgba(143, 119, 190, .55);
            border-radius: 50%;
            background: radial-gradient(circle at 32% 22%, #66528f, #241b43 52%, #0b1023 88%);
            color: #b9a8db;
            font-size: 19px;
            font-weight: 700;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 7px rgba(0, 0, 0, .35);
            cursor: not-allowed;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }
        .ton-milestone-node.ready .ton-milestone-reward {
            border-color: #e0a4ff;
            background: radial-gradient(circle at 35% 22%, #f7dcff, #c54dff 42%, #7019b5 76%, #35055e);
            color: #fff8ff;
            text-shadow: 0 0 8px #fff, 0 0 15px #edb5ff;
            box-shadow: inset 0 2px 2px rgba(255, 255, 255, .78), inset 0 -4px 7px rgba(60, 7, 104, .7),
                        0 0 10px rgba(198, 77, 255, .9), 0 0 21px rgba(168, 85, 247, .48), 0 4px 8px rgba(0, 0, 0, .48);
            cursor: pointer;
        }
        .ton-milestone-node.ready .ton-milestone-reward:hover,
        .ton-milestone-node.ready .ton-milestone-reward:focus-visible {
            transform: translateY(-2px) scale(1.06);
            outline: 2px solid rgba(235, 197, 255, .9);
            outline-offset: 2px;
        }
        .ton-milestone-node.claimed .ton-milestone-reward {
            border-color: #7bffd0;
            background: radial-gradient(circle at 35% 22%, #d5fff0, #25bd91 50%, #075746 86%);
            color: #f3fff9;
            text-shadow: 0 0 8px rgba(255, 255, 255, .86);
            box-shadow: inset 0 2px 2px rgba(255, 255, 255, .72), inset 0 -4px 7px rgba(0, 69, 56, .7),
                        0 0 12px rgba(81, 255, 191, .52), 0 4px 8px rgba(0, 0, 0, .45);
        }
        .ton-milestone-reward::before,
        .ton-milestone-reward::after {
            position: absolute;
            z-index: 0;
            border-radius: inherit;
            content: '';
            pointer-events: none;
        }
        .ton-milestone-reward::before {
            inset: 2px;
            border: 1px solid rgba(255, 255, 255, .22);
            box-shadow: inset 0 1px 2px rgba(255, 255, 255, .22);
        }
        .ton-milestone-reward::after {
            inset: -5px;
            border: 1px solid rgba(224, 164, 255, .86);
            opacity: 0;
            transform: scale(.62);
        }
        .ton-milestone-reward:disabled { opacity: .9; }
        .ton-milestone-threshold {
            color: #dcf8ff;
            font-size: 10px;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: .035em;
        }
        .ton-milestone-reward-label {
            color: #a9ccda;
            font-size: 10px;
            font-weight: 600;
            line-height: 1.2;
        }
        .ton-milestone-status {
            color: #7f9faf;
            font-size: 9px;
            line-height: 1.2;
            text-transform: uppercase;
        }
        .ton-milestone-node.ready .ton-milestone-status { color: #dfa2ff; text-shadow: 0 0 8px rgba(198, 77, 255, .55); }
        .ton-milestone-node.claimed .ton-milestone-status { color: #72efba; }
        .ton-milestone-node.just-claimed { animation: ton-milestone-node-flash 1.25s ease-out both; }
        .ton-milestone-node.just-claimed .ton-milestone-reward { animation: ton-milestone-reward-pop 1.15s cubic-bezier(.2, .85, .25, 1) both; }
        .ton-milestone-node.just-claimed .ton-milestone-reward::after { animation: ton-milestone-ring-burst 1.1s ease-out both; }
        @keyframes ton-milestone-node-flash {
            0% { box-shadow: inset 0 0 0 rgba(81, 255, 191, 0), 0 0 0 rgba(81, 255, 191, 0); }
            35%, 70% { box-shadow: inset 0 0 22px rgba(81, 255, 191, .34), 0 0 24px rgba(81, 255, 191, .56); }
            100% { box-shadow: inset 0 0 10px rgba(81, 255, 191, .08), 0 0 10px rgba(81, 255, 191, .12); }
        }
        @keyframes ton-milestone-reward-pop {
            0% { transform: scale(.72) rotate(-12deg); }
            42% { transform: scale(1.24) rotate(7deg); }
            68% { transform: scale(.94) rotate(-3deg); }
            100% { transform: scale(1) rotate(0); }
        }
        @keyframes ton-milestone-ring-burst {
            0% { opacity: .95; transform: scale(.62); }
            100% { opacity: 0; transform: scale(1.65); }
        }
        .ton-milestones-note,
        .ton-milestones-message,
        .ton-milestones-empty {
            margin: 9px 0 0;
            color: #98bccb;
            font-size: 11px;
            line-height: 1.4;
            letter-spacing: .01em;
        }
        .ton-milestones-message { color: #ffe09a; }
        .ton-milestones-empty { grid-column: 1 / -1; text-align: center; }
        @media (max-width: 600px) {
            .stats-grid-2col { grid-template-columns: 1fr; }
            .stats-section { font-size: 14px; }
            .stats-table { font-size: 13px; }
            .stats-table td { padding: 5px 4px; }
            .stats-note { font-size: 12px; }
            .ton-milestone-list { gap: 4px; }
            .ton-milestone-node { padding: 6px 1px 5px; }
            .ton-milestone-threshold,
            .ton-milestone-reward-label { font-size: 9px; }
            .ton-milestone-status { font-size: 8px; }
        }
        @media (max-width: 380px) {
            .player-panel.help-panel { padding: 14px 11px 12px; }
            .ton-milestones-card { padding: 11px 8px 9px; }
            .ton-milestone-list { gap: 3px; }
            .ton-milestone-reward { width: 34px; height: 34px; }
            .ton-milestone-heading h2 { font-size: 15px; }
            .ton-milestones-total { font-size: 10px; }
        }
        html.layout-pc .stats-section { font-size: 14px !important; }
        html.layout-pc .stats-table { font-size: 13px !important; line-height: 1.35; }
        html.layout-pc .stats-table td { padding: 5px 4px; }
        html.layout-pc .stats-note { font-size: 12px !important; }
        @media (prefers-reduced-motion: reduce) {
            .ton-milestone-fill,
            .ton-milestone-reward { transition: none; }
            .ton-milestone-node.just-claimed,
            .ton-milestone-node.just-claimed .ton-milestone-reward,
            .ton-milestone-node.just-claimed .ton-milestone-reward::after { animation: none; }
        }

        /* Стартовый выбор фракции и корабля: компактные объёмные панели вместо полноэкранного окна. */
        #win-faction,
        #win-ship {
            width: min(94%, 560px);
            max-height: min(86vh, calc(100dvh - var(--panel-top-h) - var(--panel-bottom-h) - 28px));
            padding: clamp(16px, 4vw, 24px);
            border: 1px solid rgba(0, 232, 255, .65);
            border-radius: 12px;
            background:
                radial-gradient(ellipse at 50% 0, rgba(0, 232, 255, .12), transparent 52%),
                linear-gradient(150deg, rgba(10, 23, 52, .98), rgba(4, 7, 24, .99) 72%);
            box-shadow: 0 18px 54px rgba(0, 0, 0, .6), 0 0 30px rgba(0, 232, 255, .2), 0 0 64px rgba(255, 43, 214, .1), inset 0 1px 0 rgba(255, 255, 255, .13);
        }
        #win-faction .wtitle,
        #win-ship #ship-wtitle {
            margin: 0 0 16px;
            color: #e9fbff;
            font-size: clamp(17px, 4.6vw, 23px) !important;
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: .16em;
            text-shadow: 0 0 12px rgba(0, 232, 255, .52), 0 0 24px rgba(255, 43, 214, .2);
        }
        #faction-list {
            display: grid;
            gap: 10px;
        }
        #faction-list .faction-choice-card {
            position: relative;
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr) 20px;
            align-items: center;
            gap: 11px;
            width: 100%;
            min-height: 76px;
            margin: 0;
            padding: 12px 14px;
            overflow: hidden;
            border: 1px solid color-mix(in srgb, var(--faction-color) 72%, transparent);
            border-radius: 9px;
            color: #f2f8ff;
            text-align: left;
            background: linear-gradient(110deg, color-mix(in srgb, var(--faction-color) 17%, rgba(5, 13, 32, .96)), rgba(5, 10, 27, .97) 58%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -9px 20px rgba(0, 0, 0, .24), 0 5px 14px rgba(0, 0, 0, .3), 0 0 12px color-mix(in srgb, var(--faction-color) 20%, transparent);
        }
        #faction-list .faction-choice-card::before {
            position: absolute;
            inset: 0 auto 0 0;
            width: 3px;
            content: '';
            background: var(--faction-color);
            box-shadow: 0 0 12px var(--faction-color);
        }
        #faction-list .faction-choice-card:hover,
        #faction-list .faction-choice-card:focus-visible {
            border-color: var(--faction-color);
            outline: none;
            transform: translateY(-1px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 18px color-mix(in srgb, var(--faction-color) 34%, transparent), 0 7px 18px rgba(0, 0, 0, .38);
        }
        .faction-choice-emblem {
            display: grid;
            place-items: center;
            width: 32px;
            height: 32px;
            border: 1px solid color-mix(in srgb, var(--faction-color) 76%, transparent);
            border-radius: 8px;
            color: var(--faction-color);
            font-size: 20px;
            text-shadow: 0 0 10px var(--faction-color);
            background: color-mix(in srgb, var(--faction-color) 13%, rgba(3, 9, 24, .9));
            box-shadow: inset 0 0 10px color-mix(in srgb, var(--faction-color) 16%, transparent), 0 0 12px color-mix(in srgb, var(--faction-color) 20%, transparent);
        }
        .faction-choice-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
        .faction-choice-name { color: #f4fbff; font-size: clamp(14px, 3.8vw, 17px); font-weight: 700; line-height: 1.2; letter-spacing: .04em; }
        .faction-choice-subtitle { color: var(--faction-color); font-size: clamp(11px, 3vw, 13px); font-weight: 600; letter-spacing: .07em; }
        .faction-choice-stats { color: #a9c4d6; font-size: clamp(9px, 2.5vw, 11px) !important; line-height: 1.35; letter-spacing: .025em; }
        .faction-choice-arrow { color: var(--faction-color); font-size: 27px; line-height: 1; text-shadow: 0 0 9px var(--faction-color); }

        .overlay:has(#win-ship:not(.hidden)) {
            align-items: center;
            justify-content: center;
            padding: 12px;
        }
        #win-ship {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: min(96%, 640px);
            max-width: 640px;
            height: auto;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            box-sizing: border-box;
            padding: clamp(14px, 3.5vw, 22px);
        }
        #win-ship #ship-wtitle { flex-shrink: 0; margin-bottom: 2px; }
        #win-ship .faction-brief {
            max-height: min(22vh, 180px);
            overflow-y: auto;
            flex-shrink: 0;
            margin: 0;
            padding: 9px 11px;
            border-radius: 8px;
            font-size: clamp(10px, 2.8vw, 12px);
            line-height: 1.45;
            background: linear-gradient(135deg, rgba(3, 15, 34, .92), rgba(7, 11, 29, .78));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 18px rgba(0, 232, 255, .06);
        }
        #win-ship .faction-brief-title { margin-bottom: 4px; font-size: clamp(12px, 3.3vw, 15px); letter-spacing: .1em; }
        #win-ship .faction-brief p { margin-bottom: 5px; line-height: 1.45; }
        #ship-list {
            flex: 0 0 auto;
            gap: 8px;
        }
        #ship-list .card {
            padding: 8px;
            border: 1px solid rgba(0, 232, 255, .35);
            border-radius: 9px;
            background: linear-gradient(155deg, rgba(10, 28, 52, .92), rgba(4, 8, 25, .98));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -10px 18px rgba(0, 0, 0, .22), 0 6px 14px rgba(0, 0, 0, .28);
        }
        #ship-list .card:hover { border-color: rgba(0, 232, 255, .78); box-shadow: 0 0 16px rgba(0, 232, 255, .19), inset 0 1px 0 rgba(255, 255, 255, .12); }
        #ship-list .ship-name { min-height: 2.4em; margin-bottom: 6px; color: #dff8ff; font-size: clamp(10px, 2.9vw, 13px) !important; line-height: 1.2; letter-spacing: .035em; }
        #ship-list .ship-preview { min-height: 100px; border-color: rgba(0, 232, 255, .24); border-radius: 6px; background: radial-gradient(ellipse at center, rgba(0, 232, 255, .09), transparent 72%); }
        #ship-list .ship-stat-label,
        #ship-list .ship-stat-val { width: 25px; font-size: 8px !important; }
        #ship-list .ship-stat-bar-wrap { height: 5px; }
        #ship-list .card.selected {
            border-color: #ff54d8 !important;
            background: linear-gradient(155deg, rgba(48, 19, 66, .96), rgba(7, 9, 28, .98));
            box-shadow: 0 0 20px rgba(255, 43, 214, .34), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 18px rgba(255, 43, 214, .1);
        }
        #ship-list .card.selected .ship-name { color: #ffd7f6; }
        #win-ship .ship-actions {
            display: flex;
            justify-content: center;
            gap: 12px;
            width: 100%;
            max-width: 440px;
            margin: 4px auto 0;
            padding: 0;
        }
        #win-ship .ship-actions .btn {
            position: relative;
            flex: 0 1 200px;
            width: auto;
            min-width: 0;
            min-height: 44px;
            margin: 0;
            padding: 9px 13px;
            border: 1px solid rgba(0, 232, 255, .75);
            border-radius: 7px;
            color: #e9fbff;
            font-size: clamp(11px, 3vw, 14px) !important;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: .08em;
            background: linear-gradient(180deg, rgba(0, 84, 125, .74), rgba(4, 12, 34, .98));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -4px 0 rgba(0, 0, 0, .25), 0 5px 0 rgba(0,  4, 18, .76), 0 0 16px rgba(0, 232, 255, .22);
            text-shadow: 0 0 10px rgba(0, 232, 255, .28);
        }
        #win-ship .ship-actions .btn::before {
            position: absolute;
            inset: 4px auto 4px 4px;
            width: 2px;
            content: '';
            background: #42f5ff;
            box-shadow: 0 0 9px #00e8ff;
        }
        #win-ship .ship-actions .btn-back {
            border-color: rgba(179, 126, 255, .72);
            color: #e8d9ff;
            background: linear-gradient(180deg, rgba(73, 37, 111, .78), rgba(15, 9, 35, .98));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), inset 0 -4px 0 rgba(0, 0, 0, .25), 0 5px 0 rgba(0, 4, 18, .76), 0 0 16px rgba(171, 85, 255, .2);
        }
        #win-ship .ship-actions .btn-back::before { background: #d39aff; box-shadow: 0 0 9px #c37aff; }
        #win-ship .ship-actions .btn:hover:not(:disabled),
        #win-ship .ship-actions .btn:focus-visible:not(:disabled) { transform: translateY(-2px); filter: brightness(1.16); outline: 2px solid rgba(0, 232, 255, .45); outline-offset: 2px; }
        #win-ship .ship-actions .btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55), 0 1px 0 rgba(0, 4, 18, .76), 0 0 8px rgba(0, 232, 255, .2); }
        #win-ship .ship-actions .btn:disabled { filter: grayscale(.45); }
        @media (max-width: 380px) {
            #win-faction,
            #win-ship { padding: 14px 12px; }
            #faction-list { gap: 8px; }
            #faction-list .faction-choice-card { grid-template-columns: 30px minmax(0, 1fr) 16px; gap: 8px; min-height: 70px; padding: 9px 10px; }
            .faction-choice-emblem { width: 28px; height: 28px; }
            #ship-list { gap: 5px; }
            #ship-list .card { padding: 5px; }
            #ship-list .ship-preview { min-height: 86px; }
            #win-ship .ship-actions { gap: 8px; }
            #win-ship .ship-actions .btn { min-height: 42px; padding: 8px 7px; letter-spacing: .04em; }
        }
        #win-battlepass .checkin-cell-reward {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 4px 7px;
        }
        #win-battlepass .checkin-reward-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
            white-space: nowrap;
        }
        #win-battlepass .bp-ship-bonus-label {
            display: block;
            width: 100%;
            font-size: 5.5px;
            line-height: 1.2;
            overflow-wrap: anywhere;
        }
        #win-battlepass .bp-final-day {
            border-color: rgba(255, 212, 0, 0.95);
            background: linear-gradient(160deg, rgba(64, 45, 6, 0.9), rgba(0, 24, 40, 0.96));
            box-shadow: inset 0 0 10px rgba(255, 212, 0, 0.16);
        }
        #win-battlepass .bp-final-day .checkin-cell-reward {
            display: grid;
            width: 100%;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-content: center;
            gap: 1px 2px;
            font-size: 5px;
            line-height: 1;
        }
        #win-battlepass .bp-final-day .checkin-reward-item {
            min-width: 0;
            justify-content: center;
            gap: 1px;
            font-size: 5px;
            line-height: 1;
        }
        #win-battlepass .bp-final-day .checkin-cell-reward .res-gfx-inline,
        #win-battlepass .bp-final-day .checkin-cell-reward .part-gfx-inline {
            width: 9px;
            height: 9px;
            vertical-align: middle;
        }
        #win-battlepass .bp-ship-flip {
            width: 100%;
            min-height: 0;
            flex: 1 1 auto;
            perspective: 520px;
        }
        #win-battlepass .bp-ship-flip-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform .48s cubic-bezier(.2, .72, .2, 1);
        }
        #win-battlepass .bp-ship-reward.is-flipped .bp-ship-flip-inner { transform: rotateY(180deg); }
        #win-battlepass .bp-ship-flip-face {
            position: absolute;
            inset: 0;
            display: flex;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            padding: 2px;
            overflow: hidden;
            border: 1px solid transparent;
            border-radius: 6px;
            background: transparent;
            color: #fff1b0;
            font: inherit;
            line-height: 1.1;
            text-align: center;
            cursor: pointer;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-tap-highlight-color: transparent;
        }
        #win-battlepass .bp-ship-flip-face:disabled { opacity: 1; }
        #win-battlepass .bp-ship-flip-face:focus-visible {
            outline: 2px solid #fff1a8;
            outline-offset: -2px;
        }
        #win-battlepass .bp-ship-flip-back {
            transform: rotateY(180deg);
            gap: 1px;
            padding: 1px;
            border-color: rgba(255, 226, 122, .56);
            background: linear-gradient(145deg, rgba(70, 49, 9, .98), rgba(4, 24, 40, .98));
            box-shadow: inset 0 0 12px rgba(255, 212, 0, .12);
        }
        #win-battlepass .bp-ship-reward-image { height: 26px; flex: 0 0 26px; }
        #win-battlepass .bp-ship-reward-image .ship-sprite-img,
        #win-battlepass .bp-ship-reward-image canvas { height: 24px !important; }
        #win-battlepass .checkin-cell.bp-ship-reward.locked { opacity: .88; }
        #win-battlepass .bp-ship-flip-hint {
            color: #ffe47a;
            font-size: 7px;
            font-weight: 800;
            letter-spacing: .025em;
            text-shadow: 0 0 6px rgba(255, 212, 0, .4);
        }
        #win-battlepass .bp-ship-bonus-heading {
            margin-bottom: 1px;
            color: #ffe47a;
            font-size: 7px;
            font-weight: 900;
            letter-spacing: .05em;
        }
        #win-battlepass .bp-ship-bonus-row { display: flex; flex-direction: column; gap: 1px; }
        #win-battlepass .bp-ship-bonus-type {
            color: #92eaff;
            font-size: 6.2px;
            font-weight: 800;
            letter-spacing: .04em;
        }
        #win-battlepass .bp-ship-bonus-value {
            color: #fff5ce;
            font-size: 7px;
            font-weight: 700;
            line-height: 1.12;
        }
        html.layout-pc #win-battlepass .checkin-cell {
            height: 116px;
            min-height: 116px;
            padding: 22px 6px 5px;
            gap: 5px;
        }
        html.layout-pc #win-battlepass .checkin-cell-day { font-size: 12px !important; }
        html.layout-pc #win-battlepass .checkin-cell-reward { font-size: 11px !important; line-height: 1.25; }
        html.layout-pc #win-battlepass .checkin-cell-reward .res-gfx-inline,
        html.layout-pc #win-battlepass .checkin-cell-reward .part-gfx-inline { width: 22px; height: 22px; }
        html.layout-pc #win-battlepass .checkin-cell-reward .res-gfx-inline svg,
        html.layout-pc #win-battlepass .checkin-cell-reward .part-gfx-inline svg { width: 22px; height: 22px; }
        html.layout-pc #win-battlepass .bp-ship-reward-image { height: 54px; flex-basis: 54px; }
        html.layout-pc #win-battlepass .bp-ship-reward-image .ship-sprite-img,
        html.layout-pc #win-battlepass .bp-ship-reward-image canvas { height: 52px !important; }
        html.layout-pc #win-battlepass .bp-ship-flip-hint { font-size: 9px; }
        html.layout-pc #win-battlepass .bp-ship-bonus-heading,
        html.layout-pc #win-battlepass .bp-ship-bonus-type { font-size: 9px; }
        html.layout-pc #win-battlepass .bp-ship-bonus-value { font-size: 10px; }
        html.layout-pc #win-battlepass .bp-final-day .checkin-cell-reward { font-size: 8px !important; }
        html.layout-pc #win-battlepass .bp-final-day .checkin-reward-item { font-size: 8px !important; }
        html.layout-pc #win-battlepass .bp-final-day .checkin-cell-reward .res-gfx-inline,
        html.layout-pc #win-battlepass .bp-final-day .checkin-cell-reward .part-gfx-inline { width: 16px; height: 16px; }
        @media (max-width: 600px) {
            #win-battlepass .checkin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
            #win-battlepass .checkin-status { font-size: 10px; line-height: 1.45; }
            #win-battlepass .checkin-cell { height: 110px; min-height: 110px; padding: 23px 3px 5px; gap: 4px; }
            #win-battlepass .checkin-cell-day { min-width: 29px; height: 17px; font-size: 11px !important; }
            #win-battlepass .checkin-cell-reward { font-size: 9px !important; line-height: 1.2; gap: 3px 4px; }
            #win-battlepass .checkin-reward-item { gap: 2px; }
            #win-battlepass .checkin-cell-reward .res-gfx-inline,
            #win-battlepass .checkin-cell-reward .part-gfx-inline { width: 22px; height: 22px; }
            #win-battlepass .checkin-cell-reward .res-gfx-inline svg,
            #win-battlepass .checkin-cell-reward .part-gfx-inline svg { width: 22px; height: 22px; }
            #win-battlepass .bp-ship-reward-image { height: 52px; flex-basis: 52px; }
            #win-battlepass .bp-ship-reward-image .ship-sprite-img,
            #win-battlepass .bp-ship-reward-image canvas { height: 50px !important; }
            #win-battlepass .bp-ship-flip-hint { font-size: 9px; }
            #win-battlepass .bp-ship-bonus-heading,
            #win-battlepass .bp-ship-bonus-type { font-size: 8px; }
            #win-battlepass .bp-ship-bonus-value { font-size: 9px; }
            #win-battlepass .checkin-today { font-size: 10px; }
            #win-battlepass .checkin-choice-title { font-size: 10px; }
            #win-battlepass .checkin-choice-btn { min-height: 44px; padding: 10px; font-size: 10px; }
            #win-battlepass .bp-final-day .checkin-cell-reward { font-size: 7px !important; }
            #win-battlepass .bp-final-day .checkin-reward-item { font-size: 7px !important; }
            #win-battlepass .bp-final-day .checkin-cell-reward .res-gfx-inline,
            #win-battlepass .bp-final-day .checkin-cell-reward .part-gfx-inline { width: 13px; height: 13px; }
            #win-battlepass .bp-final-day .checkin-cell-reward .res-gfx-inline svg,
            #win-battlepass .bp-final-day .checkin-cell-reward .part-gfx-inline svg { width: 13px; height: 13px; }
        }

        html.layout-pc #win-battlepass .bp-final-day .checkin-cell-reward .res-gfx-inline svg,
        html.layout-pc #win-battlepass .bp-final-day .checkin-cell-reward .part-gfx-inline svg { width: 16px; height: 16px; }
        @media (prefers-reduced-motion: reduce) {
            #faction-list .faction-choice-card,
            #win-ship .ship-actions .btn,
            #win-battlepass .bp-ship-flip-inner,
            #win-skins .paid-skin-buy { transition: none; }
        }

        /* Витрина использует целиком утверждённую модель mines/skins.png. */
        #win-skins {
            container-type: inline-size;
            display: block;
            width: min(96vw, 1180px, calc((100dvh - var(--game-inset-top) - var(--game-inset-bottom) - 24px) * 1.5));
            max-height: none;
            aspect-ratio: 3 / 2;
            padding: 0;
            overflow: visible;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }
        #win-skins::before { display: none; }
        .paid-ship-skins-grid,
        .paid-skins-artboard { position: absolute; inset: 0; }
        .paid-skins-artboard { overflow: hidden; }
        .paid-skins-art {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: fill;
            user-select: none;
            pointer-events: none;
        }
        .paid-skin-slot {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 28.6%;
            color: #fff4cd;
            text-align: center;
        }
        .paid-skin-slot-1 { left: 5.8%; }
        .paid-skin-slot-2 { left: 35.7%; }
        .paid-skin-slot-3 { left: 65.6%; }
        .paid-ship-skin-preview {
            position: absolute;
            z-index: 1;
            left: 50%;
            top: 41%;
            bottom: auto;
            display: flex;
            width: 230px;
            height: 187px;
            align-items: center;
            justify-content: center;
            overflow: visible;
            transform: translate(-50%, -50%) scale(clamp(.42, calc(23cqw / 230px), 1.1));
            transform-origin: center center;
            filter: drop-shadow(0 0 7px color-mix(in srgb, var(--skin-color) 40%, transparent));
        }
        .paid-ship-skin-preview > span {
            display: flex !important;
            width: auto !important;
            max-width: 100%;
            height: 187px !important;
            align-items: center;
            justify-content: center;
        }
        /* Сохраняем пропорции исходных PNG и общий масштаб для всех трёх кораблей. */
        .paid-ship-skin-preview .ship-sprite-img,
        .paid-ship-skin-preview canvas {
            width: auto !important;
            height: 187px !important;
            max-width: 230px;
            max-height: 187px;
            object-fit: contain;
            image-rendering: auto;
        }
        .paid-skin-bonus {
            position: absolute;
            z-index: 4;
            top: 63%;
            left: 7%;
            display: flex;
            width: 86%;
            height: 15%;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 0 5px;
            color: #fff3c1;
            font: 700 clamp(10px, 1.55cqw, 18px)/1.05 'Rajdhani', sans-serif;
            text-align: center;
            text-shadow: 0 1px 3px #000, 0 0 6px #000;
            overflow-wrap: anywhere;
            pointer-events: none;
        }
        .paid-skin-buy {
            position: absolute;
            z-index: 3;
            left: 9%;
            width: 82%;
            bottom: calc(18% - max(4%, 22px));
            height: max(8%, 44px);
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            padding: 0 3px;
            border: 0;
            border-radius: 2px;
            background: transparent;
            color: #241600;
            font: 800 clamp(10px, 1.5cqw, 18px)/1.05 'Rajdhani', sans-serif;
            text-align: center;
            text-shadow: 0 1px 0 rgba(255, 239, 170, .9), 0 0 3px rgba(255, 204, 52, .8);
            white-space: normal;
            cursor: pointer;
            touch-action: manipulation;
            transition: filter .18s, text-shadow .18s;
        }
        .paid-skin-buy > span {
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
            margin: 0;
            text-align: center;
            line-height: 1;
            overflow-wrap: anywhere;
        }
        @container (max-width: 400px) {
            .paid-skin-bonus { top: 58%; left: 1%; width: 98%; height: 16%; padding: 0 1px; font-size: 10px; line-height: .98; }
            .paid-skin-buy { bottom: 9%; height: 30px; font-size: 10px; }
            .paid-skin-buy > span { white-space: nowrap; transform: scaleX(.88); transform-origin: center; }
            .paid-ship-skin-preview { top: 38%; transform: translate(-50%, -50%) scale(clamp(.3, calc(23cqw / 230px), .42)); }
        }
        .paid-skin-buy:hover:not(:disabled) { filter: brightness(1.22); text-shadow: 0 0 5px #fff2a7, 0 0 10px #ffbf35; }
        .paid-skin-buy:focus-visible:not(:disabled) { outline: 2px solid #40eaff; outline-offset: -2px; }
        .paid-skin-buy:disabled { cursor: default; }
        .paid-skin-buy.owned { color: #10282b; text-shadow: 0 1px 0 rgba(218, 255, 228, .9), 0 0 4px rgba(79, 255, 197, .85); }
        .paid-skin-buy:disabled:not(.selected) { color: #382b16; }
        .paid-skins-close {
            z-index: 10;
            top: max(0px, calc(9.5% - clamp(36px, 10.5cqw, 82px) / 2));
            right: 1.4%;
            display: grid;
            width: clamp(36px, 7.6cqw, 92px);
            min-width: 36px;
            height: clamp(36px, 10.5cqw, 82px);
            place-items: center;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: transparent;
            font-size: 0;
            line-height: 0;
            touch-action: manipulation;
        }
        .paid-skins-close:focus-visible { outline: 2px solid #40eaff; outline-offset: 2px; }
        html.layout-pc #win-skins {
            width: min(96vw, 1180px, calc((100dvh - var(--game-inset-top) - var(--game-inset-bottom) - 24px) * 1.5));
            padding: 0;
        }
        @media (prefers-reduced-motion: reduce) { .paid-skin-buy { transition: none; } }

        .hud-mail-announcement {
            display: flex;
            width: 100%;
            gap: 9px;
            align-items: flex-start;
            padding: 10px 12px;
            border: 0;
            border-bottom: 1px solid rgba(132, 205, 230, .2);
            background: transparent;
            color: #e8f6ff;
            text-align: left;
            font: 600 12px/1.35 var(--ui-font);
            cursor: pointer;
        }
        .hud-mail-announcement:hover,
        .hud-mail-announcement:focus-visible { background: rgba(0, 232, 255, .08); outline: none; }
        .hud-mail-announcement-icon { flex: 0 0 20px; color: #ffd984; font-size: 16px; text-align: center; }
        .hud-mail-announcement-copy { display: grid; min-width: 0; gap: 3px; }
        .hud-mail-announcement-title { color: #fff1c8; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
        .hud-mail-announcement-preview { color: #b9d8e8; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
        .hud-mail-announcement-date { color: #8399ae; font-size: 10px; }
        .hud-mail-announcement.is-read { opacity: .72; }
        .hud-mail-announcement-new { flex: 0 0 auto; padding: 2px 4px; border: 1px solid rgba(255, 217, 132, .42); border-radius: 3px; color: #ffe29a; font-size: 9px; font-weight: 700; }

        #announcement-modal { padding: 14px; background: rgba(0, 3, 12, .78); }
        #announcement-modal .announcement-window {
            display: flex;
            flex-direction: column;
            width: min(680px, calc(100vw - 28px));
            max-height: min(84dvh, 740px);
            padding: clamp(18px, 5vw, 30px);
            overflow: hidden;
            border: 1px solid rgba(83, 224, 255, .65);
            border-radius: 8px;
            background: linear-gradient(155deg, rgba(9, 30, 55, .99), rgba(4, 9, 23, .99) 72%);
            box-shadow: 0 0 32px rgba(0, 232, 255, .18), inset 0 0 28px rgba(0, 232, 255, .035);
        }
        .announcement-dialog-kicker { margin-bottom: 10px; color: #78dff1; font: 700 10px/1.4 'Orbitron', var(--ui-font); letter-spacing: .13em; }
        .announcement-dialog-title { margin: 0; color: #ffe39a; font: 700 clamp(18px, 5vw, 25px)/1.3 'Orbitron', var(--ui-font); overflow-wrap: anywhere; }
        .announcement-dialog-date { margin: 8px 0 16px; color: #8ea9bd; font: 600 12px/1.4 var(--ui-font); }
        .announcement-dialog-body {
            min-height: 0;
            overflow-y: auto;
            padding: 14px 2px;
            border-top: 1px solid rgba(83, 224, 255, .18);
            border-bottom: 1px solid rgba(83, 224, 255, .18);
            color: #e7f3ff;
            font: 500 clamp(16px, 4.4vw, 19px)/1.65 var(--ui-font);
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            user-select: text;
            -webkit-user-select: text;
        }
        .announcement-dialog-close { flex: 0 0 auto; align-self: flex-end; min-width: 130px; min-height: 42px; margin-top: 16px; border-color: rgba(83, 224, 255, .5); color: #bdf6ff; font: 700 11px 'Orbitron', var(--ui-font); letter-spacing: .08em; }
        @media (min-width: 700px) {
            .announcement-dialog-kicker { font-size: 12px; }
            .announcement-dialog-date { font-size: 14px; }
            .hud-mail-announcement-title { font-size: 15px; }
            .hud-mail-announcement-preview { font-size: 13px; }
        }

        /* HUD components follow the global menu reference: stepped metal frames, dark panels, semantic pixel accents. */
        .top-hud {
            isolation: isolate;
            grid-template-columns: minmax(82px, .78fr) minmax(0, 1.5fr) auto;
            grid-template-rows: 2px minmax(38px, auto);
            column-gap: 4px;
            row-gap: 2px;
            padding: 4px 7px 5px;
            min-height: 52px;
            border: 0;
            background: transparent;
            box-shadow: none;
            clip-path: none;
        }
        .top-hud::before,
        .top-hud::after {
            position: absolute;
            content: '';
            pointer-events: none;
        }
        .top-hud::before {
            inset: 0;
            z-index: 0;
            background: linear-gradient(100deg, #93a9ae 0%, #536c79 19%, #87979a 42%, #455d6a 68%, #8e9da0 100%);
            clip-path: polygon(0 7px, 3px 7px, 3px 3px, 9px 3px, 9px 0, calc(100% - 16px) 0, calc(100% - 16px) 2px, calc(100% - 5px) 2px, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) 100%, 9px 100%, 9px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 7px), 0 calc(100% - 7px));
        }
        .top-hud::after {
            inset: 2px;
            z-index: 0;
            background:
                linear-gradient(90deg, transparent 0 4%, rgba(48, 220, 238, .76) 4% 12%, transparent 12% 84%, rgba(224, 181, 75, .66) 84% 91%, transparent 91%) top / 100% 1px no-repeat,
                repeating-linear-gradient(0deg, rgba(172, 202, 207, .018) 0 1px, transparent 1px 4px),
                linear-gradient(180deg, #102330 0%, #09141f 61%, #071019 100%);
            clip-path: polygon(0 5px, 2px 5px, 2px 2px, 6px 2px, 6px 0, calc(100% - 13px) 0, calc(100% - 13px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 4px, 100% 4px, 100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) 100%, 7px 100%, 7px calc(100% - 2px), 0 calc(100% - 2px));
        }
        .top-hud-scanline { inset: 3px; z-index: 1; opacity: .22; }
        .hud-wire-bus {
            grid-column: 1 / -1;
            grid-row: 1;
            position: relative;
            z-index: 2;
            height: 1px;
            margin: 0 12%;
            border: 0;
            border-radius: 0;
            background: linear-gradient(90deg, transparent, rgba(71, 201, 219, .58) 24%, rgba(135, 159, 162, .45) 50%, rgba(218, 178, 81, .44) 76%, transparent);
            box-shadow: none;
        }
        .hud-wire-bus::after { animation: none; opacity: .55; }
        .top-player {
            grid-column: 1;
            grid-row: 2;
            align-self: stretch;
            gap: 4px;
            padding: 1px 3px 1px 2px;
            border-left: 2px solid #38cfe1;
            background: linear-gradient(90deg, rgba(19, 50, 66, .68), rgba(12, 26, 38, .24));
            z-index: 2;
        }
        .top-hud .avatar-wrap { width: 26px; height: 28px; flex: 0 0 26px; }
        .top-player .avatar {
            width: 24px;
            height: 24px;
            border: 1px solid #9ab3b7;
            border-radius: 0;
            background-color: #101c22;
            box-shadow: 0 0 0 1px rgba(29, 79, 93, .9), inset 0 0 0 1px rgba(4, 9, 12, .9);
            clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
        }
        .top-player .avatar::before { display: none; }
        .player-meta { flex: 1 1 auto; gap: 3px; overflow: hidden; }
        .player-row-top { gap: 3px; }
        .top-player .pname { color: #f3f1e8; font-size: 9px; font-weight: 700; letter-spacing: .015em; }
        .top-player .plevel {
            padding: 1px 2px;
            border-left: 1px solid rgba(63, 211, 230, .76);
            background: rgba(18, 69, 84, .34);
            color: #8deaf1;
            font: 700 7px/1.1 'Rajdhani', 'Segoe UI', sans-serif;
            text-shadow: none;
        }
        .top-player .player-vip {
            padding: 2px 4px;
            border: 1px solid rgba(203, 161, 68, .72);
            border-radius: 0;
            background: linear-gradient(90deg, rgba(76, 55, 17, .55), rgba(36, 30, 17, .55));
            color: #efd17b;
            font: 700 7px/1 'Rajdhani', 'Segoe UI', sans-serif;
            letter-spacing: .03em;
            text-shadow: none;
            box-shadow: none;
        }
        .top-player .player-vip::after { display: none; }
        .hud-system-actions {
            grid-column: 3;
            grid-row: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            margin-left: 0;
            z-index: 2;
        }
        .hud-system-btn {
            display: inline-flex;
            width: 34px;
            height: 36px;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 1px solid rgba(114, 150, 162, .62);
            border-radius: 0;
            background: linear-gradient(180deg, #172b38, #0a141e 72%);
            color: #cfebef;
            box-shadow: inset 0 1px 0 rgba(224, 240, 239, .08), 0 2px 4px rgba(0, 0, 0, .24);
            clip-path: polygon(0 4px, 3px 4px, 3px 1px, 8px 1px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 1px, calc(100% - 2px) 1px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 3px) calc(100% - 4px), calc(100% - 3px) 100%, 4px 100%, 4px calc(100% - 2px), 0 calc(100% - 2px));
            cursor: pointer;
        }
        .hud-system-btn svg { display: block; width: 15px; height: 15px; }
        .hud-system-btn:hover,
        .hud-system-btn:focus-visible { border-color: #53d9e8; color: #aaf7ff; outline: none; }
        .hud-system-btn:active { transform: translateY(1px); }
        .hud-mail-wrap { position: relative; display: flex; margin: 0; }
        .hud-mail-btn { width: 34px; height: 36px; font-size: 0; }
        .top-hud-resources {
            grid-column: 2;
            grid-row: 2;
            align-self: stretch;
            align-items: center;
            justify-content: space-around;
            gap: 2px;
            min-width: 0;
            padding: 1px 1px 1px 3px;
            border-left: 1px solid rgba(111, 155, 164, .45);
            background: linear-gradient(90deg, rgba(5, 14, 21, .48), rgba(5, 12, 19, .18));
            z-index: 2;
        }
        .top-hud-resources > .res-node {
            min-width: 0;
            max-width: none;
            flex: 1 1 0;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 1px;
            --resource-accent: #42d6e8;
        }
        .top-hud-resources > .res-node-fuel { --resource-accent: #39d7f0; }
        .top-hud-resources > .res-node-credits,
        .top-hud-resources > .res-node-spice { --resource-accent: #efbb42; }
        .top-hud-resources > .res-node-microchips { --resource-accent: #55e8bd; }
        .top-hud-resources > .res-node-artifact { --resource-accent: #d48bf0; }
        .top-hud-resources > .res-node::before,
        .top-hud-resources > .res-node::after { display: none; }
        .top-hud-resources > .res-node + .res-node::before { display: none; }
        .top-hud-resources .hud-wire { display: none; }
        .top-hud-resources .res-pill,
        .top-hud-resources .res-node-spice .res-pill-hero,
        .top-hud-resources .res-node-credits .res-pill,
        .top-hud-resources .res-node-artifact .res-pill {
            position: relative;
            display: flex;
            width: 100%;
            min-width: 0;
            min-height: 31px;
            align-items: center;
            justify-content: center;
            gap: 2px;
            padding: 2px 1px;
            overflow: hidden;
            border: 1px solid color-mix(in srgb, var(--resource-accent) 58%, #72838a);
            border-radius: 0;
            background:
                linear-gradient(90deg, color-mix(in srgb, var(--resource-accent) 76%, transparent) 0 1px, transparent 1px calc(100% - 2px), color-mix(in srgb, var(--resource-accent) 76%, transparent) calc(100% - 2px) calc(100% - 1px), transparent calc(100% - 1px)) top / 100% 1px no-repeat,
                repeating-linear-gradient(135deg, rgba(190, 212, 211, .018) 0 1px, transparent 1px 5px),
                linear-gradient(180deg, #152935, #08141e 76%);
            box-shadow: inset 0 1px 0 rgba(232, 239, 229, .08), inset 0 0 7px color-mix(in srgb, var(--resource-accent) 9%, transparent);
            clip-path: polygon(0 4px, 3px 4px, 3px 1px, 7px 1px, 7px 0, calc(100% - 7px) 0, calc(100% - 7px) 1px, calc(100% - 2px) 1px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 3px) calc(100% - 4px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 2px), 0 calc(100% - 2px));
        }
        .top-hud-resources .res-icon { display: inline-flex; flex: 0 0 auto; align-items: center; margin: 0; color: var(--resource-accent); }
        .top-hud-resources .res-gfx svg,
        .top-hud-resources .res-icon svg { width: 9px; height: 9px; }
        .top-hud-resources .res-val,
        .top-hud-resources .res-node-fuel .res-val,
        .top-hud-resources .res-node-credits .res-val,
        .top-hud-resources .res-node-spice .res-val,
        .top-hud-resources .res-node-microchips .res-val,
        .top-hud-resources .res-node-artifact .res-val {
            display: block;
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            color: #f1f1e9;
            font: 700 8px/1 'Rajdhani', 'Segoe UI', sans-serif;
            letter-spacing: -.015em;
            text-overflow: clip;
            text-shadow: none;
            white-space: nowrap;
        }
        .top-panel .resource-neon { --neon-glow: rgba(112, 190, 198, .1); }

        .mining-hud-actions {
            top: 8px;
            gap: 5px;
            z-index: 6;
        }
        .mining-hud-actions-left { left: max(6px, env(safe-area-inset-left, 0px)); }
        .mining-hud-actions-right { right: max(6px, env(safe-area-inset-right, 0px)); }
        .mining-hud-actions .btn-action {
            --action-neon: #39c9dc;
            --action-glow: rgba(57, 201, 220, .07);
            position: relative;
            display: flex;
            width: clamp(76px, 24vw, 98px);
            height: auto;
            min-height: 44px;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 2px;
            overflow: visible;
            padding: 6px 8px 6px 29px;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: #f0f0e8;
            text-align: left;
            text-shadow: none;
            clip-path: none;
            isolation: isolate;
            transition: transform .08s ease, filter .12s ease;
        }
        .mining-hud-actions .btn-action::before,
        .mining-hud-actions .btn-action::after {
            position: absolute;
            width: auto;
            height: auto;
            border: 0;
            opacity: 1;
            content: '';
            pointer-events: none;
        }
        .mining-hud-actions .btn-action::before {
            inset: 0;
            z-index: 0;
            background: linear-gradient(110deg, #d0d9d3 0%, #607985 14%, #243d4b 28%, #a5b3ae 42%, #536b78 59%, #263f4d 76%, #c1cbc5 100%);
            clip-path: polygon(0 5px, 3px 5px, 3px 2px, 9px 2px, 9px 0, calc(100% - 12px) 0, calc(100% - 12px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 5px, 100% 5px, 100% calc(100% - 7px), calc(100% - 4px) calc(100% - 7px), calc(100% - 4px) 100%, 8px 100%, 8px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 5px), 0 calc(100% - 5px));
            filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
        }
        .mining-hud-actions .btn-action::after {
            inset: 2px;
            z-index: 1;
            background:
                linear-gradient(90deg, transparent 0 10%, color-mix(in srgb, var(--action-neon) 82%, #e5e3d6) 10% 22%, transparent 22% 77%, color-mix(in srgb, var(--action-neon) 76%, #e5e3d6) 77% 89%, transparent 89%) top / 100% 2px no-repeat,
                linear-gradient(90deg, transparent 0 12%, color-mix(in srgb, var(--action-neon) 70%, transparent) 12% 25%, transparent 25% 76%, color-mix(in srgb, var(--action-neon) 70%, transparent) 76% 89%, transparent 89%) bottom / 100% 2px no-repeat,
                repeating-linear-gradient(135deg, rgba(194, 215, 214, .025) 0 1px, transparent 1px 5px),
                linear-gradient(180deg, #172d3a 0%, #0b1823 67%, #07111a 100%);
            clip-path: polygon(0 4px, 2px 4px, 2px 1px, 6px 1px, 6px 0, calc(100% - 9px) 0, calc(100% - 9px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 5px), calc(100% - 2px) calc(100% - 5px), calc(100% - 2px) 100%, 6px 100%, 6px calc(100% - 2px), 0 calc(100% - 2px));
        }
        .mining-hud-actions .btn-action .action-icon {
            position: absolute;
            top: 50%;
            left: 7px;
            display: inline-flex;
            width: 20px;
            height: 20px;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 2px;
            border: 1px solid color-mix(in srgb, var(--action-neon) 62%, #718994);
            background: linear-gradient(145deg, rgba(18, 46, 59, .96), rgba(5, 15, 24, .98));
            clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
            transform: translateY(-50%);
            color: #69ddec;
            filter: none;
            z-index: 2;
        }
        .mining-hud-actions .btn-action .action-icon svg { width: 100%; height: 100%; }
        .mining-hud-actions .btn-action:not(.btn-action-collector) .action-label {
            display: block;
            max-width: 100%;
            overflow: hidden;
            color: #f3f1e9;
            font: 700 9px/1.05 'Rajdhani', 'Segoe UI', sans-serif;
            letter-spacing: .025em;
            text-overflow: clip;
            text-shadow: 0 1px rgba(0, 0, 0, .8);
            white-space: nowrap;
            animation: none;
            z-index: 2;
        }
        .mining-hud-actions .btn-action .action-subline {
            display: block;
            width: 100%;
            max-width: 100%;
            overflow: visible;
            color: #b7c7ce;
            font: 700 7px/1.1 'Rajdhani', 'Segoe UI', sans-serif;
            letter-spacing: .015em;
            text-overflow: clip;
            text-shadow: 0 1px rgba(0, 0, 0, .8);
            text-wrap: balance;
            white-space: normal;
            z-index: 2;
        }
        .mining-hud-actions .btn-action .action-arrow {
            position: absolute;
            top: 50%;
            right: 6px;
            color: var(--action-neon);
            font: 700 16px/1 'Rajdhani', sans-serif;
            transform: translateY(-52%);
            z-index: 2;
        }
        .mining-hud-actions .btn-action-top { --action-neon: #39d8e9; --action-glow: rgba(46, 205, 222, .11); }
        .mining-hud-actions .btn-action-checkin,
        .mining-hud-actions .btn-action-vip { --action-neon: #e9b83f; --action-glow: rgba(226, 175, 60, .1); }
        .mining-hud-actions .btn-action-group,
        .mining-hud-actions .btn-action-skins { --action-neon: #43cde0; --action-glow: rgba(56, 196, 216, .07); }
        .mining-hud-actions .btn-action-battlepass,
        .mining-hud-actions .btn-action-packs { --action-neon: #d94a70; --action-glow: rgba(210, 55, 98, .09); }
        .mining-hud-actions .btn-action:not(.btn-action-collector).btn-action-top .action-icon,
        .mining-hud-actions .btn-action:not(.btn-action-collector).btn-action-skins .action-icon,
        .mining-hud-actions .btn-action:not(.btn-action-collector).btn-action-group .action-icon { color: #66e6f1; }
        .mining-hud-actions .btn-action:not(.btn-action-collector).btn-action-checkin .action-icon,
        .mining-hud-actions .btn-action:not(.btn-action-collector).btn-action-vip .action-icon { color: #f1c454; }
        .mining-hud-actions .btn-action:not(.btn-action-collector).btn-action-battlepass .action-icon,
        .mining-hud-actions .btn-action:not(.btn-action-collector).btn-action-packs .action-icon { color: #ee718b; }
        .mining-hud-actions .btn-action:not(.btn-action-collector).btn-action-top .action-label,
        .mining-hud-actions .btn-action:not(.btn-action-collector).btn-action-skins .action-label,
        .mining-hud-actions .btn-action:not(.btn-action-collector).btn-action-group .action-label,
        .mining-hud-actions .btn-action:not(.btn-action-collector).btn-action-checkin .action-label,
        .mining-hud-actions .btn-action:not(.btn-action-collector).btn-action-battlepass .action-label,
        .mining-hud-actions .btn-action:not(.btn-action-collector).btn-action-vip .action-label,
        .mining-hud-actions .btn-action:not(.btn-action-collector).btn-action-packs .action-label { color: #f3f1e9; }
        .mining-hud-actions .btn-action-checkin .action-subline,
        .mining-hud-actions .btn-action-battlepass .action-subline { color: #f0c95d; }
        .mining-hud-actions .btn-action-group .action-subline,
        .mining-hud-actions .btn-action-vip .action-subline { color: #d4cba9; }
        .mining-hud-actions .btn-action-packs .action-subline { color: #e2879b; }
        .mining-hud-actions .btn-action-checkin,
        .mining-hud-actions .btn-action-group,
        .mining-hud-actions .btn-action-battlepass,
        .mining-hud-actions .btn-action-vip,
        .mining-hud-actions .btn-action-packs { min-height: 50px; }
        .mining-hud-actions .btn-action.is-ready { --action-neon: #f0c44f; --action-glow: rgba(238, 185, 65, .17); }
        .mining-hud-actions .action-notice-dot {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 5px;
            height: 5px;
            border: 0;
            border-radius: 0;
            background: #f05b4f;
            box-shadow: 0 0 3px rgba(240, 91, 79, .3);
            z-index: 3;
        }
        .mining-hud-actions .action-notice-dot-gold { background: #edc44d; box-shadow: 0 0 3px rgba(226, 189, 104, .24); }
        .mining-hud-actions .action-notice-dot.hidden { display: none; }
        .mining-hud-actions .btn-action:hover::before,
        .mining-hud-actions .btn-action:focus-visible::before { filter: brightness(1.12); }
        .mining-hud-actions .btn-action:hover,
        .mining-hud-actions .btn-action:focus-visible { filter: none; outline: none; }
        .mining-hud-actions .btn-action:focus-visible { box-shadow: 0 0 0 2px rgba(92, 201, 213, .32); }
        .mining-hud-actions .btn-action:active {
            transform: translateY(1px);
            filter: none;
            box-shadow: none;
        }
        .mining-hud-actions .btn-action:active::after { filter: brightness(.78); }
        .mining-hud-actions .btn-action:not(.btn-action-collector) .action-icon,
        .mining-hud-actions .btn-action:not(.btn-action-collector) .action-label { animation: none; text-shadow: none; }
        .mining-hud-actions .btn-action:not(.btn-action-collector) .action-label { text-shadow: 0 1px rgba(0, 0, 0, .8); }
        .mining-hud-actions .btn-action:not(.btn-action-collector) .action-icon { filter: none; }
        .mining-hud-actions .btn-action-top .action-label,
        .mining-hud-actions .btn-action-checkin .action-label,
        .mining-hud-actions .btn-action-skins .action-label,
        .mining-hud-actions .btn-action-vip .action-label { padding-right: 7px; }
        .mining-hud-actions .btn-action-checkin .action-subline { padding-right: 7px; }

        @media (max-width: 360px) {
            .top-hud {
                grid-template-columns: minmax(78px, .78fr) minmax(0, 1.42fr) auto;
                column-gap: 3px;
                padding-right: 5px;
                padding-left: 5px;
            }
            .top-player { gap: 3px; }
            .player-row-top { gap: 2px; }
            .top-player .pname { font-size: 7.5px; letter-spacing: 0; }
            .top-player .plevel { font-size: 6px; }
            .top-hud .avatar-wrap { width: 24px; height: 26px; flex-basis: 24px; }
            .top-player .avatar { width: 22px; height: 22px; }
            .hud-system-actions { gap: 2px; }
            .hud-system-btn, .hud-mail-btn { width: 32px; height: 34px; }
            .top-hud-resources { gap: 1px; padding-left: 2px; }
            .top-hud-resources .res-pill { gap: 1px; min-height: 29px; padding-right: 0; padding-left: 0; }
            .top-hud-resources .res-gfx svg,
            .top-hud-resources .res-icon svg { width: 8px; height: 8px; }
            .top-hud-resources .res-val,
            .top-hud-resources .res-node-fuel .res-val,
            .top-hud-resources .res-node-credits .res-val,
            .top-hud-resources .res-node-spice .res-val,
            .top-hud-resources .res-node-microchips .res-val,
            .top-hud-resources .res-node-artifact .res-val { font-size: 7px; }
            .mining-hud-actions .btn-action { width: clamp(84px, 26vw, 94px); padding-left: 30px; }
            .mining-hud-actions-right .btn-action { width: clamp(86px, 27vw, 98px); }
            .mining-hud-actions .btn-action .action-icon { left: 6px; width: 18px; height: 18px; padding: 2px; }
            .mining-hud-actions .btn-action:not(.btn-action-collector) .action-label { font-size: 8px; }
            .mining-hud-actions .btn-action .action-subline { font-size: 6px; }
            .mining-hud-actions .btn-action-group .action-subline { font-size: 6px; letter-spacing: -.01em; }
            .mining-hud-actions .btn-action .action-arrow { right: 4px; }
        }
        @media (min-width: 700px) {
            .top-hud { grid-template-columns: minmax(106px, .8fr) minmax(0, 1.65fr) auto; }
            .top-player .avatar { width: 28px; height: 28px; }
            .hud-system-actions { gap: 4px; }
            .hud-system-btn, .hud-mail-btn { width: 38px; height: 38px; }
            .mining-hud-actions { gap: 7px; }
            .mining-hud-actions .btn-action { width: 126px; min-height: 54px; padding-left: 37px; }
            .mining-hud-actions .btn-action .action-icon { left: 9px; width: 20px; height: 20px; }
            .mining-hud-actions .btn-action .action-label { font-size: 11px; }
            .mining-hud-actions .btn-action .action-subline { font-size: 8px; }
            .mining-hud-actions .btn-action-checkin,
            .mining-hud-actions .btn-action-group,
            .mining-hud-actions .btn-action-battlepass,
            .mining-hud-actions .btn-action-vip,
            .mining-hud-actions .btn-action-packs { min-height: 58px; }
        }
        @media (min-width: 700px) {
            html.layout-pc .top-hud-resources { gap: 2px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .mining-hud-actions .btn-action { transition: none; }
        }

        /* @artbible/references/menu/menu.png — board components, canonical finish.
           Geometry/DOM stay on the existing board; only their material, edges and type are tuned. */
        .top-hud,
        .mining-hud-actions {
            --sd-metal-light: #a7b6b5;
            --sd-metal-mid: #536c78;
            --sd-metal-dark: #263c49;
            --sd-panel: #09141f;
            --sd-panel-deep: #050c14;
            --sd-cream: #f1eee2;
            --sd-pixel-font: 'Rajdhani', 'Segoe UI', sans-serif;
        }

        /* Compact top command module: retain its existing grid and cell sizes. */
        .top-hud {
            background: transparent;
            box-shadow: none;
        }
        .top-hud::before {
            background: linear-gradient(120deg, #a7b6b5 0%, #536c78 17%, #344b58 35%, #87999a 52%, #344b58 72%, #a1aeaa 100%);
            filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .58));
        }
        .top-hud::after {
            background:
                linear-gradient(90deg, transparent 0 4%, rgba(43, 209, 226, .7) 4% 11%, transparent 11% 85%, rgba(230, 181, 70, .62) 85% 91%, transparent 91%) top / 100% 1px no-repeat,
                repeating-linear-gradient(0deg, rgba(178, 200, 199, .025) 0 1px, transparent 1px 4px),
                linear-gradient(180deg, #122330 0%, #0a1621 58%, #07111a 100%);
        }
        .top-player {
            border-left: 0;
            background: transparent;
            isolation: isolate;
        }
        .top-player::before,
        .top-player::after {
            position: absolute;
            inset: 0;
            content: '';
            pointer-events: none;
        }
        .top-player::before {
            z-index: -2;
            background: linear-gradient(120deg, #8c9fa2, #465c68 38%, #9baaa8 61%, #3d5662 84%, #71868b);
            clip-path: polygon(0 4px, 4px 4px, 4px 1px, 10px 1px, 10px 0, calc(100% - 9px) 0, calc(100% - 9px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 5px, 100% 5px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 6px 100%, 6px calc(100% - 2px), 0 calc(100% - 2px));
        }
        .top-player::after {
            inset: 2px;
            z-index: -1;
            background: linear-gradient(90deg, rgba(14, 39, 53, .98), rgba(7, 17, 27, .98) 72%);
            clip-path: polygon(0 4px, 3px 4px, 3px 1px, 7px 1px, 7px 0, calc(100% - 7px) 0, calc(100% - 7px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 5px 100%, 5px calc(100% - 2px), 0 calc(100% - 2px));
        }
        .top-player .avatar-wrap,
        .top-player .player-meta { position: relative; z-index: 1; }
        .top-player .avatar {
            border-color: #79dce6;
            background-color: #08131c;
            box-shadow: 0 0 0 1px #253f4c, inset 0 0 0 1px rgba(3, 9, 14, .95);
        }
        .top-player .pname {
            color: var(--sd-cream);
            font-family: var(--sd-pixel-font);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .025em;
            text-shadow: 0 1px #000;
        }
        .top-player .plevel {
            border-left-color: #39cfe0;
            background: rgba(8, 49, 65, .5);
            color: #6be3ed;
            font-family: var(--sd-pixel-font);
            font-size: 8px;
            font-weight: 700;
            letter-spacing: .015em;
            text-shadow: none;
        }
        .top-player .player-vip {
            border-color: #9b7835;
            background: linear-gradient(90deg, #3a2d13, #171712);
            color: #efc95e;
            font-family: var(--sd-pixel-font);
            font-size: 7px;
            font-weight: 700;
            letter-spacing: .03em;
        }
        .top-hud-resources {
            border-left-color: rgba(112, 147, 155, .54);
            background: linear-gradient(90deg, rgba(5, 13, 20, .42), rgba(5, 12, 19, .12));
        }
        .top-hud-resources .res-pill,
        .top-hud-resources .res-node-spice .res-pill-hero,
        .top-hud-resources .res-node-credits .res-pill,
        .top-hud-resources .res-node-artifact .res-pill {
            border-color: color-mix(in srgb, var(--resource-accent) 68%, #72858a);
            background:
                linear-gradient(90deg, transparent 0 12%, color-mix(in srgb, var(--resource-accent) 66%, transparent) 12% 19%, transparent 19% 80%, color-mix(in srgb, var(--resource-accent) 55%, transparent) 80% 87%, transparent 87%) top / 100% 1px no-repeat,
                repeating-linear-gradient(135deg, rgba(190, 209, 206, .025) 0 1px, transparent 1px 5px),
                linear-gradient(180deg, #172a35 0%, #0a1721 66%, #07111a 100%);
            box-shadow: inset 0 1px 0 rgba(239, 242, 226, .09), inset 0 -2px 0 rgba(0, 0, 0, .34);
        }
        .top-hud-resources .res-val,
        .top-hud-resources .res-node-fuel .res-val,
        .top-hud-resources .res-node-credits .res-val,
        .top-hud-resources .res-node-spice .res-val,
        .top-hud-resources .res-node-microchips .res-val,
        .top-hud-resources .res-node-artifact .res-val {
            color: #f2efe4;
            font-family: var(--sd-pixel-font);
            font-size: 8px;
            font-weight: 700;
            letter-spacing: -.015em;
        }
        .hud-system-btn,
        .hud-mail-btn {
            border-color: #526e7b;
            background: linear-gradient(180deg, #172a36, #09141e 76%);
            color: #dce8e5;
            box-shadow: inset 0 1px 0 rgba(240, 241, 226, .1), inset 0 -2px 0 rgba(0, 0, 0, .4);
        }
        .hud-system-btn:hover,
        .hud-system-btn:focus-visible {
            border-color: #50d7e4;
            color: #a8f2f5;
            box-shadow: inset 0 1px 0 rgba(240, 241, 226, .12), 0 0 5px rgba(48, 202, 219, .16);
        }

        /* One button family: identical stepped metal construction, semantic edge accents only. */
        .mining-hud-actions .btn-action {
            --action-neon: #45d5e4;
            --action-glow: rgba(55, 204, 220, .12);
            font-family: var(--sd-pixel-font);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .025em;
            color: var(--sd-cream);
            text-shadow: none;
        }
        .mining-hud-actions .btn-action::before {
            background: linear-gradient(110deg,
                #b4c0ba 0%, #667e87 13%, #344c59 25%,
                color-mix(in srgb, var(--action-neon) 54%, #566a70) 31%,
                #a6b4b0 43%, #536b77 58%, #283f4b 73%,
                color-mix(in srgb, var(--action-neon) 42%, #52656d) 82%, #9eaeaa 100%);
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .62));
        }
        .mining-hud-actions .btn-action::after {
            background:
                linear-gradient(90deg, transparent 0 10%, color-mix(in srgb, var(--action-neon) 83%, #f2eee0) 10% 21%, transparent 21% 78%, color-mix(in srgb, var(--action-neon) 77%, #eee9da) 78% 89%, transparent 89%) top / 100% 1px no-repeat,
                linear-gradient(90deg, transparent 0 13%, color-mix(in srgb, var(--action-neon) 55%, transparent) 13% 24%, transparent 24% 77%, color-mix(in srgb, var(--action-neon) 55%, transparent) 77% 87%, transparent 87%) bottom / 100% 1px no-repeat,
                repeating-linear-gradient(135deg, rgba(190, 212, 211, .025) 0 1px, transparent 1px 5px),
                linear-gradient(180deg, #192c38 0%, #0c1822 60%, #07111a 100%);
        }
        .mining-hud-actions .btn-action .action-icon {
            border-color: color-mix(in srgb, var(--action-neon) 63%, #71838a);
            background: linear-gradient(145deg, #19313d, #07131d 82%);
            color: var(--action-neon);
            filter: none;
        }
        .mining-hud-actions .btn-action .action-icon svg,
        .top-hud svg {
            shape-rendering: crispEdges;
            stroke-linecap: square;
            stroke-linejoin: miter;
        }
        .mining-hud-actions .btn-action:not(.btn-action-collector) .action-label {
            color: #f3f0e5;
            font-family: var(--sd-pixel-font);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .025em;
            line-height: 1.05;
            text-shadow: 0 1px #000;
        }
        .mining-hud-actions .btn-action .action-subline {
            color: #bdc8c5;
            font-family: var(--sd-pixel-font);
            font-size: 7px;
            font-weight: 700;
            letter-spacing: .015em;
            line-height: 1.1;
            text-shadow: 0 1px #000;
        }
        .mining-hud-actions .btn-action-top,
        .mining-hud-actions .btn-action-group,
        .mining-hud-actions .btn-action-skins { --action-neon: #3dd5e7; --action-glow: rgba(52, 202, 220, .14); }
        .mining-hud-actions .btn-action-checkin,
        .mining-hud-actions .btn-action-vip { --action-neon: #e6b94c; --action-glow: rgba(222, 177, 66, .13); }
        .mining-hud-actions .btn-action-battlepass,
        .mining-hud-actions .btn-action-packs { --action-neon: #d94c70; --action-glow: rgba(197, 52, 89, .12); }
        .mining-hud-actions .btn-action:not(.btn-action-collector) .action-icon { color: var(--action-neon); }
        .mining-hud-actions .btn-action-checkin .action-subline,
        .mining-hud-actions .btn-action-battlepass .action-subline,
        .mining-hud-actions .btn-action-vip .action-subline { color: #e8c45e; }
        .mining-hud-actions .btn-action-group .action-subline { color: #c9d4d1; }
        .mining-hud-actions .btn-action-packs .action-subline { color: #df8298; }
        .mining-hud-actions .btn-action.is-ready,
        .mining-hud-actions .btn-action.is-available { --action-neon: #efbf4f; --action-glow: rgba(226, 180, 69, .18); }
        .mining-hud-actions .btn-action:disabled,
        .mining-hud-actions .btn-action.is-locked {
            filter: saturate(.28) brightness(.72);
            cursor: default;
        }
        .mining-hud-actions .action-notice-dot,
        .hud-mail-dot {
            width: 5px;
            height: 5px;
            border: 0;
            border-radius: 0;
            box-shadow: none;
        }
        .mining-hud-actions .action-notice-dot { background: #f16450; box-shadow: 0 0 2px rgba(241, 100, 80, .35); }
        .mining-hud-actions .action-notice-dot-gold { background: #edc34f; box-shadow: 0 0 2px rgba(237, 195, 79, .3); }
        .mining-hud-actions .btn-action:hover::before,
        .mining-hud-actions .btn-action:focus-visible::before { filter: brightness(1.06) drop-shadow(0 1px 1px rgba(0, 0, 0, .62)); }
        .mining-hud-actions .btn-action:hover,
        .mining-hud-actions .btn-action:focus-visible { filter: none; }
        .mining-hud-actions .btn-action:active::after { filter: brightness(.82); }

        @media (max-width: 360px) {
            .top-player .pname { font-size: 7.5px; }
            .top-player .plevel { font-size: 6px; }
            .top-player .player-vip { font-size: 6px; }
            .top-hud-resources .res-val,
            .top-hud-resources .res-node-fuel .res-val,
            .top-hud-resources .res-node-credits .res-val,
            .top-hud-resources .res-node-spice .res-val,
            .top-hud-resources .res-node-microchips .res-val,
            .top-hud-resources .res-node-artifact .res-val { font-size: 7px; }
            .mining-hud-actions .btn-action:not(.btn-action-collector) .action-label { font-size: 8px; }
            .mining-hud-actions .btn-action .action-subline { font-size: 6px; }
        }
        @media (min-width: 700px) {
            .top-player .pname { font-size: 9px; }
            .top-player .plevel { font-size: 8px; }
            .top-player .player-vip { font-size: 7px; }
            .top-hud-resources .res-val,
            .top-hud-resources .res-node-fuel .res-val,
            .top-hud-resources .res-node-credits .res-val,
            .top-hud-resources .res-node-spice .res-val,
            .top-hud-resources .res-node-microchips .res-val,
            .top-hud-resources .res-node-artifact .res-val { font-size: 8px; }
            .mining-hud-actions .btn-action:not(.btn-action-collector) .action-label { font-size: 11px; }
            .mining-hud-actions .btn-action .action-subline { font-size: 8px; }
        }

        /* HUD master components: use the extracted sprites as nine-slice construction, not CSS-drawn replacements. */
        .top-hud {
            --sd-pixel-font: 'Rajdhani', 'Segoe UI', sans-serif;
            --sd-cream: #f1eee2;
            background: transparent;
            box-shadow: none;
        }
        .top-hud::before,
        .top-hud::after,
        .top-hud .top-hud-scanline,
        .top-hud .hud-wire-bus { display: none; }

        .top-player {
            position: relative;
            isolation: isolate;
            border: 0;
            background: transparent;
        }
        .top-player::before {
            inset: 0;
            z-index: 0;
            border: 5px solid transparent;
            border-image-source: url('../artbible/references/menu/components/hud-profile-frame.png');
            border-image-slice: 12 14 7 fill;
            border-image-width: 5px;
            border-image-repeat: stretch;
            background: none;
            clip-path: none;
            filter: none;
        }
        .top-player::after { display: none; }
        .top-player .avatar-wrap,
        .top-player .player-meta { z-index: 1; }
        .top-player .avatar {
            border: 2px solid #39d7ec;
            border-radius: 0;
            background-color: #071119;
            box-shadow: 0 0 0 1px #1a4450, inset 0 0 0 1px rgba(3, 9, 14, .95);
            clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
        }
        .top-player .pname,
        .top-player .plevel,
        .top-player .player-vip { font-family: var(--sd-pixel-font); font-weight: 400; }
        .top-player .pname { color: var(--sd-cream); text-shadow: 0 1px #000; }
        .top-player .plevel {
            border-left-color: #39d7ec;
            background: rgba(8, 49, 65, .5);
            color: #70e5f0;
            text-shadow: none;
        }
        .top-player .player-vip {
            border-color: #a77e2f;
            background: #312710;
            color: #f0c64f;
            box-shadow: none;
        }

        .top-hud-resources {
            border: 0;
            background: transparent;
        }
        .top-hud-resources .res-pill,
        .top-hud-resources .res-node-spice .res-pill-hero,
        .top-hud-resources .res-node-credits .res-pill,
        .top-hud-resources .res-node-artifact .res-pill {
            border: 4px solid transparent;
            border-image-slice: 4 10 fill;
            border-image-width: 4px;
            border-image-repeat: stretch;
            background: none;
            box-shadow: none;
            clip-path: none;
        }
        .top-hud-resources .res-node-fuel .res-pill,
        .top-hud-resources .res-node-microchips .res-pill {
            border-image-source: url('../artbible/references/menu/components/hud-resource-cyan.png');
        }
        .top-hud-resources .res-node-credits .res-pill,
        .top-hud-resources .res-node-spice .res-pill {
            border-image-source: url('../artbible/references/menu/components/hud-resource-gold.png');
        }
        .top-hud-resources .res-node-artifact .res-pill {
            border-image-source: url('../artbible/references/menu/components/hud-resource-purple.png');
        }
        .top-hud-resources .res-node-fuel { --resource-accent: #42d8ec; }
        .top-hud-resources .res-node-credits,
        .top-hud-resources .res-node-spice { --resource-accent: #f1bd45; }
        .top-hud-resources .res-node-microchips { --resource-accent: #42d8ec; }
        .top-hud-resources .res-node-artifact { --resource-accent: #d879ef; }
        .top-hud-resources .res-val,
        .top-hud-resources .res-node-fuel .res-val,
        .top-hud-resources .res-node-credits .res-val,
        .top-hud-resources .res-node-spice .res-val,
        .top-hud-resources .res-node-microchips .res-val,
        .top-hud-resources .res-node-artifact .res-val {
            color: var(--sd-cream);
            font-family: var(--sd-pixel-font);
            font-size: 8px;
            font-weight: 700;
            letter-spacing: -.015em;
        }

        .hud-system-btn,
        .hud-mail-btn {
            border: 4px solid transparent;
            border-image-source: url('../artbible/references/menu/components/hud-system-frame.png');
            border-image-slice: 8 9 fill;
            border-image-width: 4px;
            border-image-repeat: stretch;
            border-radius: 0;
            background: none;
            box-shadow: none;
            clip-path: none;
            color: #e4eeee;
        }
        .hud-system-btn svg { width: 16px; height: 16px; }

        .mining-hud-actions {
            --sd-pixel-font: 'Rajdhani', 'Segoe UI', sans-serif;
            --sd-cream: #f1eee2;
        }
        .mining-hud-actions .btn-action {
            color: var(--sd-cream);
            background: transparent;
            box-shadow: none;
            text-shadow: none;
        }
        .mining-hud-actions .btn-action::before {
            inset: 0;
            z-index: 0;
            border: 5px solid transparent;
            border-image-slice: 8 14 fill;
            border-image-width: 5px;
            border-image-repeat: stretch;
            background: none;
            clip-path: none;
            filter: none;
        }
        .mining-hud-actions .btn-action::after { display: none; }
        .mining-hud-actions .btn-action-top::before,
        .mining-hud-actions .btn-action-group::before,
        .mining-hud-actions .btn-action-skins::before,
        .mining-hud-actions .btn-action-collector::before {
            border-image-source: url('../artbible/references/menu/components/hud-button-cyan.png');
        }
        .mining-hud-actions .btn-action-checkin::before {
            border-image-source: url('../artbible/references/menu/components/hud-button-gold-reward.png');
        }
        .mining-hud-actions .btn-action-battlepass::before,
        .mining-hud-actions .btn-action-packs::before {
            border-image-source: url('../artbible/references/menu/components/hud-button-magenta-special.png');
        }
        .mining-hud-actions .btn-action-vip::before {
            border-image-source: url('../artbible/references/menu/components/hud-button-gold-vip.png');
        }
        .mining-hud-actions .btn-action .action-icon {
            width: 19px;
            height: 19px;
            padding: 1px;
            border: 0;
            border-radius: 0;
            background: transparent;
            clip-path: none;
            transform: translateY(-50%);
            filter: none;
        }
        .mining-hud-actions .btn-action-collector {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
        .mining-hud-actions .btn-action-collector .action-icon {
            position: static;
            width: 28px;
            height: 28px;
            padding: 0;
            transform: none;
        }
        .mining-hud-actions .btn-action:not(.btn-action-collector) .action-label {
            display: block;
            max-width: 100%;
            overflow: hidden;
            color: var(--sd-cream);
            font-family: var(--sd-pixel-font);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .025em;
            line-height: 1.05;
            text-overflow: clip;
            text-shadow: 0 1px #000;
            white-space: nowrap;
        }
        .mining-hud-actions .btn-action-collector .action-icon-image {
            border: 0;
            background: transparent;
            clip-path: none;
            filter: none;
        }
        .mining-hud-actions .btn-action .action-subline {
            font-family: var(--sd-pixel-font);
            font-size: 7px;
            font-weight: 700;
            letter-spacing: .015em;
            text-shadow: 0 1px #000;
        }
        .mining-hud-actions .btn-action-top,
        .mining-hud-actions .btn-action-group,
        .mining-hud-actions .btn-action-skins,
        .mining-hud-actions .btn-action-collector { --action-neon: #41d9eb; --action-glow: rgba(52, 202, 220, .12); }
        .mining-hud-actions .btn-action-checkin,
        .mining-hud-actions .btn-action-vip { --action-neon: #f0c54f; --action-glow: rgba(222, 177, 66, .12); }
        .mining-hud-actions .btn-action-battlepass,
        .mining-hud-actions .btn-action-packs { --action-neon: #ee4d70; --action-glow: rgba(197, 52, 89, .1); }
        .mining-hud-actions .btn-action .action-icon { color: var(--action-neon); }
        .mining-hud-actions .btn-action-checkin .action-subline,
        .mining-hud-actions .btn-action-battlepass .action-subline,
        .mining-hud-actions .btn-action-vip .action-subline { color: #efc34e; }
        .mining-hud-actions .btn-action-packs .action-subline { color: #ed9aaf; }
        .mining-hud-actions .btn-action-group .action-subline { color: #cbd6d5; }
        .mining-hud-actions .btn-action:focus-visible { outline: 1px solid #65dbe7; outline-offset: 1px; }
        .mining-hud-actions .btn-action:hover::before,
        .mining-hud-actions .btn-action:focus-visible::before { filter: brightness(1.05); }
        .mining-hud-actions .btn-action.is-ready,
        .mining-hud-actions .btn-action.is-available { filter: brightness(1.04); }
        .mining-hud-actions .btn-action:disabled,
        .mining-hud-actions .btn-action.is-locked { filter: saturate(.32) brightness(.75); }

        @media (max-width: 360px) {
            .top-player .pname { font-size: 7.5px; }
            .top-player .plevel { font-size: 6px; }
            .top-player .player-vip { font-size: 6px; }
        }
        /* Telegram Desktop can run in a narrow window; keep this fix independent of viewport breakpoints. */
        html.layout-pc .mining-hud-actions .btn-action:not(.btn-action-collector) {
            display: grid;
            grid-template-columns: 22px minmax(0, 1fr);
            grid-template-rows: auto auto;
            align-content: center;
            align-items: center;
            column-gap: 7px;
            row-gap: 2px;
            width: clamp(140px, 12vw, 160px);
            height: auto;
            min-height: 56px;
            padding: 8px 10px;
        }
        html.layout-pc .mining-hud-actions .btn-action:not(.btn-action-collector) .action-icon {
            position: static;
            grid-column: 1;
            grid-row: 1 / span 2;
            width: 22px;
            height: 22px;
            padding: 1px;
            transform: none;
            align-self: center;
        }
        html.layout-pc .mining-hud-actions .btn-action:not(.btn-action-collector) .action-label {
            grid-column: 2;
            grid-row: 1;
            width: 100%;
            max-width: none;
            min-width: 0;
            overflow: visible;
            overflow-wrap: normal;
            word-break: normal;
            hyphens: none;
            padding: 0;
            font-size: clamp(11px, .9vw, 14px);
            line-height: 1.05;
            white-space: normal;
        }
        html.layout-pc .mining-hud-actions .btn-action:not(.btn-action-collector) .action-subline {
            grid-column: 2;
            grid-row: 2;
            width: 100%;
            max-width: none;
            min-width: 0;
            white-space: normal;
            overflow-wrap: normal;
            word-break: normal;
            hyphens: none;
            padding: 0;
            font-size: clamp(9px, .68vw, 11px);
            line-height: 1.1;
        }
        html.layout-pc .mining-hud-actions .btn-action-collector {
            display: flex;
            align-items: center;
            justify-content: center;
            width: clamp(140px, 12vw, 160px);
            height: auto;
            min-height: 60px;
            padding: 0;
        }
        html.layout-pc .mining-hud-actions .btn-action-collector .action-icon {
            width: 30px;
            height: 30px;
        }
        html.layout-pc .mining-hud-actions .btn-action-checkin,
        html.layout-pc .mining-hud-actions .btn-action-group,
        html.layout-pc .mining-hud-actions .btn-action-battlepass,
        html.layout-pc .mining-hud-actions .btn-action-vip,
        html.layout-pc .mining-hud-actions .btn-action-packs { min-height: 60px; }
        html.layout-pc .mining-hud-actions .btn-action .action-arrow { right: 8px; }

        /* User-supplied mining HUD button models: display each PNG intact inside the existing hit target. */
        .mining-hud-actions .btn-action-model {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 0;
            background: transparent;
            box-shadow: none;
            clip-path: none;
            line-height: 0;
        }
        .mining-hud-actions .btn-action-model::before,
        .mining-hud-actions .btn-action-model::after { display: none; content: none; }
        .mining-hud-actions .btn-action-model > :not(.hud-action-model):not(.collector-bot-button-model) { display: none !important; }
        .mining-hud-actions .btn-action-model .hud-action-model {
            display: block;
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0;
            border: 0;
            background: transparent;
            object-fit: contain;
            pointer-events: none;
        }
        .mining-hud-actions .btn-action-collector.btn-action-model .collector-bot-button-model {
            position: absolute;
            z-index: 1;
            left: calc(8% + 1px);
            top: 46%;
            width: auto;
            height: 49%;
            max-width: 22%;
            max-height: 49%;
            object-fit: contain;
            transform-origin: 50% 90%;
            animation: collector-bot-button-rock 3.2s ease-in-out infinite;
            transform: translateY(-50%);
            pointer-events: none;
        }
@keyframes collector-bot-button-rock {
  0%, 100% { transform: translateY(-50%) rotate(-2deg); }
  50% { transform: translateY(-50%) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mining-hud-actions .btn-action-collector.btn-action-model .collector-bot-button-model { animation: none; }
}
        .mining-hud-actions .btn-action-model.is-ready,
        .mining-hud-actions .btn-action-model.is-available { filter: none; }
        html.layout-pc .mining-hud-actions .btn-action-model {
            display: flex;
            min-height: 56px;
            padding: 0;
            grid-template-columns: none;
            grid-template-rows: none;
            row-gap: 0;
            column-gap: 0;
        }
        html.layout-pc .mining-hud-actions .btn-action-collector.btn-action-model { min-height: 60px; }

        /* Normalize the visible alpha bounds of supplied models without editing the source PNGs. */
        .mining-hud-actions {
            top: -4px;
            gap: 1px;
        }
        .mining-hud-actions .btn-action-model {
            position: relative;
            width: min(120px, calc((100vw - 14px) / 2));
            height: 44px;
            min-height: 44px;
            flex: 0 0 auto;
            overflow: hidden;
            padding: 0;
        }
        .mining-hud-actions .btn-action-model .hud-action-model {
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            max-width: none;
            margin: 0;
            object-fit: fill;
        }
        html.layout-pc .mining-hud-actions { gap: 1px; }
        html.layout-pc .mining-hud-actions .btn-action-model {
            width: min(120px, calc((100vw - 14px) / 2));
            height: 56px;
            min-height: 56px;
        }

        /* User-supplied top-HUD models: preserve the current grid and all existing hit targets. */
        .top-player {
            position: relative;
            isolation: isolate;
            border: 0;
            background: url('../knopka/pilot.png') center / 100% 100% no-repeat;
        }
        .top-player::before,
        .top-player::after { display: none; }
        .top-player .avatar-wrap {
            position: absolute;
            left: 6%;
            top: 25%;
            width: 20%;
            height: 50%;
            flex: 0 0 20%;
        }
        .top-player .avatar {
            width: 100%;
            height: 100%;
            border: 0;
            border-radius: 0;
            background-color: transparent;
            box-shadow: none;
            clip-path: none;
        }
        .top-player .player-meta {
            position: absolute;
            left: 31%;
            right: 18%;
            top: 25%;
            bottom: 17%;
            display: flex;
            justify-content: center;
            min-width: 0;
            overflow: hidden;
        }
        .top-player .player-row-top { width: 100%; gap: 2px; }
        .top-player .pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .top-player .plevel { flex: 0 0 auto; }
        .top-player .player-vip {
            width: 100%;
            box-sizing: border-box;
            padding: 1px 2px;
            border: 0;
            border-radius: 0;
            background: #11150f;
            color: #f0c64f;
            box-shadow: none;
            white-space: nowrap;
        }
        .top-player .player-vip::after { display: none; }

        .top-hud-resources .res-pill,
        .top-hud-resources .res-node-spice .res-pill-hero,
        .top-hud-resources .res-node-credits .res-pill,
        .top-hud-resources .res-node-artifact .res-pill {
            position: relative;
            min-height: 31px;
            padding: 0;
            overflow: hidden;
            border: 0;
            border-image: none;
            background-image: none;
            background-repeat: no-repeat;
            background-size: 500% auto;
            background-position-y: 50%;
            box-shadow: none;
            clip-path: none;
        }
        .top-hud-resources .res-node-fuel .res-pill { background-position-x: 0%; }
        .top-hud-resources .res-node-credits .res-pill { background-position-x: 25%; }
        .top-hud-resources .res-node-spice .res-pill { background-position-x: 50%; }
        .top-hud-resources .res-node-microchips .res-pill { background-position-x: 75%; }
        .top-hud-resources .res-node-artifact .res-pill { background-position-x: 100%; }
        .top-hud-resources .res-icon { display: none; }
        .top-hud-resources .res-val,
        .top-hud-resources .res-node-fuel .res-val,
        .top-hud-resources .res-node-credits .res-val,
        .top-hud-resources .res-node-spice .res-val,
        .top-hud-resources .res-node-microchips .res-val,
        .top-hud-resources .res-node-artifact .res-val {
            position: absolute;
            top: 50%;
            left: 58%;
            width: 37%;
            max-width: none;
            overflow: visible;
            transform: translateY(-50%) scaleX(.86);
            transform-origin: center;
            color: #f1eee2;
            font-size: clamp(5px, 1.7vw, 8px);
            text-align: center;
            text-shadow: 0 1px #071019;
        }

        .hud-mail-btn {
            padding: 0;
            border: 0;
            border-image: none;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            clip-path: none;
        }
        .hud-mail-btn svg { display: none; }
        .hud-mail-model {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none;
            user-select: none;
        }
        .hud-mail-btn:focus-visible { outline: 2px solid #f1eee2; outline-offset: 2px; }

        /* The shared resource strip and pilot model get a little more room to read. */
        .top-hud { grid-template-rows: 2px minmax(42px, auto); }
        .top-hud-resources .res-pill,
        .top-hud-resources .res-node-spice .res-pill-hero,
        .top-hud-resources .res-node-credits .res-pill,
        .top-hud-resources .res-node-artifact .res-pill { min-height: 34px; }
        .top-hud-resources .res-val,
        .top-hud-resources .res-node-fuel .res-val,
        .top-hud-resources .res-node-credits .res-val,
        .top-hud-resources .res-node-spice .res-val,
        .top-hud-resources .res-node-microchips .res-val,
        .top-hud-resources .res-node-artifact .res-val {
            left: 50%;
            width: 49%;
            transform: translateY(-50%);
            font-size: clamp(6px, 1.8vw, 9px);
        }
        .top-player-profile-button {
            position: absolute;
            z-index: 2;
            top: 35%;
            left: 84%;
            width: 13%;
            height: 50%;
            padding: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
        }
        .top-player-profile-button:focus-visible {
            outline: 1px solid #67e8f4;
            outline-offset: -2px;
        }
        html.layout-pc .top-hud {
            grid-template-columns: minmax(86px, .8fr) minmax(0, 1.58fr) auto;
        }
        /* Keep the complete phone HUD in one horizontal row. */
        @media (max-width: 699px) {
            .top-hud {
                grid-template-columns: minmax(140px, 1.1fr) minmax(0, 5fr) 36px;
                grid-template-rows: 2px 70px;
                column-gap: 1px;
                row-gap: 0;
                padding: 4px 7px 5px;
                min-height: 0;
            }
            .top-player {
                grid-column: 1;
                grid-row: 2;
                justify-self: stretch;
                align-self: stretch;
                width: 100%;
                min-width: 0;
                height: 70px;
                padding: 0;
            }
            .top-player .avatar-wrap {
                left: 6%;
                top: 21%;
                width: 22%;
                height: 58%;
                flex: 0 0 22%;
            }
            .top-player .player-meta { left: 31%; right: 16%; }
            .top-player .pname { font-size: clamp(9px, 2.4vw, 10px); }
            .top-player .plevel { padding: 0; font-size: 6px; }
            .top-player .player-vip { font-size: 8px; }
            .hud-system-actions {
                grid-column: 3;
                grid-row: 2;
                align-self: center;
                justify-self: end;
                width: 36px;
                height: 36px;
            }
            .hud-mail-wrap,
            .hud-mail-btn { width: 100%; height: 100%; }
            .top-hud-resources {
                grid-column: 2;
                grid-row: 2;
                display: flex;
                align-self: center;
                align-items: stretch;
                justify-content: flex-start;
                width: 100%;
                height: 40px;
                min-height: 40px;
                gap: 0;
                padding: 0;
            }
            .top-hud-resources .res-node {
                flex: 1 1 0;
                width: auto;
                height: 100%;
                min-width: 0;
                max-width: none;
                justify-content: center;
            }
            .top-hud-resources .res-node::before,
            .top-hud-resources .hud-wire { display: none; }
            .top-hud-resources .res-pill,
            .top-hud-resources .res-node-spice .res-pill-hero,
            .top-hud-resources .res-node-credits .res-pill,
            .top-hud-resources .res-node-artifact .res-pill {
                width: 100%;
                height: 40px;
                min-height: 40px;
            }
            .top-hud-resources .res-val,
            .top-hud-resources .res-node-fuel .res-val,
            .top-hud-resources .res-node-credits .res-val,
            .top-hud-resources .res-node-spice .res-val,
            .top-hud-resources .res-node-microchips .res-val,
            .top-hud-resources .res-node-artifact .res-val {
                left: 42%;
                width: 57%;
                font-size: clamp(6px, 1.9vw, 7.4px);
                letter-spacing: -.06em;
                line-height: 1;
                transform: translateY(-50%) scaleX(.9);
                transform-origin: center;
            }
        }
        @media (max-width: 360px) {
            .top-hud {
                grid-template-columns: minmax(110px, 1fr) minmax(0, 5fr) 32px;
                padding-right: 5px;
                padding-left: 5px;
            }
            .top-player .pname { font-size: clamp(6px, 2.2vw, 8px); letter-spacing: 0; }
            .top-player .plevel { font-size: 6px; }
            .hud-system-actions { width: 32px; }
            .top-hud-resources .res-val,
            .top-hud-resources .res-node-fuel .res-val,
            .top-hud-resources .res-node-credits .res-val,
            .top-hud-resources .res-node-spice .res-val,
            .top-hud-resources .res-node-microchips .res-val,
            .top-hud-resources .res-node-artifact .res-val { font-size: clamp(5.8px, 1.9vw, 6.8px); }
        }

        /* Desktop keeps one joined resource strip and gives the pilot model a readable native-scale frame. */
        html.layout-pc .top-hud {
                grid-template-columns: minmax(240px, 260px) minmax(0, 1fr) auto;
                grid-template-rows: 2px 86px;
                column-gap: 3px;
                row-gap: 0;
                padding: 4px 9px 5px;
            }
            html.layout-pc .top-player {
                width: 240px;
                height: 86px;
                align-self: stretch;
                padding: 0;
            }
            html.layout-pc .top-player .avatar-wrap {
                left: 6%;
                top: 21%;
                width: 22%;
                height: 58%;
                flex: 0 0 22%;
            }
            html.layout-pc .top-player .player-meta { left: 31%; right: 18%; }
            html.layout-pc .top-player .pname { font-size: 12px; }
            html.layout-pc .top-player .plevel { padding: 0 1px; font-size: 8px; }
            html.layout-pc .top-player .player-vip { font-size: 10px; }
            html.layout-pc .top-hud-resources {
                align-items: center;
                gap: 0;
                padding: 0;
                justify-content: flex-start;
            }
            html.layout-pc .top-hud-resources .res-node {
                flex: 0 0 60px;
                width: 60px;
                height: 42px;
                max-width: 60px;
            }
            html.layout-pc .top-hud-resources .res-node::before,
            html.layout-pc .top-hud-resources .hud-wire { display: none; }
            html.layout-pc .top-hud-resources .res-pill,
            html.layout-pc .top-hud-resources .res-node-spice .res-pill-hero,
            html.layout-pc .top-hud-resources .res-node-credits .res-pill,
            html.layout-pc .top-hud-resources .res-node-artifact .res-pill {
                width: 100%;
                height: 42px;
                min-height: 42px;
            }
            html.layout-pc .top-hud-resources .res-val,
            html.layout-pc .top-hud-resources .res-node-fuel .res-val,
            html.layout-pc .top-hud-resources .res-node-credits .res-val,
            html.layout-pc .top-hud-resources .res-node-spice .res-val,
            html.layout-pc .top-hud-resources .res-node-microchips .res-val,
            html.layout-pc .top-hud-resources .res-node-artifact .res-val {
                left: 43%;
                width: 55%;
                font-size: clamp(8px, .7vw, 9px);
                letter-spacing: -.05em;
                transform: translateY(-50%);
            }

        /* Model frames touch each other, and the first row sits one pixel below the top panel. */
        .mining-hud-actions { top: 1px; gap: 1px; }

        /* Use the supplied five-panel resi model directly and preserve its original proportions. */
        .top-hud-resources {
            justify-content: flex-start;
            gap: 0;
            padding: 0;
        }
        .top-hud-resources > .res-node {
            min-width: 0;
            max-width: none;
            padding: 0;
        }
        .top-hud-resources > .res-node-fuel { flex: 1.5 1 0; }
        .top-hud-resources > .res-node-credits { flex: 1.3 1 0; }
        .top-hud-resources > .res-node-spice { flex: 1.1 1 0; }
        .top-hud-resources > .res-node-microchips,
        .top-hud-resources > .res-node-artifact { flex: 1 1 0; }
        .top-hud-resources .res-pill,
        .top-hud-resources .res-node-spice .res-pill-hero,
        .top-hud-resources .res-node-credits .res-pill,
        .top-hud-resources .res-node-artifact .res-pill {
            position: relative;
            display: block;
            width: 100%;
            height: 40px;
            min-height: 40px;
            padding: 0;
            overflow: hidden;
            border: 0;
            border-image: none;
            background-color: transparent;
            background-image: none;
            background-repeat: no-repeat;
            background-size: 500% auto;
            background-position-y: 50%;
            box-shadow: none;
            clip-path: none;
        }
        .top-hud-resources .res-node-fuel .res-pill { background-position-x: 0%; }
        .top-hud-resources .res-node-credits .res-pill { background-position-x: 25%; }
        .top-hud-resources .res-node-spice .res-pill { background-position-x: 50%; }
        .top-hud-resources .res-node-microchips .res-pill { background-position-x: 75%; }
        .top-hud-resources .res-node-artifact .res-pill { background-position-x: 100%; }
        .top-hud-resources .res-icon { display: none; }
        .top-hud-resources .res-val,
        .top-hud-resources .res-node-fuel .res-val,
        .top-hud-resources .res-node-credits .res-val,
        .top-hud-resources .res-node-spice .res-val,
        .top-hud-resources .res-node-microchips .res-val,
        .top-hud-resources .res-node-artifact .res-val {
            position: absolute;
            top: 50%;
            left: 80%;
            width: max-content;
            min-width: 0;
            max-width: none;
            overflow: visible;
            transform: translate(-50%, -50%) scaleX(.68);
            transform-origin: center;
            color: #f1eee2;
            font-family: 'Rajdhani', 'Segoe UI', sans-serif;
            font-size: clamp(9px, 2.6vw, 11px);
            font-weight: 700;
            letter-spacing: -.055em;
            line-height: 1;
            text-align: center;
            text-overflow: clip;
            text-shadow: 0 1px #071019;
            white-space: nowrap;
        }
        .top-hud-resources .res-node-credits .res-val,
        .top-hud-resources .res-node-spice .res-val { color: #ffe880; }
        .top-hud-resources .res-node-microchips .res-val { color: #a4f5d9; }
        .top-hud-resources .res-node-artifact .res-val { color: #e6c5ff; }

        @media (max-width: 699px) {
            .top-hud-resources > .res-node-fuel { flex: 1.5 1 0; }
            .top-hud-resources > .res-node-credits { flex: 1.3 1 0; }
            .top-hud-resources > .res-node-spice { flex: 1.1 1 0; }
            .top-hud-resources > .res-node-microchips,
            .top-hud-resources > .res-node-artifact { flex: 1 1 0; }
            .top-hud-resources .res-pill,
            .top-hud-resources .res-node-spice .res-pill-hero,
            .top-hud-resources .res-node-credits .res-pill,
            .top-hud-resources .res-node-artifact .res-pill {
                height: 40px;
                min-height: 40px;
            }
            .top-hud-resources .res-val,
            .top-hud-resources .res-node-fuel .res-val,
            .top-hud-resources .res-node-credits .res-val,
            .top-hud-resources .res-node-spice .res-val,
            .top-hud-resources .res-node-microchips .res-val,
            .top-hud-resources .res-node-artifact .res-val {
                font-size: clamp(9px, 2.6vw, 11px);
                transform: translate(-50%, -50%) scaleX(.68);
                transform-origin: center;
            }
            .top-hud-resources .res-node-fuel .res-val { transform: translate(-50%, -50%) scaleX(.59); }
            .top-hud-resources .res-node-credits .res-val { transform: translate(-50%, -50%) scaleX(.62); }
            .top-hud-resources .res-node-spice .res-val { transform: translate(-50%, -50%) scaleX(.68); }
            .top-hud-resources .res-node-microchips .res-val,
            .top-hud-resources .res-node-artifact .res-val { transform: translate(-50%, -50%) scaleX(.9); }
            .top-player .player-meta { left: 30%; right: 16%; }
            .top-player .player-row-top { gap: 1px; }
            .top-player .pname {
                flex: 1 1 auto;
                min-width: 0;
                font-size: clamp(5.8px, 1.8vw, 7px);
                letter-spacing: -.035em;
                text-overflow: clip;
            }
            .top-player .plevel { flex: 0 0 auto; padding: 0; font-size: 5px; }
        }
        @media (max-width: 360px) {
            .top-player .pname { font-size: 5.8px; }
            .top-player .plevel { font-size: 5px; }
        }
        html.layout-pc .top-hud {
            grid-template-columns: 240px 310px 36px;
            grid-template-rows: 2px 86px;
            column-gap: 1px;
            justify-content: start;
            padding: 4px 9px 5px;
        }
        html.layout-pc .top-player {
            width: 240px;
            height: 86px;
            align-self: stretch;
            padding: 0;
        }
        html.layout-pc .top-hud-resources {
            width: 310px;
            height: 42px;
            align-self: center;
            gap: 0;
        }
        html.layout-pc .top-hud-resources > .res-node-fuel { flex: 0 0 76px; }
        html.layout-pc .top-hud-resources > .res-node-credits { flex: 0 0 68px; }
        html.layout-pc .top-hud-resources > .res-node-spice { flex: 0 0 60px; }
        html.layout-pc .top-hud-resources > .res-node-microchips { flex: 0 0 53px; }
        html.layout-pc .top-hud-resources > .res-node-artifact { flex: 0 0 53px; }
        html.layout-pc .top-hud-resources > .res-node {
            width: auto;
            max-width: none;
        }
        html.layout-pc .top-hud-resources .res-pill,
        html.layout-pc .top-hud-resources .res-node-spice .res-pill-hero,
        html.layout-pc .top-hud-resources .res-node-credits .res-pill,
        html.layout-pc .top-hud-resources .res-node-artifact .res-pill {
            height: 42px;
            min-height: 42px;
        }
        html.layout-pc .top-hud-resources .res-val,
        html.layout-pc .top-hud-resources .res-node-fuel .res-val,
        html.layout-pc .top-hud-resources .res-node-credits .res-val,
        html.layout-pc .top-hud-resources .res-node-spice .res-val,
        html.layout-pc .top-hud-resources .res-node-microchips .res-val,
        html.layout-pc .top-hud-resources .res-node-artifact .res-val {
            left: 80%;
            width: max-content;
            font-size: 12px;
            transform: translate(-50%, -50%) scaleX(.8);
            transform-origin: center;
        }
        html.layout-pc .top-hud-resources .res-node-fuel .res-val { transform: translate(-50%, -50%) scaleX(.72); }
        html.layout-pc .top-hud-resources .res-node-credits .res-val { transform: translate(-50%, -50%) scaleX(.8); }
        html.layout-pc .top-hud-resources .res-node-spice .res-val { transform: translate(-50%, -50%) scaleX(.88); }
        html.layout-pc .top-hud-resources .res-node-microchips .res-val,
        html.layout-pc .top-hud-resources .res-node-artifact .res-val { transform: translate(-50%, -50%) scaleX(.95); }
        html.layout-pc .hud-system-actions {
            width: 36px;
            height: 36px;
            align-self: center;
            justify-self: start;
        }
        html.layout-pc .hud-mail-wrap,
        html.layout-pc .hud-mail-btn { width: 36px; height: 36px; }
        html.layout-pc .top-player .pname {
            flex: 1 1 auto;
            min-width: 0;
            overflow: visible;
            font-size: 10.8px;
            letter-spacing: -.035em;
            transform: scaleX(.98);
            transform-origin: left center;
        }
        @media (max-width: 699px) {
            .top-player .pname {
                overflow: visible;
                font-size: clamp(8px, 2.25vw, 9px);
                letter-spacing: -.035em;
                transform: scaleX(.75);
                transform-origin: left center;
            }
        }
        @media (max-width: 360px) {
            .top-player .pname { font-size: 8px; transform: scaleX(.6); }
        }

        /* Keep the player name and level on one line and make the complete VIP rank fit on phones. */
        @media (max-width: 699px) {
            .top-player .player-meta {
                top: 18%;
                bottom: 12%;
                gap: 1px;
            }
            .top-player .player-row-top {
                display: flex;
                align-items: center;
                width: 100%;
                gap: 2px;
            }
            .top-player .pname {
                display: block;
                width: auto;
                min-width: 0;
                flex: 1 1 auto;
                overflow: hidden;
                text-overflow: clip;
                font-size: clamp(6px, 2vw, 8px);
                letter-spacing: -.04em;
                transform: none;
            }
            .top-player .plevel {
                align-self: center;
                flex: 0 0 auto;
                font-size: clamp(5.5px, 1.8vw, 7px);
                line-height: 1;
                white-space: nowrap;
            }
            .top-player .player-vip {
                font-size: clamp(5.5px, 1.8vw, 7px);
                letter-spacing: 0;
                padding: 1px 2px;
            }
            /* Taller mobile digits, with the original atlas panels and value width preserved. */
            .top-hud-resources .res-node-fuel .res-val,
            .top-hud-resources .res-node-credits .res-val,
            .top-hud-resources .res-node-spice .res-val,
            .top-hud-resources .res-node-microchips .res-val,
            .top-hud-resources .res-node-artifact .res-val {
                font-size: clamp(11px, 3.5vw, 12px);
            }
            .top-hud-resources .res-node-fuel .res-val { transform: translate(-50%, -50%) scaleX(.55); }
            .top-hud-resources .res-node-credits .res-val { transform: translate(-50%, -50%) scaleX(.56); }
            .top-hud-resources .res-node-spice .res-val { transform: translate(-50%, -50%) scaleX(.63); }
            .top-hud-resources .res-node-microchips .res-val,
            .top-hud-resources .res-node-artifact .res-val { transform: translate(-50%, -50%) scaleX(.72); }
        }
        @media (max-width: 360px) {
            .top-player .pname { font-size: 8px; transform: scaleX(.82); }
        }

        /* Pin the top HUD to the safe-area edge and place gameplay controls 1px below the lowest upper module. */
        #top-panel .top-panel-inner { margin-bottom: -13px; }
        .top-hud { margin-top: -3px; }
        html.layout-pc .top-hud {
            padding-top: 0;
            grid-template-rows: 0px 86px;
        }
        .top-hud .top-player,
        .top-hud .top-hud-resources,
        .top-hud .hud-system-actions {
            grid-row: 1 / span 2;
            transform: translateY(-8px);
        }
        .top-hud .top-hud-resources,
        html.layout-pc .top-hud-resources {
            align-self: end;
        }
        .top-hud .hud-system-actions,
        html.layout-pc .hud-system-actions {
            align-self: end;
        }
        .top-hud-resources .res-pill::after { display: none; }
        .mining-hud-actions { top: 1px; gap: 1px; }
        html.layout-pc .mining-hud-actions .btn-action-model:not(.btn-action-collector) {
            display: flex;
            width: 140px;
            height: 56px;
            min-height: 56px;
            flex: 0 0 56px;
            grid-template-columns: none;
            grid-template-rows: none;
            padding: 0;
        }
        html.layout-pc .mining-hud-actions .btn-action-model.btn-action-collector {
            display: flex;
            width: 140px;
            height: 60px;
            min-height: 60px;
            flex: 0 0 60px;
        }
        @media (max-width: 699px) {
            .top-hud {
                padding-top: 0;
                grid-template-rows: 0px 70px;
            }
        }
        html.layout-pc .top-hud {
            grid-template-columns: 240px 320px 42px;
        }
        html.layout-pc .hud-system-actions,
        html.layout-pc .hud-mail-wrap,
        html.layout-pc .hud-mail-btn {
            width: 42px;
            height: 42px;
        }
        @media (max-width: 699px) {
            .top-hud {
                grid-template-columns: minmax(140px, 1.1fr) minmax(0, 5fr) 40px;
            }
            .hud-system-actions,
            .hud-mail-wrap,
            .hud-mail-btn {
                width: 40px;
                height: 40px;
            }
        }
        @media (max-width: 360px) {
            .top-hud {
                grid-template-columns: minmax(110px, 1fr) minmax(0, 5fr) 40px;
            }
        }

        /* Keep desktop resource sizing unchanged; inset mobile resources between the pilot and mail frames. */
        html.layout-pc .top-hud-resources {
            width: 308px;
            margin-left: 12px;
        }
        html.layout-pc .top-hud-resources > .res-node-fuel { flex: 0 0 74px; }
        html.layout-pc .top-hud-resources > .res-node-credits { flex: 0 0 66px; }
        html.layout-pc .top-hud-resources > .res-node-spice { flex: 0 0 59px; }
        html.layout-pc .top-hud-resources > .res-node-microchips { flex: 0 0 57px; }
        html.layout-pc .top-hud-resources > .res-node-artifact { flex: 0 0 52px; }
        @media (max-width: 699px) {
            .top-hud-resources {
                width: calc(100% - 8px);
                margin-left: 4px;
                margin-right: 4px;
                box-sizing: border-box;
            }
            .top-hud-resources > .res-node-microchips { flex: 1.3 1 0; }
            .top-hud .hud-system-actions { z-index: 3; }
        }

        /* Use the supplied complete bord model as the single top HUD; HTML stays as interactive text/hit areas. */
        .top-hud {
            position: relative;
            display: block;
            box-sizing: border-box;
            width: min(602px, 100%);
            height: auto;
            min-height: 0;
            aspect-ratio: 2103 / 315;
            margin: 0;
            padding: 0;
            grid-template-columns: none;
            grid-template-rows: none;
            column-gap: 0;
            row-gap: 0;
            overflow: visible;
            border: 0;
            background-color: transparent;
            background-image: url('../knopka/bord.png');
            background-repeat: no-repeat;
            background-size: 100% auto;
            background-position: center 46%;
            box-shadow: none;
            isolation: isolate;
        }
        .top-hud > .top-hud-scanline,
        .top-hud > .hud-wire-bus { display: none; }

        .top-hud .top-player {
            position: absolute;
            z-index: 2;
            left: 1.5%;
            top: 0;
            display: block;
            width: 35.5%;
            height: 100%;
            min-width: 0;
            max-width: none;
            margin: 0;
            padding: 0;
            transform: none;
            border: 0;
            background: transparent;
            box-shadow: none;
        }
        .top-hud .top-player::before,
        .top-hud .top-player::after { display: none; }
        .top-hud .top-player .avatar-wrap {
            position: absolute;
            left: 5.5%;
            top: 18%;
            width: 29%;
            height: auto;
            aspect-ratio: 1;
            flex: 0 0 auto;
            overflow: hidden;
        }
        .top-hud .top-player .avatar {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            border: 0;
            border-radius: 0;
            background-color: rgba(3, 15, 23, .45);
            background-position: center;
            background-size: cover;
            box-shadow: none;
            clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
        }
        .top-hud .top-player .player-meta {
            position: absolute;
            left: 40%;
            right: 2%;
            top: 19%;
            bottom: 18%;
            display: grid;
            grid-template-rows: 1fr 1fr;
            align-content: stretch;
            align-items: stretch;
            justify-content: stretch;
            gap: 0;
            min-width: 0;
            overflow: hidden;
        }
        .top-hud .top-player .player-row-top {
            grid-row: 2;
            display: flex;
            align-items: center;
            width: 100%;
            min-width: 0;
            height: 100%;
            gap: 2px;
            overflow: hidden;
        }
        .top-hud .top-player .plevel {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            min-width: 0;
            margin: 0 0 0 2px;
            padding-left: 3px;
            border-left: 1px solid rgba(93, 214, 239, .78);
            border-radius: 0;
            background: transparent;
            color: #a9ebff;
            font: 700 clamp(6px, .82vw, 10px)/1 'Rajdhani', 'Segoe UI', sans-serif;
            letter-spacing: 0;
            white-space: nowrap;
        }
        .top-hud .top-player .player-vip {
            grid-row: 1;
            display: flex;
            align-items: center;
            width: 100%;
            min-width: 0;
            height: 100%;
            margin: 0;
            padding: 0 0 0 22%;
            overflow: hidden;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: #ffd452;
            font: 700 clamp(7px, 2.3vw, 13px)/1 'Rajdhani', 'Segoe UI', sans-serif;
            letter-spacing: -.045em;
            text-align: left;
            text-shadow: 0 1px 2px #071019, 0 0 4px rgba(255, 186, 33, .36);
            white-space: nowrap;
        }
        .top-hud .top-player .player-vip::after { display: none; }
        .top-hud .top-player .pname {
            display: block;
            flex: 0 1 auto;
            width: auto;
            max-width: calc(100% - 18px);
            min-width: 0;
            overflow: hidden;
            color: #f5f3e9;
            font: 700 clamp(7px, 2.35vw, 14px)/1 'Rajdhani', 'Segoe UI', sans-serif;
            letter-spacing: -.025em;
            text-overflow: clip;
            text-shadow: 0 1px 2px #071019;
            white-space: nowrap;
            transform: none;
        }
        .top-hud .top-player-profile-button {
            position: absolute;
            z-index: 3;
            inset: 0;
            width: 100%;
            height: 100%;
            padding: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
        }
        .top-hud .top-player-profile-button:focus-visible {
            outline: 2px solid #7deeff;
            outline-offset: -8px;
        }

        .top-hud .top-hud-resources {
            position: absolute;
            z-index: 4;
            left: 37.15%;
            top: 0;
            display: block;
            width: 48.05%;
            height: 100%;
            min-width: 0;
            min-height: 0;
            margin: 0;
            padding: 0;
            align-self: auto;
            gap: 0;
            transform: none;
            border: 0;
            background: transparent;
            pointer-events: none;
        }
        .top-hud .top-hud-resources > .res-node {
            position: absolute;
            top: 0;
            bottom: 0;
            display: block;
            width: 20%;
            max-width: none;
            min-width: 0;
            margin: 0;
            padding: 0;
            flex: none;
            overflow: hidden;
            border: 0;
            background: transparent;
            box-shadow: none;
            clip-path: none;
            pointer-events: auto;
        }
        .top-hud .top-hud-resources > .res-node-fuel { left: 0; }
        .top-hud .top-hud-resources > .res-node-credits { left: 20%; }
        .top-hud .top-hud-resources > .res-node-spice { left: 40%; }
        .top-hud .top-hud-resources > .res-node-microchips { left: 60%; }
        .top-hud .top-hud-resources > .res-node-artifact { left: 80%; }
        .top-hud .top-hud-resources > .res-node::before,
        .top-hud .top-hud-resources > .res-node::after,
        .top-hud .top-hud-resources .hud-wire,
        .top-hud .top-hud-resources .res-icon,
        .top-hud .top-hud-resources .res-pill::before,
        .top-hud .top-hud-resources .res-pill::after { display: none; }
        .top-hud .top-hud-resources .res-pill,
        .top-hud .top-hud-resources .res-node-spice .res-pill-hero,
        .top-hud .top-hud-resources .res-node-credits .res-pill,
        .top-hud .top-hud-resources .res-node-artifact .res-pill {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            min-height: 0;
            margin: 0;
            padding: 0;
            overflow: visible;
            border: 0;
            border-image: none;
            background: transparent;
            box-shadow: none;
            clip-path: none;
            pointer-events: none;
        }
        .top-hud .top-hud-resources .res-val {
            position: absolute;
            top: 67%;
            left: 50%;
            display: block;
            width: 84%;
            min-width: 0;
            max-width: 84%;
            margin: 0;
            overflow: hidden;
            transform: translate(-50%, -50%);
            color: #f4f3ea;
            font: 700 clamp(5px, .9vw, 12px)/1 'Rajdhani', 'Segoe UI', sans-serif;
            letter-spacing: -.045em;
            text-align: center;
            text-overflow: clip;
            text-shadow: 0 1px 2px #071019, 0 0 3px rgba(0, 0, 0, .9);
            white-space: nowrap;
            pointer-events: none;
        }
        .top-hud .top-hud-resources .res-node-credits .res-val,
        .top-hud .top-hud-resources .res-node-spice .res-val { color: #fff0b5; }
        .top-hud .top-hud-resources .res-node-microchips .res-val { color: #baffdf; }
        .top-hud .top-hud-resources .res-node-artifact .res-val { color: #eed2ff; }

        .top-hud .hud-system-actions {
            position: absolute;
            z-index: 5;
            left: 85.45%;
            top: 0;
            display: block;
            width: 12%;
            height: 100%;
            margin: 0;
            padding: 0;
            align-self: auto;
            justify-self: auto;
            transform: none;
        }
        .top-hud .hud-mail-wrap {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            margin: 0;
        }
        .top-hud .hud-mail-btn {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            clip-path: none;
            cursor: pointer;
        }
        .top-hud .hud-mail-btn:focus-visible {
            outline: 2px solid #7deeff;
            outline-offset: -7px;
        }
        .top-hud .hud-mail-dot {
            position: absolute;
            z-index: 2;
            top: 11%;
            right: 14%;
            width: clamp(12px, 3.3vw, 24px);
            height: clamp(12px, 3.3vw, 24px);
            border: 1px solid #ffd4ce;
            border-radius: 50%;
            background: #ff3447;
            box-shadow: 0 0 5px 1px rgba(255, 43, 72, .85);
            animation: hud-mail-indicator-blink 1s steps(2, end) infinite;
        }
        @keyframes hud-mail-indicator-blink {
            0%, 49% { opacity: 1; }
            50%, 100% { opacity: .28; }
        }
        @media (prefers-reduced-motion: reduce) {
            .top-hud .hud-mail-dot { animation: none; }
        }

        html.layout-pc .top-hud {
            width: min(602px, 100%);
            height: auto;
            aspect-ratio: 2103 / 315;
            margin: 0;
            padding: 0;
            grid-template-columns: none;
            grid-template-rows: none;
        }
        html.layout-pc .top-hud .top-player {
            width: 35.5%;
            height: 100%;
            transform: none;
        }
        html.layout-pc .top-hud .top-hud-resources {
            width: 48.05%;
            height: 100%;
            margin: 0;
            transform: none;
        }
        html.layout-pc .top-hud .top-hud-resources > .res-node {
            width: 20%;
            flex: none;
        }
        html.layout-pc .top-hud .hud-system-actions,
        html.layout-pc .top-hud .hud-mail-wrap,
        html.layout-pc .top-hud .hud-mail-btn {
            height: 100%;
        }
        html.layout-pc .top-hud .top-player .pname {
            overflow: hidden;
            font-size: clamp(9px, 1vw, 14px);
            letter-spacing: -.025em;
            transform: none;
        }
        html.layout-pc .top-hud .top-player .player-vip {
            font-size: clamp(9px, .95vw, 13px);
        }
        html.layout-pc .top-hud .top-hud-resources .res-val {
            font-size: clamp(8px, .9vw, 12px);
        }

        @media (max-width: 699px) {
            .top-hud {
                width: 100%;
                aspect-ratio: 2103 / 315;
                grid-template-columns: none;
                grid-template-rows: none;
                margin: 0;
                padding: 0;
            }
            .top-hud .top-player .player-vip {
                padding-left: 22%;
                font-size: clamp(6.5px, 2.25vw, 9px);
                letter-spacing: -.055em;
            }
            .top-hud .top-player .pname {
                font-size: clamp(6.2px, 1.95vw, 8px);
                letter-spacing: -.035em;
            }
            .top-hud .top-hud-resources .res-val {
                width: 88%;
                max-width: 88%;
                font-size: clamp(5.8px, 2vw, 8px);
                letter-spacing: -.055em;
            }
            .top-hud .hud-system-actions { width: 12%; }
        }
        @media (max-width: 360px) {
            .top-hud .top-player .player-vip { font-size: 6.5px; }
            .top-hud .top-player .pname { font-size: clamp(6.2px, 1.95vw, 7px); }
            .top-hud .top-hud-resources .res-val { font-size: 5.8px; }
        }

        /* Keep desktop resource values at one shared visual scale in every model window. */
        html.layout-pc .top-hud .top-hud-resources .res-val {
            transform: translate(-50%, -50%) scaleX(.9);
            transform-origin: center;
        }

        /* Align the profile copy to the crown-free text area and center resource values in each full-height model window. */
        html.layout-pc .top-hud .top-player .player-meta { left: 40%; right: 2%; }
        html.layout-pc .top-hud .top-player .pname {
            font-size: clamp(8px, .8vw, 11px);
            letter-spacing: -.04em;
        }
        html.layout-pc .top-hud .top-hud-resources > .res-node { height: 100%; }
        html.layout-pc .top-hud .top-hud-resources .res-pill,
        html.layout-pc .top-hud .top-hud-resources .res-node-spice .res-pill-hero {
            height: 100%;
            min-height: 0;
        }
        @media (max-width: 699px) {
            .top-hud .top-player .pname { font-size: clamp(5.8px, 1.8vw, 7.2px); }
        }
        @media (max-width: 360px) {
            .top-hud .top-player .pname { font-size: clamp(5.8px, 1.8vw, 6.5px); }
        }

        /* Extend the supplied model's visible bounds flush to the game screen without editing its PNG. */
        #top-panel .top-panel-inner {
            padding-left: 0;
            padding-right: 0;
        }
        #top-panel .top-hud {
            width: min(616px, 100%);
            margin-left: -7px;
        }
        @media (max-width: 699px) {
            #top-panel .top-hud {
                width: calc(100% + 2.4vw);
                margin-left: -1.2vw;
            }
        }
        .mining-hud-actions { top: 1px; gap: 1px; }
        .mining-hud-actions-left { left: 0; }
        .mining-hud-actions-right { right: 0; }
        html.layout-pc .mining-hud-actions-left { left: 0; }
        html.layout-pc .mining-hud-actions-right { right: 0; }
        .mining-hud-actions .btn-action-model {
            width: min(110px, calc(100vw / 2));
            height: 44px;
            min-height: 44px;
        }
        html.layout-pc .mining-hud-actions .btn-action-model:not(.btn-action-collector) {
            width: 130px;
            height: 52px;
            min-height: 52px;
            flex: 0 0 52px;
        }
        html.layout-pc .mining-hud-actions .btn-action-model.btn-action-collector {
            width: 130px;
            height: 56px;
            min-height: 56px;
            flex: 0 0 56px;
        }

        /* Паки: модель из mines/paki.png с активными зонами оплаты поверх рамок. */
        #win-starter-packs {
            box-sizing: border-box;
            width: min(96vw, 1200px, calc((100dvh - 32px) * 1.2));
            max-width: none;
            height: auto;
            max-height: calc(100dvh - 24px);
            padding: 0;
            overflow: visible;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }
        html.layout-pc #win-starter-packs {
            width: min(96vw, 1200px, calc((100dvh - 32px) * 1.2));
            max-height: calc(100dvh - 24px);
            padding: 0;
        }
        #win-starter-packs::before { display: none; }
        .starter-packs-title {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .starter-packs-close {
            position: absolute;
            z-index: 5;
            top: 1.7%;
            right: 1.55%;
            width: 4.3%;
            height: 5.2%;
            min-width: 0;
            min-height: 0;
            padding: 0;
            overflow: hidden;
            border: 0;
            border-radius: 3px;
            background: transparent;
            color: transparent;
            font-size: 0;
            cursor: pointer;
        }
        .starter-packs-close:focus-visible {
            outline: 2px solid #57efff;
            outline-offset: 1px;
        }
        .starter-packs-stage { width: 100%; }
        .starter-packs-poster {
            position: relative;
            width: 100%;
            aspect-ratio: 1374 / 1145;
        }
        .starter-packs-model {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            user-select: none;
            pointer-events: none;
        }
        .starter-packs-poster-buttons {
            position: absolute;
            z-index: 2;
            inset: 0;
            pointer-events: none;
        }
        .starter-pack-buy-button {
            position: absolute;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            padding: 3px 6px;
            border: 0;
            border-radius: 4px;
            background: transparent;
            color: #f3fdff;
            font-family: 'Orbitron', 'Rajdhani', sans-serif;
            font-size: clamp(9px, 1vw, 15px);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: .015em;
            text-align: center;
            text-shadow: 0 1px 2px #00121d, 0 0 6px rgba(0, 222, 255, .72);
            text-transform: uppercase;
            cursor: pointer;
            touch-action: manipulation;
            pointer-events: auto;
            transition: filter .15s ease, background-color .15s ease;
        }
        .starter-pack-buy-label,
        .starter-pack-buy-state {
            display: block;
            max-width: 100%;
            color: #f3fdff;
        }
        .starter-pack-buy-price {
            display: block;
            color: #ffe17a;
            font-size: .95em;
            letter-spacing: .07em;
            text-shadow: 0 1px 2px #00121d, 0 0 6px rgba(255, 190, 46, .62);
        }
        .starter-pack-buy-button-poster-1 { left: 3.8%; top: 78.8%; width: 27.1%; height: 9.4%; }
        .starter-pack-buy-button-poster-2 { left: 36.2%; top: 78.8%; width: 27.1%; height: 9.4%; }
        .starter-pack-buy-button-poster-3 { left: 68.7%; top: 78.8%; width: 27.1%; height: 9.4%; }
        .starter-pack-buy-button:hover:not(:disabled),
        .starter-pack-buy-button:active:not(:disabled) {
            background-color: rgba(0, 13, 25, .42);
            filter: brightness(1.28);
        }
        .starter-pack-buy-button:focus-visible {
            outline: 2px solid #f3fdff;
            outline-offset: -4px;
        }
        .starter-pack-buy-button:disabled {
            color: #d5e3ea;
            cursor: default;
            opacity: .88;
        }
        .starter-packs-mobile-list { display: none; }

        @media (max-width: 699px) {
            #win-starter-packs {
                width: min(calc(100% - 12px), 440px, calc((100dvh - 32px) * 1.2));
                height: auto;
                max-height: calc(100dvh - 24px);
                padding: 0;
                overflow: hidden;
                background: transparent;
                border: 0;
                border-radius: 0;
                box-shadow: none;
            }
            .starter-packs-close {
                position: absolute;
                z-index: 5;
                top: 0;
                right: 0;
                width: 44px;
                height: 44px;
                min-width: 44px;
                min-height: 44px;
                margin: 0;
                border: 0;
                background: transparent;
                color: transparent;
                font-size: 0;
                line-height: 1;
            }
            .starter-packs-stage { width: 100%; }
            .starter-packs-poster { display: block; }
            .starter-packs-mobile-list { display: none; }
            .starter-pack-buy-button-poster-1,
            .starter-pack-buy-button-poster-2,
            .starter-pack-buy-button-poster-3 {
                top: 75%;
                height: 17.2%;
                min-height: 44px;
                font-size: clamp(8px, 2.7vw, 11px);
            }
        }

        /* Вкладка бота-собирателя повторяет предоставленный макет mines/bot_meny.png. */
        .collector-bot-design-screen {
            position: relative;
            isolation: isolate;
            width: 100%;
            aspect-ratio: 1511 / 1041;
            overflow: hidden;
            container-type: inline-size;
        }
        .collector-bot-design-art {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            user-select: none;
            -webkit-user-drag: none;
        }
        .collector-bot-design-model {
            position: absolute;
            z-index: 2;
            top: 32.5%;
            left: 50%;
            width: auto;
            height: 28%;
            max-width: 19%;
            object-fit: contain;
            transform: translate(-50%, -50%);
            filter: drop-shadow(0 3px 10px rgba(0, 232, 255, .5));
            pointer-events: none;
            user-select: none;
            -webkit-user-drag: none;
        }
        .collector-bot-design-buy,
        .collector-bot-design-close {
            position: absolute;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
        }
        .collector-bot-design-buy {
            top: 81.6%;
            left: 9%;
            width: 82%;
            height: 11.6%;
            min-height: 30px;
            color: #fff0a0;
            font-family: var(--ui-font), sans-serif;
            font-size: clamp(8px, 3.6cqw, 22px);
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: .08em;
            text-align: center;
            text-shadow: 0 0 4px #ff9d00, 0 0 12px rgba(255, 154, 0, .7);
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: filter .16s ease, color .16s ease;
        }
        .collector-bot-design-buy:hover:not(:disabled) {
            color: #fff9d7;
            filter: brightness(1.2);
        }
        .collector-bot-design-buy:focus-visible,
        .collector-bot-design-close:focus-visible {
            outline: 2px solid #fff3a3;
            outline-offset: -4px;
        }
        .collector-bot-design-buy:disabled {
            color: #c4a96a;
            cursor: default;
            opacity: .82;
        }
        .collector-bot-design-close {
            top: 3%;
            left: 90.3%;
            width: 7.5%;
            height: 11%;
            color: transparent;
            font-size: 0;
        }
        .collector-bot-design-close:focus-visible {
            outline-offset: -6px;
        }
        #collector-bot-root {
            width: 100%;
            max-width: 720px;
            margin: 0 auto;
        }
        .collector-bot-offer-panel {
            width: min(100%, calc(145.15dvh - 46.45px), 1240px);
            max-width: none;
            max-height: none;
            aspect-ratio: 1511 / 1041;
            overflow: hidden;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }
        .collector-bot-offer-panel .collector-bot-design-screen {
            height: 100%;
        }
        @media (max-width: 600px) {
            .collector-bot-design-buy { min-height: 30px; }
            .collector-bot-design-model { height: 27%; }
        }
        @media (prefers-reduced-motion: reduce) {
            .collector-bot-design-buy { transition: none; }
        }
        html.layout-pc .help-panel.collector-bot-offer-panel {
            width: min(100%, calc(145.15dvh - 46.45px), 1240px);
            max-height: none;
            padding: 0;
        }

        /* Персональное предложение: геометрия и зоны контента следуют шаблону mines/persmag.png. */
        .mining-hud-actions .btn-action-personal-offer {
            --action-neon: #f04be8;
            --action-glow: rgba(238, 42, 220, .2);
            color: #ffe57c;
            height: 50px;
            min-height: 50px;
            flex-basis: 50px;
        }
        html.layout-pc .mining-hud-actions .btn-action-model.btn-action-personal-offer {
            height: 59px;
            min-height: 59px;
            flex-basis: 59px;
        }
        .mining-hud-actions .btn-action-model.btn-action-personal-offer > .personal-offer-action-art {
            position: absolute;
            inset: 0;
            display: block !important;
            width: 100%;
            height: 100%;
            background-image: url('../knopka/pers.png');
            background-position: center calc(50% - 3px);
            background-repeat: no-repeat;
            background-size: 175% auto;
            pointer-events: none;
        }
        .mining-hud-actions .btn-action-personal-offer:focus-visible {
            outline: 2px solid #ffdc61;
            outline-offset: 1px;
        }

        /* The supplied artwork is the modal: only offer data and working hit areas sit above it. */
        #win-personal-offer {
            position: relative;
            box-sizing: border-box;
            display: block;
            flex: 0 1 auto;
            container-type: inline-size;
            width: min(98vw, 1200px, calc((100dvh - 16px) * 1.5));
            height: auto;
            max-width: none;
            max-height: calc(100dvh - 16px);
            aspect-ratio: 3 / 2;
            overflow: hidden;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: #f4f8ff;
        }
        #win-personal-offer::before { display: none; }
        #win-personal-offer > .personal-offer-template {
            position: absolute;
            z-index: 0;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            margin: 0;
            padding: 0;
            object-fit: fill;
            pointer-events: none;
            user-select: none;
        }
        #win-personal-offer .personal-offer-visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            clip-path: inset(50%);
        }
        #win-personal-offer > .personal-offer-template-close {
            position: absolute;
            z-index: 4;
            top: 5.8%;
            right: 2.3%;
            width: 6%;
            height: 9.3%;
            min-width: 0;
            min-height: 0;
            padding: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
            touch-action: manipulation;
        }
        #win-personal-offer > .personal-offer-template-close:focus-visible,
        #win-personal-offer > .personal-offer-purchase-button:focus-visible {
            outline: 2px solid #fff4a8;
            outline-offset: 1px;
        }
        #personal-offer-upgrades {
            position: absolute;
            z-index: 2;
            top: 31.9%;
            left: 44.6%;
            display: grid;
            width: 32.3%;
            height: 11.1%;
            min-height: 0;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 3%;
            overflow: hidden;
            pointer-events: none;
        }
        #personal-offer-upgrades > .personal-offer-upgrade-card {
            display: flex;
            box-sizing: border-box;
            min-width: 0;
            min-height: 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0;
            overflow: hidden;
            padding: 0;
            border: 0;
            border-radius: 0;
            clip-path: none;
            background: transparent;
            box-shadow: none;
            color: #e7f8ff;
            line-height: 1;
            text-align: center;
            text-shadow: 0 1px 2px #001225, 0 0 4px rgba(0, 186, 255, .5);
        }
        .personal-offer-upgrade-name,
        .personal-offer-upgrade-parts-unit,
        .personal-offer-upgrade-parts-count,
        .personal-offer-upgrade-credits,
        .personal-offer-upgrade-spice {
            display: block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: clip;
            white-space: nowrap;
        }
        .personal-offer-upgrade-name {
            width: 100%;
            color: #f2fbff;
            font: 800 clamp(5px, 1cqi, 12px)/1.1 'Rajdhani', 'Segoe UI', sans-serif;
            letter-spacing: -.025em;
        }
        .personal-offer-upgrade-parts {
            display: flex;
            max-width: 100%;
            min-width: 0;
            align-items: center;
            justify-content: center;
            gap: clamp(1px, .15cqi, 2px);
            color: #fff0a4;
            line-height: 1;
        }
        .personal-offer-upgrade-part-icon {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            line-height: 0;
        }
        #win-personal-offer .personal-offer-upgrade-part-icon .part-chip { gap: 0; vertical-align: middle; }
        #win-personal-offer .personal-offer-upgrade-part-icon .part-gfx svg {
            display: block;
            width: clamp(10px, 2.5cqi, 20px);
            height: clamp(10px, 2.5cqi, 20px);
        }
        .personal-offer-upgrade-parts-count {
            color: #fff0a4;
            font: 900 clamp(6.5px, 1.08cqi, 12px)/1 'Rajdhani', 'Segoe UI', sans-serif;
            line-height: 1.15;
            overflow: visible;
        }
        .personal-offer-upgrade-parts-unit {
            color: #d9eaff;
            font: 700 clamp(4px, .55vw, 7px)/1 'Rajdhani', 'Segoe UI', sans-serif;
        }
        .personal-offer-upgrade-resources {
            display: flex;
            max-width: 100%;
            min-width: 0;
            flex-direction: column;
            align-items: center;
            color: #c5dfff;
            font: 700 clamp(4.5px, .9cqi, 10.5px)/.95 'Rajdhani', 'Segoe UI', sans-serif;
            letter-spacing: -.025em;
            line-height: .95;
        }
        .personal-offer-upgrade-credits,
        .personal-offer-upgrade-spice { color: #c5dfff; font: inherit; }
        #personal-offer-rewards {
            position: absolute;
            z-index: 2;
            top: 55.25%;
            left: 31.85%;
            display: grid;
            width: 61.8%;
            height: 18.95%;
            min-height: 0;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 1.5%;
            overflow: hidden;
            pointer-events: none;
        }
        #personal-offer-rewards > .personal-offer-reward-card {
            position: relative;
            display: flex;
            box-sizing: border-box;
            min-width: 0;
            min-height: 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 0;
            border: 0;
            border-radius: 0;
            clip-path: none;
            background: transparent;
            box-shadow: none;
            color: #f4f0ff;
            text-align: center;
            text-shadow: 0 1px 2px #070a22, 0 0 5px rgba(41, 152, 255, .45);
        }
        .personal-offer-reward-content {
            position: absolute;
            inset: 0 0 26%;
            box-sizing: border-box;
            display: flex;
            min-width: 0;
            min-height: 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: clamp(0px, .15cqi, 2px);
            overflow: hidden;
            padding: 0;
        }
        .personal-offer-reward-mark {
            display: block;
            max-width: 100%;
            color: #d8edff;
            font: 700 clamp(11px, 1.8vw, 25px)/1 'Orbitron', 'Rajdhani', sans-serif;
            white-space: nowrap;
        }
        .personal-offer-reward-icon {
            display: flex;
            width: 100%;
            height: clamp(18px, 4.5cqi, 38px);
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            line-height: 0;
        }
        .personal-offer-reward-icon .part-chip { gap: 0; vertical-align: middle; }
        #win-personal-offer .personal-offer-reward-icon .part-gfx svg,
        #win-personal-offer .personal-offer-reward-icon .res-gfx svg {
            display: block;
            width: clamp(18px, 4.5cqi, 38px);
            height: clamp(18px, 4.5cqi, 38px);
        }
        .personal-offer-reward-name {
            display: block;
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            flex: 0 0 auto;
            margin: 0;
            overflow: hidden;
            color: #f0eaff;
            font: 800 clamp(5px, 1cqi, 12px)/1 'Rajdhani', 'Segoe UI', sans-serif;
            letter-spacing: -.025em;
            line-height: 1.15;
            line-clamp: 2;
            overflow-wrap: anywhere;
            text-overflow: clip;
            text-align: center;
            white-space: normal;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .personal-offer-reward-amount {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            display: grid;
            height: 25%;
            place-items: center;
            color: #fff2ae;
            font: 700 clamp(6px, 1.2cqi, 15px)/1 'Orbitron', 'Rajdhani', sans-serif;
            white-space: nowrap;
        }
        #personal-offer-countdown {
            position: absolute;
            z-index: 3;
            top: calc(83.6% - 1px);
            left: 31.8%;
            display: grid;
            width: 22%;
            height: 2.5%;
            place-items: center;
            color: #f4f8ff;
            font: 800 clamp(10px, 1.4vw, 20px)/1 'Orbitron', 'Rajdhani', sans-serif;
            letter-spacing: .08em;
            text-shadow: 0 0 5px rgba(35, 180, 255, .85);
            white-space: nowrap;
            pointer-events: none;
        }
        html.layout-pc #personal-offer-countdown { font-size: clamp(17px, 1.5vw, 22px); }
        #win-personal-offer > .personal-offer-purchase-button {
            position: absolute;
            z-index: 3;
            top: 77.8%;
            left: 59.1%;
            display: grid;
            width: 35.1%;
            height: 9%;
            min-width: 0;
            min-height: 0;
            place-items: center;
            padding: 0 2%;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: #251329;
            font: 900 clamp(8px, 1.18vw, 17px)/1.1 'Orbitron', 'Rajdhani', sans-serif;
            letter-spacing: .025em;
            text-align: center;
            text-shadow: 0 1px rgba(255, 255, 255, .48);
            cursor: pointer;
            touch-action: manipulation;
        }
        #win-personal-offer > .personal-offer-purchase-button:disabled {
            cursor: wait;
            opacity: .72;
        }
        #win-personal-offer .personal-offer-purchase-label {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        @media (max-width: 500px) {
            #personal-offer-countdown { font-size: clamp(10px, 3vw, 14px); }
        }
        @media (min-width: 351px) and (max-width: 500px) {
            #win-personal-offer .personal-offer-reward-name {
                font-size: clamp(6px, 1cqi, 10px);
                line-height: 1.1;
            }
        }
        @media (max-width: 350px) {
            #win-personal-offer .personal-offer-reward-name { line-height: 1; }
        }

        /* Commander handbook: readable text, larger inline rewards, and comfortable touch targets. */
        #player-panel-body .help-accordion { gap: 8px; }
        #player-panel-body .help-accordion-item { border-color: rgba(0, 232, 255, .28); }
        #player-panel-body .help-accordion-btn {
            min-height: 48px;
            padding: 12px 14px;
            color: #eef7ff;
            font-size: 15px !important;
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: .025em;
            touch-action: manipulation;
        }
        #player-panel-body .help-accordion-btn::after { font-size: 19px; }
        #player-panel-body .help-accordion-btn:focus-visible {
            outline: 2px solid #00e8ff;
            outline-offset: -3px;
        }
        #player-panel-body .help-accordion-body {
            padding: 2px 14px 15px;
            color: #c9dce9;
            font-size: 15px !important;
            line-height: 1.62 !important;
            letter-spacing: .005em;
            overflow-wrap: break-word;
        }
        #player-panel-body .help-accordion-body p { margin-bottom: 12px; }
        #player-panel-body .help-accordion-body ul {
            margin-bottom: 12px;
            padding-left: 20px;
        }
        #player-panel-body .help-accordion-body li { margin-bottom: 7px; }
        #player-panel-body .help-accordion-body strong { color: #f5f8ff; font-weight: 700; }
        #player-panel-body .help-accordion-body .help-table {
            width: 100%;
            max-width: 100%;
            font-size: 12px !important;
            line-height: 1.45 !important;
            table-layout: auto;
        }
        #player-panel-body .help-accordion-body .help-table th,
        #player-panel-body .help-accordion-body .help-table td {
            padding: 6px 7px;
            overflow-wrap: anywhere;
        }
        #player-panel-body .help-accordion-body .res-gfx-inline,
        #player-panel-body .help-accordion-body .part-gfx-inline {
            display: inline-flex;
            width: 20px;
            height: 20px;
            align-items: center;
            justify-content: center;
            margin: 0 3px;
            line-height: 0;
            vertical-align: -5px;
        }
        #player-panel-body .help-accordion-body .res-gfx-inline svg,
        #player-panel-body .help-accordion-body .part-gfx-inline svg {
            width: 20px;
            height: 20px;
        }

        html.layout-pc #player-panel-body .help-accordion-btn {
            min-height: 52px;
            padding: 13px 16px;
            font-size: 16px !important;
        }
        html.layout-pc #player-panel-body .help-accordion-body {
            padding: 3px 16px 17px;
            font-size: 16px !important;
            line-height: 1.65 !important;
        }
        html.layout-pc #player-panel-body .help-accordion-body .help-table {
            font-size: 14px !important;
        }
        html.layout-pc #player-panel-body .help-accordion-body .res-gfx-inline,
        html.layout-pc #player-panel-body .help-accordion-body .part-gfx-inline {
            width: 23px;
            height: 23px;
        }
        html.layout-pc #player-panel-body .help-accordion-body .res-gfx-inline svg,
        html.layout-pc #player-panel-body .help-accordion-body .part-gfx-inline svg {
            width: 23px;
            height: 23px;
        }

        .perk-tree-specialization-heading {
            margin: 12px 0 8px;
            color: #91dfff;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .12em;
            text-align: center;
            text-shadow: 0 0 8px rgba(0, 220, 255, .38);
        }
        .perk-tree-specializations {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            width: min(100%, 440px);
            position: relative;
        }
        .perk-tree-specialization {
            min-width: 0;
            padding: 7px 5px 5px;
            border: 1px solid rgba(90, 137, 170, .34);
            border-radius: 6px;
            background: rgba(2, 12, 28, .58);
            transition: border-color .2s, background .2s, box-shadow .2s;
        }
        .perk-tree-specialization.selected {
            border-color: rgba(255, 84, 217, .78);
            background: rgba(66, 14, 68, .3);
            box-shadow: 0 0 12px rgba(255, 84, 217, .18);
        }
        .perk-tree-specialization-title {
            min-height: 42px;
            margin-bottom: 4px;
            text-align: center;
        }
        .perk-tree-specialization-title b,
        .perk-tree-specialization-title small {
            display: block;
        }
        .perk-tree-specialization-title b {
            color: #f3dcff;
            font-size: 9px;
            line-height: 1.25;
        }
        .perk-tree-specialization-title small {
            margin-top: 3px;
            color: #a9c2d2;
            font-size: 7px;
            line-height: 1.25;
        }
        .perk-tree-specialization-path {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .perk-tree-specialization-node .perk-tree-node {
            width: 54px !important;
            height: 54px !important;
            min-height: 54px !important;
        }
        .perk-tree-specialization-select,
        .perk-tree-respec-button {
            width: 100%;
            min-height: 32px;
            margin-top: 7px;
            padding: 5px 6px;
            border: 1px solid rgba(0, 232, 255, .54);
            border-radius: 4px;
            background: rgba(5, 39, 59, .78);
            color: #c7f6ff;
            font: inherit;
            font-size: 8px;
            font-weight: 700;
            letter-spacing: .04em;
            cursor: pointer;
        }
        .perk-tree-specialization-select:hover:not(:disabled),
        .perk-tree-specialization-select:focus-visible {
            border-color: #b2f5ff;
            outline: none;
            box-shadow: 0 0 10px rgba(0, 232, 255, .35);
        }
        .perk-tree-specialization-select.selected {
            border-color: #ff54d9;
            background: rgba(74, 18, 73, .72);
            color: #ffd1f4;
        }
        .perk-tree-specialization-select:disabled,
        .perk-tree-respec-button:disabled {
            cursor: default;
            opacity: .7;
        }
        .perk-tree-study.gated {
            justify-content: center;
            border-color: rgba(255, 84, 217, .38);
            color: #e8a9dc;
            text-align: center;
        }
        .perk-tree-respec {
            width: min(100%, 570px);
            margin: 9px auto 0;
            padding: 7px 9px;
            border: 1px solid rgba(255, 105, 128, .32);
            border-radius: 5px;
            background: rgba(33, 9, 22, .72);
            text-align: center;
        }
        .perk-tree-respec p {
            margin: 0;
            color: #c8aeb9;
            font-size: 8px;
            line-height: 1.35;
        }
        .perk-tree-respec-button {
            max-width: 260px;
            border-color: rgba(255, 105, 128, .56);
            background: linear-gradient(180deg, rgba(91, 24, 42, .86), rgba(43, 10, 27, .9));
            color: #ffd3dd;
        }
        .perk-tree-respec-button:hover:not(:disabled),
        .perk-tree-respec-button:focus-visible {
            border-color: #ff9fb2;
            outline: none;
            box-shadow: 0 0 10px rgba(255, 88, 128, .32);
        }
        @media (max-width: 560px) {
            .perk-tree-specializations { gap: 6px; }
            .perk-tree-specialization { padding: 6px 3px 4px; }
            .perk-tree-specialization-title { min-height: 48px; }
            .perk-tree-specialization-title b { font-size: 8px; }
            .perk-tree-specialization-title small { font-size: 7px; }
            .perk-tree-specialization-node .perk-tree-node {
                width: 48px !important;
                height: 48px !important;
                min-height: 48px !important;
            }
        }

        /* Ветвление L3–L5 остаётся частью круглого дерева: только узлы, провода и их свечение. */
        .perk-tree-modal .perk-tree-branches {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            align-items: start;
            gap: 0 !important;
            width: min(100%, 480px) !important;
            margin-top: 0;
        }
        .perk-tree-modal .perk-tree-path.perk-tree-route-branch {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 0;
            padding-top: var(--perk-drop);
        }
        .perk-tree-modal .perk-tree-path.perk-tree-route-branch::before {
            height: calc(var(--perk-drop) + 3px);
        }
        .perk-tree-modal .perk-tree-route-branch > .perk-tree-node-wrap {
            width: 100%;
            min-height: 58px;
        }
        .perk-tree-modal .perk-tree-route-branch > .perk-tree-node-wrap .perk-tree-node.ready {
            border-color: #ffd45a !important;
            color: #ffe997 !important;
            box-shadow: 0 0 10px rgba(255, 212, 90, .36), inset 0 0 11px rgba(255, 212, 90, .14) !important;
            opacity: 1 !important;
            filter: none !important;
        }
        .perk-tree-modal .perk-tree-branch-descendant {
            height: var(--perk-drop) !important;
            margin: 0 !important;
        }
        .perk-tree-modal .perk-tree-specializations {
            position: relative;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0;
            width: 100%;
            max-width: none;
            padding-top: 0;
        }
        .perk-tree-modal .perk-tree-specializations::before {
            content: '';
            position: absolute;
            z-index: 1;
            top: 0;
            left: 25%;
            right: 25%;
            height: var(--perk-wire);
            margin-left: calc(var(--perk-wire) / -2);
            margin-right: calc(var(--perk-wire) / -2);
            background: var(--perk-wire-metal-x);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 4px rgba(0, 0, 0, .45);
        }
        .perk-tree-modal .perk-tree-specializations.active::before {
            background: var(--perk-wire-live-x);
            box-shadow: 0 0 5px rgba(0, 232, 255, .55), 0 0 10px rgba(0, 232, 255, .28);
        }
        .perk-tree-modal .perk-tree-specialization-path {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 0;
            padding-top: var(--perk-drop);
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }
        .perk-tree-modal .perk-tree-specialization-path::before {
            content: '';
            position: absolute;
            z-index: 1;
            top: 0;
            left: 50%;
            width: var(--perk-wire);
            height: calc(var(--perk-drop) + 2px);
            transform: translateX(-50%);
            background: var(--perk-wire-metal);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 4px rgba(0, 0, 0, .45);
        }
        .perk-tree-modal .perk-tree-specializations.active .perk-tree-specialization-path::before {
            background: var(--perk-wire-live);
            box-shadow: 0 0 5px rgba(0, 232, 255, .55), 0 0 10px rgba(0, 232, 255, .28);
        }
        .perk-tree-modal .perk-tree-specialization-path > .perk-tree-node-wrap {
            width: 100%;
            min-height: 48px;
        }
        .perk-tree-modal .perk-tree-specialization-path .perk-tree-node {
            width: 48px !important;
            height: 48px !important;
            min-height: 48px !important;
        }
        .perk-tree-modal .perk-tree-specialization-path .perk-tree-node-icon { font-size: 20px !important; }
        .perk-tree-modal .perk-tree-specialization-path.available > .perk-tree-node-wrap.node-level-4 .perk-tree-node {
            border-color: #ffd45a !important;
            box-shadow: 0 0 8px rgba(255, 212, 90, .3), inset 0 0 10px rgba(255, 212, 90, .12) !important;
            opacity: 1 !important;
            filter: none !important;
        }
        .perk-tree-modal .perk-tree-specialization-path.selected > .perk-tree-node-wrap.node-level-4 .perk-tree-node,
        .perk-tree-modal .perk-tree-specialization-path.selected > .perk-tree-node-wrap.node-level-5.unlocked .perk-tree-node {
            border-color: #00e8ff !important;
            box-shadow: 0 0 10px rgba(0, 232, 255, .5), inset 0 0 12px rgba(0, 232, 255, .16) !important;
            opacity: 1 !important;
            filter: none !important;
        }
        .perk-tree-modal .perk-tree-route-branch.selected .perk-tree-node-wrap.node-level-5.locked .perk-tree-node {
            border-color: rgba(255, 84, 217, .72) !important;
            box-shadow: 0 3px 0 #030508, 0 0 5px rgba(255, 84, 217, .2), inset 0 0 8px rgba(255, 84, 217, .08) !important;
            opacity: .62 !important;
            filter: grayscale(.3) brightness(.72) !important;
        }
        .perk-tree-modal .perk-tree-specializations.specialization-fixed .perk-tree-specialization-path:not(.selected) .perk-tree-node {
            border-color: rgba(96, 130, 160, .68) !important;
            box-shadow: 0 3px 0 #030508, inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -3px 7px rgba(0, 0, 0, .38) !important;
            opacity: .62 !important;
            filter: grayscale(.3) brightness(.72) !important;
        }
        .perk-tree-modal .perk-tree-specialization-connector {
            height: 18px !important;
            margin: 0 !important;
        }
        .perk-tree-modal .perk-tree-path.selected > .perk-tree-node-wrap > .perk-tree-node {
            border-color: #00e8ff !important;
        }
        .perk-tree-modal .perk-tree-node-popover .perk-tree-branch-bonuses {
            margin-top: 6px;
            padding-top: 5px;
            border-top: 1px solid rgba(0, 232, 255, .2);
            color: #92ecff;
            font-size: 8px;
            letter-spacing: .04em;
        }
        .perk-tree-modal .perk-tree-specialization-select {
            text-align: center;
        }
        @media (max-width: 560px) {
            .perk-tree-modal .perk-tree-branches { width: 100% !important; }
            .perk-tree-modal .perk-tree-level-row > .perk-tree-node-wrap { min-height: 52px; }
            .perk-tree-modal .perk-tree-route-branch > .perk-tree-node-wrap { min-height: 52px; }
            .perk-tree-modal .perk-tree-route-branch .perk-tree-node {
                width: 52px !important;
                height: 52px !important;
                min-height: 52px !important;
            }
            .perk-tree-modal .perk-tree-specialization-path > .perk-tree-node-wrap { min-height: 42px; }
            .perk-tree-modal .perk-tree-specialization-path .perk-tree-node {
                width: 42px !important;
                height: 42px !important;
                min-height: 42px !important;
            }
            .perk-tree-modal .perk-tree-specialization-path .perk-tree-node-icon { font-size: 18px !important; }
            .perk-tree-modal .perk-tree-branch-descendant { height: 14px !important; }
            .perk-tree-modal .perk-tree-specialization-connector { height: 14px !important; }
        }

        /* Keep the node-side sockets as the single wire joints; hide duplicate wire-end tabs. */
        .perk-tree-modal .perk-tree-connector::before,
        .perk-tree-modal .perk-tree-connector::after,
        .perk-tree-modal .perk-tree-path::after {
            display: none !important;
            content: none !important;
        }
        /* A capstone has no outgoing wire, so its lower node socket is omitted. */
        .perk-tree-modal .perk-tree-specialization-node.node-level-5 .perk-tree-node::after {
            display: none !important;
            content: none !important;
        }