*{box-sizing:border-box}body{margin:0;color:#493c2e;background:#f1ecdf;font-family:system-ui,-apple-system,sans-serif}button,select{font:inherit;color:inherit}button{cursor:pointer}main{max-width:760px;padding:12px 18px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;font-size:11px}header a{color:inherit;text-decoration:none}header span{letter-spacing:2px;font-size:9px}header button{background:none;border:1px solid #c4b697;border-radius:20px;padding:7px 12px}.intro{display:flex;align-items:center;justify-content:space-between}.intro p{font-size:11px;color:#948268}.intro h1{font-family:serif;font-size:34px;letter-spacing:5px;margin:16px 0}.intro h1 span{color:#8c9879}.stats{display:flex;justify-content:space-around;text-align:center;margin:0 0 12px;font-size:11px}.stats b{display:block;font-size:26px;margin-top:3px}.table{position:relative;width:min(100%,470px);margin:auto;padding:12px;border-radius:14px;background:repeating-linear-gradient(4deg,#806447 0 3px,#83684d 4px 14px);box-shadow:0 7px #67503c,0 15px 32px #40301a20}#board{aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border:1px solid #594830;background:#9fa891}#board button{aspect-ratio:1;position:relative;border:0;border-right:1px solid #65785a65;border-bottom:1px solid #65785a65;background:#ffffff08;padding:0;touch-action:manipulation}#board button:nth-child(2n){background:#ffffff14}#board button:focus-visible{outline:3px solid #ebd19e;outline-offset:-3px;z-index:1}.disc{display:block;position:absolute;inset:9%;border-radius:50%;box-shadow:1px 3px 3px #26342380;transition:transform .18s}.black{background:radial-gradient(circle at 34% 25%,#596160,#242b2a 50%,#131a18);border:1px solid #18241e}.white{background:radial-gradient(circle at 35% 25%,#fffff6,#ddd8c7 70%,#bdbbab);border:1px solid #eeeada}.hint{width:15%;height:15%;position:absolute;left:42.5%;top:42.5%;border-radius:50%;background:#f4d9a2;box-shadow:0 0 0 4px #f4d9a225}.last{outline:2px solid #ce9d52;outline-offset:-5px}#overlay{position:absolute;inset:0;background:#f4efe4ed;border-radius:14px;display:grid;place-items:center;text-align:center;padding:15px}#overlay[hidden]{display:none}.modal>span{font-size:44px;color:#728269}.modal h2{font-family:serif;font-size:23px}.modal p{font-size:12px;line-height:1.9;color:#89785d}.modal button{background:#758769;color:#fff8e8;border:0;border-radius:8px;min-height:44px;min-width:180px;font-weight:700}.panel{text-align:center;margin:18px auto 0;max-width:470px}.panel label{font-size:12px}.panel select{padding:6px;background:#fff7e7;border:1px solid #c8b997;border-radius:6px}#notice{min-height:34px;font-size:12px;margin:10px 0 4px;line-height:1.4}.buttons{display:flex;gap:10px}.buttons button{min-height:44px;flex:1;border:1px solid #bdae8c;background:#e8dfcb;border-radius:8px}.buttons button:first-child{background:#829173;color:white;border-color:#829173}#record{font-size:11px;color:#847354;margin:9px 0}.panel small,footer{font-size:9px;color:#968467}footer{text-align:center;margin:13px 0 0}button:disabled{cursor:default}body.thinking #board{opacity:.86}
@media(max-width:380px) and (max-height:680px){main{padding:7px 10px}.intro h1{font-size:27px;margin:10px 0}.intro p{font-size:9px}.intro p:last-child{display:none}.stats{margin-bottom:7px;font-size:10px}.stats b{font-size:23px}.table{width:278px;padding:9px}.panel{margin-top:12px}#notice{margin:5px 0 2px;min-height:28px;font-size:10px}.panel select{padding:3px}.panel small{display:none}footer{margin-top:6px}.modal h2{font-size:20px;margin:8px 0}.modal p{font-size:10px}.modal>span{font-size:31px}}
@media(max-height:500px) and (min-width:600px){main{height:100dvh;max-width:980px;display:grid;grid-template-columns:1fr minmax(300px,1fr);grid-template-rows:28px 76px 54px 1fr 18px;gap:4px 25px;padding:6px 16px}header{grid-column:1/3}.intro{grid-column:1;grid-row:2}.intro p{font-size:10px}.intro p:last-child{display:none}.intro h1{font-size:32px}.stats{grid-column:1;grid-row:3;margin:0}.table{grid-column:2;grid-row:2/6;width:min(100%,calc(100dvh - 51px));padding:10px;align-self:start}.panel{grid-column:1;grid-row:4;margin:3px 0 0;max-width:none}.panel small{display:none}#notice{margin:6px 0 3px;min-height:30px}footer{grid-column:1;grid-row:5;margin:0}.modal h2{font-size:21px}.modal p{font-size:11px}.modal>span{font-size:34px}}