.shell{--ink:#17211c;--paper:#f7f8f5;--panel:#fbfcfa;--line:#d3dad0;--felt:#2a7a52;--grid:#12452e;--accent:#1f6b45;--dim:#6f7c73;--board:416px;--side:288px;--gap:22px;--gutter:16px;max-width:calc(var(--side) * 2 + var(--board) + var(--gap) * 2 + 32px);color:var(--ink);margin:0 auto;padding:14px 16px 48px;font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}.scorebar{width:var(--board);border:1.5px solid var(--ink);background:var(--paper);border-radius:8px;grid-template-columns:1fr 1fr;margin:0 auto 12px;display:grid;overflow:hidden}.scorebar .side{align-items:center;gap:10px;padding:9px 12px;font-weight:650;transition:background .15s;display:flex}.scorebar .side:last-child{flex-direction:row-reverse}.scorebar .side.active{background:#e7f1ea}.scorebar .side:first-child{border-right:1.5px solid var(--line)}.scorebar .pip{font-variant-numeric:tabular-nums;border-radius:50%;flex:none;place-items:center;width:28px;height:28px;font-size:12.5px;display:grid}.scorebar .pip.black{color:#fff;background:#16201a}.scorebar .pip.white{color:#16201a;box-shadow:inset 0 0 0 1.5px var(--ink);background:#fff}.scorebar .name{white-space:nowrap;text-overflow:ellipsis;flex:auto;overflow:hidden}.scorebar .side:last-child .name{text-align:right}.layout{grid-template-columns:var(--board);justify-content:center;gap:var(--gap);display:grid}.layout.with-analysis{grid-template-columns:var(--side) var(--board) var(--side);align-items:start}.middle{width:var(--board);position:relative}.toast{top:calc((var(--board) - var(--gutter)) / 2);left:calc(var(--gutter) + (var(--board) - var(--gutter)) / 2);z-index:5;color:#f2f5f1;white-space:nowrap;pointer-events:none;background:#14201aeb;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;animation:forwards toast;position:absolute;box-shadow:0 3px 12px #00000038}@keyframes toast{0%{opacity:0;transform:translate(-50%,calc(-50% - 6px))}12%{opacity:1;transform:translate(-50%,-50%)}76%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,calc(-50% - 4px))}}@media (prefers-reduced-motion:reduce){.toast{opacity:1;animation:none;transform:translate(-50%,-50%)}}.board-frame{grid-template-columns:var(--gutter) 1fr;grid-template-rows:auto var(--gutter);width:var(--board);display:grid}.board-frame .ranks,.board-frame .files{color:var(--dim);font-variant-numeric:tabular-nums;font-size:10px;display:grid}.board-frame .ranks{grid-template-rows:repeat(8,1fr);place-items:center}.board-frame .files{grid-column:2;grid-template-columns:repeat(8,1fr);place-items:center}.board{aspect-ratio:1;background:var(--felt);border:2px solid var(--grid);border-radius:3px;grid-area:1/2;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);width:100%;display:grid;position:relative}.grid-lines{z-index:0;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.grid-lines line{stroke:var(--grid);stroke-width:1px}.grid-lines circle{fill:var(--grid)}.board .cell{z-index:1;outline-offset:-2px;background:0 0;border:0;place-items:center;min-width:0;min-height:0;padding:0;display:grid;position:relative}.board .cell:not(:disabled){cursor:pointer}.board .cell.playable:hover{background:#ffffff1f}.board .cell.last:after{content:"";pointer-events:none;border:2px solid #f2c85c;border-radius:2px;position:absolute;inset:2px}.board .disc{aspect-ratio:1;border-radius:50%;width:80%;box-shadow:0 1px 2px #00000052}.board .disc.black{background:radial-gradient(circle at 34% 30%,#48524b,#101713 62%)}.board .disc.white{background:radial-gradient(circle at 34% 30%,#fff,#cfd6d0 68%)}.board .ghost{aspect-ratio:1;opacity:.38;border-radius:50%;width:30%}.board .ghost.black{background:#101713}.board .ghost.white{background:#fff}.analysis-board{width:var(--side)}.board.analysis{width:var(--side);border-color:var(--line);background:#eef1ec;border-width:1px;border-radius:3px}.board.analysis .grid-lines line{stroke:#c8d0c6}.board.analysis .cell{background:0 0}.board.analysis .disc{width:62%;box-shadow:none;opacity:.85}.board.analysis .readout{background:rgba(31,107,69, calc(.07 + .58 * var(--share,0)));color:var(--ink);text-align:center;border-radius:2px;place-content:center;line-height:1.02;display:grid;position:absolute;inset:1px;overflow:hidden}.board.analysis .readout b{font-variant-numeric:tabular-nums;font-size:10px;font-weight:700}.board.analysis .readout i{color:var(--dim);font-size:8px;font-style:normal}.board-note{color:var(--dim);margin:10px 2px 0;font-size:12px}.panel{width:var(--side);min-height:var(--side);box-sizing:border-box;border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:12px 14px}.panel .summary{margin:0 0 10px;font-size:13px;font-weight:650}.panel .placeholder{color:var(--dim);margin:0;font-size:12px}.panel table{border-collapse:collapse;table-layout:fixed;width:100%}.panel th{text-align:right;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:3px;font-size:10px;font-weight:650}.panel th.h-move{text-align:left;width:42%}.panel td{font-variant-numeric:tabular-nums;padding:3px 0;font-size:13px}.panel td.sq{font-weight:650;position:relative}.panel td.sq .label{position:relative}.panel td.num{text-align:right}.panel td.dim{color:var(--dim)}.panel tr.best td{color:var(--accent);font-weight:700}.panel .bar{background:#1f6b4524;border-radius:2px;position:absolute;top:1px;bottom:1px;left:-3px}.panel .caption{color:var(--dim);margin:10px 0 0;font-size:11.5px;line-height:1.45}.panel .progress{min-height:1.2em;color:var(--dim);font-variant-numeric:tabular-nums;margin:6px 0 0;font-size:11.5px}.status{text-align:center;min-height:1.5em;margin:10px 0 8px;font-weight:650}.controls{justify-items:center;gap:9px;display:grid}.strength{text-align:center;width:320px}.strength.disabled{opacity:.42}.strength label{display:block}.strength label b{text-align:left;min-width:92px;display:inline-block}.strength input[type=range]{width:100%;accent-color:var(--accent);margin:5px 0 2px}.strength .ticks{color:var(--dim);justify-content:space-between;font-size:11px;display:flex}.strength .ticks .on{color:var(--accent);font-weight:700}.toggles,.sides{gap:20px;display:flex}.toggles label,.sides label{align-items:center;gap:6px;display:flex}.controls label:has(input:disabled){opacity:.42}.buttons{gap:12px;display:flex}.buttons button{min-width:92px;font:inherit;border:1.5px solid var(--ink);background:var(--paper);cursor:pointer;border-radius:5px;padding:6px 18px;font-weight:650}.buttons button:disabled{opacity:.35;cursor:default}.buttons button:not(:disabled):hover{background:#e7f1ea}.fatal{max-width:620px;margin:60px auto}.fatal h1{margin:0 0 12px;font-size:19px}.fatal p{margin:0 0 10px}.fatal .hint{color:var(--dim);font-size:13px}@media (max-width:1150px){.shell{--board:356px;--side:212px;--gap:16px}.board.analysis .readout b{font-size:9px}.board.analysis .readout i{font-size:7px}}@media (max-width:940px){.shell{--board:min(408px, calc(100vw - 40px));--side:var(--board)}.layout,.layout.with-analysis{grid-template-columns:var(--board);justify-items:center}.middle{order:-1}.analysis-board{order:1}.panel{order:2;min-height:0}.board.analysis .readout b{font-size:11px}.board.analysis .readout i{font-size:8px}}