:root {
    --color-primary: #2f9bff;
    --color-primary-dark: #1f7fe0;
    --color-text: #3a3a4a;
    --color-border: #d9def5;
    --color-muted: #7a7f96;

    /* Candy cartoon palette */
    --candy-blue: #2f9bff;
    --candy-blue-d: #1f7fe0;
    --candy-pink: #ff6fae;
    --candy-pink-d: #e94f93;
    --candy-yellow: #ffcf3f;
    --candy-yellow-d: #f5b400;
    --candy-green: #46d39a;
    --candy-green-d: #1fae7a;
    --candy-purple: #9b6bff;
    --candy-red: #ff5d7a;
    --candy-orange: #ff9f43;
    --panel-soft: #eef2ff;
    --field-shadow: rgba(31, 127, 224, 0.25);
    --good: #46d39a;
    --accent: #2f9bff;
}

body {
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 214, 120, 0.55), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(255, 150, 200, 0.55), transparent 45%),
        radial-gradient(circle at 82% 85%, rgba(150, 240, 190, 0.55), transparent 48%),
        radial-gradient(circle at 14% 88%, rgba(150, 200, 255, 0.60), transparent 48%),
        linear-gradient(160deg, #b9ecff 0%, #ffd9f3 48%, #fff2c2 100%);
    background-attachment: fixed;
}

body, html, * {
    margin: 0;
    padding: 0;
    font-family: 'Fredoka', 'Comfortaa', 'Roboto', Arial, Helvetica, sans-serif;
    color: var(--color-text);
    user-select: none;
    touch-action: manipulation;
    /* Блокируем pull-to-refresh и навигацию свайпом (иначе жест во время игры
       перезагружает страницу → возврат в главное меню + рестарт музыки) */
    overscroll-behavior: none;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}
body, html {
    overflow: hidden;
}

body {
    --moves-badge-display: flex;
    --moves-badge-counter: 0;

    --blow-color-badge-display: none;
    --blow-color-badge-counter: 0;
    --blow-color-bg-height: 0%;

    --blow-nearby-badge-display: none;
    --blow-nearby-badge-counter: 0;
    --blow-nearby-bg-height: 0%;

    --any-color-badge-display: none;
    --any-color-badge-counter: 0;
    --any-color-bg-height: 0%;
}

html, body {
    width: 100%;
    height: 100%;
    /* Запрещаем «отскок» страницы и обновление свайпом вниз */
    overscroll-behavior: none;
}

p {
    margin: 12px 0;
}

p > svg {
    display: block;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    float: left;
}

p > span {
    display: block;
}

h3 {
    margin: 16px 0;
}

.app {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 12px;
    padding: max(12px, env(safe-area-inset-top)) 6px max(12px, env(safe-area-inset-bottom));
    min-height: 100vh;
    min-height: 100dvh;
    /* Жесты в игре (свайпы плиток) не должны скроллить/обновлять страницу */
    touch-action: none;
    transition: all 0.1s ease-in;
}

.app-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 12px;
    overflow: visible;
}

.timer {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #e0e0e0;
    overflow: hidden;
}

.timer_filler {
    display: block;
    width: 100%;
    height: 100%;
    background: #00c800;
    border-radius: 4px;
    transition: width 0.3s linear, background 0.3s linear;
}

.header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 12px;
    width: 100%;
    overflow: visible;
}

.score-counter-container, .new-game-button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.score-counter-container { min-width: 120px; }
.score-counter {
    font-size: 30px;
    font-weight: bold;
    color: var(--color-primary);
    line-height: 1;
}
.best-score {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: bold;
    color: var(--color-text);
}
.best-score svg { width: 26px; height: 26px; fill: #ff8f00; }

.score-counter__bounce {
    transform: scale(1.5);
    color: rgb(0, 119, 237);
}

.pulse {
    border-radius: 6px;
    animation-name: pulse-animation;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    z-index: 1;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        opacity: 1;
        transform: scale(1, 1);
    }
    50% {
        box-shadow: rgba(0, 0, 0, 0.2) 0 10px 16px 0, rgba(0, 119, 237, 0.1) 0 6px 20px 0;
        opacity: 1;
        transform: scale(1.02, 1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        opacity: 1;
        transform: scale(1, 1);
    }
}

.boosters {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    overflow: visible;
}

.button {
    position: relative;
    background-color: #ffffff;
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    overflow: visible;
    transition: background-color 0.2s, transform 0.12s;
    z-index: 1;
    font-weight: bold;
}
.button:hover { background-color: #f0f8ff; }
.button:active { background-color: #e6f0ff; transform: scale(0.98); }

.button:disabled {
    border: 2px solid rgb(204, 204, 204);
    cursor: default;
    background-color: #ffffff;
    color: #8a8fa3;
}

.button:disabled > svg {
    fill: rgb(204, 204, 204);
}

#new-game-button:hover { transform: scale(1.05); }

#booster-blow-color .button-badge,
#booster-show-move .button-badge,
#booster-blow-nearby .button-badge,
#booster-any-color .button-badge {
    display: none;
    content: unset;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    color: white;
    min-width: 2em;
    min-height: 2em;
    font-size: small;
    position: absolute;
    right: -0.75em;
    top: -0.75em;
    background-color: rgb(0, 119, 237);
    border-radius: 50%;
    border: 2px solid white;
}

#booster-blow-color .button-badge {
    content: var(--blow-color-badge-counter);
    display: var(--blow-color-badge-display);
}

#booster-show-move .button-badge {
    content: var(--moves-badge-counter);
    display: var(--moves-badge-display);
}

#booster-blow-nearby .button-badge {
    content: var(--blow-nearby-badge-counter);
    display: var(--blow-nearby-badge-display);
}

#booster-any-color .button-badge {
    content: var(--any-color-badge-counter);
    display: var(--any-color-badge-display);
}

#booster-blow-color:before, #booster-blow-nearby:before, #booster-any-color:before {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 119, 237, .1);
    z-index: -1;
    transition: height 0.3s;
}

#booster-blow-color:before {
    height: var(--blow-color-bg-height);
}

#booster-blow-nearby:before {
    height: var(--blow-nearby-bg-height);
}

#booster-any-color:before {
    height: var(--any-color-bg-height);
}

#booster-show-move[disabled=disabled]:before {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 119, 237, .1);
    z-index: -1;
    animation-name: height-rise;
    animation-duration: 5s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    transition: height 0.3s;
}

@keyframes height-rise {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

.game-field {
    border: 6px solid #ffffff;
    border-radius: 18px;
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    /* overflow убран намеренно: эффекты (частицы, комбо, «магия» бонусов)
       не должны обрезаться рамкой поля. Фон-градиент сам обрезается
       border-radius, поэтому квадрат канваса не мешает скруглению. */
    overflow: visible;
    /* Светлый «пол» в мультяшном стиле: за сквозными «дырками» виден он */
    background: radial-gradient(circle at 32% 24%, #fff6fb 0%, #ffe6f0 52%, #fde9d6 100%);
    box-shadow: 0 10px 30px rgba(120, 70, 180, 0.25);
}

/* 20-й уровень — «кривое» (не прямоугольное) поле: срезанные углы,
   как часто делают в три в ряд. clip-path не влияет на координаты тапа. */
canvas {
    width: 100%;
    height: 100%;
    z-index: 1;
    touch-action: none;
    -webkit-touch-callout: none;
    /* Кристаллы всегда кликабельны — никакой оверлей не должен перехватывать тап */
    pointer-events: auto !important;
}

/* Все слои ПОВЕРХ поля (подсказки, комбо, заморозка, частицы) не должны
   перехватывать клики по кристалам — иначе тап «проваливается» мимо canvas. */
.game-field-overlay,
.combo-indicator,
.game-field--frozen::after,
.magic-particle {
    pointer-events: none !important;
}

.game-field-overlay {
    position: absolute;
    display: flex;
    gap: 12px;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    z-index: 2;
    padding: 12px;
    pointer-events: none;
}

.game-field-overlay span {
    fill: white;
    color: white;
    text-shadow: 1px 1px 3px #000;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.times-up, .no-moves {
    display: none;
}

.overlay-times-up > .times-up {
    display: block;
}
.overlay-no-moves > .no-moves {
    display: block;
}

/* ===================================================================
   ОКНО ОБУЧЕНИЯ (показывается новому игроку один раз)
   Плашка лежит внутри игрового поля поверх канваса, но саму плашку
   клики проходят насквозь (pointer-events: none) — иначе тап по
   кристаллам «под» подсказкой проваливался бы мимо поля.
   Перехватывают только кнопки.
   =================================================================== */
.tutor {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 14px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    background: rgba(22, 14, 44, 0.93);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: left;
    pointer-events: none;
    animation: tutor-pop 0.28s ease-out;
}
.tutor[hidden] { display: none; }

@keyframes tutor-pop {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tutor__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tutor__badge {
    flex: none;
    font: 600 12px/1 'Fredoka', 'Comfortaa', Arial, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    color: #241a05;
    background: #ffd54a;
}

.tutor__skip {
    pointer-events: auto;
    font: 500 12px/1 'Fredoka', 'Comfortaa', Arial, sans-serif;
    color: rgba(255, 255, 255, 0.72);
    background: none;
    border: 0;
    padding: 6px 4px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tutor__skip:hover { color: #fff; }

.tutor__text {
    margin: 0;
    font: 400 15px/1.45 'Fredoka', 'Comfortaa', Arial, sans-serif;
    color: #fff;
}

.tutor__next {
    pointer-events: auto;
    align-self: flex-end;
    font: 600 15px/1 'Fredoka', 'Comfortaa', Arial, sans-serif;
    color: #241a05;
    background: #ffd54a;
    border: 0;
    border-radius: 999px;
    padding: 10px 22px;
    cursor: pointer;
    box-shadow: 0 4px 0 #c79f16;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.tutor__next:hover  { transform: translateY(-1px); }
.tutor__next:active { transform: translateY(3px); box-shadow: 0 1px 0 #c79f16; }
.tutor__next[hidden] { display: none; }

/* Подсветка элемента, на который сейчас нужно смотреть */
.tutor-focus {
    position: relative;
    z-index: 40;
    border-radius: 12px;
    animation: tutor-focus-pulse 1.5s ease-in-out infinite;
}
@keyframes tutor-focus-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 213, 74, 0.7), 0 0 16px rgba(255, 213, 74, 0.3); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 213, 74, 0.15), 0 0 26px rgba(255, 213, 74, 0.5); }
}

/* Поле в режиме обучения: лёгкое затемнение, чтобы плашка читалась */
.game-field--tutor::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(8, 5, 22, 0.22);
    pointer-events: none;
}

@media (max-width: 560px) {
    .tutor { left: 8px; right: 8px; bottom: 8px; padding: 10px 12px 12px; gap: 8px; }
    .tutor__text { font-size: 13px; }
    .tutor__next { font-size: 14px; padding: 9px 18px; }
}


.controllers {
    width: 100%;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 12px;
    overflow: visible;
}

.controllers-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    border: 2px solid rgb(0, 119, 237);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 119, 237);
    cursor: pointer;
    transition: all 0.5s;
    position: relative;
    overflow: visible;
}

.controllers-item__enabled {
    background-color: rgb(0, 119, 237);
    color: rgb(255, 255, 255);
    cursor: pointer;
}


.controllers-item[data-role="checkbox"] {
    border: 2px solid #ccc;
}

.controllers-item__enabled.controllers-item[data-role="checkbox"] {
    border: 2px solid rgb(0, 119, 237);
}

.controllers-item[data-role="checkbox"]::before {
    content: '';
    position: absolute;
    left: 0.5em;
    display: block;
    width: 1em;
    height: 1em;
    background-color: white;
    border: 2px solid rgb(0, 119, 237);
    border-radius: 3px;
    transition: all 0.25s ease-in-out;
}

.controllers-item__enabled.controllers-item[data-role="checkbox"]::before {
    content: '✅';
}

#show-move-button.controllers-item:after {
    display: var(--moves-badge-display);
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    color: white;
    min-width: 1.5em;
    min-height: 1.5em;
    font-size: small;
    content: var(--moves-badge-counter);
    position: absolute;
    right: -0.5em;
    top: -0.75em;
    background-color: rgb(0, 119, 237);
    border-radius: 50%;
    border: 2px solid white;
}


@media (orientation: landscape) {
    body, html {
        overflow: hidden;
    }
}

@media (orientation: portrait) {
    body, html {
        overflow: hidden;
    }
}

.header > *, .timer > *, .boosters > *, .controllers > * {
    pointer-events: none;
}

/* The Modal - https://www.w3schools.com/howto/howto_css_modals.asp */
.faq-modal {
    display: none;
    align-content: center;
    justify-content: center;
    align-items: center;
    position: fixed; /* Stay in place */
    z-index: 220; /* Sit on top of #main-menu (200) and .modal (210) */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Контейнер не скроллится — скролл только внутри контента */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.faq-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: small;
    background-color: #fefefe;
    padding: 16px;
    border: 1px solid #888;
    width: 90%;
    max-width: 480px;
    max-height: 92dvh; /* Подстраивается под высоту, без фикс. 90% и сдвига */
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.5) 0 2px 12px 0;
    border-radius: 6px;
    animation: faq-pop .26s ease;
}
@keyframes faq-pop {
    from { transform: translateY(14px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.faq-modal-close-button {
    color: #aaa;
    float: right;
    font-size: 24px;
    font-weight: bold;
}

.faq-modal-close-button:hover > svg,
.faq-modal-close-button:focus > svg {
    fill: black;
    cursor: pointer;
}

.faq-legal {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 11.5px;
    line-height: 1.5;
    opacity: 0.75;
}
.faq-legal a { color: inherit; font-weight: 700; }

.faq-header {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 6px;
}

.faq-content {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(92dvh - 76px); /* Только если текст реально не влезает */
    overflow-y: auto; /* Скроллбар появляется ТОЛЬКО при необходимости */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
    -webkit-overflow-scrolling: touch;
}
.faq-content::-webkit-scrollbar { width: 8px; }
.faq-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.22); border-radius: 8px; }

/* Snackbar (toast) - https://www.w3schools.com/howto/howto_js_snackbar.asp*/
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    width: 90%; /* Set a default minimum width */
    max-width: 450px;
    background-color: rgb(66, 66, 67); /* Black background color */
    color: #fff;
    font-size: smaller;
    font-weight: normal;
    text-align: left; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 12px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 100; /* Add a z-index if needed */
    bottom: 16px; /* 30px from the bottom */
    box-shadow: rgba(0, 0, 0, 0.5) 0 2px 12px 0;
}

#snackbar.snackbar-show {
    visibility: visible;
    animation: snackbar-fadein 0.5s, snackbar-fadeout 0.5s 2.5s;
}

@-webkit-keyframes snackbar-fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 16px;
        opacity: 1;
    }
}

@keyframes snackbar-fadeout {
    from {
        bottom: 16px;
        opacity: 1;

    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

.footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;

    width: 100%;
    overflow: visible;
    margin-top: 24px;
    font-size: 13px;
    font-weight: 700;
}

.footer > div {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    color: rgb(0, 119, 237);
    cursor: pointer;
}

.footer > div > svg {
    display: block;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    fill: var(--text);
}
.footer > div > span {
    color: var(--text);
}

.footer > div:hover > svg, .footer > div:hover > span {
    fill: rgba(66, 66, 67, 1);
    color: rgba(66, 66, 67, 1);
}



/* Языки: прячем все варианты, показываем нужный через data-lang на <body> */
/* Важно: сам <body> тоже несёт data-lang — исключаем его, иначе спрячется вся страница. */
/* ВАЖНО: опции выпадающего меню языка (.lang-select__option) тоже несут data-lang
   (устанавливается в buildLangMenus), но они должны быть видны ВСЕГДА, независимо
   от выбранного языка — поэтому исключаем их из этих правил. */
[data-lang="ru"]:not(body):not(.lang-select__option),
[data-lang="en"]:not(body):not(.lang-select__option),
[data-lang="de"]:not(body):not(.lang-select__option),
[data-lang="fr"]:not(body):not(.lang-select__option),
[data-lang="es"]:not(body):not(.lang-select__option) {
    display: none;
}
body[data-lang] [data-lang]:not(.lang-select__option) { display: none; }
body[data-lang="ru"] [data-lang="ru"]:not(.lang-select__option),
body[data-lang="en"] [data-lang="en"]:not(.lang-select__option),
body[data-lang="de"] [data-lang="de"]:not(.lang-select__option),
body[data-lang="fr"] [data-lang="fr"]:not(.lang-select__option),
body[data-lang="es"] [data-lang="es"]:not(.lang-select__option) {
    display: revert;
}

/* ===== Bonus panel (new system) ===== */
.bonuses {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.bonuses__slots {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
}
.bonus-slot {
    width: 84px;
    height: 84px;
    border: 2px solid #cccccc;
    border-radius: 8px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: default;
    user-select: none;
    overflow: visible;
    position: relative;
    transition: transform 0.15s;
}
.bonus-slot--filled {
    cursor: pointer;
    border-color: var(--bonus-color, #0077ed);
    background-color: #fff;
}
.bonus-slot--filled:active {
    transform: scale(0.94);
}
.bonus-slot--removing {
    animation: bonus-disappear 0.18s ease-in forwards;
}
.bonus-slot--targeting {
    box-shadow: 0 0 0 3px var(--bonus-color, #0077ed);
}
.bonus-slot__icon {
    font-size: 30px;
    line-height: 1;
}
.bonus-slot__img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 8px;
}
.bonus-slot__label {
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: #2b2b3a;
    padding: 0 2px;
    line-height: 1.1;
}
/* Пустой слот — приглушённый, но с иконкой, чтобы было понятно, какой бонус в нём */
.bonus-slot--empty {
    opacity: 0.5;
    filter: grayscale(0.6);
}
/* Счётчик стака бонуса (xN) — в левом нижнем углу слота, лишь слегка заходит на иконку */
.bonus-slot__count {
    position: absolute;
    right: 3px;
    bottom: 3px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bonus-color, #0077ed);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    z-index: 3;
    pointer-events: none;
}
@keyframes bonus-appear {
    from { transform: scale(0.2); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@keyframes bonus-disappear {
    from { transform: scale(1); opacity: 1; }
    to   { transform: scale(0.2); opacity: 0; }
}
.game-field--targeting {
    outline: 3px solid #0077ed;
    outline-offset: 2px;
}

/* Аудио-контролы: кнопка mute + ползунок громкости */
.audio-controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
}
.audio-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    border-radius: 6px;
}
.audio-button .audio-icon {
    pointer-events: none;
}
.volume-slider {
    width: 110px;
    max-width: 32vw;
    accent-color: #0077ed;
    cursor: pointer;
    height: 8px;
}


/* ===== Level HUD (режим / цель / ресурс) ===== */
.level-hud {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #f5f7fa;
    border-radius: 8px;
    padding: 8px 14px;
}
.level-hud__info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 8px;
    font-size: 14px;
    font-weight: 700;
    color: #2b2b3a;
}
.level-hud__item {
    padding: 2px 8px;
    color: #1f3a8a;
}
.level-hud__resource {
    color: #ff8c00;
}
.level-hud__buttons { display: flex; gap: 8px; }
.level-hud__btn { font-size: 13px; padding: 6px 14px; border-radius: 6px; }

/* ===== Главное меню (выбор уровня) ===== */
.main-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden; /* Без скролла вверх/вниз в главном меню */
}
.main-menu--open { display: flex; }
.main-menu__panel {
    width: 100%;
    max-width: 520px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(100dvh - 32px); /* С учётом padding меню — точно влезает */
    overflow: hidden;
}
/* Если контент не влезает на низких экранах — скролл только внутри активной вкладки,
   и без видимого скроллбара (визуально скролла «нет»). */
.menu-tab { min-height: 0; }
.menu-tab--active {
    display: flex;
    flex-direction: column;
    animation: fade-in 0.25s ease;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}
.menu-tab--active::-webkit-scrollbar { width: 0; height: 0; display: none; }
.main-menu__title {
    margin: 0;
    text-align: center;
    font-size: 28px;
    letter-spacing: 0.04em;
    color: #0077ed;
}
.main-menu__subtitle {
    margin: 0;
    text-align: center;
    color: #5f6368;
    font-weight: 700;
}
.level-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(106, 92, 255, 0.16), rgba(255, 95, 162, 0.18));
    border: 2px solid rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.12);
}
.level-btn {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 3px solid hsl(var(--lvl-hue, 210) 90% 62%);
    border-radius: 24px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.92), rgba(255,255,255,0) 60%),
        linear-gradient(160deg, hsl(var(--lvl-hue, 210) 95% 74%), hsl(var(--lvl-hue, 210) 88% 56%));
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
    box-shadow: 0 8px 16px hsla(var(--lvl-hue, 210) 85% 45% / 0.35), inset 0 3px 0 rgba(255,255,255,0.65);
    transition: transform 0.14s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.16s ease, filter 0.16s ease;
    padding: 0;
}
.level-btn__shine {
    position: absolute;
    top: -40%;
    left: -40%;
    width: 60%;
    height: 120%;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(18deg);
    animation: level-shine 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes level-shine {
    0%, 55% { left: -50%; }
    100% { left: 130%; }
}
.level-btn__num {
    font-family: 'Fredoka', 'Comfortaa', inherit;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 0 hsla(var(--lvl-hue, 210) 70% 28% / 0.6), 0 3px 6px rgba(0, 0, 0, 0.25);
    z-index: 1;
}
.level-btn__stars {
    display: flex;
    gap: 1px;
    margin-top: 3px;
    z-index: 1;
}
.level-btn__star {
    font-size: 13px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.30);
    text-shadow: none;
}
.level-btn__star.is-filled {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.level-btn__lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
}
.level-btn--locked .level-btn__num { opacity: 0.35; }
.level-btn__badge {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 15px;
    line-height: 1;
    color: #ffd400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    z-index: 2;
}
.level-btn__play {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    color: #fff;
    background: #ff3b6b;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 2;
}
/* Цвет плашки режима */
.level-btn.mode-time  { --mode-c: #e8730f; }
.level-btn.mode-moves { --mode-c: #2f5fc0; }
.level-btn.mode-score { --mode-c: #1e8e4f; }
/* Пройден */
.level-btn--completed {
    border-color: #2ecc71;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.9), rgba(255,255,255,0) 60%),
        linear-gradient(160deg, #6bf0a0, #25b86a);
}
.level-btn--completed .level-btn__num { color: #fff; text-shadow: 0 2px 0 #1c8a4d, 0 3px 6px rgba(0, 0, 0, 0.25); }
.level-btn--completed .level-btn__badge { color: #ffd400; }
/* Текущий (пульс; фон/рамка задаются темой) */
.level-btn--current {
    border-color: #ffd54a;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.92), rgba(255,255,255,0) 60%),
        linear-gradient(160deg, #ffe27a, #ffb02e);
    animation: level-pulse 1.5s ease-in-out infinite;
}
.level-btn--current .level-btn__num { color: #fff; text-shadow: 0 2px 0 #b9720a, 0 3px 6px rgba(0, 0, 0, 0.25); }
.level-btn--current .level-btn__mode { color: #a85b00; }
/* Заблокирован */
.level-btn--locked {
    border-color: #d9d9de;
    background: linear-gradient(160deg, #f3f3f6, #e2e2e8);
    color: #b0b0b6;
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: 0.75;
}
.level-btn--locked .level-btn__num { color: #b0b0b6; text-shadow: none; }
.level-btn--locked .level-btn__emoji { opacity: 0.5; }
.level-btn--locked .level-btn__mode { display: none; }
.level-btn--locked .level-btn__badge { color: #b0b0b6; }

.level-btn:not(.level-btn--locked):hover {
    transform: translateY(-4px) scale(1.05) rotate(-1.5deg);
    box-shadow: 0 14px 26px hsla(var(--lvl-hue, 210) 85% 45% / 0.4);
}
.level-btn:not(.level-btn--locked):active { transform: translateY(0) scale(0.95) rotate(0); }

@keyframes level-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,0.5), 0 10px 20px rgba(0,0,0,0.18); }
    50% { box-shadow: 0 0 0 8px rgba(255,213,74,0.4), 0 10px 20px rgba(0,0,0,0.18); }
}
.main-menu__footer { display: flex; justify-content: center; margin-top: 4px; }

/* ===== Модальные окна (настройки / победа / провал) ===== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 210;
    background-color: rgba(0, 0, 0, 0.6); /* Темнее — кнопки не «сливаются» с фоном */
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal--open { display: flex; }
.modal__content {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 92vh;
    max-height: 92dvh;
}
.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}
.modal__header h2 { margin: 0; font-size: 18px; color: #0077ed; }
.modal__close {
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: #888;
    padding: 0 4px;
}
.modal__close:hover { color: #000; }
.modal__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
}
.settings-row .button { min-width: 90px; }
.modal__actions { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.modal__actions .button { flex: 1; }
.button--primary { background: #0077ed; color: #fff; border-color: #0077ed; }
.button--primary:hover { background: #0061c4; }
.button--primary:active { background: #0050a8; }
.button--danger { color: #d93025; border-color: #d93025; }
.button--danger:hover { background: #fdecea; }
#level-complete-text, #fail-text { margin: 0; text-align: center; font-weight: 700; color: #424243; }

/* ===== ЭФФЕКТЫ: переходы между экранами (fade in/out) ===== */
.main-menu {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.main-menu--open {
    opacity: 1;
    visibility: visible;
}
.modal {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal--open {
    opacity: 1;
    visibility: visible;
}

/* ===== ЭФФЕКТЫ: пульсация иконок бонусов + значок NEW! ===== */
.bonus-slot--filled {
    animation: bonus-pulse 1.6s ease-in-out infinite;
}
@keyframes bonus-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.82; }
}
.bonus-slot--filled:hover {
    box-shadow: 0 0 14px var(--bonus-color, #0077ed);
}
.bonus-slot--new {
    animation: bonus-new-flash 0.6s ease-out 2, bonus-pulse 1.6s ease-in-out infinite;
}
.bonus-slot--new::after {
    content: 'NEW!';
    position: absolute;
    top: -8px;
    right: -6px;
    background: #ff3b30;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(255, 59, 48, 0.8);
    z-index: 3;
    animation: bonus-new-badge 1.4s ease-out forwards;
}
@keyframes bonus-new-flash {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.9); }
    100% { box-shadow: 0 0 0 16px rgba(255, 59, 48, 0); }
}
@keyframes bonus-new-badge {
    0% { opacity: 0; transform: scale(0.4); }
    20% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

/* ===== ЭФФЕКТЫ: таймер мигает красным в последние 5 секунд ===== */
.timer--danger .timer_filler {
    animation: timer-danger-blink 0.5s steps(1, end) infinite;
}
@keyframes timer-danger-blink {
    0%, 100% { background: #e00 !important; }
    50% { background: #ff9a9a !important; }
}
/* Time/moves spent but level keeps going (1-star path): striped gold bar */
.timer--exhausted .timer_filler {
    background: repeating-linear-gradient(45deg, #ffb300, #ffb300 10px, #ffd54f 10px, #ffd54f 20px) !important;
    animation: none !important;
}

/* ===== ЭФФЕКТЫ: заморозка поля (бонус Frigo) ===== */
.game-field--frozen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 150, 255, 0.05), rgba(0, 120, 255, 0.35));
    pointer-events: none;
    z-index: 3;
    animation: freeze-in 0.3s ease-out;
}
@keyframes freeze-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== ЭФФЕКТЫ: ховеры кнопок ===== */
.button:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 119, 237, 0.25);
}
.level-btn:not(.level-btn--locked):hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

/* ===== Главное меню как отдельный экран (не поверх игры) ===== */
/* Когда открыто меню — прячем весь игровой интерфейс. */
body.screen-menu .play-area {
    display: none !important;
}

/* Меню — отдельный экран; поверх него полупрозрачный слой, сквозь который виден фон-фото */
.main-menu {
    background: rgba(8, 12, 32, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ===== Пагинация уровней в меню ===== */
.menu-pagination {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.menu-pagination .button {
    min-width: 96px;
    font-size: 15px;
    font-weight: 800;
}
.menu-pagination .button:disabled {
    opacity: 1;
    cursor: default;
    color: var(--text);
    background: var(--panel-soft);
    box-shadow: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.menu-pagination__info {
    font-weight: 700;
    color: #2b2b3a;
    min-width: 56px;
    text-align: center;
}

/* ===== Пауза: вертикальные кнопки в модалке ===== */
.modal__actions--column {
    flex-direction: column;
    gap: 12px;
}
#pause-button {
    font-size: 16px;
    line-height: 1;
    min-width: 44px;
}
/* Пауза: свои яркие градиенты для Рестарт/Меню, чтобы не сливались с фоном
   и отличались друг от друга и от «Продолжить» (синяя). */
#pause-restart-button {
    background: linear-gradient(135deg, #ff8a3d, #ff4d6d);
    border: 2px solid rgba(255, 255, 255, 0.85);
}
#pause-menu-button {
    background: linear-gradient(135deg, #8a5cff, #4b3fd6);
    border: 2px solid rgba(255, 255, 255, 0.85);
}
#pause-restart-button:hover,
#pause-menu-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

/* ============================================================
   NEW DESIGN: themes, tabbed menu, endless card, in-game polish
   ============================================================ */

:root {
    --bg-grad-1: #eef2ff;
    --bg-grad-2: #ffe9f6;
    --accent: #6a5cff;
    --accent-2: #ff5fa2;
    --accent-dark: #4b3fd6;
    --panel: #ffffff;
    --panel-soft: #f1ecff;
    --field-frame: linear-gradient(135deg, #6a5cff, #ff5fa2);
    --field-shadow: rgba(106, 92, 255, 0.35);
    --text: #2f2b45;
    --muted: #6b6685;
    --chip: #efeaff;
    --danger: #ff3b6b;
    --good: #22c98a;
}

/* --- Page background: the game background photo (фон фото.jpg) with a subtle vignette so it always shows --- */
body {
    background:
        radial-gradient(1200px 800px at 50% -10%, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.42)) fixed,
        url('images/background.jpg') center / cover no-repeat fixed;
    color: var(--text);
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(45% 45% at 18% 12%, rgba(106, 92, 255, 0.55), transparent 60%),
        radial-gradient(45% 45% at 84% 18%, rgba(255, 95, 162, 0.50), transparent 60%),
        radial-gradient(55% 55% at 50% 100%, rgba(34, 201, 138, 0.45), transparent 60%);
    background-size: 180% 180%, 180% 180%, 180% 180%;
    mix-blend-mode: soft-light;
    animation: bg-pan 20s ease-in-out infinite;
}
@keyframes bg-pan {
    0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%; }
    50% { background-position: 100% 50%, 0% 50%, 50% 0%; }
}

/* --- Header as a glassy card --- */
.header {
    background: var(--panel);
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    gap: 12px 16px;
}
.score-counter {
    font-size: 30px;
    font-weight: 800;
    color: var(--accent);
    background: var(--chip);
    padding: 2px 14px;
    border-radius: 999px;
    text-shadow: 0 0 10px var(--field-shadow);
}
.best-score {
    background: var(--chip);
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--text);
}
.best-score svg { fill: gold; }
.audio-button {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
    color: #fff;
}

/* --- Level HUD as a gradient card --- */
.level-hud {
    background: linear-gradient(135deg, var(--panel), var(--panel-soft));
    border: 1px solid rgba(128, 128, 128, 0.12);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.level-hud__item { color: var(--accent-dark); }
.level-hud__resource { color: var(--danger); }

/* --- Game field: vivid themed frame --- */
.game-field {
    padding: 8px;
    border: none;
    border-radius: 22px;
    background: var(--field-frame);
    box-shadow: 0 14px 36px var(--field-shadow);
}
canvas { border-radius: 16px; }

/* --- Timer bar --- */
.timer {
    height: 12px;
    border-radius: 999px;
    background: var(--panel-soft);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}
.timer_filler {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--good));
}

/* --- Buttons: gradient --- */
.button {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px var(--field-shadow);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.4);
}
.button:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    filter: brightness(1.06);
    transform: translateY(-1px);
}
.button:active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    transform: translateY(1px) scale(0.98);
}
.button:disabled {
    background: var(--panel-soft);
    color: var(--muted);
    box-shadow: none;
    text-shadow: none;
}
.button--primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.button--danger { background: linear-gradient(135deg, #ff5b5b, #d93025); }
.button--big { font-size: 18px; padding: 12px 22px; }

/* --- Bonus slots --- */
.bonus-slot {
    border: 2px solid rgba(128, 128, 128, 0.18);
    border-radius: 14px;
    background: var(--panel);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}
.bonus-slot--filled { border-color: var(--accent); }

/* --- Shop tab --- */
.shop-currency {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}
.shop-currency .currency-pill { font-size: 15px; padding: 5px 13px; }
.shop-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
}
.shop-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--panel);
    border: 2px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    opacity: 0.75;
}
.shop-card--can { opacity: 1; border-color: var(--accent); }
.shop-card__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--panel-soft, #f4f1ff);
    font-size: 24px;
}
.shop-card__icon svg { width: 32px; height: 32px; }
.shop-card__icon img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.shop-card__info { flex: 1 1 auto; min-width: 0; }
.shop-card__name { font-weight: 900; font-size: 15px; color: var(--text); }
.shop-card__owned { font-size: 12px; font-weight: 800; color: var(--accent); margin-top: 2px; }
.shop-card__desc {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shop-card__buy {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.2;
}
.shop-card__buy:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.shop-card__price { font-weight: 900; font-size: 14px; white-space: nowrap; }

/* --- Language dropdown --- */
.lang-select { position: relative; }
.lang-select__trigger {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--panel); color: var(--text);
    border: 2px solid var(--accent); border-radius: 999px;
    padding: 6px 12px; cursor: pointer; font-family: inherit;
    font-weight: 800; font-size: 14px; line-height: 1;
    box-shadow: 0 3px 10px rgba(0,0,0,.10);
    transition: transform .12s, box-shadow .12s, filter .12s;
}
.lang-select__trigger:hover { transform: translateY(-1px); filter: brightness(1.05); }
.lang-select__trigger:active { transform: scale(.97); }
.lang-select__flag { width: 22px; height: 15px; border-radius: 3px; overflow: hidden; display: inline-block; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.lang-select__flag svg { display: block; width: 100%; height: 100%; }
.lang-select__name { white-space: nowrap; }
.lang-select__chevron { width: 16px; height: 16px; fill: var(--muted); transition: transform .2s; }
.lang-select--open .lang-select__chevron { transform: rotate(180deg); }
.lang-select__menu {
    position: absolute; z-index: 60; min-width: 184px;
    left: 0; bottom: calc(100% + 8px);
    background: var(--panel); border-radius: 14px; padding: 6px;
    box-shadow: 0 12px 30px rgba(0,0,0,.25); border: 1px solid rgba(128,128,128,.15);
    display: none; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto;
}
.lang-select--open .lang-select__menu { display: flex; animation: fade-in .15s ease; }
.lang-select__option {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: transparent; border: none; border-radius: 10px;
    padding: 8px 10px; cursor: pointer; font-family: inherit;
    font-weight: 700; font-size: 14px; color: var(--text); text-align: left;
}
.lang-select__option:hover { background: var(--panel-soft); }
.lang-select__option.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.lang-select__option.is-active .lang-select__flag { box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
/* Settings row: open the menu downward */
.settings-row .lang-select__menu { left: auto; right: 0; bottom: auto; top: calc(100% + 8px); }

/* --- Footer --- */
.footer > div { color: var(--text); font-weight: 700; }
.footer > div > svg { fill: var(--text); }
.footer > div > span { color: var(--text); }
.footer > div:hover > svg, .footer > div:hover > span { fill: var(--accent); color: var(--accent); }

/* --- Modal headers follow the theme --- */
.modal__header h2 { color: var(--accent); }

/* ============================================================
   MAIN MENU: tabbed, glassy, animated
   ============================================================ */
.main-menu {
    background: radial-gradient(1000px 700px at 50% 0%, rgba(255, 255, 255, 0.10), rgba(8, 12, 32, 0.55));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.main-menu__panel {
    max-width: 560px;
    background: var(--panel);
    border-radius: 26px;
    padding: 26px 22px 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.55);
    gap: 16px;
}
.main-menu__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.main-menu__logo {
    font-size: 46px;
    line-height: 1;
    filter: drop-shadow(0 6px 10px var(--field-shadow));
    animation: logo-float 3s ease-in-out infinite;
}
.main-menu__title {
    margin: 0;
    text-align: center;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 0.04em;
    background: var(--field-frame);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.main-menu__subtitle {
    margin: 0;
    text-align: center;
    color: var(--muted);
    font-weight: 700;
}

/* Segmented tabs */
.menu-tabs {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: var(--panel-soft);
    border-radius: 16px;    
}
.menu-tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: rgba(80, 34, 34, 0.85) !important;
    font-weight: 800;
    font-size: 16px;
    padding: 10px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.menu-tab-btn:hover { color: var(--accent); }
.menu-tab-btn--active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #582a2a;
    box-shadow: 0 4px 12px var(--field-shadow);
}
.menu-tab-btn { position: relative; }
.tab-badge {
    position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px;
    padding: 0 5px; border-radius: 999px; background: linear-gradient(135deg, #ff3b30, #ff7a18);
    color: #fff; font-size: 12px; font-weight: 900; line-height: 20px; text-align: center;
    box-shadow: 0 3px 8px rgba(255, 59, 48, 0.5); border: 2px solid #fff; pointer-events: none;
}
.tab-badge[hidden] { display: none; }
.tab-badge--pulse { animation: tab-badge-pulse 1s ease-in-out infinite; }
@keyframes tab-badge-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 3px 8px rgba(255, 59, 48, 0.5); }
    50%      { transform: scale(1.18); box-shadow: 0 0 14px 3px rgba(255, 59, 48, 0.85); }
}

/* Tab panels */
.menu-tab { display: none; flex-direction: column; gap: 14px; }
.menu-tab--active { display: flex; animation: fade-in 0.25s ease; }

/* Endless card */
.endless-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px 18px;
    background: linear-gradient(160deg, var(--panel), var(--panel-soft));
    border-radius: 18px;
    text-align: center;
}
.endless-card__icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 900;
    color: #fff;
    background: var(--field-frame);
    box-shadow: 0 8px 22px var(--field-shadow);
    animation: logo-float 3s ease-in-out infinite;
}
.endless-card__desc { color: var(--text); font-weight: 600; margin: 0; }
.endless-card__best { font-size: 15px; font-weight: 700; color: var(--muted); }
.endless-card__best b { color: var(--accent); font-size: 20px; margin-left: 6px; }

/* Settings list */
.settings-list { display: flex; flex-direction: column; gap: 10px; }
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--panel-soft);
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}
.settings-row--slider { flex-direction: column; align-items: stretch; gap: 6px; }
.settings-row .volume-slider { width: 100%; }

/* Звук в настройках — один объединённый блок: иконка-тоггл + ползунок (без дубляжа) */
.settings-row--sound { gap: 12px; }
.settings-row__label { font-weight: 700; color: var(--text); }
.settings-sound-control {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
}
.settings-sound-toggle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px var(--field-shadow);
    transition: transform 0.12s ease, filter 0.15s ease;
}
.settings-sound-toggle:active { transform: scale(0.9); }
.settings-row--sound .volume-slider { flex: 1; max-width: 170px; }
.select {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 12px;
    cursor: pointer;
}

/* Theme the level grid current state */
.level-btn--current {
    border-color: var(--accent);
    background: linear-gradient(160deg, #ffffff, var(--chip));
    color: var(--accent);
}

/* Animations */
@keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ===== Mobile: very small screens ===== */
@media (max-width: 400px) {
    .app { gap: 8px; }
    .header { gap: 8px 10px; padding: 8px 10px; }
    .score-counter { font-size: 26px; }
    .bonus-slot { width: 72px; height: 72px; }
    .bonus-slot__icon { font-size: 26px; }
    .level-hud { padding: 6px 10px; gap: 6px; }
    .level-hud__info { font-size: 13px; }
}

/* ===== CARTOONISH POLISH ===== */
.button { border-radius: 14px; }
.button:hover { transform: translateY(-2px) scale(1.05) rotate(-1deg); }
.button:active { transform: translateY(1px) scale(0.95); }
.main-menu__title { animation: title-bounce 3.2s ease-in-out infinite; }
@keyframes title-bounce {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-5px) rotate(1deg); }
}
.level-hud__item {
    background: var(--chip);
    border-radius: 999px;
    padding: 3px 11px;
}
.level-hud__resource {
    background: rgba(255, 59, 107, 0.14);
}

/* Level detail popup */
.level-detail__stars {
    display: flex;
    gap: 6px;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
}
.level-detail__star { color: #d9d9e3; text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.level-detail__star.is-filled { color: #ffd13b; text-shadow: 0 1px 2px rgba(255,160,0,.5); }
.level-detail__summary {
    text-align: center;
    margin: 0;
    font-weight: 600;
    color: #444;
}
.level-detail__goal {
    text-align: center;
    margin: 0;
    font-weight: 700;
    color: var(--accent);
    font-size: 16px;
}
.level-detail__reqs {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.level-detail__req {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #f4f5fb;
}
.level-detail__req.is-met { background: #eafbe9; }
.level-detail__req-star { color: #ffd13b; font-size: 18px; flex: 0 0 auto; }
.level-detail__req-text { color: #333; font-size: 14px; }

/* =====================================================================
   CARTOON / CANDY THEME + JUICE  (appended)
   ===================================================================== */

/* Make sure scaled/hovered elements are never clipped by their containers */
.level-grid { overflow: visible; padding: 4px; }

/* Modals stay scrollable on short screens but never clip buttons */
.modal--open { overflow-y: auto; overflow-x: hidden; padding: 18px; }
.modal__content { overflow: visible; margin: auto; max-height: none; border-radius: 22px;
    box-shadow: 0 22px 55px rgba(31, 40, 80, 0.40); }
.modal--open .modal__content { animation: pop-in 0.28s cubic-bezier(.34, 1.56, .64, 1); }
.modal__header {
    border-radius: 22px 22px 0 0;
    background: linear-gradient(135deg, var(--candy-blue), var(--candy-purple));
    padding: 16px 18px;
    border-bottom: none;
}
.modal__header h2 { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); font-weight: 800; letter-spacing: 0.02em; }
.modal__close {
    width: 34px; height: 34px; border-radius: 50%;
    background: #ffffff; color: var(--candy-purple, #9b6bff);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer; line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    transition: transform 0.14s, background 0.15s, color 0.15s;
}
.modal__close:hover { transform: rotate(90deg) scale(1.12); background: #fff; color: var(--candy-blue, #2f9bff); }
.modal__actions .button { min-width: 132px; justify-content: center; }

/* Score + best (candy pills) */
.score-counter {
    background: linear-gradient(180deg, #ffffff, #eef4ff);
    border: 3px solid var(--candy-blue);
    border-radius: 999px;
    padding: 6px 18px;
    font-weight: 800;
    color: var(--color-text);
    box-shadow: 0 4px 0 var(--candy-blue-d), 0 8px 14px rgba(31, 127, 224, 0.20);
}
.best-score {
    background: linear-gradient(180deg, #fff7e0, #ffe9a8);
    border: 3px solid var(--candy-yellow-d);
    border-radius: 999px;
    padding: 4px 12px;
    box-shadow: 0 4px 0 var(--candy-yellow-d);
}
.best-score svg { fill: var(--candy-yellow-d); }

/* Audio controls */
.audio-controls { gap: 8px; }
.audio-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--candy-blue); }
.audio-icon svg { display: block; }
.audio-slash { display: none; }
.audio-icon #wave { display: block; }
.is-muted .audio-slash { display: block; }
.is-muted #wave { display: none; }

/* ---- Chunky candy buttons ---- */
.button {
    border-radius: 999px;
    border: 3px solid var(--candy-blue);
    padding: 9px 20px;
    font-size: 15px;
    font-weight: 800;
    background: linear-gradient(180deg, #ffffff, #eaf3ff);
    box-shadow: 0 4px 0 var(--candy-blue-d), 0 8px 14px rgba(31, 127, 224, 0.18);
    transition: transform 0.14s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.14s, background 0.2s, filter 0.15s;
}
.button:hover {
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.03);
    background: #fff;
    box-shadow: 0 6px 0 var(--candy-blue-d), 0 12px 18px rgba(31, 127, 224, 0.22);
}
.button:active { transform: translateY(2px) scale(0.96); box-shadow: 0 1px 0 var(--candy-blue-d), 0 3px 6px rgba(0, 0, 0, 0.2); }
.button:disabled { background: #fff; border-color: #d7dcec; box-shadow: 0 3px 0 #c4cadb; color: #aab; }
.button--primary {
    background: linear-gradient(180deg, #7ed0ff, var(--candy-blue));
    border-color: var(--candy-blue-d);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 0 var(--candy-blue-d), 0 10px 16px rgba(31, 127, 224, 0.35);
}
.button--primary:hover { background: linear-gradient(180deg, #8fd6ff, #3aa3ff); }
.button--primary:active { box-shadow: 0 1px 0 var(--candy-blue-d); }
.button--danger {
    background: linear-gradient(180deg, #ff9bb0, var(--candy-red));
    border-color: #d63b5a; color: #fff;
    box-shadow: 0 4px 0 #d63b5a, 0 10px 16px rgba(214, 59, 90, 0.30);
}
.button--big { font-size: 17px; padding: 13px 28px; }

/* Header buttons (pause / menu / restart) carry the icon color */
.level-hud__btn svg { color: var(--candy-blue); }
.level-hud__btn { display: inline-flex; align-items: center; justify-content: center; }

/* HUD */
.level-hud { width: 100%; max-width: 520px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.level-hud__item {
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid #fff;
    border-radius: 999px;
    padding: 5px 12px;
    font-weight: 700;
    box-shadow: 0 3px 0 rgba(31, 127, 224, 0.18);
}
.level-hud__resource { background: linear-gradient(180deg, #fff0c2, #ffd866); border-color: #fff; }

/* Timer: fat candy pill */
.timer { height: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.15); overflow: hidden; border: 2px solid #fff; }
.timer_filler { border-radius: 999px; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.12); }

/* Board: square, cute, fully visible (no edge clipping).
   Поле масштабируется под окно: до 760px, но всегда влезает по высоте. */
.app-container > .game-field, .game-field {
    aspect-ratio: 1 / 1;
    width: min(100%, 820px);
    max-width: min(94vw, 820px, calc(100dvh - 13rem));
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 22px;
    box-shadow: 0 14px 34px var(--field-shadow);
    overflow: hidden;
}
canvas { display: block; border-radius: 22px; }

/* ---- Level buttons: glossy candy tiles ---- */
.level-btn {
    border-width: 4px;
    border-radius: 26px;
    box-shadow: 0 7px 0 hsl(var(--lvl-hue, 210) 80% 42% / 0.55), 0 12px 20px rgba(0, 0, 0, 0.18);
}
.level-btn__num { font-size: 32px; }
.level-btn__star { font-size: 14px; color: rgba(255, 255, 255, 0.45); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.level-btn__star.is-filled { color: #ffd84d; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 6px rgba(255, 200, 0, 0.7); }
.level-btn__lock { font-size: 22px; filter: grayscale(1) opacity(0.6); }
.level-btn:not(.level-btn--locked):hover {
    transform: translateY(-6px) scale(1.07) rotate(-2deg);
    box-shadow: 0 18px 30px hsla(var(--lvl-hue, 210) 85% 45% / 0.45);
    filter: brightness(1.05) saturate(1.1);
}
.level-btn:not(.level-btn--locked):active { transform: translateY(-1px) scale(0.97) rotate(0); }
.level-btn--current { animation: level-pulse 1.5s ease-in-out infinite, float 3s ease-in-out infinite; }

/* Main menu */
.main-menu { background: rgba(20, 24, 60, 0.55); backdrop-filter: blur(3px); }
.main-menu__panel {
    border-radius: 26px;
    padding: 24px;
    border: 4px solid #fff;
    background: linear-gradient(180deg, #ffffff, #f4f8ff);
    box-shadow: 0 24px 60px rgba(20, 24, 60, 0.35);
}
.main-menu__logo { animation: float 3s ease-in-out infinite; }
.main-menu__title { color: var(--candy-blue); font-weight: 800; font-size: 32px; text-shadow: 0 3px 0 rgba(47, 155, 255, 0.18); }
.menu-tab-btn {
    border-radius: 999px;
    border: 3px solid var(--color-border);
    background: #fff;
    font-weight: 700;
    padding: 8px 18px;
    cursor: pointer;
    transition: transform 0.14s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.14s, background 0.2s, color 0.2s;
}
.menu-tab-btn:hover { transform: translateY(-2px) scale(1.05); }
.menu-tab-btn--active {
    background: linear-gradient(180deg, var(--candy-blue), var(--candy-blue-d));
    color: #fff; border-color: var(--candy-blue-d);
    box-shadow: 0 4px 0 var(--candy-blue-d);
}
.menu-pagination .button { border-radius: 999px; }

/* Footer + controllers get hover juice */
.footer { gap: 14px; }
.footer > div {
    cursor: pointer;
    border-radius: 14px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.55);
    transition: transform 0.14s cubic-bezier(.34, 1.56, .64, 1), background 0.15s;
}
.footer > div:hover { background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.controllers-item { border-radius: 14px; transition: transform 0.14s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.14s, background 0.2s; }
.controllers-item:hover { box-shadow: 0 6px 14px rgba(0,0,0,.12); background: rgba(255,255,255,.9); }

/* Bonus panel */
.bonus-slot { border-radius: 18px; border-width: 3px; box-shadow: 0 5px 0 rgba(0,0,0,.10); }
.bonus-slot__icon svg { width: 30px; height: 30px; display: block; }

/* Settings */
.settings-row { background: rgba(255,255,255,.6); border-radius: 14px; padding: 10px 14px; }
.settings-sound-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--candy-blue); background: #fff; color: var(--candy-blue); }
.select { border-radius: 12px; }

/* FAQ */
.faq-modal-content { border-radius: 22px; }

/* Level detail modal polish */
.level-detail__stars { font-size: 34px; letter-spacing: 4px; color: rgba(0,0,0,.15); }
.level-detail__stars .is-filled { color: #ffd84d; text-shadow: 0 2px 4px rgba(0,0,0,.25); }
.level-detail__summary { font-weight: 800; color: var(--color-text); }
.level-detail__goal { font-weight: 700; color: var(--candy-blue); background: var(--panel-soft); border-radius: 14px; padding: 10px 14px; }
.level-detail__reqs li { padding: 8px 12px; border-radius: 12px; margin-bottom: 6px; background: rgba(255,255,255,.6); }
.level-detail__reqs li.is-met { background: linear-gradient(90deg, #e7fff2, #d3fbe8); box-shadow: inset 0 0 0 2px var(--candy-green); }

/* ---- Keyframes for juice ---- */
@keyframes pop-in { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-3deg)} 75%{transform:rotate(3deg)} }



/* ============================================================
   RESPONSIVE PLAY LAYOUT (desktop 3-col 30/40/30 / mobile stacked)
   ============================================================ */
.app { padding: 0; }

.play-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100vh;
    /* dvh объявлен последним: на мобильных он точнее 100vh (учитывает
       адресную строку браузера) — иначе нижняя панель уезжает за экран */
    height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
    box-sizing: border-box;
}
.play-side--left  { order: 1; display: flex; flex-direction: column; gap: 14px; }
.play-center      { order: 2; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 0; }
.play-side--right { order: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.play-meta { display: none; }

/* --- Goal box (top on mobile / left column on desktop) --- */
.goal-box {
    --goal-accent: #ff5fa2;
    background: linear-gradient(135deg, var(--panel), var(--panel-soft));
    border: 3px solid var(--goal-accent);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.goal-box__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.goal-box__level { font-size: 16px; font-weight: 800; color: var(--accent-dark); }
.goal-box__tools { display: flex; align-items: center; gap: 6px; }
.goal-box__main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.goal-box__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.goal-box__score { font-size: 14px; font-weight: 700; color: var(--muted); display: flex; gap: 6px; align-items: baseline; }
.goal-box__score .score-counter { font-size: 18px; color: var(--accent); background: var(--chip); padding: 0 10px; border-radius: 999px; }
.goal-box__goal { font-size: 15px; font-weight: 800; color: var(--text); }
.goal-box__mode { font-size: 13px; font-weight: 700; color: var(--muted); }
.goal-box__resource {
    display: flex; align-items: baseline; gap: 4px;
    font-weight: 900; line-height: 1;
    color: var(--goal-accent);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
    flex: 0 0 auto;
}
.goal-box__num { font-size: 40px; }
.goal-box__unit { font-size: 16px; font-weight: 800; }

/* Round icon buttons (restart / pause / menu / sound) */
.icon-btn {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; cursor: pointer; padding: 0;
    box-shadow: 0 4px 10px var(--field-shadow);
    transition: transform .12s, filter .12s;
}
.icon-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.audio-button { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.audio-icon .audio-slash { display: none; }
.audio-button.is-muted .audio-icon .audio-slash { display: block; }
/* Кнопка звука в настройках — переключение слэша по классу is-muted (без эмодзи) */
.settings-sound-toggle .audio-slash { display: none; }
.settings-sound-toggle.is-muted .audio-slash { display: block; }

/* --- Game field sizing --- */
.play-center .timer { width: 100%; max-width: min(100%, calc(100dvh - 14rem)); }
.game-field {
    width: min(100%, calc(100dvh - 14rem));
    aspect-ratio: 1 / 1;
    max-height: calc(100dvh - 14rem);
}

/* --- Bonuses: vessel + slots (mobile = row) --- */
.bonuses { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; }
.bonus-vessel-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* ===== Бонус-ОРБ: круговой радужный заряд-метр (полный редизайн) ===== */
.bonus-vessel-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; }

/* Вращающееся радужное кольцо вокруг орба (ярче при заполнении) */
.bonus-vessel-wrap::after {
    content: '';
    position: absolute;
    left: 50%; top: 62px;
    width: 150px; height: 150px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff7ad1, #ffd24d, #6a5cff, #22c98a, #ff7ad1);
    filter: blur(6px);
    opacity: calc(var(--fill, 0) / 100 * 0.85 + 0.15);
    animation: vessel-ring-spin 3.5s linear infinite;
    pointer-events: none;
    z-index: 0;
}
/* Сияющая аура (яркость растёт с заполнением) */
.bonus-vessel-wrap::before {
    content: '';
    position: absolute;
    left: 50%; top: 62px;
    width: 170px; height: 170px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 122, 209, 0.55), rgba(106, 92, 255, 0.30) 45%, transparent 70%);
    filter: blur(10px);
    opacity: calc(var(--fill, 0) / 100 * 0.9 + 0.1);
    animation: vessel-aura 2.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes vessel-aura {
    0%, 100% { transform: translate(-50%, -50%) scale(0.92); }
    50%      { transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes vessel-ring-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Сам орб: круг с радужной дугой прогресса (conic по --fill) */
.bonus-vessel {
    position: relative;
    width: 112px; height: 112px;
    border-radius: 50%;
    background:
        conic-gradient(from -90deg,
            #ffd24d 0deg,
            #ff7ad1 calc(var(--fill, 0) * 1%),
            #6a5cff calc(var(--fill, 0) * 1%),
            rgba(255,255,255,0.10) calc(var(--fill, 0) * 1%),
            rgba(255,255,255,0.10) 360deg);
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.9),
        0 6px 18px rgba(0,0,0,0.28),
        0 0 calc(6px + var(--fill,0) * 0.5px) calc(var(--fill,0) * 0.12px) rgba(177, 91, 255, 0.6);
    flex: 0 0 auto;
    z-index: 1;
    overflow: hidden;
    transition: box-shadow .3s ease;
}
/* Бегущий блик-свечение по стеклу */
.bonus-vessel::after {
    content: '';
    position: absolute;
    top: -60%; left: -30%;
    width: 50%; height: 220%;
    transform: rotate(18deg);
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
    animation: vessel-sheen 2.8s ease-in-out infinite;
    z-index: 4;
    pointer-events: none;
}
/* Стеклянный блик слева */
.bonus-vessel::before {
    content: '';
    position: absolute;
    top: 14px; left: 16px;
    width: 26px; height: 50%;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.05));
    filter: blur(1px);
    z-index: 3;
    pointer-events: none;
}
@keyframes vessel-sheen { 0%, 55% { left: -40%; } 100% { left: 120%; } }

/* Внутренний стеклянный диск (центр), перекрывает conic, оставляя видимым кольцо */
.bonus-vessel__liquid {
    position: absolute;
    inset: 14px;
    height: auto !important;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.35) 38%, rgba(120,90,200,0.20) 100%);
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.18), inset 0 -8px 16px rgba(255,255,255,0.35);
    z-index: 2;
    overflow: hidden;
}
/* Поднимающиеся пузырьки внутри диска */
.bonus-vessel__liquid::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 82%, rgba(255,255,255,0.95) 0 2px, transparent 3px),
        radial-gradient(circle at 62% 90%, rgba(255,255,255,0.85) 0 1.5px, transparent 3px),
        radial-gradient(circle at 80% 74%, rgba(255,255,255,0.9) 0 2px, transparent 3px);
    background-repeat: no-repeat;
    animation: vessel-bubbles 2.2s linear infinite;
}
@keyframes vessel-bubbles {
    0%   { transform: translateY(8px); opacity: 0; }
    18%  { opacity: .9; }
    100% { transform: translateY(-52px); opacity: 0; }
}

.bonus-vessel__label {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 900; color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 10px rgba(106,92,255,0.9), 0 0 2px rgba(0,0,0,0.9);
    z-index: 5;
    letter-spacing: .02em;
}
.bonus-vessel__caption { font-size: 13px; font-weight: 800; color: var(--text); z-index: 2; margin-top: 2px; }

/* Звёздочки-искры вокруг орба */
.bonus-star {
    position: absolute;
    width: 10px; height: 10px;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle, #fff 30%, rgba(255,210,120,0.9) 60%, transparent 70%);
    border-radius: 50%;
    animation: bonus-star-twinkle 1.8s ease-in-out infinite;
}
.bonus-star::before, .bonus-star::after {
    content: '';
    position: absolute; inset: 0; margin: auto;
    background: #fff;
    border-radius: 1px;
}
.bonus-star::before { width: 100%; height: 2px; }
.bonus-star::after  { width: 2px; height: 100%; }
.bonus-star--1 { top: -2px; left: -4px; animation-delay: 0s; }
.bonus-star--2 { top: 46px; right: -6px; animation-delay: .6s; background: radial-gradient(circle, #fff 30%, rgba(255,122,209,0.9) 60%, transparent 70%); }
.bonus-star--3 { bottom: 14px; left: -8px; animation-delay: 1.1s; width: 8px; height: 8px; background: radial-gradient(circle, #fff 30%, rgba(106,92,255,0.9) 60%, transparent 70%); }
@keyframes bonus-star-twinkle {
    0%, 100% { transform: scale(.5) rotate(0deg); opacity: .3; }
    50%      { transform: scale(1.25) rotate(45deg); opacity: 1; }
}

.bonus-vessel--splash { animation: vessel-splash .26s ease; }
@keyframes vessel-splash { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Почти готов (85%+): радужное пульсирующее свечение */
.bonus-vessel--ready {
    animation: bonus-vessel-ready 1.1s ease-in-out infinite;
}
.bonus-vessel--ready::after { animation-duration: 1.2s; }
@keyframes bonus-vessel-ready {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(255,210,74,.7),
            0 0 14px rgba(255,193,7,.6),
            0 6px 16px rgba(0,0,0,.22),
            0 0 22px rgba(255,122,209,.5);
    }
    50% {
        box-shadow:
            0 0 0 6px rgba(255,210,74,1),
            0 0 32px rgba(255,193,7,1),
            0 6px 16px rgba(0,0,0,.22),
            0 0 44px rgba(106,92,255,.85);
    }
}
/* Зарядка готова: мощный всплеск с переливом цвета */
.bonus-vessel--earned { animation: bonus-vessel-earned .9s cubic-bezier(.34,1.56,.64,1); }
@keyframes bonus-vessel-earned {
    0%   { transform: scale(1); filter: brightness(1) hue-rotate(0deg); }
    25%  { transform: scale(1.14); filter: brightness(1.6) hue-rotate(40deg); }
    55%  { transform: scale(.95); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1) hue-rotate(0deg); }
}
.bonus-vessel--earned::after { animation-duration: .9s; }
.bonuses__slots { gap: 12px; }
.bonus-slot { width: 68px; height: 68px; border-radius: 14px; }
.bonus-slot__img { width: 30px; height: 30px; }
.bonus-slot__icon { font-size: 22px; }

/* Magic particle flying from a destroyed tile into the vessel */
.magic-particle {
    position: fixed;
    width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #ff8ad6 55%, #9b6bff);
    box-shadow: 0 0 10px #ff7ad1;
    pointer-events: none; z-index: 320;
    transition: transform .55s cubic-bezier(.5, -.25, .3, 1), opacity .55s ease-in;
}
.magic-particle--go { opacity: 0; }

/* ============================================================
   DESKTOP (>=760px): left goal / center field / right bonuses
   ============================================================ */
@media (min-width: 760px) {
    .play-area {
        display: grid;
        grid-template-columns: 30% 40% 30%;
        align-items: stretch;
        gap: 26px;
        height: 100vh; height: 100dvh;
        /* Без центрирования: центральная колонка (поле) остаётся по центру экрана,
           а левый отступ равен межколоночному зазору — «окошко цели» на одинаковом
           расстоянии от края экрана и от игрового поля. */
        padding: 20px 24px 20px 26px;
        max-width: none;
        margin: 0;
    }
    .play-side--left, .play-side--right, .play-center { order: 0; }
    .play-side--left { justify-content: center; overflow-y: auto; }
    .play-side--right { justify-content: center; overflow-y: auto; }
    .play-meta { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
    .goal-box__num { font-size: 52px; }
    .goal-box__unit { font-size: 20px; }
    .game-field {
        width: min(100%, calc(100dvh - 13rem), 820px);
        max-height: calc(100dvh - 13rem);
    }
    .play-center .timer { width: min(100%, calc(100dvh - 13rem), 820px); }
    .bonuses { flex-direction: column; gap: 14px; }
    .bonus-vessel { width: 128px; height: 128px; }
    .bonus-vessel-wrap::before { top: 70px; width: 188px; height: 188px; }
    .bonus-vessel-wrap::after { top: 70px; width: 168px; height: 168px; }
    .bonus-vessel__label { font-size: 14px; }
    .bonus-slot { width: 84px; height: 84px; }
    .bonus-slot__img { width: 44px; height: 44px; }
    .bonus-slot__icon { font-size: 30px; }
    #volume-slider { display: inline-block; width: 120px; }
}
/* On phones keep the in-game volume slider hidden (sound icon toggles mute) */
#volume-slider { display: none; }

/* ===== COMBO: индикатор комбо прямо на игровом поле ===== */
.combo-indicator {
    position: absolute;
    left: 50%; top: 32%;
    transform: translate(-50%, -50%) scale(0.6);
    z-index: 6;
    pointer-events: none;
    font-family: 'Fredoka', 'Comfortaa', 'Arial', sans-serif;
    font-weight: 800;
    font-size: 30px;
    letter-spacing: 0.03em;
    color: #ffe14d;
    text-shadow: 0 0 10px #ff8a1f, 0 2px 0 #b9720a, 0 0 20px rgba(255, 180, 40, 0.85), 0 3px 7px rgba(0, 0, 0, 0.45);
    opacity: 0;
    white-space: nowrap;
}
.combo-indicator--show {
    animation: combo-pop 0.72s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes combo-pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.45) rotate(-7deg); }
    22%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(3deg); }
    68%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
    100% { opacity: 0; transform: translate(-50%, -62%) scale(1); }
}

/* ============================================================
   PC MAIN MENU — full-screen, vivid, game-like redesign
   (applies only at desktop widths, ≥ 760px; mobile is untouched)
   ============================================================ */
@media (min-width: 760px) {
    /* Immersive animated candy backdrop instead of a plain blur over the game */
    .main-menu {
        padding: 16px;
        align-items: center;
        overflow: hidden;
        background:
            radial-gradient(52% 46% at 12% 8%,  rgba(255, 95, 162, 0.55), transparent 70%),
            radial-gradient(46% 50% at 90% 14%, rgba(106, 92, 255, 0.55), transparent 70%),
            radial-gradient(62% 56% at 50% 102%, rgba(34, 201, 138, 0.45), transparent 72%),
            linear-gradient(150deg, #2b1a63 0%, #5a2a8f 42%, #9b2f7a 100%);
    }
    /* Soft floating candy blobs for an organic, alive feel */
    .main-menu::before,
    .main-menu::after {
        content: '';
        position: fixed;
        width: 420px; height: 420px;
        border-radius: 50%;
        filter: blur(46px);
        opacity: 0.55;
        pointer-events: none;
        z-index: 0;
    }
    .main-menu::before {
        left: -120px; top: -90px;
        background: radial-gradient(circle at 30% 30%, #ff5fa2, transparent 70%);
        animation: menu-blob-a 16s ease-in-out infinite;
    }
    .main-menu::after {
        right: -140px; bottom: -150px;
        background: radial-gradient(circle at 70% 70%, #6a5cff, transparent 70%);
        animation: menu-blob-b 20s ease-in-out infinite;
    }
    @keyframes menu-blob-a {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%      { transform: translate(60px, 40px) scale(1.15); }
    }
    @keyframes menu-blob-b {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%      { transform: translate(-50px, -40px) scale(1.12); }
    }

    /* Large glass panel — no plain white, vivid translucent candy glass */
    .main-menu__panel {
        position: relative;
        z-index: 1;
        width: min(94vw, 1180px);
        max-width: 1180px;
        min-height: 0;
        max-height: calc(100dvh - 32px);
        margin: 0 auto;
        padding: 38px 46px 42px;
        display: flex;
        flex-direction: column;
        gap: 22px;
        border-radius: 36px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
        backdrop-filter: blur(20px) saturate(1.2);
        -webkit-backdrop-filter: blur(20px) saturate(1.2);
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        overflow: hidden;
    }

    /* Brand */
    .main-menu__brand { margin-bottom: 2px; }
    .main-menu__logo {
        font-size: 66px;
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
    }
    .main-menu__title {
        font-size: 58px;
        font-weight: 900;
        letter-spacing: 0.04em;
        line-height: 1.05;
        background: linear-gradient(90deg, #ffffff 0%, #ffe14d 35%, #ff8ad1 68%, #8ad0ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: none;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
    }
    .main-menu__subtitle {
        color: rgba(255, 255, 255, 0.92);
        font-size: 19px;
        font-weight: 700;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    }

    /* Tabs */
    .menu-tabs {
        gap: 10px;
        padding: 8px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.25);
    }
    .menu-tab-btn {
        font-size: 20px;
        padding: 14px 12px;
        border-radius: 14px;
        color: rgba(255, 255, 255, 0.85);
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    }
    .menu-tab-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
    .menu-tab-btn--active {
        background: linear-gradient(135deg, #ff5fa2, #ff9d3f);
        color: #fff;
        box-shadow: 0 8px 22px rgba(255, 95, 162, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }

    /* Level grid — bigger, brighter candy buttons */
    .level-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 18px;
        padding: 28px;
        border-radius: 30px;
        background: linear-gradient(160deg, rgba(106, 92, 255, 0.30), rgba(255, 95, 162, 0.30));
        border: 2px solid rgba(255, 255, 255, 0.45);
        box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.18), 0 16px 40px rgba(0, 0, 0, 0.28);
    }
    .level-btn { border-radius: 26px; }
    .level-btn__num { font-size: 36px; }

    /* Pagination */
    .menu-pagination { margin-top: 4px; }
    .menu-pagination .button {
        background: linear-gradient(135deg, #6a5cff, #ff5fa2);
        color: #fff;
        border: none;
        box-shadow: 0 6px 18px rgba(106, 92, 255, 0.55);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }
    .menu-pagination .button:hover { filter: brightness(1.07); }
    .menu-pagination .button:disabled {
        background: rgba(255, 255, 255, 0.16);
        color: rgba(255, 255, 255, 0.7);
        box-shadow: none;
        text-shadow: none;
    }
    .menu-pagination__info {
        color: #fff;
        font-size: 18px;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }

    /* Endless tab */
    .endless-card {
        text-align: center;
        color: #fff;
        padding: 44px 36px;
        border-radius: 30px;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07));
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
    }
    .endless-card__icon {
        font-size: 74px;
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
    }
    .endless-card__desc { color: rgba(255, 255, 255, 0.92); font-size: 18px; }
    .endless-card__best { color: #fff; font-size: 19px; }
    .endless-card__best b { color: #ffe14d; }
    #endless-play-button {
        margin-top: 8px;
        font-size: 23px;
        padding: 16px 36px;
        border-radius: 999px;
        background: linear-gradient(135deg, #ffce3a, #ff7a3f);
        color: #4a2a00;
        border: none;
        box-shadow: 0 10px 26px rgba(255, 140, 60, 0.6);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    }

    /* Settings tab */
    .settings-list {
        gap: 16px;
        padding: 28px 32px;
        border-radius: 26px;
        color: #fff;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    }
    .settings-row { color: #fff; font-size: 18px; }
    .settings-row > span { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
    .settings-row .button {
        background: linear-gradient(135deg, #6a5cff, #ff5fa2);
        color: #fff;
        border: none;
        box-shadow: 0 6px 16px rgba(106, 92, 255, 0.5);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }
}

/* ============================================================
   ДЕКОР ФОНА ГЛАВНОГО МЕНЮ: облака, звёздочки, блёстки, сердечки
   ============================================================ */
.main-menu__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
/* карточка меню — поверх декора */
.main-menu__panel { position: relative; z-index: 1; }

.main-menu__decor .cloud,
.main-menu__decor .star,
.main-menu__decor .spark,
.main-menu__decor .heart,
.main-menu__decor .glow,
.main-menu__decor .bubble,
.main-menu__decor .petal,
.main-menu__decor .shoot,
.main-menu__decor .balloon,
.main-menu__decor .confetti,
.main-menu__decor .candy,
.main-menu__decor .moon,
.main-menu__decor .ring {
    position: absolute;
    left: var(--x, 0%);
    top: var(--y, 0%);
    width: var(--w, 80px);
    will-change: transform, opacity;
}
.main-menu__decor .decor-svg { display: block; width: 100%; height: auto; }

/* Мягкое свечение по углам (солнце/луна) */
.main-menu__decor .glow {
    width: var(--w, 320px);
    height: var(--w, 320px);
    border-radius: 50%;
    background: radial-gradient(circle, var(--gc, rgba(255,221,150,0.42)) 0%, transparent 70%);
    filter: blur(6px);
    animation: glow-breathe var(--dur, 9s) ease-in-out infinite;
    animation-delay: var(--del, 0s);
}
@keyframes glow-breathe {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.12); opacity: 0.9; }
}

/* Облака: плавно покачиваются */
.main-menu__decor .cloud {
    width: var(--w, 130px);
    opacity: 0.9;
    filter: drop-shadow(0 8px 14px rgba(80, 60, 120, 0.25));
    animation: cloud-float var(--dur, 15s) ease-in-out infinite;
    animation-delay: var(--del, 0s);
}
@keyframes cloud-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(var(--s, 1)); }
    50% { transform: translate3d(18px, -10px, 0) scale(var(--s, 1)); }
}

/* Звёздочки: мерцание + лёгкий поворот */
.main-menu__decor .star {
    width: var(--w, 22px);
    transform: scale(var(--s, 1));
    animation: star-twinkle var(--dur, 3.4s) ease-in-out infinite;
    animation-delay: var(--del, 0s);
}
@keyframes star-twinkle {
    0%, 100% { transform: scale(calc(var(--s, 1) * 0.5)) rotate(0deg); opacity: 0.35; }
    50% { transform: scale(calc(var(--s, 1) * 1)) rotate(45deg); opacity: 1; }
}

/* Блёстки: маленькие светящиеся точки */
.main-menu__decor .spark {
    width: var(--w, 8px);
    height: var(--w, 8px);
    border-radius: 50%;
    background: var(--sc, #fff);
    box-shadow: 0 0 8px 2px var(--sc, #fff);
    animation: spark-pulse var(--dur, 2.6s) ease-in-out infinite;
    animation-delay: var(--del, 0s);
}
@keyframes spark-pulse {
    0%, 100% { transform: scale(0.5); opacity: 0.25; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Сердечки: мягко всплывают и растворяются */
.main-menu__decor .heart {
    width: var(--w, 26px);
    animation: heart-float var(--dur, 9s) ease-in-out infinite;
    animation-delay: var(--del, 0s);
}
@keyframes heart-float {
    0% { transform: translateY(8px) scale(var(--s, 1)); opacity: 0; }
    15% { opacity: 0.9; }
    85% { opacity: 0.9; }
    100% { transform: translateY(-26px) scale(var(--s, 1)); opacity: 0; }
}

/* Экономим ресурсы слабого ПК: ставим анимации на паузу, когда меню закрыто */
.main-menu:not(.main-menu--open) .main-menu__decor * { animation-play-state: paused; }

/* Уважаем настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
    .main-menu__decor * { animation: none !important; }
    .main-menu__decor .star { opacity: 0.9; }
    .main-menu__decor .spark { opacity: 0.8; }
    .main-menu__decor .heart { opacity: 0.85; }
}

/* ============================================================
   ДОПОЛНИТЕЛЬНЫЙ ДЕКОР: пузыри, лепестки, кометы, шары,
   конфетти, леденцы, луна, расходящиеся кольца и живая аврора
   ============================================================ */

/* Живая аврора за всем декором (мягкое перетекающее свечение) */
.main-menu__decor .aurora {
    position: absolute;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 38% at 18% 28%, rgba(106, 92, 255, 0.40), transparent 70%),
        radial-gradient(40% 40% at 82% 22%, rgba(255, 95, 162, 0.38), transparent 70%),
        radial-gradient(46% 46% at 50% 82%, rgba(34, 201, 138, 0.32), transparent 70%);
    background-size: 200% 200%;
    filter: blur(12px);
    animation: aurora-drift var(--dur, 18s) ease-in-out infinite;
}
@keyframes aurora-drift {
    0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%; }
    50%      { background-position: 100% 50%, 0% 50%, 50% 0%; }
}

/* Пузыри, поднимающиеся снизу вверх */
.main-menu__decor .bubble {
    width: var(--w, 24px);
    height: var(--w, 24px);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.95), rgba(173,216,255,0.35) 60%, rgba(173,216,255,0.08) 100%);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: inset 0 0 6px rgba(255,255,255,0.6);
    animation: bubble-rise var(--dur, 10s) linear infinite;
    animation-delay: var(--del, 0s);
}
@keyframes bubble-rise {
    0%   { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
    10%  { opacity: 0.85; }
    50%  { transform: translateY(-42vh) translateX(16px) scale(1); }
    90%  { opacity: 0.7; }
    100% { transform: translateY(-85vh) translateX(-12px) scale(0.9); opacity: 0; }
}

/* Падающие лепестки с покачиванием и вращением */
.main-menu__decor .petal {
    width: var(--w, 14px);
    height: calc(var(--w, 14px) * 1.4);
    background: hsl(var(--hue, 340) 90% 74%);
    border-radius: 100% 0 100% 0;
    opacity: 0.9;
    animation: petal-fall var(--dur, 9s) linear infinite;
    animation-delay: var(--del, 0s);
}
@keyframes petal-fall {
    0%   { transform: translateY(-6vh) translateX(0) rotate(0deg); opacity: 0; }
    10%  { opacity: 0.95; }
    100% { transform: translateY(106vh) translateX(46px) rotate(360deg); opacity: 0.2; }
}

/* Кометы-падающие звёзды (полоска-след) */
.main-menu__decor .shoot {
    width: var(--w, 130px);
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 55%, #fff 100%);
    border-radius: 2px;
    filter: drop-shadow(0 0 6px #fff);
    transform: rotate(20deg);
    opacity: 0;
    animation: shoot-fly var(--dur, 7s) ease-in infinite;
    animation-delay: var(--del, 0s);
}
@keyframes shoot-fly {
    0%   { transform: translate(0, 0) rotate(20deg); opacity: 0; }
    4%   { opacity: 1; }
    20%  { transform: translate(-62vw, 26vh) rotate(20deg); opacity: 0; }
    100% { transform: translate(-62vw, 26vh) rotate(20deg); opacity: 0; }
}

/* Воздушные шары (покачиваются) */
.main-menu__decor .balloon {
    width: var(--w, 50px);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.22));
    animation: balloon-bob var(--dur, 6s) ease-in-out infinite;
    animation-delay: var(--del, 0s);
}
@keyframes balloon-bob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-16px) rotate(3deg); }
}

/* Падающий конфетти */
.main-menu__decor .confetti {
    width: var(--w, 8px);
    height: calc(var(--w, 8px) * 1.6);
    background: var(--cc, #ff6fae);
    border-radius: 2px;
    opacity: 0.9;
    animation: confetti-fall var(--dur, 8s) linear infinite;
    animation-delay: var(--del, 0s);
}
@keyframes confetti-fall {
    0%   { transform: translateY(-5vh) rotate(0deg); opacity: 0; }
    8%   { opacity: 1; }
    100% { transform: translateY(108vh) rotate(540deg); opacity: 0.3; }
}

/* Конфетки-леденцы (покачиваются) */
.main-menu__decor .candy {
    width: var(--w, 30px);
    animation: candy-spin var(--dur, 7s) ease-in-out infinite;
    animation-delay: var(--del, 0s);
}
@keyframes candy-spin {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50%      { transform: translateY(-12px) rotate(8deg); }
}

/* Светящаяся луна (мягко пульсирует) */
.main-menu__decor .moon {
    width: var(--w, 90px);
    filter: drop-shadow(0 0 18px rgba(255, 240, 180, 0.7));
    animation: moon-glow var(--dur, 12s) ease-in-out infinite;
    animation-delay: var(--del, 0s);
}
@keyframes moon-glow {
    0%, 100% { transform: rotate(-6deg) scale(1); opacity: 0.85; filter: drop-shadow(0 0 14px rgba(255, 240, 180, 0.6)); }
    50%      { transform: rotate(6deg) scale(1.04); opacity: 1; filter: drop-shadow(0 0 28px rgba(255, 240, 180, 0.95)); }
}

/* Расходящиеся кольца */
.main-menu__decor .ring {
    width: var(--w, 60px);
    height: var(--w, 60px);
    border-radius: 50%;
    border: 2px solid var(--rc, rgba(255, 255, 255, 0.8));
    animation: ring-pulse var(--dur, 5s) ease-out infinite;
    animation-delay: var(--del, 0s);
}
@keyframes ring-pulse {
    0%   { transform: scale(0.3); opacity: 0.8; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Статичная видимость новых объектов при уменьшенном движении */
@media (prefers-reduced-motion: reduce) {
    .main-menu__decor .bubble   { opacity: 0.6; }
    .main-menu__decor .petal    { opacity: 0.7; }
    .main-menu__decor .shoot    { opacity: 0; }
    .main-menu__decor .confetti { opacity: 0.7; }
    .main-menu__decor .moon     { opacity: 0.85; }
    .main-menu__decor .ring     { opacity: 0.5; }
}

/* ============================================================
   ПРОФИЛЬ ИГРОКА + ЕЖЕДНЕВНАЯ НАГРАДА + ДОСТИЖЕНИЯ
   ============================================================ */
.profile-card { display: flex; flex-direction: column; gap: 18px; padding: 4px 2px; }
/* Вкладка «Профиль» локальная (без аккаунта платформы): hidden обязан побеждать display:flex */
.profile-card[hidden] { display: none !important; }
.profile-auth[hidden] { display: none !important; }

/* Экран входа/регистрации — больше не используется, профиль теперь локальный */
.profile-auth {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; text-align: center;
    padding: 34px 22px;
    margin: 8px 0 14px;
    border-radius: 20px;
    background: linear-gradient(165deg, rgba(255,255,255,0.92), rgba(255,240,247,0.88));
    border: 2px solid rgba(255,126,179,0.55);
    box-shadow: 0 10px 26px var(--field-shadow);
}
.profile-auth__icon {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 38px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 6px 16px var(--field-shadow);
}
.profile-auth__text {
    font-size: 15px; font-weight: 700; line-height: 1.5;
    color: var(--text); max-width: 340px;
}
.profile-auth .button { min-width: 180px; }
.profile-header { display: flex; align-items: center; gap: 14px; }
.profile-avatar {
    width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 6px 16px var(--field-shadow);
    flex: 0 0 auto;
}
.profile-headinfo { display: flex; flex-direction: column; gap: 2px; }
.profile-name { font-size: 22px; font-weight: 900; color: var(--text); }
.profile-sub { font-size: 13px; color: var(--muted); font-weight: 700; }

.profile-section { display: flex; flex-direction: column; gap: 10px; }
.profile-section__title {
    margin: 0; font-size: 15px; font-weight: 800; letter-spacing: 0.02em;
    color: var(--accent); text-transform: uppercase;
}

/* Статистика — сетка плиток */
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.profile-stat {
    background: var(--panel-soft);
    border-radius: 14px; padding: 12px 8px; text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.profile-stat__val { font-size: 24px; font-weight: 900; color: var(--accent-2); line-height: 1.1; }
.profile-stat__label { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 4px; }

/* Календарь ежедневных наград (7 дней) */
.daily-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.daily-day {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 2px 8px; border-radius: 14px;
    background: var(--panel-soft); border: 2px solid transparent;
    transition: transform 0.15s ease;
}
.daily-day__no { font-size: 11px; font-weight: 800; color: var(--muted); }
.daily-day__gift { font-size: 22px; line-height: 1; filter: grayscale(0.4) opacity(0.65); }
.daily-day__cnt { font-size: 11px; font-weight: 800; color: var(--text); }
.daily-day--today {
    border-color: var(--accent);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), var(--panel-soft));
    box-shadow: 0 6px 16px var(--field-shadow);
    animation: daily-pulse 1.6s ease-in-out infinite;
}
.daily-day--today .daily-day__gift { filter: none; }
.daily-day--claimed { opacity: 0.92; }
.daily-day--claimed .daily-day__gift { filter: none; opacity: 0.95; }
.daily-day--claimed::after {
    content: "\2713"; position: absolute; top: 4px; right: 6px;
    font-size: 12px; font-weight: 900; color: #2bbf5a;
}
@keyframes daily-pulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-3px) scale(1.04); }
}

.daily-claim-row { display: flex; align-items: center; gap: 12px; }
.daily-today { flex: 1; font-size: 13px; font-weight: 700; color: var(--text); }

/* Достижения */
.ach-list { display: flex; flex-direction: column; gap: 8px; }
.ach {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 14px;
    background: var(--panel-soft); border: 2px solid transparent; opacity: 0.6;
}
.ach--locked { opacity: 0.55; }
.ach--got {
    opacity: 1; border-color: rgba(43, 191, 90, 0.55);
    background: linear-gradient(160deg, rgba(43, 191, 90, 0.14), var(--panel-soft));
}
.ach--unclaimed {
    opacity: 1; border-color: rgba(255, 165, 0, 0.7);
    background: linear-gradient(160deg, rgba(255, 165, 0, 0.16), var(--panel-soft));
    animation: ach-glow 1.4s ease-in-out infinite;
}
.ach--unclaimed .ach__icon { filter: none; }
@keyframes ach-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0); }
    50%      { box-shadow: 0 0 14px 2px rgba(255, 165, 0, 0.55); }
}
.ach__action { margin-left: auto; display: flex; align-items: center; flex-shrink: 0; }
.ach__claim {
    border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 12px;
    padding: 7px 12px; border-radius: 999px; color: #5b3b00; white-space: nowrap;
    background: linear-gradient(135deg, #ffd54a, #ff9f1c);
    box-shadow: 0 4px 10px rgba(255, 159, 28, 0.4);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.ach__claim:hover { transform: scale(1.08); filter: brightness(1.05); }
.ach__claim:active { transform: scale(0.95); }
.ach__claimed { font-size: 12px; font-weight: 800; color: #2bbf5a; white-space: nowrap; }
.ach--claiming { animation: ach-claim 0.65s ease; }
@keyframes ach-claim {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.12); box-shadow: 0 0 22px 4px rgba(255, 215, 74, 0.8); }
    100% { transform: scale(1); }
}
.ach__icon { font-size: 26px; line-height: 1; filter: grayscale(1); }
.ach--got .ach__icon { filter: none; }
.ach__text { display: flex; flex-direction: column; gap: 1px; }
.ach__name { font-size: 14px; font-weight: 800; color: var(--text); }
.ach__desc { font-size: 12px; font-weight: 600; color: var(--muted); }
.ach__text { flex: 1 1 auto; min-width: 0; }
.ach__reward { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.ach__reward-label { font-size: 11px; font-weight: 700; color: var(--muted); }
.ach-reward__pill { font-size: 11px; padding: 2px 9px; box-shadow: none; }

/* Попап ежедневной награды */
.daily-modal__content { text-align: center; max-width: 380px; }
.daily-gift {
    font-size: 64px; line-height: 1; margin-bottom: 6px;
    animation: daily-gift-bob 2.2s ease-in-out infinite;
    filter: drop-shadow(0 8px 16px var(--field-shadow));
}
@keyframes daily-gift-bob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-10px) rotate(4deg); }
}
.daily-modal__title { font-size: 22px; font-weight: 900; color: var(--accent); }
.daily-modal__day { font-size: 14px; font-weight: 800; color: var(--accent-2); margin-top: 2px; }
.daily-modal__text { font-size: 13px; font-weight: 600; color: var(--muted); margin: 8px 0 14px; }
.daily-modal__rewards { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 16px; }
.daily-reward {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    width: 84px; padding: 12px 8px; border-radius: 16px;
    background: var(--panel-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.daily-reward__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.daily-reward__icon svg { width: 34px; height: 34px; }
.daily-reward__name { font-size: 11px; font-weight: 700; color: var(--text); }
.daily-reward__cnt { font-size: 14px; font-weight: 900; color: var(--accent-2); }

@media (prefers-reduced-motion: reduce) {
    .daily-day--today { animation: none; }
    .daily-gift { animation: none; }
}

/* Чип бонуса: картинка персонажа + количество (календарь и попап) */
.bonus-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.bonus-chip__img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: rgba(255,255,255,0.55); box-shadow: 0 2px 5px rgba(0,0,0,0.22); }
.bonus-chip__emoji { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.bonus-chip__emoji svg { width: 34px; height: 34px; }
.bonus-chip__cnt { position: absolute; right: -4px; bottom: -4px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 900; line-height: 17px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }

/* Календарь: в каждом дне — картинки бонусов этого дня */
.daily-day__bonuses { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 3px 0 1px; }
.bonus-chip--sm { width: 22px; height: 22px; }
.bonus-chip--sm .bonus-chip__img { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.bonus-chip--sm .bonus-chip__emoji { width: 22px; height: 22px; }
.bonus-chip--sm .bonus-chip__emoji svg { width: 20px; height: 20px; }
.bonus-chip--sm .bonus-chip__cnt { min-width: 14px; height: 14px; font-size: 9px; line-height: 14px; right: -3px; bottom: -3px; }

/* Попап: крупная картинка бонуса */
.bonus-chip--lg .bonus-chip__img { width: 50px; height: 50px; border-radius: 13px; }
.daily-reward__name { margin-top: 6px; }


/* ==== ВАЛЮТА И ЗУМ-КАРТОЧКА БОНУСА ====
/* Валюты: золото и гемы */
.currency-hud { display: flex; gap: 8px; justify-content: center; width: 100%; margin-bottom: 4px; }
.currency-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-weight: 900; font-size: 14px; box-shadow: 0 3px 8px var(--field-shadow); }
.currency-pill__icon { font-size: 16px; line-height: 1; }
.currency-pill--gold { background: linear-gradient(135deg, #ffd54a, #f5a623); color: #5b3b00; }
.currency-pill--gem  { background: linear-gradient(135deg, #7ad0ff, #5b6bff); color: #06204b; }
.profile-currency { display: flex; gap: 10px; margin-top: 4px; }
.profile-currency .currency-pill { font-size: 15px; padding: 5px 13px; }
.daily-day__currency { font-size: 10px; font-weight: 800; color: var(--accent-2); margin-top: 2px; }
.daily-modal__currency { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }

/* Окно выбора награды за рубеж (бесконечный режим) */
.endless-reward__content { text-align: center; max-width: 420px; }
.endless-reward__gift { font-size: 60px; line-height: 1; margin-bottom: 4px; animation: daily-gift-bob 2.2s ease-in-out infinite; filter: drop-shadow(0 8px 16px var(--field-shadow)); }
.endless-reward__text { font-size: 14px; font-weight: 700; color: var(--muted); margin: 6px 0 16px; }
.endless-reward__options { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.endless-reward-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-width: 110px; padding: 18px 14px; cursor: pointer; font-family: inherit;
    border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 18px; background: var(--panel-soft);
    box-shadow: 0 6px 16px var(--field-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.endless-reward-card:hover { transform: translateY(-4px) scale(1.05); border-color: var(--accent); box-shadow: 0 12px 26px var(--field-shadow), 0 0 0 3px rgba(255, 159, 28, 0.35); }
.endless-reward-card:active { transform: translateY(-1px) scale(0.98); }
.endless-reward-card__icons { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.cur-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-weight: 900; font-size: 14px; }
.cur-pill--gold { background: linear-gradient(135deg, #ffd54a, #f5a623); color: #5b3b00; }
.cur-pill--gem  { background: linear-gradient(135deg, #7ad0ff, #5b6bff); color: #06204b; }

/* Увеличенные картинки бонусов */
.bonus-slot { width: 92px; height: 92px; }
.bonus-slot__img { width: 58px; height: 58px; }
.bonus-slot__icon { font-size: 42px; line-height: 1; }
.bonus-chip__img { width: 46px; height: 46px; }
.bonus-chip__emoji { width: 46px; height: 46px; }
.bonus-chip--sm .bonus-chip__img { width: 30px; height: 30px; border-radius: 7px; }
.bonus-chip--sm .bonus-chip__emoji { width: 30px; height: 30px; }
.bonus-chip--lg .bonus-chip__img { width: 66px; height: 66px; border-radius: 14px; }

/* Интерактив: наведение + кнопка зума */
.bonus-slot--filled { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.bonus-slot--filled:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 22px var(--field-shadow), 0 0 0 3px var(--bonus-color); }
.bonus-slot__zoom {
    position: absolute; top: 3px; right: 3px;
    width: 22px; height: 22px; border: none; border-radius: 50%;
    background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
    opacity: 0.92; transition: transform 0.15s ease, background 0.15s ease;
}
.bonus-slot__zoom:hover { transform: scale(1.18); background: var(--accent); }
.bonus-chip { cursor: pointer; transition: transform 0.15s ease; }
.bonus-chip:hover { transform: scale(1.16); z-index: 2; }
.bonus-chip--sm:hover { transform: scale(1.28); }
.daily-day__bonuses .bonus-chip:hover { transform: scale(1.3); }

/* Модалка зума бонуса */

/* Лёгкая анимация «всплеска» валюты при получении награды */
.currency-pill--pop { animation: cur-pop 0.6s ease; }
@keyframes cur-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.28); box-shadow: 0 0 16px 3px rgba(255, 215, 74, 0.8); }
    100% { transform: scale(1); }
}

/* Переходящее меню наград за уровень (ступени по звёздам) */
.star-rewards { display: flex; gap: 10px; justify-content: center; margin: 6px 0 4px; flex-wrap: wrap; }
.star-reward {
    flex: 1 1 0; min-width: 92px; max-width: 132px; padding: 12px 8px; border-radius: 16px;
    background: var(--panel-soft); border: 2px solid transparent; text-align: center;
    display: flex; flex-direction: column; gap: 6px; align-items: center; transition: all 0.2s ease;
}
.star-reward__stars { font-size: 20px; letter-spacing: 1px; color: var(--muted); }
.star-reward__cur { display: flex; flex-direction: column; gap: 3px; font-weight: 900; font-size: 13px; }
.star-reward__gold { color: #b9791a; }
.star-reward__gem { color: #3f54c4; }
.star-reward--earned {
    border-color: rgba(43, 191, 90, 0.7);
    background: linear-gradient(160deg, rgba(43, 191, 90, 0.18), var(--panel-soft));
    box-shadow: 0 6px 18px rgba(43, 191, 90, 0.3);
    transform: translateY(-4px) scale(1.04);
}
.star-reward--earned .star-reward__stars { color: #2bbf5a; }
.star-reward__flag { font-size: 11px; font-weight: 900; color: #2bbf5a; text-transform: uppercase; letter-spacing: 0.04em; }
.star-reward--pop { animation: star-pop 0.7s ease; }
@keyframes star-pop {
    0%   { transform: translateY(-4px) scale(1.04); }
    45%  { transform: translateY(-10px) scale(1.14); box-shadow: 0 0 22px 4px rgba(43, 191, 90, 0.6); }
    100% { transform: translateY(-4px) scale(1.04); }
}

/* Уважение к prefers-reduced-motion: отключаем новые пульсации/всплески */
@media (prefers-reduced-motion: reduce) {
    .ach--unclaimed, .tab-badge--pulse, .ach--claiming, .currency-pill--pop, .star-reward--pop { animation: none !important; }
    .ach--unclaimed { box-shadow: none; }
    .star-reward--earned { transform: none; }
}

.bonus-detail { max-width: 360px; text-align: center; }
.bonus-detail__body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 18px 22px; }
.bonus-detail__img { width: 150px; height: 150px; border-radius: 20px; object-fit: cover; background: #fff; box-shadow: 0 12px 34px var(--field-shadow); }
.bonus-detail__what { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.bonus-detail__desc { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.45; max-width: 300px; }


/* ===== COMBO BAR: шкала комбо с таймером (5 c) ===== */
.combo-bar {
    position: relative;
    width: 100%;
    max-width: 260px;
    margin: 0 auto 6px;
    padding: 6px 12px 9px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
    border: 2px solid rgba(255,255,255,0.4);
    box-shadow: 0 6px 18px rgba(0,0,0,0.30), inset 0 0 12px rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    text-align: center;
    transform-origin: center top;
    transition: opacity .25s ease;
}
.combo-bar[hidden] {
    display: block;          /* резервируем место, чтобы поле не «прыгало» при появлении комбо */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.combo-bar__label {
    font-family: "Fredoka", "Comfortaa", "Arial", sans-serif;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: .04em;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.combo-bar__track {
    margin-top: 5px;
    height: 9px;
    border-radius: 999px;
    background: rgba(0,0,0,0.30);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.55);
}
.combo-bar__fill {
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffe14d, #ff8a1f);
    box-shadow: 0 0 10px rgba(255,170,40,0.85);
    transition: width .12s linear;
}
.combo-bar--warm  .combo-bar__fill { background: linear-gradient(90deg, #ffd54a, #ff8a1f); }
.combo-bar--fire  .combo-bar__fill { background: linear-gradient(90deg, #ff9f43, #ff4d4d); box-shadow: 0 0 12px rgba(255,80,80,0.9); }
.combo-bar--hot   .combo-bar__fill { background: linear-gradient(90deg, #ff5d7a, #b14bff); box-shadow: 0 0 16px rgba(177,75,255,0.95); }
.combo-bar--pop { animation: combo-bar-pop .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes combo-bar-pop {
    0%   { transform: scale(.7) translateY(-8px); opacity: .15; }
    60%  { transform: scale(1.08) translateY(0);   opacity: 1; }
    100% { transform: scale(1) translateY(0);       opacity: 1; }
}
.level-detail__reward-title {
    margin: 4px 0 2px;
    font-weight: 800;
    font-size: 14px;
    color: var(--muted);
    text-align: center;
}
/* ============================================================
   MOBILE FIX LAYER (< 760px): устраняем вылезание интерфейса
   ============================================================ */
@media (max-width: 759px) {

    /* --- Модалки: всё, что выше экрана — скроллится внутри --- */
    .modal { padding: 12px; }
    .modal__content {
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        scrollbar-width: none;
    }
    .modal__content::-webkit-scrollbar { width: 0; height: 0; display: none; }
    .faq-modal-content { max-width: min(92vw, 480px); }
    .faq-content { overflow-y: auto; min-height: 0; scrollbar-width: none; }
    .faq-content::-webkit-scrollbar { width: 0; height: 0; display: none; }

    /* --- Меню на мобильном: непрозрачный фон. Полупрозрачный слой (0.45)
           просвечивал до фон-фото игры с кристаллами — выглядело так,
           будто на заднем плане запущен уровень. На ПК (>=760px) фон
           уже непрозрачный — здесь делаем в том же стиле. --- */
    .main-menu {
        background:
            radial-gradient(60% 40% at 15% 6%, rgba(255, 95, 162, 0.5), transparent 70%),
            radial-gradient(55% 42% at 88% 12%, rgba(106, 92, 255, 0.5), transparent 70%),
            linear-gradient(160deg, #2b1a63 0%, #5a2a8f 45%, #9b2f7a 100%);
    }

    /* --- Вкладки меню: перенос строки вместо вылезания за панель --- */
    .menu-tabs { flex-wrap: wrap; justify-content: center; }
    .menu-tab-btn { padding: 7px 12px; font-size: 13px; }

    /* --- Меню на мобильном: убираем «контейнер в контейнере».
           На ПК вкладки-кнопки выглядят хорошо, а на узком экране
           белая панель + серая полоса + белые кнопки сливаются в кашу.
           Делаем полосу вкладок прозрачной, кнопки — плоскими,
           выделяется только активная пилюля. --- */
    .menu-tabs {
        background: transparent;
        padding: 2px 0;
        border-radius: 0;
        gap: 4px;
    }
    .menu-tab-btn {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        padding: 8px 13px;
    }
    .menu-tab-btn:hover { background: rgba(31, 127, 224, 0.08); }
    .menu-tab-btn--active {
        background: linear-gradient(180deg, var(--candy-blue), var(--candy-blue-d));
        border-color: var(--candy-blue-d);
        box-shadow: 0 3px 0 var(--candy-blue-d);
    }

    /* --- Сетка уровней: компактнее на узких экранах --- */
    .level-grid { gap: 8px; padding: 10px; }

    /* --- Панель бонусов под полем: влезает в 360px --- */
    .bonuses { gap: 8px; flex-wrap: wrap; }
    .bonus-vessel-wrap { padding: 2px; }
    .bonus-vessel { width: 80px; height: 80px; }
    .bonus-vessel__label { font-size: 12px; }
    /* аура и кольцо центрируются на уменьшенном орбе */
    .bonus-vessel-wrap::before { width: 116px; height: 116px; top: 42px; }
    .bonus-vessel-wrap::after  { width: 100px; height: 100px; top: 42px; }
    .bonus-slot { width: 62px; height: 62px; }
    .bonus-slot__icon svg { width: 22px; height: 22px; }
    .bonus-slot__icon { font-size: 22px; }
    .bonus-slot__img { width: 34px; height: 34px; }

    /* --- Окошко цели: компактнее --- */
    .goal-box { padding: 6px 10px; }
    .goal-box__num { font-size: 30px; }
    .goal-box__unit { font-size: 14px; }
    .goal-box__level { font-size: 14px; }
    .goal-box__score .score-counter { font-size: 16px; }

    /* --- Магазин: карточки не распирает --- */
    .shop-card { gap: 8px; padding: 10px 12px; }
    .shop-card__buy { padding: 7px 10px; font-size: 12px; }

    /* --- Комбо-надпись на поле: не шире поля --- */
    .combo-indicator { font-size: 24px; }
}

/* --- Очень узкие экраны (iPhone SE и т.п.) --- */
@media (max-width: 380px) {
    .bonuses { gap: 6px; }
    .bonus-vessel { width: 72px; height: 72px; }
    .bonus-vessel-wrap::before { width: 104px; height: 104px; top: 38px; }
    .bonus-vessel-wrap::after  { width: 90px; height: 90px; top: 38px; }
    .bonus-slot { width: 54px; height: 54px; }
    .bonus-slot__icon svg { width: 19px; height: 19px; }
    .bonus-slot__img { width: 30px; height: 30px; }
    .level-grid { gap: 6px; padding: 8px; }
    .level-btn__num { font-size: 22px; }
    .goal-box__num { font-size: 24px; }
}

/* --- Телефон в ландшафте: поле было крошечным (100dvh - 14rem) --- */
@media (max-height: 480px) and (orientation: landscape) {
    .play-area { padding: 6px 12px; gap: 8px; }
    .play-center { gap: 6px; }
    .play-side--left, .play-side--right { gap: 6px; }
    .game-field {
        width: min(100%, calc(100dvh - 7rem));
        max-height: calc(100dvh - 7rem);
    }
    .play-center .timer { max-width: min(100%, calc(100dvh - 7rem)); }
    .goal-box { padding: 4px 10px; }
    .goal-box__num { font-size: 20px; }
    .goal-box__unit { font-size: 12px; }
    .bonuses { gap: 6px; }
    .bonus-vessel { width: 56px; height: 56px; }
    .bonus-vessel-wrap::before { width: 84px; height: 84px; top: 30px; }
    .bonus-vessel-wrap::after  { width: 72px; height: 72px; top: 30px; }
    .bonus-slot { width: 46px; height: 46px; }
    .bonus-slot__icon svg { width: 17px; height: 17px; }
    .bonus-slot__img { width: 26px; height: 26px; }
    .combo-indicator { font-size: 20px; }
}

/* ============================================================
   DESIGN POLISH LAYER — глубокая candy-полировка
   (добавляется последним: перекрывает базовые правила той же специфичности)
   ============================================================ */

/* --- Мягкая зернистость + виньетка поверх всего экрана
       (body::after уже занят фоновыми блобами — используем ::before) --- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0.028;
    background-image:
        radial-gradient(ellipse at 50% 42%, transparent 58%, rgba(30, 10, 50, 0.5) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 100% 100%, 120px 120px;
}

/* --- Игровое поле: толстая «конфетная» рамка --- */
.app-container > .game-field, .game-field {
    box-sizing: border-box;
    border: 6px solid #fff;
    border-radius: 26px;
    box-shadow:
        inset 0 0 0 3px rgba(255, 214, 240, 0.65),
        0 8px 0 rgba(123, 77, 255, 0.22),
        0 20px 44px var(--field-shadow);
}
canvas { border-radius: 20px; }

/* --- Таймер: анимированные конфетные полоски + блик --- */
.play-center .timer, .goal-box .timer {
    position: relative;
    height: 16px;
    border-width: 3px;
}
.timer_filler {
    background-image:
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.35) 0 8px, transparent 8px 16px),
        linear-gradient(90deg, var(--accent), var(--good));
    animation: timer-stripes 0.9s linear infinite;
}
@keyframes timer-stripes {
    to { background-position: 22.6px 0, 0 0; }
}
.timer::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.5) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: timer-shine 2.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes timer-shine {
    0%, 55% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* --- Окошко цели: стикер с лёгким наклоном (НЕ на поле — наклон
       поля ломал бы координаты тапа через getBoundingClientRect) --- */
.goal-box {
    border-width: 3px;
    border-color: #fff;
    box-shadow:
        inset 0 0 0 3px var(--goal-accent, #ff5fa2),
        0 5px 0 rgba(255, 95, 162, 0.3),
        0 14px 28px rgba(0, 0, 0, 0.14);
    transform: rotate(-0.6deg);
}
.goal-box__num {
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8), 0 4px 10px rgba(0, 0, 0, 0.18);
}

/* --- Слоты бонусов: цветная кодировка по типу --- */
.bonus-slot { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.bonuses .bonus-slot:nth-child(1) {
    border-color: #35c7e8;
    box-shadow: 0 4px 0 rgba(53, 199, 232, 0.45), 0 8px 16px rgba(0, 0, 0, 0.12);
}
.bonuses .bonus-slot:nth-child(2) {
    border-color: #ff9a3d;
    box-shadow: 0 4px 0 rgba(255, 154, 61, 0.45), 0 8px 16px rgba(0, 0, 0, 0.12);
}
.bonuses .bonus-slot:nth-child(3) {
    border-color: #ff6fb5;
    box-shadow: 0 4px 0 rgba(255, 111, 181, 0.45), 0 8px 16px rgba(0, 0, 0, 0.12);
}
.bonus-slot:hover { transform: translateY(-3px) rotate(-2deg); }
.bonus-slot:active { transform: translateY(0) scale(0.95); }

/* --- Кнопки: объёмный спуск + блик на primary --- */
.button--primary { position: relative; overflow: hidden; }
.button--primary::after {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-20deg);
    transition: left 0.45s ease;
    pointer-events: none;
}
.button--primary:hover::after { left: 120%; }
.button { transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.button:hover { filter: brightness(1.06) saturate(1.05); }

/* --- Иконки-кнопки: живой wiggle --- */
.icon-btn { transition: transform 0.18s ease; }
.icon-btn:hover { transform: rotate(-4deg) scale(1.12); }
.icon-btn:active { transform: scale(0.92); }
.goal-box__tools button:hover svg { animation: wiggle 0.5s ease-in-out; }

/* --- Заголовок меню: градиентный и на мобильном --- */
.main-menu__title {
    background: linear-gradient(180deg, #fff 30%, #ffe9a8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 0 rgba(150, 60, 160, 0.55)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}



/* --- Поле на мобильном: крупнее, чтобы не терялось в пустом пространстве
       между верхней панелью (цель) и нижней (бонусы). 95vw даёт ~370px на
       390-px телефоне вместо прежних ~340px; calc(100dvh - 10rem) —
       страховка, чтобы поле не вылезло за экран на коротких устройствах.
       (после DESIGN POLISH LAYER — чтобы перебить его width) --- */
@media (max-width: 759px) {
    .game-field {
        width: min(95vw, calc(100dvh - 10rem));
        max-width: 100%;
        margin: 0 auto;
    }
    .play-center .timer { width: min(95vw, calc(100dvh - 10rem)); max-width: 100%; }
    /* На мобильном не резервируем место под скрытый COMBO-бар: на узких
       экранах это «невидимая» ~75px-щель, из-за которой поле парило с
       большим зазором сверху. Бар позиционируем абсолютно — он накрывает
       верх поля при появлении, раскладка не «прыгает», зазора сверху нет. */
    .play-center { position: relative; }
    .combo-bar { position: absolute; top: 6px; left: 0; right: 0; z-index: 7; }
}


/* ============================================================
   MOBILE MENU REDESIGN v2 (< 760px) — тёмное стекло, как на ПК.
   Никаких белых контейнеров: панель — цветное стекло на ярком
   градиенте, текст светлый, карточки — стекло с яркими рамками.
   Всё скоупится под .main-menu — модалки игры не затронуты.
   ============================================================ */
@media (max-width: 759px) {
    /* Панель: стеклянная, светлеет текст внутри через переменные */
    .main-menu .main-menu__panel {
        --text: #ffffff;
        --muted: rgba(255, 255, 255, 0.72);
        color: #fff;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
        border: 1px solid rgba(255, 255, 255, 0.35);
        -webkit-backdrop-filter: blur(14px) saturate(1.15);
        backdrop-filter: blur(14px) saturate(1.15);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }
    .main-menu .main-menu__subtitle { color: rgba(255, 255, 255, 0.85); }

    /* Вкладки: тёмная пилюля-полоса, активная — ярко-розовая */
    .main-menu .menu-tabs {
        background: rgba(0, 0, 0, 0.22);
        border-radius: 999px;
        padding: 4px;
        gap: 2px;
    }
    .main-menu .menu-tab-btn {
        color: rgba(255, 255, 255, 0.9) !important;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }
    .main-menu .menu-tab-btn:hover { background: rgba(255, 255, 255, 0.12); }
    .main-menu .menu-tab-btn--active {
        color: #fff !important;
        background: linear-gradient(180deg, #ff6fae, #e8509a);
        border-color: #d63d8a;
        box-shadow: 0 4px 0 #b02f74;
    }

    /* Уровни: сетка-стекло, инфо страниц — светлый текст */
    .main-menu .menu-pagination__info {
        color: #fff;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }
    .main-menu .level-grid {
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.12), 0 10px 24px rgba(0, 0, 0, 0.2);
    }

    /* Бесконечный: стеклянная карточка с голубой рамкой */
    .main-menu .endless-card {
        background: rgba(255, 255, 255, 0.10);
        border: 2px solid rgba(138, 208, 255, 0.55);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    }
    .main-menu .endless-card__desc { color: rgba(255, 255, 255, 0.92); }
    .main-menu .endless-card__best { color: rgba(255, 255, 255, 0.7); }
    .main-menu .endless-card__best b { color: #ffe14d; }

    /* Магазин: стеклянные карточки с золотой рамкой */
    .main-menu .shop-card {
        background: rgba(255, 255, 255, 0.10);
        border: 2px solid rgba(255, 217, 138, 0.6);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    }
    .main-menu .shop-card--can { border-color: #ff9a3d; opacity: 1; }
    .main-menu .shop-card__icon { background: rgba(255, 255, 255, 0.14); }
    .main-menu .shop-card__name { color: #fff; }
    .main-menu .shop-card__desc { color: rgba(255, 255, 255, 0.72); }
    .main-menu .shop-card__owned { color: #ffe14d; }

    /* Настройки: стеклянные строки */
    .main-menu .settings-row {
        background: rgba(255, 255, 255, 0.10);
        border: 2px solid rgba(215, 201, 255, 0.5);
        border-radius: 14px;
        padding: 10px 14px;
        box-sizing: border-box;
    }
    .main-menu .settings-list { gap: 8px; }
    .main-menu .settings-row .select {
        background: rgba(0, 0, 0, 0.25);
        color: #fff;
        border: 2px solid rgba(215, 201, 255, 0.5);
        font-weight: 700;
    }
    .main-menu .settings-sound-toggle {
        background: rgba(255, 255, 255, 0.14);
        color: #8ad0ff;
        border-color: #8ad0ff;
    }

    /* Профиль: стеклянная карточка с мятной рамкой */
    .main-menu .profile-card,
    .main-menu .profile-auth {
        background: rgba(255, 255, 255, 0.10);
        border: 2px solid rgba(169, 232, 201, 0.55);
        border-radius: 16px;
        padding: 14px;
        box-sizing: border-box;
    }
    .main-menu .profile-name { color: #fff; }

    /* Неактивные кнопки: стекло с читаемым светлым текстом */
    .main-menu .button:disabled,
    .main-menu .button[disabled] {
        background: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.65);
        border: 2px solid rgba(255, 255, 255, 0.25);
        box-shadow: none;
        text-shadow: none;
        opacity: 1;
    }
    .main-menu .shop-card__buy:disabled { opacity: 1; }
}


/* ============================================================
   TOUCH HOVER FIX — на тач-устройствах :hover «залипает» после
   нажатия: кнопка увеличивалась и оставалась увеличенной, а при
   увеличении обрезалась краем панели. На тач ховер-трансформации
   выключаем полностью; на ПК (мышь) они продолжают работать.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
    .button:hover,
    .level-btn:hover,
    .icon-btn:hover,
    .bonus-slot:hover,
    .menu-tab-btn:hover,
    .shop-card__buy:hover,
    #new-game-button:hover,
    .goal-box__tools button:hover {
        transform: none;
    }
    /* Нажатие на тач всё же даёт отклик — сжатие вместо увеличения */
    .button:active { transform: scale(0.97); }
}

/* ============================================================
   PAGINATION CONTRAST (mobile) — кнопки «предыдущий/следующий»:
   читаемый текст на любом состоянии, без слияния с фоном.
   ============================================================ */
@media (max-width: 759px) {
    .main-menu .menu-pagination .button,
    .main-menu .menu-pagination .button:disabled {
        color: #fff;
        background: linear-gradient(135deg, #6a5cff, #ff5fa2);
        border: 2px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 5px 0 rgba(90, 60, 200, 0.55), 0 10px 20px rgba(0, 0, 0, 0.3);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        font-weight: 800;
        overflow: visible;
        z-index: 1;
    }
    .main-menu .menu-pagination .button:disabled {
        background: rgba(0, 0, 0, 0.32);
        border-color: rgba(255, 255, 255, 0.3);
        box-shadow: none;
        color: rgba(255, 255, 255, 0.95);
        text-shadow: none;
    }
}


/* ============================================================
   LEGAL NOTE (settings tab) — упоминание T&C и Privacy Policy
   прямо в настройках (плюс существующее в FAQ). Показ нужного
   языка обеспечивает общий механизм body[data-lang] (см. строку ~806).
   ============================================================ */
.settings-legal {
    margin-top: 12px;
    padding: 10px 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
}
.settings-legal a { color: inherit; font-weight: 700; }
@media (max-width: 759px) {
    .main-menu .settings-legal {
        border-top-color: rgba(255, 255, 255, 0.18);
        color: rgba(255, 255, 255, 0.65);
    }
}