<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=720, initial-scale=1" />
  <title>English Kids Quiz (Compact)</title>
  <style>
    :root {
      --w: 620px;
      --h: auto;
      --ink: #0b1020;
      --good: #22c55e;
      --bad: #ef4444;
      --accent: #7c3aed;
      --shadow: 0 14px 34px rgba(0,0,0,.18);
      --shadow2: 0 10px 18px rgba(0,0,0,.16);
    }
    * {
      box-sizing: border-box;
      font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    }
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, #8be9ff, #b7ffcf);
      color: var(--ink);
    }
    .game {
      width: var(--w);
      height: var(--h);
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,.55);
      background: radial-gradient(520px 280px at 15% 10%, rgba(255,255,255,.55), transparent 60%),
        radial-gradient(520px 280px at 85% 15%, rgba(255,255,255,.45), transparent 60%),
        linear-gradient(135deg, #79d8ff, #b6ffde);
      padding: 14px;
    }
    /* Верхний блок */
    .top {
      display: flex; align-items: center; justify-content: space-between; gap: 4px;
      position: relative; z-index: 2;
      padding: 4px 2px;
    }
    .leftGroup {
      display: flex; align-items: center; gap: 8px;
      min-width: 280px;
    }
    .badge {
      width: 34px; height: 34px; border-radius: 12px;
      display: grid; place-items: center;
      background: linear-gradient(180deg, #fff, #e7f4ff);
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 6px 0 rgba(0,0,0,.12);
      font-weight: 1100;
      font-size: 16px;
    }
    .titleBlock {
      line-height: 1.05;
    }
    .title {
      font-weight: 1200;
      font-size: 24px;
      letter-spacing: .2px;
    }
    .meta {
      font-size: 14px;
      font-weight: 900;
      opacity: .75;
      margin-top: 3px;
    }
    /* ВАША КАРТИНКА: вставляем прямо сюда */
    .customImage {
      width: 80px;
      height: 60px;
    }

    /* Остальные стили остаются без изменений */
    .rightGroup {
      display: flex; align-items: center; gap: 10px;
    }
    .scoreLine {
      display: flex; align-items: baseline; gap: 10px;
      font-weight: 1100;
      white-space: nowrap;
    }
    .scoreLabel {
      font-size: 20px;
      opacity: .85;
    }
    .scoreValue {
      font-size: 26px;
      letter-spacing: .2px;
    }
    .star {
      font-size: 50px;
      line-height: 1;
      margin-left: 2px;
      filter: drop-shadow(0 3px 0 rgba(0,0,0,.12));
    }
    .btn3d {
      border: none;
      cursor: pointer;
      border-radius: 16px;
      padding: 10px 14px;
      font-weight: 1100;
      font-size: 16px;
      color: #111827;
      background: linear-gradient(180deg, #ffffff, #e8f2ff);
      box-shadow: 0 10px 0 rgba(0,0,0,.12), 0 16px 26px rgba(0,0,0,.14);
      border: 1px solid rgba(0,0,0,.08);
      transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
      user-select: none;
      white-space: nowrap;
    }
    .btn3d:hover { filter: brightness(1.02) }
    .btn3d:active {
      transform: translateY(7px);
      box-shadow: 0 3px 0 rgba(0,0,0,.12), 0 10px 16px rgba(0,0,0,.14);
    }
    .btn3d:disabled { opacity: .65; cursor: not-allowed; transform: none }

    /* Основной блок */
    .card {
      margin-top: 10px;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 18px;
      padding: 14px;
      box-shadow: var(--shadow2);
      position: relative;
      z-index: 2;
    }
    .sentence {
      margin: 0 0 12px 0;
      font-size: 24px;
      line-height: 1.2;
      font-weight: 1200;
    }
    .blank {
      display: inline-block;
      padding: 0 10px;
      border-bottom: 3px dotted rgba(0,0,0,.30);
      background: rgba(255,255,255,.45);
      border-radius: 10px;
    }
    .choices {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 12px;
    }
    .choice {
      position: relative;
      border: none;
      cursor: pointer;
      border-radius: 18px;
      padding: 14px 12px;
      font-weight: 1200;
      font-size: 20px;
      color: #0b1020;
      background: linear-gradient(180deg, #fff, #f2f8ff);
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 11px 0 rgba(0,0,0,.12), 0 18px 26px rgba(0,0,0,.14);
      transition: transform .08s ease, box-shadow .08s ease, outline .08s ease;
      min-height: 58px;
      user-select: none;
    }
    .choice:active {
      transform: translateY(7px);
      box-shadow: 0 4px 0 rgba(0,0,0,.12), 0 12px 18px rgba(0,0,0,.14);
    }
    .choice[disabled] { opacity: .75; cursor: not-allowed; }
    .choice.selected { outline: 4px solid rgba(124,58,237,.22); }

    .mark3d {
      position: absolute;
      right: 10px; top: 10px;
      width: 36px; height: 36px;
      border-radius: 999px;
      display: grid; place-items: center;
      font-size: 20px;
      font-weight: 1300;
      transform: scale(0) rotate(-12deg);
      transition: transform .16s ease;
      border: 1px solid rgba(0,0,0,.10);
      box-shadow: 0 7px 0 rgba(0,0,0,.14), 0 14px 18px rgba(0,0,0,.12);
    }
    .mark3d.show { transform: scale(1) rotate(0deg); }
    .mark3d.good {
      background: linear-gradient(180deg, #dcfce7, #86efac);
      color: #0f7a36;
    }
    .mark3d.bad {
      background: linear-gradient(180deg, #ffe4e6, #fda4af);
      color: #a31212;
    }

    .bottomRow {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    .status {
      font-weight: 1000;
      font-size: 14px;
      opacity: .85;
    }

    .overlay {
      position: absolute; inset: 0;
      display: none;
      background: rgba(0,0,0,.22);
      z-index: 20;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .overlay.show { display: flex; }
    .endCard {
      width: min(520px, 100%);
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 16px;
      text-align: center;
    }
    .endTitle { font-size: 24px; font-weight: 1300; margin: 0; }
    .endScore { font-size: 30px; font-weight: 1400; margin: 8px 0 2px; }
    .endSub { opacity: .75; margin: 0 0 12px; }

    /* Тонкие декорации */
    .dots {
      position: absolute; inset: 0;
      pointer-events: none;
      opacity: .28;
      background:
        radial-gradient(10px 10px at 10% 85%, rgba(255,255,255,.95), transparent 60%),
        radial-gradient(10px 10px at 25% 92%, rgba(255,255,255,.9), transparent 60%),
        radial-gradient(10px 10px at 75% 88%, rgba(255,255,255,.9), transparent 60%),
        radial-gradient(10px 10px at 92% 90%, rgba(255,255,255,.95), transparent 60%);
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="game" id="game">
    <div class="dots"></div>

    <div class="top">
      <div class="leftGroup">
        <div class="badge">Aa</div>
        <div class="titleBlock">
          <div class="title">English Fun</div>
          <div class="meta">Level <span id="level">1</span>/3 • Q <span id="qIndex">1</span>/5</div>
        </div>
      </div>

      <!-- ВАША КАРТИНКА: вставляем прямо сюда -->
      <img src="boy.png" alt="boy" width="80" height="60" />
      <img src="girl.png" alt="girl" width="80" height="60" />
      <div class="rightGroup">
        <div class="scoreLine" aria-label="score">
          <span class="scoreLabel">Score:</span>
          <span class="scoreValue"><span id="score">0</span></span>
          <span class="star" aria-hidden="true">⭐</span>
        </div>
        <!-- Убрана кнопка restart -->
      </div>
    </div>

    <div class="card">
      <p class="sentence" id="sentence"></p>
      <div class="choices" id="choices"></div>

      <div class="bottomRow">
        <div class="status" id="status">Choose an answer.</div>
        <button class="btn3d" id="btnNext" type="button" disabled>Next ➜</button>
      </div>
    </div>

    <div class="overlay" id="overlay">
      <div class="endCard">
        <p class="endTitle">Finished!</p>
        <div class="endScore"><span id="finalScore">0</span></div>
        <p class="endSub" id="finalSub">You completed all 3 levels.</p>
        <!-- Убираем кнопку "Play again" -->
        <!-- <button class="btn3d" id="btnPlayAgain" type="button">Play again</button> -->
      </div>
    </div>
  </div>

  <script>
    const LEVELS = [
      [
        { text: "How ___ bread do you need?", choices: ["a lot of", "much", "many"], correct: 1 },
        { text: "We don't have ___ bananas.", choices: ["a lot of", "much", "many"], correct: 2 },
        { text: "There is ___ butter in the fridge.", choices: ["a lot of", "much", "many"], correct: 0 },
        { text: "Is there ___ water in the bottle?", choices:["a lot of", "much", "many"], correct: 1 },
        { text: "Do you have ___ apples?", choices: ["a lot of", "much", "many"], correct: 2 },
      ],
      [
        { text: " ___ is my room.", choices: ["This", "These", "Those"], correct: 0 },
        { text: " ___ are my toys.", choices: ["That", "These", "This"], correct: 1 },
        { text: " ___ is my computer.", choices: ["These", "That", "Those"], correct: 1 },
        { text: " ___ are my mum's books.", choices: ["That", "This", "Those"], correct: 2 },
        { text: " ___ chair is green.", choices: ["These", "This", "That"], correct: 1 },
      ],
      [
        { text: "Ths girl is  ___ dancer in our group.", choices: ["good", "better", "the best"], correct: 2 },
        { text: "The baby is very ___ .", choices: ["pretty", "prettier", "the prettiest"], correct: 0 },
        { text: "Monkeys are ___ than tigers.", choices: ["funny", "funnier", "the funniest"], correct: 1 },
        { text: "Mr Brown is ___ teacher of all.", choices: ["kind", "kinder", "the kindest"], correct: 2 },
        { text: "Summer is  ___ than winter.", choices: ["hot", "hotter", "the hottest"], correct: 1 },
      ]
    ];

    const els = {
      level: document.getElementById("level"),
      qIndex: document.getElementById("qIndex"),
      score: document.getElementById("score"),
      sentence: document.getElementById("sentence"),
      choices: document.getElementById("choices"),
      status: document.getElementById("status"),
      btnNext: document.getElementById("btnNext"),
      overlay: document.getElementById("overlay"),
      finalScore: document.getElementById("finalScore"),
      finalSub: document.getElementById("finalSub"),
      // btnPlayAgain: document.getElementById("btnPlayAgain"), // убрали
    };

    let levelIndex = 0;
    let qIndex = 0;
    let score = 0;
    let answered = false;

    function q() { return LEVELS[levelIndex][qIndex]; }

    function resetMarks() {
      [...els.choices.querySelectorAll(".mark3d")].forEach(m => m.remove());
    }
    function disableChoices(disabled) {
      [...els.choices.querySelectorAll(".choice")].forEach(b => b.disabled = disabled);
    }

    function render() {
      answered = false;
      els.level.textContent = String(levelIndex + 1);
      els.qIndex.textContent = String(qIndex + 1);
      els.btnNext.disabled = true;
      els.status.textContent = "Choose an answer.";
      els.sentence.innerHTML = q().text.replace("___", `<span class="blank">___</span>`);
      els.choices.innerHTML = "";

      q().choices.forEach((txt, idx) => {
        const btn = document.createElement("button");
        btn.type = "button";
        btn.className = "choice";
        btn.textContent = txt;
        btn.addEventListener("click", () => choose(idx, btn));
        els.choices.appendChild(btn);
      });

      disableChoices(false);
    }

    function addMark(btn, ok) {
      resetMarks();
      const mark = document.createElement("div");
      mark.className = "mark3d " + (ok ? "good" : "bad");
      mark.textContent = ok ? "✓" : "✗";
      btn.appendChild(mark);
      void mark.offsetWidth;
      mark.classList.add("show");
    }

    function choose(idx, btn) {
      if (answered) return;

      const ok = idx === q().correct;

      [...els.choices.children].forEach(x => x.classList.remove("selected"));
      btn.classList.add("selected");

      addMark(btn, ok);

      answered = true;
      disableChoices(true);
      els.btnNext.disabled = false;

      if (ok) {
        score += 10;
        els.score.textContent = String(score);
        els.status.textContent = "Correct! Press Next.";
      } else {
        els.status.textContent = "Oops! Press Next.";
      }
    }

    function next() {
      if (!answered) return;

      qIndex++;
      if (qIndex >= 5) {
        levelIndex++;
        qIndex = 0;
      }
      if (levelIndex >= 3) {
        showEnd();
        return;
      }
      render();
    }

    function showEnd() {
      els.finalScore.textContent = String(score);
      const maxScore = LEVELS.reduce((sum, level) => sum + level.length * 10, 0);
      els.finalSub.textContent = `Your score: ${score} / ${maxScore} (${Math.round((score / maxScore) * 100)}%)`;
      els.overlay.classList.add("show");
      els.btnNext.disabled = true;
      disableChoices(true);
      // скрываем кнопку "Play again", если она есть
      // document.getElementById("btnPlayAgain").style.display = "none";
    }

    // Обработчик для кнопки "Next"
    els.btnNext.addEventListener("click", next);

    // Инициализация игры
    render();
  </script>
</body>
</html>