/* ═══════════════════════════════════════════════════════════════════════════
   StatBlockFit: the whole site's stylesheet. GENERATED by scripts/build-site.mjs.

   ONE FILE, LINKED BY EVERY PAGE, written by the same script that writes the
   pages so the two cannot drift (#28). The colour values are the app's own
   StatBlockRPG skin from design-tokens.js, repeated here as custom properties
   because a static page cannot import a CommonJS module (#367).

   ONE INLINE SCRIPT AND NO EXTERNAL REQUEST: the pointer light and the
   floating bar read the --mx/--my/--lit and data-scroll that the page's one
   inline script writes; the mobile menu is a <details>, the rest of the
   motion is CSS, the type is the system stack (the app defers custom fonts
   too, so character comes from weight, case and tracking).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --void: #030305;
  --base: #07080C;
  --surface: #0E0F15;
  --elevated: #15161E;
  --overlay: #1C1D27;

  --border-subtle: #1B1C26;
  --border: #282A38;
  --border-strong: #3A3D4F;

  --text-primary: #F2F4FF;
  --text-secondary: #A6ABC6;
  --text-tertiary: #7F859C;
  --text-inverse: #07080C;

  --pulse: #10B981;
  --pulse-glow: #6EE7B7;
  --pulse-faint: #08211B;
  --bone: #F5F3EF;
  --bone-pressed: #DAD6CE;

  --cyan: #2BE4FF;
  --magenta: #FF3DAE;
  --amber: #FFB020;

  --str: #F2453D;
  --dex: #A3E635;
  --con: #FFC53D;
  --int: #4C9AFF;
  --wis: #B18AFF;
  --cha: #FF6BAA;

  --glass: rgba(21, 22, 30, 0.58);
  --glass-strong: rgba(21, 22, 30, 0.78);
  --glass-line: rgba(255, 255, 255, 0.10);
  --glass-hi: rgba(255, 255, 255, 0.06);

  --text-hero: #CFD3E6;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --radius: 18px;
  --wrap: 72rem;
  /* The motion curves: a fast start that settles softly (an object arriving), and a symmetric one for a thing that passes through. Scroll-driven animations map scroll PROGRESS through them, so the reveal completes early in its range and the last third is the settle. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--base);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* main takes every spare pixel, so the footer is pushed to the foot of the viewport on a page shorter than it. */
main { flex: 1 0 auto; display: block; }
footer { flex: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pulse-glow); text-decoration: none; }
a:hover { text-decoration: underline; }
/* No border-radius here: the outline follows the element's own corners, and a 4px radius would square off every pill. */
a:focus-visible, summary:focus-visible { outline: 2px solid var(--pulse); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
address { font-style: normal; }
h1, h2, .h2--xl, .face__title { text-wrap: balance; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
/* The skip link: off-screen until a keyboard reaches it, then a pill over the top bar. */
.skip { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 60; padding: 0.6rem 1rem; border-radius: 999px; background: var(--bone); color: var(--text-inverse); font-weight: 700; transform: translateY(-200%); }
.skip:focus-visible { transform: none; outline-offset: 2px; }

/* ── Type ─────────────────────────────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-tertiary);
}
.eyebrow--pulse { color: var(--pulse); }
h2.eyebrow { max-width: none; line-height: 1.4; color: var(--pulse); }
.kicker {
  margin: 0 0 0.5rem;
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--pulse);
}
h1, h2, h3 { color: #fff; }
h1 {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
h1.display {
  font-size: clamp(3.4rem, 10vw, 7.5rem);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 0 60px rgba(16,185,129,0.25);
}
h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 24ch;
}
h3 { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.lede {
  margin: 1.1rem 0 0;
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  color: var(--text-secondary);
  max-width: 56ch;
}
.lede--hero { color: var(--text-hero); font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 40ch; }
.avail { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--text-secondary); letter-spacing: 0.01em; }
.section-lede { margin: 1.1rem 0 0; color: var(--text-secondary); max-width: 58ch; font-size: clamp(1.02rem, 1.4vw, 1.12rem); line-height: 1.65; }
.note { margin: 1.75rem 0 0; font-size: 0.86rem; color: var(--text-tertiary); max-width: 70ch; }

/* ── Pills ────────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  white-space: nowrap;
}
.pill:hover { text-decoration: none; transform: translateY(-1px); }
.pill--solid { background: var(--bone); color: var(--text-inverse); box-shadow: 0 10px 30px rgba(245,243,239,0.12); }
.pill--solid:hover { background: #fff; }
.pill--solid small { font-weight: 600; color: #5A5750; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.1em; }
.pill--glass {
  position: relative; isolation: isolate;
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.24);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pill--glass:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.42); }
.pill--sm { padding: 0.6rem 1.1rem; font-size: 0.84rem; }
.pill[aria-disabled="true"] { cursor: default; opacity: 0.85; transform: none; }
/*
 * On a phone narrower than 360 px a translated pill may wrap (W2-int, sprint 5b): a pill cannot wrap by design, and a
 * label longer than the English (French "Comment fonctionnent les combats" at 320 px) ran past its card or past the
 * screen's edge, where the section clipped it. Scoped away from English, whose pills all fit at 320 px and stay as they were.
 */
@media (max-width: 359px) { :root:not(:lang(en)) .pill { white-space: normal; max-width: 100%; text-align: center; line-height: 1.2; } }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ── Glass ────────────────────────────────────────────────────────────────── */
.glass {
  position: relative; isolation: isolate;
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 45%, rgba(255,255,255,0.03)), var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 rgba(0,0,0,0.25);
}
/*
 * THE LIGHT UNDER THE GLASS. The script writes the pointer's position into
 * --mx/--my on each surface and --lit while it is near; the ::before is a soft
 * radial light at that point and the ::after is the 1px edge lit from the same
 * point (a gradient border, cut to the border by two masks). Both sit UNDER
 * the content (z-index -1 inside the surface's own stacking context) and both
 * rest at zero, so a page with no pointer, no script or reduced motion is the
 * plain glass. The transitions use the site's own curves (#818).
 */
.glass::before, .store::before, .pill--glass::before, .topbar__in::before, .fact::before, .step::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.16), rgba(110,231,183,0.05) 34%, transparent 64%);
  opacity: var(--lit, 0); transition: opacity 520ms var(--ease-out);
}
.glass::after, .store::after, .pill--glass::after, .topbar__in::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -1;
  padding: 1px;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.7), rgba(110,231,183,0.22) 45%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--lit, 0); transition: opacity 520ms var(--ease-out);
}
.glass > * { position: relative; z-index: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .glass::before, .glass::after, .store::before, .store::after, .pill--glass::before, .pill--glass::after, .topbar__in::before, .topbar__in::after, .fact::before, .step::before { display: none; }
}
.card { padding: 1.6rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.6rem; }
/* The card's INDEX, drawn large and faint top right; counted per grid so every page numbers its own run. */
.grid { counter-reset: card; }
.grid > .card { counter-increment: card; }
.card__clip { position: absolute; inset: 0; z-index: 0; overflow: clip; border-radius: inherit; pointer-events: none; }
.card__n { position: absolute; right: 0.6rem; top: -0.35rem; font-size: 4.6rem; font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.09); user-select: none; transition: -webkit-text-stroke-color 420ms var(--ease-out); }
.grid > .card .card__n::before { content: counter(card, decimal-leading-zero); }
@media (hover: hover) { .grid > .card:hover .card__n { -webkit-text-stroke-color: rgba(110,231,183,0.3); } }
/* The card's first line (its kicker, or its title where it has none) keeps clear of the numeral, which sits over the top right corner: Sprint 5b's longer titles ("What leaves your phone, and when", the FAQ's two new questions) ran under "03", "07" and "08" by up to 55 px (the W1 review, measured at 1440, 390 and 320). */
.grid > .card > .card__clip + :is(h3, .kicker) { padding-right: 3.9rem; }
/* and a three-across grid breathes: the middle card sits lower on a wide screen */
@media (min-width: 900px) { .grid--3 > .card:nth-child(3n + 2) { margin-top: 2.2rem; } .grid--3 > .card:nth-child(3n) { margin-top: 1.1rem; } }
/* The Swiss band's three bodies differ by half (about 230, 370 and 450 characters), and stretched to one height the first card stood 180 px empty under its text at 1440 (the W1 review); each card is as tall as what it says. */
#swiss .grid > .card { align-self: start; }
.card p, .card li { margin: 0; color: var(--text-secondary); font-size: 0.96rem; }
/* A last line of one word ("Connect.", "sold.") reads as a mistake in a short card; pretty wrapping moves a word down where the engine has it, and changes nothing where it has not (the W1 review). */
.card p, .card h3, .fact__sub, .foot__blurb, .foot__credit { text-wrap: pretty; }
.card ul { margin: 0.25rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.card .pill { align-self: flex-start; margin-top: 0.7rem; }
.card--quiet { background: var(--glass-strong); }
.card--quiet p { color: var(--text-secondary); }
.chip {
  display: inline-block; padding: 0.25rem 0.65rem; border-radius: 999px;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--pulse-glow); background: rgba(16,185,129,0.14); border: 1px solid rgba(16,185,129,0.35);
}
.chip--free { color: var(--amber); background: rgba(255,176,32,0.12); border-color: rgba(255,176,32,0.35); }

/* ── Top bar: frosted glass, fixed, edge to edge ──────────────────────────── */
/*
 * THE FLOATING BAR (2026-09-18, #820). Detached from the top edge as a glass
 * capsule, it rides the scroll: past the top it tightens, on the way down it
 * lifts out of the way, on the way up it returns, on a spring curve. The
 * direction comes from the script's data-scroll on <html>; with no script (or
 * reduced motion) the bar simply stays, which is the resting state.
 */
.topbar {
  position: fixed; top: max(10px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 50;
  padding-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
  pointer-events: none;
  transition: transform 640ms var(--ease-spring), opacity 400ms var(--ease-out);
}
/* Hidden means hidden: visibility follows the slide so the invisible links leave the tab order and hit testing (WCAG 2.4.7), and the bar returns for keyboard focus or an open menu. */
html[data-scroll="down"] .topbar { transform: translateY(calc(-100% - 24px)); opacity: 0; visibility: hidden; transition: transform 640ms var(--ease-spring), opacity 400ms var(--ease-out), visibility 0s 640ms; }
html[data-scroll="down"] .topbar:focus-within { transform: none; opacity: 1; visibility: visible; transition: transform 640ms var(--ease-spring), opacity 400ms var(--ease-out); }
html[data-scroll="down"] .topbar:has(details[open]) { transform: none; opacity: 1; visibility: visible; transition: transform 640ms var(--ease-spring), opacity 400ms var(--ease-out); }
.topbar__in {
  pointer-events: auto;
  position: relative; isolation: isolate;
  width: min(100%, 80rem); margin-inline: auto;
  min-height: 60px; padding: 0.35rem 0.5rem 0.35rem 0.9rem;
  display: flex; align-items: center; gap: 1.2rem;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015) 50%, rgba(255,255,255,0.03)), rgba(7, 8, 12, 0.62);
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: min-height 420ms var(--ease-out), background 420ms var(--ease-out), box-shadow 420ms var(--ease-out), width 420ms var(--ease-out);
}
html[data-scrolled="1"] .topbar__in { min-height: 54px; width: min(100%, 72rem); background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012) 50%, rgba(255,255,255,0.025)), rgba(7, 8, 12, 0.8); box-shadow: 0 18px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08); }
.topbar__in > * { position: relative; z-index: 1; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text-primary); font-weight: 800; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 28px; height: 28px; display: block; filter: drop-shadow(0 0 10px rgba(16,185,129,0.45)); }
.brand__name { font-size: 1.05rem; }
.navlinks { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.navlink {
  color: var(--text-secondary); font-weight: 600; font-size: 0.93rem;
  padding: 0.5rem 0.8rem; border-radius: 999px;
  transition: color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.navlink:hover { color: #fff; background: rgba(255,255,255,0.06); text-decoration: none; }
.navlink[aria-current] { color: #fff; background: rgba(255,255,255,0.09); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }

/* The mobile menu: a <details>, so it needs no script. */
.menu { display: none; position: relative; }
.menu > summary { list-style: none; cursor: pointer; width: 40px; height: 40px; display: grid; place-content: center; gap: 5px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary span { display: block; width: 16px; height: 2px; background: #fff; border-radius: 2px; }
@media (forced-colors: active) { .menu > summary span { background: CanvasText; } }
/* Print, or Save as PDF: the legal pages on paper, black on white, with the chrome and the motion gone. */
@media print {
  html, body, .legal, .band, .cine, .band--raise { background: #fff !important; color: #000 !important; }
  h1, h2, h3, p, li, address, th, td, .legal p, .legal li, .legal address, .lede, .lede--hero, .eyebrow { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  .topbar, .foot, .skip, .hero__bg, .cine__bg, .band__bg, .menu, .lang, .foot__langs, .stores, .store, .pill, .hero__cue { display: none !important; }
  .cine, .band, .legal { padding: 0; margin: 0; border: 0; box-shadow: none; }
  .legal { max-width: none; }
  .legal th, .legal td { border-color: #999; }
  /* a translated policy's note that the English original binds prints with it, as a plain black box */
  .legal .legal__notice { background: none !important; border: 1px solid #000 !important; color: #000 !important; }
  .legal__notice strong { color: #000 !important; }
  * { animation: none !important; transition: none !important; }
}
.menu__sheet {
  position: absolute; right: 0; top: 52px; min-width: 14rem;
  display: grid; gap: 0.15rem; padding: 0.6rem;
  background: rgba(14,15,21,0.92); border: 1px solid var(--glass-line); border-radius: 14px;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.menu__sheet .navlink { display: block; }
.menu__sheet .navlink--cta { color: var(--pulse-glow); }
/*
 * THE LANGUAGE SWITCHER (Sprint 5b, the site contract §0.4, §2.5 and §5.3): a <details> like the menu, so it needs no
 * script and a keyboard opens it with Enter or Space on the summary and walks its links with Tab. Unlike the menu it
 * shows at EVERY width (the phone's top bar keeps it beside the menu button), because a reader who cannot read the page
 * must still find the way to one they can. The pill names the current language's code; the summary's aria-label names it
 * in words. The current language is a span marked aria-current, never a link to itself. It is rendered only once two
 * languages are published, so these rules are unused on an English-only site. It and the menu share one details NAME
 * (name="topbar", the HTML exclusive accordion), so opening one closes the other: the W2 review found the menu's sheet
 * drawn over an open language sheet on a phone. A browser that does not know the attribute ignores it.
 */
.lang { position: relative; }
.lang > summary {
  list-style: none; cursor: pointer;
  min-width: 40px; height: 40px; padding: 0 0.75rem 0 0.85rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.18);
  color: var(--text-secondary);
  font-family: var(--mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  transition: color 140ms var(--ease-out), background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::after { content: ""; width: 0.38rem; height: 0.38rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.1rem) rotate(45deg); transition: transform 200ms var(--ease-out); }
.lang[open] > summary::after { transform: translateY(0.12rem) rotate(-135deg); }
.lang > summary:hover, .lang[open] > summary { color: #fff; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.32); }
.lang__sheet {
  position: absolute; right: 0; top: 52px; min-width: 11rem;
  display: grid; gap: 0.15rem; padding: 0.5rem;
  background: rgba(14,15,21,0.92); border: 1px solid var(--glass-line); border-radius: 14px;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.lang__opt { display: block; padding: 0.55rem 0.8rem; border-radius: 10px; color: var(--text-secondary); font-weight: 600; font-size: 0.93rem; line-height: 1.4; }
a.lang__opt:hover { color: #fff; background: rgba(255,255,255,0.06); text-decoration: none; }
.lang__opt[aria-current] { color: #fff; background: rgba(16,185,129,0.14); box-shadow: inset 2px 0 0 var(--pulse); }
@media (forced-colors: active) { .lang__opt[aria-current] { outline: 1px solid CanvasText; } }

/* ── Cinematic bands ─────────────────────────────────────────────────────── */
.cine {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: 64px;
  background: linear-gradient(to bottom, var(--void) 0%, var(--void) 70%, var(--base) 100%);
}
.cine--hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
.cine--sub { min-height: 52svh; display: flex; flex-direction: column; justify-content: center; }
.cine--sub h1 { font-size: clamp(2.8rem, 7.2vw, 5.6rem); letter-spacing: -0.045em; line-height: 0.98; max-width: 14ch; }
.cine--sub .lede { color: var(--text-hero); font-size: clamp(1.1rem, 1.9vw, 1.35rem); }
/* THE GHOST WORD: the page's own eyebrow at display scale, sitting behind the title and running off the edge. Scale contrast, not decoration: the word is the page's. */
.ghost { position: absolute; right: -0.15em; top: 45%; transform: translateY(-50%); z-index: -1; font-size: clamp(6rem, 22vw, 20rem); font-weight: 800; letter-spacing: -0.06em; line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.10); pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent); }
.cine--neon .ghost { -webkit-text-stroke-color: rgba(43,228,255,0.16); }
.cine--bone .ghost { -webkit-text-stroke-color: rgba(245,243,239,0.12); }
.cine__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cine__bg::after {
  /* the vignette, so the edges fall away and the text sits in the dark */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(3,3,5,0.55), rgba(3,3,5,0) 28%, rgba(3,3,5,0) 60%, var(--base) 100%),
    radial-gradient(120% 80% at 50% 40%, rgba(3,3,5,0) 40%, rgba(3,3,5,0.7) 100%);
}
.floorgrid {
  position: absolute; left: -20%; right: -20%; bottom: -8%; height: 70%;
  background-image:
    linear-gradient(rgba(43,228,255,0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,228,255,0.20) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.9;
  transform: perspective(700px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 10%, transparent 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 10%, transparent 100%);
}
.bloom { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 1; }
.bloom--a { width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; left: -18vw; bottom: -20vw; background: radial-gradient(circle, rgba(16,185,129,0.42), rgba(16,185,129,0) 65%); }
.bloom--b { width: 50vw; height: 50vw; max-width: 760px; max-height: 760px; right: -12vw; top: -14vw; background: radial-gradient(circle, rgba(76,154,255,0.36), rgba(76,154,255,0) 65%); }
.bloom--c { width: 55vw; height: 55vw; max-width: 800px; max-height: 800px; right: -20vw; top: -25vw; background: radial-gradient(circle, rgba(177,138,255,0.20), rgba(177,138,255,0) 65%); }
.cine--neon .bloom--a { background: radial-gradient(circle, rgba(43,228,255,0.28), rgba(43,228,255,0) 65%); }
.cine--neon .bloom--b { background: radial-gradient(circle, rgba(255,61,174,0.22), rgba(255,61,174,0) 65%); }
.cine--bone .bloom--a { background: radial-gradient(circle, rgba(245,243,239,0.14), rgba(245,243,239,0) 65%); }
.cine--bone .bloom--b { background: radial-gradient(circle, rgba(16,185,129,0.22), rgba(16,185,129,0) 65%); }
.scan {
  position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: overlay;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px);
}
.watermark {
  position: absolute; right: -4%; top: 4%; width: min(78vh, 56vw); aspect-ratio: 1;
  color: var(--cyan); opacity: 0.22;
  filter: drop-shadow(0 0 24px rgba(43,228,255,0.35));
  animation: drift 540s linear infinite;
}
.watermark svg { width: 100%; height: 100%; }
@keyframes drift { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }

.cine__body { position: relative; z-index: 1; padding: 5rem 0 4rem; }
.cine__body--hero {
  display: grid; align-items: end; gap: 2.5rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  padding: 4.5rem 0 5rem;
}
.hero__text { max-width: 44rem; }
/* A sub-page hero with the paper-doll showcase beside its copy: the figure is the game's actual art, lit by its own accent's glow. */
.cine__body--art { display: grid; align-items: center; gap: 2.5rem; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.cine__art { margin: 0; justify-self: center; width: min(100%, 24rem); display: grid; gap: 0.6rem; justify-items: center; filter: drop-shadow(0 0 32px rgba(43,228,255,0.28)); }
.cine__art img { width: 100%; height: auto; display: block; }
.cine__art figcaption { font-size: 0.8rem; color: var(--text-secondary); text-align: center; max-width: 30ch; }

/* The floating card, bottom right, overlapping the hero's lower edge. */
.hero__card {
  justify-self: end; width: min(100%, 26rem);
  padding: 1.35rem 1.35rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  transform: translateY(1.5rem);
}
.hero__cardhead { display: flex; align-items: center; justify-content: space-between; }
.hero__cardhead .kicker { margin: 0; }
.hero__cardbody { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: center; }
.hero__cardnote { margin: 0; font-size: 0.82rem; color: var(--text-secondary); }
.hero__card .pill { align-self: flex-start; }

/* ── Content bands ───────────────────────────────────────────────────────── */
.band { position: relative; padding: clamp(6rem, 9vw, 9rem) 0; }
.band--raise { padding-top: 0; margin-top: -3.5rem; z-index: 2; }
.band--raise > .wrap > :first-child { padding-top: 5.5rem; }
.band--raise > .wrap > .grid:first-child, .band--raise > .wrap > .grid--editions { padding-top: 0; }
.band--deep { background: var(--void); overflow: hidden; isolation: isolate; }
.band__bg { position: absolute; inset: 0; z-index: -1; }
.grid { display: grid; gap: 1.1rem; margin-top: 2rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
/* Cards that come in pairs (Sprint 5b, W1): the home page's four all-in-one cards, the support page's eight questions and /pro/'s four nutrition cards. .grid--2's 19rem tracks fit THREE across a 72rem wrap, which left a lone fourth card and a 3 + 3 + 2 grid (looked at, #649). A 26rem minimum fixed that and dropped every pair to ONE column from 600 to 820 px, where the FAQ had been two (the W1 review, measured): the track is at least half the row less a gap, so never three fit, and at least 19rem, so a phone still gets one. */
.grid--pairs { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(19rem, calc((100% - 1.1rem) / 2))), 1fr)); }
.split { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); align-items: center; }
.steps { margin: 0.4rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.7rem; color: var(--text-secondary); }
.steps b { color: var(--text-primary); }

/* Editions */
.edition { padding: 2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.edition__head { display: flex; align-items: center; justify-content: space-between; }
.edition__head .kicker { margin: 0; }
.edition ul { margin: 0.4rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.45rem; color: var(--text-secondary); }
.edition .cta { margin-top: auto; padding-top: 1rem; }
.edition--rpg { box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 var(--glass-hi), 0 0 0 1px rgba(43,228,255,0.12); }

/* Media */
.gallery { display: grid; gap: 0.9rem; margin-top: 2rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.gallery--wide { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.gallery--brand { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.tile { padding: 0.75rem; margin: 0; display: grid; gap: 0.5rem; justify-items: center; }
.tile img { width: 100%; height: auto; image-rendering: auto; }
.tile figcaption { font-size: 0.78rem; color: var(--text-secondary); text-align: center; }
.tile--dark { background: rgba(3,3,5,0.7); }
.tile--light { background: rgba(245,243,239,0.92); }
.tile--light figcaption a { color: #0B5E48; }
.tile--wide { grid-column: span 2; }
.gallery--line { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* A caption with a second line (the default build's) would stretch the other tiles' rows and drop their names lower; top-aligned, every name sits under its figure at one height. */
.gallery--line .tile, .gallery--looks .tile { align-content: start; }
.gallery--looks { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); margin-top: 1.4rem; }
.gallery__h { margin: 3rem 0 0.6rem; font-size: 1.3rem; }
.tile figcaption b { display: block; color: var(--text-primary); font-size: 0.86rem; }
.tile figcaption span { display: block; margin-top: 0.1rem; }
@media (max-width: 640px) { .gallery--line, .gallery--looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Legal ────────────────────────────────────────────────────────────────── */
.legal { max-width: 52rem; margin: 5.5rem auto 0; padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 3rem; background: var(--glass-strong); }
.band--raise > .wrap > .legal:first-child { padding-top: 2.5rem; }
.legal h2 { margin-top: 2.4rem; font-size: 1.35rem; max-width: none; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--text-secondary); }
.legal ul { padding-left: 1.2rem; }
/* Section 5's items run to twenty lines each on a phone, with only a bold lead-in between one recipient and the next (the W1 review). */
.legal li + li { margin-top: 0.6rem; }
.legal .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; }
.legal table { width: 100%; min-width: 30rem; border-collapse: collapse; margin: 0; font-size: 0.92rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border: 1px solid var(--border-subtle); }
.legal th { background: rgba(255,255,255,0.04); color: var(--text-primary); font-weight: 700; }
.legal td { color: var(--text-secondary); }
.legal address { color: var(--text-secondary); }
/* A TRANSLATED legal page opens with a note that the English original alone binds (§5.4): a bordered note with an amber edge, above section 1, which then needs no top margin of its own. English pages carry none. */
.legal .legal__notice { margin: 0 0 2rem; padding: 0.95rem 1.15rem; border: 1px solid rgba(255,176,32,0.32); border-left: 3px solid var(--amber); border-radius: 10px; background: rgba(255,176,32,0.07); color: var(--text-primary); font-size: 0.94rem; }
.legal__notice strong { color: var(--amber); }
.legal__notice a { color: var(--pulse-glow); text-decoration: underline; text-underline-offset: 0.16em; }
.legal__notice + h2 { margin-top: 0; }

/*
 * THE FOUR OTHER LANGUAGES' LONG WORDS (§5.3). German builds compounds ("Datenschutzerklärung", "Nutzungsbedingungen")
 * that overflow a narrow heading or a table cell at 320 px, so German text hyphenates by the browser's dictionary for the
 * language the page declares, and every one of the four breaks a word that still does not fit rather than running it off
 * the edge. Scoped by :lang(), so no English rule changes.
 */
:lang(de) :is(h1, h2, h3, .lede, .section-lede, .card p, .legal p, .legal li, .legal td) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
/* The guide's German (W3c): its body, steps and table cells hyphenate too, where a browser has the dictionary, so one long
   compound ("Beweglichkeitsarbeit", a table's widest cell) no longer sets a column's width on a phone. */
:lang(de) :is(.doc p, .doc li, .walk b, .doc-table th, .doc-table td, .callout__t):not(.ap *) { hyphens: auto; -webkit-hyphens: auto; }
:lang(es) :is(h1, h2, h3, .lede, .section-lede, .card p, .legal p, .legal li, .legal td), :lang(fr) :is(h1, h2, h3, .lede, .section-lede, .card p, .legal p, .legal li, .legal td), :lang(it) :is(h1, h2, h3, .lede, .section-lede, .card p, .legal p, .legal li, .legal td) { overflow-wrap: break-word; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--border-subtle); background: var(--void); padding: clamp(3.5rem, 6vw, 5rem) 0 2.5rem; color: var(--text-tertiary); font-size: 0.9rem; }
.foot__in { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; display: grid; gap: 2.5rem; }
.foot__cols { display: grid; gap: 2rem; grid-template-columns: 1.5fr repeat(5, 1fr); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 1.6rem; border-top: 1px solid var(--border-subtle); }
.foot h3 { margin: 0 0 0.7rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-secondary); }
.foot__cols a { display: block; color: var(--text-secondary); padding: 0.22rem 0; transition: color 160ms var(--ease-out); }
.foot__cols a:hover { color: #fff; text-decoration: none; }
.foot__cols .brand { display: inline-flex; padding: 0; }
.foot__blurb { margin: 0.8rem 0 0; max-width: 34ch; }
.foot__blurb a { display: inline; padding: 0; color: var(--pulse-glow); }
.foot address { font-style: normal; line-height: 1.7; margin-top: 0.6rem; color: var(--text-tertiary); }
.foot__copy { margin: 0; font-size: 0.82rem; }
/* The food data's credit (Sprint 5b, §4.4): a full row of the base row, above the copyright; its links are the site's links. */
.foot__credit { flex: 1 0 100%; margin: 0; font-size: 0.82rem; color: var(--text-secondary); }
/* Its three links in the line's own colour, told apart by an underline rather than by green: in the site's link colour the credit was the loudest line at the foot of every page, above the copyright (the W1 review; a default the owner may reverse). */
.foot__credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(166,171,198,0.45); text-underline-offset: 0.16em; }
.foot__credit a:hover { color: #fff; text-decoration-color: currentColor; }
/* The footer's language row (§2.5): the same five entries as the switcher, a row of their own at the foot of every page once two languages are published, the current one a span. */
.foot__langs { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.2rem; margin-top: 0.4rem; font-size: 0.86rem; }
.foot__lang { color: var(--text-secondary); padding: 0.2rem 0; transition: color 160ms var(--ease-out); }
a.foot__lang:hover { color: #fff; text-decoration: none; }
.foot__lang[aria-current] { color: #fff; font-weight: 700; }


/* ═══════════════════════════════════════════════════════════════════════════
   MOTION (2026-09-17): scroll-driven, in CSS.

   The reveals, the hero's fade-out, the chapters' pinned media and their
   phones' own scroll are all driven by the scroll position through CSS
   scroll-driven animations (animation-timeline: view() and scroll()),
   which every evergreen browser ships. Everything is wrapped in @supports so
   a browser without them renders every element's NATURAL state, which is the
   finished one for a reveal, a wipe and a fill, and the resting one for the
   switch (its knob on StatBlockPro): the page is complete on day one and
   gains its choreography where the engine is there. prefers-reduced-motion
   switches all of it off. The top bar's hide-and-return and the pointer's
   light are the two things the page's one inline script drives (#820); the
   features marquee is a plain CSS animation with a pause.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes rv-in { from { opacity: 0; transform: translateY(48px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes hero-out { to { opacity: 0; transform: translateY(-6vh) scale(0.96); } }
@keyframes hero-bg-hide { to { visibility: hidden; } }
@keyframes step-through {
  0% { opacity: 0; transform: translateY(56px); }
  24% { opacity: 1; transform: none; }
  76% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-40px); }
}
@keyframes wipe-in { from { clip-path: inset(22% 10% 10% 10% round 44px); opacity: 0.5; transform: translateY(24px); } to { clip-path: inset(-40% -40% -60% -40% round 40px); opacity: 1; transform: none; } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fill-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ap-ring { from { stroke-dashoffset: 249px; } }
@keyframes ap-radar { from { transform: scale(0.06); opacity: 0; } }
/* -100% is the body's own height and 100cqh the view's, less the 90px tab bar over it (9 + 23 + 3 + 12 + 8 and the 34px home inset): the last button ends where the app's own bottom padding puts it. */
@keyframes ap-scroll { to { transform: translateY(calc(-100% + 100cqh - 90px)); } }
@keyframes knob { from { transform: translateX(0); } to { transform: translateX(calc(100% + 0.5rem)); } }
@keyframes track { from { background: rgba(245,243,239,0.18); box-shadow: 0 0 0 1px rgba(245,243,239,0.35) inset; } to { background: rgba(43,228,255,0.22); box-shadow: 0 0 0 1px rgba(43,228,255,0.6) inset, 0 0 40px rgba(43,228,255,0.35); } }
@keyframes label-pro { from { color: #fff; } to { color: var(--text-tertiary); } }
@keyframes label-rpg { from { color: var(--text-tertiary); } to { color: var(--cyan); text-shadow: 0 0 18px rgba(43,228,255,0.6); } }
@keyframes ticker-run { to { transform: translateX(-50%); } }
@keyframes sweep-run { from { transform: translateX(-60%) skewX(-18deg); } to { transform: translateX(160%) skewX(-18deg); } }
@keyframes grid-run { to { background-position: 0 64px; } }
@keyframes cue { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.9; } 50% { transform: translateY(8px) rotate(45deg); opacity: 0.4; } }

@supports (animation-timeline: view()) {
  /* backwards, not both: the finished state IS the natural state, and holding it would pin transform: none over a card's hover lift. cover rather than entry, so a one-line eyebrow reveals over the same scroll distance as a card (an entry range is only as long as the subject is tall). */
  .rv { animation: rv-in var(--ease-out) backwards; animation-timeline: view(); animation-range: cover 0% cover 30%; }
  .rv--late { animation-range: cover 4% cover 34%; }
  .rv--later { animation-range: cover 8% cover 38%; }
  .rv--latest { animation-range: cover 12% cover 42%; }
  /* A reveal yields to keyboard focus: a link tabbed to inside a block not yet in view must not land faded or invisible. */
  .rv:focus-within, .step:focus-within, .wipe:focus-within { animation: none; }
  /* The hero sits under the curtain for the rest of the page; its grid and blooms stop painting once it is covered. */
  .hero__bg { animation: hero-bg-hide linear both; animation-timeline: scroll(root); animation-range: 100svh 101svh; }
    .hero__inner { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 90svh; }
  /* Only the LINKS leave the tab order once the curtain has covered them; the heading stays in the accessibility tree. */
  .hero__inner .stores { animation: hero-bg-hide linear both; animation-timeline: scroll(root); animation-range: 90svh 91svh; }
  .step { animation: step-through var(--ease-inout) both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  /* The chapter's media is sticky, so nothing inside it can key on its own view(): every animation in a chapter reads the CHAPTER's timeline. cover 0% is the chapter's top at the bottom of the screen; the device pins at about cover 23% of a three-step chapter. */
  .chapter { view-timeline: --chapter block; }
  .wipe { animation: wipe-in var(--ease-out) backwards; animation-timeline: --chapter; animation-range: cover 2% cover 20%; }
  .chapter .ap-fill { animation: fill var(--ease-out) both; animation-timeline: --chapter; animation-range: cover 10% cover 28%; }
  .chapter .ap-fill--y { animation: fill-y var(--ease-out) both; animation-timeline: --chapter; animation-range: cover 10% cover 28%; }
  .chapter .ap-ring__fill { animation: ap-ring var(--ease-out) both; animation-timeline: --chapter; animation-range: cover 10% cover 28%; }
  .chapter .ap-radar__poly { animation: ap-radar var(--ease-spring) both; animation-timeline: --chapter; animation-range: cover 12% cover 30%; }
  /* The phone's screen is taller than the phone and SCROLLS as the chapter does, one step ahead of the reader's eye. */
  .chapter .ap-scroll { animation: ap-scroll linear both; animation-timeline: --chapter; animation-range: cover 30% cover 92%; }
  @media (max-width: 980px) {
    .step { animation-name: rv-in; animation-range: entry 8% entry 48%; }
    .device { view-timeline: --device block; }
    .wipe { animation-timeline: --device; animation-range: entry 0% entry 60%; }
    .chapter .ap-fill, .chapter .ap-fill--y, .chapter .ap-ring__fill, .chapter .ap-radar__poly { animation-timeline: --device; animation-range: entry 20% entry 90%; }
    /* The phone is fully in view for a short stretch on a phone; it shows its top there and scrolls its screen as it leaves. */
    .chapter .ap-scroll { animation-timeline: --device; animation-range: exit 0% exit 85%; }
  }
  .switch { view-timeline: --switch block; }
  .toggle__knob { animation: knob var(--ease-spring) both; animation-timeline: --switch; animation-range: entry 45% entry 95%; }
  .toggle__track { animation: track linear both; animation-timeline: --switch; animation-range: entry 45% entry 95%; }
  .toggle__label--pro { animation: label-pro linear both; animation-timeline: --switch; animation-range: entry 45% entry 95%; }
  .toggle__label--rpg { animation: label-rpg linear both; animation-timeline: --switch; animation-range: entry 45% entry 95%; }
  /* The ticker rides the scroll: it travels half its width (one copy) while it crosses the viewport, so it moves exactly as fast as the reader does and stops when they do. */
  .ticker__track { animation: ticker-run linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}

/* ── Hero: pinned, the next section slides over it (the curtain) ─────────── */
.hero {
  position: sticky; top: 0; z-index: 0;
  min-height: max(100svh, 34rem);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; isolation: isolate;
  background: var(--void);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(3,3,5,0.6), rgba(3,3,5,0) 26%, rgba(3,3,5,0) 62%, var(--void) 100%),
    radial-gradient(120% 80% at 50% 40%, rgba(3,3,5,0) 40%, rgba(3,3,5,0.72) 100%);
}
.hero__inner { position: relative; z-index: 1; padding: 6rem 0 5rem; transform-origin: 50% 40%; will-change: transform, opacity; }
.hero__inner .display { margin-top: 0.2rem; }
.hero .lede--hero { max-width: 34ch; }
.floorgrid--live { animation: grid-run 4s linear infinite; }
.sweep {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 45%, rgba(43,228,255,0.07) 55%, rgba(255,255,255,0) 100%);
  transform: translateX(-60%) skewX(-18deg);
  animation: sweep-run 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  mix-blend-mode: screen;
}
.hero__cue {
  position: absolute; left: 50%; bottom: 1.6rem; z-index: 1;
  width: 40px; height: 40px; margin-left: -20px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.04);
  display: grid; place-items: center;
}
.hero__cue:hover { text-decoration: none; border-color: rgba(255,255,255,0.5); }
.hero__cue span { width: 9px; height: 9px; margin-top: -5px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); animation: cue 2.2s var(--ease-inout) infinite; }

/* The store buttons: two platforms, honest states. */
.stores { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.store {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.75rem 1.1rem 0.75rem 1rem; border-radius: 999px;
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 32px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  text-decoration: none;
}
/* The sheen: a diagonal light that crosses the pill on hover. */
.store { isolation: isolate; }
/* The sheen crosses the pill as a moving background layer under the light (the pseudo-elements are the light's now). */
.store { background-image: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)); background-size: 300% 100%, 100% 100%; background-position: 130% 0, 0 0; transition: transform 260ms var(--ease-out), border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out), background-position 700ms var(--ease-inout); }
.store:hover, .face:hover { text-decoration: none; }
@media (hover: hover) { .store:hover { transform: translateY(-2px); border-color: rgba(16,185,129,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(16,185,129,0.25), 0 0 32px rgba(16,185,129,0.18); } }
.store:focus-visible {
  text-decoration: none; transform: translateY(-2px);
  border-color: rgba(16,185,129,0.55);
 
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(16,185,129,0.25), 0 0 32px rgba(16,185,129,0.18);
}
@media (hover: hover) { .store:hover { background-position: -30% 0, 0 0; } }
.store:focus-visible { background-position: -30% 0, 0 0; }
.store:active { transform: translateY(0); transition-duration: 80ms; }
.store:focus-visible { outline: 2px solid var(--pulse); outline-offset: 3px; }
.store__glyph { color: var(--pulse-glow); flex: none; }
.store__arrow { color: var(--text-tertiary); flex: none; margin-left: 0.1rem; transition: transform 260ms var(--ease-out), color 260ms var(--ease-out); }
@media (hover: hover) { .store:hover .store__arrow { transform: translateX(3px); color: var(--pulse-glow); } }
.store:focus-visible .store__arrow { transform: translateX(3px); color: var(--pulse-glow); }
.store__text { display: grid; line-height: 1.15; text-align: left; }
/* The label is primary rather than secondary since #820: the pointer's light lifts the ground under it and secondary fell under 4.5:1 there. */
.store__text small { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-primary); font-weight: 700; }
.store__text b { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

/* The curtain: everything after the hero, on its own layer, so it slides over the pinned hero. */
.curtain { position: relative; z-index: 2; background: var(--base); box-shadow: 0 -40px 100px rgba(0,0,0,0.6); border-radius: 28px 28px 0 0; }
.band--first { padding-top: clamp(6.5rem, 9vw, 8.5rem); }

/* A viewport shorter than the hero (a landscape phone, a docked devtools) would pin a box whose foot nobody can scroll to; there the hero scrolls like any block and the curtain simply follows. */
@media (max-height: 40rem) {
  .hero { position: relative; }
  .hero__inner, .hero__inner .stores, .hero__bg { animation: none; }
}

/* ── Ticker ──────────────────────────────────────────────────────────────── */
.ticker { overflow: clip; border-bottom: 1px solid var(--border-subtle); border-radius: 28px 28px 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display: flex; width: max-content; padding: 1.1rem 0; }
.ticker__item { white-space: nowrap; padding: 0 1.4rem; font-family: var(--mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); position: relative; }
.ticker__item::after { content: ""; position: absolute; right: -3px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--pulse); box-shadow: 0 0 10px var(--pulse); }

/* ── Type additions ───────────────────────────────────────────────────────── */
.h2--xl { font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.02; max-width: 20ch; }

/* ── The two faces ───────────────────────────────────────────────────────── */
.faces { display: grid; gap: 1.1rem; margin-top: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.face { display: grid; gap: 0.4rem; padding: 2.4rem 2.2rem 2.5rem; min-height: 19rem; align-content: end; color: var(--text-primary); transition: transform 520ms var(--ease-spring), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
.face::before { z-index: 0; }
/* the face's own word, huge and cut by the card's edge */
.face .face__clip { position: absolute; inset: 0; z-index: 0; overflow: clip; border-radius: inherit; pointer-events: none; }
.face .face__ghost { position: absolute; right: -0.2em; top: -0.35em; font-size: 9rem; font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.09); pointer-events: none; transition: transform 700ms var(--ease-spring), -webkit-text-stroke-color 420ms var(--ease-out); }
.face--rpg .face__ghost { -webkit-text-stroke-color: rgba(43,228,255,0.16); }
@media (hover: hover) { .face:hover .face__ghost { transform: translate(-0.08em, 0.06em) rotate(-4deg); -webkit-text-stroke-color: rgba(110,231,183,0.32); } .face--rpg:hover .face__ghost { -webkit-text-stroke-color: rgba(43,228,255,0.36); } }
@media (hover: hover) { .face:hover { text-decoration: none; transform: translateY(-6px); border-color: rgba(255,255,255,0.24); box-shadow: 0 40px 90px rgba(0,0,0,0.5), inset 0 1px 0 var(--glass-hi); } }
.face .kicker { margin: 0 0 0.3rem; }
.face--rpg .kicker { color: var(--cyan); }
.face__title { margin: 0; font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.face__line { color: var(--text-secondary); font-size: 1rem; max-width: 34ch; }
.face__more { margin-top: 0.9rem; font-weight: 700; font-size: 0.9rem; color: var(--pulse-glow); }
.face--rpg { box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 var(--glass-hi), 0 0 0 1px rgba(43,228,255,0.14); }
.face--rpg .face__more { color: var(--cyan); }

/* ── Chapters: pinned media, text that scrolls through ───────────────────── */
.chapter { position: relative; padding: 4rem 0 3rem; }
.chapter__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.chapter__grid--flip .chapter__media { order: 2; }
.chapter__media { position: sticky; top: 4rem; height: calc(100svh - 4rem); display: flex; align-items: center; justify-content: center; }
/* The phone is 414 x 868 at its own scale (the app's 390 x 844 screen in a 12px bezel) and is zoomed as a whole, never narrowed, so nothing inside it reflows; zoom is layout-affecting, so the sticky box still centres it. */
@media (min-width: 981px) and (max-height: 52rem) { .device { --dz: 0.81; } }
@media (min-width: 981px) and (max-height: 47rem) { .device { --dz: 0.72; } }
@media (min-width: 981px) and (max-height: 42rem) { .device { --dz: 0.63; } }
.chapter__steps { display: grid; }
/* position and isolation: the step's light (its ::before, z-index -1) must sit inside the step, not behind the page (#820). */
.step { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 2rem 0; }
.step h2 { font-size: clamp(1.9rem, 4vw, 3rem); max-width: 16ch; }
.step .section-lede { font-size: clamp(1rem, 1.6vw, 1.15rem); }
.step .kicker { margin-bottom: 0.9rem; }

/* The device: a frame drawn in CSS, holding the app's own screen at a phone's own 390pt width, zoomed as a whole. */
.device {
  --dz: 0.9;
  width: 414px; max-width: 100%; aspect-ratio: 414 / 868; border-radius: 40px; zoom: var(--dz);
  padding: 12px; background: linear-gradient(160deg, #2A2C3A, #0B0C12 60%);
  box-shadow: 0 60px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.14), inset 0 0 0 2px rgba(0,0,0,0.9);
  position: relative; isolation: isolate;
}
.device::before { content: ""; position: absolute; top: 12px; left: 50%; width: 30%; height: 22px; margin-left: -15%; border-radius: 0 0 14px 14px; background: #06070B; z-index: 3; }
/* The bezel catches the pointer's light like every other surface; the mask keeps it off the screen. */
.device::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 12px; pointer-events: none; z-index: 2;
  /* The frame is zoomed, so the pointer's page-space offset is divided back into the frame's own space. */
  background: radial-gradient(360px circle at calc(var(--mx, 50%) / var(--dz)) calc(var(--my, 50%) / var(--dz)), rgba(255,255,255,0.28), rgba(255,255,255,0.06) 40%, transparent 68%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: var(--lit, 0); transition: opacity 520ms var(--ease-out);
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .device::after { display: none; } }

/* ── The app's screen: its palette as custom properties, its ramp, its shape language ── */
.ap {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 30px; display: flex; flex-direction: column;
  background: var(--ap-base); color: var(--ap-t1);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 20px; letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.ap * { box-sizing: border-box; margin: 0; }
.ap b { font-weight: 800; }
.ap-status { position: absolute; top: 0; left: 0; right: 0; height: 47px; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 30px; font-size: 15px; font-weight: 600; line-height: 1; }
.ap-status svg { display: block; }
/* ForgeLight: one radial bloom of the brand at the top centre, 260px tall, at full width. The SVG gradient is declared in the ELLIPSE's bounding box (cy 0%, r 70%), so its centre sits at the box's top, 240px above the screen, and the visible edge carries about 1% of the brand; the mask is the ellipse itself. */
.ap-bloom { position: absolute; top: 0; left: 0; right: 0; height: 260px; pointer-events: none; background: radial-gradient(126% 280px at 50% -240px, color-mix(in srgb, var(--ap-pulse) 14%, transparent), color-mix(in srgb, var(--ap-pulse) 4%, transparent) 55%, transparent 100%); -webkit-mask: radial-gradient(90% 200px at 50% -40px, black 99%, transparent 100%); mask: radial-gradient(90% 200px at 50% -40px, black 99%, transparent 100%); }
/* Screen.tsx: the header is fixed above a ScrollView; the view clips the body that scrolls beneath it. */
.ap-head { position: relative; flex: none; padding: 55px 20px 12px; }
.ap-view { position: relative; flex: 1; min-height: 0; overflow: hidden; container-type: size; }
.ap-scroll { position: relative; padding: 0 20px; will-change: transform; }
.ap-body { display: grid; gap: 14px; padding: 4px 0 74px; }
/*
 * The screen's width is the column's width in a translated phone (W2-int, sprint 5b). A one-column grid sizes its track
 * by its widest item's min-content, so one app label longer than the English (French "Choisir une boisson", "Anneau II"
 * on a loadout tile) widened the whole column past the screen, and the cards, their numbers and the buttons were cut at
 * its edge. Pinned to minmax(0, 1fr), a long label stays in its own row, where the app itself would truncate or wrap it:
 * a tile's slot ends in an ellipsis as its name does, and a word too long for its button (Italian
 * "dell'equipaggiamento") breaks as Android breaks it instead of running under the panel's edge. Scoped away from
 * English, whose phones were looked at and approved as drawn (#820) and stay pixel for pixel as they were; unscoped, the
 * rules would also move the English "Gripwraps" tile, whose name runs a few pixels past its box today.
 */
.ap:not(:lang(en)) :is(.ap-body, .ap-hyd, .ap-hyd__col, .ap-grid, .ap-btns, .ap-tile) { grid-template-columns: minmax(0, 1fr); }
.ap:not(:lang(en)) .ap-tile__slot { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ap:not(:lang(en)) :is(.ap-btn b, .ap-btn span) { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
/*
 * Room for the longer labels, measured in each language (the W2 review): with the English 8px padding and 0.1em tracking
 * a slot label had 48px and twelve of the forty translated ones ran past it, French "Anneau I" and "Anneau II" both ending
 * "ANNEA…" so the two rings read the same. At 5px and 0.03em every one fits but German "Handschuhe", which keeps its
 * ellipsis. The stat table's columns widen from the app's 49px to 58px ("Gesamt", "Totale" ran into the column beside
 * them); a record cell keeps 8px clear of the next, so a truncated note ("Eintritte in die Arena") no longer reads as one
 * line with its neighbour; and the half-width doors lose some padding and tracking, so German "Ausrüstungsladen" stays one
 * word on one line. A word no button can hold (Italian "dell'equipaggiamento") hyphenates where the browser has the
 * language's dictionary (the root carries lang), and breaks as Android breaks it where it has none.
 */
.ap:not(:lang(en)) .ap-tile { padding-left: 5px; padding-right: 5px; }
.ap:not(:lang(en)) .ap-tile__slot { letter-spacing: 0.03em; }
.ap:not(:lang(en)) .ap-tbl__c { width: 58px; }
.ap:not(:lang(en)) .ap-tbl__h { letter-spacing: 0.1em; }
.ap:not(:lang(en)) .ap-rec > div { padding-right: 8px; }
.ap:not(:lang(en)) .ap-btn--compact { padding-left: 10px; padding-right: 10px; }
.ap:not(:lang(en)) .ap-btn--compact b { letter-spacing: 0.2px; }
.ap-eyebrow { font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-pulse); margin-bottom: 5.25px; }
.ap-titlerow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ap-title { flex: 1; min-width: 0; font-size: 30px; line-height: 34px; font-weight: 800; letter-spacing: -0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ap-t1); }
.ap-icons { display: flex; align-items: center; gap: 4px; }
.ap-icon { width: 32px; height: 32px; display: grid; place-items: center; }
.ap-icon svg { display: block; }
.ap-sub { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ap-t3); }
.ap-rule { display: block; margin-top: 12px; width: 100%; height: auto; }
.ap-back { display: flex; align-items: center; gap: 4px; align-self: flex-start; padding: 4px 0; margin: 0 0 4px -4px; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap-power { text-align: right; }
.ap-power b { display: block; font-family: "Courier New", Courier, monospace; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ap-t1); }
.ap-power span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
/* SectionLabel: the eyebrow, a hairline that takes the rest of the row, an optional right slot. */
.ap-label { display: flex; align-items: center; gap: 12px; }
.ap-label > span:first-child { font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-t3); }
.ap-label > i { flex: 1; height: 1px; background: var(--ap-bsub); }
.ap-label__r { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
/*
 * Panel: the notched rectangle. The element is clipped to the notch polygon
 * and painted in the STROKE colour; its ::before is the same polygon inset by
 * the stroke width in the FILL colour (a cut edge inset by s sits 0.586s
 * closer, which is what --ni is); its ::after is the corner hairline from
 * (5, n+7) to (n+7, 5), a 1px line of (n+2)*sqrt2 turned 45 degrees.
 */
.ap-panel {
  position: relative; --n: 14px; --sw: 1px; --ni: calc(var(--n) - 0.586 * var(--sw));
  --fill: var(--ap-surface); --stroke: var(--ap-b); --rule: var(--ap-bstrong); --rule-o: 0.55;
  background: var(--stroke);
  clip-path: polygon(var(--n) 0, 100% 0, 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, 0 100%, 0 var(--n));
}
.ap-panel::before { content: ""; position: absolute; inset: var(--sw); background: var(--fill); clip-path: polygon(var(--ni) 0, 100% 0, 100% calc(100% - var(--ni)), calc(100% - var(--ni)) 100%, 0 100%, 0 var(--ni)); }
.ap-panel::after { content: ""; position: absolute; height: 1px; width: calc((var(--n) + 2px) * 1.4142); left: calc((var(--n) + 12px) / 2 - (var(--n) + 2px) * 0.7071); top: calc((var(--n) + 12px) / 2 - 0.5px); transform: rotate(-45deg); background: var(--rule); opacity: var(--rule-o); pointer-events: none; }
.ap-panel > * { position: relative; }
/* A toned panel: a 1.5px outline at 90% of the tone, the hairline in the tone at 80%, a 9% tint when tinted. */
.ap-panel[style*="--tone"] { --sw: 1.5px; --stroke: color-mix(in srgb, var(--tone) 90%, var(--ap-base)); --rule: var(--tone); --rule-o: 0.8; }
.ap-card { padding: 16px; }
/* StreakBanner (2026-10-27): Grit, the streak count, the chest's steps (StatBlockRPG), then POWER or the load badge. */
.ap-banner { --n: 14px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.ap-banner__g { display: grid; flex: none; }
.ap-banner__g > svg { display: block; }
.ap-banner__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ap-banner__row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.ap-banner__row > svg { display: block; flex: none; }
.ap-banner__row b { font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ap-t1); }
.ap-badge { display: inline-block; padding: 2px 6px; font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.ap-banner__steps { display: flex; align-items: center; gap: 8px; }
.ap-banner__steps > svg { display: block; flex: none; }
.ap-steps { flex: 1; display: flex; gap: 2px; }
.ap-steps > i { flex: 1; display: block; height: 5.25px; }
.ap-open { display: flex; align-items: center; gap: 4px; padding: 2px 6px; }
.ap-open > svg { display: block; flex: none; }
.ap-open b { font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ap-warn); }
.ap-banner__pow { flex: none; text-align: right; }
.ap-banner__pow b { display: block; font-family: "Courier New", Courier, monospace; font-size: 18px; line-height: 22px; font-weight: 700; color: var(--ap-t1); }
.ap-banner__pow span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap-banner__badge { flex: none; max-width: 116px; }
/* HexRing: a flat-top hexagon, the fill drawn from the top-left vertex clockwise by dash offset. */
.ap-ringrow { display: flex; justify-content: space-around; }
.ap-ringbox { position: relative; width: 92px; text-align: center; }
.ap-ring { display: block; }
.ap-ring__track { fill: none; stroke: var(--ap-inset); stroke-width: 7; stroke-linejoin: miter; }
.ap-ring__fill { fill: none; stroke-width: 7; stroke-linejoin: miter; stroke-linecap: butt; stroke-dasharray: 249 249; stroke-dashoffset: calc((1 - var(--v)) * 249px); }
.ap-ring__c { position: absolute; top: 0; left: 0; width: 92px; height: 92px; display: grid; place-content: center; }
.ap-ring__c b { display: block; font-family: "Courier New", Courier, monospace; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ap-t1); }
.ap-ring__c span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-cap { margin-top: 8px; }
.ap-cap b { display: block; font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; font-weight: 700; color: var(--ap-t1); }
.ap-cap span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
/* The rows inside the Today card that open with a hairline. */
.ap-sep { margin-top: 16px; border-top: 1px solid var(--ap-bsub); padding-top: 12.25px; }
.ap-k { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap-2xs { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-2xs-note { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-note { display: block; font-size: 12px; line-height: 14px; letter-spacing: 0.03em; color: var(--ap-t2); }
.ap-note--mt { margin-top: 8px; }
.ap-fig { display: block; font-family: "Courier New", Courier, monospace; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ap-t1); }
.ap-unit { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-mono-sm { font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 20px; color: var(--ap-t1); }
.ap-mono-2xs { font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; }
.ap-mono-2xs--t2 { color: var(--ap-t2); }
.ap-mono-2xs--t2 { color: var(--ap-t2); }
.ap-burn { display: flex; align-items: center; gap: 12px; }
.ap-burn > svg { flex: none; }
.ap-burn__c { flex: 1; min-width: 0; }
.ap-burn__n { text-align: right; }
.ap-macro { margin-top: 16px; }
.ap-row2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ap-row2--h { margin-bottom: 8px; }
.ap-sep .ap-row2--h { margin-bottom: 5.25px; }
.ap-macro__p { display: grid; gap: 4px; }
.ap-macro__p b { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); }
.ap-cols { display: flex; gap: 12px; margin-top: 12px; }
.ap-cols > div { flex: 1; display: grid; gap: 4px; min-width: 0; }
/* Meter: a squared bar; the fill's leading edge is cut at 45 degrees; quarter ticks over it; a 1px outline. */
.ap-meter { position: relative; display: block; height: var(--h, 8px); background: var(--ap-inset); }
.ap-meter__fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v) * 100%); background: var(--c); clip-path: polygon(0 0, calc(100% - var(--h) * 0.6) 0, 100% 100%, 0 100%); }
.ap-meter::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px var(--ap-bsub); background: linear-gradient(var(--ap-base), var(--ap-base)) 25% 0 / 1px 100% no-repeat, linear-gradient(var(--ap-base), var(--ap-base)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--ap-base), var(--ap-base)) 75% 0 / 1px 100% no-repeat; opacity: 0.9; }
.ap-notes { margin-top: 16px; display: grid; gap: 4px; }
/* HydrationCard: its own label and a panel nested inside the Today card, abutting the notes. */
.ap-hyd { display: grid; gap: 8px; }
.ap-notes + .ap-hyd { margin-top: 16px; }
.ap-hyd__panel { --n: 12px; }
.ap-hyd__in { display: flex; align-items: center; gap: 16px; padding: 12px; }
.ap-hyd__in > svg { flex: none; }
.ap-hyd__col { flex: 1; min-width: 0; display: grid; gap: 8px; }
.ap-hyd__total { display: flex; align-items: baseline; gap: 5.25px; }
.ap-hyd__total b { font-size: 24px; line-height: 30px; letter-spacing: -0.015em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ap-t1); }
.ap-hyd__total span { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-hyd__caf { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-hyd__in--row { display: grid; gap: 5.25px; padding: 8.75px 10.5px; }
.ap-hyd__in--row .ap-hyd__total b { font-size: 18px; line-height: 26px; }
.ap-hyd__line { display: flex; align-items: center; gap: 8px; }
.ap-hyd__bar { flex: 1; min-width: 0; height: 6px; background: var(--ap-inset); overflow: hidden; }
.ap-hyd__bar > i { display: block; height: 6px; background: var(--ap-pulse); }
.ap-hyd__line .ap-qa { flex: none; }
.ap-hyd__line .ap-qa > span { flex: none; padding: 8px 10px; }
/* QuickActions: three equal brand-outlined buttons at the top of Home (#964). */
.ap-quick { display: flex; gap: 8px; }
.ap-quick span { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--ap-pulse) 55%, transparent); background: color-mix(in srgb, var(--ap-pulse) 10%, transparent); font-size: 13px; font-weight: 800; color: var(--ap-pulse); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-qa { display: flex; gap: 8px; }
.ap-qa > span { flex: 1; min-width: 0; text-align: center; padding: 8px 12px; border: 1px solid var(--ap-b); font-size: 12px; line-height: 16px; letter-spacing: 0.03em; font-weight: 700; color: var(--ap-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-qa > .ap-qa--on { border-color: color-mix(in srgb, var(--ap-pulse) 55%, transparent); background: color-mix(in srgb, var(--ap-pulse) 12%, transparent); color: var(--ap-pulse); }
/* LoadGauge: a linear bar with a hard threshold tick at its far end; never a ring (#227). */
.ap-gauge { position: relative; display: block; height: 10px; background: var(--ap-inset); }
.ap-gauge__fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v) * 100%); background: color-mix(in srgb, var(--ap-t2) 85%, transparent); }
.ap-gauge::after { content: ""; position: absolute; right: 0; top: -1px; bottom: -1px; width: 1.5px; background: var(--ap-warn); }
.ap-focus { display: flex; align-items: flex-start; gap: 5.25px; margin-top: 8px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t2); }
.ap-focus > i { flex: none; width: 4px; height: 4px; margin-top: 6px; background: var(--ap-t2); }
/* Button: a notched fill with a 1.5px outline and no hairline; the label uppercase, a note under it at 65%. */
.ap-btns { margin-top: 4px; display: grid; gap: 8.75px; }
.ap-btns--sheet { margin-top: 8px; }
.ap-btn { --n: 12px; --sw: 1.5px; --rule-o: 0; padding: 14px 20px; text-align: center; }
.ap-btn::after { display: none; }
.ap-btn b { display: block; font-size: 15px; line-height: 20px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; }
.ap-btn span { display: block; margin-top: 2px; font-size: 11px; line-height: 15px; letter-spacing: 0.4px; opacity: 0.65; }
.ap-btn--compact { --n: 8px; padding: 9px 14px; }
.ap-btn--compact b { font-size: 13px; line-height: 18px; }
.ap-btn--pulse { --fill: var(--ap-pulse); --stroke: var(--ap-glow); color: var(--ap-tinv); }
.ap-btn--secondary { --fill: var(--ap-elev); --stroke: var(--ap-bstrong); color: var(--ap-t1); }
.ap-btn--primary { --fill: var(--ap-bone); --stroke: var(--ap-bone); color: var(--ap-tinv); }
.ap-doors { display: flex; gap: 8px; }
.ap-doors > .ap-btn { flex: 1; min-width: 0; }
/* A tab's parts (SegmentedControl.tsx): equal buttons in an inset frame, the chosen one outlined and washed in the brand. */
.ap-seg { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--ap-b); background: var(--ap-inset); }
.ap-seg span { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 6px; border: 1px solid transparent; font-size: 13px; line-height: 15px; font-weight: 600; text-align: center; color: var(--ap-t2); overflow: hidden; }
.ap-seg .ap-seg--on { border-color: var(--ap-pulse); background: color-mix(in srgb, var(--ap-pulse) 14%, transparent); color: var(--ap-pulse); font-weight: 800; }
/* The tab bar: four or five slots on the surface, a 2px rail and a 6% wash over the focused one, the home indicator under it. */
.ap-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; padding-bottom: 34px; background: var(--ap-surface); border-top: 1px solid var(--ap-bsub); }
.ap-tab { position: relative; flex: 1; display: grid; justify-items: center; padding: 9px 0 8px; font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ap-t3); }
.ap-tab svg { width: 23px; height: 23px; margin-bottom: 3px; }
.ap-tab--on { color: var(--ap-pulse); font-weight: 800; background: color-mix(in srgb, var(--ap-pulse) 6%, transparent); }
.ap-tab--on::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ap-pulse); }
.ap-tabs::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--ap-t1); }
/* ── The character sheet's own pieces ── */
.ap-orig { --n: 16px; --fill: color-mix(in srgb, var(--tone) 9%, var(--ap-surface)); }
.ap-orig__row { display: flex; align-items: center; gap: 12px; padding: 16px; }
/* the paper doll's square canvas at the card's HEIGHT, cropping only its empty side margins, which is how AvatarRenderer draws it in the sheet's 112 x 122 */
.ap-orig__row > img { flex: none; width: 112px; height: 122px; object-fit: cover; display: block; }
.ap-orig__col { flex: 1; min-width: 0; display: grid; gap: 8px; }
.ap-orig__arch { display: block; font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; color: var(--tone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-orig__lc { display: flex; gap: 16px; }
.ap-orig__lc > div { flex: 1; min-width: 0; }
.ap-orig__lc b { display: block; font-size: 14px; line-height: 20px; font-weight: 800; }
.ap-orig__btn { padding: 0 16px 16px; }
.ap-radar { position: relative; width: 264px; margin: 0 auto; }
.ap-radar > svg { display: block; }
.ap-radar__poly { transform-box: view-box; transform-origin: 132px 132px; }
.ap-radar__max { position: absolute; left: 0; right: 0; top: 116px; text-align: center; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-t3); }
.ap-legend { margin-top: 4px; display: flex; justify-content: center; gap: 16px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap-legend > span { display: flex; align-items: center; gap: 5.25px; }
.ap-legend i { width: 14px; height: 2px; }
/* The stat table: three 49px right-aligned columns (w-14 at NativeWind's 14px rem). */
.ap-tbl__h { display: flex; align-items: center; padding-bottom: 8px; font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-t3); }
.ap-tbl__h .ap-tbl__stat { flex: 1; }
.ap-tbl__c { width: 49px; text-align: right; font-family: "Courier New", Courier, monospace; }
.ap-tbl__h .ap-tbl__c { font-family: inherit; }
.ap-tbl__c--pulse { color: var(--ap-pulse); }
.ap-tbl__r { display: flex; align-items: center; padding: 8px 0; border-top: 1px solid var(--ap-bsub); }
.ap-tbl__r .ap-tbl__stat { flex: 1; display: flex; align-items: center; gap: 8px; }
.ap-tbl__stat i { width: 3px; height: 16px; background: var(--tone); }
.ap-tbl__stat b { font-size: 14px; line-height: 20px; font-weight: 800; color: var(--tone); }
.ap-tbl__base { font-size: 14px; line-height: 20px; color: var(--ap-t2); }
.ap-tbl__buff { font-size: 14px; line-height: 20px; color: var(--ap-pulse); }
.ap-tbl__zero { font-size: 14px; line-height: 20px; color: var(--ap-tdis); }
.ap-tbl__total { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ap-t1); }
.ap-tbl__note { margin-top: 12px; }
/* The record: six cells, three to a row. */
.ap-rec { display: flex; flex-wrap: wrap; }
.ap-rec > div { width: 33.333%; padding: 8px 0; min-width: 0; }
.ap-rec__v { display: block; font-family: "Courier New", Courier, monospace; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ap-t1); white-space: nowrap; }
.ap-rec__n { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-scrap { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.ap-scrap > svg { display: block; }
/* The loadout: two rows of five tiles; an empty slot is an inset panel, a worn item's notch depth and pip count encode its rarity (§9.3). */
/* The two rows are siblings of the ScrollView in the app, so the screen's 14px rhythm separates them; 8px is the gap WITHIN a row. */
.ap-grid { display: grid; gap: 14px; }
.ap-grid__row { display: flex; gap: 8px; }
.ap-tile { flex: 1; min-width: 0; --n: 7px; --fill: var(--ap-inset); display: grid; justify-items: center; gap: 5.25px; padding: 12px 8px; }
.ap-tile > svg { display: block; }
.ap-tile__slot { font-size: 10px; line-height: 12px; height: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); white-space: nowrap; }
.ap-tile--worn { --fill: color-mix(in srgb, var(--tone) 9%, var(--ap-elev)); }
.ap-tile__name { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; font-weight: 700; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ap-tile__meta { display: flex; align-items: center; gap: 5.25px; }
.ap-pips { display: flex; gap: 3px; }
.ap-pips i { width: 4px; height: 4px; background: var(--ap-b); opacity: 0.55; }
.ap-pips i.on { background: var(--tone); opacity: 1; }
.ap-tile__slot--tone { color: var(--tone); }
.ap-grid__note { margin-top: -4px; }
.chapter .ap-fill { transform-origin: 0 50%; }
.chapter .ap-fill--y { transform-box: fill-box; transform-origin: 50% 100%; }

/* Guide hub: the Settings screen (StatBlockPro), its App and display group open. */
.ap .gh-grp { --n: 14px; }
.ap .gh-grp--open { --fill: var(--ap-elev); }
.ap .gh-grp__head { display: flex; align-items: center; gap: 12px; padding: 16px; }
.ap .gh-grp__head > svg { flex: none; display: block; }
.ap .gh-grp__ic { flex: none; width: 31.5px; height: 31.5px; display: grid; place-items: center; }
.ap .gh-grp__ic svg { display: block; }
.ap .gh-grp__c { flex: 1; min-width: 0; }
.ap .gh-grp__c b { display: block; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gh-grp__c span { display: block; margin-top: 2px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .gh-grp__body { display: grid; gap: 14px; padding: 0 16px 20px; }
.ap .gh-stack { display: grid; gap: 8px; }
.ap .gh-row { --n: 12px; display: flex; align-items: center; gap: 12px; padding: 12.25px 16px; }
.ap .gh-row > svg { flex: none; display: block; }
.ap .gh-row b { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ap-t1); }
.ap .gh-toggle { --n: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 12.25px; }
.ap .gh-toggle__c { flex: 1; min-width: 0; }
.ap .gh-toggle__c b { display: block; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ap-t1); }
.ap .gh-toggle__c span { display: block; margin-top: 2px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t2); }
.ap .gh-switch { flex: none; width: 46px; height: 26px; padding: 3px; display: flex; align-items: center; justify-content: flex-start; background: var(--ap-elev); border: 1px solid var(--ap-bsub); }
.ap .gh-switch i { display: block; width: 18px; height: 18px; background: var(--ap-t3); }
.ap .gh-note { margin-top: 12px; }
.ap .gh-cg { font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-t3); }
.ap .gh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8.75px; }
.ap .gh-chip { --n: 7px; flex: 1 1 auto; padding: 8px 12px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t2); }
.ap .gh-chip--on { color: var(--ap-pulse); }

/* Guide: Training (/guide/training/). The live session logger (session/[id].tsx, SetRow.tsx) and the routines list (routines.tsx), drawn from the app's own measurements. */
/* LoggerHeader.tsx: two equal corners (the way back, the rest chip) and the title over the clock between them, at most half the row. */
.ap .gt-shead { position: relative; flex: none; display: grid; justify-items: center; gap: 6px; padding: 55px 20px 12px; }
.ap .gt-shead__row { display: flex; align-items: center; width: 100%; }
/* The Daily Pace pill on its own line under the clock (LoggerHeader.tsx, PacePill.tsx): 28 points, a PRIME day in the brand colour. */
.ap .gt-pace { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--ap-pulse) 60%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--ap-pulse) 8%, transparent); }
.ap .gt-pace > svg { display: block; flex: none; }
.ap .gt-pace > b { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ap-pulse); white-space: nowrap; }
.ap .gt-shead__l, .ap .gt-shead__r { flex: 1; display: flex; }
.ap .gt-shead__r { justify-content: flex-end; }
.ap .gt-shead__l > svg { display: block; flex: none; }
.ap .gt-shead__c { display: grid; justify-items: center; max-width: 50%; }
.ap .gt-shead__t { font-size: 12px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ap .gt-shead__time { font-family: "Courier New", Courier, monospace; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ap-t1); }
/* RestBar.tsx's RestChip: "REST" over "1:30", a 46-point box with a hairline border. */
.ap .gt-rchip { display: grid; justify-items: center; align-content: center; min-width: 46px; min-height: 46px; padding: 0 8px; border: 1px solid var(--ap-b); border-radius: 3px; }
.ap .gt-rchip > span { font-size: 10px; line-height: 14px; text-transform: uppercase; color: var(--ap-t3); white-space: nowrap; }
.ap .gt-rchip > b { font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ap-t2); }
/* RestBar.tsx, docked over the bottom of the list above the footer: two step buttons, the countdown between them, Skip. */
.ap .gt-dock { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 20px 10px; }
.ap .gt-restbar__in { display: flex; align-items: center; gap: 6px; padding: 6px; }
.ap .gt-step { flex: none; display: grid; place-items: center; min-width: 48px; min-height: 46px; padding: 0 4px; border-radius: 3px; background: var(--ap-inset); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t2); white-space: nowrap; }
.ap .gt-restbar__c { flex: 1; min-width: 0; display: grid; justify-items: center; }
.ap .gt-restbar__c > span { font-size: 10px; line-height: 14px; font-weight: 700; text-transform: uppercase; color: var(--ap-pulse); white-space: nowrap; }
.ap .gt-restbar__c > b { font-family: "Courier New", Courier, monospace; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ap-pulse); }
.ap .gt-skip { flex: none; display: grid; place-items: center; min-width: 56px; min-height: 46px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--ap-pulse) 60%, transparent); border-radius: 3px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-pulse); white-space: nowrap; }
.ap .gt-list { display: grid; gap: 12px; padding-bottom: 32px; }
.ap .gt-ex { --n: 12px; }
.ap .gt-ex__in { padding: 12px; }
.ap .gt-ex__h { display: flex; align-items: center; margin-bottom: 8px; }
.ap .gt-ex__h > svg { display: block; flex: none; }
.ap .gt-ex__name { flex: 1; min-width: 0; }
.ap .gt-ex__name b { display: block; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ap-t1); }
.ap .gt-ex__rx { display: block; margin-top: 2px; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-pulse); }
.ap .gt-ex__chip { margin-right: 12px; flex: none; display: flex; }
.ap .gt-ex__icon { margin-right: 12px; display: flex; }
.ap .gt-chip { --n: 5px; --rule-o: 0; display: inline-flex; align-items: center; padding: 3px 7px; font-size: 10px; line-height: 13px; font-weight: 800; letter-spacing: 0.6px; white-space: nowrap; }
.ap .gt-chip::after { display: none; }
.ap .gt-cols { display: flex; align-items: center; gap: 8px; padding: 0 8px 4px; }
.ap .gt-cols > span { flex: 1; text-align: center; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-t3); }
.ap .gt-cols > .gt-cols__set { flex: none; width: 34px; }
.ap .gt-cols > i { flex: none; width: 56px; }
.ap .gt-set { padding: 5.25px 8px; border-left: 2px solid transparent; }
.ap .gt-set__row { display: flex; align-items: center; gap: 8px; }
.ap .gt-set__row > svg { display: block; flex: none; }
/* Last session's numbers and the record badge, on a line of their own under the weight column (SetRow.tsx, PrBadge.tsx). */
.ap .gt-prev { display: flex; align-items: center; gap: 6px; margin: 2px 0 0 42px; }
.ap .gt-prev__t { flex: 1; min-width: 0; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; color: var(--ap-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gt-pr { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border: 1px solid color-mix(in srgb, var(--ap-warn) 60%, transparent); border-radius: 2px; background: color-mix(in srgb, var(--ap-warn) 12%, transparent); }
.ap .gt-pr > svg { display: block; }
.ap .gt-pr > b { font-size: 10px; line-height: 14px; font-weight: 700; text-transform: uppercase; color: var(--ap-warn); }
/* TargetBadge.tsx: a 30-point badge on its own line under the name, in the brand colour. */
.ap .gt-ex__goal { margin-bottom: 8px; }
.ap .gt-target { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; max-width: 100%; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--ap-pulse) 55%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--ap-pulse) 8%, transparent); }
.ap .gt-target > svg { display: block; flex: none; }
.ap .gt-target > b { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ap-pulse); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gt-set--done { background: var(--ap-pfaint); border-left-color: var(--ap-pulse); }
.ap .gt-set__n { flex: none; width: 34px; text-align: center; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; font-weight: 700; color: var(--ap-t3); }
.ap .gt-set__n--w { color: var(--ap-warn); }
.ap .gt-set__sp { flex: 1; min-width: 0; }
.ap .gt-cell { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 3px; background: var(--ap-inset); font-size: 15px; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ap-t1); }
.ap .gt-cell--ph { color: var(--ap-t3); }
/* The RIR cell keeps a field's height when it is empty (RirCell.tsx: minHeight 36), and its heading is underlined as the app's is (it opens the glossary). */
.ap .gt-rir { box-sizing: border-box; min-height: 35px; }
.ap .gt-cols > .gt-cols__rir { text-decoration: underline; }
.ap .gt-set__tick { flex: none; display: flex; padding: 0 4px; }
.ap .gt-add { display: flex; gap: 8px; margin-top: 8px; }
.ap .gt-add__set { --n: 7px; --fill: var(--ap-elev); flex: 1; }
.ap .gt-add__wu { --n: 7px; }
.ap .gt-add__set > span, .ap .gt-add__wu > span { display: block; padding: 8px 16px; text-align: center; font-size: 14px; line-height: 20px; font-weight: 700; }
.ap .gt-add__set > span { color: var(--ap-t2); }
.ap .gt-add__wu > span { color: var(--ap-t3); }
.ap .gt-foot { position: relative; flex: none; margin-bottom: 90px; padding: 12px 20px; border-top: 1px solid var(--ap-bsub); background: var(--ap-surface); }
.ap .gt-foot__row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; color: var(--ap-t3); }
.ap .gt-foot__vol { font-family: "Courier New", Courier, monospace; }
.ap .gt-foot__d { display: flex; justify-content: center; margin-top: 8px; }
.ap .gt-ghost { --fill: var(--ap-surface); --stroke: var(--ap-b); color: var(--ap-t2); }
.ap .gt-count { font-family: "Courier New", Courier, monospace; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ap-t1); }
.ap .gt-rcard { --n: 13px; }
.ap .gt-rcard__in { padding: 16px; }
.ap .gt-rcard__n { display: block; font-size: 16px; line-height: 24px; font-weight: 800; color: var(--ap-t1); }
.ap .gt-rcard__d { display: block; margin-top: 4px; font-size: 12px; line-height: 14px; letter-spacing: 0.03em; color: var(--ap-t2); }
.ap .gt-rcard__chips { display: flex; flex-wrap: wrap; gap: 5.25px; margin-top: 12px; }
.ap .gt-hint { padding: 0 4px; margin-top: -6px; }
.ap .gt-chips { display: flex; gap: 6px; padding: 2px 0; }
.ap .gt-tile { --n: 10px; }
.ap .gt-tile__in { display: flex; align-items: center; gap: 12px; padding: 12.25px; }
.ap .gt-tile__in > svg { display: block; flex: none; }
.ap .gt-tile__c { flex: 1; min-width: 0; }
.ap .gt-tile__c b { display: block; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ap-t1); }
.ap .gt-tile__c span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .gt-tile__r { display: grid; justify-items: end; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; }
.ap .gt-tile__d { font-family: "Courier New", Courier, monospace; }
/* The Fitness tab's Training part (FitnessHub.tsx, ActivityLogger.tsx) and Body Map part (BodyMapSegment.tsx), 2026-10-27. */
.ap .ap-label__r .gt-chip { margin-left: 6px; }
/* The routines' heading over its own row of chips, right-aligned and wrapping (FitnessHub.tsx's WorkoutsBlock, gap 1.5 and 2). */
.ap .gt-rhead { display: grid; gap: 7px; }
.ap .gt-rhead__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5.25px; }
/* SleepPill.tsx at the top of Training (the "Level 3" sprint, D1): 26 points, the tertiary tone at 12% behind it, end-aligned. */
.ap .gt-sleep { justify-self: end; display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 9px; background: color-mix(in srgb, var(--ap-t3) 12%, transparent); }
.ap .gt-sleep > svg { display: block; flex: none; }
.ap .gt-sleep > b { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase; color: var(--ap-t2); white-space: nowrap; }
.ap .gt-start { --n: 18px; }
.ap .gt-start__in { display: flex; align-items: center; gap: 12px; padding: 14px; }
.ap .gt-start__in > svg { flex: none; }
.ap .gt-start__in > .ap-btn { flex: 1; }
.ap .gt-search { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--ap-b); background: var(--ap-inset); font-size: 14px; line-height: 18px; color: var(--ap-t3); }
.ap .gt-search > svg { flex: none; }
.ap .gt-acts { --n: 10px; }
.ap .gt-acts__in { padding: 0 16px; }
.ap .gt-act { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ap-bsub); }
.ap .gt-act:last-child { border-bottom: 0; }
.ap .gt-act__c b { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ap-t1); }
.ap .gt-act__c > span { display: block; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; color: var(--ap-t3); }
.ap .gt-act__rec { padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--ap-info) 60%, transparent); font-size: 10px; line-height: 13px; font-weight: 800; color: var(--ap-info); }
.ap .gt-cat { --n: 8px; }
.ap .gt-cat__in { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.ap .gt-cat__in b { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); }
.ap .gt-cat__r { display: flex; align-items: center; gap: 10px; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; color: var(--ap-t3); }
.ap .gt-cat__r i { font-style: normal; font-family: inherit; }
.ap .gt-win { margin-bottom: -7px; font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-t3); }
.ap .gt-presets { display: flex; flex-wrap: wrap; gap: 5.25px; }
.ap .gt-map { --n: 12px; }
.ap .gt-map__in { display: flex; justify-content: center; gap: 8px; padding: 16px 12px; }
.ap .gt-map__v { display: grid; justify-items: center; gap: 4px; }
.ap .gt-map__v > span { font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap .gt-map__v svg { display: block; width: 100px; height: 220px; }
.ap .gt-bal__in { display: grid; gap: 16px; padding: 16px; }
.ap .gt-bal__w { font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap .gt-pair { display: grid; gap: 5.25px; }
.ap .gt-pair__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ap .gt-pair__h b { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); }
.ap .gt-pair__h span { flex: none; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; color: var(--ap-t3); }
.ap .gt-bar { display: block; height: 6px; background: var(--ap-overlay); }
.ap .gt-bar > i { display: block; height: 6px; background: var(--ap-t3); }
.ap .gt-pair__s { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t2); }
.ap .gt-xc { --n: 10px; }
.ap .gt-xc__in { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 44px; }
.ap .gt-xc__in > svg { flex: none; }
.ap .gt-xc__c { flex: 1; min-width: 0; }
.ap .gt-xc__c b { display: block; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); }
.ap .gt-xc__c span { display: block; margin-top: 2px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .gt-xc__in > i { font-style: normal; font-size: 12px; color: var(--ap-t3); }
/* Guide: nutrition and body (gn-): the food diary screen, from nutrition.tsx, MacroRings.tsx and WeightGoalCard.tsx. */
.ap .gn-body { grid-template-columns: minmax(0, 1fr); }
.ap .gn-edit { font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-pulse); }
.ap .gn-rings { display: grid; justify-items: center; gap: 12px; }
.ap .gn-rings > svg { display: block; }
.ap .gn-leg { width: 100%; display: grid; gap: 5.25px; }
.ap .gn-leg__row { display: flex; align-items: center; justify-content: space-between; }
.ap .gn-leg__l { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; color: var(--ap-t2); }
.ap .gn-leg__l i { display: block; width: 3px; height: 14px; }
.ap .gn-leg__r { display: flex; align-items: baseline; gap: 8px; }
.ap .gn-leg__v { font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; color: var(--ap-t1); white-space: nowrap; }
.ap .gn-leg__v span { color: var(--ap-t3); }
.ap .gn-leg__rem { width: 80px; text-align: right; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; }
.ap .gn-leg__rem--over { color: var(--ap-bone); }
.ap .gn-wt { --n: 8px; padding: 12.25px; }
.ap .gn-wt__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ap .gn-wt__k { font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap .gn-wt__v { font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); white-space: nowrap; }
.ap .gn-wt__v span { color: var(--ap-t3); }
.ap .gn-wt__note { display: block; margin-top: 8px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .gn-meal { --n: 12px; padding: 16px; }
.ap .gn-meal__h { display: flex; align-items: center; justify-content: space-between; }
.ap .gn-meal__slot { font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-t3); }
.ap .gn-meal__kcal { font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 16px; letter-spacing: 0.03em; color: var(--ap-t2); }
.ap .gn-meal__rows { margin-top: 8.75px; display: grid; gap: 8px; }
.ap .gn-srv { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ap .gn-srv__c { flex: 1; min-width: 0; }
.ap .gn-srv__n { display: block; font-size: 14px; line-height: 20px; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gn-srv__m { display: block; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gn-srv__k { font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 20px; color: var(--ap-t2); }
.ap .gn-btns { margin-top: 4px; display: flex; gap: 8px; }
.ap .gn-btns > .ap-btn { flex: 1; min-width: 0; }

/* The guide's character page (/guide/character/): the character creator (CreatorScreen.tsx) and the key on the sheet's legend. */
.ap .gc-prev { --n: 16px; }
.ap .gc-prev__in { display: flex; justify-content: center; padding: 16px 0; }
.ap .gc-prev__in > img { display: block; width: 150px; height: 200px; object-fit: cover; }
.ap .gc-row { display: grid; gap: 8px; min-width: 0; }
.ap .gc-strip { display: flex; align-items: center; gap: 6px; overflow: hidden; }
.ap .gc-strip--end { justify-content: flex-end; }
.ap .gc-strip--sw { gap: 8px; }
.ap .gc-chip { flex: none; --n: 6px; --sw: 1px; display: flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 11.5px; line-height: 14px; font-weight: 800; letter-spacing: 0.6px; white-space: nowrap; }
.ap .gc-chip::after, .ap .gc-sw::after { display: none; }
.ap .gc-chip--off { color: var(--ap-t2); }
.ap .gc-chip--on { color: var(--ap-pulse); }
.ap .gc-chip--lock { color: var(--ap-t3); }
.ap .gc-price { display: inline-flex; align-items: center; gap: 3px; font-family: "Courier New", Courier, monospace; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ap .gc-price > svg { display: block; }
.ap .gc-sw { flex: none; width: 40px; height: 40px; --n: 7px; }
.ap .gc-sw--on { --sw: 2px; --stroke: var(--ap-t1); }
/* scrolled a little, as a thumb leaves it, so the Hair row clears the footer */
.ap .gc-scrolled { transform: translateY(-20px); }
.ap .gc-foot { flex: none; margin-bottom: 90px; padding: 12px 20px 46px; background: var(--ap-surface); border-top: 1px solid var(--ap-bsub); }
.ap .gc-key--base { background: var(--ap-bone); }
.ap .gc-key--buff { background: var(--ap-pulse); opacity: 0.7; }

/* The Games hub (GamesHub.tsx, ModeCard.tsx), 2026-10-27. */
.ap .gg-bar__in { display: flex; align-items: center; gap: 12px; padding: 8.75px 12.25px; }
.ap .gg-bar__in > img { flex: none; width: 34px; height: 34px; object-fit: cover; object-position: 50% 8%; display: block; }
.ap .gg-bar__in > svg { flex: none; }
.ap .gg-stat { flex: 1; min-width: 0; }
.ap .gg-stat span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap .gg-stat b { display: block; margin-top: 2px; font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 20px; font-weight: 700; }
.ap .gg-cards { display: grid; gap: 10px; }
.ap .gg-card__in { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.ap .gg-card__in > img { flex: none; width: 64px; height: 64px; display: block; }
.ap .gg-card__c { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ap .gg-card__c b { font-size: 18px; line-height: 24px; font-weight: 800; color: var(--ap-t1); }
.ap .gg-card__c > span { font-size: 12px; line-height: 16px; color: var(--ap-t2); }
.ap .gg-pills { display: flex; flex-wrap: wrap; gap: 5.25px; }
.ap .gg-pill { padding: 2px 6px; border: 1px solid; font-size: 10px; line-height: 13px; font-weight: 800; letter-spacing: 0.6px; white-space: nowrap; }
.ap .gg-open { flex: none; display: grid; justify-items: center; }
.ap .gg-open span { font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; }
.ap .gg-open i { font-style: normal; font-size: 18px; line-height: 22px; }
/* The week's raid strip (RaidStripView.tsx, the Level 2 sprint): the boss's art, its name and level, its health and the week's time left. */
.ap .gg-raid__in { display: flex; align-items: center; gap: 10.5px; padding: 8.75px 10.5px; min-height: 48px; }
.ap .gg-raid__art { flex: none; width: 44px; height: 52px; display: grid; place-items: center; }
.ap .gg-raid__art > img { width: 44px; height: 44px; display: block; }
.ap .gg-raid__c { flex: 1; min-width: 0; display: grid; gap: 3.5px; }
.ap .gg-raid__top { display: flex; align-items: flex-start; gap: 7px; }
.ap .gg-raid__top > span { flex: 1; min-width: 0; font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ap .gg-raid__top > i, .ap .gg-raid__name > i, .ap .gg-raid__hp { font-style: normal; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; white-space: nowrap; }
.ap .gg-raid__top > i { color: var(--ap-t3); }
.ap .gg-raid__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; }
.ap .gg-raid__name > b { font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ap-t1); }
.ap .gg-raid__name > i, .ap .gg-raid__hp { color: var(--ap-t2); }
.ap .gg-strip__in { display: flex; align-items: stretch; }
.ap .gg-strip__in > span { flex: 1; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; font-weight: 700; color: var(--ap-t2); }
.ap .gg-strip__in > i { width: 1px; background: var(--ap-bsub); }
/* RankBadge small (rank/RankBadge.tsx, 2026-10-28): the tier's word and five pips, one line under the rating. */
.ap .gg-stat .gg-rank { display: inline-flex; align-items: center; gap: 4px; margin-top: 3.5px; padding: 1px 5px; border: 1px solid; border-radius: 2px; }
.ap .gg-stat .gg-rank b { display: block; margin: 0; font-family: inherit; font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ap .gg-stat .gg-rank > span { display: flex; gap: 2px; margin: 0; }
.ap .gg-stat .gg-rank i { display: block; width: 3px; height: 3px; }
.ap .gg-stat .gg-rank i.gg-rank__off { border: 1px solid; opacity: 0.5; }

/* THE ARENA AND COMBAT GUIDE (/guide/arena/): the Phase 4 fight screen's own pieces, from InteractiveFight.tsx, FighterPlate.tsx, StatusRail.tsx, VitalBar.tsx, RollReadout.tsx, D20Die.tsx, CommandBar.tsx and LogSheet.tsx. */
.ap .ga-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ap .ga-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 4px 20px 0; }
.ap .ga-stagewrap { position: relative; flex: 1; min-height: 0; }
.ap .ga-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; --fill: var(--ap-surface); }
.ap .ga-inner { position: absolute; top: 12px; right: 12px; bottom: 12px; left: 12px; }
.ap .ga-at { position: absolute; display: block; }
.ap .ga-at--etl { top: 0; left: 0; }
.ap .ga-at--etr { top: 0; right: 0; }
.ap .ga-at--pbl { bottom: 0; left: 0; }
.ap .ga-at--pbr { bottom: 0; right: 0; }
.ap img.ga-at { max-width: none; object-fit: cover; }
.ap .ga-plate__in { display: grid; gap: 2px; padding: 5px 9px; }
.ap .ga-plate__name { flex: 1; min-width: 0; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .ga-vital { display: grid; gap: 2px; }
.ap .ga-vital__k { font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ap .ga-rail { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ap .ga-schip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 2px 1px 3px; border: 1px solid; border-radius: 2px; }
.ap .ga-schip > svg { display: block; flex: none; }
.ap .ga-schip b { font-size: 10px; line-height: 14px; font-weight: 700; color: var(--ap-t1); white-space: nowrap; }
.ap .ga-schip i { min-width: 14px; padding: 0 3px; border-radius: 2px; text-align: center; font-style: normal; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; font-weight: 700; color: var(--ap-t1); }
.ap .ga-banner { position: absolute; top: -8px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.ap .ga-banner span { height: 16px; padding: 0 8px; background: var(--ap-base); font-size: 11px; line-height: 16px; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.ap .ga-legend { position: absolute; left: 20px; right: 20px; bottom: -22px; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ap .ga-legend__round { padding: 0 6px; background: var(--ap-base); font-size: 11px; line-height: 14px; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase; color: var(--ap-t3); white-space: nowrap; }
.ap .ga-chip { display: inline-block; padding: 3px 7px; }
.ap .ga-chip::after { display: none; }
.ap .ga-chip > span { display: block; font-size: 10px; line-height: 14px; font-weight: 800; letter-spacing: 0.6px; white-space: nowrap; }
.ap .ga-read { flex: none; height: 112px; overflow: hidden; display: grid; align-content: start; gap: 2px; }
.ap .ga-read__row { display: flex; align-items: flex-start; gap: 10px; }
.ap .ga-dock { position: relative; flex: none; width: 40px; height: 40px; }
.ap .ga-dock > svg { display: block; }
.ap .ga-dock b { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; margin-top: -1.6px; font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 14px; font-weight: 800; }
.ap .ga-read__col { flex: 1; min-width: 0; }
.ap .ga-read__head { display: block; font-size: 16px; line-height: 24px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .ga-read__line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 20px; color: var(--ap-t2); }
.ap .ga-read__mono { display: block; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .ga-read__mono--2 { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ap .ga-bar { flex: none; padding: 12px 20px 46px; background: var(--ap-surface); border-top: 1px solid var(--ap-bsub); }
.ap .ga-bar__note { display: block; height: 16px; font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 16px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .ga-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; margin-top: 4px; }
.ap .ga-card { min-height: 68px; }
.ap .ga-card__in { display: grid; padding: 4px 10px; }
.ap .ga-card__name { flex: 1; min-width: 0; font-size: 14px; line-height: 16px; font-weight: 700; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .ga-card__stat { font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; }
.ap .ga-card--off .ga-dim { opacity: 0.45; }
.ap .ga-pillrow { display: flex; align-items: center; gap: 4px; height: 16px; }
.ap .ga-pill { display: inline-block; height: 16px; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--ap-t2) 45%, transparent); border-radius: 2px; font-size: 10px; line-height: 14px; font-weight: 800; letter-spacing: 0.6px; color: var(--ap-t2); white-space: nowrap; }
.ap .ga-card__why { display: block; height: 14px; font-size: 10px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .ga-empty { min-height: 68px; display: grid; place-items: center; border: 1px dashed var(--ap-b); border-radius: 2px; }
.ap .ga-empty span { font-size: 10px; line-height: 14px; color: var(--ap-t3); }
.ap .ga-stances { display: flex; gap: 8px; height: 44px; padding-top: 10px; }
.ap .ga-stance { flex: 1; min-width: 0; height: 34px; display: grid; place-items: center; }
.ap .ga-stance b { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); }
.ap .ga-home { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--ap-t1); z-index: 3; }
.ap .ga-scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
.ap .ga-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.ap .ga-sheet__in { padding-bottom: 46px; }
.ap .ga-sheet__grab { display: block; width: 36px; height: 4px; margin: 10px auto 8px; border-radius: 2px; background: var(--ap-tdis); }
.ap .ga-sheet__head { display: grid; gap: 8px; padding: 0 16px 8px; }
.ap .ga-sheet__head b { font-size: 20px; line-height: 28px; font-weight: 800; color: var(--ap-t1); }
.ap .ga-sheet__note, .ap .ga-sheet__rule { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; }
.ap .ga-sheet__note { color: var(--ap-t2); }
.ap .ga-sheet__rule { color: var(--ap-t3); }
.ap .ga-sheet__lines { display: grid; gap: 4px; padding: 0 16px 8px; }
.ap .ga-sheet__lines > span { font-size: 14px; line-height: 20px; }
.ap .ga-sheet__foot { padding: 8px 16px 0; }
/* The Dungeon card with an open bout (DungeonEntry.tsx, OpenBoutCard.tsx), in the door's sheet since 2026-10-28. */
.ap .gb-k { display: block; font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-pulse); }
.ap .gb-run { display: block; margin-top: 4px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .gb-leave { margin-top: 8px; }
.ap .gb-ghost { --stroke: var(--ap-b); color: var(--ap-t2); }
.ap .gb-bout { margin-top: 16px; }
.ap .gb-bout__in { display: grid; gap: 4px; padding: 16px; }
.ap .gb-title { font-size: 16px; line-height: 24px; font-weight: 800; color: var(--ap-t1); }
.ap .gb-sub { font-size: 12px; line-height: 16px; letter-spacing: 0.03em; color: var(--ap-t2); }
.ap .gb-note { margin-top: 8px; font-size: 12px; line-height: 20px; letter-spacing: 0.03em; color: var(--ap-t2); }
.ap .gb-when { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .gb-btns { display: grid; gap: 8px; margin-top: 12px; }
.ap .gb-danger { --stroke: var(--ap-danger); color: var(--ap-danger); }
.ap .gb-company { margin-top: 12px; }
.ap .gb-company__in { display: grid; gap: 4px; padding: 14px; }
.ap .gb-k--muted { color: var(--ap-t3); }
.ap .gb-cnote { font-size: 12px; line-height: 16px; color: var(--ap-t2); }
/* The Dungeon page's Cyber-Spire (DungeonDetail.tsx, spire/SpireRooms.tsx and spire/SheetBodies.tsx, 2026-10-28). */
.ap .gp-icon { flex: none; width: 48px; height: 48px; display: block; }
.ap .gp-head { display: grid; gap: 7px; }
.ap .gp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5.25px; }
.ap .gp-chips > svg { display: block; flex: none; }
.ap .gp-chip { display: inline-block; padding: 3px 7px; }
.ap .gp-chip::after { display: none; }
.ap .gp-chip > span { display: block; font-size: 10px; line-height: 12px; font-weight: 800; letter-spacing: 0.6px; white-space: nowrap; }
.ap .gp-cp { display: inline-flex; align-items: center; gap: 3.5px; }
.ap .gp-cp > svg { display: block; }
.ap .gp-map { display: grid; }
.ap .gp-row { display: flex; }
.ap .gp-gut { position: relative; flex: none; width: 28px; display: grid; place-items: center; }
.ap .gp-gut > svg { position: relative; display: block; }
.ap .gp-seg { position: absolute; left: 13px; width: 2px; }
.ap .gp-seg--up { top: 0; height: 50%; }
.ap .gp-seg--down { top: 50%; bottom: 0; }
.ap .gp-seg--climbed { background: var(--ap-pulse); }
.ap .gp-seg--open { background: var(--ap-bstrong); }
.ap .gp-seg--locked { left: 13.25px; width: 1.5px; background: repeating-linear-gradient(to bottom, var(--ap-b) 0 4px, transparent 4px 8px); }
.ap .gp-cell { flex: 1; min-width: 0; padding: 4px 0; }
.ap .gp-room__in { display: grid; gap: 5.25px; padding: 7px 8.75px; }
.ap .gp-room--boss .gp-room__in { gap: 7px; padding: 10.5px; }
.ap .gp-room__row { display: flex; align-items: center; gap: 8.75px; }
.ap .gp-room__row > svg { display: block; flex: none; }
.ap .gp-num { flex: none; min-width: 32px; height: 32px; padding: 0 3px; display: grid; place-items: center; border: 1px solid; font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 20px; font-weight: 800; }
.ap .gp-num--boss { min-width: 38px; height: 38px; }
.ap img.gp-spr { flex: none; display: block; max-width: none; object-fit: cover; }
.ap .gp-room__c { flex: 1; min-width: 0; display: grid; gap: 3.5px; }
.ap .gp-room__c > b { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); }
.ap .gp-flag { display: inline-flex; align-items: center; gap: 3.5px; }
.ap .gp-flag > svg { display: block; }
.ap .gp-flag b { font-size: 10px; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.ap .gp-friends { display: flex; align-items: center; gap: 5.25px; }
.ap .gp-friends > img { flex: none; display: block; width: 20px; height: 22px; object-fit: contain; }
.ap .gp-friends > span { font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--ap-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gp-rest__in, .ap .gp-prac__in { display: flex; align-items: center; gap: 8.75px; padding: 7px 10.5px; }
.ap .gp-prac__in { gap: 10.5px; padding: 8.75px 10.5px; }
.ap .gp-rest__in > svg, .ap .gp-prac__in > svg { display: block; flex: none; }
.ap .gp-rest__c { flex: 1; min-width: 0; display: grid; gap: 3.5px; }
.ap .gp-rest__k { font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.ap .gp-prac__t { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); }
.ap .gp-chev { flex: none; font-style: normal; font-size: 18px; line-height: 26px; color: var(--ap-t3); }
.ap .gp-gap { padding: 5.25px 0; font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ap-t3); }
/* A room's sheet over the map: the app's bottom sheet at its full height, its content scrolling inside it. */
.ap .gp-scrim, .ap .gp-sheet { z-index: 3; }
.ap .gp-sheet { overflow: hidden; }
.ap .ga-sheet__in.gp-sheet__in { height: 100%; overflow: hidden; padding-bottom: 0; }
.ap .gp-sh { display: grid; gap: 10.5px; padding: 0 14px; }
.ap .gp-sh__top { display: flex; align-items: center; gap: 10.5px; }
.ap .gp-sh__c { flex: 1; min-width: 0; display: grid; gap: 3.5px; }
.ap .gp-sh__k { font-size: 11px; line-height: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ap-t3); }
.ap .gp-sh__name { font-size: 18px; line-height: 26px; font-weight: 800; color: var(--ap-t1); }
.ap .gp-sh .gb-bout { margin-top: 14px; }
.ap .gp-sh .gb-company { margin-top: 0; }
/* The status table's names: the glyph in the stat's own colour, then the name. */
.gs-name { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.gs-type { display: block; margin-top: 0.3rem; font-weight: 400; white-space: nowrap; color: var(--text-secondary); }
.gs-name > svg { display: block; flex: none; }

/* The quests-and-loot guide (/guide/quests-and-loot/): StatBlockRPG Home's header, the quick actions, the panel with the account's figure and the streak strip, and the Daily quests board. */
.ap .gq-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8.75px; }
.ap .gq-quick { display: flex; gap: 8px; margin-bottom: 14px; }
.ap .gq-quick span { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--ap-pulse) 55%, transparent); background: color-mix(in srgb, var(--ap-pulse) 10%, transparent); font-size: 13px; font-weight: 800; color: var(--ap-pulse); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gq-q { --n: 10px; }
.ap .gq-q__in { padding: 8.75px 12.25px; }
.ap .gq-q__row { display: flex; align-items: center; gap: 8.75px; }
.ap .gq-pip { flex: none; display: block; width: 3px; height: 26px; }
.ap .gq-q__txt { flex: 1; min-width: 0; }
.ap .gq-q__txt b { display: block; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gq-q__txt span { display: block; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gq-q__r { display: grid; justify-items: end; }
.ap .gq-ct { font-family: "Courier New", Courier, monospace; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; font-weight: 700; color: var(--ap-t3); white-space: nowrap; }
.ap .gq-ct--done { color: var(--ap-pulse); }
.ap .gq-scrap { display: inline-flex; align-items: center; gap: 3px; font-family: "Courier New", Courier, monospace; font-size: 11px; line-height: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap .gq-scrap > svg { display: block; flex: none; }
.ap .gq-q__m { margin-top: 8px; }
.ap .gq-q__btn { margin-top: 8.75px; }
.ap .gq-q__chips { margin-top: 8px; display: flex; justify-content: flex-end; }
.ap .gq-q--claimed .gq-q__in { opacity: 0.55; }
.ap .gq-q--claimed .gq-q__txt b { color: var(--ap-t3); }
.ap .gq-done { font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap .gq-bands { position: absolute; inset: 1.5px; display: flex; flex-direction: column; pointer-events: none; }
.ap .gq-bands > i { flex: 1; display: block; }
.ap .gq-chip { --n: 5px; --sw: 1px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; font-size: 10px; line-height: 14px; font-weight: 800; letter-spacing: 0.6px; white-space: nowrap; }
.ap .gq-chip::after { display: none; }
.ap .gq-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.ap .gq-shop { display: flex; align-items: center; gap: 8px; }

/* Guide: Social (/guide/social/). The direct-message thread: a one-line header, bubbles on notch-9 panels (yours toned and tinted), an attachment block with its import button, the report hint, and the composer bar above the tab bar. */
.ap .gs-head { position: relative; flex: none; display: flex; align-items: center; gap: 12px; padding: 55px 20px 8px; }
.ap .gs-back { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-pulse); }
.ap .gs-peer { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--ap-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gs-thread { padding: 0 0 16px; }
.ap .gs-row { display: flex; justify-content: flex-start; margin-top: 8px; }
.ap .gs-row--mine { justify-content: flex-end; }
.ap .gs-bubble { max-width: 86%; }
.ap .gs-in { padding: 8px 12px; }
.ap .gs-text { font-size: 14px; line-height: 20px; color: var(--ap-t1); }
.ap .gs-att { margin-top: 8px; padding: 10px; border: 1px solid var(--ap-bsub); display: grid; }
.ap .gs-kind { font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-t3); }
.ap .gs-att-t { margin-top: 2px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ap-t1); }
.ap .gs-att-d { font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .gs-att-n { margin-top: 4px; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t2); }
.ap .gs-imp { margin-top: 8.75px; }
.ap .gs-hint { margin-top: 16px; padding: 0 8px; text-align: center; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; color: var(--ap-t3); }
.ap .gs-comp { flex: none; margin-bottom: 90px; display: flex; align-items: flex-end; gap: 8px; padding: 12px 20px 44px; border-top: 1px solid var(--ap-bsub); background: var(--ap-surface); }
.ap .gs-chip { flex: none; padding: 3px 7px; font-size: 10px; line-height: 14px; font-weight: 800; letter-spacing: 0.6px; color: var(--ap-t2); }
.ap .gs-chip::after { display: none; }
.ap .gs-field { flex: 1; min-width: 0; }
.ap .gs-field > span { display: block; padding: 10px 14px; font-size: 15px; line-height: 20px; color: var(--ap-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .gs-send { flex: none; opacity: 0.4; }

/* ── End of the app screens. publish.test.ts holds every rule from ".ap {" to this line to the screens' own custom properties: no colour is typed above. ── */

/* ── The switch ──────────────────────────────────────────────────────────── */
.switch { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(to bottom, var(--base) 0%, var(--void) 18%, var(--void) 82%, var(--base) 100%); padding: clamp(8rem, 12vw, 11rem) 0; }
.switch__bg { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
.band--download .band__bg { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%); mask-image: linear-gradient(to bottom, transparent, #000 18%); }
.switch__bg { position: absolute; inset: 0; z-index: -1; }
.switch__grid { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.toggle { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; justify-self: center; width: min(100%, 30rem); }
.toggle__label { font-weight: 800; letter-spacing: -0.02em; font-size: clamp(0.95rem, 1.6vw, 1.2rem); color: var(--text-tertiary); white-space: nowrap; }
.toggle__label--pro { color: #fff; }
.toggle__track { position: relative; height: 3.4rem; border-radius: 999px; background: rgba(245,243,239,0.18); box-shadow: 0 0 0 1px rgba(245,243,239,0.35) inset; padding: 0.4rem; }
.toggle__knob { position: absolute; top: 0.4rem; left: 0.4rem; bottom: 0.4rem; width: calc(50% - 0.65rem); border-radius: 999px; background: linear-gradient(180deg, #fff, var(--bone)); box-shadow: 0 8px 24px rgba(0,0,0,0.45); }

/* ── The marquee (2026-09-18, #820): one line per feature, on a loop ─────── */
/*
 * Two copies of the row, the second hidden from assistive technology, slide
 * left by exactly one row's width and repeat, so the loop is seamless. It
 * holds still under the pointer and under keyboard focus (the region is
 * focusable), and under prefers-reduced-motion it does not move at all and
 * scrolls by hand instead. #817 had taken the auto-started marquee OUT of the
 * facts ticker for WCAG 2.2.2; this one is the user's explicit ask, and the
 * pause on hover and focus plus the reduced-motion stop are the mechanism
 * 2.2.2 requires. The speed is set by the row's length so every card gets the
 * same seconds on screen whatever the catalog counts become.
 */
.band--reel { padding-bottom: 3rem; }
.marquee { position: relative; margin-top: 2rem; padding: 1rem 0 1.6rem; display: flex; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; gap: 1rem; padding-right: 1rem; flex: none; width: max-content; animation: marquee var(--marquee-s, 90s) linear infinite; will-change: transform; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee:focus-visible .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marquee:focus-visible { outline: 2px solid var(--pulse); outline-offset: -3px; -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scroll-snap-type: x proximity; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; }
  .marquee__track[aria-hidden="true"] { display: none; }
}
.reel__hint { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--text-tertiary); }
.reelcard { flex: 0 0 auto; width: min(80vw, 20rem); min-height: 15rem; scroll-snap-align: start; padding: 1.6rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.5rem; transition: border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out), transform 420ms var(--ease-spring); }
@media (hover: hover) { .reelcard:hover { border-color: rgba(255,255,255,0.2); box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 var(--glass-hi); transform: translateY(-6px); } }
.reelcard h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.reelcard p { margin: 0; color: var(--text-secondary); font-size: 0.95rem; }
.reelcard .kicker { margin: 0 0 0.4rem; }
.reelcard--rpg .kicker { color: var(--cyan); }
.reelcard--both .kicker { color: var(--amber); }

/* ── The numbers ─────────────────────────────────────────────────────────── */
.band--facts { padding-top: 3rem; background: linear-gradient(180deg, var(--base) 0%, var(--void) 70%, var(--base) 100%); }
.facts { display: grid; gap: 1rem; margin-top: 2.4rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { position: relative; isolation: isolate; display: grid; align-content: start; gap: 0.2rem; padding: 1.6rem 1.4rem; border-radius: var(--radius); background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); }
.fact__n { font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: #fff; text-shadow: 0 0 40px rgba(16,185,129,0.25); font-variant-numeric: tabular-nums; }
.fact__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--pulse); margin-top: 0.3rem; }
.fact__sub { font-size: 0.86rem; color: var(--text-secondary); }

/* ── Download ────────────────────────────────────────────────────────────── */
/* overflow: CLIP, never hidden, on any box whose children reveal on view(): hidden makes a scroll container and view() would measure against a box that never scrolls. */
.band--download { background: linear-gradient(to bottom, var(--base) 0%, var(--void) 14%, var(--void) 100%); overflow: clip; isolation: isolate; padding: clamp(7rem, 11vw, 10rem) 0; }
.band--download .band__bg .floorgrid { opacity: 0.5; }
.download { text-align: center; display: grid; justify-items: center; }
.download .h2--xl { max-width: 30ch; }
.download .section-lede { max-width: 46ch; }
.download .stores { justify-content: center; }


/* ══════════════════════════════════════════════════════════════════════════
 * THE GUIDE (2026-09-26): a hub and one page per area of the app. A side
 * column (this page's sections, then every guide) beside the article; the
 * pieces a section is written with (a UI label, a stat tag, where it is in
 * the app, a numbered walkthrough, a boxed rule, a table, an app screen)
 * are styled here and nowhere else.
 * ══════════════════════════════════════════════════════════════════════════ */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0 0 1.1rem; font-size: 0.82rem; color: var(--text-tertiary); }
.crumbs a { color: var(--text-secondary); }
.crumbs [aria-current] { color: var(--text-primary); }
.band--doc { padding-bottom: clamp(4rem, 7vw, 6rem); }
.guide { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; }
.guide__side { position: sticky; top: 5.5rem; display: grid; gap: 1.8rem; max-height: calc(100svh - 7rem); overflow-y: auto; overscroll-behavior: contain; padding: 0 0.25rem 1rem 0; scrollbar-width: thin; }
.toc__h { margin: 0 0 0.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); }
.toc ol, .guides ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.toc a, .guides a { display: block; padding: 0.34rem 0.75rem; border-left: 2px solid var(--border); color: var(--text-secondary); font-size: 0.88rem; line-height: 1.35; transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.toc a:hover, .guides a:hover { color: var(--text-primary); border-left-color: var(--border-strong); text-decoration: none; }
.guides a[aria-current] { color: var(--pulse-glow); border-left-color: var(--pulse); }
.guides a small { display: block; margin-top: 0.1rem; font-size: 0.68rem; letter-spacing: 0.06em; color: var(--text-tertiary); }
.doc { min-width: 0; }
.doc__s { padding: 0 0 3.2rem; margin: 0 0 3.2rem; border-bottom: 1px solid var(--border-subtle); scroll-margin-top: 5.5rem; }
.doc__s:last-of-type { border-bottom: 0; margin-bottom: 1.5rem; }
.doc h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); max-width: 30ch; margin: 0 0 1.1rem; }
.doc h2 a { color: inherit; }
.doc h2 a:hover { text-decoration: none; }
.doc h2 a::after { content: "#"; margin-left: 0.45rem; font-weight: 400; color: var(--text-tertiary); opacity: 0; transition: opacity 160ms var(--ease-out); }
.doc h2 a:hover::after, .doc h2 a:focus-visible::after { opacity: 1; }
.doc h3:not(.ap *) { margin: 2.1rem 0 0.7rem; font-size: 1.16rem; }
/* The article's type never reaches inside a drawn app screen (:not(.ap *)): the screens carry the app's own type ramp, and a
   descendant rule here would out-rank their single-class rules and repaint the phone in the site's greys. */
.doc p:not(.ap *), .doc li:not(.ap *) { color: var(--text-secondary); max-width: 68ch; }
.doc p:not(.ap *) { margin: 0 0 1rem; }
.doc > .doc__s ul:not(.ap *), .doc > .doc__s ol:not(.walk):not(.ap *) { margin: 0 0 1rem; padding-left: 1.25rem; }
.doc li:not(.ap *) { margin: 0.3rem 0; }
.doc strong:not(.ap *) { color: var(--text-primary); font-weight: 700; }
.doc .lead { font-size: 1.08rem; color: var(--text-hero); }
/* A key cap is an INLINE box (W3c, from the W3b structure review): an inline-block is an atomic box the line may break
   after, so the full stop or comma that follows a label wrapped onto a line of its own ("Spieltag 2026-09-26" then a lone
   "."), in every language, English included. As an inline box it shares the text's break rules (no break before "." or
   ","), and box-decoration-break: clone draws a whole cap on each line if a long label must wrap. On a phone it may wrap:
   a nowrap label wider than the column (a German or Italian button name) pushed a walkthrough past the screen. */
.ui { display: inline; padding: 0.02rem 0.45rem; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--elevated); color: var(--text-primary); font-size: 0.84em; font-weight: 600; line-height: 1.5; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.stat { display: inline-block; padding: 0 0.32rem; border: 1px solid currentColor; border-radius: 4px; font-family: var(--mono); font-size: 0.78em; font-weight: 700; line-height: 1.45; vertical-align: 0.06em; }
.stat--STR { color: var(--str); } .stat--DEX { color: var(--dex); } .stat--CON { color: var(--con); }
.stat--INT { color: var(--int); } .stat--WIS { color: var(--wis); } .stat--CHA { color: var(--cha); }
.where { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 1.3rem; font-size: 0.84rem; color: var(--text-tertiary); }
.where__k { margin-right: 0.25rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pulse); }
.where__step { padding: 0.16rem 0.62rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-primary); }
.where__sep { color: var(--text-tertiary); }
.mode { margin-left: 0.35rem; padding: 0.16rem 0.55rem; border-radius: 999px; font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid; }
.mode--pro { color: var(--bone); border-color: rgba(245,243,239,0.35); background: rgba(245,243,239,0.06); }
.mode--rpg { color: var(--cyan); border-color: rgba(43,228,255,0.35); background: rgba(43,228,255,0.07); }
.mode--both { color: var(--pulse-glow); border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.08); }
.walk { counter-reset: walk; list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; display: grid; gap: 0.75rem; }
.walk > li { counter-increment: walk; position: relative; margin: 0; max-width: none; padding: 1.05rem 1.25rem 1.1rem 3.9rem; border: 1px solid var(--glass-line); border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)), var(--surface); }
.walk > li::before { content: counter(walk, decimal-leading-zero); position: absolute; left: 1.2rem; top: 1rem; font-family: var(--mono); font-size: 1.02rem; font-weight: 700; color: var(--pulse); }
.walk b { display: block; margin-bottom: 0.3rem; color: var(--text-primary); }
.walk p { margin: 0; }
.walk p + p { margin-top: 0.5rem; }
.callout { display: block; margin: 1.5rem 0 1.75rem; padding: 1.05rem 1.3rem 1.15rem; max-width: 68ch; border: 1px solid var(--glass-line); border-left: 3px solid var(--pulse); border-radius: 12px; background: linear-gradient(160deg, rgba(16,185,129,0.06), rgba(255,255,255,0.01)), var(--surface); }
.callout--tip { border-left-color: var(--cyan); background: linear-gradient(160deg, rgba(43,228,255,0.05), rgba(255,255,255,0.01)), var(--surface); }
.callout--limit { border-left-color: var(--amber); background: linear-gradient(160deg, rgba(255,176,32,0.05), rgba(255,255,255,0.01)), var(--surface); }
.callout__k { display: block; margin-bottom: 0.35rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pulse); }
.callout--tip .callout__k { color: var(--cyan); }
.callout--limit .callout__k { color: var(--amber); }
.callout__t { display: block; margin-bottom: 0.35rem; color: var(--text-primary); }
.callout p { margin: 0 0 0.6rem; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout ul { margin: 0.2rem 0 0.6rem; padding-left: 1.15rem; }
.tbox { margin: 1.3rem 0 1.7rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); overflow: clip; }
.tbox__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.doc-table th, .doc-table td { padding: 0.62rem 0.9rem; border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.doc-table tbody tr:last-child th, .doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table thead th { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); background: var(--elevated); }
.doc-table tbody th { color: var(--text-primary); font-weight: 600; }
.doc-table td { color: var(--text-secondary); }
.doc p.tbox__note { max-width: none; margin: 0; padding: 0.6rem 0.9rem 0.7rem; font-size: 0.8rem; line-height: 1.5; color: var(--text-tertiary); border-top: 1px solid var(--border-subtle); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.doc-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; margin: 0.5rem 0 1.5rem; }
.doc-split__text > :first-child { margin-top: 0; }
.doc-fig { position: sticky; top: 6rem; margin: 0; display: grid; justify-items: center; gap: 0.8rem; }
.doc-fig .device { --dz: 0.64; box-shadow: 0 40px 90px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.14), inset 0 0 0 2px rgba(0,0,0,0.9); }
.doc-fig figcaption { max-width: 16.5rem; font-size: 0.8rem; line-height: 1.45; color: var(--text-tertiary); text-align: center; }
.shots { display: grid; gap: 0.8rem; margin: 1.3rem 0 1.7rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.shot { margin: 0; padding: 0.6rem 0.6rem 0.7rem; border: 1px solid var(--border-subtle); border-radius: 14px; background: radial-gradient(circle at 50% 35%, rgba(16,185,129,0.08), transparent 70%), var(--surface); display: grid; gap: 0.45rem; }
.shot img { width: 100%; height: auto; }
.shot figcaption { font-size: 0.78rem; line-height: 1.35; color: var(--text-secondary); text-align: center; }
.shots--line { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.figs { display: grid; gap: 0.8rem; margin: 1.3rem 0 1.7rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.figs__i { padding: 0.9rem 1rem 1rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); display: grid; gap: 0.2rem; }
.figs__i b { font-size: 1.6rem; line-height: 1.1; color: var(--text-primary); }
.figs__i span { font-size: 0.82rem; line-height: 1.35; color: var(--text-secondary); }
.faq { display: grid; gap: 0.6rem; margin: 1rem 0 0.5rem; }
.faq details { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); }
.faq summary { cursor: pointer; list-style: none; padding: 0.95rem 3rem 0.95rem 1.2rem; position: relative; font-weight: 600; color: var(--text-primary); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 1.2rem; color: var(--pulse); transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
/* ".doc .faq": the article's own paragraph rule (.doc p:not(.ap *), 0,2,1) out-ranked this one (0,1,2), so every answer sat
   flush against its box's left edge in every language (the W3b French translator's finding, measured at 390). */
.doc .faq details > :not(summary) { margin: 0 1.2rem 1rem; }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0.5rem; }
.pager__a { display: grid; gap: 0.25rem; padding: 1.1rem 1.3rem; color: var(--text-primary); }
.pager__a:hover { text-decoration: none; }
.pager__a--next { text-align: right; }
.pager__k { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pulse); }
.pager__a b { font-size: 1.1rem; }
/* The hub: every guide as a card, and the app's two tab bars as a map. */
.guidecards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); margin: 1.3rem 0 1.5rem; }
.guidecard { display: grid; gap: 0.5rem; align-content: start; padding: 1.35rem 1.4rem 1.45rem; color: var(--text-primary); }
.guidecard:hover { text-decoration: none; }
.guidecard b { font-size: 1.15rem; }
.guidecard span.guidecard__d { font-size: 0.92rem; color: var(--text-secondary); }
.guidecard .mode { justify-self: start; margin: 0; }
.appmap { display: grid; gap: 1rem; margin: 1.3rem 0 1.7rem; }
/* One column per tab, however many the bar has (StatBlockPro four, StatBlockRPG five since 2026-10-26). */
.appmap__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.6rem; }
.appmap__cell { display: grid; justify-items: center; gap: 0.35rem; padding: 0.9rem 0.5rem 0.95rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); text-align: center; color: var(--text-secondary); }
.appmap__cell b { color: var(--text-primary); font-size: 0.9rem; }
.appmap__cell span { font-size: 0.76rem; line-height: 1.35; }
.appmap__cell--on { border-color: rgba(16,185,129,0.4); }
.appmap__cell svg { color: var(--pulse); }
.appmap .appmap__h { margin: 0.5rem 0 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); }
/* Under 980px the side column dissolves (display: contents) so its two lists become the grid's own items: this page's
   sections as one scrolling row of chips ABOVE the article, and every guide BELOW it, after the pager. Stacked whole above the
   article they pushed the first sentence more than a phone's screen down (measured at 390 wide, 2026-09-26). */
@media (max-width: 980px) {
  .guide { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .guide__side { display: contents; }
  .toc { order: 0; min-width: 0; }
  .doc { order: 1; }
  .guides { order: 2; padding-top: 1.4rem; border-top: 1px solid var(--border-subtle); }
  .toc ol { display: flex; gap: 0.45rem; overflow-x: auto; overscroll-behavior-x: contain; padding: 0.15rem 1.5rem 0.55rem 0.1rem; scrollbar-width: thin; mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
  .toc li { flex: none; }
  .toc a { white-space: nowrap; padding: 0.34rem 0.85rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
  .toc a:hover { border-color: var(--border-strong); }
  .guides ul { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 0.35rem 1rem; }
  .doc-split { grid-template-columns: minmax(0, 1fr); }
  .doc-fig { position: static; }
  .shots--line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Two drawn screens whose own rules (a page's facts module) were measured only in English (W3c, the W3b structure review):
   the food diary's rows grow to the widest bilingual German food name unless the track may shrink (min-content of a nowrap
   name, 430px against 318px, so the ellipsis never ran and the kcal left the panel), and the quest board's footer row has
   no room for "Aggiungi missione" beside its price in Italian. Both are no-ops in English, where nothing overflowed. */
.ap .gn-meal__rows { grid-template-columns: minmax(0, 1fr); }
.ap .gq-foot { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 560px) {
  .ui { white-space: normal; }
  .doc-table { font-size: 0.84rem; }
  .doc-table th, .doc-table td { padding: 0.52rem 0.7rem; }
  .doc-table thead th { letter-spacing: 0.08em; }
  .appmap__row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager__a--next { text-align: left; }
}
@media print {
  .guide__side, .pager, .doc-fig { display: none; }
  .guide { display: block; }
  .doc p, .doc li, .doc-table td, .walk b, .callout__t { color: #000; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * THE FREE TOOLS (2026-10-12): the body map, the Base Stats calculator, the
 * class quiz, the Tavern and the Guild Master. Every language since 2026-10-19.
 * ══════════════════════════════════════════════════════════════════════════ */
:root { --r-common: #8E8C88; --r-uncommon: #BEF264; --r-rare: #5B93F0; --r-epic: #B57BF5; --r-legendary: #FFB020; }
.doc--tool [hidden], .gm [hidden], .tavern [hidden] { display: none !important; }
.doc--tool { max-width: 54rem; margin-inline: auto; }
.doc--tool.doc--wide { max-width: none; }
.doc--tool > .grid:first-child, .doc--tool > :first-child { margin-top: 0; }
.doc--tool > .grid + .doc__s, .doc--tool > .bmfig + .doc__s, .doc--tool > .sheet + .doc__s, .doc--tool > .tavern + .doc__s, .doc--tool > .recipe + .doc__s, .doc--tool > noscript + .doc__s { margin-top: 3.2rem; }
.cine--amber .ghost { -webkit-text-stroke-color: rgba(255,176,32,0.16); }
.cine--amber .bloom--a { background: radial-gradient(circle, rgba(255,176,32,0.24), rgba(255,176,32,0) 65%); }
.cine--amber .bloom--b { background: radial-gradient(circle, rgba(255,61,174,0.18), rgba(255,61,174,0) 65%); }
.muted { color: var(--text-tertiary); font-weight: 400; }
.doc--tool .card h3 { margin: 0; }
.doc--tool .card h3 a { color: var(--pulse-glow); }
.doc .moves { list-style: none; padding-left: 0 !important; display: grid; gap: 0.15rem; }
.doc .moves li { margin: 0; padding: 0.3rem 0 0.3rem 1.1rem; position: relative; max-width: 68ch; }
.doc .moves li::before { content: ""; position: absolute; left: 0; top: 0.9rem; width: 0.42rem; height: 0.42rem; background: var(--pulse); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.doc .moves b { color: var(--text-primary); }
.doc .steps { padding-left: 1.4rem; display: grid; gap: 0.5rem; }
.doc .steps li::marker { color: var(--pulse); font-weight: 700; }
.musclelist { list-style: none; padding: 0 !important; margin: 0 0 1.4rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.6rem; }
.doc .musclelist li { margin: 0; padding: 0.85rem 1rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); display: grid; gap: 0.25rem; max-width: none; }
.musclelist a { font-weight: 700; }
.musclelist span { font-size: 0.86rem; color: var(--text-tertiary); line-height: 1.45; }
.titles { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 0.6rem; }
.doc .titles li { margin: 0; padding: 0.7rem 0.9rem; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface); display: grid; max-width: none; }
.titles b { color: var(--cyan); font-size: 1.05rem; }
.titles span { font-size: 0.82rem; color: var(--text-tertiary); }

/* The body map: the app's figure, every muscle a link. */
.bmfig { margin: 0 0 1rem; text-align: center; }
.bmfig figcaption { margin-top: 0.6rem; font-size: 0.84rem; color: var(--text-tertiary); }
.bm { width: 100%; max-width: 30rem; height: auto; margin-inline: auto; display: block; overflow: visible; }
.bm__body path { fill: var(--surface); stroke: var(--border-strong); stroke-width: 0.6; }
.bm__r path { fill: var(--elevated); stroke: var(--border); stroke-width: 0.5; transition: fill 160ms var(--ease-out); }
.bm__r:hover path, .bm__r:focus-visible path { fill: var(--pulse-faint); stroke: var(--pulse-glow); }
.bm__r:focus-visible { outline: none; }
.bm__r.is-on path { fill: var(--pulse); stroke: var(--pulse-glow); }
.bm__r.is-opp path { fill: rgba(43,228,255,0.18); stroke: var(--cyan); stroke-width: 0.7; }
@media (forced-colors: active) { .bm__r path { fill: Canvas; stroke: CanvasText; } .bm__r.is-on path { fill: Highlight; } .bm__r:focus-visible path { stroke: Highlight; stroke-width: 1.5; } }

/* The calculator and the quiz: a form, then a character sheet. */
.calc, .quiz { padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.2rem; margin: 0 0 1.5rem; }
.calc__note { margin: 0; font-size: 0.84rem; color: var(--text-tertiary); }
.calc__hint { margin: 0.45rem 0 0; font-size: 0.82rem; color: var(--text-tertiary); max-width: 60ch; }
.calc__set, .quiz__q { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc__set legend, .quiz__q legend, .field > span:first-child { display: block; margin-bottom: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); padding: 0; }
.quiz__q legend { font-size: 1.02rem; letter-spacing: 0; text-transform: none; color: var(--text-primary); }
.quiz__n { display: inline-block; margin-right: 0.4rem; font-family: var(--mono); font-size: 0.8rem; color: var(--cyan); }
.opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.quiz__a { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.5rem; }
.opt { position: relative; display: inline-flex; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span { display: block; padding: 0.55rem 0.95rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: 0.9rem; line-height: 1.3; transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), color 160ms var(--ease-out); }
.opt--block, .opt--block span { width: 100%; }
.opt--block span { border-radius: 12px; padding: 0.75rem 1rem; }
.opt input:checked + span { border-color: var(--pulse); background: var(--pulse-faint); color: var(--text-primary); }
.opt input:focus-visible + span { outline: 2px solid var(--pulse); outline-offset: 2px; }
.opt:hover span { border-color: var(--border-strong); color: var(--text-primary); }
.calc__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0.9rem; }
.field { display: grid; align-content: start; min-width: 0; }
.field input, .field select, .tavern__bar input, .gm__form input { width: 100%; min-height: 2.9rem; padding: 0.55rem 0.8rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--base); color: var(--text-primary); font: inherit; font-size: 1rem; }
.field input:focus-visible, .field select:focus-visible, .tavern__bar input:focus-visible, .gm__form input:focus-visible { outline: 2px solid var(--pulse); outline-offset: 1px; border-color: var(--pulse); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 52%, calc(100% - 0.75rem) 52%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pair label { display: flex; align-items: center; gap: 0.35rem; }
.pair label span { font-size: 0.82rem; color: var(--text-tertiary); }
.calc__error { margin: 0; padding: 0.65rem 0.9rem; border-left: 3px solid var(--amber); border-radius: 8px; background: rgba(255,176,32,0.08); color: var(--text-primary); }
.calc .cta, .quiz .cta, .sheet .cta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
button.pill { border: 0; font: inherit; cursor: pointer; }
button.pill--glass { border: 1px solid rgba(255,255,255,0.22); }
.sheet { padding: clamp(1.25rem, 3vw, 2rem); margin: 0 0 1.5rem; display: grid; gap: 1.1rem; border-color: rgba(16,185,129,0.35); }
.sheet h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.sheet h2:focus { outline: none; }
.sheet__head .kicker { margin: 0 0 0.25rem; }
.stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); gap: 0.6rem; }
.bsrow { padding: 0.85rem 1rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--base); display: grid; gap: 0.3rem; }
.bsrow dt { font-size: 0.86rem; color: var(--text-secondary); display: grid; }
.bsrow__k { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pulse-glow); }
.bsrow dd { margin: 0; display: grid; gap: 0.15rem; }
.bsrow dd b { font-family: var(--mono); font-size: 1.55rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bsrow dd span { font-size: 0.8rem; color: var(--text-tertiary); line-height: 1.4; }
.bmiscale__bar { position: relative; display: grid; grid-template-columns: 14% 26% 20% 40%; height: 0.55rem; border-radius: 999px; overflow: visible; }
.sheet__cap { margin: 0 0 0.55rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); }
.bmiscale__bar span { background: var(--border-strong); border-right: 3px solid var(--surface); }
.bmiscale__bar span:first-child { border-radius: 999px 0 0 999px; }
.bmiscale__bar span:nth-child(4) { border-radius: 0 999px 999px 0; border-right: 0; }
.bmiscale__bar i { position: absolute; top: 50%; width: 0.95rem; height: 0.95rem; margin-left: -0.475rem; transform: translateY(-50%); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px var(--base); }
.bmiscale__ticks { position: relative; height: 1.1rem; margin-top: 0.35rem; font-family: var(--mono); font-size: 0.72rem; color: var(--text-tertiary); }
.bmiscale__ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.bmiscale__ticks span:nth-child(1) { left: 14%; } .bmiscale__ticks span:nth-child(2) { left: 40%; } .bmiscale__ticks span:nth-child(3) { left: 60%; }
.macrobar { display: flex; height: 0.7rem; border-radius: 999px; overflow: hidden; gap: 2px; }
.macrobar span { flex: 1 1 0; min-width: 2px; }
.macrobar__p { background: var(--str); } .macrobar__c { background: var(--con); } .macrobar__f { background: var(--int); }
.macrolegend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.6rem 0 0; font-size: 0.84rem; color: var(--text-secondary); }
.macrolegend span::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.4rem; border-radius: 2px; vertical-align: 0.05em; }
.macrolegend__p::before { background: var(--str); } .macrolegend__c::before { background: var(--con); } .macrolegend__f::before { background: var(--int); }
.macrolegend b { color: var(--text-primary); font-family: var(--mono); }
.sheet__note--care { padding: 0.65rem 0.9rem; border-left: 3px solid var(--amber); border-radius: 8px; background: rgba(255,176,32,0.07); color: var(--text-secondary); }
.sheet__note { margin: 0; font-size: 0.86rem; color: var(--text-tertiary); max-width: 68ch; }

/* The Tavern: a grid of items, rarer the more protein. */
.tavern__bar { display: grid; gap: 0.75rem; margin: 0 0 1.25rem; }
.tavern__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip--toggle { font: inherit; font-size: 0.82rem; font-weight: 600; letter-spacing: 0; cursor: pointer; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); }
.chip--toggle:hover { color: var(--text-primary); border-color: var(--border-strong); }
.chip--toggle[aria-pressed="true"] { color: var(--text-primary); border-color: var(--amber); background: rgba(255,176,32,0.12); }
.chip--toggle:focus-visible { outline: 2px solid var(--pulse); outline-offset: 2px; }
.tavern__count, .tavern__none { margin: 0; font-size: 0.86rem; color: var(--text-tertiary); }
.items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.item a { display: grid; height: 100%; border: 1px solid var(--border-subtle); border-top: 3px solid var(--r, var(--r-common)); border-radius: 14px; overflow: clip; background: var(--surface); color: inherit; transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.item a:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--border-strong); border-top-color: var(--r, var(--r-common)); }
.item a:focus-visible { outline: 2px solid var(--pulse); outline-offset: 3px; }
.item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--base); }
.item__body { display: grid; gap: 0.3rem; padding: 0.9rem 1rem 1.05rem; }
.item__name { color: var(--text-primary); font-size: 1.05rem; }
.item__dish { color: var(--text-secondary); font-size: 0.88rem; }
.item__stats { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; margin-top: 0.3rem; font-size: 0.8rem; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.item__stats b { color: var(--text-primary); }
.item--common { --r: var(--r-common); } .item--uncommon { --r: var(--r-uncommon); } .item--rare { --r: var(--r-rare); } .item--epic { --r: var(--r-epic); } .item--legendary { --r: var(--r-legendary); }
.rarity { justify-self: start; display: inline-block; padding: 0.1rem 0.5rem; border: 1px solid; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; vertical-align: 0.1em; }
.rarity--common { color: var(--r-common); } .rarity--uncommon { color: var(--r-uncommon); } .rarity--rare { color: var(--r-rare); } .rarity--epic { color: var(--r-epic); } .rarity--legendary { color: var(--r-legendary); }
.lede__item { display: block; margin-bottom: 0.5rem; font-weight: 700; color: var(--text-primary); }
.recipe { display: grid; gap: 1rem; margin: 0 0 1rem; }
.recipe__img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--border-subtle); }
.recipe__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 0.6rem; }
.recipe__facts div { padding: 0.75rem 0.9rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); }
.recipe__facts dt { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); }
.recipe__facts dd { margin: 0.2rem 0 0; font-family: var(--mono); font-size: 1.2rem; color: var(--text-primary); }
.recipe__facts small { font-family: var(--sans); font-size: 0.72rem; color: var(--text-tertiary); }
.recipe__note { margin: 0; font-size: 0.82rem; color: var(--text-tertiary); }

/* The closing band on every tool page. */
.band--beta { padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: linear-gradient(to bottom, var(--base), var(--void)); }
.beta { display: grid; gap: 1.4rem; align-items: end; grid-template-columns: minmax(0, 1.6fr) auto; }
.beta h2 { margin: 0.3rem 0 0.8rem; }
.beta .lede { margin: 0; max-width: 58ch; color: var(--text-secondary); }
.beta .cta { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 760px) { .beta { grid-template-columns: 1fr; } }

/* The Guild Master: a button in the corner and a modal dialog. */
.gm__fab { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.05rem 0.7rem 0.85rem; border: 1px solid rgba(110,231,183,0.45); border-radius: 999px; background: var(--glass-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--text-primary); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; box-shadow: 0 14px 40px rgba(0,0,0,0.45); transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.gm__fab svg { color: var(--pulse-glow); flex: none; }
.gm__fab:hover { transform: translateY(-2px); border-color: var(--pulse-glow); }
.gm__fab:focus-visible { outline: 2px solid var(--pulse); outline-offset: 3px; }
@media (max-width: 520px) { .gm__fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .gm__fab { padding: 0.8rem; } }
.gm__dlg { width: min(100% - 2rem, 40rem); max-height: min(100svh - 2rem, 46rem); padding: 0; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface); color: var(--text-primary); box-shadow: 0 40px 120px rgba(0,0,0,0.6); }
.gm__dlg::backdrop { background: rgba(3,3,5,0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.gm__in { padding: 1.25rem 1.25rem 1.1rem; display: grid; gap: 0.85rem; }
.gm__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gm__head h2 { margin: 0; font-size: 1.3rem; }
.gm__close { width: 2.5rem; height: 2.5rem; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--text-secondary); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.gm__close:hover { color: var(--text-primary); border-color: var(--border-strong); }
.gm__close:focus-visible { outline: 2px solid var(--pulse); outline-offset: 2px; }
.gm__note, .gm__foot { margin: 0; font-size: 0.82rem; color: var(--text-tertiary); }
.gm__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
.gm__try { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.gm__try p { margin: 0 0.2rem 0 0; font-size: 0.78rem; color: var(--text-tertiary); }
.gm__out:empty { display: none; }
.gm__msg { margin: 0; color: var(--text-secondary); }
.gm__answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.gm__answer { padding: 0.85rem 1rem; border: 1px solid var(--border-subtle); border-left: 3px solid var(--pulse); border-radius: 12px; background: var(--base); display: grid; gap: 0.45rem; }
.gm__where { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.gm__quote { margin: 0; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.55; }
.gm__more { justify-self: start; font-size: 0.86rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .gm__fab, .item a, .bm__r path { transition: none; } }
@media print { .gm { display: none !important; } }

/* The body map's movements: each one opens to how it is done. */
.doc .mv__hint { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--text-tertiary); }
.mv summary { cursor: pointer; list-style: none; position: relative; padding-right: 2.2rem; border-radius: 6px; }
.mv summary::-webkit-details-marker { display: none; }
.mv summary::after { content: "+"; position: absolute; right: 0.4rem; top: 0; font-family: var(--mono); font-size: 1.1rem; line-height: 1.4; color: var(--pulse); transition: transform 200ms var(--ease-out); }
.mv details[open] > summary::after { transform: rotate(45deg); }
@media (hover: hover) { .mv summary:hover b { color: var(--pulse-glow); } }
.mv summary:focus-visible { outline: 2px solid var(--pulse); outline-offset: 3px; }
.mv__body { margin: 0.55rem 0 0.8rem; padding: 0.95rem 1.05rem 1rem; border: 1px solid var(--border-subtle); border-left: 3px solid var(--pulse); border-radius: 12px; background: var(--surface); display: grid; gap: 0.55rem; max-width: 66ch; }
.mv__text { display: grid; gap: 0.55rem; }
:is(.doc, .mvdlg) .mv__body p, :is(.doc, .mvdlg) .mv__body ol, :is(.doc, .mvdlg) .mv__body ul { margin: 0; }
:is(.doc, .mvdlg) .mv__body p { font-size: 0.94rem; }
:is(.doc, .mvdlg) .mv__body .mv__en { font-size: 0.84rem; color: var(--text-tertiary); font-style: italic; }
:is(.doc, .mvdlg) .mv__body .mv__h { margin-top: 0.25rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); }
:is(.doc, .mvdlg) .mv__body ol, :is(.doc, .mvdlg) .mv__body ul { padding-left: 1.3rem; display: grid; gap: 0.25rem; }
:is(.doc, .mvdlg) .mv__body ul { list-style: disc; }
.doc .moves .mv__body li, .mvdlg .mv__body li { margin: 0; padding: 0; font-size: 0.94rem; max-width: none; }
.doc .moves .mv__body li::before { content: none; }
.mv__steps li::marker { color: var(--pulse); font-weight: 700; }
.mv__list li::marker { color: var(--text-tertiary); }
.mv__img { display: block; width: 100%; max-width: 16rem; height: auto; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--base); }
:is(.doc, .mvdlg) .mv__body .mv__care { padding: 0.55rem 0.8rem; border-left: 3px solid var(--amber); border-radius: 8px; background: rgba(255,176,32,0.07); color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .mv summary::after { transition: none; } }

/* A movement opened over the map (client/bodymap.ts, 2026-10-19): the same panel, copied into one modal dialog. */
.mvdlg { width: min(100% - 2rem, 42rem); max-height: min(100svh - 2rem, 52rem); padding: 0; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface); color: var(--text-primary); box-shadow: 0 40px 120px rgba(0,0,0,0.6); overflow: hidden; }
.mvdlg[open] { display: flex; flex-direction: column; }
.mvdlg::backdrop { background: rgba(3,3,5,0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html:has(.mvdlg[open]) { overflow: hidden; }
.mvdlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem 0.9rem; border-bottom: 1px solid var(--border-subtle); border-top: 3px solid var(--pulse); }
.mvdlg__titles { display: grid; gap: 0.2rem; min-width: 0; }
.mvdlg__kicker { margin: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pulse); }
.mvdlg__h { margin: 0; font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem); line-height: 1.2; }
.mvdlg__sub { margin: 0; font-size: 0.86rem; color: var(--text-tertiary); }
.mvdlg__close { flex: none; }
.mvdlg__content { overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.25rem 1.3rem; }
.mvdlg .mv__body { margin: 0; padding: 0; border: 0; background: none; max-width: none; gap: 0.6rem; }
.mvdlg .mv__body p, .mvdlg .mv__body li { line-height: 1.55; }
.mvdlg .mv__img { max-width: 18rem; margin: 0 auto 0.3rem; }
@media (prefers-reduced-motion: no-preference) { .mvdlg[open] { animation: mvdlg-in 200ms var(--ease-out); } }
@keyframes mvdlg-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@media print { .mvdlg { display: none !important; } }

/* The Guild Ranker (2026-10-19): rank colours are the rarity ladder plus the neon cyan. */
:root { --rk-common: #8E8C88; --rk-uncommon: #BEF264; --rk-rare: #5B93F0; --rk-epic: #B57BF5; --rk-legendary: #FFB020; --rk-champion: #2BE4FF; }
.rk__lift { padding-top: 0.2rem; border-top: 1px solid var(--border-subtle); }
.rk__lift legend { padding-top: 0.8rem; }
.rk__chip { display: inline-block; padding: 0.15rem 0.6rem; border: 1px solid var(--rk); border-radius: 999px; color: var(--rk); font-weight: 700; font-size: 0.86rem; white-space: nowrap; }
.rk h2 span { color: var(--rk, var(--text-primary)); }
.rk__ladder { margin: 0.6rem 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.rk__ladder i { height: 6px; border-radius: 3px; background: var(--border); }
.rk__ladder i.on { background: var(--rk); }
.rk__row .bsrow__k { color: var(--rk, var(--pulse-glow)); }

/* The Daily Bounty Board (2026-10-19). */
.bb h2 { color: var(--text-primary); }
.bb__list, .doc .bb__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; counter-reset: bb; }
.bb__move { counter-increment: bb; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.85rem; row-gap: 0.15rem; padding: 0.8rem 1rem; border: 1px solid var(--border-subtle); border-left: 3px solid var(--pulse); border-radius: 12px; background: var(--base); }
.bb__move::before { content: counter(bb); grid-row: span 4; align-self: center; font-family: var(--mono); font-size: 1.3rem; font-weight: 700; color: var(--pulse-glow); min-width: 1.4rem; text-align: center; }
.bb__slot { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); }
.bb__name { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.bb__name a { color: inherit; text-decoration: underline; text-decoration-color: rgba(110,231,183,0.45); text-underline-offset: 3px; }
.bb__name a:hover { text-decoration-color: var(--pulse-glow); }
.bb__rx, .bb__rest { grid-column: 2; font-size: 0.88rem; color: var(--text-secondary); }
.bb__rest { color: var(--text-tertiary); font-size: 0.8rem; }
.doc .bb__list--sample { margin: 0.6rem 0 0; }
.doc .bb__list .bb__move { margin: 0; max-width: none; }


/* ══════════════════════════════════════════════════════════════════════════
 * THE WEB COMPANION (2026-10-29): the signed-in page at /app/.
 * ════════════════════════════════════════════════════════════════════════ */
.portal { display: grid; gap: 1.2rem; min-width: 0; }
.portal [hidden] { display: none !important; }
.pt-card, .pt-signin { background: var(--glass-strong); border: 1px solid var(--glass-line); border-radius: var(--radius); padding: 1.1rem 1.2rem; min-width: 0; }
.pt-signin { max-width: 26rem; display: grid; gap: 0.9rem; }
.pt-title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0; }
.pt-title:focus { outline: none; }
.pt-title:focus-visible { outline: 2px solid var(--pulse); outline-offset: 4px; }
.pt-card h3, .pt-day h3 { font-size: 1.02rem; margin: 0 0 0.5rem; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.pt-sub { font-size: 0.9rem; margin: 1rem 0 0.3rem; color: var(--text-secondary); display: flex; gap: 0.4rem; align-items: baseline; }
.pt-unit { font-size: 0.78rem; font-weight: 500; color: var(--text-tertiary); }
.pt-field { display: grid; gap: 0.3rem; min-width: 0; }
.pt-field__label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }
.pt-input, .pt-select { font: inherit; font-size: 0.95rem; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.7rem; min-width: 0; width: 100%; box-sizing: border-box; }
.pt-input:focus-visible, .pt-select:focus-visible { outline: 2px solid var(--pulse); outline-offset: 1px; border-color: var(--pulse); }
.pt-input[aria-invalid="true"] { border-color: var(--amber); }
.pt-input--short { max-width: 7.5rem; }
.pt-input--date { max-width: 11rem; color-scheme: dark; }
.pt-select { color-scheme: dark; }
.pt-status { margin: 0; color: var(--text-secondary); min-height: 1.2em; }
.pt-status[role="alert"], .pt-empty[role="alert"] { color: var(--amber); }
.pt-empty { margin: 0; color: var(--text-tertiary); }
.pt-reading { margin: 0.2rem 0; color: var(--text-secondary); font-size: 0.92rem; }
.pt-notes { margin: 0; padding-left: 1.1rem; color: var(--text-tertiary); font-size: 0.86rem; display: grid; gap: 0.25rem; }
.pt-foot { margin: 0; color: var(--text-tertiary); font-size: 0.82rem; }
.pt-bar { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; }
.pt-who { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.pt-switcher { max-width: 22rem; }
.pt-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.6rem; }
.pt-nav a { display: inline-block; padding: 0.45rem 0.9rem; border-radius: 999px; color: var(--text-secondary); text-decoration: none; font-weight: 600; font-size: 0.9rem; border: 1px solid transparent; }
.pt-nav a:hover { color: var(--text-primary); border-color: var(--border); }
.pt-nav a[aria-current="page"] { color: var(--text-primary); border-color: var(--pulse); background: var(--pulse-faint); }
.pt-nav a:focus-visible { outline: 2px solid var(--pulse); outline-offset: 2px; }
.pt-view { display: grid; gap: 1.1rem; min-width: 0; }
.pt-viewhead { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; align-items: center; justify-content: space-between; }
.pt-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pt-row { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; align-items: end; }
.pt-block { min-width: 0; }
.pt-sums { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.pt-card__range { margin: -0.3rem 0 0.6rem; color: var(--text-tertiary); font-size: 0.82rem; }
.pt-stats { margin: 0; display: grid; gap: 0.35rem; }
.pt-stat { display: flex; justify-content: space-between; gap: 0.8rem; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.3rem; }
.pt-stat dt { color: var(--text-secondary); font-size: 0.88rem; }
.pt-stat dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.pt-charts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); }
.pt-chartcard { display: grid; gap: 0.4rem; align-content: start; }
.pt-chart { width: 100%; min-width: 0; overflow: hidden; }
.pt-chart svg { display: block; max-width: 100%; height: auto; }
.pt-inline { display: flex; gap: 0.5rem; align-items: center; font-size: 0.86rem; color: var(--text-secondary); }
.pt-inline .pt-select { width: auto; max-width: 100%; }
.pt-legend { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; color: var(--text-secondary); font-size: 0.84rem; }
.pt-legend li { display: inline-flex; gap: 0.35rem; align-items: center; }
.pt-data summary { cursor: pointer; color: var(--text-secondary); font-size: 0.86rem; padding: 0.2rem 0; }
.pt-data summary:focus-visible { outline: 2px solid var(--pulse); outline-offset: 2px; }
.pt-scroll { overflow-x: auto; max-width: 100%; }
.pt-table { border-collapse: collapse; width: 100%; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.pt-table th, .pt-table td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.pt-table thead th { color: var(--text-tertiary); font-weight: 600; white-space: nowrap; }
.pt-table--wide { min-width: 44rem; }
.pc .pc-grid { stroke: var(--border-subtle); stroke-width: 1; }
.pc .pc-axis { stroke: var(--border-strong); stroke-width: 1; }
.pc .pc-label { fill: var(--text-tertiary); font-size: 11px; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.pc-bar { fill: var(--pulse); }
.pc-bar2 { fill: var(--int); }
.pc-bar3 { fill: var(--cyan); }
.pc-dot { fill: var(--bone); stroke: var(--base); stroke-width: 1.5; }
.pc-mean { fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.pc-rule { stroke: var(--wis); stroke-width: 1.6; stroke-dasharray: 5 4; fill: none; }
.pc-target { stroke: var(--bone); stroke-width: 2.6; stroke-linecap: round; }
.pt-panel, .pt-review, .pt-days, .pt-plan { display: grid; gap: 1rem; min-width: 0; }
.pt-drop { display: grid; justify-items: start; gap: 0.6rem; padding: 1.4rem; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.pt-drop.is-over { border-color: var(--pulse); background: var(--pulse-faint); }
.pt-drop:focus-within { outline: 2px solid var(--pulse); outline-offset: 2px; }
.pt-drop__title { font-weight: 700; font-size: 1.05rem; }
.pt-drop__note { color: var(--text-tertiary); font-size: 0.86rem; }
.pt-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pt-day { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius); padding: 0.9rem 1rem; min-width: 0; }
.pt-tag { display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; }
.pt-tag--exact { border-color: var(--pulse); color: var(--pulse-glow); }
.pt-tag--check { border-color: var(--amber); color: var(--amber); }
.pt-tag--none { border-color: var(--border-strong); color: var(--text-tertiary); }
.pt-tag--picked { border-color: var(--cyan); color: var(--cyan); }
.pt-band { white-space: nowrap; }
.pt-warn { min-width: 9rem; }
.pt-note { display: block; color: var(--amber); font-size: 0.8rem; }
.pt-credit { display: block; color: var(--text-tertiary); font-size: 0.74rem; }
.pt-savebar { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; align-items: end; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--glass-strong); border: 1px solid var(--glass-line); }
.pt-savebar .pt-field { flex: 1 1 16rem; }
.pt-savebar .pt-status { flex-basis: 100%; }
.pt-confirm { display: inline-flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.pt-searchbox { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 0.3rem 0; }
.pt-searchbox .pt-input, .pt-searchbox .pt-field { flex: 1 1 12rem; }
.pt-results { list-style: none; margin: 0.3rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pt-bday__head { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: end; justify-content: space-between; margin-bottom: 0.7rem; }
.pt-bday__head .pt-field { flex: 1 1 14rem; }
.pt-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pt-brows { display: grid; gap: 0.8rem; margin-bottom: 0.8rem; }
.pt-brow { border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.9rem; margin: 0; display: grid; gap: 0.6rem; min-width: 0; }
.pt-brow legend { font-weight: 700; font-size: 0.86rem; color: var(--text-secondary); padding: 0 0.3rem; }
.pt-brow__nums { display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; }
.pt-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.pt-items li { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.35rem; }
.pt-items__name { flex: 1 1 12rem; overflow-wrap: anywhere; }
.pt-items__grams { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pt-addform { display: grid; gap: 0.6rem; }
.pt-readonly { margin: 0; }
.pt-sends { display: grid; gap: 0.9rem; }
.pt-sends .pt-card { display: grid; gap: 0.6rem; align-content: start; }
.pt-signin > .pill, .pt-card > .pill { justify-self: start; }
.pt-reports { display: grid; gap: 0.9rem; }
@media (max-width: 600px) {
  .pt-card, .pt-signin, .pt-day { padding: 0.9rem; }
  .pt-savebar { padding: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .portal * { transition: none !important; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .cine__body--hero { grid-template-columns: 1fr; align-items: end; }
  .cine__body--art { grid-template-columns: 1fr; }
  .cine__art { width: min(100%, 18rem); }
  .hero__card { justify-self: start; transform: none; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .chapter__grid { grid-template-columns: 1fr; gap: 2rem; }
  .chapter__grid--flip .chapter__media { order: 0; }
  .chapter__media { position: static; height: auto; padding-top: 3rem; }
  .step { min-height: 0; padding: 1.5rem 0; }
  .switch { padding: 5rem 0; }
  .switch__grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Seven sections since the free tools (2026-10-12): below this width the longer languages' links no longer fit one line,
   so the bar folds them into the menu rather than wrapping to two rows; the call to action stays until 760px. */
@media (max-width: 1240px) {
  .navlinks { display: none; }
  .menu { display: block; }
}
@media (max-width: 760px) {
  .navlinks { display: none; }
  .menu { display: block; }
  .topbar__right .pill { display: none; }
  .cine--hero { min-height: auto; }
  .cine__body--hero { padding: 6rem 0 3.5rem; }
  .hero__cardbody { grid-template-columns: 6rem 1fr; }
  .tile--wide { grid-column: span 1; }
  .foot__cols { grid-template-columns: 1fr; }
  .band { padding: 4.5rem 0; }
  .band--raise { padding-top: 0; }
  .hero { min-height: 0; }
  .hero__inner { padding: 7rem 0 5.5rem; }
  .hero__cue { display: none; }
  .stores { gap: 0.6rem; }
  .store { padding: 0.65rem 0.95rem 0.65rem 0.85rem; }
  .curtain { border-radius: 20px 20px 0 0; }
  .ticker { border-radius: 20px 20px 0 0; }
  .band--first { padding-top: 4.5rem; }
  .device { --dz: 0.72; }
  .toggle { gap: 0.8rem; }
  .toggle__track { height: 2.8rem; }
  .band--download { padding: 5rem 0; }
  .fact__n { font-size: 2.2rem; }
  .toggle { grid-template-columns: 1fr; justify-items: center; gap: 0.6rem; width: min(100%, 16rem); }
  .toggle__track { width: 100%; }
  .reelcard { width: 74vw; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .fact { padding: 1.2rem 1rem; }
  .fact__sub { font-size: 0.8rem; }
}
/*
 * Reduced motion switches EVERY animation off, scroll-driven ones included,
 * and each keyframe above is written so its natural state is the finished
 * one: a reveal is visible, the hero is opaque, the top bar is translucent,
 * the knob rests on StatBlockPro. Nothing waits for a scroll that never
 * animates.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .hero { position: relative; }
  .ticker { -webkit-mask-image: none; mask-image: none; }
  .ticker__track { width: auto; flex-wrap: wrap; row-gap: 0.4rem; }
  .ticker__track .ticker__item:nth-child(n + 13) { display: none; }
}