:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#e8e9dd;background:#141e1d;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 30% 20%,#2a3c34,transparent 65%)}main{max-width:1220px;margin:auto;padding:28px 36px}header{display:flex;align-items:center;gap:20px;margin-bottom:28px}h1{font-family:Georgia,serif;font-weight:400;font-size:42px;letter-spacing:-1px;margin:5px 0}h1 span{font-family:system-ui;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-left:24px;color:#aab7a5}.brand{display:grid;place-items:center;border:1px solid #8c9d80;width:58px;height:58px;border-radius:50%;color:#dbc38b;text-decoration:none;font-family:Georgia}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.4px;color:#a9bd9d}header>button{margin-left:auto}button,select{font:inherit;color:inherit;background:#25372f;border:1px solid #53624d;border-radius:7px;padding:10px 13px;cursor:pointer}button:hover{background:#3c4b36}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #efcd85;outline-offset:2px}button:disabled{opacity:.4;cursor:default}.primary{background:#dbc18a;color:#1c2c25;border-color:#dbc18a;font-weight:700}.primary:hover{background:#f1d9a5}.toolbar{display:flex;align-items:flex-end;gap:10px;margin-bottom:24px;border-top:1px solid #52614b;padding-top:18px}label{font-size:10px;letter-spacing:1px;text-transform:uppercase}select{display:block;min-width:240px;margin-top:7px;text-transform:none;letter-spacing:0}.layout{display:grid;grid-template-columns:minmax(400px,660px) 1fr;gap:28px}.table{padding:18px;background:#1a2924;border:1px solid #52614b;border-radius:14px;box-shadow:0 22px 55px #0004}#board{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;aspect-ratio:1;border:6px solid #48533b;border-radius:5px;background:#35412f}.cell{position:relative;padding:0;min-width:0;border:0;border-radius:3px;background:#76856644;display:flex;align-items:center;justify-content:center;aspect-ratio:1}.cell:nth-child(20n+2),.cell:nth-child(20n+4),.cell:nth-child(20n+6),.cell:nth-child(20n+8),.cell:nth-child(20n+10),.cell:nth-child(20n+11),.cell:nth-child(20n+13),.cell:nth-child(20n+15),.cell:nth-child(20n+17),.cell:nth-child(20n+19){background:#75826477}.cell.lake{background:#253c3e;background-image:repeating-linear-gradient(-15deg,transparent 0 9px,#8bafb025 10px 11px);cursor:default}.cell.selected{outline:3px solid #f6d389;outline-offset:-3px;background:#e4bc5b55}.cell.legal:after{content:'';position:absolute;width:20%;height:20%;border-radius:50%;background:#faf2bf;box-shadow:0 0 0 7px #dedfaf25;z-index:3}.cell.legal:has(.piece):after{width:90%;height:90%;border:3px solid #faf2bf;background:transparent;box-shadow:none;border-radius:6px}.cell.last{box-shadow:inset 0 0 0 2px #d8dfb877}.piece{width:83%;height:86%;border:1px solid #f5dc9f77;background:linear-gradient(130deg,#d7b877,#ad8249);color:#192820;border-radius:7px 7px 11px 11px;box-shadow:0 3px 3px #0005,inset 0 1px 1px #fff7;display:flex;align-items:center;justify-content:center;flex-direction:column;font-family:Georgia,serif;font-size:clamp(15px,2.1vw,28px);font-weight:700;line-height:1}.piece small{font-family:system-ui;font-size:7px;letter-spacing:.4px;font-weight:600;margin-top:3px;max-width:100%;overflow:hidden}.piece.enemy{background:linear-gradient(130deg,#bfaccf,#76648e);border-color:#ddd2e977;color:#241c31}.piece.hidden{color:#dccbe9;background:repeating-linear-gradient(45deg,#695a7b 0 4px,#706083 4px 8px);font-weight:400}.piece.moved:before{content:'•';position:absolute;right:12%;top:7%;font:13px sans-serif}.square-label{position:absolute;left:3px;bottom:2px;color:#d0d9c8;font-size:8px;opacity:.65}.opponent{display:flex;align-items:center;gap:9px;padding:0 0 14px;font-size:13px}.opponent:nth-of-type(2){padding:16px 0 0}.opponent span:not(.dot){font-size:11px;color:#a9b9a5}.opponent strong{margin-left:auto;font-size:11px}.dot{width:8px;height:8px;display:inline-block;border-radius:50%}.violet{background:#b49ac8}.amber{background:#ddba78}.board-caption{font-size:9px;text-align:center;color:#9caa96;margin-top:12px;letter-spacing:.3px}.status-card{border:1px solid #68705a;border-radius:12px;padding:22px;background:#24352b}h2{font:30px/1.15 Georgia,serif;letter-spacing:-.6px;margin:14px 0}p{font-size:13px;line-height:1.65;color:#c4cdbd}h3{font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-top:26px}.row{display:flex;gap:8px}.row button{font-size:11px;padding:9px}.small{font-size:11px;color:#a6b69e}#suggestion{min-height:18px;margin-bottom:0}.rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;font-size:10px;color:#bbcab3}.rank-grid b{display:inline-grid;place-items:center;min-width:22px;height:23px;border:1px solid #85967466;border-radius:4px;color:#e7cc90;margin-right:6px}details{border-top:1px solid #59654f;margin-top:20px;padding-top:15px}summary{font-size:12px;cursor:pointer}#ply{float:right;color:#a9ba9e}ol{padding-left:20px;font-size:11px;line-height:1.7;color:#c5d0bb;max-height:220px;overflow:auto}footer{font-size:10px;line-height:2;color:#a5b49a;margin:26px 0}a{color:#d9c490}dialog{background:#213429;color:#eee8d4;border:1px solid #8e9a75;border-radius:15px;padding:30px;max-width:630px;max-height:85vh}dialog::backdrop{background:#091710cc;backdrop-filter:blur(5px)}.close{float:right}.intel{padding:0 8px}@media(max-width:860px){main{padding:18px}.layout{grid-template-columns:1fr;gap:14px}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}h1{font-size:32px}h1 span{display:block;font-size:10px;margin:6px 0 0}header{gap:12px}.toolbar{flex-wrap:wrap}select{min-width:210px}.piece{font-size:clamp(18px,4vw,28px)}.piece small{font-size:7px}aside>details{margin:0}header button{font-size:11px}.table{max-width:660px;width:100%;margin:auto}}@media(max-width:520px){main{padding:12px}aside{display:block}.table{padding:10px}#board{gap:2px;border-width:4px}.piece small{display:none}.piece{border-radius:4px;font-size:18px}h1{font-size:27px}.brand{width:40px;height:40px;font-size:12px}header .eyebrow{font-size:7px}.opponent span:not(.dot){display:none}.toolbar{gap:7px}button{font-size:11px}.square-label{font-size:6px}.status-card{margin-top:10px;padding:18px}h2{font-size:26px}}
