<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Своя игра — День космонавтики</title>
    <style>
        * {
            box-sizing: border-box;
            user-select: none;
        }

        body {
            margin: 0;
            min-height: 100vh;
            background: linear-gradient(135deg, #020617 0%, #0f172a 100%);
            font-family: 'Segoe UI', 'Roboto', 'Montserrat', 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        /* Игровой контейнер */
        .game-container {
            max-width: 1400px;
            width: 100%;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 60px 60px 40px 40px;
            backdrop-filter: blur(2px);
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255,255,255,0.1);
            padding: 20px;
        }

        /* Шапка: счёт и статус */
        .game-header {
            background: #0b1120cc;
            backdrop-filter: blur(8px);
            border-radius: 50px;
            padding: 15px 25px;
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            border: 1px solid #334155;
        }

        .score-board {
            background: #1e293b;
            border-radius: 40px;
            padding: 10px 25px;
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
            font-weight: bold;
        }

        .team-score {
            background: #0f172a;
            border-radius: 30px;
            padding: 8px 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: inset 0 1px 3px #00000055, 0 4px 8px rgba(0,0,0,0.3);
        }

        .team-name {
            font-size: 1.2rem;
            color: #94a3b8;
        }

        .team-name span {
            color: #facc15;
            font-weight: bold;
        }

        .points {
            font-size: 1.8rem;
            font-weight: 800;
            background: #00000066;
            padding: 0 12px;
            border-radius: 40px;
            color: #ffd966;
            font-family: monospace;
            letter-spacing: 2px;
        }

        .active-team {
            background: #2d3a5e;
            box-shadow: 0 0 0 2px #facc15, inset 0 0 0 1px #ffec99;
        }

        .turn-indicator {
            background: #facc15;
            color: #0f172a;
            padding: 8px 24px;
            border-radius: 40px;
            font-weight: bold;
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .reset-btn {
            background: #334155;
            border: none;
            color: white;
            font-size: 1.2rem;
            padding: 8px 28px;
            border-radius: 40px;
            cursor: pointer;
            transition: 0.2s;
            font-weight: bold;
        }

        .reset-btn:hover {
            background: #f97316;
            transform: scale(1.02);
        }

        /* Таблица игры */
        .game-grid {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .category-row {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
        }

        .category-cell {
            background: linear-gradient(145deg, #1e293b, #0f172a);
            border-radius: 28px;
            text-align: center;
            padding: 20px 10px;
            font-weight: 800;
            font-size: 1.1rem;
            color: #facc15;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: 1px solid #334155;
            box-shadow: 0 6px 0 #020617;
        }

        .question-card {
            background: linear-gradient(135deg, #0f2b3d, #0a1a2a);
            border-radius: 28px;
            text-align: center;
            padding: 24px 8px;
            font-weight: bold;
            font-size: 1.9rem;
            color: #ffd966;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid #2c5f7a;
            box-shadow: 0 6px 0 #02101c;
            font-family: monospace;
        }

        .question-card:hover {
            background: #1e4a6e;
            transform: translateY(-3px);
            box-shadow: 0 10px 0 #02101c;
        }

        .disabled-card {
            background: #1e2a32;
            color: #4b5563;
            cursor: default;
            transform: none;
            box-shadow: 0 4px 0 #02101c;
            filter: grayscale(0.3);
            text-decoration: line-through;
            font-size: 1.3rem;
        }

        .disabled-card:hover {
            background: #1e2a32;
            transform: none;
            box-shadow: 0 4px 0 #02101c;
        }

        /* Модальное окно вопроса */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.85);
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(6px);
        }

        .modal-content {
            background: #0f172a;
            max-width: 800px;
            width: 90%;
            border-radius: 50px;
            border: 2px solid #facc15;
            padding: 30px 25px;
            text-align: center;
            color: white;
            box-shadow: 0 25px 40px black;
        }

        .question-text {
            font-size: 1.6rem;
            margin: 20px 0;
            line-height: 1.4;
        }

        .answer-input {
            width: 80%;
            padding: 14px;
            font-size: 1.2rem;
            border-radius: 60px;
            border: none;
            margin: 20px 0;
            text-align: center;
        }

        .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .modal-btn {
            padding: 10px 28px;
            font-size: 1.1rem;
            font-weight: bold;
            border: none;
            border-radius: 40px;
            cursor: pointer;
            transition: 0.2s;
        }

        .correct-btn {
            background: #22c55e;
            color: white;
        }
        .wrong-btn {
            background: #ef4444;
            color: white;
        }
        .close-btn {
            background: #475569;
            color: white;
        }

        .correct-btn:hover { background: #16a34a; transform: scale(1.02);}
        .wrong-btn:hover { background: #dc2626; transform: scale(1.02);}
        
        .answer-feedback {
            font-size: 1.1rem;
            margin-top: 10px;
            padding: 8px;
            background: #00000077;
            border-radius: 60px;
        }

        .winner-message {
            font-size: 1.8rem;
            text-align: center;
            margin-top: 20px;
            background: gold;
            color: black;
            border-radius: 40px;
            padding: 12px;
        }

        @media (max-width: 800px) {
            .category-cell { font-size: 0.7rem; padding: 12px 4px; }
            .question-card { font-size: 1.2rem; padding: 16px 4px; }
            .team-score { padding: 4px 12px; }
            .points { font-size: 1.2rem; }
        }
    </style>
</head>
<body>
<div class="game-container">
    <div class="game-header">
        <div class="score-board" id="scoreBoard">
            <div class="team-score" id="team0">
                <div class="team-name">🚀 <span>Команда 1</span></div>
                <div class="points" id="score0">0</div>
            </div>
            <div class="team-score" id="team1">
                <div class="team-name">🌙 <span>Команда 2</span></div>
                <div class="points" id="score1">0</div>
            </div>
        </div>
        <div class="turn-indicator" id="turnText">Ход: Команда 1</div>
        <button class="reset-btn" id="resetGame">⟳ Новая игра</button>
    </div>

    <div class="game-grid" id="gameGrid"></div>
</div>

<div id="questionModal" class="modal">
    <div class="modal-content">
        <h2 style="color:#facc15;">❓ Вопрос</h2>
        <div class="question-text" id="modalQuestionText">Текст вопроса</div>
        <input type="text" id="answerInput" class="answer-input" placeholder="Ваш ответ..." autocomplete="off">
        <div class="modal-buttons">
            <button class="modal-btn correct-btn" id="correctBtn">✅ Верно (+ баллы)</button>
            <button class="modal-btn wrong-btn" id="wrongBtn">❌ Неверно</button>
            <button class="modal-btn close-btn" id="closeModalBtn">✖ Закрыть</button>
        </div>
        <div id="answerFeedback" class="answer-feedback"></div>
    </div>
</div>

<script>
    // ------------------- ВОПРОСЫ НА ОСНОВЕ ВАШЕЙ ВИКТОРИНЫ -------------------
    const QUESTIONS_DATA = {
        "ИСТОРИЯ ПОЛЕТОВ": {
            10: "Он стал первым человеком, полетевшим в космос. Его знаменитое «Поехали!» знает весь мир.",
            20: "Эта умная и преданная дворняга первой облетела Землю на корабле «Спутник-2», но не вернулась обратно.",
            30: "За 18 дней до полета Гагарина этот американский шимпанзе совершил суборбитальный полет.",
            40: "Именно он был дублером Гагарина и впоследствии тоже побывал в космосе. Он держал рекорд по длительности полета (18 суток) в 1963 году.",
            50: "Как назывался космический корабль, на котором Юрий Гагарин совершил свой полет, и сколько времени он длился (в минутах)?"
        },
        "НАШИ ЛЮДИ": {
            10: "Первая в мире женщина-космонавт.",
            20: "Этот человек сделал первый шаг в открытый космос в 1965 году.",
            30: "Он был главным конструктором советских ракет. Благодаря его идеям мы первыми полетели в космос.",
            40: "Этот российский космонавт провел в космосе больше всех времени (рекорд по суммарному налету — более 878 суток).",
            50: "Кто из советских космонавтов прославился тем, что взял с собой в космос маленькую плюшевую собачку (игрушку), чтобы определить момент наступления невесомости?"
        },
        "ЗВЕЗДНЫЕ СОСЕДИ": {
            10: "Самая горячая и большая звезда в нашей Солнечной системе, источник света и тепла.",
            20: "Эту планету называют «Красной» из-за цвета ее поверхности (ржавчины).",
            30: "Какая планета самая большая в Солнечной системе и носит имя верховного римского бога?",
            40: "Вокруг этой планеты, названной в честь бога торговли, больше всего колец, которые хорошо видны в телескоп.",
            50: "Раньше она считалась девятой планетой, а теперь её называют «карликовой планетой». У нее есть сердце (ледяная равнина)."
        },
        "КОСМИЧЕСКАЯ ТЕХНИКА": {
            10: "Как называется одежда космонавта, которая защищает его от вакуума и радиации?",
            20: "«Глаза», через которые ученые смотрят на звезды с Земли.",
            30: "На чем космонавты возвращаются на Землю после спуска с орбиты? Эта штука падает на парашюте.",
            40: "Как называются автоматические станции, которые колесят по поверхности Марса и Луны, делая снимки?",
            50: "Самая мощная на сегодняшний день действующая ракета в мире, детище Илона Маска, которую недавно испытывали с «хлопками» (взрывами)."
        },
        "ПРАВДА ИЛИ ВЫМЫСЕЛ?": {
            10: "...на Луне дует очень сильный ветер? (Верите ли вы, что это правда?)",
            20: "...в космосе еда (борщ, картошка) продавливается из тюбиков, как зубная паста?",
            30: "...космонавты видят Великую Китайскую стену с орбиты невооруженным глазом?",
            40: "...в открытом космосе человек может замерзнуть мгновенно, даже быстрее, чем в Антарктиде?",
            50: "...космонавты берут с собой в космос пистолет?"
        }
    };

    // Правильные ответы (приблизительные, ведущий может засчитывать логичные варианты)
    const ANSWERS = {
        "ИСТОРИЯ ПОЛЕТОВ": {
            10: "Юрий Гагарин",
            20: "Лайка",
            30: "Хэм",
            40: "Герман Титов",
            50: "Восток-1, 108 минут"
        },
        "НАШИ ЛЮДИ": {
            10: "Валентина Терешкова",
            20: "Алексей Леонов",
            30: "Сергей Королёв",
            40: "Геннадий Падалка",
            50: "Александр Серебров"
        },
        "ЗВЕЗДНЫЕ СОСЕДИ": {
            10: "Солнце",
            20: "Марс",
            30: "Юпитер",
            40: "Сатурн",
            50: "Плутон"
        },
        "КОСМИЧЕСКАЯ ТЕХНИКА": {
            10: "Скафандр",
            20: "Телескоп",
            30: "Спускаемая капсула",
            40: "Луноход или Марсоход",
            50: "Starship"
        },
        "ПРАВДА ИЛИ ВЫМЫСЕЛ?": {
            10: "нет",
            20: "да",
            30: "нет",
            40: "нет",
            50: "да"
        }
    };

    // Начальное состояние
    let categories = ["ИСТОРИЯ ПОЛЕТОВ", "НАШИ ЛЮДИ", "ЗВЕЗДНЫЕ СОСЕДИ", "КОСМИЧЕСКАЯ ТЕХНИКА", "ПРАВДА ИЛИ ВЫМЫСЕЛ?"];
    let points = [10,20,30,40,50];
    
    // Сетка доступности: [categoryIndex][pointIndex] -> true/false
    let available = [];
    let teamScores = [0, 0];
    let activeTeam = 0; // 0 или 1
    let currentQuestion = null; // {catIdx, pointValue, category, text}
    
    function initAvailable() {
        available = [];
        for(let i=0; i<categories.length; i++) {
            available[i] = [];
            for(let j=0; j<points.length; j++) {
                available[i][j] = true;
            }
        }
    }
    
    function updateUI() {
        // обновляем счета
        document.getElementById("score0").innerText = teamScores[0];
        document.getElementById("score1").innerText = teamScores[1];
        const teamDivs = [document.getElementById("team0"), document.getElementById("team1")];
        teamDivs.forEach((div, idx) => {
            if(activeTeam === idx) div.classList.add("active-team");
            else div.classList.remove("active-team");
        });
        document.getElementById("turnText").innerHTML = `🎤 Ход: Команда ${activeTeam+1}`;
        
        // перерисовать сетку
        renderGrid();
    }
    
    function renderGrid() {
        const container = document.getElementById("gameGrid");
        container.innerHTML = "";
        // заголовки строк (категории)
        const headerRow = document.createElement("div");
        headerRow.className = "category-row";
        categories.forEach(cat => {
            const catDiv = document.createElement("div");
            catDiv.className = "category-cell";
            catDiv.innerText = cat;
            headerRow.appendChild(catDiv);
        });
        container.appendChild(headerRow);
        
        // строки для очков
        for(let pIdx=0; pIdx<points.length; pIdx++) {
            const row = document.createElement("div");
            row.className = "category-row";
            for(let cIdx=0; cIdx<categories.length; cIdx++) {
                const card = document.createElement("div");
                const pointVal = points[pIdx];
                if(available[cIdx][pIdx]) {
                    card.className = "question-card";
                    card.innerText = pointVal;
                    card.onclick = (function(catIdx, pointIndex, val) {
                        return function() { openQuestion(catIdx, pointIndex, val); };
                    })(cIdx, pIdx, pointVal);
                } else {
                    card.className = "question-card disabled-card";
                    card.innerText = "✘";
                    card.onclick = null;
                }
                row.appendChild(card);
            }
            container.appendChild(row);
        }
    }
    
    function openQuestion(catIdx, pointIdx, pointValue) {
        if(!available[catIdx][pointIdx]) return;
        const categoryName = categories[catIdx];
        const questionText = QUESTIONS_DATA[categoryName][pointValue];
        if(!questionText) return;
        
        currentQuestion = {
            catIdx: catIdx,
            pointIdx: pointIdx,
            pointValue: pointValue,
            category: categoryName,
            text: questionText
        };
        
        document.getElementById("modalQuestionText").innerHTML = `<strong>[${categoryName}]</strong><br>${questionText}`;
        document.getElementById("answerInput").value = "";
        document.getElementById("answerFeedback").innerHTML = "";
        document.getElementById("questionModal").style.display = "flex";
    }
    
    function closeModal() {
        document.getElementById("questionModal").style.display = "none";
        currentQuestion = null;
    }
    
    function checkAnswerAndGivePoints(isCorrect) {
        if(!currentQuestion) return;
        
        const pts = currentQuestion.pointValue;
        if(isCorrect) {
            teamScores[activeTeam] += pts;
            // отмечаем вопрос использованным
            available[currentQuestion.catIdx][currentQuestion.pointIdx] = false;
            // после правильного ответа ход остается у той же команды (по правилам своя игра)
            // но можно оставить так же, активная команда продолжает
        } else {
            // Неверно — ход переходит другой команде
            activeTeam = activeTeam === 0 ? 1 : 0;
            // Вопрос НЕ сгорает? В классической "Своей игре" вопрос остается, но для простоты оставим доступным.
            // Однако, чтобы не наказывать сильно, оставим вопрос открытым.
            // Но мы можем оставить вопрос активным (не меняем available)
            // updateUI передаст ход
        }
        
        if(isCorrect) {
            // дополнительно проверим, не закончились ли все вопросы
            let allUsed = true;
            for(let i=0; i<available.length; i++) {
                for(let j=0; j<available[i].length; j++) {
                    if(available[i][j]) allUsed = false;
                }
            }
            if(allUsed) {
                setTimeout(() => {
                    let winnerMsg = teamScores[0] > teamScores[1] ? "🏆 Победила Команда 1! 🏆" : (teamScores[1] > teamScores[0] ? "🏆 Победила Команда 2! 🏆" : "🤝 Ничья!");
                    alert("ИГРА ОКОНЧЕНА!\n" + winnerMsg + "\nСчёт: " + teamScores[0] + " : " + teamScores[1]);
                }, 50);
            }
        }
        
        updateUI();
        closeModal();
    }
    
    // обработчики модалки
    document.getElementById("correctBtn").onclick = () => {
        checkAnswerAndGivePoints(true);
    };
    document.getElementById("wrongBtn").onclick = () => {
        checkAnswerAndGivePoints(false);
    };
    document.getElementById("closeModalBtn").onclick = closeModal;
    // закрытие по клику вне окна (опционально)
    window.onclick = (e) => {
        const modal = document.getElementById("questionModal");
        if(e.target === modal) closeModal();
    };
    
    document.getElementById("resetGame").onclick = () => {
        teamScores = [0, 0];
        activeTeam = 0;
        initAvailable();
        updateUI();
        closeModal();
    };
    
    // инициализация
    initAvailable();
    updateUI();
</script>
</body>
</html>