/* ============================================================
   Küşt tagtasy we oýun interfeýsi
   ============================================================ */

.board-frame {
  position: relative;
  padding: clamp(8px, 1.6vw, 16px);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, var(--board-frame), color-mix(in srgb, var(--board-frame) 72%, #000));
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(221, 186, 83, 0.28);
  width: 100%;
}
.board-frame::before {
  content: '';
  position: absolute; inset: 4px;
  border-radius: calc(var(--radius-lg) - 2px);
  border: 1px solid rgba(221, 186, 83, 0.26);
  pointer-events: none;
}

.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.square {
  position: relative;
  display: grid;
  place-items: center;
  border: none;
  padding: 0;
  margin: 0;
  background: var(--board-light);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.square--dark { background: var(--board-dark); }
.square:disabled { cursor: default; }

/* Koordinatlar */
.square__coord {
  position: absolute;
  font-size: clamp(7px, 1.05vw, 11px);
  font-weight: 700;
  line-height: 1;
  opacity: 0.62;
  pointer-events: none;
  font-family: var(--font-mono);
}
.square__coord--file { inset-block-end: 3px; inset-inline-end: 4px; }
.square__coord--rank { inset-block-start: 3px; inset-inline-start: 4px; }
.square--light .square__coord { color: var(--board-dark); }
.square--dark .square__coord { color: var(--board-light); }

/* Figuralar */
.piece {
  width: 86%;
  height: 86%;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
  transition: transform var(--dur-fast) var(--ease);
}
.piece__body { stroke-linejoin: round; stroke-width: 1.3; }
.piece--white .piece__body { fill: var(--piece-white-fill); stroke: var(--piece-white-stroke); }
.piece--black .piece__body { fill: var(--piece-black-fill); stroke: var(--piece-black-stroke); }
.piece--white .piece-eye { fill: var(--piece-white-stroke); stroke: none; }
.piece--black .piece-eye { fill: var(--piece-black-stroke); stroke: none; }
.piece--white .piece-mark { fill: var(--piece-white-stroke); opacity: .72; stroke: none; }
.piece--black .piece-mark { fill: var(--piece-black-stroke); opacity: .72; stroke: none; }
.piece--mini { width: 22px; height: 22px; filter: none; }

.square:hover:not(:disabled) .piece { transform: scale(1.06); }

/* Bellikler */
.square.is-last::after {
  content: ''; position: absolute; inset: 0;
  background: var(--sq-last); pointer-events: none;
}
.square.is-selected::after {
  content: ''; position: absolute; inset: 0;
  background: var(--sq-select); pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--gold-400);
}
.square.is-check::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle, var(--sq-check) 18%, transparent 72%);
  pointer-events: none;
  animation: checkPulse 1.1s ease-in-out infinite;
}
@keyframes checkPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

.square .hint {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.square .hint--move {
  width: 28%; height: 28%;
  border-radius: 50%;
  background: var(--sq-move);
  animation: hintIn 160ms var(--ease-out);
}
.square .hint--capture {
  inset: 6%;
  border-radius: 50%;
  border: 4px solid var(--sq-move);
  animation: hintIn 160ms var(--ease-out);
}
@keyframes hintIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

.board.is-thinking { cursor: progress; }
.board.is-locked .square { cursor: default; }

/* Öwrülme saýlaýjysy */
.promotion {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background: rgba(4, 22, 18, 0.72);
  backdrop-filter: blur(3px);
}
.promotion__panel {
  display: flex; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  flex-wrap: wrap; justify-content: center;
}
.promotion__title {
  position: absolute; inset-block-start: 14%;
  color: var(--ivory-100); font-family: var(--font-display); font-size: var(--fs-lg);
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.promotion__btn {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-2); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.promotion__btn:hover { transform: translateY(-3px); border-color: var(--gold); }
.promotion__btn .piece { width: 46px; height: 46px; }

/* ---------- Oýun ýerleşişi ---------- */
.game-layout {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  align-items: start;
}
@media (max-width: 1000px) { .game-layout { grid-template-columns: 1fr; } }

.game-board-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.game-side { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 1000px) { .game-side { position: static; } }

/* Oýunçy paneli */
.player-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.player-bar.is-turn { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.player-bar__avatar {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface-3); color: var(--accent-strong);
}
.player-bar__avatar .piece { width: 30px; height: 30px; }
.player-bar__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.player-bar__name { font-weight: 700; font-size: var(--fs-sm); }
.player-bar__sub { font-size: var(--fs-xs); color: var(--text-muted); }
.player-bar__captured { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 2px; align-items: center; }
.player-bar__captured .piece--mini { width: 17px; height: 17px; }
.player-bar__adv { font-size: var(--fs-xs); font-weight: 700; color: var(--gold); margin-inline-start: 4px; }

.clock {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  color: var(--text);
  flex: none;
}
.clock.is-active { background: var(--action); color: var(--action-text); border-color: transparent; }
.clock.is-low { background: var(--danger-500); color: #fff; border-color: transparent; animation: pulse 1s ease-in-out infinite; }
.clock.is-off { opacity: .45; }

/* Ädimleriň taryhy */
.moves {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) minmax(0, 1fr);
  gap: 2px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}
.moves__num { color: var(--text-muted); font-size: var(--fs-xs); align-self: center; }
.moves__move {
  padding: 0.22rem 0.45rem; border-radius: var(--radius-sm);
  cursor: pointer; border: none; background: none; font: inherit; color: var(--text);
  text-align: start; transition: background-color var(--dur-fast) var(--ease);
}
.moves__move:hover { background: var(--surface-3); }
.moves__move.is-current { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.moves__empty { grid-column: 1 / -1; color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-sm); }

/* Hereketlendirijiniň ýagdaýy */
.engine-status {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-inset); border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.engine-status__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: none;
}
.engine-status.is-ready .engine-status__dot { background: var(--success-600); }
.engine-status.is-thinking .engine-status__dot { background: var(--gold); animation: pulse 900ms ease-in-out infinite; }
.engine-status.is-error .engine-status__dot { background: var(--danger-500); }
.engine-status__eval { margin-inline-start: auto; font-family: var(--font-mono); font-weight: 700; color: var(--text-soft); }

/* Netije paneli */
.result-banner {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--action);
  color: var(--action-text);
  animation: hintIn 220ms var(--ease-out);
}
.result-banner--draw { background: var(--gold-600); color: #fff; }
.result-banner--loss { background: var(--danger-600); }
.result-banner__title { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0; color: inherit; }
.result-banner__sub { font-size: var(--fs-sm); opacity: .85; }

/* Sazlama setirleri */
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding-block: var(--space-2);
  font-size: var(--fs-sm);
  flex-wrap: wrap;
}
.setting-row__label { color: var(--text-soft); font-weight: 600; }

.level-meter { display: flex; gap: 3px; }
.level-meter__bar {
  width: 7px; height: 16px; border-radius: 2px; background: var(--surface-inset); border: 1px solid var(--border);
}
.level-meter__bar.is-on { background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); border-color: transparent; }