*{box-sizing:border-box}body{margin:0;background:#f0eee5;color:#17382e;font:16px/1.6 system-ui,sans-serif}main{max-width:1130px;margin:auto;padding:42px 28px}header{max-width:720px;margin-bottom:30px}.eyebrow{font-size:11px;letter-spacing:.23em;font-weight:700;color:#8d603e}h1{font:64px/1.04 Georgia,serif;margin:16px 0}h1 span{display:block;font-size:34px;color:#7c8876;margin-top:10px}header p{max-width:530px;color:#5b695d}.layout{display:grid;grid-template-columns:minmax(0,690px) minmax(240px,1fr);gap:30px}.table{align-self:start;background:#e0c69a;border-radius:16px;padding:20px;box-shadow:0 16px 40px #18372b16}.bar,.caption{display:flex;justify-content:space-between;gap:6px;font-size:13px;font-weight:650}.caption{font-size:10px;letter-spacing:.12em;margin-top:15px;color:#665a41}#board{display:grid;grid-template-columns:repeat(15,1fr);aspect-ratio:1;position:relative;margin-top:12px;background:#dabe8a;border:1px solid #977f55;isolation:isolate}button.cell{padding:0;min-height:0;border:0;border-radius:0;background:linear-gradient(90deg,transparent calc(50% - .5px),#9c865d calc(50% - .5px),#9c865d calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#9c865d calc(50% - .5px),#9c865d calc(50% + .5px),transparent calc(50% + .5px));position:relative;aspect-ratio:1;cursor:pointer}.cell:after{content:'';position:absolute;inset:8%;border-radius:50%}.cell.black:after{background:radial-gradient(circle at 35% 25%,#59615b,#17231d 65%);box-shadow:1px 2px 3px #0005}.cell.white:after{background:radial-gradient(circle at 35% 25%,#fffef2,#e0dfd0 65%);box-shadow:1px 2px 3px #0005}.cell.last:after{outline:2px solid #b75b2f;outline-offset:1px}.cell.win{background-color:#96b388}.cell.threat:before{content:'';position:absolute;inset:30%;border:2px solid #a13c27;border-radius:50%}.cell:focus-visible{outline:3px solid #fff;outline-offset:-3px;z-index:2}.cell:not(.black):not(.white):hover{background-color:#fff3}select,button{font:inherit;color:inherit}select{width:100%;background:#faf9f3;border:1px solid #b8c0af;border-radius:8px;padding:10px;margin:6px 0 18px;min-height:44px}label{font-size:13px;font-weight:650}button:not(.cell){min-height:44px;border:1px solid #a6b19e;border-radius:8px;background:#f8f8f0;padding:9px 15px;cursor:pointer}button.primary{background:#17382e;color:#fff;width:100%;border-color:#17382e}.actions{display:flex;gap:10px;margin-top:10px}.actions button{flex:1;font-size:13px}button:disabled{opacity:.45;cursor:default}#message{padding:18px 0;font-size:15px;font-weight:650;min-height:85px;border-bottom:1px solid #cbd0bf}.notes{font-size:13px;color:#61705d}.notes h2{font:24px Georgia,serif;color:#17382e;margin:22px 0 12px}footer{font-size:11px;color:#68745f;margin-top:35px}a{color:inherit}button:focus-visible,select:focus-visible{outline:3px solid #b75b2f;outline-offset:3px}@media(max-width:750px){main{padding:24px 14px}h1{font-size:48px}h1 span{font-size:27px}.layout{grid-template-columns:1fr;gap:22px}.table{padding:12px}aside{display:grid;grid-template-columns:1fr}.settings{display:grid;grid-template-columns:1fr 1fr;gap:10px}.settings label{min-width:0}select{font-size:13px;margin-bottom:0}.settings .primary,.settings .actions{grid-column:1/-1}.actions{margin-top:0}#message{min-height:0}header{margin-bottom:22px}header p{font-size:14px}}