/* Chess module styles (adapted from the original chess.html). */
.chess-root { text-align: center; }

#chess-info {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #4a4a8a;
    min-height: 28px;
}

#chessboard {
    display: grid;
    grid-template-columns: repeat(8, min(9vw, 64px));
    grid-template-rows: repeat(8, min(9vw, 64px));
    gap: 0;
    border: 3px solid #d4af37;
    margin: 0 auto 16px;
    width: max-content;
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.4);
}

.square {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(7vw, 46px);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s;
}
.square.light { background-color: #f0d9b5; }
.square.dark { background-color: #b58863; }
.square.selected { background-color: #7fc97f !important; }
.square.valid-move { background-color: #a8e6a1 !important; }
.square:hover { opacity: 0.85; }

.chess-controls { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 12px; }
.chess-controls button {
    padding: 10px 24px;
    font-size: 15px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}
.chess-controls button:hover { background: #5a6fd6; }
.chess-controls .chess-icon-btn {
    background: transparent; border: 1px solid #d4af37; color: #d4af37;
    font-size: 1rem; line-height: 1; padding: 8px 12px;
}
.chess-controls .chess-icon-btn:hover { background: rgba(212,175,55,0.15); }

.captured {
    margin: 0 auto;
    max-width: 420px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 6px;
}
.captured h3 { font-size: 13px; margin-bottom: 5px; color: #888; }
.captured-pieces { font-size: 26px; letter-spacing: 4px; min-height: 30px; }