/* Satranç board: the look of satranc.yasinalev.com (flat squares, coordinates inside the edge squares, Cburnett pieces)
   in four colourings (Tahta: Mavi, Yeşil, Ahşap, Gri), the players' bars and the move list beside the board on a wide
   screen, above and below it on a tall one. Motion is transform only; body.reduced-motion and prefers-reduced-motion
   disable it. */
.satranc {
  --satranc-sq: 56px;
  --satranc-side: 200px;
  --satranc-gap: 14px;
  --satranc-bar: 0px;
  --satranc-span: 448px;
  --satranc-light: #ebeff9;
  --satranc-dark: #9ab0df;
  --satranc-coord-on-light: #577bca;
  --satranc-last: rgba(19, 122, 75, .26);
  --satranc-pick: rgba(19, 122, 75, .46);
  --satranc-dot: rgba(30, 44, 72, .3);
  --satranc-danger: #c62828;
  --satranc-alarm: #b02222;
  display: grid;
  grid-template-columns: var(--satranc-span) var(--satranc-side);
  grid-template-rows: var(--satranc-span);
  place-content: center;
  gap: var(--satranc-gap);
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  color: var(--navy, #0b1628);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Board colours (satranc.js looks; the reference site's blue is Mavi). Yellow marks the last move on the others.
   The setup's Tahta buttons share them for their swatches. */
[data-choice="satrancBoard"] { --satranc-light: #ebeff9; --satranc-dark: #9ab0df; }
:is(.satranc[data-board="yesil"], [data-choice="satrancBoard"][data-value="yesil"]) { --satranc-light: #e9edcc; --satranc-dark: #7c9a5a; --satranc-coord-on-light: #5b7a3c; --satranc-last: rgba(246, 222, 70, .55); --satranc-pick: rgba(246, 222, 70, .85); }
:is(.satranc[data-board="ahsap"], [data-choice="satrancBoard"][data-value="ahsap"]) { --satranc-light: #f1ddb8; --satranc-dark: #b5845a; --satranc-coord-on-light: #93653f; --satranc-last: rgba(247, 206, 79, .6); --satranc-pick: rgba(247, 206, 79, .9); }
:is(.satranc[data-board="gri"], [data-choice="satrancBoard"][data-value="gri"]) { --satranc-light: #e6e8ec; --satranc-dark: #9aa1ad; --satranc-coord-on-light: #6b7380; --satranc-last: rgba(246, 222, 70, .55); --satranc-pick: rgba(246, 222, 70, .85); }
/* Tall: the opponent's bar, the board, the near player's bar, then the move strip; spare height stays below. */
.satranc[data-layout="tall"] { grid-template-columns: var(--satranc-span); grid-template-rows: none; grid-auto-rows: auto; align-content: start; }
.satranc[data-layout="tall"] .satranc-side { display: contents; }
.satranc[data-layout="tall"] .satranc-stage { order: -1; height: var(--satranc-span); }
.satranc[data-layout="tall"] .satranc-bar[data-bar="far"] { order: -2; }
.satranc[data-layout="tall"] .satranc-side > :not(.satranc-bar) { order: 1; }
.satranc[data-layout="tall"] .satranc-bar { height: var(--satranc-bar); }

/* ---------- Board and its coordinates ---------- */
.satranc-stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; contain: size; }
.satranc-frame { position: relative; overflow: hidden; border-radius: 6px; box-shadow: var(--shadow-md, 0 6px 18px rgba(11, 22, 40, .18)); }
.satranc-board {
  display: grid;
  grid-template-columns: repeat(8, var(--satranc-sq));
  grid-template-rows: repeat(8, var(--satranc-sq));
  touch-action: manipulation;
}
/* The coordinates are drawn above the pieces (z-index 2) so a piece never covers a letter. */
/* Rank numbers at the top left of the left file, file letters at the bottom right of the bottom rank, each in the
   other square's colour. The top-left square is light in either orientation, so the parity fixes the colours. */
.satranc-coords { position: absolute; inset: 0; pointer-events: none; z-index: 2; font: 700 max(10px, calc(var(--satranc-sq) * .21)) / 1 var(--font-display, system-ui, sans-serif); }
.satranc-coords__ranks { position: absolute; top: 0; bottom: 0; left: 0; display: grid; grid-template-rows: repeat(8, 1fr); }
.satranc-coords__files { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(8, 1fr); }
.satranc-coords__ranks > span { padding: calc(var(--satranc-sq) * .05) 0 0 calc(var(--satranc-sq) * .06); }
.satranc-coords__files > span { align-self: end; padding: 0 calc(var(--satranc-sq) * .04) calc(var(--satranc-sq) * .02) 0; text-align: right; }
.satranc-coords__ranks > span:nth-child(odd), .satranc-coords__files > span:nth-child(even) { color: var(--satranc-coord-on-light); }
.satranc-coords__ranks > span:nth-child(even), .satranc-coords__files > span:nth-child(odd) { color: var(--satranc-light); }

/* ---------- Squares and their marks ---------- */
.satranc-sq {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--satranc-sq);
  height: var(--satranc-sq);
  /* The board sets the square size; the app's touch minimum for buttons must not stretch a square over its neighbour. */
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: var(--satranc-dark);
  border: 0;
  border-radius: 0;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.satranc-sq.is-light { background: var(--satranc-light); }
.satranc[data-interactive="true"] .satranc-sq.is-movable,
.satranc[data-interactive="true"] .satranc-sq.is-target { cursor: pointer; }
.satranc-sq::before, .satranc-sq::after { content: ""; position: absolute; pointer-events: none; }
.satranc-sq::before { inset: 0; }
.satranc-sq.is-last::before { background: var(--satranc-last); }
.satranc-sq.is-selected::before { background: var(--satranc-pick); }
.satranc-sq.is-check { background-image: radial-gradient(circle, rgba(198, 40, 40, .95) 0 24%, rgba(198, 40, 40, .6) 46%, rgba(198, 40, 40, 0) 72%); }
/* A quiet move: a dot; a capture: a ring round the piece it takes. */
.satranc-sq.is-target::after { inset: 36%; background: var(--satranc-dot); border-radius: 50%; z-index: 2; }
.satranc-sq.is-target.is-capture::after { inset: 4%; background: none; border: calc(var(--satranc-sq) * .08) solid var(--satranc-dot); }
/* Tehdit altındaki taşlar: a red dashed ring round each of the mover's attacked pieces. */
.satranc-sq.is-threatened::after { inset: 6%; border: 3px dashed var(--satranc-danger); border-radius: 50%; z-index: 2; }
.satranc-sq:focus { outline: none; }
.satranc-sq:focus-visible { outline: 4px solid var(--focus, #1a8fcc); outline-offset: -4px; z-index: 3; }
#arenaDialog .satranc-sq[data-coach-mark] { outline-offset: -5px; }

/* ---------- Pieces (vendor/cburnett) ---------- */
.satranc-piece { position: relative; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.satranc-sq.is-moving { z-index: 4; }
.satranc-sq.is-moving .satranc-piece { will-change: transform; }

/* ---------- Players' bars ----------
   board-games.js renders the cards (api.playerCard); here they become slim bars: name and level, the pieces taken
   with +N, whose turn, and the clock. Beside the board (wide) a bar is three short rows; above and below it (tall)
   two rows with the clock at the right. */
.satranc-bar { display: grid; min-width: 0; }
#arenaPlay .satranc .satranc-bar .board-player {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name name" "score score" "state clock";
  gap: 4px 10px;
  padding: 8px 12px;
  border-width: 2px;
  border-radius: 14px;
  box-shadow: none;
  transform: none;
}
#arenaPlay .satranc .satranc-bar .board-player.is-turn,
#arenaPlay .satranc .satranc-bar .board-player.is-first { box-shadow: 0 0 0 3px var(--side-identity-border); }
#arenaPlay .satranc .satranc-bar .board-player__name { font-size: 18px; }
#arenaPlay .satranc .satranc-bar .board-player__score { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 28px; font-size: 15px; white-space: nowrap; }
#arenaPlay .satranc .satranc-bar .board-player__clock { min-width: 84px; padding: 4px 10px; font-size: 24px; }
/* The running clock is the one lit, as on a chess clock. */
#arenaPlay .satranc .satranc-bar .board-player.is-turn .board-player__clock:not(.is-urgent) { color: var(--side-identity-bg); background: var(--side-identity-fg); }
#arenaPlay .satranc .satranc-bar .board-player__state { align-self: center; justify-self: start; white-space: nowrap; }
.satranc-taken { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.satranc-taken__group { display: flex; flex: none; }
.satranc-taken__group img { display: block; width: 26px; height: 26px; -webkit-user-drag: none; }
.satranc-taken__group img + img { margin-left: -14px; }
.satranc-lead { flex: none; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
#arenaPlay .satranc[data-layout="tall"] .satranc-bar .board-player {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "name state clock" "score score clock";
  gap: 0 8px;
  align-content: center;
  padding: 3px 4px 3px 10px;
  border-radius: 12px;
}
#arenaPlay .satranc[data-layout="tall"] .satranc-bar .board-player__name { font-size: 15px; line-height: 1.2; }
#arenaPlay .satranc[data-layout="tall"] .satranc-bar .board-player__score { min-height: 18px; font-size: 13px; }
#arenaPlay .satranc[data-layout="tall"] .satranc-bar .board-player__clock { align-self: stretch; display: grid; place-items: center; min-width: 68px; padding: 0 8px; font-size: 20px; }
#arenaPlay .satranc[data-layout="tall"] .board-player__state { justify-self: end; min-height: 0; font-size: 12px; }
.satranc[data-layout="tall"] .satranc-taken__group img { width: 18px; height: 18px; }
.satranc[data-layout="tall"] .satranc-taken__group img + img { margin-left: -10px; }
.satranc[data-layout="tall"] .satranc-lead { font-size: 13px; }

/* ---------- Banner and move list ---------- */
.satranc-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.satranc-side > .satranc-bar { flex: none; }
.satranc-banner-slot:empty { display: none; }
.satranc-banner {
  margin: 0;
  padding: 8px 12px;
  color: #fff;
  background: var(--satranc-alarm);
  border-radius: 999px;
  font: 900 18px / 1.2 var(--font-display, system-ui, sans-serif);
  text-align: center;
  animation: satranc-banner .35s var(--ease-bounce, ease) both;
}
.satranc-banner[data-kind="mate"] { background: var(--navy, #0b1628); box-shadow: 0 0 0 3px var(--gold, #f0aa0e); }
.satranc-banner[data-kind="pat"], .satranc-banner[data-kind="draw"] { color: var(--navy, #0b1628); background: var(--gold-fill, #f7c44f); }
@keyframes satranc-banner { from { transform: scale(.8); opacity: 0; } }
.satranc-moves {
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  padding: 6px;
  overflow: auto;
  list-style: none;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #dce3ec);
  border-radius: var(--radius-md, 12px);
  font: 700 15px / 1.35 var(--font-display, system-ui, sans-serif);
  -webkit-user-select: text;
  user-select: text;
}
.satranc-moves:empty::before { content: "Henüz hamle yok"; display: block; padding: 4px 6px; color: var(--ink-soft, #3a4a5f); font-weight: 600; }
.satranc-moves__row { display: grid; grid-template-columns: 2.4em 1fr 1fr; gap: 4px; padding: 2px 4px; border-radius: 6px; }
.satranc-moves__row:nth-child(even) { background: var(--surface-soft, #eef2f7); }
.satranc-moves__no { color: var(--ink-soft, #3a4a5f); font-variant-numeric: tabular-nums; }
.satranc-moves__skip { color: var(--ink-soft, #3a4a5f); }
.satranc-moves__san.is-latest { color: var(--surface, #fff); background: var(--navy, #0b1628); border-radius: 4px; padding: 0 4px; justify-self: start; }

/* Tall (phone): a one-line strip under the board, newest move at the right. */
.satranc[data-layout="tall"] .satranc-side { gap: 6px; }
.satranc[data-layout="tall"] .satranc-banner { padding: 5px 10px; font-size: 15px; }
.satranc[data-layout="tall"] .satranc-moves { display: flex; flex: 0 0 auto; gap: 2px; padding: 4px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; font-size: 14px; }
.satranc[data-layout="tall"] .satranc-moves__row { display: inline-flex; gap: 5px; background: none; }

/* ---------- Promotion picker ---------- */
/* The live arena turns pointer events off for everything but buttons; the picker and its backdrop take them back so
   a tap beside the card lands on the backdrop (and cancels) instead of on a square behind it. */
.satranc-promo { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: auto; }
.satranc-promo__backdrop { position: absolute; inset: 0; background: rgba(11, 22, 40, .45); }
.satranc-promo__card {
  position: relative;
  display: grid;
  gap: 10px;
  max-width: calc(100% - 16px);
  padding: 14px;
  background: var(--surface, #fff);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(11, 22, 40, .3));
}
.satranc-promo__title { margin: 0; color: var(--ink, #0b1628); font: 800 16px / 1.25 var(--font-display, system-ui, sans-serif); text-align: center; }
.satranc-promo__choices { display: grid; grid-template-columns: repeat(4, minmax(56px, 76px)); gap: 8px; }
.satranc-promo__choice {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 6px 4px;
  color: var(--ink, #0b1628);
  background: var(--satranc-light);
  border: 2px solid var(--line-strong, #bcc8d8);
  border-radius: var(--radius-sm, 8px);
  font: 800 14px / 1.2 var(--font-display, system-ui, sans-serif);
  cursor: pointer;
}
.satranc-promo__choice .satranc-piece { width: 48px; height: 48px; }
@media (hover: hover) and (pointer: fine) {
  .satranc-promo__choice:hover { border-color: var(--navy, #0b1628); }
}
.satranc-promo__choice:focus-visible { outline: 4px solid var(--focus, #1a8fcc); outline-offset: 2px; }

/* Setup: each Tahta button starts with a small 2 × 2 board in its colours. */
/* On a phone the four Tahta buttons sit in a 2 × 2 grid instead of wrapping three plus one. */
@media (max-width: 560px) { #satrancLook .segmented { display: grid; grid-template-columns: 1fr 1fr; } }
.segmented > [data-choice="satrancBoard"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.segmented > [data-choice="satrancBoard"]::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: conic-gradient(var(--satranc-dark) 0 25%, var(--satranc-light) 0 50%, var(--satranc-dark) 0 75%, var(--satranc-light) 0);
  box-shadow: 0 0 0 1px rgba(11, 22, 40, .3);
}

/* The Koç review shows its own move list and ending; the board takes the room. */
.board-review .satranc { grid-template-columns: var(--satranc-span); grid-template-rows: var(--satranc-span); }
.board-review .satranc-side { display: none; }

/* ---------- Landscape screens ----------
   The board's height is the arena's: the referee stands in a column at its left, the bars beside the board, and the
   board takes the rest of the width (satranc.js fit). */
@media (min-width: 600px) and (min-aspect-ratio: 5/4) {
  #arenaBody:has(> .board-arena > #arenaPlay > .satranc) { padding-block: 10px; }
  .board-arena:has(> #arenaPlay > .satranc) {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(0, 4fr);
    grid-template-rows: minmax(0, 1fr) repeat(3, auto);
    gap: 10px 18px;
  }
  .board-arena:has(> #arenaPlay > .satranc) > * { grid-column: 1; }
  .board-arena:has(> #arenaPlay > .satranc) > #arenaPlay { grid-column: 2; grid-row: 1 / -1; }
  /* The draw offer and the computer's short answer centre on the board's side, not on the whole arena. */
  .board-arena:has(> #arenaPlay > .satranc) > :is(.board-draw-offer, .board-note) { grid-column: 2; grid-row: 1 / -1; }
  .board-arena:has(> #arenaPlay > .satranc) > .board-header { grid-row: 1; align-self: center; grid-template-columns: minmax(0, 220px); justify-content: center; gap: 12px; }
  .board-arena:has(> #arenaPlay > .satranc) .board-header .referee-region { justify-self: center; }
  .board-arena:has(> #arenaPlay > .satranc) > .board-first { justify-self: end; }
  /* Paused, the card stands over the dimmed board rather than pushing the referee out of its column. */
  .board-arena:has(> #arenaPlay > .satranc) > .arena-paused {
    grid-column: 2;
    grid-row: 1 / -1;
    place-self: center;
    z-index: 9;
    width: min(360px, calc(100% - 32px));
    padding: 22px 20px;
    background: var(--glass-strong);
    border: 2px solid var(--line-strong);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
  }
  .board-arena:has(> #arenaPlay > .satranc) > .arena-paused h3 { margin: 0 0 12px; }
  /* The board and the move list stand centred together, so the board's side is not the board's centre: where the
     browser can anchor, the three cards centre on the board itself. */
  @supports (anchor-name: --satranc-board) {
    .board-arena:has(> #arenaPlay > .satranc) .satranc-stage { anchor-name: --satranc-board; }
    .board-arena:has(> #arenaPlay > .satranc) > :is(.board-draw-offer, .board-note, .arena-paused) {
      position: absolute;
      top: anchor(--satranc-board center);
      left: anchor(--satranc-board center);
      transform: translate(-50%, -50%);
    }
  }
}
/* A landscape phone has no room for the referee's centred card beside the pause card, which already says it. */
@media (min-width: 600px) and (min-aspect-ratio: 5/4) and (max-height: 520px) {
  #arenaDialog[data-referee-phase="paused"] .board-arena:has(> #arenaPlay > .satranc) .board-header .referee-region { display: none; }
}
/* A short landscape phone: the header and footer share one thin row (board-games.css), so the board takes the rest of
   the height: 40 px squares at 844×390 (satranc.js fit uses the thin frame there). */
@media (orientation: landscape) and (min-width: 600px) and (max-height: 500px) {
  #arenaDialog:has(.board-arena > #arenaPlay > .satranc) :is(.arena-header, #arenaFooter) { padding-block: 2px; }
  #arenaBody:has(> .board-arena > #arenaPlay > .satranc),
  #arenaDialog[data-compact][open] > #arenaBody:has(> .board-arena > #arenaPlay > .satranc) { padding-block: 0; }
  .board-arena:has(> #arenaPlay > .satranc) { row-gap: 6px; }
  #arenaPlay .satranc .satranc-bar .board-player { gap: 2px 8px; padding: 4px 8px; }
  #arenaPlay .satranc .satranc-bar .board-player__name { font-size: 15px; }
  #arenaPlay .satranc .satranc-bar .board-player__clock { min-width: 64px; padding: 2px 8px; font-size: 18px; }
}

/* ---------- Themes ---------- */
html[data-theme="dark"] :is(.satranc, [data-choice="satrancBoard"]) { --satranc-light: #bac0cd; --satranc-dark: #4c6390; --satranc-coord-on-light: #4c6390; --satranc-dot: rgba(8, 14, 28, .42); }
html[data-theme="dark"] :is(.satranc[data-board="yesil"], [data-choice="satrancBoard"][data-value="yesil"]) { --satranc-light: #c6ccaa; --satranc-dark: #58713c; --satranc-coord-on-light: #58713c; }
html[data-theme="dark"] :is(.satranc[data-board="ahsap"], [data-choice="satrancBoard"][data-value="ahsap"]) { --satranc-light: #d9c39c; --satranc-dark: #8d6243; --satranc-coord-on-light: #8d6243; }
html[data-theme="dark"] :is(.satranc[data-board="gri"], [data-choice="satrancBoard"][data-value="gri"]) { --satranc-light: #b9bdc5; --satranc-dark: #5f6775; --satranc-coord-on-light: #5f6775; }
/* Black pieces taken by the White player would vanish on a dark card: a light rim keeps their outline. */
html[data-theme="dark"] .satranc-taken--b img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)); }
/* High contrast keeps its own white and grey board whatever the Tahta choice. */
html body.high-contrast .satranc[data-board] {
  --satranc-light: #fff;
  --satranc-dark: #a9a9a9;
  --satranc-coord-on-light: #000;
  --satranc-last: rgba(255, 214, 0, .7);
  --satranc-pick: rgba(255, 214, 0, .95);
  --satranc-dot: #000;
  --satranc-danger: #000;
}
body.high-contrast .satranc-coords__ranks > span:nth-child(even), body.high-contrast .satranc-coords__files > span:nth-child(odd) { color: #000; }
body.high-contrast .satranc-sq.is-threatened::after { border-width: 4px; }
body.high-contrast .satranc-sq.is-selected { box-shadow: inset 0 0 0 5px #000; }
body.high-contrast .satranc-banner { color: #fff; background: #000; box-shadow: none; }
body.high-contrast .satranc-moves { border: 2px solid #000; }
@media (forced-colors: active) {
  .satranc-board, .satranc-promo__choice { forced-color-adjust: none; }
  .satranc-sq:focus-visible { outline-color: Highlight; }
  .satranc-banner { border: 2px solid CanvasText; }
}

/* ---------- Motion off-switches ---------- */
body.reduced-motion .satranc *, body.reduced-motion .satranc *::before, body.reduced-motion .satranc *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .satranc *, .satranc *::before, .satranc *::after { animation: none !important; transition: none !important; } }

@media (max-width: 520px) {
  .satranc-promo__choices { grid-template-columns: repeat(4, minmax(52px, 1fr)); gap: 6px; }
  .satranc-promo__choice .satranc-piece { width: 40px; height: 40px; }
}