.chess-game-room { display:grid; gap:14px; padding-bottom:24px; }
.chess-room-head { display:grid; gap:10px; }
.chess-world-item { border-color:#c7d2e5; }
.chess-game-icon { background:#eef2fb; }
.chess-game-icon img { object-fit:cover; }
.chess-board { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); width:min(100%,560px); aspect-ratio:1; margin:0 auto; overflow:hidden; border:5px solid #253b59; border-radius:12px; box-shadow:0 10px 24px rgba(18,32,54,.16); }
.chess-square { position:relative; display:grid; place-items:center; min-width:0; padding:0; border:0; border-radius:0; background:#f1dfbd; }
.chess-square.is-dark { background:#8293a7; }
.chess-square.is-selected { box-shadow:inset 0 0 0 4px #f4c34f; }
.chess-square.is-legal::after { content:""; width:22%; aspect-ratio:1; border-radius:50%; background:rgba(30,75,130,.42); position:absolute; }
.chess-square.is-capture::after { content:""; position:absolute; inset:4%; border:3px solid rgba(174,45,49,.62); border-radius:50%; }
.chess-square img { position:relative; z-index:1; width:88%; height:88%; object-fit:contain; pointer-events:none; }
.chess-square.is-last-move { background:#d9d179; }
.chess-square:disabled { opacity:1; cursor:default; }
.chess-square.is-check { box-shadow:inset 0 0 0 4px #d63d40; }
.chess-coordinate { position:absolute; z-index:2; bottom:1px; left:2px; font-size:clamp(.42rem,1.6vw,.65rem); line-height:1; color:#23364d; pointer-events:none; }
.chess-promotion-content .modal-header { display:flex; align-items:center; justify-content:space-between; width:100%; gap:12px; }
.chess-promotion-content .modal-header h2 { flex:1; min-width:0; text-align:left; margin:0; }
.chess-promotion-content .modal-header .close-button { flex:0 0 40px; width:40px; min-width:40px; max-width:40px; height:40px; padding:0; box-sizing:border-box; }
.chess-promotion-choices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:16px; }
.chess-promotion-choices button { display:grid; justify-items:center; gap:8px; min-width:0; padding:10px 4px; border:1px solid #cbd7e9; border-radius:12px; background:#eef3fb; color:#203b61; }
.chess-promotion-choices img { width:100%; max-width:72px; aspect-ratio:1; object-fit:contain; }
html[data-theme="dark"] .chess-promotion-choices button { background:#25334a; border-color:#4d6588; color:#e8efff; }
@media (max-width:520px) { .chess-board { border-width:3px; border-radius:8px; } }