.board-area { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; gap: 10px; }

.board-container {
    height: calc(100vh - var(--header-height, 70px) - 90px);
    width: calc(100vh - var(--header-height, 70px) - 90px);
    max-height: 740px;
    max-width: 740px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 1;
    background: var(--board-border, #333);
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.board-wrapper-inner { position: relative; width: 100%; height: 100%; display: flex; border: 3px solid var(--board-border, #333); box-sizing: border-box; }
.board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; height: 100%; background-color: var(--board-dark); user-select: none; box-sizing: border-box; }
.board-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-board-overlay, 20); overflow: visible; }

.square { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; transition: all 0.2s ease; box-sizing: border-box; border: 2px solid transparent; }
.square.light { background-color: var(--board-light); }
.square.dark { background-color: var(--board-dark); }
.square.selected { background-color: var(--board-selected) !important; border-color: var(--primary); box-shadow: inset 0 0 10px rgba(var(--primary-rgb), 0.5); }
.square.last-move { background-color: rgba(var(--board-last-move-rgb, 255, 250, 205), 0.6) !important; box-shadow: inset 0 0 10px rgba(var(--board-last-move-rgb, 255, 215, 0), 0.4); }
.square.highlight { background-color: var(--board-highlight) !important; box-shadow: inset 0 0 10px rgba(var(--success-rgb), 0.6); }
.square.highlight::after { content: ''; width: 16%; height: 16%; background-color: rgba(var(--success-rgb), 0.8); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: var(--z-board-base, 5); }
.square.capture-hint { background-color: var(--board-highlight) !important; box-shadow: inset 0 0 10px rgba(var(--success-rgb), 0.6); }
.square.capture-hint::after { content: ''; position: absolute; width: 85%; height: 85%; border: 4px solid rgba(var(--success-rgb), 0.8); border-radius: 50%; pointer-events: none; box-sizing: border-box; z-index: var(--z-board-base, 5); }
.square.check { background-color: var(--board-check) !important; border-color: var(--danger); box-shadow: inset 0 0 10px rgba(var(--danger-rgb), 0.5), 0 0 15px rgba(var(--danger-rgb), 0.8); animation: check-pulse 0.8s infinite alternate; }

@keyframes check-pulse { 0% { box-shadow: inset 0 0 10px rgba(var(--danger-rgb),0.5), 0 0 15px rgba(var(--danger-rgb),0.8); } 100% { box-shadow: inset 0 0 20px rgba(var(--danger-rgb),0.8), 0 0 25px rgba(var(--danger-rgb),1); } }

.square.premove-from { background-color: rgba(var(--text-muted-rgb, 100, 116, 139), 0.3) !important; box-shadow: inset 0 0 10px rgba(var(--text-muted-rgb, 100, 116, 139), 0.4); }
.square.premove-to { background-color: rgba(var(--text-muted-rgb, 100, 116, 139), 0.5) !important; box-shadow: inset 0 0 10px rgba(var(--text-muted-rgb, 100, 116, 139), 0.6); }
.square.premove-highlight::after { content: ''; width: 16%; height: 16%; background-color: rgba(var(--text-muted-rgb, 100, 116, 139), 0.8); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: var(--z-board-base, 5); }
.square.premove-capture-hint::after { content: ''; position: absolute; width: 85%; height: 85%; border: 4px solid rgba(var(--text-muted-rgb, 100, 116, 139), 0.8); border-radius: 50%; pointer-events: none; box-sizing: border-box; z-index: var(--z-board-base, 5); }

.piece { width: 100%; height: 100%; z-index: var(--z-board-piece, 10); display: flex; justify-content: center; align-items: center; transition: transform 0.2s ease; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); cursor: default; pointer-events: none; }
.piece:active { cursor: grabbing; transform: scale(1.1); }
.piece.interactive { cursor: grab; pointer-events: auto; }
.piece.interactive:active { cursor: grabbing; transform: scale(1.1); transition: none !important; }

@media (hover: hover) {
    .piece.interactive:hover { filter: brightness(1.1); }
}

.dragging-ghost { position: fixed; pointer-events: none; z-index: var(--z-dragging, 900); width: 80px; height: 80px; opacity: 0.9; transform: translate(-50%, -50%); filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); transition: none !important; }
.hide-piece { opacity: 0 !important; }

line { stroke-width: 1.6; stroke-linecap: round; transition: opacity 0.2s; }
.arrow-engine { stroke: var(--text-muted); marker-end: url(#arrow-engine); opacity: 0.9; }
.arrow-green { stroke: var(--success); marker-end: url(#arrow-green); opacity: 0.9; }
.arrow-red { stroke: var(--danger); marker-end: url(#arrow-red); opacity: 0.9; }
.arrow-orange { stroke: var(--warning); marker-end: url(#arrow-orange); opacity: 0.9; }
.arrow-blue { stroke: var(--primary); marker-end: url(#arrow-blue); opacity: 0.9; }
.circle-highlight { fill: none; stroke-width: 1.1; opacity: 0.8; }

.coord { position: absolute; font-size: clamp(9px, 2vw, 13px); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 600; pointer-events: none; user-select: none; z-index: var(--z-board-base, 5); opacity: 0.85; }
.coord.rank { top: 2px; left: 4px; }
.coord.file { bottom: 0px; right: 4px; }

.board.invert-opponent:not(.flipped) .piece.black svg { transform: rotate(180deg); transition: transform 0.3s ease; }
.board.invert-opponent.flipped .piece.white svg { transform: rotate(180deg); transition: transform 0.3s ease; }
.board.invert-opponent:not(.flipped) .square #promotion-menu .piece.black svg { transform: rotate(180deg); }
.board.invert-opponent.flipped .square #promotion-menu .piece.white svg { transform: rotate(180deg); }
.square .piece { transition: transform 0.15s ease-out; }

@media (max-width: 1100px) {
    .board-container {
        height: auto;
        width: 100%;
        max-width: min(calc(100dvh - var(--header-height, 70px) - 90px), 740px);
    }
}