.chess-page{--chess-gold:#956b18;--chess-ivory:#f3f1e9;--chess-blue:#849eb8;min-height:80vh;background:var(--bg);color:var(--text)}
.chess-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.chess-hero{background:linear-gradient(130deg,var(--surface),#f7f3e9);border-bottom:1px solid var(--line)}
.chess-hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center;padding-block:46px}
.chess-kicker{color:var(--chess-gold);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.chess-hero h1{font:clamp(42px,5.5vw,78px)/1.03 Georgia,serif;letter-spacing:-.03em;margin:12px 0 18px}
.chess-hero p{max-width:650px;font-size:17px;line-height:1.65;color:var(--muted)}
.chess-hero-art{width:min(340px,100%);height:auto;justify-self:center;filter:drop-shadow(0 16px 25px #18385518)}
.chess-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chess-pills span{padding:7px 12px;border:1px solid var(--line);background:var(--surface);border-radius:999px;font-size:12px;font-weight:650}
.chess-shell{padding-block:32px 54px}
.chess-panel{padding:26px;border:1px solid var(--line);background:var(--surface);border-radius:24px;box-shadow:var(--shadow)}
.chess-config{display:flex;flex-wrap:wrap;gap:20px;align-items:end;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.chess-config label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted);font-weight:750}
.chess-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}
.chess-grid{display:grid;grid-template-columns:minmax(0,610px) minmax(220px,1fr);gap:32px;max-width:1050px;margin-inline:auto;align-items:start}
.chess-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}
.chess-turn h2{font-size:18px;line-height:1.3;margin:0 0 5px}.chess-turn p{font-size:12px;line-height:1.5;color:var(--muted);margin:0}
.chess-turn .status-check{color:#b73229}
.chess-board{display:grid;grid-template-rows:repeat(8,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(8,minmax(0,1fr));min-height:0}
.chess-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(--chess-ivory);color:#415873}.square-dark{background:var(--chess-blue);color:#f7f9fd}
.chess-square.last-move{background:#d5ca8c}.chess-square.square-dark.last-move{background:#98a56f}
.chess-square.selected{box-shadow:inset 0 0 0 4px #d6a12c}
.chess-square.king-check{background:#da938d}
.chess-square.legal-move:after{content:'';position:absolute;z-index:2;width:23%;height:23%;border-radius:50%;background:#18385955;pointer-events:none}
.chess-square.legal-capture:after{content:'';position:absolute;inset:6%;z-index:2;border:4px solid #1a496c88;border-radius:50%;pointer-events:none}
.chess-square:focus-visible{outline:3px solid #ecb73e;outline-offset:-3px;z-index:3}
.chess-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%}
.chess-board-help{font-size:12px;color:var(--muted);line-height:1.6;margin:14px 0}
.chess-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}
.chess-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}
.chess-actions .chess-primary{background:#183b62;color:#fff;border-color:#183b62}
.chess-actions button:disabled{opacity:.4;cursor:default}
.chess-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 .chess-piece{width:25px;height:25px}
.chess-history{background:var(--surface2);border:1px solid var(--line);border-radius:18px;padding:21px}
.chess-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}
.chess-history p{font-size:12px;color:var(--muted);line-height:1.65}.chess-save-status{border-top:1px solid var(--line);padding-top:14px;margin-top:18px}
.chess-guides{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.chess-guides article{border:1px solid var(--line);background:var(--surface);padding:25px;border-radius:20px}
.chess-guides h2{font:700 25px/1.2 Georgia,serif;margin:0 0 14px}.chess-guides p,.chess-guides li{color:var(--muted);font-size:13px;line-height:1.8}
.chess-guides ul{padding-left:20px}.chess-guides a{text-decoration:underline;text-underline-offset:3px;color:var(--accent)}
.promotion-dialog{width:min(470px,calc(100% - 30px));border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--text);padding:27px}
.promotion-dialog::backdrop{background:#0a173cb3;backdrop-filter:blur(3px)}
.promotion-dialog h2{font:28px Georgia,serif;margin:0 0 13px}.promotion-dialog p{color:var(--muted);font-size:14px}
.promotion-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:22px 0}
.promotion-choices button{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:9px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--text);font-size:11px}
.promotion-choices .chess-piece{width:55px;height:55px}.promotion-cancel{width:100%}
html[data-theme=shadow] .chess-page{--chess-gold:#edcb7b;--chess-ivory:#b5c0c9;--chess-blue:#536c85}
html[data-theme=shadow] .chess-hero{background:linear-gradient(130deg,var(--surface),#172541)}
html[data-theme=shadow] .chess-turn .status-check{color:#ffb3a7}
html[data-theme=shadow] .chess-square.last-move{background:#c3b87d}
html[data-theme=shadow] .chess-square.square-dark.last-move{background:#8e9d69}
@media(max-width:900px){.chess-grid{gap:22px;grid-template-columns:minmax(0,1.7fr) minmax(200px,1fr)}.chess-panel{padding:20px}.chess-history{padding:16px}.chess-hero-grid{gap:20px}}
@media(max-width:740px){.chess-hero-grid{grid-template-columns:1fr;padding-block:34px}.chess-hero-art{display:none}.chess-hero p{font-size:15px}.chess-grid,.chess-guides{grid-template-columns:1fr}.chess-panel{padding:14px}.chess-shell{padding-top:22px}.chess-config{gap:14px}.chess-config label{flex:1;min-width:0}.chess-config select{min-width:0;width:100%}.computer-settings{width:100%;gap:12px}.chess-board{border-width:3px}.move-history{max-height:220px}.chess-turn h2{font-size:17px}.chess-guides article{padding:21px}}