:root {
  --table: #1b1510; --table-2: #241c15; --leather: #2c2219; --leather-2: #36291e; --line: #4a3a2a;
  --cream: #efe4cc; --cream-dim: #b9aa8d; --gold: #d2ac5f; --gold-2: #e3c27f;
  --paper: #f7f0e1; --paper-2: #efe4cc; --ink: #2b2118; --ink-2: #5b4a3a; --rust: #9b2f1f; --rule: #c9b48c;
  --serif: 'Alegreya', Georgia, 'Iowan Old Style', serif; --sc: 'Alegreya SC', 'Alegreya', Georgia, serif; --sans: 'Alegreya Sans', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--table); background-image: radial-gradient(ellipse at 50% -10%, #3a2b1e 0%, transparent 60%), repeating-linear-gradient(92deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px); color: var(--cream); font-family: var(--sans); font-size: 17px; line-height: 1.55; min-height: 100vh; }
a { color: var(--gold-2); }
a:hover { color: #f0d79e; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* header */
header.site { display: flex; align-items: center; gap: 18px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: rgba(15,11,8,.55); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); }
.logo { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; font-family: var(--sc); font-weight: 700; font-size: 19px; letter-spacing: .04em; white-space: nowrap; }
.logo .d20 { width: 28px; height: 28px; color: var(--gold); }
nav.gens { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
nav.gens::-webkit-scrollbar { display: none; }
nav.gens a { color: var(--cream-dim); text-decoration: none; padding: 6px 10px; border-radius: 6px; font-size: 15px; white-space: nowrap; }
nav.gens a:hover { color: var(--cream); background: var(--leather); }
nav.gens a[aria-current] { color: var(--table); background: var(--gold); }
.prep-link { color: var(--cream); text-decoration: none; font-size: 15px; white-space: nowrap; border: 1px solid var(--line); padding: 5px 12px; border-radius: 20px; }
.prep-count { display: inline-block; background: var(--rust); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 13px; margin-left: 4px; }

main { max-width: 1180px; margin: 0 auto; padding: 0 24px 64px; }

/* intro */
.intro, .hero { max-width: 760px; padding: 40px 0 8px; }
h1 { font-family: var(--serif); font-weight: 700; font-size: 44px; line-height: 1.08; margin: 0 0 14px; color: var(--cream); letter-spacing: -.01em; }
.hero h1 { font-size: 52px; }
.lead { font-size: 19px; color: var(--cream-dim); margin: 0 0 18px; }

/* workbench */
.workbench { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 18px; }
.controls { position: sticky; top: 76px; background: var(--leather); background-image: linear-gradient(180deg, var(--leather-2), var(--leather)); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-wrap: wrap; gap: 14px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); }
.field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 100%; }
.field.narrow { flex: 1 1 calc(50% - 6px); }
.field label { font-family: var(--sc); font-size: 14px; letter-spacing: .06em; color: var(--gold-2); }
.field label em { font-family: var(--sans); font-style: normal; color: var(--cream-dim); opacity: .7; font-size: 12px; letter-spacing: 0; margin-left: 4px; }
.field input, .field select, .field textarea { width: 100%; background: #1d1611; color: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 16px; }
.field textarea { resize: vertical; min-height: 64px; }
.field input::placeholder, .field textarea::placeholder { color: #7d6d58; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
.roll { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(180deg, #c33e28, var(--rust)); color: #fff6e6; border: 1px solid #5d1a10; border-radius: 10px; padding: 13px 18px; font-family: var(--sc); font-size: 20px; font-weight: 700; letter-spacing: .06em; cursor: pointer; box-shadow: 0 3px 0 #5d1a10, 0 6px 14px rgba(0,0,0,.35); transition: transform .08s; }
.roll:hover { filter: brightness(1.08); }
.roll:active { transform: translateY(2px); box-shadow: 0 1px 0 #5d1a10; }
.roll .d20 { width: 24px; height: 24px; }
.roll[disabled] { opacity: .75; cursor: wait; }
.roll[disabled] .d20 { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hint { flex: 1 1 100%; margin: -4px 0 0; text-align: center; font-size: 13px; color: var(--cream-dim); opacity: .75; }

.output { min-width: 0; }
.empty, .notice { border: 2px dashed var(--line); border-radius: 12px; padding: 48px 24px; text-align: center; color: var(--cream-dim); }
.notice { border-style: solid; border-color: #7a3a2a; color: #f0c9b8; background: rgba(155,47,31,.12); padding: 20px; }
.rolling { display: grid; place-items: center; gap: 14px; min-height: 320px; border-radius: 12px; background: rgba(247,240,225,.04); border: 1px solid var(--line); color: var(--cream-dim); font-family: var(--sc); letter-spacing: .08em; }
.rolling .d20 { width: 64px; height: 64px; color: var(--gold); animation: tumble 1.1s cubic-bezier(.5,.1,.5,.9) infinite; }
@keyframes tumble { 0% { transform: rotate(0) translateY(0); } 50% { transform: rotate(200deg) translateY(-14px); } 100% { transform: rotate(360deg) translateY(0); } }

/* toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.toolbar button, .prep-actions button { display: inline-flex; align-items: center; gap: 6px; background: var(--leather); color: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; font-size: 15px; cursor: pointer; }
.toolbar button:hover, .prep-actions button:hover { border-color: var(--gold); color: #fff; }
.toolbar svg, .prep-actions svg { width: 17px; height: 17px; }
.toolbar button.on { background: var(--gold); color: var(--table); border-color: var(--gold); }
.example-label { font-family: var(--sc); letter-spacing: .08em; font-size: 13px; color: var(--table); background: var(--cream-dim); padding: 3px 10px; border-radius: 4px; margin-right: auto; }

/* the card: parchment */
.card { background: var(--paper); background-image: radial-gradient(ellipse at top left, rgba(255,255,255,.6), transparent 55%), radial-gradient(ellipse at bottom right, rgba(201,180,140,.25), transparent 60%); color: var(--ink); border-radius: 6px; padding: 30px 34px 26px; box-shadow: 0 1px 0 #fff inset, 0 18px 40px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3); font-family: var(--serif); font-size: 18px; line-height: 1.55; position: relative; }
.card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--rust); border-radius: 6px 6px 0 0; }
.card a { color: var(--rust); }
.card-head h2 { font-family: var(--serif); font-weight: 700; font-size: 32px; line-height: 1.12; margin: 0; color: var(--ink); }
.card-head .sub { font-style: italic; color: var(--ink-2); margin: 4px 0 0; font-size: 18px; }
.meta { font-family: var(--sc); font-size: 15px; letter-spacing: .05em; color: var(--rust); margin: 10px 0 14px; border-bottom: 2px solid var(--rust); padding-bottom: 10px; }
.meta .dot { color: var(--rule); margin: 0 4px; }
.card h3 { font-family: var(--sc); font-weight: 700; font-size: 17px; letter-spacing: .08em; color: var(--rust); margin: 24px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--rule); }
.card p { margin: 0 0 10px; }
.card ul, .card ol { margin: 4px 0 10px; padding-left: 22px; }
.card li { margin-bottom: 7px; }
.card li::marker { color: var(--rust); }
.read-aloud { margin: 14px 0; padding: 14px 18px 14px 20px; background: #ece0c4; border-left: 4px solid #8a6f45; font-style: italic; border-radius: 0 6px 6px 0; }
.ra-label, .note-label { display: block; font-family: var(--sc); font-style: normal; font-size: 13px; letter-spacing: .1em; color: #8a6f45; margin-bottom: 2px; }
.dm-note, .voice-note, .rumor-note { margin: 14px 0; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 6px; background: rgba(255,255,255,.45); }
.dm-note .note-label { color: var(--rust); }
.voice-note { background: #2b2118; color: var(--paper); border-color: #2b2118; }
.voice-note .note-label { color: var(--gold-2); }
.tag { display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 10px; vertical-align: 2px; margin-left: 2px; }
.tag-true { background: #dfe8cf; color: #3f5a1f; } .tag-false { background: #f0d3cb; color: #8a2a17; } .tag-half { background: #f1e2b8; color: #7a5a12; }
.tag-gp { background: #efe0b4; color: #6e5212; }
.tag-common { background: #e6e1d6; color: #555; } .tag-uncommon { background: #d9ead0; color: #2f6a20; } .tag-rare { background: #d5e2f3; color: #234d8a; } .tag-veryrare { background: #e8d9f0; color: #5d2a85; } .tag-legendary { background: #f6dfc2; color: #95500d; }
a.chain { font-family: var(--sans); font-size: 14px; white-space: nowrap; text-decoration: none; border-bottom: 1px dotted; margin-left: 4px; }
.next-steps { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 2px solid var(--rust); font-family: var(--sans); }
.next-steps span { font-family: var(--sc); letter-spacing: .06em; color: var(--ink-2); font-size: 15px; margin-right: 4px; }
.next-steps a { text-decoration: none; background: var(--ink); color: var(--paper); padding: 6px 12px; border-radius: 16px; font-size: 15px; }
.next-steps a:hover { background: var(--rust); color: #fff; }
.table-wrap { overflow-x: auto; margin: 6px 0 10px; }
.card table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 16px; }
.card th { text-align: left; font-family: var(--sc); font-weight: 700; color: var(--rust); border-bottom: 2px solid var(--rust); padding: 4px 8px; letter-spacing: .04em; }
.card td { padding: 6px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.card tr:nth-child(even) td { background: rgba(201,180,140,.12); }
table.creatures td:last-child { font-family: var(--serif); font-size: 16px; min-width: 200px; }
table.menu td:last-child { white-space: nowrap; text-align: right; font-weight: 700; }
.math { font-family: var(--sans); font-size: 15px; color: var(--ink-2); }
.diff { text-transform: uppercase; letter-spacing: .06em; }
.diff-easy { color: #3f6a1f; } .diff-medium { color: #8a6a12; } .diff-hard { color: #b2531a; } .diff-deadly { color: #9b2f1f; }
.xp-bar { margin: 14px 0 6px; font-family: var(--sans); }
.bar { position: relative; height: 26px; border-radius: 5px; overflow: hidden; background: #e2d6bb; }
.seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 6px; }
.seg em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(43,33,24,.65); }
.seg-easy { background: #cfdcb8; } .seg-medium { background: #ecd99a; } .seg-hard { background: #eab98d; } .seg-deadly { background: #dc9585; }
.marker { position: absolute; top: -3px; bottom: -3px; width: 4px; margin-left: -2px; background: var(--ink); border-radius: 2px; box-shadow: 0 0 0 2px var(--paper); }
.bar-legend { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ink-2); margin-top: 5px; }
.stat-strip { display: flex; flex-wrap: wrap; gap: 0; margin: 4px 0 10px; border: 2px solid var(--rust); border-radius: 6px; overflow: hidden; font-family: var(--sans); }
.stat-strip div { padding: 6px 14px; border-right: 1px solid var(--rule); }
.stat-strip div:last-child { border-right: 0; }
.stat-strip dt { font-family: var(--sc); font-size: 12px; letter-spacing: .08em; color: var(--rust); }
.stat-strip dd { margin: 0; font-weight: 700; }
.provenance { font-family: var(--sans); font-size: 13.5px; color: var(--ink-2); margin-top: 18px; font-style: italic; }
/* maps */
.map-fig { margin: 14px -8px 16px; }
.map { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 0 0 1px var(--rule); background: #fbf7ee; }
.dungeon-map { max-height: 620px; }
.map-fig figcaption { font-family: var(--sans); font-size: 13.5px; color: var(--ink-2); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.zkey { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--ink); margin-left: 6px; vertical-align: -2px; }
.zone-0 { background: #f6ead2; } .zone-1 { background: #e6ecdc; } .zone-2 { background: #ece0e6; } .zone-3 { background: #e0e6ee; }
.skey { color: var(--rust); font-weight: 700; margin-left: 10px; }
.room-key { list-style: none; padding: 0; counter-reset: none; }
.room-key li { position: relative; padding: 2px 0 8px 44px; margin-bottom: 8px; border-bottom: 1px dotted var(--rule); }
.room-key li::before { content: attr(value); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--sans); font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.room-key p { margin: 2px 0 0; }
.room-key .secret { font-size: 16px; color: var(--ink-2); }
.zone-chip { font-family: var(--sans); font-size: 12px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--ink-2); vertical-align: 2px; }
/* stat block */
.statblock { background: #fdf6e3; border: 1px solid var(--rule); border-top: 4px solid var(--rust); border-bottom: 4px solid var(--rust); padding: 12px 16px; margin: 12px 0; font-family: var(--sans); font-size: 16px; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.statblock hr { border: 0; height: 2px; background: linear-gradient(90deg, var(--rust), transparent); margin: 8px 0; }
.sb-name { font-family: var(--sc); font-size: 24px; font-weight: 700; color: var(--rust); line-height: 1.1; }
.sb-type { font-style: italic; color: var(--ink-2); }
.sb-line { margin: 2px 0 !important; color: var(--ink); }
.sb-line strong { color: var(--rust); }
.pb { margin-left: 14px; }
.sb-abilities { display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; color: var(--ink); }
.sb-abilities b { display: block; color: var(--rust); font-size: 14px; }
.sb-abilities span { font-size: 15px; }
.statblock h4 { font-family: var(--sc); color: var(--rust); font-size: 18px; margin: 12px 0 4px; border-bottom: 1px solid var(--rust); }
.sb-feat { margin: 0 0 6px !important; }

/* about / seo */
.about { max-width: 780px; margin: 64px 0 0; color: var(--cream-dim); font-size: 17px; }
.about h2 { font-family: var(--serif); color: var(--cream); font-size: 28px; margin: 0 0 10px; }
.about h3 { font-family: var(--sc); color: var(--gold-2); font-size: 18px; letter-spacing: .06em; margin: 28px 0 8px; }
.about table.ref { border-collapse: collapse; margin: 14px 0; font-size: 15px; width: 100%; max-width: 640px; }
.about table.ref th, .about table.ref td { border-bottom: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.about table.ref th { color: var(--gold-2); font-family: var(--sc); letter-spacing: .04em; }
.about table.compact td, .about table.compact th { padding: 3px 10px; }
.faq dt { color: var(--cream); font-weight: 700; margin-top: 14px; }
.faq dd { margin: 2px 0 0; }
.muted { opacity: .8; font-size: 15px; }

/* tiles */
.more { margin-top: 56px; }
.more h2 { font-family: var(--serif); font-size: 26px; color: var(--cream); margin: 0 0 14px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tiles.small { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tile { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 2px 12px; padding: 14px 16px; background: var(--leather); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--cream); transition: border-color .15s, transform .15s; }
.tile:hover { border-color: var(--gold); transform: translateY(-2px); color: var(--cream); }
.tile-icon { grid-row: span 2; color: var(--gold); }
.tile-icon svg { width: 40px; height: 40px; }
.tile-name { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.2; }
.tile-tag { font-size: 14px; color: var(--cream-dim); line-height: 1.35; }
.tiles.small .tile-tag { display: none; }
.tiles.small .tile { grid-template-columns: 30px 1fr; align-items: center; }
.tiles.small .tile-icon { grid-row: auto; }
.tiles.small .tile-icon svg { width: 28px; height: 28px; }

/* home */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.feature { display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-radius: 8px; overflow: hidden; text-decoration: none; box-shadow: 0 14px 30px rgba(0,0,0,.4); transition: transform .15s; }
.feature:hover { transform: translateY(-3px); color: var(--ink); }
.feature-art { aspect-ratio: 16 / 10; overflow: hidden; background: #f1e8d2; border-bottom: 4px solid var(--rust); }
.feature-art svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-art .hoard-art, .feature-art .hoard-art svg { height: 100%; }
.feature-text { padding: 16px 18px 18px; }
.feature-text h2 { font-family: var(--serif); font-size: 24px; margin: 0 0 4px; }
.feature-text p { margin: 0 0 10px; color: var(--ink-2); font-size: 16px; }
.go { font-family: var(--sc); font-weight: 700; color: var(--rust); letter-spacing: .06em; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); }
.principles h3 { font-family: var(--sc); color: var(--gold-2); letter-spacing: .05em; font-size: 19px; margin: 0 0 8px; }
.principles p { color: var(--cream-dim); margin: 0; font-size: 16px; }

/* prep */
.prep-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.prep-actions .quiet { background: transparent; color: var(--cream-dim); }
.prep-list { display: grid; gap: 28px; margin-top: 24px; max-width: 860px; }
.prep-item .toolbar { justify-content: flex-end; }

/* footer, toast */
footer.site { max-width: 1180px; margin: 40px auto 0; padding: 26px 24px 40px; border-top: 1px solid var(--line); color: var(--cream-dim); font-size: 14px; }
footer.site .links a { color: var(--cream-dim); }
footer.site .legal { opacity: .7; font-size: 13px; max-width: 760px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--cream); color: var(--table); padding: 10px 18px; border-radius: 22px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 960px) {
  .workbench { grid-template-columns: 1fr; }
  .controls { position: static; }
  .features, .principles { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  header.site { flex-wrap: wrap; padding: 10px 16px; gap: 8px; position: static; }
  nav.gens { order: 3; flex-basis: 100%; }
  .prep-link { margin-left: auto; }
  main { padding: 0 16px 48px; }
  h1, .hero h1 { font-size: 34px; }
  .lead { font-size: 17px; }
  .card { padding: 24px 18px 20px; font-size: 17px; }
  .card-head h2 { font-size: 26px; }
  .toolbar button span { display: none; }
  .toolbar button { padding: 8px 10px; }
  .sb-abilities { grid-template-columns: repeat(3, 1fr); row-gap: 6px; }
  .map-fig { margin: 12px -4px; }
}

@media print {
  body { background: #fff; color: #000; }
  header.site, footer.site, .intro, .hero, .controls, .about, .more, .toolbar, .next-steps, .toast, .prep-actions, a.chain { display: none !important; }
  main { padding: 0; max-width: none; }
  .workbench { display: block; margin: 0; }
  .card { box-shadow: none; background: #fff; padding: 0; break-inside: auto; }
  .card::before { display: none; }
  .prep-item { break-after: page; }
  .read-aloud, .dm-note { break-inside: avoid; }
}

/* live draft while the model writes */
.drafting { font-family: var(--sc); letter-spacing: .08em; color: var(--gold-2); font-size: 14px; margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; }
.drafting::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--rust); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.card.draft p { color: var(--ink-2); }
.card.draft p:last-child { color: var(--ink); }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--rust); margin-left: 2px; vertical-align: -2px; animation: pulse .8s step-end infinite; }
.prep-count[hidden] { display: none; }
@media (max-width: 960px) {
  .workbench { display: flex; flex-direction: column; }
  .workbench .output:has(.result:not([data-example])) { order: -1; }
}