:root{font-family:Inter,"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#edf2ec;background:#17251f;font-synthesis:none;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{position:fixed;inset:0;display:flex;flex-direction:column}
header{height:68px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:30px;background:#17251f;border-bottom:1px solid #ffffff0b;z-index:2;padding-top:env(safe-area-inset-top)}
.counter{display:flex;align-items:center;justify-content:center;gap:13px;min-width:100px;font-size:24px;font-weight:450;letter-spacing:.025em;font-variant-numeric:tabular-nums}
.counter-stone{width:24px;height:24px;border-radius:50%;display:inline-block}.black{background:#000}.white{background:#fff}.counter-divider{height:18px;width:1px;background:#ffffff1a}
main{position:relative;flex:1;min-height:0}canvas{display:block;width:100%;height:100%;outline:none;touch-action:none;cursor:grab}canvas.dragging{cursor:grabbing}canvas:focus-visible{outline:2px solid #e5edb88c;outline-offset:-3px}
[hidden]{display:none!important}#selection{position:absolute;width:216px;padding:14px;background:#f4f4eafa;color:#202e25;border:1px solid #fff7;border-radius:15px;box-shadow:0 14px 45px #08150f50;z-index:4;backdrop-filter:blur(14px)}
.selection-top{display:flex;justify-content:space-between;align-items:center;color:#718074;font-size:11px;letter-spacing:.08em;font-variant-numeric:tabular-nums}button{font:inherit;cursor:pointer}#cancel{border:0;background:none;font-size:23px;color:#6d796e;line-height:20px;padding:0 2px}.stone-choices{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.stone-choice{display:flex;flex-direction:column;align-items:center;gap:9px;border:1px solid #b8c5b4;background:#e9ede1;border-radius:10px;padding:12px 8px 10px;color:#354336;font-size:12px;transition:background .15s,transform .15s}.stone-choice:hover:not(:disabled){background:#dfe8d4;transform:translateY(-1px)}.stone-choice:focus-visible{outline:2px solid #506b35;outline-offset:2px}.stone-choice:disabled{cursor:default;color:#9aa498;border-color:#c8d0c3}.choice-stone{display:block;width:36px;height:36px;border-radius:50%}#placement-status{font-size:16px;line-height:1.5;margin:12px 0 0;color:#657360;min-height:24px;text-align:center;font-variant-numeric:tabular-nums}#challenge{max-width:100%;overflow:auto}#notice{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#13251edc;color:#e0e9db;border:1px solid #ffffff13;border-radius:30px;padding:11px 19px;font-size:12px;line-height:1.5;max-width:calc(100% - 32px);width:max-content;text-align:center;pointer-events:none;z-index:3}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:520px){header{height:60px;gap:24px}.counter{font-size:22px;gap:10px;min-width:80px}.counter-stone{width:22px;height:22px}#notice{font-size:11px;padding:10px 15px}}
#notice[data-stone-color]{background:none;border:0;border-radius:0;padding:0;font-size:28px;font-weight:600;font-variant-numeric:tabular-nums}
#notice[data-stone-color="black"]{color:#000}
#notice[data-stone-color="white"]{color:#fff}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#retry-pending{width:100%;padding:9px;border:1px solid #b8c5b4;border-radius:7px;background:#e9ede1;color:#354336;font-size:12px;margin-bottom:8px}
.public-links{display:flex;justify-content:center;gap:20px;flex-shrink:0;padding:6px 12px calc(6px + env(safe-area-inset-bottom));font-size:12px;background:#17251f}
.public-links a{color:#edf2ec}