/* The pencil-puzzle kit's interface: home, the puzzle on its desk, sheets, the
   win screen. Layout and drawing only; every color, face and size comes from
   the kit's look (puzzles.css) and the puzzle's accent. The puzzle's own
   board (its marks, its stars) is styled in its <slug>.css.
   Hashi's screens are the model for how things hold still: the bar and the
   dock keep their places and sizes, zoom has a strip of its own. */

/* A star in a label, drawn (kit/ui.js, withStars), in the ink of the words round it. */
.sg { width: .86em; height: .86em; fill: currentColor; vertical-align: -.08em; margin: 0 .06em 0 .1em; }
.sg + .sg { margin-left: 0; }
.starred { white-space: nowrap; }

/* Your move (house/cue.js, kit/play.js): what to press rings in the puzzle's
   accent, the paper having no turn color of its own. */
.house-beckon { --house-turn: var(--accent); }
.streak .sg { fill: var(--star, var(--accent)); stroke: var(--star-edge, none); stroke-width: .12; stroke-linejoin: round; margin-left: 0; }
/* A tick, drawn: two borders of a turned box. */
.tick { display: inline-block; width: .38em; height: .7em; margin: 0 .5em 0 .2em; border: solid currentColor; border-width: 0 .17em .17em 0; transform: translateY(-.1em) rotate(45deg); }

/* ── type, bars, footer ─────────────────────────────────────────────────── */
/* The page's skeleton is the house's (docs/design-language.md, "Layout and
   type"): the bar is --bar-h tall at --bar-top, its first and last things
   at the gutter; its tools and the way back are one size. */
.pk .bar { display: flex; align-items: center; gap: var(--s1) var(--s3); min-height: var(--bar-h); margin-top: max(calc(var(--frame) + var(--bar-top)), env(safe-area-inset-top)); padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); box-shadow: 0 1px 0 var(--paper-edge); }
.pk .bar .tools { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
.pk .bar .tools a.quiet { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk .bar .quiet { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tool-h); padding: var(--s1) var(--tool-pad); font: var(--w-tool) var(--t-tool)/1.1 var(--ui); color: var(--soft); text-decoration: none; white-space: nowrap; }
.pk .foot { display: flex; justify-content: flex-end; gap: var(--s3); flex-wrap: wrap; padding: var(--s4) max(var(--gutter), env(safe-area-inset-right)) max(var(--s4), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); border-top: 1px solid var(--paper-edge); font-size: 13px; color: var(--soft); }
.pk .foot a { color: var(--accent); text-decoration: none; font-weight: 600; }
.pk .foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── home ───────────────────────────────────────────────────────────────── */
.pk .home { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.pk .home-bar { justify-content: flex-end; }
/* The column is --page-max wide inside the gutters; the footer lines up with it. */
.pk .home .foot { padding-inline: max(var(--gutter), env(safe-area-inset-left), calc((100% - var(--page-max)) / 2)); }
.pk .home .wrap { width: 100%; max-width: calc(var(--page-max) + 2 * var(--gutter)); margin: 0 auto; padding: var(--bar-gap) var(--gutter) var(--s4); flex: 1; }
.pk .waiting { padding: var(--s5) 0; text-align: center; animation: fade-in var(--m-glide, 250ms) ease .2s backwards; }
@keyframes fade-in { from { opacity: 0; } }
.pk .wordmark-h { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.pk .wordmark-h .mark { width: .8em; height: .8em; transform: rotate(8deg); }
.pk .section { margin-top: var(--s4); }
.pk .section-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.pk .streak { margin-left: auto; font: 700 var(--t-note)/1 var(--ui); color: var(--ink); }
.pk .all-done { min-height: 1.45em; margin-top: var(--s3); }

.pk .dailies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--panel-gap); }
/* One daily a day (docs/adr/0034): on a wide screen the card lies on its
   side, its picture beside its words; on a phone it's the row it always was. */
@media (min-width: 761px) {
  .pk .dailies.one { grid-template-columns: minmax(0, 38rem); }
  .pk .dailies.one .daily { flex-direction: row; }
  .pk .dailies.one .daily-art { width: 13rem; flex-shrink: 0; border-bottom: 0; border-right: 2px dotted var(--line); }
  .pk .dailies.one .daily-label { justify-content: center; gap: var(--s1); }
}
/* the way to every game's daily, at the end of the section's head */
.pk .section-head .to-dailies { margin-left: auto; font: 600 var(--t-note)/1.4 var(--ui); color: var(--ink); text-underline-offset: 3px; }
.pk .streak:not(:empty) + .to-dailies { margin-left: 0; }
.pk .section-head .to-stats { display: none; font: 600 var(--t-note)/1.4 var(--ui); color: var(--ink); text-underline-offset: 3px; }
@media (pointer: coarse) { .pk .section-head :is(.to-dailies, .to-stats) { padding: 12px 0; margin-block: -12px; } .pk .section-head .to-dailies { display: inline-block; } }
.pk .daily {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--paper-edge); border-radius: 12px; overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform var(--m-lift, 150ms) ease, box-shadow var(--m-lift, 150ms) ease;
}
@media (hover: hover) { .pk a.daily:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-up); } }
.pk a.daily:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The picture sits on the card as a printed puzzle, a perforation under it. */
.pk .daily-art { --gap: var(--panel-pad); position: relative; aspect-ratio: 5 / 4; min-height: 0; background: var(--paper); border-bottom: 2px dotted var(--line); }
/* The picture fills the card's art box from its edges in, so the box is the same size whether or not it has loaded. */
.pk .daily-art svg { position: absolute; inset: var(--gap); width: calc(100% - 2 * var(--gap)); height: calc(100% - 2 * var(--gap)); opacity: 0; transition: opacity var(--m-glide, 250ms) ease; filter: drop-shadow(0 4px 6px rgba(var(--shade), .22)); }
.pk .daily-art.ready svg { opacity: 1; }
.pk .daily-art .no-art { position: absolute; inset: 0; display: grid; place-content: center; padding: var(--s2); text-align: center; font-size: var(--t-note, 14px); color: var(--soft); }
.pk .daily.skeleton .daily-art { background: linear-gradient(100deg, var(--paper) 30%, color-mix(in srgb, var(--paper-edge) 45%, var(--paper)) 50%, var(--paper) 70%) 0 0 / 220% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -120% 0; } }
.pk .daily-label { display: flex; flex-direction: column; padding: var(--panel-pad); gap: 1px; }
.pk .daily-label b { font: var(--w-label) var(--t-label)/1.3 var(--ui); }
.pk .daily-label span { font-size: var(--t-note); color: var(--soft); }
.pk .daily-label .solved { color: var(--good); font-weight: 700; }
.pk .daily.is-solved .daily-art { background: color-mix(in srgb, var(--good) 8%, var(--paper)); }

.pk .settings { display: grid; gap: 0; max-width: 640px; }
/* Home's controls are as wide as Size's three choices need (the house setting pattern, house.css). */
.pk .home .settings { --house-control-width: 360px; }
.pk .endless-go { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
.pk .resume { margin-top: var(--s4); }
.pk .resume ul { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s1); }
.pk .resume a { font-weight: 600; }
.pk .resume li { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s1); }
.pk .resume li .askbtn { margin-left: var(--s1); }

/* ── the archive: past dailies, a month at a time ───────────────────────── */
.pk .arc-head h2 { min-width: 9em; }
.pk .arc-nav { display: flex; gap: var(--s2); margin-left: auto; }
.pk .arc-days { display: grid; gap: var(--s2); }
.pk .arc-day { display: grid; grid-template-columns: 8em minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--paper-edge); }
.pk .arc-day:first-child { border-top: 0; }
.pk .arc-date { font: var(--w-label) var(--t-label)/1.3 var(--ui); }
.pk .arc-cell {
  display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 56px; padding: var(--s2) 12px;
  text-decoration: none; color: var(--ink); background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 10px;
  transition: transform var(--m-lift, 150ms) ease, box-shadow var(--m-lift, 150ms) ease;
}
.pk .arc-cell b { font: var(--w-label) var(--t-label)/1.3 var(--ui); }
.pk .arc-cell > span { font-size: var(--t-note); color: var(--soft); }
.pk .arc-cell .solved { color: var(--good); font-weight: 700; }
.pk .arc-cell.is-solved { background: color-mix(in srgb, var(--good) 8%, var(--paper-2)); }
/* A picture puzzle's solved one shows its picture beside its name (kit/archive.js, game.gallery). */
.pk .arc-cell.has-pic { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; }
.pk .arc-pic { grid-row: 1 / 3; width: 40px; height: 40px; align-self: center; }
.pk .arc-pic svg { width: 100%; height: 100%; display: block; }
@media (hover: hover) { .pk a.arc-cell:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -12px rgba(var(--shade), .55); } }
.pk a.arc-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pk .arc-day.skeleton .arc-cell { min-height: 56px; background: linear-gradient(100deg, var(--paper) 30%, color-mix(in srgb, var(--paper-edge) 45%, var(--paper)) 50%, var(--paper) 70%) 0 0 / 220% 100%; animation: shimmer 1.4s linear infinite; border-color: transparent; }
.pk .arc-tally, .pk .arc-empty { margin-top: var(--s3); min-height: 1.45em; }

/* ── a puzzle on its desk ───────────────────────────────────────────────── */
.pk .play { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.pk .bar .narrow, .pk .narrow-label, .pk .opt-gear, .pk .help-q { display: none; }
/* Pause, Resume and (once solved) Share result share one slot of fixed width, so the clock never moves. */
.pk .bar .pause, .pk .bar .copy { min-width: 7.5em; }
.pk .where { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pk .where h1 { margin: 0; font: 700 var(--t-bar)/1.2 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk .timer { font: var(--w-tool) var(--t-tool)/1 var(--ui); font-variant-numeric: tabular-nums; min-width: 4.6ch; text-align: right; margin-right: var(--s2); }

.pk .water { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--desk); }
.pk .sea { flex: 1; display: flex; overflow: auto; padding: var(--s3); min-height: 0; overscroll-behavior: contain; }
/* Zoom: round buttons in a strip of their own under the desk, only for a
   board whose cells are small enough to need it, so they never cover a cell. */
.pk .zoom { display: flex; justify-content: flex-end; gap: var(--s2); padding: 0 max(var(--gutter), env(safe-area-inset-right), env(safe-area-inset-left)) var(--s2); }
.pk .zoom-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper-2); box-shadow: 0 2px 6px rgba(var(--shade), .25);
  color: var(--ink); font: 700 22px/1 var(--ui); cursor: pointer; display: grid; place-items: center;
}
.pk .zoom-btn:hover { background: var(--paper); }
.pk .zoom-btn:disabled { border-style: dashed; color: var(--soft); border-color: var(--soft); box-shadow: none; cursor: default; }
.pk .zoom-fit { width: auto; padding: 0 14px; border-radius: 22px; font-size: var(--t-note); }

/* The sheet of the book the puzzle is printed on. */
.pk .paper {
  margin: auto; position: relative; padding: 10px 14px 14px; border-radius: 3px; color: var(--ink); background: var(--paper-2);
  box-shadow: 0 1px 0 #fff inset, 0 22px 44px -22px rgba(var(--shade), .6), 0 2px 8px rgba(var(--shade), .14);
}
.pk .folio {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 0 0 10px;
  font: 700 12px/1 var(--ui); letter-spacing: .15em; text-transform: uppercase; color: var(--soft); white-space: nowrap;
}
/* The folio never widens the page: it takes the board's width, and a long name gives way. */
.pk .folio { width: 0; min-width: 100%; }
.pk .folio-left { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pk .folio-right { flex-shrink: 0; }
.pk .solved .folio-left { max-width: calc(100% - 190px); }
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
  .pk .folio .word { display: none; }
  .pk .solved .folio-left { max-width: calc(100% - 160px); }
}
/* A printed page keeps a hairline border a little way in from the board. */
.pk .neatline { position: relative; line-height: 0; margin: 8px; outline: 1px solid var(--line); outline-offset: 6px; }
.pk .grid { display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.pk .grid:focus { outline: none; }
.pk .grid:focus-visible { outline: 3px solid var(--pick); outline-offset: 7px; }
.pk .grid.hidden { visibility: hidden; }
.pk .grid .cursor { fill: color-mix(in srgb, var(--pick) 14%, transparent); stroke: var(--pick); stroke-width: .07; pointer-events: none; }
.pk .grid .hov { fill: transparent; }
@media (hover: hover) and (pointer: fine) { .pk .play:not(.solved) .grid:not(.hidden) .hov:hover { fill: color-mix(in srgb, var(--ink) 7%, transparent); } }

.pk .cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); line-height: 1.5; background: var(--paper-2); }
.pk .cover-title { margin: 0; font: 400 34px/1 var(--display); color: var(--ink); }
.pk .cover-mark { width: 84px; height: 84px; opacity: .9; }
.pk .cover-mark svg, .pk .win-star svg { width: 100%; height: 100%; display: block; }

/* The stamp a solved puzzle gets: accent ink, pressed over the folio's size. */
.pk .stamp {
  position: absolute; right: 24px; top: -40px; display: none; align-items: baseline; gap: 10px;
  padding: 5px 14px; border: 3px double var(--accent); border-radius: 8px; color: var(--accent); line-height: 1;
  background: var(--paper-2); mix-blend-mode: multiply; opacity: .92; pointer-events: none; transform: rotate(-5deg);
}
.pk .solved .folio-size { visibility: hidden; }
.pk .stamp.on { display: flex; }
.pk .stamp.in { animation: stamp var(--m-glide, 250ms) cubic-bezier(.2, .9, .3, 1.2) both; }
.pk .stamp-word { font: 400 14px var(--display); letter-spacing: .2em; text-transform: uppercase; }
.pk .stamp-time { font: 400 22px var(--display); font-variant-numeric: lining-nums tabular-nums; }
@keyframes stamp { from { scale: 1.7; opacity: 0; } }

.pk .dock { display: flex; align-items: center; gap: var(--s3); min-height: 72px; padding: var(--s3) max(var(--gutter), env(safe-area-inset-right)) var(--s3) max(var(--gutter), env(safe-area-inset-left)); border-top: 1px solid var(--paper-edge); }
/* A board's own tools (a number pad) under the desk: it keeps its place
   once solved, out of use, so the board doesn't move. */
.pk .tray { flex-shrink: 0; display: flex; justify-content: center; padding: 0 var(--gutter) var(--s2); }
.pk .play.solved .tray { visibility: hidden; }
/* Room for two lines, so the dock (and the board above it) keep their size as messages change. */
.pk .status { flex: 1; min-width: 0; margin: 0; min-height: 3em; display: flex; align-items: center; }
.pk .status a { color: var(--accent); font-weight: 600; }
.pk .moves, .pk .result { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.pk .quiet.inline { padding: 0; color: var(--accent); text-decoration: underline; font-weight: 700; }

/* ── a grid cut into regions (kit/regions.js): washes, thin lines, heavy lines ── */
.tint { stroke: none; }
.tint.t0 { fill: var(--tint-1); } .tint.t1 { fill: var(--tint-2); } .tint.t2 { fill: var(--tint-3); } .tint.t3 { fill: var(--tint-4); }
.tint.t4 { fill: var(--tint-5); } .tint.t5 { fill: var(--tint-6); } .tint.t6 { fill: var(--tint-7); }
.cell-lines { fill: none; stroke: color-mix(in srgb, var(--ink) 24%, transparent); stroke-width: .022; }
.region-lines { fill: none; stroke: var(--line-bold); stroke-width: .07; stroke-linecap: square; }
.frame { fill: none; stroke: var(--line-bold); stroke-width: .11; stroke-linejoin: miter; }

/* ── sheets and the result sheet: the house kit's (house/house.css), and what goes in them ── */
.house-body p { margin: 0; }
.house-body ul { margin: var(--s3) 0 0; padding-left: 20px; display: grid; gap: var(--s2); }
/* (a key named in How to play: its letters in the cap's middle in any face, trimmed to the cap height and baseline, padded evenly; house.css, "fine details") */
.house-body kbd:not(.house-key) { font: 700 12px/1 var(--ui); border: 1px solid currentColor; border-radius: 4px; padding: 3.5px 4px; margin-left: 2px; opacity: .8; text-box: trim-both cap alphabetic; }
.house-sheet .example { margin: 0 0 var(--s3); display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s3); background: var(--desk); border-radius: 10px; }
.house-sheet .example svg { width: min(100%, 220px); height: auto; filter: drop-shadow(0 6px 8px rgba(var(--shade), .25)); }
.house-sheet .example figcaption { max-width: 28em; text-align: center; }
/* On a wide screen, How to play opens out: the example beside the rules. */
@media (min-width: 900px) {
  .house-sheet.howto .house-body { display: grid; grid-template-columns: 300px 1fr; gap: 0 var(--s4); align-items: start; }
  .house-sheet.howto .example { grid-column: 1; grid-row: 1 / span 10; align-self: start; position: sticky; top: 0; margin: 0; }
  .house-sheet.howto .house-body > :not(.example) { grid-column: 2; }
}

/* The result sheet is wide enough for a daily's "Next: 8×8 ★ Medium" beside Share result and Leaderboard. */
.house-scrim.house-scrim-result .house-sheet { --house-sheet-width: 640px; }
/* The result: the game's emblem, the time (in the house's facts), and where it went. */
.win-star { width: 76px; height: 76px; }
.win-best { font-weight: 700; color: var(--good); }
.house-result .house-fact b { font-size: 56px; }
.house-post a { color: var(--accent); font-weight: 600; }
.house-post .quiet.inline { padding: 0; color: var(--accent); text-decoration: underline; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .win-star { animation: win-pop calc(var(--m-celebrate, 1000ms) / 2) cubic-bezier(.2, .9, .3, 1.3) both; }
  .win-star svg { animation: win-spin var(--m-celebrate, 1000ms) ease-out both; }
}
@keyframes win-pop { from { scale: .3; opacity: 0; } }
@keyframes win-spin { from { rotate: -50deg; } }

/* ── a puzzle on a touch screen ───────────────────────────────────────── */
/* The page itself never bounces, refreshes, zooms on a double tap or selects
   text under a busy thumb; the board handles its own fingers. */
html:has(.play), body:has(.play) { overscroll-behavior: none; }
.pk .play { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.pk .play a { -webkit-user-select: auto; user-select: auto; }
.pk .dock { padding-bottom: max(var(--s3), env(safe-area-inset-bottom)); }
.pk .moves .btn:last-child { margin-left: var(--s2); }
@media (pointer: coarse) {
  .pk .btn.small, .pk .bar .quiet:not(.wide) { min-width: 44px; }
  .pk .foot a { display: inline-block; padding: 12px 0; }
  .pk .seg > button, .pk .seg > a { min-height: 44px; }
  .pk .resume a { display: inline-block; padding: 12px 0; }
  .pk kbd.house-key { display: none; }
}

/* ── phones ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .pk .dailies { grid-template-columns: 1fr; }
  .pk .daily { flex-direction: row; }
  .pk .daily-art { --gap: var(--s2); width: 104px; aspect-ratio: 1; flex-shrink: 0; border-bottom: 0; border-right: 2px dotted var(--line); }
  .pk .daily-label { justify-content: center; }
  .pk .home .house-setting { flex-direction: column; align-items: stretch; gap: var(--s2); }
  /* (stacked, the words keep their own height: the house's flex basis is a width, and in a column it would stand as a gap) */
  .pk .home .house-setting-text { flex: none; }
  .pk .home .house-setting > .house-seg { width: 100%; }
  .pk .arc-day { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .pk .arc-cell.has-pic { grid-template-columns: minmax(0, 1fr); }
  .pk .arc-pic { grid-row: auto; width: 32px; height: 32px; margin-bottom: 4px; }
  .pk .arc-head h2 { min-width: 0; }
}
/* Options: the label above its control only when the row is too narrow for both (the house's own rule at 360px). */
/* Under 400px Options is a gear (its name stays for screen readers). */
@media (max-width: 400px) {
  .pk .bar .options { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .pk .opt-word, .pk .help-word { display: none; }
  .pk .opt-gear { display: inline-flex; }
  /* (a home's bar holds the arrow, How to play, the leaderboard and who you are: the first is a ?) */
  .pk .help-q { display: inline-block; min-width: 28px; text-align: center; font-size: 18px; }
  /* (and Stats moves from the bar to today's section, beside every game's daily) */
  .pk .bar .tool-stats { display: none; }
  .pk .section-head .to-stats { display: inline-block; }
}
@media (max-width: 640px) {
  :root { --t-display: 32px; }
  .pk .bar { gap: var(--s2); }
  .pk .bar .wide, .pk .wide-label { display: none; }
  .pk .narrow-label { display: inline-flex; }
  .pk .glyph { width: 14px; height: 14px; fill: currentColor; }
  .pk .bar .pause, .pk .bar .copy { min-width: 56px; }
  .pk .bar .narrow { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }
  /* The folio names the puzzle; the bar keeps its heading for screen readers. */
  .pk .where { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pk .play > .bar .tools { margin-left: auto; }
  .pk .sea { padding: var(--s2) var(--gutter); }
  .pk .paper { padding: 8px 12px; }
  .pk .neatline { margin: 6px 4px; outline-offset: 4px; }
  .pk .folio { font-size: 12px; letter-spacing: .08em; }
  .pk .dock { flex-wrap: wrap; gap: var(--s2) var(--s3); min-height: 112px; align-content: center; }
  .pk .status { flex-basis: 100%; }
  .pk .moves, .pk .result { margin-left: auto; }
  /* Solved: Leaderboard and the next puzzle share the row the moves had, so the dock keeps its size. */
  .pk .result { justify-content: flex-end; width: 100%; }
  .pk .result .btn.primary { flex: 1 1 auto; }
  .pk .stamp { padding: 3px 10px; top: -30px; right: 20px; transform: rotate(-4deg); }
  .pk .stamp-word { font-size: 12px; }
  .pk .stamp-time { font-size: 18px; }
  .house-result .house-fact b { font-size: 48px; }
}

/* Phones on their side: the bar and the dock make a rail down the left, and
   the board gets the full height. */
@media (orientation: landscape) and (max-height: 500px) {
  .pk .play { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "bar water" "dock water"; }
  .pk .play > .bar { grid-area: bar; margin-top: 0; box-shadow: 1px 0 0 var(--paper-edge); align-items: flex-start; flex-direction: column; flex-wrap: nowrap; padding: max(var(--s2), env(safe-area-inset-top)) var(--s3) 0 max(var(--s3), env(safe-area-inset-left)); min-height: 0; }
  .pk .play > .bar .tools { margin-left: 0; flex-wrap: wrap; }
  .pk .play > .water { grid-area: water; flex-direction: row; }
  .pk .play > .dock { grid-area: dock; border-top: 0; border-right: 1px solid var(--paper-edge); padding-inline: var(--s3); flex-direction: column; align-items: stretch; justify-content: safe flex-end; min-height: 0; overflow: auto; }
  .pk .play > .dock .status { min-height: 0; }
  .pk .zoom { flex-direction: column-reverse; justify-content: flex-start; padding: var(--s2) max(var(--s2), env(safe-area-inset-right)) var(--s2) 0; }
  .pk .tray { align-items: center; padding: var(--s2) max(var(--s2), env(safe-area-inset-right)) var(--s2) 0; }
  .pk .bar .narrow { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .pk .play > .dock .moves, .pk .play > .dock .result { margin-left: 0; flex-wrap: wrap; }
  .pk .play .result .btn.primary { flex: 1 1 100%; }
  /* The rail's tools on a fixed grid: clock · pause (or copy) · ?, then Options. */
  /* (Pause's column gives a little when the rail is narrow, so ? stays a finger square inside the rail, off the board) */
  .pk .play > .bar .tools { display: grid; grid-template-columns: 4.2em minmax(0, 6.2em) 44px; align-items: center; gap: var(--s1) var(--s2); }
  .pk .play > .bar .tools > .quiet, .pk .play > .bar .timer { margin: 0; padding-left: 0; padding-right: 0; min-width: 0; justify-content: flex-start; text-align: left; }
  .pk .play > .bar .tools > .narrow { justify-content: center; min-width: 44px; }
  .pk .play > .bar .tools > :last-child { grid-column: 1 / -1; }
  .pk .play > .bar .pause .narrow-label, .pk .play > .bar .copy .narrow-label { display: none; }
  .pk .play > .bar .pause .wide-label, .pk .play > .bar .copy .wide-label { display: inline; }
  .pk .play > .dock .moves { flex-wrap: wrap; gap: var(--s2); }
  .pk .play > .dock kbd { display: none; }
  .pk .play > .dock .moves .btn:last-child { margin-left: 0; }
  .pk .stamp { padding: 3px 10px; top: -30px; right: 20px; transform: rotate(-4deg); }
  .pk .stamp-word { font-size: 12px; }
  .pk .stamp-time { font-size: 18px; }
  .pk .bar .wide { display: none; }
  .pk .play > .bar .tools > .quiet.wide { display: none; }
  .house-result .house-fact b { font-size: 30px; }
  .house-result .house-head { padding-bottom: 0; }
  .house-result .house-foot { padding-top: var(--s2); padding-bottom: var(--s3); }
  /* A short screen on its side keeps the time and the buttons in view; the emblem is on the stamp already. */
  .house-result .house-emblem { display: none; }
}

/* Reduced motion: nothing travels or celebrates; the house's short fades (sheets, toasts) stay. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  *:not([class*="house-"]), *::before, *::after { animation: none !important; }
}

/* ── Give up, asking in place (a brainteaser's: game.giveUp) ─────────────── */
/* The word and its question share one place, so the dock doesn't move as it asks. */
.pk .askbtn { display: inline-grid; place-items: center; }
.pk .askbtn > span { grid-area: 1 / 1; white-space: nowrap; }
.pk .askbtn:not(.ask) .q, .pk .askbtn.ask .lab { visibility: hidden; }
.pk .askbtn.ask {
  background: var(--bad); color: var(--paper-2); border-radius: var(--radius); text-decoration: none; font-weight: 700;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 35%, transparent);
}
.pk .askbtn.ask:hover { color: var(--paper-2); text-decoration: none; }
/* (on a narrow phone, Undo, Redo, Restart and Give up share two rows rather than run off the side) */
@media (max-width: 400px) { .pk .moves { flex-wrap: wrap; flex-shrink: 1; min-width: 0; max-width: 100%; justify-content: flex-end; row-gap: var(--s2); } }