/* CSS-переменные для палитры - дефолтная палитра */
:root {
    --bg-color: #f0f4f8;
    --container-bg: #ffffff;
    --container-shadow: 0 12px 30px rgba(0, 80, 150, 0.1);
    --text-color: #333;
    --title-color: #0056b3;
    --translation-bar-bg: #e6f7ff;
    --translation-text-color: #555;
    --translation-word-color: #007bff;
    --score-text-color: #495057;
    --score-value-color: #28a745;
    --current-word-color: #dc3545;
    --lives-color: #ffc107;
    --canvas-bg: #fdfdfd;
    --canvas-border: 2px solid #b0c4de;
    --gameover-bg: rgba(255, 255, 255, 0.9);
    --gameover-title-color: #dc3545;
    --restart-button-bg: #28a745;
    --restart-button-hover-bg: #218838;
    --snake-head-color: #007bff;
    --snake-body-color: #0056b3;
    --snake-eye-color: #ffffff;
    --food-bg: #28a745;
    --food-text: #fff;
    --decoy-bg: #dc3545;
    --decoy-text: #fff;
    /* (НОВЫЙ) Цвет антидота */
    --antidote-bg: #17a2b8;
    --antidote-text: #ffffff;
    --obstacle-color: #5a6268;
    /* Цвет препятствий */
    --button-secondary-bg: #6c757d;
    --button-secondary-hover-bg: #5a6268;
    --button-danger-bg: #dc3545;
    --button-danger-hover-bg: #c82333;
    --modal-bg: #fefefe;
    --modal-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    --modal-border: #888;

    /* (НОВЫЙ) Фон для истории и текущего слова */
    --history-bg: #fdfdfd;
    --word-display-bg: transparent;

    /* (НОВЫЙ) Общий прогресс и контейнеры */
    --total-progress-bg: rgba(0, 86, 179, 0.08);
    --total-progress-text: #0056b3;
    --game-container-bg: #ffffff;
}

/* Тема "Фантом" (Сиреневая) */
body.theme-phantom,
.snake-overlay.theme-phantom {
    --bg-color: #4a2c4a;
    /* ... existing phantom vars ... */
    --history-bg: #e6e6fa;
    --word-display-bg: rgba(255, 255, 255, 0.1);

    /* Тёмно-сиреневый фон страницы */
    --container-bg: #f3e5f5;
    /* Светло-сиреневый контейнер */
    --canvas-bg: #e6e6fa;
    /* Лавандовый фон игры */
    --text-color: #4a148c;
    /* Тёмно-фиолетовый текст */
    --title-color: #7b1fa2;
    /* Фиолетовый заголовок */
    --snake-head-color: #9c27b0;
    /* Ярко-фиолетовая голова */
    --snake-body-color: #ce93d8;
    /* Светло-фиолетовое тело */
    --food-bg: #00e676;
    /* Ярко-зеленая еда (контраст) */
    --button-secondary-bg: #8e24aa;
    --button-secondary-hover-bg: #7b1fa2;
    /* ... */
}

/* ... existing styles ... */





/* Скрыть кнопку сброса прогресса в режиме Фантом */
body.theme-phantom #reset-progress-button,
.snake-overlay.theme-phantom #reset-progress-button {
    display: none !important;
}

/* (НОВЫЙ) Полноэкранный оверлей для SPA */
.snake-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    display: none;
    /* Скрыт по умолчанию */
    justify-content: center;
    align-items: flex-start;
    padding-top: 2px;
    z-index: 1000;
    box-sizing: border-box;
    overflow: hidden;
    /* Prevent scrolling when game/splash is active */
    font-family: 'Nunito', sans-serif;
    color: var(--text-color);
    user-select: none;
    transition: background-color 0.3s ease;
}

.snake-overlay.active {
    display: flex;
}

.snake-overlay .game-wrapper {
    display: flex;
    align-items: stretch;
    gap: 20px;
    padding: 0px 20px 0px 20px;
    flex-wrap: wrap;
    /* Разрешаем перенос на маленьких экранах */
    justify-content: center;
    /* Центрируем при переносе */
}

.snake-overlay .game-container {
    background: var(--game-container-bg);
    border-radius: 16px;
    box-shadow: var(--container-shadow);
    padding: 5px 20px 20px 20px;
    text-align: center;
    width: 640px;
    max-width: 98%;
    /* Чтобы не вылезало за экран */
    position: relative;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    /* [NEW] Crop marquee */
}

/* [NEW] Running Text Marquee - Standalone Ribbon */
#running-text-container {
    width: 100%;
    background: #1a1a1a;
    /* Solid near-black background */
    color: #ffd700;
    font-weight: bold;
    font-size: 0.85em;
    padding: 0;
    margin: 2px 0 4px 0;
    /* Reduced margins */
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
    height: 30px;
    line-height: 30px;
    display: block !important;
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    /* Very subtle gold border */
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

#running-text-content {
    display: inline-block;
    padding-left: 100%;
    /* Start from the right */
    animation: marquee 15s linear infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* [NEW] Stop in Middle Behavior */
#running-text-content.stopped {
    animation: slideInStop 3s ease-out forwards;
    text-align: center;
    width: 100%;
    /* Ensure it takes full width for centering */
    padding-left: 0;
    /* Remove padding */
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes slideInStop {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

.snake-overlay h1 {
    color: var(--title-color);
    margin-top: 0;
    transition: color 0.3s ease;
}

.snake-overlay .translation-bar {
    background: var(--translation-bar-bg);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 3px;
    transition: background 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* Space between marquee and word */
}

/* Панель общих очков в шапке */
.snake-overlay .total-score-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    padding: 5px 15px;
    border-radius: 16px;
    border: 1px solid var(--cab-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

#snake-user-avatar-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(93, 64, 55, 0.2);
}

.snake-overlay .cabinet-container {
    padding-top: 0;
    padding-bottom: 5px;
}

.snake-overlay .total-score-panel:hover {
    background: rgba(0, 86, 179, 0.12);
    border-color: rgba(0, 86, 179, 0.25);
    transform: translateY(-1px);
}

/* [NEW] Apple/Red bonus mini panel */
.snake-overlay .apple-bonus-panel:hover {
    background: rgba(220, 53, 69, 0.12) !important;
    border-color: rgba(220, 53, 69, 0.25) !important;
    transform: translateY(-1px);
}

/* Pending (not active yet): slightly muted look */
.snake-overlay .apple-bonus-panel.is-pending {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* Active: more vivid */
.snake-overlay .apple-bonus-panel.is-active {
    background: rgba(220, 53, 69, 0.10) !important;
}

.snake-overlay .total-score-panel .score-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cab-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.snake-overlay .total-score-panel .score-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--cab-accent);
    font-family: 'Inter', sans-serif;
}

.snake-overlay .translation-bar p {
    margin: 0;
    font-size: 0.8em;
    color: var(--translation-text-color);
    transition: color 0.3s ease;
}

.snake-overlay #translation-display {
    color: var(--translation-word-color, #0056b3);
    font-size: 2.4em;
    /* Very big Russian word */
    font-weight: 900;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: color 0.3s ease;
}

.snake-overlay .score-bar {
    font-size: 0.95em;
    margin-bottom: 12px;
    color: var(--score-text-color);
    transition: color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 15px;
}

.snake-overlay .score-bar span {
    font-weight: 700;
}

.snake-overlay #score {
    color: var(--score-value-color);
}

.snake-overlay #level-display {
    color: var(--title-color);
}

.snake-overlay #lives-display {
    color: var(--lives-color);
}

.snake-overlay #speed-display {
    color: var(--score-value-color);
}

.snake-overlay #poison-indicator {
    color: var(--decoy-bg);
    font-weight: bold;
    margin-left: 10px;
    display: inline-block;
    min-width: 10px;
}

.snake-overlay #current-word-display {
    color: var(--current-word-color);
    background-color: var(--word-display-bg);
    padding: 5px 10px;
    border-radius: 6px;
    letter-spacing: 2px;
    min-height: 24px;
    display: inline-block;
    transition: color 0.3s ease, background-color 0.3s ease;
    font-weight: 700;
    width: 100%;
    margin-top: 5px;
}


.snake-overlay canvas {
    background: var(--canvas-bg);
    border: var(--canvas-border);
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
    transition: background 0.3s ease, border-color 0.3s ease;
    width: 100%;
    height: auto;
    max-width: 600px;
}

.snake-overlay #game-over,
.snake-overlay #pause-screen,
.snake-overlay #countdown-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    z-index: 1100;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

#start-prompt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(30, 140, 50, 1), rgba(0, 70, 160, 1));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1200;
    color: white;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    border-radius: 0;
    overflow: hidden;
}

.start-prompt-title-main {
    font-size: var(--mode-title-size, 3.5rem);
    font-weight: 950;
    margin-bottom: 0;
    letter-spacing: 2px;
    opacity: 0;
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.6s both;
    position: absolute;
    top: 60px;
    width: 100%;
    left: 0;
    /* [NEW] Dynamic styling via variables */
    color: var(--mode-title-color, #FFD700);
    text-shadow: var(--mode-title-shadow,
            -2px -2px 0 #FFD700,
            2px -2px 0 #FFD700,
            -2px 2px 0 #FFD700,
            2px 2px 0 #FFD700,
            0px 4px 10px rgba(238, 0, 0, 0.5));
}

.start-prompt-btn {
    background: #ffc20e;
    color: #222;
    padding: 14px 45px;
    border-radius: 50px;
    font-size: 1.8rem;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-bottom: 25px;
    border: 4px solid white;
    text-transform: uppercase;
    z-index: 20;
}

.start-prompt-btn:hover {
    transform: scale(1.1);
    background: #ffca2c;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.start-prompt-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: fadeIn 1.2s ease 0.6s both;
    z-index: 20;
    margin-top: 60px;
    /* Lower position to avoid overlap with snake/apple */
}

#start-prompt-title {
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffc821;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

#start-prompt-sub {
    font-size: 0.9rem;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    font-weight: 700;
    opacity: 1;
}

.start-prompt-decor {
    position: absolute;
    font-size: 5.5rem;
    filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.5)) contrast(1.4) brightness(1.2);
    animation: floatingDecor 4s ease-in-out infinite;
    z-index: 10;
}

.start-prompt-decor.left {
    left: 45px;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
}

.start-prompt-decor.right {
    right: 45px;
    top: 50%;
    transform: translateY(-50%) rotate(10deg);
}

/* Scattered letters styles */
.start-prompt-letters {
    position: absolute;
    bottom: 60px;
    /* Lift up the whole letters block */
    left: 0;
    width: 100%;
    height: 120px;
    pointer-events: none;
    z-index: 5;
    opacity: 0.4;
}

.letter-item {
    position: absolute;
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 4px 10px rgba(88, 99, 216, 0.566);
    font-family: 'Outfit', sans-serif;
}

@keyframes floatingDecor {

    0%,
    100% {
        transform: translateY(-50%) translateY(0) rotate(-10deg);
    }

    50% {
        transform: translateY(-50%) translateY(-25px) rotate(5deg);
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* Story Modal is now a TOP LEVEL global modal, handled by .modal class in index.html */
/* We only keep specific styles for ITS CONTENT here if needed */

.snake-overlay #pause-screen {
    background: rgba(0, 86, 179, 0.15);
    color: var(--title-color);
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 5px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.snake-overlay #countdown-overlay {
    background: rgba(255, 255, 255, 0.4);
    font-size: 6rem;
    font-weight: 900;
    color: var(--cab-accent);
}

.snake-overlay #countdown-overlay {
    color: var(--title-color);
    font-size: 6em;
    font-weight: 700;
}

.snake-overlay #game-over h2,
.snake-overlay #story-modal h2 {
    color: var(--gameover-title-color);
    font-size: 2.2em;
    margin: 0 0 10px 0;
}

.snake-overlay #story-modal h2 {
    color: var(--title-color);
}

.snake-overlay #game-over p,
.snake-overlay #story-modal p {
    font-size: 1.2em;
    margin: 15px 0;
}

.snake-overlay #pause-screen {
    color: var(--title-color);
    font-size: 3em;
    font-weight: 700;
    line-height: 1.4;
}

.snake-overlay #story-modal .story-text-cs {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--title-color);
}

.snake-overlay #story-modal .story-text-ru {
    font-size: 1.1em;
    color: var(--score-text-color);
    font-style: italic;
    margin-top: 10px;
}

/* --- Кнопки --- */
.snake-overlay .game-button {
    font-family: 'Nunito', sans-serif;
    font-size: 1em;
    font-weight: 700;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin: 5px;
}

.snake-overlay .game-button:hover {
    transform: translateY(-2px);
}

.snake-overlay .game-button:active {
    transform: scale(0.98);
}

.snake-overlay #restart-button {
    background-color: var(--restart-button-bg);
}

.snake-overlay #restart-button:hover {
    background-color: var(--restart-button-hover-bg);
}

.snake-overlay #story-continue-button {
    background-color: var(--title-color);
}

.snake-overlay #story-continue-button:hover {
    background-color: #00408a;
}

/* --- Панель управления --- */
.snake-overlay .game-controls {
    background: var(--container-bg);
    border-radius: 16px;
    box-shadow: var(--container-shadow);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 200px;
    box-sizing: border-box;
    flex-shrink: 0;
    max-height: 635px;
    position: relative;
    /* [NEW] For absolute children like the rocket */
}

.snake-overlay .game-controls h3 {
    margin: 5px 0 2px 0;
    /* Уменьшил внешние отступы */
    color: var(--title-color);
    text-align: center;
    padding-bottom: 3px;
    /* Уменьшил внутренний отступ снизу */
    border-bottom: 2px solid var(--bg-color);
    font-size: 1.1em;
}

.snake-overlay .game-controls .control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
}

.snake-overlay .control-row label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 5px;
}

.snake-overlay .game-controls button {
    width: 100%;
    padding: 10px;
    font-size: 0.9em;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    border-radius: 8px;
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.snake-overlay #save-button,
.snake-overlay #load-button,
.snake-overlay #dictionary-button,
.snake-overlay #settings-button {
    background-color: var(--button-secondary-bg);
}

.snake-overlay #save-button:hover,
.snake-overlay #load-button:hover,
.snake-overlay #dictionary-button:hover,
.snake-overlay #settings-button:hover {
    background-color: var(--button-secondary-hover-bg);
}

.snake-overlay #reset-progress-button {
    background-color: var(--button-danger-bg);
}

.snake-overlay #reset-progress-button:hover {
    background-color: var(--button-danger-hover-bg);
}

.snake-overlay .control-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.snake-overlay #load-file-input,
.snake-overlay #import-words-input {
    display: none;
}

/* --- История слов --- */
.snake-overlay #history-container {
    height: 330px;
    /* Установил фиксированную высоту */
    max-height: 330px;
    overflow-y: auto;
    border: 2px solid #a8d1ff;
    /* Выделили светло-синей границей */
    border-radius: 12px;
    /* Чуть более скругленные углы */
    padding: 8px;
    text-align: left;
    background-color: var(--history-bg);
    font-size: 0.85em;
    flex: none;
    /* Отключил flex: 1, чтобы не растягивался */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Легкая внутренняя тень */
}

.snake-overlay .history-item {
    padding: 3px 5px;
    border-bottom: 1px dashed var(--canvas-border);
}

.snake-overlay .history-item:last-child {
    border-bottom: none;
}

.snake-overlay .history-item b {
    color: var(--title-color);
}

.snake-overlay .history-item span {
    color: var(--score-text-color);
    font-style: italic;
}

/* --- Модальные окна --- */
.snake-overlay #dictionary-modal,
.snake-overlay #settings-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    /* [NEW] Center instead of fixed padding */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* Модалка Game Settings находится вне .snake-overlay */
#game-settings-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    /* [FIX] Use flex centering like other modals */
    display: none;
    /* fallback */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

#game-settings-modal.active {
    display: flex;
}


#game-settings-modal .modal-content {
    background-color: var(--modal-bg, #fff);
    margin: 0;
    /* [FIX] No margin when flex centering */
    padding: 2rem;
    border: 1px solid var(--modal-border, #ddd);
    border-radius: 20px;
    width: auto;
    /* [FIX] Content-based width */
    min-width: 320px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--modal-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));
    font-family: 'Nunito', sans-serif;
    color: var(--text-color, #333);
}


#game-settings-modal .modal-content h2 {
    color: var(--title-color, #0056b3);
    margin-top: 0;
}

#game-settings-modal .modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: flex-end;
}

#game-settings-modal .modal-actions button {
    padding: 10px 20px;
    font-size: 1em;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    border-radius: 8px;
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#game-settings-modal .control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1em;
}

.snake-overlay .modal-content {
    background-color: var(--modal-bg);
    margin: 0;
    /* [FIX] No margin when using flex centering */
    padding: 2.5rem;
    /* [FIX] More premium padding */
    border: 1px solid var(--modal-border);
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    height: auto;
    /* [FIX] Auto height to fit content, not stretched */
    max-height: 90vh;
    /* [FIX] Scrollable if too long */
    overflow-y: auto;
    box-shadow: var(--modal-shadow);
    display: flex;
    flex-direction: column;
    text-align: left;
    animation: modalIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.snake-overlay .modal-content h2 {
    color: var(--title-color);
    margin-top: 0;
}

.snake-overlay .modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: flex-end;
}

.snake-overlay .modal-actions button {
    padding: 10px 20px;
    font-size: 1em;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    border-radius: 8px;
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.snake-overlay #save-dictionary-button,
.snake-overlay #save-settings-button {
    background-color: var(--title-color);
}

.snake-overlay #word-list-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--canvas-border);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
}

.snake-overlay .word-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid var(--canvas-border);
}

.snake-overlay .word-entry:last-child {
    border-bottom: none;
}

.snake-overlay .word-entry span {
    flex-basis: 30%;
}

.snake-overlay .word-entry .delete-word-button {
    background: var(--button-danger-bg);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 3px 8px;
    font-weight: 700;
    cursor: pointer;
}

.snake-overlay .word-entry .delete-word-button:hover {
    background: var(--button-danger-hover-bg);
}

.snake-overlay .add-word-form,
.snake-overlay .dictionary-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.snake-overlay .add-word-form input,
.snake-overlay .add-word-form select {
    flex-grow: 1;
    padding: 8px;
    font-family: 'Nunito', sans-serif;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.snake-overlay .dictionary-actions button,
.snake-overlay .add-word-form button {
    padding: 10px;
    font-size: 0.9em;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    border-radius: 8px;
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.snake-overlay #add-word-button {
    background-color: var(--restart-button-bg);
}

.snake-overlay #import-words-button,
.snake-overlay #export-words-button {
    background-color: var(--button-secondary-bg);
}


.snake-overlay #word-count-warning {
    color: var(--button-danger-bg);
    font-weight: 700;
    margin: 0;
}

/* --- Окно Настроек --- */
.snake-overlay #settings-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.snake-overlay #settings-container .control-row,
.snake-overlay #settings-container .palette-selector,
.snake-overlay #settings-container .setting-row-group {
    font-size: 1.1em;
    padding: 10px;
    background: var(--bg-color);
    border-radius: 8px;
}

/* (ИСПРАВЛЕНО) Стили для блокировки */
.snake-overlay .setting-row-group.disabled-setting {
    opacity: 0.6;
    cursor: not-allowed;
    /* Курсор "нельзя" на всю группу */
    position: relative;
}

/* (ИСПРАВЛЕНО) Запрещаем любые события мыши для дочерних элементов (включая label и input) */
.snake-overlay .setting-row-group.disabled-setting .control-row {
    pointer-events: none;
}


.snake-overlay #settings-container .palette-selector {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.snake-overlay #settings-container .palette-selector select {
    flex-grow: 1;
    margin: 0 10px;
    padding: 4px;
    font-family: 'Nunito', sans-serif;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.snake-overlay #settings-container .control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.snake-overlay #initial-speed-input-modal,
.snake-overlay #words-per-level-input-modal {
    width: 60px;
    padding: 4px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-family: 'Nunito', sans-serif;
    text-align: center;
}


/* --- Подсказка для старта --- */
.snake-overlay #start-prompt {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(0, 0, 0, 0.4);
    font-size: 1.5em;
    font-weight: 700;
    pointer-events: auto;
    z-index: 5;
    text-align: center;
}

.snake-overlay .close-snake:hover {
    background: rgba(220, 53, 69, 1);
}

/* Game Controls */
.snake-overlay .game-controls {
    position: relative;
}

#auto-pilot-btn {
    position: absolute;
    right: -70px !important;
    /* [FIX] Half-overlap for attached look */
    /* [FIX] Touching the edge with slight overlap */
    top: 40px;

    width: 50px;
    height: 50px;
    font-size: 24px;
    background: linear-gradient(135deg, #ff9800, #f44336);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
}

#auto-pilot-btn:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 6px 20px rgba(244, 67, 54, 0.6);
}

#auto-pilot-btn.active {
    animation: rocketLaunch 0.8s infinite alternate ease-in-out, rocketShake 0.1s infinite;
    background: linear-gradient(135deg, #ffeb3b, #ff9800);
    box-shadow: 0 0 20px rgba(255, 152, 0, 0.8);
}

@keyframes rocketShake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

@keyframes rocketLaunch {
    from {
        margin-top: 0;
    }

    to {
        margin-top: -5px;
    }
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* --- Селектор новых слов (Word Selector Overlay) --- */
.hierarchical-word-selector-overlay {
    position: fixed;
    /* Changed from absolute to fixed for better centering relative to viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 80vh;
    /* Fixed height for scrollable content */
    background: #ffffff;
    z-index: 10000;
    /* Increased z-index */
    padding: 20px;
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    animation: snakeSlideIn 0.3s ease-out;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}

.word-selector-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin-top: auto;
    /* Sticky bottom logic if container scrolls, but here container is flex col */
    flex-shrink: 0;
}

/* При узком экране или желании сузить окно выбора */
#word-selector-overlay {
    background: #fff;
    border-radius: 8px;
    /* Если мы внутри модалки, которая 800px, можно ограничить внутренний контейнер */
}

/* Контейнер списка в селекторе */
#hierarchical-word-list {
    flex: 1;
    overflow-y: auto;
    margin-right: -10px;
    padding-right: 10px;
}

@keyframes snakeSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.selector-category {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.category-header {
    background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%);
    transition: background 0.2s;
    padding: 12px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

.category-header:hover {
    background: #f1f3f5;
}

.selector-theme {
    border-left: 3px solid #007bff;
    margin: 8px 0;
    border-radius: 0 8px 8px 0;
}

.theme-header {
    background: #fdfdfd !important;
    transition: all 0.2s;
}

.theme-header:hover {
    background: #f8f9fa !important;
    padding-left: 12px !important;
}

.selector-item {
    transition: background 0.15s;
}

.selector-item:hover {
    background: #f0f7ff;
}

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

#hierarchical-word-list::-webkit-scrollbar {
    width: 6px;
}

#hierarchical-word-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#hierarchical-word-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

#hierarchical-word-list::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

/* --- Theme Constructor Styles --- */
.color-picker-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #f8f9fa;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #eee;
}

.color-picker-group label {
    font-size: 0.85em;
    font-weight: bold;
    color: #555;
}

.color-picker-group input[type="color"] {
    width: 100%;
    height: 35px;
    border: none;
    cursor: pointer;
    background: transparent;
}

/* === THEME CONSTRUCTOR STYLES (NEW) === */
.color-picker-groups-container {
    max-height: 60vh;
    /* Scrollable area */
    overflow-y: auto;
    padding-right: 5px;
    /* Space for scrollbar */
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

/* Custom Scrollbar for Webkit */
.color-picker-groups-container::-webkit-scrollbar {
    width: 6px;
}

.color-picker-groups-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.color-picker-groups-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.color-picker-groups-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.color-group-block {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    min-width: 0;
    /* Prevent shrinking in grid */
}

.color-group-block h4 {
    margin: 0 0 8px 0;
    font-size: 0.95em;
    color: #555;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}

.color-picker-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.color-picker-row:last-child {
    margin-bottom: 0;
}

.color-picker-row label {
    font-size: 0.85em;
    color: #333;
    margin-right: 10px;
}

.color-picker-row input[type="color"] {
    width: 40px;
    height: 25px;
    /* Compact height */
    padding: 0;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    background: none;
}

/* MODAL ADJUSTMENTS */
#theme-constructor-modal .modal-content {
    width: 90% !important;
    max-width: 550px !important;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 5px;
    transition: opacity 0.2s ease;
}


/* Fix footer buttons */

/* Fix footer buttons */
#theme-constructor-modal .modal-actions {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #eee;
    width: 100%;
}

@media (max-width: 768px) {
    #theme-constructor-modal .modal-content {
        max-width: 95% !important;
    }

    .color-picker-groups-container {
        max-height: 55vh;
    }
}

/* Accordion Settings */
.settings-group {
    background: var(--bg-color);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.settings-header {
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    user-select: none;
    transition: background 0.2s;
}

.settings-header:hover {
    background: rgba(255, 255, 255, 0.9);
}

.settings-header h3 {
    margin: 0;
    font-size: 1.1em;
    color: var(--title-color);
}

.settings-header .arrow {
    transition: transform 0.3s;
    font-size: 0.8em;
    color: #6c757d;
}

.settings-group.active .settings-header .arrow {
    transform: rotate(180deg);
}

.settings-content {
    display: none;
    padding: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: var(--container-bg);
}

.settings-group.active .settings-content {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Word Packets (Folders) */
.word-packet {
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.packet-header {
    background: #f1f3f4;
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.2s;
    user-select: none;
}

.packet-header:hover {
    background: #e8eaed;
}

.packet-icon {
    font-size: 1.2em;
    margin-right: 12px;
}

.packet-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.packet-title {
    font-weight: 600;
    color: #3c4043;
}

.packet-count {
    font-size: 0.85em;
    color: #70757a;
    background: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #dadce0;
}

.packet-body {
    padding: 8px 12px;
    border-top: 1px solid #f1f3f4;
}

/* Pool Word Item */
.word-item.queued {
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 6px;
    border-left: 4px solid #4caf50;
    background: #f1f8e9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Reset Pool Button */
#reset-pool-btn {
    background: #fce8e6;
    color: #d93025;
    border: 1px solid #fad2cf;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9em;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

#reset-pool-btn:hover {
    background: #f9d7d4;
    border-color: #f7b6b1;
}

#reset-pool-btn:active {
    background: #f1c5c1;
}

/* Packet Size Inputs */
.packet-size-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.packet-input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.5);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.packet-input-row label {
    font-weight: bold;
    color: var(--title-color);
}

.packet-input-row input {
    width: 50px;
    padding: 5px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-weight: bold;
    color: var(--text-color);
}