:root{color-scheme:light;--ink:#3d251d;--muted:#715c49;--paper:#f5eddb;--red:#a43826;--line:#d3bf9d;font-family:"Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 45% 28%,#fffcf3,transparent 65%),var(--paper)}
main{width:min(100%,920px);margin:auto;padding:22px 24px 28px}
header{display:flex;justify-content:space-between;align-items:center;gap:15px}
h1{font-family:"Yu Mincho", "Hiragino Mincho ProN",serif;font-size:27px;letter-spacing:.12em;margin:0;font-weight:700}
h1 span{color:var(--red);padding-left:4px}
button{font:inherit;font-weight:bold;cursor:pointer;min-height:46px;border:1px solid var(--line);background:#fff9ed;color:var(--ink);border-radius:3px;padding:10px 20px;touch-action:manipulation}
button:hover{background:#fff}
button:focus-visible,summary:focus-visible,#board:focus-visible{outline:3px solid #6c7450;outline-offset:4px}
.quiet{font-size:13px;padding:8px 12px;background:transparent}
nav{display:flex;gap:18px;align-items:center;margin-top:22px;border-bottom:1px solid var(--line)}
nav button{background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;padding:9px 4px;font-size:14px;min-height:44px;white-space:nowrap;font-weight:normal}
nav button[aria-current=true]{border-bottom-color:var(--red);font-weight:bold}
nav .seal{font-size:12px;color:var(--red);padding-left:6px}
.order{text-align:center;margin:25px 0 0}
.order>p:first-child{font-family:"Yu Mincho",serif;font-size:14px;margin:0 0 8px;color:var(--muted)}
h2{font-family:"Yu Mincho", "Hiragino Mincho ProN",serif;font-size:clamp(23px,3.9vw,34px);line-height:1.5;font-weight:600;letter-spacing:.045em;margin:0}
#detail{font-size:14px;line-height:1.7;margin:7px 0 0;color:var(--muted)}
#board{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;margin-top:0;outline-offset:-6px}
svg{width:100%;display:block;overflow:visible}
.drag-hint{position:absolute;bottom:7%;left:0;width:100%;text-align:center;font-size:14px;color:var(--muted);pointer-events:none}
.controls{text-align:center;margin-top:-5px}
#message{min-height:66px}
#verdict{display:block;font-family:"Yu Mincho",serif;font-size:25px;letter-spacing:.03em}
#result-detail{margin:7px 0 13px;color:var(--muted);font-size:14px;line-height:1.65}
.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.actions button{min-width:150px}
.primary{background:var(--red);border-color:var(--red);color:#fff9ee}
.primary:hover{background:#872919}
.primary:disabled{opacity:.6;cursor:default}
#keyboard{font-size:12px;color:var(--muted);margin:13px 0 22px}
footer{border-top:1px solid var(--line);padding-top:13px;font-size:12px;color:var(--muted);line-height:1.8}
footer p{margin:5px 0}
#best{font-size:13px}
details{margin-top:10px}
summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:6px}
summary:before{content:'＋';font-size:15px}
details[open] summary:before{content:'−'}
details p{max-width:620px}
.storage{color:#9c3225}
body[data-phase=result] #verdict{color:var(--red)}
.bolt{animation:bolt .24s ease-out forwards;stroke-linejoin:bevel}
.split{animation:split .42s ease-out}
.split.right{--away:12px}
.split.left{--away:-12px}
@keyframes bolt{0%{opacity:1;stroke-width:9}
100%{opacity:0;stroke-width:2}
}
@keyframes split{0%{transform:translateX(calc(var(--away)*-1))}
55%{transform:translateX(2px) translateY(-1px)}
80%{transform:translateX(-1px)}
100%{transform:translateX(0)}
}
@media(min-width:760px){main{padding-top:28px}
#board{max-width:800px;margin:auto;margin-top:-10px}
.order{margin-top:24px}
svg{max-height:440px}
.drag-hint{bottom:6%}
.controls{margin-top:-9px}
footer{max-width:690px;margin:auto}
}
@media(max-width:450px){main{padding:15px 16px 24px}
h1{font-size:23px}
nav{margin-top:15px;gap:14px}
nav button{font-size:13px}
.order{margin-top:23px}
#detail{font-size:13px;margin-top:7px}
#board{margin-left:-10px;margin-right:-10px;margin-top:8px}
svg{min-height:240px}
.drag-hint{bottom:4%;font-size:12px}
.controls{margin-top:8px}
#verdict{font-size:23px}
#result-detail{font-size:13px}
#message{min-height:74px}
.actions{gap:9px}
.actions button{min-width:125px;padding:10px 14px}
#keyboard{font-size:11px;margin-bottom:18px}
.order h2{font-size:24px}
footer{font-size:12px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}
.bolt{display:none}
}
[hidden]{display:none!important}

@media(min-width:760px){main{padding-top:17px}
nav{margin-top:11px}
.order{margin-top:16px}
#board{margin-top:0}
svg{height:min(40vh,315px);max-height:none}
.drag-hint{bottom:0}
.controls{margin-top:6px}
#keyboard{margin-bottom:16px}
}
@media(max-width:450px){svg{min-height:0}
.drag-hint{bottom:-3px}
#board{margin-bottom:17px}
}

#board:focus-visible{outline:none}
#board:focus-visible .focus-ring{stroke:#727d50;stroke-width:3;stroke-dasharray:6 5}