/*
 * Chessboard styles. The board fills its container's width and stays square;
 * size it by sizing the container. Piece images come from a separate piece-set
 * stylesheet (pieces/*.css) defining .osb-piece.wK, .osb-piece.bQ, ...
 */

.osb {
    --osb-light: #e9edf2;
    --osb-dark: #8fa3b4;
    --osb-last: rgba(155, 199, 0, 0.41);
    --osb-selected: rgba(20, 85, 30, 0.5);
    --osb-dest: rgba(20, 85, 30, 0.5);
    --osb-hover: rgba(20, 85, 30, 0.3);
    --osb-check: rgba(230, 30, 30, 0.95);
    --osb-coord-on-light: #6d8396;
    --osb-coord-on-dark: #eef2f6;

    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    container-type: inline-size;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 20px rgba(0, 0, 0, 0.14);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    cursor: default;
}

.osb > * {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.osb-squares {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    display: block;
}
.osb-light { fill: var(--osb-light); }
.osb-dark { fill: var(--osb-dark); }

/* Anything that occupies one square: placed with transform: translate(x*100%, y*100%). */
.osb-sq,
.osb-piece {
    position: absolute;
    top: 0;
    left: 0;
    width: 12.5%;
    height: 12.5%;
}

/* ---- coordinates */

.osb-coord {
    font: 600 max(9px, 2.6cqi)/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    padding: 0.28em 0.32em;
    box-sizing: border-box;
    display: flex;
}
.osb-coord.on-light { color: var(--osb-coord-on-light); }
.osb-coord.on-dark { color: var(--osb-coord-on-dark); }
.osb-coord.osb-file { align-items: flex-end; justify-content: flex-end; }
.osb-coord.osb-rank { align-items: flex-start; justify-content: flex-start; }

/* ---- highlights */

.osb-last { background: var(--osb-last); }
.osb-selected { background: var(--osb-selected); }
.osb-check {
    background: radial-gradient(circle, var(--osb-check) 0%, rgba(230, 30, 30, 0.55) 30%, rgba(200, 0, 0, 0) 72%);
}
.osb-dest {
    background: radial-gradient(circle, var(--osb-dest) 17%, transparent 18.5%);
}
.osb-dest.osb-occupied {
    background: radial-gradient(circle, transparent 69%, var(--osb-dest) 70.5%);
}
.osb-hover { background: var(--osb-hover); }
.osb-hover[hidden] { display: none; }

/* ---- pieces */

.osb-piece {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    will-change: transform;
}
.osb-anim { z-index: 1; }
.osb-fading { z-index: 0; }

.osb-dragging {
    z-index: 4;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}
/* Under a finger the piece would be hidden: board.js enlarges it, growing upwards. */
.osb-dragging.osb-touch { transform-origin: 50% 85%; }

.osb.osb-is-dragging { cursor: grabbing; }

/* ---- shapes (arrows and circles) */

.osb-shapes {
    width: 100%;
    height: 100%;
    z-index: 3;
    overflow: visible;
}
.osb-shape { opacity: 0.8; }
.osb-shape.osb-preview { opacity: 0.45; }
.osb-shape line {
    stroke-width: 0.16;
    stroke-linecap: round;
}
.osb-shape circle {
    fill: none;
    stroke-width: 0.075;
}
.osb-brush-green { stroke: #15781b; fill: #15781b; }
.osb-brush-red { stroke: #b0281f; fill: #b0281f; }
.osb-brush-blue { stroke: #1d4fa8; fill: #1d4fa8; }
.osb-brush-yellow { stroke: #e68f00; fill: #e68f00; }
marker path { stroke: none; }

/* ---- promotion picker */

.osb > .osb-promotion {
    z-index: 5;
    pointer-events: auto;
    background: rgba(20, 28, 36, 0.55);
    border-radius: inherit;
}
.osb-promotion[hidden] { display: none; }
.osb-promo-choice {
    display: flex;
    align-items: center;
    justify-content: center;
}
.osb-promo-choice::before {
    content: "";
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 35%, #c9d3dc 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: border-radius 0.12s, background 0.12s;
}
.osb-promo-choice .osb-piece {
    position: relative;
    width: 82%;
    height: 82%;
    transition: transform 0.12s;
}
@media (hover: hover) {
    .osb-promo-choice:hover::before { border-radius: 12%; background: #ffd75e; }
    .osb-promo-choice:hover .osb-piece { transform: scale(1.08); }
}