/* The corner controls are never larger than half a board square (--board-square is set by the frame) and
   draw an L-shaped border on the card's corner. The card is as wide on every side as that border
   (--board-strip = --board-corner-line), so a control's box overlaps the board's corner square; on phones there is no card and only the strips above
   and below the board remain. */
chess-board-frame { display: block; position: relative; z-index: 1; flex-shrink: 0; max-width: 100%; --board-corner: max(24px, min(32px, calc(var(--board-square, 84px) / 2))); --board-corner-line: min(4px, calc(var(--board-corner) / 8)); --board-corner-color: #94a3b8; --board-strip: var(--board-corner-line); --board-base-x: var(--board-strip); --board-inset-x: var(--board-base-x); --board-inset-y: var(--board-strip); }
chess-board-frame { --board-inset-b: var(--board-inset-y); }
/* On touch screens the vendor board enlarges a dragged piece 2.4x so a finger does not hide it; 10% is enough here. */
chess-board-frame g-chess-board { --piece-drag-coarse-scale: 1.1; }
chess-board-frame.board-wrap { padding: var(--board-inset-y) var(--board-inset-x) var(--board-inset-b); }
/* Without outside labels the card around the board is only a strip for the corner controls: it has no surface and the
   board takes the card's rounded corners (the card radius less the strip), so nothing is clipped outside the board.
   The board's own 1px inner border would show as a hairline along the straight edges but not in the curve, so it is dropped. */
chess-board-frame.board-wrap:is([data-coordinates="hidden"], [data-coordinates="inside"]) { background: transparent; border-color: transparent; box-shadow: none; }
chess-board-frame.board-wrap:is([data-coordinates="hidden"], [data-coordinates="inside"]) g-chess-board { --inner-border-width: 0px; border-radius: var(--board-radius, 16px); overflow: hidden; }
/* Without the resize handle there is no bottom strip on phones. */
chess-board-frame[data-resizable="false"] { --board-inset-b: calc(var(--board-inset-y) - var(--board-strip) + var(--board-base-x)); }
chess-board-frame[data-resizable="false"] .board-resize { display: none; }
chess-board-frame .board-resize {
  --resize-color: var(--board-corner-color);
  position: absolute; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: flex-end; justify-content: flex-end;
  width: var(--board-corner); height: var(--board-corner); min-height: 0; padding: 0;
  border: 0; border-right: var(--board-corner-line) solid var(--resize-color); border-bottom: var(--board-corner-line) solid var(--resize-color); border-radius: 0; border-bottom-right-radius: inherit;
  background: transparent; box-shadow: none; color: var(--resize-color);
  cursor: nwse-resize; touch-action: none;
}
chess-board-frame[sizing="manual"] .board-resize { --resize-color: var(--accent-dark); }
chess-board-frame .board-resize:hover { background: transparent; color: var(--resize-color); border-color: var(--resize-color); }
chess-board-frame .board-resize:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
chess-board-frame:fullscreen { width: 100vw !important; max-width: none; }
chess-board-frame:fullscreen .board-resize { display: none; }
/* External labels reserve frame space without changing the board's square geometry. */
chess-board-frame.board-wrap[data-coordinates="outside"],
chess-board-frame.board-wrap[data-coordinates="outside-uppercase"],
chess-board-frame.board-wrap[data-coordinates="emoji"] {
  /* The frame keeps its height: what the labels take from the board's height is added to the strips,
     so the page does not re-center and the corner controls stay where they are. */
  --board-inset-x: calc(var(--board-label, 32px) * 1.7);
  --board-inset-y: calc(var(--board-strip) + var(--board-inset-x) - var(--board-base-x));
  box-sizing: border-box;
}
/* Label sizes are em values of --board-label, which the frame derives from the square size. */
chess-board-frame .board-rails { position: absolute; pointer-events: none; font-size: var(--board-label, 32px); line-height: 1; font-family: system-ui, sans-serif; font-weight: 700; color: var(--ink, #243629); }
chess-board-frame .board-rail-file, chess-board-frame .board-rail-rank { position: absolute; display: flex; align-items: center; justify-content: center; }
chess-board-frame :is(button.board-rail-file, button.board-rail-rank) { padding: 0; border: 0; border-radius: .25em; background: transparent; font: inherit; color: inherit; cursor: pointer; pointer-events: auto; }
chess-board-frame :is(button.board-rail-file, button.board-rail-rank)[aria-pressed="true"] { background: var(--board-line, rgba(255, 200, 0, .55)); }
chess-board-frame .board-rail-grid { position: absolute; pointer-events: none; }
chess-board-frame .board-rail-line { position: absolute; background: var(--board-line, rgba(255, 200, 0, .3)); pointer-events: none; }
/* Where a picked file and rank meet: a stronger fill with an outline that stays visible over any square colour. */
chess-board-frame .board-rail-cross { position: absolute; box-sizing: border-box; background: var(--board-cross, rgba(255, 140, 0, .55)); border: max(2px, .12em) solid var(--ink, #243629); pointer-events: none; }
chess-board-frame .board-rail-file { top: calc(100% + .2em); height: 1.3em; }
@media (pointer: coarse) { chess-board-frame button.board-rail-file { height: max(1.3em, 44px); } chess-board-frame button.board-rail-rank { width: max(1.3em, 44px); } }
chess-board-frame .board-rail-rank { right: calc(100% + .25em); width: 1.3em; }
/* Corner controls share geometry and reveal behavior; each occupies its own corner cell. */
chess-board-frame :is(.board-coordinates, .board-style, .board-color) {
  position: absolute; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  width: var(--board-corner); height: var(--board-corner); min-height: 0; padding: 0; font-size: 0; line-height: 1;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer;
}
chess-board-frame .board-coordinates { left: 0; top: 0; padding-left: 2px; border-left: var(--board-corner-line) solid var(--board-corner-color); border-top: var(--board-corner-line) solid var(--board-corner-color); border-top-left-radius: inherit; }
chess-board-frame :is(.board-coordinates, .board-style)[aria-pressed="true"] { border-color: var(--accent-dark); }
chess-board-frame .board-style { right: 0; top: 0; border-right: var(--board-corner-line) solid var(--board-corner-color); border-top: var(--board-corner-line) solid var(--board-corner-color); border-top-right-radius: inherit; padding-right: 2px; }
chess-board-frame .board-color { left: 0; bottom: 0; border-left: var(--board-corner-line) solid var(--board-corner-color); border-bottom: var(--board-corner-line) solid var(--board-corner-color); border-bottom-left-radius: inherit; padding-left: 2px; }
chess-board-frame :is(.board-coordinates, .board-style, .board-color):focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
chess-board-frame .board-color[data-color="green"] { color: #15781b; }
chess-board-frame .board-color[data-color="red"] { color: #e53935; }
chess-board-frame .board-color[data-color="blue"] { color: #1976d2; }
chess-board-frame .board-color[data-color="yellow"] { color: #f9a825; }
chess-board-frame :is(.board-coordinates, .board-style, .board-color):disabled { cursor: default; opacity: .4; }
chess-board-frame :is(.board-coordinates, .board-style, .board-color):focus-visible,
chess-board-frame[data-revealed] :is(.board-coordinates, .board-style, .board-color) { font-size: calc(var(--board-corner) * .6); }
@media (hover: none) {
  chess-board-frame :is(.board-style, .board-color) { display: none; }
  chess-board-frame .board-coordinates { transition: border-color .2s; }
  chess-board-frame:not([data-revealed]) .board-coordinates { border-color: transparent; }
}
@media (hover: hover) {
  chess-board-frame :is(.board-coordinates, .board-style, .board-color):hover { font-size: calc(var(--board-corner) * .6); }
}

/* Board status stays with the frame rather than the action toolbar. It sits outside the
   board with a small gap: beside it at the bottom on desktop, below it at the right on phones. */
chess-board-frame > chess-toolbar.board-turn-controls {
  position: absolute; z-index: 31;
  left: calc(100% + 8px); bottom: 0; right: auto; top: auto;
  width: max-content; margin: 0; padding: 0; transform: none;
  /* Görünmez tooltip kutudan taşıyıp toolbar'a kaydırma çubuğu ekliyordu. */
  overflow: visible;
}
/* In fullscreen the turn bar moves inside the stage's bottom-right corner, since the frame fills the screen and its usual side spot is off-screen. */
chess-board-frame:fullscreen > chess-toolbar.board-turn-controls { left: auto; top: auto; right: 12px; bottom: 12px; }
/* Every button in the corner bar is medium in fullscreen, including the small turn indicator. */
chess-board-frame:fullscreen > chess-toolbar.board-turn-controls chess-button { --icon-btn-size: 46px; --icon-svg-size: 23px; }
/* Preserve the historical indicator-only row while it is visible. */
@media (max-width: 600px) {
  chess-board-frame > chess-toolbar.board-turn-controls { left: auto; right: 0; top: calc(100% + 8px); bottom: auto; }
  chess-board-frame:has(> chess-toolbar.board-turn-controls:not([hidden])) { margin-bottom: 34px; }
}
/* Small phones show the board without the light panel surrounding it. */
@media (max-width: 600px) {
  chess-board-frame.board-wrap {
    --board-pad: 0px;
    --board-base-x: var(--board-pad);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    /* No strips either: the board reaches the screen edges. */
    --board-strip: 0px;
    --board-radius: 0px;
  }
  chess-board-frame:has(> chess-toolbar.board-turn-controls:not([hidden])) { margin-bottom: calc(37.4px + 8px); }
  chess-board-frame > chess-toolbar.board-turn-controls { left: auto; right: 0; top: calc(100% + 8px); bottom: auto; }
  chess-board-frame :is(.board-resize, .board-coordinates, .board-style, .board-color) { display: none; }
}
chess-board-frame:fullscreen :is(.board-coordinates, .board-style, .board-color) { display: none; }
@media print {
  chess-board-frame :is(.board-resize, .board-coordinates, .board-style, .board-color) { display: none; }
}


/* The board's own right-click marks use the plain drawing style of the position editor: a rounded line with a
   triangular head for arrows, a thin square outline for squares. Sizes follow --mark-unit (8 / side length) so a 3 x 3 board keeps the proportions of an 8 x 8 one. Green by default; Shift/Ctrl, Alt and both change the colour. */
:is(.annotation-overlay, .annotation-underlay) > span { position: absolute; inset: 0; }
:is(.annotation-overlay, .annotation-underlay) svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.position-arrow-layer svg { pointer-events: none; }
.position-arrowhead { stroke: none !important; }
.position-arrowhead--plain { fill: #15781b !important; }
/* One opacity for the whole layer, like Lichess, so the shaft does not darken where it meets the head. */
.position-arrow-layer--plain svg { opacity: .76; }
.position-highlight-layer svg { pointer-events: none; }
.position-plain-arrow { fill: none; stroke: #15781b; stroke-width: calc(1.95 * var(--mark-unit, 1)); stroke-linecap: round; }
.position-plain-highlight { fill: none; stroke: #15781b; stroke-width: calc(1.4 * var(--mark-unit, 1)); opacity: .76; }
.position-arrow-layer--plain.is-preview .position-plain-arrow { stroke-width: calc(1.2 * var(--mark-unit, 1)); }
.position-highlight-layer--plain.is-preview .position-plain-highlight { stroke-width: calc(.9 * var(--mark-unit, 1)); }
.position-arrow-layer[data-mark-color="red"] .position-plain-arrow { stroke: #e53935; }
.position-arrow-layer[data-mark-color="blue"] .position-plain-arrow { stroke: #1976d2; }
.position-arrow-layer[data-mark-color="yellow"] .position-plain-arrow { stroke: #f9a825; }
.position-arrow-layer[data-mark-color="red"] .position-arrowhead { fill: #e53935 !important; }
.position-arrow-layer[data-mark-color="blue"] .position-arrowhead { fill: #1976d2 !important; }
.position-arrow-layer[data-mark-color="yellow"] .position-arrowhead { fill: #f9a825 !important; }
.position-highlight-layer[data-mark-color="red"] .position-plain-highlight { stroke: #e53935; }
.position-highlight-layer[data-mark-color="blue"] .position-plain-highlight { stroke: #1976d2; }
.position-highlight-layer[data-mark-color="yellow"] .position-plain-highlight { stroke: #f9a825; }

/* The other drawing styles of the position editor (assets/js/board-drawings.js renders them on every board). */
.position-plain-route svg path { stroke: #15781b; stroke-width: 2.6; opacity: .76; }
.position-plain-route svg circle { fill: #15781b; stroke: none; opacity: .5; }
.position-plain-route .position-plain-preview-arrow { stroke-width: 1.35; }
.position-plain-route .position-plain-preview-head { fill: #15781b; stroke: none; opacity: .76; }
.position-magic-route svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.position-magic-glow { stroke: #fff3a3; stroke-width: 2.2; opacity: .4; filter: drop-shadow(0 0 1px var(--magic-shadow, #ffd12b)); }
.position-magic-trail { stroke: #ffe65a; stroke-width: .8; stroke-dasharray: .2 2.4; animation: position-route-flow 2.5s linear infinite; }
.position-magic-star { position: absolute; width: var(--route-size, 3.4%); aspect-ratio: 1; background: var(--route-color, #ffe878); clip-path: polygon(50% 0, 62% 34%, 98% 38%, 71% 61%, 80% 97%, 50% 78%, 20% 97%, 29% 61%, 2% 38%, 38% 34%); transform: translate(-50%, -50%); animation: position-route-twinkle 1.8s ease-in-out infinite; animation-delay: var(--route-delay, 0s); }
@keyframes position-route-flow { to { stroke-dashoffset: -10.4; } }
@keyframes position-route-twinkle { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.7) rotate(-10deg); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(20deg); } }
.position-arrowhead--magic { fill: #ffe878 !important; opacity: .4; }
.position-arrowhead--contrast { fill: #f59e0b !important; stroke: #263746 !important; stroke-width: .45; stroke-linejoin: round; }
.position-arrow-layer[data-mark-color="green"] .position-magic-glow, .position-arrow-layer[data-mark-color="green"] .position-magic-trail,
.position-highlight-layer[data-mark-color="green"] .position-magic-glow, .position-highlight-layer[data-mark-color="green"] .position-magic-trail { stroke: #15781b; --magic-shadow: #15781b; }
.position-arrow-layer[data-mark-color="green"] .position-arrowhead--magic { fill: #15781b !important; }
.position-arrow-layer[data-mark-color="red"] .position-magic-glow, .position-arrow-layer[data-mark-color="red"] .position-magic-trail,
.position-highlight-layer[data-mark-color="red"] .position-magic-glow, .position-highlight-layer[data-mark-color="red"] .position-magic-trail { stroke: #e53935; --magic-shadow: #e53935; }
.position-arrow-layer[data-mark-color="blue"] .position-magic-glow, .position-arrow-layer[data-mark-color="blue"] .position-magic-trail,
.position-highlight-layer[data-mark-color="blue"] .position-magic-glow, .position-highlight-layer[data-mark-color="blue"] .position-magic-trail { stroke: #1976d2; --magic-shadow: #1976d2; }
.position-arrow-layer[data-mark-color="yellow"] .position-magic-glow, .position-arrow-layer[data-mark-color="yellow"] .position-magic-trail,
.position-highlight-layer[data-mark-color="yellow"] .position-magic-glow, .position-highlight-layer[data-mark-color="yellow"] .position-magic-trail { stroke: #f9a825; --magic-shadow: #f9a825; }
.position-arrow-layer[data-mark-color="red"] .position-contrast-trail, .position-arrow-layer[data-mark-color="red"] .position-contrast-head,
.position-highlight-layer[data-mark-color="red"] .position-contrast-frame { stroke: #e53935; fill: #e53935; }
.position-arrow-layer[data-mark-color="blue"] .position-contrast-trail, .position-arrow-layer[data-mark-color="blue"] .position-contrast-head,
.position-highlight-layer[data-mark-color="blue"] .position-contrast-frame { stroke: #1976d2; fill: #1976d2; }
.position-arrow-layer[data-mark-color="yellow"] .position-contrast-trail, .position-arrow-layer[data-mark-color="yellow"] .position-contrast-head,
.position-highlight-layer[data-mark-color="yellow"] .position-contrast-frame { stroke: #f9a825; fill: #f9a825; }
.position-contrast-route svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.position-contrast-outline { stroke: #263746; stroke-width: 2.2; }
.position-contrast-trail { stroke: #f59e0b; stroke-width: 1; }
.position-contrast-frame { stroke: #f59e0b; stroke-width: 1.1; }
.position-contrast-head { fill: #f59e0b; stroke: #263746; stroke-width: .45; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .position-magic-trail, .position-magic-star { animation: none; } }
.playful-drawing { --playful-color: var(--drawing-preview-color, #ec4899); }
.playful-route { stroke: var(--playful-color); stroke-width: .65; opacity: .65; fill: none; }
.position-arrow-layer[data-mark-color="red"], .position-highlight-layer[data-mark-color="red"] { --drawing-preview-color: #e53935; }
.position-arrow-layer[data-mark-color="blue"], .position-highlight-layer[data-mark-color="blue"] { --drawing-preview-color: #1976d2; }
.position-arrow-layer[data-mark-color="yellow"], .position-highlight-layer[data-mark-color="yellow"] { --drawing-preview-color: #f9a825; }
.playful-candy-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 3.4px; text-anchor: middle; dominant-baseline: central; fill: initial; stroke: none; }
.playful-drawing--candy .playful-route { stroke-width: .45; stroke-dasharray: .2 1.2; opacity: .6; }
.position-dashed-line { fill: none; stroke: var(--lesson-mark-color, var(--drawing-preview-color, #15781b)); stroke-width: 2.1; stroke-dasharray: 2.2 2; stroke-linecap: butt; }
/* Eight dashes on a 10.2 square, one centred on each corner and each edge middle: 3.1 on + 2 off = 5.1, shifted back half a dash. */
.position-dashed-line--square { stroke-width: 1.5; stroke-dasharray: 3.1 2; stroke-dashoffset: 1.55; stroke-linejoin: miter; }
.position-dashed-head { fill: none; stroke: var(--lesson-mark-color, var(--drawing-preview-color, #15781b)); stroke-width: 1.5; }
.position-chalk-underlay { fill: none; stroke: #263746; stroke-width: 2.2; opacity: .38; }
.position-chalk-line { fill: none; stroke: var(--lesson-mark-color, var(--drawing-preview-color, #fff8dc)); stroke-width: 1.8; opacity: .95; }
.position-chalk-grain { fill: none; stroke: #fff8dc; stroke-width: .65; stroke-dasharray: .15 .65 .35 1.1; opacity: .8; }
.position-chalk-head { fill: none; stroke: var(--lesson-mark-color, var(--drawing-preview-color, #fff8dc)); stroke-width: 2.6; }
/* Marks still being drawn are thinner than finished ones; they reach full width when committed. */
:is(.position-arrow-layer, .position-highlight-layer).is-preview .position-magic-glow { stroke-width: 1.4; }
:is(.position-arrow-layer, .position-highlight-layer).is-preview .position-magic-trail { stroke-width: .5; }
:is(.position-arrow-layer, .position-highlight-layer).is-preview .position-contrast-outline { stroke-width: 1.4; }
:is(.position-arrow-layer, .position-highlight-layer).is-preview .position-contrast-trail { stroke-width: .65; }
:is(.position-arrow-layer, .position-highlight-layer).is-preview .position-contrast-frame { stroke-width: .7; }
:is(.position-arrow-layer, .position-highlight-layer).is-preview .position-dashed-line { stroke-width: 1.3; }
:is(.position-arrow-layer, .position-highlight-layer).is-preview .position-dashed-line--square { stroke-width: 1; }
:is(.position-arrow-layer, .position-highlight-layer).is-preview .position-dashed-head { stroke-width: 1; }
:is(.position-arrow-layer, .position-highlight-layer).is-preview .position-chalk-underlay { stroke-width: 1.4; }
:is(.position-arrow-layer, .position-highlight-layer).is-preview .position-chalk-line { stroke-width: 1.1; }
:is(.position-arrow-layer, .position-highlight-layer).is-preview .position-chalk-head { stroke-width: 1.6; }
:is(.position-arrow-layer, .position-highlight-layer).is-preview .position-chalk-grain { stroke-width: .4; }
:is(.position-arrow-layer, .position-highlight-layer)[data-mark-color="red"] { --lesson-mark-color: #e53935; }
:is(.position-arrow-layer, .position-highlight-layer)[data-mark-color="blue"] { --lesson-mark-color: #1976d2; }
:is(.position-arrow-layer, .position-highlight-layer)[data-mark-color="yellow"] { --lesson-mark-color: #f9a825; }

/* Board settings dialog, opened from the settings button below the board. */
chess-board-frame dialog.board-settings {
  width: min(22rem, calc(100vw - 2rem)); box-sizing: border-box; padding: 1rem 1.1rem 1.2rem;
  border: 1px solid var(--panel-border, #d6d0c4); border-radius: 18px; background: var(--panel-bg, #fffaf0); color: var(--ink, #243629);
  box-shadow: 0 18px 40px rgba(var(--shell-shadow, 40, 30, 10), .25); font-family: system-ui, sans-serif;
}
chess-board-frame dialog.board-settings::backdrop { background: rgba(20, 20, 20, .35); }
chess-board-frame .board-settings header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
chess-board-frame .board-settings h2 { margin: 0; font-size: 1.15rem; }
chess-board-frame .board-settings h3 { margin: 1rem 0 .5rem; font-size: .95rem; }
chess-board-frame .board-settings-close { width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 1.6rem; line-height: 1; color: inherit; cursor: pointer; }
chess-board-frame .board-settings-options { display: grid; gap: .4rem; }
chess-board-frame .board-settings-option {
  display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .5rem .8rem; text-align: left;
  border: 2px solid transparent; border-radius: 12px; background: rgba(0, 0, 0, .05); color: inherit; font: inherit; cursor: pointer;
}
chess-board-frame .board-settings-feedback { margin-top: 1rem; width: 100%; box-sizing: border-box; }
chess-board-frame .board-settings-option[aria-pressed="true"] { border-color: var(--accent-dark); background: rgba(0, 0, 0, .02); font-weight: 700; }
chess-board-frame .board-settings :is(.board-settings-close, .board-settings-option):focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; }

@media (pointer: coarse) {
  chess-board-frame { --board-corner: 44px; }
  chess-board-frame .board-settings :is(button) { min-width: 44px; min-height: 44px; }
  chess-board-frame .board-settings-options { gap: 8px; }
}

/* Fullscreen board stage: only the board is enlarged (the page decides which element goes fullscreen). */
chess-board-frame:fullscreen {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  padding: 12px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--body-bg, #f6f4ef);
}
chess-board-frame:fullscreen g-chess-board { width: min(calc(100vw - 24px), calc(100dvh - 24px)); }
/* Outside labels hang left of and below the board, so the stage reserves their room (the frame derives --board-label from the square size). */
chess-board-frame:fullscreen:is([data-coordinates="outside"], [data-coordinates="outside-uppercase"], [data-coordinates="emoji"]) {
  --board-labels: calc(var(--board-label, 32px) * 1.7);
  padding: 12px 12px calc(12px + var(--board-labels)) calc(12px + var(--board-labels));
}
chess-board-frame:fullscreen:is([data-coordinates="outside"], [data-coordinates="outside-uppercase"], [data-coordinates="emoji"]) g-chess-board {
  width: min(calc(100vw - 24px - var(--board-labels)), calc(100dvh - 24px - var(--board-labels)));
}
chess-board-frame::backdrop { background: var(--body-bg, #f6f4ef); }

/* A game page in fullscreen keeps its toolbar (the fullscreen element is the board's `.layout`, else its page `main`): the board takes the room the controls leave (side strip, or a bottom strip on phones). */
:is(.layout, main):fullscreen {
  box-sizing: border-box; width: 100vw; height: 100dvh; padding: 12px; overflow: hidden;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  background: var(--body-bg, #f6f4ef);
}
:is(.layout, main):fullscreen::backdrop { background: var(--body-bg, #f6f4ef); }
/* A page with a visible side panel keeps it in fullscreen: the frame sizes itself beside the panel (`--board-side-reserve`), and a panel that wraps below the board scrolls. */
:is(.layout, main):fullscreen:has(aside:not([hidden])) { overflow: auto; align-items: safe center; }
:is(.layout, main):fullscreen > .pgn-layout { width: 100%; }
:is(.layout, main):fullscreen:not(.position-shell):not(:has(aside:not([hidden]))) chess-board-frame { width: min(calc(100dvh - 24px), calc(100vw - 24px - var(--fullscreen-controls, 96px))) !important; }
@media (max-width: 600px) {
  :is(.layout, main):fullscreen { flex-direction: column; justify-content: center; }
  :is(.layout, main):fullscreen:not(.position-shell):not(:has(aside:not([hidden]))) chess-board-frame { width: min(calc(100vw - 24px), calc(100dvh - 24px - var(--fullscreen-controls, 96px))) !important; }
}

/* Calisma enlarges its whole page, since closing a question swaps the board for the list inside the same stage; the list scrolls. */
#calisma-app:fullscreen { overflow: auto; align-items: safe center; }

/* The position editor scrolls in fullscreen: the page only gets bigger, nothing is hidden. */
.position-shell:fullscreen { overflow: auto; align-items: flex-start; }
.position-shell:fullscreen .position-layout { width: 100%; }

/* Explicit marking tools sit in normal flow, above the playable cells. */
.board-marking-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0 0 12px;
  color: var(--ink);
}
.board-marking-tools[hidden] { display: none; }
.board-marking-tools > chess-button[data-action="mark-done"] { margin-inline-start: auto; }
.board-marking-status { flex: 0 0 100%; min-width: 0; color: var(--muted); font: 400 .78rem/1.4 system-ui, sans-serif; overflow-wrap: anywhere; }
g-chess-board[data-marking] { touch-action: none; cursor: crosshair; }
@media print { .board-marking-tools { display: none; } }