/* ============================================
   PREMIUM BOARD SKIN
   Canvas draws the board, DOM is transparent overlay for interaction
   MUST load AFTER game-v2.css to win !important battles
   ============================================ */

/* === CONTAINER === */
.board-skin-premium.board-container {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 14px !important;
    overflow: visible !important;
    position: relative !important;
}
/* Hide old wood frame (::before) and blue felt border (::after) */
.board-skin-premium.board-container::before {
    display: none !important;
    content: none !important;
}
.board-skin-premium.board-container::after {
    display: none !important;
    content: none !important;
}

/* === BOARD INNER — positioned by CSS vars set from JS ===
   game-v2.css sets top:9px!important etc, we override with higher specificity */
.board-skin-premium.board-container .bg-board {
    position: absolute !important;
    top: var(--pm-board-top) !important;
    left: var(--pm-board-left) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--pm-board-w) !important;
    height: var(--pm-board-h) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    border: none !important;
    z-index: 1 !important;
    overflow: visible !important;
}
.board-skin-premium .bg-board::before,
.board-skin-premium .bg-board::after {
    display: none !important;
}

/* Remove fold line */
.board-skin-premium .bg-board-main::after {
    display: none !important;
}
.board-skin-premium .bg-board-main {
    overflow: visible !important;
}

/* === HALVES - transparent === */
.board-skin-premium .bg-half,
.board-skin-premium .bg-half.bg-top,
.board-skin-premium .bg-half.bg-bottom {
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* === QUADS - zero padding, allow overflow === */
.board-skin-premium.board-container .bg-quad {
    background: transparent !important;
    padding: 0 0 !important;
    overflow: visible !important;
}

/* Points - allow overflow */
.board-skin-premium .bg-point,
.board-skin-premium .bg-point-top,
.board-skin-premium .bg-point-bottom {
    overflow: visible !important;
}

/* === POINTS - zero padding (game-v2 has 1px!important) === */
.board-skin-premium.board-container .bg-point-top {
    padding-top: 0 !important;
}
.board-skin-premium.board-container .bg-point-bottom {
    padding-bottom: 0 !important;
}

/* === TRIANGLES - FULLY HIDDEN === */
.board-skin-premium.board-container .bg-tri,
.board-skin-premium .bg-pt-dark .bg-tri,
.board-skin-premium .bg-pt-light .bg-tri,
.board-skin-premium .bg-point-top .bg-tri,
.board-skin-premium .bg-point-bottom .bg-tri,
.board-skin-premium .bg-point-top.bg-pt-dark .bg-tri,
.board-skin-premium .bg-point-top.bg-pt-light .bg-tri,
.board-skin-premium .bg-point-bottom.bg-pt-dark .bg-tri,
.board-skin-premium .bg-point-bottom.bg-pt-light .bg-tri,
.board-skin-premium .bg-point.bg-valid-dest .bg-tri {
    background: transparent !important;
    background-image: none !important;
    visibility: hidden !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Scallop shadows - hidden */
.board-skin-premium .bg-point::after,
.board-skin-premium .bg-point-top::after,
.board-skin-premium .bg-point-bottom::after {
    display: none !important;
}

/* === BAR - transparent, width from CSS var === */
.board-skin-premium.board-container .bg-bar {
    background: transparent !important;
    background-image: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    width: var(--pm-bar-w) !important;
    min-width: var(--pm-bar-w) !important;
    max-width: var(--pm-bar-w) !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}
.board-skin-premium .bg-bar::before,
.board-skin-premium .bg-bar::after,
.board-skin-premium .bg-bar-top::after,
.board-skin-premium .bg-bar-bottom::after {
    display: none !important;
}

/* === PIECES - size from CSS var, no shadow === */
.board-skin-premium.board-container .bg-piece {
    width: var(--pm-piece-size) !important;
    height: var(--pm-piece-size) !important;
    margin-top: 0px !important;
}
.board-skin-premium.board-container .bg-piece:first-child {
    margin-top: 0 !important;
}
.board-skin-premium.board-container .bg-point-bottom .bg-piece {
    margin-top: 0 !important;
    margin-bottom: 0px !important;
}
.board-skin-premium.board-container .bg-point-bottom .bg-piece:first-child {
    margin-bottom: 0 !important;
}

/* Landscape: pieces overlap to fit */
@media (orientation: landscape) {
    .board-skin-premium.board-container .bg-piece {
        margin-top: calc(var(--pm-piece-size) * -0.28) !important;
    }
    .board-skin-premium.board-container .bg-piece:first-child {
        margin-top: 0 !important;
    }
    .board-skin-premium.board-container .bg-point-bottom .bg-piece {
        margin-top: 0 !important;
        margin-bottom: calc(var(--pm-piece-size) * -0.28) !important;
    }
    .board-skin-premium.board-container .bg-point-bottom .bg-piece:first-child {
        margin-bottom: 0 !important;
    }
}

/* Remove box-shadow from pieces on premium board */
.board-skin-premium.board-container .bg-piece.bg-p-white,
.board-skin-premium.board-container .bg-p-white,
.board-skin-premium.board-container .bg-piece-w {
    box-shadow: none !important;
}
.board-skin-premium.board-container .bg-piece.bg-p-black,
.board-skin-premium.board-container .bg-p-black,
.board-skin-premium.board-container .bg-piece-b {
    box-shadow: none !important;
}
/* Keep shadow on selected/dragging pieces */
.board-skin-premium.board-container .bg-piece.selected {
    box-shadow: 0 0 14px rgba(201,164,74,0.6), 0 0 22px rgba(201,164,74,0.2) !important;
}
.board-skin-premium.board-container .bg-piece.dragging {
    box-shadow: 0 8px 20px rgba(0,0,0,0.5), 0 0 15px rgba(201,164,74,0.3) !important;
}

/* Pieces container - no extra padding */
.board-skin-premium.board-container .bg-pieces {
    padding: 0 !important;
}

/* === POINT NUMBERS === */
.board-skin-premium .bg-point-num {
    color: rgba(100,75,35,0.35) !important;
    text-shadow: none !important;
}

/* === HOME LABEL === */
.board-skin-premium .bg-home-label {
    color: rgba(100,75,35,0.3) !important;
}

/* === DICE - ivory === */
.board-skin-premium .dice-container .dface,
.board-skin-premium .dice3d .dface {
    background: linear-gradient(145deg, #FAF6EE 0%, #F0E8D8 50%, #E0D4C0 100%) !important;
    border: 1px solid rgba(140,120,80,0.3) !important;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 2px 8px rgba(0,0,0,0.3) !important;
}
.board-skin-premium .dice-container .dface .pip,
.board-skin-premium .dice3d .dface .pip {
    background: #2D1A0A !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.2) !important;
}

/* === FLIP BUTTON === */
.board-skin-premium .bg-flip-btn {
    background: linear-gradient(180deg, rgba(107,92,40,0.85), rgba(80,60,24,0.9)) !important;
    border: 1px solid rgba(180,140,50,0.3) !important;
    color: #E8D8A8 !important;
    z-index: 2 !important;
}

/* === BEAROFF TRAY === */
.board-skin-premium .bg-bearoff {
    background: linear-gradient(90deg, #B09060 0%, #BFA070 50%, #B09060 100%) !important;
    border: 1px solid rgba(60,40,15,0.3) !important;
    z-index: 1 !important;
}

/* === HIGHLIGHTS - show valid moves on premium board === */
/* Valid destination - green glow on the point itself */
.board-skin-premium .bg-point.bg-valid-dest .bg-tri {
    visibility: visible !important;
    background: rgba(46,204,64,0.25) !important;
    filter: drop-shadow(0 0 8px rgba(46,204,64,0.5)) !important;
}

/* Move glow from/to */
.board-skin-premium .bg-glow-from .bg-tri {
    visibility: visible !important;
    background: rgba(46,204,64,0.15) !important;
}
.board-skin-premium .bg-glow-to .bg-tri {
    visibility: visible !important;
    background: rgba(46,204,64,0.2) !important;
}

/* General highlight overlay */
.board-skin-premium .bg-highlight {
    background: radial-gradient(circle, rgba(180,140,60,0.45) 0%, rgba(160,120,40,0.2) 60%, transparent 100%) !important;
    border: 2px solid rgba(180,140,60,0.5) !important;
}

/* === CANVAS ELEMENT === */
.board-skin-premium .pm-board-canvas {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 14px;
}

/* === RESPONSIVE: repeat overrides to beat media queries === */
@media (max-width: 600px) {
    .board-skin-premium.board-container .bg-board {
        top: var(--pm-board-top) !important;
        left: var(--pm-board-left) !important;
        right: auto !important;
        bottom: auto !important;
        width: var(--pm-board-w) !important;
        height: var(--pm-board-h) !important;
        background: transparent !important;
        background-image: none !important;
    }
    .board-skin-premium.board-container .bg-bar {
        width: var(--pm-bar-w) !important;
        background: transparent !important;
        background-image: none !important;
    }
    .board-skin-premium.board-container .bg-tri,
    .board-skin-premium .bg-pt-dark .bg-tri,
    .board-skin-premium .bg-pt-light .bg-tri {
        background: transparent !important;
        background-image: none !important;
        visibility: hidden !important;
    }
    .board-skin-premium.board-container .bg-quad {
        padding: 0 0 !important;
    }
    .board-skin-premium.board-container .bg-piece {
        width: var(--pm-piece-size) !important;
        height: var(--pm-piece-size) !important;
    }
}

@media (orientation: portrait) {
    .board-skin-premium.board-container .bg-board {
        top: var(--pm-board-top) !important;
        left: var(--pm-board-left) !important;
        right: auto !important;
        bottom: auto !important;
        width: var(--pm-board-w) !important;
        height: var(--pm-board-h) !important;
        background: transparent !important;
        background-image: none !important;
    }
    .board-skin-premium.board-container .bg-bar {
        width: var(--pm-bar-w) !important;
        background: transparent !important;
        background-image: none !important;
    }
    .board-skin-premium.board-container .bg-tri,
    .board-skin-premium .bg-pt-dark .bg-tri,
    .board-skin-premium .bg-pt-light .bg-tri {
        background: transparent !important;
        background-image: none !important;
        visibility: hidden !important;
    }
    .board-skin-premium.board-container .bg-piece {
        width: var(--pm-piece-size) !important;
        height: var(--pm-piece-size) !important;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .board-skin-premium.board-container .bg-board {
        top: var(--pm-board-top) !important;
        left: var(--pm-board-left) !important;
        right: auto !important;
        bottom: auto !important;
        width: var(--pm-board-w) !important;
        height: var(--pm-board-h) !important;
        background: transparent !important;
        background-image: none !important;
    }
    .board-skin-premium.board-container .bg-bar {
        width: var(--pm-bar-w) !important;
        background: transparent !important;
        background-image: none !important;
    }
    .board-skin-premium.board-container .bg-tri,
    .board-skin-premium .bg-pt-dark .bg-tri,
    .board-skin-premium .bg-pt-light .bg-tri {
        background: transparent !important;
        background-image: none !important;
        visibility: hidden !important;
    }
    .board-skin-premium.board-container .bg-piece {
        width: var(--pm-piece-size) !important;
        height: var(--pm-piece-size) !important;
    }
}

/* === DESKTOP FIX: Prevent premium board from covering player panels === */
@media (min-width: 769px) {
    .board-skin-premium.board-container {
        max-width: calc(100% - 4px) !important;
        margin: 0 auto !important;
    }
    .gm-panel-left,
    .gm-panel-right {
        z-index: 50 !important;
        position: relative !important;
    }
}