/* ============================================================
   BEHOLD! — NPC Creator (Full CSS)
   - Compact parchment form
   - DDB-style stat block
   - Side art layout (tiny overlap, responsive)
   - Roll overlay (Nat 20 flair)
   - Per-card Download + Create Character Image buttons
   ============================================================ */

/* ---------------- Variables ---------------- */
:root {
    /* App chrome */
    --npc-bg: #0f0f11;
    --npc-panel: #151518;
    --npc-text: #eaeaea;
    --npc-muted: #a9a9b2;
    --npc-accent: #ff355d;
    --npc-accent-2: #39e7ff;
    --npc-border: rgba(255,255,255,.12);
    --radius: 14px;
    /* Stat block palette */
    --sb-bg: #fbf6ed;
    --sb-panel: #fffaf0;
    --sb-text: #2b2b2b;
    --sb-muted: #6e6150;
    --sb-border: #cdb9a2;
    --sb-rule: #b9956a;
    --sb-accent: #7b2b1a;
    --sb-accent-2: #b94b2c;
    --sb-shadow: 0 10px 28px rgba(0,0,0,.35);
    /* Side art tuning */
    --side-art-offset: 240px; /* how far art sits left of the card */
    --side-art-overlap: 28px; /* small intentional overlap */
    /* Size knobs — tuned so 1080p ≈ ultrawide feel */
    --npc-art-max-h: min(96vh, 1100px); /* ≈1036px on 1080p, capped on taller displays */
    --npc-art-max-w: 48vw; /* width guard; height is the main clamp */
    --npc-art-scale: 1; /* global scale if you want +/− all art */
}

/* ---------------- Utilities ---------------- */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

.is-hidden {
    display: none !important
}

/* ---------------- App chrome ---------------- */
.npccreator {
    background-size: cover;
    background-position: center
}

.npc-app {
    color: var(--npc-text)
}

.npc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px
}

.npc-title {
    margin: 0;
    font-size: clamp(20px,2.2vw,28px);
    letter-spacing: .5px
}

.npc-badges {
    display: flex;
    gap: 8px;
    align-items: center
}

.npc-badge {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--npc-border)
}

.npc-badge-ai {
    color: #ffd979
}

.npc-badge-srd {
    color: #8ad7ff
}

.npc-badge-ver {
    color: #a2ffa5
}

.npc-right {
    margin-left: auto
}

.npc-clear {
    background: transparent;
    color: var(--npc-muted);
    border: 1px solid var(--npc-border);
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer
}

    .npc-clear:hover {
        color: #fff;
        border-color: #fff
    }

/* ---------------- Compact parchment form ---------------- */
.npc-form.sb-form {
    background: var(--sb-bg);
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    box-shadow: var(--sb-shadow);
    color: var(--sb-text);
    padding: 10px
}

.npc-form.sb-compact {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 10px;
    align-items: end
}

    .npc-form.sb-compact .npc-row, .npc-form.sb-compact .npc-row-opts {
        display: contents
    }

        .npc-form.sb-compact .npc-row > label {
            position: absolute !important;
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            white-space: nowrap;
            border: 0
        }

.npc-field label {
    display: block;
    font-size: 12px;
    color: var(--sb-muted);
    margin-bottom: 6px
}

.npc-input {
    width: 100%;
    height: 42px;
    min-height: 42px;
    max-height: 72px;
    resize: none;
    overflow: hidden;
    background: #fffdf7;
    color: var(--sb-text);
    border: 1px solid #d9c7a9;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.3;
    box-shadow: inset 0 1px 0 rgba(0,0,0,.03)
}

    .npc-input::placeholder {
        color: #9a8a74
    }

#npc-count, #npc-version {
    background: #fffdf7;
    color: var(--sb-text);
    border: 1px solid #d9c7a9;
    border-radius: 10px;
    padding: 8px 10px;
    min-width: 90px;
    font-size: 14px;
    height: 42px
}

.npc-actions {
    align-self: end
}

.npc-generate {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 42px;
    line-height: 42px;
    background: linear-gradient(135deg,var(--npc-accent),#d32247);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 9px 14px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(255,53,93,.25);
    font-size: 14px
}

    .npc-generate[disabled] {
        opacity: .65;
        cursor: not-allowed
    }

    .npc-generate .btn-spinner {
        display: none;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255,255,255,.4);
        border-top-color: #fff;
        border-radius: 50%;
        margin-left: 8px;
        animation: spin .8s linear infinite
    }

    .npc-generate.is-loading .btn-label {
        opacity: .6
    }

    .npc-generate.is-loading .btn-spinner {
        display: inline-block
    }

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

.npc-error {
    margin: 6px 2px 0;
    color: #ff6b6b;
    border-left: 3px solid #ff6b6b;
    padding-left: 8px
}

@media (max-width:900px) {
    .npc-form.sb-compact {
        grid-template-columns: 1fr auto auto
    }
}

@media (max-width:640px) {
    .npc-form.sb-compact {
        grid-template-columns: 1fr auto
    }
}

/* ---------------- Results container ---------------- */
#npc-list, .npc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 12px
}

/* ---------------- DDB-style stat block ---------------- */
.sb-card {
    background: var(--sb-bg);
    color: var(--sb-text);
    border: 1px solid var(--sb-border);
    border-radius: 6px;
    box-shadow: var(--sb-shadow);
    max-width: 900px;
    margin: 16px auto;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.35;
    position: relative;
    z-index: 1
}

.sb-header {
    padding: 12px 14px 6px 14px;
    position: relative
}

.sb-name {
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 26px;
    line-height: 1.1;
    color: var(--sb-accent-2);
    margin: 0 0 2px 0;
    letter-spacing: .2px
}

.sb-meta {
    font-style: italic;
    color: var(--sb-muted);
    font-size: 13px;
    margin-bottom: 4px
}

.sb-tools {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    gap: 8px
}

/* Buttons — supports both class names */
.sb-download {
    font: 500 12px/1 system-ui;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #c9b59d;
    background: #fff7ea;
    color: #7b2b1a;
    cursor: pointer
}

    .sb-download:hover {
        filter: brightness(1.05)
    }

.sb-art-btn, .npc-make-image {
    font: 600 12px/1 system-ui;
    padding: 6px 10px;
    border-radius: 999px;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg,#ff3560,#b81b3e);
    box-shadow: 0 8px 22px rgba(255,53,93,.25);
    cursor: pointer
}

    .sb-art-btn[disabled], .npc-make-image[disabled] {
        opacity: .65;
        cursor: default
    }

/* Separators & rows */
.sb-sep {
    height: 10px;
    background: linear-gradient(to bottom,#d8c7ae,#e9dcc7);
    border-top: 2px solid #9e3a27;
    border-bottom: 1px solid rgba(0,0,0,.06)
}

.sb-attrs {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    padding: 8px 14px
}

.sb-attr {
    display: flex;
    gap: 6px;
    align-items: baseline
}

.sb-attr-label {
    color: var(--sb-muted);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .2px;
    min-width: 88px
}

.sb-attr-num {
    font-weight: 700
}

.sb-attr-extra {
    color: var(--sb-muted);
    font-style: italic
}

.sb-abilities {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 6px;
    padding: 8px 14px
}

.sb-ability {
    background: var(--sb-panel);
    border: 1px solid var(--sb-border);
    border-radius: 4px;
    text-align: center;
    padding: 6px 6px 5px
}

.sb-ability-head {
    font-weight: 700;
    color: var(--sb-muted);
    font-size: 11px;
    letter-spacing: .5px
}

.sb-mod {
    margin-top: 1px;
    font-size: 12px
}

    .sb-score-btn, .sb-desc-content .click-roll, .sb-mod .click-roll {
        border: 0;
        background: transparent;
        cursor: pointer;
        color: var(--sb-text);
        padding: 0 1px;
        border-bottom: 1px dotted rgba(0,0,0,.35);
        font-size: 14px
    }

        .sb-score-btn:hover, .sb-desc-content .click-roll:hover, .sb-mod .click-roll:hover {
            color: var(--sb-accent);
            border-bottom-color: var(--sb-accent)
        }

.sb-tidbits {
    padding: 6px 14px 10px 14px
}

.sb-tidbit {
    display: block;
    margin: 4px 0
}

.sb-tidbit-label {
    color: var(--sb-muted);
    font-weight: 700;
    margin-right: 6px;
    font-size: 12px
}

.sb-desc-block {
    padding: 8px 14px 10px 14px
}

.sb-desc-heading {
    color: var(--sb-accent-2);
    font-weight: 700;
    margin: 2px 0 4px 0;
    font-size: 16px;
    letter-spacing: .2px
}

.sb-desc-content p {
    margin: 4px 0 6px 0
}

.sb-bullets {
    margin: 4px 0 6px 18px;
    padding: 0
}

    .sb-bullets li {
        margin: 3px 0
    }

/* ---------------- Side art layout ---------------- */
.npc-item {
    position: relative
}

/* Image sits LEFT of the card, tall and prominent */
.npc-side-art {
    position: absolute;
    left: calc(-1 * var(--side-art-offset));
    bottom: calc(-1 * var(--side-art-overlap));
    max-height: var(--npc-art-max-h) !important;
    max-width: var(--npc-art-max-w) !important;
    width: auto;
    height: auto;
    object-fit: contain;
    transform-origin: bottom left;
    transform: scale(var(--npc-art-scale));
    filter: drop-shadow(0 18px 36px rgba(0,0,0,.55));
    z-index: 3;
    pointer-events: none;
    display: block;
    opacity: 0;
    transition: opacity .35s ease;
}

    .npc-side-art.show {
        opacity: 1
    }

/* When art exists, shift the stat block right but keep a tiny overlap. */
.npc-item.has-side-art .sb-card {
    margin-left: calc(var(--side-art-offset) - var(--side-art-overlap));
    z-index: 1;
}

/* Medium desktops: give a bit more room for the art */
@media (max-width:1400px) {
    :root {
        --side-art-offset: 220px
    }

    .npc-item.has-side-art .sb-card {
        margin-left: calc(var(--side-art-offset) - var(--side-art-overlap))
    }
}

/* Narrow desktops/tablets: hide side art and reset */
@media (max-width:1000px) {
    .npc-side-art {
        display: none !important
    }

    .npc-item.has-side-art .sb-card {
        margin-left: 0
    }
}

/* Hide any legacy placeholders */
.art-box, .tk-canvas, .art-placeholder, .art-statusbar, .art-wait {
    display: none !important
}

/* ---------------- Roll overlay ---------------- */
.roll-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease,background .25s ease;
    z-index: 9999
}

    .roll-overlay.show {
        opacity: 1;
        background: rgba(0,0,0,.35);
        pointer-events: auto
    }

.roll-card {
    background: #fff7ea;
    border: 1px solid #c9b59d;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0,0,0,.45);
    padding: 16px 20px;
    min-width: 260px;
    text-align: center;
    transform: translateY(10px) scale(.98);
    transition: transform .22s ease
}

.roll-overlay.show .roll-card {
    transform: translateY(0) scale(1)
}

.roll-title {
    font: 700 13px/1.2 system-ui;
    margin-bottom: 6px;
    color: #7b2b1a;
    letter-spacing: .3px;
    text-transform: uppercase
}

.roll-total {
    font: 800 42px/1 Georgia,serif;
    color: #1f1f1f
}

.roll-break {
    margin-top: 4px;
    color: var(--sb-muted);
    font: 13px/1.2 system-ui
}

.roll-overlay.crit .roll-total {
    color: #1fa562;
    text-shadow: 0 0 0 rgba(0,0,0,0);
    animation: critPop 1.1s ease both
}

.roll-overlay.crit .roll-card {
    animation: critPulse 1s ease-out 2
}

@keyframes critPop {
    0% {
        transform: scale(.9)
    }

    18% {
        transform: scale(1.18)
    }

    40% {
        transform: scale(1)
    }

    70% {
        transform: scale(1.05)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes critPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(31,165,98,.55)
    }

    100% {
        box-shadow: 0 0 0 26px rgba(31,165,98,0)
    }
}

/* ---------------- Print ---------------- */
@media print {
    body {
        background: #fff
    }

    .roll-overlay {
        display: none !important
    }

    .npc-side-art {
        display: none !important
    }

    .npc-item.has-side-art .sb-card {
        margin-left: 0
    }
}

/* ---------------- Tools flow on very narrow screens ---------------- */
@media (max-width:420px) {
    .sb-tools {
        position: static;
        margin-top: 6px
    }
}


/* ===== Ultrawide tuning (less overlap, slightly smaller art) ===== */

/* 21:9 and wider (e.g., 2560×1080, 3440×1440) */
@media (min-aspect-ratio: 21/9) and (min-width: 1600px) {
    :root {
        /* a bit shorter & narrower overall */
        --npc-art-max-h: min(88vh, 980px);
        --npc-art-max-w: 40vw;
        --npc-art-scale: .92;
        /* push the stat block further right, reduce the overlap */
        --side-art-offset: 280px;
        --side-art-overlap: 18px;
    }
}

/* Very wide desktops (super-ultrawide) */
@media (min-width: 2200px) and (min-aspect-ratio: 21/9) {
    :root {
        --npc-art-max-h: min(84vh, 960px);
        --npc-art-scale: .90;
        --side-art-offset: 300px; /* nudge card right a bit more */
        --side-art-overlap: 16px; /* tiny, tasteful overlap */
    }
}