body{min-height:100vh;background:radial-gradient(circle at 80% 0,rgba(91,77,245,.13),transparent 35%),var(--bg);color:var(--text);font-size:18px;line-height:1.55}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:50;background:var(--text);color:var(--bg);padding:.7rem 1rem;border-radius:.5rem}.skip-link:focus{top:1rem}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 max(1.2rem,calc((100vw - var(--max))/2));background:color-mix(in srgb,var(--surface) 90%,transparent);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}button{cursor:pointer;color:inherit}.brand{display:flex;align-items:center;gap:.7rem;background:none;text-align:left}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,var(--primary),#856ff8);color:white;font-size:1.5rem;font-weight:900;box-shadow:0 8px 18px rgba(91,77,245,.3)}.brand strong,.brand small{display:block;line-height:1.1}.brand small{color:var(--muted);font-size:.75rem;margin-top:.2rem}.top-actions{display:flex;align-items:center;gap:.5rem}.icon-button,.parent-button,.button{min-height:48px;border-radius:13px;padding:.65rem 1rem;background:var(--surface-2);font-weight:750;transition:transform .15s,background .15s}.icon-button span{margin-left:.35rem}.parent-button,.button.primary{background:var(--primary);color:white}.button.secondary{background:var(--surface-2);border:1px solid var(--border)}.button.danger{color:var(--danger);border:1px solid currentColor;background:transparent}.button:hover,.icon-button:hover,.parent-button:hover{transform:translateY(-2px)}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:4px solid color-mix(in srgb,var(--focus) 60%,transparent);outline-offset:3px}#app{width:min(var(--max),calc(100% - 2.4rem));margin:0 auto;padding:2.2rem 0 5rem}.page-head{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:1.8rem}.eyebrow{color:var(--primary);font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.page-head h1,.hero h1{font-size:clamp(2.1rem,5vw,4rem);line-height:1.03;letter-spacing:-.045em}.lead{color:var(--muted);max-width:720px;font-size:1.08rem;margin-top:.8rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem}.hero{min-height:430px;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:2rem;padding:clamp(1.5rem,5vw,4rem);overflow:hidden}.hero-visual{min-height:260px;border-radius:28px;background:linear-gradient(155deg,var(--primary),#8c7dff 55%,#67d7c7);display:grid;place-items:center;position:relative;color:white}.hero-visual::before,.hero-visual::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.18)}.hero-visual::before{width:150px;height:150px;top:-25px;right:-20px}.hero-visual::after{width:90px;height:90px;bottom:20px;left:-25px}.hero-letter{font-size:7rem;font-weight:900;line-height:1}.hero-actions,.button-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}.button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem}.grid{display:grid;gap:1.2rem}.stats-grid{grid-template-columns:repeat(4,1fr);margin:1.3rem 0}.stat{padding:1.2rem}.stat span{display:block;color:var(--muted);font-size:.85rem}.stat strong{font-size:1.8rem}.dashboard-grid{grid-template-columns:1.4fr .6fr}.lesson-card{background:linear-gradient(135deg,var(--surface),var(--surface-2));position:relative;overflow:hidden}.lesson-card h2{font-size:1.8rem}.lesson-card .meta{color:var(--muted);margin:.5rem 0}.progress{height:12px;background:var(--surface-2);border-radius:99px;overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:inherit}.tag-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin-top:.9rem}.tag{padding:.35rem .65rem;border-radius:99px;background:var(--surface-2);font-size:.82rem;font-weight:750}.profile-form{display:grid;gap:1rem}.field label{display:block;font-weight:800;margin-bottom:.35rem}.field input{width:100%;min-height:50px;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:12px;padding:.65rem .8rem}.welcome{max-width:820px;margin:4vh auto}.welcome .card{padding:clamp(1.5rem,6vw,4rem)}.quiz-shell,.lesson-shell{max-width:980px;margin:auto}.quiz-head,.lesson-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}.quiz-head .progress,.lesson-head .progress{flex:1}.question-card{padding:clamp(1.3rem,4vw,2.4rem)}.question-card h2{font-size:clamp(1.5rem,3vw,2.25rem);margin:.4rem 0 1.2rem}.question-context{background:var(--surface-2);border-left:5px solid var(--secondary);border-radius:12px;padding:1rem;margin-bottom:1rem}.options{display:grid;gap:.7rem;list-style:none}.option{width:100%;min-height:58px;text-align:left;padding:.8rem 1rem;background:var(--surface-2);border:2px solid transparent;border-radius:14px;font-weight:700}.option:hover{border-color:var(--primary)}.option.selected{background:color-mix(in srgb,var(--primary) 15%,var(--surface));border-color:var(--primary)}.feedback{margin-top:1rem;padding:1rem;border-radius:14px;font-weight:650}.feedback.correct{background:color-mix(in srgb,var(--success) 15%,var(--surface));border:1px solid var(--success)}.feedback.incorrect{background:color-mix(in srgb,var(--danger) 12%,var(--surface));border:1px solid var(--danger)}.results-score{display:flex;align-items:center;gap:1.2rem}.score-ring{width:130px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--primary) calc(var(--score)*1%),var(--surface-2) 0);position:relative}.score-ring::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--surface)}.score-ring strong{position:relative;z-index:1;font-size:2rem}.analysis-grid{grid-template-columns:repeat(2,1fr);margin-top:1.2rem}.analysis-row{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;padding:.8rem 0;border-bottom:1px solid var(--border)}.analysis-row .progress{grid-column:1/-1}.screen-count{white-space:nowrap;color:var(--muted);font-weight:800}.lesson-stage{min-height:520px}.lesson-stage h1{font-size:clamp(2rem,4vw,3.1rem);line-height:1.12;margin:.35rem 0 1rem}.lesson-stage h2{font-size:1.5rem;margin-bottom:.8rem}.lesson-content{max-width:780px}.example-sentence{font-size:clamp(1.5rem,4vw,2.6rem);font-weight:900;padding:1.2rem;background:var(--surface-2);border-radius:16px;margin:1rem 0}.accent{color:var(--primary)}.rule-table{width:100%;border-collapse:separate;border-spacing:0 .6rem}.rule-table td{padding:.9rem;background:var(--surface-2)}.rule-table td:first-child{border-radius:12px 0 0 12px;font-weight:800}.rule-table td:last-child{border-radius:0 12px 12px 0}.fill-input{min-height:55px;width:min(100%,420px);padding:.7rem;border:2px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text)}.token-bank,.answer-bank,.match-grid{display:flex;flex-wrap:wrap;gap:.65rem;margin:1rem 0}.token{min-height:48px;padding:.55rem .85rem;border-radius:11px;background:var(--surface-2);border:2px solid var(--border);font-weight:750}.token.used{opacity:.35}.answer-bank{min-height:70px;padding:.6rem;border:2px dashed var(--border);border-radius:14px}.match-grid{display:grid;grid-template-columns:1fr 1fr}.match-item.selected{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--surface))}.reading-text{font-size:1.12rem;background:var(--surface-2);padding:1.2rem;border-radius:15px;margin-bottom:1rem}.game-board{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.game-door{min-height:135px;background:linear-gradient(150deg,var(--primary),var(--primary-dark));color:white;border-radius:18px;font-size:1.4rem;font-weight:900}.stars{color:#d78300;letter-spacing:.15em;font-size:2rem}.parent-sections{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}.parent-sections h2{margin-bottom:.7rem}.clean-list{padding-left:1.2rem}.clean-list li+li{margin-top:.5rem}.toast{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,150%);background:var(--text);color:var(--bg);padding:.75rem 1rem;border-radius:12px;z-index:40;transition:transform .2s}.toast.show{transform:translate(-50%,0)}.empty-note{color:var(--muted);font-style:italic}
.games-button{min-height:48px;min-width:88px;border-radius:13px;padding:.65rem 1rem;background:color-mix(in srgb,var(--secondary) 16%,var(--surface-2));border:1px solid color-mix(in srgb,var(--secondary) 45%,var(--border));font-weight:850;transition:transform .15s,background .15s}.games-button:hover{transform:translateY(-2px)}.game-center-card{margin:1rem 0 1.3rem;background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 86%,#2f8f46),var(--surface));border-color:color-mix(in srgb,var(--success) 35%,var(--border))}.game-center-card h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:.15rem 0}.game-center-card .button.primary{font-size:1.05rem;min-height:56px;padding-inline:1.2rem}.game-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}.games-hub-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}.welcome .quick-game-link{margin-top:1rem;min-height:48px}@media(max-width:850px){.games-button{min-width:80px;padding-inline:.75rem}.game-center-card .button-row .button{flex:1 1 220px}}@media(max-width:520px){.games-button{font-size:.78rem;min-width:72px;padding:.55rem .55rem}.top-actions{flex-wrap:wrap;justify-content:flex-end}.game-center-card{margin:.8rem 0 1rem}.game-center-card .button-row .button{flex-basis:100%;min-height:52px}}
.games-button.active,.games-button[aria-current="page"]{background:var(--primary);color:white;border-color:var(--primary);box-shadow:0 8px 18px rgba(91,77,245,.25)}.game-card-layout{display:grid;grid-template-columns:minmax(180px,320px) 1fr;gap:1.1rem;align-items:center}.game-card-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;border:1px solid var(--border);background:var(--surface-2)}.game-soon-card{opacity:.82}.game-soon-card .tag{display:inline-flex;margin-top:.8rem}@media(max-width:720px){.game-card-layout{grid-template-columns:1fr}.game-card-image{max-height:220px;object-fit:cover}}
.student-dashboard{display:grid;gap:1.2rem}.home-hero{min-height:300px;margin-bottom:.2rem}.home-hero .hero-visual{min-height:190px}.poma-hero-art{background:linear-gradient(155deg,var(--primary),#8c7dff 52%,var(--secondary));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);overflow:hidden}.poma-hero-art img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 14px 18px rgba(18,25,55,.25))}.poma-world-strip{margin:0;border-radius:24px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);background:var(--surface)}.poma-world-strip img{display:block;width:100%;max-height:170px;object-fit:cover}.dashboard-priority-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:1.2rem;align-items:stretch}.today-lesson-card,.vocabulary-home-card{display:flex;flex-direction:column}.today-lesson-card .button-row,.vocabulary-home-card .button-row{margin-top:auto}.mini-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin:1rem 0}.mini-stat-grid span{display:grid;gap:.1rem;padding:.7rem;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);color:var(--muted);font-size:.88rem}.mini-stat-grid strong{color:var(--text);font-size:1.05rem}.section-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.poma-lineup{display:block;width:min(100%,680px);max-height:150px;object-fit:contain;margin:.6rem auto 0}.home-games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}.home-game-card{margin:0;background:var(--surface);border-color:var(--border);box-shadow:none}.home-game-card h2{font-size:clamp(1.25rem,2vw,1.55rem)}.home-game-card .lead{font-size:.96rem;margin-top:.35rem}.home-game-card .button.secondary{min-height:48px}.home-game-card .game-card-layout{grid-template-columns:120px 1fr;gap:.85rem}.home-game-card .game-card-image{border-radius:14px}.progress-summary{margin-top:.2rem}@media(max-width:920px){.dashboard-priority-grid,.home-games-grid{grid-template-columns:1fr}.section-title-row{flex-direction:column}.home-game-card .game-card-layout{grid-template-columns:minmax(120px,180px) 1fr}}@media(max-width:560px){.home-hero{min-height:0}.home-hero .hero-visual{min-height:150px}.poma-world-strip img{max-height:120px}.mini-stat-grid{grid-template-columns:1fr}.home-game-card .game-card-layout{grid-template-columns:1fr}.home-game-card .game-card-image{max-height:170px}.section-title-row .button{width:100%}}