/* === Old Parchment Card Style === */
:root {
    /* Base & overlays */
    --tx-paper: url("/assets/textures/parchment_textures/parchment-base-4k.png");
    --tx-fibers: url("/assets/textures/parchment_textures/paper_fibers_1k.png");
    --tx-creases: url("/assets/textures/parchment_textures/paper_creases_2k.png");
    --tx-stains: url("/assets/textures/parchment_textures/coffee_stains_splatters.png");
    --tx-noise: url("/assets/textures/parchment_textures/fine_noise_512.png");
    --tx-burn-edges: url("/assets/textures/parchment_textures/burnt_edge_irregular.png");
    /* Color ink + tints */
    --parchment-tint: #e9d9a7;
    --ink-muted: #4a3b24;
    --ink: #141414;
    --ink-sepia: #2d2216;
    --gold: #e6c878;
    --crimson: #aa0000;
    --royal: #283c6e;
    --arcane: #6e2d82;
}

@media (max-width: 640px) {
    :root {
        --tx-paper: url("/assets/textures/parchment_textures/parchment_base_1k.jpg");
    }
}

.tabs {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1rem auto;
}

.tab-btn {
    border: 1px solid #666;
    padding: .5rem .9rem;
    border-radius: .6rem;
    cursor: pointer;
    background: #1b1b1b;
    color: #eee;
    border-color: #5e4a2a;
}

    .tab-btn.active {
        border-color: var(--ink);
        box-shadow: 0 0 0 2px rgba(122,90,42,.28) inset;
    }

.tab-pane {
    display: none;
}

    .tab-pane.active {
        display: block;
    }

#filters, .filters-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: .7rem auto 1rem;
}

    #filters select, #filters input, .filters-row select, .filters-row input {
        padding: .55rem .7rem;
        border: 1px solid #ccc;
        border-radius: .5rem;
        min-width: 160px;
    }

#results-classes, #results-backgrounds, #results-spells {
    width: min(1100px, 92%);
    margin: 1rem auto;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
    position: relative;
    padding: 16px 18px;
    border-radius: 14px;
    color: var(--ink);
    background: rgba(255,255,255,0.04);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 0 18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
    backdrop-filter: contrast(1.05) brightness(1.05);
    line-height: 1.45;
}

    .card .card-frame, .spell-border .card-frame {
        position: absolute;
        inset: -6px;
        background: var(--tx-burn-edges) center/cover no-repeat;
        mix-blend-mode: multiply;
        filter: drop-shadow(0 10px 16px rgba(0,0,0,.45));
        pointer-events: none;
        z-index: 3;
    }

.card, .spell-border {
    position: relative;
    isolation: isolate;
    padding: 1rem 1.25rem;
    border-radius: 18px;
    color: var(--ink);
    background-image: var(--tx-paper), radial-gradient(120% 180% at 10% -10%, #d9c48a66 0 40%, transparent 41%), var(--tx-fibers), var(--tx-creases), var(--tx-stains), var(--tx-noise);
    background-size: cover, cover, 600px 600px, cover, 1024px 1024px, 512px 512px;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat, repeat, repeat;
    background-position: center;
    background-blend-mode: multiply, color-burn, multiply, overlay, multiply, soft-light;
    border: 1px solid rgba(122,90,42,.35);
    box-shadow: 0 1px 0 rgba(0,0,0,.12) inset, 0 0 0 1px rgba(122,90,42,.20), 0 12px 26px -12px rgba(0,0,0,.55);
    overflow: hidden;
}

    .card * {
        text-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 1px 3px rgba(0,0,0,0.35);
    }

    .card::before, .spell-border::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--parchment-tint) 35%, transparent) 0%, transparent 70%), radial-gradient(120% 100% at 50% 100%, color-mix(in srgb, #d6b97e 18%, transparent) 0%, transparent 70%);
        mix-blend-mode: color-burn;
        pointer-events: none;
        z-index: 1;
    }

@supports (mask-image: radial-gradient(#000,#000)) {
    .card, .spell-border {
        mask-image: radial-gradient(18px 14px at 10px 8px, #000 60%, transparent 61%), radial-gradient(18px 14px at calc(100% - 10px) 12px, #000 60%, transparent 61%), radial-gradient(20px 16px at 12px calc(100% - 8px), #000 60%, transparent 61%), radial-gradient(18px 14px at calc(100% - 12px) calc(100% - 10px), #000 60%, transparent 61%), linear-gradient(#000,#000);
        mask-composite: exclude, exclude, exclude, exclude, add;
    }
}

.card:hover, .spell-border:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(0,0,0,.15) inset, 0 0 0 1px rgba(122,90,42,.35), 0 16px 28px -12px rgba(0,0,0,.65);
    transition: transform .18s ease, box-shadow .18s ease;
}

.card h3 {
    margin: 2px 0 10px;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--gold);
    text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.55);
    border-bottom: 1px solid rgba(0,0,0,.35);
    padding-bottom: 6px;
}

.card p {
    margin: 8px 0;
    color: var(--ink);
    font-size: 0.98rem;
}

    .card p strong {
        color: var(--gold);
        font-weight: 700;
        letter-spacing: .2px;
    }

.card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(255,248,230,.45) 75%, rgba(255,248,230,.70) 100%);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
}

.card > * {
    position: relative;
    z-index: 4;
}

.card {
    isolation: isolate;
    overflow: hidden;
}

    .card .muted {
        color: var(--ink-sepia);
        font-style: italic;
        opacity: .95;
    }

    .card p.muted, .card p {
        color: var(--gold);
        font-weight: 700;
        letter-spacing: .2px;
    }

.text {
    color: green;
}

.pill, .card .pill {
    display: inline-block;
    margin: 4px 6px 4px 0;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .9rem;
    color: var(--ink);
    background: rgba(255,255,255,.25);
    border: 1px solid rgba(0,0,0,.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 6px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2);
    mix-blend-mode: normal;
}

.card + .card {
    margin-top: 14px;
}

.section-intro {
    text-align: center;
    margin: .5rem auto 0;
    color: #ccc;
}
/* expand/collapse spacing */
.spell-more {
    margin-top: .25rem;
}


/* Scoped to #spells-app – leans on your existing button/input styles */
#spells-app .tiny {
    font-size: .9rem;
    color: #ccc
}

#spells-app .sf-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin: .5rem 0 1rem
}

    #spells-app .sf-bar input[type="text"] {
        flex: 2;
        min-width: 220px
    }

    #spells-app .sf-bar select {
        flex: 1;
        min-width: 160px
    }

#spells-app details#sf-advanced {
    margin: .25rem 0 1rem
}

#spells-app summary {
    cursor: pointer;
    padding: .3rem .4rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    background: rgba(0,0,0,.35)
}

#spells-app .sf-adv-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(12,1fr);
    margin-top: .6rem
}

    #spells-app .sf-adv-grid > div {
        grid-column: span 3;
        min-width: 0
    }

@media (max-width: 980px) {
    #spells-app .sf-adv-grid {
        grid-template-columns: repeat(6,1fr)
    }

        #spells-app .sf-adv-grid > div {
            grid-column: span 6
        }
}

@media (max-width: 640px) {
    #spells-app .sf-adv-grid {
        grid-template-columns: repeat(2,1fr)
    }

        #spells-app .sf-adv-grid > div {
            grid-column: span 2
        }
}

#spells-app .sf-listbox {
    display: grid;
    gap: .35rem;
    max-height: 180px;
    overflow: auto;
    padding: .35rem;
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 10px;
    background: rgba(0,0,0,.25)
}

#spells-app .sf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

#spells-app .sf-chip {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    padding: .25rem .55rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(0,0,0,.35)
}

#spells-app .sf-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .5rem 0 1rem
}

#spells-app #sf-toggleAll {
    color: #fff;
    text-decoration: none;
    opacity: .85
}

#spells-app details.spell {
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius,18px);
    padding: .4rem .6rem;
    margin: .5rem 0
}

    #spells-app details.spell summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: transparent;
        border: 0;
        padding: .2rem
    }

#spells-app .sf-meta {
    opacity: .8;
    font-size: .95rem
}

#spells-app .sf-grid {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(6,1fr)
}

@media (max-width: 900px) {
    #spells-app .sf-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

#spells-app .kv {
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    padding: .5rem .6rem;
    background: rgba(0,0,0,.22)
}

    #spells-app .kv b {
        color: var(--gold);
        display: block;
        margin-bottom: .2rem
    }


/* Live search bits (scoped to #spells-app) */
#spells-app .sf-bar {
    position: relative
}

#spells-app .sf-suggest {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    width: min(600px, 92vw);
    max-height: 240px;
    overflow: auto;
    z-index: 50;
    background: rgba(0,0,0,.85);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0,0,0,.45);
}

#spells-app .sf-sugg {
    width: 100%;
    text-align: left;
    border: 0;
    padding: .55rem .7rem;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: block;
}

    #spells-app .sf-sugg:hover, #spells-app .sf-sugg[aria-selected="true"] {
        background: rgba(255,255,255,.08);
    }

#spells-app mark.hl {
    background: linear-gradient(var(--gold), var(--accent));
    color: #20160a;
    border-radius: .2em;
    padding: 0 .12em;
}
/* === Unified filter bar style (matches #spells-app .sf-bar) === */
/* ✨ New per-class range row styling */
#spells-app .range-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

    #spells-app .range-row code {
        color: var(--gold);
        font-weight: 700;
    }

    #spells-app .range-row input[type="number"] {
        width: 4.4rem;
        background: #2d2d2d;
        color: #f0e6d2;
        border: 1px solid var(--gold);
        border-radius: 8px;
        padding: .3rem .4rem;
    }

#spells-app #sf-class[multiple] {
    min-width: 220px;
}
/* The containers */
#pane-classes #filters,
#pane-backgrounds .filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin: .5rem 0 1rem;
    padding: .6rem .7rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius, 18px);
    background: rgba(0,0,0,.35);
    box-shadow: 0 0 0 1px rgba(122,90,42,.20) inset;
}

    /* Inputs & selects in those bars */
    #pane-classes #filters input,
    #pane-classes #filters select,
    #pane-backgrounds .filters-row input,
    #pane-backgrounds .filters-row select {
        background: #2d2d2d;
        color: #f0e6d2;
        border: 1px solid var(--gold);
        border-radius: 10px;
        padding: .5rem .7rem;
        min-width: 160px; /* base */
    }

        /* Placeholders for consistency */
        #pane-classes #filters input::placeholder,
        #pane-backgrounds .filters-row input::placeholder {
            color: #d9c48a;
            opacity: .85;
        }

        /* Focus glow like the rest of the site */
        #pane-classes #filters input:focus,
        #pane-classes #filters select:focus,
        #pane-backgrounds .filters-row input:focus,
        #pane-backgrounds .filters-row select:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(230,201,101,.35);
        }

/* Layout parity with #spells-app .sf-bar */
#pane-classes #class-q,
#pane-backgrounds #background-q {
    flex: 2;
    min-width: 220px;
}

#pane-classes #class-ability,
#pane-classes #class-hdie,
#pane-classes #class-casts,
#pane-classes #class-preview-level,
#pane-backgrounds #bg-ability,
#pane-backgrounds #bg-skill,
#pane-backgrounds #bg-fit {
    flex: 1;
    min-width: 160px;
}

/* Tighten the overall controls to feel "compact" like spells bar */
#pane-classes #filters select,
#pane-backgrounds .filters-row select {
    padding-right: 2rem; /* breathing room for native arrows */
}

/* Optional: if earlier styles forced gray borders on these, ensure our gold wins */
#filters select, #filters input, .filters-row select, .filters-row input {
    border-color: var(--gold) !important;
    background: #2d2d2d !important;
    color: #f0e6d2 !important;
}

/* Optional hover polish to match site buttons/inputs vibe */
#pane-classes #filters input:hover,
#pane-classes #filters select:hover,
#pane-backgrounds .filters-row input:hover,
#pane-backgrounds .filters-row select:hover {
    filter: brightness(1.03);
}