/* =========================================================================
   Schachclub Heilsbronn – Stylesheet für die Schach-Widgets
   Gehört zu chess-widgets.js. Nutzt die Tokens aus tokens.css.
   ========================================================================= */

.sc-partie, .sc-raetsel { font-family: var(--sc-font-body, sans-serif); color: var(--sc-ink, #1c1a16); }

/* ---- Brett ---- */
.sc-board-wrap { max-width: 420px; margin: 0 auto; }
.sc-raetsel .sc-board-wrap { max-width: 380px; }

.sc-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  aspect-ratio: 1 / 1;
  width: 100%;
  container-type: inline-size;          /* erlaubt cqw-Skalierung der Figuren */
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 20px -10px rgba(0,0,0,.35);
}
.sc-cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.4cqw; line-height: 1; user-select: none;
}
.sc-cell.is-light { background: var(--sc-board-light, #ead8b4); }
.sc-cell.is-dark  { background: var(--sc-board-dark,  #9c6b36); }
.sc-cell.is-hl    { box-shadow: inset 0 0 0 999px var(--sc-board-hl, rgba(224,162,28,.42)); }
.sc-cell.is-sel   { box-shadow: inset 0 0 0 4px var(--sc-accent, #c1121f); }

/* Figuren als Grafik (cburnett-Satz, CC BY-SA 3.0, C. M. L. Burnett) – klar
   erkennbar, deutlich unterscheidbare Läufer/Bauern. */
.sc-pc {
  position: relative; display: block; width: 92%; height: 92%;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.sc-pc--wP { background-image: url(pieces/wP.svg); }
.sc-pc--wN { background-image: url(pieces/wN.svg); }
.sc-pc--wB { background-image: url(pieces/wB.svg); }
.sc-pc--wR { background-image: url(pieces/wR.svg); }
.sc-pc--wQ { background-image: url(pieces/wQ.svg); }
.sc-pc--wK { background-image: url(pieces/wK.svg); }
.sc-pc--bP { background-image: url(pieces/bP.svg); }
.sc-pc--bN { background-image: url(pieces/bN.svg); }
.sc-pc--bB { background-image: url(pieces/bB.svg); }
.sc-pc--bR { background-image: url(pieces/bR.svg); }
.sc-pc--bQ { background-image: url(pieces/bQ.svg); }
.sc-pc--bK { background-image: url(pieces/bK.svg); }

.sc-coord {
  position: absolute; font-family: var(--sc-font-mono, monospace);
  font-size: 2.5cqw; font-weight: 600;
}
.sc-cell.is-light .sc-coord { color: rgba(0,0,0,.42); }
.sc-cell.is-dark  .sc-coord { color: rgba(255,255,255,.62); }
.sc-rank { top: 2%; left: 5%; }
.sc-file { bottom: 1%; right: 6%; }

/* ---- Partie-Kopf ---- */
.sc-partie__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.sc-partie__players { font-weight: 800; font-size: 17px; }
.sc-partie__event { color: var(--sc-sub, #6a6256); font-size: 13.5px; }
.sc-result {
  font-family: var(--sc-font-mono, monospace); font-weight: 600;
  background: var(--sc-ink, #1c1a16); color: #fff;
  padding: 5px 11px; border-radius: 8px; font-size: 13px; white-space: nowrap;
}

/* ---- Status & Steuerung ---- */
.sc-status-row { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-status {
  font-family: var(--sc-font-mono, monospace); font-size: 13px; font-weight: 600;
  background: var(--sc-surface-alt, #f4ecdd); color: var(--sc-ink, #1c1a16);
  padding: 7px 13px; border-radius: 8px;
}
.sc-counter { margin-left: auto; font-family: var(--sc-font-mono, monospace); font-size: 12.5px; color: var(--sc-sub, #6a6256); }

.sc-controls { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sc-btn {
  cursor: pointer; border: 1.5px solid var(--sc-line, #e8decc);
  background: var(--sc-surface, #fff); color: var(--sc-ink, #1c1a16);
  border-radius: 9px; padding: 8px 12px; font-weight: 700; font-size: 14px;
  font-family: var(--sc-font-body, sans-serif);
}
.sc-btn:hover { border-color: var(--sc-accent, #c1121f); }
.sc-btn--ghost { border-color: var(--sc-line, #e8decc); }
/* eingeschalteter Zustand (z. B. Engine-Bewertung läuft mit) */
.sc-btn.is-active { background: var(--sc-accent, #c1121f); border-color: var(--sc-accent, #c1121f); color: #fff; }
.sc-btn.is-active:hover { border-color: var(--sc-accent, #c1121f); }

/* ---- Zugliste ---- */
.sc-movelist {
  margin-top: 14px; padding: 14px;
  background: color-mix(in srgb, var(--sc-surface-alt, #f4ecdd) 40%, transparent);
  border: 1px solid var(--sc-line, #e8decc); border-radius: 10px;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  font-family: var(--sc-font-mono, monospace); font-size: 13.5px;
}
.sc-moveno { color: var(--sc-sub, #6a6256); font-weight: 600; margin: 0 2px 0 6px; font-variant-numeric: tabular-nums; }
.sc-move {
  font: inherit; cursor: pointer; border: 0; border-radius: 6px;
  padding: 3px 7px; background: transparent; color: var(--sc-ink, #1c1a16); font-weight: 500;
}
.sc-move.is-active { background: var(--sc-accent, #c1121f); color: #fff; font-weight: 700; }

/* ---- Rätsel-Status ---- */
.sc-puzzle-status {
  margin-top: 16px; padding: 14px 18px; border-radius: 12px;
  background: var(--sc-surface-alt, #f4ecdd); border: 1px solid var(--sc-line, #e8decc);
  font-weight: 700; font-size: 16px; color: var(--sc-ink, #1c1a16);
}
.sc-puzzle-status.is-ok { color: var(--sc-accent, #c1121f); }
.sc-puzzle-status.is-reveal { color: var(--sc-sub, #6a6256); }