/* Parchment texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image:
    repeating-linear-gradient(
      -38deg,
      transparent 0px,
      transparent 6px,
      rgba(130, 90, 30, 0.009) 6px,
      rgba(130, 90, 30, 0.009) 7px
    ),
    repeating-linear-gradient(
      52deg,
      transparent 0px,
      transparent 9px,
      rgba(130, 90, 30, 0.006) 9px,
      rgba(130, 90, 30, 0.006) 10px
    );
}

/* ── CSS custom properties (kleurenpalet) ── */
:root {
  --color-room-bg:       #f5edd8;
  --color-room-elevated: #e6d5ad;
  --color-room-border:   #c4a87a;
  --color-ink-bright:    #2a1a08;
  --color-ink-medium:    #5a4030;
  --color-ink-dim:       #8a7050;
  --color-ink-faint:     #b09870;
  --color-gold-bright:   #b8860b;
  --color-gold-dim:      #9a7008;
}

/* Utility */
.hidden { display: none !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #efe3c5; }
::-webkit-scrollbar-thumb { background: #c4a87a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b09060; }

/* Section tabs */
.section-tab {
  padding: 6px 10px;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;          /* altijd bold — voorkomt layout-shift bij activering */
  color: #8a7050;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  /* Verticale uitlijning: emoji + tekst op gelijke hoogte */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  line-height: 1;
}
.section-tab:hover {
  color: #4a2e08;
  background: rgba(196, 168, 122, 0.15);
}
.section-tab.active {
  color: #3a1e00;
  background: linear-gradient(to bottom, transparent 30%, rgba(196,147,10,0.11) 100%);
  box-shadow: inset 0 -2.5px 0 rgba(196,147,10,0.72);
  border-radius: 6px 6px 0 0;
  /* font-weight blijft 700 — geen hoogte-verschuiving */
}

/* ── Nav tab: icoon-span (vergroot dunne Unicode-symbolen naar emoji-grootte) ── */
.section-tab .tab-icon {
  font-size: 1.45em;
  line-height: 1;
  /* vertical-align niet nodig — parent is flex met align-items:center */
}

/* ── Nav tab: zoekknop ── */
.global-search-tab {
  margin-left: auto;
  font-size: 13px;
  padding: 8px 14px;
  opacity: 0.7;
}
.global-search-tab:hover { opacity: 1; }

/* ── Globale zoekoverlay ── */
.global-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 5, 0.72);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.global-search-overlay.hidden { display: none; }

.global-search-box {
  background: #2e1c0c;
  border: 1px solid #6a4820;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.global-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #4a3018;
}

.global-search-icon {
  font-size: 20px;
  color: #9a7840;
  flex-shrink: 0;
}

.global-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Cinzel', serif;
  font-size: 15px;
  color: #f5edd8;
  caret-color: #c4930a;
}
.global-search-input::placeholder { color: #6a5030; }

.gs-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid #4a3018;
}

.gs-type-chip {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid #5a3c18;
  background: transparent;
  color: #9a7840;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.gs-type-chip:hover { background: rgba(196,147,10,0.14); color: #e0c070; border-color: #8a6030; }
.gs-type-chip--active { background: rgba(196,147,10,0.22); color: #f0d080; border-color: #c4930a; }

.global-search-results {
  overflow-y: auto;
  padding: 8px 0;
  max-height: calc(70vh - 100px);
}

.gs-group { padding: 4px 0; }

.gs-group-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8a6030;
  padding: 6px 18px 4px;
}

.gs-result {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 7px 18px;
  cursor: pointer;
  transition: background 0.1s;
}
.gs-result:hover { background: rgba(196,147,10,0.12); }

.gs-result-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: #f0e0c0;
  font-weight: 600;
}

.gs-result-sub {
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 12px;
  color: #8a7050;
  font-style: italic;
}

.gs-empty {
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 13px;
  color: #8a7050;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* ── Nav tab: spelersavatar ── */
.nav-tab-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -2px;
  border: 1px solid rgba(196,147,10,0.4);
}

/* ── Archief dropdown nav ── */

/* .archief-tab: display/align/gap/white-space zitten nu in .section-tab */
.archief-tab { /* intentioneel leeg */ }

.archief-arrow {
  font-size: 10px;
  opacity: 0.6;
  line-height: 1;
  transition: transform 0.2s ease;
}

.archief-tab:not(.hidden) ~ #archief-menu:not(.hidden) .archief-arrow,
#archief-nav-btn:focus .archief-arrow {
  transform: rotate(180deg);
}

.archief-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  background: linear-gradient(160deg, #f5e9ce 0%, #ede0bc 100%);
  border: 1px solid rgba(196,168,122,0.7);
  border-radius: 8px;
  box-shadow:
    0 8px 28px rgba(60,30,0,0.22),
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 -1px 0 rgba(120,80,20,0.12) inset;
  min-width: 175px;
  padding: 5px 0;
  animation: fadeIn 0.15s ease;
  overflow: hidden;
}

.archief-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  text-align: left;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  color: #5a4030;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  position: relative;
}

.archief-menu-item + .archief-menu-item::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: rgba(196,168,122,0.3);
}

.archief-menu-item:hover {
  background: rgba(196,168,122,0.28);
  color: #3a2008;
}

.archief-menu-item.active {
  background: rgba(154,112,8,0.13);
  color: #7a5800;
  border-left-color: #c4a030;
  font-weight: 700;
}

/* Sections */
.section { display: none; height: 100%; overflow-y: auto; }
/* Standaard: block — content heeft zijn eigen hoogte, section scrolt */
.section.active { display: block; }
/* Kaart + Meesterkamer + Logboek hebben full-height flex layout nodig */
#section-kaart.active,
#section-meesterkamer.active,
#section-logboek.active { display: flex; flex-direction: column; overflow: hidden; }
/* Logboek tab-content vult de resterende hoogte en scrolt zelf */
#logboek-tab-content { flex: 1; min-height: 0; overflow-y: auto; }

/* Modal overlay */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(60,40,10,0.5);
  backdrop-filter: blur(3px);
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.active { display: flex; }

/* Modal */
.modal {
  background: #f8f0de;
  border: 1px solid #c4a87a;
  border-radius: 10px;
  width: 92%; max-width: 720px;
  min-height: 70vh;
  max-height: 90vh;
  box-shadow:
    0 12px 40px rgba(60,40,10,0.28),
    inset 0 1px 0 rgba(255,255,255,0.35);
  display: flex;
  flex-direction: column;
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px 14px;
  background: linear-gradient(to bottom, rgba(230,213,173,0.6), transparent);
  border-bottom: 1px solid #c4a87a;
  flex-shrink: 0;
}
/* Modal header type-color tints */
.modal-head--personages  { background: linear-gradient(to bottom, rgba(90,170,112,0.18), transparent); border-bottom-color: rgba(90,170,112,0.45); }
.modal-head--locaties    { background: linear-gradient(to bottom, rgba(90,138,191,0.18), transparent); border-bottom-color: rgba(90,138,191,0.45); }
.modal-head--organisaties{ background: linear-gradient(to bottom, rgba(192,96,96,0.18),  transparent); border-bottom-color: rgba(192,96,96,0.45); }
.modal-head--voorwerpen  { background: linear-gradient(to bottom, rgba(201,149,96,0.18), transparent); border-bottom-color: rgba(201,149,96,0.45); }
.modal-head--documenten  { background: linear-gradient(to bottom, rgba(138,96,176,0.18), transparent); border-bottom-color: rgba(138,96,176,0.45); }

/* Portrait miniature in modal header */
.modal-portrait-wrap {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(200,168,64,0.7);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(60,40,10,0.3);
}
.modal-portrait-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Decorative rule under modal title */
#m-title {
  letter-spacing: 0.04em;
  line-height: 1.15;
}
#m-title::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 10px;
  margin-bottom: 8px;
  background: linear-gradient(to right, rgba(180,140,60,0.7), transparent 70%);
}
.modal-back {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #8a7050;
  background: none; border: none;
  cursor: pointer; border-radius: 6px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.modal-back:hover { color: #2a1a08; background: rgba(60,40,10,0.07); }
.modal-close {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #8a7050;
  background: none; border: none;
  cursor: pointer; line-height: 1;
  border-radius: 8px;
  flex-shrink: 0;
}
.modal-close:hover { color: #2a1a08; background: rgba(60,40,10,0.07); }

/* DM-only elements */
.player-mode .dm-only { display: none !important; }

/* ── Party chips in DM-bar ── */
.party-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 5px;
  background: rgba(196,168,122,0.15);
  border: 1px solid rgba(196,168,122,0.45);
  border-radius: 20px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.party-chip:hover { background: rgba(196,147,10,0.18); border-color: rgba(196,147,10,0.55); }
.party-chip--absent { opacity: 0.45; }
.party-chip--insp { border-color: rgba(196,147,10,0.7); }

.party-chip-name {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #4a2e08;
  white-space: nowrap;
}
.party-chip--absent .party-chip-name { color: #8a7050; }
.party-chip-insp { font-size: 0.7rem; line-height: 1; }

/* Presence dot (nu inline in chip) */
.party-presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}
.party-presence-dot:hover { transform: scale(1.4); }
.party-presence-dot.present { background: #3a9a4a; }
.party-presence-dot.absent  { background: #9a9080; }

/* ── Groepswisselaar ── */
.group-tab {
  padding: 2px 10px;
  font-size: 11px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid rgba(180,140,60,0.35);
  background: rgba(180,140,60,0.07);
  color: #8a7050;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.group-tab:hover { background: rgba(180,140,60,0.18); color: #4a2e08; }
.group-tab.active {
  background: rgba(180,140,60,0.22);
  border-color: rgba(180,140,60,0.75);
  color: #4a2e08;
}
.group-tab-add, .group-tab-del {
  width: 20px; height: 20px;
  font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.group-tab-add { border: 1px dashed rgba(180,140,60,0.45); color: #9a8060; }
.group-tab-add:hover { background: rgba(180,140,60,0.15); color: #4a2e08; }
.group-tab-del { border: 1px dashed rgba(180,60,60,0.35); color: #a07060; }
.group-tab-del:hover { background: rgba(180,60,60,0.12); color: #7a2010; }
.group-tab-rename {
  width: 18px; height: 18px;
  font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  color: #9a8060;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  opacity: 0;
}
.group-tab-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.group-tab-wrap:hover .group-tab-rename { opacity: 1; }
.group-tab-rename:hover { background: rgba(180,140,60,0.15); border-color: rgba(180,140,60,0.4); color: #4a2e08; opacity: 1; }

/* Divider between present and absent players */
.party-bar-divider {
  width: 1px;
  align-self: stretch;
  background: #c4a87a;
  opacity: 0.5;
  margin: 4px 4px;
  flex-shrink: 0;
}


/* ── Entity cards — paper look ── */
.entity-card {
  background: #faf4e6;
  border: 1px solid rgba(196,168,122,0.75);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  /* flex column keeps flavour-preview pinned to the bottom */
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 2px rgba(60,40,10,0.08),
    0 3px 8px rgba(60,40,10,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.entity-card:hover {
  transform: translateY(-4px) rotate(0.25deg);
  /* base shadow — overridden per type below */
  box-shadow:
    0 5px 14px rgba(60,40,10,0.16),
    0 10px 28px rgba(60,40,10,0.09),
    inset 0 0 0 1px rgba(255,255,255,0.22);
}
.entity-card:has(.bar-personages):hover {
  box-shadow:
    0 5px 16px rgba(42,106,58,0.28),
    0 10px 28px rgba(42,106,58,0.14),
    0 0 0 1px rgba(42,106,58,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.22);
}
.entity-card:has(.bar-locaties):hover {
  box-shadow:
    0 5px 16px rgba(42,90,138,0.28),
    0 10px 28px rgba(42,90,138,0.14),
    0 0 0 1px rgba(42,90,138,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.22);
}
.entity-card:has(.bar-organisaties):hover {
  box-shadow:
    0 5px 16px rgba(139,42,42,0.28),
    0 10px 28px rgba(139,42,42,0.14),
    0 0 0 1px rgba(139,42,42,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.22);
}
.entity-card:has(.bar-voorwerpen):hover {
  box-shadow:
    0 5px 16px rgba(154,106,42,0.28),
    0 10px 28px rgba(154,106,42,0.14),
    0 0 0 1px rgba(154,106,42,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.22);
}
.entity-card.card-hidden { opacity: 0.5; }

/* ── Subtiele type-tint per kaart — heel zacht, tekst blijft volledig leesbaar ── */
.entity-card:has(.bar-personages)  { background: #f5f7ee; }
.entity-card:has(.bar-locaties)    { background: #f0f3f8; }
.entity-card:has(.bar-organisaties){ background: #f8f0f0; }
.entity-card:has(.bar-voorwerpen)  { background: #faf3e0; }
.entity-card:has(.bar-documenten)  { background: #f5f2f8; }
/* Bijpassende fade-gradient zodat de afbeelding naadloos overvloeit */
.entity-card:has(.bar-personages)  .card-img-fade { background: linear-gradient(to bottom, transparent 0%, #f5f7ee 100%); }
.entity-card:has(.bar-locaties)    .card-img-fade { background: linear-gradient(to bottom, transparent 0%, #f0f3f8 100%); }
.entity-card:has(.bar-organisaties).card-img-fade { background: linear-gradient(to bottom, transparent 0%, #f8f0f0 100%); }
.entity-card:has(.bar-voorwerpen)  .card-img-fade { background: linear-gradient(to bottom, transparent 0%, #faf3e0 100%); }
.entity-card:has(.bar-documenten)  .card-img-fade { background: linear-gradient(to bottom, transparent 0%, #f5f2f8 100%); }

/* ── 3D tilt: tijdens muisbeweging alleen box-shadow transitioneren, transform instant ── */
.entity-card.card-tilting {
  transition: box-shadow 0.18s ease !important;
}

/* Deceased card */
.entity-card.card-deceased {
  background: #111;
  border-color: #333;
}
.entity-card.card-deceased:hover {
  background: #1a1a1a;
}
.entity-card.card-deceased .card-img {
  filter: grayscale(100%) brightness(0.4);
}
.entity-card.card-deceased .card-name {
  color: #e8e8e8;
  text-shadow: none;
}
.entity-card.card-deceased .card-name-sep {
  background: linear-gradient(to right, rgba(180,180,180,0.4), transparent);
}
.entity-card.card-deceased .card-name-dagger {
  color: #aaa;
  opacity: 1;
}
.entity-card.card-deceased .card-icon,
.entity-card.card-deceased .text-ink-medium,
.entity-card.card-deceased .text-ink-dim,
.entity-card.card-deceased .text-ink-faint,
.entity-card.card-deceased p {
  color: #888 !important;
}
.entity-card.card-deceased .flavour-preview {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.15);
}
.entity-card.card-deceased .flavour-preview-text {
  color: #d0d0d0;
}
.entity-card.card-deceased .chip {
  background: rgba(255,255,255,0.07) !important;
  color: #777 !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.card-name-dagger {
  font-family: 'Cinzel', serif;
  font-size: 0.78em;
  margin-left: 4px;
  vertical-align: middle;
}

/* Vague card — player sees name only, no details */
.entity-card.card-vague {
  cursor: default;
  border-style: dashed;
  border-color: rgba(196,168,122,0.45);
  background: #faf4e6;
}
.entity-card.card-vague:hover {
  transform: none;
  box-shadow:
    0 1px 2px rgba(60,40,10,0.08),
    0 3px 8px rgba(60,40,10,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.22);
}

/* Dark overlay with question mark on the image */
.card-vague-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(8,4,2,0.72) 0%, rgba(18,10,4,0.80) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  color: rgba(196,168,122,0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  letter-spacing: 0;
}
/* When no image loaded, keep a minimum height so the overlay still shows */
.entity-card.card-vague.no-img .card-img-wrap {
  display: block;
  min-height: 90px;
}
/* Override the generic no-img rule for vague cards only */
.entity-card.card-vague.no-img .card-img-wrap { display: block; }
/* DM indicator: this entity is in vague state (players see name only) */
.entity-card.card-vague-dm {
  box-shadow:
    0 0 0 2px rgba(184,134,11,0.4),
    0 3px 8px rgba(60,40,10,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.22);
}

.card-accent { height: 7px; flex-shrink: 0; }
/* card-body grows to fill available space, pushing flavour to the bottom */
.card-body { flex: 1 1 auto; }

/* ── Image wrapper: contains img + gradient fade + subtype badge ── */
.card-img-wrap { position: relative; flex-shrink: 0; }
.entity-card.no-img .card-img-wrap { display: none; }

.card-img { min-height: 158px; max-height: 196px; display: block; width: 100%; object-fit: cover; transition: object-position 0s; }
@keyframes card-img-pan {
  to { object-position: center bottom; }
}
.entity-card:hover .card-img {
  animation: card-img-pan 12s ease-in-out infinite alternate;
}
.card-img-item { min-height: 130px; max-height: 160px; display: block; width: 100%; object-fit: contain; background: radial-gradient(ellipse at center, rgba(196,168,100,0.08) 0%, rgba(20,12,4,0.55) 100%); padding: 8px; box-sizing: border-box; }

/* gradient that blends image bottom into card body */
.card-img-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent 0%, #faf4e6 100%);
  pointer-events: none;
}

/* ── Subtype badge overlaid on image ── */
.card-subtype-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 5;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* personage subtypes */
.badge-antagonist { background: rgba(120,28,28,0.82); color: #ffcccc; border: 1px solid rgba(200,70,70,0.45); }
.badge-speler     { background: rgba(120,92,10,0.82);  color: #fff0aa; border: 1px solid rgba(210,170,40,0.45); }
.badge-npc        { background: rgba(28,72,48,0.82);   color: #b8f0cc; border: 1px solid rgba(70,150,90,0.4); }
.badge-god        { background: rgba(72,28,120,0.82);  color: #e8ccff; border: 1px solid rgba(140,70,220,0.45); }
.badge-dier       { background: rgba(80,52,16,0.82);   color: #f0ddc0; border: 1px solid rgba(160,110,50,0.45); }
.badge-monster    { background: rgba(68,12,12,0.82);   color: #ffbbbb; border: 1px solid rgba(150,40,40,0.45); }
.badge-verkoper   { background: rgba(90,65,10,0.82);   color: #ffe8a0; border: 1px solid rgba(170,130,30,0.45); }

/* locaties / organisaties */
.badge-loc { background: rgba(24,52,92,0.82);  color: #b8d8ff; border: 1px solid rgba(70,120,200,0.4); }
.badge-org { background: rgba(80,24,24,0.82);  color: #ffc8c8; border: 1px solid rgba(170,60,60,0.4); }
.badge-doc { background: rgba(82,42,120,0.82); color: #e8ccff; border: 1px solid rgba(138,80,200,0.45); }

/* voorwerpen item-type */
.badge-item-weapon  { background: rgba(90,20,20,0.85);   color: #ffbcbc; border: 1px solid rgba(180,60,60,0.45); }
.badge-item-armor   { background: rgba(20,50,90,0.85);   color: #b8d4ff; border: 1px solid rgba(60,110,200,0.45); }
.badge-item-potion  { background: rgba(20,80,50,0.85);   color: #b8f0cc; border: 1px solid rgba(50,160,90,0.45); }
.badge-item-magic   { background: rgba(80,20,110,0.85);  color: #e8c0ff; border: 1px solid rgba(150,60,210,0.45); }
.badge-item-scroll  { background: rgba(90,65,10,0.85);   color: #ffe8a0; border: 1px solid rgba(170,130,30,0.45); }
.badge-item-ring    { background: rgba(100,60,10,0.85);  color: #ffd8a0; border: 1px solid rgba(190,120,30,0.45); }
.badge-item-amulet  { background: rgba(50,40,80,0.85);   color: #d8c8ff; border: 1px solid rgba(110,90,190,0.45); }
.badge-item-other   { background: rgba(52,44,32,0.80);   color: #ddd4c4; border: 1px solid rgba(130,110,80,0.4); }
.card-icon { font-size: 1.2rem; line-height: 1; margin-top: 2px; flex-shrink: 0; }

/* Card title styling */
.card-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: #1e1108;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  display: block;
}
.card-name-sep {
  display: block;
  height: 1px;
  margin: 3px 0 4px;
  background: linear-gradient(to right, rgba(180,140,60,0.55), transparent);
  border: none;
}
/* Eén compacte metaregel: Rol · Ras · Klasse (of locType / orgType / rariteit) */
.card-meta {
  font-size: 10.5px;
  font-family: 'IM Fell English', serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
/* Rol: vet, iets donkerder */
.card-meta-rol {
  font-weight: 700;
  font-style: normal;
  color: #5a4030;
}
/* Ras · Klasse (of locType, orgType, rariteit): cursief, lichter */
.card-meta-sub {
  font-style: italic;
  color: #8a7050;
}
/* Scheidingsteken tussen rol en sub */
.card-meta-dot {
  color: #b09870;
  font-style: normal;
}

/* Flavour preview on card */
.flavour-preview {
  border-top: 1px dashed rgba(196,168,122,0.45);
  padding: 6px 16px 8px;
  background: rgba(236,224,196,0.45);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
/* Audio play button — card list */
.flavour-audio-btn {
  flex-shrink: 0;
  margin-top: 1px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(120,80,20,0.12);
  border: 1px solid rgba(160,110,40,0.45);
  border-radius: 50%;
  font-size: 7px;
  color: #7a5010;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.flavour-audio-btn:hover,
.flavour-audio-btn.audio-btn-playing { background: rgba(160,110,40,0.3); color: #5a3800; }
.flavour-preview-text {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 11px;
  line-height: 1.5;
  color: #6a4010;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* No image → more space, so show more flavour text */
.entity-card.no-img .flavour-preview {
  padding: 10px 16px 14px;
  background: rgba(236,224,196,0.55);
}
.entity-card.no-img .flavour-preview-text {
  font-size: 12px;
  line-height: 1.65;
  -webkit-line-clamp: 6;
}

/* ── Detail view — document/dossier styling ── */

/* Portrait image with ornate frame */
.detail-portrait {
  display: block;
  border-radius: 4px;
  border: 2px solid #c8a840;
  box-shadow:
    0 0 0 5px #f5edd8,
    0 0 0 6px rgba(200,168,64,0.45),
    0 4px 16px rgba(60,40,10,0.22);
}

/* ── Modal type accent bar ── */
.modal-accent {
  height: 7px;
  border-radius: 9px 9px 0 0;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

/* ── Detail hero portrait ── */
.detail-hero {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 0;
  border: 2px solid #c8a840;
  box-shadow:
    0 0 0 5px #f5edd8,
    0 0 0 6px rgba(200,168,64,0.4),
    0 6px 24px rgba(60,40,10,0.28);
}
.detail-hero-img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: #f5edd8; /* perkamentkleur op de zijvlakken */
  display: block;
}
.detail-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(25,12,3,0.55) 0%, rgba(25,12,3,0.12) 35%, transparent 60%);
  pointer-events: none;
}
.detail-hero-badge {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-size: 9.5px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 1px 6px rgba(0,0,0,0.45);
  text-shadow: none;
}
/* Carousel gebruikt blurred bg */
.detail-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(14px) brightness(0.42) saturate(1.35);
  transform: scale(1.1);
  z-index: 0;
}
.detail-hero-icon {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 1.6rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
  pointer-events: none;
  line-height: 1;
}

/* ── DM action buttons (detailmodal) — vierkante icon-knoppen ── */
.dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  /* Uniforme kleur — geen Tailwind-klassen meer */
  background: #e6d5ad;
  color: #6a5030;
  border: 1px solid rgba(196,168,100,0.4);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.dm-btn:hover {
  background: #d4bf92;
  border-color: rgba(196,168,100,0.7);
  box-shadow: 0 2px 6px rgba(60,40,10,0.16);
}
/* Actieve staat: subtiele gouden tint, zelfde grootte/vorm */
.dm-btn--active {
  background: rgba(184,134,11,0.22);
  color: #4a3008;
  border-color: rgba(184,134,11,0.55);
}
.dm-btn--active:hover {
  background: rgba(184,134,11,0.32);
}

/* ── Rol badge ── */
.detail-role-badge {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: #7a5008;
  background: rgba(200,168,64,0.15);
  border: 1px solid rgba(200,168,64,0.5);
  padding: 4px 14px;
  border-radius: 20px;
}

/* ── Metadata pills ── */
.detail-item-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.detail-item-rarity {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 13px;
  color: #7a5c30;
}
.detail-item-attunement {
  font-size: 11px;
  color: var(--color-ink-dim);
  background: rgba(196,168,122,0.12);
  border: 1px solid rgba(196,168,122,0.35);
  border-radius: 10px;
  padding: 2px 8px;
  font-style: italic;
}
.detail-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.detail-meta-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 12.5px;
  color: #5a4030;
  background: rgba(236,220,186,0.7);
  border: 1px solid rgba(196,168,122,0.55);
  padding: 3px 11px 3px 9px;
  border-radius: 12px;
  line-height: 1.5;
}
.pill-lbl {
  font-family: 'Cinzel', serif;
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #9a7008;
  opacity: 0.75;
}

/* ── Voorwerp: Schade / Genezing pill ── */
.detail-item-damage-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.item-damage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #7a2a1a;
  background: linear-gradient(135deg, rgba(180,60,30,0.10) 0%, rgba(236,220,186,0.65) 100%);
  border: 1.5px solid rgba(180,60,30,0.35);
  border-radius: 20px;
  padding: 6px 18px 6px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  box-shadow: 0 1px 4px rgba(60,20,10,0.08);
}
.item-damage-pill:hover {
  background: linear-gradient(135deg, rgba(180,60,30,0.18) 0%, rgba(236,220,186,0.85) 100%);
  border-color: rgba(180,60,30,0.6);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(60,20,10,0.14);
}
.item-damage-pill:active { transform: translateY(0); }
.item-damage-pill--heal {
  color: #1a5a2a;
  background: linear-gradient(135deg, rgba(30,130,60,0.10) 0%, rgba(220,236,210,0.65) 100%);
  border-color: rgba(30,130,60,0.35);
}
.item-damage-pill--heal:hover {
  background: linear-gradient(135deg, rgba(30,130,60,0.18) 0%, rgba(220,236,210,0.85) 100%);
  border-color: rgba(30,130,60,0.6);
}
/* Inline dobbelresultaat in modal */
.dmg-inline-result {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  color: #7a2a1a;
  min-width: 28px;
  display: inline-block;
}
.dmg-inline-result.dmg-result--flash {
  animation: dmgFlash 0.45s cubic-bezier(0.2,0.8,0.3,1.2);
}
@keyframes dmgFlash {
  0%   { transform: scale(1.6); opacity: 0; }
  60%  { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1); }
}
/* Card-overlay damage pill (rechtsboven op afbeelding) */
.card-damage-pill {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Cinzel', serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
  background: rgba(140,40,20,0.82);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 3px 7px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.card-damage-pill:hover {
  background: rgba(180,50,25,0.95);
  transform: scale(1.06);
}
.card-damage-pill:active { transform: scale(0.97); }
.card-damage-pill--heal {
  background: rgba(20,110,50,0.82);
}
.card-damage-pill--heal:hover { background: rgba(25,140,60,0.95); }

/* ── Wapeneigenschappen — kaartchips ── */
.card-weapon-props {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
.card-weapon-tag {
  font-family: 'Cinzel', serif;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #5a3a1a;
  background: rgba(196,168,122,0.22);
  border: 1px solid rgba(196,168,122,0.45);
  border-radius: 8px;
  padding: 1px 5px;
}
.card-weapon-tag--more {
  color: #888;
  background: rgba(196,168,122,0.10);
}
/* ── Wapeneigenschappen — detailmodal chips + tooltip ── */
.detail-weapon-props {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.detail-weapon-tag {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #5a3a1a;
  background: rgba(196,168,122,0.25);
  border: 1.5px solid rgba(196,168,122,0.55);
  border-radius: 12px;
  padding: 3px 10px;
  cursor: default;
  transition: background 0.12s;
}
.detail-weapon-tag:hover { background: rgba(196,168,122,0.45); }
/* Floating tooltip */
.weapon-prop-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 260px;
  background: #2a1a08;
  color: #ece8df;
  font-family: 'IM Fell English', serif;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.weapon-prop-tooltip--visible { opacity: 1; }
/* ── Wapeneigenschappen — editor tag-picker ── */
.weapon-tags-editor-wrap { grid-column: 1 / -1; }
.weapon-tags-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.weapon-tag-pick {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #7a6040;
  background: rgba(196,168,122,0.12);
  border: 1.5px solid rgba(196,168,122,0.35);
  border-radius: 12px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.weapon-tag-pick:hover  { background: rgba(196,168,122,0.28); }
.weapon-tag-pick--on {
  color: #fff;
  background: #7a4a1a;
  border-color: #7a4a1a;
}

/* ── Ornate section divider ── */
.detail-divider {
  text-align: center;
  color: #c8a840;
  font-size: 13px;
  letter-spacing: 5px;
  margin: 20px 0 6px;
  font-family: 'IM Fell English', serif;
  opacity: 0.8;
}

/* Field label — archival header style */
.detail-field-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #9a7008;
  margin-bottom: 4px;
  padding-left: 12px;
  position: relative;
}
.detail-field-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: #c8a840;
  border-radius: 50%;
}
.detail-field-label--secret { color: #8b2a2a; }
.detail-field-label--secret::before { background: #8b2a2a; }

/* Field value — manuscript typography */
.detail-field-value {
  font-family: 'IM Fell English', serif;
  font-size: 14px;
  line-height: 1.65;
  color: #2a1a08;
  white-space: pre-wrap;
  padding-left: 12px;
}

/* Description — featured manuscript block */
.detail-desc {
  font-family: 'IM Fell English', serif;
  font-size: 14.5px;
  line-height: 1.85;
  color: #2a1a08;
  white-space: pre-wrap;
  padding: 14px 18px;
  background: rgba(240,228,196,0.5);
  border-left: 3px solid #c8a840;
  border-radius: 0 4px 4px 0;
}

/* DM-only highlighted block */
.detail-dm-block {
  font-family: 'IM Fell English', serif;
  font-size: 13.5px;
  line-height: 1.7;
  color: #2a1a08;
  white-space: pre-wrap;
  padding: 10px 14px;
  background: rgba(184,134,11,0.06);
  border: 1px solid rgba(184,134,11,0.2);
  border-radius: 4px;
}
.detail-dm-block--secret {
  background: rgba(139,42,42,0.06);
  border-color: rgba(139,42,42,0.2);
}

/* ── Flavour parchment scroll (detail view) ── */
.flavour-scroll { margin: 28px 0 12px; }
.flavour-scroll-rod {
  height: 10px;
  background: linear-gradient(180deg, #b89840 0%, #e8d078 40%, #b89840 100%);
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(60,40,10,0.28), inset 0 1px 0 rgba(255,255,255,0.32);
  position: relative;
  z-index: 1;
}
.flavour-scroll-content {
  background: linear-gradient(180deg, #f8f0d8 0%, #f3e8c4 50%, #f8f0d8 100%);
  border-left: 1px solid #c8a840;
  border-right: 1px solid #c8a840;
  padding: 16px 24px;
  position: relative;
}
.flavour-scroll-content::before,
.flavour-scroll-content::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 18px;
  pointer-events: none;
}
.flavour-scroll-content::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(200,168,64,0.1), transparent);
}
.flavour-scroll-content::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(200,168,64,0.1), transparent);
}
.flavour-text {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.85;
  color: #3a2010;
  text-align: center;
  white-space: pre-wrap;
}
/* Audio play button — flavour scroll (detail view) */
.flavour-audio-wrap {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.flavour-audio-play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(120,80,20,0.12);
  border: 1.5px solid rgba(160,110,40,0.5);
  color: #7a5010;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.flavour-audio-play:hover,
.flavour-audio-play.audio-btn-playing { background: rgba(160,110,40,0.3); color: #3a2000; }
/* DM audio controls below flavour scroll */
.flavour-audio-dm {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
  padding-top: 4px;
}
.flavour-audio-dm-link {
  font-size: 11px;
  color: #9a8060;
  cursor: pointer;
  transition: color 0.15s;
  background: none;
  border: none;
  padding: 0;
}
.flavour-audio-dm-link:hover { color: #c4930a; }
.flavour-audio-dm-del:hover  { color: #c44a3a; }
/* Editor audio preview button */
.editor-audio-preview {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(120,80,20,0.12);
  border: 1px solid rgba(160,110,40,0.45);
  color: #7a5010;
  font-size: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.editor-audio-preview:hover,
.editor-audio-preview.audio-btn-playing { background: rgba(160,110,40,0.3); }

/* Entity type accent colors */
.accent-personages { color: #2a6a3a; }
.accent-locaties { color: #2a5a8a; }
.accent-organisaties { color: #8b2a2a; }
.accent-voorwerpen { color: #9a6a2a; }
.accent-archief { color: #5a3a7a; }

.bar-personages  { background: linear-gradient(to bottom, #5aaa70 0%, #2a6a3a 100%); }
.bar-locaties    { background: linear-gradient(to bottom, #5a8abf 0%, #2a5a8a 100%); }
.bar-organisaties{ background: linear-gradient(to bottom, #c06060 0%, #8b2a2a 100%); }
.bar-voorwerpen  { background: linear-gradient(to bottom, #c99560 0%, #9a6a2a 100%); }
.bar-documenten  { background: linear-gradient(to bottom, #8a60b0 0%, #5a3a7a 100%); }
.bar-logboek     { background: linear-gradient(to bottom, #e0b030 0%, #b8860b 100%); }

/* ── Logbook session detail ── */
.log-dateline {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: #9a7008;
  text-align: center;
  margin: -14px 0 18px;
  opacity: 0.85;
}

.log-entry {
  font-family: 'IM Fell English', serif;
  font-size: 15.5px;
  line-height: 1.9;
  color: #2a1a08;
  padding: 20px 24px;
  background: linear-gradient(to bottom right, rgba(245,235,205,0.6), rgba(238,224,188,0.4));
  border-left: 3px solid #b8860b;
  border-top: 1px solid rgba(184,134,11,0.15);
  border-bottom: 1px solid rgba(184,134,11,0.1);
  border-radius: 0 6px 6px 0;
  margin-bottom: 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), 2px 2px 8px rgba(60,40,10,0.06);
}
.log-entry p { margin: 0 0 0.85em; }
.log-entry p:last-child { margin-bottom: 0; }

/* ── Markdown koppen in alle md-rendered contexten ── */
.log-entry h1, .log-entry h2, .log-entry h3, .log-entry h4,
.detail-desc h1, .detail-desc h2, .detail-desc h3, .detail-desc h4,
.detail-dm-block h1, .detail-dm-block h2, .detail-dm-block h3, .detail-dm-block h4,
.sheet-narrative h1, .sheet-narrative h2, .sheet-narrative h3, .sheet-narrative h4 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #2a1a08;
  margin: 0.75em 0 0.3em;
  line-height: 1.3;
}
.log-entry h1, .detail-desc h1, .detail-dm-block h1, .sheet-narrative h1 {
  font-size: 19px;
  border-bottom: 1px solid rgba(184,134,11,0.35);
  padding-bottom: 4px;
}
.log-entry h2, .detail-desc h2, .detail-dm-block h2, .sheet-narrative h2 { font-size: 16px; }
.log-entry h3, .detail-desc h3, .detail-dm-block h3, .sheet-narrative h3 { font-size: 13.5px; }
.log-entry h4, .detail-desc h4, .detail-dm-block h4, .sheet-narrative h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7a5a30;
}

.log-chips-wrap {
  border-top: 1px solid rgba(196,168,122,0.5);
  padding-top: 14px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.log-chip-section { display: flex; flex-direction: column; gap: 5px; }
.log-chip-section-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: #7a5c28;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(196,168,122,0.4);
  margin-bottom: 4px;
}
.log-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 12px;
  border: 1px solid;
  line-height: 1.6;
}
.log-chip-gold      { background: rgba(184,134,11,0.12); border-color: rgba(184,134,11,0.35); color: #7a5008; }
.log-chip-blue      { background: rgba(42,90,138,0.12);  border-color: rgba(42,90,138,0.3);  color: #2a5a8a; }
.log-chip-green     { background: rgba(42,106,58,0.12);  border-color: rgba(42,106,58,0.3);  color: #2a6a3a; }
.log-chip-green-new { background: rgba(42,106,58,0.18);  border-color: rgba(42,106,58,0.45); color: #1a5a2a; font-weight: 600; }
.log-chip-orange    { background: rgba(154,106,42,0.12); border-color: rgba(154,106,42,0.3); color: #7a4a18; }
.log-chip-purple    { background: rgba(90,58,122,0.12);  border-color: rgba(90,58,122,0.3);  color: #5a3a7a; }
.log-chip-seal      { background: rgba(139,42,42,0.12);  border-color: rgba(139,42,42,0.35); color: #7a1a1a; }

/* Chip base */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 4px;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  border-left-width: 3px;
  transition: background 0.18s ease, box-shadow 0.18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.chip:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 4px rgba(0,0,0,0.18);
  filter: brightness(1.08);
}
.chip-npc  { background: rgba(42,106,58,0.13);  color: #1e5c30; border-color: rgba(42,106,58,0.25); border-left-color: #3a8a50; }
.chip-loc  { background: rgba(42,90,138,0.13);  color: #1a3e72; border-color: rgba(42,90,138,0.25); border-left-color: #3a6aaa; }
.chip-org  { background: rgba(139,42,42,0.13);  color: #721a1a; border-color: rgba(139,42,42,0.25); border-left-color: #aa3a3a; }
.chip-item { background: rgba(154,106,42,0.13); color: #6a4010; border-color: rgba(154,106,42,0.25); border-left-color: #b07828; }
.chip-doc  { background: rgba(90,58,122,0.13);  color: #3e1a66; border-color: rgba(90,58,122,0.25); border-left-color: #7a4aaa; }

/* Autocomplete dropdown */
.autocomplete-wrap { position: relative; }
.autocomplete-list {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 60; max-height: 180px; overflow-y: auto;
  background: #efe3c5; border: 1px solid #c4a87a;
  border-radius: 0 0 6px 6px; display: none;
}
.autocomplete-list.open { display: block; }
.autocomplete-item {
  padding: 6px 10px; cursor: pointer;
  font-size: 13px; color: #5a4030;
}
.autocomplete-item:hover, .autocomplete-item.active {
  background: #e6d5ad; color: #2a1a08;
}

/* ── Search input — more distinctive ── */
.search-input {
  background: #faf4e8 !important;
  border: 1.5px solid #b09060 !important;
  box-shadow: inset 0 1px 3px rgba(60,40,10,0.06) !important;
}
.search-input:focus {
  border-color: #9a7008 !important;
  box-shadow: inset 0 1px 3px rgba(60,40,10,0.06), 0 0 0 2.5px rgba(154,112,8,0.12) !important;
}

/* ── Subtype filter toggle-knop (naast zoekbalk) ── */
.sf-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--color-room-border, #c4a87a);
  border-radius: 6px;
  color: var(--color-ink-dim, #8a7050);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sf-toggle-btn:hover { background: rgba(196,168,122,0.15); color: var(--color-ink-bright, #2a1a08); }
.sf-toggle-btn--active { background: rgba(196,168,122,0.25); color: var(--color-ink-bright, #2a1a08); border-color: #9a7008; }

/* ── Subtype filter chips (per sectie) ── */
.subtype-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 24px 10px;
}
.subtype-filter-bar--hidden { display: none; }

.sf-chip {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--color-room-border, #c4a87a);
  background: transparent;
  color: var(--color-ink-dim, #8a7050);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.sf-chip:hover { background: rgba(196,168,122,0.15); color: var(--color-ink-bright, #2a1a08); }
.sf-chip--active { background: rgba(196,168,122,0.25); color: var(--color-ink-bright, #2a1a08); border-color: #9a7008; }

/* ── Section banner ── */
.section-banner {
  flex-shrink: 0;
  padding: 14px 24px 11px;
  background: linear-gradient(to bottom, rgba(196,168,122,0.1), transparent);
  border-bottom: 1px solid rgba(196,168,122,0.35);
}
.section-banner-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: #5a4010;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-banner-line {
  height: 1px;
  margin-top: 7px;
  background: linear-gradient(to right, rgba(196,168,122,0.6), rgba(196,168,122,0.15), transparent);
}

/* ── Entity section-banner: sfeervolle koptekst per type ── */
.section-banner--personages  { --bc: 42,106,58;  --bc-text: #1e5c2e; }
.section-banner--locaties    { --bc: 42,90,138;  --bc-text: #1e4e7a; }
.section-banner--organisaties{ --bc: 139,42,42;  --bc-text: #7a1e1e; }
.section-banner--voorwerpen  { --bc: 154,106,42; --bc-text: #7a5610; }
.section-banner--documenten  { --bc: 128,92,42;  --bc-text: #6a4818; }
.section-banner--logboek     { --bc: 72,52,22;   --bc-text: #4a3410; }

.section-banner--entity {
  padding: 16px 24px 0;
  background: linear-gradient(to bottom, rgba(var(--bc),0.07) 0%, transparent 100%);
  border-bottom: 1px solid rgba(var(--bc),0.20);
}
.section-banner-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-banner-icon-wrap {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  background: rgba(var(--bc),0.10);
  border: 1px solid rgba(var(--bc),0.22);
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(var(--bc),0.14), inset 0 1px 0 rgba(255,255,255,0.4);
}
.section-banner-info { flex: 1; min-width: 0; }
.section-banner-label {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--bc-text);
  line-height: 1.2;
}
.section-banner-desc-line {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 11.5px;
  color: #8a7050;
  margin-top: 3px;
}
.section-banner-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 11px;
}
.section-banner-rule::before,
.section-banner-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--bc),0.32), transparent);
}
.section-banner-ornament {
  font-size: 6px;
  color: rgba(var(--bc),0.55);
  line-height: 1;
}

/* Upload zone */
.upload-zone {
  border: 2px dashed #c4a87a;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  color: #8a7050;
  cursor: pointer;
  transition: 0.25s ease;
}
.upload-zone:hover { border-color: #9a7008; color: #5a4030; }

/* ── Character Sheet accordeon (editor) ── */
.cs-accordion {
  border: 1px solid #c4a87a;
  border-radius: 8px;
  background: #efe3c5;
  overflow: hidden;
}
.cs-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8a6000;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background 0.15s;
}
.cs-accordion-head::-webkit-details-marker { display: none; }
.cs-accordion[open] > .cs-accordion-head {
  border-bottom-color: #c4a87a;
  background: rgba(196,168,122,0.18);
}
.cs-accordion-chevron {
  font-size: 14px;
  color: #9a8060;
  transition: transform 0.2s;
}
.cs-accordion[open] .cs-accordion-chevron { transform: rotate(180deg); }
.cs-accordion-body { padding: 6px 0; }

/* Sub-accordions */
.cs-sub { border-top: 1px solid rgba(196,168,122,0.4); }
.cs-sub:first-child { border-top: none; }
.cs-sub > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7a6040;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.12s;
}
.cs-sub > summary:hover { background: rgba(196,168,122,0.12); }
.cs-sub > summary::-webkit-details-marker { display: none; }
.cs-sub > summary::after {
  content: '▾';
  font-size: 11px;
  color: #9a8060;
  transition: transform 0.18s;
  flex-shrink: 0;
}
.cs-sub:not([open]) > summary::after { transform: rotate(-90deg); }
.cs-sub-body { padding: 4px 14px 12px; }

/* ── CS Tabs (vervangt cs-sub details in editor) ── */
.cs-tabs-bar {
  display: flex;
  border-bottom: 1px solid rgba(196,168,122,0.4);
  padding: 0 8px;
  gap: 0;
}
.cs-tab-btn {
  padding: 7px 14px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a7050;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.cs-tab-btn:hover { color: #5a4030; }
.cs-tab-active { color: #8a6000; border-bottom-color: #c4a87a; }
.cs-divider { height: 1px; background: rgba(196,168,122,0.3); margin: 6px 0; }

/* ── Editor twee-kolom layout ── */
.editor-layout {
  display: grid;
  grid-template-columns: 196px 1fr;
  gap: 16px;
  align-items: start;
}
.editor-col-left { display: flex; flex-direction: column; gap: 10px; }
.editor-col-right { display: flex; flex-direction: column; gap: 10px; }

/* Extra images grid in linker kolom */
.editor-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 5px;
}

/* Upload zone drag state */
.upload-zone--drag {
  border-color: #9a7008;
  background: rgba(196,168,122,0.1);
  color: #5a4030;
}

@media (max-width: 560px) {
  .editor-layout { grid-template-columns: 1fr; }
}

/* Stat block */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-box {
  text-align: center;
  padding: 8px;
  background: #efe3c5;
  border: 1px solid #c4a87a;
  border-radius: 4px;
}
.stat-label { font-family: 'Cinzel', serif; font-size: 10px; color: #8a7050; text-transform: uppercase; letter-spacing: 1px; }
.stat-val { font-family: 'Cinzel', serif; font-size: 20px; font-weight: 700; color: #2a1a08; }
.stat-mod { font-size: 12px; color: #5a4030; }

/* Archief revelation states */
/* Document state styling now handled via .card-hidden (shared with entities) */

/* Parchment text styling */
.parchment-block {
  font-family: 'IM Fell English', serif;
  font-size: 15px;
  line-height: 1.7;
  color: #2a2015;
  background: #f2e6c8;
  padding: 20px 24px;
  border-radius: 4px;
  border: 1px solid #d4c9a8;
}
.parch-title { text-align: center; font-weight: 700; font-size: 18px; margin: 8px 0; }
.parch-rule { border: none; border-top: 1px solid #b8a88a; margin: 12px 0; }
.parch-sig { text-align: right; font-style: italic; margin-top: 12px; }

/* Category-specific card backgrounds (archief) */
.cat-brieven { background: #f2e6c8; color: #2a2015; border-color: #d4c9a8; }
.cat-pers    { background: #e8e2d8; color: #1a1815; border-color: #333; }
.cat-kaarten { background: #e0d8c4; color: #1a2a20; border-color: #a0987a; }
.cat-codex   { background: #1a1520; color: #e0d8f0; border-color: #3a3050; }
.cat-logboek { background: #efe3c5; color: #2a1a08; border-color: #c4a87a; }

/* ── Dice Roller ── */
/* FAB — spelers */
.dice-fab {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #c8a840, #9a7008);
  color: #f5edd8;
  font-size: 1.05rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(60,40,10,0.28), 0 1px 3px rgba(60,40,10,0.16);
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.dice-fab:hover {
  transform: scale(1.12);
  background: linear-gradient(to bottom, #d4b448, #b08010);
  box-shadow: 0 5px 16px rgba(60,40,10,0.32);
}
.dice-fab:active { transform: scale(0.94); }
.dice-fab svg { margin-top: -2px; }

/* Panel — spelers */
.dice-panel {
  position: fixed;
  right: 0;
  bottom: -600px;
  width: 250px;
  max-height: 85vh;
  background: #f8f0de;
  border: 1px solid #c4a87a;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  box-shadow: -4px -3px 22px rgba(60,40,10,0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 44;
  transition: bottom 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.dice-panel.open { bottom: 0; }
.dice-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px 9px;
  background: linear-gradient(to bottom, #ede0b8, #f8f0de);
  border-bottom: 1px solid #c4a87a;
  flex-shrink: 0;
}
.dice-panel-title {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #5a4010;
}
.dice-panel-close {
  width: 26px; height: 26px;
  font-size: 21px; color: #8a7050;
  background: none; border: none; cursor: pointer; line-height: 1;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}
.dice-panel-close:hover { color: #2a1a08; background: rgba(60,40,10,0.07); }

/* Dice buttons grid — 2 columns × 3 rows */
.dice-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 13px;
  flex-shrink: 0;
}
.dice-btn {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  color: #3a2010;
  background: linear-gradient(to bottom, #f5edd8 0%, #ece0c0 100%);
  border: 1px solid #c4a87a;
  border-radius: 7px;
  padding: 10px 6px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
  box-shadow: 0 2px 4px rgba(60,40,10,0.1), inset 0 1px 0 rgba(255,255,255,0.45);
  text-align: center;
}
.dice-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(to bottom, #faf4e4 0%, #f0e4c8 100%);
  box-shadow: 0 4px 10px rgba(60,40,10,0.16), inset 0 1px 0 rgba(255,255,255,0.45);
}
.dice-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(60,40,10,0.1); }

/* d20 is the star — gold accent */
.dice-btn--featured {
  color: #8a5c00;
  border-color: #b8860b;
  background: linear-gradient(to bottom, #fdf0d8 0%, #f5e0b0 100%);
  box-shadow: 0 2px 6px rgba(184,134,11,0.2), inset 0 1px 0 rgba(255,255,255,0.45);
}
.dice-btn--featured:hover {
  background: linear-gradient(to bottom, #fef6e4 0%, #fae8c0 100%);
  box-shadow: 0 4px 14px rgba(184,134,11,0.28), inset 0 1px 0 rgba(255,255,255,0.45);
}

/* Result display */
.dice-result {
  margin: 0 13px;
  padding: 14px 10px 16px;
  background: rgba(230,213,173,0.3);
  border: 1px solid rgba(196,168,122,0.5);
  border-radius: 8px;
  text-align: center;
  flex-shrink: 0;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dice-result.dice-shaking { animation: diceShake 0.35s ease; }

.dice-result-num {
  font-family: 'Cinzel', serif;
  font-size: 54px;
  font-weight: 900;
  color: #2a1a08;
  line-height: 1;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.dice-result-num.dice-reveal { animation: diceReveal 0.42s cubic-bezier(0.2, 0.8, 0.3, 1.2); }
.dice-result-num.dice-crit   { color: #2a6a3a; text-shadow: 0 0 16px rgba(42,106,58,0.45); }
.dice-result-num.dice-fumble { color: #8b2a2a; text-shadow: 0 0 16px rgba(139,42,42,0.45); }

.dice-result-label {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 11px;
  color: #8a7050;
  margin-top: 5px;
  min-height: 16px;
}

.dm-dice-count {
  min-width: 26px;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: #f0b429;
}

/* Roll history chips */
.dice-history {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 9px 13px 13px;
  align-content: flex-start;
  min-height: 38px;
}
.dice-hist-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: rgba(196,168,122,0.18);
  border: 1px solid rgba(196,168,122,0.4);
  border-radius: 8px;
  padding: 2px 7px;
  color: #6a5040;
}
.dice-hist-crit   { color: #2a6a3a; border-color: rgba(42,106,58,0.4);  background: rgba(42,106,58,0.1); }
.dice-hist-fumble { color: #8b2a2a; border-color: rgba(139,42,42,0.4);  background: rgba(139,42,42,0.1); }

@keyframes diceReveal {
  0%   { transform: scale(1.4) rotate(-5deg); opacity: 0.15; }
  55%  { transform: scale(0.94) rotate(1.5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes diceShake {
  0%, 100% { transform: translateX(0); }
  25%  { transform: translateX(-4px) rotate(-1.5deg); }
  75%  { transform: translateX(4px)  rotate(1.5deg); }
}

/* DM Dice FAB — zichtbaar in rechteronderhoek wanneer DM actief is */
.dm-dice-fab {
  position: fixed;
  bottom: 1.5rem;
  right: calc(1.5rem + 3.5rem + 10px);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(to bottom, #c8a840, #9a7008);
  color: #f5edd8;
  font-size: 1.05rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(60,40,10,0.28), 0 1px 3px rgba(60,40,10,0.16);
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.dm-dice-fab:hover {
  transform: scale(1.10);
  background: linear-gradient(to bottom, #d4b448, #b08010);
  box-shadow: 0 5px 16px rgba(60,40,10,0.32);
}
.dm-dice-fab:active { transform: scale(0.94); }
.dm-dice-fab svg { display: block; }
.dm-dice-fab.hidden { display: none; }

/* DM Dice Panel */
.dm-dice-panel {
  position: fixed;
  right: 0;
  bottom: -600px;
  width: 250px;
  max-height: 85vh;
  background: #f8f0de;
  border: 1px solid #c4a87a;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  box-shadow: -4px -3px 22px rgba(60,40,10,0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 44;
  transition: bottom 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.dm-dice-panel.open { bottom: 0; }

/* Aantal-rij in DM dice panel */
.dm-dice-panel-count {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px 4px;
}

/* ── Kaart — navigatie ── */
.map-nav-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(180,140,40,0.12);
  border: 1px solid rgba(180,140,40,0.3);
  color: #c4930a;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.map-nav-btn:hover { background: rgba(180,140,40,0.25); color: #d4af37; }
.map-nav-btn:disabled { opacity: 0.25; cursor: default; pointer-events: none; }

/* ── Kaart / Map pins ── */
.map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  cursor: pointer;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.map-pin:hover { z-index: 20; cursor: grab; }
.map-pin.pin-dragging { cursor: grabbing; opacity: 0.85; }

.pin-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(18,10,2,0.88);
  border: 2px solid rgba(196,160,60,0.8);
  box-shadow: 0 2px 8px rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.map-pin:hover .pin-icon {
  transform: scale(1.15);
  box-shadow: 0 3px 12px rgba(0,0,0,0.8);
}
.pin-needle {
  width: 2px;
  height: 7px;
  background: linear-gradient(to bottom, rgba(196,160,60,0.8), rgba(196,160,60,0.2));
  order: 1;
  flex-shrink: 0;
}
.pin-label {
  order: -1;
  margin-bottom: 3px;
  white-space: nowrap;
  font-size: 10px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  background: rgba(18,12,4,0.82);
  color: #d4af37;
  padding: 2px 5px;
  border-radius: 3px;
  pointer-events: none;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.15s;
  border: 1px solid rgba(180,140,40,0.3);
}
.map-pin:hover .pin-label { opacity: 1; }

.map-pin-vague .pin-icon { background: #333; border-color: rgba(200,200,200,0.3); color: #888; }
.map-pin-vague .pin-label { color: #888; }
.map-pin-hidden { opacity: 0.45; }
.map-pin-hidden .pin-icon { background: #3a2808; border-color: rgba(160,100,20,0.4); }

.pin-delete {
  display: none;
  position: absolute;
  top: -6px;
  right: -16px;
  background: #7a1a1a;
  color: #ffd;
  border: none;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  font-size: 8px;
  cursor: pointer;
  line-height: 15px;
  text-align: center;
  z-index: 30;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.map-pin:hover .pin-delete { display: block; }

/* Pending pin (speler-voorstel) */
.map-pin-pending .pin-icon {
  background: rgba(196,168,122,0.18);
  border-color: rgba(196,168,122,0.5);
  animation: pin-pending-pulse 1.6s ease-in-out infinite;
}
@keyframes pin-pending-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,168,122,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(196,168,122,0); }
}
.map-pin-pending .pin-label { color: rgba(196,168,122,0.75); font-style: italic; }
.map-pin-pending .pin-needle { background: rgba(196,168,122,0.5); }

/* Goedkeuren-knop naast delete-knop */
.pin-approve {
  display: none;
  position: absolute;
  top: -6px;
  right: 2px;
  background: #1a5a1a;
  color: #cfc;
  border: none;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  font-size: 8px;
  cursor: pointer;
  line-height: 15px;
  text-align: center;
  z-index: 30;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.map-pin-pending.map-pin:hover .pin-delete { right: -16px; }
.map-pin-pending.map-pin:hover .pin-approve { display: block; }

/* Pin placer popup */
.pin-placer-popup {
  position: fixed;
  z-index: 200;
  background: #1c1408;
  border: 1px solid #3a2a10;
  border-radius: 8px;
  padding: 12px;
  width: 210px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.85);
}

/* Responsive */
/* ── Kaart — pin-onthulling toast ── */
.map-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: linear-gradient(135deg, #2a1f0a, #1a1208);
  border: 1px solid #c4930a55;
  color: #f0d88a;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 12px rgba(196,147,10,0.15);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  white-space: nowrap;
}
.map-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.map-toast--clickable { cursor: pointer; pointer-events: auto; }
.map-toast--clickable:hover {
  border-color: #c4930a99;
  background: linear-gradient(135deg, #3a2a0e, #221608);
}

/* ══════════════════════════════════════════════════════════════════
   APP-HEADER — unified single bar
   ══════════════════════════════════════════════════════════════════ */

/* Root app container */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* Main content: vult resterende hoogte, min-height: 0 zodat sections height:100% correct berekenen */
#app > main {
  min-height: 0;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 0;
  background: linear-gradient(180deg, #f0e4c4 0%, #e8d8ac 100%);
  border-bottom: 1px solid rgba(196,168,122,0.6);
  box-shadow: 0 2px 8px rgba(60,30,0,0.12);
  position: relative;
  z-index: 60;
  min-height: 52px;
  padding: 0 8px 0 16px;
  flex-shrink: 0;
}

/* Left column: title + player identity */
.app-header-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex-shrink: 0;
  width: 210px;
  padding-right: 10px;
}
.app-header-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.app-title {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #4a2e08;
  letter-spacing: 0.04em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-subtitle {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 0.7rem;
  color: #8a7050;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header-edit-btn {
  font-size: 14px;
  color: #9a8060;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.app-header-edit-btn:hover { color: #4a2e08; background: rgba(60,40,10,0.07); }

/* Player identity strip */
.app-player-identity {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.app-player-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(196,147,10,0.5);
  flex-shrink: 0;
}
.app-player-name {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: #5a4030;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}
.app-pick-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: #8a7050;
  background: rgba(196,168,122,0.12);
  border: 1px dashed rgba(196,168,122,0.5);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  margin-top: 2px;
}
.app-pick-btn:hover { background: rgba(196,168,122,0.25); color: #4a2e08; }

/* Small icon buttons in header (edit/close) */
.app-header-icon-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #9a8060;
  background: none; border: 1px solid transparent;
  cursor: pointer; border-radius: 6px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.app-header-icon-btn:hover { color: #4a2e08; background: rgba(60,40,10,0.07); }
.app-header-icon-btn--danger { color: #a05040; }
.app-header-icon-btn--danger:hover { color: #7a1a08; background: rgba(180,40,10,0.08); }

/* Inline title editor */
.app-header-editor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex-shrink: 0;
  width: 210px;
  padding-right: 10px;
}
.app-header-editor.hidden { display: none; }
.app-header-input {
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(196,168,122,0.6);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.78rem;
  color: #4a2e08;
  width: 100%;
}
.app-header-input--title { font-family: 'Cinzel', serif; font-weight: 600; }
.app-header-input--sub   { font-family: 'IM Fell English', serif; font-style: italic; }
.app-header-save-btn {
  padding: 3px 10px;
  font-size: 0.72rem;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  background: rgba(154,112,8,0.15);
  border: 1px solid rgba(154,112,8,0.45);
  border-radius: 4px;
  color: #7a5800;
  cursor: pointer;
  transition: background 0.15s;
}
.app-header-save-btn:hover { background: rgba(154,112,8,0.28); }
.app-header-cancel-btn {
  padding: 3px 10px;
  font-size: 0.72rem;
  font-family: 'Cinzel', serif;
  background: none;
  border: 1px solid rgba(196,168,122,0.4);
  border-radius: 4px;
  color: #8a7050;
  cursor: pointer;
  transition: background 0.15s;
}
.app-header-cancel-btn:hover { background: rgba(60,40,10,0.07); }

/* Middle: nav tabs */
.app-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  overflow: visible;
  align-self: stretch;
}

/* Right: search + DM seal */
.app-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 8px;
}

/* Zoekknop (prominent, expandable) */
.app-search-wrap { display: flex; align-items: center; }
.app-search-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  background: rgba(196,168,122,0.12);
  border: 1px solid rgba(196,168,122,0.4);
  border-radius: 20px;
  color: #8a7050;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  letter-spacing: 0.02em;
}
.app-search-btn:hover { background: rgba(196,168,122,0.25); border-color: rgba(196,147,10,0.55); color: #4a2e08; }
.app-search-icon { font-size: 1.1em; line-height: 1; }
.app-search-label { font-size: 0.72rem; }

/* Spelerwisselknop in header-actions */
.app-player-switch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: rgba(196,168,122,0.1);
  border: 1px solid rgba(196,168,122,0.4);
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.app-player-switch-btn:hover { background: rgba(196,168,122,0.25); border-color: rgba(196,147,10,0.55); }
.app-player-switch-btn.hidden { display: none; }

/* DM-zegel — thematische toggle */
.dm-seal {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  background: rgba(196,168,122,0.08);
  border: 1px solid rgba(196,168,122,0.35);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.dm-seal:hover { background: rgba(196,168,122,0.18); border-color: rgba(196,147,10,0.5); }
.dm-seal-icon { font-size: 1.05rem; line-height: 1; font-style: normal; }
.dm-seal-label {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #7a6040;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
/* DM active state */
.dm-seal--active {
  background: linear-gradient(135deg, rgba(154,112,8,0.25), rgba(196,147,10,0.15));
  border-color: rgba(196,147,10,0.75);
  box-shadow: 0 0 8px rgba(196,147,10,0.2);
}
.dm-seal--active .dm-seal-label { color: #c4930a; }
/* DM preview state */
.dm-seal--preview {
  background: rgba(90,60,10,0.12);
  border-color: rgba(120,80,20,0.45);
}
.dm-seal--preview .dm-seal-label { color: #7a5820; }

/* DM party bar — below header, DM-only */
.dm-party-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: linear-gradient(180deg, rgba(240,228,196,0.6) 0%, rgba(232,216,172,0.4) 100%);
  border-bottom: 1px solid rgba(196,168,122,0.4);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  flex-shrink: 0;
}
.dm-party-bar::-webkit-scrollbar { display: none; }
.dm-party-bar.hidden { display: none; }
.dm-party-groups {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.dm-party-portraits {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  overflow: visible;
}

/* Contextual section accent bar */
.section-accent-bar {
  height: 3px;
  background: var(--section-color, rgba(196,168,122,0.35));
  transition: background 0.3s ease;
  flex-shrink: 0;
}

/* ── Desktop: nav-tabs mag overflow tonen (voor Archief-dropdown) ── */
#section-tabs { overflow: visible; }

/* ══════════════════════════════════════════════════════════════════
   MOBIEL (≤ 768px)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── App-header op mobiel: compacter ── */
  .app-header { padding: 0 6px 0 10px; min-height: 48px; gap: 0; }
  .app-header-title { width: 130px; }
  .app-title { font-size: 0.95rem !important; }
  .app-subtitle { display: none; }
  .app-search-label { display: none; }
  .app-search-btn { padding: 0 10px; border-radius: 6px; }
  .dm-seal-label { display: none; }
  .dm-seal { padding: 0 10px; border-radius: 6px; }

  /* ── Nav tabs: horizontaal scrollbaar zodat alle tabs bereikbaar zijn ── */
  #section-tabs {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  #section-tabs::-webkit-scrollbar { display: none; }

  /* Archief-dropdown: position:fixed zodat hij niet geclipt wordt door overflow:auto */
  .archief-menu {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    min-width: unset;
  }

  /* Tabs compacter */
  .section-tab { padding: 6px 10px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }
  .section-tab .tab-icon { font-size: 1.35em; }

  /* ── Kaartgrid ── */
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    padding: 12px !important;
    gap: 10px !important;
  }
  /* Kleinere kaartafbeelding op mobiel */
  .card-img { min-height: 115px; max-height: 148px; }
  .card-img-fade { height: 40px; }
  .card-subtype-badge { font-size: 8.5px; padding: 2px 7px; bottom: 7px; left: 7px; }

  /* ── Modal: volledig scherm ── */
  .modal { width: 100%; max-width: 100%; max-height: 100dvh; border-radius: 0; }
  .modal-head { padding: 12px 16px; }
  .modal-close { width: 44px; height: 44px; font-size: 32px; }

  /* ── Dobbelstenen-paneel: volledige breedte ── */
  .dice-panel { width: 100%; border-radius: 10px 10px 0 0; border-left: none; border-right: none; }
  .dice-fab { bottom: 16px; right: 16px; width: 52px; height: 52px; }

  /* ── Spelersdashboard ── */
  .player-dashboard { padding: 14px 12px 28px; }
  .player-dash-hero { gap: 14px; }
  .player-dash-avatar-outer { width: 116px; height: 116px; }
  .player-dash-avatar-wrap { width: 96px; height: 96px; }

  /* ── Globale zoekoverlap ── */
  .global-search-overlay { padding-top: 44px; align-items: flex-start; }
  .global-search-box { max-height: 80vh; }

  /* ── Stat-block (character sheet weergave) ── */
  .stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── DM Meesterkamer sub-tabs ── */
  .dm-section-tabs { width: 56px; }
  .dm-tab-btn { padding: 9px 3px 8px; }

  /* ── Gevechtsoverlay ── */
  .combat-overlay { padding: 12px 12px 72px; }
}

/* ══════════════════════════════════════════════════════════════════
   KLEINE TELEFOON (≤ 480px)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Titelbalk verbergen zodat tabs meer ruimte krijgen ── */
  .app-header-title { display: none !important; }

  /* ── Tabs: alleen icoon, geen tekstlabel ── */
  .tab-label { display: none; }
  .section-tab { padding: 6px 10px; font-size: 18px; line-height: 1; }
  .section-tab .tab-icon { font-size: 1em; vertical-align: middle; }

  /* ── Kaartgrid: 2 kolommen vast ── */
  .cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  .card-name { font-size: 0.8rem; }

  /* ── Modal body minder padding ── */
  #m-body { padding: 12px !important; }

  /* ── Spelersdashboard ── */
  .player-dashboard { padding: 10px 10px 24px; }
  .player-dash-avatar-outer { width: 100px; height: 100px; }
  .player-dash-avatar-wrap { width: 80px; height: 80px; }

  /* ── Zoekoverlay helemaal bovenaan ── */
  .global-search-overlay { padding-top: 16px; }
}

/* ── Meesterkamer (DM-tab) ── */
#section-meesterkamer {
  padding: 0;
  background: transparent;
  /* display & flex-direction komen van .section.active — niet hier overschrijven */
}
.dm-section-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.dm-section-tabs {
  display: flex;
  flex-direction: column;
  width: 68px;
  flex-shrink: 0;
  background: #efe3c5;
  border-right: 2px solid rgba(196,168,122,0.5);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.dm-section-tabs::-webkit-scrollbar { display: none; }
.dm-section-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  min-height: 0;
}

/* ── Reveal strip (persistent floating overlay) ── */
.dm-reveal-strip {
  position: fixed;
  top: 48px; /* onder de nav */
  right: 0;
  bottom: 0;
  width: 156px;
  z-index: 45;
  border-left: 1px solid rgba(196,168,122,0.35);
  background: var(--color-room-bg, #f5edd8);
  box-shadow: -3px 0 12px rgba(0,0,0,0.15);
  display: none; /* verborgen totdat DM een akte kiest */
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding: 8px 6px;
}
.dm-reveal-strip.dm-reveal-strip--visible {
  display: flex;
}
.dm-reveal-strip.dm-reveal-strip--in-mk {
  display: none !important;
}
.dm-reveal-strip.dm-reveal-strip--minimized {
  width: 28px;
  overflow: hidden;
  padding: 0;
  align-items: center;
}
.dm-reveal-thumb {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(196,168,122,0.3);
  cursor: pointer;
  background: rgba(0,0,0,0.2);
  transition: opacity 0.25s, transform 0.25s;
}
.dm-reveal-thumb:hover { border-color: rgba(196,168,122,0.65); }
.dm-reveal-thumb.revealing { opacity: 0; transform: scale(0.9); pointer-events: none; }
.dm-reveal-thumb-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.dm-reveal-thumb-foot {
  padding: 3px 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dm-reveal-thumb-caption {
  font-size: 9px;
  color: var(--color-ink-medium, #8a7050);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-reveal-empty {
  font-size: 10px;
  color: var(--color-ink-dim, #7a6040);
  text-align: center;
  padding: 10px 4px;
  line-height: 1.5;
}
.dm-tab-btn {
  flex-shrink: 0;
  width: 100%;
  padding: 10px 4px 9px;
  font-size: 16px;
  color: #8a7050;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.dm-tab-icon { line-height: 1; display: flex; align-items: center; justify-content: center; }
.dm-tab-label {
  font-family: 'Cinzel', serif;
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1;
}
.dm-tab-btn:hover { color: #c4930a; background: rgba(196,148,10,0.07); border-left-color: rgba(196,147,10,0.35); }
.dm-tab-btn.active { color: #9a7008; border-left-color: #9a7008; background: rgba(196,168,122,0.18); }

.dm-tab-content { display: none; }
.dm-tab-content.active { display: block; }
.dm-feature-section + .dm-feature-section { border-top: 1px solid rgba(196,168,122,0.45); }

/* ── DM Instellingen knop (⚙️) — altijd onderaan de tab-kolom ── */
.dm-tab-btn--settings {
  margin-top: auto;
  border-top: 1px solid rgba(196,168,122,0.3);
}

/* ── DM Sub-tab navigatie (binnen gecombineerde tabs) ── */
.dm-subtab-nav {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(196,168,122,0.3);
  flex-shrink: 0;
}
.dm-subtab-btn {
  padding: 7px 11px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-ink-dim, #8a7050);
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.dm-subtab-btn.active { color: #9a7008; border-bottom-color: #9a7008; }
.dm-subtab-btn:hover:not(.active) { color: var(--color-ink-medium, #5a4030); }

/* ── DM Instellingen modal ── */
.dm-instellingen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,15,8,0.6);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.dm-instellingen-overlay.hidden { display: none; }
.dm-instellingen-modal {
  background: #f8f0de;
  border: 1px solid #c4a87a;
  border-radius: 12px;
  width: 90%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(40,20,5,0.4);
  overflow: hidden;
}
.dm-instellingen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  background: linear-gradient(to bottom, #ede0b8, #f8f0de);
  border-bottom: 1px solid #c4a87a;
  flex-shrink: 0;
}
.dm-instellingen-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5a4010;
}
.dm-instellingen-close {
  width: 28px; height: 28px;
  font-size: 22px; color: #8a7050;
  background: none; border: none; cursor: pointer;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.dm-instellingen-close:hover { color: #2a1a08; background: rgba(60,40,10,0.07); }
.dm-instellingen-body {
  overflow-y: auto;
  flex: 1;
  padding: 0 0 16px;
}
.dm-inst-group-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dm-inst-group-row .dm-input {
  flex: 1;
}
.dm-btn-danger {
  color: #a03020;
  border-color: rgba(160,48,32,0.35);
}
.dm-btn-danger:hover {
  background: rgba(160,48,32,0.1);
  color: #c04030;
}

/* ── DM Panel feature components ── */
.dm-feature-section {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dm-feature-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.dm-feature-row-sm { gap: 5px; }
.dm-form-row { display: flex; flex-direction: column; gap: 3px; }
.dm-form-label {
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8a6000;
}
.dm-input {
  background: rgba(255,255,255,0.55);
  border: 1px solid #c4a87a;
  border-radius: 4px;
  padding: 5px 8px;
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 13px;
  color: #3a2410;
  transition: border-color 0.15s;
  flex: 1;
  min-width: 0;
}
.dm-input:focus { outline: none; border-color: #9a7008; }
.dm-input-sm { padding: 4px 6px; font-size: 12px; }
.dm-textarea {
  background: rgba(255,255,255,0.55);
  border: 1px solid #c4a87a;
  border-radius: 4px;
  padding: 6px 8px;
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 12px;
  color: #3a2410;
  resize: vertical;
  width: 100%;
}
.dm-textarea:focus { outline: none; border-color: #9a7008; }
.dm-select {
  background: rgba(255,255,255,0.55);
  border: 1px solid #c4a87a;
  border-radius: 4px;
  padding: 5px 6px;
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 13px;
  color: #3a2410;
  flex: 1;
  min-width: 0;
}
.dm-select-sm { padding: 4px 5px; font-size: 12px; flex: unset; }
.dm-hint {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 12px;
  color: #7a6040;
  line-height: 1.5;
}
.dm-hint-waiting { color: #9a7008; }
.dm-hint-error   { color: #c84040; font-weight: 600; }

/* Buttons */
.dm-btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px solid;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.dm-btn:active { transform: scale(0.96); }
.dm-btn:disabled { opacity: 0.5; cursor: default; }
.dm-btn-primary {
  background: linear-gradient(to bottom, #c4930a, #9a7008);
  border-color: #c4930a;
  color: #fff8e8;
}
.dm-btn-primary:hover { background: linear-gradient(to bottom, #d4a318, #b08010); }
.dm-btn-ghost {
  background: rgba(255,255,255,0.5);
  border-color: #c4a87a;
  color: #7a5c2a;
}
.dm-btn-ghost:hover { background: rgba(196,168,122,0.25); color: #3a2410; }
.dm-btn-danger {
  background: rgba(139,42,42,0.12);
  border-color: rgba(139,42,42,0.38);
  color: #c84040;
}
.dm-btn-danger:hover { background: rgba(139,42,42,0.25); border-color: rgba(139,42,42,0.55); }
.dm-btn-danger-sm { font-size: 10px; padding: 4px 8px; }
.dm-btn-sm { font-size: 10px; padding: 4px 8px; }

/* Tunnel */
.dm-status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dm-status-on  { background: #3a9a4a; box-shadow: 0 0 5px rgba(58,154,74,0.6); }
.dm-status-off { background: #9a9080; }
.dm-status-label {
  font-family: 'Cinzel', serif;
  font-size: 10.5px;
  font-weight: 700;
  color: #8a6000;
  flex: 1;
}
.dm-tunnel-url-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(196,168,122,0.5);
  border-radius: 5px;
  padding: 6px 8px;
}
.dm-tunnel-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #5a9acf;
  text-decoration: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-tunnel-url:hover { text-decoration: underline; }
.dm-tunnel-status-label {
  flex: 1;
  font-size: 12px;
  color: #7a6040;
  font-style: italic;
}
.dm-tunnel-url-inline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #5a9acf;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Namen */
.dm-namen-section { border-bottom: 1px solid rgba(196,168,122,0.45); padding-bottom: 12px; margin-bottom: 4px; }
.dm-section-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a6040;
  margin-bottom: 6px;
}
.dm-naam-btn { flex: 1; justify-content: center; }
.dm-naam-result {
  min-height: 36px;
  display: block;
  text-align: center;
  line-height: 36px;
  font-family: 'IM Fell English', serif;
  font-size: 22px;
  color: #3a2410;
  font-style: italic;
  letter-spacing: 0.02em;
}
@keyframes naamReveal {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.dm-naam-reveal { animation: naamReveal 0.25s ease; }
.dm-naam-achter { color: #7a6040; font-size: 0.82em; }

/* Tables */
.dm-tabel-result {
  padding: 10px 14px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(196,168,122,0.5);
  border-radius: 6px;
  text-align: center;
}
.dm-tabel-result.hidden { display: none; }
.dm-tabel-result-text {
  display: block;
  font-family: 'IM Fell English', serif;
  font-size: 16px;
  color: #3a2410;
  font-style: italic;
  padding: 2px 0;
}
.dm-tabel-result-text + .dm-tabel-result-text {
  border-top: 1px solid rgba(196,168,122,0.12);
  margin-top: 4px;
  padding-top: 6px;
}
.dm-tabel-num {
  font-style: normal;
  font-size: 12px;
  color: #9a8060;
  margin-right: 4px;
}

/* ── Monster Library ── */
.dm-monster-chapter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 4px;
}
.dm-monster-chapter-head {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8a6000;
  padding: 4px 0 2px;
  border-bottom: 1px solid rgba(196,168,122,0.5);
  margin-bottom: 2px;
}
.dm-monster-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(196,168,122,0.4);
}
.dm-monster-page-info {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: #9a8060;
  min-width: 36px;
  text-align: center;
}
.dm-monster-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dm-monster-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.5);
  border: 1px solid #c4a87a;
  border-radius: 6px;
  padding: 6px 8px;
}
.dm-monster-thumb {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #c4a87a;
}
.dm-monster-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efe3c5;
  font-size: 18px;
}
.dm-monster-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dm-monster-name {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  color: #3a2410;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-monster-meta {
  font-size: 10px;
  color: #9a8060;
}
.dm-monster-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Statblock editor ── */
.dm-sb-editor { border-top: 1px solid rgba(196,168,122,0.25); margin-top: 10px; padding-top: 6px; }
.dm-sb-summary { font-size: 11px; font-weight: 600; color: #8a7050; cursor: pointer; padding: 4px 0; list-style: none; }
.dm-sb-summary::-webkit-details-marker { display: none; }
.dm-sb-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.dm-sb-scores-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; }
.dm-sb-score-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dm-sb-mod { font-size: 10px; color: #9a8060; }
.dm-sb-textarea { min-height: 64px; resize: vertical; font-family: 'IM Fell English', serif; font-size: 12px; }

/* ── Statblock weergave (modal) ── */
.sb-block { font-family: 'IM Fell English', serif; color: #1a0a00; max-width: 480px; }
.sb-header { margin-bottom: 4px; }
.sb-name { font-family: 'Cinzel', serif; font-size: 1.2rem; font-weight: 700; color: #58180d; }
.sb-sub { font-size: 0.85rem; font-style: italic; color: #333; }
.sb-rule { border: none; border-top: 2px solid #9c2b1b; margin: 8px 0; }
.sb-prop { font-size: 0.88rem; line-height: 1.6; }
.sb-prop-label { font-weight: 700; color: #58180d; margin-right: 4px; }
.sb-scores { display: grid; grid-template-columns: repeat(6,1fr); text-align: center; gap: 4px; }
.sb-score-cell { display: flex; flex-direction: column; }
.sb-score-label { font-size: 0.75rem; font-weight: 700; color: #58180d; }
.sb-score-val { font-size: 1rem; font-weight: 700; }
.sb-score-mod { font-size: 0.78rem; color: #333; }
.sb-section-label { font-family: 'Cinzel', serif; font-size: 0.82rem; font-weight: 700; color: #58180d; letter-spacing: .04em; margin-bottom: 4px; }
.sb-p { font-size: 0.88rem; line-height: 1.65; margin: 0 0 6px; }

/* Statblock button in gevecht detail */
.co-statblock-btn { background: none; border: 1px solid rgba(196,168,122,0.4); border-radius: 4px; cursor: pointer; padding: 2px 6px; font-size: 13px; color: #8a7050; transition: background 0.15s; }
.co-statblock-btn:hover { background: rgba(196,168,122,0.15); }

/* Monster editor upload rows */
.dm-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dm-mon-preview {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid #3a2810;
  flex-shrink: 0;
}
.dm-mon-preview-wide {
  width: 80px;
  height: 48px;
}
.dm-mon-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efe3c5;
  font-size: 20px;
  color: #9a8060;
}
.dm-upload-label {
  cursor: pointer;
}

/* Combat — setup in DM-paneel */
.dm-setup-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.dm-setup-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.5);
  border: 1px solid #c4a87a;
  border-radius: 5px;
}
.dm-setup-name {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  color: #3a2410;
  flex: 1;
}
.dm-setup-init-input {
  width: 40px;
  padding: 1px 3px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  background: var(--color-room-bg);
  border: 1px solid rgba(196,168,122,0.4);
  border-radius: 3px;
  color: var(--color-ink-bright);
  text-align: center;
}
.dm-setup-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #9a8060;
  flex-shrink: 0;
}
.dm-setup-form {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(196,168,122,0.5);
}
.dm-combatant-type-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dm-type-player  { background: #2a6a3a; }
.dm-type-monster { background: #8b2a2a; }
.dm-type-ally    { background: #2a7a5a; border-radius: 2px; }
.dm-type-summon  { background: #7c3aed; border-radius: 50%; }
.dm-combatant-remove {
  width: 20px; height: 20px;
  background: none; border: none;
  color: #9a8060; cursor: pointer;
  font-size: 12px; line-height: 1;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.dm-combatant-remove:hover { color: #c84040; background: rgba(139,42,42,0.12); }

/* HP bar colors — gedeeld door DM-paneel en overlay */
.hp-full     { background: #3a9a4a; }
.hp-light    { background: #7ab830; }
.hp-wounded  { background: #d4a020; }
.hp-heavy    { background: #c86020; }
.hp-critical { background: #9a2020; }
.hp-dead     { background: #555; }

/* ── Combat overlay ── */
.combat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 48;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 80px;
}
.combat-overlay.hidden { display: none; }

/* Geminimaliseerde staat — alleen de header als balk onderaan */
.combat-overlay.minimized {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0;
}
.combat-overlay.minimized .combat-modal {
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  width: auto;
  max-width: 480px;
  height: auto;
  max-height: none;
  pointer-events: all;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
.combat-overlay.minimized .co-turn-controls,
.combat-overlay.minimized .co-add-form,
.combat-overlay.minimized .co-detail-panel,
.combat-overlay.minimized .co-canvas { display: none; }
.combat-overlay.minimized .co-minimize-btn { transform: rotate(180deg); }

.co-minimize-btn {
  background: none;
  border: none;
  color: #9a7050;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s, transform 0.2s;
}
.co-minimize-btn:hover { background: rgba(196,168,122,0.25); }

.combat-modal {
  background: #f0e8d4;
  border: 2px solid #c4a87a;
  border-radius: 12px;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
}

#combat-modal-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.co-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 2px solid #c4a87a;
  background: #e6d5ad;
  border-radius: 10px 10px 0 0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.co-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: #2a1a08;
}
.co-round {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: #7a5a20;
  background: rgba(196,168,122,0.35);
  padding: 2px 7px;
  border-radius: 10px;
}
.co-current-name {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 13px;
  color: #4a2e08;
  flex: 1;
}
.co-end-btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  background: rgba(139,42,42,0.12);
  border: 1px solid rgba(139,42,42,0.35);
  border-radius: 5px;
  color: #8b2a2a;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.co-end-btn:hover { background: rgba(139,42,42,0.22); }

.co-turn-controls {
  display: flex;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(196,168,122,0.4);
  background: rgba(230,213,173,0.3);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.co-ctrl-btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.co-ctrl-primary {
  background: rgba(184,134,11,0.18);
  border: 1px solid rgba(184,134,11,0.45);
  color: #5a3800;
}
.co-ctrl-primary:hover { background: rgba(184,134,11,0.3); }
.co-ctrl-ghost {
  background: transparent;
  border: 1px solid rgba(196,168,122,0.5);
  color: #6a5030;
}
.co-ctrl-ghost:hover { background: rgba(196,168,122,0.15); }
.co-ctrl-danger {
  background: rgba(180,40,40,0.15);
  border: 1px solid rgba(180,40,40,0.45);
  color: #7a2020;
}
.co-ctrl-danger:hover { background: rgba(180,40,40,0.28); }
.co-ctrl-heal {
  background: rgba(40,140,60,0.15);
  border: 1px solid rgba(40,140,60,0.45);
  color: #1a5a2a;
}
.co-ctrl-heal:hover { background: rgba(40,140,60,0.28); }

/* Damage / heal input row */
.co-dmg-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 0 2px;
  flex-wrap: wrap;
}
.co-dmg-input {
  width: 80px;
  padding: 4px 8px;
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  background: rgba(230,213,173,0.25);
  border: 1px solid rgba(196,168,122,0.5);
  border-radius: 5px;
  color: var(--color-ink-bright);
}
.co-dmg-input:focus { outline: none; border-color: rgba(196,168,122,0.9); }

/* Player vague HP states */
.co-hp-player-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.co-hp-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.co-hp-dot-hp-full    { background: #3a9c3a; }
.co-hp-dot-hp-light   { background: #8ec63f; }
.co-hp-dot-hp-wounded { background: #e6b840; }
.co-hp-dot-hp-heavy   { background: #e07020; }
.co-hp-dot-hp-critical{ background: #c0392b; }
.co-hp-dot-hp-dead    { background: #555; }
.co-hp-label { font-size: 11px; font-style: italic; }
.co-hp-label.hp-full     { color: #3a9c3a; }
.co-hp-label.hp-light    { color: #8ec63f; }
.co-hp-label.hp-wounded  { color: #e6b840; }
.co-hp-label.hp-heavy    { color: #e07020; }
.co-hp-label.hp-critical { color: #c0392b; }
.co-hp-label.hp-dead     { color: #888; }

.co-add-form {
  padding: 8px 16px 10px;
  border-bottom: 1px solid rgba(196,168,122,0.3);
  background: rgba(230,213,173,0.2);
}
.co-add-form.hidden { display: none; }
.co-add-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.co-input {
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  padding: 5px 8px;
  background: #faf4e8;
  border: 1px solid rgba(196,168,122,0.6);
  border-radius: 5px;
  color: #2a1a08;
  flex: 1;
  min-width: 80px;
}
.co-input-sm { flex: 0 0 64px; min-width: unset; text-align: center; }
.co-select {
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  padding: 5px 6px;
  background: #faf4e8;
  border: 1px solid rgba(196,168,122,0.6);
  border-radius: 5px;
  color: #2a1a08;
}

.co-canvas {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
}

/* Combatant-rijen in de gevechtsoverlay */
.co-rows {
  overflow-y: auto;
  flex-shrink: 0;
  max-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.combat-overlay.minimized .co-rows { display: none; }

/* ── Combat overlay tabbladen (spelers) ── */
.co-tabs {
  display: flex;
  flex-shrink: 0;
  background: #e2d3b0;
  border-bottom: 2px solid #c4a87a;
  overflow-x: auto;
  scrollbar-width: none;
}
.co-tabs::-webkit-scrollbar { display: none; }
.combat-overlay.minimized .co-tabs { display: none; }

.co-tab {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 14px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: #7a5a30;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.co-tab:hover { color: #2a1a08; background: rgba(196,168,122,0.2); }
.co-tab.active { color: #2a1a08; border-bottom-color: #b8860b; background: rgba(196,168,122,0.15); }

/* Tab panels */
.co-tab-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.co-tab-panel.hidden { display: none; }
.combat-overlay.minimized .co-tab-panel { display: none; }

/* Gevecht-panel: canvas neemt de ruimte */
#co-tab-gevecht { overflow: hidden; }
#co-tab-gevecht .co-canvas { flex: 1; min-height: 80px; }

/* Karakter-panels: scrollen */
.co-char-tab { overflow-y: auto; padding: 0 0 12px; }

/* Laadstatus & foutmeldingen */
.co-char-loading {
  padding: 24px;
  text-align: center;
  font-style: italic;
  color: #9a7050;
  font-size: 13px;
}
.co-char-empty {
  padding: 10px 16px;
  font-style: italic;
  color: #9a7050;
  font-size: 12px;
}
.co-char-err {
  padding: 10px 16px;
  color: #8b2a2a;
  font-size: 12px;
}

/* Secties binnen karakter-panels */
.co-char-section {
  padding: 10px 16px 8px;
  border-bottom: 1px solid rgba(196,168,122,0.25);
}
.co-char-section:last-child { border-bottom: none; }
.co-char-section-title {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a5a20;
  margin-bottom: 8px;
}

/* Stats-strip bovenaan het personage-panel */
.co-char-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: #e8d9b5;
  border-bottom: 2px solid #c4a87a;
  padding: 8px 10px;
  flex-shrink: 0;
}
.co-cs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 10px;
  min-width: 52px;
  flex: 1;
  border-right: 1px solid rgba(196,168,122,0.35);
}
.co-cs-item:last-child { border-right: none; }
.co-cs-label {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #9a7050;
  letter-spacing: 0.05em;
}
.co-cs-val {
  font-family: 'Crimson Text', serif;
  font-size: 15px;
  font-weight: 700;
  color: #2a1a08;
  line-height: 1.2;
}

/* Ability score grid */
.co-ability-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
@media (max-width: 480px) {
  .co-ability-grid { grid-template-columns: repeat(3, 1fr); }
}
.co-ability-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(196,168,122,0.12);
  border: 1px solid rgba(196,168,122,0.4);
  border-radius: 6px;
  padding: 5px 3px 4px;
  gap: 1px;
}
.co-ability-label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  color: #9a7050;
}
.co-ability-score {
  font-family: 'Crimson Text', serif;
  font-size: 16px;
  font-weight: 700;
  color: #2a1a08;
  line-height: 1;
}
.co-ability-mod {
  font-family: 'Crimson Text', serif;
  font-size: 12px;
  color: #4a2e08;
  line-height: 1;
}
.co-ability-save {
  font-size: 10px;
  color: #9a7050;
  line-height: 1.2;
  border-top: 1px solid rgba(196,168,122,0.4);
  width: 100%;
  text-align: center;
  margin-top: 2px;
  padding-top: 2px;
}
.co-ability-save.prof { color: #3a7a3a; font-weight: 700; }

/* Skills list */
.co-skills-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.co-skill-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 12px;
}
.co-skill-prof-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(196,168,122,0.6);
  flex-shrink: 0;
  background: transparent;
}
.co-skill-prof-dot.prof { background: #5a8a5a; border-color: #5a8a5a; }
.co-skill-prof-dot.expert {
  background: #3a6a3a; border-color: #3a6a3a;
  box-shadow: 0 0 0 2px rgba(58,106,58,0.25);
}
.co-skill-bonus {
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  font-weight: 700;
  color: #2a1a08;
  min-width: 26px;
  text-align: right;
}
.co-skill-name { color: #3a2a10; flex: 1; }
.co-skill-ab {
  font-size: 10px;
  color: #9a7050;
  font-family: 'Cinzel', serif;
  font-weight: 600;
}

/* Spreuken panel */
.co-spell-list { display: flex; flex-direction: column; gap: 3px; }
.co-spell-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(196,168,122,0.15);
}
.co-spell-level {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  color: #7a5a20;
  background: rgba(196,168,122,0.2);
  border-radius: 3px;
  padding: 1px 4px;
  min-width: 16px;
  text-align: center;
}
.co-spell-name { color: #2a1a08; flex: 1; }
.co-spell-school { font-size: 11px; color: #9a7050; font-style: italic; }

/* Knapzak panel */
.co-currency-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.co-currency-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.co-currency-label {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #9a7050;
}
.co-currency-val {
  font-family: 'Crimson Text', serif;
  font-size: 16px;
  font-weight: 700;
  color: #2a1a08;
}
.co-items-list { display: flex; flex-direction: column; gap: 2px; }
.co-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(196,168,122,0.15);
}
.co-item-name { color: #2a1a08; }
.co-item-qty {
  font-size: 11px;
  color: #7a5a30;
  font-weight: 700;
  background: rgba(196,168,122,0.2);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Combat overlay — Weapons tabel */
.co-weapons-table { display: flex; flex-direction: column; gap: 2px; }
.co-weapons-header {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 2fr;
  gap: 4px;
  padding: 2px 4px 4px;
  border-bottom: 1px solid rgba(196,168,122,0.4);
}
.co-weapons-header > span {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #7a5a20;
}
.co-weapon-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 2fr;
  gap: 4px;
  padding: 4px;
  font-size: 12px;
  border-bottom: 1px solid rgba(196,168,122,0.1);
  align-items: center;
}
.co-w-name { color: #2a1a08; font-weight: 600; }
.co-w-atk  { color: #5a3510; font-family: 'Cinzel', serif; font-size: 11px; }
.co-w-dmg  { color: #3a2a10; }
.co-w-notes{ color: #7a5a30; font-size: 11px; font-style: italic; }

/* Combat overlay — Traits lijst */
.co-traits-list { display: flex; flex-direction: column; gap: 2px; }
.co-trait-accordion summary { list-style: none; }
.co-trait-accordion summary::-webkit-details-marker { display: none; }

/* Spreuk level badge in accordion summary */
.player-pinned-spell-level-badge {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  color: #7a5a20;
  background: rgba(196,168,122,0.2);
  border-radius: 3px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Winkel: kopen-knop ── */
.shop-koop-btn {
  padding: 4px 10px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  background: rgba(196,147,10,0.18);
  border: 1px solid rgba(196,147,10,0.45);
  border-radius: 4px;
  color: #5a3a08;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.shop-koop-btn:hover:not(:disabled) {
  background: rgba(196,147,10,0.35);
  border-color: #c4930a;
}
.shop-koop-btn--uitverkocht,
.shop-koop-btn:disabled {
  opacity: 0.45;
  cursor: default;
  font-size: 9px;
}

/* Beurs weergave in winkel */
.shop-beurs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 8px;
  background: rgba(196,168,122,0.1);
  border: 1px solid rgba(196,168,122,0.3);
  border-radius: 6px;
}
.shop-beurs-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  color: #7a5a20;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.shop-beurs-amount {
  font-family: 'Crimson Text', serif;
  font-size: 14px;
  color: #3a2a10;
  font-weight: 600;
}

/* Rotatie-info */
.shop-rotatie-info {
  font-size: 11px;
  color: #8a7050;
  font-style: italic;
  margin-bottom: 6px;
  text-align: right;
}

/* Actief badge voor DM in roterende winkel */
.shop-actief-badge {
  color: #c4930a;
  font-size: 13px;
  font-weight: 700;
}

/* Koop-feedback melding */
.shop-koop-feedback {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'Crimson Text', serif;
  font-style: italic;
}
.shop-koop-feedback--fout {
  background: rgba(139,42,42,0.12);
  border: 1px solid rgba(139,42,42,0.3);
  color: #8b2a2a;
}
.shop-koop-feedback--ok {
  background: rgba(34,100,54,0.10);
  border: 1px solid rgba(34,100,54,0.28);
  color: #1a5c30;
}

/* Detail-panel — schuift omhoog als een portret wordt aangeklikt */
.co-detail-panel {
  flex-shrink: 0;
  background: #e8d9b8;
  border-top: 2px solid #c4a87a;
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.co-detail-panel.hidden { display: none; }
.co-detail-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: #2a1a08;
  display: flex;
  align-items: center;
  gap: 8px;
}
.co-detail-close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 14px;
  color: #9a7050;
  cursor: pointer;
  padding: 0 4px;
}
.co-detail-close:hover { color: #5a3010; }

.co-row {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(196,168,122,0.25);
  transition: background 0.15s;
}
.co-row-active {
  background: rgba(184,134,11,0.07);
  border-left: 3px solid #b8860b;
  padding-left: 15px;
}
.co-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.co-type-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.co-type-player  { background: #2a6a3a; }
.co-type-monster { background: #8b2a2a; }
.co-type-ally    { background: #2a7a5a; border-radius: 2px; }
.co-type-summon  { background: #7c3aed; }
.co-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: #2a1a08;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-init-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  color: #9a7050;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.co-init-input {
  width: 42px;
  background: rgba(250,244,230,0.8);
  border: 1px solid rgba(196,168,122,0.5);
  border-radius: 4px;
  padding: 2px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-align: center;
  color: #2a1a08;
}
.co-init-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #9a7050;
  flex-shrink: 0;
}
.co-remove-btn {
  background: none; border: none;
  color: #9a6050; cursor: pointer;
  font-size: 13px; padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.12s, background 0.12s;
}
.co-remove-btn:hover { color: #7a1a1a; background: rgba(139,42,42,0.1); }

/* HP row in overlay (DM) */
.co-hp-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.co-hp-btn {
  width: 32px; height: 26px;
  background: rgba(196,168,122,0.15);
  border: 1px solid rgba(196,168,122,0.4);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #5a4010;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s;
}
.co-hp-btn:hover { background: rgba(196,168,122,0.3); }
.co-hp-bar-wrap {
  flex: 1;
  height: 12px;
  background: rgba(196,168,122,0.2);
  border-radius: 6px;
  overflow: hidden;
  min-width: 40px;
}
.co-hp-bar { height: 100%; border-radius: 6px; transition: width 0.3s ease; }
.co-hp-input {
  width: 48px;
  background: rgba(250,244,230,0.8);
  border: 1px solid rgba(196,168,122,0.5);
  border-radius: 4px;
  padding: 3px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-align: center;
  color: #2a1a08;
  flex-shrink: 0;
}
.co-hp-max {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #9a8060;
  flex-shrink: 0;
}

/* Temporary HP */
.co-thp-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}
.co-thp-label {
  font-size: 14px;
  flex-shrink: 0;
}
.co-thp-input {
  width: 48px;
  background: rgba(160,200,255,0.2);
  border: 1px solid rgba(100,160,220,0.45);
  border-radius: 4px;
  padding: 3px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-align: center;
  color: #1a2a4a;
  flex-shrink: 0;
}
.co-thp-badge {
  font-size: 11px;
  color: #1a4a8a;
  background: rgba(100,160,220,0.18);
  border: 1px solid rgba(100,160,220,0.4);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}

/* HP row in overlay (player) */
.co-hp-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.co-hp-label {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.co-hp-label.hp-full     { color: #2a7a3a; }
.co-hp-label.hp-light    { color: #5a8820; }
.co-hp-label.hp-wounded  { color: #8a6010; }
.co-hp-label.hp-heavy    { color: #9a4010; }
.co-hp-label.hp-critical { color: #8b1a1a; }
.co-hp-label.hp-dead     { color: #555; }

/* Conditions in overlay */
.co-active-conds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.co-cond-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: rgba(139,42,42,0.1);
  border: 1px solid rgba(139,42,42,0.3);
  border-radius: 8px;
  padding: 2px 8px;
  color: #7a1a1a;
}
.co-cond-dm { cursor: pointer; transition: background 0.12s; }
.co-cond-dm:hover { background: rgba(139,42,42,0.2); }
.co-conds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.co-cond-picker-wrap { margin-top: 6px; }
.co-cond-toggle {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #9a7050;
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
}
.co-cond-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 6px;
}
.co-cond-pick {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: rgba(196,168,122,0.1);
  border: 1px solid rgba(196,168,122,0.35);
  border-radius: 8px;
  padding: 2px 8px;
  color: #6a5030;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.co-cond-pick:hover { background: rgba(196,168,122,0.25); }
.co-cond-pick.active {
  background: rgba(139,42,42,0.12);
  border-color: rgba(139,42,42,0.4);
  color: #7a1a1a;
}
/* Klassespecifieke conditions — amber tint */
.co-cond-pick.co-cond-class {
  background: rgba(184,134,11,0.08);
  border-color: rgba(184,134,11,0.35);
  color: #7a5808;
}
.co-cond-pick.co-cond-class:hover { background: rgba(184,134,11,0.18); }
.co-cond-pick.co-cond-class.active {
  background: rgba(184,134,11,0.22);
  border-color: rgba(184,134,11,0.6);
  color: #5a3e04;
  font-weight: 600;
}
.co-cond-chip.co-cond-chip--class {
  background: rgba(184,134,11,0.12);
  border-color: rgba(184,134,11,0.4);
  color: #6a4a04;
}
/* Scheidingslijn tussen standaard en klasse-conditions in de picker */
.co-cond-divider {
  width: 100%;
  height: 1px;
  background: rgba(196,168,122,0.2);
  margin: 2px 0;
}

/* ── Death Saving Throws row ── */
.co-death-saves {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0 2px;
  flex-wrap: nowrap;
}
.co-ds-label {
  font-size: 10px;
  color: rgba(220,190,140,0.65);
  flex-shrink: 0;
  white-space: nowrap;
}
.co-ds-track {
  display: flex;
  align-items: center;
  gap: 3px;
}
.co-ds-dot {
  font-size: 11px;
  color: rgba(180,160,120,0.28);
  line-height: 1;
  transition: color 0.15s;
}
.co-ds-dot.co-ds-s { color: #48d048; text-shadow: 0 0 4px rgba(72,208,72,0.6); }
.co-ds-dot.co-ds-f { color: #d03828; text-shadow: 0 0 4px rgba(208,56,40,0.6); }
.co-ds-sep {
  font-size: 10px;
  color: rgba(180,160,120,0.35);
  margin: 0 1px;
}
.co-ds-btn {
  padding: 1px 5px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  line-height: 1.4;
  flex-shrink: 0;
  transition: background 0.12s;
}
.co-ds-yes { color: #48d048; border-color: rgba(72,208,72,0.35); }
.co-ds-yes:hover { background: rgba(72,208,72,0.12); }
.co-ds-no  { color: #d03828; border-color: rgba(208,56,40,0.35); }
.co-ds-no:hover  { background: rgba(208,56,40,0.12); }
.co-ds-rst { color: rgba(200,175,130,0.55); border-color: rgba(200,175,130,0.25); }
.co-ds-rst:hover { background: rgba(200,175,130,0.08); }

/* ── Combat toast notification ── */
.combat-toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(14, 9, 4, 0.95);
  color: #f5c840;
  border: 1px solid rgba(200,160,80,0.45);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-family: 'Cinzel', serif;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.55);
  white-space: nowrap;
}
.combat-toast.combat-toast-in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Spell search (DM panel) ── */
.dm-spell-row {
  padding: 6px 10px;
  font-size: 12px;
  color: #8a6000;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s;
}
.dm-spell-row:hover { background: rgba(196,168,122,0.2); }
#dm-spell-results {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 6px;
}
.dm-spell-detail { padding-bottom: 12px; }
.dm-spell-name {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: #7a5000;
  line-height: 1.25;
  margin-bottom: 3px;
}
.dm-spell-meta {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9a8060;
  margin-bottom: 10px;
}
.dm-spell-props {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(106,72,32,0.4);
  border-radius: 5px;
  padding: 7px 9px;
  margin-bottom: 10px;
}
.dm-spell-props > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dm-spell-props > div > span:first-child {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9a8060;
}
.dm-spell-props > div > span:last-child {
  font-size: 11px;
  color: #3a2410;
}
.dm-spell-desc { font-size: 11px; color: #3a2410; line-height: 1.55; }
.dm-spell-p    { margin: 0 0 7px; }
.dm-spell-higher { border-top: 1px solid rgba(196,168,122,0.4); padding-top: 7px; margin-top: 3px; }
.dm-spell-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 10px;
  color: #8a6000;
  text-decoration: none;
  letter-spacing: 0.05em;
}
.dm-spell-link:hover { color: #5a3c00; text-decoration: underline; }


/* ── Map rustic frame ── */
.map-frame {
  position: relative;
  /* Layered border: inner dark line → gold → dark → gold → shadow */
  border: 4px solid #7a5c1e;
  box-shadow:
    0 0 0 1px #c4a87a,
    0 0 0 3px #5c4010,
    0 0 0 5px #c4a87a,
    0 0 0 7px #7a5c1e,
    10px 14px 36px rgba(0,0,0,0.65),
    inset 0 0 0 2px rgba(196,168,122,0.35),
    inset 0 0 14px rgba(0,0,0,0.4);
}

/* Corner ornaments via pseudo-elements */
.map-frame::before,
.map-frame::after {
  content: '✦';
  position: absolute;
  color: #c4a87a;
  font-size: 14px;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 0 4px rgba(0,0,0,0.7);
}
.map-frame::before { top: -10px;  left: -10px;  transform: translate(-30%, -30%); }
.map-frame::after  { bottom: -10px; right: -10px; transform: translate(30%, 30%); }

/* ── Spelersdashboard ── */

.player-dashboard {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}
.player-dash-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #c4a87a;
}
.player-dash-avatar-wrap {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #c4a87a;
  background: #efe3c5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-dash-avatar { width: 100%; height: 100%; object-fit: cover; }
.player-dash-avatar-fallback {
  font-size: 52px;
  width: 100%; height: 100%;
  align-items: center;
  justify-content: center;
  color: #8a7050;
}
.player-dash-name {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 700;
  color: #2a1a08;
  margin: 0 0 4px;
}
.player-dash-sub {
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 14px;
  color: #8a7050;
  font-style: italic;
  margin: 0 0 8px;
}
.player-dash-hero-info {
  flex: 1;
  min-width: 0;
}

/* Speler profiel-velden (level, klasse, subclass, background, origin) */
.player-profile-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.ppf-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ppf-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  color: #8a7050;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 82px;
  flex-shrink: 0;
}
.ppf-input {
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 14px;
  color: #2a1a08;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid #c4a87a;
  border-radius: 4px;
  padding: 2px 6px;
  width: 100%;
  min-width: 0;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.ppf-input.ppf-level {
  width: 52px;
  flex-shrink: 0;
  text-align: center;
}
.ppf-input:focus {
  border-color: #8a6000;
  background: rgba(255, 255, 255, 0.8);
}
.ppf-input::placeholder {
  color: #b0956a;
  font-style: italic;
}
.ppf-multiclass-toggle {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #c4a87a;
  background: rgba(196,168,122,0.12);
  color: #8a7050;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ppf-multiclass-toggle:hover { background: rgba(196,168,122,0.28); color: #5a3000; }
.ppf-multiclass-toggle--active {
  background: rgba(80,120,200,0.18);
  border-color: rgba(80,120,200,0.55);
  color: rgba(60,100,190,0.9);
}
.player-dashboard[data-klasse] .ppf-multiclass-toggle {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
}
.player-dashboard[data-klasse] .ppf-multiclass-toggle:hover { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); }
.player-dashboard[data-klasse] .ppf-multiclass-toggle--active {
  background: rgba(120,170,255,0.22);
  border-color: rgba(120,170,255,0.6);
  color: rgba(150,190,255,0.95);
}

.ppf-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a6000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  padding-right: 22px;
  cursor: pointer;
}

/* Klasse-icoon rechts van profiel-velden — zelfde structuur als avatar-outer */
.player-class-icon-outer {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-class-icon-wrap {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #c4a87a;
  background: radial-gradient(ellipse at center, #f0e4c4 30%, #d4b878 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-class-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 1px 4px rgba(60,30,0,0.22));
}

/* Spreuk-statistieken (Spell Save DC + Attack Bonus) */
.player-spell-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  width: 100%;
}
.player-spell-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(196,168,122,0.12);
  border: 1px solid rgba(196,168,122,0.4);
  border-radius: 8px;
  padding: 8px 16px;
  min-width: 90px;
}
.player-spell-stat-label {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  color: #8a7050;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.player-spell-stat-input {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 700;
  color: #2a1a08;
  background: transparent;
  border: none;
  outline: none;
  width: 60px;
  text-align: center;
  padding: 0;
}
.player-spell-stat-input::placeholder { color: #c4a87a; font-size: 16px; }
.player-spell-stat-input:focus { color: #8a6000; }

.player-dash-link {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: #c4930a;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.player-dash-section {
  background: #efe3c5;
  border: 1px solid #c4a87a;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
}
.player-dash-section-title {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8a7050;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Weapons & Damage Cantrips */
.player-dash-section-title--with-btn { justify-content: space-between; }
.player-weapon-add-btn {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(196,168,122,0.2);
  border: 1.5px solid rgba(196,168,122,0.6);
  color: #5a3a10;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.player-weapon-add-btn:hover { background: rgba(196,168,122,0.45); border-color: #c4a87a; }

.player-weapons-table {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
}
.player-weapons-header {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 2fr 22px;
  gap: 4px;
  padding: 0 2px 4px;
  border-bottom: 1.5px solid rgba(196,168,122,0.45);
}
.player-weapons-header span {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9a7050;
}
.player-weapon-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 2fr 22px;
  gap: 4px;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid rgba(196,168,122,0.15);
}
.player-weapon-row:last-child { border-bottom: none; }
.pw-input {
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  padding: 3px 6px;
  background: rgba(196,168,122,0.08);
  border: 1px solid rgba(196,168,122,0.3);
  border-radius: 4px;
  color: #2a1a08;
  width: 100%;
  min-width: 0;
  transition: border-color 0.15s, background 0.15s;
}
.pw-input:focus {
  outline: none;
  border-color: #c4a87a;
  background: rgba(196,168,122,0.18);
}
.pw-input::placeholder { color: #b0956a; opacity: 0.65; }
.pw-name { font-weight: 600; }
.pw-del-btn {
  background: none;
  border: none;
  color: #9a7050;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s;
}
.pw-del-btn:hover { color: #8b2a2a; opacity: 1; }
.player-weapons-empty {
  font-size: 12px;
  color: #9a7050;
  font-style: italic;
}

/* Collapsible sections */
details.player-dash-collapsible > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  margin-bottom: 0;
}
details.player-dash-collapsible > summary::-webkit-details-marker { display: none; }
details.player-dash-collapsible > summary::after {
  content: '›';
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
  opacity: 0.6;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}
details.player-dash-collapsible[open] > summary::after {
  transform: rotate(90deg);
}
details.player-dash-collapsible[open] > summary {
  margin-bottom: 12px;
}

.player-dash-party-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 8px;
}

/* ── Party portraits (player dashboard) ── */
.party-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 88px;
  cursor: pointer;
  text-align: center;
}
.party-portrait--self { cursor: default; }

.party-portrait-avatar-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(196,168,122,0.6);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  flex-shrink: 0;
  margin-bottom: 5px;
  background: #2a1a08;
}
.party-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.party-portrait-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  border-radius: 50%;
  background: rgba(196,168,122,0.12);
}
.party-portrait-name {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  color: #4a2e08;
  line-height: 1.2;
  margin-bottom: 2px;
}
.party-portrait-sub {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 10px;
  color: #8a7050;
  line-height: 1.3;
}
.party-portrait-badge {
  font-size: 0.8rem;
  margin-top: 2px;
}

/* Zelf-portret: gouden rand */
.party-portrait--self .party-portrait-avatar-wrap {
  border-color: rgba(196,168,122,0.9);
  box-shadow: 0 0 0 2px rgba(196,168,122,0.35), 0 2px 8px rgba(0,0,0,0.3);
}

/* Ring-wrapper voor HP-cirkel */
.party-portrait-ring-wrap {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.party-portrait-ring-wrap .party-portrait-avatar-wrap {
  width: 68px;
  height: 68px;
  margin: 0;
  position: relative;
  z-index: 1;
  border: none;
  box-shadow: none;
}
/* Medestander: groene rand */
.party-portrait--companion .party-portrait-avatar-wrap {
  border-color: #5a9a78;
}
.party-portrait-badge {
  font-size: 0.8rem;
  margin-top: 2px;
}

/* Medestander-portret: zelfde vorm als party, andere randkleur (salie-groen) */
.party-portrait--companion .party-portrait-img,
.party-portrait--companion .party-portrait-fallback {
  border-color: #5a9a78;
  box-shadow: 0 0 0 2px #efe3c5, 0 2px 6px rgba(20,70,40,0.22);
}

/* Companion-koppeling in edit modal */
.companion-link-section {
  padding: 10px 0 4px;
  border-top: 1px solid #d4bc92;
}
.companion-toggles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.companion-group-btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 5px;
  border: 1.5px solid #c4a87a;
  background: rgba(255,255,255,0.5);
  color: #5a4030;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.companion-group-btn:hover {
  background: rgba(255,255,255,0.85);
  border-color: #8a6000;
}
.companion-group-btn--linked {
  background: #2a5a3a;
  border-color: #4a8a5a;
  color: #c8e8d0;
}
.companion-group-btn--linked:hover {
  background: #1e4a2e;
}

/* ── Editor toggle-knoppen (waard / antagonist / medestander) ── */
.editor-toggles-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 2px 0 4px;
}
.editor-toggle-btn {
  font-size: 1rem;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.editor-toggle-btn--active {
  background: linear-gradient(to bottom, #2a5a3a, #1e4a2e) !important;
  border-color: #4a8a5a !important;
  color: #c8e8d0 !important;
}
.editor-toggle-btn--active:hover {
  background: linear-gradient(to bottom, #326644, #244f34) !important;
}

.player-dash-hp-bar-wrap {
  height: 6px;
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}
.player-dash-hp-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease, background 0.4s ease;
}
.player-dash-hp-bar.hp-healthy  { background: linear-gradient(90deg, #388e3c, #66bb6a); }
.player-dash-hp-bar.hp-lightly  { background: linear-gradient(90deg, #558b2f, #9ccc65); }
.player-dash-hp-bar.hp-wounded  { background: linear-gradient(90deg, #e65100, #ffa726); }
.player-dash-hp-bar.hp-critical { background: linear-gradient(90deg, #b71c1c, #ef5350); }
.player-dash-hp-bar.hp-down     { background: #555; }
.player-dash-hp-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.player-dash-hp-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #c4a87a;
  background: #f5edd8;
  font-size: 20px;
  font-weight: 700;
  color: #5a4030;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.player-dash-hp-btn:hover { background: #e6d5ad; border-color: #c4930a; color: #2a1a08; }
.player-dash-hp-display {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.player-dash-hp-input {
  width: 64px;
  font-family: 'Cinzel', serif;
  font-size: 28px;
  font-weight: 700;
  color: #2a1a08;
  background: #f5edd8;
  border: 1px solid #c4a87a;
  border-radius: 6px;
  text-align: center;
  padding: 4px 0;
}
.player-dash-hp-sep {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  color: #b09870;
}
.player-dash-hp-max {
  width: 52px;
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 18px;
  color: #8a7050;
  background: #f5edd8;
  border: 1px solid #c4a87a;
  border-radius: 6px;
  text-align: center;
  padding: 6px 0;
}
.player-dash-hp-note {
  font-size: 11px;
  color: #8a7050;
  font-style: italic;
  margin-top: 8px;
  text-align: center;
}
.player-dash-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.player-dash-cond-chip {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(139,42,42,0.12);
  color: #8b2a2a;
  border: 1px solid rgba(139,42,42,0.3);
  border-radius: 4px;
  padding: 3px 7px;
}
.player-dash-hint {
  font-size: 12px;
  color: #8a7050;
  font-style: italic;
  font-family: 'Crimson Text', Georgia, serif;
  margin: 0;
}

/* ── Dashboard: geclaimde voorwerpen ── */

.player-dash-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.player-dash-item-card {
  background: #efe3c5;
  border: 1px solid #c4a87a;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.player-dash-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.player-dash-item-img-wrap {
  width: 100%;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: #e0d0b0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative; /* zodat de qty-badge altijd correct gepositioneerd is */
}

.player-dash-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.player-dash-item-fallback {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #b09060;
  background: #e6d5ad;
}

.player-dash-item-name {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  color: #2a1a08;
  padding: 5px 6px 2px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.player-dash-item-sub {
  font-size: 9px;
  color: #8a7050;
  font-style: italic;
  font-family: 'Crimson Text', Georgia, serif;
  padding: 0 6px 5px;
}

/* ── Player dashboard: losse voorwerpen ── */

.player-dash-empty {
  font-size: 12px;
  color: #8a7050;
  font-style: italic;
  font-family: 'Crimson Text', Georgia, serif;
  margin: 4px 0 6px;
}

.player-dash-simple-list {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.player-dash-simple-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #efe3c5;
  border: 1px solid #c4a87a;
  border-radius: 5px;
  padding: 5px 8px;
}

.player-dash-simple-name {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  color: #2a1a08;
  flex: 1;
}

.player-dash-simple-note {
  font-size: 11px;
  color: #7a5a30;
  font-style: italic;
  font-family: 'Crimson Text', Georgia, serif;
  flex: 1;
}

.player-dash-simple-del {
  background: none;
  border: none;
  cursor: pointer;
  color: #8b2a2a;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.7;
}
.player-dash-simple-del:hover { opacity: 1; }

.player-dash-add-item {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.player-dash-add-item-input {
  flex: 2;
  min-width: 100px;
  background: #fdf5e8;
  border: 1px solid #c4a87a;
  border-radius: 4px;
  padding: 5px 8px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: #2a1a08;
}

.player-dash-add-item-note {
  flex: 2;
  min-width: 100px;
  background: #fdf5e8;
  border: 1px solid #c4a87a;
  border-radius: 4px;
  padding: 5px 8px;
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 12px;
  color: #5a4020;
  font-style: italic;
}

.player-dash-add-item-btn {
  background: #c4930a;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.player-dash-add-item-btn:hover { background: #a87a08; }

/* ── Emotes: dimmed buiten eigen beurt ── */

.player-dash-emote-turn-hint {
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  color: #c4930a;
}


/* ── Geheim-badge op personagekaart (DM-only) ── */
.secret-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 10px;
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(18,9,2,0.78);
  color: #9a8060;
  border-top: 1px solid rgba(106,72,32,0.4);
  border-radius: 0 0 8px 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  z-index: 10;
}
.secret-badge:hover {
  background: rgba(18,9,2,0.93);
  color: #d4b888;
}
.secret-badge--revealed {
  background: rgba(196,148,10,0.18);
  border-top-color: rgba(196,148,10,0.35);
  color: #c4930a;
}
.secret-badge--revealed:hover {
  background: rgba(196,148,10,0.28);
  color: #f0c040;
}
.secret-badge--player {
  cursor: default;
  pointer-events: none;
}
/* Geheim onthuld-balk voor spelers — in flex flow (niet absoluut) */
.player-secret-reveal-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 10px;
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(196,148,10,0.18);
  color: #c4930a;
  border-top: 1px solid rgba(196,148,10,0.35);
  border-radius: 0 0 8px 8px;
  flex-shrink: 0;
}
.attunement-badge {
  display: inline-block;
  margin: 4px 8px 2px;
  padding: 2px 8px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(154,106,42,0.9);
  background: rgba(154,106,42,0.1);
  border: 1px solid rgba(154,106,42,0.35);
  border-radius: 3px;
}

/* ── Voorwerpen: eigendom & claimen ── */

.item-owner-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(154,106,42,0.12);
  border-top: 1px solid rgba(154,106,42,0.2);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a5a20;
}
.item-owner-badge--mine {
  background: rgba(196,147,10,0.14);
  color: #c4930a;
}
.item-owner-badge--other {
  background: rgba(255,255,255,0.06);
}
.item-owner-remove {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: #8b2a2a;
  font-size: 10px;
  padding: 0 2px;
}
.item-claim-btn {
  display: block;
  width: 100%;
  padding: 6px;
  background: rgba(196,147,10,0.1);
  border: none;
  border-top: 1px solid rgba(196,147,10,0.2);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c4930a;
  cursor: pointer;
  transition: background 0.15s;
}
.item-claim-btn:hover { background: rgba(196,147,10,0.22); }
.item-claim-pending {
  padding: 5px 12px;
  border-top: 1px solid rgba(196,147,10,0.2);
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 11px;
  font-style: italic;
  color: #8a7050;
  text-align: center;
}

/* Claim-verzoeken balk (DM view) */
.claim-requests-bar {
  margin: 0 24px 16px;
  background: rgba(196,147,10,0.08);
  border: 1px solid rgba(196,147,10,0.3);
  border-radius: 8px;
  overflow: hidden;
}
.claim-requests-title {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c4930a;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(196,147,10,0.2);
}
.claim-request-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(196,147,10,0.1);
}
.claim-request-row:last-child { border-bottom: none; }
.claim-request-info {
  flex: 1;
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 13px;
  color: #5a4030;
}
.claim-request-info strong { color: #2a1a08; }
.claim-request-info em { color: #7a5a20; font-style: italic; }
.claim-request-actions { display: flex; gap: 6px; }
.claim-btn-approve, .claim-btn-reject {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.claim-btn-approve { background: #2a8a4a; color: #fff; }
.claim-btn-reject  { background: #8b2a2a; color: #fff; }
.claim-btn-approve:hover, .claim-btn-reject:hover { opacity: 0.8; }

/* ── Combat overlay: eigen combatant ── */
.co-row-own { border-left: 3px solid #c4930a !important; }
.co-own-badge {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  color: #c4930a;
  background: rgba(196,147,10,0.12);
  border: 1px solid rgba(196,147,10,0.3);
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
  margin-left: 4px;
}

/* ── Landing page — paginavullend portretkiezer ── */

.landing-overlay {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: #0c0805;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 32px 20px;
}
.landing-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(196,148,10,0.10) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 80%, rgba(80,40,10,0.15) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.landing-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
  width: 100%;
  max-width: 960px;
}
.landing-header {
  text-align: center;
}
.landing-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 7vw, 4.2rem);
  font-weight: 700;
  color: #c4a840;
  letter-spacing: 0.1em;
  margin: 0 0 10px;
  text-shadow: 0 2px 28px rgba(196,168,64,0.28), 0 1px 2px rgba(0,0,0,0.8);
  line-height: 1.1;
}
.landing-subtitle {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: clamp(0.95rem, 2.5vw, 1.25rem);
  color: rgba(220,195,145,0.6);
  margin: 0;
  min-height: 1.4em;
}
.landing-portraits {
  display: flex;
  flex-wrap: wrap;
  gap: 36px 48px;
  justify-content: center;
  align-items: flex-start;
}
.landing-loading {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: rgba(196,168,122,0.4);
  font-size: 1rem;
  margin: 0;
}
.landing-portraits--grouped {
  flex-direction: column;
  gap: 48px;
  align-items: center;
}
.landing-party-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.landing-party-label {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 640px;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(196,168,64,0.55);
}
.landing-party-label::before,
.landing-party-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(196,168,64,0.25));
}
.landing-party-label::after {
  background: linear-gradient(to left, transparent, rgba(196,168,64,0.25));
}
.landing-party-portraits {
  display: flex;
  flex-wrap: wrap;
  gap: 36px 48px;
  justify-content: center;
}
/* ── Wachtwoordprompt ── */
.landing-pw-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.landing-pw-prompt--in {
  opacity: 1;
  transform: translateY(0);
}
.landing-pw-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(196,168,64,0.35);
  border-radius: 6px;
  color: #e8d8a0;
  font-family: 'Crimson Text', serif;
  font-size: 1.1rem;
  padding: 10px 18px;
  text-align: center;
  outline: none;
  width: 260px;
  transition: border-color 0.15s;
}
.landing-pw-input::placeholder { color: rgba(196,168,64,0.35); }
.landing-pw-input:focus { border-color: rgba(196,168,64,0.7); }
.landing-pw-error {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: #c05050;
  font-size: 0.9rem;
}
.landing-pw-actions {
  display: flex;
  gap: 10px;
}
.landing-pw-cancel,
.landing-pw-submit {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 7px 18px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.landing-pw-cancel {
  background: rgba(255,255,255,0.07);
  color: rgba(196,168,64,0.55);
}
.landing-pw-cancel:hover { background: rgba(255,255,255,0.12); }
.landing-pw-submit {
  background: linear-gradient(to bottom, #c8a840, #9a7008);
  color: #1a1208;
}
.landing-pw-submit:hover { background: linear-gradient(to bottom, #d4b448, #b08010); }
.landing-pw-submit:disabled { opacity: 0.5; cursor: default; }

/* ── Groepswachtwoord-knop in DM party-bar ── */
.group-tab-pw {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  opacity: 0.35;
  padding: 0 2px;
  line-height: 1;
  transition: opacity 0.15s;
}
.group-tab-pw:hover { opacity: 0.7; }
.group-tab-pw.has-pw { opacity: 0.8; }

.landing-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.22s cubic-bezier(0.2,0,0,1), opacity 0.22s ease;
  width: 148px;
}
.landing-portrait:hover { transform: translateY(-8px); }
.landing-portrait:active { transform: translateY(-2px); }
.landing-portrait--dimmed { opacity: 0.35; }
.landing-portrait--dimmed:hover { transform: none; }
.landing-portrait--chosen .landing-portrait-ring {
  box-shadow: 0 0 0 3px rgba(196,168,64,0.6), 0 0 20px rgba(196,168,64,0.25);
}

.landing-portrait-ring {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid rgba(196,168,122,0.35);
  box-shadow:
    0 0 0 1px rgba(196,168,122,0.12),
    0 6px 28px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(0,0,0,0.4);
  background: #1a0f05;
  flex-shrink: 0;
  transition: border-color 0.22s, box-shadow 0.22s;
}
.landing-portrait:hover .landing-portrait-ring {
  border-color: rgba(196,168,122,0.85);
  box-shadow:
    0 0 0 3px rgba(196,148,10,0.22),
    0 8px 36px rgba(196,148,10,0.28),
    0 0 70px rgba(196,148,10,0.10);
}
.landing-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.landing-portrait-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  color: rgba(196,168,122,0.35);
}
/* Video-overlay: absolut boven de stilstaande afbeelding, verborgen tot canplay */
.landing-portrait-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  border-radius: 50%;
}
.landing-portrait-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffe9c0;
  line-height: 1.25;
}
.landing-portrait-sub {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 11.5px;
  color: rgba(220,192,148,0.82);
  margin-top: -10px;
  line-height: 1.4;
}
/* Portret wegvallen bij klik op een ander */
.landing-portrait {
  transition: transform 0.22s cubic-bezier(0.2,0,0,1), opacity 0.32s ease;
}
.landing-portrait--dismissed {
  opacity: 0;
  transform: translateY(28px) scale(0.82);
  pointer-events: none;
}

/* Overlay-inhoud verduisteren zodra de zoom-animatie begint */
.landing-overlay--dimming .landing-inner {
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
/* Overlay zelf uitfaden tegelijk met de zoom-out */
.landing-overlay--out {
  opacity: 0 !important;
  transition: opacity 0.38s ease !important;
  pointer-events: none !important;
}

/* ── Landing zoom-cirkel (groeit vanuit portret naar midden) ── */
.landing-zoom {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  /* Geen overflow:hidden hier — ring moet buiten de clip vallen */
}
.landing-zoom--growing {
  transition:
    left   0.62s cubic-bezier(0.4, 0, 0.2, 1),
    top    0.62s cubic-bezier(0.4, 0, 0.2, 1),
    width  0.62s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.62s cubic-bezier(0.4, 0, 0.2, 1);
}
.landing-zoom--out {
  opacity: 0;
  transition: opacity 0.38s ease !important;
}

/* Binnenste cirkel met portret + spotlight-schaduw */
.landing-zoom-portrait {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #1a0f05;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: box-shadow 0.62s ease;
}
.landing-zoom--growing .landing-zoom-portrait {
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.88);
}
.landing-zoom-img,
.landing-zoom-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Roterende naamring */
.landing-zoom-ring {
  position: absolute;
  inset: -14%;
  width: 128%;
  height: 128%;
  pointer-events: none;
  transform-origin: center;
  animation: zoom-ring-spin 32s linear infinite;
  opacity: 0;
  transition: opacity 0.55s ease 0.38s;
}
.landing-zoom--growing .landing-zoom-ring { opacity: 1; }
@keyframes zoom-ring-spin { to { transform: rotate(360deg); } }
.landing-zoom-ring-text {
  fill: rgba(210,180,120,0.78);
  font-family: 'Cinzel', serif;
  font-size: 4px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.landing-footer { margin-top: -8px; }
.landing-dm-btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: rgba(196,168,122,0.38);
  background: none;
  border: 1px solid rgba(196,168,122,0.18);
  border-radius: 6px;
  padding: 9px 22px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.landing-dm-btn:hover {
  color: rgba(196,168,122,0.8);
  border-color: rgba(196,168,122,0.45);
  background: rgba(196,168,122,0.07);
}

/* ── Landing: mobiel (≤ 600 px) ── */
@media (max-width: 600px) {
  .landing-overlay {
    align-items: flex-start;
    padding: 28px 14px 36px;
  }
  .landing-inner {
    gap: 32px;
    margin: auto; /* centreert verticaal als er ruimte is */
  }
  .landing-portraits {
    gap: 22px 18px;
  }
  .landing-portrait {
    width: 112px;
    gap: 10px;
    /* grotere taptarget zonder zichtbaar te worden */
    touch-action: manipulation;
  }
  .landing-portrait-ring {
    width: 112px;
    height: 112px;
  }
  .landing-portrait-name {
    font-size: 11.5px;
  }
  .landing-portrait-sub {
    font-size: 10.5px;
  }
  .landing-dm-btn {
    min-height: 44px;
    padding: 12px 28px;
    touch-action: manipulation;
  }
  /* Tik-hover verwijderen op aanraakschermen */
  .landing-portrait:hover { transform: none; }
  .landing-portrait:active { transform: translateY(-3px); }
}

/* ── Speler karakter-kiezer ── */

/* ── Spelerkiezer dropdown ── */
.player-picker-panel {
  position: fixed;
  top: 58px;
  right: 8px;
  z-index: 300;
  width: 240px;
  background: linear-gradient(160deg, #f5e9ce 0%, #ede0bc 100%);
  border: 1px solid rgba(196,168,122,0.75);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(60,30,0,0.22), inset 0 1px 0 rgba(255,255,255,0.5);
  overflow: hidden;
  animation: fadeIn 0.15s ease;
}
.player-picker-panel.hidden { display: none; }

.player-picker-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(196,168,122,0.4);
}
.player-picker-panel-title {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #4a2e08;
  letter-spacing: 0.04em;
}
.player-picker-panel-close {
  font-size: 18px;
  color: #8a7050;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
  transition: color 0.15s;
}
.player-picker-panel-close:hover { color: #2a1a08; }

.player-picker-list {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
}
.player-picker-loading {
  padding: 12px 14px;
  font-size: 0.8rem;
  color: #8a7050;
  font-style: italic;
}

.player-char-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(196,168,122,0.2);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
  position: relative;
}
.player-char-card:last-child { border-bottom: none; }
.player-char-card:hover { background: rgba(196,147,10,0.1); }
.player-char-card--active { background: rgba(196,147,10,0.08); }
.player-char-card--active:hover { background: rgba(196,147,10,0.15); }

.player-char-avatar-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(196,168,122,0.7);
  background: #efe3c5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-char-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.player-char-avatar-fallback {
  font-size: 18px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a7050;
}
.player-char-info {
  flex: 1;
  min-width: 0;
}
.player-char-name {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2a1a08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-char-sub {
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 0.72rem;
  font-style: italic;
  color: #8a7050;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-char-badge {
  font-size: 13px;
  color: #c4930a;
  flex-shrink: 0;
}

/* ── Footer: DM-login + Anoniem — zelfde stijl, duidelijk gescheiden van spelerslijst ── */
.player-picker-footer {
  border-top: 2px solid rgba(196,168,122,0.35);
  background: rgba(196,168,122,0.06);
  padding: 4px 0 2px;
}
.player-picker-footer-btn {
  display: block;
  width: 100%;
  padding: 7px 14px;
  background: none;
  border: none;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #7a5828;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, color 0.12s;
}
.player-picker-footer-btn:hover { background: rgba(196,168,122,0.14); color: #3a1e00; }
.player-picker-footer-btn--muted { color: #a08860; font-weight: 400; }
.player-picker-footer-btn--muted:hover { color: #6a4820; }

/* ── Geluiden tab (DM) ── */
.dm-sound-section {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(196,168,122,0.4);
}
.dm-sound-section:last-child { border-bottom: none; }
.dm-sound-section-title {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8a6000;
  margin-bottom: 4px;
}
.dm-sound-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.dm-sound-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.5);
  border-radius: 4px;
  border: 1px solid rgba(196,168,122,0.45);
}
.dm-sound-slot-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  color: #3a2410;
  min-width: 90px;
}
.dm-sound-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.dm-sound-set {
  font-size: 11px;
  color: #6abf69;
}
.dm-sound-empty {
  font-size: 11px;
  color: #6a5840;
}
.dm-sound-upload-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* Dropdown per speler */
.dm-sound-player-dropdown {
  border: 1px solid rgba(106,72,32,0.35);
  border-radius: 5px;
  margin-bottom: 6px;
  overflow: hidden;
}
.dm-sound-player-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: none;
  text-align: left;
  transition: background 0.12s;
}
.dm-sound-player-summary:hover { background: rgba(255,255,255,0.08); }
.dm-sound-arrow {
  font-size: 9px;
  color: #9a8060;
  flex-shrink: 0;
}
.dm-sound-player-name {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  color: #e8d4a8;
  flex: 1;
  text-align: left;
}
.dm-sound-sel-badge {
  font-size: 10px;
  color: #c4930a;
  background: rgba(196,147,10,0.15);
  border: 1px solid rgba(196,147,10,0.3);
  border-radius: 10px;
  padding: 1px 7px;
}
.dm-sound-player-body {
  padding: 8px 10px;
  border-top: 1px solid rgba(106,72,32,0.3);
}

/* Emote-items in bibliotheek */
.dm-sound-emote-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(106,72,32,0.18);
}
.dm-sound-emote-item:last-of-type { border-bottom: none; }
.dm-sound-emote-check {
  cursor: pointer;
  flex-shrink: 0;
}
.dm-sound-emote-check input[type=checkbox] {
  accent-color: #c4930a;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.dm-sound-emote-icon {
  width: 42px;
  text-align: center;
  font-size: 16px;
  flex-shrink: 0;
  padding: 2px 4px;
}
.dm-sound-emote-label {
  min-width: 90px;
  max-width: 120px;
  flex-shrink: 0;
}

/* ── Emote-knop icon + text layout ─────────────────────────────────────── */
.co-emote-btn, .player-dash-emote-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.co-emote-icon, .emote-btn-icon {
  font-size: 20px;
  line-height: 1;
}
.co-emote-text, .emote-btn-text {
  font-size: 10px;
  line-height: 1.1;
  opacity: 0.9;
}

/* ── Initiativevolgorde (spelerspaneel) ─────────────────────────────────── */
.player-dash-init-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.player-dash-init-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  background: rgba(0,0,0,0.03);
}
.player-dash-init-row.player-dash-init-active {
  background: rgba(196,147,10,0.12);
  font-weight: 600;
}
.player-dash-init-row.player-dash-init-me {
  border-left: 3px solid #c4930a;
}
.player-dash-init-num {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  color: #9a8060;
  min-width: 18px;
  text-align: right;
}
.player-dash-init-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.player-dash-init-name {
  flex: 1;
  color: #3a2a00;
}
.player-dash-init-you {
  font-size: 11px;
  color: #9a8060;
  font-style: italic;
}
.player-dash-init-arrow {
  color: #c4930a;
  font-size: 11px;
}

/* ── Initiative-nummer in gevechtsoverlay (spelersweergave) ─────────────── */
.co-turn-num {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  color: #9a8060;
  min-width: 16px;
  text-align: right;
  flex-shrink: 0;
}
.co-row-active .co-turn-num {
  color: #c4930a;
}

/* ── Spelerspaneel emote-knoppen ─────────────────────────────────────────── */
.player-dash-emotes {
  background: linear-gradient(135deg, rgba(196,147,10,0.08), rgba(255,248,230,0.5));
  border: 1px solid rgba(196,147,10,0.35);
  border-radius: 8px;
  padding: 12px;
}
.player-dash-emote-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.player-dash-emote-btn {
  background: linear-gradient(135deg, #c4930a, #a37408);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.player-dash-emote-btn:active {
  transform: scale(0.95);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.player-dash-emote-btn:hover {
  background: linear-gradient(135deg, #d9a21c, #b8831a);
}

/* ── Combat overlay emote-balk (spelers-view) ────────────────────────────── */
.co-emote-bar {
  padding: 0 8px;
}
.co-emote-bar-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: rgba(196,147,10,0.1);
  border-radius: 6px;
  border: 1px solid rgba(196,147,10,0.3);
  margin-top: 4px;
}
.co-emote-bar-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  color: #9a8060;
  margin-right: 4px;
}
.co-emote-btn {
  background: linear-gradient(135deg, #c4930a, #a37408);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 13px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s;
}
.co-emote-btn:active { transform: scale(0.93); }
.co-emote-btn:hover  { background: linear-gradient(135deg, #d9a21c, #b8831a); }

/* ── Valuta ────────────────────────────────────────────────────────────────── */
.player-dash-currency {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.player-dash-currency-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}
.player-dash-currency-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: #b8996a;
  width: 90px;
  flex-shrink: 0;
}
.player-dash-currency-icon { font-size: 14px; }
.player-dash-currency-input {
  width: 72px;
  background: rgba(255,255,255,0.7);
  border: 1.5px solid #c4a87a;
  border-radius: 5px;
  color: #3a2410;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  text-align: right;
  padding: 3px 7px;
}
.player-dash-currency-input:focus {
  outline: none;
  border-color: #8a6000;
  background: rgba(255,255,255,0.9);
}

/* ── Spreukenslots ─────────────────────────────────────────────────────────── */
.player-dash-spellslots .player-dash-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.player-dash-slot-rest-btn {
  background: none;
  border: 1px solid #4a3820;
  border-radius: 5px;
  color: #b8996a;
  font-size: 10px;
  padding: 2px 7px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.player-dash-slot-rest-btn:hover { border-color: #c4930a; color: #e8c84a; }
.player-dash-slot-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.player-dash-slot-level {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: #9a8060;
  width: 40px;
  flex-shrink: 0;
}
.player-dash-slot-dots {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}
.spell-slot-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #c4930a;
  cursor: pointer;
  background: transparent;
  padding: 0;
  transition: background 0.15s, transform 0.1s;
}
.spell-slot-dot.used { background: #c4930a; }
.spell-slot-dot:hover { transform: scale(1.2); }
.player-dash-slot-count {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: #9a8060;
  min-width: 28px;
  text-align: right;
}
.player-dash-slot-adj {
  background: none;
  border: 1px solid #3a2810;
  border-radius: 4px;
  color: #9a8060;
  font-size: 13px;
  width: 20px;
  height: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, color 0.15s;
}
.player-dash-slot-adj:hover { border-color: #c4930a; color: #e8d5a0; }
.player-dash-slot-add-btn {
  margin-top: 4px;
  background: none;
  border: 1px dashed #4a3820;
  border-radius: 5px;
  color: #9a8060;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.15s, color 0.15s;
}
.player-dash-slot-add-btn:hover { border-color: #c4930a; color: #e8d5a0; }

/* ── Weersgenerator ────────────────────────────────────────────────────────── */
.dm-weer-seasons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.dm-weer-season-btn {
  opacity: 0.55;
  transition: opacity 0.15s;
}
.dm-weer-season-btn.active {
  opacity: 1;
  border-color: #c4930a !important;
  color: #e8c84a !important;
}

/* ── Gevechtslog ───────────────────────────────────────────────────────────── */
.co-log {
  margin-top: 10px;
  border-top: 1px solid #2a2010;
  padding-top: 6px;
}
.co-log-summary {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: #9a8060;
  cursor: pointer;
  list-style: none;
  padding: 3px 0;
  user-select: none;
}
.co-log-summary::-webkit-details-marker { display: none; }
.co-log-summary:hover { color: #c4930a; }
.co-log-entries {
  max-height: 160px;
  overflow-y: auto;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.co-log-entry {
  font-size: 11px;
  color: #c8b88a;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.co-log-round {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: #7a6040;
  flex-shrink: 0;
  min-width: 20px;
}

/* ══════════════════════════════════════════════════
   SPELER SUBTABS
   ══════════════════════════════════════════════════ */
.player-subtabs {
  display: flex;
  gap: 4px;
  padding: 12px 14px 0;
  border-bottom: 2px solid #c4a87a;
  margin-bottom: 0;
}
.player-subtab {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border: 1px solid #c4a87a;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: #efe3c5;
  color: #8a6000;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.player-subtab:hover { background: #e6d5ad; }
.player-subtab.active {
  background: #f8f0de;
  color: #3a2410;
  border-color: #c4a87a;
  border-bottom: 2px solid #f8f0de;
  margin-bottom: -2px;
  position: relative;
  z-index: 1;
}
.player-subtab-panel { padding-top: 4px; }
.player-subtab-panel.hidden { display: none; }

/* ══════════════════════════════════════════════════
   INSPIRATIEBADGE (spelerstabblad)
   ══════════════════════════════════════════════════ */
/* ── Wild Magic Surge roller ── */
.wild-magic-section { }
.wild-magic-roller {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wild-magic-btn {
  align-self: flex-start;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 20px;
  background: linear-gradient(135deg, #c4930a, #a07008);
  color: #fdf6e3;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.4px;
  transition: filter 0.15s, transform 0.1s;
  box-shadow: 0 2px 6px rgba(160,112,8,0.3);
}
.wild-magic-btn:hover  { filter: brightness(1.1); }
.wild-magic-btn:active { transform: scale(0.97); }
.wild-magic-result {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 13px;
  background: rgba(196,168,122,0.12);
  border-radius: 5px;
  border: 1px solid rgba(196,168,122,0.4);
}
.wild-magic-roll {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: #8a6020;
  font-weight: 600;
}
.wild-magic-text {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 13.5px;
  color: var(--color-ink-bright, #2a1a08);
  line-height: 1.55;
}
@keyframes wild-magic-flash {
  0%   { background: rgba(196,147,10,0.28); }
  100% { background: rgba(196,168,122,0.12); }
}
.wild-magic-result--flash {
  animation: wild-magic-flash 0.6s ease-out forwards;
}

.player-inspiration-section {
  background: linear-gradient(135deg, #fffbe6 0%, #fef3c7 100%);
  border: 1.5px solid #f0b429 !important;
}
.player-inspiration-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}
.player-inspiration-badge {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  color: #92600a;
}
.player-inspiration-use-btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  padding: 5px 14px;
  background: #f0b429;
  color: #3a2410;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.15s;
}
.player-inspiration-use-btn:hover { background: #d4a020; }

/* Inspiratieknop op party-portret (DM) */
.party-inspiration-btn {
  display: block;
  width: 100%;
  font-size: 11px;
  background: none;
  border: 1px solid #c4a87a;
  border-radius: 4px;
  color: #8a7050;
  cursor: pointer;
  padding: 1px 0;
  margin-top: 2px;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}
.party-inspiration-btn:hover { background: #f0b429; color: #3a2410; border-color: #f0b429; }
.party-inspiration-btn.has-inspiration { background: #f0b429; color: #3a2410; border-color: #d4a020; }
.party-inspiration-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════
   KLASSE-TRACKERS (klikbare vakjes)
   ══════════════════════════════════════════════════ */
.player-tracker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #e8d4a8;
}
.player-tracker-row:last-of-type { border-bottom: none; }
.player-tracker-name {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: #3a2410;
  min-width: 90px;
  font-weight: 600;
}
.player-tracker-dots {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.tracker-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #c4a87a;
  background: #f8f0de;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.tracker-dot.used { background: #8a6000; border-color: #6a4800; }
.tracker-dot:hover { border-color: #8a6000; }
.player-tracker-count {
  font-size: 11px;
  color: #8a7050;
  min-width: 28px;
  text-align: center;
}
.player-tracker-del {
  margin-left: auto;
  background: none;
  border: none;
  color: #b09870;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.player-tracker-del:hover { color: #8b2a2a; }
.player-dash-add-tracker {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.tracker-max-input { width: 60px !important; }

/* ══════════════════════════════════════════════════
   SPREUKZOEKER (spelerstabblad)
   ══════════════════════════════════════════════════ */
.player-spell-search-wrap { position: relative; margin-bottom: 10px; }
.player-spell-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #c4a87a;
  border-radius: 6px;
  background: rgba(255,255,255,0.6);
  color: #3a2410;
  font-family: 'Crimson Text', serif;
  font-size: 15px;
  box-sizing: border-box;
}
.player-spell-search-input:focus { outline: none; border-color: #8a6000; }
.player-spell-results {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: #f8f0de;
  border: 1.5px solid #c4a87a;
  border-top: none;
  border-radius: 0 0 6px 6px;
  z-index: 20;
  max-height: 220px;
  overflow-y: auto;
}
.player-spell-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-family: 'Crimson Text', serif;
  font-size: 15px;
  color: #3a2410;
  cursor: pointer;
  border-bottom: 1px solid #e8d4a8;
  transition: background 0.1s;
}
.player-spell-result:hover { background: #efe3c5; }
.player-spell-result.pinned { color: #8a7050; }
.player-spell-pin-icon { font-size: 13px; color: #8a6000; }
.player-spell-noresult, .player-spell-loading {
  padding: 8px 12px;
  font-family: 'Crimson Text', serif;
  font-size: 14px;
  color: #8a7050;
  font-style: italic;
}
.player-pinned-spells { margin-top: 4px; }
.player-pinned-spell-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid #e8d4a8;
}
.player-pinned-spell-name {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: #3a2410;
  cursor: pointer;
  font-weight: 600;
  flex: 1;
}
.player-pinned-spell-name:hover { color: #8a6000; }
.player-pinned-spell-meta {
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  color: #8a7050;
  flex-shrink: 0;
}
.player-pinned-spell-del {
  background: none;
  border: none;
  color: #b09870;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.player-pinned-spell-del:hover { color: #8b2a2a; }

/* ══════════════════════════════════════════════════
   TRACKER — spell-slot stijl (naam bewerkbaar)
   ══════════════════════════════════════════════════ */
.player-tracker-name-input {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  color: #3a2410;
  background: transparent;
  border: none;
  border-bottom: 1px dashed #c4a87a;
  width: 130px;
  min-width: 80px;
  padding: 1px 2px;
  outline: none;
  flex-shrink: 1;
}
.player-tracker-name-input:focus { border-bottom-color: #8a6000; background: rgba(255,255,255,0.4); }

/* ══════════════════════════════════════════════════
   SPREUK-ACCORDION
   ══════════════════════════════════════════════════ */
.player-spell-accordion {
  border-bottom: 1px solid #e8d4a8;
}
.player-spell-accordion:last-child { border-bottom: none; }
.player-pinned-spell-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.player-pinned-spell-summary::-webkit-details-marker { display: none; }
.player-pinned-spell-chevron {
  font-size: 11px;
  color: #8a7050;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.player-spell-accordion[open] .player-pinned-spell-chevron { transform: rotate(0deg); }
.player-spell-accordion:not([open]) .player-pinned-spell-chevron { transform: rotate(-90deg); }
.player-pinned-spell-summary:hover { background: rgba(196,168,122,0.1); border-radius: 4px; }
.player-spell-accordion-body {
  padding: 6px 12px 12px 20px;
  background: rgba(255,255,255,0.35);
  border-top: 1px solid #e8d4a8;
}
.player-spell-meta2 {
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  color: #8a7050;
  margin-bottom: 8px;
  font-style: italic;
}
.player-spell-desc {
  font-family: 'Crimson Text', serif;
  font-size: 15px;
  color: #3a2410;
  line-height: 1.6;
}
.player-spell-higher {
  font-family: 'Crimson Text', serif;
  font-size: 14px;
  color: #5a4030;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e8d4a8;
}
.player-spell-loading-text, .player-spell-err {
  font-family: 'Crimson Text', serif;
  font-size: 14px;
  color: #8a7050;
  font-style: italic;
}

.player-dash-slot-del {
  background: none;
  border: none;
  color: #b09870;
  font-size: 15px;
  cursor: pointer;
  padding: 0 3px;
  line-height: 1;
  margin-left: 2px;
}
.player-dash-slot-del:hover { color: #8b2a2a; }

/* ══════════════════════════════════════════════════
   ITEM GEVEN AAN SPELER (DM)
   ══════════════════════════════════════════════════ */
.item-give-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  opacity: 0.7;
  transition: opacity 0.15s;
  vertical-align: middle;
}
.item-give-btn:hover { opacity: 1; }

.item-give-btn--standalone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border: 1px solid #c4a87a !important;
  border-radius: 4px;
  background: rgba(255,255,255,0.5) !important;
  color: #6a4820;
  opacity: 1;
}
.item-give-btn--standalone:hover { background: #f0b429 !important; color: #3a2410; border-color: #d4a020 !important; }

.item-give-picker { display: flex; flex-direction: column; gap: 14px; }
.item-give-group-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  color: #8a6000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  border-bottom: 1px solid #e8d4a8;
  padding-bottom: 4px;
}
.item-give-player-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: rgba(255,255,255,0.5);
  border: 1px solid #c4a87a;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Crimson Text', serif;
  font-size: 15px;
  color: #3a2410;
  text-align: left;
  margin-bottom: 5px;
  transition: background 0.15s;
}
.item-give-player-btn:hover { background: #f0b429; border-color: #d4a020; }
.item-give-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #c4a87a;
  flex-shrink: 0;
}

/* ── Campagne-kaarten ──────────────────────────────────────────────────────── */

.campagne-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.campagne-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(180,140,60,0.35);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color 0.15s;
}

.campagne-card--active {
  border-color: #f0b429;
  background: rgba(240,180,41,0.1);
}

.campagne-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.campagne-card-title {
  color: #f0d8a8;
  font-size: 1em;
}

.campagne-card-sub {
  color: #c8a87a;
  font-size: 0.82em;
}

.campagne-card-meta {
  color: #8a7050;
  font-size: 0.78em;
}

.campagne-card-actions {
  flex-shrink: 0;
}

.campagne-active-badge {
  color: #f0b429;
  font-size: 0.85em;
  font-weight: 600;
}

/* ── Harry-Potter thema ────────────────────────────────────────────────────── */

[data-theme="hp"] {
  --hp-purple:  #6b3fa0;
  --hp-rose:    #c25090;
  --hp-gold:    #d4a830;
  --hp-dark:    #1a0d2e;
  --hp-mid:     #2d1657;
  --hp-light:   #ecdff5;
  --hp-text:    #f0e6ff;
}

[data-theme="hp"] body,
[data-theme="hp"] .app-shell {
  background: linear-gradient(160deg, #1a0d2e 0%, #2d1657 60%, #1a0d2e 100%);
  color: #f0e6ff;
}

[data-theme="hp"] body::before {
  background-image:
    repeating-linear-gradient(-38deg, transparent 0px, transparent 6px, rgba(180,80,200,0.008) 6px, rgba(180,80,200,0.008) 7px),
    repeating-linear-gradient(52deg,  transparent 0px, transparent 9px, rgba(100,40,160,0.005) 9px, rgba(100,40,160,0.005) 10px);
}

[data-theme="hp"] ::-webkit-scrollbar-track { background: #2d1657; }
[data-theme="hp"] ::-webkit-scrollbar-thumb { background: #6b3fa0; }
[data-theme="hp"] ::-webkit-scrollbar-thumb:hover { background: #c25090; }

/* header = <header class="app-header"> */
[data-theme="hp"] .app-header {
  background: linear-gradient(90deg, #1a0d2e 0%, #3d1f80 50%, #1a0d2e 100%) !important;
  border-bottom-color: #6b3fa0 !important;
}
[data-theme="hp"] .dm-party-bar {
  background: linear-gradient(180deg, #250f45 0%, #1a0d2e 100%) !important;
  border-bottom-color: #6b3fa0 !important;
}

[data-theme="hp"] #app-title     { color: #d4a830 !important; text-shadow: 0 0 14px rgba(212,168,48,0.6); }
[data-theme="hp"] .app-subtitle  { color: #c25090 !important; }
[data-theme="hp"] #player-name-display { color: #c4a0e0 !important; }
[data-theme="hp"] .dm-seal       { border-color: rgba(107,63,160,0.6) !important; background: rgba(107,63,160,0.15) !important; }
[data-theme="hp"] .dm-seal-label { color: #c4a0e0 !important; }
[data-theme="hp"] .dm-seal--active { background: rgba(107,63,160,0.35) !important; border-color: #d4a830 !important; }
[data-theme="hp"] .dm-seal--active .dm-seal-label { color: #d4a830 !important; }
[data-theme="hp"] .app-search-btn { border-color: rgba(107,63,160,0.5) !important; color: #c4a0e0 !important; background: rgba(107,63,160,0.12) !important; }

/* nav inside app-header — transparant, kleur al van header */
[data-theme="hp"] .app-nav { background: transparent !important; }
[data-theme="hp"] .section-tab    { color: #c4a0e0 !important; }
[data-theme="hp"] .section-tab:hover   { background: rgba(107,63,160,0.3) !important; color: #f0e6ff !important; }
[data-theme="hp"] .section-tab.active  { background: rgba(107,63,160,0.5) !important; color: #d4a830 !important; }

/* body achtergrond */
[data-theme="hp"] body {
  background: linear-gradient(160deg, #1a0d2e 0%, #2d1657 60%, #1a0d2e 100%) !important;
  color: #f0e6ff !important;
}

[data-theme="hp"] .section { background: transparent; }

[data-theme="hp"] .entity-card {
  background: linear-gradient(160deg, rgba(72,36,128,0.95) 0%, rgba(55,24,100,0.95) 100%);
  border: 1px solid rgba(150,90,210,0.55);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.45),
    0 0 0 1px rgba(107,63,160,0.25),
    inset 0 1px 0 rgba(200,160,255,0.08);
}

[data-theme="hp"] .entity-card:hover {
  border-color: #c25090;
  box-shadow:
    0 5px 16px rgba(0,0,0,0.5),
    0 0 0 1px rgba(194,80,144,0.4),
    inset 0 1px 0 rgba(200,160,255,0.1);
}

/* Tekst op paarse kaartjes: alle ink-kleuren overschrijven naar lichte tonen */
[data-theme="hp"] .entity-card .card-name            { color: #ecdff5 !important; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
[data-theme="hp"] .entity-card .card-name-sep        { background: linear-gradient(to right, rgba(196,160,224,0.4), transparent); }
[data-theme="hp"] .entity-card .text-ink-bright      { color: #ecdff5 !important; }
[data-theme="hp"] .entity-card .text-ink-medium      { color: #c4a0e0 !important; }
[data-theme="hp"] .entity-card .text-ink-dim         { color: #9b6dc0 !important; }
[data-theme="hp"] .entity-card .text-ink-faint       { color: #7a55a0 !important; }
[data-theme="hp"] .entity-card .flavour-preview      { background: rgba(107,63,160,0.15); border-color: rgba(107,63,160,0.3); }
[data-theme="hp"] .entity-card .flavour-preview-text { color: #b090d0 !important; }
[data-theme="hp"] .entity-card .chip                 { background: rgba(107,63,160,0.35) !important; color: #d4c0f0 !important; border-color: rgba(107,63,160,0.5) !important; }
[data-theme="hp"] .entity-card .card-icon            { filter: none; }

[data-theme="hp"] .entity-card-name   { color: #ecdff5; }
[data-theme="hp"] .entity-card-type   { color: #9b6dc0; }
[data-theme="hp"] .entity-type-badge  { background: rgba(107,63,160,0.4); color: #d4a830; border-color: rgba(107,63,160,0.6); }

[data-theme="hp"] .party-bar         { background: #1a0d2e; border-top-color: #6b3fa0; }
[data-theme="hp"] .party-member-name { color: #c4a0e0; }

[data-theme="hp"] .modal-overlay { background: rgba(10,5,25,0.88); }

/* Modal container */
[data-theme="hp"] .modal,
[data-theme="hp"] .modal-box {
  background: linear-gradient(160deg, #2a1260 0%, #1e0d4a 100%);
  border-color: rgba(150,90,210,0.6);
  color: #ecdff5;
  box-shadow: 0 16px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(107,63,160,0.3);
}
[data-theme="hp"] .modal-head {
  background: linear-gradient(to bottom, rgba(60,25,110,0.7), transparent);
  border-bottom-color: rgba(107,63,160,0.5);
}
[data-theme="hp"] .modal-box h2,
[data-theme="hp"] #m-title { color: #d4a830; }
[data-theme="hp"] #m-title::after { background: linear-gradient(to right, rgba(212,168,48,0.6), transparent 70%); }
[data-theme="hp"] .modal-back,
[data-theme="hp"] .modal-close { color: #9b6dc0; }
[data-theme="hp"] .modal-back:hover,
[data-theme="hp"] .modal-close:hover { color: #ecdff5; background: rgba(107,63,160,0.3); }

/* Detail view — velden, badges, pills */
[data-theme="hp"] .detail-role-badge {
  color: #d4a830;
  background: rgba(212,168,48,0.12);
  border-color: rgba(212,168,48,0.45);
}
[data-theme="hp"] .detail-meta-pill {
  color: #c4a0e0;
  background: rgba(107,63,160,0.25);
  border-color: rgba(107,63,160,0.45);
}
[data-theme="hp"] .detail-divider { color: #9b6dc0; }
[data-theme="hp"] .detail-field-label { color: #9b6dc0; }
[data-theme="hp"] .detail-field-label::before { background: #6b3fa0; }
[data-theme="hp"] .detail-field-label--secret { color: #c25090; }
[data-theme="hp"] .detail-field-label--secret::before { background: #c25090; }
[data-theme="hp"] .detail-field-value { color: #ecdff5; }
[data-theme="hp"] .detail-desc {
  color: #d8c8f0;
  background: rgba(107,63,160,0.15);
  border-left-color: #6b3fa0;
}
[data-theme="hp"] .detail-dm-block {
  color: #d8c8f0;
  background: rgba(212,168,48,0.07);
  border-color: rgba(212,168,48,0.25);
}
[data-theme="hp"] .detail-dm-block--secret {
  background: rgba(194,80,144,0.08);
  border-color: rgba(194,80,144,0.3);
}

/* Portrait / hero afbeelding rand */
[data-theme="hp"] .detail-portrait,
[data-theme="hp"] .detail-hero {
  border-color: #6b3fa0;
  box-shadow:
    0 0 0 5px rgba(26,13,46,1),
    0 0 0 6px rgba(107,63,160,0.5),
    0 6px 24px rgba(0,0,0,0.4);
}

/* Flavour scroll → magisch perkament */
[data-theme="hp"] .flavour-scroll-rod {
  background: linear-gradient(180deg, #6b3fa0 0%, #9b60c0 40%, #6b3fa0 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(200,160,255,0.3);
}
[data-theme="hp"] .flavour-scroll-content {
  background: linear-gradient(180deg, rgba(42,18,96,0.95) 0%, rgba(35,14,78,0.95) 50%, rgba(42,18,96,0.95) 100%);
  border-left-color: rgba(107,63,160,0.6);
  border-right-color: rgba(107,63,160,0.6);
}
[data-theme="hp"] .flavour-text { color: #d8c8f0; }
[data-theme="hp"] .flavour-audio-play {
  background: rgba(107,63,160,0.2);
  border-color: rgba(107,63,160,0.5);
  color: #c4a0e0;
}

[data-theme="hp"] .dm-section .dm-section-tabs { background: #150a28; border-right-color: #6b3fa0; }
[data-theme="hp"] .dm-tab-btn         { color: #c4a0e0; }
[data-theme="hp"] .dm-tab-btn:hover   { background: rgba(107,63,160,0.3); }
[data-theme="hp"] .dm-tab-btn.active  { background: rgba(107,63,160,0.5); color: #d4a830; border-left-color: #d4a830; }
[data-theme="hp"] .dm-section-body    { background: #1a0d2e; }

[data-theme="hp"] input,
[data-theme="hp"] textarea,
[data-theme="hp"] select {
  background: rgba(45,22,87,0.7);
  border-color: #6b3fa0;
  color: #ecdff5;
}

[data-theme="hp"] input::placeholder,
[data-theme="hp"] textarea::placeholder { color: #9b6dc0; }

[data-theme="hp"] button.dm-btn,
[data-theme="hp"] .dm-btn {
  background: linear-gradient(135deg, #6b3fa0, #c25090);
  border-color: #9b60c0;
  color: #fff;
}
[data-theme="hp"] .dm-btn:hover { opacity: 0.88; }
[data-theme="hp"] .dm-btn-ghost { background: transparent; border-color: #6b3fa0; color: #c4a0e0; }
[data-theme="hp"] .dm-btn-ghost:hover { background: rgba(107,63,160,0.3); }

[data-theme="hp"] .map-toast { background: #2d1657; border-color: #6b3fa0; color: #f0e6ff; }

/* ── HP-thema: Spreukenpaneel (DM) ── */
[data-theme="hp"] .dm-spell-row {
  background: rgba(60,28,110,0.6);
  color: #c4a0e0;
  border: 1px solid rgba(107,63,160,0.4);
  margin-bottom: 2px;
}
[data-theme="hp"] .dm-spell-row:hover { background: rgba(80,40,140,0.75); color: #ecdff5; border-color: #c25090; }
[data-theme="hp"] #dm-spell-results { gap: 3px; }

[data-theme="hp"] .dm-spell-name { color: #d4a830; }
[data-theme="hp"] .dm-spell-meta { color: #9b6dc0; }
[data-theme="hp"] .dm-spell-props {
  background: rgba(26,13,46,0.7);
  border-color: rgba(107,63,160,0.5);
}
[data-theme="hp"] .dm-spell-props > div > span:first-child { color: #7a55a0; }
[data-theme="hp"] .dm-spell-props > div > span:last-child  { color: #ecdff5; }
[data-theme="hp"] .dm-spell-desc { color: #d0bce8; }
[data-theme="hp"] .dm-spell-higher { border-top-color: rgba(107,63,160,0.4); }
[data-theme="hp"] .dm-spell-link { color: #d4a830; }
[data-theme="hp"] .dm-spell-link:hover { color: #f0c840; }

/* ── HP-thema: Spreukenboek (speler) ── */
[data-theme="hp"] .player-spell-search-input {
  background: rgba(45,22,87,0.8) !important;
  border-color: #6b3fa0 !important;
  color: #ecdff5 !important;
}
[data-theme="hp"] .player-spell-results {
  background: #2d1657;
  border-color: #6b3fa0;
}
[data-theme="hp"] .player-spell-result {
  color: #c4a0e0;
  border-bottom-color: rgba(107,63,160,0.3);
}
[data-theme="hp"] .player-spell-result:hover { background: rgba(107,63,160,0.35); color: #ecdff5; }
[data-theme="hp"] .player-spell-result.pinned { color: #7a55a0; }
[data-theme="hp"] .player-spell-pin-icon { color: #d4a830; }
[data-theme="hp"] .player-spell-noresult,
[data-theme="hp"] .player-spell-loading { color: #7a55a0; }

[data-theme="hp"] .player-pinned-spell-row {
  background: rgba(60,28,110,0.5);
  border: 1px solid rgba(107,63,160,0.4);
  border-radius: 6px;
  margin-bottom: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(107,63,160,0.4);
}
[data-theme="hp"] .player-pinned-spell-name { color: #d4a830; }
[data-theme="hp"] .player-pinned-spell-name:hover { color: #f0c840; }
[data-theme="hp"] .player-pinned-spell-meta { color: #9b6dc0; }
[data-theme="hp"] .player-pinned-spell-del { color: #6b3fa0; }
[data-theme="hp"] .player-pinned-spell-del:hover { color: #c25090; }

[data-theme="hp"] .player-spell-accordion {
  background: rgba(60,28,110,0.45);
  border: 1px solid rgba(107,63,160,0.4);
  border-radius: 6px;
  margin-bottom: 4px;
  overflow: hidden;
}
[data-theme="hp"] .player-spell-accordion:last-child { border-bottom: 1px solid rgba(107,63,160,0.4); }
[data-theme="hp"] .player-spell-accordion-body {
  background: rgba(26,13,46,0.6);
  border-top: 1px solid rgba(107,63,160,0.3);
}
[data-theme="hp"] .player-spell-meta2 { color: #9b6dc0; }
[data-theme="hp"] .player-spell-desc { color: #d0bce8; }
[data-theme="hp"] .player-spell-higher { color: #c4a0e0; border-top-color: rgba(107,63,160,0.4); }
[data-theme="hp"] .player-spell-loading-text,
[data-theme="hp"] .player-spell-err { color: #7a55a0; }

[data-theme="hp"] .player-pinned-spell-summary:hover { background: rgba(107,63,160,0.2); }
[data-theme="hp"] .player-pinned-spell-chevron { color: #9b6dc0; }

/* ── Combat stats strip ── */
.player-combat-strip {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 4px;
  padding: 14px 8px 16px;
  border-bottom: 1px solid rgba(196,168,122,0.3);
  margin-bottom: 16px;
  background: rgba(240,228,196,0.2);
  border-radius: 0 0 6px 6px;
}
.pcs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 48px;
}
.pcs-label {
  font-family: 'Cinzel', serif;
  font-size: 7.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #9a7008;
}
.pcs-input {
  width: 52px;
  text-align: center;
  padding: 5px 2px;
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 700;
  color: #2a1a08;
  background: rgba(255,255,255,0.5);
  border: 1.5px solid rgba(196,168,122,0.55);
  border-radius: 6px;
  line-height: 1;
}
.pcs-input:focus { border-color: #c8a840; outline: none; background: rgba(255,255,255,0.8); }
.pcs-value {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 700;
  color: #7a5008;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  background: rgba(200,168,64,0.1);
  border: 1.5px solid rgba(196,168,122,0.4);
  border-radius: 6px;
}

/* ── HP hero redesign ── */
.player-hp-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0; }
.player-hp-hero-row { display: flex; align-items: center; gap: 16px; }
.player-hp-nums { display: flex; align-items: baseline; gap: 4px; }
.player-hp-current {
  font-family: 'Cinzel', serif;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  width: 88px;
  text-align: center;
  background: none;
  border: none;
  border-bottom: 2px solid #c8a840;
  color: #2a1a08;
}
.player-hp-current:focus { outline: none; border-bottom-color: #7a5008; }
.player-hp-sep { font-size: 26px; color: #9a7008; font-family: 'Cinzel', serif; line-height: 1; }
.player-hp-max {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  width: 60px;
  text-align: center;
  background: none;
  border: none;
  border-bottom: 1.5px solid rgba(196,168,122,0.5);
  color: #5a4030;
}
.player-hp-max:focus { outline: none; }
.player-hp-btn-big {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px solid #c8a840;
  background: rgba(200,168,64,0.12);
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  color: #7a5008;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.player-hp-btn-big:hover { background: rgba(200,168,64,0.28); }

/* ── Death saves ── */
.player-death-saves {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0 2px;
  border-top: 1px solid rgba(196,168,122,0.25);
  margin-top: 10px;
}
.player-ds-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.player-ds-label {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  width: 16px;
  text-align: center;
  color: #9a7008;
}
.player-ds-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #c8a840;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s;
}
.player-ds-dot.filled.success { background: #5aaa70; border-color: #5aaa70; }
.player-ds-dot.filled.failure { background: #c06060; border-color: #c06060; }
.player-ds-sep { font-size: 10px; color: #9a7008; font-family: 'Cinzel', serif; letter-spacing: 0.5px; }

/* ── Ability scores ── */
.player-ability-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.player-ability-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 4px 8px;
  background: rgba(240,228,196,0.45);
  border: 2px solid rgba(196,168,122,0.6);
  border-radius: 8px;
  text-align: center;
  gap: 3px;
}
.player-ability-label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9a7008;
}
.player-ability-score {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 900;
  color: #2a1a08;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(196,168,122,0.5);
  padding: 1px 0;
  line-height: 1.2;
}
.player-ability-score:focus { outline: none; border-bottom-color: #c8a840; }
.player-ability-mod-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 20px;
  border: 1.5px solid rgba(200,168,64,0.65);
  border-radius: 10px;
  background: rgba(200,168,64,0.1);
  margin: 1px 0;
}
.player-ability-mod { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; color: #7a5008; }
.player-save-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.5px solid #c8a840;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin-top: 1px;
  transition: background 0.12s;
}
.player-save-dot.active { background: #c8a840; }
.player-save-val { font-family: 'Cinzel', serif; font-size: 9px; color: #7a5008; font-weight: 700; }

/* ── Skills ── */
.player-skills-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 16px;
}
.player-skill-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(196,168,122,0.12);
}
.player-skill-prof-btn {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.5px solid rgba(196,168,122,0.7);
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.1s, border-color 0.1s;
}
.player-skill-prof-btn.prof { background: #c8a840; border-color: #c8a840; }
.player-skill-prof-btn.expert { background: #7a5008; border-color: #7a5008; }
.player-skill-bonus {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  width: 26px;
  text-align: right;
  color: #2a1a08;
  flex-shrink: 0;
}
.player-skill-name {
  font-family: 'IM Fell English', serif;
  font-size: 12px;
  color: #2a1a08;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-skill-ab {
  font-size: 8.5px;
  color: #9a7008;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Features & Traits ── */
.player-ft-wrap { display: flex; flex-direction: column; gap: 6px; }
.player-ft-toolbar { display: flex; gap: 4px; }
.player-ft-btn {
  width: 28px; height: 28px;
  border: 1px solid rgba(196,168,122,0.55);
  border-radius: 4px;
  background: rgba(240,228,196,0.5);
  cursor: pointer;
  font-size: 13px;
  color: #2a1a08;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.player-ft-btn:hover { background: rgba(200,168,64,0.2); }
.player-ft-btn-i em { font-size: 14px; }
.player-ft-area {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  background: rgba(240,228,196,0.3);
  border: 1px solid rgba(196,168,122,0.45);
  border-radius: 6px;
  color: #2a1a08;
  font-family: 'IM Fell English', serif;
  font-size: 13px;
  line-height: 1.65;
  resize: vertical;
}
.player-ft-area:focus { outline: none; border-color: #c8a840; background: rgba(240,228,196,0.5); }

/* ── Traits: zoeker & accordeon ── */
.player-trait-search-wrap { position: relative; margin-bottom: 10px; }
.player-pinned-traits { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }

.player-trait-accordion { border-radius: 6px; overflow: hidden; }
.player-trait-accordion > summary { list-style: none; }
.player-trait-accordion > summary::-webkit-details-marker { display: none; }

.player-trait-add-btn {
  margin-left: auto;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border: 1px solid rgba(196,168,122,0.5);
  border-radius: 5px;
  background: rgba(196,168,122,0.1);
  color: var(--color-ink-dim, #8a7050);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.player-trait-add-btn:hover {
  background: rgba(196,168,122,0.22);
  color: var(--color-ink-bright, #2a1a08);
}

/* Formulier: nieuw kenmerk */
.player-trait-custom-form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  background: rgba(196,168,122,0.08);
  border: 1px solid rgba(196,168,122,0.3);
  border-radius: 7px;
}
.player-trait-custom-form.hidden { display: none; }
.player-trait-form-input {
  padding: 7px 10px;
  background: rgba(240,228,196,0.4);
  border: 1px solid rgba(196,168,122,0.45);
  border-radius: 5px;
  color: #2a1a08;
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  outline: none;
}
.player-trait-form-input:focus { border-color: #c8a840; background: rgba(240,228,196,0.6); }
.player-trait-form-ta {
  padding: 7px 10px;
  background: rgba(240,228,196,0.4);
  border: 1px solid rgba(196,168,122,0.45);
  border-radius: 5px;
  color: #2a1a08;
  font-family: 'IM Fell English', serif;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  outline: none;
}
.player-trait-form-ta:focus { border-color: #c8a840; }
.player-trait-form-btns { display: flex; gap: 6px; }
.player-trait-form-save {
  padding: 5px 14px;
  background: rgba(196,148,10,0.18);
  border: 1px solid rgba(196,148,10,0.45);
  border-radius: 5px;
  color: #b8860b;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.player-trait-form-save:hover { background: rgba(196,148,10,0.3); }
.player-trait-form-cancel {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid rgba(196,168,122,0.3);
  border-radius: 5px;
  color: #8a7050;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  cursor: pointer;
}
.player-trait-form-cancel:hover { background: rgba(196,168,122,0.1); }

/* ── Currency redesign ── */
.player-dash-currency-new {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.player-currency-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 8px;
  border: 1.5px solid;
  flex: 1;
  min-width: 0;
}
.player-currency-gold   { background: rgba(200,168,64,0.12); border-color: rgba(200,168,64,0.5); }
.player-currency-silver { background: rgba(180,180,200,0.12); border-color: rgba(160,160,180,0.4); }
.player-currency-copper { background: rgba(180,120,80,0.12); border-color: rgba(160,100,60,0.4); }
.player-currency-coin { font-size: 20px; line-height: 1; }
.player-currency-body { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.player-currency-name { font-family: 'Cinzel', serif; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #9a7008; text-align: center; }
.player-currency-input {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 700;
  color: #2a1a08;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(196,168,122,0.4);
  width: 100%;
  padding: 0;
  text-align: center;
}
.player-currency-input:focus { outline: none; border-bottom-color: #c8a840; }

/* ── Spell slot dots — larger ── */
.spell-slot-dot {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
}

/* ── Short rest button variant ── */
.player-dash-slot-rest-btn--short { margin-left: 6px; opacity: 0.85; }

/* ── Format toolbar (B / I / kleuren) ── */
.fmt-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.fmt-btn {
  width: 26px;
  height: 22px;
  font-size: 12px;
  border: 1px solid var(--color-room-border);
  border-radius: 4px;
  background: var(--color-room-bg);
  color: var(--color-ink-bright);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.fmt-btn:hover { background: var(--color-room-elevated); }
.fmt-btn-b  { font-weight: 900; font-family: 'Cinzel', serif; }
.fmt-btn-i  { font-style: italic; font-family: 'IM Fell English', serif; }
.fmt-btn-u  { text-decoration: underline; }
.fmt-btn-s  { text-decoration: line-through; }
.fmt-btn-mark { color: #c4a840; font-size: 14px; }
.fmt-btn-sc { font-variant: small-caps; font-size: 10px; letter-spacing: 0.05em; }
.fmt-btn-hr { font-size: 16px; line-height: 1; }
.fmt-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--color-room-border);
  margin: 0 2px;
}
.fmt-kleur-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fmt-kleur-select {
  height: 22px;
  padding: 0 4px;
  font-size: 11px;
  background: var(--color-room-bg);
  border: 1px solid var(--color-room-border);
  border-radius: 4px;
  color: var(--color-ink-bright);
  cursor: pointer;
}
.fmt-kleur-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.3s;
  flex-shrink: 0;
}

/* mdToHtml output stijlen */
.md-mark {
  background: rgba(196,168,66,0.35);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}
.md-smallcaps {
  font-variant: small-caps;
  letter-spacing: 0.06em;
}
.md-hr {
  border: none;
  border-top: 1px solid rgba(196,168,122,0.35);
  margin: 10px 0;
}

/* ── Logboek redesign ── */
.logboek-search-wrap {
  padding: 12px 24px 10px;
  background: rgba(240,228,196,0.2);
  border-bottom: 1px solid rgba(196,168,122,0.2);
}
.logboek-search-input {
  width: 100%;
  max-width: 520px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(196,168,122,0.45);
  border-radius: 20px;
  font-family: 'IM Fell English', serif;
  font-size: 13.5px;
  color: #2a1a08;
}
.logboek-search-input:focus { outline: none; border-color: #c8a840; background: rgba(255,255,255,0.8); }

.logboek-chapter { margin-bottom: 28px; }

.logboek-chapter-banner {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  min-height: 72px;
  display: flex;
  align-items: stretch;
  background: linear-gradient(135deg, #3a2510 0%, #1a0e04 100%);
  background-size: cover;
  background-position: center;
  user-select: none;
}
.logboek-chapter-banner--img { min-height: 110px; }

@keyframes logboek-banner-pan {
  to { background-position: center bottom; }
}
.logboek-chapter-banner--img:hover {
  animation: logboek-banner-pan 12s ease-in-out infinite alternate;
}
.logboek-chapter-banner:hover .logboek-chapter-banner-overlay {
  background: linear-gradient(to top, rgba(20,10,2,0.92) 0%, rgba(20,10,2,0.55) 60%, transparent 100%);
}
.logboek-chapter-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,10,2,0.85) 0%, rgba(20,10,2,0.4) 65%, transparent 100%);
  transition: background 0.2s;
}
.logboek-chapter-banner-content {
  position: relative;
  z-index: 1;
  padding: 14px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.logboek-chapter-num {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: #c8a840;
  margin-bottom: 3px;
}
.logboek-chapter-title {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  color: #f5edd8;
  line-height: 1.2;
}
.logboek-chapter-dag {
  font-family: 'IM Fell English', serif;
  font-size: 11px;
  font-style: italic;
  color: rgba(245,237,216,0.6);
  margin-top: 3px;
}
.logboek-chapter-toggle-wrap {
  position: relative;
  z-index: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.logboek-chapter-toggle {
  color: #c8a840;
  font-size: 11px;
  display: flex;
  align-items: center;
}
.logboek-chapter-edit-btn {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(196,168,122,0.35);
  border-radius: 4px;
  color: rgba(196,168,122,0.8);
  font-size: 12px;
  padding: 2px 6px;
  cursor: pointer;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.logboek-chapter-banner:hover .logboek-chapter-edit-btn { opacity: 1; }
.logboek-chapter-edit-btn:hover { background: rgba(0,0,0,0.75); color: #c8a840; }

/* Visibility toggle per groep (DM) — zelfde stijl als edit-btn, altijd zichtbaar als hidden */
.logboek-chapter-visibility-btn {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(196,168,122,0.35);
  border-radius: 4px;
  color: rgba(196,168,122,0.75);
  font-size: 12px;
  padding: 2px 6px;
  cursor: pointer;
  line-height: 1.4;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
.logboek-chapter-banner:hover .logboek-chapter-visibility-btn { opacity: 1; }
.logboek-chapter-visibility-btn.is-hidden { opacity: 1; color: #e08080; border-color: rgba(220,80,80,0.5); }
.logboek-chapter-visibility-btn:hover { background: rgba(0,0,0,0.75); }

/* Akte verborgen voor actieve groep: DM ziet het gedempt */
.logboek-chapter--hidden-for-group { opacity: 0.45; }
.logboek-chapter--hidden-for-group .logboek-chapter-banner { filter: grayscale(0.6); }

/* ── Actieve akte chip in de header (DM-only) ── */
.active-akte-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 10px;
  background: rgba(80,45,10,0.85);
  border: 1px solid rgba(196,168,122,0.55);
  border-radius: 20px;
  font-size: 0.72rem;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: rgba(240,215,160,0.98);
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  max-width: 220px;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
#active-akte-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.active-akte-dot {
  font-size: 0.6rem;
  color: rgba(240,180,60,0.9);
  flex-shrink: 0;
}
.active-akte-stop {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(196,168,122,0.7);
  font-size: 0.9rem;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.active-akte-stop:hover { color: #fff; background: rgba(200,60,60,0.7); }

/* ── Speel-knop op akteheader in logboek (DM-only) ── */
.logboek-chapter-speel-btn {
  background: rgba(196,168,122,0.18);
  border: 1px solid rgba(196,168,122,0.45);
  border-radius: 4px;
  color: rgba(220,195,140,0.9);
  font-size: 11px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  padding: 2px 8px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.logboek-chapter-speel-btn:hover {
  background: rgba(196,168,122,0.35);
  color: #fff;
}

/* Info-balk boven het logboek (DM: welke groep wordt geconfigureerd) */
.logboek-visibility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px 0;
  padding: 6px 12px;
  background: rgba(196,168,122,0.08);
  border: 1px solid rgba(196,168,122,0.25);
  border-radius: 6px;
  font-size: 0.78rem;
  color: rgba(196,168,122,0.75);
}
.logboek-visibility-bar strong { color: rgba(220,195,140,0.95); }
.logboek-visibility-bar-legend { font-style: italic; opacity: 0.8; white-space: nowrap; }

/* Banner in verborgen aktes (DM-only) */
.logboek-chapter-hidden-notice {
  margin: 0 0 10px 0;
  padding: 7px 12px;
  background: rgba(180,50,50,0.12);
  border: 1px solid rgba(200,80,80,0.35);
  border-radius: 6px;
  font-size: 0.78rem;
  color: rgba(240,160,160,0.85);
  font-style: italic;
}
.logboek-chapter-hidden-notice strong { color: rgba(255,180,180,0.95); font-style: normal; }

/* Banner in detail-modal als akte verborgen is */
.logboek-modal-hidden-notice {
  margin-bottom: 12px;
  padding: 7px 12px;
  background: rgba(180,50,50,0.12);
  border: 1px solid rgba(200,80,80,0.35);
  border-radius: 6px;
  font-size: 0.8rem;
  color: rgba(240,160,160,0.85);
  font-style: italic;
}
.logboek-modal-hidden-notice strong { color: rgba(255,180,180,0.95); font-style: normal; }

.logboek-chapter-content { padding-top: 4px; }

.logboek-timeline {
  position: relative;
  padding-left: 28px;
  border-left: 2px solid rgba(196,168,122,0.3);
  margin-left: 20px;
  margin-top: 18px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.logboek-tl-entry {
  position: relative;
  cursor: pointer;
}
.logboek-tl-entry::before {
  content: '';
  position: absolute;
  left: -36px;
  top: 14px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #c8a840;
  border: 2px solid #f5edd8;
  box-shadow: 0 0 0 2px rgba(196,168,122,0.4);
  transition: transform 0.15s;
}
.logboek-tl-entry:hover::before { transform: scale(1.2); }
.logboek-entry--hidden { opacity: 0.6; }
.logboek-entry--hidden::before { background: #8a7050; }

.logboek-tl-card {
  position: relative;
  background: rgba(240,228,196,0.25);
  border: 1px solid rgba(196,168,122,0.4);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.logboek-tl-entry:hover .logboek-tl-card {
  border-color: rgba(196,168,122,0.7);
  box-shadow: 0 4px 14px rgba(60,40,10,0.16);
  transform: translateX(2px);
}

.logboek-card-img-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
}
.logboek-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logboek-card-img-wrap:hover .logboek-card-img {
  animation: card-img-pan 12s ease-in-out infinite alternate;
}
.logboek-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,10,2,0.88) 0%, rgba(20,10,2,0.2) 55%, transparent 100%);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}
.logboek-card-chapter-lbl {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(200,168,64,0.8);
}
.logboek-card-sessie-num {
  font-family: 'Cinzel', serif;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #c8a840;
}
.logboek-card-title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: #f5edd8;
  line-height: 1.25;
  text-shadow: 0 1px 5px rgba(0,0,0,0.6);
  margin: 0;
}
.logboek-card-date {
  font-family: 'IM Fell English', serif;
  font-size: 10px;
  font-style: italic;
  color: rgba(245,237,216,0.6);
}

.logboek-card-no-img { padding: 14px 16px 10px; }
.logboek-card-chapter-lbl-plain {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #c8a840;
  margin-bottom: 2px;
}
.logboek-card-sessie-num-plain {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #9a7008;
}
.logboek-card-title-plain {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: #2a1a08;
  margin: 4px 0 3px;
}
.logboek-card-date-plain {
  font-size: 10px;
  color: #9a7008;
  font-family: 'Cinzel', serif;
  font-style: italic;
}

.logboek-card-preview {
  font-family: 'IM Fell English', serif;
  font-size: 12px;
  font-style: italic;
  color: #5a4030;
  padding: 7px 14px 10px;
  line-height: 1.55;
  border-top: 1px solid rgba(196,168,122,0.2);
  margin: 0;
  /* Two-line clamp: max-height as hard fallback, webkit-line-clamp for ellipsis */
  overflow: hidden;
  max-height: calc(12px * 1.55 * 2 + 7px + 10px); /* 2 lines + padding */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* stylelint-disable-next-line */
  -webkit-box-orient: vertical;
}
.logboek-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 12px 10px;
}
.logboek-card-chip {
  font-size: 10px;
  color: #7a5008;
  background: rgba(200,168,64,0.12);
  border: 1px solid rgba(196,168,122,0.35);
  padding: 2px 8px;
  border-radius: 10px;
  font-family: 'IM Fell English', serif;
  font-style: italic;
}

.logboek-card-citaat {
  font-family: 'IM Fell English', serif;
  font-size: 11.5px;
  font-style: italic;
  color: rgba(140,90,20,0.85);
  padding: 6px 14px 0;
  margin: 0;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Logboek horizontal card layout ── */
.logboek-tl-entry--h { margin-bottom: 0; }

.logboek-tl-card--h {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 110px;
  max-height: 140px;
}

.logboek-card-thumb {
  flex-shrink: 0;
  width: 130px;
  min-height: 110px;
  max-height: 140px;
  overflow: hidden;
  background: rgba(30,20,10,0.3);
}
.logboek-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: object-position 0s;
}
.logboek-tl-entry--h:hover .logboek-card-thumb-img {
  animation: card-img-pan 12s ease-in-out infinite alternate;
}
.logboek-tl-entry--samenvatting { opacity: 0.92; }
.logboek-tl-card--samenvatting {
  background: rgba(196,168,122,0.1);
  border-color: rgba(196,168,122,0.35);
  border-style: dashed;
}
.logboek-tl-entry--samenvatting:hover .logboek-tl-card--samenvatting {
  background: rgba(196,168,122,0.17);
  border-color: rgba(196,168,122,0.6);
  border-style: dashed;
}
.logboek-card-thumb--samenvatting {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(196,168,122,0.12);
}
.logboek-samenvatting-icon { font-size: 2rem; line-height: 1; }
.logboek-samenvatting-label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(196,168,122,0.75);
}
.logboek-card-hpreview--leeg { opacity: 0.45; }

.logboek-card-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  opacity: 0.3;
}

.logboek-card-hbody {
  flex: 1;
  min-width: 0;
  padding: 10px 14px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.logboek-card-hmeta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.logboek-card-hmeta .logboek-card-chapter-lbl-plain {
  font-size: 8px;
  font-weight: 700;
}
.logboek-card-hmeta .logboek-card-date-plain { font-size: 9px; }

.logboek-card-htitle {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink-bright);
  margin: 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logboek-card-hcitaat {
  font-family: 'IM Fell English', serif;
  font-size: 11px;
  font-style: italic;
  color: rgba(140,90,20,0.85);
  margin: 0;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /* stylelint-disable-next-line */
  -webkit-box-orient: vertical;
}

.logboek-card-hpreview {
  font-family: 'IM Fell English', serif;
  font-size: 12px;
  font-style: italic;
  color: var(--color-ink-medium);
  margin: 0;
  line-height: 1.5;
  flex: 1;
  overflow: hidden;
}

.logboek-card-chips--h { margin-top: auto; padding-top: 4px; }

/* ── Hoofdstuk afbeeldingen-strip ── */
.logboek-img-strip-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 0 10px;
}
.logboek-img-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 8px;
  flex: 1;
  scrollbar-width: none;
}
.logboek-img-strip::-webkit-scrollbar { display: none; }

.logboek-img-strip-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(196,168,122,0.1);
  border: 1px solid rgba(196,168,122,0.25);
  color: rgba(196,168,122,0.7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
}
.logboek-img-strip-arrow--left  { border-radius: 4px 0 0 4px; margin-left: 24px; }
.logboek-img-strip-arrow--right { border-radius: 0 4px 4px 0; margin-right: 24px; }
.logboek-img-strip-arrow:hover {
  background: rgba(196,168,122,0.22);
  border-color: rgba(196,168,122,0.55);
  color: rgba(196,168,122,1);
}

.logboek-img-strip-thumb {
  position: relative;
  flex-shrink: 0;
  width: 90px;
  height: 60px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(196,168,122,0.25);
  cursor: pointer;
  padding: 0;
  background: rgba(30,20,10,0.4);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.logboek-img-strip-thumb:hover {
  border-color: rgba(196,168,122,0.7);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.logboek-img-strip-thumb--hidden { opacity: 0.45; }
.logboek-img-strip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: object-position 0s;
}
.logboek-img-strip-thumb:hover .logboek-img-strip-img {
  animation: card-img-pan 10s ease-in-out infinite alternate;
}
.logboek-img-strip-hidden-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 9px;
  line-height: 1;
}

.logboek-akte-samenvatting {
  margin: 4px 16px 12px 50px;
  padding: 14px 16px;
  background: rgba(196,168,122,0.07);
  border: 1px solid rgba(196,168,122,0.25);
  border-radius: 8px;
}
.logboek-akte-samenvatting--empty {
  border-style: dashed;
  opacity: 0.7;
}
.logboek-akte-samenvatting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.logboek-akte-samenvatting-label {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(196,168,122,0.7);
}
.logboek-akte-samenvatting-edit {
  background: transparent;
  border: 1px solid rgba(196,168,122,0.3);
  border-radius: 4px;
  color: rgba(196,168,122,0.6);
  font-size: 11px;
  padding: 1px 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.logboek-akte-samenvatting-edit:hover { color: #c8a840; border-color: rgba(196,168,122,0.7); }
.logboek-akte-samenvatting-body { margin: 0; }
.logboek-akte-samenvatting-empty-hint {
  font-size: 11px;
  color: rgba(140,110,60,0.6);
  font-style: italic;
  font-family: 'IM Fell English', serif;
}

.logboek-chapter-docs {
  margin: 12px 16px 4px 50px;
  padding-left: 14px;
  border-left: 2px solid rgba(196,168,122,0.2);
}
.logboek-docs-label {
  font-size: 9px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #9a7008;
  margin-bottom: 7px;
}

.logboek-search-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Detail modal additions */
.log-detail-citaat {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 15.5px;
  color: #7a5008;
  border-left: 3px solid #c8a840;
  padding: 10px 16px;
  margin: 12px 0;
  background: rgba(200,168,64,0.07);
  border-radius: 0 4px 4px 0;
  line-height: 1.65;
}
.log-detail-player-note { margin-top: 18px; }
.log-detail-note-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #9a7008;
  margin-bottom: 6px;
}
.log-detail-note-ta {
  width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  background: rgba(240,228,196,0.3);
  border: 1px solid rgba(196,168,122,0.4);
  border-radius: 6px;
  font-family: 'IM Fell English', serif;
  font-size: 13px;
  color: #2a1a08;
  line-height: 1.6;
  resize: vertical;
}
.log-detail-note-ta:focus { outline: none; border-color: #c8a840; }

/* ── Export tab ── */
.export-option-card {
  display: flex;
  gap: 16px;
  padding: 18px;
  background: rgba(196,168,122,0.07);
  border: 1px solid rgba(196,168,122,0.28);
  border-radius: 8px;
  margin-bottom: 14px;
}
.export-option-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 2px;
}
.export-option-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.export-option-title {
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-ink-bright);
}
.export-option-desc {
  font-size: 0.8rem;
  color: var(--color-ink-dim);
  line-height: 1.5;
}
.export-option-btn { align-self: flex-start; margin-top: 6px; }
.export-template-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.export-template-link {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 9px;
  border: 1px solid rgba(196,168,122,0.4);
  border-radius: 5px;
  color: var(--color-ink-dim);
  background: rgba(196,168,122,0.08);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.export-template-link:hover { background: rgba(196,168,122,0.2); color: var(--color-ink-bright); }
.export-import-label { cursor: pointer; }
.import-md-results { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.import-md-results.hidden { display: none; }
.import-md-row {
  font-size: 0.8rem;
  padding: 5px 10px;
  border-radius: 5px;
  font-family: 'Crimson Text', serif;
}
.import-md-loading { color: var(--color-ink-dim); font-style: italic; }
.import-md-ok { background: rgba(42,106,58,0.12); color: #2a6a3a; border: 1px solid rgba(42,106,58,0.2); }
.import-md-err { background: rgba(139,42,42,0.1); color: #8b2a2a; border: 1px solid rgba(139,42,42,0.2); }
.import-md-type {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-left: 6px;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Herberg ── */

/* Achtergrond op body — ontsnapt aan overflow:hidden van ancestors, bedekt altijd volledig scherm */
body.herberg-actief {
  background-image: var(--herberg-backdrop-url, url('/img/herberg-bg.jpeg')) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  background-color: #0e0804 !important;
}
body.herberg-actief::before { opacity: 0 !important; } /* parchment-texture uitschakelen */
/* Vaste gradient overlay — bedekt altijd het volledige scherm, ongeacht inhoudhoogte */
body.herberg-actief::after {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(18, 10, 4, 0.55) 0%,
    rgba(14, 8, 2, 0.70) 60%,
    rgba(10, 5, 1, 0.84) 100%);
  pointer-events: none;
  z-index: 0;
}
body.herberg-actief #app,
body.herberg-actief main { background: transparent !important; }
/* #app boven de overlay plaatsen */
body.herberg-actief #app { position: relative; z-index: 1; }
/* Header en navigatiebalk behouden hun solide achtergrond */
body.herberg-actief header { background: #e6d5ad !important; }
body.herberg-actief #section-tabs { background: #efe3c5 !important; }

#section-herberg {
  background: transparent;
  position: relative;
}
/* Geen aparte overlay meer op de sectie — de body::after dekt het volledig af */

.herberg-scene {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 32px 16px 40px;
  min-height: 100%;
  background-size: cover;
  background-position: center;
}
/* Tint-overlay voor dienst-backdrops */
.herberg-scene[style]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,5,1,0.38);
  z-index: 0;
}
.ursula-scene.herberg-scene[style]::before    { background: rgba(40,5,65,0.38); }
.gock-scene.herberg-scene[style]::before      { background: rgba(5,25,50,0.40); }
.tweespalt-scene.herberg-scene[style]::before { background: rgba(8,8,22,0.38); }
/* Content boven de overlay: positie + leesbaarheidspaneel */
.herberg-scene[style] .herberg-content {
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,0.52);
  border-radius: 12px;
  padding: 24px 20px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.herberg-content {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Portret */
.herberg-portrait-wrap { flex-shrink: 0; }
.herberg-portrait-round {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 3px solid rgba(212, 168, 67, 0.7);
  box-shadow: 0 0 0 6px rgba(212,168,67,0.12), 0 8px 28px rgba(0,0,0,0.6);
  display: block;
  transition: filter 0.6s ease, border-color 0.6s ease;
}
.herberg-portrait--weg {
  filter: grayscale(1) brightness(0.25);
  border-color: rgba(100,90,70,0.35);
}
.herberg-portrait-fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem; background: rgba(60,40,10,0.6);
}

/* Groettekst */
.herberg-groet {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(245, 225, 180, 0.97);
  text-align: center;
  line-height: 1.5;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5);
}

/* Teller */
.herberg-teller {
  font-size: 0.78rem;
  color: rgba(215,185,115,0.90);
  font-style: italic;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* Cooldown */
.herberg-cooldown-tekst {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(200,170,100,0.7);
  text-align: center;
  padding: 12px 20px;
  border: 1px solid rgba(196,168,122,0.25);
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
}

/* Zoekbalk */
.herberg-zoek-wrap { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.herberg-zoek-hint { font-size: 0.8rem; color: rgba(180,150,90,0.5); font-style: italic; text-align: center; padding: 8px 0; margin: 0; }
.herberg-search-wrap { position: relative; }
.herberg-search {
  width: 100%;
  padding: 10px 16px;
  background: rgba(30, 18, 6, 0.72);
  border: 1px solid rgba(196,168,122,0.45);
  border-radius: 8px;
  color: rgba(240,220,170,0.92);
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 0.92rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-sizing: border-box;
}
.herberg-search::placeholder { color: rgba(180,150,90,0.55); }
.herberg-search:focus { outline: none; border-color: rgba(212,168,67,0.65); background: rgba(30,18,6,0.85); }

/* Lijst */
.herberg-lijst { display: flex; flex-direction: column; gap: 5px; max-height: 260px; overflow-y: auto; }
.herberg-item-row { display: flex; align-items: center; gap: 6px; }
.herberg-item-row .herberg-item { flex: 1; min-width: 0; }
.herberg-item-card-btn {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(196,168,122,0.1);
  border: 1px solid rgba(196,168,122,0.28);
  border-radius: 6px;
  color: rgba(212,180,100,0.7);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.herberg-item-card-btn:hover {
  background: rgba(196,168,122,0.22);
  border-color: rgba(212,168,67,0.6);
  color: rgba(240,210,120,1);
}
.herberg-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  background: rgba(30, 18, 6, 0.62);
  border: 1px solid rgba(196,168,122,0.28);
  border-radius: 7px;
  cursor: pointer; text-align: left; width: 100%;
  transition: background 0.15s, border-color 0.15s;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.herberg-item:hover { background: rgba(60,38,10,0.80); border-color: rgba(212,168,67,0.6); }
.herberg-item-naam { font-size: 0.88rem; color: rgba(240,220,170,0.9); font-family: 'Crimson Text', serif; }
.herberg-item-type { font-size: 0.68rem; color: rgba(180,150,90,0.6); text-transform: uppercase; letter-spacing: 0.06em; }
.herberg-leeg { font-size: 0.82rem; color: rgba(180,150,90,0.55); font-style: italic; text-align: center; padding: 8px 0; }
.herberg-item--shuffle { border-style: dashed; border-color: rgba(196,168,122,0.18); background: transparent; justify-content: center; }
.herberg-item--shuffle .herberg-item-naam { color: rgba(180,150,90,0.6); font-style: italic; }
.herberg-item--shuffle:hover { background: rgba(196,168,122,0.08); border-color: rgba(196,168,122,0.35); }

/* Antwoord bubble */
.herberg-antwoord { width: 100%; }
.herberg-bubble {
  background: rgba(20, 12, 4, 0.78);
  border: 1px solid rgba(212,168,67,0.4);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.herberg-bubble-text {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 0.97rem;
  color: rgba(240,220,170,0.95);
  line-height: 1.65;
}
.herberg-bubble-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.herberg-bubble-naam { font-size: 0.73rem; color: rgba(180,150,90,0.65); }
.herberg-bubble-card-btn {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(196,168,122,0.1);
  border: 1px solid rgba(196,168,122,0.3);
  border-radius: 5px;
  color: rgba(196,168,122,0.7);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
}
.herberg-bubble-card-btn:hover {
  background: rgba(196,168,122,0.22);
  border-color: rgba(212,168,67,0.6);
  color: rgba(240,210,120,1);
}
.herberg-loading, .herberg-err { font-size: 0.85rem; color: rgba(180,150,90,0.6); font-style: italic; text-align: center; padding: 8px 0; }

/* ── Bladwijzer toast ── */
.bookmark-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(30,22,10,0.92);
  color: #f0c840;
  border: 1px solid rgba(196,168,122,0.4);
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-family: 'Cinzel', serif;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
  white-space: nowrap;
}
.bookmark-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Voorraad inladen paneel ── */
.voorraad-inladen-wrap { border-top: 1px solid var(--color-room-border); padding-top: 8px; }
#voorraad-inladen-panel { display: flex; gap: 8px; align-items: center; }
#voorraad-inladen-panel.hidden { display: none; }

/* ── Winkel uitverkocht ── */
.winkel-uitverkocht-rij { opacity: 0.55; }
.winkel-uitverkocht-naam { text-decoration: line-through; text-decoration-color: rgba(196,168,122,0.5); color: var(--color-ink-faint); }
.winkel-uitverkocht-cb { accent-color: var(--color-seal, #8b2e2e); cursor: pointer; width: 14px; height: 14px; }

/* ── Stapelbaar eigendom: give-picker ── */
.item-give-player-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--color-room-border); }
.item-give-player-row:last-child { border-bottom: none; }
.item-give-player-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.item-give-qty-input { width: 52px; padding: 4px 6px; background: var(--color-room-bg); border: 1px solid var(--color-room-border); border-radius: 4px; color: var(--color-ink-bright); font-size: 0.85rem; text-align: center; }
.item-give-confirm-btn { padding: 4px 10px; background: rgba(196,168,122,0.15); border: 1px solid rgba(196,168,122,0.4); border-radius: 4px; color: var(--color-ink-bright); cursor: pointer; font-size: 1rem; transition: background 0.15s; }
.item-give-confirm-btn:hover { background: rgba(196,168,122,0.3); }

/* ── Stapelbaar badge op kaart ── */
.item-owner-badge--stapelbaar { background: rgba(196,168,122,0.15); border: 1px solid rgba(196,168,122,0.4); border-radius: 4px; padding: 2px 6px; font-size: 0.72rem; color: var(--color-ink-medium); display: flex; align-items: center; gap: 4px; }

/* ── Stapelbaar: qty badge & controls in knapzak ── */
.player-item-qty-badge { position: absolute; bottom: 3px; right: 3px; background: rgba(196,168,122,0.85); color: #1a1410; font-size: 0.65rem; font-weight: 700; font-family: 'Cinzel', serif; padding: 1px 4px; border-radius: 3px; line-height: 1.4; pointer-events: none; }
.player-item-qty-controls { display: flex; justify-content: center; gap: 4px; padding: 2px 0; }
.player-item-qty-btn { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--color-room-elevated); border: 1px solid var(--color-room-border); border-radius: 4px; color: var(--color-ink-dim); font-size: 1rem; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.player-item-qty-btn:hover { color: var(--color-ink-bright); border-color: rgba(196,168,122,0.5); }
.player-dash-item-card--stapelbaar { padding-bottom: 2px; }

/* ── Bladwijzer-knop op kaartje ── */
.card-bookmark-btn {
  position: absolute;
  top: 6px;
  left: 6px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(196,168,122,0.5);
  font-size: 13px;
  line-height: 1;
  padding: 3px 5px;
  cursor: pointer;
  z-index: 10;
  transition: color 0.15s, background 0.15s;
}
.card-bookmark-btn:hover { color: #f0c840; background: rgba(0,0,0,0.12); }
.card-bookmark-btn--active { color: #f0c840 !important; }

/* ── Kaart-knop op locatie-cards ── */
.card-map-btn {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.70);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(196,168,122,0.35);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.15s, border-color 0.15s;
  z-index: 10;
}
.entity-card:hover .card-map-btn { opacity: 1; }
.card-map-btn:hover { background: rgba(196,147,10,0.35); border-color: rgba(196,147,10,0.7); }

/* ── "Toon op kaart" knop in detail-view ── */
.detail-map-link-wrap { margin-bottom: 14px; }
.detail-map-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-family: 'Cinzel', serif;
  color: var(--color-ink-medium);
  background: rgba(196,168,122,0.08);
  border: 1px solid rgba(196,168,122,0.3);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.detail-map-link-btn:hover {
  background: rgba(196,147,10,0.2);
  color: var(--color-ink-bright);
  border-color: rgba(196,147,10,0.5);
}

/* ── Pin highlight na fly-to ── */
@keyframes pin-fly-pulse {
  0%   { transform: scale(1);    box-shadow: 0 2px 8px rgba(0,0,0,0.7); border-color: rgba(196,160,60,0.8); }
  35%  { transform: scale(1.45); box-shadow: 0 0 18px rgba(196,147,10,0.9); border-color: rgba(255,200,60,1); }
  70%  { transform: scale(1.15); box-shadow: 0 0 10px rgba(196,147,10,0.5); border-color: rgba(196,160,60,0.8); }
  100% { transform: scale(1);    box-shadow: 0 2px 8px rgba(0,0,0,0.7); border-color: rgba(196,160,60,0.8); }
}
.map-pin.pin-fly-highlight { z-index: 30; }
.map-pin.pin-fly-highlight .pin-icon {
  animation: pin-fly-pulse 0.85s ease-in-out 3;
}
.map-pin.pin-fly-highlight .pin-label {
  opacity: 1;
  background: rgba(196,147,10,0.9);
  color: #100c04;
  font-weight: 600;
}

/* ── Bladwijzerlijst in spelerstabblad ── */
.player-bookmarks-list { display: flex; flex-direction: column; gap: 4px; }
.player-bookmark-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  cursor: pointer;
  background: rgba(196,168,122,0.08);
  border: 1px solid rgba(196,168,122,0.25);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s, border-color 0.15s;
}
.player-bookmark-item:hover { background: rgba(196,168,122,0.16); border-color: rgba(196,168,122,0.5); }
.player-bookmark-icon { font-size: 13px; flex-shrink: 0; }
.player-bookmark-name { flex: 1; font-size: 0.85rem; color: var(--color-ink-bright); font-family: 'Cinzel', serif; }
.player-bookmark-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(196,168,122,0.4);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.15s;
}
.player-bookmark-remove:hover { color: #e05555; }

/* DM: flavour die nog niet is uitgesproken — gedempt tonen */
.flavour-preview--ongespoken { opacity: 0.45; }
.flavour-scroll--ongespoken { opacity: 0.45; }

/* ── Berichten (DM panel) ── */
.bericht-badge { display: inline-flex; align-items: center; justify-content: center; background: #c0392b; color: #fff; font-size: 9px; font-weight: 700; border-radius: 999px; min-width: 16px; height: 16px; padding: 0 4px; line-height: 1; vertical-align: middle; }
.bericht-compose { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: rgba(196,168,122,0.06); border: 1px solid rgba(196,168,122,0.25); border-radius: 8px; }
.dm-textarea { width: 100%; padding: 6px 10px; background: var(--color-room-bg); border: 1px solid var(--color-room-border); border-radius: 6px; color: var(--color-ink-bright); font-size: 0.85rem; font-family: inherit; resize: vertical; min-height: 64px; }
.dm-textarea:focus { outline: none; border-color: rgba(196,168,122,0.7); }
/* ── NPC zoek-combobox in brief-formulier ── */
.post-npc-wrap { position: relative; }
.post-npc-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: #1e1710;
  border: 1px solid rgba(196,168,122,0.35);
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
.post-npc-dropdown.open { display: block; }
.post-npc-item {
  padding: 6px 10px;
  font-family: 'IM Fell English', serif;
  font-size: 12.5px;
  color: rgba(220,200,160,0.85);
  cursor: pointer;
  transition: background 0.1s;
}
.post-npc-item:hover { background: rgba(196,168,122,0.14); color: #d4b870; }
.post-npc-item--none { color: rgba(196,168,122,0.40); font-style: italic; }
.post-npc-item--none:hover { background: rgba(196,168,122,0.08); color: rgba(196,168,122,0.55); }

.bericht-status { font-size: 0.8rem; padding: 4px 0; }
.bericht-status--ok  { color: #3a9c3a; }
.bericht-status--err { color: #c0392b; }
.bericht-sjablonen { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-top: 1px solid rgba(196,168,122,0.2); margin-top: 2px; }
.bericht-sjabloon-row { display: flex; align-items: center; gap: 4px; }
.bericht-sjabloon-btn { flex: 1; text-align: left; padding: 5px 8px; background: rgba(196,168,122,0.08); border: 1px solid rgba(196,168,122,0.2); border-radius: 5px; font-size: 0.78rem; color: var(--color-ink-bright); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bericht-sjabloon-btn:hover { background: rgba(196,168,122,0.18); }
.bericht-sjabloon-del { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--color-ink-dim); cursor: pointer; font-size: 11px; border-radius: 4px; }
.bericht-sjabloon-del:hover { background: rgba(180,40,40,0.15); color: #c0392b; }
.bericht-history-group { border: 1px solid rgba(196,168,122,0.2); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.bericht-history-head { list-style: none; padding: 8px 12px; font-size: 0.82rem; font-family: 'Cinzel', serif; color: var(--color-ink-bright); cursor: pointer; display: flex; align-items: center; justify-content: space-between; background: rgba(196,168,122,0.08); }
.bericht-history-head::-webkit-details-marker { display: none; }
.bericht-history-count { font-size: 0.72rem; color: var(--color-ink-dim); font-family: inherit; }
.bericht-history-body { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }
.bericht-history-item { padding: 7px 10px; border-radius: 5px; background: rgba(196,168,122,0.05); border: 1px solid rgba(196,168,122,0.15); }
.bericht-history-unread { background: rgba(196,168,122,0.14); border-color: rgba(196,168,122,0.4); }
.bericht-history-tekst { font-size: 0.83rem; color: var(--color-ink-bright); display: block; margin-bottom: 3px; }
.bericht-history-meta { font-size: 0.72rem; color: var(--color-ink-dim); }

/* ── Berichten (speler panel) ── */
.speler-bericht-item { padding: 10px 12px; border-radius: 6px; background: rgba(196,168,122,0.06); border: 1px solid rgba(196,168,122,0.2); margin-bottom: 6px; cursor: pointer; transition: background 0.15s; }
.speler-bericht-item:hover { background: rgba(196,168,122,0.12); }
.speler-bericht-item--nieuw { background: rgba(196,168,122,0.18); border-color: rgba(196,168,122,0.55); }
.speler-bericht-tekst { font-family: 'IM Fell English', serif; font-style: italic; font-size: 0.93rem; color: var(--color-ink-bright); line-height: 1.55; display: block; margin-bottom: 4px; }
.speler-bericht-meta { font-size: 0.72rem; color: var(--color-ink-dim); }
.bericht-history-row { display: flex; align-items: flex-start; gap: 6px; }
.speler-bericht-row  { display: flex; align-items: flex-start; gap: 6px; }
.bericht-del-btn { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--color-ink-dim); cursor: pointer; font-size: 10px; border-radius: 4px; opacity: 0.5; transition: opacity 0.15s, background 0.15s; }
.bericht-del-btn:hover { opacity: 1; background: rgba(180,40,40,0.15); color: #c0392b; }

/* ── Spelersportret HP-visualisatie ── */

/* Buitenste wrapper voor de hero-avatar + SVG-ring */
.player-dash-avatar-outer {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.player-dash-avatar-outer .player-dash-avatar-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.player-dash-avatar-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.player-dash-avatar-wrap { position: relative; overflow: hidden; }

/* Vignette-overlay via ::after pseudo-element */
.player-dash-avatar-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity 0.6s ease, background 0.6s ease;
  opacity: 0;
}

/* Vol HP — geen effect */
.player-dash-avatar-wrap.avatar-hp-healthy::after { opacity: 0; }
.player-dash-avatar-wrap.avatar-hp-healthy .player-dash-avatar { filter: none; }

/* Licht verwond (>50%) — nauwelijks zichtbaar */
.player-dash-avatar-wrap.avatar-hp-lightly::after {
  opacity: 1;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(160,20,20,0.18) 100%);
}
.player-dash-avatar-wrap.avatar-hp-lightly .player-dash-avatar { filter: saturate(0.85); }

/* Verwond (>25%) — duidelijker rood randje + ontverzadiging */
.player-dash-avatar-wrap.avatar-hp-wounded::after {
  opacity: 1;
  background: radial-gradient(ellipse at center, transparent 25%, rgba(160,20,20,0.42) 100%);
}
.player-dash-avatar-wrap.avatar-hp-wounded .player-dash-avatar { filter: saturate(0.55) brightness(0.9); }

/* Bijna dood (<25%) — sterk rood vignette + pulserende animatie */
.player-dash-avatar-wrap.avatar-hp-critical::after {
  opacity: 1;
  background: radial-gradient(ellipse at center, transparent 10%, rgba(180,10,10,0.68) 100%);
  animation: avatar-pulse 2s ease-in-out infinite;
}
.player-dash-avatar-wrap.avatar-hp-critical .player-dash-avatar {
  filter: saturate(0.25) brightness(0.8);
}

/* Dood / 0 HP — volledig ontverzadigd + donker */
.player-dash-avatar-wrap.avatar-hp-down::after {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.72) 100%);
}
.player-dash-avatar-wrap.avatar-hp-down .player-dash-avatar {
  filter: grayscale(1) brightness(0.6);
}

@keyframes avatar-pulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1;   }
}

/* ═══════════════════════════════════════════════════════════════
   KLASSE-THEMA'S — spelerstabblad gepersonaliseerde look
   ═══════════════════════════════════════════════════════════════ */


/* ── Gedeeld: achtergrond-laag via ::before ── */
.player-dashboard[data-klasse]::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}
.player-dashboard[data-klasse] > * { position: relative; z-index: 1; }

/* ════════════════════════════════════════
   🧙 WIZARD
   ════════════════════════════════════════ */
.player-dashboard[data-klasse="wizard"] {
  background: #1e2a4a;
  color: #d0dcf8;
}
.player-dashboard[data-klasse="wizard"]::before {
  background:
    radial-gradient(1px 1px at 15%  8%, rgba(200,210,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 14%, rgba(200,210,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 67%  5%, rgba(180,190,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 18%, rgba(200,210,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 31%, rgba(180,190,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 28%, rgba(200,210,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at  5% 45%, rgba(180,190,255,0.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 42%, rgba(200,210,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 92%  3%, rgba(180,190,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 52%, rgba(200,210,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 81% 55%, rgba(180,190,255,0.65) 0%, transparent 100%),
    radial-gradient(2px 2px at 50% 20%, rgba(150,120,255,0.35) 0%, transparent 60%),
    linear-gradient(180deg, #122040 0%, #1e2a50 40%, #1e2a4a 100%);
}
.player-dashboard[data-klasse="wizard"] .player-dash-hero {
  border-bottom-color: rgba(100,80,220,0.4);
  background: linear-gradient(135deg, rgba(40,30,100,0.75) 0%, rgba(25,18,70,0.82) 100%);
  border-radius: 8px 8px 0 0;
  padding: 16px;
  margin: -4px -4px 0;
}
.player-dashboard[data-klasse="wizard"] .player-dash-name { color: #a8c0ff; }
.player-dashboard[data-klasse="wizard"] .player-dash-sub  { color: #8878d8; }
.player-dashboard[data-klasse="wizard"] .player-dash-section-title { color: #8090e0; border-bottom-color: rgba(80,60,200,0.3); }
.player-dashboard[data-klasse="wizard"] .player-dash-section { background: rgba(30,40,90,0.55); border-color: rgba(80,60,200,0.25); border-radius: 6px; }
.player-dashboard[data-klasse="wizard"] .player-ability-card { background: rgba(38,32,90,0.5); border-color: rgba(100,80,220,0.35); }
.player-dashboard[data-klasse="wizard"] .player-ability-label { color: #8090d8; }
.player-dashboard[data-klasse="wizard"] .player-dash-hp-bar.hp-healthy  { background: #5060c8; }
.player-dashboard[data-klasse="wizard"] .player-dash-hp-bar.hp-lightly  { background: #6850b8; }
.player-dashboard[data-klasse="wizard"] .player-dash-hp-bar.hp-wounded  { background: #8040a0; }
.player-dashboard[data-klasse="wizard"] .player-subtab.active { border-bottom-color: #8090e0; color: #a8c0ff; }

/* Runen-patroon bovenaan */
.player-dashboard[data-klasse="wizard"] .player-dash-hero::before {
  content: '✦  ᚹ  ✦  ᛟ  ✦  ᛉ  ✦';
  display: block;
  text-align: center;
  font-size: 9px;
  letter-spacing: 6px;
  color: rgba(120,100,220,0.4);
  margin-bottom: 10px;
}

/* ════════════════════════════════════════
   🥋 MONK
   ════════════════════════════════════════ */
.player-dashboard[data-klasse="monk"] {
  background: #182a1a;
  color: #d0e8d4;
}
.player-dashboard[data-klasse="monk"]::before {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 28px,
      rgba(60,110,60,0.07) 28px,
      rgba(60,110,60,0.07) 29px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 28px,
      rgba(60,110,60,0.07) 28px,
      rgba(60,110,60,0.07) 29px
    ),
    linear-gradient(180deg, #101810 0%, #1e3020 50%, #182a1a 100%);
}
.player-dashboard[data-klasse="monk"] .player-dash-hero {
  border-bottom-color: rgba(60,130,80,0.4);
  background: linear-gradient(135deg, rgba(25,50,28,0.8) 0%, rgba(18,38,20,0.88) 100%);
  border-radius: 8px 8px 0 0;
  padding: 16px;
  margin: -4px -4px 0;
}
.player-dashboard[data-klasse="monk"] .player-dash-name { color: #90c89a; }
.player-dashboard[data-klasse="monk"] .player-dash-sub  { color: #689e78; }
.player-dashboard[data-klasse="monk"] .player-dash-section-title { color: #6aaa78; border-bottom-color: rgba(60,130,80,0.3); }
.player-dashboard[data-klasse="monk"] .player-dash-section { background: rgba(25,48,28,0.55); border-color: rgba(60,130,80,0.25); border-radius: 6px; }
.player-dashboard[data-klasse="monk"] .player-ability-card { background: rgba(28,52,30,0.5); border-color: rgba(60,130,80,0.35); }
.player-dashboard[data-klasse="monk"] .player-ability-label { color: #70a07a; }
.player-dashboard[data-klasse="monk"] .player-dash-hp-bar.hp-healthy  { background: #2a8a4a; }
.player-dashboard[data-klasse="monk"] .player-dash-hp-bar.hp-lightly  { background: #508040; }
.player-dashboard[data-klasse="monk"] .player-dash-hp-bar.hp-wounded  { background: #7a8030; }
.player-dashboard[data-klasse="monk"] .player-subtab.active { border-bottom-color: #6aaa78; color: #90c89a; }

.player-dashboard[data-klasse="monk"] .player-dash-hero::before {
  content: '— 忍 —  — 禅 —  — 气 —';
  display: block;
  text-align: center;
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(60,130,60,0.45);
  margin-bottom: 10px;
}

/* ════════════════════════════════════════
   ⛪ CLERIC (TWILIGHT DOMAIN)
   ════════════════════════════════════════ */
.player-dashboard[data-klasse="cleric"] {
  background: #1a1535;
  color: #dcd2f5;
}
.player-dashboard[data-klasse="cleric"]::before {
  background:
    radial-gradient(1px 1px at 10%  6%, rgba(220,200,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 10%, rgba(255,220,180,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 62%  4%, rgba(220,200,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 15%, rgba(200,220,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 25%, rgba(255,210,160,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 22%, rgba(220,200,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 35%, rgba(200,180,255,0.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 32%, rgba(255,220,180,0.45) 0%, transparent 100%),
    radial-gradient(80% 30% at 50% 100%, rgba(80,50,130,0.35) 0%, transparent 100%),
    radial-gradient(60% 20% at 50%  90%, rgba(180,100,80,0.15) 0%, transparent 100%),
    linear-gradient(180deg, #0e0a20 0%, #1e1838 30%, #2a1e30 70%, #1a1535 100%);
}
.player-dashboard[data-klasse="cleric"] .player-dash-hero {
  border-bottom-color: rgba(130,90,200,0.4);
  background: linear-gradient(160deg, rgba(38,22,75,0.8) 0%, rgba(55,22,48,0.82) 60%, rgba(88,35,18,0.75) 100%);
  border-radius: 8px 8px 0 0;
  padding: 16px;
  margin: -4px -4px 0;
}
.player-dashboard[data-klasse="cleric"] .player-dash-name { color: #c8b8f0; }
.player-dashboard[data-klasse="cleric"] .player-dash-sub  { color: #9878c8; }
.player-dashboard[data-klasse="cleric"] .player-dash-section-title { color: #a890d8; border-bottom-color: rgba(130,90,200,0.3); }
.player-dashboard[data-klasse="cleric"] .player-dash-section { background: rgba(28,20,60,0.55); border-color: rgba(100,70,170,0.25); border-radius: 6px; }
.player-dashboard[data-klasse="cleric"] .player-ability-card { background: rgba(38,24,75,0.5); border-color: rgba(120,80,190,0.35); }
.player-dashboard[data-klasse="cleric"] .player-ability-label { color: #9078c8; }
.player-dashboard[data-klasse="cleric"] .player-dash-hp-bar.hp-healthy  { background: #7050c0; }
.player-dashboard[data-klasse="cleric"] .player-dash-hp-bar.hp-lightly  { background: #8860a8; }
.player-dashboard[data-klasse="cleric"] .player-dash-hp-bar.hp-wounded  { background: #a05080; }
.player-dashboard[data-klasse="cleric"] .player-subtab.active { border-bottom-color: #a890d8; color: #c8b8f0; }

.player-dashboard[data-klasse="cleric"] .player-dash-hero::before {
  content: '· · ☽  ☾ · ·';
  display: block;
  text-align: center;
  font-size: 9px;
  letter-spacing: 5px;
  color: rgba(160,120,220,0.45);
  margin-bottom: 10px;
}

/* ════════════════════════════════════════
   ✨ SORCERER
   ════════════════════════════════════════ */
.player-dashboard[data-klasse="sorcerer"] {
  background: #2a0e14;
  color: #f5c8d0;
}
.player-dashboard[data-klasse="sorcerer"]::before {
  background:
    radial-gradient(ellipse 80% 40% at 20% 10%, rgba(180,20,40,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 60% 30% at 80% 20%, rgba(120,0,80,0.20) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 50% 80%, rgba(160,10,30,0.15) 0%, transparent 70%),
    repeating-linear-gradient(
      72deg,
      transparent,
      transparent 40px,
      rgba(180,20,20,0.04) 40px,
      rgba(180,20,20,0.04) 41px
    ),
    linear-gradient(180deg, #15060a 0%, #2c0c14 50%, #2a0e14 100%);
}
.player-dashboard[data-klasse="sorcerer"] .player-dash-hero {
  border-bottom-color: rgba(180,30,50,0.4);
  background: linear-gradient(135deg, rgba(65,15,25,0.85) 0%, rgba(50,12,28,0.88) 100%);
  border-radius: 8px 8px 0 0;
  padding: 16px;
  margin: -4px -4px 0;
}
.player-dashboard[data-klasse="sorcerer"] .player-dash-name { color: #f0a0a8; }
.player-dashboard[data-klasse="sorcerer"] .player-dash-sub  { color: #c05870; }
.player-dashboard[data-klasse="sorcerer"] .player-dash-section-title { color: #d07080; border-bottom-color: rgba(180,30,50,0.3); }
.player-dashboard[data-klasse="sorcerer"] .player-dash-section { background: rgba(45,10,20,0.55); border-color: rgba(160,20,40,0.25); border-radius: 6px; }
.player-dashboard[data-klasse="sorcerer"] .player-ability-card { background: rgba(55,12,22,0.5); border-color: rgba(160,20,40,0.40); }
.player-dashboard[data-klasse="sorcerer"] .player-ability-label { color: #c06070; }
.player-dashboard[data-klasse="sorcerer"] .player-dash-hp-bar.hp-healthy  { background: #c02030; }
.player-dashboard[data-klasse="sorcerer"] .player-dash-hp-bar.hp-lightly  { background: #a02050; }
.player-dashboard[data-klasse="sorcerer"] .player-dash-hp-bar.hp-wounded  { background: #801840; }
.player-dashboard[data-klasse="sorcerer"] .player-subtab.active { border-bottom-color: #d07080; color: #f0a0a8; }

.player-dashboard[data-klasse="sorcerer"] .player-dash-hero::before {
  content: '⚡  ·  ·  ⚡';
  display: block;
  text-align: center;
  font-size: 9px;
  letter-spacing: 4px;
  color: rgba(200,40,40,0.45);
  margin-bottom: 10px;
}

/* ════════════════════════════════════════
   🎵 BARD
   ════════════════════════════════════════ */
.player-dashboard[data-klasse="bard"] {
  background: #281a04;
  color: #f5e0b0;
}
.player-dashboard[data-klasse="bard"]::before {
  background:
    radial-gradient(ellipse 70% 30% at 0% 0%, rgba(180,110,20,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(20,100,130,0.15) 0%, transparent 70%),
    repeating-linear-gradient(
      -30deg,
      transparent,
      transparent 18px,
      rgba(180,120,20,0.04) 18px,
      rgba(180,120,20,0.04) 19px
    ),
    linear-gradient(160deg, #1c1200 0%, #2e1e08 50%, #281a04 100%);
}
.player-dashboard[data-klasse="bard"] .player-dash-hero {
  border-bottom-color: rgba(180,120,20,0.4);
  background: linear-gradient(135deg, rgba(60,35,10,0.85) 0%, rgba(22,38,55,0.82) 100%);
  border-radius: 8px 8px 0 0;
  padding: 16px;
  margin: -4px -4px 0;
}
.player-dashboard[data-klasse="bard"] .player-dash-name { color: #f0c870; }
.player-dashboard[data-klasse="bard"] .player-dash-sub  { color: #a07e30; }
.player-dashboard[data-klasse="bard"] .player-dash-section-title { color: #c8a050; border-bottom-color: rgba(180,120,20,0.3); }
.player-dashboard[data-klasse="bard"] .player-dash-section { background: rgba(42,25,8,0.55); border-color: rgba(160,100,20,0.25); border-radius: 6px; }
.player-dashboard[data-klasse="bard"] .player-ability-card { background: rgba(50,32,10,0.5); border-color: rgba(160,100,20,0.35); }
.player-dashboard[data-klasse="bard"] .player-ability-label { color: #b08040; }
.player-dashboard[data-klasse="bard"] .player-dash-hp-bar.hp-healthy  { background: #c08020; }
.player-dashboard[data-klasse="bard"] .player-dash-hp-bar.hp-lightly  { background: #a07030; }
.player-dashboard[data-klasse="bard"] .player-dash-hp-bar.hp-wounded  { background: #807040; }
.player-dashboard[data-klasse="bard"] .player-subtab.active { border-bottom-color: #c8a050; color: #f0c870; }

.player-dashboard[data-klasse="bard"] .player-dash-hero::before {
  content: '♩  ♫  ♪  ♪  ♫  ♩';
  display: block;
  text-align: center;
  font-size: 10px;
  letter-spacing: 5px;
  color: rgba(180,130,30,0.45);
  margin-bottom: 10px;
}

/* ════════════════════════════════════════
   🗡️ ROGUE
   ════════════════════════════════════════ */
.player-dashboard[data-klasse="rogue"] {
  background: #18181e;
  color: #d4d4e0;
}
.player-dashboard[data-klasse="rogue"]::before {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(160,160,180,0.035) 10px,
      rgba(160,160,180,0.035) 11px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      rgba(160,160,180,0.025) 10px,
      rgba(160,160,180,0.025) 11px
    ),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(80,80,100,0.15) 0%, transparent 70%),
    linear-gradient(180deg, #0e0e14 0%, #18181e 50%, #18181e 100%);
}
.player-dashboard[data-klasse="rogue"] .player-dash-hero {
  border-bottom-color: rgba(120,120,150,0.35);
  background: linear-gradient(135deg, rgba(28,28,38,0.9) 0%, rgba(20,20,30,0.95) 100%);
  border-radius: 8px 8px 0 0;
  padding: 16px;
  margin: -4px -4px 0;
}
.player-dashboard[data-klasse="rogue"] .player-dash-name { color: #d0d0e0; }
.player-dashboard[data-klasse="rogue"] .player-dash-sub  { color: #8888a0; }
.player-dashboard[data-klasse="rogue"] .player-dash-section-title { color: #a0a0b8; border-bottom-color: rgba(100,100,130,0.3); }
.player-dashboard[data-klasse="rogue"] .player-dash-section { background: rgba(22,22,30,0.6); border-color: rgba(80,80,110,0.25); border-radius: 6px; }
.player-dashboard[data-klasse="rogue"] .player-ability-card { background: rgba(28,28,40,0.55); border-color: rgba(100,100,140,0.30); }
.player-dashboard[data-klasse="rogue"] .player-ability-label { color: #8080a0; }
.player-dashboard[data-klasse="rogue"] .player-dash-hp-bar.hp-healthy  { background: #5a5a80; }
.player-dashboard[data-klasse="rogue"] .player-dash-hp-bar.hp-lightly  { background: #707090; }
.player-dashboard[data-klasse="rogue"] .player-dash-hp-bar.hp-wounded  { background: #808070; }
.player-dashboard[data-klasse="rogue"] .player-subtab.active { border-bottom-color: #a0a0b8; color: #d0d0e0; }

.player-dashboard[data-klasse="rogue"] .player-dash-hero::before {
  content: '— ◆ — — ◆ —';
  display: block;
  text-align: center;
  font-size: 9px;
  letter-spacing: 5px;
  color: rgba(120,120,150,0.40);
  margin-bottom: 10px;
}

/* ── Gedeeld: klasse-thema overrides ── */

/* Decoratieve tekst (::before op hero) boven de avatar-rij plaatsen */
.player-dashboard[data-klasse] .player-dash-hero {
  flex-wrap: wrap;
}
.player-dashboard[data-klasse] .player-dash-hero::before {
  flex: 0 0 100%;
  order: -1;
  width: 100%;
}

/* Avatar */
.player-dashboard[data-klasse] .player-dash-avatar-wrap {
  border-color: rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25);
}

/* Profiel labels */
.player-dashboard[data-klasse] .ppf-label { color: rgba(255,255,255,0.55); }

/* Alle invoervelden */
.player-dashboard[data-klasse] .ppf-input,
.player-dashboard[data-klasse] .ppf-select,
.player-dashboard[data-klasse] .pcs-input,
.player-dashboard[data-klasse] .player-ability-score,
.player-dashboard[data-klasse] .player-spell-stat-input {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.92);
}
.player-dashboard[data-klasse] .player-ability-score {
  background: none;
  border-color: rgba(255,255,255,0.28);
}
.player-dashboard[data-klasse] .player-hp-current,
.player-dashboard[data-klasse] .player-hp-max {
  background: none;
  border-color: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.95);
}
.player-dashboard[data-klasse] .player-currency-input {
  background: none;
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.92);
}
.player-dashboard[data-klasse] .ppf-input::placeholder,
.player-dashboard[data-klasse] .pcs-input::placeholder,
.player-dashboard[data-klasse] .player-spell-stat-input::placeholder,
.player-dashboard[data-klasse] .player-hp-current::placeholder,
.player-dashboard[data-klasse] .player-hp-max::placeholder { color: rgba(255,255,255,0.35); }

/* Stats-balk (AC, Speed, Pass. Perc.) */
.player-dashboard[data-klasse] .pcs-item {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
}
.player-dashboard[data-klasse] .pcs-label { color: rgba(255,255,255,0.5); }
.player-dashboard[data-klasse] .pcs-value { color: rgba(255,255,255,0.92); }

/* HP */
.player-dashboard[data-klasse] .player-hp-sep { color: rgba(255,255,255,0.4); }
.player-dashboard[data-klasse] .player-dash-hp-note { color: rgba(255,255,255,0.5); }
.player-dashboard[data-klasse] .player-hp-btn-big {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.07);
}
.player-dashboard[data-klasse] .player-hp-btn-big:hover { background: rgba(255,255,255,0.16); }

/* Spell stat labels */
.player-dashboard[data-klasse] .player-spell-stat-label { color: rgba(255,255,255,0.5); }

/* Death saves */
.player-dashboard[data-klasse] .player-death-saves { border-top-color: rgba(255,255,255,0.1); }
.player-dashboard[data-klasse] .player-ds-label,
.player-dashboard[data-klasse] .player-ds-sep { color: rgba(255,255,255,0.5); }
.player-dashboard[data-klasse] .player-ds-dot { border-color: rgba(255,255,255,0.3); }

/* Ability score mod wrap */
.player-dashboard[data-klasse] .player-ability-mod-wrap { border-color: rgba(255,255,255,0.25); }
.player-dashboard[data-klasse] .player-ability-mod { color: rgba(255,255,255,0.8); }

/* Skills */
.player-dashboard[data-klasse] .player-skill-name { color: rgba(255,255,255,0.82); }
.player-dashboard[data-klasse] .player-skill-bonus { color: rgba(255,255,255,0.92); }
.player-dashboard[data-klasse] .player-skill-prof-btn { border-color: rgba(255,255,255,0.35); background: transparent; }
.player-dashboard[data-klasse] .player-skill-prof-btn.prof { background: rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.65); }
.player-dashboard[data-klasse] .player-skill-prof-btn.expert { background: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.9); }

/* Beurs (valuta) */
.player-dashboard[data-klasse] .player-currency-item {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
}
.player-dashboard[data-klasse] .player-currency-name { color: rgba(255,255,255,0.5); }

/* Subtabs — volledig override van perkament-stijl */
.player-dashboard[data-klasse] .player-subtabs {
  background: transparent;
  border-bottom: 2px solid rgba(255,255,255,0.18);
}
.player-dashboard[data-klasse] .player-subtab {
  background: transparent;
  border-color: rgba(255,255,255,0.18);
  border-bottom: none;
  color: rgba(255,255,255,0.55);
}
.player-dashboard[data-klasse] .player-subtab:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.82);
}
.player-dashboard[data-klasse] .player-subtab.active {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.28);
  border-bottom: 2px solid currentColor;
  margin-bottom: -2px;
  color: rgba(255,255,255,0.95);
}

/* Party portraits binnen het spelerstabblad */
.player-dashboard[data-klasse] .party-portrait-name { color: rgba(255,255,255,0.88); }
.player-dashboard[data-klasse] .party-portrait-sub  { color: rgba(255,255,255,0.55); }
.player-dashboard[data-klasse] .party-portrait-img,
.player-dashboard[data-klasse] .party-portrait-fallback { box-shadow: 0 0 0 2px rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.4); }

/* Klasse-icoon is klikbaar */
.player-dashboard[data-klasse] #player-class-icon-wrap { cursor: pointer; }

/* Zoekbalk (kenmerken & spreuken) */
.player-dashboard[data-klasse] .player-spell-search-input,
.player-dashboard[data-klasse] .herberg-search {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.92);
}
.player-dashboard[data-klasse] .player-spell-search-input::placeholder { color: rgba(255,255,255,0.4); }
.player-dashboard[data-klasse] .player-spell-results {
  background: #2a1e10;
  border-color: rgba(255,255,255,0.2);
}
.player-dashboard[data-klasse] .player-spell-result {
  color: rgba(255,255,255,0.85);
  border-bottom-color: rgba(255,255,255,0.1);
}
.player-dashboard[data-klasse] .player-spell-result:hover { background: rgba(255,255,255,0.1); }
.player-dashboard[data-klasse] .player-spell-result-meta { color: rgba(255,255,255,0.45); }
.player-dashboard[data-klasse] .player-spell-result-pin { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.7); }

/* Accordion: kenmerken & spreuken */
.player-dashboard[data-klasse] .player-spell-accordion,
.player-dashboard[data-klasse] .player-trait-accordion { border-bottom-color: rgba(255,255,255,0.12); }
.player-dashboard[data-klasse] .player-pinned-spell-summary:hover { background: rgba(255,255,255,0.07); }
.player-dashboard[data-klasse] .player-pinned-spell-chevron { color: rgba(255,255,255,0.45); }
.player-dashboard[data-klasse] .player-pinned-spell-name { color: rgba(255,255,255,0.92); }
.player-dashboard[data-klasse] .player-pinned-spell-name:hover { color: #fff; }
.player-dashboard[data-klasse] .player-pinned-spell-meta { color: rgba(255,255,255,0.5); }
.player-dashboard[data-klasse] .player-pinned-spell-del { color: rgba(255,255,255,0.4); }
.player-dashboard[data-klasse] .player-pinned-spell-del:hover { color: #ff7070; }
.player-dashboard[data-klasse] .player-spell-accordion-body {
  background: rgba(0,0,0,0.2);
  border-top-color: rgba(255,255,255,0.1);
}
.player-dashboard[data-klasse] .player-spell-desc,
.player-dashboard[data-klasse] .player-spell-meta2 { color: rgba(255,255,255,0.75); }
.player-dashboard[data-klasse] .player-spell-loading-text,
.player-dashboard[data-klasse] .player-spell-err { color: rgba(255,255,255,0.4); }
.player-dashboard[data-klasse] .player-dash-empty { color: rgba(255,255,255,0.4); }

/* Proficiencies invoervelden */
.player-dashboard[data-klasse] .player-prof-input {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.88);
}
.player-dashboard[data-klasse] .player-prof-input::placeholder { color: rgba(255,255,255,0.3); }
.player-dashboard[data-klasse] .player-prof-label { color: rgba(255,255,255,0.5); }

/* Kenmerken add-btn & custom form */
.player-dashboard[data-klasse] .player-trait-add-btn {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.07);
}
.player-dashboard[data-klasse] .player-trait-add-btn:hover {
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.9);
}
.player-dashboard[data-klasse] .player-trait-custom-form {
  background: rgba(0,0,0,0.2);
  border-color: rgba(255,255,255,0.15);
}
.player-dashboard[data-klasse] .player-trait-form-input,
.player-dashboard[data-klasse] .player-trait-form-ta {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.88);
}
.player-dashboard[data-klasse] .player-trait-form-input::placeholder,
.player-dashboard[data-klasse] .player-trait-form-ta::placeholder { color: rgba(255,255,255,0.35); }

/* Trait uses dots config */
.player-dashboard[data-klasse] .trait-uses-label { color: rgba(255,255,255,0.55); }
.player-dashboard[data-klasse] .trait-uses-count,
.player-dashboard[data-klasse] .trait-uses-count-cfg { color: rgba(255,255,255,0.7); }

/* Tracker naam */
.player-dashboard[data-klasse] .player-tracker-name-input {
  color: rgba(255,255,255,0.88);
  border-bottom-color: rgba(255,255,255,0.2);
}
.player-dashboard[data-klasse] .player-tracker-name-input:focus {
  background: rgba(255,255,255,0.1);
  border-bottom-color: rgba(255,255,255,0.5);
}

/* Slot add / adj knoppen */
.player-dashboard[data-klasse] .player-dash-slot-add-btn,
.player-dashboard[data-klasse] .player-dash-add-item-btn {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.75);
}
.player-dashboard[data-klasse] .player-dash-slot-add-btn:hover,
.player-dashboard[data-klasse] .player-dash-add-item-btn:hover {
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
}

/* Invoervelden in knapzak / items */
.player-dashboard[data-klasse] .player-dash-add-item-input,
.player-dashboard[data-klasse] .player-dash-add-item-note {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.88);
}
.player-dashboard[data-klasse] .player-dash-add-item-input::placeholder,
.player-dashboard[data-klasse] .player-dash-add-item-note::placeholder { color: rgba(255,255,255,0.35); }

/* ── Skill aanpassing: ▲▼ pijltjes ── */
.skill-adj-ctrl { display: flex; flex-direction: column; align-items: center; gap: 0; margin-left: auto; flex-shrink: 0; }
.skill-adj-arrow { background: none; border: none; cursor: pointer; color: var(--color-ink-dim); font-size: 0.55rem; padding: 0 2px; line-height: 1.1; border-radius: 2px; transition: color 0.15s, background 0.15s; }
.skill-adj-arrow:hover { color: var(--color-ink-bright); background: rgba(196,168,122,0.15); }
.skill-adj-val { font-size: 0.72rem; min-width: 18px; text-align: center; font-weight: 700; }
.skill-adj-val.buff { color: #5aab6a; }
.skill-adj-val.nerf { color: #c0392b; }
.skill-bonus--buff { color: #5aab6a !important; font-weight: 700; }
.skill-bonus--nerf { color: #c0392b !important; font-weight: 700; }

/* ── Proficiënties ── */
.player-profs-grid { display: flex; flex-direction: column; gap: 8px; }
.player-prof-row { display: flex; flex-direction: column; gap: 3px; }
.player-prof-label { font-size: 0.72rem; color: var(--color-ink-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.player-prof-input { padding: 5px 10px; background: var(--color-room-bg); border: 1px solid rgba(196,168,122,0.25); border-radius: 6px; color: var(--color-ink-bright); font-size: 0.83rem; }
.player-prof-input:focus { border-color: rgba(196,168,122,0.55); outline: none; }

/* ── Trait type badge ── */
.player-trait-type-badge { font-size: 0.65rem; padding: 1px 5px; border-radius: 3px; background: rgba(196,168,122,0.18); color: var(--color-ink-dim); margin-left: 4px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Gedeelde beurs badge ── */
.currency-shared-badge { font-size: 0.72rem; padding: 2px 7px; border-radius: 10px; background: rgba(100,180,100,0.18); color: #7bc47b; border: 1px solid rgba(100,180,100,0.35); margin-left: 8px; font-weight: 600; }

/* ── Trait uses bolletjes ── */
.trait-uses-dots { display: inline-flex; align-items: center; gap: 3px; margin: 0 6px; }
.trait-uses-count { font-size: 0.7rem; color: var(--color-ink-dim); margin-left: 3px; }

/* ── Trait uses configuratie (in accordion-body) ── */
.trait-uses-config { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(196,168,122,0.2); }
.trait-uses-label { font-size: 0.72rem; color: var(--color-ink-dim); margin-right: 2px; }
.trait-uses-count-cfg { font-size: 0.8rem; font-weight: 700; color: var(--color-ink-bright); min-width: 20px; text-align: center; }

/* ── Trait persoonlijke opmerking ── */
.trait-note-section { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(196,168,122,0.2); }
.trait-note-display { margin-bottom: 6px; }
.trait-note-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #c0392b;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.trait-note-display { display: flex; align-items: flex-start; gap: 6px; }
.trait-note-text {
  flex: 1;
  font-size: 0.82rem;
  font-style: italic;
  font-weight: 700;
  color: #c0392b;
  margin: 0;
  line-height: 1.5;
  padding-left: 8px;
  border-left: 3px solid #e05555;
}
.trait-note-actions { display: flex; flex-direction: row; gap: 2px; flex-shrink: 0; align-items: center; }
.trait-note-icon-btn {
  background: none;
  border: none;
  font-size: 13px;
  cursor: pointer;
  padding: 1px 3px;
  opacity: 0.5;
  transition: opacity 0.15s;
  line-height: 1;
}
.trait-note-icon-btn:hover { opacity: 1; }
.trait-note-icon-del:hover { filter: brightness(0.7) sepia(1) hue-rotate(-10deg); }
.trait-note-form { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.trait-note-ta {
  width: 100%;
  font-size: 0.8rem;
  font-style: italic;
  color: #c0392b;
  background: rgba(192,57,43,0.05);
  border: 1px solid rgba(192,57,43,0.3);
  border-radius: 4px;
  padding: 6px 8px;
  resize: vertical;
  min-height: 56px;
  font-family: 'IM Fell English', serif;
  box-sizing: border-box;
}
.trait-note-ta::placeholder { color: rgba(192,57,43,0.4); font-style: italic; }
.trait-note-form-btns { display: flex; gap: 6px; }
.trait-note-save, .trait-note-cancel {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  transition: background 0.15s;
}
.trait-note-save { background: #c0392b; border-color: #a93226; color: #fff; }
.trait-note-save:hover { background: #a93226; }
.trait-note-cancel { background: transparent; border-color: rgba(196,168,122,0.4); color: var(--color-ink-dim); }
.trait-note-cancel:hover { background: rgba(196,168,122,0.1); }

/* ── Custom spell button (in zoekresultaten) ── */
.player-spell-custom-btn { background: none; border: 1px solid rgba(196,148,10,0.5); border-radius: 4px; color: #c4930a; font-size: 0.78rem; padding: 2px 8px; cursor: pointer; margin-left: 6px; }
.player-spell-custom-btn:hover { background: rgba(196,148,10,0.12); }

/* ═══════════════════════════════════════════════════════
   SPELERSTABBLAD — VERBETERINGEN (visueel & inhoudelijk)
   ═══════════════════════════════════════════════════════ */

/* ── HP-ring op het eigen portret ── */
.party-hp-ring { overflow: visible; }
.party-hp-ring-bg  { fill: none; stroke: rgba(255,255,255,0.15); stroke-width: 5; }
.party-hp-ring-fill { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray 0.4s ease; }
.party-hp-ring-hp-healthy  { stroke: #4caf50; }
.party-hp-ring-hp-lightly  { stroke: #8bc34a; }
.party-hp-ring-hp-wounded  { stroke: #ff9800; }
.party-hp-ring-hp-critical { stroke: #f44336; }
.party-hp-ring-hp-down     { stroke: #555; }

/* ── Spreukenslot dots — vrije dots gloeien ── */
.spell-slot-dot.free {
  box-shadow: 0 0 0 0 rgba(196,168,122,0.7);
  animation: slot-pulse 2.5s infinite;
}
@keyframes slot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(196,168,122,0.5); }
  50%  { box-shadow: 0 0 0 4px rgba(196,168,122,0); }
  100% { box-shadow: 0 0 0 0   rgba(196,168,122,0); }
}

/* ── Concentratie & ritueel badges ── */
.spell-badge {
  font-size: 9px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}
.spell-badge--conc   { background: rgba(100,60,200,0.18); color: #8860d0; border: 1px solid rgba(100,60,200,0.3); }
.spell-badge--ritual { background: rgba(20,120,80,0.18);  color: #2a9060; border: 1px solid rgba(20,120,80,0.3); }

/* ── Level-filter chips boven spreukenlijst ── */
.spell-level-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 4px;
}
.spell-lvl-chip {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid rgba(196,168,122,0.4);
  background: transparent;
  color: #8a7050;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.spell-lvl-chip:hover  { background: rgba(196,168,122,0.15); color: #3a2410; }
.spell-lvl-chip--active { background: rgba(196,168,122,0.28); color: #3a2410; border-color: #9a7008; }

/* ── Spell level group header ── */
.spell-level-group { margin-top: 4px; }
.spell-level-group-header {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b09060;
  padding: 6px 4px 3px;
  border-bottom: 1px solid rgba(196,168,122,0.3);
  margin-bottom: 2px;
}

/* ── Item categorie-label ── */
.item-cat-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a7050;
  margin: 10px 0 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(196,168,122,0.25);
}
.item-cat-label:first-child { margin-top: 2px; }

/* ── Hero collapse knop ── */
.player-hero-collapse-btn {
  display: inline-block;
  margin-top: 6px;
  background: none;
  border: 1px solid rgba(196,168,122,0.3);
  border-radius: 4px;
  color: rgba(196,168,122,0.6);
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}
.player-hero-collapse-btn:hover { color: rgba(196,168,122,0.9); }

/* data-klasse varianten voor spell-badge, level chips */
.player-dashboard[data-klasse] .spell-lvl-chip { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.55); }
.player-dashboard[data-klasse] .spell-lvl-chip:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
.player-dashboard[data-klasse] .spell-lvl-chip--active { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.95); border-color: rgba(255,255,255,0.5); }
.player-dashboard[data-klasse] .spell-level-group-header { color: rgba(255,255,255,0.45); border-bottom-color: rgba(255,255,255,0.12); }
.player-dashboard[data-klasse] .item-cat-label { color: rgba(255,255,255,0.45); border-bottom-color: rgba(255,255,255,0.12); }
.player-dashboard[data-klasse] .player-hero-collapse-btn { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.3); }
.player-dashboard[data-klasse] .player-hero-collapse-btn:hover { color: rgba(255,255,255,0.7); }

/* ── Klasselook: Weapons & Damage Cantrips ── */
.player-dashboard[data-klasse] .player-weapons-header { border-bottom-color: rgba(255,255,255,0.15); }
.player-dashboard[data-klasse] .player-weapons-header span { color: rgba(255,255,255,0.45); }
.player-dashboard[data-klasse] .player-weapon-row { border-bottom-color: rgba(255,255,255,0.08); }
.player-dashboard[data-klasse] .pw-input {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
}
.player-dashboard[data-klasse] .pw-input:focus {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.5);
}
.player-dashboard[data-klasse] .pw-input::placeholder { color: rgba(255,255,255,0.3); }
.player-dashboard[data-klasse] .pw-del-btn { color: rgba(255,255,255,0.35); }
.player-dashboard[data-klasse] .pw-del-btn:hover { color: #ff7070; opacity: 1; }
.player-dashboard[data-klasse] .player-weapon-add-btn {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
}
.player-dashboard[data-klasse] .player-weapon-add-btn:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.55);
}
.player-dashboard[data-klasse] .player-weapons-empty { color: rgba(255,255,255,0.4); }

/* ── Klasselook: Jouw voorwerpen (knapzak) ── */
.player-dashboard[data-klasse] .player-dash-item-card {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.18);
}
.player-dashboard[data-klasse] .player-dash-item-card:hover { border-color: rgba(255,255,255,0.4); }
.player-dashboard[data-klasse] .player-dash-item-img-wrap { background: rgba(0,0,0,0.25); }
.player-dashboard[data-klasse] .player-dash-item-fallback { background: rgba(0,0,0,0.2); color: rgba(255,255,255,0.3); }
.player-dashboard[data-klasse] .player-dash-item-name { color: rgba(255,255,255,0.9); }
.player-dashboard[data-klasse] .player-dash-simple-item {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}
.player-dashboard[data-klasse] .player-dash-simple-name { color: rgba(255,255,255,0.92); }
.player-dashboard[data-klasse] .player-dash-simple-note { color: rgba(255,255,255,0.5); }
.player-dashboard[data-klasse] .player-dash-simple-del { color: rgba(255,255,255,0.35); }
.player-dashboard[data-klasse] .player-dash-simple-del:hover { color: #ff7070; }

/* ── Klasselook: Initiatievolgorde ── */
.player-dashboard[data-klasse] .player-dash-init-row {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}
.player-dashboard[data-klasse] .player-dash-init-row.player-dash-init-active {
  background: rgba(255,255,255,0.15);
  border-left-color: rgba(255,255,255,0.7);
}
.player-dashboard[data-klasse] .player-dash-init-row.player-dash-init-me {
  border-left-color: rgba(255,255,255,0.6);
}
.player-dashboard[data-klasse] .player-dash-init-num { color: rgba(255,255,255,0.4); }
.player-dashboard[data-klasse] .player-dash-init-name { color: rgba(255,255,255,0.9); }
.player-dashboard[data-klasse] .player-dash-init-you { color: rgba(255,255,255,0.45); }
.player-dashboard[data-klasse] .player-dash-init-arrow { color: rgba(255,255,255,0.8); }

/* ── Klasselook: Wild Magic Surge ── */
.player-dashboard[data-klasse] .wild-magic-result {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}
.player-dashboard[data-klasse] .wild-magic-roll { color: rgba(255,255,255,0.55); }
.player-dashboard[data-klasse] .wild-magic-text { color: rgba(255,255,255,0.9); }

/* ── Klasselook: Geheime berichten ── */
.player-dashboard[data-klasse] .speler-bericht-item {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
}
.player-dashboard[data-klasse] .speler-bericht-item:hover { background: rgba(255,255,255,0.13); }
.player-dashboard[data-klasse] .speler-bericht-item--nieuw {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.35);
}
.player-dashboard[data-klasse] .speler-bericht-tekst { color: rgba(255,255,255,0.9); }
.player-dashboard[data-klasse] .speler-bericht-meta { color: rgba(255,255,255,0.4); }
.player-dashboard[data-klasse] .bericht-del-btn { color: rgba(255,255,255,0.3); }
.player-dashboard[data-klasse] .bericht-del-btn:hover { color: #ff7070; opacity: 1; background: rgba(255,80,80,0.12); }

/* ── Spelers-tab (DM) ── */
.spelers-tab-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.spelers-tab-header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(196,168,122,0.08); border-bottom: 1px solid rgba(196,168,122,0.2); flex-shrink: 0; }
.spelers-tab-label { font-size: 0.8rem; color: var(--color-ink-dim); font-style: italic; }
.spelers-tab-selector { display: flex; gap: 6px; flex-wrap: wrap; }
.spelers-tab-btn { padding: 4px 14px; border-radius: 20px; border: 1px solid rgba(196,168,122,0.35); background: transparent; color: var(--color-ink-medium); font-size: 0.82rem; cursor: pointer; transition: background 0.15s, color 0.15s; }
.spelers-tab-btn:hover { background: rgba(196,168,122,0.18); color: var(--color-ink-bright); }
.spelers-tab-btn--active { background: rgba(196,147,10,0.18); border-color: rgba(196,147,10,0.5); color: var(--color-ink-bright); font-weight: 600; }
.spelers-dashboard-wrap { flex: 1; overflow-y: auto; min-height: 0; }

/* ── Akte-editor: bannerafbeelding thumbnails ── */
.banner-img-thumb {
  width: 72px;
  height: 54px;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s, border-color 0.15s;
  padding: 0;
}
.banner-img-thumb:hover { opacity: 1; }
.banner-img-thumb--sel { border-color: rgba(196,147,10,0.9); opacity: 1; }

/* ── Shop item tooltip ── */
.shop-item-tooltip {
  position: absolute;
  z-index: 9999;
  max-width: 280px;
  padding: 8px 12px;
  background: var(--color-room-elevated, #1e1a14);
  border: 1px solid rgba(196,168,122,0.4);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  font-family: 'IM Fell English', 'Crimson Text', serif;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-ink-medium, #c4a87a);
  line-height: 1.5;
  pointer-events: none;
}
.shop-item-tooltip.hidden { display: none; }

/* ── Shop verbeteringen ── */

/* Thumbnail in voorraadtabel */
.shop-item-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(196,168,122,0.3);
  flex-shrink: 0;
}

/* Quantity input */
.shop-qty-input {
  width: 48px;
  padding: 3px 6px;
  background: var(--color-room-bg);
  border: 1px solid rgba(196,168,122,0.35);
  border-radius: 4px;
  color: var(--color-ink-bright);
  font-size: 0.82rem;
  text-align: center;
}
.shop-qty-input:focus { outline: none; border-color: rgba(196,168,122,0.7); }

/* Korting badge bij prijs */
.shop-korting-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  background: rgba(34,100,54,0.15);
  border: 1px solid rgba(34,100,54,0.4);
  border-radius: 3px;
  font-size: 0.7rem;
  color: #1a7a40;
  font-style: normal;
  font-family: 'Cinzel', serif;
}
.shop-korting-badge--malus {
  background: rgba(139,42,42,0.12);
  border-color: rgba(139,42,42,0.3);
  color: #8b2a2a;
}

/* Korting banner bovenaan voorraad */
.shop-korting-banner {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-style: italic;
  margin-bottom: 10px;
}
.shop-korting-banner--ok { background: rgba(34,100,54,0.10); border: 1px solid rgba(34,100,54,0.28); color: #1a5c30; }
.shop-korting-banner--malus { background: rgba(139,42,42,0.08); border: 1px solid rgba(139,42,42,0.25); color: #8b2a2a; }

/* Sfeer-sectie */
.shop-sfeer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(196,168,122,0.2);
}
.shop-sfeer-img {
  width: 72px;
  height: 96px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid rgba(196,168,122,0.35);
  flex-shrink: 0;
}
.shop-sfeer-tekst {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--color-ink-medium);
  line-height: 1.65;
  margin: 0;
}

/* Onderhandelen */
.shop-onderhandel-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(196,168,122,0.2);
}
.shop-onderhandel-btn {
  padding: 5px 14px;
  background: rgba(196,168,122,0.08);
  border: 1px solid rgba(196,168,122,0.35);
  border-radius: 5px;
  color: var(--color-ink-medium);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.shop-onderhandel-btn:hover { background: rgba(196,168,122,0.16); border-color: rgba(196,168,122,0.6); }
.shop-onderhandel-panel {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.shop-cha-input {
  padding: 3px 6px;
  background: var(--color-room-bg);
  border: 1px solid rgba(196,168,122,0.35);
  border-radius: 4px;
  color: var(--color-ink-bright);
  font-size: 0.85rem;
  text-align: center;
}
.shop-cha-input:focus { outline: none; border-color: rgba(196,168,122,0.7); }
.shop-onderhandel-roll-btn {
  padding: 4px 12px;
  background: rgba(196,147,10,0.12);
  border: 1px solid rgba(196,147,10,0.4);
  border-radius: 4px;
  color: var(--color-ink-bright);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s;
}
.shop-onderhandel-roll-btn:hover { background: rgba(196,147,10,0.22); }
.shop-onderhandel-annuleer {
  background: none;
  border: none;
  color: var(--color-ink-dim);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 6px;
}
.shop-onderhandel-annuleer:hover { color: var(--color-ink-bright); }
.shop-onderhandel-result {
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 5px;
  font-size: 0.82rem;
  font-style: italic;
}
.shop-onderhandel-loading { color: var(--color-ink-dim); }
.shop-onderhandel-result--ok { background: rgba(34,100,54,0.10); border: 1px solid rgba(34,100,54,0.28); color: #1a5c30; }
.shop-onderhandel-result--fout { background: rgba(139,42,42,0.08); border: 1px solid rgba(139,42,42,0.25); color: #8b2a2a; }

/* ══ Tweespalt / Gokkantoor ══════════════════════════════════════════════════ */

.ts-content { max-width: 640px; margin: 0 auto; padding: 20px 16px; }

.ts-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.ts-portrait-fallback {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(58,30,10,0.55);
  border: 2px solid rgba(196,168,122,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.ts-beurs {
  font-size: 0.9rem;
  color: var(--color-ink-dim);
  margin-top: 4px;
}

.ts-lening-banner {
  background: rgba(139,42,42,0.10);
  border: 1px solid rgba(139,42,42,0.30);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.82rem;
  margin-bottom: 16px;
  color: #7a2020;
}
.ts-lening-sub { opacity: .7; font-style: italic; }

.ts-sectie-label {
  font-family: var(--font-cinzel);
  font-size: 0.72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-ink-dim);
  margin: 18px 0 8px;
  border-bottom: 1px solid rgba(196,168,122,0.25);
  padding-bottom: 4px;
}
.ts-sectie-label--afgerond { opacity: .65; }

.ts-event {
  background: rgba(58,30,10,0.25);
  border: 1px solid rgba(196,168,122,0.28);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}
.ts-event--afgerond { opacity: .7; }

.ts-event-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ts-event-type {
  font-size: 0.72rem;
  opacity: .6;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ts-event-naam {
  font-family: var(--font-cinzel);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gold);
  flex: 1;
}
.ts-event-timer {
  font-size: 0.75rem;
  opacity: .55;
  font-style: italic;
}

.ts-opties { display: flex; flex-direction: column; gap: 8px; }

.ts-optie {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(196,168,122,0.2);
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color .15s;
}
.ts-optie--gekozen {
  border-color: rgba(184,134,11,0.5);
  background: rgba(184,134,11,0.07);
}

.ts-optie-top {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ts-optie-naam {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
}
.ts-optie-kans {
  font-size: 0.78rem;
  opacity: .6;
}
.ts-optie-payout {
  font-size: 0.78rem;
  color: var(--color-gold);
}
.ts-optie-ingezet {
  font-size: 0.8rem;
  color: var(--color-gold);
  font-style: italic;
}

.ts-inzet-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-inzet-velden { display: flex; align-items: center; gap: 4px; }
.ts-inzet-input {
  width: 56px;
  padding: 4px 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(196,168,122,0.35);
  border-radius: 4px;
  color: var(--color-ink-bright);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-align: right;
}
.ts-inzet-input:focus { outline: none; border-color: rgba(184,134,11,0.6); }
.ts-inzet-label { font-size: 0.78rem; opacity: .6; }

.ts-wedden-btn {
  padding: 5px 14px;
  background: rgba(184,134,11,0.18);
  border: 1px solid rgba(184,134,11,0.45);
  border-radius: 5px;
  color: var(--color-gold);
  font-family: var(--font-cinzel);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background .15s;
}
.ts-wedden-btn:hover { background: rgba(184,134,11,0.30); }

.ts-uitslag {
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.ts-uitslag--gewonnen { background: rgba(34,100,54,0.14); border: 1px solid rgba(34,140,70,0.45); }
.ts-uitslag--verloren { background: rgba(130,25,25,0.10); border: 1px solid rgba(180,55,55,0.40); }
.ts-uitslag-label { opacity: .6; font-size: 0.78rem; }
.ts-uitslag-winst { color: #2a7a3a; font-weight: 600; font-size: 0.85rem; }
.ts-uitslag-verlies { color: #8b2020; font-size: 0.82rem; font-style: italic; }

.ts-npc-lijst {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(196,168,122,0.15);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ts-npc-row { display: flex; gap: 8px; font-size: 0.78rem; opacity: .55; }
.ts-npc-naam { font-style: italic; }
.ts-npc-optie { opacity: .8; }

.ts-taevin-hoofd { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.ts-taevin-portret { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid rgba(180,60,60,0.55); flex-shrink: 0; }
.ts-taevin-bericht { flex: 1; }
.ts-taevin-bubble {
  background: rgba(58,20,10,0.45);
  border: 1px solid rgba(139,42,42,0.45);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 8px;
}
.ts-taevin-tekst {
  font-size: 0.9rem;
  color: var(--color-ink-bright);
  margin-bottom: 6px;
  line-height: 1.5;
}
.ts-taevin-sub {
  font-size: 0.82rem;
  opacity: .75;
  margin-bottom: 10px;
}
.ts-taevin-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }

.ts-btn {
  padding: 6px 14px;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--font-cinzel);
  font-size: 0.78rem;
  border: 1px solid transparent;
  transition: background .15s;
}
.ts-btn--gevaar {
  background: rgba(139,42,42,0.2);
  border-color: rgba(139,42,42,0.5);
  color: #c05050;
}
.ts-btn--gevaar:hover { background: rgba(139,42,42,0.35); }
.ts-btn--ghost {
  background: none;
  border-color: rgba(196,168,122,0.35);
  color: var(--color-ink-dim);
}
.ts-btn--ghost:hover { background: rgba(196,168,122,0.1); }

/* ══ Diensten dropdown ═══════════════════════════════════════════════════════ */

.diensten-tab { position: relative; }
.diensten-arrow { font-size: 0.7rem; margin-left: 2px; opacity: .7; }

/* ══ Madame Ursula ═══════════════════════════════════════════════════════════ */

.ursula-scene { --herberg-tint: rgba(60,10,90,0.55); }

.ursula-portret-fallback {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(60,10,90,0.6);
  border: 2px solid rgba(150,80,220,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.ursula-bubble { border-color: rgba(120,60,200,0.35) !important; background: rgba(60,10,90,0.12) !important; }

/* ══ De Gock ═════════════════════════════════════════════════════════════════ */

.gock-scene { --herberg-tint: rgba(10,40,70,0.6); }

.gock-portret-fallback {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(10,40,70,0.6);
  border: 2px solid rgba(60,120,200,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.gock-dossier {
  background: rgba(245,235,200,0.08);
  border: 1px solid rgba(196,168,122,0.35);
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0;
}
.gock-dossier-head {
  font-family: var(--font-cinzel);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(196,168,122,0.2);
  padding-bottom: 6px;
}
.gock-dossier-tekst {
  font-size: 0.92rem;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 10px;
}
.gock-kaartje-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 0.8rem;
}

.gock-lopend {
  background: rgba(10,40,70,0.12);
  border: 1px solid rgba(60,120,200,0.25);
  border-radius: 8px;
  padding: 14px;
  margin: 12px 0;
  font-size: 0.9rem;
  line-height: 1.6;
}
/* ── SRD Import ── */
.dm-srd-import-panel { margin-bottom: 10px; background: rgba(196,168,122,0.06); border: 1px solid rgba(196,168,122,0.25); border-radius: 6px; padding: 8px 12px; }
.dm-srd-summary { cursor: pointer; font-size: 0.8rem; color: var(--color-ink-dim); font-weight: 600; list-style: none; }
.dm-srd-summary::-webkit-details-marker { display: none; }
.dm-srd-search-row { display: flex; gap: 6px; margin-top: 8px; }
.dm-srd-results { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; max-height: 160px; overflow-y: auto; }
.dm-srd-result-btn { text-align: left; padding: 4px 8px; background: rgba(196,168,122,0.08); border: 1px solid rgba(196,168,122,0.2); border-radius: 4px; cursor: pointer; font-size: 0.82rem; color: var(--color-ink-bright); transition: background 0.1s; }
.dm-srd-result-btn:hover { background: rgba(196,168,122,0.2); }

/* ── Quest Prikbord ── */
.logboek-subtabs { display: flex; gap: 6px; padding: 8px 24px 0; border-bottom: 1px solid rgba(196,168,122,0.2); flex-shrink: 0; }
.logboek-subtab { padding: 6px 16px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: 'Cinzel', serif; font-size: 0.8rem; color: var(--color-ink-dim); transition: color 0.15s, border-color 0.15s; }
.logboek-subtab.active { color: var(--color-gold-bright); border-bottom-color: var(--color-gold-bright); }
.logboek-subtab:hover:not(.active) { color: var(--color-ink-medium); }

.prikbord { display: flex; gap: 16px; padding: 20px 24px; overflow-x: auto; min-height: 400px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='1' fill='rgba(196,168,122,0.08)'/%3E%3C/svg%3E"); }
.prikbord-col { flex: 1; min-width: 220px; max-width: 300px; display: flex; flex-direction: column; }
.prikbord-col-header { font-family: 'Cinzel', serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--color-ink-dim); text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.prikbord-col--actief   .prikbord-col-header { color: #c4a840; }
.prikbord-col--voltooid .prikbord-col-header { color: #5aaa6a; }
.prikbord-col--mislukt  .prikbord-col-header { color: #c45555; }
/* Kaartjes-stapel: lichte overlap door negatieve marge + z-index bij hover */
.prikbord-col-cards { display: flex; flex-direction: column; padding: 4px 6px; }

.quest-card { background: #f9f3e0; color: #2a1e10; border-radius: 3px; padding: 12px 14px; margin-bottom: -6px; box-shadow: 2px 3px 8px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.08); position: relative; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s, z-index 0s; z-index: 1; }
.quest-card:hover { transform: translateY(-4px) !important; box-shadow: 4px 6px 18px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(0,0,0,0.1); z-index: 20; }
.quest-card::before { content: ''; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; background: #d42; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.35); }
.quest-card--voltooid { background: #eaf5ec; }
.quest-card--voltooid::before { background: #4a8; }
.quest-card--mislukt  { background: #f5eaea; opacity: 0.8; }
.quest-card--mislukt::before { background: #888; }
.quest-card--hidden   { opacity: 0.55; border: 1px dashed rgba(0,0,0,0.2); }
.quest-card--hidden::before { background: #555; }
.quest-card-title { font-family: 'Cinzel', serif; font-size: 0.85rem; font-weight: 700; color: #2a1e10; margin-bottom: 4px; line-height: 1.3; }
.quest-card-desc  { font-size: 0.78rem; color: #4a3820; line-height: 1.5; max-height: 80px; overflow: hidden; margin-top: 4px; }
.quest-card-chapter { font-size: 0.68rem; color: #8a7450; margin-top: 6px; font-style: italic; }
.quest-card-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; opacity: 0; transition: opacity 0.15s; }
.quest-card:hover .quest-card-actions { opacity: 1; }
.quest-card-btn { background: rgba(0,0,0,0.1); border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem; padding: 2px 5px; color: #4a3820; }
.quest-card-btn:hover { background: rgba(0,0,0,0.2); }
.prikbord-add-btn { margin-top: 18px; width: 100%; padding: 8px; background: rgba(196,168,122,0.1); border: 1px dashed rgba(196,168,122,0.4); border-radius: 4px; cursor: pointer; font-size: 0.8rem; color: var(--color-ink-dim); text-align: center; transition: background 0.15s; }
.prikbord-add-btn:hover { background: rgba(196,168,122,0.2); }

/* Quest modal */
.quest-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; }
.quest-modal { background: var(--color-room-bg); border: 1px solid rgba(196,168,122,0.4); border-radius: 10px; padding: 24px; width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 12px; }
.quest-modal-title { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--color-ink-bright); }
.quest-modal-row { display: flex; flex-direction: column; gap: 4px; }
.quest-modal-label { font-size: 0.75rem; color: var(--color-ink-dim); }
.quest-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* Speler: klikbare missiekaart */
.quest-card--clickable { cursor: pointer; }
/* Speler: read-only missiedetail modal */
.quest-view-modal { max-width: 420px; }
.quest-view-status {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 2px 10px;
  border-radius: 12px;
  align-self: flex-start;
  text-transform: uppercase;
}
.quest-view-status--actief   { background: rgba(196,168,40,0.15);  color: #9a8010; border: 1px solid rgba(196,168,40,0.35);  }
.quest-view-status--voltooid { background: rgba(60,160,80,0.12);   color: #2a8040; border: 1px solid rgba(60,160,80,0.3);   }
.quest-view-status--mislukt  { background: rgba(180,60,60,0.12);   color: #903030; border: 1px solid rgba(180,60,60,0.3);   }
.quest-view-chapter {
  font-family: 'IM Fell English', serif;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-ink-dim);
}
.quest-view-desc {
  font-family: 'Crimson Text', serif;
  font-size: 0.97rem;
  color: var(--color-ink-medium);
  line-height: 1.65;
  padding: 10px 14px;
  background: rgba(196,168,122,0.08);
  border-left: 3px solid rgba(196,168,122,0.4);
  border-radius: 3px;
  white-space: pre-wrap;
}

/* ── Dramatische Onthulling ── */
.dramatic-reveal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.dramatic-reveal-overlay--in { opacity: 1; pointer-events: all; }
.dramatic-reveal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); }
.dramatic-reveal-card { position: relative; background: var(--color-room-bg); border: 2px solid rgba(196,168,122,0.6); border-radius: 10px; padding: 28px 32px; max-width: 520px; width: 100%; max-height: 80vh; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; box-shadow: 0 8px 40px rgba(0,0,0,0.6); transform: translateY(20px) scale(0.97); transition: transform 0.5s ease; }
.dramatic-reveal-overlay--in .dramatic-reveal-card { transform: translateY(0) scale(1); }
.dramatic-reveal-label { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gold-dim); font-family: 'Cinzel', serif; }
.dramatic-reveal-title { font-family: 'Cinzel', serif; font-size: 1.5rem; color: var(--color-ink-bright); font-weight: 700; }
.dramatic-reveal-type { font-size: 0.8rem; color: var(--color-ink-dim); font-style: italic; }
.dramatic-reveal-img { max-width: 100%; max-height: 280px; object-fit: contain; border-radius: 6px; border: 1px solid rgba(196,168,122,0.4); }
.dramatic-reveal-flavour { font-family: 'IM Fell English', serif; font-style: italic; font-size: 0.95rem; color: var(--color-ink-medium); line-height: 1.6; }
.dramatic-reveal-btn { margin-top: 8px; padding: 8px 24px; background: rgba(196,168,122,0.2); border: 1px solid rgba(196,168,122,0.5); border-radius: 6px; cursor: pointer; font-family: 'Cinzel', serif; font-size: 0.85rem; color: var(--color-gold-bright); transition: background 0.15s; }
.dramatic-reveal-btn:hover { background: rgba(196,168,122,0.35); }
.dramatic-reveal-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--color-ink-dim); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 2px 4px; opacity: 0.7; transition: opacity 0.15s; }
.dramatic-reveal-close:hover { opacity: 1; }

/* ── Concentratie indicator ── */
.co-row--concentrating { border-left: 3px solid rgba(160,80,220,0.7) !important; background: rgba(160,80,220,0.05) !important; }
.co-conc-badge { display: inline-block; font-size: 0.75rem; margin-left: 4px; animation: conc-pulse 2s ease-in-out infinite; }
@keyframes conc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Grouped Initiative ── */
.co-row--group-first { border-left: 2px solid rgba(196,168,122,0.5); border-top-left-radius: 0; margin-bottom: 0 !important; border-bottom: 1px dashed rgba(196,168,122,0.2); }
.co-row--group-mid   { border-left: 2px solid rgba(196,168,122,0.5); border-radius: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; border-bottom: 1px dashed rgba(196,168,122,0.2); }
.co-row--group-last  { border-left: 2px solid rgba(196,168,122,0.5); border-top-left-radius: 0; margin-top: 0 !important; }

/* ── Relatiemap: Prikbord ── */
#section-relatiemap.active { display: flex; flex-direction: column; overflow: hidden; }

/* Kurk-achtergrond */
.rel-canvas-wrap {
  flex: 1; overflow: hidden; position: relative;
  background-color: #c49558;
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 2px, rgba(100,52,8,0.07) 2px, rgba(100,52,8,0.07) 3px),
    repeating-linear-gradient(89deg,  transparent, transparent 3px, rgba(130,72,18,0.05) 3px, rgba(130,72,18,0.05) 4px),
    repeating-linear-gradient(44deg,  transparent, transparent 7px, rgba(85,42,6,0.04)  7px, rgba(85,42,6,0.04)  8px),
    radial-gradient(ellipse at 22% 38%, rgba(212,168,78,0.42)  0%, transparent 52%),
    radial-gradient(ellipse at 78% 68%, rgba(152,98,28,0.34)   0%, transparent 48%),
    radial-gradient(ellipse at 52% 12%, rgba(228,182,92,0.3)   0%, transparent 44%),
    radial-gradient(ellipse at 40% 80%, rgba(172,118,38,0.22)  0%, transparent 40%);
}
.rel-svg { width: 100%; height: 100%; display: block; }

/* Toolbar: donker hout + typewriter */
.rel-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; gap: 12px; flex-wrap: wrap; flex-shrink: 0;
  background: linear-gradient(180deg, #1e1409 0%, #130d05 100%);
  border-bottom: 2px solid #3a2508;
  box-shadow: 0 3px 10px rgba(0,0,0,0.6);
}
.rel-toolbar-left  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rel-toolbar-right { display: flex; align-items: center; gap: 8px; }
.rel-toolbar-label {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em;
  color: #7a5828; text-transform: uppercase; user-select: none;
}
.rel-search {
  padding: 5px 12px; width: 210px;
  background: #0c0804; border: 1px solid #4a3010; border-radius: 2px;
  color: #c8a860; caret-color: #c8a860;
  font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.8rem; letter-spacing: 0.02em;
}
.rel-search::placeholder { color: #4a3010; }
.rel-search:focus { outline: none; border-color: #a08040; box-shadow: 0 0 8px rgba(180,140,60,0.25); }
.rel-btn {
  padding: 5px 12px; cursor: pointer; border-radius: 2px;
  background: rgba(200,160,80,0.08); border: 1px solid #4a3010;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.72rem; color: #c8a860; letter-spacing: 0.06em;
  transition: background 0.15s, border-color 0.15s;
}
.rel-btn:hover     { background: rgba(200,160,80,0.22); border-color: #a08040; }
.rel-btn-primary   { background: rgba(200,160,80,0.22); color: #e8c870; border-color: #a08040; }
.rel-btn-danger    { background: rgba(200,60,60,0.12); border-color: rgba(200,60,60,0.4); color: #e88; }
.rel-btn-danger:hover { background: rgba(200,60,60,0.28); }

/* Draad-verbindingen */
.rel-edge-line { transition: stroke-width 0.12s; }
.rel-edge:hover .rel-edge-line { stroke-width: 3 !important; filter: drop-shadow(0 0 5px currentColor); }
.rel-edge-hit  { cursor: pointer; }

/* Polaroid & post-it nodes */
.rel-node-body { transition: filter 0.15s; }
.rel-node:hover .rel-node-body { filter: brightness(1.08) drop-shadow(0 3px 6px rgba(0,0,0,0.4)); }
.rel-node-body--hl, .rel-node--highlight .rel-node-body { filter: drop-shadow(0 0 10px rgba(255,220,80,0.95)) !important; }

/* Tooltip */
.rel-tooltip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: rgba(16,9,3,0.96); border: 1px solid #c8a860; border-radius: 2px;
  color: #e8d4a0; padding: 4px 10px; white-space: nowrap;
  font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.75rem; letter-spacing: 0.05em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
  opacity: 0; transition: opacity 0.1s;
}
.rel-tooltip--visible { opacity: 1; }

.rel-error { padding: 40px; text-align: center; color: #8a6030; font-family: 'Courier New', monospace; }

/* Edge modal */
.rel-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rel-modal { background: #1e1812; border: 1px solid rgba(196,168,122,0.5); border-radius: 10px; padding: 24px; width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
.rel-modal-title { font-family: 'Cinzel', serif; font-size: 1rem; color: #e8d9b8; }
.rel-modal-row { display: flex; flex-direction: column; gap: 4px; }
.rel-modal-label { font-size: 0.75rem; color: #9a8060; }
.rel-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.rel-select, .rel-input { background: #130f0a; border: 1px solid rgba(196,168,122,0.35); border-radius: 6px; padding: 6px 10px; color: #e8d9b8; font-size: 0.85rem; width: 100%; }
.rel-select:focus, .rel-input:focus { outline: none; border-color: rgba(196,168,122,0.7); }
.rel-label-suggests { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rel-label-suggest { padding: 2px 8px; background: rgba(196,168,122,0.1); border: 1px solid rgba(196,168,122,0.25); border-radius: 10px; cursor: pointer; font-size: 0.72rem; color: #9a8060; transition: background 0.1s; }
.rel-label-suggest:hover { background: rgba(196,168,122,0.25); color: #e8d9b8; }
.rel-label-opt { font-size: 0.68rem; opacity: 0.5; }

/* ── Party Board layout ── */
.pb-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.pb-layout .rel-canvas-wrap { flex: 1; }

/* ── Zijpaneel ── */
.pb-panel {
  width: 220px; flex-shrink: 0;
  background: #18130e; border-left: 1px solid rgba(196,168,122,0.25);
  display: flex; flex-direction: column; overflow-y: auto;
}
.pb-panel.hidden { display: none; }
.pb-panel-inner { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; }
.pb-panel-img-wrap { width: 100%; aspect-ratio: 3/2; border-radius: 4px; overflow: hidden; background: #0e0b07; position: relative; }
.pb-panel-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Silhouet voor deels-onthulde entiteiten */
.pb-panel-img--vague {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: rgba(100,75,40,0.30);
  background: #1e1608; font-family: 'Cinzel', serif;
}
/* Rood kruis voor overledenen in het paneel (via gradient) */
.pb-panel-deceased-cross {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom right,
      transparent calc(50% - 2px),
      rgba(200,25,25,0.82) calc(50% - 2px),
      rgba(200,25,25,0.82) calc(50% + 2px),
      transparent calc(50% + 2px)),
    linear-gradient(to bottom left,
      transparent calc(50% - 2px),
      rgba(200,25,25,0.82) calc(50% - 2px),
      rgba(200,25,25,0.82) calc(50% + 2px),
      transparent calc(50% + 2px));
}
.pb-panel-blank-icon { font-size: 2.5rem; text-align: center; padding: 12px 0 4px; }
.pb-panel-name {
  font-family: 'Cinzel', serif; font-size: 0.82rem; color: #e8d9b8; text-align: center;
  border-bottom: 1px solid rgba(196,168,122,0.2); padding-bottom: 8px;
}
.pb-panel-field { display: flex; flex-direction: column; gap: 4px; }
.pb-panel-label { font-size: 0.7rem; color: #9a8060; }
.pb-panel-notes {
  background: #0e0b07; border: 1px solid rgba(196,168,122,0.3); border-radius: 4px;
  color: #d4c8a0; font-size: 0.8rem; padding: 6px 8px; resize: vertical;
  min-height: 90px; width: 100%; font-family: 'Courier New', monospace; line-height: 1.45;
}
.pb-panel-notes:focus { outline: none; border-color: rgba(196,168,122,0.6); }
.pb-panel-input {
  background: #0e0b07; border: 1px solid rgba(196,168,122,0.3); border-radius: 4px;
  color: #d4c8a0; font-size: 0.82rem; padding: 5px 8px; width: 100%;
}
.pb-panel-input:focus { outline: none; border-color: rgba(196,168,122,0.6); }
.pb-panel-meer-info {
  padding: 6px; width: 100%; border-radius: 4px;
  background: rgba(196,168,122,0.1); border: 1px solid rgba(196,168,122,0.3);
  color: #c4a860; font-size: 0.78rem; cursor: pointer; transition: background 0.15s;
}
.pb-panel-meer-info:hover { background: rgba(196,168,122,0.22); }
.pb-panel-remove {
  margin-top: 4px; padding: 6px; width: 100%; border-radius: 4px;
  background: rgba(180,50,40,0.12); border: 1px solid rgba(180,50,40,0.3);
  color: #cc6655; font-size: 0.78rem; cursor: pointer; transition: background 0.15s;
}
.pb-panel-remove:hover { background: rgba(180,50,40,0.25); }

/* ── Entiteiten-lijst in dialoog ── */
.pb-entity-list {
  max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
  border: 1px solid rgba(196,168,122,0.2); border-radius: 6px; padding: 4px;
  background: #130f0a;
}
.pb-entity-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: rgba(196,168,122,0.06); border: 1px solid rgba(196,168,122,0.15); border-radius: 4px;
  cursor: pointer; text-align: left; transition: background 0.12s;
}
.pb-entity-item:hover { background: rgba(196,168,122,0.16); border-color: rgba(196,168,122,0.45); }
.pb-entity-item.hidden { display: none; }
.pb-entity-icon { font-size: 0.85rem; }
.pb-entity-name { font-size: 0.83rem; color: #e8d9b8; }
.pb-entity-empty { padding: 12px; text-align: center; color: #9a8060; font-size: 0.8rem; font-style: italic; }

/* ── Blanco post-it invoer ── */
.pb-blank-row {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid rgba(196,168,122,0.2); padding-top: 10px; margin-top: 2px;
}
.pb-blank-inp-row { display: flex; gap: 8px; }

/* ── Kleurkiezers ── */
.pb-color-swatches { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pb-color-swatch {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: transform 0.1s, border-color 0.1s;
}
.pb-color-swatch:hover { transform: scale(1.2); }
.pb-color-swatch--active { border-color: #e8d9b8; transform: scale(1.15); }

/* ── Geselecteerde node: gouden rand via SVG ── */
.rel-node--selected rect, .rel-node--selected polygon { filter: drop-shadow(0 0 5px rgba(196,168,122,0.7)); }

/* ══ Witte tekst op donkere backdrop (Tweespalt, Ursula, Gock) ══════════════ */

/* Basis: alle tekst in content-paneel met backdrop lichter maken */
.herberg-scene[style] .herberg-content,
.herberg-scene[style] .herberg-content p,
.herberg-scene[style] .herberg-content span,
.herberg-scene[style] .herberg-content label,
.herberg-scene[style] .herberg-content strong {
  color: rgba(240,235,225,0.93);
}

/* Tweespalt-specifieke overrides */
.tweespalt-scene .ts-beurs                { color: rgba(220,210,190,0.85); }
.tweespalt-scene .ts-sectie-label         { color: rgba(215,195,145,0.90); border-color: rgba(215,195,145,0.25); }
.tweespalt-scene .ts-event                { background: rgba(0,0,0,0.35); border-color: rgba(215,195,145,0.25); }
.tweespalt-scene .ts-event-type           { color: rgba(200,185,155,0.75); }
.tweespalt-scene .ts-event-naam           { color: rgba(230,205,130,0.97); text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.tweespalt-scene .ts-event-timer          { color: rgba(200,185,155,0.70); }
.tweespalt-scene .ts-optie                { background: rgba(0,0,0,0.25); border-color: rgba(215,195,145,0.22); }
.tweespalt-scene .ts-optie--gekozen      { border-color: rgba(200,175,70,0.75) !important; background: rgba(170,145,30,0.22) !important; box-shadow: 0 0 0 1px rgba(200,175,70,0.30), inset 0 0 14px rgba(170,145,30,0.12); }
.tweespalt-scene .ts-optie-naam           { color: rgba(240,235,220,0.95); }
.tweespalt-scene .ts-optie-kans           { color: rgba(200,185,155,0.75); }
.tweespalt-scene .ts-uitslag-label        { color: rgba(200,185,155,0.75); }
.tweespalt-scene .ts-uitslag--gewonnen   { background: rgba(30,110,55,0.38); border-color: rgba(90,210,120,0.50); }
.tweespalt-scene .ts-uitslag--verloren   { background: rgba(130,22,22,0.42); border-color: rgba(225,80,80,0.50); }
.tweespalt-scene .ts-uitslag-winst        { color: #6fda8a; }
.tweespalt-scene .ts-uitslag-verlies     { color: rgba(255,135,135,0.92); }
.tweespalt-scene .ts-inzet-label          { color: rgba(200,185,155,0.75); }
.tweespalt-scene .ts-lening-banner        { color: rgba(255,170,170,0.90); background: rgba(100,20,20,0.35); border-color: rgba(180,60,60,0.4); }
.tweespalt-scene .ts-npc-row              { color: rgba(185,170,145,0.70); }
.tweespalt-scene .ts-npc-header          { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(215,195,145,0.65); margin-bottom: 4px; }
.tweespalt-scene .ts-npc-bedrag          { margin-left: auto; color: rgba(200,175,110,0.80); font-variant-numeric: tabular-nums; }
.tweespalt-scene .ts-inzet-input         { color: rgba(240,235,220,0.95) !important; background: rgba(255,255,255,0.08); }
.tweespalt-scene .ts-inzet-input::placeholder { color: rgba(200,185,155,0.45); }
.tweespalt-scene .herberg-leeg            { color: rgba(200,185,155,0.65); }

/* Ursula en Gock: zorg dat ook hun dim-tekst leesbaar blijft */
.ursula-scene .herberg-cooldown-tekst,
.gock-scene   .herberg-cooldown-tekst     { color: rgba(220,200,240,0.85); background: rgba(0,0,0,0.30); }
.ursula-scene .ts-beurs,
.gock-scene   .ts-beurs                   { color: rgba(220,210,190,0.85); }

/* ══ Speler: brief-kaarten ══ */
.speler-brief-card {
  background: #f9f0dc;
  border: 1px solid #c8a87a;
  border-left: 3px solid #b8860b;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s;
  position: relative;
}
.speler-brief-card:hover { box-shadow: 0 2px 10px rgba(80,40,0,0.13); }
.speler-brief-card--nieuw {
  border-left-color: #8b2a2a;
  background: #fdf5e4;
}
.speler-brief-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.speler-brief-header-main {
  flex: 1;
  min-width: 0;
}
.speler-brief-afzender-inline {
  font-family: 'IM Fell English', serif;
  font-size: 0.80rem;
  color: #7a5830;
  margin-top: 1px;
}
.speler-brief-meta-inline {
  font-size: 0.72rem;
  color: #a08050;
  margin-top: 2px;
}
.speler-brief-chevron {
  font-size: 1rem;
  color: #b09060;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  line-height: 1;
  margin-right: 2px;
}
.speler-brief-card--open .speler-brief-chevron {
  transform: rotate(180deg);
}
.speler-brief-body {
  display: none;
  margin-top: 10px;
  border-top: 1px solid rgba(184,134,11,0.20);
  padding-top: 8px;
}
.speler-brief-card--open .speler-brief-body {
  display: block;
}
.speler-brief-titel {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #3a1f08;
  letter-spacing: 0.02em;
}
.speler-brief-afzender {
  font-family: 'IM Fell English', serif;
  font-size: 0.82rem;
  color: #6a4828;
  margin-bottom: 6px;
}
.speler-brief-tekst {
  font-family: 'IM Fell English', serif;
  font-size: 0.93rem;
  color: #3a2010;
  line-height: 1.6;
  white-space: pre-wrap;
}
.speler-brief-trash {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: #b09060;
  padding: 0 2px;
  transition: color 0.15s;
  flex-shrink: 0;
}
.speler-brief-trash:hover { color: #8b2a2a; }

/* ══ DM: brief-kaarten in geschiedenis ══ */
.bericht-history-brief {
  background: rgba(245,235,210,0.6);
  border: 1px solid rgba(196,168,122,0.45);
  border-left: 3px solid rgba(184,134,11,0.6);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.bericht-history-brief--deleted {
  opacity: 0.55;
  border-left-color: rgba(150,80,80,0.5);
}
.bericht-brief-titel {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #3a1f08;
  margin-bottom: 2px;
}
.bericht-brief-afzender {
  font-family: 'IM Fell English', serif;
  font-size: 0.75rem;
  color: #7a5838;
  margin-bottom: 3px;
}
.bericht-brief-tekst-preview {
  font-family: 'IM Fell English', serif;
  font-size: 0.8rem;
  color: #5a4030;
  font-style: italic;
}
.bericht-brief-deleted-badge {
  font-size: 0.68rem;
  color: rgba(150,80,80,0.9);
  background: rgba(150,80,80,0.08);
  border: 1px solid rgba(150,80,80,0.3);
  border-radius: 10px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* ══ DM: brief-compose formulier ══ */
.post-compose {
  border: 1px solid rgba(184,134,11,0.3);
  background: rgba(245,235,210,0.35);
  border-radius: 6px;
}


/* ══════════════════════════════════════════════════════════
   ── Dungeon Maps ──────────────────────────────────────────
   ══════════════════════════════════════════════════════════ */

/* Shell */
.dng-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #0d0a06;
  overflow: hidden;
}

/* Topbar */
.dng-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: #17110a;
  border-bottom: 1px solid rgba(196,168,100,0.18);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.dng-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dng-map-select {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  color: #d4b870;
  background: #211809;
  border: 1px solid rgba(196,168,100,0.35);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  max-width: 220px;
}
.dng-map-select-empty {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: rgba(196,168,100,0.4);
  font-size: 13px;
}

/* Knoppen */
.dng-btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(196,168,100,0.35);
  background: rgba(196,168,100,0.08);
  color: #d4b870;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.dng-btn:hover { background: rgba(196,168,100,0.18); border-color: rgba(196,168,100,0.6); }
.dng-btn-sm { padding: 4px 10px; font-size: 10px; }
.dng-btn-ghost { background: none; border-color: rgba(196,168,100,0.18); color: rgba(196,168,100,0.5); }
.dng-btn-ghost:hover { color: rgba(196,168,100,0.8); border-color: rgba(196,168,100,0.4); background: none; }
.dng-btn-danger { border-color: rgba(180,40,40,0.5); color: #c06060; background: rgba(180,40,40,0.08); }
.dng-btn-danger:hover { background: rgba(180,40,40,0.18); }
.dng-btn-reveal {
  border-color: rgba(80,180,80,0.5);
  color: #80c880;
  background: rgba(80,180,80,0.08);
  width: 100%;
  margin-bottom: 6px;
}
.dng-btn-reveal:hover { background: rgba(80,180,80,0.18); }

/* Gereedschappen */
.dng-tools { display: flex; align-items: center; gap: 4px; }
.dng-tool-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: none;
  color: rgba(196,168,100,0.5);
  cursor: pointer;
  transition: all 0.15s;
}
.dng-tool-btn:hover { background: rgba(196,168,100,0.12); color: #d4b870; }
.dng-tool-btn.active {
  background: rgba(196,168,100,0.18);
  border-color: rgba(196,168,100,0.45);
  color: #d4b870;
}
.dng-tool-sep { width: 1px; height: 20px; background: rgba(196,168,100,0.2); margin: 0 4px; }

/* Workspace */
.dng-workspace {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.dng-map-area {
  flex: 1;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(ellipse at center, #1a1208 0%, #0a0805 100%);
}
.dng-img-wrap {
  /* Absoluut gecentreerd; transform schaalt vanuit het midden */
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  will-change: transform;
}
.dng-img {
  display: block;
  user-select: none;
  max-width: none;
}
.dng-svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}

/* SVG kamerlagen */
/* Transparante overlay over bestaande kamers in tekenmodus */
.dng-room-draw-overlay {
  fill: rgba(196,168,100,0.18);
  stroke: rgba(196,168,100,0.55);
  stroke-width: 1.5;
  pointer-events: none;
}

.dng-room {
  fill: transparent; /* niet 'none': transparent vangt muisklikken op het vlak op */
  stroke: rgba(196,168,100,0.30);
  stroke-width: 2;
  cursor: pointer;
  transition: stroke 0.15s;
}
.dng-room:hover { stroke: rgba(196,168,100,0.75); }
.dng-room-revealed { stroke: rgba(196,168,100,0.55); }
.dng-room-selected {
  stroke: #d4b870;
  stroke-width: 2.5;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 4px rgba(196,168,100,0.5));
}
.dng-room-label {
  fill: rgba(240,220,160,0.92);
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  paint-order: stroke;
  stroke: rgba(0,0,0,0.8);
  stroke-width: 3px;
}

/* Tekenlaag */
.dng-draw-preview {
  fill: rgba(196,168,100,0.15);
  stroke: rgba(196,168,100,0.8);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  pointer-events: none;
}
.dng-draw-vertex {
  fill: rgba(196,168,100,0.9);
  stroke: none;
  pointer-events: none;
}
.dng-draw-hint {
  fill: rgba(196,168,100,0.6);
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 12px;
  pointer-events: none;
}

/* Sidebar */
.dng-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: #17110a;
  border-left: 1px solid rgba(196,168,100,0.15);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
/* ── Detailkaart (geselecteerde kamer) ── */
.dng-sidebar-detail:empty { display: none; }
.dng-sb-detail-card {
  padding: 14px;
  border-bottom: 1px solid rgba(196,168,100,0.12);
}
.dng-sidebar-hint {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: rgba(196,168,100,0.35);
  font-size: 12px;
  text-align: center;
  margin-top: 12px;
}
.dng-sb-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: #d4b870;
  margin-bottom: 3px;
}
.dng-sb-shape {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: rgba(196,168,100,0.45);
  font-size: 11px;
  margin-bottom: 8px;
}
.dng-sb-notes {
  font-family: 'Crimson Text', serif;
  font-size: 12px;
  color: rgba(220,195,150,0.75);
  background: rgba(196,168,100,0.06);
  border: 1px solid rgba(196,168,100,0.12);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.dng-sb-actions { display: flex; flex-direction: column; gap: 5px; }
.dng-sb-revealed {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: rgba(80,180,80,0.7);
  text-align: center;
  padding: 5px;
}
/* ── Kamerlijst ── */
.dng-sb-list-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px 0 6px;
}
.dng-sb-list-hdr {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 0 12px 6px;
}
.dng-sb-list-title {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(196,168,100,0.5);
  text-transform: uppercase;
}
.dng-sb-list-count {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: rgba(196,168,100,0.3);
}
.dng-sb-list {
  flex: 1;
  overflow-y: auto;
}
.dng-sb-li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.12s;
  border-left: 2px solid transparent;
}
.dng-sb-li:hover { background: rgba(196,168,100,0.06); }
.dng-sb-li--sel {
  background: rgba(196,168,100,0.10);
  border-left-color: rgba(196,168,100,0.5);
}
.dng-sb-li-dot {
  font-size: 9px;
  color: rgba(196,168,100,0.3);
  flex-shrink: 0;
  width: 12px;
  text-align: center;
}
.dng-sb-li-dot--rev { color: rgba(80,200,80,0.7); }
.dng-sb-li-name {
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  color: rgba(220,200,160,0.85);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dng-sb-quick-reveal {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  opacity: 0.35;
  padding: 2px 3px;
  border-radius: 3px;
  transition: opacity 0.12s, background 0.12s;
  line-height: 1;
}
.dng-sb-quick-reveal:hover { opacity: 0.9; background: rgba(196,168,100,0.12); }

/* Dialogs */
.dng-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dng-dialog {
  background: linear-gradient(160deg, #2a1e0f 0%, #1c1408 100%);
  border: 1px solid rgba(196,168,100,0.35);
  border-radius: 12px;
  padding: 24px 28px;
  min-width: 340px;
  max-width: 480px;
  width: 90vw;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}
.dng-dialog-title {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  color: #d4b870;
  margin: 0 0 18px;
}
.dng-dialog-sub {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: rgba(196,168,100,0.55);
  font-size: 13px;
  margin: -10px 0 14px;
}
.dng-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(196,168,100,0.6);
  margin-bottom: 14px;
}
.dng-input {
  font-family: 'Crimson Text', serif;
  font-size: 14px;
  color: #e8d5a8;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(196,168,100,0.3);
  border-radius: 6px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.dng-input:focus { border-color: rgba(196,168,100,0.7); }
.dng-textarea {
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  color: #e8d5a8;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(196,168,100,0.3);
  border-radius: 6px;
  padding: 7px 10px;
  outline: none;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.dng-textarea:focus { border-color: rgba(196,168,100,0.7); }
.dng-dialog-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.dng-dialog-preview { display: flex; justify-content: center; margin: 10px 0; }

/* Party-toegang */
.dng-party-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.dng-party-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dng-party-name {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: #d4b870;
  flex-shrink: 0;
}
.dng-party-states {
  display: flex;
  gap: 4px;
}
.dng-state-btn {
  padding: 3px 9px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  border-radius: 4px;
  border: 1px solid rgba(196,168,100,0.25);
  background: rgba(196,168,100,0.06);
  color: rgba(196,168,100,0.45);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.dng-state-btn:hover { background: rgba(196,168,100,0.14); color: rgba(196,168,100,0.75); }
.dng-state-btn--on {
  background: rgba(196,168,100,0.22);
  color: #d4b870;
  border-color: rgba(196,168,100,0.55);
}
/* Uitgespeeld-knop: groen accent */
.dng-state-btn--on[data-state="completed"] {
  background: rgba(60,160,80,0.18);
  color: rgba(100,210,120,0.9);
  border-color: rgba(60,160,80,0.45);
}
/* Reveal-count chip in topbar */
.dng-reveal-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(196,168,100,0.12);
  border: 1px solid rgba(196,168,100,0.30);
  border-radius: 10px;
  padding: 2px 10px;
  font-family: 'IM Fell English', serif;
  font-size: 12px;
  color: rgba(196,168,100,0.75);
  white-space: nowrap;
}

/* Context-hint bij verbindingstool */
.dng-tool-hint {
  display: none;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(196,168,100,0.55);
  align-self: center;
  margin-left: 4px;
}

/* Verbindingslijn tussen kamers */
.dng-conn-line {
  stroke: rgba(196,168,100,0.60);
  stroke-dasharray: 6 4;
  fill: none;
  pointer-events: none;
}

/* Geselecteerde startkamer bij verbindingstool */
.dng-conn-start {
  stroke: rgba(220,180,80,0.95) !important;
  stroke-width: 3 !important;
  filter: drop-shadow(0 0 4px rgba(220,180,80,0.55));
}

/* Conditie-iconen op de kaart */
.dng-cond-icon {
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
  pointer-events: none;
}
.dng-cond-icon--hidden {
  opacity: 0.35;   /* DM ziet verborgen iconen half-transparant */
}

/* ── Sidebar detail: secties ── */
.dng-sb-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(196,168,100,0.14);
}
.dng-sb-section-hdr {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(196,168,100,0.55);
  margin-bottom: 6px;
}

/* Conditie-toggle knoppen (☠️ 💰 🔒 ✓) */
.dng-cond-toggle-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.dng-cond-btn {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(196,168,100,0.22);
  border-radius: 6px;
  background: rgba(196,168,100,0.05);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.dng-cond-btn:hover { opacity: 0.8; background: rgba(196,168,100,0.12); }
.dng-cond-btn--on {
  opacity: 1;
  background: rgba(196,168,100,0.18);
  border-color: rgba(196,168,100,0.55);
}

/* Actieve conditie-rijen */
.dng-cond-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dng-cond-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
}
.dng-cond-row-icon {
  font-size: 15px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.dng-cond-vis-btn {
  flex: 1;
  font-family: 'IM Fell English', serif;
  font-size: 11px;
  padding: 2px 7px;
  border: 1px solid rgba(196,168,100,0.22);
  border-radius: 4px;
  background: rgba(196,168,100,0.05);
  color: rgba(196,168,100,0.50);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.dng-cond-vis-btn:hover { background: rgba(196,168,100,0.12); color: rgba(196,168,100,0.75); }
.dng-cond-vis-btn--on {
  color: rgba(100,200,120,0.85);
  border-color: rgba(60,160,80,0.40);
  background: rgba(60,160,80,0.10);
}
.dng-cond-del-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 11px;
  color: rgba(200,80,80,0.55);
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.dng-cond-del-btn:hover { color: rgba(200,80,80,0.9); background: rgba(200,80,80,0.10); }

/* Verbindingen in sidebar */
.dng-conn-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
}
.dng-conn-row-name {
  flex: 1;
  font-family: 'IM Fell English', serif;
  font-size: 12px;
  color: rgba(196,168,100,0.70);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Conditie-iconen in de kamerlijst */
.dng-sb-li-conds {
  display: flex;
  gap: 1px;
  align-items: center;
  flex-shrink: 0;
  margin-right: 2px;
}
.dng-sb-cond-icon {
  font-size: 11px;
  line-height: 1;
}
.dng-sb-cond-icon--hidden {
  opacity: 0.30;
}

/* Leeg state */
.dng-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  color: rgba(196,168,100,0.35);
}
.dng-empty-icon { font-size: 3rem; opacity: 0.4; }
.dng-empty-title { font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700; }
.dng-empty-sub { font-family: 'IM Fell English', serif; font-style: italic; font-size: 13px; }

/* ── Kaart-sectie modus-toggle ── */
/* #section-kaart.active display:flex zit al in de globale sectie-regels (regel 318) */
.kaart-mode-bar {
  display: flex;
  gap: 4px;
  padding: 8px 14px 0;
  background: var(--color-room-bg);
  border-bottom: 1px solid var(--color-room-border);
  flex-shrink: 0;
}
.kaart-mode-btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 7px 16px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: none;
  color: var(--color-ink-dim);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.kaart-mode-btn:hover { color: var(--color-ink-medium); background: rgba(196,168,100,0.06); }
.kaart-mode-btn.active {
  color: var(--color-ink-bright);
  background: var(--color-room-bg);
  border-color: var(--color-room-border);
  border-bottom-color: var(--color-room-bg);
  position: relative;
  z-index: 1;
}

/* ══ Item Carousel (knapzak) ══ */
.item-carousel {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 12px;
}
.item-carousel-nav {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #c4a87a;
  background: transparent;
  color: #8a6000;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.item-carousel-nav:hover { background: rgba(196,168,122,0.18); color: #5a3000; }
.item-carousel-nav:disabled { opacity: 0.3; cursor: default; }
.item-carousel-track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.item-carousel-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 8px;
  background: #f2e8d2;
  border: 1px solid #c8a060;
  border-radius: 10px;
}
.item-carousel-img-wrap {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #c4a87a;
  background: #e8d8b0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.item-carousel-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.item-carousel-fallback {
  font-size: 52px;
  color: #b09060;
}
.item-carousel-namerow {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  flex-wrap: wrap;
}
.item-carousel-type-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.item-carousel-name {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #2a1a08;
  text-align: center;
  line-height: 1.3;
}
.item-carousel-desc {
  font-family: 'IM Fell English', serif;
  font-size: 0.88rem;
  color: #4a3010;
  max-height: 160px;
  overflow-y: auto;
  text-align: left;
  width: 100%;
  line-height: 1.55;
  padding: 0 4px;
}
.item-carousel-qty-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.item-carousel-qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #c4a87a;
  background: rgba(196,168,100,0.12);
  color: #8a6000;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-carousel-qty-btn:hover { background: rgba(196,168,100,0.28); }
.item-carousel-qty-label {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: #5a3000;
}
.item-carousel-dots {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.item-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(196,168,100,0.30);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}
.item-carousel-dot.active { background: #c4a87a; }
.item-carousel-detail-btn {
  font-size: 0.75rem;
  font-family: 'Cinzel', serif;
  color: #8a6000;
  background: none;
  border: 1px solid rgba(196,168,100,0.40);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.item-carousel-detail-btn:hover { background: rgba(196,168,100,0.15); }

/* ══ Item Charge dots ══ */
.item-carousel-charges { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.item-charge-label { font-size: 0.75rem; color: #8a7050; font-family: 'Cinzel', serif; letter-spacing: 0.03em; margin-bottom: 4px; }
.item-charge-dots-row { display: flex; align-items: center; gap: 6px; justify-content: center; }
.item-charge-dots { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.item-charge-recharge-label { font-size: 0.70rem; color: #a08050; margin-top: 3px; }

/* ══ Long rest knop ══ */
.player-dash-rest-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.player-long-rest-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.80rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #3a1a08;
  background: linear-gradient(135deg, #d4a84a, #b8882a);
  border: 1px solid #a07020;
  border-radius: 6px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 4px rgba(80,40,0,0.18);
}
.player-long-rest-btn:hover { background: linear-gradient(135deg, #e0b450, #c89030); box-shadow: 0 2px 8px rgba(80,40,0,0.28); }

/* ── Wikilinks ── */
a.wikilink {
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  border-radius: 2px;
  padding: 0 1px;
  transition: background 0.15s, filter 0.15s;
}
a.wikilink:hover { filter: brightness(0.88); }
/* Typespecifieke markeer-kleuren */
a.wikilink--personages   { color: #1d5e30; background: rgba(42,120,60,0.14); }
a.wikilink--locaties     { color: #1a3f6a; background: rgba(42,90,154,0.13); }
a.wikilink--organisaties { color: #6a1818; background: rgba(140,40,40,0.13); }
a.wikilink--voorwerpen   { color: #6a4410; background: rgba(154,112,32,0.14); }
a.wikilink--documenten   { color: #4a1e6a; background: rgba(100,52,140,0.13); }
/* Fallback zonder type */
a.wikilink:not([class*="wikilink--"]) { color: #6a4a10; background: rgba(184,134,11,0.14); }
.wikilink-hidden { color: rgba(140,120,90,0.45); cursor: default; font-style: italic; }
.wikilink-unknown { color: rgba(150,110,80,0.5); font-style: italic; }

/* ── Wikilink autocomplete dropdown ── */
.wikilink-ac { position: fixed; z-index: 9999; background: var(--color-room-bg, #1a1008); border: 1px solid rgba(196,168,100,0.4); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.55); overflow: hidden; max-height: 320px; overflow-y: auto; }
.wikilink-ac-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px; cursor: pointer; font-family: 'Crimson Pro', serif; font-size: 0.95rem; color: var(--color-ink-medium, #c8b89a); transition: background 0.1s; }
.wikilink-ac-item:hover, .wikilink-ac-item--active { background: rgba(196,168,100,0.15); color: var(--color-ink-bright, #f0e8d0); }
.wikilink-ac-icon { font-size: 0.85rem; opacity: 0.8; flex-shrink: 0; }
.wikilink-ac-name { flex: 1; }

/* ── Detail modal: book-style tabs ── */
.detail-tab-nav {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  border-bottom: 2px solid rgba(196,168,100,0.45);
  margin-bottom: 16px;
  padding-top: 6px;
  flex-wrap: wrap;
}
.detail-tab {
  font-family: 'Cinzel', 'Palatino', serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 13px 7px;
  cursor: pointer;
  border: 1.5px solid rgba(196,168,100,0.3);
  border-bottom: 2px solid rgba(196,168,100,0.45);
  border-radius: 5px 5px 0 0;
  background: rgba(196,168,100,0.07);
  color: #9a8468;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  margin-bottom: -2px;
  position: relative;
  white-space: nowrap;
  line-height: 1.3;
}
.detail-tab:hover:not(.detail-tab--active) {
  background: rgba(196,168,100,0.18);
  color: #b89850;
  border-color: rgba(196,168,100,0.5);
}
.detail-tab--active {
  background: #f8f0de;
  color: #a07830;
  border-color: rgba(196,168,100,0.55);
  border-bottom-color: #f8f0de;
  z-index: 1;
  font-weight: 700;
}

/* ── Dungeon room tooltip (spelers) ── */
.dng-room-tooltip { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); background: rgba(20,12,4,0.92); border: 1px solid rgba(196,168,100,0.45); border-radius: 8px; padding: 8px 18px; font-family: 'Cinzel', serif; font-size: 0.9rem; color: rgba(240,220,160,0.95); pointer-events: none; z-index: 8000; white-space: nowrap; opacity: 1; transition: opacity 0.4s ease; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.dng-room-tooltip--out { opacity: 0; }

/* ── Change 1: Hide class image on mobile ── */
@media (max-width: 640px) {
  .player-class-icon-outer { display: none; }
}

/* ── Change 2: Portrait inline video ── */
.portrait-inline-video {
  display: none;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 2;
}
.player-dash-avatar-wrap.portrait-showing-video .portrait-inline-video { display: block; }
.player-dash-avatar-wrap.portrait-showing-video .player-dash-avatar,
.player-dash-avatar-wrap.portrait-showing-video .player-dash-avatar-fallback { display: none; }

/* ── Change 3: Extra speed (swim/fly) ── */
.pcs-extra-speeds-wrap { display: contents; }
.pcs-input-row {
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
.pcs-extra-speed-btn {
  font-size: 12px; font-weight: 700; line-height: 1;
  width: 16px; height: 16px; padding: 0;
  background: none; border: 1px solid rgba(196,168,122,0.4);
  border-radius: 3px; cursor: pointer; opacity: 0.45; transition: opacity 0.15s;
  flex-shrink: 0;
}
.pcs-extra-speed-btn--on { opacity: 1; border-color: rgba(196,168,122,0.8); }

/* ── Change 5: Knapzak damage pills + props ── */
.item-carousel-damage { margin: 4px 0; }
.item-carousel-props { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0; }
.item-damage-pill--sm { font-size: 11px; padding: 4px 10px; }

/* ── Change 6: Berichten tab mobile fix ── */
@media (max-width: 640px) {
  .player-subtabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .player-subtabs::-webkit-scrollbar { display: none; }
  .player-subtab { white-space: nowrap; flex-shrink: 0; }
}

/* ── Change 7: Spell attack bonus + prefix ── */
.player-spell-stat-atk-wrap {
  display: flex; align-items: baseline; justify-content: center; gap: 1px;
}
.atk-bonus-prefix {
  font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700;
  color: #5a3a1a; pointer-events: none; line-height: 1;
}
.player-spell-stat-atk-wrap .player-spell-stat-input { width: 44px; text-align: left; }

/* ── Change 8: Spell slot add level button more subtle ── */
.player-dash-slot-add-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-size: 10px;
  font-family: 'Cinzel', serif;
  color: rgba(90, 60, 20, 0.45);
  background: none;
  border: 1px dashed rgba(196,168,122,0.3);
  border-radius: 6px;
  padding: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.5px;
}
.player-dash-slot-add-btn:hover {
  color: rgba(90,60,20,0.8);
  border-color: rgba(196,168,122,0.7);
}

/* ── Change 9: Spell favorites ── */
.spell-fav-btn {
  margin-left: auto;
  background: none; border: none;
  font-size: 13px; color: rgba(196,168,122,0.4);
  cursor: pointer; padding: 0 4px;
  transition: color 0.15s, transform 0.1s;
}
.spell-fav-btn:hover { color: #c4a840; transform: scale(1.2); }
.spell-fav-btn--on { color: #c4a840; }
.spell-lvl-chip--fav { background: rgba(196,168,122,0.35); border-color: #c4a840; color: #7a5010; }