/* puzzles: three Stage Lab stages, playable. Inside the phone every size is in
   iPhone points (var(--pt)); values are the app's (LLTheme, LLComponents and
   each stage view). Motion uses SwiftUI's springs as linear() easings, set on
   the section by puzzles.js; without linear() support a plain ease stands in. */

[data-scene="puzzles"] {
  padding-block: clamp(110px, 16vh, 180px);
  background: var(--page);
  --puz-ink: var(--app-ink);
  --puz-sec: rgba(26, 26, 26, 0.55);
  --puz-stroke: rgba(26, 26, 26, 0.1);
  --puz-warm: #c48b5a;
  --puz-water: #6b8ba6;
  --puz-wood: #a67b5b;
}

/* ---------------------------------------------------------------- page */
.puz-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}
.puz-copy .h2 { margin-bottom: 22px; }
.puz-copy .lede { max-width: 21em; }
.puz-note {
  margin-top: 18px; max-width: 30em;
  font-size: 17px; line-height: 1.47; color: var(--muted);
}
.puz-controls {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
}

/* the stock segmented control */
.puz-seg {
  --i: 0;
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 2px; border-radius: 9px;
  background: rgba(118, 118, 128, 0.12);
  isolation: isolate;
}
.puz-seg-thumb {
  position: absolute; z-index: -1;
  top: 2px; bottom: 2px; left: 2px;
  width: calc((100% - 4px) / 3);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform 0.36s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.puz-seg button {
  position: relative;
  padding: 7px 16px; min-height: 36px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.01em; white-space: nowrap;
  border-radius: 7px;
}
.puz-seg button[aria-selected="true"] { font-weight: 600; }
.puz-seg button:focus-visible { outline: 2px solid #0071e3; outline-offset: 1px; }
.puz-seg button:not([aria-selected="true"]) + button:not([aria-selected="true"])::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px;
  background: rgba(60, 60, 67, 0.18);
}
.puz-restart { font-size: 17px; font-weight: 600; color: var(--gold-deep); padding: 6px 0; }
.puz-restart:hover { text-decoration: underline; }
.puz-restart:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; border-radius: 4px; }

.puz-phone {
  --phone-w: clamp(260px, calc((100svh - 80px) * 0.4868), 384px);
}

@media (max-width: 860px) {
  .puz-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 44px; }
  .puz-copy { justify-self: stretch; }
  .puz-controls { margin-top: 30px; }
  .puz-phone { --phone-w: clamp(250px, min(calc(100vw - 44px), calc((100svh - 120px) * 0.4868)), 350px); }
}
@media (max-width: 420px) {
  .puz-controls { gap: 12px; }
  .puz-seg { width: 100%; }
  .puz-seg button { padding: 7px 4px; font-size: 13px; }
}

/* ------------------------------------------------------- phone chrome */
.puz-screen { font-family: var(--serif); }
.puz-edge {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0;
  height: calc(132 * var(--pt));
  background: linear-gradient(to bottom, var(--parch) 0%, var(--parch) 80%, rgba(239, 227, 199, 0.85) 88%, rgba(239, 227, 199, 0) 100%);
  pointer-events: none;
}
.puz-bar {
  position: absolute; z-index: 3;
  top: calc(60 * var(--pt)); left: calc(16 * var(--pt)); right: calc(16 * var(--pt));
  height: calc(44 * var(--pt));
  display: flex; align-items: center; justify-content: space-between;
}
.puz-glass {
  min-width: calc(44 * var(--pt)); height: calc(44 * var(--pt));
  border-radius: calc(22 * var(--pt));
  display: grid; place-items: center;
  background: rgba(253, 247, 228, 0.94);
  box-shadow: 0 calc(5 * var(--pt)) calc(14 * var(--pt)) rgba(138, 106, 59, 0.16), inset 0 0 0 0.5px rgba(255, 255, 255, 0.95);
}
.puz-close { color: var(--gold); }
.puz-close svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.puz-count {
  padding: 0 calc(10 * var(--pt));
  font-family: var(--sans); font-size: calc(15 * var(--pt)); color: rgba(26, 26, 26, 0.7);
  font-variant-numeric: tabular-nums;
}
.puz-title {
  position: absolute; left: calc(56 * var(--pt)); right: calc(56 * var(--pt));
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--sans); font-weight: 600; font-size: calc(17 * var(--pt)); color: var(--puz-ink);
}
.puz-scroll {
  position: absolute; inset: 0;
  overflow-x: hidden; overflow-y: auto;
  padding: calc(114 * var(--pt)) 0 calc(34 * var(--pt));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.puz-scroll::-webkit-scrollbar { display: none; }
.puz-view { padding-bottom: calc(40 * var(--pt)); }

/* ---------------------------------------------------------- app parts */
.puz-screen button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.puz-screen button:focus-visible, .puz-pan:focus-visible, .puz-menu select:focus-visible {
  outline: calc(2 * var(--pt)) solid var(--gold-deep); outline-offset: calc(2 * var(--pt));
}
.puz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.puz-pad { padding: calc(16 * var(--pt)) calc(20 * var(--pt)) calc(24 * var(--pt)); }
.puz-cards { display: flex; flex-direction: column; gap: calc(16 * var(--pt)); padding: 0 calc(20 * var(--pt)) calc(16 * var(--pt)); }
.puz-cards-24 { gap: calc(24 * var(--pt)); padding-bottom: 0; }
.puz-feedback { padding: 0 calc(20 * var(--pt)); }
.puz-caps {
  font-size: calc(12 * var(--pt)); font-weight: 600;
  letter-spacing: calc(0.8 * var(--pt)); text-transform: uppercase;
  color: var(--puz-sec);
}

/* LLStageHeader */
.puz-header { display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--pt)); }
.puz-header-icon {
  width: calc(52 * var(--pt)); height: calc(52 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(201, 166, 107, 0.08); color: rgba(201, 166, 107, 0.75);
  --sw: 1.3;
}
.puz-header-icon svg { width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); }
.puz-instruction {
  font-family: var(--serif); font-weight: 600; font-size: calc(20 * var(--pt));
  line-height: 1.32; text-align: center; color: var(--puz-ink); letter-spacing: 0;
}

/* LLSituationCard */
.puz-situation {
  padding: calc(18 * var(--pt));
  font-size: calc(18 * var(--pt)); line-height: 1.5;
  background: var(--cream); border-radius: calc(14 * var(--pt));
  box-shadow: inset 0 0 0 0.5px rgba(201, 166, 107, 0.1), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.06);
}

/* stageCard */
.puz-card {
  padding: calc(16 * var(--pt));
  background: var(--cream); border-radius: calc(14 * var(--pt));
  box-shadow: inset 0 0 0 0.5px rgba(201, 166, 107, 0.12), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.06);
}
.puz-card[hidden], .puz-screen [hidden] { display: none !important; }

/* LLButton */
.puz-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--pt));
  padding: calc(14 * var(--pt)) calc(20 * var(--pt));
  border-radius: calc(10 * var(--pt));
  background: var(--gold); color: var(--cream);
  box-shadow: inset 0 0 0 1px rgba(201, 166, 107, 0.3);
  font-weight: 600; font-size: calc(17 * var(--pt)); line-height: calc(22 * var(--pt));
  transition: opacity 0.2s, transform 0.25s var(--spring);
}
.puz-btn.secondary {
  background: rgba(201, 166, 107, 0.06); color: var(--gold-deep);
  box-shadow: inset 0 0 0 1px rgba(201, 166, 107, 0.55);
}
.puz-btn:disabled { opacity: 0.5; cursor: default; }
.puz-btn:not(:disabled):active { transform: scale(0.97); }
.puz-ico { display: grid; }
.puz-ico svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); --sw: 2; }
.puz-row { display: flex; gap: calc(10 * var(--pt)); }

/* LLFeedbackLine */
.puz-fline {
  display: flex; align-items: flex-start; gap: calc(10 * var(--pt));
  padding: calc(12 * var(--pt)) calc(16 * var(--pt));
  border-radius: calc(10 * var(--pt));
  background: rgba(196, 139, 90, 0.08);
  font-weight: 500; font-size: calc(15 * var(--pt)); line-height: 1.4;
}
.puz-fline > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(10 * var(--pt)); }
.puz-fline-ico { color: var(--puz-warm); display: grid; margin-top: calc(2 * var(--pt)); }
.puz-fline-ico svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }

/* LLHintBubble (content can carry one; the Stage Lab's three don't) */
.puz-hint {
  display: flex; gap: calc(12 * var(--pt)); padding: calc(16 * var(--pt));
  border-radius: calc(14 * var(--pt)); background: rgba(196, 139, 90, 0.05);
  box-shadow: inset 0 0 0 0.5px rgba(196, 139, 90, 0.15);
}
.puz-hint i { font-style: normal; width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); border-radius: 50%; display: grid; place-items: center; background: rgba(196, 139, 90, 0.12); color: var(--puz-warm); }
.puz-hint svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.puz-hint p { flex: 1; font-size: calc(17 * var(--pt)); line-height: 1.45; }

/* LLRevealButton */
.puz-reveal {
  align-self: center;
  display: inline-flex; align-items: center; gap: calc(6 * var(--pt));
  min-height: calc(44 * var(--pt)); padding: 0 calc(18 * var(--pt));
  border-radius: 999px; color: var(--gold);
  background: rgba(201, 166, 107, 0.08); box-shadow: inset 0 0 0 0.5px rgba(201, 166, 107, 0.15);
  font-weight: 500; font-size: calc(14 * var(--pt));
}
.puz-reveal i { display: grid; }
.puz-reveal svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); }
.puz-reveal:disabled { opacity: 0.5; }

/* LLDivider(ornamental) */
.puz-divider { display: flex; align-items: center; gap: calc(12 * var(--pt)); padding: calc(4 * var(--pt)) calc(32 * var(--pt)); width: 100%; }
.puz-divider i { flex: 1; height: 0.5px; background: var(--puz-stroke); }
.puz-divider b { width: calc(5 * var(--pt)); height: calc(5 * var(--pt)); background: rgba(201, 166, 107, 0.4); transform: rotate(45deg); }

/* LLStageCompletion */
.puz-stack { display: flex; flex-direction: column; gap: calc(14 * var(--pt)); }
.puz-stack-16 { gap: calc(16 * var(--pt)); }
.puz-complete { display: flex; flex-direction: column; align-items: center; gap: calc(18 * var(--pt)); padding-top: calc(8 * var(--pt)); }
.puz-seal {
  width: calc(64 * var(--pt)); height: calc(64 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center; background: rgba(91, 140, 90, 0.08); color: var(--success);
  animation: puz-bounce var(--puz-pop-d) var(--puz-pop, var(--spring)) both;
}
.puz-seal i { display: grid; }
.puz-seal svg { width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); }
@keyframes puz-bounce { from { transform: scale(0.8); opacity: 0; } to { transform: none; opacity: 1; } }
.puz-success { font-weight: 600; font-size: calc(17 * var(--pt)); text-align: center; line-height: 1.35; }
.puz-detail { font-weight: 500; font-size: calc(15 * var(--pt)); color: var(--puz-sec); font-variant-numeric: tabular-nums; }
.puz-explain {
  width: 100%;
  display: flex; align-items: flex-start; gap: calc(12 * var(--pt)); padding: calc(16 * var(--pt));
  background: var(--cream); border-radius: calc(14 * var(--pt));
  box-shadow: inset 0 0 0 0.5px rgba(201, 166, 107, 0.12), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.06);
  font-size: calc(17 * var(--pt)); line-height: 1.47;
}
.puz-explain.solved { box-shadow: inset 0 0 0 0.5px rgba(91, 140, 90, 0.15), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.06); }
.puz-explain-ico {
  flex: none; width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center; background: rgba(201, 166, 107, 0.1); color: var(--gold);
}
.puz-explain.solved .puz-explain-ico { background: rgba(91, 140, 90, 0.12); color: var(--success); }
.puz-explain-ico svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.puz-complete .puz-btn { width: 100%; }

/* entrances (SwiftUI .transition(.opacity.combined(with: .move(...)))) */
.puz-in { animation: puz-in-down 0.3s ease-in-out both; }
.puz-in-up { animation: puz-in-up var(--puz-row-d) var(--puz-row, var(--out)) both; }
@keyframes puz-in-down { from { opacity: 0; transform: translateY(calc(-12 * var(--pt))); } }
@keyframes puz-in-up { from { opacity: 0; transform: translateY(calc(24 * var(--pt))); } }

/* ===================================================== balance scale */
.puz-scalecard { display: flex; flex-direction: column; gap: calc(16 * var(--pt)); }
.puz-counter { display: flex; align-items: center; gap: calc(10 * var(--pt)); }
.puz-counter .puz-caps { flex: 1; }
.puz-dots { display: flex; gap: calc(5 * var(--pt)); }
.puz-dots i {
  width: calc(10 * var(--pt)); height: calc(10 * var(--pt)); border-radius: 50%;
  box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) var(--gold);
  transform: scale(0.85);
  transition: background-color 0.25s, transform var(--puz-count-d) var(--puz-count, var(--spring));
}
.puz-dots i.on { background: var(--gold); transform: none; }
.puz-left-n { display: inline-block; min-width: calc(10 * var(--pt)); text-align: right; font-weight: 700; font-size: calc(15 * var(--pt)); font-variant-numeric: tabular-nums; }

.puz-scale { position: relative; }
.puz-pans {
  display: flex; justify-content: center; align-items: flex-start;
  gap: calc(20 * var(--pt));
  padding: calc(16 * var(--pt)) 0 calc(25.13 * var(--pt));
}
.puz-post {
  position: absolute; left: 50%; top: calc(16 * var(--pt)); bottom: calc(6 * var(--pt));
  width: calc(4 * var(--pt)); margin-left: calc(-2 * var(--pt)); background: var(--gold);
}
.puz-base {
  position: absolute; left: 50%; bottom: 0;
  width: calc(76 * var(--pt)); height: calc(6 * var(--pt)); margin-left: calc(-38 * var(--pt));
  border-radius: 99px; background: var(--gold);
}
.puz-beam {
  position: absolute; left: 50%; top: calc(13 * var(--pt));
  width: calc(176 * var(--pt)); height: calc(6 * var(--pt)); margin-left: calc(-88 * var(--pt));
  border-radius: 99px; background: var(--gold);
  transform: rotate(var(--deg, 0deg));
  transition: transform var(--puz-tilt-d) var(--puz-tilt, var(--spring));
  pointer-events: none;
}
.puz-pivot {
  position: absolute; left: 50%; top: calc(9 * var(--pt));
  width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); margin-left: calc(-7 * var(--pt));
  border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 calc(2.5 * var(--pt)) var(--gold);
  pointer-events: none;
}
.puz-pan {
  position: relative; width: calc(140 * var(--pt));
  padding-top: calc(28 * var(--pt));
  transform: translateY(calc(var(--dy, 0) * var(--pt)));
  transition: transform var(--puz-tilt-d) var(--puz-tilt, var(--spring));
  cursor: default; outline: none;
}
.puz-snap .puz-pan, .puz-snap .puz-beam { transition: none; }
.puz-strings { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 2.5 * var(--pt)); overflow: visible; }
.puz-strings line { stroke: rgba(201, 166, 107, 0.7); stroke-width: 1; }
.puz-pangrid {
  position: relative;
  display: grid; grid-template-columns: repeat(3, calc(44 * var(--pt)));
  grid-auto-rows: calc(44 * var(--pt));
  justify-content: center; align-content: end;
  min-height: calc(44 * var(--pt));
}
.puz-rim { height: calc(5 * var(--pt)); border-radius: 99px; background: var(--gold); }
.puz-target {
  position: absolute; left: 0; right: 0; top: calc(28 * var(--pt)); bottom: calc(5 * var(--pt));
  border-radius: calc(10 * var(--pt));
  border: calc(1.5 * var(--pt)) dashed rgba(201, 166, 107, 0.6);
  opacity: 0; transition: opacity 0.2s ease-in-out; pointer-events: none;
}
.puz-pan.is-target { cursor: pointer; }
.puz-pan.is-target .puz-target { opacity: 1; }
.puz-pan.is-over .puz-target { opacity: 1; border-style: solid; }

.puz-tray { display: flex; justify-content: center; gap: calc(4 * var(--pt)); flex-wrap: wrap; }
.puz-slot { position: relative; width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); }
.puz-ring {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.puz-ring::before {
  content: ""; width: calc(36 * var(--pt)); height: calc(36 * var(--pt)); border-radius: 50%;
  border: 1px dashed rgba(26, 26, 26, 0.2);
  opacity: 0; transition: opacity 0.2s;
}
.puz-ring.away::before { opacity: 1; }
.puz-coin {
  position: relative; z-index: 1;
  width: calc(44 * var(--pt)); height: calc(44 * var(--pt));
  display: grid; place-items: center;
  transition: transform var(--puz-move-d) var(--puz-move, var(--spring));
  touch-action: none; cursor: grab;
}
.puz-slot > .puz-coin { position: absolute; inset: 0; }
.puz-coin:disabled { cursor: default; }
.puz-coin span {
  width: calc(36 * var(--pt)); height: calc(36 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--parch); color: var(--puz-ink);
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.18), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.06);
  font-weight: 600; font-size: calc(16 * var(--pt)); font-variant-numeric: tabular-nums;
  transition: transform var(--puz-select-d) var(--puz-select, var(--spring)), background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.puz-coin.selected span {
  background: var(--gold); color: var(--cream);
  box-shadow: inset 0 0 0 calc(2 * var(--pt)) var(--gold), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.06);
  transform: translateY(calc(-3 * var(--pt))) scale(1.1);
}
.puz-coin.dragging { z-index: 5; cursor: grabbing; }
.puz-coin.dragging span { box-shadow: inset 0 0 0 calc(2 * var(--pt)) var(--gold), 0 calc(8 * var(--pt)) calc(16 * var(--pt)) rgba(26, 26, 26, 0.18); }

.puz-history { display: flex; flex-direction: column; gap: calc(10 * var(--pt)); }
.puz-hrow { display: flex; align-items: flex-start; gap: calc(10 * var(--pt)); }
.puz-hrow.is-new { animation: puz-in-down 0.3s ease-in-out both; }
.puz-hbadge {
  flex: none; width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(201, 166, 107, 0.1); color: var(--gold);
  font-weight: 700; font-size: calc(12 * var(--pt));
}
.puz-hpans { font-weight: 600; font-size: calc(16 * var(--pt)); line-height: calc(22 * var(--pt)); font-variant-numeric: tabular-nums; }
.puz-hout { display: flex; align-items: center; gap: calc(6 * var(--pt)); margin-top: calc(3 * var(--pt)); font-size: calc(17 * var(--pt)); }
.puz-hout i { width: calc(16 * var(--pt)); height: calc(2.5 * var(--pt)); border-radius: 99px; background: var(--puz-ink); transform: rotate(var(--a)); }

.puz-answer { display: flex; flex-direction: column; gap: calc(14 * var(--pt)); }
.puz-answer-row { display: flex; align-items: center; gap: calc(12 * var(--pt)); }
.puz-answer-label { flex: 1; font-weight: 600; font-size: calc(17 * var(--pt)); }
.puz-menu { position: relative; display: inline-flex; align-items: center; }
.puz-menu select {
  -webkit-appearance: none; appearance: none;
  border: 0; background: transparent; color: var(--puz-ink);
  font-family: var(--sans); font-size: calc(17 * var(--pt));
  padding: calc(6 * var(--pt)) calc(22 * var(--pt)) calc(6 * var(--pt)) calc(8 * var(--pt));
  border-radius: calc(8 * var(--pt));
  cursor: pointer; text-align: right;
}
.puz-menu select:disabled { opacity: 0.35; cursor: default; }
.puz-menu i { position: absolute; right: calc(4 * var(--pt)); pointer-events: none; display: grid; color: var(--puz-ink); }
.puz-menu select:disabled + i { opacity: 0.35; }
.puz-menu svg { width: calc(9 * var(--pt)); height: calc(15 * var(--pt)); }
.puz-answer.is-off .puz-answer-label { opacity: 0.5; }
.puz-sides { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 9px; background: rgba(118, 118, 128, 0.12); }
.puz-sides button { padding: calc(6 * var(--pt)); border-radius: 7px; font-family: var(--sans); font-size: calc(13 * var(--pt)); font-weight: 500; }
.puz-sides [aria-checked="true"] { background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); font-weight: 600; }

.puz-chips { display: flex; flex-wrap: wrap; gap: calc(6 * var(--pt)); }
.puz-chip {
  min-width: calc(40 * var(--pt)); text-align: center;
  padding: calc(5 * var(--pt)) calc(10 * var(--pt));
  border-radius: 99px; background: var(--cream); box-shadow: inset 0 0 0 1px var(--puz-stroke);
  font-weight: 600; font-size: calc(14 * var(--pt)); font-variant-numeric: tabular-nums;
}
.puz-chips.wide .puz-chip { min-width: calc(110 * var(--pt)); text-align: left; }
.puz-feedback .puz-stack, .puz-feedback .puz-in-up { padding-bottom: 0; }

/* ======================================================= code breaker */
.puz-play { display: flex; flex-direction: column; gap: calc(20 * var(--pt)); }
.puz-play-16 { gap: calc(16 * var(--pt)); }
.puz-boardwrap { display: flex; flex-direction: column; gap: calc(12 * var(--pt)); }
.puz-boardlabel { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--pt)); }
.puz-pill-n {
  padding: calc(3 * var(--pt)) calc(8 * var(--pt)); border-radius: 99px;
  background: rgba(201, 166, 107, 0.08); color: var(--gold);
  font-weight: 700; font-size: calc(13 * var(--pt)); font-variant-numeric: tabular-nums;
}
.puz-board {
  background: var(--cream); border-radius: calc(14 * var(--pt)); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(201, 166, 107, 0.15), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.06);
}
.puz-crow {
  display: flex; align-items: center; gap: calc(12 * var(--pt));
  padding: calc(10 * var(--pt)) calc(14 * var(--pt));
  transition: background-color 0.25s;
}
.puz-crow + .puz-crow { box-shadow: inset 0 0.5px 0 var(--puz-stroke); }
.puz-crow.ph { padding-block: calc(8 * var(--pt)); }
.puz-crow.entry { background: rgba(201, 166, 107, 0.05); }
.puz-crow.entry.done { background: rgba(91, 140, 90, 0.06); }
.puz-crow.wrong { background: rgba(199, 91, 57, 0.04); }
.puz-crow.is-new { animation: puz-in-down var(--puz-row-d) var(--puz-row, var(--out)) both; }
.puz-crule { height: 1px; background: rgba(201, 166, 107, 0.2); }
.puz-badge {
  flex: none; width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: calc(12 * var(--pt)); font-variant-numeric: tabular-nums;
}
.puz-badge.normal { background: rgba(201, 166, 107, 0.1); color: var(--gold); }
.puz-badge.active { background: var(--gold); color: #fff; }
.puz-badge.placeholder { background: rgba(201, 166, 107, 0.05); color: var(--puz-sec); }
.puz-badge.wrong { background: var(--error); color: #fff; }
.puz-badge.correct { background: var(--success); color: #fff; }
.puz-badge svg { width: calc(10 * var(--pt)); height: calc(10 * var(--pt)); }
.puz-tiles { display: flex; gap: calc(6 * var(--pt)); flex: 1; }
.puz-tilebtn { display: grid; border-radius: calc(9 * var(--pt)); }
.puz-tilebtn:disabled { cursor: default; }
.puz-tile {
  width: calc(42 * var(--pt)); height: calc(42 * var(--pt));
  display: grid; place-items: center;
  border-radius: calc(9 * var(--pt));
  font-size: calc(21 * var(--pt)); line-height: 1;
}
.puz-tile.played { background: rgba(239, 227, 199, 0.6); box-shadow: inset 0 0 0 0.5px var(--puz-stroke); }
.puz-tile.entry { background: var(--cream); box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) rgba(201, 166, 107, 0.5); }
.puz-tile.entry.empty { background: var(--parch); box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) rgba(201, 166, 107, 0.35); }
.puz-tile.correct { background: var(--cream); box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) rgba(91, 140, 90, 0.5); }
.puz-sym-text { font-family: var(--serif); font-weight: 600; }
.puz-sym-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.puz-pop { animation: puz-pop var(--puz-select-d) var(--puz-select, var(--spring)) both; display: inline-block; }
@keyframes puz-pop { from { transform: scale(0.6); opacity: 0; } }
.puz-hole { width: calc(42 * var(--pt)); display: grid; place-items: center; }
.puz-hole i { width: calc(7 * var(--pt)); height: calc(7 * var(--pt)); border-radius: 50%; background: var(--puz-stroke); }
.puz-pegs { display: flex; flex-direction: column; gap: calc(5 * var(--pt)); }
.puz-pegs > span { display: flex; gap: calc(5 * var(--pt)); }
.puz-pegs i { width: calc(11 * var(--pt)); height: calc(11 * var(--pt)); border-radius: 50%; display: grid; place-items: center; }
.puz-pegs i.b { background: var(--puz-ink); }
.puz-pegs i.w { box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) var(--puz-ink); }
.puz-pegs i.e::after { content: ""; width: calc(5 * var(--pt)); height: calc(5 * var(--pt)); border-radius: 50%; background: var(--puz-stroke); }
.puz-crow.is-new .puz-pegs { animation: puz-pop var(--puz-pop-d) var(--puz-pop, var(--spring)) 0.12s both; }
.puz-palette { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: calc(8 * var(--pt)); }
.puz-key {
  min-height: calc(52 * var(--pt));
  display: grid; place-items: center;
  border-radius: calc(10 * var(--pt)); background: var(--cream);
  box-shadow: inset 0 0 0 0.5px var(--puz-stroke), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.06);
  font-size: calc(22 * var(--pt)); line-height: 1;
  transition: opacity 0.2s ease-in-out, transform 0.25s var(--spring);
}
.puz-key:disabled { opacity: 0.35; cursor: default; }
.puz-key:not(:disabled):active { transform: scale(0.94); }
.puz-itwas { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--pt)); }
.puz-itwas .puz-tiles { flex: none; }

/* ===================================================== river crossing */
.puz-river {
  position: relative; height: calc(var(--h) * var(--pt));
  background: var(--cream); border-radius: calc(14 * var(--pt)); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(201, 166, 107, 0.15), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.06);
  isolation: isolate;
}
.puz-bank {
  position: absolute; left: 0; right: 0;
  top: calc(var(--y) * var(--pt)); height: calc(var(--bh) * var(--pt));
  background: rgba(239, 227, 199, 0.55);
  transition: background-color 0.3s;
}
.puz-bank.offending { background: rgba(199, 91, 57, 0.07); }
.puz-banklabel {
  position: absolute; left: calc(12 * var(--pt)); top: calc(12 * var(--pt));
  display: flex; align-items: center; gap: calc(6 * var(--pt));
  font-weight: 600; font-size: calc(12 * var(--pt)); line-height: calc(16 * var(--pt));
  letter-spacing: calc(0.8 * var(--pt)); text-transform: uppercase; color: var(--puz-sec);
  transition: color 0.3s;
}
.puz-banklabel i { display: none; color: var(--error); }
.puz-banklabel svg { width: calc(11 * var(--pt)); height: calc(11 * var(--pt)); }
.puz-bank.offending .puz-banklabel { color: var(--error); }
.puz-bank.offending .puz-banklabel i { display: grid; animation: puz-pop 0.3s ease-out both; }
.puz-spot, .puz-seat {
  position: absolute; left: calc(var(--x) * var(--pt)); top: calc(var(--y) * var(--pt));
  width: calc(var(--tw) * var(--pt)); height: calc(60 * var(--pt));
  border-radius: calc(10 * var(--pt));
  box-shadow: inset 0 0 0 1px var(--puz-stroke);
}
.puz-seat { box-shadow: none; border: 1px dashed rgba(166, 123, 91, 0.45); }
.puz-water {
  position: absolute; left: 0; right: 0;
  top: calc(var(--y) * var(--pt)); height: calc(var(--rh) * var(--pt));
  background: rgba(107, 139, 166, 0.22);
}
.puz-water svg { width: 100%; height: 100%; }
.puz-water path { fill: none; stroke: rgba(107, 139, 166, 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.puz-boat {
  position: absolute; left: 0; top: 0;
  width: calc(var(--bw) * var(--pt)); height: calc(var(--bht) * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: rgba(166, 123, 91, 0.2); box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) rgba(166, 123, 91, 0.5);
  transform: translate(calc(var(--x) * var(--pt)), calc(var(--y) * var(--pt)));
}
.puz-token {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: calc(var(--tw) * var(--pt)); height: calc(60 * var(--pt));
  transform: translate(calc(var(--x) * var(--pt)), calc(var(--y) * var(--pt)));
}
.puz-river[data-mode="board"] .puz-token,
.puz-river[data-mode="board"] .puz-boat { transition: transform var(--puz-board-d) var(--puz-board, var(--spring)); }
.puz-river[data-mode="cross"] .puz-token,
.puz-river[data-mode="cross"] .puz-boat { transition: transform var(--puz-cross-d) var(--puz-cross, var(--out)); }
.puz-tokface {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3 * var(--pt));
  padding: 0 calc(4 * var(--pt));
  border-radius: calc(10 * var(--pt)); background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--puz-stroke);
  transition: box-shadow 0.25s, background-color 0.25s;
}
.puz-token.aboard .puz-tokface { box-shadow: inset 0 0 0 1px rgba(201, 166, 107, 0.5); }
.puz-token.offender .puz-tokface { background: #f8ece2; box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) var(--error); }
.puz-toksym { font-size: calc(22 * var(--pt)); line-height: 1.15; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.puz-toklabel { font-weight: 600; font-size: calc(12 * var(--pt)); line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.puz-tokbadge, .puz-tokx { position: absolute; top: calc(4 * var(--pt)); right: calc(4 * var(--pt)); display: grid; }
.puz-tokbadge { color: var(--puz-sec); }
.puz-tokbadge svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.puz-tokx { color: var(--error); opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.25s var(--spring); }
.puz-tokx svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.puz-token.offender .puz-tokx { opacity: 1; transform: none; }
.puz-token.offender .puz-tokbadge { opacity: 0; }

.puz-statusrow { display: flex; align-items: center; gap: calc(10 * var(--pt)); }
.puz-crossings { flex: 1; display: flex; align-items: center; gap: calc(8 * var(--pt)); }
.puz-iconbtns { display: flex; gap: calc(10 * var(--pt)); }
.puz-icobtn {
  width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center; color: var(--gold);
  background: rgba(201, 166, 107, 0.08); box-shadow: inset 0 0 0 0.5px rgba(201, 166, 107, 0.15);
  transition: opacity 0.2s;
}
.puz-icobtn svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }
.puz-icobtn:disabled { opacity: 0.4; cursor: default; }
.puz-reason {
  display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--pt));
  font-weight: 500; font-size: calc(13 * var(--pt)); color: var(--puz-sec);
  animation: puz-fade 0.25s both;
}
.puz-reason i { display: grid; }
.puz-reason svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); }
@keyframes puz-fade { from { opacity: 0; } }

/* ------------------------------------------------------ reduced motion */
.puz-still *, .puz-still *::before, .puz-still *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .puz-seg-thumb { transition: none; }
}