/* New presentation for the original Little Sprouts canvas puzzle engine. */
.puzzle-room {
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sprout-sun: #f8d56c;
  --oak: #c28d52;
  --oak-light: #e0b77c;
  --oak-dark: #936337;
  --oak-deep: #593b21;
  color: #f6f8f5;
  background: radial-gradient(circle at 88% 3%, #276d77 0, transparent 30%),
              radial-gradient(circle at 4% 28%, #225e54 0, transparent 32%),
              linear-gradient(155deg, #102f49 0%, #123d49 55%, #133a43 100%);
  font-family: 'DM Sans', Arial, sans-serif;
  padding: 28px 0 80px;
}
.puzzle-room * { box-sizing: border-box; }
.puzzle-page-wrap { max-width: 1480px; margin: auto; }
.puzzle-back { display: inline-flex; margin: 0 30px 10px; color: #c9f2e5; text-decoration: none; font-size: 14px; font-weight: 800; }
.puzzle-back:hover { color: #fff; text-decoration: underline; }
.puzzle-head { padding-top: 16px; padding-bottom: 12px; text-align: left; }
.puzzle-kicker { display: block; color: #f8d56c; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.puzzle-head h1 { margin: 8px 0 12px; font: 600 clamp(48px, 6.4vw, 86px)/.92 var(--serif); letter-spacing: -.025em; }
.puzzle-head p { margin: 0; max-width: 720px; color: #d8ece8; opacity: 1; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.5; }
.puzzle-controls { justify-content: flex-start; gap: 12px; padding-top: 22px; padding-bottom: 12px; }
.puzzle-control-label { flex-basis: 100%; color: #c4e7df; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.puzzle-cuts button, .puzzle-shuffle { min-height: 46px; padding: 10px 18px; border-radius: 12px; font: 800 14px/1.1 'DM Sans',Arial,sans-serif; transition: transform .15s, background .15s, box-shadow .15s; }
.puzzle-cuts button { border: 1px solid #ffffff40; background: #f6f8f2; color: #193b45; }
.puzzle-cuts button span { font: 800 10px 'DM Sans',Arial,sans-serif; }
.puzzle-cuts button:hover, .puzzle-shuffle:hover { transform: translateY(-2px); }
.puzzle-cuts button[aria-pressed="true"] { background: #f8d56c; border-color: #fff6d2; box-shadow: 0 0 0 3px #f8d56c4d; }
.puzzle-shuffle { border: 1px solid #b7dad4; color: #fff; background: #ffffff12; }
.puzzle-count { margin: 0 0 0 auto; min-width: 184px; color: #f4f8f5; font: 800 13px 'DM Sans',Arial,sans-serif; }
.puzzle-bar { background: #061e2a80; height: 10px; }
.puzzle-stage { grid-template-columns: minmax(130px, 150px) minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(18px, 2.2vw, 30px); padding-top: 20px; }
.puzzle-panel { background: linear-gradient(148deg, #f7dfac, #cc985d 62%, #a47243); border: 1px solid #fbe5b1; border-radius: 18px; box-shadow: 0 16px 30px #071d2c55, inset 0 2px #fff7; }
.puzzle-panel > h2, .puzzle-board-wrap > h2 { margin: 0 0 14px; font: 800 12px/1.2 'DM Sans',Arial,sans-serif; letter-spacing: .12em; }
.puzzle-panel > h2 { color: #493016; }
.puzzle-board-wrap > h2 { padding: 14px 0 1px; color: #d8f3e9; }
.puzzle-model-panel { padding: 13px; }
.puzzle-model-frame { border: 4px solid #7b542e; box-shadow: 0 4px 12px #3a251b66; }
.puzzle-model-tip { margin: 12px 0 2px; color: #493016; font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; }
.puzzle-board { border-radius: 8px; }
.puzzle-tray-panel { padding: 13px; }
.puzzle-tray { border-radius: 10px; }
.puzzle-piece { touch-action: none; }
.puzzle-help { max-width: 1100px; margin: 0 auto; padding: 5px 30px 30px; color: #d4eae5; text-align: center; font-size: 14px; line-height: 1.5; }
.puzzle-library { margin: 22px 30px 0; padding: 34px 18px 38px; border: 1px solid #ffffff26; border-radius: 26px; background: #ffffff0e; box-shadow: 0 14px 32px #081f3055; }
.puzzle-library-head { padding: 0 20px 10px; }
.puzzle-library-head h2 { margin: 4px 0; color: #fff; font: 600 clamp(32px, 4vw, 48px)/1 var(--serif); }
.puzzle-library-head p { margin: 0; color: #cee5e0; font-size: 14px; }
.puzzle-shelf { padding: 10px 18px 0; }
.puzzle-group { padding: 22px; border: 1px solid #ffffff20; border-radius: 20px; background: #ffffff0b; }
.puzzle-group + .puzzle-group { margin-top: 16px; }
.puzzle-group h3 { font: 600 clamp(24px, 2.5vw, 32px)/1 var(--serif); }
.puzzle-group h3 b { font: 800 11px 'DM Sans',Arial,sans-serif; }
.puzzle-group > p { margin: 7px 0 18px; color: #d0e4e0; font-size: 13px; }
.puzzle-thumbs { grid-template-columns: repeat(10, minmax(0,1fr)); gap: 10px; }
.puzzle-thumb { padding: 6px; border-width: 2px; border-radius: 12px; background: #f6f4ec; color: #173c45; font: 800 11px/1.3 'DM Sans',Arial,sans-serif; box-shadow: 0 4px 12px #061d2a44; }
.puzzle-thumb:hover { background: #fff; }
.puzzle-thumb[aria-pressed="true"] { background: #fff2bb; border-color: #f8d56c; box-shadow: 0 0 0 2px #f8d56c88; }
.puzzle-thumb img { aspect-ratio: 4/3; background: #c3ded5; }
.puzzle-cuts button:focus-visible, .puzzle-shuffle:focus-visible, .puzzle-thumb:focus-visible, .puzzle-back:focus-visible { outline: 3px solid #ffea95; outline-offset: 3px; }
@media (max-width: 1250px) { .puzzle-thumbs { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media (max-width: 980px) {
  .puzzle-stage { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .puzzle-board-wrap { grid-column: 1; order: 1; }
  .puzzle-tray-panel { grid-column: 2; order: 2; }
  .puzzle-model-panel { grid-column: 1/-1; order: 3; width: min(100%,420px); max-width: none; justify-self: center; }
  .puzzle-count { margin-left: 0; }
}
@media (max-width: 619px) {
  .puzzle-room { padding-top: 20px; }
  .puzzle-back { margin: 0 18px; }
  .puzzle-head { padding: 22px 18px 8px; text-align: left; }
  .puzzle-head h1 { font-size: clamp(48px,13vw,68px); }
  .puzzle-controls { padding: 18px; gap: 10px; }
  .puzzle-cuts { gap: 7px; }
  .puzzle-cuts button { min-height: 42px; padding: 8px 12px; }
  .puzzle-stage { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 20px 16px; }
  .puzzle-board-wrap { position: static; width: 100%; }
  .puzzle-tray-panel { width: 100%; }
  .puzzle-model-panel { width: min(100%,360px); }
  .puzzle-help { padding: 4px 18px 24px; }
  .puzzle-library { margin: 15px 12px 0; padding: 26px 6px; }
  .puzzle-library-head { padding: 0 13px 10px; }
  .puzzle-shelf { padding: 10px 6px 0; }
  .puzzle-group { padding: 15px 10px; }
  .puzzle-thumbs { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) { .puzzle-cuts button, .puzzle-shuffle, .puzzle-thumb { transition: none; } }

/* Follow Alderson's light and dark site palette. The wooden game stays intact. */
.puzzle-room {
  --puzzle-page: #f5fbfd;
  --puzzle-ink: #123453;
  --puzzle-muted: #56708a;
  --puzzle-accent: #267052;
  --puzzle-surface: #ffffff;
  --puzzle-surface-soft: #edf5f8;
  --puzzle-border: #dce8e7;
  color: var(--puzzle-ink);
  background: var(--puzzle-page);
}
html[data-theme="dark"] .puzzle-room {
  --puzzle-page: #08192f;
  --puzzle-ink: #eef4fc;
  --puzzle-muted: #bdcee4;
  --puzzle-accent: #a7cfff;
  --puzzle-surface: #122b4b;
  --puzzle-surface-soft: #0e223e;
  --puzzle-border: #2b496b;
}
.puzzle-back { color: #174871; }
html[data-theme="dark"] .puzzle-back { color: #a7cfff; }
.puzzle-back:hover { color: var(--puzzle-ink); }
.puzzle-kicker, .puzzle-control-label { color: var(--puzzle-accent); }
.puzzle-head h1, .puzzle-library-head h2, .puzzle-group h3 { color: var(--puzzle-ink); }
.puzzle-head p, .puzzle-library-head p, .puzzle-group > p, .puzzle-help { color: var(--puzzle-muted); }
.puzzle-count, .puzzle-board-wrap > h2 { color: var(--puzzle-ink); }
.puzzle-cuts button { background: #fff; border-color: #cddce8; color: #123453; }
.puzzle-cuts button[aria-pressed="true"] { background: #f5c667; border-color: #e4ae43; color: #102b4d; box-shadow: 0 0 0 3px #f5c66755; }
.puzzle-shuffle { border-color: #9db5ca; background: #fff; color: #173d69; }
html[data-theme="dark"] .puzzle-shuffle { border-color: #688bb2; background: #152f50; color: #eef4fc; }
.puzzle-bar { background: #d5e3ec; }
html[data-theme="dark"] .puzzle-bar { background: #07172d; }
.puzzle-library { background: var(--puzzle-surface-soft); border-color: var(--puzzle-border); box-shadow: 0 14px 32px #0d284018; }
.puzzle-group { background: var(--puzzle-surface); border-color: var(--puzzle-border); }
.puzzle-group h3 b { background: #dfeef3; color: #234862; }
html[data-theme="dark"] .puzzle-group h3 b { background: #335476; color: #eaf2fb; }
.puzzle-thumb { background: #fff; color: #173c57; border-color: #d8e4e9; box-shadow: 0 4px 12px #0d284018; }
.puzzle-thumb:hover { background: #f3f8fc; }
.puzzle-thumb[aria-pressed="true"] { background: #fff2bb; border-color: #e4ae43; box-shadow: 0 0 0 2px #f5c66777; }

/* Picture art on raised wooden pieces, with a real wood board and sorting box. */
.puzzle-panel {
  background-image: linear-gradient(145deg, rgba(255, 238, 194, .32), rgba(130, 73, 24, .15)), url("oak-grain.webp");
  background-size: 100% 100%, 650px 650px;
  background-position: center;
  border: 2px solid #a46b33;
  box-shadow: 0 16px 28px rgba(44, 29, 15, .24), inset 0 2px 2px rgba(255, 245, 218, .8), inset 0 -4px 7px rgba(85, 48, 17, .3);
}
.puzzle-model-frame {
  border-color: #80502a;
  box-shadow: 0 0 0 2px rgba(255, 226, 173, .65), 0 7px 12px rgba(58, 34, 14, .35);
}
.puzzle-board {
  background-image: linear-gradient(145deg, rgba(80, 44, 17, .36), rgba(163, 103, 45, .15)), url("oak-grain.webp");
  background-size: 100% 100%, 580px 580px;
  background-position: center;
  box-shadow: inset 0 5px 13px rgba(44, 25, 8, .5), inset 0 -2px 3px rgba(255, 233, 186, .38), 0 0 0 8px #b47a3e, 0 0 0 10px #70431e, 0 18px 30px rgba(48, 30, 12, .3);
}
.puzzle-tray {
  background-image: linear-gradient(145deg, rgba(96, 53, 23, .45), rgba(84, 45, 14, .35)), url("oak-grain.webp");
  background-size: 100% 100%, 600px 600px;
  background-position: center;
  box-shadow: inset 0 0 0 2px rgba(246, 207, 145, .65), inset 0 8px 14px rgba(48, 26, 8, .55), inset 0 -4px 8px rgba(255, 224, 165, .22), 0 0 0 6px #9b602b, 0 0 0 8px #70431e, 0 12px 20px rgba(59, 34, 12, .25);
}
.puzzle-piece { filter: drop-shadow(1px 5px 3px rgba(46, 28, 12, .42)); }
.puzzle-piece:hover { filter: drop-shadow(1px 7px 5px rgba(46, 28, 12, .55)); }
.puzzle-piece.is-lifted { filter: drop-shadow(3px 15px 10px rgba(34, 21, 10, .55)); }
.puzzle-piece.is-placed { filter: none; }