/* ============================================
   Fantasy Theme: Design Tokens & Global Styles
   ============================================ */

/* --- @font-face declarations --- */

@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('fonts/cinzel-v26-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Crimson Text';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/crimson-text-v19-latin-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Crimson Text';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/crimson-text-v19-latin-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Crimson Text';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/crimson-text-v19-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Sci-Fi @font-face declarations --- */

@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/orbitron-v35-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/exo-2-v26-latin-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Exo 2';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/exo-2-v26-latin-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/exo-2-v26-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Horror @font-face declarations --- */

@font-face {
    font-family: 'UnifrakturCook';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/unifrakturcook-v25-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/lora-v37-latin-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/lora-v37-latin-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/lora-v37-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Primitive Tokens --- */

:root {
    /* Parchment */
    --wm-parchment-100: #faf6ed;
    --wm-parchment-200: #f0e6d0;
    --wm-parchment-300: #e0d0b0;
    --wm-parchment-400: #d4c5a0;

    /* Stone */
    --wm-stone-900: #1a1a1a;
    --wm-stone-800: #2d2d2d;
    --wm-stone-700: #3d3d3d;
    --wm-stone-600: #555555;
    --wm-stone-500: #6b6b6b;

    /* Gold */
    --wm-gold-400: #ffd700;
    --wm-gold-500: #c9a84c;
    --wm-gold-600: #a0842e;
    --wm-gold-700: #8b6914;

    /* Bronze */
    --wm-bronze-500: #cd7f32;

    /* Semantic colors */
    --wm-fire-red: #ef5350;
    --wm-heal-green: #66bb6a;
    --wm-arcane-blue: #42a5f5;

    /* --- Semantic Tokens --- */
    --wm-bg-primary: var(--wm-parchment-200);
    --wm-bg-surface: var(--wm-parchment-100);
    --wm-bg-sidebar: var(--wm-stone-800);
    --wm-bg-sidebar-top: var(--wm-stone-700);
    --wm-text-primary: var(--wm-stone-900);
    --wm-text-secondary: var(--wm-stone-600);
    --wm-text-heading: var(--wm-gold-700);
    --wm-text-on-dark: var(--wm-parchment-200);
    --wm-text-on-dark-muted: var(--wm-parchment-300);
    --wm-border-default: var(--wm-parchment-400);
    --wm-border-accent: var(--wm-gold-500);
    --wm-accent-primary: var(--wm-gold-500);
    --wm-accent-hover: var(--wm-gold-600);
    --wm-focus-ring: var(--wm-gold-400);

    /* --- Font stacks --- */
    --wm-font-heading: 'Cinzel', Georgia, 'Times New Roman', serif;
    --wm-font-body: 'Crimson Text', Georgia, 'Times New Roman', serif;

    /* --- Bootstrap overrides --- */
    --bs-body-bg: var(--wm-bg-primary);
    --bs-body-color: var(--wm-text-primary);
    --bs-body-font-family: var(--wm-font-body);
    --bs-body-font-size: 1.05rem;
    --bs-primary: var(--wm-gold-600);
    --bs-primary-rgb: 160, 132, 46;
    --bs-link-color: var(--wm-gold-700);
    --bs-link-color-rgb: 139, 105, 20;
    --bs-link-hover-color: var(--wm-gold-600);
    --bs-link-hover-color-rgb: 160, 132, 46;
    --bs-border-color: var(--wm-border-default);
    --bs-card-bg: var(--wm-bg-surface);
    --bs-danger: var(--wm-fire-red);
    --bs-danger-rgb: 239, 83, 80;
    --bs-success: var(--wm-heal-green);
    --bs-success-rgb: 102, 187, 106;
}

/* --- Base element styles --- */

html, body {
    font-family: var(--wm-font-body);
    background-color: var(--wm-bg-primary);
    color: var(--wm-text-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    font-weight: 700;
}

a, .btn-link {
    color: var(--wm-gold-700);
}

a:hover, .btn-link:hover {
    color: var(--wm-gold-600);
}

/* --- Button styles --- */

.btn-primary {
    color: var(--wm-stone-900);
    background: linear-gradient(to bottom, var(--wm-gold-400), var(--wm-gold-600));
    border: 1px solid var(--wm-gold-600);
    font-family: var(--wm-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.btn-primary:hover {
    background: linear-gradient(to bottom, var(--wm-gold-500), var(--wm-gold-700));
    border-color: var(--wm-gold-700);
    color: var(--wm-stone-900);
}

.btn-primary:active {
    background: var(--wm-gold-700);
    border-color: var(--wm-gold-700);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--wm-bg-primary), 0 0 0 0.25rem var(--wm-focus-ring);
}

/* --- Content area --- */

h1:focus {
    outline: none;
}

/* --- Table styles --- */

.table {
    --bs-table-bg: var(--wm-parchment-100);
    --bs-table-striped-bg: var(--wm-parchment-200);
    --bs-table-border-color: var(--wm-parchment-400);
    --bs-table-color: var(--wm-text-primary);
}

.table > thead {
    background-color: var(--wm-stone-800);
    color: var(--wm-text-on-dark);
}

.table > thead th {
    font-family: var(--wm-font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--wm-gold-500);
}

/* --- Form validation --- */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--wm-heal-green);
}

.invalid {
    outline: 1px solid var(--wm-fire-red);
}

.validation-message {
    color: var(--wm-fire-red);
}

/* --- Error boundary --- */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--wm-fire-red);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* --- Checkbox --- */

.darker-border-checkbox.form-check-input {
    border-color: var(--wm-stone-500);
}

/* --- Floating form placeholders --- */

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ============================================
   Dark Mode ("Dungeon Mode")
   ============================================ */

[data-bs-theme="dark"] {
    /* Remap semantic tokens for dark surfaces */
    --wm-bg-primary: #0d0d1a;
    --wm-bg-surface: #151528;
    --wm-bg-sidebar: #0a0a14;
    --wm-bg-sidebar-top: #12121f;
    --wm-text-primary: #e0d5c1;
    --wm-text-secondary: #9e9484;
    --wm-text-heading: #c9a84c;
    --wm-text-on-dark: #e0d5c1;
    --wm-text-on-dark-muted: #b0a590;
    --wm-border-default: #2a2540;
    --wm-border-accent: #8b6914;
    --wm-accent-primary: #c9a84c;
    --wm-accent-hover: #a0842e;
    --wm-focus-ring: #c9a84c;

    /* Bootstrap dark overrides */
    --bs-body-bg: #0d0d1a;
    --bs-body-color: #e0d5c1;
    --bs-primary: #c9a84c;
    --bs-primary-rgb: 201, 168, 76;
    --bs-link-color: #c9a84c;
    --bs-link-color-rgb: 201, 168, 76;
    --bs-link-hover-color: #ffd700;
    --bs-link-hover-color-rgb: 255, 215, 0;
    --bs-border-color: #2a2540;
    --bs-card-bg: #151528;

    color-scheme: dark;
}

[data-bs-theme="dark"] html,
[data-bs-theme="dark"] body,
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
    background-color: var(--wm-bg-primary);
    color: var(--wm-text-primary);
}

[data-bs-theme="dark"] a,
[data-bs-theme="dark"] .btn-link {
    color: var(--wm-accent-primary);
}

[data-bs-theme="dark"] a:hover,
[data-bs-theme="dark"] .btn-link:hover {
    color: var(--wm-focus-ring);
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
    color: var(--wm-text-heading);
}

[data-bs-theme="dark"] .btn-primary {
    color: var(--wm-stone-900);
    background: linear-gradient(to bottom, var(--wm-gold-500), var(--wm-gold-700));
    border-color: var(--wm-gold-700);
}

[data-bs-theme="dark"] .btn-primary:hover {
    background: linear-gradient(to bottom, var(--wm-gold-400), var(--wm-gold-600));
    border-color: var(--wm-gold-600);
    color: var(--wm-stone-900);
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--wm-bg-surface);
    --bs-table-striped-bg: var(--wm-bg-primary);
    --bs-table-border-color: var(--wm-border-default);
    --bs-table-color: var(--wm-text-primary);
}

[data-bs-theme="dark"] .table > thead {
    background-color: var(--wm-bg-sidebar);
    color: var(--wm-text-on-dark);
}

[data-bs-theme="dark"] .blazor-error-boundary {
    background-color: #3d1111;
    color: var(--wm-text-primary);
}

/* ============================================
   Sci-Fi Theme
   ============================================ */

[data-wm-style="scifi"] {
    /* Primitive overrides */
    --wm-parchment-100: #f8fafc;
    --wm-parchment-200: #f0f4f8;
    --wm-parchment-300: #e2e8f0;
    --wm-parchment-400: #cbd5e1;

    --wm-stone-900: #0f172a;
    --wm-stone-800: #1e293b;
    --wm-stone-700: #334155;
    --wm-stone-600: #475569;
    --wm-stone-500: #64748b;

    --wm-gold-400: #22d3ee;
    --wm-gold-500: #06b6d4;
    --wm-gold-600: #0891b2;
    --wm-gold-700: #0e7490;
    --wm-bronze-500: #0ea5e9;

    /* Font stacks */
    --wm-font-heading: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
    --wm-font-body: 'Exo 2', 'Segoe UI', system-ui, sans-serif;

    /* Bootstrap overrides */
    --bs-body-font-family: var(--wm-font-body);
    --bs-primary-rgb: 8, 145, 178;
    --bs-link-color-rgb: 14, 116, 144;
    --bs-link-hover-color-rgb: 8, 145, 178;
}

[data-wm-style="scifi"][data-bs-theme="dark"] {
    /* Primitive overrides for dark */
    --wm-parchment-100: #131d2e;
    --wm-parchment-200: #0c1222;
    --wm-parchment-300: #1e293b;
    --wm-parchment-400: #1e3a5f;

    --wm-stone-900: #0c1222;
    --wm-stone-800: #131d2e;
    --wm-stone-700: #1e293b;
    --wm-stone-600: #475569;
    --wm-stone-500: #64748b;

    --wm-gold-400: #67e8f9;
    --wm-gold-500: #22d3ee;
    --wm-gold-600: #06b6d4;
    --wm-gold-700: #0891b2;
    --wm-bronze-500: #38bdf8;

    /* Semantic overrides */
    --wm-bg-primary: #0c1222;
    --wm-bg-surface: #131d2e;
    --wm-bg-sidebar: #080e1a;
    --wm-bg-sidebar-top: #0f172a;
    --wm-text-primary: #e2e8f0;
    --wm-text-secondary: #94a3b8;
    --wm-text-heading: #22d3ee;
    --wm-text-on-dark: #e2e8f0;
    --wm-text-on-dark-muted: #94a3b8;
    --wm-border-default: #1e3a5f;
    --wm-border-accent: #06b6d4;
    --wm-accent-primary: #22d3ee;
    --wm-accent-hover: #06b6d4;
    --wm-focus-ring: #67e8f9;

    /* Bootstrap dark overrides */
    --bs-body-bg: #0c1222;
    --bs-body-color: #e2e8f0;
    --bs-primary: #22d3ee;
    --bs-primary-rgb: 34, 211, 238;
    --bs-link-color: #22d3ee;
    --bs-link-color-rgb: 34, 211, 238;
    --bs-link-hover-color: #67e8f9;
    --bs-link-hover-color-rgb: 103, 232, 249;
    --bs-border-color: #1e3a5f;
    --bs-card-bg: #131d2e;

    color-scheme: dark;
}

/* ============================================
   Horror Theme
   ============================================ */

[data-wm-style="horror"] {
    /* Primitive overrides */
    --wm-parchment-100: #faf8f5;
    --wm-parchment-200: #f5f3f0;
    --wm-parchment-300: #e8e4de;
    --wm-parchment-400: #d4cfc7;

    --wm-stone-900: #1c1917;
    --wm-stone-800: #292524;
    --wm-stone-700: #44403c;
    --wm-stone-600: #57534e;
    --wm-stone-500: #78716c;

    --wm-gold-400: #ef4444;
    --wm-gold-500: #dc2626;
    --wm-gold-600: #b91c1c;
    --wm-gold-700: #991b1b;
    --wm-bronze-500: #9f1239;

    /* Font stacks */
    --wm-font-heading: 'UnifrakturCook', cursive;
    --wm-font-body: 'Lora', Georgia, 'Times New Roman', serif;

    /* Bootstrap overrides */
    --bs-body-font-family: var(--wm-font-body);
    --bs-primary-rgb: 185, 28, 28;
    --bs-link-color-rgb: 153, 27, 27;
    --bs-link-hover-color-rgb: 185, 28, 28;
}

[data-wm-style="horror"][data-bs-theme="dark"] {
    /* Primitive overrides for dark */
    --wm-parchment-100: #1a1714;
    --wm-parchment-200: #0f0d0b;
    --wm-parchment-300: #292524;
    --wm-parchment-400: #2e2925;

    --wm-stone-900: #0f0d0b;
    --wm-stone-800: #1a1714;
    --wm-stone-700: #292524;
    --wm-stone-600: #57534e;
    --wm-stone-500: #78716c;

    --wm-gold-400: #f87171;
    --wm-gold-500: #ef4444;
    --wm-gold-600: #dc2626;
    --wm-gold-700: #b91c1c;
    --wm-bronze-500: #e11d48;

    /* Semantic overrides */
    --wm-bg-primary: #0f0d0b;
    --wm-bg-surface: #1a1714;
    --wm-bg-sidebar: #0a0908;
    --wm-bg-sidebar-top: #131110;
    --wm-text-primary: #d6cfc6;
    --wm-text-secondary: #8a8078;
    --wm-text-heading: #ef4444;
    --wm-text-on-dark: #d6cfc6;
    --wm-text-on-dark-muted: #8a8078;
    --wm-border-default: #2e2925;
    --wm-border-accent: #b91c1c;
    --wm-accent-primary: #ef4444;
    --wm-accent-hover: #dc2626;
    --wm-focus-ring: #f87171;

    /* Bootstrap dark overrides */
    --bs-body-bg: #0f0d0b;
    --bs-body-color: #d6cfc6;
    --bs-primary: #ef4444;
    --bs-primary-rgb: 239, 68, 68;
    --bs-link-color: #ef4444;
    --bs-link-color-rgb: 239, 68, 68;
    --bs-link-hover-color: #f87171;
    --bs-link-hover-color-rgb: 248, 113, 113;
    --bs-border-color: #2e2925;
    --bs-card-bg: #1a1714;

    color-scheme: dark;
}

/* ============================================
   Custom Scrollbar Styling
   ============================================ */

/* Standard (Firefox) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--wm-gold-600) var(--wm-parchment-300);
}

[data-bs-theme="dark"] * {
    scrollbar-color: var(--wm-gold-700) var(--wm-bg-surface);
}

/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--wm-parchment-300);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--wm-gold-500), var(--wm-gold-700));
    border-radius: 4px;
    border: 1px solid var(--wm-parchment-400);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, var(--wm-gold-400), var(--wm-gold-600));
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--wm-bg-surface);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--wm-gold-600), var(--wm-gold-700));
    border-color: var(--wm-border-default);
}

/* ============================================
   Ornamental Borders
   ============================================ */

.content {
    padding-top: 1.1rem;
    position: relative;
}

/* Decorative top border on content area */
article.content {
    border-top: 3px solid transparent;
    border-image: linear-gradient(
        90deg,
        transparent 0%,
        var(--wm-gold-600) 15%,
        var(--wm-gold-400) 50%,
        var(--wm-gold-600) 85%,
        transparent 100%
    ) 1;
}

/* Ornamental divider class for use in page content */
.wm-divider {
    border: none;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--wm-gold-600) 20%,
        var(--wm-gold-400) 50%,
        var(--wm-gold-600) 80%,
        transparent 100%
    );
    margin: 1.5rem 0;
}

/* Fantasy-styled card/panel */
.wm-panel {
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-border-default);
    border-radius: 2px;
    padding: 1.5rem;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        inset 0 0 0 1px rgba(255, 215, 0, 0.05);
    position: relative;
}

.wm-panel::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--wm-gold-500),
        transparent
    );
}

/* ============================================
   Magic Glow Effects
   ============================================ */

.btn-primary {
    transition: box-shadow 0.3s ease;
}

.btn-primary:hover {
    box-shadow: 0 0 12px rgba(201, 168, 76, 0.4);
}

.btn-primary:active {
    box-shadow: 0 0 6px rgba(201, 168, 76, 0.6);
}

/* Glow on focus for interactive elements */
.btn:focus-visible,
.form-control:focus-visible,
.form-check-input:focus-visible {
    box-shadow: 0 0 0 0.15rem var(--wm-bg-primary), 0 0 8px var(--wm-focus-ring);
    outline: none;
}

/* ============================================
   High Contrast Overrides
   ============================================ */

@media (prefers-contrast: more) {
    :root {
        --wm-text-primary: #000000;
        --wm-text-heading: #5a3d00;
        --wm-border-default: #8b6914;
        --wm-border-accent: #5a3d00;
    }

    [data-bs-theme="dark"] {
        --wm-text-primary: #ffffff;
        --wm-text-heading: #ffd700;
        --wm-border-default: #c9a84c;
        --wm-border-accent: #ffd700;
    }

    [data-wm-style="scifi"] {
        --wm-text-primary: #000000;
        --wm-text-heading: #065666;
        --wm-border-default: #0891b2;
        --wm-border-accent: #065666;
    }

    [data-wm-style="scifi"][data-bs-theme="dark"] {
        --wm-text-primary: #ffffff;
        --wm-text-heading: #67e8f9;
        --wm-border-default: #22d3ee;
        --wm-border-accent: #67e8f9;
    }

    [data-wm-style="horror"] {
        --wm-text-primary: #000000;
        --wm-text-heading: #7f1d1d;
        --wm-border-default: #b91c1c;
        --wm-border-accent: #7f1d1d;
    }

    [data-wm-style="horror"][data-bs-theme="dark"] {
        --wm-text-primary: #ffffff;
        --wm-text-heading: #f87171;
        --wm-border-default: #ef4444;
        --wm-border-accent: #f87171;
    }

    /* Remove decorative shadows/textures, strengthen borders */
    .wm-panel {
        box-shadow: none;
        border-width: 2px;
    }

    article.content {
        border-top-width: 4px;
    }

    .btn-primary:hover {
        box-shadow: none;
    }
}

/* ============================================
   Account Pages
   ============================================ */

.account-title {
    text-align: center;
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

/* ============================================
   Quill Editor Theme Overrides
   ============================================ */

.ql-toolbar.ql-snow {
    border-color: var(--wm-border-default);
    background: var(--wm-bg-surface);
    border-radius: 2px 2px 0 0;
    font-family: var(--wm-font-body);
}

.ql-container.ql-snow {
    border-color: var(--wm-border-default);
    font-family: var(--wm-font-body);
    font-size: 1.05rem;
    min-height: 250px;
    background: var(--wm-bg-surface);
    border-radius: 0 0 2px 2px;
}

.ql-editor {
    min-height: 250px;
    color: var(--wm-text-primary);
}

.ql-editor.ql-blank::before {
    color: var(--wm-text-secondary);
    font-style: italic;
}

.ql-snow .ql-stroke {
    stroke: var(--wm-text-primary);
}

.ql-snow .ql-fill {
    fill: var(--wm-text-primary);
}

.ql-snow .ql-picker {
    color: var(--wm-text-primary);
}

.ql-snow .ql-picker-options {
    background: var(--wm-bg-surface);
    border-color: var(--wm-border-default);
}

[data-bs-theme="dark"] .ql-toolbar.ql-snow,
[data-bs-theme="dark"] .ql-container.ql-snow {
    border-color: var(--wm-border-default);
    background: var(--wm-bg-surface);
}

[data-bs-theme="dark"] .ql-editor {
    color: var(--wm-text-primary);
}

[data-bs-theme="dark"] .ql-snow .ql-stroke {
    stroke: var(--wm-text-primary);
}

[data-bs-theme="dark"] .ql-snow .ql-fill {
    fill: var(--wm-text-primary);
}

[data-bs-theme="dark"] .ql-snow .ql-picker {
    color: var(--wm-text-primary);
}

[data-bs-theme="dark"] .ql-snow .ql-picker-options {
    background: var(--wm-bg-surface);
    border-color: var(--wm-border-default);
}

/* Wiki content rendered HTML */
.wiki-content h1, .wiki-content h2, .wiki-content h3 {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
}

.wiki-content a[data-wiki-page-id] {
    color: var(--wm-accent-primary);
    text-decoration: underline;
    text-decoration-style: dotted;
}

.wiki-content a[data-wiki-page-id]:hover {
    text-decoration-style: solid;
}

/* ============================================
   Stat Block Styles
   ============================================ */

.stat-block {
    background: var(--wm-bg-primary);
    border: 2px solid var(--wm-accent-primary);
    border-radius: 0;
    margin: 1.5rem 0;
    padding: 0;
    max-width: 480px;
    font-family: var(--wm-font-body);
    color: var(--wm-text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.stat-block::before,
.stat-block::after {
    content: "";
    display: block;
    height: 5px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--wm-accent-primary) 15%,
        var(--wm-accent-primary) 85%,
        transparent 100%
    );
}

.stat-block-inner {
    padding: 0.75rem 1rem;
}

/* Header style */
.stat-block-header {
    padding: 0.25rem 0;
}

.stat-block-name {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    font-size: 1.4rem;
    margin: 0;
    line-height: 1.2;
}

.stat-block-subtitle {
    font-style: italic;
    font-size: 0.9rem;
    color: var(--wm-text-secondary);
    margin: 0.1rem 0 0 0;
}

/* Divider between groups */
.stat-block-divider {
    height: 3px;
    margin: 0.5rem 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--wm-accent-primary) 15%,
        var(--wm-accent-primary) 85%,
        transparent 100%
    );
}

/* Properties style (vertical label: value list) */
.stat-block-properties p {
    margin: 0.15rem 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.stat-block-properties p strong {
    color: var(--wm-text-heading);
    margin-right: 0.25rem;
}

/* Scores style (horizontal grid) */
.stat-block-scores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    text-align: center;
    gap: 0.25rem;
    padding: 0.25rem 0;
}

.stat-block-scores > div {
    font-size: 0.85rem;
    line-height: 1.3;
}

.stat-block-scores > div strong {
    color: var(--wm-text-heading);
    font-size: 0.8rem;
    display: block;
}

/* Entries style (section with bold-italic label + description) */
.stat-block-section-title {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    font-size: 1.1rem;
    margin: 0.25rem 0;
    border-bottom: 1px solid var(--wm-accent-primary);
    padding-bottom: 0.15rem;
}

.stat-block-entries p {
    margin: 0.35rem 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.stat-block-entries p strong em {
    color: var(--wm-text-heading);
}

/* Dark mode overrides */
[data-bs-theme="dark"] .stat-block {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* High contrast mode */
@media (prefers-contrast: more) {
    .stat-block {
        box-shadow: none;
        border-width: 3px;
    }

    .stat-block::before,
    .stat-block::after {
        background: var(--wm-accent-primary);
    }
}

/* Responsive: scores grid collapses */
@media (max-width: 400px) {
    .stat-block-scores {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   Timeline Styles
   ============================================ */

.wm-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    padding-left: 2.5rem;
}

.wm-timeline::before {
    content: "";
    position: absolute;
    left: 0.75rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--wm-accent-primary) 3%,
        var(--wm-accent-primary) 97%,
        transparent 100%
    );
}

.wm-timeline-event {
    position: relative;
    margin-bottom: 1.5rem;
}

.wm-timeline-event::before {
    content: "";
    position: absolute;
    left: -1.75rem;
    top: 1.2rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--wm-bg-surface);
    border: 3px solid var(--wm-accent-primary);
    z-index: 1;
}

.wm-timeline-event:first-child::before {
    background: var(--wm-accent-primary);
}

.wm-timeline-card {
    padding: 1rem 1.25rem;
}

.wm-timeline-date {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
}

.wm-timeline-title {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    font-size: 1.2rem;
    margin: 0 0 0.5rem 0;
}

.wm-timeline-body {
    font-size: 0.95rem;
    line-height: 1.6;
}

.wm-timeline-actions {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--wm-border-default);
}

/* High contrast mode */
@media (prefers-contrast: more) {
    .wm-timeline::before {
        background: var(--wm-accent-primary);
        width: 4px;
    }

    .wm-timeline-event::before {
        border-width: 4px;
    }
}

/* ============================================
   World Tab Navigation
   ============================================ */

.wm-world-tabs {
    border-bottom-color: var(--wm-border-default);
}

.wm-world-tabs .nav-link {
    color: var(--wm-text-secondary);
    font-family: var(--wm-font-heading);
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.6rem 1rem;
    transition: color 0.15s, border-color 0.15s;
}

.wm-world-tabs .nav-link:hover {
    color: var(--wm-text-heading);
    border-bottom-color: var(--wm-border-default);
}

.wm-world-tabs .nav-link.active {
    color: var(--wm-accent-primary);
    background: transparent;
    border-bottom-color: var(--wm-accent-primary);
}

@media (max-width: 575.98px) {
    .wm-world-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wm-world-tabs .nav-link {
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* ============================================
   Content Tree Styles
   ============================================ */

.wm-tree {
    padding: 0;
    margin: 0;
    overflow-x: auto;
    min-width: 0;
}

.wm-tree-node {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    min-height: 2rem;
    white-space: nowrap;
    outline: none;
}

.wm-tree-node:focus-visible {
    outline: 2px solid var(--wm-focus-ring);
    outline-offset: -2px;
}

.wm-tree-node:hover {
    background-color: var(--wm-parchment-300);
}

.wm-tree-node--selected {
    background-color: var(--wm-parchment-400);
}

.wm-tree-node--selected:hover {
    background-color: var(--wm-parchment-400);
}

.wm-tree-chevron {
    border: none;
    background: none;
    line-height: 1;
    width: 1.5rem;
    flex-shrink: 0;
}

.wm-tree-title {
    flex-grow: 1;
    user-select: none;
}

.wm-tree-actions {
    display: inline-flex;
    gap: 0.2rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.wm-tree-node:hover .wm-tree-actions {
    opacity: 1;
}

.wm-tree-panel {
    position: sticky;
    top: 1rem;
}

/* Dark mode tree overrides */
[data-bs-theme="dark"] .wm-tree-node:hover {
    background-color: var(--wm-stone-700);
}

[data-bs-theme="dark"] .wm-tree-node--selected,
[data-bs-theme="dark"] .wm-tree-node--selected:hover {
    background-color: var(--wm-stone-600);
}

/* Responsive: stack side panel on mobile */
@media (max-width: 991.98px) {
    .wm-tree-panel {
        position: static;
    }

    .wm-tree-actions {
        opacity: 1;
    }
}

/* High contrast tree overrides */
@media (prefers-contrast: more) {
    .wm-tree-node--selected {
        outline: 2px solid var(--wm-focus-ring);
        outline-offset: -2px;
    }
}

/* ============================================
   Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .btn-primary:hover {
        box-shadow: none;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .sidebar,
    .top-row,
    .navbar-toggler,
    #blazor-error-ui,
    .theme-picker {
        display: none !important;
    }

    .page {
        display: block !important;
    }

    main {
        width: 100% !important;
    }

    article.content {
        border-top: none;
        padding: 0 !important;
    }

    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
    }

    h1, h2, h3, h4, h5, h6 {
        color: black !important;
    }

    a {
        color: black !important;
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }

    .wm-timeline::before {
        background: #333 !important;
    }

    .wm-timeline-event {
        break-inside: avoid;
    }

    .wm-timeline-event::before {
        border-color: #333 !important;
    }

    .stat-block {
        break-inside: avoid;
        border-color: #333 !important;
        box-shadow: none !important;
        background: white !important;
        color: black !important;
    }

    .stat-block::before,
    .stat-block::after,
    .stat-block-divider {
        background: #333 !important;
    }

    .stat-block-name,
    .stat-block-section-title,
    .stat-block-properties p strong,
    .stat-block-scores > div strong,
    .stat-block-entries p strong em {
        color: black !important;
    }

    .table {
        border-collapse: collapse;
    }

    .table th,
    .table td {
        border: 1px solid #ccc !important;
        background: white !important;
        color: black !important;
    }

    .wm-tree-actions {
        display: none !important;
    }

    .wm-tree-panel {
        position: static;
        border: 1px solid #ccc !important;
    }

    .wm-tree-node {
        color: black !important;
    }

    .wm-tree-node--selected {
        background: #eee !important;
    }
}

/* ============================================
   Character Sheet Styles
   ============================================ */

.character-sheet {
    max-width: 800px;
    background: var(--wm-bg-surface);
    border: 2px solid var(--wm-border-default);
    border-radius: 8px;
    padding: 1.5rem;
    font-family: var(--wm-font-body);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 1rem;
}

.character-sheet-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wm-border-default);
    grid-column: span 12;
}

.character-sheet-section-full { grid-column: span 12; }
.character-sheet-section-half { grid-column: span 6; }
.character-sheet-section-third { grid-column: span 4; }
.character-sheet-section-two-thirds { grid-column: span 8; }

.character-sheet-section-half,
.character-sheet-section-third,
.character-sheet-section-two-thirds {
    border-bottom: none;
    padding-bottom: 0;
}

.character-sheet-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Header style */
.character-sheet-header {
    text-align: center;
    border-bottom: 3px double var(--wm-accent-primary);
    padding-bottom: 1rem;
}

.character-sheet-name {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    font-size: 1.8rem;
    margin: 0;
}

.character-sheet-subtitle {
    color: var(--wm-text-secondary);
    font-style: italic;
    margin: 0.25rem 0 0;
    font-size: 1rem;
}

.character-sheet-section-title {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--wm-border-default);
    padding-bottom: 0.35rem;
}

/* Standard grid layout */
.character-sheet-grid {
    display: grid;
    grid-template-columns: repeat(var(--cs-columns, 1), 1fr);
    gap: 0.75rem;
}

.character-sheet-field {
    display: flex;
    flex-direction: column;
}

.character-sheet-field-full {
    grid-column: 1 / -1;
}

.character-sheet-field-half {
    grid-column: span 1;
}

.character-sheet-field-third {
    grid-column: span 1;
}

.character-sheet-field-quarter {
    grid-column: span 1;
}

.character-sheet-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wm-text-secondary);
    margin-bottom: 0.15rem;
}

.character-sheet-field-value {
    color: var(--wm-text);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--wm-border-default);
    padding-bottom: 0.2rem;
    min-height: 1.4em;
}

/* Calculated field display */
.character-sheet-calculated-value {
    color: var(--wm-text);
    font-size: 0.95rem;
    border-bottom: 1px dashed var(--wm-accent-primary);
    padding-bottom: 0.2rem;
    min-height: 1.4em;
    font-weight: 600;
}

.character-sheet-calculated-error {
    color: var(--wm-fire-red);
    font-size: 0.8rem;
    font-style: italic;
}

/* Score field modifier display (inline badge) */
.character-sheet-modifier-value {
    display: inline-block;
    font-weight: 700;
    color: var(--wm-accent-primary);
    font-size: 0.9rem;
    min-width: 2em;
    text-align: center;
}

/* Score field in scores section (stacked: modifier on top, score below) */
.character-sheet-score-modifier {
    font-family: var(--wm-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--wm-text-heading);
    line-height: 1;
}

.character-sheet-score-source {
    font-size: 0.75rem;
    color: var(--wm-text-secondary);
    margin-top: 0.15rem;
}

/* Skill field proficiency indicator */
.character-sheet-skill-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--wm-text-secondary);
    background: transparent;
    flex-shrink: 0;
}

.character-sheet-skill-dot--proficient {
    background: var(--wm-accent-primary);
    border-color: var(--wm-accent-primary);
}

/* Formula input in template builder */
.formula-input {
    font-family: monospace;
    font-size: 0.85rem;
}

.formula-error {
    color: var(--wm-fire-red);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Scores style (ability scores grid) */
.character-sheet-scores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.5rem;
}

.character-sheet-scores[style*="--cs-columns"] {
    grid-template-columns: repeat(var(--cs-columns), 1fr);
}

.character-sheet-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    border: 2px solid var(--wm-border-default);
    border-radius: 6px;
    background: var(--wm-bg);
    text-align: center;
}

.character-sheet-score-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wm-text-secondary);
    margin-bottom: 0.25rem;
}

.character-sheet-score-value {
    font-family: var(--wm-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--wm-text-heading);
    line-height: 1;
}

/* --- Separator Styles --- */

/* Default: inherits .character-sheet-section border-bottom (no override) */

/* None: remove separator entirely */
.character-sheet-sep-none {
    border-bottom: none !important;
    padding-bottom: 0;
}

/* Gradient: fading accent line (Fantasy-inspired) */
.character-sheet-sep-gradient {
    border-bottom: none;
    position: relative;
}
.character-sheet-sep-gradient::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--wm-accent-primary) 20%,
        var(--wm-accent-primary) 80%,
        transparent 100%
    );
}

/* Flourish: gradient with central diamond ornament (Fantasy-inspired) */
.character-sheet-sep-flourish {
    border-bottom: none;
    position: relative;
}
.character-sheet-sep-flourish::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 5%;
    right: 5%;
    height: 10px;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--wm-accent-primary) 15%,
            var(--wm-accent-primary) 43%,
            transparent 43%,
            transparent 57%,
            var(--wm-accent-primary) 57%,
            var(--wm-accent-primary) 85%,
            transparent 100%
        ) center / 100% 2px no-repeat,
        linear-gradient(
            45deg,
            transparent 30%,
            var(--wm-accent-primary) 30%,
            var(--wm-accent-primary) 70%,
            transparent 70%
        ) center / 10px 10px no-repeat;
}

/* Circuit: dashed segmented line with terminal dot (Sci-Fi-inspired) */
.character-sheet-sep-circuit {
    border-bottom: none;
    position: relative;
}
.character-sheet-sep-circuit::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--wm-accent-primary) 0px,
        var(--wm-accent-primary) 12px,
        transparent 12px,
        transparent 18px
    );
}

/* Rough: jagged irregular edge (Horror-inspired) */
.character-sheet-sep-rough {
    border-bottom: none;
    padding-bottom: 1.5rem;
    position: relative;
}
.character-sheet-sep-rough::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--wm-accent-primary);
    clip-path: polygon(
        0% 0%, 3% 100%, 7% 30%, 12% 90%, 18% 10%,
        24% 80%, 30% 20%, 36% 70%, 42% 0%, 48% 100%,
        54% 25%, 60% 85%, 66% 15%, 72% 75%, 78% 5%,
        84% 90%, 90% 35%, 95% 100%, 100% 0%
    );
}

/* --- Border Styles --- */

/* Default / None: no decorative border (existing behavior) */

/* Framed: corner bracket ornaments (Fantasy-inspired) */
.character-sheet-border-framed {
    position: relative;
    border: 1px solid var(--wm-border-accent);
    border-radius: 2px;
    padding: 1rem;
}
.character-sheet-border-framed::before,
.character-sheet-border-framed::after {
    content: '';
    position: absolute;
    width: clamp(16px, 10%, 40px);
    height: clamp(16px, 10%, 40px);
    border-color: var(--wm-accent-primary);
    border-style: solid;
    pointer-events: none;
}
.character-sheet-border-framed::before {
    top: 4px;
    left: 4px;
    border-width: 2px 0 0 2px;
}
.character-sheet-border-framed::after {
    bottom: 4px;
    right: 4px;
    border-width: 0 2px 2px 0;
}

/* Tech: clipped hex corners with glow (Sci-Fi-inspired) */
.character-sheet-border-tech {
    --corner-size: 12px;
    border: 1px solid var(--wm-accent-primary);
    padding: 1rem;
    clip-path: polygon(
        var(--corner-size) 0%,
        calc(100% - var(--corner-size)) 0%,
        100% var(--corner-size),
        100% calc(100% - var(--corner-size)),
        calc(100% - var(--corner-size)) 100%,
        var(--corner-size) 100%,
        0% calc(100% - var(--corner-size)),
        0% var(--corner-size)
    );
    box-shadow: 0 0 8px color-mix(in srgb, var(--wm-accent-primary) 30%, transparent);
}

/* Distressed: rough top/bottom edges (Horror-inspired) */
.character-sheet-border-distressed {
    position: relative;
    border-left: 2px solid var(--wm-border-default);
    border-right: 2px solid var(--wm-border-default);
    padding: 1.5rem;
}
.character-sheet-border-distressed::before,
.character-sheet-border-distressed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--wm-accent-primary);
    pointer-events: none;
}
.character-sheet-border-distressed::before {
    top: 0;
    clip-path: polygon(
        0% 0%, 5% 100%, 10% 30%, 16% 90%, 22% 10%,
        28% 80%, 34% 20%, 40% 70%, 46% 0%, 52% 100%,
        58% 25%, 64% 85%, 70% 15%, 76% 75%, 82% 5%,
        88% 90%, 94% 35%, 100% 0%
    );
}
.character-sheet-border-distressed::after {
    bottom: 0;
    clip-path: polygon(
        0% 100%, 6% 0%, 12% 70%, 18% 10%, 24% 80%,
        30% 20%, 36% 90%, 42% 30%, 48% 100%, 54% 0%,
        60% 75%, 66% 15%, 72% 85%, 78% 25%, 84% 95%,
        90% 10%, 96% 65%, 100% 100%
    );
}

/* Separator + Border conflict: when framed/distressed use ::after AND a separator uses ::after,
   the separator is suppressed. Border styles that use pseudo-elements take priority. */
.character-sheet-border-framed.character-sheet-sep-gradient::after,
.character-sheet-border-framed.character-sheet-sep-flourish::after,
.character-sheet-border-framed.character-sheet-sep-circuit::after,
.character-sheet-border-framed.character-sheet-sep-rough::after {
    /* ::after is claimed by framed border — fallback to border-bottom for separator */
    content: none;
}
.character-sheet-border-framed.character-sheet-sep-gradient,
.character-sheet-border-framed.character-sheet-sep-flourish,
.character-sheet-border-framed.character-sheet-sep-circuit,
.character-sheet-border-framed.character-sheet-sep-rough {
    border-bottom: 2px solid var(--wm-accent-primary);
}

.character-sheet-border-distressed.character-sheet-sep-gradient::after,
.character-sheet-border-distressed.character-sheet-sep-flourish::after,
.character-sheet-border-distressed.character-sheet-sep-circuit::after,
.character-sheet-border-distressed.character-sheet-sep-rough::after {
    /* ::after is claimed by distressed border — fallback to border-bottom */
    /* Keep the distressed ::after (bottom edge), suppress the separator ::after */
}
.character-sheet-border-distressed.character-sheet-sep-gradient,
.character-sheet-border-distressed.character-sheet-sep-flourish,
.character-sheet-border-distressed.character-sheet-sep-circuit,
.character-sheet-border-distressed.character-sheet-sep-rough {
    /* Distressed already has its own bottom edge, no additional separator needed */
    border-bottom: none;
}

/* Dark mode overrides */
[data-bs-theme="dark"] .character-sheet {
    border-color: var(--wm-border-default);
}

[data-bs-theme="dark"] .character-sheet-score {
    border-color: var(--wm-border-default);
    background: var(--wm-bg-surface);
}

[data-bs-theme="dark"] .character-sheet-calculated-value {
    border-bottom-color: var(--wm-accent-primary);
}

[data-bs-theme="dark"] .character-sheet-modifier-value {
    color: var(--wm-accent-primary);
}

[data-bs-theme="dark"] .character-sheet-score-modifier {
    color: var(--wm-text-heading);
}

[data-bs-theme="dark"] .character-sheet-skill-dot {
    border-color: var(--wm-text-secondary);
}

[data-bs-theme="dark"] .character-sheet-skill-dot--proficient {
    background: var(--wm-accent-primary);
    border-color: var(--wm-accent-primary);
}

/* High contrast mode */
@media (prefers-contrast: more) {
    .character-sheet {
        border-width: 3px;
    }

    .character-sheet-score {
        border-width: 3px;
    }

    .character-sheet-calculated-value {
        border-bottom-width: 2px;
        border-bottom-style: solid;
    }

    .character-sheet-skill-dot {
        border-width: 3px;
    }

    /* Simplify decorative separators to solid lines */
    .character-sheet-sep-gradient::after,
    .character-sheet-sep-flourish::after {
        background: var(--wm-border-default) !important;
        left: 0 !important;
        right: 0 !important;
        height: 3px !important;
    }
    .character-sheet-sep-circuit::after {
        background: var(--wm-border-default) !important;
        height: 3px !important;
    }
    .character-sheet-sep-rough::after {
        clip-path: none !important;
        background: var(--wm-border-default) !important;
        height: 3px !important;
    }

    /* Simplify decorative borders */
    .character-sheet-border-framed {
        border-width: 3px !important;
    }
    .character-sheet-border-framed::before,
    .character-sheet-border-framed::after {
        border-width: 3px !important;
    }
    .character-sheet-border-tech {
        clip-path: none !important;
        border-width: 3px !important;
        box-shadow: none !important;
    }
    .character-sheet-border-distressed::before,
    .character-sheet-border-distressed::after {
        clip-path: none !important;
        height: 3px !important;
    }
}

/* Responsive */
@media (max-width: 576px) {
    .character-sheet-grid {
        grid-template-columns: 1fr !important;
    }

    .character-sheet-field-half,
    .character-sheet-field-third,
    .character-sheet-field-quarter {
        grid-column: span 1;
    }

    .character-sheet-section-half,
    .character-sheet-section-third,
    .character-sheet-section-two-thirds {
        grid-column: span 12;
    }

    .character-sheet-scores {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Print */
@media print {
    .character-sheet {
        border: 1px solid #000 !important;
        background: white !important;
        color: black !important;
        max-width: 100%;
    }

    .character-sheet-name,
    .character-sheet-section-title,
    .character-sheet-score-value {
        color: black !important;
    }

    .character-sheet-score {
        border-color: #000 !important;
        background: white !important;
    }

    .character-sheet-calculated-value {
        color: black !important;
        border-bottom-color: #000 !important;
    }

    .character-sheet-modifier-value,
    .character-sheet-score-modifier {
        color: black !important;
    }

    .character-sheet-skill-dot {
        border-color: #000 !important;
    }

    .character-sheet-skill-dot--proficient {
        background: #000 !important;
    }

    .character-sheet-section-half,
    .character-sheet-section-third,
    .character-sheet-section-two-thirds {
        grid-column: span 12;
    }

    /* Simplify decorative separators to solid black */
    .character-sheet-sep-gradient::after,
    .character-sheet-sep-flourish::after,
    .character-sheet-sep-circuit::after {
        background: #000 !important;
        left: 0 !important;
        right: 0 !important;
        height: 1px !important;
    }
    .character-sheet-sep-rough::after {
        clip-path: none !important;
        background: #000 !important;
        height: 1px !important;
    }

    /* Simplify decorative borders */
    .character-sheet-border-framed {
        border-color: #000 !important;
    }
    .character-sheet-border-framed::before,
    .character-sheet-border-framed::after {
        border-color: #000 !important;
    }
    .character-sheet-border-tech {
        clip-path: none !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    .character-sheet-border-distressed {
        border-color: #000 !important;
    }
    .character-sheet-border-distressed::before,
    .character-sheet-border-distressed::after {
        clip-path: none !important;
        background: #000 !important;
        height: 1px !important;
    }
}

/* =============================================================
   Battle Map Editor
   ============================================================= */

.wm-battlemap-editor {
    display: grid;
    grid-template-areas:
        "toolbar toolbar"
        "sidebar canvas";
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    height: calc(100vh - 80px);
    gap: 0;
    margin: -1.5rem; /* offset .content px-4 padding */
}

.wm-battlemap-toolbar {
    grid-area: toolbar;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--wm-bg-surface);
    border-bottom: 2px solid var(--wm-border);
    flex-wrap: wrap;
    min-height: 48px;
}

.wm-battlemap-toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.wm-battlemap-toolbar-separator {
    width: 1px;
    height: 24px;
    background: var(--wm-border);
    margin: 0 0.25rem;
}

.wm-battlemap-toolbar .btn-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--wm-text-primary);
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.15s, border-color 0.15s;
}

.wm-battlemap-toolbar .btn-tool:hover {
    background: var(--wm-bg-hover);
    border-color: var(--wm-border);
}

.wm-battlemap-toolbar .btn-tool.active {
    background: var(--wm-accent-primary);
    color: var(--wm-bg-surface);
    border-color: var(--wm-accent-primary);
}

.wm-battlemap-toolbar .btn-tool:focus-visible {
    outline: 2px solid var(--wm-focus-ring);
    outline-offset: 2px;
}

.wm-battlemap-sidebar {
    grid-area: sidebar;
    background: var(--wm-bg-surface);
    border-right: 1px solid var(--wm-border);
    overflow-y: auto;
    padding: 0.5rem;
}

.wm-battlemap-sidebar h6 {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0.75rem 0 0.25rem;
    padding: 0 0.25rem;
}

.wm-battlemap-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 2px;
}

.wm-battlemap-tile-item {
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--wm-text-secondary);
    background: var(--wm-bg-body);
    transition: border-color 0.15s;
    overflow: hidden;
}

.wm-battlemap-tile-item:hover {
    border-color: var(--wm-accent-primary);
}

.wm-battlemap-tile-item.active {
    border-color: var(--wm-accent-primary);
    box-shadow: 0 0 0 1px var(--wm-accent-primary);
}

.wm-battlemap-tile-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
}

.wm-battlemap-canvas-container {
    grid-area: canvas;
    position: relative;
    overflow: hidden;
    background: var(--wm-bg-body);
}

.wm-battlemap-canvas-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

.wm-battlemap-canvas-container canvas:focus-visible {
    outline: 2px solid var(--wm-focus-ring);
    outline-offset: -2px;
}

.wm-battlemap-status {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-border);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--wm-text-secondary);
    opacity: 0.9;
}

.wm-battlemap-status .save-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.wm-battlemap-status .save-indicator.saved {
    background: var(--wm-heal-green, #2d6a2e);
}

.wm-battlemap-status .save-indicator.unsaved {
    background: var(--wm-fire-red, #8b1a1a);
}

.wm-battlemap-layer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wm-battlemap-layer-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--wm-text-primary);
    transition: background-color 0.15s;
}

.wm-battlemap-layer-item:hover {
    background: var(--wm-bg-hover);
}

.wm-battlemap-layer-item.active {
    background: var(--wm-accent-primary);
    color: var(--wm-bg-surface);
}

.wm-battlemap-layer-item .layer-visibility {
    opacity: 0.6;
    cursor: pointer;
}

.wm-battlemap-layer-item .layer-visibility:hover {
    opacity: 1;
}

/* --- Upload area --- */
.wm-battlemap-upload-area {
    padding: 0.25rem;
    border: 1px dashed var(--wm-border);
    border-radius: 4px;
    background: var(--wm-bg-body);
}

/* --- Breadcrumb --- */
.wm-battlemap-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.15rem 0.25rem;
    background: var(--wm-bg-hover);
    border-radius: 4px;
    font-size: 0.7rem;
}

/* --- Light properties panel --- */
.wm-battlemap-light-props {
    padding: 0.5rem;
    border-top: 1px solid var(--wm-border);
    margin-top: 0.5rem;
}

.wm-battlemap-light-props h6 {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.wm-battlemap-light-props label {
    font-size: 0.7rem;
    color: var(--wm-text-secondary);
    margin-bottom: 0.1rem;
    display: block;
}

.wm-battlemap-light-props input[type="color"] {
    width: 100%;
    height: 28px;
    border: 1px solid var(--wm-border);
    border-radius: 4px;
    cursor: pointer;
    background: var(--wm-bg-body);
    padding: 2px;
}

.wm-battlemap-light-props input[type="range"] {
    width: 100%;
    accent-color: var(--wm-accent-primary);
}

/* --- Responsive: collapse sidebar on narrow viewports --- */
@media (max-width: 768px) {
    .wm-battlemap-editor {
        grid-template-areas:
            "toolbar"
            "canvas";
        grid-template-columns: 1fr;
    }

    .wm-battlemap-sidebar {
        display: none;
    }
}

/* --- Dark mode overrides --- */
[data-bs-theme="dark"] .wm-battlemap-toolbar {
    background: var(--wm-bg-surface);
    border-bottom-color: var(--wm-border);
}

[data-bs-theme="dark"] .wm-battlemap-sidebar {
    background: var(--wm-bg-surface);
    border-right-color: var(--wm-border);
}

[data-bs-theme="dark"] .wm-battlemap-tile-item {
    background: var(--wm-bg-body);
}

/* --- High contrast --- */
@media (prefers-contrast: more) {
    .wm-battlemap-toolbar .btn-tool {
        border: 1px solid var(--wm-text-primary);
    }

    .wm-battlemap-tile-item {
        border: 2px solid var(--wm-text-secondary);
    }

    .wm-battlemap-status {
        opacity: 1;
        border-width: 2px;
    }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .wm-battlemap-toolbar .btn-tool,
    .wm-battlemap-tile-item,
    .wm-battlemap-layer-item {
        transition: none;
    }
}

/* --- Print --- */
@media print {
    .wm-battlemap-toolbar,
    .wm-battlemap-sidebar,
    .wm-battlemap-status {
        display: none !important;
    }

    .wm-battlemap-editor {
        grid-template-areas: "canvas";
        grid-template-columns: 1fr;
        height: auto;
        margin: 0;
    }

    .wm-battlemap-canvas-container canvas {
        width: 100%;
        height: auto;
    }
}

/* ── Play Mode ─────────────────────────────────────────────────── */

.wm-play-mode {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--wm-bg-primary);
    overflow: hidden;
}

.wm-play-loading,
.wm-play-error,
.wm-play-setup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem;
    text-align: center;
    color: var(--wm-text-primary);
}

.wm-play-error {
    color: var(--wm-fire-red, #c0392b);
}

.wm-play-setup .wm-heading {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    margin-bottom: 0.5rem;
}

.wm-play-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
    background: var(--wm-bg-surface);
    border-bottom: 2px solid var(--wm-accent-primary);
    gap: 0.5rem;
    flex-shrink: 0;
    z-index: 10;
}

.wm-play-toolbar-left,
.wm-play-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wm-play-toolbar-viewer {
    justify-content: center;
    padding: 0.25rem 0.75rem;
}

.wm-play-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--wm-fire-red, #c0392b);
    color: #fff;
    animation: wm-pulse-live 2s ease-in-out infinite;
}

.wm-play-badge-connected {
    background: var(--wm-heal-green, #27ae60);
    animation: none;
}

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

.wm-play-map-selector {
    max-width: 250px;
    font-size: 0.85rem;
}

.wm-play-toolbar-divider {
    width: 1px;
    height: 1.5rem;
    background: var(--wm-stone-600, #666);
    opacity: 0.4;
}

.wm-play-canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--wm-stone-900, #1a1a2e);
}

.wm-play-canvas-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Fullscreen mode ─────────────────────────────────────── */

.wm-play-fullscreen .wm-play-toolbar,
.wm-play-fullscreen .wm-character-panel,
.wm-play-fullscreen .wm-initiative-panel {
    display: none !important;
}

.wm-play-fullscreen {
    background: #000;
}

.wm-fullscreen-idle {
    cursor: none !important;
}

/* ── Map rotation ────────────────────────────────────────── */

.wm-play-canvas-container {
    transform-origin: center center;
}

/* ── Mobile touch controls ──────────────────────────────────── */

.wm-play-touch-controls {
    display: none;
}

@media (pointer: coarse) {
    .wm-play-touch-controls {
        display: flex;
        position: absolute;
        top: 12px;
        right: 12px;
        gap: 8px;
        z-index: 20;
    }
}

.wm-play-touch-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1.5px solid color-mix(in srgb, var(--wm-accent-primary) 50%, transparent);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: var(--wm-accent-primary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.wm-play-touch-btn:active {
    background: rgba(0, 0, 0, 0.8);
}

/* Live session banner on campaign detail */
.wm-play-live-banner {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--wm-heal-green, #27ae60) 15%, transparent),
        color-mix(in srgb, var(--wm-accent-primary) 10%, transparent));
    border: 1px solid var(--wm-heal-green, #27ae60);
    border-radius: 6px;
    color: var(--wm-text-primary);
    padding: 0.6rem 1rem;
}

/* Dark mode */
[data-bs-theme="dark"] .wm-play-toolbar {
    background: var(--wm-bg-surface);
    border-bottom-color: var(--wm-accent-primary);
}

/* Responsive: tablets */
@media (max-width: 768px) {
    .wm-play-toolbar {
        flex-wrap: wrap;
        padding: 0.3rem 0.5rem;
    }

    .wm-play-map-selector {
        max-width: 180px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wm-play-badge {
        animation: none;
    }
}

/* Token picker bar (shown when token tool active) */
.wm-token-picker-bar {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    background: var(--wm-bg-surface);
    border-bottom: 1px solid var(--wm-border-color, rgba(0,0,0,0.1));
    gap: 0.35rem;
    flex-shrink: 0;
    overflow-x: auto;
}

.wm-token-picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    background: var(--wm-bg-primary);
    padding: 2px;
    flex-shrink: 0;
}

.wm-token-picker-item:hover {
    border-color: var(--wm-accent-primary);
}

.wm-token-picker-item.selected {
    border-color: var(--wm-accent-primary);
    box-shadow: 0 0 4px var(--wm-accent-primary);
}

.wm-token-picker-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 2px;
}

.wm-token-picker-color {
    width: 100%;
    height: 100%;
    border-radius: 2px;
}

/* Token properties panel (left overlay inside canvas container) */
.wm-token-props-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    max-height: 100%;
    overflow-y: auto;
    background: var(--wm-bg-surface);
    border-right: 2px solid var(--wm-accent-primary);
    z-index: 20;
    font-size: 0.85rem;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.wm-token-props-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--wm-border-color, rgba(0,0,0,0.1));
    color: var(--wm-text-heading);
    font-family: var(--wm-font-heading);
}

.wm-token-props-close {
    padding: 0.1rem 0.3rem;
    font-size: 0.75rem;
    color: var(--wm-text-muted);
}

.wm-token-props-body {
    padding: 0.5rem 0.75rem;
}

.wm-token-hp-preview {
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
}

.wm-token-hp-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.2s, background 0.2s;
}

/* Active particle effects panel (bottom-left overlay) */
.wm-active-effects-panel {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    width: 180px;
    padding: 0.5rem 0.75rem;
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-border);
    border-radius: 4px;
    z-index: 20;
    font-size: 0.8rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Initiative tracker panel (right-side overlay) */
.wm-initiative-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 240px;
    max-height: 100%;
    overflow-y: auto;
    background: var(--wm-bg-surface);
    border-left: 2px solid var(--wm-accent-primary);
    z-index: 20;
    font-size: 0.85rem;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
}

.wm-initiative-panel.collapsed {
    width: auto;
}

.wm-initiative-panel.collapsed .wm-initiative-body {
    display: none;
}

.wm-initiative-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--wm-border-color, rgba(0,0,0,0.1));
    color: var(--wm-text-heading);
    font-family: var(--wm-font-heading);
    cursor: pointer;
}

.wm-initiative-body {
    padding: 0.5rem 0.75rem;
}

.wm-initiative-entry {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    margin-bottom: 0.25rem;
    border: 2px solid transparent;
}

.wm-initiative-entry.active {
    border-color: var(--wm-accent-primary);
    background: color-mix(in srgb, var(--wm-accent-primary) 12%, transparent);
}

.wm-initiative-entry.hidden-entry {
    opacity: 0.4;
}

.wm-initiative-thumb {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}

.wm-initiative-thumb-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    background: var(--wm-stone-600, #666);
    flex-shrink: 0;
}

.wm-initiative-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--wm-text-primary);
}

.wm-initiative-value {
    width: 48px !important;
    text-align: center;
    flex-shrink: 0;
}

.wm-initiative-hp {
    color: var(--wm-text-muted);
    flex-shrink: 0;
}

.wm-initiative-remove {
    padding: 0.1rem 0.25rem;
    font-size: 0.65rem;
    color: var(--wm-text-muted);
    flex-shrink: 0;
}

.wm-initiative-remove:hover {
    color: var(--wm-fire-red, #c0392b);
}

/* ── Character Panel (Play Mode) ──────────────────────────────── */

.wm-character-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    max-height: 100%;
    background: var(--wm-bg-surface);
    border-right: 2px solid var(--wm-accent-primary, var(--wm-gold-500));
    z-index: 20;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.wm-character-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.6rem;
    background: var(--wm-bg-surface);
    border-bottom: 1px solid var(--wm-border-color, rgba(0, 0, 0, 0.1));
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--wm-text-heading);
    font-family: var(--wm-font-heading, Cinzel, serif);
    font-size: 0.85rem;
}

.wm-character-panel-selector {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--wm-border-color, rgba(0, 0, 0, 0.1));
    flex-shrink: 0;
}

.wm-character-panel-body {
    overflow-y: auto;
    padding: 0.6rem;
    flex: 1;
    min-height: 0;
}

.wm-character-panel-body .character-sheet {
    font-size: 0.8rem;
    max-width: none;
    padding: 0.5rem;
    border: none;
}

.wm-character-panel-body .character-sheet-header h2.character-sheet-name {
    font-size: 1.1rem;
}

.wm-character-panel-body .character-sheet-section-title {
    font-size: 0.85rem;
}

.wm-character-panel-body .character-sheet-score {
    padding: 0.25rem;
}

.wm-character-panel-body .character-sheet-score-modifier {
    font-size: 1rem;
}

.wm-character-panel-body .character-sheet-score-source {
    font-size: 0.75rem;
}

.wm-character-panel-body .character-sheet-score-label {
    font-size: 0.6rem;
}

.wm-character-panel-empty {
    text-align: center;
    color: var(--wm-text-muted);
    padding: 2rem 1rem;
    font-style: italic;
}

.wm-character-list-group-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wm-text-muted);
    padding: 0.5rem 0.4rem 0.2rem;
    font-weight: 600;
    font-family: var(--wm-font-heading, Cinzel, serif);
}

.wm-character-list-group-label:not(:first-child) {
    margin-top: 0.5rem;
    border-top: 1px solid var(--wm-border-color, rgba(0, 0, 0, 0.1));
    padding-top: 0.75rem;
}

.wm-character-list-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    color: var(--wm-text-primary);
}

.wm-character-list-item:hover {
    background: var(--wm-bg-primary);
    border-color: var(--wm-border-color, rgba(0, 0, 0, 0.1));
}

.wm-character-list-name {
    font-weight: 600;
    color: var(--wm-text-heading);
    font-family: var(--wm-font-heading, Cinzel, serif);
    font-size: 0.85rem;
}

.wm-character-list-meta {
    font-size: 0.75rem;
    color: var(--wm-text-muted);
}

@media (max-width: 768px) {
    .wm-character-panel {
        width: 100%;
        border-right: none;
        border-bottom: 2px solid var(--wm-accent-primary, var(--wm-gold-500));
    }
}

/* ── Asset Manager ─────────────────────────────────────────────── */

.wm-asset-manager {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1rem;
    min-height: 500px;
}

.wm-asset-sidebar {
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-border-color, rgba(0,0,0,0.1));
    border-radius: 6px;
    padding: 0.75rem;
}

.wm-asset-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    color: var(--wm-text-heading);
    font-family: var(--wm-font-heading);
}

.wm-asset-folder-create {
    margin-bottom: 0.5rem;
}

.wm-asset-folder-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wm-asset-folder-list li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    color: var(--wm-text-primary);
    font-size: 0.9rem;
}

.wm-asset-folder-list li:hover {
    background: var(--wm-bg-hover, rgba(0,0,0,0.05));
}

.wm-asset-folder-list li.active {
    background: color-mix(in srgb, var(--wm-accent-primary) 15%, transparent);
    color: var(--wm-accent-primary);
    font-weight: 600;
}

.wm-asset-folder-delete {
    margin-left: auto;
    padding: 0.1rem 0.3rem;
    font-size: 0.7rem;
    color: var(--wm-text-muted);
    opacity: 0;
    transition: opacity 0.15s;
}

.wm-asset-folder-list li:hover .wm-asset-folder-delete {
    opacity: 1;
}

.wm-asset-content {
    min-width: 0;
}

.wm-asset-upload-area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-border-color, rgba(0,0,0,0.1));
    border-radius: 6px;
    margin-bottom: 1rem;
}

.wm-asset-upload-label {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: var(--wm-accent-primary);
    color: var(--wm-bg-primary);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}

.wm-asset-upload-label input[type="file"] {
    display: none;
}

.wm-asset-upload-label:hover {
    filter: brightness(1.1);
}

.wm-asset-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--wm-text-muted);
}

.wm-asset-category-header {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    font-size: 0.95rem;
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--wm-border-color, rgba(0,0,0,0.1));
}

.wm-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.wm-asset-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s;
}

.wm-asset-card:hover {
    border-color: var(--wm-accent-primary);
}

.wm-asset-card.selected {
    border-color: var(--wm-accent-primary);
    background: color-mix(in srgb, var(--wm-accent-primary) 10%, transparent);
}

.wm-asset-thumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 3px;
    background: var(--wm-bg-primary);
}

.wm-asset-color-swatch {
    width: 64px;
    height: 64px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wm-text-muted);
}

.wm-asset-no-preview {
    background: var(--wm-bg-surface);
    border: 1px dashed var(--wm-border-color, rgba(0,0,0,0.15));
}

.wm-asset-name {
    font-size: 0.7rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
    margin-top: 0.2rem;
    color: var(--wm-text-primary);
}

.wm-asset-details {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-border-color, rgba(0,0,0,0.1));
    border-radius: 6px;
}

/* Responsive */
@media (max-width: 768px) {
    .wm-asset-manager {
        grid-template-columns: 1fr;
    }

    .wm-asset-sidebar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .wm-asset-folder-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .wm-asset-grid {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    }
}

/* ═══════════════════════════════════════════════════════════════
   World Map Editor
   ═══════════════════════════════════════════════════════════════ */

.wm-worldmap-editor {
    display: grid;
    grid-template-areas:
        "toolbar toolbar toolbar"
        "sidebar canvas properties"
        "status status status";
    grid-template-columns: 220px 1fr 0;
    grid-template-rows: auto 1fr auto;
    height: calc(100vh - 80px);
    gap: 0;
    margin: -1.5rem;
}

.wm-worldmap-editor:has(.wm-worldmap-properties) {
    grid-template-columns: 220px 1fr 260px;
}

.wm-worldmap-toolbar {
    grid-area: toolbar;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--wm-bg-surface);
    border-bottom: 2px solid var(--wm-border);
    flex-wrap: wrap;
    min-height: 48px;
}

.wm-worldmap-toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.wm-worldmap-toolbar-separator {
    width: 1px;
    height: 24px;
    background: var(--wm-border);
    margin: 0 0.25rem;
}

.wm-worldmap-title {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    font-size: 0.9rem;
    margin-left: 0.25rem;
}

.wm-worldmap-toolbar .btn-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--wm-text-primary);
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.15s, border-color 0.15s;
    position: relative;
}

.wm-worldmap-toolbar .btn-tool:hover {
    background: var(--wm-bg-hover);
    border-color: var(--wm-border);
}

.wm-worldmap-toolbar .btn-tool.active {
    background: var(--wm-accent-primary);
    color: var(--wm-bg-surface);
    border-color: var(--wm-accent-primary);
}

.wm-worldmap-toolbar .btn-tool:focus-visible {
    outline: 2px solid var(--wm-focus-ring);
    outline-offset: 2px;
}

.wm-worldmap-dirty-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wm-gold);
}

.wm-worldmap-body {
    display: contents;
}

.wm-worldmap-sidebar {
    grid-area: sidebar;
    background: var(--wm-bg-surface);
    border-right: 1px solid var(--wm-border);
    overflow-y: auto;
    padding: 0.5rem;
}

.wm-worldmap-sidebar-heading {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0.75rem 0 0.25rem;
    padding: 0 0.25rem;
}

.wm-worldmap-feature-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.wm-worldmap-palette-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 56px;
    padding: 4px 2px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--wm-text-primary);
    cursor: pointer;
    font-size: 0.65rem;
    transition: background-color 0.15s, border-color 0.15s;
}

.wm-worldmap-palette-item i {
    font-size: 1.1rem;
}

.wm-worldmap-palette-item:hover {
    background: var(--wm-bg-hover);
    border-color: var(--wm-border);
}

.wm-worldmap-palette-item.active {
    background: var(--wm-accent-primary);
    color: var(--wm-bg-surface);
    border-color: var(--wm-accent-primary);
}

.wm-worldmap-layer-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wm-worldmap-layer-item {
    display: flex;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
}

.wm-worldmap-layer-item.active {
    background: var(--wm-bg-hover);
}

.wm-worldmap-layer-select {
    flex: 1;
    background: none;
    border: none;
    color: var(--wm-text-primary);
    padding: 0.35rem 0.5rem;
    text-align: left;
    font-size: 0.8rem;
    cursor: pointer;
}

.wm-worldmap-layer-select:hover {
    background: var(--wm-bg-hover);
}

.wm-worldmap-layer-toggle {
    background: none;
    border: none;
    color: var(--wm-text-secondary);
    padding: 0.35rem;
    cursor: pointer;
    font-size: 0.8rem;
}

.wm-worldmap-layer-toggle:hover {
    color: var(--wm-text-primary);
}

.wm-worldmap-canvas-container {
    grid-area: canvas;
    overflow: hidden;
    position: relative;
    background: var(--wm-bg-primary);
}

.wm-worldmap-leaflet {
    width: 100%;
    height: 100%;
}

/* Override Leaflet tile/background colors for dark mode */
.wm-worldmap-leaflet {
    background: var(--wm-bg-primary) !important;
}

.wm-worldmap-properties {
    grid-area: properties;
    background: var(--wm-bg-surface);
    border-left: 1px solid var(--wm-border);
    overflow-y: auto;
    padding: 0.5rem;
}

.wm-worldmap-status {
    grid-area: status;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--wm-bg-surface);
    border-top: 1px solid var(--wm-border);
    font-size: 0.75rem;
    color: var(--wm-text-secondary);
}

/* Leaflet marker styling */
.wm-worldmap-marker {
    background: none !important;
    border: none !important;
}

.wm-worldmap-marker-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    transition: transform 0.1s;
}

.wm-worldmap-marker-label {
    text-align: center;
    font-family: var(--wm-font-heading);
    font-size: 0.65rem;
    color: var(--wm-text-heading);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    margin-top: -2px;
}

.wm-worldmap-marker-selected .wm-worldmap-marker-inner {
    transform: scale(1.2);
    filter: drop-shadow(0 0 6px var(--wm-accent-primary)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Label markers */
.wm-worldmap-label {
    background: none !important;
    border: none !important;
}

.wm-worldmap-label-text {
    font-family: var(--wm-font-heading);
    color: var(--wm-text-heading);
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Biome area swatches */
.wm-biome-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid var(--wm-border);
}

/* Dark mode overrides */
[data-bs-theme="dark"] .wm-worldmap-marker-label {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

[data-bs-theme="dark"] .wm-worldmap-label-text {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* Responsive: collapse sidebar on narrow screens */
@media (max-width: 1024px) {
    .wm-worldmap-editor {
        grid-template-columns: 180px 1fr 0;
    }
    .wm-worldmap-editor:has(.wm-worldmap-properties) {
        grid-template-columns: 180px 1fr 220px;
    }
}

@media (max-width: 768px) {
    .wm-worldmap-editor {
        grid-template-columns: 1fr;
        grid-template-areas:
            "toolbar"
            "canvas"
            "status";
    }
    .wm-worldmap-sidebar,
    .wm-worldmap-properties {
        display: none;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wm-worldmap-marker-inner {
        transition: none;
    }
    .wm-worldmap-toolbar .btn-tool {
        transition: none;
    }
    .wm-worldmap-palette-item {
        transition: none;
    }
}

/* Print: hide editor chrome */
@media print {
    .wm-worldmap-toolbar,
    .wm-worldmap-sidebar,
    .wm-worldmap-properties,
    .wm-worldmap-status {
        display: none !important;
    }
    .wm-worldmap-editor {
        grid-template-columns: 1fr;
        grid-template-areas: "canvas";
        grid-template-rows: 1fr;
        height: auto;
    }
}

/* ─── World Map Editor ─── */

.wm-map-editor {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--wm-bg-tertiary);
}

.wm-map-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--wm-bg-secondary);
    border-bottom: 1px solid var(--wm-border-color);
    flex-shrink: 0;
}

.wm-map-editor-toolbar .map-title {
    font-weight: 600;
    color: var(--wm-accent-primary);
}

.wm-map-editor-toolbar .toolbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wm-map-editor-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.wm-map-editor-tool-icons {
    width: 48px;
    background: var(--wm-bg-secondary);
    border-right: 1px solid var(--wm-border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.5rem;
    gap: 0.25rem;
    flex-shrink: 0;
}

.wm-map-editor-tool-icons button {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    background: var(--wm-bg-tertiary);
    color: var(--wm-text-secondary);
    transition: background-color 0.15s;
}

.wm-map-editor-tool-icons button:hover {
    background: var(--wm-bg-primary);
}

.wm-map-editor-tool-icons button.active {
    background: var(--wm-accent-primary);
    color: var(--wm-bg-primary);
}

.wm-map-editor-settings {
    width: 260px;
    background: var(--wm-bg-secondary);
    border-right: 1px solid var(--wm-border-color);
    padding: 1rem;
    overflow-y: auto;
    flex-shrink: 0;
}

.wm-map-editor-settings h3 {
    margin: 0 0 1rem 0;
    color: var(--wm-accent-primary);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--wm-border-color);
    padding-bottom: 0.5rem;
}

.wm-map-editor-canvas-viewport {
    flex: 1;
    background: var(--wm-bg-tertiary);
    overflow: hidden;
    position: relative;
    cursor: crosshair;
}

.wm-map-editor-canvas-viewport.tool-pan {
    cursor: grab;
}

.wm-map-editor-canvas-viewport.tool-pan:active {
    cursor: grabbing;
}

.wm-map-editor-canvas-viewport canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.wm-map-editor-layers {
    width: 220px;
    background: var(--wm-bg-secondary);
    border-left: 1px solid var(--wm-border-color);
    padding: 0.75rem;
    flex-shrink: 0;
}

.wm-map-editor-layers h3 {
    margin: 0 0 0.75rem 0;
    color: var(--wm-accent-primary);
    font-size: 0.9rem;
}

.wm-map-editor-layer-item {
    padding: 0.5rem;
    background: var(--wm-bg-tertiary);
    border-radius: 4px;
    border-left: 3px solid var(--wm-border-color);
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wm-map-editor-layer-item.active {
    border-left-color: var(--wm-accent-primary);
    background: var(--wm-bg-primary);
}

.wm-map-editor-statusbar {
    padding: 0.25rem 1rem;
    background: var(--wm-bg-secondary);
    border-top: 1px solid var(--wm-border-color);
    color: var(--wm-text-secondary);
    font-size: 0.7rem;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
}

.wm-map-editor-statusbar kbd {
    background: var(--wm-bg-tertiary);
    padding: 1px 5px;
    border-radius: 2px;
    color: var(--wm-text-primary);
    font-size: 0.65rem;
}

/* Texture palette */
.wm-texture-palette-search {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--wm-border-color);
    border-radius: 4px;
    background: var(--wm-bg-tertiary);
    color: var(--wm-text-primary);
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.wm-texture-category-header {
    font-size: 0.75rem;
    color: var(--wm-text-secondary);
    cursor: pointer;
    padding: 0.25rem 0;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.wm-texture-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 0.5rem;
}

.wm-texture-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 3px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}

.wm-texture-grid img:hover {
    border-color: var(--wm-text-secondary);
}

.wm-texture-grid img.selected {
    border-color: var(--wm-accent-primary);
}

/* Slider styling */
.wm-setting-row {
    margin-bottom: 0.75rem;
}

.wm-setting-row label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: var(--wm-text-secondary);
}

.wm-setting-row input[type="range"] {
    width: 100%;
    accent-color: var(--wm-accent-primary);
}

/* Mode toggle buttons */
.wm-mode-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 0.75rem;
}

.wm-mode-toggle button {
    flex: 1;
    padding: 0.375rem;
    border: 1px solid var(--wm-border-color);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.8rem;
    background: var(--wm-bg-tertiary);
    color: var(--wm-text-secondary);
}

.wm-mode-toggle button.active {
    background: var(--wm-accent-primary);
    color: var(--wm-bg-primary);
    border-color: var(--wm-accent-primary);
}