/* The original six London puzzles use the same cream paper and painted wood. */
.penguin-puzzle {
  --puzzle-ink: #293f43;
  --puzzle-paper: #f4e7c6;
  --puzzle-teal: #3c645f;
  --puzzle-gold: #efc77d;
  --puzzle-wood: #ba9360;
  color: var(--puzzle-ink);
  font-family: Georgia, "Times New Roman", serif;
  outline: none;
}
.puzzle-shell {
  width: 100%;
  margin: 0 auto;
  padding: 14px 20px;
  border: 3px solid var(--puzzle-wood);
  border-radius: 0;
  background: var(--puzzle-paper);
  box-shadow: inset 0 0 0 2px #fff5dc, 0 4px 0 #806244;
  image-rendering: pixelated;
}
.puzzle-heading, .puzzle-toolbar, .puzzle-actions, .puzzle-readout, .mine-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.puzzle-heading { display: none; }
.puzzle-heading { padding-bottom: 10px; border-bottom: 2px dashed #c6ad7d; }
.puzzle-kicker { margin: 0 0 3px; color: var(--puzzle-teal); font-size: .78rem; font-weight: 900; letter-spacing: .12em; }
.puzzle-heading h2 { margin: 0; color: var(--puzzle-ink); font-size: 1.5rem; }
.puzzle-stamp { padding: 6px 8px; border: 2px solid var(--puzzle-gold); color: #76552b; font-size: .8rem; font-weight: 900; white-space: nowrap; }
.puzzle-instructions { max-width: 72ch; margin: 0 0 8px; color: #425b58; font: 1rem/1.4 system-ui, sans-serif; }
.puzzle-toolbar { padding: 6px 0 8px; border-block: 1px solid #d7c49d; }
.puzzle-reward { color: #425b58; font: .9rem/1.35 system-ui, sans-serif; }
.puzzle-reward strong { color: #76552b; }
.puzzle-actions { justify-content: flex-end; flex-wrap: wrap; }
.puzzle-button { min-width: 40px; min-height: 38px; padding: 6px 11px; border: 2px solid var(--puzzle-teal); border-radius: 2px; background: #fff3d5; color: var(--puzzle-ink); font: 700 .9rem/1.25 system-ui, sans-serif; cursor: pointer; box-shadow: 0 3px 0 #31564f; }
.puzzle-button:hover { background: #f7dda5; transform: translateY(-1px); }
.puzzle-button:active { transform: translateY(2px); box-shadow: none; }
.puzzle-button:disabled, .puzzle-difficulty-label select:disabled { cursor: default; opacity: .6; }
.puzzle-button:focus-visible, .penguin-puzzle select:focus-visible, .penguin-puzzle button:focus-visible { outline: 3px solid #bf7a38; outline-offset: 2px; }
.puzzle-difficulty-label { display: inline-flex; align-items: center; gap: 7px; color: #395854; font: 700 .9rem/1.3 system-ui, sans-serif; }
.puzzle-difficulty-label select { min-height: 38px; padding: 5px 8px; border: 2px solid var(--puzzle-teal); border-radius: 2px; background: #fff8e7; color: var(--puzzle-ink); font: inherit; }
.puzzle-content { display: grid; align-content: center; padding: 8px 0 3px; }
.puzzle-status { min-height: 1.5em; margin: 5px 0 0; padding: 7px 10px; border-left: 4px solid #6d9a78; background: #e8edd8; color: #39584c; font: 700 .95rem/1.35 system-ui, sans-serif; }
.puzzle-status.is-success { border-color: #4a8058; background: #e6f0d8; color: #2e5d3c; }
.puzzle-status.is-failure { border-color: #b86d4b; background: #f6e3d1; color: #784532; }
.puzzle-status.is-paused { border-color: #bd8e42; background: #fff0cc; color: #66502e; }

/* The bookcase-like six by six sliding board. */
.sliding-frame { position: relative; width: max-content; max-width: 100%; margin: 3px auto 12px; padding-right: 35px; }
.sliding-board { display: grid; grid-template-columns: repeat(6, minmax(32px, 45px)); grid-template-rows: repeat(6, minmax(32px, 45px)); gap: 3px; padding: 6px; border: 4px solid #805f3c; background: #ba9360; box-shadow: inset 0 0 0 3px #efdbad, 0 3px 0 #684c32; }
.sliding-empty { border: 1px solid #b49a6c; background: #ead9b4; }
.sliding-book { z-index: 1; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; padding: 2px; border: 2px solid #31564f; border-radius: 0; background: #6f9a89; color: #102d2c; font-size: clamp(.62rem, 1.35vh, .8rem); font-weight: 900; cursor: pointer; box-shadow: inset 4px 0 #ffffff4a, inset -4px 0 #123e4b26; }
.sliding-book-title { display: block; max-width: 100%; max-height: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; line-height: 1; }
.sliding-book[data-orientation="v"] .sliding-book-title { writing-mode: vertical-rl; text-orientation: mixed; max-width: 100%; max-height: 100%; }
.sliding-book:nth-of-type(3n) { background: #d3a157; }
.sliding-book:nth-of-type(4n) { background: #9999b7; }
.sliding-book.sliding-target { border-color: #875b28; background: #f4ce7e; color: #563e24; }
.sliding-book.is-selected { outline: 3px solid #a95437; outline-offset: -4px; }
.sliding-book:focus-visible { outline: 3px solid #293f43; outline-offset: -4px; }
.sliding-exit { position: absolute; top: 36%; right: -1px; width: 31px; min-height: 76px; padding: 7px 3px; border: 2px dashed var(--puzzle-teal); background: #e5edcd; color: #395f55; font-size: .78rem; font-weight: 900; writing-mode: vertical-rl; text-align: center; }
.puzzle-readout { justify-content: center; flex-wrap: wrap; gap: 8px 22px; color: #425b58; font: .9rem/1.35 system-ui, sans-serif; }
.puzzle-readout strong { color: var(--puzzle-ink); }
.sliding-controls { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.sliding-controls .puzzle-button { min-width: 44px; font-size: 1.1rem; }

/* Frosted ice tiles with readable number colors. */
.mine-toolbar { max-width: 480px; margin: 0 auto 8px; color: #395854; font: .9rem/1.35 system-ui, sans-serif; }
.mine-toolbar strong { color: #293f43; }
.minefield { display: grid; grid-template-columns: repeat(var(--mine-columns), minmax(24px, 31px)); justify-content: center; gap: 3px; margin: 0 auto; }
.mine-cell { aspect-ratio: 1; padding: 0; border: 2px solid #71989a; border-radius: 0; background: linear-gradient(145deg, #d7e9dd, #97c2bd); color: #293f43; font: 900 1rem/1 system-ui, sans-serif; cursor: pointer; box-shadow: inset 0 2px #ffffffa3, 0 2px 0 #628184; }
.mine-cell:hover:not(.is-revealed) { background: #edf0d8; }
.mine-cell:focus-visible { position: relative; z-index: 1; outline: 3px solid #bf7a38; outline-offset: 1px; }
.mine-cell.is-revealed { border-color: #d0bd91; background: #f4e7c6; box-shadow: none; cursor: default; }
.mine-cell.is-flagged { color: #873f32; background: #f3d7a5; }
.mine-cell.is-mine { background: #efc1a2; color: #793a31; }
.mine-count-1 { color: #276d8c; }.mine-count-2 { color: #397142; }.mine-count-3 { color: #a34432; }.mine-count-4 { color: #65538c; }
.mine-tip { margin: 8px 0 0; color: #425b58; font: .86rem/1.35 system-ui, sans-serif; text-align: center; }

/* South Bank's compact falling-ice playfield. */
.blocks-layout { display: grid; grid-template-columns: minmax(0, 236px) 150px; justify-content: center; align-items: start; gap: 14px; max-width: 440px; margin: 0 auto; }
.blocks-board { display: grid; box-sizing: border-box; width: 236px; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(20, 12px); gap: 2px; padding: 5px; border: 3px solid #805f3c; background: linear-gradient(135deg, #edf4e8, #b9d0d1 48%, #d7e4d6); box-shadow: inset 0 0 0 3px #f4e7c6, 0 3px 0 #684c32; }
.block-cell { border: 1px solid #a9b7a6; background: #e8eedc; }
.block-cell.block-1, .next-piece-grid i.is-filled { border-color: #648e9b; background: linear-gradient(145deg, #eef9f1 0 18%, #c4e2e3 19% 42%, #8ebbc8 43% 72%, #638fa2 73%); box-shadow: inset 2px 2px #ffffffbd, inset -3px -3px #36637855, 0 1px 2px #537e8a55; }
.block-cell.block-2 { border-color: #79a5b1; background: linear-gradient(135deg, #f3fff6 0 20%, #d0eff0 21% 43%, #a1d0d9 44% 70%, #75a9ba 71%); box-shadow: inset 2px 2px #ffffffd9, inset -3px -3px #36637855, 0 1px 3px #537e8a77; }
.blocks-side { display: grid; gap: 6px; color: #425b58; font: .88rem/1.35 system-ui, sans-serif; }
.blocks-side p { display: flex; justify-content: space-between; margin: 0; padding: 6px 8px; border-bottom: 1px dashed #baa77e; color: inherit; }
.blocks-side strong { color: #293f43; font-size: 1rem; }
.next-piece { padding: 8px; border: 2px solid #ba9360; background: #e8edd8; color: #395854; font: .84rem/1.3 system-ui, sans-serif; }
.next-piece-grid { display: grid; grid-template-columns: repeat(4, 15px); grid-auto-rows: 15px; gap: 2px; justify-content: center; margin: 7px 0 2px; }
.next-piece-grid i { border: 1px solid transparent; }
.block-milestones { display: grid !important; gap: 5px; }.block-milestones span { justify-content: flex-start; font-size: .82rem; }.block-milestones .is-earned { color: #397142; font-weight: 900; }
.blocks-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 9px; }.blocks-controls .puzzle-button { min-width: 40px; padding-inline: 8px; }

@media (max-width: 560px) {
  .puzzle-shell { padding: 10px; }
  .puzzle-heading, .puzzle-toolbar { align-items: flex-start; flex-direction: column; }
  .puzzle-actions { justify-content: flex-start; }
  .sliding-board { grid-template-columns: repeat(6, minmax(30px, 9vw)); grid-template-rows: repeat(6, minmax(30px, 9vw)); }
  .blocks-layout { grid-template-columns: minmax(0, min(236px, calc(100vw - 166px))) 112px; gap: 8px; max-width: 100%; }
  .blocks-board { width: 100%; grid-template-rows: repeat(20, minmax(11px, 1fr)); }
  .blocks-side { font-size: .82rem; }
}

@media (max-height: 760px) {
  .puzzle-shell { padding-block: 10px; }
  .puzzle-content { padding-block: 6px 2px; }
  .sliding-board { grid-template-columns: repeat(6, clamp(30px, 6vh, 42px)); grid-template-rows: repeat(6, clamp(30px, 6vh, 42px)); }
  .blocks-board { grid-template-rows: repeat(20, clamp(10px, 1.7vh, 12px)); }
  .minefield { grid-template-columns: repeat(var(--mine-columns), clamp(23px, 4vh, 29px)); }
}

@media (prefers-reduced-motion: reduce) {
  .penguin-puzzle *, .penguin-puzzle *::before, .penguin-puzzle *::after { scroll-behavior: auto; transition: none; animation: none; }
}