/* Wildlife Explorer — components. All values come from tokens.css. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* App shell: the header stays put and only <main> scrolls. The body is exactly the
   dynamic viewport height, so nothing hides behind browser toolbars on iPad. */
html, body { height: 100%; }
/* The body clips (not the viewport), so the binder zooming up behind the card viewer can't
   widen the page on phones. */
html { overflow: hidden; }
body {
  margin: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fs-sm);
  line-height: var(--lh);
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
a { color: var(--c-primary); }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: var(--bw-focus) solid var(--c-accent-deep); outline-offset: var(--bw-focus); }
[hidden] { display: none !important; }
.muted { color: var(--c-ink-soft); }
.spacer { flex: 1; }
.is-hidden { visibility: hidden; }

/* ---------- Group & status colours ----------
   Chosen with data attributes; inline style attributes are blocked by the CSP. */
/* --g-edge: a darker shade of the group colour, for outlines such as range maps. */
[data-group] { --g-edge: color-mix(in srgb, var(--g) 70%, var(--c-ink)); }
[data-group="mammals"]          { --g: var(--g-mammals);          --g-ink: var(--g-mammals-ink); }
[data-group="birds"]            { --g: var(--g-birds);            --g-ink: var(--g-birds-ink); }
[data-group="reptiles"]         { --g: var(--g-reptiles);         --g-ink: var(--g-reptiles-ink); }
[data-group="fish"]             { --g: var(--g-fish);             --g-ink: var(--g-fish-ink); }
[data-group="invertebrates"]    { --g: var(--g-invertebrates);    --g-ink: var(--g-invertebrates-ink); }
[data-group="prehistoric"]      { --g: var(--g-prehistoric);      --g-ink: var(--g-prehistoric-ink); }
[data-group="microscopic"]      { --g: var(--g-microscopic);      --g-ink: var(--g-microscopic-ink); }
[data-group="behavior"]         { --g: var(--g-behavior);         --g-ink: var(--g-behavior-ink); }
[data-group="how-animals-work"] { --g: var(--g-how-animals-work); --g-ink: var(--g-how-animals-work-ink); }
[data-group="world-explorer"]   { --g: var(--g-world-explorer);   --g-ink: var(--g-world-explorer-ink); }
[data-group="conservation"]     { --g: var(--g-conservation);     --g-ink: var(--g-conservation-ink); }
[data-group="plants"]           { --g: var(--g-plants);           --g-ink: var(--g-plants-ink); }

[data-status="ex"] { --b: var(--iucn-ex); --b-ink: var(--iucn-ex-ink); }
[data-status="ew"] { --b: var(--iucn-ew); --b-ink: var(--iucn-ew-ink); }
[data-status="cr"] { --b: var(--iucn-cr); --b-ink: var(--iucn-cr-ink); }
[data-status="en"] { --b: var(--iucn-en); --b-ink: var(--iucn-en-ink); }
[data-status="vu"] { --b: var(--iucn-vu); --b-ink: var(--iucn-vu-ink); }
[data-status="nt"] { --b: var(--iucn-nt); --b-ink: var(--iucn-nt-ink); }
[data-status="lc"] { --b: var(--iucn-lc); --b-ink: var(--iucn-lc-ink); }
[data-status="dd"] { --b: var(--iucn-dd); --b-ink: var(--iucn-dd-ink); }
[data-status="ne"] { --b: var(--iucn-ne); --b-ink: var(--iucn-ne-ink); }

/* ---------- Bilingual text ---------- */
.bi { display: inline-flex; flex-direction: column; gap: 0.05em; }
[lang|="zh"] { font-family: var(--font-zh); }
html[data-lang="en"] .t-zh { display: none !important; }
html[data-lang="zh"] .t-en { display: none !important; }
html[data-lang="both"] .bi > .t-zh { font-size: 0.94em; }
.bi--title { gap: var(--s-1); }
.bi--title > .t-en, .bi--title > .t-any { font-size: var(--fs-xxl); line-height: 1.1; }
.bi--title > .t-zh { font-size: var(--fs-xl) !important; line-height: 1.2; }
html[data-lang="zh"] .bi--title > .t-zh { font-size: var(--fs-xxl) !important; }

/* Chinese names with zhuyin (js/zhuyin.js): tap to switch 漢字 ↔ 注音. */
.zyname {
  display: block; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; line-height: inherit; text-align: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html:not([data-zhuyin="on"]) .zyname__zy, html[data-zhuyin="on"] .zyname__plain { display: none; }
.zyname__zy { display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.12em; line-height: 1; }
.zyname__zy--long { font-size: 0.88em; }
.zy { display: inline-flex; align-items: center; }
.zy__r {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
  margin-left: var(--zy-gap); margin-right: 0.12em;
  font-size: calc(var(--zy-ratio) * 1em); font-weight: var(--fw-semi); line-height: 1.02;
}
.zy__n { grid-area: 1 / 1; justify-self: center; line-height: 0.5; }
.zy__b { grid-area: 2 / 1; display: flex; flex-direction: column; align-items: center; }
/* Tone mark beside the last symbol, a little above its middle. */
.zy__t { grid-area: 2 / 2; align-self: end; margin-bottom: 0.45em; margin-left: 0.04em; }
.zyname.is-turning { animation: zy-turn 0.28s var(--ease-bounce); }
@keyframes zy-turn { from { transform: rotateX(80deg); opacity: 0.3; } to { transform: none; opacity: 1; } }

/* ---------- Buttons & controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); min-width: var(--tap);
  padding: var(--s-2) var(--s-4);
  border: 0; border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-ink);
  font-weight: var(--fw-bold); font-size: var(--fs-sm);
  text-decoration: none; text-align: center;
  cursor: pointer; box-shadow: var(--shadow-1);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  touch-action: manipulation;
}
.btn:active { transform: scale(0.96); box-shadow: none; }
.btn--primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn--accent { background: var(--c-accent); color: var(--c-on-accent); }
.btn--soft { background: var(--c-bg-deep); box-shadow: none; }
.btn--danger { background: var(--c-bad-soft); color: var(--c-bad); box-shadow: none; }
.btn--big { min-height: var(--tap-lg); padding: var(--s-3) var(--s-5); font-size: var(--fs-md); }
.btn--icon { padding: 0; font-size: var(--fs-lg); }
.btn--icon.btn--big { min-width: var(--tap-lg); }
.btn--read.is-speaking { background: var(--c-accent); color: var(--c-on-accent); animation: pulse 1.2s ease-in-out infinite; }

.seg {
  display: inline-flex; padding: var(--s-1); gap: var(--s-1);
  background: var(--c-bg-deep); border-radius: var(--r-pill);
}
.seg__btn {
  min-height: calc(var(--tap) - var(--s-2)); min-width: calc(var(--tap) - var(--s-2));
  padding: var(--s-1) var(--s-4);
  border: 0; border-radius: var(--r-pill); background: transparent;
  font-weight: var(--fw-bold); font-size: var(--fs-sm); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  touch-action: manipulation;
}
.seg__btn[aria-checked="true"] { background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--shadow-1); }
.seg__btn .bi { flex-direction: row; gap: 0.35em; }
.seg--small .seg__btn { padding: var(--s-1) var(--s-3); }

.input {
  min-height: var(--tap); width: 7em; padding: 0 var(--s-3);
  border: var(--bw-mid) solid var(--c-line); border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-lg); text-align: center; background: var(--c-surface);
}
.input:focus { border-color: var(--c-primary); outline: none; }

.switch { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track {
  flex: none; width: 60px; height: 34px; border-radius: var(--r-pill);
  background: var(--c-line); position: relative; transition: background var(--t-med);
}
.switch__track::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--c-surface); box-shadow: var(--shadow-1);
  transition: transform var(--t-med) var(--ease-bounce);
}
.switch input:checked + .switch__track { background: var(--c-primary); }
.switch input:checked + .switch__track::after { transform: translateX(26px); }
.switch input:focus-visible + .switch__track { outline: var(--bw-focus) solid var(--c-accent-deep); outline-offset: var(--bw-focus); }

.chip {
  display: inline-block; padding: 0 var(--s-2); border-radius: var(--r-pill);
  background: var(--g, var(--c-bg-deep)); color: var(--g-ink, var(--c-ink));
  font-size: var(--fs-xs); font-weight: var(--fw-bold); vertical-align: middle;
}

/* ---------- App frame ---------- */
/* Header: logo · nav · language. Narrower screens drop the logo text, then the nav labels. */
.header {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--header-h);
  padding: max(var(--s-2), env(safe-area-inset-top)) max(var(--s-4), env(safe-area-inset-right)) var(--s-2) max(var(--s-4), env(safe-area-inset-left));
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}
.brand { flex: none; display: flex; align-items: center; gap: var(--s-3); color: var(--c-primary-deep); text-decoration: none; }
.brand__icon { width: var(--size-brand); height: var(--size-brand); border-radius: var(--r-sm); flex: none; }
.brand__name { font-weight: var(--fw-bold); line-height: 1.1; }
.bi--brand > .t-en, .bi--brand > .t-zh { font-size: var(--fs-md); white-space: nowrap; }
.brand__sub { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-ink-soft); white-space: nowrap; }
.header .seg--lang { flex: none; margin-left: auto; }
.lang-cycle { display: none; flex: none; margin-left: auto; }

/* "safe" keeps the first tab reachable if the nav ever gets too wide; it then scrolls. */
.nav {
  flex: 1; min-width: 0; display: flex; justify-content: center; justify-content: safe center; gap: var(--s-1);
  overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.is-loading .nav { visibility: hidden; }
.nav__item {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); min-width: var(--tap); padding: var(--s-1) var(--s-3);
  color: var(--c-ink-soft); text-decoration: none; font-weight: var(--fw-semi); font-size: var(--fs-xs);
  border-radius: var(--r-md);
}
.nav__item .bi { line-height: 1.15; }
.nav__label { white-space: nowrap; }
.nav__icon { font-size: var(--fs-lg); line-height: 1; transition: transform var(--t-med) var(--ease-bounce); }
.nav__item.is-active { color: var(--c-primary-deep); background: var(--c-bg-deep); }
.nav__item.is-active .nav__icon { transform: scale(1.15); }

.main {
  position: relative;
  min-height: 0;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Content is centred up to --content-max; the scroll area itself is full width. */
  padding: var(--s-4) max(var(--s-4), env(safe-area-inset-right), calc((100% - var(--content-max)) / 2))
           calc(var(--s-6) + env(safe-area-inset-bottom)) max(var(--s-4), env(safe-area-inset-left), calc((100% - var(--content-max)) / 2));
}
.empty { padding: var(--s-7) var(--s-4); text-align: center; color: var(--c-ink-soft); font-size: var(--fs-md); }
.empty .bi { align-items: center; }
.loading-icon { display: block; margin: var(--s-7) auto; width: var(--size-medal); height: var(--size-medal); border-radius: var(--r-lg); animation: pulse 1.2s ease-in-out infinite; }

/* Tablets: each label goes under its icon, like a tab bar, so all seven tabs fit. */
@media (max-width: 1279px) {
  :root { --header-h: var(--header-h-stacked); }
  .nav__item { flex-direction: column; gap: 0; padding: var(--s-1) var(--s-2); }
  .nav__label .bi { align-items: center; text-align: center; }
}
@media (max-width: 1100px) {
  .brand__name { display: none; }
}
@media (max-width: 900px) {
  .header { gap: var(--s-2); }
  .header .seg--lang { display: none; }
  .lang-cycle { display: inline-flex; }
}
@media (max-width: 700px) {
  :root { --header-h: var(--header-h-base); }
  .nav__label { display: none; }
  .nav__item { padding: var(--s-1); }
}

.page { display: flex; flex-direction: column; gap: var(--s-4); }
.page__title { font-size: var(--fs-xl); display: flex; align-items: center; gap: var(--s-3); }
.page__title .bi { line-height: 1.15; }
.page > .btn { align-self: flex-start; }

.panel {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-md);
  background: var(--c-surface); box-shadow: var(--shadow-1);
}
.panel__title { font-size: var(--fs-md); color: var(--c-primary-deep); }
.panel--link { flex-direction: row; align-items: center; min-height: var(--tap-lg); text-decoration: none; color: inherit; font-weight: var(--fw-bold); font-size: var(--fs-md); }
.panel--link > span:last-child { margin-left: auto; font-size: var(--fs-lg); }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.group-title { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ---------- Binder ---------- */
.binder { display: flex; flex-direction: column; }
.tabs {
  display: flex; gap: var(--s-1);
  overflow-x: auto; scrollbar-width: none;
  padding: var(--s-2) var(--s-2) 0;
  margin: 0 calc(-1 * var(--s-2));
  scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-hair);
  min-width: var(--tab-min); min-height: var(--tap-lg); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--g); color: var(--g-ink);
  text-decoration: none; text-align: center; font-weight: var(--fw-bold); font-size: var(--fs-xs);
  opacity: 0.7; transform: translateY(8px); transition: transform var(--t-med) var(--ease-bounce), opacity var(--t-med);
}
.tab .bi { align-items: center; line-height: 1.15; }
.tab__emoji { font-size: var(--fs-lg); line-height: 1; }
.tab__count { font-size: var(--fs-xs); opacity: 0.85; }
.tab.is-active { opacity: 1; transform: none; box-shadow: var(--shadow-1); }

.binder__page {
  position: relative;
  padding: var(--s-4) var(--s-4) var(--s-5) calc(var(--s-4) + var(--rings-w));
  background: var(--c-surface);
  border: var(--border-card) solid var(--g);
  border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-2);
  min-height: 60vh;
}
/* binder ring holes down the left edge */
.binder__page::before {
  content: ""; position: absolute; top: var(--s-5); bottom: var(--s-5); left: 8px; width: 14px;
  background: radial-gradient(circle at 7px 7px, var(--c-bg-deep) 6px, transparent 7px) 0 0 / 14px 64px repeat-y;
}
.binder__head { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.binder__title { font-size: var(--fs-xl); color: var(--c-ink); }
.binder__title .group-title > span:first-child { font-size: 1.2em; }
.binder__count { color: var(--c-ink-soft); font-weight: var(--fw-semi); }
.binder__count .bi { flex-direction: row; gap: 0.6em; }
.meter { height: var(--meter-h); border-radius: var(--r-pill); background: var(--c-bg-deep); overflow: hidden; }
.meter__fill { display: block; height: 100%; background: var(--g); border-radius: inherit; transition: width var(--t-slow); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr)); gap: var(--s-4); }

.tile {
  position: relative;
  display: flex; flex-direction: column;
  aspect-ratio: 3 / 4;
  border: var(--bw-tile) solid var(--g); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-ink);
  overflow: hidden; text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast);
  touch-action: manipulation;
}
.tile:active { transform: scale(0.96); }
.tile__no {
  position: absolute; top: 0; left: 0; z-index: 1;
  padding: var(--s-hair) var(--s-2); border-bottom-right-radius: var(--r-sm);
  background: var(--g); color: var(--g-ink);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.tile__tw { position: absolute; top: var(--s-1); right: var(--s-1); z-index: 1; font-size: var(--fs-md); line-height: 1; filter: drop-shadow(0 1px 2px var(--c-shade-strong)); }
.tile__pic { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; background: var(--c-bg); }
.tile__pic .pic { width: 100%; height: 100%; object-fit: cover; }
.tile__name {
  padding: var(--s-2); text-align: center;
  font-weight: var(--fw-bold); font-size: var(--fs-sm); line-height: 1.2;
  display: flex; justify-content: center;
}
.tile__name .bi { align-items: center; }

.tile--locked { background: color-mix(in srgb, var(--g) 16%, var(--c-surface)); border-style: dashed; }
.tile--locked .tile__pic { background: transparent; }
.silhouette { font-size: var(--emoji-lg); line-height: 1; filter: brightness(0); opacity: 0.72; user-select: none; }
.silhouette--big { font-size: var(--emoji-xxl); }
.tile__q {
  position: absolute; bottom: 12%; right: 14%;
  width: var(--size-dot-lg); height: var(--size-dot-lg); display: grid; place-items: center;
  border-radius: 50%; background: var(--g); color: var(--g-ink);
  font-weight: var(--fw-bold); font-size: var(--fs-lg);
  box-shadow: var(--shadow-1);
}
.tile__when { color: var(--c-ink-soft); font-size: var(--fs-xs); }

/* ---------- Pictures ---------- */
.pic { width: 100%; height: 100%; object-fit: cover; }
.pic--empty, .pic--broken { display: grid; place-items: center; background: color-mix(in srgb, var(--g, var(--c-primary)) 14%, var(--c-surface)); }
.pic--broken { visibility: hidden; }
.pic__emoji { font-size: var(--emoji-lg); }

/* ---------- Badges on cards (IUCN status, Found in Taiwan) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap-xs); padding: var(--s-1) var(--s-4) var(--s-1) var(--s-1);
  border-radius: var(--r-pill);
  font-weight: var(--fw-bold); font-size: var(--fs-sm);
}
.badge .bi { flex-direction: row; flex-wrap: wrap; column-gap: 0.5em; }
.badge--iucn { background: var(--b); color: var(--b-ink); border: var(--bw-thin) solid var(--c-shade-faint); }
.badge__code {
  display: grid; place-items: center; width: var(--size-dot); height: var(--size-dot); border-radius: 50%;
  background: var(--c-veil); color: var(--c-ink); font-size: var(--fs-xs);
}
.badge--taiwan { background: var(--c-good-soft); color: var(--c-primary-deep); padding-left: var(--s-3); }
.badge__icon { font-size: var(--fs-md); }

/* Credit sheet */
.sheet {
  width: min(92vw, var(--sheet-w)); padding: var(--s-5);
  border: 0; border-radius: var(--r-lg);
  background: var(--c-surface); color: var(--c-ink);
  box-shadow: var(--shadow-3);
}
.sheet::backdrop { background: var(--c-overlay); }
.sheet__title { font-size: var(--fs-lg); margin-bottom: var(--s-4); display: flex; gap: var(--s-2); align-items: center; }
.sheet__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
/* A lookalike's photo (Animal comparison). */
.look-card__img { width: 100%; max-height: 50dvh; object-fit: contain; border-radius: var(--r-md); background: var(--c-bg-deep); }
.look-card__credit { margin-top: var(--s-3); color: var(--c-ink-soft); font-size: var(--fs-xs); }
.look-card .sheet__title { margin-bottom: var(--s-3); }
.facts-list { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); margin: 0; }
.facts-list dt { font-weight: var(--fw-bold); color: var(--c-ink-soft); }
.facts-list dd { margin: 0; word-break: break-word; }

/* Reveal (foil packs) styles live in pack.css; card viewer in card.css. */

.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.confetti i {
  position: absolute; top: -20px; left: var(--x);
  width: 10px; height: 16px; border-radius: 3px;
  animation: fall var(--d) var(--delay) ease-in forwards;
}

/* ---------- Badges ---------- */
.medals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr)); gap: var(--s-5) var(--s-4); }
.medal-item { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
.medal-item__name { font-weight: var(--fw-bold); line-height: 1.2; }
.medal-item__name .bi, .medal-item__sub .bi { align-items: center; }
.medal-item__sub { color: var(--c-ink-soft); font-size: var(--fs-xs); }
.medal {
  display: grid; place-items: center;
  width: var(--size-medal); height: var(--size-medal); border-radius: 50%;
  background: var(--c-line); font-size: var(--emoji-md); text-decoration: none;
  border: var(--border-card) solid var(--c-surface); box-shadow: var(--shadow-1);
}
.medal > span { filter: grayscale(1); opacity: 0.4; }
.medal--earned {
  background: radial-gradient(circle at 35% 30%, var(--c-shine), transparent 45%), var(--g);
  border-color: var(--c-accent); box-shadow: 0 0 0 var(--bw-thick) var(--c-accent-deep), var(--shadow-2);
}
.medal--earned > span { filter: drop-shadow(0 3px 0 var(--c-shade)); opacity: 1; }
.medal--huge { width: var(--size-medal-lg); height: var(--size-medal-lg); font-size: var(--emoji-xl); animation: pop-in var(--t-slow) var(--ease-bounce) both; }

/* Continent and habitat medals take their tier's metal (data-tier). */
[data-tier="bronze"] { --tier: var(--tier-bronze); --tier-ink: var(--tier-bronze-ink); }
[data-tier="silver"] { --tier: var(--tier-silver); --tier-ink: var(--tier-silver-ink); }
[data-tier="gold"]   { --tier: var(--tier-gold);   --tier-ink: var(--tier-gold-ink); }
.medal--tier {
  background: radial-gradient(circle at 35% 30%, var(--c-shine), transparent 45%), var(--tier, var(--c-accent));
  border-color: var(--c-surface);
  box-shadow: 0 0 0 var(--bw-thick) color-mix(in srgb, var(--tier, var(--c-accent)) 70%, var(--c-ink)), var(--shadow-2);
}
.medal--secret { background: var(--c-secret); color: var(--c-secret-ink); font-weight: var(--fw-bold); }
.medal--secret > span { filter: none; opacity: 1; }
.medal-item__link { text-decoration: none; color: inherit; }
.medal-item__tier { display: block; font-weight: var(--fw-bold); color: var(--c-ink); }
.medal-section { display: flex; flex-direction: column; gap: var(--s-3); }
.badges { gap: var(--s-5); }
.bi--joke > .t-en, .bi--joke > .t-zh, .bi--joke > .t-any { font-size: var(--fs-lg) !important; font-weight: var(--fw-bold); }

/* ---------- Earning a badge (js/celebrate.js) ---------- */
.celebrate__stage { display: grid; place-items: center; min-height: var(--size-medal-lg); perspective: 800px; }
.celebrate .medal--huge { touch-action: none; cursor: grab; position: relative; overflow: hidden; }
/* Rubbing brings up a shine (--shine 0…1); polished, a sweep of light runs across. */
.celebrate .medal--huge::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 25%, var(--c-shine), transparent 60%);
  opacity: var(--shine, 0); transition: opacity var(--t-fast);
}
.celebrate .medal--huge.is-polished::after {
  opacity: 1;
  background: linear-gradient(110deg, transparent 35%, var(--c-shine) 50%, transparent 65%) 0 0 / 250% 100%;
  animation: shine 1.1s ease-out both;
}
.medal.is-turning { animation: medal-turn 0.6s ease-in-out; }
@keyframes medal-turn { 50% { transform: rotateY(90deg); } }

.secret-card {
  position: relative; width: var(--size-medal-lg); height: var(--size-medal-lg); padding: 0; border: 0;
  background: none; cursor: pointer; touch-action: none; transform-style: preserve-3d;
  transition: transform var(--t-slow) var(--ease-bounce);
  animation: pop-in var(--t-slow) var(--ease-bounce) both;
}
.secret-card__back, .secret-card__front {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--r-lg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.secret-card__back {
  background: var(--c-secret); color: var(--c-secret-ink); font-size: var(--emoji-xl); font-weight: var(--fw-bold);
  box-shadow: 0 0 0 var(--bw-thick) var(--c-accent-deep), var(--shadow-3);
}
.secret-card__front { transform: rotateY(180deg); }
.secret-card__front .medal--huge { animation: none; }
/* The drop-in animation would hold the transform, so it stops when the card turns. */
.secret-card.is-flipped { animation: none; transform: rotateY(180deg); }

/* ---------- Globe ---------- */
.main[data-view="globe"] { padding: 0; overflow: hidden; }
.globe { position: relative; height: 100%; overflow: hidden; }
.globe__stage {
  position: absolute; inset: 0;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: grab;
}
.globe__stage:active { cursor: grabbing; }
.globe__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.globe__canvas--gl, .globe__canvas--over { pointer-events: none; }
.globe__pins { position: absolute; inset: 0; pointer-events: none; }
.globe__foot {
  position: absolute; left: var(--s-3); right: var(--s-3); bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2); pointer-events: none;
}
.globe__hint {
  width: fit-content; max-width: 100%; margin: 0; padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill); background: var(--c-veil); color: var(--c-ink-soft);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); text-align: center;
}
.globe__hint .bi { align-items: center; }
.globe.has-layer .globe__hint { display: none; }

/* Map layer chips along the top, scrolling sideways on narrow screens. */
.glayers {
  position: absolute; top: var(--s-2); left: 0; right: 0;
  display: flex; gap: var(--s-2); padding: 0 var(--s-3) var(--s-1);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.glayers::-webkit-scrollbar { display: none; }
.glayer {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: var(--tap-sm); padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-veil); color: var(--c-ink); box-shadow: var(--shadow-1);
  font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer;
}
.glayer .bi { line-height: 1.1; text-align: left; }
.glayer__emoji { font-size: var(--fs-lg); line-height: 1; }
.glayer[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.glayer.is-loading .glayer__emoji { animation: pulse 0.8s ease-in-out infinite; }
.glayer.is-failed { border-color: var(--c-bad); }
.glayer--filter { border-color: var(--c-primary); }

/* Region filter: continents and habitats, opened from the first chip. */
.gfilter {
  position: absolute; z-index: 2; top: calc(var(--tap-sm) + var(--s-4)); left: var(--s-3); right: var(--s-3);
  max-width: var(--sheet-w); max-height: 60%; overflow-y: auto;
  display: grid; gap: var(--s-2); padding: var(--s-3);
  border-radius: var(--r-md); background: var(--c-veil); box-shadow: var(--shadow-2);
}
.gfilter__title { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-ink-soft); }
.gfilter__group { display: grid; gap: var(--s-1); }
.gfilter__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* The legend for the layer that is on. */
.glegend {
  width: min(100%, var(--sheet-w)); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md); background: var(--c-veil); box-shadow: var(--shadow-1);
  font-size: var(--fs-xs); pointer-events: auto;
}
.glegend[hidden] { display: none; }
.glegend__title { margin: 0 0 var(--s-1); font-weight: var(--fw-bold); display: flex; align-items: center; gap: var(--s-1); }
.glegend__title .bi { flex-direction: row; gap: 0.4em; }
.glegend__items { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: 0; padding: 0; list-style: none; }
.glegend__items li { display: flex; align-items: center; gap: var(--s-1); }
.glegend__sw {
  flex: none; width: var(--legend-sw); height: var(--legend-sw); border-radius: var(--r-sm);
  background: var(--sw); box-shadow: inset 0 0 0 var(--bw-thin) var(--c-shade-faint);
}
.glegend__bar { height: var(--legend-sw); border-radius: var(--r-pill); }
.glegend__scale { display: flex; justify-content: space-between; margin-top: 2px; font-weight: var(--fw-semi); }
.glegend__months { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); font-weight: var(--fw-bold); }
.glegend__monthname { flex: none; min-width: 6.5em; }
.glegend__monthname .bi { flex-direction: row; gap: 0.4em; }
.glegend__month { flex: 1; min-width: 0; height: var(--tap-sm); accent-color: var(--c-primary); }
.glegend__note { margin: var(--s-1) 0 0; color: var(--c-ink-soft); }

/* Photo pins: placed by transform on every frame (views/globe.js). */
.gpin {
  position: absolute; left: 0; top: 0; width: var(--gpin); height: var(--gpin); padding: 0;
  border: var(--bw-mid) solid var(--c-surface); border-radius: 50%;
  background: var(--g); color: var(--g-ink);
  box-shadow: 0 0 0 var(--bw-thin) var(--g), var(--shadow-2);
  pointer-events: auto; cursor: pointer; will-change: transform;
}
.gpin.is-off { visibility: hidden; pointer-events: none; }
.gpin__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; }
.gpin__emoji { display: grid; place-items: center; height: 100%; font-size: var(--fs-lg); }
/* A stack: two more discs peeking out behind, and a count. */
.gpin.is-stack {
  box-shadow: 0 0 0 var(--bw-thin) var(--g),
    var(--s-1) var(--s-1) 0 0 var(--c-surface), var(--s-1) var(--s-1) 0 var(--bw-thin) var(--g),
    var(--s-2) var(--s-2) 0 0 var(--c-surface), var(--s-2) var(--s-2) 0 var(--bw-thin) var(--g),
    var(--shadow-2);
}
.gpin__count {
  position: absolute; top: calc(-1 * var(--s-3)); right: calc(-1 * var(--s-3));
  display: none; place-items: center; min-width: var(--hotspot); height: var(--hotspot); padding: 0 var(--s-1);
  border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-on-accent);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); box-shadow: var(--shadow-1);
}
.gpin.is-stack .gpin__count { display: grid; }
.gpin.is-selected { box-shadow: 0 0 0 var(--bw-thick) var(--g), var(--shadow-3); }

/* The card sheet that opens from a pin. */
.gsheet__scrim { position: absolute; inset: 0; z-index: 2; background: var(--c-shade); }
.gsheet {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; margin: 0 auto;
  width: min(100%, var(--sheet-w)); max-height: calc(100% - var(--s-5));
  display: flex; flex-direction: column; overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--c-surface); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-3);
  touch-action: none; outline: none;
}
.gsheet__grip {
  position: absolute; z-index: 1; top: var(--s-2); left: 0; right: 0; margin: 0 auto;
  width: var(--s-7); height: var(--s-1); border-radius: var(--r-pill); background: var(--c-veil);
}
.gsheet__close { position: absolute; z-index: 1; top: var(--s-2); right: var(--s-2); border-radius: 50%; background: var(--c-veil); }
.gsheet__pic { flex: none; height: var(--gsheet-pic); background: var(--c-bg-deep); }
.gsheet__body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) var(--s-5) var(--s-5); min-height: 0; }
.gsheet__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); color: var(--c-ink-soft); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.gsheet__no { padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--g); color: var(--g-ink); font-weight: var(--fw-bold); }
.gsheet__name { font-size: var(--fs-xl); line-height: 1.15; }
.gsheet__fact { font-size: var(--fs-md); }
.gsheet__open { align-self: flex-start; gap: var(--s-2); }

/* ---------- Quiz ---------- */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--choice-min), 1fr)); gap: var(--s-4); }
.choice {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-5); min-height: var(--choice-h);
  border: var(--bw-tile) solid var(--c-accent); border-radius: var(--r-lg);
  background: var(--c-surface); box-shadow: var(--shadow-2);
  text-align: center; cursor: pointer;
  transition: transform var(--t-fast);
}
.choice:active { transform: scale(0.97); }
.choice:disabled { border-color: var(--c-line); box-shadow: none; cursor: default; }
.choice:disabled .choice__emoji { filter: grayscale(1); opacity: 0.5; }
.choice .bi { align-items: center; }
.choice__emoji { font-size: var(--emoji-lg); line-height: 1; }
.choice__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.choice__hint { color: var(--c-ink-soft); }
.choice__best { font-weight: var(--fw-bold); color: var(--c-accent-deep); }
.choice__best .bi { flex-direction: row; gap: 0.4em; }

.quiz { gap: var(--s-4); }
.quiz__body { display: flex; flex-direction: column; gap: var(--s-4); }
.quiz__count { color: var(--c-ink-soft); font-weight: var(--fw-semi); font-size: var(--fs-xs); }
.quiz__count .bi { flex-direction: row; gap: 0.6em; }
.quiz__dots { display: flex; gap: var(--s-1); }
.quiz__dots span { flex: 1; height: var(--s-2); border-radius: var(--r-pill); background: var(--c-line); }
.quiz__dots .is-done { background: var(--c-primary); }
.quiz__dots .is-now { background: var(--c-accent); }
.quiz__q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.quiz__prompt { font-size: var(--fs-xl); line-height: 1.2; }
.quiz__pic {
  width: 100%; aspect-ratio: 4 / 3; max-height: 46dvh;
  border-radius: var(--r-lg); overflow: hidden; background: var(--c-bg-deep);
  box-shadow: var(--shadow-1);
}
.quiz__pic .pic { object-fit: contain; }
.quiz__tf { display: grid; gap: var(--s-4); align-items: center; }
.quiz__pic--small { max-height: 30dvh; }
.quiz__fact {
  margin: 0; padding: var(--s-4) var(--s-5);
  border-left: var(--bw-heavy) solid var(--c-accent); border-radius: var(--r-md);
  background: var(--c-surface); font-size: var(--fs-lg); font-weight: var(--fw-semi);
  box-shadow: var(--shadow-1);
}
.answers { display: grid; gap: var(--s-3); }
.answers--4 { grid-template-columns: repeat(2, 1fr); }
.answers--2 { grid-template-columns: repeat(2, 1fr); }
.answer {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap-lg); padding: var(--s-3);
  border: var(--bw-thick) solid var(--g, var(--c-line)); border-radius: var(--r-md);
  background: var(--c-surface); box-shadow: var(--shadow-1);
  font-weight: var(--fw-bold); font-size: var(--fs-md); line-height: 1.2; text-align: center;
  cursor: pointer; touch-action: manipulation;
  transition: transform var(--t-fast), background var(--t-fast);
}
.answer .bi { align-items: center; }
.answer:active { transform: scale(0.97); }
.answer:disabled { cursor: default; opacity: 0.55; }
.answer--true { border-color: var(--c-good); font-size: var(--fs-lg); }
.answer--false { border-color: var(--c-bad); font-size: var(--fs-lg); }
.answer.is-right { opacity: 1; background: var(--c-good-soft); border-color: var(--c-good); animation: pop-in var(--t-med) var(--ease-bounce); }
.answer.is-wrong { opacity: 1; background: var(--c-bad-soft); border-color: var(--c-bad); animation: shake 0.4s; }

.feedback {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  padding: var(--s-4); border-radius: var(--r-md);
  animation: pop-in var(--t-med) var(--ease-bounce);
}
.feedback > div { flex: 1; min-width: var(--feedback-min); }
.feedback--good { background: var(--c-good-soft); }
.feedback--bad { background: var(--c-bad-soft); }
.feedback__icon { font-size: var(--emoji-sm); }
.feedback__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }

.quiz-result { align-items: center; text-align: center; padding-top: var(--s-6); position: relative; }
.quiz-result .page__title .bi { align-items: center; }
.stars { font-size: var(--emoji-lg); letter-spacing: var(--s-2); color: var(--c-line); }
.stars .is-on { color: var(--c-accent); text-shadow: 0 3px 0 var(--c-accent-deep); }

/* ---------- More / Parents ---------- */
.gate { display: grid; gap: var(--s-3); }
.gate__row { display: flex; gap: var(--s-3); }
.parent { display: grid; gap: var(--s-4); justify-items: start; }
.me { display: flex; align-items: center; gap: var(--s-4); }
.me__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.2; }
/* Whose settings: one avatar button per profile. */
.who { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.who__btn {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  min-width: var(--tap-lg); padding: var(--s-2); border: var(--bw-mid) solid transparent; border-radius: var(--r-md);
  background: none; font-weight: var(--fw-bold); cursor: pointer; touch-action: manipulation;
}
.who__btn[aria-checked="true"] { border-color: var(--c-primary); background: var(--c-bg); }
.who__name { max-width: var(--picker-item); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who__name .bi { align-items: center; }

/* ---------- Forms (Welcome, Parents) ---------- */
.form { display: grid; gap: var(--s-4); }
.form .sheet__title { margin-bottom: 0; }
.field { display: grid; gap: var(--s-1); align-content: start; }
.field__label { font-weight: var(--fw-bold); }
.field__label .bi { flex-direction: row; flex-wrap: wrap; column-gap: 0.4em; }
.field__control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.field__unit { color: var(--c-ink-soft); font-weight: var(--fw-semi); }
.field-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.form__error { color: var(--c-bad); font-weight: var(--fw-bold); }
.input--wide { width: 100%; text-align: left; font-size: var(--fs-md); }
.input--code { width: 10em; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.input[aria-invalid="true"] { border-color: var(--c-bad); }
.sheet--form { max-height: calc(100dvh - var(--s-6)); overflow-y: auto; }

/* ---------- Profiles ---------- */
/* A round letter avatar. Colours: --avatar-N in tokens.css. */
.avatar {
  flex: none; display: grid; place-items: center;
  width: var(--size-avatar); height: var(--size-avatar); border-radius: 50%;
  background: var(--av, var(--c-bg-deep)); color: var(--av-ink, var(--c-ink));
  font-weight: var(--fw-bold); font-size: var(--fs-md); line-height: 1;
  box-shadow: var(--shadow-1); user-select: none;
}
.avatar--big { width: var(--size-avatar-lg); height: var(--size-avatar-lg); font-size: var(--emoji-sm); border: var(--bw-tile) solid var(--c-surface); }
.avatar--add { background: var(--c-surface); color: var(--c-primary); border: var(--bw-mid) dashed var(--c-line); box-shadow: none; }
[data-avatar="1"] { --av: var(--avatar-1); --av-ink: var(--avatar-1-ink); }
[data-avatar="2"] { --av: var(--avatar-2); --av-ink: var(--avatar-2-ink); }
[data-avatar="3"] { --av: var(--avatar-3); --av-ink: var(--avatar-3-ink); }
[data-avatar="4"] { --av: var(--avatar-4); --av-ink: var(--avatar-4-ink); }
[data-avatar="5"] { --av: var(--avatar-5); --av-ink: var(--avatar-5-ink); }
[data-avatar="6"] { --av: var(--avatar-6); --av-ink: var(--avatar-6-ink); }
[data-avatar="7"] { --av: var(--avatar-7); --av-ink: var(--avatar-7-ink); }
[data-avatar="8"] { --av: var(--avatar-8); --av-ink: var(--avatar-8-ink); }
.avatar-btn { flex: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; min-width: var(--tap); min-height: var(--tap); display: grid; place-items: center; touch-action: manipulation; }

/* The picker on launch: "Who's exploring today?" */
.picker {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-5);
  padding: max(var(--s-5), env(safe-area-inset-top)) var(--s-4) max(var(--s-5), env(safe-area-inset-bottom));
  background: var(--c-bg); overflow-y: auto;
  opacity: 0; transition: opacity var(--t-med);
}
.picker.is-open { opacity: 1; }
.picker__logo { width: var(--size-medal); height: var(--size-medal); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.picker__title { font-size: var(--fs-xxl); color: var(--c-primary-deep); text-align: center; line-height: 1.15; }
.picker__title .bi { align-items: center; }
.picker__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-5); }
.picker__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  width: var(--picker-item); padding: var(--s-3); border: 0; border-radius: var(--r-lg);
  background: none; cursor: pointer; touch-action: manipulation;
  transition: transform var(--t-fast);
  animation: pop-in var(--t-slow) var(--ease-bounce) both;
}
.picker__item:active { transform: scale(0.94); }
.picker__name { font-size: var(--fs-md); font-weight: var(--fw-bold); text-align: center; overflow-wrap: anywhere; line-height: 1.2; }
.picker__name .bi { align-items: center; }
/* The same full screen as a modal <dialog>, above every other dialog: "WildFile has
   updated" and "close other windows" (app.js). */
dialog.picker { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; color: var(--c-ink); }
dialog.picker::backdrop { background: var(--c-bg); }

/* ---------- Packs ---------- */
/* Unopened packs: a count on the Packs icon. */
.nav__icon { position: relative; }
.nav__badge {
  position: absolute; top: calc(-1 * var(--s-2)); left: calc(-1 * var(--s-3));
  display: grid; place-items: center; min-width: var(--hotspot); height: var(--hotspot); padding: 0 var(--s-1);
  border-radius: var(--r-pill); background: var(--c-bad); color: var(--c-on-primary);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1;
  box-shadow: var(--shadow-1); animation: pop-in var(--t-med) var(--ease-bounce);
}
.packs { align-items: center; text-align: center; }
.packs .page__title { align-self: flex-start; }
.packs__ready { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding-top: var(--s-4); }
/* Up to three sealed packs, fanned out; the oldest on top. */
.packstack {
  display: grid; padding: var(--s-4) var(--s-6); border: 0; background: none; cursor: pointer;
  touch-action: manipulation; transition: transform var(--t-fast);
}
.packstack:active { transform: scale(0.96); }
.packstack > .pack { grid-area: 1 / 1; }
.packstack > .pack:nth-last-child(2) { transform: rotate(-6deg) translateX(-12%); }
.packstack > .pack:nth-last-child(3) { transform: rotate(6deg) translateX(12%); }
.packstack > .pack:last-child { animation: wiggle 3s ease-in-out 1s infinite; }
.packs__count { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.packs__count .bi, .packs__next .bi { align-items: center; }
.packs__next { color: var(--c-ink-soft); font-weight: var(--fw-semi); }

/* "New pack arrived!": a bottom sheet that leaves the app usable. */
.notice {
  position: fixed; z-index: 80; left: 0; right: 0; margin: 0 auto;
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  width: min(calc(100% - 2 * var(--s-4)), var(--sheet-w));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-lg);
  background: var(--c-surface); box-shadow: var(--shadow-3);
  transform: translateY(calc(100% + var(--s-6))); transition: transform var(--t-slow) var(--ease-bounce);
}
.notice.is-open { transform: none; }
.notice__icon { font-size: var(--emoji-sm); line-height: 1; }
.notice__text { flex: 1 1 var(--feedback-min); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.notice__actions { display: flex; gap: var(--s-2); margin-left: auto; }

/* ---------- Credits ---------- */
.credits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.credits__item {
  display: grid; grid-template-columns: var(--size-thumb) 1fr; gap: var(--s-3); align-items: center;
  padding: var(--s-2); border-radius: var(--r-md); background: var(--c-surface);
  border-left: var(--border-card) solid var(--g); font-size: var(--fs-xs);
}
.credits__thumb { width: var(--size-thumb); height: var(--size-thumb); object-fit: cover; border-radius: var(--r-sm); background: var(--c-bg-deep); }
.credits__thumb.is-secret { filter: blur(8px) brightness(0.6); }
.credits__thumb--silhouette { object-fit: contain; padding: var(--s-1); background: var(--c-surface); }
.credits__name { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.credits__name .bi { flex-direction: row; flex-wrap: wrap; column-gap: 0.5em; }
.credits__text a { word-break: break-word; }
.credits__emoji { display: grid; place-items: center; width: var(--size-thumb); font-size: var(--fs-xl); }

/* ---------- Tablet & landscape ---------- */
@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(var(--tile-min-lg), 1fr)); }
  .quiz__tf { grid-template-columns: minmax(var(--quiz-pic-min), 2fr) 3fr; }
  .quiz__pic--small { max-height: 40dvh; }
}

/* Wide/landscape: binder tabs stand up along the right edge, like a real binder. */
@media (min-width: 900px) and (orientation: landscape) {
  .binder { flex-direction: row-reverse; align-items: flex-start; }
  .binder__page { flex: 1; border-radius: var(--r-lg) 0 var(--r-lg) var(--r-lg); }
  .tabs {
    flex: none; flex-direction: column; gap: var(--s-1);
    /* Sticks inside the scrolling <main> and scrolls on its own if it is taller than the screen. */
    position: sticky; top: 0;
    max-height: calc(100dvh - var(--header-h) - var(--s-6) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s-4) var(--s-2) var(--s-2) 0; margin: 0;
    width: var(--tabs-w);
  }
  .tab {
    flex: none; min-width: 0; width: 100%; min-height: var(--tap);
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s-2);
    align-items: center; justify-items: start;
    padding: var(--s-1) var(--s-2) var(--s-1) var(--s-3);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    transform: translateX(-8px); text-align: left;
  }
  .tab__emoji { grid-row: 1 / 3; }
  .tab__name { min-width: 0; }
  .tab .bi { align-items: flex-start; }
  .tab__count { grid-column: 2; }
  .tab.is-active { transform: none; }

  .answers--4 { grid-template-columns: repeat(4, 1fr); }
  .quiz__pic { max-height: 42dvh; }
}

/* Short landscape phones: keep the header compact. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --header-h: var(--header-h-compact); }
  .bi--brand > .t-zh, .brand__sub { display: none; }
  .nav__label { display: none; }
  .nav__item { padding: var(--s-1); }
}

@media (max-width: 520px) {
  /* Phones: the main nav moves to a tab bar along the bottom, so the header fits. */
  body { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    justify-content: space-around; gap: 0;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--c-surface); box-shadow: var(--shadow-1);
  }
  .nav__item { flex: 1; min-width: 0; border-radius: 0; }
  .notice { bottom: calc(var(--nav-h) + var(--s-3) + env(safe-area-inset-bottom)); }
  .bi--brand > .t-en, .bi--brand > .t-zh { font-size: var(--fs-sm); }
  .brand__icon { width: var(--size-brand-sm); height: var(--size-brand-sm); }
  .seg--lang .seg__btn { padding: var(--s-1) var(--s-2); min-width: var(--tap-xs); }
  .binder__page { padding-left: calc(var(--s-3) + var(--rings-w)); padding-right: var(--s-3); }
  .grid { gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
  .picker__list { gap: var(--s-3); }
}

/* ---------- Motion ---------- */
@keyframes pop-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes drop-in { from { transform: translateY(-40vh) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wiggle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-4deg); } 84% { transform: rotate(4deg); } 92% { transform: rotate(-2deg); } }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }
@keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }
@keyframes pulse { 50% { transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* A tab (or the Binder button) bumps when a new card lands in it. */
.tab.is-bumping, .nav__item.is-bumping { animation: bump 0.55s var(--ease-bounce); }
@keyframes bump { 0% { transform: none; } 35% { transform: scale(1.25) translateY(-4px); } 100% { transform: none; } }

/* "What is this device?" (account.js): two big choices, an icon and two lines each. */
.role-btn { width: 100%; justify-content: flex-start; text-align: start; padding: var(--s-3) var(--s-4); }
.role-btn > [aria-hidden] { font-size: var(--fs-lg); }
.role-btn__text { display: grid; gap: var(--s-1); }
.role-now { display: grid; gap: var(--s-2); margin-top: var(--s-4); }

/* A grown-up's phone (watch mode): the header chip, and the read-only Packs list. */
.watch-chip {
  display: inline-flex; align-items: center; gap: var(--s-1); flex: none;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
  background: var(--c-bg-deep); color: var(--c-ink-soft); font-size: var(--fs-sm); font-weight: 700;
}
.watch-packs { list-style: none; margin: var(--s-4) 0; padding: 0; display: grid; gap: var(--s-2); }
.watch-pack {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-surface); border: var(--s-hair) solid var(--c-line);
}
.watch-pack.is-opened { background: var(--c-bg); }
.watch-pack__emojis { font-size: var(--fs-lg); flex: none; }
.watch-pack__text { display: grid; gap: var(--s-1); }