/* ==========================================================================
   BAN-CO.CSS — styles for the Xiangqi board container (#ban-co)
   Load AFTER index_new.css:
   <link href="{{ asset('css/ban-co.css?v=6') }}" rel="stylesheet">
   ========================================================================== */

/* --------------------------------------------------------------------------
   Board container
   -------------------------------------------------------------------------- */
#ban-co {
    touch-action: none !important;
    pointer-events: all;
    width: 100%;
    max-width: 380px;
    margin: 0 auto 15px !important;
    padding: 10px;
    background-color: #252a36;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.15),
        inset 0 0 20px rgba(255, 215, 0, 0.05) !important;
    transition:
        transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.4s ease;

    /* The board itself uses the normal arrow */
    cursor: default;
}

#ban-co:hover {
    transform: translateY(-2px) scale(1.005);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.9),
        0 0 40px rgba(255, 215, 0, 0.3),
        inset 0 0 30px rgba(255, 215, 0, 0.1) !important;
}

/* Board with coordinate notation */
#ban-co:has(.notation-8c7a2) {
    padding: 25px 5px !important;
    background-color: #dfbd85 !important;
}
#ban-co:has(.notation-8c7a2):has(.spare-pieces-9e77b) {
    padding: 5px !important;
}

body.setup #ban-co {
    max-width: 310px !important;
}

/* --------------------------------------------------------------------------
   Cursors
   Board, squares, rows and notation: default arrow.
   Chess pieces: pointer (hand).
   Squares have pointer-events: none (see index_new.css), so only the piece
   images receive the mouse; everything else falls through to #ban-co.
   -------------------------------------------------------------------------- */
#ban-co,
#ban-co .board-1ef78,
#ban-co .row-cb702,
#ban-co .square-2b8ce,
#ban-co .notation-8c7a2,
#ban-co .alpha-f4ef2,
#ban-co .numeric-fe76e,
#ban-co .clearfix-5f3b5 {
    cursor: default !important;
}

#ban-co .piece-1e8b9,
#ban-co .square-2b8ce img,
#ban-co .square-2b8ce:hover img,
#ban-co .square-2b8ce.click-target img,
#ban-co .square-2b8ce.click-target:hover img,
#ban-co .spare-pieces-top-e4b47 img,
#ban-co .spare-pieces-bottom-29dac img {
    cursor: pointer !important;
}

/* Piece being dragged (chessboard.js appends the clone to <body>) */
img.piece-1e8b9 {
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Board internals
   -------------------------------------------------------------------------- */
#ban-co .board-1ef78 {
    box-sizing: content-box;
    margin: auto;
    pointer-events: none !important;
}

#ban-co .square-2b8ce {
    float: left;
    position: relative;
    pointer-events: none !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
#ban-co .square-2b8ce img {
    pointer-events: all !important;
}
#ban-co .square-2b8ce:hover {
    z-index: 2;
}
#ban-co .square-2b8ce:hover img {
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.8));
}

/* Coordinate notation */
#ban-co .notation-8c7a2 {
    position: absolute;
    font-family:
        "Plus Jakarta Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC",
        sans-serif;
    font-size: 14px;
    color: #000;
}
#ban-co .alpha-f4ef2 {
    bottom: 1px;
    right: 40%;
}
#ban-co .numeric-fe76e {
    top: 40%;
    left: 1px;
}
#ban-co .row-cb702:first-of-type .square-2b8ce .notation-8c7a2 {
    top: -21px !important;
    bottom: auto !important;
}
#ban-co .row-cb702:last-of-type .square-2b8ce .notation-8c7a2 {
    bottom: -21px !important;
    top: auto !important;
}

/* Spare pieces (setup page) */
#ban-co .spare-pieces-top-e4b47 {
    margin-bottom: 21px !important;
}
#ban-co .spare-pieces-bottom-29dac {
    margin-top: 21px !important;
}

/* Highlights */
#ban-co .highlight1-e13fc,
#ban-co .highlight2-e0a03 {
    box-shadow: inset 0 0 3px 3px var(--royal-gold);
    background: rgba(212, 175, 55, 0.2);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    #ban-co {
        height: auto !important;
    }
}
@media screen and (max-width: 380px) {
    #ban-co {
        width: calc(100% - 15px) !important;
    }
}