:root{--bg:#fff8ec;--ink:#1f2a44;--muted:#5b6784;--card:#fff;--blue:#2f7cf6;--green:#22b573;--red:#ef5b5b;--yellow:#ffcc33;--line:#e7dcc6;--r:22px;font-family:"Nunito","Segoe UI",system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink)}
.wrap{width:min(860px,94vw);margin:0 auto;padding:14px 0 60px}
h1{font-size:clamp(1.5rem,5vw,2.2rem);margin:.3em 0}
.lead{color:var(--muted);font-size:1.15rem}
.note{background:#fff1c2;border-radius:14px;padding:12px 16px;font-size:1.1rem}
.top{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.back{font-size:1.1rem;color:var(--blue);text-decoration:none;font-weight:700;padding:8px 0}
.brand{font-weight:800;color:#f08a24}
.link{display:inline-block;margin-top:22px;color:var(--blue);font-weight:700;font-size:1.1rem}
button{font:inherit;color:inherit;cursor:pointer}
.bigbtn{display:block;width:100%;text-align:center;border:0;border-radius:var(--r);padding:20px;font-size:1.5rem;font-weight:800;background:var(--blue);color:#fff;text-decoration:none;box-shadow:0 6px 0 #1d5bc0;margin:14px 0}
.bigbtn:active{transform:translateY(3px);box-shadow:0 3px 0 #1d5bc0}
.bigbtn:disabled{opacity:.45}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.book{margin:0;background:var(--green);box-shadow:0 6px 0 #178a57}
.list{display:flex;flex-direction:column;gap:10px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:3px solid var(--line);border-radius:18px;padding:16px 18px;font-size:1.2rem;font-weight:700;color:var(--ink);text-decoration:none}
.row.done{border-color:var(--green)}
.row.locked{opacity:.4}
.rs{color:var(--green);white-space:nowrap}
.qtop{display:flex;align-items:center;gap:10px;margin:6px 0 10px}
.count{font-weight:800;font-size:1.2rem;white-space:nowrap}
.talk{font-size:1.4rem}
.bar{flex:1;height:14px;background:#f0e4cc;border-radius:99px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--yellow)}
.card{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:0 4px 18px rgba(80,60,20,.08)}
.say{font-size:1.2rem;font-weight:700;margin:0 0 10px;text-align:center}
.hearwrap{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:10px}
.hear{width:92px;height:92px;border-radius:50%;border:0;background:var(--yellow);font-size:2.6rem;box-shadow:0 5px 0 #d9a400}
.hear:disabled{opacity:.35}
.left{color:var(--muted);font-weight:700;min-width:2em}
.qpic{display:block;max-width:100%;max-height:36vh;margin:0 auto 12px;border-radius:16px;object-fit:contain}
.frame{font-size:1.6rem;font-weight:800;text-align:center;margin:6px 0 14px;letter-spacing:.02em}
.choices{display:flex;flex-direction:column;gap:12px}
.choice{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;border:3px solid var(--line);border-radius:18px;background:#fff;padding:12px 16px;font-size:1.35rem;font-weight:700;text-align:left}
.cspk{flex:none;width:48px;height:48px;border-radius:50%;background:#e8f0ff;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.choices.pics{display:grid;grid-template-columns:repeat(3,1fr)}
.choices.pics.n4{grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.choices.pics.n4{grid-template-columns:repeat(4,1fr)}}
.choices.pics .choice{padding:6px;justify-content:center}
.choices.pics img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:12px}
.choices.tf{display:grid;grid-template-columns:1fr 1fr}
.choices.tf .choice{justify-content:center;font-size:3rem;min-height:110px}
.choice.ok,.slot.ok,.line.ok .slot{border-color:var(--green);background:#dcf7ea}
.choice.bad,.line.bad .slot{border-color:var(--red);background:#fde2e2}
.line,.tray{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:10px 0}
.line{min-height:64px;padding:8px;border-bottom:3px dashed var(--line)}
.tile{min-width:64px;min-height:60px;padding:8px 16px;border-radius:16px;border:3px solid #cfd9f0;background:#eef3ff;font-size:1.4rem;font-weight:800}
.letters .tile{min-width:56px;text-transform:uppercase}
.slot{background:#fff;border-style:dashed;color:#8a96b0}
.slot.full{border-style:solid;color:var(--ink);background:#fff7d6;border-color:#f0cf5a}
.check{background:var(--green);box-shadow:0 6px 0 #178a57}
.result{text-align:center}
.emoji{font-size:5rem}
.score{font-size:3rem;font-weight:900;margin:.2em 0}
.meta{color:var(--muted);font-size:1.1rem}
.result.pass h1{color:var(--green)}
.result.fail h1{color:#e0752d}