:root {
    --rf-bg-main: #0d0d0d;
    --rf-bg-surface: #111111;
    --rf-bg-card: #161616;
    --rf-border-subtle: #222222;
    --rf-border-light: #333333;
    /* Pure Forge Orange */
    --rf-orange-primary: #ff8c00;
    --rf-orange-hover: #ffa533;
    --rf-orange-dark: #2a1c00;
    --rf-orange-glow: rgba(255, 140, 0, 0.25);
    --rf-text-primary: #ffffff;
    --rf-text-secondary: #b0b0b0;
    --rf-text-muted: #777777;
    --rf-font-display: 'Cinzel', serif;
    --rf-font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Links in the forge orange (Bootstrap reads these for <a> and .btn-link) */
:root {
    --bs-link-color: var(--rf-orange-primary);
    --bs-link-color-rgb: 255, 140, 0;
    --bs-link-hover-color: var(--rf-orange-hover);
    --bs-link-hover-color-rgb: 255, 165, 51;
}

a, .btn-link {
    color: var(--rf-orange-primary);
    text-decoration-color: rgba(255, 140, 0, 0.45);
    text-underline-offset: 3px;
}

    a:hover, .btn-link:hover {
        color: var(--rf-orange-hover);
        text-decoration-color: var(--rf-orange-hover);
    }

    a:focus-visible, .btn-link:focus-visible {
        outline: 2px solid var(--rf-orange-primary);
        outline-offset: 2px;
        border-radius: 2px;
    }

.btn-link {
    --bs-btn-color: var(--rf-orange-primary);
    --bs-btn-hover-color: var(--rf-orange-hover);
    --bs-btn-active-color: var(--rf-orange-hover);
}

body {
    background-color: var(--rf-bg-main);
    color: var(--rf-text-secondary);
    font-family: var(--rf-font-body);
    margin: 0;
}

/* Typography & Headings */
h1, h2, h3, h4, h5, h6, .rf-page-title, .brand-title {
    font-family: var(--rf-font-display);
    color: var(--rf-orange-primary) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 900;
}

    /* Navigation focus outline reset */
    h1:focus, h2:focus, [tabindex="-1"]:focus {
        outline: none !important;
        box-shadow: none !important;
    }

/* Matching dark sidebar */
.sidebar {
    background-color: var(--rf-bg-surface) !important;
    background-image: none !important;
    border-right: 1px solid var(--rf-border-subtle) !important;
}

/* Top bar */
.top-row {
    background-color: var(--rf-bg-surface) !important;
    border-bottom: 1px solid var(--rf-border-subtle) !important;
    color: var(--rf-text-muted) !important;
}

    .top-row a {
        color: var(--rf-text-muted) !important;
        text-transform: uppercase;
        font-size: 0.85em;
        letter-spacing: 1px;
        font-weight: 700;
    }

        .top-row a:hover {
            color: var(--rf-orange-primary) !important;
        }

/* Feature-Item styled cards */
.rf-card {
    background-color: var(--rf-bg-card);
    border: 1px solid var(--rf-border-subtle);
    border-left: 4px solid var(--rf-orange-primary);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s ease;
}

    .rf-card:hover {
        background-color: #1a1500;
        border-color: var(--rf-orange-primary);
        border-left-color: var(--rf-orange-hover);
        box-shadow: 0 4px 20px var(--rf-orange-glow);
        transform: translateY(-2px);
    }

.rf-card-title {
    color: #ffffff !important;
    font-size: 1.1em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* Metadata grid */
.rf-meta-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    background: #111111;
    padding: 8px;
    border-radius: 6px;
    font-size: 0.85em;
    border: 1px solid var(--rf-border-subtle);
    margin: 8px 0;
}

    .rf-meta-row strong {
        color: var(--rf-orange-primary);
        text-transform: uppercase;
        font-size: 0.75em;
        letter-spacing: 1px;
        display: block;
        margin-bottom: 8px;
    }

/* --- BADGES (Uniform Dimensions, High Contrast) --- */
.badge-edition-2024,
.badge-edition-2014,
.badge-srd,
.badge-homebrew,
.badge-visibility,
.rf-npc-badge-mine,
.rf-npc-badge-shared {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase;
    padding: 0 8px !important;
    min-height: 24px;
    border-radius: 4px !important;
    line-height: 1.2 !important;
    box-sizing: border-box;
}

/* Edition: 5.5e (2024) - Forge Amber */
.badge-edition-2024 {
    background: rgba(255, 140, 0, 0.16) !important;
    color: #ff9d26 !important;
    border: 1px solid rgba(255, 140, 0, 0.6) !important;
}

/* Edition: 5e (2014) - Iron Steel */
.badge-edition-2014 {
    background: rgba(140, 140, 140, 0.12) !important;
    color: #cfd4dc !important;
    border: 1px solid rgba(140, 140, 140, 0.45) !important;
}

/* Origin: SRD - Runecraft Emerald */
.badge-srd {
    background: rgba(46, 204, 113, 0.14) !important;
    color: #2ecc71 !important;
    border: 1px solid rgba(46, 204, 113, 0.5) !important;
}

/* Origin: Homebrew - Arcane Amethyst */
.badge-homebrew {
    background: rgba(171, 71, 188, 0.15) !important;
    color: #ce93d8 !important;
    border: 1px solid rgba(171, 71, 188, 0.55) !important;
}

/* NPC origin: written by the account (Forge Amber, filled) or shared by someone else (Arcane Amethyst, as Homebrew) */
.rf-npc-badge-mine {
    background: rgba(255, 140, 0, 0.24) !important;
    color: #ffb74d !important;
    border: 1px solid var(--rf-orange-primary) !important;
}

.rf-npc-badge-shared {
    background: rgba(171, 71, 188, 0.15) !important;
    color: #ce93d8 !important;
    border: 1px solid rgba(171, 71, 188, 0.55) !important;
}

/* Homebrew visibility (Private / With link) - Slate Blue */
.badge-visibility {
    background: rgba(79, 195, 247, 0.12) !important;
    color: #81d4fa !important;
    border: 1px solid rgba(79, 195, 247, 0.5) !important;
}

/* D&D Wizard styled buttons */
.btn-rf-orange {
    background: var(--rf-orange-primary) !important;
    color: #000000 !important;
    border: none !important;
    font-weight: 900 !important;
    cursor: pointer;
    border-radius: 6px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.85em;
    padding: 8px 16px;
    transition: background 0.2s ease, transform 0.1s ease;
}

    .btn-rf-orange:hover {
        background: var(--rf-orange-hover) !important;
        box-shadow: 0 0 10px var(--rf-orange-primary);
    }

    .btn-rf-orange:active {
        transform: scale(0.98);
    }

.btn-rf-outline {
    background: #161616 !important;
    color: var(--rf-text-muted) !important;
    border: 1px solid var(--rf-border-light) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85em;
    padding: 8px 16px;
    border-radius: 6px !important;
    transition: all 0.2s ease;
}

    .btn-rf-outline:hover {
        background: #222222 !important;
        color: #ffffff !important;
        border-color: #555555 !important;
    }

/* Dark fantasy modal */
.rf-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    animation: fadeIn 0.2s ease-in-out;
}

.rf-modal-dialog {
    background-color: var(--rf-bg-surface);
    border: 1px solid var(--rf-orange-primary);
    border-radius: 10px;
    width: 90%;
    max-width: 680px;
    box-shadow: 0 0 30px var(--rf-orange-glow);
    padding: 24px;
    color: var(--rf-text-primary);
    max-height: 90vh;
    overflow-y: auto;
}

.rf-form-label {
    font-size: 0.75em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--rf-orange-primary);
    margin-bottom: 8px;
    display: block;
}

/* Labels inside multi-column rows must never wrap, otherwise the controls below them misalign */
.rf-label-single-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Suggested characteristics tables (d6 / d8 / d10) */
.rf-dice-table {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;
}

    .rf-dice-table th {
        color: var(--rf-orange-primary);
        font-size: 0.75em;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: left;
        padding: 8px 8px;
        border-bottom: 1px solid var(--rf-border-light);
    }

    .rf-dice-table td {
        padding: 8px 8px;
        vertical-align: top;
        color: var(--rf-text-secondary);
        border-bottom: 1px solid var(--rf-border-subtle);
    }

        .rf-dice-table td:first-child {
            width: 2.5rem;
            color: var(--rf-text-primary);
            font-weight: 700;
            text-align: center;
        }

/* Starting equipment of classes and backgrounds (EquipmentLoadoutView): a quiet ledger in the style of the stat blocks.
   Kits (A/B/C) sit side by side; a line with a choice separates its options with a small "oppure" */
.rf-loadout {
    margin-bottom: 16px;
    padding: 16px 16px;
    border-radius: 6px;
    background-color: var(--rf-bg-main);
    border: 1px solid var(--rf-border-subtle);
}

.rf-loadout-title {
    margin: 0 0 8px;
    font-family: var(--rf-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--rf-orange-primary) !important;
}

.rf-loadout-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--rf-text-muted);
}

.rf-loadout-kits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 16px 24px;
}

.rf-loadout-kit-head {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--rf-border-light);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--rf-text-muted);
}

.rf-loadout-letter {
    color: var(--rf-orange-primary);
    font-weight: 700;
}

.rf-loadout-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.88rem;
    color: var(--rf-text-primary);
}

    .rf-loadout-list li {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px;
        padding: 8px 0;
        line-height: 1.35;
        border-bottom: 1px solid var(--rf-border-subtle);
    }

        .rf-loadout-list li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

/* Quantities and coins in a right-hand column, like the values of a ledger */
.rf-loadout-value {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--rf-text-secondary);
}

.rf-loadout-coins .rf-loadout-value {
    color: #ffd27a;
    font-weight: 600;
}

.rf-loadout-or {
    margin: 0 8px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
    opacity: 0.85;
}

a.rf-loadout-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 140, 0, 0.45);
    text-underline-offset: 3px;
}

    a.rf-loadout-link:hover {
        color: var(--rf-orange-hover);
        text-decoration-color: var(--rf-orange-hover);
    }

/* Spell names in the texts that link to the spell (GlossaryLinker) */
a.rf-spell-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 140, 0, 0.45);
    text-underline-offset: 3px;
}

    a.rf-spell-link:hover {
        color: var(--rf-orange-hover);
    }

/* Pills that cannot be selected because the maximum was reached */
.rf-pill-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.rf-form-control:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- STANDARD FORM CONTROLS (Input / Textarea) --- */
.rf-form-control {
    width: 100%;
    background-color: var(--rf-bg-surface);
    color: var(--rf-text-primary);
    border: 1px solid var(--rf-border-light);
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .rf-form-control:focus {
        border-color: var(--rf-orange-primary);
        box-shadow: 0 0 8px var(--rf-orange-glow);
        outline: none;
    }

/* --- RF CUSTOM SELECT (dark / orange, replaces the browser's native select) --- */
.rf-custom-select-wrapper {
    position: relative;
    width: 100%;
    user-select: none;
}

.rf-custom-select-trigger {
    width: 100%;
    background-color: var(--rf-bg-surface);
    border: 1px solid var(--rf-border-light);
    border-radius: 4px;
    padding: 8px 16px;
    color: var(--rf-text-primary);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .rf-custom-select-trigger:hover,
    .rf-custom-select-trigger.active {
        border-color: var(--rf-orange-primary);
        box-shadow: 0 0 8px var(--rf-orange-glow);
    }

.rf-select-arrow {
    display: inline-flex;
    color: var(--rf-orange-primary);
    font-size: .75rem;
    transition: transform 0.2s ease;
}

    .rf-select-arrow.open {
        transform: rotate(180deg);
    }

.rf-custom-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background-color: var(--rf-bg-main);
    border: 1px solid var(--rf-orange-primary);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.95);
    z-index: 1050;
    max-height: 256px;
    overflow-y: auto;
    box-sizing: border-box;
}

.rf-custom-select-option {
    padding: 8px 16px;
    color: var(--rf-text-secondary);
    font-size: 0.88rem;
    cursor: pointer;
    background-color: var(--rf-bg-main);
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .rf-custom-select-option:hover {
        background-color: rgba(255, 140, 0, 0.18);
        color: var(--rf-orange-primary);
    }

    .rf-custom-select-option.selected {
        background-color: var(--rf-orange-primary);
        color: #000000;
        font-weight: 800;
    }

/* Fallback for the remaining native select elements */
select.rf-form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8c00' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
    padding-right: 40px;
}

.rf-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.rf-checkbox {
    accent-color: var(--rf-orange-primary);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* --- Interactive Sheet Selector Pills --- */
.rf-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rf-pill-btn {
    background-color: var(--rf-bg-card);
    border: 1px solid var(--rf-border-light);
    color: var(--rf-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .rf-pill-btn:hover {
        color: #ffffff;
        border-color: var(--rf-orange-primary);
    }

    .rf-pill-btn.active {
        background-color: rgba(255, 140, 0, 0.16);
        border-color: var(--rf-orange-primary);
        color: var(--rf-orange-primary);
        box-shadow: 0 0 10px var(--rf-orange-glow);
    }

/* Modal fade animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --- MARKDOWN STYLES (Markdig) --- */
.rf-markdown-container {
    color: var(--rf-text-secondary);
    line-height: 1.6;
    font-size: 0.875rem;
    text-align: left;
}

    /* Headings inside Markdown */
    .rf-markdown-container h1,
    .rf-markdown-container h2,
    .rf-markdown-container h3,
    .rf-markdown-container h4,
    .rf-markdown-container h5,
    .rf-markdown-container h6 {
        font-family: var(--rf-font-display);
        color: var(--rf-orange-primary);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 800;
        margin-top: 24px;
        margin-bottom: 16px;
    }

    /* Smaller sizes, so titles do not grow too large */
    .rf-markdown-container h1 {
        font-size: 1.4rem;
    }

    .rf-markdown-container h2 {
        font-size: 1.2rem;
    }

    .rf-markdown-container h3 {
        font-size: 1.05rem;
    }
    /* Questo controlla i ### */
    .rf-markdown-container h4,
    .rf-markdown-container h5,
    .rf-markdown-container h6 {
        font-size: 0.9rem;
    }

    /* Backward compatibility for '\n' in legacy strings */
    .rf-markdown-container p {
        margin-bottom: 16px;
        white-space: pre-line;
    }

    /* Transform Markdown lists into Forge Cards */
    .rf-markdown-container ul {
        list-style-type: none;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 24px;
        margin-bottom: 24px;
    }

        .rf-markdown-container ul li {
            background-color: var(--rf-bg-card);
            border-left: 3px solid var(--rf-orange-primary);
            padding: 16px;
            border-radius: 0.25rem;
        }

    /* Markdown Tables (Dark Forge Aesthetic) */
    .rf-markdown-container table {
        width: 100%;
        margin-top: 24px;
        margin-bottom: 24px;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--rf-border-light);
        background-color: var(--rf-bg-surface);
    }

    .rf-markdown-container th {
        background-color: var(--rf-bg-main);
        color: var(--rf-orange-primary);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.7rem;
        padding: 16px 16px;
        border-bottom: 1px solid var(--rf-border-light);
    }

    .rf-markdown-container td {
        padding: 16px 16px;
        border-bottom: 1px solid var(--rf-border-subtle);
        color: var(--rf-text-secondary);
    }

    .rf-markdown-container tr:hover td {
        background-color: var(--rf-bg-card);
    }

    .rf-markdown-container tr:last-child td {
        border-bottom: none;
    }
/* --- ACCOUNT PAGE --- */
.min-w-0 {
    min-width: 0;
}

.rf-account-danger {
    border-color: rgba(220, 53, 69, 0.45) !important;
}

.rf-btn-danger {
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

.rf-btn-danger:hover {
    background: rgba(220, 53, 69, 0.12) !important;
}

/* The irreversible confirmation: solid red, never the orange of the ordinary actions */
.rf-btn-danger-solid {
    background-color: #dc3545;
    border: 1px solid #dc3545;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rf-btn-danger-solid:hover:not(:disabled) {
    background-color: #b02a37;
    border-color: #b02a37;
    color: #ffffff;
}

.rf-account-card {
    padding: 24px;
    border-radius: 6px;
    background-color: var(--rf-bg-surface);
    border: 1px solid var(--rf-border-light);
}

/* Card titles stand out from the field labels: larger, with a thin rule underneath */
.rf-account-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rf-border-subtle);
}

.rf-account-card-avatar {
    flex: 0 0 3rem;
    width: 3rem;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rf-orange-primary);
    color: #111;
    font-weight: 700;
    font-size: 1.3rem;
}

/* Label / value pairs: two columns on wide screens, stacked on phones */
.rf-account-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 24px;
    font-size: 0.875rem;
}

    .rf-account-facts dt {
        font-weight: 600;
        color: var(--rf-text-muted);
    }

    .rf-account-facts dd {
        margin: 0;
        color: var(--rf-text-primary);
    }

.rf-account-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 16px;
}

.rf-account-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    border-radius: 4px;
    background-color: var(--rf-bg-main);
    border: 1px solid var(--rf-border-subtle);
    text-decoration: none;
}

    .rf-account-stat:hover {
        border-color: var(--rf-orange-primary);
    }

.rf-account-stat-value {
    font-family: var(--rf-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rf-text-primary);
    line-height: 1.1;
}

.rf-account-stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rf-text-secondary);
}

@media (max-width: 576px) {
    .rf-account-facts {
        grid-template-columns: 1fr;
        gap: 8px;
    }

        .rf-account-facts dd {
            margin-bottom: 8px;
        }

    .rf-account-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Dashboard: one card per compendium module with its counts */
.rf-dashboard-card {
    color: inherit;
}

.rf-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

    .rf-dashboard-stats .rf-account-stat {
        padding: 8px 8px;
    }

/* Unconfirmed e-mail notice in the account page */
.rf-account-verify {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 16px;
    border-radius: 4px;
    border: 1px solid var(--rf-orange-primary);
    background-color: rgba(255, 140, 0, 0.08);
    color: var(--rf-text-primary);
}

/* Share box in Homebrew details */
.rf-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 16px;
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px dashed rgba(79, 195, 247, 0.5);
    color: var(--rf-text-secondary);
}

/* Password field with the show / hide button (PasswordInput). The browser's own eye (Edge) is hidden:
   it appears only while typing and vanishes after leaving the field or after autofill */
input::-ms-reveal,
input::-ms-clear {
    display: none;
}

.rf-password {
    position: relative;
}

    .rf-password .rf-form-control {
        padding-right: 48px;
    }

.rf-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0 4px 4px 0;
    color: var(--rf-text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}

    .rf-password-toggle:hover,
    .rf-password-toggle[aria-pressed="true"] {
        color: var(--rf-orange-primary);
    }

    .rf-password-toggle:focus-visible {
        outline: 2px solid var(--rf-orange-primary);
        outline-offset: -2px;
    }

.rf-password-invalid .rf-form-control,
.rf-password-invalid .rf-form-control:focus {
    border-color: #ffc107;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.25);
}

.rf-password-match:empty {
    display: none;
}

/* --- SPELLS --- */
.rf-spell-level-title {
    font-size: 1rem;
    border-bottom: 1px solid var(--rf-border-light);
    padding-bottom: 8px;
}

.rf-spell-flag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 8px;
    border-radius: 3px;
    border: 1px solid var(--rf-orange-primary);
    color: var(--rf-orange-primary);
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}

/* Stat block of the detail: label above value, two columns on wide screens */
.rf-spell-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
    margin: 0;
}

    .rf-spell-stats dt {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--rf-orange-primary);
        font-weight: 600;
    }

    .rf-spell-stats dd {
        margin: 0;
        color: var(--rf-text-primary);
        font-size: 0.9rem;
    }

@media (max-width: 576px) {
    .rf-spell-stats {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------
   Blazor boot UI (index.html): loading ring and error bar.
   Without these rules the ring is drawn as a black disc and the
   error bar is always visible, even when nothing went wrong.
   --------------------------------------------------------------- */
.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 128px;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--rf-border-light);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--rf-orange-primary);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-family: var(--rf-font-body);
    font-weight: 600;
    color: var(--rf-text-secondary);
    inset: calc(20vh + 48px) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "");
    }

/* Shown by Blazor only when an unhandled exception occurs */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    padding: 8px 48px 8px 24px;
    background: var(--rf-bg-card);
    color: var(--rf-text-primary);
    border-top: 2px solid var(--rf-orange-primary);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.9rem;
        top: 0.55rem;
        color: var(--rf-text-secondary);
    }

/* Fallback content of an <ErrorBoundary> */
.blazor-error-boundary {
    padding: 16px 24px;
    border: 1px solid #b32121;
    border-radius: 0.5rem;
    background: rgba(179, 33, 33, 0.15);
    color: var(--rf-text-primary);
}

    .blazor-error-boundary::after {
        content: "Si è verificato un errore. / An error has occurred.";
    }

/* ---------------------------------------------------------------
   Classes compendium
   --------------------------------------------------------------- */
.rf-class-dialog {
    max-width: 976px;
}

.rf-class-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: 0.8rem;
    color: var(--rf-text-primary);
}

    .rf-class-quick strong {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--rf-text-muted);
        margin-right: 8px;
    }

/* Hit die as a small die-shaped token */
.rf-class-hitdie {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 32px;
    padding: 0 8px;
    font-family: var(--rf-font-display);
    font-weight: 700;
    color: var(--rf-orange-primary);
    background-color: var(--rf-orange-dark);
    border: 1px solid var(--rf-orange-primary);
    border-radius: 6px;
}

.rf-class-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
    margin: 0;
    padding: 16px;
    border-radius: 6px;
    background-color: var(--rf-bg-main);
    border: 1px solid var(--rf-border-subtle);
}

    .rf-class-facts dt {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--rf-orange-primary);
        font-weight: 600;
    }

    .rf-class-facts dd {
        margin: 0;
        color: var(--rf-text-primary);
        font-size: 0.9rem;
    }

/* Progression table: scrolls sideways on narrow screens, compact cells, sticky level column */
.rf-class-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rf-border-subtle);
    border-radius: 6px;
}

    .rf-class-table-wrap table {
        margin: 0 !important;
        min-width: 640px;
        font-size: 0.82rem;
    }

    .rf-class-table-wrap th,
    .rf-class-table-wrap td {
        white-space: nowrap;
        padding: 8px 8px !important;
        text-align: center;
    }

        .rf-class-table-wrap th:nth-child(3),
        .rf-class-table-wrap td:nth-child(3) {
            white-space: normal;
            text-align: left;
            min-width: 224px;
        }

        .rf-class-table-wrap th:first-child,
        .rf-class-table-wrap td:first-child {
            position: sticky;
            left: 0;
            background-color: var(--rf-bg-card);
            font-weight: 700;
            color: var(--rf-orange-primary);
        }

/* Features: one block per feature with its level badge */
.rf-class-feature-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rf-class-feature {
    padding: 16px 16px;
    border-radius: 6px;
    background-color: var(--rf-bg-main);
    border: 1px solid var(--rf-border-subtle);
    border-left: 3px solid var(--rf-orange-primary);
}

.rf-class-feature-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.rf-class-feature-level {
    flex-shrink: 0;
    min-width: 40px;
    padding: 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    color: var(--rf-bg-main);
    background-color: var(--rf-orange-primary);
    border-radius: 4px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}

.rf-class-feature-name {
    margin: 0;
    font-size: 1rem;
    font-family: var(--rf-font-display);
    color: var(--rf-text-primary);
}

.rf-class-feature-body {
    font-size: 0.9rem;
}

.rf-feature-edit-row {
    padding: 16px 0;
    border-top: 1px solid var(--rf-border-subtle);
}

@media (max-width: 576px) {
    .rf-class-facts {
        grid-template-columns: 1fr;
    }
}

/* Equipment: tables for weapons and armor (as in the equipment chapter), tiles for everything else */
.rf-equipment-subtitle {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--rf-text-muted);
    font-weight: 700;
    margin: 16px 0 8px;
}

.rf-equipment-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rf-border-subtle);
    border-radius: 6px;
    background-color: var(--rf-bg-surface);
}

.rf-equipment-table {
    width: 100%;
    min-width: 624px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

    .rf-equipment-table th {
        text-align: left;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--rf-text-muted);
        font-weight: 700;
        padding: 8px 8px;
        border-bottom: 1px solid var(--rf-border-light);
        white-space: nowrap;
    }

    .rf-equipment-table td {
        padding: 8px 8px;
        border-bottom: 1px solid var(--rf-border-subtle);
        color: var(--rf-text-secondary);
        white-space: nowrap;
    }

    .rf-equipment-table tbody tr {
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

        .rf-equipment-table tbody tr:hover {
            background-color: var(--rf-bg-card);
        }

        .rf-equipment-table tbody tr:last-child td {
            border-bottom: none;
        }

    .rf-equipment-table .rf-col-name {
        color: var(--rf-text-primary);
        font-weight: 600;
    }

    .rf-equipment-table .rf-col-wide {
        white-space: normal;
        min-width: 176px;
    }

.rf-item-badges {
    display: inline-flex;
    gap: 8px;
    margin-left: 8px;
    vertical-align: middle;
}

    .rf-item-badges .badge {
        font-size: 0.62rem;
    }

.rf-equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
}

.rf-equipment-tile {
    padding: 8px 16px;
    border-radius: 6px;
    background-color: var(--rf-bg-surface);
    border: 1px solid var(--rf-border-subtle);
    border-left: 3px solid var(--rf-border-light);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .rf-equipment-tile:hover {
        background-color: var(--rf-bg-card);
        border-left-color: var(--rf-orange-primary);
    }

.rf-equipment-tile-name {
    color: var(--rf-text-primary);
    font-weight: 600;
    font-size: 0.92rem;
}

.rf-equipment-tile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: #ffd27a;
}

.rf-equipment-rules {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

    .rf-equipment-rules dt {
        color: var(--rf-text-primary);
        font-weight: 700;
        font-size: 0.9rem;
    }

    .rf-equipment-rules dd {
        margin: 0;
        color: var(--rf-text-secondary);
        font-size: 0.86rem;
        line-height: 1.5;
    }

.rf-spell-stats .rf-stat-wide {
    grid-column: 1 / -1;
}

/* ===== Rules glossary ===== */
.rf-glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
}

.rf-glossary-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 6px;
    background-color: var(--rf-bg-surface);
    border: 1px solid var(--rf-border-subtle);
    border-left: 3px solid var(--rf-border-light);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .rf-glossary-tile:hover, .rf-glossary-tile:focus-visible {
        background-color: var(--rf-bg-card);
        border-left-color: var(--rf-orange-primary);
        color: inherit;
    }

/* Families: a hint of colour on the edge of the tile */
.rf-glossary-condition { border-left-color: rgba(255, 140, 0, 0.55); }
.rf-glossary-action { border-left-color: rgba(110, 168, 254, 0.55); }
.rf-glossary-areaofeffect { border-left-color: rgba(171, 130, 255, 0.55); }
.rf-glossary-attitude { border-left-color: rgba(102, 204, 153, 0.55); }
.rf-glossary-hazard { border-left-color: rgba(230, 90, 90, 0.55); }

.rf-glossary-tile-name {
    color: var(--rf-text-primary);
    font-weight: 600;
    font-size: 0.92rem;
}

.rf-glossary-tile-summary {
    font-size: 0.8rem;
    color: var(--rf-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rf-glossary-chip {
    display: inline-block;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-card);
    font-size: 0.82rem;
    text-decoration: none;
    min-height: 24px;
    align-items: center;
}

    .rf-glossary-chip:hover {
        border-color: var(--rf-orange-primary);
    }

/* Rules terms linked in the descriptions (GlossaryLinker) and their tooltip (index.html) */
a.rf-term {
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-color: rgba(255, 140, 0, 0.75);
    text-underline-offset: 3px;
    cursor: help;
}

    a.rf-term:hover, a.rf-term:focus-visible {
        color: var(--rf-orange-hover);
    }

.rf-term-tip {
    position: fixed;
    z-index: 2000;
    max-width: min(22rem, calc(100vw - 16px));
    padding: 8px 8px;
    border-radius: 6px;
    background-color: var(--rf-bg-card);
    border: 1px solid var(--rf-orange-primary);
    color: var(--rf-text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
}

    .rf-term-tip.visible {
        opacity: 1;
        visibility: visible;
    }

.rf-term-tip-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 8px;
}

    .rf-term-tip-head strong {
        color: var(--rf-orange-primary);
    }

.rf-term-tip-label {
    font-style: italic;
    font-size: 0.75rem;
    color: var(--rf-text-muted);
}

/* Collapsible section headings (equipment categories) */
.rf-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    cursor: pointer;
}

    .rf-group-toggle:hover {
        color: var(--rf-orange-hover);
    }

.rf-group-chevron {
    display: inline-flex;
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
}

    .rf-group-chevron.open {
        transform: none;
    }

    .rf-group-chevron .rf-nav-icon {
        width: 0.8rem;
        height: 0.8rem;
    }

/* ===== Dashboard: welcome, sections of the app, how it works and house rules ===== */
.rf-home-intro {
    max-width: 60rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--rf-text-secondary);
}

    .rf-home-intro p {
        margin-bottom: 16px;
    }

        .rf-home-intro p:first-child {
            font-size: 1.08rem;
            color: var(--rf-text-primary);
        }

.rf-home-section-title {
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.rf-home-modules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 16px;
}

.rf-home-module {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 16px;
    border-radius: 6px;
    background-color: var(--rf-bg-surface);
    border: 1px solid var(--rf-border-subtle);
    border-left: 3px solid var(--rf-border-light);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .rf-home-module:hover, .rf-home-module:focus-visible {
        background-color: var(--rf-bg-card);
        border-left-color: var(--rf-orange-primary);
        color: inherit;
    }

.rf-home-module-icon {
    flex-shrink: 0;
    display: inline-flex;
    padding-top: 8px;
    color: var(--rf-orange-primary);
}

.rf-home-module-title {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--rf-text-primary);
}

.rf-home-module-text {
    display: block;
    margin-top: 8px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--rf-text-secondary);
}

.rf-home-points {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 0.875rem;
}

    .rf-home-points dt {
        font-weight: 600;
        color: var(--rf-text-primary);
    }

    .rf-home-points dd {
        margin: 8px 0 0;
        line-height: 1.5;
        color: var(--rf-text-secondary);
    }

/* Account: Base content per section and edition */
.rf-account-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}

    .rf-account-table th {
        padding: 0 0 8px;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--rf-text-muted);
    }

    .rf-account-table td {
        padding: 8px 0;
        border-top: 1px solid var(--rf-border-subtle);
        color: var(--rf-text-primary);
    }

    .rf-account-table .rf-num {
        width: 5.5rem;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .rf-account-table td.rf-num {
        font-family: var(--rf-font-display);
        font-weight: 700;
        font-size: 1.05rem;
    }

/* ===== Phones and narrow cards ===== */
/* Card headers: when the name and the badges do not fit on one line, the badges move below the name */
.rf-card .d-flex.justify-content-between.align-items-start {
    flex-wrap: wrap;
}

.rf-card-title {
    overflow-wrap: anywhere;
}

@media (max-width: 576px) {
    /* Tables in descriptions scroll inside their own box instead of widening the page or the dialog */
    .rf-markdown-container table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .rf-modal-dialog {
        width: calc(100% - 16px);
        max-height: 92vh;
        padding: 16px;
    }
}

/* ===== Character creation wizard (ported from the Obsidian "Hero Generator") ===== */
.rf-wizard {
    max-width: 864px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 12px;
    background-color: var(--rf-bg-main);
    border: 1px solid var(--rf-orange-primary);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

.rf-wizard-header {
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--rf-orange-primary);
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}

.rf-wizard-steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.rf-wizard-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: #222;
    border: 1px solid #444;
    transition: all 0.3s;
}

    .rf-wizard-dot.done {
        background: var(--rf-orange-dark);
        border-color: var(--rf-orange-primary);
    }

    .rf-wizard-dot.active {
        background: var(--rf-orange-primary);
        border-color: #fff;
        box-shadow: 0 0 10px var(--rf-orange-primary);
    }

.rf-wizard-step-title {
    margin-bottom: 24px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--rf-text-muted);
}

.rf-wizard-section {
    animation: rf-wizard-in 0.35s ease-in-out;
}

@keyframes rf-wizard-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.rf-wizard-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.rf-wizard-label {
    flex: 0 0 170px;
    padding-top: 16px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #8a8a8a;
}

.rf-wizard-field {
    flex: 1;
    min-width: 0;
}

.rf-wizard-input {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 6px;
    background-color: var(--rf-bg-card);
    border: 1px solid var(--rf-border-light);
    color: #fff;
    font-size: 15px;
    outline: none;
}

    .rf-wizard-input:focus {
        border-color: var(--rf-orange-primary);
    }

.rf-wizard-level {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 48px;
}

.rf-wizard-range {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    margin: 0;
    border-radius: 3px;
    background: #222;
    outline: none;
    cursor: pointer;
}

    .rf-wizard-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--rf-orange-primary);
        border: 2px solid var(--rf-bg-main);
        box-shadow: 0 0 5px rgba(255, 140, 0, 0.5);
        transition: transform 0.1s;
    }

        .rf-wizard-range::-webkit-slider-thumb:hover {
            transform: scale(1.15);
        }

    .rf-wizard-range::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--rf-orange-primary);
        border: 2px solid var(--rf-bg-main);
    }

.rf-wizard-level-value {
    min-width: 32px;
    text-align: right;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--rf-orange-primary);
}

/* Arrow selector (ForgeSelector): ‹ value › , the value opens the full list */
.rf-forge-selector {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-height: 48px;
}

.rf-forge-selector-btn {
    flex-shrink: 0;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #1a1a1a;
    border: 1px solid var(--rf-border-light);
    color: var(--rf-orange-primary);
    transition: background 0.2s;
}

    .rf-forge-selector-btn:hover {
        background-color: #262626;
    }

    .rf-forge-selector-btn:disabled {
        opacity: 0.35;
    }

    .rf-forge-selector-btn .rf-icon {
        width: 16px;
        height: 16px;
        vertical-align: 0;
    }

.rf-forge-selector-display {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 6px;
    background: var(--rf-bg-card);
    border: 1px solid #222;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

    .rf-forge-selector-display:hover {
        border-color: var(--rf-border-light);
    }

.rf-forge-selector-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 56px;
    right: 56px;
    z-index: 20;
    max-height: 280px;
    overflow-y: auto;
    border-radius: 6px;
    background: var(--rf-bg-surface);
    border: 1px solid var(--rf-orange-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.rf-forge-selector-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 8px 16px;
    border: 0;
    background: none;
    color: var(--rf-text-secondary);
    text-align: left;
    font-size: 0.88rem;
}

    .rf-forge-selector-option:hover:not(:disabled), .rf-forge-selector-option.selected {
        background: var(--rf-orange-dark);
        color: #fff;
    }

    .rf-forge-selector-option small {
        font-size: .75rem;
        color: var(--rf-text-muted);
    }

    .rf-forge-selector-option.disabled {
        cursor: not-allowed;
        color: var(--rf-text-muted);
    }

        .rf-forge-selector-option.disabled small {
            color: #ffaa00;
        }

/* Information panels and blocks */
.rf-wizard-panel {
    margin-top: 16px;
    padding: 16px;
    border-radius: 8px;
    background: var(--rf-bg-surface);
    border: 1px solid #222;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.rf-wizard-block-title {
    margin: 16px 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rf-border-light);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
}

    .rf-wizard-block-title:first-child {
        margin-top: 0;
    }

.rf-wizard-text {
    margin-bottom: 16px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--rf-text-secondary);
}

.rf-wizard-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 6px;
    background: var(--rf-bg-card);
    border: 1px solid #222;
    font-size: 0.85rem;
    color: #fff;
}

    .rf-wizard-meta strong {
        display: block;
        margin-bottom: 8px;
        font-size: 0.7rem;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--rf-orange-primary);
    }

.rf-wizard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.rf-wizard-pill {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    background: #1d1d1d;
    border: 1px solid var(--rf-border-light);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

button.rf-wizard-pill {
    cursor: pointer;
}

    button.rf-wizard-pill.selected {
        background: var(--rf-orange-dark);
        border-color: var(--rf-orange-primary);
        color: var(--rf-orange-hover);
    }

    button.rf-wizard-pill:disabled:not(.selected) {
        opacity: 0.45;
    }

    .rf-wizard-pill.locked {
        border-style: dashed;
        color: var(--rf-text-muted);
    }

.rf-wizard-feature {
    margin-bottom: 8px;
    padding: 16px;
    border-radius: 8px;
    background: var(--rf-bg-card);
    border: 1px solid #222;
    border-left: 4px solid var(--rf-orange-primary);
}

button.rf-wizard-feature {
    display: block;
    width: 100%;
    text-align: left;
    color: inherit;
    border-left-color: #444;
    transition: all 0.2s ease;
}

    button.rf-wizard-feature:hover {
        background: #1c1c1c;
        border-color: #555;
        border-left-color: #ffaa00;
    }

    button.rf-wizard-feature.selected {
        background: var(--rf-orange-dark);
        border-color: var(--rf-orange-primary);
        border-left-color: var(--rf-orange-primary);
        box-shadow: inset 0 0 10px rgba(255, 140, 0, 0.1);
    }

.rf-wizard-feature-title {
    margin-bottom: 8px;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
}

.rf-wizard-feature-desc {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #aaa;
}

.rf-wizard-counter {
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--rf-orange-primary);
}

.rf-wizard-spell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 8px;
}

/* Ability score cards */
.rf-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.rf-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    border-radius: 8px;
    background: var(--rf-bg-surface);
    border: 1px solid #222;
}

.rf-stat-card-label {
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a8a8a;
}

.rf-stat-card-value {
    min-height: 40px;
    margin-bottom: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--rf-orange-primary);
}

.rf-stat-card-mod {
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--rf-text-secondary);
}

.rf-stat-card-btn {
    width: 90%;
    padding: 8px 0;
    border-radius: 4px;
    background: #222;
    border: 1px solid var(--rf-border-light);
    color: var(--rf-orange-primary);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

    .rf-stat-card-btn:disabled {
        opacity: 0.35;
    }

.rf-pb-controls {
    display: flex;
    gap: 8px;
    width: 100%;
    padding: 0 8px;
}

.rf-pb-btn {
    flex: 1;
    min-height: 40px;
    border-radius: 4px;
    background: #1a1a1a;
    border: 1px solid var(--rf-border-light);
    color: var(--rf-orange-primary);
    font-size: 1.4rem;
    font-weight: 900;
}

    .rf-pb-btn:hover:not(:disabled) {
        background: var(--rf-orange-primary);
        border-color: var(--rf-orange-primary);
        color: #000;
    }

    .rf-pb-btn:disabled {
        opacity: 0.3;
    }

.rf-pb-points {
    margin: 0 0 16px;
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--rf-bg-surface);
    border: 1px solid #222;
    border-left: 3px solid var(--rf-orange-primary);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
}

/* Dice: rolling arena (4d6, lowest dropped) and the pool of results to assign */
.rf-roll-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 8px;
    background: var(--rf-bg-surface);
    border: 1px solid #222;
}

.rf-roll-arena {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.rf-roll-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 8px;
    border-radius: 8px;
    background: var(--rf-bg-card);
    border: 1px solid #282828;
    animation: rf-wizard-in 0.3s ease;
}

.rf-die {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #222;
    border: 1px solid #444;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
    transition: all 0.2s;
}

    .rf-die.rolling {
        animation: rf-die-shake 0.12s infinite alternate;
        border-color: var(--rf-orange-primary);
        background: #1a1100;
        color: var(--rf-orange-primary);
    }

    .rf-die.dropped {
        opacity: 0.25;
        text-decoration: line-through;
        transform: scale(0.85);
        border-color: var(--rf-border-light);
        background: var(--rf-bg-surface);
        color: #888;
    }

    .rf-die.kept {
        border-color: #ffaa00;
        background: var(--rf-orange-dark);
        color: #ffaa00;
        box-shadow: 0 0 10px rgba(255, 140, 0, 0.2);
    }

.rf-roll-sum {
    min-width: 48px;
    margin-left: auto;
    padding-left: 16px;
    border-left: 2px solid var(--rf-border-light);
    text-align: right;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--rf-orange-primary);
}

@keyframes rf-die-shake {
    0% { transform: rotate(-10deg) scale(0.95); }
    100% { transform: rotate(10deg) scale(1.08); }
}

.rf-dice-pool {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.rf-pool-die {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #1a1500;
    border: 1px solid var(--rf-orange-primary);
    color: var(--rf-orange-primary);
    font-size: 1.2rem;
    font-weight: 900;
    transition: all 0.15s;
}

    .rf-pool-die:hover:not(.selected) {
        background: #2a2200;
        border-color: #ffaa00;
    }

    .rf-pool-die.selected {
        background: var(--rf-orange-primary);
        color: #000;
        box-shadow: 0 0 15px var(--rf-orange-primary);
        transform: scale(1.05);
    }

/* Footer: back / next */
.rf-wizard-footer {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

.rf-wizard-btn {
    flex: 1;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: var(--rf-orange-primary);
    color: #000;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

    .rf-wizard-btn:hover:not(:disabled) {
        background: var(--rf-orange-hover);
    }

    .rf-wizard-btn:active {
        transform: scale(0.98);
    }

    .rf-wizard-btn:disabled {
        opacity: 0.45;
    }

    .rf-wizard-btn.secondary {
        background: #2a2a2a;
        color: #aaa;
    }

        .rf-wizard-btn.secondary:hover {
            background: #333;
            color: #fff;
        }

.rf-wizard-error {
    margin-top: 16px;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid #dc3545;
    background: rgba(220, 53, 69, 0.1);
    color: #ff8a95;
    font-size: 0.88rem;
}

/* Character sheet (summary of the wizard and the saved character) */
.rf-sheet-head {
    text-align: center;
    margin-bottom: 16px;
}

.rf-sheet-name {
    font-family: var(--rf-font-display);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--rf-orange-primary);
    overflow-wrap: anywhere;
}

.rf-sheet-sub {
    color: var(--rf-text-secondary);
}

.rf-sheet-vitals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.rf-sheet-vital {
    padding: 8px 8px;
    border-radius: 8px;
    background: var(--rf-bg-surface);
    border: 1px solid #222;
    text-align: center;
}

.rf-sheet-vital-value {
    font-family: var(--rf-font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
}

.rf-sheet-vital-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
}

.rf-sheet-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
    color: #fff;
}

    .rf-sheet-list li {
        padding: 8px 0;
        border-bottom: 1px solid var(--rf-border-subtle);
    }

        .rf-sheet-list li:last-child {
            border-bottom: 0;
        }

.rf-character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 368px), 1fr));
    gap: 16px;
}

.rf-character-card {
    display: block;
    padding: 16px 16px;
    border-radius: 8px;
    background: var(--rf-bg-surface);
    border: 1px solid var(--rf-border-subtle);
    border-left: 3px solid var(--rf-orange-primary);
    color: inherit;
    text-decoration: none;
}

    .rf-character-card:hover {
        background: var(--rf-bg-card);
        color: inherit;
    }

.rf-character-card-name {
    font-family: var(--rf-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rf-orange-primary);
}

@media (max-width: 648px) {
    .rf-wizard {
        padding: 16px;
        border-radius: 8px;
    }

    .rf-wizard-header {
        font-size: 1.2rem;
    }

    .rf-wizard-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 16px;
    }

    .rf-wizard-label {
        flex: none;
        padding-top: 0;
    }

    .rf-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .rf-wizard-meta {
        grid-template-columns: 1fr;
    }

    .rf-wizard-footer {
        flex-direction: column-reverse;
        gap: 16px;
    }

    .rf-die {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .rf-forge-selector-menu {
        left: 0;
        right: 0;
    }
}

.rf-wizard-feature-level {
    margin-left: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--rf-orange-primary);
}

.rf-sheet-skills li {
    color: var(--rf-text-muted);
}

    .rf-sheet-skills li.rf-sheet-proficient {
        color: #fff;
        font-weight: 600;
    }

        .rf-sheet-skills li.rf-sheet-proficient::before {
            content: "";
            display: inline-block;
            width: 7px;
            height: 7px;
            margin-right: 8px;
            border-radius: 50%;
            background: var(--rf-orange-primary);
            vertical-align: middle;
        }

@media (min-width: 648px) {
    .rf-sheet-skills {
        columns: 2;
        column-gap: 32px;
    }

        .rf-sheet-skills li {
            break-inside: avoid;
        }
}

/* ===== Character wizard: levels, features, text areas ===== */
.rf-wizard-textarea {
    min-height: 0;
    padding: 8px 16px;
    resize: vertical;
    line-height: 1.45;
}

.rf-wizard-small {
    font-size: 0.82rem;
    color: var(--rf-text-secondary);
}

.rf-feature-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
}

    .rf-feature-toggle .rf-wizard-feature-title {
        margin-bottom: 0;
    }

.rf-feature-chevron {
    margin-left: auto;
    color: var(--rf-orange-primary);
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.2s;
}

    .rf-feature-chevron.open {
        transform: rotate(90deg);
    }

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

.rf-level-row {
    padding: 16px 16px;
    border-radius: 8px;
    background: var(--rf-bg-surface);
    border: 1px solid #222;
    border-left: 3px solid var(--rf-orange-primary);
}

.rf-level-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.rf-level-number {
    min-width: 88px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
}

.rf-level-class {
    font-weight: 700;
    color: #fff;
}

.rf-level-class-select {
    flex: 1;
    min-width: 200px;
}

.rf-level-body {
    margin-top: 8px;
}

.rf-level-hp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rf-level-improvement {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px dashed var(--rf-border-light);
}

/* ===== Character sheet ===== */
.rf-sheet {
    max-width: 1040px;
}

.rf-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.rf-sheet-save {
    min-width: 88px;
    color: var(--rf-text-muted);
}

.rf-sheet-todo {
    margin-bottom: 16px;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid #b97a00;
    background: rgba(255, 170, 0, 0.08);
    color: #ffcf73;
    font-size: 0.85rem;
}

button.rf-sheet-vital,
button.rf-stat-card {
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

    button.rf-sheet-vital:hover,
    button.rf-stat-card:hover {
        border-color: var(--rf-orange-primary);
    }

    .rf-sheet-vital-roll.active {
        border-color: var(--rf-orange-primary);
        background: var(--rf-orange-dark);
    }

.rf-sheet-hp {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 2fr;
    gap: 16px 16px;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 8px;
    background: var(--rf-bg-surface);
    border: 1px solid #222;
}

.rf-sheet-hp-current {
    font-family: var(--rf-font-display);
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
}

    .rf-sheet-hp-current.down {
        color: #ff6b6b;
    }

.rf-sheet-hp-max {
    font-size: 1.1rem;
    color: var(--rf-text-secondary);
}

.rf-sheet-hp-temp {
    margin-left: 8px;
    font-weight: 800;
    color: #6bc1ff;
}

.rf-sheet-hp-bar {
    height: 6px;
    margin-top: 8px;
    border-radius: 3px;
    background: #222;
    overflow: hidden;
}

    .rf-sheet-hp-bar > div {
        height: 100%;
        background: var(--rf-orange-primary);
        transition: width 0.3s;
    }

.rf-sheet-hp-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .rf-sheet-hp-controls .rf-wizard-input {
        width: 88px;
        min-height: 48px;
    }

    .rf-sheet-hp-controls .rf-wizard-btn {
        flex: 1;
        min-width: 80px;
        min-height: 48px;
    }

.rf-sheet-hp-dice,
.rf-sheet-death {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rf-sheet-box {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 4px;
    background: #1a1a1a;
    border: 1px solid var(--rf-border-light);
}

    .rf-sheet-box.on {
        background: var(--rf-orange-primary);
        border-color: var(--rf-orange-primary);
    }

    .rf-sheet-box.fail.on {
        background: #dc3545;
        border-color: #dc3545;
    }

.rf-sheet-conditions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

    .rf-sheet-conditions .rf-wizard-pill {
        padding: 0 8px;
        font-size: 0.78rem;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }

.rf-sheet-roller {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.rf-sheet-rollmode {
    display: flex;
    gap: 8px;
}

    .rf-sheet-rollmode .rf-wizard-pill {
        padding: 0 8px;
        font-size: 0.78rem;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }

.rf-sheet-lastroll {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--rf-orange-primary);
    background: #1a1100;
    color: #ffcf73;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.rf-sheet-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-bottom: 2px solid var(--rf-orange-primary);
}

.rf-sheet-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 0;
    border-radius: 6px 6px 0 0;
    background: #1a1a1a;
    color: var(--rf-text-secondary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

    .rf-sheet-tab.active {
        background: var(--rf-orange-primary);
        color: #000;
    }

        .rf-sheet-tab.active .rf-tab-count {
            background-color: #111;
            color: var(--rf-orange-primary);
        }

/* Second level inside a tab (the kinds of notes): smaller pills in sentence case */
.rf-subtabs .rf-pill-btn {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.rf-sheet-tab-body {
    padding-top: 16px;
}

.rf-sheet-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}

.rf-sheet-rolls li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    color: var(--rf-text-muted);
}

    .rf-sheet-rolls li:hover {
        color: var(--rf-orange-hover);
    }

    .rf-sheet-rolls li.rf-sheet-proficient {
        color: #fff;
        font-weight: 600;
    }

        .rf-sheet-rolls li.rf-sheet-proficient > span:first-child::before {
            content: "";
            display: inline-block;
            width: 7px;
            height: 7px;
            margin-right: 8px;
            border-radius: 50%;
            background: var(--rf-orange-primary);
            vertical-align: middle;
        }

    .rf-sheet-rolls li.rf-sheet-expert > span:first-child::before {
        box-shadow: 0 0 0 2px #1a1100, 0 0 0 3px var(--rf-orange-primary);
    }

.rf-sheet-attack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .rf-sheet-attack .fw-bold {
        flex: 1 1 140px;
    }

.rf-sheet-slots {
    margin-bottom: 16px;
}

.rf-sheet-slot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rf-border-subtle);
}

.rf-sheet-slot-level {
    min-width: 120px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}

.rf-sheet-inventory {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-sheet-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 8px 8px;
    border-radius: 6px;
    background: var(--rf-bg-surface);
    border: 1px solid #222;
}

.rf-sheet-item-name {
    flex: 1 1 200px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rf-sheet-item-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .rf-sheet-item-controls .rf-wizard-pill {
        padding: 0 8px;
        font-size: 0.78rem;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }

.rf-sheet-qty {
    width: 72px !important;
    min-height: 32px;
    padding: 0 8px;
}

.rf-sheet-coins {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
}

.rf-sheet-coin {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
}

    .rf-sheet-coin .rf-wizard-input {
        min-height: 40px;
    }

@media (max-width: 648px) {
    .rf-sheet-hp,
    .rf-sheet-columns {
        grid-template-columns: 1fr;
    }

    .rf-level-number {
        min-width: 0;
    }

    .rf-sheet-slot-level {
        min-width: 100%;
    }
}

.rf-forge-selector-display.placeholder {
    color: var(--rf-text-muted);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* A skill the character already has from another source: shown with the source, not selectable */
.rf-wizard-pill.known {
    border-style: dashed;
    border-color: #3d5a3d;
    background: rgba(76, 175, 80, 0.06);
    color: #a5d6a7;
    cursor: help;
}

    .rf-wizard-pill.known small {
        color: var(--rf-text-muted);
        font-weight: 500;
    }

/* Class summary in the wizard: hit die badge, primary ability and hit points, then a list of proficiencies */
.rf-class-summary {
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 8px;
    background: var(--rf-bg-card);
    border: 1px solid #222;
}

.rf-class-summary-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rf-border-subtle);
}

.rf-class-summary-die {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    border: 2px solid var(--rf-orange-primary);
    background: #1a1100;
    font-family: var(--rf-font-display);
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--rf-orange-primary);
}

.rf-class-summary-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
}

.rf-class-summary-value {
    font-weight: 700;
    color: #fff;
}

.rf-def-list {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 8px 16px;
    margin: 0 0 8px;
    font-size: 0.88rem;
}

    .rf-def-list dt {
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #8a8a8a;
        padding-top: 8px;
    }

    .rf-def-list dd {
        margin: 0;
        color: #fff;
    }

@media (max-width: 648px) {
    .rf-def-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

        .rf-def-list dd {
            margin-bottom: 8px;
        }
}

.rf-feature-toggle:focus {
    outline: none;
}

.rf-feature-toggle:focus-visible {
    outline: 1px solid var(--rf-orange-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Ability cards of the wizard: the base score (assigned), then the increases and the final score with its modifier */
.rf-stat-card-caption {
    margin: 0 0 8px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rf-text-muted);
}

.rf-stat-card-breakdown {
    width: 90%;
    min-height: 48px;
    margin-bottom: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--rf-border-subtle);
    text-align: center;
    font-size: 0.78rem;
    color: var(--rf-text-secondary);
}

.rf-stat-card-bonus {
    color: var(--rf-orange-primary);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.rf-stat-card-final strong {
    font-size: 1rem;
    color: #fff;
}

.rf-stat-card-modifier {
    display: inline-block;
    margin-left: 8px;
    padding: 0 8px;
    border-radius: 4px;
    background: #222;
    color: #fff;
    font-weight: 700;
}

.rf-wizard-draft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px dashed var(--rf-orange-primary);
    background: rgba(255, 140, 0, 0.06);
    font-size: 0.85rem;
    color: var(--rf-text-secondary);
}

/* Spell cards: the card selects the spell, the "i" button opens its details */
.rf-spell-card-wrap {
    position: relative;
}

.rf-spell-info {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--rf-orange-primary);
    background: #1a1100;
    color: var(--rf-orange-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    line-height: 1;
}

    .rf-spell-info:hover {
        background: var(--rf-orange-primary);
        color: #000;
    }

.rf-wizard-suggest-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

/* ===== Character sheet: card layout ===== */
.rf-sheet2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
}

.rf-card2 {
    background-color: var(--rf-bg-card);
    border: 1px solid var(--rf-border-subtle);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.rf-sheet2 > .rf-card2,
.rf-sheet-row .rf-card2 {
    margin-bottom: 0;
}

.rf-card2-head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--rf-font-display);
    color: var(--rf-text-primary);
    font-weight: 600;
    margin-bottom: 16px;
}

.rf-card2-head-accent {
    color: var(--rf-orange-primary);
    font-size: .9rem;
}

.rf-mini-label {
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rf-text-muted);
}

.rf-mini-title {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
    margin: 16px 0 8px;
}

.rf-mini-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-surface);
    color: var(--rf-text-primary);
    font-size: .85rem;
    line-height: 1;
}

    .rf-mini-btn:hover,
    .rf-mini-btn.on {
        border-color: var(--rf-orange-primary);
        color: var(--rf-orange-primary);
    }

.rf-rollable {
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    text-align: inherit;
}

    .rf-rollable:hover {
        color: var(--rf-orange-primary);
    }

/* Hero */

.rf-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rf-chip {
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-surface);
    color: var(--rf-text-primary);
    font-size: .8rem;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

    .rf-chip:hover,
    .rf-chip.open {
        border-color: var(--rf-orange-primary);
        color: var(--rf-orange-primary);
    }

.rf-chip-detail {
    margin-top: 8px;
    padding: 8px 16px;
    border-left: 3px solid var(--rf-orange-primary);
    background-color: var(--rf-bg-main);
    border-radius: 6px;
    font-size: .88rem;
}

.rf-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.rf-sheet-save {
    margin-left: auto;
    color: var(--rf-text-muted);
}

.rf-pulse {
    animation: rf-pulse 1.6s ease-in-out infinite;
}

@keyframes rf-pulse {
    50% {
        box-shadow: 0 0 14px var(--rf-orange-glow);
    }
}

/* Hit dice and defenses */
.rf-sheet-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 16px;
}

.rf-hitdice {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.rf-hitdice-box {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rf-hitdice-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rf-text-primary);
}

    .rf-hitdice-value span {
        font-size: 1rem;
        color: var(--rf-text-muted);
    }

    .rf-hitdice-value small {
        font-size: .85rem;
        color: var(--rf-orange-primary);
    }

.rf-hitdice-rests {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.rf-rest-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-surface);
    color: var(--rf-text-primary);
    font-size: .85rem;
}

    .rf-rest-btn.long {
        border-color: var(--rf-orange-primary);
        color: var(--rf-orange-primary);
    }

.rf-defenses {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.rf-defense {
    text-align: center;
    padding: 8px 8px;
    border-radius: 8px;
    background-color: var(--rf-bg-main);
}

    .rf-defense.rf-rollable {
        background-color: var(--rf-bg-main);
        text-align: center;
    }

.rf-defense-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--rf-text-primary);
}

/* HP and XP bars */
.rf-bar-row {
    margin-bottom: 16px;
}

.rf-bar-label {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--rf-text-primary);
}

.rf-bar {
    height: 12px;
    border-radius: 999px;
    background-color: var(--rf-bg-main);
    border: 1px solid var(--rf-border-subtle);
    overflow: hidden;
}

.rf-bar-fill {
    height: 100%;
    transition: width .3s ease;
}

    .rf-bar-fill.hp {
        background: linear-gradient(90deg, #8f1d1d, #d23b3b);
    }

    .rf-bar-fill.xp {
        background: linear-gradient(90deg, var(--rf-orange-dark), var(--rf-orange-primary));
    }

.rf-bar-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

    .rf-bar-controls .rf-wizard-input {
        width: 88px;
        flex: none;
    }

    .rf-bar-controls .rf-wizard-btn {
        flex: none;
        padding: 8px 16px;
    }

.rf-btn-damage {
    background-color: #a52a2a;
    border-color: #a52a2a;
}

.rf-btn-heal {
    background-color: #2e7d4f;
    border-color: #2e7d4f;
}

.rf-sheet-hp-temp {
    margin-left: 8px;
    color: #4aa3df;
    font-size: .85rem;
}

/* Abilities */
.rf-ability-grid {
    display: grid;
    grid-template-columns: repeat(var(--rf-abilities, 6), minmax(0, 1fr));
    gap: 8px;
}

.rf-ability-card {
    background-color: var(--rf-bg-card);
    border: 1px solid var(--rf-border-subtle);
    border-radius: 12px;
    padding: 8px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-ability-main {
    text-align: center;
    width: 100%;
}

.rf-ability-mod {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--rf-text-primary);
    line-height: 1.1;
}

.rf-ability-score {
    display: inline-block;
    min-width: 32px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--rf-border-light);
    font-size: .8rem;
    color: var(--rf-text-secondary);
}

.rf-ability-save {
    font-size: .75rem;
    color: var(--rf-text-muted);
    border-top: 1px solid var(--rf-border-subtle) !important;
    padding-top: 8px;
    text-align: center;
}

    .rf-ability-save.proficient {
        color: var(--rf-orange-primary);
        font-weight: 600;
    }

/* Conditions */
.rf-exhaustion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-main);
    margin-bottom: 8px;
    font-weight: 600;
}

    .rf-exhaustion.active {
        border-color: #c0392b;
        color: #e05a4a;
    }

.rf-condition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.rf-condition {
    padding: 8px 8px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-main);
    color: var(--rf-text-secondary);
    font-size: .82rem;
}

    .rf-condition.active {
        border-color: #c0392b;
        background-color: rgba(192, 57, 43, .18);
        color: var(--rf-text-primary);
    }

    .rf-condition.implied {
        border-style: dashed;
        border-color: #c0392b;
        color: #e05a4a;
        cursor: default;
    }

.rf-condition-notes {
    margin-top: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: var(--rf-bg-main);
    font-size: .85rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--rf-text-secondary);
}

.rf-roll-toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1050;
    max-width: calc(100vw - 32px);
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--rf-orange-primary);
    background-color: var(--rf-bg-card);
    color: var(--rf-text-primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    cursor: pointer;
}

.rf-sheet-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

/* Slots and spells */
.rf-slot-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rf-border-subtle);
}

    .rf-slot-row:last-child {
        border-bottom: none;
    }

.rf-slot-level {
    flex: 0 0 auto;
    min-width: 88px;
    font-size: .85rem;
    color: var(--rf-text-secondary);
}

.rf-slot-dots {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rf-slot-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--rf-orange-primary);
    background: none;
    padding: 0;
}

    .rf-slot-dot.full {
        background-color: var(--rf-orange-primary);
    }

.rf-slot-use {
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-orange-primary);
    background: none;
    color: var(--rf-orange-primary);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

    .rf-slot-use:disabled {
        opacity: .4;
    }

/* Inventory */
.rf-coin-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.rf-coin {
    text-align: center;
    padding: 8px 8px;
    border-radius: 8px;
    background-color: var(--rf-bg-main);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-coin-input {
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    background: none;
    border: none;
    color: var(--rf-text-primary);
}

    .rf-coin-input:focus {
        outline: 1px solid var(--rf-orange-primary);
        border-radius: 4px;
    }

.rf-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rf-border-subtle);
}

.rf-item-name {
    min-width: 0;
    font-size: .9rem;
}

.rf-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.rf-item-qty {
    min-width: 32px;
    text-align: center;
    font-size: .85rem;
}

.rf-item-equip {
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--rf-orange-primary);
    background: none;
    color: var(--rf-orange-primary);
    font-size: .75rem;
    text-transform: uppercase;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

    .rf-item-equip.on {
        border-color: var(--rf-border-light);
        color: var(--rf-text-secondary);
    }

@media (max-width: 768px) {
    .rf-sheet-row,
    .rf-sheet-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .rf-defenses {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rf-ability-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {

    .rf-coin-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rf-item-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

.rf-advancement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

    .rf-advancement .rf-wizard-pill {
        margin: 0;
        font-size: .78rem;
    }

/* ===== Sheet polish: aligned stat boxes, hit points panel, coins, resources ===== */
.rf-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.rf-defense {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px;
}

    .rf-defense .rf-mini-label {
        min-height: 2.5em;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.25;
    }

    .rf-defense .rf-defense-value {
        line-height: 1.1;
    }

/* Hit points */
.rf-hp {
    --rf-hp-color: #d6453a;
    --rf-hp-color-dark: #7d1f1a;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--rf-border-subtle);
    background: linear-gradient(180deg, rgba(214, 69, 58, .08), transparent 70%), var(--rf-bg-main);
    margin-bottom: 16px;
}

    .rf-hp.hurt {
        --rf-hp-color: #e0892e;
        --rf-hp-color-dark: #8a4a12;
    }

    .rf-hp.low,
    .rf-hp.down {
        --rf-hp-color: #ff4d3d;
        --rf-hp-color-dark: #6b0f0a;
        border-color: rgba(255, 77, 61, .45);
    }

.rf-hp-top {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.rf-hp-heart {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .12), transparent 60%), rgba(0, 0, 0, .25);
    border: 1px solid var(--rf-hp-color);
    box-shadow: 0 0 12px rgba(214, 69, 58, .25);
}

    .rf-hp-heart svg {
        width: 24px;
        height: 24px;
        fill: var(--rf-hp-color);
    }

.rf-hp.low .rf-hp-heart {
    animation: rf-heartbeat 1.2s ease-in-out infinite;
}

@keyframes rf-heartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.12); }
    30% { transform: scale(1); }
    45% { transform: scale(1.08); }
}

.rf-hp-numbers {
    flex: 1;
    min-width: 120px;
}

.rf-hp-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.rf-hp-current {
    font-family: var(--rf-font-display);
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 700;
    color: var(--rf-text-primary);
}

.rf-hp.down .rf-hp-current {
    color: var(--rf-hp-color);
}

.rf-hp-max {
    font-size: 1.05rem;
    color: var(--rf-text-muted);
    font-weight: 600;
}

.rf-hp-temp-chip {
    padding: 0 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: #7cc4f0;
    border: 1px solid rgba(74, 163, 223, .55);
    background-color: rgba(74, 163, 223, .12);
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}

.rf-hp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rf-hp-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    overflow: hidden;
    background-color: var(--rf-bg-card);
}

.rf-hp-step {
    width: 32px;
    border: none;
    background: none;
    color: var(--rf-text-secondary);
    font-weight: 700;
}

    .rf-hp-step:hover {
        color: var(--rf-orange-primary);
        background-color: rgba(255, 255, 255, .04);
    }

.rf-hp-amount {
    width: 48px;
    border: none;
    border-left: 1px solid var(--rf-border-subtle);
    border-right: 1px solid var(--rf-border-subtle);
    background: none;
    color: var(--rf-text-primary);
    text-align: center;
    font-weight: 700;
    -moz-appearance: textfield;
}

    .rf-hp-amount::-webkit-outer-spin-button,
    .rf-hp-amount::-webkit-inner-spin-button,
    .rf-coin-input::-webkit-outer-spin-button,
    .rf-coin-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .rf-hp-amount:focus {
        outline: none;
        background-color: rgba(255, 140, 0, .08);
    }

.rf-hp-buttons {
    display: inline-flex;
    gap: 8px;
}

.rf-hp-btn {
    --rf-btn: var(--rf-text-secondary);
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-btn);
    background-color: transparent;
    color: var(--rf-btn);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background-color .15s ease, color .15s ease;
}

    .rf-hp-btn.damage { --rf-btn: #e5594d; }
    .rf-hp-btn.heal { --rf-btn: #4fbf86; }
    .rf-hp-btn.temp { --rf-btn: #5fb2e6; }

    .rf-hp-btn:hover {
        background-color: var(--rf-btn);
        color: #111;
    }

.rf-hp-track {
    display: flex;
    height: 14px;
    margin-top: 16px;
    border-radius: 999px;
    overflow: hidden;
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, .06) calc(10% - 1px) 10%),
        rgba(0, 0, 0, .35);
    border: 1px solid var(--rf-border-subtle);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}

.rf-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rf-hp-color-dark), var(--rf-hp-color));
    box-shadow: 0 0 10px var(--rf-hp-color), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: width .35s ease;
}

.rf-hp-temp-fill {
    height: 100%;
    background: repeating-linear-gradient(135deg, #3d8fc4 0 6px, #5fb2e6 6px 12px);
    transition: width .35s ease;
}

/* Coins */
.rf-coin {
    align-items: center;
    gap: 8px;
    padding: 8px 8px;
    border: 1px solid var(--rf-border-subtle);
}

.rf-coin-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.rf-coin-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: #1a1a1a;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 55%), var(--rf-coin-color, #b87333);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
}

.rf-coin-cp { --rf-coin-color: #b87333; }
.rf-coin-sp { --rf-coin-color: #c0c4c8; }
.rf-coin-ep { --rf-coin-color: #a8b3a0; }
.rf-coin-gp { --rf-coin-color: #e0b13a; }
.rf-coin-pp { --rf-coin-color: #e4e8ee; }

.rf-coin-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

    .rf-coin-stepper .rf-coin-input {
        flex: 1;
        min-width: 0;
        max-width: 80px;
        -moz-appearance: textfield;
    }

    .rf-coin-stepper .rf-mini-btn {
        flex: none;
        min-width: 32px;
        height: 32px;
        padding: 0;
    }

/* Resources */
.rf-resource-name {
    flex: 0 0 auto;
    min-width: 128px;
    display: flex;
    flex-direction: column;
    font-size: .88rem;
    color: var(--rf-text-primary);
}

    .rf-resource-name small {
        font-size: .7rem;
        color: var(--rf-text-muted);
    }

.rf-resource-pool {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

    .rf-resource-pool .rf-coin-input {
        width: 56px;
        flex: none;
        -moz-appearance: textfield;
    }

.rf-resource-max {
    color: var(--rf-text-muted);
    font-size: .85rem;
    margin-right: 8px;
}

/* Collapsible card and small number inputs */
.rf-collapsible > summary {
    cursor: pointer;
    list-style: none;
    margin-bottom: 0;
}

    .rf-collapsible > summary::-webkit-details-marker {
        display: none;
    }

    .rf-collapsible > summary::after {
        content: "";
        width: 16px;
        height: 16px;
        flex: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff8c00' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
        margin-left: auto;
        transition: transform .2s ease;
    }

.rf-collapsible[open] > summary {
    margin-bottom: 16px;
}

    .rf-collapsible[open] > summary::after {
        transform: rotate(180deg);
    }

.rf-collapsible-hint {
    font-family: var(--rf-font-body);
    font-weight: 400;
    font-size: .75rem;
    color: var(--rf-text-muted);
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.rf-number-input {
    max-width: 144px;
}

.rf-wizard-notice {
    border-color: var(--rf-orange-primary) !important;
}

@media (max-width: 480px) {
    .rf-hp-actions {
        width: 100%;
    }

    .rf-hp-buttons {
        flex: 1;
    }

    .rf-hp-btn {
        flex: 1;
        padding: 0 8px;
    }

    .rf-resource-name {
        min-width: 0;
        flex: 1 1 100%;
    }

    .rf-slot-row {
        flex-wrap: wrap;
    }
}

.rf-collapsible > summary.rf-card2-head {
    justify-content: flex-start;
    align-items: center;
}

/* ===== Sheet: toolbar, identity, stats strip ===== */
.rf-sheet-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

    .rf-sheet-toolbar .rf-sheet-save {
        margin-right: auto;
        margin-left: 0;
        font-size: .78rem;
    }

.rf-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: none;
    color: var(--rf-text-muted);
    font-size: .78rem;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
    min-height: 32px;
}

    .rf-tool-btn:hover {
        color: var(--rf-text-primary);
        border-color: var(--rf-border-light);
    }

    .rf-tool-btn.danger:hover {
        color: #e5594d;
        border-color: rgba(229, 89, 77, .5);
    }

/* Bootstrap Icons in buttons and text: as tall as the text, on its middle */
.rf-icon {
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.125em;
}

.rf-stat-strip {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-card);
}

.rf-defense-small {
    font-size: 1.05rem !important;
    white-space: nowrap;
}

/* Death saves and the footer of the hit points panel */
.rf-death {
    margin-top: 16px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 77, 61, .5);
    background-color: rgba(0, 0, 0, .25);
}

    .rf-death.stable {
        border-color: rgba(79, 191, 134, .6);
    }

    .rf-death.dead {
        border-style: solid;
        border-color: #7d1f1a;
        opacity: .85;
    }

.rf-death-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.rf-death-state {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
}

.rf-death-body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.rf-death-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--rf-text-secondary);
}

    .rf-death-group > span {
        min-width: 72px;
    }

.rf-death-box {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--rf-border-light);
    background: none;
    padding: 0;
}

    .rf-death-box.success.on {
        background-color: #4fbf86;
        border-color: #4fbf86;
    }

    .rf-death-box.fail.on {
        background-color: #e5594d;
        border-color: #e5594d;
    }

.rf-death-roll {
    margin-left: auto;
    height: 32px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-orange-primary);
    background: none;
    color: var(--rf-orange-primary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

    .rf-death-roll:hover:not(:disabled) {
        background-color: var(--rf-orange-primary);
        color: #111;
    }

    .rf-death-roll:disabled {
        opacity: .4;
    }

.rf-hp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid var(--rf-border-subtle);
}

.rf-hp-footer-dice {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

    .rf-hp-footer-dice .rf-hitdice-value {
        font-size: 1.2rem;
    }

.rf-hp-footer-rests {
    display: flex;
    gap: 8px;
}

/* Number stepper and toggle in the forge style */
.rf-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-main);
    overflow: hidden;
}

.rf-stepper-btn {
    width: 40px;
    border: none;
    background: none;
    color: var(--rf-text-secondary);
    font-weight: 700;
    font-size: 1rem;
}

    .rf-stepper-btn:hover:not(:disabled) {
        color: var(--rf-orange-primary);
        background-color: rgba(255, 255, 255, .04);
    }

    .rf-stepper-btn:disabled {
        opacity: .35;
    }

.rf-stepper-input {
    width: 64px;
    border: none;
    border-left: 1px solid var(--rf-border-subtle);
    border-right: 1px solid var(--rf-border-subtle);
    background: none;
    color: var(--rf-text-primary);
    text-align: center;
    font-weight: 700;
    -moz-appearance: textfield;
}

    .rf-stepper-input::-webkit-outer-spin-button,
    .rf-stepper-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .rf-stepper-input:focus {
        outline: none;
        background-color: rgba(255, 140, 0, .08);
    }

.rf-bar-controls .rf-stepper {
    flex: none;
}

.rf-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px;
    border: none;
    background: none;
    color: var(--rf-text-secondary);
    font-size: .85rem;
}

.rf-toggle-track {
    position: relative;
    width: 32px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-main);
    transition: background-color .15s ease, border-color .15s ease;
}

.rf-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--rf-text-muted);
    transition: transform .15s ease, background-color .15s ease;
}

.rf-toggle.on {
    color: var(--rf-text-primary);
}

    .rf-toggle.on .rf-toggle-track {
        background-color: rgba(255, 140, 0, .2);
        border-color: var(--rf-orange-primary);
    }

    .rf-toggle.on .rf-toggle-thumb {
        transform: translateX(16px);
        background-color: var(--rf-orange-primary);
    }

/* Turn summary */

.rf-concentration {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid rgba(160, 120, 255, .45);
    background-color: rgba(160, 120, 255, .08);
    font-size: .85rem;
}

    .rf-concentration .rf-tool-btn {
        margin-left: auto;
    }

.rf-concentration-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #c3a8ff;
    box-shadow: 0 0 8px #c3a8ff;
    animation: rf-pulse 1.6s ease-in-out infinite;
}

.rf-slot-count {
    font-size: .78rem;
    color: var(--rf-text-muted);
    min-width: 48px;
    text-align: right;
}

/* Casting panel in the spell details */
.rf-cast {
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-main);
}

.rf-cast-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.rf-cast-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 8px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-card);
    color: var(--rf-text-primary);
    text-align: left;
}

    .rf-cast-option small {
        font-size: .72rem;
        color: var(--rf-text-muted);
    }

    .rf-cast-option:hover:not(:disabled) {
        border-color: var(--rf-orange-primary);
    }

    .rf-cast-option:disabled {
        opacity: .4;
    }

    .rf-cast-option.free {
        border-color: rgba(79, 191, 134, .6);
    }

    .rf-cast-option.primary {
        align-items: center;
        width: 100%;
        border-color: var(--rf-orange-primary);
        color: var(--rf-orange-primary);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

.rf-cast-warning {
    padding: 8px 8px;
    border-radius: 8px;
    border: 1px solid rgba(229, 89, 77, .5);
    color: #f08a80;
    font-size: .85rem;
}

    .rf-cast-warning.soft {
        border-color: rgba(160, 120, 255, .45);
        color: #c3a8ff;
        margin-bottom: 8px;
    }

/* Dice tray */
.rf-dice-tray {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1040;
    width: 304px;
    max-width: calc(100vw - 32px);
    padding: 16px 16px;
    border-radius: 14px;
    border: 1px solid var(--rf-border-light);
    background: radial-gradient(circle at 50% 0, rgba(255, 140, 0, .12), transparent 60%), var(--rf-bg-card);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    animation: rf-tray-in .2s ease-out;
}

    .rf-dice-tray.crit {
        border-color: var(--rf-orange-primary);
        box-shadow: 0 0 24px var(--rf-orange-glow), 0 10px 30px rgba(0, 0, 0, .5);
    }

    .rf-dice-tray.fumble {
        border-color: #a83a32;
    }

@keyframes rf-tray-in {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.rf-dice-tray-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.rf-dice-tray-label {
    font-family: var(--rf-font-display);
    color: var(--rf-text-primary);
    font-weight: 600;
    font-size: .95rem;
}

.rf-dice-tray-close {
    border: none;
    background: none;
    color: var(--rf-text-muted);
}

.rf-dice-tray-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rf-dice-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.rf-die3d {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .rf-die3d svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        fill: rgba(255, 140, 0, .14);
        stroke: var(--rf-orange-primary);
        stroke-width: 2.2;
        stroke-linejoin: round;
        filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5));
    }

.rf-die3d-value {
    position: relative;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--rf-text-primary);
}

.rf-die3d-type {
    position: absolute;
    bottom: -12px;
    font-size: .6rem;
    color: var(--rf-text-muted);
}

.rf-dice-tray.rolling .rf-die3d {
    animation: rf-die-tumble .32s linear infinite;
}

.rf-dice-tray.landed .rf-die3d {
    animation: rf-die-land .35s cubic-bezier(.3, 1.6, .5, 1);
}

@keyframes rf-die-tumble {
    0% { transform: translateY(0) rotate(0deg) scale(1); }
    25% { transform: translateY(-8px) rotate(90deg) scale(1.05); }
    50% { transform: translateY(0) rotate(180deg) scale(.95); }
    75% { transform: translateY(-5px) rotate(270deg) scale(1.03); }
    100% { transform: translateY(0) rotate(360deg) scale(1); }
}

@keyframes rf-die-land {
    0% { transform: scale(1.3) rotate(-15deg); }
    100% { transform: none; }
}

.rf-die3d.dropped {
    opacity: .35;
}

.rf-die3d.crit svg {
    fill: rgba(255, 140, 0, .45);
}

.rf-die3d.fumble svg {
    stroke: #c0392b;
    fill: rgba(192, 57, 43, .25);
}

.rf-dice-modifier {
    font-weight: 700;
    color: var(--rf-text-secondary);
}

.rf-dice-total {
    min-width: 56px;
    text-align: center;
    font-family: var(--rf-font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--rf-orange-primary);
    line-height: 1;
}

.rf-dice-note {
    margin-top: 8px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--rf-text-secondary);
}

.rf-dice-tray.crit .rf-dice-note {
    color: var(--rf-orange-primary);
}

.rf-dice-history {
    list-style: none;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--rf-border-subtle);
    font-size: .75rem;
    color: var(--rf-text-muted);
}

    .rf-dice-history li {
        display: flex;
        justify-content: space-between;
        gap: 8px;
    }

@media (max-width: 768px) {
    .rf-stat-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .rf-tool-btn span {
        display: none;
    }

    .rf-death-roll {
        margin-left: 0;
        width: 100%;
    }
}

/* ===== Sheet: name with inspiration, attacks, full turn summary ===== */

.rf-stat-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.rf-bar-controls {
    align-items: stretch;
}

    .rf-bar-controls .rf-wizard-btn {
        height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 0 16px;
        margin: 0;
    }

/* Attacks */
.rf-attacks {
    display: flex;
    flex-direction: column;
}

.rf-attack {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rf-border-subtle);
}

    .rf-attack:last-child {
        border-bottom: none;
    }

    .rf-attack.unarmed .rf-attack-name span {
        color: var(--rf-text-secondary);
    }

.rf-attack-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .rf-attack-name span {
        font-weight: 700;
        color: var(--rf-text-primary);
    }

    .rf-attack-name small {
        font-size: .72rem;
        color: var(--rf-text-muted);
    }

.rf-attack-rolls {
    display: flex;
    gap: 8px;
    flex: none;
}

.rf-attack-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-main);
    color: var(--rf-text-primary);
    line-height: 1.15;
    min-height: 32px;
}

    .rf-attack-btn:hover {
        border-color: var(--rf-orange-primary);
    }

    .rf-attack-btn.damage .rf-attack-btn-value {
        color: #f08a80;
    }

.rf-attack-btn-label {
    font-size: .6rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rf-text-muted);
}

.rf-attack-btn-value {
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Turn summary */

@media (max-width: 768px) {
    .rf-stat-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {

    .rf-attack {
        flex-direction: column;
        align-items: stretch;
    }

    .rf-attack-rolls {
        flex-wrap: wrap;
    }

    .rf-attack-btn {
        flex: 1;
    }
}

/* ===== Death notes, concentration save ===== */
.rf-death-note {
    margin-top: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: #f08a80;
}

.rf-vitals-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 140, 0, 0.35);
    background: rgba(255, 140, 0, 0.08);
    color: var(--rf-text-primary, #fff);
    font-size: .82rem;
}

.rf-concentration-save {
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid #c3a8ff;
    background: none;
    color: #c3a8ff;
    font-size: .75rem;
    font-weight: 700;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

    .rf-concentration-save:hover {
        background-color: rgba(160, 120, 255, .15);
    }

/* ===== Magic items ===== */
.rf-magic-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.rf-attune-count {
    font-size: .78rem;
    color: var(--rf-text-secondary);
}

    .rf-attune-count.full {
        color: var(--rf-orange-primary);
    }

.rf-item-row.magic .rf-item-name > div:first-child {
    color: #d9c6ff;
}

.rf-item-name {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-item-magic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 8px;
    font-size: .74rem;
    color: var(--rf-text-secondary);
}

.rf-rarity {
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-weight: 700;
    font-size: .68rem;
}

.rf-rarity-common { color: #c8c8c8; }
.rf-rarity-uncommon { color: #4fbf86; }
.rf-rarity-rare { color: #5fb2e6; }
.rf-rarity-veryrare { color: #c3a8ff; }
.rf-rarity-legendary { color: #ff9f40; }
.rf-rarity-artifact { color: #e5594d; }

.rf-item-warning {
    color: var(--rf-orange-primary);
    font-style: italic;
}

.rf-item-charges {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .rf-item-charges .rf-slot-dots {
        flex: none;
    }

    .rf-item-charges .rf-slot-dot {
        width: 14px;
        height: 14px;
    }

.rf-item-equip.drink {
    border-color: #4fbf86;
    color: #4fbf86;
}

.rf-magic-editor {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.rf-magic-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.rf-magic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0 16px;
}

.rf-magic-effect {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

    .rf-magic-effect select {
        flex: 1;
        min-width: 144px;
    }

/* ===== Spell changes and spellbook ===== */

.rf-book {
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
}

.rf-book-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    font-size: .85rem;
}

.rf-book-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.rf-book-counter {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
    margin: 8px 0 8px;
}

.rf-book-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 256px;
    overflow-y: auto;
}

.rf-book-pick {
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-main);
    color: var(--rf-text-primary);
    font-size: .8rem;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

    .rf-book-pick small {
        color: var(--rf-text-muted);
    }

    .rf-book-pick.on {
        border-color: var(--rf-orange-primary);
        color: var(--rf-orange-primary);
        background-color: rgba(255, 140, 0, .1);
    }

    .rf-book-pick:disabled {
        opacity: .4;
    }

.rf-book-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 8px;
    border-bottom: 1px solid var(--rf-border-subtle);
    font-size: .85rem;
}

    .rf-book-row.on {
        background-color: rgba(255, 140, 0, .06);
    }

.rf-book-name {
    flex: 1;
}

    .rf-book-name small {
        color: var(--rf-text-muted);
        margin-left: 8px;
    }

.rf-book-tag {
    font-size: .7rem;
    color: var(--rf-orange-primary);
}

.rf-book-add {
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid var(--rf-border-light);
    background: none;
    color: var(--rf-text-secondary);
    font-size: .75rem;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

    .rf-book-add:hover {
        border-color: var(--rf-orange-primary);
        color: var(--rf-orange-primary);
    }

/* ===== Sheet polish: even heights, roll mode, short rest, custom resources ===== */
.rf-stepper {
    height: 48px;
}

.rf-bar-controls .rf-wizard-btn {
    min-height: 48px;
    height: 48px;
}

.rf-hp-btn.critical {
    --rf-btn: #ff8a3d;
}

.rf-ability-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}

.rf-ability-head-title {
    font-family: var(--rf-font-display);
    font-weight: 600;
    color: var(--rf-text-primary);
}

.rf-segmented {
    display: inline-flex;
    align-items: stretch;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-main);
    overflow: hidden;
}

    .rf-segmented > button {
        border: none;
        border-left: 1px solid var(--rf-border-subtle);
        background: none;
        color: var(--rf-text-secondary);
        padding: 8px 16px;
        font-size: .78rem;
        font-weight: 600;
    }

        .rf-segmented > button:first-of-type {
            border-left: none;
        }

        .rf-segmented > button:hover {
            color: var(--rf-text-primary);
        }

        .rf-segmented > button.on {
            color: #111;
            background-color: var(--rf-orange-primary);
        }

            .rf-segmented > button.on.advantage {
                background-color: #4fbf86;
            }

            .rf-segmented > button.on.disadvantage {
                background-color: #e5594d;
            }

.rf-segmented-label {
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: .72rem;
    font-weight: 800;
    color: var(--rf-orange-primary);
    border-right: 1px solid var(--rf-border-subtle);
}

/* Short rest */
.rf-rest-hp {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    background-color: var(--rf-bg-main);
}

.rf-rest-dice {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.rf-rest-die {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
}

.rf-rest-log {
    list-style: none;
    margin: 0 0 8px;
    padding: 8px 8px;
    border-radius: 8px;
    border: 1px solid rgba(79, 191, 134, .4);
    color: #7fd9a8;
    font-size: .85rem;
}

.rf-rest-recovers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    font-size: .85rem;
    color: var(--rf-text-secondary);
}

/* Custom resources form */
.rf-res-form {
    margin-top: 16px;
    padding: 16px;
    border-radius: 10px;
    border: 1px dashed var(--rf-border-light);
    background-color: var(--rf-bg-main);
}

.rf-res-form-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
    margin-bottom: 8px;
}

.rf-res-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.rf-res-name {
    flex: 1 1 220px;
    width: auto;
}

.rf-res-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-res-reset {
    height: 48px;
}

.rf-res-add {
    height: 48px;
    padding: 0 16px;
}

/* ===== Sharing ===== */
.rf-share-people {
    margin-top: 16px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-main);
}

.rf-share-people-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.rf-share-people-title {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
}

.rf-share-people-count {
    min-width: 20px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background-color: rgba(255, 140, 0, .18);
    color: var(--rf-orange-primary);
    font-size: .72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rf-share-people-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .rf-share-people-list li {
        display: flex;
        align-items: center;
        gap: 8px;
    }

.rf-share-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rf-bg-card);
    border: 1px solid var(--rf-border-light);
    color: var(--rf-orange-primary);
    font-weight: 700;
    font-size: .8rem;
    flex: none;
}

.rf-share-email {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .88rem;
}

.rf-share-add {
    display: flex;
    gap: 8px;
}

    .rf-share-add .rf-wizard-input {
        flex: 1;
        width: auto;
    }

    .rf-share-add .btn {
        height: 48px;
        padding: 0 16px;
    }

.rf-share-mine {
    margin-top: 8px;
}

.rf-readonly {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid rgba(95, 178, 230, .5);
    background-color: rgba(95, 178, 230, .08);
    color: #9ccff0;
    font-size: .85rem;
}

.rf-characters-shared-title {
    margin-top: 32px;
    font-family: var(--rf-font-display);
    font-size: 1.15rem;
    color: var(--rf-orange-primary);
}

.rf-character-card.shared {
    border-style: dashed;
}

/* A card that opens a page: the name is the link, stretched over the whole card; actions sit above it */
.rf-card-linked {
    position: relative;
    cursor: pointer;
}

    .rf-card-linked .rf-card-link {
        text-decoration: none;
    }

        .rf-card-linked .rf-card-link::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
        }

    .rf-card-linked .rf-card-link:focus-visible {
        outline: none;
    }

    .rf-card-linked:has(.rf-card-link:focus-visible) {
        outline: 2px solid var(--rf-orange-primary);
        outline-offset: 2px;
    }

/* Quiet text button for secondary actions (take out, remove): no frame, muted until hovered */
.rf-ghost-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: none;
    color: var(--rf-text-muted);
    font-size: .75rem;
    line-height: 1;
}

    .rf-ghost-btn:hover,
    .rf-ghost-btn:focus-visible {
        color: var(--rf-orange-primary);
    }

    .rf-ghost-btn.danger:hover,
    .rf-ghost-btn.danger:focus-visible {
        color: #e5594d;
    }

.rf-character-card-owner {
    font-size: .78rem;
    color: #9ccff0;
}

@media (max-width: 480px) {
    .rf-share-add {
        flex-direction: column;
    }
}

/* --- MAGIC ITEMS --- */
/* Rarity colours of the flags, the usual treasure scale */
.rf-spell-flag.rf-rarity-common { border-color: #9aa0a6; color: #c4c8cc; }
.rf-spell-flag.rf-rarity-uncommon { border-color: #4caf50; color: #7bd27f; }
.rf-spell-flag.rf-rarity-rare { border-color: #4a90e2; color: #7fb4f0; }
.rf-spell-flag.rf-rarity-veryrare { border-color: #9c6ade; color: #c29cf0; }
.rf-spell-flag.rf-rarity-legendary { border-color: #e0a030; color: #f2c46a; }
.rf-spell-flag.rf-rarity-artifact { border-color: #d9534f; color: #f08a87; }

.rf-magic-variants {
    width: 100%;
    border-collapse: collapse;
}

    .rf-magic-variants td {
        padding: 8px 8px;
        border-bottom: 1px solid var(--rf-border-subtle);
        vertical-align: top;
    }

/* Compendium picker of the magic item editor */
.rf-magic-pick-list {
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--rf-border-light);
    border-radius: 4px;
    margin-top: 8px;
}

    .rf-magic-pick-list button {
        display: flex;
        width: 100%;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 8px;
        min-height: 48px;
        align-items: center;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--rf-border-subtle);
        color: var(--rf-text-primary, #fff);
        text-align: left;
    }

        .rf-magic-pick-list button:hover,
        .rf-magic-pick-list button:focus-visible {
            background: var(--rf-bg-card);
        }

        .rf-magic-pick-list button.rf-variant {
            padding-left: 24px;
        }

/* --- CAMPAIGNS --- */
.rf-role-badge { font-weight: 600; letter-spacing: 0.5px; }
.rf-role-badge.rf-role-master { background-color: var(--rf-orange-primary); color: #111; }
.rf-role-badge.rf-role-comaster { background-color: #b07a2a; color: #111; }
.rf-role-badge.rf-role-player { background-color: var(--rf-bg-card); color: var(--rf-text-secondary); border: 1px solid var(--rf-border-light); }

.rf-campaign-invitations { display: flex; flex-direction: column; gap: 8px; }

.rf-campaign-invitation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 16px;
    border: 1px solid var(--rf-orange-primary);
    border-radius: 6px;
    background-color: var(--rf-bg-surface);
}

.rf-campaign-pending { color: var(--rf-orange-primary); font-weight: 600; }

.rf-campaign-join { max-width: 560px; }

.rf-campaign-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rf-border-subtle);
    min-height: 48px;
}

    .rf-campaign-row:last-child { border-bottom: 0; }

.rf-campaign-row-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rf-campaign-role-select { width: auto; min-width: 9rem; }

.rf-tab-count {
    display: inline-block;
    padding: 0 8px;
    border-radius: 999px;
    background-color: var(--rf-orange-primary);
    color: #111;
    font-size: 0.7rem;
    font-weight: 700;
}

.rf-master-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--rf-orange-primary);
    border-radius: 6px;
    background-color: rgba(255, 140, 0, 0.08);
    color: var(--rf-text-secondary);
    font-size: 0.9rem;
}

.rf-campaign-issues {
    margin-top: 16px;
    padding: 16px 16px;
    border: 1px solid #dc3545;
    border-radius: 6px;
    background-color: rgba(220, 53, 69, 0.08);
    color: var(--rf-text-secondary);
    font-size: 0.9rem;
}

    .rf-campaign-issues strong { color: #f08a87; }

    .rf-campaign-issues li + li { margin-top: 8px; }

.rf-campaign-note {
    padding: 16px 0;
    border-bottom: 1px solid var(--rf-border-subtle);
}

    .rf-campaign-note:last-child { border-bottom: 0; }

.rf-campaign-note-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.rf-campaign-note-title { font-weight: 600; color: var(--rf-text-primary); }

.rf-campaign-note-meta { font-size: 0.8rem; color: var(--rf-text-muted); }

/* Portrait crop: a square frame on the picture, dragged and zoomed */
.rf-crop-dialog {
    max-width: 336px;
}

.rf-crop-frame {
    width: 256px;
    height: 256px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 8px;
    border: 1px solid var(--rf-orange-primary);
    background-color: var(--rf-bg-main);
    background-repeat: no-repeat;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

    .rf-crop-frame.dragging {
        cursor: grabbing;
    }

    .rf-crop-frame:focus-visible {
        outline: 2px solid var(--rf-orange-primary);
        outline-offset: 2px;
    }

.rf-crop-zoom {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

    .rf-crop-zoom input {
        flex: 1;
        accent-color: var(--rf-orange-primary);
    }

/* ===== Monsters: statblock ===== */
.rf-statblock {
    background: var(--rf-bg-main);
    border: 1px solid var(--rf-border-light);
    border-top: 3px solid var(--rf-orange-primary);
    border-bottom: 3px solid var(--rf-orange-primary);
    border-radius: 6px;
    padding: 16px 16px;
    color: var(--rf-text-secondary);
    font-size: 0.92rem;
    line-height: 1.45;
}

.rf-statblock-name {
    font-family: var(--rf-font-display);
    color: var(--rf-orange-primary);
    font-size: 1.35rem;
    margin: 0 0 8px;
}

.rf-statblock-subtitle {
    font-style: italic;
    color: var(--rf-text-secondary);
}

.rf-statblock-rule {
    height: 2px;
    margin: 8px 0;
    background: linear-gradient(90deg, var(--rf-orange-primary), transparent);
    opacity: 0.7;
}

.rf-statblock-line strong {
    color: var(--rf-orange-hover);
    font-weight: 600;
    margin-right: 8px;
}

.rf-statblock-abilities {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    text-align: center;
}

.rf-statblock-ability-name {
    font-weight: 700;
    color: var(--rf-orange-hover);
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.rf-statblock-section {
    font-family: var(--rf-font-display);
    color: var(--rf-orange-primary);
    font-size: 1.05rem;
    border-bottom: 1px solid var(--rf-orange-dark);
    padding-bottom: 8px;
    margin: 16px 0 8px;
}

.rf-statblock-entries {
    margin-top: 8px;
}

.rf-statblock-entries p,
.rf-statblock-description p {
    margin-bottom: 8px;
}

.rf-statblock-entries ul {
    margin: 0 0 8px;
    padding-left: 16px;
}

.rf-statblock-description {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid var(--rf-border-light);
}

@media (max-width: 480px) {
    .rf-statblock-abilities {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 8px;
    }
}

.rf-monster-cr {
    color: var(--rf-orange-hover);
}

.rf-monster-form-abilities {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.rf-monster-form-abilities .rf-form-label {
    text-align: center;
    display: block;
}

@media (max-width: 576px) {
    .rf-monster-form-abilities {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.rf-monster-form-block {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
}

/* ===== Campaign encounters ===== */
.rf-encounter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-encounter-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    width: 100%;
    text-align: left;
    background: var(--rf-bg-card);
    border: 1px solid var(--rf-border-light);
    border-radius: 8px;
    padding: 8px 16px;
    color: var(--rf-text-primary);
    transition: border-color 0.15s ease;
}

.rf-encounter-item:hover,
.rf-encounter-item:focus-visible {
    border-color: var(--rf-orange-primary);
}

.rf-encounter-item-name {
    font-weight: 600;
}

.rf-encounter-status {
    border: 1px solid var(--rf-border-light);
    background: var(--rf-bg-main);
    color: var(--rf-text-secondary);
    font-weight: 600;
}

.rf-encounter-status-running {
    border-color: var(--rf-orange-primary);
    color: var(--rf-orange-primary);
}

.rf-encounter-status-finished {
    color: var(--rf-text-muted);
}

.rf-encounter-round {
    font-family: var(--rf-font-display);
    color: var(--rf-orange-primary);
    font-size: 1.1rem;
}

.rf-encounter-budget {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.rf-encounter-rating {
    font-weight: 700;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}

.rf-encounter-rating-0 { color: var(--rf-text-muted); }
.rf-encounter-rating-1 { color: #6cc070; }
.rf-encounter-rating-2 { color: #e6c547; }
.rf-encounter-rating-3 { color: #ff8c00; }
.rf-encounter-rating-4 { color: #ff4d3d; }

.rf-combatant {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 8px 8px;
    border: 1px solid var(--rf-border-subtle);
    border-left: 3px solid transparent;
    border-radius: 6px;
    margin-bottom: 8px;
    background: var(--rf-bg-main);
}

.rf-combatant.current {
    border-left-color: var(--rf-orange-primary);
    box-shadow: 0 0 0 1px var(--rf-orange-glow);
}

.rf-combatant.down {
    opacity: 0.55;
}

.rf-combatant.hidden-foe {
    border-style: dashed;
}

.rf-combatant-init {
    width: 64px;
    flex: 0 0 64px;
    text-align: center;
    font-weight: 700;
    color: var(--rf-orange-hover);
}

.rf-combatant-init input {
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

.rf-combatant-main {
    flex: 1 1 220px;
    min-width: 0;
}

.rf-combatant-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 8px;
}

.rf-combatant-name-input {
    max-width: 224px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

.rf-combatant-turn {
    color: var(--rf-orange-primary);
}

.rf-combatant-kind {
    font-size: 0.75rem;
    color: var(--rf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rf-combatant-conditions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.rf-condition-chip {
    font-size: 0.75rem;
    border: 1px solid var(--rf-border-light);
    border-radius: 999px;
    padding: 1px 8px;
    background: var(--rf-bg-card);
    color: var(--rf-text-secondary);
}

button.rf-condition-chip:hover {
    border-color: #dc3545;
    color: #ff8080;
}

.rf-condition-add {
    min-width: 152px;
    font-size: 0.8rem;
}

.rf-combatant-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 8px;
}

.rf-combatant-hp {
    color: var(--rf-hp-color, #d6453a);
    font-weight: 600;
}

.rf-combatant-hp-edit {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rf-combatant-hp-edit input {
    width: 64px;
}

.rf-combatant-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.rf-health {
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 1px 8px;
    border: 1px solid currentColor;
}

.rf-health-unharmed { color: #6cc070; }
.rf-health-wounded { color: #e6c547; }
.rf-health-bloodied { color: #ff8c00; }
.rf-health-down { color: #ff4d3d; }

.rf-monster-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 336px;
    overflow-y: auto;
}

.rf-monster-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 8px;
    padding: 8px 8px;
    border: 1px solid var(--rf-border-subtle);
    border-radius: 6px;
}

.rf-monster-pick-name {
    font-weight: 600;
    min-width: 144px;
}

.rf-monster-pick-count {
    width: 64px;
    margin-left: auto;
}

@media (max-width: 576px) {
    .rf-combatant-init {
        width: 56px;
        flex-basis: 56px;
    }

    .rf-combatant-actions {
        margin-left: 0;
    }
}

/* ===== Sheet: identity card =====
   Header: portrait, name and origin, classes with the level; inspiration and level up in the top right corner.
   Below, across the whole card: personal details in one row, senses and traits, proficiencies in boxes. */
.rf-hero {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
}

.rf-hero-header {
    display: flex;
    align-items: center;
    gap: 24px;
}

.rf-hero-portrait {
    position: relative;
    flex: 0 0 112px;
    width: 112px;
    height: 112px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-main);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.rf-hero-portrait-upload {
    position: absolute;
    inset: auto 8px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .75rem;
    cursor: pointer;
}

.rf-hero-portrait.empty .rf-hero-portrait-upload {
    inset: 0;
    height: auto;
    background: none;
    color: var(--rf-text-muted);
    border: 1px dashed var(--rf-border-light);
    border-radius: 8px;
}

.rf-hero-portrait-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background-color: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .75rem;
}

.rf-hero-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rf-hero-titlerow {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.rf-hero-titles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .rf-hero-titles .rf-sheet-name {
        line-height: 1.1;
    }

.rf-hero-origin {
    color: var(--rf-text-secondary);
    font-size: .95rem;
    line-height: 1.4;
}

.rf-hero-sep {
    color: var(--rf-text-muted);
    margin: 0 8px;
}

.rf-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Inspiration and level up: pills of the same size, icon and label on the same middle line */
.rf-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 16px 0 8px;
    border-radius: 999px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-surface);
    color: var(--rf-text-secondary);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

    .rf-hero-pill .rf-icon {
        width: 16px;
        height: 16px;
        vertical-align: 0;
    }

    .rf-hero-pill:hover,
    .rf-hero-pill.on {
        color: var(--rf-orange-primary);
        border-color: var(--rf-orange-primary);
    }

    .rf-hero-pill.on {
        box-shadow: 0 0 8px var(--rf-orange-glow);
    }

    .rf-hero-pill.ready {
        color: #111;
        background-color: var(--rf-orange-primary);
        border-color: var(--rf-orange-primary);
    }

.rf-hero-classline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.rf-hero-class {
    color: var(--rf-text-primary);
    font-weight: 600;
}

    .rf-hero-class small {
        color: var(--rf-text-secondary);
        font-weight: 400;
        font-size: .85rem;
    }

/* Multiclass: one chip per class with its level */
.rf-hero-class-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-surface);
    color: var(--rf-text-primary);
    font-size: .85rem;
    font-weight: 600;
}

    .rf-hero-class-chip span {
        color: var(--rf-orange-primary);
    }

.rf-hero-level {
    font-size: .75rem;
    color: var(--rf-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Personal details: one row of six on a desktop, three then two on smaller screens */
.rf-hero-attrs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px 24px;
    padding: 16px 24px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-surface);
}

    .rf-hero-attrs > div {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
    }

.rf-hero-bio-value,
.rf-hero-bio-input {
    font-size: .95rem;
    font-weight: 600;
    color: var(--rf-text-primary);
}

.rf-hero-bio-input {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px dashed var(--rf-border-light);
    padding: 0;
}

    .rf-hero-bio-input:focus {
        outline: none;
        border-bottom-color: var(--rf-orange-primary);
    }

.rf-hero-traits {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Proficiencies: four boxes instead of a squeezed list */
.rf-hero-profs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--rf-border-subtle);
}

.rf-hero-prof {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 8px;
    background-color: var(--rf-bg-surface);
    font-size: .9rem;
    color: var(--rf-text-primary);
    line-height: 1.4;
}

@media (max-width: 992px) {
    .rf-hero-attrs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .rf-hero {
        padding: 16px;
    }

    .rf-hero-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .rf-hero-attrs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 16px;
    }
}

/* Actions: equal parts of the bottom row, icon and label */

/* ===== 8 px grid for the controls: every button, field and select is 32, 40 or 48 px tall ===== */
.btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 0;
    padding-bottom: 0;
}

    .btn.btn-sm {
        min-height: 32px;
        padding: 0 8px;
    }

    .btn.btn-lg {
        min-height: 48px;
        padding: 0 24px;
    }

input.rf-form-control,
select.rf-form-control {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

.rf-custom-select-trigger {
    min-height: 40px;
}

textarea.rf-form-control {
    min-height: 80px;
}

/* ===== Bin: one row per deleted entry, kind and name on the left, restore and delete for good on the right ===== */
.rf-trash-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-trash-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-surface);
}

.rf-trash-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-trash-kind {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
}

.rf-trash-name {
    font-weight: 600;
    color: var(--rf-text-primary);
    overflow-wrap: anywhere;
}

.rf-trash-when {
    font-size: .8rem;
    color: var(--rf-text-muted);
}

.rf-trash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .rf-trash-actions .rf-trash-danger {
        color: #e5594d !important;
        border-color: rgba(229, 89, 77, .5) !important;
    }

.rf-trash-message {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-surface);
    font-size: .9rem;
}

    .rf-trash-message.ok {
        border-color: rgba(46, 204, 113, .5);
        color: #2ecc71;
    }

    .rf-trash-message.error {
        border-color: rgba(229, 89, 77, .5);
        color: #e5594d;
    }

.rf-trash-empty-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 16px;
    color: var(--rf-text-muted);
}

/* ===== Character cards (lists and campaigns) =====
   Body: portrait, name (and who plays it), "Level • Species • Class • Background", armor class and hit points in two
   pills; a context bar (the campaigns) and the actions in equal columns at the bottom */
.rf-pc-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    border-left: 4px solid var(--rf-orange-primary);
    background-color: var(--rf-bg-surface);
    overflow: hidden;
}

    .rf-pc-card.shared {
        border-style: dashed;
        border-left-style: solid;
    }

    .rf-pc-card.inactive {
        border-left-color: var(--rf-border-light);
    }

        .rf-pc-card.inactive .rf-pc-portrait,
        .rf-pc-card.inactive .rf-pc-name {
            opacity: .55;
        }

.rf-pc-body {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    flex: 1;
}

    .rf-pc-body.rf-card-linked:hover {
        background-color: var(--rf-bg-card);
    }

.rf-pc-portrait {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-main);
    background-size: cover;
    background-repeat: no-repeat;
}

    .rf-pc-portrait.empty {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--rf-font-display);
        font-size: 1.75rem;
        color: var(--rf-orange-primary);
    }

.rf-pc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-pc-titlerow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

/* The name takes the row; the edition badge goes under it when the name is long */
.rf-pc-titles {
    flex: 1 1 144px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rf-pc-name {
    font-family: var(--rf-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    color: var(--rf-orange-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}

    a.rf-pc-name:hover {
        color: var(--rf-orange-primary);
    }

.rf-pc-owner {
    font-size: .75rem;
    color: var(--rf-text-muted);
}

.rf-pc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    font-size: .85rem;
    color: var(--rf-text-secondary);
}

.rf-pc-dot {
    color: var(--rf-text-muted);
}

.rf-pc-link,
.rf-pc-campaign a {
    position: relative;
    z-index: 1;
    color: var(--rf-orange-primary);
    font-weight: 500;
}

.rf-pc-link {
    text-decoration: none;
}

    .rf-pc-link:hover {
        text-decoration: underline;
        color: var(--rf-orange-hover);
    }

.rf-pc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rf-pc-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-card);
    font-size: .8rem;
    font-weight: 700;
    color: var(--rf-text-primary);
}

    .rf-pc-stat > span {
        color: var(--rf-orange-primary);
    }

    .rf-pc-stat.rf-pc-inactive {
        color: var(--rf-text-muted);
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        font-size: .7rem;
    }

/* Context bar: the campaigns the character sits in */
.rf-pc-band {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-card);
    font-size: .8rem;
}

.rf-pc-campaign {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

    .rf-pc-campaign a {
        text-decoration: underline;
        overflow-wrap: anywhere;
    }

.rf-pc-campaign-label {
    color: var(--rf-text-muted);
}

.rf-pc-unlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid var(--rf-border-light);
    background: none;
    color: var(--rf-text-muted);
    font-size: .75rem;
}

    .rf-pc-unlink:hover,
    .rf-pc-unlink:focus-visible {
        color: #e5594d;
        border-color: rgba(229, 89, 77, .5);
    }

/* Actions: equal columns at the bottom of the card */
.rf-pc-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-top: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-main);
}

.rf-pc-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 8px;
    border: none;
    background: none;
    color: var(--rf-text-secondary);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

    .rf-pc-action + .rf-pc-action {
        border-left: 1px solid var(--rf-border-subtle);
    }

    .rf-pc-action:hover,
    .rf-pc-action:focus-visible {
        color: var(--rf-text-primary);
        background-color: var(--rf-bg-card);
    }

    .rf-pc-action.danger:hover,
    .rf-pc-action.danger:focus-visible {
        color: #ff6b6b;
        background-color: rgba(220, 53, 69, .15);
    }

/* ===== Sheet: "On your turn" =====
   Header with the movement; the action in one box (attack, magic by level, features, other actions, each with its
   label on the left); bonus action, reaction and what takes no action in three boxes under it */
.rf-turn {
    --rf-spell: #a78bfa;
    --rf-spell-soft: rgba(139, 92, 246, .08);
    --rf-spell-border: rgba(139, 92, 246, .45);
    --rf-hit: #4da3ff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.rf-turn-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.rf-turn-title {
    margin: 0;
    font-family: var(--rf-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rf-text-primary);
}

.rf-turn-move {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 140, 0, .35);
    background-color: rgba(255, 140, 0, .1);
    color: var(--rf-text-primary);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
}

    .rf-turn-move > span {
        color: var(--rf-orange-primary);
    }

.rf-turn-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-main);
}

.rf-turn-box-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.rf-turn-tag {
    color: var(--rf-orange-primary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* A labelled row of the action: the label on the left, the choices on the right; dashed line between rows */
.rf-turn-group {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--rf-border-subtle);
}

    .rf-turn-group:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

.rf-turn-label {
    padding-top: 8px;
    color: var(--rf-text-secondary);
    font-size: .85rem;
    font-weight: 600;
}

.rf-turn-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rf-turn-magic {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rf-turn-spell-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-turn-subtag {
    color: var(--rf-spell);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* A weapon: its name, then the attack roll and the damage roll as two buttons */
.rf-turn-weapon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 8px 0 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-surface);
}

.rf-turn-weapon-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--rf-text-primary);
}

.rf-turn-weapon button {
    min-height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-card);
    color: var(--rf-text-primary);
    font-size: .8rem;
    font-weight: 700;
}

    .rf-turn-weapon button.hit {
        color: var(--rf-hit);
        border-color: rgba(77, 163, 255, .25);
    }

    .rf-turn-weapon button:hover {
        border-color: var(--rf-orange-primary);
    }

/* Pills: actions and features (neutral), spells (violet), reactions (orange) */
.rf-turn-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-surface);
    color: var(--rf-text-secondary);
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
}

    a.rf-turn-pill:hover,
    button.rf-turn-pill:hover {
        color: var(--rf-text-primary);
        border-color: var(--rf-text-muted);
    }

    .rf-turn-pill.spell {
        border-color: var(--rf-spell-border);
        background-color: var(--rf-spell-soft);
        color: #e2d9ff;
    }

        .rf-turn-pill.spell:hover {
            border-color: var(--rf-spell);
            background-color: rgba(139, 92, 246, .18);
            color: #fff;
        }

        .rf-turn-pill.spell small {
            color: var(--rf-spell);
        }

    .rf-turn-wrap.reaction .rf-turn-pill.feature,
    .rf-turn-pill.reaction {
        border-color: rgba(255, 140, 0, .5);
        background-color: rgba(255, 140, 0, .08);
        color: #ffb74d;
        font-weight: 600;
    }

    .rf-turn-pill.feature {
        color: var(--rf-text-primary);
    }

    .rf-turn-pill.spent {
        opacity: .5;
    }

    .rf-turn-pill.muted {
        color: var(--rf-text-muted);
    }

.rf-turn-uses {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background-color: var(--rf-orange-primary);
    color: #111;
    font-size: .7rem;
    font-weight: 700;
}

.rf-turn-none {
    color: var(--rf-text-muted);
    font-size: .8rem;
}

.rf-turn-rule {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rf-text-muted);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

    .rf-turn-rule:hover {
        color: var(--rf-text-secondary);
    }

.rf-turn-split {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 992px) {
    .rf-turn-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 576px) {
    .rf-turn {
        padding: 16px;
    }

    .rf-turn-box {
        padding: 16px;
    }

    .rf-turn-group {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .rf-turn-label {
        padding-top: 0;
    }
}

/* ===== Sheet: spells of a class =====
   Header: the class and how it casts in pills, the changes allowed and the editor on the right; then cantrips and each
   level as a titled grid of cards (name, school, C and R) */
.rf-casting {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
}

.rf-casting-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rf-border-subtle);
}

.rf-casting-left,
.rf-casting-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.rf-casting-title {
    margin: 0;
    font-family: var(--rf-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rf-text-primary);
}

.rf-casting-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rf-casting-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-surface);
    color: var(--rf-text-primary);
    font-size: .85rem;
    font-weight: 700;
}

    .rf-casting-pill > span {
        color: var(--rf-text-muted);
        font-size: .7rem;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .rf-casting-pill strong {
        color: var(--rf-orange-primary);
    }

    button.rf-casting-pill:hover {
        border-color: var(--rf-orange-primary);
    }

.rf-casting-status {
    font-size: .8rem;
    color: var(--rf-text-muted);
}

.rf-casting-manage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-surface);
    color: var(--rf-text-primary);
    font-size: .8rem;
    font-weight: 600;
}

    .rf-casting-manage:hover {
        border-color: var(--rf-orange-primary);
        color: var(--rf-orange-primary);
    }

.rf-casting-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rf-casting-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rf-casting-section-title {
    color: var(--rf-orange-primary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rf-casting-counter {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 140, 0, .35);
    background-color: rgba(255, 140, 0, .12);
    color: #ffb74d;
    font-size: .75rem;
    font-weight: 700;
}

.rf-casting-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.rf-casting-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-surface);
    color: inherit;
    text-decoration: none;
}

    .rf-casting-card:hover {
        border-color: var(--rf-text-muted);
        background-color: var(--rf-bg-card);
        color: inherit;
    }

    .rf-casting-card.concentrating {
        border-color: var(--rf-orange-primary);
        box-shadow: 0 0 8px var(--rf-orange-glow);
    }

.rf-casting-card-name {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rf-text-primary);
}

.rf-casting-card-always {
    align-self: flex-start;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 140, 0, 0.4);
    background: rgba(255, 140, 0, 0.12);
    color: #ffb74d;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rf-casting-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--rf-border-subtle);
}

.rf-casting-card-school {
    font-size: .75rem;
    color: var(--rf-text-muted);
}

.rf-casting-card-tags {
    display: flex;
    gap: 8px;
}

    .rf-casting-card-tags span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        min-height: 24px;
        border-radius: 4px;
        font-size: .7rem;
        font-weight: 700;
    }

    .rf-casting-card-tags .c {
        color: #ff9800;
        background-color: rgba(255, 140, 0, .15);
        border: 1px solid rgba(255, 140, 0, .4);
    }

    .rf-casting-card-tags .r {
        color: #4da3ff;
        background-color: rgba(77, 163, 255, .15);
        border: 1px solid rgba(77, 163, 255, .4);
    }

@media (max-width: 992px) {
    .rf-casting-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .rf-casting {
        padding: 16px;
    }
}

/* ===== Sheet: manual modifiers (collapsible) ===== */
.rf-mods {
    padding: 24px;
}

    .rf-mods > summary.rf-mods-summary {
        display: flex;
        align-items: center;
        gap: 16px;
        margin: 0;
    }

    .rf-mods[open] > summary.rf-mods-summary {
        padding-bottom: 16px;
        margin-bottom: 0;
    }

.rf-mods-title {
    font-family: var(--rf-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rf-text-primary);
}

.rf-mods-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-surface);
    color: var(--rf-text-muted);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rf-mods-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--rf-border-subtle);
}

.rf-mods-desc {
    margin: 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--rf-text-secondary);
}

.rf-mods-numbers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.rf-mods-number {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-surface);
}

    .rf-mods-number .rf-stepper {
        height: 40px;
    }

.rf-mods-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rf-text-muted);
}

.rf-mods-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rf-mods-heading {
    margin: 0;
    font-family: var(--rf-font-body);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rf-orange-primary);
}

.rf-mods-skills {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.rf-mods-dual {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.rf-mods-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-surface);
}

.rf-mods-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rf-mods-saves {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.rf-mods-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-main);
    color: var(--rf-text-primary);
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .rf-mods-pill:hover {
        border-color: var(--rf-text-muted);
    }

    .rf-mods-pill.selected {
        border-color: var(--rf-orange-primary);
        background-color: rgba(255, 140, 0, .12);
        color: var(--rf-orange-primary);
    }

@media (max-width: 992px) {
    .rf-mods-numbers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rf-mods-skills {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rf-mods-dual {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 576px) {
    .rf-mods {
        padding: 16px;
    }

    .rf-mods-numbers,
    .rf-mods-skills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== Sheet on a phone: the stats in four columns with labels that fit, the hit point controls and the rests across
   the whole width, the new resource form in a column of full-width controls ===== */
@media (max-width: 576px) {
    .rf-stat-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

        .rf-stat-strip .rf-mini-label {
            font-size: .6rem;
            letter-spacing: 0;
            overflow-wrap: anywhere;
            hyphens: auto;
        }

    .rf-hp-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .rf-hp-stepper {
        width: 100%;
    }

        .rf-hp-stepper .rf-hp-amount {
            flex: 1;
            width: auto;
        }

    .rf-hp-buttons {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        width: 100%;
    }

        .rf-hp-buttons .rf-hp-btn {
            padding: 0 8px;
        }

    .rf-hp-footer-rests {
        width: 100%;
    }

        .rf-hp-footer-rests .rf-rest-btn {
            flex: 1;
            min-height: 40px;
        }

    .rf-res-form-row {
        flex-direction: column;
        align-items: stretch;
    }

        .rf-res-form-row > *,
        .rf-res-field .rf-stepper,
        .rf-res-field .rf-segmented {
            flex: none;
            width: 100%;
        }

        .rf-res-field .rf-stepper .rf-stepper-input {
            flex: 1;
            width: auto;
        }

        .rf-res-field .rf-segmented button {
            flex: 1;
        }
}

/* A spell chosen by another source: visible, greyed out, with the source */
.rf-wizard-feature.taken {
    opacity: .6;
}

.rf-wizard-feature-taken {
    margin-top: 8px;
    font-size: .75rem;
    font-weight: 600;
    color: #ffaa00;
}

/* ===== Campaign sessions ===== */
.rf-session-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px;
}

@media (max-width: 767.98px) {
    .rf-session-form-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

.rf-session-secret {
    border-style: dashed !important;
}

.rf-session {
    background-color: var(--rf-bg-card);
    border: 1px solid var(--rf-border-subtle);
    border-left: 3px solid var(--rf-border-light);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

    .rf-session.next {
        border-color: rgba(255, 140, 0, 0.45);
        border-left-color: var(--rf-orange-primary);
        box-shadow: 0 0 24px rgba(255, 140, 0, 0.08);
    }

    .rf-session.played { border-left-color: #4caf7a; }

    .rf-session.cancelled { opacity: .6; }

        .rf-session.cancelled .rf-session-title { text-decoration: line-through; }

.rf-session-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px 16px;
}

.rf-session-number {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--rf-font-display);
    font-weight: 700;
    color: var(--rf-orange-primary);
    letter-spacing: .04em;
}

.rf-session-badge {
    font-family: var(--rf-font-body);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--rf-border-light);
    color: var(--rf-text-secondary);
}

    .rf-session-badge.next {
        border-color: var(--rf-orange-primary);
        color: var(--rf-orange-primary);
    }

.rf-session.played .rf-session-badge { border-color: rgba(76, 175, 122, .6); color: #7fd3a5; }

.rf-session-title {
    margin-top: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--rf-text-primary);
}

.rf-session-when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--rf-text-secondary);
    font-size: .9rem;
}

.rf-session-countdown {
    color: var(--rf-orange-primary);
    font-weight: 600;
}

.rf-session-block {
    margin-top: 16px;
}

    .rf-session-block.secret {
        padding: 8px 16px;
        border: 1px dashed var(--rf-border-light);
        border-radius: 8px;
        background-color: var(--rf-bg-surface);
    }

.rf-session-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid var(--rf-border-subtle);
    font-size: .8rem;
    color: var(--rf-text-muted);
}

/* The next session at the top of the campaign overview */
.rf-next-session {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px;
    text-align: left;
    color: var(--rf-text-primary);
    background: linear-gradient(90deg, var(--rf-orange-dark), var(--rf-bg-card) 70%);
    border: 1px solid rgba(255, 140, 0, 0.45);
    border-radius: 12px;
}

    .rf-next-session:hover { border-color: var(--rf-orange-primary); }

.rf-next-session-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.4rem;
    color: var(--rf-orange-primary);
    background-color: rgba(255, 140, 0, 0.12);
}

.rf-next-session-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.rf-next-session-when {
    font-size: 1.05rem;
    font-weight: 600;
}

.rf-next-session-title {
    color: var(--rf-text-secondary);
}

/* ===== Shared dice log ===== */
.rf-roll-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rf-roll-die {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-weight: 700;
    color: var(--rf-text-primary);
    background-color: var(--rf-bg-surface);
    border: 1px solid var(--rf-border-light);
    border-radius: 8px;
}

    .rf-roll-die:hover:not(:disabled) {
        border-color: var(--rf-orange-primary);
        color: var(--rf-orange-primary);
    }

.rf-roll-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

@media (max-width: 767.98px) {
    .rf-roll-form-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

.rf-roll-log {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rf-roll {
    padding: 8px 0;
    border-bottom: 1px solid var(--rf-border-subtle);
}

    .rf-roll:last-child { border-bottom: 0; }

    .rf-roll.fresh { animation: rf-roll-in .6s ease-out; }

@keyframes rf-roll-in {
    from { background-color: rgba(255, 140, 0, 0.16); }
    to { background-color: transparent; }
}

.rf-roll-who {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: .8rem;
    color: var(--rf-text-muted);
}

.rf-roll-name {
    font-weight: 700;
    color: var(--rf-text-secondary);
}

.rf-roll.mine .rf-roll-name { text-decoration: underline; text-underline-offset: 4px; }

/* The colour of the person who rolled: a dot before the name, the name in the same colour */
.rf-roll-swatch {
    display: inline-block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    align-self: center;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}

.rf-roll-name.removed { font-style: italic; font-weight: 600; }

.rf-roll-as-fixed {
    display: flex;
    align-items: center;
    color: var(--rf-text-secondary);
}

.rf-member-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: middle;
}

.rf-roll-hidden {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c3a8ff;
}

.rf-roll-time { margin-left: auto; }

.rf-roll-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rf-roll-what {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rf-roll-label {
    font-weight: 600;
    color: var(--rf-text-primary);
    overflow-wrap: anywhere;
}

.rf-roll-dice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}

.rf-roll-face {
    min-width: 24px;
    padding: 0 8px;
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    border: 1px solid var(--rf-border-light);
    border-radius: 6px;
    color: var(--rf-text-secondary);
}

    .rf-roll-face.dropped {
        opacity: .4;
        text-decoration: line-through;
    }

    .rf-roll-face.crit { border-color: var(--rf-orange-primary); color: var(--rf-orange-primary); }

    .rf-roll-face.fumble { border-color: #dc3545; color: #ff6b78; }

.rf-roll-mod {
    font-size: .8rem;
    font-weight: 700;
    color: var(--rf-text-secondary);
}

.rf-roll-expr {
    font-size: .75rem;
    color: var(--rf-text-muted);
}

.rf-roll-note {
    font-size: .8rem;
    color: var(--rf-text-secondary);
}

.rf-roll-total {
    flex: 0 0 auto;
    min-width: 56px;
    text-align: center;
    font-family: var(--rf-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rf-text-primary);
}

.rf-roll.crit .rf-roll-total { color: var(--rf-orange-primary); text-shadow: 0 0 16px var(--rf-orange-glow); }

.rf-roll.fumble .rf-roll-total { color: #ff6b78; }

.rf-dice-shared {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: .75rem;
    color: var(--rf-text-muted);
}

@media (max-width: 575.98px) {
    .rf-roll-die { padding: 8px; gap: 8px; font-size: .85rem; }
}

/* ===== Global search ===== */
.rf-search-box {
    position: relative;
}

    .rf-search-box > svg {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--rf-text-muted);
        pointer-events: none;
    }

    .rf-search-box > .rf-form-control {
        padding-left: 40px;
    }

.rf-search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

.rf-search-hit {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 16px;
    color: var(--rf-text-primary);
    text-decoration: none;
    background-color: var(--rf-bg-card);
    border: 1px solid var(--rf-border-subtle);
    border-radius: 8px;
}

    .rf-search-hit:hover {
        border-color: var(--rf-orange-primary);
        color: var(--rf-text-primary);
    }

.rf-search-hit-name {
    font-weight: 600;
}

.rf-search-hit-other {
    font-size: .8rem;
    color: var(--rf-text-muted);
    font-style: italic;
}

.rf-search-hit-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.rf-search-hit-detail {
    font-size: .8rem;
    color: var(--rf-text-secondary);
}

/* The search page: header with the random entry, the bar with the shortcut, the chips, then the way in */
.rf-search-page {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 0 56px;
}

.rf-search-hero {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rf-search-hero-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}

.rf-search-title { margin: 0; }

.rf-search-subtitle {
    margin: 8px 0 0;
    font-size: .85rem;
    color: var(--rf-text-muted);
}

.rf-search-random {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 8px 16px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--rf-text-secondary);
    background-color: var(--rf-bg-surface);
    border: 1px solid var(--rf-border-light);
    border-radius: 8px;
}

    .rf-search-random > svg {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        overflow: visible;
        color: var(--rf-orange-primary);
    }

    .rf-search-random:hover:not(:disabled) {
        color: var(--rf-text-primary);
        border-color: var(--rf-orange-primary);
    }

.rf-search-rule {
    height: 1px;
    background-color: var(--rf-orange-primary);
}

.rf-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background-color: var(--rf-bg-surface);
    border: 1px solid var(--rf-orange-primary);
    border-radius: 8px;
    box-shadow: 0 0 24px rgba(255, 140, 0, 0.08);
}

    .rf-search-bar > svg {
        flex: 0 0 auto;
        color: var(--rf-text-muted);
    }

.rf-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 8px;
    font-size: .95rem;
    color: var(--rf-text-primary);
    background: transparent;
    border: 0;
    outline: none;
}

    .rf-search-input::placeholder { color: var(--rf-text-muted); }

.rf-search-shortcuts {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.rf-search-lang {
    padding: 0 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--rf-orange-hover);
    background-color: rgba(255, 140, 0, 0.12);
    border: 1px solid rgba(255, 140, 0, 0.3);
    border-radius: 4px;
}

@media (max-width: 575.98px) {
    .rf-search-shortcuts { display: none; }
}

.rf-search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rf-search-chip {
    padding: 8px 16px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--rf-text-secondary);
    background-color: var(--rf-bg-surface);
    border: 1px solid var(--rf-border-light);
    border-radius: 999px;
}

    .rf-search-chip:hover { color: var(--rf-text-primary); border-color: #555555; }

    .rf-search-chip.active {
        color: var(--rf-orange-hover);
        background-color: rgba(255, 140, 0, 0.14);
        border-color: var(--rf-orange-primary);
    }

.rf-search-hub {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.rf-search-section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.rf-search-section-tag {
    margin: 0 0 8px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
}

.rf-search-section-head .rf-search-section-tag { margin: 0; }

.rf-search-meta {
    font-size: .75rem;
    color: var(--rf-text-muted);
}

.rf-search-editions {
    display: inline-flex;
    border: 1px solid var(--rf-border-light);
    border-radius: 999px;
    overflow: hidden;
}

    .rf-search-editions > button {
        padding: 0 16px;
        font-size: .75rem;
        color: var(--rf-text-muted);
        background: transparent;
        border: 0;
    }

        .rf-search-editions > button.active {
            color: var(--rf-orange-hover);
            background-color: rgba(255, 140, 0, 0.14);
        }

.rf-search-categories {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.rf-search-category {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    padding: 16px;
    color: inherit;
    text-decoration: none;
    background-color: var(--rf-bg-card);
    border: 1px solid var(--rf-border-subtle);
    border-radius: 8px;
    transition: border-color .15s, transform .15s;
}

    .rf-search-category:hover {
        color: inherit;
        border-color: rgba(255, 140, 0, 0.55);
        transform: translateY(-2px);
    }

.rf-search-category-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.rf-search-category-name {
    font-weight: 700;
    color: var(--rf-text-primary);
}

.rf-search-category-count {
    flex: 0 0 auto;
    padding: 0 8px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--rf-orange-hover);
    background-color: rgba(255, 140, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.3);
    border-radius: 999px;
}

.rf-search-category-desc {
    font-size: .8rem;
    line-height: 1.45;
    color: var(--rf-text-muted);
}

.rf-search-category-sub {
    padding-top: 8px;
    font-size: .7rem;
    color: #666666;
    border-top: 1px dashed var(--rf-border-subtle);
}

.rf-search-panel {
    padding: 16px 24px;
    background-color: var(--rf-bg-card);
    border: 1px solid var(--rf-border-subtle);
    border-radius: 12px;
}

.rf-search-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rf-search-pill {
    padding: 8px 16px;
    font-size: .8rem;
    color: var(--rf-text-secondary);
    text-decoration: none;
    background-color: var(--rf-bg-surface);
    border: 1px solid var(--rf-border-light);
    border-radius: 8px;
}

    .rf-search-pill:hover { color: var(--rf-orange-hover); border-color: rgba(255, 140, 0, 0.45); }

/* Quick reference: one row of pills per family (conditions, actions, table rules) */
.rf-search-quick-group + .rf-search-quick-group { margin-top: 16px; }

.rf-search-quick-label {
    margin-bottom: 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rf-text-muted);
}

/* Recently viewed: a row of chips under the filters, the random entry at its end */
.rf-search-recentbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 16px;
}

.rf-search-recentbar-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rf-text-muted);
}

.rf-search-recentbar-items {
    display: flex;
    flex: 1 1 320px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.rf-search-recentbar-empty {
    font-size: .8rem;
    color: #666666;
}

.rf-search-recent-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    padding: 0 16px 0 0;
    overflow: hidden;
    font-size: .8rem;
    color: var(--rf-text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    background-color: var(--rf-bg-surface);
    border: 1px solid var(--rf-border-light);
    border-radius: 999px;
}

    .rf-search-recent-chip:hover { color: var(--rf-text-primary); border-color: #555555; }

.rf-search-recent-chip-kind {
    padding: 8px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--rf-orange-hover);
    background-color: rgba(255, 140, 0, 0.1);
}

.rf-search-category-count-other {
    color: var(--rf-text-muted);
    background-color: transparent;
    border-color: var(--rf-border-light);
}

.rf-search-clear {
    padding: 0;
    font-size: .75rem;
    color: var(--rf-text-muted);
    text-decoration: underline;
    background: transparent;
    border: 0;
}

    .rf-search-clear:hover { color: var(--rf-text-secondary); }

@media (max-width: 899.98px) {
    .rf-search-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479.98px) {
    .rf-search-categories { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Administration ===== */
.rf-admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 8px;
}

.rf-admin-stat {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background-color: var(--rf-bg-card);
    border: 1px solid var(--rf-border-subtle);
    border-radius: 12px;
}

.rf-admin-stat-value {
    font-family: var(--rf-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rf-orange-primary);
}

.rf-admin-stat-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rf-text-muted);
}

.rf-admin-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rf-border-subtle);
}

    .rf-admin-row:last-child { border-bottom: 0; }

    .rf-admin-row.locked .rf-admin-row-title > span:first-child { color: var(--rf-text-muted); }

.rf-admin-row-main {
    min-width: 0;
    flex: 1 1 320px;
}

.rf-admin-row-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.rf-admin-muted {
    color: var(--rf-text-muted);
    font-weight: 400;
}

.rf-admin-locked {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: #ff6b78;
}

.rf-admin-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 160px;
}

/* ===== Passkeys ===== */
.rf-passkey-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rf-passkey {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rf-border-subtle);
}

    .rf-passkey:last-child { border-bottom: 0; }

    .rf-passkey > svg { color: var(--rf-orange-primary); }

.rf-passkey-name {
    font-weight: 600;
    color: var(--rf-text-primary);
}

.rf-passkey-date {
    font-size: .8rem;
    color: var(--rf-text-muted);
}

/* "oppure" between the password sign-in and the passkey */
.rf-login-or {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rf-text-muted);
}

    .rf-login-or::before,
    .rf-login-or::after {
        content: "";
        flex: 1 1 auto;
        border-top: 1px solid var(--rf-border-light);
    }

/* ===== Rule modules: effects editor and lists ===== */
.rf-effect-row {
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    background-color: var(--rf-bg-main);
    border: 1px solid var(--rf-border-subtle);
    border-left: 3px solid var(--rf-orange-primary);
}

.rf-effect-remove {
    margin-top: 24px;
}

.rf-effect-preview {
    color: var(--rf-orange-primary);
}

.rf-effect-list {
    padding-left: 24px;
    margin-bottom: 0;
    color: var(--rf-text-secondary);
}

.rf-effect-list li + li {
    margin-top: 8px;
}

.rf-module-pick {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-card);
    cursor: pointer;
}

.rf-module-pick.active {
    border-color: var(--rf-orange-primary);
}

.rf-module-pick ul {
    margin: 8px 0 0;
    padding-left: 24px;
    color: var(--rf-text-secondary);
}

/* An ability added by a rule module, next to the six */
.rf-ability-extra {
    border-color: var(--rf-orange-primary);
}

.rf-ability-save-none {
    color: var(--rf-text-muted);
    text-align: center;
}

.rf-stat-card-extra {
    border-color: var(--rf-orange-primary);
}

/* Effects of a Homebrew entry: what the sheet applies on its own */
.rf-effect-box {
    margin-top: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    border-left: 3px solid var(--rf-orange-primary);
    background-color: var(--rf-bg-main);
}

.rf-effects-details > summary {
    cursor: pointer;
    font-size: .85rem;
    color: var(--rf-orange-primary);
}

/* ===== NPCs: registry and dossier =====
   Control deck (libraries, search, campaign, challenge, edition; the function at the table), dossier cards like the
   characters' (orange edge for the account's NPCs, amethyst for the community's), the table hook, the context bar */
.rf-npc-improvise {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .rf-npc-improvise .rf-icon {
        width: 16px;
        height: 16px;
        color: var(--rf-orange-primary);
    }

.rf-npc-deck {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    background-color: var(--rf-bg-surface);
    border: 1px solid var(--rf-border-light);
}

.rf-npc-deck-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.rf-npc-libraries {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-main);
}

.rf-npc-library {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 16px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--rf-text-muted);
    font-size: .8rem;
    font-weight: 600;
}

    .rf-npc-library:hover {
        color: var(--rf-text-primary);
    }

    .rf-npc-library.active {
        color: var(--rf-text-primary);
        background-color: var(--rf-bg-card);
        box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    }

.rf-npc-library-num {
    min-width: 24px;
    padding: 0 8px;
    border-radius: 8px;
    background-color: var(--rf-border-subtle);
    color: var(--rf-text-secondary);
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
}

    .rf-npc-library-num.mine {
        background-color: rgba(255, 140, 0, .2);
        color: #ffb74d;
    }

    .rf-npc-library-num.community {
        background-color: rgba(171, 71, 188, .2);
        color: #ce93d8;
    }

.rf-npc-deck-search {
    display: flex;
    flex: 1 1 480px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.rf-npc-search {
    display: flex;
    flex: 1 1 240px;
    align-items: center;
    gap: 8px;
    max-width: 360px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-card);
    color: var(--rf-text-muted);
}

    .rf-npc-search:focus-within {
        border-color: var(--rf-orange-primary);
    }

    .rf-npc-search input {
        width: 100%;
        min-height: 40px;
        border: none;
        outline: none;
        background: none;
        color: var(--rf-text-primary);
        font-size: .85rem;
    }

.rf-npc-deck-select {
    flex: 0 1 200px;
    min-width: 160px;
}

.rf-npc-deck-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rf-border-subtle);
}

.rf-npc-functions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rf-npc-deck-label {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
}

.rf-npc-fn {
    min-height: 32px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-card);
    color: var(--rf-text-secondary);
    font-size: .8rem;
    font-weight: 600;
}

    .rf-npc-fn:hover {
        color: var(--rf-text-primary);
        border-color: var(--rf-text-muted);
    }

    .rf-npc-fn.active {
        color: #ffb74d;
        border-color: var(--rf-orange-primary);
        background-color: rgba(255, 140, 0, .14);
    }

.rf-npc-card.mine {
    border-color: rgba(255, 140, 0, .55);
    border-left-color: var(--rf-orange-primary);
}

.rf-npc-card.community {
    border-left-color: #ab47bc;
}

.rf-npc-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    flex: 1;
}

    .rf-npc-body.rf-card-linked:hover {
        background-color: var(--rf-bg-card);
    }

.rf-npc-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.rf-npc-avatar {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-main);
    color: var(--rf-orange-primary);
}

    .rf-npc-avatar.shared {
        color: #ce93d8;
    }

    .rf-npc-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .rf-npc-avatar .rf-icon {
        width: 24px;
        height: 24px;
    }

.rf-npc-initials {
    font-family: var(--rf-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.rf-npc-avatar-lg {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 16px;
}

    .rf-npc-avatar-lg .rf-icon {
        width: 48px;
        height: 48px;
    }

    .rf-npc-avatar-lg .rf-npc-initials {
        font-size: 2rem;
    }

.rf-npc-head {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-npc-titlebar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.rf-npc-name {
    flex: 1 1 128px;
    font-family: var(--rf-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rf-orange-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}

    a.rf-npc-name:hover {
        color: var(--rf-orange-hover);
    }

.rf-npc-role {
    color: var(--rf-orange-primary);
    font-weight: 600;
}

.rf-npc-cr {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 140, 0, .5);
    background-color: rgba(255, 140, 0, .14);
    color: #ff9d26;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
}

/* Attitude: hostile in red, indifferent in amber, friendly in green */
.rf-npc-attitude {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 700;
}

    .rf-npc-attitude.hostile {
        color: #ff6b6b;
        background-color: rgba(220, 53, 69, .12);
        border: 1px solid rgba(220, 53, 69, .4);
    }

    .rf-npc-attitude.indifferent {
        color: #fde047;
        background-color: rgba(234, 179, 8, .12);
        border: 1px solid rgba(234, 179, 8, .35);
    }

    .rf-npc-attitude.friendly {
        color: #34d399;
        background-color: rgba(16, 185, 129, .12);
        border: 1px solid rgba(16, 185, 129, .35);
    }

.rf-npc-cue {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-card);
}

.rf-npc-cue-label {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rf-text-muted);
}

.rf-npc-cue-text {
    margin: 0;
    font-size: .85rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--rf-text-primary);
}

    .rf-npc-cue-text.empty {
        color: var(--rf-text-muted);
    }

.rf-npc-context {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border-top: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-card);
    font-size: .8rem;
}

.rf-npc-location {
    color: var(--rf-text-muted);
    font-size: .8rem;
}

.rf-npc-tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 140, 0, .45);
    color: #ff9d26;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Three actions in a narrow card: the label may wrap rather than be cut */
.rf-npc-card .rf-pc-action {
    gap: 8px;
    padding: 8px;
    font-size: .7rem;
    white-space: normal;
    text-align: center;
}

.rf-pc-action.rf-npc-action-forge {
    color: var(--rf-orange-primary);
}

/* The account has no NPC yet */
.rf-npc-empty {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    align-items: center;
    gap: 24px;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-surface);
}

.rf-npc-empty-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--rf-text-secondary);
}

.rf-npc-empty-kicker {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
}

.rf-npc-empty-title {
    margin: 0;
    font-family: var(--rf-font-display);
    font-size: 1.35rem;
    color: var(--rf-text-primary);
}

.rf-npc-quick {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-card);
}

.rf-npc-quick-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    border-left: 3px solid var(--rf-orange-primary);
    background-color: var(--rf-bg-main);
}

.rf-npc-quick-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

    .rf-npc-quick-info strong {
        font-size: .85rem;
        color: var(--rf-text-primary);
    }

    .rf-npc-quick-info span {
        font-size: .75rem;
        color: var(--rf-text-muted);
    }

.rf-npc-quick-btn {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 140, 0, .35);
    background-color: rgba(255, 140, 0, .12);
    color: #ffb74d;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

    .rf-npc-quick-btn:hover {
        background-color: rgba(255, 140, 0, .22);
        color: var(--rf-text-primary);
    }

@media (max-width: 991.98px) {
    .rf-npc-empty {
        grid-template-columns: 1fr;
    }
}

/* NPC sheet: one column like the character sheet; identity card, then the dossier and the combat views */
.rf-npc-sheet {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 920px;
    margin: 0 auto;
    padding: 24px 0 64px;
}

.rf-npc-topbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 16px;
}

.rf-npc-back {
    font-size: .8rem;
    font-weight: 600;
    color: var(--rf-text-muted);
    text-decoration: none;
}

    .rf-npc-back:hover {
        color: var(--rf-orange-primary);
    }

.rf-npc-topbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rf-npc-top-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px;
    border: none;
    background: none;
    color: var(--rf-text-secondary);
    font-size: .8rem;
}

    .rf-npc-top-btn:hover {
        color: var(--rf-text-primary);
    }

    .rf-npc-top-btn.danger:hover {
        color: #ff6b6b;
    }

.rf-npc-campaign-menu {
    position: relative;
}

.rf-npc-campaign-list {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 256px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

.rf-npc-campaign-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 8px;
    border: 1px solid var(--rf-border-subtle);
    border-radius: 4px;
    background-color: var(--rf-bg-card);
    color: var(--rf-text-primary);
    font-size: .85rem;
    text-align: left;
}

    .rf-npc-campaign-item:hover:not(:disabled) {
        border-color: var(--rf-orange-primary);
    }

    .rf-npc-campaign-item:disabled {
        opacity: 1;
        color: var(--rf-text-muted);
    }

.rf-npc-campaign-done {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    color: #34d399;
}

.rf-npc-identity {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-surface);
}

.rf-npc-identity-head {
    display: flex;
    align-items: center;
    gap: 24px;
}

.rf-npc-identity-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-npc-identity-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px 16px;
}

.rf-npc-hero-name {
    margin: 0 0 8px;
    font-family: var(--rf-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--rf-orange-primary);
    overflow-wrap: anywhere;
}

.rf-npc-identity-pills,
.rf-npc-identity-badges,
.rf-npc-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rf-npc-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-card);
    font-size: .8rem;
    font-weight: 600;
    color: var(--rf-text-secondary);
}

    .rf-npc-pill.challenge {
        color: #ffb74d;
        border-color: rgba(255, 140, 0, .45);
        background-color: rgba(255, 140, 0, .1);
    }

    .rf-npc-pill.hostile {
        color: #ff6b6b;
        border-color: rgba(220, 53, 69, .45);
        background-color: rgba(220, 53, 69, .08);
    }

    .rf-npc-pill.indifferent {
        color: #fde047;
        border-color: rgba(234, 179, 8, .4);
        background-color: rgba(234, 179, 8, .08);
    }

    .rf-npc-pill.friendly {
        color: #34d399;
        border-color: rgba(16, 185, 129, .4);
        background-color: rgba(16, 185, 129, .08);
    }

.rf-npc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-card);
    font-size: .8rem;
    color: var(--rf-text-muted);
}

    .rf-npc-chip a {
        font-weight: 700;
    }

.rf-npc-meta-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-card);
}

    .rf-npc-meta-grid > div {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
    }

.rf-npc-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rf-text-muted);
}

.rf-npc-value {
    font-size: .85rem;
    font-weight: 700;
    color: var(--rf-text-primary);
    overflow-wrap: anywhere;
}

.rf-npc-subtitle {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rf-orange-primary);
}

.rf-npc-trait {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-card);
    font-size: .8rem;
    font-weight: 600;
    color: var(--rf-text-primary);
}

.rf-npc-boxes-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rf-border-subtle);
}

.rf-npc-mini {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-card);
}

    .rf-npc-mini p {
        margin: 8px 0 0;
        font-size: .8rem;
        line-height: 1.4;
        color: var(--rf-text-secondary);
    }

    .rf-npc-mini strong {
        color: #ffb74d;
    }

/* The two views */
.rf-npc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 2px solid var(--rf-orange-primary);
}

.rf-npc-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 24px;
    border: 1px solid var(--rf-border-subtle);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background-color: var(--rf-bg-surface);
    color: var(--rf-text-muted);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

    .rf-npc-tab:hover {
        color: var(--rf-text-primary);
    }

    .rf-npc-tab.active {
        border-color: var(--rf-orange-primary);
        background-color: var(--rf-orange-primary);
        color: #0a0a0a;
    }

.rf-npc-tab-summary {
    padding: 0 8px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, .08);
    font-size: .7rem;
    letter-spacing: 0;
    text-transform: none;
}

.rf-npc-tab.active .rf-npc-tab-summary {
    background-color: rgba(0, 0, 0, .2);
}

.rf-npc-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.rf-npc-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px;
    border-radius: 16px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-surface);
}

    .rf-npc-box.secret {
        border-left: 4px solid var(--rf-orange-primary);
        background-color: #13110e;
    }

.rf-npc-box-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.rf-npc-prose {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--rf-text-secondary);
}

    .rf-npc-prose p:last-child,
    .rf-npc-inline p:last-child {
        margin-bottom: 0;
    }

.rf-npc-dc {
    padding: 0 8px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-card);
    font-size: .75rem;
    font-weight: 700;
    color: #ffb74d;
}

.rf-npc-social {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.rf-npc-social-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-card);
}

    .rf-npc-social-card.pos {
        border-top: 2px solid #10b981;
    }

    .rf-npc-social-card.neu {
        border-top: 2px solid var(--rf-orange-primary);
    }

    .rf-npc-social-card.neg {
        border-top: 2px solid #ef4444;
    }

/* Combat view */
.rf-npc-vitals {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.rf-npc-vital {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 16px 8px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-surface);
    text-align: center;
}

    .rf-npc-vital strong {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--rf-text-primary);
    }

.rf-npc-hp-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.rf-npc-heart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(239, 68, 68, .4);
    background-color: rgba(239, 68, 68, .12);
    color: #ef4444;
}

.rf-npc-hp-numbers strong {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--rf-text-primary);
}

.rf-npc-hp-numbers span {
    color: var(--rf-text-muted);
}

.rf-npc-hp-numbers .rf-npc-hp-temp {
    color: #81d4fa;
    font-weight: 700;
}

.rf-npc-hp-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rf-npc-stepper {
    display: inline-flex;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-card);
}

    .rf-npc-stepper button {
        width: 32px;
        height: 32px;
        border: none;
        background: none;
        color: var(--rf-text-secondary);
        font-weight: 700;
    }

    .rf-npc-stepper input {
        width: 40px;
        border: none;
        background: none;
        color: var(--rf-text-primary);
        font-weight: 700;
        text-align: center;
        -moz-appearance: textfield;
    }

        .rf-npc-stepper input::-webkit-outer-spin-button,
        .rf-npc-stepper input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

.rf-npc-hp-btn {
    min-height: 32px;
    padding: 0 16px;
    border-radius: 8px;
    background: none;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
}

    .rf-npc-hp-btn.damage {
        border: 1px solid #ef4444;
        color: #fca5a5;
    }

    .rf-npc-hp-btn.heal {
        border: 1px solid #10b981;
        color: #6ee7b7;
    }

    .rf-npc-hp-btn.temp {
        border: 1px solid rgba(79, 195, 247, .6);
        color: #81d4fa;
    }

.rf-npc-hp-track {
    height: 8px;
    overflow: hidden;
    border-radius: 4px;
    background-color: var(--rf-bg-card);
}

.rf-npc-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #b91c1c, #ef4444);
}

.rf-npc-abilities {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.rf-npc-ability {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-surface);
    text-align: center;
}

    .rf-npc-ability strong {
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--rf-text-primary);
    }

.rf-npc-ability-score {
    padding: 0 8px;
    border-radius: 16px;
    border: 1px solid var(--rf-border-light);
    font-size: .7rem;
    color: var(--rf-text-muted);
}

.rf-npc-save {
    font-size: .7rem;
    color: var(--rf-text-muted);
}

    .rf-npc-save.proficient {
        color: var(--rf-orange-primary);
        font-weight: 700;
    }

.rf-npc-turn-title {
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rf-text-primary);
}

.rf-npc-move {
    padding: 0 16px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    border-radius: 16px;
    border: 1px solid rgba(255, 140, 0, .4);
    background-color: rgba(255, 140, 0, .12);
    color: #ffb74d;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.rf-npc-turn {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-subtle);
    background-color: var(--rf-bg-card);
}

.rf-npc-turn-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--rf-border-subtle);
}

    .rf-npc-turn-row:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

.rf-npc-turn-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--rf-text-muted);
}

.rf-npc-weapons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rf-npc-weapon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 16px;
    border-radius: 8px;
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-main);
    font-size: .8rem;
}

.rf-npc-weapon-name {
    font-weight: 700;
    color: var(--rf-text-primary);
}

.rf-npc-weapon-hit,
.rf-npc-weapon-dmg {
    padding: 0 8px;
    border-radius: 4px;
    font-weight: 700;
}

.rf-npc-weapon-hit {
    border: 1px solid rgba(255, 140, 0, .45);
    background-color: rgba(255, 140, 0, .14);
    color: #ffb74d;
}

.rf-npc-weapon-dmg {
    border: 1px solid var(--rf-border-light);
    background-color: var(--rf-bg-card);
    color: var(--rf-text-primary);
}

.rf-npc-inline {
    font-size: .85rem;
    line-height: 1.45;
    color: var(--rf-text-secondary);
}

    .rf-npc-inline strong {
        color: var(--rf-text-primary);
    }

.rf-npc-lines {
    font-size: .85rem;
}

@media (max-width: 767.98px) {
    .rf-npc-meta-grid,
    .rf-npc-vitals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rf-npc-abilities {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rf-npc-boxes-3,
    .rf-npc-social {
        grid-template-columns: 1fr;
    }

    .rf-npc-identity-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Editor: portrait and archetype above the statblock */
.rf-npc-form-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    background-color: var(--rf-bg-card);
}

.rf-npc-form-archetype {
    flex: 1 1 240px;
}

.rf-npc-form-dc {
    flex: 0 0 96px;
}