header{justify-content:space-between}.heading{padding:30px 0 20px}.heading h1{font-size:44px;margin:0}.heading .eyebrow{margin-bottom:8px}.layout{display:grid;grid-template-columns:minmax(300px,620px) minmax(260px,1fr);gap:30px;padding-bottom:40px}#board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:8px solid #244a3b;border-radius:8px;overflow:hidden;box-shadow:0 12px 30px #203e3022}.square{position:relative;aspect-ratio:1;border:0;padding:0;display:grid;place-items:center;cursor:pointer;min-width:0}.light{background:#eee5cd}.dark{background:#6c8b69}.piece{font-family:'Segoe UI Symbol','DejaVu Sans',serif;font-size:clamp(27px,4.7vw,63px);line-height:1;z-index:1}.white-piece{color:#fffaf0;text-shadow:0 1px 1px #18281c,1px 0 #18281c,-1px 0 #18281c,0 -1px #18281c}.black-piece{color:#182b22}.selected{box-shadow:inset 0 0 0 5px #efbc51}.last{background:#b4b477}.legal:after{content:'';width:24%;height:24%;border-radius:50%;background:#223f4866;position:absolute}.capture:after{content:'';position:absolute;inset:3px;border:5px solid #dd9148;border-radius:50%}.check{background:#cf8170}.rank,.file{position:absolute;font:600 10px Arial;color:#1c382d;z-index:2}.rank{left:4px;top:4px}.file{right:4px;bottom:4px}#topPlayer,#bottomPlayer{font-size:14px;min-height:20px}.panel{border:1px solid #d8dccb;border-radius:12px;background:#fffdf7;padding:25px}.panel h2{font-size:26px;letter-spacing:-1px;margin:0 0 12px}#hint{font-size:13px;line-height:1.5;color:#71806c;min-height:40px}.panel label{display:block;font-size:12px;font-weight:600;margin:14px 0}.panel select{display:block;width:100%;padding:11px;background:var(--paper);border:1px solid #d4d9c8;border-radius:6px;margin-top:7px;color:var(--ink);font:inherit}.panel .primary{width:100%;justify-content:center}.history{margin:22px 0;max-height:155px;overflow:auto;border-top:1px solid #e1e5d7}.history h3{font-size:13px}.history ol{font:13px/1.8 monospace;padding-left:28px}.panel .small{font-size:11px;line-height:1.6}#undo,#flip,#resign,[data-piece]{border:1px solid #c9d0bd;border-radius:7px;background:transparent;padding:10px 16px;color:var(--ink);cursor:pointer;font-family:inherit}button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:760px){.layout{grid-template-columns:1fr;gap:20px}.piece{font-size:clamp(28px,8vw,58px)}.panel{padding:20px}#board{border-width:5px}}