:root{--bg:#f4f7f9;--surface:#fff;--surface-2:#edf5f7;--text:#14212b;--muted:#61717c;--line:#d5e0e5;--primary:#0f766e;--primary-2:#155e75;--accent:#f59e0b;--danger:#dc2626;--shadow:0 10px 32px #0f172a14}[data-theme="dark"]{--bg:#101719;--surface:#182225;--surface-2:#213136;--text:#edf7f7;--muted:#b5c4c7;--line:#365056;--primary:#2dd4bf;--primary-2:#0f766e;--accent:#fbbf24;--shadow:0 10px 32px #0008}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'Noto Sans JP','Noto Sans Thai',sans-serif;min-height:100vh}.app-header{height:64px;padding:0 clamp(16px,4vw,56px);display:flex;align-items:center;justify-content:space-between;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.app-header>div{display:flex;align-items:center;gap:12px;font-size:1.05rem}.brand{font-weight:800;color:var(--primary-2);text-decoration:none}.icon-btn,.language-btn{border:0;background:var(--surface-2);color:var(--text);border-radius:9px;min-width:36px;height:36px;font:700 .82rem inherit;cursor:pointer}.icon-btn{border-radius:50%;font-size:1.1rem}.language-btn{padding:0 10px}main{max-width:1540px;margin:auto;padding:clamp(20px,3vw,48px) clamp(14px,3vw,42px)}h1{font-size:clamp(1.65rem,4vw,2.5rem);margin:.1em 0 .25em}h2{font-size:clamp(1.15rem,2.5vw,1.5rem)}.lead{color:var(--muted);margin:0 0 30px}.panel{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;padding:clamp(16px,3vw,28px);margin-bottom:20px}.stepper{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.step{border-radius:999px;padding:7px 13px;background:var(--surface-2);color:var(--muted);font-size:.84rem;font-weight:700}.step.active{background:var(--primary);color:#fff}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field label{font-size:.9rem;font-weight:700;display:block;margin-bottom:7px}select,input{width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:11px 12px}.tool-row,.game-tabs,.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.tool-row{margin:16px 0}.btn{border:0;border-radius:9px;background:var(--primary);color:#fff;font-family:inherit;font-size:.92rem;font-weight:700;padding:10px 14px;cursor:pointer}.btn:hover{filter:brightness(1.08)}.btn.secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}.btn.danger{background:var(--danger)}.btn.large{font-size:1rem;padding:13px 22px}.word-count{margin-left:auto;color:var(--muted);font-size:.9rem}.word-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px;max-height:48vh;overflow:auto;padding:3px}.word-option{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--surface);cursor:pointer}.word-option:hover{border-color:var(--primary)}.word-option input{width:18px;height:18px;margin-top:2px;accent-color:var(--primary)}.word-option b{display:block}.word-option small{display:block;color:var(--muted);margin-top:2px}.tag{display:inline-block;font-size:.7rem;border-radius:999px;background:var(--surface-2);padding:2px 7px;color:var(--muted);margin-left:5px}.set-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}.set-row select{width:auto;min-width:170px}.hidden{display:none!important}.game-tabs{margin:10px 0 22px}.game-tab{padding:12px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-family:inherit;font-size:1rem;font-weight:700;color:var(--text);cursor:pointer}.game-tab.active{color:#fff;background:var(--primary);border-color:var(--primary)}.game-settings{display:flex;gap:16px;align-items:end;flex-wrap:wrap}.game-settings .field{min-width:160px}.game-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}.progress{height:9px;background:var(--surface-2);border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;background:var(--accent);transition:width .25s}

/* Classroom quiz layout: at desktop width, prompt and choices use the full projector canvas. */
.quiz-panel{padding:clamp(16px,2.6vw,34px)}.quiz-stage{display:grid;gap:clamp(14px,2vw,26px)}.game-media{display:grid;min-width:0;min-height:0;overflow:hidden}.quiz-prompt{min-height:170px;display:grid;place-items:center;text-align:center;font-size:clamp(2.2rem,6vw,5.8rem);font-weight:800;background:var(--surface-2);border-radius:16px;padding:clamp(16px,2vw,28px)}.quiz-prompt .game-media{width:100%;height:min(45vh,440px)}.answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.7vw,20px)}.answer{display:grid;place-items:center;min-width:0;overflow:hidden;background:var(--surface);border:2px solid var(--line);border-radius:16px;min-height:126px;color:var(--text);font-family:inherit;font-size:clamp(1.35rem,2.6vw,2.25rem);font-weight:700;line-height:1.35;padding:clamp(12px,1.5vw,20px);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.answer:hover:not(:disabled){border-color:var(--primary);transform:translateY(-3px);box-shadow:0 10px 22px #0f172a1c}.answer:focus-visible{outline:4px solid var(--accent);outline-offset:3px}.answer.correct{border-color:#16a34a;background:#dcfce7;color:#14532d}.answer.wrong{border-color:#dc2626;background:#fee2e2;color:#7f1d1d}.answer .game-media{width:100%;height:clamp(150px,24vh,250px)}.feedback{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:800;text-align:center;min-height:32px;margin:18px}.quiz-actions{justify-content:center}.result{font-size:1.15rem;text-align:center;padding:24px}

.flash-wrap{max-width:760px;margin:auto;text-align:center}.flash-card{height:min(62vh,530px);min-height:300px;perspective:1200px;cursor:pointer;margin:20px 0}.flash-inner{height:100%;position:relative;transition:transform .55s;transform-style:preserve-3d}.flash-card.flipped .flash-inner{transform:rotateY(180deg)}.flash-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:28px;display:grid;place-items:center;overflow:auto}.flash-face.back{transform:rotateY(180deg);background:var(--surface-2)}.flash-value{font-size:clamp(2rem,8vw,5.6rem);font-weight:800;word-break:break-word;width:100%;height:100%;display:grid;place-items:center}.flash-value .game-media{width:100%;height:100%}.flash-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.vanish-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px}.vanish-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}.vanish-word{height:130px;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:12px;display:grid;place-items:center;text-align:center;font-size:clamp(1.1rem,3vw,1.6rem);font-weight:700;transition:opacity .25s,transform .25s}.vanish-word.gone{opacity:0;transform:scale(.85);pointer-events:none}.vanish-word .game-media{width:100%;height:100%}.notice{padding:12px;border-left:4px solid var(--accent);background:#fffbeb;color:#78350f;border-radius:6px;font-size:.88rem;line-height:1.7}.status{color:var(--muted);font-size:.9rem}.fullscreen:fullscreen{background:var(--bg);padding:30px}.modal{position:fixed;inset:0;background:#0008;display:grid;place-items:center;padding:16px;z-index:30}.modal-card{width:min(520px,100%);background:var(--surface);border-radius:16px;padding:24px;box-shadow:var(--shadow)}

@media(min-width:1080px){.quiz-panel{margin-top:18px}.quiz-stage{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:stretch;height:clamp(520px,64vh,690px)}.quiz-prompt{min-height:0;height:100%}.quiz-prompt .game-media{height:100%;max-height:none}.answer-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));min-height:0;height:100%}.answer{min-height:0}.answer .game-media{height:100%}.quiz-panel:has(.answer .game-media) .answer{padding:14px}}
@media(max-width:620px){.form-grid,.answer-grid{grid-template-columns:1fr}.word-count{margin-left:0;width:100%}.game-head{align-items:flex-start;flex-direction:column}.quiz-prompt{min-height:120px}.quiz-prompt .game-media{height:min(42vh,300px)}.answer{min-height:92px;font-size:clamp(1.15rem,6vw,1.55rem)}.answer .game-media{height:160px}.flash-card{height:55vh;min-height:280px}.vanish-board{grid-template-columns:repeat(2,minmax(0,1fr))}}