/* Mobile drag lock for chessboard interactions */
@media (hover: none) and (pointer: coarse) {
    body.dragging {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        touch-action: none !important;
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        -webkit-overflow-scrolling: auto !important;
    }

    html.dragging {
        overflow: hidden !important;
        height: 100% !important;
        touch-action: none !important;
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
    }

    /* Prevent pull-to-refresh on iOS Safari */
    body.dragging,
    html.dragging {
        overscroll-behavior-y: none !important;
        overscroll-behavior: none !important;
    }
}

/* Mobile compatibility - hide move history and adjust layout on smaller screens */
@media (max-width: 991px) {
    /* Hide move history on mobile (opted-in via element id) */
    #moveHistory {
        display: none !important;
    }

    /* Prevent body scrolling on mobile when playing */
    body.game-playing {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        touch-action: none !important;
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        -webkit-overflow-scrolling: auto !important;
    }

    html.game-playing {
        overflow: hidden !important;
        height: 100% !important;
        touch-action: none !important;
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
    }

    /* Prevent pull-to-refresh on iOS Safari */
    body.game-playing,
    html.game-playing {
        overscroll-behavior-y: none !important;
        overscroll-behavior: none !important;
    }
}

/* Premove visual feedback - multiple selectors for better compatibility */
.board-b72b1 .square-55d63.premove-source,
#chessBoard .square-55d63.premove-source,
.square-55d63.premove-source {
    background-color: rgba(255, 255, 0, 0.6) !important;
    box-shadow: inset 0 0 20px rgba(255, 255, 0, 0.9), 0 0 10px rgba(255, 255, 0, 0.5) !important;
}

.board-b72b1 .square-55d63.premove-target,
#chessBoard .square-55d63.premove-target,
.square-55d63.premove-target {
    background-color: rgba(255, 200, 0, 0.7) !important;
    box-shadow: inset 0 0 25px rgba(255, 200, 0, 1), 0 0 15px rgba(255, 200, 0, 0.6) !important;
    position: relative;
}

.board-b72b1 .square-55d63.premove-target::after,
#chessBoard .square-55d63.premove-target::after,
.square-55d63.premove-target::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 75%;
    border: 5px solid rgba(255, 200, 0, 1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 0 10px rgba(255, 200, 0, 0.8);
}

/* Last-move highlighting */
.board-b72b1 .square-55d63.last-move-source,
#chessBoard .square-55d63.last-move-source,
.square-55d63.last-move-source {
    background-color: rgba(135, 206, 250, 0.7) !important;
    box-shadow: inset 0 0 16px rgba(70, 130, 180, 0.9);
}

.board-b72b1 .square-55d63.last-move-target,
#chessBoard .square-55d63.last-move-target,
.square-55d63.last-move-target {
    background-color: rgba(255, 215, 0, 0.7) !important;
    box-shadow: inset 0 0 20px rgba(218, 165, 32, 1);
}

/* Click-to-move: selected piece and legal destination squares */
.board-b72b1 .square-55d63.piece-selected,
#chessBoard .square-55d63.piece-selected,
.square-55d63.piece-selected {
    background-color: rgba(100, 149, 237, 0.6) !important;
    box-shadow: inset 0 0 12px rgba(65, 105, 225, 0.9);
}

.board-b72b1 .square-55d63.legal-move-highlight,
#chessBoard .square-55d63.legal-move-highlight,
.square-55d63.legal-move-highlight {
    position: relative;
}

.board-b72b1 .square-55d63.legal-move-highlight::after,
#chessBoard .square-55d63.legal-move-highlight::after,
.square-55d63.legal-move-highlight::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
    height: 25%;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    pointer-events: none;
}

.board-b72b1 .square-55d63.legal-move-highlight.piece-on-square::after,
#chessBoard .square-55d63.legal-move-highlight.piece-on-square::after,
.square-55d63.legal-move-highlight.piece-on-square::after {
    width: 85%;
    height: 85%;
    border: 3px solid rgba(0, 0, 0, 0.35);
    background-color: rgba(0, 0, 0, 0.12);
    pointer-events: none;
}