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

body {
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(135deg, #f8990b 0%, #764ba2 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 10px;
    position: relative;
    overflow-x: hidden;
}


body {
    transition: background 0.4s ease-out;
}

body {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE 10+ and Older Edge */
  user-select: none;         /* Standard syntax (Chrome, Edge, Opera) */
}


@keyframes bgFlashMatch {
    0% { background: linear-gradient(135deg, #ffd700 0%, #f8990b 50%, #fac007 100%); }
    100% { background: linear-gradient(135deg, #f8990b 0%, #764ba2 100%); }
}

@keyframes bgFlashTrophy {
    0% { background: linear-gradient(135deg, #ffed4e 0%, #ffd700 50%, #f8990b 100%); }
    100% { background: linear-gradient(135deg, #f8990b 0%, #764ba2 100%); }
}

/* ========== КНОПКА PLAY ========== */
.play-btn {
    margin: 30px auto 0; /* ← было margin-top: 30px, стало margin: 30px auto 0 */
    padding: 18px 50px;
    font-size: 1.3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 50%, #d63031 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center; /* ← добавлено */
    gap: 12px;
    box-shadow: 
        0 6px 20px rgba(230, 57, 70, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -3px 0 rgba(0, 0, 0, 0.15);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: playBtnAppear 0.8s ease-out 0.9s both, playPulse 2s ease-in-out 1.7s infinite;
    overflow: hidden;
    position: relative;
}

/* Блеск при наведении */
.play-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    transition: left 0.6s ease;
}

.play-btn:hover::before {
    left: 100%;
}

.play-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 10px 30px rgba(230, 57, 70, 0.7),
        0 0 0 5px rgba(255, 107, 107, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, #ff8787 0%, #ff6b6b 50%, #ee5a5a 100%);
}

.play-btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 
        0 3px 10px rgba(230, 57, 70, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.play-icon {
    font-size: 1.5rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

.play-btn:hover .play-icon {
    transform: scale(1.2) translateX(3px);
}

.play-text {
    text-transform: uppercase;
}

@keyframes playBtnAppear {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes playPulse {
    0%, 100% {
        box-shadow: 
            0 6px 20px rgba(230, 57, 70, 0.5),
            inset 0 2px 0 rgba(255, 255, 255, 0.3),
            inset 0 -3px 0 rgba(0, 0, 0, 0.15);
    }
    50% {
        box-shadow: 
            0 6px 20px rgba(230, 57, 70, 0.7),
            0 0 0 8px rgba(255, 107, 107, 0),
            inset 0 2px 0 rgba(255, 255, 255, 0.3),
            inset 0 -3px 0 rgba(0, 0, 0, 0.15);
    }
}

/* Адаптивность */
@media (max-width: 600px) {
    .play-btn {
        padding: 15px 40px;
        font-size: 1.1rem;
        margin-top: 20px;
    }
    
    .play-icon {
        font-size: 1.3rem;
    }
}

/* ========== ВСПЫШКА ФОНА ========== */
.background-flash {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-out;
}

.background-flash.match {
    background: linear-gradient(135deg, #ffd700 0%, #f8990b 50%, #fac007 100%);
}

.background-flash.trophy {
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 50%, #f8990b 100%);
}

.background-flash.victory {
    background: linear-gradient(135deg, #ffd700 0%, #ff6b6b 50%, #f8990b 100%);
}

.background-flash.active {
    opacity: 0.5;
    transition: opacity 0.15s ease-in; /* Быстрое появление */
}

/* ========== ИНТЕРАКТИВНЫЕ ЧАСТИЦЫ ========== */
#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 101;
    pointer-events: none;
}

/* ========== СТАРТОВЫЙ ЭКРАН ========== */
.start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8990b 0%, #764ba2 100%);
    /* УБРАНА анимация startFadeOut */
}

.floating-summer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.floating-summer-item {
    position: absolute;
    font-size: 3rem;
    opacity: 0.25;
    animation: summerFloat 8s ease-in-out infinite;
}

@keyframes summerFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(30px, -40px) rotate(15deg) scale(1.1); }
    50% { transform: translate(-20px, 50px) rotate(-10deg) scale(0.9); }
    75% { transform: translate(-40px, -20px) rotate(-20deg) scale(1.05); }
}

.start-content {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: startContentIn 0.8s ease-out forwards;
    width: 100%;
    max-width: 700px;
}
/* ========== СОЛНЦЕ С СИЯНИЕМ ========== */
.sun-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
}

/* Внутреннее сияние */
.sun-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, 
        rgba(255, 237, 78, 0.8) 0%, 
        rgba(255, 215, 0, 0.5) 25%, 
        rgba(250, 192, 7, 0.2) 50%, 
        transparent 70%
    );
    border-radius: 50%;
    z-index: -1;
    animation: sunGlow 2.5s ease-in-out infinite;
    pointer-events: none;
}

/* Внешнее сияние */
.sun-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, 
        rgba(255, 215, 0, 0.3) 0%, 
        rgba(248, 153, 11, 0.1) 40%, 
        transparent 70%
    );
    border-radius: 50%;
    z-index: -2;
    animation: sunGlowOuter 3.5s ease-in-out infinite;
    pointer-events: none;
}

.sun {
    width: 300px;
    height: 300px;
    display: block;
    margin: 0 auto; /* ← ВАЖНО: центрирование */
    animation: sunSpin 20s linear infinite, sunFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.9));
    position: relative;
    z-index: 2;
    line-height: 1;
}

.sun-svg {
    width: 20rem;
    height: 20rem;
    display: block;
    animation: sunSpin 20s linear infinite, sunFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
    position: relative;
    z-index: 2;
    will-change: transform;
}

/* Вращаются только лучи, центр остаётся */
.sun-rays {
    transform-origin: 50px 50px;
    animation: raysSpin 20s linear infinite;
}

@keyframes raysSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes sunFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes sunSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes sunFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes sunGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.25);
        opacity: 1;
    }
}

@keyframes sunGlowOuter {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.35);
        opacity: 0.9;
    }
}

/* ========== ЗАГОЛОВОК ========== */
/* ========== ЗАГОЛОВОК "ЛЕТО ПРИШЛО!" ========== */
.start-title {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.title-letter {
    width: 48px;
    height: 48px;
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    animation: titleLetterAppear 0.4s ease-out both;
    animation-delay: var(--delay);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.title-letter:hover {
    transform: scale(1.15) rotateY(10deg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Пробел между словами */
.title-space {
    width: 15px;
}

/* Разные цвета для каждой буквы — летняя палитра */
.title-letter:nth-child(1)  { background: linear-gradient(135deg, #ff6b6b, #ee5a5a); } /* Л — красный */
.title-letter:nth-child(2)  { background: linear-gradient(135deg, #ff8c42, #f4a460); } /* е — оранжевый */
.title-letter:nth-child(3)  { background: linear-gradient(135deg, #f7971e, #ffd200); } /* т — оранжево-жёлтый */
.title-letter:nth-child(4)  { background: linear-gradient(135deg, #ffd700, #ffed4e); } /* о — золотой */
/* пробел */
.title-letter:nth-child(6)  { background: linear-gradient(135deg, #a8e063, #56ab2f); } /* п — зелёный */
.title-letter:nth-child(7)  { background: linear-gradient(135deg, #4facfe, #00f2fe); } /* р — голубой */
.title-letter:nth-child(8)  { background: linear-gradient(135deg, #43e97b, #38f9d7); } /* и — бирюзовый */
.title-letter:nth-child(9)  { background: linear-gradient(135deg, #fa709a, #fee140); } /* ш — розово-жёлтый */
.title-letter:nth-child(10) { background: linear-gradient(135deg, #a18cd1, #fbc2eb); } /* л — сиреневый */
.title-letter:nth-child(11) { background: linear-gradient(135deg, #f8990b, #fac007); } /* о — корпоративный оранжевый */
.title-letter:nth-child(12) { background: linear-gradient(135deg, #ff6b6b, #ff8c42); } /* ! — красно-оранжевый */

@keyframes titleLetterAppear {
    0% {
        opacity: 0;
        transform: scale(0.3) rotateX(90deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateX(0deg);
    }
}

/* ========== АДАПТИВНОСТЬ СТАРТОВОГО ЭКРАНА ========== */
@media (max-width: 600px) {
    /* Уменьшаем солнце */
    .sun {
        font-size: 10rem; /* Было 20rem */
    }
    
    .sun-wrapper {
        margin-bottom: 15px;
    }
    
    .sun-wrapper::before {
        width: 180px;
        height: 180px;
    }
    
    .sun-wrapper::after {
        width: 280px;
        height: 280px;
    }
    
    /* Буквы "Лето пришло!" — уменьшаем и разрешаем перенос */
    .start-title {
        gap: 4px;
        padding: 0 10px;
    }
    
    .title-letter {
        width: 30px;
        height: 30px;
        font-size: 1.1rem;
        border-radius: 6px;
    }
    
    .title-space {
        width: 8px;
    }
    
    /* Подпись */
    .start-subtitle {
        font-size: 1rem;
        padding: 0 20px;
    }
    
    .start-title {
        font-size: 2.5rem;
    }
}

/* Для очень маленьких экранов — перенос на 2 строки */
@media (max-width: 400px) {
    .title-letter {
        width: 26px;
        height: 26px;
        font-size: 1rem;
    }
    
    .start-title {
        gap: 3px;
    }
    
    .title-space {
        width: 6px;
    }
    
    .sun {
        font-size: 8rem;
    }
    
    .sun-wrapper::before {
        width: 150px;
        height: 150px;
    }
    
    .sun-wrapper::after {
        width: 230px;
        height: 230px;
    }
}

/* ========== ПОДПИСЬ ========== */
.start-subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: subtitleAppear 0.8s ease-out 0.6s both;
    font-weight: 500;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.4;
}

@keyframes subtitleAppear {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes startContentIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* ========== АДАПТИВНОСТЬ ========== */
@media (max-width: 600px) {
    .sun { font-size: 4.5rem; }
    
    .sun-wrapper::before {
        width: 150px;
        height: 150px;
    }
    
    .sun-wrapper::after {
        width: 240px;
        height: 240px;
    }
    
    .start-title {
        font-size: 2.5rem;
    }
    
    .start-subtitle {
        font-size: 1.1rem;
        padding: 0 20px;
    }
}

/* ========== ЭКРАН УРОВНЕЙ ========== */
.level-title {
    color: white;
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: levelTitleAppear 0.6s ease-out 0.4s forwards;
    opacity: 0;
    transform: translateY(-20px);
}

@keyframes levelTitleAppear {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ========== ИГРОВОЙ КОНТЕЙНЕР ========== */
.game-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========== ЗАГОЛОВОК ИГРЫ ========== */
.game-logo {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 5px 0 15px;
    position: relative;
    z-index: 1;
}

/* ========== ЛОГОТИП "МЕМОРИ" ========== */
.logo-letter {
    width: 50px;
    height: 50px;
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logo-letter:nth-child(1) { background: linear-gradient(135deg, #ff6b6b, #f7971e); } /* М — красно-оранжевый */
.logo-letter:nth-child(2) { background: linear-gradient(135deg, #4facfe, #00f2fe); } /* е — голубой */
.logo-letter:nth-child(3) { background: linear-gradient(135deg, #a8e063, #56ab2f); } /* м — зелёный */
.logo-letter:nth-child(4) { background: linear-gradient(135deg, #ffd700, #ffed4e); } /* о — золотой */
.logo-letter:nth-child(5) { background: linear-gradient(135deg, #fa709a, #fee140); } /* р — розово-жёлтый */
.logo-letter:nth-child(6) { background: linear-gradient(135deg, #ff6b6b, #a18cd1); } /* и — красно-фиолетовый */

/* Первоначальное появление при загрузке */
.logo-letter.appear {
    animation: letterAppear 0.4s ease-out both;
}
.logo-letter:nth-child(1).appear { animation-delay: 0.1s; }
.logo-letter:nth-child(2).appear { animation-delay: 0.2s; }
.logo-letter:nth-child(3).appear { animation-delay: 0.3s; }
.logo-letter:nth-child(4).appear { animation-delay: 0.4s; }
.logo-letter:nth-child(5).appear { animation-delay: 0.5s; }
.logo-letter:nth-child(6).appear { animation-delay: 0.6s; }

/* Анимация танца - запускается классом .dancing */
.logo-letter.dancing {
    animation: dance 0.5s ease-in-out both;
}
.logo-letter:nth-child(1).dancing { animation-delay: 0s; }
.logo-letter:nth-child(2).dancing { animation-delay: 0.1s; }
.logo-letter:nth-child(3).dancing { animation-delay: 0.2s; }
.logo-letter:nth-child(4).dancing { animation-delay: 0.3s; }
.logo-letter:nth-child(5).dancing { animation-delay: 0.4s; }
.logo-letter:nth-child(6).dancing { animation-delay: 0.5s; }

.logo-letter:hover {
    transform: scale(1.1) rotateY(10deg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

@keyframes letterAppear {
    0% { opacity: 0; transform: scale(0.3) rotateX(90deg); }
    100% { opacity: 1; transform: scale(1) rotateX(0deg); }
}

@keyframes dance {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-15px) scale(1.1); }
    60% { transform: translateY(0) scale(1); }
    80% { transform: translateY(-5px) scale(1.05); }
    100% { transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
    .logo-letter { width: 40px; height: 40px; font-size: 1.3rem; }
    .game-logo { gap: 5px; }
}

/* ========== СТАТИСТИКА ========== */
.stats {
    font-size: 1.1rem;
    color: white;
    margin-bottom: 10px;
    font-weight: 400;
    position: relative;
    z-index: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* ========== СЕТКА ========== */
.grid {
    display: grid;
    gap: 10px;
    perspective: 1000px;
    max-width: 100%;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    justify-content: center;
}

.grid.easy { 
    grid-template-columns: repeat(4, minmax(60px, 90px)); 
    grid-template-rows: repeat(3, auto); 
}

.grid.medium { 
    grid-template-columns: repeat(4, minmax(60px, 90px)); 
    grid-template-rows: repeat(4, auto); 
}

.grid.hard { 
    grid-template-columns: repeat(5, minmax(50px, 80px)); 
    grid-template-rows: repeat(4, auto); 
}

/* ========== КАРТОЧКИ ========== */
.card {
    aspect-ratio: 1 / 1;
    background-color: #3498db;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s, box-shadow 0.3s;
    opacity: 0;
    /* УБРАЛИ transform: scale(0.3) — он мешал flip-анимации */
}

.card.appear {
    animation: cardAppear 0.4s ease-out forwards;
}

/* ========== МОБИЛЬНАЯ АДАПТАЦИЯ ========== */
@media (max-width: 600px) {
    .logo-letter { 
        width: 36px; 
        height: 36px; 
        font-size: 1.1rem; 
    }
    .game-logo { gap: 4px; }
    
    .stats {
        font-size: 0.85rem;
        margin-bottom: 8px;
        padding: 0 10px;
        text-align: center;
    }
    
    .grid {
        gap: 6px;
        padding: 0 8px;
    }
    
    .grid.easy { 
        grid-template-columns: repeat(4, minmax(55px, 75px)); 
    }
    .grid.medium { 
        grid-template-columns: repeat(4, minmax(55px, 75px)); 
    }
    .grid.hard { 
        grid-template-columns: repeat(5, minmax(45px, 65px)); 
    }
    
    .game-container button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .sound-btn, .achievements-btn, .leaderboard-btn {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        top: 10px !important;
    }
    
    .sound-btn { left: 10px !important; }
    .achievements-btn { left: 58px !important; }
    .leaderboard-btn { left: 106px !important; }
    
    .trophy-container {
        top: 10px;
        right: 10px;
    }
    
    .trophy {
        padding: 6px 10px;
        border-radius: 10px;
    }
    
    .trophy-icon { font-size: 1.4rem; }
    .trophy-count { font-size: 1.1rem; }
    
    .trophy-streak {
        font-size: 0.75rem;
        margin-top: 4px;
    }
}

@keyframes cardAppear {
    0% { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: scale(1); }
}

.card.visible { opacity: 1; transform: scale(1) }

.card:hover {
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.card.flipped {
    transform: rotateY(180deg);
    background-color: #fff;
}

.card-front, .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 6px;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-front { background: linear-gradient(135deg, #fac007, #f8990b); }

.card-back {
    background-color: #fff;
    transform: rotateY(180deg);
    user-select: none;
    padding: 5px;
}

.card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

@media (max-width: 600px) {
    .card-back img { width: 90%; height: 90%; }
}

.card.matched {
    transform: rotateY(180deg);
    pointer-events: none;
    animation: matchedPulse 2s ease-in-out infinite;
}

.card.matched .card-back {
    background: linear-gradient(135deg, #f8990b, #fac007);
    border: 2px solid #fff;
}

.card.matched .card-back img {
    background-color: azure;
    opacity: 0.85;
    padding: 5px;
    box-sizing: border-box;
}

@keyframes matchedPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 153, 11, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(248, 153, 11, 0); }
}

/* ========== ИСЧЕЗНОВЕНИЕ КАРТОЧЕК ========== */
.card.disappear {
    animation: cardDisappear 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes cardDisappear {
    0% { opacity: 1; transform: scale(1) rotateY(180deg); }
    50% { opacity: 0.5; transform: scale(0.7) rotateY(180deg); }
    100% { opacity: 0; transform: scale(0.2) rotateY(180deg); }
}

/* ========== ПОБЕДНЫЙ ЭКРАН ========== */
.win-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8990b 0%, #764ba2 100%);
    text-align: center;
}

.win-screen.show {
    display: flex;
    animation: fadeIn 0.5s ease-out;
}

.win-content {
    position: relative;
    z-index: 102;
}

/* ========== КУБОК НА ПОБЕДНОМ ЭКРАНЕ ========== */
.win-trophy-wrapper {
    position: relative;
    display: inline-block;
    margin: 0 auto 20px;
}

/* Сияющий свет за кубком */
.win-trophy-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, rgba(255, 215, 0, 0.3) 30%, rgba(255, 215, 0, 0.1) 60%, transparent 80%);
    border-radius: 50%;
    z-index: -1;
    animation: trophyGlow 2s ease-in-out infinite;
    pointer-events: none;
}

/* Внешнее сияние */
.win-trophy-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 237, 78, 0.3) 0%, rgba(255, 215, 0, 0.1) 40%, transparent 70%);
    border-radius: 50%;
    z-index: -2;
    animation: trophyGlowOuter 3s ease-in-out infinite;
    pointer-events: none;
}

.win-trophy-img {
    width: 180px;
    height: 180px;
    display: block;
    animation: winTrophyAppear 0.8s ease-out 0.2s both;
    filter: drop-shadow(0 4px 15px rgba(255, 215, 0, 0.5));
    position: relative;
    z-index: 2;
}

@keyframes trophyGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

@keyframes trophyGlowOuter {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.9;
    }
}

@keyframes winTrophyAppear {
    0% { opacity: 0; transform: scale(0.3) rotate(-180deg); }
    60% { transform: scale(1.2) rotate(10deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (max-width: 600px) {
    .win-trophy-img { width: 90px; height: 90px; }
    
    .win-trophy-wrapper::before {
        width: 150px;
        height: 150px;
    }
    
    .win-trophy-wrapper::after {
        width: 220px;
        height: 220px;
    }
}
/* ========== ЗАГОЛОВОК ПОБЕДЫ (БУКВЫ) ========== */
.win-title {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.win-letter {
    width: 45px;
    height: 45px;
    color: white;
    font-size: 1.4rem;
    font-weight: 700;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    animation: winLetterAppear 0.4s ease-out both;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.win-letter:hover {
    transform: scale(1.1) rotateY(10deg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.win-letter:nth-child(1) { background: linear-gradient(135deg, #fac007, #f8990b); animation-delay: 0.1s; }
.win-letter:nth-child(2) { background: linear-gradient(135deg, #ffd700, #fac007); animation-delay: 0.15s; }
.win-letter:nth-child(3) { background: linear-gradient(135deg, #ffed4e, #ffd700); animation-delay: 0.2s; }
.win-letter:nth-child(4) { background: linear-gradient(135deg, #f8990b, #f4a460); animation-delay: 0.25s; }
.win-letter:nth-child(5) { background: linear-gradient(135deg, #ff6b6b, #f8990b); animation-delay: 0.3s; }
.win-letter:nth-child(6) { background: linear-gradient(135deg, #ff8c42, #f4a460); animation-delay: 0.35s; }
.win-letter:nth-child(7) { background: linear-gradient(135deg, #f8990b, #ff6b6b); animation-delay: 0.4s; }
.win-letter:nth-child(8) { background: linear-gradient(135deg, #fac007, #ff8c42); animation-delay: 0.45s; }
.win-letter:nth-child(9) { background: linear-gradient(135deg, #ffd700, #f8990b); animation-delay: 0.5s; }
.win-letter:nth-child(10) { background: linear-gradient(135deg, #ffed4e, #f4a460); animation-delay: 0.55s; }
.win-letter:nth-child(11) { background: linear-gradient(135deg, #f8990b, #fac007); animation-delay: 0.6s; }
.win-letter:nth-child(12) { background: linear-gradient(135deg, #ff6b6b, #ff8c42); animation-delay: 0.65s; }

@keyframes winLetterAppear {
    0% { opacity: 0; transform: scale(0.3) rotateX(90deg); }
    100% { opacity: 1; transform: scale(1) rotateX(0deg); }
}

@media (max-width: 600px) {
    .win-letter { width: 35px; height: 35px; font-size: 1.1rem; }
    .win-title { gap: 5px; }
}

/* ========== ТЕКСТ ПОБЕДЫ ========== */
.win-subtitle {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
    animation: fadeIn 0.6s ease-out 0.7s both;
}

.win-stats {
    font-size: 1.3rem;
    color: white;
    margin-bottom: 25px;
    animation: fadeIn 0.6s ease-out 1.1s both;
}

.win-content button {
    animation: fadeIn 0.6s ease-out 1.5s both;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========== ТРОФЕИ ========== */
.trophy-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 50;
    text-align: right;
    will-change: transform; /* Оптимизация для GPU */
}

.trophy {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    padding: 10px 15px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.5s ease;
}

.trophy.show { opacity: 1; transform: translateX(0); }

.trophy-icon {
    font-size: 2rem;
    animation: trophyBounce 0.6s ease-out;
}

.trophy-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.trophy-streak {
    margin-top: 8px;
    font-size: 0.9rem;
    color: white;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.trophy-streak.show { opacity: 1; }

@keyframes trophyBounce {
    0% { transform: scale(0) rotate(-180deg); }
    50% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.trophy.new-trophy { animation: trophyPulse 0.8s ease-out; }

@keyframes trophyPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); box-shadow: 0 6px 25px rgba(255, 215, 0, 0.6); }
}

/* ========== АДАПТИВНОСТЬ ПОБЕДНОГО ЭКРАНА ========== */
@media (max-width: 600px) {
    /* Уменьшаем кубок */
    .win-trophy-img {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
    }
    
    .win-trophy-wrapper::before {
        width: 150px;
        height: 150px;
    }
    
    .win-trophy-wrapper::after {
        width: 220px;
        height: 220px;
    }
    
    /* Буквы "Поздравляем!" — уменьшаем */
    .win-title {
        gap: 4px;
        padding: 0 10px;
    }
    
    .win-letter {
        width: 26px;
        height: 26px;
        font-size: 1rem;
        border-radius: 5px;
    }
    
    /* Подпись и статистика */
    .win-subtitle {
        font-size: 1.3rem;
        padding: 0 15px;
    }
    
    .win-stats {
        font-size: 1rem;
        padding: 0 15px;
    }
    
    /* Кнопка */
    .win-content button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 400px) {
    .win-letter {
        width: 22px;
        height: 22px;
        font-size: 0.85rem;
    }
    
    .win-title {
        gap: 3px;
    }
    
    .win-trophy-img {
        width: 80px;
        height: 80px;
    }
    
    .win-trophy-wrapper::before {
        width: 120px;
        height: 120px;
    }
    
    .win-trophy-wrapper::after {
        width: 180px;
        height: 180px;
    }
}

/* ========== ДЕМО-РЕЖИМ ========== */
.demo-indicator {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    display: none;
    animation: demoPulse 2s ease-in-out infinite;
}

.demo-indicator.show { display: block; }

@keyframes demoPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ========== ЧАСТИЦЫ ========== */
.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    animation: particleFly 1s ease-out forwards;
}

@keyframes particleFly {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}

/* ========== КНОПКИ ПАНЕЛЕЙ ========== */
/* ========== КРУГЛЫЕ КНОПКИ ПАНЕЛЕЙ ========== */
.sound-btn, .achievements-btn, .leaderboard-btn {
    position: fixed;
    z-index: 200;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
    padding: 0;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    animation: btnAppear 0.5s ease-out both;
    overflow: hidden;
}

/* Анимация появления по очереди */
.sound-btn { animation-delay: 0.1s; }
.achievements-btn { animation-delay: 0.2s; }
.leaderboard-btn { animation-delay: 0.3s; }

@keyframes btnAppear {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Блеск при наведении */
.sound-btn::before, .achievements-btn::before, .leaderboard-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    transition: left 0.5s ease;
    z-index: 1;
}

.sound-btn:hover::before, .achievements-btn:hover::before, .leaderboard-btn:hover::before {
    left: 100%;
}

/* ========== КНОПКА ЗВУКА ========== */
.sound-btn {
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
    color: white;
    padding: 0;
}

.sound-icon {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1); /* Делаем иконку белой */
    transition: transform 0.3s ease;
    pointer-events: none;
}

.sound-btn:hover .sound-icon {
    transform: scale(1.1);
}

.sound-btn:active .sound-icon {
    transform: scale(0.9);
}

.sound-btn.muted .sound-icon {
    filter: brightness(0) invert(1) opacity(0.6); /* Полупрозрачная когда выключен */
}

/* ========== АДАПТИВНОСТЬ КРУГЛЫХ КНОПОК ========== */
@media (max-width: 600px) {
    .sound-btn, .achievements-btn, .leaderboard-btn {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
        top: 15px !important;
    }
    
    /* Горизонтальное расположение слева */
    .sound-btn {
        left: 15px !important;
    }
    
    .achievements-btn {
        left: 70px !important; /* 15 + 45 + 10px отступ */
    }
    
    .leaderboard-btn {
        left: 125px !important; /* 70 + 45 + 10px отступ */
    }
    
    /* Hover-эффекты */
    .sound-btn:hover {
        transform: scale(1.15) rotate(15deg);
    }
    
    .achievements-btn:hover {
        transform: scale(1.15) rotate(-15deg);
    }
    
    .leaderboard-btn:hover {
        transform: scale(1.15) rotate(15deg);
    }
}

@keyframes btnShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

/* ========== КНОПКА ДОСТИЖЕНИЙ (золотая) ========== */
.achievements-btn {
    top: 85px;
    left: 20px;
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    color: white;
}

.achievements-btn:hover {
    transform: scale(1.15) rotate(-15deg);
    box-shadow: 
        0 8px 25px rgba(247, 151, 30, 0.5),
        0 0 0 4px rgba(255, 210, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, #ffa72e 0%, #ffe210 100%);
}

.achievements-btn:active {
    transform: scale(0.95);
}

/* ========== КНОПКА РЕКОРДОВ (синяя) ========== */
.leaderboard-btn {
    top: 150px;
    left: 20px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.leaderboard-btn:hover {
    transform: scale(1.15) rotate(15deg);
    box-shadow: 
        0 8px 25px rgba(79, 172, 254, 0.5),
        0 0 0 4px rgba(0, 242, 254, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, #5fbffe 0%, #10f2fe 100%);
}

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

/* ========== АДАПТИВНОСТЬ ========== */
@media (max-width: 600px) {
    .sound-btn, .achievements-btn, .leaderboard-btn {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
    
    .sound-btn { top: 15px; left: 15px; }
    .achievements-btn { top: 70px; left: 15px; }
    .leaderboard-btn { top: 125px; left: 15px; }
}

.sound-btn { top: 20px; left: 20px; }
.achievements-btn { top: 80px; left: 20px; }
.leaderboard-btn { top: 140px; left: 20px; }
.sound-btn.muted { background: linear-gradient(135deg, #999, #666); }



/* ========== ПАНЕЛИ ========== */
.achievements-panel, .leaderboard-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    overflow: hidden;
}

.achievements-panel.show, .leaderboard-panel.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.achievements-header, .leaderboard-header {
    background: linear-gradient(135deg, #f8990b, #fac007);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.achievements-header h3, .leaderboard-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

/* Кнопка закрытия панели */
.close-panel {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.5rem;
    padding: 0;
    margin: 0;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}

.close-panel::before {
    display: none;
}

.close-panel:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    transform: rotate(90deg) !important;
    box-shadow: none !important;
}

.close-panel:active {
    transform: rotate(90deg) scale(0.9) !important;
}

.achievements-list, .leaderboard-content {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 60px);
}

/* ========== ДОСТИЖЕНИЯ ========== */
.achievement-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    margin-bottom: 10px;
    background: #f8f8f8;
    border-radius: 12px;
    border-left: 4px solid #ccc;
    transition: all 0.3s ease;
}

.achievement-item.unlocked {
    background: linear-gradient(135deg, #fff8e1, #fff3c4);
    border-left-color: #f8990b;
}

.achievement-item.locked {
    opacity: 0.6;
    filter: grayscale(0.5);
}

.achievement-icon { font-size: 2rem; min-width: 50px; text-align: center; }
.achievement-info { flex: 1; }
.achievement-name { font-weight: 600; font-size: 1rem; color: #333; margin-bottom: 3px; }
.achievement-desc { font-size: 0.85rem; color: #666; }
.achievement-item.unlocked .achievement-name { color: #f8990b; }

.achievement-item.just-unlocked { animation: achievementUnlock 1s ease-out; }

@keyframes achievementUnlock {
    0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(248, 153, 11, 0.7); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(248, 153, 11, 0); }
    100% { transform: scale(1); }
}

/* ========== ТАБЛИЦА РЕКОРДОВ ========== */
.leaderboard-level { margin-bottom: 20px; }
.leaderboard-level h4 { color: #f8990b; margin-bottom: 10px; font-size: 1.1rem; }

.leaderboard-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8f8f8;
    border-radius: 8px;
    margin-bottom: 5px;
    font-size: 0.9rem;
    flex-wrap: wrap;
    gap: 5px;
}

.leaderboard-row.top-1 { background: linear-gradient(135deg, #ffd700, #ffed4e); font-weight: 600; }
.leaderboard-row.top-2 { background: linear-gradient(135deg, #e0e0e0, #f5f5f5); }
.leaderboard-row.top-3 { background: linear-gradient(135deg, #f4a460, #fdd9b0); }
.leaderboard-empty { text-align: center; color: #999; padding: 20px; font-style: italic; }

/* ========== АНИМАЦИЯ ПОБЕДЫ (ПЕРСОНАЖ) ========== */
.victory-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.victory-animation.show {
    display: flex;
    animation: fadeIn 0.5s ease-out;
}

.clapping-character {
    text-align: center;
    animation: characterBounce 0.8s ease-out;
}

.character-body { position: relative; display: inline-block; }
.character-head { font-size: 6rem; animation: headBob 1s ease-in-out infinite; }

.character-arms {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: -20px;
}

.arm { font-size: 3rem; animation: clap 0.5s ease-in-out infinite; }
.arm.right { animation-delay: 0.25s; }

@keyframes characterBounce {
    0% { opacity: 0; transform: scale(0.3) translateY(100px); }
    60% { transform: scale(1.1) translateY(-20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes headBob {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes clap {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(20deg) scale(1.2); }
}

.victory-text {
    font-size: 3rem;
    color: #ffd700;
    font-weight: 700;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
    margin-top: 20px;
    animation: victoryTextPulse 1s ease-in-out infinite;
}

@keyframes victoryTextPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ========== КОНТЕЙНЕР УВЕДОМЛЕНИЙ ========== */
.notifications-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 400;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    max-width: 350px;
    width: max-content;
}

.achievement-notification {
    background: linear-gradient(135deg, #f8990b, #fac007);
    color: white;
    padding: 15px 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
    transform: translateX(-400px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    pointer-events: auto;
}

.achievement-notification.show { transform: translateX(0); opacity: 1; }
.achievement-notification.removing { transform: translateX(-400px); opacity: 0; }

.achievement-notification-icon {
    font-size: 2.5rem;
    animation: notificationIconBounce 0.8s ease-out;
}

@keyframes notificationIconBounce {
    0% { transform: scale(0) rotate(-180deg); }
    50% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@media (max-width: 600px) {
    .notifications-container { bottom: 15px; left: 15px; right: 15px; max-width: none; }
    .achievement-notification { padding: 12px 18px; }
    .achievement-notification-icon { font-size: 2rem; }
}
/* ========== ЭКРАН ВЫБОРА УРОВНЯ ========== */
.level-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(135deg, #f8990b 0%, #764ba2 100%);
}

.level-screen.show {
    display: flex !important; /* Показываем через класс */
}

.level-screen .level-title {
    color: white;
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: levelTitleAppear 0.6s ease-out 0.4s forwards;
    opacity: 0;
    transform: translateY(-20px);
}

@keyframes levelTitleAppear {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.level-screen .level-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
}

/* ========== КНОПКИ ========== */
button {
    margin-top: 15px;
    padding: 14px 32px;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 50%, #d63031 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 
        0 4px 15px rgba(230, 57, 70, 0.4),
        0 0 0 0 rgba(255, 107, 107, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

/* Блеск, пробегающий по кнопке */
button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    transition: left 0.6s ease;
    z-index: -1;
}

button:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 8px 25px rgba(230, 57, 70, 0.6),
        0 0 0 4px rgba(255, 107, 107, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #ff8787 0%, #ff6b6b 50%, #ee5a5a 100%);
}

button:hover::before {
    left: 100%;
}

button:active {
    transform: translateY(1px);
    box-shadow: 
        0 2px 8px rgba(230, 57, 70, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Пульсация для важных кнопок */
button.pulse {
    animation: buttonPulse 2s ease-in-out infinite;
}

@keyframes buttonPulse {
    0%, 100% {
        box-shadow: 
            0 4px 15px rgba(230, 57, 70, 0.4),
            0 0 0 0 rgba(255, 107, 107, 0.4);
    }
    50% {
        box-shadow: 
            0 4px 15px rgba(230, 57, 70, 0.6),
            0 0 0 10px rgba(255, 107, 107, 0);
    }
}   

/* ========== ЭКРАН ВЫБОРА УРОВНЯ ========== */
.level-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(135deg, #f8990b 0%, #764ba2 100%);
}

.level-screen.show {
    display: flex !important;
}

.level-screen .level-title {
    color: white;
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: levelTitleAppear 0.6s ease-out 0.4s forwards;
    opacity: 0;
    transform: translateY(-20px);
}

@keyframes levelTitleAppear {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ========== КНОПКИ УРОВНЕЙ ========== */
.level-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
}

.level-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 25px 20px 20px;
    min-width: 160px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -3px 0 rgba(0, 0, 0, 0.1);
    animation: levelBtnAppear 0.6s ease-out both;
}

/* Анимация появления по очереди */
.level-btn:nth-child(1) { animation-delay: 0.1s; }
.level-btn:nth-child(2) { animation-delay: 0.25s; }
.level-btn:nth-child(3) { animation-delay: 0.4s; }

@keyframes levelBtnAppear {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Блеск при наведении */
.level-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.level-btn:hover::before {
    left: 100%;
}

/* ========== ЛЁГКИЙ УРОВЕНЬ (зелёный) ========== */
.level-easy {
    background: linear-gradient(135deg, #56ab2f 0%, #a8e063 50%, #d4fc79 100%);
    color: white;
}

.level-easy:hover {
    background: linear-gradient(135deg, #6bc242 0%, #b8f073 50%, #e4ff89 100%);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 
        0 15px 35px rgba(86, 171, 47, 0.5),
        0 0 0 4px rgba(168, 224, 99, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.level-easy:active {
    transform: translateY(-2px) scale(1.02);
}

/* ========== СРЕДНИЙ УРОВЕНЬ (оранжевый) ========== */
.level-medium {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 50%, #ffed4e 100%);
    color: white;
}

.level-medium:hover {
    background: linear-gradient(135deg, #ffa72e 0%, #ffe210 50%, #fffd5e 100%);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 
        0 15px 35px rgba(247, 151, 30, 0.5),
        0 0 0 4px rgba(255, 210, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.level-medium:active {
    transform: translateY(-2px) scale(1.02);
}

/* ========== СЛОЖНЫЙ УРОВЕНЬ (красный) ========== */
.level-hard {
    background: linear-gradient(135deg, #cb2d3e 0%, #ef473a 50%, #ff6b6b 100%);
    color: white;
}

.level-hard:hover {
    background: linear-gradient(135deg, #db3d4e 0%, #ff574a 50%, #ff7b7b 100%);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 
        0 15px 35px rgba(203, 45, 62, 0.6),
        0 0 0 4px rgba(255, 107, 107, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.level-hard:active {
    transform: translateY(-2px) scale(1.02);
}

/* ========== ЭМОДЗИ ========== */
.level-emoji {
    font-size: 3.5rem;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s ease;
    animation: emojiFloat 3s ease-in-out infinite;
}

.level-btn:hover .level-emoji {
    transform: scale(1.2) rotate(10deg);
}

@keyframes emojiFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ========== НАЗВАНИЕ ========== */
.level-name {
    font-size: 1.3rem;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
}

/* ========== ОПИСАНИЕ ========== */
.level-desc {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.95;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
}

/* ========== АДАПТИВНОСТЬ ========== */
@media (max-width: 600px) {
    .level-buttons {
        gap: 12px;
    }
    
    .level-btn {
        min-width: 140px;
        padding: 20px 15px 15px;
    }
    
    .level-emoji {
        font-size: 2.8rem;
    }
    
    .level-name {
        font-size: 1.1rem;
    }
    
    .level-desc {
        font-size: 0.8rem;
    }
}