:root{--bg: #120f1c;--bg2: #181428;--panel: #221a38;--panel2: #2c2148;--ink: #ece6f5;--ink-dim: #a99bc4;--violet: #b78bff;--violet-soft: #d7c2ff;--gold: #ffcf6a;--green: #5fd699;--yellow: #e8c45c;--black: #3a3450;--line: rgba(170,150,220,.18);--radius: 14px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(1100px 700px at 50% -10%,#2a1e48 0%,var(--bg) 62%);color:var(--ink);font-family:Avenir Next,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}#app{max-width:480px;margin:0 auto;padding:14px;min-height:100vh}.screen{animation:fade .25s ease}@keyframes fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:12px 18px;font:inherit;cursor:pointer;transition:.12s}.btn:hover{border-color:var(--violet);background:var(--panel2)}.btn.primary{background:linear-gradient(180deg,#3a2860,#281c44);border-color:var(--violet);color:var(--violet-soft);font-weight:700}.bt{font-size:1rem}.bs{font-size:.74rem;color:var(--ink-dim)}.home{text-align:center}.logo{font-size:2.8rem;font-weight:800;margin:28px 0 6px;color:var(--violet-soft)}.logo span{color:var(--gold)}.tagline{color:var(--ink-dim);line-height:1.55;max-width:30em;margin:0 auto 22px}.tagline em{color:var(--violet);font-style:normal;font-weight:600}.menu{display:flex;gap:12px;justify-content:center;max-width:420px;margin:0 auto 8px}.menu .btn{flex:1}.how{text-align:left;background:#ffffff05;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;max-width:440px;margin:22px auto 0}.how h3{margin:0 0 8px;color:var(--violet-soft)}.how ul{margin:0;padding-left:18px;color:var(--ink-dim);line-height:1.65}.how strong{color:var(--ink)}.mute-btn{position:fixed;bottom:12px;right:12px;background:var(--panel);border:1px solid var(--line);border-radius:999px;width:40px;height:40px;font-size:1.1rem;cursor:pointer;color:var(--ink)}.topbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}.mini{background:none;border:1px solid var(--line);color:var(--ink);border-radius:9px;width:38px;height:38px;font-size:1.05rem;cursor:pointer}.title{flex:1;text-align:center;font-weight:700;display:flex;flex-direction:column}.title .sub{font-size:.74rem;color:var(--ink-dim);font-weight:400}.rows{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}.grow{display:grid;gap:5px}.gcell{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-weight:700;font-size:clamp(.62rem,2.7vw,.95rem);background:var(--bg2);border:1px solid var(--line);color:var(--ink)}.gcell.empty{opacity:.35}.gcell.cur{cursor:pointer}.gcell.cur.set{background:var(--panel2);border-color:var(--violet);color:var(--violet-soft)}.gcell.cur.sel{outline:2px solid var(--gold);outline-offset:-2px}.gcell.g{background:var(--green);border-color:var(--green);color:#06241a}.gcell.y{background:var(--yellow);border-color:var(--yellow);color:#2a2206}.gcell.b{background:var(--black);border-color:var(--black);color:var(--ink-dim)}.keys{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;max-height:46vh;overflow-y:auto;padding:2px;border:1px solid var(--line);border-radius:10px;background:#0000001f}.key{display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:5px 6px;color:var(--ink);cursor:pointer;font:inherit;line-height:1;min-height:22px}.key:hover{border-color:var(--violet);background:var(--panel2)}.key.natural{background:var(--panel)}.key.sharp{background:#1a1430;color:var(--ink-dim)}.kn{font-weight:700;font-size:.82rem;letter-spacing:.02em}.controls{display:grid;grid-template-columns:1fr 1fr auto 1fr;gap:6px}.ctl{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 8px;font:inherit;cursor:pointer;font-size:.9rem}.ctl:hover{border-color:var(--violet)}.ctl.play{background:linear-gradient(180deg,#3a2860,#281c44);border-color:var(--violet);color:var(--violet-soft);font-weight:700}.ctl.submit{background:linear-gradient(180deg,#1f4a36,#15331f);border-color:var(--green);color:#cdf4dd;font-weight:700}.ctl:disabled{opacity:.4;cursor:default}.hint{text-align:center;color:var(--ink-dim);font-size:.8rem;margin:12px 0 0}.over{text-align:center;padding-top:40px}.over h2{font-size:2.1rem;margin:0 0 8px}.over h2.win{color:var(--green)}.over h2.lose{color:var(--gold)}.reveal{color:var(--ink)}.reveal strong{color:var(--violet-soft)}.answer{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:14px 0}.ans-note{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:6px 10px;font-weight:700;color:var(--violet-soft)}.vsub{color:var(--ink-dim)}.over-actions{display:flex;flex-direction:column;gap:10px;max-width:320px;margin:20px auto 0}.over-actions .btn{flex-direction:row}.copied{position:fixed;left:50%;bottom:26px;transform:translate(-50%);background:var(--violet);color:#160a2a;padding:9px 18px;border-radius:999px;font-size:.9rem}@media(max-width:420px){.logo{font-size:2.3rem}.menu{flex-direction:column}}