/* ============================================================================
 * cgl-board.css — Shared Chess Global League board chrome.
 *
 * Reproduces the polished vote-chess board UI/UX (vote-chess-room.php) as a
 * reusable, board-id-agnostic stylesheet. Scope everything under `.cgl-board`
 * (the chessboard.js container element must carry that class).
 *
 * Pairs with js/cgl-board.js. Light + dark (.cgl-dark) themes supported.
 * Built for chessboard.js 1.0.0 internal class names.
 * ========================================================================== */

/* Centered, responsive board wrapper. */
.cgl-board-wrap { position: relative; width: 100%; max-width: 480px; margin: 0 auto; }

/* Hint arrow overlay (see CglBoard._arrowsEl / _arrowMarkup in cgl-board.js).
   Same 100x100 viewBox technique as vote-chess-room.php's .vc-arrows: each
   square's centre maps to (col*12.5+6.25, row*12.5+6.25), read from the live
   DOM rect so it's pixel-perfect regardless of chessboard.js' rounding. */
.cgl-arrows {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 5; overflow: visible; display: block;
}
.cgl-arrows line { stroke-linecap: round; opacity: .85; }
.cgl-arrows polygon { opacity: .85; }
.cgl-arrows .arr-hint { stroke: #28a745; fill: #28a745; }

.cgl-board { width: 100%; margin: 0; }

/* Block page scroll/zoom while dragging a piece on touch devices, and stop
   long-press image callouts / selection on the pieces. */
.cgl-board { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cgl-board img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; pointer-events: auto; }
/* chessboard.js appends the dragged piece <img> to document.body — match it
   by src so its long-press callout is suppressed there too. */
img[src*="chesspieces"] { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }

/* Promote squares to their own compositor layer so inset box-shadow
   highlights don't flicker while scrolling on mobile WebKit. */
.cgl-board .square-55d63 {
    position: relative;
    transform: translateZ(0);
    -webkit-tap-highlight-color: transparent;
}

/* Legal-move dots shown while a piece is selected / dragged. */
.cgl-board .square-55d63.cgl-hl-legal::after {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 28%; height: 28%; border-radius: 50%; background: rgba(0, 123, 255, .55);
    pointer-events: none; z-index: 1;
}
.cgl-board .square-55d63.cgl-hl-legal-cap::after {
    content: ""; position: absolute; inset: 6%; border-radius: 50%;
    background: transparent; border: 4px solid rgba(0, 123, 255, .65);
    pointer-events: none; z-index: 1;
}
.cgl-dark .cgl-board .square-55d63.cgl-hl-legal::after { background: rgba(56, 144, 255, .7); }
.cgl-dark .cgl-board .square-55d63.cgl-hl-legal-cap::after { border-color: rgba(56, 144, 255, .8); }

/* Square highlights overlaid on chessboard.js squares. */
.cgl-board .square-55d63.cgl-hl-last  { box-shadow: inset 0 0 0 4px rgba(255, 193, 7, .85); }
.cgl-board .square-55d63.cgl-hl-mine  { box-shadow: inset 0 0 0 4px rgba(0, 123, 255, .85); }
.cgl-board .square-55d63.cgl-hl-sel   { box-shadow: inset 0 0 0 4px rgba(0, 123, 255, .85); }
.cgl-board .square-55d63.cgl-hl-hover { box-shadow: inset 0 0 0 4px rgba(0, 123, 255, .55); }
/* Engine / hint suggestion: drawn as an arrow overlay (see .cgl-arrows below),
   not a square highlight. */

/* chessboard.js' built-in yellow drag/source highlights clash with our blue
   scheme — re-tint them to blue. Do NOT touch background-color here: this
   selector (3 classes) is more specific than chessboard.js' own
   .white-1e1d7/.black-3c85d square-color rules (2 classes) regardless of
   cascade order, so setting background-color to anything (even `inherit`)
   overrides the square's real color with the parent's (transparent)
   background the moment a piece is picked up — making the board look
   "see-through" while dragging. */
.cgl-board .square-55d63.highlight1-32417,
.cgl-board .square-55d63.highlight2-9c5d2 {
    box-shadow: inset 0 0 0 4px rgba(0, 123, 255, .85) !important;
}

/* Smaller, corner-pinned notation so it never covers the piece on mobile. */
.cgl-board .notation-322f9 {
    font-size: 10px; font-weight: 600; opacity: .8;
    pointer-events: none; z-index: 0;
}
.cgl-board .alpha-d2270 { font-size: 10px; }
.cgl-board .numeric-fcc59 { font-size: 10px; }
@media (max-width: 600px) {
    .cgl-board .notation-322f9 { font-size: 8px; opacity: .65; padding: 1px 2px; }
}

/* Dark-mode board: keep wikipedia pieces but tint squares to the theme. */
.cgl-dark .cgl-board .white-1e1d7 { background-color: #b8b8b0; }
.cgl-dark .cgl-board .black-3c85d { background-color: #6e6e63; }
.cgl-dark .cgl-board .notation-322f9 { color: #f0f0f0; }

/* Freeze overscroll while dragging; reserve scrollbar gutter to avoid layout
   shift that would make the dragged piece miss its target square. */
body.cgl-dragging { overscroll-behavior: contain; }

/* ── Board answer flash animation (correct / wrong feedback) ─────────────── */
/* Applied by JS to .cgl-board-wrap after the user's move is judged. */
.cgl-board-wrap.flash-ok  { animation: cgl-flash-ok  1.8s ease forwards; }
.cgl-board-wrap.flash-err { animation: cgl-flash-err 1.8s ease forwards; }
@keyframes cgl-flash-ok {
    0%   { box-shadow: 0 0 0 0   rgba(40, 167, 69, 0);   }
    15%  { box-shadow: 0 0 0 6px rgba(40, 167, 69, .95); }
    75%  { box-shadow: 0 0 0 6px rgba(40, 167, 69, .85); }
    100% { box-shadow: 0 0 0 0   rgba(40, 167, 69, 0);   }
}
@keyframes cgl-flash-err {
    0%   { box-shadow: 0 0 0 0   rgba(220, 53, 69, 0);   }
    15%  { box-shadow: 0 0 0 6px rgba(220, 53, 69, .95); }
    75%  { box-shadow: 0 0 0 6px rgba(220, 53, 69, .85); }
    100% { box-shadow: 0 0 0 0   rgba(220, 53, 69, 0);   }
}

/* ── Trainer toolbar (dark + sound toggle buttons) ───────────────────────── */
.trn-tools {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    margin-bottom: .5rem;
}
/* Fixed size so toggling an icon (moon/sun, volume-up/mute, expand/compress —
   FontAwesome glyphs have different intrinsic widths) never changes the
   button's box size / reflows its neighbours. */
.trn-tools .btn {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* ── Fullscreen board toggle (mobile only) ───────────────────────────────── */
/* The button is hidden on tablets/desktops where the board is already large.
   Selector must be at least as specific as ".trn-tools .btn" above (which
   sets display:inline-flex), otherwise that rule wins and the button shows
   on all screen sizes regardless of this media query. */
.trn-tools .cgl-fs-btn { display: none; }
@media (max-width: 767px) {
    .trn-tools .cgl-fs-btn { display: inline-flex; }
}

/* Fullscreen (mobile): the board-wrap + toolbar are promoted to position:fixed
   IN PLACE (never reparented — reparenting breaks chessboard.js), with a plain
   backdrop behind them. Only the board and the toggle buttons are shown. */
.cgl-fs-backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2990;
    background: #fff;
    touch-action: none;
    overscroll-behavior: none;
}
body.cgl-dark .cgl-fs-backdrop { background: #181a22; }

/* Board centered on screen, sized to the viewport (override any inline max-width).
   NOTE: we deliberately avoid `transform` for centering — a transformed
   ancestor breaks chessboard.js' jQuery .offset() math, which corrupts touch
   tap detection (click-to-move) and piece animations. margin:auto on a fixed,
   square box centers it on both axes without any transform. */
.cgl-board-wrap.cgl-fs-on {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    width: min(96vw, calc(100vh - 90px)) !important;
    max-width: min(96vw, calc(100vh - 90px)) !important;
    height: min(96vw, calc(100vh - 90px)) !important;
    z-index: 3000 !important;
    touch-action: none !important;
    overscroll-behavior: none;
}

/* Toolbar pinned to the top-right corner. */
.trn-tools.cgl-fs-on {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + .6rem);
    right: calc(env(safe-area-inset-right, 0px) + .6rem);
    margin: 0 !important;
    z-index: 3001 !important;
}

/* Prevent page scroll behind the fullscreen board. touch-action:none is
   critical: while fullscreen, chessboard.js appends the dragged piece <img> to
   <body>. Without this the browser claims the touch gesture as a scroll, which
   makes touchmove non-cancelable ([Intervention] warning) and breaks dragging,
   tap-to-move and animations. Handing all touch gestures to JS fixes it. */
body.cgl-fs-active { overflow: hidden; touch-action: none; overscroll-behavior: none; }
body.cgl-fs-active img { touch-action: none; }

/* chessboard.js appends BOTH the dragged piece and the sliding-animation piece
   directly to <body> (see animateSquareToSquare / initDOM). Our fullscreen
   board-wrap has z-index:3000 which would paint OVER those body-level pieces,
   making the dragged piece invisible and every move animation look like an
   instant teleport. Lift the body-appended pieces above the board. They are
   uniquely identifiable as <img data-piece> direct children of <body>. */
body.cgl-fs-active > img[data-piece] { z-index: 3300 !important; }

/* ── "X to move" turn indicators — ensure readability in any theme ─────── */
/* These appear in calibration (.cal-turn) and puzzles (.pz-turn).
   Give them a distinct background so they're readable over any surface. */
.cal-turn, .pz-turn {
    background: rgba(0,0,0,.04);
    border-radius: 6px;
    padding: .3rem .6rem;
    display: inline-block;
    margin: 0 auto .6rem;
}
/* White dot must always be visible — add a fallback border */
.cal-turn .dot.w, .pz-turn .dot.w {
    border: 1.5px solid #adb5bd;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

/* ── Full-page dark mode for all Trainer pages ───────────────────────────── */
/* Triggered by CglTheme (cgl-board.js) adding body.cgl-dark.              */
/* Uses same body.cgl-dark convention as the .cgl-dark selectors above.    */

body.cgl-dark {
    background: #181a22;
    color: #e2e4e9;
}
/* Navbar */
body.cgl-dark .navbar-light { background: #1e2028 !important; }
body.cgl-dark .navbar-light .navbar-brand,
body.cgl-dark .navbar-light .nav-link { color: #c8cdd8 !important; }
body.cgl-dark .navbar-light .nav-link:hover { color: #fff !important; }
body.cgl-dark .navbar-toggler-icon { filter: invert(.8); }

/* ── Page wrappers ── */
body.cgl-dark .trn-wrap,
body.cgl-dark .pz-wrap,
body.cgl-dark .cal-wrap,
body.cgl-dark .sp-wrap,
body.cgl-dark .op-wrap,
body.cgl-dark .eg-wrap,
body.cgl-dark .an-wrap { color: #e2e4e9; }

/* ── Cards & panels ── */
body.cgl-dark .trn-card,
body.cgl-dark .trn-stat,
body.cgl-dark .trn-panel,
body.cgl-dark .trn-recent,
body.cgl-dark .pz-card,
body.cgl-dark .sp-card,
body.cgl-dark .sp-rec,
body.cgl-dark .op-card,
body.cgl-dark .eg-card,
body.cgl-dark .an-card,
body.cgl-dark .cal-result {
    background: #252830;
    border-color: #363a45;
    color: #e2e4e9;
}
body.cgl-dark .trn-card h3,
body.cgl-dark .trn-stat .val,
body.cgl-dark .sp-card h3,
body.cgl-dark .eg-card h3,
body.cgl-dark .an-card h3,
body.cgl-dark .cal-result h2 { color: #e2e4e9; }

/* ── Subtitles / secondary text ── */
body.cgl-dark .trn-hero .lead,
body.cgl-dark .sp-hero p,
body.cgl-dark .pz-hero p,
body.cgl-dark .cal-hero p,
body.cgl-dark .eg-hero p,
body.cgl-dark .op-hero p,
body.cgl-dark .an-hero p,
body.cgl-dark .trn-stat .label,
body.cgl-dark .trn-nochart,
body.cgl-dark .cal-result p,
body.cgl-dark .eg-card p,
body.cgl-dark .op-line .mv,
body.cgl-dark .sp-rec .acc,
body.cgl-dark .sp-rec .dt { color: #a0a8b4; }

/* ── Turn / feedback ── */
body.cgl-dark .cal-turn,
body.cgl-dark .pz-turn { background: rgba(255,255,255,.07); color: #e2e4e9; }
body.cgl-dark .cal-turn .dot.w,
body.cgl-dark .pz-turn .dot.w { background: #e2e4e9; border-color: #8a9099; box-shadow: none; }
body.cgl-dark .cal-turn .dot.b,
body.cgl-dark .pz-turn .dot.b { background: #181a22; border-color: #8a9099; }

body.cgl-dark .pz-feedback.neutral { color: #a0a8b4; }
body.cgl-dark .pz-feedback.correct { color: #69e87d; }
body.cgl-dark .pz-feedback.incorrect { color: #ff7d8a; }
body.cgl-dark .cal-feedback.correct  { color: #69e87d; }
body.cgl-dark .cal-feedback.incorrect { color: #ff7d8a; }
body.cgl-dark .sp-status { color: #e2e4e9; }

/* ── Progress bars ── */
body.cgl-dark .trn-xp-bar,
body.cgl-dark .cal-progress-bar { background: #2e3039; }

/* ── Badges / pills ── */
body.cgl-dark .pz-pill { background: #2e3039; color: #b0b8c4; }
body.cgl-dark .trn-badge { background: #252830; border-color: #363a45; }
body.cgl-dark .trn-badge .b-name { color: #e2e4e9; }
body.cgl-dark .trn-badge:not(.earned) .b-name { color: #5a6070; }
body.cgl-dark .trn-badge .b-desc { color: #5a6070; }

/* ── Activity heatmap ── */
body.cgl-dark .trn-heat .cell       { background: #2e3039; }
body.cgl-dark .trn-heat .cell.l1   { background: #1a4a2a; }
body.cgl-dark .trn-heat .cell.l2   { background: #1e6632; }
body.cgl-dark .trn-heat .cell.l3   { background: #28a745; }
body.cgl-dark .trn-heat .cell.l4   { background: #34d05a; }

/* ── Recent games table ── */
body.cgl-dark .trn-games th { color: #8a9099; border-color: #363a45; }
body.cgl-dark .trn-games td { color: #e2e4e9; border-color: #2e3039; }

/* ── Forms ── */
body.cgl-dark .form-control,
body.cgl-dark select.form-control {
    background: #1e2028;
    color: #e2e4e9;
    border-color: #363a45;
}
body.cgl-dark .form-control:focus,
body.cgl-dark select.form-control:focus {
    background: #252830;
    color: #fff;
    border-color: #5b6aff;
    box-shadow: 0 0 0 3px rgba(91,106,255,.25);
}

/* ── Sparring pre-game mode/color selectors ── */
body.cgl-dark .sp-mode,
body.cgl-dark .sp-color {
    background: #252830;
    border-color: #363a45;
    color: #e2e4e9;
}
body.cgl-dark .sp-mode:hover,
body.cgl-dark .sp-color:hover { border-color: #5b6aff; }
body.cgl-dark .sp-mode.active,
body.cgl-dark .sp-color.active { border-color: #5b6aff; background: #1d2238; }
body.cgl-dark .sp-mode .m-name { color: #e2e4e9; }
body.cgl-dark .sp-mode .m-desc { color: #a0a8b4; }
body.cgl-dark .sp-mode .m-elo { color: #8fb8ff; }
body.cgl-dark .sp-color-black-icon { color: #e2e4e9; }
body.cgl-dark .sp-label { color: #a0a8b4; }

/* ── Sparring move list ── */
body.cgl-dark .sp-moves-wrap { background: #252830; border-color: #363a45; }
body.cgl-dark .sp-moves-wrap .hd { color: #a0a8b4; border-color: #363a45; }
body.cgl-dark .sp-moves td { color: #e2e4e9; }
body.cgl-dark .sp-moves td.n { color: #6a7280; }
body.cgl-dark .sp-moves tr:nth-child(odd) { background: rgba(255,255,255,.04); }

/* ── Opening lines ── */
body.cgl-dark .op-line { background: #252830; border-color: #363a45; }
body.cgl-dark .op-line .nm { color: #e2e4e9; }
body.cgl-dark .op-empty { color: #5a6070; }
body.cgl-dark .op-col-h { color: #a0a8b4; }
body.cgl-dark .op-stat .lbl { color: #a0a8b4; }
body.cgl-dark .op-stat .num { color: #e2e4e9; }

/* ── Calibration brackets ── */
body.cgl-dark .cal-bracket {
    background: #252830;
    border-color: #363a45;
    color: #e2e4e9;
}
body.cgl-dark .cal-bracket h3 { color: #e2e4e9; }
body.cgl-dark .cal-bracket p  { color: #a0a8b4; }
body.cgl-dark .cal-bracket:hover { border-color: #20c997; }
body.cgl-dark .cal-note { background: #1e2e42; border-color: #2a4a6a; color: #9ac4e8; }

/* ── Analysis ── */
body.cgl-dark .an-pgn { background: #1e2028; border-color: #363a45; color: #e2e4e9; }
body.cgl-dark .an-pgn::placeholder { color: #5a6070; }
body.cgl-dark .an-move { color: #e2e4e9; }
body.cgl-dark .an-move-pair:hover { background: rgba(255,255,255,.04); }

/* ── Bootstrap overrides for dark context ── */
body.cgl-dark .btn-outline-secondary {
    color: #b0b8c4;
    border-color: #4a5060;
}
body.cgl-dark .btn-outline-secondary:hover {
    background: #363a45;
    color: #e2e4e9;
    border-color: #5a6070;
}
body.cgl-dark .btn-outline-secondary.active {
    background: #363a45;
    color: #fff;
    border-color: #5a6070;
}
body.cgl-dark .alert-info {
    background: #1a2c42;
    border-color: #253d5a;
    color: #7dbcea;
}
body.cgl-dark hr { border-color: #363a45; }
body.cgl-dark .text-muted { color: #6a7280 !important; }