:root{color-scheme:light;font-family:Nunito,Trebuchet MS,Comic Sans MS,sans-serif;--bg:radial-gradient(circle at 20% 5%,#ecf3ff 0%,#fefefe 46%,#eef8ff 100%);--blue:#1952d5;--deep:#092b57;--card:#ffffff;--line:#ff9f3f;--green:#10b35e;--red:#ef4458}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#13254d}.page{max-width:1250px;margin:0 auto;padding:1.4rem}.glass{background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.88));border:2px solid #ffd39d;box-shadow:0 16px 40px rgba(24,58,122,.12);border-radius:22px}.hero{text-align:center;margin-bottom:1rem}.pill{margin:0;display:inline-block;background:#dce9ff;color:#123781;padding:.35rem .8rem;border-radius:999px;font-size:.85rem;font-weight:800;letter-spacing:.02em}.hero h1{margin:.4rem 0 0;font-size:clamp(2.2rem,5vw,4rem);color:#1a47ba}.subtitle{margin:.25rem 0 0;font-size:1.2rem;font-weight:700}.teacherPanel{display:grid;grid-template-columns:1.2fr 2fr auto;grid-gap:1rem;gap:1rem;padding:1rem 1.2rem;align-items:center}.teacherPanel h2{margin:0;font-size:2rem}.meta{margin:.3rem 0 0}.levelGroup{display:flex;gap:.65rem;flex-wrap:wrap}button{border:0;cursor:pointer;font:inherit;transition:transform .15s ease,box-shadow .18s ease}button:hover{transform:translateY(-2px)}.levelGroup button,.startBtn{padding:.7rem 1.15rem;border-radius:14px;font-size:1.25rem;font-weight:800}.levelGroup button{background:#d7e5ff;color:#0f2f71}.levelGroup button.active{background:#1f56e0;color:#fff;box-shadow:0 8px 20px rgba(31,86,224,.38)}.startBtn{background:linear-gradient(135deg,#0f396f,#071f48);color:white}.scoreboard{margin-top:1rem;display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;font-size:2rem;font-weight:900;padding:.9rem}.ok{color:#0c9549}.bad{color:#dd3046}.hint{text-align:center;font-size:1.35rem;font-weight:700;margin-top:1.2rem}.gameArea{margin-top:1.1rem;padding:1rem}.instruction{text-align:center;font-size:1.2rem;font-weight:700;margin-bottom:1rem}.lowerRow,.upperRow{display:grid;grid-gap:.9rem;gap:.9rem;justify-content:center;margin:0 auto .8rem}.single{grid-template-columns:repeat(2,minmax(190px,230px))}.single .upper{grid-column:1/-1;justify-self:center}.rowFive{grid-template-columns:repeat(5,minmax(120px,170px))}.grid3{grid-template-columns:repeat(3,minmax(140px,180px))}.letterCard{position:relative;background:var(--card);border:4px solid var(--line);border-radius:24px;min-height:135px;display:grid;place-items:center;box-shadow:0 10px 26px rgba(17,43,91,.18)}.letterCard span{font-size:clamp(3.4rem,6vw,5.7rem);line-height:1;font-weight:800;color:#182d5f}.letterCard.selected{border-color:#2b7cff;box-shadow:0 0 0 7px rgba(43,124,255,.26),0 10px 30px rgba(43,124,255,.34)}.letterCard.correct{border-color:var(--green);box-shadow:0 0 0 8px rgba(16,179,94,.24),0 10px 28px rgba(16,179,94,.35)}.letterCard.wrong{border-color:var(--red);box-shadow:0 0 0 8px rgba(239,68,88,.24),0 10px 28px rgba(239,68,88,.3)}.badge{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:999px;background:var(--green);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:1.1rem}.badge.wrong{background:var(--red)}.feedback{text-align:center;font-size:1.3rem;font-weight:800;margin-top:.45rem}.attemptPanel,.completeCard{margin-top:1rem;padding:1rem}.completeCard{text-align:center;max-width:420px;margin-left:auto;margin-right:auto}.completeCard button{padding:.6rem 1rem;border-radius:12px;background:#163f9c;color:#fff}.attemptPanel h3{margin-top:0}.attemptPanel ul{margin:0;padding-left:1.2rem}.attemptPanel li{margin-bottom:.35rem;font-weight:700}.muted{color:#567;margin:0}@media (max-width:980px){.teacherPanel{grid-template-columns:1fr}.rowFive{grid-template-columns:repeat(3,minmax(100px,150px))}}@media (max-width:720px){.scoreboard{font-size:1.3rem}.grid3,.rowFive,.single{grid-template-columns:repeat(2,minmax(100px,150px))}.single .upper{grid-column:1/-1}.letterCard{min-height:110px}}