/* ═══════════════════════════════════════════════════════════
   Campaign Hub — one stylesheet for the whole site.
   Colors live in the :root "tokens" below; change a token and
   every page updates. Dark leather + gold + parchment.
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #131009;            /* page background (dark leather)   */
  --bg-glow: #1c150a;
  --panel: #1e1811;         /* card background                  */
  --panel-2: #251d13;       /* slightly raised card             */
  --panel-hi: #2b2216;      /* top edge of a panel gradient     */
  --border: #3b2f1c;
  --border-soft: #2c2415;
  --ink: #eadfc3;           /* main text (aged parchment)       */
  --muted: #a5906a;         /* secondary text                   */
  --faint: #77653f;
  --gold: #d4a531;          /* primary accent                   */
  --gold-soft: #8a6d24;
  --gold-bright: #f0cf7a;   /* highlight / rim light            */
  --ember: #c05b4d;         /* danger / failed                  */
  --moss: #7fa860;          /* success / ally                   */
  --mystic: #9b8ec9;        /* rumors / arcane                  */
  --steel: #8fa3b0;
  --radius: 12px;
  --radius-sm: 8px;
  --font-display: "Cinzel", "Georgia", serif;
  --font-body: "Alegreya", "Georgia", serif;

  /* spacing scale (keeps rhythm consistent) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;

  /* elevation — layered shadows read as real depth + a warm rim */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 6px rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.32);
  --sh-3: 0 4px 12px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.45);
  --sh-4: 0 22px 70px rgba(0,0,0,.66), 0 6px 20px rgba(0,0,0,.5);
  --hairline: inset 0 1px 0 rgba(240,207,122,.08);   /* top-edge highlight */
  --glow-gold: 0 0 22px rgba(212,165,49,.28);
  --ring: 0 0 0 3px rgba(212,165,49,.22);

  /* motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: .18s;
  --dur-slow: .32s;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 520px at 50% -240px, var(--bg-glow), transparent 70%),
    radial-gradient(900px 700px at 100% 0%, rgba(212,165,49,.04), transparent 60%),
    radial-gradient(700px 900px at 0% 30%, rgba(155,142,201,.035), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* fine grain of "material" over the whole page — very subtle, print-like */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
/* faint vignette to seat the content in the leather */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 0%, transparent 60%, rgba(0,0,0,.35) 100%);
}

::selection { background: rgba(212,165,49,.3); color: #fff4d6; }

/* themed scrollbars */
* { scrollbar-color: var(--gold-soft) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: rgba(0,0,0,.25); }
*::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-soft), #6b5418); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--gold), var(--gold-soft)); background-clip: padding-box; }

/* consistent, visible keyboard focus everywhere */
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 4px; }

/* ── Header & navigation ───────────────────────────────── */
header.site {
  position: relative;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(212,165,49,.10), rgba(212,165,49,.02) 60%, transparent 100%),
    linear-gradient(180deg, rgba(0,0,0,.25), transparent 70%);
  padding: 22px 24px 0;
  box-shadow: 0 12px 30px -18px rgba(0,0,0,.7);
}
/* glowing gold hairline along the bottom of the masthead */
header.site::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 18%, var(--gold-bright) 50%, var(--gold-soft) 82%, transparent);
  opacity: .55;
}
.masthead { max-width: 1100px; margin: 0 auto; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.masthead h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: .07em;
  margin: 0;
  background: linear-gradient(180deg, #f6dd93, var(--gold) 55%, #b78a24);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 30px rgba(212,165,49,.28);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.masthead .tagline { color: var(--muted); font-style: italic; font-size: 15px; }
.masthead .who { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }

/* campaign switcher (in the header) */
.camp-switch { display: inline-flex; align-items: center; gap: 6px; }
.camp-select {
  width: auto; padding: 5px 10px; font-size: 13px; font-family: var(--font-display);
  background: linear-gradient(180deg, #171208, #100c06); color: var(--gold);
  border: 1px solid var(--gold-soft); border-radius: var(--radius-sm);
  box-shadow: var(--hairline), var(--sh-1); cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.camp-select:hover { border-color: var(--gold); box-shadow: var(--hairline), var(--glow-gold); }
.camp-one { font-family: var(--font-display); color: var(--gold); font-size: 13.5px; letter-spacing: .04em; }
.camp-manage {
  text-decoration: none; color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 3px 9px; font-size: 14px; line-height: 1.2;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.camp-manage:hover { color: var(--gold); border-color: var(--gold-soft); background: rgba(212,165,49,.08); }

nav.site {
  max-width: 1100px; margin: 14px auto 0;
  display: flex; gap: 4px; flex-wrap: wrap;
}
nav.site a {
  position: relative;
  color: var(--muted); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; letter-spacing: .08em;
  padding: 10px 15px 12px;
  border: 1px solid transparent; border-bottom: none;
  border-radius: 10px 10px 0 0;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
nav.site a:hover { color: var(--ink); background: rgba(212,165,49,.07); }
/* animated underline that grows on hover */
nav.site a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  transform: scaleX(0); transform-origin: center; opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
nav.site a:hover::after { transform: scaleX(1); opacity: .8; }
nav.site a.active {
  color: var(--gold);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  border-color: var(--border);
  position: relative; top: 1px;
  box-shadow: 0 -6px 18px -10px rgba(212,165,49,.5) inset, var(--hairline);
}
nav.site a.active::after { transform: scaleX(1); opacity: 1; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

main { max-width: 1100px; margin: 0 auto; padding: 28px 24px 72px; }

footer.site {
  max-width: 1100px; margin: 28px auto 0; padding: 18px 24px 36px;
  color: var(--faint); font-size: 13px;
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.18));
}
footer.site a:hover { color: var(--muted); }
footer.site .foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
footer.site .foot-links a { color: var(--gold, #d4a531); text-decoration: none; font-weight: 600; }
footer.site .foot-links a:hover { text-decoration: underline; }
footer.site .foot-legal { margin: 4px 0; line-height: 1.5; max-width: 78ch; }
footer.site .foot-flavor { margin-top: 12px; font-style: italic; color: var(--faint); }

/* Standalone legal/prose pages (terms, privacy, licenses) */
.legal { max-width: 820px; margin: 0 auto; padding: 8px 4px 40px; line-height: 1.65; }
.legal h1 { margin-bottom: 4px; }
.legal h2 { margin-top: 30px; }
.legal .updated { color: var(--muted); font-size: 14px; margin-top: 0; }
.legal .tpl-note {
  border: 1px solid var(--border-soft); border-left: 3px solid var(--gold, #d4a531);
  background: rgba(212,165,49,.07); border-radius: 8px; padding: 12px 16px; margin: 16px 0 28px; font-size: 14px;
}
.legal a { color: var(--gold, #d4a531); }
.legal .back { display: inline-block; margin-bottom: 14px; text-decoration: none; }
.legal ul { padding-left: 22px; }
.legal li { margin: 5px 0; }

/* ── Building blocks ───────────────────────────────────── */
.card {
  background: linear-gradient(180deg, var(--panel-hi), var(--panel) 42%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--sh-2), var(--hairline);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card + .card { margin-top: 16px; }
.card h2, .card h3 { margin-top: 0; }

h2.section, h3.section {
  font-family: var(--font-display); letter-spacing: .08em; color: var(--gold);
  font-size: 19px; font-weight: 700; margin: 0 0 14px;
  text-shadow: 0 1px 0 rgba(0,0,0,.4), 0 0 18px rgba(212,165,49,.14);
}
.rule { border: none; border-top: 1px solid var(--border-soft); margin: 16px 0; box-shadow: 0 1px 0 rgba(240,207,122,.05); }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid > .card + .card { margin-top: 0; }

.muted { color: var(--muted); }
.small { font-size: 14px; }
.empty {
  color: var(--muted); font-style: italic; text-align: center;
  padding: 30px 26px; border: 1px dashed var(--border); border-radius: var(--radius);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(212,165,49,.05), transparent 70%),
    rgba(0,0,0,.14);
}

/* pills / status badges */
.pill {
  display: inline-block; padding: 3px 11px 4px; border-radius: 999px;
  font-size: 12.5px; font-family: var(--font-display); font-weight: 600; letter-spacing: .06em;
  border: 1px solid var(--border); color: var(--muted);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.28));
  box-shadow: var(--hairline), var(--sh-1);
  white-space: nowrap;
}
.pill.gold    { color: #f0cf7a; border-color: #6b5418; background: linear-gradient(180deg, rgba(212,165,49,.18), rgba(212,165,49,.06)); }
.pill.moss    { color: #b6dc99; border-color: #45602f; background: linear-gradient(180deg, rgba(127,168,96,.18), rgba(127,168,96,.05)); }
.pill.ember   { color: #eda093; border-color: #6d332b; background: linear-gradient(180deg, rgba(192,91,77,.18), rgba(192,91,77,.05)); }
.pill.mystic  { color: #cbc2ee; border-color: #4d4472; background: linear-gradient(180deg, rgba(155,142,201,.2), rgba(155,142,201,.06)); }
.pill.steel   { color: #c3d2db; border-color: #46565f; background: linear-gradient(180deg, rgba(143,163,176,.2), rgba(143,163,176,.06)); }

/* buttons */
.btn, .btn-ghost, .btn-danger {
  position: relative;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .05em; font-size: 13.5px;
  border-radius: var(--radius-sm); padding: 8px 16px; cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn {
  background: linear-gradient(180deg, #f0cf7a 0%, #e0b53f 45%, #b8891f 100%);
  color: #221a08; border: 1px solid #f0cf7a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 5px rgba(120,80,10,.4), var(--sh-2);
  text-shadow: 0 1px 0 rgba(255,240,200,.35);
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 5px rgba(120,80,10,.4), var(--sh-3), var(--glow-gold); }
.btn:active { transform: translateY(0); filter: brightness(.98); box-shadow: inset 0 2px 5px rgba(80,50,5,.5); }
.btn-ghost {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.14));
  color: var(--muted); border: 1px solid var(--border); box-shadow: var(--hairline);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--gold-soft); background: rgba(212,165,49,.08); transform: translateY(-1px); }
.btn-ghost:active { transform: translateY(0); }
.btn-danger { background: linear-gradient(180deg, rgba(192,91,77,.06), rgba(0,0,0,.12)); color: var(--ember); border: 1px solid #5b2c25; }
.btn-danger:hover { background: rgba(192,91,77,.16); border-color: var(--ember); transform: translateY(-1px); }
.btn-danger:active { transform: translateY(0); }
button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); transform: none !important; box-shadow: none; }

/* forms */
label.field { display: block; font-size: 13.5px; color: var(--muted); margin: 12px 0 5px; font-family: var(--font-display); letter-spacing: .05em; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
  width: 100%;
  background: linear-gradient(180deg, #100c06, #16110a);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-body); font-size: 16px;
  padding: 10px 13px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.4);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
input::placeholder, textarea::placeholder { color: #6f5d3a; }
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
input:hover, textarea:hover, select:hover { border-color: var(--gold-soft); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 2px 5px rgba(0,0,0,.4), var(--ring); background: #14100a; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > .grow { flex: 1 1 180px; }
form .actions { margin-top: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.checkline { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--muted); }
.checkline input { width: auto; }

/* collapsible <details> */
details.fold { border-top: 1px solid var(--border-soft); margin-top: 14px; padding-top: 11px; }
details.fold summary {
  cursor: pointer; color: var(--muted); font-family: var(--font-display);
  font-size: 13px; letter-spacing: .06em; list-style: none;
  transition: color var(--dur) var(--ease);
}
details.fold summary::before { content: "▸ "; color: var(--gold-soft); transition: color var(--dur) var(--ease); }
details.fold[open] summary::before { content: "▾ "; }
details.fold summary:hover { color: var(--ink); }
details.fold summary:hover::before { color: var(--gold); }

/* quest board */
.board { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: start; }
.board h3.col {
  font-family: var(--font-display); font-size: 14px; letter-spacing: .1em;
  color: var(--muted); margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
  box-shadow: 0 2px 0 -1px rgba(240,207,122,.12);
}
.board .stack { display: flex; flex-direction: column; gap: 12px; }
.quest .title { font-weight: 700; font-size: 18px; margin: 0 0 2px; }
.quest .meta { color: var(--muted); font-size: 14px; font-style: italic; }
.log { margin: 8px 0 0; padding-left: 18px; }
.log li { margin: 5px 0; font-size: 15px; }
.log li::marker { color: var(--gold-soft); }
.log .when { color: var(--faint); font-size: 12.5px; margin-left: 6px; }

/* codex */
.x-note {
  background: none; border: none; cursor: pointer;
  color: var(--faint); font-size: 13px; padding: 0 5px; margin-left: 4px;
  transition: color var(--dur) var(--ease);
}
.x-note:hover { color: var(--ember); }
.codex-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.codex-tabs button { border-radius: 999px; }
.entry .name { font-weight: 700; font-size: 19px; margin: 0; }
.byline { color: var(--faint); font-size: 13px; margin-top: 8px; }

/* player images */
.note-img {
  display: block; max-width: 100%; max-height: 340px;
  border-radius: var(--radius-sm); border: 1px solid var(--border); margin-top: 12px;
  box-shadow: var(--sh-2);
}
.entry .portrait {
  display: block; width: 100%; max-height: 210px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: 12px;
  box-shadow: var(--sh-2);
}
input[type="file"] { color: var(--muted); font-size: 14px; width: 100%; }
input[type="file"]::file-selector-button {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .05em; font-size: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.14)); color: var(--muted); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 15px; margin-right: 12px; cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
input[type="file"]::file-selector-button:hover { color: var(--ink); border-color: var(--gold-soft); background: rgba(212,165,49,.08); }

/* notes */
.note-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.note-head .title { font-weight: 700; font-size: 18px; }
.note-body { white-space: pre-wrap; }

/* maps */
.map-card img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; box-shadow: var(--sh-2); }
.map-ph {
  border: 1px dashed var(--border); border-radius: var(--radius-sm); aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center; color: var(--faint); font-style: italic;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(212,165,49,.05), transparent 65%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(212,165,49,.03) 14px 28px);
}

/* ── dice ─────────────────────────────────────────────── */
svg.die { width: 56px; height: 56px; overflow: visible; }
svg.die polygon {
  fill: var(--panel-2); stroke: var(--gold-soft); stroke-width: 4;
  stroke-linejoin: round;
}
svg.die text {
  fill: var(--ink); font-family: var(--font-display); font-weight: 700;
  font-size: 34px; text-anchor: middle;
}
svg.die.mini { width: 44px; height: 44px; }
svg.die.mini text { font-size: 26px; fill: var(--muted); }
svg.die.crit polygon { stroke: var(--gold); fill: rgba(212,165,49,.20); filter: drop-shadow(0 0 9px rgba(212,165,49,.75)); }
svg.die.crit text { fill: #ffe9a8; }
svg.die.fumble polygon { stroke: var(--ember); fill: rgba(192,91,77,.18); }
svg.die.fumble text { fill: #e8a196; }

@keyframes die-tumble {
  0% { transform: rotate(-9deg) scale(.9) translateY(1px); }
  50% { transform: rotate(10deg) scale(1.08) translateY(-3px); }
  100% { transform: rotate(-9deg) scale(.9) translateY(1px); }
}
svg.die.tumbling { animation: die-tumble .18s ease-in-out infinite; }
@keyframes die-land { 0% { transform: scale(1.4) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
svg.die.landed { animation: die-land .38s cubic-bezier(.2, 2.1, .4, 1); }

.die-btn {
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: 10px;
  padding: 5px 7px 2px; cursor: pointer;
  box-shadow: var(--hairline), var(--sh-1);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.die-btn:hover { border-color: var(--gold-soft); background: rgba(212,165,49,.08); transform: translateY(-2px); box-shadow: var(--hairline), var(--sh-2), var(--glow-gold); }
.die-btn:active { transform: translateY(0); }
.die-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.pool { display: flex; gap: 8px; flex-wrap: wrap; min-height: 38px; align-items: center; }
.pool-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(180deg, rgba(212,165,49,.16), rgba(212,165,49,.06)); border: 1px solid var(--gold-soft);
  color: #f0cf7a; border-radius: 999px; padding: 4px 6px 4px 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  box-shadow: var(--hairline);
}
.pool-chip button {
  background: transparent; border: 1px solid var(--gold-soft); color: #e8c463;
  border-radius: 999px; width: 22px; height: 22px; cursor: pointer; line-height: 1;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pool-chip button:hover { background: rgba(192,91,77,.2); border-color: var(--ember); color: var(--ember); }

.preset-row { border-top: 1px solid var(--border-soft); padding: 10px 0; }
.roll-row { border-top: 1px solid var(--border-soft); padding: 11px 0; }
.die-chip {
  display: inline-block; min-width: 26px; text-align: center;
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--hairline);
}
.die-chip.crit { border-color: var(--gold); color: #ffe9a8; box-shadow: 0 0 7px rgba(212,165,49,.5); }
.die-chip.fumble { border-color: var(--ember); color: #e8a196; }
.roll-total { font-family: var(--font-display); font-weight: 800; color: var(--gold); font-size: 18px; margin-left: 6px; }

#roll-stage {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
  z-index: 40; text-align: center;
  background: linear-gradient(180deg, rgba(30,24,14,.98), rgba(18,13,7,.98));
  border: 1px solid var(--gold-soft); border-radius: 16px;
  padding: 16px 24px; box-shadow: var(--sh-4), var(--glow-gold), var(--hairline);
  backdrop-filter: blur(6px);
  max-width: min(92vw, 640px);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
#roll-stage.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#roll-stage .who { font-family: var(--font-display); color: var(--gold); letter-spacing: .06em; font-size: 14.5px; margin-bottom: 10px; }
#roll-stage .who em { color: var(--ink); }
#roll-stage .dice-row { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
#roll-stage .sum {
  font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--gold);
  margin-top: 10px; opacity: 0; transition: opacity .25s;
  text-shadow: 0 0 18px rgba(212,165,49,.4);
}
#roll-stage.done .sum { opacity: 1; }

/* banner + toast */
.banner {
  max-width: 1100px; margin: 18px auto 0; padding: 12px 18px;
  border: 1px solid #5a4a1a; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(212,165,49,.12), rgba(212,165,49,.05));
  color: #e8cd7a; font-size: 14.5px;
  box-shadow: var(--hairline), var(--sh-1);
}
.banner.err { border-color: #6d332b; background: linear-gradient(180deg, rgba(192,91,77,.14), rgba(192,91,77,.05)); color: #eda093; }
#toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: linear-gradient(180deg, #302614, #1f1810); border: 1px solid var(--gold-soft); color: var(--ink);
  padding: 12px 20px; border-radius: 12px; font-size: 15px; box-shadow: var(--sh-4), var(--hairline);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  z-index: 50;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* auth / gate screens */
.gate { max-width: 430px; margin: 60px auto; }
.gate .tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.gate h2 { font-family: var(--font-display); color: var(--gold); letter-spacing: .06em; margin: 0 0 6px; font-size: 24px; text-shadow: 0 0 20px rgba(212,165,49,.2); }

/* prose (rendered campaign text) */
.prose p { margin: 10px 0; }
.prose h3 { font-family: var(--font-display); color: var(--gold); font-size: 16px; letter-spacing: .06em; margin: 18px 0 6px; }
.prose ul { margin: 8px 0; padding-left: 22px; }
.prose li { margin: 4px 0; }
.prose li::marker { color: var(--gold-soft); }
.prose strong { color: #f0e3bd; }
.prose em { color: var(--muted); }

/* honor reduced-motion: no transforms/animations that move */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .btn:hover, .btn-ghost:hover, .btn-danger:hover, .die-btn:hover { transform: none; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  main { padding: 20px 16px 60px; }
  header.site { padding: 16px 16px 0; }
  .masthead h1 { font-size: 23px; }
  .masthead .who { margin-left: 0; }
  nav.site { gap: 3px; }
  nav.site a { padding: 8px 11px 10px; font-size: 12.5px; }
  .card { padding: 16px 16px; }
}

/* ── AI image generation ── */
.ai-card { margin-bottom: 14px; border-left: 3px solid var(--mystic); }
.ai-card textarea { width: 100%; }
.ai-style.active {
  color: var(--gold); border-color: var(--gold-soft);
  background: rgba(212,165,49,.10);
}
/* character-sheet portrait */
.portrait-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.portrait-img {
  width: 132px; height: 132px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  box-shadow: var(--sh-2);
}
.portrait-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.portrait-note { margin: 0; }
@media (max-width: 480px) {
  .portrait-img { width: 96px; height: 96px; }
}

/* ── Invite links (campaign manager) + join page ── */
.invite-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--muted);
}
.invite-link:read-only { cursor: text; }
/* the public join page reuses the .gate card; keep it centered like the login gate */