/* ============================================================
   FUTURES OF CARE — Florence-inspired hand-drawn UI
   Paper ground, ink outlines, one accent colour per future.
============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  /* the game's one font, for every text (loaded in index.html's <head>) */
  --font: "Roboto", system-ui, -apple-system, sans-serif;
  --ink: #23232b;
  --paper: #f8f7f2;
  --wash: #e6e5df;
  --wash2: #c9c8c1;
  --muted: #8b8a84;
  --bad: #d95436;
}

body.th-neutral        { --accent: #4a9fd8; --pale: #c2ddf0; }
body.th-growth         { --accent: #4a9fd8; --pale: #c2ddf0; }
body.th-collapse       { --accent: #e0763c; --pale: #f4cfae; }
body.th-discipline     { --accent: #3f9d78; --pale: #c2e2d2; }
body.th-transformation { --accent: #8f7bd8; --pale: #d8cef2; }

html, body { height: 100%; }
/* A phone's browser enlarges long lines of small text by itself: Safari on an
   iPhone held sideways took a Care Badge's words from 9 px to 16 px, beside
   tabs it left alone. Every size in this file is meant as written. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: #edece6;
  color: var(--ink);
  touch-action: manipulation;
  overscroll-behavior: none;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
@media (min-width: 560px) {
  #app { box-shadow: 0 0 0 2.5px var(--ink), 0 18px 60px rgba(35, 35, 43, .18); border-radius: 0 0 14px 14px; }
}

/* ---- WHILE THE PAGE LOADS: index.html starts landscape, on the home
   page's purple, with the page hidden (html.booting) — until the scripts
   had run, the browser used to show the bare page, the old upright home
   page, for a moment. Game.reveal (js/engine.js) shows it once it is
   drawn, with a short fade; should the scripts never run, it shows
   anyway after 4 s. ---- */
html.booting #app { opacity: 0; animation: bootShow .3s ease 4s forwards; }
html.booting #devTag { opacity: 0; }
@keyframes bootShow { to { opacity: 1; } }
#app, #devTag { transition: opacity .3s ease; }

.screen { display: none; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; }
.screen.active { display: flex; }

b, strong { font-weight: 800; }
i { font-style: italic; color: inherit; }
/* buttons and fields don't take the page's font by themselves (the ? on
   each indicator, the clock's arrows) */
button, input, select, textarea { font-family: var(--font); }

/* ---------- buttons: ink-outlined pills ---------- */
.btn {
  font-family: var(--font);
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
  background: #ffffff;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 12px 18px;
  min-height: 48px;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .1s ease, box-shadow .1s ease, background .2s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--accent); color: #ffffff; }
.btn.ghost { background: var(--paper); }
.btn.big { font-size: 1.1rem; padding: 15px 30px; }
.btn.tiny { min-height: 38px; padding: 7px 14px; font-size: .85rem; border-radius: 11px; border-width: 2px; box-shadow: 0 1.5px 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: 0 2px 0 var(--ink); transform: none; }
.link-btn { background: none; border: none; color: var(--muted); text-decoration: underline; font-size: .8rem; cursor: pointer; padding: 8px; }

/* Florence pill progress bar */
.fl-bar {
  height: 20px; border: 3px solid var(--ink); border-radius: 999px;
  background: #ffffff; overflow: hidden; box-shadow: 0 2px 0 rgba(35,35,43,.25);
}
.fl-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 999px; transition: width .18s ease; }

/* ============================================================
   TITLE
============================================================ */
#scr-title { justify-content: center; padding: 28px 26px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.title-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wordmark {
  font-family: var(--font);
  font-size: clamp(3rem, 14vw, 4.2rem);
  line-height: .95;
  font-weight: 700;
  letter-spacing: -.01em;
}
.t-sub { color: var(--accent); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
.t-blurb { color: var(--ink); opacity: .8; font-size: .95rem; line-height: 1.55; max-width: 40ch; }
.t-blurb.small { font-size: .84rem; }
#scr-title .btn { margin-top: 10px; }

/* ============================================================
   SELECT
============================================================ */
#scr-select { padding: 22px 16px calc(20px + env(safe-area-inset-bottom)); gap: 14px; }
.select-head { text-align: center; margin-bottom: 4px; }
.select-head h2 { font-family: var(--font); font-size: 1.7rem; }
.select-head p { color: var(--muted); font-size: .88rem; margin-top: 4px; }
#selectCards { display: flex; flex-direction: column; gap: 16px; }

.route-card {
  display: flex; flex-direction: column; text-align: left;
  border: 2.5px solid var(--ink); border-radius: 16px; overflow: hidden;
  background: #ffffff; color: var(--ink); cursor: pointer; padding: 0;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.route-card:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.rc-art { height: 132px; overflow: hidden; position: relative; border-bottom: 2.5px solid var(--ink); }
.rc-art > svg { width: 100%; height: 100%; display: block; }
.rc-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-badge {
  position: absolute; left: 10px; top: 10px;
  background: rgba(255,255,255,.94); border: 2px solid var(--ink); border-radius: 999px;
  font-size: .6rem; font-weight: 800; letter-spacing: .12em; padding: 4px 10px;
}
.rc-hero { position: absolute; right: 12px; bottom: 8px; }
.rc-hero svg { display: block; }
.rc-body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 3px; }
.rc-future { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.rc-growth .rc-future { color: #4a9fd8; } .rc-collapse .rc-future { color: #e0763c; }
.rc-discipline .rc-future { color: #3f9d78; } .rc-transformation .rc-future { color: #8f7bd8; }
.route-card h3 { font-family: var(--font); font-size: 1.3rem; font-weight: 600; }
.rc-char { font-size: .82rem; color: var(--muted); }
.rc-char b { color: var(--ink); }
.rc-tag { font-size: .82rem; color: var(--muted); font-style: italic; }
.rc-meta { display: flex; gap: 10px; margin-top: 7px; font-size: .72rem; font-weight: 800; }
.rc-done { color: var(--accent); } .rc-new { color: var(--muted); }
.rc-notes { color: var(--muted); }

.select-foot { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
#btnCompass.locked { opacity: .55; font-size: .82rem; }
.compass-btn { border-color: var(--ink); color: var(--ink); background: var(--pale); }

/* ============================================================
   PLAY
============================================================ */
#scr-play { overflow: hidden; }
#playbar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 8px;
}
/* a ☰: the day's menu (Game.openDayMenu), and the surveys' (Game.surveyMenuButton) */
.menu-btn {
  background: #ffffff; color: var(--ink); border: 2px solid var(--ink);
  width: 34px; height: 34px; border-radius: 10px; font-size: .95rem; cursor: pointer; flex: none;
  box-shadow: 0 1.5px 0 var(--ink);
  display: grid; place-items: center; padding: 0;
}
#playRoute { display: flex; flex-direction: column; line-height: 1.15; flex: 1; min-width: 0; }
#playRoute b { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
#playRoute span { font-size: .82rem; color: var(--muted); }
#clockWrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
#clockSegs { display: flex; gap: 3px; }
#clockSegs .seg { width: 13px; height: 6px; border-radius: 3px; background: #ffffff; border: 1.5px solid var(--ink); }
#clockSegs .seg.past { background: var(--accent); }
#clockLabel { font-size: .76rem; font-weight: 800; color: var(--ink); letter-spacing: .06em; }
#clockLabel.tick { animation: tick .5s ease; }
#noteCount { font-size: .68rem; font-weight: 800; color: var(--accent); letter-spacing: .06em; }
#noteCount.tick { animation: tick .5s ease; }
@keyframes tick { 0% { transform: translateY(-6px); opacity: 0; } 100% { transform: none; opacity: 1; } }

#meters { display: flex; gap: 8px; padding: 0 12px 8px; }
.chip {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  background: #ffffff; border: 2px solid var(--ink); border-radius: 999px; padding: 6px 4px;
  font-size: .8rem; color: var(--muted);
}
.chip .ic { font-size: .85rem; color: var(--ink); }
/* an indicator's icon, a picture (`icon` in the data file: assets/icons/):
   a square a little taller than its number's figures */
.chip img.ic { flex: none; display: block; width: 1.1rem; height: 1.1rem; object-fit: contain; }
body.mode-landscape .chip img.ic { width: calc(var(--ui) * 1.35); height: calc(var(--ui) * 1.35); }
.chip b { color: var(--ink); font-size: .95rem; }
/* a score move has to be impossible to miss: the chip flashes and a
   +1 / -1 pill rides up out of it and lingers */
.chip.bump.pos { animation: bumpP 1.1s cubic-bezier(.2,.9,.3,1.2); }
.chip.bump.neg { animation: bumpN 1.1s cubic-bezier(.2,.9,.3,1.2); }
@keyframes bumpP {
  0%   { transform: none; }
  22%  { border-color: var(--accent); background: var(--pale); transform: translateY(-4px) scale(1.09); }
  55%  { border-color: var(--accent); background: var(--pale); transform: translateY(0) scale(1.02); }
  100% { transform: none; }
}
@keyframes bumpN {
  0%   { transform: none; }
  22%  { border-color: var(--bad); background: #fbe6e0; transform: translateY(4px) scale(1.09); }
  55%  { border-color: var(--bad); background: #fbe6e0; transform: translateY(0) scale(1.02); }
  100% { transform: none; }
}
.chip .float {
  position: absolute; top: -6px; left: 50%; font-weight: 900; font-size: 1rem; line-height: 1;
  padding: 3px 9px; border-radius: 999px; border: 2px solid var(--ink); background: #ffffff;
  box-shadow: 0 2px 0 var(--ink); white-space: nowrap;
  animation: floatUp 2.3s cubic-bezier(.2,.9,.3,1) forwards; pointer-events: none; z-index: 5;
}
.chip .float.pos { color: var(--accent); } .chip .float.neg { color: var(--bad); }
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.7); }
  14%  { opacity: 1; transform: translate(-50%, -14px) scale(1.12); }
  26%  { transform: translate(-50%, -10px) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -34px) scale(.92); }
}
body.mode-landscape .chip .float {
  font-size: calc(var(--ui) * 1.35); padding: calc(var(--ui) * .22) calc(var(--ui) * .75);
  border-width: calc(var(--ui) * .18);
}

#stage { height: clamp(170px, 30vh, 270px); flex: none; background: var(--paper); position: relative; padding: 0 6px; }
#stage svg { width: 100%; height: 100%; display: block; }
#stage.pop { animation: stagePop .45s ease; }
@keyframes stagePop { 0% { opacity: .2; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
.place-chip {
  position: absolute; left: 20px; bottom: 16px;
  background: #ffffff; color: var(--ink); border: 2px solid var(--ink);
  font-size: .62rem; font-weight: 800; letter-spacing: .12em;
  padding: 4px 10px; border-radius: 999px;
}

.who-chip { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; animation: paraIn .4s ease; }
.who-chip svg { flex: none; display: block; }
.who-chip span { font-family: var(--font); font-weight: 600; font-size: 1.02rem; color: var(--accent); }

#storyPane { flex: 1; overflow-y: auto; padding: 14px 20px calc(22px + env(safe-area-inset-bottom)); }
#story .para {
  font-size: .95rem; line-height: 1.62; color: var(--ink);
  margin-bottom: 12px; animation: paraIn .45s ease backwards;
}
/* italic keeps the text's own colour — the light grey was too faint to read */
#story .para i { color: inherit; }
#story .para b { color: var(--accent); }
#story.reveal-now .para, #story.reveal-now ~ #actions .choice { animation-delay: 0s !important; }
@keyframes paraIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }

/* system notifications: pharmacy alerts, dashboards, messages — a \n in
   the text starts a new line inside the box */
#story .sysnote, .end-body .sysnote {
  background: #ffffff; border: 2px solid var(--ink); border-left: 7px solid var(--accent);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 12px;
  font-family: var(--font); font-size: .8rem; line-height: 1.5; color: var(--ink); white-space: pre-line;
  animation: paraIn .45s ease backwards;
}
#story .sysnote b { color: var(--accent); font-family: var(--font); letter-spacing: .02em; }
#story .sysnote i { color: inherit; }

#actions { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
/* a choice keeps its full height (flex: none): where the choices don't all fit
   on a short screen, their list scrolls. They used to be squeezed instead, the
   button shorter than its words, which then hung out of its bottom edge */
.choice {
  flex: none; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  animation: paraIn .4s ease backwards;
}
.choice .c-label { font-size: .95rem; }
.choice .c-sub { font-size: .78rem; font-weight: 600; color: var(--muted); }
.choice.locked { border-style: dashed; box-shadow: none; }
.choice.locked .c-label { color: var(--muted); }

/* ============================================================
   OVERLAYS
============================================================ */
#insightLayer { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.exit-box {
  position: absolute; left: 24px; right: 24px; top: 50%; transform: translateY(-50%);
  background: #ffffff; border: 2.5px solid var(--ink); border-radius: 16px;
  padding: 18px; pointer-events: auto; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 4px 0 var(--ink), 0 18px 50px rgba(35,35,43,.25);
}
.exit-box p { font-size: .92rem; line-height: 1.5; }

/* ============================================================
   ENDING + DEBRIEF
============================================================ */
#scr-end, #scr-shared { overflow-y: auto; }
.end-art { height: clamp(160px, 28vh, 260px); flex: none; padding: 8px 6px 0; }
.end-art svg { width: 100%; height: 100%; display: block; }
.end-body { padding: 18px 20px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.end-k { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.end-body h2 { font-family: var(--font); font-size: 1.75rem; line-height: 1.15; }
.end-body > p { font-size: .93rem; line-height: 1.6; }
.end-body > p b { color: var(--accent); }

.end-notes { display: flex; flex-direction: column; gap: 9px; }
.en-k { font-size: .66rem; font-weight: 800; letter-spacing: .16em; color: var(--accent); }
.en-sub { font-size: .74rem; color: var(--muted); }
.fn-grid { display: flex; flex-direction: column; gap: 8px; }
.fn-card {
  border: 2px solid var(--ink); background: #ffffff; color: var(--ink);
  border-radius: 12px; padding: 12px 14px; cursor: pointer; text-align: left;
  font-family: var(--font); box-shadow: 0 2px 0 var(--ink);
}
.fn-card .fn-front { display: flex; align-items: center; gap: 10px; color: var(--accent); font-weight: 800; font-size: .95rem; }
.fn-card .fn-front i { font-size: .72rem; font-weight: 700; font-style: normal; color: var(--muted); letter-spacing: .08em; }
.fn-card .fn-back { display: none; font-family: var(--font); font-size: .92rem; line-height: 1.55; }
.fn-card.open { background: var(--paper); box-shadow: none; }
.fn-card.open .fn-front { display: none; }
.fn-card.open .fn-back { display: block; animation: paraIn .35s ease; }

.en-lead { font-size: .88rem; }
.tag-list { display: flex; flex-direction: column; gap: 8px; }
.tag-item {
  background: #ffffff; border: 2px solid var(--ink); border-left: 7px solid var(--accent);
  border-radius: 12px; padding: 11px 13px;
}
.tag-item b { font-size: .88rem; color: var(--accent); display: block; margin-bottom: 3px; }
.tag-item p { font-size: .84rem; line-height: 1.5; color: var(--ink); }

.tu { display: flex; flex-direction: column; gap: 7px; background: #ffffff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 12px 14px; }
.tu-row { display: flex; align-items: center; gap: 9px; }
.tu-row small { width: 118px; font-size: .74rem; font-weight: 700; color: var(--muted); }
.tu-row b { width: 40px; text-align: right; font-size: .8rem; }
.tu-bar { flex: 1; height: 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); overflow: hidden; }
.tu-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* What Your Path Revealed — one card in the time-use card's style: the
   final indicators, split evenly across it (results page only), what the
   path revealed, then the day's time use under a thin line */
.rv-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: 2px 0; }
.rv-stat {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2px; min-width: 0;
  background: var(--paper); border: 2px solid var(--wash); border-radius: 10px; padding: 7px 10px 6px;
}
.rv-stat small { font-size: .74rem; font-weight: 700; line-height: 1.3; color: var(--muted); }
.rv-stat b { font-family: var(--font); font-size: 1.35rem; line-height: 1.1; }
.tu.reveal .tu {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-top: 2px solid var(--wash); margin-top: 4px; padding: 12px 0 0;
}

.end-meters { display: flex; gap: 8px; flex-wrap: wrap; }
.end-meters span { background: #ffffff; border: 2px solid var(--ink); border-radius: 999px; padding: 5px 12px; font-size: .84rem; font-weight: 800; }

/* The Path You Took — it folds open and shut, closed to begin with */
.end-path { background: #ffffff; border-radius: 12px; border: 2px solid var(--ink); }
.end-path > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 12px 14px;
}
.end-path > summary::-webkit-details-marker { display: none; }
.end-path .ep-k { flex: 1; font-size: .66rem; font-weight: 800; letter-spacing: .16em; color: var(--muted); }
.end-path .bi-chev { flex: none; color: var(--ink); font-size: .95rem; line-height: 1.1; opacity: .7; transition: transform .2s ease, opacity .2s; }
.end-path > summary:hover .bi-chev { opacity: 1; }
.end-path[open] .bi-chev { transform: rotate(180deg); }
.end-path ul { margin: 0 14px 12px 31px; animation: paraIn .3s ease; }
.end-path li { font-size: .84rem; line-height: 1.6; color: var(--muted); }
.end-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* ============================================================
   TURN THE CLOCK
============================================================ */
#scr-clock { overflow-y: auto; }
.clk-inner { padding: 22px 20px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
#clkPanel { height: clamp(170px, 30vh, 260px); }
#clkPanel svg { width: 100%; height: 100%; display: block; }
#clkWhen { font-family: var(--font); font-weight: 700; font-size: 1.3rem; text-align: center; }
#clkText { font-size: .92rem; line-height: 1.6; text-align: center; min-height: 88px; }
#clkText b { color: var(--accent); }
.clk-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
.clk-dial { width: 128px; height: 128px; cursor: grab; touch-action: none; }
.clk-dial:active { cursor: grabbing; }
.clk-dial svg { width: 100%; height: 100%; display: block; }
#clkHand { transform-origin: 60px 60px; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.clk-arrow {
  width: 52px; height: 52px; border-radius: 50%; border: 2.5px solid var(--ink);
  background: #ffffff; font-size: 1.4rem; color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 0 var(--ink);
}
.clk-arrow:active { transform: translateY(2px); box-shadow: none; }
.clk-arrow:disabled { opacity: .3; }
.clk-hint { text-align: center; font-size: .74rem; color: var(--muted); font-style: italic; }

/* ============================================================
   JOURNAL & COMPASS
============================================================ */
#scr-journal, #scr-compass { padding: 22px 16px calc(20px + env(safe-area-inset-bottom)); gap: 12px; }
#journalBody { display: flex; flex-direction: column; gap: 18px; }
.j-sec h3 { font-family: var(--font); font-size: 1.15rem; margin-bottom: 8px; }
.j-sec h3 small { color: var(--muted); font-family: var(--font); font-size: .75rem; font-weight: 700; margin-left: 6px; }
.j-note {
  background: #ffffff; border: 2px solid var(--ink); border-radius: 12px;
  padding: 11px 13px; font-family: var(--font); font-size: .88rem; line-height: 1.5; margin-bottom: 8px;
}
.j-growth .j-note { border-left: 7px solid #4a9fd8; }
.j-collapse .j-note { border-left: 7px solid #e0763c; }
.j-discipline .j-note { border-left: 7px solid #3f9d78; }
.j-transformation .j-note { border-left: 7px solid #8f7bd8; }
.j-note.j-locked { color: var(--muted); font-style: italic; opacity: .6; border-style: dashed; }

.compass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-cell { border: 2px solid var(--ink); border-radius: 14px; padding: 13px; background: #ffffff; display: flex; flex-direction: column; gap: 5px; }
.c-cell .c-med svg { display: block; }
.c-cell .c-future { font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.c-growth .c-future { color: #4a9fd8; } .c-collapse .c-future { color: #e0763c; }
.c-discipline .c-future { color: #3f9d78; } .c-transformation .c-future { color: #8f7bd8; }
.c-cell b { font-family: var(--font); font-size: .98rem; }
.c-cell p { font-size: .76rem; line-height: 1.5; color: var(--muted); }
.c-cell small { font-size: .68rem; color: var(--accent); }
.compass-core { margin-top: 12px; background: #ffffff; border: 2.5px solid var(--ink); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 3px 0 var(--ink); }
.compass-core p { font-family: var(--font); font-size: .92rem; line-height: 1.55; }
.compass-core b { color: var(--accent); }

/* ============================================================
   MINIGAMES — shared chrome
============================================================ */
.mg-holder { margin-top: 6px; }
/* a mini game's opening and its result sit straight on the story panel —
   no white card of their own */
.mg-card { display: flex; flex-direction: column; gap: 10px; animation: paraIn .4s ease; }
.mg-kicker { font-size: .66rem; font-weight: 800; letter-spacing: .18em; color: var(--accent); }
.mg-title { font-family: var(--font); font-size: 1.25rem; }
.mg-goal { font-size: .9rem; line-height: 1.55; white-space: pre-line; }   /* a \n in a goal starts a new line */
.mg-goal b { color: var(--accent); }
.mg-hint { font-size: .8rem; color: var(--muted); font-style: italic; }
.mg-line { font-size: .9rem; line-height: 1.55; }
.mg-line b { color: var(--accent); }
.mg-line i { color: var(--muted); }
.mg-play { display: flex; flex-direction: column; gap: 12px; animation: paraIn .3s ease; }
.mg-echo-state { font-size: .85rem; color: var(--muted); min-height: 20px; font-style: italic; text-align: center; }

/* landscape: a mini game and its frame — kicker, title, goal, result and
   buttons — sit on the UI scale, so they grow and shrink together */
:where(body.mode-landscape) .mg-play { font-size: calc(var(--ui) * 1.15); }
body.mode-landscape .mg-holder { margin-top: calc(var(--ui) * .4); }
/* a mini game's own words are the biggest thing on the panel — bigger than
   its buttons, so the space it fills is words rather than white */
body.mode-landscape .mg-card { font-size: calc(var(--ui) * 1.55); gap: .65em; }
body.mode-landscape .mg-kicker { font-size: calc(var(--ui) * .83); }
body.mode-landscape .mg-title { font-size: 1.55em; }
body.mode-landscape .mg-goal, body.mode-landscape .mg-line { font-size: 1em; }
body.mode-landscape .mg-hint { font-size: .85em; }
/* the cover page's buttons, on one line: Begin and beside it a skippable
   game's Skip — the pattern for every button (THE GAME'S BUTTON) */
.mg-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mg-start .mg-skip { align-self: center; }
body.mode-landscape .mg-start { gap: calc(var(--ui) * 1.1); }
body.mode-landscape .mg-card .mg-begin { min-width: 10.3em; }
/* a mini game's cover page and its result sit in the middle of the panel */
body.mode-landscape #storyPane.wide .mg-card {
  position: relative; flex: 1 0 auto;
  align-items: center; justify-content: center; text-align: center;
}
body.mode-landscape #storyPane.wide .mg-card :is(.mg-goal, .mg-line, .mg-hint) { max-width: 30em; }
/* MINIGAME goes to the panel's top-right corner, out of the words' way */
body.mode-landscape #storyPane.wide .mg-kicker { position: absolute; top: 0; right: 0; }
body.mode-landscape .mg-play { gap: calc(var(--ui) * .8); }
body.mode-landscape .mg-wrap { gap: calc(var(--ui) * .7); }

.shake { animation: shake .35s ease; }
@keyframes shake { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }

.mg-quota { display: flex; justify-content: space-between; align-items: center; background: #ffffff; border: 2px solid var(--ink); border-radius: 12px; padding: 9px 13px; font-size: .85rem; }
.mg-quota b { font-size: 1rem; }
.mg-quota b.over { color: var(--bad); }

/* allocation rows + planner options */
.mg-alloc, .mg-planner { display: flex; flex-direction: column; gap: 8px; }
.mg-alloc-row, .mg-opt {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: #ffffff; color: var(--ink); border: 2px solid var(--ink);
  border-radius: 12px; padding: 10px 12px; cursor: pointer; font-family: var(--font);
}
.mg-alloc-row .sw { width: 32px; height: 18px; border-radius: 10px; background: #ffffff; border: 2px solid var(--ink); position: relative; flex: none; transition: background .2s; }
.mg-alloc-row .sw::after { content: ""; position: absolute; top: 1.5px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); transition: left .2s; }
.mg-alloc-row.on .sw { background: var(--accent); }
.mg-alloc-row.on .sw::after { left: 15px; background: #ffffff; }
.mg-alloc-row .nm, .mg-opt .nm { flex: 1; font-weight: 700; font-size: .85rem; display: flex; flex-direction: column; }
.mg-alloc-row .nm small, .mg-opt .nm small { font-weight: 600; font-size: .72rem; color: var(--muted); }
.mg-alloc-row .cost, .mg-opt .cost { font-weight: 800; font-size: .78rem; color: var(--accent); white-space: nowrap; }
.mg-alloc-row:not(.on) .nm { opacity: .6; }
.mg-opt.on { border-width: 2.5px; background: var(--pale); box-shadow: 0 2px 0 var(--ink); }
.mg-group h4 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 6px 0 6px; }
.mg-group { display: flex; flex-direction: column; gap: 7px; }

/* the cool cloth */
.rc-zone {
  position: relative; height: 150px; border: 2.5px solid var(--ink); border-radius: 14px;
  background: #ffffff; overflow: hidden; touch-action: none; cursor: grab;
}
.rc-arm {
  position: absolute; left: 8%; right: 8%; top: 58%; height: 34px;
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 20px;
}
.rc-cloth {
  position: absolute; top: 34%; left: 50%; width: 74px; height: 52px;
  transform: translateX(-50%);
  background: var(--accent); border: 2.5px solid var(--ink); border-radius: 10px;
  transition: left .06s linear;
  pointer-events: none;
}
.rc-cloth::after { content: ""; position: absolute; inset: 8px 10px; border-top: 2px solid rgba(255,255,255,.6); border-bottom: 2px solid rgba(255,255,255,.6); }
.rc-drops { position: absolute; inset: 0; pointer-events: none; }
.rc-drop {
  position: absolute; top: 62%; width: 6px; height: 9px; border-radius: 50% 50% 60% 60%;
  background: var(--pale); border: 1.5px solid var(--ink);
  animation: dropFall .9s ease forwards;
}
@keyframes dropFall { 100% { transform: translateY(28px); opacity: 0; } }

/* the feed */
.fd-card { border: 2.5px solid var(--ink); border-radius: 16px; background: #ffffff; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 3px 0 var(--ink); }
.fd-who { font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.fd-img svg { width: 100%; height: auto; display: block; }
.fd-text { font-size: .88rem; line-height: 1.5; }
.fd-row { display: flex; gap: 10px; align-items: center; }
.fd-btn {
  width: 54px; height: 44px; border: 2.5px solid var(--ink); border-radius: 12px;
  background: #ffffff; font-size: 1.15rem; color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 0 var(--ink);
}
.fd-btn.on { background: var(--accent); color: #ffffff; }
.fd-row .btn { flex: 1; }

/* the match grid */
.mm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mm-cell {
  min-height: 62px; border: 2.5px solid var(--ink); border-radius: 12px;
  background: #ffffff; font-family: var(--font); font-weight: 800; font-size: 1.25rem;
  color: var(--ink); cursor: pointer; box-shadow: 0 2px 0 var(--ink);
}
.mm-cell.sel { background: var(--pale); transform: translateY(1px); }
.mm-cell.dead { background: var(--wash); color: var(--muted); box-shadow: none; border-style: dashed; cursor: default; }

/* pack the crate */
.pc-board-wrap { display: flex; justify-content: center; }
.pc-board {
  display: grid; grid-template-columns: repeat(5, 52px); grid-auto-rows: 52px; gap: 3px;
  background: #ffffff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 8px;
  position: relative;
}
@media (max-width: 380px) { .pc-board { grid-template-columns: repeat(5, 47px); grid-auto-rows: 47px; } }
.pc-cell { background: var(--paper); border: 1.8px dashed var(--wash2); border-radius: 7px; cursor: pointer; }
.pc-piece { border: 2.2px solid var(--ink); border-radius: 8px; cursor: pointer; color: var(--ink); font-family: var(--font); position: relative; }
.pc-piece.placed { z-index: 2; }
.pc-piece.placed i { font-size: .62rem; font-weight: 800; font-style: normal; }
.pc-tray { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-piece.tray {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 10px; min-height: 52px; box-shadow: 0 2px 0 var(--ink);
}
.pc-piece.tray.sel { outline: 3px solid var(--accent); outline-offset: 2px; }
.pc-piece.tray i { font-size: .66rem; font-weight: 800; font-style: normal; }
.pc-shape { display: grid; grid-template-columns: repeat(var(--pw), 9px); gap: 2px; }
.pc-shape b { width: 9px; height: 9px; border-radius: 2px; background: rgba(35,35,43,.3); }

/* cover the evening */
.ce-off { display: flex; gap: 8px; }
.ce-token {
  flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: #ffffff; border: 2px solid var(--ink); border-radius: 12px;
  padding: 9px 12px; cursor: pointer; color: var(--ink); font-family: var(--font);
}
.ce-token b { font-size: .85rem; }
.ce-token small { font-size: .7rem; color: var(--muted); }
.ce-token.off { opacity: .5; border-style: dashed; cursor: default; }
.ce-token.sel { background: var(--pale); box-shadow: 0 2px 0 var(--ink); }
.ce-tokens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ce-slots { display: flex; flex-direction: column; gap: 7px; }
.ce-slot {
  display: flex; align-items: center; gap: 12px; background: #ffffff;
  border: 2px dashed var(--wash2); border-radius: 12px; padding: 10px 14px;
  cursor: pointer; color: var(--ink); font-family: var(--font); min-height: 46px;
}
.ce-slot small { font-size: .74rem; font-weight: 800; color: var(--muted); width: 64px; text-align: left; }
.ce-slot b { font-size: .88rem; }
.ce-slot.full { border-style: solid; border-color: var(--ink); }
.ce-slot.ok { border-color: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* scratch card */
.sc-frame {
  position: relative; border: 2.5px solid var(--ink); border-radius: 8px; overflow: hidden;
  background: #ffffff; padding: 10px 10px 26px; box-shadow: 0 3px 0 var(--ink);
}
.sc-img { position: relative; }
.sc-img svg { width: 100%; height: auto; display: block; }
.sc-layer {
  position: absolute; inset: 10px 10px 26px;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr);
  touch-action: none; cursor: grab;
}
.sc-cell { background: var(--wash2); border: 1px solid rgba(35,35,43,.12); transition: opacity .3s ease; }
.sc-cell:nth-child(3n) { background: var(--wash); }
.sc-cell:nth-child(7n) { background: #bdbcb4; }
.sc-cell.gone { opacity: 0; pointer-events: none; }

/* jigsaw */
.jg-board {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 64px; gap: 4px;
  border: 2.5px solid var(--ink); border-radius: 10px; padding: 6px; background: #ffffff;
}
.jg-slot { border: 2px dashed var(--wash2); border-radius: 6px; overflow: hidden; padding: 0; background: var(--paper); cursor: pointer; }
.jg-slot.full { border-style: solid; border-color: var(--ink); cursor: default; }
.jg-tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.jg-piece { height: 60px; border: 2.5px solid var(--ink); border-radius: 8px; overflow: hidden; padding: 0; background: #ffffff; cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.jg-piece.sel { outline: 3px solid var(--accent); outline-offset: 2px; }
.jg-img, .jg-img svg { width: 100%; height: 100%; display: block; }

/* polaroid */
.pl-frame {
  width: min(270px, 78vw); margin: 0 auto; background: #ffffff;
  border: 2.5px solid var(--ink); border-radius: 6px; padding: 12px 12px 0;
  box-shadow: 0 4px 0 var(--ink); touch-action: none; cursor: grab;
  transition: transform .15s ease;
}
.pl-frame.done { box-shadow: 0 4px 0 var(--ink), 0 0 0 4px var(--pale); }
.pl-photo { position: relative; border: 2px solid var(--ink); border-radius: 3px; overflow: hidden; }
.pl-img svg { width: 100%; height: auto; display: block; }
.pl-fog { position: absolute; inset: 0; background: #b9b8b2; opacity: 1; transition: opacity .25s ease; }
.pl-strip { height: 56px; display: flex; align-items: center; justify-content: center; }
.pl-caption { font-family: var(--font); font-style: italic; font-size: 1rem; color: var(--ink); opacity: 0; transition: opacity .6s ease; }

/* registry check */
.rg-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: #ffffff; border: 2.5px solid var(--ink); border-radius: 14px; padding: 14px;
  box-shadow: 0 2px 0 var(--ink);
}
.rg-med { flex: none; }
.rg-info { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.rg-info b { font-size: .95rem; letter-spacing: .04em; }
.rg-info small { font-size: .78rem; color: var(--muted); line-height: 1.45; }
.rg-banner { min-height: 22px; font-family: var(--font); font-size: .78rem; font-weight: 700; padding: 0 4px; }
.rg-banner.ok { color: var(--accent); }
.rg-banner.bad { color: var(--bad); }
.rg-stamps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rg-stamp {
  border: 2.5px solid var(--ink); background: #ffffff; color: var(--ink);
  font-family: var(--font); font-weight: 700; font-size: .78rem; letter-spacing: .06em;
  border-radius: 10px; padding: 11px 6px; cursor: pointer; min-height: 44px;
  box-shadow: 0 2px 0 var(--ink);
}
.rg-stamp:active { transform: translateY(2px); box-shadow: none; }

/* consent ring */
.mg-consent { align-items: center; text-align: center; }
.mg-step-label { font-family: var(--font); font-size: 1.05rem; }
.mg-step-sub { font-size: .8rem; color: var(--muted); }
.mg-ring-stage { position: relative; width: min(230px, 60vw); cursor: pointer; }
.mg-ring { width: 100%; display: block; }
.mg-ring .band { fill: var(--pale); stroke: var(--ink); stroke-width: 2.5; opacity: .8; }
.mg-ring .pulse { fill: none; stroke: var(--accent); stroke-width: 4; }
.mg-ring .core { fill: var(--ink); }
.mg-ring-stage.good .band { fill: var(--accent); opacity: .5; }
.mg-ring-stage.bad .pulse { stroke: var(--bad); }
.mg-ring-msg { min-height: 22px; font-size: .85rem; color: var(--muted); font-style: italic; }

/* syllables */
.mg-echo { align-items: center; text-align: center; }
.st-slots { display: flex; align-items: center; justify-content: center; gap: 8px; }
.st-slots i { color: var(--muted); font-style: normal; }
.st-slot {
  min-width: 58px; height: 58px; border-radius: 14px; border: 2.5px dashed var(--wash2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font); font-weight: 700; font-size: 1.3rem; background: #ffffff;
}
.st-slot.full { border-style: solid; border-color: var(--ink); }
.st-tiles { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.st-tile {
  min-width: 64px; min-height: 56px; border-radius: 14px; border: 2.5px solid var(--ink);
  background: #ffffff; color: var(--ink);
  font-family: var(--font); font-weight: 700; font-size: 1.25rem; cursor: pointer;
  box-shadow: 0 2px 0 var(--ink);
}
.st-tile:disabled { opacity: .3; box-shadow: none; }
.st-tile:active { transform: translateY(2px); box-shadow: none; }

/* ============================================================
   PORTRAIT ROUTES (Collapse · Discipline · Transformation)
   Bigger visuals, bigger type, less text on screen.
============================================================ */
/* big art, but sized to the illustration's own 400:260 shape so the
   composition is not cropped away on tall phones */
#stage { height: clamp(190px, min(44vh, 70vw), 430px); }
.end-art { height: clamp(180px, min(40vh, 66vw), 400px); }

#story .para { font-size: 1.12rem; line-height: 1.62; margin-bottom: 14px; }
#story .sysnote { font-size: .95rem; }
.who-chip span { font-size: 1.16rem; }
.place-chip { font-size: .74rem; padding: 5px 12px; }
.choice .c-label { font-size: 1.06rem; }
.choice .c-sub { font-size: .86rem; }
.btn { font-size: 1.06rem; }
.end-body h2 { font-size: 1.95rem; }
.end-body > p { font-size: 1.05rem; line-height: 1.62; }
.tag-item p, .fn-card .fn-back { font-size: 1rem; line-height: 1.58; }
.mg-goal, .mg-line { font-size: 1rem; line-height: 1.6; }
.mg-title { font-size: 1.35rem; }
#clkText { font-size: 1.05rem; }
#clkWhen { font-size: 1.42rem; }

/* ============================================================
   LANDSCAPE 16:9 MODE — Continued Growth
   The background art IS the game environment; UI floats on it.
============================================================ */
#bgLayer { display: none; }

/* what is left of the screen beside or under the game view: empty */
body.mode-landscape { background: #0e1420; }

/* the picture stays inside the game view (--stage-w, --stage-h, below), which
   cuts off the little of it that its slow drift takes past the edges */
body.mode-landscape #bgFrame {
  position: fixed; inset: 0; margin: auto; z-index: 0;
  width: var(--stage-w); height: var(--stage-h);
  overflow: hidden; pointer-events: none;
}
body.mode-landscape #bgLayer {
  display: block;
  position: absolute; inset: 0; pointer-events: none;
  background-size: cover; background-position: center 55%;
  transform: scale(1.06);
  animation: bgDrift 46s ease-in-out infinite alternate;
  transition: filter .9s ease;
}
body.mode-landscape #bgLayer::after {
  content: ''; position: absolute; inset: 0;
  background: var(--bg-tint, transparent);
  transition: background .9s ease;
}
@keyframes bgDrift {
  0%   { transform: scale(1.06) translate3d(-.8%, .4%, 0); }
  100% { transform: scale(1.12) translate3d(.8%, -.6%, 0); }
}

/* time of day — one image, a whole day passing over it */
body.mode-landscape[data-mood="dawn"]   #bgLayer { filter: brightness(1.02) saturate(1.06); --bg-tint: linear-gradient(180deg, rgba(255,196,150,.16), rgba(120,140,200,.10)); }
body.mode-landscape[data-mood="morning"] #bgLayer { filter: brightness(1.06) saturate(1.0); --bg-tint: linear-gradient(180deg, rgba(255,240,220,.10), rgba(150,180,230,.08)); }
body.mode-landscape[data-mood="day"]    #bgLayer { filter: brightness(1.1) saturate(.95) contrast(1.02); --bg-tint: linear-gradient(180deg, rgba(255,255,255,.12), rgba(160,190,235,.10)); }
body.mode-landscape[data-mood="indoor"] #bgLayer { filter: brightness(.86) saturate(.7) blur(4px); --bg-tint: linear-gradient(180deg, rgba(40,50,80,.30), rgba(30,40,70,.42)); }
body.mode-landscape[data-mood="dusk"]   #bgLayer { filter: brightness(.94) saturate(1.14) hue-rotate(-8deg); --bg-tint: linear-gradient(180deg, rgba(255,150,90,.20), rgba(90,80,160,.26)); }
body.mode-landscape[data-mood="night"]  #bgLayer { filter: brightness(.52) saturate(.8) hue-rotate(-14deg); --bg-tint: linear-gradient(180deg, rgba(20,30,70,.46), rgba(10,15,40,.58)); }

/* ✏️  THE GAME VIEW — strictly 16:9 on every screen: the largest that fits the
   window as it is now, in its middle. Safari's bars showing on a phone leave
   874 × 292, so it is 519 × 292; with them gone, 874 × 402 and 714 × 402. The
   picture and everything in the game stay inside it, and the rest of the
   screen stays empty. --stage-w and --stage-h are its size. (--win-h: the
   window's height, as js/swipeup.js measures it on a phone.) */
body.mode-landscape {
  --stage-w: min(100vw, calc(var(--win-h, 100dvh) * 16 / 9));
  --stage-h: min(var(--win-h, 100dvh), calc(100vw * 9 / 16));
  --u: calc(var(--stage-w) / 100);          /* 1u = 1% of the canvas width: layout */
  /* 1ui = one step of type, padding, buttons and cards. It follows the
     canvas but eases off as the canvas shrinks — 1ui = 1u on a 1440px-wide
     canvas, about 1.45u on a phone — so small screens stay readable and
     every part grows or shrinks together, with no sudden jumps. */
  --ui: calc(var(--u) * .64 + 5.18px);
}
/* Fixed, so it stays still when a phone's page moves under it to send Safari's
   bars away (js/swipeup.js). `overflow: visible`: a dialog's shade lives in here
   and covers the whole screen, position: fixed, which should ignore the view's
   edges — but Safari cuts a fixed element off at an `overflow: hidden` parent
   that has a z-index (WebKit bug 160953). Each screen cuts its own overflow, so
   nothing leaves the view; nothing fixed may live inside a screen. */
body.mode-landscape #app {
  position: fixed; inset: 0; z-index: 1;
  max-width: none;
  width: var(--stage-w); height: var(--stage-h);
  margin: auto;
  overflow: visible;
  background: transparent;
  box-shadow: none; border-radius: 0;
}

body.mode-landscape .screen { padding: 0; }
body.mode-landscape #scr-play { display: none; }
body.mode-landscape #scr-play.active { display: block; position: relative; height: 100%; overflow: hidden; }

/* floating HUD */
body.mode-landscape #playbar {
  position: absolute; top: calc(var(--ui) * 2.2); left: calc(var(--ui) * 2.4);
  right: calc(var(--ui) * 2.4); z-index: 4;
  padding: 0; gap: calc(var(--ui) * 1.2); align-items: center;
}
body.mode-landscape .menu-btn {
  width: calc(var(--ui) * 3.4); height: calc(var(--ui) * 3.4);
  font-size: calc(var(--ui) * 1.5); border-radius: calc(var(--ui) * .9);
  background: rgba(255,255,255,.92); flex: none;
}
body.mode-landscape #playRoute {
  flex: none; background: rgba(255,255,255,.92);
  border: 2.5px solid var(--ink); border-radius: calc(var(--ui) * .9);
  padding: calc(var(--ui) * .5) calc(var(--ui) * 1.2);
  box-shadow: 0 2px 0 var(--ink);
}
body.mode-landscape #playRoute b { font-size: calc(var(--ui) * .95); }
body.mode-landscape #playRoute span { font-size: calc(var(--ui) * 1.1); color: var(--ink); }
body.mode-landscape #clockWrap {
  margin-left: auto; align-items: center; flex-direction: row; gap: calc(var(--ui) * 1);
  background: rgba(255,255,255,.92); border: 2.5px solid var(--ink);
  border-radius: calc(var(--ui) * .9); padding: calc(var(--ui) * .5) calc(var(--ui) * 1.2);
  box-shadow: 0 2px 0 var(--ink);
}
body.mode-landscape #clockSegs .seg { width: calc(var(--ui) * .9); height: calc(var(--ui) * .45); }
body.mode-landscape #clockLabel { font-size: calc(var(--ui) * 1.15); }
body.mode-landscape #noteCount { font-size: calc(var(--ui) * .95); }
/* the time and the indicators beside it: one height, whichever icon a chip
   holds (a ⚡'s line is taller, which used to stretch its row on a phone) */
body.mode-landscape { --hud-h: max(31px, calc(var(--ui) * 2.52 + 5px)); }
body.mode-landscape #clockWrap,
body.mode-landscape #playbar #meters.in-head .chip { height: var(--hud-h); padding-block: 0; }

/* meters float under the HUD */
body.mode-landscape #meters {
  position: absolute; top: calc(var(--ui) * 7.4); left: calc(var(--ui) * 2.4);
  z-index: 4; width: calc(var(--u) * 44); padding: 0; gap: calc(var(--ui) * .8);
}
body.mode-landscape .chip {
  background: rgba(255,255,255,.92); border-width: 2.5px;
  padding: calc(var(--ui) * .55) calc(var(--ui) * .6);
  font-size: calc(var(--ui) * .95); gap: calc(var(--ui) * .4);
}
body.mode-landscape .chip b { font-size: calc(var(--ui) * 1.35); }
body.mode-landscape .chip .float { font-size: calc(var(--ui) * 1.15); top: calc(var(--ui) * -.6); }

/* the scene SVG is replaced by the world itself */
body.mode-landscape #stage { display: none; }

/* story panel — a window onto the street, not a web page. `top` and
   `bottom` are only its limits: the panel stands on the bottom one and is
   as tall as its words and choices, so a short page gets a short panel and
   more grows it upward. Past the top the words and the choices scroll together,
   as one (#storyScroll), with the ▾ more hint; the picture never moves. */
body.mode-landscape #storyPane {
  position: absolute; z-index: 3;
  top: calc(var(--ui) * 12.4); bottom: calc(var(--ui) * 3.2);
  left: calc(var(--ui) * 2.4); width: calc(var(--u) * 46);
  padding: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
}
body.mode-landscape #storyScroll {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
}
body.mode-landscape #story {
  flex: none;
  background: rgba(250,249,245,.93);
  border: calc(var(--ui) * .22) solid var(--ink);
  border-radius: calc(var(--ui) * 1.1);
  padding: calc(var(--ui) * 2) calc(var(--ui) * 2.2);
  box-shadow: 0 calc(var(--ui) * .3) 0 var(--ink), 0 calc(var(--ui) * 1.4) calc(var(--ui) * 3) rgba(10,16,30,.34);
  backdrop-filter: blur(3px);
}
/* no extra gap under the last line: the text ends near the panel's bottom edge */
body.mode-landscape #storyPane #story > :last-child { margin-bottom: 0; }
body.mode-landscape #story .para {
  font-size: calc(var(--ui) * 1.32); line-height: 1.6;
  margin-bottom: calc(var(--ui) * 1.1);
}
body.mode-landscape #story .sysnote {
  font-size: calc(var(--ui) * 1.06); padding: calc(var(--ui) * .9) calc(var(--ui) * 1.1);
  border-radius: calc(var(--ui) * .8); margin-bottom: calc(var(--ui) * 1.1);
}
body.mode-landscape .who-chip { gap: calc(var(--ui) * 1); margin-bottom: calc(var(--ui) * 1.2); }
body.mode-landscape .who-chip svg { width: calc(var(--ui) * 4.6); height: calc(var(--ui) * 4.6); }
body.mode-landscape .who-chip span { font-size: calc(var(--ui) * 1.5); }

/* (the small padding keeps the last button's shadow, which the scrolling box
   would cut off) */
body.mode-landscape #actions {
  flex: none; margin-top: calc(var(--ui) * 1.2); gap: calc(var(--ui) * .9); padding-bottom: 2px;
}
body.mode-landscape #actions:empty { margin: 0; padding: 0; }

/* ✏️  THE GAME'S BUTTON — every button that moves the game on has one height
   and one scale, on every screen: a choice, Continue, a picture-only page's
   button, Begin, Skip, Next, a menu's. The pattern is a mini game's cover page
   (Begin and Skip mini game). A label that runs to two lines grows the button.
   --btn-size  its text, on the UI scale, so it follows the screen like the rest
   --btn-y     the padding above and below, in that text's size (.5 on a phone:
   --btn-x     beside it                     see PHONES at the end of this file)
   --btn-h     the height that comes to: the line, the padding, the border
   Left out on purpose: the share row (just below), and ☰, Menu, Minigames and
   ← Back, which stand in the screen's corners as small controls. */
body.mode-landscape {
  --btn-size: calc(var(--ui) * 1.4);
  --btn-y: .7;
  --btn-x: 1.9;
  --btn-h: calc(var(--btn-size) * (1.2 + 2 * var(--btn-y)) + 5px);
}
body.mode-landscape .btn {
  min-height: 0; font-size: var(--btn-size); line-height: 1.2;
  padding: calc(var(--btn-y) * 1em) calc(var(--btn-x) * 1em); border-radius: .8em;
}
/* one standing alone in a corner over a picture covers less of it, sideways
   only: Skip and Continue in a mini game, a picture-only page's button */
body.mode-landscape :is(#storySkip, .mg-full-corner, #scr-play.picture-only #actions) .btn { padding-inline: 1.3em; }
/* a choice is the same button across the panel, its words at the left */
body.mode-landscape .choice { background: rgba(255,255,255,.95); padding-inline: calc(var(--ui) * 1.5); }
body.mode-landscape .choice .c-label { font-size: 1em; }
body.mode-landscape .choice .c-sub { font-size: .7em; }
/* a row of its own, not a step of the game: Copy link and the networks, Copy */
body.mode-landscape :is(.sd-btns .sd-net, .sh-link .sh-copy) {
  font-size: calc(var(--ui) * 1.2); line-height: normal; padding: .68em 1.15em;
}
body.mode-landscape .link-btn { font-size: calc(var(--ui) * .92); padding: .4em .5em; }

/* place caption sits on the world, bottom-right of the canvas */
#scrollHint { display: none; }
body.mode-landscape #scrollHint {
  position: absolute; z-index: 2; left: 50%; translate: -50% 0; bottom: calc(var(--ui) * .5);
  background: rgba(255,255,255,.94); border: 2px solid var(--ink);
  border-radius: 999px; padding: calc(var(--ui) * .3) calc(var(--ui) * 1.1);
  font-size: calc(var(--ui) * .82); font-weight: 800; letter-spacing: .1em;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
body.mode-landscape #storyPane.has-more #scrollHint { display: block; opacity: 1; animation: hintBob 1.8s ease-in-out infinite; }
@keyframes hintBob { 50% { transform: translateY(calc(var(--ui) * .3)); } }
/* the words and choices fade where they run on below; a mini game scrolls by
   itself, in its own panel */
body.mode-landscape #storyPane.has-more:not(.wide) #storyScroll {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--ui) * 4.5), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--ui) * 4.5), transparent);
}
body.mode-landscape #storyPane.wide.has-more #story {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 3.4em), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 3.4em), transparent);
}

body.mode-landscape #scr-play .place-chip {
  position: absolute; left: auto; top: auto;
  right: calc(var(--ui) * 2.4); bottom: calc(var(--ui) * 2.4);
  z-index: 4;
  background: rgba(255,255,255,.92);
  font-size: calc(var(--ui) * .98); letter-spacing: .14em;
  padding: calc(var(--ui) * .6) calc(var(--ui) * 1.3);
  border-width: 2.5px;
}

/* results + clock screens keep the world behind them */
body.mode-landscape #scr-end, body.mode-landscape #scr-clock, body.mode-landscape #scr-shared {
  align-items: center; overflow-y: auto;
}
body.mode-landscape #scr-end .end-art { display: none; }
body.mode-landscape .end-body, body.mode-landscape .clk-inner {
  width: calc(var(--u) * 66); margin: calc(var(--ui) * 3) auto;
  background: rgba(250,249,245,.95);
  border: calc(var(--ui) * .22) solid var(--ink);
  border-radius: calc(var(--ui) * 1.2);
  padding: calc(var(--ui) * 2.6);
  box-shadow: 0 calc(var(--ui) * 1.4) calc(var(--ui) * 3) rgba(10,16,30,.34);
  gap: calc(var(--ui) * 1.1);
}
body.mode-landscape .end-body h2 { font-size: calc(var(--ui) * 2.4); }
body.mode-landscape .end-body > p { font-size: calc(var(--ui) * 1.16); line-height: 1.6; }
body.mode-landscape #clkPanel { height: calc(var(--u) * 26); }
body.mode-landscape #clkWhen { font-size: calc(var(--ui) * 1.9); }
body.mode-landscape #clkText { font-size: calc(var(--ui) * 1.16); min-height: calc(var(--ui) * 7); }
body.mode-landscape .exit-box {
  left: 50%; transform: translate(-50%, -50%); width: calc(var(--ui) * 46);
  padding: calc(var(--ui) * 2.2); border-radius: calc(var(--ui) * 1.2);
}

/* ---- THE EMPTY SIDES — a phone in a browser: a swipe up in the empty space
   beside the game view moves the page, which sends Safari's bars away, and the
   page then stops moving (js/swipeup.js). #swipeRunway is how far the page can
   move; two small arrows ask for the swipe while the bars are showing.
   touch-action is what keeps a finger on the game from moving the page, without
   touching its taps: only a box that scrolls inside the game takes the gesture
   (a box with overflow: auto answers for itself), and a pinch still zooms ---- */
#swipeRunway {
  position: absolute; left: 0; top: 0; width: 1px; height: calc(100vh + 240px);
  visibility: hidden; pointer-events: none;
}
html.swipe-open { scrollbar-width: none; }
html:is(.swipe-open, .swipe-locked) body.mode-landscape #app { touch-action: pinch-zoom; }
html.swipe-locked, html.swipe-locked body { overflow: hidden; touch-action: pinch-zoom; }
.swipe-hint { display: none; }
html.swipe-open body.mode-landscape .swipe-hint {
  display: flex; align-items: center; justify-content: center;
  position: fixed; top: 0; bottom: 0; z-index: 0; padding: 0 8px;
  width: calc((100vw - var(--stage-w)) / 2);
  pointer-events: none;
}
/* (the arrows keep clear of the phone's camera, on whichever side it is) */
html.swipe-open body.mode-landscape .swipe-left { left: 0; padding-left: max(8px, env(safe-area-inset-left)); }
html.swipe-open body.mode-landscape .swipe-right { right: 0; padding-right: max(8px, env(safe-area-inset-right)); }
/* two chevrons, rising */
.swipe-chev {
  position: relative; width: 22px; height: 26px;
  animation: swipeRise 1.6s ease-in-out infinite;
}
.swipe-chev::before, .swipe-chev::after {
  content: ''; position: absolute; left: 4px; width: 14px; height: 14px;
  border: solid #ffffff; border-width: 2.5px 0 0 2.5px; border-radius: 2px 0 0 0;
  transform: rotate(45deg);
}
.swipe-chev::before { top: 2px; }
.swipe-chev::after { top: 11px; opacity: .55; }
@keyframes swipeRise { 0%, 100% { transform: translateY(5px); opacity: .6; } 50% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .swipe-chev { animation: none; } }
/* what a phone is doing, in the left side: ?swipe=debug on the game's address */
.swipe-debug {
  position: fixed; left: 2px; top: 2px; z-index: 95; max-width: 170px;
  font: 10px / 1.3 ui-monospace, Menlo, monospace; color: #9ff0c8; white-space: pre-wrap;
  pointer-events: none;
}

/* rotate prompt — landscape story on a portrait phone */
#rotateNote { display: none; }
@media (orientation: portrait) and (max-width: 950px) {
  body.mode-landscape #rotateNote {
    display: flex; position: fixed; inset: 0; z-index: 90;
    flex-direction: column; align-items: center; justify-content: center; gap: 22px;
    background: #0e1420; color: var(--paper); text-align: center; padding: 30px;
  }
  body.mode-landscape #app, body.mode-landscape #bgLayer { visibility: hidden; }
}
.rot-icon {
  width: 92px; height: 148px; border: 5px solid var(--paper); border-radius: 14px;
  animation: rotHint 2.4s ease-in-out infinite;
}
@keyframes rotHint {
  0%, 30% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}
#rotateNote h3 { font-family: var(--font); font-size: clamp(1.1rem, 5vw, 1.5rem); max-width: 88vw; text-align: center; }
#rotateNote p { font-size: clamp(.9rem, 3.8vw, 1.05rem); max-width: 28ch; opacity: .85; line-height: 1.5; }

/* Phones in landscape: the 16:9 canvas is short, so the same layout
   needs proportionally larger type to stay readable. */
@media (max-height: 520px) {
  body.mode-landscape #storyPane {
    width: calc(var(--u) * 56);
  }
  body.mode-landscape #meters { width: calc(var(--u) * 52); }
  body.mode-landscape .end-body, body.mode-landscape .clk-inner { width: calc(var(--u) * 78); }
}

/* ---------- small screens / reduced motion ---------- */
@media (max-height: 640px) {
  body:not(.mode-landscape) #stage,
  body:not(.mode-landscape) .end-art,
  body:not(.mode-landscape) #clkPanel { height: 168px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  body.mode-landscape #bgLayer { animation: none; transform: scale(1.02); }
}

/* ============================================================
   TRANSFORMATION ADDITIONS — configurable art, badges, CareNet
============================================================ */

/* placeholder world while the background art is still being made —
   ✏️  one gradient per future, so the stand-in already wears the
   route's colour (--ph1 → --ph2 → --ph3, dark to light) */
body                   { --ph1: #3a3357; --ph2: #55496f; --ph3: #8f7bd8; }
body.th-growth         { --ph1: #1e3550; --ph2: #2f5a80; --ph3: #7fb6dd; }
body.th-collapse       { --ph1: #4a2a1c; --ph2: #7a4526; --ph3: #e0a06c; }
body.th-discipline     { --ph1: #1f3f34; --ph2: #2f6350; --ph3: #7fc6a2; }
body.th-transformation { --ph1: #3a3357; --ph2: #55496f; --ph3: #8f7bd8; }
#bgLayer.placeholder {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 22px, transparent 22px 44px),
    linear-gradient(160deg, var(--ph1) 0%, var(--ph2) 45%, var(--ph3) 100%);
}
/* the placeholder's name: plain text painted on the background itself,
   above the image and behind every UI layer — no box, no border */
#bgKeyTag {
  display: none; position: absolute;
  top: 50%; left: 72%; transform: translate(-50%, -50%);
  background: none; border: 0; padding: 0;
  font-family: var(--font); font-size: clamp(1rem, 2.6vw, 2rem);
  font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.42); white-space: nowrap;
  pointer-events: none; user-select: none;
}

/* node id + demo version, bottom-left of every screen */
#devTag {
  position: fixed; left: 12px; bottom: 10px; z-index: 7;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: .7rem; letter-spacing: .08em;
  color: var(--muted); pointer-events: none; opacity: .85;
}
#devTag #devNode {
  display: none; background: var(--ink); color: var(--paper);
  border-radius: 5px; padding: 2px 7px; font-weight: 700;
}
#devTag.has-node #devNode { display: inline-block; }
body.mode-landscape #devTag { color: rgba(255,255,255,.9); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
body.mode-landscape #devTag #devNode { background: rgba(255,255,255,.92); color: var(--ink); text-shadow: none; }
/* pictures added or changed since tools/pictures.js last ran — only ever
   on your own computer (Pictures.warn in js/pictures.js) */
#devTag #devPics {
  background: #ffd166; color: #2b2100; text-shadow: none;
  border-radius: 5px; padding: 2px 7px; font-weight: 700; letter-spacing: .02em;
}

/* ---- toast — Care Badge Unlocked: the badge's picture on the left, the
   line and the badge's name in the middle, a ✕ on the right that closes
   it (Game.toast in js/engine.js). Several at once stack, top centre, and
   leave one at a time from the top, the rest moving up — how long they
   stay: TOAST_MS and TOAST_MORE_MS in js/util.js. They stay on their own
   page only. The share card's "Link copied" is one too, without the ✕.
   ✏️  TEXT SIZE: --toast-size is the "Care Badge Unlocked" line; the
       badge's name under it is --toast-name times that (.9 = 90 %). It
       grows with the screen like the rest of the game (--ui), and never
       drops under its px floor, so a phone reads it as well. The picture,
       padding and corners follow it.
   ✏️  MAXIMUM WIDTH: --toast-wrap, in em of the "Care Badge Unlocked"
       line, so the same names wrap on every screen. A name longer than
       that runs onto a second line (and a third, if it needs one), its
       lines about equal. A toast is always just as wide as its words: a
       box doesn't draw in round words that wrap by itself, so Game.fitToast
       does it, or the room left over would stand before the ✕. Each toast
       has its own width, alone or in a stack. ---- */
.toast-stack {
  --toast-size: max(15px, calc(var(--ui, 11px) * 1.3));
  --toast-name: .9;
  --toast-wrap: 34em;
  position: absolute; left: 50%; top: calc(var(--ui, 11px) * 1.2); transform: translateX(-50%);
  z-index: 60; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--ui, 11px) * .5);
  width: max-content; max-width: 92%;
}
.toast {
  max-width: var(--toast-wrap);
  font-size: var(--toast-size); line-height: 1.25;
  transform: translateY(-16px);
  background: #ffffff; border: 2.5px solid var(--ink); border-radius: .9em;
  box-shadow: 0 4px 0 var(--ink), 0 14px 34px rgba(10,16,30,.3);
  padding: .65em 1.1em .65em .85em; text-align: left;
  display: flex; align-items: center; gap: .7em;
  opacity: 0; transition: opacity .3s ease, transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.toast.in { opacity: 1; transform: none; }
.toast-img { flex: none; width: 2.7em; height: 2.7em; object-fit: contain; }
.toast-text { display: flex; flex-direction: column; min-width: 0; }
.toast b { color: var(--accent); }
.toast .toast-sub {
  display: block; margin-top: .2em; font-size: calc(var(--toast-name) * 1em); line-height: 1.3;
  color: var(--muted); font-weight: 600;
  text-wrap: balance;                   /* no single word left alone on the second line */
}
/* the ✕, at the right, in the middle of the toast's height: it closes the
   toast at once (Game.closeToast). Only the ✕ takes a click — the rest of
   the toast lets clicks through to the page under it. */
.toast.closable { padding-right: .45em; }
.toast-x {
  flex: none; position: relative; width: 2.2em; height: 2.2em; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; color: var(--muted);
  cursor: pointer; pointer-events: auto;
  transition: background-color .15s ease, color .15s ease;
}
.toast-x svg { display: block; width: 1em; height: 1em; }
.toast-x:hover { background: var(--wash); color: var(--ink); }
.toast-x:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 1px; }
.toast.leaving .toast-x { pointer-events: none; }
/* on a touch screen, a finger-sized target round the same ✕ */
@media (pointer: coarse) {
  .toast-x::after { content: ''; position: absolute; inset: -.45em; border-radius: 50%; }
}

/* indicator help tooltips */
.chip .help {
  width: 17px; height: 17px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--muted); background: transparent; color: var(--muted);
  font-size: .66rem; font-weight: 800; line-height: 1; cursor: help; position: relative;
}
.chip .help .tip {
  display: none; position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--ink); color: var(--paper); border-radius: 8px;
  padding: 8px 11px; width: max-content; max-width: 230px;
  font-size: .74rem; font-weight: 600; letter-spacing: 0; line-height: 1.45;
  text-align: left; white-space: normal; z-index: 30;
}
.chip .help:hover .tip, .chip .help:focus .tip { display: block; }

/* stacked indicators, so long names stay fully visible */
#meters.stack { flex-direction: column; align-items: stretch; gap: 6px; }
#meters.stack .chip { justify-content: flex-start; gap: 8px; padding: 7px 12px; }
#meters.stack .chip .nm { flex: 1; text-align: left; }
body.mode-landscape #meters.stack { width: calc(var(--u) * 26); }
body.mode-landscape #meters.stack .chip { font-size: calc(var(--ui) * 1); }
body.mode-landscape #meters.stack .chip b { font-size: calc(var(--ui) * 1.3); min-width: calc(var(--ui) * 1.4); text-align: center; }
body.mode-landscape #meters.stack .help { width: calc(var(--ui) * 1.4); height: calc(var(--ui) * 1.4); font-size: calc(var(--ui) * .78); }
body.mode-landscape #storyPane { top: calc(var(--ui) * 20.5); }
body.mode-landscape #meters:not(.stack) ~ #storyPane { top: calc(var(--ui) * 12.4); }
@media (max-height: 520px) {
  body.mode-landscape #meters.stack { width: calc(var(--u) * 30); }
}

/* indicators riding in the top bar, on one line with ☰, route and clock
   (engine.js moves #meters into #playbar when metersLayout is 'header') */
#playbar #meters.in-head {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  flex: 1; min-width: 0; justify-content: flex-end;
  padding: 0; gap: 6px;
}
#playbar #meters.in-head .chip { flex: none; white-space: nowrap; }
body.mode-landscape #playbar #meters.in-head {
  position: static; width: auto; gap: calc(var(--ui) * .7);
}
body.mode-landscape #playbar #meters.in-head .chip {
  border-width: 2.5px; box-shadow: 0 2px 0 var(--ink);
  border-radius: calc(var(--ui) * .9);
  padding: calc(var(--ui) * .5) calc(var(--ui) * 1);
  font-size: calc(var(--ui) * .95); gap: calc(var(--ui) * .45);
}
body.mode-landscape #playbar #meters.in-head .chip b { font-size: calc(var(--ui) * 1.3); }
body.mode-landscape #playbar #meters.in-head .help {
  width: calc(var(--ui) * 1.4); height: calc(var(--ui) * 1.4); font-size: calc(var(--ui) * .78);
}
body.mode-landscape #playbar #meters.in-head .help .tip {
  bottom: auto; top: calc(100% + calc(var(--ui) * .6));
  font-size: calc(var(--ui) * .95); max-width: calc(var(--ui) * 24);
}
/* nothing sits under the bar any more, so the story panel moves up */
body.mode-landscape.meters-head #storyPane { top: calc(var(--ui) * 7.8); }
@media (max-height: 520px) {
  /* short canvas: keep one line — the ? tooltip still names each one */
  body.mode-landscape #playbar #meters.in-head .chip .nm { display: none; }
}

/* scene heading (e.g. "The City Before Sunrise") */
.scene-heading {
  font-family: var(--font); font-size: 1.5rem; line-height: 1.15;
  margin-bottom: 10px; animation: paraIn .4s ease backwards;
}
body.mode-landscape .scene-heading { font-size: calc(var(--ui) * 2.1); margin-bottom: calc(var(--ui) * 1); }

/* two-section story card on the select screen */
.route-card.rc-split .rc-sec { padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.route-card.rc-split .rc-sec-top { border-bottom: 2px dashed var(--wash2); }
.route-card.rc-split .rc-blurb { font-size: .8rem; line-height: 1.5; color: var(--muted); }
.route-card.rc-split h3 { font-family: var(--font); font-size: 1.3rem; }
.route-card.rc-split .rc-meta { margin-top: 6px; }

/* ---- in-world panels ---- */
.cnet, .idcard, .datawarn {
  border: 2.5px solid var(--ink); border-radius: 0.88em; background: #ffffff;
  margin-top: 0.76em; animation: paraIn .45s ease backwards;
}
.cnet-top {
  display: flex; align-items: baseline; gap: 0.63em;
  border-bottom: 2px solid var(--ink); padding: 0.57em 0.88em;
  background: var(--pale); border-radius: 0.69em 0.69em 0 0;
}
.cnet-top b { font-family: var(--font); font-size: 1.05em; }
.cnet-top span { font-size: .7em; font-weight: 800; letter-spacing: .16em; color: var(--muted); }
.cnet-stop { display: flex; gap: 0.88em; padding: 0.69em 0.88em; align-items: baseline; }
.cnet-stop + .cnet-stop { border-top: 1.5px dashed var(--wash2); }
.cnet-time { font-family: var(--font); font-weight: 700; font-size: 1em; color: var(--accent); }
.cnet-what { display: flex; flex-direction: column; font-size: .88em; color: var(--muted); }
.cnet-what b { color: var(--ink); font-size: .95em; }

.idcard { display: flex; gap: 0.88em; padding: 0.88em; align-items: center; }
.idc-photo { flex: none; border: 2px solid var(--ink); border-radius: 0.63em; overflow: hidden; }
.idc-photo svg { display: block; }
.idc-info { display: flex; flex-direction: column; gap: 0.13em; }
.idc-org { font-size: .64em; font-weight: 800; letter-spacing: .14em; color: var(--accent); }
.idc-info > b { font-family: var(--font); font-size: 1.35em; }
.idc-role { font-size: .85em; color: var(--muted); }
.idc-rows { display: flex; gap: 1.05em; margin-top: 0.53em; font-size: .72em; color: var(--muted); font-family: var(--font); }
.idc-rows b { color: var(--ink); }

.datawarn { display: flex; gap: 0.76em; padding: 0.82em 0.95em; border-color: var(--bad); background: #fff4f1; }
.dw-ic {
  flex: none; width: 1.72em; height: 1.72em; border-radius: 50%;
  background: var(--bad); color: #fff; font-weight: 800; font-size: 1.1em;
  display: grid; place-items: center;
}
.datawarn b { color: var(--bad); font-size: .82em; letter-spacing: .1em; }
.datawarn p { font-size: .9em; margin-top: 0.14em; }

body.mode-landscape .cnet, body.mode-landscape .idcard, body.mode-landscape .datawarn { font-size: calc(var(--ui) * 1.1); }
body.mode-landscape .cnet-what b, body.mode-landscape .idc-info > b { font-size: 1.3em; }
.idc-photo svg { display: block; width: 5.8em; height: 5.8em; }


/* ---- care badges on the results page — each one folds open ---- */
.badge-grid { display: flex; flex-direction: column; gap: 8px; }
.badge-item {
  background: #ffffff; border: 2px solid var(--ink); border-radius: 12px;
}
.badge-item > summary {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  padding: 11px 13px; list-style: none;
}
.badge-item > summary::-webkit-details-marker { display: none; }
.badge-item .bi-mark { color: var(--accent); font-size: 1.05rem; line-height: 1.2; flex: none; }
.badge-item b { flex: 1; font-size: .86rem; line-height: 1.4; }
.badge-item .bi-chev {
  flex: none; color: var(--ink); font-size: .95rem; line-height: 1.1; opacity: .7;
  transition: transform .2s ease;
}
body.mode-landscape .badge-item .bi-chev { font-size: calc(var(--ui) * 1.3); }
body.mode-landscape .badge-item b { font-size: calc(var(--ui) * 1.05); }
body.mode-landscape .badge-item p { font-size: calc(var(--ui) * 1); }
.badge-item[open] .bi-chev { transform: rotate(180deg); }
.badge-item p {
  font-size: .8rem; line-height: 1.5; color: var(--muted);
  padding: 0 13px 12px calc(13px + 1.05rem + 11px);
  animation: paraIn .3s ease;
}
.badge-item.locked { opacity: .42; border-style: dashed; box-shadow: none; }
.badge-item.locked .bi-mark { color: var(--muted); }

/* ---- MG1 Wake Up the City ---- */
.wk-stage { position: relative; border: 2.5px solid var(--ink); border-radius: 0.85em; overflow: hidden; background: #101a33; }
.wk-map { width: 100%; display: block; }
.wk-ground { fill: #131f3c; }
.wk-roads path { stroke: #2b3d68; stroke-width: 9; fill: none; stroke-linecap: round; }
.wk-blocks rect { fill: #1b2a4d; stroke: #2b3d68; stroke-width: 2; }
.wk-trail { stroke: #8fd4b4; stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wk-pulse { fill: #8fd4b4; }
.wk-node circle { fill: #22335c; stroke: #3f5590; stroke-width: 3; }
.wk-node text { fill: #7d92c4; font-family: var(--font); font-size: 24px; text-anchor: middle; font-weight: 700; }
.wk-node .wk-ring { fill: none; stroke: transparent; }
.wk-node.ready { cursor: pointer; }
.wk-node.ready circle:first-child { fill: #8fd4b4; stroke: #ffffff; }
.wk-node.ready text { fill: #10203c; }
.wk-node.ready .wk-ring { stroke: #8fd4b4; animation: wkPing 1.4s ease-out infinite; }
.wk-node.on circle:first-child { fill: #f2c98a; stroke: #fff2dc; }
.wk-node.on text { fill: #3a2a14; }
@keyframes wkPing { 0% { r: 26; opacity: .9; } 100% { r: 46; opacity: 0; } }
.wk-stage.lit-1 .wk-ground { fill: #16223f; } .wk-stage.lit-2 .wk-ground { fill: #1d2743; }
.wk-stage.lit-3 .wk-ground { fill: #2b2c46; } .wk-stage.lit-4 .wk-ground { fill: #4a3a52; }
.wk-label {
  position: absolute; left: 0.91em; bottom: 0.91em;
  background: rgba(255,255,255,.94); border: 2px solid var(--ink); border-radius: 999px;
  padding: 0.38em 0.98em; font-size: .8em; font-weight: 800;
}
.wk-list { display: flex; flex-direction: column; gap: 0.36em; }
.wk-item { display: flex; align-items: center; gap: .7em; background: #ffffff; border: 2px solid var(--ink); border-radius: 0.6em; padding: 0.48em 0.72em; animation: paraIn .35s ease; }
/* the same number, in the same colours, as the lit node on the map */
.wk-num {
  flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%;
  background: #f2c98a; border: 2px solid var(--ink); color: #3a2a14; font-family: var(--font); font-weight: 700;
}
.wk-text { display: flex; flex-direction: column; min-width: 0; }
.wk-item b { font-size: .95em; }
.wk-fx { font-size: .88em; color: var(--accent); font-weight: 700; }

body.mode-landscape .wk-play { font-size: calc(var(--ui) * 1.4); }

/* skip control on mini games — on a cover page it sits beside Begin (.mg-start);
   once the game starts, minigames.js moves it to #storySkip, a slot right under
   the story panel, so it sits in the panel's bottom-right corner and stays there
   while the game scrolls. The panel keeps a strip clear for it. */
.mg-wrap { display: flex; flex-direction: column; gap: 10px; }
.mg-skip { align-self: flex-end; }
#storySkip { display: flex; justify-content: flex-end; margin-top: 10px; }
#storySkip:empty { display: none; }
body.mode-landscape #storySkip { flex: none; position: relative; z-index: 1; height: 0; margin: 0; }
/* whatever stands in the corner — the Skip, or a game's own Continue */
body.mode-landscape #storySkip .btn {
  position: absolute; margin: 0; white-space: nowrap;
  right: calc(var(--pad-x, calc(var(--ui) * 2.2)) + var(--ui) * .22);
  bottom: calc(var(--pad-y, calc(var(--ui) * 2)) + var(--ui) * .22);
}
/* the strip: the button's height and --skip-gap */
body.mode-landscape #storyPane:has(> #storySkip:not(:empty)) #story {
  padding-bottom: calc(var(--pad-y, calc(var(--ui) * 2)) + var(--btn-h) + var(--skip-gap, calc(var(--ui) * .7)));
}

/* mini games get the whole screen, not the narrow story column: the panel
   runs from the ☰ across to the clock, and from its bottom edge up to just
   under the top bar. The ← Back pill simply overlaps it. */
body.mode-landscape #storyPane.wide {
  left: calc(var(--ui) * 2.4); right: calc(var(--ui) * 2.4); width: auto;
  top: calc(var(--ui) * 6.6);
  --pad-y: calc(var(--ui) * 1.8); --pad-x: calc(var(--ui) * 2); --skip-gap: calc(var(--ui) * .7);
}
/* the panel fills that space, and the game fills the panel, scrolling inside
   its frame so the Skip in the corner stays where it is */
body.mode-landscape #storyPane.wide #storyScroll { flex: 1 1 auto; overflow: hidden; }
body.mode-landscape #storyPane.wide #story {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: var(--pad-y) var(--pad-x);
}
body.mode-landscape #storyPane.wide :is(.mg-holder, .mg-wrap, .mg-slot, .hc-play) {
  flex: 1 0 auto; display: flex; flex-direction: column;
}
body.mode-landscape #storyPane.wide .wk-stage { display: flex; justify-content: center; }
body.mode-landscape #storyPane.wide .wk-map { max-height: calc(var(--u) * 25); }
body.mode-landscape #storyPane.wide .wk-list { display: grid; grid-template-columns: 1fr 1fr; }
/* ============================================================
   DISCIPLINE ADDITIONS — band/platform panels + the three
   mini games of the Discipline gameflow document.
   Each block sets one base font-size and sizes its parts in em,
   so the same markup scales with the 16:9 canvas in landscape.
============================================================ */

/* ---- in-world panels: wristband, permit, task list, rating ---- */
.band, .permit, .tasks, .rating {
  font-size: .88rem;
  border: 2.5px solid var(--ink); border-radius: 14px; background: #ffffff;
  margin-top: 12px; animation: paraIn .45s ease backwards; overflow: hidden;
}
body.mode-landscape .band, body.mode-landscape .permit,
body.mode-landscape .tasks, body.mode-landscape .rating { font-size: calc(var(--ui) * 1.1); }

.band-top {
  display: flex; align-items: baseline; gap: .7em;
  border-bottom: 2px solid var(--ink); padding: .7em 1em; background: var(--pale);
}
.band-top b { font-family: var(--font); font-size: 1.2em; }
.band-top span { font-size: .74em; font-weight: 800; letter-spacing: .14em; color: var(--muted); }
.band-row, .band-stop { display: flex; gap: .9em; padding: .7em 1em; align-items: baseline; }
.band-row + .band-row, .band-stop + .band-stop { border-top: 1.5px dashed var(--wash2); }
.band-row span { flex: 1; color: var(--muted); }
.band-row b { color: var(--ink); }
.band-time { font-family: var(--font); font-weight: 700; color: var(--accent); min-width: 6em; }
.band-what { color: var(--ink); }

.pm-route { display: flex; align-items: center; gap: .8em; padding: .8em 1em; font-weight: 700; }
.pm-route i { color: var(--accent); font-style: normal; font-weight: 800; }
.pm-lead { padding: 0 1em; }
.pm-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: .3em .6em;
  padding: .8em 1em; align-items: baseline;
}
.pm-grid .pm-h { font-size: .72em; font-weight: 800; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.pm-grid b { font-family: var(--font); color: var(--accent); }
.pm-grid span:not(.pm-h) { font-family: var(--font); color: var(--muted); }
.pm-foot { padding: 0 1em 1em; font-size: .92em; color: var(--muted); }
.pm-reserve {
  margin: 0 1em 1em; padding: .7em; border-radius: 10px; text-align: center;
  font-weight: 800; letter-spacing: .14em; font-size: .88em;
}
.pm-reserve.open { background: var(--pale); border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.pm-reserve.grey { background: var(--wash); border: 2px dashed var(--wash2); color: var(--muted); }

.tsk-row { display: flex; align-items: center; gap: .8em; padding: .6em 1em; }
.tsk-row + .tsk-row { border-top: 1.5px dashed var(--wash2); }
.tsk-box { width: .9em; height: .9em; flex: none; border: 2px solid var(--ink); border-radius: 3px; }

.rating { display: flex; flex-direction: column; align-items: center; gap: .3em; padding: 1em; }
.rt-stars { font-size: 1.9em; letter-spacing: .2em; color: var(--accent); line-height: 1.1; }
.rating span { font-size: .92em; color: var(--muted); text-align: center; }

/* ---- MG2 Complete the Sea Postcard: its picture (PIC in js/minigames.js)
   cut into six tiles on a postcard, a white border round the picture. A
   tile always shows its own part of the picture and glides to whatever slot
   it is swapped into; the small gaps between them close once all six are
   home. The card takes all the height the panel leaves, at its own shape:
   --w is its width, the most that fits both across and down ---- */
.pc-play { align-items: center; font-size: .9rem; }
body.mode-landscape .pc-play { font-size: calc(var(--ui) * 1.1); }
body.mode-landscape #storyPane.wide .pc-play { flex: 1 0 auto; }
.pc-stage {
  align-self: stretch; flex: 1 1 0; min-height: 12em;
  container-type: size; display: grid; place-items: center;
}
.pc-card {
  /* border-box: card height = .593 × width (the 16:9 picture, 3.5% border
     each side) + its 2.5px borders; a few px spare for the shadow */
  --w: min(100cqw - 8px, (100cqh - 14px) / .593);
  width: var(--w); padding: calc(var(--w) * .035);
  background: #fffdf8; border: 2.5px solid var(--ink); border-radius: .5em;
  box-shadow: 0 3px 0 var(--ink), 0 .8em 1.8em rgba(35, 35, 43, .16);
}
.pc-pic { position: relative; aspect-ratio: 16 / 9; }
.pc-tile {
  position: absolute; margin: 0; padding: 0; border: 0; cursor: pointer;
  left: calc(var(--x) * 100% / var(--cols)); top: calc(var(--y) * 100% / var(--rows));
  width: calc(100% / var(--cols)); height: calc(100% / var(--rows));
  background-repeat: no-repeat; background-size: calc(var(--cols) * 100%) calc(var(--rows) * 100%);
  transform: scale(.955); border-radius: .35em;
  box-shadow: 0 0 0 1.5px rgba(35, 35, 43, .45), 0 .2em .45em rgba(35, 35, 43, .2);
  transition: left .32s ease, top .32s ease, transform .2s ease, border-radius .4s ease, box-shadow .4s ease;
}
.pc-tile:hover { transform: scale(.94); }
.pc-tile:focus { outline: none; }
.pc-tile:focus-visible { box-shadow: 0 0 0 3px var(--accent), 0 .2em .45em rgba(35, 35, 43, .2); }
.pc-tile.picked { z-index: 2; transform: scale(.9); box-shadow: 0 0 0 3px var(--accent), 0 0 0 6px var(--pale); }
.pc-tile.moving { z-index: 1; }
.pc-pic.solved .pc-tile { transform: none; border-radius: 0; box-shadow: none; cursor: default; pointer-events: none; }
/* whole again: a light passes over the card */
.pc-pic.solved::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) no-repeat 100% 0 / 250% 100%;
  animation: pcShine 1.1s ease-in-out .35s forwards;
}
@keyframes pcShine { to { background-position: 0% 0; } }
/* the line under the card — the hint, then the ending in its place; its
   height is kept for the ending's title, so the card never moves */
.pc-foot { align-self: stretch; min-height: 2.2em; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pc-note { font-size: .92em; color: var(--muted); font-style: italic; }
.pc-done { display: flex; flex-direction: column; align-items: center; gap: .2em; animation: paraIn .4s ease; }
.pc-done b { font-family: var(--font); font-size: 1.35em; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .pc-pic.solved::after { display: none; } }
/* a phone: the panel is short and the type large for it, so the line under
   the card took room the card needed, and the card came out smaller for the
   screen than on a computer. There the line moves down into the strip kept
   for the corner's Skip (or Continue): the same height, on the same row,
   kept clear of the button either side. The card grows into the room the
   line had, as big for the screen as on a computer. */
@media (max-height: 520px) {
  body.mode-landscape #storyPane:has(> #storySkip:not(:empty)):has(.pc-play) #story { padding-bottom: var(--pad-y); }
  body.mode-landscape .pc-foot { min-height: calc(var(--ui) * 2.04 + 4px); padding: 0 calc(var(--ui) * 11.5); }
}

/* short canvases (phone in landscape): the fixed button chrome eats a
   lot of a 16:9 box that is only ~390px tall, so trim it and the band */

/* ============================================================
   CHOOSE A FUTURE — four full-height slanted panels
   Three parallel diagonals cut the 16:9 canvas into four.
   ✏️  --fp-slant  how far the diagonals lean (0 = straight columns)
   ✏️  --fp-gap    the width of the ink line between two panels
============================================================ */
body.mode-landscape #scr-select { display: none; }
body.mode-landscape #scr-select.active {
  display: block; position: relative; height: 100%; overflow: hidden; padding: 0;
}
#selectCards { --fp-slant: 4.4%; --fp-gap: .34%; }
body.mode-landscape #selectCards { position: absolute; inset: 0; }

.fp {
  --x0: calc(var(--i) * 25%);
  --x1: calc((var(--i) + 1) * 25%);
  position: absolute; inset: 0; padding: 0; margin: 0;
  background: var(--paper); border: 0; cursor: pointer;
  font-family: var(--font); color: var(--ink); text-align: left;
  clip-path: polygon(
    calc(var(--x0) + var(--fp-slant) + var(--fp-gap)) 0%,
    calc(var(--x1) + var(--fp-slant) - var(--fp-gap)) 0%,
    calc(var(--x1) - var(--fp-slant) - var(--fp-gap)) 100%,
    calc(var(--x0) - var(--fp-slant) + var(--fp-gap)) 100%);
  transition: background .25s ease;
}
/* the outer two reach past the canvas so no corner is left uncovered */
.fp:first-child { --x0: -60%; }
.fp:last-child  { --x1: 160%; }

.fp-art { position: absolute; top: 0; bottom: 0; left: calc(var(--x0) - 7%); width: 39%; opacity: .24; }
.fp:first-child .fp-art { left: 0; }
.fp:last-child .fp-art { left: auto; right: 0; }
.fp-art svg, .fp-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fp::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, var(--fp-pale) 68%);
  opacity: .86; pointer-events: none;
}

.fp-inner {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  left: calc(var(--x0) + 3.4%); width: calc(25% - 6.8%);
  display: flex; flex-direction: column; gap: calc(var(--ui) * .5);
  font-size: calc(var(--ui) * 1.02);
}
.fp:first-child .fp-inner { left: 3.4%; }
.fp:last-child  .fp-inner { left: auto; right: 3.4%; }
/* its head: the future's name and its title (Game.levelCards makes the four
   heads one height, so the lines under them start level) */
.fp-head { display: flex; flex-direction: column; gap: inherit; }
.fp-future {
  font-size: 1em; font-weight: 700; letter-spacing: .01em; line-height: 1.25;
  color: var(--fp-accent);
}
.fp-blurb { font-size: .92em; line-height: 1.45; color: var(--muted); }
.fp-title { font-family: var(--font); font-size: 1.85em; line-height: 1.1; margin-top: calc(var(--ui) * .2); }
.fp-tag { font-size: .92em; line-height: 1.45; font-style: italic; color: var(--muted); white-space: pre-line; }
.fp-meta { display: flex; flex-wrap: wrap; gap: .5em; font-size: .8em; font-weight: 800; margin-top: calc(var(--ui) * .3); }
.fp-meta .rc-done { color: var(--fp-accent); }

.fp-growth         { --fp-accent: #4a9fd8; --fp-pale: #c2ddf0; }
.fp-collapse       { --fp-accent: #e0763c; --fp-pale: #f4cfae; }
.fp-discipline     { --fp-accent: #3f9d78; --fp-pale: #c2e2d2; }
.fp-transformation { --fp-accent: #8f7bd8; --fp-pale: #d8cef2; }

.fp:hover, .fp:focus-visible { background: #ffffff; outline: none; }
.fp:hover .fp-art, .fp:focus-visible .fp-art { opacity: .4; }
.fp:hover::after, .fp:focus-visible::after { opacity: .62; }
.fp:hover .fp-inner, .fp:focus-visible .fp-inner { transform: translateY(-52%); }
.fp-inner { transition: transform .25s ease; }

/* heading and footer float over the panels */
body.mode-landscape #scr-select .select-head {
  position: absolute; z-index: 3; top: calc(var(--ui) * 2.4); left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,.94); border: 2.5px solid var(--ink); border-radius: calc(var(--ui) * .9);
  padding: calc(var(--ui) * .5) calc(var(--ui) * 1.6); box-shadow: 0 2px 0 var(--ink); margin: 0;
}
body.mode-landscape #scr-select .select-head h2 { font-size: calc(var(--ui) * 1.9); line-height: 1.1; }
body.mode-landscape #scr-select .select-foot {
  position: absolute; z-index: 3; bottom: calc(var(--ui) * 2); left: 50%; transform: translateX(-50%);
  flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: calc(var(--ui) * .8); margin: 0; width: max-content; max-width: calc(100% - var(--ui) * 5);
}
body.mode-landscape #scr-select .select-foot .btn {
  min-height: 0; padding: calc(var(--ui) * .5) calc(var(--ui) * 1.3);
  font-size: calc(var(--ui) * 1); border-radius: calc(var(--ui) * .8);
  background: rgba(255,255,255,.94);
}
body.mode-landscape #scr-select .select-foot .link-btn { font-size: calc(var(--ui) * .92); color: var(--ink); opacity: .8; }

/* phone in landscape: the canvas is short, so lift the type a little */

/* ============================================================
   COLLAPSE ADDITIONS — the in-world panels (its three mini games
   are full screen: see FULL-SCREEN MINI GAMES)
============================================================ */

/* ---- in-world panels: the wealthy house, the pinned article ---- */
.tanaka, .clipping {
  font-size: .88rem;
  border: 2.5px solid var(--ink); border-radius: 14px; background: #ffffff;
  margin-top: 12px; animation: paraIn .45s ease backwards; overflow: hidden;
}
body.mode-landscape .tanaka, body.mode-landscape .clipping { font-size: calc(var(--ui) * 1.1); }
.tk-row { display: flex; align-items: baseline; gap: .8em; padding: .6em 1em; }
.tk-row + .tk-row { border-top: 1.5px dashed var(--wash2); }
.tk-row b { flex: none; width: 9.6em; }        /* wide enough for “Garden irrigation”, so the readings line up */
.tk-row span:last-child { color: var(--muted); }
.clipping {
  background: #f3efe2; border-style: dashed; text-align: center;
  padding: 1em; display: flex; flex-direction: column; gap: .2em;
  transform: rotate(-.6deg);
}
.cl-kicker { font-size: .68em; font-weight: 800; letter-spacing: .16em; color: var(--muted); }
.cl-head { font-family: var(--font); font-size: 1.7em; letter-spacing: .04em; }
.cl-sub { font-size: .92em; font-style: italic; color: var(--muted); }

/* ============================================================
   CONTINUED GROWTH ADDITIONS — the full-screen feed and dashboard,
   the camera, the thought bubbles
============================================================ */

/* ---- FULL-SCREEN MINI GAMES — after its cover page, a game's own picture
   fills the game view, over the top bar and the story panel, and the game is
   played on the picture (Growth MG2 and MG3, Discipline MG1 and MG3,
   Collapse MG1, MG2 and MG3, Transformation MG2 and MG3: mgFullscreen in
   js/minigames.js). The view is 16:9 like the picture, so all of it shows.
   Its frame is a size container, so 1cqw = 1% of the picture's width and a
   spot given in px of the 1920 px original (mgPlace, mgCrop) stays on that
   spot at any screen size ---- */
.mg-full {
  position: absolute; inset: 0; z-index: 30; overflow: hidden;
  background: #0e1420; animation: mgFullIn .35s ease;
}
@keyframes mgFullIn { from { opacity: 0; } }
.mg-full-box {
  position: absolute; left: 0; top: 0; width: 100%;
  aspect-ratio: 16 / 9; container-type: inline-size;
}
.mg-full-pic {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.mg-full-pic[hidden] { display: none; }        /* a game's other pictures, until shown */
/* a game with no cover page (mgFullscreen's `instant`) is there at once, as
   its scene opens, the way one picture follows another between pages */
.mg-full.instant { animation: none; }
/* the game's Skip — and then its Continue — bottom-right in the view. It
   comes in a moment after the page, so the second click of a double click
   on the page before (whose button stood on this same spot) finds nothing */
.mg-full-corner {
  position: absolute; z-index: 2; display: flex; gap: .6em;
  right: calc(var(--ui) * 2.4);
  bottom: calc(var(--ui) * 2 + env(safe-area-inset-bottom));
  animation: cornerIn .3s ease .45s backwards;
}
@keyframes cornerIn { from { opacity: 0; visibility: hidden; } }
body.mode-landscape .mg-full-corner .btn { white-space: nowrap; }
/* a game's countdown (mgCountdown in js/minigames.js — Growth MG3): top
   right on the screen, a ring that runs down round the seconds left, the
   number in its middle; red for the last ten seconds */
.mg-timer {
  position: absolute; z-index: 2; display: grid; place-items: center;
  top: calc(var(--ui) * 2 + env(safe-area-inset-top)); right: calc(var(--ui) * 2.4);
  width: calc(var(--ui) * 6.6); height: calc(var(--ui) * 6.6); border-radius: 50%;
  background: #ffffff; border: calc(var(--ui) * .22) solid var(--ink);
  box-shadow: 0 calc(var(--ui) * .3) 0 var(--ink), 0 calc(var(--ui) * 1) calc(var(--ui) * 2.4) rgba(10, 16, 30, .3);
  animation: cornerIn .3s ease .2s backwards;
}
.mg-timer svg { position: absolute; inset: 7%; width: 86%; height: 86%; overflow: visible; transform: scaleX(-1) rotate(-90deg); }
.mt-track, .mt-left { fill: none; stroke-width: 9; }
.mt-track { stroke: var(--wash2); }
.mt-left { stroke: var(--accent); stroke-linecap: round; }
.mg-timer.out .mt-left { visibility: hidden; }
.mt-num {
  position: relative; font: 800 calc(var(--ui) * 2.1) / 1 var(--font); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mg-timer.low .mt-left { stroke: var(--bad); }
.mg-timer.low .mt-num { color: var(--bad); }
.mg-timer.low:not(.out, .still) .mt-num { animation: mtPulse 1s ease-in-out infinite; }
@keyframes mtPulse { 50% { transform: scale(1.14); } }

/* ---- PICTURE-ONLY PAGES — a page that is only its picture (`pictureOnly`
   on its node: Transformation T2-2 and T2-3, Growth G1-1). The story panel goes, the top
   bar stays, and the page's button stands in the view's bottom-right
   corner, just where a full-screen game's Continue does (.mg-full-corner).
   Like that one, it comes in a moment after its page, so a double click on
   the button before, on the same spot, does not skip a page ---- */
body.mode-landscape #scr-play.picture-only :is(#story, #storySkip, #scrollHint) { display: none; }
/* (the panel opens to the whole view, and lets clicks through to the picture) */
body.mode-landscape #scr-play.picture-only #storyPane {
  inset: 0; width: auto; overflow: visible; pointer-events: none;
}
body.mode-landscape #scr-play.picture-only #storyScroll { overflow: visible; }
body.mode-landscape #scr-play.picture-only #actions {
  position: absolute; margin: 0; pointer-events: auto;
  right: calc(var(--ui) * 2.4);
  bottom: calc(var(--ui) * 2 + env(safe-area-inset-bottom));
}
body.mode-landscape #scr-play.picture-only #actions .btn {
  white-space: nowrap; animation: pictureBtnIn .4s ease .4s backwards;
}
@keyframes pictureBtnIn { from { opacity: 0; visibility: hidden; transform: translateY(8px); } }

/* ---- MG2 the ride in: only the phone's screen scrolls, one post per flick ---- */
.fs-feed {
  position: absolute; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; scrollbar-width: none;
  touch-action: pan-y; cursor: grab; outline: none;
}
.fs-feed::-webkit-scrollbar { display: none; }
.fs-feed:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.fs-feed.grabbing { scroll-snap-type: none; cursor: grabbing; }
.fs-post { height: 100%; background-repeat: no-repeat; scroll-snap-align: start; scroll-snap-stop: always; }

/* ---- MG3 prioritize the deliveries: the six deliveries go from the tray
   into the two lanes' boxes; a lane of four or more lays them smaller ---- */
.fs-lane {
  position: absolute; display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: calc(12 / 1920 * 100cqw); padding: calc(4 / 1920 * 100cqw) calc(6 / 1920 * 100cqw);
  transition: background-color .15s ease;
}
.fs-lane.hot { background: rgba(74, 159, 216, .16); }
.fs-lane.crowded { gap: calc(8 / 1920 * 100cqw); }
/* a card's size is CARD_W × CARD_H in MINIGAMES.clearExceptions (--card-w,
   --card-h, in px of the picture); a lane of four or five lays its cards
   at 60%, of six at half, so they still fit in one row */
.fs-card {
  --card-s: 1;
  flex: none;
  width: calc(var(--card-w) * var(--card-s) / 1920 * 100cqw);
  height: calc(var(--card-h) * var(--card-s) / 1920 * 100cqw);
  background-repeat: no-repeat; cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.fs-lane.crowded .fs-card { --card-s: .6; }
.fs-lane.packed .fs-card { --card-s: .5; }
.fs-card.in-tray, .fs-card.dragging { position: absolute; }
.fs-card.dragging {
  z-index: 5; cursor: grabbing; transform: rotate(-2deg) scale(1.05);
  filter: drop-shadow(0 calc(8 / 1920 * 100cqw) calc(10 / 1920 * 100cqw) rgba(10, 16, 30, .35));
}
/* a small settle as it lands (not bumpP: that one repaints the background,
   which here is the card itself) */
.fs-card.sorted { animation: fsLand .35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes fsLand { from { transform: scale(1.08); } }
.mg-full-box.locked .fs-card { cursor: default; pointer-events: none; }
/* where the tray was: how many went into the right lane */
.fs-note {
  position: absolute; display: grid; place-items: center; text-align: center;
  font: 800 calc(30 / 1920 * 100cqw) / 1.2 var(--font); color: var(--accent);
  background: #ffffff; border: calc(3 / 1920 * 100cqw) solid var(--ink); border-radius: calc(14 / 1920 * 100cqw);
  box-shadow: 0 calc(4 / 1920 * 100cqw) 0 var(--ink); animation: paraIn .3s ease;
}
.fs-note.bad { color: var(--bad); }
/* time ran out: the deliveries still on the tray fade */
.fs-card.missed { opacity: .4; transition: opacity .4s ease; }
/* then the verdict, over the sorted dashboard, as a story-panel card */
.fs-result {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  padding: calc(var(--ui) * 2); background: rgba(14, 20, 32, .3); animation: mgFullIn .3s ease;
}
body.mode-landscape .fs-result .mg-card {
  align-items: center; text-align: center; max-width: min(100%, calc(var(--ui) * 44));
  background: rgba(250, 249, 245, .97); border: calc(var(--ui) * .22) solid var(--ink);
  border-radius: calc(var(--ui) * 1.2); padding: calc(var(--ui) * 2.2) calc(var(--ui) * 2.8);
  box-shadow: 0 calc(var(--ui) * .3) 0 var(--ink), 0 calc(var(--ui) * 1.4) calc(var(--ui) * 3) rgba(10, 16, 30, .34);
}

/* ---- Discipline MG1 the wristband brief, Collapse MG1 the Karu board and
   Transformation MG2 the CareNet inbox: the screen is the picture, and what
   can be tapped on it is laid over it — the list's rows, or an update's
   ← → ✕ (.fs-spot, shaded on hover; --r rounds its corners, in px of the
   picture). An unread update's red dot pings, and once read a white disc
   covers the dot; CareNet's rows have no dot, so the ones not yet read
   glow ---- */
.fs-spots { position: absolute; inset: 0; pointer-events: none; }
.fs-spot {
  position: absolute; margin: 0; padding: 0; border: 0; background: transparent;
  pointer-events: auto; cursor: pointer; border-radius: calc(var(--r, 6) / 1920 * 100cqw);
  transition: background-color .15s ease; -webkit-tap-highlight-color: transparent;
}
.fs-spot:hover { background: rgba(63, 157, 120, .14); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.fs-spot:focus { outline: none; }
.fs-spot:focus-visible { box-shadow: 0 0 0 calc(4 / 1920 * 100cqw) var(--accent); }
.fs-spot.unread { animation: fsUnread 2.2s ease-in-out infinite; }
.fs-spot.unread:focus-visible { animation: none; }
@keyframes fsUnread {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  50% { box-shadow: 0 0 calc(20 / 1920 * 100cqw) calc(3 / 1920 * 100cqw) rgba(255, 255, 255, .9); }
}
/* ← → ✕ take a wider box than they show; their shade is a circle on the
   sign (--ring, its width in px of the picture) */
.fs-spot.fs-round::before {
  content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: calc(var(--ring, 60) / 1920 * 100cqw); aspect-ratio: 1; border-radius: 50%;
  transition: background-color .15s ease;
}
.fs-spot.fs-round:hover { background: transparent; }
.fs-spot.fs-round:hover::before { background: rgba(63, 157, 120, .14); background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* on a bright, coloured screen (CareNet's) the shade is a lightening instead */
.fs-spots.fs-light .fs-spot:not(.fs-round):hover,
.fs-spots.fs-light .fs-spot.fs-round:hover::before { background: rgba(255, 255, 255, .2); }
.fs-spot.fs-round:focus-visible { box-shadow: none; }
.fs-spot.fs-round:focus-visible::before { box-shadow: 0 0 0 calc(4 / 1920 * 100cqw) var(--accent); }
.fs-ping { position: absolute; }
.fs-ping::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: calc(3 / 1920 * 100cqw) solid #f90000; animation: fsPing 1.6s ease-out infinite;
}
.fs-ping.read { background: #ffffff; border-radius: 50%; }
.fs-ping.read::after { display: none; }
@keyframes fsPing { from { transform: scale(.6); opacity: .9; } to { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fs-ping::after { animation: none; opacity: 0; }
  .fs-spot.unread { animation: none; box-shadow: 0 0 calc(12 / 1920 * 100cqw) calc(2 / 1920 * 100cqw) rgba(255, 255, 255, .8); }
}
/* Discipline MG1's band and Collapse MG1's phone are drawn large enough to
   be read on a phone as they are. The phone fills the picture's height: on
   a phone its card goes to the foot of the screen (.fs-foot), off Karu's
   heading and the ← */
@media (max-height: 520px) {
  .fs-task.fs-foot { top: auto; bottom: calc(var(--ui) * 2 + env(safe-area-inset-bottom)); }
}

/* ---- THINGS ON A FULL-SCREEN PICTURE — Discipline MG3 Linda's tasks (two
   tasks, each on its own picture: a .fs-scene, which fades in over the last
   one) and Collapse MG2 and MG3 (one each), with a card top-centre naming
   the task and how to do it. The things on a picture are images at their
   own size (or `s` times it); only .fs-hit — cut to the image's outline —
   takes the pointer, so the thing on top is the one you touch. Things to
   tap away (.fs-tap) breathe until one is tapped: a dish then washes away
   in a few bubbles, a thing in Pari's corridor goes in a puff of dust.
   Things to carry (.fs-drag) follow the hand: a lifted one lights up where
   it goes (.fs-goal — the basket, the sink), which swells to take it. A
   thing's picture is .fs-art: its image, or — for an image of the whole
   1920 × 1080 picture (Collapse's and Discipline's) — the thing's box on it
   (.fs-frame) ---- */
.fs-scene { position: absolute; inset: 0; animation: mgFullIn .45s ease; }
.fs-task {
  position: absolute; z-index: 2; left: 50%; translate: -50% 0;
  top: calc(var(--ui) * 2 + env(safe-area-inset-top));
  width: max-content; max-width: calc(100% - var(--ui) * 4.8);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .2em .65em;
  font-size: calc(var(--ui) * 1.3); line-height: 1.35; text-align: center;
  background: rgba(250, 249, 245, .97); border: calc(var(--ui) * .2) solid var(--ink);
  border-radius: calc(var(--ui) * 1.1); padding: .6em 1.4em;
  box-shadow: 0 calc(var(--ui) * .28) 0 var(--ink);
  animation: paraIn .35s ease;
}
.fs-task-name { font-family: var(--font); font-size: 1.2em; }
.fs-task-how { font-weight: 600; }
.fs-task.done .fs-task-how { font-weight: 800; color: var(--accent); }
.fs-task.done .fs-task-how::before { content: '✓ '; }
.fs-task.warn .fs-task-how { font-weight: 800; color: var(--bad); }
/* each thing is its own layer (z-index 0), so its .fs-hit only ever sits over
   its own image, and the things stack in their order, however they move */
.fs-thing { position: absolute; z-index: 0; pointer-events: none; }
.fs-thing .fs-art { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
/* the box shows its part of the picture (its image placed by mgThing); cut
   inside the part that breathes and glows, so the glow is never cut off */
.fs-thing .fs-frame { position: relative; height: 100%; }
.fs-crop { position: absolute; inset: 0; overflow: hidden; }
.fs-crop img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-select: none; }
.fs-hit {
  position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; border: 0; background: none;
  pointer-events: auto; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.fs-hit:focus { outline: none; }
.fs-thing:has(> .fs-hit:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.fs-hit.oval { clip-path: ellipse(44% 40% at 50% 50%); }
.fs-scene.locked .fs-hit { pointer-events: none; }
/* things to tap away breathe — a slow swell, and a white glow round them */
.fs-tap .fs-art {
  transform-origin: 50% 70%; transition: translate .2s ease;
  animation: fsBreathe 2.7s ease-in-out var(--d, 0s) infinite;
}
@keyframes fsBreathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  50% { transform: scale(1.04); filter: drop-shadow(0 0 calc(16 / 1920 * 100cqw) rgba(255, 255, 255, .95)); }
}
.fs-tap .fs-hit:hover + .fs-art { translate: 0 -1.5%; }
.fs-tap.gone .fs-hit { pointer-events: none; }
/* a dish washes away in a few bubbles, where it was tapped (mgSuds) */
.fs-dish.gone .fs-art { animation: fsWash .45s ease-in forwards; }
@keyframes fsWash { to { opacity: 0; transform: scale(.86) translateY(-5%); } }
.fs-suds { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.fs-suds i {
  position: absolute; left: calc(var(--dx) / 1920 * 100cqw); top: calc(var(--dy) / 1920 * 100cqw);
  width: calc(var(--r) / 1920 * 100cqw); aspect-ratio: 1; margin: calc(var(--r) / -3840 * 100cqw);
  border-radius: 50%; border: calc(3 / 1920 * 100cqw) solid rgba(255, 255, 255, .95);
  background: radial-gradient(circle at 32% 30%, #ffffff 0 14%, rgba(255, 255, 255, .3) 38%, rgba(208, 216, 250, .3));
  animation: fsSuds .9s cubic-bezier(.2, .6, .35, 1) var(--d) both;
}
@keyframes fsSuds {
  from { transform: scale(.2); opacity: 0; }
  25% { opacity: 1; }
  to { transform: translateY(calc(var(--rise) / 1920 * -100cqw)) scale(1); opacity: 0; }
}
/* a thing in Pari's corridor goes in a puff of dust (mgDust): a cloud as
   big as it was billows up over it, it gives a little and shrinks away
   inside, and the cloud drifts apart and thins; a few specks fly off */
.fs-junk.gone .fs-art { animation: fsPoof .45s cubic-bezier(.4, 0, .7, .4) .08s forwards; }
@keyframes fsPoof {
  30% { transform: scale(1.06, .94); opacity: 1; }
  to { transform: scale(.6) translateY(6%); opacity: 0; }
}
.fs-dust { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.fs-dust i, .fs-dust b {
  position: absolute; left: calc(var(--dx) / 1920 * 100cqw); top: calc(var(--dy) / 1920 * 100cqw);
  border-radius: 50%;
}
.fs-dust i {
  width: calc(var(--r) / 1920 * 100cqw); aspect-ratio: 1; margin: calc(var(--r) / -3840 * 100cqw);
  background: radial-gradient(closest-side, rgba(230, 220, 202, .96), rgba(204, 190, 167, .82) 45%, rgba(190, 176, 152, 0));
  animation: fsDust 1.3s cubic-bezier(.25, .6, .4, 1) var(--d) both;
}
@keyframes fsDust {
  from { transform: scale(.3); opacity: 0; }
  16% { opacity: 1; }
  45% { opacity: .92; }
  to { transform: translate(calc(var(--mx) / 1920 * 100cqw), calc(var(--my) / 1920 * 100cqw)) scale(1.35); opacity: 0; }
}
.fs-dust b {
  width: calc(10 / 1920 * 100cqw); aspect-ratio: 1; margin: calc(-5 / 1920 * 100cqw);
  background: rgba(140, 122, 98, .95);
  animation: fsSpeck .9s cubic-bezier(.25, .7, .4, 1) var(--d) both;
}
@keyframes fsSpeck {
  from { transform: none; opacity: 0; }
  15% { opacity: 1; }
  to { transform: translate(calc(var(--mx) / 1920 * 100cqw), calc(var(--my) / 1920 * 100cqw)) scale(.6); opacity: 0; }
}
/* things to carry: one follows the hand, lifted; let go anywhere but where
   it goes and it springs back to its place; in, it flies to the mouth */
.fs-drag { transition: translate .32s cubic-bezier(.3, 1.3, .5, 1), scale .18s ease, rotate .18s ease; }
.fs-drag .fs-hit { cursor: grab; }
.fs-drag.dragging { z-index: 5; scale: 1.06; rotate: -3deg; transition: scale .18s ease, rotate .18s ease; }
.fs-drag.dragging .fs-hit { cursor: grabbing; }
.fs-drag.dragging .fs-art { filter: drop-shadow(0 calc(16 / 1920 * 100cqw) calc(14 / 1920 * 100cqw) rgba(40, 30, 30, .3)); }
.fs-drag.in {
  z-index: 5; scale: .3; opacity: 0;
  transition: translate .38s cubic-bezier(.5, 0, .75, .5), scale .38s ease-in, rotate .38s ease, opacity .2s ease-in .18s;
}
.fs-drag.in .fs-hit { pointer-events: none; }
/* where they go. The sink: cut from the picture along its outline, invisible
   at rest. The basket: its own image, the only basket there is. It swells from
   its middle (the basket from its foot: `origin` in js/minigames.js) */
.fs-goal { position: absolute; pointer-events: none; transform-origin: 50% 50%; transition: scale .25s cubic-bezier(.3, 1.4, .5, 1), filter .25s ease; }
.fs-goal i { position: absolute; inset: 0; background-repeat: no-repeat; }
.fs-goal.ready { animation: fsReady 1.2s ease-in-out infinite; }
@keyframes fsReady {
  0%, 100% { filter: drop-shadow(0 0 calc(5 / 1920 * 100cqw) var(--accent)); }
  50% { filter: drop-shadow(0 0 calc(14 / 1920 * 100cqw) var(--accent)); }
}
.fs-goal.hot {
  animation: none; scale: 1.045;
  filter: drop-shadow(0 0 calc(5 / 1920 * 100cqw) var(--accent)) drop-shadow(0 0 calc(24 / 1920 * 100cqw) var(--accent));
}
.fs-goal.got { animation: fsGot .45s ease; }
@keyframes fsGot { 30% { scale: 1.04 .96; } 65% { scale: .985 1.02; } }
@media (prefers-reduced-motion: reduce) {
  .fs-scene, .fs-tap .fs-art, .fs-suds i, .fs-goal.ready, .fs-goal.got { animation: none; }
  .fs-suds, .fs-dust { display: none; }
  .fs-tap.gone .fs-art { animation: none; opacity: 0; }
}

/* ---- Transformation MG3 balance Heatwave Mode: the panel is the picture,
   with no switches on it. Each system's button lies over its name and
   its switch, and holds the switch's two sprites: tapped, a system that
   may be slowed flips its switch off; an essential one shakes it and stays
   on, its name flushing red, and the card at the top says why. The panel
   is dark, so a name under the pointer lightens. The haze over the city,
   round the panel, thins with each system slowed ---- */
.fs-heat {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 112, 38, .42), rgba(255, 150, 70, .26) 45%, rgba(255, 196, 120, .16));
  transition: opacity 1.1s ease;
}
.fs-sys {
  position: absolute; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fs-sys:focus { outline: none; }
.fs-sys:focus-visible { outline: calc(4 / 1920 * 100cqw) solid var(--accent); outline-offset: calc(2 / 1920 * 100cqw); border-radius: calc(8 / 1920 * 100cqw); }
.fs-sys-name { position: absolute; border-radius: calc(12 / 1920 * 100cqw); transition: background-color .15s ease; }
.fs-sys:hover .fs-sys-name { background: rgba(255, 255, 255, .12); }
.fs-switch { position: absolute; transition: scale .15s ease; }
.fs-switch img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  transition: opacity .18s ease; user-select: none; -webkit-user-select: none;
}
.fs-switch .off { opacity: 0; }
.fs-sys:hover .fs-switch { scale: 1.05; }
.fs-sys.slowed { cursor: default; }
.fs-sys.slowed .fs-switch { scale: 1; animation: fsFlip .3s ease; }
.fs-sys.slowed .fs-switch .on { opacity: 0; }
.fs-sys.slowed .fs-switch .off { opacity: 1; }
.fs-sys.slowed:hover .fs-sys-name { background: none; }
@keyframes fsFlip { 40% { scale: .93 1.06; } }
.fs-sys.no .fs-switch { animation: fsNo .5s ease; }
.fs-sys.no .fs-sys-name { animation: fsNoName .9s ease; }
@keyframes fsNo { 15%, 55% { translate: -5% 0; } 35%, 75% { translate: 5% 0; } }
@keyframes fsNoName { 20% { background: rgba(232, 84, 54, .42); } }
.mg-full-box.locked .fs-sys { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .fs-sys.slowed .fs-switch, .fs-sys.no .fs-switch, .fs-sys.no .fs-sys-name { animation: none; }
}

/* ---- THOUGHT BUBBLES — a drawn "•••" bubble whose dots type while it
   gently breathes: over a picture (Growth's m2, and the one who talks in a
   phone call), or laid exactly over a bubble painted into it (Discipline's
   calls) (Game.setBubble / Game.setCall in js/engine.js; which pictures,
   and where: `bgBubbles` / `bgCalls` in the data file). It lives in the
   background layer, so it drifts with the picture; --pic-w is the
   picture's width on screen. It only ever grows from its drawn size, so a
   painted bubble never shows round it ---- */
.bg-bubble {
  position: absolute; pointer-events: none; transform: translate(-50%, -50%);
  width: calc(var(--pic-w) * 200 / 1920 * var(--b-size, 1)); height: calc(var(--pic-w) * 140 / 1920 * var(--b-size, 1));
}
.bg-bubble svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* where it breathes from, and each dot's delay, come with its shape (BUBBLES) */
.tb-body { transform-box: fill-box; transform-origin: 18% 92%; animation: tbBreathe 3.4s ease-in-out infinite; }
.tb-dot { fill: #000; transform-box: fill-box; transform-origin: 50% 50%; animation: tbType 1.35s ease-in-out infinite; }
@keyframes tbBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes tbType {
  0%, 55%, 100% { transform: translateY(0); opacity: .35; }
  25% { transform: translateY(-9px); opacity: 1; }
}
/* ---- PHONE CALLS — the two people in a call's rooms (Game.setCall in
   js/engine.js; who, where and how fast: `bgCalls` / `callTiming` in
   js/data_growth.js): each two pictures of the whole frame, mouth closed
   and mouth open, the open one shown while the mouth is open. They come in
   once their pictures are in; the one who talks has a "•••" bubble, up on
   the page (it follows her: Game.followBubble), which pops up from its
   tail while she talks ---- */
.bg-call { position: absolute; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.bg-call.ready { opacity: 1; }
.bc-person { position: absolute; inset: 0; }
.bc-person img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  user-select: none; -webkit-user-select: none;
}
.bc-person .bc-open { opacity: 0; }
.bc-person.open .bc-open { opacity: 1; }
/* what of the picture stands in front of the people (`front`: Discipline's band) */
.bc-front { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bc-anchor { position: absolute; width: 0; height: 0; }
.bc-bubble { z-index: 2; }
.bc-bubble svg {
  opacity: 0; transform: scale(.55); transform-origin: 18% 92%;
  transition: opacity .18s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.bc-bubble.on svg { opacity: 1; transform: none; }
/* ---- BUZZING PANELS — a screen painted into a picture shakes twice, like a
   wristband, as its scene opens (Game.setBuzz in js/engine.js; which picture,
   and where: `bgBuzz` in the data file). It is a copy of that part of the
   picture laid over it, a little larger while it shakes, so the painted
   panel never shows round it — and seen only while it shakes: still, the
   painted one shows, crisp. Two bursts of quick swings, half a second in ---- */
.bg-buzz {
  position: absolute; pointer-events: none; background-repeat: no-repeat; opacity: 0;
  animation: bgBuzz 1.25s linear .5s both;
}
/* a panel that is not a plain box (D3.1's band): its copy cut to its shape */
.bg-buzz .bb-part { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@keyframes bgBuzz {
  0%, 30%, 56%, 86%, 100% { transform: none; opacity: 0; }
  2.5%, 9.5%, 16.5%, 23.5%, 58.5%, 65.5%, 72.5%, 79.5% { transform: scale(1.035) translate(-.55%, .1%) rotate(-.45deg); opacity: 1; }
  6%, 13%, 20%, 62%, 69%, 76% { transform: scale(1.035) translate(.55%, -.1%) rotate(.45deg); opacity: 1; }
  27%, 83% { transform: scale(1.035); opacity: 1; }
}
/* ---- HALF-LENGTH FIGURES — a person standing in the picture, on its right,
   where the care worker stands in m2 (Game.setFigure in js/engine.js; who
   and where: figureArt / figureSpot in the data file). The image stands on
   its box's floor, just below the picture's bottom edge; a new one rises
   in as the last fades away ---- */
.bg-figure { position: absolute; pointer-events: none; }
.bg-figure img {
  position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block;
  user-select: none; -webkit-user-select: none;
  animation: figIn .45s ease both;
}
.bg-figure img.out { animation: figOut .4s ease both; }
@keyframes figIn { from { opacity: 0; transform: translateY(2%); } }
@keyframes figOut { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mg-full, .tb-body, .tb-dot, .bg-figure img, .bg-figure img.out, .bg-buzz { animation: none; }
}
/* ---- THE RADIO — a radio drawn onto a picture, playing (Game.setRadio in
   js/engine.js; which picture, and where: `bgRadio` in the data file —
   Growth G1-1). It lives in the background layer, so it drifts with the
   picture; --pic-w is the picture's width on screen. Its sound waves ring
   out on both sides, each arc a moment after the one inside it. On a page
   where it speaks (Game.radioTalk) it breathes with a white glow until it
   is clicked, like the things to tap in the full-screen games; its click
   target and its bubble are up on the page, and follow it ---- */
.bg-radio { position: absolute; pointer-events: none; }
.bg-radio .br-pic {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  user-select: none; -webkit-user-select: none;
  transform-origin: 44% 92%; transition: translate .2s ease;
}
/* a radio painted on a whole 1920 × 1080 PNG (`frame`): the box shows the
   radio's part of it, the image placed by Game.setRadio */
.bg-radio .br-frame { overflow: hidden; }
.br-frame img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-select: none; }
.bg-radio.ask .br-pic { animation: brBreathe 2.7s ease-in-out infinite; }
@keyframes brBreathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  50% { transform: scale(1.035); filter: drop-shadow(0 0 calc(var(--pic-w) * 14 / 1920) rgba(255, 255, 255, .9)); }
}
.bg-radio.ask.hover .br-pic { translate: 0 -1.5%; }
.br-waves {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 calc(var(--pic-w) * 1.5 / 1920) 0 rgba(30, 40, 55, .35));
}
.br-waves path {
  fill: none; stroke: #fffaf0; stroke-width: 4.6; stroke-linecap: round;
  transform-box: view-box; opacity: 0;
  animation: brWave 1.8s ease-out infinite;
}
@keyframes brWave {
  0% { opacity: 0; transform: scale(.94); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.08); }
}
/* once it speaks, its bubble stands where the left-hand waves rang out */
.br-left { transition: opacity .3s ease; }
.bg-radio.heard .br-left { opacity: 0; }
/* its click target, over its body — a button, so a keyboard reaches it too */
.radio-hit {
  position: absolute; z-index: 3; margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer; border-radius: calc(var(--ui) * 1); -webkit-tap-highlight-color: transparent;
}
.radio-hit:focus { outline: none; }
.radio-hit:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.radio-hit.sounding { cursor: default; }     /* it is on */
/* ✏️  the words under it until it speaks (bgRadio's `label` in the data
   file): Patrick Hand, regular, 44 px of the picture (--pic-w, its width
   on screen), white. They sit in its click target, so a click on them
   switches it on too, and fade once its bubble opens */
.radio-label {
  position: absolute; translate: -50% -50%; white-space: nowrap;
  font: 400 calc(var(--pic-w, 1920px) * 44 / 1920) / 1.2 'Patrick Hand', var(--font);
  color: #ffffff; transition: opacity .3s ease;
}
.radio-hit[aria-expanded="true"] .radio-label { opacity: 0; }
/* the bubble it speaks in, on its left, growing out of its tail */
.radio-bubble {
  position: absolute; z-index: 3; left: 0; top: 0; box-sizing: border-box;
  width: calc(var(--u) * 32);
  padding: calc(var(--ui) * 1.3) calc(var(--ui) * 1.6);
  background: #fbfaf6; color: var(--ink);
  border: calc(var(--ui) * .22) solid var(--ink); border-radius: calc(var(--ui) * 1.1);
  box-shadow: 0 calc(var(--ui) * .3) 0 var(--ink), 0 calc(var(--ui) * 1.4) calc(var(--ui) * 3) rgba(10, 16, 30, .34);
  font-size: calc(var(--ui) * 1.28); line-height: 1.55;
  transform-origin: 100% var(--tail, 60%);
  visibility: hidden; opacity: 0; transform: scale(.3);
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .2s ease, visibility 0s .35s;
}
.radio-bubble.open {
  visibility: visible; opacity: 1; transform: none;
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .2s ease;
}
.radio-bubble p { margin: 0; }
.radio-bubble p + p { margin-top: .6em; }
/* its tail, on its right, pointing at the radio's speaker */
.radio-bubble::after {
  content: ''; position: absolute; top: var(--tail, 60%);
  right: calc(var(--ui) * -.78); width: calc(var(--ui) * 1.3); height: calc(var(--ui) * 1.3);
  background: #fbfaf6; border: solid var(--ink);
  border-width: calc(var(--ui) * .22) calc(var(--ui) * .22) 0 0;
  transform: translateY(-50%) rotate(45deg);
}
/* the page's button comes once the radio's words are in */
body.mode-landscape #scr-play #actions.radio-wait { display: none; }
@media (prefers-reduced-motion: reduce) {
  .bg-radio.ask .br-pic, .br-waves path { animation: none; }
  .br-waves path { opacity: .85; }
  .radio-bubble, .radio-bubble.open { transition: none; }
}
/* ---- A THING TO FIND — a page that opens on another picture with one
   thing on it to click (Game.findThing in js/engine.js; which, and where:
   `find` on the node — Collapse D3-1, the papers on the desk). The story
   panel waits while the thing — a copy of it, laid exactly over the
   painted one — breathes with a white glow, like the radio and the things
   to tap in the full-screen games, and swells under the pointer; its
   click target is up on the page and follows it. Clicked, it lifts off
   and fades as the page's own picture fades in from under the one before
   (.bg-was), and the panel comes ---- */
body.mode-landscape #scr-play.finding #storyPane { display: none; }
.bg-find { position: absolute; pointer-events: none; }
.bf-pic {
  position: absolute; inset: 0; transform-origin: 50% 70%;
  animation: bfBreathe 2.4s ease-in-out infinite;
}
/* the box shows its part of the picture; cut inside the part that glows */
.bf-crop { position: absolute; inset: 0; overflow: hidden; }
.bf-crop img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-select: none; }
@keyframes bfBreathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  50% { transform: scale(1.04); filter: drop-shadow(0 0 calc(var(--pic-w) * 16 / 1920) rgba(255, 255, 255, .95)); }
}
.bg-find.hover .bf-pic {
  animation: none; transform: scale(1.06);
  filter: drop-shadow(0 0 calc(var(--pic-w) * 18 / 1920) rgba(255, 255, 255, 1));
}
.bg-find.found .bf-pic { animation: bfFound .55s ease-in forwards; }
@keyframes bfFound {
  from { transform: scale(1.05); filter: drop-shadow(0 0 calc(var(--pic-w) * 16 / 1920) rgba(255, 255, 255, .95)); }
  to { transform: translateY(-14%) scale(1.1); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); opacity: 0; }
}
.find-hit {
  position: absolute; z-index: 3; margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer; border-radius: calc(var(--ui) * 1); -webkit-tap-highlight-color: transparent;
}
.find-hit:focus { outline: none; }
.find-hit:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* the picture before, fading off the page's own (laid as the layer lays its picture) */
.bg-was {
  position: absolute; inset: 0; pointer-events: none;
  background-size: cover; background-position: center 55%; background-repeat: no-repeat;
  animation: bgWas .6s ease forwards;
}
@keyframes bgWas { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bf-pic { animation: none; filter: drop-shadow(0 0 calc(var(--pic-w) * 12 / 1920) rgba(255, 255, 255, .9)); }
  .bg-find.found .bf-pic, .bg-was { animation: none; opacity: 0; }
}

/* ---- NEW ON THE PICTURE — the part of a page's picture that is new since
   the page before (Game.setHighlight in js/engine.js; which, and where:
   `highlight` on the node — Transformation D3-2, Rina's last message). As
   the page opens, that part of the picture before shows there (.bn-was),
   then fades to let the new part in; a frame round it (.bn-ring) blinks
   three times, then stays softly lit, breathing slowly. Sizes are in px of
   the picture (--pic-w, its width on screen) ---- */
.bg-new { position: absolute; pointer-events: none; }
.bn-was { position: absolute; inset: 0; overflow: hidden; opacity: 0; }
.bn-was img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-select: none; }
.bg-new.arrive .bn-was { animation: bnWas .5s ease .5s backwards; }
@keyframes bnWas { from { opacity: 1; } }
.bn-ring {
  position: absolute; inset: 0; border-radius: calc(var(--pic-w) * 18 / 1920);
  border: calc(var(--pic-w) * 4 / 1920) solid #ffffff;
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 calc(var(--pic-w) * 28 / 1920) calc(var(--pic-w) * 4 / 1920) rgba(255, 255, 255, .7),
    inset 0 0 calc(var(--pic-w) * 20 / 1920) rgba(255, 255, 255, .35);
  opacity: .6; animation: bnGlow 3s ease-in-out infinite;
}
/* ✏️  the blinks: 0.9 s after the page opens (as the words come in), three
   of them in 2.1 s, then the slow breathing */
.bg-new.arrive .bn-ring { animation: bnBlink 2.1s ease-in-out .9s backwards, bnGlow 3s ease-in-out 3s infinite; }
@keyframes bnBlink {
  0% { opacity: 0; }
  14%, 43%, 71% { opacity: 1; }
  28%, 57% { opacity: .15; }
  100% { opacity: .6; }
}
@keyframes bnGlow { 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .bn-was { display: none; }
  .bg-new .bn-ring, .bg-new.arrive .bn-ring { animation: none; opacity: .8; }
}

/* ---- MG1 connect the home camera ---- */
.hc-play { font-size: .95rem; }
body.mode-landscape .hc-play { font-size: calc(var(--ui) * 1.15); }
/* the game's title on the left of the panel, the connection state on the right */
.hc-top { display: flex; align-items: center; gap: .6em; }
.hc-top b { font-family: var(--font); font-size: 1.3em; }
.hc-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--wash2); margin-left: auto; flex: none; }
.hc-live .hc-dot { background: var(--accent); }
.hc-lost .hc-dot { background: var(--bad); }
.hc-state { font-family: var(--font); font-weight: 700; color: var(--muted); }
.hc-live .hc-state { color: var(--accent); }
.hc-lost .hc-state { color: var(--bad); }
/* the screen takes every bit of panel the title row leaves */
.hc-screen {
  position: relative; flex: 1 1 auto; min-height: 7em; overflow: hidden;
  background: #20242e; border: 2.5px solid var(--ink); border-radius: .8em;
}
.hc-static {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, #262b36 0 7px, #1d222b 7px 14px);
  animation: hcNoise 1.1s steps(6) infinite;
}
@keyframes hcNoise { 50% { transform: translateY(-3px); } }
.hc-feed { position: absolute; inset: 0; }
/* the kitchen, once the line connects (FEED in MINIGAMES.homeCamera) */
.hc-feed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-blocks { position: absolute; inset: 0; display: grid; grid-auto-rows: 1fr; }
.hc-blocks i { background: #20242e; transition: opacity .25s ease; }
.hc-blocks i.off { opacity: 0; }
/* the bar, the line under it and Refresh, in the middle of the screen —
   all three go when the picture arrives */
.hc-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .8em; padding: 1em; text-align: center;
}
.hc-barwrap { display: flex; align-items: center; gap: .6em; width: min(100%, 26em); }
.hc-bar { flex: 1; height: .7em; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.hc-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.hc-lost .hc-bar i { background: var(--bad); }
.hc-pct { font-family: var(--font); font-size: .82em; color: #ffffff; min-width: 3em; text-align: right; }
.hc-note { font-size: .9em; color: #ffffff; min-height: 1.4em; }

/* ============================================================
   HOME PAGE + ENTRY SURVEY — both landscape, both on the poster
============================================================ */

/* ---- the home page: its words straight on the cover's purple (the purple
   and its moving texture: HOME PAGE BACKGROUND, at the end of this file) ---- */
body.mode-landscape #scr-title { display: none; }
body.mode-landscape #scr-title.active {
  display: flex; flex-direction: column; position: relative; height: 100%;
  padding: 0 0 var(--foot-h); overflow: hidden;
}
body.mode-landscape .title-inner {
  width: min(92%, calc(var(--ui) * 56));
  max-height: 100%;
  overflow-y: auto;
  padding: calc(var(--ui) * 3) calc(var(--ui) * 3.4);
  gap: calc(var(--ui) * 1.1);
}
body.mode-landscape .wordmark { font-size: calc(var(--ui) * 5.2); line-height: 1.02; color: #ffffff; }
body.mode-landscape .t-blurb { font-size: calc(var(--ui) * 1.24); line-height: 1.5; max-width: 52ch; color: #ffffff; opacity: .92; }
body.mode-landscape .t-blurb b { color: #ffffff; }
body.mode-landscape #scr-title .btn { margin-top: calc(var(--ui) * .6); }
/* Enter the lab's label in the middle of the button, even on a very short
   screen, where the title card runs out of room and the button gives some
   of its height */
body.mode-landscape #scr-title .btn { display: inline-flex; align-items: center; justify-content: center; }

/* ---- the survey ---- */
body.mode-landscape #scr-survey { display: none; }
body.mode-landscape #scr-survey.active {
  display: flex; position: relative; height: 100%; padding: 0;
  align-items: center; justify-content: center; overflow: hidden;
}
/* its ☰, where the day's stands; the volume in a popup under it
   (Game.surveyMenuButton) */
body.mode-landscape .sv-menu-btn { position: absolute; z-index: 5; top: calc(var(--ui) * 2.2); left: calc(var(--ui) * 2.4); }
.sel-menu.sv-vol-menu { top: calc(var(--ui) * 6.4); left: calc(var(--ui) * 2.4); }
.sv-card {
  width: min(94%, 46em); max-height: 92%; display: flex; flex-direction: column;
  gap: .9em; font-size: .95rem;
  background: rgba(250,249,245,.96); border: 2.5px solid var(--ink); border-radius: 1.2em;
  padding: 1.5em 1.7em; box-shadow: 0 6px 0 var(--ink), 0 18px 46px rgba(10,16,30,.3);
}

/* ---- SURVEY CLIPBOARD — every page of both surveys lies on the same
   picture (SURVEY_BOARD in js/survey.js), at one fixed size: a short
   question never shrinks it, a long one scrolls on the sheet instead.
   ✏️  its size: --sv-h, the height. 50.8 u (1 u = 1% of the game's width)
       — or 50 ui where the type runs larger than the canvas (laptops,
       tablets), so the longest question still fits — and never taller
       than the screen allows: only the picture's clear margin may run
       past it, which is what happens on phones. The width follows the
       picture's own 1471 × 1069, so it is never stretched.
   ✏️  where the words sit: the four insets on .sv-card, in % of the
       picture — on the white sheet, below the clip, with a wide margin
       to the sheet's edges (it runs from ~6% to ~93% across) ---- */
body.mode-landscape .sv-board {
  --sv-h: min(max(calc(var(--u) * 50.8), calc(var(--ui) * 50)),
              calc((var(--stage-h) - var(--foot-h, 0px) - var(--u) * 1.2) / .95));
  --sv-w: calc(var(--sv-h) * 1471 / 1069);
  position: relative; flex: none; width: var(--sv-w); height: var(--sv-h);
}
body.mode-landscape .sv-board::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--sv-board) center / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(var(--u) * .6) calc(var(--u) * 1.3) rgba(10, 16, 30, .32));
}
/* the right inset also keeps the buttons clear of the sheet's curled corner */
body.mode-landscape .sv-card {
  position: absolute; top: 25%; right: 14.5%; bottom: 14.5%; left: 13%;
  width: auto; max-height: none; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  font-size: calc(var(--ui) * 1.15);
}
/* Skip reads at the size of Next beside it, in the same type */
body.mode-landscape .sv-foot .link-btn { font-size: var(--btn-size); }
/* the sheet is narrow: the buttons at its foot keep to one line, beside Skip */
body.mode-landscape .sv-foot .btn { padding-inline: 1.15em; }
body.mode-landscape .sv-foot .link-btn { font-family: var(--font); font-weight: 700; }
/* the cover and the thank-you page sit in the middle of the sheet, the
   cover's note along its bottom, as wide as the words above it (a longer
   note runs on to a second line); if their words run long, those scroll
   and the buttons stay */
body.mode-landscape .sv-intro .sv-cover { margin-top: auto; }
body.mode-landscape .sv-intro .sv-foot { margin-bottom: auto; }
.sv-cover { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .9em; }
/* the scrolling part keeps a few px round its buttons, for their shadows
   and focus rings; it fades at the bottom while there is more below, and
   at the top once it has scrolled (Survey.fade, js/survey.js) */
body.mode-landscape :is(.sv-body, .sv-cover) { margin: -4px; padding: 4px; }
body.mode-landscape :is(.sv-body, .sv-cover):is(.more, .up) {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--fade-top, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 var(--fade-top, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent);
}
body.mode-landscape :is(.sv-body, .sv-cover).more { --fade-end: 2.2em; }
body.mode-landscape :is(.sv-body, .sv-cover).up { --fade-top: 1.4em; }
.sv-kicker { font-size: .72em; font-weight: 800; letter-spacing: .18em; color: var(--accent); text-transform: uppercase; }
.sv-title { font-family: var(--font); font-size: 2.1em; line-height: 1.1; }
.sv-introtext { display: flex; flex-direction: column; gap: .5em; }
.sv-introtext p { font-size: 1.05em; line-height: 1.55; color: var(--ink); }
.sv-top { display: flex; flex-direction: column; gap: .5em; flex: none; }
.sv-progress { height: .5em; background: #ffffff; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.sv-progress i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.sv-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .7em; }
.sv-q { font-family: var(--font); font-size: 1.55em; line-height: 1.2; }
/* a **bold** word in a question (unpaid, paid): in the blue highlight
   colour, and a step heavier than the question, which is bold already */
.sv-q b { font-weight: 900; color: var(--accent); }
.sv-note { font-size: .92em; line-height: 1.5; color: var(--muted); }
.sv-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5em; }
.sv-opts.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sv-opt {
  display: flex; align-items: center; gap: .7em; text-align: left; width: 100%;
  background: #ffffff; border: 2.5px solid var(--ink); border-radius: .8em;
  padding: .6em .9em; cursor: pointer; font-family: var(--font); font-size: 1em;
  font-weight: 700; color: var(--ink); box-shadow: 0 2px 0 var(--ink);
  transition: background .15s ease, transform .12s ease;
}
.sv-opt:hover { background: var(--pale); }
.sv-opt.on { background: var(--pale); transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); }
.sv-tick {
  flex: none; width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2.5px solid var(--ink); background: #ffffff;
}
.sv-opt.on .sv-tick { background: var(--accent); box-shadow: inset 0 0 0 .18em #ffffff; }
.sv-optout { margin-top: .2em; }
.sv-input {
  width: 100%; font-family: var(--font); font-size: 1em; color: var(--ink);
  background: #ffffff; border: 2.5px solid var(--ink); border-radius: .8em;
  padding: .65em .9em; box-shadow: 0 2px 0 var(--ink);
}
.sv-input:focus { outline: none; border-color: var(--accent); }
.sv-input:disabled { background: var(--wash); color: var(--muted); box-shadow: none; }
/* the grid stretches it, so it must not also ask for 100% + a margin */
.sv-input.sv-inline { grid-column: 1 / -1; margin-left: 1.8em; width: auto; }
.sv-foot { display: flex; align-items: center; justify-content: flex-end; gap: .8em; flex: none; flex-wrap: wrap; }
.sv-foot .btn { min-height: 0; padding: .55em 1.4em; font-size: 1em; border-radius: .8em; }
.sv-foot .btn:disabled { opacity: .4; cursor: default; box-shadow: 0 2px 0 var(--wash2); border-color: var(--wash2); }
.sv-foot .link-btn { font-size: .95em; }
.sv-intro .sv-foot { margin-top: .4em; }
.sv-confirm { text-align: center; gap: .6em; }
.sv-confirm b { font-family: var(--font); font-size: 1.3rem; }
.sv-confirm p { font-size: .95rem; color: var(--muted); line-height: 1.5; }
.sv-confirm-row { display: flex; gap: 10px; justify-content: center; }
body.mode-landscape .sv-confirm b { font-size: calc(var(--ui) * 2); }
body.mode-landscape .sv-confirm p { font-size: calc(var(--ui) * 1.15); }
@media (max-height: 520px) {
  .sv-opts.two { grid-template-columns: 1fr 1fr; }
}

/* a scene with its own background image is shown exactly as painted —
   the mood filters below only dress the shared city plate */
body.mode-landscape #bgLayer.own { filter: none; }
body.mode-landscape #bgLayer.own::after { background: none; }

/* ============================================================
   PLAYTEST BACK BUTTON — undoes the last page (Game.back, engine.js)
   Under the top bar on the left, above every other layer of the game.
   The pill stays small and see-through; on touch screens the invisible
   button around it grows into a finger-sized target (the --hit-*
   paddings) that reaches down and sideways, never up into the ☰.
   ✏️  Remove it for the final game: SHOW_BACK_BUTTON = false in js/util.js
============================================================ */
#btnBack {
  --hit-t: 3px; --hit-r: 6px; --hit-b: 3px; --hit-l: 6px;
  --back-top: 58px; --back-left: 12px;
  position: absolute; z-index: 1000;          /* above every layer of the game */
  top: calc(var(--back-top) - var(--hit-t)); left: calc(var(--back-left) - var(--hit-l));
  display: block; margin: 0; border: 0; background: none; cursor: pointer;
  padding: var(--hit-t) var(--hit-r) var(--hit-b) var(--hit-l);
  font-family: var(--font); line-height: 1;
}
#btnBack[hidden] { display: none; }
#btnBack .bk-pill {
  display: flex; align-items: center; gap: .4em;
  font-size: .78rem; font-weight: 800; letter-spacing: .05em; color: #ffffff;
  padding: .45em 1em .45em .85em; border-radius: 999px;
  background: rgba(14, 18, 30, .42);
  border: 1.5px solid rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: background .15s ease, opacity .15s ease, transform .1s ease;
}
#btnBack .bk-arrow { font-size: 1.1em; line-height: .8; }
#btnBack:hover .bk-pill { background: rgba(14, 18, 30, .6); }
#btnBack:active .bk-pill { transform: scale(.94); }
#btnBack:focus-visible { outline: none; }
#btnBack:focus-visible .bk-pill { outline: 2px solid #ffffff; outline-offset: 2px; }
#btnBack:disabled { cursor: default; }
#btnBack:disabled .bk-pill { opacity: .4; background: rgba(14, 18, 30, .42); transform: none; }
body.mode-landscape #btnBack {
  --back-top: calc(var(--ui) * 6.1 + 6px);
  --back-left: calc(var(--ui) * 2.4);
}
body.mode-landscape #btnBack .bk-pill { font-size: max(11px, calc(var(--ui) * .95)); }
@media (pointer: coarse) {
  #btnBack { --hit-t: 2px; --hit-r: 22px; --hit-b: 20px; --hit-l: 14px; }
}

/* ============================================================
   THE DAY'S MENU — the ☰ at the left of a day's top bar (Game.openDayMenu
   in js/engine.js): a small card over the dimmed day with the volume on
   top (Sound.control in js/sound.js), then Back to the game and
   Back to the main menu. Esc, or a click beside the card, is Back to the
   game too.
============================================================ */
.day-menu {
  display: flex; flex-direction: column; gap: calc(var(--ui) * 1);
  width: calc(var(--ui) * 30); max-width: 100%; box-sizing: border-box;
  padding: calc(var(--ui) * 2) calc(var(--ui) * 2.2);
  background: var(--paper); color: var(--ink);
  border: calc(var(--ui) * .22) solid var(--ink); border-radius: calc(var(--ui) * 1.4);
  box-shadow: 0 calc(var(--ui) * .3) 0 var(--ink), 0 calc(var(--ui) * 1.4) calc(var(--ui) * 4) rgba(0, 0, 0, .45);
  animation: paraIn .18s ease;
}
.day-menu .btn { width: 100%; }
/* the volume: its speaker, whose waves follow the level (a cross
   at 0), and the slider */
.vol-row {
  display: flex; align-items: center; gap: calc(var(--ui) * .9);
  padding: calc(var(--ui) * .2) calc(var(--ui) * .2) calc(var(--ui) * .7);
}
.vol-spk { flex: none; width: calc(var(--ui) * 2.2); height: calc(var(--ui) * 2.2); overflow: visible; color: var(--ink); }
.vol-spk path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vol-spk .spk-body { fill: currentColor; stroke-width: 1.4; }
.vol-spk .spk-x,
.vol-spk[data-level="0"] :is(.spk-w1, .spk-w2),
.vol-spk[data-level="1"] .spk-w2 { display: none; }
.vol-spk[data-level="0"] .spk-x { display: inline; }
.vol-range {
  --trk: max(5px, calc(var(--ui) * .5)); --thm: max(18px, calc(var(--ui) * 1.6));
  -webkit-appearance: none; appearance: none; display: block; flex: 1; min-width: 0;
  margin: 0; padding: 0; height: max(28px, calc(var(--ui) * 2.4));
  background: none; cursor: pointer;
}
.vol-range:focus { outline: none; }
.vol-range::-webkit-slider-runnable-track {
  height: var(--trk); border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 70%), #e4e2d9 var(--fill, 70%));
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.vol-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: var(--thm); height: var(--thm); margin-top: calc((var(--trk) - var(--thm)) / 2);
  border-radius: 50%; background: #ffffff; border: 2px solid var(--ink); box-shadow: 0 1.5px 0 var(--ink);
}
.vol-range::-moz-range-track { height: var(--trk); border-radius: 999px; background: #e4e2d9; box-shadow: inset 0 0 0 1.5px var(--ink); }
.vol-range::-moz-range-progress { height: var(--trk); border-radius: 999px; background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--ink); }
.vol-range::-moz-range-thumb {
  box-sizing: border-box; width: var(--thm); height: var(--thm);
  border-radius: 50%; background: #ffffff; border: 2px solid var(--ink); box-shadow: 0 1.5px 0 var(--ink);
}
.vol-range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--accent); outline-offset: 2px; }
.vol-range:focus-visible::-moz-range-thumb { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   SITE CHROME, SURVEYS, TUTORIAL, RESULTS, SHARE CARD
   The chrome's words, links and images: SITE in js/site.js
============================================================ */

body { --foot-h: 30px; }             /* js/site.js swaps in the footer's real height */

/* ---- the two logos, side by side. Height and gap come from SITE.logos
   (canvas units); --logo-scale shrinks the pair inside a card ---- */
.brand {
  display: flex; align-items: center; flex: none;
  gap: calc(var(--ui, 8px) * var(--logo-gap, 1.6) * var(--logo-scale, 1));
}
.brand img {
  display: block; flex: none; width: auto;
  height: calc(var(--ui, 8px) * var(--logo-h, 4.2) * var(--logo-scale, 1));
}

/* ---- footer: two lines of text at the bottom of every screen, with no
   band behind them. The demo stamp keeps its own corner (#devTag); where
   it would touch the lines, js/site.js sets --foot-side to step round it ---- */
#siteFoot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 5px 12px calc(5px + env(safe-area-inset-bottom)) max(12px, var(--foot-side, 0px));
  background: none; color: var(--muted);
  font-family: var(--font); font-size: .7rem; line-height: 1.4; text-align: center;
  pointer-events: none;                 /* clicks pass through to the page behind … */
}
.foot-lines a { pointer-events: auto; } /* … except on the links */
.foot-lines a, .foot-lines span { color: var(--ink); font-weight: 700; }
.foot-lines a { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
/* over the game's pictures: white, with a shadow that lifts it off any art */
body.mode-landscape #siteFoot {
  font-size: max(9px, calc(var(--ui) * .8));
  padding: calc(var(--ui) * .4) calc(var(--ui) * 1.2) calc(var(--ui) * .4 + env(safe-area-inset-bottom)) max(calc(var(--ui) * 1.2), var(--foot-side, 0px));
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 8px rgba(0, 0, 0, .45);
}
body.mode-landscape .foot-lines a, body.mode-landscape .foot-lines span { color: #ffffff; }
body.mode-landscape .foot-lines a:hover { color: var(--pale); }
/* "Choose a future" has pale panels behind the lines, so dark ink there */
body.mode-landscape #siteFoot[data-on="select"] { color: var(--ink); text-shadow: 0 0 5px rgba(255, 255, 255, .9); }
body.mode-landscape #siteFoot[data-on="select"] .foot-lines a,
body.mode-landscape #siteFoot[data-on="select"] .foot-lines span { color: var(--ink); }

/* every screen keeps the footer's strip (--foot-h) clear — and a screen
   that scrolls stops above it, so nothing slides behind the footer's text */
body.mode-landscape #storyPane { bottom: calc(var(--foot-h) + var(--ui) * .9); }
body.mode-landscape #scr-select .select-foot { bottom: calc(var(--foot-h) + var(--ui) * 1.4); }
body.mode-landscape #scr-survey.active { padding-bottom: var(--foot-h); }
body.mode-landscape #scr-end.active, body.mode-landscape #scr-clock.active { margin-bottom: var(--foot-h); }
body.mode-landscape .clk-inner { margin-bottom: calc(var(--ui) * 3); }
#scr-journal.active, #scr-compass.active { margin-bottom: var(--foot-h); }
#scr-journal, #scr-compass { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

/* ---- home page: logos top-left, the title card, the publication banner ---- */
.home-logos { flex: none; padding: calc(var(--ui) * 2.2) calc(var(--ui) * 2.4) 0; }
.home-logos .brand img { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
.home-main {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--ui) * 1.2) calc(var(--ui) * 2.4);
}
.pub-banner {
  flex: none; display: flex; align-items: center; justify-content: center;
  gap: calc(var(--ui) * 2.6); padding: calc(var(--ui) * 1.3) calc(var(--ui) * 6);
  background: var(--pub-banner, #26246a); color: #ffffff; text-align: left;
}
.pb-cover { flex: none; display: block; line-height: 0; }
.pb-cover img {
  display: block; width: auto; height: calc(var(--ui) * 9.6);
  border-radius: calc(var(--ui) * .25);
  box-shadow: 0 calc(var(--ui) * .4) calc(var(--ui) * 1.4) rgba(0, 0, 0, .4);
  transition: transform .2s ease;
}
.pb-cover:hover img { transform: translateY(-3px); }
.pb-text {
  min-width: 0; max-width: calc(var(--ui) * 64);
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--ui) * .8);
}
.pb-text p { font-size: calc(var(--ui) * 1.2); line-height: 1.55; }
.pb-cta {
  color: #ffffff; background: none; font-weight: 800; font-size: calc(var(--ui) * 1.2);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em;
}
.pb-cta:hover { opacity: .82; }

/* ============================================================
   MINIGAMES PAGE — the home page's entry (bottom-right) and the page it
   opens: the heading, then one column per future with a card for each
   of its mini games (built in js/engine.js → renderMinigames). The page
   sits on the home page's purple.
============================================================ */
.home-main { position: relative; }
.home-mg-btn { display: none; }
body.mode-landscape .home-mg-btn {
  display: inline-flex; align-items: center; gap: .6em;
  position: absolute; right: calc(var(--ui) * 2.4); bottom: calc(var(--ui) * 1.2);
  font: 800 calc(var(--ui) * 1.15)/1 var(--font); color: var(--ink);
  background: #ffffff; border: 2.5px solid var(--ink); border-radius: calc(var(--ui) * .9);
  padding: calc(var(--ui) * .75) calc(var(--ui) * 1.15); box-shadow: 0 2px 0 var(--ink); cursor: pointer;
  transition: transform .12s ease;
}
body.mode-landscape .home-mg-btn:hover { transform: translateY(-2px); }
body.mode-landscape .home-mg-btn:active { transform: translateY(2px); box-shadow: none; }
/* the small "play" triangle on the entry and on each card */
.hm-play, .mgl-play {
  flex: none; width: 0; height: 0;
  border-left: .62em solid var(--accent);
  border-top: .4em solid transparent; border-bottom: .4em solid transparent;
}

body.mode-landscape #scr-minigames { display: none; }
body.mode-landscape #scr-minigames.active {
  display: flex; flex-direction: column; position: relative; height: 100%;
  padding: 0 0 var(--foot-h); overflow: hidden;
}
/* the heading and the columns sit together in the middle of the page;
   a screen too short for them scrolls instead */
.mgl-body {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  padding: calc(var(--ui) * 2.3) calc(var(--ui) * 2.4) calc(var(--ui) * 1.4);
}
.mgl-inner { margin: auto 0; }
.mgl-head {
  font-family: var(--font); font-size: calc(var(--ui) * 2.6); line-height: 1.1;
  color: #ffffff; text-align: center; margin-bottom: calc(var(--ui) * 1.9);
}
/* a section's heading and cards are placed straight on this grid (see
   renderMinigames), so each row of cards shares one height */
.mgl-grid {
  display: grid; grid-template-columns: repeat(var(--mg-cols, 4), minmax(0, 1fr));
  gap: .7em calc(var(--ui) * 1.6); font-size: calc(var(--ui) * 1.25);
}
.mgl-sec { display: contents; }
.mgl-sec h3 {
  align-self: end;
  font-family: var(--font); font-size: 1.3em; line-height: 1.2; color: #ffffff;
  padding-bottom: .4em; margin-bottom: .1em; border-bottom: 3px solid var(--accent);
}
.mgl-card {
  display: flex; align-items: flex-start; gap: .8em; width: 100%; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer;
  background: #ffffff; border: 2.5px solid var(--ink); border-left: .45em solid var(--accent);
  border-radius: .8em; padding: .75em .9em; box-shadow: 0 2px 0 var(--ink);
  transition: transform .12s ease;
}
.mgl-card:hover { transform: translateY(-2px); }
.mgl-card:active { transform: translateY(2px); box-shadow: none; }
.mgl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .35em; }
.mgl-card .mgl-play { align-self: center; }
.mgl-id {
  font-size: .72em; font-weight: 800; letter-spacing: .06em; line-height: 1;
  color: #ffffff; background: var(--accent); border-radius: 999px; padding: .3em .65em;
}
.mgl-name { font-size: 1em; font-weight: 800; line-height: 1.25; }
@media (max-height: 520px) {
  /* phones: the heading level with Back, the columns lined up under it,
     tighter cards without the ▸ — so all the cards fit without scrolling */
  .mgl-body { padding: calc(var(--u) * 1.3) calc(var(--u) * 1.2) calc(var(--u) * .8); }
  .mgl-inner { margin: 0 0 auto; }
  .mgl-head { margin-bottom: calc(var(--u) * 2.2); }
  .mgl-grid { gap: .6em calc(var(--u) * 1.4); }
  .mgl-sec h3 { font-size: 1.1em; }
  .mgl-card { padding: .5em .65em; }
  .mgl-card .mgl-play { display: none; }
}

/* ---- Choose a future: the line under the heading ---- */
body.mode-landscape #scr-select .select-head { width: max-content; max-width: calc(var(--ui) * 62); text-align: center; }
body.mode-landscape #scr-select .select-head p {
  font-size: calc(var(--ui) * 1.05); line-height: 1.45; color: var(--ink); margin-top: calc(var(--ui) * .3);
}

/* ---- surveys: the 1–5 scale, long answers, the number check, the link ---- */
.sv-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6em; margin-top: .2em; }
.sv-pt {
  font-family: var(--font); font-size: 1.25em; font-weight: 800; color: var(--ink);
  background: #ffffff; border: 2.5px solid var(--ink); border-radius: .75em;
  padding: .45em 0; cursor: pointer; box-shadow: 0 2px 0 var(--ink);
  transition: background .15s ease, transform .12s ease;
}
.sv-pt:hover { background: var(--pale); }
.sv-pt.on { background: var(--accent); color: #ffffff; transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); }
.sv-ends { display: flex; justify-content: space-between; gap: 1em; font-size: .88em; font-weight: 700; color: var(--muted); }
.sv-area { resize: none; min-height: 6.4em; line-height: 1.45; }
.sv-input.bad, .sv-input.bad:focus { border-color: var(--bad); }
.sv-error { min-height: 1.4em; font-size: .9em; font-weight: 700; color: var(--bad); }
.sv-link { color: var(--accent); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.sv-q .sv-optional { font-weight: 400; color: var(--muted); }

/* ---- the three screens before a day: each line types itself out ---- */
.tw { visibility: hidden; }
.tw.on { visibility: visible; }
#story .para.tw-line { animation: none; }
/* its button keeps its place, hidden, while the lines type — the panel is as
   tall as its text, so nothing moves when the button appears */
#actions .tw-btn.tw-wait { visibility: hidden; animation: none; }
body.mode-landscape #storyPane.tut { width: calc(var(--u) * 58); }

/* ---- results page: the day, with the publication card under it, on the
   left; care badges and the path on the right. --ef is the size its text
   scales from, and the share card uses the same one ---- */
body.mode-landscape .end-grid {
  --ef: calc(var(--ui) * 1.32);
  font-size: var(--ef);
  width: calc(var(--u) * 94);
  margin: calc(var(--ui) * 2.4) auto;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: calc(var(--ui) * 1.6); align-items: start;
}
.end-col { display: flex; flex-direction: column; gap: .9em; min-width: 0; }
.end-main, .end-panel {
  background: rgba(250, 249, 245, .96);
  border: calc(var(--ui) * .22) solid var(--ink); border-radius: calc(var(--ui) * 1.2);
  box-shadow: 0 calc(var(--ui) * 1.4) calc(var(--ui) * 3) rgba(10, 16, 30, .34);
}
.end-main { display: flex; flex-direction: column; gap: .9em; padding: 1.7em 1.9em; }
.end-panel { padding: 1.1em 1.2em; }
body.mode-landscape .end-grid .end-k { font-size: .8em; }
body.mode-landscape .end-grid h2 { font-family: var(--font); font-size: 2.2em; line-height: 1.12; }
.end-p { font-size: 1.05em; line-height: 1.6; }
.end-p b { color: var(--accent); }
body.mode-landscape .end-grid .en-k { font-size: .76em; }
body.mode-landscape .end-grid .en-sub { font-size: .8em; }
body.mode-landscape .end-grid .tu, .sd .tu { gap: .5em; padding: .95em 1.1em; }
body.mode-landscape .end-grid .tu.reveal .tu, .sd .tu.reveal .tu {
  gap: .5em; border-top-width: calc(var(--ui) * .15); margin-top: .3em; padding: .85em 0 0;
}
body.mode-landscape .end-grid .rv-stats { gap: .55em; margin: .15em 0; }
body.mode-landscape .end-grid .rv-stat { gap: .1em; border-width: calc(var(--ui) * .15); border-radius: .7em; padding: .5em .75em .45em; }
body.mode-landscape .end-grid .rv-stat small { font-size: .8em; }
body.mode-landscape .end-grid .rv-stat b { font-size: 1.55em; }
body.mode-landscape .end-grid .en-lead, .sd .en-lead { font-size: .94em; line-height: 1.55; }
body.mode-landscape .end-grid .tu-row small, .sd .tu-row small { width: 9.5em; font-size: .86em; }
body.mode-landscape .end-grid .tu-row b, .sd .tu-row b { width: 3.4em; font-size: .9em; }
body.mode-landscape .end-grid .tu-bar, .sd .tu-bar { height: .95em; }
body.mode-landscape .end-grid .tag-item b { font-size: .95em; }
body.mode-landscape .end-grid .tag-item p { font-size: .9em; }
body.mode-landscape .end-grid .badge-item > summary { align-items: center; gap: .8em; padding: .6em .8em; }
body.mode-landscape .end-grid .badge-item b { font-size: .92em; line-height: 1.35; }
body.mode-landscape .end-grid .badge-item p { font-size: .88em; padding: 0 1em .9em 4.8em; }
body.mode-landscape .end-grid .badge-item .bi-chev { font-size: 1.05em; }
body.mode-landscape .end-grid .end-path { border-width: calc(var(--ui) * .22); border-radius: calc(var(--ui) * 1.2); }
body.mode-landscape .end-grid .end-path > summary { gap: .8em; padding: .95em 1.1em; }
body.mode-landscape .end-grid .end-path .ep-k { font-size: .76em; }
body.mode-landscape .end-grid .end-path .bi-chev { font-size: 1.05em; }
body.mode-landscape .end-grid .end-path ul { margin: -.1em 1.1em .95em 2.3em; }
body.mode-landscape .end-grid .end-path li { font-size: .92em; }

/* a care badge's picture — BADGE_IMAGE (js/util.js) until the badge has
   its own `image:`; the dashed ◆ square when that is null too */
.bi-img {
  flex: none; width: 2.6em; height: 2.6em; border-radius: .6em; overflow: hidden;
  display: grid; place-items: center;
  background: var(--pale); border: 2px dashed var(--accent); color: var(--accent);
}
.bi-img i { font-style: normal; font-size: 1.1em; line-height: 1; }
.bi-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.badge-item.locked .bi-img { background: var(--wash); border-color: var(--muted); color: var(--muted); }
.bi-img.pic { background: #ffffff; border: 2px solid var(--pale); }
.bi-img.pic img { object-fit: contain; padding: .2em; }
/* a badge not unlocked yet: its picture in grey */
:is(.badge-item, .bb-item).locked .bi-img.pic { background: #ffffff; border-color: var(--wash2); }
:is(.badge-item, .bb-item).locked .bi-img.pic img { filter: grayscale(1); opacity: .6; }

/* ---- the publication card: results page, and the share card (no logos) ---- */
.pub-card {
  display: flex; flex-direction: column; gap: .9em; min-width: 0;
  background: var(--pub-color, #36348f); color: #ffffff;
  border: calc(var(--ui) * .22) solid var(--ink); border-radius: calc(var(--ui) * 1.2);
  padding: 1.1em 1.2em;
}
.pub-card .brand { --logo-scale: .6; }
.pc-row { display: flex; align-items: center; gap: 1em; }
.pc-row p { flex: 1; min-width: 0; font-size: .95em; line-height: 1.55; }
.pc-cover { flex: none; display: block; line-height: 0; }
.pc-cover img { display: block; width: auto; height: 7.6em; border-radius: .2em; box-shadow: 0 .3em .9em rgba(0, 0, 0, .4); }
.pc-qr { flex: none; display: block; line-height: 0; background: #ffffff; padding: .3em; border-radius: .35em; }
.pc-qr img { display: block; width: 5.6em; height: 5.6em; image-rendering: pixelated; }

/* ---- the share card: a dialog over the results page (Preview), or on its
   own when a shared link opens; the future's final picture behind it ---- */
.sd-backdrop {
  position: absolute; inset: 0; z-index: 2; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--ui) * 2.4) 0 calc(var(--foot-h) + var(--ui) * 1.4);
  animation: sdIn .22s ease;
}
/* its shade covers the whole screen — the bands beside or under the 16:9
   canvas too, on a screen of another shape — while the card keeps to the
   canvas (it is 70% of this box's width); a click on it closes the card */
.sd-backdrop::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: rgba(8, 12, 22, .6);
}
@keyframes sdIn { from { opacity: 0; } }
/* a shared link's page: the card fills the screen (.sd-page, below) */
body.mode-landscape #scr-shared.active {
  align-items: stretch; justify-content: flex-start; overflow: hidden;
  padding: 0 0 var(--foot-h);
}
.sd {
  --ef: calc(var(--ui) * 1.32);
  position: relative; width: 70%; max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  font-size: var(--ef); color: var(--ink); text-align: left;
  border: calc(var(--ui) * .22) solid var(--ink); border-radius: calc(var(--ui) * 1.4);
  background-color: var(--ph1);
  background-image: linear-gradient(160deg, var(--ph1) 0%, var(--ph2) 45%, var(--ph3) 100%);
  background-size: cover; background-position: center;
  box-shadow: 0 calc(var(--ui) * 1.4) calc(var(--ui) * 4) rgba(0, 0, 0, .45);
}
/* a little shade along the top, so ← and the logos read on any picture */
.sd::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8em; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent);
}
.sd-top { position: relative; flex: none; display: flex; align-items: center; gap: 1em; padding: 1em 1.4em .9em; }
.sd-back {
  flex: none; width: 2.5em; height: 2.5em; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .95); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
  font-family: var(--font); font-size: 1em; font-weight: 800;
}
.sd-back span { font-size: 1.35em; line-height: 1; }
.sd-back:active { transform: translateY(2px); box-shadow: none; }
.sd .brand { --logo-scale: .62; }
.sd .brand img { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); }
.sd-scroll {
  position: relative; flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: .9em; padding: 0 1.4em .6em;
}
.sd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9em; align-items: start; }
.sd-col { display: flex; flex-direction: column; gap: .9em; min-width: 0; }
.sd-card {
  display: flex; flex-direction: column; gap: .55em; min-width: 0;
  background: rgba(250, 249, 245, .96); border: 2.5px solid var(--ink); border-radius: .9em; padding: 1.1em 1.2em;
}
.sd-card h2 { font-family: var(--font); font-size: 1.95em; line-height: 1.12; }
.sd .end-k { font-size: .8em; }
.sd .tu { border-radius: .9em; }
.sd .tu .en-k { font-size: .76em; }
/* the share card lays the publication's two halves side by side */
.sd .pub-card { flex-direction: row; align-items: center; gap: 1.6em; border-width: 2.5px; border-radius: .9em; }
.sd .pub-card .pc-row { flex: 1; }
.sd .pub-card .pc-cover img { height: 6.6em; }
/* the banner under the publication card: What would you choose in 2040?
   with Play on the right (SITE.shareCard in js/site.js) */
.sd-play {
  display: flex; align-items: center; gap: 1.2em; min-width: 0;
  background: rgba(250, 249, 245, .96); border: 2.5px solid var(--ink); border-radius: .9em;
  padding: 1em 1.2em 1em 1.3em;
}
.sd-play-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2em; }
.sd-play-text b { font-family: var(--font); font-size: 1.45em; font-weight: 800; line-height: 1.15; }
.sd-play-text span { font-size: .98em; line-height: 1.4; color: var(--muted); font-weight: 700; }
.sd .sd-play-btn { flex: none; min-height: 0; font-size: 1.05em; padding: .7em 1.6em; border-radius: .8em; white-space: nowrap; }

/* the share buttons stay in view along the dialog's bottom edge: Copy
   link, then the networks (SITE.shareCard.buttons). Centred while they
   fit; a longer row scrolls sideways. */
.sd-btns {
  position: relative; flex: none;
  padding: .8em 1.4em 1em; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .4));
}
.sd-share {
  display: flex; gap: .7em; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; padding: .2em .2em .35em;          /* room for the buttons' shadow */
}
.sd-share::-webkit-scrollbar { display: none; }
.sd-share.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3.5em), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 3.5em), transparent); }
.sd-share.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5em); mask-image: linear-gradient(90deg, transparent, #000 3.5em); }
.sd-share.more-l.more-r {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5em, #000 calc(100% - 3.5em), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3.5em, #000 calc(100% - 3.5em), transparent);
}
.sd-share > :first-child { margin-left: auto; }           /* centred until the row overflows */
.sd-share > :last-child { margin-right: auto; }
.sd-btns .btn { min-height: 0; font-size: 1em; padding: .65em 1.4em; border-radius: .8em; }

/* ---- a shared link's page: the share card filling the screen — no frame,
   no ←, no share buttons (Play now is all it offers), the future's final
   picture behind it as behind every page (#bgLayer); its words in a column
   down the middle, 86% of the canvas wide (--sd-col) ---- */
.sd.sd-page {
  --sd-col: calc(var(--u) * 86);
  --sd-side: max(1.4em, calc((100% - var(--sd-col)) / 2));
  width: 100%; height: 100%; max-height: none;
  border: 0; border-radius: 0; box-shadow: none; background: none;
}
.sd-page .sd-top { padding: 1.5em var(--sd-side) 1em; }
.sd-page .sd-scroll { padding: 0 var(--sd-side) 1.6em; }
/* with nothing along its top (the logos off: SITE.showLogos), the card
   keeps that space above it */
.sd-page .sd-scroll:first-child { padding-top: 1.5em; }
/* no shade along its top (the dialog's stops at the canvas's edge, which
   shows on a screen wider than 16:9), and no shadow under the logos */
.sd-page::before { display: none; }
.sd-page .brand img { filter: none; }
.sd-btns .sd-net {
  flex: none; display: inline-flex; align-items: center; gap: .5em;
  padding: .6em 1.15em; white-space: nowrap; text-decoration: none; color: var(--ink);
}
.sd-net svg { display: block; flex: none; width: 1.2em; height: 1.2em; }
.sd-net[data-net="copy"] svg { color: var(--accent); }
.sd-net[data-net="instagram"] svg { color: #e1306c; }
.sd-net[data-net="x"] svg { color: #000000; }
.sd-net[data-net="linkedin"] svg { color: #0a66c2; }
.sd-net[data-net="whatsapp"] svg { color: #25d366; }

/* ---- phones in landscape: a short canvas, so everything reads larger ---- */
@media (max-height: 520px) {
  body.mode-landscape #storyPane.tut { width: calc(var(--u) * 68); }
  body.mode-landscape .end-grid {
    width: calc(var(--u) * 96);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .sd { width: 70%; }   /* the same share of the screen as on desktop */
  .sd-grid { grid-template-columns: minmax(0, 1fr); }
  .sd .pub-card { flex-direction: column; align-items: stretch; }
}


/* ============================================================
   HOME PAGE BACKGROUND — the publication cover's purple, with a slow
   grain-and-glow texture over it (the home page and the entry survey).
   ✏️  colour, texture on/off: SITE.homeBackground in js/site.js
   ✏️  speed: the durations of coverSwirl and coverGrain below (the whole
       layer also drifts on bgDrift, 46s, like every background)
============================================================ */
body.mode-landscape #bgLayer.cover {
  overflow: hidden;
  background-color: var(--home-bg, #3a3994);
  background-image:
    radial-gradient(58% 48% at 20% 24%, rgba(112, 110, 204, .34), transparent 72%),
    radial-gradient(62% 52% at 84% 88%, rgba(22, 20, 76, .5), transparent 72%);
}
/* soft light pooling and drifting, like weather over the cover's hills */
body.mode-landscape #bgLayer.cover::before {
  content: ''; position: absolute; inset: -30%; pointer-events: none;
  background:
    radial-gradient(26% 22% at 66% 34%, rgba(150, 130, 222, .22), transparent 70%),
    radial-gradient(30% 26% at 32% 70%, rgba(84, 150, 214, .12), transparent 70%),
    radial-gradient(22% 18% at 50% 52%, rgba(236, 150, 96, .05), transparent 70%);
  animation: coverSwirl 80s ease-in-out infinite alternate;
}
@keyframes coverSwirl {
  0%   { transform: translate3d(-4%, 2.5%, 0) rotate(-5deg); }
  100% { transform: translate3d(4%, -2.5%, 0) rotate(6deg); }
}
/* the cover's printed grain, sliding one tile every 90 seconds */
body.mode-landscape #bgLayer.cover::after {
  inset: -240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3 0 0 0 -1.62'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .02 0 0 0 0 .1 -3 0 0 0 1.38'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23a)' opacity='.42'/%3E%3Crect width='240' height='240' filter='url(%23b)' opacity='.5'/%3E%3C/svg%3E") 0 0 / 240px 240px repeat;
  opacity: .55;
  transition: none;
  animation: coverGrain 90s linear infinite;
}
@keyframes coverGrain { to { transform: translate3d(-240px, -240px, 0); } }
/* SITE.homeBackground.texture = false: the plain colour */
body.mode-landscape #bgLayer.cover.flat { background-image: none; }
body.mode-landscape #bgLayer.cover.flat::before,
body.mode-landscape #bgLayer.cover.flat::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  body.mode-landscape #bgLayer.cover::before,
  body.mode-landscape #bgLayer.cover::after { animation: none; }
}

/* ============================================================
   CHOOSE A FUTURE — the whole screen, a Menu, the Care Badge button
============================================================ */

/* ---- CHOOSE A FUTURE — THE WORDS ----
   Every future's words hang from one height (the canvas starts at the top
   of the screen), so a longer tagline never lifts its name: a third of the
   way down, about midway between the heading and the footer. Then its head
   — its name and title, the four heads one height (Game.levelCards in
   js/engine.js) — a gap (`margin-bottom` on .fp-head), its lines (.fp-tag)
   and whether it has been entered (.fp-meta): so the four names start
   level, and the four sets of lines under them too.
   ✏️  The gap under the heads: .fp-head's margin-bottom; the lines'
   spacing: .fp-tag's line-height. A phone's: the two @container blocks at
   the end of this file (CHOOSE A FUTURE ON A PHONE). */
body.mode-landscape .fp-inner {
  top: calc(var(--stage-h) * .35);
  transform: none;
  left: calc(var(--x0) + 4.2%); width: calc(25% - 8.4%);
  font-size: calc(var(--ui) * 1.18); gap: calc(var(--ui) * .45);
}
body.mode-landscape .fp-head { margin-bottom: calc(var(--ui) * .7); }
/* a panel under the mouse, or reached from the keyboard, lifts its words a
   little. A finger leaves a phone "hovering" the panel it last tapped, so
   there they stay put, level with the others */
body.mode-landscape .fp:hover .fp-inner { transform: none; }
body.mode-landscape .fp:focus-visible .fp-inner { transform: translateY(calc(var(--ui) * -.4)); }
@media (hover: hover) {
  body.mode-landscape .fp:hover .fp-inner { transform: translateY(calc(var(--ui) * -.4)); }
}

/* bigger words, and a darker grey that reads on the pale panels */
body.mode-landscape .fp-future { font-size: .95em; }
body.mode-landscape .fp-title { font-size: 1.75em; }
body.mode-landscape .fp-tag { font-size: 1em; line-height: 1.6; color: #5b5a55; }
body.mode-landscape .fp-meta { font-size: .86em; }
body.mode-landscape .fp-meta .rc-new,
body.mode-landscape .fp-meta .rc-notes { color: #5b5a55; }
body.mode-landscape #scr-select .select-head p { font-size: calc(var(--ui) * 1.15); }

/* ---- Menu, top-left ---- */
.sel-menu-btn, .sel-badge-btn { display: none; }
body.mode-landscape .sel-menu-btn {
  display: inline-flex; align-items: center; gap: .55em;
  position: absolute; z-index: 5; top: calc(var(--ui) * 2.4); left: calc(var(--ui) * 2.4);
  font: 800 calc(var(--ui) * 1.15)/1 var(--font); color: var(--ink);
  background: rgba(255, 255, 255, .95); border: 2.5px solid var(--ink); border-radius: calc(var(--ui) * .9);
  padding: calc(var(--ui) * .75) calc(var(--ui) * 1.15); box-shadow: 0 2px 0 var(--ink); cursor: pointer;
}
body.mode-landscape .sel-menu-btn:active { transform: translateY(2px); box-shadow: none; }
.sel-burger { display: inline-flex; flex-direction: column; justify-content: space-between; width: 1.05em; height: .82em; }
.sel-burger i { display: block; height: .14em; border-radius: 2px; background: currentColor; }

/* the popup under it */
.sel-menu {
  position: absolute; z-index: 6; top: calc(var(--ui) * 6.4); left: calc(var(--ui) * 2.4);
  display: flex; flex-direction: column; min-width: calc(var(--ui) * 15); overflow: hidden;
  background: #ffffff; border: 2.5px solid var(--ink); border-radius: calc(var(--ui) * .9);
  box-shadow: 0 3px 0 var(--ink), 0 calc(var(--ui) * 1) calc(var(--ui) * 2.4) rgba(10, 16, 30, .25);
  animation: paraIn .18s ease;
}
.sel-menu-item {
  font: 800 calc(var(--ui) * 1.12) var(--font); color: var(--ink); text-align: left;
  background: none; border: 0; padding: calc(var(--ui) * .9) calc(var(--ui) * 1.3); cursor: pointer;
}
.sel-menu-item + .sel-menu-item { border-top: 2px solid var(--wash); }
.sel-menu-item:hover, .sel-menu-item:focus-visible { background: var(--pale); outline: none; }
.sel-menu-item.danger { color: var(--bad); }
.sel-menu-item:disabled { color: var(--muted); background: none; cursor: default; }
/* the volume on top of a Menu popup (Sound.control): its speaker
   and a short slider */
.sel-menu .vol-row { padding: calc(var(--ui) * .7) calc(var(--ui) * 1.3); gap: calc(var(--ui) * .8); }
.sel-menu .vol-spk { width: calc(var(--ui) * 1.9); height: calc(var(--ui) * 1.9); }
.sel-menu .vol-range { flex: 0 0 auto; width: calc(var(--ui) * 9); }
.sel-menu .vol-row + .sel-menu-item { border-top: 2px solid var(--wash); }

/* ---- Care Badge, top-right: a square picture, its label underneath ---- */
body.mode-landscape .sel-badge-btn {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--ui) * .4);
  position: absolute; z-index: 5; top: calc(var(--ui) * 2.4); right: calc(var(--ui) * 2.4);
  background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font); color: var(--ink);
}
.sel-badge-img {
  width: calc(var(--ui) * 5.2); height: calc(var(--ui) * 5.2); border-radius: calc(var(--ui) * .9);
  display: grid; place-items: center; overflow: hidden;
  background: #ffffff; border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
  transition: transform .15s ease;
}
.sel-badge-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* BADGE_IMAGE standing in for the button's own picture: whole, with room round it */
.sel-badge-img.stand-in img { object-fit: contain; padding: 14%; }
/* the placeholder — the same dashed square as a badge's picture */
.sel-badge-img.ph { background: var(--pale); border: 2.5px dashed var(--accent); color: var(--accent); }
.sel-badge-img.ph i { font-style: normal; font-size: calc(var(--ui) * 2); line-height: 1; }
.sel-badge-btn:hover .sel-badge-img { transform: translateY(-2px); }
.sel-badge-label {
  font-size: calc(var(--ui) * 1); font-weight: 800; line-height: 1.1; white-space: nowrap;
  text-shadow: 0 0 4px rgba(255, 255, 255, .95);
}

/* ============================================================
   DIALOGS OVER "CHOOSE A FUTURE" — Care Badges and Share
   ← top-left closes them, like the share preview on a results page
============================================================ */
.dlg-backdrop {
  position: fixed; inset: 0; z-index: 10; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--ui) * 2) calc(var(--ui) * 2) calc(var(--foot-h) + var(--ui) * 1);
  background: rgba(8, 12, 22, .58);
  animation: sdIn .2s ease;
}
/* a dialog's shade covers the whole screen and all that is on it — the stamp
   in the corner and the ← Back pill too, which otherwise stand above the game */
body:has(:is(.dlg-backdrop, .sd-backdrop)) #devTag { z-index: 0; }
#app:has(:is(.dlg-backdrop, .sd-backdrop)) #btnBack { z-index: 39; }
.dlg {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  width: calc(var(--ui) * 62); max-width: min(100%, calc(var(--stage-w) - var(--ui) * 2));
  max-height: min(100%, calc(var(--stage-h) - var(--ui) * 4));
  font-size: calc(var(--ui) * 1.2); color: var(--ink); text-align: left;
  background: var(--paper); border: calc(var(--ui) * .22) solid var(--ink); border-radius: calc(var(--ui) * 1.4);
  box-shadow: 0 calc(var(--ui) * 1.4) calc(var(--ui) * 4) rgba(0, 0, 0, .45);
}
.dlg-top { flex: none; display: flex; align-items: center; gap: .8em; padding: .9em 1.2em .7em; }
.dlg-title { font-family: var(--font); font-size: 1.6em; line-height: 1.1; }
.dlg-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: .1em 1.2em 1.3em; }

/* ---- Care Badges: four tabs that jump to a future, then every badge ---- */
.bb-tabs {
  flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 1.2em .9em; overflow: hidden;
  background: #ffffff; border: 2.5px solid var(--ink); border-radius: 999px;
}
.bb-tab {
  font: 800 .86em/1.2 var(--font); color: var(--ink); background: none; border: 0; cursor: pointer;
  padding: .62em .5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s ease, color .15s ease;
}
.bb-tab + .bb-tab { border-left: 2px solid var(--ink); }
.bb-tab:hover { background: var(--wash); }
.bb-tab.on { color: #ffffff; background: var(--tab); }
.bb-tab-growth { --tab: #4a9fd8; } .bb-tab-collapse { --tab: #e0763c; }
.bb-tab-discipline { --tab: #3f9d78; } .bb-tab-transformation { --tab: #8f7bd8; }

.bb-growth, .mgl-growth                 { --accent: #4a9fd8; --pale: #c2ddf0; }
.bb-collapse, .mgl-collapse             { --accent: #e0763c; --pale: #f4cfae; }
.bb-discipline, .mgl-discipline         { --accent: #3f9d78; --pale: #c2e2d2; }
.bb-transformation, .mgl-transformation { --accent: #8f7bd8; --pale: #d8cef2; }
.bb-sec + .bb-sec { margin-top: 1.5em; }
.bb-sec h3 { font-family: var(--font); font-size: 1.3em; line-height: 1.2; margin-bottom: .55em; }
.bb-sec h3 small { margin-left: .45em; font-family: var(--font); font-size: .64em; font-weight: 800; color: var(--accent); }
.bb-list { display: flex; flex-direction: column; gap: .5em; }
.bb-item {
  display: flex; align-items: center; gap: .85em;
  background: #ffffff; border: 2px solid var(--ink); border-left: 7px solid var(--accent);
  border-radius: .8em; padding: .6em .85em;
}
.bb-item p { font-family: var(--font); font-size: .9em; line-height: 1.5; }
/* an unlocked badge: its name, then its description on the line under it */
.bb-item p b, .bb-desc { display: block; }
.bb-desc { margin-top: .15em; }
.bb-item.locked { border-style: dashed; }
.bb-item.locked p { color: var(--muted); font-style: italic; }
.bb-item.locked .bi-img { background: var(--wash); border-color: var(--muted); color: var(--muted); }

/* ---- Share: the preview, the link with Copy, the square share buttons ---- */
.dlg-share { width: calc(var(--ui) * 52); }
.sh-preview {
  aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--wash); border: 2.5px solid var(--ink); border-radius: .8em;
}
.sh-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sh-link { display: flex; align-items: stretch; gap: .6em; margin-top: 1em; }
.sh-url {
  flex: 1; min-width: 0; font-family: var(--font); font-size: .92em; font-weight: 600; color: var(--ink);
  background: #ffffff; border: 2.5px solid var(--ink); border-radius: .7em; padding: .6em .85em;
}
.sh-url:focus { outline: none; border-color: var(--accent); }
.sh-copy { flex: none; min-height: 0; font-size: .95em; padding: .5em 1.4em; border-radius: .7em; }
.sh-social { display: flex; justify-content: center; gap: .8em; margin-top: 1em; }
.sh-net {
  font-size: inherit;                   /* a <button> would not inherit it */
  width: 3.2em; height: 3.2em; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: #ffffff; border: 2.5px solid var(--ink); border-radius: .75em; box-shadow: 0 2px 0 var(--ink);
  transition: transform .1s ease;
}
.sh-net:hover { transform: translateY(-2px); }
.sh-net:active { transform: translateY(2px); box-shadow: none; }
.sh-net svg { display: block; width: 1.65em; height: 1.65em; }
.sh-whatsapp { color: #25d366; } .sh-linkedin { color: #0a66c2; }
.sh-instagram { color: #e1306c; } .sh-x { color: #000000; }
.sh-msg { min-height: 1.3em; margin-top: .55em; text-align: center; font-size: .85em; color: var(--muted); }

/* ---- the Check-in cover: a second line in its button, a note underneath ---- */
.sv-start { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.sv-start-note { margin-top: .18em; font-size: .72em; font-weight: 400; opacity: .92; }
.sv-footnote { font-size: .82em; font-style: italic; line-height: 1.45; color: var(--muted); }

@media (max-height: 520px) {
  .sh-preview { width: 62%; margin: 0 auto; }
}

/* ============================================================
   ONE SCALE — the last fixed px / rem parts, moved onto --ui
============================================================ */
/* a <button> does not inherit its text size by default; inside the game it
   should, so labels sized in em follow whatever they sit in */
:where(body.mode-landscape) button { font-size: inherit; }

/* the check-in's skip box */
body.mode-landscape .exit-box { max-width: 90%; gap: calc(var(--ui) * .8); }
body.mode-landscape .exit-box p { font-size: calc(var(--ui) * 1.1); }

/* Turn the clock */
body.mode-landscape .clk-inner .end-k { font-size: calc(var(--ui) * .85); }
body.mode-landscape .clk-row { gap: calc(var(--ui) * 1.2); }
body.mode-landscape .clk-dial { width: calc(var(--ui) * 8.6); height: calc(var(--ui) * 8.6); }
body.mode-landscape .clk-arrow { width: calc(var(--ui) * 3.4); height: calc(var(--ui) * 3.4); font-size: calc(var(--ui) * 1.4); }
body.mode-landscape .clk-hint { font-size: calc(var(--ui) * .92); }

/* results page and share card: the small gaps and corners in em as well */
body.mode-landscape :is(.end-grid, .sd) :is(.badge-grid, .tag-list, .end-notes) { gap: .55em; }
body.mode-landscape .end-grid .end-btns { gap: .65em; margin-top: .3em; }
body.mode-landscape :is(.end-grid, .sd) :is(.badge-item, .tag-item) { border-radius: .8em; }

/* ============================================================
   PHONES — short landscape screens: layout only
   Text, buttons and cards use the same --ui scale on every screen. On a
   canvas ~360px tall these rules only tighten spacing and cap pictures and
   play areas by the screen's height, so each page still fits.
============================================================ */
@media (max-height: 520px) {
  body.mode-landscape #story { padding: calc(var(--u) * 1.7) calc(var(--u) * 1.9); }
  body.mode-landscape #story .para { margin-bottom: calc(var(--u) * 1.3); }
  body.mode-landscape .title-inner { padding: calc(var(--u) * 2) calc(var(--u) * 2.6); gap: calc(var(--u) * .8); padding: calc(var(--u) * 1.5) calc(var(--u) * 2.6); gap: calc(var(--u) * .55); }
  /* the survey clipboard is as tall as the screen allows here (see SURVEY
     CLIPBOARD). On this small sheet the margins are a little narrower, so
     two options still share a line; the pages sit a little tighter, and
     the step and its bar share one line */
  body.mode-landscape .sv-card { top: 24.5%; right: 13%; bottom: 13.5%; left: 11%; gap: .5em; }
  body.mode-landscape .sv-foot { padding-right: calc(var(--sv-w) * .015); }   /* clear of the curled corner */
  body.mode-landscape .sv-top { flex-direction: row; align-items: center; gap: .9em; }
  body.mode-landscape .sv-progress { flex: 1 1 4em; }
  body.mode-landscape .sv-body { gap: .4em; }
  .sv-opts { gap: .34em; }
  .sv-opt { padding: .3em .5em; gap: .5em; line-height: 1.25; }
  body.mode-landscape .sv-cover { gap: .7em; }
  body.mode-landscape .sv-intro .sv-foot { margin-top: 0; }
  body.mode-landscape .sv-introtext { gap: .35em; }
  body.mode-landscape .sv-introtext p { line-height: 1.45; }
  /* the buttons no longer move, so the number check keeps no empty line */
  .sv-error { min-height: 0; }
  .home-logos { padding-top: calc(var(--u) * 1.4); }
  .home-logos .brand { --logo-scale: .8; }
  .home-main { padding: calc(var(--u) * .8) calc(var(--u) * 2.4); }
  /* THE GAME'S BUTTON, on a phone: less padding above and below */
  body.mode-landscape { --btn-y: .5; --btn-x: 2; }
  /* a story page's words and choices share a short panel: the choices closer
     together */
  body.mode-landscape #actions { margin-top: calc(var(--ui) * .8); gap: calc(var(--ui) * .6); }
  /* a full-screen game's corner button and its card low in the view, clear of
     what it plays with: on a phone the whole picture is small. The iPhone's home
     bar stands in the middle, not in this corner, so they don't step over it.
     The footer's words step over only as much of its strip as they need,
     which leaves the story panel more room */
  .mg-full-corner, .fs-task.fs-foot { bottom: calc(var(--ui) * .6); }
  body.mode-landscape #siteFoot { padding-bottom: calc(var(--ui) * .4 + env(safe-area-inset-bottom) * .5); }
  body.mode-landscape #scr-title .btn.big { margin-top: calc(var(--u) * .3); }
  .pub-banner { padding: calc(var(--u) * .7) calc(var(--u) * 3); gap: calc(var(--u) * 2); }
  .pb-cover img { height: calc(var(--u) * 8); }
  .pb-text { gap: calc(var(--u) * .35); }
  body.mode-landscape .end-grid { gap: calc(var(--u) * 1.2); margin-top: calc(var(--u) * 1.6); }
  .end-main { padding: 1.1em 1.2em; }
  .sd .pub-card { gap: .9em; }
  body.mode-landscape #scr-select .select-head { top: calc(var(--u) * 1.2); padding: calc(var(--u) * .35) calc(var(--u) * 1.4); }
  body.mode-landscape #scr-select .select-head p { margin-top: calc(var(--u) * .1); }
  .sd-top { padding: .55em 1em .45em; gap: .7em; }
  .sd .brand { --logo-scale: .5; }
  .sd-scroll { padding: 0 1em .4em; }
  .sd-btns { padding: .5em 1em .6em; }
  .sd-btns .btn { padding: .5em 1.2em; }
  .sd-btns .sd-net { padding: .5em .95em; }
  .sd.sd-page { --sd-col: calc(var(--u) * 92); }
  .sd-page .sd-top { padding: .8em var(--sd-side) .6em; }
  .sd-page .sd-scroll { padding: 0 var(--sd-side) 1em; }
  .sd-page .sd-scroll:first-child { padding-top: .8em; }
  .sd-play { gap: .9em; padding: .75em .9em .75em 1em; }
  .sd-play-text b { font-size: 1.3em; }
  .sd .sd-play-btn { padding: .55em 1.3em; }
  body.mode-landscape .sel-menu-btn { top: calc(var(--u) * 1.2); left: calc(var(--u) * 1.2); }
  body.mode-landscape .sel-badge-btn { top: calc(var(--u) * 1.2); right: calc(var(--u) * 1.2); }
  .sel-menu { top: calc(var(--u) * 6.9); left: calc(var(--u) * 1.2); }
  .dlg-backdrop { padding: calc(var(--u) * 1) calc(var(--u) * 2) calc(var(--foot-h) + var(--u) * .6); }
  .dlg-top { padding: .5em .9em .4em; }
  .dlg-body { padding: .1em .9em .9em; }
  .bb-tabs { margin: 0 .9em .6em; }
  .dlg-share { width: calc(var(--u) * 66); }
  .sh-link, .sh-social { margin-top: .7em; }

  /* Choose a future: the heading keeps clear of the two corner buttons
     (its cards' words: CHOOSE A FUTURE ON A PHONE, at the end) */
  body.mode-landscape #scr-select .select-head { max-width: calc(100% - var(--ui) * 20); }

  /* mini games: a tighter frame, play areas capped by the screen's height */
  body.mode-landscape #storyPane.wide { --pad-y: calc(var(--u) * 1.2); --pad-x: calc(var(--u) * 1.6); --skip-gap: calc(var(--u) * .7); }
  body.mode-landscape .mg-play { gap: calc(var(--u) * .9); }
  body.mode-landscape .mg-wrap { gap: calc(var(--u) * .7); }
  body.mode-landscape .mg-card { gap: .45em; }
}

/* the smallest labels never drop below a readable size */
.wk-label { font-size: max(8.5px, .8em); }

@media (max-height: 520px) {
  /* the enlarged mini games take a smaller step up on a phone, where the
     type is already large for the screen and the panel is short */
  body.mode-landscape .wk-play { font-size: calc(var(--ui) * 1.25); }
  /* Wake Up the City: a slightly shorter map and three details to a row,
     so the map and what has woken up both stay in view */
  body.mode-landscape #storyPane.wide .wk-map { max-height: calc(var(--u) * 22); }
  body.mode-landscape #storyPane.wide .wk-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wk-item { padding: .35em .5em; gap: .5em; }
  .wk-num { width: 1.7em; height: 1.7em; }
}
.hc-state { font-size: max(8.5px, .9em); }

@media (max-height: 520px) {
  /* the three screens before a day: a wider panel, fewer lines to scroll */
  body.mode-landscape #storyPane.tut { width: calc(var(--u) * 78); }
  /* a mini game's own lead-in lines sit closer together */
  body.mode-landscape #storyPane.wide #story .para { margin-bottom: calc(var(--u) * .8); }
  /* the Care Badges dialog reads a little larger, all of it together */
  .dlg-badges { font-size: calc(var(--ui) * 1.3); }
}

/* ============================================================
   CHOOSE A FUTURE ON A PHONE
   By the cards' own height (#selectCards is a size container), not the
   screen's: an iPhone's CSS media queries go on seeing the height its
   screen has with Safari's bars showing after the bars have gone, while
   the game view grows to the whole screen. So the words fit the view the
   player actually has. (The words on any screen: CHOOSE A FUTURE — THE
   WORDS.)
============================================================ */
body.mode-landscape #selectCards { container-type: size; container-name: cards; }

/* a phone, a view up to 520px tall: a shallower slant leaves each column
   more room between the diagonals, so its words wrap onto fewer lines —
   wide enough for "Discipline / New Equilibrium" on one, and for three of
   the titles, a size smaller — and they start higher, just under the
   heading */
@container cards (max-height: 520px) {
  .fp { --fp-slant: 3%; }
  body.mode-landscape .fp-inner { top: calc(var(--stage-h) * .26); left: calc(var(--x0) + 2.8%); width: 20.8%; gap: calc(var(--u) * .3); }
  body.mode-landscape .fp:first-child .fp-inner { left: 2.2%; width: 20.4%; }
  body.mode-landscape .fp:last-child .fp-inner { left: auto; right: 1.8%; }
  body.mode-landscape .fp-title { font-size: 1.5em; }
  body.mode-landscape .fp-head { margin-bottom: calc(var(--ui) * .8); }
  body.mode-landscape .fp-tag { line-height: 1.4; }
}
/* the shortest: a phone with its browser's bars showing, a view about
   519 × 292. The words use all the width between the diagonals and start
   right under the heading, and the lines keep their old spacing, so every
   column still ends above the footer */
@container cards (max-height: 340px) {
  body.mode-landscape .fp-inner { top: calc(var(--stage-h) * .225); left: calc(var(--x0) + 2.3%); width: 20%; gap: calc(var(--u) * .2); }
  body.mode-landscape .fp:first-child .fp-inner { left: 2%; }
  body.mode-landscape .fp:last-child .fp-inner { right: 1.7%; width: 20.8%; }
  body.mode-landscape .fp-head { margin-bottom: calc(var(--ui) * .1); }
  body.mode-landscape .fp-tag { line-height: 1.2; }
  body.mode-landscape .fp-meta { row-gap: .2em; }
}