/* --- Базовые стили и Сброс --- */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 20px 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    transition: background-color 0.5s ease, background 0.5s ease;
    overflow: hidden; /* Убираем скроллбар у body */
}

/* --- Контейнер Игры --- */
#game-container {
    position: relative;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-align: center;
    width: 100%;
    max-width: 1000px;
    min-height: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
    overflow: hidden; /* Убираем скролл внутри контейнера */
}

h1 {
    margin-bottom: 30px;
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

h2 {
    margin-bottom: 20px;
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

/* --- Экраны и Анимация --- */
#selection-screen, #task-screen {
    width: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}

/* Класс для анимации исчезновения */
.fade-out {
    opacity: 0 !important;
    pointer-events: none;
}

/* --- Сетка Номеров --- */
#number-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
    max-width: 600px;
    margin: 20px auto 20px auto;
}

.number-button {
    padding: 12px 8px;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease, opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    min-width: 40px;
}

.number-button:active {
    transform: scale(0.95);
}

/* --- Текст Информации --- */
#info-text {
    font-style: italic;
    margin-top: 15px;
    transition: color 0.5s ease;
}

/* --- Экран Задания (внутренние стили) --- */
#task-screen {
    display: none;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    transition: opacity 0.4s ease-in-out;
    background-color: transparent;
}

#task-image {
    max-width: 90%;
    max-height: 300px;
    height: auto;
    margin-top: 15px;
    margin-bottom: 25px;
    border-radius: 5px;
    display: block;
    min-height: 100px;
    object-fit: contain;
    transition: border-color 0.5s ease, background-color 0.5s ease, filter 0.5s ease;
}

#continue-button {
    padding: 12px 25px;
    font-size: 1.1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, text-shadow 0.3s ease;
}

/* --- Базовые Стили Настроек (позиционирование, структура) --- */
#settings-icon {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.8em;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.5s ease, text-shadow 0.5s ease;
    z-index: 101;
}

#settings-icon:hover {
    transform: rotate(90deg);
}

#settings-panel {
    display: none;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 25px 35px;
    border-radius: 100px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 100;
    border: 1px solid;
    text-align: center;
    min-width: 600px;
    transition: background-color 0.5s ease, border-color 0.5s ease;
}

#settings-panel h3 {
    margin-top: 0;
    margin-bottom: 20px;
    transition: color 0.5s ease;
}

.theme-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 25px;
}

.theme-button, #close-settings {
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    border: 1px solid;
}

#close-settings {
    padding: 8px 20px;
    border: none;
}

/* === ОПРЕДЕЛЕНИЯ ТЕМ (Включая стили для #continue-button) === */

/* Тема 1: Светлая (Default) */
body.theme-light { background-color: #f0f0f0; }
body.theme-light #game-container { background-color: white; color: #333; border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
body.theme-light h1, body.theme-light h2 { color: #333; text-shadow: none; }
body.theme-light #info-text { color: #666; }
body.theme-light .number-button { background-color: #007bff; color: white; border: none; box-shadow: none; }
body.theme-light .number-button:hover { background-color: #0056b3; }
body.theme-light .number-button:disabled { background-color: #cccccc; color: #666666; opacity: 0.7; cursor: not-allowed; }
body.theme-light #task-image { border: 1px solid #ccc; background-color: #eee; filter: none; }
body.theme-light #continue-button { background-color: #007bff; color: white; text-shadow: none; box-shadow: none;}
body.theme-light #continue-button:hover { background-color: #0056b3; }
body.theme-light #settings-icon { color: #777; text-shadow: none; }
body.theme-light #settings-icon:hover { color: #333; }
body.theme-light #settings-panel { background-color: #f8f9fa; border-color: #dee2e6; }
body.theme-light #settings-panel h3 { color: #343a40; }
body.theme-light #settings-panel .theme-button { background-color: #ffffff; border-color: #ced4da; color: #495057;}
body.theme-light #settings-panel .theme-button:hover { background-color: #e9ecef; border-color: #adb5bd; }
body.theme-light #settings-panel #close-settings { background-color: #6c757d; color: white; border: none; }
body.theme-light #settings-panel #close-settings:hover { background-color: #5a6268; }

/* Тема 2: Темная */
body.theme-dark { background-color: #212529; }
body.theme-dark #game-container { background-color: #343a40; color: #f8f9fa; border: 1px solid #495057; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);}
body.theme-dark h1, body.theme-dark h2 { color: #e9ecef; text-shadow: none; }
body.theme-dark #info-text { color: #adb5bd; }
body.theme-dark .number-button { background-color: #6c757d; color: #f8f9fa; border: 1px solid #5a6268; box-shadow: none; }
body.theme-dark .number-button:hover { background-color: #5a6268; }
body.theme-dark .number-button:disabled { background-color: #495057; color: #adb5bd; opacity: 0.6; cursor: not-allowed; border-color: #6c757d; }
body.theme-dark #task-image { border: 1px solid #6c757d; background-color: #212529; filter: none; }
body.theme-dark #continue-button { background-color: #6c757d; color: #f8f9fa; text-shadow: none; box-shadow: none;}
body.theme-dark #continue-button:hover { background-color: #5a6268; }
body.theme-dark #settings-icon { color: #adb5bd; text-shadow: none; }
body.theme-dark #settings-icon:hover { color: #f8f9fa; }
body.theme-dark #settings-panel { background-color: #495057; border-color: #6c757d; }
body.theme-dark #settings-panel h3 { color: #f8f9fa; }
body.theme-dark #settings-panel .theme-button { background-color: #6c757d; border-color: #adb5bd; color: #f8f9fa;}
body.theme-dark #settings-panel .theme-button:hover { background-color: #5a6268; border-color: #dee2e6; }
body.theme-dark #settings-panel #close-settings { background-color: #adb5bd; color: #212529; border: none; }
body.theme-dark #settings-panel #close-settings:hover { background-color: #dee2e6; }

/* Тема 3: Лес */
body.theme-forest { background-color: #e8f5e9; }
body.theme-forest #game-container { background-color: #ffffff; color: #2e7d32; border: 2px solid #a5d6a7; box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2); }
body.theme-forest h1 { color: #1b5e20; text-shadow: none; }
body.theme-forest h2 { color: #2e7d32; text-shadow: none; }
body.theme-forest #info-text { color: #757575; }
body.theme-forest .number-button { background-color: #4caf50; color: white; border: none; box-shadow: none; }
body.theme-forest .number-button:hover { background-color: #388e3c; }
body.theme-forest .number-button:disabled { background-color: #a5d6a7; color: #616161; opacity: 0.7; cursor: not-allowed; }
body.theme-forest #task-image { border: 1px solid #a5d6a7; background-color: #e8f5e9; filter: none; }
body.theme-forest #continue-button { background-color: #4caf50; color: white; text-shadow: none; box-shadow: none;}
body.theme-forest #continue-button:hover { background-color: #388e3c; }
body.theme-forest #settings-icon { color: #4caf50; text-shadow: none; }
body.theme-forest #settings-icon:hover { color: #2e7d32; }
body.theme-forest #settings-panel { background-color: #f1f8e9; border-color: #a5d6a7; }
body.theme-forest #settings-panel h3 { color: #1b5e20; }
body.theme-forest #settings-panel .theme-button { background-color: #ffffff; border-color: #a5d6a7; color: #2e7d32;}
body.theme-forest #settings-panel .theme-button:hover { background-color: #e8f5e9; border-color: #4caf50; }
body.theme-forest #settings-panel #close-settings { background-color: #4caf50; color: white; border: none; }
body.theme-forest #settings-panel #close-settings:hover { background-color: #388e3c; }

/* Тема 4: Океан */
body.theme-ocean { background-color: #e0f7fa; }
body.theme-ocean #game-container { background-color: #ffffff; color: #0077c2; border: 2px solid #80deea; box-shadow: 0 4px 12px rgba(3, 169, 244, 0.2); }
body.theme-ocean h1 { color: #01579b; text-shadow: none; }
body.theme-ocean h2 { color: #0077c2; text-shadow: none; }
body.theme-ocean #info-text { color: #607d8b; }
body.theme-ocean .number-button { background-color: #03a9f4; color: white; border: none; box-shadow: none; }
body.theme-ocean .number-button:hover { background-color: #0288d1; }
body.theme-ocean .number-button:disabled { background-color: #b3e5fc; color: #455a64; opacity: 0.7; cursor: not-allowed; }
body.theme-ocean #task-image { border: 1px solid #80deea; background-color: #e0f7fa; filter: none; }
body.theme-ocean #continue-button { background-color: #03a9f4; color: white; text-shadow: none; box-shadow: none;}
body.theme-ocean #continue-button:hover { background-color: #0288d1; }
body.theme-ocean #settings-icon { color: #03a9f4; text-shadow: none; }
body.theme-ocean #settings-icon:hover { color: #01579b; }
body.theme-ocean #settings-panel { background-color: #e1f5fe; border-color: #80deea; }
body.theme-ocean #settings-panel h3 { color: #01579b; }
body.theme-ocean #settings-panel .theme-button { background-color: #ffffff; border-color: #80deea; color: #0077c2;}
body.theme-ocean #settings-panel .theme-button:hover { background-color: #e0f7fa; border-color: #03a9f4; }
body.theme-ocean #settings-panel #close-settings { background-color: #03a9f4; color: white; border: none; }
body.theme-ocean #settings-panel #close-settings:hover { background-color: #0288d1; }

/* Тема 5: Закат */
body.theme-sunset { background: linear-gradient(to bottom, #fbe9e7, #ffccbc); }
body.theme-sunset #game-container { background-color: rgba(255, 255, 255, 0.9); color: #d84315; border: 1px solid #ffab91; box-shadow: 0 4px 12px rgba(255, 112, 67, 0.3); }
body.theme-sunset h1 { color: #bf360c; text-shadow: none; }
body.theme-sunset h2 { color: #d84315; text-shadow: none; }
body.theme-sunset #info-text { color: #795548; }
body.theme-sunset .number-button { background-color: #ff7043; color: white; border: none; box-shadow: none; }
body.theme-sunset .number-button:hover { background-color: #f4511e; }
body.theme-sunset .number-button:disabled { background-color: #ffccbc; color: #5d4037; opacity: 0.7; cursor: not-allowed; }
body.theme-sunset #task-image { border: 1px solid #ffccbc; background-color: #fff8e1; filter: none; }
body.theme-sunset #continue-button { background-color: #ff7043; color: white; text-shadow: none; box-shadow: none;}
body.theme-sunset #continue-button:hover { background-color: #f4511e; }
body.theme-sunset #settings-icon { color: #ff7043; text-shadow: none; }
body.theme-sunset #settings-icon:hover { color: #bf360c; }
body.theme-sunset #settings-panel { background-color: #fff8e1; border-color: #ffccbc; }
body.theme-sunset #settings-panel h3 { color: #bf360c; }
body.theme-sunset #settings-panel .theme-button { background-color: #ffffff; border-color: #ffccbc; color: #d84315;}
body.theme-sunset #settings-panel .theme-button:hover { background-color: #fff3e0; border-color: #ffab91; }
body.theme-sunset #settings-panel #close-settings { background-color: #ff8a65; color: white; border: none; }
body.theme-sunset #settings-panel #close-settings:hover { background-color: #ff7043; }

/* Тема 6: Synthwave */
body.theme-synthwave { background: linear-gradient(to bottom, #1a0e34, #3c1a4a); }
body.theme-synthwave #game-container { background-color: rgba(20, 15, 40, 0.9); color: #e0e0e0; border: 1px solid #ff00ff; box-shadow: 0 0 15px rgba(255, 0, 255, 0.5), 0 0 5px rgba(0, 255, 255, 0.5); }
body.theme-synthwave h1 { color: #ff00ff; text-shadow: 0 0 5px #ff00ff; }
body.theme-synthwave h2 { color: #00ffff; text-shadow: 0 0 5px #00ffff; }
body.theme-synthwave #info-text { color: #bdbdbd; }
body.theme-synthwave .number-button { background-color: #ff00ff; color: #1a0e34; border: 1px solid #ff00ff; box-shadow: 0 0 3px #ff00ff; }
body.theme-synthwave .number-button:hover { background-color: #e000e0; box-shadow: 0 0 8px #ff00ff; }
body.theme-synthwave .number-button:disabled { background-color: #552d6b; color: #8e65a0; border-color: #8e65a0; opacity: 0.6; cursor: not-allowed; box-shadow: none; }
body.theme-synthwave #task-image { border: 1px solid #ff00ff; background-color: #2a1a40; filter: none; }
body.theme-synthwave #continue-button { background-color: #00ffff; color: #1a0e34; text-shadow: 0 0 3px #00ffff; box-shadow: 0 0 5px #00ffff;}
body.theme-synthwave #continue-button:hover { background-color: #00e0e0; box-shadow: 0 0 10px #00ffff; }
body.theme-synthwave #settings-icon { color: #00ffff; text-shadow: 0 0 3px #00ffff;}
body.theme-synthwave #settings-icon:hover { color: #ff00ff; text-shadow: 0 0 5px #ff00ff; }
body.theme-synthwave #settings-panel { background-color: #2a1a40; border-color: #00ffff; box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);}
body.theme-synthwave #settings-panel h3 { color: #00ffff; }
body.theme-synthwave #settings-panel .theme-button { background-color: #4a235a; border-color: #ff00ff; color: #00ffff;}
body.theme-synthwave #settings-panel .theme-button:hover { background-color: #5e3370; border-color: #e000e0; }
body.theme-synthwave #settings-panel #close-settings { background-color: #ff00ff; color: #1a0e34; border: none; }
body.theme-synthwave #settings-panel #close-settings:hover { background-color: #e000e0; }

/* Тема 7: Sepia / Vintage */
body.theme-sepia { background-color: #f5f5dc; }
body.theme-sepia #game-container { background-color: #efebe9; color: #5d4037; border: 2px solid #a1887f; box-shadow: 0 4px 8px rgba(93, 64, 55, 0.2); }
body.theme-sepia h1 { color: #4e342e; text-shadow: none; }
body.theme-sepia h2 { color: #5d4037; text-shadow: none; }
body.theme-sepia #info-text { color: #795548; }
body.theme-sepia .number-button { background-color: #8d6e63; color: #f5f5dc; border: 1px solid #6d4c41; box-shadow: none; }
body.theme-sepia .number-button:hover { background-color: #6d4c41; }
body.theme-sepia .number-button:disabled { background-color: #d7ccc8; color: #8d6e63; border-color: #bcaaa4; opacity: 0.7; cursor: not-allowed; }
body.theme-sepia #task-image { border: 1px solid #a1887f; background-color: #efebe9; filter: sepia(0.4); }
body.theme-sepia #continue-button { background-color: #8d6e63; color: #f5f5dc; text-shadow: none; box-shadow: none;}
body.theme-sepia #continue-button:hover { background-color: #6d4c41; }
body.theme-sepia #settings-icon { color: #795548; text-shadow: none; }
body.theme-sepia #settings-icon:hover { color: #4e342e; }
body.theme-sepia #settings-panel { background-color: #efebe9; border-color: #a1887f; }
body.theme-sepia #settings-panel h3 { color: #4e342e; }
body.theme-sepia #settings-panel .theme-button { background-color: #f5f5dc; border-color: #a1887f; color: #5d4037;}
body.theme-sepia #settings-panel .theme-button:hover { background-color: #d7ccc8; }
body.theme-sepia #settings-panel #close-settings { background-color: #8d6e63; color: white; border: none;}
body.theme-sepia #settings-panel #close-settings:hover { background-color: #6d4c41; }

/* Тема 8: Mint Chocolate / Minze */
body.theme-mint { background-color: #e0f2f1; }
body.theme-mint #game-container { background-color: #ffffff; color: #3e2723; border: 2px solid #5d4037; box-shadow: 0 4px 12px rgba(0, 150, 136, 0.2); }
body.theme-mint h1 { color: #3e2723; text-shadow: none; }
body.theme-mint h2 { color: #00695c; text-shadow: none; }
body.theme-mint #info-text { color: #616161; }
body.theme-mint .number-button { background-color: #009688; color: white; border: none; box-shadow: none; }
body.theme-mint .number-button:hover { background-color: #00796b; }
body.theme-mint .number-button:disabled { background-color: #b2dfdb; color: #00695c; opacity: 0.7; cursor: not-allowed; }
body.theme-mint #task-image { border: 1px solid #009688; background-color: #e0f2f1; filter: none; }
body.theme-mint #continue-button { background-color: #5d4037; color: #ffffff; text-shadow: none; box-shadow: none;}
body.theme-mint #continue-button:hover { background-color: #4e342e; }
body.theme-mint #settings-icon { color: #009688; text-shadow: none; }
body.theme-mint #settings-icon:hover { color: #00695c; }
body.theme-mint #settings-panel { background-color: #f0fff0; border-color: #80cbc4; }
body.theme-mint #settings-panel h3 { color: #3e2723; }
body.theme-mint #settings-panel .theme-button { background-color: #ffffff; border-color: #80cbc4; color: #00695c;}
body.theme-mint #settings-panel .theme-button:hover { background-color: #e0f2f1; border-color: #009688; }
body.theme-mint #settings-panel #close-settings { background-color: #00796b; color: white; border: none; }
body.theme-mint #settings-panel #close-settings:hover { background-color: #00695c; }