/* ═══ HELHEIMRS — «تار سرنوشت» character builder ═══ */
.pg-fate { padding-block: var(--s-7) var(--s-9); }
.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); }
.pg-fate__head > .btn { flex: none; }
.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 { 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(--line-glow); background: rgba(47,211,154,.06); clip-path: var(--clip-facet); --facet: 8px; font-size: var(--fs-sm); }
.pg-fate .resume-bar span { display: inline-flex; align-items: center; gap: var(--s-half); color: var(--accent-text); }
.pg-fate .resume-bar .ico { width: 18px; height: 18px; flex: none; }

/* ── 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); }
.pg-fate .rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--s-1); }
.pg-fate .rail__item button { width: 100%; display: grid; justify-items: center; gap: var(--s-half); padding: var(--s-2) 2px; background: none; border: 0; color: var(--fg-faint); font-size: var(--fs-2xs); font-weight: 600; cursor: pointer; transition: color var(--t-ui); }
.pg-fate .rail__rune { font-family: var(--font-rune); font-size: var(--rune-md); 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), color var(--t-ui), box-shadow var(--t-ui), transform var(--t-ui) var(--ease-stone); }
.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); }
.pg-fate .rail__item.is-current button { color: var(--fg-strong); }
.pg-fate .rail__item.is-locked button { opacity: .5; }
.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: var(--loom-h, 72px); display: block; }
.pg-fate .loom__warp { stroke: var(--line); stroke-width: 1; }
.pg-fate .loom__warp.is-slub { stroke: var(--line-strong); stroke-width: 1.3; }
.pg-fate .loom__band { fill: transparent; transition: fill var(--t-ui); }
.pg-fate .thread { fill: none; stroke: var(--emerald); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out), opacity var(--t-ui); }
.pg-fate .loom__row:nth-of-type(even) .thread { stroke: var(--emerald-soft); }
.pg-fate .loom__row.is-lit .thread { stroke-dashoffset: 0; }
/* the row on the loom right now is the one live thing here — it alone glows */
.pg-fate .loom__row.is-now .thread { stroke-dashoffset: .62; opacity: .8; filter: drop-shadow(0 0 4px rgba(47,211,154,.7)); }
.pg-fate .loom__row.is-now .loom__band { fill: rgba(47,211,154,.07); }
/* the warp crosses in front of the weft: a bg-coloured cut, then the thread again */
.pg-fate .loom__cut { fill: none; stroke: var(--bg); stroke-width: 3; }
.pg-fate .loom__over { fill: none; stroke: var(--line); stroke-width: 1; }
.pg-fate .loom__row.is-lit .loom__over { stroke: var(--line-strong); }
.pg-fate .loom.is-woven .loom__svg { filter: drop-shadow(0 0 6px rgba(47,211,154,.3)); }
:root[data-theme="light"] .pg-fate .thread { stroke: var(--jade); }
:root[data-theme="light"] .pg-fate .loom__row:nth-of-type(even) .thread { stroke: #157C5C; }
@media (max-width: 640px) {
  .pg-fate .rail__label { display: none; }
  .pg-fate .rail__n { display: block; }
  .pg-fate .rail__rune { width: 34px; height: 34px; font-size: var(--rune-sm); }
  .pg-fate .loom__svg { height: calc(var(--loom-h, 72px) * .72); }
}

/* ── body: step + live sheet ── */
.pg-fate__body { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: var(--s-6); align-items: start; }
.pg-fate__step { background: var(--stone-grad); border: 1px solid var(--line); clip-path: var(--clip-facet); padding: var(--s-6); box-shadow: var(--shadow-stone); min-width: 0; }
.pg-fate__step.is-shake { animation: fate-shake .4s var(--ease-stone); }
@keyframes fate-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.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; }
.pg-fate .step-count { flex: none; white-space: nowrap; }
.pg-fate .step-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); flex-wrap: wrap; }
.pg-fate .step-nav .btn--primary { margin-inline-start: auto; }
.pg-fate .step-err { flex: 1 1 100%; margin: 0; min-height: 1.4em; color: var(--danger); font-size: var(--fs-sm); font-weight: 600; }
.pg-fate .step-err:empty { min-height: 0; }
.pg-fate__sheet { position: sticky; top: 84px; min-width: 0; }
.pg-fate .sheet-bar { display: none; }

/* ── option slabs ── */
.pg-fate .opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); }
.pg-fate .opt { text-align: start; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto auto auto; 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; font-family: var(--font-rune); font-size: 24px; color: var(--fg-faint); display: grid; place-items: center; width: 44px; height: 44px; clip-path: var(--clip-hex); background: var(--bg); transition: background var(--t-ui), color var(--t-ui); }
.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; }
.pg-fate .opt__en { display: block; direction: ltr; text-align: right; font-family: var(--font-latin); font-size: 11px; color: var(--fg-faint); letter-spacing: .04em; }
.pg-fate .opt__desc { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.7; margin-top: 6px; }
.pg-fate .opt__meta { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--accent-text); line-height: 1.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); }
.pg-fate .opt:hover { border-color: var(--line-strong); }
.pg-fate .opt.is-sel { border-color: var(--line-glow); box-shadow: var(--shadow-stone), var(--glow-inset); }
.pg-fate .opt.is-sel .opt__rune { background: var(--emerald-grad); color: var(--accent-fg); box-shadow: var(--glow); }

/* ── 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-xs); }
.pg-fate .score-head, .pg-fate .score-row { display: grid; grid-template-columns: 1.1fr 1.8fr 1fr 1.1fr; align-items: center; gap: var(--s-3); }
.pg-fate .score-head { padding: 0 var(--s-4); font-size: var(--fs-xs); color: var(--fg-faint); }
.pg-fate .score-rows { display: grid; gap: var(--s-2); }
.pg-fate .score-row { padding: var(--s-3) var(--s-4); background: var(--bg); border: 1px solid var(--line); transition: border-color var(--t-ui); }
.pg-fate .score-row:hover { border-color: var(--line-strong); }
.pg-fate .score-row__n { font-weight: 700; color: var(--fg-strong); line-height: 1.3; }
.pg-fate .score-row__n small { display: block; direction: ltr; text-align: right; font-family: var(--font-latin); font-size: 10px; color: var(--fg-faint); letter-spacing: .05em; }
.pg-fate .score-row__bonus { font-size: var(--fs-sm); color: var(--accent-text); }
.pg-fate .score-row__res { display: inline-flex; align-items: center; gap: var(--s-3); justify-self: end; }
.pg-fate .score-row__final { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xl); color: var(--fg-strong); line-height: 1; min-width: 2ch; text-align: center; }
.pg-fate .score-row__mod { display: inline-grid; place-items: center; width: 44px; height: 44px; clip-path: var(--clip-hex); background: var(--bg-elev-2); color: var(--accent-text); font-weight: 800; font-size: var(--fs-sm); }
.pg-fate .stepper { display: inline-flex; align-items: center; gap: 6px; direction: ltr; }
.pg-fate .stepper b { min-width: 36px; text-align: center; font-family: var(--font-display); font-size: var(--fs-xl); color: var(--fg-strong); }
.pg-fate .stepper .btn { width: 36px; min-height: 36px; padding: 0; font-size: var(--fs-lg); }
.pg-fate .select--sm { min-height: 40px; max-width: 120px; }
.pg-fate .roll-ctl { display: inline-flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.pg-fate .rolled { display: inline-flex; gap: 4px; direction: ltr; }
.pg-fate .rolled i { width: 28px; height: 28px; display: grid; place-items: center; background: #E9E6DC; color: #0A0A0B; font-style: normal; font-weight: 800; font-size: 13px; border-radius: 3px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.4); animation: fate-die .5s var(--ease-out) both; }
.pg-fate .rolled i.is-drop { opacity: .45; text-decoration: line-through; background: #8B8B85; }
@keyframes fate-die { from { transform: translateY(-6px) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) {
  .pg-fate .score-head { display: none; }
  .pg-fate .score-row { grid-template-columns: 1fr auto; }
  .pg-fate .score-row__n { grid-column: 1 / -1; }
  .pg-fate .score-row__bonus { grid-column: 1; }
  .pg-fate .score-row__res { grid-column: 2; grid-row: 2 / span 2; }
}

/* ── gear & skills ── */
.pg-fate .gear-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.pg-fate .gear-grid .hint { line-height: 1.6; }
.pg-fate .skill-count { margin-inline-start: var(--s-2); font-weight: 700; }
.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: 14px; height: 14px; }
.pg-fate .skill-chip small { color: var(--fg-faint); font-size: var(--fs-2xs); }
.pg-fate .skill-chip.is-locked { cursor: default; opacity: .85; }
.pg-fate .skill-chip.is-disabled { opacity: .4; 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(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; }
.pg-fate .spell-mini__t b { font-size: var(--fs-md); color: var(--fg-strong); }
.pg-fate .spell-mini__t .latin { font-size: 10px; color: var(--fg-faint); text-align: right; }
.pg-fate .spell-mini.is-sel { border-color: var(--line-glow); box-shadow: var(--shadow-stone), var(--glow-inset); }
.pg-fate .spell-mini[disabled] { opacity: .4; cursor: not-allowed; }
.pg-fate .nospell { margin-top: var(--s-4); }

/* ── 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 ── */
.pg-fate .portrait-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s-6); align-items: start; }
.pg-fate .portrait-layout .sub-title:first-child { margin-top: 0; }
.pg-fate .portrait-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.pg-fate .portrait-opt { padding: 0; background: none; border: 0; cursor: pointer; display: block; width: 100%; }
.pg-fate .portrait-opt .arch-frame { background: linear-gradient(180deg, var(--line-strong), transparent 80%); transition: background var(--t-ui), filter var(--t-ui); display: block; }
.pg-fate .portrait-opt__img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg); }
.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 .swatches { display: flex; gap: var(--s-2); }
.pg-fate .swatch-ring { padding: 3px; background: transparent; border: 0; clip-path: var(--clip-hex); cursor: pointer; transition: background var(--t-ui); }
.pg-fate .swatch-ring.is-sel { 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); }
.pg-fate .swatch-ring:hover .swatch, .pg-fate .swatch-ring.is-sel .swatch { opacity: 1; }
.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-xs); }
@media (max-width: 760px) { .pg-fate .portrait-layout { grid-template-columns: 1fr; } .pg-fate .portrait-preview { position: static; } }

/* ── live sheet ── */
.pg-fate .sheet { display: grid; gap: var(--s-4); background: var(--stone-grad); border: 1px solid var(--line-strong); clip-path: var(--clip-facet); padding: var(--s-5); box-shadow: var(--shadow-stone); }
.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(5, 1fr); gap: 6px; }
.pg-fate .vital { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; background: var(--bg); border: 1px solid var(--line); clip-path: var(--clip-facet); --facet: 6px; }
.pg-fate .vital b { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-lg); white-space: nowrap; color: var(--fg-strong); line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 -1px 0 rgba(0,0,0,.8); }
.pg-fate .vital span { font-size: var(--fs-2xs); color: var(--fg-muted); white-space: nowrap; }
.pg-fate .abils { display: grid; grid-template-columns: repeat(6, 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); }
.pg-fate .abil__n { font-size: var(--fs-2xs); color: var(--fg-muted); }
.pg-fate .abil__s { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--fg-strong); line-height: 1; }
.pg-fate .abil__m { font-size: var(--fs-xs); color: var(--accent-text); font-weight: 700; }
.pg-fate .sheet__cols { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--s-4); }
.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 .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-faint); }
.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 (max-width: 1000px) {
  .pg-fate__body { grid-template-columns: 1fr; }
  .pg-fate--wizard { padding-bottom: 120px; }
  .pg-fate__sheet { position: fixed; inset-inline: 0; bottom: 0; top: auto; z-index: calc(var(--z-nav) - 1); background: var(--bg-elev); border-top: 1px solid var(--line-glow); box-shadow: 0 -20px 40px rgba(0,0,0,.5); max-height: 48px; overflow: hidden; transition: max-height var(--t-slow) var(--ease-stone); }
  .pg-fate__sheet.is-open { max-height: 72vh; overflow: auto; }
  .pg-fate .sheet-bar { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 48px; padding: 0 var(--gutter); background: none; border: 0; color: var(--accent-text); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
  .pg-fate .sheet-bar__hint { margin-inline-start: auto; font-size: var(--fs-xs); font-weight: 500; }
  .pg-fate .sheet-bar__hint::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-inline-end: var(--s-half); }
  .pg-fate .sheet-body { padding: 0 var(--gutter) var(--s-5); }
  .pg-fate .sheet { clip-path: none; box-shadow: none; border: 0; background: none; padding: 0; }
}
@media (max-width: 900px) {
  .pg-fate__sheet { bottom: 84px; }
  /* the drawer bar owns the 84–132px band; move the sound toggle above it */
  body:has(.pg-fate__sheet) .sound-btn { bottom: calc(84px + 48px + var(--s-3)); }
  .pg-fate .sheet-bar { padding-inline-end: calc(var(--gutter) + 72px); } /* engines without :has() */
}

/* ── hero card ── */
.pg-fate .hero-card { --card-w: 260px; --accent-c: var(--emerald); 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(--line-strong); clip-path: var(--clip-facet); box-shadow: var(--shadow-stone); position: relative; }
.pg-fate .hero-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(47,211,154,.25); pointer-events: none; clip-path: var(--clip-facet); --facet: 10px; }
.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; }
.pg-fate .hero-card__gate .hx-mark .crack { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 1; animation: none; }
.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%, rgba(47,211,154,.28), transparent 65%); pointer-events: none; }
.pg-fate .hero-card__text { display: grid; justify-items: center; gap: 4px; text-align: center; width: 100%; }
.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; }
.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 { display: grid; justify-items: center; gap: 1px; padding: 6px 2px; background: var(--bg); border: 1px solid var(--line); clip-path: var(--clip-facet); --facet: 6px; }
.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 */
:root[data-theme="light"] .pg-fate .hero-card { background: linear-gradient(160deg, #26282B 0%, #1A1B1D 45%, #131416 100%); border-color: rgba(237,239,234,.16); }
: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 { background: #0A0A0B; border-color: rgba(237,239,234,.08); }
:root[data-theme="light"] .pg-fate .hero-card__brand { color: #6A6F69; }
.pg-fate .card-preview { width: 100%; max-width: 400px; margin: var(--s-4) auto; border: 1px solid var(--line-glow); box-shadow: var(--glow); }

/* ── gallery ── */
.pg-fate .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s-6); }
.pg-fate .gallery__item { display: grid; gap: var(--s-3); justify-items: center; }

/* ── 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-7); }
.pg-fate .sheet-hero__text h1 { font-size: var(--fs-page); }
.pg-fate .sheet-actions { margin-top: var(--s-4); }
.pg-fate .fullsheet { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-7); background: var(--stone-grad); border: 1px solid var(--line-strong); 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 :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__main :is(h2,h3):first-of-type { margin-top: var(--s-5); }
.pg-fate .fullsheet__side :is(h2,h3) { font-size: var(--fs-sm); margin: var(--s-4) 0 var(--s-half); }
.pg-fate .fullsheet__side > :is(h2,h3):first-of-type { margin-top: 0; }
/* fact lines may span; running prose keeps its measure */
.pg-fate .fullsheet__main p:not(.prose) { max-width: none; }
.pg-fate .big-abils { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-bottom: var(--s-5); }
.pg-fate .big-abil { display: grid; min-width: 0; justify-items: center; gap: 2px; padding: var(--s-3) var(--s-2); background: var(--bg); border: 1px solid var(--line-strong); clip-path: var(--clip-hex); aspect-ratio: 1; align-content: center; }
.pg-fate .big-abil__n { font-size: var(--fs-xs); color: var(--fg-muted); }
.pg-fate .big-abil__s { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xl); color: var(--fg-strong); line-height: 1; }
.pg-fate .big-abil__m { font-weight: 800; color: var(--accent-text); }
.pg-fate .vitals--big { grid-template-columns: repeat(5, 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: var(--fs-2xl); }
.pg-fate .vitals--big .vital span { font-size: var(--fs-xs); }
.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; }
.pg-fate .persona-dl dt { font-size: var(--fs-xs); color: var(--accent-text); font-weight: 700; }
.pg-fate .persona-dl dd { margin: 0; font-size: var(--fs-sm); color: var(--fg); }
@media (max-width: 860px) {
  /* same `1fr` min-content trap: the side column's ability tiles measured 360px. */
  .pg-fate .sheet-hero, .pg-fate .fullsheet { grid-template-columns: minmax(0, 1fr); }
  .pg-fate .fullsheet__side, .pg-fate .fullsheet__main { min-width: 0; }
  .pg-fate .sheet-hero__card { justify-self: center; }
  .pg-fate .vitals--big { grid-template-columns: repeat(3, 1fr); }
  .pg-fate .persona-dl { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .pg-fate .vitals--big { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-fate .big-abils { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── reduced motion ── */
:root[data-motion="off"] .pg-fate .thread,
:root[data-motion="off"] .pg-fate__sheet { transition: none; }
:root[data-motion="off"] .pg-fate .rolled i,
:root[data-motion="off"] .pg-fate__step.is-shake { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .pg-fate .thread, .pg-fate__sheet { transition: none; }
  .pg-fate .rolled i, .pg-fate__step.is-shake { animation: none; }
  .pg-fate .rail__rune { transition: none; }
}

/* ── print: ink on paper, whichever page is open ── */

/* ── sheet language ── */
.pg-fate .sheet-lang { padding: var(--s-5); margin-block: var(--s-6) var(--s-5); display: grid; gap: var(--s-4); }
.pg-fate .sheet-lang__head h2 { margin: 0 0 var(--s-1); font-size: var(--fs-lg); }
.pg-fate .sheet-lang__head p { margin: 0; font-size: var(--fs-sm); max-width: 62ch; }
.pg-fate .sheet-lang .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pg-fate .sheet-lang__custom summary { cursor: pointer; color: var(--accent-text); font-size: var(--fs-sm); min-height: 36px; display: flex; align-items: center; }
.pg-fate .sheet-lang__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.pg-fate .sheet-lang__grid .field { display: grid; gap: var(--s-1); font-size: var(--fs-sm); color: var(--fg-muted); }
/* 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: .78em; 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; }

@media print {
  .pg-fate .sheet-lang { display: none !important; }
  .hdr, .ftr, .bnav, .dice-fab, .sound-btn, .guide, .fog-canvas, .lantern, .toasts,
  .raven-layer, .portal-x, .skip-link, .fissure, .tip, .tray, .tray-backdrop,
  .modal-backdrop, .mist-veil, .secret-rune, .secret-msg, .crit-fx, .ragnarok,
  .pg-fate .sheet-actions, .pg-fate .crumbs, .pg-fate .sheet-hero__card, .pg-fate .fullsheet::before { display: none !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; }
  #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-hero { margin-bottom: 12pt; }
  .pg-fate .sheet-hero__text h1 { font-size: 24pt; }
  .pg-fate .fullsheet { border: 1px solid #000; padding: 12pt; gap: 18pt; grid-template-columns: 200pt 1fr; break-inside: avoid; }
  .pg-fate .fullsheet :is(h2,h3) { border-bottom: 1px solid #000; }
  .pg-fate .big-abil, .pg-fate .vital { border: 1px solid #000; }
  .pg-fate .plist li { border-bottom: 1px dotted #666; }
  .pg-fate .plist i { border: 1px solid #000; }
  .pg-fate .plist li.is-prof i { background: #000 !important; }
  .pg-fate .spell-line { border-inline-start: 2px solid #000; }
}

/* ── 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; }
.fate-badge .rune { font-size: 1.1em; }
.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)); }
.fate-banner { 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(--line-strong); background: linear-gradient(135deg, rgba(47,211,154,.06), transparent 60%); clip-path: var(--clip-facet); --facet: 10px; }
.fate-banner--niflheim { background: linear-gradient(135deg, rgba(var(--fog-color), .10), transparent 65%); }
.fate-banner__rune { font-family: var(--font-rune); font-size: 42px; line-height: 1; color: var(--accent-text); text-shadow: 0 0 18px rgba(47,211,154,.5); }
.fate-banner--niflheim .fate-banner__rune { color: rgb(var(--fog-color)); text-shadow: 0 0 18px rgba(var(--fog-color), .5); }
.fate-banner__txt { display: grid; gap: 4px; }
.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-form { display: grid; gap: var(--s-4); }
.fate-form h2 { margin: 0; }
.fate-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 { margin: 0; color: var(--ember-soft); }
.pg-fate .fate-hall { margin-top: var(--s-8); }
.pg-fate .fate-hall .sec-head h2 { display: flex; align-items: baseline; gap: var(--s-2); }
.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-2); }
.pg-fate .gallery__epitaph { margin: var(--s-2) 0 0; font-size: var(--fs-sm); line-height: 1.8; color: var(--fg-muted); }