/* Plain Chess board, line player and puzzle. Every class is prefixed pc-. Hooks: build/COMPONENTS.md */

.pc-board {
  --pc-light: #F2E6D1;
  --pc-dark: #A88566;
  --pc-coord-on-light: #BA9C57;
  --pc-coord-on-dark: rgba(255, 248, 232, .86);
  --pc-last: rgba(255, 204, 0, .28);
  --pc-select: 186, 156, 87;
  --pc-gold: #F5C46B;
  --pc-ring: #F5C25C;
  --pc-dot: rgba(0, 0, 0, .22);
  --pc-wrong: rgba(230, 77, 66, .48);
  --pc-threat: rgba(232, 102, 56, .55);
  --pc-good: rgba(92, 196, 120, .5);
  --pc-piece-scale: .88;
  --pc-radius: 3.4%;
  --pc-shadow: 0 18px 44px -12px rgba(4, 10, 50, .55), 0 4px 12px -4px rgba(4, 10, 50, .35);
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--pc-radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--pc-dark);
  box-shadow: var(--pc-shadow);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  contain: layout paint;
}
/* Hairline rim and a faint inner gold line 4 pt in, like the app's board edge (BoardView.swift). */
.pc-board::before,
.pc-board::after {
  content: "";
  position: absolute;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
}
.pc-board::after { inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.pc-board::before { inset: 4px; border: 1px solid rgba(186, 156, 87, .2); }

.pc-squares {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}
.pc-sq { position: relative; }
.pc-light { background: var(--pc-light); }
.pc-dark { background: var(--pc-dark); }

.pc-coord {
  position: absolute;
  font: 700 9px/1 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: clamp(8px, 1.75cqw, 13.5px);
  letter-spacing: .01em;
  pointer-events: none;
}
.pc-light .pc-coord { color: var(--pc-coord-on-light); }
.pc-dark .pc-coord { color: var(--pc-coord-on-dark); }
.pc-rank { top: 6%; left: 7%; }
.pc-file { bottom: 5%; right: 8%; }

.pc-layer, .pc-arrows, .pc-hit { position: absolute; inset: 0; }
.pc-layer, .pc-arrows { pointer-events: none; }
.pc-under { z-index: 1; }
.pc-pieces { z-index: 2; }
.pc-arrows { z-index: 3; width: 100%; height: 100%; overflow: visible; }
.pc-over { z-index: 4; }
.pc-hit { z-index: 5; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }

/* Pieces: one img per piece, moved only with transforms. */
.pc-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  box-sizing: border-box;
  padding: calc((1 - var(--pc-piece-scale)) * 6.25%);
  object-fit: contain;
  filter: drop-shadow(0 .32cqw .38cqw rgba(0, 0, 0, .2));
  -webkit-user-drag: none;
}
.pc-piece.pc-b { filter: drop-shadow(0 .32cqw .38cqw rgba(0, 0, 0, .26)); }
.pc-piece.pc-moving { z-index: 2; }
.pc-piece.pc-leaving { z-index: 1; }
.pc-piece.pc-dragging {
  z-index: 3;
  scale: 1.12;
  filter: drop-shadow(0 1.1cqw 1.2cqw rgba(0, 0, 0, .32));
}

/* Marks. Each is one square, positioned like a piece. */
.pc-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  box-sizing: border-box;
}
.pc-mark-last { background: var(--pc-last); }
.pc-mark-wrong { background: var(--pc-wrong); }
.pc-mark-threat { background: var(--pc-threat); }
.pc-mark-good { background: var(--pc-good); }
.pc-mark-select::before {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 22%;
  border: 3px solid rgba(var(--pc-select), .95);
  border-width: max(2px, .42cqw);
  background: rgba(var(--pc-select), .16);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset;
}
.pc-mark-ring {
  box-shadow: inset 0 0 0 3px var(--pc-ring);
  box-shadow: inset 0 0 0 max(2px, .94cqw) var(--pc-ring), inset 0 0 1.4cqw 1.2cqw rgba(245, 194, 92, .28);
}
.pc-mark-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0 0 0 0 rgba(245, 194, 92, .55);
  animation: pc-ring-pulse 1.6s ease-out 2;
}
.pc-mark-check {
  background: radial-gradient(circle at 50% 54%, rgba(255, 64, 48, 1) 0%, rgba(240, 52, 40, .78) 30%, rgba(225, 40, 36, .32) 58%, rgba(220, 40, 40, 0) 76%);
}
.pc-mark-mate {
  background: radial-gradient(circle at 50% 56%, #FF6A50 0%, #E8402F 46%, #C42A24 100%);
  box-shadow: inset 0 0 0 max(1.5px, .36cqw) rgba(255, 196, 176, .5), inset 0 0 1.6cqw rgba(110, 10, 10, .35);
}
.pc-mark-dot::before {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: var(--pc-dot);
}
.pc-mark-dot.pc-mark-capture::before {
  inset: 11%;
  background: none;
  border: 4px solid var(--pc-dot);
  border-width: max(3px, 1.25cqw);
}
.pc-mark-hover { background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 max(2px, .5cqw) rgba(255, 255, 255, .55); }

/* Arrows: the group is semi-opaque as a whole, so shaft and head never double up. */
.pc-arrow { opacity: .9; }
.pc-arrow-gold { opacity: .93; }
.pc-arrow-gray { opacity: .82; }

/* Hit layer: transparent buttons over everything, so focus rings sit above pieces. */
.pc-sq-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: default;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pc-sq-btn.pc-movable { touch-action: none; }
.pc-interactive:not(.pc-locked) .pc-sq-btn { cursor: pointer; }
.pc-sq-btn:focus { outline: none; }
.pc-sq-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 5px rgba(20, 42, 143, .9);
  position: relative;
  z-index: 1;
}

.pc-shake { animation: pc-shake .38s ease-in-out; }

@keyframes pc-shake {
  0%, 100% { translate: 0 0; }
  20% { translate: -9% 0; }
  40% { translate: 8% 0; }
  60% { translate: -6% 0; }
  80% { translate: 4% 0; }
}
@keyframes pc-ring-pulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 194, 92, .6); }
  100% { box-shadow: 0 0 0 1.6cqw rgba(245, 194, 92, 0); }
}

.pc-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Confetti canvas (confetti.js). */
.pc-confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
}
.pc-confetti.pc-confetti-local { position: absolute; }

/* ---------------------------------------------------------------- Puzzle (puzzle.js) */

.pc-puzzle {
  --pc-p-gold: #F5C46B;
  --pc-p-gold-light: #FFE091;
  --pc-p-gold-deep: #EBAD3D;
  --pc-p-on-gold: #331F08;
  --pc-p-good: #6BD98C;
  --pc-p-miss: #E6544A;
  --pc-p-text: #fff;
  --pc-p-muted: rgba(255, 255, 255, .68);
  --pc-p-card: rgba(255, 255, 255, .06);
  --pc-p-hairline: rgba(255, 255, 255, .12);
  position: relative;
  display: grid;
  gap: 14px;
  color: var(--pc-p-text);
  font: 400 15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.pc-puzzle-head { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.pc-puzzle-turn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .08);
  display: grid;
  place-items: center;
}
.pc-puzzle-turn::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #F7F2E6;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.pc-puzzle[data-phase="solved"] .pc-puzzle-turn::before {
  background: #33A855 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.pc-puzzle-titles { flex: 1; min-width: 0; }
.pc-puzzle-title {
  margin: 0;
  font: 700 21px/1.15 ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  letter-spacing: -.01em;
}
.pc-puzzle-goal { margin: 2px 0 0; color: var(--pc-p-muted); font-size: 14px; }
.pc-puzzle-band {
  flex: none;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.pc-puzzle-board { position: relative; }

.pc-puzzle-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .72); }
.pc-puzzle-segs { display: flex; gap: 6px; }
.pc-puzzle-seg { width: 34px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .14); transition: background-color .2s; }
.pc-puzzle-seg[data-state="done"] { background: var(--pc-p-good); }
.pc-puzzle-seg[data-state="now"] { background: var(--pc-p-gold); }
.pc-puzzle-seg[data-state="miss"] { background: var(--pc-p-miss); }

.pc-puzzle-feedback {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 20px;
  background: var(--pc-p-card);
  box-shadow: inset 0 0 0 1px var(--pc-p-hairline);
}
.pc-puzzle-feedback[hidden] { display: flex; visibility: hidden; }
.pc-puzzle-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08) center / 20px no-repeat;
}
.pc-puzzle-feedback[data-tone="neutral"] .pc-puzzle-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.75)' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2v5M12 17v5M2 12h5M17 12h5'/%3E%3C/svg%3E"); }
.pc-puzzle-feedback[data-tone="hint"] { background: rgba(245, 196, 107, .12); box-shadow: inset 0 0 0 1px rgba(245, 196, 107, .4); }
.pc-puzzle-feedback[data-tone="hint"] .pc-puzzle-icon { background-color: rgba(245, 196, 107, .2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C46B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.pc-puzzle-feedback[data-tone="good"] { background: rgba(107, 217, 140, .12); box-shadow: inset 0 0 0 1px rgba(107, 217, 140, .4); }
.pc-puzzle-feedback[data-tone="good"] .pc-puzzle-icon,
.pc-puzzle-feedback[data-tone="solved"] .pc-puzzle-icon { background-color: rgba(107, 217, 140, .2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236BD98C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E"); }
.pc-puzzle-feedback[data-tone="wrong"] { background: rgba(230, 84, 74, .12); box-shadow: inset 0 0 0 1px rgba(230, 84, 74, .45); }
.pc-puzzle-feedback[data-tone="wrong"] .pc-puzzle-icon { background-color: rgba(230, 84, 74, .2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6544A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.pc-puzzle-feedback[data-tone="solved"] { background: linear-gradient(135deg, rgba(245, 196, 107, .16), rgba(245, 196, 107, .05)); box-shadow: inset 0 0 0 1px rgba(245, 196, 107, .45); }
.pc-puzzle-feedback[data-tone="answer"] .pc-puzzle-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.85)' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.pc-puzzle-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pc-puzzle-eyebrow {
  font: 800 11px/1.2 ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pc-p-gold);
}
.pc-puzzle-eyebrow:empty, .pc-puzzle-detail:empty { display: none; }
.pc-puzzle-msg { font-size: 15px; color: rgba(255, 255, 255, .86); }
.pc-puzzle-feedback:not([data-tone="neutral"]) .pc-puzzle-msg { font: 700 17px/1.25 ui-serif, "New York", "Iowan Old Style", Georgia, serif; color: #fff; }
.pc-puzzle-detail { font-size: 13px; color: rgba(255, 255, 255, .7); }
.pc-puzzle-action {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  font-weight: 700; font-size: 14px; line-height: 1;
  font-family: inherit;
  color: var(--pc-p-on-gold);
  background: linear-gradient(180deg, var(--pc-p-gold-light), var(--pc-p-gold) 55%, var(--pc-p-gold-deep));
  cursor: pointer;
}
.pc-puzzle-action[hidden] { display: none; }

.pc-puzzle-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 64px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px var(--pc-p-hairline);
  overflow: hidden;
}
.pc-puzzle-tools[hidden] { display: none; }
.pc-puzzle-tool {
  appearance: none;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .9);
  font-weight: 600; font-size: 12.5px; line-height: 1.1;
  font-family: inherit;
  cursor: pointer;
}
.pc-puzzle-tool::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--pc-icon) center / contain no-repeat; mask: var(--pc-icon) center / contain no-repeat; }
.pc-puzzle-tool[data-tool="hint"] { color: var(--pc-p-gold); --pc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.pc-puzzle-tool[data-tool="restart"] { --pc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v6h6'/%3E%3Cpath d='M5.6 15a7 7 0 1 0 1.3-7.6L4 10'/%3E%3C/svg%3E"); }
.pc-puzzle-tool[data-tool="answer"] { --pc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.pc-puzzle-tool:disabled { opacity: .32; cursor: default; }
/* Unavailable tools stay focusable (aria-disabled), so keyboard focus is never dropped; dimmed by colour, not
   opacity, so a focus ring on them stays bright. */
.pc-puzzle-tool[aria-disabled="true"] { cursor: default; color: rgba(255, 255, 255, .32); }
.pc-puzzle-tool[data-tool="hint"][aria-disabled="true"] { color: rgba(245, 196, 107, .38); }
@media (hover: hover) {
  .pc-puzzle-tool:not(:disabled):not([aria-disabled="true"]):hover { background: rgba(255, 255, 255, .05); }
}
.pc-puzzle-tool:focus-visible, .pc-puzzle-action:focus-visible, .pc-puzzle-next:focus-visible, .pc-puzzle-dismiss:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.pc-puzzle-tool:focus-visible { outline-offset: -4px; border-radius: 18px; }

/* Finished: medal, cheer, badge, the line and "Give me another". */
.pc-puzzle[data-phase="solved"] .pc-puzzle-feedback,
.pc-puzzle[data-phase="answer"] .pc-puzzle-feedback,
.pc-puzzle[data-phase="solved"] .pc-puzzle-progress,
.pc-puzzle[data-phase="answer"] .pc-puzzle-progress { display: none; }
.pc-puzzle-done {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px 14px;
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(52, 41, 31, .94), rgba(26, 23, 26, .96));
  box-shadow: inset 0 0 0 1.2px rgba(245, 196, 107, .55), 0 18px 40px -16px rgba(4, 10, 50, .6);
}
.pc-puzzle-done[hidden] { display: none; }
.pc-puzzle-done[data-kind="answer"] .pc-puzzle-medal,
.pc-puzzle-done[data-kind="answer"] .pc-puzzle-done-head { display: none; }
.pc-puzzle-medal {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5' fill='none' stroke='%23331F08' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 54% no-repeat,
    linear-gradient(135deg, #FFE091, #F5C46B 52%, #EBAD3D);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 8px 22px -6px rgba(235, 173, 61, .75), 0 0 0 6px rgba(245, 196, 107, .12);
}
.pc-puzzle-done-head { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.pc-puzzle-cheer { margin: 0; font: 700 27px/1.05 ui-serif, "New York", "Iowan Old Style", Georgia, serif; letter-spacing: -.01em; }
.pc-puzzle-cheer[hidden] { display: none; }
.pc-puzzle-sub { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .68); }
.pc-puzzle-sub:empty { display: none; }
.pc-puzzle-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  margin-top: 4px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pc-p-good);
  background: rgba(107, 217, 140, .14);
  box-shadow: inset 0 0 0 1px rgba(107, 217, 140, .4);
}
.pc-puzzle-badge::before { content: ""; width: 10px; height: 13px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M7.5 0L0 8h5l-1 6 8-8.5H7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M7.5 0L0 8h5l-1 6 8-8.5H7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pc-puzzle-badge[hidden] { display: none; }
.pc-puzzle-line {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
}
.pc-puzzle-line-label { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .58); }
.pc-puzzle-line-moves { font: 600 16px/1.2 ui-serif, "New York", "Iowan Old Style", Georgia, serif; color: var(--pc-p-gold-light); word-spacing: .12em; }
.pc-puzzle-next {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  font-family: inherit;
  color: var(--pc-p-on-gold);
  background: linear-gradient(180deg, var(--pc-p-gold-light), var(--pc-p-gold) 55%, var(--pc-p-gold-deep));
  box-shadow: 0 10px 24px -10px rgba(235, 173, 61, .7), inset 0 1px 0 rgba(255, 255, 255, .5);
  cursor: pointer;
}
.pc-puzzle-next::after { content: "→"; font-weight: 800; }
@media (hover: hover) {
  .pc-puzzle-next:hover, .pc-puzzle-action:hover { filter: brightness(1.05); }
}
.pc-puzzle-done[data-celebrate] { animation: pc-pop .45s cubic-bezier(.2, .8, .2, 1); }
.pc-puzzle-done[data-celebrate] .pc-puzzle-medal { animation: pc-medal .6s cubic-bezier(.3, 1.6, .5, 1) .05s backwards; }

@keyframes pc-pop {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes pc-medal {
  from { transform: scale(.3); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-mark-ring::after, .pc-puzzle-done[data-celebrate], .pc-puzzle-done[data-celebrate] .pc-puzzle-medal { animation: none; }
  .pc-puzzle-seg { transition: none; }
}

/* Windows High Contrast and other forced-colors modes: the board keeps its own squares, marks, arrows and pieces
   (they are the game; forced colours would paint every square the same Canvas colour), and keyboard focus on a
   square uses the system highlight colour. */
@media (forced-colors: active) {
  .pc-board { forced-color-adjust: none; }
  .pc-sq-btn:focus-visible { outline-color: Highlight; }
}