/* ═══ HELHEIMRS — «تار سرنوشت» character builder ═══ */
/* amber marks a step a later change unsettled ("look again"), never an error */
.pg-fate { --review: #E3B341; padding-block: var(--s-7) var(--s-9); }
/* Words are never cut inside their letters here: a label that runs out of room
   wraps between words, and its column is made wide enough for its longest word.
   `anywhere` (one letter's min-content) is kept for what a player typed — the
   names, epitaphs, story and personality lines listed below — so one long name
   still cannot widen the page; that text breaks at the ZWNJ points HX.ct marks. */
.pg-fate { overflow-wrap: break-word; }
.pg-fate :is(.gallery__row-t b, .fate-banner__txt b, .fate-banner__epitaph, .fate-badge__why, .sub-legacy, .fs-head__name b, .fs-head__facts dd, .sheet-hero__text p),
.fate-form h2, .lvl-form h2 { overflow-wrap: anywhere; }
/* a number, a signed modifier and a dice roll are one unit: never split from their sign */
.pg-fate :is(.sgn, .dice, .nb, .tbl td.num) { white-space: nowrap; overflow-wrap: normal; }
/* the attacks table never cuts a word («سوراخ‌کننده», "Longbow"): it wraps between
   words, and when a phone is narrower than that, its wrapper scrolls sideways */
.pg-fate .fs-attacks .tbl :is(td, th) { overflow-wrap: normal; }
@media (max-width: 26em) { .pg-fate .fs-attacks .tbl :is(td, th) { padding-inline: 6px; } }
:root[data-theme="light"] .pg-fate { --review: #8A5A00; }
.pg-fate__head { margin-bottom: var(--s-6); }
.pg-fate__head .kicker { color: var(--accent-text); font-size: var(--fs-sm); font-weight: 600; margin: 0 0 4px; }
.pg-fate__head h1 { margin-bottom: .25em; font-size: var(--fs-page); overflow-wrap: anywhere; }
.pg-fate__head > .btn { flex: none; }
/* a safety net: an icon on this page never grows past its slot, whatever the art module emits */
.pg-fate .ico { width: 20px; height: 20px; flex: none; }
.pg-fate .btn .ico { width: 20px; height: 20px; }
.pg-fate .sub-title { font-size: var(--fs-lg); margin: var(--s-6) 0 var(--s-3); display: flex; align-items: baseline; gap: var(--s-3); }
.pg-fate .resume-bar { --bd: var(--line-glow); --facet: 8px; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5); border: 1px solid var(--bd); background: var(--facet-edges), rgba(47,211,154,.06); clip-path: var(--clip-facet); font-size: var(--fs-sm); }
.pg-fate .resume-bar > span { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--accent-text); }
/* dice notation: Latin digits in a monospace face, everywhere on these pages */
.pg-fate .dice { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace; font-size: .92em; letter-spacing: .02em; white-space: nowrap; }

/* ── The Norns' loom ──
   Three states must be readable without colour alone, so the hex is hollow when
   locked, filled stone when woven, and solid emerald while it is on the loom. ── */
.pg-fate .loom { position: relative; margin-bottom: var(--s-6); padding-bottom: var(--s-half); border-bottom: 1px solid var(--line); }
/* no gap: each rail column sits exactly over its warp column. Eight steps, or
   nine with a sub-species: the columns are as many as the steps shown. */
.pg-fate .rail { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.pg-fate .rail__item button { position: relative; width: 100%; display: grid; justify-items: center; gap: var(--s-half); padding: var(--s-2) 2px; background: none; border: 0; color: var(--fg-muted); font-size: var(--fs-2xs); font-weight: 600; cursor: pointer; transition: color var(--t-ui) var(--ease-stone); }
/* the rune is a drawn mark (HX.art.rune): every step's rune the same full 20px height */
.pg-fate .rail__rune { width: 42px; height: 42px; display: grid; place-items: center; clip-path: var(--clip-hex); background: transparent; color: var(--ornament); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background var(--t-ui) var(--ease-stone), color var(--t-ui) var(--ease-stone), box-shadow var(--t-ui) var(--ease-stone), transform var(--t-ui) var(--ease-stone); }
/* every drawn rune on these pages: sized by its box, coloured by its text */
.pg-fate .rune-glyph, .fate-badge .rune-glyph, .fate-banner .rune-glyph, .fate-group .rune-glyph { display: block; flex: none; overflow: visible; }
.pg-fate .rail__rune svg { width: 13.33px; height: 20px; }
.pg-fate .rune-font { font-family: var(--font-rune); line-height: 1; }
/* The separator between facts is components.css's drawn lozenge (.sep). Set in
   the rune font here, ᛫ was a filled dot the size of Vazirmatn's «۰» at 1x, so
   «سطح ۳ ᛫ ۹ متر» read «۳۰۹». In the badge the flex gap already spaces it. */
.fate-badge .sep { margin-inline: 0; }
.pg-fate .rail__item.is-done .rail__rune { background: var(--bg-elev-2); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--line-glow); }
.pg-fate .rail__item.is-done button { color: var(--fg); }
.pg-fate .rail__item.is-current .rail__rune { background: var(--emerald-grad); color: var(--accent-fg); box-shadow: none; transform: scale(1.14); }
/* the hex grows for the step you are on; its rune keeps the same height as every other */
.pg-fate .rail__item.is-current .rail__rune svg { transform: scale(.877); }
.pg-fate .rail__item.is-current button { color: var(--fg-strong); }
.pg-fate .rail__item.is-review .rail__rune { background: var(--bg-elev-2); color: var(--review); }
.pg-fate .rail__item.is-review button::after { content: ""; position: absolute; top: 6px; left: calc(50% + 13px); width: 10px; height: 10px; border-radius: 50%; background: var(--review); box-shadow: 0 0 0 2px var(--bg); }
.pg-fate .rail__item button[disabled] { cursor: not-allowed; }
.pg-fate .rail__item button:not([disabled]):hover .rail__rune { background: var(--bg-elev); color: var(--fg-strong); }
.pg-fate .rail__label { line-height: 1.2; }
.pg-fate .rail__n { display: none; }

.pg-fate .loom__svg { width: 100%; height: 54px; display: block; }
.pg-fate .loom__band { fill: transparent; transition: fill var(--t-ui) var(--ease-stone); }
.pg-fate .loom__col.is-now .loom__band { fill: rgba(47,211,154,.07); }
.pg-fate .loom__warp { stroke: var(--line-strong); stroke-width: 1; }
.pg-fate .loom__warp.is-slub { stroke-width: 1.4; }
.pg-fate .loom__col.is-locked .loom__warp { stroke: var(--line); stroke-dasharray: 2 3; }
/* each pass is a shuttle shot across its column; they land one after another */
.pg-fate .thread { fill: none; stroke: var(--emerald); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--ease-out); transition-delay: calc(var(--p) * 70ms); }
.pg-fate .loom__pass:nth-of-type(even) .thread { stroke: var(--emerald-soft); }
.pg-fate .loom__pass.is-on .thread { stroke-dashoffset: 0; }
.pg-fate .loom__col.is-review .thread { stroke: var(--review); }
.pg-fate .loom__col.is-now .loom__pass.is-on .thread { filter: drop-shadow(0 0 3px rgba(47,211,154,.6)); }
/* the warp crosses in front of the weft: a ground-coloured cut, then the warp again */
.pg-fate .loom__cut { fill: none; stroke: var(--bg); stroke-width: 3; opacity: 0; }
.pg-fate .loom__over { fill: none; stroke: var(--line-strong); stroke-width: 1; opacity: 0; }
.pg-fate .loom__pass.is-on :is(.loom__cut, .loom__over) { opacity: 1; transition: opacity .2s var(--ease-out) calc(var(--p) * 70ms + .3s); }
.pg-fate .loom.is-woven .loom__svg { filter: drop-shadow(0 0 6px rgba(47,211,154,.3)); }
/* rewoven for a step that came or went: what was woven is simply there */
.pg-fate .loom.is-still :is(.thread, .loom__cut, .loom__over) { transition: none; }
:root[data-theme="light"] .pg-fate .thread { stroke: var(--jade); }
:root[data-theme="light"] .pg-fate .loom__pass:nth-of-type(even) .thread { stroke: #157C5C; }
:root[data-theme="light"] .pg-fate .loom__col.is-review .thread { stroke: var(--review); }
@media (max-width: 640px) {
  .pg-fate .rail__label { display: none; }
  .pg-fate .rail__n { display: block; }
  .pg-fate .rail__rune { width: 34px; height: 34px; }
  .pg-fate .rail__rune svg { width: 10.67px; height: 16px; }
  .pg-fate .rail__item.is-review button::after { left: calc(50% + 9px); }
  .pg-fate .loom__svg { height: 40px; }
}

/* ── body: step + live sheet ── */
.pg-fate__body { display: grid; grid-template-columns: minmax(0, 1fr) min(23.125rem, 42%); gap: var(--s-6); align-items: start; }
.pg-fate__step { --bd: var(--line); position: relative; background: var(--stone-grad); border: 1px solid var(--bd); clip-path: var(--clip-facet); padding: var(--s-6) var(--s-6) 0; box-shadow: var(--shadow-stone); min-width: 0; }
/* Every faceted surface on these pages closes its chamfer (components.css:1-3):
   the diagonal is --facet-edges in the surface's own --bd. Where a child paints
   over a corner — the step's pinned footer runs flush to its bottom-left cut,
   the live sheet's sticky numbers to its top-right — the diagonal is drawn on
   an overlay above them instead of in the background. inset: -1px lays the
   overlay on the border box, where the clip cuts. */
.pg-fate__step::after, .pg-fate .sheet::after { content: ""; position: absolute; inset: -1px; z-index: 4; background: var(--facet-edges); pointer-events: none; }
.pg-fate__step.is-shake { animation: fate-shake .2s var(--ease-stone); }
@keyframes fate-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pg-fate .step-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-5); }
.pg-fate .step-title { font-size: var(--fs-2xl); margin-bottom: .2em; }
.pg-fate .step-lead { margin: 0; }
/* the Gatekeeper's line, as the step's own voice rather than a bubble over it */
.pg-fate .step-voice { display: flex; gap: var(--s-2); align-items: baseline; margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--fg); line-height: 1.8; }
.pg-fate .step-voice__rune { color: var(--rune-lit); flex: none; align-self: center; }
.pg-fate .step-voice__rune svg { width: 10.67px; height: 16px; }
.pg-fate .step-count { flex: none; white-space: nowrap; }
/* Next and the step's rule stay in view: the footer is pinned to the bottom of
   the window while the step is on screen, so nobody scrolls past a grid to move on */
.pg-fate .step-nav { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); margin: var(--s-6) calc(-1 * var(--s-6)) 0; padding: var(--s-3) var(--s-6); background: var(--bg-elev); border-top: 1px solid var(--line-strong); box-shadow: 0 -14px 24px -16px rgba(0,0,0,.6); }
.pg-fate .step-req { margin: 0; text-align: center; font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.5; }
.pg-fate .step-mid { min-width: 0; }
.pg-fate .step-nav__prev { display: inline-flex; align-items: center; gap: var(--s-2); }
/* With large text the two buttons leave the requirement between them a column a
   word wide; the step answers to its own width in rem (a media query reads the
   browser's default size, not the reader's), and the requirement takes a row of
   its own above the buttons. Desktop only: on phones the bar is fixed, and a
   query container would hold it inside the step. */
@media (min-width: 62.6em) { .pg-fate__step { container: fate-step / inline-size; } }
@container fate-step (max-width: 26rem) {
  .pg-fate .step-nav { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mid mid mid" "prev . next"; row-gap: var(--s-2); }
  .pg-fate .step-nav > .step-nav__prev { grid-area: prev; }
  .pg-fate .step-nav > .step-mid { grid-area: mid; }
  .pg-fate .step-nav > :is([data-act="next"], [data-act="finish"]) { grid-area: next; }
}
/* the sheet sits beside the step on a wide screen: nothing to open */
.pg-fate .sheet-toggle { display: none; }
/* the pinned footer is ~70px: focus scrolls clear of it */
html:has(.pg-fate--wizard) { scroll-padding-bottom: calc(76px + var(--s-4)); }
.pg-fate .step-req.is-blocked { color: var(--fg); }
.pg-fate .step-req.is-err { color: var(--danger); font-weight: 700; }
/* visibly unavailable, but still pressable: pressing it says why */
.pg-fate .step-nav .btn[aria-disabled="true"] { pointer-events: auto; opacity: .55; cursor: not-allowed; filter: saturate(.4); }
/* The live sheet never runs past the window (its end stays above the corner
   sound button), and fades out at the bottom edge when there is more below. The
   fade covers only the body's bottom padding once scrolled to the end. */
.pg-fate__sheet { position: sticky; top: 84px; min-width: 0; max-height: calc(100vh - 84px - 88px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
.pg-fate .sheet-body { padding-bottom: 28px; }
/* The dice launcher lives in the header, out of the content: the builder keeps
   it like every other page, and no sheet value can sit under it. */
/* the Gatekeeper speaks in the steps here: a bubble would cover the controls */
body:has(.pg-fate--wizard) .guide { display: none !important; }

/* ── option cards: radio groups ── */
.pg-fate .opt-set, .pg-fate .pick-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.pg-fate .pick-set + .pick-set { margin-top: var(--s-5); }
.pg-fate .pick-set > legend { padding: 0; margin-top: 0; }
/* tracks in rem, so a card grows with the text: at 200% text «هافلینگ» still fits its column */
.pg-fate .opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--s-3); }
/* sub-species cards carry their traits in full, so they take a wider column */
.pg-fate .opt { text-align: start; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; gap: 2px 12px; padding: var(--s-4); cursor: pointer; --facet: 10px; color: var(--fg); font: inherit; }
.pg-fate .opt__rune { grid-row: 1 / span 2; color: var(--fg-muted); display: grid; place-items: center; width: 44px; height: 44px; clip-path: var(--clip-hex); background: var(--bg); transition: background var(--t-ui) var(--ease-stone), color var(--t-ui) var(--ease-stone), opacity var(--t-ui) var(--ease-stone); }
.pg-fate .opt__rune svg { width: 14.67px; height: 22px; }
.pg-fate .opt__fa { font-family: var(--font-display); font-weight: 800; color: var(--fg-strong); font-size: var(--fs-lg); line-height: 1.3; padding-inline-end: 24px; }
.pg-fate .opt__en { display: block; unicode-bidi: isolate; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; color: var(--fg-muted); letter-spacing: .02em; }
.pg-fate .opt__desc { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.7; margin-top: 6px; }
/* the facts in plain text, numbers in bold: twelve emerald lines per screen was noise */
.pg-fate .opt__meta { grid-column: 1 / -1; font-size: .8125rem; color: var(--fg); line-height: 1.7; }
.pg-fate .opt__meta b { color: var(--fg-strong); font-weight: 800; }
.pg-fate .opt__traits { grid-column: 1 / -1; font-size: var(--fs-2xs); color: var(--fg-muted); line-height: 1.7; padding-top: 4px; border-top: 1px dashed var(--line-strong); margin-top: 4px; }
/* a species with sub-species says so on its card, so the step that follows is no surprise */
.pg-fate .opt__subs { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-2xs); color: var(--fg); line-height: 1.6; }
.pg-fate .opt__subs-rune { color: var(--rune-lit); flex: none; align-self: center; }
.pg-fate .opt__subs-rune svg { width: 8.67px; height: 13px; }
/* what a sub-species adds: each trait its own short paragraph, the name leading */
.pg-fate .opt__traits:has(.opt__add) { display: grid; gap: 6px; font-size: var(--fs-xs); color: var(--fg-muted); padding-top: 8px; }
.pg-fate .opt__add { display: block; }
.pg-fate .opt__add > b { color: var(--fg-strong); font-weight: 700; margin-inline-end: .35em; }

/* ── sub-species: the shared base, then what each adds ── */
.pg-fate .sub-base { --bd: var(--line-strong); --facet: 10px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-4); border: 1px dashed var(--bd); background: var(--bg); clip-path: var(--clip-facet); }
.pg-fate .sub-base__rune { width: 44px; height: 44px; display: grid; place-items: center; clip-path: var(--clip-hex); background: var(--bg-elev-2); color: var(--accent-text); }
.pg-fate .sub-base__rune svg { width: 14.67px; height: 22px; }
.pg-fate .sub-base__h { margin: 0; font-size: var(--fs-lg); line-height: 1.3; }
.pg-fate .sub-base__alt { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; color: var(--fg-muted); letter-spacing: .02em; }
.pg-fate .sub-base__lead { margin: 2px 0 var(--s-2); font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.7; }
.pg-fate .sub-base__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pg-fate .sub-base__list > li { --bd: var(--line-strong); --facet: 4px; padding: 2px 10px; border: 1px solid var(--bd); background: var(--facet-edges); font-size: var(--fs-2xs); line-height: 1.8; color: var(--fg); clip-path: var(--clip-facet); }
.pg-fate .sub-base__list > li b { color: var(--fg-strong); font-weight: 800; }
.pg-fate .sub-base__list > .sub-base__fact { --bd: var(--line-glow); }
.pg-fate .sub-legacy { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-inline-start: 3px solid var(--review); background: color-mix(in srgb, var(--review) 10%, transparent); font-size: var(--fs-sm); line-height: 1.8; }
.pg-fate .opt__check { position: absolute; top: 12px; inset-inline-end: 12px; width: 22px; height: 22px; display: grid; place-items: center; clip-path: var(--clip-hex); background: var(--emerald-grad); color: var(--accent-fg); opacity: 0; transform: scale(.6); transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-stone); }
.pg-fate .opt__check .ico { width: 16px; height: 16px; stroke-width: 2.6; }
/* twelve tiles must not each carry the full carved shadow */
.pg-fate .opt, .pg-fate .spell-mini { box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
/* the cards are slabs (components.css): a state moves --bd, never border-color,
   so the chamfer's diagonal turns with the sides */
.pg-fate .opt:hover { --bd: var(--line-strong); }
/* chosen: a 2px emerald rim, the glow, a check badge — findable at half zoom */
.pg-fate .opt.is-sel { --bd: var(--emerald); box-shadow: inset 0 0 0 1px var(--emerald), var(--glow-inset); }
.pg-fate .opt.is-sel .opt__rune { background: var(--emerald-grad); color: var(--accent-fg); }
.pg-fate .opt.is-sel .opt__check { opacity: 1; transform: none; }
.pg-fate .opt-grid:has(.is-sel) .opt:not(.is-sel) .opt__rune { opacity: .6; }
.pg-fate .opt:has(input:focus-visible) { --bd: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
@supports not selector(:has(*)) { .pg-fate .opt:focus-within { box-shadow: inset 0 0 0 2px var(--accent); } }
/* the warning rides just above the pinned footer, so it is in view wherever the card was */
.pg-fate .cls-warn { position: sticky; bottom: calc(var(--nav-b, 0px) + var(--nav-h, 70px) + var(--s-2)); z-index: 3; margin-top: var(--s-4); padding: var(--s-4); border: 1px solid var(--review); background: linear-gradient(color-mix(in srgb, var(--review) 12%, transparent), color-mix(in srgb, var(--review) 12%, transparent)), var(--bg-elev); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.pg-fate .cls-warn p { margin: 0 0 var(--s-3); line-height: 1.8; }

/* ── ability scores ── */
.pg-fate .scores-panel { padding-top: var(--s-5); display: grid; gap: var(--s-3); }
.pg-fate .pb-strip, .pg-fate .ac-strip { margin-bottom: var(--s-2); }
.pg-fate .pb-strip small { display: block; font-size: var(--fs-2xs); }
.pg-fate .score-head, .pg-fate .score-row { display: grid; grid-template-columns: minmax(6.5rem, 1.1fr) minmax(9.5rem, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); }
.pg-fate .score-head { padding: 0 var(--s-4); font-size: var(--fs-2xs); color: var(--fg-muted); }
.pg-fate .score-head > :last-child { text-align: end; }
.pg-fate .score-rows { display: grid; gap: var(--s-2); }
.pg-fate .score-row { padding: var(--s-2) var(--s-4); background: var(--bg); border: 1px solid var(--line); transition: border-color var(--t-ui) var(--ease-stone); }
.pg-fate .score-row:hover { border-color: var(--line-strong); }
.pg-fate .score-row__n { font-size: var(--fs-md); font-weight: 700; color: var(--fg-strong); line-height: 1.3; min-width: 0; }
.pg-fate .score-row__n small { display: block; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; color: var(--fg-muted); letter-spacing: .02em; unicode-bidi: isolate; }
.pg-fate .score-row__c { justify-self: start; }
/* the species' chip and the sub-species' chip, side by side or stacked */
.pg-fate .score-row__bonus { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pg-fate .bonus-chip { --bd: var(--line-glow); --facet: 4px; display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--bd); background: var(--facet-edges); color: var(--accent-text); font-size: var(--fs-2xs); font-weight: 700; clip-path: var(--clip-facet); white-space: nowrap; }
.pg-fate .score-row__res { display: inline-flex; align-items: center; gap: var(--s-3); justify-self: end; }
.pg-fate .score-row__final { font-size: var(--fs-md); font-weight: 700; color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 3.4ch; text-align: center; }
/* the modifier is the number every roll uses: it gets the large type */
.pg-fate .score-row__mod { display: inline-grid; place-items: center; width: 44px; height: 48px; clip-path: var(--clip-hex); background: var(--bg-elev-2); color: var(--fg-strong); font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; line-height: 1; }
.pg-fate .pb-ctl { display: inline-grid; justify-items: center; gap: 2px; }
.pg-fate .stepper { display: inline-flex; align-items: center; gap: 4px; direction: ltr; }
.pg-fate .stepper b { min-width: 2.2ch; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--fg-strong); }
.pg-fate .stepper .btn { width: 44px; min-height: 44px; padding: 0; font-size: 1.25rem; }
.pg-fate .stepper .btn[aria-disabled="true"] { pointer-events: auto; cursor: not-allowed; }
.pg-fate .pb-cost { font-size: var(--fs-2xs); color: var(--fg-muted); white-space: nowrap; }
.pg-fate .pb-cost.is-short { color: var(--danger); }
/* the pool: six values in plain sight, placed on abilities */
.pg-fate .pool-lead { margin: 0; font-size: var(--fs-sm); line-height: 1.8; }
.pg-fate .pool { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
.pg-fate .pool-chip { --bd: var(--line-strong); --facet: 8px; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 72px; padding: 8px 4px; background: var(--bg); border: 1px solid var(--bd); clip-path: var(--clip-facet); color: var(--fg); font: inherit; cursor: pointer; transition: border-color var(--t-fast) var(--ease-stone), background var(--t-fast) var(--ease-stone); }
.pg-fate .pool-chip b { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; line-height: 1; color: var(--fg-strong); }
.pg-fate .pool-chip small { font-size: var(--fs-2xs); color: var(--fg-muted); line-height: 1.2; }
.pg-fate .pool-chip:hover { --bd: var(--line-glow); }
.pg-fate .pool-chip.is-used { background: transparent; border-style: dashed; }
.pg-fate .pool-chip.is-used b { color: var(--fg-muted); }
.pg-fate .pool-chip.is-sel { --bd: var(--emerald); box-shadow: var(--glow-inset); }
.pg-fate .pool-chip__dice { display: flex; gap: 3px; direction: ltr; }
.pg-fate .pool-chip__dice i { width: 18px; height: 18px; display: grid; place-items: center; background: #E9E6DC; color: #0A0A0B; font-style: normal; font-weight: 800; font-size: var(--fs-2xs); line-height: 1; border-radius: 3px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.28); }
.pg-fate .pool-chip__dice i.is-drop { opacity: .45; text-decoration: line-through; background: #8B8B85; }
.pg-fate .pool-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pg-fate .pool-empty { display: grid; justify-items: start; gap: var(--s-3); }
.pg-fate .pool-empty p { margin: 0; }
/* the phone's second tap: "give 14 to…", right under the number just picked */
.pg-fate .give { display: none; }
@media (max-width: 640px) {
  .pg-fate .give { --bd: var(--line-glow); --facet: 8px; display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--bd); background: var(--facet-edges), color-mix(in srgb, var(--emerald) 7%, var(--bg)); clip-path: var(--clip-facet); animation: give-in var(--t-ui) var(--ease-out); }
  .pg-fate .give__h { margin: 0; font-size: var(--fs-sm); color: var(--fg); }
  .pg-fate .give__h b { font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; color: var(--accent-text); }
  .pg-fate .give__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pg-fate .give__b { --bd: var(--line-strong); --facet: 6px; display: grid; justify-items: center; gap: 0; min-height: 48px; padding: 4px 2px; background: var(--facet-edges), var(--bg-elev-2); border: 1px solid var(--bd); color: var(--fg); font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; clip-path: var(--clip-facet); }
  .pg-fate .give__b b { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--fg-muted); font-weight: 800; line-height: 1.2; }
  .pg-fate .give__b.is-here { --bd: var(--emerald); }
  .pg-fate .give__b:active { background: var(--facet-edges), var(--bg-elev); }
}
@keyframes give-in { from { opacity: 0; transform: translateY(-4px); } }
/* the rule for the species' bonuses, above the methods */
.pg-fate .asi-rule { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-5); padding: 0; border: 0; min-width: 0; }
.pg-fate .asi-rule__h { float: none; padding: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--fg-strong); }
.pg-fate .asi-rule__b { display: inline-flex; align-items: center; gap: .3em; }
.pg-fate .asi-rule__b.is-on { background: rgba(47,211,154,.14); color: var(--accent-text); box-shadow: inset 0 -2px 0 var(--accent); }
.pg-fate .asi-rule__b:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.pg-fate .asi-rule__hint { flex: 1 1 100%; margin: 0; font-size: var(--fs-xs); line-height: 1.7; }
/* the flexible +2/+1 on the rows: two small chips per row, one of each lit */
.pg-fate .flex-pick { display: inline-flex; gap: 4px; }
.pg-fate .flex-chip { --bd: var(--line-strong); display: inline-grid; place-items: center; min-width: 40px; min-height: 32px; padding: 0 6px; border: 1px dashed var(--bd); color: var(--fg-muted); font-size: var(--fs-xs); font-weight: 800; cursor: pointer; clip-path: var(--clip-facet); --facet: 4px; transition: border-color var(--t-fast) var(--ease-stone), background var(--t-fast) var(--ease-stone), color var(--t-fast) var(--ease-stone); }
.pg-fate .flex-chip:hover { --bd: var(--line-glow); color: var(--fg); }
.pg-fate .flex-chip.is-on { --bd: var(--emerald); border-style: solid; background: rgba(47,211,154,.14); color: var(--accent-text); }
.pg-fate .flex-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.pg-fate .arr-slot { --bd: var(--line-strong); --facet: 6px; width: 64px; min-height: 48px; display: grid; place-items: center; padding: 0; font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; background: var(--bg-elev-2); border: 1px solid var(--bd); clip-path: var(--clip-facet); color: var(--fg-strong); cursor: pointer; }
.pg-fate .arr-slot.is-empty { background: transparent; border-style: dashed; color: var(--fg-muted); }
.pg-fate .arr-slot.is-sel { --bd: var(--emerald); box-shadow: var(--glow-inset); }
/* The chips, slots and the sub-species base change between a solid and a dashed
   rim, so their chamfer is an overlay rather than a background layer: whole on
   a solid rim, and on a dashed one cut into 3px dashes along the diagonal
   (a 135° mask runs the length of both cuts), so the corner is the same broken
   line as the sides, never a solid tick in a dashed outline. */
.pg-fate :is(.sub-base, .pool-chip, .flex-chip, .arr-slot) { position: relative; }
.pg-fate :is(.sub-base, .pool-chip, .flex-chip, .arr-slot)::after { content: ""; position: absolute; inset: -1px; background: var(--facet-edges); pointer-events: none; }
.pg-fate :is(.sub-base, .pool-chip.is-used, .flex-chip:not(.is-on), .arr-slot.is-empty)::after { -webkit-mask-image: repeating-linear-gradient(135deg, #000 0 3px, transparent 3px 6px); mask-image: repeating-linear-gradient(135deg, #000 0 3px, transparent 3px 6px); }
.pg-fate .arr-slot:focus-visible { outline-offset: -4px; }
/* six sets roll in place, 120 ms apart; the dropped die greys out as each lands */
.pg-fate .pool.is-rolling .pool-chip { animation: pool-in .45s var(--ease-out) both; animation-delay: calc(var(--n) * 120ms); }
.pg-fate .pool.is-rolling .pool-chip__dice i { animation: die-tumble .45s var(--ease-out) both; animation-delay: calc(var(--n) * 120ms + var(--d) * 30ms); }
.pg-fate .pool.is-rolling .pool-chip__dice i.is-drop { animation: die-tumble .45s var(--ease-out) both, die-drop .25s var(--ease-out) forwards; animation-delay: calc(var(--n) * 120ms + var(--d) * 30ms), calc(var(--n) * 120ms + 450ms); }
.pg-fate .pool.is-rolling .pool-chip b { animation: total-in .25s var(--ease-out) both; animation-delay: calc(var(--n) * 120ms + 400ms); }
@keyframes pool-in { from { border-color: var(--line-glow); } }
@keyframes die-tumble { 0% { transform: translateY(-14px) rotate(-200deg) scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes die-drop { from { opacity: 1; } to { opacity: .45; } }
@keyframes total-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.pg-fate .score-row.is-swapped :is(.arr-slot, .score-row__mod) { animation: slot-pop .2s var(--ease-out); }
@keyframes slot-pop { from { transform: scale(.82); } to { transform: none; } }
@media (max-width: 640px) {
  .pg-fate .score-head { display: none; }
  /* still one row per ability: name and bonus stacked in an 88px column */
  .pg-fate .score-row { grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "n c res" "b c res"; gap: 2px var(--s-2); padding: 6px var(--s-3); }
  .pg-fate .score-row__n { grid-area: n; font-size: var(--fs-sm); }
  .pg-fate .score-row__bonus { grid-area: b; }
  .pg-fate .score-row__bonus:empty { display: none; }
  .pg-fate .score-row__c { grid-area: c; justify-self: center; }
  .pg-fate .score-row__res { grid-area: res; gap: var(--s-2); }
  .pg-fate .score-row__final { font-size: var(--fs-sm); min-width: 0; }
  /* a sub-species' name is long for the 88px column: it wraps rather than spilling out */
  .pg-fate .bonus-chip { display: inline-block; padding: 1px 6px; white-space: normal; line-height: 1.5; }
  .pg-fate .bonus-chip .sgn { white-space: nowrap; }
  .pg-fate .pool { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── gear & skills ── */
.pg-fate .gear-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.pg-fate .gear-grid .hint { line-height: 1.6; }
/* The class's starting kit: one line says what «پیشنهاد کلاس» means, and each
   field still holding the kit wears the mark beside its label. A mark, not a
   control, so it is a quiet outlined tag, never a 40px chip that asks to be pressed. */
.pg-fate .kit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4); border: 1px dashed var(--line-glow); background: rgba(47,211,154,.05); }
:root[data-theme="light"] .pg-fate .kit-bar { background: rgba(15,107,79,.05); }
.pg-fate .kit-bar__t { flex: 1 1 18rem; margin: 0; font-size: var(--fs-sm); line-height: 1.8; color: var(--fg); }
.pg-fate .kit-chip { display: inline-block; margin-inline-start: 6px; padding: 0 7px; vertical-align: 1px; font-size: var(--fs-2xs); font-weight: 700; line-height: 1.7; color: var(--accent-text); white-space: nowrap; border: 1px solid var(--line-glow); border-radius: var(--r-1); background: rgba(47,211,154,.08); }
:root[data-theme="light"] .pg-fate .kit-chip { background: rgba(15,107,79,.07); }
.pg-fate .kit-bar__t .kit-chip { margin-inline-start: 0; }
/* Every gear label is a row of one height, chip or no chip. The chip (22px
   with its border) stood taller than the label's 21px line, so a field still
   wearing it set its select 2px lower than one the player had changed, and
   the selects stepped out of line the moment a choice was made. Centred in a
   24px row, the label's text keeps one baseline whether the chip comes or goes. */
.pg-fate .gear-grid .field > :is(label, .label):first-child { display: flex; align-items: center; min-block-size: 24px; }
/* what the gear does for this character: the to-hit it gives, and what untrained gear costs */
.pg-fate .gear-hit { display: block; margin-top: 2px; color: var(--fg); font-weight: 600; }
.pg-fate .gear-note { display: block; margin-top: 2px; }
.pg-fate .gear-warn { display: block; margin-top: 6px; padding-inline-start: 10px; border-inline-start: 2px solid var(--review); color: var(--review); font-weight: 600; }
.pg-fate .ac-strip small { font-size: var(--fs-xs); font-weight: 500; }
/* "not proficient", beside the weapon on both sheets */
.pg-fate .noprof-tag { display: inline-block; padding: 0 6px; font-size: var(--fs-2xs); font-weight: 700; line-height: 1.7; color: var(--review); white-space: nowrap; border: 1px solid currentColor; border-radius: var(--r-1); vertical-align: 1px; }
/* On a phone the attacks table has no room for the tag beside the weapon: it
   already fell under the name, so it is set there on purpose, a line of its own.
   A bilingual tag stacks its gloss the way the cells do: on one unbreakable line
   «بدون مهارت not proficient» was the widest thing in the weapon column and
   pushed the table past the screen. */
@media screen and (max-width: 37.5em) {
  .pg-fate .tbl .noprof-tag { display: block; width: fit-content; margin-top: 2px; }
  .pg-fate .tbl .noprof-tag .t-gloss { display: block; }
}
.pg-fate .fs-warn { margin: 6px 0 0; padding-inline-start: 8px; border-inline-start: 2px solid var(--review); font-size: var(--fs-xs); line-height: 1.7; color: var(--review); }
.pg-fate .fs-warn b { color: inherit; }
.pg-fate .fs-note { margin: 4px 0 0; font-size: var(--fs-xs); line-height: 1.7; }
.pg-fate .skill-count { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.pg-fate .skill-grid { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pg-fate .skill-chip { cursor: pointer; }
.pg-fate .skill-chip .ico { width: 16px; height: 16px; }
.pg-fate .skill-chip small { color: var(--fg-muted); font-size: var(--fs-2xs); }
.pg-fate .skill-chip.is-locked { cursor: default; }
.pg-fate .skill-chip.is-disabled { opacity: .5; cursor: not-allowed; }
.pg-fate .skill-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── spells ── */
.pg-fate .spell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--s-3); }
.pg-fate .spell-mini { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-3); text-align: start; cursor: pointer; --facet: 8px; color: var(--fg); font: inherit; }
.pg-fate .spell-mini__art { width: 56px; height: 56px; clip-path: var(--clip-hex); overflow: hidden; }
.pg-fate .spell-mini__t { display: grid; gap: 2px; font-size: var(--fs-xs); line-height: 1.5; min-width: 0; }
.pg-fate .spell-mini__t b { font-size: var(--fs-md); color: var(--fg-strong); }
.pg-fate .opt__alt { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; color: var(--fg-muted); letter-spacing: .02em; text-align: start; }
.pg-fate .spell-mini.is-sel { --bd: var(--emerald); box-shadow: inset 0 0 0 1px var(--emerald), var(--glow-inset); }
.pg-fate .spell-mini[disabled] { opacity: .45; cursor: not-allowed; }
.pg-fate .nospell { margin-top: var(--s-4); }
.pg-fate .spell-how { line-height: 1.8; }
.pg-fate .spell-count { font-size: var(--fs-sm); font-weight: 700; color: var(--fg-muted); white-space: nowrap; }
.pg-fate .spell-count.accent { color: var(--accent-text); }
.pg-fate .spell-lvl { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-sm); color: var(--fg-muted); font-weight: 700; }
/* the subclass under the class cards: named early, chosen at its level */
.pg-fate .sub-later { display: flex; gap: var(--s-2); align-items: center; max-width: none; margin: var(--s-5) 0 0; padding: var(--s-3) var(--s-4); border: 1px dashed var(--line-strong); font-size: var(--fs-sm); line-height: 1.7; color: var(--fg-muted); }
.pg-fate .sub-later__rune { color: var(--rune-lit); flex: none; }
.pg-fate .sub-later__rune svg { width: 10.67px; height: 16px; }
.pg-fate .sub-lead { margin-top: 0; }

/* ── persona ── */
.pg-fate .persona-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-block: var(--s-4); }
.pg-fate .field__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.pg-fate .textarea--sm { min-height: 80px; }
.pg-fate .input--name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); }
@media (max-width: 560px) { .pg-fate .persona-grid { grid-template-columns: 1fr; } }

/* ── portrait ── */
/* a bust fills whatever holds it; the script asks it to slice, so it is cut to the box, never letterboxed */
.pg-fate .hx-portrait { display: block; width: 100%; height: 100%; }
.pg-fate .portrait-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s-6); align-items: start; }
.pg-fate .portrait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-3); }
.pg-fate .portrait-opt { display: grid; gap: 6px; justify-items: center; cursor: pointer; text-align: center; }
/* The arch's roof is set by the frame's width, not its height, so it rises at
   the mark's 32° whatever the card's proportions (a percentage roof tilted from
   14° to 30° with the aspect ratio). tan 32° × ½ width = 31.25% of the width. */
.pg-fate .portrait-opt { container-type: inline-size; }
.pg-fate .portrait-opt .arch-frame { width: 100%; background: linear-gradient(180deg, var(--line-strong), transparent 80%); transition: background var(--t-ui) var(--ease-stone), filter var(--t-ui) var(--ease-stone); display: block; }
.pg-fate .portrait-opt .arch-frame, .pg-fate .portrait-opt .arch-frame > * { clip-path: polygon(50% 0, 100% 31.25cqw, 100% 100%, 0 100%, 0 31.25cqw); }
.pg-fate .portrait-opt__img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg); }
.pg-fate .portrait-opt__name { font-size: var(--fs-2xs); font-weight: 600; color: var(--fg-muted); }
.pg-fate .portrait-opt:hover .arch-frame { background: linear-gradient(180deg, var(--emerald-soft), var(--jade) 70%, transparent); }
.pg-fate .portrait-opt.is-sel .arch-frame { background: linear-gradient(180deg, var(--emerald), var(--jade) 70%, transparent); filter: drop-shadow(0 0 10px rgba(47,211,154,.5)); }
.pg-fate .portrait-opt.is-sel .portrait-opt__name { color: var(--accent-text); }
.pg-fate .portrait-opt:has(input:focus-visible) .arch-frame, .pg-fate .swatch-opt:has(input:focus-visible) .swatch-ring { outline: 2px solid var(--accent); outline-offset: 3px; }
.pg-fate .swatches { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.pg-fate .swatch-opt { display: grid; justify-items: center; gap: 6px; cursor: pointer; }
.pg-fate .swatch-ring { display: block; padding: 3px; background: transparent; clip-path: var(--clip-hex); transition: background var(--t-ui) var(--ease-stone); }
.pg-fate .swatch-opt.is-sel .swatch-ring { background: var(--fg-strong); }
.pg-fate .swatch { display: block; width: 34px; height: 34px; clip-path: var(--clip-hex); background: var(--c); opacity: .75; transition: opacity var(--t-ui) var(--ease-stone); }
.pg-fate .swatch-opt:hover .swatch, .pg-fate .swatch-opt.is-sel .swatch { opacity: 1; }
.pg-fate .swatch-opt__name { font-size: var(--fs-2xs); color: var(--fg-muted); }
.pg-fate .swatch-opt.is-sel .swatch-opt__name { color: var(--fg-strong); font-weight: 700; }
.pg-fate .portrait-preview { display: grid; justify-items: center; gap: var(--s-2); position: sticky; top: 100px; }
.pg-fate .portrait-preview p { margin: 0; font-size: var(--fs-2xs); }
@media (max-width: 760px) { .pg-fate .portrait-layout { grid-template-columns: 1fr; } .pg-fate .portrait-preview { position: static; } }

/* ── live sheet ── */
.pg-fate .sheet { --bd: var(--line-strong); position: relative; display: grid; gap: var(--s-4); background: var(--stone-grad); border: 1px solid var(--bd); clip-path: var(--clip-facet); padding: var(--s-5); box-shadow: var(--shadow-stone); }
.pg-fate .sheet__top { display: grid; gap: var(--s-3); }
.pg-fate .sheet__head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.pg-fate .sheet__portrait { width: 56px; height: 56px; clip-path: var(--clip-hex); overflow: hidden; background: var(--bg); }
.pg-fate .sheet__name { display: block; font-family: var(--font-display); font-weight: 800; color: var(--fg-strong); font-size: var(--fs-lg); line-height: 1.3; overflow-wrap: anywhere; }
.pg-fate .sheet__sub { display: block; font-size: var(--fs-xs); }
.pg-fate .vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(3.6rem, 100%), 1fr)); gap: 6px; }
.pg-fate .vital { --bd: var(--line); --facet: 6px; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 8px 2px; background: var(--facet-edges), var(--bg); border: 1px solid var(--bd); clip-path: var(--clip-facet); min-width: 0; }
/* one size for every value in the row: the old `.vital span` also caught the
   spans inside the values, so Initiative and Hit Dice shrank to label size */
.pg-fate .vital > b { font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; white-space: nowrap; color: var(--fg-strong); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 -1px 0 rgba(0,0,0,.8); }
.pg-fate .vital > b * { font-size: inherit; font-weight: inherit; line-height: inherit; }
.pg-fate .vital > b .dice { font-size: 1em; font-weight: 700; }
.pg-fate .vital > b .unit { font-size: .6em; font-weight: 700; color: var(--fg-muted); }
.pg-fate .vital > span { font-size: var(--fs-2xs); color: var(--fg-muted); white-space: nowrap; text-align: center; line-height: 1.3; }
.pg-fate .abils { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(3rem, 100%), 1fr)); gap: 4px; }
.pg-fate .abil { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; background: var(--bg-elev-2); border: 1px solid var(--line); min-width: 0; }
.pg-fate .abil__n { font-size: var(--fs-2xs); color: var(--fg-muted); }
.pg-fate .abil__m { font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; color: var(--fg-strong); line-height: 1.1; }
.pg-fate .abil__s { font-size: var(--fs-2xs); color: var(--fg-muted); font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 6px; border-radius: 999px; background: var(--bg); }
.pg-fate .sheet__cols { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--s-4); }
/* The live sheet answers to its own width in rem, so it follows the reader's
   text size where a media query (which reads the browser default) would not:
   with large text the two lists stack and the stat rows wrap, rather than
   leaving «Constitution» a column too narrow to hold it. */
.pg-fate__sheet { container-type: inline-size; }
@container (max-width: 20rem) {
  .pg-fate .sheet__cols { grid-template-columns: minmax(0, 1fr); }
}
.pg-fate .sheet__cols :is(h3,h4) { font-size: var(--fs-sm); color: var(--accent-text); margin: 0 0 var(--s-half); border-bottom: 1px solid var(--line-glow); padding-bottom: 4px; }
.pg-fate .sheet__none { margin: 4px 0 0; font-size: var(--fs-2xs); }
.pg-fate .sheet__all summary { cursor: pointer; font-size: var(--fs-2xs); color: var(--accent-text); min-height: 32px; display: flex; align-items: center; }
.pg-fate .sheet__all[open] summary { margin-bottom: var(--s-2); }
.pg-fate .plist { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; font-size: var(--fs-xs); }
.pg-fate .plist li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--line); color: var(--fg-muted); }
/* hollow ring = not proficient, filled hex = proficient (plus an sr-only word) */
.pg-fate .plist i { width: 9px; height: 9px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--ornament); }
.pg-fate .plist li.is-prof i { border-radius: 0; clip-path: var(--clip-hex); background: var(--accent); box-shadow: none; }
.pg-fate .plist li.is-prof span { color: var(--fg-strong); }
.pg-fate .plist small { color: var(--fg-muted); }
.pg-fate .plist b { font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 700; }
.pg-fate .sheet__passive { margin: 0; font-size: var(--fs-xs); line-height: 1.7; }
@media (min-width: 62.6em) {
  /* the numbers stay pinned while the rest of a long sheet scrolls under them */
  .pg-fate .sheet__top { position: sticky; top: calc(-1 * var(--s-5)); z-index: 2; margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; padding: var(--s-5) var(--s-5) var(--s-2); background: var(--stone-grad); }
}

/* ── phones and tablets: one footer bar, the live sheet a drawer above it ──
   The footer (back · the step's requirement over the sheet's three numbers ·
   next) is the only strip laid over the step: 60px above the bottom nav. It
   used to be a two-row footer, a 48px sheet bar and the nav, 235px of an 839px
   screen, and a control focused under them could not be seen. The bar is fixed
   rather than sticky so the drawer always opens right above it, and the page
   tells the browser how tall it is (scroll-padding), so focus scrolls clear of it. */
@media (max-width: 62.5em) {
  /* set on the root, so the page's scroll padding can read them too */
  html:has(.pg-fate) { --bar-b: 0px; --bar-h: 60px; }
  .pg-fate { --nav-b: var(--bar-b); --nav-h: var(--bar-h); }
  html:has(.pg-fate--wizard) { scroll-padding-bottom: calc(var(--bar-b) + var(--bar-h) + var(--s-4)); }
  .pg-fate__body { grid-template-columns: minmax(0, 1fr); }
  /* the page, footer included, scrolls clear of the fixed bar */
  body:has(.pg-fate--wizard) { padding-bottom: calc(var(--bar-b) + var(--bar-h) + var(--s-5)); }
  /* a clip on the step would clip the fixed bar inside it */
  .pg-fate__step { clip-path: none; padding-bottom: var(--s-5); }
  /* no cut, so no drawn chamfer (on the step or the sheet in its drawer) */
  .pg-fate__step::after, .pg-fate .sheet::after { content: none; }
  .pg-fate__step.is-shake { animation: none; }
  .pg-fate__step.is-shake .step-req { animation: fate-shake .2s var(--ease-press); }
  .pg-fate .step-nav { position: fixed; inset-inline: 0; bottom: var(--bar-b); z-index: calc(var(--z-nav) - 1); margin: 0; min-height: var(--bar-h); padding: 8px var(--gutter); grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-2); box-shadow: 0 -10px 24px -12px rgba(0,0,0,.55); }
  .pg-fate .step-nav > .btn { min-height: 44px; }
  .pg-fate .step-mid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: 1px; min-width: 0; min-height: 44px; }
  .pg-fate .step-mid .step-req { font-size: var(--fs-xs); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* The middle opens the sheet: the whole middle is its target, its numbers
     the second line. The target is the ::before, which fills the middle and
     no more (it used to reach 4px below it, under the d20), and a tap anywhere
     in it lands on the toggle itself, never on a part of its label. The toggle
     is no wider than the middle, so none of it runs under next or back. */
  .pg-fate .sheet-toggle { position: static; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0; background: none; border: 0; color: var(--fg-muted); font: inherit; font-size: var(--fs-2xs); line-height: 1.4; white-space: nowrap; cursor: pointer; }
  .pg-fate .sheet-toggle::before { content: ""; position: absolute; inset: 0; }
  .pg-fate .sheet-toggle > * { pointer-events: none; }
  .pg-fate .sheet-toggle:focus-visible { outline: none; }
  .pg-fate .step-mid:has(.sheet-toggle:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* the lozenges sit closer than in running text; a number the middle has no
     room for steps out whole (fitPeek in fate.js) and is still read out */
  .pg-fate .sheet-toggle__peek { display: inline-flex; align-items: baseline; min-width: 0; overflow: hidden; }
  .pg-fate .sheet-toggle__peek .sep { margin-inline: 5px; }
  .pg-fate .sheet-toggle__st.is-cut { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pg-fate .sheet-toggle__peek b { color: var(--fg-strong); font-weight: 800; }
  .pg-fate .sheet-toggle__chev { flex: none; width: 7px; height: 7px; border-left: 2px solid var(--accent-text); border-top: 2px solid var(--accent-text); transform: translateY(2px) rotate(45deg); transition: transform var(--t-ui) var(--ease-stone); }
  .pg-fate .sheet-toggle[aria-expanded="true"] .sheet-toggle__chev { transform: translateY(-2px) rotate(225deg); }
  /* the drawer: shut, it is not there at all (nothing in it can take focus) */
  .pg-fate__sheet { position: fixed; inset-inline: 0; top: auto; bottom: calc(var(--bar-b) + var(--bar-h)); z-index: calc(var(--z-nav) - 2); max-height: 0; overflow: hidden; visibility: hidden; background: var(--bg-elev); border-top: 1px solid var(--line-glow); box-shadow: 0 -20px 40px rgba(0,0,0,.5); -webkit-mask-image: none; mask-image: none; transition: max-height var(--t-slow) var(--ease-stone), visibility 0s linear var(--t-slow); }
  .pg-fate__sheet.is-open { max-height: calc(100dvh - var(--hdr-h) - var(--bar-b) - var(--bar-h) - var(--s-4)); overflow: auto; overscroll-behavior: contain; visibility: visible; transition: max-height var(--t-slow) var(--ease-out), visibility 0s linear; }
  .pg-fate .sheet-body { padding: var(--s-4) var(--gutter) var(--s-5); }
  .pg-fate .sheet { clip-path: none; box-shadow: none; border: 0; background: none; padding: 0; }
  /* the class-change warning rides just above the bar */
  .pg-fate .cls-warn { bottom: calc(var(--bar-b) + var(--bar-h) + var(--s-2)); }
}
/* Above the bottom nav. Where the nav has the d20 (staff, or everyone once the
   dice open), it is raised 16px out of the nav, and its box — the tap target,
   not only the hex — rises with it, right under the middle of this bar: the
   sheet toggle's lower edge was under the d20, and a tap there opened the dice
   tray. The bar keeps its last 16px for the d20, with a gap of --s-2 above it
   like the one at the bar's top; the hex sits in that band. */
@media (max-width: 56.25em) {
  html:has(.pg-fate) { --bar-b: calc(var(--bnav-h) + env(safe-area-inset-bottom)); }
  html:has(.pg-fate):has(#bnav-dice) { --bar-h: calc(60px + var(--bnav-peak, 16px)); }
  html:has(#bnav-dice) .pg-fate .step-nav { padding-bottom: calc(var(--s-2) + var(--bnav-peak, 16px)); }
}
@media (max-width: 640px) {
  .pg-fate__step { padding: var(--s-4) var(--s-4) var(--s-5); }
  /* back is an icon here; next keeps its words, it is the step's one action */
  .pg-fate .step-nav__prev { width: 44px; padding: 0; justify-content: center; }
  .pg-fate .step-nav__prev .step-nav__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pg-fate .step-nav :is([data-act="next"], [data-act="finish"]) { padding-inline: var(--s-3); }
  .pg-fate .step-head { flex-direction: column-reverse; gap: var(--s-2); }
}

/* ── hero card ── */
.pg-fate .hero-card { --card-w: 260px; --accent-c: var(--emerald); --bd: var(--line-strong); width: var(--card-w); max-width: 100%; display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-3) var(--s-4); background: var(--stone-grad); border: 1px solid var(--bd); clip-path: var(--clip-facet); box-shadow: var(--shadow-stone); position: relative; }
/* Both frames close at their cuts. The outer diagonal is an overlay above the
   gate and its glow; the inner frame draws its own in its emerald-tinted rim. */
.pg-fate .hero-card::after { content: ""; position: absolute; inset: -1px; z-index: 3; background: var(--facet-edges); pointer-events: none; }
.pg-fate .hero-card::before { --bd: color-mix(in srgb, var(--accent-c) 30%, transparent); --facet: 10px; content: ""; position: absolute; inset: 6px; border: 1px solid var(--bd); background: var(--facet-edges); pointer-events: none; clip-path: var(--clip-facet); }
.pg-fate .hero-card__gate { position: relative; width: 100%; }
.pg-fate .hero-card__gate .hx-mark { width: 100%; height: auto; position: relative; z-index: 1; display: block; }
.pg-fate .hero-card__gate .hx-mark .crack { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 1; animation: none; }
/* the frame and its cracks take the character's colour; the cracks step back so the face leads */
.pg-fate .hero-card__gate .hx-mark :is(.crack, .mark-frame, .mark-frame-halo) { stroke: var(--accent-c); }
.pg-fate .hero-card__gate .hx-mark .mark-cracks { opacity: .5; }
.pg-fate .hero-card__portrait { position: absolute; left: 27.3%; top: 23.2%; width: 44.7%; height: 58.8%; z-index: 2; clip-path: polygon(50% 0, 100% 22%, 100% 76%, 83% 100%, 17% 100%, 0 76%, 0 22%); overflow: hidden; background: var(--bg); }
.pg-fate .hero-card__portrait::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent-c) 28%, transparent), transparent 65%); pointer-events: none; }
.pg-fate .hero-card__text { display: grid; justify-items: center; gap: 4px; text-align: center; width: 100%; min-width: 0; }
.pg-fate .hero-card__name { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; line-height: 1.25; color: var(--fg-strong); text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 -1px 0 rgba(0,0,0,.8); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
/* measured unclamped while fate.js (fitHeroNames) cuts a long name to its three lines */
.pg-fate .hero-card__name.is-fitting { display: block; -webkit-line-clamp: unset; }
/* A fitted name is three lines at most by construction, so it drops the clamp
   and its clip. Estedad Black's highest marks rise above the 1.25 line box,
   and the clip cut them at the box: «ف»'s diamond dot came out a flat dash and
   «آ» lost its madda's crest («فریدون», «آناهیتا»). The clamp stays only where
   fate.js cannot fit (no ResizeObserver). */
.pg-fate .hero-card__name.is-fit { display: block; -webkit-line-clamp: unset; overflow: visible; }
.pg-fate .hero-card__sub { font-size: var(--fs-xs); color: var(--fg-muted); }
.pg-fate .hero-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin-top: 6px; }
.pg-fate .hero-card__stats > span { --bd: var(--line); --facet: 6px; display: grid; justify-items: center; gap: 1px; padding: 6px 2px; background: var(--facet-edges), var(--bg); border: 1px solid var(--bd); clip-path: var(--clip-facet); }
.pg-fate .hero-card__stats b { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-lg); color: var(--accent-c); line-height: 1; }
.pg-fate .hero-card__stats i { font-style: normal; font-size: var(--fs-2xs); color: var(--fg-muted); }
.pg-fate .hero-card__brand { color: var(--fg-faint); opacity: .6; margin-top: 2px; }
/* the card is a dark artefact in both themes — the canvas export draws it dark too */
/* and it keeps the dark stone's shading: Frost's white 1px top highlight was a
   bright rule across the dark card that stopped short at the cut */
:root[data-theme="light"] .pg-fate .hero-card { --bd: rgba(237,239,234,.16); background: linear-gradient(160deg, #26282B 0%, #1A1B1D 45%, #131416 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -34px 52px -34px rgba(0,0,0,.88), inset 0 -1px 0 rgba(0,0,0,.55); }
:root[data-theme="light"] .pg-fate .hero-card__name { color: #EDEFEA; text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 -1px 0 rgba(0,0,0,.8); }
:root[data-theme="light"] .pg-fate .hero-card__sub, :root[data-theme="light"] .pg-fate .hero-card__stats i { color: #9EA39C; }
:root[data-theme="light"] .pg-fate .hero-card__stats > span { --bd: rgba(237,239,234,.08); background: var(--facet-edges), #0A0A0B; }
:root[data-theme="light"] .pg-fate .hero-card__brand { color: #6A6F69; }
/* the export dialog: the whole card in view, and one tap saves it */
.card-out { display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.card-out h2 { margin: 0; }
.card-preview { display: block; width: auto; height: auto; max-width: 100%; max-height: min(62vh, 560px); border: 1px solid var(--line-glow); box-shadow: var(--glow); }
.card-out__actions { justify-content: center; }
.card-out .ico { width: 20px; height: 20px; }

/* ── gallery ── */
.pg-fate .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15.625rem, 100%), 1fr)); gap: var(--s-6); }
.pg-fate .gallery__item { display: grid; gap: var(--s-3); justify-items: center; align-content: start; min-width: 0; }
.pg-fate .gallery__card { display: block; max-width: 100%; color: inherit; text-decoration: none; transition: transform var(--t-ui) var(--ease-stone); }
.pg-fate .gallery__card:hover { transform: translateY(-3px); }
/* at rest the gate is dimmed and only the face and numbers carry colour; it lights on hover */
.pg-fate .gallery .hero-card__gate .hx-mark { filter: brightness(.6) saturate(.8); transition: filter var(--t-ui) var(--ease-stone); }
.pg-fate .gallery__item:hover .hero-card__gate .hx-mark, .pg-fate .gallery__item:focus-within .hero-card__gate .hx-mark { filter: none; }
.pg-fate .gallery__act { justify-content: center; }
/* overflow menus */
.pg-fate .fmenu { position: relative; display: inline-block; }
.pg-fate .fmenu > summary { list-style: none; cursor: pointer; }
.pg-fate .fmenu > summary::-webkit-details-marker { display: none; }
.pg-fate .fmenu__btn { font-size: 1.25rem; font-weight: 900; letter-spacing: .05em; }
.pg-fate .fmenu__btn.btn--icon { width: 44px; min-height: 40px; }
.pg-fate .fmenu__list { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 20; min-width: 200px; display: grid; padding: 6px; background: var(--bg-elev); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.pg-fate .fmenu__item { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 44px; padding: 0 var(--s-3); background: none; border: 0; color: var(--fg); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-align: start; text-decoration: none; cursor: pointer; white-space: nowrap; }
.pg-fate .fmenu__item:hover, .pg-fate .fmenu__item:focus-visible { background: var(--bg-elev-2); color: var(--fg-strong); text-decoration: none; }
.pg-fate .fmenu__item .ico { width: 20px; height: 20px; }
.pg-fate .fmenu__item--danger { color: var(--danger); }
.pg-fate .fmenu__item--danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
/* a wall of cards needs a way in */
.pg-fate .fate-tools { --bd: var(--line); --facet: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); padding: var(--s-3); background: var(--facet-edges), var(--bg-elev); border: 1px solid var(--bd); clip-path: var(--clip-facet); }
.pg-fate .fate-tools__q { position: relative; flex: 1 1 220px; display: flex; align-items: center; }
.pg-fate .fate-tools__q .ico { position: absolute; inset-inline-start: 12px; width: 20px; height: 20px; color: var(--fg-muted); pointer-events: none; }
.pg-fate .fate-tools__q .input { width: 100%; padding-inline-start: 40px; }
.pg-fate .fate-tools .select { min-width: 9rem; }
.pg-fate .fate-tools__view { display: inline-flex; gap: 4px; }
.pg-fate .fate-tools__view .btn[aria-pressed="true"] { --bd: var(--line-glow); color: var(--accent-text); box-shadow: var(--glow-inset-soft); }
.pg-fate .fate-tools__count { margin: 0; font-size: var(--fs-sm); margin-inline-start: auto; }
.pg-fate .fate-none { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-7) var(--s-4); text-align: center; border: 1px dashed var(--line-strong); }
.pg-fate .fate-none p { margin: 0; color: var(--fg-muted); }
.pg-fate .fate-hall__none { margin: 0; }
/* the dense view: 64px rows */
.pg-fate .gallery-rows { display: grid; gap: var(--s-2); }
.pg-fate .gallery__row { --accent-c: var(--emerald); display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3); min-height: 64px; padding: 8px var(--s-3); background: var(--bg-elev); border: 1px solid var(--line); border-inline-start: 3px solid var(--accent-c); }
.pg-fate .gallery__row:hover { border-color: var(--line-strong); border-inline-start-color: var(--accent-c); }
.pg-fate .gallery__row-art { display: block; width: 48px; height: 48px; clip-path: var(--clip-hex); overflow: hidden; background: var(--bg); }
.pg-fate .gallery__row-art svg { width: 100%; height: 100%; display: block; }
.pg-fate .gallery__row-t { display: grid; gap: 2px; min-width: 0; }
.pg-fate .gallery__row-t b { font-family: var(--font-display); font-weight: 800; color: var(--fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-fate .gallery__row-t small { font-size: var(--fs-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-fate .gallery__row-t .fate-badge { justify-self: start; margin: 2px 0 0; }
.pg-fate .gallery__row-stats { display: inline-flex; gap: var(--s-3); font-size: var(--fs-2xs); color: var(--fg-muted); white-space: nowrap; }
.pg-fate .gallery__row-stats b { font-family: var(--font-display); font-size: var(--fs-md); color: var(--accent-c); }
.pg-fate .gallery__row-act { display: inline-flex; gap: var(--s-2); align-items: center; }
.pg-fate .gallery__row.is-niflheim { filter: saturate(.4); }
@media (max-width: 560px) {
  .pg-fate .gallery__row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .pg-fate .gallery__row-stats { display: none; }
  .pg-fate .gallery__row-act .btn:not(.fmenu__btn) { display: none; }
}
/* first visit: one call to action and a picture of the empty loom */
.pg-fate .fate-first { --bd: var(--line); display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-7) var(--s-5); text-align: center; background: var(--facet-edges), var(--stone-grad); border: 1px solid var(--bd); clip-path: var(--clip-facet); box-shadow: var(--shadow-stone); }
.pg-fate .fate-first h2 { margin: var(--s-2) 0 0; font-size: var(--fs-xl); }
.pg-fate .fate-first p { margin: 0; max-width: 46ch; }
.pg-fate .fate-first__meta { font-size: var(--fs-sm); color: var(--fg-muted); }
.pg-fate .fate-first__loom { width: min(100%, 400px); height: auto; }
.pg-fate .fl-hex { fill: var(--bg); stroke: var(--line-glow); stroke-width: 1.2; }
/* the drawn rune: a 2.5u chisel stroke at .7 scale, like the stepper's */
.pg-fate .fl-rune { fill: none; stroke: var(--rune-lit); stroke-width: 2.5; stroke-linecap: butt; stroke-linejoin: miter; }
.pg-fate .fl-rune-t { font-family: var(--font-rune); font-size: 15px; fill: var(--rune-lit); }
.pg-fate .fl-thread { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 4; }
.pg-fate .fl-beam { stroke: var(--ornament); stroke-width: 2; stroke-linecap: round; }

/* ── sheet page ── */
.pg-fate .sheet-hero { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-7); align-items: center; margin-bottom: var(--s-6); }
.pg-fate .sheet-hero__text { min-width: 0; }
.pg-fate .sheet-hero__text h1 { font-size: var(--fs-page); overflow-wrap: anywhere; }
.pg-fate .sheet-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-block: var(--s-3); }
.pg-fate .sheet-state__vis { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; color: var(--fg-strong); }
.pg-fate .sheet-state__vis small { font-weight: 500; font-size: var(--fs-2xs); }
.pg-fate .sheet-state__fate { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-sm); }
.pg-fate .sheet-actions { margin-top: var(--s-4); align-items: center; }
/* the sheet's toolbar: language as one compact segmented control, details behind the gear */
.pg-fate .sheet-tools { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.pg-fate .sheet-tools__h { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted); font-weight: 700; }
.pg-fate .seg { --bd: var(--line-strong); --facet: 6px; position: relative; display: inline-flex; flex-wrap: wrap; border: 1px solid var(--bd); clip-path: var(--clip-facet); background: var(--bg-elev); }
/* the chosen segment's tint runs into the cut corner, so the diagonal lies over it */
.pg-fate .seg::after { content: ""; position: absolute; inset: -1px; z-index: 1; background: var(--facet-edges); pointer-events: none; }
.pg-fate .seg__b { position: relative; min-height: 40px; padding: 0 var(--s-3); background: none; border: 0; color: var(--fg-muted); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
/* The dividers stand clear of the segments' own 4px cuts: a hairline down the
   middle two-thirds of each seam rather than a border, which the cut clipped
   short at one end. None beside the chosen segment, whose tint already parts it. */
.pg-fate .seg__b + .seg__b::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 22%; width: 1px; background: var(--line-strong); pointer-events: none; }
.pg-fate .seg__b:is([aria-checked="true"], .is-on)::before, .pg-fate .seg__b:is([aria-checked="true"], .is-on) + .seg__b::before { content: none; }
.pg-fate .seg__b:hover { color: var(--fg-strong); }
.pg-fate .seg__b[aria-checked="true"] { background: rgba(47,211,154,.14); color: var(--accent-text); box-shadow: inset 0 -2px 0 var(--accent); }
.pg-fate .sheet-lang__custom > summary { --bd: var(--line-strong); --facet: 6px; list-style: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--bd); background: var(--facet-edges); clip-path: var(--clip-facet); color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.pg-fate .sheet-lang__custom > summary::-webkit-details-marker { display: none; }
.pg-fate .sheet-lang__custom.is-custom > summary { --bd: var(--line-glow); color: var(--accent-text); }
.pg-fate .sheet-tools__gear { font-size: 1.1em; line-height: 1; }
.pg-fate .sheet-lang__pop { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 10; width: min(560px, 100%); padding: var(--s-4); display: grid; gap: var(--s-3); background: var(--bg-elev); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.pg-fate .sheet-lang__pop > p { margin: 0; font-size: var(--fs-sm); }
.pg-fate .sheet-lang__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s-3); }
.pg-fate .sheet-lang__grid .field { display: grid; gap: var(--s-1); font-size: var(--fs-sm); color: var(--fg-muted); }
/* the full sheet */
.pg-fate .fullsheet { --bd: var(--line-strong); display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "side main"; gap: var(--s-7); background: var(--facet-edges), var(--stone-grad); border: 1px solid var(--bd); clip-path: var(--clip-facet); padding: var(--s-6); box-shadow: var(--shadow-stone); position: relative; }
.pg-fate .fullsheet::before { content: "ᚠ ᚢ ᚦ ᚨ ᚱ ᚲ"; position: absolute; top: 8px; inset-inline-end: var(--s-5); font-family: var(--font-rune); color: var(--ornament); opacity: .5; font-size: var(--fs-2xs); letter-spacing: .4em; }
.pg-fate .fullsheet__side { grid-area: side; min-width: 0; }
.pg-fate .fullsheet__main { grid-area: main; min-width: 0; }
.pg-fate .fullsheet :is(h2,h3) { font-size: var(--fs-md); color: var(--accent-text); border-bottom: 1px solid var(--line-glow); padding-bottom: 4px; margin: var(--s-5) 0 var(--s-3); }
.pg-fate .fullsheet__side :is(h2,h3) { font-size: var(--fs-sm); margin: var(--s-4) 0 var(--s-half); }
/* fact lines may span; running prose keeps its measure */
.pg-fate .fullsheet__main p:not(.prose) { max-width: none; }
/* print-only parts: the header band, write-in boxes, inspiration */
.pg-fate .fs-head, .pg-fate .fs-track, .pg-fate .fs-insp { display: none; }
/* The printed name's type and measure, shared with the twin fate.js counts its
   lines in on screen (fitPrintName), so the lines counted are the lines that
   print. The box is 62mm on paper; its text runs inside the padding and the
   .8pt rules. Persian takes 1.4: at 1.1 the Black weight's dots under one line
   (ب پ ی ج) sat on the dots over the next (ن ف ق ش). A name that wraps at 22pt
   steps down to 17pt (.is-long), so two lines at 1.4 stand no taller than two
   did at 1.1. A name with no Persian in it has no such dots and keeps the
   tighter leading and its size. */
.pg-fate .fullsheet { --name-box: 62mm; --name-pad: 2.5mm; }
.pg-fate :is(.fs-head__name > b, .fs-name-probe) { font-family: Estedad, Vazirmatn, sans-serif; font-size: 22pt; font-weight: 900; line-height: 1.4; overflow-wrap: anywhere; }
.pg-fate :is(.fs-head__name > b, .fs-name-probe).is-long { font-size: 17pt; }
.pg-fate :is(.fs-head__name > b, .fs-name-probe).is-latin { line-height: 1.15; }
.pg-fate .fs-name-probe { position: absolute; inset-block-start: 0; inset-inline-start: 0; display: block; width: calc(var(--name-box) - 2 * var(--name-pad) - 1.6pt); visibility: hidden; pointer-events: none; }
.pg-fate .big-abils { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
/* the rim is the tile's own background showing 1px around an inner face, so the
   hex clip cannot cut it into fragments the way it cut a border */
.pg-fate .big-abil { min-width: 0; aspect-ratio: 1; padding: 1px; background: var(--line-strong); clip-path: var(--clip-hex); }
.pg-fate .big-abil__face { height: 100%; display: grid; justify-items: center; align-content: center; gap: 2px; padding: var(--s-2) 4px; background: var(--bg); clip-path: var(--clip-hex); }
.pg-fate .big-abil__n { font-size: var(--fs-2xs); color: var(--fg-muted); text-align: center; line-height: 1.3; }
/* modifier first and largest; the score below in a small pill */
.pg-fate .big-abil__m { font-family: var(--font-display); font-weight: 900; font-size: 2.25rem; color: var(--fg-strong); line-height: 1; font-variant-numeric: tabular-nums; }
.pg-fate .big-abil__s { min-width: 26px; height: 18px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--bg-elev-2); color: var(--fg); font-size: .8125rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pg-fate .vitals--big { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
.pg-fate .vitals--big .vital { padding: var(--s-3) var(--s-2); }
.pg-fate .vitals--big .vital > b { font-size: 2rem; }
.pg-fate .vitals--big .vital > span { font-size: var(--fs-2xs); white-space: normal; }
.pg-fate .fs-prof { font-size: var(--fs-sm); margin: var(--s-2) 0 0; }
.pg-fate .fs-cast { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-3); font-size: var(--fs-sm); color: var(--fg-muted); }
.pg-fate .fs-cast b { color: var(--fg-strong); }
.pg-fate .fs-slots { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-3); font-size: var(--fs-sm); }
.pg-fate .slot-row { display: inline-flex; align-items: center; gap: 4px; }
.pg-fate .slot-row b { margin-inline-end: 4px; font-weight: 700; color: var(--fg); }
.pg-fate .slot-row__n { color: var(--fg-muted); font-variant-numeric: tabular-nums; margin-inline-end: 2px; }
.pg-fate .tick { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--ornament); border-radius: 2px; }
.pg-fate .spell-list { display: grid; gap: var(--s-3); }
.pg-fate .spell-line { padding: var(--s-3) var(--s-4); background: var(--bg); border-inline-start: 2px solid var(--emerald); }
.pg-fate .spell-line p { margin: 4px 0 0; font-size: var(--fs-sm); }
.pg-fate .spell-line b { color: var(--fg-strong); }
.pg-fate .persona-dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: 0; }
/* each label sits right over its value, in the value's own direction */
.pg-fate .persona-dl > div { display: grid; gap: 4px; align-content: start; text-align: start; padding-inline-start: var(--s-3); border-inline-start: 2px solid var(--line-glow); }
.pg-fate .persona-dl dt { font-size: var(--fs-2xs); color: var(--accent-text); font-weight: 700; }
.pg-fate .persona-dl dd { margin: 0; font-size: var(--fs-sm); color: var(--fg); overflow-wrap: anywhere; }
.pg-fate .fs-story .prose { overflow-wrap: anywhere; }
@media screen and (max-width: 860px) {
  /* same `1fr` min-content trap: the side column's ability tiles measured 360px. */
  .pg-fate .sheet-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .pg-fate .sheet-hero__card { justify-self: center; }
  .pg-fate .sheet-hero__card .hero-card { --card-w: 220px !important; }
  .pg-fate .persona-dl { grid-template-columns: 1fr; }
  /* At the table the phone is the sheet: numbers first, then abilities, the
     attack, saves and skills, and the reading after. The wrappers step aside
     (display: contents) so every section can take its own place in one column. */
  .pg-fate .fullsheet { display: flex; flex-direction: column; gap: 0; padding: var(--s-4); }
  .pg-fate .fullsheet :is(.fullsheet__side, .fullsheet__main, .fs-col--combat, .fs-col--char) { display: contents; }
  .pg-fate .fs-vitals { order: 1; }
  .pg-fate .fs-abils { order: 2; margin-top: var(--s-4); }
  .pg-fate .fs-attacks { order: 3; }
  .pg-fate .fs-saves { order: 4; }
  .pg-fate .fs-skills { order: 5; }
  .pg-fate .fs-pair { order: 6; }
  .pg-fate .fs-gear { order: 7; }
  .pg-fate .fs-spells { order: 8; }
  .pg-fate .fs-persona { order: 9; }
  .pg-fate .fs-feats { order: 10; }
  .pg-fate .fs-story { order: 11; }
  .pg-fate .fullsheet :is(h2,h3) { margin-top: var(--s-5); }
  /* vitals: three columns, hit points the largest with an emerald rim */
  .pg-fate .vitals--big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-fate .vitals--big .vital--hp { --bd: var(--line-glow); grid-row: span 2; box-shadow: inset 0 0 0 1px var(--line-glow); }
  .pg-fate .vitals--big .vital--hp > b { font-size: 2.6rem; }
  .pg-fate .vitals--big .vital > b { font-size: 1.6rem; }
  /* abilities: one row of six compact tiles, modifier first */
  .pg-fate .big-abils { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .pg-fate .big-abil { aspect-ratio: auto; clip-path: var(--clip-facet); --facet: 6px; }
  .pg-fate .big-abil__face { clip-path: var(--clip-facet); --facet: 6px; padding: 6px 2px; }
  .pg-fate .big-abil__m { font-size: 1.35rem; }
  .pg-fate .big-abil__s { min-width: 0; padding: 0 5px; font-size: var(--fs-2xs); }
  .pg-fate .big-abil__n .t-gloss { display: none; }
}
/* Skills in two columns only while each column has room for the longest
   skill's word at the reader's text size. The switch was a px breakpoint
   (380px), so at 200% text a 412px phone kept two ~165px columns and
   «جادوشناسی» broke inside the word, «جادوشناس / ی». It now follows the
   section's own width in em (the rule of quests.css's A11Y-TYPE-29: lay out by
   room measured in text size): 19em is two columns from a 380px phone at 100%,
   as before, and one column at 150-200% until the screen is wide enough again. */
@media screen and (max-width: 860px) { .pg-fate .fs-skills { container: fs-skills / inline-size; } }
@media screen { @container fs-skills (min-width: 19em) { .pg-fate .fs-skills .plist { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); } } }
/* The numbers above them follow the text size the same way: three tiles while
   each still holds the hit dice («4d10») at the reader's size, two when a third
   would cut it. At 200% text a 412px phone's 110px tile clipped «4d10» to «d1». */
@media screen and (max-width: 860px) { .pg-fate .fs-vitals { container: fs-vitals / inline-size; } }
@media screen { @container fs-vitals (max-width: 15em) { .pg-fate .vitals--big { grid-template-columns: repeat(2, minmax(0, 1fr)); } } }
@media screen and (max-width: 379px) { .pg-fate .big-abils { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── reduced motion ── */
:root[data-motion="off"] .pg-fate :is(.thread, .loom__cut, .loom__over),
:root[data-motion="off"] .pg-fate__sheet { transition: none; }
:root[data-motion="off"] .pg-fate :is(.pool.is-rolling *, .score-row.is-swapped *),
:root[data-motion="off"] .pg-fate__step.is-shake { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pg-fate :is(.thread, .loom__cut, .loom__over), .pg-fate__sheet { transition: none; }
  .pg-fate :is(.pool.is-rolling *, .score-row.is-swapped *), .pg-fate__step.is-shake { animation: none !important; }
  .pg-fate .rail__rune { transition: none; }
  .pg-fate .give, .pg-fate__step.is-shake .step-req { animation: none; }
}
:root[data-motion="off"] .pg-fate :is(.give, .is-shake .step-req) { animation: none !important; }

/* ── Windows High Contrast: the chosen card, value or face must not rest on colour ── */
@media (forced-colors: active) {
  .pg-fate :is(.opt, .spell-mini):has(input:checked), .pg-fate :is(.opt.is-sel, .spell-mini.is-sel, .pool-chip.is-sel, .arr-slot.is-sel, .flex-chip.is-on, .give__b.is-here) { outline: 3px solid Highlight; outline-offset: -3px; }
  .pg-fate .opt__check, .pg-fate .rail__item.is-current .rail__rune { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .pg-fate .portrait-opt.is-sel .arch-frame, .pg-fate .swatch-opt.is-sel .swatch-ring { forced-color-adjust: none; background: Highlight; }
  .pg-fate .asi-rule__b.is-on, .pg-fate .seg__b[aria-checked="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ── sheet language ── */
/* English terms inside a Persian sheet: same weight, isolated, never reordering the line */
.sgn { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.pg-fate .sheet-pair { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
/* an English-primary sheet: left-to-right, and English UI type rather than Persian display type */
.pg-fate .fullsheet.is-ltr { text-align: left; }
.pg-fate .fullsheet.is-ltr [dir="auto"] { text-align: start; }
.t-en { unicode-bidi: isolate; font-family: var(--font-body); letter-spacing: 0; }
.t-gloss { unicode-bidi: isolate; font-size: max(.78em, .75rem); font-weight: 500; color: var(--fg-muted); white-space: nowrap; }
.pg-fate .big-abil__n .t-gloss, .pg-fate .vital .t-gloss { display: block; white-space: normal; margin-top: 1px; }

/* ── print: ink on paper ──
   A two-page A4 sheet laid out the way 5e sheets are: a header band with the
   name and facts, then three columns — abilities, saves and skills · combat with
   boxes to write current HP, temporary HP, spent hit dice and death saves ·
   personality and features. Spells and the backstory take page two. */
@media print {
  @page { size: A4; margin: 12mm; }
  /* only the page prints: no ravens, toasts, guide, dialogs or anything else appended to body,
     and none of the effect layers laid over #app (the lantern's secret layer, painted
     white by the reset below, covered the whole sheet) */
  body > :not(#app) { display: none !important; }
  .hdr, .ftr, .bnav, .dice-fab, .sound-btn, .guide, .fog-canvas, .lantern, .toasts,
  .raven-layer, .raven-layer *, .raven-msg, .portal-x, .skip-link, .fissure, .tip, .tray, .tray-backdrop,
  .modal-backdrop, .mist-veil, .secret-layer, .secret-rune, .secret-msg, .ragnarok,
  .pg-fate .sheet-tools, .pg-fate .crumbs, .pg-fate .sheet-hero, .pg-fate .fullsheet::before { display: none !important; }
  /* paper is light: a dark colour scheme left the page margins dark in a PDF */
  html { color-scheme: light !important; }
  html, body { background: #fff !important; color: #000 !important; }
  body { padding-bottom: 0 !important; }
  body::after { display: none !important; }
  /* the token set stays dark otherwise, so every page printed grey-on-white */
  #app, #app * {
    color: #000 !important; background: #fff !important; border-color: #000 !important;
    text-shadow: none !important; box-shadow: none !important; clip-path: none !important;
    filter: none !important; animation: none !important;
  }
  #app a { color: #000 !important; text-decoration: underline; }
  /* An inline element's background paints its whole font box, taller than its
     line: painted white, a 17pt modifier covered the dots and tails of the label
     above it («جذبه» printed «حذبه», «خرد» «خد»). Text runs print on the paper itself. */
  #app :is(b, strong, span, small, i, em, bdi, a, label, dt, dd) { background: transparent !important; }
  #app .muted, #app .faint, #app small { color: #333 !important; }
  #app .hx-cover, #app .hx-mark, #app .hx-keeper, #app .hx-tree, #app .hx-raven { filter: grayscale(1) contrast(1.2) !important; }
  #app .loom__svg, #app .pg-fate__sheet { display: none !important; }
  .pg-fate { padding: 0; }
  .pg-fate--sheet { font-family: Vazirmatn, Tahoma, sans-serif; font-size: 9.5pt; line-height: 1.4; }
  .pg-fate .fullsheet {
    display: grid; grid-template-columns: 52mm minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head head head" "side combat char" "spells spells spells" "story story story";
    gap: 4mm 5mm; align-items: start; padding: 0; border: 0;
  }
  .pg-fate .fullsheet__main { display: contents; }
  .pg-fate .fullsheet__side { grid-area: side; }
  .pg-fate .fs-col--combat { grid-area: combat; }
  .pg-fate .fs-col--char { grid-area: char; }
  .pg-fate .fs-spells { grid-area: spells; break-before: page; }
  .pg-fate .fs-story { grid-area: story; }
  .pg-fate .fullsheet:not(:has(.fs-spells)) .fs-story { break-before: page; }
  .pg-fate .fullsheet :is(h2,h3) { font-size: 8pt; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin: 3mm 0 1.5mm; padding-bottom: .8mm; border-bottom: .6pt solid #000; }
  /* A gloss is the second language, never larger than the label it glosses: the
     screen's floor of .75rem made it 9pt beside the 6.5pt box labels, so
     «جان کنونی» stood under a louder CURRENT HP. English sits a step smaller;
     a Persian gloss, which reads smaller at the same size, keeps the label's.
     :where() keeps these below every rule that sizes a particular gloss. */
  :where(.pg-fate .fullsheet) .t-gloss { font-size: 1em; }
  :where(.pg-fate .fullsheet) .t-gloss:where([lang="en"]) { font-size: .86em; }
  /* only a column's first heading sits at the top; "Species traits" keeps its space below the flaw box */
  .pg-fate .fs-col > section:first-child > h2:first-child { margin-top: 0; }
  .pg-fate .fs-feats > h2 { margin-top: 8pt; }
  /* header band: portrait, a name box, and the six facts in a grid of labelled lines */
  .pg-fate .fs-head { grid-area: head; display: grid !important; grid-template-columns: 18mm var(--name-box) minmax(0, 1fr); gap: 4mm; align-items: center; padding-bottom: 3mm; border-bottom: 1.2pt solid #000; }
  .pg-fate .fs-head__portrait { width: 18mm; height: 18mm; overflow: hidden; border: .8pt solid #000; }
  .pg-fate .fs-head__portrait svg { width: 100%; height: 100%; display: block; }
  /* the name's type is set with its on-screen twin, above the print rules */
  .pg-fate .fs-head__name { display: grid; gap: .5mm; padding: 1.5mm var(--name-pad); border: .8pt solid #000; }
  .pg-fate .fs-name-probe { display: none !important; }
  .pg-fate .fs-head__name small, .pg-fate .fs-fact dt { font-size: 6.5pt; text-transform: uppercase; letter-spacing: .05em; }
  .pg-fate .fs-head__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2mm 3mm; margin: 0; }
  .pg-fate .fs-fact { display: grid; gap: .3mm; }
  .pg-fate .fs-fact dd { margin: 0; min-height: 5mm; padding-bottom: .5mm; border-bottom: .5pt solid #000; font-size: 9pt; font-weight: 700; }
  /* abilities: a column of boxes, modifier large, score in an oval */
  /* two rows of three: the bilingual sheet's longer skill list still ends on page one */
  .pg-fate .big-abils { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5mm; margin: 0; }
  .pg-fate .big-abil { aspect-ratio: auto; padding: 0; border: .8pt solid #000; border-radius: 2mm; }
  /* three rows of their own (name, modifier, score) with room between: nothing overlaps the name */
  .pg-fate .big-abil__face { grid-template-rows: auto auto auto; padding: 1.2mm 1mm 1.5mm; gap: 1mm; overflow: visible; }
  .pg-fate .big-abil__n { font-size: 9pt; font-weight: 800; line-height: 1.6; padding-bottom: .4mm; text-transform: uppercase; overflow: visible; }
  .pg-fate .big-abil__n .t-gloss { font-size: 7pt; line-height: 1.3; }
  .pg-fate .big-abil__m { font-size: 17pt; line-height: 1.15; }
  /* The score's oval: a line box tall enough for the digits. At line-height 1
     Vazirmatn's digits rose into the top of the oval — the teeth of ۳ and ۴ and
     the head of ۹ merged into the border, so ۱۳ could be read as ۱۲ on paper.
     Digits have no descenders, but the font keeps a deep descent for the
     letters that do, so the ink sits ~2.3pt above the line box's middle; the
     padding is weighted to the top to set it back in the middle of the oval
     (measured at 8x: ~3.2pt clear above and below, Persian and Latin alike). */
  .pg-fate .big-abil__s { height: auto; padding: .85mm 2.5mm .1mm; border: .6pt solid #000; font-size: 8pt; line-height: 1.2; }
  .pg-fate .fs-insp { display: flex !important; align-items: center; gap: 2mm; margin-top: 2mm; font-size: 8pt; font-weight: 700; }
  .pg-fate .wbox__f--sq { display: inline-block; width: 6mm; height: 6mm; border: .8pt solid #000; }
  .pg-fate .plist { font-size: 8pt; gap: 0; }
  .pg-fate .plist li { padding: .3mm 0; border-bottom: .4pt dotted #666; grid-template-columns: 2.6mm minmax(0, 1fr) auto; gap: 1.5mm; line-height: 1.3; }
  .pg-fate .plist li > span, .pg-fate .plist small { line-height: 1.3; }
  .pg-fate .plist small { font-size: 7pt; }
  .pg-fate .plist i { width: 2.2mm; height: 2.2mm; border: .6pt solid #000; border-radius: 50%; }
  /* Marks drawn as fills must print with "background graphics" off, which is how
     a browser's print dialog opens: the proficient dot came out an empty square,
     and the separator's lozenge (painted white by the reset above) not at all. */
  #app .pg-fate .plist li.is-prof i { border-radius: 50%; background: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #app .pg-fate .sep { background: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pg-fate .fs-pair { margin-top: 2mm; font-size: 8pt; }
  /* combat */
  .pg-fate .vitals--big { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5mm; }
  .pg-fate .vitals--big .vital { padding: 1.5mm 1mm; border: .8pt solid #000; }
  .pg-fate .vitals--big .vital > b { font-size: 14pt; }
  .pg-fate .vitals--big .vital > span { font-size: 6.5pt; }
  .pg-fate .fs-track { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.5mm; margin-top: 2mm; }
  /* a write-in box holds its own: nothing it carries may print across the column beside it */
  .pg-fate .wbox { display: grid; gap: .8mm; padding: 1.2mm 1.6mm; border: .8pt solid #000; border-radius: 1.5mm; break-inside: avoid; overflow: hidden; }
  .pg-fate .wbox__l { font-size: 6.5pt; font-weight: 800; text-transform: uppercase; }
  .pg-fate .wbox__f { display: block; min-height: 9mm; }
  .pg-fate .wbox:first-child { grid-column: 1 / -1; }
  .pg-fate .wbox:first-child .wbox__f { min-height: 13mm; }
  .pg-fate .wbox__max { font-size: 7pt; }
  /* Death saves: successes over failures, the way the 5e sheet stacks them, one
     row each — the label, then its three circles. The rows share one grid
     (subgrid), so the circles stand right after the longer label and in columns.
     Two-up, the bilingual labels («موفقیت Successes», «شکست Failures») did not
     fit the box: the failures ran over the next column and their circles were
     painted over. A label may wrap; the circles keep their place. */
  .pg-fate .wbox--saves { grid-column: 1 / -1; grid-template-columns: minmax(0, max-content) repeat(3, 3mm) minmax(0, 1fr); align-items: center; gap: 1mm 1.6mm; }
  .pg-fate .wbox--saves .wbox__l { grid-column: 1 / -1; }
  .pg-fate .ds { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-width: 0; font-size: 7.5pt; line-height: 1.35; }
  .pg-fate .ds > span { min-width: 0; padding-inline-end: 1mm; }
  .pg-fate .ds .t-gloss { font-size: 6.5pt; }
  .pg-fate .tick { width: 3mm; height: 3mm; border: .7pt solid #000; border-radius: 50%; }
  .pg-fate .slot-row .tick { border-radius: .5mm; }
  .pg-fate .tbl { font-size: 8pt; width: 100%; }
  .pg-fate .tbl :is(th, td) { padding: .8mm 1mm; border-bottom: .5pt solid #000; }
  .pg-fate .tbl td:first-child { white-space: nowrap; }
  /* bilingual cells: the gloss under its term, free to wrap. On one unbreakable
     line ("Ammunition (range 150/600), Heavy, Two-Handed") it pushed the table
     past its column, and the properties printed cut in half. */
  .pg-fate .tbl .t-gloss { display: block; white-space: normal; }
  /* "not proficient" on a line of its own under the weapon, and set below the
     name it qualifies: 6pt against 8pt, regular weight, a hairline box. Inline,
     name and tag made one unbreakable run (the weapon cell may not wrap here),
     the table grew past its column, and the Damage and Properties it cut off
     were simply missing from the paper. Its gloss keeps the tag's size (5pt
     is past reading at the table) and its line: "not / proficient" broke the
     term in two. */
  .pg-fate .tbl .noprof-tag { display: block; width: fit-content; margin-top: .4mm; padding: 0 .8mm; font-size: 6pt; font-weight: 500; line-height: 1.4; vertical-align: baseline; border-width: .4pt; border-radius: .6mm; }
  .pg-fate .tbl .noprof-tag .t-gloss { font-size: 1em; white-space: nowrap; }
  #app .pg-fate .tbl .noprof-tag { color: #333 !important; border-color: #666 !important; }
  /* The table's text stands flush with the column, under the ATTACKS rule, as
     a printed table does: the 1mm indent at both outer edges was the room an
     English table lacked — "Quarterstaff", "Bludgeoning" and "Properties" can
     not break, and needed 211px of a 206px column, so Properties printed cut. */
  .pg-fate .fs-attacks .tbl :is(th, td):first-child { padding-inline-start: 0; }
  .pg-fate .fs-attacks .tbl :is(th, td):last-child { padding-inline-end: 0; }
  /* paper cannot scroll: a table that still outgrows its column runs into the
     gutter beside it rather than being cut at the column's edge */
  .pg-fate .fs-attacks .table-wrap { overflow: visible; }
  .pg-fate .fs-gear p, .pg-fate .fs-feats p { font-size: 8.5pt; margin: 0 0 1mm; }
  /* character column: the four personality boxes and the features */
  .pg-fate .persona-dl { grid-template-columns: 1fr; gap: 1.5mm; }
  .pg-fate .persona-dl > div { min-height: 14mm; padding: 1.2mm 1.6mm; border: .8pt solid #000; border-radius: 1.5mm; }
  .pg-fate .persona-dl dt { font-size: 6.5pt; text-transform: uppercase; }
  .pg-fate .persona-dl dd { font-size: 8.5pt; }
  /* page two */
  .pg-fate .fs-cast { font-size: 9pt; gap: 2mm 6mm; }
  .pg-fate .fs-slots { gap: 2mm 6mm; font-size: 9pt; }
  .pg-fate .spell-list { grid-template-columns: 1fr 1fr; gap: 2mm 4mm; }
  .pg-fate .spell-line { padding: 1.5mm 2mm; border: 0; border-inline-start: 1.2pt solid #000; break-inside: avoid; }
  .pg-fate .spell-line p { font-size: 8pt; }
  .pg-fate .fs-story .prose { font-size: 9pt; max-width: none; }
  .pg-fate :is(.big-abil, .vital, .spell-line, .persona-dl > div, .wbox) { break-inside: avoid; }
  .pg-fate .dice { font-size: .95em; }
}

/* ── afterlife: badges, banner, dialog, halls ── */
.fate-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; font-size: var(--fs-xs); font-weight: 700; border: 1px solid var(--line-strong); color: var(--fg-muted); vertical-align: middle; max-width: 100%; }
.fate-badge bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fate-badge__why { min-width: 0; }
.fate-badge__rune { display: inline-grid; place-items: center; }
.fate-badge__rune svg { width: 9.33px; height: 14px; }
.fate-badge--valhalla { border-color: var(--line-glow); color: var(--accent-text); box-shadow: var(--glow-inset-soft); }
.fate-badge--niflheim { border-color: rgba(var(--fog-color), .45); color: rgb(var(--fog-color)); }
:root[data-theme="light"] .fate-badge--niflheim { color: var(--fg-muted); border-color: var(--line-strong); }
.fate-banner { --bd: var(--line-strong); --facet: 10px; display: flex; gap: var(--s-4); align-items: flex-start; margin-block: var(--s-4); padding: var(--s-4) var(--s-5); border: 1px solid var(--bd); background: var(--facet-edges), linear-gradient(135deg, rgba(47,211,154,.06), transparent 60%); clip-path: var(--clip-facet); }
.fate-banner--niflheim { background: var(--facet-edges), linear-gradient(135deg, rgba(var(--fog-color), .10), transparent 65%); }
.fate-banner__rune { flex: none; padding-top: 2px; color: var(--accent-text); filter: drop-shadow(0 0 10px rgba(47,211,154,.5)); }
.fate-banner__rune svg { width: 21.33px; height: 32px; }
.fate-banner--niflheim .fate-banner__rune { color: rgb(var(--fog-color)); filter: drop-shadow(0 0 10px rgba(var(--fog-color), .5)); }
.fate-group__rune { display: inline-grid; vertical-align: -2px; color: var(--rune-lit); }
.fate-group__rune svg { width: 10.67px; height: 16px; }
/* the halls' heading runes, drawn: the base sizes a font glyph, so the mark gets its own box */
.pg-fate .fate-hall .sec-head .rune { display: grid; place-items: center; letter-spacing: 0; }
.pg-fate .fate-hall .sec-head .rune svg { width: 17.33px; height: 26px; }
.fate-banner__txt { display: grid; gap: 4px; min-width: 0; }
.fate-banner__txt .kicker { margin: 0; }
.fate-banner__epitaph { margin: 2px 0; font-size: var(--fs-md); line-height: 1.9; color: var(--fg); }
.fate-banner__act { margin-top: var(--s-2); gap: var(--s-2); }
.fate-form, .lvl-form { display: grid; gap: var(--s-4); }
.fate-form h2, .lvl-form h2 { margin: 0; }
.fate-form > p, .lvl-form > p { margin: 0; }
.fate-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-4); }
.fate-group { margin: 0; padding: var(--s-4); border: 1px solid var(--line); display: grid; gap: var(--s-2); }
.fate-group legend { padding-inline: 6px; font-weight: 800; }
.fate-group > p { margin: 0 0 var(--s-1); font-size: var(--fs-xs); line-height: 1.8; }
.fate-opt { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); cursor: pointer; }
.fate-opt:has(input:checked) { border-color: var(--line-glow); background: rgba(47,211,154,.08); }
.fate-group--niflheim .fate-opt:has(input:checked) { border-color: rgba(var(--fog-color), .6); background: rgba(var(--fog-color), .1); }
.fate-opt input { accent-color: var(--emerald); width: 18px; height: 18px; }
.fate-form__err, .lvl-form__err { margin: 0; color: var(--danger); }
/* level up */
.lvl-form__step { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--fs-lg); }
.lvl-form__step b { font-family: var(--font-display); font-weight: 900; color: var(--accent-text); }
.lvl-gains { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lvl-gains li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.lvl-gain b { font-family: var(--font-display); font-weight: 900; color: var(--fg-strong); }
.lvl-asi { margin: 0; padding: var(--s-4); border: 1px solid var(--line-glow); display: grid; gap: var(--s-3); }
.lvl-asi legend { padding-inline: 6px; font-weight: 800; }
.lvl-asi > p { margin: 0; font-size: var(--fs-sm); }
.lvl-asi__rows { display: grid; gap: var(--s-2); }
.lvl-asi__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.5ch; align-items: center; gap: var(--s-3); }
.lvl-asi__row .stepper { display: inline-flex; align-items: center; gap: 4px; direction: ltr; }
.lvl-asi__row .stepper b { min-width: 2.2ch; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.lvl-asi__row .stepper .btn { width: 44px; min-height: 44px; padding: 0; }
.lvl-asi__mod { font-weight: 800; color: var(--fg-strong); text-align: end; }
.lvl-path { display: grid; gap: var(--s-2); }
.lvl-path .fate-opt.is-off { opacity: .6; cursor: not-allowed; }
.lvl-sub .fate-opt small, .lvl-path .fate-opt small { display: block; margin-top: 2px; line-height: 1.6; }
.lvl-gains__feat b { color: var(--accent-text); }
.pg-fate .fate-hall { margin-top: var(--s-8); }
.pg-fate .fate-hall:first-child { margin-top: 0; }
.pg-fate .fate-hall .sec-head h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); }
/* On a phone the hall's link takes its own row under the blurb: beside the
   title it left «نیفلهایم» a column a few letters wide, and the word was cut in two. */
@media (max-width: 37.5em) {
  .pg-fate .fate-hall .sec-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rune title" ". kicker" ". more"; }
  .pg-fate .fate-hall .sec-head > .sec-more { justify-self: start; }
}
.pg-fate .gallery__item.is-fated { opacity: .94; }
.pg-fate .gallery__item.is-niflheim .hero-card { filter: saturate(.35) brightness(.86); }
.pg-fate .gallery__item .fate-badge { margin-top: var(--s-1); }
.pg-fate .gallery__epitaph { margin: 0; font-size: var(--fs-sm); line-height: 1.8; color: var(--fg-muted); text-align: center; overflow-wrap: anywhere; }