.puzzle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 24px;
  align-items: start;
}

.puzzle-head > * {
  margin: 0;
}

.puzzle-head > * + * {
  margin-top: 12px;
}

.puzzle-label,
.puzzle-context,
.puzzle-tag {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.puzzle-label {
  color: var(--cream);
}

.puzzle-context {
  color: var(--cream-3);
  font-weight: 400;
}

.puzzle-intro {
  color: var(--cream-2);
}

.puzzle-head .puzzle-prompt {
  margin-top: 16px;
  color: var(--cream);
  text-wrap: balance;
}

.puzzle-head .puzzle-context {
  margin-top: 16px;
}

.puzzle-instruction {
  color: var(--cream-2);
}

.puzzle-status {
  min-height: 104px;
}

.puzzle-status:has(~ .puzzle-note:not([hidden])) {
  min-height: 0;
}

.puzzle-tag {
  margin: 0 0 8px;
  color: var(--cream-3);
}

.puzzle-tag.is-miss {
  color: var(--miss);
}

.puzzle-tag.is-good {
  color: var(--gold);
}

.puzzle-line {
  margin: 0;
  color: var(--cream);
  max-width: 34em;
}

.puzzle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.puzzle-actions .btn {
  min-height: 44px;
  min-width: 96px;
}

.puzzle-actions .btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

.puzzle-note {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.puzzle-note > p {
  margin: 0;
}

.puzzle-note > p + p {
  margin-top: 16px;
}

.puzzle-solution {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}

.puzzle-note-body {
  color: var(--cream-2);
  max-width: 34em;
}

.puzzle-report {
  margin-top: 32px;
}

.puzzle-report-line {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}

.puzzle-report-note {
  max-width: 34em;
  margin-top: 24px;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--gold);
}

.puzzle-report-note > p {
  margin: 0;
}

.puzzle-report-note-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.puzzle-report-note > .puzzle-report-note-text {
  margin-top: 10px;
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.45;
  color: var(--cream);
  text-wrap: pretty;
}

.puzzle-handoff {
  margin-top: 32px;
}

.cp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cp-board-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
}

.cp-board {
  display: grid;
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1;
  outline: 1px solid var(--rule-2);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.cp-rank {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  min-height: 0;
}

.cp-sq {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--sq-light);
  color: var(--sq-dark);
  font: inherit;
  cursor: default;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cp-sq.is-dark {
  background: var(--sq-dark);
  color: var(--sq-light);
}

.cp-sq.is-movable {
  cursor: pointer;
  touch-action: none;
}

.cp-sq.is-target,
.cp-sq.is-capture {
  cursor: pointer;
}

.cp-sq::before,
.cp-sq::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.cp-sq.is-last::before {
  inset: 0;
  background: rgba(10, 12, 17, 0.14);
}

.cp-sq.is-selected,
.cp-sq.is-hover {
  box-shadow: inset 0 0 0 3px var(--ink-0);
}

.cp-sq.is-target::after {
  left: 39%;
  top: 39%;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: var(--hl-dot);
}

.cp-sq.is-capture::after {
  inset: 0;
  box-shadow: inset 0 0 0 4px var(--hl-dot);
}

.cp-sq:focus-visible {
  z-index: 1;
  outline: 2px solid var(--ink-0);
  outline-offset: -7px;
}

.cp-coord {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.06em;
  pointer-events: none;
}

.cp-coord-rank {
  left: 3px;
  top: 3px;
}

.cp-coord-file {
  right: 3px;
  bottom: 3px;
}

.cp-pc {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.cp-pc use:first-child {
  fill: var(--cream);
}

.cp-pc use + use {
  fill: var(--ink-0);
}

.cp-pc.is-moving {
  z-index: 2;
  transition: transform var(--dur-2) var(--ease-move);
}

.cp-pc.is-rewinding {
  transition-duration: 160ms;
}

.cp-pc.is-lifted {
  opacity: 0.3;
}

.cp-pc.cp-fading {
  animation: cp-fade 120ms linear forwards;
}

.cp-ghost {
  z-index: 4;
  transform-origin: center;
}

.cp-ghost.is-returning {
  transition: transform 150ms var(--ease-out);
}

.cp-overlay {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  aspect-ratio: 1;
  overflow: visible;
  pointer-events: none;
}

.cp-overlay path,
.cp-overlay circle {
  fill: none;
  stroke: var(--ink-0);
  stroke-linecap: square;
}

.cp-mark,
.cp-box {
  stroke-width: 0.045;
}

.cp-mark {
  transform-box: fill-box;
  transform-origin: center;
  animation: cp-mark-in 180ms var(--ease-out) backwards;
}

.cp-mark.is-pulse {
  animation: cp-mark-in 180ms var(--ease-out) backwards, cp-pulse 1.4s ease-in-out 180ms 3;
}

.cp-ring {
  stroke-width: 0.05;
}

.cp-ring.is-mate {
  stroke-width: 0.07;
  animation: cp-show 240ms var(--ease-out) backwards;
}

.cp-box {
  stroke-dasharray: 1;
  animation: cp-draw 420ms var(--ease-out) 240ms backwards;
}

.cp-arrow path {
  stroke-width: 0.065;
  stroke-linecap: butt;
  stroke-dasharray: 1;
  animation: cp-draw 300ms var(--ease-out) 660ms backwards;
}

.cp-arrow polygon {
  fill: var(--ink-0);
  animation: cp-show 120ms linear 900ms backwards;
}

@keyframes cp-fade {
  to { opacity: 0; }
}

@keyframes cp-mark-in {
  from { opacity: 0; transform: scale(1.15); }
}

@keyframes cp-pulse {
  50% { opacity: 0.35; }
}

@keyframes cp-show {
  from { opacity: 0; }
}

@keyframes cp-draw {
  from { stroke-dashoffset: 1; }
}

@media (max-width: 767px) {
  .puzzle-label,
  .puzzle-context,
  .puzzle-tag,
  .puzzle-report-note-label {
    font-size: 11px;
  }

  .puzzle-report-note {
    padding-left: 16px;
  }

  .puzzle-solution,
  .puzzle-report-line {
    font-size: 13px;
  }

  .puzzle-handoff .btn {
    display: flex;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .puzzle {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(48px, 7.8vw, 128px);
    row-gap: 0;
  }

  .puzzle-board-wrap {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .puzzle-head,
  .puzzle-panel {
    grid-column: 2;
  }

  .puzzle-head + .puzzle-board-wrap + .puzzle-panel {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
  }

  .cp-coord {
    color: var(--cream-3);
    font-size: 11px;
  }

  .cp-coord-rank {
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
  }

  .cp-coord-file {
    right: auto;
    bottom: auto;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-board-wrap *,
  .cp-board-wrap *::before,
  .cp-board-wrap *::after {
    animation: none !important;
    transition: none !important;
  }
}

.static-render .cp-board-wrap *,
.static-render .cp-board-wrap *::before,
.static-render .cp-board-wrap *::after {
  animation: none !important;
  transition: none !important;
}