:root {
        --ink: #24345a;
        --muted: #71809c;
        --paper: #fffdf8;
        --coral: #ff6f61;
        --yellow: #ffc94f;
        --green: #42b883;
        --green-dark: #23855d;
        --sky: #65d3e5;
        --purple: #7776df;
        --red: #e75450;
        --shadow: 0 20px 55px rgba(40, 61, 89, 0.13);
      }

      * { box-sizing: border-box; }
      body {
        margin: 0;
        min-height: 100vh;
        color: var(--ink);
        font-family: "Nunito", sans-serif;
        background:
          radial-gradient(circle at 5% 8%, rgba(255, 201, 79, 0.22) 0 95px, transparent 96px),
          radial-gradient(circle at 96% 40%, rgba(66, 184, 131, 0.15) 0 170px, transparent 171px),
          linear-gradient(145deg, #fff9eb, #f5fbef 62%, #eef9f7);
        overflow-x: hidden;
      }

      button, select { font: inherit; }
      button { color: inherit; }
      .topbar {
        height: 72px;
        padding: 0 clamp(18px, 5vw, 72px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(36, 52, 90, 0.08);
        background: rgba(255, 253, 248, 0.84);
        backdrop-filter: blur(14px);
        position: relative;
        z-index: 10;
      }
      .brand { display: flex; align-items: center; gap: 11px; }
      .brand-mark {
        width: 41px; height: 41px; display: grid; place-items: center;
        border-radius: 14px; background: var(--green); color: white; font-size: 22px;
        transform: rotate(-5deg); box-shadow: 0 7px 16px rgba(66, 184, 131, 0.25);
      }
      .brand-name { font: 800 22px/1 "Baloo 2", cursive; }
      .brand-name small { display: block; font: 800 9px/1.3 "Nunito", sans-serif; letter-spacing: 1.6px; color: var(--green-dark); }
      .top-actions { display: flex; align-items: center; gap: 9px; }
      .icon-btn {
        width: 41px; height: 41px; display: grid; place-items: center;
        border: 1px solid #e4e4dc; border-radius: 13px; background: white;
        text-decoration: none; cursor: pointer; transition: 0.18s; box-shadow: 0 4px 12px rgba(36,52,90,.04);
      }
      .icon-btn:hover { transform: translateY(-2px); }

      main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 48px; }
      .welcome { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 21px; }
      .eyebrow { margin: 0 0 3px; color: var(--green-dark); font-size: 11px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; }
      h1 { margin: 0; font: 800 clamp(29px, 4vw, 40px)/1.1 "Baloo 2", cursive; }
      .welcome-copy { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
      .best-pill { flex: 0 0 auto; padding: 10px 15px; border: 1px solid #e8e5dc; border-radius: 15px; background: white; font-size: 12px; font-weight: 900; box-shadow: 0 8px 22px rgba(36,52,90,.05); }

      .game-shell {
        display: grid; grid-template-columns: 290px 1fr; min-height: 680px;
        border: 1px solid rgba(36, 52, 90, 0.09); border-radius: 30px;
        overflow: hidden; background: rgba(255,255,255,.9); box-shadow: var(--shadow);
      }

      .host-panel {
        position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center;
        padding: 27px 21px 22px;
        background: linear-gradient(180deg, #6dd4e4 0 48%, #81d26f 48.2% 100%);
      }
      .sun { position: absolute; width: 58px; height: 58px; border-radius: 50%; top: 20px; right: 21px; background: #ffe276; box-shadow: 0 0 0 10px rgba(255,226,118,.18); }
      .cloud { position: absolute; top: 72px; left: 14px; font-size: 42px; opacity: .82; }
      .slide { position: absolute; right: -17px; bottom: 100px; font-size: 78px; transform: rotate(-2deg); opacity: .8; }
      .swing { position: absolute; left: -7px; bottom: 89px; font-size: 64px; opacity: .68; }
      .host-badge { position: relative; z-index: 2; align-self: flex-start; padding: 7px 11px; border-radius: 40px; background: rgba(255,255,255,.9); color: var(--green-dark); font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; }
      .speech {
        position: relative; z-index: 3; width: 100%; min-height: 84px; margin-top: 23px; padding: 14px 16px;
        display: grid; place-items: center; border-radius: 20px 20px 20px 5px;
        background: white; box-shadow: 0 11px 25px rgba(31,99,112,.16); text-align: center;
        font: 700 15px/1.35 "Baloo 2", cursive;
      }
      .speech strong { color: var(--coral); }
      .cat-wrap { position: relative; z-index: 2; width: 210px; height: 300px; margin-top: 7px; }
      .cat-wrap.happy { animation: hop .55s ease; }
      .cat-wrap.think { animation: wobble .4s ease; }
      .cat-wrap.singing { animation: sing .3s ease-in-out infinite alternate; }
      .cat-wrap.singing::before, .cat-wrap.singing::after { position: absolute; z-index: 6; color: #6544b5; font: 900 26px/1 "Baloo 2"; animation: notes .8s ease-out infinite; }
      .cat-wrap.singing::before { content: "♪"; left: 8px; top: 80px; }
      .cat-wrap.singing::after { content: "♫"; right: 5px; top: 52px; animation-delay: .24s; }
      @keyframes hop { 45% { transform: translateY(-18px) rotate(3deg); } }
      @keyframes wobble { 25% { transform: rotate(-4deg); } 70% { transform: rotate(4deg); } }
      @keyframes sing { to { transform: translateY(-5px) rotate(1deg); } }
      @keyframes notes { from { transform: translateY(8px); opacity: 0; } 35% { opacity: 1; } to { transform: translateY(-22px); opacity: 0; } }
      .cat-svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 8px rgba(80,72,40,.16)); }
      .host-name { position: relative; z-index: 2; text-align: center; margin-top: -9px; }
      .host-name h2 { margin: 0; font: 800 23px/1 "Baloo 2", cursive; }
      .host-name p { margin: 5px 0 0; color: #315e45; font-size: 10px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; }
      .round-progress { position: relative; z-index: 2; width: 100%; margin-top: auto; padding: 13px 14px; border-radius: 17px; background: rgba(255,255,255,.78); }
      .progress-top { display: flex; justify-content: space-between; font-size: 9px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
      .progress-track { height: 7px; margin-top: 8px; border-radius: 20px; overflow: hidden; background: rgba(36,52,90,.13); }
      .progress-fill { width: 10%; height: 100%; border-radius: inherit; background: var(--coral); transition: width .35s; }

      .play-panel { min-width: 0; display: flex; flex-direction: column; padding: clamp(24px, 4vw, 40px); }
      .lesson-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
      .lesson-heading { display: flex; align-items: center; gap: 12px; }
      .lesson-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: #e9f8ee; font-size: 22px; }
      .lesson-heading h2 { margin: 0; font: 800 21px/1.1 "Baloo 2", cursive; }
      .lesson-heading p { margin: 3px 0 0; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .9px; text-transform: uppercase; }
      .lesson-select { padding: 9px 34px 9px 12px; border: 1px solid #e3e3dc; border-radius: 13px; background: white; color: var(--ink); font-size: 11px; font-weight: 900; cursor: pointer; }
      .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 18px; }
      .stat { padding: 10px 12px; border-radius: 14px; background: #f5f7f3; text-align: center; }
      .stat strong { display: block; font: 800 18px/1.1 "Baloo 2", cursive; }
      .stat small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }

      .question-card { position: relative; min-height: 285px; padding: 23px; border: 2px solid #ebeae3; border-radius: 23px; background: var(--paper); text-align: center; }
      .question-type { display: inline-block; padding: 5px 10px; border-radius: 40px; color: var(--green-dark); background: #e6f7ec; font-size: 9px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
      .question-card h3 { margin: 10px auto 8px; max-width: 620px; font: 800 clamp(20px, 3vw, 27px)/1.22 "Baloo 2", cursive; }
      .clock-stage { width: 190px; height: 190px; margin: 2px auto -2px; }
      .clock-stage.hidden { display: none; }
      .clock-face { width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgba(36,52,90,.1)); }
      .number-stage { display: none; min-height: 145px; place-items: center; font: 800 clamp(48px, 7vw, 68px)/1 "Baloo 2", cursive; color: var(--purple); }
      .number-stage.show { display: grid; }
      .number-stage.compact { font-size: clamp(28px, 5vw, 43px); }
      .answer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 15px; }
      .answer {
        min-height: 49px; border: 2px solid #e3e3dd; border-bottom-width: 4px; border-radius: 14px;
        background: white; font: 800 17px/1 "Baloo 2", cursive; cursor: pointer; transition: .14s;
      }
      .answer:hover:not(:disabled), .answer:focus-visible:not(:disabled) { border-color: var(--green); transform: translateY(-2px); outline: none; }
      .answer:disabled { cursor: default; }
      .answer.correct { color: white; background: var(--green); border-color: var(--green-dark); }
      .answer.wrong { color: white; background: #ee726a; border-color: #c94a47; }
      .answer-key { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 6px; background: rgba(36,52,90,.08); font: 900 9px/1 "Nunito"; }
      .feedback-row { min-height: 55px; margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
      .explanation { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; text-align: left; }
      .next-btn { display: none; flex: 0 0 auto; padding: 11px 18px; border: 0; border-radius: 13px; background: var(--ink); color: white; font-size: 11px; font-weight: 900; cursor: pointer; box-shadow: 0 7px 14px rgba(36,52,90,.16); }
      .next-btn.show { display: block; }
      .tip { margin-top: auto; padding-top: 12px; color: var(--muted); font-size: 10px; font-weight: 800; text-align: center; }
      .tip b { color: var(--ink); }

      .modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(36,52,90,.34); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: .2s; }
      .modal-backdrop.show { opacity: 1; pointer-events: auto; }
      .modal { width: min(420px, 100%); padding: 31px; border-radius: 26px; background: white; box-shadow: 0 25px 70px rgba(25,34,65,.25); text-align: center; }
      .modal-icon { font-size: 56px; }
      .modal h2 { margin: 6px 0 3px; font: 800 29px/1.1 "Baloo 2", cursive; }
      .modal p { margin: 7px 0 20px; color: var(--muted); font-size: 13px; }
      .result-score { margin-bottom: 20px; padding: 15px; border-radius: 15px; background: #f4f8f3; font: 800 25px/1 "Baloo 2"; }
      .again-btn { width: 100%; padding: 13px; border: 0; border-radius: 14px; background: var(--green); color: white; font-weight: 900; cursor: pointer; }

      @media (max-width: 850px) {
        .game-shell { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); }
        .host-panel { min-width: 0; min-height: 210px; display: grid; grid-template-columns: minmax(0, 1fr) 145px; grid-template-rows: auto 1fr; align-items: center; padding: 18px 23px; background: linear-gradient(110deg,#6dd4e4 0 68%,#81d26f 68.2%); }
        .host-badge { grid-column: 1; }
        .speech { grid-column: 1; min-width: 0; margin: 10px 0 0; max-width: 350px; }
        .cat-wrap { grid-column: 2; grid-row: 1 / 3; width: 145px; height: 200px; margin: 0; align-self: end; }
        .host-name { position: absolute; right: 19px; bottom: 7px; }
        .host-name h2 { font-size: 16px; }
        .host-name p, .round-progress { display: none; }
      }
      @media (max-width: 560px) {
        .topbar { padding: 0 14px; }
        .brand-name { font-size: 18px; }
        main { width: calc(100% - 18px); padding-top: 22px; }
        .welcome { align-items: start; }
        .best-pill { padding: 8px 10px; }
        .best-pill span { display: none; }
        .game-shell { border-radius: 23px; }
        .host-panel { min-height: 174px; grid-template-columns: minmax(0, 1fr) 115px; padding: 15px; }
        .cat-wrap { width: 120px; height: 165px; }
        .speech { width: 100%; max-width: 100%; min-height: 65px; padding: 10px; font-size: 13px; }
        .host-name { display: none; }
        .play-panel { width: 100%; max-width: 100%; padding: 19px 13px 24px; overflow: hidden; }
        .lesson-bar { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
        .lesson-heading p { display: none; }
        .lesson-select { width: 100%; }
        .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .stat { min-width: 0; padding-inline: 4px; }
        .stat small { line-height: 1.2; overflow-wrap: anywhere; }
        .question-card { padding: 18px 13px; }
        .question-card h3 { max-width: 100%; overflow-wrap: anywhere; }
        .clock-stage { width: 165px; height: 165px; }
        .answer-grid { gap: 7px; }
        .answer { min-height: 46px; font-size: 15px; }
        .feedback-row { flex-direction: column; }
        .next-btn { width: 100%; }
      }
      @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }