:root {
    --font-main: 'Montserrat', sans-serif;
    --color-white: #ffffff;
    --bg-main-gradient: linear-gradient(225.75deg, #bafeff 18.12%, #5ec0bb 50.83%, #b8eeed 82.92%);
    --bg-panel-solid: #598fbf;
    --bg-panel-soft: linear-gradient(92.18deg, rgba(192, 239, 255, 0.55) 0.7%, rgba(63, 160, 194, 0.55) 99.73%);
    --bg-btn-control: rgba(140, 207, 224, 0.35);
    --bg-bottom-panel: linear-gradient(0deg, #598fbf, #598fbf), rgba(102, 117, 232, 0.25);
    --bg-btn-orange: linear-gradient(92.18deg, #f67e28 0.7%, #d1481e 99.73%);
    --bg-btn-green: linear-gradient(92.18deg, #93f628 0.7%, #2d8719 99.73%);
    --bg-empty-cell: linear-gradient(204.07deg, #9f9f9f 14.31%, #6e6e6e 50.35%, #393939 84.38%);
    --shadow-soft: 0 20px 40px rgba(12, 67, 90, 0.2);
    --menu-panel: #4e8fd0;
    --menu-panel-soft: linear-gradient(180deg, #7db5ee 0%, #6aa6e4 100%);
    --menu-card: #8bc5ff;
    --menu-card-strong: linear-gradient(180deg, #8ec7ff 0%, #7cb7f0 100%);
    --menu-leaderboard: linear-gradient(90deg, #4cc0ea 0%, #58d2ff 100%);
    --menu-gallery: linear-gradient(90deg, #b482ef 0%, #c595ff 100%);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #08161d;
    font-family: var(--font-main);
    touch-action: none;
}

body {
    position: relative;
    color: var(--color-white);
    user-select: none;
    -webkit-user-drag: none;
    -webkit-overflow-scrolling: auto;
}

button {
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    cursor: pointer;
}

.game-screen {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1920px;
    height: 1080px;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    overflow: hidden;
    background:
        url('assets/background_pattern.png') center/cover no-repeat,
        var(--bg-main-gradient);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
}

.game-logo {
    width: 447px;
    height: 329px;
    align-self: center;
    object-fit: contain;
}

.menu-wrapper {
    position: absolute;
    left: 77px;
    top: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 935px;
}

.main-panel,
.side-panel,
.bottom-actions-panel {
    background: var(--bg-panel-solid);
}

.main-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding: 20px;
    border-radius: 35px;
    background: var(--menu-panel);
    box-shadow: 0 4px 4px rgba(43, 110, 178, 0.25), 0 18px 36px rgba(59, 118, 189, 0.22);
}

.difficulty-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    min-height: 213px;
    padding: 15px 20px;
    border-radius: 25px;
    background: var(--menu-panel-soft);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.difficulty-title {
    margin: 0;
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: center;
}

.difficulty-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
}

.btn-diff,
.stat-item {
    background: var(--bg-panel-soft);
}

.btn-diff {
    flex: 1 1 0;
    height: 132px;
    border-radius: 20px;
    background: var(--menu-card-strong);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.15s ease, filter 0.2s ease;
}

.btn-diff:hover,
.btn-leaderboard:hover,
.btn-shortcut:hover,
.btn-control:hover,
.menu-btn-bottom:hover,
.btn-action:hover {
    filter: brightness(1.08);
}

.btn-diff:active,
.btn-leaderboard:active,
.btn-shortcut:active,
.btn-control:active,
.menu-btn-bottom:active,
.btn-action:active {
    transform: scale(0.97);
}

.menu-shortcuts {
    display: flex;
    gap: 12px;
    width: 100%;
}

.btn-shortcut,
.btn-leaderboard {
    flex: 1 1 0;
    height: 104px;
    border-radius: 55px;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, filter 0.2s ease;
}

.btn-shortcut--leaderboard {
    background: var(--menu-leaderboard);
}

.btn-shortcut--gallery {
    background: var(--menu-gallery);
}

.language-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 699px;
    height: 108px;
    padding: 12px 12px 12px 24px;
    margin: 0 auto;
    border-radius: 25px;
    background: var(--menu-panel);
    box-shadow: 0 4px 4px rgba(43, 110, 178, 0.25), 0 14px 28px rgba(59, 118, 189, 0.18);
}

.language-panel__label {
    flex: 0 0 96px;
    width: 96px;
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: 0.01em;
    text-align: left;
}

.language-panel__options {
    display: flex;
    gap: 10px;
    width: 540px;
    flex: 0 0 540px;
    justify-content: space-between;
}

.language-option {
    flex: 0 0 100px;
    width: 100px;
    height: 84px;
    border-radius: 20px;
    background: var(--menu-card);
    font-size: 20px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.language-option--active {
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.38);
}

.service-panel {
    display: flex;
    gap: 12px;
    width: 452px;
    height: 108px;
    margin: 0 auto;
}

.menu-btn-bottom,
.btn-control {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 35px;
    background: #4e8fd080;
    transition: transform 0.15s ease, filter 0.2s ease;
}

.audio-toggle {
    position: relative;
}

.audio-toggle[data-audio-state='off'] .btn-icon,
.audio-toggle[data-audio-state='off'] .icon-small {
    filter: grayscale(1) brightness(1.15);
    opacity: 0.75;
}

.menu-btn-bottom {
    width: 220px;
    height: 108px;
    padding: 12px 10px;
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    text-align: center;
}

.icon-small,
.btn-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex: 0 0 auto;
}

.character-img {
    position: absolute;
    right: 0;
    top: 44px;
    width: auto;
    height: 1036px;
    object-fit: contain;
    pointer-events: none;
}

#menu-screen.is-result-mode .menu-wrapper,
#menu-screen.is-result-mode .character-img {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.top-left-controls {
    position: absolute;
    left: 82px;
    top: 51px;
    display: flex;
    gap: 24px;
    width: 364px;
    height: 108px;
}

.btn-control {
    flex: 1 1 0;
    font-size: 24px;
    font-weight: 700;
}

.side-panel {
    position: absolute;
    top: calc(50% - 126px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 364px;
    height: 252px;
    padding: 12px;
    border-radius: 35px;
    box-shadow: var(--shadow-soft);
}

.left-panel {
    left: 82px;
}

.right-panel {
    left: 1474px;
}

.stat-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 108px;
    border-radius: 25px;
    overflow: hidden;
}

.stat-label,
.stat-value {
    position: relative;
    z-index: 1;
}

.stat-label {
    margin-bottom: 4px;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
}

.stat-value {
    font-size: 48px;
    line-height: 59px;
}

.stat-icon,
.action-icon {
    position: absolute;
    width: 148px;
    height: 148px;
    object-fit: contain;
    transform: rotate(-16.9deg);
    pointer-events: none;
}

.right-icon {
    top: -24px;
    right: -18px;
    opacity: 0.82;
}

.grid-board {
    position: absolute;
    left: 512px;
    top: 28px;
    display: grid;
    gap: 8px;
    width: 896px;
    height: 896px;
    padding: 36px;
    border-radius: 50px;
    background: var(--bg-panel-solid);
    box-shadow: var(--shadow-soft);
}

.grid-cell {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(17, 54, 77, 0.18);
    transition: transform 0.12s ease, filter 0.2s ease;
}

.grid-cell:hover {
    filter: brightness(1.04);
}

.grid-cell:active {
    transform: scale(0.96);
}

.grid-cell__number {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 54px;
    height: 54px;
    padding: 0 16px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(193, 245, 255, 0.86) 100%);
    box-shadow:
        0 10px 20px rgba(18, 70, 94, 0.24),
        inset 0 2px 8px rgba(255, 255, 255, 0.7);
    color: #2a7296;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(6px);
    transform: translate(-50%, -50%);
}

.grid-cell__number::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.empty-cell {
    background: var(--bg-empty-cell) !important;
    box-shadow: inset 0 8px 18px rgba(0, 0, 0, 0.25);
}

.original-overlay {
    position: absolute;
    left: 512px;
    top: 28px;
    width: 896px;
    height: 896px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.original-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.original-overlay__scrim {
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background:
        linear-gradient(180deg, rgba(19, 64, 89, 0.2) 0%, rgba(11, 39, 54, 0.52) 100%);
    backdrop-filter: blur(6px);
}

.original-overlay__card {
    position: relative;
    width: calc(100% - 72px);
    height: calc(100% - 72px);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(89, 143, 191, 0.12);
    border: 0;
    box-shadow: 0 24px 38px rgba(11, 53, 73, 0.18);
}

.original-overlay__image {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16);
}

.level-transition,
.session-result {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.32s ease, visibility 0.32s ease;
}

.level-transition {
    z-index: 30;
    background: rgba(5, 11, 18, 0.96);
    flex-direction: column;
    gap: 44px;
}

.level-transition.is-visible,
.session-result.is-visible {
    opacity: 1;
    visibility: visible;
}

.level-transition.is-visible {
    pointer-events: auto;
}

.level-transition__text {
    color: #ffffff;
    font-size: 72px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 10px 30px rgba(255, 255, 255, 0.16);
}

.level-transition__button {
    min-width: 360px;
    height: 96px;
    padding: 0 56px;
    border-radius: 28px;
    background: var(--bg-btn-orange);
    box-shadow: 0 18px 34px rgba(71, 31, 15, 0.24);
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
    text-transform: uppercase;
}

.level-transition__button:active {
    transform: translateY(2px);
}

.session-result {
    z-index: 35;
    background: transparent;
}

.session-result.is-visible {
    pointer-events: auto;
}

.session-result__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 15, 25, 0.22);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.session-result__content {
    position: relative;
    z-index: 1;
    width: min(1220px, calc(100% - 180px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    transform: translateY(38px);
}

.session-result__hero {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.session-result__title {
    margin: 0;
    font-size: 102px;
    line-height: 1.06;
    text-align: center;
    text-shadow: 0 14px 34px rgba(8, 28, 43, 0.28);
}

.session-result__spacer {
    height: 8px;
}

.session-result__result-panel {
    width: min(940px, 100%);
    padding: 32px;
    border-radius: 46px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%),
        linear-gradient(180deg, rgba(89, 143, 191, 0.82) 0%, rgba(57, 102, 140, 0.88) 100%);
    box-shadow:
        0 28px 58px rgba(6, 28, 43, 0.28),
        inset 0 0 0 2px rgba(255, 255, 255, 0.24),
        inset 0 16px 24px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
}

.session-result__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.session-result__stat {
    min-height: 214px;
    padding: 28px 26px;
    border-radius: 34px;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.16), transparent 58%),
        linear-gradient(92.18deg, rgba(192, 239, 255, 0.48) 0.7%, rgba(63, 160, 194, 0.44) 99.73%);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.18),
        0 12px 28px rgba(12, 53, 74, 0.14);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.session-result__label {
    display: block;
    margin-bottom: 14px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.session-result__value {
    display: block;
    font-size: 72px;
    line-height: 1;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 10px 20px rgba(17, 66, 91, 0.18);
}

.session-result__rank-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 120px;
}

.session-result__rank-line-text {
    max-width: 560px;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
    text-align: center;
    text-shadow: 0 10px 20px rgba(10, 40, 56, 0.12);
}

.session-result__rank-line-text [data-role='percent-text'] {
    display: inline-block;
    margin: 0 4px;
    font-size: 52px;
    line-height: 0.9;
    color: #ffffff;
    text-shadow:
        0 12px 24px rgba(11, 55, 80, 0.22),
        0 0 18px rgba(142, 199, 255, 0.28);
    vertical-align: -4px;
}

.session-result__actions {
    width: min(940px, 100%);
    display: flex;
    gap: 20px;
}

.session-result__button {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 102px;
    padding: 0 28px;
    border-radius: 32px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    overflow: hidden;
    text-align: center;
    transition: transform 0.15s ease, filter 0.2s ease;
}

.session-result__button:hover {
    filter: brightness(1.08);
}

.session-result__button:active {
    transform: scale(0.97);
}

.session-result__button--menu {
    background: var(--bg-btn-orange);
    box-shadow: 0 18px 30px rgba(209, 72, 30, 0.26);
}

.session-result__button--leaderboard {
    background: rgba(89, 143, 191, 0.42);
    box-shadow: 0 14px 24px rgba(14, 58, 82, 0.2);
    backdrop-filter: blur(10px);
}

.session-result__button::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

.hint-modal {
    position: absolute;
    inset: 0;
    z-index: 34;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, visibility 0.24s ease;
}

.hint-modal.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hint-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 15, 25, 0.56);
    backdrop-filter: blur(14px);
}

.hint-modal__card {
    position: relative;
    width: 760px;
    padding: 38px;
    border-radius: 48px;
    background: linear-gradient(180deg, rgba(89, 143, 191, 0.98) 0%, rgba(57, 102, 140, 0.98) 100%);
    box-shadow: 0 24px 60px rgba(6, 28, 43, 0.34);
}

.hint-modal__title {
    margin: 0 0 18px;
    font-size: 46px;
    line-height: 1.12;
    text-align: center;
}

.hint-modal__text {
    margin: 0 0 28px;
    font-size: 35px;
    line-height: 1.2;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 400; /* 100 - очень тонкий, 300 - легкий/тонкий (рекомендуется для читаемости) */
}

.hint-modal__actions {
    display: flex;
    gap: 16px;
}

.hint-modal__button {
    position: relative;
    flex: 1 1 0;
    display: block;
    height: 98px;
    border-radius: 30px;
    font-size: 30px;
    font-weight: 700;
    overflow: hidden;
    background-clip: padding-box;
    transition: transform 0.15s ease, filter 0.2s ease, opacity 0.2s ease;
}

.hint-modal__button:hover {
    filter: brightness(1.08);
}

.hint-modal__button:active {
    transform: scale(0.97);
}

.hint-modal__button:disabled {
    cursor: default;
    opacity: 0.72;
    filter: saturate(0.86);
}

.hint-modal__button:disabled:active {
    transform: none;
}

.hint-modal__button--watch {
    background: var(--bg-btn-orange);
    box-shadow: 0 10px 18px rgba(109, 33, 11, 0.18);
}

.hint-modal__button--cancel {
    background: rgba(192, 239, 255, 0.18);
    color: rgba(255, 255, 255, 0.72);
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 6px rgba(255, 255, 255, 0.03);
}

.empty-cell:hover,
.empty-cell:active {
    filter: none;
    transform: none;
}

.bottom-actions-panel {
    position: absolute;
    left: 602px;
    top: 936px;
    display: flex;
    gap: 12px;
    width: 716px;
    height: 132px;
    padding: 12px;
    border-radius: 35px;
    box-shadow: var(--shadow-soft);
}

.btn-action {
    position: relative;
    flex: 1 1 0;
    display: block;
    height: 108px;
    padding-left: 30px;
    border: 0;
    border-radius: 35px;
    overflow: hidden;
    background-clip: padding-box;
    text-align: left;
    transition: transform 0.15s ease, filter 0.2s ease;
}

.btn-action::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.24);
    pointer-events: none;
}

.btn-orange {
    background: var(--bg-btn-orange);
}

.btn-green {
    background: var(--bg-btn-green);
}

.btn-text {
    position: relative;
    z-index: 1;
    display: inline-flex;
    height: 100%;
    align-items: center;
    font-size: 24px;
    line-height: 29px;
    font-weight: 700;
}

.action-icon {
    top: -20px;
    right: 12px;
}

.gallery-back-btn:hover,
.gallery-nav:hover {
    filter: brightness(1.08);
}

.gallery-back-btn:active,
.gallery-nav:active {
    transform: scale(0.97);
}

.gallery-shell {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery-back-btn {
    position: absolute;
    left: 65px;
    top: 50px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 170px;
    height: 108px;
    border-radius: 35px;
    background: rgba(78, 143, 208, 0.5);
    font-size: 24px;
    font-weight: 700;
    transition: transform 0.15s ease, filter 0.2s ease;
}

.gallery-card {
    position: absolute;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 4px rgba(43, 110, 178, 0.49);
}

.gallery-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
    pointer-events: none;
}

.gallery-card__image {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.gallery-card.is-locked .gallery-card__image {
    filter: grayscale(0.2) saturate(0.65) brightness(0.9);
}


.gallery-card--main {
    left: 50%;
    top: 50%;
    width: 873px;
    height: 873px;
    border-radius: 55px;
    transform: translate(-50%, -50%);
}

.gallery-card--side {
    top: 50%;
    width: 485px;
    height: 485px;
    border-radius: 25px;
    transform: translateY(-50%);
}

.gallery-card--side .gallery-card__image {
    opacity: 0.38;
}

.gallery-card--left {
    left: -249px;
}

.gallery-card--right {
    right: -249px;
}

.gallery-nav {
    position: absolute;
    top: 469px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 142px;
    height: 142px;
    border-radius: 71px;
    background: rgba(78, 143, 208, 0.5);
    transition: transform 0.15s ease, filter 0.2s ease;
}

.gallery-nav--left {
    left: 337px;
}

.gallery-nav--right {
    right: 338px;
}

.gallery-nav__arrow {
    display: block;
    font-size: 84px;
    line-height: 1;
    font-weight: 400;
    transform: translateY(-4px);
}

.leaderboard-shell {
    position: relative;
    width: 100%;
    height: 100%;
}

.leaderboard-back-btn:hover {
    filter: brightness(1.08);
}

.leaderboard-back-btn:active {
    transform: scale(0.97);
}

.leaderboard-back-btn {
    position: absolute;
    left: 65px;
    top: 50px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 170px;
    height: 108px;
    border-radius: 35px;
    background: rgba(78, 143, 208, 0.5);
    font-size: 24px;
    font-weight: 700;
    transition: transform 0.15s ease, filter 0.2s ease;
}

.leaderboard-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 960px;
    min-height: 760px;
    padding: 42px;
    border-radius: 48px;
    background: var(--menu-panel);
    box-shadow: 0 24px 60px rgba(6, 28, 43, 0.28);
    transform: translate(-50%, -50%);
}

.leaderboard-title {
    margin: 0 0 28px;
    font-size: 56px;
    line-height: 1.1;
    text-align: center;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.leaderboard-row,
.leaderboard-status {
    min-height: 78px;
    border-radius: 25px;
    background: var(--menu-card-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 110px 1fr 180px;
    align-items: center;
    gap: 18px;
    padding: 0 26px;
    font-size: 30px;
}

.leaderboard-row__rank {
    color: rgba(255, 255, 255, 0.74);
}

.leaderboard-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-row__score {
    text-align: right;
}

.leaderboard-status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    font-size: 30px;
    text-align: center;
}

body.portrait .gallery-back-btn {
    left: 337px;
    top: 185px;
    width: 407px;
}

body.portrait .gallery-card--main {
    width: 872px;
    height: 872px;
}

body.portrait .gallery-card--side {
    top: calc(50% - 28.5px);
}

body.portrait .gallery-card--left {
    left: -436px;
}

body.portrait .gallery-card--right {
    right: -436px;
}

body.portrait .gallery-nav {
    top: 1503px;
}

body.portrait .gallery-nav--left {
    left: 286px;
}

body.portrait .gallery-nav--right {
    right: 286px;
}

body.portrait .leaderboard-back-btn {
    left: 337px;
    top: 185px;
    width: 407px;
}

body.portrait .leaderboard-panel {
    width: 900px;
    min-height: 1040px;
    padding: 44px;
    border-radius: 52px;
}

body.portrait .leaderboard-title {
    font-size: 60px;
    margin-bottom: 34px;
}

body.portrait .leaderboard-row {
    grid-template-columns: 100px 1fr 170px;
    min-height: 92px;
    font-size: 30px;
}

body.portrait .leaderboard-status {
    min-height: 92px;
    font-size: 32px;
}
body.portrait .game-screen {
    width: 1080px;
    height: 1920px;
}

body.portrait .menu-wrapper {
    left: 92px;
    top: 160px;
    width: 896px;
    gap: 24px;
}

body.portrait .game-logo {
    width: 420px;
    height: 308px;
}

body.portrait .main-panel {
    border-radius: 40px;
    padding: 18px;
}

body.portrait .difficulty-block {
    min-height: auto;
    padding: 18px;
}

body.portrait .difficulty-buttons {
    flex-wrap: wrap;
}

body.portrait .btn-diff {
    width: calc(50% - 6px);
}

body.portrait .bottom-actions {
    width: 100%;
    gap: 12px;
}

body.portrait .service-panel {
    width: 100%;
    gap: 12px;
}

body.portrait .menu-btn-bottom {
    width: calc(50% - 6px);
}

body.portrait .character-img {
    display: none;
}

body.portrait .menu-shortcuts {
    flex-direction: column;
}

body.portrait .btn-shortcut,
body.portrait .btn-leaderboard {
    width: 100%;
}

body.portrait .language-panel {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    margin-right: 0;
}

body.portrait .language-panel__label {
    text-align: center;
}

body.portrait .language-panel__options {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
}

body.portrait .language-option {
    width: calc(33.333% - 7px);
}

body.portrait .top-left-controls {
    left: 92px;
    top: 67px;
    width: 896px;
    height: 108px;
    gap: 24px;
}

body.portrait .side-panel {
    left: 92px;
    display: flex;
    flex-direction: row;
    width: 896px;
    height: 132px;
    padding: 12px;
    gap: 12px;
}

body.portrait .left-panel {
    top: 278px;
}

body.portrait .right-panel {
    top: 1354px;
    left: 182px;
    width: 716px;
}

body.portrait .stat-item {
    flex: 1 1 0;
    height: 108px;
}

body.portrait .grid-board {
    left: 92px;
    top: 434px;
    width: 896px;
    height: 896px;
    padding: 36px;
    gap: 8px;
    border-radius: 50px;
}

body.portrait .original-overlay {
    left: 92px;
    top: 434px;
    width: 896px;
    height: 896px;
}

body.portrait .level-transition__text {
    font-size: 88px;
}

body.portrait .level-transition__button {
    min-width: 480px;
    height: 118px;
    font-size: 42px;
    border-radius: 34px;
}

body.portrait .session-result__title {
    font-size: 88px;
}

body.portrait .session-result__spacer {
    height: 4px;
}

body.portrait .session-result__result-panel {
    width: 100%;
    padding: 24px;
    border-radius: 38px;
}

body.portrait .session-result__stats {
    grid-template-columns: 1fr;
}

body.portrait .session-result__stat {
    min-height: 150px;
    padding: 20px 22px;
    border-radius: 30px;
}

body.portrait .session-result__label {
    margin-bottom: 8px;
    font-size: 23px;
}

body.portrait .session-result__value {
    font-size: 58px;
}

body.portrait .session-result__rank-line-text {
    font-size: 30px;
}

body.portrait .session-result__rank-line-text [data-role='percent-text'] {
    font-size: 58px;
    vertical-align: -5px;
}

body.portrait .session-result__content {
    width: calc(100% - 120px);
    max-height: calc(100% - 180px);
    gap: 18px;
    transform: translateY(0);
}

body.portrait .session-result__actions {
    flex-direction: column;
    width: 100%;
    gap: 14px;
}

body.portrait .session-result__button {
    width: 100%;
    height: 92px;
    font-size: 28px;
}

body.portrait .hint-modal__card {
    width: 900px;
    padding: 44px;
    border-radius: 52px;
}

body.portrait .hint-modal__title {
    font-size: 58px;
}

body.portrait .hint-modal__text {
    font-size: 27px;
}

body.portrait .hint-modal__button {
    height: 116px;
    font-size: 34px;
}

body.portrait .bottom-actions-panel {
    left: 182px;
    top: 1510px;
    width: 716px;
    height: 132px;
}

body.portrait .btn-action {
    height: 108px;
}

body.portrait .btn-text {
    align-items: center;
}

body.portrait .action-icon {
    right: 8px;
}

.language-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 730px;
    height: 108px;
    padding: 12px 12px 12px 24px;
    margin: 0 auto;
    border-radius: 25px;
    background: var(--menu-panel);
    box-shadow: 0 4px 4px rgba(43, 110, 178, 0.25), 0 14px 28px rgba(59, 118, 189, 0.18);
}

.language-panel__label {
    flex: 0 0 140px;
    width: 140px;
    white-space: nowrap;
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: 0.01em;
    text-align: left;
}

body.portrait .language-panel__label {
    text-align: center;
    width: 100%;
    flex: 0 0 auto;
}

/* =========================================================
   ОБНОВЛЕНИЕ ДИЗАЙНА ЭКРАНА ГЕЙМПЛЕЯ (ИЗ FIGMA)
   ========================================================= */

/* Боковые панели */
.side-panel {
    background: #4E8FD0;
    box-shadow: 0px 4px 4px rgba(43, 110, 178, 0.25);
    border-radius: 32px;
}

/* Блоки статистики (Время, Ходы, Уровень, Сложность) */
.stat-item {
    background: linear-gradient(92.18deg, #87C3FF 0.7%, #529EEA 99.73%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Игровое поле */
.grid-board {
    background: #4E8FD0;
    box-shadow: 0px 4px 4px rgba(43, 110, 178, 0.25);
    border-radius: 35px;
}

/* Пустая ячейка (используем !important для перекрытия инлайн/старых стилей) */
.empty-cell {
    background: #2B6EB2 !important;
    box-shadow: inset 0px 0px 10px rgba(31, 93, 156, 0.5) !important;
}

/* Нижняя панель с кнопками подсказок */
.bottom-actions-panel {
    background: linear-gradient(0deg, #4E8FD0, #4E8FD0), rgba(102, 117, 232, 0.25);
    box-shadow: 0px 4px 4px rgba(43, 110, 178, 0.25);
    border-radius: 32px;
}

/* Кнопки "Посмотреть оригинал" и "Нумерация картинок" */
.btn-action {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
}

/* Отключаем старую логику рамки у кнопок */
.btn-action::after {
    display: none;
}

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ: ГЛАВНЫЙ ЭКРАН (УЛУЧШЕННЫЙ UI)
   ========================================================= */

/* Центрируем всё меню целиком */
body.portrait .menu-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 960px; /* Растягиваем почти на всю ширину 1080px */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

/* Увеличиваем логотип, чтобы он не терялся */
body.portrait .game-logo {
    width: 640px;
    height: auto;
    margin-bottom: 20px;
}

/* Главная панель */
body.portrait .main-panel {
    width: 100%;
    padding: 32px;
    border-radius: 48px;
    gap: 28px;
}

body.portrait .difficulty-block {
    padding: 28px;
    border-radius: 36px;
    gap: 24px;
}

body.portrait .difficulty-title {
    font-size: 44px;
}

/* Кнопки сложности в ровную сетку 2x2 */
body.portrait .difficulty-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

body.portrait .btn-diff {
    width: 100%;
    height: 160px;
    font-size: 56px;
    border-radius: 32px;
}

/* Возвращаем Лидерборд и Галерею в один ряд */
body.portrait .menu-shortcuts {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}

body.portrait .btn-shortcut,
body.portrait .btn-leaderboard {
    width: 100%;
    height: 120px;
    font-size: 36px;
    border-radius: 60px;
    flex: 1 1 0;
}

/* Панель языков */
body.portrait .language-panel {
    width: 100%;
    height: auto;
    padding: 24px 32px;
    border-radius: 40px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

body.portrait .language-panel__label {
    width: 100%;
    text-align: center;
    font-size: 36px;
}

body.portrait .language-panel__options {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

/* Кнопки языков */
body.portrait .language-option {
    flex: 1 1 0;
    width: auto;
    height: 96px;
    font-size: 30px;
    border-radius: 24px;
}

/* Нижние сервисные кнопки (Другие игры, Музыка) */
body.portrait .service-panel {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 20px;
    height: auto;
}

body.portrait .menu-btn-bottom {
    width: 100%;
    height: 120px;
    font-size: 32px;
    border-radius: 40px;
    flex: 1 1 0;
    flex-direction: row; /* Иконка и текст в ряд для экономии места по высоте */
    gap: 16px;
}

body.portrait .icon-small {
    width: 36px;
    height: 36px;
}

/* =========================================================
   ТОЧНЫЕ СТИЛИ ИКОНОК И ТЕКСТА ИЗ ФИГМЫ (ГЕЙМПЛЕЙ)
   ========================================================= */

/* Иконки в блоках статистики (Время, Ходы) */
.stat-icon, 
body.portrait .stat-icon {
    position: absolute !important;
    width: 148.77px !important;
    height: 148.77px !important;
    right: -17.77px !important;
    top: -24.39px !important;
    transform: rotate(-16.9deg) !important;
    margin: 0 !important;
}

/* Иконки в нижних кнопках (Оригинал, Нумерация) */
.action-icon, 
body.portrait .action-icon {
    position: absolute !important;
    width: 148.77px !important;
    height: 148.77px !important;
    left: 206.05px !important; /* Ровно как в макете */
    right: auto !important;     /* Сбрасываем старую привязку */
    top: -39px !important;
    transform: rotate(-16.9deg) !important;
    margin: 0 !important;
}

/* Текст внутри нижних кнопок (Оригинал, Нумерация) */
.btn-action .btn-text,
body.portrait .btn-action .btn-text {
    position: absolute !important;
    left: calc(50% - 159px/2 - 27.5px) !important; /* Точная формула из макета */
    top: 25px !important;
    font-size: 24px !important;
    line-height: 110% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    display: block !important;
}

/* Верхние элементы (Выход, Музыка) */
.btn-control {
    gap: 6px !important;
}

.btn-control .btn-icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
}

/* =========================================================
   ИДЕАЛЬНАЯ ЦЕНТРОВКА КАРТИНОК-СТРЕЛОЧЕК В ГАЛЕРЕЕ
   ========================================================= */

/* Делаем выравнивание самой кнопки абсолютно точным */
.gallery-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important; /* Убираем возможные внутренние отступы */
}

/* Центрируем саму картинку стрелки внутри кнопки */
.gallery-nav__arrow {
    display: block !important;
    width: 60px !important;      /* Оптимальный размер для иконки внутри круга 142px */
    height: 60px !important;
    object-fit: contain !important;
    transform: none !important;  /* КРИТИЧНО: убираем translateY(-4px), который косил картинку! */
    margin: 0 auto !important;
    pointer-events: none !important;
}

/* Центрируем саму картинку стрелки внутри кнопки и задаем размер 32x32 */
.gallery-nav__arrow {
    display: block !important;
    width: 72px !important;      /* Новый размер */
    height: 72px !important;     /* Новый размер */
    object-fit: contain !important;
    transform: none !important;  
    margin: 0 auto !important;
    pointer-events: none !important;
}

/* =========================================================
   ИДЕАЛЬНЫЙ СИНХРОН С FIGMA: ГЕЙМПЛЕЙ И ПОДСКАЗКИ
   ========================================================= */

/* 1. Боковые панели и блоки статистики */
.side-panel {
    background: #4E8FD0 !important;
    box-shadow: 0px 4px 4px rgba(43, 110, 178, 0.25) !important;
    border-radius: 32px !important;
    overflow: visible !important; /* Даем иконкам красиво вылезать за пределы */
}

.stat-item {
    position: relative !important;
    box-sizing: border-box !important;
    width: 340px !important;
    height: 108px !important;
    background: linear-gradient(92.18deg, #87C3FF 0.7%, #529EEA 99.73%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 25px !important;
    overflow: visible !important;
}

/* Мягкая и точная центровка текстов в статистике без хрупких calc */
.stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 9px !important;
}

.stat-label {
    font-size: 24px !important;
    line-height: 29px !important;
    margin: 0 !important;
    height: 29px !important;
}

.stat-value {
    font-size: 48px !important;
    line-height: 59px !important;
    margin-top: 3px !important; /* Идеальное смещение на top: 41px */
    height: 59px !important;
}

/* Иконки в статистике строго по макету */
.stat-icon {
    position: absolute !important;
    width: 148.77px !important;
    height: 148.77px !important;
    right: -17.77px !important;
    top: -24.39px !important;
    transform: rotate(-16.9deg) !important;
    pointer-events: none !important;
    z-index: 2;
}

/* 2. Игровое поле и пустая ячейка */
.grid-board {
    background: #4E8FD0 !important;
    box-shadow: 0px 4px 4px rgba(43, 110, 178, 0.25) !important;
    border-radius: 35px !important;
}

.empty-cell {
    background: #2B6EB2 !important;
    box-shadow: inset 0px 0px 10px rgba(31, 93, 156, 0.5) !important;
    border-radius: 10px !important;
}

/* 3. Нижняя панель подсказок */
.bottom-actions-panel {
    background: linear-gradient(0deg, #4E8FD0, #4E8FD0), rgba(102, 117, 232, 0.25) !important;
    box-shadow: 0px 4px 4px rgba(43, 110, 178, 0.25) !important;
    border-radius: 32px !important;
    overflow: visible !important; /* Чтобы иконки кнопок могли вылезать наверх */
}

/* Кнопки подсказок */
.btn-action {
    position: relative !important;
    box-sizing: border-box !important;
    width: 340px !important;
    height: 108px !important;
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 25px !important;
    overflow: visible !important; /* ФИКС КЛИППИНГА: разрешаем иконке выходить за рамки */
    background-clip: border-box !important; /* ФИКС ОБВОДКИ: градиент ложится строго под рамку */
}

/* Полностью зачищаем старые тени-обводки */
.btn-action::after {
    display: none !important;
}

/* Позиционирование иконок подсказок */
.action-icon {
    position: absolute !important;
    width: 148.77px !important;
    height: 148.77px !important;
    left: 206.05px !important;
    top: -39px !important;
    right: auto !important;
    transform: rotate(-16.9deg) !important;
    pointer-events: none !important;
}

/* Точечное позиционирование текстов из Figma */
.btn-action .btn-text {
    position: absolute !important;
    top: 25px !important;
    font-size: 24px !important;
    line-height: 110% !important;
    text-align: center !important;
    display: block !important;
    height: 52px !important;
}

#btn-original .btn-text {
    width: 159px !important;
    left: calc(50% - 159px/2 - 27.5px) !important;
}

#btn-numbers .btn-text {
    width: 152px !important;
    left: calc(50% - 152px/2 - 28px) !important;
}

/* 4. Исправление кнопок навигации в Галерее (Стрелочки) */
.gallery-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.gallery-nav__arrow {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
    transform: none !important;
    margin: 0 auto !important;
    pointer-events: none !important;
}

/* =========================================================
   ИДЕАЛЬНЫЕ ОБВОДКИ (БЕЗ ГРЯЗИ НА УГЛАХ)
   ========================================================= */

/* Блоки статистики */
.stat-item {
    position: relative !important;
    box-sizing: border-box !important;
    width: 340px !important;
    height: 108px !important;
    background: linear-gradient(92.18deg, #87C3FF 0.7%, #529EEA 99.73%) !important;
    border-radius: 25px !important;
    overflow: visible !important;
    
    /* Убираем проблемный border и делаем обводку через внутреннюю тень */
    border: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 9px !important;
}

/* Кнопки подсказок (Оригинал, Нумерация) */
.btn-action,
body.portrait .btn-action {
    position: relative !important;
    box-sizing: border-box !important;
    width: 340px !important;
    height: 108px !important;
    border-radius: 25px !important;
    overflow: visible !important;
    
    /* Убираем проблемный border и делаем 3px обводку через внутреннюю тень */
    border: none !important;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
}

/* Полностью зачищаем старые рамки-костыли */
.btn-action::after {
    display: none !important;
}

/* =========================================================
   ТОЧНОЕ ПОЗИЦИОНИРОВАНИЕ ИКОНОК (ИЗ FIGMA)
   ========================================================= */

/* Иконки в блоках статистики (Время, Ходы) */
.stat-icon, 
body.portrait .stat-icon {
    position: absolute !important;
    width: 148.77px !important;
    height: 148.77px !important;
    /* Точные координаты из макета */
    right: -17.77px !important;
    top: -24.39px !important;
    left: auto !important;
    bottom: auto !important;
    
    transform: rotate(-16.9deg) !important;
    margin: 0 !important;
    pointer-events: none !important; /* Чтобы иконка не перекрывала клики */
    z-index: 0 !important; /* Кладем под текст */
}

/* Иконки в кнопках подсказок (Оригинал, Нумерация) */
.action-icon, 
body.portrait .action-icon {
    position: absolute !important;
    width: 148.77px !important;
    height: 148.77px !important;
    /* Точные координаты из макета */
    left: 206.05px !important;
    top: -39px !important;
    
    /* КРИТИЧНО: сбрасываем старую привязку к правому краю, которая ломала портретный режим */
    right: auto !important; 
    bottom: auto !important;
    
    transform: rotate(-16.9deg) !important;
    margin: 0 !important;
    pointer-events: none !important;
    z-index: 2 !important; /* Кладем поверх рамки, чтобы красиво вылезали */
}

/* =========================================================
   НИЖНИЕ КНОПКИ: СТРОГОЕ ОБРЕЗАНИЕ И ЦЕНТРОВКА ПО МАКЕТУ
   ========================================================= */

/* Панель-контейнер для нижних кнопок */
.bottom-actions-panel,
body.portrait .bottom-actions-panel {
    background: linear-gradient(0deg, #4E8FD0, #4E8FD0), rgba(102, 117, 232, 0.25) !important;
    box-shadow: 0px 4px 4px rgba(43, 110, 178, 0.25) !important;
    border-radius: 32px !important;
    
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;         /* Центрируем кнопки по вертикали */
    justify-content: center !important;     /* Центрируем кнопки по горизонтали */
    padding: 12px !important;
    gap: 12px !important;
    width: 716px !important;
    height: 132px !important;
    overflow: visible !important;
}

/* Сами кнопки подсказок */
.btn-action,
body.portrait .btn-action {
    position: relative !important;
    box-sizing: border-box !important;
    width: 340px !important;
    height: 108px !important;
    border-radius: 25px !important;
    
    /* КРИТИЧНО: обрезаем всё, что выходит за границы скругления кнопки */
    overflow: hidden !important; 
    
    /* Идеальная обводка 3px внутрь, которая не двоится при overflow: hidden */
    border: none !important;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
    background-clip: padding-box !important;
    padding: 0 !important;
}

/* Полностью убираем старые рамки-костыли, чтобы не портили обводку */
.btn-action::after {
    display: none !important;
}

/* Текст кнопки "Посмотреть оригинал" */
#btn-original .btn-text,
body.portrait #btn-original .btn-text {
    position: absolute !important;
    width: 159px !important;
    height: 52px !important;
    left: calc(50% - 159px/2 - 27.5px) !important; /* Смещение из Figma */
    top: 25px !important;
    
    font-family: 'Montserrat', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 110% !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Текст кнопки "Нумерация картинок" */
#btn-numbers .btn-text,
body.portrait #btn-numbers .btn-text {
    position: absolute !important;
    width: 152px !important;
    height: 52px !important;
    left: calc(50% - 152px/2 - 28px) !important;  /* Смещение из Figma */
    top: 25px !important;
    
    font-family: 'Montserrat', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 110% !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Иконки внутри кнопок (частично режутся краями за счет overflow: hidden) */
.action-icon, 
body.portrait .action-icon {
    position: absolute !important;
    width: 148.77px !important;
    height: 148.77px !important;
    left: 206.05px !important;                       /* Координата из Figma */
    top: -39px !important;                          /* Координата из Figma */
    
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-16.9deg) !important;
    pointer-events: none !important;
    margin: 0 !important;
}

/* =========================================================
   НИЖНИЕ КНОПКИ: СМЕЩЕНИЕ ИКОНОК НИЖЕ ДЛЯ ВИЗУАЛЬНОГО ЦЕНТРА
   ========================================================= */

   .bottom-actions-panel,
   body.portrait .bottom-actions-panel {
       background: linear-gradient(0deg, #4E8FD0, #4E8FD0), rgba(102, 117, 232, 0.25) !important;
       box-shadow: 0px 4px 4px rgba(43, 110, 178, 0.25) !important;
       border-radius: 32px !important;
       display: flex !important;
       flex-direction: row !important;
       align-items: center !important;
       justify-content: center !important;
       padding: 12px !important;
       gap: 12px !important;
       width: 716px !important;
       height: 132px !important;
       overflow: visible !important;
   }
   
   .btn-action,
   body.portrait .btn-action {
       position: relative !important;
       box-sizing: border-box !important;
       width: 340px !important;
       height: 108px !important;
       border-radius: 25px !important;
       overflow: hidden !important; /* Обрезаем иконки строго по контуру кнопок */
       border: none !important;
       box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
       background-clip: padding-box !important;
       padding: 0 !important;
   }
   
   .btn-action::after {
       display: none !important;
   }
   
   #btn-original .btn-text,
   body.portrait #btn-original .btn-text {
       position: absolute !important;
       width: 159px !important;
       height: 52px !important;
       left: calc(50% - 159px/2 - 27.5px) !important;
       top: 25px !important;
       font-family: 'Montserrat', sans-serif !important;
       font-style: normal !important;
       font-weight: 700 !important;
       font-size: 24px !important;
       line-height: 110% !important;
       text-align: center !important;
       letter-spacing: 0.01em !important;
       color: #FFFFFF !important;
       display: block !important;
       margin: 0 !important;
   }
   
   #btn-numbers .btn-text,
   body.portrait #btn-numbers .btn-text {
       position: absolute !important;
       width: 152px !important;
       height: 52px !important;
       left: calc(50% - 152px/2 - 28px) !important;
       top: 25px !important;
       font-family: 'Montserrat', sans-serif !important;
       font-style: normal !important;
       font-weight: 700 !important;
       font-size: 24px !important;
       line-height: 110% !important;
       text-align: center !important;
       letter-spacing: 0.01em !important;
       color: #FFFFFF !important;
       display: block !important;
       margin: 0 !important;
   }
   
   /* Иконки в нижних кнопках (опустили top с -39px до -19px для центровки) */
   .action-icon, 
   body.portrait .action-icon {
       position: absolute !important;
       width: 148.77px !important;
       height: 148.77px !important;
       left: 206.05px !important;
       top: -19px !important; /* Опустили пониже, теперь визуально ровно по центру */
       right: auto !important;
       bottom: auto !important;
       transform: rotate(-16.9deg) !important;
       pointer-events: none !important;
       margin: 0 !important;
   }
   
   
   /* =========================================================
      БЛОКИ СТАТИСТИКИ (ВРЕМЯ, ХОДЫ, УРОВЕНЬ, СЛОЖНОСТЬ)
      ========================================================= */
   
   .side-panel,
   body.portrait .side-panel {
       background: #4E8FD0 !important;
       box-shadow: 0px 4px 4px rgba(43, 110, 178, 0.25) !important;
       border-radius: 32px !important;
   }
   
   .stat-item,
   body.portrait .stat-item {
       position: relative !important;
       box-sizing: border-box !important;
       width: 340px !important;
       height: 108px !important;
       background: linear-gradient(92.18deg, #87C3FF 0.7%, #529EEA 99.73%) !important;
       border-radius: 25px !important;
       
       /* КРИТИЧНО: обрезаем огонь по контуру плашки статистики */
       overflow: hidden !important; 
       
       /* Идеальная внутренняя обводка 1px */
       border: none !important;
       box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
       
       display: block !important;
       padding: 0 !important;
   }
   
   /* Название параметра (Время, Ходов, Уровень, Сложность) */
   .stat-label,
   body.portrait .stat-label {
       position: absolute !important;
       width: 100% !important;
       height: 29px !important;
       left: 0 !important;
       top: 9px !important;
       font-family: 'Montserrat', sans-serif !important;
       font-style: normal !important;
       font-weight: 700 !important;
       font-size: 24px !important;
       line-height: 29px !important;
       text-align: center !important;
       letter-spacing: 0.01em !important;
       color: #FFFFFF !important;
       margin: 0 !important;
       z-index: 1 !important;
   }
   
   /* Значение параметра (цифры/текст снизу) */
   .stat-value,
   body.portrait .stat-value {
       position: absolute !important;
       width: 100% !important;
       height: 59px !important;
       left: 0 !important;
       top: 41px !important;
       font-family: 'Montserrat', sans-serif !important;
       font-style: normal !important;
       font-weight: 700 !important;
       font-size: 48px !important;
       line-height: 59px !important;
       text-align: center !important;
       letter-spacing: 0.01em !important;
       color: #FFFFFF !important;
       margin: 0 !important;
       z-index: 1 !important;
   }
   
   /* Иконки огня внутри статистики (обрезаются за счет overflow: hidden) */
   .stat-icon, 
   body.portrait .stat-icon {
       position: absolute !important;
       width: 148.77px !important;
       height: 148.77px !important;
       right: -17.77px !important;
       top: -24.39px !important;
       left: auto !important;
       bottom: auto !important;
       transform: rotate(-16.9deg) !important;
       pointer-events: none !important;
       z-index: 0 !important; /* Подкладываем под текст */
       margin: 0 !important;
   }

   /* =========================================================
   НИЖНИЕ КНОПКИ: МАКСИМАЛЬНОЕ СХОДСТВО С FIGMA
   ========================================================= */

/* Панель-контейнер */
.bottom-actions-panel,
body.portrait .bottom-actions-panel {
    background: linear-gradient(0deg, #4E8FD0, #4E8FD0), rgba(102, 117, 232, 0.25) !important;
    box-shadow: 0px 4px 4px rgba(43, 110, 178, 0.25) !important;
    border-radius: 32px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    gap: 12px !important;
    width: 716px !important;
    height: 132px !important;
    overflow: visible !important;
}

/* Кнопки подсказок */
.btn-action,
body.portrait .btn-action {
    position: relative !important;
    box-sizing: border-box !important;
    width: 340px !important;
    height: 108px !important;
    border-radius: 25px !important;
    overflow: hidden !important; /* Обрезает иконки по форме кнопки */
    border: none !important;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
    background-clip: padding-box !important;
    padding: 0 !important;
}

.btn-action::after {
    display: none !important;
}

/* Текст кнопки "Посмотреть оригинал" */
#btn-original .btn-text,
body.portrait #btn-original .btn-text {
    position: absolute !important;
    width: 159px !important;
    height: 52px !important;
    left: calc(50% - 159px/2 - 27.5px) !important;
    top: 25px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 110% !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
    display: block !important;
    margin: 0 !important;
    z-index: 2 !important; /* Поверх иконки, если они пересекутся */
}

/* Текст кнопки "Нумерация картинок" */
#btn-numbers .btn-text,
body.portrait #btn-numbers .btn-text {
    position: absolute !important;
    width: 152px !important;
    height: 52px !important;
    left: calc(50% - 152px/2 - 28px) !important;
    top: 25px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 110% !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
    display: block !important;
    margin: 0 !important;
    z-index: 2 !important;
}

/* Иконки подсказок: выравнивание по вертикали и сдвиг вправо как на макете */
.action-icon, 
body.portrait .action-icon {
    position: absolute !important;
    width: 148.77px !important;
    height: 148.77px !important;
    
    /* Смещаем координаты, чтобы иконка заходила за правый скругленный край */
    left: 216px !important; 
    top: calc(50% - 148.77px/2) !important; /* Идеальный вертикальный центр */
    
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-16.9deg) !important;
    pointer-events: none !important;
    margin: 0 !important;
    z-index: 1 !important;
}

/* Иконки подсказок: выдвигаем их больше вперед (влево) */
.action-icon, 
body.portrait .action-icon {
    position: absolute !important;
    width: 148.77px !important;
    height: 148.77px !important;
    
    /* Сдвинули со 216px до 185px, теперь они сильнее выходят вперед */
    left: 185px !important; 
    top: calc(50% - 148.77px/2) !important; /* Идеальный вертикальный центр */
    
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-16.9deg) !important;
    pointer-events: none !important;
    margin: 0 !important;
    z-index: 1 !important;
}

/* =========================================================
   ИКОНКИ ПОДСКАЗОК: СТРОГИЕ КООРДИНАТЫ ИЗ FIGMA
   ========================================================= */

   .action-icon, 
   body.portrait .action-icon {
       position: absolute !important;
       width: 142.77px !important;
       height: 142.77px !important;
       
       /* Твоя точная координата из Figma */
       left: 200.05px !important; 
       
       /* Если хочешь, чтобы они выходили вперед ЕЩЕ БОЛЬШЕ (как на скрине), 
          расскомментируй строку ниже и подгоняй значение (например, 185px или 190px): */
        left: 185px !important;
       
       /* Идеальный вертикальный центр с учетом высоты кнопки */
       top: calc(50% - 142.77px/2) !important; 
       
       right: auto !important;
       bottom: auto !important;
       transform: rotate(-16.9deg) !important;
       pointer-events: none !important;
       margin: 0 !important;
       z-index: 1 !important;
   }

   /* =========================================================
   ИКОНКИ ПОДСКАЗОК: СВОБОДНОЕ ВРАЩЕНИЕ НА 360 ГРАДУСОВ
   ========================================================= */

.action-icon, 
body.portrait .action-icon {
    position: absolute !important;
    width: 135.77px !important;
    height: 135.77px !important;
    
    /* Исходные координаты из Figma */
    left: 207.05px !important;
    top: -17px !important;
    
    /* =========================================================
       ПЕРЕМЕННАЯ ДЛЯ КРУТИЛКИ: меняй значение ниже от 0deg до 360deg
       ========================================================= */
    --угол-поворота: 7.9deg;
    
    transform: rotate(var(--угол-поворота)) !important;
    
    /* Сброс лишних параметров */
    right: auto !important;
    bottom: auto !important;
    pointer-events: none !important;
    margin: 0 !important;
    z-index: 1 !important;
}

/* =========================================================
   ИКОНКИ СТАТИСТИКИ: СВОБОДНОЕ ВРАЩЕНИЕ НА 360 ГРАДУСОВ
   ========================================================= */

   .stat-icon, 
   body.portrait .stat-icon {
       position: absolute !important;
       width: 132.77px !important;
       height: 132.77px !important;
       
       /* Исходные координаты из Figma */
       right: -17.77px !important;
       top: -8.39px !important;
       
       /* =========================================================
          ПЕРЕМЕННАЯ ДЛЯ КРУТИЛКИ СТАТИСТИКИ: меняй от 0deg до 360deg
          ========================================================= */
       --угол-поворота-статистики: -15.9deg;
       
       transform: rotate(var(--угол-поворота-статистики)) !important;
       
       /* Сброс лишних параметров */
       left: auto !important;
       bottom: auto !important;
       pointer-events: none !important;
       margin: 0 !important;
       z-index: 0 !important; /* Огонь всегда остается под текстом цифр */
   }

   /* =========================================================
   ПОЛНАЯ НАСТРОЙКА РАЗМЕРА И ИСПРАВЛЕНИЕ ЦВЕТА ДЛЯ ИКОНКИ "ХОДЫ"
   ========================================================= */
.right-panel .stat-icon,
body.portrait .right-panel .stat-icon {
    /* Полный сброс фильтров, ломавших оригинальный цвет из Figma */
    filter: none !important; 
    
    /* Твоя индивидуальная настройка габаритов */
    width: 148.77px !important;  /* Меняй ширину здесь */
    height: 148.77px !important; /* Меняй высоту здесь */
}

/* =========================================================
   ПОЛНАЯ ИЗОЛИРОВАННАЯ НАСТРОЙКА ИКОНКИ "ХОДЫ"
   ========================================================= */
   .right-panel .stat-item:last-child .stat-icon,
   body.portrait .right-panel .stat-item:last-child .stat-icon {
       position: absolute !important;
       
       /* 1. ПОЛНЫЙ СБРОС ФИЛЬТРОВ (Возвращает чистый цвет из Figma) */
       filter: none !important; 
       opacity: 1 !important;
       
       /* 2. ГАБАРИТЫ ИКОНКИ (Крути размер тут) */
       width: 135.77px !important;  
       height: 135.77px !important; 
       
       /* 3. ТОЧНЫЕ КООРДИНАТЫ ИЗ FIGMA */
       right: 0px !important;
       top: -16px !important;
       left: auto !important;
       bottom: auto !important;
       
       /* 4. УГОЛ НАКЛОНА (Можно крутить от 0deg до 360deg) */
       transform: rotate(-1.9deg) !important;
       
       /* 5. СЕРВИСНЫЕ СТИЛИ (Слои и клики) */
       z-index: 0 !important;          /* Лежит строго под цифрами ходов */
       pointer-events: none !important; /* Клик проходит насквозь на кнопку */
       margin: 0 !important;
   }
   
   /* =========================================================
      ПОЛНАЯ ИЗОЛИРОВАННАЯ НАСТРОЙКА ИКОНКИ "ВРЕМЯ"
      ========================================================= */
   .right-panel .stat-item:first-child .stat-icon,
   body.portrait .right-panel .stat-item:first-child .stat-icon {
       position: absolute !important;
       
       /* 1. ПОЛНЫЙ СБРОС ФИЛЬТРОВ (Возвращает чистый цвет из Figma) */
       filter: none !important; 
       opacity: 1 !important;
       
       /* 2. ГАБАРИТЫ ИКОНКИ (Крути размер тут) */
       width: 135.77px !important;  
       height: 135.77px !important; 
       
       /* 3. ТОЧНЫЕ КООРДИНАТЫ ИЗ FIGMA */
       right: 0px !important;
       top: -16px !important;
       left: auto !important;
       bottom: auto !important;
       
       /* 4. УГОЛ НАКЛОНА (Можно крутить от 0deg до 360deg) */
       transform: rotate(-1.9deg) !important;
       
       /* 5. СЕРВИСНЫЕ СТИЛИ (Слои и клики) */
       z-index: 0 !important;          /* Лежит строго под цифрами таймера */
       pointer-events: none !important; /* Клик проходит насквозь */
       margin: 0 !important;
   }

   /* =========================================================
   ПОЛНАЯ ИЗОЛИРОВАННАЯ НАСТРОЙКА ИКОНКИ "УРОВЕНЬ"
   ========================================================= */
.left-panel .stat-item:first-child .stat-icon,
body.portrait .left-panel .stat-item:first-child .stat-icon {
    position: absolute !important;
    
    /* 1. ПОЛНЫЙ СБРОС ФИЛЬТРОВ (Возвращает чистый цвет из Figma) */
    filter: none !important; 
    opacity: 1 !important;
    
    /* 2. ГАБАРИТЫ ИКОНКИ */
    width: 135.77px !important;  
    height: 135.77px !important; 
    
    /* 3. ТОЧНЫЕ КООРДИНАТЫ */
    right: 0px !important;
    top: -16px !important;
    left: auto !important;
    bottom: auto !important;
    
    /* 4. УГОЛ НАКЛОНА */
    transform: rotate(-1.9deg) !important;
    
    /* 5. СЕРВИСНЫЕ СТИЛИ */
    z-index: 0 !important;          /* Лежит строго под текстом */
    pointer-events: none !important; /* Клик проходит насквозь */
    margin: 0 !important;
}

/* =========================================================
   ПОЛНАЯ ИЗОЛИРОВАННАЯ НАСТРОЙКА ИКОНКИ "СЛОЖНОСТЬ"
   ========================================================= */
.left-panel .stat-item:last-child .stat-icon,
body.portrait .left-panel .stat-item:last-child .stat-icon {
    position: absolute !important;
    
    /* 1. ПОЛНЫЙ СБРОС ФИЛЬТРОВ (Возвращает чистый цвет из Figma) */
    filter: none !important; 
    opacity: 1 !important;
    
    /* 2. ГАБАРИТЫ ИКОНКИ */
    width: 135.77px !important;  
    height: 135.77px !important; 
    
    /* 3. ТОЧНЫЕ КООРДИНАТЫ */
    right: 0px !important;
    top: -16px !important;
    left: auto !important;
    bottom: auto !important;
    
    /* 4. УГОЛ НАКЛОНА */
    transform: rotate(-1.9deg) !important;
    
    /* 5. СЕРВИСНЫЕ СТИЛИ */
    z-index: 0 !important;          /* Лежит строго под текстом */
    pointer-events: none !important; /* Клик проходит насквозь */
    margin: 0 !important;
}

.gallery-card.is-locked .gallery-card__image {
    filter: none !important; /* Чистый цвет переведенной заглушки без серости */
}

/* Боковые карточки просто остаются чуть прозрачными для фокуса на центре */
.gallery-card--side .gallery-card__image {
    opacity: 0.38 !important;
}

.grid-board {
    position: absolute;
    left: 512px;
    top: 28px;
    display: grid;
    gap: 8px;
    width: 896px;
    height: 896px;
    padding: 36px;
    border-radius: 50px;
    background: var(--bg-panel-solid);
    box-shadow: var(--shadow-soft);
    
    touch-action: none; 
}

*, *::before, *::after {
    -webkit-touch-callout: none; /* Отключает меню долгого нажатия на iOS */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Старый Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Современные браузеры */
    -webkit-tap-highlight-color: transparent; /* Убирает синюю подсветку при клике на Android */
    -webkit-user-drag: none;     /* Запрещает перетаскивание картинок браузером */
}

/* Делаем фон при показе оригинала сильно темнее */
.original-overlay__scrim {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    z-index: 1;
}

/* Стили для карточки оригинала, чтобы она была над фоном */
.original-overlay__card {
    z-index: 2;
}

/* Стили пульсирующей подсказки "Как закрыть" */
.original-overlay__hint {
    position: absolute;
    bottom: 40px; /* Отступ снизу */
    left: 0;
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 32px;
    font-weight: 700;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    z-index: 2;
    pointer-events: none; /* Чтобы не перекрывала клики */
    animation: pulseHint 1.5s infinite ease-in-out;
}

@keyframes pulseHint {
    0% { transform: scale(0.95); opacity: 0.6; }
    50% { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.6; }
}

/* Адаптация подсказки под портретный (мобильный) режим */
body.portrait .original-overlay__hint {
    font-size: 42px;
    bottom: -80px; /* Выносим под саму картинку */
}

/* === Анимация слияния пазла при победе === */

/* Делаем изменение отступов плавным */
.grid-board {
    transition: gap 0.4s ease !important;
}

/* Плавно убираем скругления и тени у плиток */
.grid-cell {
    transition: transform 0.12s ease, filter 0.2s ease, border-radius 0.4s ease, box-shadow 0.4s ease !important;
}

/* Состояние победы: убираем зазоры */
.grid-board.is-solved {
    gap: 0 !important;
}

/* Состояние победы: делаем плитки квадратными и без теней, чтобы не было швов */
.grid-board.is-solved .grid-cell {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Оставляем скругления только по внешним углам всей картинки, чтобы смотрелось аккуратно */
.grid-board.is-solved .grid-cell.top-left { border-top-left-radius: 14px !important; }
.grid-board.is-solved .grid-cell.top-right { border-top-right-radius: 14px !important; }
.grid-board.is-solved .grid-cell.bottom-left { border-bottom-left-radius: 14px !important; }
.grid-board.is-solved .grid-cell.bottom-right { border-bottom-right-radius: 14px !important; }

/* =========================================================
   EXIT CONFIRMATION MODAL
   ========================================================= */

.exit-modal {
    position: absolute;
    inset: 0;
    z-index: 36;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, visibility 0.24s ease;
}

.exit-modal.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.exit-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 15, 25, 0.56);
    backdrop-filter: blur(14px);
}

.exit-modal__card {
    position: relative;
    width: 760px;
    padding: 38px;
    border-radius: 48px;
    background: linear-gradient(180deg, rgba(89, 143, 191, 0.98) 0%, rgba(57, 102, 140, 0.98) 100%);
    box-shadow: 0 24px 60px rgba(6, 28, 43, 0.34);
}

.exit-modal__title {
    margin: 0 0 18px;
    font-size: 46px;
    line-height: 1.12;
    text-align: center;
}

.exit-modal__text {
    margin: 0 0 28px;
    font-size: 35px;
    line-height: 1.2;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 400;
}

.exit-modal__actions {
    display: flex;
    gap: 16px;
}

.exit-modal__button {
    position: relative;
    flex: 1 1 0;
    display: block;
    height: 98px;
    border-radius: 30px;
    font-size: 30px;
    font-weight: 700;
    overflow: hidden;
    background-clip: padding-box;
    transition: transform 0.15s ease, filter 0.2s ease, opacity 0.2s ease;
}

.exit-modal__button:hover {
    filter: brightness(1.08);
}

.exit-modal__button:active {
    transform: scale(0.97);
}

.exit-modal__button--confirm {
    background: var(--bg-btn-orange);
    box-shadow: 0 10px 18px rgba(109, 33, 11, 0.18);
}

.exit-modal__button--cancel {
    background: rgba(192, 239, 255, 0.18);
    color: rgba(255, 255, 255, 0.72);
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 6px rgba(255, 255, 255, 0.03);
}

body.portrait .exit-modal__card {
    width: 900px;
    padding: 44px;
    border-radius: 52px;
}

body.portrait .exit-modal__title {
    font-size: 58px;
}

body.portrait .exit-modal__text {
    font-size: 27px;
}

body.portrait .exit-modal__button {
    height: 116px;
    font-size: 34px;
}

/* =========================================================
   ORIGINAL OVERLAY: FULL SCREEN DARKENING
   ========================================================= */

.original-overlay.is-visible {
    position: absolute;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 32;
}

.original-overlay.is-visible .original-overlay__scrim {
    border-radius: 0 !important;
}

.original-overlay.is-visible .original-overlay__card {
    width: 824px;
    height: 824px;
}

body.portrait .original-overlay.is-visible .original-overlay__card {
    width: 824px;
    height: 824px;
}

.original-overlay.is-visible .original-overlay__hint {
    bottom: 80px;
}

body.portrait .original-overlay.is-visible .original-overlay__hint {
    bottom: 180px;
}

/* =========================================================
   ORIGINAL OVERLAY: FULL SCREEN DARKENING
   ========================================================= */

   .original-overlay.is-visible {
    position: absolute;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 32;
}

.original-overlay.is-visible .original-overlay__scrim {
    border-radius: 0 !important;
}

/* Центрируем ровно по игровому полю (Landscape) */
.original-overlay.is-visible .original-overlay__card {
    position: absolute !important;
    left: 548px !important; /* 512 + 36 padding */
    top: 64px !important;   /* 28 + 36 padding */
    width: 824px !important;
    height: 824px !important;
    margin: 0 !important;
}

/* Центрируем ровно по игровому полю (Portrait / Mobile) */
body.portrait .original-overlay.is-visible .original-overlay__card {
    position: absolute !important;
    left: 128px !important; /* 92 + 36 padding */
    top: 470px !important;  /* 434 + 36 padding */
    width: 824px !important;
    height: 824px !important;
    margin: 0 !important;
}

.original-overlay.is-visible .original-overlay__hint {
    bottom: 80px;
}

body.portrait .original-overlay.is-visible .original-overlay__hint {
    bottom: 180px;
}

/* Стили пульсирующей подсказки "Как закрыть" */
.original-overlay__hint {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 54px; /* Увеличили с 32px */
    font-weight: 700;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    z-index: 2;
    pointer-events: none;
    animation: pulseHint 1.5s infinite ease-in-out;
}

/* Адаптация подсказки под портретный (мобильный) режим */
body.portrait .original-overlay__hint {
    font-size: 72px; /* Увеличили с 42px */
    bottom: 180px; /* Отступ, который мы настроили ранее */
}

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ: РАСТЯГИВАЕМ НИЖНЮЮ ПАНЕЛЬ НА ВСЮ ШИРИНУ ПОЛЯ
   ========================================================= */
   body.portrait .bottom-actions-panel {
    left: 92px !important;       /* Выравниваем строго по левому краю игрового поля */
    width: 896px !important;     /* Задаем ширину ровно как у игрового поля (grid-board) */
    height: 132px !important;    /* Высоту контейнера оставляем из макета */
    padding: 12px !important;
    gap: 16px !important;        /* Чуть увеличиваем зазор между кнопками для красоты */
    box-sizing: border-box !important;
    
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Растягиваем сами кнопки подсказок внутри панели */
body.portrait .btn-action {
    flex: 1 1 0 !important;      /* Заставляем кнопки делить всё доступное пространство поровну */
    width: auto !important;      /* Сбрасываем фиксированные 340px */
    height: 108px !important;    /* Высота самой кнопки */
}

/* Корректируем центровку текста внутри растянутых кнопок */
body.portrait #btn-original .btn-text {
    width: 100% !important;
    left: -20px !important;       /* Сдвигаем текст чуть левее центра, чтобы освободить место справа под иконку */
    top: 25px !important;
}

body.portrait #btn-numbers .btn-text {
    width: 100% !important;
    left: -20px !important;       /* Сдвигаем аналогично оригинальной кнопке */
    top: 25px !important;
}

/* Позиционирование иконки в растянутых кнопках */
body.portrait .action-icon {
    left: auto !important;        /* Отвязываем жесткий левый край из Figma */
    right: -10px !important;      /* Прижимаем иконку к правому краю кнопки */
    top: calc(50% - 135.77px/2) !important; /* Идеальный вертикальный центр */
}

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ: РАСТЯГИВАЕМ ПАНЕЛИ СТАТИСТИКИ НА ВСЮ ШИРИНУ
   ========================================================= */
   @media (orientation: portrait), (max-width: 1080px) {
    /* Левая панель (Уровень / Сложность) */
    body.portrait .left-panel {
        left: 92px !important;
        width: 896px !important;     /* Ширина ровно как у игрового поля */
        height: auto !important;
        display: flex !important;
        flex-direction: row !important; /* Выстраиваем элементы в один ряд */
        gap: 16px !important;
    }

    /* Правая панель (Время / Ходов) */
    body.portrait .right-panel {
        left: 92px !important;       /* Выравниваем по левому краю поля */
        top: 1354px !important;      /* Возвращаем оригинальное положение по вертикали */
        width: 896px !important;     /* Растягиваем ровно под размер игрового поля */
        height: auto !important;
        display: flex !important;
        flex-direction: row !important; /* В один ряд на мобилках */
        gap: 16px !important;
    }

    /* Адаптируем сами блоки статистики внутри панелей */
    body.portrait .side-panel .stat-item {
        flex: 1 1 0 !important;      /* Заставляем плашки поровну делить доступное место */
        width: auto !important;      /* Сбрасываем фиксированную ширину 340px */
        height: 108px !important;    /* Фиксированная высота из Figma */
    }

    /* Корректируем расположение огненных иконок в растянутых плашках */
    body.portrait .side-panel .stat-icon {
        right: -10px !important;     /* Прижимаем к правому краю карточки */
        top: calc(50% - 132.77px/2) !important; /* Идеальный вертикальный центр */
    }
}
/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ: РАСТЯГИВАЕМ ПАНЕЛИ СТАТИСТИКИ НА ВСЮ ШИРИНУ
   ========================================================= */
@media (orientation: portrait), (max-width: 1080px) {
    /* Левая панель (Уровень / Сложность) */
    body.portrait .left-panel {
        left: 92px !important;
        width: 896px !important;     /* Ширина ровно как у игрового поля */
        height: auto !important;
        display: flex !important;
        flex-direction: row !important; /* Выстраиваем элементы в один ряд */
        gap: 16px !important;
    }

    /* Правая панель (Время / Ходов) */
    body.portrait .right-panel {
        left: 92px !important;       /* Выравниваем по левому краю поля */
        top: 1354px !important;      /* Возвращаем оригинальное положение по вертикали */
        width: 896px !important;     /* Растягиваем ровно под размер игрового поля */
        height: auto !important;
        display: flex !important;
        flex-direction: row !important; /* В один ряд на мобилках */
        gap: 16px !important;
    }

    /* Адаптируем сами блоки статистики внутри панелей */
    body.portrait .side-panel .stat-item {
        flex: 1 1 0 !important;      /* Заставляем плашки поровну делить доступное место */
        width: auto !important;      /* Сбрасываем фиксированную ширину 340px */
        height: 108px !important;    /* Фиксированная высота из Figma */
    }

    /* Корректируем расположение огненных иконок в растянутых плашках */
    body.portrait .side-panel .stat-icon {
        right: -10px !important;     /* Прижимаем к правому краю карточки */
        top: calc(50% - 132.77px/2) !important; /* Идеальный вертикальный центр */
    }
}

*, *::before, *::after {
    -webkit-touch-callout: none;
    -webkit-user-select: none;   
    user-select: none;           
    -webkit-user-drag: none;     
}

/* Отключаем появление умной камеры и плашек поиска Яндекса на картинках */
img, .game-logo, .character-img {
    pointer-events: none !important;
}

img {
    pointer-events: none;
    }

    /* ПАТЧ: Изолируем фон плиток от умной лупы Яндекс Браузера */
.grid-cell__number {
    z-index: 2; /* Цифры всегда поверх фона */
}

.grid-cell.has-image {
    background: transparent !important; /* Убираем фон у самого DOM-элемента */
}

/* Отрисовываем картинку в виртуальном слое, который невидим для Яндекса */
.grid-cell.has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none !important; /* Блокируем любые наведения курсора */
    z-index: 0;
    
    /* Читаем координаты из JS */
    background-image: var(--bg-img);
    background-size: var(--bg-size);
    background-position: var(--bg-pos);
}



/* Прозрачный щит для защиты от Яндекса */
.cell-shield {
    background: transparent !important;
    /* Убираем любые возможные наводки или выделения */
    -webkit-tap-highlight-color: transparent;
}

/* На случай, если нужно отключить реакцию браузера на картинку через CSS */
.grid-cell {
    user-select: none;
    -webkit-user-select: none;
}

/* Класс, который можно добавлять/убирать через JS */
.gallery-locked {
    pointer-events: none !important;
}

/* Если кнопка "Другие игры" скрыта, растягиваем "Музыку" на всю ширину сервисной панели */
#btn-more-games[style*="display: none;"] + #btn-music-menu {
    width: 100% !important;
    flex: 1 1 100% !important;
}