:root{--bg: #1d1626;--panel: #2a2034;--panel2: #342940;--ink: #f3ecf6;--muted: #b6a8c4;--accent: #b05f8a;--line: #463a55}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(120% 120% at 50% 0%,#2a2034 0%,var(--bg) 70%);color:var(--ink);font-family:Segoe UI,system-ui,-apple-system,sans-serif;min-height:100vh;-webkit-tap-highlight-color:transparent}#app{max-width:720px;margin:0 auto;padding:18px 16px 40px}header h1{margin:0;font-size:28px;letter-spacing:3px;color:var(--accent);text-shadow:0 2px 0 rgba(0,0,0,.3)}header .sub{margin:6px 0 0;color:var(--muted);font-size:14px}.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0 10px}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{background:transparent;color:var(--muted);border:none;padding:8px 14px;cursor:pointer;font-size:14px}.seg button.active{background:var(--accent);color:#fff}.btn{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 16px;cursor:pointer;font-size:14px}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}.scoreboard{display:flex;gap:10px;margin:6px 0 14px}.readout{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:18px;font-weight:700;flex:1;text-align:center}.readout span{display:block;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:1px}.stage{position:relative}.card-area{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:14px}.face-wrap{background:radial-gradient(circle at 50% 40%,#3a2e48,#2a2034);border-radius:50%;padding:8px;border:1px solid var(--line)}#face{display:block}.scenario{margin:0;font-size:17px;line-height:1.45;text-align:center;max-width:520px}.step{width:100%}.step.hidden{display:none}.prompt{margin:0 0 8px;color:var(--muted);font-size:14px;text-align:center}.zones{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.zone{background:var(--panel2);border:2px solid var(--zc);border-radius:12px;padding:12px;cursor:pointer;color:var(--ink);text-align:left;display:flex;flex-direction:column;gap:2px}.zone strong{font-size:15px}.zone em{font-style:normal;font-size:12px;color:var(--muted)}.zone:before{content:"";display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--zc);margin-bottom:4px}.zone.sel{box-shadow:0 0 0 3px var(--zc) inset}.zone.correct{outline:3px solid #4caf72;outline-offset:2px}.zone.wrong{outline:3px solid #d2564b;outline-offset:2px}.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.tool{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--ink);text-align:left;display:flex;flex-direction:column;gap:3px}.tool:hover{border-color:var(--accent)}.tool.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}.tool strong{font-size:14px}.tool span{font-size:12px;color:var(--muted);line-height:1.3}.feedback{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}.feedback.hidden{display:none}.feedback p{margin:4px 0;font-size:14px;line-height:1.4}.feedback .true{font-size:15px}.feedback .mask{color:#e6b733}.feedback .ok{color:#7fd6a0}.feedback .miss{color:#f0a39b}.feedback .pts{font-weight:700;color:var(--accent);font-size:16px}#nextbtn.hidden{display:none}.note{color:var(--muted);font-size:12px;text-align:center;margin-top:16px;line-height:1.4}.overlay{position:absolute;inset:0;background:#140e1ceb;display:flex;align-items:center;justify-content:center;border-radius:16px;padding:16px}.overlay.hidden{display:none}.overlay .card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;max-width:420px;text-align:center}.overlay h2{margin:0 0 8px;color:var(--accent)}.bigscore{font-size:40px;font-weight:800;margin:8px 0}.bigscore span{font-size:20px;color:var(--muted);font-weight:600}.summary{list-style:none;padding:0;margin:12px 0;text-align:left}.summary li{padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}.kind{color:var(--muted);font-size:13px;line-height:1.5;margin:12px 0 18px}@media(max-width:480px){.zones,.tools{grid-template-columns:1fr}}