:root{color-scheme:dark;--ink:#1d0c06;--cream:#ffefcf;--amber:#f6c775}
*{box-sizing:border-box}
html{font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;background:#1c0c07}
body{margin:0;min-height:100svh;background:radial-gradient(circle at 50% 40%,#593018,#190a05 75%);color:var(--cream)}
#app{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 8px max(8px,env(safe-area-inset-bottom));gap:8px}
.loading,.error{text-align:center;padding:26px;max-width:400px;font-size:1rem;line-height:1.5}
.error{color:#ffd9c7}.card{width:min(98vw,470px,calc((100svh - 84px)*0.5625));max-width:100%;position:relative;overflow:hidden;isolation:isolate;aspect-ratio:9/16;box-shadow:0 14px 35px #0009;border-radius:5px;background:#281006}
.card img{display:block;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none;pointer-events:none}
.hit{position:absolute;background:transparent;color:transparent;border:0;cursor:pointer;touch-action:manipulation;border-radius:60px;font-size:1px}
.hit:focus-visible{outline:3px solid white;outline-offset:-4px;box-shadow:0 0 0 5px #005ed3ad}
.hit.open{left:8.5%;top:83.2%;width:83%;height:8.6%}
.hit.solo-yes{left:15%;top:69.7%;width:70%;height:5.5%}
.hit.solo-no{left:15%;top:77.2%;width:70%;height:5.5%}
.hit.pair-yes{left:11%;top:67.7%;width:78%;height:5.8%}
.hit.pair-alone{left:11%;top:73.7%;width:78%;height:5.8%}
.hit.pair-no{left:11%;top:79.9%;width:78%;height:5.8%}
.toolbar{width:min(98vw,470px);display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;font-size:13px;color:#efddc5}
.toolbar button,.subtle{color:#ffe4bd;background:#45251a;border:1px solid #96612d;border-radius:10px;padding:6px 10px;cursor:pointer;font-size:13px}
.note{font-size:11px;color:#dec2a0;text-align:center;margin:0;max-width:440px}
.status{font-size:13px;color:#d0f5c1;text-align:center;max-width:420px;margin:0}
.scrim{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#120700b8;padding:20px}
.modal{width:min(100%,420px);background:#2c170e;border:1px solid #a87442;border-radius:17px;padding:23px;box-shadow:0 12px 45px #000b;text-align:center}
.modal h2{font-size:1.35rem;margin:4px 0 12px;color:#ffdb96}
.modal p{line-height:1.55;font-size:1rem;margin:0 0 22px}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.actions button{padding:12px 16px;border-radius:11px;cursor:pointer;font-weight:700;min-width:120px;font-size:0.96rem}
.primary{border:1px solid #ce9c53;background:linear-gradient(#ffdf9e,#dcaa57);color:#231106}
.secondary{border:1px solid #9b7658;background:#41281b;color:#fff0db}
.actions button:disabled{opacity:0.5;cursor:wait}
@media(max-height:730px){#app{gap:4px}.toolbar{min-height:24px}.card{width:min(98vw,470px,calc((100svh - 68px)*0.5625))}}