/* SpacePro 0.6.5.2 - Clean Styles */

canvas, #stick, .control-region {
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

* {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Local Outfit — primary UI font (works offline / Telegram WebView) */
@font-face {
    font-family: "Outfit";
    src: url("assets/fonts/Outfit-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body, html {
    overscroll-behavior: none !important;
    overflow: hidden !important;
    width: 100%;
    height: 100%;
    height: 100vh;
    width: 100vw;
    --font-ui: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --mm-font: "Outfit", system-ui, sans-serif;
    font-family: "Outfit", system-ui, -apple-system, sans-serif !important;
    color: white;
    background: #000;
    margin: 0 !important;
    padding: 0 !important;
}

canvas {
    display: block;
    background: #010103;
    touch-action: none;
}

#gameUI {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    touch-action: none;
}

.hidden {
    display: none !important;
}

#damageOverlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: red;
    opacity: 0;
    pointer-events: none;
    z-index: 40;
    transition: opacity 0.1s;
}

#heatOverlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 50%, rgba(255, 69, 0, 0.5) 90%);
    opacity: 0;
    pointer-events: none;
    z-index: 35;
    /* opacity driven in JS for fast fade; keep short CSS fallback */
    transition: opacity 0.12s linear;
}

#healOverlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #39ff14;
    opacity: 0;
    pointer-events: none;
    z-index: 41;
    transition: opacity 0.5s;
}

#fogOverlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 30;
    background: radial-gradient(ellipse at center, transparent 75%, black 100%);
}

.screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(5, 5, 10, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 200;
    overflow-y: auto;
    padding: max(28px, env(safe-area-inset-top, 0px) + 36px) 12px max(24px, env(safe-area-inset-bottom, 0px) + 16px);
    font-family: var(--font-ui);
}

.screen-pause {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
    position: relative;
    padding-right: 36px;
    padding-bottom: 4px;
}
h1 {
    color: #39ff14;
    font-size: clamp(2.2rem, 8vw, 3.5rem);
    margin: 0;
    text-shadow: 0 0 20px #39ff14;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-family: var(--font-ui);
}
.version-tag {
    position: absolute;
    right: -6px;
    bottom: 2px;
    margin-top: 0;
    font-size: 0.55rem;
    color: #fff !important;
    background: #c62828;
    letter-spacing: 0.06em;
    font-family: var(--font-mono);
    font-style: normal;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    line-height: 1.2;
    box-shadow: 0 0 8px rgba(198,40,40,0.45);
    z-index: 2;
}

h2 {
    margin-bottom: 20px;
    color: #fff;
    text-align: center;
}

.beta-tag {
    font-size: 0.7rem;
    color: #ccc;
    background: transparent;
    border: 1px solid #333;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 6px;
    opacity: 0.9;
    text-shadow: none;
    font-style: normal;
    letter-spacing: 0.08em;
    font-family: var(--font-mono);
    font-weight: 600;
}

button, .nav-item {
    background: linear-gradient(90deg, #1f4068, #0f2040);
    border: 1px solid #39ff14;
    color: #fff;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-family: var(--font-ui);
    margin: 8px;
    border-radius: 5px;
    cursor: pointer;
    width: 280px;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.2);
    pointer-events: auto;
    transition: 0.2s;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

button:focus, .nav-item:focus, input:focus, select:focus {
    box-shadow: 0 0 20px #39ff14, inset 0 0 10px #39ff14;
    transform: scale(1.05);
    z-index: 1000;
    border-color: #fff;
}

button:active {
    transform: scale(0.96);
    background: #39ff14;
    color: #000;
}

.btn-secondary {
    background: transparent;
    border: 1px solid #666;
    color: #aaa;
    box-shadow: none;
}

.btn-dev {
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid #ff3333;
    color: #ff3333;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.1);
    font-size: 0.9rem;
    padding: 10px 20px;
}

.btn-quick {
    background: #39ff14;
    color: #000;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.4);
    border: 1px solid #39ff14;
}

.btn-social {
    width: 140px;
    margin: 0;
    font-size: 0.9rem;
}

.social-buttons-container {
    display: flex;
    justify-content: space-between;
    width: 296px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.btn-small {
    width: auto;
    padding: 10px 15px;
    font-size: 0.9rem;
    margin: 0 0 0 5px;
}

input, select {
    padding: 15px;
    width: 280px;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #111;
    color: white;
    font-size: 1rem;
    text-align: center;
    outline: none;
}

input:focus, select:focus {
    border-color: #39ff14;
}

#menuSettings {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    justify-content: flex-start !important;
    padding-bottom: max(90px, env(safe-area-inset-bottom, 0px) + 70px) !important;
}

#menuSettings #settingsGrid {
    display: grid;
    grid-template-columns: 240px 240px;
    gap: 12px 14px;
    justify-content: center;
    align-items: start;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}

.setting-row {
    width: 240px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.setting-row-joy {
    grid-column: 1 / -1;
    width: 100%;
    align-items: center;
}

.joy-size-label {
    color: #39ff14;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 6px;
    text-align: center;
    letter-spacing: 0.5px;
}

.joy-range {
    width: 240px !important;
    margin: 0 auto !important;
}

#menuSettings #settingsGrid .nav-item,
#menuSettings #settingsGrid button {
    width: 240px !important;
    max-width: 240px !important;
    height: 48px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    border: 2px solid #39ff14 !important;
    background: linear-gradient(145deg, #1f4068, #0f2040) !important;
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.25) !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.btn-disabled,
button.btn-disabled,
.setting-row.btn-disabled {
    opacity: 0.35 !important;
    filter: grayscale(0.4);
    pointer-events: none !important;
    cursor: not-allowed !important;
}

#menuSettings.game-running {
    pointer-events: none !important;
    opacity: 0.5 !important;
}

#menuSettings #settingsGrid .btn-active {
    background: linear-gradient(145deg, #39ff14, #00cc00) !important;
    color: #000 !important;
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.8) !important;
}

.btn-back-small {
    width: 140px !important;
    height: 42px !important;
    font-size: 0.9rem !important;
    padding: 0 !important;
}

#btnSettingsBack {
    /* Superseded by .floating-close-btn (0.6.5.2) — kept empty rather
       than deleted so nothing else in this file that assumes the
       selector exists breaks. */
}

.tutorial-box {
    max-width: 360px;
    text-align: left;
    background: rgba(0,0,0,0.55);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 10px 0 20px;
    line-height: 1.55;
    color: #ccc;
    font-size: 0.95rem;
}

.btn-tutorial {
    position: absolute !important;
    top: max(72px, env(safe-area-inset-top, 0px) + 64px) !important;
    left: 16px !important;
    right: auto !important;
    width: auto !important;
    min-width: 120px !important;
    height: 40px !important;
    font-size: 0.85rem !important;
    padding: 0 16px !important;
    margin: 0 !important;
    z-index: 220;
}

@media (max-width: 560px) {
    #menuSettings #settingsGrid {
        grid-template-columns: 240px !important;
    }
}

.profile-widget {
    position: absolute;
    top: max(72px, env(safe-area-inset-top, 0px) + 64px);
    right: 16px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 15px 5px 5px;
    border-radius: 30px;
    cursor: pointer;
    border: 1px solid #444;
    transition: 0.2s;
    z-index: 210;
    min-width: 120px;
    width: auto !important;
}

.pw-avatar {
    width: 40px;
    height: 40px;
    background: #000;
    border-radius: 50%;
    border: 2px solid #39ff14;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin-right: 10px;
}

.pw-name {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-area {
    position: absolute;
    top: max(88px, env(safe-area-inset-top, 0px) + 80px);
    left: 16px;
    width: 200px;
    z-index: 40;
}




/* === ИНТЕРФЕЙС БОЯ (Вариант 1: Glassmorphism) === */
.hp-bar-frame, .heat-bar-frame {
    width: 100%;
    /* No backdrop-filter here: blurring the animated canvas every frame is
       one of the most expensive things a mobile compositor can do. */
    background: rgba(10, 10, 15, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.hp-bar-frame { height: 26px; }
.heat-bar-frame { height: 10px; border-radius: 6px; padding: 2px; border: 1px solid rgba(255, 255, 255, 0.1); }

.hp-container {
    display: flex;
    gap: 4px;
    width: 100%;
    height: 100%;
}

.hp-pip {
    flex-grow: 1;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.hp-container.state-high .hp-pip.active {
    background: #39ff14;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.6);
}
.hp-container.state-mid .hp-pip.active {
    background: #ffcc00;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.6);
}
.hp-container.state-low .hp-pip.active {
    background: #ff3333;
    box-shadow: 0 0 8px rgba(255, 51, 51, 0.6);
}

.heat-bar-fill {
    width: 0%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #ffcc00, #ff0000);
    transition: width 0.1s linear;
}

.energy-container {
    display: flex;
    gap: 4px;
    width: 100%;
    height: 10px;
    margin-top: 4px;
}

.energy-pip {
    flex-grow: 1;
    height: 100%;
    background: rgba(10, 10, 15, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.energy-pip.active {
    background: #00ccff;
    border-color: #00ccff;
    box-shadow: 0 0 8px rgba(0, 204, 255, 0.6);
}

.stats-panel {
    position: absolute;
    top: max(160px, env(safe-area-inset-top, 0px) + 152px);
    left: 16px;
    font-family: var(--font-mono);
    pointer-events: none;
    z-index: 40;
    background: rgba(10, 10, 15, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.stats-panel .stat-row {
    font-size: 13px;
}

.stat-row {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
    text-shadow: none;
}
.stat-row:last-child { margin-bottom: 0; }

.accent { 
    color: #39ff14; 
    font-weight: 800;
}

.pause-btn {
    position: absolute;
    top: max(88px, env(safe-area-inset-top, 0px) + 80px);
    right: 16px;
    width: 45px !important;
    height: 45px !important;
    border-radius: 12px;
    background: rgba(10, 10, 15, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 18px;
    z-index: 60;
    margin: 0;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background 0.2s, transform 0.1s;
}
.pause-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.2);
}





.hint-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 10px;
    color: #444;
    font-family: var(--font-mono);
    text-align: right;
    pointer-events: none;
}

.controls-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    display: flex;
    pointer-events: none;
}

.control-zone {
    flex: 1;
    position: relative;
    pointer-events: auto;
}

/* Тачпад: четверть экрана — уменьшенная плоскость управления кораблём.
   Портрет: нижняя правая четверть, ландшафт: правая четверть на всю высоту.
   При swapControls поле переезжает на другую сторону. */
#spTouchpadField {
    position: fixed;
    z-index: 30;
    display: none;
    touch-action: none;
    background: transparent;
    -webkit-user-select: none;
    user-select: none;
}
body.game-active:not(.game-paused):not(.game-report-active) #spTouchpadField:not(.hidden) {
    display: block;
}
#spTouchpadField.hidden { display: none !important; }
/* В режиме тачпада зоны стика не должны перехватывать касания:
   поле тачпада лежит под ними. Кнопка огня остаётся кликабельной. */
body.touchpad-control .control-zone { pointer-events: none !important; }
body.touchpad-control .fire-btn-area { pointer-events: auto !important; }

.fire-btn-area {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 50px;
}

.fire-btn-visual {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
}

.fire-active .fire-btn-visual {
    background: transparent;
    border: none;
    opacity: 0;
}

.joystick-root {
    position: absolute;
    width: 120px;  /* default 100%; JS applyJoystickSize overrides */
    height: 120px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    margin-left: -60px;
    margin-top: -60px;
    /* joy size applied via JS width/height + margin */
}

.joystick-visible { opacity: 0.6; }

.joystick-base {
    width: 100%;
    height: 100%;
    border: 2px solid rgba(57, 255, 20, 0.85);
    border-radius: 50%;
    position: relative;
    background: transparent;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.25);
}

.joystick-stick {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid rgba(57, 255, 20, 0.9);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.35);
}

.joystick-boost .joystick-base {
    border-color: #fff;
    box-shadow: 0 0 15px rgba(255,255,255,0.5);
}

.joystick-boost .joystick-stick {
    background: #fff;
    box-shadow: 0 0 20px #fff;
}

.report-stats {
    text-align: left;
    margin: 20px 0;
    background: rgba(0,0,0,0.6);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #333;
    width: 320px;
    position: relative;
}

.report-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: 0.5s;
}

.report-line.visible {
    opacity: 1;
    transform: translateY(0);
}

.report-total-line {
    opacity: 0;
    transform: translateY(10px);
    transition: 0.5s;
}
.report-total-line.visible {
    opacity: 1 !important;
    transform: translateY(0);
}

.report-total-val {
    font-size: 2.5rem;
    color: #39ff14;
    font-weight: 900;
    font-style: italic;
}

.total-pulse {
    animation: pulseBig 0.5s ease-out;
}

@keyframes pulseBig {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); color: #39ff14; text-shadow: 0 0 30px #39ff14; }
    100% { transform: scale(1); }
}

input[type=range] {
    -webkit-appearance: none;
    width: 160px;
    height: 8px;
    background: #333;
    outline: none;
    border-radius: 4px;
    border: 1px solid #555;
    padding: 0;
    margin: 0;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #39ff14;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 10px #39ff14;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 300px;
    margin-bottom: 20px;
}

.p-stat-box {
    background: rgba(0,0,0,0.5);
    border: 1px solid #333;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.p-stat-val {
    font-size: 0.95rem;
    color: #39ff14;
    font-family: var(--font-mono);
    font-weight: bold;
}

.avatar-selector {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.av-option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #222;
    border: 2px solid #444;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
}

.av-selected {
    border-color: #39ff14;
    background: #333;
    box-shadow: 0 0 10px #39ff14;
}

.debug-panel {
    position: absolute;
    top: 120px;
    left: 12px;
    z-index: 80;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 11px;
    line-height: 1.35;
    background: rgba(0, 0, 0, 0.72);
    padding: 10px 12px;
    border: 1px solid #39ff14;
    border-radius: 8px;
    pointer-events: none;
    display: none;
    max-height: min(70vh, 520px);
    overflow: auto;
    min-width: 160px;
    color: #c8ffd0;
}
.debug-panel .debug-title {
    color: #39ff14;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.debug-panel .debug-sec {
    color: #6dbf84;
    margin-top: 6px;
    margin-bottom: 2px;
    font-size: 10px;
    letter-spacing: 0.04em;
}
.debug-panel .debug-row span { color: #39ff14; }
.debug-panel .debug-freeze-hot { color: #ff6666 !important; }

.dev-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 6px;
}

.dev-item {
    background: rgba(0,0,0,0.5);
    border: 1px solid #444;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dev-active { border-color: #ff3333; }
.dev-active span { color: #ff3333; }

.dev-switch {
    position: relative;
    width: 40px;
    height: 20px;
    background: #333;
    border-radius: 10px;
    cursor: pointer;
}

.dev-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
}

.dev-sw-active { background: #ff3333; }
.dev-sw-active::after { left: 22px; }

.lb-container {
    width: 90%;
    max-width: 500px;
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 20px;
    border: 1px solid #333;
    background: rgba(0,0,0,0.3);
}

.lb-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.lb-table th {
    background: #111;
    color: #888;
    padding: 10px 5px;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #333;
}

.lb-table td {
    padding: 8px 5px;
    border-bottom: 1px solid #222;
    text-align: center;
    color: #ccc;
}

.lb-row:hover {
    background: rgba(57, 255, 20, 0.05);
    cursor: pointer;
    outline: 1px solid #39ff14;
}

.lb-diff-easy { color: #00ff00; }
.lb-diff-norm { color: #ffff00; }
.lb-diff-med { color: #00ccff; }
.lb-diff-hard { color: #ff3333; }

.game-report-active #menuReport {
    z-index: 10000 !important;
}

.game-report-active #gameUI {
    pointer-events: none !important;
}

.external-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
    background: linear-gradient(90deg, #1f4068, #0f2040) !important;
    border: 1px solid #39ff14 !important;
    padding: 15px 30px !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
}

/* Mouse control: hide system cursor only while playing (not pause/menus) */
body.mouse-control.game-active:not(.game-paused) {
    cursor: none !important;
}
body.mouse-control.game-active:not(.game-paused) canvas {
    cursor: none !important;
}
body.mouse-control.game-paused,
body.mouse-control.game-paused * {
    cursor: auto !important;
}


/* Buff HUD */
.buff-pickup-msg {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translateX(-50%) translate(var(--shake-x, 0px), var(--shake-y, 0px));
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: bold;
    color: #39ff14;
    text-shadow: 0 0 12px currentColor;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 50;
    letter-spacing: 1px;
}
.buff-timers {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%) translate(var(--shake-x, 0px), var(--shake-y, 0px));
    width: min(280px, 80vw);
    z-index: 60;
    pointer-events: none;
    display: block;
    opacity: 1;
}
.buff-timer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    margin-bottom: 4px;
    text-shadow: 0 0 6px currentColor;
}
.buff-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
    overflow: hidden;
}
.buff-bar > div {
    height: 100%;
    border-radius: 3px;
    transition: width 0.1s linear;
}

/* Settings: keep buttons fixed size, range not a nav-item */
#menuSettings {
    overflow: visible;
}
#menuSettings #settingsGrid {
    overflow: visible;
}
#menuSettings #settingsGrid .nav-item,
#menuSettings #settingsGrid button {
    flex-shrink: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
.joy-range {
    -webkit-appearance: none;
    appearance: none;
    width: 240px !important;
    max-width: 240px !important;
    height: 28px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    display: block !important;
    padding: 0 !important;
}
.joy-range::-webkit-slider-runnable-track {
    height: 8px;
    background: #1a2a40;
    border: 1px solid #39ff14;
    border-radius: 4px;
}
.joy-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #39ff14;
    margin-top: -7px;
    box-shadow: 0 0 10px #39ff14;
    cursor: pointer;
}
.joy-range::-moz-range-track {
    height: 8px;
    background: #1a2a40;
    border: 1px solid #39ff14;
    border-radius: 4px;
}
.joy-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #39ff14;
    border: none;
    box-shadow: 0 0 10px #39ff14;
    cursor: pointer;
}

/* Records table rows not buttons */
.lb-row {
    pointer-events: none;
}
.lb-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #222;
}

/* Achievements */
.ach-list {
    max-height: 60vh;
    overflow-y: auto;
    width: min(420px, 92vw);
    text-align: left;
    margin: 10px auto 20px;
    padding-right: 6px;
}
.ach-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    border: 1px solid #222;
    background: rgba(0,0,0,0.35);
}
.ach-item.ach-done {
    border-color: rgba(57,255,20,0.35);
    background: rgba(20,40,20,0.4);
}
.ach-item.ach-secret {
    border-color: rgba(180,100,255,0.5);
}
.ach-icon { font-size: 1.5rem; width: 2rem; text-align: center; }
.ach-name { color: #39ff14; font-weight: bold; font-size: 0.95rem; }
.ach-locked .ach-name { color: #666; }
.ach-desc { color: #888; font-size: 0.8rem; margin-top: 2px; }
.ach-toast {
    position: fixed;
    top: auto;
    bottom: 16%;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    display: flex;
    gap: 8px;
    align-items: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 8px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s, transform 0.35s;
    max-width: 90vw;
}
.ach-toast.show {
    opacity: 0.9;
    transform: translateX(-50%) translateY(0);
}
.ach-toast-icon { font-size: 1.1rem; opacity: 0.9; }

.ach-toast-name {
    font-size: 0.9rem;
    color: rgba(57,255,20,0.95);
    font-weight: 700;
    font-family: var(--font-mono);
    text-shadow: 0 0 8px rgba(0,0,0,0.9), 0 0 4px rgba(57,255,20,0.5);
}



/* Telegram Mini App */
body.tg-miniapp {
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}
body.tg-miniapp #gameCanvas {
  touch-action: none;
}

/* Mobile portrait: HUD below TG/status, normal sizes; notifications lower */
@media (max-width: 900px) and (orientation: portrait) {
  .btn-tutorial {
    top: max(76px, env(safe-area-inset-top, 0px) + 68px) !important;
    left: 12px !important;
  }
  .profile-widget {
    top: max(76px, env(safe-area-inset-top, 0px) + 68px) !important;
    right: 12px !important;
  }
  .status-area {
    top: max(96px, env(safe-area-inset-top, 0px) + 88px);
    left: 14px;
    width: 200px;
  }
  .hp-bar-frame { height: 28px; }
  .heat-bar-frame { height: 8px; }
  .energy-container { height: 10px; }
  .stats-panel {
    top: max(178px, env(safe-area-inset-top, 0px) + 170px);
    left: 14px;
    font-size: 14px;
  }
  .stats-panel .stat-row { font-size: 14px; }
  .pause-btn {
    top: max(96px, env(safe-area-inset-top, 0px) + 88px);
    right: 14px;
    width: 45px !important;
    height: 45px !important;
  }
  .buff-pickup-msg {
    top: auto !important;
    bottom: max(28%, calc(env(safe-area-inset-bottom, 0px) + 24%));
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    z-index: 80;
    max-width: 90vw;
    text-align: center;
  }
  .buff-timers {
    top: auto !important;
    bottom: max(22%, calc(env(safe-area-inset-bottom, 0px) + 18%));
    left: 50%;
    transform: translateX(-50%);
    width: min(260px, 86vw);
    z-index: 79;
  }
  .ach-toast {
    top: auto !important;
    bottom: max(15%, calc(env(safe-area-inset-bottom, 0px) + 11%));
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 90;
  }
  .ach-toast.show {
    transform: translateX(-50%) translateY(0);
  }
}



/* Landscape: fit menus; keep in-game HUD at normal size, just lower */
@media (orientation: landscape) and (max-height: 520px) {
  .screen {
    padding-top: max(20px, env(safe-area-inset-top, 0px) + 20px) !important;
    padding-bottom: 10px !important;
    justify-content: flex-start;
    padding-top: max(48px, env(safe-area-inset-top, 0px) + 40px) !important;
  }
  .title-block {
    margin-bottom: 8px !important;
  }
  .title-block h1 {
    font-size: clamp(2.1rem, 9vh, 3rem) !important;
    line-height: 1.05 !important;
  }
  .version-tag {
    font-size: 0.48rem !important;
    color: #fff !important;
    background: #c62828 !important;
    opacity: 1 !important;
    margin-top: 0 !important;
  }
  .beta-tag {
    font-size: 0.5rem !important;
  }
  .nav-item, .screen button.nav-item {
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
    margin: 5px 0 !important;
    width: min(260px, 70vw) !important;
  }
  .btn-back-small {
    padding: 7px 14px !important;
    font-size: 0.75rem !important;
  }
  #settingsGrid .nav-item,
  #settingsGrid button {
    width: min(220px, 70vw) !important;
  }
  .joy-range { width: 180px !important; max-width: 180px !important; }
  .report-stats {
    width: min(300px, 90vw) !important;
    padding: 14px !important;
  }
  .lb-container, .ach-list { max-height: 42vh !important; }
  .menu-footer { font-size: 0.65rem; }
  .btn-tutorial {
    top: max(48px, env(safe-area-inset-top, 0px) + 40px) !important;
    font-size: 0.7rem !important;
    padding: 6px 10px !important;
  }
  .profile-widget {
    top: max(48px, env(safe-area-inset-top, 0px) + 40px) !important;
    right: 12px !important;
  }
  /* in-game landscape: below TG chrome */
  .status-area {
    top: max(52px, env(safe-area-inset-top, 0px) + 44px);
    left: 14px;
    width: 180px;
  }
  .hp-bar-frame { height: 24px; }
  .heat-bar-frame { height: 7px; }
  .energy-container { height: 9px; }
  .stats-panel {
    top: max(100px, env(safe-area-inset-top, 0px) + 92px);
    left: 14px;
  }
  .stats-panel .stat-row { font-size: 13px; margin-bottom: 3px; }
  .pause-btn {
    top: max(52px, env(safe-area-inset-top, 0px) + 44px);
    right: 14px;
    width: 42px !important;
    height: 42px !important;
  }
  .buff-pickup-msg { top: max(48px, env(safe-area-inset-top, 0px) + 40px); font-size: 0.9rem; }
  .buff-timers { top: max(78px, env(safe-area-inset-top, 0px) + 70px); }
  .buff-timers { top: max(80px, env(safe-area-inset-top, 0px) + 72px); width: min(240px, 50vw); }
  .ach-toast { top: auto !important; bottom: max(100px, env(safe-area-inset-bottom, 0px) + 90px); }
}

.menu-footer {
    position: absolute;
    bottom: max(16px, env(safe-area-inset-bottom, 0px) + 10px);
    left: 0; right: 0;
    font-size: 0.75rem;
    color: #666;
    font-family: var(--font-mono);
    text-align: center;
    line-height: 1.4;
    pointer-events: none;
}
.menu-footer .footer-ver {
    font-size: 0.7rem;
    color: #555;
}
.btn-tutorial {
    position: absolute !important;
    top: max(72px, env(safe-area-inset-top, 0px) + 64px) !important;
    left: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 8px 14px !important;
    font-size: 0.75rem !important;
    margin: 0 !important;
    z-index: 210;
}

/* Landscape: same size as portrait, top offset 60px */
@media (orientation: landscape) {
  .btn-tutorial {
    width: auto !important;
    max-width: 140px !important;
    min-width: 0 !important;
    height: 40px !important;
    font-size: 0.75rem !important;
    padding: 0 14px !important;
    transform: none !important;
    top: max(60px, env(safe-area-inset-top, 0px) + 60px) !important;
  }
  .profile-widget {
    width: auto !important;
    min-width: 120px !important;
    max-width: none !important;
    height: auto !important;
    padding: 5px 15px 5px 5px !important;
    transform: none !important;
    top: max(60px, env(safe-area-inset-top, 0px) + 60px) !important;
  }
  .profile-widget .pw-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    margin-right: 10px !important;
  }
  .profile-widget .pw-name {
    font-size: 1rem !important;
    max-width: 150px !important;
  }
  .title-block {
    padding-right: 40px;
  }
  .title-block h1 {
    font-size: clamp(2rem, 8.5vh, 2.9rem) !important;
  }
  .version-tag {
    font-size: 0.48rem !important;
    color: #fff !important;
    background: #c62828 !important;
    right: -4px;
    bottom: 2px;
  }
}

.ui-layout-panel {
  width: min(420px, 94vw);
  max-height: 70vh;
  overflow-y: auto;
  text-align: left;
  padding: 4px 8px 16px;
}
.ui-layout-group {
  border: 1px solid #2a3344;
  border-radius: 10px;
  padding: 12px 12px 8px;
  margin-bottom: 12px;
  background: rgba(0,0,0,0.35);
}
.ui-layout-title {
  color: #39ff14;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  font-weight: 700;
}
.ui-layout-group label {
  display: block;
  color: #9aa3b5;
  font-size: 0.72rem;
  margin: 6px 0 2px;
  font-family: var(--font-mono);
}
.ui-layout-group .joy-range {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 6px !important;
}
.ui-layout-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.ui-layout-actions .nav-item {
  width: min(280px, 90%) !important;
}

#menuUiLayout:not(.hidden) {
  display: block !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  height: 100% !important;
  max-height: 100% !important;
  padding-top: max(16px, env(safe-area-inset-top, 0px) + 10px) !important;
  padding-bottom: max(48px, env(safe-area-inset-bottom, 0px) + 32px) !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
#menuUiLayout.hidden {
  display: none !important;
}
#menuUiLayout .ui-layout-panel {
  max-height: none !important;
  overflow: visible !important;
  width: min(420px, 94vw);
  margin: 0 auto;
  pointer-events: auto;
}
#menuUiLayout h2 {
  flex-shrink: 0;
  margin-top: 8px;
}
.ui-orient-toggle {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 14px;
  width: min(420px, 94vw);
}
.ui-orient-toggle button {
  width: auto !important;
  min-width: 140px !important;
  padding: 10px 16px !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
}
.ui-orient-toggle button.active {
  background: linear-gradient(90deg, #39ff14, #00aa00) !important;
  color: #000 !important;
  border-color: #fff !important;
}

#menuUiLayout .ui-orient-toggle,
#menuUiLayout h2,
#menuUiLayout .ui-layout-actions {
  width: min(420px, 94vw);
  margin-left: auto;
  margin-right: auto;
}
#menuUiLayout input[type=range] {
  touch-action: pan-y;
}



/* ============================================================
   SpacePro Menu System 2026 — Figma-inspired (node 6-5)
   Minimal black canvas · neon green title · clean hierarchy
   ============================================================ */

:root {
  --sp-green: #39ff14;
  --sp-green-dim: #1a8f0a;
  --sp-green-glow: rgba(57, 255, 20, 0.35);
  --sp-bg: #000000;
  --sp-panel: #070a08;
  --sp-panel-2: #0c120e;
  --sp-border: rgba(57, 255, 20, 0.22);
  --sp-border-muted: rgba(255, 255, 255, 0.12);
  --sp-text: #e8ffe8;
  --sp-muted: #7a8f7a;
  --sp-radius: 14px;
  --sp-radius-sm: 10px;
  --sp-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --sp-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
}

/* Screens: true black, centered column */
.screen {
  background: var(--sp-bg) !important;
  color: var(--sp-text);
  font-family: var(--sp-font);
}

#menuMain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: max(24px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}

#menuMain.hidden { display: none !important; }

/* Tutorial — top-left ghost */
#menuMain .btn-tutorial {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px) + 12px);
  left: max(16px, env(safe-area-inset-left, 0px) + 12px);
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 10px 16px !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.12em;
  background: transparent !important;
  border: 1px solid var(--sp-border-muted) !important;
  color: var(--sp-muted) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-transform: uppercase;
  font-weight: 600;
}
#menuMain .btn-tutorial:hover,
#menuMain .btn-tutorial:focus {
  border-color: var(--sp-green) !important;
  color: var(--sp-green) !important;
  box-shadow: 0 0 16px var(--sp-green-glow) !important;
  transform: none !important;
}

/* Title block — Figma: centered neon wordmark */
#menuMain .title-block {
  position: relative;
  margin: 0 0 36px;
  text-align: center;
  padding: 0 12px;
}

#menuMain #titleHeader,
#menuMain h1 {
  margin: 0;
  font-family: var(--sp-font);
  font-style: normal !important;
  font-weight: 800 !important;
  font-size: clamp(2.6rem, 9vw, 3.6rem) !important;
  letter-spacing: 0.04em !important;
  color: var(--sp-green) !important;
  text-shadow:
    0 0 8px rgba(57, 255, 20, 0.9),
    0 0 28px rgba(57, 255, 20, 0.45),
    0 0 60px rgba(57, 255, 20, 0.2) !important;
  line-height: 1.05;
  cursor: pointer;
  user-select: none;
}

#menuMain .version-tag {
  position: absolute;
  right: -4px;
  bottom: -2px;
  transform: translateX(40%);
  font-size: 0.58rem !important;
  font-family: var(--sp-mono) !important;
  font-weight: 700;
  font-style: normal !important;
  color: #fff !important;
  background: #c62828 !important;
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.04em;
  box-shadow: 0 0 10px rgba(198, 40, 40, 0.4);
}

/* Main column buttons */
#menuMain > .nav-item.btn-quick,
#menuMain > .nav-item.btn-secondary {
  width: min(320px, 86vw) !important;
  max-width: 320px;
  margin: 8px 0 !important;
  padding: 16px 24px !important;
  border-radius: var(--sp-radius) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

#menuMain .btn-quick {
  background: var(--sp-green) !important;
  color: #041004 !important;
  border: 1px solid var(--sp-green) !important;
  box-shadow: 0 0 24px var(--sp-green-glow), 0 4px 0 #1a8f0a !important;
}
#menuMain .btn-quick:hover,
#menuMain .btn-quick:focus {
  filter: brightness(1.06);
  box-shadow: 0 0 36px rgba(57, 255, 20, 0.55), 0 4px 0 #1a8f0a !important;
  transform: translateY(-1px) !important;
}
#menuMain .btn-quick:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0 16px var(--sp-green-glow) !important;
  background: var(--sp-green) !important;
  color: #041004 !important;
}

#menuMain .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--sp-border-muted) !important;
  color: var(--sp-muted) !important;
  box-shadow: none !important;
}
#menuMain .btn-secondary:hover,
#menuMain .btn-secondary:focus {
  border-color: var(--sp-green) !important;
  color: var(--sp-green) !important;
  background: rgba(57, 255, 20, 0.06) !important;
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.15) !important;
  transform: none !important;
}

/* Social row */
#menuMain .social-buttons-container {
  display: flex;
  gap: 12px;
  width: min(320px, 86vw);
  max-width: 320px;
  margin-top: 18px;
  justify-content: stretch;
}
#menuMain .btn-social {
  flex: 1;
  width: auto !important;
  margin: 0 !important;
  padding: 12px 10px !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em;
  border-radius: var(--sp-radius-sm) !important;
  background: var(--sp-panel) !important;
  border: 1px solid rgba(57, 255, 20, 0.28) !important;
  color: var(--sp-green) !important;
  box-shadow: none !important;
  text-transform: uppercase;
  font-weight: 700;
}
#menuMain .btn-social:hover,
#menuMain .btn-social:focus {
  background: rgba(57, 255, 20, 0.1) !important;
  box-shadow: 0 0 14px var(--sp-green-glow) !important;
  transform: none !important;
}

#menuMain .menu-footer {
  position: absolute;
  bottom: max(14px, env(safe-area-inset-bottom, 0px) + 8px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.68rem;
  color: #3a4a3a;
  font-family: var(--sp-mono);
  line-height: 1.45;
  letter-spacing: 0.02em;
}
#menuMain .menu-footer .footer-ver {
  color: #2e3c2e;
}

/* -------- Secondary menus: same design language -------- */
#menuPause,
#menuSettings,
#menuRecords,
#menuAchievements,
#menuProfile,
#menuTutorial,
#menuEffects,
#menuLeaderboard,
#menuDevTools,
#menuDevAuth,
#menuActivation,
#menuUiLayout {
  background: var(--sp-bg) !important;
  font-family: var(--sp-font);
}

#menuPause h2,
#menuSettings h2,
#menuRecords h2,
#menuAchievements h2,
#menuProfile h2,
#menuTutorial h2,
#menuEffects h2,
#menuLeaderboard h2,
.screen > h2 {
  color: var(--sp-green) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 1.15rem !important;
  text-shadow: 0 0 18px rgba(57, 255, 20, 0.35);
  margin-bottom: 22px !important;
}

/* Shared buttons inside secondary screens */
#menuPause .nav-item,
#menuSettings .nav-item,
#menuRecords .nav-item,
#menuAchievements .nav-item,
#menuProfile .nav-item,
#menuTutorial .nav-item,
#menuEffects .nav-item,
#menuLeaderboard .nav-item,
#menuPause button,
#menuSettings button,
#menuRecords button,
#menuAchievements button,
#menuProfile button,
#menuTutorial button,
#menuEffects button {
  border-radius: var(--sp-radius-sm) !important;
  font-family: var(--sp-font) !important;
  letter-spacing: 0.08em;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

#menuPause .btn-quick,
#menuSettings .btn-quick,
#menuAchievements .btn-quick {
  background: var(--sp-green) !important;
  color: #041004 !important;
  border-color: var(--sp-green) !important;
}

#menuPause .btn-secondary,
#menuSettings .btn-secondary,
#menuRecords .btn-secondary,
#menuAchievements .btn-secondary,
#menuProfile .btn-secondary,
#menuTutorial .btn-secondary,
#menuEffects .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--sp-border-muted) !important;
  color: var(--sp-muted) !important;
  box-shadow: none !important;
}
#menuPause .btn-secondary:hover,
#menuSettings .btn-secondary:hover,
#menuRecords .btn-secondary:hover,
#menuAchievements .btn-secondary:hover,
#menuProfile .btn-secondary:hover {
  border-color: var(--sp-green) !important;
  color: var(--sp-green) !important;
  background: rgba(57, 255, 20, 0.06) !important;
}

/* Settings cards / rows */
#menuSettings #settingsGrid,
#menuSettings .settings-grid {
  background: var(--sp-panel);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 12px 14px;
  box-shadow: 0 0 24px rgba(57, 255, 20, 0.06);
}

#menuSettings .setting-row,
#menuSettings .settings-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 4px;
}

#menuSettings select,
#menuSettings input[type="range"],
#menuRecords select,
#menuProfile input {
  background: var(--sp-panel-2) !important;
  border: 1px solid var(--sp-border-muted) !important;
  color: var(--sp-text) !important;
  border-radius: 8px !important;
}

/* Records / achievements lists */
#menuRecords .record-list,
#menuAchievements .ach-list,
#menuRecords .records-container,
#menuAchievements .achievements-container {
  background: var(--sp-panel);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 10px;
}

#menuRecords .record-item,
#menuAchievements .ach-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 8px;
}

/* Pause panel */
#menuPause {
  backdrop-filter: blur(6px);
}
#menuPause::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(57, 255, 20, 0.04) 0%, transparent 60%);
  pointer-events: none;
}

/* Profile widget on main */
.profile-widget {
  border-radius: 999px !important;
  border: 1px solid var(--sp-border-muted) !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(8px);
}
.profile-widget:hover {
  border-color: var(--sp-green) !important;
}

/* Death / report screens if present */
#menuDeath,
#menuReport,
.screen.report {
  background: var(--sp-bg) !important;
}

@media (max-height: 640px) {
  #menuMain .title-block { margin-bottom: 20px; }
  #menuMain #titleHeader { font-size: clamp(2.1rem, 8vw, 2.8rem) !important; }
  #menuMain > .nav-item.btn-quick,
  #menuMain > .nav-item.btn-secondary {
    padding: 12px 20px !important;
    margin: 5px 0 !important;
  }
  #menuMain .social-buttons-container { margin-top: 12px; }
}



/* ============================================================
   Main Menu — Figma node 6-5 exact layout (0.6.5.2)
   ============================================================ */

.mm-main.screen {
  background: #000 !important;
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 22px max(72px, env(safe-area-inset-bottom, 0px) + 56px);
  box-sizing: border-box;
}
.mm-main.screen.hidden { display: none !important; }

/* Top-left profile */
.mm-profile.profile-widget {
  position: fixed !important;
  top: max(18px, env(safe-area-inset-top, 0px) + 14px) !important;
  left: max(16px, env(safe-area-inset-left, 0px) + 12px) !important;
  right: auto !important;
  z-index: 80 !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 6px 12px 6px 6px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  cursor: pointer;
}
.mm-profile.hidden { display: none !important; }
.mm-profile .pw-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: none !important;
}
.mm-profile .pw-meta { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.mm-profile .pw-name-row { display: flex; align-items: center; gap: 6px; }
.mm-profile .pw-name {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-profile .pw-online {
  width: 7px; height: 7px; border-radius: 50%;
  background: #39ff14;
  box-shadow: 0 0 8px rgba(57,255,20,.8);
  display: inline-block;
}
.mm-profile .pw-level {
  font-size: 0.62rem;
  color: #6a6a6a;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
}

/* Top-right XP (placeholder) */
.mm-xp {
  position: fixed !important;
  top: max(20px, env(safe-area-inset-top, 0px) + 16px) !important;
  right: max(16px, env(safe-area-inset-right, 0px) + 12px) !important;
  z-index: 80 !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px !important;
  width: auto !important;
  margin: 0 !important;
  background: #141414 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 999px !important;
  color: #cfcfcf !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: none !important;
  cursor: default;
  pointer-events: auto;
  text-transform: none !important;
}
.mm-xp-icon { color: #39ff14; font-size: 0.85rem; }
.mm-xp:hover, .mm-xp:focus {
  transform: none !important;
  box-shadow: none !important;
  border-color: #3a3a3a !important;
}

/* Center stack */
.mm-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(340px, 92vw);
  margin-top: 24px;
}

.mm-logo-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(57, 255, 20, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.12);
}

.mm-title-block {
  position: relative;
  margin: 0 0 28px !important;
  text-align: center;
  padding: 0 !important;
}

.mm-title,
#menuMain .mm-title {
  margin: 0 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: clamp(2rem, 8.5vw, 2.55rem) !important;
  letter-spacing: 0.22em !important;
  color: #ffffff !important;
  text-shadow: none !important;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.mm-ver,
#menuMain .mm-ver {
  position: static !important;
  display: inline-block;
  margin-top: 12px !important;
  transform: none !important;
  right: auto !important;
  bottom: auto !important;
  background: transparent !important;
  border: 1px solid rgba(57, 255, 20, 0.55) !important;
  color: #39ff14 !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  box-shadow: none !important;
}

.mm-btn-play,
#menuMain .mm-btn-play {
  width: 100% !important;
  max-width: 340px !important;
  margin: 8px 0 14px !important;
  padding: 18px 24px !important;
  border-radius: 999px !important;
  background: #39ff14 !important;
  color: #0a0a0a !important;
  border: none !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em;
  box-shadow: 0 0 28px rgba(57, 255, 20, 0.35) !important;
  text-transform: uppercase;
}
#menuMain .mm-btn-play:hover,
#menuMain .mm-btn-play:focus {
  filter: brightness(1.05);
  transform: translateY(-1px) !important;
  box-shadow: 0 0 36px rgba(57, 255, 20, 0.5) !important;
}
#menuMain .mm-btn-play:active {
  transform: translateY(1px) !important;
  background: #39ff14 !important;
  color: #0a0a0a !important;
}

.mm-btn,
#menuMain .mm-btn {
  width: 100% !important;
  max-width: 340px !important;
  margin: 7px 0 !important;
  padding: 16px 24px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1.5px solid #2c2c2c !important;
  color: #d0d0d0 !important;
  font-size: 0.92rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.14em;
  box-shadow: none !important;
  text-transform: uppercase;
}
#menuMain .mm-btn:hover,
#menuMain .mm-btn:focus {
  border-color: #39ff14 !important;
  color: #39ff14 !important;
  background: rgba(57, 255, 20, 0.05) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Bottom bar: tutorial + telegram */
.mm-bottom-bar {
  position: absolute;
  left: max(16px, env(safe-area-inset-left, 0px) + 10px);
  right: max(16px, env(safe-area-inset-right, 0px) + 10px);
  bottom: max(48px, env(safe-area-inset-bottom, 0px) + 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.mm-bottom-bar > * { pointer-events: auto; }

.mm-btn-tutorial {
  width: auto !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: #141414 !important;
  border: 1px solid #2a2a2a !important;
  color: #bdbdbd !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.1em;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}
.mm-btn-tutorial .mm-ico { opacity: 0.7; font-size: 0.85rem; }
.mm-btn-tutorial:hover,
.mm-btn-tutorial:focus {
  border-color: #39ff14 !important;
  color: #39ff14 !important;
  transform: none !important;
  box-shadow: none !important;
}

.mm-btn-tg {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #141414 !important;
  border: 1px solid #2a2a2a !important;
  color: #cfcfcf !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.mm-btn-tg:hover,
.mm-btn-tg:focus {
  border-color: #39ff14 !important;
  color: #39ff14 !important;
  transform: none !important;
  box-shadow: none !important;
}

.mm-footer {
  position: absolute !important;
  left: 0; right: 0;
  bottom: max(12px, env(safe-area-inset-bottom, 0px) + 8px) !important;
  text-align: center;
  font-size: 0.62rem !important;
  color: #3d3d3d !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

/* Hide old youtube/social if any leftover */
#menuMain .social-buttons-container { display: none !important; }

/* Secondary menus keep rounded system from 0.6.5.2 */
#menuPause .nav-item,
#menuSettings .nav-item,
#menuRecords .nav-item,
#menuAchievements .nav-item {
  border-radius: 999px !important;
}

@media (max-height: 700px) {
  .mm-logo-mark { width: 48px; height: 48px; margin-bottom: 12px; }
  .mm-title-block { margin-bottom: 18px !important; }
  .mm-btn-play { padding: 14px 20px !important; margin-bottom: 10px !important; }
  .mm-btn { padding: 12px 20px !important; margin: 5px 0 !important; }
  .mm-bottom-bar { bottom: max(40px, env(safe-area-inset-bottom, 0px) + 28px); }
}



/* ============================================================
   Main Menu responsive layout fix (0.6.5.2)
   Flex column: center scrolls if needed, bottom bar stays on screen
   ============================================================ */

#menuMain.mm-main.screen,
.mm-main.screen {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background: #000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  padding:
    max(8px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px) + 8px)
    max(8px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px) + 8px) !important;
  z-index: 200;
}

#menuMain.mm-main.screen.hidden,
.mm-main.screen.hidden {
  display: none !important;
}

/* Fixed chips stay in corners of viewport */
.mm-profile.profile-widget {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top, 0px) + 10px) !important;
  left: max(12px, env(safe-area-inset-left, 0px) + 10px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 220 !important;
}
.mm-xp {
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top, 0px) + 12px) !important;
  right: max(12px, env(safe-area-inset-right, 0px) + 10px) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 220 !important;
}

/* Center: takes remaining space, vertically centers, can scroll on short screens */
#menuMain .mm-center,
.mm-center {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 400px;
  margin: 0 auto !important;
  padding: clamp(48px, 12vh, 72px) 8px clamp(8px, 2vh, 16px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box !important;
}

.mm-logo-mark {
  width: clamp(40px, 8vh, 56px) !important;
  height: clamp(40px, 8vh, 56px) !important;
  margin-bottom: clamp(8px, 1.5vh, 16px) !important;
  flex-shrink: 0;
}

#menuMain .mm-title-block,
.mm-title-block {
  margin: 0 0 clamp(12px, 2.5vh, 24px) !important;
  flex-shrink: 0;
}

#menuMain .mm-title,
.mm-title {
  font-size: clamp(1.6rem, 5.5vh, 2.55rem) !important;
  letter-spacing: 0.18em !important;
}

#menuMain .mm-ver,
.mm-ver {
  margin-top: clamp(6px, 1vh, 12px) !important;
}

#menuMain .mm-btn-play,
.mm-btn-play {
  width: min(100%, 340px) !important;
  margin: clamp(4px, 1vh, 10px) 0 clamp(8px, 1.5vh, 14px) !important;
  padding: clamp(12px, 2vh, 18px) 20px !important;
  flex-shrink: 0;
}

#menuMain .mm-btn,
.mm-btn {
  width: min(100%, 340px) !important;
  margin: clamp(3px, 0.8vh, 7px) 0 !important;
  padding: clamp(10px, 1.6vh, 16px) 20px !important;
  flex-shrink: 0;
}

/* Bottom bar in document flow — always visible */
#menuMain .mm-bottom-bar,
.mm-bottom-bar {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 400px;
  margin: 0 auto !important;
  padding: 8px 4px 4px !important;
  box-sizing: border-box;
  pointer-events: auto;
}

#menuMain .mm-footer,
.mm-footer {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 4px 8px 6px !important;
  text-align: center;
}

/* Short phones */
@media (max-height: 640px) {
  #menuMain .mm-center,
  .mm-center {
    justify-content: flex-start !important;
    padding-top: 56px !important;
  }
  .mm-logo-mark { width: 36px !important; height: 36px !important; }
  #menuMain .mm-title { font-size: 1.45rem !important; }
}

/* Desktop wide */
@media (min-width: 900px) and (min-height: 700px) {
  #menuMain .mm-center,
  .mm-center { max-width: 380px; }
}



/* ============================================================
   Main Menu visual match Figma (0.6.5.2)
   Font: Outfit · no glow · icons from assets · softer radius
   ============================================================ */

:root {
  --mm-font: "Outfit", system-ui, -apple-system, sans-serif;
  --mm-green: #39ff14;
  --mm-text: #ffffff;
  --mm-muted: #8e8e9f;
  --mm-border: #2a2a2e;
  --mm-chip-bg: #141416;
  --mm-radius: 16px;
}

body, .screen, .nav-item, button, input, select {
  font-family: var(--mm-font) !important;
}

#menuMain.mm-main.screen,
.mm-main.screen {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  background: #050505 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  padding:
    max(8px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px) + 8px)
    max(8px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px) + 8px) !important;
  font-family: var(--mm-font) !important;
}

#menuMain.mm-main.screen.hidden { display: none !important; }

/* Profile chip */
.mm-profile.profile-widget {
  position: fixed !important;
  top: max(16px, env(safe-area-inset-top, 0px) + 12px, var(--tg-content-safe-top, 0px) + 10px) !important;
  left: max(14px, env(safe-area-inset-left, 0px) + 10px) !important;
  z-index: 220 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px !important;
  gap: 10px;
}
.mm-profile .pw-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #1a1a1c !important;
  border: 1px solid #2c2c30 !important;
  box-shadow: none !important;
}
.mm-profile .pw-name {
  font-family: var(--mm-font) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  color: #fff !important;
  letter-spacing: 0.04em;
  text-shadow: none !important;
}
.mm-profile .pw-online {
  width: 6px; height: 6px;
  background: var(--mm-green);
  box-shadow: none !important;
}
.mm-profile .pw-level {
  font-family: var(--mm-font) !important;
  font-size: 0.6rem;
  color: var(--mm-muted);
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* XP chip — no glow */
.mm-xp {
  position: fixed !important;
  top: max(18px, env(safe-area-inset-top, 0px) + 14px, var(--tg-content-safe-top, 0px) + 10px) !important;
  right: max(14px, env(safe-area-inset-right, 0px) + 10px) !important;
  z-index: 220 !important;
  background: var(--mm-chip-bg) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #c8c8d0 !important;
  font-family: var(--mm-font) !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
  padding: 8px 14px !important;
  text-transform: none !important;
}
.mm-xp:hover, .mm-xp:focus {
  box-shadow: none !important;
  transform: none !important;
}
.mm-xp-icon {
  color: var(--mm-green);
  filter: none;
  text-shadow: none;
}

/* Center column */
#menuMain .mm-center {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 360px;
  margin: 0 auto !important;
  padding: clamp(52px, 11vh, 70px) 8px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  font-family: var(--mm-font) !important;
}

.mm-logo-mark {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(57, 255, 20, 0.55) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px !important;
  box-shadow: none !important;
  background: transparent !important;
}
.mm-logo-svg { display: block; }

/* Title: Outfit, white, NO glow */
#menuMain .mm-title-block {
  margin: 0 0 22px !important;
  text-align: center;
}
#menuMain .mm-title,
#menuMain h1.mm-title {
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: clamp(1.85rem, 6vw, 2.35rem) !important;
  letter-spacing: 0.2em !important;
  color: #ffffff !important;
  text-shadow: none !important;
  filter: none !important;
  margin: 0 !important;
  text-transform: uppercase;
}

/* Version pill — outline green, no fill glow */
#menuMain .mm-ver,
#menuMain .version-tag.mm-ver {
  position: static !important;
  display: inline-block !important;
  margin-top: 10px !important;
  transform: none !important;
  background: transparent !important;
  border: 1px solid var(--mm-green) !important;
  color: var(--mm-green) !important;
  border-radius: 999px !important;
  padding: 3px 11px !important;
  font-family: var(--mm-font) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Play — solid green, moderate radius, NO glow */
#menuMain .mm-btn-play {
  width: min(100%, 320px) !important;
  margin: 6px 0 12px !important;
  padding: 15px 22px !important;
  border-radius: var(--mm-radius) !important;
  background: var(--mm-green) !important;
  color: #0a0a0a !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: var(--mm-font) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#menuMain .mm-btn-play:hover,
#menuMain .mm-btn-play:focus,
#menuMain .mm-btn-play:active {
  box-shadow: none !important;
  filter: brightness(1.04);
  background: var(--mm-green) !important;
  color: #0a0a0a !important;
  transform: none !important;
}

/* Secondary buttons — outline, same radius, no glow */
#menuMain .mm-btn {
  width: min(100%, 320px) !important;
  margin: 6px 0 !important;
  padding: 14px 22px !important;
  border-radius: var(--mm-radius) !important;
  background: transparent !important;
  border: 1.5px solid var(--mm-border) !important;
  color: #e4e4ea !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: var(--mm-font) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#menuMain .mm-btn:hover,
#menuMain .mm-btn:focus {
  border-color: #3a3a42 !important;
  color: #fff !important;
  background: rgba(255,255,255,0.03) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Bottom bar */
#menuMain .mm-bottom-bar {
  position: relative !important;
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 360px;
  margin: 4px auto 0 !important;
  padding: 8px 2px !important;
}
#menuMain .mm-btn-tutorial {
  width: auto !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: var(--mm-chip-bg) !important;
  border: 1px solid var(--mm-border) !important;
  color: var(--mm-muted) !important;
  box-shadow: none !important;
  font-family: var(--mm-font) !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}
#menuMain .mm-btn-tutorial:hover,
#menuMain .mm-btn-tutorial:focus {
  box-shadow: none !important;
  transform: none !important;
  color: #c8c8d0 !important;
}
#menuMain .mm-btn-tg {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--mm-chip-bg) !important;
  border: 1px solid var(--mm-border) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #fff !important;
}
#menuMain .mm-btn-tg:hover,
#menuMain .mm-btn-tg:focus {
  box-shadow: none !important;
  transform: none !important;
}
.mm-ico-img {
  display: block;
  pointer-events: none;
}
/* send.svg is white stroke — keep as is */
.mm-ico-send { opacity: 0.95; }

#menuMain .mm-footer {
  position: relative !important;
  flex: 0 0 auto !important;
  padding: 6px 8px 8px !important;
  margin: 0 !important;
  font-family: var(--mm-font) !important;
  font-size: 0.62rem !important;
  color: #4a4a52 !important;
  text-align: center;
  letter-spacing: 0.02em;
}

/* Secondary menus also Outfit, less glow */
#menuPause, #menuSettings, #menuRecords, #menuAchievements,
#menuProfile, #menuTutorial, #menuEffects {
  font-family: var(--mm-font) !important;
}
#menuPause h2, #menuSettings h2, #menuRecords h2, #menuAchievements h2,
#menuProfile h2, #menuTutorial h2 {
  font-family: var(--mm-font) !important;
  text-shadow: none !important;
}
#menuPause .nav-item, #menuSettings .nav-item,
#menuRecords .nav-item, #menuAchievements .nav-item,
#menuProfile .nav-item, #menuTutorial .nav-item {
  font-family: var(--mm-font) !important;
  border-radius: var(--mm-radius) !important;
  box-shadow: none !important;
}

@media (max-height: 640px) {
  #menuMain .mm-center { justify-content: flex-start !important; padding-top: 56px !important; }
  .mm-logo-mark { width: 40px !important; height: 40px !important; }
  #menuMain .mm-title { font-size: 1.5rem !important; }
}



/* ============================================================
   FONT LOCK — Outfit everywhere in UI (0.6.5.2)
   ============================================================ */
html, body,
button, input, select, textarea,
.screen, .nav-item, .btn-quick, .btn-secondary, .btn-social,
.mm-title, .mm-btn, .mm-btn-play, .mm-btn-tutorial, .mm-btn-tg,
.mm-xp, .mm-footer, .menu-footer, .profile-widget, .pw-name, .pw-level,
h1, h2, h3, label, .stat-row, .setting-row {
  font-family: "Outfit", system-ui, -apple-system, sans-serif !important;
}
#menuMain h1,
#menuMain .mm-title,
#titleHeader {
  font-family: "Outfit", system-ui, sans-serif !important;
  font-weight: 700 !important;
}


/* Logo vector (Frame.svg) — no circle mark, no text title */
.mm-logo-mark { display: none !important; }
#menuMain .mm-title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin: 0 0 22px !important;
  padding: 0 !important;
}
#menuMain .mm-logo-img {
  display: block;
  width: min(285px, 78vw);
  height: auto;
  max-height: 58px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: none;
}
#menuMain .mm-title { display: none !important; }

#xpWidget.hidden, .mm-xp.hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; }


/* ========== PC main menu (Figma desktop, black bg) ========== */
.mm-systems {
  position: fixed;
  top: max(18px, env(safe-area-inset-top, 0px) + 14px);
  left: max(16px, env(safe-area-inset-left, 0px) + 12px);
  z-index: 220;
  display: none; /* mobile: hide; PC shows below */
  align-items: center;
  gap: 8px;
  font-family: var(--mm-font), "Outfit", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(200, 200, 210, 0.85);
  pointer-events: none;
  user-select: none;
}
.mm-systems.hidden { display: none !important; }
.mm-systems-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #39ff14;
  box-shadow: 0 0 6px rgba(57, 255, 20, 0.55);
  flex-shrink: 0;
}
.mm-systems-label { text-transform: uppercase; }

@media (min-width: 900px) {
  /* Top-left status */
  .mm-systems:not(.hidden) {
    display: flex !important;
  }

  /* Profile → top-right cluster (left of XP), as in Figma PC */
  .mm-profile.profile-widget {
    left: auto !important;
    right: max(168px, env(safe-area-inset-right, 0px) + 158px) !important;
    top: max(16px, env(safe-area-inset-top, 0px) + 12px) !important;
  }
  .mm-xp {
    right: max(20px, env(safe-area-inset-right, 0px) + 16px) !important;
    top: max(16px, env(safe-area-inset-top, 0px) + 12px) !important;
    font-size: 0.8rem !important;
    padding: 9px 16px !important;
  }

  /* Center column: more air, desktop proportions */
  #menuMain .mm-center,
  .mm-center {
    max-width: 420px !important;
    padding: clamp(48px, 10vh, 88px) 12px 12px !important;
    gap: 0 !important;
  }
  #menuMain .mm-logo-img {
    width: min(320px, 42vw) !important;
    max-height: 64px !important;
  }
  #menuMain .mm-ver,
  #menuMain .version-tag.mm-ver {
    margin-top: 14px !important;
    margin-bottom: 28px !important;
    font-size: 0.72rem !important;
    padding: 4px 12px !important;
  }

  #menuMain .mm-btn-play {
    width: 100% !important;
    max-width: 360px !important;
    padding: 16px 24px !important;
    border-radius: 14px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    margin: 0 0 14px !important;
    background: #39ff14 !important;
    color: #041208 !important;
    border: none !important;
  }
  #menuMain .mm-btn-play:hover {
    filter: brightness(1.06);
  }

  #menuMain .mm-btn {
    width: 100% !important;
    max-width: 360px !important;
    padding: 14px 24px !important;
    border-radius: 14px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    margin: 0 0 10px !important;
    background: transparent !important;
    color: #c8c8d0 !important;
    border: 1px solid #2a2a2e !important;
  }
  #menuMain .mm-btn:hover {
    border-color: #3a3a42 !important;
    color: #fff !important;
    background: rgba(255,255,255,0.03) !important;
  }

  /* Tutorial + TG centered under stack */
  #menuMain .mm-bottom-bar {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 8px auto 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 12px 8px !important;
  }
  #menuMain .mm-btn-tutorial {
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
  }
  #menuMain .mm-btn-tg {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  #menuMain .mm-footer,
  #menuMain .menu-footer {
    margin-top: auto !important;
    padding: 16px 12px 20px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
    color: rgba(150,150,160,0.75) !important;
    text-align: center !important;
  }

  /* Black void — no decorative bg */
  #menuMain.mm-main.screen {
    background: #000 !important;
  }
}

/* Very wide desktops */
@media (min-width: 1200px) {
  #menuMain .mm-center { max-width: 440px !important; }
  #menuMain .mm-logo-img { width: min(340px, 36vw) !important; }
}

/* Audio settings — aligned rows */
#menuAudio.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  gap: 12px;
}
#menuAudio.hidden { display: none !important; }
#menuAudio h2 {
  margin: 0 0 12px;
  letter-spacing: 0.2em;
  font-weight: 600;
}
#menuAudio .audio-grid {
  width: min(340px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 auto;
}
#menuAudio .setting-row {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
}
#menuAudio .setting-row .nav-item {
  width: 100%;
  max-width: 340px;
}
#menuAudio .audio-row {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid #2a2a2e;
  border-radius: 12px;
  box-sizing: border-box;
}
#menuAudio .audio-row .joy-size-label {
  width: 100%;
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: #a0a0aa;
}
#menuAudio .audio-row .joy-range {
  width: 100% !important;
  max-width: none !important;
  margin: 0;
}
#menuAudio .audio-hint {
  opacity: 0.5;
  font-size: 0.72rem;
  line-height: 1.35;
  margin: 4px 0 8px;
  text-align: center;
  max-width: 340px;
}
#menuAudio .btn-back-small {
  margin-top: 8px;
  min-width: 160px;
}

.mm-systems.is-online .mm-systems-dot {
  background: #39ff14;
  box-shadow: 0 0 8px #39ff14;
}
.mm-systems.is-offline .mm-systems-dot {
  background: #ff3333;
  box-shadow: 0 0 8px #ff3333;
}
.mm-systems.is-offline .mm-systems-label {
  color: #ff6666;
}
@media (max-width: 700px) {
  .mm-systems-label { display: none !important; }
  .mm-systems {
    padding: 6px !important;
    min-width: 0 !important;
  }
  .mm-systems-dot {
    width: 10px !important;
    height: 10px !important;
  }
}

/* mobile connection beacon */
@media (max-width: 700px) {
  #systemsStatus.mm-systems {
    display: flex !important;
    position: fixed;
    top: max(8px, env(safe-area-inset-top, 0px) + 6px, var(--tg-content-safe-top, 0px) + 6px);
    left: max(8px, env(safe-area-inset-left, 0px) + 6px);
    z-index: 10050;
    padding: 6px;
    background: rgba(0,0,0,0.35);
    border-radius: 999px;
    pointer-events: none;
  }
  #systemsStatus.mm-systems.hidden {
    display: flex !important; /* still show beacon */
    opacity: 0.95;
  }
  #systemsStatus .mm-systems-label { display: none !important; }
  #systemsStatus .mm-systems-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50%;
    display: block !important;
    box-shadow: 0 0 4px rgba(57, 255, 20, 0.6);
  }
  #systemsStatus.is-online .mm-systems-dot {
    background: #39ff14;
    box-shadow: 0 0 4px rgba(57, 255, 20, 0.6);
  }
  #systemsStatus.is-offline .mm-systems-dot {
    background: #ff3333;
    box-shadow: 0 0 4px rgba(255, 51, 51, 0.6);
  }
}

/* ============================================================
   0.6.5.2 — Статичные меню: экран целиком никогда не листается.
   Заголовок и кнопки (назад/играть/сохранить и т.п.) всегда
   видны и никуда не уезжают. Если содержимое не помещается —
   прокручивается ТОЛЬКО ОДИН внутренний блок (по образцу списка
   достижений), а не вся страница. Правила ниже намеренно стоят
   в самом конце файла, чтобы перебить более старые/конфликтующие
   объявления overflow для отдельных экранов (например #menuSettings).
   ============================================================ */

.screen {
  overflow: hidden !important;
}

#menuSettings,
#menuSettings #settingsGrid {
  overflow-y: hidden !important;
}

/* Единственный прокручиваемый блок в каждом экране */
#menuSettings #settingsGrid,
#menuAudio #audioGrid,
#menuEffects #effectsGrid,
#menuUiLayout .ui-layout-panel,
#menuDevTools .dev-grid,
#menuRecords .lb-container,
#menuTutorial .tutorial-box,
#menuAchievements .ach-list,
#menuReport .report-stats,
#menuProfile .menu-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Заголовок, служебный блок разработчика и кнопки — никогда не сжимаются
   и не уезжают за пределы экрана */
.screen > h2,
.screen > .nav-item,
.screen > button,
#menuSettings > #devContainer,
#menuUiLayout > .ui-orient-toggle,
#menuUiLayout > .ui-layout-actions {
  flex: 0 0 auto;
}

/* Безопасная сетка на главном меню: если когда-либо не влезет —
   прокручивается сама область с кнопками, а не вся страница.
   Без flex-grow, чтобы не портить обычное центрирование, когда
   всё и так помещается на экране. */
#menuMain .mm-center {
  flex-shrink: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   0.6.5.2 — Persistent sidebar + Hangar / Shop (mobile + desktop)
   Appended last on purpose. See earlier note: every selector below
   that needs to differ from the legacy `button, .nav-item {...}`
   default is written at matching/higher specificity AND placed
   after it in the file, so it wins through normal cascade order —
   no !important needed, nothing fights `.mm-btn-play` (ИГРАТЬ).
   ============================================================ */

/* ── Persistent sidebar (lives outside any single .screen) ──── */
#mm2Sidebar { display: none; }

#menuMain.mm-main.screen.mm2-shell {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#menuMain.mm-main.screen.mm2-shell.hidden { display: none !important; }

#mm2BottomNav { display: none; }

#menuMain.mm2-shell .mm2-main-col {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  padding: max(14px, env(safe-area-inset-top, 0px) + 10px) 16px
           max(70px, env(safe-area-inset-bottom, 0px) + 64px);
}
#menuMain.mm2-shell .mm-footer {
  position: static !important;
  order: 6;
  padding: 6px 0 max(70px, env(safe-area-inset-bottom, 0px) + 64px);
}

/* Topbar: desktop-only row. On mobile only the tutorial button shows,
   as a full-width row (CONNECTED/xp/version are redundant with the
   fixed mobile profile+xp chips, so stay hidden below 900px). */
.mm2-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px auto 0;
  width: auto;
  order: 2;
  flex: 0 0 auto;
}
.mm2-connected,
.mm2-ver-chip { display: none; }
.mm2-xp-chip { display: none; }
.mm2-tutorial-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--mm-chip-bg, #141416);
  border: 1px solid var(--mm-border, #2a2a2e);
  border-radius: 999px;
  color: #c8c8d0;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 10px 16px;
  width: auto;
  margin: 0;
  box-shadow: none;
  text-transform: none;
  white-space: nowrap;
}
.mm2-tutorial-btn:focus { box-shadow: none; transform: none; }
.mm2-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.mm2-hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  gap: 10px;
  order: 1;
}

.mm2-play-btn { width: 100%; margin: 4px 0 2px; }

/* Mode tabs: only "Соревновательный" is live. Прогресс/История are
   locked — visually a tab, functionally a "coming soon" trigger. */
.mm2-modes {
  display: flex;
  gap: 8px;
  width: 100%;
}
.mm2-mode-tab {
  flex: 1 1 0;
  white-space: nowrap;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid var(--mm-border, #2a2a2e);
  background: transparent;
  color: #6c6c76;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  width: auto;
  margin: 0;
  box-shadow: none;
  text-transform: none;
}
.mm2-mode-tab:focus { box-shadow: none; transform: none; }
.mm2-mode-tab.active {
  border-color: var(--mm-green, #39ff14);
  color: var(--mm-green, #39ff14);
  background: rgba(57, 255, 20, 0.08);
}
.mm2-mode-tab.locked { cursor: pointer; }

.mm2-panel { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.mm2-panel.hidden { display: none !important; }

.mm2-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.mm2-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #101012;
  border: 1px solid var(--mm-border, #2a2a2e);
  border-radius: var(--mm-radius, 16px);
  padding: 14px 16px;
  text-align: left;
  margin: 0;
  box-shadow: none;
  text-transform: none;
}
.mm2-card:focus { box-shadow: none; transform: none; }
.mm2-card-ico { font-size: 1.3rem; line-height: 1; }
.mm2-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm2-card-title { font-size: 0.85rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
.mm2-card-sub { font-size: 0.62rem; color: var(--mm-green, #39ff14); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm2-card-chev { color: #55555c; font-size: 1.1rem; }

/* ── Coming-soon toast ─────────────────────────────────────── */
.coming-soon-toast {
  position: fixed;
  left: 50%;
  bottom: max(90px, env(safe-area-inset-bottom, 0px) + 84px);
  transform: translateX(-50%) translateY(10px);
  background: #16161a;
  border: 1px solid var(--mm-green, #39ff14);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  z-index: 500;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 86vw;
  text-align: center;
  pointer-events: none;
  width: auto;
  margin: 0;
  box-shadow: none;
  text-transform: none;
}
.coming-soon-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.coming-soon-toast.hidden { display: none !important; }

/* ── Bottom nav (mobile) — persistent, shown across every dashboard
   screen (main/hangar/shop/records/achievements/settings/profile),
   toggled via .visible + active section by hangarShopUI.js, mirroring
   the desktop sidebar. Fixed to the viewport so it never re-renders
   or shifts when the screen underneath it changes. ───────────────── */
@media (max-width: 899.98px) {
  #mm2BottomNav.visible {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 300;
    align-items: stretch;
    justify-content: space-between;
    gap: 2px;
    padding: 6px max(6px, env(safe-area-inset-left, 0px))
             max(6px, env(safe-area-inset-bottom, 0px))
             max(6px, env(safe-area-inset-right, 0px));
    border-top: 1px solid var(--mm-border, #2a2a2e);
    background: #0a0a0c;
  }
}
.mm2-bnav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 2px;
  background: transparent;
  color: #6c6c76;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 10px;
  border: none;
  width: auto;
  margin: 0;
  box-shadow: none;
  text-transform: none;
}
.mm2-bnav-item:focus { box-shadow: none; transform: none; }
.mm2-bnav-ico {
  font-size: 1.5rem;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm2-bnav-ico img { width: 22px; height: 22px; display: block; }
.mm2-bnav-ico img.mm2-ico-on { display: none !important; }
.mm2-bnav-item.active .mm2-bnav-ico img.mm2-ico-off { display: none !important; }
.mm2-bnav-item.active .mm2-bnav-ico img.mm2-ico-on { display: block !important; }
.mm2-bnav-item.active { color: var(--mm-green, #39ff14); }

/* ── Hangar / Shop sub-screens (shared) ────────────────────── */
.mm2-sub-screen.screen {
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: max(16px, env(safe-area-inset-top, 0px) + 12px) 14px max(16px, env(safe-area-inset-bottom, 0px) + 12px) !important;
}
@media (max-width: 899.98px) {
  /* Clear the fixed persistent bottom nav on every screen it floats
     over. #id selectors here safely out-rank the base .screen/.mm2-sub-screen
     padding rules regardless of !important, since ID beats any class count. */
  .mm2-sub-screen.screen {
    padding-bottom: max(80px, env(safe-area-inset-bottom, 0px) + 74px) !important;
  }
  #menuRecords.screen,
  #menuAchievements.screen,
  #menuSettings.screen,
  #menuProfile.screen {
    padding-bottom: max(80px, env(safe-area-inset-bottom, 0px) + 74px) !important;
  }
}
.mm2-sub-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 12px;
}
.mm2-sub-title { flex: 1 1 auto; text-align: center; font-size: 1rem; letter-spacing: 0.06em; color: #fff; }
.mm2-sub-back {
  font-size: 0.68rem;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--mm-border, #2a2a2e);
  color: #c8c8d0;
  background: #141416;
  width: auto;
  margin: 0;
  box-shadow: none;
  text-transform: none;
}
.mm2-sub-back:focus { box-shadow: none; transform: none; }
.mm2-sub-xp {
  display: inline-flex;
  background: var(--mm-chip-bg, #141416);
  border: 1px solid var(--mm-border, #2a2a2e);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.68rem;
  color: #c8c8d0;
  align-items: center;
  gap: 6px;
}
.mm2-sub-scroll {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Hangar ─────────────────────────────────────────────────── */
.hangar-ship-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.hangar-ship-card {
  background: #101012;
  border: 1px solid var(--mm-border, #2a2a2e);
  border-radius: 16px;
  padding: 14px;
}
.hangar-ship-card.selected { border-color: var(--mm-green, #39ff14); }
.hangar-ship-card.locked { opacity: 0.82; }
.hangar-ship-head { display: flex; align-items: center; gap: 12px; }
.hangar-ship-ico { font-size: 1.6rem; }
.hangar-ship-headinfo { flex: 1 1 auto; min-width: 0; }
.hangar-ship-title { font-size: 0.9rem; font-weight: 700; color: #fff; }
.hangar-ship-desc { font-size: 0.65rem; color: #8e8e9f; margin-top: 2px; }
.hangar-selected-tag {
  font-size: 0.6rem; font-weight: 700; color: var(--mm-green, #39ff14);
  border: 1px solid var(--mm-green, #39ff14); border-radius: 999px; padding: 6px 10px;
  white-space: nowrap;
}
.hangar-select-btn, .hangar-buy-btn {
  font-size: 0.62rem; font-weight: 700; padding: 8px 12px; border-radius: 999px;
  background: var(--mm-green, #39ff14); color: #06120a; white-space: nowrap;
  border: none; width: auto; margin: 0; box-shadow: none; text-transform: none;
}
.hangar-select-btn:focus, .hangar-buy-btn:focus { box-shadow: none; transform: none; }
.hangar-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hangar-stat {
  font-size: 0.6rem; color: #c8c8d0; background: #1a1a1e; border-radius: 999px; padding: 5px 10px;
}
.hangar-upg-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.hangar-upg-row {
  display: flex; align-items: center; justify-content: space-between;
  background: #16161a; border-radius: 10px; padding: 8px 10px;
}
.hangar-upg-info { display: flex; align-items: center; gap: 6px; font-size: 0.66rem; color: #c8c8d0; }
.hangar-upg-lvl { color: #7a7a84; font-size: 0.58rem; }
.hangar-upg-buy {
  font-size: 0.6rem; font-weight: 700; padding: 6px 10px; border-radius: 999px;
  background: rgba(57, 255, 20, 0.12); color: var(--mm-green, #39ff14); white-space: nowrap;
  border: none; width: auto; margin: 0; box-shadow: none; text-transform: none;
}
.hangar-upg-buy:focus { box-shadow: none; transform: none; }
.hangar-upg-max { font-size: 0.58rem; color: #66666f; font-weight: 700; letter-spacing: 0.04em; }

/* ── Shop ───────────────────────────────────────────────────── */
.shop-sections { display: flex; flex-direction: column; gap: 14px; padding-bottom: 12px; }
.shop-section {
  background: #101012; border: 1px solid var(--mm-border, #2a2a2e); border-radius: 16px; padding: 14px;
}
.shop-section-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.shop-section-ico { font-size: 1.1rem; }
.shop-section-title { font-size: 0.82rem; font-weight: 700; color: #fff; }
.shop-section-effect { font-size: 0.66rem; color: var(--mm-green, #39ff14); }
.shop-active-badge {
  margin-left: auto;
  font-size: 0.58rem; color: #06120a; background: var(--mm-green, #39ff14);
  border-radius: 999px; padding: 4px 9px; font-weight: 700;
}
.shop-item-row { display: flex; flex-direction: column; gap: 8px; }
.shop-item-btn {
  display: flex; align-items: center; justify-content: space-between;
  background: #16161a; border: 1px solid var(--mm-border, #2a2a2e);
  border-radius: 10px; padding: 10px 12px;
  width: auto; margin: 0; box-shadow: none; text-transform: none;
}
.shop-item-btn:focus { box-shadow: none; transform: none; }
.shop-item-dur { font-size: 0.68rem; color: #c8c8d0; }
.shop-item-price { font-size: 0.68rem; font-weight: 700; color: var(--mm-green, #39ff14); }

.btn-disabled, button.btn-disabled { opacity: 0.4 !important; pointer-events: none; }

/* ── Desktop layout: persistent fixed sidebar + reflowed hero ── */
@media (min-width: 900px) {
  #mm2Sidebar.visible {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    padding: 20px 14px;
    border-right: 1px solid var(--mm-border, #2a2a2e);
    background: #0a0a0c;
    z-index: 300;
  }

  /* Reserve the sidebar's width on every screen it can appear over.
     Harmless when a given screen is hidden (display:none wins anyway). */
  #menuMain.screen,
  #menuHangar.screen,
  #menuShop.screen,
  #menuRecords.screen,
  #menuAchievements.screen,
  #menuSettings.screen,
  #menuProfile.screen {
    padding-left: 240px !important;
  }
  #menuMain.mm-main.screen.mm2-shell { padding-left: 240px !important; }

  #menuMain.mm2-shell .mm2-main-col { padding: 20px 32px 12px; }
  #menuMain.mm2-shell .mm-footer { text-align: center; padding: 8px 0 14px; }

  .mm2-sidebar-logo {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px 14px;
    flex: 0 0 auto;
  }
  .mm2-sidebar-logo-img { height: 16px; width: auto; display: block; }
  .mm2-sidebar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mm-green, #39ff14); flex: 0 0 auto; }
  .mm2-sidebar-sep { flex: 0 0 auto; height: 1px; margin: 0 10px 14px; background: var(--mm-border, #2a2a2e); }

  /* Nav block sits centered in the remaining vertical space, between
     the separator and the profile card — matches the reference. */
  .mm2-sidebar-nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 0;
  }

  .mm2-side-link {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 10px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
    color: #8e8e9f;
    background: transparent;
    border: 1px solid transparent;
    text-align: left;
    width: auto; margin: 0; box-shadow: none; text-transform: none;
  }
  .mm2-side-link:focus { box-shadow: none; transform: none; }
  .mm2-side-link .mm2-ico-on { display: none !important; }
  .mm2-side-link.active .mm2-ico-off { display: none !important; }
  .mm2-side-link.active .mm2-ico-on { display: block !important; }
  .mm2-side-link.active {
    color: var(--mm-green, #39ff14);
    background: rgba(57, 255, 20, 0.08);
    border-color: rgba(57, 255, 20, 0.35);
  }
  .mm2-side-link.active::after {
    content: '';
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 16px;
    border-radius: 2px;
    background: var(--mm-green, #39ff14);
  }
  .mm2-side-ico { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .mm2-side-ico img { width: 18px; height: 18px; display: block; }

  /* Profile: a distinct bordered card, not just a bottom divider. */
  .mm2-sidebar-profile {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--mm-border, #2a2a2e);
    border-radius: 14px;
    padding: 12px;
    background: #101012;
    width: auto; margin: 0; box-shadow: none; text-transform: none;
  }
  .mm2-sidebar-profile:focus { box-shadow: none; transform: none; }
  .mm2-sidebar-profile.hidden { display: none !important; }
  .mm2-sidebar-profile-meta { flex: 1 1 auto; min-width: 0; }
  .mm2-sidebar-profile-name-row { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; color: #fff; }
  .mm2-sidebar-level { font-size: 0.58rem; color: #7a7a84; letter-spacing: 0.04em; margin: 2px 0 7px; }
  .mm2-xp-progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
  .mm2-xp-progress-label { font-size: 0.52rem; color: #6c6c76; letter-spacing: 0.05em; }
  .mm2-xp-progress-pct { font-size: 0.58rem; font-weight: 700; color: var(--mm-green, #39ff14); }
  .mm2-xp-progress { height: 4px; width: 100%; background: #1c1c20; border-radius: 999px; overflow: hidden; }
  .mm2-xp-progress-fill { height: 100%; width: 0%; background: var(--mm-green, #39ff14); }

  .mm2-topbar { margin: 0 0 26px; width: 100%; order: 0; }
  .mm2-connected {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.62rem; color: #9a9aa5; letter-spacing: 0.06em;
  }
  .mm-systems-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mm-green, #39ff14); display: inline-block; }
  .mm2-xp-chip, .mm2-ver-chip {
    display: inline-flex;
    align-items: center; gap: 6px;
    background: var(--mm-chip-bg, #141416);
    border: 1px solid var(--mm-border, #2a2a2e);
    border-radius: 999px; padding: 8px 14px; font-size: 0.72rem; color: #c8c8d0;
    width: auto; margin: 0; box-shadow: none; text-transform: none;
  }
  .mm2-tutorial-btn { font-size: 0.72rem; padding: 10px 14px; }
  .mm2-topbar-right { flex: 0 0 auto; margin-left: auto; }

  /* Desktop reflow: no big title, Ангар card up top, then a generous
     gap, then ИГРАТЬ, then the locked mode tabs — matches the Figma
     desktop reference exactly. Mobile keeps the DOM order untouched
     (title → card → play → tabs). */
  .mm2-hero { max-width: 760px; justify-content: center; }  #menuMain.mm2-shell .title-block.mm-title-block { display: none !important; }
  .mm2-panel { order: 1; }
  .mm2-play-btn { order: 2; margin-top: 70px; width: 500px; max-width: 500px; }
  .mm2-modes {
    order: 3;
    width: auto;
    max-width: none;
    margin: 0 auto;
  }
  /* Exact sizes from the Figma spec: СОРЕВНОВАТЕЛЬНЫЙ 222×51,
     ПРОГРЕСС/ИСТОРИЯ 120×51 — fixed, not flex-stretched. */
  .mm2-mode-tab {
    flex: 0 0 auto;
    height: 51px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mm2-mode-tab[data-mode-tab="competitive"] { width: 222px; }
  .mm2-mode-tab.locked { width: 120px; }
  .mm2-card { padding: 20px 22px; }

  /* Old fixed mobile chips are superseded by the sidebar/topbar.
     ID selectors deliberately out-rank the earlier
     `.mm-profile.profile-widget` / `.mm-xp` !important rules. */
  #profileWidget, #xpWidget { display: none !important; }

  /* Pilot Profile: comfier width + a touch more breathing room on
     desktop, still a single centered column (matches the reference
     design at any size — no need to reflow into multiple columns). */
  .pp-scroll { max-width: 460px; }
  .pp-name-input { max-width: 260px; }
  #menuProfile.pilot-profile { padding-top: 32px !important; }
}

/* ============================================================
   0.6.5.2 — Floating "close/back" button for every menu reachable
   from the main screen (Records, Achievements, Settings, Profile).
   Fixed at the bottom-center, elevated above the content with a
   shadow, so it never scrolls away — while the screen's own content
   gets extra bottom padding so it can still fully scroll/swipe past
   without anything being permanently hidden underneath the button.
   ============================================================ */
.floating-close-btn {
  position: fixed !important;
  left: 50% !important;
  bottom: max(78px, env(safe-area-inset-bottom, 0px) + 72px) !important;
  transform: translateX(-50%) !important;
  z-index: 250 !important;
  width: auto !important;
  min-width: 200px;
  margin: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 14px rgba(57, 255, 20, 0.25) !important;
}
@media (min-width: 900px) {
  .floating-close-btn {
    bottom: max(28px, env(safe-area-inset-bottom, 0px) + 22px) !important;
  }
}

/* Extra bottom clearance in each screen's own scrollable area so the
   floating button (and, on mobile, the bottom nav under it) never
   permanently covers the last item — you can always scroll past it. */
#menuSettings #settingsGrid,
#menuRecords .lb-container,
#menuAchievements .ach-list,
#menuProfile .menu-scroll,
#menuHangar .mm2-sub-scroll,
#menuShop .mm2-sub-scroll {
  padding-bottom: max(150px, env(safe-area-inset-bottom, 0px) + 140px) !important;
}
@media (min-width: 900px) {
  #menuSettings #settingsGrid,
  #menuRecords .lb-container,
  #menuAchievements .ach-list,
  #menuProfile .menu-scroll,
  #menuHangar .mm2-sub-scroll,
  #menuShop .mm2-sub-scroll {
    padding-bottom: max(90px, env(safe-area-inset-bottom, 0px) + 80px) !important;
  }
}

#menuProfile.pilot-profile {
  padding-top: max(16px, env(safe-area-inset-top, 0px) + 12px) !important;
}
.pp-status {
  display: flex; align-items: center; gap: 6px;
  align-self: flex-start;
  margin: 0 0 10px 6px;
  font-size: 0.6rem; color: #9a9aa5; letter-spacing: 0.06em;
}
.pp-scroll { width: 100%; max-width: 380px; }
.pp-avatars { flex-wrap: wrap; padding-top: 10px; padding-bottom: 2px; }

.pp-name-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 4px 0 18px;
}
.pp-name-input {
  flex: 1 1 auto;
  max-width: 220px;
  text-align: center;
  background: #101012;
  border: 1px solid var(--mm-border, #2a2a2e);
  border-radius: 999px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 10px 14px;
  width: auto; margin: 0; box-shadow: none; text-transform: none;
}
.pp-name-input:focus { box-shadow: none; transform: none; }
.pp-name-save {
  flex: 0 0 auto;
  background: var(--mm-green, #39ff14);
  color: #06120a;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.7rem; font-weight: 700;
  border: none; width: auto; margin: 0; box-shadow: none; text-transform: none;
}
.pp-name-save:focus { box-shadow: none; transform: none; }

.pp-card {
  width: 100%;
  background: #101012;
  border: 1px solid var(--mm-border, #2a2a2e);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.pp-level-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.pp-level-title { font-size: 1rem; font-weight: 700; color: #fff; }
.pp-level-pct { font-size: 0.85rem; font-weight: 700; color: var(--mm-green, #39ff14); }
.pp-xp-bar { height: 8px; width: 100%; background: #1c1c20; border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.pp-xp-bar-fill { height: 100%; width: 0%; background: var(--mm-green, #39ff14); transition: width 0.4s ease; }
.pp-level-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.6rem; }
.pp-level-sub span:first-child { color: #7a7a84; }
.pp-last-xp { color: var(--mm-green, #39ff14); font-weight: 700; }

.pp-alltime-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
}
.pp-alltime-label { font-size: 0.62rem; color: #9a9aa5; letter-spacing: 0.04em; }
.pp-alltime-val { font-size: 0.85rem; font-weight: 700; color: var(--mm-green, #39ff14); }

.pp-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
}
.pp-stat-box {
  background: #101012;
  border: 1px solid var(--mm-border, #2a2a2e);
  border-radius: 14px;
  padding: 12px;
}
.pp-stat-label { font-size: 0.56rem; color: #7a7a84; letter-spacing: 0.04em; margin-bottom: 4px; }
.pp-stat-val { font-size: 1rem; font-weight: 700; color: var(--mm-green, #39ff14); font-family: var(--font-mono); }
.pp-stat-sub { font-size: 0.52rem; color: #6c6c76; margin-top: 3px; text-transform: uppercase; }

.pp-ach-row {
  width: 100%;
  background: #101012;
  border: 1px solid var(--mm-border, #2a2a2e);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.pp-ach-label { font-size: 0.56rem; color: #7a7a84; letter-spacing: 0.04em; margin-bottom: 8px; }
.pp-ach-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-ach-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: #1a1a1e; border: 1px solid var(--mm-border, #2a2a2e);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
}
.pp-ach-empty { font-size: 0.62rem; color: #6c6c76; }

.pp-footer { position: static !important; text-align: center; font-size: 0.62rem; color: #6c6c76; margin: 8px 0 4px; }
.pp-ver-line { color: var(--mm-green, #39ff14); font-weight: 700; margin-bottom: 4px; font-size: 0.75rem; }

/* ============================================================
   0.6.5.2 — Stylized scrollbars (instead of the default browser
   scrollbar) across every scrollable area in the game.
   ============================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(57, 255, 20, 0.35) rgba(20, 20, 22, 0.5);
}
*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
*::-webkit-scrollbar-track {
  background: rgba(20, 20, 22, 0.5);
}
*::-webkit-scrollbar-thumb {
  background: rgba(57, 255, 20, 0.35);
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(57, 255, 20, 0.6);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ============================================================
   0.6.5.2 — connection dot, main-menu FABs, hangar models
   ============================================================ */
.pw-online {
  background: #5a5a62;
  box-shadow: none;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.pw-online.is-online {
  background: #39ff14 !important;
  box-shadow: 0 0 8px rgba(57, 255, 20, .8) !important;
}
.pw-online.is-offline {
  background: #ff3b3b !important;
  box-shadow: 0 0 8px rgba(255, 59, 59, .8) !important;
}

.mm2-diff-fab,
.mm2-tutorial-fab {
  position: absolute;
  bottom: max(22px, env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 260;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(12, 12, 16, .86);
  color: #fff;
  font-family: var(--mm-font, "Outfit", system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: .08em;
  backdrop-filter: none;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.mm2-diff-fab {
  right: max(18px, env(safe-area-inset-right, 0px) + 12px);
  height: 42px;
  min-width: 122px;
  padding: 0 16px;
  font-size: .72rem;
}
.mm2-diff-fab:active { transform: scale(.96); }
.mm2-diff-fab.diff-easy { color: #6fd9ff; border-color: rgba(111, 217, 255, .55); box-shadow: 0 0 18px rgba(111, 217, 255, .18); }
.mm2-diff-fab.diff-norm { color: #39ff14; border-color: rgba(57, 255, 20, .55); box-shadow: 0 0 18px rgba(57, 255, 20, .18); }
.mm2-diff-fab.diff-med  { color: #ffd23f; border-color: rgba(255, 210, 63, .55); box-shadow: 0 0 18px rgba(255, 210, 63, .18); }
.mm2-diff-fab.diff-hard { color: #ff4b4b; border-color: rgba(255, 75, 75, .55); box-shadow: 0 0 18px rgba(255, 75, 75, .18); }
.mm2-tutorial-fab {
  left: max(18px, env(safe-area-inset-left, 0px) + 12px);
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm2-tutorial-fab img {
  width: 20px;
  height: 20px;
  display: block;
  filter: invert(1) brightness(1.15);
  opacity: .88;
}
.mm2-tutorial-fab:active { transform: scale(.95); }

.hangar-ship-svg {
  width: 64px;
  height: 70px;
  display: block;
  overflow: visible;
}
.hangar-ship-svg polygon {
  fill: rgba(10, 18, 12, .92);
  stroke: #39ff14;
  stroke-width: 2.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(57, 255, 20, .5));
}
.hangar-ship-card.locked .hangar-ship-svg polygon {
  stroke: #5a5a62;
  fill: rgba(12, 12, 14, .9);
  filter: none;
}
.hangar-ship-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  flex: 0 0 66px;
}

.report-formula {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .62rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .48);
  text-align: center;
  letter-spacing: .02em;
}

/* Heat bar sits under the energy pips now. */
.energy-container + .heat-bar-frame {
  margin-top: 6px;
  margin-bottom: 0;
}

/* ============================================================
   0.6.5.2 — working HUD skins
   ============================================================ */
#gameUI.hud-default .hp-bar-frame,
#gameUI.hud-default .heat-bar-frame { border-radius: 10px; }

#gameUI.hud-glass .hp-bar-frame,
#gameUI.hud-glass .heat-bar-frame,
#gameUI.hud-glass .stats-panel,
#gameUI.hud-glass .pause-btn {
  background: rgba(18, 26, 20, .42);
  border: 1px solid rgba(57, 255, 20, .28);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 8px 22px rgba(0, 0, 0, .35);
}
#gameUI.hud-glass .energy-pip {
  background: rgba(18, 26, 20, .42);
  border-color: rgba(57, 255, 20, .22);
  border-radius: 999px;
}
#gameUI.hud-glass .hp-pip { border-radius: 999px; }

#gameUI.hud-cyber .hp-bar-frame,
#gameUI.hud-cyber .heat-bar-frame,
#gameUI.hud-cyber .stats-panel,
#gameUI.hud-cyber .pause-btn {
  background: rgba(2, 10, 12, .88);
  border: 1px solid #19e6ff;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(25, 230, 255, .18), 0 0 18px rgba(25, 230, 255, .22);
}
#gameUI.hud-cyber .stats-panel { font-family: var(--font-mono); }
#gameUI.hud-cyber .stat-row { color: rgba(160, 250, 255, .7); }
#gameUI.hud-cyber .accent { color: #19e6ff; text-shadow: 0 0 8px rgba(25, 230, 255, .7); }
#gameUI.hud-cyber .energy-pip { background: rgba(2, 10, 12, .88); border-color: rgba(25, 230, 255, .4); border-radius: 0; }
#gameUI.hud-cyber .hp-pip { border-radius: 0; }
#gameUI.hud-cyber .hp-container.state-high .hp-pip.active { background: #19e6ff; box-shadow: 0 0 8px rgba(25, 230, 255, .7); }

#gameUI.hud-tactical .hp-bar-frame,
#gameUI.hud-tactical .heat-bar-frame,
#gameUI.hud-tactical .stats-panel,
#gameUI.hud-tactical .pause-btn {
  background: rgba(14, 14, 10, .9);
  border: 1px solid rgba(255, 210, 63, .55);
  border-radius: 3px;
  box-shadow: none;
}
#gameUI.hud-tactical .stat-row { color: rgba(255, 230, 160, .72); }
#gameUI.hud-tactical .accent { color: #ffd23f; }
#gameUI.hud-tactical .energy-pip { background: rgba(14, 14, 10, .9); border-color: rgba(255, 210, 63, .3); border-radius: 0; }
#gameUI.hud-tactical .hp-pip { border-radius: 0; }
#gameUI.hud-tactical .hp-container.state-high .hp-pip.active { background: #ffd23f; box-shadow: 0 0 8px rgba(255, 210, 63, .6); }

#gameUI.hud-capsule .status-area { width: 220px; }
#gameUI.hud-capsule .hp-bar-frame,
#gameUI.hud-capsule .heat-bar-frame {
  border-radius: 999px;
  background: rgba(8, 10, 8, .82);
  border-color: rgba(57, 255, 20, .3);
}
#gameUI.hud-capsule .hp-container { gap: 3px; }
#gameUI.hud-capsule .hp-pip { border-radius: 999px; }
#gameUI.hud-capsule .energy-container { gap: 3px; }
#gameUI.hud-capsule .energy-pip { border-radius: 999px; background: rgba(8, 10, 8, .82); }
#gameUI.hud-capsule .stats-panel,
#gameUI.hud-capsule .pause-btn {
  border-radius: 999px;
  background: rgba(8, 10, 8, .82);
  border-color: rgba(57, 255, 20, .28);
}
#gameUI.hud-capsule .stats-panel { padding: 10px 18px; }

/* ============================================================
   0.6.5.2 — professional pass on secondary menus
   ============================================================ */
.mm2-sub-screen,
#menuRecords.screen,
#menuAchievements.screen,
#menuSettings.screen,
#menuProfile.screen {
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(57, 255, 20, .07), transparent 70%),
    linear-gradient(180deg, #08080a 0%, #050506 100%);
}
.mm2-sub-screen::before,
#menuRecords.screen::before,
#menuAchievements.screen::before,
#menuSettings.screen::before,
#menuProfile.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 72%);
}
.mm2-sub-header {
  width: min(880px, 94vw);
  margin: 0 auto 10px;
  padding: 6px 4px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: transparent;
}
.mm2-sub-title {
  font-family: var(--mm-font, "Outfit", system-ui, sans-serif);
  font-size: clamp(1.15rem, 3.4vw, 1.55rem);
  font-weight: 800;
  letter-spacing: .14em;
  color: #f4f4f6;
}
.mm2-sub-scroll,
#menuRecords .lb-container,
#menuAchievements .ach-list,
#menuSettings #settingsGrid,
#menuProfile .pp-scroll {
  width: min(880px, 94vw);
  margin: 0 auto;
}
.mm2-sub-scroll { padding-top: 4px; }
.shop-section,
.hangar-ship-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
.shop-section { padding: 14px; margin-bottom: 12px; }
.shop-section-head { gap: 10px; }
.shop-section-title { letter-spacing: .10em; }
.shop-item-btn {
  border-radius: 12px;
  border: 1px solid rgba(57, 255, 20, .22);
  background: rgba(8, 12, 9, .72);
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.shop-item-btn:hover { border-color: rgba(57, 255, 20, .55); box-shadow: 0 0 16px rgba(57, 255, 20, .12); }
.shop-item-btn:active { transform: scale(.98); }
.hangar-ship-card { padding: 14px; margin-bottom: 12px; }
.hangar-ship-head { align-items: center; }
.hangar-ship-title { letter-spacing: .08em; }

#menuRecords .lb-container {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
#menuRecords .lb-table thead th {
  background: rgba(57, 255, 20, .06);
  color: rgba(210, 255, 210, .72);
  letter-spacing: .12em;
}
#menuRecords .lb-row:nth-child(even) { background: rgba(255, 255, 255, .02); }

#menuAchievements .ach-list { display: grid; gap: 10px; }
.ach-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 12px 14px;
}
.ach-item.ach-done { border-color: rgba(57, 255, 20, .28); box-shadow: 0 0 18px rgba(57, 255, 20, .07); }

#menuSettings #settingsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  align-content: start;
}
#menuSettings .setting-row {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 10px 12px;
}
#menuSettings .setting-row .nav-item { width: 100%; margin: 0; }
#menuSettings .joy-range { width: 100%; }

#menuProfile .pp-card,
#menuProfile .pp-stat-box {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
}

/* Hide the legacy top tutorial button if an older cached DOM survives. */
.mm2-tutorial-btn { display: none !important; }

@media (max-width: 899.98px) {
  .mm2-diff-fab { bottom: max(84px, env(safe-area-inset-bottom, 0px) + 76px); }
  .mm2-tutorial-fab { bottom: max(84px, env(safe-area-inset-bottom, 0px) + 76px); }
}
@media (min-width: 900px) {
  .mm2-tutorial-fab { left: 258px; }
}
@media (max-width: 700px) {
  .shop-section,
  .hangar-ship-card { border-radius: 14px; }
}

/* ============================================================
   0.6.5.2 — Progress mode
   ============================================================ */
.progress-scroll { padding-bottom: 120px; }
.progress-hint {
  font-size: .76rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .5);
  margin: 0 0 12px;
  max-width: 760px;
}
.progress-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.progress-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.progress-card.picked {
  border-color: rgba(57, 255, 20, .55);
  box-shadow: 0 0 22px rgba(57, 255, 20, .12);
}
.progress-card.locked { opacity: .55; }
.progress-card-top { display: flex; align-items: center; gap: 10px; }
.progress-card-ico { font-size: 1.4rem; color: #39ff14; }
.progress-card-title { font-weight: 800; letter-spacing: .06em; font-size: .82rem; }
.progress-card-lvl { font-size: .62rem; color: #9a9aa2; letter-spacing: .08em; }
.progress-card-desc { font-size: .72rem; color: rgba(255, 255, 255, .58); line-height: 1.4; }
.progress-card-pick { margin-left: auto; height: 30px; padding: 0 10px; font-size: .62rem; }
.progress-card-up { height: 32px; font-size: .65rem; }
.progress-start-row { display: flex; gap: 10px; flex-wrap: wrap; }
.progress-start-row .btn-quick { flex: 1 1 220px; }
.progress-resume-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 210, 63, .35);
  background: rgba(255, 210, 63, .06);
  flex-wrap: wrap;
}
.progress-resume-title { font-size: .72rem; letter-spacing: .12em; color: #ffd23f; font-weight: 800; }
.progress-resume-meta { font-size: .7rem; color: rgba(255, 255, 255, .6); margin-top: 4px; }

.progress-hud {
  position: absolute;
  top: max(14px, env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 70;
  pointer-events: none;
}
.progress-hud.hidden { display: none !important; }
.ph-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(8, 12, 9, .82);
  border: 1px solid rgba(57, 255, 20, .28);
  font-family: var(--font-mono);
  font-size: .62rem;
  color: rgba(210, 255, 210, .65);
}
.ph-chip b { color: #39ff14; font-size: .72rem; }
.ph-chip.ph-boss { border-color: rgba(255, 138, 0, .45); }
.ph-chip.ph-boss b { color: #ff8a00; }

.progress-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .68);
  padding: 18px;
}
.progress-modal.hidden { display: none !important; }
.progress-modal-card {
  width: min(520px, 94vw);
  background: linear-gradient(180deg, #101412, #08090a);
  border: 1px solid rgba(255, 138, 0, .38);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 138, 0, .08);
  text-align: center;
}
.progress-modal-kicker { font-size: .66rem; letter-spacing: .2em; color: #ff8a00; font-weight: 800; }
.progress-modal-card h3 { margin: 8px 0 6px; font-size: 1.1rem; letter-spacing: .08em; }
.progress-modal-points { font-family: var(--font-mono); font-size: .8rem; color: rgba(255, 255, 255, .6); margin-bottom: 12px; }
.progress-modal-points b { color: #ffd23f; }
.progress-upgrade-btns { display: grid; gap: 8px; margin-bottom: 14px; }
.progress-up-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
}
.progress-up-btn small { color: #9a9aa2; font-size: .62rem; margin-left: 4px; }
.progress-up-btn em { grid-column: 1 / -1; font-style: normal; font-size: .64rem; color: rgba(255, 255, 255, .45); }

.progress-resume {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .72);
  padding: 18px;
}
.progress-resume.hidden { display: none !important; }
.progress-resume .progress-resume-card {
  display: block;
  text-align: center;
  min-width: min(420px, 92vw);
  background: linear-gradient(180deg, #101412, #08090a);
  border: 1px solid rgba(57, 255, 20, .35);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
.progress-resume-count {
  font-family: var(--font-mono);
  font-size: 4rem;
  font-weight: 800;
  color: #39ff14;
  text-shadow: 0 0 28px rgba(57, 255, 20, .55);
  margin-top: 10px;
}
.records-split-title {
  width: min(880px, 94vw);
  margin: 22px auto 10px;
  font-size: .74rem;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .5);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding-bottom: 6px;
}

/* ============================================================
   0.6.5.2 — minimal Progress menu + in-run cards
   ============================================================ */
.mm2-play-row {
  display: flex;
  gap: 10px;
  width: min(420px, 88vw);
  margin: 0 auto 12px;
  align-items: stretch;
}
.mm2-play-row .mm2-play-btn { flex: 1 1 auto; margin: 0 !important; }
.mm2-continue-btn {
  flex: 0 0 auto;
  height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 210, 63, .5);
  background: rgba(255, 210, 63, .08);
  color: #ffd23f;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}
.mm2-continue-btn.hidden { display: none !important; }

.progress-loadout { display: flex; flex-direction: column; gap: 8px; }
.progress-slots { display: flex; gap: 8px; }
.progress-slot {
  flex: 1; min-width: 0; min-height: 74px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 12px; border: 1px solid rgba(57, 255, 20, .26);
  background: rgba(10, 14, 10, .72); color: #fff; padding: 6px;
}
.progress-slot.empty {
  border-style: dashed; border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .4); font-size: 1.4rem;
}
.progress-slot-ico { font-size: 1.25rem; color: #39ff14; line-height: 1; }
.progress-slot-title { font-size: .54rem; letter-spacing: .05em; color: rgba(255, 255, 255, .72); text-align: center; }
.progress-slot-lvl { font-size: .5rem; color: #7dffc4; }
.progress-loadout-edit {
  height: 30px; border-radius: 9px; font-size: .58rem; letter-spacing: .08em;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .62);
}
.progress-cards-card { width: min(640px, 94vw); max-height: 90vh; overflow-y: auto; text-align: left; }
.progress-cards-card h3 { text-align: center; }
.progress-card-cost { font-size: .58rem; letter-spacing: .06em; color: rgba(255, 210, 63, .75); font-family: var(--font-mono); }

/* In-run card bar: compact, bottom-centre, never covers the play field. */
.card-bar {
  position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom, 0px) + 8px);
  transform: translateX(-50%); display: flex; gap: 6px; z-index: 65;
  pointer-events: auto; max-width: min(420px, 96vw);
}
.card-bar.hidden { display: none !important; }
.card-btn {
  position: relative; width: 92px; min-height: 56px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(8, 12, 9, .82);
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 5px 4px; overflow: hidden;
  touch-action: none; user-select: none;
  transition: border-color .15s ease, opacity .15s ease;
}
.card-btn.ready { border-color: rgba(57, 255, 20, .5); box-shadow: 0 0 14px rgba(57, 255, 20, .12); }
.card-btn.disabled { opacity: .45; }
.card-hotkey { position: absolute; top: 3px; left: 4px; font-size: .48rem; color: rgba(255, 255, 255, .4); font-family: var(--font-mono); }
.card-ico { font-size: 1.05rem; color: #39ff14; line-height: 1; }
.card-title { font-size: .48rem; letter-spacing: .04em; color: rgba(255, 255, 255, .72); }
.card-cost { font-size: .46rem; color: rgba(255, 210, 63, .8); font-family: var(--font-mono); }
.card-cd {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .8rem; color: #fff;
  background: rgba(0, 0, 0, .55); pointer-events: none;
}
.card-cd:empty { display: none; }
.card-btn.holding::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: #39ff14; transform-origin: left center; animation: cardHold 1s linear forwards;
}
@keyframes cardHold { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.card-bar-empty { font-size: .6rem; color: rgba(255,255,255,.4); padding: 8px; }

.records-toggle { display: flex; gap: 6px; width: min(420px, 92vw); margin: 0 auto 12px; }
.records-toggle .nav-item {
  flex: 1; height: 34px; border-radius: 10px; font-size: .58rem; letter-spacing: .08em;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .55);
}
.records-toggle .nav-item.active {
  border-color: rgba(57, 255, 20, .45); color: #39ff14; background: rgba(57, 255, 20, .06);
}
@media (max-width: 560px) {
  .card-btn { width: 78px; min-height: 52px; }
  .mm2-continue-btn { height: 48px; padding: 0 12px; }
  .mm2-play-row { width: min(380px, 92vw); }
}
/* ============================================================
   0.6.5.2 — SCI-FI DARK MINIMALISM redesign layer
   ============================================================ */
:root {
  --bg-space: #07090E;
  --bg-surface: rgba(18, 24, 38, .70);
  --bg-surface-elevated: rgba(28, 36, 56, .85);
  --border-subtle: rgba(255, 255, 255, .08);
  --border-accent: rgba(0, 255, 102, .40);
  --primary-neon: #00FF66;
  --primary-glow: rgba(0, 255, 102, .25);
  --text-main: #F1F5F9;
  --text-muted: #94A3B8;
  --text-dim: #475569;
  --danger-accent: #EF4444;
  --warning-accent: #F59E0B;
}

html, body { background: var(--bg-space) !important; }
body { color: var(--text-main); }

/* Thin, quiet scrollbars (hidden on touch devices). */
* { scrollbar-width: thin; scrollbar-color: rgba(0,255,102,.3) rgba(255,255,255,.04); }
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
*::-webkit-scrollbar-thumb { background: rgba(0,255,102,.3); border-radius: 4px; border: none; }
@media (max-width: 899.98px) {
  * { scrollbar-width: none; }
  *::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

/* Floating back buttons: desktop gets navigation from the sidebar. */
@media (min-width: 900px) {
  .floating-close-btn { display: none !important; }
}
@media (max-width: 899.98px) {
  body:not(.game-active) #menuHangar .floating-close-btn,
  body:not(.game-active) #menuShop .floating-close-btn,
  body:not(.game-active) #menuRecords .floating-close-btn,
  body:not(.game-active) #menuAchievements .floating-close-btn,
  body:not(.game-active) #menuSettings .floating-close-btn,
  body:not(.game-active) #menuProfile .floating-close-btn { display: none !important; }
  body.game-active .floating-close-btn {
    display: flex !important;
    top: max(10px, env(safe-area-inset-top, 0px) + 8px) !important;
    left: max(10px, env(safe-area-inset-left, 0px) + 8px) !important;
    right: auto !important;
    bottom: auto !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    font-size: 0 !important;
    z-index: 400 !important;
  }
  body.game-active .floating-close-btn::before { content: "←"; font-size: 18px; }
}

/* Bottom breathing room so the fixed nav never covers content. */
@media (max-width: 899.98px) {
  #menuShop .mm2-sub-scroll,
  #menuHangar .mm2-sub-scroll,
  #menuAchievements .ach-list,
  #menuRecords .lb-container,
  #menuProfile .pp-scroll,
  #menuSettings .menu-scroll,
  #menuTutorial .tutorial-box {
    padding-bottom: 110px !important;
  }
  .mm2-sub-screen.screen,
  #menuRecords.screen,
  #menuAchievements.screen,
  #menuSettings.screen,
  #menuProfile.screen { overflow-y: auto !important; padding-bottom: 100px !important; }
}

/* ── Main menu shell ─────────────────────────────────────────── */
.mm2-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .22em; font-size: .78rem; }
.mm2-brand-dot { width: 7px; height: 7px; border-radius: 50%; }
.mm2-brand-text { color: var(--text-main); }
.mm2-journal-btn {
  width: 34px; height: 34px; min-width: 34px; padding: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--border-subtle);
}
.mm2-journal-btn img { width: 16px; height: 16px; filter: invert(1) brightness(1.1); opacity: .8; }
.mm2-journal-btn:hover { border-color: var(--border-accent); }

.lobby-ship-preview {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 260px; margin: 6px auto 14px; position: relative;
  pointer-events: none;
}
.lobby-ship-preview svg { width: 240px; height: 260px; filter: drop-shadow(0 0 24px rgba(0,255,102,.18)); animation: shipHover 4.5s ease-in-out infinite; }
.lobby-ship-preview svg polygon { fill: rgba(10,18,12,.86); stroke: var(--primary-neon); stroke-width: 2; stroke-linejoin: round; }
.lobby-ship-glow {
  position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,102,.10), transparent 65%);
  pointer-events: none;
}
.lobby-ship-caption { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lobby-ship-caption b { font-size: .72rem; letter-spacing: .16em; color: var(--text-main); }
.lobby-ship-caption span { font-size: .58rem; letter-spacing: .1em; color: var(--text-dim); text-transform: uppercase; }
@keyframes shipHover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.mm2-hero { display: flex; flex-direction: column; align-items: center; }
.mm2-modes {
  display: flex; gap: 4px; padding: 4px; border-radius: 12px;
  background: rgba(255,255,255,.035); border: 1px solid var(--border-subtle);
  width: min(520px, 92vw); margin: 0 auto 12px;
}
.mm2-mode-tab {
  flex: 1; height: 34px; border-radius: 8px !important; margin: 0 !important;
  font-size: .56rem; letter-spacing: .06em; color: var(--text-muted);
  background: transparent !important; border: none !important;
}
.mm2-mode-tab.active { background: rgba(0,255,102,.10) !important; color: var(--primary-neon) !important; }
.mm2-mode-tab.locked { opacity: .4; }

.mm2-play-row {
  display: flex; gap: 10px; width: min(520px, 92vw);
  margin: 0 auto 10px; align-items: stretch; justify-content: center;
}
.mm2-play-row .mm2-play-btn {
  flex: 1 1 auto; min-width: 180px; height: 56px; border-radius: 12px !important;
  background: var(--primary-neon) !important; color: #04120A !important;
  font-weight: 800; letter-spacing: .18em; font-size: .8rem;
  box-shadow: 0 0 0 transparent; transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .2s;
}
.mm2-play-row .mm2-play-btn:hover { transform: translateY(-1px); box-shadow: 0 0 26px var(--primary-glow); }
.mm2-diff-fab {
  position: static !important; inset: auto !important;
  height: 56px !important; min-width: 104px !important; padding: 0 14px !important;
  border-radius: 12px !important; font-size: .62rem !important;
  background: rgba(18,24,38,.7) !important;
}
.mm2-continue-btn { height: 56px; border-radius: 12px; }

.mm2-panel { width: min(520px, 92vw); margin: 0 auto 10px; }
.mm2-cards { display: flex; }
.mm2-card { width: 100%; border-radius: 14px !important; }
.progress-loadout-edit { width: 100% !important; }

/* Sidebar: soft active plate, no hard neon bar. */
.mm2-side-link.active,
.mm2-side-link:focus-visible {
  background: linear-gradient(90deg, rgba(0,255,102,.12), rgba(0,255,102,.02)) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.mm2-side-link::before, .mm2-side-link.active::before { display: none !important; content: none !important; }
.mm2-sidebar-profile {
  margin-top: auto; border-radius: 14px !important;
  background: rgba(255,255,255,.035) !important; border: 1px solid var(--border-subtle) !important;
}

/* ── Shop: 3-column showcase ─────────────────────────────────── */
#shopSections {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start;
}
#shopSections .shop-section { margin: 0 !important; padding: 14px !important; }
#shopSections .shop-section[data-slot="xp"] { grid-column: 1 / -1; }
.shop-item-row { display: flex; flex-direction: column; gap: 8px; }
.shop-item-btn { position: relative; flex-direction: column; align-items: flex-start !important; gap: 2px; min-height: 58px; }
.shop-item-price { font-family: var(--font-mono); font-size: .72rem; color: var(--primary-neon); }
.shop-best-badge {
  position: absolute; top: 7px; right: 8px; font-size: .46rem; letter-spacing: .05em;
  color: var(--warning-accent); border: 1px solid rgba(245,158,11,.35);
  padding: 2px 5px; border-radius: 6px;
}
@media (max-width: 1099px) {
  #shopSections { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  #shopSections .shop-section[data-slot="xp"] { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  #shopSections { grid-template-columns: 1fr !important; }
}

/* ── Records ─────────────────────────────────────────────────── */
#menuRecords .lb-container { width: min(960px, 94vw) !important; }
#menuRecords .lb-table { width: 100%; border-collapse: collapse; }
#menuRecords .lb-table th:nth-child(1), #menuRecords .lb-table td:nth-child(1) { text-align: center; width: 60px; }
#menuRecords .lb-table th:nth-child(2), #menuRecords .lb-table td:nth-child(2) { text-align: left; }
#menuRecords .lb-table th:nth-child(3), #menuRecords .lb-table td:nth-child(3),
#menuRecords .lb-table th:nth-child(4), #menuRecords .lb-table td:nth-child(4) { text-align: right; font-family: var(--font-mono); }
#menuRecords .lb-table th:nth-child(5), #menuRecords .lb-table td:nth-child(5) { text-align: center; }
#menuRecords .lb-table tbody tr:nth-child(1) td:first-child { color: #f6c945; font-weight: 800; }
#menuRecords .lb-table tbody tr:nth-child(2) td:first-child { color: #cfd6df; font-weight: 800; }
#menuRecords .lb-table tbody tr:nth-child(3) td:first-child { color: #c8814a; font-weight: 800; }

/* ── Achievements ────────────────────────────────────────────── */
#menuAchievements .ach-list { grid-template-columns: repeat(2, minmax(0,1fr)) !important; width: min(960px,94vw) !important; }
.ach-item { border-radius: 14px !important; }
@media (max-width: 700px) { #menuAchievements .ach-list { grid-template-columns: 1fr !important; } }

/* ── Settings: tabs + grouped two-column layout ──────────────── */
#menuSettings.screen {
  display: flex; flex-direction: column; align-items: center;
  overflow-y: auto; padding: 24px 16px 96px;
}
.settings-tabs {
  display: flex; gap: 4px; padding: 4px; border-radius: 12px;
  background: rgba(255,255,255,.035); border: 1px solid var(--border-subtle);
  width: min(560px, 92vw); margin: 0 auto 14px;
}
.settings-tabs .nav-item {
  flex: 1; height: 34px; margin: 0; border-radius: 8px; border: none;
  background: transparent; color: var(--text-muted); font-size: .58rem; letter-spacing: .07em;
}
.settings-tabs .nav-item.active { background: rgba(0,255,102,.1); color: var(--primary-neon); }

#settingsGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: min(760px, 94vw) !important;
  align-content: start;
  overflow: visible !important;
  max-height: none !important;
}
#settingsGrid > .setting-row {
  min-height: 54px; border-radius: 12px !important; padding: 8px 10px !important;
  display: flex; align-items: center; gap: 8px;
}
#settingsGrid > .setting-row .nav-item { width: 100%; margin: 0; }
#settingsGrid > .setting-row[data-settings-group="sound"] { grid-column: 1 / -1; }
#settingsGrid > .setting-row[data-settings-group="legacy"] { display: none !important; }
#menuSettings[data-settings-tab="controls"] [data-settings-group="graphics"],
#menuSettings[data-settings-tab="controls"] [data-settings-group="sound"],
#menuSettings[data-settings-tab="graphics"] [data-settings-group="controls"],
#menuSettings[data-settings-tab="graphics"] [data-settings-group="sound"],
#menuSettings[data-settings-tab="sound"] [data-settings-group="controls"],
#menuSettings[data-settings-tab="sound"] [data-settings-group="graphics"] { display: none !important; }

.settings-nav::after { content: "›"; margin-left: auto; color: var(--text-dim); font-size: 1rem; }
@media (min-width: 900px) {
  #settingsGrid > .setting-row.settings-mobile-only { display: none !important; }
}
@media (max-width: 899.98px) {
  #settingsGrid { grid-template-columns: 1fr !important; width: 100% !important; }
  #menuSettings.screen { padding-bottom: 120px; }
  #settingsGrid > .setting-row { min-height: 56px; }
}

/* Generic micro-interactions. */
.nav-item, button { transition: transform .16s cubic-bezier(.4,0,.2,1), background-color .16s, border-color .16s, box-shadow .16s; }
.nav-item:active, button:active { transform: scale(.97); }
.nav-item:focus-visible, button:focus-visible { outline: 2px solid var(--primary-neon); outline-offset: 2px; }
@media (hover: hover) {
  .nav-item:hover { border-color: rgba(0,255,102,.3) !important; }
}

/* Mobile lobby: compact header, thumb-zone play button. */
@media (max-width: 899.98px) {
  .lobby-ship-preview { display: none !important; }
  .mm2-brand-text { font-size: .68rem; letter-spacing: .18em; }
  .mm2-topbar { align-items: center; }
  .mm2-hero { padding-bottom: 70px; }
  .mm2-modes { width: calc(100vw - 32px); }
  .mm2-play-row {
    position: fixed;
    left: 16px; right: 16px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 10px);
    width: auto; z-index: 250; margin: 0;
  }
  .mm2-play-row .mm2-play-btn { height: 56px; min-width: 0; }
  .mm2-diff-fab { min-width: 88px !important; height: 56px !important; }
  .mm2-panel { width: calc(100vw - 32px); margin-bottom: 84px; }
  #mm2BottomNav.visible { height: 64px; padding-bottom: env(safe-area-inset-bottom, 0px); }
  #mm2BottomNav .mm2-bnav-item { min-height: 48px; }
}
.ach-progress {
  width: min(320px, 70vw);
  height: 4px;
  margin: 6px auto 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.ach-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--primary-neon, #00ff66);
  box-shadow: 0 0 10px rgba(0,255,102,.35);
  transition: width .3s ease;
}
@media (max-width: 899.98px) {
  #menuSettings.screen,
  #menuRecords.screen,
  #menuAchievements.screen,
  #menuShop.screen,
  #menuHangar.screen,
  #menuProfile.screen {
    justify-content: flex-start !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   SPACEPRO 0.6.5.2 — SCI-FI DARK MINIMALISM REDESIGN & BUGFIX PATCH
   ========================================================================== */

:root {
  --sp-bg-deep: #06090E;
  --sp-bg-panel: rgba(12, 18, 28, 0.78);
  --sp-bg-card: rgba(16, 24, 36, 0.85);
  --sp-bg-card-hover: rgba(22, 34, 50, 0.92);
  --sp-border-neutral: rgba(255, 255, 255, 0.08);
  --sp-border-subtle: rgba(255, 255, 255, 0.14);
  --sp-accent: #00FF66;
  --sp-accent-soft: rgba(0, 255, 102, 0.08);
  --sp-accent-glow: 0 0 20px rgba(0, 255, 102, 0.35);
  --sp-text-primary: #F2F6FA;
  --sp-text-secondary: rgba(242, 246, 250, 0.64);
  --sp-text-muted: rgba(242, 246, 250, 0.42);
  --sp-danger: #FF3B5C;
  --sp-warning: #FFB800;
  --sp-info: #00B8FF;
}

/* --- 3.5. Ликвидация ядовитого зеленого Glow со второстепенных элементов --- */
body .panel,
body .card,
body .modal-content,
body .settings-container,
body .settings-card,
body .shop-card,
body .ShopItem,
body .achievement-card,
body .record-row,
body .sidebar-btn,
body .nav-btn,
body .tab-btn,
body .module-card,
body input[type="range"],
body select,
body button:not(.btn-play-cta):not([data-primary-cta="true"]) {
  box-shadow: none !important;
  text-shadow: none !important;
}

body .panel,
body .card,
body .shop-card,
body .achievement-card,
body .settings-card,
body .module-card {
  border: 1px solid var(--sp-border-neutral) !important;
  background: var(--sp-bg-card) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Разрешаем свечение ТОЛЬКО для главной кнопки ИГРАТЬ и индикатора онлайн-статуса */
.btn-play-cta,
#btn-play,
#play-btn,
.play-button,
button[data-action="play"],
button[data-primary-cta="true"] {
  background: var(--sp-accent) !important;
  color: #04120A !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  border: 1px solid #00FF66 !important;
  box-shadow: var(--sp-accent-glow) !important;
  border-radius: 10px !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease !important;
}

.btn-play-cta:hover,
#btn-play:hover,
#play-btn:hover,
.play-button:hover,
button[data-primary-cta="true"]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(0, 255, 102, 0.5) !important;
}

/* --- 1.2. Устранение дублирования логотипа SPACEPRO --- */
.sp-duplicate-logo-hidden {
  display: none !important;
}

/* Глобальный сервисный хэдер */
.sp-global-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid var(--sp-border-neutral);
  background: rgba(6, 9, 14, 0.85);
  backdrop-filter: blur(10px);
  z-index: 40;
}

.sp-brand-cluster {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--sp-text-primary);
}

.sp-server-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sp-accent);
  box-shadow: 0 0 10px var(--sp-accent);
  display: inline-block;
}

.sp-header-service-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Кнопка Задания / Журнал в верхнем хэдере вместо оторванной книги в углу */
.sp-header-quests-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 12px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--sp-border-neutral) !important;
  color: var(--sp-text-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.sp-header-quests-btn:hover {
  background: var(--sp-accent-soft) !important;
  border-color: rgba(0, 255, 102, 0.35) !important;
}

.sp-orphaned-book-hidden {
  display: none !important;
}

/* --- 4.1. Левый сайдбар на ПК (без чужеродных полосок внутри рамок) --- */
.sidebar-btn,
.nav-sidebar button,
.left-nav button,
.desktop-sidebar .nav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border: 1px solid transparent !important;
  border-left: 2px solid transparent !important;
  background: transparent !important;
  color: var(--sp-text-secondary) !important;
  border-radius: 0 8px 8px 0 !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

.sidebar-btn::before,
.sidebar-btn::after,
.nav-sidebar button::before,
.left-nav button::before {
  display: none !important;
}

.sidebar-btn.active,
.sidebar-btn[aria-selected="true"],
.nav-sidebar button.active,
.left-nav button.active,
.desktop-sidebar .nav-item.active {
  background: rgba(0, 255, 102, 0.06) !important;
  border-left: 2px solid var(--sp-accent) !important;
  color: var(--sp-text-primary) !important;
}

/* --- 1.1. Компактный тактический статус-виджет (Tactical HUD Dock) вместо гигантского корабля --- */
.sp-giant-ship-hidden {
  display: none !important;
}

.sp-tactical-hud-card {
  width: 100%;
  max-width: 680px;
  margin: 14px auto;
  padding: 18px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(14, 22, 34, 0.92) 0%, rgba(9, 14, 22, 0.96) 100%);
  border: 1px solid var(--sp-border-neutral);
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.sp-tactical-hud-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 50%, rgba(0, 255, 102, 0.06) 0%, transparent 55%),
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 24px 24px;
  pointer-events: none;
}

.sp-tactical-silhouette {
  width: 88px;
  height: 76px;
  border-radius: 10px;
  background: rgba(0, 255, 102, 0.04);
  border: 1px solid rgba(0, 255, 102, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.sp-tactical-silhouette svg {
  width: 58px;
  height: 58px;
  stroke: var(--sp-accent);
  fill: rgba(0, 255, 102, 0.12);
}

.sp-tactical-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.sp-tactical-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sp-tactical-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--sp-text-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sp-tactical-class-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 184, 255, 0.12);
  color: var(--sp-info);
  border: 1px solid rgba(0, 184, 255, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sp-tactical-readiness {
  font-size: 11px;
  font-weight: 600;
  color: var(--sp-accent);
  margin-left: auto;
}

.sp-tactical-bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.sp-stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-stat-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--sp-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sp-stat-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.sp-stat-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--sp-accent);
}

.sp-stat-fill.shield {
  background: var(--sp-info);
}

.sp-stat-fill.speed {
  background: #FFB800;
}

.sp-tactical-hangar-btn {
  position: relative;
  z-index: 1;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--sp-border-subtle) !important;
  color: var(--sp-text-primary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.sp-tactical-hangar-btn:hover {
  background: var(--sp-accent-soft) !important;
  border-color: var(--sp-accent) !important;
}

/* --- 1.3. Изоляция селектора сложности в режиме «Прогресс» и «История» --- */
body[data-lobby-mode="progress"] .difficulty-selector,
body[data-lobby-mode="progress"] #difficulty-btn,
body[data-lobby-mode="progress"] [data-role="difficulty-selector"],
body[data-lobby-mode="history"] .difficulty-selector,
body[data-lobby-mode="history"] #difficulty-btn,
body[data-lobby-mode="history"] [data-role="difficulty-selector"],
.sp-difficulty-isolated-hidden {
  display: none !important;
}

/* --- 1.4. Ликвидация кнопки «ИЗМЕНИТЬ КАРТЫ» и интерактивные карточки модулей --- */
.sp-change-cards-btn-hidden,
#change-cards-btn,
.change-cards-btn,
button[data-action="change-cards"] {
  display: none !important;
}

.sp-interactive-module-card {
  position: relative !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
  user-select: none;
}

.sp-interactive-module-card:hover {
  border-color: rgba(0, 255, 102, 0.45) !important;
  background: var(--sp-bg-card-hover) !important;
  transform: translateY(-2px);
}

.sp-module-swap-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(0, 255, 102, 0.1);
  color: var(--sp-accent);
  border: 1px solid rgba(0, 255, 102, 0.25);
  margin-left: auto;
}

/* --- 2.1 & 3.3. Удаление кнопки «НАЗАД» с экранов верхнего уровня и защита от перекрытия --- */
.sp-top-level-back-hidden {
  display: none !important;
}

/* Обязательный нижний отступ скролл-контейнеров, чтобы не срезались «На 25 вылетов» и «Крушитель» */
#shop-screen,
#records-screen,
#achievements-screen,
#settings-screen,
.screen-scroll-container,
.shop-scroll,
.ShopList,
.achievements-list,
.achievements-grid,
.records-list,
.records-table-container,
.settings-scroll,
.settings-content,
.settings-body,
[data-scrollable-screen="true"] {
  padding-bottom: 110px !important;
  overflow-y: auto !important;
  max-height: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* --- 2.3 & 2.4. Сетка и платформенная изоляция «Настроек» --- */
@media (hover: hover) and (pointer: fine) {
  .sp-mobile-only-setting,
  [data-setting-platform="mobile"] {
    display: none !important;
  }
}

body.is-desktop .sp-mobile-only-setting,
body.is-desktop [data-setting-platform="mobile"] {
  display: none !important;
}

.sp-settings-tabs-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sp-border-neutral);
  border-radius: 10px;
  width: fit-content;
}

.sp-settings-tab-btn {
  padding: 8px 18px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--sp-text-secondary) !important;
  border: none !important;
  cursor: pointer;
}

.sp-settings-tab-btn.active {
  background: rgba(0, 255, 102, 0.14) !important;
  color: var(--sp-accent) !important;
  border: 1px solid rgba(0, 255, 102, 0.3) !important;
}

@media (min-width: 900px) {
  .sp-settings-grid-2col {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 18px !important;
    align-items: stretch !important;
  }
}

.sp-setting-hidden-by-tab {
  display: none !important;
}

/* --- 4.3. Экран «Магазин» (3-колоночная адаптивная витрина на ПК) --- */
@media (min-width: 960px) {
  .sp-shop-grid-3col {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
  }
}

/* --- 4.4. Экран «Рекорды» (Аналитическая таблица 920px, tabular-nums, Топ-3) --- */
.sp-records-container {
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  font-variant-numeric: tabular-nums !important;
}

.sp-records-container table,
.sp-records-container .record-row {
  font-variant-numeric: tabular-nums !important;
}

.sp-record-rank-1 {
  border-left: 3px solid #FFD700 !important;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.08) 0%, transparent 80%) !important;
}

.sp-record-rank-2 {
  border-left: 3px solid #C0C8D2 !important;
  background: linear-gradient(90deg, rgba(192, 200, 210, 0.08) 0%, transparent 80%) !important;
}

.sp-record-rank-3 {
  border-left: 3px solid #CD7F32 !important;
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.08) 0%, transparent 80%) !important;
}

.sp-diff-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 6px;
}

.sp-diff-badge.hard {
  background: rgba(255, 59, 92, 0.16);
  color: #FF5C77;
  border: 1px solid rgba(255, 59, 92, 0.35);
}

.sp-diff-badge.norm {
  background: rgba(0, 184, 255, 0.15);
  color: #38C8FF;
  border: 1px solid rgba(0, 184, 255, 0.35);
}

/* --- 4.5. Экран «Достижения» (2xN на ПК, вертикальный список на мобилке) --- */
@media (min-width: 900px) {
  .sp-achievements-grid-pc {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* --- МОБИЛЬНАЯ АДАПТАЦИЯ (390x844 и смартфоны) --- */
@media (max-width: 899px) {
  /* Уменьшаем брендовый блок, чтобы приоритет был у кнопки ИГРАТЬ и корабля */
  .sp-brand-cluster,
  header h1,
  .mobile-header .logo-title {
    font-size: 14px !important;
    opacity: 0.78 !important;
    letter-spacing: 0.08em !important;
  }

  .sp-tactical-hud-card {
    grid-template-columns: 64px 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    margin: 8px 0 !important;
  }

  .sp-tactical-silhouette {
    width: 64px !important;
    height: 60px !important;
  }

  .sp-tactical-hangar-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* 3.4 & 4.2. Вертикальный стек из 3 широких строк-карточек во вкладке «Прогресс» на мобилке */
  .sp-progress-modules-stack,
  .modules-container,
  .progress-modules,
  .cards-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sp-progress-modules-stack > *,
  .modules-container > .module-card,
  .progress-modules > .module-card,
  .sp-interactive-module-card {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 58px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
  }

  /* 2.2 & 4.6. Мобильные Настройки: снятие жесткой рамки и высота строк >= 50px */
  #settings-screen .settings-frame,
  #settings-screen .green-box,
  #settings-screen .settings-panel,
  .mobile-settings-container {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-bottom: 1px solid var(--sp-border-neutral) !important;
  }

  #settings-screen .setting-row,
  #settings-screen .settings-item,
  .sp-setting-row {
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   SPACEPRO 0.6.5.2 — MAIN SCREEN: INFINITE HANGAR CAROUSEL + PROGRESS
   ========================================================================== */

/* One brand per platform: PC sidebar logo + dot, mobile big logo above
   the carousel. The old content-topbar wordmark is gone everywhere. */
#menuMain .mm2-brand { display: none !important; }

/* Mobile title: exactly the 0.6.3.3 wordmark size/position, with the
   current version pill underneath. Everything below it moves down. */
.mm2-mobile-logo { display: none; }
.mm2-mobile-tutorial-fab { display: none; }
@media (max-width: 899.98px) {
  #menuMain .mm2-topbar { display: none !important; }
  #menuMain .mm2-hero {
    justify-content: center !important;
    padding-top: 51px !important;
    padding-bottom: calc(12px + clamp(0px, env(safe-area-inset-bottom, 0px), 6px)) !important;
  }
  #menuMain .mm2-mobile-logo {
    display: flex !important;
    order: -2;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 0 22px !important;
    padding: 0 !important;
    box-sizing: border-box;
    position: relative;
  }
  #menuMain .mm2-mobile-logo .mm-logo-img {
    display: block;
    width: min(285px, 78vw);
    height: auto;
    max-height: 58px;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
    filter: none;
  }
  #menuMain .mm2-mobile-logo .version-tag {
    position: static !important;
    display: inline-block !important;
    margin-top: 10px !important;
    transform: none !important;
    right: auto !important;
    bottom: auto !important;
    background: transparent !important;
    border: 1px solid var(--mm-green, #39ff14) !important;
    color: var(--mm-green, #39ff14) !important;
    border-radius: 999px !important;
    padding: 3px 11px !important;
    font-family: var(--mm-font, "Outfit", system-ui, sans-serif) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  #menuMain .mm2-mobile-tutorial-fab {
    display: flex !important;
    position: fixed !important;
    left: max(16px, env(safe-area-inset-left, 0px) + 12px) !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    width: auto !important;
    min-width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    gap: 8px;
    border-radius: 999px !important;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .05em;
    z-index: 260 !important;
  }
  #menuMain .mm2-mobile-tutorial-fab img {
    width: 18px;
    height: 18px;
    display: block;
  }
}
.mm2-sidebar-dot.pw-online {
  background: #5a5a62;
  box-shadow: none;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.mm2-sidebar-dot.pw-online.is-online {
  background: var(--mm-green, #39ff14) !important;
  box-shadow: 0 0 8px rgba(57, 255, 20, .8) !important;
}
.mm2-sidebar-dot.pw-online.is-offline {
  background: #ff3b3b !important;
  box-shadow: 0 0 8px rgba(255, 59, 59, .8) !important;
}

/* ── Ship carousel ─────────────────────────────────────────────── */
.mm2-ship-carousel {
  position: relative;
  order: 0;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 4px;
  padding: 0 44px;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.mm2-carousel-viewport {
  position: relative;
  overflow: hidden;
  height: 220px;
  display: flex;
  align-items: center;
  touch-action: pan-y;
  cursor: grab;
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.mm2-carousel-viewport:active { cursor: grabbing; }
.mm2-carousel-track {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  align-items: center;
  gap: 0;
  will-change: transform;
}
.mm2-ship-slide {
  flex: 0 0 150px;
  width: 150px;
  height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-transform: none;
  color: var(--text-main, #F1F5F9);
  opacity: .34;
  transform: scale(.8);
  filter: grayscale(.55);
  transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1), filter .3s ease;
}
.mm2-ship-slide:focus,
.mm2-ship-slide:focus-visible {
  outline: none;
  box-shadow: none;
  transform: scale(.8);
}
.mm2-ship-slide:active {
  background: transparent;
  color: var(--text-main, #F1F5F9);
}
.mm2-ship-slide.far { opacity: .16; }
.mm2-ship-slide.active {
  opacity: 1;
  transform: scale(1);
  filter: none;
}
.mm2-ship-slide.active:focus { transform: scale(1); }
.mm2-ship-art {
  width: 120px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(40deg);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.mm2-ship-art .hangar-ship-svg {
  width: 120px;
  height: 130px;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 16px rgba(0, 255, 102, .18));
  animation: shipHover 4.5s ease-in-out infinite;
}
.mm2-ship-art .hangar-ship-svg polygon {
  fill: rgba(10, 18, 12, .9);
  stroke: #46664d;
  stroke-width: 2;
  stroke-linejoin: round;
}
.mm2-ship-slide.active .mm2-ship-art .hangar-ship-svg polygon {
  fill: rgba(10, 18, 12, .92);
  stroke: var(--primary-neon, #00FF66);
  filter: drop-shadow(0 0 10px rgba(0, 255, 102, .55));
}
.mm2-ship-slide.locked .mm2-ship-art .hangar-ship-svg polygon {
  stroke: #55555c;
  fill: rgba(10, 12, 14, .9);
}
.mm2-ship-name {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
}
.mm2-ship-slide.active .mm2-ship-name { color: #fff; }
.mm2-ship-badge {
  min-height: 10px;
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim, #475569);
}
.mm2-ship-slide.selected .mm2-ship-badge,
.mm2-ship-slide.active .mm2-ship-badge { color: var(--primary-neon, #00FF66); }

.mm2-carousel-nav {
  position: absolute;
  top: 110px;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(10, 14, 20, .72);
  color: #c8c8d0;
  font-size: 1.05rem;
  line-height: 1;
  box-shadow: none;
  text-transform: none;
}
.mm2-carousel-nav:hover {
  border-color: rgba(0, 255, 102, .45);
  color: var(--primary-neon, #00FF66);
}
.mm2-carousel-prev { left: 0; }
.mm2-carousel-next { right: 0; }

.mm2-carousel-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: -6px;
  min-height: 34px;
  text-align: center;
}
.mm2-carousel-label b {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: #fff;
}
.mm2-carousel-label span {
  font-size: .54rem;
  letter-spacing: .08em;
  color: var(--text-muted, #94A3B8);
  text-transform: uppercase;
}
.mm2-carousel-hint {
  margin-top: 3px;
  text-align: center;
  font-size: .46rem;
  letter-spacing: .09em;
  color: var(--text-dim, #475569);
  text-transform: uppercase;
}

/* ── Play row: difficulty (1/3) + play (2/3), same height ──────── */
#menuMain .mm2-hero > .mm2-play-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  align-items: stretch;
  width: min(520px, 100%);
  max-width: 520px;
  margin: 0 auto 10px;
  padding: 0;
  box-sizing: border-box;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}
#menuMain .mm2-hero > .mm2-play-row .mm2-diff-fab {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border-radius: 12px !important;
  font-size: .6rem !important;
  white-space: nowrap;
}
#menuMain .mm2-hero > .mm2-play-row .mm2-play-btn {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 56px !important;
  margin: 0 !important;
}
#menuMain .mm2-hero > .mm2-play-row .mm2-continue-btn {
  grid-column: 1 / -1;
  width: 100%;
  height: 48px;
  margin: 0;
}

/* Mode tabs sit directly under the play block, identical width. */
#menuMain .mm2-hero > .mm2-modes {
  width: min(520px, 100%);
  max-width: 520px;
  margin: 0 auto 10px;
  box-sizing: border-box;
}
#menuMain .mm2-hero > .mm2-panel {
  width: min(520px, 100%);
  max-width: 520px;
  margin: 0 auto 10px;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  /* Desktop order: carousel → play row → modes → progress panel.
     The sidebar logo already provides the SPACEPRO wordmark, so the
     duplicate content brand is removed entirely. */
  #menuMain .mm2-brand { display: none !important; }
  #menuMain .mm2-hero > .mm2-ship-carousel { order: 0; }
  #menuMain .mm2-hero > .mm2-play-row { order: 1; }
  #menuMain .mm2-hero > .mm2-modes { order: 2; }
  #menuMain .mm2-hero > .mm2-panel { order: 3; }
}

@media (max-width: 899.98px) {
  #menuMain .mm2-hero {
    padding-bottom: calc(12px + clamp(0px, env(safe-area-inset-bottom, 0px), 6px)) !important;
    width: 100%;
    max-width: 100%;
  }
  .mm2-ship-carousel {
    padding: 0 30px;
    margin-bottom: 2px;
  }
  .mm2-carousel-viewport { height: 208px; }
  .mm2-ship-slide {
    flex-basis: 132px;
    width: 132px;
    height: 176px;
  }
  .mm2-ship-art { width: 112px; height: 122px; }
  .mm2-ship-art .hangar-ship-svg { width: 112px; height: 122px; }
  .mm2-carousel-nav { top: 104px; width: 30px; height: 30px; min-width: 30px; }
  #menuMain .mm2-hero > .mm2-ship-carousel { height: 236px; }
  #menuMain[data-main-mode="progress"] .mm2-hero > .mm2-panel[data-mode-panel="progress"] {
    height: 236px;
    margin-bottom: 2px !important;
    justify-content: center;
  }
  #menuMain .mm2-hero > .mm2-play-row,
  #menuMain .mm2-hero > .mm2-modes,
  #menuMain .mm2-hero > .mm2-panel {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 380px) {
  .mm2-ship-slide { flex-basis: 116px; width: 116px; }
  .mm2-ship-art { width: 96px; height: 106px; }
  .mm2-ship-art .hangar-ship-svg { width: 96px; height: 106px; }
  #menuMain .mm2-hero > .mm2-play-row { gap: 8px; }
  #menuMain .mm2-hero > .mm2-play-row .mm2-diff-fab { font-size: .54rem !important; padding: 0 4px !important; }
}

/* ── Progress mode: cards replace the carousel, continue replaces diff ── */
#menuMain[data-main-mode="progress"] .mm2-hero > .mm2-ship-carousel { display: none !important; }
#menuMain[data-main-mode="progress"] .mm2-hero > .mm2-panel { order: -1; }
#menuMain[data-main-mode="progress"] .mm2-hero > .mm2-play-row { order: 1; }
#menuMain[data-main-mode="progress"] .mm2-hero > .mm2-modes { order: 2; }
#menuMain[data-main-mode="progress"] #btnMainDiff { display: none !important; }
#menuMain[data-main-mode="competitive"] .mm2-play-row { grid-template-columns: 1fr 2fr; }
#menuMain[data-main-mode="competitive"] .mm2-play-row .mm2-diff-fab {
  display: flex !important;
  grid-column: 1;
  grid-row: 1;
}
#menuMain[data-main-mode="competitive"] .mm2-play-row .mm2-play-btn {
  grid-column: 2;
  grid-row: 1;
}
#menuMain[data-main-mode="competitive"] .mm2-play-row .mm2-continue-btn {
  display: none !important;
}
#menuMain[data-main-mode="progress"] .mm2-play-row { grid-template-columns: 1fr 2fr; }
#menuMain[data-main-mode="progress"] .mm2-play-row .mm2-play-btn { grid-column: 2; grid-row: 1; }
#menuMain[data-main-mode="progress"] .mm2-play-row .mm2-continue-btn {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 6px;
  font-size: .6rem;
}
#menuMain[data-main-mode="progress"][data-progress-resume="0"] .mm2-play-row { grid-template-columns: 1fr; }
#menuMain[data-main-mode="progress"][data-progress-resume="0"] .mm2-play-row .mm2-play-btn { grid-column: 1; }

.progress-start-choice-card { text-align: center; }
.progress-start-choice-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 10px;
}
.progress-start-choice-btns .nav-item {
  width: 100%;
  height: 48px;
  margin: 0;
}
.progress-start-choice-new {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: #c8c8d0 !important;
  box-shadow: none !important;
}

/* ── Ship details / upgrade modal ─────────────────────────────── */
.ship-details-modal {
  position: fixed;
  inset: 0;
  z-index: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2, 6, 10, .74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ship-details-modal.hidden { display: none !important; }
.ship-details-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(0, 255, 102, .3);
  background: linear-gradient(160deg, rgba(14, 22, 34, .98), rgba(7, 12, 18, .98));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 255, 102, .05);
}
.ship-details-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: #c8c8d0;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: none;
  text-transform: none;
}
.ship-details-close:hover { border-color: rgba(0, 255, 102, .45); color: #00FF66; }

.ship-details-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 24px;
}
.ship-details-art-wrap {
  flex: 0 0 150px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: radial-gradient(circle, rgba(0, 255, 102, .09), transparent 70%);
}
.ship-details-art {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(40deg);
}
.ship-details-art .hangar-ship-svg {
  width: 140px;
  height: 150px;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(0, 255, 102, .22));
}
.ship-details-art .hangar-ship-svg polygon {
  fill: rgba(10, 18, 12, .92);
  stroke: #00FF66;
  stroke-width: 2;
  stroke-linejoin: round;
}
.ship-details-info { flex: 1 1 auto; min-width: 0; }
.ship-details-kicker {
  margin-bottom: 4px;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #00FF66;
  text-transform: uppercase;
}
.ship-details-info h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  text-transform: uppercase;
}
.ship-details-desc {
  margin: 0 0 12px;
  font-size: .66rem;
  line-height: 1.45;
  color: #94A3B8;
}
.ship-details-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ship-details-card .ship-details-action {
  width: auto;
  min-width: 150px;
  height: 40px;
  margin: 0;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid #00FF66;
  background: #00FF66;
  color: #04120A;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  box-shadow: 0 0 20px rgba(0, 255, 102, .22);
  text-transform: uppercase;
}
.ship-details-card .ship-details-action:hover { filter: brightness(1.07); }
.ship-details-tag {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(0, 255, 102, .5);
  background: rgba(0, 255, 102, .08);
  color: #00FF66;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.ship-details-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.ship-details-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .035);
  font-size: .56rem;
  letter-spacing: .03em;
  color: #94A3B8;
}
.ship-details-stat b { color: #fff; font-family: var(--font-mono, monospace); font-size: .6rem; }
.ship-details-upgrades { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.ship-details-upgrades-title {
  margin-bottom: 2px;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: #7a7a84;
  text-transform: uppercase;
}
.ship-details-upg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
}
.ship-details-upg-info { display: flex; align-items: center; gap: 6px; font-size: .62rem; color: #c8c8d0; }
.ship-details-upg-ico { font-size: .9rem; }
.ship-details-upg-lvl { font-size: .56rem; color: #7a7a84; }
.ship-details-card .ship-details-upg-btn {
  width: auto;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 255, 102, .12);
  color: #00FF66;
  font-size: .58rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none;
  text-transform: none;
}
.ship-details-upg-max {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #66666f;
}
.ship-details-balance {
  margin-top: 14px;
  text-align: right;
  font-size: .6rem;
  letter-spacing: .05em;
  color: #7a7a84;
  text-transform: uppercase;
}
.ship-details-balance b { color: #00FF66; }

@media (max-width: 560px) {
  .ship-details-hero {
    flex-direction: column;
    gap: 10px;
    padding-right: 0;
    text-align: center;
  }
  .ship-details-art-wrap { flex-basis: auto; height: 140px; }
  .ship-details-info { text-align: center; }
  .ship-details-actions { justify-content: center; }
  .ship-details-stats { grid-template-columns: 1fr; }
  .ship-details-card { padding: 18px 14px; }
  .ship-details-balance { text-align: center; }
}

/* ==========================================================================
   0.6.5.2 — full-height Records/Achievements + top-left back arrows
   ========================================================================== */

#menuRecords .lb-container,
#menuAchievements .ach-list {
  max-height: none !important;
}

#menuRecords.screen.hidden,
#menuAchievements.screen.hidden {
  display: none !important;
}

@media (max-width: 899.98px) {
  #menuRecords.screen,
  #menuAchievements.screen {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: max(64px, env(safe-area-inset-top, 0px) + 58px) 12px
             calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  #menuRecords .lb-container,
  #menuAchievements .ach-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #menuAchievements .ach-list {
    grid-template-columns: 1fr !important;
    align-content: start;
  }

  #menuHangar.screen,
  #menuShop.screen,
  #menuSettings.screen,
  #menuProfile.screen,
  #menuAudio.screen,
  #menuEffects.screen,
  #menuUiLayout.screen,
  #menuTutorial.screen,
  #menuAuth.screen {
    padding-top: max(64px, env(safe-area-inset-top, 0px) + 58px) !important;
  }
}

/* Back arrow: fixed top-left, inside a safe margin, on every menu screen. */
.screen button.floating-close-btn,
body.game-active .floating-close-btn {
  display: flex !important;
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top, 0px) + 10px) !important;
  left: max(12px, env(safe-area-inset-left, 0px) + 10px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background: rgba(10, 12, 16, .84) !important;
  color: #fff !important;
  font-size: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5) !important;
  z-index: 400 !important;
}
.floating-close-btn::before {
  content: "←";
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 899.98px) {
  body:not(.game-active) #menuHangar .floating-close-btn,
  body:not(.game-active) #menuShop .floating-close-btn,
  body:not(.game-active) #menuRecords .floating-close-btn,
  body:not(.game-active) #menuAchievements .floating-close-btn,
  body:not(.game-active) #menuSettings .floating-close-btn,
  body:not(.game-active) #menuProfile .floating-close-btn,
  #menuAudio .floating-close-btn,
  #menuEffects .floating-close-btn,
  #menuUiLayout .floating-close-btn,
  #menuTutorial .floating-close-btn,
  #menuAuth .floating-close-btn,
  #menuDevAuth .floating-close-btn,
  #menuDevTools .floating-close-btn {
    display: flex !important;
  }
}

@media (min-width: 900px) {
  .screen button.floating-close-btn,
  body.game-active .floating-close-btn {
    display: flex !important;
    left: calc(240px + 12px + env(safe-area-inset-left, 0px)) !important;
    top: max(16px, env(safe-area-inset-top, 0px) + 14px) !important;
  }
}

/* ==========================================================================
   Phone landscape — scaled PC-style shell (sidebar + proportional controls)
   ========================================================================== */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1100px) {
  #mm2BottomNav { display: none !important; }
  #profileWidget,
  #xpWidget,
  #menuMain .mm2-mobile-logo,
  #menuMain .mm2-mobile-tutorial-fab,
  #menuMain .mm2-brand,
  #menuMain .mm-footer { display: none !important; }

  /* Compact PC sidebar */
  #mm2Sidebar.visible {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 140px !important;
    padding: 8px 8px !important;
    border-right: 1px solid var(--mm-border, #2a2a2e);
    background: #0a0a0c;
    z-index: 300;
  }
  .mm2-sidebar-logo { display: flex !important; align-items: center; gap: 5px; padding: 2px 6px 8px; flex: 0 0 auto; }
  .mm2-sidebar-logo-img { height: 12px !important; width: auto !important; display: block; }
  .mm2-sidebar-dot { width: 5px !important; height: 5px !important; flex: 0 0 auto; }
  .mm2-sidebar-sep { display: block !important; height: 1px; margin: 0 6px 8px; background: var(--mm-border, #2a2a2e); flex: 0 0 auto; }
  .mm2-sidebar-nav { flex: 1 1 auto; display: flex !important; flex-direction: column; justify-content: center; gap: 2px; min-height: 0; }
  .mm2-side-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    font-size: .52rem !important;
    font-weight: 700;
    letter-spacing: .02em;
    color: #8e8e9f;
    background: transparent !important;
    border: 1px solid transparent !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
    box-shadow: none !important;
    text-transform: none !important;
  }
  .mm2-side-link .mm2-side-ico,
  .mm2-side-link .mm2-side-ico img { width: 14px !important; height: 14px !important; }
  .mm2-side-link .mm2-ico-on { display: none !important; }
  .mm2-side-link.active .mm2-ico-off { display: none !important; }
  .mm2-side-link.active .mm2-ico-on { display: block !important; }
  .mm2-side-link.active {
    color: var(--mm-green, #39ff14) !important;
    background: rgba(57, 255, 20, .08) !important;
    border-color: rgba(57, 255, 20, .35) !important;
  }
  .mm2-side-link.active::after { display: none !important; content: none !important; }
  .mm2-sidebar-profile {
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 6px !important;
    margin: 0 !important;
    border: 1px solid var(--mm-border, #2a2a2e) !important;
    border-radius: 8px !important;
    background: #101012 !important;
    flex: 0 0 auto;
  }
  .mm2-sidebar-profile.hidden { display: none !important; }
  .mm2-sidebar-profile .pw-avatar { width: 24px !important; height: 24px !important; font-size: 12px !important; }
  .mm2-sidebar-profile-name-row { font-size: .55rem !important; gap: 4px; }
  .mm2-sidebar-level { font-size: .46rem !important; margin: 1px 0 0 !important; }
  .mm2-sidebar-profile .mm2-xp-progress-row,
  .mm2-sidebar-profile .mm2-xp-progress { display: none !important; }

  /* Reserve sidebar width on dashboard screens */
  #menuMain.mm-main.screen.mm2-shell,
  #menuHangar.screen,
  #menuShop.screen,
  #menuRecords.screen,
  #menuAchievements.screen,
  #menuSettings.screen,
  #menuProfile.screen,
  #menuAudio.screen,
  #menuEffects.screen,
  #menuUiLayout.screen,
  #menuTutorial.screen {
    padding-left: 140px !important;
  }

  #menuMain.mm2-shell .mm2-main-col { padding: 6px 10px !important; overflow: hidden !important; }
  #menuMain .mm2-topbar { display: flex !important; order: 0 !important; width: 100% !important; margin: 0 0 4px !important; }
  #menuMain .mm2-topbar-right { margin-left: auto !important; gap: 6px; }
  #menuMain .mm2-xp-chip,
  #menuMain .mm2-ver-chip { display: inline-flex !important; padding: 3px 8px !important; font-size: .55rem !important; }
  #menuMain .mm2-journal-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; }

  #menuMain .mm2-hero {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  #menuMain .mm2-hero > .mm2-ship-carousel {
    height: 150px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
  }
  #menuMain .mm2-carousel-viewport { height: 118px !important; }
  #menuMain .mm2-ship-slide {
    flex-basis: 86px !important;
    width: 86px !important;
    height: 96px !important;
  }
  #menuMain .mm2-ship-art { width: 64px !important; height: 70px !important; }
  #menuMain .mm2-ship-art .hangar-ship-svg {
    width: 64px !important;
    height: 70px !important;
    animation: none !important;
  }
  #menuMain .mm2-ship-name { font-size: .45rem; }
  #menuMain .mm2-ship-badge { min-height: 8px; font-size: .4rem; }
  #menuMain .mm2-carousel-label { margin-top: -4px; min-height: 20px; }
  #menuMain .mm2-carousel-label b { font-size: .6rem; }
  #menuMain .mm2-carousel-label span { font-size: .45rem; }
  #menuMain .mm2-carousel-hint { display: none !important; }

  #menuMain .mm2-hero > .mm2-play-row {
    grid-template-columns: 1fr 2fr;
    width: min(520px, 100%) !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    gap: 8px;
  }
  #menuMain .mm2-hero > .mm2-play-row .mm2-diff-fab,
  #menuMain .mm2-hero > .mm2-play-row .mm2-play-btn,
  #menuMain .mm2-hero > .mm2-play-row .mm2-continue-btn {
    height: 44px !important;
    font-size: .58rem !important;
  }
  #menuMain .mm2-hero > .mm2-modes {
    width: min(520px, 100%) !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }
  #menuMain .mm2-mode-tab { height: 34px !important; padding: 0 8px !important; font-size: .52rem !important; }
  #menuMain .mm2-hero > .mm2-panel { width: min(520px, 100%) !important; max-width: 520px !important; margin: 0 auto !important; }
  #menuMain[data-main-mode="progress"] .mm2-hero > .mm2-panel[data-mode-panel="progress"] {
    height: 150px !important;
    margin-bottom: 0 !important;
    justify-content: center;
  }

  /* Records / achievements fill the whole remaining height */
  #menuRecords.screen,
  #menuAchievements.screen {
    padding-top: 46px !important;
    padding-bottom: 6px !important;
    padding-right: 10px !important;
  }

  #menuHangar.screen,
  #menuShop.screen,
  #menuSettings.screen,
  #menuProfile.screen,
  #menuAudio.screen,
  #menuEffects.screen,
  #menuUiLayout.screen,
  #menuTutorial.screen,
  #menuAuth.screen,
  #menuDevAuth.screen,
  #menuDevTools.screen {
    padding-top: 46px !important;
    padding-bottom: 8px !important;
    overflow-y: auto !important;
  }

  /* Arrows sit to the right of the compact sidebar */
  .screen button.floating-close-btn,
  body.game-active .floating-close-btn {
    left: calc(140px + 10px + env(safe-area-inset-left, 0px)) !important;
    top: max(8px, env(safe-area-inset-top, 0px) + 6px) !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
  }
  .floating-close-btn::before { font-size: 17px; }
}

/* ==========================================================================
   0.6.5.2 — Shop blocks, avatar rail, quieter ship art, settings redesign
   ========================================================================== */

/* No ambient motion on menu ship art. */
.mm2-ship-art .hangar-ship-svg,
.lobby-ship-preview svg {
  animation: none !important;
}

/* ── Shop: equal 2/3-column blocks ─────────────────────────────── */
#menuShop .mm2-sub-scroll {
  width: 100% !important;
  max-width: 980px !important;
  padding-bottom: 12px !important;
}
#shopSections {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  width: 100% !important;
}
@media (min-width: 1000px) {
  #shopSections { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
#shopSections .shop-section {
  display: flex !important;
  flex-direction: column !important;
  height: auto;
  min-height: 0;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
#shopSections .shop-section[data-slot="xp"] { grid-column: auto !important; }
#shopSections .shop-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-bottom: 8px;
  min-width: 0;
}
#shopSections .shop-section-ico { font-size: 1rem; }
#shopSections .shop-section-title {
  font-size: .72rem !important;
  font-weight: 800;
  word-break: break-word;
  min-width: 0;
}
#shopSections .shop-section-effect {
  width: 100%;
  font-size: .54rem !important;
  line-height: 1.2;
  color: #7dffc4 !important;
}
#shopSections .shop-active-badge {
  margin-left: 0 !important;
  font-size: .48rem !important;
  padding: 3px 7px !important;
  max-width: 100%;
}
#shopSections .shop-item-row {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
#shopSections .shop-item-btn {
  position: relative;
  flex: 1 1 0;
  min-height: 42px;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  border-radius: 9px !important;
}
#shopSections .shop-item-dur {
  font-size: .56rem !important;
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}
#shopSections .shop-item-price { font-size: .6rem !important; }
#shopSections .shop-item-best .shop-item-dur { padding-right: 52px; }
#shopSections .shop-best-badge {
  top: 5px;
  right: 5px;
  max-width: calc(100% - 10px);
  font-size: .42rem;
  padding: 2px 4px;
  line-height: 1.1;
}
@media (max-width: 420px) {
  #shopSections { gap: 8px !important; }
  #shopSections .shop-section { padding: 9px !important; }
  #shopSections .shop-item-btn { min-height: 38px; padding: 5px 6px !important; }
  #shopSections .shop-item-dur { font-size: .52rem !important; }
  #shopSections .shop-item-price { font-size: .55rem !important; }
  #shopSections .shop-section-title { font-size: .66rem !important; }
  #shopSections .shop-best-badge { font-size: .38rem; padding: 1px 3px; }
  #shopSections .shop-item-best .shop-item-dur { padding-right: 42px; }
}

/* ── Profile: one-row avatar carousel, larger choices ──────────── */
.avatar-selector.pp-avatars {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 18px !important;
  padding: 10px 2px 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.avatar-selector.pp-avatars::-webkit-scrollbar { display: none; }
.avatar-selector .av-option {
  flex: 0 0 auto !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 30px !important;
  line-height: 1;
  border-radius: 50% !important;
  border: 2px solid #33343a !important;
  background: #151519 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  scroll-snap-align: center;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.avatar-selector .av-option:hover { transform: translateY(-2px); }
.avatar-selector .av-option.av-selected {
  border-color: #39ff14 !important;
  background: rgba(57, 255, 20, .1) !important;
  box-shadow: 0 0 18px rgba(57, 255, 20, .38) !important;
}
@media (max-width: 899.98px) {
  .avatar-selector .av-option {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    font-size: 28px !important;
  }
}

/* ── Settings: card grid redesign ──────────────────────────────── */
#menuSettings.screen.hidden { display: none !important; }
#menuSettings.screen {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  padding: max(64px, env(safe-area-inset-top, 0px) + 58px) 14px
           max(20px, env(safe-area-inset-bottom, 0px) + 14px) !important;
}
#menuSettings > h2 {
  margin: 0 0 14px !important;
  font-size: 1.35rem !important;
  letter-spacing: .18em !important;
  color: #fff !important;
  text-shadow: none !important;
}
#menuSettings .settings-tabs {
  width: min(860px, 100%) !important;
  margin: 0 auto 14px !important;
  padding: 4px !important;
  gap: 4px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .035) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
}
#menuSettings .settings-tabs .nav-item {
  flex: 1 1 0 !important;
  width: auto !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: none !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #8e8e9f !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  box-shadow: none !important;
}
#menuSettings .settings-tabs .nav-item.active {
  background: rgba(57, 255, 20, .12) !important;
  color: #39ff14 !important;
}
#settingsGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: min(860px, 100%) !important;
  max-height: none !important;
  overflow: visible !important;
  align-content: start;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#settingsGrid > .setting-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 98px;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)) !important;
  box-shadow: none !important;
}
#settingsGrid > .setting-row[data-settings-group="sound"] { grid-column: auto !important; }
#settingsGrid > .setting-row[data-settings-group="legacy"] { display: none !important; }
.setting-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8e8e9f;
}
.setting-card-icon { font-size: .95rem; line-height: 1; }
.setting-card-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#settingsGrid > .setting-row .setting-card-value {
  margin-top: auto;
  font-size: .68rem !important;
  font-weight: 700;
  color: #39ff14 !important;
  font-family: var(--font-mono, monospace);
}
#menuSettings #settingsGrid > .setting-row > .nav-item,
#menuSettings #settingsGrid > .setting-row > button {
  width: 100% !important;
  max-width: none !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  font-size: .64rem !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#menuSettings #settingsGrid > .setting-row .joy-range {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: auto;
}
#settingsGrid > .setting-row.settings-nav::after {
  content: "›";
  align-self: flex-end;
  color: #5a5a62;
  font-size: 1.1rem;
  line-height: 1;
}
#menuSettings #devContainer {
  width: min(860px, 100%) !important;
  margin: 14px auto 4px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
}
#menuSettings .floating-close-btn { display: flex !important; }
@media (max-width: 899.98px) {
  #settingsGrid { grid-template-columns: 1fr !important; width: 100% !important; }
  #menuSettings .settings-tabs { width: 100% !important; }
}
@media (min-width: 1200px) {
  #settingsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: min(1100px, 100%) !important; }
  #menuSettings .settings-tabs { width: min(1100px, 100%) !important; }
}

/* === AUTO-PATCH: HEAT BAR & RESPONSIVE SETTINGS START === */
/* ==========================================================================
   FIX: Постоянная шкала перегрева + адаптивные настройки (ПК и Телефон)
   ========================================================================== */

/* Шкала перегрева всегда видна в бою */
#gameUI .heat-bar-frame {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Контейнер экрана настроек */
#menuSettings.screen.hidden {
  display: none !important;
}

#menuSettings.screen {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  padding-top: max(60px, env(safe-area-inset-top, 0px) + 52px) !important;
  padding-right: 16px !important;
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  padding-left: 16px !important;
}

/* Отступ под левый сайдбар на ПК (когда игра не запущена) */
@media (min-width: 900px) {
  body:not(.game-active) #menuSettings.screen,
  body:not(.game-active) #menuEffects.screen,
  body:not(.game-active) #menuUiLayout.screen {
    padding-left: calc(240px + 32px) !important;
    padding-right: 32px !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  body.game-active #menuSettings.screen,
  body.game-active #menuEffects.screen,
  body.game-active #menuUiLayout.screen {
    padding-left: 32px !important;
    padding-right: 32px !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
}

/* Отступ под компактный сайдбар в горизонтальном режиме на телефоне */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1100px) {
  body:not(.game-active) #menuSettings.screen,
  body:not(.game-active) #menuEffects.screen,
  body:not(.game-active) #menuUiLayout.screen {
    padding-left: calc(140px + 16px) !important;
    padding-right: 16px !important;
    padding-top: 44px !important;
    padding-bottom: 24px !important;
  }
}

#menuSettings > h2 {
  margin: 0 0 16px !important;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  color: #F1F5F9 !important;
  text-shadow: none !important;
  flex: 0 0 auto !important;
}

/* Вкладки Управление / Графика / Звук */
#menuSettings .settings-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 5px !important;
  width: min(780px, 100%) !important;
  margin: 0 auto 18px !important;
  border-radius: 14px !important;
  background: rgba(15, 21, 32, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

#menuSettings .settings-tabs .nav-item {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #94A3B8 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  box-shadow: none !important;
  transform: none !important;
}

#menuSettings .settings-tabs .nav-item:hover {
  color: #F1F5F9 !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

#menuSettings .settings-tabs .nav-item.active {
  background: rgba(0, 255, 102, 0.14) !important;
  border-color: rgba(0, 255, 102, 0.35) !important;
  color: #00FF66 !important;
}

/* Сетка карточек настроек (специфичность 2 ID перебивает старые медиазапросы) */
#menuSettings #settingsGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: min(780px, 100%) !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  align-content: start !important;
}

@media (max-width: 899.98px) {
  #menuSettings .settings-tabs,
  #menuSettings #settingsGrid {
    width: min(500px, 100%) !important;
  }
  #menuSettings #settingsGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (orientation: landscape) and (max-height: 540px) and (max-width: 1100px) {
  #menuSettings .settings-tabs,
  #menuSettings #settingsGrid {
    width: 100% !important;
  }
  #menuSettings #settingsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Карточка отдельной настройки */
#menuSettings #settingsGrid > .setting-row,
#menuSettings #settingsGrid > .setting-row.setting-row-joy {
  grid-column: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 92px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: linear-gradient(180deg, rgba(20, 28, 42, 0.86), rgba(12, 17, 26, 0.86)) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
  box-sizing: border-box !important;
}

#menuSettings #settingsGrid > .setting-row.settings-nav::after {
  display: none !important;
  content: none !important;
}

/* Шапка карточки: иконка + название слева, значение справа */
#menuSettings #settingsGrid .setting-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #94A3B8 !important;
}

#menuSettings #settingsGrid .setting-card-icon {
  font-size: 1rem !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

#menuSettings #settingsGrid .setting-card-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 1 auto !important;
  text-align: left !important;
}

#menuSettings #settingsGrid .setting-card-value {
  margin: 0 0 0 auto !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #00FF66 !important;
  font-family: var(--font-mono, monospace) !important;
  flex: 0 0 auto !important;
}

/* Кнопки внутри карточек настроек */
#menuSettings #settingsGrid > .setting-row > .nav-item,
#menuSettings #settingsGrid > .setting-row > button {
  width: 100% !important;
  max-width: none !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0, 255, 102, 0.28) !important;
  background: rgba(0, 255, 102, 0.08) !important;
  color: #F1F5F9 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#menuSettings #settingsGrid > .setting-row > .nav-item:hover,
#menuSettings #settingsGrid > .setting-row > button:hover {
  background: rgba(0, 255, 102, 0.15) !important;
  border-color: rgba(0, 255, 102, 0.55) !important;
  color: #FFFFFF !important;
}

#menuSettings #settingsGrid > .setting-row > .nav-item:active,
#menuSettings #settingsGrid > .setting-row > button:active {
  transform: scale(0.98) !important;
  background: #00FF66 !important;
  color: #04120A !important;
}

/* Ползунки (range) внутри карточек настроек */
#menuSettings #settingsGrid input[type="range"].joy-range {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 36px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

#menuSettings #settingsGrid input[type="range"].joy-range::-webkit-slider-runnable-track {
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(0, 255, 102, 0.35) !important;
}

#menuSettings #settingsGrid input[type="range"].joy-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #00FF66 !important;
  border: 2px solid #06120A !important;
  margin-top: -7px !important;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.5) !important;
}

#menuSettings #settingsGrid input[type="range"].joy-range::-moz-range-track {
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(0, 255, 102, 0.35) !important;
}

#menuSettings #settingsGrid input[type="range"].joy-range::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #00FF66 !important;
  border: 2px solid #06120A !important;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.5) !important;
}

/* Подэкран «Эффекты» */
#menuEffects #effectsGrid {
  width: min(460px, 100%) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}

#menuEffects #effectsGrid .setting-row {
  width: 100% !important;
  padding: 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(16, 22, 34, 0.85) !important;
  gap: 10px !important;
}

#menuEffects #effectsGrid .setting-row .nav-item {
  width: 100% !important;
  margin: 0 !important;
}
/* === AUTO-PATCH: HEAT BAR & RESPONSIVE SETTINGS END === */


/* ==========================================================================
   SPACEPRO — PROGRESS MODE 2.0 UI/UX REDESIGN (MAIN MENU, MODAL & PC/MOBILE HUD)
   ========================================================================== */

:root {
  --pm-attack: #FF8A00;
  --pm-attack-bg: rgba(255, 138, 0, 0.12);
  --pm-defense: #00D2FF;
  --pm-defense-bg: rgba(0, 210, 255, 0.12);
  --pm-tactical: #39FF14;
  --pm-tactical-bg: rgba(57, 255, 20, 0.12);
}

#menuMain[data-main-mode="progress"] .mm2-hero > .mm2-panel[data-mode-panel="progress"] {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto 10px !important;
  width: min(520px, 100%) !important;
  max-width: 520px !important;
  justify-content: flex-start !important;
}

#progressLoadout.progress-loadout {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

.pm-scout-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(16, 24, 36, 0.92), rgba(10, 14, 22, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.pm-slots-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

/* PC In-Run Card Dock: Aligned in Left HUD Column below .stats-panel */
@media (min-width: 900px) {
  #cardBar.card-bar {
    position: absolute !important;
    left: 16px !important;
    top: 268px !important;
    bottom: auto !important;
    right: auto !important;
    transform: none !important;
    width: 200px !important;
    max-width: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    z-index: 65 !important;
  }
}

/* Mobile In-Run Card Dock: Sleek Bottom-Center Thumb Bar */
@media (max-width: 899.98px) {
  #cardBar.card-bar {
    position: absolute !important;
    left: 50% !important;
    bottom: max(14px, env(safe-area-inset-bottom, 0px) + 10px) !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: min(390px, 94vw) !important;
    max-width: 94vw !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 7px !important;
    justify-content: center !important;
    z-index: 75 !important;
  }
}

/* ==========================================================================
   SPACEPRO — PROGRESS MODE 2.1 UI/UX REDESIGN (HORIZONTAL SUBTLE BOTTOM DOCK)
   ========================================================================== */

:root {
  --pm-attack: #FF8A00;
  --pm-attack-bg: rgba(255, 138, 0, 0.12);
  --pm-defense: #00D2FF;
  --pm-defense-bg: rgba(0, 210, 255, 0.12);
  --pm-tactical: #39FF14;
  --pm-tactical-bg: rgba(57, 255, 20, 0.12);
}

#menuMain[data-main-mode="progress"] .mm2-hero > .mm2-panel[data-mode-panel="progress"] {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto 10px !important;
  width: min(520px, 100%) !important;
  max-width: 520px !important;
  justify-content: flex-start !important;
}

/* Unified Horizontal Bottom-Center Card Dock (PC & Mobile) */
#cardBar.card-bar {
  position: absolute !important;
  left: 50% !important;
  bottom: max(18px, env(safe-area-inset-bottom, 0px) + 12px) !important;
  top: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(470px, 94vw) !important;
  max-width: 94vw !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 10px !important;
  z-index: 72 !important;
}

button.pm-run-card {
  flex: 1 1 0 !important;
  max-width: 152px !important;
  height: 50px !important;
  background: rgba(8, 12, 18, 0.68) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  opacity: 0.86 !important;
}

/* === RESTORE: main menu play row widths & stable hero layout === */
body #menuMain .mm2-hero > .mm2-panel[data-mode-panel="competitive"],
body #menuMain .mm2-hero > .mm2-panel[data-mode-panel="progress"] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
}

#menuMain .mm2-hero > .mm2-play-row {
  display: grid !important;
  grid-template-columns: 1fr 2fr !important;
  width: min(520px, 100%) !important;
  max-width: 520px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 10px !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

#menuMain[data-main-mode="progress"][data-progress-resume="0"] .mm2-hero > .mm2-play-row {
  grid-template-columns: 1fr !important;
}

#menuMain .mm2-hero > .mm2-play-row > .mm2-play-btn {
  grid-column: 2;
  grid-row: 1;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
}

#menuMain[data-main-mode="progress"][data-progress-resume="0"] .mm2-hero > .mm2-play-row > .mm2-play-btn {
  grid-column: 1 !important;
}

#menuMain .mm2-hero > .mm2-play-row > .mm2-diff-fab {
  grid-column: 1;
  grid-row: 1;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
}

#menuMain .mm2-hero > .mm2-play-row > .mm2-continue-btn {
  grid-column: 1;
  grid-row: 1;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 0 8px !important;
}

@media (max-width: 899.98px) {
  #menuMain .mm2-hero > .mm2-play-row > .mm2-play-btn,
  #menuMain .mm2-hero > .mm2-play-row > .mm2-diff-fab,
  #menuMain .mm2-hero > .mm2-play-row > .mm2-continue-btn {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}

/* PC: Progress HUD back to top-center, slightly larger. Mobile keeps docked layout. */
@media (min-width: 900px) {
  body.game-active #progressHud.progress-hud {
    position: absolute !important;
    top: max(16px, env(safe-area-inset-top, 0px) + 10px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    z-index: 76 !important;
  }
  body.game-active #progressHud .ph-chip {
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 0.66rem !important;
    gap: 6px !important;
  }
  body.game-active #progressHud .ph-chip b {
    font-size: 0.78rem !important;
  }
}

@media (max-width: 899.98px) {
  .status-area { gap: 2px; }
  .heat-bar-container,
  .heat-bar-frame,
  .stats-panel {
    margin-bottom: 1px;
    margin-top: 1px;
  }
}

/* Stable hero height: logo + play button stay equidistant across mode switches */
@media (min-width: 900px) {
  #menuMain .mm2-hero > .mm2-ship-carousel {
    height: 266px !important;
    min-height: 266px !important;
    max-height: 266px !important;
  }
  body #menuMain[data-main-mode="progress"] .mm2-hero > .mm2-panel[data-mode-panel="progress"] {
    height: 266px !important;
    min-height: 266px !important;
    max-height: 266px !important;
  }
}
@media (max-width: 899.98px) {
  #menuMain .mm2-hero > .mm2-ship-carousel {
    height: 236px !important;
    min-height: 236px !important;
    max-height: 236px !important;
  }
  body #menuMain[data-main-mode="progress"] .mm2-hero > .mm2-panel[data-mode-panel="progress"] {
    height: 236px !important;
    min-height: 236px !important;
    max-height: 236px !important;
  }
}

/* Fixed hero slot: carousel and progress panel occupy the SAME box */
.mm2-hero-slot {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: 236px;
  margin: 0 auto;
  flex: 0 0 auto;
}
.mm2-hero-slot > .mm2-ship-carousel {
  position: absolute;
  inset: 0;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 30px !important;
  box-sizing: border-box;
}
.mm2-hero-slot > .mm2-panel[data-mode-panel="progress"] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.mm2-hero-slot > .mm2-panel[data-mode-panel="progress"].hidden {
  display: none !important;
}
#menuMain[data-main-mode="progress"] .mm2-hero-slot > .mm2-ship-carousel {
  display: none !important;
}

@media (min-width: 900px) {
  .mm2-hero-slot {
    height: 266px;
    padding: 0 44px;
    box-sizing: border-box;
  }
  .mm2-hero-slot > .mm2-ship-carousel {
    padding: 0 !important;
  }
  .mm2-hero-slot > .mm2-panel[data-mode-panel="progress"] {
    left: 50% !important;
    right: auto !important;
    width: min(620px, 100%) !important;
    max-width: 620px !important;
    transform: translateX(-50%) !important;
  }
  #progressLoadout.progress-loadout {
    gap: 10px !important;
  }
  #progressLoadout .pm-scout-banner {
    height: 52px !important;
    padding: 8px 14px !important;
  }
  #progressLoadout .pm-scout-icon {
    width: 34px !important;
    height: 34px !important;
  }
  #progressLoadout .pm-scout-icon svg {
    width: 23px !important;
    height: 23px !important;
  }
  #progressLoadout .pm-scout-name { font-size: 0.78rem !important; }
  #progressLoadout .pm-scout-tag { font-size: 0.52rem !important; }
  #progressLoadout .pm-scout-sub { font-size: 0.6rem !important; }
  #progressLoadout .pm-arsenal-open-btn {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 0.62rem !important;
  }
  #progressLoadout .pm-slot-card {
    height: 124px !important;
    padding: 8px 9px 7px !important;
  }
  #progressLoadout .pm-slot-cat { font-size: 0.58rem !important; }
  #progressLoadout .pm-slot-ico { font-size: 1.18rem !important; }
  #progressLoadout .pm-slot-name { font-size: 0.68rem !important; }
  #progressLoadout .pm-slot-meta { font-size: 0.56rem !important; }
}

/* Boss upgrade modal: brief grey non-interactive grace period after appearing */
.progress-modal.pm-modal-locked {
  filter: grayscale(1);
  opacity: 0.55;
  pointer-events: none !important;
}

/* PC: progress chips must stay hidden outside Progress mode */
@media (min-width: 900px) {
  body.game-active #progressHud.progress-hud.hidden {
    display: none !important;
  }
}

/* Mobile: stats panel sits right under HP/heat (and under chips in Progress) */
@media (max-width: 899.98px) {
  body.game-active .stats-panel {
    top: calc(max(54px, env(safe-area-inset-top, 0px) + 44px, var(--tg-content-safe-top, 0px) + 44px) + 60px) !important;
    margin-top: 0 !important;
  }
  body.game-active:has(#progressHud.progress-hud:not(.hidden)) .stats-panel {
    top: calc(max(54px, env(safe-area-inset-top, 0px) + 44px, var(--tg-content-safe-top, 0px) + 44px) + 84px) !important;
  }
}

/* ==========================================================================
   0.6.5.6 — Settings folders, stable main-menu geometry, Progress readability
   ========================================================================== */

/* Settings must actually filter by tab. The card styles below use
   `#menuSettings #settingsGrid > .setting-row { display:flex !important }`,
   which outranks the older tab rules — repeat the hide rule with matching
   specificity so each folder shows only its own rows. */
#menuSettings #settingsGrid > .setting-row[data-settings-group="legacy"] {
  display: none !important;
}
#menuSettings[data-settings-tab="controls"] #settingsGrid > .setting-row[data-settings-group="graphics"],
#menuSettings[data-settings-tab="controls"] #settingsGrid > .setting-row[data-settings-group="sound"],
#menuSettings[data-settings-tab="graphics"] #settingsGrid > .setting-row[data-settings-group="controls"],
#menuSettings[data-settings-tab="graphics"] #settingsGrid > .setting-row[data-settings-group="sound"],
#menuSettings[data-settings-tab="sound"] #settingsGrid > .setting-row[data-settings-group="controls"],
#menuSettings[data-settings-tab="sound"] #settingsGrid > .setting-row[data-settings-group="graphics"] {
  display: none !important;
}

/* The hero slot owns a fixed box, so the logo and the play row keep the exact
   same screen position in both modes (carousel and progress deck swap inside
   that same box, never resize it). */
#menuMain .mm2-hero-slot { flex: 0 0 auto !important; }
#menuMain .mm2-hero > .mm2-play-row,
#menuMain .mm2-hero > .mm2-modes,
#menuMain .mm2-mobile-logo { flex: 0 0 auto !important; }
/* Кнопка входа — всегда последняя в hero и в обоих режимах: без этого
   в «Прогрессе» она вставала между слотом и кнопкой игры и сдвигала
   play-row с табами режимов. */
#menuMain .mm2-hero > #spMainLoginBtn {
  order: 9 !important;
  flex: 0 0 auto !important;
}
#menuMain .mm2-hero > .mm2-play-row { order: 1 !important; }
#menuMain .mm2-hero > .mm2-modes { order: 2 !important; }
#menuMain .mm2-hero-slot > .mm2-panel[data-mode-panel="progress"] { overflow: hidden !important; }
#menuMain #progressLoadout { overflow-y: auto; overflow-x: hidden; }

/* Progress keeps the same two-column play row as Competitive: the left cell
   is ПРОДОЛЖИТЬ (dimmed when there is no save). That way the ИГРАТЬ button
   never changes position or width when switching modes. */
#menuMain[data-main-mode="progress"] .mm2-hero > .mm2-play-row,
#menuMain[data-main-mode="progress"][data-progress-resume="0"] .mm2-hero > .mm2-play-row {
  grid-template-columns: 1fr 2fr !important;
}
#menuMain[data-main-mode="progress"] .mm2-hero > .mm2-play-row > .mm2-play-btn,
#menuMain[data-main-mode="progress"][data-progress-resume="0"] .mm2-hero > .mm2-play-row > .mm2-play-btn {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
#menuMain[data-main-mode="progress"] .mm2-hero > .mm2-play-row > .mm2-continue-btn,
#menuMain[data-main-mode="progress"] .mm2-hero > .mm2-play-row > .mm2-continue-btn.hidden {
  display: flex !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 6px !important;
}
#menuMain[data-main-mode="progress"] .mm2-hero > .mm2-play-row > .mm2-continue-btn.is-off,
#menuMain[data-main-mode="progress"] .mm2-hero > .mm2-play-row > .mm2-continue-btn.hidden {
  opacity: .38;
  filter: grayscale(1);
  pointer-events: none;
}

@media (max-width: 899.98px) {
  /* Copyright strip used to sit underneath the fixed bottom nav. */
  #menuMain .mm-footer { display: none !important; }

  /* Progress deck: readable type on a phone, still inside the 236px slot. */
  #progressLoadout .pm-scout-banner {
    height: auto !important;
    min-height: 54px !important;
    padding: 7px 10px !important;
  }
  #progressLoadout .pm-scout-name { font-size: 0.8rem !important; }
  #progressLoadout .pm-scout-tag {
    font-size: 0.54rem !important;
    padding: 2px 6px !important;
    letter-spacing: 0.02em !important;
  }
  #progressLoadout .pm-scout-sub {
    font-size: 0.62rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  #progressLoadout .pm-arsenal-open-btn {
    height: 32px !important;
    font-size: 0.62rem !important;
    padding: 0 10px !important;
  }
  #progressLoadout .pm-slot-card {
    height: 112px !important;
    padding: 7px 8px 6px !important;
  }
  #progressLoadout .pm-slot-cat { font-size: 0.54rem !important; letter-spacing: 0.02em !important; }
  #progressLoadout .pm-slot-name { font-size: 0.72rem !important; letter-spacing: 0 !important; }
  #progressLoadout .pm-slot-ico { width: 30px; height: 30px; font-size: 1.1rem; }
  #progressLoadout .pm-slot-meta {
    font-size: 0.56rem !important;
    gap: 2px !important;
    letter-spacing: 0 !important;
  }
  #progressLoadout .pm-slot-meta > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #progressLoadout .pm-slot-cd { flex: 0 0 auto; }
  #progressLoadout .pm-slot-empty-txt { font-size: 0.6rem !important; }

  /* Mode tabs were 9px — readable now, still one row. */
  #menuMain .mm2-mode-tab {
    font-size: 0.62rem !important;
    letter-spacing: 0.01em !important;
    padding: 0 6px !important;
  }
}

/* ==========================================================================
   0.6.5.6 — точечные правки UI (по замечаниям)
   ========================================================================== */

@media (min-width: 900px) {
  /* Магазин и достижения: не прижиматься вплотную к сайдбару */
  #menuShop.screen,
  #menuAchievements.screen { padding-left: calc(240px + 16px) !important; }

  /* Список достижений не должен вылезать за экран из-за width:94vw */
  #menuAchievements .ach-list { width: min(880px, 100%) !important; }

  /* Иконки бокового меню — в одной вертикали, не «пляшут» под текст */
  .mm2-side-link { justify-content: flex-start !important; }
  .mm2-side-link .mm2-side-ico { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; }
  .mm2-side-link .mm2-side-ico img { width: 18px !important; height: 18px !important; }
}

/* Достижения: воздух по краям */
#achBody { padding-left: 14px !important; padding-right: 14px !important; }

/* Dev-подпись по центру */
#devContainer { text-align: center !important; }

/* Плашка глобального рейтинга — по ширине таблицы и тоньше */
#spRecordsUpdateSlot {
  max-width: 500px !important;
  margin: 0 auto 10px !important;
  padding: 6px 12px !important;
  font-size: .56rem !important;
  line-height: 1.3 !important;
  gap: 8px !important;
}
#spRecordsUpdateSlot .sp-rec-updates-badge { font-size: .48rem !important; padding: 2px 6px !important; }

/* Карточки вылета чуть выше — растут внутри своего блока */
#menuMain #progressLoadout button.pm-slot-card {
  height: clamp(132px, 19.5vh, 154px) !important;
  min-height: 132px !important;
}

/* Аватарки: горизонтальный свайп/колесо без «залипания» */
#avatarSelector.pp-avatars {
  touch-action: pan-x !important;
  overscroll-behavior-x: contain;
}

/* Телефон: «Обучение» уходит направо — сразу слева от валюты,
   чтобы не наезжать на профиль и нижнюю навигацию. */
@media (max-width: 899.98px) {
  #menuMain .mm2-mobile-tutorial-fab {
    top: max(14px, env(safe-area-inset-top, 0px) + 10px) !important;
    bottom: auto !important;
    left: auto !important;
    right: calc(100px + env(safe-area-inset-right, 0px)) !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 12px !important;
    justify-content: center !important;
  }
  #menuMain .mm2-mobile-tutorial-fab span { display: none !important; }
}

/* Очень узкие экраны (≤340px): профиль и валюта почти вплотную —
   чуть сдвигаем кнопку, чтобы не задеть ни то, ни другое. */
@media (max-width: 340px) {
  #menuMain .mm2-mobile-tutorial-fab {
    right: calc(94px + env(safe-area-inset-right, 0px)) !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }
}

/* Модалка босса: мгновенно, мягкое проявление 2 c, затем кликабельна */
#progressUpgrade.progress-modal:not(.hidden) { animation: spPmFadeIn .32s ease-out; }
@keyframes spPmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spPmReveal {
  from { opacity: .35; filter: grayscale(1); }
  to { opacity: 1; filter: none; }
}
#progressUpgrade .progress-modal-card { opacity: 1; filter: none; }
#progressUpgrade.progress-modal.pm-modal-locked { opacity: 1 !important; filter: none !important; }
#progressUpgrade.progress-modal.pm-modal-locked .progress-modal-card {
  pointer-events: none;
  animation: spPmReveal 2s ease forwards !important;
}

/* ==========================================================================
   0.6.5.7 — TELEGRAM MINI APP FULLSCREEN & SAFE AREA ADAPTATION
   ========================================================================== */

:root {
  --sp-top-safe: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-top, 0px));
}

html.tg-miniapp,
html.tg-miniapp body {
  overscroll-behavior: none !important;
  overflow: hidden !important;
  background: #07090E !important;
}

/* Опциональная светлая подложка под системный статус-бар, если выбран режим
   черных системных иконок (window.SP_TG_STATUS_BAR_MODE = 'black_icons') */
html.tg-miniapp.tg-black-status-icons body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--tg-safe-top, env(safe-area-inset-top, 28px));
  background: #F1F5F9;
  z-index: 2147483600;
  pointer-events: none;
}

/* 1. Главное меню в Telegram Mini App (Мобильный портретный режим):
      опускаем Профиль, Баланс CR и кнопку Обучения ниже кнопок «Закрыть» и «⌄ ⋮» */
@media (max-width: 899.98px) {
  html.tg-miniapp .mm-profile.profile-widget {
    top: calc(var(--sp-top-safe, 56px) + 10px) !important;
    left: max(14px, calc(var(--tg-safe-left, 0px) + 12px)) !important;
  }

  html.tg-miniapp .mm-xp,
  html.tg-miniapp #xpWidget {
    top: calc(var(--sp-top-safe, 56px) + 12px) !important;
    right: max(14px, calc(var(--tg-safe-right, 0px) + 12px)) !important;
  }

  html.tg-miniapp #menuMain .mm2-mobile-tutorial-fab {
    top: calc(var(--sp-top-safe, 56px) + 10px) !important;
    bottom: auto !important;
    left: auto !important;
    right: calc(102px + var(--tg-safe-right, 0px)) !important;
  }

  /* Опускаем логотип SPACEPRO чуть ниже, чтобы он не упирался в смещенный профиль */
  html.tg-miniapp #menuMain .mm2-hero {
    padding-top: calc(var(--sp-top-safe, 56px) + 46px) !important;
  }

  /* Скрываем кнопку ручного Fullscreen в Настройках внутри TG Mini App,
     так как полноэкранный режим управляется самим контейнером Telegram */
  html.tg-miniapp #btnFullscreen {
    display: none !important;
  }
}

/* 2. Второстепенные экраны и кнопка «← Назад» в Telegram Mini App */
html.tg-miniapp .screen button.floating-close-btn,
html.tg-miniapp body.game-active .floating-close-btn {
  top: calc(var(--sp-top-safe, 56px) + 10px) !important;
}

@media (max-width: 899.98px) {
  html.tg-miniapp #menuRecords.screen,
  html.tg-miniapp #menuAchievements.screen,
  html.tg-miniapp #menuHangar.screen,
  html.tg-miniapp #menuShop.screen,
  html.tg-miniapp #menuSettings.screen,
  html.tg-miniapp #menuProfile.screen,
  html.tg-miniapp #menuAudio.screen,
  html.tg-miniapp #menuEffects.screen,
  html.tg-miniapp #menuUiLayout.screen,
  html.tg-miniapp #menuTutorial.screen,
  html.tg-miniapp #menuAuth.screen {
    padding-top: calc(var(--sp-top-safe, 56px) + 56px) !important;
  }
}

/* 3. Боевой интерфейс (HUD, кнопка паузы, чипы Прогресса, статы) в Telegram Mini App */
@media (max-width: 899.98px) {
  html.tg-miniapp body.game-active .status-area {
    top: calc(var(--sp-top-safe, 56px) + 12px) !important;
  }

  html.tg-miniapp body.game-active .pause-btn {
    top: calc(var(--sp-top-safe, 56px) + 12px) !important;
  }

  html.tg-miniapp body.game-active #progressHud.progress-hud {
    top: calc(var(--sp-top-safe, 56px) + 12px) !important;
  }

  html.tg-miniapp body.game-active .stats-panel {
    top: calc(var(--sp-top-safe, 56px) + 64px) !important;
  }

  html.tg-miniapp body.game-active:has(#progressHud.progress-hud:not(.hidden)) .stats-panel {
    top: calc(var(--sp-top-safe, 56px) + 88px) !important;
  }
}