/* ─────────────────────────────────────────────────────────────
   GenFable — "Fangorn" theme
   An ancient, mist-wreathed forest: bark, moss, deep canopy dark,
   parchment ink, and the warm amber of a lantern carried beneath
   old trees. Carved-wood UI, illuminated-manuscript type.
   ───────────────────────────────────────────────────────────── */

:root {
  /* deep canopy darks */
  --bg:        #0b0f0a;
  --bg-2:      #11160e;
  /* bark & moss panels */
  --panel:     #161d13;
  --panel-2:   #1e261a;
  --panel-3:   #28311f;
  /* parchment & lichen text */
  --ink:       #ece4cf;
  --muted:     #9aa67f;
  --faint:     #6f7a5b;
  /* lantern amber + living moss accents */
  --accent:    #e3a948;   /* lantern gold */
  --accent-2:  #6f9450;   /* moss green */
  --ember:     #c8652f;   /* dying-coal orange */
  /* river / damp stone for the player's voice */
  --user:      #243a33;
  --user-edge: #3a5a4d;
  /* mossy bark borders */
  --border:    #2b3420;
  --border-2:  #3a472b;

  --radius: 14px;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --display: "Cinzel", "EB Garamond", Georgia, serif;
  --shadow: 0 18px 40px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.06rem;
  color: var(--ink);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 540px at 72% -12%, rgba(227, 169, 72, .10) 0%, transparent 60%),
    radial-gradient(900px 700px at 10% 110%, rgba(111, 148, 80, .10) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 70%);
  background-attachment: fixed;
}

/* Drifting canopy light + vignette — sits above the background, below content.
   Two faint dappled-light pools and a heavy edge shadow, like standing deep
   beneath the trees with one shaft of sun breaking through. */
.canopy {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(620px 320px at 80% 4%, rgba(227, 169, 72, .12), transparent 70%),
    radial-gradient(520px 420px at 18% 88%, rgba(86, 120, 70, .10), transparent 70%);
  box-shadow: inset 0 0 240px 60px rgba(0, 0, 0, .75);
  opacity: .9;
}
/* keep real content above the atmosphere layer */
.site-header, .container, .drawer, .drawer-overlay { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: #f1c876; text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, .brand {
  font-family: var(--display);
  letter-spacing: .02em;
  font-weight: 600;
}

/* ── header ─────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(12, 16, 9, .85), rgba(12, 16, 9, .2));
  backdrop-filter: blur(2px);
}
.brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .06em;
  text-shadow: 0 1px 0 #000;
}
.brand:hover { text-decoration: none; color: #fff; }
.brand-mark { color: var(--accent); text-shadow: 0 0 14px rgba(227, 169, 72, .5); }
.tagline {
  color: var(--muted);
  font-size: .95rem;
  font-style: italic;
  letter-spacing: .03em;
}
.user-nav { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.user-nav .who { color: var(--muted); font-size: .95rem; font-style: italic; }

/* On small screens the header earns its keep in one tight line: no tagline,
   no email — just menu · brand · log out. */
@media (max-width: 860px) {
  .site-header { padding: 10px 14px; gap: 10px; align-items: center; }
  .site-header .tagline { display: none; }
  .site-header .brand { font-size: 1.25rem; white-space: nowrap; }
}
@media (max-width: 640px) {
  .user-nav .who { display: none; }
  /* the place NAME wins the narrow line; "Held by …" is colour, not control */
  .place-meta { display: none; }
}
.inline { display: inline; margin: 0; }
.btn.small { padding: 6px 12px; font-size: .9rem; }

/* ── auth ───────────────────────────────────────────────── */
.auth-wrap { display: flex; justify-content: center; padding-top: 32px; }
.auth-form { width: 100%; max-width: 390px; display: flex; flex-direction: column; gap: 14px; }
.auth-form h1 { margin: 0 0 6px; font-size: 1.7rem; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.auth-form .muted { font-weight: 400; }
.auth-form .btn.primary { align-self: stretch; text-align: center; }
.switch { text-align: center; margin: 4px 0 0; }
.flash {
  background: rgba(200, 101, 47, .14);
  border: 1px solid var(--ember);
  border-left-width: 4px;
  color: #f4c39d;
  padding: 11px 15px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-style: italic;
}

.container { max-width: 820px; width: 100%; margin: 0 auto; padding: 36px 20px 90px;
  flex: 1 0 auto; }

/* ── menu drawer ────────────────────────────────────────── */
.menu-toggle {
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.menu-toggle:hover { background: var(--panel-3); border-color: var(--accent); }
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 268px;
  background:
    linear-gradient(180deg, rgba(40, 49, 31, .6), transparent 220px),
    var(--panel);
  border-right: 1px solid var(--border-2);
  box-shadow: 8px 0 40px rgba(0, 0, 0, .5);
  transform: translateX(-100%);
  transition: transform .26s ease;
  z-index: 40;
  padding-top: 74px;
}
.drawer.open { transform: translateX(0); }
.drawer-nav { display: flex; flex-direction: column; padding: 14px; gap: 4px; }
.drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 600;
  font-family: var(--display);
  font-size: .98rem;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.drawer-link span { font-size: 1.2rem; }
.drawer-link:hover { background: var(--panel-2); border-color: var(--border-2); text-decoration: none; }
.drawer-link.active {
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  border-color: var(--accent-2);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--accent);
}
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 3, .62);
  backdrop-filter: blur(1px);
  z-index: 35;
}

/* ── hero / headings ────────────────────────────────────── */
.hero { margin-bottom: 8px; }
.hero h1 {
  font-size: 2.3rem;
  margin: 0 0 8px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
.hero > p { color: var(--muted); margin-top: 0; font-size: 1.1rem; }

/* ── cards (carved bark panels) ─────────────────────────── */
.card {
  background:
    linear-gradient(180deg, rgba(40, 49, 31, .35), transparent 90px),
    var(--panel);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(236, 228, 207, .04);
}

.create-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.create-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.create-form .muted { font-weight: 400; }

/* ── form fields ────────────────────────────────────────── */
textarea, input[type="text"], input[type="email"], input[type="password"], select {
  width: 100%;
  background: #10150d;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  color: var(--ink);
  padding: 12px 14px;
  font: inherit;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
textarea::placeholder, input::placeholder { color: var(--faint); font-style: italic; }
textarea:focus, input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(227, 169, 72, .15);
}
select { appearance: none; cursor: pointer; }
select option { background: var(--panel-2); color: var(--ink); }

/* ── buttons (aged brass & carved wood) ─────────────────── */
.btn {
  cursor: pointer;
  font-family: var(--display);
  font-size: .96rem;
  letter-spacing: .03em;
  border: 1px solid var(--border-2);
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  color: var(--ink);
  padding: 11px 18px;
  border-radius: 10px;
  transition: transform .05s ease, background .15s ease, border-color .15s, opacity .15s ease;
}
.btn:hover { background: linear-gradient(180deg, #313c25, #28311f); border-color: var(--accent-2); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, #f0bd5e, var(--accent));
  border: 1px solid #b9842f;
  color: #2a1d07;
  font-weight: 700;
  align-self: flex-start;
  box-shadow: 0 6px 18px rgba(227, 169, 72, .25), inset 0 1px 0 rgba(255, 255, 255, .35);
  text-shadow: none;
}
.btn.primary:hover { background: linear-gradient(180deg, #f6c969, #eab052); border-color: #d49a3a; }
.btn[disabled] { opacity: .55; cursor: progress; }
/* keyboard travellers get a lantern-gold ring */
.btn:focus-visible, .tool-btn:focus-visible, .duel-slot:focus-visible,
button.doll-slot:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.btn.link { background: none; border: none; color: var(--muted); padding: 4px 6px; }
.btn.link:hover { color: var(--accent); background: none; text-decoration: underline; }

/* ── section heads ──────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.section-head h1, .section-head h2 { margin: 0; }

.library h2 { font-size: 1.3rem; }
.empty { text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 40px 22px; }
.empty .muted { font-style: italic; font-size: 1.1rem; }

/* ── example starter cards ──────────────────────────────── */
.examples { margin-top: 40px; }
.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.example-card {
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .1s ease, border-color .15s ease, box-shadow .15s;
}
.example-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 22px rgba(227, 169, 72, .12);
}
.example-card .meta { color: var(--accent-2); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--display); }
.example-card h3 { margin: 0; font-size: 1.15rem; }
.example-card .pitch { color: var(--muted); margin: 0; flex: 1; }
.example-card .play-cue { color: var(--accent); font-weight: 600; font-size: .85rem; font-family: var(--display); }

.custom { margin-top: 44px; }
.custom h2 { font-size: 1.3rem; }

/* ── generating overlay ─────────────────────────────────── */
.generating-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(11, 15, 10, .82), rgba(4, 6, 3, .96));
  backdrop-filter: blur(3px);
}
/* The class sets display:flex, which would otherwise override the [hidden]
   attribute — make hidden win so the overlay stays out of view until needed. */
.generating-overlay[hidden] { display: none; }
.generating-box { text-align: center; color: var(--ink); max-width: 380px; padding: 0 20px; }
.generating-box p { font-size: 1.15rem; font-family: var(--display); letter-spacing: .02em; }
.generating-box .small-note { font-size: .85rem; margin-top: 8px; font-family: var(--serif); font-style: italic; }
.generating-box .gen-error-icon { font-size: 2rem; margin: 0 0 6px; }
#gen-error #gen-error-msg { color: #f4c39d; margin-bottom: 16px; }
.spinner {
  width: 50px;
  height: 50px;
  margin: 0 auto 18px;
  border: 3px solid var(--border-2);
  border-top-color: var(--accent);
  border-right-color: var(--accent-2);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-shadow: 0 0 24px rgba(227, 169, 72, .25);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── placeholder (DND) page ─────────────────────────────── */
.placeholder { text-align: center; padding-top: 48px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.placeholder-icon { font-size: 3.4rem; filter: drop-shadow(0 0 18px rgba(227, 169, 72, .35)); }
.placeholder h1 { margin: 0; font-size: 2.2rem; }
.placeholder .muted { max-width: 480px; font-size: 1.1rem; }
.badge {
  background: linear-gradient(180deg, var(--accent-2), #557039);
  color: #f3f0e2;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  font-family: var(--display);
  letter-spacing: .06em;
  border: 1px solid #466030;
}

/* ── story library list ─────────────────────────────────── */
.story-list { list-style: none; padding: 0; display: grid; gap: 16px; }
.story-card { position: relative; transition: transform .1s ease, border-color .15s, box-shadow .15s; }
.story-card:hover { transform: translateY(-2px); border-color: var(--accent-2); box-shadow: var(--shadow), 0 0 18px rgba(111, 148, 80, .12); }
.story-card a { display: block; color: var(--ink); }
.story-card a:hover { text-decoration: none; }
.story-card h3 { margin: 0 0 4px; font-size: 1.3rem; }
.story-card .meta { color: var(--accent-2); font-size: .78rem; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .07em; font-family: var(--display); }
.story-card .summary { color: var(--muted); margin: 0; }
.story-card .delete-story { position: absolute; top: 16px; right: 14px; }

.muted { color: var(--muted); }

/* ── story view ─────────────────────────────────────────── */
.story-head { border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 4px; }
.story-head h1 { margin: 10px 0 4px; font-size: 2.1rem; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.story-head .meta { color: var(--accent-2); margin: 0; text-transform: uppercase; letter-spacing: .07em; font-family: var(--display); font-size: .82rem; }
.story-head .setting { color: var(--muted); font-style: italic; margin-top: 6px; }
.back { display: inline-block; margin-bottom: 6px; }

.transcript { display: flex; flex-direction: column; gap: 18px; margin: 26px 0; }
.turn { display: flex; }
.turn.user { justify-content: flex-end; }
.bubble {
  max-width: 88%;
  padding: 16px 18px;
  border-radius: 14px;
  white-space: pre-wrap;
  overflow-wrap: break-word;   /* one pasted URL must not widen the page */
  font-size: 1.08rem;
  line-height: 1.75;
}
.turn.assistant .bubble {
  background:
    linear-gradient(180deg, rgba(40, 49, 31, .3), transparent 70px),
    var(--panel);
  border: 1px solid var(--border-2);
  border-top-left-radius: 4px;
  box-shadow: var(--shadow);
}
.turn.user .bubble {
  background: linear-gradient(180deg, #2a4239, var(--user));
  border: 1px solid var(--user-edge);
  border-top-right-radius: 4px;
  color: #dfe9df;
}

/* Give the story page room for a side illustration. */
.container:has(.story-view) { max-width: 1120px; }

/* ─────────────────────────────────────────────────────────────
   Landing / front page
   ───────────────────────────────────────────────────────────── */
.container:has(.landing) { max-width: 1040px; }
.landing { display: flex; flex-direction: column; gap: 56px; }

.btn.big { padding: 14px 26px; font-size: 1.06rem; }

/* ── hero banner ─────────────────────────────────────────── */
.hero-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: 22px;
  padding: 64px 44px 58px;
  text-align: center;
  background:
    radial-gradient(120% 100% at 50% -20%, rgba(227, 169, 72, .16), transparent 60%),
    linear-gradient(180deg, rgba(40, 49, 31, .5), transparent 240px),
    var(--panel);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(236, 228, 207, .05);
}
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(460px 260px at 22% 8%, rgba(111, 148, 80, .16), transparent 70%),
    radial-gradient(520px 300px at 82% 100%, rgba(200, 101, 47, .12), transparent 70%);
}
.hero-inner { position: relative; max-width: 680px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero-eyebrow {
  color: var(--accent-2); font-family: var(--display); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .14em; margin: 0 0 6px;
}
.hero-title {
  font-family: var(--display); font-size: clamp(2.4rem, 6vw, 3.6rem);
  margin: 0; line-height: 1.05; letter-spacing: .02em;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .6);
}
/* Invite-only badge (shown in the hero when CLOSED_BETA is on). */
.beta-badge {
  display: inline-block; margin: 0 0 12px; padding: 3px 12px;
  border: 1px solid var(--accent); border-radius: 999px;
  background: rgba(0, 0, 0, .22); color: var(--accent);
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
}
.beta-note { margin: -4px 0 4px; }
.hero-sub { color: var(--muted); font-size: 1.12rem; margin: 12px 0 6px; }
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.hero-cta .btn.primary { align-self: auto; }
.hero-note { color: var(--faint); font-size: .9rem; font-style: italic; margin: 14px 0 0; }

/* ── logged-in character dashboard ───────────────────────── */
.dash { margin-top: -20px; }
.dash-card { max-width: 560px; margin: 0 auto; }
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dash-name { font-family: var(--display); margin: 0; font-size: 1.5rem; }
.dash-head .meta { margin: 2px 0 0; color: var(--muted); }
.dash-flag {
  flex: none; font-family: var(--display); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid;
}
.dash-flag.alive { color: var(--accent-2); border-color: var(--accent-2); background: rgba(111, 148, 80, .12); }
.dash-flag.fallen { color: var(--ember); border-color: var(--ember); background: rgba(200, 101, 47, .12); }
.dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 18px 0 20px; }
.dash-stat.gold-stat { grid-column: 1 / -1; }
.dash-stat-top { display: flex; justify-content: space-between; align-items: baseline;
  font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.dash-enter { display: block; text-align: center; align-self: stretch; }

/* ── feature grid ────────────────────────────────────────── */
.pitch-h { font-family: var(--display); font-size: 1.6rem; text-align: center; margin: 0 0 26px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.feature { display: flex; flex-direction: column; gap: 8px;
  transition: transform .12s ease, border-color .15s, box-shadow .15s; }
.feature:hover { transform: translateY(-3px); border-color: var(--accent-2);
  box-shadow: var(--shadow), 0 0 22px rgba(111, 148, 80, .12); }
.feature-ico { font-size: 1.9rem; filter: drop-shadow(0 0 14px rgba(227, 169, 72, .28)); }
.feature h3 { margin: 2px 0 0; font-size: 1.16rem; }
.feature p { margin: 0; color: var(--muted); }

/* ── how to play ─────────────────────────────────────────── */
.steps { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }
.steps li { display: flex; gap: 16px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.step-n {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-weight: 700;
  color: #2a1d07; background: linear-gradient(180deg, #f0bd5e, var(--accent));
  border: 1px solid #b9842f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.steps h3 { margin: 4px 0 4px; font-size: 1.12rem; }
.steps p { margin: 0; color: var(--muted); }

/* ── closing call ────────────────────────────────────────── */
.closing { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 8px 0 20px; }
.closing .pitch-h { margin: 0; }
.closing .muted { margin: 0; font-size: 1.05rem; }

/* ── FAQ & legend (the traveller's guide, /faq) ──────────────── */
.faq-head { text-align: center; max-width: 720px; margin: 0 auto; }
.faq-head .hero-sub { margin-top: 10px; }
.faq-head a { color: var(--accent); }

.faq-list { display: flex; flex-direction: column; gap: 12px;
  max-width: 780px; margin: 0 auto; width: 100%; }
.faq-q { background: var(--panel); border: 1px solid var(--border-2);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; transition: border-color .15s; }
.faq-q[open] { border-color: var(--accent-2); }
.faq-q > summary {
  cursor: pointer; list-style: none; padding: 16px 20px;
  font-family: var(--display); font-size: 1.08rem; color: var(--ink);
  display: flex; align-items: center; gap: 12px;
}
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-q > summary::before {
  content: "❧"; flex: none; color: var(--accent-2); font-size: 1rem;
  transition: transform .18s ease; transform-origin: center;
}
.faq-q[open] > summary::before { transform: rotate(90deg); color: var(--accent); }
.faq-q > summary:hover { color: var(--accent); }
.faq-a { padding: 0 20px 18px 44px; color: var(--muted); }
.faq-a p { margin: 0 0 10px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a em { color: var(--ink); font-style: italic; }
.faq-a a { color: var(--accent); }

/* the legend — a grid of glyphs and what they mean */
.legend { max-width: 900px; margin: 0 auto; width: 100%;
  scroll-margin-top: 24px; }
.legend-intro { text-align: center; color: var(--muted); margin: -14px 0 26px; }
.legend-group { margin-bottom: 26px; }
.legend-h { font-family: var(--display); font-size: 1.02rem; color: var(--accent-2);
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px 20px; margin: 0; }
.legend-row { display: flex; align-items: baseline; gap: 12px;
  padding: 6px 0; margin: 0; }
.legend-row dt { flex: none; width: 58px; text-align: center; margin: 0; }
.legend-row dd { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.5; }
.legend-row dd strong { color: var(--ink); font-weight: 600; }
.legend-sym { font-size: 1.25rem; line-height: 1; }
.legend-sym.hp { color: var(--ember); }
.legend-word { font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: .92rem; white-space: nowrap; }
.legend-word.hit { color: var(--accent-2); }
.legend-word.miss { color: var(--faint); }
.legend-word.crit { color: var(--accent); }
.fx-protected { color: var(--accent); font-weight: 600; }
.legend-sym.pin-ready { color: var(--accent); font-weight: 700; }
.legend-sym.pin-active { color: var(--faint); font-weight: 700; }

@media (max-width: 560px) {
  .hero-banner { padding: 46px 22px 44px; }
  .dash-stats { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   Site footer (hidden inside the full-height world app shell)
   ───────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 1;
  flex: none;
  margin-top: 48px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(12, 16, 9, .55));
}
body.world-mode .site-footer { display: none; }   /* the play screen owns the viewport */

.footer-inner {
  max-width: 1040px; margin: 0 auto; padding: 40px 24px 22px;
  display: flex; flex-wrap: wrap; gap: 36px 48px; justify-content: space-between;
}
.footer-brand { max-width: 400px; }
.footer-brand .brand { font-size: 1.3rem; color: var(--ink); }
.footer-tag { color: var(--muted); font-size: .92rem; font-style: italic; margin: 10px 0 0; }
.footer-nav { display: flex; gap: 48px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer-col h4 { margin: 0 0 2px; font-family: var(--display); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.footer-col a { color: var(--muted); font-size: .95rem; }
.footer-col a:hover { color: var(--accent); text-decoration: none; }
.footer-who { color: var(--faint); font-size: .88rem; font-style: italic; }
.footer-col .inline .btn.link { padding: 0; color: var(--muted); }
.footer-col .inline .btn.link:hover { color: var(--accent); }

.footer-base {
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: 1040px; margin: 0 auto; padding: 14px 24px 30px;
  color: var(--faint); font-size: .84rem; font-style: italic;
}
.footer-sep { opacity: .5; font-style: normal; }

@media (max-width: 560px) {
  .footer-inner { gap: 26px 32px; padding-top: 32px; }
  .footer-nav { gap: 34px; }
}

.story-body { display: flex; flex-direction: column; gap: 24px; }

/* ── book-style illustration (lantern-lit frame) ────────── */
.illustration {
  margin: 0;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(40, 49, 31, .4), transparent 80px),
    #0c1009;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  text-align: center;
  box-shadow: var(--shadow), inset 0 0 30px rgba(0, 0, 0, .5);
}
.illustration figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-style: italic;
  font-size: .82rem;
  letter-spacing: .04em;
  font-family: var(--display);
}
.scene-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, #16200f, #0a0d07);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--border), inset 0 0 40px rgba(0, 0, 0, .6);
}
#illustration-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  /* fade each new scene in */
  animation: scene-in .5s ease;
}
@keyframes scene-in { from { opacity: 0; } to { opacity: 1; } }
#illustration-img.empty,
#illustration-img:not([src]),
#illustration-img[src=""] { display: none; }
.scene-frame:has(.empty)::before,
.scene-frame:has(#illustration-img[src=""])::before {
  content: "❦";
  color: var(--faint);
  font-size: 2.2rem;
}

@media (min-width: 820px) {
  .story-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 28px;
  }
  .story-main { grid-column: 1; grid-row: 1; min-width: 0; }
  .illustration {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 16px;
  }
}

label.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  cursor: pointer;
}
label.checkbox input { width: auto; accent-color: var(--accent); }

/* ── choices (paths through the wood) ───────────────────── */
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.btn.choice {
  text-align: left;
  background: linear-gradient(180deg, var(--panel-2), #141a0f);
  border-color: var(--accent-2);
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0;
}
.btn.choice::before { content: "❧ "; color: var(--accent); }
.btn.choice:hover {
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(227, 169, 72, .12);
}

.action-form { display: flex; gap: 10px; }
.action-form input { flex: 1; }

.ended-note {
  color: var(--accent);
  font-weight: 600;
  text-align: center;
  margin-top: 22px;
  font-family: var(--display);
  letter-spacing: .04em;
  font-size: 1.05rem;
  text-shadow: 0 0 16px rgba(227, 169, 72, .25);
}
.form-error { color: #f0a07c; margin-top: 10px; font-style: italic; }

.typing { color: var(--muted); font-style: italic; }
.dots::after {
  content: "";
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots {
  0% { content: ""; } 25% { content: "."; }
  50% { content: ".."; } 75% { content: "..."; }
}

/* ─────────────────────────────────────────────────────────────
   The Living World — a full-height "game screen" app shell.
   The page itself does not scroll; the rail and the story each own
   their own scroll, and the composer is pinned. Stats never leave view.
   ───────────────────────────────────────────────────────────── */
body.world-mode {                                  /* the panes scroll, not the page */
  display: flex;
  flex-direction: column;
  height: 100dvh;                                  /* definite height so panes can bound + scroll */
  overflow: hidden;
}
body.world-mode .container-wide {
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
/* the header sits above; give the shell the rest of the viewport */
.world-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 336px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);             /* cap the row so children scroll, not grow */
  width: 100%;
}

/* a mossy, quiet scrollbar for the inner panes */
.world-rail, .chat-scroll { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.world-rail::-webkit-scrollbar, .chat-scroll::-webkit-scrollbar { width: 10px; }
.world-rail::-webkit-scrollbar-thumb, .chat-scroll::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 8px; border: 3px solid transparent;
  background-clip: content-box; }
.world-rail::-webkit-scrollbar-thumb:hover, .chat-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--accent-2); background-clip: content-box; }

/* ── left rail ──────────────────────────────────────────── */
.world-rail {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(40, 49, 31, .28), transparent 160px), var(--bg-2);
}
.rail-card {
  background: linear-gradient(180deg, rgba(40, 49, 31, .35), transparent 90px), var(--panel);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 16px 16px 18px;
  box-shadow: inset 0 1px 0 rgba(236, 228, 207, .04);
}
/* WoW-style "unit frame": level badge · name/tier · gold, in one compact row */
.char-head { display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 6px; }
.char-level {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: .95rem; color: #2a1d07;
  background: linear-gradient(180deg, #f0bd5e, var(--accent));
  border: 1px solid #b9842f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.char-id { flex: 1; min-width: 0; }
.char-name { font-family: var(--display); margin: 0; font-size: 1.12rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-head .meta { margin: 1px 0 0; color: var(--accent-2); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em; font-family: var(--display); }
.char-gold { flex: none; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums; }

.stat { display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  column-gap: 8px; margin: 12px 0 0; }
.stat-label { font-size: .72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; }
.stat-num { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.bar { grid-column: 1 / 3; height: 8px; margin-top: 5px; border-radius: 6px;
  background: #0d120a; overflow: hidden; border: 1px solid var(--border); }
.bar-fill { height: 100%; transition: width .35s ease; }
.bar-fill.hp { background: linear-gradient(90deg, var(--ember), var(--accent)); }
.bar-fill.hp.hp-low { background: linear-gradient(90deg, #7a1f16, #c8432f); }
.bar-fill.turns { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

/* icon toolbar (Pack · Chronicle · Map · Duels) — a WoW micro-menu */
.rail-toolbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 14px 0 4px; }
.tool-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; cursor: pointer;
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  border: 1px solid var(--border-2); border-radius: 10px; color: var(--ink);
  transition: background .15s, border-color .15s, transform .05s;
}
.tool-btn:hover { background: linear-gradient(180deg, #313c25, #28311f);
  border-color: var(--accent-2); }
.tool-btn:active { transform: translateY(1px); }
.tool-ico { font-size: 1.15rem; line-height: 1;
  filter: saturate(.5) sepia(.15); }   /* mute the emoji toward the theme, like .gi */
.tool-label { font-family: var(--display); font-size: .64rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); }
.tool-btn:hover .tool-label { color: var(--ink); }
/* the "the pool wants something from you" nag — challenges/plans awaiting */
.tool-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ember); color: #fff;
  border: 1px solid #e08a4d; border-radius: 999px;
  font-size: .72rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
/* display:flex above would otherwise beat the [hidden] attribute and leave a
   permanent "0" pinned to the Duels button — make hidden win. */
.tool-badge[hidden] { display: none; }

/* ── collapsible rail sections ──────────────────────────── */
.rail-sec { border-top: 1px solid var(--border); margin-top: 10px; }
.rail-sec > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 2px 7px;
  font-family: var(--display); font-size: .8rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent);
}
.rail-sec > summary::-webkit-details-marker { display: none; }
.rail-sec > summary::before { content: "▸"; color: var(--faint); font-size: .72rem;
  transition: transform .15s ease; }
.rail-sec[open] > summary::before { transform: rotate(90deg); }
.rail-sec > summary:hover { color: #f1c876; }
.sec-count { margin-left: auto; color: var(--muted); font-size: .72rem;
  font-family: var(--serif); font-variant-numeric: tabular-nums;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 8px; line-height: 1.5; }

.panel-h { font-family: var(--display); font-size: .95rem; letter-spacing: .04em;
  color: var(--accent); margin: 18px 0 6px; }
.rail-h { font-family: var(--display); font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); margin: 16px 0 6px; }
.rail-card > .rail-h:first-child { margin-top: 0; }
.inv-list, .rep-list, .rail-list { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.inv-list li, .rep-list li, .rail-list li { padding: 4px 0; border-bottom: 1px dashed var(--border); }
.inv-list li:last-child, .rep-list li:last-child, .rail-list li:last-child { border-bottom: none; }
/* Roads & Market rows stage their action in the composer on click */
.rail-list li.stage-row { cursor: pointer; transition: background .12s ease; }
.rail-list li.stage-row:hover { background: rgba(227, 169, 72, .07); }
/* Highlighted nouns in rail lists keep their rarity colour + hover card, but a
   list is furniture, not prose — drop the dotted underline. */
.rail-list .fx-item, .inv-list .fx-item { text-decoration: none; }
.rep-list li { display: flex; justify-content: space-between; }
.tag { font-size: .72rem; color: var(--bg); background: var(--accent);
  border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }

/* ── quest log — grouped by place, WoW-zone style ───────── */
.quest-groups { display: flex; flex-direction: column; gap: 6px; padding-bottom: 2px; }
.quest-empty { margin: 2px 0 6px; }
.quest-group { border: 1px solid var(--border); border-radius: 8px;
  background: rgba(13, 18, 10, .45); overflow: hidden; }
.quest-group > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 7px; padding: 7px 9px;
  font-family: var(--display); font-size: .76rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-2);
}
.quest-group > summary::-webkit-details-marker { display: none; }
.quest-group > summary::before { content: "▸"; color: var(--faint); font-size: .68rem;
  transition: transform .15s ease; }
.quest-group[open] > summary::before { transform: rotate(90deg); }
.quest-group > summary:hover { color: #9dc47a; }
.qg-loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qg-count { margin-left: auto; color: var(--muted); font-size: .72rem;
  font-family: var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quest-list { padding: 0 9px 7px; }
.quest { padding: 5px 0; border-top: 1px dashed var(--border); font-size: .95rem; }
.quest:first-child { border-top: none; }
.quest > summary { list-style: none; cursor: pointer; user-select: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.quest > summary::-webkit-details-marker { display: none; }
.quest-name { font-weight: 600; color: var(--ink); font-size: .92rem; line-height: 1.35; }
.quest > summary:hover .quest-name { color: #f1c876; }
.quest-prog { flex: none; font-size: .78rem; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.quest-done .quest-name { color: var(--accent); }
.quest-done .quest-prog { color: var(--accent-2); font-weight: 700; }
.quest-steps { list-style: none; padding: 0; margin: 3px 0 0; }
.quest-steps li { display: flex; justify-content: space-between; gap: 8px;
  padding: 2px 0 2px 10px; border: none; font-size: .88rem; color: var(--muted); }
.quest-steps .obj-text { line-height: 1.3; }
.quest-steps .obj-count { font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--muted); }
.quest-steps li.obj-done { color: var(--ink); }
.quest-steps li.obj-done .obj-text { text-decoration: line-through;
  text-decoration-color: var(--accent-2); }
.quest-steps li.obj-done .obj-count { color: var(--accent-2); font-weight: 600; }
.quest-turnin { display: block; margin: 4px 0 0 10px; font-size: .8rem;
  font-style: italic; color: var(--accent); }
.quest-done .quest-turnin { color: var(--accent-2); font-style: normal; font-weight: 600; }

/* ── shadow duels (async PvP) — lives in its own modal ────── */
.duel-modal { width: min(680px, 96%); }
.duel-wrap { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.duel-card { border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); padding: 12px 14px; }
.duel-active { border-color: var(--border-2); }
.duel-pending { border-style: dashed; }
.duel-done { opacity: .8; }
.duel-line { margin: 0 0 4px; line-height: 1.5; }
.duel-line .tag { margin-left: 4px; }
.duel-hp { display: flex; align-items: baseline; gap: 10px; font-size: .95rem;
  color: var(--muted); }
.duel-hp b { color: var(--ink); font-variant-numeric: tabular-nums; }
.duel-hp .shade-meta { font-weight: 400; }

/* Cast-a-challenge form — the ONLY way to start a shadow duel (AI-free). */
.duel-new { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--border-2);
  border-radius: 10px; background: var(--panel); }
.duel-new-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.duel-new-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 140px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.duel-new-field input { font-size: .95rem; text-transform: none; letter-spacing: 0;
  padding: 7px 9px; border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--bg); color: var(--ink); }
.duel-new-field input:focus { outline: none; border-color: var(--accent); }
.duel-new-ante { flex: 0 1 110px; }
.duel-new-ante input { width: 100%; }
/* .btn.primary carries align-self:flex-start (for vertical forms); in this
   flex ROW that shoves the button to the top while the inputs sit at the
   bottom. Pin it back to the inputs' baseline, size it to match their height,
   and keep the label on one line. */
.duel-new #duel-issue { flex: 0 0 auto; align-self: flex-end;
  white-space: nowrap; padding-top: 9px; padding-bottom: 9px; }
.duel-new-hint { margin: 8px 0 0; }
.duel-new-error { margin: 8px 0 0; color: #e6a2a2; font-size: .9rem; }
/* Modal-level duel error (denied accept/seal/buy, out of turns) — shown inside
   the Duels modal, not the composer's box behind it. */
.duel-error { margin: 0 0 10px; padding: 8px 11px; border-radius: 8px;
  border: 1px solid #7d3a3a; background: rgba(125, 58, 58, .18);
  color: #edb4b4; font-size: .92rem; }
.pf-challenge { margin-top: 4px; }
.duel-last { margin: 4px 0 0; font-style: italic; }

/* A clickable player name — in the rail, a duel, or the ladder. Opens the
   traveller profile card (same seam as the narration's .fx-player). */
.pf-link { color: #7ec8e3; cursor: pointer; }
.pf-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Traveller profile card (#player-overlay) — a public glance at another soul:
   level, health and worn gear. Reuses the .paperdoll from the pack modal. */
.player-modal { max-width: 460px; }
.player-body { display: grid; gap: 12px; }
.pf-head { display: flex; align-items: center; gap: 10px; }
.pf-level { font-family: var(--display, inherit); font-size: 1.05rem;
  color: var(--accent); letter-spacing: .02em; }
.pf-fallen { background: #6b2b2b; color: #f4d9d9; }
.pf-hp { display: flex; align-items: center; gap: 10px; }
.pf-hp-bar { flex: 1; height: 10px; border-radius: 6px; overflow: hidden;
  background: var(--panel-2, rgba(0,0,0,.25)); border: 1px solid var(--border-2); }
.pf-hp-bar span { display: block; height: 100%; background: #7aa15a; }
.pf-bare { margin: 0; }
.duel-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px;
  flex-wrap: wrap; }
.stance-row { display: flex; gap: 8px; margin-top: 8px; }
.duel-slot {
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--border-2); border-radius: 10px;
  background: var(--panel-3); color: var(--ink);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
.duel-slot:hover { transform: translateY(-1px); border-color: var(--accent); }
.duel-slot.stance-strike { border-color: #7a4a34; background: #241611; }
.duel-slot.stance-guard  { border-color: #4a6a8a; background: #121a22; }
.duel-slot.stance-feint  { border-color: #7a5a8a; background: #1c1422; }
.duel-slot.stance-drink  { border-color: var(--accent-2); background: #14200f; }
.duel-rating { margin: 8px 0 0; font-size: .95rem; }
.duel-rating b { color: var(--accent); }
.duel-ladder { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 8px; }
.duel-ladder > summary { list-style: none; cursor: pointer; user-select: none;
  font-family: var(--display); font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-2); }
.duel-ladder > summary::-webkit-details-marker { display: none; }
.duel-ladder > summary:hover { color: #9dc47a; }
.duel-ladder ol { margin: 6px 0 2px; padding-left: 24px; font-size: .92rem; }
.duel-ladder li { display: flex; justify-content: space-between; gap: 8px; }
.trav-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trav-duel { flex: none; padding: 1px 8px; }
/* the in-modal rulebook */
.duel-help { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; }
.duel-help > summary { list-style: none; cursor: pointer; user-select: none;
  font-family: var(--display); font-size: .8rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent); }
.duel-help > summary::-webkit-details-marker { display: none; }
.duel-help > summary::before { content: "▸ "; color: var(--faint); }
.duel-help[open] > summary::before { content: "▾ "; }
.duel-help-body { margin-top: 8px; font-size: .95rem; color: var(--muted); }
.duel-help-body p { margin: 0 0 8px; }
.duel-help-body b { color: var(--ink); }
.duel-help-body ul { margin: 0 0 8px; padding-left: 4px; list-style: none; }
.duel-help-body li { margin: 3px 0; }

/* The Pale Warden's marks stall — spend umbral marks on shade-wares. */
.duel-vendor { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; }
.duel-vendor > summary { list-style: none; cursor: pointer; user-select: none;
  font-family: var(--display); color: var(--accent); }
.duel-vendor > summary::-webkit-details-marker { display: none; }
.duel-vendor > summary::before { content: "▸ "; color: var(--faint); }
.duel-vendor[open] > summary::before { content: "▾ "; }
.vendor-body { margin-top: 10px; display: grid; gap: 8px;
  grid-template-columns: repeat(2, 1fr); }
@media (max-width: 520px) { .vendor-body { grid-template-columns: 1fr; } }
.vendor-item { background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.vendor-desc { font-style: italic; margin: 4px 0 8px; }
.vendor-buy-row { margin-top: auto; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; padding-top: 6px; }
.vendor-cost { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.stance-chip { display: inline-block; min-width: 88px; margin-right: 6px;
  padding: 1px 8px; border: 1px solid var(--border-2); border-radius: 999px;
  font-size: .85rem; color: var(--ink); }
.stance-chip.stance-strike { border-color: #7a4a34; background: #241611; }
.stance-chip.stance-guard  { border-color: #4a6a8a; background: #121a22; }
.stance-chip.stance-feint  { border-color: #7a5a8a; background: #1c1422; }
.stance-chip.stance-drink  { border-color: var(--accent-2); background: #14200f; }

/* ── chat column ────────────────────────────────────────── */
.world-chat {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(900px 480px at 70% -10%, rgba(227, 169, 72, .05), transparent 60%),
    var(--bg);
}
/* A quiet one-line zone indicator (click it for the place's description) —
   the story below is the star, not the header. */
.place-bar {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 30px 8px;
  border-bottom: 1px solid var(--border);
}
.place-info { flex: 1; min-width: 0; }
.place-info > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: baseline; gap: 10px; min-width: 0;
}
.place-info > summary::-webkit-details-marker { display: none; }
.place-info > summary::after { content: "▾"; color: var(--faint); font-size: .78rem;
  align-self: center; transition: transform .15s ease; }   /* centred, not a baseline "·" */
.place-info[open] > summary::after { transform: rotate(180deg); }
.place-eyebrow { flex: none; color: var(--faint); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .12em; font-family: var(--display); }
.place-name { font-family: var(--display); margin: 0; font-size: 1.02rem;
  font-weight: 600; letter-spacing: .04em; display: inline; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-info > summary:hover .place-name { color: #f1c876; }
.place-meta { color: var(--faint); font-size: .7rem; min-width: 0;
  text-transform: uppercase; letter-spacing: .06em; font-family: var(--display);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-tools { display: none; margin-left: auto; align-items: center; gap: 8px; flex: none; }
.icon-btn { padding: 8px 11px; font-size: 1.1rem; line-height: 1; }
.rail-close { display: none; }
.place-desc { margin: 6px 0 4px; color: var(--muted); font-style: italic;
  font-size: .92rem; max-width: 78ch; }

.chat-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 30px 20px; }
.chat-inner { max-width: 900px; margin: 0 auto; }

.load-older { display: flex; justify-content: center; padding: 14px 0 4px; }
.load-older[hidden] { display: none; }
.btn.ghost { background: none; border: 1px solid var(--border-2); color: var(--muted);
  font-family: var(--display); letter-spacing: .04em; }
.btn.ghost:hover { background: var(--panel-2); border-color: var(--accent-2); color: var(--ink); }

.recap { padding: 14px 18px; margin: 14px 0 4px;
  border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 10px; }
.recap-text { margin: 4px 0 0; font-style: italic; color: var(--ink); }

.world-transcript { margin: 14px 0 0; }
.turn-note { text-align: center; margin: 2px 0 8px; opacity: .8; font-style: italic; }

/* ── pinned composer ────────────────────────────────────── */
.composer {
  padding: 14px 30px 18px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(12, 16, 9, .2), rgba(12, 16, 9, .85));
  backdrop-filter: blur(2px);
}
.composer .action-form { max-width: 900px; margin: 0 auto; }
.composer .form-error, .composer .ended-note { max-width: 900px; margin-left: auto; margin-right: auto; }

/* ── enemy chooser (the "Creatures here" list) ── */
.foe-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.foe-name { color: var(--ink); }
.foe-role { flex: 1; min-width: 0; }
.foe-row .foe-fight { margin-left: auto; flex: none; }
.foe-active { color: var(--ember); }
.foe-badge { margin-left: auto; font-size: .78rem; font-weight: 600; letter-spacing: .03em;
  color: var(--ember); border: 1px solid var(--ember); border-radius: 6px; padding: 2px 8px;
  white-space: nowrap; }

/* ── in-combat bar (instant, AI-free) — shown only during a fight ── */
.combat-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: 900px; margin: 0 auto 10px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid #7a3a30; background: linear-gradient(180deg, rgba(90,35,32,.32), rgba(67,26,23,.32)); }
.combat-bar[hidden] { display: none; }
.combat-foe { margin-right: auto; font-family: var(--display); color: var(--ink); letter-spacing: .02em; }
.combat-foe strong { color: var(--ember); }
.btn.small.danger {
  background: linear-gradient(180deg, #5a2320, #431a17);
  border-color: #7a3a30; color: #f3d9d2;
}
.btn.small.danger:hover { background: linear-gradient(180deg, #6d2b26, #52201c); border-color: var(--ember); }

/* ── mobile: stack, and open the rail as a slide-over drawer ── */
.rail-scrim { position: fixed; inset: 0; z-index: 44; background: rgba(4, 6, 3, .62);
  backdrop-filter: blur(1px); }
.rail-scrim[hidden] { display: none; }

@media (max-width: 860px) {
  body.world-mode { height: auto; overflow-x: hidden; overflow-y: auto; }
  /* minmax(0,…) matters: a bare 1fr keeps its min-content floor, and the
     place bar's nowrap name/meta would force the whole column (composer, Act
     button, tools) wider than the phone. */
  .world-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .world-rail {
    position: fixed; top: 0; left: 0; z-index: 45;
    width: min(330px, 88vw); height: 100dvh;
    padding: 44px 16px 40px;
    border-right: 1px solid var(--border-2);
    box-shadow: 8px 0 40px rgba(0, 0, 0, .5);
    transform: translateX(-100%);
    transition: transform .26s ease;
  }
  .world-rail.open { transform: translateX(0); }
  .rail-close { display: block; position: absolute; top: 8px; right: 12px;
    font-size: 1.15rem; padding: 4px 8px; }

  .world-chat { min-height: calc(100dvh - 64px); }

  /* a sticky, translucent header carrying the little ghost buttons */
  .place-bar {
    position: sticky; top: 0; z-index: 30;
    align-items: center; gap: 10px;
    padding: 8px 14px;
    background: linear-gradient(180deg, rgba(11, 15, 10, .9), rgba(11, 15, 10, .55));
    backdrop-filter: blur(8px);
  }
  .place-info > summary { align-items: center; }
  .place-eyebrow { display: none; }   /* every pixel counts on a phone */
  .place-name { font-size: .98rem; }
  .icon-btn .gi { margin-right: 0; min-width: auto; }
  .place-tools { display: flex; }
  .icon-btn {
    background: rgba(30, 38, 26, .5);
    border-color: var(--border-2);
    backdrop-filter: blur(4px);
    padding: 9px 11px;
  }
  .icon-btn:hover, .icon-btn:active { background: rgba(40, 49, 31, .82); border-color: var(--accent-2); }

  .chat-scroll, .composer { padding-left: 16px; padding-right: 16px; }
  .chat-scroll { overflow: visible; }        /* let the page carry the scroll on phones */
  .composer { position: sticky; bottom: 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* Combat dice widget — a readout of the engine's server-side resolution. */
.combat-widget { align-self: center; width: min(440px, 92%); margin: 6px auto 12px;
  background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 12px;
  padding: 12px 14px; box-shadow: var(--shadow); }
.cw-title { font-family: var(--display); color: var(--accent); letter-spacing: .04em;
  font-size: .95rem; margin-bottom: 8px; }
.cw-roll { display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-bottom: 1px dashed var(--border); font-size: .92rem; }
.cw-label { color: var(--ink); min-width: 110px; }
.cw-detail { color: var(--muted); font-variant-numeric: tabular-nums; flex: 1;
  font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.cw-chip { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 7px; border-radius: 6px; font-weight: 600; }
.cw-hit { background: var(--accent-2); color: var(--bg); }
.cw-crit { background: var(--accent); color: var(--bg); }
.cw-miss { background: var(--panel-3); color: var(--muted); }
.cw-fumble { background: var(--ember); color: var(--bg); }
.cw-caught { background: var(--ember); color: var(--bg); }
.cw-flee { background: var(--accent-2); color: var(--bg); }
.cw-heal { background: var(--accent-2); color: var(--bg); }
.cw-hp { display: grid; grid-template-columns: 44px 1fr auto; align-items: center;
  gap: 8px; margin-top: 8px; font-size: .82rem; color: var(--muted); position: relative;
  border-radius: 6px; }
.cw-anim { animation: cw-pop .35s ease both; }
@keyframes cw-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* Blows play out beat by beat: numbers pop and fade, struck bars flash + drain. */
.combat-widget { position: relative; }
.cw-rolls { display: flex; flex-direction: column; }
.cw-roll { position: relative; }

.cw-float { position: absolute; right: 10px; top: -4px; pointer-events: none; z-index: 4;
  font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: .02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7); animation: cw-rise 1.15s ease-out forwards; }
.cw-float-foe { color: var(--accent-2); }                    /* damage you dealt */
.cw-float-crit { color: var(--accent); font-size: 1.5rem; }  /* your critical */
.cw-float-you { color: var(--ember); }                       /* damage you took */
.cw-float-critred { color: #ff6a4d; font-size: 1.5rem; }
.cw-float-miss { color: var(--muted); font-size: .95rem; font-weight: 600; }
.cw-float-flee { color: var(--accent-2); font-size: 1.05rem; }
@keyframes cw-rise {
  0%   { opacity: 0; transform: translateY(8px) scale(.6); }
  22%  { opacity: 1; transform: translateY(-3px) scale(1.2); }
  45%  { transform: translateY(-8px) scale(1); }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}

.cw-flash-hit { animation: cw-flash-green .5s ease; }
.cw-flash-hurt { animation: cw-flash-red .5s ease; }
@keyframes cw-flash-green {
  40% { background: rgba(111, 148, 80, .28); box-shadow: 0 0 0 2px rgba(111, 148, 80, .45) inset; } }
@keyframes cw-flash-red {
  40% { background: rgba(200, 101, 47, .3); box-shadow: 0 0 0 2px rgba(200, 101, 47, .55) inset; } }

.cw-flash-shake { animation: cw-shake .42s ease; }
@keyframes cw-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .cw-float { animation: cw-rise-still 1.15s ease-out forwards; }
  .cw-flash-hit, .cw-flash-hurt, .cw-flash-shake, .cw-anim { animation: none; }
  @keyframes cw-rise-still { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
}

/* ── big center-screen damage bursts ──────────────────────────────
   A fixed, click-through layer over everything (so the world's overflow:hidden
   can't clip it). White = damage you dealt, red = damage you took, gold = crit. */
.dmg-layer {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.dmg-pop {
  position: absolute;
  font-family: var(--display); font-weight: 800; line-height: 1;
  font-size: clamp(3.2rem, 11vw, 8rem);
  transform: translate(var(--dx, 0), var(--dy, 0));
  text-shadow: 0 4px 18px rgba(0, 0, 0, .75), 0 0 26px currentColor;
  animation: dmg-burst 1.5s cubic-bezier(.16, .84, .3, 1) forwards;
  will-change: transform, opacity;
}
.dmg-given { color: #ffffff; }
.dmg-got   { color: #ff4740; }
.dmg-heal  { color: #4ce07a; }                                /* healing you regained */
.dmg-crit  { color: #ffd23f; font-size: clamp(4.2rem, 15vw, 11rem); }
.dmg-miss  { color: #cfc7b3; font-size: clamp(2rem, 6vw, 4rem); font-weight: 700;
  letter-spacing: .04em; }
@keyframes dmg-burst {
  0%   { opacity: 0; transform: translate(var(--dx,0), var(--dy,0)) scale(.25); }
  14%  { opacity: 1; transform: translate(var(--dx,0), var(--dy,0)) scale(1.3); }
  28%  { transform: translate(var(--dx,0), var(--dy,0)) scale(1); }
  68%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx,0), calc(var(--dy,0) - 110px)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .dmg-pop { animation: dmg-fade 1.4s ease-out forwards; }
  @keyframes dmg-fade { 0%, 65% { opacity: 1; } 100% { opacity: 0; } }
}

/* ── spoils toasts ────────────────────────────────────────────
   WoW-style floating notices for what a turn actually yielded — loot, gold,
   quest state. Same idea as the combat/heal numbers above, but stacked in a
   column so a flurry of them stays readable. Rendered by showEffects() on a
   dedicated top-centre layer that sits above the transcript, below the big
   combat bursts. */
.fx-layer {
  position: fixed; left: 0; right: 0; top: 22%; z-index: 9998;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  pointer-events: none;
}
.fx-pop {
  font-family: var(--display); font-weight: 700; letter-spacing: .01em;
  font-size: clamp(1.05rem, 2.3vw, 1.5rem);
  padding: .2em .8em; border-radius: 999px; white-space: nowrap;
  color: #eadfc6;
  background: rgba(18, 15, 11, .82);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
  animation: fx-rise 2.6s ease-out forwards;
  will-change: transform, opacity;
}
.fx-loot           { color: #7fe3a0; }   /* items gained */
.fx-item_lost      { color: #cdbf9c; }   /* items given up / stashed / sold */
.fx-gold_gain      { color: #ffd23f; }   /* coin in */
.fx-gold_loss      { color: #ff7a5c; }   /* coin out */
.fx-quest_accept   { color: #8fc9ff; }   /* charge taken up */
.fx-quest_complete { color: #ffd23f; }   /* charge fulfilled */
@keyframes fx-rise {
  0%   { opacity: 0; transform: translateY(14px) scale(.92); }
  8%   { opacity: 1; transform: translateY(0) scale(1); }
  85%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-pop { animation: fx-fade 2.6s ease-out forwards; }
  @keyframes fx-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
}

/* ── game icons ───────────────────────────────────────────────
   Emoji placeholders until real 24×24 art lands: every pictogram renders
   through icons.html() in app.js as <span class="gi" data-icon="…">, so the
   swap to sprites/images is one function + this block. The filter mutes the
   emoji palette toward the parchment theme so mixed glyphs read as one set —
   delete it when proper monochrome art arrives. */
.gi {
  display: inline-block;
  min-width: 1.35em;
  text-align: center;
  margin-right: 3px;
  font-style: normal;
  filter: saturate(.5) sepia(.15);
  opacity: .95;
}
.item-tip .gi { min-width: auto; margin-right: 6px; }

/* Item tiers */
.tier-common { color: var(--ink); }
.tier-rare { color: #6fa8dc; }
.tier-epic { color: #b48ce0; }
.tier-legendary { color: var(--accent); }
.tier-border-common { border-left: 3px solid var(--border-2); }
.tier-border-rare { border-left: 3px solid #6fa8dc; }
.tier-border-epic { border-left: 3px solid #b48ce0; }
.tier-border-legendary { border-left: 3px solid var(--accent); }

/* Narration flavour — highlighted nouns woven into the AI's prose.
   Applied to assistant bubbles and the recap banner (see flavor.toHTML). */
.fx { font-weight: 600; }
.fx-player {                 /* another real soul — river-blue */
  color: #7ec8e3;
  cursor: pointer;           /* click opens their profile card */
}
.fx-player:hover { text-decoration: underline; text-underline-offset: 3px; }
.fx-npc {                    /* world folk — living moss */
  color: var(--accent-2);
  cursor: help;              /* has a hover card (see .item-tip) */
}
.fx-item {                   /* rarity colour comes from .tier-* */
  text-decoration: underline dotted currentColor;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: help;              /* it has a hover card (see .item-tip) */
}
.fx-quest {                  /* a charge taken up — lantern gold, like a quest ? */
  color: var(--accent);
  cursor: help;              /* has a hover card (see .item-tip) */
  text-decoration: underline dotted currentColor;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.fx-item.tier-common { color: #c9be9f; }  /* lift common off body ink */
.fx-gold {                   /* coin amounts */
  color: var(--accent);
  white-space: nowrap;
}
.fx-gold::before {
  content: "🪙";
  margin-right: .2em;
  font-weight: 400;
}

/* ── item hover card (Wowhead-style) ─────────────────────────
   Pinned to the viewport over the hovered .fx-item in the narration.
   Border takes the item's rarity colour; content is name · kind · attack ·
   description · price. pointer-events:none so it can never steal the hover. */
.item-tip {
  position: fixed; z-index: 10000; pointer-events: none;
  min-width: 190px; max-width: 280px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 13px;
  background: linear-gradient(180deg, rgba(22, 29, 16, .98), rgba(11, 15, 10, .98));
  border: 1px solid var(--border-2); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .75);
  font-size: .88rem; line-height: 1.45;
  animation: tip-in .12s ease;
}
.item-tip[hidden] { display: none; }
.tip-border-rare { border-color: #6fa8dc; }
.tip-border-epic { border-color: #b48ce0; }
.tip-border-legendary { border-color: var(--accent); }
.tip-border-hostile { border-color: #7a3a30; }      /* a foe — dried blood */
.tip-border-npc { border-color: var(--accent-2); }  /* world folk — moss */
.tip-border-player { border-color: #3e6b80; }       /* a real soul — river */
.tip-name { font-family: var(--display); font-weight: 700; font-size: .98rem; }
.tip-name.npc-hostile { color: #ff6a4d; }
.tip-name.npc-kind { color: var(--accent-2); }
.tip-name.npc-player { color: #7ec8e3; }
.tip-kind { color: var(--muted); font-family: var(--display); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .07em; }
.tip-stat { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.tip-flag { color: var(--accent); font-size: .8rem; }
.tip-fact { color: var(--muted); font-size: .78rem; font-family: var(--display);
  letter-spacing: .04em; }
.tip-hp { color: var(--ember); }
.tip-desc { margin: 4px 0 0; color: var(--muted); font-style: italic; font-size: .84rem; }
.tip-price { margin-top: 4px; color: var(--accent); font-variant-numeric: tabular-nums; }
@keyframes tip-in { from { opacity: 0; transform: translateY(3px); } }

/* Inventory modal */
.inv-overlay { position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, .6); }
/* `display: flex` above would otherwise beat the UA [hidden] rule and leave the
   overlay stuck open on load — restore hide-when-hidden. */
.inv-overlay[hidden] { display: none; }
.inv-modal { width: min(640px, 96%); max-height: 86vh; overflow-y: auto; padding: 18px 20px; }
.inv-modal-head { display: flex; justify-content: space-between; align-items: center; }
.inv-modal-head h2 { margin: 0; font-family: var(--display); }
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
@media (max-width: 520px) { .inv-grid { grid-template-columns: 1fr; } }
.inv-item { background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
/* keep every card's Equip/Use button on the same bottom line, whatever the
   description length above it */
.inv-item > .btn { margin-top: auto; align-self: flex-start; }
.inv-item-top { display: flex; align-items: center; gap: 6px; }
.inv-name { font-weight: 600; }
.inv-tier { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
  margin-left: auto; border: 1px solid currentColor; border-radius: 5px; padding: 0 5px; }
.inv-meta { font-size: .85rem; margin: 3px 0; display: flex; gap: 8px; align-items: center; }
.inv-stat { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.inv-desc { font-size: .85rem; color: var(--muted); font-style: italic; margin: 4px 0 8px; }
.inv-hint { margin: 4px 0 0; }
.inv-empty { grid-column: 1 / -1; }

/* Paper doll — the worn slots (weapon / head / chest / legs), WoW-style. Spans
   the full width of the .inv-grid two-column layout. */
.paperdoll { grid-column: 1 / -1; display: grid; gap: 8px;
  grid-template-columns: repeat(2, 1fr); margin-bottom: 6px; }
@media (max-width: 520px) { .paperdoll { grid-template-columns: 1fr; } }
.doll-slot { display: flex; flex-direction: row; align-items: center;
  justify-content: flex-start; gap: 10px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; min-height: 52px; width: 100%; font: inherit; color: inherit; }
button.doll-slot { cursor: pointer; transition: border-color .12s, background .12s; }
button.doll-slot:hover { border-color: var(--accent); background: var(--panel); }
button.doll-slot:disabled { opacity: .5; cursor: default; }
.doll-slot.empty { opacity: .72; border-style: dashed; }
.doll-icon { font-size: 1.4rem; line-height: 1; flex: 0 0 auto;
  filter: saturate(.5) sepia(.15); }
.doll-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.doll-slot-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); }
.doll-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doll-stat { font-size: .78rem; color: var(--accent-2); font-variant-numeric: tabular-nums; }

/* Personal chronicle ("what happened to me") — reuses the .inv-overlay/.inv-modal shell. */
.journal-list { list-style: none; margin: 14px 0; padding: 0;
  max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.journal-entry { display: flex; align-items: baseline; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 12px; }
.journal-entry .j-icon { flex: 0 0 auto; }
.journal-entry .j-text { flex: 1 1 auto; }
.journal-entry .j-day { flex: 0 0 auto; white-space: nowrap; }

/* Fog-of-war map — reuses the .inv-overlay/.inv-modal shell. Visited places
   are solid marks on parchment-dark ground; frontier places (spied down a
   road, never reached) are faded with dashed roads. */
.map-modal { width: min(780px, 96%); }
.map-scroll { overflow: auto; margin: 14px 0 4px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 10px; }
.map-scroll svg { display: block; margin: 0 auto; width: 100%; height: auto;
  min-width: 460px; }
.map-status { text-align: center; padding: 28px 12px; margin: 0; }
.m-road { stroke: var(--border-2); stroke-width: 2.5; }
.m-road-ghost { stroke-dasharray: 6 6; opacity: .55; }
.m-cost { fill: var(--faint); font-size: 10.5px; text-anchor: middle;
  font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--bg-2);
  stroke-width: 3px; stroke-linejoin: round; }
/* faint regional geography behind the dots */
.m-region { fill: rgba(111, 148, 80, .05); stroke: rgba(111, 148, 80, .16);
  stroke-width: 1; stroke-dasharray: 3 7; }
.m-region-label { fill: var(--faint); opacity: .6; text-anchor: middle;
  font-family: var(--display); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; }
/* WoW's "?" — gold when a quest is ready to hand in, dim while under way */
.m-quest { fill: var(--accent); font-family: var(--display); font-weight: 700;
  font-size: 15px; paint-order: stroke; stroke: rgba(0, 0, 0, .65);
  stroke-width: 2.5px; stroke-linejoin: round; }
.m-quest-active { fill: #b7b096; opacity: .85; }
.m-place { cursor: pointer; }
.m-place.m-here, .m-place.m-dead { cursor: default; }
.m-place:hover .m-dot { stroke: var(--accent); }
.m-place .m-dot { fill: var(--accent-2); stroke: var(--panel-2); stroke-width: 2; }
.m-place.m-here .m-dot { fill: var(--accent); }
.m-place .m-ring { fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-dasharray: 3 3; }
.m-label { fill: var(--ink); font-family: var(--display); font-size: 12.5px;
  text-anchor: middle; paint-order: stroke; stroke: var(--bg-2);
  stroke-width: 3px; stroke-linejoin: round; }
.m-place.m-ghost .m-dot { fill: var(--panel-3); stroke: var(--faint);
  stroke-dasharray: 2 2; }
.m-place.m-ghost .m-label { fill: var(--faint); font-family: var(--serif);
  font-style: italic; }
.m-place.m-dead .m-dot { fill: var(--ember); opacity: .6; }

/* travel confirmation bar — clicking a place stages the trip here */
.map-confirm { display: flex; align-items: center; gap: 10px;
  margin: 10px 0 2px; padding: 9px 12px;
  background: var(--panel-2); border: 1px solid var(--border-2);
  border-left: 3px solid var(--accent); border-radius: 10px; }
.map-confirm[hidden] { display: none; }
.map-confirm-text { flex: 1; min-width: 0; font-family: var(--display);
  letter-spacing: .02em; }

/* map legend under the parchment */
.map-legend { display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 16px; margin: 8px 2px 0; }
.map-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lg-here { background: var(--accent); box-shadow: 0 0 0 2px rgba(227, 169, 72, .3); }
.lg-visited { background: var(--accent-2); }
.lg-ghost { background: var(--panel-3); border: 1px dashed var(--faint); }
.lg-dead { background: var(--ember); opacity: .65; }
.lg-quest { color: var(--accent); font-family: var(--display); font-weight: 700; }

.btn.small { padding: 3px 10px; font-size: .82rem; }

/* ─────────────────────────────────────────────────────────────
   Admin panel
   ───────────────────────────────────────────────────────────── */
body.admin { background-attachment: fixed; }
.auth-card { max-width: 380px; margin: 60px auto; }
.auth-card label { display: block; margin: 12px 0; }
.auth-card input { width: 100%; }

.admin-shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
@media (max-width: 720px) { .admin-shell { grid-template-columns: 1fr; } }

.admin-side { background: var(--panel); border-right: 1px solid var(--border);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 0; height: 100vh; }
.admin-brand { font-family: var(--display); font-size: 1.3rem; color: var(--accent);
  text-decoration: none; letter-spacing: .04em; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav a { display: flex; gap: 10px; align-items: center; padding: 8px 10px;
  border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .98rem; }
.admin-nav a:hover { background: var(--panel-2); }
.admin-nav a.active { background: var(--panel-3); color: var(--accent); }
.admin-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--border); padding-top: 12px; }

.admin-main { padding: 26px 30px; max-width: 1100px; }
.admin-head { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 18px; }
.admin-head h1 { margin: 0; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px; margin-bottom: 24px; }
.admin-stat { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px; text-decoration: none; color: var(--ink); }
.admin-stat:hover { border-color: var(--border-2); }
.admin-stat-icon { font-size: 1.6rem; }
.admin-stat-num { font-size: 1.8rem; font-family: var(--display); color: var(--accent); }
.admin-stat-label { color: var(--muted); font-size: .9rem; }

.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .admin-cols { grid-template-columns: 1fr; } }
.admin-cols .card { padding: 18px; }
.admin-cols h2 { margin-top: 0; font-size: 1.15rem; }

.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.admin-table th, .admin-table td { text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table th { background: var(--panel-2); color: var(--muted);
  text-transform: uppercase; font-size: .76rem; letter-spacing: .06em; }
.admin-table tr:hover td { background: var(--panel-2); }
.row-actions { display: flex; gap: 8px; align-items: center; }
.row-actions form { display: inline; }
.btn.danger, .btn.link.danger { color: var(--ember); }

.admin-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
@media (max-width: 640px) { .admin-form .form-grid { grid-template-columns: 1fr; } }
.admin-form label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem;
  color: var(--muted); }
.admin-form label.checkbox { flex-direction: row; align-items: center; gap: 8px; }
.admin-form input, .admin-form select, .admin-form textarea { width: 100%; }
.admin-form .form-actions { margin-top: 18px; }
.req { color: var(--ember); }

.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.inline-form label { color: var(--muted); font-size: .9rem; }
.rel-list { list-style: none; padding: 0; margin: 0 0 8px; }
.rel-list li { display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-bottom: 1px dashed var(--border); }
.rel-list form.inline { margin-left: auto; }

.event-feed { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.event-feed li { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.ev-day { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
.ev-scope { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 6px; border-radius: 5px; margin-right: 6px; }
.ev-world { background: var(--ember); color: var(--bg); }
.ev-regional { background: var(--accent); color: var(--bg); }
.ev-local { background: var(--panel-3); color: var(--muted); }
.pager { display: flex; gap: 10px; margin-top: 16px; }
.small { font-size: .85rem; }

/* ---- profile / account settings ---- */
.settings-card { max-width: 560px; margin: 40px auto; }
.settings-card h2 { font-size: 1.1rem; margin: 22px 0 4px; }
.length-options { display: grid; gap: 10px; margin: 16px 0 22px; }
.length-option { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--border-2); border-radius: 10px; background: var(--panel-2);
  cursor: pointer; }
.length-option:hover { border-color: var(--accent-2); }
.length-option input { margin-top: 4px; accent-color: var(--accent); flex: none; }
.length-option .opt-name { display: block; font-weight: 600; }
.length-option .opt-desc { color: var(--muted); font-size: .92rem; }
.length-option:has(input:checked) { border-color: var(--accent); background: var(--panel-3); }

/* Password / email fields on the settings cards stack like the auth forms. */
.settings-card label { display: flex; flex-direction: column; gap: 6px;
  font-weight: 600; margin: 10px 0; }
.settings-card label .muted { font-weight: 400; }
.settings-card form.inline { margin: 0; }

.verify-ok { color: var(--accent); font-weight: 600; }
.verify-warn { color: var(--ember); font-weight: 600; }

/* Confirm-your-email banner (top of any logged-in page when pending). */
.verify-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(200, 101, 47, .14); border: 1px solid var(--ember);
  border-left-width: 4px; color: #f4c39d; padding: 10px 15px; border-radius: 10px;
  margin-bottom: 18px; }
.verify-banner .btn.link { color: var(--accent); padding: 0; }

/* The delete-account card + its confirmed danger button. */
.danger-zone { border-color: var(--ember); }
.danger-zone h1, .danger-zone h2 { color: var(--ember); }
.btn.danger:not(.link) { background: linear-gradient(180deg, #5a221d, #451a16);
  border-color: #7a2c25; color: #f4c39d; }
.btn.danger:not(.link):hover { background: linear-gradient(180deg, #6d2b26, #52201c);
  border-color: var(--ember); }

/* ── Cookie notice (EU/EEA consent, shown once) ─────────────── */
.cookie-notice {
  position: fixed; left: 16px; bottom: 16px; z-index: 48;
  max-width: 320px; padding: 14px 16px;
  background: var(--panel-2); border: 1px solid var(--border-2);
  border-radius: 12px; box-shadow: var(--shadow);
}
.cookie-notice[hidden] { display: none; }
.cookie-text { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--muted); }
.cookie-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.cookie-actions .btn.primary.small { align-self: auto; }
@media (max-width: 520px) {
  .cookie-notice { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}