body[data-game="54"] .game-layout { max-width:1240px; }
body[data-game="54"] #play,body[data-game="54"] #message { max-width:none; }
body[data-game="54"] .game-surface { padding:24px; }
.chess-settings,.chess-settings label { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.chess-layout { display:grid; grid-template-columns:minmax(0,660px) minmax(210px,1fr); gap:28px; align-items:start; }
.chess-table { min-width:0; }
.chess-player { min-height:35px; display:flex; align-items:center; padding:6px 2px; color:var(--muted); font-size:13px; font-weight:700; }
.chess-board { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); aspect-ratio:1; width:100%; border:3px solid #5e5260; border-radius:9px; overflow:hidden; }
.chess-row { display:contents; }
#play .chess-square { position:relative; aspect-ratio:1; border:0; border-radius:0; padding:0; min-width:0; min-height:0; box-shadow:none; transform:none; translate:none; touch-action:none; cursor:pointer; }
#play .chess-square.chess-light { background:#f2e9db; color:#6e5961; }
#play .chess-square.chess-dark { background:#ac8191; color:#fff6ed; }
#play .chess-square:hover { filter:brightness(1.04); }
#play .chess-square.chess-last { background:#dcc889; color:#5f4d30; }
#play .chess-square.chess-dark.chess-last { background:#b6a16b; }
#play .chess-square.chess-selected { background:#dfa6c0; box-shadow:inset 0 0 0 4px #913356; }
#play .chess-square.chess-check { background:#df6a77; }
.chess-square.chess-target::after { content:""; position:absolute; width:23%; height:23%; border-radius:50%; background:#38263266; left:38.5%; top:38.5%; pointer-events:none; }
.chess-square.chess-capture::after { inset:3%; width:auto; height:auto; border:5px solid #38263277; background:transparent; }
#play .chess-square:focus-visible { outline:3px solid #3c2046; outline-offset:-4px; z-index:1; }
.chess-piece-holder { display:block; position:absolute; inset:2%; pointer-events:none; }
.chess-piece { width:100%; height:100%; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.chess-w { fill:#fffaf0; stroke:#493942; color:#493942; }
.chess-b { fill:#3f3543; stroke:#f7ead7; color:#f7ead7; stroke-width:1.1; }
.chess-coordinate { position:absolute; font-size:11px; font-weight:800; line-height:1; z-index:1; pointer-events:none; }
.chess-file { bottom:3px; right:4px; }.chess-rank { top:3px; left:4px; }
.chess-sidebar h2 { font-size:14px; margin:24px 0 10px; }
.chess-status { font-size:19px; line-height:1.4; font-weight:800; margin:5px 0 18px; }
.chess-toolbar-actions { display:flex; flex-wrap:wrap; gap:8px; }
.chess-controls[hidden] { display:none; }
.chess-controls { display:flex; flex-wrap:wrap; gap:8px; }
.chess-controls button { padding:8px 12px; font-size:12px; }
.chess-controls [hidden] { display:none; }
.chess-moves { max-height:250px; min-height:80px; overflow-y:auto; margin:0; padding:0 0 0 32px; font-variant-numeric:tabular-nums; }
.chess-moves li { padding:7px 0; border-bottom:1px solid var(--line); color:var(--muted); }
.chess-moves li span { display:inline-block; width:45%; color:var(--ink); font-size:14px; font-weight:700; }
.chess-note,.chess-credits { font-size:12px; line-height:1.6; color:var(--muted); }
.chess-dialog { max-width:440px; width:calc(100% - 40px); padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--surface,#fff); color:var(--ink); box-sizing:border-box; }
.chess-dialog::backdrop { background:#21132288; }
.chess-dialog h2 { font-size:21px; margin:0 0 12px; }
.chess-dialog p { font-size:14px; line-height:1.6; }
.chess-dialog button { display:inline-flex; align-items:center; gap:6px; margin:5px; }
.chess-dialog button .chess-piece { width:36px; height:36px; }
.chess-drag-ghost { position:fixed; width:68px; height:68px; z-index:10000; pointer-events:none; transform:translate(-50%,-50%); }
@media(max-width:820px) { .chess-layout { grid-template-columns:minmax(0,1fr); gap:12px; }.chess-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }.chess-sidebar h2 { margin:8px 0 0; }.chess-status,.chess-controls,.chess-note,.chess-credits { grid-column:1/-1; }.chess-moves { grid-column:1/-1; max-height:160px; }.chess-status { margin:0 0 8px; } }
@media(max-width:500px) { body[data-game="54"] .game-layout { padding:0 8px; }body[data-game="54"] .game-surface { padding:10px; }.chess-settings { width:100%; }.chess-board { border-width:2px; }.chess-coordinate { font-size:9px; }.chess-player { font-size:12px; }.chess-square.chess-capture::after { border-width:3px; } }
@media(prefers-reduced-motion:reduce) { .chess-board * { animation:none!important; transition:none!important; } }