/* Tahta */

.bd-wrap {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  justify-content: center; width: 100%; --bd-max-h: 720px;
}
.bd-wrap.coords-outside { grid-template-columns: 18px auto; }
.bd {
  position: relative; grid-column: 2; grid-row: 1; user-select: none; touch-action: none;
  border-radius: var(--r-1); box-shadow: var(--e-board); overflow: hidden; outline: none;
  contain: layout paint style;
}
.bd:focus-visible { box-shadow: var(--e-board), 0 0 0 2px var(--accent); }
.bd-grid { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(8, 1fr); }
.bd-row { display: grid; grid-template-columns: repeat(8, 1fr); }
.bd-sq { position: relative; }
.bd-sq.light { background: var(--sq-l); }
.bd-sq.dark { background: var(--sq-d); }

/* koordinatlar */
.bd-files, .bd-ranks { display: none; font: 600 12px/1 var(--f-mono); color: var(--ink-2); }
.coords-outside .bd-files { display: grid; grid-column: 2; grid-row: 2; grid-template-columns: repeat(8, 1fr);
  width: var(--bd-size); text-align: center; padding-top: 4px; }
.coords-outside .bd-ranks { display: grid; grid-column: 1; grid-row: 1; grid-template-rows: repeat(8, 1fr);
  height: var(--bd-size); align-items: center; text-align: center; }
.bd-sq .co {
  display: none; position: absolute; z-index: 1; pointer-events: none; user-select: none;
  font: 600 max(9px, calc(var(--bd-size, 400px) / 38))/1 var(--f-mono);
}
.coords-inside .bd-sq .co { display: block; }
.bd-sq .co-r { left: 4%; top: 4%; }
.bd-sq .co-f { right: 5%; bottom: 3%; }
.bd-sq.light .co { color: var(--coord-l); }
.bd-sq.dark .co { color: var(--coord-d); }

/* vurgular (::before = dolgu) */
.bd-sq::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.bd-sq.last-from::before { background: rgb(242 181 68 / .22); }
.bd-sq.last-to::before { background: rgb(242 181 68 / .40); }
.bd-sq.selected::before { background: color-mix(in srgb, var(--accent) 36%, transparent); }
.bd-sq.mark-good::before { box-shadow: inset 0 0 0 3px var(--onay); }
.bd-sq.mark-bad::before { box-shadow: inset 0 0 0 3px var(--hasim); }
.bd-sq.mark-info::before { box-shadow: inset 0 0 0 3px var(--dost); }
.bd-sq.mark-ref::before { box-shadow: inset 0 0 0 3px var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.bd-sq.premove::before {
  background: repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--dost) 38%, transparent) 4px 7px);
}
.bd-sq.check::before {
  background: radial-gradient(circle, rgb(255 90 79 / .85) 0%, rgb(255 90 79 / .45) 38%, transparent 72%);
  animation: check-pulse 600ms var(--e-standard) 2;
}
@keyframes check-pulse { 50% { opacity: .55; } }

/* hedefler (::after) */
.bd-sq.target::after {
  content: ""; position: absolute; left: 39%; top: 39%; width: 22%; height: 22%; border-radius: 50%;
  background: rgb(10 14 19 / .30); pointer-events: none; animation: dot-in 120ms var(--e-decel);
}
.bd-sq.target.hover::after { left: 35%; top: 35%; width: 30%; height: 30%; }
.bd-sq.target.hover::before, .bd-sq.capture.hover::before { background: rgb(10 14 19 / .08); }
@keyframes dot-in { from { transform: scale(.6); opacity: 0; } }
.bd-sq.capture::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; --c: rgb(10 14 19 / .45); --a: 26%; --w: 3px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--a) var(--w), linear-gradient(var(--c), var(--c)) top left / var(--w) var(--a),
    linear-gradient(var(--c), var(--c)) top right / var(--a) var(--w), linear-gradient(var(--c), var(--c)) top right / var(--w) var(--a),
    linear-gradient(var(--c), var(--c)) bottom left / var(--a) var(--w), linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--a),
    linear-gradient(var(--c), var(--c)) bottom right / var(--a) var(--w), linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--a);
  background-repeat: no-repeat;
}
.bd-sq.cursor::after {
  content: ""; position: absolute; inset: 3px; pointer-events: none; --c: var(--accent); --a: 24%; --w: 2px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--a) var(--w), linear-gradient(var(--c), var(--c)) top left / var(--w) var(--a),
    linear-gradient(var(--c), var(--c)) top right / var(--a) var(--w), linear-gradient(var(--c), var(--c)) top right / var(--w) var(--a),
    linear-gradient(var(--c), var(--c)) bottom left / var(--a) var(--w), linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--a),
    linear-gradient(var(--c), var(--c)) bottom right / var(--a) var(--w), linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--a);
  background-repeat: no-repeat;
}
.bd-flash { position: absolute; inset: 0; pointer-events: none; background: var(--onay); }
.bd-flash.bad { background: var(--hasim); }
.bd-flash.warn { background: var(--dikkat); }

/* taslar */
.bd-pieces { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pc { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; will-change: auto; }
.pc.dragging { z-index: 10; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .25)); }
.pc.ghost { opacity: .3; }
.bd-shadow {
  position: absolute; left: 0; top: 0; width: 12.5%; height: 4.4%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / .35), transparent 70%); z-index: 1;
}
.bd-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.bd-overlay .draw-in { stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw 360ms var(--e-decel) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.bd-ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.bd-ui > * { pointer-events: auto; }
.bd.dim .bd-pieces, .bd.dim .bd-grid { filter: brightness(.6); }

/* radar taramasi (S3) */
.bd-sweep { position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: 0; }
.bd-sweep.on {
  opacity: 1;
  background: conic-gradient(from 0deg, transparent 0 300deg, rgb(255 90 79 / .18) 356deg, transparent 360deg);
  animation: sweep 420ms linear forwards;
}
@keyframes sweep { from { transform: rotate(0); } to { transform: rotate(360deg); opacity: 0; } }

/* terfi secici */
.bd-promo {
  position: absolute; width: 12.5%; display: flex; flex-direction: column; background: var(--bg-2);
  box-shadow: var(--e2); border-radius: var(--r-1); overflow: hidden; z-index: 6;
}
.bd-promo[style*="bottom"] { flex-direction: column-reverse; }
.bd-promo-opt { aspect-ratio: 1; border: 0; padding: 6%; background: transparent; cursor: pointer; }
.bd-promo-opt:hover, .bd-promo-opt:focus-visible { background: var(--bg-3); outline: none; }
.bd-promo-opt img { width: 100%; height: 100%; }
.bd-wrap.rotating .bd { box-shadow: var(--e-board), 0 0 0 1px var(--hasim); }

/* degerlendirme cubugu */
.evalbar {
  position: relative; width: 18px; border-radius: var(--r-1); overflow: hidden; background: var(--eval-b);
  box-shadow: 0 0 0 1px var(--line-3); flex: none;
}
.evalbar .fill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: var(--eval-w);
  transform-origin: bottom; transition: transform 360ms cubic-bezier(.3,.7,.2,1); }
.evalbar.flipped .fill { top: 0; bottom: auto; transform-origin: top; }
.evalbar .ghost { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); opacity: 0;
  transition: opacity 600ms; }
.evalbar .mid { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-3); }
.evalbar .lbl { position: absolute; left: 0; right: 0; text-align: center; font: 600 9px/12px var(--f-mono);
  writing-mode: horizontal-tb; letter-spacing: -.02em; }
.evalbar .lbl.top { top: 3px; color: var(--eval-w); }
.evalbar .lbl.bottom { bottom: 3px; color: var(--eval-b); }
.evalbar.mate .fill { background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgb(0 0 0 / .08) 4px 6px); }

.board-stage { display: flex; gap: 6px; align-items: stretch; justify-content: center; }
.board-stage .evalbar { height: var(--bd-size, 480px); align-self: flex-start; }

/* oyuncu plakasi */
.nameplate {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 4px;
}
.nameplate .who { font: 600 var(--fs-sm)/1.2 var(--f-cond); letter-spacing: .04em; text-transform: uppercase; }
.nameplate .meta { color: var(--ink-3); font-size: var(--fs-xs); }
.nameplate .material { display: flex; align-items: center; gap: 1px; color: var(--ink-3); font: 500 12px/1 var(--f-mono); }
.nameplate .material img { width: 14px; height: 14px; opacity: .8; }
.nameplate .spacer { flex: 1; }
.clock {
  min-width: 84px; height: 32px; padding: 0 10px; border-radius: var(--r-2); background: var(--bg-2);
  border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: flex-end;
  font: 500 18px/1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.clock.running { background: var(--bg-3); color: var(--ink-1); border-color: var(--accent); }
.clock.low { color: var(--hasim); border-color: var(--hasim); }
.thinking { width: 14px; height: 14px; }
.thinking circle.track { stroke: var(--line-2); }
.thinking circle.fill { stroke: var(--accent); stroke-dasharray: 37.7; stroke-dashoffset: 37.7; transform: rotate(-90deg); transform-origin: center; }

/* mini tahta (canvas) */
canvas.mini { border-radius: var(--r-1); box-shadow: 0 0 0 1px var(--line-3); display: block; }
.bd.picking { cursor: crosshair; }
.bd.picking .bd-sq:hover::before { background: color-mix(in srgb, var(--accent) 22%, transparent); }