/* Obsidian stone, brushed silver, and worn parchment. */
:root {
  color-scheme: dark;
  --ink: #e5e3dc;
  --silver: #c5c9cd;
  --parchment: #c6b79a;
  --muted: #aaa9a4;
  --line: #45474a;
  --stone: #1b1d20;
  --bs-body-color: var(--ink);
  --bs-body-bg: #141517;
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--line);
  --bs-link-color: var(--silver);
  --bs-link-hover-color: #f3f2ec;
}
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(ellipse at 85% 0%, #34363b50, transparent 55%), url('/assets/stone.svg'), #141517;
  line-height: 1.65;
}
a { color: var(--silver); text-underline-offset: 4px; }
a:hover { color: #fffaf0; }
h1, h2, h3, h4, .brand, .quote { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.035em; line-height: 1.14; }
h1 { font-size: clamp(2.35rem, 4vw, 3.7rem); color: #eeece6; }
h1 em { font-weight: 400; color: var(--parchment); }
p { max-width: 65ch; }
.container { max-width: 1240px; }
.site-header { padding: 25px 0; border-bottom: 1px solid #71757c4d; background: linear-gradient(#111315db, #181a1bc9); box-shadow: 0 1px 0 #000; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.6rem; font-weight: bold; white-space: nowrap; color: #e0e1df; }
/* The header search stretches across the header while focused, overlapping the brand and
   menu button rather than moving them. Its wrapper keeps its size, and with no top set the
   form stays at its place in the row. */
.site-header .container { --nav-inset: calc(var(--bs-gutter-x) * .5); }
.site-header .navbar-brand, .site-header .navbar-toggler { flex-shrink: 0; }
.nav-search { flex: 0 1 15rem; min-width: 3rem; height: calc(2.5em + .5rem + 2px); font-size: .875rem; }
.nav-search-form { position: relative; }
.nav-search:focus-within .nav-search-form { position: absolute; left: var(--nav-inset); right: var(--nav-inset); z-index: 1040; }
.nav-search-results { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; }
.nav-search:focus-within .nav-search-results { display: block; }
.nav-search-results .search-results:not(:empty) { max-height: 70vh; overflow-y: auto; padding: 4px 16px 12px; background: #1b1d20; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 12px 30px #000a; }
.search-group + .search-group { margin-top: 8px; }
.search-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: #adafae; padding: 10px 0 4px; }
.search-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.search-item:hover, .search-item:focus { color: var(--parchment); }
.search-item small { color: #adafae; font-size: .7rem; text-align: right; }
.search-empty { color: #adafae; font-size: .85rem; margin: 10px 0 4px; }
.btn { border-radius: 2px; font-weight: 600; padding: .7rem 1.15rem; line-height: 1.5; transition: background-color .15s, border-color .15s, color .15s; }
.btn-lg { font-size: .95rem; padding: .95rem 1.5rem; }
.btn-sm { font-size: .8rem; padding: .5rem .85rem; }
.btn-primary {
  --bs-btn-color: #181b1e; --bs-btn-bg: #c6cacf; --bs-btn-border-color: #c6cacf;
  --bs-btn-hover-color: #101214; --bs-btn-hover-bg: #edf0f1; --bs-btn-hover-border-color: #f2f3f3;
  --bs-btn-active-color: #101214; --bs-btn-active-bg: #aeb4bc; --bs-btn-active-border-color: #cbd0d4;
  --bs-btn-disabled-color: #17191c; --bs-btn-disabled-bg: #969ca3; --bs-btn-disabled-border-color: #969ca3;
  background-image: linear-gradient(115deg, #ffffff26, transparent 45%, #ffffff12);
  box-shadow: inset 0 1px #ffffff6b, 0 3px 8px #0004;
}
.btn-outline-primary, .btn-outline-secondary {
  --bs-btn-color: #d1d1cc; --bs-btn-border-color: #6c7074;
  --bs-btn-hover-color: #f4f3ed; --bs-btn-hover-bg: #393d41; --bs-btn-hover-border-color: #9da3a9;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #393d41; --bs-btn-active-border-color: #9da3a9;
  background-color: #15171938;
}
.eyebrow { font-size: .67rem; font-weight: 750; letter-spacing: .19em; color: #b9bec3; line-height: 1.6; }
.hero { padding: 75px 0 60px; min-height: 680px; }
.hero h1 { font-size: clamp(3.2rem, 5.3vw, 4.65rem); line-height: 1.05; text-shadow: 0 2px 14px #0004; }
.hero h1 em { color: #c8bba1; }
.hero .lead { font-size: 1.05rem; max-width: 440px; line-height: 1.9; color: var(--muted); }
.small-star { color: var(--parchment); margin-right: 9px; }
/* A cut slab with an engraved silver seal; textures are local SVG filters. */
.hero-art {
  position: relative; min-height: 465px; overflow: hidden; border-radius: 2px;
  display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(ellipse at 40% 30%, #53586166, #10121599 75%), url('/assets/stone.svg'), #222529;
  border: 1px solid #72778080;
  box-shadow: inset 0 0 0 7px #101214, inset 0 0 0 8px #73788040, inset 0 0 65px #000a, 0 24px 50px #0005;
}
.hero-art:before { content: ''; position: absolute; inset: 17px; border: 1px solid #7d828825; pointer-events: none; }
.hero-art:after { content: ''; position: absolute; inset: 0; background: url('/assets/grain.svg'); opacity: .7; pointer-events: none; z-index: 3; }
.hero-die { width: 220px; filter: drop-shadow(0 16px 16px #0009); z-index: 1; }
.hero-die .edges { fill: none; stroke: url('#silver-edge'); stroke-width: 1.5; stroke-linejoin: round; }
.hero-die text { font: 48px Georgia; fill: #e5ded1; }
.art-caption { position: absolute; bottom: 26px; font-size: .6rem; letter-spacing: .22em; color: #b9b9b2; }
.orbital { position: absolute; width: 330px; height: 330px; border: 1px solid #aab0b447; border-radius: 50%; box-shadow: 0 1px #000b; }
.orbital-one:after { content: ''; position: absolute; inset: 7px; border: 1px dashed #9ca4ab38; border-radius: 50%; }
.orbital-two { width: 378px; height: 378px; border-color: #aab0b429; }
.art-star { position: absolute; color: #bdc3c7; font-size: 1.5rem; }
.star-one { top: 25px; right: 30px; }
.star-two { bottom: 22px; left: 30px; font-size: .85rem; }
.steps { border-top: 1px solid var(--line); padding: 36px 0 60px; }
.steps p { font-size: .9rem; color: var(--muted); max-width: 330px; }
.step-number { font-size: .65rem; letter-spacing: .15em; color: var(--parchment); margin-bottom: 20px; font-weight: 700; }
.steps h2 { font-size: 1.4rem; letter-spacing: -.025em; }
.site-footer { border-top: 1px solid var(--line); padding-top: 40px; padding-bottom: 24px; display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.footer-intro { flex: 1 1 230px; }
.footer-brand { font: 1.5rem Georgia, serif; color: var(--silver); text-decoration: none; }
.footer-intro p { margin: 12px 0 0; font-size: .85rem; }
.footer-links { flex: 2 1 550px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-group h2 { font: 700 .72rem system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; color: var(--parchment); }
.footer-group ul { list-style: none; margin: 0; padding: 0; }
.footer-group a { display: inline-block; padding: 5px 0; text-decoration: none; }
.footer-group a:hover { text-decoration: underline; }
.footer-bottom { flex-basis: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; font-size: .75rem; }
.footer-compact { padding-top: 22px; gap: 16px; align-items: baseline; }
.footer-compact .footer-intro { flex: 0 1 auto; }
.footer-compact .footer-intro p { display: none; }
.footer-compact .footer-brand { font-size: 1.1rem; }
.footer-disclosure { flex: 1 1 380px; }
.footer-disclosure summary { cursor: pointer; padding: 6px 0; color: var(--silver); }
.footer-disclosure .footer-links { padding-top: 22px; }
.marketing-page { padding-bottom: 64px; }
.marketing-heading { padding: 60px 0 40px; border-bottom: 1px solid var(--line); margin-bottom: 38px; }
.marketing-heading h1 { max-width: 900px; margin: 18px 0 24px; }
.marketing-heading .lead { max-width: 720px; color: var(--muted); font-size: 1.15rem; }
.marketing-breadcrumb { font-size: .8rem; display: flex; flex-wrap: wrap; gap: 8px; }
.marketing-content { max-width: 820px; }
.marketing-content section { margin-bottom: 36px; }
.marketing-content h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: 16px; }
.marketing-content h3 { font-size: 1.25rem; margin-top: 24px; }
.marketing-content p, .marketing-content li { color: #c5c5c0; max-width: 72ch; }
.marketing-content li { margin-bottom: 10px; }
.marketing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 32px 0; }
.marketing-card { padding: 26px; }
.marketing-card h2 { font-size: 1.45rem; }
.marketing-card p { color: var(--muted); }
.marketing-note { padding: 24px; margin: 30px 0; border-left: 3px solid var(--parchment); background: #c6b79a0c; }
.marketing-note p:last-child { margin-bottom: 0; }
.marketing-cta { padding: 32px; margin-top: 42px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.marketing-cta h2 { font-size: 1.7rem; margin-bottom: 10px; }
.marketing-cta p { color: var(--muted); margin: 0; }
.marketing-related { margin-top: 32px; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.guide-cover { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 44px; margin-top: 32px; }
.guide-cover h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); }
.guide-cover .lead { font-size: 1.05rem; line-height: 1.8; }
.guide-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--parchment); font-size: .75rem; margin: 24px 0; }
.guide-illustration { margin: 0; }
.guide-illustration img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 18px 40px #0004; }
.guide-illustration figcaption { color: var(--muted); font-size: .75rem; line-height: 1.7; margin-top: 12px; }
.guide-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 64px; align-items: start; }
.guide-toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 20px 20px 20px 0; border-right: 1px solid var(--line); font-size: .8rem; }
.guide-toc ol { padding-left: 24px; margin: 18px 0 24px; }
.guide-toc li { padding-left: 3px; margin-bottom: 7px; color: var(--parchment); }
.guide-toc a { display: inline-block; padding: 3px 0; line-height: 1.5; text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; }
.guide-back-top { font-size: .75rem; }
.guide-prose { max-width: 760px; min-width: 0; font-size: 1.05rem; line-height: 1.9; }
.guide-prose p { margin-bottom: 22px; }
.guide-prose .guide-chapter { padding-top: 38px; margin-bottom: 44px; border-top: 1px solid var(--line); scroll-margin-top: 28px; }
.guide-chapter-number { font: 700 .68rem system-ui, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--parchment) !important; margin-bottom: 14px !important; }
.guide-prose h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.2; margin-bottom: 26px; }
.guide-takeaway { border-left: 3px solid var(--parchment); padding: 24px 28px; margin-bottom: 40px; background: #c6b79a0c; }
.guide-takeaway p:last-child { margin-bottom: 0; }
.guide-prose .guide-scenario { padding: 30px; background: linear-gradient(130deg, #c6b79a0e, transparent), #1f2225; border: 1px solid #716653; border-radius: 3px; }
.guide-scenario p:last-child { margin-bottom: 0; }
.guide-checklist { padding: 28px; background: #c6b79a0c; border: 1px solid var(--line); margin-top: 36px; }
.guide-checklist ul { padding-left: 22px; margin-bottom: 0; }
.guide-checklist li::marker { color: var(--parchment); }
@media (max-width: 991px) {
  .guide-cover { grid-template-columns: 1fr; gap: 28px; }
  .guide-illustration { max-width: 640px; }
  .guide-layout { grid-template-columns: 1fr; gap: 32px; }
  .guide-toc { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 24px; }
  .guide-toc ol { columns: 2; column-gap: 32px; }
  .guide-toc li { break-inside: avoid; }
}
@media (max-width: 480px) {
  .guide-toc ol { columns: 1; }
  .guide-prose { font-size: 1rem; }
  .guide-takeaway, .guide-prose .guide-scenario, .guide-checklist { padding: 22px; }
}
.faq-list details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-list summary { cursor: pointer; font-weight: 650; color: var(--ink); }
.faq-list details p { margin: 16px 0 0; }
summary:focus-visible { outline: 3px solid #d6c6a9; outline-offset: 4px; }
.page-heading { padding: 48px 0 34px; }
.page-heading h1 { max-width: 850px; }
.back-link { font-size: .8rem; text-decoration: none; }
.panel, .campaign-card { background: linear-gradient(135deg, #32363b26, #00000026), url('/assets/grain.svg'), #202225; border: 1px solid #51555a; border-radius: 3px; box-shadow: inset 0 1px #aab0b419, 0 8px 22px #0003; }
.section-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 10px; }
.section-label h2 { margin: 0; }
.section-label>span { font-size: .75rem; color: var(--muted); }
.empty-state { text-align: center; padding: 65px 26px; border: 1px solid #51555a; border-radius: 3px; background: url('/assets/stone.svg'), #1a1c1e; box-shadow: inset 0 0 45px #0004; }
.empty-state p { max-width: 360px; margin: 18px auto 24px; color: var(--muted); font-size: .95rem; }
.rune { display: block; color: var(--parchment); font-size: 2.8rem; line-height: 1.3; margin-bottom: 18px; }
.join-panel { padding: 28px; }
/* A GM's join form stays folded under "Join a game" until they open it. */
.join-toggle > summary { list-style: none; }
.join-toggle > summary::-webkit-details-marker { display: none; }
.join-panel .rune { font-size: 2rem; }
.join-panel h2 { font-size: 1.7rem; }
.join-panel p { font-size: .88rem; }
.aside-note { padding: 22px 12px; font-size: .78rem; color: #aaa99f; line-height: 1.9; }
.campaign-art { height: 125px; background: linear-gradient(115deg, #484d5540, #101215b3), url('/assets/stone.svg'), #303438; display: flex; align-items: center; justify-content: center; gap: 22px; color: #bdc3c8; border-radius: 2px 2px 0 0; border-bottom: 1px solid #64696f; }
.campaign-art span { font-size: 4rem; text-shadow: 0 2px #000; }
.campaign-art small { font-size: .56rem; letter-spacing: .18em; }
/* The whole card enters the campaign: its button stretches over the card. */
.campaign-card { position: relative; transition: transform .15s; }
.campaign-card:hover, .campaign-card:focus-within { transform: scale(1.02); }
.card-enter { border: 0; padding: 0; background: none; }
.card-enter::after { content: ''; position: absolute; inset: 0; cursor: pointer; }
.card-enter:focus-visible::after { outline: 3px solid #d6c6a9; outline-offset: 4px; }
.campaign-card small { font-size: .72rem; color: var(--muted); }
.campaign-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.form-label { font-size: .82rem; font-weight: 650; margin-bottom: 8px; color: #dedcd4; }
.form-control, .form-select { color: #e3e2dd; background-color: #141619; border-radius: 2px; min-height: 46px; border-color: #55595e; font-size: .9rem; box-shadow: inset 0 2px 5px #0003; }
.form-control::placeholder { color: #929597; opacity: 1; }
.form-control:focus, .form-select:focus { color: #f0efe9; border-color: #b6bdc4; box-shadow: 0 0 0 .2rem #b6bdc422; background-color: #1b1e22; }
.form-text { font-size: .75rem; color: #aaa9a2; }
.invite-input { text-transform: uppercase; letter-spacing: .08em; }
.auth-layout { min-height: 740px; padding: 65px 0; }
.auth-panel { padding: 40px; max-width: 470px; margin-left: auto; }
.auth-panel h2 { font-size: 1.8rem; }
.auth-panel>p { font-size: .9rem; }
.quote { font-size: 1.6rem; margin-top: 55px; color: var(--parchment); }
.quote small { display: block; font: .78rem system-ui; color: var(--muted); margin-top: 12px; letter-spacing: 0; }
/* Warm aged-paper accents, kept dark enough to belong to the stone table. */
.field-note { background: radial-gradient(ellipse at top left, #a5947140, transparent 85%), url('/assets/grain.svg'), #2b2822; border: 1px solid #6c6050; padding: 30px; border-radius: 2px; box-shadow: inset 0 0 30px #130e0866, 0 6px 15px #0002; }
.field-note .eyebrow { color: #c9bda5; }
.field-note p { font-size: .9rem; color: #c3bbac; }
.field-note h2 { line-height: 1.3; color: #e0d4bd; }
.field-note hr { border-color: #a79981; margin: 24px 0; }
.journey { display: flex; flex-wrap: wrap; gap: 12px 25px; font-size: .7rem; color: #aaa9a4; margin-top: 30px; }
.journey .current { color: #e0d4bd; font-weight: 700; }
.character-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); padding: 18px 0; }
.character-option:last-child { padding-bottom: 0; }
.character-sheet { overflow: hidden; }
.sheet-heading { padding: 28px; background: linear-gradient(120deg, #626a7333, #0002), url('/assets/stone.svg'), #2a2d31; border-bottom: 1px solid #5b6065; }
.sheet-heading h2 { font-size: 2rem; }
.sheet-heading p { font-size: .85rem; color: #b8bab9; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { background: #141619; text-align: center; padding: 16px 5px; border: 1px solid #4c5055; border-radius: 2px; box-shadow: inset 0 2px 6px #0005; }
.stat small { display: block; font-size: .65rem; color: #b9bbbd; }
.stat strong { font: 2rem Georgia; display: block; margin-top: 7px; color: #e0d4bd; }
.stat .modifier { display: block; font-size: .75rem; color: #b9bbbd; margin-top: 2px; min-height: 1.1em; }
.sheet-link { color: inherit; text-decoration: none; }
.sheet-link:hover { text-decoration: underline 1px var(--parchment); text-underline-offset: 5px; }
.skill-list, .feature-list { list-style: none; padding: 0; margin: 0; }
.skill-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 24px; }
.skill { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.skill-name { flex: 1; }
.skill-name small { font-size: .65rem; color: #adafae; margin-left: 4px; }
.skill strong { font-family: Georgia; color: #e0d4bd; }
.skill .pip { width: 9px; height: 9px; border: 1px solid #8c7e66; border-radius: 50%; flex-shrink: 0; }
.skill.proficiency-1 .pip { background: var(--parchment); border-color: var(--parchment); }
.skill.proficiency-2 .pip { background: var(--parchment); border-color: var(--parchment); border-radius: 1px; transform: rotate(45deg); }
.feature-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.feature-list li:first-child { border-top: 0; padding-top: 4px; }
/* Ability cards: the compendium, the sheet, and the table's quick reference. */
.entry-list { list-style: none; padding: 0; margin: 0; }
.entry-list > li { border-top: 1px solid var(--line); }
.entry-list > li:first-child { border-top: 0; }
.entry-row { display: flex; align-items: flex-start; gap: 14px; }
.entry-row .entry { flex: 1; min-width: 0; }
.entry-action, .on-sheet { flex-shrink: 0; padding-top: 10px; }
.on-sheet { font-size: .75rem; color: var(--parchment); }
.entry summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 0; cursor: pointer; list-style: none; }
.entry summary::-webkit-details-marker { display: none; }
.entry summary::before { content: '▸'; color: #8c7e66; width: 10px; }
.entry[open] summary::before { content: '▾'; }
.entry-name { font-weight: 600; }
.entry-meta { font-size: .7rem; color: #adafae; }
.entry-body { padding: 0 0 16px 22px; font-size: .88rem; }
.entry-body p { margin-bottom: .6rem; }
.entry-summary { color: #c3bbac; font-style: italic; }
.entry-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin: 0 0 12px; }
.entry-facts dt { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: #adafae; font-weight: 400; }
.entry-facts dd { margin: 0; }
.entry-notes { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 12px; }
.entry-note { font-size: .8rem; color: var(--parchment); }
.entry-list.compact .entry summary { padding: 8px 0; }
.quick-reference .section-label { margin-bottom: 4px; }
.compendium-prompt { text-decoration: none; color: inherit; }
.compendium-prompt:hover { border-color: var(--parchment); }
.resource { border: 1px solid var(--line); border-radius: 2px; padding: 9px 14px; font-size: .75rem; }
.resource strong { margin-left: 12px; }
.party-member { display: flex; align-items: center; gap: 13px; padding: 15px 0; border-top: 1px solid var(--line); }
.party-member strong { font-size: .9rem; }
.party-member small { font-size: .7rem; color: #adafae; }
.party-member.is-you { margin: 0 -12px; padding-left: 12px; padding-right: 12px; background: #c6b79a0d; }
.party-member.is-you strong { font-size: 1.05rem; text-decoration: underline 2px var(--parchment); text-underline-offset: 5px; }
.party-member.is-you .avatar { border-color: var(--parchment); color: var(--parchment); }
.avatar { width: 38px; height: 42px; background: linear-gradient(135deg, #42484f, #22262b); border: 1px solid #697078; display: grid; place-items: center; color: #d2d5d8; font-size: 1.5rem; border-radius: 2px; flex-shrink: 0; }
.invite-code { padding: 14px 8px; background: #161718; color: #e0d4bd; border: 1px dashed #8c7e66; text-align: center; letter-spacing: .12em; font-family: monospace; font-size: 1rem; overflow-wrap: anywhere; }
.live-badge { font-size: .65rem; color: #c9cfcd; padding: 4px 10px; background: #2b3333; border: 1px solid #4d5c59; border-radius: 2px; }
.live-badge.connected:before { content: '●'; color: #a9c0ae; margin-right: 6px; }
.table-note { padding: 32px 15px; display: flex; gap: 20px; align-items: center; }
.table-note p { font-size: .9rem; }
.table-note .rune { margin: 0; }
/* Encounter: seats around the table, the initiative keypad, and turn order. */
.seats { counter-reset: seat; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.seat { background: #141619; border: 1px solid #4c5055; border-radius: 2px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 2px 6px #0005; }
.seat { counter-increment: seat; position: relative; }
/* The seat number sits on the card's top edge. */
.seat:before { content: counter(seat); position: absolute; top: -8px; left: 10px; padding: 0 5px; line-height: 1.3; background: #141619; font-size: .62rem; font-weight: 700; letter-spacing: .15em; color: var(--parchment); }
.seat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.seat-top .dropdown-item { cursor: pointer; }
.seat:has(.form-check-input:checked) .when-away, .seat:has(.form-check-input:not(:checked)) .when-here { display: none; }
.seat-label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.seat-label .form-check-input { margin-top: 4px; flex-shrink: 0; }
.seat-label strong { display: block; overflow-wrap: anywhere; }
.seat-label small { display: block; font-size: .7rem; color: var(--muted); }
.seat:has(input:not(:checked)) strong { color: var(--muted); text-decoration: line-through; }
.seat-actions { display: flex; gap: 6px; }
.seat-actions:empty { display: none; }
.seats.sortable .seat { cursor: grab; }
.seats.sortable .seat-move { display: none; }
.seat.sortable-ghost { opacity: .35; }
.roll-rows { display: grid; gap: 12px; }
.roll-row { display: flex; align-items: center; gap: 12px; }
.roll-row label { flex: 1; margin: 0; }
.roll-row input, .number-input { width: 90px; flex-shrink: 0; }
.keypad-active > .section-label, .keypad-active .roll-rows { display: none; }
.keypad { max-width: 380px; margin: 0 auto; text-align: center; }
.keypad-name { font-size: clamp(2rem, 8vw, 2.8rem); margin: 6px 0 4px; overflow-wrap: anywhere; }
.keypad-note { color: var(--muted); min-height: 1.6em; }
/* A player's in-app roll, offered to the GM in the middle of the screen. */
/* Above the dice layer: it opens the moment the die lands, while the die is still fading out. */
.roll-popup { position: fixed; inset: 0; z-index: 1077; display: grid; place-items: center; padding: 16px; background: #0009; }
.roll-popup[hidden] { display: none; }
.roll-popup-card { width: min(100%, 360px); text-align: center; padding: 28px 24px; background: #202225; border: 1px solid var(--parchment); border-radius: 3px; box-shadow: 0 18px 50px #000a; }
.roll-popup-detail { color: var(--muted); margin: -8px 0 18px; }
/* Roll now: the one thing on a player's screen that needs them, so it is loud. */
.roll-now { flex-shrink: 0; background: #c62f24; border: 1px solid #ef5a4c; color: #fff; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; padding: .55rem 1rem; box-shadow: 0 0 0 3px #c62f2440, 0 6px 18px #c62f2466; animation: roll-now-pulse 1.6s ease-in-out infinite; }
.roll-now:hover, .roll-now:focus-visible { background: #e0392c; border-color: #ff7a6c; color: #fff; }
@keyframes roll-now-pulse { 50% { box-shadow: 0 0 0 7px #c62f2420, 0 6px 22px #c62f2488; } }
@media (prefers-reduced-motion: reduce) { .roll-now { animation: none; } }
.turn-rolled { font-size: .8rem; color: #e0d4bd; margin-top: 2px; }
.keypad-value { display: block; font: 3.4rem Georgia, serif; color: #e0d4bd; margin: 10px 0 14px; line-height: 1.2; }
.keypad-value.pending { color: #6f7377; }
.keypad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keypad-keys .btn { font-size: 1.6rem; padding: .85rem 0; }
.keypad-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 10px; }
.keypad-progress { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.keypad-progress button { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 2px; font-size: .75rem; padding: 4px 8px; }
.keypad-progress .done button { color: var(--ink); }
.keypad-progress .current button { border-color: var(--parchment); color: #e0d4bd; }
.turn-order { list-style: none; padding: 0; margin: 0; }
.turn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px; border-top: 1px solid var(--line); }
.turn-who { flex: 1; min-width: 0; }
.turn-who strong { overflow-wrap: anywhere; }
.turn-status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.turn-hp { font-size: .72rem; color: #b8bab9; padding: 1px 0; }
.turn-hp.down { color: #e09a8c; font-weight: 700; }
.condition { font-size: .68rem; padding: 1px 7px; border: 1px solid #8c7e66; border-radius: 2px; color: #e0d4bd; background: #2b2822; }
button.condition { cursor: pointer; }
/* Tracker columns: initiative, name, HP circle, menu; the tiny labels line up above them. */
.turn-head { display: flex; align-items: flex-end; gap: 14px; padding: 0 10px 4px; font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.turn-head-init { width: 76px; text-align: center; }
.turn-head-menu { width: 38px; }
.turn-hp-cell { width: 58px; text-align: center; flex-shrink: 0; position: relative; }
.hp-circle { width: 50px; height: 50px; border-radius: 50%; border: 1px solid #4c5055; background: #17191c; color: #b8bab9; text-align: center; font: 1.05rem Georgia, serif; padding: 0; appearance: textfield; -moz-appearance: textfield; }
.hp-circle::-webkit-inner-spin-button, .hp-circle::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hp-circle:focus { outline: none; border-color: #b6bdc4; color: #f0efe9; }
.hp-circle.down { color: #e09a8c; border-color: #8a5a52; }
/* Max HP sits on the circle's top edge, like a small tab. */
.hp-max { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-size: .58rem; line-height: 1.2; padding: 0 4px; color: var(--muted); background: #202225; border-radius: 2px; pointer-events: none; }
.turn.current .hp-max { background: #2b2a26; }
.turn-menu { min-width: 260px; padding: 12px; }
.turn-menu form + form { margin-top: 10px; }
.conditions { display: flex; flex-wrap: wrap; gap: 6px; }
.conditions:not(:has(button)) { display: none; }
.add-combatant .d-flex { flex-wrap: wrap; }
.quick-add { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.quick-add:empty { display: none; }
.add-combatant #combatant_name { flex: 1 1 180px; }
.change-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.change-form .number-input { width: 76px; min-height: 36px; }
.resources { display: flex; flex-wrap: wrap; gap: 12px; }
.resources .resource { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.turn.current { background: #c6b79a1c; box-shadow: inset 3px 0 var(--parchment); }
.turn.current strong, .turn.mine strong { color: #e0d4bd; }
.turn-mark { font: 1.3rem Georgia, serif; min-width: 2.2em; text-align: center; color: #e0d4bd; }
.turn-initiative input { width: 76px; text-align: center; font: 1.3rem Georgia, serif; }
.turn-callout { padding: 12px 16px; margin-bottom: 14px; border: 1px solid #8c7e66; background: #2b2822; color: #e0d4bd; font: 1.3rem Georgia, serif; }
/* Next turn stays under the GM's thumb however long the order gets. */
.tracker-actions { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 18px 0 4px; margin-top: 8px; background: linear-gradient(transparent, #202225 35%); }
.adventure-log { list-style: none; padding: 0; margin: 0; }
.log-entry { padding: 14px 0; border-top: 1px solid var(--line); }
.log-entry time { font-size: .7rem; letter-spacing: .08em; color: var(--parchment); }
.log-entry p { white-space: pre-wrap; overflow-wrap: anywhere; }
.live-error { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1080; max-width: min(90vw, 480px); padding: 12px 16px; background: #3a2422; border: 1px solid #8a5a52; color: #f0d8d2; border-radius: 3px; box-shadow: 0 8px 22px #0006; font-size: .9rem; }
/* Character creation: "I rolled my own" swaps the standard-array wording for rolled scores. */
.rolled-toggle { color: var(--silver); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-size: .85rem; }
form:not(:has(#scores_own:checked)) .when-rolled, form:has(#scores_own:checked) .when-standard { display: none; }
.skip-link { padding: 8px; background: #22262b; position: absolute; top: 0; left: 0; z-index: 10; }
button:focus-visible, a:focus-visible { outline: 3px solid #d6c6a9; outline-offset: 4px; }
::selection { background: #c7b99f; color: #17181a; }
@media (min-width: 1200px) { .stats-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 767px) {
  .container { padding-left: 22px; padding-right: 22px; }
  .site-header .container { --nav-inset: 22px; flex-wrap: nowrap; }
  .site-header .navbar-brand { margin-right: .5rem; }
  /* The header stays one line on phones; the menu drops down over the page below it. */
  .site-header .navbar-collapse { position: absolute; top: calc(100% + 18px); left: 0; right: 0; z-index: 1030; padding: 4px var(--nav-inset) 12px; background: #16181a; border-bottom: 1px solid #71757c4d; box-shadow: 0 12px 24px #0008; }
  .site-header { padding: 18px 0; }
  .brand { font-size: 1.25rem; }
  .brand img { width: 26px; }
  .hero { padding: 45px 0 35px; min-height: 0; }
  .hero-art { min-height: 355px; max-width: 400px; margin: 0 auto; }
  .hero-die { width: 170px; }
  .orbital { width: 245px; height: 245px; }
  .orbital-two { width: 282px; height: 282px; }
  .art-caption { font-size: .5rem; bottom: 19px; }
  .star-one { top: 20px; right: 23px; }
  .star-two { bottom: 22px; left: 22px; font-size: .65rem; }
  .steps { padding: 25px 0; }
  .step-number { margin-bottom: 10px; }
  .auth-layout { padding: 40px 0; min-height: 0; }
  .auth-panel { padding: 25px; max-width: none; margin-bottom: 25px; }
  .quote { display: none; }
  .page-heading { padding-top: 32px; }
  .page-heading h1 { font-size: 2.3rem; }
  .footer-links { flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .footer-disclosure { flex-basis: 100%; }
  .marketing-heading { padding: 36px 0 28px; }
  .marketing-grid { grid-template-columns: 1fr; }
  .marketing-card, .marketing-cta { padding: 24px; }
  .field-note { padding: 24px; }
  .journey { gap: 8px 15px; }
  .hero .btn-lg { padding: .8rem 1rem; }
  .sheet-heading { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
/* Admin: dense, tabley lists that stack on phones. */
.admin-page { padding: 28px 0 48px; }
.admin-section { margin-top: 28px; }
.admin-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.admin-bar h1 a, .admin-bar h1 a:hover { color: var(--muted); text-decoration: none; }
.admin-bar span { color: var(--muted); font-size: .8rem; font-weight: 400; margin-left: 6px; }
.data-link { font-size: .8rem; text-decoration: none; white-space: nowrap; }
.data-link:hover { text-decoration: underline; }
.data-list { border: 1px solid var(--line); border-radius: 6px; background: #1a1c1f; overflow: hidden; }
.data-row { position: relative; display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1fr) 8.5rem 1.25rem; gap: 4px 16px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); font-size: .9rem; }
.data-row:first-child { border-top: 0; }
.data-row:not(.data-head):hover { background: #ffffff08; }
.data-head { font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 8px; padding-bottom: 8px; background: #ffffff05; }
.data-main { min-width: 0; display: flex; flex-direction: column; }
.data-main strong, .data-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-main small, .data-num small, .data-date { color: var(--muted); font-size: .8rem; }
.data-tag { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--silver); }
.data-num { font-variant-numeric: tabular-nums; }
.data-more { padding: 12px; text-align: center; border-top: 1px solid var(--line); font-size: .8rem; }
.data-more.htmx-request a { visibility: hidden; }
/* The arrow opens the row; its overlay makes the whole row the click target. */
.data-go { color: var(--muted); text-decoration: none; text-align: right; }
.data-go::after { content: ''; position: absolute; inset: 0; }
.data-row:hover .data-go, .data-go:focus-visible { color: var(--ink); }
.data-empty { padding: 14px 16px; color: var(--muted); font-size: .85rem; }
.data-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--line); }
.data-facts > div { background: #1a1c1f; padding: 10px 16px; min-width: 0; }
.data-facts > .wide { grid-column: 1 / -1; }
.data-facts dt { font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.data-facts dd { margin: 2px 0 0; font-size: .9rem; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .data-head { display: none; }
  .data-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .data-main { grid-column: 1 / -2; }
  .data-go { grid-row: 1; grid-column: -2; }
}
/* An ended campaign: still readable, visibly finished. */
.ended-note { padding: 12px 16px; border: 1px solid var(--line); border-left: 2px solid var(--parchment); background: #c6b79a0d; font-size: .9rem; color: var(--muted); }
.ended-note strong { color: var(--ink); }
.ended-campaigns .campaign-card { opacity: .7; }
/* Dice thrown over the page (dice.js). Clicks pass through to the page underneath. */
.dice-overlay { position: fixed; inset: 0; z-index: 1075; pointer-events: none; background: radial-gradient(ellipse at center, #0000 35%, #0008 100%); opacity: 0; transition: opacity .35s ease; }
.dice-overlay.show { opacity: 1; }
.dice-overlay canvas { display: block; width: 100%; height: 100%; }
.dice-caption { position: absolute; left: 50%; bottom: 11%; transform: translate(-50%, 14px); opacity: 0; transition: opacity .35s ease, transform .35s ease; text-align: center; white-space: nowrap; }
.dice-caption.show { opacity: 1; transform: translate(-50%, 0); }
.dice-title { font-size: .7rem; font-weight: 750; letter-spacing: .19em; text-transform: uppercase; color: #d9cdb5; text-shadow: 0 1px 8px #000; }
.dice-total { font: 700 clamp(3rem, 12vw, 4.4rem)/1.05 Georgia, serif; color: #f3e2b8; text-shadow: 0 3px 22px #000d; }
.dice-detail { font-size: .85rem; color: #cfc6b4; text-shadow: 0 1px 8px #000; }
.dice-caption.crit .dice-total { color: #ffd76a; text-shadow: 0 0 26px #ffb02e, 0 3px 18px #000c; }
.dice-caption.crit .dice-detail { color: #ffd76a; font-weight: 700; letter-spacing: .08em; }
.dice-caption.fumble .dice-total, .dice-caption.fumble .dice-detail { color: #ff8a7a; }
/* A turn roll: Roll sits beside "You're up!", and the GM calls it with big stacked buttons. */
.turn-callout-roll { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.verdict-actions { display: grid; gap: 10px; margin-top: 6px; }
.verdict-actions .btn { font-size: 1.15rem; font-weight: 700; padding: .9rem 1rem; }
.verdict-success { background: #2c8a4b; border: 1px solid #4cc174; color: #fff; }
.verdict-success:hover, .verdict-success:focus-visible { background: #35a35a; border-color: #6fe096; color: #fff; }
.verdict-failure { background: #a8271e; border: 1px solid #e0584a; color: #fff; }
.verdict-failure:hover, .verdict-failure:focus-visible { background: #c3302a; border-color: #ff7a6c; color: #fff; }
/* What the player sees when the GM calls it. Clicks pass through. */
.verdict-layer { position: fixed; inset: 0; z-index: 1080; pointer-events: none; overflow: hidden; }
.verdict-layer.success { background: radial-gradient(ellipse at center, #0000 45%, #1f9a4c40 100%); }
.verdict-layer.failure { background: radial-gradient(ellipse at center, #0000 45%, #b8231a40 100%); }
.verdict-word { position: absolute; left: 50%; top: 42%; font: 700 clamp(3rem, 13vw, 5.5rem)/1 Georgia, serif; white-space: nowrap; }
.verdict-layer.success .verdict-word { color: #7ef0a4; text-shadow: 0 0 28px #2fbf63, 0 4px 20px #000c; }
.verdict-layer.failure .verdict-word { color: #ff8a7e; text-shadow: 0 0 28px #d23a2e, 0 4px 20px #000c; }
.verdict-thumb { position: absolute; left: 0; top: 0; filter: drop-shadow(0 4px 8px #0007); }
.verdict-thumb svg { display: block; width: 100%; height: 100%; }
/* Rolls waiting behind the GM's verdict card, and the × that okays them all. */
.verdict-waiting { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); font-size: .95rem; font-variant-numeric: tabular-nums; }
.verdict-waiting[hidden] { display: none; }
.verdict-clear { width: 28px; height: 28px; padding: 0; line-height: 1; border: 0px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font-size: 1.1rem; }
.verdict-clear:hover, .verdict-clear:focus-visible { color: var(--ink); border-color: var(--muted); }