/* ═══════════════════════════════════════════════════════════════════════
   FOREST-PKG Treasure Hunt: game UI
   Visual language taken from the Ecosystem Map poster: wooden trail signs,
   cream sign boards, green banners, the slate footer and the yellow
   "coming soon" boards. No glass, no gradients-for-the-sake-of-it.
   ═══════════════════════════════════════════════════════════════════════ */
/* The UI is sized in rem, so this one rule scales the HUD, cards and dock up
   on big screens (1600px+). The map scales itself (cqw units). */
html { font-size: clamp(16px, min(.9vw, 1.6vh), 26px); }
body.game {
  --display: 'Lilita One', 'Nunito', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
  --wood: #7b5a3a;
  --wood-dark: #4e3824;
  --wood-edge: #3a2918;
  --wood-light: #a88361;
  --board: #f4ead3;
  --board-edge: #6b5136;
  --leaf: #8ec640;
  --leaf-dark: #5b8a24;
  --pine: #2f5d46;
  --ink: #2b2118;
  --red: #c8452f;
  font-family: var(--body);
  color: var(--ink);
  overflow: hidden;
  background: #7fb069;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
body.game input { -webkit-user-select: text; user-select: text; }
#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; overflow: hidden; }
.fade-in { animation: fade-in .35s ease-out; }
@keyframes fade-in { from { opacity: 0; } }

/* ── Building blocks ───────────────────────────────────────────────────── */
.wood {
  position: relative;
  color: #fbf3e3;
  background-color: var(--wood);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 2px, transparent 2px .5625rem),
    repeating-linear-gradient(0deg, transparent 0 2.3125rem, rgba(0,0,0,.22) 2.3125rem 2.4375rem, rgba(255,255,255,.06) 2.4375rem 2.5rem);
  border: 3px solid var(--wood-edge);
  border-radius: .75rem;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -3px 0 rgba(0,0,0,.18), 0 .375rem 0 var(--wood-edge), 0 .875rem 1.5rem rgba(0,0,0,.28);
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.wood.nails::before, .wood.nails::after {
  content: ''; position: absolute; top: .625rem; width: .5625rem; height: .5625rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d9cbb5, #6f6252 70%);
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.wood.nails::before { left: .625rem; }
.wood.nails::after { right: .625rem; }

.board {
  position: relative;
  background: var(--board);
  border: 3px solid var(--board-edge);
  border-radius: .875rem;
  box-shadow: inset 0 0 0 .3125rem var(--board), inset 0 0 0 .4375rem rgba(107,81,54,.25), 0 .375rem 0 rgba(58,41,24,.55), 0 1rem 1.875rem rgba(0,0,0,.28);
}

.banner {
  display: inline-block;
  position: relative;
  padding: .35em 1.4em .4em;
  background: var(--leaf);
  color: #fff;
  font-family: var(--display);
  letter-spacing: .03em;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
  clip-path: polygon(0 0, 100% 0, calc(100% - .6em) 50%, 100% 100%, 0 100%, .6em 50%);
}
.banner.dark { background: #344746; }
.banner.gold { background: #f2c230; color: var(--ink); text-shadow: none; }

.gbtn {
  --c: var(--leaf); --e: var(--leaf-dark); --t: #1f2d1a;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 3.625rem; padding: 0 1.6em;
  font-family: var(--display); font-size: 1.35rem; letter-spacing: .03em; line-height: 1;
  max-width: 100%; color: var(--t); background: var(--c);
  border: 3px solid var(--e); border-radius: .875rem;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 .375rem 0 var(--e), 0 .625rem 1.125rem rgba(0,0,0,.22);
  transition: transform .08s, box-shadow .08s, filter .15s;
  -webkit-tap-highlight-color: transparent;
}
.gbtn:hover:not([disabled]) { filter: brightness(1.05); }
.gbtn:active:not([disabled]) { transform: translateY(.25rem); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 2px 0 var(--e), 0 .25rem .5rem rgba(0,0,0,.2); }
.gbtn[disabled] { filter: grayscale(.6) opacity(.6); cursor: not-allowed; }
.gbtn .icon { width: 1.1em; height: 1.1em; stroke-width: 2.8; }
.gbtn.wood-btn { --c: var(--wood); --e: var(--wood-edge); --t: #fbf3e3; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.gbtn.red { --c: #e0664f; --e: #9c3322; --t: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.gbtn.small { min-height: 2.875rem; font-size: 1.05rem; padding: 0 1.1em; }
.gbtn.big { min-height: 4.5rem; font-size: 1.8rem; padding: 0 2.2em; border-radius: 1.125rem; }

.round-btn {
  flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--wood); color: #fbf3e3; border: 3px solid var(--wood-edge);
  box-shadow: 0 .25rem 0 var(--wood-edge);
}
.round-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-edge); }
.round-btn .icon { width: 1.375rem; height: 1.375rem; }

.say {
  position: relative; background: #fff; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 1.125rem;
  padding: .75rem 1rem; font-weight: 700; line-height: 1.35;
  box-shadow: 0 .25rem 0 rgba(0,0,0,.2);
}
.say::after {
  content: ''; position: absolute; left: -.875rem; bottom: 1rem; width: 1.125rem; height: 1.125rem;
  background: #fff; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: skewY(35deg) rotate(10deg);
}
.say b { color: var(--leaf-dark); }

/* ── Title screen ──────────────────────────────────────────────────────── */
.title-bg { position: absolute; inset: 0; }
.title-bg img { width: 100%; height: 100%; object-fit: cover; }
.title-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 80% at 50% 45%, transparent 40%, rgba(20,35,28,.55)); }
.title-wrap { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.25rem; }
.title-sign { position: relative; text-align: center; padding: 2.125rem 3.5rem 1.875rem; max-width: min(47.5rem, 100%); animation: swing-in .9s cubic-bezier(.34,1.56,.64,1); transform-origin: top center; }
.title-sign .ropes { position: absolute; top: -3.75rem; left: 3.75rem; right: 3.75rem; height: 4rem; display: flex; justify-content: space-between; pointer-events: none; }
.title-sign .ropes i { width: .3125rem; background: repeating-linear-gradient(170deg, #c9a878 0 .25rem, #8a6a45 .25rem .5rem); border-radius: 3px; }
@keyframes swing-in { 0% { transform: translateY(-120%) rotate(-4deg); } 60% { transform: translateY(0) rotate(2deg); } 100% { transform: none; } }
.title-sign .logo { height: 2.125rem; margin: 0 auto .625rem; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.title-sign h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .95; letter-spacing: .01em; color: #fff3d6; text-shadow: 0 .25rem 0 var(--wood-edge), 0 .5rem .75rem rgba(0,0,0,.3); }
.title-sign h1 span { display: block; color: var(--leaf); font-size: .62em; margin-bottom: .375rem; }
.title-sign .sub { margin: .875rem 0 1.375rem; font-size: 1.15rem; font-weight: 800; color: #f6e7c8; }
.title-sign .gbtn { font-size: 2rem; }
.title-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 1.25rem; pointer-events: none; }
.title-foot > * { pointer-events: auto; }
.title-ranger { display: flex; align-items: flex-end; gap: .375rem; max-width: 32.5rem; }
.title-ranger img { width: clamp(6.875rem, 12vw, 10.625rem); filter: drop-shadow(0 .5rem .625rem rgba(0,0,0,.3)); }
.title-ranger .say { margin-bottom: 5.625rem; font-size: 1.02rem; animation: pop-in .5s .6s both cubic-bezier(.34,1.56,.64,1); }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } }
.best-board { margin-bottom: 1.375rem; padding: 1rem 1.25rem .875rem; width: 18.125rem; }
.best-board h3 { margin: 0 0 .5rem; font-family: var(--display); font-weight: 400; font-size: 1.25rem; text-align: center; letter-spacing: .03em; }
.best-board ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; font-weight: 800; }
.best-board li { display: flex; justify-content: space-between; gap: .625rem; padding: .25rem .5rem; border-radius: .375rem; background: rgba(0,0,0,.14); text-shadow: none; }
.best-board li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.best-board .none { font-weight: 700; opacity: .85; text-align: center; background: none; }
.corner { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); display: flex; gap: .625rem; z-index: 3; }
/* Upright screens, and landscape ones too short to centre the sign between the Ranger and the
   leaderboard: stack the sign above them so nothing can cover the Play button. */
@media (orientation: portrait), (max-height: 920px) {
  .screen.title { display: flex; flex-direction: column; }
  .screen.title .title-wrap { position: relative; inset: auto; flex: 1; min-height: 0; }
  .screen.title .title-foot { position: relative; padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Logbook (register) ────────────────────────────────────────────────── */
/* Full-screen wrappers centre their card while it fits and scroll once it doesn't
   (auto margins never push a tall card off the top, unlike place-items: center). */
.logbook-wrap, .finish-wrap { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow-y: auto; overscroll-behavior: contain; padding: 2.25rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.logbook-wrap > *, .finish-wrap > * { margin: auto; }
.logbook-wrap { background: rgba(20,35,28,.35); }
.logbook { width: min(40rem, 100%); padding: 1.875rem 2.125rem 1.75rem; }
.logbook .tab, .survey-card .tab { position: absolute; top: -1.375rem; left: 1.75rem; font-size: 1.2rem; }
.logbook h2 { margin: .375rem 0 2px; font-family: var(--display); font-weight: 400; font-size: 2rem; letter-spacing: .01em; color: var(--wood-dark); }
.logbook .intro { margin: 0 0 1.125rem; color: #6b5a47; font-weight: 700; }
.lb-row { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; }
.lb-field { display: grid; gap: .25rem; margin-bottom: .875rem; }
.lb-field label, .lb-field .lbl { font-weight: 900; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wood-dark); }
.lb-field .opt { text-transform: none; letter-spacing: 0; font-weight: 700; color: #8d7a63; }
.lb-input { height: 3.25rem; border: 0; border-bottom: 3px solid #b99c78; background: rgba(255,255,255,.55); border-radius: .5rem .5rem 0 0; padding: 0 .75rem; font: 800 1.1rem var(--body); color: var(--ink); }
.lb-input:focus { outline: none; border-bottom-color: var(--leaf-dark); background: #fff; }
.lb-field.bad .lb-input { border-bottom-color: var(--red); }
.lb-field .err { color: var(--red); font-weight: 800; font-size: .85rem; min-height: 0; }
.stamps { display: flex; flex-wrap: wrap; gap: .5rem; }
.stamp-chip { min-height: 2.75rem; border: 2.5px dashed #a88361; background: transparent; color: var(--wood-dark); border-radius: .625rem; padding: .5625rem .8125rem; font: 800 .92rem var(--body); transform: rotate(var(--r, 0deg)); transition: all .12s; }
.stamp-chip[aria-pressed='true'] { background: var(--pine); border: 2.5px solid var(--pine); color: #fff; transform: rotate(var(--r, 0deg)) scale(1.04); }
.lb-consent { display: flex; gap: .75rem; align-items: flex-start; font-weight: 700; font-size: .92rem; color: #5b4a38; margin: .25rem 0 1.125rem; cursor: pointer; }
.lb-consent input { width: 1.5rem; height: 1.5rem; accent-color: var(--pine); flex: none; }
.lb-actions { display: flex; gap: .75rem; }
.lb-actions .gbtn:last-child { flex: 1; }
.lb-note { background: #fbe9a8; border: 2px dashed #c9a227; border-radius: .625rem; padding: .625rem .875rem; font-weight: 700; margin-bottom: .875rem; }

/* ── HUD ───────────────────────────────────────────────────────────────── */
.play { display: flex; flex-direction: column; }
.hud { position: relative; z-index: 10; display: flex; align-items: center; gap: 1rem; padding: max(.5rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .5rem max(1rem, env(safe-area-inset-left)); border-radius: 0; border-width: 0 0 3px; box-shadow: 0 .3125rem 0 var(--wood-edge), 0 .625rem 1.25rem rgba(0,0,0,.25); }
.hud .face { width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; background: #cfe6b0; border: 3px solid #fbf3e3; flex: none; }
.hud .face img { width: 100%; height: 100%; object-fit: cover; object-position: top; transform: scale(1.6) translateY(14%); }
.hud .who { line-height: 1.1; flex: 0 1 auto; min-width: 0; }
.hud .who small { display: block; font-size: .75rem; font-weight: 800; opacity: .8; text-transform: uppercase; letter-spacing: .08em; }
.hud .who b { display: block; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-weight: 400; font-size: 1.25rem; letter-spacing: .02em; }
.track { flex: none; display: flex; align-items: center; gap: .25rem; margin: 0 auto; }
.track .step { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 4rem; }
.track .medal { width: 2.625rem; height: 2.625rem; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.25); border: 3px dashed rgba(255,255,255,.35); color: rgba(255,255,255,.5); }
.track .medal .icon { width: 1.25rem; height: 1.25rem; stroke-width: 2.4; }
.track .step.open .medal { border-style: solid; border-color: #fbf3e3; color: #fbf3e3; animation: nudge 1.4s ease-in-out infinite; }
.track .step.done .medal { background: var(--leaf); border: 3px solid #fbf3e3; color: #1f2d1a; }
.track .stars { display: flex; gap: 1px; height: .875rem; }
.track .stars .icon { width: .8125rem; height: .8125rem; stroke-width: 2; color: rgba(255,255,255,.35); }
.track .stars .icon.on { fill: #f2c230; color: #b48a12; }
.track .link { width: 1.625rem; height: .25rem; border-radius: 2px; background: rgba(255,255,255,.2); margin-bottom: 1rem; }
.track .link.on { background: var(--leaf); }
@keyframes nudge { 50% { transform: translateY(-3px); } }
.coins { flex: none; display: flex; align-items: center; gap: .625rem; font-family: var(--display); font-size: 1.6rem; letter-spacing: .02em; min-width: 6.875rem; justify-content: flex-end; }
.coin { width: 1.875rem; height: 1.875rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe27a, #f2c230 55%, #b48a12); border: 2px solid #8a6a0c; box-shadow: 0 2px 0 rgba(0,0,0,.35); flex: none; }
.coins.bump b { animation: bump .45s cubic-bezier(.34,1.56,.64,1); color: #ffe27a; }
@keyframes bump { 50% { transform: scale(1.35); } }

/* ── Map ───────────────────────────────────────────────────────────────── */
/* Wherever the 16:9 map doesn't fill the screen, a blurred copy of it continues the scene. */
.play::before { content: ''; position: absolute; inset: -2rem; background: url('/assets/map-sm.webp') center / cover no-repeat; filter: blur(1.25rem) saturate(1.05) brightness(.92); }
.map-viewport { position: relative; flex: 1; overflow: auto; overscroll-behavior: contain; display: grid; place-items: center; }
.map-viewport.scrolls { place-items: start; }
/* Upright phones: the sideways-scrolling map sits in the middle of the space the dock and guide leave free. */
@media (orientation: portrait) {
  .map-viewport.scrolls { padding-top: max(0px, (100vh - 90vw - 20rem) / 2); padding-top: max(0px, (100dvh - 90vw - 20rem) / 2); }
}
.map-stage { position: relative; aspect-ratio: 16 / 9; container-type: inline-size; flex: none; }
.map-stage > img.map-bg { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }

/* Blank trailhead sign on the artwork */
.sign-text { position: absolute; left: 38.2%; top: 42.4%; width: 19.1%; height: 10.6%; display: grid; place-items: center; text-align: center; color: #344746; pointer-events: none; }
.sign-text h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.75cqw; letter-spacing: .03em; line-height: 1; white-space: nowrap; }
.sign-text p { margin: .5cqw 0 0; font-weight: 900; font-size: max(1.05cqw, min(1.5cqw, 10px)); display: flex; gap: .45em; justify-content: center; align-items: center; white-space: nowrap; }
.sign-text p .icon { width: 1.05em; height: 1.05em; color: var(--leaf-dark); stroke-width: 3; }
.sign-text .q { color: #b3a48c; }

/* Centre name ribbons, like the numbered banners on the poster */
.centre { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; z-index: 2; pointer-events: none; }
/* Map labels scale with the map (cqw) on big maps; on small maps they get a readable
   floor, capped relative to the map so neighbouring labels still don't collide. */
.centre .ribbon { display: flex; align-items: center; gap: .41em; padding: .27em .82em .27em .27em; background: var(--leaf); color: #fff; border-radius: 999px; font-family: var(--display); font-size: max(1.1cqw, min(1.6cqw, 12px)); letter-spacing: .04em; white-space: nowrap; text-shadow: 0 .11em 0 rgba(0,0,0,.25); box-shadow: 0 .27em 0 var(--leaf-dark), 0 .45em .9em rgba(0,0,0,.2); transition: transform .2s, background .2s; }
.centre .ribbon .n { width: 1.81em; height: 1.81em; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #344746; font-size: .955em; text-shadow: none; box-shadow: inset 0 0 0 .15em #344746; }
.centre.soon .ribbon { background: #344746; box-shadow: 0 .3em 0 #1f2d2c; font-size: max(.95cqw, min(1.25cqw, 11px)); }
.centre.soon .ribbon .n { font-size: 1.105em; background: #f2c230; box-shadow: none; }
.centre.soon .tag { margin-top: .5em; background: #f2c230; color: #2b2118; font-family: var(--display); font-size: max(.8cqw, min(1.2cqw, 9px)); letter-spacing: .06em; padding: .19em .875em; border-radius: .375em; box-shadow: 0 .25em 0 #b48a12; }
.centre.target { pointer-events: auto; cursor: pointer; }
.centre.target .ribbon { animation: glow-ribbon 1.6s ease-in-out infinite; }
@keyframes glow-ribbon { 50% { box-shadow: 0 .27em 0 var(--leaf-dark), 0 0 0 .45em rgba(255,255,255,.55); } }
.centre.hot .ribbon { transform: scale(1.15); background: #f2c230; color: #2b2118; text-shadow: none; box-shadow: 0 .27em 0 #b48a12, 0 0 0 .55em rgba(255,255,255,.8); }
.centre.good .ribbon { background: #3fa34d; transform: scale(1.12); }
/* A wrong pick is dark red, so it reads clearly against the green map. */
.centre.bad .ribbon { background: #8b1a1a; box-shadow: 0 .27em 0 #4f0a0a, 0 0 0 .45em rgba(139,26,26,.35); animation: shake .4s; }
.centre .nm-short { display: none; }
.centre.hint .ribbon { animation: glow-ribbon .7s ease-in-out infinite; background: #3fa34d; }
.drop-ring { position: absolute; width: 12cqw; height: 12cqw; transform: translate(-50%, -50%); border-radius: 50%; border: .35cqw dashed rgba(255,255,255,.85); background: rgba(255,255,255,.12); pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s; z-index: 1; }
.dragging .drop-ring { opacity: 1; }
.drop-ring.hot { background: rgba(242,194,48,.35); border-color: #fff; transform: translate(-50%, -50%) scale(1.1); }

/* Level posts on the map */
/* Sized in em off one font size, so the whole post (plank, pole, arrow) keeps the label floor. */
.post { position: absolute; transform: translate(-50%, -100%); z-index: 4; display: flex; flex-direction: column; align-items: center; border: 0; background: none; padding: 0; font-size: max(1.1cqw, min(1.6cqw, 12px)); -webkit-tap-highlight-color: transparent; }
.post .plank { display: flex; align-items: center; gap: .45em; padding: .41em .82em .41em .45em; font-family: var(--display); font-size: 1em; letter-spacing: .03em; white-space: nowrap; border-radius: .73em; border-width: .2em; box-shadow: inset 0 .14em 0 rgba(255,255,255,.18), 0 .41em 0 var(--wood-edge), 0 .73em 1.36em rgba(0,0,0,.3); }
.post .plank .num { width: 1.82em; height: 1.82em; border-radius: 50%; display: grid; place-items: center; background: #fbf3e3; color: var(--wood-dark); font-size: 1em; text-shadow: none; }
.post .plank .num .icon { width: 1.09em; height: 1.09em; }
.post .pole { width: .64em; height: 2.36em; background: linear-gradient(90deg, #5d4329, #8a6a45, #5d4329); border-radius: 0 0 .27em .27em; }
.post .arrow { position: absolute; top: -3.09em; width: 2.36em; height: 2.36em; color: #fff; filter: drop-shadow(0 .18em 0 rgba(0,0,0,.35)); animation: hop 1s ease-in-out infinite; }
.post .arrow .icon { width: 100%; height: 100%; stroke-width: 3.4; transform: rotate(90deg); }
@keyframes hop { 50% { transform: translateY(-.73em); } }
.post.locked { filter: grayscale(.85) brightness(.9); cursor: not-allowed; }
.post.done .plank .num { background: var(--leaf); color: #1f2d1a; }
.post .pstars { display: flex; gap: .14em; margin-top: .27em; }
.post .pstars .icon { width: 1.18em; height: 1.18em; fill: #f2c230; color: #8a6a0c; stroke-width: 2; filter: drop-shadow(0 .09em 0 rgba(0,0,0,.4)); }
.post .pstars .icon.off { fill: rgba(0,0,0,.3); color: rgba(0,0,0,.2); }
.post:not(.locked):hover .plank, .post:focus-visible .plank { transform: translateY(-.18em); }
.hide-posts .post[data-level] { opacity: 0; pointer-events: none; transition: opacity .3s; }

/* The Ranger on the map */
.walker { position: absolute; width: 4.6cqw; transform: translate(-50%, -96%); z-index: 6; pointer-events: none; transition-property: left, top; transition-timing-function: linear; }
.walker img { width: 100%; transform: scaleX(var(--face, 1)); filter: drop-shadow(0 .4cqw .4cqw rgba(0,0,0,.35)); }
.walker::after { content: ''; position: absolute; left: 15%; right: 15%; bottom: -2%; height: 8%; background: rgba(0,0,0,.25); border-radius: 50%; z-index: -1; }
.walker.walking img { animation: step .32s ease-in-out infinite alternate; }

/* ── Map board (Phaser 4, public/js/board.js) ──────────────────────────────
   The canvas draws the map, the Ranger and the effects. The stage (labels, posts, signs,
   drop rings) stays HTML on top; the board sets its size and offset to match the camera. */
.board-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.board-layer canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.map-viewport.board-on { display: block; overflow: hidden; touch-action: none; padding: 0; }
.board-on .map-stage { position: absolute; left: 0; top: 0; aspect-ratio: auto; z-index: 1; will-change: transform; }
.board-on .map-stage > img.map-bg, .board-on .walker { display: none; }
/* The camera zooms the map, so labels get a 12px floor and a cap (about their old size on a
   2560px screen), instead of growing with every zoom. */
.board-on .centre .ribbon, .board-on .post { font-size: clamp(12px, 1.1cqw, 22px); }
.board-on .centre.soon .ribbon { font-size: clamp(11px, .95cqw, 19px); }
.board-on .centre.soon .tag { font-size: clamp(9px, .8cqw, 15px); }
/* Level 2 frames all six live centres; the coming-soon labels aren't destinations, so they step back. */
.board-on .map-stage.courier-on .centre.soon { display: none; }
.board-on .float-pts { font-size: clamp(14px, 2.2cqw, 34px); }
/* Small maps (phones, the Courier frame): short centre names so neighbours don't collide. */
@container (max-width: 1100px) {
  .board-on .centre .nm { display: none; }
  .board-on .centre .nm-short { display: inline; }
  /* During a level on a small map, the coming-soon labels step back so they don't crowd the play area. */
  .board-on .map-stage.framed .centre.soon { display: none; }
}
/* The smallest maps (the Courier frame on phones): a slightly smaller, tighter label so neighbours don't touch. */
@container (max-width: 700px) {
  .board-on .centre .ribbon { font-size: 10.5px; gap: .3em; padding-right: .6em; }
}
/* A small phone held sideways frames the Courier very small: still above today's 7.6px labels. */
@container (max-width: 420px) {
  .board-on .centre .ribbon { font-size: 9px; }
}
@container (max-width: 340px) {
  .board-on .centre .ribbon { font-size: 8px; }
}
@keyframes step { from { transform: scaleX(var(--face, 1)) translateY(0) rotate(-3deg); } to { transform: scaleX(var(--face, 1)) translateY(-6%) rotate(3deg); } }

/* Ranger guide bubble (bottom-left of the screen) */
.guide { position: absolute; left: max(.75rem, env(safe-area-inset-left)); bottom: max(.75rem, env(safe-area-inset-bottom)); z-index: 12; display: flex; align-items: flex-end; gap: .5rem; max-width: min(35rem, calc(100% - 1.5rem)); pointer-events: none; }
.guide-face { width: 4.75rem; height: 4.75rem; flex: none; border-radius: 50%; overflow: hidden; background: #cfe6b0; border: .25rem solid #fbf3e3; box-shadow: 0 0 0 3px var(--wood-edge), 0 .375rem 0 rgba(0,0,0,.25); }
.guide-face img { width: 100%; height: 100%; object-fit: cover; object-position: top; transform: scale(1.7) translateY(16%); }
.guide .say { margin: 0 0 .625rem .625rem; pointer-events: auto; font-size: clamp(.9rem, 1.1vw, 1.05rem); animation: pop-in .35s cubic-bezier(.34,1.56,.64,1); }

/* ── Level intro / complete cards ──────────────────────────────────────── */
/* Same safe centring as the full-screen wrappers: a panel taller or wider than the
   screen scrolls instead of being cut off. The top padding leaves room for banners. */
.overlay { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr); overflow-y: auto; overscroll-behavior: contain; padding: 2rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); background: rgba(20,35,28,.45); animation: fade-in .25s; }
.overlay > * { margin: auto; }
/* Levels 3–4 with the map board: a lighter dim shows the live Village / waterfall behind the panel. */
.overlay.see-map { background: rgba(20,35,28,.22); }
.overlay.step-aside { opacity: 0; pointer-events: none; transition: opacity .45s; }
.card-level { width: min(32.5rem, 100%); padding: 2.125rem 2.125rem 1.75rem; text-align: center; animation: drop-in .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes drop-in { from { transform: translateY(-2.5rem) scale(.9); opacity: 0; } }
.card-level .banner { position: absolute; top: -1.25rem; left: 50%; transform: translateX(-50%); font-size: 1.15rem; white-space: nowrap; }
.card-level .big-icon { width: 5.75rem; height: 5.75rem; margin: .375rem auto .625rem; border-radius: 50%; display: grid; place-items: center; background: #344746; color: #fff; border: .25rem solid #fbf3e3; box-shadow: 0 0 0 .25rem var(--board-edge); }
.card-level .big-icon .icon { width: 2.875rem; height: 2.875rem; stroke-width: 2; }
.card-level h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 2.2rem; letter-spacing: .01em; color: var(--wood-dark); }
.card-level p { margin: .5rem 0 1.375rem; font-weight: 700; font-size: 1.08rem; color: #5b4a38; line-height: 1.45; }
.card-level .how { display: flex; gap: .625rem; justify-content: center; margin: -.5rem 0 1.375rem; flex-wrap: wrap; }
.card-level .how span { display: inline-flex; align-items: center; gap: .375rem; font-weight: 800; font-size: .9rem; padding: .375rem .75rem; border-radius: .5rem; background: rgba(107,81,54,.12); color: var(--wood-dark); }
.card-level .how .icon { width: 1rem; height: 1rem; }
.big-stars { display: flex; justify-content: center; gap: .375rem; margin: .25rem 0 .375rem; }
.big-stars .icon { width: 4rem; height: 4rem; stroke-width: 1.6; color: #b9a98f; fill: #e7dcc6; }
.big-stars .icon.on { color: #8a6a0c; fill: #f2c230; animation: star-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.big-stars .icon:nth-child(2) { transform: translateY(-.625rem); width: 4.75rem; height: 4.75rem; }
.big-stars .icon.on:nth-child(2) { animation-delay: .25s; }
.big-stars .icon.on:nth-child(3) { animation-delay: .5s; }
@keyframes star-pop { from { transform: scale(0) rotate(-40deg); } }
.big-stars .icon:nth-child(2).on { animation-name: star-pop-mid; }
@keyframes star-pop-mid { from { transform: translateY(-.625rem) scale(0) rotate(-40deg); } to { transform: translateY(-.625rem); } }
.pts-line { font-family: var(--display); font-size: 1.5rem; color: var(--wood-dark); display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }

/* ── Level 2: courier ──────────────────────────────────────────────────── */
.dock { position: absolute; left: 50%; bottom: max(.875rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 15; width: min(40rem, calc(100% - 1.5rem)); display: flex; align-items: stretch; gap: .875rem; padding: .875rem 1rem; animation: rise .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes rise { from { transform: translate(-50%, 2.5rem); opacity: 0; } }
.dock .token { position: relative; flex: none; width: 5.75rem; height: 5.75rem; border-radius: 50%; background: #cfe6b0; border: .25rem solid #fff; box-shadow: 0 0 0 3px var(--board-edge), 0 .375rem 0 rgba(0,0,0,.25); cursor: grab; touch-action: none; display: grid; place-items: center; overflow: hidden; }
.dock .token svg { width: 100%; height: 100%; }
.dock .token.lift { visibility: hidden; }
.dock .need { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .25rem; }
.dock .need .meta { font-weight: 900; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #8d7a63; }
.dock .need q { font-weight: 800; font-size: 1.12rem; line-height: 1.3; quotes: '“' '”'; }
.dock .need .hint { font-weight: 800; font-size: .82rem; color: var(--leaf-dark); display: flex; align-items: center; gap: .375rem; }
.dock .need .hint .icon { width: .9375rem; height: .9375rem; }
/* Who's asking: name in the signage face, role as a small tag. */
.dock .need .who { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; }
.dock .need .who b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; line-height: 1.1; letter-spacing: .02em; color: #344746; }
.dock .need .role { font-weight: 900; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #6b5136; background: rgba(107,81,54,.12); padding: .125rem .5rem; border-radius: 999px; }
.dock .need .foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dock .need .secs { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: .2rem; font-family: var(--display); font-size: .95rem; color: #3a5a2a; font-variant-numeric: tabular-nums; }
.dock .need .secs .icon { width: 1rem; height: 1rem; }
.dock .need .secs.low { color: #8b1a1a; }
.dock .need .keys { display: none; }
@media (hover: hover) and (pointer: fine) { .dock .need .keys { display: inline; } }
/* Answer feedback: one line for what happened, one for the right centre. */
.dock .verdict { display: flex; align-items: flex-start; gap: .45rem; font-weight: 800; font-size: 1rem; line-height: 1.3; }
.dock .verdict .icon { flex: none; width: 1.375rem; height: 1.375rem; padding: .22rem; margin-top: .05rem; border-radius: 50%; color: #fff; stroke-width: 3.4; }
.dock .verdict b { font-weight: 900; }
.dock .verdict.bad { color: #7a1212; }
.dock .verdict.bad .icon { background: #8b1a1a; }
.dock .verdict.good { color: #2f5d1d; }
.dock .verdict.good .icon { background: #3fa34d; }
.patience { height: .625rem; border-radius: .3125rem; background: rgba(107,81,54,.2); overflow: hidden; margin-top: .25rem; }
.patience i { display: block; height: 100%; width: 100%; background: #3fa34d; border-radius: .3125rem; transform-origin: left; }
.patience.warn i { background: #f2c230; }
.patience.low i { background: var(--red); }
.dock .count { position: absolute; top: -1rem; right: 1.125rem; font-size: .95rem; }
.dock.wrong { border-color: #8b1a1a; box-shadow: inset 0 0 0 .3125rem var(--board), inset 0 0 0 .4375rem rgba(139,26,26,.45), 0 0 0 .3rem rgba(139,26,26,.5), 0 .375rem 0 rgba(58,41,24,.55), 0 1rem 1.875rem rgba(0,0,0,.28); }
.dock.wrong q { color: #7a1212; }
.ghost { position: fixed; z-index: 50; width: 5.75rem; height: 5.75rem; border-radius: 50%; overflow: hidden; pointer-events: none; border: .25rem solid #fff; box-shadow: 0 0 0 3px var(--board-edge), 0 .875rem 1.375rem rgba(0,0,0,.35); background: #cfe6b0; transform: translate(-50%, -50%) scale(1.08); }
.ghost svg { width: 100%; height: 100%; }
.ghost.fly { transition: left .5s cubic-bezier(.5,0,.3,1), top .5s cubic-bezier(.5,0,.3,1), transform .5s, opacity .5s; }
.float-pts { position: absolute; z-index: 20; transform: translate(-50%, -100%); font-family: var(--display); font-size: max(2.2cqw, min(3cqw, 14px)); color: #fff; text-shadow: 0 .09em 0 rgba(0,0,0,.45); pointer-events: none; animation: float-up 1.1s ease-out forwards; white-space: nowrap; }
.float-pts.bad { color: #ffd2c8; }
@keyframes float-up { to { transform: translate(-50%, -260%); opacity: 0; } }
.streak { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 16; font-size: 1.3rem; animation: pop-in .35s cubic-bezier(.34,1.56,.64,1); }

/* ── Level 3: verified or not ──────────────────────────────────────────── */
.noticeboard { width: min(41.25rem, 100%); padding: 1.625rem 1.625rem 1.375rem; display: grid; gap: 1rem; }
.noticeboard .nb-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.noticeboard .nb-head h3 { min-width: 0; margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.15; letter-spacing: .02em; }
/* "10 / 12" always reads on one line; the title gives way instead. */
.noticeboard .nb-head .count { font-family: var(--display); font-size: 1.2rem; opacity: .9; white-space: nowrap; }
.pin-area { position: relative; min-height: 15.625rem; display: grid; place-items: center; }
.noticeboard .float-pts { font-size: 2.4rem; }
.note { position: relative; width: min(25rem, 100%); padding: 1.625rem 1.625rem 1.25rem; background: #fffaf0; color: var(--ink); border-radius: .25rem; box-shadow: 0 .625rem 1.25rem rgba(0,0,0,.3); text-shadow: none; transform: rotate(var(--r, -1.5deg)); animation: note-in .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes note-in { from { transform: translateY(-1.875rem) rotate(-8deg); opacity: 0; } }
.note::before { content: ''; position: absolute; top: -.625rem; left: 50%; width: 1.375rem; height: 1.375rem; margin-left: -.6875rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a73, #c8452f 60%, #7d2415); box-shadow: 0 3px 3px rgba(0,0,0,.35); }
.note .co { font-weight: 900; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: #8d7a63; }
.note .claim { margin: .25rem 0 .75rem; font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.1; color: #2b2118; }
.note .ev { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1rem; padding: .5rem .625rem; border-radius: .5rem; }
.note .ev.yes { background: #e6f3d6; color: #2f6b1d; }
.note .ev.no { background: #f1ece4; color: #9a8b78; border: 2px dashed #cdbfa9; }
.note .ev .icon { width: 1.25rem; height: 1.25rem; }
.note .timer { position: absolute; left: 0; right: 0; bottom: 0; height: .375rem; background: rgba(0,0,0,.08); }
.note .timer i { display: block; height: 100%; background: #344746; transform-origin: left; }
.note .ink { position: absolute; right: 1rem; top: 2.125rem; padding: .25rem .75rem; border: .25rem solid currentColor; border-radius: .5rem; font-family: var(--display); font-size: 1.7rem; letter-spacing: .06em; transform: rotate(-14deg) scale(1.6); opacity: 0; mix-blend-mode: multiply; animation: stamp .25s forwards; }
.note .ink.ok { color: #2f8a3a; }
.note .ink.nope { color: var(--red); }
.note .ink.miss { color: #b48a12; }
@keyframes stamp { to { transform: rotate(-14deg) scale(1); opacity: .9; } }
.note.gone { animation: note-out .3s forwards; }
@keyframes note-out { to { transform: translateX(5rem) rotate(10deg); opacity: 0; } }
.nb-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: .75rem; }
.nb-actions .gbtn { min-height: 4.125rem; font-size: 1.45rem; }

/* ── Level 4: chest ────────────────────────────────────────────────────── */
.chest-panel { width: min(45rem, 100%); padding: 1.625rem 1.625rem 1.375rem; display: grid; gap: 1rem; justify-items: center; text-align: center; }
.chest-panel h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.6rem; color: var(--wood-dark); }
.chest-panel .sub { margin: -.5rem 0 0; font-weight: 700; color: #5b4a38; }
/* The chest scales with its panel; the slots are laid out in % so they always sit on the chest front. */
.chest-art { position: relative; width: min(18.75rem, 100%); aspect-ratio: 3 / 2; }
.chest-art svg { width: 100%; height: 100%; overflow: visible; }
.chest-art .lid { transform-origin: 50% 46%; transform-box: fill-box; transition: transform .8s cubic-bezier(.34,1.56,.64,1); }
.chest-art.open .lid { transform: rotate(-24deg) translateY(-36%); }
.chest-art .glow { opacity: 0; transition: opacity .6s .3s; }
.chest-art.open .glow { opacity: 1; }
.slots { position: absolute; left: 12.5%; right: 12.5%; bottom: 13%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4%; }
.slot-seal { aspect-ratio: 1; padding: 0; border-radius: 50%; border: 3px dashed rgba(255,243,214,.7); background: rgba(0,0,0,.25); display: grid; place-items: center; color: #fff; }
.slot-seal.filled { border: 0; background: none; }
.slot-seal .wax { width: 100%; height: 100%; }
.slot-seal .wax .icon { width: 45%; height: 45%; }
.slot-seal.right .wax { box-shadow: 0 0 0 .25rem #7ed36f, 0 3px 0 rgba(0,0,0,.35); }
.slot-seal.wrong .wax { box-shadow: 0 0 0 .25rem #ff8a73, 0 3px 0 rgba(0,0,0,.35); animation: shake .4s; }
.seals { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem .625rem; width: 100%; }
.seal { display: flex; flex-direction: column; align-items: center; gap: .375rem; border: 0; background: none; padding: .25rem; font-weight: 900; font-size: .88rem; color: var(--wood-dark); -webkit-tap-highlight-color: transparent; }
.seal.used { opacity: .35; }
.seal.missed .wax { box-shadow: 0 0 0 .25rem #f2c230, 0 3px 0 rgba(0,0,0,.35); }
.wax { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; color: #fff4ec; background: radial-gradient(circle at 35% 30%, #e0664f, #b33a26 60%, #7d2415); box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 -.25rem .375rem rgba(0,0,0,.25), inset 0 3px .25rem rgba(255,255,255,.25); position: relative; }
.wax::before { content: ''; position: absolute; inset: .3125rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.28); }
.wax .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2.3; }
.seal:active .wax { transform: scale(.94); }

/* ── Survey & finish ───────────────────────────────────────────────────── */
.survey-card { width: min(38.75rem, 100%); padding: 1.875rem 2rem 1.625rem; }
.survey-card h2 { margin: 0 0 .25rem; font-family: var(--display); font-weight: 400; font-size: 1.9rem; color: var(--wood-dark); }
.survey-card .intro { margin: 0 0 1.125rem; font-weight: 700; color: #6b5a47; }
.survey-card h3 { margin: 0 0 .625rem; font-size: 1.1rem; font-weight: 900; }
.survey-q { margin-bottom: 1.25rem; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.scale button { height: 3.5rem; border-radius: .75rem; border: 2.5px dashed #a88361; background: transparent; font: 400 1.5rem var(--display); color: var(--wood-dark); }
.scale button[aria-pressed='true'] { background: var(--pine); border: 2.5px solid var(--pine); color: #fff; }
.scale-labels { display: flex; justify-content: space-between; font-weight: 800; font-size: .82rem; color: #8d7a63; margin-top: .375rem; }

.finish-wrap { background: rgba(20,35,28,.4); }
.finish-card { width: min(30rem, 100%); padding: 2.5rem 2.125rem 1.875rem; text-align: center; display: grid; justify-items: center; gap: .375rem; animation: drop-in .6s cubic-bezier(.34,1.56,.64,1); }
.finish-card .banner { position: absolute; top: -1.375rem; left: 50%; transform: translateX(-50%); font-size: 1.3rem; white-space: nowrap; }
.done-badge { position: relative; width: 11.875rem; height: 11.875rem; margin: .375rem 0 .25rem; }
.done-badge svg { width: 100%; height: 100%; }
.done-badge .pct { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; font-family: var(--display); color: var(--wood-dark); line-height: 1; }
.done-badge .pct b { font-size: 3.6rem; font-weight: 400; }
.done-badge .pct small { font-family: var(--body); font-weight: 900; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #8d7a63; margin-top: .25rem; }
.finish-card h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 2.3rem; color: var(--wood-dark); }
.finish-card .line { margin: 0 0 .875rem; font-weight: 800; color: #5b4a38; font-size: 1.05rem; }
.ticket { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; margin-bottom: 1.125rem; background: #fbe9a8; border: 2px dashed #b48a12; border-radius: .625rem; text-align: left; }
.ticket .icon { width: 1.75rem; height: 1.75rem; color: #8a6a0c; flex: none; }
.ticket small { display: block; font-weight: 800; font-size: .78rem; color: #8a6a0c; text-transform: uppercase; letter-spacing: .06em; }
.ticket code { font: 800 1.35rem ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .1em; color: var(--ink); }

/* ── Idle + misc ───────────────────────────────────────────────────────── */
.idle-card { width: min(26.25rem, 100%); padding: 1.875rem; text-align: center; }
.idle-card h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.8rem; color: var(--wood-dark); }
.idle-card .n { font-family: var(--display); font-size: 4rem; color: var(--wood-dark); line-height: 1.1; }
.idle-card p { margin: 0 0 1.125rem; font-weight: 700; color: #5b4a38; }
.toast { position: fixed; left: 50%; top: 5.25rem; transform: translateX(-50%); z-index: 60; width: max-content; max-width: calc(100% - 2rem); padding: .625rem 1.125rem; font-weight: 800; text-align: center; animation: pop-in .3s; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }
@keyframes shake { 20%, 60% { transform: translateX(-.375rem); } 40%, 80% { transform: translateX(.375rem); } }
.shake { animation: shake .4s; }
.portrait-tip { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; background: rgba(20,35,28,.85); padding: 1.5rem; }
@media (orientation: portrait) and (max-width: 700px) { .portrait-tip.show { display: grid; } }
.portrait-tip .board { padding: 1.625rem; text-align: center; max-width: 22.5rem; }
.portrait-tip h3 { margin: 0 0 .375rem; font-family: var(--display); font-weight: 400; font-size: 1.6rem; color: var(--wood-dark); }
.portrait-tip p { margin: 0 0 1rem; font-weight: 700; }

.dock .token.happy::after, .dock .token.sad::after { content: ''; position: absolute; right: 2px; bottom: 2px; width: 1.875rem; height: 1.875rem; border-radius: 50%; border: 3px solid #fff; background: #3fa34d center / 1.125rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E"); animation: pop-in .3s cubic-bezier(.34,1.56,.64,1); }
.dock .token.sad::after { background-color: #8b1a1a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }

@media (max-width: 900px) {
  .hud .who small { display: none; }
  .hud .who b { max-width: 9em; }
  .track .step { min-width: 3rem; }
  .track .link { width: .75rem; }
  .best-board { display: none; }
}
@media (max-width: 640px) {
  .lb-row { grid-template-columns: 1fr; }
  .logbook { padding: 1.625rem 1.25rem; }
  .hud { gap: .5rem; padding: max(.375rem, env(safe-area-inset-top)) max(.625rem, env(safe-area-inset-right)) .375rem max(.625rem, env(safe-area-inset-left)); }
  .hud .face, .hud .who { display: none; }
  .track .medal { width: 2.125rem; height: 2.125rem; }
  .coins { font-size: 1.2rem; min-width: 0; }
  .dock .token { width: 4.375rem; height: 4.375rem; }
  .dock .need q { font-size: .98rem; }
  .dock .need .who b { font-size: 1.05rem; }
  .dock .verdict { font-size: .92rem; }
  .wax { width: 3rem; height: 3rem; }
  .title-sign { padding: 1.75rem 1.5rem 1.5rem; }
  .title-sign h1 { font-size: clamp(2rem, 10.5vw, 2.6rem); }
  .note .claim { font-size: 1.5rem; }
}
/* Narrow phones held upright */
@media (max-width: 480px) {
  .hud { gap: .375rem; }
  .track { gap: 3px; }
  .track .step { min-width: 2rem; }
  .track .medal { width: 1.875rem; height: 1.875rem; }
  .track .medal .icon { width: 1rem; height: 1rem; }
  .track .link { width: .375rem; }
  /* Narrow phones: a compact visitor card, so the map keeps most of the screen. */
  .dock { padding: .625rem .75rem; gap: .625rem; }
  .dock .token { width: 3.25rem; height: 3.25rem; align-self: flex-start; }
  .dock .need q { font-size: .92rem; line-height: 1.25; }
  .dock .need .hint { display: none; }
  .dock .need .role { font-size: .62rem; }
  .dock .verdict { font-size: .86rem; }
  .track .stars .icon { width: .625rem; height: .625rem; }
  .coins { font-size: 1.1rem; gap: .375rem; }
  .coin { width: 1.375rem; height: 1.375rem; }
  .hud .round-btn { width: 2.75rem; height: 2.75rem; }
  .title-wrap { padding: 1rem; }
  .title-sign .gbtn.big { font-size: 1.6rem; padding: 0 1.4em; }
  .title-ranger img { width: clamp(5rem, 24vw, 7rem); }
  .title-ranger .say { margin-bottom: 3rem; font-size: .92rem; }
  .lb-actions .gbtn { font-size: 1.1rem; padding: 0 .9em; }
  .noticeboard { padding: 1.25rem 1rem 1rem; }
  /* The title fits on one line beside the count from 360px up (320px phones wrap it, never the count). */
  .noticeboard .nb-head { gap: .5rem; }
  .noticeboard .nb-head h3 { font-size: 1.15rem; }
  .noticeboard .nb-head .count { font-size: 1rem; }
  .noticeboard .nb-side { gap: .5rem; }
  .noticeboard .nb-side .help-btn { width: 2.75rem; height: 2.75rem; font-size: 1.35rem; }
  .note { padding: 1.375rem 1.125rem 1.125rem; }
  .nb-actions { grid-template-columns: 1fr; }
  .nb-actions .gbtn { min-height: 3.5rem; font-size: 1.25rem; }
  .card-level, .chest-panel, .survey-card, .finish-card { padding-left: 1.125rem; padding-right: 1.125rem; }
  .seals { grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr)); gap: .625rem .25rem; }
  .seal { font-size: .8rem; }
  /* Big card buttons go full-width with slim padding, so "Continue →" etc. always fit. */
  .card-level .gbtn.big, .finish-card .gbtn.big, .chest-panel .gbtn.big, .idle-card .gbtn, .portrait-tip .gbtn { width: 100%; padding: 0 .75em; }
  .card-level .gbtn.big, .finish-card .gbtn.big, .chest-panel .gbtn.big { font-size: 1.5rem; }
  /* Staff read the voucher code at the booth: keep it on one line. */
  .ticket code { font-size: 1.1rem; letter-spacing: .06em; white-space: nowrap; }
}
/* Short landscape (laptop browser windows, small tablets): a smaller Ranger and the top 3 explorers. */
@media (orientation: landscape) and (max-height: 760px) {
  .title-ranger img { width: clamp(5.5rem, 9vw, 8rem); }
  .title-ranger .say { margin-bottom: 3.5rem; }
  .best-board { margin-bottom: .75rem; padding: .75rem 1rem .625rem; }
  .best-board li:nth-child(n+4) { display: none; }
}
/* Phones on their side: the sound / full-screen buttons stack in the right margin, clear of the sign. */
@media (orientation: landscape) and (max-height: 560px) {
  .corner { flex-direction: column; top: max(.5rem, env(safe-area-inset-top)); }
  .corner .round-btn { width: 2.75rem; height: 2.75rem; }
  .title-sign { max-width: calc(100% - 7rem); }
}
/* Narrow upright phones: keep the title sign clear of the sound / full-screen buttons,
   and on short ones (320×568) tighten it so the sign and the Ranger both fit. */
@media (orientation: portrait) and (max-width: 480px) {
  .screen.title .title-wrap { padding-top: 4.25rem; }
}
@media (orientation: portrait) and (max-width: 480px) and (max-height: 620px) {
  .title-sign { padding-top: 1.375rem; padding-bottom: 1.125rem; }
  .title-sign .logo { height: 1.75rem; margin-bottom: .5rem; }
  .title-sign .sub { margin: .5rem 0 .875rem; font-size: 1rem; }
  .title-sign .gbtn.big { min-height: 3.5rem; }
  .title-ranger .say { margin-bottom: 2.25rem; }
}

/* Short landscape screens (phones on their side) */
@media (max-height: 560px) {
  .title-foot { display: none; }
  .title-sign { padding: 1.25rem 1.75rem 1.125rem; }
  .title-sign .ropes { display: none; }
  .title-sign h1 { font-size: min(2.6rem, 10.5vw); }
  .title-sign .sub { margin: .5rem 0 .75rem; font-size: 1rem; }
  .title-sign .gbtn.big { min-height: 3.5rem; font-size: 1.5rem; }
  .hud { padding: .25rem max(.625rem, env(safe-area-inset-right)) .25rem max(.625rem, env(safe-area-inset-left)); }
  .hud .face, .hud .who small { display: none; }
  .hud .round-btn { width: 2.75rem; height: 2.75rem; }
  .track .medal { width: 2rem; height: 2rem; }
  .track .stars { display: none; }
  .track .link { margin-bottom: 0; }
  .guide { max-width: min(26rem, calc(100% - 1.5rem)); }
  .guide-face { width: 3.25rem; height: 3.25rem; }
  .guide .say { font-size: .85rem; padding: .5rem .75rem; }
  .overlay, .logbook-wrap, .finish-wrap { padding-top: 1.75rem; padding-bottom: .5rem; }
  .card-level { padding: 1.375rem 1.375rem 1.125rem; }
  .card-level .big-icon { width: 3.75rem; height: 3.75rem; margin: 0 auto .25rem; }
  .card-level .big-icon .icon { width: 1.875rem; height: 1.875rem; }
  .card-level h2 { font-size: 1.6rem; }
  .card-level p { margin: .25rem 0 .75rem; font-size: .95rem; }
  .card-level .how { margin: 0 0 .75rem; }
  .big-stars .icon { width: 2.75rem; height: 2.75rem; }
  .big-stars .icon:nth-child(2) { width: 3.25rem; height: 3.25rem; }
  .gbtn.big { min-height: 3.375rem; font-size: 1.35rem; }
  /* Compact dock: stays within the bottom quarter of the map, below every drop target. */
  .dock { bottom: max(.375rem, env(safe-area-inset-bottom)); width: min(40rem, calc(100% - 1rem)); padding: .375rem .625rem; gap: .625rem; align-items: center; }
  .dock .token { width: 3rem; height: 3rem; border-width: 3px; }
  .dock .token.happy::after, .dock .token.sad::after { right: 0; bottom: 0; width: 1.25rem; height: 1.25rem; border-width: 2px; background-size: .75rem; }
  .dock .need { gap: 1px; }
  .dock .need .who b { font-size: .95rem; }
  .dock .need .role { font-size: .6rem; }
  .dock .verdict { font-size: .8rem; gap: .3rem; }
  .dock .verdict .icon { width: 1.1rem; height: 1.1rem; padding: .15rem; }
  .dock .need .meta { font-size: .68rem; }
  .dock .need .secs { font-size: .8rem; }
  .dock .need q { font-size: .85rem; line-height: 1.25; }
  .dock .need .hint { display: none; }
  .patience { height: .375rem; margin-top: 2px; }
  .dock .count { top: -.875rem; font-size: .75rem; }
  .ghost { width: 3.75rem; height: 3.75rem; }
  .noticeboard { padding: .875rem 1rem; gap: .5rem; }
  .pin-area { min-height: 10.625rem; }
  .note { padding: 1.125rem 1.125rem .875rem; }
  .note .claim { font-size: 1.35rem; margin-bottom: .5rem; }
  .nb-actions .gbtn { min-height: 3.125rem; font-size: 1.15rem; }
  .chest-panel { padding: .875rem; gap: .5rem; }
  .chest-panel .sub { font-size: .9rem; }
  .chest-panel .gbtn.big { min-height: 3rem; }
  .chest-art { width: min(12.5rem, 100%); }
  .seal { gap: 3px; padding: 2px; font-size: .7rem; line-height: 1.2; }
  .wax { width: 2.25rem; height: 2.25rem; }
  .wax .icon { width: 1.125rem; height: 1.125rem; }
  .logbook, .survey-card { padding: 1.25rem 1.25rem 1rem; }
  .finish-card { padding: 1.625rem 1.375rem 1.25rem; }
  .done-badge { width: 8.125rem; height: 8.125rem; }
  .done-badge .pct b { font-size: 2.4rem; }
  .done-badge .pct small { font-size: .6rem; }
  .finish-card h2 { font-size: 1.7rem; }
}
/* Short and wide: the chest sits beside the seals so the panel fits without scrolling. */
@media (max-height: 560px) and (min-aspect-ratio: 4/3) {
  .chest-panel { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; }
  .chest-panel h3, .chest-panel .sub, .chest-panel [data-act=open] { grid-column: 1 / -1; }
  .chest-art { width: clamp(10.5rem, 32vw, 14rem); }
  .seals { gap: .25rem; }
}

/* ── How to play (FET-1467) ────────────────────────────────────────────── */
[hidden] { display: none !important; }

/* The guide card: before each level, and again from the "?" button. */
.guide-card { padding-top: 2.375rem; }
.guide-card .how-main > p { margin: .25rem 0 1rem; }
.how-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; counter-reset: s; text-align: left; }
.how-steps li { counter-increment: s; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .625rem; align-items: center; padding: .5rem .75rem .5rem .5rem; border-radius: .625rem; background: rgba(107,81,54,.1); font-weight: 800; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.how-steps li::before { content: counter(s); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--wood); color: #fbf3e3; font-family: var(--display); font-size: 1.05rem; }
.how-steps b { color: var(--leaf-dark); }
.card-level .how { margin: 0 0 1rem; }
.card-level .how .count { background: #f2c230; color: var(--ink); }
.card-level .how .key { display: none; }
@media (hover: hover) and (pointer: fine) { .card-level .how .key { display: inline-flex; } }
.how-score { display: flex; align-items: center; justify-content: center; gap: .5rem; padding-top: .875rem; margin-bottom: .625rem; border-top: 2px dashed rgba(107,81,54,.35); font-weight: 900; font-size: .95rem; line-height: 1.3; color: var(--wood-dark); }
.how-score .coin { width: 1.375rem; height: 1.375rem; }
.card-level .how-safe { display: flex; align-items: flex-start; justify-content: center; gap: .5rem; margin: 0 0 1.25rem; font-size: .95rem; text-align: left; }
.how-safe .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .05rem; color: var(--leaf-dark); }

/* The "?" button: in the top bar on the map levels, in the panel header on the board and the chest. */
.help-btn { font-family: var(--display); font-size: 1.55rem; line-height: 1; background: var(--leaf); color: #1f2d1a; border-color: var(--leaf-dark); box-shadow: 0 .25rem 0 var(--leaf-dark); text-shadow: none; }
.help-btn:active { box-shadow: 0 1px 0 var(--leaf-dark); }
.noticeboard .nb-side { flex: none; display: flex; align-items: center; gap: .75rem; }
.panel-help { position: absolute; top: .875rem; right: .875rem; }

/* Ranger hints and coaching notes */
.nudge { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem .75rem; border-radius: .625rem; background: #fbefc8; color: #5a3d00; font-weight: 800; font-size: .92rem; line-height: 1.35; text-align: left; text-shadow: none; }
.nudge .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .1rem; }
.nudge b, .nb-msg b { color: #3d6a13; }
.chest-panel .nudge { grid-column: 1 / -1; justify-self: stretch; }
.dock .need .held { align-self: flex-start; display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: .5rem; background: #fbefc8; color: #5a3d00; font-weight: 900; font-size: .82rem; }
.dock .need .held .icon { width: .95rem; height: .95rem; }
.dock .need .next { align-self: flex-end; margin-top: .25rem; }

/* Level 1: "Your clue" points at the speech bubble on the first move. */
.guide.clue::before { content: 'Your clue'; position: absolute; left: 5.75rem; bottom: calc(100% - .25rem); padding: .375rem .625rem; border-radius: .4rem; background: #f2c230; color: var(--ink); font: 900 .75rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 2px 0 #b48a12; animation: clue-bob .7s infinite alternate; }
.guide.clue .say { animation: clue-pulse 1s 3; }
@keyframes clue-bob { to { transform: translateY(-.35rem); } }
@keyframes clue-pulse { 50% { box-shadow: 0 .25rem 0 rgba(0,0,0,.2), 0 0 0 .4rem rgba(242,194,48,.85); } }

/* Level 2: a ghost of the first visitor and a hand drag up toward the map and back. */
.coach-drag { position: fixed; z-index: 40; width: 0; height: 0; pointer-events: none; animation: coach-drag 2.4s ease-in-out infinite; }
.coach-drag .ghost-face { position: absolute; left: 0; top: 0; width: 4rem; height: 4rem; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; border: .2rem solid #fff; opacity: .85; box-shadow: 0 .375rem 1rem rgba(0,0,0,.3); }
.coach-drag .ghost-face svg { display: block; width: 100%; height: 100%; }
.coach-drag .hand { position: absolute; left: .25rem; top: .5rem; width: 2.75rem; height: 2.75rem; color: #fff; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.coach-drag .hand .icon { width: 100%; height: 100%; fill: rgba(43,33,24,.55); stroke-width: 2; }
@keyframes coach-drag { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 55%, 72% { transform: translate(var(--dx, 0), var(--dy, -10rem)); opacity: 1; } 92% { transform: translate(0, 0); opacity: .6; } 100% { opacity: 0; } }

/* Level 3: practice card callouts, timeouts, keys and board messages */
.note .callout { display: inline-flex; align-items: center; gap: .375rem; margin-top: .625rem; padding: .375rem .625rem; border-radius: .5rem; background: #f2c230; color: var(--ink); font-weight: 900; font-size: .85rem; box-shadow: 0 2px 0 #b48a12; }
.note .callout .icon { width: 1rem; height: 1rem; transform: rotate(-90deg); stroke-width: 3; }
.note .tout { display: flex; align-items: center; gap: .375rem; margin-top: .625rem; font-weight: 900; font-size: .85rem; color: #6b7f7c; }
.note .tout .icon { width: 1rem; height: 1rem; }
.nb-tip { margin: -.25rem 0 0; text-align: center; font-weight: 800; font-size: .95rem; color: #fbefc8; }
.nb-msg { display: grid; gap: .625rem; justify-items: start; padding: .75rem 1rem; border-radius: .625rem; background: #fbefc8; color: #5a3d00; font-weight: 800; line-height: 1.4; text-shadow: none; }
.nb-actions .gbtn { position: relative; }
.nb-actions .kbd { display: none; position: absolute; top: .375rem; right: .5rem; padding: .125rem .375rem; border-radius: .3rem; background: rgba(0,0,0,.16); font: 800 .75rem/1.2 var(--body); text-shadow: none; }
@media (hover: hover) and (pointer: fine) { .nb-actions .kbd { display: inline-block; } }

/* Level 4: the open button bounces once all four seals are in. */
.gbtn.bounce { animation: btn-bounce .5s 2; }
@keyframes btn-bounce { 40% { transform: translateY(-.5rem); } }

/* Short landscape screens (phones sideways, 1024×600 kiosks, laptop windows): two columns. */
@media (orientation: landscape) and (max-height: 720px) {
  .guide-card { width: min(50rem, 100%); }
  .how-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; text-align: left; }
  .guide-card .how-main > p { margin: 0 0 .75rem; text-align: center; }
  .how-steps { margin-bottom: 0; }
  .how-side { display: grid; gap: .75rem; }
  .card-level .how-side .how { margin: 0; }
  .how-side .how-score { margin: 0; padding-top: .75rem; }
  .card-level .how-side .how-safe { margin: 0; justify-content: flex-start; }
  .how-side .gbtn { width: 100%; }
}
@media (max-height: 560px) {
  .guide-card { padding-top: 1.75rem; }
  .how-steps { gap: .375rem; margin-bottom: .75rem; }
  .how-steps li { padding: .375rem .5rem; font-size: .9rem; }
  .how-steps li::before { width: 1.6rem; height: 1.6rem; font-size: .9rem; }
  .how-steps li { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .how-score { padding-top: .5rem; font-size: .88rem; }
  .card-level .how-safe { margin-bottom: .75rem; font-size: .88rem; }
  .hud .help-btn { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .coach-drag { animation-duration: 6s; }
  .guide.clue::before, .guide.clue .say, .gbtn.bounce { animation: none; }
}

/* ── ⋮ menu and Replay ───────────────────────────────────────────────── */
/* The menu at the right end of the top bar, and the card that confirms Replay. */
.game-menu { position: fixed; z-index: 75; min-width: 15.5rem; padding: .5rem; display: grid; gap: .125rem; transform-origin: top right; animation: pop-in .2s cubic-bezier(.34,1.56,.64,1); }
.game-menu button { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .75rem 1rem; border: 0; border-radius: .625rem; background: transparent; color: var(--wood-dark); font: 800 1.05rem/1.2 var(--body); text-align: left; cursor: pointer; }
.game-menu button:hover, .game-menu button:focus-visible { background: rgba(107,81,54,.14); outline: none; }
.game-menu button[data-menu=replay] { color: #9c3322; }
.game-menu .icon { width: 1.375rem; height: 1.375rem; }
.hud .menu-btn[aria-expanded=true] { background: #f2c230; color: var(--ink); }
.hud .menu-btn .icon { stroke-width: 3; }
.replay-card p.saved { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .875rem 0 0; padding: .625rem .875rem; border-radius: .625rem; background: #e7f3d3; color: #3f6a14; font-weight: 800; }
.replay-card p.saved .icon { width: 1.25rem; height: 1.25rem; stroke-width: 3; flex: none; }
.replay-card .lb-actions { justify-content: center; flex-wrap: wrap; }
/* Narrow phones: the bar must always leave ⋮ on screen, even with a 4-digit score. Sound moves into
   the ⋮ menu, and on the smallest phones "?" does too (the menu has How to play). The track's links
   give way before anything is pushed off the edge. */
.hud .track { flex: 0 1 auto; min-width: 0; }
.hud .track .link { flex: 0 1 auto; min-width: 2px; }
@media (max-width: 640px) { .hud [data-act=mute] { display: none; } }
@media (max-width: 360px) { .hud [data-act=help] { display: none; } }
/* Narrow screens: the card's two buttons stack at full width, Keep playing first. */
@media (max-width: 480px) {
  .replay-card .lb-actions { flex-direction: column; }
  .replay-card .lb-actions .gbtn { width: 100%; }
  .replay-card h2 { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .game-menu { animation: none; } }

/* ── Short landscape: phones on their side, 1024×600 kiosks ─────────────
   A short landscape screen has width to spare and little height, so the tall cards go side by
   side instead of scrolling. The wrappers still scroll if something grows (an error line, the
   on-screen keyboard). 640px tall also covers 1024×600 kiosks. */
@media (orientation: landscape) and (max-height: 640px) {
  /* Logbook: name, email and company in one row. The tab already names the card. */
  .logbook { width: min(54rem, 100%); padding-top: 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .875rem; }
  .logbook .lb-row { display: contents; }
  .logbook [data-f=role], .logbook .lb-consent, .logbook .lb-actions { grid-column: 1 / -1; }
  .logbook h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .logbook .intro { display: none; }
  .logbook .lb-input { height: 2.5rem; width: 100%; min-width: 0; } /* an input's default width would push it out of its column */
  .logbook .lb-field { margin-bottom: .375rem; min-width: 0; align-content: start; }
  .logbook .lb-consent { margin: .125rem 0 .5rem; font-size: .82rem; }
  .logbook .lb-actions .gbtn { min-height: 3rem; font-size: 1.1rem; }
  .logbook .stamps, .survey-card .stamps { gap: .375rem; }
  .logbook .stamp-chip, .survey-card .stamp-chip { min-height: 2.25rem; padding: .25rem .7rem; font-size: .85rem; }

  /* Before you go: the two questions side by side, the "not scored" line beside the title. */
  .survey-card { width: min(56rem, 100%); padding-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
  .survey-card h2 { font-size: 1.5rem; }
  .survey-card .intro { align-self: center; margin: 0; font-size: .85rem; }
  .survey-card h3 { font-size: .95rem; margin-bottom: .5rem; }
  .survey-card .survey-q { margin: .5rem 0 .75rem; }
  .survey-card .scale button { height: 2.75rem; }
  .survey-card .lb-actions { grid-column: 1 / -1; }

  /* Hunt complete: the badge on the left, the words, voucher and button on the right. */
  .finish-card { width: min(42rem, 100%); grid-template-columns: auto minmax(0, 1fr); column-gap: 1.75rem; justify-items: stretch; align-items: center; text-align: left; }
  .finish-card .done-badge { grid-column: 1; grid-row: 1 / span 4; }
  .finish-card h2, .finish-card .line, .finish-card .ticket, .finish-card .gbtn { grid-column: 2; }
  .finish-card .line { margin-bottom: .5rem; }
  .finish-card .ticket { margin-bottom: .75rem; }

  /* Level 3 notice board: the card on the left, the message or the two buttons on the right. */
  .noticeboard { width: min(54rem, 100%); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .noticeboard .nb-head { grid-column: 1 / -1; }
  .noticeboard .pin-area { grid-column: 1; grid-row: 2 / span 3; min-height: 0; }
  .noticeboard .nb-msg, .noticeboard .nb-tip, .noticeboard .nb-actions { grid-column: 2; }
  .noticeboard .nb-actions { grid-template-columns: 1fr; }
}
/* Phones on their side: a little less room above the cards (the tab and banners still fit). */
@media (orientation: landscape) and (max-height: 400px) {
  .overlay, .logbook-wrap, .finish-wrap { padding-top: 1.5rem; padding-bottom: .375rem; }
}