/* =====================================================================
   Recoat (/puzzles/recoat) — Brett, Pfeile, Palette, Vorlage.
   Das Brett ist ein De-Stijl-Bild: schwarze Linien, Primärfarben,
   eckig — und bleibt in allen sechs Farbthemen gleich. Alles drumherum
   (Buttons, Karten, Schrift) kommt aus puzzles/spiel.css + main.css.
   Klassen/Hooks setzt assets/js/puzzles/recoat.js.
   ===================================================================== */

.recoat {
  --rc-line: #000;
  --rc-canvas: #f7f7f4;
  --rc-c0: #d62e22; /* Rot */
  --rc-c1: #1d4c9e; /* Blau */
  --rc-c2: #f4c21b; /* Gelb */
  --rc-c3: #8c8d89; /* Grau */
}

.recoat-sizes {
  width: fit-content;
  margin-top: 14px;
}

/* ---- status: target thumbnail, strokes, par ---- */

.recoat-status {
  display: flex;
  align-items: flex-end;
  gap: 26px;
  margin: 24px 0 18px;
}

.recoat-status__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recoat-status .section-label {
  line-height: 1;
}

.recoat-thumb {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 2px;
  padding: 2px;
  width: 68px;
  aspect-ratio: 1 / 1;
  background: var(--rc-line);
}

.recoat-thumb:empty {
  background: transparent;
}

.recoat-count {
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---- board: handles above/left, empty right gutter keeps it centered ---- */

.recoat-play {
  --hw: 30px;
  --gl: 6px;
  display: grid;
  grid-template-columns: var(--hw) minmax(0, 1fr) var(--hw);
  grid-template-rows: var(--hw) auto;
  width: 100%;
  touch-action: manipulation;
}

.recoat-play.is-small {
  --gl: 5px;
}

.recoat-cols {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: var(--gl);
  padding: 0 var(--gl);
}

.recoat-rows {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(var(--n), 1fr);
  gap: var(--gl);
  padding: var(--gl) 0;
}

.recoat-board {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  gap: var(--gl);
  padding: var(--gl);
  aspect-ratio: 1 / 1;
  background: var(--rc-line);
  box-shadow: 0 6px 18px rgba(60, 40, 20, .16);
}

/* space is reserved before the JS builds the cells — no black flash */
.recoat-board:empty {
  background: transparent;
  box-shadow: none;
}

.recoat-cell {
  position: relative;
  background: var(--rc-canvas);
  transition: background-color 160ms ease-out;
}

/* target colour of the cell; vanishes into the fill once it matches */
.recoat-dot {
  position: absolute;
  inset: 35%;
  transition: background-color 160ms ease-out;
}

.recoat-cell.is-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sel);
  opacity: .45;
  pointer-events: none;
}

.recoat .p0, .recoat .t0 { background: var(--rc-c0); }
.recoat .p1, .recoat .t1 { background: var(--rc-c1); }
.recoat .p2, .recoat .t2 { background: var(--rc-c2); }
.recoat .p3, .recoat .t3 { background: var(--rc-c3); }
.recoat .pb, .recoat .tb { background: var(--rc-canvas); }

/* ---- handles (arrows): filled with the selected paint ---- */

.recoat-handle {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}

.recoat-handle svg {
  width: 18px;
  height: 18px;
  overflow: visible;
  transition: transform 120ms ease-out;
}

.recoat-handle polygon {
  fill: var(--hc, var(--sel));
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.recoat-cols .recoat-handle:hover svg,
.recoat-cols .recoat-handle:focus-visible svg {
  transform: translateY(3px);
}

.recoat-rows .recoat-handle:hover svg,
.recoat-rows .recoat-handle:focus-visible svg {
  transform: translateX(3px);
}

.recoat-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 6px;
}

.recoat-handle.is-active svg {
  transform: scale(1.35);
}

.recoat-play.is-locked .recoat-handle {
  pointer-events: none;
}

.recoat-play.is-locked .recoat-handle:not(.is-active) svg {
  opacity: .3;
}

/* ---- palette ---- */

.recoat-palette {
  display: flex;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  margin: 24px 0 6px;
}

.recoat-swatch {
  width: 54px;
  height: 54px;
  padding: 0;
  border: 3px solid var(--rc-line);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 120ms ease-out;
}

.recoat-swatch[aria-pressed="true"] {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  transform: translateY(-3px);
}

.recoat-swatch:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.recoat-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

/* ---- responsive ---- */

@media (max-width: 380px) {
  .recoat-play {
    --hw: 26px;
  }

  .recoat-swatch {
    width: 48px;
    height: 48px;
  }

  .recoat-status {
    gap: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recoat-cell,
  .recoat-dot,
  .recoat-handle svg,
  .recoat-swatch {
    transition: none;
  }
}