/* ==========================================
   MicroChess — Chessboard Component
   Always LTR, independent of page direction
   ========================================== */

.chessboard-wrap {
    display: flex;
    justify-content: center;
    margin: var(--space-lg) 0;
}

.chessboard {
    direction: ltr;
    width: var(--board-size);
    height: var(--board-size);
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    border: 3px solid #444;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    user-select: none;
    margin: 0 auto;
}

.chessboard__square {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.chessboard__square--light { background: var(--board-light); }
.chessboard__square--dark  { background: var(--board-dark); }

/* --- Piece --- */
.chessboard__piece {
    width: 85%;
    height: 85%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* --- Coordinates --- */
.chessboard__coord {
    position: absolute;
    font-size: 10px;
    font-weight: 600;
    pointer-events: none;
}

.chessboard__coord--rank { top: 1px; left: 3px; }
.chessboard__coord--file { bottom: 0; right: 3px; }

.chessboard__square--light .chessboard__coord { color: var(--board-dark); }
.chessboard__square--dark  .chessboard__coord { color: var(--board-light); }

/* --- Highlights --- */
.chessboard__square--selected { background: var(--hl-selected) !important; }
.chessboard__square--correct  { background: var(--hl-correct) !important; }
.chessboard__square--wrong    { background: var(--hl-wrong) !important; }
.chessboard__square--missed   { background: var(--hl-missed) !important; }
.chessboard__square--active   { box-shadow: inset 0 0 0 3px var(--color-primary); }
.chessboard__square--main-piece { box-shadow: inset 0 0 0 4px var(--color-orange); }
.chessboard__square--in-check { box-shadow: inset 0 0 0 4px rgba(231, 76, 60, 0.85); }

/* --- Markers --- */
.chessboard__marker {
    position: absolute;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chessboard__marker--move-hint {
    width: 28%;
    height: 28%;
    background: rgba(74, 144, 217, 0.5);
    border-radius: 50%;
}

.chessboard__marker--dot {
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.6);
    top: 35%;
    left: 35%;
}

.chessboard__marker--target {
    width: 60%;
    height: 60%;
    animation: chessboard-pulse 1.4s ease-in-out infinite;
}

.chessboard__marker--visited {
    width: 8px;
    height: 8px;
    background: rgba(52, 152, 219, 0.4);
    border-radius: 50%;
    bottom: 3px;
    left: 3px;
    top: auto;
    right: auto;
}

.chessboard__marker--pinner {
    top: 2px;
    right: 2px;
    font-size: 0.7rem;
    opacity: 0.8;
}

.chessboard__marker--king-target {
    bottom: 2px;
    left: 2px;
    font-size: 0.7rem;
    opacity: 0.6;
}

@keyframes chessboard-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* --- Drag --- */
.chessboard__drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 50px;
    height: 50px;
}

.chessboard__piece--dragging {
    opacity: 0.3;
}