:root{
  --bg:#f3efe6; --card:#fffdf8; --ink:#1b1913; --muted:#6b665a; --line:#ddd5c3;
  --brass:#9a6d1c; --brass-soft:#efe2c4; --ok:#2f7d4f; --ok-soft:#dcefe2; --bad:#a3392b; --bad-soft:#f5dfdb;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#14130f; --card:#1d1b16; --ink:#efe9dc; --muted:#a59e8d; --line:#332f26;
  --brass:#d9a94c; --brass-soft:#3a2f18; --ok:#6fcf97; --ok-soft:#1d3226; --bad:#f08a7c; --bad-soft:#3b201c;
  color-scheme:dark;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.45 var(--body);-webkit-text-size-adjust:100%}
.app{max-width:520px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));display:grid;gap:16px}
.top{display:grid;gap:2px;text-align:center}
h1{font:700 30px/1.1 var(--display);margin:0;letter-spacing:.01em}
h1 span{color:var(--brass);font-style:italic}
.sub{margin:0;color:var(--muted);font-size:14px}
.stage{position:relative;width:100%;max-width:440px;margin:0 auto}
canvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;background:var(--card);
  box-shadow:0 0 0 6px var(--card),0 0 0 7px var(--line),0 10px 30px rgba(0,0,0,.18)}
.pips{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);display:flex;gap:6px;background:var(--bg);padding:4px 8px;border-radius:999px}
.pips i{width:12px;height:12px;border-radius:3px;background:var(--line);display:block}
.pips i.bad{background:var(--bad)} .pips i.ok{background:var(--ok)} .pips i.now{outline:2px solid var(--brass);outline-offset:1px}
.play{display:grid;gap:10px;margin-top:6px}
.hint{margin:0;text-align:center;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choices button{font:600 15px/1.2 var(--body);text-align:left;padding:12px;min-height:56px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;display:grid;gap:2px}
.choices button small{font-weight:400;color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.choices button:hover:not(:disabled),.choices button:focus-visible{border-color:var(--brass);outline:none}
.choices button:disabled{opacity:.45;cursor:default;text-decoration:line-through}
.result{display:grid;gap:10px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 16px}
.verdict{margin:0;font-weight:700;color:var(--brass);letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.result h2{margin:0;font:700 26px/1.15 var(--display)}
.credit{margin:0;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.credit a{color:var(--muted)}
.share{margin:0;font:15px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg);border-radius:10px;padding:10px;white-space:pre-wrap}
.row{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.primary{font:700 16px var(--body);background:var(--brass);color:var(--card);border:0;border-radius:12px;padding:12px 22px;min-height:48px;cursor:pointer}
.copied{font-size:13px;color:var(--ok)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0 0}
.stats div{display:grid;gap:0}
.stats dt{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;order:2}
.stats dd{margin:0;font:700 22px var(--display);font-variant-numeric:tabular-nums}
.next{margin:0;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.foot{font-size:12px;color:var(--muted);text-align:center;display:grid;gap:4px}
.foot p{margin:0}
@media (max-width:360px){.choices{grid-template-columns:1fr}}