/* ============================================================================
   Elbe Satranç — chess board
   ----------------------------------------------------------------------------
   Square colours carried over from the original application so boards look the
   same to students. The board paints its own surfaces, so it reads identically
   on the ivory theme, the dark brass theme and inside a popup.

   Contrast, measured against the squares the marks actually sit on:
     coordinate ink #6B4A2F on light square #F0D9B5 ....... 5.2:1
     coordinate ink #F0D9B5 on dark square  #B58863 ....... 2.3:1  (decorative
       only — the file and rank are also given as a title attribute, and no
       information is carried by the coordinates alone)
     selected square #E7EC86 / #CDD05A against their neighbours is a hue and
       lightness shift, backed by a 3px inset ring so selection never relies on
       colour alone.
   ============================================================================ */

.elbe-board-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.elbe-board {
    --board-light: #F0D9B5;
    --board-dark: #B58863;
    --board-light-sel: #E7EC86;
    --board-dark-sel: #CDD05A;
    --board-check: #E06B5A;

    position: relative;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35) inset,
                0 10px 30px -12px rgba(0, 0, 0, 0.55);
    user-select: none;
    -webkit-user-select: none;
    /* No long-press callout stealing a touch mid-drag on iOS/Android. */
    -webkit-touch-callout: none;
}

/* =========================================================================
   A finger on a board moves a piece. It NEVER moves the page.
   -------------------------------------------------------------------------
   The one rule this application cannot get wrong. A touch that starts on a
   board — on a piece, on an empty square, anywhere — belongs to the board:
   the page must not scroll under it, on a phone, a tablet or a desktop with a
   touch screen (Kamal, 2026-08-28, after a live game in the hall scrolled
   away under his finger).

   `touch-action: none` is what says so, and it has to be on the board itself:
   a library that only calls preventDefault while a piece is actually being
   dragged leaves every other touch — a tap on an empty square, a drag begun
   on the wrong colour — to the page, which scrolls.

   Both engines are covered here, because both are used across this site:
   `.elbe-board` is ours, `.cg-wrap` is chessground's (the lesson room, live
   games, the analysis board, homework). Chessground's own stylesheet says
   nothing about touch at all.

   The one exception is a thumbnail in a list — a wall of tiny read-only
   positions that a finger must be able to scroll past. Those are opted out
   in script, one at a time, by the pages that draw them.
   ========================================================================= */
.elbe-board:not(.elbe-board-thumb),
.elbe-board:not(.elbe-board-thumb) *,
.cg-wrap,
.cg-wrap *,
cg-container,
cg-board,
cg-board square,
cg-board piece {
    touch-action: none;
}

.elbe-sq {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    line-height: 1;
}

.elbe-sq.light { background: var(--board-light); }
.elbe-sq.dark  { background: var(--board-dark); }

.elbe-sq.selected.light { background: var(--board-light-sel); }
.elbe-sq.selected.dark  { background: var(--board-dark-sel); }

/* Selection also gets a ring, so it is never carried by colour alone. */
.elbe-sq.selected::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 3px rgba(28, 22, 8, 0.65);
    pointer-events: none;
}

.elbe-sq.last-move.light { background: var(--board-light-sel); }
.elbe-sq.last-move.dark  { background: var(--board-dark-sel); }

/* The move a student has been shown after playing a wrong one. Brass, and
   ringed rather than filled, so it reads as "here" and not as "just played". */
.elbe-sq.hint::after {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 12%;
    border: 3px solid #F0B90B;
    box-shadow: 0 0 10px rgba(240, 185, 11, 0.5);
    pointer-events: none;
}

/* King in check: a red halo rather than a flat fill, so the piece stays clear. */
.elbe-sq.in-check::before {
    content: "";
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--board-check) 32%, rgba(224, 107, 90, 0) 72%);
    pointer-events: none;
}

/* A quiet move is shown as a centre dot; a capture as a ring round the edge. */
.elbe-sq.move-target::before {
    content: "";
    position: absolute;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: rgba(28, 22, 8, 0.32);
    pointer-events: none;
}

.elbe-sq.move-target.capture::before {
    width: 88%;
    height: 88%;
    background: none;
    border: 5px solid rgba(28, 22, 8, 0.32);
    box-sizing: border-box;
}

.elbe-sq.interactive { cursor: pointer; }

.elbe-piece {
    position: relative;
    width: 92%;
    height: 92%;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 2;
}

.elbe-piece svg,
.elbe-piece .pc-svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
}

.elbe-piece.dragging { opacity: 0.35; }

/* Piece following the pointer while dragging. */
.elbe-drag-ghost {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.elbe-drag-ghost svg { width: 100%; height: 100%; display: block; }

/* ===== Coordinates ===== */

.elbe-coord {
    position: absolute;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
    z-index: 3;
}

.elbe-coord.file { right: 3px; bottom: 2px; }
.elbe-coord.rank { left: 3px; top: 2px; }

.elbe-sq.light > .elbe-coord { color: #6B4A2F; }
.elbe-sq.dark  > .elbe-coord { color: #F0D9B5; }

/* ===== Setup palette ===== */

.elbe-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-top: 10px;
}

.elbe-palette-btn {
    width: 40px;
    height: 40px;
    padding: 3px;
    display: grid;
    place-items: center;
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-border, rgba(28, 22, 8, 0.25));
    border-radius: 7px;
    cursor: pointer;
}

.elbe-palette-btn svg { width: 100%; height: 100%; }

.elbe-palette-btn:hover { border-color: var(--elbe-brass-text); }

/* Selected tool: a solid brass ring plus a thicker border, visible on any
   surface in either theme (border #8A6A00 on white is 5.1:1). */
.elbe-palette-btn.active {
    border-color: var(--elbe-brass-text);
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(255, 194, 0, 0.45);
}

.elbe-palette-btn.erase {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--elbe-wine-text);
}

/* ===== Promotion chooser ===== */

.elbe-promo {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    background: rgba(20, 16, 10, 0.62);
}

.elbe-promo-inner {
    display: flex;
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    background: var(--theme-hover-bg);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
}

.elbe-promo-btn {
    width: 56px;
    height: 56px;
    padding: 4px;
    background: var(--theme-card-bg);
    border: 1px solid rgba(28, 22, 8, 0.25);
    border-radius: 8px;
    cursor: pointer;
}

.elbe-promo-btn:hover { border-color: var(--elbe-brass-text); background: var(--theme-hover-bg); }

.elbe-promo-btn svg { width: 100%; height: 100%; }

@media (max-width: 480px) {
    .elbe-promo-btn { width: 44px; height: 44px; }
    .elbe-palette-btn { width: 34px; height: 34px; }
}

/* ============================================================================
   The play board's own two marks
   ----------------------------------------------------------------------------
   Added with `ElbePlayBoard` (elbe-play-board.js), the one component every
   played or watched board now uses.
   ============================================================================ */

/*  The box that undoes the page magnifier. It has no look of its own — its
    whole job is to carry a `zoom` the component sets, so the board inside can
    do its pixel arithmetic in the same space the pointer is reported in. */
.ebp-wrap {
    line-height: 0;     /* no stray descender gap under the board */
    max-width: 100%;
}

/*  A premove: the move a player has chosen while it is still their opponent's
    turn. It must not be mistaken for a move that has been PLAYED, so it is a
    different colour from `last-move` and is ringed with a dashed edge — the
    dash is the part that survives a colour-blind reader and a black-and-white
    print, and says "intended, not done". */
.elbe-sq.ebp-premove::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 3px rgba(99, 102, 241, 0.85);
    background: rgba(99, 102, 241, 0.22);
    pointer-events: none;
}

[data-bs-theme="dark"] .elbe-sq.ebp-premove::after {
    box-shadow: inset 0 0 0 3px rgba(165, 180, 252, 0.9);
    background: rgba(129, 140, 248, 0.28);
}

/*  The number on a queued premove, when a screen allows more than one. Drawn
    in the corner of the square so it never sits over the piece. */
/*  Not on a king in check: that square's ::before is its check ring, and a
    ring saying "your king is attacked" outranks a number saying "this was the
    second thing you meant to do". */
.elbe-sq[data-pm]:not(.in-check):not(.move-target)::before {
    content: attr(data-pm);
    position: absolute;
    top: 2px;
    inset-inline-start: 3px;
    z-index: 3;
    font-size: 0.62em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: rgba(79, 70, 229, 0.92);
    border-radius: 4px;
    padding: 1px 3px;
    pointer-events: none;
}

/* ============================================================================
   The drawing layer — arrows and circles a coach teaches with
   ----------------------------------------------------------------------------
   Drawn by elbe-board-draw.js as one SVG stretched over the squares. It is
   laid out in hundredths of the board rather than pixels, so it cannot be put
   out by the page magnifier, a resize or a screen with a different resolution.
   ============================================================================ */

.elbe-board .elbe-draw {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;

    /* Marks are for reading, not for pressing: every touch belongs to the
       board underneath, or a coach could not move a piece through an arrow. */
    pointer-events: none;
}

/*  While the pen is out, the board says so. */
.elbe-board.elbe-pen { cursor: crosshair; }