/* ============================================================
   QUANTUM DAWN  -  the home page (hub)

   The hub used to be painted on the canvas. It is now real HTML (#qdHub in
   index.html, wired by app.js) in the "futuristic" design: the sunrise lab
   behind a dim gradient, a scientist panel and three quest cards.

   Rules of the road:
   - Everything is scoped to .qd-home / qd-* so nothing leaks into the game.
   - The hub is its own scroll box inside .sceneWrap: html and body never
     scroll (gameplay depends on that), so a tiny phone or Large Text scrolls
     in here instead. On every normal screen it fits without scrolling.
   - It sits at z-index 5: above the canvas and its banners, below the QSheet
     layer (--z-sheet 20), the settings drawer and the entry screen
     (entry.css).
   - Layouts: wide (desktop), tablet (<= 980px wide), and a compact phone
     layout (<= 680px wide, or <= 480px tall) whose landscape form puts the
     scientists beside the quests. All three Play buttons are on the first
     screen in the compact layouts too. The current layout name is published
     as --qd-layout for QuantumHub.debug() and the QA scripts.
   ============================================================ */

.qd-home {
  --qd-gold: #f5cf77;
  --qd-turquoise: #61e1d5;
  --qd-violet: #c49bff;
  --qd-ink: #091321;
  --qd-text: #f4f2eb;
  --qd-muted: #c1ccda;
  --qd-backdrop-dim: .27;
  --qd-serif: Georgia, "Times New Roman", serif;
  /* Large Text multiplies the small print by this (see the a11y block). */
  --qd-fs: 1;
  --qd-layout: wide;

  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
  color: var(--qd-text);
  /* On the scroll box itself (not a child), so the lab stays put and fills
     the screen while a tiny phone scrolls the content over it. */
  background:
    linear-gradient(180deg, rgba(4, 11, 21, .12), rgba(4, 11, 21, var(--qd-backdrop-dim)) 45%, rgba(4, 11, 21, .65)),
    url("assets/brand/lab-sunrise.webp") center center / cover no-repeat #091321;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
body[data-mode="hub"] .qd-home { display: block; }
.qd-home:focus { outline: none; }

.qd-home *, .qd-home *::before, .qd-home *::after { box-sizing: border-box; }
.qd-home [hidden] { display: none !important; }
.qd-home button { font: inherit; cursor: pointer; }
.qd-home button:focus-visible, .qd-home a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.qd-home button, .qd-home a { -webkit-tap-highlight-color: transparent; }
.qd-home h1, .qd-home h2, .qd-home h3, .qd-home p { margin: 0; }

/* The canvas hub's DOM furniture is gone; the credits text stays in the page
   as the source the credits sheet is built from, and is never shown here. */
#hubCredits { display: none !important; }

/* The hub has its own gear in the header, so the global corner gear is
   hidden here (app.js adds qd-hub-live once the hub is wired), and the
   drawer opens under the hub's gear instead of above the corner. */
body.qd-hub-live[data-mode="hub"] .settingsGear { display: none; }
body.qd-hub-live[data-mode="hub"] .settingsDrawer {
  top: var(--qd-drawer-top, 72px);
  right: var(--qd-drawer-right, 16px);
  bottom: auto;
  max-height: calc(100vh - var(--qd-drawer-top, 72px) - 12px);
}

/* ---------- shell ---------- */
.qd-shell {
  max-width: 1700px;
  min-height: 100%;
  margin: 0 auto;
  padding: 30px clamp(22px, 3.2vw, 58px) max(14px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---------- header ---------- */
.qd-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-content: center;
  align-items: center;
  column-gap: 26px;
  min-height: 108px;
  flex: none;
}
.qd-logo {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 102px;
  height: 73px;
  padding: 6px 9px;
  border-radius: 11px;
  background: #ededf1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  display: grid;
  place-items: center;
}
.qd-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.qd-eyebrow {
  grid-column: 2;
  grid-row: 1;
  font-size: calc(10px * var(--qd-fs));
  font-weight: 600;
  letter-spacing: .23em;
  text-transform: uppercase;
  color: #e0d5ba;
}
.qd-home .qd-title {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--qd-serif);
  font-size: clamp(36px, 3.6vw, 60px);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -.045em;
  color: #fff3cf;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .5);
  white-space: nowrap;
}
.qd-home .qd-title span { color: var(--qd-gold); }
/* "Welcome, <name>. Choose your scientist and quest." once a student is
   checked in (app.js syncGreeting): a long name wraps, and a name with no
   spaces breaks rather than pushing the page sideways. */
.qd-subtitle {
  grid-column: 2;
  grid-row: 3;
  margin-top: 6px !important;
  color: #d6deea;
  font-size: calc(14px * var(--qd-fs));
  overflow-wrap: anywhere;
}
.qd-tools {
  grid-column: 3;
  grid-row: 1 / 4;
  display: flex;
  align-items: center;
  gap: 10px;
}
.qd-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid rgba(245, 207, 119, .45);
  border-radius: 28px;
  background: rgba(8, 18, 31, .84);
  color: var(--qd-text);
  font-size: calc(13px * var(--qd-fs));
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.qd-tool:hover { background: #243043; border-color: var(--qd-gold); }
.qd-tool svg { width: 18px; height: 18px; flex: none; stroke: var(--qd-gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qd-icon-button { width: 44px; padding: 11px; }
/* Player details: text only, as the design has it, on a wide screen. Below
   1000px wide three labelled buttons squeeze the title (768px portrait
   tablets clipped "Dawn"), so it becomes the person icon there - in every
   layout, even where Leaderboard keeps its label. The aria-label names it
   either way. */
.qd-tool-player .qd-tool-icon { display: none; }
@media (max-width: 1000px) {
  .qd-home .qd-tool-player { width: 44px; padding: 10px; }
  .qd-home .qd-tool-player .qd-tool-label { display: none; }
  .qd-home .qd-tool-player .qd-tool-icon { display: block; }
}
.qd-icon-button[aria-expanded="true"] { border-color: var(--qd-gold); background: #243043; }

/* ---------- data error ---------- */
.qd-error {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgba(255, 140, 140, .6);
  border-radius: 12px;
  background: rgba(70, 20, 28, .92);
  color: #ffd6d6;
  flex: none;
}
.qd-error-text { flex: 1; min-width: 0; font-size: calc(13px * var(--qd-fs)); line-height: 1.4; }
.qd-error-text strong { color: #fff0f0; }
.qd-error-text span { color: rgba(255, 214, 214, .8); }
.qd-error-retry {
  flex: none;
  min-height: 44px;
  min-width: 88px;
  padding: 8px 18px;
  border: 0;
  border-radius: 8px;
  background: rgba(210, 90, 90, .95);
  color: #fff4f4;
  font-weight: 700 !important;
}
.qd-error-retry:hover { background: #e06a6a; }
.qd-home.qd-no-data .qd-roster { display: none; }

/* ---------- main grid ---------- */
.qd-main {
  display: grid;
  grid-template-columns: minmax(248px, .93fr) minmax(0, 2.7fr);
  gap: 24px;
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
}

/* ---------- scientist panel ---------- */
.qd-scientist-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(245, 207, 119, .48);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(17, 28, 41, .94), rgba(6, 16, 28, .92));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(245, 207, 119, .09);
}
.qd-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: calc(12px * var(--qd-fs));
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--qd-text);
}
.qd-section-heading > span {
  color: var(--qd-gold);
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
}
.qd-scientist-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* The hero canvas fills whatever height the stage gets, so the panel can
   give way on a short screen instead of pushing the page into a scroll. */
.qd-scientist-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 150px;
  margin-top: 10px;
}
.qd-hero {
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 100%;
  height: calc(100% - 18px);
  max-height: 230px;
  z-index: 2;
  display: block;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .35));
}
.qd-halo {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(240px, 100%);
  height: min(240px, 100%);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(243, 194, 93, .16), transparent 65%);
}
.qd-platform {
  position: absolute;
  left: 7%;
  bottom: 3px;
  width: 86%;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(245, 207, 119, .78);
  box-shadow: 0 0 22px rgba(245, 207, 119, .14), inset 0 0 12px rgba(245, 207, 119, .22);
  background: radial-gradient(ellipse, rgba(245, 207, 119, .2), rgba(16, 23, 32, .8) 65%);
}
.qd-platform::after {
  content: "";
  position: absolute;
  inset: 5px 14px;
  border-radius: 50%;
  border: 1px solid rgba(245, 207, 119, .25);
}
.qd-scientist-description { text-align: center; padding: 12px 0 15px; flex: none; }
.qd-scientist-description h3 {
  color: var(--qd-gold);
  font: 600 clamp(20px, 1.6vw, 28px)/1.15 var(--qd-serif);
}
.qd-scientist-description p {
  color: var(--qd-muted);
  font-size: calc(12px * var(--qd-fs));
  margin-top: 7px !important;
  line-height: 1.5;
  min-height: 1.5em;
}
.qd-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  flex: none;
}
.qd-character {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 64px;
  padding: 5px 8px;
  border: 1px solid #3c4c60;
  border-radius: 9px;
  background: rgba(16, 30, 45, .86);
  color: #e6ebf4;
  text-align: left;
  transition: border-color .16s, background .16s;
}
.qd-character:last-child { grid-column: 1 / -1; }
.qd-character:hover { border-color: #b9c5d5; background: rgba(32, 47, 63, .96); }
.qd-character[aria-pressed="true"] {
  border-color: var(--qd-gold);
  background: linear-gradient(120deg, rgba(111, 78, 27, .45), rgba(29, 29, 29, .92));
  box-shadow: inset 0 0 0 1px rgba(245, 207, 119, .25);
  color: #ffe4a0;
}
.qd-character canvas { width: 40px; height: 47px; flex: none; display: block; }
.qd-character-name { font-size: calc(11px * var(--qd-fs)); line-height: 1.3; font-weight: 600; min-width: 0; }
.qd-character-short { display: none; }
/* In the corner rather than in the row, so a two-word name keeps the width
   it needs on a narrow laptop. */
.qd-selected-marker {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--qd-gold);
  color: #111c29;
  font-size: 10px;
  line-height: 1;
  visibility: hidden;
}
.qd-character[aria-pressed="true"] .qd-selected-marker { visibility: visible; }

/* ---------- quests ---------- */
.qd-quest-section { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.qd-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 44px;
  padding: 4px 2px 19px;
  flex: none;
}
.qd-hint { color: #d2d9e4; font-size: calc(11px * var(--qd-fs)); }
.qd-quests {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
}
.qd-quest {
  --qd-accent: var(--qd-turquoise);
  --qd-accent-rgb: 97, 225, 213;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 18px 20px 20px;
  border: 1px solid rgba(var(--qd-accent-rgb), .65);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(10, 24, 35, .86), rgba(6, 17, 29, .97) 62%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(var(--qd-accent-rgb), .16);
  cursor: pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
@media (hover: hover) {
  .qd-quest:hover {
    transform: translateY(-3px);
    border-color: var(--qd-accent);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .35), 0 0 16px rgba(var(--qd-accent-rgb), .09);
  }
}
.qd-operator { --qd-accent: var(--qd-violet); --qd-accent-rgb: 196, 155, 255; }
.qd-expert { --qd-accent: var(--qd-gold); --qd-accent-rgb: 245, 207, 119; }
.qd-quest-kicker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--qd-accent);
  font-size: calc(9px * var(--qd-fs));
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  flex: none;
}
.qd-quest-kicker span + span {
  color: #b9c8d8;
  font-size: calc(10px * var(--qd-fs));
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
}
/* The art takes whatever height is left, so the three cards always end on
   the same line as the scientist panel and the page does not scroll. */
.qd-quest-art {
  position: relative;
  flex: 1 1 auto;
  min-height: 96px;
  max-height: 300px;
  margin: 5px -8px 0;
}
.qd-quest-art::before {
  content: "";
  position: absolute;
  inset: 5px -5px -10px;
  background: radial-gradient(ellipse, rgba(var(--qd-accent-rgb), .16), transparent 65%);
}
.qd-quest-art img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(var(--qd-accent-rgb), .12));
  -webkit-user-drag: none;
  user-select: none;
}
.qd-quest-text { flex: none; }
.qd-home .qd-quest-title {
  margin-top: 9px;
  font-family: var(--qd-serif);
  font-size: clamp(25px, 2.3vw, 36px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.025em;
  color: var(--qd-accent);
  text-align: center;
}
.qd-quest-title > span { display: block; }
.qd-rule { width: 30px; height: 1px; margin: 17px auto 13px; background: var(--qd-accent); opacity: .65; }
.qd-quest-description {
  min-height: 3.2em;
  color: #e0e5ef;
  font-size: calc(clamp(12px, 1vw, 15px) * var(--qd-fs));
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
}
.qd-quest-short { display: none; }
.qd-quest-bottom { margin-top: auto; padding-top: 20px; flex: none; }
.qd-count {
  position: relative;
  overflow: hidden;
  padding: 7px 4px;
  border: 1px solid rgba(var(--qd-accent-rgb), .16);
  border-radius: 7px;
  background: rgba(var(--qd-accent-rgb), .04);
  color: #d0dbe9;
  font-size: calc(11px * var(--qd-fs));
  text-align: center;
}
.qd-count-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--qd-accent);
  vertical-align: middle;
}
/* Mastery: solid, getting there, missed - the same three colours the canvas
   hub used. A thin line along the bottom of the count. */
.qd-count-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  display: flex;
  background: rgba(255, 255, 255, .06);
}
.qd-count-bar i { display: block; height: 100%; width: 0; }
.qd-count-bar .is-solid { background: #8fe0be; }
.qd-count-bar .is-learning { background: #7fb4ef; }
.qd-count-bar .is-shaky { background: #f0a5a5; }
.qd-play {
  display: flex;
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  padding: 10px 17px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  background: var(--qd-accent);
  color: #0b1723;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  font-size: calc(12px * var(--qd-fs)) !important;
  font-weight: 750 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: filter .16s;
}
.qd-play:hover { filter: brightness(1.12); }
.qd-play-arrow { font-size: 20px; line-height: 1; }

/* ---------- footer ---------- */
/* Two ends: the credits links at the left, How to play at the right. A
   "1 2 3 Choose a quest" key hint used to sit at the left end; it was taken
   out (the keys still open the quests), and space-between keeps the two
   that are left balanced at the edges of the cards above. */
.qd-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 47px;
  padding-top: 7px;
  color: #c8d3df;
  font-size: calc(10px * var(--qd-fs));
  flex: none;
}
.qd-footer-links { display: flex; align-items: center; gap: 14px; }
.qd-footer button {
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: #e2e7ef;
  font-size: calc(11px * var(--qd-fs));
}
.qd-footer button:hover { color: var(--qd-gold); text-decoration: underline; text-underline-offset: 4px; }
.qd-footer-links > span { color: #a8b2c0; opacity: .5; }
.qd-help { white-space: nowrap; }
.qd-help > span { margin-left: 10px; color: var(--qd-gold); }

.qd-sr-only {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- motion ---------- */
@keyframes qd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.qd-quest-art img { animation: qd-float 7s ease-in-out infinite; }
.qd-operator .qd-quest-art img { animation-delay: -2s; }
.qd-expert .qd-quest-art img { animation-delay: -4s; }
body.a11y-reduced-motion .qd-home *,
body.a11y-reduced-motion .qd-home *::before,
body.a11y-reduced-motion .qd-home *::after,
body.quality-low .qd-home .qd-quest-art img { animation: none !important; transition: none !important; }
body.a11y-reduced-motion .qd-quest:hover { transform: none; }
body.quality-low .qd-home .qd-quest-art img,
body.quality-low .qd-home .qd-hero { filter: none; }

/* ---------- accessibility settings ---------- */
/* High contrast: the design's "strong" mode - a darker lab, solid panels,
   brighter small print and firmer borders. */
body.a11y-high-contrast .qd-home {
  --qd-backdrop-dim: .82;
  --qd-muted: #eef3f8;
  background:
    linear-gradient(180deg, rgba(4, 11, 21, .78), rgba(4, 11, 21, .88)),
    url("assets/brand/lab-sunrise.webp") center center / cover no-repeat #050b14;
}
body.a11y-high-contrast .qd-quest,
body.a11y-high-contrast .qd-scientist-panel { background: #081323; }
body.a11y-high-contrast .qd-quest { border-color: var(--qd-accent); }
body.a11y-high-contrast .qd-character { border-color: #8fa3bb; background: #0b1828; }
body.a11y-high-contrast .qd-quest-kicker span + span,
body.a11y-high-contrast .qd-count,
body.a11y-high-contrast .qd-hint,
body.a11y-high-contrast .qd-subtitle,
body.a11y-high-contrast .qd-footer,
body.a11y-high-contrast .qd-footer button,
body.a11y-high-contrast .qd-quest-description { color: #ffffff; }
body.a11y-high-contrast .qd-tool { background: #050c16; border-color: var(--qd-gold); }
/* Large text: the small print grows; the big display type is already big. */
body.a11y-large-text .qd-home { --qd-fs: 1.2; }

/* ============================================================
   Short desktop: a laptop screen. Same layout, tighter.
   ============================================================ */
@media (max-height: 820px) and (min-width: 981px) {
  .qd-shell { padding-top: 17px; gap: 14px; }
  .qd-header { min-height: 86px; }
  .qd-scientist-stage { min-height: 120px; }
  .qd-scientist-description { padding: 8px 0 12px; }
  .qd-scientist-description p { margin-top: 4px !important; }
  .qd-character { min-height: 54px; }
  .qd-character canvas { width: 36px; height: 42px; }
  .qd-section-bar { padding-bottom: 12px; }
  .qd-quest { padding: 15px 18px 16px; }
  .qd-quest-art { min-height: 80px; }
  .qd-rule { margin: 12px auto 10px; }
  .qd-quest-bottom { padding-top: 14px; }
  .qd-play { margin-top: 10px; min-height: 46px; }
  .qd-footer { min-height: 36px; padding-top: 0; }
}
/* Very short (1366x640 and the like): smaller quest names and a 3 + 2
   roster of portrait chips. */
@media (max-height: 700px) and (min-width: 981px) {
  .qd-shell { padding-top: 12px; gap: 10px; }
  .qd-header { min-height: 74px; }
  .qd-logo { width: 88px; height: 63px; }
  .qd-home .qd-title { font-size: clamp(32px, 3.2vw, 48px); }
  .qd-scientist-panel { padding: 14px 16px; }
  .qd-scientist-stage { min-height: 96px; margin-top: 6px; }
  .qd-scientist-description { padding: 6px 0 10px; }
  .qd-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .qd-character:last-child { grid-column: auto; }
  .qd-character { min-height: 48px; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 3px; text-align: center; }
  .qd-character canvas { width: 30px; height: 32px; }
  .qd-character-name { display: none; }
  .qd-character-short { display: block; font-size: calc(10.5px * var(--qd-fs)); font-weight: 600; line-height: 1.2; white-space: nowrap; }
  .qd-selected-marker { position: absolute; top: 3px; right: 3px; width: 12px; height: 12px; font-size: 8px; }
  .qd-quest { padding: 12px 16px 14px; }
  .qd-home .qd-quest-title { font-size: clamp(22px, 1.9vw, 28px); margin-top: 6px; }
  .qd-rule { margin: 9px auto 8px; }
  .qd-quest-description { min-height: 0; }
  .qd-quest-bottom { padding-top: 10px; }
  .qd-count { padding: 5px 4px; }
  .qd-play { margin-top: 8px; min-height: 44px; padding-block: 8px; }
}

/* ============================================================
   Tablet and narrow windows (<= 980px): the design's single column - the
   scientist panel becomes a band (hero left, roster right), the three
   quest cards stay side by side under it.
   ============================================================ */
/* A narrower laptop: the two-up roster chips need their room for the name. */
@media (max-width: 1300px) {
  .qd-character { gap: 4px; padding-inline: 6px; }
  .qd-character canvas { width: 34px; }
}
@media (max-width: 1190px) {
  /* Large Text makes "01 Choose your scientist" wider than the narrow
     scientist column here: let it wrap rather than run into the border. */
  .qd-section-heading { white-space: normal; line-height: 1.25; }
  .qd-shell { padding-inline: 24px; }
  .qd-main { gap: 16px; grid-template-columns: minmax(236px, .95fr) minmax(0, 2.7fr); }
  .qd-quests { gap: 10px; }
  .qd-quest { padding-inline: 13px; }
  .qd-hint { display: none; }
  .qd-scientist-panel { padding-inline: 13px; }
  .qd-character { padding-inline: 6px; gap: 4px; }
  .qd-character-name { font-size: calc(10px * var(--qd-fs)); }
}
@media (max-width: 980px) {
  .qd-home { --qd-layout: tablet; }
  .qd-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .qd-scientist-panel {
    display: grid;
    grid-template-columns: 170px 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 10px 25px;
    padding: 18px 20px;
  }
  .qd-scientist-panel > .qd-section-heading { grid-column: 1 / -1; }
  .qd-scientist-body { display: contents; }
  .qd-scientist-stage { grid-column: 1; grid-row: 2 / 4; min-height: 176px; margin: 0; }
  .qd-scientist-description { grid-column: 2; grid-row: 2; text-align: left; padding: 4px 0 0; }
  .qd-roster { grid-column: 2; grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
  .qd-character:last-child { grid-column: auto; }
  .qd-character-name { font-size: calc(11px * var(--qd-fs)); }
  .qd-shell { gap: 18px; }
  .qd-header { min-height: 90px; }
  .qd-quest-art { min-height: 90px; }
  .qd-home .qd-quest-title { font-size: 29px; }
  .qd-footer { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   Compact (phones): <= 680px wide, or <= 480px tall.

   The user's rule: all three quests on the FIRST screen, no scrolling. So
   the hero shrinks to a portrait beside the name, the five scientists sit
   in one row of chips, and each quest becomes a row - art, name, one line,
   count and a Play button. Scrolling stays as the safety net for a 320px
   phone or Large Text.

   A tablet-width window that is not tall enough for the stacked tablet
   layout (960x600, 800x600, half a 1366x768 laptop) takes these rows too:
   that layout needs about 900px of height before its Play buttons are on
   the first screen. So does any window under about 540px tall, where the
   wide layout runs out of room.
   ============================================================ */
@media (max-width: 680px), (max-height: 480px), (max-width: 980px) and (max-height: 900px), (max-height: 540px) and (orientation: landscape) {
  .qd-home { --qd-layout: compact-portrait; }
  .qd-shell {
    padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
    gap: 10px;
  }

  /* Header: the logo beside three lines of text, as in the design. The two
     tools share the eyebrow's line, so the title gets the full width and
     never runs under them. */
  .qd-header { min-height: 0; column-gap: 10px; align-content: start; }
  .qd-logo { width: 54px; height: 40px; padding: 3px 5px; border-radius: 8px; align-self: center; }
  .qd-eyebrow { grid-column: 2; grid-row: 1; align-self: center; font-size: calc(8px * var(--qd-fs)); letter-spacing: .14em; line-height: 1.4; text-wrap: balance; }
  .qd-home .qd-title { grid-column: 2 / 4; font-size: clamp(24px, 8vw, 34px); line-height: 1.1; }
  .qd-subtitle { grid-column: 2 / 4; margin-top: 2px !important; font-size: calc(11px * var(--qd-fs)); }
  /* A very long name: two lines at most, so the Play buttons stay on the
     first screen. */
  .qd-subtitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .qd-tools { grid-row: 1; gap: 6px; }
  .qd-tool { padding: 10px; }
  .qd-tool-board { width: 44px; }
  .qd-tool-label { display: none; }

  .qd-main { display: flex; flex-direction: column; gap: 10px; flex: 1 0 auto; }

  .qd-scientist-panel { display: block; padding: 10px 12px 12px; border-radius: 14px; }
  .qd-section-heading { font-size: calc(11px * var(--qd-fs)); gap: 8px; }
  .qd-section-heading > span { font-size: 17px; }
  .qd-scientist-body {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 6px 0 8px;
  }
  .qd-scientist-stage { grid-column: 1; grid-row: 1; height: 78px; min-height: 0; margin: 0; flex: none; }
  .qd-hero { bottom: 6px; height: calc(100% - 6px); }
  .qd-halo { width: 78px; height: 78px; }
  .qd-platform { height: 12px; bottom: 1px; }
  .qd-platform::after { inset: 3px 8px; }
  .qd-scientist-description { grid-column: 2; grid-row: 1; padding: 0; text-align: left; }
  .qd-scientist-description h3 { font-size: 20px; }
  .qd-scientist-description p { margin-top: 3px !important; line-height: 1.35; }

  .qd-roster { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .qd-character:last-child { grid-column: auto; }
  .qd-character {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 4px 1px 3px;
    text-align: center;
  }
  .qd-character canvas { width: 30px; height: 34px; }
  .qd-character-name { display: none; }
  .qd-character-short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: calc(10px * var(--qd-fs)); font-weight: 600; line-height: 1.2; white-space: nowrap; }
  .qd-selected-marker { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; font-size: 8px; }

  .qd-quest-section { flex: 1 0 auto; }
  .qd-section-bar { min-height: 0; padding: 0 2px 6px; }
  .qd-hint { display: none; }
  .qd-quests { grid-template-columns: 1fr; grid-auto-rows: minmax(min-content, 1fr); gap: 8px; flex: 1 0 auto; }

  /* A quest as a row. */
  .qd-quest {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    grid-template-areas:
      "art title play"
      "art short play"
      "art count play";
    grid-template-rows: 1fr auto 1fr;
    align-items: center;
    column-gap: 10px;
    row-gap: 1px;
    padding: 8px 10px 8px 8px;
    border-radius: 13px;
  }
  .qd-quest-text, .qd-quest-bottom { display: contents; }
  .qd-quest-kicker, .qd-rule, .qd-quest-description { display: none; }
  .qd-quest-art { grid-area: art; width: 58px; height: 58px; min-height: 0; max-height: none; margin: 0; align-self: center; }
  .qd-quest-art::before { inset: -4px; }
  .qd-home .qd-quest-title { grid-area: title; align-self: end; margin: 0; font-size: min(19px, 4.5vw); line-height: 1.15; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qd-quest-title > span { display: inline; }
  .qd-quest-short { display: block; grid-area: short; color: #dfe5ee; font-size: calc(11.5px * var(--qd-fs)); line-height: 1.3; }
  .qd-count {
    grid-area: count;
    align-self: start;
    padding: 0 0 4px;
    border: 0;
    border-radius: 0;
    background: none;
    color: #b9c6d6;
    font-size: calc(10.5px * var(--qd-fs));
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .qd-count-dot { margin-right: 5px; }
  .qd-count-bar { height: 2px; right: auto; width: 100%; max-width: 150px; border-radius: 2px; }
  .qd-play { grid-area: play; width: auto; min-height: 44px; margin: 0; padding: 8px 12px; gap: 8px; font-size: calc(12px * var(--qd-fs)) !important; }
  .qd-play-word { display: none; }
  .qd-play-arrow { font-size: 18px; }

  .qd-footer { flex-wrap: wrap; justify-content: center; gap: 0 16px; min-height: 0; padding-top: 0; }
  .qd-footer-links { gap: 10px; }
  .qd-help > span { margin-left: 6px; }
}

/* A tall phone (390x844 and up) has room for a proper hero and bigger rows. */
@media (max-width: 680px) and (min-height: 740px) {
  .qd-shell { padding-top: max(16px, env(safe-area-inset-top, 0px)); gap: 14px; }
  .qd-scientist-panel { padding: 14px 14px 14px; }
  .qd-scientist-body { grid-template-columns: 1fr; gap: 6px; justify-items: center; margin: 4px 0 10px; }
  .qd-scientist-stage { width: 100%; height: 132px; }
  .qd-halo { width: 150px; height: 150px; }
  .qd-platform { left: 25%; width: 50%; height: 18px; }
  .qd-scientist-description { grid-column: 1; grid-row: 2; text-align: center; }
  .qd-scientist-description h3 { font-size: 22px; }
  .qd-character { min-height: 62px; }
  .qd-character canvas { width: 34px; height: 38px; }
  .qd-quest { grid-template-columns: 66px minmax(0, 1fr) auto; padding: 10px 12px 10px 10px; }
  .qd-quest-art { width: 66px; height: 66px; }
}

/* A small phone (320x568, 360x640): squeeze the scientist panel first. */
@media (max-width: 680px) and (max-height: 660px) {
  .qd-shell { gap: 8px; }
  .qd-scientist-panel { padding: 8px 10px 10px; }
  .qd-scientist-body { grid-template-columns: 56px minmax(0, 1fr); margin: 4px 0 6px; gap: 10px; }
  .qd-scientist-stage { height: 64px; }
  .qd-halo { width: 64px; height: 64px; }
  .qd-scientist-description h3 { font-size: 18px; }
  .qd-character { min-height: 50px; }
  .qd-character canvas { width: 26px; height: 30px; }
  .qd-quests { gap: 7px; }
  .qd-quest { grid-template-columns: 50px minmax(0, 1fr) auto; padding: 6px 8px 6px 6px; }
  .qd-quest-art { width: 50px; height: 50px; }
}
@media (max-width: 390px) {
  .qd-character-short { font-size: calc(9.5px * var(--qd-fs)); letter-spacing: -.01em; }
}
@media (max-width: 370px) {
  .qd-play { padding-inline: 10px; gap: 6px; }
}
@media (max-width: 340px) {
  .qd-shell { padding-left: 8px; padding-right: 8px; }
  .qd-logo { width: 46px; height: 34px; }
  .qd-eyebrow { letter-spacing: .1em; }
  .qd-scientist-panel { padding-left: 6px; padding-right: 6px; }
  .qd-character-short { font-size: calc(9px * var(--qd-fs)); letter-spacing: -.03em; }
  /* No room for the one-liner beside the Play button: the name and the
     count say enough, and the quest explains itself before it starts. */
  .qd-quest-short { display: none; }
  .qd-quest { grid-template-areas: "art title play" "art count play"; grid-template-rows: 1fr 1fr; }
}

/* Landscape phones and other short windows (<= 540px tall), and short
   tablet-width windows held sideways: scientists on the left, quests on the
   right, a one-line header. */
@media (max-height: 540px) and (orientation: landscape), (max-width: 980px) and (max-height: 900px) and (orientation: landscape) {
  .qd-home { --qd-layout: compact-landscape; }
  .qd-shell { gap: 8px; padding-top: max(8px, env(safe-area-inset-top, 0px)); }
  .qd-header { grid-template-rows: auto auto auto; }
  .qd-logo { width: 50px; height: 37px; }
  .qd-eyebrow { grid-column: 2; }
  .qd-home .qd-title { grid-column: 2; font-size: 24px; }
  .qd-subtitle { grid-column: 2; }
  .qd-tools { grid-row: 1 / 4; }
  .qd-tool-board { width: auto; padding: 10px 14px; }
  .qd-tool-label { display: inline; }

  .qd-main {
    display: grid;
    grid-template-columns: minmax(238px, .8fr) minmax(0, 1.55fr);
    grid-template-rows: auto;
    gap: 12px;
    align-items: stretch;
  }
  .qd-scientist-panel { display: flex; flex-direction: column; }
  .qd-scientist-body { grid-template-columns: 62px minmax(0, 1fr); margin: 6px 0; flex: 1 0 auto; }
  .qd-scientist-stage { height: 72px; }
  .qd-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: auto; }
  .qd-character { min-height: 46px; }
  .qd-character canvas { width: 30px; height: 32px; }

  .qd-quest-section { min-width: 0; }
  .qd-quests { flex: 1 0 auto; gap: 6px; }
  .qd-quest { grid-template-columns: 54px minmax(0, 1fr) auto; padding: 5px 10px 5px 6px; }
  .qd-quest-art { width: 54px; height: 54px; }
  .qd-home .qd-quest-title { font-size: 18px; }
  .qd-shell { padding-bottom: max(4px, env(safe-area-inset-bottom, 0px)); }
  /* Secondary links: 36px is still an easy tap, and it keeps the footer on
     the first screen of a phone held sideways. */
  .qd-footer { justify-content: space-between; }
  .qd-footer button { min-height: 36px; padding: 6px 0; }
}
/* A short tablet-width window has more room than a phone held sideways:
   the same rows, with bigger quest art and portrait. */
@media (min-width: 681px) and (max-width: 980px) and (min-height: 560px) and (max-height: 900px) and (orientation: landscape) {
  .qd-scientist-body { grid-template-columns: 84px minmax(0, 1fr); }
  .qd-scientist-stage { height: 100px; }
  .qd-halo { width: 100px; height: 100px; }
  .qd-quest { grid-template-columns: 76px minmax(0, 1fr) auto; padding: 8px 14px 8px 10px; }
  .qd-quest-art { width: 76px; height: 76px; }
}
@media (max-height: 360px) and (orientation: landscape) {
  .qd-shell { gap: 6px; }
  .qd-logo { width: 44px; height: 32px; }
  .qd-home .qd-title { font-size: 22px; }
  .qd-subtitle { display: none; }
  .qd-scientist-panel { padding: 8px 10px; }
  .qd-scientist-stage { height: 60px; }
  .qd-scientist-body { grid-template-columns: 52px minmax(0, 1fr); margin: 4px 0; }
  .qd-character { min-height: 44px; }
  .qd-character canvas { width: 26px; height: 28px; }
  .qd-quests { gap: 5px; }
  .qd-quest { grid-template-columns: 46px minmax(0, 1fr) auto; padding: 3px 8px 3px 5px; }
  .qd-quest-art { width: 46px; height: 46px; }
  .qd-home .qd-quest-title { font-size: 17px; }
  .qd-section-bar { padding-bottom: 4px; }
}

/* ---------- the credits sheet ----------
   QSheet "credits", built by app.js openCreditsSheet() from #hubCredits.
   Only the role labels take the subtitle colour (#c9d4bc); the names and
   the acknowledgement share one colour. */
.sheet[data-sheet="credits"] .sheetNode { display: block; margin: 0; padding: 0; background: none; }
.qd-credits-head {
  margin: 14px 0 6px;
  font-size: .78em;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f5d37e;
}
.qd-credits-head:first-child { margin-top: 0; }
.qd-credits-line { margin: 0 0 8px; line-height: 1.5; color: #d0daea; }
.qd-credits-line strong { color: #c9d4bc; font-weight: 700; }

/* A small phone held sideways (568x320): the rows are too narrow for the
   whole quest name, so the word that tells them apart is shown on its own;
   the Play button's label still reads the full name. */
@media (max-height: 480px) and (orientation: landscape) and (max-width: 620px) {
  .qd-quest-title > span:first-child { display: none; }
  .qd-quest-short { display: none; }
  .qd-quest { grid-template-areas: "art title play" "art count play"; grid-template-rows: 1fr 1fr; }
  .qd-tool-board { width: 44px; padding: 10px; }
  .qd-tool-label { display: none; }
}