/* ============================================================
   Eldran – Der letzte Hüter · Stylesheet
   Mobile-first. Dark, mossy, parchment, gold.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --bg-deep:        #0b110e;
  --bg-base:        #0f1612;
  --bg-elev:        #18211c;
  --bg-card:        #1a2520;
  --bg-card-hi:     #22302a;
  --border:         #364434;
  --border-soft:    #2a3530;
  --border-strong:  #4d5e48;

  --ink:            #e7dfbe;
  --ink-soft:       #c9c1a3;
  --ink-mute:       #8a8970;
  --ink-faint:      #5e6354;

  --gold:           #c9a961;
  --gold-soft:      #b39651;
  --moss:           #6f8a5a;
  --moss-deep:      #455a3a;
  --bark:           #6a5236;
  --rust:           #b1543d;
  --blood:          #a83b32;
  --magic:          #9a86c4;
  --moon:           #d6cf9a;

  --shadow-1: 0 1px 2px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.35);
  --shadow-2: 0 6px 24px rgba(0,0,0,.5);
  --radius:   12px;
  --radius-sm: 8px;

  --serif: 'Spectral', 'Iowan Old Style', 'Palatino Linotype', P052, Georgia, serif;
  --display: 'Cinzel', 'Trajan Pro', 'Optima', 'Palatino Linotype', serif;

  --nav-h: 56px;
  --tab-h: 64px; /* mobile bottom bar */
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-deep);
  min-height: 100dvh;
  overflow-x: hidden;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  body { padding-bottom: 0; }
}

/* ---------- Decorative background ---------- */
.bg-mist, .bg-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
}
.bg-mist {
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(111,138,90,.18), transparent 60%),
    radial-gradient(900px 700px at 90% 20%, rgba(106,82,54,.14), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(201,169,97,.06), transparent 60%),
    linear-gradient(180deg, #0a100d 0%, #0d1410 40%, #0a100d 100%);
}
.bg-vignette {
  background:
    radial-gradient(1400px 900px at 50% 40%, transparent 50%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ---------- Typography ---------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0 0 .6em;
}
h1 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); border-bottom: 1px solid var(--border-soft); padding-bottom: .35em; }
h3 { font-size: 1.05rem; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; }
p  { margin: 0 0 .8em; }
em { color: var(--moon); font-style: italic; }
strong { color: var(--ink); }

.muted { color: var(--ink-mute); }
.muted.small { font-size: .85rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .65rem 1rem;
  background: rgba(11, 17, 14, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  min-height: var(--nav-h);
}
.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.brand-icon { width: 36px; height: 36px; color: var(--gold); flex-shrink: 0; }
.brand-text { min-width: 0; }
.brand-text h1 {
  margin: 0; font-size: 1.05rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--gold);
}
.brand-sub { color: var(--ink-soft); font-weight: 400; font-style: italic; letter-spacing: .02em; }
.brand-meta { margin: 0; font-size: .72rem; color: var(--ink-mute); letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 480px) {
  .brand-meta { display: none; }
  .brand-text h1 { font-size: .95rem; }
}

/* ---------- Primary nav ---------- */
.primary-nav {
  display: none; /* mobile: bottom bar instead */
}
.primary-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: .45rem .8rem;
  border-radius: var(--radius-sm);
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.primary-nav a:hover { background: rgba(201,169,97,.08); color: var(--gold); }
.primary-nav a.active {
  background: rgba(201,169,97,.14);
  color: var(--gold);
  box-shadow: inset 0 -2px 0 var(--gold);
}
@media (min-width: 900px) {
  .primary-nav { display: flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
}

/* ---------- Mobile bottom tab bar (auto-built into header nav for mobile) ---------- */
@media (max-width: 899.98px) {
  .primary-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(11, 17, 14, .96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    overflow-x: auto;
    z-index: 60;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .primary-nav::-webkit-scrollbar { display: none; }
  .primary-nav a {
    flex: 0 0 auto;
    scroll-snap-align: center;
    padding: .55rem .7rem;
    font-size: .72rem;
    letter-spacing: .06em;
    min-width: 64px;
    text-align: center;
  }
}

/* ---------- Layout ---------- */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}
@media (min-width: 700px) { main { padding: 1.5rem; } }

.view { display: block; }
.view[hidden] { display: none; }

.grid-two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 900px) {
  .grid-two { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-base) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow-1);
  margin-top: 1rem;
  position: relative;
}
.card::before {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  border-top: 1px solid rgba(201,169,97,.18);
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }

@media (min-width: 700px) {
  .card { padding: 1.4rem; }
}

.card.danger-card { border-color: rgba(168,59,50,.4); }

/* ---------- Hero card (dashboard top) ---------- */
.hero-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  background: linear-gradient(180deg, var(--bg-card-hi) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow-2);
  margin-top: .25rem;
  position: relative;
}
.hero-card::after {
  content:''; position:absolute; inset:0;
  border-radius: var(--radius);
  pointer-events:none;
  background: radial-gradient(60% 60% at 50% 0%, rgba(201,169,97,.06), transparent 70%);
}
.hero-stats { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.hero-resources { display: grid; gap: .75rem; grid-template-columns: 1fr; }

@media (min-width: 700px) {
  .hero-card { padding: 1.4rem; gap: 1.4rem; }
  .hero-stats { grid-template-columns: 1.2fr 1fr; align-items: start; gap: 1.2rem; }
  .hero-resources { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- HP block ---------- */
.stat-block { background: rgba(0,0,0,.18); border-radius: var(--radius-sm); padding: 1rem; }
.stat-label {
  font-family: var(--display); font-size: .75rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .35rem;
}
.hp-row {
  display: flex; align-items: center; gap: .6rem;
  justify-content: space-between;
}
.hp-display {
  font-family: var(--display); font-size: clamp(2.2rem, 7vw, 3rem);
  font-weight: 600; color: var(--ink); line-height: 1;
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
}
.hp-sep { color: var(--ink-faint); margin: 0 .15em; }
.hp-bar-track {
  height: 8px; border-radius: 4px;
  background: rgba(0,0,0,.4);
  border: 1px solid var(--border-soft);
  margin-top: .8rem; overflow: hidden;
}
.hp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blood) 0%, var(--moss) 50%, var(--moss-deep) 100%);
  width: 100%;
  transition: width .25s ease;
}
.hp-temp-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .8rem;
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.hp-temp-label { text-transform: uppercase; color: var(--ink-mute); }
#hp-temp { font-size: 1.05rem; color: var(--moon); min-width: 1.5em; text-align: center; }
.hp-temp-quick {
  margin-left: auto;
  background: rgba(214, 207, 154, .1);
  color: var(--moon);
  border: 1px solid rgba(214, 207, 154, .3);
  border-radius: var(--radius-sm);
  padding: .35rem .7rem;
  font: inherit;
  cursor: pointer;
}
.hp-temp-quick:hover { background: rgba(214,207,154,.16); }
.hp-effective {
  margin-top: .5rem;
  font-size: .8rem;
  color: var(--moon);
}

/* HP buttons */
.hp-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .08s, background .15s, border-color .15s;
}
.hp-btn:active { transform: scale(.93); }
.hp-btn:hover  { background: var(--bg-card-hi); border-color: var(--gold-soft); }
.hp-btn.small  { width: 32px; height: 32px; font-size: 1rem; }

/* ---------- Mini stat grid ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.stat-mini {
  background: rgba(0,0,0,.18);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: .6rem .5rem;
  text-align: center;
}
.stat-mini-num {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.stat-mini-num .unit { font-size: .7rem; color: var(--ink-mute); margin-left: 1px; }
.stat-mini-lbl {
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: .35rem;
}

/* ---------- Resource cards (Slots, Wildshape, Rest) ---------- */
.resource-card {
  background: rgba(0,0,0,.22);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: .85rem;
}
.resource-card h3 { margin-bottom: .6rem; font-size: .8rem; }
.slots-row, .ws-row {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}
.slots-label {
  font-family: var(--display); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-mute);
  min-width: 5.5em;
}
.slot-pips { display: inline-flex; gap: 4px; }
.slot-pip {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background: var(--gold);
  box-shadow: 0 0 6px rgba(201,169,97,.45);
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.slot-pip.empty { background: transparent; box-shadow: none; opacity: .55; }
.slots-row.note { font-size: .75rem; color: var(--ink-mute); margin-top: .4rem; }
.ws-current {
  font-family: var(--display); font-size: .8rem;
  letter-spacing: .08em; color: var(--ink-soft);
  margin-top: .5rem;
  text-transform: uppercase;
}
.ws-current strong { color: var(--moon); }

/* ---------- Buttons ---------- */
.pill-btn {
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: .5rem .85rem;
  font: inherit; font-size: .85rem;
  cursor: pointer;
  min-height: 38px;
  transition: background .15s, border-color .15s, transform .08s;
}
.pill-btn:hover  { background: var(--bg-card-hi); border-color: var(--gold-soft); }
.pill-btn:active { transform: scale(.97); }
.pill-btn.ghost  { background: transparent; }

.big-btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  width: 100%;
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  font: inherit;
  font-family: var(--display);
  font-size: .9rem; letter-spacing: .08em;
  cursor: pointer;
  margin-bottom: .5rem;
  transition: background .15s, border-color .15s, transform .08s;
  min-height: 50px;
}
.big-btn span {
  font-family: var(--serif); font-size: .75rem;
  color: var(--ink-mute); letter-spacing: 0;
}
.big-btn:hover { background: var(--bg-card-hi); border-color: var(--gold-soft); }
.big-btn:active { transform: scale(.99); }
.big-btn.primary {
  background: linear-gradient(180deg, rgba(201,169,97,.18), rgba(201,169,97,.04));
  border-color: var(--gold-soft);
  color: var(--gold);
}
.big-btn.primary span { color: rgba(201,169,97,.6); }
.big-btn.danger {
  background: rgba(168,59,50,.12);
  border-color: rgba(168,59,50,.5);
  color: var(--rust);
}

/* ---------- Abilities & saves ---------- */
.abilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-bottom: 1rem;
}
@media (min-width: 500px) { .abilities { grid-template-columns: repeat(6, 1fr); } }
.ability {
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: .55rem .3rem;
  text-align: center;
}
.ability.prof {
  border-color: var(--gold-soft);
  background: linear-gradient(180deg, rgba(201,169,97,.15), rgba(0,0,0,.2));
}
.ab-name {
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .15em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.ab-mod {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.ab-score {
  font-size: .75rem;
  color: var(--ink-mute);
}

.saves-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem .8rem;
}
.save-row {
  display: flex; justify-content: space-between;
  padding: .25rem .4rem;
  border-radius: 4px;
  font-size: .9rem;
  color: var(--ink-soft);
}
.save-row.prof {
  background: rgba(201,169,97,.08);
  color: var(--ink);
  border-left: 2px solid var(--gold-soft);
  padding-left: .3rem;
}
.save-row span:last-child {
  font-family: var(--display);
  color: var(--gold-soft);
}
.save-row.prof span:last-child { color: var(--gold); font-weight: 600; }

/* ---------- Skills ---------- */
.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .15rem;
  margin-bottom: 1rem;
}
@media (min-width: 500px) { .skills-grid { grid-template-columns: 1fr 1fr; gap: .15rem .8rem; } }
.skill-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .35rem .5rem;
  border-radius: 4px;
  font-size: .92rem;
  color: var(--ink-soft);
  border: 1px solid transparent;
}
.skill-row .skill-name { display: flex; align-items: center; gap: .4rem; }
.skill-row .skill-ab { font-size: .7rem; color: var(--ink-faint); letter-spacing: .1em; }
.skill-row .skill-val {
  font-family: var(--display); color: var(--gold-soft);
  min-width: 2em; text-align: right;
}
.skill-row.prof {
  background: rgba(201,169,97,.07);
  color: var(--ink);
  border-color: rgba(201,169,97,.2);
}
.skill-row.prof .skill-val { color: var(--gold); font-weight: 600; }
.skill-row.choosable {
  cursor: pointer;
  border-color: rgba(154, 134, 196, .35);
  background: rgba(154, 134, 196, .06);
}
.skill-row.choosable:hover { background: rgba(154,134,196,.14); }
.skill-row.choosable.chosen {
  background: rgba(154, 134, 196, .2);
  border-color: var(--magic);
}
.skill-row.choosable .skill-val::after {
  content: ' ⊕';
  color: var(--magic);
  font-weight: 400;
}
.skill-row.choosable.chosen .skill-val::after { content: ' ✓'; }

.hint {
  margin-top: .8rem;
  padding: .7rem .85rem;
  border-left: 3px solid var(--gold-soft);
  background: rgba(201,169,97,.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .88rem;
  color: var(--ink-soft);
}

/* ---------- Chips & equipment ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border-soft);
  color: var(--ink-soft);
  padding: .3rem .6rem;
  border-radius: 999px;
  font-size: .8rem;
  font-family: var(--display);
  letter-spacing: .04em;
}
.chip.gold { border-color: var(--gold-soft); color: var(--gold); }
.chip.mystic { border-color: var(--magic); color: var(--magic); font-style: italic; }

.equip-list {
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: grid; gap: .2rem;
}
.equip-list li {
  padding: .3rem .5rem;
  border-bottom: 1px solid var(--border-soft);
  font-size: .92rem;
}
.equip-list li:last-child { border-bottom: 0; }

.gold-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem .85rem;
  background: rgba(201,169,97,.08);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-sm);
  margin-top: .5rem;
}
.gold-coin { color: var(--gold); font-size: 1.2rem; }
.gold-label, .gold-unit {
  font-family: var(--display); font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-soft);
}
#gold-amount {
  font-family: var(--display); font-size: 1.2rem;
  color: var(--gold); margin: 0 .3rem;
  min-width: 2em; text-align: center;
}

/* ---------- Combat: attacks table ---------- */
.attacks-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem;
}
.attack-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .5rem;
  padding: .65rem .8rem;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  align-items: center;
}
.attack-name {
  font-family: var(--display);
  font-size: .95rem;
  color: var(--ink);
}
.attack-name .sub { display: block; font-family: var(--serif); font-size: .76rem; color: var(--ink-mute); }
.attack-bonus {
  font-family: var(--display);
  color: var(--gold);
  font-size: 1.1rem;
}
.attack-dmg { color: var(--ink-soft); font-size: .9rem; white-space: nowrap; }
.attack-dmg .type { color: var(--ink-mute); font-size: .75rem; display: block; }

/* ---------- Strategies / actions ---------- */
.strategy {
  padding: .6rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.strategy:last-child { border-bottom: 0; }
.strategy-title {
  font-family: var(--display);
  color: var(--gold);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .3rem;
}

.action-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.action-list li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.badge {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 4px;
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid;
}
.badge.a  { background: rgba(168,59,50,.12);  color: var(--rust);  border-color: rgba(168,59,50,.4); }
.badge.ba { background: rgba(201,169,97,.12); color: var(--gold);  border-color: var(--gold-soft); }
.badge.re { background: rgba(154,134,196,.12);color: var(--magic); border-color: rgba(154,134,196,.45); }
.badge.co { background: rgba(111,138,90,.12); color: var(--moss);  border-color: rgba(111,138,90,.5); }
.badge.ri { background: rgba(214,207,154,.12);color: var(--moon);  border-color: rgba(214,207,154,.4); }

.conc-row {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}
.conc-input {
  flex: 1 1 200px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: .5rem .7rem;
  border-radius: var(--radius-sm);
  font: inherit;
  min-height: 38px;
}

/* ---------- Wildshape rules list ---------- */
.rules-list { padding-left: 1.2rem; margin: 0; }
.rules-list li { margin-bottom: .35rem; color: var(--ink-soft); }

/* ---------- Wildshape form grid ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
  margin-top: .8rem;
}
@media (min-width: 600px) { .form-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .form-grid { grid-template-columns: repeat(3, 1fr); } }
.form-grid.recommended { grid-template-columns: 1fr; }
@media (min-width: 600px) { .form-grid.recommended { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .form-grid.recommended { grid-template-columns: repeat(4, 1fr); } }

.form-card {
  position: relative;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: .85rem;
  display: grid; gap: .35rem;
}
.form-card.recommended { border-color: var(--gold-soft); background: linear-gradient(180deg, rgba(201,169,97,.1), rgba(0,0,0,.18)); }
.form-card.disabled { opacity: .45; }
.form-card.active {
  border-color: var(--moon);
  box-shadow: 0 0 0 2px rgba(214,207,154,.4), 0 0 18px rgba(214,207,154,.25);
}

.form-head {
  display: flex; align-items: center; gap: .55rem;
}
.form-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  color: var(--moss);
}
.form-card.recommended .form-icon { color: var(--gold); }
.form-card.active .form-icon { color: var(--moon); }
.form-name {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: .04em;
  flex: 1;
}
.form-cr {
  font-family: var(--display);
  font-size: .7rem;
  letter-spacing: .1em;
  background: rgba(0,0,0,.4);
  color: var(--gold-soft);
  padding: .15rem .45rem;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid var(--border-soft);
}
.form-meta { display: flex; flex-wrap: wrap; gap: .25rem; }
.form-tag {
  font-size: .68rem;
  font-family: var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .1rem .4rem;
  border-radius: 3px;
  background: rgba(255,255,255,.04);
  color: var(--ink-mute);
  border: 1px solid var(--border-soft);
}
.form-tag.role { background: rgba(111,138,90,.12); color: var(--moss); border-color: rgba(111,138,90,.4); }
.form-tag.move { background: rgba(154,134,196,.1); color: var(--magic); border-color: rgba(154,134,196,.35); }
.form-tag.warn { background: rgba(168,59,50,.1); color: var(--rust); border-color: rgba(168,59,50,.4); }

.form-desc { font-size: .82rem; color: var(--ink-soft); margin: .15rem 0 0; }
.form-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .25rem;
  margin-top: .4rem;
  font-size: .75rem;
  color: var(--ink-mute);
}
.form-stats > div { background: rgba(0,0,0,.25); padding: .25rem .4rem; border-radius: 4px; text-align: center; }
.form-stats strong { display: block; color: var(--ink); font-family: var(--display); font-size: .9rem; }

.form-attacks {
  margin-top: .4rem;
  font-size: .8rem;
  color: var(--ink-soft);
}
.form-attacks div { padding: .15rem 0; }
.form-attacks span.bonus { color: var(--gold); font-family: var(--display); }

.form-actions {
  display: flex; gap: .4rem; margin-top: .55rem;
  flex-wrap: wrap;
}
.form-actions .pill-btn { padding: .4rem .7rem; font-size: .8rem; min-height: 34px; }

.form-card .activate { width: 100%; text-align: center; }

/* ---------- Filters ---------- */
.filters {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .8rem;
}
.search-input, .filter-select {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: .5rem .7rem;
  border-radius: var(--radius-sm);
  font: inherit;
  min-height: 40px;
}
.search-input { flex: 1 1 180px; min-width: 0; }
.filter-select { flex: 1 1 130px; min-width: 0; }
.toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem;
  color: var(--ink-soft);
  padding: 0 .25rem;
}
.toggle input { width: 18px; height: 18px; accent-color: var(--gold); }

/* ---------- Spell list ---------- */
.spell-list { display: grid; gap: .5rem; }
.spell-card {
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: .75rem .85rem;
}
.spell-head {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap;
}
.spell-name {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
  flex: 1; min-width: 0;
}
.spell-level {
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .1em;
  background: rgba(0,0,0,.3);
  color: var(--gold-soft);
  border: 1px solid var(--border-soft);
  padding: .1rem .45rem;
  border-radius: 4px;
  white-space: nowrap;
}
.spell-level.cantrip { color: var(--moon); border-color: rgba(214,207,154,.3); }
.spell-tags { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .4rem; }
.spell-tag {
  font-size: .65rem;
  font-family: var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .1rem .4rem;
  border-radius: 3px;
  border: 1px solid;
}
.spell-tag.always { background: rgba(201,169,97,.12); color: var(--gold); border-color: var(--gold-soft); }
.spell-tag.beast  { background: rgba(111,138,90,.14); color: var(--moss); border-color: rgba(111,138,90,.5); }
.spell-tag.ritual { background: rgba(214,207,154,.12); color: var(--moon); border-color: rgba(214,207,154,.4); }
.spell-tag.conc   { background: rgba(111,138,90,.1);  color: var(--moss); border-color: rgba(111,138,90,.4); }
.spell-tag.noslot { background: rgba(154,134,196,.1); color: var(--magic); border-color: rgba(154,134,196,.4); }
.spell-tag.ex     { background: rgba(0,0,0,.2); color: var(--ink-mute); border-color: var(--border); }

.spell-tactics {
  font-size: .85rem;
  color: var(--ink-soft);
  margin-top: .45rem;
  padding-left: .6rem;
  border-left: 2px solid var(--border-soft);
}
.spell-cast {
  display: flex; gap: .35rem; align-items: center;
  margin-top: .5rem;
  font-size: .8rem;
}
.spell-cast .cast-btn {
  font-family: var(--display);
  font-size: .72rem; letter-spacing: .1em;
  padding: .35rem .65rem;
  background: var(--bg-elev);
  color: var(--ink-soft);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  cursor: pointer;
}
.spell-cast .cast-btn:hover { background: var(--bg-card-hi); border-color: var(--gold-soft); color: var(--gold); }

/* ---------- Combos ---------- */
.combos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
}
@media (min-width: 800px) { .combos-grid { grid-template-columns: 1fr 1fr; } }
.combo {
  background: rgba(0,0,0,.18);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: .8rem;
}
.combo-title {
  font-family: var(--display);
  color: var(--gold);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.combo ol { margin: 0; padding-left: 1.3rem; color: var(--ink-soft); font-size: .9rem; }
.combo ol li { margin-bottom: .25rem; }

/* ---------- Kern view ---------- */
.kern-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: center;
}
@media (max-width: 600px) {
  .kern-hero { grid-template-columns: 1fr; text-align: center; }
}
.kern-glyph {
  width: 100px; height: 100px;
  color: var(--ink-soft);
}
.kern-tag {
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 .8rem;
}
.kern-quote {
  margin: 0;
  padding: .6rem 0 .2rem .8rem;
  border-left: 2px solid var(--gold-soft);
  font-style: italic;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.5;
}
.kern-list { list-style: none; padding: 0; margin: 0; }
.kern-list li {
  padding: .55rem 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink-soft);
  font-size: .92rem;
}
.kern-list li:last-child { border-bottom: 0; }
.warn { color: var(--rust); font-weight: 600; }
.kern-tactics { margin: 0; padding-left: 1.3rem; color: var(--ink-soft); }
.kern-tactics li { margin-bottom: .4rem; }

/* ---------- Story timeline ---------- */
.story-lead {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--moon);
  text-align: center;
  margin: .5rem 0 0;
}
.timeline {
  list-style: none; padding: 0; margin: 1.5rem 0 0;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 22px; top: 10px; bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 10%, var(--border-strong) 90%, transparent);
}
.tl-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  margin-bottom: 1.2rem;
  position: relative;
}
.tl-marker {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: .05em;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--bg-deep);
}
.tl-item.dark .tl-marker { border-color: var(--rust); color: var(--rust); }
.tl-item.kern .tl-marker { border-color: var(--ink-soft); color: var(--ink-soft); }
.tl-body {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
}
.tl-body h3 {
  margin: 0 0 .4rem;
  font-size: .92rem;
  text-transform: none;
  letter-spacing: .05em;
  color: var(--ink);
}
.tl-body p { margin: 0 0 .5rem; color: var(--ink-soft); font-size: .92rem; }
.tl-body p:last-child { margin-bottom: 0; }
.story-q { font-style: italic; color: var(--moon); border-left: 2px solid var(--gold-soft); padding-left: .6rem; }
.kw {
  font-style: italic;
  letter-spacing: .03em;
}
.kw.nameless { color: var(--rust); }
.kw.seal     { color: var(--gold); }

/* ---------- Decisions ---------- */
.prof-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin: .5rem 0;
}
.prof-choice button {
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  padding: .65rem .8rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  text-align: left;
  font-family: var(--display);
  letter-spacing: .05em;
  min-height: 44px;
  display: flex; justify-content: space-between; align-items: center;
}
.prof-choice button.chosen {
  background: rgba(201,169,97,.15);
  border-color: var(--gold);
  color: var(--gold);
}
.prof-choice button .delta {
  font-size: .8rem;
  color: var(--moss);
  font-family: var(--serif);
}

.recommendation {
  margin-top: .8rem;
  padding: .75rem .9rem;
  background: rgba(154,134,196,.06);
  border-left: 3px solid var(--magic);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .9rem;
  color: var(--ink-soft);
}

.todo-list {
  list-style: none; padding: 0; margin: 0;
}
.todo-list li {
  padding: .65rem .55rem;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  user-select: none;
  display: flex; align-items: center; gap: .6rem;
  min-height: 44px;
  color: var(--ink-soft);
}
.todo-list li::before {
  content: '';
  width: 18px; height: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--bg-elev);
  display: inline-block;
}
.todo-list li.done {
  color: var(--ink-mute);
  text-decoration: line-through;
}
.todo-list li.done::before {
  background: var(--moss);
  border-color: var(--moss);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%230b110e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3 3 7-7'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

textarea#notes {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: .75rem;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .92rem;
  resize: vertical;
  min-height: 140px;
}
.notes-meta { margin-top: .4rem; font-size: .75rem; color: var(--ink-mute); }

/* ---------- Footer ---------- */
.site-footer {
  padding: 2rem 1rem 1.5rem;
  text-align: center;
  font-size: .75rem;
  color: var(--ink-faint);
  font-family: var(--display);
  letter-spacing: .1em;
}

/* ---------- Utility ---------- */
[hidden] { display: none !important; }
.small { font-size: .85rem; }

/* HP color states */
.hp-bar-fill[data-state="low"]    { background: linear-gradient(90deg, var(--blood), var(--rust)); }
.hp-bar-fill[data-state="medium"] { background: linear-gradient(90deg, var(--rust), var(--gold-soft)); }

/* Touch device tweaks */
@media (hover: none) {
  .pill-btn:hover, .hp-btn:hover, .big-btn:hover { background: var(--bg-elev); border-color: var(--border-strong); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   v2 ADDITIONS — Vitals Bar, Banner, Modals, Toasts, Death Saves
   ============================================================ */

/* ---------- Header tools ---------- */
.header-tools {
  display: flex; align-items: center; gap: .25rem;
  margin-left: auto;
  flex-shrink: 0;
}
.header-icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--ink-soft);
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.header-icon-btn svg { width: 18px; height: 18px; }
.header-icon-btn:hover { background: var(--bg-card-hi); color: var(--gold); border-color: var(--gold-soft); }
.header-icon-btn:active { transform: scale(.95); }
@media (min-width: 900px) {
  .header-tools { margin-left: 1rem; order: 3; }
}

/* ---------- VITALS BAR (sticky, on every tab) ---------- */
.vitals-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 45;
  display: grid;
  grid-template-columns: 1.4fr 1.2fr .8fr;
  gap: .5rem;
  padding: .55rem .7rem;
  background: linear-gradient(180deg, rgba(11,17,14,.95) 0%, rgba(11,17,14,.88) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.vital-block {
  display: flex; align-items: center; gap: .35rem;
  min-width: 0;
}
.vital-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 1.15rem; line-height: 1;
  cursor: pointer; user-select: none;
  flex-shrink: 0;
  transition: transform .08s, background .15s, border-color .15s;
}
.vital-btn:active { transform: scale(.92); }
.vital-btn:hover  { background: var(--bg-card-hi); border-color: var(--gold-soft); }
.vital-btn.dec    { border-color: rgba(168,59,50,.45); color: #d2877a; }
.vital-btn.inc    { border-color: rgba(111,138,90,.5);  color: #a3c089; }

.vital-tap {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--border-soft);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: .35rem .55rem;
  font: inherit;
  cursor: pointer;
  text-align: center;
  position: relative;
  min-height: 44px;
  justify-content: center;
}
.vital-tap:hover { background: rgba(255,255,255,.04); border-color: var(--gold-soft); }
.vital-tap:active { transform: scale(.98); }

.vital-num {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: .03em;
  white-space: nowrap;
}
.vital-sep { color: var(--ink-faint); margin: 0 1px; }
.vital-temp {
  position: absolute; top: 2px; right: 6px;
  font-size: .7rem; color: var(--moon);
  font-family: var(--display);
}
.vital-bar {
  position: absolute; left: 6px; right: 6px; bottom: 4px;
  height: 3px; border-radius: 2px;
  background: rgba(0,0,0,.5);
  overflow: hidden;
}
.vital-bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--blood) 0%, var(--moss) 60%);
  width: 100%;
  transition: width .25s;
}
.vital-bar-fill[data-state="low"]    { background: var(--blood); }
.vital-bar-fill[data-state="medium"] { background: linear-gradient(90deg, var(--rust), var(--gold-soft)); }

.vital-lbl {
  font-family: var(--display);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1px;
}
.vital-pips {
  display: inline-flex; gap: 3px; align-items: center;
}
.vital-pips .pip {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  border: 1px solid var(--gold-soft);
  box-shadow: 0 0 4px rgba(201,169,97,.45);
}
.vital-pips .pip.empty { background: transparent; box-shadow: none; opacity: .35; }
.vital-pips.small .pip { width: 7px; height: 7px; }
.vital-pips .pip.ws { background: var(--moon); border-color: rgba(214,207,154,.6); }

@media (max-width: 420px) {
  .vitals-bar { grid-template-columns: 1.4fr 1fr .8fr; padding: .45rem .5rem; gap: .35rem; }
  .vital-btn { width: 34px; height: 34px; }
  .vital-tap { padding: .3rem .35rem; }
  .vital-num { font-size: .95rem; }
}

/* ---------- BANNER (Concentration / Form / Death) ---------- */
.banner {
  position: sticky; z-index: 44;
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .8rem;
  font-size: .88rem;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.banner-conc {
  top: calc(var(--nav-h) + 60px);
  background: rgba(154, 134, 196, .15);
  color: var(--magic);
  border-color: rgba(154,134,196,.3);
}
.banner-form {
  top: calc(var(--nav-h) + 60px);
  background: linear-gradient(90deg, rgba(214,207,154,.18) 0%, rgba(111,138,90,.12) 100%);
  color: var(--moon);
  border-color: rgba(214,207,154,.35);
}
.banner-death {
  top: calc(var(--nav-h) + 60px);
  background: rgba(168, 59, 50, .15);
  color: var(--rust);
  border-color: rgba(168,59,50,.4);
  flex-wrap: wrap;
}
.banner-conc + .banner-form { top: calc(var(--nav-h) + 60px + 38px); }
.banner-form + .banner-death,
.banner-conc + .banner-death { top: calc(var(--nav-h) + 60px + 38px); }

.form-banner-icon {
  display: inline-flex; width: 28px; height: 28px; color: var(--moon);
  flex-shrink: 0;
}
.form-banner-icon svg { width: 28px; height: 28px; }
.form-banner-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.form-banner-text strong { font-family: var(--display); font-size: .95rem; }
.form-banner-stats { font-size: .73rem; color: var(--ink-soft); }

.banner-close {
  margin-left: auto;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 1.1rem; line-height: 1;
  cursor: pointer; opacity: .8;
}
.banner-close:hover { opacity: 1; background: rgba(255,255,255,.06); }

.death-title { font-family: var(--display); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; }
.death-row { display: flex; align-items: center; gap: .4rem; margin-top: .25rem; }
.death-label { font-size: .75rem; color: var(--ink-soft); min-width: 5em; }
.death-pips { display: inline-flex; gap: 4px; }
.death-pips .pip {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
}
.death-pips .pip.filled { background: var(--moss); border-color: var(--moss); }
.death-pips.fails .pip.filled { background: var(--rust); border-color: var(--rust); }
.death-actions {
  display: flex; gap: .4rem;
  margin-left: auto;
  margin-top: .35rem;
  width: 100%;
  flex-wrap: wrap;
}
@media (min-width: 600px) { .death-actions { width: auto; margin-top: 0; } }

/* ---------- MODAL base ---------- */
.modal {
  border: none;
  background: transparent;
  padding: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100vh;
}
.modal::backdrop {
  background: rgba(7, 11, 9, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}
.modal-inner {
  width: min(540px, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  background: linear-gradient(180deg, var(--bg-card-hi) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(201,169,97,.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border-soft);
}
.modal-head h3 { margin: 0; flex: 1; }
.modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--ink-soft);
  border: 1px solid var(--border-soft);
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
}
.modal-foot {
  padding: .8rem 1rem;
  border-top: 1px solid var(--border-soft);
  display: flex; gap: .5rem;
  justify-content: flex-end;
}
.primary-pill {
  background: linear-gradient(180deg, rgba(201,169,97,.22), rgba(201,169,97,.06));
  border-color: var(--gold-soft);
  color: var(--gold);
}

/* ---------- DICE MODAL ---------- */
.dice-mode {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
  padding: .8rem 1rem 0;
}
.dice-mode-btn {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  color: var(--ink-soft);
  padding: .55rem .4rem;
  font: inherit;
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .08em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 42px;
}
.dice-mode-btn.active {
  background: rgba(201,169,97,.18);
  border-color: var(--gold-soft);
  color: var(--gold);
}
.dice-result-card {
  margin: .8rem 1rem;
  padding: 1rem;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  text-align: center;
  position: relative;
}
.dice-result-label {
  font-family: var(--display);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: .35rem;
}
.dice-result-total {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.dice-result-detail {
  font-size: .8rem;
  color: var(--ink-mute);
  margin-top: .35rem;
}
.dice-result-tag {
  margin-top: .4rem;
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
  min-height: 1.2em;
}
.dice-result-tag.crit  { color: #d8b75e; font-weight: 700; }
.dice-result-tag.fumb  { color: var(--rust); font-weight: 700; }
.dice-quick {
  padding: .8rem 1rem;
  border-top: 1px solid var(--border-soft);
}
.dice-quick-row {
  display: flex; gap: .4rem; align-items: center;
  margin-bottom: .5rem;
}
.dice-quick-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .3rem;
}
.dice-quick-presets .pill-btn { padding: .4rem .3rem; font-size: .78rem; }

/* Make attack rows / spells / form-attacks look clickable */
.attack-row { cursor: pointer; transition: background .15s, border-color .15s; }
.attack-row:hover, .attack-row:focus-visible { background: rgba(201,169,97,.06); border-color: var(--gold-soft); }
.attack-row.highlight { border-color: var(--gold-soft); }
.spell-card { cursor: pointer; transition: background .15s, border-color .15s; }
.spell-card:hover { background: rgba(201,169,97,.04); border-color: var(--gold-soft); }
.skill-row { cursor: pointer; transition: background .15s; }
.skill-row:hover { background: rgba(201,169,97,.05); }
.save-row { cursor: pointer; }
.save-row:hover { background: rgba(201,169,97,.05); }
.form-attacks div { cursor: pointer; padding: .25rem .35rem; border-radius: 4px; }
.form-attacks div:hover { background: rgba(201,169,97,.06); }

/* ---------- SEARCH MODAL ---------- */
.search-modal-input {
  flex: 1;
  font-size: 1rem;
  padding: .6rem .8rem;
}
.search-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 60vh;
}
.search-result {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s;
}
.search-result:hover, .search-result:focus-visible { background: rgba(201,169,97,.06); outline: none; }
.search-result:last-child { border-bottom: 0; }
.search-result-name { flex: 1; font-family: var(--display); font-size: .92rem; }
.search-result-cat {
  font-size: .65rem;
  font-family: var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .15rem .4rem;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}
.search-result-cat.spell  { color: var(--magic); border-color: rgba(154,134,196,.4); background: rgba(154,134,196,.08); }
.search-result-cat.form   { color: var(--moss);  border-color: rgba(111,138,90,.5); background: rgba(111,138,90,.1); }
.search-result-cat.attack { color: var(--rust);  border-color: rgba(168,59,50,.4); background: rgba(168,59,50,.08); }
.search-result-cat.skill  { color: var(--gold);  border-color: var(--gold-soft); background: rgba(201,169,97,.08); }
.search-result-cat.tab    { color: var(--moon);  border-color: rgba(214,207,154,.4); background: rgba(214,207,154,.06); }
.search-result-meta {
  font-size: .7rem;
  color: var(--ink-mute);
}

/* ---------- ONBOARDING ---------- */
.onboarding-body { padding: 1rem 1.2rem; }
.onboard-list { padding-left: 1.1rem; margin: .2rem 0 .8rem; }
.onboard-list li { margin-bottom: .55rem; color: var(--ink-soft); font-size: .92rem; line-height: 1.4; }

/* ---------- TOAST ---------- */
.toast-stack {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px);
  z-index: 80;
  display: flex; flex-direction: column;
  gap: .4rem;
  pointer-events: none;
  width: min(360px, calc(100vw - 2rem));
}
@media (min-width: 900px) {
  .toast-stack { bottom: 24px; }
}
.toast {
  background: rgba(26, 37, 32, .95);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: .6rem .85rem;
  font-size: .88rem;
  box-shadow: var(--shadow-2);
  animation: toast-in .2s ease, toast-out .2s ease 1.6s forwards;
  pointer-events: auto;
}
.toast.success { border-color: rgba(111,138,90,.55); }
.toast.warn    { border-color: rgba(168,59,50,.55); color: #f3c8c0; }
.toast.info    { border-color: var(--gold-soft); color: var(--gold); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px); }
}

/* Notice that on dashboard we already have a hero card with full HP/Slot/WS UI;
   The vitals bar is redundant on dashboard — hide its larger duplicate? No,
   keep both since vitals bar is interactive on every tab incl. dashboard. */

/* ============================================================
   v3 — RICH FORM CARDS, COMPARE TABLE, DECISION HELPER, Q&A
   ============================================================ */

/* ---------- Decision helper ---------- */
.decision-card { padding-bottom: 1.2rem; }
.decision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
  margin-top: .6rem;
}
@media (min-width: 700px) { .decision-grid { grid-template-columns: 1fr 1fr; } }
.decision-btn {
  display: flex; align-items: center; gap: .8rem;
  padding: .85rem 1rem;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--border-soft);
  color: var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font: inherit;
  min-height: 64px;
  transition: background .15s, border-color .15s, transform .08s;
}
.decision-btn:hover { background: rgba(255,255,255,.05); border-color: var(--gold-soft); }
.decision-btn:active { transform: scale(.98); }
.decision-btn.active {
  background: rgba(214, 207, 154, .12);
  border-color: var(--moon);
  box-shadow: 0 0 0 2px rgba(214,207,154,.25);
}
.decision-text {
  display: flex; flex-direction: column; gap: 1px; line-height: 1.3;
  flex: 1; min-width: 0;
}
.decision-text strong {
  font-family: var(--display);
  font-size: .95rem;
  color: var(--ink);
  letter-spacing: .03em;
}
.decision-text em {
  font-size: .8rem;
  color: var(--gold-soft);
  font-style: italic;
}
.decision-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--moss);
}
.decision-icon svg { width: 32px; height: 32px; }
.decision-btn[data-decide="brownBear"]   .decision-icon { color: #c8915a; }
.decision-btn[data-decide="direWolf"]    .decision-icon { color: #9aa9b3; }
.decision-btn[data-decide="giantSpider"] .decision-icon { color: #9a86c4; }
.decision-btn[data-decide="rat"]         .decision-icon { color: #a89c84; }

/* ---------- Rich form cards (4 chosen forms, fat blocks) ---------- */
.rich-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: .4rem;
}
@media (min-width: 800px) {
  .rich-form-grid { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
}

.rich-form {
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.16) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1rem 1.05rem 1.1rem;
  position: relative;
  overflow: hidden;
}
.rich-form::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 70px;
  border-radius: var(--radius) var(--radius) 0 0;
  pointer-events: none;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.05), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent);
}
.rich-form.active {
  outline: 2px solid var(--moon);
  outline-offset: 1px;
  box-shadow: 0 0 22px rgba(214,207,154,.18);
}

/* Per-form theme accents */
.rich-form.form-bear   { border-color: rgba(180,118,68,.55);  background: linear-gradient(180deg, rgba(120,72,38,.18), rgba(0,0,0,.18) 70%); }
.rich-form.form-wolf   { border-color: rgba(120,140,160,.55); background: linear-gradient(180deg, rgba(60,80,110,.18), rgba(0,0,0,.18) 70%); }
.rich-form.form-spider { border-color: rgba(140,120,180,.55); background: linear-gradient(180deg, rgba(60,40,90,.22), rgba(0,0,0,.18) 70%); }
.rich-form.form-rat    { border-color: rgba(150,138,112,.5);  background: linear-gradient(180deg, rgba(60,55,45,.22), rgba(0,0,0,.18) 70%); }

.rich-form.form-bear   .rich-icon { color: #d49b6c; }
.rich-form.form-wolf   .rich-icon { color: #b8c8d4; }
.rich-form.form-spider .rich-icon { color: #b9a8e0; }
.rich-form.form-rat    .rich-icon { color: #c5b89a; }

.rich-form-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .7rem;
  align-items: center;
  margin-bottom: .55rem;
}
.rich-icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.4);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  flex-shrink: 0;
}
.rich-icon svg { width: 38px; height: 38px; }
.rich-name {
  display: flex; flex-direction: column; min-width: 0;
}
.rich-name-de {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: .04em;
  line-height: 1.05;
}
.rich-name-en {
  font-size: .82rem;
  color: var(--ink-mute);
  font-style: italic;
}
.rich-cr {
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .12em;
  background: rgba(0,0,0,.4);
  color: var(--gold-soft);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: .15rem .45rem;
  white-space: nowrap;
}
.rich-roles {
  display: flex; flex-wrap: wrap; gap: .25rem;
  margin-bottom: .55rem;
}
.rich-roles .form-tag.role {
  background: rgba(255,255,255,.04);
  border-color: var(--border-soft);
  color: var(--ink-soft);
}
.rich-form.form-bear   .rich-roles .form-tag.role { color: #e3b48a; border-color: rgba(212,155,108,.45); background: rgba(212,155,108,.1); }
.rich-form.form-wolf   .rich-roles .form-tag.role { color: #c2d2dc; border-color: rgba(184,200,212,.4); background: rgba(184,200,212,.08); }
.rich-form.form-spider .rich-roles .form-tag.role { color: #c8b8e8; border-color: rgba(185,168,224,.5); background: rgba(185,168,224,.1); }
.rich-form.form-rat    .rich-roles .form-tag.role { color: #d3c8a8; border-color: rgba(197,184,154,.45); background: rgba(197,184,154,.08); }

.rich-summary {
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 .8rem;
}

.rich-section {
  margin-top: .65rem;
}
.rich-section h5 {
  margin: 0 0 .25rem;
  font-family: var(--display);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
}
.rich-form.form-bear   .rich-section h5 { color: #e3b48a; }
.rich-form.form-wolf   .rich-section h5 { color: #c2d2dc; }
.rich-form.form-spider .rich-section h5 { color: #c8b8e8; }
.rich-form.form-rat    .rich-section h5 { color: #d3c8a8; }

.rich-section ul {
  margin: 0; padding-left: 1.1rem;
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.rich-section ul li { margin-bottom: .2rem; }
.rich-section ol {
  margin: 0; padding-left: 1.2rem;
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.rich-section ol li { margin-bottom: .25rem; }

.rich-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .3rem;
  margin-top: .65rem;
}
.rich-stats > div {
  background: rgba(0,0,0,.3);
  border: 1px solid var(--border-soft);
  padding: .35rem .4rem;
  border-radius: 4px;
  text-align: center;
  font-size: .72rem;
  color: var(--ink-mute);
}
.rich-stats strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: .9rem;
}

.rich-vibe {
  margin-top: .75rem;
  padding: .55rem .7rem;
  border-left: 2px solid var(--gold-soft);
  background: rgba(201,169,97,.05);
  font-size: .85rem;
  font-style: italic;
  color: var(--moon);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.rich-form.form-bear   .rich-vibe { border-left-color: #d49b6c; color: #e3b48a; background: rgba(212,155,108,.06); }
.rich-form.form-wolf   .rich-vibe { border-left-color: #b8c8d4; color: #c2d2dc; background: rgba(184,200,212,.06); }
.rich-form.form-spider .rich-vibe { border-left-color: #b9a8e0; color: #c8b8e8; background: rgba(185,168,224,.07); }
.rich-form.form-rat    .rich-vibe { border-left-color: #c5b89a; color: #d3c8a8; background: rgba(197,184,154,.06); }

.rich-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin-top: .8rem;
}
.rich-actions .pill-btn { width: 100%; min-height: 42px; }
.rich-actions .activate-btn {
  background: linear-gradient(180deg, rgba(214,207,154,.18), rgba(214,207,154,.04));
  border-color: rgba(214,207,154,.4);
  color: var(--moon);
}
.rich-actions .select-btn {
  background: var(--bg-elev);
}
.rich-form.active .rich-actions .activate-btn {
  background: rgba(214,207,154,.3);
  color: #0d1410;
  border-color: var(--moon);
}

.rich-notes {
  margin-top: .7rem;
}
.rich-notes textarea {
  width: 100%;
  min-height: 60px;
  padding: .5rem .65rem;
  font: inherit;
  font-size: .85rem;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--ink);
  resize: vertical;
}
.rich-notes textarea:focus { border-color: var(--gold-soft); outline: none; }
.rich-notes-label {
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: .25rem;
  display: block;
}

/* Utility-only marker for Rat */
.rich-form.utility-only {
  position: relative;
}
.rich-form.utility-only::after {
  content: "Utility · kein Kampf";
  position: absolute;
  top: .8rem; right: .8rem;
  font-family: var(--display);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(168, 59, 50, .12);
  color: var(--rust);
  border: 1px solid rgba(168,59,50,.4);
  border-radius: 3px;
  padding: .15rem .45rem;
  pointer-events: none;
}

/* ---------- Compare table ---------- */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: .2rem -1.1rem;
  padding: 0 1.1rem;
}
.compare-table {
  width: 100%;
  min-width: 500px;
  border-collapse: separate;
  border-spacing: 0 4px;
  font-size: .88rem;
}
.compare-table th {
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: .35rem .55rem;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.compare-table th.situation { text-align: left; min-width: 9em; }
.compare-table td {
  background: rgba(0,0,0,.18);
  padding: .55rem .55rem;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.compare-table td:first-child {
  border-left: 1px solid var(--border-soft);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.compare-table td:last-child {
  border-right: 1px solid var(--border-soft);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.compare-table tr.row-bear   td:first-child { border-left-color: #d49b6c; box-shadow: inset 3px 0 0 #d49b6c; }
.compare-table tr.row-wolf   td:first-child { border-left-color: #b8c8d4; box-shadow: inset 3px 0 0 #b8c8d4; }
.compare-table tr.row-spider td:first-child { border-left-color: #b9a8e0; box-shadow: inset 3px 0 0 #b9a8e0; }
.compare-table tr.row-rat    td:first-child { border-left-color: #c5b89a; box-shadow: inset 3px 0 0 #c5b89a; }

.compare-form {
  display: flex; align-items: center; gap: .5rem;
}
.compare-form-icon {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.compare-form-icon svg { width: 22px; height: 22px; }
.compare-form-name {
  font-family: var(--display);
  font-size: .85rem;
  color: var(--ink);
}
.row-bear   .compare-form-icon { color: #d49b6c; }
.row-wolf   .compare-form-icon { color: #b8c8d4; }
.row-spider .compare-form-icon { color: #b9a8e0; }
.row-rat    .compare-form-icon { color: #c5b89a; }

.rating {
  display: inline-flex; gap: 2px;
  letter-spacing: 0;
  font-size: .75rem;
}
.rating .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  border: 1px solid var(--gold-soft);
  box-shadow: 0 0 4px rgba(201,169,97,.4);
  display: inline-block;
}
.rating .dot.empty {
  background: transparent;
  box-shadow: none;
  border-color: var(--border-strong);
  opacity: .55;
}
.compare-table td.situation {
  font-size: .8rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- Q&A card ---------- */
.qa-card .qa-answer {
  font-size: .95rem;
  line-height: 1.5;
  background: rgba(154,134,196,.06);
  border-left: 3px solid var(--magic);
  padding: .7rem .85rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-soft);
  margin: .3rem 0 1rem;
}
.qa-card .qa-answer strong { color: var(--magic); font-family: var(--display); letter-spacing: .04em; }
.qa-block { margin-top: 1rem; }
.qa-block h4 {
  margin: 0 0 .35rem;
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.qa-list {
  margin: 0; padding-left: 1.15rem;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.5;
}
.qa-list li { margin-bottom: .25rem; }
.qa-list li strong { color: var(--ink); font-style: normal; }

/* ---------- v3.1: Knockdown / GM-confirmed / Senses ---------- */
.confirmed-badge {
  display: inline-block;
  font-family: var(--display);
  font-size: .55rem;
  letter-spacing: .14em;
  padding: .12rem .35rem;
  margin-left: .35rem;
  background: rgba(111, 138, 90, .18);
  color: #b9d39f;
  border: 1px solid rgba(111, 138, 90, .55);
  border-radius: 3px;
  vertical-align: middle;
  text-transform: uppercase;
}
.multiattack-note {
  margin: .15rem 0 .35rem;
  font-size: .82rem;
  color: var(--ink-soft);
  font-style: italic;
}
.multiattack-note strong { font-style: normal; color: var(--gold); font-family: var(--display); letter-spacing: .04em; }
.attack-effect-note {
  margin-top: .15rem;
  padding-left: .5rem;
  font-size: .76rem;
  color: var(--moon);
  font-style: italic;
}
.senses-line {
  font-size: .85rem;
  color: var(--ink-soft);
  margin-bottom: .15rem;
}
.senses-line.muted { color: var(--ink-mute); font-size: .78rem; }
.senses-label { color: var(--ink-mute); font-family: var(--display); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; margin-right: .25rem; }

/* Combat tab attack rows with knockdown effect */
.attack-row.has-effect {
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  row-gap: .25rem;
}
.attack-effect {
  grid-column: 1 / -1;
  font-size: .78rem;
  color: var(--moon);
  padding: .25rem .45rem;
  background: rgba(214, 207, 154, .07);
  border-left: 2px solid var(--gold-soft);
  border-radius: 0 4px 4px 0;
  font-style: italic;
}
.attack-effect .effect-icon {
  display: inline-block;
  margin-right: .35rem;
  color: var(--gold);
  font-style: normal;
}

/* ---------- v3.2: Features list, secondary damage, no-roll attacks ---------- */
.features-list {
  margin: .15rem 0 0;
  padding-left: 1.1rem;
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.features-list li { margin-bottom: .35rem; }
.features-list li strong {
  font-family: var(--display);
  letter-spacing: .04em;
  color: var(--gold);
}
.rich-form.form-bear   .features-list li strong { color: #e3b48a; }
.rich-form.form-wolf   .features-list li strong { color: #c2d2dc; }
.rich-form.form-spider .features-list li strong { color: #c8b8e8; }
.rich-form.form-rat    .features-list li strong { color: #d3c8a8; }

.form-attacks div.no-roll {
  cursor: default;
  background: rgba(154,134,196,.06);
  border-radius: 4px;
  padding: .25rem .35rem;
}
.form-attacks div.no-roll:hover { background: rgba(154,134,196,.1); }
.form-attacks div.no-roll::after {
  content: "  ⓘ Save-Aktion (kein Angriffswurf)";
  font-size: .68rem;
  color: var(--magic);
  font-style: italic;
  margin-left: .3rem;
}

/* Secondary damage card (e.g. Spider's poison) */
.dice-result-card.secondary-dmg {
  margin-top: -.2rem;
  border-color: rgba(111,138,90,.5);
  background: linear-gradient(180deg, rgba(111,138,90,.12) 0%, rgba(0,0,0,.18) 100%);
}
.dice-result-card.secondary-dmg .dice-result-label { color: var(--moss); }
.dice-result-card.secondary-dmg .dice-result-total { color: #b9d39f; }

/* ---------- v3.3: Trait-list, Conflict, Hit-Dice, Inspiration ---------- */
.trait-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.trait-list li {
  padding: .55rem 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.45;
}
.trait-list li:last-child { border-bottom: 0; }
.trait-list li strong {
  font-family: var(--display);
  letter-spacing: .04em;
  color: var(--gold);
}
.trait-list li.conflict {
  background: rgba(168,59,50,.06);
  border-left: 3px solid rgba(168,59,50,.5);
  padding: .6rem .65rem;
  margin: .4rem -.5rem;
  border-radius: 0 4px 4px 0;
}
.trait-list li.conflict strong { color: var(--rust); }
.trait-list li.conflict em { color: var(--ink); font-style: normal; font-weight: 600; }
.conflict-tag {
  display: inline-block;
  font-family: var(--display);
  font-size: .58rem;
  letter-spacing: .14em;
  padding: .12rem .4rem;
  margin-left: .35rem;
  background: rgba(168,59,50,.18);
  color: var(--rust);
  border: 1px solid rgba(168,59,50,.55);
  border-radius: 3px;
  vertical-align: middle;
  text-transform: uppercase;
}

.hd-row {
  margin-bottom: .55rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border-soft);
}
.hd-row .pill-btn { padding: .35rem .65rem; font-size: .78rem; min-height: 32px; margin-left: auto; }

.inspiration-row {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border-soft);
}
.insp-toggle {
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer;
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--gold-soft);
  user-select: none;
}
.insp-toggle input {
  width: 18px; height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
}
.insp-toggle input:checked + span { color: var(--gold); text-shadow: 0 0 8px rgba(201,169,97,.5); }

/* ============================================================
   v4 — KNOWLEDGE / LORE TAB (Vorwissen)
   ============================================================ */

.lore-intro .story-lead { text-align: left; font-size: 1rem; }

/* Cosmology diagram */
.cosmology {
  width: 100%;
  height: auto;
  max-width: 700px;
  display: block;
  margin: .4rem auto;
}
.cosmo-label {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--ink-soft);
}
.cosmo-label.cosmo-astral { fill: var(--magic); font-size: 18px; letter-spacing: .22em; }
.cosmo-label.cosmo-aether { fill: var(--moon); font-size: 14px; }
.cosmo-label.cosmo-inner  { fill: var(--gold); font-size: 12px; opacity: .85; }
.cosmo-plane {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .08em;
  fill: var(--ink);
  font-weight: 600;
}
.cosmo-plane.cosmo-fey      { fill: #b9d39f; }
.cosmo-plane.cosmo-material { fill: var(--gold); font-size: 15px; }
.cosmo-plane.cosmo-shadow   { fill: #c8b8e8; }
.cosmo-sub {
  font-family: var(--serif);
  font-size: 9.5px;
  fill: var(--ink-mute);
  font-style: italic;
  letter-spacing: .04em;
}
.cosmo-elem {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .12em;
  fill: var(--ink-soft);
  text-transform: uppercase;
}
.cosmo-chaos {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .15em;
  fill: var(--rust);
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .cosmo-label.cosmo-astral { font-size: 14px; }
  .cosmo-label.cosmo-aether { font-size: 11px; }
  .cosmo-label.cosmo-inner  { font-size: 10px; }
  .cosmo-plane { font-size: 11px; }
  .cosmo-plane.cosmo-material { font-size: 13px; }
  .cosmo-elem  { font-size: 9.5px; }
  .cosmo-chaos { font-size: 9.5px; }
  .cosmo-sub { font-size: 8px; }
}

/* Lore lists & sublists */
.lore-list {
  margin: 0; padding-left: 1.1rem;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.55;
}
.lore-list > li { margin-bottom: .55rem; }
.lore-list strong { color: var(--ink); }
.lore-sublist {
  margin: .3rem 0 .35rem;
  padding-left: 1rem;
  list-style: "— ";
}
.lore-sublist li { margin-bottom: .15rem; font-size: .88rem; }

/* Lore keywords (re-uses kw style with new variants) */
.kw-fey      { color: #b9d39f; font-style: italic; letter-spacing: .04em; }
.kw-shadow   { color: #c8b8e8; font-style: italic; letter-spacing: .04em; }
.kw-place    { color: var(--gold); font-style: italic; letter-spacing: .04em; }
.kw-seal     { color: var(--gold); font-style: italic; letter-spacing: .04em; }
.kw-nameless { color: var(--rust); font-style: italic; letter-spacing: .04em; }

/* Mystery / dreams card */
.lore-mystery {
  background: linear-gradient(180deg, rgba(154,134,196,.08) 0%, var(--bg-base) 100%);
  border-color: rgba(154,134,196,.4);
}
.dream-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
  margin-top: .8rem;
}
@media (min-width: 800px) { .dream-grid { grid-template-columns: 1fr 1fr 1fr; } }
.dream-card {
  position: relative;
  padding: 1rem 1rem .9rem 2.2rem;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(154,134,196,.25);
  border-radius: var(--radius-sm);
  font-style: italic;
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.5;
  overflow: hidden;
}
.dream-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 30% 0%, rgba(154,134,196,.12), transparent 70%),
    radial-gradient(60% 60% at 80% 100%, rgba(214,207,154,.06), transparent 70%);
  pointer-events: none;
}
.dream-card p { position: relative; margin: 0; }
.dream-card em { color: var(--moon); font-style: italic; }
.dream-num {
  position: absolute;
  top: .9rem; left: .85rem;
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--magic);
  letter-spacing: .1em;
  z-index: 1;
}

/* Quest card */
.lore-quest { border-color: rgba(201,169,97,.5); }
.bounty-notice {
  position: relative;
  margin: .8rem 0 .6rem;
  padding: 1rem 1.1rem 1rem 2.6rem;
  background: linear-gradient(180deg, rgba(214,207,154,.08), rgba(201,169,97,.04));
  border: 1px dashed rgba(201,169,97,.55);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--serif);
  font-size: .98rem;
  line-height: 1.5;
}
.bounty-notice::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(201,169,97,.18);
  border-radius: 5px;
  pointer-events: none;
}
.bounty-pin {
  position: absolute;
  top: .5rem; left: .8rem;
  font-size: 1.1rem;
  filter: grayscale(.3);
}
.bounty-text {
  margin: 0;
  font-style: italic;
  color: var(--ink);
}
.bounty-text strong { color: var(--gold); font-style: normal; }
.bounty-meta {
  margin-top: .6rem;
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Thread back to backstory */
.lore-thread {
  background: linear-gradient(180deg, rgba(168,59,50,.06), var(--bg-base));
  border-color: rgba(168,59,50,.3);
}

/* Search result tag for lore */
.search-result-cat.lore {
  color: var(--moon);
  border-color: rgba(214,207,154,.4);
  background: rgba(214,207,154,.08);
}

/* ============================================================
   v5 — PLAYGUIDE / SPIELHILFE TAB (Erst-Druiden-Hilfe)
   ============================================================ */

/* ---------- Turn steps (Mein Zug) ---------- */
.playguide-turn .turn-steps {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: none;
}
.turn-steps > li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--border-soft);
  align-items: start;
}
.turn-steps > li:last-child { border-bottom: 0; }
.step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .04em;
}
.step-body strong {
  display: block;
  font-family: var(--display);
  font-size: .95rem;
  color: var(--ink);
  letter-spacing: .04em;
  margin-bottom: .15rem;
}
.step-body p { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }

.turn-checklist {
  margin-top: 1rem;
  padding: .8rem 1rem;
  background: rgba(154,134,196,.06);
  border-left: 3px solid var(--magic);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .88rem;
  color: var(--ink-soft);
}
.turn-checklist strong { display: block; margin-bottom: .35rem; color: var(--magic); font-family: var(--display); letter-spacing: .04em; }
.turn-checklist ul { margin: 0; padding-left: 1.1rem; }
.turn-checklist li { margin-bottom: .25rem; }

/* ---------- Action grid (Aktion/Bonus/Reaktion/Frei) ---------- */
.action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
  margin-top: .4rem;
}
@media (min-width: 800px) {
  .action-grid { grid-template-columns: 1fr 1fr; }
}
.action-col {
  background: rgba(0,0,0,.18);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: .85rem .95rem;
}
.action-col h4 {
  margin: 0 0 .55rem;
  font-family: var(--display);
  font-size: .85rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
  text-transform: none;
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.action-col ul {
  margin: 0; padding-left: 1.1rem;
  font-size: .87rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.action-col li { margin-bottom: .3rem; }
.action-col li strong { color: var(--ink); }

.action-col.col-action   { border-left: 3px solid rgba(168,59,50,.55); }
.action-col.col-bonus    { border-left: 3px solid var(--gold-soft); }
.action-col.col-reaction { border-left: 3px solid rgba(154,134,196,.55); }
.action-col.col-free     { border-left: 3px solid rgba(214,207,154,.5); }

/* ---------- Situation grid (Spells nach Situation) ---------- */
.situation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  margin-top: .4rem;
}
@media (min-width: 700px) { .situation-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .situation-grid { grid-template-columns: 1fr 1fr 1fr; } }

.situation {
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: .85rem .95rem;
  position: relative;
}
.situation .sit-icon {
  width: 32px; height: 32px;
  margin-bottom: .4rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--border-strong);
}
.situation .sit-icon svg { width: 18px; height: 18px; }
.situation h4 {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-size: .9rem;
  letter-spacing: .04em;
  color: var(--ink);
  text-transform: none;
}
.situation ol, .situation ul {
  margin: 0 0 .35rem; padding-left: 1.15rem;
  font-size: .85rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.situation li { margin-bottom: .25rem; }
.situation li strong { color: var(--ink); }
.sit-note {
  font-size: .78rem;
  color: var(--ink-mute);
  font-style: italic;
  margin: .4rem 0 0;
}

/* Per-situation accent colors */
.situation.tank    { border-color: rgba(212,155,108,.45); }
.situation.tank    .sit-icon { color: #d49b6c; border-color: rgba(212,155,108,.45); }
.situation.tank    h4 { color: #e3b48a; }

.situation.boss    { border-color: rgba(168,59,50,.5); }
.situation.boss    .sit-icon { color: var(--rust); border-color: rgba(168,59,50,.5); }
.situation.boss    h4 { color: #d2877a; }

.situation.heal    { border-color: rgba(111,138,90,.55); }
.situation.heal    .sit-icon { color: #b9d39f; border-color: rgba(111,138,90,.55); }
.situation.heal    h4 { color: #b9d39f; }

.situation.crowd   { border-color: rgba(154,134,196,.5); }
.situation.crowd   .sit-icon { color: var(--magic); border-color: rgba(154,134,196,.5); }
.situation.crowd   h4 { color: #c8b8e8; }

.situation.flee    { border-color: rgba(184,200,212,.45); }
.situation.flee    .sit-icon { color: #c2d2dc; border-color: rgba(184,200,212,.45); }
.situation.flee    h4 { color: #c2d2dc; }

.situation.stealth { border-color: rgba(214,207,154,.45); }
.situation.stealth .sit-icon { color: var(--moon); border-color: rgba(214,207,154,.45); }
.situation.stealth h4 { color: var(--moon); }

.situation.explore { border-color: rgba(201,169,97,.45); }
.situation.explore .sit-icon { color: var(--gold); border-color: rgba(201,169,97,.45); }
.situation.explore h4 { color: var(--gold); }

.situation.animal  { border-color: rgba(111,138,90,.4); }
.situation.animal  .sit-icon { color: var(--moss); border-color: rgba(111,138,90,.4); }
.situation.animal  h4 { color: #b9d39f; }

/* ---------- Tips list ---------- */
.playguide-tips .tip {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: .7rem;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--border-soft);
}
.playguide-tips .tip:last-child { border-bottom: 0; }
.tip-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  flex-shrink: 0;
}
.tip-icon.ok   { background: rgba(111,138,90,.18); color: #b9d39f; border: 1px solid rgba(111,138,90,.55); }
.tip-icon.warn { background: rgba(168,59,50,.15);  color: #d2877a; border: 1px solid rgba(168,59,50,.5); }
.tip-body strong { display: block; margin-bottom: .15rem; color: var(--ink); font-family: var(--display); font-size: .92rem; letter-spacing: .03em; }
.tip-body p { margin: 0; font-size: .87rem; color: var(--ink-soft); line-height: 1.5; }
.tip-body em { color: var(--moon); }

/* ---------- Quick reference grid ---------- */
.quickref-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}
@media (min-width: 800px) { .quickref-grid { grid-template-columns: 1fr 1fr; } }
.qref {
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: .65rem .8rem;
  font-size: .85rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.qref strong { color: var(--gold); font-family: var(--display); letter-spacing: .03em; font-size: .88rem; }

/* ============================================================
   v5.1 — SLOT EXPLAINER (Zauber-Tab)
   ============================================================ */
.slot-explainer {
  background: linear-gradient(180deg, rgba(154,134,196,.08), var(--bg-base));
  border-color: rgba(154,134,196,.4);
}
.slot-explainer h3 { color: var(--magic); }
.explainer-lead {
  font-size: .98rem;
  line-height: 1.55;
  padding: .65rem .85rem;
  background: rgba(154,134,196,.08);
  border-left: 3px solid var(--magic);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink);
  margin: 0 0 1rem;
}
.explainer-lead strong { color: var(--magic); }
.explainer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
  margin: 0 0 1rem;
}
@media (min-width: 700px) { .explainer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .explainer-grid { grid-template-columns: 1fr 1fr 1fr; } }
.explainer-block {
  background: rgba(0,0,0,.18);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem;
}
.explainer-block h4 {
  margin: 0 0 .35rem;
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--gold);
  text-transform: none;
}
.explainer-block p, .explainer-block ol {
  margin: 0;
  font-size: .85rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.explainer-block ol { padding-left: 1.1rem; }
.explainer-block li { margin-bottom: .15rem; }
.explainer-block strong { color: var(--ink); }

.explainer-example {
  margin-top: 1rem;
  padding: .8rem .9rem;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.explainer-example h4 {
  margin: 0 0 .55rem;
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--gold);
  text-transform: none;
}
.example-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  color: var(--ink-soft);
}
.example-table th {
  text-align: left;
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: .35rem .4rem .4rem;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.example-table td {
  padding: .35rem .4rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
.example-table tr.rest td {
  background: rgba(201,169,97,.08);
  color: var(--gold);
  font-family: var(--display);
  letter-spacing: .03em;
}
.example-table tr:last-child td { border-bottom: 0; }

.explainer-myths {
  margin-top: 1rem;
  padding: .8rem .9rem;
  background: rgba(168,59,50,.06);
  border-left: 3px solid rgba(168,59,50,.5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.explainer-myths h4 {
  margin: 0 0 .55rem;
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--rust);
  text-transform: uppercase;
}
.myth {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: .5rem;
  align-items: start;
  padding: .35rem 0;
  font-size: .85rem;
  border-bottom: 1px dashed rgba(168,59,50,.2);
}
.myth:last-child { border-bottom: 0; }
.myth .x {
  font-family: var(--display);
  color: var(--rust);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
.myth-text {
  color: var(--ink-mute);
  font-style: italic;
}
.myth-real {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: .85rem;
  letter-spacing: .03em;
  margin-top: .2rem;
  grid-column: 2;
}

.explainer-bottom {
  margin-top: 1rem;
  padding: .7rem .85rem;
  background: rgba(201,169,97,.06);
  border-left: 3px solid var(--gold-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-soft);
}
.explainer-bottom strong { color: var(--gold); font-family: var(--display); letter-spacing: .03em; }

/* ============================================================
   v6 — MAGIC ITEMS (Mantel der Natur) + RESOLVED CONFLICTS
   ============================================================ */

/* Magic Items card */
.magic-items {
  background: linear-gradient(180deg, rgba(111,138,90,.08), var(--bg-base));
  border-color: rgba(111,138,90,.45);
}
.magic-items > h3 { color: var(--moss); }
.magic-item {
  background: rgba(0,0,0,.18);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem 1.05rem;
  position: relative;
}
.magic-item.cloak {
  border-color: rgba(111,138,90,.5);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(111,138,90,.1), transparent 60%),
    rgba(0,0,0,.2);
}
.magic-item-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: center;
  margin-bottom: .7rem;
}
.magic-item-icon {
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(111,138,90,.5);
  border-radius: 12px;
  color: #b9d39f;
  flex-shrink: 0;
}
.magic-item-icon svg { width: 38px; height: 38px; }
.magic-item-title h4 {
  margin: 0 0 .15rem;
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: .04em;
  color: var(--ink);
  text-transform: none;
  display: flex; align-items: center; gap: .4rem;
  flex-wrap: wrap;
}
.magic-item-meta {
  font-size: .78rem;
  color: var(--ink-mute);
  font-style: italic;
}
.magic-item-flavor {
  margin: 0 0 .9rem;
  padding: .55rem .8rem;
  background: rgba(111,138,90,.06);
  border-left: 2px solid rgba(111,138,90,.5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.magic-item-flavor em { color: #b9d39f; }
.magic-item-effects {
  list-style: none;
  margin: 0 0 .9rem;
  padding: 0;
}
.magic-item-effects > li {
  padding: .55rem 0;
  border-bottom: 1px dashed var(--border-soft);
}
.magic-item-effects > li:last-child { border-bottom: 0; }
.magic-item-effects > li > strong {
  display: block;
  font-family: var(--display);
  font-size: .88rem;
  letter-spacing: .04em;
  color: var(--gold);
  margin-bottom: .2rem;
}
.magic-item-effects > li > p {
  margin: 0;
  font-size: .87rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.magic-item-effects > li > p strong { color: var(--ink); }
.magic-item-effects > li > p em { color: var(--moon); }
.magic-item-replaces {
  margin-top: .6rem;
  padding: .65rem .85rem;
  background: rgba(168,59,50,.06);
  border-left: 3px solid rgba(168,59,50,.4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .85rem;
  color: var(--ink-soft);
}
.magic-item-replaces strong {
  font-family: var(--display);
  letter-spacing: .04em;
  color: var(--rust);
  margin-right: .35rem;
}
.replace-tag {
  display: inline-block;
  font-family: var(--display);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .15rem .45rem;
  margin-right: .25rem;
  background: rgba(168,59,50,.12);
  color: #d2877a;
  border: 1px solid rgba(168,59,50,.45);
  border-radius: 3px;
  text-decoration: line-through;
  text-decoration-color: rgba(168,59,50,.7);
}
.magic-item-replaces .muted { margin: .35rem 0 0; }

/* Resolved conflict (was conflict, now confirmed via cloak) */
.trait-list li.resolved {
  background: rgba(111,138,90,.07);
  border-left: 3px solid rgba(111,138,90,.55);
  padding: .6rem .65rem;
  margin: .4rem -.5rem;
  border-radius: 0 4px 4px 0;
}
.trait-list li.resolved strong { color: #b9d39f; }
.resolved-tag {
  display: inline-block;
  font-family: var(--display);
  font-size: .58rem;
  letter-spacing: .14em;
  padding: .12rem .4rem;
  margin-left: .35rem;
  background: rgba(111,138,90,.18);
  color: #b9d39f;
  border: 1px solid rgba(111,138,90,.55);
  border-radius: 3px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* Strike-through items in equipment list */
.equip-list li.magic-equip {
  color: #b9d39f;
  font-weight: 500;
  border-color: rgba(111,138,90,.3);
}
.equip-list li.strike {
  text-decoration: line-through;
  text-decoration-color: var(--ink-mute);
  color: var(--ink-mute);
  font-size: .82rem;
}
.equip-list li.strike em { font-style: italic; color: var(--ink-faint); }

/* Search-result tag for items */
.search-result-cat.item {
  color: #b9d39f;
  border-color: rgba(111,138,90,.55);
  background: rgba(111,138,90,.1);
}

/* ============================================================
   v7 — LORE TAB SECTION TITLES (Backstory / Kern / Vorwissen / Quest)
   ============================================================ */
.lore-section-title {
  margin: 1.6rem 0 .4rem;
  padding: .55rem 0 .55rem .9rem;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  border-left: 3px solid var(--gold-soft);
  background: linear-gradient(90deg, rgba(201,169,97,.06), transparent 80%);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.lore-section-title:first-of-type { margin-top: 1rem; }

/* Make first lore-intro card more prominent (lead) */
#view-lore .lore-intro:first-of-type {
  background: linear-gradient(180deg, rgba(214,207,154,.08), var(--bg-base));
  border-color: rgba(214,207,154,.4);
}
#view-lore .lore-intro:first-of-type h2 { color: var(--moon); }

/* Higlight-Pulse for elements navigated to via search */
@keyframes hl-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,169,97,.7); }
  60%  { box-shadow: 0 0 0 10px rgba(201,169,97,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,169,97,0); }
}
.hl-pulse { animation: hl-pulse 1.4s ease-out 1; border-radius: var(--radius-sm); }

/* Print (just in case for offline session use) */
@media print {
  .primary-nav, .site-footer, .hp-btn, .pill-btn, .big-btn, .filters, .conc-row, #reset-data,
  .vitals-bar, .banner, .header-tools, .modal, .toast-stack { display: none !important; }
  body { background: white; color: black; padding: 0; }
  .card { background: white; color: black; border-color: #888; box-shadow: none; }
  .bg-mist, .bg-vignette { display: none; }
}