/* plg_content_chessboard - board styling
   Sizing uses container query units (cqw) so pieces scale for both
   fixed-size and responsive boards. */

.cb-root {
    --cb-size: 440px;
    --cb-max: 480px;
    --cb-light: #f0d9b5;
    --cb-dark: #b58863;
    --cb-hl: rgba(255, 214, 0, 0.5);
    --cb-accent: #3b7ddd;

    display: inline-block;
    max-width: 100%;
    margin: 1rem 0;
    font-family: inherit;
}

.cb-root.cb-responsive {
    display: block;
    width: 100%;
    max-width: var(--cb-max);
}

/* ---- Board ---- */
.cb-board {
    width: var(--cb-size);
    max-width: 100%;
    container-type: inline-size;
}

.cb-root.cb-responsive .cb-board {
    width: 100%;
}

.cb-grid {
    position: relative;              /* kotva pre vrstvu s anotáciami */
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    aspect-ratio: 1 / 1;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

.cb-sq {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cb-light { background: var(--cb-light); }
.cb-dark  { background: var(--cb-dark); }

.cb-hl::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cb-hl);
    pointer-events: none;
}

/* ---- Pieces ---- */
.cb-piece {
    position: relative;
    z-index: 1;
    line-height: 1;
    font-size: 9.8cqw;       /* ~0.78 of a square */
    user-select: none;
    pointer-events: none;
}

/* The filled unicode pawn glyph looks chunky next to the others, so trim it. */
.cb-piece.cb-p-p:not(.cb-img) { font-size: 8.4cqw; }

.cb-white {
    color: #ffffff;
    text-shadow:
        -1px -1px 0 #2b2b2b, 1px -1px 0 #2b2b2b,
        -1px  1px 0 #2b2b2b, 1px  1px 0 #2b2b2b,
         0    0   2px #000;
}

.cb-black {
    color: #262626;
    text-shadow:
        -1px -1px 0 #e6e6e6, 1px -1px 0 #e6e6e6,
        -1px  1px 0 #e6e6e6, 1px  1px 0 #e6e6e6,
         0    0   1px #fff;
}

/* Image piece sets (when piece_base_url is configured) */
.cb-piece.cb-img {
    width: 92%;
    height: 92%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-shadow: none;
}

/* ---- Coordinates ---- */
.cb-coord {
    position: absolute;
    font-size: 2.6cqw;
    font-weight: 700;
    line-height: 1;
    color: rgba(20, 20, 20, 0.75);
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.6);
    pointer-events: none;
    z-index: 2;
}

.cb-rank { top: 3%; left: 4%; }
.cb-file { bottom: 3%; right: 5%; }

/* ---- Controls ---- */
.cb-controls {
    display: flex;
    gap: 6px;
    align-items: stretch;
    margin-top: 8px;
    width: var(--cb-size);
    max-width: 100%;
}

.cb-root.cb-responsive .cb-controls {
    width: 100%;
}

.cb-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 6px 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    background: #fff;
    color: var(--cb-accent);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.cb-btn:hover:not(:disabled) {
    background: var(--cb-accent);
    color: #fff;
}

.cb-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.cb-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* first/prev/next/last use filled triangles */
.cb-btn[data-act="first"] svg path,
.cb-btn[data-act="prev"] svg path,
.cb-btn[data-act="next"] svg path,
.cb-btn[data-act="last"] svg path {
    fill: currentColor;
}

.cb-movelabel {
    flex: 2 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 8px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Caption / note ---- */
.cb-caption {
    margin-top: 8px;
    font-size: 0.9em;
    color: #555;
    text-align: center;
    max-width: var(--cb-size);
}

.cb-root.cb-responsive .cb-caption {
    max-width: 100%;
}

.cb-note {
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 0.85em;
    color: #7a5b00;
    background: #fff6db;
    border: 1px solid #f0e0a0;
    border-radius: 6px;
    max-width: var(--cb-size);
}

/* ---- Themes ---- */
.cb-theme-brown { --cb-light: #f0d9b5; --cb-dark: #b58863; }
.cb-theme-blue  { --cb-light: #dee3e6; --cb-dark: #8ca2ad; }
.cb-theme-green { --cb-light: #ffffdd; --cb-dark: #86a666; }
.cb-theme-gray  { --cb-light: #ececec; --cb-dark: #a0a0a0; }
.cb-theme-wood  { --cb-light: #e8c99b; --cb-dark: #a56b3d; }

/* ---- Play vs engine ---- */
.cb-status {
    margin-top: 8px;
    min-height: 1.4em;
    font-weight: 600;
    color: #333;
    max-width: var(--cb-size);
    text-align: center;
}

.cb-root.cb-responsive .cb-status {
    max-width: 100%;
}

.cb-play-controls .cb-wide { flex: 2 1 0; font-weight: 600; }

.cb-sel {
    box-shadow: inset 0 0 0 3px var(--cb-accent);
}

.cb-target {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 30%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    pointer-events: none;
    z-index: 3;
}

.cb-target.cb-capture {
    width: 82%;
    height: 82%;
    background: transparent;
    border: 5px solid rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
}

.cb-check {
    background: radial-gradient(circle at center,
                rgba(255, 40, 40, 0.9) 0%,
                rgba(255, 40, 40, 0.55) 45%,
                transparent 72%) !important;
}

/* Squares are clickable in play mode */
.cb-play .cb-sq { cursor: pointer; }

/* ---- Drag & drop ---- */
.cb-play .cb-sq .cb-piece { cursor: grab; }
.cb-play .cb-grid { touch-action: none; }   /* prst ťahá figúrku, nescrolluje stránku */

.cb-ghost {
    cursor: grabbing;
    opacity: 0.95;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ---- Anotácie: zvýraznené polia, šípky, krúžky ---- */
.cb-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    overflow: visible;
}

/* Farebná paleta anotácií */
.cb-c-green  { --cb-mc: #21a04a; }
.cb-c-red    { --cb-mc: #d0342c; }
.cb-c-blue   { --cb-mc: #2f6fd0; }
.cb-c-yellow { --cb-mc: #e0a800; }
.cb-c-orange { --cb-mc: #e2711d; }

.cb-arrow {
    stroke: var(--cb-mc, #21a04a);
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: 0.85;
    vector-effect: non-scaling-stroke;
}

.cb-arrow-head { fill: var(--cb-mc, #21a04a); opacity: 0.85; }

.cb-circle {
    fill: none;
    stroke: var(--cb-mc, #21a04a);
    stroke-width: 1.6;
    opacity: 0.9;
    vector-effect: non-scaling-stroke;
}

/* Zvýraznené pole — farebná vrstva pod figúrkou */
.cb-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cb-mc, #21a04a);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}

.cb-mark-green  { --cb-mc: #21a04a; }
.cb-mark-red    { --cb-mc: #d0342c; }
.cb-mark-blue   { --cb-mc: #2f6fd0; }
.cb-mark-yellow { --cb-mc: #e8c000; }
.cb-mark-orange { --cb-mc: #e2711d; }