/* The Case of the Blue Recipe Tin: black ink on paper, one spot of blue. */
:root {
  --ink: #111;
  --paper: #fbf8f1;
  --paper-2: #efe9dc;
  --grey: #6b6b6b;
  --blue: #2f5d9e;
  --hud-h: 52px;
  --type: "Courier Prime", "Courier New", monospace;
  --title: "Special Elite", "Courier Prime", monospace;
  --speech: "Comic Neue", "Trebuchet MS", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: #1b1b1b; color: var(--ink); font-family: var(--type);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ---------- top bar ---------- */
#hud {
  height: calc(var(--hud-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 6px; background: var(--ink); color: var(--paper); flex: none;
}
.hud-btn {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  background: none; border: 2px solid transparent; border-radius: 6px; color: var(--paper); cursor: pointer; text-decoration: none;
}
.hud-btn:hover, .hud-btn:focus-visible { border-color: var(--paper); outline: none; }
.hud-btn svg { width: 26px; height: 26px; }
.hud-btn .count {
  position: absolute; right: 1px; top: 1px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--paper); color: var(--ink); font: 700 12px/18px var(--type);
}
#notes-btn.ping { animation: ping 1s ease; }
@keyframes ping { 30% { transform: scale(1.25); } }
.hud-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; padding: 0 4px; }
.hud-title span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.hud-title strong { font-family: var(--title); font-weight: 400; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the stage: always 16:9 ---------- */
#frame { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#stage {
  position: relative; overflow: hidden; background: #fff;
  width: min(100vw, calc((100dvh - var(--hud-h) - env(safe-area-inset-top)) * 16 / 9));
  aspect-ratio: 16 / 9; container-type: inline-size;
}
@media (orientation: portrait) {
  #frame { align-items: flex-start; padding-top: 6px; }
}
#bg-back { position: absolute; inset: 0; background: center / cover no-repeat; }
#bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
#stage.contain #bg { object-fit: contain; }
#stage.contain #bg-back::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .25); }

#placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em;
  background:
    repeating-linear-gradient(45deg, transparent 0 9px, rgba(0,0,0,.07) 9px 10px),
    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(0,0,0,.05) 13px 14px), var(--paper);
  text-align: center; padding: 6%;
}
#ph-title { margin: 0; font: 400 5.2cqi/1.1 var(--title); }
#ph-file { margin: 0; font-size: 1.6cqi; color: var(--grey); }

/* figures: the paper around each drawing is transparent, the white inside stays (tools: flood fill from the corner) */
#actors { position: absolute; inset: 0; pointer-events: none; }
.fig {
  position: absolute; transform: translateX(-50%); background-repeat: no-repeat;
}
.fig.flip { transform: translateX(-50%) scaleX(-1); }
.ph-fig { color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; mix-blend-mode: normal; }
.ph-fig svg { width: 100%; flex: 1; min-height: 0; }
.ph-name { font: 700 1.3cqi var(--type); background: var(--paper); border: 1.5px solid var(--ink); padding: .1em .5em; white-space: nowrap; }

/* laundromat number plates (fix list: so dryer five can be found) */
#plates { position: absolute; inset: 0; pointer-events: none; }
.plate {
  position: absolute; transform: translate(-50%, -50%); min-width: 2.2cqi; padding: .15cqi .5cqi;
  background: var(--paper); border: .25cqi solid var(--ink); border-radius: .4cqi;
  font: 700 1.7cqi/1.2 var(--type); text-align: center; box-shadow: .2cqi .2cqi 0 var(--ink);
}

/* hotspots: invisible over finished art, outlined over placeholders and in debug */
#spots { position: absolute; inset: 0; }
.spot {
  position: absolute; padding: 0; margin: 0; background: transparent; border: 0; cursor: pointer; border-radius: 6px;
}
.spot:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.spot-label {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); white-space: nowrap; pointer-events: none;
  font: 700 max(11px, 1.25cqi) var(--type); background: var(--ink); color: var(--paper); padding: .2em .55em; border-radius: 3px;
  opacity: 0; transition: opacity .15s;
}
@media (hover: hover) {
  .spot:hover { box-shadow: inset 0 0 0 2px rgba(0,0,0,.55); background: rgba(255,255,255,.12); }
  .spot:hover .spot-label { opacity: 1; }
}
.spot:focus-visible .spot-label { opacity: 1; }
#stage.no-art .spot, .debug .spot { border: 2px dashed var(--ink); background: rgba(255,255,255,.55); }
#stage.no-art .spot-label, .debug .spot-label { opacity: 1; position: static; display: inline-block; transform: none; margin: 4px; white-space: normal; }
.debug .spot { border-color: #d22; }
.spot.done:not(.useful) { opacity: .9; }
.easy .spot.useful::after {
  content: ""; position: absolute; inset: 10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 65%);
  animation: shimmer 2.4s ease-in-out infinite; mix-blend-mode: screen;
}
@keyframes shimmer { 0%, 100% { opacity: 0; transform: scale(.7); } 50% { opacity: .85; transform: scale(1); } }
.busy #spots { pointer-events: none; }

#lamp { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s;
  background: radial-gradient(ellipse 34% 40% at 31% 52%, rgba(255, 236, 170, .55), rgba(255, 236, 170, 0) 70%); mix-blend-mode: screen; }
.lamp-on #stage[data-scene="office-end"] #lamp { opacity: 1; }

/* ---------- speech and narration ---------- */
#say {
  position: fixed; z-index: 20; left: 50%; transform: translateX(-50%);
  bottom: max(12px, env(safe-area-inset-bottom)); width: min(880px, calc(100% - 24px));
  min-height: 92px; padding: 18px 46px 26px 34px; cursor: pointer; color: var(--ink);
}
#say.narration {
  border-style: solid; border-width: 12px 40px 34px 26px;
  border-image: url("../assets/ui-caption-torn.png") 30 140 120 90 fill / 12px 40px 34px 26px stretch;
  padding: 6px 4px 0 8px; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.35));
}
#say.speech { background: var(--ink); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
#say.speech::before {
  content: ""; position: absolute; inset: 4px; background: #fff; z-index: 0;
  clip-path: polygon(19px 0, 100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%, 0 19px);
}
#say > * { position: relative; z-index: 1; }
#say-name { margin: 0 0 4px; font: 700 13px var(--type); letter-spacing: .14em; text-transform: uppercase; }
#say-text { margin: 0; font-size: 18px; line-height: 1.45; }
#say.speech #say-text { font-family: var(--speech); font-size: 19px; font-weight: 700; }
/* tap to read on: a round blue badge that grows and blinks, so it's plain the message continues */
#say-next {
  position: absolute; right: 10px; bottom: 6px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 14px; line-height: 1;
  box-shadow: 0 0 0 0 rgba(47, 93, 158, .6); animation: tapme 1.1s ease-in-out infinite;
}
#say-next[hidden] { display: none; }
#say.narration #say-next { right: -2px; bottom: -12px; }
@keyframes bob { 50% { transform: translateY(3px); } }
@keyframes tapme {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(47, 93, 158, .6); }
  50% { transform: scale(1.35); opacity: .45; box-shadow: 0 0 0 8px rgba(47, 93, 158, 0); }
}
#say-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.choice {
  border: 2.5px solid var(--ink); background: var(--paper); padding: 10px 14px; min-height: 44px; cursor: pointer;
  font: 700 16px var(--type); box-shadow: 3px 3px 0 var(--ink); text-align: left;
}
.choice:hover, .choice:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.choice:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

@media (max-width: 640px) {
  #say-text { font-size: 16px; }
  #say.speech #say-text { font-size: 17px; }
  #say { padding: 14px 36px 22px 24px; }
}

/* ---------- toast ---------- */
#toast {
  position: fixed; z-index: 30; left: 50%; top: calc(var(--hud-h) + env(safe-area-inset-top) + 10px);
  transform: translate(-50%, -20px); opacity: 0; pointer-events: none; transition: .25s;
  background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 8px 14px; max-width: min(520px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 2px;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast strong { font-size: 14px; letter-spacing: .04em; }
#toast span { font-size: 14px; }
#toast.clue { border-color: var(--blue); box-shadow: 4px 4px 0 var(--blue); }

#fade { position: fixed; inset: 0; z-index: 40; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .26s; }
#fade.on { opacity: 1; pointer-events: auto; }

/* ---------- overlays and cards ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .72);
}
.overlay.open { display: flex; }
.card {
  position: relative; width: min(560px, 100%); max-height: 100%; overflow: auto; background: #fff; border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--paper), 7px 7px 0 3px var(--ink); padding: 22px 22px 20px;
}
.card.narrow { width: min(420px, 100%); }
.card.wide { width: min(760px, 100%); }
.card.paper { background: var(--paper); }
.card h2 { margin: 0 0 8px; font: 400 26px/1.15 var(--title); }
.card h3 { margin: 18px 0 6px; font: 700 14px var(--type); letter-spacing: .12em; text-transform: uppercase; }
.x { position: absolute; right: 8px; top: 6px; width: 44px; height: 44px; border: 0; background: none; font-size: 30px; cursor: pointer; }
.row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 18px; cursor: pointer;
  border: 3px solid var(--ink); background: var(--ink); color: var(--paper); font: 700 16px var(--type); text-decoration: none;
  box-shadow: 3px 3px 0 var(--grey);
}
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--grey); }
.btn.ghost, .btn.toggle[aria-pressed="false"] { background: #fff; color: var(--ink); }
.btn.link { background: none; border: 0; box-shadow: none; text-decoration: underline; padding-left: 0; color: var(--ink); }
.btn:focus-visible, .x:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.btn[disabled] { opacity: .5; }

.title-card { text-align: left; }
.title-card h1 { margin: 4px 0 10px; font: 400 clamp(28px, 6vw, 40px)/1.05 var(--title); }
.eyebrow { margin: 0; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); font-weight: 700; }
.lead { font-size: 17px; line-height: 1.45; }
.how { font-size: 15px; line-height: 1.45; border-left: 4px solid var(--ink); padding-left: 10px; }
.fine { font-size: 13px; color: var(--grey); line-height: 1.4; }

.chapter-card { text-align: center; color: var(--paper); cursor: pointer; padding: 24px; }
.chapter-card p { margin: 0; letter-spacing: .3em; text-transform: uppercase; font-size: 14px; }
.chapter-card h2 { margin: 10px 0 18px; font: 400 clamp(30px, 7vw, 56px)/1.05 var(--title); }
.chapter-card .tap { opacity: .6; font-size: 12px; animation: bob 1.4s ease-in-out infinite; }
#chapter { background: var(--ink); }

#notes-list { margin: 8px 0 0; padding-left: 1.6em; }
#notes-list li { margin: 0 0 10px; line-height: 1.4; }
#notes-list strong { display: block; font-size: 14px; }
#notes-list span { font-size: 15px; }
#notes-items { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.5; }
#notes-items .lucky::marker { content: "\2605  "; }
.tally { margin: 0 0 6px; color: var(--grey); font-size: 14px; }
.empty { color: var(--grey); font-style: italic; list-style: none; }

#files-list { display: grid; gap: 12px; }
.file-card { position: relative; border: 2.5px solid var(--ink); background: var(--paper); padding: 12px 14px; box-shadow: 4px 4px 0 var(--ink); }
.file-card h3 { margin: 0 0 2px; text-transform: none; letter-spacing: 0; font-size: 17px; }
.file-card p { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
.file-card .role { color: var(--grey); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.file-card.locked { opacity: .55; }
.stamp { position: absolute; right: 10px; top: 8px; border: 3px solid var(--ink); padding: 2px 8px; font: 700 14px var(--title) !important; transform: rotate(-8deg); letter-spacing: .1em; }
.stamp.red { color: #b3261e; border-color: #b3261e; }
.hint { font-size: 18px; line-height: 1.45; font-weight: 700; }

/* ---------- puzzles ---------- */
#puzzle-sub { margin: 0 0 12px; font-size: 15px; }
#puzzle-msg, #report-msg { min-height: 1.4em; margin: 12px 0 0; font-size: 15px; font-weight: 700; }
.tiles { position: relative; display: grid; gap: 4px; background: var(--ink); padding: 4px; }
.tile {
  aspect-ratio: 1; border: 0; background: #fff; cursor: pointer; position: relative; overflow: hidden; padding: 0;
  background-image: linear-gradient(135deg, rgba(0,0,0,.05) 25%, transparent 25%);
}
.tile.wet { background: #f0f3f6; }
.tile .prop { position: absolute; inset: 18% 6%; width: 88%; height: 64%; object-fit: contain; pointer-events: none; }
.tile.near { box-shadow: inset 0 0 0 3px var(--blue); }
.tile.goal { background: var(--paper-2); font: 700 13px var(--type); cursor: default; }
.hopper { position: absolute; width: 17%; transform: translate(-50%, -96%); transition: left .28s ease, top .28s ease; pointer-events: none;
  background-repeat: no-repeat; }
.hopper.slip { animation: slip .5s ease; }
@keyframes slip { 30% { transform: translate(-30%, -96%) rotate(14deg); } 60% { transform: translate(-70%, -96%) rotate(-10deg); } }

.stairs { position: relative; height: 170px; border-bottom: 3px solid var(--ink); margin: 10px 8% 14px 4%; }
.stair { position: absolute; bottom: 0; width: 16.66%; height: 0; border-top: 3px solid var(--ink); }
.stair:nth-child(odd) { border-top-style: dashed; }
.basket { position: absolute; bottom: 0; font-size: 44px; line-height: 1; filter: grayscale(1) contrast(1.4); transform: translateX(-10%); transition: left .3s, bottom .3s; }
.basket.wobble { animation: wobble .4s; }
@keyframes wobble { 25% { rotate: -12deg; } 75% { rotate: 10deg; } }
.cue { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.pushpull { display: flex; gap: 12px; }
.pushpull .btn { flex: 1; font-size: 20px; min-height: 56px; }

#report-paper { font-size: 16px; line-height: 1.5; min-height: 80px; }
#report-paper p { margin: 0 0 8px; }
#report-paper .ask { font-weight: 700; }
#report-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.stats { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 16px; }
.stats dt { font-weight: 700; } .stats dd { margin: 0; }

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

/* short landscape phones: keep the caption small so the scene shows */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --hud-h: 44px; }
  .hud-btn { width: 40px; height: 40px; }
  #say { width: min(640px, calc(100% - 24px)); min-height: 0; padding: 10px 34px 16px 20px; bottom: max(6px, env(safe-area-inset-bottom)); }
  #say.narration { border-width: 8px 28px 22px 18px; border-image-width: 8px 28px 22px 18px; padding: 2px 2px 0 4px; }
  #say-text, #say.speech #say-text { font-size: 14px; line-height: 1.35; }
  #say-name { font-size: 11px; margin-bottom: 2px; }
  #say-next { width: 24px; height: 24px; font-size: 11px; right: 6px; bottom: 4px; }
  .choice { padding: 6px 10px; min-height: 40px; font-size: 14px; }
}
/* tall phones: the scene sits on top, so suggest turning sideways */
@media (orientation: portrait) {
  #frame { flex-direction: column; justify-content: flex-start; }
  #frame::after {
    content: "Turn your phone sideways for a bigger view of the scene.";
    margin: 14px 24px 0; color: #bbb; font-size: 13px; text-align: center;
  }
}

/* sound effect lettering */
.sfx { position: absolute; z-index: 5; width: 34%; max-width: 420px; transform: translate(-50%, -50%) rotate(-6deg) scale(.4);
  pointer-events: none; opacity: 0; animation: sfx 1.3s ease forwards; filter: drop-shadow(3px 3px 0 #fff) drop-shadow(-2px -2px 0 #fff); }
.tiles .sfx { width: 58%; }
@keyframes sfx { 15% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1.08); } 30% { transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
  75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -58%) rotate(-4deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .sfx { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg); } }

/* ways out: an arrow chip that is always on show, so players can see how to get to the next room */
.exit-tag {
  position: absolute; display: inline-flex; align-items: center; gap: .35em; pointer-events: none; white-space: nowrap;
  padding: .3em .7em .3em .5em; border-radius: 999px; background: var(--ink); color: var(--paper);
  border: 2px solid var(--paper); box-shadow: 0 2px 0 rgba(0,0,0,.4);
  font: 700 max(11px, 1.35cqi) var(--type); animation: nudge 1.6s ease-in-out infinite;
}
.exit-tag .arrow { font-size: 1.5em; line-height: 1; }
/* every label sits at the top of its tap area, above head height, so it never covers a person */
.exit-tag.left { left: 4px; top: 4px; --nx: -4px; --ny: 0; }
.exit-tag.right { right: 4px; top: 4px; flex-direction: row-reverse; --nx: 4px; --ny: 0; }
.exit-tag.up { left: 50%; top: 4px; translate: -50% 0; --nx: 0; --ny: -4px; }
.exit-tag.down { left: 50%; top: 4px; translate: -50% 0; --nx: 0; --ny: 4px; }
@keyframes nudge { 50% { transform: translate(var(--nx), var(--ny)); } }
.spot.exit.locked .exit-tag { opacity: .55; animation: none; }
#stage.no-art .exit-tag, .debug .exit-tag { position: static; translate: none; margin: 4px; }
@media (max-width: 700px) { .exit-text { display: none; } .exit-tag { padding: .35em; } }

/* magnifying glass button: show every hotspot for a moment */
.show-spots .spot { box-shadow: inset 0 0 0 3px var(--blue), 0 0 0 2px var(--paper); background: rgba(47, 93, 158, .14); }
.show-spots .spot .spot-label { opacity: 1; }
.show-spots .spot.exit .spot-label { opacity: 0; }

/* Ellis jumping or climbing: one drawn frame, carried through a hop */
.fig.ellis.hop { animation: hop .7s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes hop { 0% { translate: 0 0; } 15% { translate: 0 4%; } 55% { translate: 0 -22%; } 85% { translate: 0 0; } 92% { translate: 0 3%; } 100% { translate: 0 0; } }
.hopper.jumping { animation: tilehop .3s ease-out; }
@keyframes tilehop { 50% { margin-top: -26px; } }

/* climbing: the frames swap in game.js, and he works his way down the ladder */
.fig.ellis.climbing { animation: climbdown var(--climb-time, 3s) linear both; }
@keyframes climbdown { from { translate: 0 var(--climb-from, -12%); } to { translate: 0 var(--climb-to, 14%); } }

/* carrying the basket: an inked staircase up to Mr. Abernathy's door */
.stairs-wrap { position: relative; margin: 4px 0 12px; border: 3px solid var(--ink); background: var(--paper); }
.stair-svg { display: block; width: 100%; height: auto; }
.stair-svg #bk { transition: transform .45s cubic-bezier(.3, .7, .4, 1.2); }
.stair-abernathy { position: absolute; right: 1%; bottom: 72%; height: 44%; background-repeat: no-repeat; background-size: contain; }
.stairs-wrap.wobble { animation: wobble .4s; }
.stairs { display: none; }

/* spot the difference: the two rows of piles as two snapshots */
.pile-photo { margin: 0 0 10px; padding: 6px 6px 4px; background: #fff; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.pile-photo figcaption { font: 700 13px var(--type); letter-spacing: .12em; text-transform: uppercase; padding-top: 4px; }
.pile-img { position: relative; aspect-ratio: 4.9; background-size: 100% auto; background-repeat: no-repeat; }
.pile-zone { position: absolute; top: 0; bottom: 0; border: 0; padding: 0; background: transparent; cursor: pointer; }
.pile-zone:hover, .pile-zone:focus-visible { box-shadow: inset 0 0 0 3px var(--blue); outline: none; }
.pile-zone.right { box-shadow: inset 0 0 0 4px var(--blue); background: rgba(47, 93, 158, .12); }
/* the puzzles must fit a phone held sideways without scrolling */
@media (max-height: 500px) and (orientation: landscape) {
  #puzzle .card { padding: 12px 16px 10px; }
  #puzzle h2 { font-size: 20px; margin-bottom: 2px; }
  #puzzle-sub { font-size: 13px; margin-bottom: 6px; }
  #puzzle-msg { margin-top: 4px; font-size: 13px; }
  .stairs-wrap { width: min(100%, 76vh); margin: 2px auto 6px; }
  .cue { font-size: 14px; margin-bottom: 4px; }
  .pushpull .btn { min-height: 44px; font-size: 17px; }
  .pile-photo { width: min(100%, 120vh); margin: 0 auto 6px; padding: 4px 4px 2px; }
  .pile-photo figcaption { font-size: 11px; padding-top: 2px; }
}