:root {
  --cream: #FFF6E9;
  --paper: #FFFDF8;
  --ink: #1D1A1F;
  --muted: #6B6470;
  --line: #E8DCC8;
  --red: #E0402F;
  --red-deep: #9E1426;
  --gold: #F2B33D;
  --sky: #5C9BD6;
  --green: #3E9B6A;
  --shadow: var(--ink);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
:root { color-scheme: light; }

[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--cream); color: var(--ink); font-family: var(--font); }
body { position: fixed; inset: 0; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; } /* pinch-zoom works (WCAG 1.4.4), a quick double tap on a button doesn't zoom */
input { font: inherit; -webkit-user-select: text; user-select: text; }

/* iPad and Mac: everything on the screens and the HUD is drawn at --ui (set in resize(), 1 on phones). */
.screen > *, .hud-top, .hud-fluffy, .hud-thought, .hud-abilities, .watch-bar, .time-banner, .ff-card { zoom: var(--ui, 1); }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- Screens ---------- */
.screen { position: fixed; inset: 0; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  background: var(--cream); z-index: 10; }
.screen-dim { background: rgba(29, 26, 31, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body[data-screen="title"] #s-title, body[data-screen="levels"] #s-levels, body[data-screen="intro"] #s-intro,
body[data-screen="pause"] #s-pause, body[data-screen="result"] #s-result, body[data-screen="how"] #s-how,
body[data-screen="scores"] #s-scores,
body[data-screen="opening"] #s-opening, body[data-screen="chill"] #s-chill, body[data-screen="guide"] #s-guide,
body[data-screen="settings"] #s-settings { display: flex; flex-direction: column; align-items: center; }
body[data-screen="pause"] #hud, body[data-screen="result"] #hud { opacity: .35; }
/* [anywhere] Free Roam Mode's 🧭 Go to… (#s-goto, game.js gotoOpen): the pause card's family, a list of every place by group */
body[data-screen="goto"] #s-goto { display: flex; flex-direction: column; align-items: center; }
body[data-screen="goto"] #hud { opacity: .35; }
.goto-panel { max-width: 460px; text-align: left; }
.goto-panel .panel-head { margin-bottom: 0; }
.goto-lede { margin: 0; font-size: 14px; font-weight: 700; color: var(--muted); }
.goto-list { display: flex; flex-direction: column; gap: 14px; }
.goto-group { display: flex; flex-direction: column; gap: 6px; }
.goto-group h3 { margin: 6px 0 0; font-size: 16px; font-weight: 900; }
.btn.goto-btn { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; font-size: 15px; padding: 10px 14px; }
.goto-how { flex: none; font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.btn.goto-here { border-style: dashed; }
/* [world] the city map (#s-city, game.js cityOpen): the neighbourhood drawn on a canvas, its places real buttons over it, the card beside */
body[data-screen="city"] #s-city { display: flex; flex-direction: column; align-items: stretch; padding: calc(10px + var(--safe-t)) calc(10px + var(--safe-r)) calc(10px + var(--safe-b)) calc(10px + var(--safe-l)); }
body[data-screen="city"] #hud { opacity: .35; }
.city-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; background: var(--paper); border: 3px solid var(--ink); border-radius: 22px; padding: 12px; box-shadow: 0 6px 0 var(--shadow); }
.city-head { margin-bottom: 0; } .city-head h2 { flex: 1; font-size: 22px; }
.city-clock { font-size: 14px; font-weight: 800; color: var(--muted); }
.btn.city-list { width: auto; padding: 8px 14px; }
.city-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.city-wrap { position: relative; flex: 1; min-height: 240px; border-radius: 14px; overflow: hidden; background: #EDE6DA; }
.city-wrap canvas { position: absolute; inset: 0; }
.city-pins { position: absolute; inset: 0; }
.city-pin { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--paper); }
.city-pin::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--green); }
.city-pin.pin-look::after { background: var(--sky); border-radius: 3px; }
.city-pin.pin-star { background: var(--gold); } .city-pin.pin-star::after { inset: 3px; background: var(--paper); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border-radius: 0; }
.city-pin.pin-mark::after { background: #2D7FC1; transform: rotate(45deg); border-radius: 2px; } .city-pin.pin-job::after { background: var(--gold); } .city-pin.pin-event::after { background: #C93A72; } .city-pin.pin-heat::after { background: var(--red); }
.city-pin.pin-wp { background: #2D7FC1; } .city-pin.pin-wp::after { background: var(--paper); inset: 6px; }
.city-pin .pin-n { position: absolute; top: -9px; right: -11px; z-index: 1; min-width: 16px; height: 16px; padding: 0 4px; border: 2px solid var(--paper); border-radius: 9px; background: var(--ink); color: var(--paper); font: 900 10px/12px ui-rounded, system-ui; text-align: center; box-sizing: border-box; } /* [citypolish] pins on one spot: how many */
.city-card-list { display: flex; flex-wrap: wrap; gap: 5px; } .city-card-list[hidden], .city-card-btns[hidden] { display: none; }
.city-pin:focus-visible, .city-pin:hover { transform: scale(1.35); outline: 3px solid var(--gold); outline-offset: 1px; z-index: 2; }
.city-side { display: flex; flex-direction: column; gap: 6px; max-height: 34%; overflow-y: auto; }
.city-card { border: 3px solid var(--ink); border-radius: 16px; padding: 10px 12px; background: var(--cream); display: flex; flex-direction: column; gap: 6px; }
.city-card-name { font-size: 17px; font-weight: 900; } .city-card-what { font-size: 13px; font-weight: 700; color: var(--muted); }
.city-card-btns { display: flex; gap: 8px; } .city-card-btns .btn { padding: 10px 12px; font-size: 15px; }
.city-lede { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.city-away { display: flex; flex-wrap: wrap; gap: 5px; } .btn.city-far { width: auto; padding: 5px 9px; font-size: 12px; border-width: 2px; box-shadow: 0 2px 0 var(--shadow); }
.city-away-h { flex-basis: 100%; margin-top: 4px; font-size: 13px; font-weight: 900; }
body.wide .city-body { flex-direction: row; } body.wide .city-side { width: 320px; max-height: none; }
.city-toast { zoom: var(--ui, 1); position: absolute; left: calc(12px + var(--safe-l)); top: calc(var(--safe-t) + 132px); max-width: min(300px, calc(100vw - 150px)); padding: 5px 12px; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper); font-size: 13px; font-weight: 900; line-height: 1.2; pointer-events: none; }
.city-toast.show { animation: cityIn 3.2s ease-out forwards; }
@keyframes cityIn { 0% { opacity: 0; transform: translateY(-6px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
body:not(.wide) #cabBtn { display: none; } /* (a phone's top bar has no room: there the map's Go is the cab, from any street) */
@media (prefers-reduced-motion: reduce) { .city-toast.show { animation-name: scrapFade; } }
body.ff .city-toast { display: none; }
/* [jobs] an odd job's card (#s-job) and the job log (#s-jobs, in Go to…'s family); the HUD's line (#hudJob) */
body[data-screen="job"] #s-job, body[data-screen="jobs"] #s-jobs { display: flex; flex-direction: column; align-items: center; }
body[data-screen="job"] #hud, body[data-screen="jobs"] #hud { opacity: .35; }
.job-panel { max-width: 440px; }
.job-ask { margin: 4px 0 0; font-size: 17px; font-weight: 800; font-style: italic; }
.job-brief { margin: 6px 0 0; font-size: 15px; }
.job-steps { margin: 8px 0 0; padding-left: 22px; text-align: left; font-size: 14px; font-weight: 700; }
.job-steps li { margin: 3px 0; }
.job-reward { margin: 8px 0 4px; font-size: 14px; font-weight: 800; color: #7A5200; }
.jobs-now { margin: 0; font-size: 14px; font-weight: 700; }
.jobs-done { margin: 0; font-size: 14px; color: var(--muted); }
.btn.jobs-again { border-color: #2BB3C0; }
.jobs-title { display: block; }
.jobs-where { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
#s-jobs .goto-name { min-width: 0; }
.hud-top { flex-wrap: wrap; }
.hud-job { order: 99; flex: 0 0 100%; pointer-events: auto; margin: 0 0 1px -4px; padding: 3px 10px; border: 0; border-radius: 10px; background: rgba(29, 26, 31, .78); color: #FFF5D6; font: inherit; font-size: 12.5px; font-weight: 800; line-height: 1.25; text-align: center; cursor: pointer; }
.hud-job[hidden] { display: none; }
body.has-job .hud-fluffy, body.has-job .hud-adapt { top: calc(92px + var(--safe-t)); } /* (below the bar and its job line) */
body.has-job .city-toast { top: calc(var(--safe-t) + 160px); } /* ([world] the block's name, below the job line too: HUDView's CityToast the same) */
@media (max-width: 520px) { #jobsBtn { display: none; } } /* (a phone: the job line and the pause card open the log; the bar keeps room for the title) */

.title-card { margin: auto; width: 100%; max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; }
body.wide .title-card { display: grid; grid-template-columns: 420px 380px; column-gap: 56px; align-items: center; max-width: none; width: auto; }
body.wide .title-card > * { grid-column: 1; }
body.wide .title-card > .menu { grid-column: 2; grid-row: 1 / 5; align-self: center; } /* (the logo, tagline, cast and its line on the left) */
.eyebrow { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-wrap: balance; }
.logo { margin: 0; font-size: clamp(64px, 20vw, 96px); line-height: .95; font-weight: 900; letter-spacing: -.03em;
  color: var(--ink); text-shadow: 4px 4px 0 var(--gold); }
.tagline { margin: 8px 0 0; font-size: 18px; font-weight: 700; }
.hero { width: 170px; height: auto; margin: 10px 0 6px; animation: bob 2.4s ease-in-out infinite; }
.hero-photo { width: 150px; margin: 6px 0 4px; }
@media (max-height: 700px) { .hero-photo { width: 110px; } }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-2deg); } }

/* [menutidy] Title-screen cast: the full cast gathered around the real Charlie, a group shot (the owner, October 25, 2026: "in that
   screen we want more people to be around the dog we want the full cast and when you click on a person they come to the front").
   title-cast.js places everyone (inline left/width/height/bottom/z-index, class .placed: rows, the back ones higher and smaller,
   Charlie in the middle front) and brings whoever is tapped to the front (.front: --fx/--fy/--fs, over everyone, their name up). */
.cast-stage { --ch: 293px; --cw: 150px; position: relative; width: 100%; max-width: 400px; height: calc(var(--ch) + 12px); margin: 8px 0 0; }
@media (max-height: 700px) { .cast-stage { --ch: 215px; --cw: 110px; } }
@media (min-height: 820px) { .cast-stage { --ch: 340px; } } /* [menutidy] a tall phone has the room: the crowd's three rows get it */
.cast-stage .hero-photo { position: absolute; z-index: 40; bottom: 6px; left: 50%; width: var(--cw); margin: 0 0 0 calc(var(--cw) / -2); }
.cs { position: absolute; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; bottom: 6px; height: 40%; width: 12%;
  transform-origin: 50% 100%; outline-offset: 4px; border-radius: 10px; cursor: pointer;
  opacity: 0; transform: translateY(36px) scale(.7); transition: opacity .35s ease-out, transform .5s cubic-bezier(.3, 1.7, .5, 1), translate .45s cubic-bezier(.3, 1.3, .5, 1), scale .45s cubic-bezier(.3, 1.3, .5, 1); }
.cs.in { opacity: 1; transform: none; }
.cast-stage .cs.front { translate: var(--fx, 0) var(--fy, 0); scale: var(--fs, 1); z-index: 60 !important; } /* (over everyone but the kids and pets at the very front: z 70) */
.cs.small::before { content: ""; position: absolute; left: 50%; bottom: 0; width: max(100%, 44px); height: max(100%, 44px); transform: translateX(-50%); } /* (someone small, a pet on a phone: 44 px to tap all the same) */
.cs img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; pointer-events: none; -webkit-user-drag: none; }
/* the rows behind stand on risers: their lower half fades into the crowd (no feet floating between the front row's), all of them
   once they step to the front */
.cs[data-row="1"]:not(.front) img, .cs[data-row="2"]:not(.front) img { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 42%); mask-image: linear-gradient(to top, transparent 0, #000 42%); }
.cs-parakeet:not(.front) img { -webkit-mask-image: none; mask-image: none; }
.cs .cs-cap, .cs-charlie-tag { position: absolute; left: 50%; bottom: -4px; z-index: 9; white-space: nowrap; pointer-events: none;
  padding: 3px 9px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--gold); color: #1D1A1F;
  font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25;
  opacity: 0; transform: translate(-50%, 6px) scale(.8); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.7, .5, 1); }
/* the name: the one at the front (its own tag, .cs-front-cap, over everyone), and whoever has the focus or the pointer (never everyone at once) */
.cs.front .cs-cap { display: none; }
.cs:not(.front):focus-visible .cs-cap, .cast-stage.tag-charlie .cs-charlie-tag { opacity: 1; transform: translate(-50%, 0) scale(1); }

.cs-front-cap { position: absolute; z-index: 90; left: 50%; bottom: 0; white-space: nowrap; pointer-events: none; padding: 3px 9px; border: 2.5px solid var(--ink); border-radius: 999px;
  background: var(--gold); color: #1D1A1F; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25;
  opacity: 0; transform: translate(-50%, 6px) scale(.8); transition: opacity .2s .25s, transform .25s .25s cubic-bezier(.3, 1.7, .5, 1); }
.cs-front-cap.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.cs-hover-cap { z-index: 91; background: var(--paper); color: var(--ink); transition: opacity .15s, transform .2s cubic-bezier(.3, 1.7, .5, 1); } /* (a mouse over someone: their name, by who's drawn under it, title-cast.js) */
.cs-charlie-tag { z-index: 45; bottom: -8px; background: var(--paper); color: var(--ink); }
.cast-stage .cs:focus-visible:not(.front) { z-index: 58 !important; } /* (the one the keyboard is on, over the crowd; the front one stays in front) */
/* Keep the edge names on screen: whoever stands at either end (title-cast.js sets .edge-l / .edge-r). */
.cs.edge-l:not(.front) .cs-cap { left: 0; transform: translate(0, 6px) scale(.8); }
.cs.edge-r:not(.front) .cs-cap { left: auto; right: 0; transform: translate(0, 6px) scale(.8); }
.cs.edge-l:not(.front):focus-visible .cs-cap, .cs.edge-r:not(.front):focus-visible .cs-cap { transform: none; }

/* [hook] Aunty's left hand, once the first encounter has played (game.js syncHookArt: <html class="aunty-hook">): a pirate hook,
   drawn over lf-aunty-tipsy.webp (126 × 436) at her left hand (CHARACTER_BIBLE.md: everywhere she appears). The app: AuntyHookArt. */
.aunty-hook .cs-aunty::after { content: ""; position: absolute; left: 73%; top: 39.45%; width: 41.27%; height: 13.3%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='92 172 52 58'%3E%3Crect x='96' y='176' width='28' height='18' rx='5' fill='%233A3F48' stroke='%231D1A1F' stroke-width='3.5'/%3E%3Cpath d='M110 192 L110 208 A12 12 0 1 0 132.7 202.6' fill='none' stroke='%231D1A1F' stroke-width='13' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M110 192 L110 208 A12 12 0 1 0 132.7 202.6' fill='none' stroke='%23D9DEE6' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='108.5' cy='197' r='2.4' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
/* (the hook sways with her: the same animation, turning about her feet, the box's bottom middle, from the hook's own box) */
.aunty-hook .cs-aunty.in::after { animation: cs-tipsy 2.6s ease-in-out infinite; animation-delay: var(--fd, 0s); transform-origin: -55.7% 455%; }
@media (prefers-reduced-motion: reduce) { .aunty-hook .cs-aunty.in::after { animation: none; } }
/* Everyone fidgets in their own way (each at their own pace: title-cast.js staggers the delays). */
.cs.in img { animation: cs-breathe 3.2s ease-in-out infinite; animation-delay: var(--fd, 0s); }
.cs-grandpa.in img { animation-name: cs-shuffle; animation-duration: 3.8s; }
.cs-maid.in img { animation-name: cs-sweep; animation-duration: 1.3s; }
.cs-aunty.in img { animation-name: cs-tipsy; animation-duration: 2.6s; }
.cs-nichole.in img, .cs-assistant.in img, .cs-receptionist.in img { animation-name: cs-sway; animation-duration: 3s; }
.cs-mija.in img, .cs-puppy.in img { animation-name: cs-bounce; animation-duration: 1.6s; }
.cs-parakeet.in img { animation-name: cs-bob; animation-duration: .9s; }
.cs-boss.in img, .cs-super.in img { animation-name: cs-shake; animation-duration: 2.4s; }
@keyframes cs-sway { 50% { transform: rotate(2deg) translateY(-2px); } }
@keyframes cs-breathe { 50% { transform: translateY(-3px) rotate(-1deg); } }
@keyframes cs-shuffle { 25% { transform: translateX(-3px) rotate(-1.5deg); } 75% { transform: translateX(3px) rotate(1.5deg); } }
@keyframes cs-sweep { 50% { transform: translateX(-6px) rotate(-2deg); } }
@keyframes cs-tipsy { 30% { transform: rotate(-5deg) translateX(-3px); } 70% { transform: rotate(4deg) translateX(2px); } }
@keyframes cs-bounce { 50% { transform: translateY(-4px); } }
@keyframes cs-bob { 50% { transform: translateY(-3px) rotate(-6deg); } }
/* Fluffy's moods (title-cast.js swaps the picture). */
.cs-fluffy.volcano img { filter: drop-shadow(0 0 10px rgba(255, 110, 20, .85)); animation: cs-shake .14s linear infinite; }
.cs-fluffy.devil img { filter: drop-shadow(0 0 12px rgba(200, 16, 46, .9)); animation: cs-menace 1.1s ease-in-out infinite; }
@keyframes cs-shake { 25% { transform: translateX(-2px) rotate(-1deg); } 75% { transform: translateX(2px) rotate(1deg); } }
@keyframes cs-menace { 50% { transform: scale(1.06); } }
.cast-hint { margin: 10px 0 12px; font-size: 13px; font-weight: 700; color: var(--muted); }
/* [holidays] every major holiday (title-cast.js, public/holidays.js; [halloween] was the first): the banner over the crowd (its words
   in the holiday's ink, as big as Halloween's or smaller for the long ones: --hd-fit, in hundredths of the banner's width), everyone's
   piece, moving as their picture moves, and the real Charlie's (.hd-hero, over his photo); the banner's lights twinkle, its flames flicker */
.hd-banner { position: relative; width: 100%; max-width: 400px; margin: 4px 0 -6px; container-type: inline-size; }
.hd-banner svg { display: block; width: 100%; height: auto; overflow: visible; }
.hd-words { position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); white-space: nowrap; font: 900 22px/1 ui-rounded, system-ui, sans-serif; font-size: min(22px, calc(var(--hd-fit, 5.5) * 1cqw)); letter-spacing: .06em; text-transform: uppercase; color: var(--hd-ink, #F07C1E); -webkit-text-stroke: 1.5px #2A2320; paint-order: stroke fill; text-shadow: 0 2px 0 #2A2320; }
.cast-stage .hd-hero { position: absolute; z-index: 41; overflow: visible; pointer-events: none; }
.hd-tw { animation: hd-tw 1.8s ease-in-out infinite; }
@keyframes hd-tw { 50% { opacity: .3; } }
.hd-fl { transform-box: fill-box; transform-origin: 50% 100%; animation: hd-fl .45s ease-in-out infinite alternate; }
@keyframes hd-fl { to { transform: scale(.9, .82); opacity: .82; } }
@media (prefers-reduced-motion: reduce) { .hd-tw, .hd-fl { animation: none; } }
.cs .cs-costume { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transform-origin: 50% 100%; z-index: 2; }
.cs.in .cs-costume { animation: cs-breathe 3.2s ease-in-out infinite; animation-delay: var(--fd, 0s); }
.cs-grandpa.in .cs-costume { animation-name: cs-shuffle; animation-duration: 3.8s; }
.cs-maid.in .cs-costume { animation-name: cs-sweep; animation-duration: 1.3s; }
.cs-aunty.in .cs-costume { animation-name: cs-tipsy; animation-duration: 2.6s; }
.cs-nichole.in .cs-costume, .cs-assistant.in .cs-costume, .cs-receptionist.in .cs-costume { animation-name: cs-sway; animation-duration: 3s; }
.cs-mija.in .cs-costume { animation-name: cs-bounce; animation-duration: 1.6s; }
.cs-boss.in .cs-costume, .cs-super.in .cs-costume { animation-name: cs-shake; animation-duration: 2.4s; }
.cs-fluffy.volcano .cs-costume { animation: cs-shake .14s linear infinite; }
.cs-fluffy.devil .cs-costume { animation: cs-menace 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cs.in .cs-costume, .cs-fluffy.volcano .cs-costume, .cs-fluffy.devil .cs-costume { animation: none; } }
/* [batwings] the real Charlie's bat wings, behind his photo (his shoulders about 40% down it: the photo is 600 × 1170) */
.cast-stage .hw-wings { position: absolute; z-index: 39; left: 0; width: 0; bottom: 0; pointer-events: none; } /* (title-cast.js puts them behind his photo, wherever it stands) */
.hw-wings svg { display: block; width: 100%; height: auto; overflow: visible; }
.hw-wing { transform-box: fill-box; transform-origin: 0 78%; animation: hw-flap 1.6s ease-in-out infinite; } /* (each from where it meets his back; the left one's mirror flaps it the other way) */
@keyframes hw-flap { 50% { transform: rotate(-9deg); } }
@media (prefers-reduced-motion: reduce) { .hw-wing { animation: none; } }
@media (prefers-reduced-motion: reduce) { /* (they appear and stand still; the one tapped is at the front at once, no glide) */
  .cs, .cs .cs-cap, .cs-front-cap { transition: none; }
  .cs.in img, .cs-fluffy.volcano img, .cs-fluffy.devil img { animation: none; }
}
.menu { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.menu-row { display: flex; gap: 8px; }
.surv-list { margin-top: 12px; }
.surv-list .surv-sub { display: block; margin: 2px 0 0; } /* [survival] the place's name and best, under it */
.menu-row .btn { flex: 1; }
.btn-settings { position: relative; }
/* [menutidy] the What's new badge on ⚙️ Game Settings (and "New" on its What's new row) until /whats-new is opened for the newest
   release: <html class="wn-new">, set by the whatsnew:line block (scripts/content.ts). It replaced the title's "✨ New: …" line. */
.wn-badge { display: none; }
.wn-new .btn-settings .wn-badge { display: block; position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--red); border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--shadow); }
.wn-new .set-row .wn-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--red); color: #fff;
  border: 2px solid var(--ink); font-size: 12px; font-weight: 900; letter-spacing: .04em; vertical-align: 1px; }
/* [menutidy] Player Guides: Learn (the big buttons), then More ways to play and Bonus extras (small ones, two or three to a row) */
.pg-h { width: 100%; margin: 20px 0 8px 4px; font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: left; }
.panel > .pg-h:first-of-type { margin-top: 4px; }
.guide-menu { margin-top: 0; }
.guide-menu a.btn { text-align: center; text-decoration: none; color: #1D1A1F; } /* (Charlie’s Guide is a link to /guide, dressed as a button; dark words on its pastel blue in both themes, like the dark theme’s .btn-day) */
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pg-grid .btn { display: flex; align-items: center; justify-content: center; min-height: 48px; text-align: center; text-decoration: none; color: var(--ink); }
.pg-grid .btn-dawn, .pg-grid .btn-extras { color: #1D1A1F; }
/* [menutidy] Game Settings: the old footer's buttons and links as rows on paper cards */
.set-group { width: 100%; display: flex; flex-direction: column; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 0 4px 0 var(--shadow); overflow: hidden; }
.set-row { display: flex; align-items: center; width: 100%; min-height: 50px; padding: 12px 16px; border: 0; background: none;
  color: var(--ink); font-size: 17px; font-weight: 800; text-align: left; text-decoration: none; cursor: pointer; }
.set-row ~ .set-row { border-top: 2px solid var(--line); } /* (a line between rows: not over the first, whatever sits between them) */
.set-row:hover { background: var(--cream); }
.set-row:disabled { opacity: .5; cursor: default; }
.set-go::after { content: "›"; margin-left: auto; padding-left: 12px; font-size: 22px; line-height: 1; color: var(--muted); }
#s-settings .get-app { margin-top: 18px; }
.link:disabled { opacity: .5; cursor: default; }

.btn { display: block; width: 100%; padding: 15px 18px; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper);
  font-size: 18px; font-weight: 800; box-shadow: 0 4px 0 var(--shadow); transition: transform .06s, box-shadow .06s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow); }
/* [polish2] disabled (e.g. Submit after sending): no fill colour and no drop shadow, muted words and border (still 5:1+ on the
   cream, both themes), sitting where a pressed button sits (ChunkyButton in the apps) */
.btn:disabled, .btn:disabled:active { background: var(--cream); color: var(--muted); border-color: var(--muted); box-shadow: none; transform: translateY(3px); cursor: default; }
.btn-primary { background: var(--gold); }
.btn-small { padding: 10px 8px; font-size: 15px; border-radius: 12px; }
.link { background: none; border: 0; padding: 8px; color: var(--muted); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.muted { color: var(--muted); }

.panel { width: 100%; max-width: 480px; margin: 0 auto; }
.pause-daily { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted, #6B6470); } /* [qa4fix] (the apps' DailyPauseNote) */
#pauseAskP { margin: 0; font-size: 16px; line-height: 1.4; }
.panel-center { margin: auto; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 22px; padding: 22px 18px; box-shadow: 0 6px 0 var(--shadow); max-width: 400px; }
.panel-center h2 { margin: 0; font-size: 30px; line-height: 1.1; }
.panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.panel-head h2 { margin: 0; font-size: 26px; }
.back { width: 44px; height: 44px; flex: none; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper); font-size: 26px; line-height: 1; font-weight: 900; padding: 0 0 4px; }

/* ---------- Levels ---------- */
.levels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
body.tablet #s-levels .panel { max-width: 860px; }
body.tablet .levels { display: grid; grid-template-columns: 1fr 1fr; } /* iPad and Mac: missions in two columns */
.lvl { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; border: 3px solid var(--ink);
  border-radius: 16px; background: var(--paper); box-shadow: 0 4px 0 var(--shadow); }
.lvl:disabled { opacity: .5; box-shadow: none; cursor: default; }
.lvl-num { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--gold); border: 3px solid var(--ink);
  display: grid; place-items: center; font-weight: 900; font-size: 20px; }
.lvl-body { flex: 1; min-width: 0; }
.lvl-name { display: block; font-weight: 800; font-size: 17px; }
.lvl-who { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.lvl-stars { flex: none; font-size: 15px; letter-spacing: 1px; }
.lvl-endless .lvl-num { background: var(--red); color: #fff; }
.lvl:disabled .lvl-num { background: var(--line); } /* locked: no gold, so the one mission you can play is the only gold on the list (faded gold read as dirty) */
/* [holidaylevels] Mission Mode's Holiday row: the limited-time levels, above the numbered missions (game.js renderHolRow) */
.hol-row { margin: 0 0 16px; }
.hol-head { margin: 0 0 8px; font-size: 15px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.lvl-hol { background: #FFF4E2; }
[data-theme="dark"] .lvl-hol { background: #3A2A1E; }
.hol-tile { background: #2A2233; }
.hol-tile svg { display: block; }
.hol-badge { display: inline-block; margin-top: 4px; padding: 1px 9px; border: 2px solid var(--ink); border-radius: 999px; background: #F2B33D; color: #1D1A1F; font-size: 12px; font-weight: 900; }
.hol-chip { display: inline-block; align-self: center; margin: 4px auto 2px; padding: 3px 12px; border: 2.5px solid var(--ink); border-radius: 999px; background: #F2B33D; color: #1D1A1F; font-size: 14px; font-weight: 900; }

/* ---------- Intro ---------- */
.intro-cast { display: flex; justify-content: center; gap: 4px; min-height: 84px; }
.intro-cast img { height: 84px; width: auto; }
.intro-cast { align-items: flex-end; }
.intro-cast img.pet { height: 46px; }
.intro-cast img.ghost { opacity: .6; filter: grayscale(1) brightness(1.35) drop-shadow(0 0 6px rgba(160, 210, 255, .9)); } /* [pepe] Mission 16: Pepe's ghost (game.js castImg) */
.intro-text { margin: 0; font-size: 16px; line-height: 1.45; }
.intro-tip { margin: 0; font-size: 14px; font-weight: 700; color: var(--red-deep); background: #FFE9E3; border-radius: 12px; padding: 8px 10px; }

/* ---------- Result ---------- */
.stars { font-size: 40px; letter-spacing: 4px; min-height: 48px; }
.stars .off { filter: grayscale(1); opacity: .3; }
.res-line { margin: 0; font-size: 16px; }
#resNext[hidden] + #resRetry { background: var(--gold); color: #1D1A1F; } /* no Next mission: Try again is the card's main button (every card has one gold button) */
.res-score { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; text-align: left; font-size: 15px;
  background: var(--cream); border-radius: 12px; padding: 10px 12px; }
.res-score dt { color: var(--muted); }
.res-score dd { margin: 0; font-weight: 800; text-align: right; }
.res-score .total { font-size: 18px; color: var(--ink); border-top: 2px dashed var(--line); padding-top: 6px; }
.submit { text-align: left; display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.submit-row { display: flex; gap: 8px; }
.submit-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 12px; font-size: 16px; background: #fff; }
.submit-row .btn { width: auto; }
.submit-msg { margin: 0; font-size: 13px; color: var(--muted); min-height: 1em; }

/* ---------- How / cast / board ---------- */
.how { background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; padding: 4px 16px 12px; line-height: 1.5; font-size: 16px; }
.how h3 { margin: 16px 0 4px; font-size: 18px; }
.how p { margin: 6px 0; }
.how-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.how-list li { display: flex; gap: 10px; }
.how-list span { font-size: 24px; line-height: 1.2; }
.board { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 0 var(--shadow); }
.board li { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 2px solid var(--line); font-size: 16px; }
.board li:last-child { border-bottom: 0; }
.board .rank { width: 28px; font-weight: 900; color: var(--muted); }
.board .who { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .pts { font-weight: 900; }
/* [states] the board's loading and failure rows: a gentle pulse while it fetches (none with Reduce Motion), why it failed and Try again */
@media (prefers-reduced-motion: no-preference) { .board .board-wait { animation: boardWait 1.2s ease-in-out infinite alternate; } @keyframes boardWait { to { opacity: .45; } } }
.board li.board-fail { flex-direction: column; align-items: flex-start; gap: 10px; }
.board li.board-fail .btn { width: auto; color: var(--ink); }
.board .me { background: #FFF0C7; }
.board .flag { flex: none; border: 0; background: none; font: inherit; font-size: 17px; line-height: 1; padding: 0 2px; margin: -4px -4px -4px 0; color: var(--muted); cursor: pointer; min-width: 32px; min-height: 28px; }
.board-note { font-size: 14px; margin: 10px 2px 4px; }
.board-play { margin-top: 14px; } /* the way onto the board from here (#s-scores was a dead end) */
/* [daily] Daily Walk: the dawn button, Top Dogs' two boards, the screen's card, the result card's note */
body[data-screen="daily"] #s-daily { display: flex; flex-direction: column; align-items: center; }
body[data-screen="survival"] #s-survival { display: flex; flex-direction: column; align-items: center; } /* [survival] the chooser */
.btn-dawn { background: #FFC9A3; color: #1D1A1F; }
[data-theme="dark"] .btn-dawn { color: #1D1A1F; }
.board-tabs { display: flex; gap: 8px; margin: 0 0 10px; }
.board-tabs .btn { flex: 1; }
.board-tabs .btn[aria-pressed="true"] { background: var(--gold); color: #1D1A1F; transform: translateY(2px); box-shadow: 0 2px 0 var(--shadow); }
.board-tabs .btn[data-board-tab="today"][aria-pressed="true"] { background: #FFC9A3; }
.daily-card { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 8px; padding: 14px; background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--shadow); }
.daily-card h3 { margin: 0; font-size: 20px; font-weight: 900; }
.daily-card p { margin: 0; font-size: 15px; line-height: 1.45; }
.daily-card .daily-date { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.daily-card .daily-small { font-size: 13px; }
.daily-next { font-size: 14px; font-weight: 700; margin: 6px 2px 10px; }
.daily-res p { margin: 2px 0; font-size: 13px; font-weight: 700; }
/* [streak] the Daily Walk's streak, five-week calendar and chosen day (game.js renderDailyHistory; apple/App/DailyCalendar.swift) */
.daily-history { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.daily-streak, .daily-cal { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--shadow); }
.daily-streak-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.daily-streak h3, .daily-cal h3 { margin: 0; font-size: 20px; font-weight: 900; }
.daily-streak p, .daily-pick p { margin: 0; font-size: 14px; line-height: 1.45; }
.daily-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.daily-wd { text-align: center; font-size: 12px; font-weight: 900; color: var(--muted); }
.daily-day { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50px; padding: 2px; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line, #E8DCC8); border-radius: 9px; cursor: pointer; }
.daily-day .dn { font-size: 11px; font-weight: 800; color: var(--muted); }
.daily-day .ds { font-size: 12px; font-weight: 900; min-height: 1.1em; }
.daily-day .dr { font-size: 10px; font-weight: 900; min-height: 1.1em; }
.daily-day.walked { background: #FFC9A3; color: #1D1A1F; }
.daily-day.walked .dn { color: rgba(29, 26, 31, .7); }
.daily-day.practice { border: 2px dashed var(--muted); }
.daily-day.today { border: 3px solid var(--ink); }
.daily-cal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } /* [qa7fix] the grid's dates */
.daily-cal-head .muted { font-size: 13px; font-weight: 800; white-space: nowrap; }
.daily-day .dn.dm { color: var(--ink); font-weight: 900; white-space: nowrap; }
.daily-day.walked .dn.dm { color: rgba(29, 26, 31, .7); }
.daily-day .dn.dt { padding: 0 4px; font-size: 10px; font-weight: 900; color: var(--paper); background: var(--ink); border-radius: 99px; }
.daily-day.picked { outline: 3px solid #F2B33D; outline-offset: 1px; }
.daily-day:disabled { opacity: .35; cursor: default; }
.daily-day:focus-visible { outline: 3px solid #F2B33D; outline-offset: 2px; }
.daily-legend { margin: 0; font-size: 12px; }
.daily-pick { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--cream, #FFF6E9); }
.daily-pick h4 { margin: 0; font-size: 17px; font-weight: 900; }
.daily-pick .daily-date { margin: 0; font-size: 13px; font-weight: 800; color: var(--muted); }
.daily-doodle { font-size: 16px; font-weight: 800; }
.linkish { border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: underline; cursor: pointer; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; display: none; z-index: 5; }
body[data-screen="game"] #hud, body[data-screen="pause"] #hud, body[data-screen="result"] #hud { display: block; }
.hud-top { position: absolute; top: calc(6px + var(--safe-t)); left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r));
  display: flex; align-items: center; gap: 8px; background: var(--paper); border: 3px solid var(--ink); border-radius: 16px;
  padding: 3px 4px 3px 8px; box-shadow: 0 3px 0 var(--shadow); }
.hud-hearts { font-size: 22px; letter-spacing: 1px; white-space: nowrap; min-width: 90px; }
.hud-hearts .lost { filter: grayscale(1); opacity: .35; }
.hud-hearts { display: flex; align-items: center; gap: 5px; }
.hp-icon { font-size: 18px; }
.hud-left { display: flex; flex-direction: column; gap: 3px; }
.hud-clock { font-size: 12px; font-weight: 900; color: var(--ink); background: #FFFDF8; border: 2px solid var(--ink); border-radius: 8px; padding: 1px 6px; align-self: flex-start; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hud-clock:empty { display: none; }
/* [bonewallet] Free Roam: the Dog Bones in Charlie's wallet, the bone drawn and the count, under the clock (game.js hudWallet) */
.hud-wallet { font-size: 12px; font-weight: 900; color: var(--ink); background: #FFFDF8; border: 2px solid var(--ink); border-radius: 8px; padding: 1px 6px; align-self: flex-start; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hud-wallet[hidden] { display: none; }
/* [bonewallet] the title: the wallet's count, and the way to the Bone Shop (the Wardrobe) */
.title-wallet { display: inline-flex; align-items: center; gap: 6px; align-self: center; margin-top: 4px; padding: 6px 14px; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--paper); color: var(--ink); font-weight: 900; font-size: 15px; text-decoration: none; box-shadow: 0 3px 0 var(--shadow); }
.title-wallet .ui-i { width: 1.4em; height: 1.4em; }
.title-wallet .tw-shop { color: var(--muted); font-weight: 800; }
.title-wallet:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
.hp-bar { width: 70px; height: 12px; border: 2.5px solid var(--ink); border-radius: 8px; background: #FFFDF8; overflow: hidden; }
.hp-bar i { display: block; height: 100%; transition: width .25s, background .25s; }
.hp-num { font-size: 13px; font-weight: 900; min-width: 24px; }
.hud-hearts.ouch { animation: ouch .4s; }
@keyframes ouch { 30% { transform: scale(1.25) rotate(-6deg); } }
.hud-mid { flex: 1; text-align: center; min-width: 0; }
.hud-level { font-size: 13px; font-weight: 800; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* [qafix] (QA #9) a long title on a phone: smaller, then two lines (game.js fitHudLevel; HUDView.swift the same) */
.hud-level.fit-s { font-size: 11px; }
.hud-level.fit-2, .hud-level.fit-3 { font-size: 11px; line-height: 1.15; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.hud-level.fit-3 { font-size: 10px; }
.hud-goal { font-size: 20px; font-weight: 900; }
.icon-btn { pointer-events: auto; width: 40px; height: 40px; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper); font-size: 14px; font-weight: 900; }
.zoom-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; line-height: 1; flex: none; }
.zoom-btn[hidden] { display: none; }
.zoom-name { font-size: 8px; font-weight: 900; margin-top: 2px; }
.hud-fluffy { position: absolute; top: calc(64px + var(--safe-t)); left: calc(8px + var(--safe-l)); width: min(250px, 62vw);
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; background: var(--paper); border: 2.5px solid var(--ink);
  border-radius: 99px; padding: 4px 8px; }
.hud-fluffy[hidden] { display: none; }
.hud-adapt { position: absolute; top: calc(64px + var(--safe-t)); left: calc(8px + var(--safe-l)); zoom: var(--ui, 1); font-size: 12px; font-weight: 900; color: #1D1A1F; background: #CFEAD6; border: 2.5px solid var(--ink); border-radius: 99px; padding: 4px 8px; white-space: nowrap; } /* [adaptive] a tier run's pill: Easier / Can't lose (HUDView's: the meter's row) */
.hud-fluffy:not([hidden]) + .hud-adapt { left: calc(8px + var(--safe-l) + min(250px, 62vw) + 6px); }
body.watching .hud-adapt { display: none; }
.fm-label { white-space: nowrap; min-width: 112px; }
.fm-bar { position: relative; flex: 1; height: 12px; border: 2.5px solid var(--ink); border-radius: 99px; background: #fff; overflow: hidden; }
.fm-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #F5C04A, #F07A3A 50%, #C8102E); transition: width .2s; }
.fm-tick { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: .5; }
.hud-fluffy.volcano .fm-label { color: #D2401F; }
.hud-fluffy.devil .fm-label { color: var(--red-deep); animation: shake .25s infinite; }
@keyframes shake { 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } }
.hud-thought { position: absolute; left: calc(10px + var(--safe-l)); bottom: calc(108px + var(--safe-b)); width: min(340px, calc(100vw - 20px));
  background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; padding: 8px 12px; font-size: 14px; font-weight: 700;
  text-align: center; box-shadow: 0 3px 0 var(--shadow); animation: pop .25s; }
.hud-thought[hidden] { display: none; }
@keyframes pop { from { transform: scale(.8); opacity: 0; } }
.hud-abilities { position: absolute; right: calc(12px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); display: flex; align-items: flex-end; gap: 10px; }
.ab { pointer-events: auto; position: relative; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; box-shadow: 0 3px 0 var(--shadow); touch-action: none; }
.ab-big { width: 82px; height: 82px; background: var(--gold); }
.ab-ico { font-size: 26px; line-height: 1; }
.ab-big .ab-ico { font-size: 32px; }
.ab-name { font-size: 11px; font-weight: 900; margin-top: 2px; white-space: nowrap; }
.ab-key::after, .key-hint::after { content: attr(data-k); } /* [a11y3] the key hint as drawing, not words in the button's name */
.ab-key { display: none; position: absolute; top: -8px; right: -6px; font-size: 10px; font-weight: 900; background: var(--ink); color: #fff; border-radius: 6px; padding: 1px 5px; }
@media (hover: hover) and (pointer: fine) { .ab-key { display: block; } }
body.pad .ab-key { display: block; } /* a game controller is connected: its button on each ability */
body.pad :focus-visible, body.pad .btn:focus, body.pad .lvl:focus { outline: 4px solid var(--gold); outline-offset: 3px; }
.ab::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(rgba(29,26,31,.55) calc(var(--cd, 0) * 1turn), transparent 0); pointer-events: none; }
.ab.ready { animation: ready .3s; }
@keyframes ready { 50% { transform: scale(1.12); } }
.ab:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }

body.night { background: #1A1620; }
.intro-emoji { font-size: 64px; line-height: 84px; }

.btn-day { background: #9FD0F0; }
.btn-sub { font-size: 13px; font-weight: 700; opacity: .75; margin-left: 4px; }
.btn-extras { text-align: center; text-decoration: none; color: var(--ink); background: #FFE7A8; }

/* Watch Mode: the speed/excitement bar in place of the ability buttons, and the hour banner ([autoplay] no setup screen: the title's
   📺 Auto Play Mode starts the week, and this bar is where Speed and Excitement change) */
.btn-watch { background: #F7C6DF; }
.ws-note { margin: 8px 0 12px; font-size: 14px; }
body.watching .hud-abilities { display: none; }
body.watching .hud-hearts { display: none; } /* nothing can hurt Charlie on autopilot */
body.watching .hud-goal { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.watching .hud-thought { bottom: calc(122px + var(--safe-b)); } /* [followcam] (+ the Follow chips' row) */
body.watching.ft-on .hud-thought { bottom: calc(240px + var(--safe-b)); } /* [polish4] above the "left" toast while it shows (it sat in the same spot) */
/* [followcam] Watch Mode as a TV broadcast: the Follow chips over the Watch bar, the picture-in-picture's frame, the "left" toast */
.wb-follow { display: none; position: absolute; left: 0; right: 0; bottom: calc(55px + var(--safe-b)); zoom: var(--ui, 1); gap: 4px; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 0 calc(8px + var(--safe-l)); justify-content: safe center; }
.wb-follow::-webkit-scrollbar { display: none; }
.wb-follow { pointer-events: auto; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 32px; } /* (padding-right after the shorthand above) it scrolls sideways (touch, trackpad, Tab); the fade says there's more */
body.watching .wb-follow { display: flex; }
.wf-label { font-size: 12px; font-weight: 900; white-space: nowrap; color: var(--ink); background: color-mix(in srgb, var(--paper) 85%, transparent); border-radius: 99px; padding: 4px 8px; }
.wf-chip { pointer-events: auto; flex: none; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; display: flex; align-items: center; } /* a 44 px target around the compact pill */
.wf-pill { display: flex; align-items: center; min-height: 30px; box-sizing: border-box; padding: 0 10px; border: 2px solid var(--ink); border-radius: 99px; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 900; white-space: nowrap; }
.wf-chip.on .wf-pill { background: var(--gold); color: #1D1A1F; border-width: 3px; }
.wf-chip:disabled:not(.on) .wf-pill { opacity: .4; }
.wf-chip:focus-visible { outline: none; } .wf-chip:focus-visible .wf-pill { outline: 3px solid var(--gold); outline-offset: 2px; }
.wf-chip.wait .wf-pill span::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .35em; vertical-align: -.05em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; } /* [hud] waiting: a little ring (it was ⏳) */
.pip { position: absolute; pointer-events: auto; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--shadow); touch-action: none; cursor: pointer; box-sizing: border-box; }
.pip:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pip-label { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 900; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 99px; padding: 1px 7px; }
.follow-toast { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(110px + var(--safe-b)); zoom: var(--ui, 1); pointer-events: auto; width: min(360px, calc(100vw - 32px)); box-sizing: border-box; background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--shadow); padding: 12px; text-align: center; }
.follow-toast p { margin: 0 0 8px; font-size: 14px; font-weight: 900; color: var(--ink); }
.ft-btns { display: flex; gap: 8px; justify-content: center; }
.ft-btn { min-height: 34px; padding: 0 12px; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; font-weight: 900; }
.ft-btn.ft-go { background: var(--gold); color: #1D1A1F; }
@media (prefers-reduced-motion: no-preference) { .follow-toast:not([hidden]) { animation: ftIn .2s ease-out; } @keyframes ftIn { from { opacity: 0; translate: 0 12px; } } }
.watch-bar { position: absolute; left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); display: flex; gap: 8px; justify-content: center; }
.wb-group { pointer-events: auto; display: flex; align-items: center; gap: 6px; background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; padding: 4px 6px 4px 10px; box-shadow: 0 3px 0 var(--shadow); }
.wb-label { font-size: 12px; font-weight: 900; white-space: nowrap; min-width: 0; }
.wb-btn { width: 34px; height: 34px; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--gold); color: #1D1A1F; font-size: 18px; font-weight: 900; line-height: 1; padding: 0; }
.wb-val { font-size: 16px; font-weight: 900; min-width: 14px; text-align: center; }
@media (max-width: 460px) { .wb-label span { display: none; } .wb-label::after { content: attr(data-short); } }
/* [qafix] the Excitement stepper's word (the setup's and the Guide's, not "Chaos") doesn't fit beside Speed under 400px (an iPhone 16e): just 🎢, still named Excitement for screen readers */
@media (max-width: 399px) { .wb-label[data-short="Excitement"]::after { content: "Thrills" / "Excitement"; } } /* [hud] (it was the 🎢 alone: a word) */
.time-banner { position: absolute; left: 50%; top: calc(var(--safe-t) + 116px); transform: translate(-50%, 0); /* just under the HUD, off Charlie and Fluffy */ white-space: nowrap; font-size: 17px; font-weight: 900;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; padding: 6px 12px; box-shadow: 0 3px 0 var(--shadow); opacity: 0; }
.time-banner.show { animation: banner 2.5s ease-out forwards; }
/* Highlights (Watch Mode's top speed): the fast-forward card over the dimmed scene, and the tag while a highlight plays */
body.ff #hud::before { content: ""; position: absolute; inset: 0; background: rgba(29, 26, 31, .42); pointer-events: none; } /* the scene, dimmed */
body.hl .hud-level { display: none; } /* the tag takes its line in the top bar */
body.ff .hud-thought, body.ff .time-banner { display: none; } /* the card has the line and the clock */
.ff-card { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: min(340px, calc(100vw - 40px)); text-align: center;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; padding: 10px 14px 12px; box-shadow: 0 4px 0 var(--shadow); }
.ff-card[hidden], .hl-tag[hidden] { display: none; }
@media (max-width: 460px) { .hl-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* phones: the label alone fits the bar (still read out) */
.ff-clock { margin: 0; font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ff-gist { margin: 6px 0 0; font-size: 14px; font-weight: 700; min-height: 2.6em; }
.hl-tag { display: inline-block; vertical-align: top; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* in the top bar, in the level line's place (a compact pill: the bar barely grows); apple/App/WatchHUD.swift HighlightTag */
  font-size: 12px; line-height: 15px; font-weight: 900; color: #1D1A1F; background: var(--gold); border: 2px solid var(--ink); border-radius: 99px; padding: 0 8px; animation: pop .25s; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.9); } 12%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%); } }
/* [nonstop] Auto Play Mode's next week (game.js weekCard): "Week 2" and the week just watched, where the hour's banner goes, for a few
   seconds (WEEK_CARD_MS), then gone by itself. No button, never in the way of a tap; the hour's banner and the fast-forward card step
   aside while it's up. Only over the game (the pause screen and the menus never show it). */
.week-card { zoom: var(--ui, 1); position: absolute; left: 50%; top: calc(var(--safe-t) + 116px); transform: translate(-50%, 0); width: min(340px, calc(100vw - 40px)); text-align: center; pointer-events: none;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; padding: 8px 14px 10px; box-shadow: 0 4px 0 var(--shadow); opacity: 0; }
.week-card[hidden] { display: none; }
.week-card.show { animation: weekCard 6.5s ease-out forwards; }
.wk-eyebrow { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wk-title { margin: 2px 0 0; font-size: 30px; font-weight: 900; line-height: 1.1; }
.wk-sum { margin: 4px 0 0; font-size: 13px; font-weight: 700; }
.wk-sum[hidden] { display: none; }
body:not([data-screen="game"]) .week-card { display: none; }
body.wk-on .time-banner, body.wk-on .ff-card { visibility: hidden; }
body.wk-on .scrap-toast { top: calc(var(--safe-t) + 252px); } /* (the Scrapbook's toast, under the card rather than over its numbers) */
@keyframes weekCard { 0% { opacity: 0; transform: translate(-50%, -10%) scale(.94); } 6%, 85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -6%); } }
@keyframes weekCardFade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
/* [nonstop] the cookie banner (src/lib/ga.ts, where the law asks for one) waits while Auto Play plays: it's back on the pause screen, the
   title or any other mode (nothing is collected till it's answered: consent starts denied) */
body.watching[data-screen="game"] [role="dialog"][aria-label="Cookie consent"] { display: none !important; }
body.watching[data-screen="game"] .move-toast { display: none !important; } /* [nonstop] and gdaycharlie.com's progress-move offer or note (public/move.js), left up on the title: back on any other screen */
@media (prefers-reduced-motion: reduce) { .time-banner.show { animation: none; opacity: 1; } .week-card.show { animation: weekCardFade 6.5s linear forwards; } .hud-hearts.ouch, .ab.ready, .fm-label, .hl-tag { animation: none !important; } }
/* The opening scene: the game world shows through; a caption card over it */
/* The page starts on the opening (index.html), so the first paint is the scene's dark, not a cream flash before it. */
html:has(body[data-screen="opening"]), body[data-screen="opening"] { background: #2B2530; }
.screen-opening { background: transparent; justify-content: flex-end; cursor: pointer; padding-bottom: calc(28px + var(--safe-b)); }
.op-card { background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; padding: 12px 18px; text-align: center; box-shadow: 0 4px 0 var(--shadow); max-width: 360px; width: 100%; }
.op-time { margin: 0; font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.op-line { margin: 4px 0 0; font-size: 19px; font-weight: 900; animation: pop .35s; }
/* [lcp] [lcp2] The first line is in index.html and is the page's first frame: no pop, so it's there at full size in the very first
   paint (the page's largest contentful paint, before any script runs; a pop would make the opening's re-show a bigger, later one).
   The later lines (game.js updateOpening) pop as before. */
.op-line.op-first { animation: none; }
@media (prefers-reduced-motion: reduce) { .op-line { animation: none; } }
.op-line { min-height: 2.4em; display: flex; align-items: center; justify-content: center; } /* [lcp2] room for the two-line line 2, so the card doesn't jump when it wraps */
.op-skip { margin: 10px 0 0; font-size: 14px; font-weight: 900; color: #FFFDF8; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* ---------- [meet] Meet the Cast (public/meet.js, content/intro.json): a dark stage, a spotlight, one hooman at a time ----------
   The stage is the opening's dark in both themes; the narrator's card follows the theme. Heights inside the zoomed children
   are divided by --ui (zoom scales them again). Reduce Motion: no bounce, no idle moves, just fades. */
html:has(body[data-screen="meet"]), body[data-screen="meet"] { background: #2B2530; }
body[data-screen="meet"] #s-meet { display: flex; flex-direction: column; align-items: center; }
.screen-meet { background: radial-gradient(120% 75% at 50% 32%, #4A3F55 0%, #2B2530 58%, #1D1A1F 100%); color: #FFFDF8; overflow: hidden; cursor: pointer; gap: 8px; }
.meet-top { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; }
.meet-kicker { margin: 0; font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #F2B33D; }
.meet-count { margin: 0 0 0 auto; font-size: 13px; font-weight: 800; color: #D9D0DF; font-variant-numeric: tabular-nums; }
.meet-skip { min-height: 44px; min-width: 44px; padding: 6px 14px; border: 2px solid #D9D0DF; border-radius: 999px; background: rgba(0, 0, 0, .25); color: #FFFDF8; font-size: 14px; font-weight: 900; }
.meet-count:empty + .meet-skip { margin-left: auto; }
.meet-stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.meet-star { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.meet-star::before { content: ''; position: absolute; left: 50%; bottom: 10px; width: 300px; height: 135%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 55% at 50% 72%, rgba(255, 226, 150, .34), rgba(255, 226, 150, 0) 72%); } /* the spotlight */
.meet-star::after { content: ''; position: absolute; left: 50%; bottom: 34px; width: 200px; height: 26px; transform: translateX(-50%); border-radius: 50%; background: rgba(0, 0, 0, .35); filter: blur(4px); z-index: 0; } /* the floor under them */
.meet-pic { position: relative; z-index: 1; display: block; flex: 1 1 0; min-height: 90px; height: 0; width: 100%; max-height: 340px; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); } /* (takes whatever height the stage has left) */
.meet-emoji { display: none; position: relative; z-index: 1; font-size: 96px; line-height: 1; margin-bottom: 14px; }
.screen-meet.welcome .meet-pic { display: none; }
.screen-meet.welcome .meet-emoji { display: block; }
.meet-plate { flex: none; position: relative; z-index: 2; margin-top: -8px; padding: 4px 16px 6px; background: #F2B33D; color: #1D1A1F; border: 3px solid #1D1A1F; border-radius: 14px; text-align: center; box-shadow: 0 4px 0 #1D1A1F; }
.meet-name { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.15; }
.meet-tag { margin: 0; font-size: 13px; font-weight: 800; }
.meet-tag:empty { display: none; }
.meet-star.in { animation: meetIn .55s cubic-bezier(.2, 1.35, .4, 1) both; }
@keyframes meetIn { from { transform: translateY(46px) scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }
/* each character's own way of standing about (content/intro.json "move"; play.json's moves) */
.meet-pic.mv-hop { animation: meetHop 1.6s ease-in-out .6s infinite; }
.meet-pic.mv-stomp { animation: meetStomp 2.2s ease-in-out .6s infinite; }
.meet-pic.mv-wobble { animation: meetWobble 2.8s ease-in-out .6s infinite; }
.meet-pic.mv-sweep { animation: meetSweep 1.8s ease-in-out .6s infinite; }
.meet-pic.mv-sway { animation: meetSway 2.6s ease-in-out .6s infinite; }
.meet-pic.mv-wave { animation: meetWave 2s ease-in-out .6s infinite; }
@keyframes meetHop { 0%, 40%, 100% { transform: none; } 20% { transform: translateY(-14px) scale(1.02, .98); } }
@keyframes meetStomp { 0%, 100% { transform: none; } 25% { transform: rotate(-1.5deg) translateY(-3px); } 50% { transform: none; } 75% { transform: rotate(1.5deg) translateY(-3px); } }
@keyframes meetWobble { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2.5deg); } 70% { transform: rotate(2deg); } }
@keyframes meetSweep { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10px) rotate(-2deg); } }
@keyframes meetSway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg) translateX(-4px); } 70% { transform: rotate(3deg) translateX(3px); } }
@keyframes meetWave { 0%, 100% { transform: none; } 50% { transform: translateY(-5px) rotate(1.5deg); } }
/* what they say (a 💭 thought for Charlie) */
.meet-say { flex: none; position: relative; z-index: 3; visibility: hidden; max-width: min(92%, 420px); min-height: 2.6em; margin-bottom: 14px; padding: 9px 14px; background: #FFFDF8; color: #1D1A1F;
  border: 3px solid #1D1A1F; border-radius: 16px; font-size: 17px; font-weight: 800; line-height: 1.3; text-align: center; box-shadow: 0 4px 0 #1D1A1F; }
.meet-say::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 18px; height: 18px; margin-left: -9px; background: #FFFDF8; border: 3px solid #1D1A1F; border-top: 0; border-left: 0; transform: rotate(45deg); }
.meet-say.on { visibility: visible; animation: pop .35s cubic-bezier(.2, 1.4, .4, 1); }
.meet-say.think { border-radius: 26px; border-style: dashed; font-style: italic; }
.meet-say.think::after { width: 12px; height: 12px; margin-left: -6px; bottom: -20px; border: 3px solid #1D1A1F; border-radius: 50%; transform: none; }
/* the line-up: everyone introduced so far (they react to the newcomer) */
.meet-line { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; list-style: none; margin: 12px 0 0; padding: 0; min-height: 66px; }
.meet-mate { position: relative; display: flex; flex-direction: column; align-items: center; width: 50px; }
.meet-mate img { width: 46px; height: 46px; object-fit: cover; object-position: 50% 8%; border-radius: 50%; background: #FFFDF8; border: 2.5px solid #F2B33D; }
.meet-mate-name { max-width: 64px; margin-top: 2px; font-size: 10px; font-weight: 800; color: #D9D0DF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meet-mate.pop { animation: pop .4s cubic-bezier(.2, 1.4, .4, 1); }
.meet-mate.reacting img { animation: meetShake .5s ease-in-out 2; }
.meet-react { position: absolute; top: -16px; right: -6px; font-size: 22px; animation: meetReact 2.4s ease-out both; }
@keyframes meetShake { 25% { transform: translateX(-3px) rotate(-6deg); } 75% { transform: translateX(3px) rotate(6deg); } }
@keyframes meetReact { 0% { transform: translateY(8px) scale(.4); opacity: 0; } 15% { transform: translateY(-4px) scale(1.15); opacity: 1; } 25%, 85% { transform: none; opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
.screen-meet.finale .meet-mate { width: 66px; }
.screen-meet.finale .meet-mate img { width: 60px; height: 60px; }
.screen-meet.finale .meet-mate-name { max-width: 84px; }
.screen-meet.finale .meet-mate:nth-child(odd) img { animation: meetHop 1.4s ease-in-out infinite; }
.screen-meet.finale .meet-mate:nth-child(even) img { animation: meetHop 1.4s ease-in-out .7s infinite; }
/* the narrator's caption, as in the opening */
.meet-card { flex: none; width: 100%; max-width: 560px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; padding: 10px 16px 12px; box-shadow: 0 4px 0 var(--shadow); cursor: default; }
.meet-who { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.meet-narr { margin: 4px 0 0; font-size: 17px; font-weight: 800; line-height: 1.35; min-height: calc(1.35em * 3); }
.meet-narr.pop { animation: pop .35s; }
.meet-next { flex: none; max-width: 560px; color: #1D1A1F; }
.meet-hint { margin: 0; font-size: 13px; font-weight: 800; color: #D9D0DF; }
@media (max-height: 700px) { .meet-narr { font-size: 15px; min-height: calc(1.35em * 2); } .meet-hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .meet-star.in { animation: meetFade .25s both; }
  .meet-pic[class*="mv-"], .screen-meet.finale .meet-mate img, .meet-mate.reacting img { animation: none !important; }
  .meet-say.on, .meet-mate.pop, .meet-narr.pop { animation: meetFade .2s both; }
  .meet-react { animation: none; }
}
@keyframes meetFade { from { opacity: 0; } }

/* ---------- [origin] How Charlie came home (public/origin.js, content/origin.json): a drawn flashback, full-bleed, the caption card under it ----------
   The scene is the canvas behind everything (zoom 1: it's sized in real pixels); the top row, the empty scene box (origin.js fits the
   drawing between the top row and the card), the card and Next sit over it in a column. The bubble is placed by origin.js over whoever
   speaks, in real pixels (its layer is zoom 1, its words scaled by --ui). Reduce Motion: no pops. */
html:has(body[data-screen="origin"]), body[data-screen="origin"] { background: #2B2530; }
body[data-screen="origin"] #s-origin { display: flex; flex-direction: column; align-items: center; }
.screen-origin { background: #2B2530; color: #FFFDF8; overflow: hidden; cursor: pointer; gap: 8px; }
#s-origin > .origin-canvas, #s-origin > .origin-layer { zoom: 1; position: absolute; inset: 0; width: 100%; height: 100%; }
#s-origin > .origin-canvas { display: block; z-index: 0; }
#s-origin > .origin-layer { z-index: 3; pointer-events: none; }
#s-origin > :not(.origin-canvas):not(.origin-layer) { position: relative; z-index: 2; }
.origin-top { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; }
.origin-kicker { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 12px; font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #1D1A1F; background: #F2B33D; border: 2.5px solid #1D1A1F; border-radius: 999px; box-shadow: 0 3px 0 #1D1A1F; }
.origin-count { flex: none; white-space: nowrap; margin: 0 0 0 auto; padding: 2px 8px; font-size: 13px; font-weight: 900; color: #FFFDF8; background: rgba(0, 0, 0, .35); border-radius: 999px; font-variant-numeric: tabular-nums; }
.origin-count:empty { display: none; }
.origin-count:empty + .meet-skip { margin-left: auto; }
#originSkip { flex: none; white-space: nowrap; }
@media (max-width: 420px) { .origin-kicker { font-size: 11px; letter-spacing: .08em; padding: 4px 9px; } }
.origin-scene { flex: 1 1 auto; min-height: 0; width: 100%; }
.origin-say { position: absolute; left: 0; top: 0; visibility: hidden; width: max-content; max-width: min(78vw, calc(380px * var(--ui, 1))); padding: calc(8px * var(--ui, 1)) calc(13px * var(--ui, 1)); background: #FFFDF8; color: #1D1A1F;
  border: 3px solid #1D1A1F; border-radius: 16px; font-size: calc(16px * var(--ui, 1)); font-weight: 800; line-height: 1.3; text-align: center; box-shadow: 0 4px 0 #1D1A1F; transform: translate(-50%, -100%); }
.origin-say::after { content: ''; position: absolute; left: var(--tail, 50%); bottom: -12px; width: 18px; height: 18px; margin-left: -9px; background: #FFFDF8; border: 3px solid #1D1A1F; border-top: 0; border-left: 0; transform: rotate(45deg); }
.origin-say.on { visibility: visible; animation: originPop .35s cubic-bezier(.2, 1.4, .4, 1); }
.origin-say.think { border-radius: 26px; border-style: dashed; font-style: italic; }
.origin-say.think::after { width: 12px; height: 12px; margin-left: -6px; bottom: -20px; border: 3px solid #1D1A1F; border-radius: 50%; transform: none; }
.origin-who { display: block; font-size: .72em; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #8A6A1E; font-style: normal; }
@keyframes originPop { from { transform: translate(-50%, -100%) scale(.6); opacity: 0; } to { transform: translate(-50%, -100%); opacity: 1; } }
.origin-card .meet-narr { min-height: calc(1.35em * 2); }
.origin-next { flex: none; max-width: 560px; color: #1D1A1F; }
@media (max-height: 700px) { .origin-card .meet-narr { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .origin-say.on { animation: none; } }

/* Dark mode: theme.js sets <html data-theme="dark"> when the device is in dark mode (Theme: auto, the default)
   or when the player picks Theme: dark. Light pastels keep dark text; the canvas game world keeps its own art. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cream: #17141B;
  --paper: #26212C;
  --ink: #F4EDE3;
  --muted: #B3AAB8;
  --line: #3D3545;
  --red-deep: #FF8A80;
  --shadow: #000;
}
[data-theme="dark"] .screen-dim { background: rgba(0, 0, 0, .6); }
[data-theme="dark"] :is(.btn-primary, .lvl-num, .ab-big, .btn-day, .btn-watch, .btn-extras, .ab-key) { color: #1D1A1F; }
[data-theme="dark"] .intro-tip { background: #3A2226; }
[data-theme="dark"] .submit-row input { background: var(--cream); color: var(--ink); }
[data-theme="dark"] :is(.hud-clock, .hud-wallet, .hp-bar, .fm-bar) { background: var(--cream); }
[data-theme="dark"] .board .me { background: #4A3B17; }
[data-theme="dark"] .lvl-endless .lvl-num { color: #fff; }
[data-theme="dark"] body.night { background: #0E0C11; }

/* ---------- Watch Mode: Today on Park Avenue (the day's highlights, opened from the pause screen and the week's results: game.js "Today on Park Avenue") ---------- */
.recap { position: fixed; inset: 0; z-index: 30; display: flex; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  background: rgba(29, 26, 31, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.recap[hidden] { display: none; }
.recap-card { zoom: var(--ui, 1); max-width: 460px; animation: recapIn .38s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes recapIn { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.recap-card h2 { font-size: 32px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.recap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.recap-list li { display: flex; gap: 10px; align-items: flex-start; }
.rc-time { flex: none; width: 5.4em; white-space: nowrap; text-align: right; font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.rc-emoji { flex: none; width: 28px; text-align: center; font-size: 20px; line-height: 1; } /* fixed columns: every row's words start at the same x */
.rc-body { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.rc-who { font-size: 12px; font-weight: 700; color: var(--muted); }
.rc-body q { font-size: 13px; font-style: italic; }
.rc-quiet { justify-content: center; font-size: 18px; font-weight: 800; padding: 6px 0; }
.recap-sum { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--cream); font-size: 16px; font-weight: 700; }
.recap-week { text-align: left; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; font-size: 13px; }
.recap-week h3 { margin: 0 0 6px; font-size: 16px; }
.recap-week p { margin: 0 0 4px; } .recap-week b { display: inline-block; min-width: 34px; color: var(--muted); }
[data-theme="dark"] .recap { background: rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: reduce) { .recap-card { animation: none; } }
input[type="checkbox"] { accent-color: var(--gold); width: 1.1em; height: 1.1em; vertical-align: -0.15em; } /* the brand gold, not the browser blue */

/* Chill Mode (assists): Settings rows and the result card's badge */
.chill-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 8px 0; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 0 3px 0 var(--shadow); cursor: pointer; text-align: left; }
.chill-row input { flex: none; width: 26px; height: 26px; accent-color: var(--gold); }
.chill-txt { display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.chill-hint { font-size: 14px; font-weight: 600; color: var(--muted); }
.chill-main { background: #FFE7A8; color: #1D1A1F; }
.chill-main .chill-hint { color: #5A4A2A; }
.chill-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.chill-set:disabled .chill-row { opacity: .5; cursor: default; }
.res-outro { margin: 2px 0 6px; font-weight: 800; font-size: 15px; text-align: center; } /* [qa2fix] the last mission's closing line */
.chill-badge { display: inline-block; align-self: center; margin: 4px auto 2px; padding: 3px 12px; border: 2.5px solid var(--ink); border-radius: 999px; background: #CFEAD6; color: #1D1A1F; font-size: 14px; font-weight: 900; }
.chill-note { font-size: 13px; margin: 4px 0 10px; }
.adapt-note { align-self: center; margin: 4px auto 6px; padding: 6px 12px; max-width: 30em; border: 2.5px solid var(--ink); border-radius: 14px; background: #CFEAD6; color: #1D1A1F; font-size: 14px; font-weight: 800; line-height: 1.35; text-align: center; } /* [adaptive] the intro's and the fail card's word on the tier (Screens.swift AdaptNote) */

/* Photo Mode (game.js "Photo Mode"; apple/App/PhotoMode.swift): over the frozen canvas, no HUD, no dimming */
body[data-screen="photo"] #s-photo { display: block; }
.screen-photo { background: transparent; padding: 0; overflow: hidden; }
.photo-pan { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.photo-pan:active { cursor: grabbing; }
.photo-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0, 0, 0, .28); pointer-events: none; } /* [qa2fix] the screen under the toolbar isn't in the picture */
.photo-pan:focus-visible { outline: 4px solid var(--gold); outline-offset: -8px; }
.photo-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l)); pointer-events: none; }
.photo-top > * { pointer-events: auto; }
.photo-top .btn { width: 110px; }
.photo-tag { padding: 8px 12px; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.photo-bar { position: absolute; left: 50%; bottom: calc(8px + var(--safe-b)); transform: translateX(-50%); width: calc(100% - 20px - var(--safe-l) - var(--safe-r)); max-width: 520px;
  display: flex; flex-direction: column; gap: 8px; padding: 12px; background: color-mix(in srgb, var(--paper) 94%, transparent); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 5px 0 var(--shadow); }
.photo-row { display: flex; gap: 6px; align-items: center; }
.photo-row .btn { flex: 1; }
.photo-row[hidden] { display: none; }
.photo-zoom { min-width: 64px; text-align: center; font-weight: 900; }
.photo-hint { margin: 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.photo-bar .btn:disabled { cursor: default; } /* [polish2] dimmed by .btn:disabled (an opacity on top of it went below readable) */
.key-hint { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1.5px solid currentColor; border-radius: 5px; font: 800 12px ui-rounded, system-ui, sans-serif; opacity: .6; vertical-align: 2px; }
@media (pointer: coarse) { .key-hint { display: none; } }
.photo-sticker { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 270px); width: max-content; max-width: min(86%, 520px);
  padding: 10px 14px; background: #FFFDF8; color: #1D1A1F; border: 3px solid #1D1A1F; border-radius: 16px; box-shadow: 0 4px 0 #1D1A1F; pointer-events: none; }
.photo-sticker.top { bottom: auto; top: calc(var(--safe-t) + 70px); }
.photo-sticker.stamped { padding-left: 32px; }
.photo-sticker .ps-text { display: block; font-size: 18px; font-weight: 900; }
.photo-sticker .ps-who { display: block; font-size: 13px; font-weight: 800; color: #6B6470; }
.photo-sticker .ps-stamp { position: absolute; left: -14px; top: -14px; width: 38px; height: 38px; display: grid; place-items: center; font-size: 22px; background: #F2B33D; border: 3px solid #1D1A1F; border-radius: 50%; transform: rotate(-10deg); }
.photo-sticker .ps-stamp[hidden] { display: none; }
.photo-dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 24px); max-width: 520px; max-height: calc(100% - 24px - var(--safe-t) - var(--safe-b));
  overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--cream); border: 3px solid var(--ink); border-radius: 24px; box-shadow: 0 6px 0 var(--shadow); text-align: center; }
.photo-dialog[hidden] { display: none; }
.photo-dialog h2 { margin: 0; font-size: 26px; }
.photo-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.photo-dialog-head .btn { width: 100px; }
.photo-lines { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.photo-lines h3 { margin: 6px 0 0; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.photo-line { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); text-align: left; font-size: 15px; font-weight: 800; }
.photo-line.on { border-color: var(--ink); background: color-mix(in srgb, var(--gold) 35%, var(--paper)); }
.photo-line small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
#photoOk, #photoErr { display: flex; flex-direction: column; gap: 10px; }
#photoOk[hidden], #photoErr[hidden] { display: none; }
#photoErr p { margin: 0; font-size: 16px; font-weight: 700; }
.photo-img { display: block; max-width: 100%; max-height: 50vh; margin: 0 auto; object-fit: contain; border: 1px solid var(--line); }
#photoDownload { text-align: center; text-decoration: none; color: #1D1A1F; }
.photo-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.photo-flash.go { animation: photoFlash .35s ease-out; }
@keyframes photoFlash { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .photo-flash.go { animation: none; } }

/* ---------- Side Sniffs (game.js "Side Sniffs"): the intro's, pause card's and result card's lists ---------- */
.sniffs { text-align: left; background: var(--cream); border: 2.5px dashed var(--line); border-radius: 14px; padding: 8px 12px 10px; }
.sniffs-head { margin: 0 0 4px; font-size: 15px; font-weight: 900; display: flex; justify-content: space-between; gap: 8px; }
.sniffs-n { color: var(--muted); font-weight: 800; }
.sniffs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sniff { display: flex; gap: 8px; align-items: baseline; font-size: 14px; font-weight: 600; line-height: 1.3; }
.sniff-tick { flex: none; width: 1.3em; text-align: center; color: var(--muted); }
.sniff.done .sniff-text { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--gold); }
.sniff.new .sniff-text { color: var(--ink); text-decoration: none; font-weight: 800; }
.sniff.new .sniff-tick { animation: sniff-pop .5s cubic-bezier(.3, 1.6, .5, 1) .45s both; }
@keyframes sniff-pop { from { transform: scale(.2) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sniff.new .sniff-tick { animation: none; } }
.lvl-paw { margin-left: 4px; }
/* [webcontent] the title screen's App Store line (index.html #getApp): a plain link, no badge */
.get-app { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); text-align: center; text-wrap: balance; }
.get-app a { color: var(--ink); font-weight: 900; text-underline-offset: 3px; white-space: nowrap; }
.get-app span { font-weight: 700; }

/* [scrapbook] "📒 New in the Scrapbook: …" (game.js scrapToastTick): under the top bar and the minimap, centred, never over
   the hearts, the abilities, the thought card or Watch Mode's bar; slides in (fades, with Reduce Motion) and goes after 4 s */
.scrap-toast { zoom: var(--ui, 1); position: absolute; left: 50%; top: calc(var(--safe-t) + 200px); transform: translateX(-50%); max-width: min(360px, calc(100vw - 32px));
  background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; padding: 7px 12px; box-shadow: 0 3px 0 var(--shadow);
  font-size: 15px; font-weight: 800; text-align: center; pointer-events: none; }
.scrap-toast b { font-weight: 900; color: var(--muted); }
.scrap-toast[hidden] { display: none; }
.scrap-toast.show { animation: scrapIn 4s ease-out forwards; }
@keyframes scrapIn { 0% { opacity: 0; transform: translate(-50%, -14px); } 8%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
@keyframes scrapFade { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scrap-toast.show { animation-name: scrapFade; } }
body.ff .scrap-toast { display: none; }
/* [stab] the result card's "🧣 New in the Wardrobe: …" (game.js wardrobeResult) */
.res-wardrobe { margin: 10px auto 0; padding: 5px 14px; width: fit-content; max-width: 100%; border: 2.5px solid var(--line); border-radius: 14px; background: var(--cream); color: var(--ink); font-size: 15px; font-weight: 800; text-align: center; } /* [design2] a note, not a button (cream, a soft line: the ink outline is the buttons' look) */
.res-wardrobe[hidden] { display: none; }

/* ---------- Controls (s-controls) [controls] ---------- */
body[data-screen="controls"] #s-controls { display: flex; flex-direction: column; align-items: center; }
.ctl-h { margin: 14px 0 2px; padding: 0; font-size: 17px; font-weight: 900; color: var(--ink); }
.ctl-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.ctl-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px 6px 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--shadow); font: inherit; font-size: 16px; font-weight: 800; text-align: left; cursor: pointer; }
.ctl-ico { flex: none; width: 26px; text-align: center; font-size: 18px; }
.ctl-name { flex: 1; }
.ctl-key { flex: none; min-width: 64px; padding: 5px 10px; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--paper); box-shadow: 0 2px 0 var(--shadow); font: inherit; font-size: 15px; font-weight: 900; text-align: center; }
.ctl-row.on .ctl-key { background: var(--gold); color: #1D1A1F; font-size: 13px; }
.ctl-msg { margin: 10px 0; padding: 10px; border: 2px solid var(--ink); border-radius: 12px; background: var(--cream); font-weight: 800; }
#ctlReset:disabled { opacity: .5; }

/* [whatsnew] the title screen's "✨ New: …" line (generated from content/whatsnew.json into index.html), dismissible */

@media (prefers-contrast: more) { :root { --muted: #4A444F; --line: #A8977E; } :root[data-theme="dark"] { --muted: #DDD5E1; --line: #7A6E85; } } /* [a11y3] Increase Contrast: stronger secondary text and rules (the app: Palette.contrasted) */

/* [access] the access code dialog (index.html #accessDlg) */
.access-dlg { width: min(360px, calc(100vw - 32px)); padding: 20px; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 6px 0 var(--shadow); font-family: var(--font); }
.access-dlg::backdrop { background: rgba(29, 26, 31, .55); }
.access-dlg h2 { margin: 0 0 6px; font-size: 22px; }
.access-dlg p { margin: 0 0 12px; color: var(--muted); font-size: 15px; line-height: 1.35; }
.access-dlg label { display: block; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.access-dlg input { width: 100%; box-sizing: border-box; font: 700 18px var(--font); padding: 10px 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--cream); color: var(--ink); }
.access-dlg input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.access-dlg .access-err { min-height: 1.3em; margin: 8px 0 4px; color: var(--red); font-weight: 700; }
.access-row { display: flex; gap: 8px; justify-content: flex-end; }
.access-row .btn { flex: 1; }
.access-dlg[aria-busy="true"] .access-err { color: var(--muted); } /* (Checking… / You're in!: not an error) */
.access-dlg h2 { line-height: 1.2; text-wrap: balance; }
@media (max-width: 359px) { .access-dlg { padding: 16px; } .access-dlg h2 { font-size: 20px; } .access-row { flex-wrap: wrap; } } /* (a 320 px phone) */
/* [access] Game Settings → Access (game.js syncAccess): the code's label (not a button) and "Use a different code"; a code
   that fixes the version leaves the Version row showing it, not switching it */
.set-access { width: 100%; }
.set-note { margin: 0; cursor: default; color: var(--muted); font-weight: 700; }
.set-note:hover { background: none; }
.set-row.set-locked { cursor: default; color: var(--muted); }
.set-row.set-locked:hover { background: none; }
/* [cloudsave] Game Settings → Save progress (game.js "Save progress"): rows show and hide as you sign in and out, so the lines
   between rows go only between the ones on show; an empty status line takes no room; the providers' own buttons, stacked and
   centred (they draw themselves: Apple JS and Google Identity Services, white with an outline in both themes) */
.set-save { width: 100%; }
.save-group .set-row ~ .set-row { border-top: 0; }
.save-group .set-row:not([hidden]) ~ .set-row:not([hidden]) { border-top: 2px solid var(--line); }
.save-group .save-status:empty { min-height: 0; padding: 0; border-top: 0 !important; }
.save-group .save-status:focus { outline: none; }
.save-group .save-status:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.save-intro { font-size: 15px; line-height: 1.35; }
.save-who { color: var(--ink); }
.save-providers { flex-direction: column; align-items: center; gap: 10px; padding: 14px 16px 16px; cursor: default; }
.save-providers:hover { background: none; }
.save-link { margin: 0; width: 100%; color: var(--muted); font-size: 15px; font-weight: 700; text-align: left; }
.save-btn { display: flex; justify-content: center; width: 260px; max-width: 100%; min-height: 40px; }
#appleid-signin { width: 260px; max-width: 100%; height: 40px; cursor: pointer; }
.set-row.save-del { color: var(--red); }
/* [gdaycharlie] Game Settings → From the old address (public/move.js: on gdaycharlie.com only; its rows as Save progress's) and the
   move's quiet note at the bottom ("Your progress came with you.", or the one-time offer on the title), as pwa.js's toast */
.set-move { width: 100%; }
.set-move .save-intro, .move-toast { overflow-wrap: anywhere; }
.move-toast { position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 9998; width: fit-content; max-width: 460px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 10px 10px 16px; background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--shadow); font: 800 15px/1.3 var(--font); animation: move-in .25s ease-out; }
.move-toast span { flex: 1 1 200px; }
.move-toast button { font: inherit; cursor: pointer; min-height: 44px; padding: 6px 14px; border: 3px solid var(--ink); border-radius: 12px; background: var(--gold); color: #1D1A1F; box-shadow: 0 3px 0 var(--shadow); }
.move-toast .move-later { background: transparent; color: var(--ink); border-color: transparent; box-shadow: none; }
.move-toast button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@keyframes move-in { from { transform: translateY(20px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .move-toast { animation: none; } }
.save-del-go { background: var(--red); color: #fff; }
[data-theme="dark"] .save-del-go { color: #fff; }
/* [transfer] I have a code's and Link an Apple TV's fields (a row of the group: label, field, what went wrong, the button), and the
   save code's dialog: the letters big and in one line (smaller on a 320 px phone), the QR on white whatever the theme */
.save-form { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px 16px; cursor: default; }
.save-form:hover { background: none; }
.save-form label { font-weight: 800; font-size: 14px; }
.save-form input { width: 100%; box-sizing: border-box; font: 800 clamp(15px, 4.6vw, 18px) var(--font); letter-spacing: .5px; text-transform: uppercase; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--cream); color: var(--ink); }
.save-form input::placeholder { color: var(--muted); opacity: .6; }
.save-form input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.save-form .btn { align-self: flex-start; }
.save-err { margin: 0; color: var(--red); font-weight: 700; font-size: 14px; line-height: 1.35; }
.save-err:empty { display: none; }
.save-code-dlg .save-code { margin: 4px 0 12px; color: var(--ink); font: 900 clamp(18px, 6vw, 26px)/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 1px; text-align: center; white-space: nowrap; user-select: all; -webkit-user-select: all; }
.save-qr { width: 176px; height: 176px; margin: 0 auto 12px; padding: 0; border-radius: 10px; background: #fff; overflow: hidden; }
.save-qr:empty { display: none; }
.save-qr svg { display: block; width: 100%; height: 100%; }
.save-code-dlg .save-code-msg { min-height: 1.3em; margin: 0 0 8px; color: var(--ink); font-weight: 700; }
.save-code-dlg .save-code-msg:empty { min-height: 0; margin: 0; }

/* ---------- [hud] the interface, drawn (public/ui-icons.css: .ui-i[data-i]; scripts/ui-icons.mjs; README "🎨 The interface, drawn") ---------- */
/* Words first; an icon only where it does a job the words can't (the health bar's heart, the ability buttons, Fluffy's mood gem, a
   mission's stars, the locks, the Side Sniffs' paw); never an emoji (the owner, October 28, 2026). */
.hp-icon .ui-i { width: 20px; height: 20px; vertical-align: -4px; }
.hud-goal { font-size: 17px; white-space: nowrap; overflow: hidden; } /* (game.js fitHudGoal fits it to the middle's width) */
.hud-goal.two { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 7px; font-size: 13.5px; line-height: 1.12; } .hud-goal.two .hg-dot { display: none; }
.fm-label .ui-i { width: 17px; height: 17px; vertical-align: -4px; margin-right: 3px; }
.zoom-btn .zoom-name { font-size: 10px; margin-top: 0; line-height: 1.05; text-align: center; letter-spacing: -0.2px; }
.ab-ico .ui-i { width: 32px; height: 32px; vertical-align: middle; }
.ab-big .ab-ico .ui-i { width: 40px; height: 40px; }
.stars .ui-i { width: 46px; height: 46px; }
.lvl-num .ui-i { width: 24px; height: 24px; vertical-align: middle; }
.lvl-stars .ui-i { width: 17px; height: 17px; vertical-align: -3px; } .lvl-stars .ui-i.off { opacity: .3; filter: grayscale(1); }
.sniff-tick .ui-i { width: 1.1em; height: 1.1em; vertical-align: -.2em; }
.ctl-ico:empty { display: none; }
.photo-sticker .ps-stamp .ui-i { width: 26px; height: 26px; transform: rotate(10deg); }
.intro-emoji.intro-pic { display: inline-block; width: 72px; height: 84px; background: center / contain no-repeat; }
.intro-emoji.intro-word { display: inline-flex; align-items: center; min-height: 44px; margin: 20px 4px; padding: 0 12px; font-size: 14px; font-weight: 900; line-height: 1.1; border: 2px solid var(--ink); border-radius: 99px; background: var(--paper); color: var(--ink); }
.meet-emoji:empty { display: none; }