/* ============================================================
   RealmWeaver — Enchanted Forest Aesthetic
   Design: Moonlit ancient forest, bioluminescent glows,
   warm firelight camp in an enchanted grove. The UI is a
   weathered tome found deep in the Feywild.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
    /* --- The Palette: Enchanted forest at twilight --- */
    --rw-bg-void:        #070e14;
    --rw-bg-bark:        #0b1820;
    --rw-bg-panel:       #0f2028;
    --rw-bg-moss:        #142a32;
    --rw-bg-moss-2:      #183238;
    --rw-bg-moonlit:     #1e3c42;

    /* Sage tones — cool forest text */
    --rw-sage-cream:     #c0d4c8;
    --rw-sage-tan:       #8aaa98;
    --rw-sage-muted:     #5a7868;
    --rw-sage-dark:      #3a5448;

    /* Amber-gold — warm firelight contrast */
    --rw-gold:           #c4a040;
    --rw-gold-light:     #dab855;
    --rw-gold-glow:      #ecd06a;
    --rw-gold-ember:     rgba(196, 160, 64, 0.08);
    --rw-gold-flare:     rgba(196, 160, 64, 0.25);

    /* Forest accents */
    --rw-verdant:        #3d8a55;
    --rw-verdant-bright: #50b068;
    --rw-verdant-glow:   rgba(61, 138, 85, 0.15);
    --rw-verdant-deep:   #2a6a3e;

    /* Enchanted water / sky accents */
    --rw-arcane-blue:    #3a80a8;
    --rw-arcane-teal:    #2e8890;
    --rw-arcane-cyan:    #48b0c0;
    --rw-arcane-glow:    rgba(58, 128, 168, 0.12);
    --rw-arcane-purple:  #6a4a8a;

    /* Blood & Iron — stat block tradition */
    --rw-blood:          #8b2500;
    --rw-blood-bright:   #b83a1a;
    --rw-iron:           #4a6058;
    --rw-iron-light:     #6a8878;

    /* Text — silvery sage moonlight */
    --rw-text:           #bccec6;
    --rw-text-bright:    #dceee6;
    --rw-text-dim:       #8aab9e;
    --rw-text-faint:     #5a7e6e;

    /* Structural */
    --rw-border:         #1a3430;
    --rw-border-gold:    rgba(196, 160, 64, 0.18);
    --rw-border-strong:  rgba(196, 160, 64, 0.35);
    --rw-border-verdant: rgba(61, 138, 85, 0.25);
    --rw-groove:         inset 0 1px 0 rgba(200,240,220,0.04), inset 0 -1px 0 rgba(0,0,0,0.3);
    --rw-shadow:         0 4px 20px rgba(0,0,0,0.5);
    --rw-shadow-deep:    0 8px 40px rgba(0,0,0,0.7);
    --rw-glow-candle:    0 0 40px rgba(196, 160, 64, 0.06);
    --rw-glow-verdant:   0 0 30px rgba(61, 138, 85, 0.08);

    /* Typography */
    --rw-font-display:   'MedievalSharp', cursive;
    --rw-font-body:      'Alegreya', serif;
    --rw-font-sc:        'Alegreya SC', serif;
    --rw-font-ui:        'Alegreya Sans', sans-serif;

    /* Spacing & radius */
    --rw-radius-sm:      3px;
    --rw-radius-md:      6px;
    --rw-radius-lg:      10px;
    --rw-radius-xl:      16px;
    --rw-radius-2xl:     24px;
    --rw-radius-pill:    999px;

    /* Frosted glass surfaces */
    --rw-glass-bg:       rgba(15, 25, 35, 0.55);
    --rw-glass-bg-dense: rgba(15, 25, 35, 0.75);
    --rw-glass-border:   rgba(255, 255, 255, 0.1);
    --rw-glass-border-cyan: rgba(72, 176, 192, 0.2);
    --rw-glass-blur:     blur(12px);
    --rw-glass-blur-strong: blur(16px);

    /* Transitions */
    --rw-transition:     0.15s ease;
    --rw-transition-slow:0.3s ease;

    /* Role Identity — GM "War Table" */
    --rw-role-gm-accent:       var(--rw-gold);
    --rw-role-gm-accent-glow:  rgba(196, 160, 64, 0.15);
    --rw-role-gm-bg-tint:      rgba(196, 160, 64, 0.03);
    --rw-role-gm-border:       var(--rw-border-gold);

    /* Role Identity — Player "Hero's Lens" */
    --rw-role-player-accent:       var(--rw-verdant-bright);
    --rw-role-player-accent-glow:  rgba(80, 176, 104, 0.15);
    --rw-role-player-bg-tint:      rgba(80, 176, 104, 0.03);
    --rw-role-player-border:       rgba(80, 176, 104, 0.25);
}

/* === NOISE TEXTURE OVERLAY === */
html::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px;
}

/* === BASE STYLES === */
html {
    background: var(--rw-bg-void);
    color: var(--rw-text);
    font-family: var(--rw-font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background:
        linear-gradient(180deg, rgba(7,14,20,0.4) 0%, rgba(7,14,20,0.7) 100%),
        url('img/background1.jpg') center/cover no-repeat fixed;
    color: var(--rw-text);
    min-height: 100vh;
}

::selection {
    background: var(--rw-gold);
    color: var(--rw-bg-void);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--rw-bg-bark); }
::-webkit-scrollbar-thumb { background: var(--rw-sage-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--rw-verdant); }

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--rw-font-display);
    color: var(--rw-text-bright);
    font-weight: 400;
    letter-spacing: 0.02em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p { margin-bottom: 0.75rem; }

.lead {
    color: var(--rw-text-dim);
    font-size: 1.1rem;
    font-style: italic;
}

a, .btn-link {
    color: var(--rw-verdant-bright);
    transition: color var(--rw-transition);
}

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

/* Content area */
.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* =============================================================
   BOOTSTRAP DARK THEME OVERRIDES
   ============================================================= */

/* Cards */
.card, .rw-card {
    --bs-card-bg: var(--rw-bg-panel);
    --bs-card-color: var(--rw-text);
    --bs-card-border-color: var(--rw-border);
    --bs-card-cap-bg: var(--rw-bg-moss);
    background: var(--rw-bg-panel);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-md);
    box-shadow: var(--rw-shadow);
    transition: all var(--rw-transition);
    color: var(--rw-text);
}

.card:hover, .rw-card:hover {
    box-shadow: var(--rw-shadow), var(--rw-glow-verdant);
}

a .card:hover, a .rw-card:hover,
a.text-decoration-none .card:hover {
    border-color: var(--rw-border-verdant);
    transform: translateY(-2px);
    box-shadow: var(--rw-shadow), var(--rw-glow-verdant);
}

.card-title {
    font-family: var(--rw-font-sc);
    color: var(--rw-sage-cream);
}

.card-text {
    color: var(--rw-text-dim) !important;
    font-size: 0.85rem;
}

.card-body {
    padding: 1.25rem;
}

/* List groups — dark theme override */
.list-group-item {
    --bs-list-group-bg: var(--rw-bg-panel);
    --bs-list-group-color: var(--rw-text);
    --bs-list-group-border-color: var(--rw-border);
    --bs-list-group-action-hover-bg: var(--rw-bg-moss);
    --bs-list-group-action-hover-color: var(--rw-text-bright);
    --bs-list-group-action-active-bg: var(--rw-bg-moss-2);
    --bs-list-group-action-active-color: var(--rw-text-bright);
    background: var(--rw-bg-panel);
    color: var(--rw-text);
    border-color: var(--rw-border);
}

/* Tables — styled like data-table from prototype */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--rw-text);
    --bs-table-border-color: var(--rw-border);
    --bs-table-striped-bg: rgba(61, 138, 85, 0.04);
    --bs-table-hover-bg: rgba(61, 138, 85, 0.08);
    --bs-table-hover-color: var(--rw-text-bright);
    border-color: var(--rw-border);
    font-size: 0.88rem;
}

.table thead th {
    font-family: var(--rw-font-sc);
    color: var(--rw-sage-tan);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rw-border);
    padding: 0.65rem 0.75rem;
    font-weight: 400;
    background: var(--rw-bg-panel);
}

.table tbody tr {
    transition: background-color 0.1s ease;
    background: var(--rw-bg-bark);
}

.table tbody tr:nth-child(even) {
    background: var(--rw-bg-panel);
}

.table tbody tr:hover {
    background: var(--rw-bg-moonlit);
}

.table tbody td {
    padding: 0.55rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--rw-border);
    color: var(--rw-sage-cream);
}

.table tbody td:first-child {
    font-weight: 600;
    transition: color 0.1s ease;
}

.table tbody tr:hover td:first-child {
    color: var(--rw-gold-light);
}

.table tbody tr[style*="cursor: pointer"]:hover td:first-child {
    color: var(--rw-gold-light);
}

/* Forms — tome-style inputs */
.form-control, .form-select {
    font-family: var(--rw-font-body);
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--rw-bg-void);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-sm);
    color: var(--rw-text);
    transition: border-color var(--rw-transition);
}

.form-control:focus, .form-select:focus {
    background-color: var(--rw-bg-void);
    color: var(--rw-text);
    border-color: var(--rw-verdant);
    box-shadow: 0 0 0 2px var(--rw-verdant-glow);
}

.form-control:disabled, .form-select:disabled {
    background-color: var(--rw-bg-bark);
    color: var(--rw-text-faint);
    border-color: var(--rw-border);
    opacity: 1;
}

.form-control::placeholder {
    color: var(--rw-text-faint);
}

.form-label {
    color: var(--rw-text-dim);
    font-family: var(--rw-font-ui);
    font-size: 0.85rem;
    font-weight: 500;
}

.form-check-input {
    background-color: var(--rw-bg-void);
    border-color: var(--rw-border);
}

.form-check-input:checked {
    background-color: var(--rw-verdant);
    border-color: var(--rw-verdant);
}

.form-check-label {
    color: var(--rw-text-dim);
}

.form-select option {
    background-color: var(--rw-bg-panel);
    color: var(--rw-text);
}

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

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

/* Validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--rw-verdant);
}

.invalid {
    outline: 1px solid var(--rw-blood-bright);
}

.validation-message {
    color: var(--rw-blood-bright);
    font-size: 0.85rem;
}

/* Buttons */
.btn {
    font-family: var(--rw-font-sc);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    border-radius: var(--rw-radius-sm);
    transition: all var(--rw-transition);
    padding: 0.4rem 1rem;
}

.btn-primary {
    background: var(--rw-verdant);
    border-color: var(--rw-verdant);
    color: #fff;
    font-weight: 700;
}

.btn-primary:hover {
    background: var(--rw-verdant-bright);
    border-color: var(--rw-verdant-bright);
    color: #fff;
    box-shadow: 0 0 16px var(--rw-verdant-glow);
}

.btn-outline-primary {
    color: var(--rw-verdant-bright);
    border-color: var(--rw-verdant);
}

.btn-outline-primary:hover {
    background: var(--rw-verdant);
    border-color: var(--rw-verdant);
    color: #fff;
}

.btn-outline-light {
    color: var(--rw-sage-cream);
    border-color: var(--rw-border-gold);
    font-family: var(--rw-font-sc);
}

.btn-outline-light:hover {
    background: var(--rw-gold-ember);
    border-color: var(--rw-gold);
    color: var(--rw-gold-glow);
}

.btn-light {
    background: var(--rw-gold);
    border-color: var(--rw-gold);
    color: var(--rw-bg-void);
    font-weight: 700;
}

.btn-light:hover {
    background: var(--rw-gold-light);
    border-color: var(--rw-gold-light);
    color: var(--rw-bg-void);
}

.btn-success {
    background: var(--rw-verdant);
    border-color: var(--rw-verdant);
}

.btn-success:hover {
    background: var(--rw-verdant-bright);
    border-color: var(--rw-verdant-bright);
}

.btn-danger {
    background: var(--rw-blood);
    border-color: var(--rw-blood);
}

.btn-danger:hover {
    background: var(--rw-blood-bright);
    border-color: var(--rw-blood-bright);
}

.btn-outline-secondary {
    color: var(--rw-text-dim);
    border-color: var(--rw-border);
}

.btn-outline-secondary:hover {
    background: var(--rw-bg-moonlit);
    border-color: var(--rw-verdant-deep);
    color: var(--rw-text);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 2px var(--rw-verdant-glow);
}

/* Alerts */
.alert {
    border-radius: var(--rw-radius-md);
    font-family: var(--rw-font-body);
}

.alert-danger {
    background: rgba(146, 38, 16, 0.2);
    border-color: var(--rw-blood);
    color: #e8a090;
}

.alert-info {
    background: rgba(58, 128, 168, 0.15);
    border-color: var(--rw-arcane-blue);
    color: #90c8e8;
}

.alert-success {
    background: rgba(61, 138, 85, 0.2);
    border-color: var(--rw-verdant);
    color: #90e8a8;
}

.alert-warning {
    background: rgba(196, 160, 64, 0.15);
    border-color: var(--rw-gold);
    color: var(--rw-gold-light);
}

/* Badges */
.badge {
    font-family: var(--rw-font-sc);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.badge.bg-primary, .badge.bg-info {
    background: var(--rw-arcane-blue) !important;
    color: #d0e8f8;
}

.badge.bg-success {
    background: var(--rw-verdant) !important;
}

.badge.bg-danger {
    background: var(--rw-blood) !important;
}

.badge.bg-secondary {
    background: var(--rw-bg-moonlit) !important;
    color: var(--rw-text-dim);
}

.badge.bg-warning {
    background: var(--rw-gold) !important;
    color: var(--rw-bg-void);
}

/* Pagination */
.pagination {
    --bs-pagination-bg: var(--rw-bg-panel);
    --bs-pagination-color: var(--rw-text-dim);
    --bs-pagination-border-color: var(--rw-border);
    --bs-pagination-hover-bg: var(--rw-bg-moonlit);
    --bs-pagination-hover-color: var(--rw-verdant-bright);
    --bs-pagination-hover-border-color: var(--rw-verdant-deep);
    --bs-pagination-active-bg: var(--rw-verdant-deep);
    --bs-pagination-active-color: var(--rw-text-bright);
    --bs-pagination-active-border-color: var(--rw-verdant);
    --bs-pagination-disabled-bg: var(--rw-bg-void);
    --bs-pagination-disabled-color: var(--rw-text-faint);
    --bs-pagination-disabled-border-color: var(--rw-border);
}

.page-link {
    font-family: var(--rw-font-ui);
    font-size: 0.85rem;
}

/* Nav tabs */
.nav-tabs {
    border-bottom-color: var(--rw-border);
}

.nav-tabs .nav-link {
    color: var(--rw-text-dim);
    font-family: var(--rw-font-sc);
    font-size: 0.88rem;
    border: none;
    border-bottom: 2px solid transparent;
    transition: all var(--rw-transition);
    padding: 0.6rem 1rem;
}

.nav-tabs .nav-link:hover {
    color: var(--rw-verdant-bright);
    border-bottom-color: var(--rw-verdant-deep);
    background: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--rw-verdant-bright);
    border-bottom-color: var(--rw-verdant);
    background: transparent;
}

/* Progress bars */
.progress {
    background-color: var(--rw-bg-void);
    border-radius: var(--rw-radius-sm);
}

/* Modals */
.modal-content {
    background: var(--rw-bg-panel);
    border: 1px solid var(--rw-border-gold);
    color: var(--rw-text);
}

.modal-header { border-bottom-color: var(--rw-border); }
.modal-footer { border-top-color: var(--rw-border); }

/* Dropdowns */
.dropdown-menu {
    background: var(--rw-bg-panel);
    border: 1px solid var(--rw-border);
    box-shadow: var(--rw-shadow-deep);
}

.dropdown-item { color: var(--rw-text); }

.dropdown-item:hover {
    background: var(--rw-verdant-glow);
    color: var(--rw-verdant-bright);
}

/* Text utilities */
.text-muted { color: var(--rw-text-faint) !important; }
.text-primary { color: var(--rw-verdant-bright) !important; }
.text-danger { color: var(--rw-blood-bright) !important; }
.text-success { color: var(--rw-verdant-bright) !important; }

/* =============================================================
   CUSTOM COMPONENTS — THE TOME DESIGN SYSTEM
   ============================================================= */

/* --- Page Hero / Header --- */
.page-hero {
    text-align: center;
    padding: 3rem 0 2rem;
    position: relative;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 500px;
    height: 100%;
    background: radial-gradient(ellipse at center, var(--rw-verdant-glow) 0%, transparent 70%);
    pointer-events: none;
}

.page-hero h1 {
    font-family: var(--rw-font-display);
    font-size: 2.6rem;
    color: var(--rw-gold-light);
    text-shadow:
        0 0 40px rgba(196, 160, 64, 0.15),
        0 2px 0 rgba(0,0,0,0.3);
    position: relative;
    margin-bottom: 0.5rem;
    letter-spacing: 0.03em;
}

/* --- Ornamental Divider --- */
.ornament {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    margin: 1.5rem 0;
    color: var(--rw-sage-dark);
}

.ornament::before, .ornament::after {
    content: '';
    height: 1px;
    width: 60px;
    background: linear-gradient(90deg, transparent, var(--rw-sage-dark), transparent);
}

.ornament-diamond {
    width: 6px;
    height: 6px;
    background: var(--rw-verdant);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* --- Section Headers --- */
.section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.section-header h2 {
    font-family: var(--rw-font-sc);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--rw-text-faint);
    white-space: nowrap;
}

.section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--rw-border), transparent);
}

/* --- War Table: Quick Action Grid --- */
.war-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--rw-border);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-sm);
    overflow: hidden;
    margin-bottom: 2rem;
}

.war-table-action {
    background: var(--rw-bg-panel);
    padding: 1.1rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all var(--rw-transition);
    text-decoration: none;
    color: var(--rw-text);
    border: none;
    font-family: var(--rw-font-ui);
    font-size: 0.85rem;
    text-align: left;
}

.war-table-action:hover {
    background: var(--rw-bg-moonlit);
    color: var(--rw-verdant-bright);
}

.war-table-action:hover .wta-icon {
    border-color: var(--rw-verdant);
    color: var(--rw-verdant-bright);
    box-shadow: 0 0 12px var(--rw-verdant-glow);
}

.wta-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-sm);
    background: var(--rw-bg-moss);
    color: var(--rw-text-dim);
    font-size: 1rem;
    flex-shrink: 0;
    transition: all var(--rw-transition);
}

.wta-label {
    line-height: 1.3;
}

.wta-label small {
    display: block;
    font-size: 0.7rem;
    color: var(--rw-text-faint);
    margin-top: 1px;
}

/* --- Grimoire Grid: Compendium Cards --- */
.grimoire-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rw-border);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-sm);
    overflow: hidden;
}

.grimoire-entry {
    background: var(--rw-bg-panel);
    padding: 1.25rem;
    text-decoration: none;
    color: var(--rw-text);
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.grimoire-entry:hover {
    background: var(--rw-bg-moonlit);
}

.grimoire-entry:hover .ge-title {
    color: var(--rw-verdant-bright);
}

.grimoire-entry:hover .ge-icon {
    border-color: var(--rw-verdant);
    box-shadow: 0 0 8px var(--rw-verdant-glow);
}

.ge-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rw-border);
    border-radius: 3px;
    background: var(--rw-bg-moss-2);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.ge-icon svg {
    width: 18px;
    height: 18px;
    color: var(--rw-sage-tan);
}

.ge-title {
    font-family: var(--rw-font-sc);
    font-size: 0.92rem;
    color: var(--rw-sage-cream);
    margin-bottom: 0.15rem;
    transition: color var(--rw-transition);
}

.ge-desc {
    font-size: 0.78rem;
    color: var(--rw-text-faint);
    line-height: 1.4;
}

/* --- Compendium Card Grid: Entity Browse Cards --- */
.compendium-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 0.75rem;
}

.compendium-card {
    display: flex;
    align-items: stretch;
    background: var(--rw-bg-panel);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    text-decoration: none;
    color: var(--rw-text);
    overflow: hidden;
    transition: background var(--rw-transition),
                border-color var(--rw-transition),
                box-shadow var(--rw-transition);
}

.compendium-card:hover {
    background: var(--rw-bg-moonlit);
    border-color: var(--rw-border-verdant);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4),
                0 0 12px rgba(61,138,85,0.06);
}

.compendium-card-img {
    width: 80px;
    min-height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rw-bg-moss-2);
    border-right: 1px solid var(--rw-border);
    padding: 0.5rem;
    transition: background var(--rw-transition);
}

.compendium-card:hover .compendium-card-img {
    background: rgba(20, 42, 50, 0.9);
}

.compendium-card-img img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    transition: transform 0.25s ease, filter 0.25s ease;
}

.compendium-card:hover .compendium-card-img img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(61,138,85,0.4))
           drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.compendium-card-body {
    flex: 1;
    padding: 0.65rem 0.9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
}

.compendium-card-name {
    font-family: var(--rw-font-sc);
    font-size: 0.95rem;
    color: var(--rw-sage-cream);
    transition: color var(--rw-transition);
}

.compendium-card:hover .compendium-card-name {
    color: var(--rw-verdant-bright);
}

.compendium-card-props {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.compendium-card-chip {
    font-family: var(--rw-font-ui);
    font-size: 0.72rem;
    color: var(--rw-text-dim);
    background: var(--rw-bg-moss);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-sm);
    padding: 0.1rem 0.4rem;
    white-space: nowrap;
}

.compendium-card-chip--gold {
    border-color: var(--rw-border-gold);
    background: var(--rw-gold-ember);
    color: var(--rw-gold-light);
}

.compendium-card-chip--arcane {
    border-color: rgba(58, 128, 168, 0.3);
    background: var(--rw-arcane-glow);
    color: var(--rw-arcane-cyan);
}

.compendium-card-meta {
    font-family: var(--rw-font-ui);
    font-size: 0.72rem;
    color: var(--rw-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .compendium-card-grid {
        grid-template-columns: 1fr;
    }
    .compendium-card-img {
        width: 64px;
        min-height: 64px;
    }
}

/* --- Stat Block (D&D 5e) --- */
.stat-block {
    max-width: 620px;
    background:
        linear-gradient(135deg, var(--rw-bg-moss) 0%, var(--rw-bg-moss-2) 100%);
    border: 1px solid var(--rw-border) !important;
    border-radius: 2px;
    position: relative;
    padding: 1.5rem;
    box-shadow: var(--rw-shadow);
}

/* Top & bottom tapered borders (classic 5e) */
.stat-block::before,
.stat-block::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 5px;
    background:
        linear-gradient(90deg, transparent 0%, var(--rw-blood) 15%, var(--rw-blood) 85%, transparent 100%);
}
.stat-block::before { top: 0; }
.stat-block::after { bottom: 0; }

.stat-block h2 {
    color: var(--rw-blood-bright);
    font-family: var(--rw-font-display);
}

.stat-block h5 {
    color: var(--rw-blood-bright);
    font-family: var(--rw-font-display);
}

/* Tapered separator */
.rw-divider, .sb-sep {
    height: 2px;
    border: none;
    margin: 0.6rem 0;
    background:
        linear-gradient(90deg, transparent 0%, var(--rw-blood) 15%, var(--rw-blood) 85%, transparent 100%);
    opacity: 0.5;
}

.stat-block strong {
    color: var(--rw-sage-cream);
}

.rw-stat-label {
    font-family: var(--rw-font-sc);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rw-text-dim);
}

.rw-stat-value {
    font-family: var(--rw-font-body);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rw-sage-cream);
}

/* --- Badges (spell tags) --- */
.badge-tome {
    font-family: var(--rw-font-sc);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 2px;
    border: 1px solid;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.4;
}

.badge-conc {
    border-color: var(--rw-arcane-teal);
    color: var(--rw-arcane-cyan);
    background: rgba(46, 136, 144, 0.1);
}

.badge-ritual {
    border-color: var(--rw-arcane-purple);
    color: #9a7aba;
    background: rgba(106, 74, 138, 0.1);
}

/* --- Tome-style Buttons --- */
.btn-tome {
    font-family: var(--rw-font-sc);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--rw-border-gold);
    border-radius: var(--rw-radius-sm);
    background: transparent;
    color: var(--rw-gold);
    cursor: pointer;
    transition: all var(--rw-transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-tome:hover {
    background: var(--rw-gold-ember);
    border-color: var(--rw-gold);
    color: var(--rw-gold-glow);
}

.btn-tome-primary {
    background: var(--rw-verdant);
    color: #fff;
    border-color: var(--rw-verdant);
    font-weight: 700;
}

.btn-tome-primary:hover {
    background: var(--rw-verdant-bright);
    border-color: var(--rw-verdant-bright);
    box-shadow: 0 0 16px var(--rw-verdant-glow);
    color: #fff;
}

/* --- Parchment Card Variant --- */
.rw-parchment {
    background: linear-gradient(135deg, var(--rw-bg-moss), var(--rw-bg-moss-2));
    border: 1px solid var(--rw-border);
    color: var(--rw-sage-cream);
}

/* --- Back Link --- */
.rw-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--rw-text-dim);
    text-decoration: none;
    font-family: var(--rw-font-ui);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    transition: color var(--rw-transition);
}

.rw-back-link:hover {
    color: var(--rw-verdant-bright);
}

/* --- Gold / Verdant Border Accents --- */
.rw-border-gold {
    border-left: 3px solid var(--rw-gold) !important;
}

.rw-border-verdant {
    border-left: 3px solid var(--rw-verdant) !important;
}

/* Marker diamond */
.rw-marker {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--rw-verdant);
    transform: rotate(45deg);
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Glowing text */
.rw-glow {
    text-shadow: 0 0 8px var(--rw-verdant-glow);
}

/* --- Spell Card --- */
.spell-card {
    background: linear-gradient(135deg, #0e1c2e, #122840);
    border: 1px solid var(--rw-arcane-blue) !important;
    border-left: 4px solid var(--rw-arcane-blue) !important;
    color: var(--rw-text);
    max-width: 640px;
    box-shadow: var(--rw-shadow);
}

/* --- Compendium Card --- */
.rw-compendium-card {
    border-color: var(--rw-border);
    min-height: 160px;
}

.rw-compendium-card .card-title {
    font-size: 1.1rem;
}

.rw-compendium-card .card-text {
    font-size: 0.85rem;
}

.rw-compendium-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1;
}

/* =============================================================
   FIREFLY PARTICLE SYSTEM
   ============================================================= */

.fireflies {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.firefly {
    position: absolute;
    border-radius: 50%;
    animation: firefly-float linear infinite, firefly-glow ease-in-out infinite;
    opacity: 0;
}

/* Generate varied fireflies via nth-child */
.firefly:nth-child(1)  { width: 4px; height: 4px; left: 8%;  top: 15%; background: rgba(80,176,104,0.8); box-shadow: 0 0 6px 2px rgba(80,176,104,0.4); animation-duration: 18s, 3.2s; animation-delay: 0s, 0s; }
.firefly:nth-child(2)  { width: 3px; height: 3px; left: 22%; top: 45%; background: rgba(196,160,64,0.7); box-shadow: 0 0 6px 2px rgba(196,160,64,0.3); animation-duration: 22s, 4.1s; animation-delay: 2s, 0.5s; }
.firefly:nth-child(3)  { width: 5px; height: 5px; left: 55%; top: 70%; background: rgba(72,176,192,0.6); box-shadow: 0 0 8px 3px rgba(72,176,192,0.3); animation-duration: 25s, 3.8s; animation-delay: 4s, 1s; }
.firefly:nth-child(4)  { width: 3px; height: 3px; left: 75%; top: 25%; background: rgba(80,176,104,0.7); box-shadow: 0 0 5px 2px rgba(80,176,104,0.35); animation-duration: 20s, 2.9s; animation-delay: 1s, 0.3s; }
.firefly:nth-child(5)  { width: 4px; height: 4px; left: 40%; top: 85%; background: rgba(196,160,64,0.6); box-shadow: 0 0 7px 2px rgba(196,160,64,0.3); animation-duration: 28s, 4.5s; animation-delay: 6s, 1.5s; }
.firefly:nth-child(6)  { width: 3px; height: 3px; left: 90%; top: 55%; background: rgba(80,176,104,0.8); box-shadow: 0 0 6px 2px rgba(80,176,104,0.4); animation-duration: 16s, 3.5s; animation-delay: 3s, 0.8s; }
.firefly:nth-child(7)  { width: 4px; height: 4px; left: 15%; top: 75%; background: rgba(72,176,192,0.5); box-shadow: 0 0 8px 3px rgba(72,176,192,0.25); animation-duration: 24s, 4.0s; animation-delay: 5s, 2s; }
.firefly:nth-child(8)  { width: 3px; height: 3px; left: 65%; top: 10%; background: rgba(196,160,64,0.7); box-shadow: 0 0 5px 2px rgba(196,160,64,0.3); animation-duration: 21s, 3.3s; animation-delay: 7s, 0.2s; }
.firefly:nth-child(9)  { width: 5px; height: 5px; left: 35%; top: 35%; background: rgba(80,176,104,0.6); box-shadow: 0 0 10px 3px rgba(80,176,104,0.3); animation-duration: 26s, 5.0s; animation-delay: 0s, 1.2s; }
.firefly:nth-child(10) { width: 3px; height: 3px; left: 85%; top: 80%; background: rgba(72,176,192,0.7); box-shadow: 0 0 6px 2px rgba(72,176,192,0.35); animation-duration: 19s, 3.6s; animation-delay: 8s, 0.6s; }
.firefly:nth-child(11) { width: 4px; height: 4px; left: 50%; top: 50%; background: rgba(196,160,64,0.5); box-shadow: 0 0 8px 3px rgba(196,160,64,0.25); animation-duration: 30s, 4.8s; animation-delay: 2s, 1.8s; }
.firefly:nth-child(12) { width: 3px; height: 3px; left: 5%;  top: 90%; background: rgba(80,176,104,0.7); box-shadow: 0 0 5px 2px rgba(80,176,104,0.3); animation-duration: 23s, 3.1s; animation-delay: 9s, 0.4s; }
.firefly:nth-child(13) { width: 4px; height: 4px; left: 70%; top: 40%; background: rgba(72,176,192,0.6); box-shadow: 0 0 7px 2px rgba(72,176,192,0.3); animation-duration: 17s, 4.3s; animation-delay: 4s, 2.2s; }
.firefly:nth-child(14) { width: 3px; height: 3px; left: 28%; top: 60%; background: rgba(80,176,104,0.8); box-shadow: 0 0 6px 2px rgba(80,176,104,0.4); animation-duration: 27s, 3.7s; animation-delay: 6s, 0.9s; }
.firefly:nth-child(15) { width: 5px; height: 5px; left: 95%; top: 20%; background: rgba(196,160,64,0.6); box-shadow: 0 0 10px 4px rgba(196,160,64,0.3); animation-duration: 32s, 5.2s; animation-delay: 1s, 1.4s; }

@keyframes firefly-float {
    0%   { transform: translate(0, 0) rotate(0deg); }
    20%  { transform: translate(30px, -60px) rotate(72deg); }
    40%  { transform: translate(-20px, -120px) rotate(144deg); }
    60%  { transform: translate(40px, -80px) rotate(216deg); }
    80%  { transform: translate(-30px, -40px) rotate(288deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes firefly-glow {
    0%, 100% { opacity: 0; }
    15%      { opacity: 0.9; }
    50%      { opacity: 0.3; }
    85%      { opacity: 0.8; }
}

/* =============================================================
   SCENE BANNERS — Immersive imagery headers
   ============================================================= */

.scene-banner {
    position: relative;
    border-radius: var(--rw-radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
    border: 1px solid rgba(188, 206, 198, 0.06);
}

.scene-banner > img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    filter: brightness(0.6);
    transition: filter 0.4s ease;
}

.scene-banner:hover > img {
    filter: brightness(0.75);
}

.scene-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(7,14,20,0.3) 0%, rgba(7,14,20,0.7) 100%);
    padding: 2rem;
}

.scene-banner-overlay h1 {
    font-family: var(--rw-font-display);
    font-size: 2.8rem;
    color: var(--rw-gold-light);
    text-shadow: 0 0 40px rgba(196,160,64,0.2), 0 2px 4px rgba(0,0,0,0.6);
    margin-bottom: 0.5rem;
    letter-spacing: 0.04em;
}

.hero-label {
    max-width: 100%;
    max-height: 60%;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    filter: none;
}

.scene-banner-overlay p {
    color: var(--rw-sage-tan);
    font-style: italic;
    font-size: 1.05rem;
    margin: 0;
}

/* =============================================================
   IMAGE ICONS — Hand-painted medallion icons
   ============================================================= */

.ge-icon-img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    transition: all 0.25s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.ge-icon-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.grimoire-entry:hover .ge-icon-img {
    transform: scale(1.12);
    filter: drop-shadow(0 0 10px rgba(61,138,85,0.4)) drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.wta-icon-img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    transition: all 0.25s ease;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

.wta-icon-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.war-table-action:hover .wta-icon-img {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 0 8px rgba(61,138,85,0.4)) drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

/* =============================================================
   AUTH SCENE — Atmospheric login/register
   ============================================================= */

.auth-scene {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    position: relative;
}

.auth-scene-art {
    position: absolute;
    inset: -2rem;
    z-index: 0;
    overflow: hidden;
    border-radius: var(--rw-radius-lg);
}

.auth-scene-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.3) blur(2px);
}

.auth-scene-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(7,14,20,0.4) 0%, rgba(7,14,20,0.85) 100%);
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: rgba(15, 32, 40, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(188, 206, 198, 0.08);
    border-radius: var(--rw-radius-lg);
    padding: 2.5rem;
    box-shadow: var(--rw-shadow-deep), 0 0 80px rgba(61,138,85,0.04);
}

.auth-card h3 {
    font-family: var(--rw-font-display);
    color: var(--rw-gold-light);
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    text-shadow: 0 0 20px rgba(196,160,64,0.15);
}

/* --- Social login divider & buttons --- */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(188, 206, 198, 0.08);
}

.auth-divider span {
    font-family: var(--rw-font-ui);
    font-size: 0.78rem;
    color: var(--rw-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.auth-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(188, 206, 198, 0.08);
    border-radius: 8px;
    background: rgba(188, 206, 198, 0.04);
    color: var(--rw-text-dim);
    font-family: var(--rw-font-ui);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-social:hover {
    background: rgba(188, 206, 198, 0.08);
    border-color: rgba(188, 206, 198, 0.14);
    color: var(--rw-text-bright);
}

.btn-social svg {
    flex-shrink: 0;
}

/* =============================================================
   ANIMATIONS
   ============================================================= */

/* Fade in up */
@keyframes rw-fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rw-fade-in {
    animation: rw-fade-in-up 0.4s ease-out;
}

/* Staggered reveals */
.reveal {
    opacity: 0;
    transform: translateY(8px);
    animation: rw-fade-in-up 0.4s ease-out forwards;
}
.reveal-d1 { animation-delay: 0.06s; }
.reveal-d2 { animation-delay: 0.12s; }
.reveal-d3 { animation-delay: 0.18s; }
.reveal-d4 { animation-delay: 0.24s; }

/* Parchment unfurl */
@keyframes rw-unfurl {
    from { opacity: 0; max-height: 0; transform: scaleY(0.8); transform-origin: top; }
    to   { opacity: 1; max-height: 2000px; transform: scaleY(1); transform-origin: top; }
}
.rw-unfurl { animation: rw-unfurl 0.4s ease-out; }

/* Ink blot loader */
@keyframes rw-ink-pulse {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; }
    40%           { transform: scale(1); opacity: 1; }
}

.rw-loader {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.rw-loader-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rw-verdant-bright);
    animation: rw-ink-pulse 1.4s ease-in-out infinite;
}
.rw-loader-dot:nth-child(2) { animation-delay: 0.15s; }
.rw-loader-dot:nth-child(3) { animation-delay: 0.3s; }

/* =============================================================
   SKELETON LOADERS
   ============================================================= */

@keyframes rw-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton-bone {
    background: linear-gradient(
        90deg,
        var(--rw-bg-moss) 0%,
        var(--rw-bg-moonlit) 40%,
        var(--rw-bg-moss) 80%
    );
    background-size: 800px 100%;
    animation: rw-shimmer 1.8s ease-in-out infinite;
    border-radius: var(--rw-radius-sm);
}

.skeleton-card {
    display: flex;
    align-items: stretch;
    background: var(--rw-bg-panel);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-md);
    overflow: hidden;
    min-height: 80px;
}

.skeleton-card-img {
    width: 80px;
    min-height: 80px;
    flex-shrink: 0;
    border-right: 1px solid var(--rw-border);
}

.skeleton-card-body {
    flex: 1;
    padding: 0.65rem 0.9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
}

.skeleton-card-name  { height: 0.95rem; width: 60%; }
.skeleton-card-chips { display: flex; gap: 0.35rem; }
.skeleton-card-chip  { height: 0.72rem; width: 3.2rem; }
.skeleton-card-meta  { height: 0.72rem; width: 40%; }

.skeleton-result-count {
    height: 0.8rem;
    width: 7rem;
    margin-bottom: 0.75rem;
}

/* Simple list page skeletons */
.skeleton-simple-card {
    background: var(--rw-bg-panel);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-simple-title       { height: 1.1rem; width: 55%; }
.skeleton-simple-line        { height: 0.8rem; width: 70%; }
.skeleton-simple-line--short { width: 45%; }

/* Table row skeletons */
.skeleton-table-cell        { height: 0.9rem; }
.skeleton-table-cell--name  { width: 30%; }
.skeleton-table-cell--wide  { width: 65%; }

/* Detail / stat-block skeletons */
.skeleton-detail-block {
    max-width: 620px;
    background: linear-gradient(135deg, var(--rw-bg-moss) 0%, var(--rw-bg-moss-2) 100%);
    border: 1px solid var(--rw-border);
    border-radius: 2px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-detail-title       { height: 1.5rem; width: 45%; }
.skeleton-detail-subtitle    { height: 0.85rem; width: 60%; }
.skeleton-detail-sep         { height: 1px; background: var(--rw-border); width: 100%; }
.skeleton-detail-line        { height: 0.85rem; width: 80%; }
.skeleton-detail-line--short { width: 50%; }
.skeleton-detail-line--full  { width: 95%; }

.skeleton-ability-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.skeleton-ability-box {
    width: 3rem;
    height: 2.5rem;
    border-radius: var(--rw-radius-sm);
}

/* Candle glow pulse (for featured elements) */
@keyframes rw-candle-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(61, 138, 85, 0.08); }
    50%      { box-shadow: 0 0 25px rgba(61, 138, 85, 0.2); }
}
.rw-candle-glow { animation: rw-candle-glow 3s ease-in-out infinite; }

/* Dice roll spin */
@keyframes rw-dice-roll {
    0%   { transform: rotate(0deg) scale(1); }
    25%  { transform: rotate(90deg) scale(1.1); }
    50%  { transform: rotate(180deg) scale(1); }
    75%  { transform: rotate(270deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}
.rw-dice-rolling { animation: rw-dice-roll 0.6s ease-in-out; }

/* Shimmer skeleton */
@keyframes rw-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.rw-skeleton {
    background: linear-gradient(90deg, var(--rw-bg-panel) 25%, var(--rw-bg-moonlit) 50%, var(--rw-bg-panel) 75%);
    background-size: 200% 100%;
    animation: rw-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--rw-radius-sm);
}

/* =============================================================
   COMMAND PALETTE
   ============================================================= */

.rw-command-palette-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9998;
    display: flex;
    justify-content: center;
    padding-top: 18vh;
}

.rw-command-palette {
    width: min(520px, 90vw);
    background: var(--rw-bg-panel);
    border: 1px solid var(--rw-border-gold);
    border-radius: var(--rw-radius-md);
    box-shadow: var(--rw-shadow-deep), 0 0 60px rgba(61,138,85,0.04);
    overflow: hidden;
    align-self: flex-start;
    animation: cmd-enter 0.15s ease-out;
}

@keyframes cmd-enter {
    from { transform: scale(0.97) translateY(-4px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

.rw-command-palette input {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--rw-font-body);
    font-size: 1rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rw-border);
    color: var(--rw-text-bright);
    outline: none;
}

.rw-command-palette input::placeholder { color: var(--rw-text-faint); }

.rw-command-palette-results {
    padding: 0.4rem;
    max-height: 300px;
    overflow-y: auto;
}

.rw-command-palette-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--rw-radius-sm);
    cursor: pointer;
    font-family: var(--rw-font-ui);
    font-size: 0.88rem;
    color: var(--rw-text);
    transition: background 0.08s ease;
}

.rw-command-palette-item:hover,
.rw-command-palette-item.selected {
    background: var(--rw-verdant-glow);
    color: var(--rw-verdant-bright);
}

.rw-command-palette-item-hint {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--rw-text-faint);
}

/* --- Role Toggle --- */
.rw-role-toggle {
    display: flex;
    background: var(--rw-bg-void);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-md);
    padding: 3px;
    gap: 2px;
}

.rw-role-toggle-btn {
    flex: 1;
    padding: 0.3rem 0;
    border: none;
    border-radius: 4px;
    font-family: var(--rw-font-sc);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    color: var(--rw-text-faint);
    text-align: center;
}

.rw-role-toggle-btn:hover { color: var(--rw-text); }

.rw-role-toggle-btn.active {
    background: var(--rw-verdant);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* --- Quick Action Panel (legacy compat) --- */
.rw-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.rw-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    background: var(--rw-bg-panel);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-md);
    cursor: pointer;
    transition: all var(--rw-transition);
    text-decoration: none;
    color: var(--rw-text-dim);
    font-family: var(--rw-font-ui);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
}

.rw-quick-action:hover {
    border-color: var(--rw-verdant-deep);
    color: var(--rw-verdant-bright);
    transform: translateY(-1px);
    box-shadow: var(--rw-glow-verdant);
}

.rw-quick-action-icon {
    font-size: 1.5rem;
    line-height: 1;
}

/* --- Dice Display --- */
.rw-dice-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--rw-bg-moss);
    border: 2px solid var(--rw-verdant);
    border-radius: var(--rw-radius-md);
    font-family: var(--rw-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--rw-verdant-bright);
    box-shadow: 0 0 20px var(--rw-verdant-glow);
}

/* --- Ability Score Styling (Stat Block) --- */
.rw-ability-score {
    font-family: var(--rw-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rw-sage-cream);
}

.rw-ability-mod {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--rw-verdant-bright);
}

.rw-section-heading {
    color: var(--rw-blood-bright);
    font-family: var(--rw-font-display);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

/* =============================================================
   BLAZOR ERROR UI
   ============================================================= */

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

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

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

/* =============================================================
   PLANNING — Detail Panel Shared Styles
   ============================================================= */

.rw-detail-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rw-detail-panel__form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rw-detail-panel__loading {
    color: var(--rw-text-faint);
    font-style: italic;
    padding: 1rem 0;
}

.rw-detail-panel__info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(26, 52, 48, 0.4);
}

.rw-detail-panel__info-label {
    font-family: var(--rw-font-sc);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rw-text-faint);
}

.rw-detail-panel__info-value {
    font-family: var(--rw-font-body);
    font-size: 0.9rem;
    color: var(--rw-text);
}

.rw-detail-panel__text {
    font-family: var(--rw-font-body);
    font-size: 0.88rem;
    color: var(--rw-text-dim);
    line-height: 1.6;
    margin: 0;
}

.rw-detail-panel__text--secret {
    color: var(--rw-arcane-cyan);
    font-style: italic;
    border-left: 2px solid var(--rw-arcane-blue);
    padding-left: 0.6rem;
}

.rw-detail-panel__section-title {
    font-family: var(--rw-font-sc);
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--rw-gold);
    margin: 0.5rem 0 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--rw-border-gold);
}

.rw-detail-panel__section-subtitle {
    font-family: var(--rw-font-sc);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rw-text-dim);
    margin: 0 0 0.3rem;
}

.rw-detail-panel__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rw-border);
}

.rw-detail-panel__error {
    font-family: var(--rw-font-ui);
    font-size: 0.78rem;
    color: var(--rw-blood-bright);
    flex: 1;
}


/* Scene card in session detail */
.rw-detail-panel__scene-card {
    padding: 0.5rem 0.65rem;
    background: var(--rw-bg-bark);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-sm);
    margin-bottom: 0.3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.rw-detail-panel__scene-header {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
}

.rw-detail-panel__scene-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(196, 160, 64, 0.1);
    color: var(--rw-gold);
    font-family: var(--rw-font-ui);
    font-size: 0.7rem;
    margin-right: 0.3rem;
}

.rw-detail-panel__event-count {
    font-family: var(--rw-font-ui);
    font-size: 0.7rem;
    color: var(--rw-text-faint);
}

/* Relationship row */
.rw-detail-panel__relationship {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(26, 52, 48, 0.3);
}

.rw-detail-panel__rel-type {
    font-family: var(--rw-font-sc);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rw-gold);
    padding: 0.1rem 0.4rem;
    background: rgba(196, 160, 64, 0.08);
    border-radius: var(--rw-radius-pill);
}

/* Loot entry row */
.rw-detail-panel__loot-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    background: var(--rw-bg-bark);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-sm);
    margin-bottom: 0.2rem;
}

.rw-detail-panel__loot-name {
    font-family: var(--rw-font-body);
    font-size: 0.88rem;
    color: var(--rw-text);
}

.rw-detail-panel__loot-meta {
    font-family: var(--rw-font-ui);
    font-size: 0.72rem;
    color: var(--rw-text-faint);
}

/* Pin row */
.rw-detail-panel__pin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(26, 52, 48, 0.3);
}

.rw-detail-panel__pin-label {
    color: var(--rw-text);
}

.rw-detail-panel__pin-coords {
    font-family: var(--rw-font-ui);
    font-size: 0.72rem;
    color: var(--rw-text-faint);
}

.rw-detail-panel__sub-item {
    padding: 0.3rem 0.5rem;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(26, 52, 48, 0.3);
}

/* Handoff notes from previous session */
.rw-detail-panel__handoff-previous {
    background: rgba(196, 160, 64, 0.06);
    border-left: 3px solid var(--rw-gold);
    padding: 0.5rem 0.75rem;
    border-radius: 0 var(--rw-radius-sm) var(--rw-radius-sm) 0;
    font-size: 0.82rem;
    color: var(--rw-text-dim);
    max-height: 200px;
    overflow-y: auto;
}

.rw-detail-panel__handoff-previous p {
    margin-bottom: 0.3rem;
}

/* Flag editor rows */
.rw-detail-panel__flag-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.rw-detail-panel__flag-select {
    flex: 2;
    min-width: 0;
}

.rw-detail-panel__flag-eq {
    font-family: var(--rw-font-ui);
    font-size: 0.78rem;
    color: var(--rw-text-dim);
    flex-shrink: 0;
}

.rw-detail-panel__flag-value {
    flex: 1;
    min-width: 50px;
}

.rw-detail-panel__flag-remove {
    flex-shrink: 0;
    padding: 0.15rem 0.4rem;
    font-size: 0.85rem;
    line-height: 1;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 768px) {
    .grimoire-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .war-table {
        grid-template-columns: repeat(2, 1fr);
    }
    .page-hero h1 {
        font-size: 1.8rem;
    }
    .rw-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    .grimoire-grid {
        grid-template-columns: 1fr;
    }
    .war-table {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   ANIMATED SECTIONS — Gamified expand/collapse
   ============================================================= */

.rw-section {
    margin-bottom: 1rem;
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-md);
    background: var(--rw-bg-panel);
    overflow: hidden;
}

.rw-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background var(--rw-transition);
    user-select: none;
}

.rw-section-header:hover {
    background: var(--rw-bg-moss);
}

.rw-section-header-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rw-section-header-content h5,
.rw-section-header-content h6 {
    margin: 0;
}

.rw-section-chevron {
    font-size: 0.7rem;
    color: var(--rw-text-faint);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.rw-section-expanded .rw-section-chevron {
    transform: rotate(180deg);
}

/* Height animation via CSS grid */
.rw-section-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.rw-section-body.rw-section-open {
    grid-template-rows: 1fr;
}

.rw-section-body-inner {
    overflow: hidden;
}

.rw-section-open .rw-section-body-inner {
    padding: 0 1rem 1rem;
}

/* --- Theme: Chest (Inventory) --- */
.rw-section-chest .rw-section-header {
    border-bottom: 1px solid transparent;
    transition: background var(--rw-transition), border-color 0.35s;
}

.rw-section-chest.rw-section-expanded .rw-section-header {
    border-bottom-color: var(--rw-border-gold);
    background: linear-gradient(90deg, rgba(196, 160, 64, 0.06), transparent);
}

.rw-section-chest .rw-section-body-inner {
    transform-origin: top center;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

.rw-section-chest .rw-section-body:not(.rw-section-open) .rw-section-body-inner {
    transform: scaleY(0.8);
    opacity: 0;
}

.rw-section-chest .rw-section-body.rw-section-open .rw-section-body-inner {
    transform: scaleY(1);
    opacity: 1;
}

/* Gold shimmer on chest header when expanded */
.rw-section-chest.rw-section-expanded .rw-section-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(196, 160, 64, 0.15), transparent);
    animation: rw-shimmer-sweep 0.8s ease-out forwards;
    pointer-events: none;
}

.rw-section-chest .rw-section-header {
    position: relative;
    overflow: hidden;
}

@keyframes rw-shimmer-sweep {
    from { left: -100%; }
    to { left: 100%; }
}

/* --- Theme: Spellbook --- */
.rw-section-spellbook .rw-section-header {
    border-bottom: 1px solid transparent;
    transition: background var(--rw-transition), border-color 0.35s;
}

.rw-section-spellbook.rw-section-expanded .rw-section-header {
    border-bottom-color: rgba(58, 128, 168, 0.3);
    background: linear-gradient(90deg, rgba(58, 128, 168, 0.08), transparent);
}

.rw-section-spellbook .rw-section-body-inner {
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.rw-section-spellbook .rw-section-body:not(.rw-section-open) .rw-section-body-inner {
    transform: perspective(800px) rotateY(-8deg);
    opacity: 0;
}

.rw-section-spellbook .rw-section-body.rw-section-open .rw-section-body-inner {
    transform: perspective(800px) rotateY(0);
    opacity: 1;
}

/* Arcane glow pulse on spellbook header */
.rw-section-spellbook.rw-section-expanded .rw-section-header-content {
    text-shadow: 0 0 12px rgba(72, 176, 192, 0.3);
}

/* --- Theme: Scroll --- */
.rw-section-scroll .rw-section-body-inner {
    transform-origin: top center;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease 0.05s;
}

.rw-section-scroll .rw-section-body:not(.rw-section-open) .rw-section-body-inner {
    transform: scaleY(0.3);
    opacity: 0;
}

.rw-section-scroll .rw-section-body.rw-section-open .rw-section-body-inner {
    transform: scaleY(1);
    opacity: 1;
}

/* --- Theme: Map --- */
.rw-section-map .rw-section-body-inner {
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.rw-section-map .rw-section-body:not(.rw-section-open) .rw-section-body-inner {
    transform: scale(0.85);
    opacity: 0;
}

.rw-section-map .rw-section-body.rw-section-open .rw-section-body-inner {
    transform: scale(1);
    opacity: 1;
}

/* --- Theme: Default --- */
.rw-section-default .rw-section-body-inner {
    transition: opacity 0.3s ease;
}

.rw-section-default .rw-section-body:not(.rw-section-open) .rw-section-body-inner {
    opacity: 0;
}

.rw-section-default .rw-section-body.rw-section-open .rw-section-body-inner {
    opacity: 1;
}

/* =============================================================
   ENHANCED ANIMATION UTILITIES
   ============================================================= */

/* Entrance animations */
@keyframes rw-anim-slide-up-kf {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes rw-anim-slide-left-kf {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes rw-anim-scale-in-kf {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

.rw-anim-fade-in {
    animation: rw-fade-in-up 0.4s ease-out both;
}

.rw-anim-slide-up {
    animation: rw-anim-slide-up-kf 0.4s ease-out both;
}

.rw-anim-slide-left {
    animation: rw-anim-slide-left-kf 0.4s ease-out both;
}

.rw-anim-scale-in {
    animation: rw-anim-scale-in-kf 0.35s ease-out both;
}

/* Stagger delay classes */
.rw-anim-d1 { animation-delay: 0.05s; }
.rw-anim-d2 { animation-delay: 0.10s; }
.rw-anim-d3 { animation-delay: 0.15s; }
.rw-anim-d4 { animation-delay: 0.20s; }
.rw-anim-d5 { animation-delay: 0.25s; }
.rw-anim-d6 { animation-delay: 0.30s; }
.rw-anim-d7 { animation-delay: 0.35s; }
.rw-anim-d8 { animation-delay: 0.40s; }

/* Hover micro-interactions */
.rw-hover-glow {
    transition: box-shadow var(--rw-transition);
}
.rw-hover-glow:hover {
    box-shadow: 0 0 20px var(--rw-verdant-glow), var(--rw-shadow);
}

.rw-hover-lift {
    transition: transform var(--rw-transition), box-shadow var(--rw-transition);
}
.rw-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--rw-shadow-deep);
}

.rw-hover-pulse {
    transition: transform var(--rw-transition);
}
.rw-hover-pulse:hover {
    animation: rw-hover-pulse-kf 0.4s ease-in-out;
}

@keyframes rw-hover-pulse-kf {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Stat flash effects */
@keyframes rw-flash-up {
    0% { color: var(--rw-verdant-bright); text-shadow: 0 0 12px rgba(80, 176, 104, 0.6); }
    100% { color: inherit; text-shadow: none; }
}

@keyframes rw-flash-down {
    0% { color: var(--rw-blood-bright); text-shadow: 0 0 12px rgba(184, 58, 26, 0.6); }
    100% { color: inherit; text-shadow: none; }
}

.rw-stat-flash-up {
    animation: rw-flash-up 0.6s ease-out;
}

.rw-stat-flash-down {
    animation: rw-flash-down 0.6s ease-out;
}

/* Dice crit/fumble */
@keyframes rw-crit-flash {
    0% { box-shadow: 0 0 0 0 rgba(196, 160, 64, 0.8); }
    50% { box-shadow: 0 0 30px 10px rgba(196, 160, 64, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(196, 160, 64, 0); }
}

@keyframes rw-fumble-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-4px); }
    30% { transform: translateX(4px); }
    45% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-1px); }
    90% { transform: translateX(1px); }
}

.rw-dice-crit {
    animation: rw-crit-flash 0.8s ease-out;
}

.rw-dice-fumble {
    animation: rw-fumble-shake 0.5s ease-out;
}

/* Die wobble on hover */
@keyframes rw-die-wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

.rw-die-btn:hover {
    animation: rw-die-wobble 0.3s ease-in-out;
}

/* Button gold shimmer */
.btn-tome {
    position: relative;
    overflow: hidden;
}

.btn-tome::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(196, 160, 64, 0.2), transparent);
    transition: left 0.4s ease;
    pointer-events: none;
}

.btn-tome:hover::after {
    left: 100%;
}

/* =============================================================
   COMPENDIUM SEARCH PANEL
   ============================================================= */

.rw-compendium-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1039;
}

.rw-compendium-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    height: 100vh;
    background: var(--rw-bg-bark);
    border-left: 1px solid var(--rw-border-gold);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
}

.rw-compendium-panel.open {
    transform: translateX(0);
}

.rw-compendium-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--rw-border);
}

.rw-compendium-panel-header h5 {
    margin: 0;
    font-family: var(--rw-font-sc);
    color: var(--rw-gold-light);
    font-size: 1rem;
}

.rw-compendium-tabs {
    display: flex;
    border-bottom: 1px solid var(--rw-border);
}

.rw-compendium-tabs button {
    flex: 1;
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--rw-text-dim);
    font-family: var(--rw-font-sc);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all var(--rw-transition);
}

.rw-compendium-tabs button:hover {
    color: var(--rw-verdant-bright);
}

.rw-compendium-tabs button.active {
    color: var(--rw-verdant-bright);
    border-bottom-color: var(--rw-verdant);
}

.rw-compendium-search {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rw-border);
}

.rw-compendium-filters {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.rw-compendium-results {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

/* =============================================================
   DRAG & DROP
   ============================================================= */

.rw-drag-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 2px;
    background: var(--rw-bg-panel);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-sm);
    cursor: grab;
    transition: all var(--rw-transition);
    position: relative;
}

.rw-drag-card:hover {
    background: var(--rw-bg-moss);
    border-color: var(--rw-border-verdant);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.rw-drag-card:active {
    cursor: grabbing;
}

.rw-drag-card-name {
    font-family: var(--rw-font-ui);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--rw-sage-cream);
    flex: 1;
}

.rw-drag-card-sub {
    font-size: 0.72rem;
    color: var(--rw-text-faint);
    white-space: nowrap;
}

.rw-drag-card-add {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--rw-border);
    border-radius: 50%;
    color: var(--rw-verdant-bright);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--rw-transition);
    flex-shrink: 0;
    opacity: 0;
}

.rw-drag-card:hover .rw-drag-card-add {
    opacity: 1;
}

.rw-drag-card-add:hover {
    background: var(--rw-verdant);
    border-color: var(--rw-verdant);
    color: #fff;
}

/* Dragging state */
.rw-dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

/* Drop zone active states */
.rw-drop-zone {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    border: 2px dashed transparent;
    border-radius: var(--rw-radius-md);
    position: relative;
}

.rw-drop-zone.rw-drop-active {
    border-color: var(--rw-gold);
}

/* Inventory drop zone — gold glow */
.rw-drop-zone[data-zone="inventory"].rw-drop-active {
    border-color: var(--rw-gold);
    box-shadow: inset 0 0 30px rgba(196, 160, 64, 0.12), 0 0 20px rgba(196, 160, 64, 0.15);
    background: rgba(196, 160, 64, 0.03);
}

/* Spellbook drop zone — arcane glow */
.rw-drop-zone[data-zone="spellbook"].rw-drop-active {
    border-color: var(--rw-arcane-cyan);
    box-shadow: inset 0 0 30px rgba(72, 176, 192, 0.12), 0 0 20px rgba(72, 176, 192, 0.15);
    background: rgba(72, 176, 192, 0.03);
}

/* Drop success flash */
@keyframes rw-drop-success {
    0% { box-shadow: 0 0 0 0 rgba(80, 176, 104, 0.5); }
    50% { box-shadow: 0 0 20px 5px rgba(80, 176, 104, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(80, 176, 104, 0); }
}

.rw-drop-success {
    animation: rw-drop-success 0.6s ease-out;
}

/* =============================================================
   CHARACTER VIEW — HOTBAR + PANEL LAYOUT
   ============================================================= */

.rw-char-layout {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: calc(100vh - 80px);
    gap: 0;
    position: relative;
}

/* --- Main content area (switches between full sheet and sidebar+panel) --- */

.rw-char-content {
    display: grid;
    grid-template-columns: 1fr;
    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.rw-char-content.has-panel {
    grid-template-columns: 320px 1fr;
    gap: 1.5rem;
}

/* --- Compact sidebar (visible when a panel is active) --- */

.rw-char-sidebar {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--rw-bg-panel);
    border: 1px solid var(--rw-border-gold);
    border-radius: var(--rw-radius-lg);
    overflow-y: auto;
    max-height: calc(100vh - 160px);
    animation: rw-sidebar-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.has-panel .rw-char-sidebar {
    display: flex;
}

@keyframes rw-sidebar-in {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.rw-sidebar-name {
    font-family: var(--rw-font-display);
    font-size: 1.2rem;
    color: var(--rw-gold-light);
    margin: 0;
}

.rw-sidebar-subtitle {
    font-family: var(--rw-font-sc);
    font-size: 0.75rem;
    color: var(--rw-text-dim);
    margin-top: -0.25rem;
}

.rw-sidebar-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    text-align: center;
}

.rw-sidebar-stat {
    background: var(--rw-bg-moss);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-sm);
    padding: 0.35rem 0.25rem;
}

.rw-sidebar-stat-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rw-text-faint);
}

.rw-sidebar-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rw-sage-cream);
    font-family: var(--rw-font-ui);
}

.rw-sidebar-hp {
    background: var(--rw-bg-moss);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-sm);
    padding: 0.5rem;
}

.rw-sidebar-hp-bar {
    height: 8px;
    background: var(--rw-bg-void);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.35rem;
}

.rw-sidebar-hp-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease, background-color 0.3s ease;
}

.rw-sidebar-abilities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
}

.rw-sidebar-ability {
    text-align: center;
    background: var(--rw-bg-moss);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-sm);
    padding: 0.25rem;
    cursor: pointer;
    transition: border-color var(--rw-transition), background var(--rw-transition);
}

.rw-sidebar-ability:hover {
    border-color: var(--rw-border-gold);
    background: var(--rw-bg-moss-2);
}

.rw-sidebar-ability-name {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rw-text-faint);
}

.rw-sidebar-ability-mod {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--rw-sage-cream);
}

/* --- Panel area --- */

.rw-char-panel {
    display: none;
    animation: rw-panel-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.rw-char-panel.active {
    display: block;
}

@keyframes rw-panel-in {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rw-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rw-border-gold);
}

.rw-panel-header h3 {
    font-family: var(--rw-font-display);
    color: var(--rw-gold-light);
    margin: 0;
    font-size: 1.4rem;
}

/* --- Hotbar — fixed bottom icon bar --- */

.rw-hotbar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: linear-gradient(to top, var(--rw-bg-void) 60%, transparent);
    z-index: 100;
}

.rw-hotbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rw-border-gold), transparent);
}

.rw-hotbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 1rem;
    background: var(--rw-bg-panel);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-md);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    min-width: 72px;
}

.rw-hotbar-btn:hover {
    background: var(--rw-bg-moss);
    border-color: var(--rw-border-gold);
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(196, 160, 64, 0.15);
}

.rw-hotbar-btn.active {
    background: var(--rw-bg-moss-2);
    border-color: var(--rw-gold);
    box-shadow: 0 0 20px rgba(196, 160, 64, 0.2), inset 0 0 12px rgba(196, 160, 64, 0.06);
}

.rw-hotbar-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--rw-gold);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--rw-gold);
}

.rw-hotbar-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: grayscale(0.3) brightness(0.85);
    transition: filter 0.2s ease;
}

.rw-hotbar-btn:hover .rw-hotbar-icon,
.rw-hotbar-btn.active .rw-hotbar-icon {
    filter: grayscale(0) brightness(1.1) drop-shadow(0 0 4px rgba(196, 160, 64, 0.4));
}

.rw-hotbar-label {
    font-family: var(--rw-font-sc);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: var(--rw-text-dim);
    transition: color 0.2s ease;
}

.rw-hotbar-btn:hover .rw-hotbar-label,
.rw-hotbar-btn.active .rw-hotbar-label {
    color: var(--rw-gold-light);
}

/* =============================================================
   ACCESSIBILITY — Reduced Motion
   ============================================================= */

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

    .firefly {
        display: none;
    }

    .rw-section-body {
        transition: none;
    }

    .rw-compendium-panel {
        transition: none;
    }

    .rw-char-sidebar,
    .rw-char-panel {
        animation: none !important;
    }

    .rw-char-content {
        transition: none;
    }
}

/* =============================================================
   RESPONSIVE — Compendium Panel
   ============================================================= */

@media (max-width: 768px) {
    .rw-compendium-panel {
        width: 100%;
    }

    .rw-char-content.has-panel {
        grid-template-columns: 1fr;
    }

    .has-panel .rw-char-sidebar {
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .rw-sidebar-abilities {
        grid-template-columns: repeat(6, 1fr);
    }

    .rw-hotbar {
        gap: 0.25rem;
        padding: 0.4rem 0.5rem;
    }

    .rw-hotbar-btn {
        min-width: 56px;
        padding: 0.4rem 0.6rem;
    }

    .rw-hotbar-icon {
        width: 22px;
        height: 22px;
    }

    .rw-hotbar-label {
        font-size: 0.55rem;
    }
}