/* style.css - v1.05 - ОБНОВЛЕНО: все модальные окна опущены еще на 40px ниже */
:root {
    --tg-bg-color: #63697B;
    --tg-primary-color: #635BFF;
    --tg-secondary-color: #8B85FF;
    --tg-text-color: #222222;
    --tg-border-color: #dddddd;
    --tg-success-color: #4CAF50;
    --tg-warning-color: #FF9800;
    --tg-danger-color: #F44336;
    
    --tile-size: 63.5px;
    --gap-size: 10px;
    --border-radius: 20px;
    
    --transition-fast: 0.15s;
    --transition-slow: 0.3s;
}

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

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #63697B;
    color: var(--tg-text-color);
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.telegram-app {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0 auto;
    position: fixed;
    overflow: hidden;
}

/* Главное меню */
.main-menu {
    height: 100vh;
    display: flex;
    background: #63697B;
    color: white;
    position: relative;
    z-index: 1;
    width: 100%;
}

.canvas {
    width: 375px;
    height: 709px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-shrink: 0;
}

/* Панель главного меню */
.panel {
    width: 303px;
    height: 518px;
    position: absolute;
    top: 40px;
    left: 36px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0px 8px 30px 0px rgba(0, 1, 50, 0.15);
}

/* ИГРОВОЙ ЭКРАН */
.game-panel-top {
    width: 303px;
    height: 130px;
    position: absolute;
    top: 40px;
    left: 36px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0px 8px 30px 0px rgba(0, 1, 50, 0.15);
}

.game-panel-bottom {
    width: 303px;
    height: 303px;
    position: absolute;
    top: 202px; 
    left: 36px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0px 8px 30px 0px rgba(0, 1, 50, 0.15);
}

/* Контейнер для игрового поля 282x282px */
.game-board-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 282px;
    height: 282px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Первый градиент для панели */
.panel::before,
.game-panel-top::before,
.game-panel-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 22px;
    padding: 1.1px;
    background: linear-gradient(105deg, 
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.0) 10%,
        rgba(255, 255, 255, 0.0) 50%,
        rgba(255, 255, 255, 0.0) 90%,
        rgba(255, 255, 255, 0.1) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Второй градиент для панели */
.panel::after,
.game-panel-top::after,
.game-panel-bottom::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 22px;
    padding: 1.1px;
    background: linear-gradient(255deg, 
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.1) 90%,
        rgba(255, 255, 255, 0.3) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Градиентная заливка для панели */
.panel > .panel-fill,
.game-panel-top > .panel-fill,
.game-panel-bottom > .panel-fill {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 22px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 15%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.02) 85%,
        rgba(255, 255, 255, 0.04) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Маленькие кнопки */
.menu-button,
.menu-button-right {
    width: 78px;
    height: 24px;
    position: absolute;
    top: 54px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(5px);
    box-shadow: 0px 2px 20px rgba(0, 1, 50, 0.12);
    z-index: 10;
    border: none;
    cursor: pointer;
}

.menu-button {
    left: 58px;
}

.menu-button-right {
    left: 238px;
}

/* Стиль для плашки "Новый рекорд" */
.new-record-badge {
    width: 129px;
    height: 24px;
    left: 187px;
    box-shadow: inset 0 0 8px rgba(234, 118, 55, 0.5);
    pointer-events: none;
}

/* Первый градиент для маленьких кнопок */
.menu-button::before,
.menu-button-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    padding: 1.1px;
    background: linear-gradient(105deg, 
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.2) 7%,
        rgba(255, 255, 255, 0.0) 50%,
        rgba(255, 255, 255, 0.0) 93%,
        rgba(255, 255, 255, 0.1) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Второй градиент для маленьких кнопок */
.menu-button::after,
.menu-button-right::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    padding: 1.1px;
    background: linear-gradient(255deg, 
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.2) 7%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.1) 93%,
        rgba(255, 255, 255, 0.3) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Один цвет для плашки "Новый рекорд" */
.new-record-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    padding: 1.1px;
    background: rgba(255, 243, 223, 1.0);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
    opacity: 0.78;
}

/* Градиентная заливка для маленьких кнопок */
.menu-button > .button-fill-small,
.menu-button-right > .button-fill-small,
.new-record-badge > .button-fill-small {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.02) 75%,
        rgba(255, 255, 255, 0.04) 100%);
    pointer-events: none;
    z-index: 0;
}

/* БУРГЕР-ИКОНКА ДЛЯ ЛЕВОЙ КНОПКИ */
.menu-button .burger-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    z-index: 11;
}

.menu-button .burger-icon::before,
.menu-button .burger-icon::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #F2F2F2;
}

/* Создаем три линии бургера */
.menu-button .burger-icon {
    background: 
        linear-gradient(#F2F2F2, #F2F2F2) 0 0/10px 1px no-repeat,
        linear-gradient(#F2F2F2, #F2F2F2) 0 50%/10px 1px no-repeat,
        linear-gradient(#F2F2F2, #F2F2F2) 0 100%/10px 1px no-repeat;
}

/* ТЕКСТ ДЛЯ ЛЕВОЙ КНОПКИ */
.menu-button .button-text {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: #F2F2F2;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    white-space: nowrap;
    pointer-events: none;
    z-index: 11;
}

/* ТЕКСТ ДЛЯ ПРАВОЙ КНОПКИ */
.menu-button-right .button-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #F2F2F2;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    white-space: nowrap;
    pointer-events: none;
    z-index: 11;
}

/* Стили для нажатого состояния маленьких кнопок */
.menu-button:active,
.menu-button-right:active {
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.25);
}

/* Большие кнопки - общие стили */
.big-button,
.big-button-right,
.big-button-bottom,
.big-button-bottom-right {
    width: 120px;
    height: 120px;
    position: absolute;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.00);
    box-shadow: 
        0px 2px 22px rgba(0, 1, 50, 0.16),
        inset 0 0 var(--normal-shadow-blur) var(--normal-shadow-color);
    z-index: 10;
    border: none;
    cursor: pointer;
}

/* Позиции больших кнопок */
.big-button {
    top: 188px;
    left: 58px;
}

.big-button-right {
    top: 188px;
    right: 58px;
}

.big-button-bottom {
    top: 324px;
    left: 58px;
}

.big-button-bottom-right {
    top: 324px;
    right: 58px;
}

/* ЦВЕТНЫЕ ТЕНИ ДЛЯ КАЖДОЙ КНОПКИ В ОБЫЧНОМ СОСТОЯНИИ */
.big-button {
    --normal-shadow-color: rgba(204, 219, 251, 0.0);
    --normal-shadow-blur: 8px;
}

.big-button-right {
    --normal-shadow-color: rgba(204, 219, 251, 0.0);
    --normal-shadow-blur: 8px;
}

.big-button-bottom {
    --normal-shadow-color: rgba(248, 199, 131, 0.0);
    --normal-shadow-blur: 8px;
}

.big-button-bottom-right {
    --normal-shadow-color: rgba(165, 201, 149, 0.0);
    --normal-shadow-blur: 8px;
}

/* Первый градиент для больших кнопок */
.big-button::before,
.big-button-right::before,
.big-button-bottom::before,
.big-button-bottom-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 22px;
    padding: 1.1px;
    background: linear-gradient(115deg, 
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(255, 255, 255, 0.0) 30%,
        rgba(255, 255, 255, 0.0) 90%,
        rgba(255, 255, 255, 0.1) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* Второй градиент для больших кнопок */
.big-button::after,
.big-button-right::after,
.big-button-bottom::after,
.big-button-bottom-right::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 22px;
    padding: 1.1px;
    background: linear-gradient(245deg, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.1) 90%,
        rgba(255, 255, 255, 0.4) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* Градиентная заливка для больших кнопок */
.big-button > .button-fill,
.big-button-right > .button-fill,
.big-button-bottom > .button-fill,
.big-button-bottom-right > .button-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.06) 75%,
        rgba(255, 255, 255, 0.10) 100%);
    opacity: 0.65;
    pointer-events: none;
    z-index: 1;
}

/* ОБЩИЕ СТИЛИ ТЕКСТА ДЛЯ БОЛЬШИХ КНОПОК */
.big-button-title {
    position: absolute;
    left: 50%;
    bottom: 44px;
    transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 38px;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}

.big-button-subtitle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 100;
    color: #F2F2F2;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}

.big-button-subtitle.line1 {
    bottom: 32px;
}

.big-button-subtitle.line2 {
    bottom: 17px;
}

/* Стили для нажатого состояния ВСЕХ больших кнопок */
.big-button:active,
.big-button-right:active,
.big-button-bottom:active,
.big-button-bottom-right:active {
    box-shadow: 
        inset 0 0 36px rgba(0, 0, 0, 0.20),
        inset 0 0 var(--shadow-blur) var(--shadow-color);
}

/* НАСТРОЙКИ ВТОРОЙ ТЕНИ ДЛЯ КАЖДОЙ КНОПКИ В НАЖАТОМ СОСТОЯНИИ */
.big-button:active {
    --shadow-color: rgba(204, 219, 251, 1);
    --shadow-blur: 6px;
}

.big-button-right:active {
    --shadow-color: rgba(204, 219, 251, 1);
    --shadow-blur: 6px;
}

.big-button-bottom:active {
    --shadow-color: rgba(248, 199, 131, 1);
    --shadow-blur: 6px;
}

.big-button-bottom-right:active {
    --shadow-color: rgba(165, 201, 149, 1);
    --shadow-blur: 6px;
}

/* Начать игру */
.start-text {
    position: absolute;
    top: 122px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif; 
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    z-index: 15;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Статистика */
.stats-container {
    position: absolute;
    top: 60px;
    width: 100%;
    pointer-events: none;
    z-index: 15;
}

.game-panel-top .stats-container {
    top: 60px;  /* Поднимаем только в игре */
} 

.stat-item {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.stat-value {
    font-family: 'DM Sans', sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.10);
    margin-bottom: 0px;
}

.stat-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: #F2F2F2;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.0);
}

/* Игровой экран */
.game-screen {
    height: 100vh;
    display: flex;
    background: #63697B;
    color: white;
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Игровое поле - центрированное */
#board {
    display: grid;
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Стили для клеток */
.cell {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.00);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0px 4px 6px 0px rgba(0, 1, 50, 0.03);
    position: relative;
}

/* Специальные стили для клеток 5x5 */
.cell[style*="50px"] {
    border-radius: 16px !important;
}

/* Первый градиент для клеток */
.cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 1.1px;
    background: linear-gradient(125deg, 
        rgba(255, 255, 255, 0.0) 0%,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.2) 80%,
        rgba(255, 255, 255, 0.0) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Второй градиент для клеток */
.cell::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 1.1px;
    background: linear-gradient(235deg, 
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.0) 50%,
        rgba(255, 255, 255, 0.1) 80%,
        rgba(255, 255, 255, 0.3) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* НОВЫЕ СТИЛИ ПЛИТОК */
.tile {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    font-weight: 400;
    user-select: none;
    transition: all var(--transition-fast);
    z-index: 2;
    background: rgba(255, 255, 255, 0.00);
    box-shadow: 0px 2px 22px rgba(0, 1, 50, 0.0);
}

/* Специальные стили для плиток в режиме 5x5 */
.tile[style*="10px"] {
    border-radius: 16px !important;
}

/* Контейнер для плитки с размытым фоном */
.tile-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Размытый фон под плиткой */
.tile-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.00);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1;
}

/* Уникальный градиентный border для каждой плитки */
.tile-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 1.2px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(255, 255, 255, 0.0) 30%,
        rgba(255, 255, 255, 0.0) 90%,
        rgba(255, 255, 255, 0.6) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 4;
}

/* Градиентная заливка */
.tile-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.0) 0%,
        rgba(255, 255, 255, 0.0) 25%,
        rgba(255, 255, 255, 0.0) 50%,
        rgba(255, 255, 255, 0.0) 75%,
        rgba(255, 255, 255, 0.0) 100%);
    opacity: 0.65;
    pointer-events: none;
    z-index: 1;
}

/* Стили для цифры */
.tile-number {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}

/* Уникальные градиенты для каждой плитки с плавным переходом */
.tile[data-value="2"] .tile-border {
    background: linear-gradient(135deg, 
        rgba(255, 245, 235, 1) 0%,
        rgba(255, 225, 180, 1) 50%,
        rgba(255, 240, 220, 1) 75%,
        rgba(255, 230, 200, 1) 100%);
}
.tile[data-value="2"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 3; 
}
.tile[data-value="2"] .tile-number { font-size: 34px; }

.tile[data-value="4"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(255, 235, 210, 1) 0%,
        rgba(255, 200, 150, 1) 33%,
        rgba(255, 215, 170, 1) 66%,
        rgba(255, 225, 185, 1) 100%);
}
.tile[data-value="4"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 4; 
}
.tile[data-value="4"] .tile-number { font-size: 34px; }

.tile[data-value="8"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(255, 225, 190, 1) 0%,
        rgba(255, 180, 120, 1) 33%,
        rgba(255, 200, 140, 1) 66%,
        rgba(255, 215, 165, 1) 100%);
}
.tile[data-value="8"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 5; 
}
.tile[data-value="8"] .tile-number { font-size: 34px; }

.tile[data-value="16"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(255, 235, 210, 1) 0%,
        rgba(255, 200, 150, 1) 33%,
        rgba(255, 215, 170, 1) 66%,
        rgba(255, 225, 185, 1) 100%);
}
.tile[data-value="16"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 6; 
}
.tile[data-value="16"] .tile-number { font-size: 29px; }

.tile[data-value="32"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(255, 205, 150, 1) 0%,
        rgba(255, 140, 80, 1) 33%,
        rgba(255, 170, 110, 1) 66%,
        rgba(255, 190, 135, 1) 100%);
}
.tile[data-value="32"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 7; 
}
.tile[data-value="32"] .tile-number { font-size: 29px; }

.tile[data-value="64"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(255, 195, 140, 1) 0%,
        rgba(255, 120, 60, 1) 33%,
        rgba(255, 155, 95, 1) 66%,
        rgba(255, 175, 120, 1) 100%);
}
.tile[data-value="64"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 8; 
}
.tile[data-value="64"] .tile-number { font-size: 29px; }

.tile[data-value="128"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(255, 185, 130, 1) 0%,
        rgba(255, 110, 50, 1) 33%,
        rgba(255, 145, 85, 1) 66%,
        rgba(255, 165, 110, 1) 100%);
}
.tile[data-value="128"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 9; 
}
.tile[data-value="128"] .tile-number { font-size: 24px; }

.tile[data-value="256"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(255, 175, 150, 1) 0%,
        rgba(255, 100, 80, 1) 33%,
        rgba(255, 135, 115, 1) 66%,
        rgba(255, 155, 135, 1) 100%);
}
.tile[data-value="256"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 10; 
}
.tile[data-value="256"] .tile-number { font-size: 24px; }

.tile[data-value="512"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(255, 165, 170, 1) 0%,
        rgba(255, 90, 110, 1) 33%,
        rgba(255, 125, 145, 1) 66%,
        rgba(255, 145, 160, 1) 100%);
}
.tile[data-value="512"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 11; 
}
.tile[data-value="512"] .tile-number { font-size: 24px; }

.tile[data-value="1024"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(255, 155, 190, 1) 0%,
        rgba(240, 80, 140, 1) 33%,
        rgba(247, 115, 165, 1) 66%,
        rgba(255, 135, 185, 1) 100%);
}
.tile[data-value="1024"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 12; 
}
.tile[data-value="1024"] .tile-number { font-size: 18px; }

.tile[data-value="2048"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(230, 160, 220, 1) 0%,
        rgba(200, 80, 180, 1) 33%,
        rgba(215, 120, 200, 1) 66%,
        rgba(225, 140, 210, 1) 100%);
}
.tile[data-value="2048"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 13; 
}
.tile[data-value="2048"] .tile-number { font-size: 18px; }

/* Плитки после 2048 в едином стиле */
.tile[data-value="4096"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(200, 180, 240, 1) 0%,
        rgba(150, 100, 220, 1) 33%,
        rgba(175, 140, 230, 1) 66%,
        rgba(190, 160, 240, 1) 100%);
}
.tile[data-value="4096"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 14; 
}
.tile[data-value="4096"] .tile-number { font-size: 18px; }

.tile[data-value="8192"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(180, 200, 250, 1) 0%,
        rgba(120, 140, 230, 1) 33%,
        rgba(150, 170, 240, 1) 66%,
        rgba(170, 190, 250, 1) 100%);
}
.tile[data-value="8192"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 15; 
}
.tile[data-value="8192"] .tile-number { font-size: 18px; }

.tile[data-value="16384"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(160, 220, 255, 1) 0%,
        rgba(80, 160, 230, 1) 33%,
        rgba(120, 190, 245, 1) 66%,
        rgba(140, 210, 255, 1) 100%);
}
.tile[data-value="16384"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 16; 
}
.tile[data-value="16384"] .tile-number { font-size: 15px; }

.tile[data-value="32768"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(160, 240, 255, 1) 0%,
        rgba(80, 220, 255, 1) 33%,
        rgba(140, 230, 255, 1) 66%,
        rgba(60, 200, 255, 1) 100%);
}
.tile[data-value="32768"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 17; 
}
.tile[data-value="32768"] .tile-number { font-size: 15px; }

.tile[data-value="65536"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(140, 230, 255, 1) 0%,
        rgba(60, 180, 230, 1) 33%,
        rgba(100, 205, 245, 1) 66%,
        rgba(120, 220, 255, 1) 100%);
}
.tile[data-value="65536"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 18; 
}
.tile[data-value="65536"] .tile-number { font-size: 15px; }

.tile[data-value="131072"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(200, 255, 220, 1) 0%,
        rgba(120, 240, 180, 1) 33%,
        rgba(180, 255, 200, 1) 66%,
        rgba(100, 220, 160, 1) 100%);
}
.tile[data-value="131072"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 19; 
}
.tile[data-value="131072"] .tile-number { font-size: 14px; }

.tile[data-value="262144"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(220, 255, 200, 1) 0%,
        rgba(140, 240, 160, 1) 33%,
        rgba(200, 255, 180, 1) 66%,
        rgba(120, 220, 140, 1) 100%);
}
.tile[data-value="262144"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 20; 
}
.tile[data-value="262144"] .tile-number { font-size: 14px; }

.tile[data-value="524288"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(240, 255, 200, 1) 0%,
        rgba(160, 240, 140, 1) 33%,
        rgba(220, 255, 180, 1) 66%,
        rgba(140, 220, 120, 1) 100%);
}
.tile[data-value="524288"] { 
    box-shadow: inset 0 0 5px rgba(248, 210, 200, 0.7); 
    z-index: 21; 
}
.tile[data-value="524288"] .tile-number { font-size: 14px; }

.tile[data-value="1048576"] .tile-border { 
    background: linear-gradient(135deg, 
        rgba(255, 255, 200, 1) 0%,
        rgba(200, 240, 140, 1) 33%,
        rgba(240, 255, 180, 1) 66%,
        rgba(180, 220, 120, 1) 100%);
}
.tile[data-value="1048576"] { 
    box-shadow: inset 0 0 5px rgba(248, 185, 130, 1); 
    z-index: 22; 
}
.tile[data-value="1048576"] .tile-number { font-size: 12px; }

/* Анимации */
@keyframes tileAppear {
    0% { transform: scale(0); }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes tileMerge {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.tile.new {
    animation: tileAppear 0.2s ease;
}

.tile.merged {
    animation: tileMerge 0.2s ease;
}

/* МОДАЛЬНЫЕ ОКНА - ФИКСИРОВАННАЯ ПОЗИЦИЯ КАК У ПАНЕЛЕЙ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.modal .canvas {
    width: 375px;
    height: 709px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-shrink: 0;
}

/* ФОНЫ ДЛЯ МОДАЛЬНЫХ ОКОН В ЗАВИСИМОСТИ ОТ ТЕМЫ */
body[data-theme="moon-dust"] .modal {
    background: rgba(99, 105, 123, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(5px);
}

body[data-theme="whisper-leaves"] .modal {
    background: rgba(127, 139, 125, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(5px);
}

body[data-theme="wet-stone"] .modal {
    background: rgba(139, 132, 125, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(5px);
}

body[data-theme="deep-space"] .modal {
    background: rgba(59, 61, 70, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(5px);
}

body[data-theme="unicorn-dream"] .modal {
    background: rgba(141, 90, 128, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(5px);
}

/* Фон по умолчанию */
.modal {
    background: rgba(99, 105, 123, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(5px);
}

/* ОБНОВЛЕНО: СТИЛИ ДЛЯ МЕНЮ ГЛАВНОЙ СТРАНИЦЫ - опущены еще на 40px */
.menu-panel {
    width: 303px;
    height: 210px;
    position: absolute;
    top: 102px; /* ОБНОВЛЕНО: было 62px, стало 102px (+40px) */
    left: 36px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0px 8px 30px 0px rgba(0, 1, 50, 0.15);
}

.menu-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 22px;
    padding: 1.1px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(255, 255, 255, 0.0) 50%,
        rgba(255, 255, 255, 0.0) 90%,
        rgba(255, 255, 255, 0.1) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.menu-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 22px;
    padding: 1.1px;
    background: linear-gradient(225deg, 
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.1) 90%,
        rgba(255, 255, 255, 0.3) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.menu-panel > .panel-fill {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 22px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 15%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.02) 85%,
        rgba(255, 255, 255, 0.04) 100%);
    pointer-events: none;
    z-index: 0;
}

/* ОБНОВЛЕНО: Кнопки меню опущены еще на 40px */
.menu-button-item {
    width: 259px;
    height: 40px;
    position: absolute;
    left: 58px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.00);
    box-shadow: 
        0px 2px 16px rgba(0, 1, 50, 0.16),
        inset 0 0 var(--normal-shadow-blur) var(--normal-shadow-color);
    z-index: 10;
    border: none;
    cursor: pointer;
}

/* ОБНОВЛЕНО: Все кнопки в модальных окнах опущены еще на 40px */
.stats-button {
    top: 163px; /* ОБНОВЛЕНО: было 123px, стало 163px (+40px) */
    --normal-shadow-color: rgba(204, 219, 251, 0.0);
    --normal-shadow-blur: 8px;
}

.cheat-button {
    top: 219px; /* ОБНОВЛЕНО: было 179px, стало 219px (+40px) */
    --normal-shadow-color: rgba(248, 199, 131, 0.0);
    --normal-shadow-blur: 8px;
}

.menu-button-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    padding: 1.1px;
    background: linear-gradient(155deg, 
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(255, 255, 255, 0.0) 30%,
        rgba(255, 255, 255, 0.0) 90%,
        rgba(255, 255, 255, 0.1) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.menu-button-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    padding: 1.1px;
    background: linear-gradient(205deg, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(255, 255, 255, 0.1) 30%,
        rgba(255, 255, 255, 0.1) 90%,
        rgba(255, 255, 255, 0.4) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.menu-button-item > .button-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.06) 75%,
        rgba(255, 255, 255, 0.10) 100%);
    opacity: 0.65;
    pointer-events: none;
    z-index: 1;
}

.menu-button-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}

/* ОБНОВЛЕНО: Кнопка закрытия опущена еще на 40px */
.menu-button-right-close {
    width: 30px;
    height: 22px;
    position: absolute;
    top: 115px; /* ОБНОВЛЕНО: было 75px, стало 115px (+40px) */
    right: 59px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(5px);
    box-shadow: 0px 2px 20px rgba(0, 1, 50, 0.12);
    z-index: 10;
    border: none;
    cursor: pointer;
}

.menu-button-right-close::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    padding: 1.1px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.2) 7%,
        rgba(255, 255, 255, 0.0) 50%,
        rgba(255, 255, 255, 0.0) 93%,
        rgba(255, 255, 255, 0.1) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.menu-button-right-close::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    padding: 1.1px;
    background: linear-gradient(225deg, 
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.2) 7%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.1) 93%,
        rgba(255, 255, 255, 0.3) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.menu-button-right-close > .button-fill-small {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.02) 75%,
        rgba(255, 255, 255, 0.04) 100%);
    pointer-events: none;
    z-index: 0;
}

.menu-button-right-close .close-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    pointer-events: none;
    z-index: 21;
}

.menu-button-right-close .close-icon::before,
.menu-button-right-close .close-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 1px;
    background-color: #F2F2F2;
}

.menu-button-right-close .close-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.menu-button-right-close .close-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Эффекты нажатия */
.menu-button-item:active {
    box-shadow: 
        inset 0 0 36px rgba(0, 0, 0, 0.20),
        inset 0 0 var(--shadow-blur) var(--shadow-color);
}

.stats-button:active {
    --shadow-color: rgba(204, 219, 251, 1);
    --shadow-blur: 6px;
}

.cheat-button:active {
    --shadow-color: rgba(248, 199, 131, 1);
    --shadow-blur: 6px;
}

.menu-button-right-close:active {
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.25);
}

/* ОБНОВЛЕНО: Модальное окно тем - все кнопки опущены еще на 40px */
#themes-modal .menu-panel {
    width: 303px;
    height: 388px;
}

.moon-dust-button {
    top: 163px; /* ОБНОВЛЕНО: было 123px, стало 163px (+40px) */
    --normal-shadow-color: rgba(204, 219, 251, 0.0);
    --normal-shadow-blur: 8px;
    background-color: #63697B;
}

.whisper-leaves-button {
    top: 219px; /* ОБНОВЛЕНО: было 179px, стало 219px (+40px) */
    --normal-shadow-color: rgba(204, 219, 251, 0.0);
    --normal-shadow-blur: 8px;
    background-color: #7F8B7D;
}

.wet-stone-button {
    top: 275px; /* ОБНОВЛЕНО: было 235px, стало 275px (+40px) */
    --normal-shadow-color: rgba(204, 219, 251, 0.0);
    --normal-shadow-blur: 8px;
    background-color: #8B847D;
}

.deep-space-button {
    top: 331px; /* ОБНОВЛЕНО: было 291px, стало 331px (+40px) */
    --normal-shadow-color: rgba(204, 219, 251, 0.0);
    --normal-shadow-blur: 8px;
    background-color: #3B3D46;
}

.unicorn-dream-button {
    top: 387px; /* ОБНОВЛЕНО: было 347px, стало 387px (+40px) */
    --normal-shadow-color: rgba(204, 219, 251, 0.0);
    --normal-shadow-blur: 8px;
    background-color: #8D5A80;
}

.moon-dust-button:active,
.whisper-leaves-button:active,
.wet-stone-button:active,
.deep-space-button:active,
.unicorn-dream-button:active {
    --shadow-color: rgba(204, 219, 251, 1);
    --shadow-blur: 6px;
}

/* ОБНОВЛЕНО: Модальное окно статистики */
#stats-modal .menu-panel {
    width: 303px;
    height: 388px;
}

/* ОБНОВЛЕНО: Контейнер статистики опущен еще на 40px */
.stats-container-modal {
    position: absolute;
    top: 160px; /* ОБНОВЛЕНО: было 120px, стало 160px (+40px) */
    left: 62px;
    width: 250px;
    z-index: 10;
}

.stats-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    height: 24px;
}

.stats-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
}

.stats-value {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
}

/* ОБНОВЛЕНО: Кнопки сброса статистики опущены еще на 40px */
.clear-best-score-button {
    top: 354px; /* ОБНОВЛЕНО: было 314px, стало 354px (+40px) */
    --normal-shadow-color: rgba(204, 219, 251, 0.0);
    --normal-shadow-blur: 8px;
}

.clear-all-stats-button {
    top: 410px; /* ОБНОВЛЕНО: было 370px, стало 410px (+40px) */
    --normal-shadow-color: rgba(204, 219, 251, 0.0);
    --normal-shadow-blur: 8px;
}

.clear-best-score-button:active,
.clear-all-stats-button:active {
    --shadow-color: rgba(204, 219, 251, 1);
    --shadow-blur: 6px;
}

/* Модальное окно чит-кодов */
#cheat-modal .menu-panel,
#game-cheat-modal .menu-panel,
#yazhopka-modal .menu-panel {
    width: 303px;
    height: 200px;
}

.description-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    line-height: 1.4;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    z-index: 15;
    pointer-events: none;
}

/* ОБНОВЛЕНО: Поле ввода чит-кода опущено еще на 40px */
.cheat-input-container {
    width: 259px;
    height: 40px;
    position: absolute;
    top: 82px; /* ОБНОВЛЕНО: было 120px, стало 160px (+40px) */
    left: 22px;
    border-radius: 12px;
    z-index: 10;
}

.cheat-input {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.00);
    box-shadow: 
        inset 0 0 36px rgba(0, 0, 0, 0.20),
        inset 0 0 6px rgba(248, 199, 131, 0.0);
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    z-index: 10;
    outline: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.cheat-input-container::before {
    content: '';
    position: absolute;
    top: -1.1px;
    left: -1.1px;
    right: -1.1px;
    bottom: -1.1px;
    border-radius: 13px;
    padding: 1.1px;
    background: linear-gradient(155deg, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(255, 255, 255, 0.0) 30%,
        rgba(255, 255, 255, 0.0) 90%,
        rgba(255, 255, 255, 0.1) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.cheat-input-container::after {
    content: '';
    position: absolute;
    top: -1.1px;
    left: -1.1px;
    right: -1.1px;
    bottom: -1.1px;
    border-radius: 13px;
    padding: 1.1px;
    background: linear-gradient(205deg, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(255, 255, 255, 0.1) 30%,
        rgba(255, 255, 255, 0.1) 90%,
        rgba(255, 255, 255, 0.4) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.cheat-input-container > .input-fill {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.06) 75%,
        rgba(255, 255, 255, 0.10) 100%);
    opacity: 0.0;
    pointer-events: none;
    z-index: 1;
}

.cheat-input::placeholder {
    color: rgba(242, 242, 242, 0.6);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    text-align: center;
}

/* ОБНОВЛЕНО: Модальное окно подтверждения */
.confirmation-text {
    position: absolute;
    top: 168px; /* ОБНОВЛЕНО: было 128px, стало 168px (+40px) */
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    line-height: 1.4;
    z-index: 10;
}

/* ОБНОВЛЕНО: Кнопки подтверждения опущены еще на 40px */
.buttons-horizontal {
    position: absolute;
    top: 232px; /* ОБНОВЛЕНО: было 192px, стало 232px (+40px) */
    left: 58px;
    width: 259px;
    display: flex;
    justify-content: space-between;
    z-index: 10;
}

#confirm-modal .menu-button-item {
    width: 120px;
    height: 40px;
    position: relative;
    left: auto;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.00);
    box-shadow: 
        0px 2px 16px rgba(0, 1, 50, 0.16),
        inset 0 0 var(--normal-shadow-blur) var(--normal-shadow-color);
    z-index: 10;
    border: none;
    cursor: pointer;
}

.no-button {
    --normal-shadow-color: rgba(248, 199, 131, 0.0);
    --normal-shadow-blur: 8px;
    background-color: #63697B;
}

.yes-button {
    --normal-shadow-color: rgba(165, 201, 149, 0.0);
    --normal-shadow-blur: 8px;
    background-color: #63697B;
}

/* ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ НАЖАТОГО СОСТОЯНИЯ КНОПОК ПОДТВЕРЖДЕНИЯ */
.no-button:active {
    box-shadow: 
        inset 0 0 36px rgba(0, 0, 0, 0.20),
        inset 0 0 6px rgba(248, 199, 131, 1) !important;
}

.yes-button:active {
    box-shadow: 
        inset 0 0 36px rgba(0, 0, 0, 0.20),
        inset 0 0 6px rgba(165, 201, 149, 1) !important;
}

/* ОБНОВЛЕНО: Игровое меню - все кнопки опущены еще на 40px */
#in-game-menu-modal .menu-panel {
    width: 303px;
    height: 388px;
}

#in-game-menu-modal .restart-button {
    top: 163px; /* ОБНОВЛЕНО: было 123px, стало 163px (+40px) */
    --normal-shadow-color: rgba(204, 219, 251, 0.0);
    --normal-shadow-blur: 8px;
}

#in-game-menu-modal .main-menu-button {
    top: 219px; /* ОБНОВЛЕНО: было 179px, стало 219px (+40px) */
    --normal-shadow-color: rgba(204, 219, 251, 0.0);
    --normal-shadow-blur: 8px;
}

#in-game-menu-modal .stats-button {
    top: 275px; /* ОБНОВЛЕНО: было 235px, стало 275px (+40px) */
    --normal-shadow-color: rgba(204, 219, 251, 0.0);
    --normal-shadow-blur: 8px;
}

#in-game-menu-modal .cheat-button {
    top: 331px; /* ОБНОВЛЕНО: было 291px, стало 331px (+40px) */
    --normal-shadow-color: rgba(248, 199, 131, 0.0);
    --normal-shadow-blur: 8px;
}

/* ДОБАВЛЕНА КНОПКА "ТЕМЫ" В ИГРОВОМ МЕНЮ */
#in-game-menu-modal .themes-button {
    top: 387px; /* ОБНОВЛЕНО: было 347px, стало 387px (+40px) */
    --normal-shadow-color: rgba(165, 201, 149, 0.0);
    --normal-shadow-blur: 8px;
}

#in-game-menu-modal .restart-button:active,
#in-game-menu-modal .main-menu-button:active,
#in-game-menu-modal .stats-button:active {
    --shadow-color: rgba(204, 219, 251, 1);
    --shadow-blur: 6px;
}

#in-game-menu-modal .cheat-button:active {
    --shadow-color: rgba(248, 199, 131, 1);
    --shadow-blur: 6px;
}

#in-game-menu-modal .themes-button:active {
    --shadow-color: rgba(165, 201, 149, 1);
    --shadow-blur: 6px;
}

/* ОБНОВЛЕНО: ОКНО ЗАВЕРШЕНИЯ ИГРЫ - опущено еще на 40px */
#game-end-modal .menu-panel {
    width: 303px;
    height: 256px;
}

/* ОБНОВЛЕНО: Заголовок победы опущен еще на 40px */
.victory-title {
    position: absolute;
    top: 130px; /* ОБНОВЛЕНО: было 90px, стало 130px (+40px) */
    left: 50%;
    transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    z-index: 10;
}

/* ОБНОВЛЕНО: Число 2048 или лучшая плитка опущено еще на 40px */
.score-number {
    position: absolute;
    top: 172px; /* ОБНОВЛЕНО: было 132px, стало 172px (+40px) */
    left: 50%;
    transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 40px;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    z-index: 10;
}

/* ОБНОВЛЕНО: Контейнер счета игры опущен еще на 40px */
.game-score-container {
    position: absolute;
    top: 240px; /* ОБНОВЛЕНО: было 200px, стало 240px (+40px) */
    left: 58px;
    width: 256px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.game-score-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
}

.game-score-value {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
}

/* ОБНОВЛЕНО: Кнопка главного меню в окне завершения опущена еще на 40px */
#game-end-modal .main-menu-button {
    top: 280px; /* ОБНОВЛЕНО: было 240px, стало 280px (+40px) */
    --normal-shadow-color: rgba(204, 219, 251, 0.0);
    --normal-shadow-blur: 8px;
}

#game-end-modal .main-menu-button:active {
    --shadow-color: rgba(204, 219, 251, 1);
    --shadow-blur: 6px;
}

/* ОБНОВЛЕНО: ОКНО НАЧАЛА ИГРЫ НА ВРЕМЯ - опущено еще на 40px */
#start-time-modal .menu-panel {
    width: 303px;
    height: 166px;
}

/* ОБНОВЛЕНО: Текст описания опущен еще на 40px */
#start-time-modal .description-text {
    position: absolute;
    top: 52px; /* ОБНОВЛЕНО: было 92px, стало 132px (+40px) */
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    line-height: 1.4;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    z-index: 15;
    pointer-events: none;
}

/* ОБНОВЛЕНО: КНОПКА ДЛЯ ОКНА НАЧАЛА ИГРЫ НА ВРЕМЯ опущена еще на 40px */
#start-time-modal .menu-button-item {
    width: 259px;
    height: 40px;
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 86px; /* ОБНОВЛЕНО: было 126px, стало 166px (+40px) */
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.00);
    box-shadow: 
        0px 2px 16px rgba(0, 1, 50, 0.16),
        inset 0 0 var(--normal-shadow-blur) var(--normal-shadow-color);
    z-index: 10;
    border: none;
    cursor: pointer;
    --normal-shadow-color: rgba(248, 199, 131, 0.0);
    --normal-shadow-blur: 8px;
}

/* Градиенты для кнопки */
#start-time-modal .menu-button-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    padding: 1.1px;
    background: linear-gradient(155deg, 
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(255, 255, 255, 0.0) 30%,
        rgba(255, 255, 255, 0.0) 90%,
        rgba(255, 255, 255, 0.1) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

#start-time-modal .menu-button-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    padding: 1.1px;
    background: linear-gradient(205deg, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(255, 255, 255, 0.1) 30%,
        rgba(255, 255, 255, 0.1) 90%,
        rgba(255, 255, 255, 0.4) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* Градиентная заливка для кнопки */
#start-time-modal .menu-button-item > .button-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.06) 75%,
        rgba(255, 255, 255, 0.10) 100%);
    opacity: 0.65;
    pointer-events: none;
    z-index: 1;
}

/* Текст кнопки */
#start-time-modal .menu-button-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}

/* Эффект нажатия для кнопки */
#start-time-modal .menu-button-item:active {
    box-shadow: 
        inset 0 0 36px rgba(0, 0, 0, 0.20),
        inset 0 0 var(--shadow-blur) var(--shadow-color);
}

#start-time-modal .menu-button-item:active {
    --shadow-color: rgba(248, 199, 131, 1);
    --shadow-blur: 6px;
}

/* Специальные стили для плиток в режиме 5x5 */
.game-board-container .cell[style*="50px"] .tile[data-value="2"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="4"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="8"] .tile-number {
    font-size: 28px !important;
}

.game-board-container .cell[style*="50px"] .tile[data-value="16"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="32"] .tile-number, 
.game-board-container .cell[style*="50px"] .tile[data-value="64"] .tile-number {
    font-size: 25px !important;
}

.game-board-container .cell[style*="50px"] .tile[data-value="128"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="256"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="512"] .tile-number {
    font-size: 21px !important;
}

.game-board-container .cell[style*="50px"] .tile[data-value="1024"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="2048"] .tile-number 
.game-board-container .cell[style*="50px"] .tile[data-value="4096"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="8192"] .tile-number,{
    font-size: 18px !important;
}


.game-board-container .cell[style*="50px"] .tile[data-value="16384"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="32768"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="65536"] .tile-number, {
    font-size: 14px !important;
}


.game-board-container .cell[style*="50px"] .tile[data-value="131072"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="262144"] .tile-number,
.game-board-container .cell[style*="50px"] .tile[data-value="524288"] .tile-number, {
    font-size: 12px !important;
}


.game-board-container .cell[style*="50px"] .tile[data-value="1048576"] .tile-number {
    font-size: 10px !important;
}

/* ОБНОВЛЕНО: Окно продолжения игры */
#continue-game-modal .menu-panel {
    width: 303px;
    height: 166px;
}

/* ОБНОВЛЕНО: Текст вопроса опущен еще на 40px */
#continue-game-modal .confirmation-text {
    position: absolute;
    top: 148px; /* ОБНОВЛЕНО: было 128px, стало 168px (+40px) */
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    line-height: 1.4;
    z-index: 10;
}

/* ОБНОВЛЕНО: Кнопки продолжения/новой игры опущены еще на 40px */
#continue-game-modal .buttons-horizontal {
    position: absolute;
    top: 202px; /* ОБНОВЛЕНО: было 192px, стало 232px (+40px) */
    left: 58px;
    width: 259px;
    display: flex;
    justify-content: space-between;
    z-index: 10;
}

#continue-game-modal .menu-button-item {
    width: 120px;
    height: 40px;
    position: relative;
    left: auto;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.00);
    box-shadow: 
        0px 2px 16px rgba(0, 1, 50, 0.16),
        inset 0 0 var(--normal-shadow-blur) var(--normal-shadow-color);
    z-index: 10;
    border: none;
    cursor: pointer;
}

/* Специальные нажатые состояния для кнопок в окне продолжения */
#continue-game-modal .no-button:active {
    box-shadow: 
        inset 0 0 36px rgba(0, 0, 0, 0.20),
        inset 0 0 6px rgba(248, 199, 131, 1) !important;
}

#continue-game-modal .yes-button:active {
    box-shadow: 
        inset 0 0 36px rgba(0, 0, 0, 0.20),
        inset 0 0 6px rgba(165, 201, 149, 1) !important;
}