/* ============================================
   Chessground - lichess board styles
   Adapted for ChessClub component
   Mandatory DOM structure (created by chessground):
       .cg-wrap (the element passed to Chessground)
         cg-helper      (12.5% width, padding-bottom 12.5%)
           cg-container (800% × 800%)
             cg-board   (100% × 100%)
               square… (12.5% × 12.5%)
               piece…  (12.5% × 12.5%, positioned with translate)
   ============================================ */

.cg-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
}

cg-helper {
    position: absolute;
    width: 12.5%;
    padding-bottom: 12.5%;
    display: table;
    bottom: 0;
}

cg-container {
    position: absolute;
    width: 800%;
    height: 800%;
    display: block;
    bottom: 0;
}

cg-board {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 0;
    background-size: cover;
    cursor: pointer;
}

cg-board square {
    position: absolute;
    top: 0;
    left: 0;
    width: 12.5%;
    height: 12.5%;
    pointer-events: none;
}

cg-board square.move-dest {
    background: radial-gradient(rgba(20,85,30,0.5) 19%, rgba(0,0,0,0) 20%);
    pointer-events: auto;
}

cg-board square.premove-dest {
    background: radial-gradient(rgba(20,30,85,0.4) 19%, rgba(0,0,0,0) 20%);
}

cg-board square.oc.move-dest {
    background: radial-gradient(transparent 0%, transparent 80%, rgba(20,85,0,0.3) 80%);
}

cg-board square.oc.premove-dest {
    background: radial-gradient(transparent 0%, transparent 80%, rgba(20,30,85,0.2) 80%);
}

cg-board square.move-dest:hover {
    background: rgba(20,85,30,0.3);
}

cg-board square.premove-dest:hover {
    background: rgba(20,30,85,0.2);
}

cg-board square.last-move {
    will-change: transform;
    background-color: rgba(155,199,0,0.41);
}

cg-board square.selected {
    background-color: rgba(20,85,30,0.5);
}

cg-board square.check {
    background: radial-gradient(ellipse at center, rgba(255,0,0,1) 0%, rgba(231,0,0,1) 25%, rgba(169,0,0,0) 89%, rgba(158,0,0,0) 100%);
}

cg-board square.current-premove {
    background-color: rgba(20,30,85,0.5);
}

.cg-wrap piece {
    position: absolute;
    top: 0;
    left: 0;
    width: 12.5%;
    height: 12.5%;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
    will-change: transform;
    pointer-events: none;
}

cg-board piece.dragging {
    cursor: move;
    z-index: 11 !important;
}

cg-board piece.anim {
    z-index: 8;
}

cg-board piece.fading {
    z-index: 1;
    opacity: 0.5;
}

.cg-wrap piece.ghost {
    opacity: 0.3;
}

.cg-wrap svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9;
    opacity: 0.6;
}

.cg-wrap svg image {
    opacity: 0.5;
}

.cg-wrap coords {
    position: absolute;
    display: flex;
    pointer-events: none;
    opacity: 0.95;
    font-family: sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--cc-text, #222);
}

.cg-wrap coords.ranks {
    right: -14px;
    top: 0;
    flex-flow: column-reverse;
    height: 100%;
    width: 12px;
    text-align: center;
}

.cg-wrap coords.ranks.black {
    flex-flow: column;
}

.cg-wrap coords.files {
    bottom: -16px;
    left: 0;
    flex-flow: row;
    width: 100%;
    height: 14px;
    text-transform: lowercase;
    text-align: center;
}

.cg-wrap coords.files.black {
    flex-flow: row-reverse;
}

.cg-wrap coords coord {
    flex: 1 1 auto;
}

.cg-wrap coords.ranks coord {
    transform: translateY(39%);
}

/* ============================================
   Board themes - SVG checkerboard backgrounds
   ============================================ */
.cc-theme-brown cg-board {
    background-color: #f0d9b5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><rect width='1' height='1' x='1' y='0' fill='%23b58863'/><rect width='1' height='1' x='3' y='0' fill='%23b58863'/><rect width='1' height='1' x='5' y='0' fill='%23b58863'/><rect width='1' height='1' x='7' y='0' fill='%23b58863'/><rect width='1' height='1' x='0' y='1' fill='%23b58863'/><rect width='1' height='1' x='2' y='1' fill='%23b58863'/><rect width='1' height='1' x='4' y='1' fill='%23b58863'/><rect width='1' height='1' x='6' y='1' fill='%23b58863'/><rect width='1' height='1' x='1' y='2' fill='%23b58863'/><rect width='1' height='1' x='3' y='2' fill='%23b58863'/><rect width='1' height='1' x='5' y='2' fill='%23b58863'/><rect width='1' height='1' x='7' y='2' fill='%23b58863'/><rect width='1' height='1' x='0' y='3' fill='%23b58863'/><rect width='1' height='1' x='2' y='3' fill='%23b58863'/><rect width='1' height='1' x='4' y='3' fill='%23b58863'/><rect width='1' height='1' x='6' y='3' fill='%23b58863'/><rect width='1' height='1' x='1' y='4' fill='%23b58863'/><rect width='1' height='1' x='3' y='4' fill='%23b58863'/><rect width='1' height='1' x='5' y='4' fill='%23b58863'/><rect width='1' height='1' x='7' y='4' fill='%23b58863'/><rect width='1' height='1' x='0' y='5' fill='%23b58863'/><rect width='1' height='1' x='2' y='5' fill='%23b58863'/><rect width='1' height='1' x='4' y='5' fill='%23b58863'/><rect width='1' height='1' x='6' y='5' fill='%23b58863'/><rect width='1' height='1' x='1' y='6' fill='%23b58863'/><rect width='1' height='1' x='3' y='6' fill='%23b58863'/><rect width='1' height='1' x='5' y='6' fill='%23b58863'/><rect width='1' height='1' x='7' y='6' fill='%23b58863'/><rect width='1' height='1' x='0' y='7' fill='%23b58863'/><rect width='1' height='1' x='2' y='7' fill='%23b58863'/><rect width='1' height='1' x='4' y='7' fill='%23b58863'/><rect width='1' height='1' x='6' y='7' fill='%23b58863'/></svg>");
    background-size: 100% 100%;
}

.cc-theme-blue cg-board {
    background-color: #dee3e6;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><rect width='1' height='1' x='1' y='0' fill='%23788a94'/><rect width='1' height='1' x='3' y='0' fill='%23788a94'/><rect width='1' height='1' x='5' y='0' fill='%23788a94'/><rect width='1' height='1' x='7' y='0' fill='%23788a94'/><rect width='1' height='1' x='0' y='1' fill='%23788a94'/><rect width='1' height='1' x='2' y='1' fill='%23788a94'/><rect width='1' height='1' x='4' y='1' fill='%23788a94'/><rect width='1' height='1' x='6' y='1' fill='%23788a94'/><rect width='1' height='1' x='1' y='2' fill='%23788a94'/><rect width='1' height='1' x='3' y='2' fill='%23788a94'/><rect width='1' height='1' x='5' y='2' fill='%23788a94'/><rect width='1' height='1' x='7' y='2' fill='%23788a94'/><rect width='1' height='1' x='0' y='3' fill='%23788a94'/><rect width='1' height='1' x='2' y='3' fill='%23788a94'/><rect width='1' height='1' x='4' y='3' fill='%23788a94'/><rect width='1' height='1' x='6' y='3' fill='%23788a94'/><rect width='1' height='1' x='1' y='4' fill='%23788a94'/><rect width='1' height='1' x='3' y='4' fill='%23788a94'/><rect width='1' height='1' x='5' y='4' fill='%23788a94'/><rect width='1' height='1' x='7' y='4' fill='%23788a94'/><rect width='1' height='1' x='0' y='5' fill='%23788a94'/><rect width='1' height='1' x='2' y='5' fill='%23788a94'/><rect width='1' height='1' x='4' y='5' fill='%23788a94'/><rect width='1' height='1' x='6' y='5' fill='%23788a94'/><rect width='1' height='1' x='1' y='6' fill='%23788a94'/><rect width='1' height='1' x='3' y='6' fill='%23788a94'/><rect width='1' height='1' x='5' y='6' fill='%23788a94'/><rect width='1' height='1' x='7' y='6' fill='%23788a94'/><rect width='1' height='1' x='0' y='7' fill='%23788a94'/><rect width='1' height='1' x='2' y='7' fill='%23788a94'/><rect width='1' height='1' x='4' y='7' fill='%23788a94'/><rect width='1' height='1' x='6' y='7' fill='%23788a94'/></svg>");
    background-size: 100% 100%;
}

.cc-theme-green cg-board {
    background-color: #ebecd0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><rect width='1' height='1' x='1' y='0' fill='%23739552'/><rect width='1' height='1' x='3' y='0' fill='%23739552'/><rect width='1' height='1' x='5' y='0' fill='%23739552'/><rect width='1' height='1' x='7' y='0' fill='%23739552'/><rect width='1' height='1' x='0' y='1' fill='%23739552'/><rect width='1' height='1' x='2' y='1' fill='%23739552'/><rect width='1' height='1' x='4' y='1' fill='%23739552'/><rect width='1' height='1' x='6' y='1' fill='%23739552'/><rect width='1' height='1' x='1' y='2' fill='%23739552'/><rect width='1' height='1' x='3' y='2' fill='%23739552'/><rect width='1' height='1' x='5' y='2' fill='%23739552'/><rect width='1' height='1' x='7' y='2' fill='%23739552'/><rect width='1' height='1' x='0' y='3' fill='%23739552'/><rect width='1' height='1' x='2' y='3' fill='%23739552'/><rect width='1' height='1' x='4' y='3' fill='%23739552'/><rect width='1' height='1' x='6' y='3' fill='%23739552'/><rect width='1' height='1' x='1' y='4' fill='%23739552'/><rect width='1' height='1' x='3' y='4' fill='%23739552'/><rect width='1' height='1' x='5' y='4' fill='%23739552'/><rect width='1' height='1' x='7' y='4' fill='%23739552'/><rect width='1' height='1' x='0' y='5' fill='%23739552'/><rect width='1' height='1' x='2' y='5' fill='%23739552'/><rect width='1' height='1' x='4' y='5' fill='%23739552'/><rect width='1' height='1' x='6' y='5' fill='%23739552'/><rect width='1' height='1' x='1' y='6' fill='%23739552'/><rect width='1' height='1' x='3' y='6' fill='%23739552'/><rect width='1' height='1' x='5' y='6' fill='%23739552'/><rect width='1' height='1' x='7' y='6' fill='%23739552'/><rect width='1' height='1' x='0' y='7' fill='%23739552'/><rect width='1' height='1' x='2' y='7' fill='%23739552'/><rect width='1' height='1' x='4' y='7' fill='%23739552'/><rect width='1' height='1' x='6' y='7' fill='%23739552'/></svg>");
    background-size: 100% 100%;
}

.cc-theme-grey cg-board {
    background-color: #e8e8e8;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><rect width='1' height='1' x='1' y='0' fill='%23909090'/><rect width='1' height='1' x='3' y='0' fill='%23909090'/><rect width='1' height='1' x='5' y='0' fill='%23909090'/><rect width='1' height='1' x='7' y='0' fill='%23909090'/><rect width='1' height='1' x='0' y='1' fill='%23909090'/><rect width='1' height='1' x='2' y='1' fill='%23909090'/><rect width='1' height='1' x='4' y='1' fill='%23909090'/><rect width='1' height='1' x='6' y='1' fill='%23909090'/><rect width='1' height='1' x='1' y='2' fill='%23909090'/><rect width='1' height='1' x='3' y='2' fill='%23909090'/><rect width='1' height='1' x='5' y='2' fill='%23909090'/><rect width='1' height='1' x='7' y='2' fill='%23909090'/><rect width='1' height='1' x='0' y='3' fill='%23909090'/><rect width='1' height='1' x='2' y='3' fill='%23909090'/><rect width='1' height='1' x='4' y='3' fill='%23909090'/><rect width='1' height='1' x='6' y='3' fill='%23909090'/><rect width='1' height='1' x='1' y='4' fill='%23909090'/><rect width='1' height='1' x='3' y='4' fill='%23909090'/><rect width='1' height='1' x='5' y='4' fill='%23909090'/><rect width='1' height='1' x='7' y='4' fill='%23909090'/><rect width='1' height='1' x='0' y='5' fill='%23909090'/><rect width='1' height='1' x='2' y='5' fill='%23909090'/><rect width='1' height='1' x='4' y='5' fill='%23909090'/><rect width='1' height='1' x='6' y='5' fill='%23909090'/><rect width='1' height='1' x='1' y='6' fill='%23909090'/><rect width='1' height='1' x='3' y='6' fill='%23909090'/><rect width='1' height='1' x='5' y='6' fill='%23909090'/><rect width='1' height='1' x='7' y='6' fill='%23909090'/><rect width='1' height='1' x='0' y='7' fill='%23909090'/><rect width='1' height='1' x='2' y='7' fill='%23909090'/><rect width='1' height='1' x='4' y='7' fill='%23909090'/><rect width='1' height='1' x='6' y='7' fill='%23909090'/></svg>");
    background-size: 100% 100%;
}

.cc-theme-purple cg-board {
    background-color: #ebe2f4;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><rect width='1' height='1' x='1' y='0' fill='%238476ba'/><rect width='1' height='1' x='3' y='0' fill='%238476ba'/><rect width='1' height='1' x='5' y='0' fill='%238476ba'/><rect width='1' height='1' x='7' y='0' fill='%238476ba'/><rect width='1' height='1' x='0' y='1' fill='%238476ba'/><rect width='1' height='1' x='2' y='1' fill='%238476ba'/><rect width='1' height='1' x='4' y='1' fill='%238476ba'/><rect width='1' height='1' x='6' y='1' fill='%238476ba'/><rect width='1' height='1' x='1' y='2' fill='%238476ba'/><rect width='1' height='1' x='3' y='2' fill='%238476ba'/><rect width='1' height='1' x='5' y='2' fill='%238476ba'/><rect width='1' height='1' x='7' y='2' fill='%238476ba'/><rect width='1' height='1' x='0' y='3' fill='%238476ba'/><rect width='1' height='1' x='2' y='3' fill='%238476ba'/><rect width='1' height='1' x='4' y='3' fill='%238476ba'/><rect width='1' height='1' x='6' y='3' fill='%238476ba'/><rect width='1' height='1' x='1' y='4' fill='%238476ba'/><rect width='1' height='1' x='3' y='4' fill='%238476ba'/><rect width='1' height='1' x='5' y='4' fill='%238476ba'/><rect width='1' height='1' x='7' y='4' fill='%238476ba'/><rect width='1' height='1' x='0' y='5' fill='%238476ba'/><rect width='1' height='1' x='2' y='5' fill='%238476ba'/><rect width='1' height='1' x='4' y='5' fill='%238476ba'/><rect width='1' height='1' x='6' y='5' fill='%238476ba'/><rect width='1' height='1' x='1' y='6' fill='%238476ba'/><rect width='1' height='1' x='3' y='6' fill='%238476ba'/><rect width='1' height='1' x='5' y='6' fill='%238476ba'/><rect width='1' height='1' x='7' y='6' fill='%238476ba'/><rect width='1' height='1' x='0' y='7' fill='%238476ba'/><rect width='1' height='1' x='2' y='7' fill='%238476ba'/><rect width='1' height='1' x='4' y='7' fill='%238476ba'/><rect width='1' height='1' x='6' y='7' fill='%238476ba'/></svg>");
    background-size: 100% 100%;
}

/* ============================================
   Highlight styles (last move)
   ============================================ */
.cc-hl-none cg-board square.last-move { background-color: transparent; }
.cc-hl-square cg-board square.last-move { background-color: rgba(155,199,0,0.41); }
.cc-hl-arrow cg-board square.last-move { background-color: transparent; }
.cc-hl-arrow cg-board square.last-move::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(155,199,0,0.7);
    pointer-events: none;
}
.cc-hl-both cg-board square.last-move { background-color: rgba(155,199,0,0.41); }
.cc-hl-both cg-board square.last-move::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(60,120,0,0.5);
    pointer-events: none;
}