.draughts-page{--draughts-gold:#956b18;--draughts-ivory:#f3f1e9;--draughts-blue:#849eb8;min-height:80vh;background:var(--bg);color:var(--text)}
.draughts-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.draughts-hero{background:linear-gradient(130deg,var(--surface),#f7f3e9);border-bottom:1px solid var(--line)}
.draughts-hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center;padding-block:46px}
.draughts-kicker{color:var(--draughts-gold);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.draughts-hero h1{font:clamp(42px,5.5vw,78px)/1.03 Georgia,serif;letter-spacing:-.03em;margin:12px 0 18px}
.draughts-hero p{max-width:650px;font-size:17px;line-height:1.65;color:var(--muted)}
.draughts-hero-art{width:min(340px,100%);height:auto;justify-self:center;filter:drop-shadow(0 16px 25px #18385518)}
.draughts-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.draughts-pills span{padding:7px 12px;border:1px solid var(--line);background:var(--surface);border-radius:999px;font-size:12px;font-weight:650}
.draughts-shell{padding-block:32px 54px}
.draughts-panel{padding:26px;border:1px solid var(--line);background:var(--surface);border-radius:24px;box-shadow:var(--shadow)}
.draughts-config{display:flex;flex-wrap:wrap;gap:20px;align-items:end;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.draughts-config label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted);font-weight:750}
.draughts-config select{min-width:180px;background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 34px 10px 12px;font-size:14px}
.computer-settings{display:flex;flex-wrap:wrap;gap:20px;border:0;padding:0;margin:0}
.draughts-grid{display:grid;grid-template-columns:minmax(0,610px) minmax(220px,1fr);gap:32px;max-width:1050px;margin-inline:auto;align-items:start}
.draughts-turn{display:flex;align-items:center;gap:12px;margin-bottom:18px;min-height:52px}
.turn-dot{width:25px;height:25px;border:2px solid #657b93;border-radius:50%;flex-shrink:0;box-shadow:0 2px 5px #1834531a}
.turn-dot.white{background:#fffdf5}.turn-dot.black{background:#1a2c46}
.draughts-turn h2{font-size:18px;line-height:1.3;margin:0 0 5px}.draughts-turn p{font-size:12px;line-height:1.5;color:var(--muted);margin:0}
.draughts-turn .status-check{color:#b73229}
.draughts-board{display:grid;grid-template-rows:repeat(10,minmax(0,1fr));aspect-ratio:1;width:100%;border:5px solid #25405f;border-radius:4px;overflow:hidden;box-shadow:0 10px 25px #102b4e1c}
.board-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));min-height:0}
.draughts-square{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;min-width:0;min-height:0;padding:0;border:0;border-radius:0;line-height:1;touch-action:manipulation;isolation:isolate}
.square-light{background:var(--draughts-ivory);color:#415873}.square-dark{background:var(--draughts-blue);color:#f7f9fd}
.draughts-square.last-move{background:#d5ca8c}.draughts-square.square-dark.last-move{background:#98a56f}
.draughts-square.selected{box-shadow:inset 0 0 0 4px #d6a12c}
.draughts-square.king-check{background:#da938d}
.draughts-square.legal-move:after{content:'';position:absolute;z-index:2;width:23%;height:23%;border-radius:50%;background:#18385955;pointer-events:none}
.draughts-square.legal-capture:after{content:'';position:absolute;inset:6%;z-index:2;border:4px solid #1a496c88;border-radius:50%;pointer-events:none}
.draughts-square:focus-visible{outline:3px solid #ecb73e;outline-offset:-3px;z-index:3}
.draughts-piece{display:block;width:83%;height:83%;max-width:72px;filter:drop-shadow(0 1px 1px #142e4f33);pointer-events:none}
.piece-white g{fill:#fffaf0;stroke:#213750;color:#213750}.piece-black g{fill:#203451;stroke:#cfdeed;color:#dce8f4}
.rank-coordinate,.file-coordinate{position:absolute;font:bold clamp(8px,1.2vw,11px)/1 system-ui;z-index:2;pointer-events:none}
.rank-coordinate{top:5%;left:5%}.file-coordinate{bottom:4%;right:5%}
.draughts-board-help{font-size:12px;color:var(--muted);line-height:1.6;margin:14px 0}
.draughts-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}
.draughts-actions button,.promotion-cancel{min-height:44px;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:10px;padding:10px 12px;font-size:13px;font-weight:700}
.draughts-actions .draughts-primary{background:#183b62;color:#fff;border-color:#183b62}
.draughts-actions button:disabled{opacity:.4;cursor:default}
.draughts-captures{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:18px;font-size:11px;color:var(--muted)}
.captured-pieces{display:flex;flex-wrap:wrap;align-items:center;min-height:30px;gap:1px;margin-top:5px}
.captured-pieces .draughts-piece{width:25px;height:25px}
.draughts-history{background:var(--surface2);border:1px solid var(--line);border-radius:18px;padding:21px}
.draughts-history h2{font:700 24px/1.2 Georgia,serif;margin:0 0 14px}
.move-history{max-height:405px;overflow:auto;scrollbar-gutter:stable}
.move-history table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}
.move-history th{position:sticky;top:0;background:var(--surface2);padding:10px 6px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px}
.move-history td{padding:10px 6px;border-bottom:1px solid var(--line);font-family:ui-monospace,monospace}
.move-history td:first-child{color:var(--muted);width:30px}.move-history tr:last-child td{font-weight:750}
.draughts-history p{font-size:12px;color:var(--muted);line-height:1.65}.draughts-save-status{border-top:1px solid var(--line);padding-top:14px;margin-top:18px}
.draughts-guides{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.draughts-guides article{border:1px solid var(--line);background:var(--surface);padding:25px;border-radius:20px}
.draughts-guides h2{font:700 25px/1.2 Georgia,serif;margin:0 0 14px}.draughts-guides p,.draughts-guides li{color:var(--muted);font-size:13px;line-height:1.8}
.draughts-guides ul{padding-left:20px}.draughts-guides a{text-decoration:underline;text-underline-offset:3px;color:var(--accent)}
html[data-theme=shadow] .draughts-page{--draughts-gold:#edcb7b;--draughts-ivory:#b5c0c9;--draughts-blue:#536c85}
html[data-theme=shadow] .draughts-hero{background:linear-gradient(130deg,var(--surface),#172541)}
html[data-theme=shadow] .draughts-turn .status-check{color:#ffb3a7}
html[data-theme=shadow] .draughts-square.last-move{background:#c3b87d}
html[data-theme=shadow] .draughts-square.square-dark.last-move{background:#8e9d69}
@media(max-width:900px){.draughts-grid{gap:22px;grid-template-columns:minmax(0,1.7fr) minmax(200px,1fr)}.draughts-panel{padding:20px}.draughts-history{padding:16px}.draughts-hero-grid{gap:20px}}
@media(max-width:740px){.draughts-hero-grid{grid-template-columns:1fr;padding-block:34px}.draughts-hero-art{display:none}.draughts-hero p{font-size:15px}.draughts-grid,.draughts-guides{grid-template-columns:1fr}.draughts-panel{padding:14px}.draughts-shell{padding-top:22px}.draughts-config{gap:14px}.draughts-config label{flex:1;min-width:0}.draughts-config select{min-width:0;width:100%}.computer-settings{width:100%;gap:12px}.draughts-board{border-width:3px}.move-history{max-height:220px}.draughts-turn h2{font-size:17px}.draughts-guides article{padding:21px}}

.draughts-piece{display:block;width:83%;height:83%;max-width:58px;filter:drop-shadow(0 2px 1px #142e4f33);pointer-events:none}
.square-number{position:absolute;top:4%;left:5%;font:600 clamp(7px,.8vw,10px)/1 system-ui;color:#f8fafc;pointer-events:none}
.pending-capture .draughts-piece{opacity:.35}
.draughts-counts{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:18px;font-size:11px;color:var(--muted)}
.draughts-counts>div>div{font-size:13px;color:var(--text);margin-top:7px}
.draughts-related{display:flex;flex-wrap:wrap;gap:14px}
.move-history td{overflow-wrap:anywhere}
.computer-settings[hidden]{display:none}
@media(min-width:741px) and (max-width:1140px){.draughts-body .desktop-nav{display:none}.draughts-body .menu-button{display:block}}