/* Board reuses the battle board (board.css/units.css); --cell-size set by _pzFitBoard (JS). Rest is pz-scoped. */

/* No page cap: the shell's `.app-content > .screen` (0,2,0) sets `max-width: none` and owns the
   gutters, so one here never applied. Three panels are what this screen is, so it re-pins the
   shell's gutter TOKEN (0,3,0, the documented way — never its own padding on top) and hands the
   184px back to the board, which fits itself to whatever the columns leave. */
.app-content > .screen.puzzle-screen { --screen-pad-inline: 3rem; }

/* The header column owns the divider, as on the Training hub (.tr-tabbar).
   Back sits on its own line above title + difficulty, at every width. */
.pz-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--divider);
}
.pz-top-main {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
}
.pz-top .pz-title { flex: 1; min-width: 0; }
.pz-top h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 2px 0 0;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.pz-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-2);
}
.pz-diff { color: var(--bronze-2); letter-spacing: 2px; font-size: 0.85rem; white-space: nowrap; }
.pz-diff-off { color: var(--ink-4); }
.pz-back { white-space: nowrap; }

.pz-main {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.pz-board-col {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.pz-board-wrap { width: 100%; display: flex; justify-content: center; }
/* The plan stands BESIDE the board, left of it, at the width the match screen gives it. It is
   written AFTER the board so the stacked layout needs no rules at all; `order` is what puts it
   first here. Mounted only when there is a strip, so a puzzle without one keeps the whole row. */
.pz-plan-col { flex: 0 0 296px; align-self: stretch; order: -1; }
/* Puzzle board is standalone (no fused column), so round all corners. */
.puzzle-screen .board-wrap { border-radius: var(--radius-l); }
.puzzle-screen .board-grid .cell { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22); }
.pz-chooser-cell { outline: 2px solid var(--gold); outline-offset: -2px; z-index: 2; }

.puzzle-screen .cell.pz-target-cell {
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 4px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
/* inset:1px, no transform: a ring bled 2px OUTSIDE the cell and scaled 6% read as
   sitting off the unit it marks — worst on the 15–24px cells of a phone board. */
.puzzle-screen .cell.pz-target-cell::after {
  content: '';
  position: absolute; inset: 1px;
  border: 2px solid var(--gold); border-radius: 2px;
  animation: pz-target-pulse 1.4s ease-in-out infinite;
  pointer-events: none; z-index: 4;
}
@keyframes pz-target-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.pz-target::before {
  content: '⌖';
  position: absolute;
  top: -0.62em; left: 50%; transform: translateX(-50%);
  font-size: 1.15rem; font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.8);
  z-index: 5;
}
@media (prefers-reduced-motion: reduce) {
  .puzzle-screen .cell.pz-target-cell::after { animation: none; opacity: 0.8; }
}

.pz-side {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Same card family as the in-match side panels (.rp-card in units.css). */
.pz-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  padding: 12px 14px;
}
.pz-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--divider);
}
.pz-goal-text { color: var(--ink); line-height: 1.35; }
.pz-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pz-pill {
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
}
.pz-pill b { color: var(--bronze-2); }
.pz-pill-rush { color: var(--ink); }
.pz-turnhint { color: var(--ink-2); font-size: 0.85rem; }

.pz-resp {
  background: var(--bg-1);
  border: 1px solid var(--bronze);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  padding: 12px 14px;
}
.pz-resp-title { color: var(--ink); font-weight: 600; }
.pz-resp-sub { color: var(--ink-3); font-size: 0.82rem; margin-top: 2px; }
.pz-resp-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* Solving the last puzzle in a set leaves no Next and no Retry — the row would otherwise keep
   its top margin under the result line. The screen's own back button is the way out. */
.pz-resp-btns:empty { display: none; }
.pz-cost { opacity: 0.75; font-size: 0.85em; }

.pz-result {
  border-radius: var(--radius-m);
  padding: 14px;
  border: 1px solid var(--border);
  background: var(--bg-1);
  box-shadow: var(--shadow-1);
}
.pz-result.is-solved { border-color: var(--laurel-2); }
.pz-result.is-failed { border-color: var(--porphyry); }
.pz-result-head { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.pz-res-line { color: var(--ink-2); font-size: 0.88rem; margin-top: 4px; }
.pz-res-first { color: var(--gold); }

.pz-hint { color: var(--ink-2); font-size: 0.88rem; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.pz-hint:last-of-type { border-bottom: 0; }
.pz-hint-btn { margin-top: 6px; }
.pz-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pz-error { color: var(--porphyry-2); padding: 12px 0; }

/* Ghost button variant (no global .btn-ghost exists) */
.pz-page .btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--ink-3);
}
.pz-page .btn-ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-4); }

/* Three columns need more room than two: with a plan mounted the board is squeezed to ~26px
   cells on a 1366-class laptop, so that case stacks earlier. Stacked, `order` goes and the
   markup order stands: board, plan, side. */
@media (max-width: 1280px) {
  .pz-main.pz-has-plan { flex-direction: column; }
  .pz-main.pz-has-plan .pz-board-col { width: 100%; }
  .pz-main.pz-has-plan .pz-plan-col { flex: 1 1 auto; width: 100%; order: 0; }
  .pz-main.pz-has-plan .pz-side { flex: 1 1 auto; width: 100%; }
}
/* Stacked, the board column must be told to fill: `align-items: flex-start` otherwise shrinks it
   to the board's own width, and `_pzFitBoard` measures that — so each render fits the board to
   the last render's width and it walks a pixel smaller every time. */
@media (max-width: 1024px) {
  .pz-main { flex-direction: column; }
  .pz-board-col { width: 100%; }
  .pz-plan-col { flex: 1 1 auto; width: 100%; order: 0; }
  .pz-side { flex: 1 1 auto; width: 100%; }
}
@media (max-width: 640px) {
  /* Pips stay on the h2's line — flex-end puts them at the bottom of the eyebrow+h2 block,
     and the title shrinks (min-width:0) so the h2 wraps instead of pushing them off. */
  .pz-top-main { align-items: flex-end; gap: 10px; }
  .pz-top h2 { font-size: 1.25rem; }
  .puzzle-screen .board-wrap { padding: 6px; --board-label-width: 14px; }
}