/* =============================================================
   D&D Within — Valoria Campaign Platform
   Complete SPA Stylesheet
   ============================================================= */

/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    color-scheme: dark;
    /* Warm-neutral near-blacks (was cool blue cast) */
    --bg-dark: #0c0a08;
    --bg-card: #161311;
    --bg-block: #1c1815;
    --bg-elevated: #221d19;
    /* Text — warm cream-on-dark */
    --text-main: #e8e2d6;
    --text-dim: #9a8e7e;
    --text-bright: #f5efe2;
    /* Interactive accent — kept (cyan) but de-emphasized; warm-gold is the new identity color */
    --accent: #22d3ee;
    --accent-rgb: 34, 211, 238;
    --accent-glow: rgba(34, 211, 238, 0.15);
    --accent-dark: #0891b2;
    --accent-secondary: #0891b2;
    --accent-tertiary: #164e63;
    /* Warm identity palette (Cinzel pairing) */
    --accent-warm: #c9a961;
    --accent-warm-soft: oklch(from var(--accent-warm) l c h / 0.6);
    --gold: #d4b97a;
    --burgundy: #6b3a3a;
    --burgundy-soft: oklch(from var(--burgundy) l c h / 0.18);
    /* Warm-tinted borders (was blue-tinted) */
    --border: #2c2520;
    --border-light: #3e342c;
    --hairline-gold: rgba(201, 169, 97, 0.18);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --danger: #ef4444;
    --success: #4ade80;
    --warning: #fbbf24;
    --dragon-gold: #d4a017;
    --snake-green: #4ade80;
    --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* FAB row — altijd horizontaal in de rechter onderhoek.
       Order links → rechts: bug (red) → chat (cyan) → notes (purple) → dice (gold).
       Right-anchor staat 5rem in zodat de FABs niet overlappen met de
       rechter sidebar (56px ≈ 3.5rem) op character-page dashboards.
       --fab-slot-N geeft per FAB de horizontale offset vanaf de rechterrand. */
    --fab-bottom: 1.5rem;
    --fab-right-base: 5rem;
    --fab-gap: 56px;            /* = --fab-size + 10px tussenruimte (verzoek 2026-06-05) */
    /* FAB-grootte gecentraliseerd: 46px met 10px ruimte ertussen (verzoek 2026-06-05). */
    --fab-size: 46px;
    --fab-icon: 28px;
    --fab-slot-0: var(--fab-right-base);                              /* dice  — meest rechts */
    --fab-slot-1: calc(var(--fab-right-base) + var(--fab-gap));       /* notes */
    --fab-slot-2: calc(var(--fab-right-base) + var(--fab-gap) * 2);   /* chat  */
    --fab-slot-3: calc(var(--fab-right-base) + var(--fab-gap) * 3);   /* bug   */
    --fab-slot-4: calc(var(--fab-right-base) + var(--fab-gap) * 4);   /* search — meest links */
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    font-family: var(--font-body);
    background: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
    min-block-size: 100dvh;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* Headings get balanced wrapping; paragraphs get pretty (no orphans). */
h1, h2, h3, h4, .modal-title, .char-name { text-wrap: balance; }
p, .desc, .feat-desc, .spell-desc, .quote-text, .blockquote { text-wrap: pretty; }

/* ===== SCROLLBAR ===== */
/* Modern (Firefox + Chromium 121+): scrollbar-color + scrollbar-width */
* { scrollbar-color: var(--border) var(--bg-dark); scrollbar-width: thin; }
/* Webkit fallback for Safari < 17 / older Chromium */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ===== PARTICLES ===== */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .particle { animation: float 8s infinite ease-in-out; }
}

@keyframes float {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
    50% { opacity: 0.6; transform: translateY(-80px) scale(1); }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes tooltipIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px var(--accent-glow); }
    50% { box-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-glow); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== TOP NAVBAR =====
   Warm-palette glass navbar. Padding uses max() to honor BOTH a minimum
   breathing-room AND notch safe-area-inset on phones — neither wins alone. */
.navbar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Guaranteed minimum breathing room on every device; grows on wide viewports. */
    padding-inline-start: max(env(safe-area-inset-left, 0px), clamp(1.25rem, 6vi, 6.5rem));
    padding-inline-end: max(env(safe-area-inset-right, 0px), clamp(1.25rem, 6vi, 6.5rem));
    gap: 1rem;
    block-size: 56px;
    background: color-mix(in oklab, var(--bg-dark) 88%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-block-end: 1px solid var(--hairline-gold);
    z-index: 100;
}

.nav-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    gap: 0.1rem;
}

.nav-logo {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-warm);
    text-decoration: none;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s, text-shadow 0.3s;
}

.campaign-subtitle {
    font-family: var(--font-display);
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-logo:hover {
    color: var(--text-bright);
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent-warm) 50%, transparent);
}

.nav-logo .logo-accent { color: var(--accent); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-links a,
.nav-link {
    color: var(--text-dim);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.3s;
    position: relative;
    padding-bottom: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.nav-icon {
    font-size: 1.25em;
    line-height: 1;
}
.nav-svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.nav-links a:hover,
.nav-link:hover { color: var(--text-bright); }

.nav-links a.active,
.nav-link.active { color: var(--accent-warm); }

.nav-links a.active::after,
.nav-link.active::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent-warm) 25%,
        var(--accent-warm) 75%,
        transparent 100%);
    border-radius: 2px;
}

.nav-back { opacity: 0.7; font-size: 0.8rem; }
.nav-back:hover { opacity: 1; }

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-block);
    cursor: pointer;
    transition: border-color 0.3s;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.nav-avatar:hover { border-color: var(--accent); }
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; }

.nav-logout {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.nav-logout:hover { border-color: var(--danger); color: var(--danger); }

.campaign-selector {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-bright);
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
    font-family: inherit;
    cursor: pointer;
    max-width: 120px;
}
.campaign-selector:focus { border-color: var(--accent); outline: none; }
.campaign-card {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}
.campaign-card.active { border-color: var(--accent-warm); background: color-mix(in srgb, var(--accent-warm) 5%, var(--bg-block)); }
.campaign-char-tag {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--hairline-gold);
    border-radius: 100px;
    margin: 0.15rem;
    color: var(--text-main);
}

/* Reusable subtle pill (burgundy/warm-tinted accent) — for "Current Arc" style tags */
.tag-pill {
    display: inline-block;
    font-size: 0.78rem;
    font-family: var(--font-body);
    padding: 0.25rem 0.7rem;
    background: var(--burgundy-soft);
    border: 1px solid color-mix(in srgb, var(--burgundy) 60%, transparent);
    border-radius: 6px;
    color: color-mix(in srgb, var(--burgundy) 30%, var(--text-main));
    white-space: nowrap;
}
.tag-pill.tag-pill-gold {
    background: color-mix(in srgb, var(--accent-warm) 10%, transparent);
    border-color: var(--accent-warm-soft);
    color: var(--accent-warm);
}
.tag-pill.tag-pill-cool {
    background: color-mix(in srgb, var(--accent-tertiary) 25%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: color-mix(in srgb, var(--accent) 60%, var(--text-main));
}

.campaign-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.nav-lang-btn {
    background: none;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--accent);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    letter-spacing: 0.05em;
}
.nav-lang-btn:hover {
    background: var(--accent);
    color: var(--bg-dark);
}

.nav-toggle { display: none; background: none; border: none; color: var(--text-main); font-size: 1.5rem; cursor: pointer; padding: 0.25rem; align-items: center; justify-content: center; }

/* ===== LOGIN PAGE ===== */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 100dvh;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 3rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    animation: fadeUp 0.6s ease-out;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.login-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-bright);
    margin-bottom: 0.25rem;
    letter-spacing: 1px;
}

.login-subtitle {
    font-size: 0.95rem;
    color: var(--text-dim);
    margin-bottom: 2rem;
}

.login-logo { font-size: 3rem; text-align: center; margin-bottom: 0.5rem; }
.login-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.login-field { display: flex; flex-direction: column; gap: 0.3rem; }
.login-label { font-size: 0.8rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.login-input { padding: 0.75rem 1rem; background: var(--bg-dark); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-main); font-size: 1rem; font-family: inherit; transition: border-color 0.2s; }
.login-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.login-submit { padding: 0.75rem; background: var(--accent); color: var(--bg-dark); border: none; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.2s; margin-top: 0.5rem; font-family: inherit; }
.login-submit:hover { filter: brightness(1.1); transform: translateY(-1px); }
.login-error { color: var(--danger); font-size: 0.85rem; text-align: center; margin-top: 0.5rem; }

/* ===== PAGE WRAPPERS (dashboard = campaign-home, party, DM tools, etc.) =====
   .dashboard here is the legacy page-wrapper (padding/max-width). Character
   widget-grid styling lives in dashboard.css scoped to .tab-content > .dashboard
   so it doesn't conflict with this page-layout primitive. */
.dashboard {
    padding-block-start: 76px;
    max-inline-size: 1100px;
    margin-inline: auto;
    padding-inline: 2rem;
    padding-block-end: 4rem;
    position: relative;
    z-index: 1;
}

/* ===== WELCOME BANNER =====
   "Parchment lit by candlelight" — layered radial highlights over a warm
   burgundy/bg-card base. Uses oklab interpolation for smooth gradients,
   color-mix() for tonal relationships, and mask-image for soft edge fade.
   Ornament strips top + bottom evoke book binding without being literal. */
.welcome-banner {
    text-align: center;
    padding-block: clamp(2.5rem, 6vi, 4rem) clamp(2rem, 4vi, 2.5rem);
    padding-inline: clamp(1.5rem, 4vi, 3rem);
    margin-block-end: 2.5rem;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    container-type: inline-size;

    /* Layered backgrounds (top to bottom in stacking):
       1. Top-left warm-gold candle glow
       2. Bottom-right cool teal counterpoint (deep, almost hidden)
       3. Diagonal burgundy → card base
       All interpolated in oklab for perceptually smooth blending. */
    background:
        radial-gradient(ellipse 60% 80% at 18% 22%,
            color-mix(in oklab, var(--accent-warm) 22%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse 50% 60% at 82% 85%,
            color-mix(in oklab, var(--accent-tertiary) 28%, transparent) 0%,
            transparent 65%),
        linear-gradient(135deg in oklab,
            color-mix(in oklab, var(--burgundy) 22%, var(--bg-card)) 0%,
            var(--bg-card) 55%,
            color-mix(in oklab, var(--bg-dark) 60%, var(--bg-card)) 100%);
    border: 1px solid var(--hairline-gold);

    /* Soft inner glow without an extra box-shadow ring */
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--accent-warm) 18%, transparent),
        inset 0 -40px 60px -40px color-mix(in srgb, var(--bg-dark) 80%, transparent),
        0 20px 50px -20px color-mix(in srgb, var(--bg-dark) 90%, transparent);
}

/* Top binding strip — three-part serif ornament that fades to edges */
.welcome-banner::before {
    content: '';
    position: absolute;
    inset-block-start: 14px;
    inset-inline: 12%;
    block-size: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--accent-warm) 45%, transparent) 18%,
        var(--accent-warm) 50%,
        color-mix(in srgb, var(--accent-warm) 45%, transparent) 82%,
        transparent 100%);
    z-index: -1;
}

/* Bottom binding strip mirrored, plus subtle paper-grain texture */
.welcome-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background:
        linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--accent-warm) 45%, transparent) 18%,
            var(--accent-warm) 50%,
            color-mix(in srgb, var(--accent-warm) 45%, transparent) 82%,
            transparent 100%) no-repeat,
        repeating-linear-gradient(115deg,
            transparent 0 3px,
            color-mix(in srgb, var(--accent-warm) 1.8%, transparent) 3px 5px);
    background-size: 100% 1px, 100% 100%;
    background-position: 0 calc(100% - 14px), 0 0;
    mix-blend-mode: screen;
    opacity: 0.6;
}

.welcome-banner h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 4.5vi, 2.75rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-warm);
    /* Stacked shadows: deep contact + soft gold halo (a la letterpress + candlelight) */
    text-shadow:
        0 1px 0 color-mix(in srgb, var(--bg-dark) 80%, transparent),
        0 2px 18px color-mix(in srgb, var(--accent-warm) 25%, transparent);
    margin-block-end: 0.4rem;
}
/* Diamond ornament after the title, like wizard-title elsewhere — visual link */
.welcome-banner h1::after {
    content: ' ◆';
    color: color-mix(in srgb, var(--accent-warm) 55%, transparent);
    font-size: 0.55em;
    letter-spacing: 0;
    margin-inline-start: 0.4em;
    vertical-align: 0.2em;
}

.welcome-banner .campaign-name {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.6vi, 1.2rem);
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--accent-warm) 75%, var(--text-main));
    margin-block-end: 0.25rem;
}

.welcome-banner .welcome-user,
.welcome-banner .text-dim {
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--accent-warm) 30%, var(--text-dim));
    letter-spacing: 0.02em;
}

/* Subtle entrance: only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
    .welcome-banner { animation: fadeUp 0.6s ease-out; }
}

/* When the banner narrows below 480px (container width, not viewport),
   collapse the binding strips and reduce ornament noise. */
@container (inline-size < 480px) {
    .welcome-banner::before { inset-inline: 18%; }
    .welcome-banner::after { opacity: 0.4; }
    .welcome-banner h1::after { display: none; }
}

.quick-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.quick-link {
    padding: 0.5rem 1.2rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.quick-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

/* Party overview */
.party-section {
    margin-bottom: 3rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-warm);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hairline-gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-title .title-action {
    font-size: 0.78rem;
    color: var(--accent);
    cursor: pointer;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    font-family: var(--font-body);
    transition: opacity 0.2s;
}

.section-title .title-action:hover { opacity: 0.8; }

/* ===== GLOBAL PAGE HEADINGS — display-serif warm-gold identity =====
   Matches the Cinzel display font + warm palette.
   Applies to main-content but NOT to widget headers (dashboard handles its own typography). */
.main-content :is(h1, h2, .page-title),
.page-header :is(h1, h2),
.home-section > h2,
.dm-page > h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-warm);
}
/* Exclude widget headers and any heading inside dashboard widgets */
.widget :is(h1, h2, h3, h4, .widget-text-title) {
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}
.main-content :is(h1, .page-title),
.page-header h1,
.home-section > h2 {
    font-size: clamp(1.5rem, 2.2vi, 2rem);
}
.main-content h2:not(.widget *):not(.section-title),
.page-header h2 {
    font-size: clamp(1.2rem, 1.8vi, 1.5rem);
}
.page-header {
    margin-block-end: 1.5rem;
}
.page-header .page-subtitle {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-block-start: 0.25rem;
    font-family: var(--font-body);
    letter-spacing: normal;
    text-transform: none;
}

/* ===== CHARACTER CARD GRID ===== */
.character-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.char-card {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--text-main);
    border: 1px solid var(--border);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: var(--bg-card);
    animation: fadeUp 0.5s ease-out both;
}

.char-card:hover {
    transform: translateY(-6px);
    border-color: var(--card-accent, var(--accent));
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px color-mix(in srgb, var(--card-accent, var(--accent)) 20%, transparent);
}

/* Char-card edit/delete acties (#1/#4) — overlay rechtsboven, zichtbaar op hover/touch */
.char-card-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.35rem;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.char-card:hover .char-card-actions,
.char-card:focus-within .char-card-actions { opacity: 1; }
@media (hover: none) { .char-card-actions { opacity: 1; } }
.char-card-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.55);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.char-card-action-btn:hover { background: rgba(0,0,0,0.8); border-color: var(--card-accent, var(--accent)); }
.char-card-action-danger:hover { border-color: var(--danger); color: var(--danger); }

/* Prullenbak-sectie (#4) */
.char-trash-section { margin-top: 2rem; }
.char-trash-title { font-size: 1rem; opacity: 0.85; }
.char-trash-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.char-trash-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}
.char-trash-name { font-weight: 600; }
.char-trash-meta { color: var(--text-dim); font-size: 0.8rem; margin-left: auto; }

/* Delete-character confirm modal (#4) */
.char-delete-modal-wrap { position: fixed; inset: 0; z-index: 10002; }
.char-delete-modal {
    max-width: 460px;
    width: calc(100% - 2rem);
    margin: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.char-delete-warn { color: var(--text-dim); line-height: 1.5; }
.char-delete-prompt code {
    background: var(--bg-block);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    color: var(--danger);
    font-weight: 600;
}
.char-delete-input {
    width: 100%;
    margin: 0.75rem 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-block);
    color: var(--text-main);
    font-size: 0.95rem;
}
.char-delete-input:focus { outline: none; border-color: var(--danger); }
.char-delete-confirm { width: 100%; }
.btn-danger {
    background: var(--danger);
    color: #fff;
    border: 1px solid var(--danger);
}
.btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }

.char-card:nth-child(1) { animation-delay: 0.05s; }
.char-card:nth-child(2) { animation-delay: 0.1s; }
.char-card:nth-child(3) { animation-delay: 0.15s; }
.char-card:nth-child(4) { animation-delay: 0.2s; }
.char-card:nth-child(5) { animation-delay: 0.25s; }
.char-card:nth-child(6) { animation-delay: 0.3s; }

.char-card-img {
    position: absolute;
    inset: 0;
}

.char-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.char-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--text-dim);
    opacity: 0.3;
    background: var(--bg-block);
}

.char-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.8) 70%);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.char-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-bright);
}

.char-card-detail {
    font-size: 0.78rem;
    color: var(--text-dim);
}

.char-card-hp {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    position: relative;
    margin-top: 0.2rem;
}
.char-card-hp-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.char-card-hp-text { position: absolute; top: -12px; right: 0; font-size: 0.6rem; color: var(--text-dim); }

.char-card-badge {
    font-size: 0.65rem;
    background: var(--card-accent, var(--accent));
    color: var(--bg-dark);
    padding: 0.1rem 0.5rem;
    border-radius: 100px;
    font-weight: 700;
    width: fit-content;
    margin-top: 0.2rem;
}

/* Card for adding new character */
.char-card-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    min-height: 260px;
    cursor: pointer;
    transition: all 0.3s;
    color: var(--text-dim);
    gap: 0.75rem;
}

.char-card-add:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-4px);
}

.char-card-add .add-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.char-card-add .add-label {
    font-size: 0.9rem;
    font-weight: 500;
}

/* ===== CHARACTER SHEET ===== */
/* WGI-M4 (2026-05-27): voormalige `.character-page` grid (0/1fr/80px met
   left-rail/main-col/right-rail) gesloopt. Widget Grid V8 mount inline en
   krijgt een volle flex-shell. De `.char-left-rail/main-col/right-rail`
   selectors zijn dode code sinds de nuke (commit 41e4257) en blijven hier
   alleen als CSS-stubs voor referentie. FABs (body-level fixed) en
   dashboard-toolbar (fixed) overlappen WidgetGrid nu rechtstreeks. */
.character-page {
    margin: 0;
    padding: 0;
    max-width: none;
    /* Full viewport hoogte zodat de sidebars tot de bodem doorlopen.
       FAB-clearance wordt in main.app-main toegepast (zie wg-style.css),
       niet hier — anders worden ook de sidebars ingekort. */
    block-size: 100dvh;
    inline-size: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
/* Verberg DnD navbar op character-pages — WidgetGrid's situation-tabs zijn
   de enige topbar. `body[data-route^="characters/"]` wordt gezet in renderApp. */
body[data-route^="characters/"] .navbar,
body[data-route^="dm"] .navbar {
    display: none;
}

/* WGI: back-link links-boven op character-pages — enige nav terug naar
   campaign view nu de DnD-navbar verborgen is. Geplaatst over V8's
   topbar-spacer-left (56px breed) zodat hij naadloos in de topbar valt. */
.char-back-btn {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 56px;
    height: 41px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-dim);
    border: none;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}
.char-back-btn:hover,
.char-back-btn:focus-visible {
    color: var(--char-accent, var(--accent));
    background: rgba(255,255,255,0.05);
    outline: none;
}
.char-back-btn:active { transform: translateY(1px); }
.char-back-btn svg { width: 18px; height: 18px; }

/* Banner image */
.char-banner {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: relative;
    overflow: hidden;
    background: var(--bg-block);
    margin-top: 1rem;
    z-index: 1;
}

.char-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.char-banner .banner-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-dim);
    opacity: 0.3;
    background: linear-gradient(135deg, var(--bg-block), var(--bg-elevated));
}

.char-banner .image-upload-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
}

.char-banner:hover .image-upload-overlay { opacity: 1; }

/* Portrait overlapping banner */
.char-top-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.75rem 2rem 0.25rem;
    min-height: 0;
}

/* Char-banner is uitgefaseerd; verberg restjes van oude states */
.char-banner { display: none !important; }

.char-portrait-wrap {
    position: relative;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    z-index: 2;
    display: inline-block;
}

.char-portrait {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--char-accent, var(--accent));
    object-fit: cover;
    background: var(--bg-block);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.char-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.char-portrait .portrait-placeholder {
    font-size: 2.5rem;
    opacity: 0.3;
}

.char-portrait .image-upload-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
}

.char-portrait-wrap:hover .image-upload-overlay,
.char-portrait:hover .image-upload-overlay { opacity: 1; }

.upload-icon {
    font-size: 1.5rem;
    color: var(--text-bright);
    opacity: 0.8;
}

/* Character header info */
.char-header {
    padding: 1rem 2rem 1.5rem;
    position: relative;
    animation: fadeUp 0.5s ease-out;
}

.char-header-info {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.char-header h1 {
    font-size: 2.2rem;
    color: var(--text-bright);
    margin-bottom: 0.15rem;
    line-height: 1.2;
}

.char-title {
    font-size: 1rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.char-quote-dynamic {
    font-style: italic;
    color: var(--text-dim);
    font-size: 0.9rem;
    max-width: 550px;
}

.header-top-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    position: relative;
}

.header-info { text-align: center; }
.header-info h1 { font-size: 2.2rem; color: var(--text-bright); margin-bottom: 0.25rem; }

.header-quote-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.quote-refresh-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.quote-refresh-btn:hover { opacity: 1; }

/* Header actions dropdown */
.header-actions {
    position: absolute;
    top: 0.5rem;
    right: 1.5rem;
    z-index: 3;
}

/* DM page head: page title + inline DM-mode toggle (verplaatst uit navbar) */
.dm-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.dm-page-head .page-title { margin: 0; }
.dm-toggle-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}
.dm-toggle-inline:hover { border-color: var(--accent); color: var(--text-bright); }
.dm-toggle-inline.active {
    background: rgba(34, 211, 238, 0.12);
    border-color: var(--accent);
    color: var(--accent);
}
.dm-toggle-inline .nav-svg { width: 16px; height: 16px; }

/* Char-identity-card binnen Overview-tab — portret + naam/race/class/level/xp.
   Profielfoto leeft alleen hier (niet op andere character-tabs). */
.char-identity-card {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    animation: fadeUp 0.4s ease-out;
}
.char-identity-portrait { flex: 0 0 auto; margin: 0; }
.char-identity-info { flex: 1 1 auto; min-width: 0; }
.char-identity-card .char-name-wrap { margin: 0 0 0.4rem; }
.char-identity-card .char-title { margin: 0 0 0.85rem; color: var(--text-dim); font-size: 0.95rem; }
.char-identity-card .level-control { margin-bottom: 0.6rem; }
.char-identity-card .xp-tracker { margin-top: 0.25rem; }
/* Extras-blok onderin identity-card: quote + combat-stats + info-grid (niet-dubbele velden) */
.char-identity-card { flex-wrap: wrap; }
.char-identity-extras {
    flex: 1 0 100%;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.char-identity-extras .header-quote-row { margin: 0; }
.char-identity-extras .combat-stats { margin: 0; }
.char-identity-extras .info-grid { margin: 0; }
@media (max-width: 600px) {
    .char-identity-card { flex-direction: column; align-items: center; text-align: center; }
    .char-identity-card .char-name-wrap { justify-content: center; }
    .char-identity-card .level-control { justify-content: center; }
}

.options-toggle {
    padding: 0.3rem 0.7rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.options-toggle:hover { border-color: var(--text-dim); color: var(--text-main); }

.options-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.25rem;
    min-width: 140px;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    flex-direction: column;
    gap: 0.1rem;
}

.header-actions.open .options-menu { display: flex; }

.header-btn {
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    text-align: start;
}

.header-btn:hover { background: var(--bg-block); color: var(--text-main); }
.header-btn-danger:hover { color: var(--danger); }

/* Level control */
.level-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.level-display {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-bright);
    min-width: 100px;
    text-align: center;
}

.level-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-block);
    color: var(--text-bright);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.level-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(1.1);
}

.level-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ===== TAB BAR ===== */
.tab-bar {
    display: flex;
    gap: 0.25rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tab-bar::-webkit-scrollbar { display: none; }

.tab-btn {
    padding: 0.6rem 1.2rem;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    font-size: 0.9rem;
    font-family: inherit;
    transition: color 0.2s;
}

.tab-btn:hover { color: var(--text-main); }

.tab-btn.active { color: var(--accent); }

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
}

.tab-content {
    padding: 0.5rem 0 0 0;
    animation: fadeIn 0.3s ease-out;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.char-main-col > .tab-bar { flex-shrink: 0; }

/* ===== SHEET GRID (reused from character sheet tabs) ===== */
.sheet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.sheet-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    animation: fadeUp 0.5s ease-out both;
}
.sheet-block-wide { grid-column: 1 / -1; }

.sheet-block:nth-child(1) { animation-delay: 0.05s; }
.sheet-block:nth-child(2) { animation-delay: 0.1s; }
.sheet-block:nth-child(3) { animation-delay: 0.15s; }
.sheet-block:nth-child(4) { animation-delay: 0.2s; }
.sheet-block:nth-child(5) { animation-delay: 0.25s; }
.sheet-block:nth-child(6) { animation-delay: 0.3s; }
.sheet-block:nth-child(7) { animation-delay: 0.35s; }
.sheet-block:nth-child(8) { animation-delay: 0.4s; }
.sheet-block:nth-child(9) { animation-delay: 0.45s; }
.sheet-block:nth-child(10) { animation-delay: 0.5s; }

.sheet-block h2 {
    font-size: 0.9rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.highlight-block {
    border-color: var(--accent-dark);
    background: linear-gradient(135deg, var(--bg-card), var(--accent-glow));
}

.highlight-block-ren {
    border-color: var(--accent-dark);
    background: linear-gradient(135deg, var(--bg-card), rgba(34, 211, 238, 0.04));
}

.highlight-block-saya {
    border-color: #db2777;
    background: linear-gradient(135deg, var(--bg-card), rgba(244, 114, 182, 0.04));
}

.personality-block { grid-column: 1 / -1; }
.info-block { grid-column: 1 / -1; }

/* ===== INFO GRID ===== */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.info-item .label {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-item .value {
    font-weight: 600;
    color: var(--text-bright);
}

.info-item[data-tooltip] {
    cursor: help;
    transition: color 0.2s;
}

.info-item[data-tooltip]:hover .value { color: var(--accent); }

/* Info-grid inline editing */
.info-item {
    position: relative;
}
.info-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.65rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    position: absolute;
    top: 0;
    right: 0;
}
.info-item:hover .info-edit-btn { opacity: 1; }
.info-edit-btn:hover { color: var(--accent); border-color: var(--accent); }
.info-edit-select, .info-edit-input {
    width: 100%;
    padding: 0.3rem 0.5rem;
    background: var(--bg-dark);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.85rem;
    font-family: inherit;
}
.info-edit-select:focus, .info-edit-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 34,211,238), 0.25);
}

/* Weapon add form */
.weapon-add-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-block);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.weapon-add-form .edit-input {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
}
.weapon-finesse-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-dim);
    font-size: 0.85rem;
    cursor: pointer;
}

/* ===== ABILITY SCORES ===== */
.ability-scores {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
}

.ability {
    text-align: center;
    background: var(--bg-block);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.25rem;
    border: 1px solid var(--border);
    transition: border-color 0.3s;
    cursor: default;
}

.ability:hover { border-color: #555; }

.ability-primary {
    border-color: var(--accent) !important;
    box-shadow: 0 0 15px var(--accent-glow);
}

.ability-primary-saya {
    border-color: #f472b6 !important;
    box-shadow: 0 0 15px rgba(244, 114, 182, 0.15);
}

.ability-name {
    display: block;
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.ability-score {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-bright);
}

.ability-mod {
    display: block;
    font-size: 0.85rem;
    color: var(--gold);
    font-weight: 600;
}

/* Ability edit mode */
.ability-edit-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.edit-toggle-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    transition: all 0.2s;
    line-height: 1;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.edit-toggle-btn:hover { border-color: var(--gold); color: var(--gold); }

.edit-mode-active .ability {
    border-color: var(--border-light);
}

.ability-adj {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 0.65rem;
    cursor: pointer;
    padding: 0.1rem;
    line-height: 1;
    transition: color 0.2s;
}

.ability-adj:hover { color: var(--gold); }

.ability-edit-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.75rem;
}

.ability-edit-btn {
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--success);
    background: rgba(74, 222, 128, 0.15);
    color: var(--success);
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.ability-edit-btn:hover { filter: brightness(1.2); }

.ability-edit-cancel {
    border-color: var(--border);
    background: var(--bg-block);
    color: var(--text-dim);
}

/* ===== COMBAT STATS ===== */
.combat-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.75rem;
}

.combat-stat {
    text-align: center;
    background: var(--bg-block);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
}

.stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-bright);
}

.stat-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.2rem;
}

/* ===== SAVING THROWS & SKILLS ===== */
.saves-list, .skills-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.save, .skill {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text-dim);
}

.save.prof, .skill.prof {
    background: var(--bg-block);
    color: var(--text-bright);
    font-weight: 600;
    border-left: 3px solid var(--accent);
}

.skill.expertise {
    background: var(--bg-block);
    color: var(--text-bright);
    font-weight: 700;
    border-left: 3px solid var(--gold);
}

.skill-ability {
    font-size: 0.7rem;
    color: var(--text-dim);
    font-weight: 400;
    opacity: 0.7;
}

/* ===== WEAPONS ===== */
.weapons-table {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.weapon {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 0.6rem 0.8rem;
    background: var(--bg-block);
    border-radius: var(--radius-sm);
}

.weapon-name {
    font-weight: 600;
    color: var(--text-bright);
    font-size: 0.9rem;
}

.weapon-hit {
    font-weight: 700;
    color: var(--accent);
}

.weapon-dmg {
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* ===== FEATURES ===== */
.features-summary {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    grid-column: 1 / -1;
}
.features-summary > h2 {
    width: 100%;
    flex-shrink: 0;
}
.features-category {
    flex: 1 1 250px;
    min-width: 200px;
}
.features-category > h3 {
    margin-bottom: 0.5rem;
}
.feature-card {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.4rem;
    break-inside: avoid;
}

.feature-card h4 {
    color: var(--text-bright);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.feature-card p {
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.5;
}

.feature-level {
    font-weight: 400;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.feature-card.new-feature {
    border-color: var(--gold);
    background: rgba(240, 192, 64, 0.06);
}

.block-note {
    color: var(--text-dim);
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 1rem;
}

/* ===== SPELLS ===== */
.spell-header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.spell-stat {
    text-align: center;
    background: var(--bg-block);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
}

.spell-stat .label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.spell-stat .value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
}

.spell-level-header {
    color: var(--text-bright);
    font-size: 0.9rem;
    margin: 1rem 0 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
}

.slots {
    font-weight: 400;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.prepared-counter .value {
    color: var(--accent) !important;
}

/* Spell toggle grid */
.spell-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.spell-toggle {
    padding: 0.4rem 0.8rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.spell-toggle:hover {
    border-color: var(--text-dim);
    color: var(--text-main);
}

.spell-toggle.prepared {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.spell-toggle.selected {
    background: var(--accent-glow);
    border-color: var(--accent-dark);
    color: var(--text-bright);
    font-weight: 600;
}

.spell-toggle.locked {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Spell star favorites */
.spell-star {
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0.3;
    transition: opacity 0.2s;
    user-select: none;
}

.spell-star:hover { opacity: 0.7; }
.spell-star.favorited { opacity: 1; color: var(--gold); }

/* Spell filter bar */
.spell-filter-bar {
    display: flex;
    gap: 0.4rem;
    margin: 0.75rem 0;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.35rem 0.8rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.filter-btn:hover { border-color: var(--text-dim); }

.filter-btn.active {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* Spell prep note */
.spell-prep-note {
    background: var(--bg-block);
    border: 1px solid var(--accent-dark);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.5;
}

.spell-prep-note strong { color: var(--accent); }
.spell-prep-note em { color: var(--text-main); }

.spell-prepared { border-left: 3px solid var(--accent); }

/* ===== METAMAGIC GRID ===== */
.metamagic-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.metamagic-option {
    padding: 0.6rem 1rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: start;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.metamagic-option:hover:not(.locked) {
    border-color: var(--accent);
    color: var(--text-main);
}

.metamagic-option.chosen {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
}

.metamagic-option.chosen strong { color: var(--text-bright); }

.metamagic-option.locked {
    opacity: 0.35;
    cursor: not-allowed;
}

.meta-cost {
    font-weight: 400;
    color: var(--text-dim);
    font-size: 0.8rem;
}

/* ===== ASI PANELS ===== */
.asi-panel {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.asi-panel h4 {
    color: var(--gold);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.asi-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.asi-option {
    padding: 0.4rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.asi-option:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
}

.asi-option:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.asi-option.asi-reset {
    background: transparent;
    border-color: var(--border);
    color: var(--text-dim);
    font-size: 0.8rem;
}

.asi-chosen {
    color: var(--text-main);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.asi-ability-picker {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.asi-ability-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.5rem;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-main);
}

.asi-ability-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-block);
    color: var(--text-bright);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.asi-ability-btn:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
}

.asi-ability-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ===== FEAT GRID ===== */
.feat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.feat-card {
    padding: 0.5rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: start;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.feat-card:hover:not(.unavailable) {
    border-color: var(--gold);
    color: var(--gold);
}

.feat-card.unavailable {
    opacity: 0.3;
    cursor: not-allowed;
}

.feat-card.selected {
    border-color: var(--accent);
    background: var(--accent-glow);
    color: var(--accent);
    font-weight: 600;
}

.feat-prereq {
    font-size: 0.7rem;
    color: var(--text-dim);
    font-style: italic;
}

/* ===== PERSONALITY ===== */
.personality-item {
    margin-bottom: 1.25rem;
}

.personality-item:last-child { margin-bottom: 0; }

.personality-item h3 {
    font-size: 0.85rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
}

.personality-item p {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.6;
}

.personality-item em { color: var(--text-main); }

/* ===== APPEARANCE ===== */
.appearance-mini {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.appearance-mini h2 { width: 100%; }
.appearance-mini p { flex: 1; min-width: 250px; color: var(--text-dim); line-height: 1.7; order: 0; }

.appearance-img-frame {
    width: 220px;
    min-width: 220px;
    height: 320px;
    border-radius: var(--radius);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    order: 2;
    position: relative;
    margin-left: auto;
}

.appearance-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.appearance-img-placeholder {
    color: var(--text-dim);
    opacity: 0.4;
    font-size: 0.9rem;
}

/* ===== ITEMS SYSTEM ===== */
.items-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.weight-total {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.encumbrance-status {
    font-size: 0.8rem;
    font-weight: 600;
}

.enc-ok { color: var(--success); }
.enc-medium { color: var(--warning); }
.enc-heavy { color: var(--danger); }

.item-add-btn {
    padding: 0.3rem 0.7rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    margin-left: auto;
}

.item-add-btn:hover { border-color: var(--gold); color: var(--gold); }

.items-grid {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.item-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.35rem 0.6rem;
    background: var(--bg-block);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.item-name { color: var(--text-main); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.item-mastery {
    font-size: 0.65rem;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    padding: 0.1rem 0.4rem;
    border-radius: 100px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: help;
}
.item-weight { color: var(--text-dim); font-size: 0.75rem; white-space: nowrap; }
.item-notes { color: var(--text-dim); font-size: 0.75rem; font-style: italic; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.item-remove {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.2rem;
    opacity: 0.5;
    transition: all 0.2s;
}

.item-remove:hover { color: var(--danger); opacity: 1; }

.item-add-form {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.item-add-form input {
    padding: 0.35rem 0.5rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.8rem;
    font-family: inherit;
}

.item-add-form input:focus {
    outline: none;
    border-color: var(--accent);
}

.item-name-input { flex: 1; min-width: 120px; }

.item-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.item-autocomplete-option {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-main);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}

.item-autocomplete-option:last-child { border-bottom: none; }
.item-autocomplete-option:hover, .item-autocomplete-option:active {
    background: var(--bg-block);
    color: var(--accent);
}
.item-weight-input { width: 80px; }
.item-notes-input { flex: 1; min-width: 100px; }

.item-confirm-btn, .item-cancel-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.item-confirm-btn { background: rgba(74, 222, 128, 0.15); border-color: var(--success); color: var(--success); }
.item-cancel-btn { background: var(--bg-block); color: var(--text-dim); }

/* ===== TOOLTIP SYSTEM ===== */
.tooltip-popup {
    position: fixed;
    z-index: 1000;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    max-width: 300px;
    min-width: 180px;
    pointer-events: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: tooltipIn 0.15s ease-out;
}

.tooltip-popup h4 {
    color: var(--text-bright);
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

.tooltip-popup p, .tooltip-popup div {
    color: var(--text-dim);
    font-size: 0.8rem;
    line-height: 1.5;
}

.tooltip-popup .tooltip-row {
    display: flex;
    justify-content: space-between;
    padding: 0.15rem 0;
}

.tooltip-popup .tooltip-label {
    color: var(--text-dim);
    font-size: 0.75rem;
}

.mastery-tooltip { padding: 0.25rem 0; }
.mastery-tooltip-title {
    color: var(--accent);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
}

.tooltip-popup .tooltip-value {
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Spell tooltip */
.spell-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.4rem 0;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.spell-desc {
    color: var(--text-dim);
    font-size: 0.8rem;
    line-height: 1.5;
    margin-top: 0.3rem;
}

.spell-img-space {
    width: 100%;
    height: 80px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--text-dim);
    opacity: 0.4;
}

/* Ability score breakdown tooltip */
.stat-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.stat-breakdown-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

.stat-breakdown-row .label { color: var(--text-dim); }
.stat-breakdown-row .val { color: var(--text-main); font-weight: 600; }
.stat-breakdown-row.total { border-top: 1px solid var(--border); padding-top: 0.3rem; margin-top: 0.2rem; }
.stat-breakdown-row.total .label { color: var(--text-bright); }
.stat-breakdown-row.total .val { color: var(--gold); }

/* ===== TOOLTIP CARDS (tc-* system) ===== */
.tc-card {
    position: fixed;
    z-index: 1000;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    max-width: 320px;
    min-width: 200px;
    pointer-events: none;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    animation: tooltipIn 0.15s ease-out;
}

.tc-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 0.4rem;
}

.tc-subtitle {
    font-size: 0.75rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.tc-body {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.tc-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.tc-tag {
    padding: 0.15rem 0.4rem;
    background: var(--bg-block);
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--text-dim);
}

.tc-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.5rem 0;
}

.tc-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.1rem 0;
    font-size: 0.8rem;
}

.tc-stat-label { color: var(--text-dim); }
.tc-stat-value { color: var(--text-main); font-weight: 600; }

.tc-highlight {
    color: var(--accent);
    font-weight: 600;
}

.tc-spell-school {
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 500;
}

.tc-image {
    width: 100%;
    height: 80px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-block);
}

.tc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== IMAGE UPLOAD OVERLAYS ===== */
.image-upload-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.4rem;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
    border-radius: inherit;
    z-index: 3;
}

.image-upload-overlay:hover { opacity: 1; }

.image-upload-overlay .upload-icon {
    font-size: 1.5rem;
    color: var(--text-bright);
}

.image-upload-overlay .upload-label {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.image-upload-input {
    display: none;
}

/* ===== CHARACTER CREATION WIZARD ===== */
.wizard-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn 0.2s ease-out;
}

.wizard-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    animation: fadeUp 0.3s ease-out;
}

.wizard-card h2 {
    font-size: 1.5rem;
    color: var(--text-bright);
    margin-bottom: 0.5rem;
}

.wizard-step-indicator {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

/* Legacy progress-bar dots — gescoped op de (ongebruikte) oude indicator zodat
   ze niet in de live .wizard-steps stepper lekken (#EG9koC). */
.wizard-step-indicator .wizard-step-dot {
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    transition: background 0.3s;
}
.wizard-step-indicator .wizard-step-dot.active { background: var(--accent); }
.wizard-step-indicator .wizard-step-dot.completed { background: var(--success); }

.wizard-field {
    margin-bottom: 1.5rem;
}

.wizard-field label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wizard-field input,
.wizard-field select,
.wizard-field textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.wizard-field input:focus,
.wizard-field select:focus,
.wizard-field textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.wizard-field textarea {
    min-height: 100px;
    resize: vertical;
}

.wizard-field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8a9a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    padding-right: 2rem;
}

.wizard-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.wizard-option {
    padding: 0.6rem;
    background: var(--bg-block);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.wizard-option:hover { border-color: var(--text-dim); color: var(--text-main); }

.wizard-option.selected {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
}

.wizard-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    gap: 1rem;
}

.wizard-btn {
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    font-weight: 500;
}

.wizard-btn-primary {
    background: var(--accent);
    color: var(--bg-dark);
    border-color: var(--accent);
    font-weight: 700;
}

.wizard-btn-primary:hover { filter: brightness(1.15); }

.wizard-btn-secondary {
    background: var(--bg-block);
    color: var(--text-dim);
}

.wizard-btn-secondary:hover { color: var(--text-main); border-color: var(--text-dim); }

/* ===== LEVEL-UP MODAL ===== */
.levelup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn 0.2s ease-out;
}

.levelup-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    max-width: 700px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    animation: fadeUp 0.3s ease-out;
    position: relative;
}

.levelup-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.levelup-header {
    text-align: center;
    margin-bottom: 2rem;
}

.levelup-header h2 {
    font-size: 1.8rem;
    color: var(--text-bright);
    margin-bottom: 0.3rem;
}

.levelup-header .levelup-subtitle {
    color: var(--gold);
    font-size: 1.1rem;
}

.levelup-section {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.levelup-section h3 {
    font-size: 1rem;
    color: var(--text-bright);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.levelup-section p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
}

.levelup-feature {
    padding: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

.levelup-feature h4 {
    color: var(--accent);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.levelup-feature p {
    color: var(--text-dim);
    font-size: 0.8rem;
    line-height: 1.5;
}

.levelup-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.levelup-choice {
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    font-size: 0.85rem;
}

.levelup-choice:hover { border-color: var(--accent); color: var(--accent); }
.levelup-choice.selected { border-color: var(--accent); background: var(--accent-glow); color: var(--accent); font-weight: 600; }

.levelup-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* ===== GENERIC MODAL ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease-out;
}

.modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    animation: fadeUp 0.2s ease-out;
}

.modal-box h3 {
    font-family: var(--font-display);
    color: var(--accent-warm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 1.05rem;
    font-weight: 600;
    margin-block-end: 0.6rem;
}
.modal-box p { color: var(--text-dim); font-size: 0.9rem; margin-block-end: 1.5rem; }

/* ===== Image cropper ===== */
.crop-overlay { padding: 1rem; }
.crop-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    width: min(560px, 95vw);
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: fadeUp 0.2s ease-out;
}
.crop-modal-header h3 { margin: 0; color: var(--text-bright); }
.crop-stage {
    position: relative;
    width: 100%;
    height: min(60vh, 480px);
    background: #000;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.crop-stage:active { cursor: grabbing; }
.crop-img {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    max-width: none;
}
.crop-frame {
    position: absolute;
    border: 2px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
    pointer-events: none;
}
.crop-controls { display: flex; flex-direction: column; gap: 0.4rem; }
.crop-zoom-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-dim);
    font-size: 0.85rem;
}
.crop-zoom-label input[type="range"] { flex: 1; accent-color: var(--accent); }
.crop-hint { color: var(--text-dim); font-size: 0.8rem; margin: 0; }
.crop-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-btn {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.modal-btn:hover { filter: brightness(1.15); }

.modal-btn-danger { background: rgba(239, 68, 68, 0.15); border-color: var(--danger); color: var(--danger); }
.modal-btn-primary { background: rgba(74, 222, 128, 0.15); border-color: var(--success); color: var(--success); }
.modal-btn-cancel { background: var(--bg-block); color: var(--text-dim); }
.modal-btn-accent { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }

/* ===== MAPS PAGE ===== */
.maps-page { max-width: 1200px; margin: 0 auto; padding: 76px 2rem 5rem; position: relative; z-index: 1; display: flex; flex-direction: column; min-height: calc(100vh - 76px); }
.maps-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 1rem; }
.maps-header h1 { margin: 0; font-size: 1.8rem; color: var(--text-bright); }

/* Maps toolbar: dimension-dropdown + New map-knop (compact, bovenaan rechts) */
.maps-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.dimension-dropdown { position: relative; }
.dimension-toggle { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem; background: var(--bg-block); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-main); cursor: pointer; font-family: inherit; font-size: 0.9rem; transition: border-color 0.2s; }
.dimension-toggle:hover { border-color: var(--accent); }
.dimension-toggle-name { font-weight: 600; }
.dimension-caret { font-size: 0.7rem; color: var(--text-dim); transition: transform 0.2s; }
.dimension-dropdown.open .dimension-caret { transform: rotate(180deg); }
.dimension-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.25rem; display: none; flex-direction: column; gap: 2px; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,0.35); white-space: nowrap; }
.dimension-dropdown.open .dimension-menu { display: flex; }
.dimension-menu-item { text-align: left; padding: 0.5rem 0.85rem; background: none; border: none; border-radius: var(--radius-sm); color: var(--text-dim); cursor: pointer; font-family: inherit; font-size: 0.85rem; transition: all 0.15s; }
.dimension-menu-item:hover { color: var(--text-main); background: var(--bg-hover); }
.dimension-menu-item.active { background: var(--accent); color: var(--bg-dark); font-weight: 700; }
.dimension-menu-add { border-top: 1px solid var(--border); margin-top: 2px; color: var(--accent); font-weight: 600; }
.dimension-menu-add:hover { color: var(--accent); background: var(--bg-hover); }
.maps-new-btn { white-space: nowrap; }

/* Maps grid mode: main map vult de verticale ruimte (gecentreerd), overige
   maps als responsive cards eronder. */
.maps-grid-mode { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* Main map: links uitgelijnd (zelfde linkerrand als de "Maps" h1, net als de
   Party-titel boven de character cards) en gecapt zodat hij volledig in beeld
   past (geen overlap met pageNav/FABs). */
.map-main-stage { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: flex-start; margin-bottom: 0.5rem; }
.map-card-main { display: flex; flex-direction: column; align-items: flex-start; max-width: 720px; width: 100%; background: transparent; border: none; }
.map-card-main:hover { transform: none; box-shadow: none; border: none; }
.map-card-main .map-card-img { width: 100%; height: auto; max-height: calc(100vh - 300px); object-fit: contain; object-position: left top; border-radius: var(--radius); }
.map-card-main .map-card-placeholder { width: 100%; height: 40vh; border-radius: var(--radius); }
.map-card-main .map-card-info { flex: 0 0 auto; text-align: left; padding-top: 0.6rem; }
.map-card-main .map-card-name { font-size: 1.2rem; }
.map-main-empty { color: var(--text-dim); font-style: italic; }
.maps-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 16vw, 200px), 1fr)); gap: 1rem; margin-top: 1.5rem; }
.maps-card-grid .map-card-img,
.maps-card-grid .map-card-placeholder { height: auto; aspect-ratio: 16 / 10; }

/* Dimension Tabs */
.dimension-section { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.dimension-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); padding-left: 0.25rem; }
.dimension-tabs { display: flex; gap: 0.25rem; background: var(--bg-block); border-radius: var(--radius); padding: 0.25rem; }
.dimension-tab { padding: 0.5rem 1rem; background: none; border: none; border-radius: var(--radius-sm); color: var(--text-dim); cursor: pointer; font-size: 0.85rem; font-family: inherit; transition: all 0.2s; white-space: nowrap; }
.dimension-tab:hover { color: var(--text-main); }
.dimension-tab.active { background: var(--accent); color: var(--bg-dark); font-weight: 700; }
.dimension-add { color: var(--accent); font-weight: 700; }

/* Map Grid */
.maps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.map-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: all 0.3s; position: relative; }
.map-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.map-card-img { width: 100%; height: 160px; object-fit: cover; display: block; }
.map-card-placeholder { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; background: var(--bg-block); font-size: 3rem; color: var(--text-dim); opacity: 0.3; }
.map-card-info { padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.map-card-name { font-weight: 600; color: var(--text-bright); font-size: 0.95rem; }
.map-card-badge { font-size: 0.65rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }
.map-card-pins { font-size: 0.75rem; color: var(--text-dim); }

/* Maps grid: per main map een rij met de main + sub-maps daarnaast (sub = half size) */
.maps-row {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.maps-row > .map-card { flex: 0 0 280px; }
.maps-row-subs {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.6rem;
    align-content: start;
}
.maps-row-subs .map-card {
    width: 100%;
    aspect-ratio: 1.4;
}
.map-card-sub .map-card-img,
.map-card-sub .map-card-placeholder { font-size: 1.5rem; }
.map-card-sub .map-card-name { font-size: 0.85rem; }
.maps-row-orphans .maps-row-subs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.maps-row-add { margin-top: 0.5rem; }
@media (max-width: 700px) {
    .maps-row { flex-direction: column; }
    .maps-row > .map-card { flex: 0 0 auto; }
}
.map-card-delete { position: absolute; top: 0.5rem; right: 0.5rem; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
.map-card:hover .map-card-delete { opacity: 1; }
.map-card-delete:hover { color: var(--danger); }
.map-card-add { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; border-style: dashed; cursor: pointer; }
.map-card-add-icon { font-size: 2.5rem; color: var(--text-dim); opacity: 0.4; margin-bottom: 0.5rem; }
.map-card-add:hover { border-color: var(--accent); }
.map-card-add:hover .map-card-add-icon { color: var(--accent); opacity: 1; }

/* Map Viewer */
.map-breadcrumb { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.map-title { font-size: 1.1rem; font-weight: 700; color: var(--text-bright); }

.map-viewer { position: relative; width: 100%; height: 600px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: grab; }
.map-viewer:active { cursor: grabbing; }

.map-canvas { position: absolute; inset: 0; transform-origin: center center; transition: transform 0.1s ease-out; }

/* Type-selectors `img` / `div` matchen alleen HTML elementen, niet de
   gelijknamige SVG <image>/<rect> in het Widget Grid (waar dezelfde
   class-namen gebruikt worden). Zonder deze scope rekt `width:100%`
   het SVG <image>-element op tot de hele canvas-viewport, waardoor de
   profielfoto verkeerd geletterboxed wordt. */
img.map-image { width: 100%; height: 100%; object-fit: contain; pointer-events: auto; }

div.map-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; color: var(--text-dim); }
.map-upload-prompt { cursor: pointer; padding: 2rem; border: 2px dashed var(--border); border-radius: var(--radius); transition: border-color 0.2s; text-align: center; }
.map-upload-prompt:hover { border-color: var(--accent); color: var(--accent); }

/* Map Pin Shapes — SVG overlay (viewBox 0..100, % coords). Default invisible; hover shows outline + shade. */
.map-shapes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
.map-shapes .map-pin-g { pointer-events: auto; }
.map-shape {
    fill: transparent;
    stroke: transparent;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    transition: fill 0.18s ease, stroke 0.18s ease;
    cursor: default;
}
.map-shape.has-link { cursor: pointer; }
.map-shape:hover {
    fill: color-mix(in oklab, var(--accent) 18%, transparent);
    stroke: color-mix(in oklab, var(--accent) 75%, transparent);
}
/* In edit-mode: always show outline so DM can see + click shapes to select */
.map-canvas.is-editing-pins .map-shape {
    fill: color-mix(in oklab, var(--accent) 8%, transparent);
    stroke: color-mix(in oklab, var(--accent) 60%, transparent);
    stroke-dasharray: 3 2;
    cursor: pointer;
}
.map-canvas.is-editing-pins .map-shape:hover {
    fill: color-mix(in oklab, var(--accent) 22%, transparent);
    stroke: var(--accent);
    stroke-dasharray: none;
}
/* Selected area: thick solid gold border + draggable body */
.map-canvas.is-editing-pins .map-shape.is-selected {
    fill: color-mix(in oklab, var(--gold) 16%, transparent);
    stroke: var(--gold);
    stroke-width: 4;
    stroke-dasharray: none;
    cursor: move;
}
/* Transparent thick edge overlay on the selected area — catches border clicks to add a vertex */
.map-shape-edge {
    fill: none;
    stroke: transparent;
    stroke-width: 3.5;
    cursor: crosshair;
    pointer-events: stroke;
}
/* Edit handles: draggable nodes + center handle */
.shape-node, .shape-center {
    fill: var(--accent);
    stroke: white;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    cursor: grab;
    transition: r 0.15s ease;
}
.shape-node { fill: var(--gold); }
.shape-node:hover, .shape-center:hover { fill: var(--accent); }
.shape-node:active, .shape-center:active { cursor: grabbing; }
/* Centroid marker for unselected areas in edit mode — click to select */
.pin-dot {
    fill: var(--accent);
    stroke: white;
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    transition: fill 0.15s ease;
}
.pin-dot.has-link { fill: var(--gold); }
.pin-dot:hover { fill: white; }

/* Pin label — HTML overlay shown only in edit-mode (default-mode uses SVG <title> tooltip) */
.pin-label {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.85);
    color: var(--text-bright);
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 100px;
    white-space: nowrap;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    pointer-events: auto;
}
.pin-label.has-link { background: rgba(34, 211, 238, 0.3); border: 1px solid rgba(34, 211, 238, 0.5); }

/* Edit/delete buttons on label (only visible in edit mode) */
.pin-edit-btn {
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--border);
    color: var(--text-bright);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    margin-left: 0.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pin-edit-btn:hover { background: var(--accent); color: white; }
.pin-edit-delete:hover { background: var(--danger); }

/* Active state for the "Edit pin" toolbar toggle */
.btn.is-active { background: var(--accent); color: white; border-color: var(--accent); }

/* Family-diagram edit-member modal */
.famdiag-edit-box { max-width: 460px; width: 100%; }
.famdiag-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 0.75rem; margin-top: 1rem; }
.famdiag-edit-field { display: flex; flex-direction: column; gap: 0.35rem; }
.famdiag-edit-field span { font-size: 0.78rem; color: var(--text-dim); font-weight: 500; }
.famdiag-edit-field .edit-input { padding: 0.55rem 0.7rem; font-size: 0.9rem; }
@media (max-width: 500px) {
    .famdiag-edit-grid { grid-template-columns: 1fr; }
}

.map-breadcrumb-sep { color: var(--text-dim); font-size: 1.1rem; margin: 0 0.25rem; }

/* Pin Adding / Editing Mode toolbar */
.pin-add-overlay { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: var(--bg-card); border: 1px solid var(--accent); border-radius: var(--radius); padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 1rem; z-index: 30; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.pin-add-overlay p { margin: 0; font-size: 0.85rem; color: var(--text-main); }
.pin-edit-overlay { border-color: var(--gold); flex-direction: column; align-items: stretch; max-width: min(92vw, 680px); gap: 0.6rem; }
.pin-edit-overlay .pin-edit-hint { font-size: 0.78rem; color: var(--text-dim); text-align: center; }
.pin-edit-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.pin-round-ctl { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--text-main); padding: 0.2rem 0.55rem; border: 1px solid var(--border); border-radius: 100px; }
.pin-round-ctl input[type="range"] { width: 120px; accent-color: var(--gold); cursor: pointer; }
.pin-round-ctl .pin-round-val { min-width: 2.6em; text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pin-round-ctl.is-disabled { opacity: 0.45; }
.pin-edit-tools .btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ===== TIMELINE PAGE ===== */
.timeline-page {
    padding-top: 76px;
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 4rem;
    position: relative;
    z-index: 1;
}

.timeline-page h1 {
    font-size: 1.8rem;
    color: var(--text-bright);
    margin-bottom: 2rem;
    text-align: center;
}

.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), var(--gold), var(--accent));
}

.timeline-event {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 1.5rem;
    animation: fadeUp 0.5s ease-out both;
}

.timeline-event:nth-child(1) { animation-delay: 0.1s; }
.timeline-event:nth-child(2) { animation-delay: 0.2s; }
.timeline-event:nth-child(3) { animation-delay: 0.3s; }
.timeline-event:nth-child(4) { animation-delay: 0.4s; }
.timeline-event:nth-child(5) { animation-delay: 0.5s; }
.timeline-event:nth-child(6) { animation-delay: 0.6s; }
.timeline-event:nth-child(7) { animation-delay: 0.7s; }
.timeline-event:nth-child(8) { animation-delay: 0.8s; }

.timeline-event::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 0.5rem;
    width: 10px;
    height: 10px;
    background: var(--gold);
    border-radius: 50%;
    transform: translateX(-4px);
    box-shadow: 0 0 8px rgba(240, 192, 64, 0.3);
}

.timeline-event.highlight::before {
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
}

.timeline-year {
    color: var(--gold);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.timeline-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.timeline-content h3 {
    color: var(--text-bright);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.timeline-content p {
    color: var(--text-dim);
    line-height: 1.7;
}

.timeline-content em { color: var(--text-main); }

.timeline-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-card);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 1rem;
    margin-left: 1.5rem;
    font-size: 0.9rem;
}

.timeline-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ===== LORE PAGE ===== */
.lore-page {
    padding-top: 76px;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 4rem;
    position: relative;
    z-index: 1;
}

.lore-sidebar {
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: 76px;
    height: fit-content;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}

.lore-sidebar-title {
    font-size: 0.85rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.lore-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lore-nav-item {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: none;
    text-align: start;
    font-family: inherit;
}

.lore-nav-item:hover { color: var(--text-main); background: var(--bg-block); }
.lore-nav-item.active { color: var(--accent); background: var(--accent-glow); font-weight: 600; }

.lore-nav-group {
    margin-bottom: 1rem;
}

.lore-nav-group-title {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.25rem;
    opacity: 0.7;
}

.lore-content {
    flex: 1;
    min-width: 0;
}

.lore-article {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    animation: fadeIn 0.3s ease-out;
}

.lore-article h1 {
    font-size: 1.8rem;
    color: var(--text-bright);
    margin-bottom: 0.5rem;
}

.lore-article h2 {
    font-size: 1.3rem;
    color: var(--text-bright);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.lore-article h3 {
    font-size: 1.1rem;
    color: var(--text-bright);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.lore-article p {
    color: var(--text-dim);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.lore-article em { color: var(--text-main); }
.lore-article strong { color: var(--text-bright); }

.lore-article blockquote {
    border-left: 3px solid var(--gold);
    padding: 0.75rem 1.25rem;
    margin: 1.25rem 0;
    background: var(--bg-block);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-dim);
    font-style: italic;
}

.lore-article blockquote strong { color: var(--text-bright); }

.lore-article ul, .lore-article ol {
    margin: 0.75rem 0 1rem 1.5rem;
    color: var(--text-dim);
}

.lore-article li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
}

.lore-tags {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.lore-tag {
    padding: 0.2rem 0.6rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lore-tag-accent {
    border-color: var(--accent-dark);
    color: var(--accent);
}

/* ===== NOTES PAGE (grid definition for old media queries) ===== */
.notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

/* ===== PORTRAIT FRAME (character sheet header) ===== */
.portrait-frame {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2px solid var(--char-accent, var(--accent));
    background: var(--bg-block);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portrait-placeholder {
    font-size: 3rem;
    opacity: 0.3;
}

/* ===== WILD MAGIC BLOCK ===== */
.wild-magic-block {
    border-color: #9333ea;
    background: linear-gradient(135deg, var(--bg-card), rgba(147, 51, 234, 0.04));
    grid-column: 1 / -1;
}

.wild-magic-block > p {
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 1rem;
    font-style: italic;
}

.wild-magic-block em { color: var(--text-main); }

/* ===== PAGE NAV (bottom of character pages) ===== */
.page-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.nav-btn {
    padding: 0.75rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
}

.nav-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

/* ===== FOOTER ===== */
footer {
    text-align: center;
    padding: 2rem;
    color: var(--text-dim);
    font-size: 0.85rem;
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 1;
}

/* ===== LOADING STATES ===== */
.skeleton {
    background: linear-gradient(90deg, var(--bg-block) 25%, var(--bg-elevated) 50%, var(--bg-block) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: no-preference) {
    .skeleton { animation: shimmer 1.5s infinite; }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-card {
    height: 200px;
    border-radius: var(--radius);
}

.spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
    .spinner { animation: spin 0.6s linear infinite; }
}

.loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-dim);
    gap: 0.75rem;
}

/* ===== EMPTY STATES ===== */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-dim);
}

.empty-state .empty-icon {
    font-size: 3rem;
    opacity: 0.2;
    margin-bottom: 1rem;
}

.empty-state h3 {
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: 0.9rem;
    max-width: 400px;
    margin: 0 auto;
}

/* ===== TOAST / NOTIFICATIONS ===== */
.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1.25rem;
    color: var(--text-main);
    font-size: 0.85rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: slideInRight 0.3s ease-out;
    max-width: 350px;
}

.toast-success { border-color: var(--success); }
.toast-success::before { content: ''; width: 3px; height: 100%; background: var(--success); position: absolute; left: 0; top: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.toast-error { border-color: var(--danger); }
.toast-warning { border-color: var(--warning); }

.toast-close {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0.2rem;
    margin-left: auto;
    font-size: 0.85rem;
}

/* ===== COMIC / STRIP STYLES (from original) ===== */
.comic-stories {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.comic-story {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    animation: fadeUp 0.5s ease-out both;
}

.story-title {
    color: var(--text-bright);
    font-size: 1.15rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.story-age {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-left: 0.5rem;
}

.comic-strip {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.comic-strip::-webkit-scrollbar { height: 6px; }
.comic-strip::-webkit-scrollbar-track { background: var(--bg-card); border-radius: 3px; }
.comic-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.comic-panel {
    min-width: 200px;
    max-width: 220px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.panel-img {
    width: 200px;
    height: 260px;
    border-radius: var(--radius-sm);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.panel-frame-fire { border-color: #f97316; background: linear-gradient(180deg, rgba(249, 115, 22, 0.06), transparent); }
.panel-frame-water { border-color: #3b82f6; background: linear-gradient(180deg, rgba(59, 130, 246, 0.06), transparent); }
.panel-frame-tavern { border-color: var(--gold); background: linear-gradient(180deg, rgba(240, 192, 64, 0.06), transparent); }
.panel-frame-magic { border-color: #a855f7; background: linear-gradient(180deg, rgba(168, 85, 247, 0.06), transparent); }

.panel-placeholder { font-size: 3rem; opacity: 0.3; }

.panel-text {
    color: var(--text-dim);
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 0 0.25rem;
}

.panel-frame {
    width: 200px;
    height: 260px;
    border-radius: var(--radius-sm);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* ===== SECTION HELPERS (from original index) ===== */
.section-intro {
    text-align: center;
    color: var(--text-dim);
    margin-bottom: 2rem;
    font-style: italic;
}

/* ===== GENERIC BUTTON STYLES ===== */
.btn {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn:hover { filter: brightness(1.1); }

.btn-primary {
    background: var(--accent);
    color: var(--bg-dark);
    border-color: var(--accent);
    font-weight: 700;
}

.btn-secondary {
    background: var(--bg-block);
    color: var(--text-dim);
}

.btn-secondary:hover { color: var(--text-main); border-color: var(--text-dim); }

.btn-ghost {
    background: transparent;
    color: var(--text-dim);
    border-color: transparent;
}

.btn-ghost:hover { color: var(--text-main); }

.btn-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--danger);
    color: var(--danger);
}

.btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* ===== FORM INPUTS ===== */
.input {
    padding: 0.5rem 0.75rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s;
    width: 100%;
}

.input:focus {
    outline: none;
    border-color: var(--accent);
}

.input::placeholder { color: var(--text-dim); opacity: 0.6; }

.input-group {
    display: flex;
    gap: 0.5rem;
}

.input-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== BADGES / TAGS ===== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-accent { background: var(--accent-glow); color: var(--accent); }
.badge-gold { background: rgba(240, 192, 64, 0.15); color: var(--gold); }
.badge-danger { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.badge-success { background: rgba(74, 222, 128, 0.15); color: var(--success); }

/* ===== DIVIDERS ===== */
.divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

.divider-accent {
    border-image: linear-gradient(90deg, transparent, var(--accent), transparent) 1;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .sheet-grid { grid-template-columns: 1fr; }
    .appearance-mini { grid-template-columns: 1fr; }
    .appearance-img-frame { width: 100%; min-width: unset; grid-row: auto; grid-column: auto; height: 300px; }
    .character-cards { grid-template-columns: repeat(3, 1fr); }
    .info-grid { grid-template-columns: repeat(2, 1fr); }
    .combat-stats { grid-template-columns: repeat(3, 1fr); }
    .lore-list li { padding-left: 0.75rem; }
    .dash-nav-cards { grid-template-columns: repeat(2, 1fr); }
    .dash-stats { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }

    .lore-page {
        flex-direction: column;
    }

    .lore-sidebar {
        width: 100%;
        position: static;
        max-height: none;
        border-bottom: 1px solid var(--border);
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .lore-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .lore-nav-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-bottom: 0;
    }

    .lore-nav-group-title {
        width: 100%;
    }
}

/* Intermediate widths: knoppen blijven zichtbaar, alleen tekst-label verdwijnt.
   Hamburger pas op 700px (zie volgend block). */
@media (max-width: 960px) and (min-width: 701px) {
    .nav-text { display: none; }
    .nav-links { gap: 0.85rem; }
    .nav-link, .nav-links a { padding: 0.4rem 0.55rem; }
    .nav-link.active::after, .nav-links a.active::after { left: 4px; right: 4px; }
}

@media (max-width: 700px) {
    /* Navbar */
    .navbar { padding: 0.5rem 1.25rem; }

    /* Main content - pages handle their own padding-top */

    /* Dashboard */
    .welcome-banner { padding: 2rem 1rem; }
    .banner-title { font-size: 1.5rem; }
    .welcome-banner h1 { font-size: 1.5rem; }
    .dash-nav-cards { grid-template-columns: 1fr; }
    .dash-stats { grid-template-columns: 1fr; }

    /* Character list */
    .character-cards { grid-template-columns: repeat(2, 1fr); }

    /* Character sheet */
    .char-top-row { padding: 1rem 1rem 0.25rem; }
    .char-portrait-wrap { margin-left: 0.5rem; margin-top: 0.5rem; }
    .char-portrait { width: 80px; height: 80px; }
    .char-header { padding: 0.75rem 1rem; }
    .header-actions { top: 0.5rem; right: 1rem; }
    .char-identity-card { padding: 1rem 1.1rem; }
    .header-info h1 { font-size: 1.3rem; }
    .tab-bar { padding: 0 0.5rem; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-btn { padding: 0.5rem 0.8rem; font-size: 0.8rem; }
    /* WGI-M7: oude .character-page mobile grid-overrides verwijderd. .character-page
       is nu een flex-container (M4 slop). .char-main-col bestaat niet meer. */
    .tab-content { padding: 0.25rem 0 0 0; }
    .sheet-grid { grid-template-columns: 1fr; gap: 1rem; }

    /* Abilities */
    .ability-scores { grid-template-columns: repeat(3, 1fr); }
    .combat-stats { grid-template-columns: repeat(2, 1fr); }
    .info-grid { grid-template-columns: 1fr; }

    /* Spells */
    .spell-header { grid-template-columns: repeat(2, 1fr); }
    .spell-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

    /* Items */
    .item-row { grid-template-columns: 1fr auto auto; }
    .item-notes { display: none; }

    /* Appearance */
    .appearance-mini { grid-template-columns: 1fr; }
    .appearance-img-frame { width: 100%; min-width: unset; grid-row: auto; grid-column: auto; height: 280px; }

    /* HP tracker */
    .hp-controls { flex-direction: column; }
    .hp-display { flex-wrap: wrap; }

    /* Tooltips */
    .tooltip-popup, .tc-card { max-width: 280px; min-width: 160px; }

    /* Modals */
    .levelup-modal, .modal-box { width: 95%; max-height: 90vh; }

    /* Timeline */
    .timeline { padding-left: 1.5rem; }

    /* Lore */
    .lore-grid { grid-template-columns: 1fr; }
    .lore-toc { margin: 1rem 0; }

    /* Portrait */
    .portrait-frame { width: 160px; height: 160px; }

    /* Color picker */
    .color-picker-popup { grid-template-columns: repeat(4, 28px); }

    /* Header */
    .header-top-row { flex-direction: column; gap: 0.75rem; }
    .header-actions { gap: 0.3rem; position: static; }

    /* Weapons */
    .weapon { grid-template-columns: 1fr; gap: 0.2rem; }

    /* Grids collapse */
    .map-grid, .notes-grid { grid-template-columns: 1fr; }

    /* Login */
    .login-card { padding: 2rem 1.5rem; }

    /* Comic */
    .comic-panel { min-width: 170px; max-width: 180px; }
    .panel-img { width: 170px; height: 220px; }

    /* Wizard */
    .wizard-card { padding: 1.5rem; }
    .wizard-actions { flex-direction: column; }

    /* Level-up */
    .levelup-card { padding: 1.5rem; }

    /* Quick links stack */
    .quick-links { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
    .ability-scores { grid-template-columns: repeat(2, 1fr); }
    .combat-stats { grid-template-columns: repeat(2, 1fr); }
    .spell-grid { grid-template-columns: 1fr; }
    .features-summary { flex-direction: column; }
    /* Tabs on mobile: icon-only so all tabs fit side-by-side. The text
       label is hidden but kept in the DOM as accessible name. */
    .tab-btn { padding: 0.4rem 0.55rem; font-size: 0.75rem; min-width: 40px; }
    .tab-bar-extended .tab-btn { gap: 0; }
    .tab-btn .tab-btn-icon { font-size: 1.15rem; opacity: 1; }
    .tab-btn .tab-btn-icon + span { display: none; }
    .char-banner { height: 100px; }
    .char-portrait { width: 64px; height: 64px; }
    .hp-current { font-size: 2rem; }
    .levelup-modal { padding: 0; }
    .levelup-body { padding: 0.75rem 1rem; }
    .levelup-footer { padding: 0.75rem 1rem; }

    .pin-input input {
        width: 40px;
        height: 48px;
        font-size: 1.2rem;
    }

    .login-avatars {
        grid-template-columns: repeat(3, 1fr);
    }

    .level-display { font-size: 1.1rem; min-width: 80px; }
    .level-btn { width: 30px; height: 30px; font-size: 1rem; }
}

/* ===== PRINT ===== */
@media print {
    .navbar,
    .particles,
    .nav-btn,
    .page-nav,
    footer,
    .level-btn,
    .edit-toggle-btn,
    .image-upload-overlay,
    .options-toggle,
    .options-menu,
    .item-add-btn,
    .item-remove,
    .quote-refresh-btn {
        display: none !important;
    }

    body { background: white; color: #333; }
    .sheet-block { border: 1px solid #ccc; break-inside: avoid; }
    .char-banner { height: 120px; }
}

/* ===== MAIN CONTENT WRAPPER ===== */
.main-content {
    min-block-size: 100dvh;
    animation: fadeUp 0.3s ease-out;
    padding-inline: 0.75rem;
}
@media (min-width: 901px) {
    .main-content {
        padding-inline: clamp(1.5rem, 3vi, 3rem);
    }
}
/* Character-page beheert zelf zijn padding (FAB-clearance + full-width dashboards). */
.main-content:has(> .character-page) {
    padding-inline: 0;
    min-height: 0;
}
/* Sidebars moeten aansluiten op de viewport-randen — geen padding/margin
   op de buiten-wrappers op character-routes (zekerheids-sweep voor browsers
   die `:has()` niet ondersteunen of voor cascade-conflicten). */
body[data-route^="characters/"] .main-content,
body[data-route^="characters/"] .character-page,
body[data-route^="dm"] .main-content,
body[data-route^="dm"] .character-page {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
}

/* DM Dashboard: knop bovenaan /party naar het DM Dashboard. */
.party-dm-prompt { margin: 0.5rem 0 1rem; }

/* ===== GOLD ROW (Inventory) ===== */
.gold-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg-block);
    border-radius: var(--radius-sm);
}

.gold-label {
    font-size: 0.85rem;
    color: var(--gold);
    font-weight: 600;
}
.gold-secret { opacity: 0.7; }
.gold-secret .gold-label { color: var(--text-dim); }

.gold-input {
    width: 80px;
    padding: 0.3rem 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
}

.gold-input:focus {
    outline: none;
    border-color: var(--gold);
}

.gold-suffix {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.gold-amount {
    font-size: 0.9rem;
    color: var(--gold);
    font-weight: 700;
}

/* ===== PAGE PLACEHOLDER ===== */
.page-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-dim);
}

.page-placeholder h2 {
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

/* ===== LORE GRID (index) ===== */
.lore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.lore-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text-main);
    transition: all 0.3s;
}

.lore-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.lore-card h3 {
    color: var(--text-bright);
    margin-bottom: 0.5rem;
}

.lore-card p {
    color: var(--text-dim);
    font-size: 0.9rem;
}


/* ===== GENERIC BUTTON STYLES ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    text-decoration: none;
    color: var(--text-main);
    background: var(--bg-block);
}

.btn:hover { border-color: var(--accent); color: var(--accent); }

.btn-primary {
    background: var(--accent);
    color: var(--bg-dark);
    border-color: var(--accent);
    font-weight: 700;
}

.btn-primary:hover { filter: brightness(1.15); color: var(--bg-dark); }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
}

.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-sm {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
}

/* ===== APPEARANCE IMAGE ===== */
.appearance-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.appearance-upload-btn {
    cursor: pointer;
    margin-top: 0.5rem;
}

/* ===== HP Tracker ===== */
.hp-tracker { background: var(--bg-block); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
.hp-display { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem; }
.hp-current { font-size: 2.5rem; font-weight: 800; color: var(--success); }
.hp-separator { font-size: 1.5rem; color: var(--text-dim); }
.hp-max { font-size: 1.5rem; color: var(--text-dim); }
.hp-temp { font-size: 0.9rem; color: var(--accent); margin-left: 0.5rem; }
.hp-bar { height: 8px; background: var(--bg-dark); border-radius: 4px; overflow: hidden; margin-bottom: 1rem; }
.hp-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s, background 0.3s; }
.hp-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.hp-input { width: 60px; padding: 0.4rem; background: var(--bg-dark); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-main); font-size: 0.9rem; text-align: center; }
.hp-btn { padding: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; font-weight: 600; }
.hp-btn-damage { background: rgba(239,68,68,0.15); border-color: var(--danger); color: var(--danger); }
.hp-btn-heal { background: rgba(74,222,128,0.15); border-color: var(--success); color: var(--success); }
.hp-btn-temp { background: rgba(34,211,238,0.15); border-color: var(--accent); color: var(--accent); }

/* ===== Death Saves ===== */
.death-saves { display: flex; gap: 1.5rem; align-items: center; padding: 1rem; background: var(--bg-block); border-radius: var(--radius); margin-bottom: 1rem; }
.death-save-group { display: flex; align-items: center; gap: 0.5rem; }
.death-save-group label { font-size: 0.8rem; color: var(--text-dim); }
.death-save-dots { display: flex; gap: 0.3rem; }
.death-save-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; transition: all 0.2s; }
.death-save-dot.success.filled { background: var(--success); border-color: var(--success); }
.death-save-dot.failure.filled { background: var(--danger); border-color: var(--danger); }

/* ===== Conditions ===== */
.conditions-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.condition-tag { padding: 0.3rem 0.7rem; border-radius: 100px; border: 1px solid var(--border); font-size: 0.75rem; color: var(--text-dim); cursor: pointer; transition: all 0.2s; background: var(--bg-block); }
.condition-tag.active { background: rgba(251,191,36,0.15); border-color: var(--warning); color: var(--warning); }

/* ===== Spell Slots ===== */
.slot-tracker { margin-bottom: 1rem; }
.slot-level { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0; }
.slot-level-label { font-size: 0.8rem; color: var(--text-dim); min-width: 60px; }
.slot-dots { display: flex; gap: 0.3rem; }
.slot-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--accent); cursor: pointer; transition: all 0.2s; }
.slot-dot.used { background: var(--accent); }

/* ===== Rest Buttons ===== */
.rest-buttons { display: flex; gap: 0.5rem; margin: 1rem 0; }
.rest-btn { padding: 0.5rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-block); color: var(--text-dim); cursor: pointer; font-size: 0.8rem; transition: all 0.2s; }
.rest-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ===== Inspiration ===== */
.inspiration-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.5rem; margin-bottom: 0.5rem; }
.inspiration-star { font-size: 1.5rem; color: var(--border); transition: color 0.2s; }
.inspiration-star.active { color: var(--gold); }

/* ===== Inline Editing ===== */
.editable-field { position: relative; }
.edit-trigger { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-block); border: 1px solid var(--border); color: var(--text-dim); font-size: 0.7rem; cursor: pointer; opacity: 0; transition: opacity 0.2s; vertical-align: middle; margin-left: 0.5rem; }
.editable-field:hover .edit-trigger, .edit-trigger:focus, .char-name-wrap:hover .edit-trigger { opacity: 1; }
.edit-textarea { width: 100%; min-height: 80px; padding: 0.75rem; background: var(--bg-dark); border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--text-main); font-size: 0.9rem; font-family: inherit; line-height: 1.6; resize: vertical; }
.edit-input { width: auto; max-width: 300px; padding: 0.5rem 0.75rem; background: var(--bg-dark); border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--text-main); font-size: 1rem; font-family: inherit; }
.edit-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.edit-save { padding: 0.3rem 0.8rem; border-radius: var(--radius-sm); border: 1px solid var(--success, #4ade80); background: rgba(74,222,128,0.15); color: var(--success, #4ade80); cursor: pointer; font-size: 0.8rem; }
.edit-save:hover { background: rgba(74,222,128,0.25); }
.edit-cancel { padding: 0.3rem 0.8rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-block); color: var(--text-dim); cursor: pointer; font-size: 0.8rem; }
.edit-cancel:hover { border-color: var(--text-dim); }
.placeholder-text { color: var(--text-dim); font-style: italic; }
.char-name-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.edit-name-input { font-size: 1.5rem; font-weight: 700; }

/* ===== Color Picker ===== */
.color-picker-wrap { position: relative; display: inline-block; }
.color-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; display: inline-block; vertical-align: middle; margin-left: 0.5rem; transition: transform 0.2s; }
.color-dot:hover { transform: scale(1.2); }
.color-picker-popup { position: absolute; top: 100%; left: 0; z-index: 100; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; display: grid; grid-template-columns: repeat(6, 28px); gap: 0.35rem; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.color-option { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; }
.color-option:hover { transform: scale(1.15); }
.color-option.selected { border-color: white; box-shadow: 0 0 8px currentColor; }

/* ===== Quote Editing ===== */
.quote-item { position: relative; display: flex; align-items: flex-start; gap: 0.5rem; }
.quote-item blockquote { flex: 1; }
.quote-remove-btn { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s, color 0.2s, border-color 0.2s; flex-shrink: 0; margin-top: 0.5rem; }
.quote-item:hover .quote-remove-btn { opacity: 1; }
.quote-remove-btn:hover { color: #f87171; border-color: #f87171; }
.quote-add-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; align-items: center; }
.quote-add-input { flex: 1; }
.quote-add-form .edit-save { white-space: nowrap; }

/* ===== Lore Enrichments ===== */
.lore-toc { background: var(--bg-block); border-radius: var(--radius); padding: 1rem 1.5rem; margin: 1.5rem 0; border-left: 3px solid var(--accent); }
.lore-toc h3 { font-size: 0.9rem; color: var(--text-bright); margin-bottom: 0.5rem; }
.lore-toc ul { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.lore-toc li a { color: var(--accent); text-decoration: none; font-size: 0.85rem; }
.lore-toc li a:hover { text-decoration: underline; }
.lore-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0; }
.lore-list li { padding-left: 1rem; border-left: 2px solid var(--accent); color: var(--text-dim); line-height: 1.7; }
.lore-list li strong { color: var(--text-bright); }
.lore-party-member { background: var(--bg-block); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1rem 0; border-left: 3px solid var(--accent); }
.lore-party-member h3 { margin-bottom: 0.25rem; }
.lore-party-member p { color: var(--text-dim); line-height: 1.6; margin-top: 0.5rem; }
.section-intro { color: var(--text-dim); font-style: italic; margin-bottom: 1.5rem; text-align: center; }

/* ===== Timeline Form ===== */
.edit-form-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.edit-actions { display: flex; gap: 0.5rem; }

/* ===== Dashboard Enrichments ===== */
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
.dash-stat-card { background: var(--bg-block); border-radius: var(--radius); padding: 1.25rem; text-align: center; border: 1px solid var(--border); }
.dash-stat-value { display: block; font-size: 1.8rem; font-weight: 700; color: var(--accent); }
.dash-stat-label { display: block; font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; }
.dash-nav-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.dash-nav-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--bg-block); border-radius: var(--radius); padding: 1.25rem 1rem; border: 1px solid var(--border); text-decoration: none; color: var(--text-main); transition: border-color 0.2s, transform 0.2s; }
.dash-nav-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.dash-nav-icon { font-size: 1.8rem; margin-bottom: 0.5rem; }
.dash-nav-title { font-weight: 600; color: var(--text-bright); font-size: 0.9rem; }
.dash-nav-desc { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.25rem; }
.dash-recent-section { margin: 1.5rem 0; }
.dash-recent-events { display: flex; flex-direction: column; gap: 0.75rem; }
.dash-recent-event { background: var(--bg-block); border-radius: var(--radius); padding: 1rem 1.25rem; border-left: 3px solid var(--accent); }
.dash-recent-event.timeline-danger { border-left-color: #f87171; }
.dash-recent-event.timeline-magic { border-left-color: #a78bfa; }
.dash-recent-event.timeline-history { border-left-color: #fbbf24; }
.dash-recent-event.timeline-quest { border-left-color: var(--accent); }
.dash-recent-event .timeline-date { font-size: 0.7rem; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.05em; }
/* .session-number-edit removed — replaced by session-card controls */

/* ===== VISUAL POLISH ===== */

/* Selection color */
::selection { background: var(--accent); color: var(--bg-dark); }

/* Focus styles */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Loading state */
.loading { display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--text-dim); }
.loading::after { content: ''; width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; margin-inline-start: 0.5rem; }
@media (prefers-reduced-motion: no-preference) {
    .loading::after { animation: spin 0.8s linear infinite; }
}

/* Better button hover */
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.btn:active { transform: translateY(0); }

/* ===== DASHBOARD STATS ===== */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.dash-stat-card {
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 0.5rem;
    animation: fadeUp 0.5s ease-out both;
}

.dash-stat-card:nth-child(1) { animation-delay: 0.05s; }
.dash-stat-card:nth-child(2) { animation-delay: 0.1s; }
.dash-stat-card:nth-child(3) { animation-delay: 0.15s; }
.dash-stat-card:nth-child(4) { animation-delay: 0.2s; }

.dash-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent);
}

.dash-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.25rem;
}

/* ===== DASHBOARD NAV CARDS ===== */
.dash-nav-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.dash-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1.25rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-main);
    transition: all 0.3s;
    animation: fadeUp 0.5s ease-out both;
}

.dash-nav-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.dash-nav-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.dash-nav-title {
    font-weight: 700;
    color: var(--text-bright);
    font-size: 0.9rem;
}

.dash-nav-desc {
    font-size: 0.75rem;
    color: var(--text-dim);
}

/* ===== DASHBOARD RECENT EVENTS ===== */
.dash-recent-section {
    margin-bottom: 2.5rem;
}

.dash-recent-events {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dash-recent-event {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color 0.2s ease, transform 0.15s ease, background 0.2s ease;
    cursor: pointer;
}
.dash-recent-event:hover {
    background: var(--bg-block, var(--bg-card));
    transform: translateY(-1px);
}
.dash-recent-event .dash-recent-title {
    display: block;
    margin: 0.15rem 0 0.25rem 0;
    text-transform: none;
    letter-spacing: normal;
}
/* Defensive override — if any external/legacy rule (e.g. .timeline-session)
   re-applies uppercase on the card, we force the body text back to its
   original casing. The session-# pill keeps its own uppercase via
   .timeline-date below. */
.dash-recent-event,
.dash-recent-event .dash-recent-desc,
.dash-recent-event p {
    text-transform: none;
    letter-spacing: normal;
}
.dash-recent-section > .section-title {
    text-transform: none;
    letter-spacing: 0.04em;
}
.dash-recent-event .dash-recent-desc {
    margin: 0;
    font-size: 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    line-clamp: 9;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Hard line-height cap so 9 lines is the actual visual ceiling */
    max-height: calc(1.45em * 9);
    line-height: 1.45;
}

.dash-recent-event.timeline-danger { border-left-color: var(--danger); }
.dash-recent-event.timeline-magic { border-left-color: #a855f7; }
.dash-recent-event.timeline-quest { border-left-color: var(--accent); }
.dash-recent-event.timeline-history { border-left-color: var(--gold); }
.dash-recent-event.timeline-session { border-left-color: var(--gold); }

/* ===== TIMELINE: SESSION FORM + SCENE BLOCKS (2026-05-29) ===== */
.session-form { display: flex; flex-direction: column; gap: 0.6rem; }
.session-form-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.session-form-field { flex: 1; min-width: 140px; }
.session-form-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }

.scene-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.75rem 0; }
.scene-block {
    background: var(--bg-block, var(--bg-card));
    border: 1px solid var(--border, var(--hairline-gold));
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.scene-block-header { display: flex; justify-content: space-between; align-items: center; }
.scene-block-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.scene-remove {
    background: transparent; border: none; color: var(--text-dim);
    cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0.2rem 0.4rem;
}
.scene-remove:hover { color: var(--danger, #ef4444); }

.scene-layout-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.scene-layout-option {
    background: var(--bg-card);
    border: 1px solid var(--border, var(--hairline-gold));
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.35rem;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.7rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.scene-layout-option:hover { border-color: var(--accent); color: var(--text-main); }
.scene-layout-option.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.scene-layout-icon { font-size: 1.1rem; }
.scene-layout-label { line-height: 1.1; text-align: center; }

.scene-image-section { display: block; }
.scene-image-preview { display: flex; gap: 0.5rem; align-items: flex-start; }
.scene-image-preview img { max-width: 50%; max-height: 160px; object-fit: cover; border-radius: var(--radius-sm); }
.scene-text-input { min-height: 70px; width: 100%; }

/* Scene image-size picker (S/M/L) — only rendered when a scene has an image. */
.scene-size-picker { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.scene-size-label { font-size: 0.7rem; color: var(--text-dim); }
.scene-size-option {
    background: var(--bg-card);
    border: 1px solid var(--border, var(--hairline-gold));
    border-radius: var(--radius-sm);
    width: 28px; height: 28px;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.72rem; font-weight: 600;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.scene-size-option:hover { border-color: var(--accent); color: var(--text-main); }
.scene-size-option.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* Collapsed scene block — shows full scene content (readonly) plus the
   header bar with Edit + remove. Padding matches the expanded editor so
   blocks read as a coherent stack inside the Edit Session form. */
.scene-block-collapsed { padding: 0.75rem 0.9rem; }
.scene-block-collapsed .scene-block-header { gap: 0.5rem; }
.scene-block-collapsed .scene-edit { font-size: 0.7rem; padding: 0.25rem 0.6rem; }
.scene-block-readonly { color: var(--text-main); }
.scene-block-preview {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
    color: var(--text-dim);
    font-size: 0.78rem;
}
.scene-preview-layout {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.scene-preview-thumb img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; }
.scene-preview-text {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Rendered scenes — used by both the Timeline page (.timeline-session-block)
   and the collapsed scene-blocks in the Edit Session form (.scene-block-readonly).
   Same look in both places so the DM sees real scene content while editing. */
.timeline-session-block .scene,
.scene-block-readonly { margin-top: 0.6rem; }
.timeline-session-block .scene p,
.scene-block-readonly p { margin: 0.25rem 0; line-height: 1.55; text-align: justify; hyphens: auto; }
/* Image-left / image-right: float the image so that when the text runs longer
   than the image, it wraps under the image at full width. */
.timeline-session-block .scene-split,
.scene-block-readonly.scene-split { overflow: hidden; }
.timeline-session-block .scene-split::after,
.scene-block-readonly .scene-split::after { content: ''; display: table; clear: both; }
.timeline-session-block .scene-split-img,
.scene-block-readonly .scene-split-img {
    /* 75% van de vorige weergavegrootte voor scene-afbeeldingen in de
       timeline-sessies (clamp-waardes × 0.75). */
    inline-size: clamp(105px, 26%, 240px);
    margin-block-end: 0.6rem;
}
.timeline-session-block .scene-split-image-left .scene-split-img,
.scene-block-readonly.scene-split-image-left .scene-split-img {
    float: inline-start;
    /* gap afbeelding↔tekst: 50% groter (1rem → 1.5rem) */
    margin-inline-end: 1.5rem;
}
.timeline-session-block .scene-split-image-right .scene-split-img,
.scene-block-readonly.scene-split-image-right .scene-split-img {
    float: inline-end;
    margin-inline-start: 1.5rem;
}
.timeline-session-block .scene-split img,
.scene-block-readonly .scene-split img { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }
.timeline-session-block .scene-split-text,
.scene-block-readonly .scene-split-text { text-align: justify; hyphens: auto; }
/* Top-align de afbeelding met de tekst: de eerste <p> heeft anders een
   margin-top (0.25rem) die de tekst lager zet dan de floatende afbeelding,
   waardoor de afbeelding boven de tekst uitsteekt. */
.timeline-session-block .scene-split-text > p:first-child,
.scene-block-readonly .scene-split-text > p:first-child { margin-top: 0; }
.timeline-session-block .scene-image-only img,
.scene-block-readonly .scene-image-only img { max-width: 50%; display: block; margin-inline: auto; border-radius: var(--radius-sm); }

/* Scene image-size (small / medium / large) — default = medium (matches the
   pre-existing sizing so old scenes are unchanged). Applies to both the
   image-only layout and the floated split layouts. bug 2026-06-05. */
.timeline-session-block .scene.scene-img-small .scene-image-only img,
.scene-block-readonly.scene-img-small .scene-image-only img { max-width: 30%; }
.timeline-session-block .scene.scene-img-large .scene-image-only img,
.scene-block-readonly.scene-img-large .scene-image-only img { max-width: 80%; }
.timeline-session-block .scene.scene-img-small .scene-split-img,
.scene-block-readonly.scene-img-small .scene-split-img { inline-size: clamp(80px, 18%, 170px); }
.timeline-session-block .scene.scene-img-large .scene-split-img,
.scene-block-readonly.scene-img-large .scene-split-img { inline-size: clamp(150px, 38%, 340px); }

/* Focus-flash when navigating from a Recent card */
.session-focus-flash {
    animation: sessionFocusFlash 1.6s ease-out;
}
@keyframes sessionFocusFlash {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
    35%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ===== SESSION / LEVEL CARD CONTROLS ===== */
.session-card, .level-card { position: relative; }
.dash-stat-value-row { display: inline-flex; align-items: center; gap: 0.6rem; justify-content: center; }
.dash-stat-value-row .dash-stat-value { min-width: 1.5em; text-align: center; }
.session-btn {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--bg-dark); border: 1px solid var(--accent);
    color: var(--accent); cursor: pointer; font-size: 0.8rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.2s, color 0.2s;
    padding: 0; line-height: 1; flex: 0 0 auto;
    opacity: 0; pointer-events: none; transform: scale(0.85);
}
.session-card:hover .session-btn,
.session-card:focus-within .session-btn,
.level-card:hover .session-btn,
.level-card:focus-within .session-btn {
    opacity: 1; pointer-events: auto; transform: scale(1);
}
.session-btn:hover { border-color: var(--accent); color: var(--bg-dark); background: var(--accent); }
/* Legacy fallback if old layout reappears */
.session-controls { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.3rem; }

/* ===== TEXT HELPERS ===== */
.text-dim { color: var(--text-dim); }

/* ===== EDIT SYSTEM ===== */
.edit-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.edit-input:focus {
    outline: none;
    border-color: var(--accent);
}

.edit-textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.5rem 0.75rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s;
}

.edit-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.edit-save {
    padding: 0.35rem 0.8rem;
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid var(--success);
    border-radius: var(--radius-sm);
    color: var(--success);
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.edit-save:hover { filter: brightness(1.2); }

.edit-cancel {
    padding: 0.35rem 0.8rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.edit-cancel:hover { color: var(--text-main); border-color: var(--text-dim); }

.edit-trigger {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.edit-trigger:hover { opacity: 1; color: var(--gold); }

.edit-form-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.editable-field {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.editable-field .field-display {
    flex: 1;
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.6;
    min-height: 1.2em;
}

.placeholder-text {
    color: var(--text-dim);
    opacity: 0.5;
    font-style: italic;
}

/* ===== HP TRACKER ===== */
.hp-tracker {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

/* Compact two-column combat layout on wide screens:
   HP-tracker becomes a narrow left rail with vertical bar + stacked controls,
   all other tab-combat children flow into the right column. */
@media (min-width: 900px) {
    .tab-combat {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 1rem;
        align-items: start;
    }
    .tab-combat > * { grid-column: 2; min-width: 0; }
    .tab-combat > .combat-stats {
        grid-column: 1 / -1;
        margin-bottom: 0.5rem;
    }
    .tab-combat > .hp-tracker {
        grid-column: 1;
        grid-row: 2;
        position: sticky;
        top: 80px;
        margin-bottom: 0;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }
    .tab-combat > .hp-tracker .hp-display {
        margin-bottom: 0;
    }
    .tab-combat > .hp-tracker .hp-current { font-size: 2rem; }
    .tab-combat > .hp-tracker .hp-bar {
        height: 8px;
        width: 100%;
        margin: 0;
        position: relative;
        background: var(--bg-block);
        border-radius: 4px;
        overflow: hidden;
    }
    .tab-combat > .hp-tracker .hp-bar-fill {
        position: relative;
        height: 100%;
        width: var(--hp-bar-h, 100%);
        transition: width 0.5s ease, background 0.3s;
    }
    .tab-combat > .hp-tracker .hp-controls {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-auto-flow: row;
        gap: 0.4rem 0.5rem;
        align-items: center;
    }
    .tab-combat > .hp-tracker .hp-input { width: 100%; }
    .tab-combat > .hp-tracker .hp-btn { width: 100%; min-width: 80px; }
    .tab-combat > .inspiration-toggle {
        max-width: 280px;
        padding: 0.45rem 0.7rem;
        margin-bottom: 0.5rem;
    }
}

.hp-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.hp-current {
    font-size: 2.5rem;
    font-weight: 800;
}

.hp-separator {
    font-size: 1.5rem;
    color: var(--text-dim);
    font-weight: 300;
}

.hp-max {
    font-size: 1.5rem;
    color: var(--text-dim);
    font-weight: 600;
}

.hp-temp {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
    margin-left: 0.5rem;
}

.hp-bar {
    height: 8px;
    background: var(--bg-block);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.hp-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease, background 0.3s;
}

.hp-controls {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.hp-input {
    width: 60px;
    padding: 0.35rem 0.5rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.85rem;
    font-family: inherit;
    text-align: center;
}

.hp-input:focus { outline: none; border-color: var(--accent); }

.hp-btn {
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    background: var(--bg-block);
    color: var(--text-dim);
}

.hp-btn:hover { filter: brightness(1.2); }

.hp-btn-damage { border-color: var(--danger); color: var(--danger); background: rgba(239, 68, 68, 0.1); }
.hp-btn-heal { border-color: var(--success); color: var(--success); background: rgba(74, 222, 128, 0.1); }
.hp-btn-temp { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

/* ===== DEATH SAVES ===== */
.death-saves {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.death-save-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.death-save-group label {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-weight: 600;
}

.death-save-dots {
    display: flex;
    gap: 0.3rem;
}

.death-save-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-block);
    cursor: pointer;
    transition: all 0.2s;
}

.death-save-dot:hover { border-color: var(--text-dim); }

.death-save-dot.success.filled {
    background: var(--success);
    border-color: var(--success);
}

.death-save-dot.failure.filled {
    background: var(--danger);
    border-color: var(--danger);
}

/* ===== INSPIRATION ===== */
.inspiration-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.inspiration-toggle:hover { border-color: var(--gold); }

.inspiration-star {
    font-size: 1.2rem;
    color: var(--text-dim);
    opacity: 0.3;
    transition: all 0.2s;
}

.inspiration-star.active {
    color: var(--gold);
    opacity: 1;
    text-shadow: 0 0 8px rgba(240, 192, 64, 0.4);
}

/* ===== CONDITIONS ===== */
.conditions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.condition-tag {
    padding: 0.3rem 0.6rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.condition-tag:hover { border-color: var(--text-dim); color: var(--text-main); }

.condition-tag.active {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--danger);
    color: var(--danger);
    font-weight: 700;
}

/* ===== SPELL SLOT TRACKER ===== */
.slot-tracker {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.slot-level {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.slot-level-label {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-weight: 600;
    min-width: 80px;
}

.slot-dots {
    display: flex;
    gap: 0.3rem;
}

.slot-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.slot-dot:hover { background: var(--accent-glow); }

.slot-dot.used {
    background: var(--accent);
}

/* ===== REST BUTTONS ===== */
.rest-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.rest-btn {
    padding: 0.4rem 1rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.rest-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ===== COLOR PICKER ===== */
.color-picker-wrap {
    position: relative;
    display: inline-block;
    margin-left: 0.5rem;
}

.color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    border: 2px solid var(--border);
    vertical-align: middle;
    transition: border-color 0.2s;
}

.color-dot:hover { border-color: var(--text-dim); }

.color-picker-popup {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.color-option {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.color-option:hover { transform: scale(1.2); }
.color-option.selected { border-color: var(--text-bright); box-shadow: 0 0 8px rgba(255,255,255,0.3); }

/* ===== CHARACTER NAME WRAP ===== */
.char-name-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.char-name-display {
    font-size: inherit;
    color: inherit;
}

.edit-name-input {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    text-align: center;
}

/* ===== APPEARANCE IMAGE ===== */
.appearance-img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
}

.appearance-upload-btn {
    margin-top: 0.5rem;
}

/* ===== QUOTES ===== */
.quote-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.quote-item blockquote {
    flex: 1;
    border-left: 3px solid var(--gold);
    padding: 0.5rem 1rem;
    background: var(--bg-block);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-dim);
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.6;
}

.quote-remove-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.4;
    transition: all 0.2s;
    padding: 0.5rem 0.25rem;
}

.quote-remove-btn:hover { color: var(--danger); opacity: 1; }

.quote-add-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.quote-add-input {
    flex: 1;
}

/* ===== LORE EXTRAS ===== */
.lore-list {
    margin: 0.75rem 0 1rem 1.5rem;
    color: var(--text-dim);
}

.lore-list li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.lore-list strong { color: var(--text-bright); }
.lore-list em { color: var(--text-main); }

.lore-toc {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.lore-toc h3 {
    font-size: 0.85rem;
    color: var(--text-bright);
    margin-bottom: 0.5rem;
}

.lore-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lore-toc li {
    margin-bottom: 0.3rem;
}

.lore-toc a {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
    transition: opacity 0.2s;
}

.lore-toc a:hover { opacity: 0.8; }

.lore-party-member {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.lore-party-member h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.lore-party-member p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0.25rem;
}

/* ===== TIMELINE EXTRAS ===== */
.timeline-date {
    display: block;
    font-size: 0.8rem;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.timeline-marker {
    position: absolute;
    left: -2rem;
    top: 0.5rem;
    width: 10px;
    height: 10px;
    background: var(--gold);
    border-radius: 50%;
    transform: translateX(-4px);
    box-shadow: 0 0 8px rgba(240, 192, 64, 0.3);
}

/* ===== TIMELINE CHAPTER LAYOUT ===== */
.timeline-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; min-height: 400px; }
.timeline-sidebar { }
.timeline-chapters { display: flex; flex-direction: column; gap: 0.25rem; }
.chapter-tab { display: flex; flex-direction: column; align-items: flex-start; padding: 0.75rem 1rem; background: var(--bg-block); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; text-align: start; width: 100%; color: var(--text-dim); }
.chapter-tab:hover { border-color: var(--accent); }
.chapter-tab.active { border-color: var(--accent); background: rgba(34, 211, 238, 0.08); color: var(--text-bright); }
.chapter-num { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; }
.chapter-name { font-size: 0.9rem; font-weight: 600; }
.timeline-main { }
.timeline-chapter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.timeline-chapter-header h2 { color: var(--text-bright); }
.timeline-session { font-size: 0.75rem; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.timeline-add-form { background: var(--bg-block); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.timeline-empty { padding: 3rem; text-align: center; }

/* ===== LORE EDITOR ===== */
.lore-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.lore-content-editor { min-height: 300px; }
.lore-editor { display: flex; flex-direction: column; gap: 1rem; }

/* ===== RESPONSIVE ADDITIONS ===== */
@media (max-width: 700px) {
    .dash-stats { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .dash-nav-cards { grid-template-columns: repeat(2, 1fr); }
    .hp-controls { flex-direction: column; align-items: stretch; }
    .hp-controls .hp-input { width: 100%; }
    .death-saves { flex-direction: column; gap: 0.75rem; }
    .timeline-layout { grid-template-columns: 1fr; }
    .timeline-sidebar { order: -1; }
    .timeline-chapters { flex-direction: row; overflow-x: auto; gap: 0.5rem; }
    .chapter-tab { min-width: 140px; }
    .map-viewer { height: 400px; }
    .maps-grid { grid-template-columns: 1fr; }
    .dimension-tabs { overflow-x: auto; }
}

@media (max-width: 480px) {
    .dash-nav-cards { grid-template-columns: 1fr; }
}

/* Notes Page */
/* Notes Page — Full Notes System */
.notes-page { max-width: 900px; margin: 0 auto; padding: 76px 2rem 2rem; }
.notes-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.notes-header h1 { margin: 0; }

.notes-search { margin-bottom: 1rem; }
.notes-search-input { width: 100%; padding: 0.75rem 1rem; background: var(--bg-block); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-main); font-size: 0.9rem; font-family: inherit; }
.notes-search-input:focus { border-color: var(--accent); outline: none; }

.notes-categories { display: flex; gap: 0.35rem; margin-bottom: 1.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.notes-cat-btn { padding: 0.4rem 0.9rem; background: var(--bg-block); border: 1px solid var(--border); border-radius: 100px; color: var(--text-dim); font-size: 0.8rem; cursor: pointer; white-space: nowrap; transition: all 0.2s; font-family: inherit; }
.notes-cat-btn:hover { border-color: var(--cat-color, var(--accent)); color: var(--cat-color, var(--accent)); }
.notes-cat-btn.active { background: color-mix(in srgb, var(--cat-color, var(--accent)) 15%, transparent); border-color: var(--cat-color, var(--accent)); color: var(--cat-color, var(--accent)); font-weight: 600; }
.notes-cat-count { font-size: 0.7rem; opacity: 0.7; }

.notes-empty { text-align: center; padding: 3rem; color: var(--text-dim); }

.note-card { background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--cat-color, var(--accent)); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: all 0.2s; }
.note-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); border-color: var(--cat-color, var(--accent)); }
.note-card-img { height: 120px; overflow: hidden; }
.note-card-img img { width: 100%; height: 100%; object-fit: cover; }
.note-card-body { padding: 0.75rem 1rem; }
.note-card-cat { font-size: 0.7rem; color: var(--cat-color, var(--text-dim)); margin-bottom: 0.3rem; }
.note-card-title { font-size: 0.95rem; color: var(--text-bright); font-weight: 700; margin-bottom: 0.3rem; }
.note-card-preview { font-size: 0.8rem; color: var(--text-dim); line-height: 1.4; margin-bottom: 0.5rem; }
.note-card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.note-tag { padding: 0.1rem 0.5rem; background: var(--bg-block); border-radius: 100px; font-size: 0.7rem; color: var(--text-dim); }

/* Note Editor */
.note-editor { display: flex; flex-direction: column; gap: 1rem; }
.note-title-input { font-size: 1.2rem; font-weight: 600; }
.note-content-input { min-height: 200px; }
.note-category-picker { display: flex; flex-direction: column; gap: 0.5rem; }
.note-cat-options { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.note-cat-option { padding: 0.4rem 0.8rem; background: var(--bg-block); border: 1px solid var(--border); border-radius: 100px; color: var(--text-dim); font-size: 0.8rem; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.note-cat-option:hover { border-color: var(--cat-color, var(--accent)); color: var(--cat-color, var(--accent)); }
.note-cat-option.active { background: color-mix(in srgb, var(--cat-color, var(--accent)) 15%, transparent); border-color: var(--cat-color, var(--accent)); color: var(--cat-color, var(--accent)); }
.note-layout-picker { display: flex; flex-direction: column; gap: 0.5rem; }
.note-layout-options { display: flex; gap: 0.5rem; }
.note-layout-option { padding: 0.5rem 0.75rem; background: var(--bg-block); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 0.75rem; cursor: pointer; text-align: center; transition: all 0.2s; font-family: inherit; line-height: 1.3; }
.note-layout-option:hover { border-color: var(--accent); color: var(--accent); }
.note-layout-option.active { border-color: var(--accent); color: var(--accent); }
.note-image-upload { display: flex; align-items: center; justify-content: center; padding: 2rem; border: 2px dashed var(--border); border-radius: var(--radius); cursor: pointer; color: var(--text-dim); transition: all 0.2s; }
.note-image-upload:hover { border-color: var(--accent); color: var(--accent); }
.note-image-preview { position: relative; border-radius: var(--radius); overflow: hidden; }
.note-image-preview img { width: 100%; max-height: 300px; object-fit: cover; display: block; border-radius: var(--radius); }
.note-image-preview .btn { position: absolute; bottom: 0.5rem; right: 0.5rem; }
.note-tags-section { display: flex; flex-direction: column; gap: 0.3rem; }
.note-editor-actions { display: flex; gap: 0.75rem; }

/* Note View — Blog-style presentation */
.note-view {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: fadeUp 0.4s ease-out;
}
.note-view-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.note-view-cat { font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 100px; background: var(--bg-block); }
.note-view-date { font-size: 0.75rem; color: var(--text-dim); }
.note-view-pin { font-size: 0.75rem; color: var(--gold); }
.note-view h1 { margin-bottom: 1rem; font-size: 1.8rem; line-height: 1.3; }
.note-view p { color: var(--text-dim); line-height: 1.8; margin-bottom: 1rem; font-size: 0.95rem; }
.note-view p:first-of-type::first-line { color: var(--text-main); font-weight: 500; }
.note-view-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.note-view-text { flex: 1; padding: 2rem; }

/* Image-top: hero banner style */
.note-layout-image-top .note-view-img { position: relative; }
.note-layout-image-top .note-view-img img { width: 100%; max-height: 360px; object-fit: cover; display: block; border-radius: 0; margin-bottom: 0; }
.note-layout-image-top .note-view-img::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(transparent, var(--bg-card)); }

/* Image-right / Image-left: magazine column style */
.note-layout-image-right .note-view-content, .note-layout-image-left .note-view-content { display: flex; gap: 0; }
.note-view-img-side { flex-shrink: 0; width: 280px; }
.note-view-img-side img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; border-radius: 0; }
.note-layout-image-left .note-view-img-side { order: -1; }
.note-layout-image-right .note-view-text,
.note-layout-image-left .note-view-text { padding: 2rem; }

/* Text-only: clean article style with accent border */
.note-layout-text-only .note-view-text { padding: 2rem; border-left: 3px solid var(--accent); margin: 1.5rem; border-radius: 0; background: transparent; }
.note-layout-text-only { background: var(--bg-card); }

/* Gallery layout: masonry-like presentation */
.note-layout-gallery .note-view-text { padding: 2rem; }

.notes-header-right { display: flex; gap: 0.5rem; align-items: center; }

/* Note Card — Pin & Date */
.note-card { position: relative; }
.note-card-pinned { border-color: var(--gold); border-top-color: var(--gold) !important; box-shadow: 0 0 0 1px rgba(240, 192, 64, 0.15); }
.note-pin-badge { position: absolute; top: 0.4rem; right: 0.5rem; font-size: 0.8rem; z-index: 2; }
.note-card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.note-card-date { font-size: 0.65rem; color: var(--text-dim); }
.note-pin-toggle { transition: all 0.2s; }
.note-pin-toggle.active { color: var(--gold) !important; }

/* Note Card — Gallery Preview */
.note-card-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; height: 120px; overflow: hidden; }
.note-card-gallery-img { overflow: hidden; }
.note-card-gallery-img img { width: 100%; height: 100%; object-fit: cover; }
.note-card-gallery-more { display: flex; align-items: center; justify-content: center; background: var(--bg-block); color: var(--text-dim); font-size: 0.85rem; font-weight: 700; }

/* Note Card — Checklist Preview */
.note-card-checklist-preview { display: flex; flex-direction: column; gap: 0.25rem; }
.note-card-progress { height: 4px; background: var(--bg-block); border-radius: 2px; overflow: hidden; margin-bottom: 0.3rem; }
.note-card-progress-bar { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s; }
.note-card-progress-text { font-size: 0.7rem; color: var(--text-dim); margin-bottom: 0.2rem; }
.note-card-check-item { font-size: 0.8rem; color: var(--text-dim); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-card-check-item.done { text-decoration: line-through; opacity: 0.5; }
.note-card-check-more { font-size: 0.7rem; color: var(--text-dim); font-style: italic; }

/* Gallery Editor */
.note-gallery-section { margin-top: 0.5rem; }
.note-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; }
.note-gallery-thumb { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; }
.note-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.note-gallery-remove { position: absolute; top: 0.25rem; right: 0.25rem; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.7); border: none; color: white; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.2s; }
.note-gallery-remove:hover { opacity: 1; background: var(--danger); }
.note-gallery-add { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 2px dashed var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-dim); font-size: 1.5rem; transition: all 0.2s; min-height: 100px; }
.note-gallery-add:hover { border-color: var(--accent); color: var(--accent); }

/* Gallery View */
.note-view-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; overflow: hidden; }
.note-view-gallery-img { overflow: hidden; aspect-ratio: 4/3; }
.note-view-gallery-img img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: transform 0.3s, filter 0.3s; display: block; }
.note-view-gallery-img img:hover { transform: scale(1.05); filter: brightness(1.1); }
/* First image spans full width for hero effect */
.note-view-gallery .note-view-gallery-img:first-child:nth-last-child(n+3) { grid-column: 1 / -1; aspect-ratio: 21/9; }

/* Checklist Editor */
.note-checklist-section { margin-top: 0.5rem; }
.note-checklist { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.5rem; }
.note-checklist-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; background: var(--bg-block); border-radius: var(--radius-sm); }
.note-check-box { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.note-check-text { flex: 1; background: none; border: none; color: var(--text-main); font-size: 0.9rem; font-family: inherit; padding: 0.25rem; outline: none; }
.note-check-text:focus { border-bottom: 1px solid var(--accent); }
.note-check-remove { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; opacity: 0.4; transition: all 0.2s; padding: 0.25rem; }
.note-check-remove:hover { color: var(--danger); opacity: 1; }

/* Checklist View */
.note-view-checklist { margin-bottom: 1rem; }
.note-view-progress { height: 6px; background: var(--bg-block); border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; }
.note-view-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }
.note-view-progress-label { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.75rem; }
.note-view-check-item { padding: 0.5rem 0.75rem; margin-bottom: 0.25rem; background: var(--bg-block); border-radius: var(--radius-sm); font-size: 0.9rem; cursor: pointer; transition: all 0.2s; color: var(--text-main); }
.note-view-check-item:hover { background: var(--bg-elevated); }
.note-view-check-item.done { color: var(--text-dim); text-decoration: line-through; opacity: 0.6; }

/* DM Tools */
.dm-tools { margin-top: 2rem; }
.dm-tool-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
.dm-tool-card h3 { color: var(--text-bright); font-size: 1rem; margin-bottom: 1rem; }

/* Initiative Tracker — legacy styles removed, see 3-column layout section below */

/* Dice Roller */
.dice-buttons { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.dice-btn { padding: 0.5rem 0.9rem; background: var(--bg-block); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-main); cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: all 0.2s; font-family: inherit; }
.dice-btn:hover { border-color: var(--accent); color: var(--accent); }
.dice-result { min-height: 50px; display: flex; align-items: center; gap: 0.5rem; }
.dice-roll-value { font-size: 2rem; font-weight: 800; color: var(--gold); }
.dice-roll-label { font-size: 0.85rem; color: var(--text-dim); }
.dice-animate { animation: diceRoll 0.3s ease-out; }
@keyframes diceRoll { 0% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }

/* =============================================================
   FINAL VISUAL POLISH — Missing classes & consistency fixes
   ============================================================= */

/* ===== TAB CONTENT WRAPPERS ===== */
.tab-combat,
.tab-spells,
.tab-inventory {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ===== TIMELINE EVENT TYPE COLORS (dynamic classes from ev.type) ===== */
.timeline-event.timeline-discovery::before,
.timeline-event.timeline-discovery .timeline-marker { background: var(--success); box-shadow: 0 0 8px rgba(74, 222, 128, 0.3); }
.timeline-event.timeline-social::before,
.timeline-event.timeline-social .timeline-marker { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.timeline-event.timeline-combat::before,
.timeline-event.timeline-combat .timeline-marker { background: var(--danger); box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
.timeline-event.timeline-danger::before,
.timeline-event.timeline-danger .timeline-marker { background: var(--danger); box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
.timeline-event.timeline-magic::before,
.timeline-event.timeline-magic .timeline-marker { background: #a855f7; box-shadow: 0 0 8px rgba(168, 85, 247, 0.3); }
.timeline-event.timeline-quest::before,
.timeline-event.timeline-quest .timeline-marker { background: var(--gold); box-shadow: 0 0 8px rgba(240, 192, 64, 0.3); }

/* Dashboard recent events — discovery, social, combat variants */
.dash-recent-event.timeline-discovery { border-left-color: var(--success); }
.dash-recent-event.timeline-social { border-left-color: var(--accent); }
.dash-recent-event.timeline-combat { border-left-color: var(--danger); }

/* ===== LORE PAGE H1 ===== */
.lore-page > h1,
.lore-header h1 {
    font-size: 1.8rem;
    color: var(--text-bright);
    margin-bottom: 0.5rem;
}

/* ===== ABILITY EDIT MODE CLASS ===== */
.ability.edit-mode {
    cursor: pointer;
}

/* ===== CHAR NAME DISPLAY (separate span inside h1) ===== */
.char-name-display {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* ===== CONSISTENT h3 WITHIN SHEET BLOCKS ===== */
.sheet-block h3 {
    font-size: 1rem;
    color: var(--text-bright);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

/* ===== SHEET BLOCK > h3 SUBCLASS / SECTION HEADERS ===== */
.sheet-block > h3 {
    font-size: 1rem;
    color: var(--accent);
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
}

/* ===== CONSISTENT p WITHIN SHEET BLOCKS ===== */
.sheet-block p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ===== PAGE GLOBAL h1 CONSISTENCY ===== */
.dashboard h1 {
    color: var(--text-bright);
}

/* ===== BANNER & PORTRAIT PLACEHOLDERS ===== */
.char-banner .banner-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-dim);
    opacity: 0.3;
    background: linear-gradient(135deg, var(--bg-block), var(--bg-elevated));
}

.char-portrait .portrait-placeholder {
    font-size: 2.5rem;
    color: var(--text-dim);
    opacity: 0.3;
}

/* ===== SELECT ELEMENTS (match dark theme) ===== */
select.edit-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8a9a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    padding-right: 2rem;
    cursor: pointer;
}

select.edit-input option {
    background: var(--bg-card);
    color: var(--text-main);
}

/* ===== NAV LOGO ACCENT (redundant safety rule) ===== */
.nav-logo .logo-accent {
    color: var(--accent);
    transition: color 0.3s;
}

/* ===== FADEUP ON ALL PAGES ===== */
.dashboard,
.character-page,
.maps-page,
.timeline-page,
.lore-page,
.notes-page {
    animation: fadeUp 0.4s ease-out;
}

/* ===== HP INPUT FOCUS RING ===== */
.hp-input:focus {
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* ===== TIMELINE SESSION LABEL ===== */
.timeline-session {
    display: block;
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.15rem;
}

/* ===== LEVEL-UP MODAL SUB-PICKERS ===== */
.levelup-asi-add {
    /* Inherits from .asi-ability-btn — no extra styles needed, selector exists for JS querySelectorAll */
}

.levelup-feat-pick {
    /* Inherits from .feat-card — no extra styles needed, selector exists for JS querySelectorAll */
}

/* ===== SYNC INDICATOR ===== */
.sync-indicator { font-size: 1.1rem; cursor: default; margin-right: 0.25rem; }
.sync-online { color: var(--success); }
.sync-offline { color: var(--warning); opacity: 0.6; }

.levelup-feat-pick.selected {
    border-color: var(--accent);
    background: var(--accent-glow);
    color: var(--accent);
    font-weight: 600;
}

/* ===== DM TOOLS MOBILE ===== */
@media (max-width: 700px) {
    .dm-tools {
        margin-top: 1.5rem;
    }

    .dm-tool-card {
        padding: 1rem;
    }

    .init-add {
        flex-direction: column;
        align-items: stretch;
    }

    .dice-buttons {
        justify-content: center;
    }

    .dice-result {
        justify-content: center;
    }

    /* Lore editor responsive */
    .lore-editor .edit-textarea {
        min-height: 200px;
    }

    .lore-header {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .lore-article {
        padding: 1.25rem;
    }

    .lore-article h1 {
        font-size: 1.4rem;
    }

    /* Map viewer responsive */
    .map-breadcrumb {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .maps-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Notes responsive */
    .notes-grid { grid-template-columns: 1fr; }
    .note-layout-image-right .note-view-content, .note-layout-image-left .note-view-content { flex-direction: column; }
    .note-view-img-side { width: 100%; }
    .note-layout-options { flex-wrap: wrap; }
    .note-view-gallery { grid-template-columns: repeat(2, 1fr); }
    .note-gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .notes-header-right { flex-wrap: wrap; }

    /* Login form responsive */
    .login-title {
        font-size: 1.6rem;
    }

    .login-logo {
        font-size: 2.5rem;
    }
}

/* ===== THEME PICKER ===== */
.theme-picker-wrap { position: relative; }
.theme-picker-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 0.25rem; transition: transform 0.2s; }
.theme-picker-btn:hover { transform: scale(1.1); }
.theme-picker-popup { position: absolute; top: 100%; right: 0; z-index: 200; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; box-shadow: 0 8px 32px rgba(0,0,0,0.5); margin-top: 0.5rem; }
.theme-picker-grid { display: grid; grid-template-columns: repeat(4, 30px); gap: 0.4rem; }
.theme-option { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; }
.theme-option:hover { transform: scale(1.15); border-color: rgba(255,255,255,0.3); }
.theme-option.active { border-color: white; box-shadow: 0 0 8px currentColor; }

/* ===== FEAT SELECTION CARDS (full info) ===== */
.feat-grid-full { display: flex; flex-direction: column; gap: 0.5rem; max-height: 400px; overflow-y: auto; padding-right: 0.5rem; }

.feat-card-full {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.feat-card-full:hover {
    border-color: var(--accent);
    background: rgba(34, 211, 238, 0.04);
}

.feat-card-full.selected {
    border-color: var(--accent);
    background: rgba(34, 211, 238, 0.08);
    box-shadow: 0 0 0 1px var(--accent);
}

.feat-card-full.unavailable {
    opacity: 0.4;
    cursor: not-allowed;
}

.feat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    gap: 0.5rem;
}

.feat-card-header h4 {
    color: var(--text-bright);
    font-size: 0.9rem;
    margin: 0;
}

.feat-prereq-badge {
    font-size: 0.65rem;
    background: rgba(251, 191, 36, 0.15);
    color: var(--gold);
    padding: 0.1rem 0.5rem;
    border-radius: 100px;
    white-space: nowrap;
    text-transform: uppercase;
}

.feat-card-desc {
    color: var(--text-dim);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
}

/* ===== TIMELINE EDIT CONTROLS ===== */
.event-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.chapter-edit { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.7rem; opacity: 0; transition: opacity 0.2s; margin-left: auto; }
.chapter-tab:hover .chapter-edit { opacity: 0.7; }
.chapter-edit:hover { color: var(--accent); opacity: 1 !important; }

/* =============================================================
   MOBILE TOUCH DEVICE SUPPORT
   Targets phones & tablets with touch (no hover capability)
   ============================================================= */

/* ===== BODY SCROLL LOCK (for modals) ===== */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* ===== SAFE AREA (notch phones) =====
   The navbar's main padding already accounts for safe-area-inset via max() —
   here we only add the TOP inset (status-bar overlap on iOS). Side insets are
   handled inline at the .navbar rule with max(env(...), clamp(...)). */
@supports (padding: env(safe-area-inset-top)) {
    .navbar {
        padding-block-start: env(safe-area-inset-top);
    }
    .dashboard, .character-page, .notes-page, .lore-page, .maps-page, .timeline-page {
        padding-inline-start: max(env(safe-area-inset-left, 0px), 0.75rem);
        padding-inline-end: max(env(safe-area-inset-right, 0px), 0.75rem);
    }
    .tab-bar {
        padding-block-end: env(safe-area-inset-bottom);
    }
}

/* ===== TOUCH DEVICE OVERRIDES ===== */
@media (hover: none) and (pointer: coarse) {

    /* -- Prevent iOS zoom on input focus (must be >= 16px) -- */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* -- Touch targets: minimum 44x44px -- */
    .death-save-dot {
        width: 36px;
        height: 36px;
    }

    .slot-dot {
        width: 32px;
        height: 32px;
    }

    .slot-dots {
        gap: 0.5rem;
    }

    .death-save-dots {
        gap: 0.5rem;
    }

    .edit-trigger {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        opacity: 0.6 !important;
    }

    .color-dot {
        width: 32px;
        height: 32px;
    }

    .color-option {
        width: 36px;
        height: 36px;
    }

    .color-picker-popup {
        grid-template-columns: repeat(6, 36px);
        gap: 0.5rem;
    }

    .quote-remove-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        opacity: 0.7 !important;
    }

    .map-card-delete {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        opacity: 0.8 !important;
    }

    .item-remove {
        opacity: 0.7 !important;
        min-width: 36px;
        min-height: 36px;
    }

    .chapter-edit {
        opacity: 0.7 !important;
        min-width: 44px;
        min-height: 44px;
        font-size: 0.85rem;
    }

    .condition-tag {
        padding: 0.5rem 0.9rem;
        font-size: 0.8rem;
    }

    .tab-btn {
        padding: 0.65rem 1rem;
        font-size: 0.85rem;
        min-height: 44px;
    }

    .rest-btn {
        padding: 0.65rem 1.2rem;
        min-height: 44px;
    }

    .btn, .btn-sm {
        min-height: 44px;
        min-width: 44px;
    }

    .nav-link, .nav-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .level-btn {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .inspiration-toggle {
        min-height: 44px;
    }

    /* -- Hover-dependent elements: always visible on touch -- */
    .editable-field .edit-trigger,
    .char-name-wrap .edit-trigger {
        opacity: 0.6 !important;
    }

    .info-edit-btn {
        opacity: 0.6 !important;
    }

    .quote-item .quote-remove-btn {
        opacity: 0.7 !important;
    }

    .map-card .map-card-delete {
        opacity: 0.8 !important;
    }

    .chapter-tab .chapter-edit {
        opacity: 0.7 !important;
    }

    /* -- Image upload overlays: hidden on touch devices (tap image to upload) -- */
    .char-banner .image-upload-overlay,
    .char-portrait-wrap .image-upload-overlay {
        opacity: 0 !important;
    }

    /* -- Active states for touch feedback -- */
    .btn:active, .btn-sm:active, .tab-btn:active, .rest-btn:active,
    .nav-link:active, .quick-link:active, .spell-toggle:active,
    .condition-tag:active, .death-save-dot:active, .slot-dot:active,
    .level-btn:active, .feat-card-full:active, .char-card:active {
        transform: scale(0.96);
        transition: transform 0.1s;
    }

    /* -- Disable hover transforms on touch (prevents sticky hover) -- */
    .char-card:hover {
        transform: none;
    }

    .quick-link:hover {
        transform: none;
    }

    .color-dot:hover {
        transform: none;
    }

    .color-option:hover {
        transform: none;
    }

    .feat-card-full:hover {
        background: var(--bg-block);
        border-color: var(--border);
    }

    .feat-card-full.selected:hover {
        border-color: var(--accent);
        background: rgba(34, 211, 238, 0.08);
    }

    /* -- Tooltip popup: better sizing on mobile -- */
    .tooltip-popup, .tc-card {
        max-width: min(320px, 90vw);
        font-size: 0.85rem;
    }

    /* -- Mobile nav: full-width links -- */
    .nav-links.open {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .nav-links.open .nav-link,
    .nav-links.open a {
        padding: 0.9rem 1.2rem;
        font-size: 1rem;
        border-bottom: 1px solid var(--border);
    }

    /* -- Scrollable areas: show scroll hints -- */
    .tab-bar {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .tab-bar::-webkit-scrollbar {
        display: none;
    }
    .tab-bar::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to right, transparent, var(--bg-card));
        pointer-events: none;
        z-index: 2;
    }

    /* -- Modal improvements for touch -- */
    .levelup-modal, .modal-box {
        max-height: 85vh;
        max-height: 85dvh;
    }

    .wizard-card, .levelup-card {
        max-height: 80vh;
        max-height: 80dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* -- HP controls: stack on touch -- */
    .hp-controls {
        flex-direction: column;
        gap: 0.5rem;
    }

    .hp-btn {
        min-height: 44px;
        font-size: 0.9rem;
    }

    /* -- Map: touch-friendly edit handles -- */
    .shape-node, .shape-center { r: 1.6; }
}

/* ============================================================
   Dashboard Banner (extends .welcome-banner from line ~327)
   ============================================================ */
.welcome-banner.has-banner {
    /* Slim banner: korter qua hoogte, breder gevoel. De geuploade afbeelding
       fit op hoogte (auto width) en herhaalt niet — zo blijven proporties
       behouden ongeacht de original aspect ratio. */
    min-height: 140px;
    max-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    /* Met een echte afbeelding voelt de base-banner rand te druk (gouden
       hairline + meerdere inner glows die met de foto vechten). Rustiger:
       subtiele border + één zachte drop-shadow, geen inset-ringen. */
    border-color: color-mix(in srgb, var(--hairline-gold) 45%, transparent);
    box-shadow: 0 12px 32px -16px color-mix(in srgb, var(--bg-dark) 90%, transparent);
}
@media (min-width: 700px) {
    .welcome-banner.has-banner { min-height: 160px; max-height: 220px; }
}
.welcome-banner.has-banner::before {
    /* Override the parchment-strip ornament when user supplies a real image */
    content: '';
    position: absolute;
    inset: 0;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 100%;
    background: linear-gradient(to top,
        color-mix(in oklab, var(--bg-dark) 92%, transparent) 0%,
        color-mix(in oklab, var(--bg-dark) 35%, transparent) 60%,
        transparent 100%);
    border-radius: inherit;
    z-index: 0;
}
.welcome-banner.has-banner::after { display: none; }
.welcome-banner.has-banner > :not(.banner-upload-slots) { position: relative; z-index: 1; }
.banner-upload-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    background: rgba(0,0,0,0.5);
    border: none;
    color: var(--text);
    font-size: 1.2rem;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.banner-upload-btn:hover { opacity: 1; }
.banner-upload-slots {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.welcome-banner:hover .banner-upload-slots,
.welcome-banner:focus-within .banner-upload-slots,
.welcome-banner.show-upload-slots .banner-upload-slots {
    opacity: 1;
    pointer-events: auto;
}
.banner-upload-slot {
    position: relative;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text);
    font-size: 0.6rem;
    padding: 0.18rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    opacity: 0.92;
    transition: opacity 0.2s, border-color 0.2s, background 0.2s;
    white-space: nowrap;
    width: 96px;
    box-sizing: border-box;
}
.banner-upload-slot .banner-slot-label { flex: 1; text-align: left; }
.banner-upload-slot:hover { opacity: 1; border-color: var(--accent); }
.banner-upload-slot.filled { background: rgba(0,0,0,0.7); border-color: rgba(255,255,255,0.25); }
.banner-upload-slot.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.banner-slot-clear {
    background: none;
    border: none;
    color: inherit;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 0.15rem;
    opacity: 0.7;
}
.banner-slot-clear:hover { opacity: 1; color: var(--danger, #ef4444); }
.campaign-name .edit-trigger {
    font-size: 0.8em;
    opacity: 0.5;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
}
.campaign-name .edit-trigger:hover { opacity: 1; }

/* ============================================================
   Timeline Event Layouts
   ============================================================ */
.event-full-image {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    min-height: 200px;
    background-size: cover;
    background-position: center;
}
.event-full-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,15,0.9) 0%, rgba(10,10,15,0.2) 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
}
.event-full-image-overlay h3,
.event-full-image-overlay p,
.event-full-image-overlay .timeline-session {
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.event-image-top img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    max-height: 300px;
    object-fit: cover;
}
.event-split {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.event-split-image-left { flex-direction: row; }
.event-split-image-right { flex-direction: row-reverse; }
.event-split-img {
    flex: 0 0 40%;
    max-width: 40%;
}
.event-split-img img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
}
.event-split-text { flex: 1; }
.event-banner {
    height: 120px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

/* Event Layout Picker */
.event-layout-picker { margin: 0.5rem 0; }
.event-layout-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.event-layout-option {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.75rem;
    text-align: center;
    transition: all 0.2s;
    min-width: 60px;
}
.event-layout-option:hover { border-color: var(--accent); color: var(--text); }
.event-layout-option.active {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb, 34,211,238), 0.15);
    color: var(--accent);
}
.event-layout-option span { font-size: 0.65rem; display: block; margin-top: 2px; }

/* Event image section in form */
.event-image-preview {
    position: relative;
    margin: 0.5rem 0;
}
.event-image-preview img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
}
.event-image-preview .btn { position: absolute; top: 0.5rem; right: 0.5rem; }

/* ============================================================
   Map Categories
   ============================================================ */
.maps-category { margin-bottom: 1.5rem; }
.maps-category-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.map-card-cat-btn {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: rgba(0,0,0,0.6);
    border: none;
    color: var(--text-dim);
    font-size: 0.8rem;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}
.map-card:hover .map-card-cat-btn { opacity: 1; }

/* ============================================================
   Note Tags with Categories
   ============================================================ */
.note-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    min-height: 1.5rem;
}
.note-tags-list .note-tag {
    border-left: 3px solid;
    padding-left: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.tag-remove {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 2px;
    line-height: 1;
}
.tag-remove:hover { color: var(--danger); }
.note-tag-add {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.note-tag-add select {
    min-width: 120px;
}

/* Inline event editing */
.timeline-content .edit-input,
.timeline-content .edit-textarea,
.timeline-content .edit-actions {
    margin-top: 0.4rem;
}
.timeline-content .event-layout-picker {
    margin-top: 0.5rem;
}

/* ============================================================
   Prepared Spells (Combat Tab)
   ============================================================ */
.prepared-spells-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.prepared-spell-tag {
    padding: 0.2rem 0.6rem;
    background: rgba(var(--accent-rgb, 34,211,238), 0.1);
    border: 1px solid rgba(var(--accent-rgb, 34,211,238), 0.25);
    border-radius: 100px;
    font-size: 0.75rem;
    color: var(--accent);
}

/* ============================================================
   Character Timeline (Story Tab)
   ============================================================ */
/* Timeline block spans full width */
.sheet-block:has(.char-timeline) {
    grid-column: 1 / -1;
}
.char-timeline {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.char-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), var(--gold));
    border-radius: 1px;
}
.char-timeline-entry {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.char-timeline-marker {
    position: absolute;
    left: -1.5rem;
    top: 5px;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    transform: translateX(-4px);
    box-shadow: 0 0 6px var(--accent-glow);
    flex-shrink: 0;
}
.char-timeline-content {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex: 1;
}
.char-timeline-age {
    font-weight: 700;
    color: var(--accent);
    font-size: 0.85rem;
    white-space: nowrap;
    min-width: 60px;
}
.char-timeline-text {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.5;
}
.char-timeline-remove {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 1rem;
}
.char-timeline-entry:hover .char-timeline-remove { opacity: 1; }
.char-timeline-remove:hover { color: var(--danger); }
.char-timeline-add {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

/* ============================================================
   Family Tree — 3-Tier Layout
   ============================================================ */
.sheet-block:has(.ftree) { grid-column: 1 / -1; }

.ftree {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 0;
}

/* SVG overlay for connection lines */
.ftree-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
}
.ftree-line {
    stroke: var(--border);
    stroke-width: 1.5;
    stroke-linecap: round;
}
.ftree-line-partner {
    stroke: var(--accent);
    stroke-dasharray: 4 3;
    stroke-opacity: 0.6;
}

/* Families person grid */
.families-person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.families-person-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--person-color, var(--accent));
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
}
.families-person-card:hover {
    border-color: var(--person-color, var(--accent));
    box-shadow: 0 0 12px rgba(var(--accent-rgb, 34,211,238), 0.15);
    transform: translateY(-1px);
}
.families-person-card.expanded {
    border-color: var(--person-color, var(--accent));
    background: color-mix(in srgb, var(--person-color, var(--accent)) 6%, var(--bg-card));
}
.families-person-header { display: flex; flex-direction: column; gap: 0.2rem; }
.families-person-name { font-weight: 600; color: var(--person-color, var(--accent)); font-size: 0.9rem; }
.families-person-badge {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    opacity: 0.7;
}
.families-person-count { font-size: 0.75rem; color: var(--text-dim); }
.families-tree-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
}

/* Tier row */
.ftree-tier {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    padding: 0.25rem 0;
}

.ftree-tier-label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    opacity: 0.5;
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

/* Node card */
.ftree-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 120px;
    max-width: 180px;
    transition: opacity 0.2s;
    z-index: 1;
}

.ftree-node-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ftree-node:hover .ftree-node-inner { border-color: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb, 34,211,238), 0.15); }
.ftree-node.deceased { opacity: 0.5; }
.ftree-node.deceased:hover { opacity: 0.8; }
.ftree-node.ftree-self .ftree-node-inner {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
}
.ftree-node-partner .ftree-node-inner {
    border-style: dashed;
    border-color: var(--accent);
    border-width: 1px;
}

/* Node text */
.ftree-node-inner strong { color: var(--text-bright); font-size: 0.85rem; }
.ftree-relation {
    color: var(--accent);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ftree-status { font-size: 0.65rem; }
.ftree-notes {
    color: var(--text-dim);
    font-size: 0.7rem;
    line-height: 1.3;
    margin-top: 0.1rem;
}
.ftree-link { text-decoration: none; color: inherit; }
.ftree-link:hover .ftree-node-inner { border-color: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.2); }

/* Remove button */
.ftree-remove {
    position: absolute;
    top: -8px;
    right: -4px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-dim);
    cursor: pointer;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s;
    z-index: 2;
}
.ftree-node:hover .ftree-remove { opacity: 1; }
.ftree-remove:hover { color: var(--danger); border-color: var(--danger); }

/* Add buttons */
.ftree-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px dashed var(--border);
    background: none;
    color: var(--text-dim);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    align-self: center;
    z-index: 1;
}
.ftree-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.ftree-add-partner {
    width: auto;
    height: auto;
    border-radius: 100px;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
}

/* Add form */
.ftree-add-form {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--bg-block);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.ftree-form-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.ftree-form-row:last-child { margin-bottom: 0; }

/* Responsive */
@media (max-width: 600px) {
    .ftree-node { min-width: 100px; max-width: 140px; }
    .ftree-node-inner { padding: 0.4rem 0.5rem; }
    .ftree-node-inner strong { font-size: 0.75rem; }
    .ftree-tier-label { display: none; }
}

/* ============================================================
   Character Page Layout Cleanup
   ============================================================ */
.sheet-block p {
    max-width: 680px;
}
.personality-item p {
    max-width: 600px;
    line-height: 1.6;
}
.editable-field .field-display {
    max-width: 680px;
}

.character-page { position: relative; }
/* Accessibility: focus-visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============================================================
   Portrait Glow Ring — rotating tapered border
   ============================================================ */
@keyframes glowRingSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.glow-ring {
    --ring-color: var(--char-accent, var(--accent));
    z-index: 2;
}

.glow-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    /* Tapered ring: thick portion fades gradually to thin */
    background: conic-gradient(
        from 0deg,
        var(--ring-color) 0deg,
        var(--ring-color) 30deg,
        color-mix(in srgb, var(--ring-color) 70%, transparent) 60deg,
        color-mix(in srgb, var(--ring-color) 40%, transparent) 90deg,
        color-mix(in srgb, var(--ring-color) 15%, transparent) 120deg,
        transparent 150deg,
        transparent 300deg,
        color-mix(in srgb, var(--ring-color) 10%, transparent) 330deg,
        color-mix(in srgb, var(--ring-color) 50%, transparent) 345deg,
        var(--ring-color) 360deg
    );
    pointer-events: none;
    z-index: -1;
    /* Mask to create the ring shape — hollow center */
    -webkit-mask: radial-gradient(circle, transparent 62%, black 64%);
    mask: radial-gradient(circle, transparent 62%, black 64%);
}
@media (prefers-reduced-motion: no-preference) {
    .glow-ring::before { animation: glowRingSpin 3s linear infinite; }
}

/* Glow layer — blurred copy for the light bloom effect */
.glow-ring::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--ring-color) 0deg,
        var(--ring-color) 30deg,
        color-mix(in srgb, var(--ring-color) 60%, transparent) 60deg,
        color-mix(in srgb, var(--ring-color) 25%, transparent) 90deg,
        transparent 130deg,
        transparent 310deg,
        color-mix(in srgb, var(--ring-color) 40%, transparent) 345deg,
        var(--ring-color) 360deg
    );
    pointer-events: none;
    z-index: -2;
    -webkit-mask: radial-gradient(circle, transparent 54%, black 58%, black 72%, transparent 76%);
    mask: radial-gradient(circle, transparent 54%, black 58%, black 72%, transparent 76%);
    filter: blur(6px);
    opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
    .glow-ring::after { animation: glowRingSpin 3s linear infinite; }
}

/* ============================================================
   Global Dice Roller
   ============================================================ */
.dice-fab {
    position: fixed;
    bottom: var(--fab-bottom);
    right: var(--fab-slot-0);
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    background: #1a1a2e;
    border: 2px solid #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 90;
    transition: all 0.2s;
    box-shadow: 0 2px 12px rgba(251, 191, 36, 0.3);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}
.dice-fab:hover {
    border-color: #fcd34d;
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.5);
}
.dice-fab-icon {
    width: var(--fab-icon);
    height: var(--fab-icon);
    color: #fbbf24;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.dice-fab:hover .dice-fab-icon { color: #fcd34d; }
.dice-panel {
    position: fixed;
    bottom: calc(var(--fab-bottom) + 60px);
    right: var(--fab-slot-0);
    width: 260px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    z-index: 91;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    overflow: hidden;
}
.dice-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.9rem;
}
.dice-panel-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.2rem;
    cursor: pointer;
}
/* Dice Hand System */
#dice-panel-content {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.dice-top {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
}
.dice-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid var(--border);
    padding-top: 0.6rem;
}
.dice-empty-hint {
    text-align: center;
    font-size: 0.8rem;
    margin: 0.25rem 0;
    color: var(--text-dim);
}
.dice-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.dice-pool-btn {
    flex: 1;
    min-width: 40px;
    padding: 0.4rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.dice-pool-btn:hover { border-color: var(--accent); color: var(--accent); }
.dice-pool-btn:active { transform: scale(0.9); }
.dice-hand {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.dice-hand-label { font-size: 0.75rem; color: var(--text-dim); margin-right: 0.25rem; }
.dice-chip {
    padding: 0.2rem 0.5rem;
    background: rgba(var(--accent-rgb), 0.15);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 100px;
    font-size: 0.75rem;
    color: var(--accent);
    cursor: pointer;
    transition: all 0.15s;
}
.dice-chip:hover { background: rgba(var(--accent-rgb), 0.3); }
.dice-hand-actions { display: flex; gap: 0.4rem; }
.dice-hand-actions .btn { flex: 1; }
.dice-hand-actions .btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.dice-results { text-align: center; }
.dice-total {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent);
    text-shadow: 0 0 20px var(--accent-glow);
}
@media (prefers-reduced-motion: no-preference) {
    .dice-total { animation: diceRollBounce 0.4s ease-out; }
}
@keyframes diceRollBounce {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
.dice-result-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
    margin-top: 0.5rem;
}
.dice-result-chip {
    padding: 0.25rem 0.5rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
}
.dice-result-chip:hover { border-color: var(--accent); }
.dice-result-chip.max { color: var(--gold); border-color: var(--gold); }
.dice-result-chip.min { color: var(--danger); border-color: var(--danger); }

/* Auto-grow textarea */
.auto-grow { overflow: hidden; resize: none; }

/* ============================================================
   Page Transitions
   ============================================================ */
.main-content {
    animation: none;
}
#app.no-animate,
#app.no-animate *,
#app.no-animate *::before,
#app.no-animate *::after {
    animation: none !important;
    transition: none !important;
}
.page-exit {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s, transform 0.12s;
}
.page-enter {
    opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
    .page-enter { animation: pageEnter 0.25s ease-out; }
}
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Party Gold Card
   ============================================================ */
.party-gold-card .gold-input {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--gold);
    font-family: inherit;
    font-size: 0.8rem;
    padding: 0.15rem;
}

/* ============================================================
   Concentration Tracking
   ============================================================ */
.concentration-block { }
.concentration-active {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.concentration-spell {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
    padding: 0.4rem 0.8rem;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: var(--radius-sm);
}

/* ============================================================
   Ability Radar Chart
   ============================================================ */
.radar-block { grid-column: 1 / -1; }
.radar-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.ability-radar text { font-family: inherit; }

/* Wide screens: ability scores 2×3 left, radar right */
@media (min-width: 760px) {
    .radar-block {
        display: grid;
        grid-template-columns: minmax(180px, 240px) 1fr;
        gap: 1.25rem;
        align-items: center;
    }
    .radar-block > h2 { grid-column: 1 / -1; margin-bottom: 0; }
    .radar-block > .ability-edit-header { grid-column: 1 / -1; }
    .radar-block > .ability-edit-actions { grid-column: 1 / -1; }
    .radar-block > .radar-container { grid-column: 2; margin-bottom: 0; }
    .radar-block > .ability-scores {
        grid-column: 1;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }
    .radar-block > .ability-scores .ability {
        padding: 0.4rem 0.3rem;
    }
    .radar-block > .ability-scores .ability-name {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
        margin-bottom: 0.1rem;
    }
    .radar-block > .ability-scores .ability-score {
        font-size: 1.15rem;
    }
    .radar-block > .ability-scores .ability-mod {
        font-size: 0.75rem;
    }
}

/* ============================================================
   Weapon Roll Button & Result
   ============================================================ */
.weapon-roll-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-dim);
    transition: all 0.15s;
    margin-left: auto;
}
.weapon-roll-btn:hover { border-color: var(--accent); color: var(--accent); }
.weapon-roll-btn:active { transform: scale(0.9); }
.weapon { display: flex; align-items: center; gap: 0.5rem; }
.weapon-roll-result {
    position: absolute;
    right: 0;
    top: -60px;
    background: var(--bg-elevated);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
    z-index: 20;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    animation: fadeUp 0.2s ease-out;
}
.weapon-roll-result.nat20 { border-color: var(--gold); color: var(--gold); }
.weapon-roll-result.nat1 { border-color: var(--danger); color: var(--danger); }
.weapon { position: relative; }

/* ============================================================
   Quest Tracker
   ============================================================ */
.dash-quests { margin-bottom: 2rem; }
.dash-quests-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.quest-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    margin-bottom: 0.4rem;
}
.quest-item.quest-done {
    border-left-color: var(--success);
    opacity: 0.6;
}
.quest-icon { font-size: 1.1rem; }
.quest-info { flex: 1; }
.quest-info strong { font-size: 0.9rem; }
.quest-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }
.quest-completed-section { margin-top: 0.5rem; }

/* ============================================================
   Inventory Categories
   ============================================================ */
.item-category { margin-bottom: 1rem; }
.item-cat-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.item-cat-count { font-weight: 400; opacity: 0.6; }

/* ============================================================
   Combat Log
   ============================================================ */
.combat-log-section { margin-top: 0.5rem; }
.combat-log { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.4rem; }
.combat-log-entry {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    background: var(--bg-block);
    border-left: 3px solid var(--text-dim);
}
.combat-log-damage { border-left-color: var(--danger); color: var(--danger); }
.combat-log-heal { border-left-color: var(--success); color: var(--success); }
.combat-log-rest { border-left-color: var(--accent); color: var(--accent); }
.combat-log-time { margin-left: auto; opacity: 0.4; font-size: 0.65rem; color: var(--text-dim); }
.btn-inline-delete { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.9rem; padding: 0 0.2rem; opacity: 0.4; }
.btn-inline-delete:hover { opacity: 1; color: var(--danger); }

/* ============================================================
   NPC Tracker
   ============================================================ */
/* ----- Lore tab bar ----- */
.lore-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border);
    margin: 0.5rem 0 1.25rem;
    padding-bottom: 0.5rem;
}
.lore-tab {
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-dim);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lore-tab:hover { background: var(--bg-hover); color: var(--text-main); }
.lore-tab.active {
    color: var(--accent);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.lore-tab-content { min-height: 40vh; }
.lore-cat-toolbar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.lore-cat-search { flex: 1; min-width: 160px; max-width: 360px; }

/* ----- Generic lore-entry cards ----- */
.lore-entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 1rem;
    grid-auto-flow: row dense;
    align-items: start;
}
/* Collapsed = 2:3 portrait card. Name overlaid on the bottom (always visible);
   info revealed on hover (mainly for items). Click expands the card to a
   horizontal layout: image left (vertical fit), name + info on the right. */
.lore-entry-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 2 / 3;
    display: flex;
}
.lore-entry-card:hover { border-color: var(--accent); }
.lore-entry-img { width: 100%; height: 100%; overflow: hidden; background: var(--bg-hover); }
.lore-entry-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lore-entry-img-empty { display: flex; align-items: center; justify-content: center; }
.lore-entry-img-empty span { font-size: 2.4rem; font-weight: 700; color: var(--text-dim); }

/* Body holds name + info. Collapsed: overlay anchored to the card bottom. */
.lore-entry-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0.55rem 0.7rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 35%, rgba(0,0,0,0.5) 75%, transparent);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 100%;
    overflow: hidden;
    transition: background 0.2s ease;
}
.lore-entry-name { font-size: 0.92rem; margin: 0; color: #fff; line-height: 1.2; }
.lore-entry-info { display: none; font-size: 0.78rem; overflow-y: auto; }
/* Hover (collapsed): reveal the info panel growing up from the bottom. */
.lore-entry-card:not(.expanded):hover .lore-entry-body {
    background: linear-gradient(to top, rgba(0,0,0,0.94) 70%, rgba(0,0,0,0.78));
}
.lore-entry-card:not(.expanded):hover .lore-entry-info { display: block; }
/* Monsters: minder info bij hover, alles pas bij klik (expanded).
   Hover toont enkel de naam; de volledige statblock verschijnt na klik.
   (Fix 2026-06-07 — gerapporteerd op /lore/monsters) */
.lore-grid-monsters .lore-entry-card:not(.expanded):hover .lore-entry-info { display: none; }
.lore-grid-monsters .lore-entry-card:not(.expanded):hover .lore-entry-body {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 35%, rgba(0,0,0,0.5) 75%, transparent);
}
.lore-entry-info::-webkit-scrollbar { width: 5px; }
.lore-entry-info::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }

/* Expanded: full-row horizontal layout. */
.lore-entry-card.expanded {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    cursor: default;
    flex-direction: row;
    align-items: stretch;
}
.lore-entry-card.expanded .lore-entry-img {
    flex: 0 0 auto;
    width: 220px;
    aspect-ratio: 2 / 3;
    height: auto;
    align-self: flex-start;
}
.lore-entry-card.expanded .lore-entry-body {
    position: static;
    flex: 1;
    min-width: 0;
    background: none;
    color: var(--text-main);
    padding: 0.9rem 1.1rem;
    max-height: 330px;
    overflow-y: auto;
}
.lore-entry-card.expanded .lore-entry-name { font-size: 1.2rem; color: var(--text-main); }
.lore-entry-card.expanded .lore-entry-info { display: block; }

/* Info-field rendering (shared by hover + expanded) */
.lore-info-row { display: flex; gap: 0.5rem; padding: 0.1rem 0; line-height: 1.35; }
.lore-info-label { color: var(--text-dim); font-weight: 600; flex: 0 0 auto; min-width: 8.5em; }
.lore-entry-card:not(.expanded) .lore-info-label { color: rgba(255,255,255,0.65); }
.lore-info-val { min-width: 0; word-break: break-word; }
.lore-info-block { margin: 0.4rem 0 0; }
.lore-info-block .lore-info-label { display: block; margin-bottom: 0.12rem; }
.lore-info-text { line-height: 1.45; white-space: pre-wrap; }

/* === Monster fog of war (#0C4rMb) === */
/* DM per-veld oog/slot-toggle */
.lore-info-row, .lore-info-block { align-items: center; }
.lore-vis-toggle {
    flex: 0 0 auto;
    margin-left: auto;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: 7px;
    font-size: 0.95rem; line-height: 1; cursor: pointer;
    opacity: 0.75; transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.lore-vis-toggle:hover { background: var(--bg-hover); border-color: var(--border); opacity: 1; }
.lore-vis-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* DM-view: privé velden subtiel getint zodat je in één blik ziet wat verborgen is */
.lore-info-row.is-private, .lore-info-block.is-private, .lore-ab-wrap.is-private {
    background: color-mix(in srgb, var(--accent-warm) 9%, transparent);
    border-radius: 6px;
}
.lore-ab-wrap { position: relative; }
.lore-ab-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }

/* Speler-hypothese: "krijt"-stijl (onzeker) vs canon (gewone tekst) */
.lore-info-row.is-hypothesis { border-left: 2px dotted var(--accent); padding-left: 0.5rem; margin-left: -0.5rem; }
.lore-hyp { display: inline-flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.lore-hyp-val { display: none; } /* anker voor realtime-patch; input toont de waarde al */
.lore-hyp-input {
    font: inherit; font-style: italic;
    color: color-mix(in srgb, var(--accent) 40%, var(--text-main));
    background: transparent; border: none; border-bottom: 1px dashed var(--accent);
    padding: 0.15rem 0.1rem; width: 100%; min-width: 0; border-radius: 4px; cursor: text;
    transition: background 0.15s, border-color 0.15s;
}
.lore-hyp-input::placeholder { color: var(--text-dim); font-style: italic; }
.lore-hyp-input:focus { outline: none; font-style: normal; background: var(--bg-block); box-shadow: 0 1px 0 var(--accent); }
.is-hypothesis .lore-info-label::after {
    content: '?'; display: inline-flex; align-items: center; justify-content: center;
    width: 1.1em; height: 1.1em; margin-left: 0.4em;
    border: 1px solid var(--accent); border-radius: 999px;
    font-size: 0.7em; font-weight: 700; color: var(--accent); vertical-align: 0.05em;
}
.lore-hyp-meta { font-size: 0.7rem; color: var(--text-dim); }
.is-hypothesis.is-empty-hyp .lore-hyp-meta { display: none; }
/* live-puls als een andere speler net invulde */
.lore-hyp.just-updated .lore-hyp-input { animation: hyp-pulse 1.1s ease-out 1; }
@keyframes hyp-pulse {
    0% { background: color-mix(in srgb, var(--accent) 22%, transparent); }
    100% { background: transparent; }
}
@media (hover: none) {
    .lore-vis-toggle { position: relative; opacity: 0.85; }
    .lore-vis-toggle::after { content: ''; position: absolute; inset: -7px; }
}
@media (max-width: 600px) {
    .lore-hyp-input { font-size: 16px; } /* voorkomt iOS-zoom bij focus */
}
@media (prefers-reduced-motion: reduce) {
    .lore-hyp.just-updated .lore-hyp-input { animation: none; }
}

/* Ability-score compact grid (display) */
.lore-ab-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.3rem; margin: 0.5rem 0; }
.lore-ab-cell { display: flex; flex-direction: column; align-items: center; padding: 0.28rem 0.1rem; background: var(--bg-hover, rgba(255,255,255,0.06)); border-radius: 6px; }
.lore-entry-card:not(.expanded) .lore-ab-cell { background: rgba(255,255,255,0.12); }
.lore-ab-name { font-size: 0.6rem; letter-spacing: 0.04em; color: var(--text-dim); font-weight: 700; }
.lore-entry-card:not(.expanded) .lore-ab-name { color: rgba(255,255,255,0.7); }
.lore-ab-score { font-size: 0.92rem; font-weight: 700; }
.lore-ab-mod { font-size: 0.7rem; color: var(--text-dim); }
.lore-entry-card:not(.expanded) .lore-ab-mod { color: rgba(255,255,255,0.6); }

/* Ability-score editor (modal) */
.lore-ab-edit { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; }
.lore-ab-edit-cell { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.lore-ab-edit-label { font-size: 0.65rem; font-weight: 700; color: var(--text-dim); }
.lore-ab-edit-cell .edit-input { width: 100%; text-align: center; padding: 0.3rem 0.2rem; }

.lore-entry-actions { display: none; gap: 0.4rem; margin-top: 0.6rem; }
.lore-entry-card.expanded .lore-entry-actions { display: flex; }

@media (max-width: 600px) {
    .lore-entry-card.expanded { flex-direction: column; align-items: stretch; }
    .lore-entry-card.expanded .lore-entry-img { width: 55%; max-width: 200px; }
    .lore-entry-card.expanded .lore-entry-body { max-height: none; }
    .lore-info-label { min-width: 7em; }
}

/* ============================================================
   NPC Tracker (Lore-tab) — portret-cards + inline expand
   ============================================================ */
.npc-toolbar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.npc-search { flex: 1; min-width: 150px; max-width: 280px; }
.npc-filter-chips { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.npc-chip {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}
.npc-chip:hover { color: var(--text-main); border-color: var(--accent); }
.npc-chip.active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.npc-faction-filter { width: auto; min-width: 130px; font-size: 0.8rem; }
.npc-toolbar-dm { display: flex; gap: 0.6rem; align-items: center; margin-left: auto; }
.npc-year-label { font-size: 0.75rem; color: var(--text-dim); display: flex; align-items: center; gap: 0.4rem; }
.npc-year-input { width: 80px; font-size: 0.8rem; }

.npc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    grid-auto-flow: row dense;
    align-items: start;
}
.npc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    border-top: 3px solid var(--npc-disp, var(--text-dim));
}
/* Compacte 2:3 portret-card */
.npc-card-face { cursor: pointer; user-select: none; }
.npc-card-face:hover { background: var(--bg-hover); }
.npc-portrait {
    position: relative;
    aspect-ratio: 2 / 3;
    background: var(--bg-hover);
    overflow: hidden;
}
.npc-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.npc-portrait-empty {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 2.5rem; font-weight: 700; color: var(--text-dim);
}
.npc-disp-dot {
    position: absolute; top: 0.5rem; right: 0.5rem;
    width: 0.7rem; height: 0.7rem; border-radius: 50%;
    background: var(--npc-disp, var(--text-dim));
    border: 2px solid var(--bg-card);
}
.npc-card-name {
    padding: 0.55rem 0.6rem;
    font-size: 0.9rem; font-weight: 600;
    text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.npc-disposition { font-size: 0.8rem; text-transform: capitalize; font-weight: 600; }

/* Inline-expanded detail — spant volle breedte, rest van het grid schuift door */
.npc-expanded { display: none; }
.npc-card.expanded { grid-column: 1 / -1; }
.npc-card.expanded .npc-card-face { display: none; }
.npc-card.expanded .npc-expanded { display: block; position: relative; padding: 1.25rem; }
.npc-expanded-close {
    position: absolute; top: 0.6rem; right: 0.8rem;
    background: none; border: none; color: var(--text-dim);
    font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.npc-expanded-close:hover { color: var(--text-main); }
.npc-expanded-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.5rem;
    align-items: start;
}
.npc-expanded-portrait {
    aspect-ratio: 2 / 3;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.npc-expanded-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.npc-expanded-info h3 { font-size: 1.4rem; margin: 0 0 0.75rem; }
.npc-detail-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1rem;
    margin: 0;
    font-size: 0.9rem;
}
.npc-detail-grid dt { color: var(--text-dim); font-weight: 600; }
.npc-detail-grid dd { margin: 0; color: var(--text-main); }
.npc-detail-notes { margin-top: 1rem; }
.npc-detail-notes strong { display: block; color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.25rem; }
.npc-detail-notes p { margin: 0; line-height: 1.55; }
.npc-family-section { margin-top: 1rem; }
.npc-notes { font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; margin: 0.5rem 0; }
.npc-actions { display: flex; gap: 0.4rem; margin-top: 1rem; }

@media (max-width: 560px) {
    .npc-expanded-grid { grid-template-columns: 1fr; }
    .npc-expanded-portrait { max-width: 180px; }
}

/* ----- Global Search FAB + overlay ----- */
.search-fab {
    position: fixed;
    bottom: var(--fab-bottom);
    right: var(--fab-slot-4);
    width: var(--fab-size); height: var(--fab-size);
    border-radius: 50%;
    background: #1a1a2e;
    border: 2px solid #4ade80;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 90;
    transition: all 0.2s;
    box-shadow: 0 2px 12px rgba(74, 222, 128, 0.3);
    -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.search-fab:hover { border-color: #86efac; transform: scale(1.1); box-shadow: 0 4px 20px rgba(74, 222, 128, 0.5); }
.search-fab-icon { width: var(--fab-icon); height: var(--fab-icon); color: #4ade80; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.search-fab:hover .search-fab-icon { color: #86efac; }

.search-overlay { z-index: 450; align-items: flex-start; }
.search-panel {
    width: min(560px, 92vw);
    margin-top: 12vh;
    background: var(--bg-elevated, var(--bg-card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    overflow: hidden;
    max-height: 70vh;
    display: flex; flex-direction: column;
}
.search-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; border-bottom: 1px solid var(--border); }
.search-bar .edit-input { flex: 1; font-size: 1rem; }
.search-hint { padding: 1.25rem; }
.search-list, .search-grid { overflow-y: auto; padding: 0.4rem; }
.search-grid { display: grid; grid-template-columns: 1fr; gap: 0.25rem; }
.search-row {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.45rem 0.6rem; border-radius: var(--radius-sm);
    text-decoration: none; color: var(--text-main); cursor: pointer;
}
.search-row:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.search-thumb { width: 34px; height: 34px; flex-shrink: 0; border-radius: 5px; overflow: hidden; background: var(--bg-hover); }
.search-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-thumb-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; color: var(--text-dim); }
.search-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.search-row-name { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-row-desc { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-badge { font-size: 0.62rem; letter-spacing: 0.05em; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.45rem; flex-shrink: 0; }
.search-showall { margin: 0.25rem 0.6rem 0.6rem; }

/* ----- @-mention links + autocomplete ----- */
/* Subtiel: geen icoon/@, geen felle kleur — alleen een zachte tint + fijne
   onderlijn die bij hover iets duidelijker wordt. */
.entity-link {
    color: color-mix(in srgb, var(--text-main) 70%, var(--accent));
    text-decoration: none;
    border-bottom: 0;
    cursor: pointer;
}
.entity-link:hover {
    color: var(--accent);
}

.mention-popup {
    position: absolute;
    z-index: 500;
    background: var(--bg-elevated, var(--bg-card));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
    max-height: 280px;
    overflow-y: auto;
    padding: 0.25rem;
    min-width: 220px;
}
.mention-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.mention-item.active, .mention-item:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mention-thumb { width: 28px; height: 28px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: var(--bg-hover); }
.mention-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mention-thumb-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 0.85rem; font-weight: 700; color: var(--text-dim); }
.mention-name { flex: 1; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-badge { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.4rem; }

/* ----- Afbeelding-picker (kies bestaande) ----- */
.img-picker-overlay { z-index: 400; }   /* boven de onderliggende editor-modal */
.modal-img-picker { max-width: 720px; width: 100%; }
.img-picker-group { margin-top: 1rem; }
.img-picker-group h3 { font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.5rem; }
.img-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.6rem;
}
.img-picker-thumb {
    display: flex; flex-direction: column; gap: 0.25rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 0; overflow: hidden;
    cursor: pointer; text-align: center;
}
.img-picker-thumb:hover { border-color: var(--accent); }
.img-picker-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.img-picker-thumb span {
    font-size: 0.7rem; padding: 0.25rem 0.3rem 0.4rem; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ----- NPC / lore-entry editor modal ----- */
.modal-npc { max-width: 640px; width: 100%; }
.npc-form-image {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.npc-form-image-preview {
    width: 96px; height: 144px; flex-shrink: 0;
    background: var(--bg-hover); border-radius: var(--radius-sm); overflow: hidden;
}
.npc-form-image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.npc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.npc-form-field { display: flex; flex-direction: column; gap: 0.25rem; }
.npc-form-notes { margin-top: 0.75rem; }
@media (max-width: 520px) {
    .npc-form-grid { grid-template-columns: 1fr; }
}

/* ── Lore/NPC editor — paged modal (1 pagina zonder scroll, paginatie i.p.v. scrollen) ── */
.modal-card.modal-lore {
    max-width: 680px; width: 100%; max-height: 88vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.modal-lore .modal-body { flex: 1 1 auto; overflow: hidden; padding: 0; min-height: 0; }
.modal-page {
    display: none; flex-direction: column; gap: 0.7rem;
    padding: 1rem 1.25rem; max-height: 100%; overflow-y: auto;
}
.modal-page.page-active { display: flex; }

.lore-entry-header-row { display: flex; gap: 0.85rem; align-items: flex-start; }
.lore-header-fields { flex: 1; min-width: 0; }
.lore-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.55rem 0.7rem;
    align-items: start;
}
.lore-form-grid .lore-field-full { grid-column: 1 / -1; }

/* Footer met paginatie + opslaan */
.modal-footer {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; padding: 0.7rem 1.25rem; border-top: 1px solid var(--hairline-gold, var(--border));
}
.modal-footer-actions { display: flex; gap: 0.5rem; align-items: center; }
.modal-page-indicator { font-size: 0.78rem; color: var(--text-dim); letter-spacing: 0.05em; white-space: nowrap; }
.btn-page-prev, .btn-page-next {
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-dim); font-size: 0.95rem; line-height: 1; padding: 0.4rem 0.75rem;
    cursor: pointer; min-height: 34px; transition: border-color 0.15s, color 0.15s;
}
.btn-page-prev:hover, .btn-page-next:hover { border-color: var(--accent); color: var(--accent); }
.btn-page-prev:disabled, .btn-page-next:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* Image-box — klik → keuze-menu (Bestaande / Uploaden / Verwijderen) */
.lore-image-box { position: relative; width: 100px; flex-shrink: 0; cursor: pointer; outline: none; }
.lore-image-preview {
    width: 100px; height: 134px; background: var(--bg-block, var(--bg-hover));
    border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: 2rem; transition: border-color 0.15s, box-shadow 0.15s;
}
.lore-image-box:hover .lore-image-preview,
.lore-image-box:focus-visible .lore-image-preview { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(212,160,23,0.22); }
.lore-image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.lore-image-hint {
    position: absolute; bottom: 0; left: 0; right: 0; pointer-events: none;
    background: linear-gradient(transparent, rgba(0,0,0,0.72)); color: #fff;
    font-size: 0.62rem; text-align: center; padding: 0.55rem 0 0.25rem; letter-spacing: 0.04em;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.lore-image-menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 100; display: none;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    min-width: 150px; box-shadow: 0 6px 20px rgba(0,0,0,0.45); overflow: hidden;
}
.lore-image-menu.open { display: block; }
.lore-image-menu button {
    display: flex; align-items: center; gap: 0.45rem; width: 100%; padding: 0.55rem 0.8rem;
    background: none; border: none; color: var(--text-main); font-size: 0.85rem; font-family: inherit;
    cursor: pointer; text-align: left; min-height: 40px; transition: background 0.1s;
}
.lore-image-menu button:hover { background: var(--bg-hover); }
.lore-image-menu button + button { border-top: 1px solid var(--border); }
.lore-image-menu .menu-remove { color: var(--danger); }

@media (max-width: 560px) {
    .modal-card.modal-lore { max-height: 92dvh; }
    .lore-form-grid { grid-template-columns: 1fr; }
    .modal-page { padding: 0.8rem; gap: 0.5rem; }
    .modal-footer { padding: 0.6rem 0.8rem; }
}

/* ============================================================
   Toast Notifications
   ============================================================ */
.toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 0.6rem 1.2rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-bright);
    font-size: 0.85rem;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-success { border-color: var(--success); }
.toast-error { border-color: var(--danger); }
.toast-info { border-color: var(--accent); }

/* ============================================================
   XP Tracker
   ============================================================ */
.xp-tracker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.xp-bar {
    flex: 1;
    min-width: 80px;
    height: 6px;
    background: var(--bg-block);
    border-radius: 3px;
    overflow: hidden;
}
.xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    border-radius: 3px;
    transition: width 0.4s ease;
}
.xp-label { font-size: 0.7rem; color: var(--text-dim); white-space: nowrap; }
.xp-controls { display: flex; gap: 0.5rem; align-items: center; }
.xp-btn-minus { color: var(--accent) !important; font-weight: 700; }
.xp-btn-plus { color: var(--accent) !important; font-weight: 700; }
.xp-input {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.75rem;
    padding: 0.15rem 0.3rem;
    text-align: center;
}

/* ============================================================
   Backstory Paragraph Animation
   ============================================================ */
.backstory-para {
    animation: fadeUp 0.5s ease-out both;
    line-height: 1.7;
    color: var(--text-dim);
}
.backstory-para:first-of-type {
    color: var(--text-main);
}

/* ============================================================
   DM Whisper System
   ============================================================ */
.dash-whispers { margin-bottom: 1.5rem; }
.whisper-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--accent-rgb), 0.05);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    margin-bottom: 0.4rem;
}
.whisper-card p { margin: 0; font-size: 0.9rem; color: var(--text-main); flex: 1; }
.dash-whisper-send { margin-bottom: 1.5rem; }

.character-page { position: relative; overflow: hidden; }

/* ============================================================
   Presence Indicators
   ============================================================ */
.presence-dot {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-dim);
    border: 2px solid var(--bg-card);
    z-index: 5;
    opacity: 0.4;
    transition: all 0.3s;
}
.presence-dot.online {
    background: var(--success);
    opacity: 1;
    box-shadow: 0 0 6px var(--success);
}

/* ============================================================
   Initiative Tracker — 3-Column Layout
   ============================================================ */
.init-tracker-card { overflow: visible; }
.init-columns {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.init-col {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    min-height: 120px;
}
.init-col-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
    text-align: center;
}
.init-col-order { border-color: var(--accent); }
.init-available {
    padding: 0.4rem 0.6rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.3rem;
    cursor: grab;
    font-size: 0.8rem;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.init-available:hover { border-color: var(--accent); }
.init-available.dragging { opacity: 0.3; }
.init-col-order.drag-over {
    background: rgba(var(--accent-rgb, 34,211,238), 0.12);
    border-style: dashed;
    border-width: 2px;
    box-shadow: inset 0 0 0 1px var(--accent), 0 0 18px rgba(var(--accent-rgb, 34,211,238), 0.25);
}
.init-drop-indicator {
    height: 6px;
    background: var(--accent);
    border-radius: 3px;
    margin: 0.3rem 0;
    box-shadow: 0 0 14px var(--accent), 0 0 4px var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
    .init-drop-indicator { animation: init-snap-pulse 0.6s ease-in-out infinite; }
}
@keyframes init-snap-pulse {
    0%, 100% { transform: scaleX(1); opacity: 1; }
    50% { transform: scaleX(0.92); opacity: 0.7; }
}
.init-npc { border-left: 3px solid; }
.init-npc-del {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.8rem;
}
.init-npc-del:hover { color: var(--danger); }
.init-entry {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
    cursor: grab;
    user-select: none;
    transition: opacity 0.15s, box-shadow 0.15s;
}
.init-entry:active { cursor: grabbing; }
.init-entry.dragging { opacity: 0.3; }
.init-entry.current { background: rgba(var(--accent-rgb), 0.1); border-color: var(--accent); }
.init-drag-handle { color: var(--text-dim); font-size: 0.7rem; cursor: grab; margin-right: 0.1rem; }
.init-roll { font-weight: 700; color: var(--accent); min-width: 20px; }
.init-name { flex: 1; }
.init-drop-placeholder {
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
    margin-bottom: 0.3rem;
}
.init-remove {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
}
.init-remove:hover { color: var(--danger); }
.init-add-npc-form {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.5rem;
}
.init-add-npc-form .edit-input { font-size: 0.75rem; padding: 0.25rem 0.4rem; }

.init-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    background: var(--bg-elevated);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    color: var(--text-bright);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 14px var(--accent-glow);
    transform: translate(-50%, -50%);
    white-space: nowrap;
    opacity: 0.95;
}
.init-draggable { touch-action: none; }

@media (max-width: 700px) {
    .init-columns { grid-template-columns: 1fr; }
}

/* ============================================================
   Quest Add Form
   ============================================================ */
.quest-add-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.quest-meta {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-right: 0.75rem;
}
.quest-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.2rem; }
.quest-tag { font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }

/* ============================================================
   DM Page
   ============================================================ */
.dm-page { max-width: 1100px; margin: 0 auto; }
.dm-page .page-title { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-bright); }
.dm-tabs { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.dm-tab {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.dm-tab:hover { color: var(--text-bright); }
.dm-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================
   Modal Overlay (shared)
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
    padding: 1rem;
}

.modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: fadeUp 0.25s ease;
}

.modal-card.modal-sm { max-width: 400px; }

/* Maps: dimensions-manager + add-map window */
.dim-manage-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.dim-manage-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--bg-elev, rgba(255,255,255,0.03)); border: 1px solid var(--border); border-radius: var(--radius); }
.dim-manage-name { font-weight: 600; }
.dim-manage-add { display: flex; gap: 0.5rem; align-items: center; }
.dim-manage-add .edit-input { flex: 1; }
.add-map-preview { width: 100%; height: 150px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border); }
.add-map-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.add-map-form .note-image-upload { padding: 0.75rem; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--hairline-gold);
}

.modal-header h2 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-warm);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}
.modal-close:hover { color: var(--text-bright); }

.modal-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-success {
    color: var(--success);
    font-size: 0.85rem;
    text-align: center;
}

/* ============================================================
   Character Creation Wizard — Modern Minimal Fantasy
   ============================================================ */
.wizard-overlay {
    align-items: stretch;
    padding: 0;
}

.wizard-modal {
    background: var(--bg-dark);
    width: 100%;
    max-width: 1280px;
    margin: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hairline-gold);
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    animation: fadeUp 0.3s ease;
    position: relative;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.wizard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.75rem;
    border-bottom: 1px solid var(--hairline-gold);
    background: linear-gradient(180deg, var(--bg-card), var(--bg-dark));
    flex-shrink: 0;
}

.wizard-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-bright);
    margin: 0;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.wizard-title::after {
    content: '◆';
    color: var(--accent-warm);
    font-size: 0.55em;
    opacity: 0.7;
}

/* === Wizard body: 2-column (content + summary sidebar) === */
.wizard-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* === Horizontal stepper (full width, under header) #EG9koC === */
.wizard-steps {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 1rem 1.75rem 0.9rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--hairline-gold);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.wizard-steps::-webkit-scrollbar { display: none; }

.wizard-step-dot {
    flex: 1 1 0;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: none;
    background: none;
    position: relative;
    text-align: center;
}
/* Connector: item-relatief geankerd (top:14px = midden van 28px-bolletje), dus
   blijft correct bij elke fontgrootte/zoom — geen overlap-bug meer. */
.wizard-step-dot::before {
    content: '';
    position: absolute;
    top: 14px;
    left: calc(50% + 18px);
    width: calc(100% - 36px);
    height: 2px;
    background: var(--border);
    transform: translateY(-50%);
    z-index: 0;
}
.wizard-steps > .wizard-step-dot:last-of-type::before { display: none; }
.wizard-step-dot.completed::before { background: var(--accent-warm); }

.step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-block);
    color: var(--text-dim);
    border: 1.5px solid var(--border);
    transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8rem;
    position: relative;
    z-index: 1;
}
.step-num svg { width: 14px; height: 14px; fill: currentColor; }

.wizard-step-dot.active .step-num {
    background: var(--accent);
    color: var(--bg-dark);
    border-color: var(--accent);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5);
}
.wizard-step-dot.completed .step-num {
    background: transparent;
    color: var(--accent-warm);
    border-color: var(--accent-warm);
}

.step-label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 500;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: normal;
    max-width: 12ch;
}
.wizard-step-dot.active .step-label { color: var(--accent); }
.wizard-step-dot.completed .step-label { color: var(--text-main); }

.step-connector { display: none; }

@media (prefers-reduced-motion: reduce) {
    .step-num,
    .wizard-portrait-overlay,
    .wizard-sidebar-portrait { transition: none; }
}

/* === Content area === */
.wizard-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
    background: var(--bg-dark);
    transition: opacity 0.18s ease;
}
.wizard-fade-out { opacity: 0; }
.wizard-fade-in { opacity: 1; }

.wizard-step-title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--text-bright);
    margin: 0 0 0.25rem 0;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--hairline-gold);
    position: relative;
}
.wizard-step-title::before {
    content: '';
    width: 3px;
    height: 1.1em;
    background: linear-gradient(to bottom, var(--accent), var(--accent-warm));
    border-radius: 2px;
}

.wizard-field { display: flex; flex-direction: column; gap: 0.5rem; }

/* Soort + lineage/subras selector (#OdBL9u) — mobile-first gestapeld, vanaf 620px
   naast elkaar. De lineage-select verschijnt alleen als de soort lineages heeft. */
.wizard-subfield-group { display: flex; flex-direction: column; gap: 0.75rem; }
.wizard-subfield-group > .wizard-field { gap: 0.4rem; }
.wizard-subfield .wizard-label::before { content: '\21B3  '; color: var(--text-dim); }
@media (min-width: 620px) {
    .wizard-subfield-group { flex-direction: row; align-items: flex-start; }
    .wizard-subfield-group > .wizard-field { flex: 1 1 0; min-width: 0; }
    .wizard-subfield-group .wizard-select { width: 100%; max-width: none; }
}

.wizard-label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    color: var(--accent-warm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.wizard-input, .wizard-select {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.92rem;
    padding: 0.7rem 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.wizard-input::placeholder { color: var(--text-dim); font-style: italic; }
.wizard-input:hover, .wizard-select:hover { border-color: var(--border-light); }
.wizard-input:focus, .wizard-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* #2 design: tekst-inputs/selects niet over de volle (brede) modal laten
   uitrekken — zo oogt het rustiger en past er meer op één wizard-stap. */
.wizard-input, .wizard-select { max-width: 440px; }
.wizard-textarea { max-width: 600px; }

.wizard-input-sm { width: 80px; text-align: center; padding: 0.5rem; max-width: none; }
.wizard-select-sm { width: 75px; padding: 0.4rem; font-size: 0.85rem; max-width: none; }

.wizard-textarea {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    padding: 0.75rem 0.95rem;
    outline: none;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.wizard-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.wizard-textarea-sm { min-height: 60px; }
.wizard-textarea-lg { min-height: 150px; }

/* Preview/details boxes */
.wizard-preview {
    background: var(--bg-block);
    border: 1px solid var(--hairline-gold);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-top: 0.25rem;
}
.wizard-preview summary {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent-warm);
    cursor: pointer;
    padding: 0.25rem 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.wizard-preview summary::before {
    content: '▸';
    font-size: 0.75rem;
    color: var(--accent-warm);
    transition: transform 0.2s;
}
.wizard-preview[open] summary::before { transform: rotate(90deg); }
.wizard-preview summary::-webkit-details-marker { display: none; }
.wizard-preview h4 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--accent);
    margin: 0 0 0.5rem 0;
    letter-spacing: 0.06em;
}
.wizard-detail {
    font-size: 0.85rem;
    color: var(--text-main);
    margin: 0.3rem 0;
    line-height: 1.55;
}
.wizard-detail strong { color: var(--accent-warm); font-weight: 600; }

/* Ability scores (inputs in step 2) */
.wizard-abilities {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.6rem;
}
.wizard-ability {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.4rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s;
}
.wizard-ability:focus-within { border-color: var(--accent); }
/* Primaire-stat highlight (#kbowMj) */
.wizard-ability.is-primary {
    border-color: var(--hairline-gold);
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.10), transparent 60%), var(--bg-block);
    position: relative;
}
.wizard-ability.is-primary::after {
    content: '\2605';
    position: absolute;
    top: -0.5rem;
    right: -0.4rem;
    width: 1.15rem;
    height: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--bg-dark);
    background: var(--accent-warm);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--bg-card);
}
.wizard-ability.is-primary:focus-within { border-color: var(--accent); }
.wizard-primary-note { color: var(--text-dim); }
.wizard-primary-note strong { color: var(--accent-warm); }

/* === Ability-method switch (segmented pills) — #bij5sk === */
.wizard-ability-method {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.3rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.9rem;
}
.wizard-method-btn {
    flex: 1 1 auto;
    min-width: 8rem;
    min-height: 44px;
    padding: 0.55rem 0.9rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: calc(var(--radius-sm) - 2px);
    color: var(--text-dim);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.wizard-method-btn:hover { color: var(--text-main); }
.wizard-method-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wizard-method-btn[aria-pressed="true"],
.wizard-method-btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-dark);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
@media (hover: none) { .wizard-method-btn:hover { color: var(--text-dim); } }

/* === Point-buy pool-teller === */
.wizard-pointbuy-pool {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.8rem;
    padding: 0.45rem 0.85rem;
    background: var(--bg-block);
    border: 1px solid var(--hairline-gold);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    transition: border-color 0.2s, color 0.2s;
}
.wizard-pointbuy-pool .pool-val { font-size: 1.05rem; font-weight: 700; color: var(--accent-warm); transition: color 0.2s; }
.wizard-pointbuy-pool.is-empty { border-color: var(--accent); }
.wizard-pointbuy-pool.is-empty .pool-val { color: var(--accent); }
.wizard-pointbuy-pool.is-over { border-color: #f87171; color: #f87171; }
.wizard-pointbuy-pool.is-over .pool-val { color: #f87171; }

/* === Ability stepper (− / waarde / +) === */
.wizard-ability-stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-card);
}
.wizard-ability-stepper .stepper-btn {
    min-width: 38px;
    min-height: 44px;
    padding: 0;
    background: var(--bg-block);
    border: none;
    color: var(--accent);
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.wizard-ability-stepper .stepper-btn:hover { background: var(--accent); color: var(--bg-dark); }
.wizard-ability-stepper .stepper-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wizard-ability-stepper .stepper-btn:disabled { color: var(--text-dim); opacity: 0.4; cursor: not-allowed; }
.wizard-ability-stepper .stepper-val {
    flex: 1;
    min-width: 2.2ch;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-bright);
    padding: 0 0.2rem;
    user-select: none;
}
@media (hover: none) { .wizard-ability-stepper .stepper-btn:hover { background: var(--bg-block); color: var(--accent); } }

/* === Standard-array toewijzing === */
.wizard-array-pool { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.wizard-array-chip {
    min-width: 38px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    background: var(--bg-block);
    border: 1px solid var(--hairline-gold);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent-warm);
    transition: opacity 0.2s, border-color 0.2s;
}
.wizard-array-chip.is-used { opacity: 0.3; border-color: var(--border); color: var(--text-dim); text-decoration: line-through; }
.wizard-array-select { width: 100%; max-width: none; text-align: center; text-align-last: center; }
.wizard-array-select.has-value { border-color: var(--accent); color: var(--text-bright); }

.wizard-ability label {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-warm);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.wizard-ability-total {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-bright);
}
.wizard-ability-bonus { font-size: 0.7rem; color: var(--success); }

/* Background bonus */
.wizard-bg-bonus { margin-top: 0.5rem; }
.wizard-bonus-row { display: flex; gap: 0.75rem; margin-top: 0.4rem; flex-wrap: wrap; }
.wizard-bonus-item { display: flex; align-items: center; gap: 0.4rem; }
.wizard-bonus-label {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: 0.1em;
}

/* Colors */
.wizard-colors { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Skill grid */
.wizard-skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.45rem;
}
.wizard-skill-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;                 /* touch-target ≥44px */
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.87rem;
    line-height: 1.25;
    color: var(--text-main);
    cursor: pointer;
    background: var(--bg-block);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, color 0.18s;
    -webkit-tap-highlight-color: transparent;
}
/* Custom checkbox: native input zelf wordt het vierkantje (JS .checked blijft werken) */
.wizard-skill-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    background: var(--bg-dark);
    cursor: inherit;
    display: grid;
    place-content: center;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.wizard-skill-item input[type="checkbox"]::after {
    content: "";
    width: 9px;
    height: 9px;
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.4);
    background: var(--bg-dark);
    clip-path: polygon(14% 47%, 0 60%, 40% 100%, 100% 20%, 86% 7%, 38% 71%);
}
@media (hover: hover) {
    .wizard-skill-item:hover:not(.disabled) {
        border-color: var(--accent-warm);
        background: color-mix(in srgb, var(--accent-warm) 7%, var(--bg-block));
    }
    .wizard-skill-item:hover:not(.disabled) input[type="checkbox"] { border-color: var(--accent-warm); }
}
.wizard-skill-item:focus-within { border-color: var(--accent); }
.wizard-skill-item input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35);
}
/* Selected state: accent-rand + glow + linker accent-bar */
.wizard-skill-item.checked {
    color: var(--text-bright);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 11%, var(--bg-block));
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25), 0 0 14px rgba(var(--accent-rgb), 0.12);
}
.wizard-skill-item.checked::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent);
}
.wizard-skill-item.checked input[type="checkbox"] {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}
.wizard-skill-item.checked input[type="checkbox"]::after { transform: scale(1); }
.wizard-skill-item.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .wizard-skill-item,
    .wizard-skill-item input[type="checkbox"],
    .wizard-skill-item input[type="checkbox"]::after { transition: none; }
}

/* Summary (step 6) */
.wizard-summary { display: flex; flex-direction: column; gap: 1.25rem; }
.wizard-summary-section {
    background: var(--bg-block);
    border: 1px solid var(--hairline-gold);
    border-radius: var(--radius-sm);
    padding: 1rem 1.15rem 0.85rem;
    position: relative;
}
.wizard-summary-section::before {
    content: '✦';
    position: absolute;
    top: -0.55rem;
    left: 1rem;
    background: var(--bg-dark);
    color: var(--accent-warm);
    padding: 0 0.45rem;
    font-size: 0.8rem;
}
.wizard-summary-section h4 {
    font-family: var(--font-display);
    font-size: 0.88rem;
    color: var(--accent);
    margin: 0 0 0.5rem 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.wizard-summary-section p { font-size: 0.88rem; color: var(--text-main); margin: 0.2rem 0; }
.wizard-abilities-summary { margin-top: 0.5rem; }

/* === Right sidebar — live character preview === */
.wizard-sidebar {
    width: 320px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--bg-card), var(--bg-dark) 80%);
    border-left: 1px solid var(--hairline-gold);
    padding: 1.75rem 1.25rem 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}
.wizard-sidebar-title {
    font-family: var(--font-display);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--accent-warm);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.wizard-sidebar-title::before,
.wizard-sidebar-title::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--accent-warm);
    opacity: 0.5;
}

.wizard-sidebar-portrait {
    width: 120px;
    height: 120px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 2px solid var(--accent-warm);
    background: var(--bg-block);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0.5rem 0 0.75rem;
    box-shadow: 0 0 0 5px var(--bg-card), 0 0 0 6px var(--hairline-gold);
    transition: border-color 0.3s, box-shadow 0.3s;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.wizard-sidebar-portrait::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px dashed var(--hairline-gold);
    pointer-events: none;
}
/* preview-state */
.wizard-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.wizard-portrait-placeholder {
    font-size: 2rem;
    opacity: 0.3;
    pointer-events: none;
}
/* upload-overlay (camera-icoon) */
.wizard-portrait-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.wizard-portrait-overlay svg { width: 30px; height: 30px; fill: var(--text-bright); }
@media (hover: none) { .wizard-portrait-overlay { opacity: 0.35; } }
@media (hover: hover) { .wizard-sidebar-portrait:hover .wizard-portrait-overlay { opacity: 1; } }
.wizard-sidebar-portrait:focus-within .wizard-portrait-overlay { opacity: 1; }
.wizard-sidebar-portrait:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
/* file-input verbergen maar focusbaar/klikbaar via het label */
.wizard-portrait-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    border-radius: 50%;
}

/* #fATDUg — crop-knop over de wizard-portret (buiten het <label>) */
.wizard-portrait-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.portrait-crop-btn {
    position: absolute;
    right: 2px;
    bottom: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    background: var(--accent-warm, #d4a017);
    color: #1a1408;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 3;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s, filter 0.15s;
}
.portrait-crop-btn:hover { transform: scale(1.08); filter: brightness(1.1); }
.portrait-crop-btn:active { transform: scale(0.96); }
.portrait-crop-btn svg { width: 15px; height: 15px; fill: currentColor; }

/* #fATDUg — crop-editor modal */
.crop-editor-overlay { z-index: 10050; }
.crop-card {
    background: var(--bg-card, #1d1b16);
    border: 1px solid var(--hairline-gold, #4a3c1a);
    border-radius: 14px;
    width: min(360px, 92vw);
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
}
.crop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.1rem 0.5rem;
}
.crop-header h2 { margin: 0; font-size: 1.1rem; font-family: var(--font-display); }
.crop-stage {
    display: flex;
    justify-content: center;
    padding: 0.6rem 1rem;
}
.crop-box {
    position: relative;
    width: 260px;
    height: 260px;
    max-width: 70vw;
    max-height: 70vw;
    overflow: hidden;
    background: #0c0b08;
    touch-action: none;
    cursor: grab;
    box-shadow: inset 0 0 0 1px var(--hairline-gold, #4a3c1a);
}
.crop-box.crop-circle { border-radius: 50%; }
.crop-box.crop-square { border-radius: 12px; }
.crop-box.dragging { cursor: grabbing; }
.crop-img {
    position: absolute;
    left: 0;
    top: 0;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
/* Referentieraster op 25/50/75% (horizontaal + verticaal) zodat je beelden
   gelijkmatig kunt uitlijnen. pointer-events:none → slepen/zoomen blijft werken.
   Multi-position color stops tekenen 1px-lijnen; de 50%-lijn is iets feller als
   middenmarkering. */
.crop-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    --grid-c: rgba(255, 255, 255, 0.28);
    --grid-mid: rgba(255, 255, 255, 0.45);
    background-image:
        linear-gradient(90deg,
            transparent 0 calc(25% - 0.5px), var(--grid-c) calc(25% - 0.5px) calc(25% + 0.5px),
            transparent calc(25% + 0.5px) calc(50% - 0.5px), var(--grid-mid) calc(50% - 0.5px) calc(50% + 0.5px),
            transparent calc(50% + 0.5px) calc(75% - 0.5px), var(--grid-c) calc(75% - 0.5px) calc(75% + 0.5px),
            transparent calc(75% + 0.5px)),
        linear-gradient(180deg,
            transparent 0 calc(25% - 0.5px), var(--grid-c) calc(25% - 0.5px) calc(25% + 0.5px),
            transparent calc(25% + 0.5px) calc(50% - 0.5px), var(--grid-mid) calc(50% - 0.5px) calc(50% + 0.5px),
            transparent calc(50% + 0.5px) calc(75% - 0.5px), var(--grid-c) calc(75% - 0.5px) calc(75% + 0.5px),
            transparent calc(75% + 0.5px));
}
.crop-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 1rem 0.6rem;
}
.crop-zoom-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.crop-zoom-val {
    min-width: 48px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    font-size: 0.9rem;
}
.crop-dpad {
    display: grid;
    grid-template-columns: repeat(3, 34px);
    grid-template-rows: repeat(3, 34px);
    gap: 4px;
    justify-content: center;
}
.dpad-up { grid-area: 1 / 2; }
.dpad-left { grid-area: 2 / 1; }
.dpad-center { grid-area: 2 / 2; }
.dpad-right { grid-area: 2 / 3; }
.dpad-down { grid-area: 3 / 2; }
.crop-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--hairline-gold, #4a3c1a);
    background: var(--bg-block, #26241d);
    color: var(--text-bright, #f0e6d2);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, transform 0.1s;
}
.crop-btn:hover { background: var(--accent-warm, #d4a017); color: #1a1408; }
.crop-btn:active { transform: scale(0.93); }
.crop-hint {
    margin: 0.1rem 0 0;
    font-size: 0.72rem;
    color: var(--text-dim);
    text-align: center;
}
.crop-actions {
    display: flex;
    gap: 0.6rem;
    padding: 0.4rem 1rem 1rem;
    justify-content: flex-end;
}

.wizard-sidebar-name {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 600;
    text-align: center;
    word-break: break-word;
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}
.wizard-sidebar-detail {
    font-size: 0.85rem;
    color: var(--text-main);
    text-align: center;
    line-height: 1.4;
}

.wizard-sidebar-abilities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    width: 100%;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--hairline-gold);
}
.wizard-sidebar-ab {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-block);
    border: 1px solid var(--hairline-gold);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.2rem;
    transition: border-color 0.2s, transform 0.2s;
}
.wizard-sidebar-ab:hover {
    border-color: var(--accent-warm);
    transform: translateY(-1px);
}
.wizard-sidebar-ab-label {
    font-family: var(--font-display);
    font-size: 0.62rem;
    color: var(--accent-warm);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.wizard-sidebar-ab-val {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1.2;
}
.wizard-sidebar-section {
    width: 100%;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--hairline-gold);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.wizard-sidebar-section-title {
    width: 100%;
    font-family: var(--font-display);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent-warm);
    margin-bottom: 0.35rem;
}
.wizard-sidebar-tag {
    font-size: 0.72rem;
    background: var(--bg-elevated);
    border: 1px solid var(--hairline-gold);
    border-radius: 3px;
    padding: 0.18rem 0.55rem;
    color: var(--text-main);
}

/* Navigation */
.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.75rem;
    border-top: 1px solid var(--hairline-gold);
    background: linear-gradient(0deg, var(--bg-card), var(--bg-dark));
    flex-shrink: 0;
}

/* Create card */
.char-card-create {
    border: 2px dashed var(--border);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
}
.char-card-create:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.char-card-create .char-card-placeholder { color: var(--text-dim); transition: color 0.2s; }
.char-card-create:hover .char-card-placeholder { color: var(--accent); }

/* ============================================================
   Wizard responsive
   ============================================================ */
@media (max-width: 980px) {
    .wizard-modal { max-width: 100%; border-radius: 0; }
    .wizard-sidebar { width: 260px; padding: 1.25rem 1rem; }
    .wizard-content { padding: 1rem 1.25rem; }
    .wizard-steps { padding: 0.85rem 1.25rem 0.8rem; }
}
@media (max-width: 760px) {
    /* sidebar weg, content full width; stepper blijft horizontaal bovenaan */
    .wizard-sidebar { display: none; }
    .wizard-content { padding: 1.25rem 1.25rem 1.5rem; gap: 1rem; }
    .wizard-step-title { font-size: 1.2rem; }
    .wizard-steps { padding: 0.75rem 1rem 0.7rem; }
    .wizard-step-dot { min-width: 58px; }
    .step-label { font-size: 0.62rem; max-width: 9ch; }
}
@media (max-width: 600px) {
    /* heel smal: alleen bolletjes + connector, labels weg → compact */
    .step-label { display: none; }
    .wizard-step-dot { min-width: 0; }
    .wizard-content { padding: 1rem; }
    .wizard-abilities { grid-template-columns: repeat(3, 1fr); }
    .wizard-skill-grid { grid-template-columns: 1fr; }
    .wizard-method-btn { flex-basis: 100%; }
    .wizard-ability-stepper .stepper-btn { min-width: 34px; }
    .wizard-nav { padding: 0.75rem 1rem; }
    .wizard-header { padding: 0.85rem 1rem; }
    .wizard-title { font-size: 1.05rem; letter-spacing: 0.08em; }

    .modal-card { max-width: 100%; border-radius: var(--radius); }
    .campaign-grid { grid-template-columns: 1fr; }
    .party-assign-grid { grid-template-columns: repeat(2, 1fr); }
    .dm-toggle-label { display: none; }
}

/* ============================================================
   Home / Campaign Select
   ============================================================ */

.home-section { margin-bottom: 2rem; }

.campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

.campaign-home-card {
    background: var(--bg-card);
    border: 1px solid var(--hairline-gold);
    border-radius: var(--radius);
    padding: 1.5rem;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
}
.campaign-home-card:hover {
    border-color: var(--accent-warm-soft);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 16px color-mix(in srgb, var(--accent-warm) 8%, transparent);
}
.campaign-home-card.active {
    border-color: var(--accent-warm);
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent-warm) 22%, transparent);
}

.campaign-home-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-block-end: 0.6rem;
}
.campaign-home-header h3 {
    margin: 0;
    color: var(--accent-warm);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.campaign-dm-badge {
    background: color-mix(in srgb, var(--accent-tertiary) 60%, transparent);
    color: var(--text-bright);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Session-info rows on campaign cards — DT/DD pairs, label-left value-right */
.campaign-session-info {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0.75rem 0 0;
    padding: 0.6rem 0 0;
    border-block-start: 1px solid color-mix(in srgb, var(--hairline-gold) 80%, transparent);
    font-size: 0.85rem;
}
.campaign-session-info > .campaign-session-row {
    display: contents; /* let dt/dd participate in the parent grid */
}
.campaign-session-info dt {
    color: var(--text-dim);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    align-self: center;
}
.campaign-session-info dd {
    margin: 0;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    align-self: center;
}
.campaign-session-info dd.text-dim {
    color: var(--text-dim);
    font-style: italic;
    font-variant-numeric: normal;
}

/* Floating edit pencil for DMs (top-right corner of the card) */
.campaign-session-edit {
    position: absolute;
    inset-block-start: 0.6rem;
    inset-inline-end: 0.6rem;
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
    border: 1px solid var(--hairline-gold);
    color: var(--accent-warm);
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s, background 0.2s;
}
.campaign-home-card:hover .campaign-session-edit,
.campaign-home-card:focus-within .campaign-session-edit {
    opacity: 1;
}
.campaign-session-edit:hover {
    background: color-mix(in srgb, var(--accent-warm) 18%, var(--bg-elevated));
    transform: scale(1.06);
}
.campaign-session-edit:focus-visible {
    opacity: 1;
    outline: 2px solid var(--accent-warm);
    outline-offset: 2px;
}
/* Always show the edit pencil on touch devices (no hover) */
@media (hover: none) {
    .campaign-session-edit { opacity: 0.85; }
}

.campaign-home-stats {
    display: flex;
    gap: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-block-start: 0.75rem;
}
.campaign-active-badge {
    display: inline-block;
    margin-block-start: 0.75rem;
    font-size: 0.68rem;
    color: var(--accent-warm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.campaign-invite-info {
    margin-block-start: 0.75rem;
    padding-block-start: 0.6rem;
    border-block-start: 1px dashed var(--hairline-gold);
}
.campaign-invite-info strong {
    color: var(--accent-warm);
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    margin-inline-start: 0.4rem;
}

/* Dashed-bordered invite section — matches "Enter Invite Code" card in mocks */
.join-campaign-section {
    margin-block-start: 1.25rem;
    padding: 1.5rem 1rem;
    border: 1px dashed var(--hairline-gold);
    border-radius: var(--radius);
    text-align: center;
    color: var(--text-dim);
}
.join-campaign-section > * { vertical-align: middle; }

/* ============================================================
   Party Page
   ============================================================ */

.party-assign-prompt {
    background: var(--bg-block);
    border: 1px dashed var(--accent);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.party-assign-prompt h3 { margin: 0 0 0.5rem; color: var(--text-bright); }

.party-assign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.party-assign-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}
.party-assign-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg)); transform: translateY(-2px); }
.party-assign-card .char-card-img { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 0.5rem; overflow: hidden; }
.party-assign-card .char-card-img img { width: 100%; height: 100%; object-fit: cover; }
.party-assign-card strong { display: block; color: var(--text-bright); font-size: 0.85rem; }
.party-assign-card .text-dim { font-size: 0.7rem; }

.party-your-char {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.member-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
}
.member-row:last-child { border-bottom: none; }

.dm-party-manage {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2rem;
}
.dm-party-manage h3 { margin: 0 0 1rem; color: var(--text-bright); }
.dm-party-manage h4 { margin: 0.5rem 0; color: var(--text-bright); }

/* ============================================================
   DM Mode Toggle
   ============================================================ */

.dm-toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
}
.dm-toggle:hover { border-color: var(--text); color: var(--text); }
.dm-toggle.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dm-toggle .nav-svg { width: 14px; height: 14px; }
.dm-toggle-label { font-weight: 600; }

.nav-separator {
    color: var(--border);
    font-size: 1.2rem;
    padding: 0 0.2rem;
    align-self: center;
}

/* ===== Settings Page ===== */
.settings-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
}
.settings-page .page-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}
.settings-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}
.settings-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.settings-section {
    margin-bottom: 1.8rem;
}
.settings-section-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 0.6rem;
    font-weight: 600;
}
.settings-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.settings-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.settings-toggle-field {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.settings-toggle-field > div { flex: 1; }
.settings-label {
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 600;
}
.settings-hint {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin: 0;
    line-height: 1.4;
}
.settings-input {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s;
}
.settings-input:focus { outline: none; border-color: var(--accent); }
.settings-input:disabled { opacity: 0.5; cursor: not-allowed; }

/* Theme grid */
.settings-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
}
.settings-theme-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: rgba(255,255,255,0.03);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text);
    font-size: 0.8rem;
}
.settings-theme-option:hover { background: rgba(255,255,255,0.06); }
.settings-theme-option.active { border-color: var(--accent); background: rgba(255,255,255,0.06); }
.settings-theme-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
}
.settings-theme-name { white-space: nowrap; }

/* Language selector */
.settings-lang-options {
    display: flex;
    gap: 0.5rem;
}
.settings-lang-btn {
    flex: 1;
    padding: 0.55rem;
    background: rgba(255,255,255,0.04);
    border: 2px solid transparent;
    border-radius: 8px;
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.settings-lang-btn:hover { background: rgba(255,255,255,0.06); }
.settings-lang-btn.active { border-color: var(--accent); color: var(--accent); }

/* Save button */
.settings-save {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.7rem;
    font-size: 0.95rem;
}
.settings-error {
    color: #f87171;
    font-size: 0.85rem;
    margin: 0.3rem 0;
}
.settings-success {
    color: #34d399;
    font-size: 0.85rem;
    margin: 0.3rem 0;
}

/* ===== Notes quick FAB ===== */
.notes-fab {
    position: fixed;
    bottom: var(--fab-bottom);
    right: var(--fab-slot-1);
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    background: #1a1a2e;
    border: 2px solid #a78bfa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 95;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(167, 139, 250, 0.3);
    transition: all 0.2s;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}
.notes-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.5);
    border-color: #c4b5fd;
}
.notes-fab-icon {
    width: var(--fab-icon);
    height: var(--fab-icon);
    color: #a78bfa;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.notes-fab:hover .notes-fab-icon { color: #c4b5fd; }

/* ===== Quick Notes panel (mirrors dice-panel) ===== */
.notes-panel {
    position: fixed;
    bottom: calc(var(--fab-bottom) + 60px);
    right: var(--fab-slot-1);
    width: min(480px, 40vw);
    height: min(720px, 75vh);
    max-height: calc(100vh - 8rem);
    background: var(--bg-card);
    border: 1px solid #a78bfa;
    border-radius: var(--radius);
    z-index: 10002;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(167,139,250,0.2);
    overflow: hidden;
}
.notes-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.9rem;
    color: #c4b5fd;
}
.notes-panel-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.2rem;
    cursor: pointer;
}
#notes-panel-content {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.qnotes-form { display: flex; flex-direction: column; gap: 0.4rem; position: relative; flex: 1; min-height: 0; }
.qnotes-input,
.qnotes-textarea {
    width: 100%;
    padding: 0.4rem 0.55rem;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.85rem;
    font-family: inherit;
    box-sizing: border-box;
}
.qnotes-input:focus,
.qnotes-textarea:focus { outline: none; border-color: #a78bfa; }
.qnotes-textarea { resize: vertical; min-height: 120px; flex: 1; line-height: 1.4; }
.qnotes-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.qnotes-cat {
    --cat-color: #8a8a9a;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-block);
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}
.qnotes-cat:hover { border-color: var(--cat-color); }
.qnotes-cat.active {
    border-color: var(--cat-color);
    background: color-mix(in srgb, var(--cat-color) 20%, var(--bg-block));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-color) 30%, transparent);
}
.qnotes-actions { display: flex; gap: 0.4rem; }
.qnotes-actions .btn { flex: 1; text-align: center; }
.qnotes-toast {
    position: absolute;
    top: -0.2rem;
    right: 0;
    background: #a78bfa;
    color: #1a1a2e;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    transition: opacity 0.4s;
}
.qnotes-toast.fade { opacity: 0; }
.qnotes-recent {
    border-top: 1px solid var(--border);
    padding-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.qnotes-recent-label { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.qnotes-item {
    --cat-color: #8a8a9a;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-main);
    font-size: 0.8rem;
    border-left: 2px solid var(--cat-color);
    background: var(--bg-block);
    transition: all 0.15s;
}
.qnotes-item:hover { background: color-mix(in srgb, var(--cat-color) 15%, var(--bg-block)); }
.qnotes-item-icon { flex-shrink: 0; font-size: 0.85rem; }
.qnotes-item-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quick Notes — tags with categories */
.qnotes-tags-section { display: flex; flex-direction: column; gap: 0.35rem; }
.qnotes-tags-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.qnotes-tag-chip {
    --cat-color: #8a8a9a;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--cat-color);
    border-radius: 100px;
    font-size: 0.7rem;
    background: color-mix(in srgb, var(--cat-color) 15%, var(--bg-block));
    color: var(--text-main);
}
.qnotes-tag-remove {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0 0.15rem;
}
.qnotes-tag-remove:hover { color: var(--danger, #f87171); }
.qnotes-tag-add {
    display: flex;
    gap: 0.3rem;
    align-items: stretch;
}
.qnotes-tag-cat {
    flex: 0 0 auto;
    width: auto;
    min-width: 56px;
    max-width: 90px;
    font-size: 0.75rem;
    padding: 0.3rem 0.4rem;
}
.qnotes-tag-text {
    flex: 1;
    font-size: 0.8rem;
}
.qnotes-tag-add-btn {
    flex: 0 0 auto;
    padding: 0.3rem 0.6rem;
    font-weight: 700;
}

/* ===== Bug Reporter ===== */
.bug-fab {
    position: fixed;
    bottom: var(--fab-bottom);
    right: var(--fab-slot-3);
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    background: #1a1a2e;
    border: 2px solid #f87171;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    box-shadow: 0 2px 12px rgba(248, 113, 113, 0.3);
    transition: all 0.2s;
}
.bug-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(248, 113, 113, 0.5);
    border-color: #fca5a5;
}
.bug-fab .bug-svg {
    width: var(--fab-icon);
    height: var(--fab-icon);
    stroke: #f87171;
}
.bug-fab:hover .bug-svg { stroke: #fca5a5; }

/* Bug selector mode */
body.bug-selecting { cursor: crosshair !important; }
body.bug-selecting * { cursor: crosshair !important; }
body.bug-selecting .bug-fab { cursor: pointer !important; }

.bug-highlight-overlay {
    position: fixed;
    pointer-events: none;
    border: 2px solid #f87171;
    background: rgba(248, 113, 113, 0.12);
    border-radius: 4px;
    z-index: 99999;
    transition: top 0.08s, left 0.08s, width 0.08s, height 0.08s;
    display: none;
}

/* Bug report modal */
.bug-report-modal-wrap { position: fixed; inset: 0; z-index: 10002; }
.bug-report-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    max-width: 460px;
    width: 90vw;
    margin: 10vh auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.bug-report-modal .modal-header {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bug-report-modal .modal-header h2 { margin: 0; font-size: 1.1rem; }
.bug-report-modal .modal-body { padding: 1.2rem; }

.bug-field { margin-bottom: 1rem; }
.bug-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 0.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bug-element-info code {
    background: rgba(255,255,255,0.06);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--accent);
    display: inline-block;
}
.bug-element-path small {
    color: var(--text-dim);
    font-size: 0.75rem;
    margin-top: 0.2rem;
    display: block;
}
.bug-type-toggle { display: flex; gap: 0.5rem; }
.bug-type-option { cursor: pointer; }
.bug-type-option input { display: none; }
.bug-type-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 500;
    border: 1.5px solid var(--border); color: var(--text-dim);
    background: transparent; transition: all 0.2s;
}
.bug-type-option input:checked + .bug-type-bug {
    border-color: #f87171; color: #f87171; background: rgba(248,113,113,0.1);
}
.bug-type-option input:checked + .bug-type-feature {
    border-color: var(--accent); color: var(--accent); background: rgba(129,140,248,0.1);
}
.bug-type-option input:checked + .bug-type-design {
    border-color: #f0b454; color: #f0b454; background: rgba(240,180,84,0.12);
}

.bug-textarea {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 0.7rem;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
}
.bug-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* Debug toggle in profile */
.bug-debug-toggle {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.bug-debug-toggle .login-label { flex: 0 0 auto; margin-bottom: 0; }
.bug-debug-hint {
    color: var(--text-dim);
    font-size: 0.75rem;
    flex: 1 0 100%;
}
.toggle-switch {
    position: relative;
    width: 40px;
    height: 22px;
    display: inline-block;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 11px;
    cursor: pointer;
    transition: background 0.2s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-dim);
    top: 3px;
    left: 3px;
    transition: transform 0.2s, background 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); background: var(--accent); }

/* ============================================================
   Family Diagram (new families datamodel)
   ============================================================ */

.famdiag-wrap {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 0.75rem 0;
}
/* NPC-kaart: het ingebedde familiediagram moet compacter zijn én dezelfde
   achtergrond hebben als de Families-pagina (var(--bg-card)). (Fix 2026-06-07) */
.npc-family-section .famdiag-wrap {
    background: var(--bg-card);
    padding: 0.55rem 0.65rem;
    margin: 0.5rem 0 0;
}
.npc-family-section .famdiag-canvas-scroll {
    background: var(--bg-card);
    max-height: 320px;
    --famdiag-scale: 0.78;
    padding: 0.25rem;
}
.famdiag-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.famdiag-title {
    margin: 0;
    color: var(--accent);
    font-size: 1.05rem;
    letter-spacing: 0.05em;
}
.famdiag-header-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.famdiag-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.famdiag-search { flex: 1 1 200px; min-width: 200px; }

.famdiag-split {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 900px) {
    .famdiag-split.has-panel {
        display: grid;
        grid-template-columns: minmax(180px, 220px) 1fr;
        gap: 1rem;
        align-items: start;
    }
    .famdiag-split.has-panel .famdiag-pills {
        flex-direction: column;
        flex-wrap: nowrap;
        max-height: calc(100vh - 240px);
        overflow-y: auto;
        margin-bottom: 0;
    }
    .famdiag-split.has-panel .famdiag-pill {
        width: 100%;
        min-width: 0;
    }
    .famdiag-split.has-panel .famdiag-panel {
        margin-top: 0;
        min-width: 0;
    }
}

.famdiag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: var(--bg-card);
    border-radius: var(--radius);
}
.famdiag-pill {
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.35rem 0.55rem;
    cursor: pointer;
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 84px;
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.famdiag-pill:hover {
    background: var(--bg-card);
    transform: translateY(-1px);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
}
.famdiag-pill.active {
    background: color-mix(in srgb, var(--accent) 15%, var(--bg-block));
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}
.famdiag-pill-name { font-weight: 600; font-size: 0.82rem; color: var(--text-bright); }
.famdiag-pill-count { font-size: 0.65rem; color: var(--text-dim); }

.famdiag-panel {
    border-left: 3px solid var(--accent);
    padding: 0.75rem;
    background: var(--bg-card);
    border-radius: var(--radius);
}

.famdiag-canvas-scroll {
    overflow: auto;
    max-height: calc(100vh - 240px);
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    border-radius: var(--radius);
    padding: 0.5rem;
    --famdiag-scale: 1;
}

/* Family Tree parchment frame — main Families panel only (not the small
   embedded diagrams in NPC/character cards). Six layered backgrounds on one
   box: the parchment STRETCHES to any window shape (100% 100%, no crop, dark
   burnt edges kept); the tree stays a FIXED size, centred; the four corner
   flourishes stay a FIXED size pinned in the corners. Media queries shrink
   only the fixed parts on small screens so the pieces never overlap. */
.famdiag-panel .famdiag-canvas-scroll {
    min-height: min(64vh, 560px);
    background-color: #cbb789;            /* parchment-tint fallback */
    /* Hosted on Cloudinary under "DnD Within/General/Family Tree" with
       f_auto,q_auto (auto webp/avif + compression). Local copies live in
       Images/Frame/ as a backup/source. Unsigned uploads get random ids, so
       if these art files are re-uploaded these URLs must be refreshed. */
    background-image:
        url('https://res.cloudinary.com/dqmdh3b4d/image/upload/f_auto,q_auto/v1780427081/DnD%20Within/General/Family%20Tree/sfgreihdekt2nyyire7m.png'),
        url('https://res.cloudinary.com/dqmdh3b4d/image/upload/f_auto,q_auto/v1780427083/DnD%20Within/General/Family%20Tree/lms1wc1hyemtxuqu0c3a.png'),
        url('https://res.cloudinary.com/dqmdh3b4d/image/upload/f_auto,q_auto/v1780427086/DnD%20Within/General/Family%20Tree/lwnmwczsbwx0c0vuys15.png'),
        url('https://res.cloudinary.com/dqmdh3b4d/image/upload/f_auto,q_auto/v1780427087/DnD%20Within/General/Family%20Tree/wpl6n9ykhz0cg1pq7rkh.png'),
        url('https://res.cloudinary.com/dqmdh3b4d/image/upload/f_auto,q_auto/v1780427079/DnD%20Within/General/Family%20Tree/qvqpgmb9euw6htrfka5g.png'),
        url('https://res.cloudinary.com/dqmdh3b4d/image/upload/f_auto,q_auto/v1780427075/DnD%20Within/General/Family%20Tree/yqq3kjxm4genybhvxkfh.jpg');
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position:
        left top, right top,
        left bottom, right bottom,
        center center,
        center center;
    background-size:
        180px auto, 180px auto,
        180px auto, 180px auto,
        min(620px, 86%) auto,            /* tree: fixed-ish, capped to box */
        100% 100%;                       /* parchment: fill any shape */
}
@media (max-width: 900px) {
    .famdiag-panel .famdiag-canvas-scroll {
        background-size:
            120px auto, 120px auto,
            120px auto, 120px auto,
            min(440px, 88%) auto,
            100% 100%;
    }
}
@media (max-width: 560px) {
    .famdiag-panel .famdiag-canvas-scroll {
        background-size:
            82px auto, 82px auto,
            82px auto, 82px auto,
            min(300px, 92%) auto,
            100% 100%;
    }
}
.famdiag-canvas {
    position: relative;
    margin: 0 auto;
    transform: scale(var(--famdiag-scale, 1));
    transform-origin: top left;
}
/* Centre the diagram in the parchment frame on BOTH axes. flex + margin:auto
   centres when the diagram is smaller than the box, yet still scrolls (margin
   collapses to 0) when it's larger — avoids the flex-overflow top-clip bug. */
.famdiag-panel .famdiag-canvas-scroll { display: flex; }
.famdiag-panel .famdiag-canvas { margin: auto; }
.famdiag-zoom {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-dim);
}
.famdiag-zoom input[type="range"] { width: 110px; accent-color: var(--accent); }
.famdiag-zoom button {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    font-size: 0.72rem;
}
.famdiag-zoom button:hover { color: var(--text-bright); border-color: var(--accent); }
.famdiag-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}
.famdiag-line { stroke: var(--text-dim); stroke-width: 1.5; fill: none; }
.famdiag-line-partner { stroke: var(--accent); stroke-width: 2; }
.famdiag-line-child { stroke: var(--text-dim); stroke-width: 1.5; }

.famdiag-card {
    position: absolute;
    background: var(--bg-block);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.6rem;
    box-sizing: border-box;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    transition: transform 0.15s, box-shadow 0.15s;
}
.famdiag-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.famdiag-card-name {
    font-weight: 600;
    color: var(--text-bright);
    font-size: 0.85rem;
    line-height: 1.2;
    word-break: break-word;
}
.famdiag-card-years {
    font-size: 0.7rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.famdiag-card-meta {
    font-size: 0.7rem;
    color: var(--text-dim);
    font-style: italic;
}
.famdiag-card-deceased {
    opacity: 0.75;
    border-style: dashed;
}
.famdiag-card-guest {
    background: color-mix(in srgb, var(--text-dim) 10%, var(--bg-block));
    border-style: dashed;
}
.famdiag-card-guest .famdiag-card-name { color: var(--text); }

/* Parchment-frame cards (Families panel only): light, warm tone that sits on
   the parchment; snug padding; fancy Cinzel name. Embedded diagrams in NPC/
   character cards keep the dark app theme. */
.famdiag-panel .famdiag-card {
    background: rgba(247, 239, 221, 0.92);
    border: 1px solid rgba(120, 92, 56, 0.55);
    box-shadow: 0 1px 5px rgba(60, 40, 20, 0.28);
    padding: 0.3rem 0.45rem;
    gap: 0.05rem;
}
.famdiag-panel .famdiag-card:hover {
    box-shadow: 0 4px 12px rgba(60, 40, 20, 0.4);
    border-color: rgba(120, 92, 56, 0.85);
}
.famdiag-panel .famdiag-card-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.01em;
    color: #2e2114;
}
.famdiag-panel .famdiag-card-years,
.famdiag-panel .famdiag-card-meta { color: #6b563c; font-size: 0.62rem; }
.famdiag-panel .famdiag-card-guest {
    background: rgba(236, 226, 204, 0.88);
    border-style: dashed;
}
.famdiag-panel .famdiag-card-guest .famdiag-card-name { color: #4a3a26; }

/* Edit/remove buttons */
.famdiag-card-edit, .famdiag-card-remove {
    position: absolute;
    top: 2px;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.famdiag-card:hover .famdiag-card-edit, .famdiag-card:hover .famdiag-card-remove { opacity: 1; }
.famdiag-card-edit { right: 22px; }
.famdiag-card-remove { right: 2px; color: var(--danger); }
.famdiag-card-edit:hover, .famdiag-card-remove:hover { background: var(--bg-card); }

/* Add-dots */
.famdiag-dot {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: var(--bg);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.famdiag-canvas:hover .famdiag-dot { opacity: 0.65; }
.famdiag-dot:hover { opacity: 1; transform: scale(1.2); background: var(--accent); color: var(--bg); }

.famdiag-dot-partner-l { left: -10px; top: 50%; transform: translateY(-50%); }
.famdiag-dot-partner-l:hover { transform: translateY(-50%) scale(1.2); }
.famdiag-dot-partner-r { right: -10px; top: 50%; transform: translateY(-50%); }
.famdiag-dot-partner-r:hover { transform: translateY(-50%) scale(1.2); }
.famdiag-dot-parent { left: 50%; top: -10px; transform: translateX(-50%); }
.famdiag-dot-parent:hover { transform: translateX(-50%) scale(1.2); }
.famdiag-dot-childadd { /* positioned via inline left/top from JS */ }

.famdiag-empty-add { padding: 1rem; text-align: center; }

@media (max-width: 700px) {
    .famdiag-pill { min-width: 76px; padding: 0.3rem 0.5rem; }
    .famdiag-pill-name { font-size: 0.78rem; }
    .famdiag-pill-count { font-size: 0.62rem; }
}

/* ============================================================
   FAB-rij staat altijd horizontaal in de rechter onderhoek (zie
   :root --fab-* vars). Geen mobiele override meer; alleen panels
   schakelen op smalle schermen naar full-width zodat content nog
   leesbaar is. FAB-posities blijven gelijk op alle viewports.
   ============================================================ */
@media (max-width: 700px) {
    .dice-panel {
        bottom: calc(var(--fab-bottom) + 62px) !important;
        right: 0.5rem !important;
        left: 0.5rem !important;
        width: auto !important;
        max-width: none !important;
    }

    .notes-panel {
        top: 0.5rem !important;
        bottom: calc(var(--fab-bottom) + 62px) !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        max-width: none !important;
    }

    #social-chat-widget .scw-panel {
        position: fixed !important;
        bottom: calc(var(--fab-bottom) + 62px) !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        max-width: none !important;
    }
}