/* Unblocked Chess board styles - appended to the site base CSS. Pure static. */
.chess-app {
  background: #fff;
  border: 1px solid #dde5ee;
  border-radius: 12px;
  padding: 16px;
  margin: 14px 0;
  box-shadow: 0 6px 20px rgba(15, 27, 45, .06);
}
.chess-app h2 { margin-top: .2em; }

.chess-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mode-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.mode-btn {
  background: #eef3fa; color: #0f6cbd; border: 1px solid #c9d8ea; border-radius: 8px;
  padding: 7px 14px; cursor: pointer; font-weight: 600; font-size: .9rem;
}
.mode-btn.active { background: #0f6cbd; color: #fff; border-color: #0f6cbd; }
.controls { display: flex; gap: 6px; flex-wrap: wrap; }
.controls .btn { font-size: .85rem; padding: 7px 13px; }
.difficulty { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.difficulty select { padding: 6px; border: 1px solid #c3d0df; border-radius: 6px; background: #fff; }

.board-wrap { display: flex; gap: 16px; flex-wrap: wrap; }
.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: min(100%, 440px);
  aspect-ratio: 1 / 1;
  border: 4px solid #0f1b2d;
  border-radius: 6px;
  overflow: hidden;
  background: #b58863;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.board[data-flip="1"] { transform: rotate(180deg); }
.board[data-flip="1"] .sq { transform: rotate(180deg); }
.sq {
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
  font-size: clamp(22px, 4.5vw, 34px);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  -webkit-tap-highlight-color: transparent;
}
.sq.light { background: #f0d9b5; }
.sq.dark { background: #b58863; }
.sq .piece { pointer-events: none; user-select: none; line-height: 1; }
.sq .piece.white { color: #f7f7f7; text-shadow: 0 1px 2px #111, 0 0 2px #333; }
.sq .piece.black { color: #1a1a1a; text-shadow: 0 1px 1px rgba(255,255,255,.35); }
.sq.selected { background: #f7ec6e; }
.sq.last-move { box-shadow: inset 0 0 0 2px rgba(255,213,79,.85); }
.sq.is-target::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 35%; height: 35%; border-radius: 50%;
  background: rgba(15, 108, 189, .35);
  pointer-events: none;
}
.sq.is-target.can-capture::after {
  width: 100%; height: 100%; border-radius: 0;
  background: rgba(15, 108, 189, .22);
  box-shadow: inset 0 0 0 3px rgba(15,108,189,.55);
}

.side-info { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 10px; }
.status {
  font-weight: 700; color: #0f1b2d; background: #eef3fa; border-radius: 8px;
  padding: 10px 12px; font-size: .95rem;
}
.captured { background: #f7f9fc; border: 1px solid #e3eaf3; border-radius: 8px; padding: 8px 10px; font-size: .8rem; }
.cap-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin: 2px 0; }
.cap-label { color: #5a6b80; margin-right: 4px; }
.pig { font-size: 1.1rem; }
.pig.big { font-size: 1.25rem; }

.fen-row { display: flex; gap: 6px; flex-wrap: wrap; }
.fen-row input {
  flex: 1; min-width: 120px; padding: 7px 8px; border: 1px solid #c3d0df; border-radius: 6px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .75rem;
}
.movelist {
  background: #0f1b2d; color: #cfe0f2; border-radius: 8px; padding: 8px 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem;
  max-height: 160px; overflow-y: auto;
}
.move-row { display: flex; gap: 10px; }
.move-row .mv-num { color: #7f96b0; min-width: 24px; }
.move-row .mv { min-width: 28px; }

.promo-overlay { position: fixed; inset: 0; background: rgba(10,20,35,.6); display: flex; align-items: center; justify-content: center; z-index: 999; }
.promo-box { background: #fff; border-radius: 12px; padding: 18px 22px; text-align: center; }
.promo-row { display: flex; gap: 8px; margin-top: 10px; }
.promo-btn { font-size: 2rem; background: #eef3fa; border: 1px solid #c9d8ea; border-radius: 10px; width: 56px; height: 56px; cursor: pointer; color: #1a1a1a; }
.promo-btn:hover { background: #0f6cbd; color: #fff; }

.puzzle-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.puzzle-count { font-weight: 700; color: #0f1b2d; }
@media (max-width: 640px) {
  .board-wrap { flex-direction: column; }
  .side-info { min-width: 0; }
}