@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--sea:#0d2b4a;--sea2:#143c63;--line:#2f628f;--sand:#ecdcab;--ink:#f3f0e6;--dim:#93b4d2;--ok:#62c4a2;--bad:#ef6a4c;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--sea);color:var(--ink);font:400 16px/1.4 "Bricolage Grotesque",system-ui,sans-serif;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
main{max-width:520px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:12px}
header{display:flex;justify-content:space-between;align-items:baseline}
h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-.03em}
.stat{color:var(--dim);font-size:14px}
#dial{width:min(88vw,360px,46vh);aspect-ratio:1;margin:0 auto;display:block}
#shape{transition:transform 1.6s cubic-bezier(.3,.7,.2,1);transform-origin:0 0}
.row{display:flex;align-items:center;gap:12px;min-height:28px}
.pips{display:flex;gap:6px}
.pips i{width:12px;height:12px;border-radius:50%;border:2px solid var(--dim)}
.pips i.used{background:var(--bad);border-color:var(--bad)}
.pips i.win{background:var(--ok);border-color:var(--ok)}
#msg{font-weight:600}
button,input{font:inherit;color:inherit}
#next{align-self:stretch;padding:10px;border:0;border-radius:8px;background:var(--sand);color:#2b2308;font-weight:800;cursor:pointer}
#q{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--sea2)}
#list{max-height:min(34vh,300px);overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--sea2)}
#list button{display:block;width:100%;text-align:left;padding:9px 12px;background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer}
#list button:hover:not(:disabled){background:var(--line)}
#list button.bad{color:var(--bad);text-decoration:line-through;cursor:default}
#list button.ok{background:var(--ok);color:#06251c;font-weight:800}
#list button:disabled:not(.bad):not(.ok){opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--sand);outline-offset:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){#shape{transition:none}}
footer{font-size:13px;color:var(--dim);display:flex;flex-wrap:wrap;gap:6px 16px;padding-top:4px}footer a{color:inherit}
h2{font-size:18px;margin:20px 0 4px}p,li{max-width:70ch}