:root{
          --primary:#F5821F;
          --primary-dark:#D96C10;
          --secondary:#1E3A5F;
          --secondary-light:#2C4F7C;
          --white:#FFFFFF;
          --bg-light:#F4F7FA;
          --text:#5B6B7C;
          --text-dark:#1A2436;
          --line: rgba(30,58,95,0.12);
          --shadow: 0 18px 40px -18px rgba(30,58,95,0.25);
          --radius: 16px;
          --mint:#0E8C6F;
          --mint-bright:#22C08D;
          --sun:#F5A623;
          --sky:#2E9BF5;
          --pink:#F5427D;
          --purple:#7B4FE0;
        }
        *{box-sizing:border-box; margin:0; padding:0;}
        html{scroll-behavior:smooth;}
        body{
          font-family:'Poppins', sans-serif;
          color:var(--text-dark);
          background:var(--white);
        }
        h1,h2,h3{ font-family:'Nunito', sans-serif; }
        a{text-decoration:none; color:inherit;}

        /* ---------- Layout ---------- */
        .skills-page{ background:var(--white); }
        .skills-layout{
          max-width:1300px; margin:0 auto;
          display:grid;
          grid-template-columns:88px 1fr;
          gap:0;
          align-items:start;
        }

        /* ---------- Grade rail ---------- */
        .grade-rail{
          position:sticky; top:0;
          display:flex; flex-direction:column; align-items:center;
          padding:36px 0 60px;
          gap:2px;
        }
        .grade-rail::before{
          content:"";
          position:absolute;
          top:70px; bottom:60px; left:50%;
          width:2px; transform:translateX(-50%);
          background:var(--line);
          z-index:0;
        }
        .grade-node{
          position:relative; z-index:1;
          display:flex; align-items:center; gap:12px;
          width:100%;
          padding:6px 0;
          cursor:pointer;
        }
        .node-circle{
          width:44px; height:44px; flex-shrink:0;
          border-radius:50%;
          display:flex; align-items:center; justify-content:center;
          font-family:'Nunito', sans-serif; font-weight:800; font-size:15px;
          color:var(--white);
          background:var(--c);
          box-shadow:0 3px 0 0 rgba(0,0,0,0.15);
          transition: transform .15s ease, width .15s ease, height .15s ease;
          margin-left:22px;
        }
        .grade-node:hover .node-circle{ transform:scale(1.08); }
        .grade-node.active .node-circle{
          width:60px; height:60px; font-size:19px;
          margin-left:14px;
          box-shadow:0 0 0 5px var(--white), 0 0 0 8px var(--c), 0 4px 0 0 rgba(0,0,0,0.18);
        }
        .node-tip{
          position:absolute; left:calc(100% + 4px);
          white-space:nowrap;
          background:var(--text-dark); color:var(--white);
          font-size:12.5px; font-weight:700;
          padding:6px 12px; border-radius:8px;
          opacity:0; pointer-events:none;
          transform:translateX(-6px);
          transition: opacity .15s ease, transform .15s ease;
          z-index:5;
        }
        .grade-node:hover .node-tip{ opacity:1; transform:translateX(0); }
        .grade-node.active .node-tip{ display:none; }

        /* ---------- Main column ---------- */
        .skills-main{
          padding:36px 40px 100px 48px;
          border-left:1px solid var(--line);
        }
        .skills-header{
          position:relative;
          margin-bottom:36px;
          padding-bottom:28px;
          border-bottom:1px solid var(--line);
        }
        .skills-header .shape{ position:absolute; }
        .skills-eyebrow{
          display:inline-flex; align-items:center; gap:8px;
          background:rgba(46,155,245,0.1); color:var(--sky);
          font-weight:800; font-size:13px; letter-spacing:.03em;
          padding:6px 14px; border-radius:999px;
          margin-bottom:14px;
        }
        .skills-header h1{
          font-size:38px; font-weight:800; color:var(--sky);
          line-height:1.15;
        }
        .skills-header h1 .accent{ color:var(--secondary); }
        .skills-header p{
          margin-top:14px; max-width:900px;
          font-size:15.5px; line-height:1.7; color:var(--text); font-weight:500;
        }

        .skills-grid{
          display:grid;
          grid-template-columns:repeat(3, 1fr);
          gap:8px 56px;
        }
        .skill-category{
          padding-bottom:30px;
          margin-bottom:8px;
        }
        .skill-category h2{
          font-size:19px; font-weight:800; color:var(--cat);
          margin-bottom:14px;
          display:flex; align-items:center; gap:9px;
        }
        .skill-category h2::before{
          content:"";
          width:9px; height:9px; border-radius:3px;
          background:var(--cat);
          display:inline-block;
          transform:rotate(45deg);
        }
        .skill-category ul{ list-style:none; }
        .skill-category li{ margin-bottom:3px; }
        .skill-category li a{
          display:flex; align-items:baseline; gap:9px;
          padding:6px 8px;
          border-radius:8px;
          font-size:14.5px; font-weight:600; color:var(--text-dark);
          transition: background .12s ease, color .12s ease, transform .12s ease;
        }
        .skill-category li a:hover{
          background: color-mix(in srgb, var(--cat) 10%, white);
          color:var(--cat);
          transform:translateX(3px);
        }
        .skill-category li a .code{
          font-weight:800; color:var(--cat);
          min-width:26px; flex-shrink:0; font-size:13.5px;
        }
        .skill-category li a .name{ flex:1; }
        .skill-category li a .fa-eye{
          font-size:11px; opacity:0; color:var(--cat);
          transition: opacity .12s ease;
        }
        .skill-category li a:hover .fa-eye{ opacity:1; }

        /* ---------- Responsive ---------- */
        @media (max-width: 980px){
          .skills-layout{ grid-template-columns:64px 1fr; }
          .skills-main{ padding:28px 20px 80px 24px; }
          .skills-grid{ grid-template-columns:repeat(2, 1fr); gap:8px 32px; }
          .node-circle{ width:34px; height:34px; font-size:12px; margin-left:14px;}
          .grade-node.active .node-circle{ width:46px; height:46px; font-size:14px; margin-left:8px;}
          .skills-header h1{ font-size:28px; }
        }
        @media (max-width: 768px){
          .skills-grid{ grid-template-columns:1fr; }
        }

        /* =====================================================
           MOBILE APP MODE  (phones ~≤600px)
           Rebuilds the skills page as a compact, card-based,
           app-like experience instead of a shrunk desktop layout.
        ===================================================== */
        @media (max-width: 600px){

          /* ---- Kill the grid layout, stack rail above content ---- */
          .skills-layout{
            display:block;
            max-width:100%;
          }

          /* ---- Grade rail becomes a horizontal chip scroller ---- */
          .grade-rail{
            position:sticky;
            top:0;
            z-index:40;
            flex-direction:row;
            align-items:center;
            width:100%;
            padding:10px 10px;
            gap:14px;
            overflow-x:auto;
            overflow-y:hidden;
            -webkit-overflow-scrolling:touch;
            scroll-snap-type:x proximity;
            background:var(--white);
            border-bottom:1px solid var(--line);
            box-shadow:0 6px 16px -12px rgba(30,58,95,0.35);
          }
          .grade-rail::-webkit-scrollbar{ display:none; }
          .grade-rail{ scrollbar-width:none; }
          .grade-rail::before{ display:none; } /* remove vertical connector line */

          .grade-node{
            flex-direction:column;
            align-items:center;
            width:auto;
            padding:2px 0;
            gap:3px;
            flex-shrink:0;
            scroll-snap-align:center;
          }
          .node-circle{
            margin-left:0 !important;
            width:36px; height:36px; font-size:12.5px;
            box-shadow:0 2px 0 0 rgba(0,0,0,0.15);
          }
          .grade-node.active .node-circle{
            width:42px; height:42px; font-size:14px;
            margin-left:0 !important;
            box-shadow:0 0 0 3px var(--white), 0 0 0 5px var(--c), 0 3px 0 0 rgba(0,0,0,0.18);
          }
          .node-tip{
            position:static;
            opacity:1; pointer-events:none;
            transform:none;
            background:transparent;
            color:var(--text);
            font-weight:700; font-size:9.5px;
            padding:0; border-radius:0;
          }
          .grade-node.active .node-tip{
            display:block;
            color:var(--c);
          }

          /* ---- Main column: tight, edge-to-edge, no divider ---- */
          .skills-main{
            padding:12px 14px 60px;
            border-left:none;
          }

          /* ---- Compact hero: small badge + tight title + clamped copy ---- */
          .skills-header{
            margin-bottom:14px;
            padding-bottom:12px;
            border-bottom:none;
          }
          .skills-header .shape{ display:none; }
          .skills-eyebrow{
            font-size:10.5px; font-weight:800;
            padding:4px 10px; margin-bottom:8px;
            border-radius:999px;
          }
          .skills-header h1{
            font-size:21px; line-height:1.2;
          }
          .skills-header p{
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
            margin-top:6px;
            font-size:12.5px; line-height:1.5;
            max-width:100%;
          }

          /* ---- Category grid: single column of compact "lesson" cards ---- */
          .skills-grid{
            grid-template-columns:1fr;
            gap:10px;
          }
          .skill-category{
            position:relative;
            background:var(--white);
            border:1px solid var(--line);
            border-radius:14px;
            padding:12px 12px 8px 16px;
            margin-bottom:0;
            box-shadow:0 6px 18px -12px rgba(30,58,95,0.28);
            overflow:hidden;
          }
          .skill-category::after{
            content:"";
            position:absolute; left:0; top:0; bottom:0;
            width:5px;
            background:var(--cat);
            border-radius:4px 0 0 4px;
          }
          .skill-category h2{
            font-size:14px;
            margin-bottom:8px;
            gap:7px;
          }
          .skill-category h2::before{
            width:7px; height:7px; border-radius:2px;
          }
          .skill-category ul{
            display:flex;
            flex-direction:column;
            gap:6px;
          }
          .skill-category li{ margin-bottom:0; }
          .skill-category li a{
            align-items:center;
            gap:8px;
            padding:9px 10px;
            min-height:42px;
            border-radius:11px;
            background:var(--bg-light);
            font-size:13px;
            font-weight:600;
          }
          .skill-category li a:active{
            transform:scale(0.97);
            background: color-mix(in srgb, var(--cat) 14%, white);
          }
          .skill-category li a .code{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width:30px;
            padding:3px 6px;
            font-size:11px;
            border-radius:7px;
            background: color-mix(in srgb, var(--cat) 15%, white);
            color:var(--cat);
          }
          .skill-category li a .name{
            font-size:13px;
            line-height:1.3;
          }
          .skill-category li a .fa-eye{
            opacity:0.5;
            font-size:11px;
          }
        }

        /* ---- Extra-small phones (≤380px): tighten one notch further ---- */
        @media (max-width: 380px){
          .skills-main{ padding:10px 10px 56px; }
          .skills-header h1{ font-size:19px; }
          .skills-eyebrow{ font-size:10px; padding:4px 9px; }
          .skill-category{ padding:10px 10px 7px 14px; }
          .skill-category h2{ font-size:13.5px; }
          .skill-category li a{ font-size:12.5px; padding:8px 9px; min-height:40px; }
          .node-circle{ width:33px; height:33px; font-size:11.5px; }
          .grade-node.active .node-circle{ width:39px; height:39px; font-size:13px; }
        }

        /* ---------- Base-10 Blocks Counting Quiz ---------- */
        .bq-eyebrow{
          text-align:center; font-family:'Nunito',sans-serif;
          font-weight:800; color:var(--text); font-size:13.5px;
          letter-spacing:.02em; margin-bottom:10px;
        }
        .bq-title{
          text-align:center; font-family:'Nunito',sans-serif;
          font-weight:800; font-size:22px; color:var(--secondary);
          margin-bottom:16px;
        }
        .bq-slot-tracker{
          display:flex; gap:8px; justify-content:center;
          margin-bottom:14px; flex-wrap:wrap;
        }
        .slot-dot{
          width:28px; height:28px; border-radius:50%;
          display:flex; align-items:center; justify-content:center;
          font-family:'Nunito',sans-serif; font-weight:800; font-size:12px;
          background:var(--bg-light); color:var(--text);
          border:2px solid var(--line);
          transition:all .15s ease;
        }
        .slot-dot.current{ background:var(--sky); border-color:var(--sky); color:#fff; transform:scale(1.12); }
        .slot-dot.done{ background:var(--mint-bright); border-color:var(--mint-bright); color:#fff; }
        .bq-star-tracker{
          display:flex; gap:6px; justify-content:center;
          background:var(--bg-light); border-radius:14px;
          padding:12px 10px; margin-bottom:14px;
        }
        .starSlot{ font-size:26px; color:var(--line); transition:color .15s ease, transform .15s ease; }
        .starSlot.earned{ color:var(--sun); transform:scale(1.15); }
        .bq-progress{
          text-align:center; font-family:'Nunito',sans-serif;
          font-weight:700; color:var(--text); font-size:13px;
          margin-bottom:12px;
        }
        .bq-svg-wrap{
          display:flex; align-items:center; justify-content:center;
          min-height:150px; margin-bottom:18px;
          background:radial-gradient(circle at 40% 30%, #ffffff, var(--bg-light));
          border:2px dashed var(--line); border-radius:20px;
          padding:14px;
        }
        .bq-input-row{
          display:flex; gap:10px; justify-content:center; align-items:center;
          margin-bottom:14px;
        }
        .bq-answer-input{
          width:110px; padding:12px 14px; text-align:center;
          font-family:'Nunito',sans-serif; font-weight:800; font-size:22px;
          color:var(--secondary);
          border:2px solid var(--line); border-radius:14px;
          background:var(--white);
          transition:border-color .15s ease;
        }
        .bq-answer-input:focus{ outline:none; border-color:var(--sky); }
        .bq-answer-input.correct-input{ border-color:var(--mint-bright); background:rgba(34,192,141,0.1); color:var(--mint); }
        .bq-answer-input.wrong-input{ border-color:var(--pink); background:rgba(245,66,125,0.08); }
        .bq-check-btn, .bq-next-btn, .bq-btn{
          font-family:'Nunito',sans-serif; font-weight:800; font-size:15px;
          padding:12px 24px; border-radius:14px; border:none;
          background:var(--primary); color:#fff; cursor:pointer;
          transition:transform .12s ease, background .12s ease;
        }
        .bq-check-btn:hover, .bq-next-btn:hover, .bq-btn:hover{ transform:translateY(-2px); }
        .bq-check-btn:disabled{ opacity:.5; cursor:default; transform:none; }
        .bq-next-btn{ display:block; margin:0 auto; background:var(--sky); }
        .bq-feedback{
          text-align:center; font-family:'Nunito',sans-serif; font-weight:700;
          font-size:15px; color:var(--secondary); min-height:24px; margin-bottom:14px;
        }
        .bq-stars{ text-align:center; font-size:34px; letter-spacing:6px; margin-bottom:10px; }
        .bq-score-text{ text-align:center; font-family:'Nunito',sans-serif; font-weight:700; color:var(--text-dark); font-size:16px; margin-bottom:12px; }
        .bq-reward{
          text-align:center; font-family:'Nunito',sans-serif; font-weight:800;
          font-size:17px; color:var(--secondary);
          background:var(--bg-light); border-radius:14px; padding:12px 16px;
          margin-bottom:14px;
        }
        .bq-reward.perfectScore{ background:rgba(245,166,35,0.15); color:var(--primary-dark); }
        .bq-summary-prompt{ text-align:center; color:var(--text); font-weight:600; margin-bottom:16px; }
        .bq-summary-buttons{ display:flex; gap:12px; justify-content:center; }
        .bq-btn.ghost{ background:var(--bg-light); color:var(--text-dark); }

        /* ---------- Compare Numbers Quiz (>, <, =) ---------- */
        .cn-question-wrap{
          display:flex; align-items:center; justify-content:center;
          gap:16px; min-height:150px; margin-bottom:18px;
          background:radial-gradient(circle at 40% 30%, #ffffff, var(--bg-light));
          border:2px dashed var(--line); border-radius:20px;
          padding:14px;
        }
        .cn-num{
          font-family:'Nunito',sans-serif; font-weight:800; font-size:40px;
          color:var(--secondary);
          background:var(--white);
          border:2px solid var(--line); border-radius:14px;
          padding:10px 20px; min-width:64px; text-align:center;
        }
        .cn-blank{
          font-family:'Nunito',sans-serif; font-weight:800; font-size:32px;
          color:var(--white); background:var(--primary);
          border:3px dashed var(--primary-dark); border-radius:14px;
          width:58px; height:58px; flex-shrink:0;
          display:flex; align-items:center; justify-content:center;
          transition:background .15s ease, border-color .15s ease, transform .15s ease;
        }
        .cn-blank.filled{ border-style:solid; transform:scale(1.05); }
        .cn-blank.correct{ background:var(--mint-bright); border-color:var(--mint); }
        .cn-blank.wrong{ background:var(--pink); border-color:var(--pink); }
        .cn-options-row{
          display:flex; gap:14px; justify-content:center; margin-bottom:14px;
        }
        .cn-opt-btn{
          font-family:'Nunito',sans-serif; font-weight:800; font-size:26px;
          width:60px; height:60px; border-radius:16px;
          border:2px solid var(--line); background:var(--white); color:var(--secondary);
          cursor:pointer; box-shadow:0 3px 0 0 rgba(0,0,0,0.08);
          transition:transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
        }
        .cn-opt-btn:hover:not(:disabled){ transform:translateY(-2px); background:var(--bg-light); }
        .cn-opt-btn:disabled{ cursor:default; }
        .cn-opt-btn.correct-opt{ background:var(--mint-bright); color:#fff; border-color:var(--mint); }
        .cn-opt-btn.wrong-opt{ background:var(--pink); color:#fff; border-color:var(--pink); opacity:.75; }

        /* Compare Numbers — mobile responsiveness (tablets / large phones) */
        @media (max-width: 560px){
          .cn-question-wrap{ gap:12px; padding:12px 8px; }
          .cn-num{ font-size:32px; padding:9px 16px; min-width:52px; }
          .cn-blank{ font-size:26px; width:50px; height:50px; }
          .cn-options-row{ gap:12px; }
        }
        /* Compare Numbers — small Android phones */
        @media (max-width: 400px){
          .cn-question-wrap{ gap:8px; padding:10px 6px; flex-wrap:wrap; }
          .cn-num{ font-size:24px; padding:7px 10px; min-width:40px; }
          .cn-blank{ font-size:20px; width:40px; height:40px; }
          .cn-options-row{ gap:8px; }
        }

        /* ---------- Shape Quiz (content styles; shell in quiz-popup-theme.css) ---------- */
        .quiz-progress{
          display:flex; gap:8px; justify-content:center;
          margin-bottom:8px;
        }
        .quiz-dot{
          width:14px; height:14px; border-radius:50%;
          background:var(--line);
          transition:background .15s ease, transform .15s ease;
        }
        .quiz-dot.current{ background:var(--sky); transform:scale(1.25); }
        .quiz-dot.correct{ background:var(--mint-bright); }
        .quiz-dot.wrong{ background:var(--pink); }

        .quiz-eyebrow{
          text-align:center; font-family:'Nunito',sans-serif;
          font-weight:800; color:var(--text); font-size:13.5px;
          letter-spacing:.02em; margin:6px 0 4px;
        }
        .quiz-question{
          text-align:center; font-family:'Nunito',sans-serif;
          font-weight:800; font-size:24px; color:var(--secondary);
          margin-bottom:14px;
        }
         quiz-question.speaking{ color:#FB8C00; font-weight:700; transition:0.25s; }
        .quiz-shape-box{
          width:210px; height:210px; margin:0 auto 20px;
          border-radius:50%;
          background:radial-gradient(circle at 35% 30%, #ffffff, var(--bg-light));
          border:2px dashed var(--line);
          display:flex; align-items:center; justify-content:center;
        }
        .quiz-shape-box svg{ width:150px; height:150px; overflow:visible; }

        .quiz-options{
          display:grid; grid-template-columns:1fr 1fr; gap:14px;
        }
        .quiz-opt{
          font-family:'Nunito',sans-serif; font-weight:800; font-size:19px;
          padding:16px 10px; border-radius:16px;
          border:3px solid var(--line); background:var(--white); color:var(--text-dark);
          cursor:pointer; text-align:center;
          transition:transform .12s ease, border-color .12s ease, background .12s ease;
        }
        .quiz-opt:hover:not(:disabled){ transform:translateY(-2px) scale(1.02); border-color:var(--sky); }
        .quiz-opt:disabled{ cursor:default; }
        .quiz-opt.is-correct{ background:rgba(34,192,141,0.15); border-color:var(--mint-bright); color:var(--mint); }
        .quiz-opt.is-wrong{ background:rgba(245,66,125,0.12); border-color:var(--pink); color:var(--pink); }

        /* ---------- "Find the shape" option buttons (used by Circles quiz) ---------- */
        .quiz-shape-options{
          display:flex; gap:24px; justify-content:center; flex-wrap:wrap;
          margin-bottom:6px;
        }
        .quiz-shape-opt{
          width:160px; height:160px;
          border-radius:20px;
          border:3px solid var(--line); background:var(--bg-light);
          cursor:pointer;
          display:flex; align-items:center; justify-content:center;
          transition:transform .12s ease, border-color .12s ease, background .12s ease;
        }
        .quiz-shape-opt:hover:not(:disabled){ transform:translateY(-3px) scale(1.03); border-color:var(--sky); }
        .quiz-shape-opt:disabled{ cursor:default; }
        .quiz-shape-opt svg{ width:105px; height:105px; overflow:visible; }
        .quiz-shape-opt.is-correct{ border-color:var(--mint-bright); background:rgba(34,192,141,0.12); }
        .quiz-shape-opt.is-wrong{ border-color:var(--pink); background:rgba(245,66,125,0.12); }
        .quiz-shape-opt.selected{ border-color:var(--sky); background:rgba(46,155,245,0.15); }

        /* ---------- "Represent numbers" option buttons ---------- */
        .quiz-represent-opt{
          width:210px; height:210px;
        }
        .quiz-represent-opt .represent-icon-wrap{
          display:inline-flex;
        }
        .quiz-represent-opt .represent-icon-wrap svg{
          width:34px; height:34px; overflow:visible;
        }

        /* ---------- "How many?" counting quiz ---------- */
        .quiz-count-box{
          width:100%; min-height:190px; margin:0 auto 20px;
          border-radius:22px;
          background:radial-gradient(circle at 35% 30%, #ffffff, var(--bg-light));
          border:2px dashed var(--line);
          display:flex; align-items:center; justify-content:center;
          gap:16px; flex-wrap:wrap;
          padding:22px;
        }
        .quiz-count-box svg{ width:72px; height:72px; overflow:visible; flex-shrink:0; }
        .quiz-count-box svg.tenframe-svg,
        .quiz-shape-opt svg.tenframe-svg{
          width:auto; height:auto; max-width:100%;
        }

        /* ---------- "Are there enough?" comparison quiz (E.1) ---------- */
        .quiz-enough-box{
          width:100%; margin:0 auto 20px;
          display:flex; flex-direction:column; gap:16px;
        }
        .quiz-enough-group{
          border-radius:22px;
          background:radial-gradient(circle at 35% 30%, #ffffff, var(--bg-light));
          border:2px dashed var(--line);
          padding:16px 18px;
        }
        .quiz-enough-label{
          font-family:'Nunito', sans-serif; font-weight:800; font-size:13.5px;
          color:var(--text); margin-bottom:10px; text-transform:capitalize;
          letter-spacing:.01em;
        }
        .quiz-enough-icons{
          display:flex; flex-wrap:wrap; gap:10px; align-items:center;
        }
        .quiz-enough-icons svg{ width:44px; height:44px; overflow:visible; flex-shrink:0; }

        .quiz-number-options{
          display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
          margin-bottom:6px;
        }
        .quiz-number-opt{
          font-family:'Nunito',sans-serif; font-weight:800; font-size:28px;
          width:72px; height:72px; border-radius:18px;
          border:3px solid var(--line); background:var(--white); color:var(--text-dark);
          cursor:pointer;
          transition:transform .12s ease, border-color .12s ease, background .12s ease;
        }
        .quiz-number-opt:hover:not(:disabled){ transform:translateY(-2px) scale(1.05); border-color:var(--sky); }
        .quiz-number-opt:disabled{ cursor:default; }
        .quiz-number-opt.is-correct{ background:rgba(34,192,141,0.15); border-color:var(--mint-bright); color:var(--mint); }
        .quiz-number-opt.is-wrong{ background:rgba(245,66,125,0.12); border-color:var(--pink); color:var(--pink); }

        .quiz-feedback{
          text-align:center; min-height:30px;
          font-weight:700; font-size:16.5px; margin-top:16px;
          color:var(--mint);
        }
        .quiz-feedback.wrong{ color:var(--pink); }

        .quiz-next-row{ text-align:center; margin-top:18px; }
        .quiz-btn{
          font-family:'Nunito',sans-serif; font-weight:800; font-size:16px;
          border:none; border-radius:999px; padding:12px 30px;
          background:var(--sky); color:var(--white); cursor:pointer;
          box-shadow:0 4px 0 0 var(--secondary-light);
          transition:transform .12s ease;
        }
        .quiz-btn:hover{ transform:translateY(-1px); }
        .quiz-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 0 var(--secondary-light); }
        .quiz-btn.ghost{
          background:var(--white); color:var(--secondary);
          border:2px solid var(--line); box-shadow:none; margin-left:10px;
        }

        .quiz-result{ text-align:center; }
        .quiz-result .quiz-score-emoji{ font-size:56px; margin-bottom:6px; }
        .quiz-result h3{
          font-size:26px; color:var(--secondary); margin-bottom:8px;
        }
        .quiz-result p{ color:var(--text); font-size:15px; margin-bottom:22px; }

        /* ---------- "Classify and sort by colour" quiz (G.5) ---------- */
        .quiz-classify-tray{
          display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
          margin-bottom:22px;
        }
        .quiz-classify-item{
          width:86px; height:86px;
          border-radius:16px;
          border:3px solid var(--line); background:var(--bg-light);
          display:flex; align-items:center; justify-content:center;
          cursor:pointer;
          transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .15s ease;
        }
        .quiz-classify-item svg{ width:56px; height:56px; overflow:visible; }
        .quiz-classify-item:hover{ transform:translateY(-2px) scale(1.04); }
        .quiz-classify-item.selected{ border-color:var(--sky); box-shadow:0 0 0 4px rgba(46,155,245,0.18); }
        .quiz-classify-item.placed{ opacity:0; pointer-events:none; }
        .quiz-classify-item.shake{ animation:classify-shake .35s ease; border-color:var(--pink); }
        @keyframes classify-shake{
          0%,100%{ transform:translateX(0); }
          25%{ transform:translateX(-6px); }
          75%{ transform:translateX(6px); }
        }
        .quiz-classify-frames{
          display:flex; gap:20px; justify-content:center; flex-wrap:wrap;
        }
        .quiz-classify-frame{
          width:150px; min-height:120px;
          border-radius:18px;
          border:3px dashed var(--fc, var(--line));
          background: color-mix(in srgb, var(--fc, var(--line)) 8%, white);
          padding:10px; text-align:center;
          cursor:pointer;
          transition:background .12s ease, border-color .12s ease;
        }
        .quiz-classify-frame.drag-over{ background: color-mix(in srgb, var(--fc, var(--line)) 22%, white); }
        .quiz-classify-frame-label{
          font-family:'Nunito',sans-serif; font-weight:800; font-size:13px;
          color:var(--fc, var(--text)); margin-bottom:8px;
        }
        .quiz-classify-frame-slots{
          display:flex; gap:6px; flex-wrap:wrap; justify-content:center; min-height:56px;
        }
        .quiz-classify-frame-slots svg{ width:44px; height:44px; overflow:visible; }

        /* ---------- Counting by Groups quiz (G.1–G.6) ---------- */
        .quiz-enough-box.cbg-groups-row{
          flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start;
          align-content:flex-start;
          overflow-y:auto;
          padding:6px;
        }
        .quiz-enough-box.cbg-groups-row .quiz-enough-group{
          /* Fixed size (not min/max) so a group with just 1–2 objects still
             renders as the same size card as a full group — avoids the
             "shrunk / too small" look for low counts. */
          width:180px;
          min-height:190px;
          display:flex;
          flex-direction:column;
          justify-content:center;
          padding:14px 16px;
        }
        .quiz-enough-box.cbg-groups-row .quiz-enough-icons{
          gap:10px;
          max-width:180px;
          justify-content:center;
        }
        .quiz-enough-box.cbg-groups-row .quiz-enough-icons svg{
          width:var(--cbg-icon-size, 84px); height:var(--cbg-icon-size, 84px);
        }
        /* Give each group its own soft card so groups read as clearly
           separate at a glance — translucent rather than solid white so
           the sky/grass scene still shows through underneath it. */
        .quiz-modal .quiz-enough-box.cbg-groups-row .quiz-enough-group{
          background: rgba(255,255,255,0.3);
          border: 2px dashed rgba(255,255,255,0.65);
          backdrop-filter: blur(2px);
        }
        .quiz-enough-box.cbg-groups-row .quiz-enough-label{
          color: var(--popup-scene-ink, var(--secondary));
          text-shadow: 0 1px 2px rgba(255,255,255,0.5);
        }
        .bq-feedback.good{ color:var(--mint); }
        .bq-feedback.wrong{ color:var(--pink); }

        /* Counting by Groups — mobile responsiveness (tablets / large phones) */
        @media (max-width: 560px){
          .quiz-enough-box.cbg-groups-row{ gap:10px; padding:4px; }
          .quiz-enough-box.cbg-groups-row .quiz-enough-group{ width:148px; min-height:150px; padding:10px 12px; }
          .quiz-enough-box.cbg-groups-row .quiz-enough-icons{ gap:8px; max-width:150px; }
          .quiz-enough-box.cbg-groups-row .quiz-enough-label{ font-size:12px; margin-bottom:6px; }
          .quiz-number-opt{ width:60px; height:60px; font-size:22px; }
        }
        /* Counting by Groups — small Android phones */
        @media (max-width: 400px){
          .quiz-enough-box.cbg-groups-row{ gap:8px; }
          .quiz-enough-box.cbg-groups-row .quiz-enough-group{ width:118px; min-height:120px; padding:8px 10px; }
          .quiz-enough-box.cbg-groups-row .quiz-enough-icons{ gap:6px; max-width:120px; }
          .quiz-number-options{ gap:10px; }
          .quiz-number-opt{ width:50px; height:50px; font-size:19px; border-radius:14px; }
        }

        /* ---------- Skip Counting Quiz (H.1–H.11) ----------
           Reuses the same cn-question-wrap / cn-num / cn-blank look as
           Compare Numbers for the equation display, and the same
           quiz-number-options / quiz-number-opt buttons as Counting by
           Groups for the multiple-choice answers — so it matches the
           rest of the page instead of introducing a new visual style. */
        .cn-symbol{
          font-family:'Nunito',sans-serif; font-weight:800; font-size:32px;
          color:var(--text); flex-shrink:0;
        }

        /* Skip Counting — mobile responsiveness (tablets / large phones) */
        @media (max-width: 560px){
          .cn-symbol{ font-size:24px; }
        }
        /* Skip Counting — small Android phones */
        @media (max-width: 400px){
          .cn-symbol{ font-size:19px; }
        }

        /* ---------- Skip Counting on a Number Line (I.1–I.11) ----------
           The SVG itself is fully parameter-driven (see
           buildSkipNumberLineSVG in the script below) and just needs to
           scale with its container — the existing .bq-svg-wrap box (used
           by the Base-10 Blocks quiz) already supplies the dashed frame,
           centering and spacing, so it's reused as-is here. */
        .skip-number-line{
          width:100%; height:auto; display:block;
        }

        /* ==========================================================
           CENTRAL FIXES — apply to every quiz popup card on this page
           (Count with Blocks, Compare Numbers, Counting by Groups, and
           any future one that reuses these same shared classes), so a
           single change here corrects all of them at once.
           ========================================================== */

        /* 1) Drop the redundant "Slot X of Y" eyebrow line + the 1 2 3 4 5
              slot-dot row above it — everywhere it appears. Also drop the
              per-question star tracker: stars are now only shown once, in
              the end-of-slot summary card ("You scored X out of Y"), not
              highlighted one-by-one while answering. */
        .bq-eyebrow,
        .bq-slot-tracker,
        .bq-star-tracker,
        #starTracker{
          display:none;
        }

        /* 2) Popup card content was only as tall as it needed to be,
              leaving the big sky/grass scene background mostly empty.
              Make every quiz card fill the full modal, top-align its
              content (rather than centering it, which left a large empty
              gap above the title whenever content was shorter than the
              modal), and let its main content box grow to fill all the
              remaining space. The generic `.card` component (from
              common.css) ships with its own solid white background — now
              that the card fills the whole modal, that white would hide
              the scene entirely, so strip it back to transparent here too. */
        .quiz-modal .card{
          width:100%;
          height:100%;
          display:flex;
          flex-direction:column;
          justify-content:flex-start;
          background:transparent;
          box-shadow:none;
          padding-top:6px;
        }
        .quiz-modal .card .bq-title{ margin-bottom:6px; }
        .quiz-modal .card .bq-progress{ margin-bottom:8px; }
        .quiz-modal .card .bq-svg-wrap,
        .quiz-modal .card .cn-question-wrap,
        .quiz-modal .card .quiz-enough-box{
          flex:1 1 auto;
          min-height:280px;
        }

        /* 3) Question-display boxes (the area that shows the objects,
              blocks, or numbers being asked about — NOT the answer
              buttons) should sit directly on the sky/grass scene rather
              than floating as their own separate white/light card. This
              overrides quiz-popup-theme.css's shared white-card rule for
              just these "display" classes (same selector specificity,
              defined after that stylesheet so it wins) — answer buttons
              like .quiz-opt / .quiz-number-opt / .quiz-shape-opt keep
              their white background so they still read as tappable.
              NOTE: .quiz-enough-group is deliberately excluded here — for
              Counting by Groups, each group needs its own visible card so
              groups read as separate at a glance; see the translucent
              card style further up under "Counting by Groups quiz". */
        .quiz-modal .quiz-count-box,
        .quiz-modal .quiz-shape-box,
        .quiz-modal .bq-svg-wrap,
        .quiz-modal .cn-question-wrap,
        .quiz-modal .dd-stage{
          background:transparent;
          border:none;
        }

        /* ---------- Digit Detective (Place Value / Face Value story quiz, L.3) ----------
           One 4-digit number + one highlighted digit is reused across a
           whole round of 5 linked "clues". A speech bubble pops up from
           the highlighted digit (repositioned via JS to sit right above
           it, tail included) and its text changes per clue. Answer
           buttons reuse .quiz-number-opt for the numeric clues and a new
           .dd-house-opt for the two "which house" clues. */
        .dd-stage{
          position:relative;
          display:flex;
          justify-content:center;
          align-items:flex-end;
          min-height:150px;
          padding:70px 12px 18px;
          transition:padding-top .15s ease;
        }
        .dd-num-row{
          display:flex;
          align-items:flex-end;
          gap:2px;
          font-family:'Nunito', sans-serif;
          font-weight:800;
          font-size:clamp(30px, 6vw, 46px);
          color:var(--secondary);
          background:var(--bg-light);
          padding:14px 22px;
          border-radius:16px;
          box-shadow:0 2px 0 0 rgba(30,58,95,0.08);
        }
        .dd-digit-cell{ position:relative; padding:0 2px; transition:color .2s ease; }
        .dd-digit-cell.highlight{ color:var(--primary); }
        .dd-digit-cell.highlight::after{
          content:"";
          position:absolute; left:2px; right:2px; bottom:-6px;
          height:4px; border-radius:2px;
          background:var(--primary);
        }
        .dd-comma{ color:var(--text); font-weight:700; align-self:flex-end; padding-bottom:4px; }

        .dd-bubble{
          position:absolute;
          top:0;
          transform:translate(-50%, 0) scale(.5);
          background:var(--white);
          border:3px solid var(--primary);
          border-radius:20px;
          padding:12px 16px;
          width:max-content;
          max-width:230px;
          font-family:'Poppins', sans-serif;
          font-weight:600;
          font-size:13.5px;
          line-height:1.45;
          color:var(--text-dark);
          text-align:center;
          box-shadow:var(--shadow);
          opacity:0;
          z-index:3;
          animation:dd-pop .45s cubic-bezier(.34,1.56,.64,1) forwards;
        }
        .dd-bubble b, .dd-bubble u{ color:var(--primary); }
        .dd-bubble::before{
          content:"";
          position:absolute; bottom:-17px;
          left:calc(50% + var(--tail-shift, 0px));
          transform:translateX(-50%);
          border-width:17px 12px 0 12px;
          border-style:solid;
          border-color:var(--primary) transparent transparent transparent;
        }
        .dd-bubble::after{
          content:"";
          position:absolute; bottom:-12px;
          left:calc(50% + var(--tail-shift, 0px));
          transform:translateX(-50%);
          border-width:13px 9px 0 9px;
          border-style:solid;
          border-color:var(--white) transparent transparent transparent;
        }
        @keyframes dd-pop{
          0%{ opacity:0; transform:translate(-50%, 14px) scale(.55); }
          70%{ opacity:1; transform:translate(-50%, -3px) scale(1.04); }
          100%{ opacity:1; transform:translate(-50%, 0) scale(1); }
        }

        .dd-house-options{
          display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:16px 0 6px;
        }
        .dd-house-opt{
          display:flex; flex-direction:column; align-items:center; gap:6px;
          width:96px; padding:14px 8px 10px;
          background:var(--white);
          border:2px solid var(--line);
          border-radius:16px;
          font-family:'Nunito', sans-serif; font-weight:700; font-size:13px;
          color:var(--text-dark);
          cursor:pointer;
          transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
        }
        .dd-house-opt i{ font-size:26px; color:var(--sun); }
        .dd-house-opt:hover:not(:disabled){ transform:translateY(-2px) scale(1.04); border-color:var(--sky); }
        .dd-house-opt:disabled{ cursor:default; }
        .dd-house-opt.is-correct{ background:rgba(34,192,141,0.15); border-color:var(--mint-bright); color:var(--mint); }
        .dd-house-opt.is-correct i{ color:var(--mint); }
        .dd-house-opt.is-wrong{ background:rgba(245,66,125,0.12); border-color:var(--pink); color:var(--pink); }
        .dd-house-opt.is-wrong i{ color:var(--pink); }

        @media (max-width:640px){
          .dd-stage{ min-height:130px; }
          .dd-bubble{ max-width:200px; font-size:12.5px; padding:10px 12px; }
          .dd-house-opt{ width:78px; padding:10px 6px 8px; font-size:11.5px; }
          .dd-house-opt i{ font-size:21px; }
        }