:root{
  --bg:#f3f6fb;
  --panel:#ffffff;
  --ink:#172033;
  --muted:#607089;
  --line:#d9e2ef;
  --navy:#15243a;
  --blue:#2f68d8;
  --blue-soft:#eaf1ff;
  --gold:#efb83f;
  --green:#2b8a63;
  --red:#c94e5a;
  --shadow:0 18px 55px rgba(31,54,88,.12);
  --radius:24px;
  --font-scale:1;
}
*{box-sizing:border-box}
html{font-size:calc(16px * var(--font-scale));scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#eef3fb 0,#f8fafc 45%,#eef4fb 100%);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
button,input,select{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:4px solid rgba(47,104,216,.25);outline-offset:3px}
.skip-link{position:fixed;left:12px;top:-80px;z-index:1000;background:#fff;color:#111;padding:12px 16px;border-radius:12px;border:2px solid #111}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-header{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px clamp(16px,4vw,48px);background:rgba(21,36,58,.96);color:#fff;backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(15,31,52,.16)}
.brand-block{display:flex;align-items:center;gap:14px}.brand-mark{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,var(--gold),#ffd878);color:var(--navy);font-weight:900;font-size:1.45rem;box-shadow:inset 0 0 0 3px rgba(255,255,255,.28)}
.eyebrow{margin:0 0 4px;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:800;color:var(--blue)}
.app-header .eyebrow{color:#a8c4ff}.app-header h1{margin:0;font-size:clamp(1.2rem,2vw,1.65rem)}.subtitle{margin:3px 0 0;color:#c9d5e8;font-size:.9rem}
.header-actions{display:flex;gap:10px}.icon-btn{width:44px;height:44px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.08);color:inherit;font-size:1.25rem}.icon-btn:hover{background:rgba(255,255,255,.16)}
.status-strip{display:grid;grid-template-columns:repeat(3,minmax(90px,auto)) minmax(180px,1fr);align-items:center;gap:18px;padding:12px clamp(16px,4vw,48px);background:#fff;border-bottom:1px solid var(--line)}
.status-strip>div:not(.progress-shell){display:flex;gap:8px;align-items:baseline}.status-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.progress-shell{height:10px;background:#e9eef6;border-radius:99px;overflow:hidden}.progress-shell span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),#72a1ff);transition:width .35s ease}
main{width:min(1500px,100%);margin:0 auto;padding:clamp(18px,4vw,48px)}.view{display:none}.view.active{display:block}
.hero-card{display:flex;justify-content:space-between;align-items:center;gap:24px;background:linear-gradient(135deg,#fff,#f6f9ff);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,4vw,42px);box-shadow:var(--shadow)}
.hero-card h2{font-size:clamp(1.8rem,4vw,3.1rem);line-height:1.02;margin:0 0 14px}.hero-card p:not(.eyebrow){max-width:760px;line-height:1.65;color:var(--muted);margin:0}
.route-switch{display:inline-flex;gap:5px;padding:5px;border-radius:16px;background:#e9eef6;flex-shrink:0}.route-btn{border:0;border-radius:12px;padding:11px 15px;background:transparent;color:#506178;font-weight:800}.route-btn.active{background:#fff;color:var(--blue);box-shadow:0 5px 16px rgba(34,58,91,.13)}.route-switch.compact .route-btn{padding:8px 12px;font-size:.86rem}
.catalogue-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:26px 0 18px}.search-box{display:flex;align-items:center;gap:10px;min-width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 15px;box-shadow:0 8px 24px rgba(40,64,96,.07)}.search-box input{width:100%;padding:14px 0;border:0;background:transparent;outline:none}.filter-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.filter-btn{border:1px solid var(--line);background:#fff;color:#4d5c73;border-radius:999px;padding:9px 13px;font-weight:700}.filter-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}.game-card{position:relative;overflow:hidden;min-height:250px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 9px 28px rgba(39,63,98,.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.game-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(39,63,98,.14);border-color:#b8c8e2}.game-card.completed{border-color:#8dccb4}.game-card.completed::after{content:"✓";position:absolute;right:16px;top:15px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e3f6ee;color:var(--green);font-weight:900}.card-icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-size:1.45rem;font-weight:900;margin-bottom:18px}.game-card h3{margin:0 0 8px;font-size:1.16rem}.game-card p{margin:0;color:var(--muted);line-height:1.48}.card-meta{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding-top:20px;color:#6c7d95;font-size:.78rem;font-weight:800}.card-open{position:absolute;inset:0;border:0;background:transparent;color:transparent}
.game-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.text-btn{border:0;background:transparent;color:var(--blue);font-weight:800;padding:10px 0}.game-shell{background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(18px,4vw,38px);box-shadow:var(--shadow)}.game-heading{display:flex;gap:18px;align-items:center}.game-icon{width:72px;height:72px;border-radius:22px;background:linear-gradient(145deg,#eaf1ff,#dce8ff);display:grid;place-items:center;color:var(--blue);font-size:1.55rem;font-weight:900}.game-heading h2{margin:0 0 6px;font-size:clamp(1.7rem,3vw,2.55rem)}.game-heading p:not(.eyebrow){margin:0;color:var(--muted)}
.guidance-card{margin:26px 0;background:#f7f9fd;border:1px solid #e0e8f3;border-radius:20px;padding:18px}.guidance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.guidance-grid>div{padding:4px 12px;border-left:4px solid #cfdcf1}.guidance-label{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);font-weight:900}.guidance-grid p{margin:6px 0 0;line-height:1.5;color:#40516a}.guidance-card details{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.guidance-card summary{font-weight:800;color:#465774;cursor:pointer}.guidance-card details p{color:var(--muted);line-height:1.6}
.activity-stage{min-height:360px;border:2px dashed #d7e1ef;border-radius:24px;padding:clamp(18px,4vw,36px);background:linear-gradient(180deg,#fbfdff,#f5f8fc)}.stage-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}.stage-title{margin:0;font-size:1.2rem}.stage-chip{display:inline-flex;align-items:center;border-radius:999px;padding:7px 11px;background:#eaf1ff;color:var(--blue);font-weight:800;font-size:.8rem}.prompt-card{border-radius:22px;background:#fff;border:1px solid var(--line);padding:clamp(20px,4vw,36px);text-align:center;box-shadow:0 12px 34px rgba(41,67,103,.08)}.big-prompt{font-size:clamp(2rem,7vw,5rem);line-height:1.08;font-weight:900;letter-spacing:-.03em}.medium-prompt{font-size:clamp(1.35rem,3.5vw,2.35rem);line-height:1.4;font-weight:800}.support-hint{margin:15px auto 0;max-width:720px;padding:12px 15px;border-radius:14px;background:#fff6d9;color:#70520c;font-weight:700}.button-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px}.primary-btn,.secondary-btn,.danger-btn,.choice-btn,.tile-btn{border-radius:14px;padding:12px 16px;font-weight:850}.primary-btn{border:1px solid var(--blue);background:var(--blue);color:#fff}.primary-btn:hover{background:#2459bd}.secondary-btn{border:1px solid var(--line);background:#fff;color:#31445f}.secondary-btn:hover{border-color:#aabbd4;background:#f8fbff}.danger-btn{border:1px solid #efc4c9;background:#fff3f4;color:#a63743}.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:22px}.choice-btn{border:2px solid #dbe4f0;background:#fff;color:#273a55;min-height:58px}.choice-btn:hover{border-color:#aebfda}.choice-btn.correct{border-color:#67bd99;background:#e8f8f1;color:#176447}.choice-btn.wrong{border-color:#e79aa2;background:#fff0f1;color:#9f3340}.choice-btn:disabled{cursor:default}.feedback{min-height:30px;margin-top:18px;text-align:center;font-weight:850}.feedback.good{color:var(--green)}.feedback.bad{color:var(--red)}
.tile-bank,.answer-rail,.sort-zone{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:66px;padding:14px;border-radius:18px;background:#edf2f8;border:1px solid #dae3ef}.answer-rail{background:#fff;margin-top:14px;border-style:dashed}.tile-btn{border:1px solid #c7d5e8;background:#fff;color:#273a55;box-shadow:0 4px 9px rgba(34,58,91,.08)}.tile-btn.selected{opacity:.4}.answer-tile{display:inline-flex;align-items:center;gap:6px;padding:10px 13px;border-radius:12px;background:#eaf1ff;color:#244f9e;font-weight:850}.answer-tile button{border:0;background:transparent;color:inherit}
.input-row{display:flex;gap:10px;justify-content:center;max-width:720px;margin:22px auto 0}.input-row input{flex:1;min-width:0;border:2px solid #cedaea;border-radius:14px;padding:14px 16px;background:#fff}.memory-list{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:24px 0}.memory-word{padding:16px 20px;border-radius:16px;background:#fff;border:1px solid var(--line);font-weight:900;font-size:1.25rem}.hidden-word{filter:blur(10px);user-select:none}.chunk-line{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;font-size:clamp(1.3rem,3vw,2rem);line-height:1.6}.karaoke-word{padding:2px 5px;border-radius:7px}.karaoke-word.on{background:#ffe59a;color:#16223a}.meter{height:12px;border-radius:999px;background:#e4ebf4;overflow:hidden}.meter span{display:block;height:100%;width:0;background:var(--blue);transition:width .2s linear}.countdown{font-size:4rem;font-weight:900;text-align:center;color:var(--blue)}.sort-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:20px}.sort-column{border:2px dashed #cfdbea;border-radius:18px;padding:14px;min-height:150px;background:#fff}.sort-column h4{text-align:center;margin:0 0 12px}.token-pool{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.accent-syllables{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:22px 0}.syllable-btn{border:2px solid #d4deec;border-radius:16px;background:#fff;padding:15px 18px;font-size:1.35rem;font-weight:900}.syllable-btn.correct{background:#e8f8f1;border-color:#67bd99}.syllable-btn.wrong{background:#fff0f1;border-color:#e79aa2}.rule-card{padding:12px 16px;border-radius:15px;background:#15243a;color:#fff;text-align:center;font-weight:900}.mic-note{font-size:.9rem;color:var(--muted);text-align:center;margin-top:14px}.self-rating{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}.self-rating button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px 15px}.game-footer{display:flex;gap:12px;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.settings-dialog{width:min(720px,calc(100% - 28px));border:0;border-radius:26px;padding:0;box-shadow:0 30px 100px rgba(15,29,49,.3)}.settings-dialog::backdrop{background:rgba(10,20,35,.55);backdrop-filter:blur(4px)}.settings-dialog form{padding:26px}.dialog-header{display:flex;justify-content:space-between;align-items:flex-start}.dialog-header h2{margin:0;font-size:2rem}.dialog-header .icon-btn{color:var(--ink);border-color:var(--line);background:#f4f7fb}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}.settings-grid label{display:flex;flex-direction:column;gap:9px;font-weight:800}.settings-grid select,.settings-grid input[type=range]{width:100%}.settings-grid select{border:1px solid var(--line);border-radius:13px;padding:11px;background:#fff}.toggle-list{display:grid;gap:11px;padding:17px;border-radius:18px;background:#f5f8fc}.toggle-list label{font-weight:750}.dialog-actions{display:flex;justify-content:space-between;gap:12px;margin-top:22px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;z-index:80;background:#13233a;color:#fff;padding:13px 18px;border-radius:14px;box-shadow:0 12px 35px rgba(14,28,47,.28);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
body.font-large{--font-scale:1.12}body.font-xlarge{--font-scale:1.25}body.contrast-high{--bg:#fff;--panel:#fff;--ink:#000;--muted:#202020;--line:#111;--navy:#000;--blue:#003bc4;--blue-soft:#e5ebff}body.contrast-high .activity-stage,body.contrast-high .guidance-card{border-color:#111}body.contrast-soft{background:#fff7e9}body.contrast-soft .app-header{background:#3a2d20}body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
body.route-supported .activity-stage{border-style:solid;border-color:#d7b659;background:linear-gradient(180deg,#fffdf6,#fff9e7)}body.route-supported .guidance-card{background:#fffaf0;border-color:#ead9a6}
@media(max-width:900px){.status-strip{grid-template-columns:repeat(3,1fr)}.progress-shell{grid-column:1/-1}.hero-card{align-items:flex-start;flex-direction:column}.catalogue-tools{align-items:stretch;flex-direction:column}.search-box{min-width:0}.filter-row{justify-content:flex-start}.guidance-grid{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}}
@media(max-width:640px){.app-header{padding:13px 14px}.brand-mark{width:43px;height:43px}.app-header .subtitle{display:none}.status-strip{gap:8px;padding:10px 14px}.status-strip>div:not(.progress-shell){display:block}.status-label{display:block;font-size:.67rem}.hero-card{padding:22px}.game-grid{grid-template-columns:1fr}.game-topbar{align-items:flex-start;flex-direction:column}.game-heading{align-items:flex-start}.game-icon{width:60px;height:60px}.game-shell{padding:17px}.activity-stage{padding:15px;min-height:330px}.game-footer>*{flex:1 1 100%}.input-row{flex-direction:column}.dialog-actions{flex-direction:column-reverse}.dialog-actions button{width:100%}.settings-dialog form{padding:20px}.route-switch{width:100%}.route-btn{flex:1}.big-prompt{font-size:clamp(2rem,14vw,4.5rem)}}
@media print{.app-header,.status-strip,.catalogue-tools,.game-topbar,.game-footer,.settings-dialog,.toast{display:none!important}body{background:#fff}.view{display:block!important}.game-grid{grid-template-columns:repeat(3,1fr)}.game-card,.game-shell{box-shadow:none}}
.teacher-bank{margin-top:18px;border:1px solid var(--line);border-radius:18px;padding:15px;background:#fff}.teacher-bank summary{cursor:pointer;font-weight:850;color:#344965}.teacher-bank p{color:var(--muted);line-height:1.5}.teacher-bank label{display:block;margin-top:13px;font-weight:800}.teacher-bank textarea{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:13px;padding:12px;resize:vertical;background:#fbfdff;color:var(--ink)}.button-row.left{justify-content:flex-start}