:root {
        --clr-bg-deep:     #0a0514;
        --clr-bg-mid:      #120a2e;
        --clr-bg-panel:    rgba(15, 5, 40, 0.85);

        --clr-neon-pink:   #ff2d78;
        --clr-neon-purple: #c724f5;
        --clr-neon-cyan:   #00e5ff;
        --clr-neon-blue:   #4040ff;
        --clr-neon-orange: #ff6a00;
        --clr-neon-gold:   #ffb300;

        --clr-text-primary:   #e8d5ff;
        --clr-text-secondary: #9070c0;
        --clr-text-accent:    #ff2d78;

        --font-display: 'Tektur', monospace;
        --font-mono:    'Tektur', monospace;

        --panel-pad:    1rem;
        --border-glow:  1px solid rgba(199, 36, 245, 0.4);

        /* Единая ширина блоков центральной колонки кокпита.
           Все стойки (счётчик, чипы, комбо, бусты, лог, тумблеры)
           равняются по ней, чтобы колонка читалась цельной. */
        --center-col-w: 340px;

        --transition-fast: 0.1s ease;
        --transition-mid:  0.25s ease;
      }

      *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        /* Глобальный запрет выделения текста мышью на всей странице игры.
           -webkit-user-select для Safari/старых WebKit, user-select для остальных. */
        -webkit-user-select: none;
                user-select: none;
      }

      html, body {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        background-color: var(--clr-bg-deep);
        color: var(--clr-text-primary);
        font-family: var(--font-mono);
        font-size: 16px;
        -webkit-tap-highlight-color: transparent; /* убираем синюю вспышку при тапе на мобиле */
      }

      /* Фоновые слои */
      /* Фоновая картинка bg.jpg в самой игре (та же, что в приветственном окне).
         Лежит ниже звёзд и интерфейса. ПОДГОНКА положения солнца картинки под
         процедурное .bg-sun — этими тремя параметрами: */
      .bg-photo {
        position: fixed;
        inset: 0;
        z-index: 0;                /* ниже звёзд (canvas=1) и сетки (3) */
        pointer-events: none;
        background-image: url('bg_game.jpg');
        background-repeat: no-repeat;
        /* --- ПАРАМЕТРЫ ПОДГОНКИ (меняй эти два) --- */
        background-size: 140%;     /* масштаб картинки: больше % = крупнее */
        background-position: center 38%; /* положение: 1-е знач = влево/вправо, 2-е = вверх/вниз */
        /* ------------------------------------------ */
      }

      /* Canvas звёздного поля — занимает весь экран позади всего интерфейса */
      #bg-stars-canvas {
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: none;
      }

      /* СОЛНЦЕ ТЕПЕРЬ ПОЗИЦИОНИРУЕТСЯ СТРОГО ОТНОСИТЕЛЬНО ЦЕНТРА КНОПКИ КЛИКА */
      .bg-sun {
        position: absolute;
        z-index: 1; /* Под кнопкой, но внутри click-btn-wrap */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background:
          repeating-linear-gradient(
            to bottom,
            transparent              0px,
            transparent              9px,
            rgba(10, 5, 20, 0.45)    9px,
            rgba(10, 5, 20, 0.45)    10px
          ),
          radial-gradient(
            circle,
            #ffb347 0%,
            #ff6a00 35%,
            #ff2d78 65%,
            transparent 100%
          );
        box-shadow:
          0 0 80px 30px rgba(255, 106, 0, 0.2),
          0 0 160px 60px rgba(255, 45, 120, 0.1);
        pointer-events: none;
        animation: sun-pulse 6s ease-in-out infinite;
        will-change: transform, opacity; /* Оптимизация рендеринга на GPU */
      }

      @keyframes sun-pulse {
        0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.98); }
        50%       { opacity: 1.0; transform: translate(-50%, -50%) scale(1.02); }
      }

      .bg-grid {
        display: none;             /* сетка скрыта полностью (в т.ч. при бусте) */
        position: fixed;
        inset: 0;
        z-index: 3;
        background-image:
          repeating-linear-gradient(
            to bottom,
            rgba(199, 36, 245, 0.20) 0px,
            rgba(199, 36, 245, 0.20) 1px,
            transparent 1px,
            transparent 40px
          ),
          repeating-linear-gradient(
            to right,
            rgba(199, 36, 245, 0.15) 0px,
            rgba(199, 36, 245, 0.15) 1px,
            transparent 1px,
            transparent 60px
          );
        -webkit-mask-image: linear-gradient(to bottom, transparent 30%, black 100%);
                mask-image: linear-gradient(to bottom, transparent 30%, black 100%);
        pointer-events: none;
        
      }

      @keyframes grid-scroll {
        from { background-position: 0 0; }
        to   { background-position: 0 40px; }
      }

      /* ОСНОВНАЯ СЕТКА ИНТЕРФЕЙСА: 3 колонки, центрированные на десктопе */
      .game-layout {
        position: relative;
        z-index: 10;
        width: 100%;
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
        box-sizing: border-box;
        align-items: center;
      }

      @media (min-width: 1024px) {
        .game-layout {
          grid-template-columns: 380px 1fr 380px;
          max-width: 1420px;
          margin: 0 auto;
          min-height: 100vh;
          /* Было height:100vh + overflow:hidden — на ноутбуках ~768px низ
             центральной колонки (лог, REBIRTH) срезался без возможности
             доскроллить. Теперь при нехватке высоты появляется прокрутка. */
          overflow-y: auto;
        }
      }

      /* Общие стили панелей улучшений */
      .panel {
        position: relative;
        background: var(--clr-bg-panel);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: var(--border-glow);
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        box-shadow: 0 8px 30px rgba(10, 5, 20, 0.8);
        height: 100%;
        max-height: 90vh;
        transition: border-color var(--transition-mid), box-shadow var(--transition-mid);
      }

      @media (min-width: 1024px) {
        .panel {
          max-height: 95vh;
        }
        
		/* Избегаем восстановления высоты боковых панелей во время изменения размеров */
        .panel:not(.panel--center) {
          height: auto !important; /* Убрано фиксированное пустое место, рамка сжимается по контенту */
          max-height: 750px !important;
          align-self: center; /* Центрируем панели по вертикали в сетке game-layout */
        }
      } /* FIX: закрыт @media (min-width: 1024px). Раньше скобка отсутствовала,
           из-за чего ВЕСЬ CSS ниже работал только на широких экранах. */


      .panel__header {
        position: relative;
        padding: 0.65rem var(--panel-pad);
        border-bottom: 1px solid rgba(199, 36, 245, 0.25);
        flex-shrink: 0;
      }

      .panel__label {
        font-family: var(--font-display);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        color: var(--clr-neon-cyan);
        text-shadow: 0 0 10px var(--clr-neon-cyan);
        text-align: left;
        line-height: 1.35;
        margin: 0;
      }

      .panel__corner {
        position: absolute;
        width: 10px;
        height: 10px;
        border-color: var(--clr-neon-purple);
        border-style: solid;
        transition: border-color var(--transition-mid);
      }
      .panel__corner--tl { top: 4px;    left: 4px;   border-width: 2px 0 0 2px; }
      .panel__corner--tr { top: 4px;    right: 4px;  border-width: 2px 2px 0 0; }
      .panel__corner--bl { bottom: 4px; left: 4px;   border-width: 0 0 2px 2px; }
      .panel__corner--br { bottom: 4px; right: 4px;  border-width: 0 2px 2px 0; }

      .shop-column {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        padding: 0.7rem;
        overflow-y: auto;
        flex: 1;
      }

      /* Кастомный скроллбар для колонок */
      .shop-column::-webkit-scrollbar {
        width: 4px;
      }
      .shop-column::-webkit-scrollbar-track {
        background: transparent;
      }
      .shop-column::-webkit-scrollbar-thumb {
        background: var(--clr-neon-purple);
        border-radius: 2px;
      }

      /* КАРТОЧКА УЛУЧШЕНИЙ */
      .shop-card {
        position: relative; /* Необходимо для абсолютного позиционирования прогресс-бара */
        overflow: hidden;   /* Предотвращает выход углов прогресс-бара за округленные границы карточки */
        border: 1px solid rgba(199, 36, 245, 0.2);
        border-radius: 4px;
        padding: 0.7rem;
        background: rgba(30, 10, 60, 0.4);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 145px;
        cursor: pointer; /* Вся карточка кликабельна */
        transition: all var(--transition-mid);
      }

      .shop-card--affordable {
        border-color: rgba(199, 36, 245, 0.7);
        background: rgba(50, 15, 90, 0.5);
        box-shadow: 0 0 12px rgba(199, 36, 245, 0.25);
      }

      /* Hover: мягкое усиление свечения рамки и фона — только на доступных карточках.
         Недоступные карточки не реагируют, чтобы не вводить в заблуждение. */
      .shop-card--affordable:hover {
        border-color: rgba(199, 36, 245, 1.0);
        background: rgba(65, 20, 110, 0.65);
        box-shadow: 0 0 22px rgba(199, 36, 245, 0.5);
      }

      /* Active: короткая яркая вспышка в момент клика — сбрасывается мгновенно. */
      .shop-card--affordable:active {
        background: rgba(80, 25, 130, 0.8);
        box-shadow: 0 0 35px rgba(199, 36, 245, 0.75), inset 0 0 18px rgba(199, 36, 245, 0.25);
      }

      .shop-card__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.3rem;
      }

      .shop-card__name {
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: var(--clr-neon-pink);
        text-shadow: 0 0 8px var(--clr-neon-pink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .shop-card__count {
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--clr-neon-cyan);
        background: rgba(0, 229, 255, 0.1);
        border: 1px solid rgba(0, 229, 255, 0.3);
        padding: 0.15rem 0.45rem;
        border-radius: 2px;
      }

      /* Индикатор milestone-множителей [x2], [x4] и т.д. */
      .shop-card__milestone {
        font-family: var(--font-display);
        font-size: 0.8rem;
        font-weight: 900;
        color: var(--clr-neon-gold);
        text-shadow: 0 0 6px var(--clr-neon-gold);
        margin-left: 0.35rem;
      }

      .shop-card__desc {
        font-size: 0.95rem;
        color: var(--clr-text-secondary);
        margin-bottom: 0.5rem;
        line-height: 1.3;
        height: auto;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .shop-card__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        margin-top: auto;
      }

      .shop-card__effect {
        font-size: 0.95rem;
        color: var(--clr-neon-cyan);
        letter-spacing: 0.05em;
        font-weight: 700;
        min-width: 0;            /* уступает место блоку цены */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .shop-card__btn {
        font-family: var(--font-display);
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--clr-bg-deep);
        background: var(--clr-neon-purple);
        border: none;
        border-radius: 2px;
        padding: 0.4rem 0.6rem;
        cursor: pointer;
        transition: all var(--transition-fast);
        /* Свечение цены убрано: цена должна читаться быстро и чётко. */
        white-space: nowrap;     /* цена всегда в одну строку */
        letter-spacing: 0.01em;
        line-height: 1.1;
        flex-shrink: 0;          /* фиолетовый блок держит размер на больших числах */
      }

      .shop-card__btn:hover:not(:disabled) {
        background: var(--clr-neon-pink);
        transform: translateY(-1px);
      }

      .shop-card__btn:disabled {
        background: rgba(100, 60, 140, 0.3);
        color: var(--clr-text-secondary);
        cursor: not-allowed;
        box-shadow: none;
      }

      /* СТРОКА СИНЕРГИИ В КАРТОЧКЕ (ШАГ СИНЕРГИЙ) */
      .shop-card__synergy-wrap {
        min-height: 1em;
        margin-bottom: 0.35rem;
      }

      .shop-card__synergy {
        font-size: 0.82rem;
        color: #39ff8a;
        text-shadow: 0 0 5px rgba(57, 255, 138, 0.4);
        line-height: 1.3;
        border-left: 2px solid rgba(57, 255, 138, 0.4);
        padding-left: 0.4rem;
        margin: 0;
      }

      .shop-card__synergy strong {
        color: #ffffff;
        text-shadow: 0 0 6px rgba(57, 255, 138, 0.8);
      }

      /* НЕОНОВЫЙ ПРОГРЕСС-БАР КАРТОЧКИ (НОВОЕ В ШАГЕ 12) */
      .shop-card__progress-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: rgba(255, 255, 255, 0.03);
      }

      .shop-card__progress-fill {
        height: 100%;
        width: 0%;
        background: var(--clr-neon-cyan);
        box-shadow: 0 0 8px var(--clr-neon-cyan);
        transition: width 0.1s linear;
      }

      /* ЦЕНТРАЛЬНАЯ КЛИК-ЗОНА */
      .panel--center {
        border: none;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* Изменено с center на flex-start для подъема интерфейса */
        padding-top: 0.3rem; /* п6: звание поднято выше */
        gap: 0.85rem; /* Более плотная компоновка для встраивания лога */
        position: relative;
        z-index: 15;
        height: 100%;
      }

      .center-halo {
        position: absolute;
        width: 440px;
        height: 440px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(199, 36, 245, 0.12) 0%,
          transparent 70%
        );
        pointer-events: none;
        animation: halo-pulse 4s ease-in-out infinite;
      }

      @keyframes halo-pulse {
        0%, 100% { transform: scale(1);    opacity: 0.5; }
        50%       { transform: scale(1.08); opacity: 1.0; }
      }

      /* СХЕМА 3 / ЗОНА «служебное»: ряд тумблеров сверху, сжат и приглушён,
         чтобы не перехватывать внимание у счётчика (Зона A). Доступ — 1 клик. */
      .top-controls-row {
        display: flex;
        gap: 0.4rem;
        width: 100%;
        max-width: var(--center-col-w);
        justify-content: space-between;
        z-index: 25;
      }

      /* Шаг 2.2: бейдж-счётчик новых картриджей на кнопке вызова */
      .cartridge-btn-mini {
        position: relative;
      }
      .cartridge-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: var(--clr-neon-pink);
        color: #fff;
        font-size: 0.6rem;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        box-shadow: 0 0 6px var(--clr-neon-pink);
        /* По умолчанию скрыт; показывается через .visible */
        display: none;
      }
      .cartridge-badge.visible { display: block; }

      /* Шаг 2.2: карточка картриджа в панели (по образцу ach-card) */
      .crt-card__price {
        font-family: var(--font-mono);
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--clr-neon-cyan);
        text-shadow: 0 0 5px var(--clr-neon-cyan);
        margin-top: 0.4rem;
      }
      .crt-card--bought .crt-card__price {
        color: var(--clr-text-secondary);
        text-shadow: none;
      }
      .crt-card__buy {
        margin-top: 0.5rem;
        width: 100%;
        font-family: var(--font-mono);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        padding: 0.35rem;
        border-radius: 3px;
        border: 1px solid var(--clr-neon-cyan);
        background: transparent;
        color: var(--clr-neon-cyan);
        cursor: pointer;
        transition: color var(--transition-fast), background var(--transition-fast);
      }
      .crt-card__buy:hover:not(:disabled) {
        background: var(--clr-neon-cyan);
        color: #0a0020;
      }
      .crt-card__buy:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        border-color: var(--clr-text-secondary);
        color: var(--clr-text-secondary);
      }
      .crt-card--bought .crt-card__buy {
        border-color: var(--clr-neon-pink);
        color: var(--clr-neon-pink);
        cursor: default;
        opacity: 1;
      }

      .archive-btn-mini, .audio-control-mini {
        flex: 1;
        background: rgba(25, 10, 55, 0.85);
        border: 1px solid var(--clr-neon-purple);
        padding: 0.35rem 0.4rem;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        font-family: var(--font-display);
        font-size: 0.58rem;
        font-weight: 700;
        color: var(--clr-text-primary);
        transition: all var(--transition-fast);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        box-shadow: 0 0 8px rgba(199, 36, 245, 0.12);
        white-space: nowrap;
        opacity: 0.85;
      }

      .archive-btn-mini:hover, .audio-control-mini:hover {
        border-color: var(--clr-neon-pink);
        color: #fff;
        box-shadow: 0 0 12px rgba(255, 45, 120, 0.5);
        text-shadow: 0 0 5px #fff;
      }

      /* ОБОЛОЧКА КНОПКИ КЛИКА В ЦЕНТРЕ — ТЕПЕРЬ СЛУЖИТ СТЕКОМ ДЛЯ КНОПКИ И СОЛНЦА */
      .click-btn-wrap {
        position: relative;
        z-index: 10;
        /* margin-top: 0.6rem даёт воздух между комбо-панелью и солнцем —
           солнце больше не прижимается к блоку снизу и не наезжает на него сверху */
        margin: 0.6rem 0 0.1rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 260px;
        height: 320px;
      }

      .click-btn {
        position: relative;
        z-index: 10; /* Кнопка строго над солнцем */
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        background: radial-gradient(
          circle at 35% 35%,
          #3a1a7a 0%,
          #1a0a50 40%,
          #0d0535 100%
        );
        box-shadow:
          0 0 0 3px rgba(199, 36, 245, 0.6),
          0 0 35px rgba(199, 36, 245, 0.5),
          0 0 80px rgba(199, 36, 245, 0.25),
          inset 0 0 60px rgba(100, 40, 180, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        outline: none;
        -webkit-user-select: none;
                user-select: none;
        touch-action: manipulation; /* убирает 300мс задержку и дабл-тап зум по кнопке */
      }

      .click-btn__icon {
        width: 60px;
        height: 66px;
        filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
        position: relative;
        z-index: 2;
        pointer-events: none;
        transition: filter var(--transition-mid);
      }

      .click-btn__ring {
        display: none;   /* кольца вокруг кнопки скрыты (разметка/JS не тронуты) */
        position: absolute;
        border-radius: 50%;
        border: 1px solid;
        pointer-events: none;
      }

      .click-btn__ring--1 {
        inset: -8px;
        border-color: rgba(199, 36, 245, 0.5);
        animation: ring-rotate 8s linear infinite;
        box-shadow: 0 0 12px rgba(199, 36, 245, 0.4);
      }

      .click-btn__ring--2 {
        inset: -18px;
        border-color: rgba(0, 229, 255, 0.3);
        animation: ring-rotate 12s linear infinite reverse;
      }

      .click-btn__ring--3 {
        inset: -30px;
        border-color: rgba(255, 45, 120, 0.2);
        animation: ring-rotate 20s linear infinite;
      }

      @keyframes ring-rotate {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
      }

      .click-btn:hover {
        transform: scale(1.04);
        box-shadow:
          0 0 0 3px rgba(199, 36, 245, 0.9),
          0 0 50px rgba(199, 36, 245, 0.7),
          0 0 100px rgba(199, 36, 245, 0.35),
          inset 0 0 80px rgba(100, 40, 180, 0.6);
      }

      .click-btn:active {
        transform: scale(0.95);
        /* Ободок и свечение нажатия приглушены: тонкий полупрозрачный циан
           вместо плотного, радиусы и непрозрачность гало уменьшены. */
        box-shadow:
          0 0 0 2px rgba(0, 229, 255, 0.5),
          0 0 28px rgba(0, 229, 255, 0.35),
          0 0 60px rgba(0, 229, 255, 0.18),
          inset 0 0 50px rgba(0, 180, 220, 0.3);
      }

      /* ШАГ 1.2: варианты цвета кнопки (косметика магазина перерождений).
         Пока НИГДЕ не подключены — это только определения классов, вид игры
         не меняется. Подключение цвета будет на отдельном шаге.
         Меняют только заливку и базовое свечение; кольца и :hover/:active
         сохраняют штатное поведение. Без модификатора кнопка остаётся
         штатной фиолетовой. */
      .click-btn--black {
        background: radial-gradient(
          circle at 35% 35%,
          #2c2c2c 0%,
          #141414 45%,
          #050505 100%
        );
        box-shadow:
          0 0 0 3px rgba(60, 60, 60, 0.9),
          0 0 30px rgba(0, 0, 0, 0.7),
          0 0 70px rgba(0, 0, 0, 0.4),
          inset 0 0 60px rgba(15, 15, 15, 0.7);
      }
      .click-btn--blackgold {
        /* Точная копия свотча из магазина: золотая сфера + чёрная спираль-улитка.
           Тот же inline-SVG, что в shop.css → .shop-swatch--blackgold.
           Свечение (box-shadow) сохранено в янтарных тонах. */
        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2232%25%22%20r%3D%2275%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23fff0b8%22%2F%3E%3Cstop%20offset%3D%2252%25%22%20stop-color%3D%22%23e0a020%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%238a6010%22%2F%3E%3C%2FradialGradient%3E%3CclipPath%20id%3D%22c%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url%28%23c%29%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cpath%20d%3D%22M50.0%2050.0L50.2%2050.0L50.5%2050.1L50.7%2050.2L50.9%2050.4L51.1%2050.6L51.2%2050.9L51.3%2051.2L51.3%2051.5L51.3%2051.8L51.2%2052.2L51.1%2052.5L50.9%2052.9%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%226.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M50.9%2052.9L50.7%2053.2L50.4%2053.5L50.0%2053.8L49.6%2054.0L49.1%2054.2L48.6%2054.3L48.1%2054.3L47.5%2054.3L46.9%2054.2L46.3%2054.1L45.7%2053.8L45.1%2053.5L44.6%2053.1%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%226.1%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M44.6%2053.1L44.1%2052.6L43.6%2052.1L43.2%2051.5L42.8%2050.8L42.5%2050.0L42.3%2049.2L42.2%2048.3L42.2%2047.5L42.2%2046.5L42.4%2045.6L42.7%2044.7L43.1%2043.8L43.6%2042.9%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%225.7%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M43.6%2042.9L44.3%2042.1L45.0%2041.3L45.8%2040.6L46.8%2040.0L47.8%2039.5L48.9%2039.1L50.0%2038.8L51.2%2038.6L52.4%2038.5L53.7%2038.6L55.0%2038.8L56.2%2039.2L57.5%2039.7%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%225.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M57.5%2039.7L58.7%2040.3L59.8%2041.1L60.9%2042.1L61.9%2043.1L62.8%2044.3L63.6%2045.6L64.2%2047.0L64.7%2048.5L65.0%2050.0L65.2%2051.6L65.2%2053.2L65.0%2054.9L64.6%2056.5%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%224.9%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M64.6%2056.5L64.1%2058.1L63.3%2059.7L62.4%2061.2L61.4%2062.6L60.1%2064.0L58.8%2065.2L57.2%2066.2L55.6%2067.1L53.8%2067.9L51.9%2068.4L50.0%2068.8L48.0%2068.9L46.0%2068.8%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%224.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M46.0%2068.8L44.0%2068.5L42.0%2068.0L40.0%2067.3L38.1%2066.4L36.3%2065.2L34.6%2063.9L33.0%2062.3L31.6%2060.6L30.4%2058.7L29.3%2056.7L28.5%2054.6L27.9%2052.3L27.5%2050.0%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%224.1%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M27.5%2050.0L27.4%2047.6L27.5%2045.2L27.9%2042.8L28.5%2040.4L29.4%2038.1L30.6%2035.9L32.0%2033.8L33.6%2031.8L35.5%2030.0L37.5%2028.3L39.7%2026.9L42.1%2025.7L44.6%2024.8%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%223.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M44.6%2024.8L47.3%2024.1L50.0%2023.8L52.8%2023.6L55.6%2023.8L58.3%2024.3L61.1%2025.1L63.8%2026.2L66.3%2027.5L68.7%2029.2L71.0%2031.1L73.1%2033.2L74.9%2035.6L76.5%2038.2%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M76.5%2038.2L77.8%2041.0L78.9%2043.9L79.6%2046.9L80.0%2050.0L80.1%2053.2L79.8%2056.3L79.2%2059.5L78.3%2062.6L77.1%2065.6L75.5%2068.5L73.6%2071.2L71.4%2073.8L69.0%2076.1%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M69.0%2076.1L66.2%2078.1L63.3%2079.9L60.2%2081.4L56.9%2082.5L53.5%2083.3L50.0%2083.8L46.4%2083.8L42.9%2083.5L39.3%2082.8L35.9%2081.7L32.5%2080.3L29.3%2078.5L26.2%2076.4%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M26.2%2076.4L23.4%2073.9L20.9%2071.2L18.6%2068.1L16.7%2064.8L15.0%2061.4L13.8%2057.7L13.0%2053.9L12.5%2050.0L12.5%2046.1L12.8%2042.1L13.6%2038.2L14.8%2034.3L16.4%2030.6%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%222.0%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16.4%2030.6L18.4%2027.1L20.8%2023.7L23.6%2020.6L26.6%2017.8L30.0%2015.4L33.6%2013.2L37.5%2011.5L41.5%2010.1L45.7%209.2L50.0%208.8L54.3%208.7L58.7%209.2L63.0%2010.1%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M63.0%2010.1L67.2%2011.4L71.3%2013.2L75.1%2015.4L78.8%2018.0L82.1%2021.1L85.2%2024.4L87.9%2028.1L90.2%2032.1L92.1%2036.3L93.5%2040.7L94.5%2045.3L95.0%2050.0%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%2234%22%20cy%3D%2228%22%20rx%3D%2215%22%20ry%3D%2210%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.2%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat;
        box-shadow:
          0 0 0 3px rgba(255, 179, 0, 0.6),
          0 0 35px rgba(255, 179, 0, 0.4),
          0 0 80px rgba(255, 179, 0, 0.18),
          inset 0 0 60px rgba(90, 55, 0, 0.55);
      }
      .click-btn--gold {
        background: radial-gradient(
          circle at 35% 35%,
          #ffe488 0%,
          #ffb300 45%,
          #b87800 100%
        );
        box-shadow:
          0 0 0 3px rgba(255, 179, 0, 0.85),
          0 0 40px rgba(255, 179, 0, 0.6),
          0 0 90px rgba(255, 179, 0, 0.3),
          inset 0 0 60px rgba(180, 120, 0, 0.45);
      }

      /* СЕКЦИИ СЧЕТЧИКА И СТАТИСТИКИ (НАВЕРХУ) */
      .top-dashboard {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.65rem;
        z-index: 20;
        width: 100%;
      }

      /* СХЕМА 3: ВЕРТИКАЛЬНЫЙ СТЕК БУСТОВ НАД КНОПКОЙ КЛИКА.
         ЗОНА C: высота слота зафиксирована (min-height), поэтому появление
         NEON RUSH / КВАНТОВОГО РАЗГОНА больше не сдвигает кнопку вниз.
         Пустой слот сливается со свечением гало вокруг солнца и не читается
         как дыра. Редкий случай "rush + оффлайн одновременно" даёт небольшое
         кратковременное расширение вниз — это осознанный компромисс. */
      .boosts-dashboard {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        max-width: var(--center-col-w);
        min-height: 62px; /* высота одной буст-панели — слот держит место */
        z-index: 20;
      }

      /* СЕКЦИИ ДОПОЛНИТЕЛЬНЫХ ПАНЕЛЕЙ И КНОПОК (СНИЗУ) */
      .bottom-dashboard {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.65rem;
        z-index: 20;
        width: 100%;
        max-width: var(--center-col-w);
      }

      /* ПАНЕЛЬ ПРЕСТИЖА (ШАГ 11) */
      .prestige-dashboard {
        font-family: var(--font-display);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        color: var(--clr-neon-gold);
        text-shadow: 0 0 6px var(--clr-neon-gold);
        background: rgba(255, 179, 0, 0.05);
        border: 1px solid rgba(255, 179, 0, 0.25);
        border-radius: 2px;
        padding: 0.2rem 0.65rem;
        text-transform: uppercase;
        text-align: center;
        display: none; /* Покажется если престиж > 0 */
      }

      .score-display-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--clr-bg-panel);
        border: var(--border-glow);
        box-shadow: 
          0 0 30px rgba(199, 36, 245, 0.15),
          inset 0 0 15px rgba(199, 36, 245, 0.1);
        border-radius: 4px;
        padding: 0.8rem 2rem;
        text-align: center;
        width: 100%;
        max-width: var(--center-col-w);
        min-width: 0;
        position: relative;
        transition: border-color var(--transition-mid), box-shadow var(--transition-mid);
      }

      .score-display-center::before {
        content: '';
        position: absolute;
        top: 0; left: 10%; right: 10%; height: 1px;
        background: linear-gradient(90deg, transparent, var(--clr-neon-cyan), transparent);
      }

      .score-value {
        font-family: var(--font-display);
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--clr-text-primary);
        text-shadow:
          0 0 10px var(--clr-neon-purple),
          0 0 30px rgba(199, 36, 245, 0.4);
        letter-spacing: 0.05em;
        line-height: 1.1;
      }

      .score-bps {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        margin-top: 0.3rem;
        font-size: 0.75rem;
        color: var(--clr-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .score-bps__value {
        color: var(--clr-neon-cyan);
        font-family: var(--font-display);
        font-size: 0.85rem;
        font-weight: 700;
        text-shadow: 0 0 8px var(--clr-neon-cyan);
      }

      /* СЧЁТЧИК КЛИКОВ CPS / CPM */
      .click-rate-row {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        margin-top: 0.25rem;
        font-size: 0.75rem;
        color: var(--clr-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .click-rate__value {
        font-family: var(--font-display);
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--clr-neon-cyan);
        text-shadow: 0 0 8px var(--clr-neon-cyan);
        min-width: 2.8rem;
        text-align: right;
        transition: opacity 0.12s ease;
      }

      .click-rate__value.fading {
        opacity: 0;
      }

      .click-rate__switch {
        display: flex;
        gap: 0.2rem;
        margin-left: 0.15rem;
      }

      .click-rate__btn {
        font-family: var(--font-mono);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        padding: 0.1rem 0.35rem;
        border-radius: 2px;
        border: 1px solid rgba(144, 112, 192, 0.35);
        background: transparent;
        color: var(--clr-text-secondary);
        cursor: pointer;
        transition: color var(--transition-fast), border-color var(--transition-fast), text-shadow var(--transition-fast);
        line-height: 1.4;
      }

      .click-rate__btn.active {
        color: var(--clr-neon-cyan);
        border-color: var(--clr-neon-cyan);
        text-shadow: 0 0 6px var(--clr-neon-cyan);
      }

      /* ПЕРЕКЛЮЧАТЕЛЬ РЕЖИМА ПОКУПКИ (Шаг 0.2b) */
      /* Размещается в шапке левой колонки магазина, справа от лейбла.
         Намеренно повторяет паттерн .click-rate__switch / .click-rate__btn —
         единый дизайн-язык табов во всём кокпите. */
      .buy-mode-switch {
        display: flex;
        gap: 0.2rem;
        margin-left: auto; /* прижимает к правому краю шапки */
      }

      .buy-mode-btn {
        font-family: var(--font-mono);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        padding: 0.1rem 0.4rem;
        border-radius: 2px;
        border: 1px solid rgba(144, 112, 192, 0.35);
        background: transparent;
        color: var(--clr-text-secondary);
        cursor: pointer;
        /* Только цветовые переходы — без layout-reflow */
        transition: color var(--transition-fast), border-color var(--transition-fast), text-shadow var(--transition-fast);
        line-height: 1.4;
      }

      .buy-mode-btn.active {
        color: var(--clr-neon-cyan);
        border-color: var(--clr-neon-cyan);
        text-shadow: 0 0 6px var(--clr-neon-cyan);
      }

      /* СТИЛЬНЫЙ КОМБО-БАРОМЕТР (ШАГ 8) */
      .combo-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: var(--center-col-w);
        background: rgba(10, 5, 30, 0.7);
        border: 1px solid rgba(0, 229, 255, 0.15);
        border-radius: 4px;
        padding: 0.45rem 0.8rem;
        box-sizing: border-box;
        z-index: 20;
        margin-top: -10px; /* поднято на ~10px, чтобы не заезжать на солнце */
      }

      .combo-header {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--clr-text-secondary);
        margin-bottom: 0.3rem;
      }

      .combo-multiplier {
        color: var(--clr-neon-cyan);
        text-shadow: 0 0 5px var(--clr-neon-cyan);
        transition: color var(--transition-mid);
      }

      .combo-bar-container {
        position: relative;
        width: 100%;
        height: 8px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 2px;
        overflow: hidden;
        border: 1px solid rgba(199, 36, 245, 0.15);
      }

      .combo-bar-fill {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--clr-neon-cyan), var(--clr-neon-purple));
        box-shadow: 0 0 8px var(--clr-neon-cyan);
        transition: width 0.1s linear, background 0.3s ease;
      }

      /* Стилизация комбо-уровней */
      .combo-multiplier.lvl-1 {
        color: var(--clr-neon-cyan);
        text-shadow: 0 0 8px var(--clr-neon-cyan);
      }
      .combo-multiplier.lvl-2 {
        color: var(--clr-neon-purple);
        text-shadow: 0 0 10px var(--clr-neon-purple);
      }
      .combo-multiplier.lvl-3 {
        color: var(--clr-neon-pink);
        text-shadow: 0 0 15px var(--clr-neon-pink);
        animation: combo-blink 0.5s ease-in-out infinite alternate;
      }
      /* Шаг 1.2: новые высшие ступени комбо */
      /* lvl-4: x3.0 на 150 кликах — золотой, более агрессивное мигание */
      .combo-multiplier.lvl-4 {
        color: var(--clr-neon-gold);
        text-shadow: 0 0 18px var(--clr-neon-gold);
        animation: combo-blink-gold 0.35s ease-in-out infinite alternate;
      }
      /* lvl-5: x5.0 на 500 кликах — белый с оранжевым свечением, почти стробоскоп */
      .combo-multiplier.lvl-5 {
        color: #ffffff;
        text-shadow: 0 0 20px var(--clr-neon-orange), 0 0 40px var(--clr-neon-gold);
        animation: combo-blink-ultra 0.2s ease-in-out infinite alternate;
      }

      @keyframes combo-blink {
        0% { opacity: 0.8; }
        100% { opacity: 1; filter: brightness(1.2); }
      }
      @keyframes combo-blink-gold {
        0% { opacity: 0.75; filter: brightness(1.0); }
        100% { opacity: 1; filter: brightness(1.4); }
      }
      @keyframes combo-blink-ultra {
        0% { opacity: 0.7; filter: brightness(1.0) saturate(1.2); }
        100% { opacity: 1; filter: brightness(1.6) saturate(1.5); }
      }

      /* ПУЛЬСИРУЮЩИЙ ИНДИКАТОР NEON RUSH */
      .boost-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: var(--center-col-w);
        background: rgba(40, 10, 5, 0.75);
        border: 1px solid var(--clr-neon-orange);
        box-shadow: 0 0 15px rgba(255, 106, 0, 0.25);
        border-radius: 4px;
        padding: 0.5rem 0.8rem;
        box-sizing: border-box;
        display: none; /* Отображается динамически */
        animation: boost-glitch 1.5s infinite;
      }

      @keyframes boost-glitch {
        0%, 100% { border-color: var(--clr-neon-orange); box-shadow: 0 0 15px rgba(255, 106, 0, 0.2); }
        50% { border-color: var(--clr-neon-gold); box-shadow: 0 0 25px rgba(255, 179, 0, 0.4); }
      }

      .boost-header {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 900;
        letter-spacing: 0.12em;
        color: var(--clr-neon-gold);
        text-shadow: 0 0 5px var(--clr-neon-gold);
        margin-bottom: 0.35rem;
        text-transform: uppercase;
      }

      .boost-bar-container {
        position: relative;
        width: 100%;
        height: 6px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 1px;
        overflow: hidden;
        border: 1px solid rgba(255, 106, 0, 0.3);
      }

      .boost-bar-fill {
        height: 100%;
        width: 100%;
        background: linear-gradient(90deg, var(--clr-neon-gold), var(--clr-neon-pink));
        box-shadow: 0 0 8px var(--clr-neon-orange);
        transition: width 0.1s linear;
      }

      /* Шаг 8, Г2: ПАНЕЛЬ ГОТОВНОСТИ NEON RUSH (РУЧНАЯ АКТИВАЦИЯ) */
      .boost-ready-panel {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: var(--center-col-w);
        background: rgba(30, 15, 5, 0.75);
        border: 1px solid var(--clr-neon-gold);
        /* Статичная тень = нижняя точка старого пульса (раньше при живой
           анимации именно она и была видимым минимумом). */
        box-shadow: 0 0 12px rgba(255, 179, 0, 0.2);
        border-radius: 4px;
        padding: 0.5rem 0.8rem;
        box-sizing: border-box;
        position: relative;          /* база для слоя пульса ::before */
        display: none; /* Отображается динамически через updateBoostUI */
      }

      /* Слой пульса: верхняя точка старой анимации (оранжевая рамка +
         усиленная тень), мигает только прозрачностью (GPU, без repaint). */
      .boost-ready-panel::before {
        content: '';
        position: absolute;
        inset: -1px;                 /* совмещение с рамкой панели 1px */
        border: 1px solid var(--clr-neon-orange);
        border-radius: inherit;
        box-shadow: 0 0 28px rgba(255, 106, 0, 0.5);
        pointer-events: none;
        opacity: 0;
        animation: boost-ready-pulse 1.2s infinite alternate;
        will-change: opacity;
      }
      @keyframes boost-ready-pulse {
        0%   { opacity: 0; }
        100% { opacity: 1; }
      }

      .boost-ready-header {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 900;
        letter-spacing: 0.12em;
        color: var(--clr-neon-gold);
        text-shadow: 0 0 6px var(--clr-neon-gold);
        margin-bottom: 0.4rem;
        text-transform: uppercase;
      }

      /* Таймер сгорания — золотой цвет со свечением */
      #boost-ready-timer {
        color: var(--clr-neon-orange);
        text-shadow: 0 0 8px var(--clr-neon-orange);
      }

      .boost-ready-btn {
        font-family: var(--font-display);
        font-size: 0.75rem;
        font-weight: 900;
        letter-spacing: 0.1em;
        color: #000;
        background: var(--clr-neon-gold);
        border: none;
        border-radius: 2px;
        padding: 0.35rem 1.1rem;
        cursor: pointer;
        text-transform: uppercase;
        transition: all var(--transition-fast);
        box-shadow: 0 0 10px rgba(255, 179, 0, 0.4);
      }

      .boost-ready-btn:hover {
        background: var(--clr-neon-orange);
        box-shadow: 0 0 20px rgba(255, 106, 0, 0.8);
        transform: translateY(-1px);
      }

      /* ПУЛЬСИРУЮЩИЙ ИНДИКАТОР КВАНТОВОГО РАЗГОНА (ОФФЛАЙН БУСТ) */
      .offline-boost-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: var(--center-col-w);
        background: rgba(5, 30, 40, 0.75);
        border: 1px solid var(--clr-neon-cyan);
        /* Статичная тень = нижняя точка старого пульса */
        box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
        border-radius: 4px;
        padding: 0.5rem 0.8rem;
        box-sizing: border-box;
        position: relative;          /* база для слоя пульса ::before */
        display: none; /* Отображается динамически */
      }

      /* Слой пульса Квантового Разгона: верхняя точка старой анимации,
         мигает только прозрачностью (GPU, без repaint). */
      .offline-boost-panel::before {
        content: '';
        position: absolute;
        inset: -1px;
        border: 1px solid var(--clr-neon-blue);
        border-radius: inherit;
        box-shadow: 0 0 22px rgba(64, 64, 255, 0.4);
        pointer-events: none;
        opacity: 0;
        animation: offline-boost-pulse 2s infinite alternate;
        will-change: opacity;
      }
      @keyframes offline-boost-pulse {
        0%, 100% { opacity: 0; }
        50%      { opacity: 1; }
      }

      .offline-boost-header {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 900;
        letter-spacing: 0.12em;
        color: var(--clr-neon-cyan);
        text-shadow: 0 0 5px var(--clr-neon-cyan);
        margin-bottom: 0.35rem;
        text-transform: uppercase;
      }

      .offline-boost-bar-container {
        position: relative;
        width: 100%;
        height: 6px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 1px;
        overflow: hidden;
        border: 1px solid rgba(0, 229, 255, 0.3);
      }

      .offline-boost-bar-fill {
        height: 100%;
        width: 100%;
        background: linear-gradient(90deg, var(--clr-neon-cyan), var(--clr-neon-blue));
        box-shadow: 0 0 8px var(--clr-neon-cyan);
        transition: width 0.1s linear;
      }

      /* Шаг D.4: панель покупного буста ×5. Структура по образцу
         offline-boost-panel, тёплая палитра (gold/orange) чтобы визуально
         отделить от циановой панели Квантового Разгона. Видимость
         переключается из JS (updatePurchaseBoostUI). */
      .purchase-boost-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: var(--center-col-w);
        background: rgba(40, 25, 5, 0.75);
        border: 1px solid var(--clr-neon-gold);
        /* Статичная тень = нижняя точка старого пульса */
        box-shadow: 0 0 12px rgba(255, 179, 0, 0.2);
        border-radius: 4px;
        padding: 0.5rem 0.8rem;
        box-sizing: border-box;
        position: relative;          /* база для слоя пульса ::before */
        display: none; /* Отображается динамически */
      }

      /* Слой пульса покупного буста: верхняя точка старой анимации,
         мигает только прозрачностью (GPU, без repaint). */
      .purchase-boost-panel::before {
        content: '';
        position: absolute;
        inset: -1px;
        border: 1px solid var(--clr-neon-orange);
        border-radius: inherit;
        box-shadow: 0 0 22px rgba(255, 106, 0, 0.4);
        pointer-events: none;
        opacity: 0;
        animation: purchase-boost-pulse 2s infinite alternate;
        will-change: opacity;
      }
      @keyframes purchase-boost-pulse {
        0%, 100% { opacity: 0; }
        50%      { opacity: 1; }
      }

      .purchase-boost-header {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 900;
        letter-spacing: 0.12em;
        color: var(--clr-neon-gold);
        text-shadow: 0 0 5px var(--clr-neon-gold);
        margin-bottom: 0.35rem;
        text-transform: uppercase;
      }

      .purchase-boost-bar-container {
        position: relative;
        width: 100%;
        height: 6px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 1px;
        overflow: hidden;
        border: 1px solid rgba(255, 179, 0, 0.3);
      }

      .purchase-boost-bar-fill {
        height: 100%;
        width: 100%;
        background: linear-gradient(90deg, var(--clr-neon-gold), var(--clr-neon-orange));
        box-shadow: 0 0 8px var(--clr-neon-gold);
        transition: width 0.1s linear;
      }

      /* КНОПКА REBIRTH ПРЕСТИЖА (ШАГ 11) */
      .rebirth-btn {
        background: rgba(45, 10, 15, 0.9);
        border: 2px solid var(--clr-neon-pink);
        box-shadow: 0 0 15px rgba(255, 45, 120, 0.3);
        padding: 0.6rem 1.2rem;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        font-family: var(--font-display);
        font-size: 0.75rem;
        font-weight: 900;
        color: #fff;
        transition: all var(--transition-fast);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        width: 240px;
        /* Перенос наверх: кнопка плавает над левой панелью, прижата к её левому краю.
           Контекст позиционирования — сама секция .panel (у неё position:relative).
           left:0 → совпадает с левым краем панели; bottom:100% → над верхней кромкой,
           margin-bottom задаёт зазор. Запаса по высоте достаточно (до блока звания),
           поэтому верх кнопки не поднимается выше уровня "Первый сигнал". */
        position: absolute;
        left: 0;
        bottom: 100%;
        margin-bottom: 0.75rem;
        z-index: 30;
        display: none; /* Появится при накоплении 10M очков */
        /* Пульс перенесён на слой ::before (opacity, GPU). Статичная тень
           кнопки выше по коду совпадает с нижней точкой старого пульса. */
      }

      /* Слой пульса кнопки REBIRTH: держит верхнюю точку старой анимации
         (усиленная тень + золотая рамка) и мигает только прозрачностью.
         Opacity анимируется на композиторе GPU без перерисовок. */
      .rebirth-btn::before {
        content: '';
        position: absolute;
        inset: -2px;                 /* совмещение с рамкой кнопки 2px */
        border: 2px solid var(--clr-neon-gold);
        border-radius: inherit;
        box-shadow: 0 0 30px rgba(255, 45, 120, 0.8), 0 0 10px var(--clr-neon-gold);
        pointer-events: none;
        opacity: 0;
        animation: rebirth-pulse-fade 2s infinite alternate;
        will-change: opacity;
      }
      @keyframes rebirth-pulse-fade {
        0%   { opacity: 0; }
        100% { opacity: 1; }
      }

      .rebirth-btn:hover {
        background: #ff2d78;
        color: #000;
        /* Строка box-shadow удалена намеренно: раньше она была мёртвой
           (анимация box-shadow всегда перебивала hover-значение). Если
           оставить её после переноса пульса на ::before, тень ховера
           внезапно «оживёт» и визуал изменится. */
        text-shadow: none;
      }

      .rebirth-btn__sub {
        font-family: var(--font-mono);
        font-size: 0.55rem;
        font-weight: normal;
        color: var(--clr-neon-gold);
        letter-spacing: 0.05em;
      }
      .rebirth-btn:hover .rebirth-btn__sub {
        color: #000;
      }

      /* ДИАГНОСТИКА СИНТ-МОДУЛЕЙ */
      /* ЗОНА B: тонкая строка статуса под счётчиком */
      .status-line {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        width: 100%;
        max-width: var(--center-col-w);
        z-index: 20;
      }

      .synth-status {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        justify-content: center;
        max-width: var(--center-col-w);
      }

      .status-chip {
        font-family: var(--font-mono);
        font-size: 0.55rem;
        font-weight: bold;
        color: #3b2c5c;
        border: 1px solid #231840;
        background: rgba(10, 5, 25, 0.5);
        padding: 0.2rem 0.45rem;
        border-radius: 2px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        transition: all var(--transition-mid);
      }

      .status-chip.active-bass {
        color: var(--clr-neon-purple);
        border-color: var(--clr-neon-purple);
        text-shadow: 0 0 5px var(--clr-neon-purple);
        box-shadow: 0 0 8px rgba(199, 36, 245, 0.25);
        background: rgba(199, 36, 245, 0.05);
      }

      .status-chip.active-drum {
        color: #39ff8a;
        border-color: #39ff8a;
        text-shadow: 0 0 5px #39ff8a;
        box-shadow: 0 0 8px rgba(57, 255, 138, 0.25);
        background: rgba(57, 255, 138, 0.05);
      }

      .status-chip.active-vocal {
        color: var(--clr-neon-orange);
        border-color: var(--clr-neon-orange);
        text-shadow: 0 0 5px var(--clr-neon-orange);
        box-shadow: 0 0 8px rgba(255, 106, 0, 0.25);
        background: rgba(255, 106, 0, 0.05);
      }

      .status-chip.active-laser {
        color: var(--clr-neon-pink);
        border-color: var(--clr-neon-pink);
        text-shadow: 0 0 5px var(--clr-neon-pink);
        box-shadow: 0 0 8px rgba(255, 45, 120, 0.25);
        background: rgba(255, 45, 120, 0.05);
      }

      .status-chip.active-fm {
        color: var(--clr-neon-blue);
        border-color: var(--clr-neon-blue);
        text-shadow: 0 0 5px var(--clr-neon-blue);
        box-shadow: 0 0 8px rgba(64, 64, 255, 0.25);
        background: rgba(64, 64, 255, 0.05);
      }

      .status-chip.active-gold {
        color: var(--clr-neon-gold);
        border-color: var(--clr-neon-gold);
        text-shadow: 0 0 5px var(--clr-neon-gold);
        box-shadow: 0 0 8px rgba(255, 179, 0, 0.25);
        background: rgba(255, 179, 0, 0.05);
      }

      .status-chip.active-cyan {
        color: var(--clr-neon-cyan);
        border-color: var(--clr-neon-cyan);
        text-shadow: 0 0 5px var(--clr-neon-cyan);
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
        background: rgba(0, 229, 255, 0.05);
      }

      .status-chip.active-stardust {
        color: #e8f0ff;
        border-color: #c8d8f8;
        text-shadow: 0 0 6px #ffffff, 0 0 12px rgba(200, 220, 255, 0.6);
        box-shadow: 0 0 8px rgba(232, 240, 255, 0.2);
        background: rgba(232, 240, 255, 0.04);
      }

      /* Строка заблокированной синергии — красный оттенок */
      .shop-card__synergy--blocked {
        color: #a03347;
        text-shadow: none;
        border-left-color: rgba(160, 51, 71, 0.4);
      }

      .audio-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #555;
        transition: background var(--transition-fast);
      }

      .audio-indicator.active {
        background: var(--clr-neon-cyan);
        box-shadow: 0 0 8px var(--clr-neon-cyan);
      }

      /* Розовый индикатор для режима РАДИО (фоновая музыка) */
      .audio-indicator.music {
        background: var(--clr-neon-pink);
        box-shadow: 0 0 8px var(--clr-neon-pink);
      }

      /* Регулятор громкости в ряду системных тумблеров */
      /* Регулятор громкости: вертикальный фейдер справа снаружи блока счётчиков.
         position:absolute относительно .score-display-center — блок счёта НЕ сдвигается. */
      .volume-wrap {
        position: absolute;
        left: 100%;
        top: 0;
        height: 100%;
        margin-left: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        transition: opacity 0.3s ease;
      }
      .volume-icon {
        font-size: 0.8rem;
        color: var(--clr-neon-cyan);
        text-shadow: 0 0 6px currentColor;
        flex: none;
      }
      /* Кнопка "следующий трек": голый шеврон вправо, без рамки и фона.
         Покой: приглушённый циан, свечение почти выключено — не тянет взгляд.
         Ховер/нажатие: цвет и свечение разгораются (drop-shadow, т.к. это
         обводка SVG — box-shadow тут не подошёл бы).
         disabled: серый и неактивный (музыка не играет). */
      .track-next-btn {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px;
        /* Поднимаем шеврон вверх, чтобы он встал примерно на уровень кнопки
           "СИНТЕЗ" (она в ряду над блоком счёта). Величина подобрана под
           высоту ряда + отступ; при необходимости менять только это число. */
        margin-top: -40px;
        margin-bottom: 6px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--clr-neon-cyan);
        opacity: 0.45;                 /* приглушённый покой */
        filter: drop-shadow(0 0 1px currentColor);
        transition: opacity 0.2s ease, filter 0.2s ease;
      }
      /* Капелька крупнее: SVG в разметке 14px, здесь поднимаем до 16px
         (масштаб через CSS, разметку не трогаем) */
      .track-next-btn svg {
        width: 16px;
        height: 16px;
      }
      .track-next-btn:hover,
      .track-next-btn:active {
        opacity: 1;                    /* разгорается */
        filter: drop-shadow(0 0 5px currentColor);
      }
      .track-next-btn:active {
        transform: translateX(1px);    /* лёгкий толчок вправо при нажатии */
      }
      .track-next-btn:disabled {
        color: var(--clr-text-dim, #6a6a7a);
        opacity: 0.3;
        filter: none;
        cursor: default;
        transform: none;
      }
      /* Бокс задаёт визуальные размеры вертикального фейдера */
      .volume-slider-box {
        position: relative;
        width: 16px;
        height: 92px;
        flex: none;
      }
      /* Слайдер физически горизонтальный (кастом-вид работает во всех браузерах),
         визуально повёрнут на -90° → вертикальный фейдер. Верх = громче. */
      .volume-slider {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 92px;   /* длина = высоте бокса; после поворота станет вертикалью */
        height: 6px;
        transform: translate(-50%, -50%) rotate(-90deg);
        -webkit-appearance: none;
        appearance: none;
        background: rgba(0, 255, 255, 0.25);
        border-radius: 3px;
        outline: none;
        cursor: pointer;
      }
      .volume-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--clr-neon-pink);
        box-shadow: 0 0 8px var(--clr-neon-pink);
        cursor: pointer;
      }
      .volume-slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border: none;
        border-radius: 50%;
        background: var(--clr-neon-pink);
        box-shadow: 0 0 8px var(--clr-neon-pink);
        cursor: pointer;
      }

      /* ===== ВЕРХНЯЯ СТРОКА ЗВАНИЯ ===== */
      .rank-strip {
        position: relative; /* для уголков-засечек лиги 5 */
        width: 100%;
        max-width: var(--center-col-w); /* п3: ширина как у блока счёта */
        text-align: center;
        padding: 0.3rem 0.6rem 0.35rem;
        margin-bottom: 0.4rem;
        border-radius: 6px;
        border: 1px solid var(--rank-clr, var(--clr-neon-cyan));
        background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.05));
        box-shadow: 0 0 12px -2px var(--rank-clr, var(--clr-neon-cyan)), inset 0 0 18px -10px var(--rank-clr, var(--clr-neon-cyan));
        transition: border-color 0.4s ease, box-shadow 0.4s ease;
      }
      .rank-strip__name {
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--rank-clr, var(--clr-neon-cyan));
        text-shadow: 0 0 8px var(--rank-clr, var(--clr-neon-cyan));
        line-height: 1.2;
      }
      .rank-strip__bar {
        height: 3px;
        margin: 0.3rem auto 0.2rem;
        width: 70%;
        background: rgba(255,255,255,0.12);
        border-radius: 2px;
        overflow: hidden;
      }
      .rank-strip__bar-fill {
        height: 100%;
        width: 0%;
        background: var(--rank-clr, var(--clr-neon-cyan));
        box-shadow: 0 0 6px var(--rank-clr, var(--clr-neon-cyan));
        transition: width 0.5s ease;
      }
      /* Цветовые тиры: чем выше ранг, тем «дороже» цвет. Gold вдобавок мягко пульсирует. */
      /* Цвет ранга задаётся из JS через --rank-clr — свой на каждое звание. */
      /* Пульсация только на «золотых» рангах-вехах (каждый 6-й и максимальный). */
      /* Пульс золотых рангов перенесён на слой .rank-strip__pulse (opacity,
         GPU, без перерисовок). Правила добавлены ниже, ПОСЛЕ лиговых классов:
         порядок в каскаде важен. Кейфреймы rankPulse больше не используются. */
      @keyframes rankPulse {
        0%, 100% { box-shadow: 0 0 12px -2px var(--rank-clr, var(--clr-neon-cyan)), inset 0 0 18px -10px var(--rank-clr, var(--clr-neon-cyan)); }
        50%      { box-shadow: 0 0 20px 1px var(--rank-clr, var(--clr-neon-cyan)), inset 0 0 22px -8px var(--rank-clr, var(--clr-neon-cyan)); }
      }

      /* ЛИГИ НАРЯДНОСТИ: рамка и свечение нарастают от лиги 1 к лиге 5.
         Цвет берётся из --rank-clr (свой на каждый ранг). Звёзды/знаки добавляет JS. */
      .rank-strip.league-1 {
        border-width: 1px; border-style: solid;
        box-shadow: 0 0 8px -3px var(--rank-clr, var(--clr-neon-cyan)), inset 0 0 14px -11px var(--rank-clr, var(--clr-neon-cyan));
      }
      .rank-strip.league-2 {
        border-width: 1px; border-style: solid;
        box-shadow: 0 0 12px -2px var(--rank-clr, var(--clr-neon-cyan)), inset 0 0 18px -9px var(--rank-clr, var(--clr-neon-cyan));
      }
      .rank-strip.league-3 {
        border-width: 2px; border-style: solid;
        box-shadow: 0 0 16px -2px var(--rank-clr, var(--clr-neon-cyan)), inset 0 0 20px -8px var(--rank-clr, var(--clr-neon-cyan));
      }
      .rank-strip.league-4 {
        border-width: 2px; border-style: double;
        box-shadow: 0 0 20px -1px var(--rank-clr, var(--clr-neon-cyan)), inset 0 0 24px -7px var(--rank-clr, var(--clr-neon-cyan));
      }
      .rank-strip.league-5 {
        border-width: 3px; border-style: double;
        box-shadow: 0 0 26px 0px var(--rank-clr, var(--clr-neon-cyan)), inset 0 0 28px -6px var(--rank-clr, var(--clr-neon-cyan));
      }
      /* Уголки-засечки только на высшей лиге (как у панелей кокпита) */
      .rank-strip.league-5::before,
      .rank-strip.league-5::after {
        content: '';
        position: absolute;
        width: 9px; height: 9px;
        border: 2px solid var(--rank-clr, var(--clr-neon-gold));
        pointer-events: none;
      }
      .rank-strip.league-5::before { top: 3px;    left: 3px;  border-right: none; border-bottom: none; }
      .rank-strip.league-5::after  { bottom: 3px; right: 3px; border-left: none;  border-top: none; }

      /* ===== ПУЛЬС ЗВАНИЯ БЕЗ REPAINT =====
         БЫЛО: rankPulse анимировал box-shadow (не композитится: перерисовка
         строки звания каждый кадр на золотых рангах).
         СТАЛО: элемент держит статичную тень нижней точки пульса, слой
         .rank-strip__pulse держит тень верхней точки и мигает только
         прозрачностью. Значения теней скопированы из старых кейфреймов
         rankPulse один в один.
         Правило .rank-strip.rank--pulse стоит здесь, ПОСЛЕ .league-*,
         намеренно: при пульсе оно перебивает лиговую тень так же, как
         раньше её перебивала анимация. */
      .rank-strip.rank--pulse {
        box-shadow: 0 0 12px -2px var(--rank-clr, var(--clr-neon-cyan)), inset 0 0 18px -10px var(--rank-clr, var(--clr-neon-cyan));
      }
      .rank-strip__pulse {
        position: absolute;
        inset: -1px;                /* совмещение с базовой рамкой 1px */
        border-radius: inherit;
        box-shadow: 0 0 20px 1px var(--rank-clr, var(--clr-neon-cyan)), inset 0 0 22px -8px var(--rank-clr, var(--clr-neon-cyan));
        pointer-events: none;
        opacity: 0;
      }
      .rank-strip.rank--pulse .rank-strip__pulse {
        animation: rankPulseFade 2.2s ease-in-out infinite;
        will-change: opacity;
      }
      @keyframes rankPulseFade {
        0%, 100% { opacity: 0; }
        50%      { opacity: 1; }
      }

      /* КОНТЕЙНЕР ДЛЯ ВСПЛЫВАЮЩИХ ЦИФР СТРОГО В ЦЕНТРЕ КНОПКИ */
      .floaters-container {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* Оптимизация: Аппаратная анимация для плавности и быстрой сборки мусора */
      .floater {
        position: absolute;
        font-family: var(--font-display);
        font-size: 2.8rem;
        font-weight: 900;
        color: var(--clr-neon-cyan);
        text-shadow: 
          0 0 10px var(--clr-neon-cyan),
          0 0 25px var(--clr-neon-purple);
        pointer-events: none;
        white-space: nowrap;
        opacity: 0;
        display: none; /* Скрыты по умолчанию в пуле */
        will-change: transform, opacity;
      }

      .floater.active {
        display: block;
        animation: floater-rise 0.8s ease-out forwards;
      }

      /* Разноцветные модификаторы критических ударов */
      .floater.crit {
        color: var(--clr-neon-orange);
        text-shadow: 
          0 0 10px var(--clr-neon-orange),
          0 0 30px var(--clr-neon-pink);
        font-size: 3.5rem;
      }

      .floater.super-crit {
        color: #ffffff;
        text-shadow: 
          0 0 15px var(--clr-neon-cyan),
          0 0 30px var(--clr-neon-purple),
          0 0 50px #ffffff;
        font-size: 4.2rem;
        font-weight: 900;
      }

      .floater.mega-crit {
        color: #ffe066;
        text-shadow:
          0 0 12px #ffe066,
          0 0 30px var(--clr-neon-gold),
          0 0 55px var(--clr-neon-orange);
        font-size: 4.8rem;
        font-weight: 900;
      }

      .floater.giga-crit {
        color: #ffffff;
        text-shadow:
          0 0 10px #ffffff,
          0 0 25px #ffe066,
          0 0 50px var(--clr-neon-pink),
          0 0 80px var(--clr-neon-purple);
        font-size: 5.4rem;
        font-weight: 900;
      }

      /* Омега-крит ×150: холодное электрик-свечение (cyan -> purple -> pink),
         крупнее гиги и с короткой вспышкой масштаба на входе. */
      .floater.omega-crit {
        color: #ffffff;
        text-shadow:
          0 0 12px var(--clr-neon-cyan),
          0 0 28px var(--clr-neon-blue),
          0 0 55px var(--clr-neon-purple),
          0 0 90px var(--clr-neon-pink);
        font-size: 6.0rem;
        font-weight: 900;
      }
      /* Отдельная анимация подъёма со стартовой вспышкой масштаба.
         ВАЖНО: translateY и scale держим в ОДНОМ keyframes, иначе две
         анимации на одном свойстве transform конфликтуют (вторая затирает
         первую) и floater дёргается вместо плавного подъёма. */
      .floater.omega-crit.active {
        animation: floater-rise-omega 0.9s ease-out forwards;
      }

      /* OG-крит ×1000: белое ядро с радужным неоновым ореолом, самый крупный
         и яркий тир, заметная вспышка-масштаб на входе. */
      .floater.og-crit {
        color: #ffffff;
        text-shadow:
          0 0 14px #ffffff,
          0 0 30px var(--clr-neon-cyan),
          0 0 50px var(--clr-neon-pink),
          0 0 75px var(--clr-neon-gold),
          0 0 110px var(--clr-neon-purple);
        font-size: 6.8rem;
        font-weight: 900;
      }
      .floater.og-crit.active {
        animation: floater-rise-og 1.0s ease-out forwards;
      }

      /* Омега: старт с увеличенного масштаба (вспышка), затем подъём и затухание. */
      @keyframes floater-rise-omega {
        0%   { transform: translateY(0) scale(1.6);      opacity: 1; }
        15%  { transform: translateY(-10px) scale(1.0);  opacity: 1; }
        100% { transform: translateY(-120px) scale(0.7); opacity: 0; }
      }
      /* OG: ещё более сильная стартовая вспышка с лёгким «отскоком» масштаба. */
      @keyframes floater-rise-og {
        0%   { transform: translateY(0) scale(2.0);      opacity: 1; }
        20%  { transform: translateY(-12px) scale(1.1);  opacity: 1; }
        35%  { transform: translateY(-20px) scale(1.0);  opacity: 1; }
        100% { transform: translateY(-130px) scale(0.7); opacity: 0; }
      }

      @keyframes floater-rise {
        0%   { transform: translateY(0) scale(1);     opacity: 1; }
        100% { transform: translateY(-110px) scale(0.75); opacity: 0; }
      }

      /* ============================================================
         НОВЫЙ КИБЕРПАНК СТИЛЬ ДЛЯ ЭКРАНА СИНХРОНИЗАЦИИ (РЕПЛИКА ЭКРАН.JPG)
         ============================================================
      */
      .sync-overlay {
        position: fixed;
        inset: 0;
        z-index: 999;
        /* Фон приветственного окна: картинка bg.jpg рядом с игрой + тёмная вуаль поверх,
           чтобы текст окна читался. Если файла нет — останется тёмный фон, окно работает. */
        background:
          linear-gradient(rgba(8, 3, 20, 0.27), rgba(8, 3, 20, 0.37)),
          url('bg.jpg') center center / cover no-repeat,
          rgba(10, 5, 25, 0.95);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-mid);
      }

      .sync-overlay.active {
        opacity: 1;
        pointer-events: auto;
      }

      /* Неоновая рама приветственного экрана */
      .sync-modal {
        position: relative;
        /* ВАРИАНТ B (настоящее матовое стекло): заливка полупрозрачная + СВОЙ
           backdrop-filter размывает фон под плашкой. Оверлей со своим blur(2px)
           остаётся → под плашкой два размытия накладываются (это и проверяем). */
        background: radial-gradient(circle at 50% 30%, rgba(30, 16, 60, 0.45) 0%, rgba(8, 4, 20, 0.52) 100%);
        background-image:
          linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 38%),
          repeating-linear-gradient(rgba(18, 10, 36, 0) 0px, rgba(18, 10, 36, 0) 3px, rgba(0, 0, 0, 0.15) 3px, rgba(0, 0, 0, 0.15) 4px);
        /* Настоящее размытие фона под плашкой (матовое стекло) */
        backdrop-filter: blur(10px) saturate(1.2);
        -webkit-backdrop-filter: blur(10px) saturate(1.2);
        padding: 40px 50px;
        width: 90%;
        max-width: 680px;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        transform: scale(0.9);
        transition: transform var(--transition-mid);

        border-radius: 10px;
        box-shadow:
          0 0 50px rgba(255, 45, 120, 0.35),
          inset 0 0 30px rgba(199, 36, 245, 0.15);
        border: 1px solid rgba(255, 45, 120, 0.45);
      }

      /* Двойной неоновый контур внутри */
      .sync-modal::before {
        content: '';
        position: absolute;
        inset: 4px;
        background: transparent;
        pointer-events: none;
        border-radius: 7px;
        border: 2px solid rgb(81, 204, 255);
        box-shadow: inset 0 0 20px rgba(65, 39, 190, 0.2);
        z-index: 1;
      }

      .sync-overlay.active .sync-modal {
        transform: scale(1);
      }

      /* Верхняя неоновая стрелка-прицел со звездой */
      .sync-modal__aim-top {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -4px);
        width: 110px;
        height: 28px;
        background: #05020c;
        clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
        border: 2px solid rgba(0, 229, 255, 0.6);
        border-bottom: none;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        box-shadow: 0 -5px 15px rgba(0, 229, 255, 0.3);
      }

      /* Четырехконечная звезда */
      .sync-modal__aim-star {
        width: 14px;
        height: 14px;
        background: #ffffff;
        clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
        box-shadow: 
          0 0 10px #ffffff,
          0 0 20px var(--clr-neon-cyan);
        animation: star-glow-pulse 2s ease-in-out infinite alternate;
      }

      @keyframes star-glow-pulse {
        0% { transform: scale(0.9); opacity: 0.8; }
        100% { transform: scale(1.1); opacity: 1; }
      }

      /* Боковые декоративные HUD-надписи приветственного окна (полупрозрачные, как на концепте) */
      .sync-hud {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.6rem;
        font-family: var(--font-mono);
        opacity: 0.5;              /* полупрозрачно */
        pointer-events: none;
        text-align: center;
      }
      .sync-hud--left  { left: 4%; }
      .sync-hud--right { right: 4%; }
      .sync-hud__code {
        font-size: 0.62rem;
        letter-spacing: 0.28em;
        line-height: 1.7;
        color: var(--clr-neon-cyan);
        text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
      }
      .sync-hud__bars {
        width: 26px;
        height: 6px;
        background:
          linear-gradient(var(--clr-neon-cyan), var(--clr-neon-cyan)) left top / 100% 2px no-repeat,
          linear-gradient(var(--clr-neon-cyan), var(--clr-neon-cyan)) left bottom / 60% 2px no-repeat;
        opacity: 0.7;
      }
      .sync-hud__num {
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        color: var(--clr-neon-pink);
        text-shadow: 0 0 8px rgba(255, 45, 120, 0.6);
      }
      .sync-hud__star {
        color: var(--clr-neon-pink);
        font-size: 0.7rem;
        text-shadow: 0 0 6px var(--clr-neon-pink);
      }

      .sync-modal__title {
        font-family: var(--font-display);
        font-size: 1.65rem;
        font-weight: 900;
        font-style: italic;
        color: var(--clr-neon-cyan);
        text-shadow: 
          0 0 8px var(--clr-neon-cyan),
          0 0 20px rgba(0, 229, 255, 0.4);
        margin-top: 10px;
        margin-bottom: 0.5rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
      }

      .sync-modal__title::before,
      .sync-modal__title::after {
        content: '';
        width: 46px;
        height: 14px;
        /* Три неоновые «крылатые» полосы по бокам заголовка (стиль концепта) */
        background:
          linear-gradient(var(--clr-neon-cyan), var(--clr-neon-cyan)) left  0   / 100% 2px no-repeat,
          linear-gradient(var(--clr-neon-cyan), var(--clr-neon-cyan)) left  6px / 72%  2px no-repeat,
          linear-gradient(var(--clr-neon-cyan), var(--clr-neon-cyan)) left  12px/ 44%  2px no-repeat;
        filter: drop-shadow(0 0 4px var(--clr-neon-cyan));
        opacity: 0.85;
      }
      .sync-modal__title::after {
        transform: scaleX(-1); /* зеркалим крылья справа */
      }

      .sync-modal__text {
        font-family: var(--font-mono);
        font-size: 1.15rem;
        color: var(--clr-text-primary);
        line-height: 1.6;
        margin: 0.25rem 0;
        text-shadow: 0 0 4px rgba(232, 213, 255, 0.5);
      }

      /* Пульсирующий синусоидный разделитель (Звуковая волна) */
      .sync-modal__divider {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0.5rem 0;
        position: relative;
      }

      .sync-modal__line {
        height: 1px;
        flex: 1;
      }

      .sync-modal__line--left {
        background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.5));
      }

      .sync-modal__line--right {
        background: linear-gradient(90deg, rgba(0, 229, 255, 0.5), transparent);
      }

      .sync-modal__pulse-wave {
        width: 50px;
        height: 16px;
        stroke: var(--clr-neon-purple);
        stroke-width: 1.5;
        fill: none;
        filter: drop-shadow(0 0 4px var(--clr-neon-purple));
        margin: 0 10px;
      }

      .sync-modal__highlight {
        color: var(--clr-neon-pink);
        font-weight: bold;
        text-shadow: 0 0 8px var(--clr-neon-pink);
      }

      .sync-modal__btn-wrap {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
      }

      /* Кнопка с точным срезом углов */
      .sync-modal__btn {
        position: relative;
        font-family: var(--font-display);
        font-size: 1.25rem;
        font-weight: 900;
        font-style: italic;
        color: #ffffff;
        background: transparent;
        border: none;
        padding: 14px 45px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: all var(--transition-fast);
        z-index: 10;
        border-radius: 10px; /* скруглённые углы вместо срезанных */
      }

      /* Наливка неоновой рамки */
      .sync-modal__btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(199, 36, 245, 0.12);
        border: 2px solid var(--clr-neon-pink);
        pointer-events: none;
        z-index: -1;
        transition: all var(--transition-mid);
        border-radius: 10px; /* скруглённая рамка под кнопку */
        box-shadow: 
          0 0 15px rgba(255, 45, 120, 0.4),
          inset 0 0 8px rgba(255, 45, 120, 0.2);
      }

      .sync-modal__btn:hover {
        color: #ffffff;
        text-shadow: 
          0 0 8px #ffffff,
          0 0 15px var(--clr-neon-cyan);
        transform: translateY(-2px);
        animation: btn-glitch-vibe 0.15s infinite;
      }

      .sync-modal__btn:hover::before {
        background: rgba(0, 229, 255, 0.2);
        border-color: var(--clr-neon-cyan);
        box-shadow: 
          0 0 25px rgba(0, 229, 255, 0.8),
          inset 0 0 12px rgba(0, 229, 255, 0.4);
      }

      .sync-modal__btn:active {
        transform: scale(0.96) translateY(0);
      }

      /* Иконки молний в кнопке */
      .sync-modal__lightning {
        color: var(--clr-neon-cyan);
        font-size: 1.1rem;
        font-style: normal;
        filter: drop-shadow(0 0 5px var(--clr-neon-cyan));
        transition: all var(--transition-fast);
      }

      .sync-modal__btn:hover .sync-modal__lightning {
        color: var(--clr-neon-pink);
        filter: drop-shadow(0 0 6px var(--clr-neon-pink));
      }

      @keyframes btn-glitch-vibe {
        0%, 100% { transform: translateY(-2px) translate(0, 0); }
        25% { transform: translateY(-2px) translate(-1px, 0.5px); }
        75% { transform: translateY(-2px) translate(1px, -0.5px); }
      }

      /* СИСТЕМНЫЕ СТИЛИ ДОСТИЖЕНИЙ (ШАГ 9) */
      .archive-overlay {
        position: fixed;
        inset: 0;
        z-index: 800;
        background: rgba(10, 5, 25, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-mid);
      }

      .archive-overlay.active {
        opacity: 1;
        pointer-events: auto;
      }

      .archive-modal {
        background: rgba(18, 8, 45, 0.95);
        border: 2px solid var(--clr-neon-purple);
        box-shadow: 0 0 40px rgba(199, 36, 245, 0.3);
        width: 95%;
        max-width: 800px;
        max-height: 85vh;
        border-radius: 6px;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        position: relative;
        transform: translateY(20px);
        transition: transform var(--transition-mid);
      }

      .archive-overlay.active .archive-modal {
        transform: translateY(0);
      }

      /* Оформление окна АЧИВОК (рамка + заголовок) — золото.
         Селектор по id окна перекрывает общий .archive-modal/.archive-modal__title
         (id весит больше класса), общий стиль не трогаем — он остаётся запасным.
         КАРТРИДЖИ (#cartridge-overlay) оставлены на общем стиле (фиолет рамка). */
      #archive-overlay .archive-modal {
        border-color: var(--clr-neon-gold);
        box-shadow: 0 0 40px rgba(255, 179, 0, 0.3);
      }
      #archive-overlay .archive-modal__title {
        color: var(--clr-neon-gold);
        text-shadow: 0 0 12px var(--clr-neon-gold);
      }

      .archive-modal__title {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 900;
        color: var(--clr-neon-cyan);
        text-shadow: 0 0 12px var(--clr-neon-cyan);
        text-align: center;
        margin-bottom: 0.5rem;
        letter-spacing: 0.1em;
      }

      .archive-modal__subtitle {
        text-align: center;
        font-size: 0.85rem;
        color: var(--clr-text-secondary);
        margin-bottom: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0.15em;
      }

      .archive-modal__close {
        position: absolute;
        top: 1rem;
        right: 1.2rem;
        background: transparent;
        border: none;
        color: var(--clr-neon-pink);
        font-family: var(--font-display);
        font-weight: 900;
        font-size: 1.3rem;
        cursor: pointer;
        transition: transform var(--transition-fast), text-shadow var(--transition-fast);
      }

      .archive-modal__close:hover {
        transform: scale(1.1);
        text-shadow: 0 0 8px var(--clr-neon-pink);
      }

      /* ГРИД ДЛЯ АЧИВОК-КАССЕТЫ */
      .archive-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1rem;
        overflow-y: auto;
        padding-right: 0.5rem;
        flex: 1;
        grid-auto-rows: min-content; /* фикс: ряды по высоте контента, не сжимаются, иначе overflow:hidden срезает кнопку покупки */
      }

      .archive-grid::-webkit-scrollbar {
        width: 4px;
      }
      .archive-grid::-webkit-scrollbar-thumb {
        background: var(--clr-neon-purple);
        border-radius: 2px;
      }

      /* КАРТОЧКА КАССЕТЫ ДОСТИЖЕНИЯ */
      .ach-card {
        border: 1px dashed rgba(199, 36, 245, 0.25);
        border-radius: 4px;
        padding: 1rem;
        background: rgba(10, 5, 25, 0.5);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: all var(--transition-mid);
        position: relative;
        overflow: hidden;
      }

      /* Стиль для открытого достижения */
      .ach-card--unlocked {
        border: 1px solid var(--clr-neon-cyan);
        background: rgba(0, 229, 255, 0.04);
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.15);
      }

      .ach-card__icon-wrap {
        width: 60px;
        height: 38px;
        border: 2px solid rgba(255, 255, 255, 0.15);
        border-radius: 3px;
        position: relative;
        margin-bottom: 0.8rem;
        background: rgba(0, 0, 0, 0.3);
        transition: all var(--transition-mid);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .ach-card--unlocked .ach-card__icon-wrap {
        border-color: var(--clr-neon-cyan);
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
      }

      /* Прорисовка ретро кассеты через SVG */
      .ach-card__cassette {
        width: 45px;
        height: 25px;
        opacity: 0.25;
        transition: opacity var(--transition-mid);
      }

      .ach-card--unlocked .ach-card__cassette {
        opacity: 1;
        animation: cassette-spin-glow 6s linear infinite;
      }

      @keyframes cassette-spin-glow {
        0%, 100% { filter: drop-shadow(0 0 2px var(--clr-neon-cyan)); }
        50%      { filter: drop-shadow(0 0 6px var(--clr-neon-purple)); }
      }

      .ach-card__name {
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--clr-text-secondary);
        margin-bottom: 0.3rem;
        letter-spacing: 0.05em;
        transition: color var(--transition-mid);
      }

      .ach-card--unlocked .ach-card__name {
        color: var(--clr-neon-pink);
        text-shadow: 0 0 5px rgba(255, 45, 120, 0.3);
      }

      .ach-card__desc {
        font-size: 0.75rem;
        color: rgba(144, 112, 192, 0.7);
        line-height: 1.3;
      }

      .ach-card--unlocked .ach-card__desc {
        color: var(--clr-text-primary);
      }

      .ach-card__status {
        position: absolute;
        top: 0.4rem;
        right: 0.4rem;
        font-size: 0.55rem;
        font-weight: bold;
        text-transform: uppercase;
        padding: 0.1rem 0.3rem;
        border-radius: 2px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.2);
      }

      .ach-card--unlocked .ach-card__status {
        border-color: var(--clr-neon-cyan);
        color: var(--clr-neon-cyan);
        text-shadow: 0 0 4px var(--clr-neon-cyan);
      }

      /* ДОСТУПНЫЙ (открыт, но ещё не куплен) картридж — тёплое золотое мерцание.
         Золото выбрано как третий тон: циан занят у installed, пурпур у locked. */
      .crt-card--available .ach-card__status {
        border-color: var(--clr-neon-gold);
        color: var(--clr-neon-gold);
        /* Анимация мерцания: плавно качаем яркость свечения и прозрачность.
           2.4s — медленный «дышащий» цикл, ease-in-out сглаживает края,
           infinite — бесконечный повтор. */
        animation: crt-available-shimmer 2.4s ease-in-out infinite;
      }

      /* Кадры мерцания статуса AVAILABLE.
         0% / 100% — приглушённое состояние (мягкое свечение, лёгкая прозрачность),
         50% — пик (яркое золотое гало, полная непрозрачность).
         Меняем только text-shadow и opacity, чтобы не дёргать layout. */
      @keyframes crt-available-shimmer {
        0%, 100% {
          opacity: 0.7;
          text-shadow: 0 0 3px var(--clr-neon-gold);
        }
        50% {
          opacity: 1;
          text-shadow:
            0 0 6px var(--clr-neon-gold),
            0 0 12px rgba(255, 179, 0, 0.6);
        }
      }

      /* ЗАПЕЧАТАННЫЙ (ещё не открытый) картридж — тизер в стиле синтвейва.
         Опирается на .ach-card, добавляет фиолетовую штриховку и приглушение. */
      .crt-card--locked {
        border: 1px dashed rgba(199, 36, 245, 0.35);
        background:
          repeating-linear-gradient(135deg,
            rgba(199, 36, 245, 0.06) 0px,
            rgba(199, 36, 245, 0.06) 6px,
            transparent 6px,
            transparent 13px),
          rgba(10, 5, 25, 0.55);
      }

      .crt-card--locked .ach-card__icon-wrap {
        border-color: rgba(199, 36, 245, 0.3);
      }

      .crt-card--locked .ach-card__cassette {
        opacity: 0.16;
      }

      .crt-card--locked .ach-card__name {
        color: var(--clr-text-secondary);
        opacity: 0.9;
      }

      .crt-card--locked .ach-card__status {
        border-color: rgba(199, 36, 245, 0.45);
        color: var(--clr-neon-purple);
        text-shadow: 0 0 4px rgba(199, 36, 245, 0.5);
      }

      /* Строка условия открытия на запечатанной плашке */
      .crt-card__cond {
        margin-top: 0.35rem;
        text-align: center;
      }

      .crt-card__cond-label {
        display: block;
        font-size: 0.55rem;
        letter-spacing: 0.12em;
        color: rgba(199, 36, 245, 0.7);
        margin-bottom: 0.2rem;
      }

      .crt-card__cond-value {
        font-size: 0.74rem;
        color: var(--clr-text-primary);
        opacity: 0.92;
      }

      /* Глухое состояние: условие ещё скрыто (порог 50% не достигнут) */
      .crt-card__cond--hidden .crt-card__cond-value {
        color: var(--clr-neon-purple);
        letter-spacing: 0.3em;
        text-shadow: 0 0 6px rgba(199, 36, 245, 0.5);
      }

      /* СИСТЕМНЫЕ СТИЛИ TOASTS (ВСПЛЫВАЮЩИЕ КАРТОЧКИ УВЕДОМЛЕНИЙ) */
      .toast-container {
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        pointer-events: none;
      }

      .toast {
        background: rgba(15, 5, 35, 0.95);
        border: 2px solid var(--clr-neon-pink);
        border-radius: 4px;
        box-shadow: 0 0 25px rgba(255, 45, 120, 0.4);
        padding: 0.85rem 1.25rem;
        min-width: 280px;
        max-width: 340px;
        pointer-events: auto;
        position: relative;
        transform: translateX(120%);
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        will-change: transform;
      }

      .toast.active {
        transform: translateX(0);
      }

      .toast__title {
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 900;
        letter-spacing: 0.15em;
        color: var(--clr-neon-cyan);
        text-shadow: 0 0 5px var(--clr-neon-cyan);
        margin-bottom: 0.25rem;
        text-transform: uppercase;
      }

      .toast__name {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: #ffffff;
        text-shadow: 0 0 5px var(--clr-neon-pink);
        margin-bottom: 0.15rem;
      }

      .toast__desc {
        font-size: 0.75rem;
        color: var(--clr-text-secondary);
        line-height: 1.3;
      }

      .toast__close {
        position: absolute;
        top: 4px;
        right: 8px;
        color: var(--clr-text-secondary);
        font-size: 0.8rem;
        cursor: pointer;
        background: none;
        border: none;
      }

      /* КИБЕРПАНК СТИЛИ ДЛЯ ЖУРНАЛА СОБЫТИЙ (COCKPIT LOG) */
      .log-panel {
        /* ЗОНА E: журнал растягивается на ширину колонки и прижат вниз.
           margin-bottom приведён к нормальному значению (был магический 11px,
           подогнанный под одно разрешение). */
        width: 100%;
        max-width: 100%; /* п7: журнал во всю ширину центральной колонки (как раньше была строка звания) */
        background: rgba(10, 5, 30, 0.7);
        border: 1px solid rgba(199, 36, 245, 0.3);
        border-radius: 4px;
        padding: 0.5rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        box-shadow: 0 0 15px rgba(10, 5, 20, 0.5);
        z-index: 20;
        margin-top: auto;
        margin-bottom: 0.5rem;
      }

      .log-panel__header {
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--clr-neon-cyan);
        text-shadow: 0 0 5px var(--clr-neon-cyan);
        border-bottom: 1px solid rgba(199, 36, 245, 0.2);
        padding-bottom: 0.25rem;
        text-align: center;
        text-transform: uppercase;
      }

      .log-panel__body {
        height: 75px; /* Отображает около 4 компактных строк */
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        font-family: var(--font-mono);
        font-size: 0.65rem;
        line-height: 1.3;
        padding-right: 0.2rem;
      }

      .log-panel__body::-webkit-scrollbar {
        width: 3px;
      }
      .log-panel__body::-webkit-scrollbar-track {
        background: transparent;
      }
      .log-panel__body::-webkit-scrollbar-thumb {
        background: var(--clr-neon-purple);
        border-radius: 1.5px;
      }

      .log-entry {
        color: var(--clr-text-secondary);
        border-left: 2px solid transparent;
        padding-left: 0.3rem;
        animation: log-fade-in 0.2s ease-out forwards;
      }

      @keyframes log-fade-in {
        from { opacity: 0; transform: translateY(3px); }
        to { opacity: 1; transform: translateY(0); }
      }

      .log-entry__time {
        color: var(--clr-neon-purple);
        margin-right: 0.25rem;
      }

      .log-entry--purchase {
        border-left-color: var(--clr-neon-cyan);
        color: var(--clr-text-primary);
      }
      .log-entry--purchase .log-entry__text {
        color: #fff;
      }
      .log-entry--rush {
        border-left-color: var(--clr-neon-orange);
        background: rgba(255, 106, 0, 0.05);
      }
      .log-entry--rush .log-entry__text {
        color: var(--clr-neon-orange);
        text-shadow: 0 0 4px rgba(255, 106, 0, 0.3);
      }
      .log-entry--offline-boost {
        border-left-color: var(--clr-neon-cyan);
        background: rgba(0, 229, 255, 0.05);
      }
      .log-entry--offline-boost .log-entry__text {
        color: var(--clr-neon-cyan);
      }
      .log-entry--achievement {
        border-left-color: var(--clr-neon-pink);
        background: rgba(255, 45, 120, 0.05);
      }
      .log-entry--achievement .log-entry__text {
        color: var(--clr-neon-pink);
        text-shadow: 0 0 4px rgba(255, 45, 120, 0.3);
      }
      .log-entry--rebirth {
        border-left-color: var(--clr-neon-gold);
        background: rgba(255, 179, 0, 0.08);
      }
      .log-entry--rebirth .log-entry__text {
        color: var(--clr-neon-gold);
        text-shadow: 0 0 5px var(--clr-neon-gold);
        font-weight: 900;
      }
      .log-entry--combo {
        border-left-color: #39ff8a;
      }
      .log-entry--combo .log-entry__text {
        color: #39ff8a;
      }
      .log-entry--crit {
        border-left-color: #ffe066;
      }
      .log-entry--crit .log-entry__text {
        color: #ffe066;
      }

      /* ГИПЕР-СВЕЧЕНИЕ И ДИНАМИКА ПРИ NEON RUSH БУСТЕ */
      /* ================================================================
         NEON RUSH — адресная перекраска только видимых элементов.
         Вместые глобальной замены переменных на body (что вызывало
         пересчёт всех 104 вхождений в DOM) — красим ровно 10 селекторов.
         Браузер трогает только их, остальной DOM не пересчитывается.
         Цвета Rush: золото #ffb300, оранжевый #ff6a00, красный #ff0055.
         ================================================================ */

      /* 1. BPS-счётчик — самое заметное число во время Rush */
      body.boost-active .score-bps__value {
        color: #ffb300;
        text-shadow: 0 0 8px #ffb300;
      }

      /* 2. Заголовки панелей — СИНТЕЗАТОР / СЕКВЕНСОР по бокам */
      body.boost-active .panel__label {
        color: #ffb300;
        text-shadow: 0 0 10px #ffb300;
      }

      /* 3. Названия карточек апгрейдов (розовый → красный) */
      body.boost-active .shop-card__name {
        color: #ff0055;
        text-shadow: 0 0 8px #ff0055;
      }

      /* 4. Счётчик количества купленных (бирюзовый → золото) */
      body.boost-active .shop-card__count {
        color: #ffb300;
      }

      /* 5. Строка эффекта в карточке — "+X Б/с" */
      body.boost-active .shop-card__effect {
        color: #ffb300;
      }

      /* 6. Комбо-множитель x1.0 / x1.2 / x1.5 / x2.0 */
      body.boost-active .combo-multiplier {
        color: #ffb300;
        text-shadow: 0 0 5px #ffb300;
      }

      /* 7. Полоса комбо-бара */
      body.boost-active .combo-bar-fill {
        background: linear-gradient(90deg, #ff6a00, #ffb300);
        box-shadow: 0 0 8px #ff6a00;
      }

      /* 8. Комбо-уровень lvl-1 (cyan → gold) */
      body.boost-active .combo-multiplier.lvl-1 {
        color: #ffb300;
        text-shadow: 0 0 8px #ffb300;
      }

      /* 9. Комбо-уровень lvl-2 (purple → orange) */
      body.boost-active .combo-multiplier.lvl-2 {
        color: #ff6a00;
        text-shadow: 0 0 10px #ff6a00;
      }

      /* 10. Комбо-уровень lvl-3 Overdrive (pink → red) */
      body.boost-active .combo-multiplier.lvl-3 {
        color: #ff0055;
        text-shadow: 0 0 15px #ff0055;
      }

      /* 11. Левая панель — золотое свечение на правом крае (сторона к кругу) */
      body.boost-active #panel-left-upgrades {
        box-shadow: 4px 0 32px rgba(255, 179, 0, 0.45), 0 8px 30px rgba(10, 5, 20, 0.8);
        border-right-color: rgba(255, 179, 0, 0.7);
      }

      /* 12. Правая панель — золотое свечение на левом крае (сторона к кругу) */
      body.boost-active #panel-right-upgrades {
        box-shadow: -4px 0 32px rgba(255, 179, 0, 0.45), 0 8px 30px rgba(10, 5, 20, 0.8);
        border-left-color: rgba(255, 179, 0, 0.7);
      }

      body.boost-active .bg-grid {
        
        background-image:
          repeating-linear-gradient(
            to bottom,
            rgba(255, 106, 0, 0.25) 0px,
            rgba(255, 106, 0, 0.25) 1px,
            transparent 1px,
            transparent 40px
          ),
          repeating-linear-gradient(
            to right,
            rgba(255, 106, 0, 0.15) 0px,
            rgba(255, 106, 0, 0.15) 1px,
            transparent 1px,
            transparent 60px
          );
      }

      body.boost-active .bg-sun {
        animation: sun-pulse-turbo 1.5s ease-in-out infinite; /* Бешеная пульсация солнца */
        background:
          repeating-linear-gradient(
            to bottom,
            transparent              0px,
            transparent              9px,
            rgba(10, 5, 20, 0.45)    9px,
            rgba(10, 5, 20, 0.45)    10px
          ),
          radial-gradient(
            circle,
            #ffffff 0%,
            #ffb300 35%,
            #ff3c00 65%,
            transparent 100%
          );
        box-shadow:
          0 0 100px 40px rgba(255, 179, 0, 0.4),
          0 0 200px 80px rgba(255, 60, 0, 0.2);
      }

      @keyframes sun-pulse-turbo {
        0%, 100% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.95); }
        50%       { opacity: 1.0; transform: translate(-50%, -50%) scale(1.05); }
      }

      body.boost-active .panel {
        border-color: rgba(255, 106, 0, 0.7);
        box-shadow: 0 0 25px rgba(255, 106, 0, 0.25);
      }

      body.boost-active .panel__corner {
        border-color: var(--clr-neon-orange);
      }

      body.boost-active .click-btn {
        background: radial-gradient(
          circle at 35% 35%,
          #7a2a0a 0%,
          #501502 40%,
          #300500 100%
        );
        box-shadow:
          0 0 0 4px var(--clr-neon-orange),
          0 0 45px var(--clr-neon-orange),
          0 0 100px rgba(255, 106, 0, 0.4),
          inset 0 0 60px rgba(180, 50, 0, 0.5);
      }

      body.boost-active .click-btn__icon {
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1)) invert(12%) sepia(95%) saturate(7400%) hue-rotate(359deg) brightness(97%) contrast(116%);
      }

      body.boost-active .click-btn__ring--1 {
        border-color: rgba(255, 106, 0, 0.8);
        box-shadow: 0 0 15px rgba(255, 106, 0, 0.6);
        animation-duration: 3s;
      }
      body.boost-active .click-btn__ring--2 {
        border-color: rgba(255, 179, 0, 0.5);
        animation-duration: 4s;
      }
      body.boost-active .boost-active .click-btn__ring--3 {
        border-color: rgba(255, 0, 85, 0.4);
        animation-duration: 6s;
      }

      /* Специфический белый глитч-эффект для Rebirth аннигиляции (ШАГ 11) */
      .rebirth-flash {
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: #fff;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.1s ease-out;
      }
      .rebirth-flash.active {
        opacity: 1;
      }

      /* Стилизация общей полосы прокрутки */
      ::-webkit-scrollbar {
        width: 6px;
      }
      ::-webkit-scrollbar-track {
        background: rgba(10, 5, 20, 0.5);
      }
      ::-webkit-scrollbar-thumb {
        background: rgba(199, 36, 245, 0.28); /* приглушённый, не кричит на тёмном фоне */
        border-radius: 3px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: rgba(199, 36, 245, 0.45);
      }
      /* Firefox */
      html { scrollbar-width: thin; scrollbar-color: rgba(199,36,245,0.28) rgba(10,5,20,0.5); }

      /* ===== КНОПКА ПРАВИЛ (правый нижний угол) ===== */
      .rules-btn {
        position: absolute;
        /* отодвинута от правого края: компенсируем полосу прокрутки (в Firefox при right:1.5rem
           кнопка прижималась к краю). Низ и подъём — как у бейджа. */
        right: 2.6rem;
        /* Стек поднят, чтобы освободить место под кнопку сброса снизу.
           Геометрия выведена из высот кнопок (музыка/«?» = 46px, сброс = 38px) и зазора ~10px:
           расстояние центров «?»↔reset = 23 + 10 + 19 = 52px; reset уходит на -4px от старой базы
           (чтобы его НИЗ совпал со старым низом «?»), поэтому «?» = -4 + 52 = +48px.
           Числа подбираются визуально, если изменится высота/шрифт кнопки сброса. */
        bottom: calc(50vh - 375px + 48px);
        transform: translateY(-50%);
        z-index: 500;
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--clr-neon-cyan);
        background: rgba(10, 5, 28, 0.85);
        border: 1px solid var(--clr-neon-cyan);
        border-radius: 10px;
        cursor: pointer;
        text-shadow: 0 0 8px var(--clr-neon-cyan);
        box-shadow: 0 0 14px -3px var(--clr-neon-cyan), inset 0 0 12px -8px var(--clr-neon-cyan);
        transition: transform var(--transition-fast), box-shadow var(--transition-mid), color var(--transition-mid);
      }
      .rules-btn:hover {
        color: #fff;
        transform: translateY(calc(-50% - 2px)); /* сохраняем центровку + лёгкий подъём, без скачка */
        box-shadow: 0 0 22px 0 var(--clr-neon-cyan), inset 0 0 14px -6px var(--clr-neon-cyan);
      }
      .rules-btn:focus-visible { outline: 2px solid var(--clr-neon-pink); outline-offset: 3px; }

      /* Кнопка "Музыка в фоне" — форма и размер как у .rules-btn, но розовая.
         Стоит над кнопкой справки тем же вертикальным стеком справа.
         На тач-устройствах скрыта: фоновая музыка там не используется. */
      .bgmusic-btn {
        position: absolute;
        right: 2.6rem;
        bottom: calc(50vh - 375px + 104px); /* сохраняет зазор 56px над поднятой "?" (48 + 56); правится этим числом */
        transform: translateY(-50%);
        z-index: 500;
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--clr-neon-pink);
        background: rgba(10, 5, 28, 0.85);
        border: 1px solid var(--clr-neon-pink);
        border-radius: 10px;
        cursor: pointer;
        text-shadow: 0 0 8px var(--clr-neon-pink);
        box-shadow: 0 0 14px -3px var(--clr-neon-pink), inset 0 0 12px -8px var(--clr-neon-pink);
        transition: transform var(--transition-fast), box-shadow var(--transition-mid), color var(--transition-mid), opacity var(--transition-mid);
      }
      .bgmusic-btn svg { width: 24px; height: 24px; display: block; }
      .bgmusic-btn:hover {
        color: #fff;
        transform: translateY(calc(-50% - 2px)); /* центровка + лёгкий подъём, как у .rules-btn */
        box-shadow: 0 0 22px 0 var(--clr-neon-pink), inset 0 0 14px -6px var(--clr-neon-pink);
      }
      .bgmusic-btn:focus-visible { outline: 2px solid var(--clr-neon-cyan); outline-offset: 3px; }
      /* Выключенное состояние: приглушённый, без свечения, с диагональным перечёркиванием */
      .bgmusic-btn--off {
        color: var(--clr-text-secondary);
        border-color: rgba(144, 112, 192, 0.5);
        text-shadow: none;
        box-shadow: none;
        opacity: 0.7;
      }
      .bgmusic-btn .bgmusic-strike { display: none; }
      .bgmusic-btn--off .bgmusic-strike { display: block; }
      /* Тач-устройства (телефон/планшет): кнопку не показываем вообще */
      @media (pointer: coarse) {
        .bgmusic-btn { display: none !important; }
      }

      /* Оверлей с правилами (iframe на rules.html) */
      .rules-overlay {
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: rgba(6, 3, 16, 0.88);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2.2rem 1.2rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-mid);
      }
      .rules-overlay.active { opacity: 1; pointer-events: auto; }
      .rules-frame-wrap {
        position: relative;
        width: min(1000px, 96vw);
        height: min(88vh, 1000px);
        border: 1px solid var(--clr-neon-cyan);
        border-radius: 10px;
        box-shadow: 0 0 40px -6px var(--clr-neon-cyan);
        overflow: hidden;
        background: var(--clr-bg-deep);
      }
      .rules-frame-wrap iframe {
        width: 100%; height: 100%; border: 0; display: block;
      }
      .rules-close {
        position: absolute;
        top: 10px; right: 22px; /* отодвинут от скроллбара iframe */
        z-index: 2;
        width: 34px; height: 34px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem; line-height: 1;
        color: var(--clr-neon-pink);
        background: rgba(10, 5, 25, 0.9);
        border: 1px solid var(--clr-neon-pink);
        border-radius: 7px;
        cursor: pointer;
        text-shadow: 0 0 6px var(--clr-neon-pink);
        transition: color var(--transition-fast), background var(--transition-fast);
      }
      .rules-close:hover { color: #fff; background: var(--clr-neon-pink); }

      /* Кнопка сброса прогресса — третья в правом стеке, ниже "?".
         Приглушённая (стиль как у выключенной музыки): без свечения, тусклая рамка,
         меньше остальных (38px против 46px). Её НИЗ совпадает со старым низом "?":
         центр на -4px от старой базы (см. комментарий у .rules-btn). */
      .reset-btn {
        position: absolute;
        right: 2.6rem;
        bottom: calc(50vh - 375px - 4px);
        transform: translateY(-50%);
        z-index: 500;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 1.2rem;
        line-height: 1;
        color: var(--clr-text-secondary);
        background: rgba(10, 5, 28, 0.85);
        border: 1px solid rgba(144, 112, 192, 0.5);
        border-radius: 9px;
        cursor: pointer;
        text-shadow: none;
        box-shadow: none;
        opacity: 0.7;
        transition: color var(--transition-mid), border-color var(--transition-mid), opacity var(--transition-mid);
      }
      /* Hover скромный: проявляем кнопку и подсвечиваем розовым, без мощного свечения */
      .reset-btn:hover {
        color: var(--clr-neon-pink);
        border-color: var(--clr-neon-pink);
        opacity: 1;
      }
      .reset-btn:focus-visible { outline: 2px solid var(--clr-neon-pink); outline-offset: 3px; }

      /* ===== Модалка подтверждения сброса (отдельные классы) ===== */
      .reset-overlay {
        position: fixed;
        inset: 0;
        z-index: 1300; /* выше rules-overlay (1200), чтобы перекрывать всё */
        background: rgba(6, 3, 16, 0.88);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2.2rem 1.2rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-mid);
      }
      .reset-overlay.active { opacity: 1; pointer-events: auto; }
      .reset-modal {
        width: min(420px, 92vw);
        background: var(--clr-bg-deep);
        border: 1px solid var(--clr-neon-pink); /* опасное действие → розовый акцент */
        border-radius: 12px;
        box-shadow: 0 0 40px -6px var(--clr-neon-pink);
        padding: 1.8rem 1.6rem 1.5rem;
        font-family: var(--font-mono);
        text-align: center;
      }
      .reset-modal__title {
        margin: 0 0 0.9rem;
        font-family: var(--font-display);
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        color: var(--clr-neon-pink);
        text-shadow: 0 0 12px var(--clr-neon-pink);
      }
      .reset-modal__text {
        margin: 0 0 1.4rem;
        font-size: 0.92rem;
        line-height: 1.5;
        color: var(--clr-text-secondary);
      }
      .reset-modal__btns {
        display: flex;
        gap: 0.8rem;
        justify-content: center;
      }
      .reset-modal__btn {
        flex: 1 1 0;
        padding: 0.7rem 0.9rem;
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        border-radius: 8px;
        cursor: pointer;
        background: rgba(10, 5, 28, 0.85);
        transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-mid);
      }
      /* Отмена — нейтральная/приглушённая */
      .reset-modal__btn--cancel {
        color: var(--clr-text-secondary);
        border: 1px solid rgba(144, 112, 192, 0.5);
      }
      .reset-modal__btn--cancel:hover {
        color: #fff;
        border-color: var(--clr-neon-cyan);
      }
      /* Подтверждение — опасное, розовый акцент */
      .reset-modal__btn--danger {
        color: var(--clr-neon-pink);
        border: 1px solid var(--clr-neon-pink);
        text-shadow: 0 0 6px var(--clr-neon-pink);
      }
      .reset-modal__btn--danger:hover {
        color: #fff;
        background: var(--clr-neon-pink);
        box-shadow: 0 0 18px -4px var(--clr-neon-pink);
      }
      /* ШАГ 1: обычная (не опасная) кнопка подтверждения покупки — циан-акцент.
         Используется для покупок буст/цвет; для УЛЬТРА остаётся --danger. */
      .reset-modal__btn--confirm {
        color: var(--clr-neon-cyan);
        border: 1px solid var(--clr-neon-cyan);
        text-shadow: 0 0 6px var(--clr-neon-cyan);
      }
      .reset-modal__btn--confirm:hover {
        color: #fff;
        background: var(--clr-neon-cyan);
        box-shadow: 0 0 18px -4px var(--clr-neon-cyan);
      }
      .reset-modal__btn:focus-visible { outline: 2px solid var(--clr-neon-cyan); outline-offset: 3px; }


      /* Специфическая подпись автора в стиле 80-х */
      .author-badge {
        position: absolute;
        /* п8: бейдж в левом нижнем углу окна; поднят так, чтобы низ совпал с низом
           центрированной по вертикали панели улучшений (высота панели ~750px).
           Если на твоём экране линия чуть выше/ниже — правится одним числом здесь. */
        bottom: calc(50vh - 375px);
        left: 1.5rem;
        transform: translateY(-50%); /* поднят на 50% собственной высоты */
        z-index: 100;
        pointer-events: auto; /* было none: теперь бейдж кликабелен для копирования e-mail */
        cursor: pointer;
        font-family: var(--font-display);
        text-transform: none;
        background: rgba(10, 5, 25, 0.85);
        border: 1px solid var(--clr-neon-pink);
        padding: 0.45rem 0.9rem;
        border-radius: 2px;
        box-shadow: 
          0 0 10px rgba(255, 45, 120, 0.3),
          inset 0 0 5px rgba(255, 45, 120, 0.2);
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        line-height: 1;
        width: fit-content;
      }

      .author-badge__title {
        font-size: 0.55rem;
        color: var(--clr-neon-cyan);
        letter-spacing: 0.15em;
        font-weight: 700;
        text-shadow: 0 0 4px var(--clr-neon-cyan);
      }

      .author-badge__name {
        font-size: 0.95rem;
        font-weight: 900;
        color: #ffffff;
        letter-spacing: 0.12em;
        text-shadow: 
          0 0 6px var(--clr-neon-pink),
          0 0 12px var(--clr-neon-purple);
        font-style: normal;
      }

      /* Неоновый тултип с e-mail автора (показ адреса при наведении).
         Скрыт по умолчанию (opacity:0), проявляется на :hover/:focus бейджа.
         Всплывает над бейджем, по центру. Не перехватывает клики (pointer-events:none). */
      .author-badge__tip {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translate(calc(-50% + 1px), -6px);
        margin-bottom: 0.35rem;
        white-space: nowrap;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: var(--clr-neon-cyan);
        background: rgba(10, 5, 25, 0.95);
        border: 1px solid var(--clr-neon-cyan);
        padding: 0.3rem 0.6rem;
        border-radius: 2px;
        text-shadow: 0 0 6px var(--clr-neon-cyan);
        box-shadow:
          0 0 10px rgba(0, 229, 255, 0.45),
          inset 0 0 5px rgba(0, 229, 255, 0.2);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 101;
      }

      /* Показ тултипа при наведении/фокусе на бейдже */
      .author-badge:hover .author-badge__tip,
      .author-badge:focus-within .author-badge__tip {
        opacity: 1;
        transform: translate(calc(-50% + 1px), 0);
      }

      /* Состояние «скопировано»: тултип подсвечивается розовым */
      .author-badge.is-copied .author-badge__tip {
        opacity: 1;
        transform: translate(calc(-50% + 1px), 0);
        color: var(--clr-neon-pink);
        border-color: var(--clr-neon-pink);
        text-shadow: 0 0 6px var(--clr-neon-pink);
        box-shadow:
          0 0 10px rgba(255, 45, 120, 0.5),
          inset 0 0 5px rgba(255, 45, 120, 0.2);
      }

      /* Версия игры — отдельная надпись под бейджем автора, по той же левой кромке.
         Вертикальное смещение правится одним числом (как и сам бейдж). */
      .game-version {
        position: absolute;
        left: 1.5rem;
        bottom: calc(50vh - 375px - 46px); /* ~на 46px ниже центра бейджа → под его нижней кромкой */
        transform: translateY(-50%);
        z-index: 100;
        pointer-events: none;
        font-family: var(--font-display);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        color: var(--clr-text-secondary);
        text-shadow: 0 0 5px rgba(144, 112, 192, 0.5);
        opacity: 0.8;
        /* Обёртка стала flex-строкой: метка версии + дискетка в один ряд. */
        display: flex;
        align-items: center;
        gap: 0.4rem;
      }
      /* Метка версии — кликабельна (вход в журнал). Наследует типографику обёртки,
         но сама перехватывает события (родитель остаётся pointer-events:none). */
      .game-version__btn {
        pointer-events: auto;
        background: none;
        border: 0;
        padding: 0;
        margin: 0;
        cursor: pointer;
        font: inherit;
        letter-spacing: inherit;
        color: inherit;
        text-shadow: inherit;
        transition: color var(--transition-fast), text-shadow var(--transition-fast);
      }
      .game-version__btn:hover {
        color: var(--clr-neon-cyan);
        text-shadow: 0 0 7px var(--clr-neon-cyan);
      }
      .game-version__btn:focus-visible { outline: 1px solid var(--clr-neon-cyan); outline-offset: 2px; }
      /* Дискетка — вторая точка входа. Циановый контур, тусклая, ярче при наведении. */
      .game-version__disk {
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: 0;
        padding: 0;
        margin: 0;
        cursor: pointer;
        color: var(--clr-neon-cyan);
        opacity: 0.55;
        transition: opacity var(--transition-fast), filter var(--transition-fast);
      }
      .game-version__disk:hover {
        opacity: 1;
        filter: drop-shadow(0 0 4px var(--clr-neon-cyan));
      }
      .game-version__disk:focus-visible { outline: 1px solid var(--clr-neon-cyan); outline-offset: 2px; }


      /* ============================================================
         П5: БОЛЬШАЯ НАДПИСЬ ВЫИГРЫША (NEON RUSH / ДЖЕКПОТ)
         Огромный полупрозрачный текст по центру экрана, всплывает,
         плывёт вверх и быстро затухает. Цвет задаётся инлайн под эффект.
         pointer-events: none — не перехватывает клики по кнопке.
         ============================================================ */
      .win-banner {
        position: fixed;
        top: 42%;
        left: 50%;
        z-index: 900;
        pointer-events: none;
        font-family: var(--font-display);
        font-weight: 900;
        font-size: clamp(2.6rem, 12vw, 11rem);
        letter-spacing: 0.03em;
        text-transform: uppercase;
        text-align: center;
        white-space: nowrap;
        opacity: 0;
        transform: translate(-50%, -40%) scale(0.6);
        will-change: transform, opacity;
      }
      .win-banner.run {
        animation: win-banner-rise 1.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
      }
      @keyframes win-banner-rise {
        0%   { opacity: 0;    transform: translate(-50%, -40%) scale(0.6); }
        14%  { opacity: 0.82; transform: translate(-50%, -50%) scale(1.06); }
        34%  { opacity: 0.62; transform: translate(-50%, -54%) scale(1.0); }
        100% { opacity: 0;    transform: translate(-50%, -82%) scale(1.14); }
      }

      @media (prefers-reduced-motion: reduce) {
        .win-banner.run { animation-duration: 1.2s; }
      }

      /* ДЖЕКПОТ: всё золотое на время жизни надписи.
         Перекрашиваем самые заметные элементы; !important перекрывает
         поуровневые цвета комбо. Класс снимается по таймеру в JS. */
      body.jackpot-flash .score-value,
      body.jackpot-flash .score-bps__value,
      body.jackpot-flash .click-rate__value,
      body.jackpot-flash .panel__label,
      body.jackpot-flash .combo-multiplier,
      body.jackpot-flash .combo-multiplier.lvl-1,
      body.jackpot-flash .combo-multiplier.lvl-2,
      body.jackpot-flash .combo-multiplier.lvl-3,
      body.jackpot-flash .shop-card__effect,
      body.jackpot-flash .shop-card__count {
        color: #ffb300 !important;
        text-shadow: 0 0 10px #ffb300, 0 0 26px rgba(255, 179, 0, 0.6) !important;
      }
      body.jackpot-flash .shop-card__name {
        color: #ffd24a !important;
        text-shadow: 0 0 10px #ffb300 !important;
      }
      body.jackpot-flash .combo-bar-fill {
        background: linear-gradient(90deg, #ff6a00, #ffb300) !important;
        box-shadow: 0 0 8px #ffb300 !important;
      }
      body.jackpot-flash #panel-left-upgrades {
        box-shadow: 4px 0 40px rgba(255, 179, 0, 0.6), 0 8px 30px rgba(10, 5, 20, 0.8);
        border-right-color: rgba(255, 179, 0, 0.85);
      }
      body.jackpot-flash #panel-right-upgrades {
        box-shadow: -4px 0 40px rgba(255, 179, 0, 0.6), 0 8px 30px rgba(10, 5, 20, 0.8);
        border-left-color: rgba(255, 179, 0, 0.85);
      }
      body.jackpot-flash .click-btn {
        box-shadow: 0 0 0 4px #ffb300, 0 0 60px rgba(255, 179, 0, 0.8),
                    0 0 120px rgba(255, 106, 0, 0.4), inset 0 0 80px rgba(255, 150, 0, 0.5) !important;
      }
    
      /* БАННЕР ПОБЕДЫ: полупрозрачная плашка поверх всего экрана.
         Скрыт по умолчанию (display:none + opacity:0). Класс .is-visible
         включает показ и запускает медленный fade-in (1.6s).
         Закрывается кликом (обработчик в index.html снимает .is-visible). */
      .win-banner {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        align-items: center;
        justify-content: center;
        /* Полупрозрачная тёмная подложка поверх игры */
        background: rgba(10, 5, 20, 0.55);
        cursor: pointer;
        opacity: 0;
        /* Медленный fade-in: плавное проявление за 1.6 секунды */
        transition: opacity 1.6s ease;
      }
      .win-banner.is-visible {
        display: flex;
        opacity: 1;
      }
      .win-banner__text {
        font-family: var(--font-display);
        font-size: clamp(1.4rem, 4vw, 3rem);
        letter-spacing: 0.12em;
        text-align: center;
        padding: 0 1.5rem;
        color: var(--clr-neon-cyan);
        /* Многослойное неоновое свечение для «мистического» вида */
        text-shadow:
          0 0 8px var(--clr-neon-cyan),
          0 0 24px var(--clr-neon-cyan),
          0 0 48px var(--clr-neon-purple);
      }


      /* ШАГ 1.5: кнопка входа в магазин. Геометрия и вид — как у .rules-btn,
         но стоит ВЫШЕ кнопки музыки в том же правом стеке (right: 2.6rem).
         Смещение +160px = +104 (музыка) + 56 (тот же зазор, что между
         музыкой и «?»). Иконкой служит SVG-тележка циан-контуром. */
      .shop-btn {
        position: absolute;
        right: 2.6rem;
        bottom: calc(50vh - 375px + 160px);
        transform: translateY(-50%);
        z-index: 500;
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--clr-neon-cyan);
        background: rgba(10, 5, 28, 0.85);
        border: 1px solid var(--clr-neon-cyan);
        border-radius: 10px;
        cursor: pointer;
        text-shadow: 0 0 8px var(--clr-neon-cyan);
        box-shadow: 0 0 14px -3px var(--clr-neon-cyan), inset 0 0 12px -8px var(--clr-neon-cyan);
        transition: transform var(--transition-fast), box-shadow var(--transition-mid), color var(--transition-mid);
      }
      .shop-btn:hover {
        color: #fff;
        transform: translateY(calc(-50% - 2px));
        box-shadow: 0 0 22px 0 var(--clr-neon-cyan), inset 0 0 14px -6px var(--clr-neon-cyan);
      }
      .shop-btn:focus-visible { outline: 2px solid var(--clr-neon-pink); outline-offset: 3px; }