/* Satranç board: cream and walnut squares, code-drawn pieces (satranc.js), the move list beside the board on a
   wide screen and in a strip below it on a tall one. Motion is transform only; body.reduced-motion and
   prefers-reduced-motion disable it. */
.satranc {
  --satranc-sq: 56px;
  --satranc-coord: 18px;
  --satranc-side: 200px;
  --satranc-gap: 14px;
  --satranc-light: #f1ddb8;
  --satranc-dark: #b5845a;
  --satranc-frame: #5b3a22;
  --satranc-coord-ink: #f4e6cc;
  --satranc-last: rgba(247, 196, 79, .55);
  --satranc-dot: rgba(11, 22, 40, .32);
  --satranc-danger: #c62828;
  --satranc-alarm: #b02222;
  --satranc-select: var(--focus, #1a8fcc);
  --sp-w-fill: #fbf8f1;
  --sp-w-line: #1d2230;
  --sp-w-detail: #1d2230;
  --sp-b-fill: #262a33;
  --sp-b-line: #0b0d12;
  --sp-b-detail: #e9e2d2;
  --satranc-span: 472px;
  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;
}
/* Tall: the board sits right under the player cards; any spare height stays below the move strip. */
.satranc[data-layout="tall"] { grid-template-columns: var(--satranc-span); grid-template-rows: var(--satranc-span) auto; align-content: start; }

/* ---------- Board with its coordinates ---------- */
.satranc-stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; contain: size; }
.satranc-frame {
  display: grid;
  grid-template-columns: var(--satranc-coord) calc(var(--satranc-sq) * 8);
  grid-template-rows: calc(var(--satranc-sq) * 8) var(--satranc-coord);
  padding: 4px;
  background: var(--satranc-frame);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-md, 0 6px 18px rgba(11, 22, 40, .18));
}
.satranc-ranks { display: grid; grid-template-rows: repeat(8, var(--satranc-sq)); grid-column: 1; grid-row: 1; }
.satranc-files { display: grid; grid-template-columns: repeat(8, var(--satranc-sq)); grid-column: 2; grid-row: 2; }
.satranc-ranks [data-coord], .satranc-files [data-coord] {
  display: grid;
  place-items: center;
  color: var(--satranc-coord-ink);
  font: 800 calc(var(--satranc-coord) * .68) / 1 var(--font-display, system-ui, sans-serif);
}
.satranc-board {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: repeat(8, var(--satranc-sq));
  grid-template-rows: repeat(8, var(--satranc-sq));
  overflow: hidden;
  border-radius: 3px;
  touch-action: manipulation;
}

/* ---------- 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-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%); }
.satranc-sq.is-selected { box-shadow: inset 0 0 0 4px var(--satranc-select); }
.satranc-sq.is-selected::before { background: rgba(26, 143, 204, .28); }
/* 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 ---------- */
.satranc-piece { position: relative; z-index: 1; display: block; width: 92%; height: 92%; overflow: visible; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28)); }
.satranc-piece--w { --sp-fill: var(--sp-w-fill); --sp-line: var(--sp-w-line); --sp-detail: var(--sp-w-detail); }
.satranc-piece--b { --sp-fill: var(--sp-b-fill); --sp-line: var(--sp-b-line); --sp-detail: var(--sp-b-detail); }
.satranc-piece > * { fill: var(--sp-fill); stroke: var(--sp-line); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.satranc-piece > .d { fill: none; stroke: var(--sp-detail); stroke-width: 1.3; }
.satranc-piece > .e { fill: var(--sp-detail); stroke: none; }
.satranc-sq.is-moving { z-index: 4; }
.satranc-sq.is-moving .satranc-piece { will-change: transform; }

/* ---------- Banner and move list ---------- */
.satranc-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.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; }
.satranc-promo__choice:hover { border-color: var(--navy, #0b1628); }
.satranc-promo__choice:focus-visible { outline: 4px solid var(--focus, #1a8fcc); outline-offset: 2px; }

/* 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; }

/* ---------- Player cards beside the board (landscape screens) ----------
   The board's height is the arena's: the cards stand in a column at its left, the opponent's above the referee and
   the near player's below (as on 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(200px, 1fr) minmax(0, 3fr);
    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, 300px); justify-content: end; gap: 12px; }
  .board-arena:has(> #arenaPlay > .satranc) .board-player { grid-template-areas: "name name" "score clock" "state state"; }
  .board-arena:has(> #arenaPlay > .satranc) .board-player[data-board-player="1"],
  .board-arena:has(> #arenaPlay > .satranc[data-perspective="1"]) .board-player[data-board-player="0"] { order: 1; }
  .board-arena:has(> #arenaPlay > .satranc) .board-player[data-board-player="0"],
  .board-arena:has(> #arenaPlay > .satranc[data-perspective="1"]) .board-player[data-board-player="1"] { order: 3; }
  .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 player cards out of their 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-frame { padding: 2px; border-radius: var(--radius-sm, 8px); }
}
/* Phones: beside the clock "taş puanı" wraps under its number when the card is narrow, never under the clock. */
@media (max-width: 680px), (max-height: 520px) {
  .board-arena:has(> #arenaPlay > .satranc) .board-player { column-gap: 6px; }
  .board-arena:has(> #arenaPlay > .satranc) .board-player__score small { display: inline-block; font-size: 13px; white-space: nowrap; }
}

/* ---------- Themes ---------- */
html[data-theme="dark"] .satranc {
  --satranc-light: #d9c39c;
  --satranc-dark: #8d6243;
  --satranc-frame: #2a1a0e;
  --satranc-dot: rgba(11, 22, 40, .42);
}
body.high-contrast .satranc {
  --satranc-light: #fff;
  --satranc-dark: #a9a9a9;
  --satranc-frame: #000;
  --satranc-coord-ink: #fff;
  --satranc-last: rgba(255, 214, 0, .7);
  --satranc-dot: #000;
  --satranc-danger: #000;
  --sp-w-fill: #fff;
  --sp-w-line: #000;
  --sp-w-detail: #000;
  --sp-b-fill: #000;
  --sp-b-line: #000;
  --sp-b-detail: #fff;
}
body.high-contrast .satranc-piece { filter: none; }
body.high-contrast .satranc-piece--w > * { stroke-width: 2.2; }
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-frame { padding: 2px; border-radius: var(--radius-sm, 8px); }
  .satranc-promo__choices { grid-template-columns: repeat(4, minmax(52px, 1fr)); gap: 6px; }
  .satranc-promo__choice .satranc-piece { width: 40px; height: 40px; }
}