:root {
    --bg: #11100f;
    --panel: #191715;
    --panel-2: #211d19;
    --ink: #f4eee5;
    --muted: #aaa096;
    --line: #3a332c;
    --accent: #c88748;
    --accent-2: #e2b06f;
    --danger: #d8786c;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    background:
        radial-gradient(circle at 20% 10%, rgba(200,135,72,.10), transparent 28rem),
        var(--bg);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
}

.brand-panel, .auth-panel {
    padding: clamp(2rem, 7vw, 7rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-panel {
    border-right: 1px solid var(--line);
    background:
        linear-gradient(135deg, rgba(200,135,72,.08), transparent 45%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 1px, transparent 1px 9px);
}

.auth-panel { align-items: center; }

.brand-mark {
    width: 64px; height: 64px;
    border: 1px solid var(--accent);
    display: grid; place-items: center;
    color: var(--accent-2);
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 1.5rem;
    transform: rotate(45deg);
    margin-bottom: 2rem;
}
.brand-mark::first-line { transform: rotate(-45deg); }
.brand-mark.small { width: 48px; height: 48px; font-family: inherit; }

.eyebrow {
    letter-spacing: .18em;
    font-size: .72rem;
    font-weight: 800;
    color: var(--accent-2);
}

h1, h2 { font-family: Georgia, "Times New Roman", serif; }
h1 { font-size: clamp(2.6rem, 5vw, 5.8rem); line-height: .98; margin: .6rem 0 1.5rem; font-weight: 500; }
h2 { font-size: 2rem; margin: .4rem 0; font-weight: 500; }
.lead { max-width: 44rem; font-size: 1.12rem; line-height: 1.65; color: #d3c8bc; }
.muted { color: var(--muted); line-height: 1.55; }
.rune-line { width: 7rem; height: 1px; background: var(--accent); margin: 2rem 0; }

.auth-card { width: min(100%, 430px); }
form { display: grid; gap: 1rem; margin-top: 2rem; }

label {
    display: grid;
    gap: .55rem;
    font-size: .82rem;
    font-weight: 700;
    color: #d8cec4;
}

input {
    width: 100%;
    border: 1px solid var(--line);
    background: #121110;
    color: var(--ink);
    border-radius: 8px;
    padding: .95rem 1rem;
    font: inherit;
    outline: none;
}
input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200,135,72,.10);
}

button {
    border-radius: 8px;
    padding: .95rem 1.1rem;
    border: 0;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.primary {
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    color: #1b130d;
}
.primary:hover { filter: brightness(1.06); }
.primary:disabled { opacity: .45; cursor: default; }

.ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}

.switch { color: var(--muted); text-align: center; margin-top: 1.5rem; }
.alert {
    margin-top: 1.2rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(216,120,108,.45);
    background: rgba(216,120,108,.10);
    color: #ffd9d4;
    border-radius: 8px;
}

.topbar {
    height: 68px;
    padding: 0 clamp(1.2rem, 4vw, 4rem);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(17,16,15,.88);
    backdrop-filter: blur(12px);
}
.topbar form { margin: 0; }
.mini-brand { font-weight: 700; }
.mini-brand span { color: var(--accent-2); margin-right: .5rem; }

.dashboard {
    width: min(1100px, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 6rem) 0;
}
.dashboard h1 { font-size: clamp(2.5rem, 5vw, 4.8rem); }

.empty-state {
    margin-top: 3rem;
    border: 1px solid var(--line);
    background: var(--panel);
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: 14px;
    max-width: 720px;
}
.empty-state .primary { margin-top: 1rem; }

@media (max-width: 820px) {
    .auth-shell { grid-template-columns: 1fr; }
    .brand-panel { min-height: 42vh; border-right: 0; border-bottom: 1px solid var(--line); }
    .brand-panel, .auth-panel { padding: 2rem 1.25rem; }
    .auth-panel { min-height: 58vh; }
    .brand-panel h1 { font-size: 2.8rem; }
}


.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.button-link:hover { text-decoration: none; }

.dashboard-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
}
.dashboard-head h1 { margin-bottom: .8rem; }

.character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 3rem;
}

.character-card {
    position: relative;
    display: block;
    min-height: 220px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(200,135,72,.08), transparent 55%),
        var(--panel);
    padding: 1.5rem;
    color: var(--ink);
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease;
}
.character-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    text-decoration: none;
}
.character-card h2 { font-size: 2rem; margin: .5rem 0; }
.level-badge {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    display: grid;
    place-items: center;
    color: var(--accent-2);
    font-weight: 900;
}
.card-footer {
    position: absolute;
    bottom: 1.4rem;
    color: var(--accent-2);
    font-weight: 800;
    font-size: .9rem;
}

.narrow { max-width: 780px; }
.sheet-form { max-width: 760px; }
.form-grid {
    display: grid;
    gap: 1rem;
}
.form-grid.two { grid-template-columns: 1fr 1fr; }

.character-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}
.hero-level {
    min-width: 130px;
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 14px;
    padding: 1rem;
    text-align: center;
}
.hero-level span {
    display: block;
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .16em;
    font-weight: 800;
}
.hero-level strong {
    display: block;
    color: var(--accent-2);
    font-family: Georgia, serif;
    font-size: 3rem;
    line-height: 1.1;
    margin-top: .3rem;
}

.sheet-placeholder {
    margin-top: 2rem;
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 2rem;
    background: rgba(255,255,255,.015);
}

@media (max-width: 720px) {
    .dashboard-head, .character-hero {
        align-items: stretch;
        flex-direction: column;
    }
    .form-grid.two { grid-template-columns: 1fr; }
    .hero-level { width: 100%; }
}


select {
    width: 100%;
    border: 1px solid var(--line);
    background: #121110;
    color: var(--ink);
    border-radius: 8px;
    padding: .95rem 2.6rem .95rem 1rem;
    font: inherit;
    outline: none;
}
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200,135,72,.10);
}
select:disabled {
    opacity: .55;
}
.reference-note {
    margin: .25rem 0;
    padding: .9rem 1rem;
    border-left: 2px solid var(--accent);
    background: rgba(200,135,72,.06);
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.5;
}


.hero-actions {
    display: grid;
    gap: .75rem;
    min-width: 150px;
}

.danger-button {
    background: rgba(216,120,108,.10);
    color: #ffd8d3;
    border: 1px solid rgba(216,120,108,.5);
}
.danger-button:hover {
    background: rgba(216,120,108,.18);
}

.edit-actions,
.card-actions,
.modal-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.edit-actions {
    justify-content: flex-end;
    margin-top: .5rem;
}

.character-card {
    cursor: default;
}
.card-actions {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.4rem;
}
.card-actions .button-link {
    flex: 1;
    padding: .72rem .9rem;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.72);
    display: grid;
    place-items: center;
    padding: 1rem;
}
.modal-backdrop[hidden] {
    display: none;
}
.modal-card {
    width: min(100%, 520px);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.modal-card h2 {
    margin: .4rem 0 .75rem;
}
.modal-actions {
    justify-content: flex-end;
    margin-top: 1.5rem;
}
.modal-actions form {
    margin: 0;
}

@media (max-width: 720px) {
    .hero-actions {
        width: 100%;
    }
    .edit-actions,
    .modal-actions,
    .card-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .card-actions {
        position: static;
        margin-top: 1.2rem;
    }
}


/* Stage 5.1 — compact sheet controls */

.character-card {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    padding-bottom: 1.5rem;
}

.character-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.character-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}

.character-card h2,
.character-card .eyebrow,
.character-card .muted,
.character-card .level-badge {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.character-card-toolbar {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
    display: flex;
    gap: .45rem;
}

.icon-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: rgba(18,17,16,.88);
    color: var(--ink);
    display: inline-grid;
    place-items: center;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.icon-button:hover {
    text-decoration: none;
    border-color: var(--accent);
    background: rgba(200,135,72,.10);
    transform: translateY(-1px);
}

.danger-icon {
    color: #ffc8c2;
}

.danger-icon:hover {
    border-color: rgba(216,120,108,.65);
    background: rgba(216,120,108,.12);
}

.hero-actions {
    display: grid;
    gap: .7rem;
    justify-items: end;
    min-width: 150px;
}

.sheet-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: .45rem;
}

@media (max-width: 720px) {
    .character-card {
        min-height: 190px;
    }

    .character-card-toolbar {
        right: .85rem;
        bottom: .85rem;
    }

    .hero-actions {
        width: 100%;
        justify-items: stretch;
    }

    .sheet-toolbar {
        justify-content: flex-end;
    }

    .sheet-toolbar .icon-button {
        width: 38px;
        height: 38px;
    }
}


/* Stage 5.2 — card spacing + universal back navigation */

.character-card {
    padding-top: 1.55rem;
}

.character-card .level-badge {
    top: 1rem;
    right: 1rem;
    left: auto;
}

.character-card .eyebrow {
    margin-top: 0;
    padding-right: 4rem;
}

.back-button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.back-button:hover {
    text-decoration: none;
    border-color: var(--accent);
    background: rgba(200,135,72,.08);
    transform: translateX(-1px);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: .8rem;
}

@media (max-width: 720px) {
    .character-card .eyebrow {
        padding-right: 3.5rem;
    }
}


.auth-back {
    position: fixed;
    top: 1.1rem;
    left: 1.1rem;
    z-index: 20;
}


/* Stage 5.3 — approved polished interface */

:root {
    --panel-soft: #1b1815;
    --panel-deep: #151311;
    --gold: #e2a04d;
    --gold-soft: #f0b766;
    --cream: #f1e8dc;
    --line-soft: #3b332c;
}

.topbar {
    height: 86px;
    padding: 0 30px;
    background: rgba(16,15,14,.96);
    border-bottom: 1px solid var(--line-soft);
}

.topbar-left {
    gap: 18px;
}

.topbar-action {
    min-height: 54px;
    padding: 0 20px;
    border-radius: 10px;
}

.mini-brand {
    font-size: 1rem;
    color: var(--cream);
}
.mini-brand span {
    color: var(--gold-soft);
    margin-right: .6rem;
}

.back-button-large {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    border-radius: 11px;
    font-size: 2rem;
    line-height: 1;
    color: var(--gold-soft);
    display: grid;
    place-items: center;
}
.back-button-large span {
    display: block;
    transform: translateY(-1px);
}

.dashboard-polished {
    width: min(1420px, calc(100% - 64px));
    padding-top: 54px;
}

.dashboard-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 32px;
    margin-bottom: 38px;
}

.dashboard-copy h1,
.character-hero-polished h1 {
    margin-top: .55rem;
    color: var(--cream);
    letter-spacing: -.025em;
}

.dashboard-copy h1 {
    font-size: clamp(3.4rem, 5vw, 5.1rem);
}

.dashboard-copy .lead,
.character-hero-polished .lead {
    color: #d7ccbf;
}

.dashboard-create {
    align-self: end;
}

.create-character-button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #8e5b25;
    border-radius: 7px;
    color: var(--gold-soft);
    background: rgba(199,128,55,.08);
    text-decoration: none;
    font-weight: 700;
}
.create-character-button:hover {
    text-decoration: none;
    background: rgba(199,128,55,.14);
    border-color: var(--gold);
}

.character-list {
    display: grid;
    gap: 18px;
}

.character-card-polished {
    min-height: 145px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background:
        radial-gradient(circle at 8% 50%, rgba(199,128,55,.05), transparent 20%),
        var(--panel-soft);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.012);
}

.character-card-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 26px;
    min-width: 0;
}

.character-level-orb {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    display: grid;
    place-items: center;
    color: var(--gold-soft);
    font-weight: 800;
    font-size: 1.35rem;
    background: rgba(16,15,14,.55);
    box-shadow: inset 0 0 18px rgba(226,160,77,.045);
}

.character-card-info {
    min-width: 0;
}

.character-card-info .character-label {
    margin: 0 0 .45rem;
    padding: 0;
}

.character-card-info h2 {
    margin: 0 0 .45rem;
    font-size: clamp(2rem, 2.7vw, 2.7rem);
    color: var(--cream);
}

.character-card-info .muted {
    margin: 0;
    font-size: 1rem;
}

.character-card-toolbar {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 3;
    display: flex;
    gap: 12px;
}

.icon-button-large {
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
    border-radius: 10px;
}

.character-page-polished {
    width: min(1200px, calc(100% - 64px));
    padding-top: 70px;
}

.character-hero-polished {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 42px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--line-soft);
}

.character-hero-polished h1 {
    font-size: clamp(4rem, 6vw, 5.8rem);
}

.character-hero-side {
    display: flex;
    align-items: end;
    gap: 18px;
}

.hero-level-polished {
    min-width: 132px;
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--panel-soft);
    border-color: var(--line-soft);
}

.hero-level-polished span {
    color: #b6aa9c;
}

.hero-level-polished strong {
    color: var(--gold-soft);
    font-size: 3.7rem;
}

.sheet-toolbar {
    padding-bottom: 2px;
}

.sheet-toolbar .icon-button {
    width: 48px;
    height: 48px;
    border-radius: 9px;
}

.sheet-placeholder-polished {
    margin-top: 28px;
    padding: 24px 30px;
    border: 1px dashed var(--line-soft);
    border-radius: 14px;
    background: rgba(255,255,255,.008);
}

.sheet-placeholder-polished h2 {
    margin: .3rem 0 .8rem;
    font-size: 2rem;
    color: var(--cream);
}

@media (max-width: 900px) {
    .dashboard-intro,
    .character-hero-polished {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .dashboard-create {
        justify-self: start;
    }

    .character-hero-side {
        justify-content: space-between;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .topbar {
        height: 74px;
        padding: 0 14px;
    }

    .back-button-large {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        font-size: 1.6rem;
    }

    .mini-brand {
        font-size: .9rem;
    }

    .dashboard-polished,
    .character-page-polished {
        width: min(100% - 24px, 100%);
        padding-top: 34px;
    }

    .character-card-polished {
        align-items: flex-start;
        padding: 20px;
    }

    .character-card-main {
        gap: 16px;
    }

    .character-level-orb {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .character-card-toolbar {
        align-self: flex-end;
    }

    .icon-button-large {
        width: 44px;
        height: 44px;
    }

    .character-hero-side {
        align-items: center;
    }
}


/* Stage 5.4 — precise back arrow geometry */
.back-button-large {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    line-height: 0;
}

.back-button-large .back-arrow {
    position: relative;
    display: block;
    width: 25px;
    height: 2px;
    background: var(--gold-soft);
    border-radius: 999px;
    transform: none;
}

.back-button-large .back-arrow::before,
.back-button-large .back-arrow::after {
    content: "";
    position: absolute;
    left: 0;
    width: 11px;
    height: 2px;
    background: var(--gold-soft);
    border-radius: 999px;
    transform-origin: left center;
}

.back-button-large .back-arrow::before {
    top: 0;
    transform: rotate(42deg);
}

.back-button-large .back-arrow::after {
    bottom: 0;
    transform: rotate(-42deg);
}

@media (max-width: 640px) {
    .back-button-large .back-arrow {
        width: 22px;
    }
    .back-button-large .back-arrow::before,
    .back-button-large .back-arrow::after {
        width: 10px;
    }
}


/* Stage 5.6 — auth pages use the same back control */
.auth-back.back-button-large {
    top: 18px;
    left: 22px;
    width: 58px;
    height: 58px;
    z-index: 30;
}

@media (max-width: 640px) {
    .auth-back.back-button-large {
        top: 14px;
        left: 14px;
        width: 46px;
        height: 46px;
    }
}


/* Stage 5.7 — auth back navigation fix */
a.auth-back.back-button-large {
    text-decoration: none;
}
a.auth-back.back-button-large:hover {
    text-decoration: none;
}


/* Stage 5.9 — polished cancel button */
.cancel-button {
    min-height: 50px;
    padding: 0 18px;
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006)),
        rgba(20,18,16,.92);
    color: #d7ccbf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 0 0 1px rgba(0,0,0,.08);
    transition:
        color .15s ease,
        border-color .15s ease,
        background .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.cancel-button:hover {
    color: var(--cream);
    border-color: #6f5a46;
    background:
        linear-gradient(180deg, rgba(226,160,77,.05), rgba(255,255,255,.008)),
        rgba(25,22,19,.96);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 5px 16px rgba(0,0,0,.16);
}

.cancel-button:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.18);
}

.edit-actions .cancel-button,
.modal-actions .cancel-button {
    min-width: 108px;
}

@media (max-width: 640px) {
    .cancel-button {
        min-height: 46px;
        width: 100%;
    }
}


/* Stage 6 — ability scores */
.sheet-section {
    margin-top: 28px;
    padding: 26px 30px 30px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background:
        radial-gradient(circle at 8% 0%, rgba(226,160,77,.045), transparent 24rem),
        var(--panel-soft);
}

.sheet-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.sheet-section-head h2 {
    margin: .25rem 0 0;
    color: var(--cream);
    font-size: 2.15rem;
}

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

.ability-card {
    min-height: 168px;
    padding: 16px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), transparent),
        var(--panel-deep);
    display: grid;
    justify-items: center;
    align-content: center;
    text-align: center;
}

.ability-short {
    color: var(--gold-soft);
    font-weight: 900;
    letter-spacing: .08em;
    font-size: .82rem;
}

.ability-score {
    margin-top: .2rem;
    color: var(--cream);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.4rem;
    line-height: 1;
}

.ability-modifier {
    margin-top: .35rem;
    min-width: 48px;
    padding: .3rem .55rem;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    color: #d8cec3;
    font-weight: 800;
}

.ability-modifier.positive {
    color: var(--gold-soft);
    border-color: rgba(226,160,77,.35);
    background: rgba(226,160,77,.055);
}

.ability-name {
    margin-top: .55rem;
    color: var(--muted);
    font-size: .84rem;
}

.mechanics-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 16px;
    border-left: 2px solid var(--gold);
    background: rgba(226,160,77,.045);
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.55;
}

.mechanics-note p {
    margin: 0;
}

.mechanics-note-mark {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(226,160,77,.45);
    border-radius: 50%;
    color: var(--gold-soft);
    font-weight: 900;
    font-family: Georgia, serif;
}

.abilities-editor-page {
    padding-top: 70px;
}

.ability-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ability-edit-card {
    padding: 16px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--panel-soft);
    display: grid;
    gap: 12px;
}

.ability-edit-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.ability-edit-heading strong {
    color: var(--gold-soft);
    letter-spacing: .08em;
}

.ability-edit-heading span {
    color: var(--muted);
    font-weight: 600;
}

.ability-edit-control {
    display: grid;
    grid-template-columns: 1fr 64px;
    gap: 10px;
    align-items: center;
}

.ability-edit-control input {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 800;
}

.live-modifier {
    height: 48px;
    border: 1px solid rgba(226,160,77,.32);
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--gold-soft);
    background: rgba(226,160,77,.045);
    font-weight: 900;
    font-size: 1.1rem;
}

@media (max-width: 900px) {
    .ability-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .sheet-section {
        padding: 20px 16px;
    }

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

    .ability-card {
        min-height: 145px;
    }

    .ability-score {
        font-size: 2.8rem;
    }
}


/* Stage 6.1 — Foundry-inspired boost editor */
.boost-editor-shell {
    width: min(1500px, calc(100% - 36px));
    margin: 0 auto;
    padding: 34px 0 54px;
}

.boost-editor-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.boost-editor-header h1 {
    margin: .3rem 0;
    font-size: clamp(2.6rem, 4vw, 4.2rem);
}

.close-sheet-button {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cream);
    font-size: 2rem;
    font-weight: 300;
}

.boost-alert {
    margin: 0 0 16px;
}

.boost-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 620px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    overflow: hidden;
    background: #11100f;
}

.boost-sidebar {
    padding: 24px 20px;
    border-right: 1px solid var(--line-soft);
    background:
        radial-gradient(circle at 10% 10%, rgba(226,160,77,.07), transparent 20rem),
        #171411;
}

.boost-source-summary {
    margin-top: 22px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.boost-source-summary span,
.boost-source-summary small {
    display: block;
    color: var(--muted);
    font-size: .72rem;
}

.boost-source-summary strong {
    display: block;
    margin: .22rem 0;
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 1.12rem;
}

.boost-input-method {
    margin-top: 34px;
    padding: 16px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: rgba(255,255,255,.015);
}

.method-switch {
    margin-top: 14px;
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.method-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.method-switch-ui {
    width: 34px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: #25201b;
    position: relative;
}

.method-switch-ui::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: #8d8176;
    transition: transform .15s ease, background .15s ease;
}

.method-switch input:checked + .method-switch-ui {
    border-color: rgba(226,160,77,.6);
    background: rgba(226,160,77,.12);
}

.method-switch input:checked + .method-switch-ui::after {
    transform: translateX(14px);
    background: var(--gold-soft);
}

.boost-board {
    min-width: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), transparent 40%),
        #121110;
}

.boost-table {
    width: 100%;
    overflow-x: auto;
    transition: opacity .15s ease;
}

.boost-table-disabled {
    opacity: .28;
    pointer-events: none;
}

.boost-row {
    display: grid;
    grid-template-columns: 190px repeat(6, minmax(112px, 1fr));
    min-width: 900px;
    border-bottom: 1px solid var(--line-soft);
}

.boost-row-head {
    min-height: 82px;
    background: #171411;
}

.boost-stage-cell {
    padding: 14px 16px;
    border-right: 1px solid var(--line-soft);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.boost-stage-type {
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .11em;
}

.boost-stage-cell strong {
    color: var(--cream);
    margin-top: .15rem;
}

.boost-stage-cell small {
    color: var(--gold-soft);
    margin-top: .25rem;
}

.boost-ability-head {
    min-height: 82px;
    border-right: 1px solid rgba(255,255,255,.04);
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}

.boost-ability-head strong {
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 1.35rem;
}

.boost-ability-head span {
    margin-top: .3rem;
    color: var(--muted);
    font-size: .68rem;
    text-transform: uppercase;
}

.boost-button-cell {
    min-height: 74px;
    padding: 12px 8px;
    border-right: 1px solid rgba(255,255,255,.04);
    display: grid;
    place-items: center;
}

.boost-choice {
    min-width: 84px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #355d3a;
    border-radius: 5px;
    background: rgba(26,82,38,.12);
    color: #4e9b59;
    font-size: .72rem;
    font-weight: 900;
}

.boost-choice:not(:disabled):hover {
    border-color: #5fa96a;
    color: #83d38c;
    background: rgba(38,119,54,.18);
}

.boost-choice.selected {
    border-color: #2fa83e;
    background: #259337;
    color: white;
    box-shadow: 0 0 0 1px rgba(47,168,62,.12);
}

.boost-choice:disabled {
    opacity: .22;
    cursor: default;
}

.key-icon {
    margin-right: .3rem;
    color: currentColor;
}

.boost-result-row {
    min-height: 102px;
    background: rgba(255,255,255,.014);
}

.boost-final {
    border-right: 1px solid rgba(255,255,255,.04);
    display: grid;
    place-content: center;
    justify-items: center;
    color: var(--cream);
    font-size: 2rem;
    font-weight: 900;
}

.boost-final small {
    margin-top: .35rem;
    color: var(--muted);
    font-size: .66rem;
    text-transform: uppercase;
    font-weight: 700;
}

.manual-panel {
    margin: 20px;
    padding: 20px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--panel-soft);
}

.manual-panel[hidden] {
    display: none;
}

.manual-panel h2 {
    margin: .25rem 0 1rem;
}

.boost-footer {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.boost-rule-note {
    color: var(--muted);
    font-size: .82rem;
}

.boost-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.boost-complete {
    min-width: 130px;
}

@media (max-width: 900px) {
    .boost-layout {
        grid-template-columns: 1fr;
    }

    .boost-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .boost-source-summary {
        display: inline-block;
        width: min(31%, 220px);
        margin-right: 2%;
        vertical-align: top;
    }
}

@media (max-width: 640px) {
    .boost-editor-shell {
        width: calc(100% - 16px);
    }

    .boost-source-summary {
        display: block;
        width: 100%;
    }

    .boost-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .boost-footer-actions {
        flex-direction: column;
        align-items: stretch;
    }
}


/* Stage 6.2 — mechanical restrictions like Foundry */
.stage-rule-hint {
    color: #b7a99a !important;
    line-height: 1.35;
}
.boost-choice[data-rule-disabled="true"] {
    opacity: .16;
    border-color: #443c35;
    color: #665c52;
    background: transparent;
}
.boost-choice[data-rule-disabled="true"]:hover {
    border-color: #443c35;
    color: #665c52;
    background: transparent;
}


/* Stage 6.3 — reference mechanics metadata */
.boost-source-summary small + small {
    margin-top: .2rem;
}


/* Stage 6.4 — reference/basic stats on character sheet */
.core-stats-grid {
    display: grid;
    grid-template-columns: 1.45fr repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.core-stat-card {
    min-height: 132px;
    padding: 16px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), transparent),
        var(--panel-deep);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.core-stat-hp {
    background:
        radial-gradient(circle at 50% 35%, rgba(226,160,77,.07), transparent 65%),
        var(--panel-deep);
}

.core-stat-label {
    color: var(--gold-soft);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.core-stat-card > strong {
    margin-top: .25rem;
    color: var(--cream);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.8rem;
    line-height: 1;
}

.core-stat-card > strong.core-stat-text {
    font-size: 1.65rem;
    line-height: 1.15;
}

.core-stat-card > small {
    margin-top: .5rem;
    color: var(--muted);
    font-size: .73rem;
    line-height: 1.35;
}

.background-benefits {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: rgba(255,255,255,.01);
    display: grid;
    grid-template-columns: minmax(150px, .7fr) minmax(0, 2fr);
    gap: 18px;
    align-items: center;
}

.background-benefits-title {
    display: grid;
    gap: .25rem;
}

.background-benefits-title strong {
    color: var(--cream);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
}

.background-benefits-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.reference-pill {
    min-width: 150px;
    padding: 10px 12px;
    border: 1px solid rgba(226,160,77,.22);
    border-radius: 9px;
    background: rgba(226,160,77,.035);
    display: grid;
    gap: .15rem;
}

.reference-pill span {
    color: var(--muted);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.reference-pill strong {
    color: #ddd2c5;
    font-size: .86rem;
}

@media (max-width: 1000px) {
    .core-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .core-stat-hp {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .core-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .core-stat-hp {
        grid-column: span 2;
    }

    .background-benefits {
        grid-template-columns: 1fr;
    }

    .reference-pill {
        flex: 1 1 100%;
    }
}


/* Stage 6.5 — combat HP controls */
.core-stats-head {
    align-items: flex-start;
}

.hp-source-mini {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.hp-source-chip {
    min-width: 78px;
    padding: 7px 10px;
    border: 1px solid rgba(226,160,77,.20);
    border-radius: 8px;
    background: rgba(226,160,77,.025);
    text-align: center;
}

.hp-source-chip span {
    display: block;
    color: var(--muted);
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hp-source-chip strong {
    display: block;
    margin-top: .1rem;
    color: var(--gold-soft);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
}

.combat-hp-grid {
    display: grid;
    grid-template-columns: 1.15fr 1.25fr 1fr .8fr .9fr;
    gap: 12px;
}

.combat-hp-card {
    min-height: 150px;
    padding: 16px;
    position: relative;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), transparent),
        var(--panel-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.combat-hp-card > strong {
    margin-top: .25rem;
    color: var(--cream);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3rem;
    line-height: 1;
}

.current-hp-card > strong span {
    color: var(--muted);
    font-size: 1.1rem;
    font-family: inherit;
}

.combat-hp-card > small {
    margin-top: .5rem;
    color: var(--muted);
    font-size: .72rem;
}

.max-hp-card {
    background:
        radial-gradient(circle at 50% 35%, rgba(226,160,77,.07), transparent 65%),
        var(--panel-deep);
}

.temp-hp-card {
    border-color: rgba(108,154,201,.22);
}

.temp-hp-card .core-stat-label {
    color: #9ab8d7;
}

.temp-hp-card > strong {
    color: #c9dced;
}

.hp-card-actions {
    display: flex;
    gap: 7px;
    margin-top: 12px;
}

.damage-button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(216,120,108,.48);
    border-radius: 7px;
    background: rgba(216,120,108,.08);
    color: #ffc7c0;
    font-weight: 800;
}

.damage-button:hover {
    background: rgba(216,120,108,.14);
    border-color: rgba(216,120,108,.72);
}

.hp-mini-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    background: rgba(255,255,255,.012);
    color: var(--gold-soft);
    display: grid;
    place-items: center;
}

.temp-edit-button {
    position: absolute;
    top: 10px;
    right: 10px;
}

.compact-stat-card > strong {
    font-size: 2.4rem;
}

.compact-stat-card > strong.core-stat-text {
    font-size: 1.55rem;
}

.hp-modal-card form {
    margin-top: 1rem;
}

@media (max-width: 1100px) {
    .combat-hp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .core-stats-head {
        flex-direction: column;
        align-items: stretch;
    }

    .hp-source-mini {
        justify-content: flex-end;
    }

    .combat-hp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .current-hp-card {
        grid-column: span 1;
    }
}

@media (max-width: 480px) {
    .combat-hp-grid {
        grid-template-columns: 1fr;
    }

    .hp-source-mini {
        justify-content: flex-start;
    }
}


/* Stage 6.5.1 — ensure HP controls are interactive */
.damage-button,
.hp-mini-button {
    position: relative;
    z-index: 5;
    pointer-events: auto;
}


/* Stage 6.6 — hero points, dying, wounded, healing */
.heal-button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(102,175,126,.48);
    border-radius: 7px;
    background: rgba(102,175,126,.08);
    color: #b8e6c7;
    font-weight: 800;
}

.heal-button:hover {
    background: rgba(102,175,126,.14);
    border-color: rgba(102,175,126,.72);
}

.heal-submit-button {
    min-height: 50px;
    padding: 0 18px;
    border: 1px solid rgba(102,175,126,.5);
    border-radius: 9px;
    background: rgba(102,175,126,.14);
    color: #c8efd3;
    font-weight: 800;
}

.combat-state-strip {
    margin-top: 14px;
    padding: 12px;
    display: flex;
    align-items: stretch;
    gap: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: rgba(255,255,255,.009);
}

.combat-state-item {
    min-width: 122px;
    padding: 9px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    background: var(--panel-deep);
    display: grid;
    justify-items: center;
    align-content: center;
}

.combat-state-item span {
    color: var(--muted);
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.combat-state-item strong {
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 1.55rem;
}

.hero-state strong {
    color: var(--gold-soft);
}

.danger-state {
    border-color: rgba(216,120,108,.45);
    background: rgba(216,120,108,.055);
}

.danger-state strong {
    color: #ffc3bb;
}

.wounded-state {
    border-color: rgba(210,148,91,.38);
}

.wounded-state strong {
    color: #e7b37d;
}

.combat-state-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.combat-state-actions form {
    margin: 0;
}

.heroic-button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(226,160,77,.48);
    border-radius: 8px;
    background: rgba(226,160,77,.08);
    color: var(--gold-soft);
    font-weight: 800;
}

.damage-options {
    display: grid;
    gap: 9px;
}

.check-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255,255,255,.008);
}

.check-option input {
    width: auto;
}

.condition-input-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 700px) {
    .combat-state-strip {
        flex-wrap: wrap;
    }

    .combat-state-item {
        flex: 1 1 30%;
    }

    .combat-state-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }

    .condition-input-grid {
        grid-template-columns: 1fr;
    }
}


/* Stage 6.7 — AC, saves and perception */
.defense-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.defense-card {
    min-height: 132px;
    padding: 15px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), transparent),
        var(--panel-deep);
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}

.defense-card > span {
    color: var(--gold-soft);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.defense-card > strong {
    margin-top: .28rem;
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 2.7rem;
    line-height: 1;
}

.defense-card > small {
    margin-top: .5rem;
    color: var(--muted);
    font-size: .72rem;
}

.ac-card {
    border-color: rgba(226,160,77,.28);
    background:
        radial-gradient(circle at 50% 35%, rgba(226,160,77,.07), transparent 65%),
        var(--panel-deep);
}

.perception-card {
    border-color: rgba(121,153,194,.22);
}

.defense-modal-card {
    width: min(100%, 760px);
}

.defense-form-grid {
    display: grid;
    gap: 10px;
}

.defense-edit-row {
    display: grid;
    grid-template-columns: 145px minmax(150px, 1fr) 110px;
    gap: 10px;
    align-items: center;
}

.defense-edit-row strong {
    color: var(--cream);
}

.armor-edit-row {
    grid-template-columns: 145px minmax(150px, 1fr) 100px 110px;
}

.defense-edit-row input,
.defense-edit-row select {
    min-width: 0;
}

.defense-form-legend {
    margin-top: 12px;
    display: grid;
    gap: .25rem;
    color: var(--muted);
    font-size: .76rem;
}

@media (max-width: 900px) {
    .defense-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .defense-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .defense-edit-row,
    .armor-edit-row {
        grid-template-columns: 1fr;
    }
}


/* Stage 6.7.1 — compact Foundry-like defense block */
.compact-defenses {
    padding: 18px 20px 20px;
}

.compact-defense-head {
    margin-bottom: 14px;
}

.compact-defense-head h2 {
    font-size: 1.7rem;
}

.compact-defense-layout {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 150px;
    gap: 12px;
    align-items: stretch;
}

.compact-ac,
.compact-perception {
    min-height: 122px;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 30%, rgba(226,160,77,.065), transparent 70%),
        var(--panel-deep);
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}

.compact-perception {
    border-color: rgba(121,153,194,.22);
    background:
        radial-gradient(circle at 50% 30%, rgba(121,153,194,.055), transparent 70%),
        var(--panel-deep);
}

.compact-defense-label {
    color: var(--gold-soft);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.compact-ac strong,
.compact-perception strong {
    margin-top: .15rem;
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 2.7rem;
    line-height: 1;
}

.compact-ac small,
.compact-perception small {
    margin-top: .4rem;
    color: var(--muted);
    font-size: .68rem;
}

.compact-defense-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    overflow: hidden;
    background: var(--panel-deep);
}

.compact-defense-row {
    min-height: 122px;
    padding: 12px;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
    border-right: 1px solid var(--line-soft);
}

.compact-defense-row:last-child {
    border-right: 0;
}

.compact-defense-row span {
    color: var(--muted);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.compact-defense-row strong {
    margin-top: .15rem;
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 2.15rem;
    line-height: 1;
}

.compact-defense-row small {
    margin-top: .35rem;
    color: var(--muted);
    font-size: .66rem;
}

@media (max-width: 850px) {
    .compact-defense-layout {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .compact-perception {
        grid-column: 1 / -1;
        min-height: 96px;
    }
}

@media (max-width: 620px) {
    .compact-defense-layout {
        grid-template-columns: 1fr;
    }

    .compact-defense-stack {
        grid-template-columns: 1fr;
    }

    .compact-defense-row {
        min-height: 88px;
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .compact-defense-row:last-child {
        border-bottom: 0;
    }

    .compact-ac,
    .compact-perception {
        min-height: 100px;
    }
}


/* Stage 6.8 — full Foundry-like compact sheet layout */
.foundry-character-page {
    width: min(1500px, calc(100% - 28px));
    padding-top: 30px;
}

.foundry-sheet-shell {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.foundry-sidebar {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 12px;
}

.foundry-side-section {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.008), transparent),
        var(--panel-soft);
    overflow: hidden;
}

.foundry-side-title {
    color: var(--gold-soft);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.foundry-hp-section {
    padding: 14px;
}

.foundry-hp-triad {
    margin-top: 10px;
    display: grid;
    grid-template-columns: .8fr 1.2fr .8fr;
    gap: 8px;
}

.foundry-hp-triad > div {
    min-height: 96px;
    padding: 10px 8px;
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    background: var(--panel-deep);
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}

.foundry-hp-triad span {
    color: var(--muted);
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.foundry-hp-triad strong {
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 2rem;
    line-height: 1;
}

.foundry-current-hp strong {
    font-size: 2.4rem;
    color: var(--gold-soft);
}

.foundry-current-hp small {
    color: var(--muted);
    font-size: .72rem;
}

.foundry-hp-actions {
    margin-top: 8px;
    display: flex;
    gap: 5px;
}

.foundry-hp-actions .damage-button,
.foundry-hp-actions .heal-button {
    min-height: 28px;
    padding: 0 8px;
    font-size: .68rem;
}

.foundry-hp-actions .hp-mini-button {
    width: 28px;
    height: 28px;
}

.foundry-state-row {
    margin-top: 9px;
    display: grid;
    grid-template-columns: repeat(3, 1fr) 30px;
    gap: 6px;
}

.foundry-state-chip {
    min-height: 54px;
    padding: 6px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--panel-deep);
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}

.foundry-state-chip span {
    color: var(--muted);
    font-size: .52rem;
    text-transform: uppercase;
}

.foundry-state-chip strong {
    color: var(--cream);
    font-size: 1rem;
}

.foundry-state-row .hp-mini-button {
    width: 30px;
    height: 54px;
}

.foundry-heroic-form {
    margin: 8px 0 0;
}

.foundry-heroic-form .heroic-button {
    width: 100%;
    min-height: 32px;
    font-size: .68rem;
}

.foundry-defense-section,
.foundry-movement-section {
    padding: 14px;
}

.foundry-side-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.foundry-side-section-head .hp-mini-button {
    width: 30px;
    height: 30px;
}

.foundry-ac-row {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 8px;
}

.foundry-ac-badge,
.foundry-perception-mini {
    min-height: 84px;
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    background: var(--panel-deep);
    display: grid;
    place-content: center;
    justify-items: center;
}

.foundry-ac-badge span,
.foundry-perception-mini span {
    color: var(--muted);
    font-size: .58rem;
    text-transform: uppercase;
}

.foundry-ac-badge strong,
.foundry-perception-mini strong {
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 2rem;
}

.foundry-perception-mini small {
    color: var(--muted);
    font-size: .58rem;
}

.foundry-save-list {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    overflow: hidden;
}

.foundry-save-list > div {
    min-height: 72px;
    padding: 8px 4px;
    display: grid;
    place-content: center;
    justify-items: center;
    border-right: 1px solid var(--line-soft);
    background: var(--panel-deep);
}

.foundry-save-list > div:last-child {
    border-right: 0;
}

.foundry-save-list span {
    color: var(--muted);
    font-size: .52rem;
    text-transform: uppercase;
}

.foundry-save-list strong {
    color: var(--cream);
    font-size: 1.25rem;
}

.foundry-save-list small {
    color: var(--muted);
    font-size: .52rem;
}

.foundry-movement-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.foundry-movement-grid > div {
    min-height: 64px;
    padding: 8px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--panel-deep);
    display: grid;
    place-content: center;
    justify-items: center;
}

.foundry-movement-grid span,
.foundry-movement-grid small {
    color: var(--muted);
    font-size: .55rem;
    text-transform: uppercase;
}

.foundry-movement-grid strong {
    color: var(--cream);
    font-size: 1.35rem;
}

.foundry-size-text {
    font-size: .95rem !important;
}

.foundry-main-column {
    min-width: 0;
    display: grid;
    gap: 12px;
}

.foundry-identity-card,
.foundry-main-panel {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.008), transparent),
        var(--panel-soft);
}

.foundry-identity-card {
    padding: 20px;
}

.foundry-identity-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
}

.foundry-identity-top h1 {
    margin: .25rem 0 .35rem;
    color: var(--cream);
    font-size: clamp(2.8rem, 4vw, 4.8rem);
    line-height: .98;
}

.foundry-identity-sub {
    margin: 0;
    color: #d7ccbf;
    font-size: 1rem;
}

.foundry-identity-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.foundry-level-box {
    min-width: 92px;
    padding: 10px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--panel-deep);
    text-align: center;
}

.foundry-level-box span {
    display: block;
    color: var(--muted);
    font-size: .6rem;
    text-transform: uppercase;
}

.foundry-level-box strong {
    color: var(--gold-soft);
    font-family: Georgia, serif;
    font-size: 2.4rem;
}

.foundry-reference-row {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.foundry-reference-row > div {
    min-width: 110px;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--panel-deep);
}

.foundry-reference-row span {
    display: block;
    color: var(--muted);
    font-size: .52rem;
    text-transform: uppercase;
}

.foundry-reference-row strong {
    color: #ded3c6;
    font-size: .76rem;
}

.foundry-main-panel {
    padding: 16px 18px 18px;
}

.foundry-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.foundry-panel-head h2 {
    margin: .15rem 0 0;
    color: var(--cream);
    font-size: 1.65rem;
}

.foundry-ability-strip {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    overflow: hidden;
}

.foundry-ability-item {
    min-height: 104px;
    padding: 10px 6px;
    border-right: 1px solid var(--line-soft);
    background: var(--panel-deep);
    display: grid;
    place-content: center;
    justify-items: center;
    position: relative;
}

.foundry-ability-item:last-child {
    border-right: 0;
}

.foundry-ability-item > span {
    color: var(--gold-soft);
    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: 800;
}

.foundry-ability-item > strong {
    color: var(--cream);
    font-size: 1.9rem;
}

.foundry-ability-item > small {
    color: var(--muted);
    font-size: .56rem;
    text-transform: uppercase;
}

.foundry-ability-item > em {
    position: absolute;
    top: 6px;
    right: 7px;
    color: #6e6257;
    font-size: .62rem;
    font-style: normal;
}

@media (max-width: 1050px) {
    .foundry-sheet-shell {
        grid-template-columns: 260px minmax(0, 1fr);
    }
}

@media (max-width: 820px) {
    .foundry-sheet-shell {
        grid-template-columns: 1fr;
    }

    .foundry-sidebar {
        position: static;
        grid-template-columns: 1fr 1fr;
    }

    .foundry-hp-section {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .foundry-sidebar {
        grid-template-columns: 1fr;
    }

    .foundry-identity-top {
        flex-direction: column;
    }

    .foundry-identity-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .foundry-ability-strip {
        grid-template-columns: repeat(3, 1fr);
    }

    .foundry-ability-item {
        border-bottom: 1px solid var(--line-soft);
    }
}


/* Stage 6.8.1 — fix HP block clipping in the Foundry sidebar */
.foundry-sheet-shell {
    grid-template-columns: 360px minmax(0, 1fr);
}

.foundry-sidebar,
.foundry-side-section,
.foundry-hp-section {
    min-width: 0;
}

.foundry-hp-triad {
    width: 100%;
    min-width: 0;
    grid-template-columns: .75fr 1.5fr .75fr;
}

.foundry-hp-triad > div {
    min-width: 0;
    overflow: hidden;
}

.foundry-hp-triad > div > span {
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
}

.foundry-hp-triad > div > strong {
    max-width: 100%;
}

.foundry-hp-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
}

.foundry-hp-actions .damage-button,
.foundry-hp-actions .heal-button {
    min-width: 0;
    padding-inline: 7px;
    font-size: .62rem;
}

.foundry-current-hp {
    overflow: visible !important;
}

@media (max-width: 1150px) and (min-width: 821px) {
    .foundry-sheet-shell {
        grid-template-columns: 330px minmax(0, 1fr);
    }

    .foundry-hp-actions .damage-button,
    .foundry-hp-actions .heal-button {
        padding-inline: 5px;
        font-size: .58rem;
    }
}

@media (max-width: 820px) {
    .foundry-sheet-shell {
        grid-template-columns: 1fr;
    }

    .foundry-hp-triad {
        grid-template-columns: 1fr 1.35fr 1fr;
    }
}


/* Stage 6.9 — readability pass + functional tab shell */

.foundry-character-page {
    font-size: 16px;
}

.foundry-side-title,
.foundry-reference-row span,
.foundry-state-chip span,
.foundry-save-list span,
.foundry-hp-triad span,
.foundry-ac-badge span,
.foundry-perception-mini span,
.foundry-movement-grid span,
.foundry-movement-grid small {
    font-size: .68rem;
}

.foundry-hp-triad strong {
    font-size: 2.35rem;
}

.foundry-current-hp strong {
    font-size: 2.8rem;
}

.foundry-current-hp small {
    font-size: .88rem;
}

.foundry-state-chip strong {
    font-size: 1.22rem;
}

.foundry-ac-badge strong,
.foundry-perception-mini strong {
    font-size: 2.25rem;
}

.foundry-perception-mini small,
.foundry-save-list small {
    font-size: .64rem;
}

.foundry-save-list strong {
    font-size: 1.45rem;
}

.foundry-movement-grid strong {
    font-size: 1.55rem;
}

.foundry-hp-actions {
    gap: 6px;
}

.foundry-hp-actions .damage-button,
.foundry-hp-actions .heal-button {
    min-height: 34px;
    padding: 0 10px;
    font-size: .72rem;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.foundry-hp-actions .hp-mini-button,
.foundry-side-section-head .hp-mini-button,
.foundry-state-row .hp-mini-button {
    min-width: 34px;
    width: 34px;
    height: 34px;
    font-size: 1rem;
}

.foundry-state-row .hp-mini-button {
    height: 60px;
}

.foundry-side-section-head .hp-mini-button:hover,
.foundry-hp-actions .hp-mini-button:hover,
.foundry-state-row .hp-mini-button:hover {
    background: rgba(226,160,77,.12);
    border-color: rgba(226,160,77,.5);
}

.foundry-identity-top h1 {
    font-size: clamp(3.2rem, 4.5vw, 5rem);
}

.foundry-identity-sub {
    font-size: 1.08rem;
}

.foundry-reference-row strong {
    font-size: .86rem;
}

.foundry-reference-row span {
    font-size: .58rem;
}

.foundry-panel-head h2 {
    font-size: 1.9rem;
}

.foundry-ability-item {
    min-height: 118px;
}

.foundry-ability-item > span {
    font-size: 1.1rem;
}

.foundry-ability-item > strong {
    font-size: 2.15rem;
}

.foundry-ability-item > small {
    font-size: .62rem;
}

.foundry-ability-item > em {
    font-size: .68rem;
}

/* tabs */
.foundry-tabs-panel {
    padding: 0;
    overflow: hidden;
}

.foundry-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--line-soft);
    background: #151311;
    overflow-x: auto;
}

.foundry-tab {
    min-width: 130px;
    min-height: 60px;
    padding: 0 18px;
    border: 0;
    border-right: 1px solid var(--line-soft);
    background: transparent;
    color: #a99d91;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font: inherit;
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
    position: relative;
}

.foundry-tab:hover {
    color: var(--cream);
    background: rgba(226,160,77,.045);
}

.foundry-tab.active {
    color: var(--gold-soft);
    background: rgba(226,160,77,.07);
}

.foundry-tab.active::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: var(--gold);
}

.tab-icon {
    font-size: 1.15rem;
    line-height: 1;
}

.sheet-tab-content {
    min-height: 270px;
}

.sheet-tab-pane {
    padding: 22px;
}

.sheet-tab-pane[hidden] {
    display: none;
}

.tab-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.tab-section-head h2 {
    margin: .2rem 0 0;
    color: var(--cream);
    font-size: 2rem;
}

.tab-primary-action {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(226,160,77,.4);
    border-radius: 8px;
    background: rgba(226,160,77,.08);
    color: var(--gold-soft);
    font: inherit;
    font-weight: 800;
}

.tab-primary-action:disabled {
    opacity: .45;
    cursor: default;
}

.tab-placeholder-grid {
    display: grid;
    gap: 12px;
}

.tab-placeholder-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tab-placeholder-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tab-placeholder-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tab-placeholder-card {
    min-height: 155px;
    padding: 18px;
    border: 1px solid var(--line-soft);
    border-radius: 11px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.01), transparent),
        var(--panel-deep);
}

.tab-placeholder-card.compact {
    min-height: 130px;
}

.tab-placeholder-kicker {
    color: var(--gold-soft);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.tab-placeholder-card h3 {
    margin: .4rem 0 .55rem;
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 1.35rem;
}

.tab-placeholder-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    font-size: .9rem;
}

.spell-placeholder-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 12px;
}

.spell-placeholder-sidebar {
    display: grid;
    gap: 8px;
}

.spell-placeholder-sidebar > div {
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    background: var(--panel-deep);
}

.spell-placeholder-sidebar span {
    display: block;
    color: var(--muted);
    font-size: .62rem;
    text-transform: uppercase;
}

.spell-placeholder-sidebar strong {
    color: var(--cream);
    font-size: 1.2rem;
}

/* improve obvious interaction */
.icon-button,
.hp-mini-button,
.damage-button,
.heal-button,
.heroic-button {
    cursor: pointer;
}

.icon-button {
    min-width: 42px;
    min-height: 42px;
    font-size: 1.05rem;
}

.icon-button:hover,
.hp-mini-button:hover {
    box-shadow: 0 0 0 2px rgba(226,160,77,.08);
}

@media (max-width: 900px) {
    .tab-placeholder-grid.three,
    .tab-placeholder-grid.four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .foundry-tab {
        min-width: 112px;
        min-height: 54px;
        padding-inline: 12px;
        font-size: .82rem;
    }

    .tab-placeholder-grid.two,
    .tab-placeholder-grid.three,
    .tab-placeholder-grid.four,
    .spell-placeholder-layout {
        grid-template-columns: 1fr;
    }

    .tab-section-head {
        align-items: stretch;
        flex-direction: column;
    }
}


/* Stage 6.10 — top tabs and stable Foundry sheet structure */

.foundry-sheet-v2 {
    align-items: start;
}

.foundry-main-column-v2 {
    min-width: 0;
    overflow: visible;
}

.foundry-top-tabs {
    width: 100%;
    min-width: 0;
    min-height: 62px;
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    border: 1px solid var(--line-soft);
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background: #151311;
}

.foundry-top-tab {
    min-width: 0;
    min-height: 62px;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid var(--line-soft);
    background: transparent;
    color: #a99d91;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font: inherit;
    font-size: .92rem;
    font-weight: 800;
    cursor: pointer;
    position: relative;
}

.foundry-top-tab:last-child {
    border-right: 0;
}

.foundry-top-tab:hover {
    color: var(--cream);
    background: rgba(226,160,77,.045);
}

.foundry-top-tab.active {
    color: var(--gold-soft);
    background: rgba(226,160,77,.08);
}

.foundry-top-tab.active::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    background: var(--gold);
    border-radius: 999px 999px 0 0;
}

.foundry-tab-stage {
    min-width: 0;
    border: 1px solid var(--line-soft);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: rgba(255,255,255,.004);
    overflow: hidden;
}

.foundry-tab-pane {
    min-width: 0;
    padding: 12px;
}

.foundry-tab-pane[hidden] {
    display: none;
}

.foundry-tab-pane > .foundry-identity-card,
.foundry-tab-pane > .foundry-main-panel {
    margin: 0;
}

.foundry-tab-pane > .foundry-main-panel + .foundry-main-panel,
.foundry-tab-pane > .foundry-identity-card + .foundry-main-panel {
    margin-top: 12px;
}

.tab-content-panel {
    min-height: 360px;
}

/* Remove obsolete lower tabs shell if any stale styles/markup survive browser cache */
.foundry-tabs-panel,
.foundry-tabs,
.sheet-tab-content {
    max-width: 100%;
}

/* HP artifact protection */
.foundry-hp-section,
.foundry-hp-triad,
.foundry-hp-box,
.foundry-current-hp,
.foundry-hp-actions {
    box-sizing: border-box;
}

.foundry-hp-triad {
    overflow: visible;
}

.foundry-hp-box {
    position: relative;
    z-index: 1;
}

.foundry-hp-actions {
    position: relative;
    z-index: 3;
}

.foundry-state-row {
    overflow: visible;
}

.state-edit-button {
    align-self: stretch;
}

/* character tab now owns identity + attributes */
.foundry-tab-pane[data-sheet-pane="character"] {
    background: transparent;
}

/* A little more spacing now that right panel is tabbed */
.foundry-identity-card {
    border-radius: 10px;
}

.foundry-main-panel {
    border-radius: 10px;
}

/* old bottom-tab visual shell no longer participates in layout */
.foundry-tabs-panel {
    display: none !important;
}

@media (max-width: 950px) {
    .foundry-top-tabs {
        grid-template-columns: repeat(5, minmax(105px, 1fr));
        overflow-x: auto;
    }

    .foundry-top-tab {
        font-size: .82rem;
    }
}

@media (max-width: 820px) {
    .foundry-top-tabs {
        border-radius: 12px 12px 0 0;
    }
}

@media (max-width: 650px) {
    .foundry-top-tabs {
        display: flex;
        overflow-x: auto;
    }

    .foundry-top-tab {
        flex: 0 0 128px;
    }
}


/* Stage 6.11 — polished Foundry-like interface */

:root {
    --panel-deep: #15120f;
    --panel-soft: #1b1713;
    --line-soft: #3a3027;
    --gold: #e3a34f;
    --gold-soft: #f0b25f;
    --cream: #f3eadf;
}

/* Layout */
.foundry-character-page {
    width: min(1580px, calc(100% - 34px));
    padding-top: 34px;
}

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

.foundry-sidebar {
    gap: 14px;
}

.foundry-side-section {
    border-color: #40352a;
    border-radius: 14px;
    background:
        radial-gradient(circle at 10% 10%, rgba(226,160,77,.025), transparent 20rem),
        linear-gradient(180deg, rgba(255,255,255,.01), transparent),
        #171411;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        0 10px 30px rgba(0,0,0,.08);
}

.side-title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.side-title-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--gold-soft);
}

.hp-icon {
    fill: rgba(226,160,77,.10);
}

.shield-icon {
    fill: rgba(226,160,77,.10);
}

.boot-icon {
    fill: rgba(226,160,77,.08);
}

/* HP area */
.foundry-hp-section {
    padding: 16px;
}

.foundry-hp-triad {
    grid-template-columns: .85fr 1.55fr .9fr;
    gap: 10px;
    margin-top: 12px;
}

.foundry-hp-box {
    min-height: 118px !important;
    padding: 12px 10px !important;
    border-radius: 11px !important;
    border-color: #43382e !important;
    position: relative;
    overflow: visible !important;
}

.foundry-hp-box > span {
    color: #bbb0a4 !important;
    font-size: .72rem !important;
    letter-spacing: .06em;
}

.foundry-hp-box > strong {
    font-size: 2.75rem !important;
    margin-top: 5px;
}

.foundry-current-hp > strong {
    color: var(--gold-soft) !important;
    font-size: 3rem !important;
}

.foundry-current-hp > small {
    margin-top: 1px;
    color: #d0c5b9 !important;
    font-size: .88rem !important;
}

.foundry-hp-icon-actions {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 8px;
    width: auto;
}

.hp-action-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.hp-action-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.damage-icon-button {
    border: 1px solid rgba(215,92,84,.52);
    background: rgba(215,92,84,.08);
    color: #ef6d65;
}

.damage-icon-button:hover {
    border-color: rgba(239,109,101,.85);
    background: rgba(215,92,84,.16);
    box-shadow: 0 0 16px rgba(215,92,84,.13);
    transform: translateY(-1px);
}

.heal-icon-button {
    border: 1px solid rgba(95,186,111,.52);
    background: rgba(95,186,111,.08);
    color: #70ce82;
}

.heal-icon-button:hover {
    border-color: rgba(112,206,130,.85);
    background: rgba(95,186,111,.16);
    box-shadow: 0 0 16px rgba(95,186,111,.13);
    transform: translateY(-1px);
}

.current-hp-edit {
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
    color: #d9cbbd;
}

.hp-corner-edit {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 34px !important;
    height: 34px !important;
}

.hp-corner-edit:hover {
    transform: translateX(-50%) translateY(-1px);
}

.foundry-state-row {
    margin-top: 10px;
    grid-template-columns: repeat(3, 1fr) 38px;
    gap: 8px;
}

.foundry-state-chip {
    min-height: 66px;
    border-radius: 9px;
}

.foundry-state-chip span {
    font-size: .66rem !important;
}

.foundry-state-chip strong {
    font-size: 1.35rem !important;
}

.state-edit-button {
    width: 38px !important;
    height: 66px !important;
    border-radius: 9px;
}

/* Defense */
.foundry-defense-section,
.foundry-movement-section {
    padding: 16px;
}

.foundry-side-title {
    font-size: .78rem !important;
}

.foundry-ac-row {
    grid-template-columns: 120px 1fr;
    gap: 10px;
}

.foundry-ac-badge,
.foundry-perception-mini {
    min-height: 102px;
    border-radius: 10px;
}

.foundry-ac-badge strong,
.foundry-perception-mini strong {
    font-size: 2.7rem !important;
}

.foundry-save-list > div {
    min-height: 86px;
}

.foundry-save-list span {
    font-size: .66rem !important;
}

.foundry-save-list strong {
    font-size: 1.65rem !important;
}

.foundry-save-list small {
    font-size: .63rem !important;
}

/* Movement */
.foundry-movement-grid > div {
    min-height: 88px;
    border-radius: 10px;
}

.foundry-movement-grid span {
    font-size: .68rem !important;
}

.foundry-movement-grid strong {
    font-size: 1.85rem !important;
}

/* Main top tabs */
.foundry-top-tabs {
    min-height: 70px;
    border-color: #40352a;
    background: #15120f;
}

.foundry-top-tab {
    min-height: 70px;
    color: #b8aea3;
    font-size: 1rem;
    gap: 10px;
}

.foundry-top-tab.active {
    color: var(--gold-soft);
    background:
        linear-gradient(180deg, rgba(226,160,77,.09), rgba(226,160,77,.035));
}

.foundry-top-tab.active::after {
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.tab-icon {
    font-size: 1.25rem;
}

/* Main character card */
.foundry-tab-stage {
    border-color: #40352a;
}

.foundry-tab-pane {
    padding: 16px;
}

.foundry-identity-card,
.foundry-main-panel {
    border-color: #40352a;
    background:
        radial-gradient(circle at 14% 0%, rgba(226,160,77,.025), transparent 22rem),
        linear-gradient(180deg, rgba(255,255,255,.009), transparent),
        #191511;
}

.foundry-identity-card {
    padding: 24px;
}

.foundry-identity-top h1 {
    font-size: clamp(3.7rem, 5vw, 5.7rem);
}

.foundry-identity-sub {
    font-size: 1.15rem;
    color: #ddd1c4;
}

.foundry-level-box {
    min-width: 108px;
    padding: 12px 16px;
}

.foundry-level-box strong {
    font-size: 2.8rem;
}

.foundry-reference-row {
    gap: 10px;
}

.foundry-reference-row > div {
    min-height: 58px;
    padding: 10px 12px;
    border-color: #40352a;
}

.foundry-reference-row strong {
    font-size: .92rem;
}

/* Ability cards */
.foundry-main-panel {
    padding: 20px;
}

.foundry-panel-head h2 {
    font-size: 2.15rem;
}

.foundry-ability-strip {
    border-color: #40352a;
}

.foundry-ability-item {
    min-height: 132px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.008), transparent),
        #15120f;
}

.foundry-ability-item > span {
    font-size: 1.22rem;
}

.foundry-ability-item > strong {
    font-size: 2.45rem;
}

.foundry-ability-item > small {
    font-size: .68rem;
}

.foundry-ability-item > em {
    font-size: .72rem;
    color: #8e8175;
}

/* Icon buttons */
.icon-button,
.hp-mini-button {
    border-color: #45392e;
    background: rgba(255,255,255,.01);
    color: #e8ddcf;
}

.icon-button:hover,
.hp-mini-button:hover {
    border-color: rgba(226,160,77,.52);
    background: rgba(226,160,77,.07);
    color: var(--gold-soft);
}

/* Make delete action clearer */
.danger-icon {
    color: #f27b73;
}

/* Responsive */
@media (max-width: 1180px) and (min-width: 821px) {
    .foundry-sheet-v2 {
        grid-template-columns: 350px minmax(0, 1fr);
    }

    .foundry-hp-triad {
        grid-template-columns: .82fr 1.5fr .9fr;
    }
}

@media (max-width: 820px) {
    .foundry-sheet-v2 {
        grid-template-columns: 1fr;
    }

    .foundry-sidebar {
        position: static;
    }

    .foundry-hp-triad {
        grid-template-columns: 1fr 1.35fr 1fr;
    }
}

@media (max-width: 650px) {
    .foundry-hp-triad {
        grid-template-columns: 1fr;
    }

    .foundry-hp-box {
        min-height: 100px !important;
    }

    .hp-corner-edit {
        left: auto;
        right: 10px;
        bottom: 10px;
        transform: none;
    }

    .hp-corner-edit:hover {
        transform: translateY(-1px);
    }
}


/* Stage 6.12 — larger section headings + lively ability icons */

/* Left rail headings */
.foundry-side-title {
    font-size: .98rem !important;
    letter-spacing: .1em;
}

.side-title-icon {
    width: 22px;
    height: 22px;
    stroke-width: 1.9;
}

.side-title-with-icon {
    gap: 10px;
}

/* Improve hierarchy in HP / Defense / Movement blocks */
.foundry-hp-section > .foundry-side-title,
.foundry-defense-section .foundry-side-title,
.foundry-movement-section > .foundry-side-title {
    margin-bottom: 2px;
}

.foundry-side-section-head {
    min-height: 34px;
}

/* Ability header row */
.ability-heading-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2px;
}

.ability-symbol {
    font-size: 1.28rem;
    line-height: 1;
    filter: saturate(.9) brightness(1.08);
    transform: translateY(-1px);
}

.ability-short-label {
    color: var(--gold-soft);
    font-family: Georgia, serif;
    font-size: 1.24rem;
    font-weight: 800;
}

/* Individual subtle accent glows */
.ability-strength .ability-symbol {
    text-shadow: 0 0 10px rgba(226,102,93,.22);
}

.ability-dexterity .ability-symbol {
    text-shadow: 0 0 10px rgba(103,145,224,.20);
}

.ability-constitution .ability-symbol {
    text-shadow: 0 0 10px rgba(109,185,116,.20);
}

.ability-intelligence .ability-symbol {
    text-shadow: 0 0 10px rgba(172,111,215,.20);
}

.ability-wisdom .ability-symbol {
    text-shadow: 0 0 10px rgba(226,160,77,.22);
}

.ability-charisma .ability-symbol {
    text-shadow: 0 0 10px rgba(86,200,190,.20);
}

/* Since label moved into row, avoid old selector styling conflicts */
.foundry-ability-item > span {
    font-size: inherit;
}

.foundry-ability-item > strong {
    margin-top: 2px;
}

/* Slightly larger ability cards to keep balance */
.foundry-ability-item {
    min-height: 142px;
}

@media (max-width: 650px) {
    .foundry-side-title {
        font-size: .9rem !important;
    }

    .side-title-icon {
        width: 20px;
        height: 20px;
    }

    .ability-symbol {
        font-size: 1.15rem;
    }

    .ability-short-label {
        font-size: 1.12rem;
    }
}


/* Stage 7 — Foundry-like skills tab */
.skills-foundry-panel {
    padding: 20px;
}

.skills-foundry-head,
.skills-lore-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.skills-foundry-head h2,
.skills-lore-head h2 {
    margin: .2rem 0 0;
    color: var(--cream);
    font-size: 2rem;
}

.skills-head-actions {
    display: flex;
    gap: 9px;
}

.skill-add-button {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(226,160,77,.42);
    border-radius: 8px;
    background: rgba(226,160,77,.07);
    color: var(--gold-soft);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.skill-add-button:hover {
    border-color: rgba(226,160,77,.7);
    background: rgba(226,160,77,.12);
}

.skills-save-button {
    min-width: 112px;
    min-height: 42px;
}

.skills-core-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
}

.skill-foundry-row {
    min-width: 0;
    min-height: 68px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) 72px 122px;
    align-items: center;
    border: 1px solid #40352a;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.009), transparent),
        #15120f;
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease;
}

.skill-foundry-row:hover {
    border-color: rgba(226,160,77,.38);
    background:
        linear-gradient(180deg, rgba(226,160,77,.025), transparent),
        #17130f;
}

.skill-from-background {
    box-shadow: inset 3px 0 0 rgba(226,160,77,.58);
}

.skill-total {
    height: 100%;
    border-right: 1px solid #40352a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 1.55rem;
    font-weight: 800;
}

.skill-total span {
    color: var(--gold-soft);
}

.skill-main {
    min-width: 0;
    padding: 9px 11px;
}

.skill-name-line {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.skill-name-line strong {
    min-width: 0;
    color: #e8ddd0;
    font-family: Georgia, serif;
    font-size: 1.02rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skill-ability {
    flex: 0 0 auto;
    padding: 2px 5px;
    border: 1px solid rgba(226,160,77,.23);
    border-radius: 5px;
    color: var(--gold-soft);
    font-size: .58rem;
    font-weight: 900;
}

.skill-source-dot {
    color: var(--gold-soft);
    font-size: .65rem;
}

.skill-breakdown {
    margin-top: 4px;
    color: #8f8378;
    font-size: .65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skill-item-bonus-wrap {
    padding: 5px 6px;
    display: grid;
    justify-items: center;
    gap: 3px;
}

.skill-item-bonus-wrap label {
    color: #83766b;
    font-size: .52rem;
    text-transform: uppercase;
}

.skill-item-input {
    width: 54px;
    min-height: 32px;
    padding: 3px 5px;
    border-radius: 6px;
    text-align: center;
    font-weight: 800;
}

.skill-rank-select {
    min-width: 0;
    min-height: 36px;
    margin-right: 8px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.skill-rank-select.rank-untrained {
    border-color: #5b5651;
    background: #35322f;
    color: #d2ccc6;
}

.skill-rank-select.rank-trained {
    border-color: #455ca6;
    background: #263771;
    color: #e0e7ff;
}

.skill-rank-select.rank-expert {
    border-color: #7a3da4;
    background: #552274;
    color: #f2d9ff;
}

.skill-rank-select.rank-master {
    border-color: #b06a2e;
    background: #7d451c;
    color: #ffe0bd;
}

.skill-rank-select.rank-legendary {
    border-color: #b48b22;
    background: #816211;
    color: #fff0ad;
}

.skills-lore-head {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #40352a;
}

.lore-foundry-list {
    display: grid;
    gap: 8px;
}

.lore-foundry-row {
    grid-template-columns: 68px minmax(0, 1fr) 72px 122px 42px;
}

.lore-delete-button,
.lore-locked-mark {
    width: 34px;
    height: 34px;
    margin-right: 7px;
    border: 1px solid #49382f;
    border-radius: 7px;
    background: rgba(216,120,108,.055);
    color: #f18b82;
    display: grid;
    place-items: center;
}

.lore-delete-button {
    cursor: pointer;
}

.lore-delete-button:hover {
    border-color: rgba(241,139,130,.65);
    background: rgba(216,120,108,.11);
}

.lore-locked-mark {
    color: var(--gold-soft);
    background: rgba(226,160,77,.045);
}

.skills-empty-state {
    padding: 24px;
    border: 1px dashed #40352a;
    border-radius: 9px;
    color: var(--muted);
    text-align: center;
}

.skills-legend {
    margin-top: 16px;
    padding: 10px 12px;
    border-top: 1px solid #40352a;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: #8f8378;
    font-size: .68rem;
}

.skills-legend b {
    color: #c8b9aa;
}

@media (max-width: 1180px) {
    .skills-core-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .skills-foundry-head {
        align-items: stretch;
        flex-direction: column;
    }

    .skills-head-actions {
        width: 100%;
    }

    .skills-head-actions > * {
        flex: 1;
    }

    .skill-foundry-row,
    .lore-foundry-row {
        grid-template-columns: 60px minmax(0, 1fr) 100px;
        grid-template-areas:
            "total main rank"
            "total item rank";
    }

    .skill-total {
        grid-area: total;
    }

    .skill-main {
        grid-area: main;
    }

    .skill-item-bonus-wrap {
        grid-area: item;
        justify-items: start;
        grid-template-columns: auto 54px;
        align-items: center;
        padding-left: 11px;
    }

    .skill-rank-select {
        grid-area: rank;
        margin-right: 7px;
    }

    .lore-delete-button,
    .lore-locked-mark {
        display: none;
    }
}


/* Stage 7.1 — persistent identity + improved rank selects */

/* Persistent character identity above all tabs */
.foundry-identity-persistent {
    margin-bottom: 14px;
}

.foundry-identity-persistent .foundry-reference-row {
    display: none;
}

.foundry-identity-persistent .foundry-identity-top {
    align-items: center;
}

.foundry-identity-persistent .foundry-identity-top h1 {
    font-size: clamp(3.3rem, 4.6vw, 5rem);
}

.foundry-identity-persistent .foundry-identity-sub {
    display: none;
}

/* Character tab details */
.character-details-panel {
    padding: 18px;
}

.character-details-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.character-detail-card {
    min-height: 84px;
    padding: 13px 14px;
    border: 1px solid #40352a;
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.008), transparent),
        #15120f;
    display: grid;
    align-content: center;
    gap: 5px;
}

.character-detail-card span {
    color: #8f8378;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.character-detail-card strong {
    color: #eee3d7;
    font-family: Georgia, serif;
    font-size: 1.08rem;
}

.character-benefit-strip {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.character-benefit-strip > div {
    min-width: 112px;
    padding: 9px 11px;
    border: 1px solid rgba(226,160,77,.22);
    border-radius: 8px;
    background: rgba(226,160,77,.035);
}

.character-benefit-strip span {
    display: block;
    color: #8f8378;
    font-size: .56rem;
    text-transform: uppercase;
}

.character-benefit-strip strong {
    color: #ddd2c5;
    font-size: .82rem;
}

/* Rank select readability */
.skill-foundry-row {
    grid-template-columns: 68px minmax(0, 1fr) 72px 148px;
}

.lore-foundry-row {
    grid-template-columns: 68px minmax(0, 1fr) 72px 148px 42px;
}

.skill-rank-select {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    padding: 0 30px 0 10px;
    font-size: .72rem;
    line-height: 1;
    text-overflow: clip;
    appearance: auto;
}

.skill-rank-select option {
    color: #f2ece5;
    background: #211d19;
}

/* Ensure each rank color wins over native select styling */
.skill-rank-select.rank-untrained,
.skill-rank-select[data-rank="untrained"] {
    border-color: #5b5651 !important;
    background-color: #35322f !important;
    color: #d8d2cc !important;
}

.skill-rank-select.rank-trained,
.skill-rank-select[data-rank="trained"] {
    border-color: #5266b7 !important;
    background-color: #2d3f83 !important;
    color: #eef2ff !important;
}

.skill-rank-select.rank-expert,
.skill-rank-select[data-rank="expert"] {
    border-color: #8a4cb3 !important;
    background-color: #602b7f !important;
    color: #f6e7ff !important;
}

.skill-rank-select.rank-master,
.skill-rank-select[data-rank="master"] {
    border-color: #bd7635 !important;
    background-color: #874d22 !important;
    color: #ffe8cf !important;
}

.skill-rank-select.rank-legendary,
.skill-rank-select[data-rank="legendary"] {
    border-color: #c59a2d !important;
    background-color: #8d6b16 !important;
    color: #fff3bd !important;
}

@media (max-width: 1100px) {
    .character-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .character-details-grid {
        grid-template-columns: 1fr;
    }

    .skill-foundry-row,
    .lore-foundry-row {
        grid-template-columns: 60px minmax(0, 1fr) 120px;
    }

    .skill-rank-select {
        width: 112px;
        min-width: 112px;
        max-width: 112px;
        font-size: .66rem;
    }
}


/* Stage 7.1.1 — lore button interaction fix */
#lore-open {
    position: relative;
    z-index: 5;
    pointer-events: auto;
    cursor: pointer;
}


/* Stage 7.1.2 — reliable Lore modal + visible save feedback */
body.modal-open {
    overflow: hidden;
}

.lore-modal-card {
    width: min(100%, 560px);
}

#lore-open {
    position: relative;
    z-index: 4;
    pointer-events: auto;
}

.skills-save-notice {
    margin-bottom: 12px;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid rgba(95, 186, 111, .42);
    border-radius: 8px;
    background: rgba(95, 186, 111, .08);
    color: #bfe8c8;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    animation: skillsSavedIn .2s ease-out;
}

.skills-save-check {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: rgba(95, 186, 111, .18);
    border: 1px solid rgba(95, 186, 111, .45);
    display: grid;
    place-items: center;
    color: #80d291;
    font-size: .86rem;
}

@keyframes skillsSavedIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Stage 7.1.3 — repaired modal DOM and Lore feedback */
.skills-error-notice {
    margin-bottom: 12px;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid rgba(216,120,108,.44);
    border-radius: 8px;
    background: rgba(216,120,108,.08);
    color: #f2bbb5;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
}

.skills-error-notice > span:first-child {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 1px solid rgba(216,120,108,.52);
    background: rgba(216,120,108,.12);
    display: grid;
    place-items: center;
    color: #ef8d84;
}


/* Stage 7.2 — portrait + Lore action alignment */

.lore-action-cell {
    width: 42px;
    height: 100%;
    display: grid;
    place-items: center;
}

.lore-action-cell .lore-delete-button,
.lore-action-cell .lore-locked-mark {
    margin: 0;
}

.character-portrait-section {
    padding: 10px;
}

.character-portrait-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 220px;
    max-height: 300px;
    border: 1px solid #40352a;
    border-radius: 11px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 35%, rgba(226,160,77,.055), transparent 60%),
        #11100f;
}

.character-portrait-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background: #11100f;
}

.character-portrait-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 9px;
    color: #756a60;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .7rem;
}

.portrait-placeholder-mark {
    width: 72px;
    height: 72px;
    border: 1px solid rgba(226,160,77,.32);
    transform: rotate(45deg);
    display: grid;
    place-items: center;
    color: var(--gold-soft);
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 800;
}

.portrait-placeholder-mark::first-line {
    transform: rotate(-45deg);
}

.portrait-actions {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.portrait-actions form {
    margin: 0;
}

.portrait-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.portrait-action-button,
.portrait-delete-button {
    min-height: 36px;
    border: 1px solid rgba(226,160,77,.42);
    border-radius: 8px;
    background: rgba(17,16,15,.86);
    backdrop-filter: blur(5px);
    color: #eee2d4;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(0,0,0,.22);
}

.portrait-action-button {
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    font-size: .74rem;
}

.portrait-action-button > span:first-child {
    color: var(--gold-soft);
    font-size: 1rem;
}

.portrait-action-button:hover {
    border-color: rgba(226,160,77,.72);
    background: rgba(226,160,77,.12);
}

.portrait-delete-button {
    width: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    color: #ef847a;
}

.portrait-delete-button:hover {
    border-color: rgba(239,132,122,.65);
    background: rgba(216,120,108,.12);
}

.portrait-message {
    margin-top: 8px;
    padding: 7px 9px;
    border-radius: 7px;
    font-size: .68rem;
    font-weight: 700;
}

.portrait-success {
    border: 1px solid rgba(95,186,111,.35);
    background: rgba(95,186,111,.07);
    color: #bde6c6;
}

.portrait-error {
    border: 1px solid rgba(216,120,108,.38);
    background: rgba(216,120,108,.07);
    color: #efbbb5;
}

@media (max-width: 820px) {
    .character-portrait-section {
        max-width: 520px;
        width: 100%;
    }
}


/* Stage 7.2.1 — exact centering of the Lore delete action */
.lore-foundry-row {
    grid-template-columns: 68px minmax(0, 1fr) 72px 148px 54px;
}

.lore-foundry-row .skill-rank-select {
    margin-right: 0;
    justify-self: center;
}

.lore-action-cell {
    width: 54px;
    min-width: 54px;
    height: 100%;
    align-self: stretch;
    justify-self: stretch;
    display: grid;
    place-items: center;
    border-left: 1px solid rgba(64,53,42,.45);
}

.lore-action-cell .lore-delete-button,
.lore-action-cell .lore-locked-mark {
    width: 36px;
    height: 36px;
    margin: 0 !important;
    padding: 0;
    justify-self: center;
    align-self: center;
    display: grid;
    place-items: center;
    line-height: 1;
}

.lore-trash-icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

@media (max-width: 700px) {
    .lore-foundry-row {
        grid-template-columns: 60px minmax(0, 1fr) 120px;
    }

    .lore-action-cell {
        display: none;
    }
}


/* Stage 7.3 — interactive portrait cropper */
.character-portrait-image {
    object-fit: cover;
}

.portrait-crop-modal-card {
    width: min(100%, 780px);
}

.portrait-crop-head h2 {
    margin-bottom: .35rem;
}

.portrait-crop-stage {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 520px;
    position: relative;
    overflow: hidden;
    border: 1px solid #4b3d31;
    border-radius: 11px;
    background:
        linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.025) 75%),
        linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.025) 75%),
        #0e0d0c;
    background-size: 22px 22px;
    background-position: 0 0, 11px 11px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.portrait-crop-stage.dragging {
    cursor: grabbing;
}

#portrait-crop-image {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    transform-origin: 0 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.portrait-crop-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 2px solid rgba(226,160,77,.72);
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.55),
        inset 0 0 48px rgba(0,0,0,.16);
}

.portrait-crop-frame::before,
.portrait-crop-frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.portrait-crop-frame::before {
    left: 33.333%;
    right: 33.333%;
    top: 0;
    bottom: 0;
    border-left: 1px solid rgba(255,255,255,.15);
    border-right: 1px solid rgba(255,255,255,.15);
}

.portrait-crop-frame::after {
    top: 33.333%;
    bottom: 33.333%;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.portrait-crop-controls {
    margin-top: 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.portrait-crop-controls label {
    color: #c8b9aa;
    font-weight: 800;
}

#portrait-zoom {
    width: 100%;
    accent-color: var(--gold);
}

.portrait-reset-button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #493d33;
    border-radius: 8px;
    background: rgba(255,255,255,.012);
    color: #d9cdbf;
    cursor: pointer;
}

.portrait-reset-button:hover {
    border-color: rgba(226,160,77,.5);
    color: var(--gold-soft);
}

.portrait-crop-help {
    margin-top: 9px;
    color: #8f8378;
    font-size: .72rem;
}

@media (max-width: 650px) {
    .portrait-crop-controls {
        grid-template-columns: 1fr;
    }

    .portrait-reset-button {
        width: 100%;
    }
}


/* Stage 7.4 — automatic weapon / armor / class DC proficiencies */
.skills-proficiency-head {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #40352a;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.skills-proficiency-head h2 {
    margin: .2rem 0 0;
    color: var(--cream);
    font-size: 2rem;
}

.auto-rule-badge {
    padding: 7px 10px;
    border: 1px solid rgba(95,186,111,.32);
    border-radius: 999px;
    background: rgba(95,186,111,.06);
    color: #a9dcb5;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.class-proficiency-layout {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.class-prof-group {
    min-width: 0;
    padding: 14px;
    border: 1px solid #40352a;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.008), transparent),
        #15120f;
}

.class-prof-group h3 {
    margin: 0 0 10px;
    color: var(--gold-soft);
    font-family: Georgia, serif;
    font-size: 1.18rem;
}

.class-prof-list {
    display: grid;
    gap: 7px;
}

.class-prof-row {
    min-height: 52px;
    padding: 8px 9px;
    border: 1px solid rgba(64,53,42,.72);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.008);
}

.class-prof-main {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
}

.class-prof-main strong {
    color: #e7ddd1;
    font-family: Georgia, serif;
    font-size: .92rem;
}

.class-prof-main small {
    color: #85796e;
    font-size: .62rem;
}

.auto-rank-pill {
    min-width: 94px;
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 900;
    text-transform: uppercase;
}

.auto-rank-pill.rank-untrained {
    border-color: #5b5651;
    background: #35322f;
    color: #d8d2cc;
}
.auto-rank-pill.rank-trained {
    border-color: #5266b7;
    background: #2d3f83;
    color: #eef2ff;
}
.auto-rank-pill.rank-expert {
    border-color: #8a4cb3;
    background: #602b7f;
    color: #f6e7ff;
}
.auto-rank-pill.rank-master {
    border-color: #bd7635;
    background: #874d22;
    color: #ffe8cf;
}
.auto-rank-pill.rank-legendary {
    border-color: #c59a2d;
    background: #8d6b16;
    color: #fff3bd;
}

.class-dc-group {
    grid-column: 1 / -1;
}

.class-dc-card {
    min-height: 78px;
    padding: 10px;
    border: 1px solid rgba(226,160,77,.25);
    border-radius: 9px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    background:
        radial-gradient(circle at 4% 50%, rgba(226,160,77,.07), transparent 18rem),
        rgba(255,255,255,.008);
}

.class-dc-value {
    color: var(--gold-soft);
    font-family: Georgia, serif;
    font-size: 2.3rem;
    font-weight: 800;
    text-align: center;
}

.class-dc-details {
    display: grid;
    gap: 3px;
}

.class-dc-details strong {
    color: #eee3d7;
    font-family: Georgia, serif;
    font-size: 1rem;
}

.class-dc-details small {
    color: #8f8378;
    font-size: .67rem;
}

@media (max-width: 850px) {
    .class-proficiency-layout {
        grid-template-columns: 1fr;
    }

    .class-dc-group {
        grid-column: auto;
    }
}


/* Stage 8.0 — Foundry-like inventory */
.inventory-foundry-panel {
    padding: 20px;
}

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

.inventory-head h2 {
    margin: .2rem 0 0;
    color: var(--cream);
    font-size: 2rem;
}

.inventory-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inventory-summary-chip {
    min-width: 92px;
    min-height: 42px;
    padding: 6px 9px;
    border: 1px solid #40352a;
    border-radius: 8px;
    background: #15120f;
    display: grid;
    align-content: center;
}

.inventory-summary-chip span {
    color: #877b70;
    font-size: .52rem;
    text-transform: uppercase;
}

.inventory-summary-chip strong {
    color: #e5dacd;
    font-size: .78rem;
}

.inventory-sections {
    display: grid;
    gap: 16px;
}

.inventory-category {
    border-top: 1px solid #40352a;
    padding-top: 12px;
}

.inventory-category:first-child {
    border-top: 0;
    padding-top: 0;
}

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

.inventory-category-head > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inventory-category-head h3 {
    margin: 0;
    color: #eadfd3;
    font-family: Georgia, serif;
    font-size: 1.2rem;
}

.inventory-category-head > span {
    color: #82766b;
    font-size: .7rem;
}

.inventory-category-icon {
    color: var(--gold-soft);
}

.inventory-list {
    display: grid;
    gap: 6px;
}

.inventory-row {
    min-height: 66px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 60px 60px 90px;
    align-items: stretch;
    border: 1px solid #40352a;
    border-radius: 8px;
    background: #15120f;
    overflow: hidden;
}

.inventory-row.inventory-equipped {
    box-shadow: inset 3px 0 0 rgba(95,186,111,.58);
}

.inventory-item-icon {
    display: grid;
    place-items: center;
    border-right: 1px solid #40352a;
    color: var(--gold-soft);
    font-size: 1.2rem;
}

.inventory-item-main {
    min-width: 0;
    padding: 9px 11px;
    display: grid;
    align-content: center;
    gap: 4px;
}

.inventory-item-name-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inventory-item-name-line strong {
    min-width: 0;
    color: #e9ded2;
    font-family: Georgia, serif;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipped-pill {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid rgba(95,186,111,.3);
    border-radius: 999px;
    background: rgba(95,186,111,.06);
    color: #a8ddb4;
    font-size: .52rem;
    font-weight: 900;
    text-transform: uppercase;
}

.inventory-item-meta {
    color: #8b7f74;
    font-size: .64rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inventory-number-cell {
    border-left: 1px solid #40352a;
    display: grid;
    place-content: center;
    justify-items: center;
}

.inventory-number-cell span {
    color: #776b61;
    font-size: .5rem;
    text-transform: uppercase;
}

.inventory-number-cell strong {
    color: #ded3c7;
    font-size: .9rem;
}

.inventory-row-actions {
    border-left: 1px solid #40352a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.inventory-row-actions form {
    margin: 0;
}

.inventory-equip-button,
.inventory-delete-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #493d33;
    border-radius: 7px;
    background: rgba(255,255,255,.01);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.inventory-equip-button {
    color: #9a8e82;
}

.inventory-equip-button.active {
    border-color: rgba(95,186,111,.45);
    background: rgba(95,186,111,.07);
    color: #80ce91;
}

.inventory-delete-button {
    color: #ef847a;
}

.inventory-delete-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inventory-empty {
    padding: 16px;
    border: 1px dashed #40352a;
    border-radius: 8px;
    color: #74685e;
    text-align: center;
    font-size: .75rem;
}

.inventory-modal-card {
    width: min(100%, 760px);
}

.inventory-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.inventory-form-grid .span-2 {
    grid-column: span 2;
}

.inventory-equip-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    align-self: end;
    min-height: 48px;
}

.inventory-equip-check input {
    width: auto;
}

.inventory-special-fields {
    margin: 14px 0;
    padding: 13px;
    border: 1px solid #40352a;
    border-radius: 9px;
    background: rgba(255,255,255,.008);
}

.inventory-special-fields h3 {
    margin: 0 0 10px;
    color: var(--gold-soft);
    font-family: Georgia, serif;
}

.damage-dice-fields {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 6px;
}

@media (max-width: 850px) {
    .inventory-head {
        align-items: stretch;
        flex-direction: column;
    }

    .inventory-head-actions {
        flex-wrap: wrap;
    }

    .inventory-row {
        grid-template-columns: 42px minmax(0, 1fr) 52px 70px;
    }

    .inventory-number-cell:nth-of-type(2) {
        display: none;
    }

    .inventory-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .inventory-form-grid {
        grid-template-columns: 1fr;
    }

    .inventory-form-grid .span-2 {
        grid-column: auto;
    }
}


/* Stage 8.1 — vertical portrait frame, Bulk limits, defense icons */

/* Portrait: proper vertical character portrait */
.character-portrait-frame {
    aspect-ratio: 3 / 4;
    min-height: 0;
    max-height: none;
    border-radius: 14px;
    border: 2px solid rgba(226,160,77,.46);
    background:
        radial-gradient(circle at 50% 20%, rgba(226,160,77,.08), transparent 48%),
        #0e0d0c;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.75),
        0 0 0 5px #1d1814,
        0 0 0 6px rgba(226,160,77,.22),
        inset 0 0 28px rgba(0,0,0,.42),
        0 12px 30px rgba(0,0,0,.22);
}

.character-portrait-frame::before,
.character-portrait-frame::after {
    content: "";
    position: absolute;
    z-index: 3;
    pointer-events: none;
    width: 34px;
    height: 34px;
}

.character-portrait-frame::before {
    left: 8px;
    top: 8px;
    border-left: 2px solid rgba(226,160,77,.72);
    border-top: 2px solid rgba(226,160,77,.72);
}

.character-portrait-frame::after {
    right: 8px;
    bottom: 8px;
    border-right: 2px solid rgba(226,160,77,.72);
    border-bottom: 2px solid rgba(226,160,77,.72);
}

.character-portrait-image {
    object-fit: cover;
}

.character-portrait-section {
    padding: 13px;
}

/* Crop window matches final portrait */
.portrait-crop-stage {
    width: min(100%, 480px);
    margin-inline: auto;
    aspect-ratio: 3 / 4;
    max-height: 660px;
}

/* Defense stat icons */
.defense-label-with-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.defense-stat-icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--gold-soft);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.defense-stat-icon.small {
    width: 14px;
    height: 14px;
}

.foundry-ac-badge .defense-stat-icon,
.foundry-perception-mini .defense-stat-icon {
    filter: drop-shadow(0 0 5px rgba(226,160,77,.16));
}

/* Bulk limits/status */
.inventory-summary-chip small {
    display: block;
    margin-top: 2px;
    color: #82766b;
    font-size: .54rem;
}

.inventory-bulk-chip {
    min-width: 124px;
}

.inventory-status-chip {
    min-width: 116px;
}

.inventory-summary-chip.status-normal {
    border-color: rgba(95,186,111,.30);
}

.inventory-summary-chip.status-normal strong {
    color: #afe0b9;
}

.inventory-summary-chip.status-encumbered {
    border-color: rgba(226,160,77,.48);
    background: rgba(226,160,77,.055);
}

.inventory-summary-chip.status-encumbered strong {
    color: #efb667;
}

.inventory-summary-chip.status-overloaded {
    border-color: rgba(216,120,108,.52);
    background: rgba(216,120,108,.06);
}

.inventory-summary-chip.status-overloaded strong {
    color: #f19a92;
}

@media (max-width: 820px) {
    .character-portrait-section {
        max-width: 360px;
    }
}


/* Stage 8.2 — inventory edit action */
.inventory-edit-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #493d33;
    border-radius: 7px;
    background: rgba(255,255,255,.01);
    color: #d9b46f;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.inventory-edit-button:hover {
    border-color: rgba(226,160,77,.58);
    background: rgba(226,160,77,.07);
    color: var(--gold-soft);
}

.inventory-edit-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inventory-row {
    grid-template-columns: 48px minmax(0, 1fr) 60px 60px 128px;
}

@media (max-width: 850px) {
    .inventory-row {
        grid-template-columns: 42px minmax(0, 1fr) 52px 108px;
    }
}


/* Stage 8.3 — automatic attacks from equipped weapons */
.inventory-attacks-section {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #40352a;
}

.inventory-attacks-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.inventory-attacks-head h3 {
    margin: .2rem 0 0;
    color: #eadfd3;
    font-family: Georgia, serif;
    font-size: 1.35rem;
}

.weapon-attack-list {
    display: grid;
    gap: 8px;
}

.weapon-attack-card {
    min-height: 78px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 88px 140px 110px;
    align-items: stretch;
    border: 1px solid #40352a;
    border-radius: 9px;
    background:
        radial-gradient(circle at 0 50%, rgba(226,160,77,.045), transparent 16rem),
        #15120f;
    overflow: hidden;
}

.weapon-attack-icon {
    display: grid;
    place-items: center;
    border-right: 1px solid #40352a;
    color: var(--gold-soft);
    font-size: 1.35rem;
}

.weapon-attack-main {
    min-width: 0;
    padding: 10px 12px;
    display: grid;
    align-content: center;
    gap: 4px;
}

.weapon-attack-name-line {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.weapon-attack-name-line > strong {
    min-width: 0;
    color: #eadfd3;
    font-family: Georgia, serif;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weapon-trait-pill {
    padding: 2px 5px;
    border: 1px solid rgba(120,150,210,.3);
    border-radius: 999px;
    background: rgba(120,150,210,.06);
    color: #b9c9e9;
    font-size: .5rem;
    font-weight: 900;
    text-transform: uppercase;
}

.weapon-trait-pill.agile {
    border-color: rgba(95,186,111,.3);
    background: rgba(95,186,111,.055);
    color: #ade0b8;
}

.weapon-attack-breakdown {
    color: #84786d;
    font-size: .62rem;
}

.weapon-attack-roll,
.weapon-damage {
    border-left: 1px solid #40352a;
    display: grid;
    place-content: center;
    justify-items: center;
}

.weapon-attack-roll span,
.weapon-damage span,
.weapon-map span {
    color: #776b61;
    font-size: .52rem;
    text-transform: uppercase;
}

.weapon-attack-roll strong {
    color: var(--gold-soft);
    font-family: Georgia, serif;
    font-size: 1.85rem;
}

.weapon-map {
    border-left: 1px solid #40352a;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.weapon-map > div {
    display: grid;
    place-content: center;
    justify-items: center;
}

.weapon-map > div + div {
    border-left: 1px solid #40352a;
}

.weapon-map strong {
    color: #ddd2c6;
    font-size: 1rem;
}

.weapon-damage strong {
    color: #e8ddd0;
    font-family: Georgia, serif;
    font-size: 1.25rem;
}

.weapon-damage small {
    margin-top: 2px;
    color: #82766b;
    font-size: .55rem;
}

@media (max-width: 900px) {
    .weapon-attack-card {
        grid-template-columns: 44px minmax(0, 1fr) 78px 100px;
    }

    .weapon-map {
        display: none;
    }
}

@media (max-width: 650px) {
    .weapon-attack-card {
        grid-template-columns: 42px minmax(0, 1fr) 72px;
    }

    .weapon-damage {
        display: none;
    }
}


/* Stage 8.4 — weapon damage/trait selectors */
.weapon-traits-selector {
    display: grid;
    gap: 8px;
}

.inventory-field-label {
    color: #c9bbad;
    font-size: .74rem;
    font-weight: 800;
}

.weapon-traits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.weapon-trait-choice {
    min-height: 38px;
    padding: 7px 8px;
    border: 1px solid #40352a;
    border-radius: 7px;
    background: rgba(255,255,255,.008);
    display: flex !important;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.weapon-trait-choice:hover {
    border-color: rgba(226,160,77,.38);
    background: rgba(226,160,77,.035);
}

.weapon-trait-choice input {
    width: auto;
    flex: 0 0 auto;
    accent-color: var(--gold);
}

.weapon-trait-choice span {
    color: #cfc3b7;
    font-size: .68rem;
    line-height: 1.2;
}

.weapon-trait-choice:has(input:checked) {
    border-color: rgba(226,160,77,.52);
    background: rgba(226,160,77,.07);
}

.weapon-trait-choice:has(input:checked) span {
    color: var(--gold-soft);
}

.weapon-custom-traits-label {
    margin-top: 2px;
}

@media (max-width: 700px) {
    .weapon-traits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Stage 8.5 — DB-backed weapon references and compact trait browser */
.inventory-special-fields {
    overflow: hidden;
}

.weapon-reference-picker {
    min-width: 0;
}

.weapon-picker-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.weapon-picker-hint {
    color: #82766b;
    font-size: .62rem;
}

.weapon-trait-search {
    width: 100%;
    min-height: 38px;
}

.compact-traits-grid {
    max-height: 275px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid #3d332a;
    border-radius: 9px;
    background: #12100e;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    scrollbar-color: #5c4937 #17130f;
}

.weapon-trait-reference-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 5px;
}

.weapon-trait-reference-row[hidden] {
    display: none;
}

.weapon-trait-reference-row .weapon-trait-choice {
    min-width: 0;
    min-height: 44px;
    padding: 6px 8px;
}

.weapon-trait-choice > span {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.weapon-trait-choice strong {
    color: inherit;
    font-size: .68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weapon-trait-choice small {
    color: #786d63;
    font-size: .52rem;
}

.trait-info-button {
    width: 34px;
    height: 100%;
    min-height: 44px;
    border: 1px solid #40352a;
    border-radius: 7px;
    background: rgba(255,255,255,.008);
    color: #a99b8d;
    cursor: pointer;
    font-size: .88rem;
}

.trait-info-button:hover {
    border-color: rgba(226,160,77,.5);
    background: rgba(226,160,77,.06);
    color: var(--gold-soft);
}

.trait-description-panel {
    min-height: 74px;
    padding: 10px 12px;
    border: 1px solid rgba(226,160,77,.22);
    border-radius: 8px;
    background:
        radial-gradient(circle at 0 0, rgba(226,160,77,.05), transparent 15rem),
        #15120f;
}

.trait-description-panel strong {
    color: var(--gold-soft);
    font-family: Georgia, serif;
    font-size: .9rem;
}

.trait-description-panel p {
    margin: 4px 0 0;
    color: #b1a497;
    font-size: .7rem;
    line-height: 1.45;
}

.trait-description-panel small {
    display: block;
    margin-top: 5px;
    color: #8d8175;
    font-size: .62rem;
}

/* Stop the weapon group/type area from stretching awkwardly */
.inventory-special-fields .inventory-form-grid {
    align-items: start;
}

.inventory-special-fields select,
.inventory-special-fields input {
    min-width: 0;
    width: 100%;
}

@media (max-width: 650px) {
    .compact-traits-grid {
        grid-template-columns: 1fr;
    }

    .weapon-picker-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}


/* Stage 8.5.1 — repair empty weapon reference UI + readable weapon editor */

.inventory-modal-card {
    width: min(96vw, 920px);
    max-height: 92vh;
    overflow-y: auto;
}

/* Weapon editor gets its own predictable layout instead of inheriting the 4-col generic grid. */
.weapon-editor-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: start;
}

.weapon-editor-grid > label,
.weapon-editor-grid > div {
    min-width: 0;
}

.weapon-field-category { grid-column: span 3; }
.weapon-field-usage { grid-column: span 3; }
.weapon-field-dice { grid-column: span 3; }
.weapon-field-damage { grid-column: span 3; }
.weapon-field-group { grid-column: span 4; }
.weapon-field-traits { grid-column: 5 / -1; }

/* The damage dice control must remain readable. */
.damage-dice-fields {
    grid-template-columns: minmax(68px, .8fr) minmax(88px, 1fr) !important;
}

.damage-dice-fields input,
.damage-dice-fields select {
    min-width: 0;
    width: 100%;
}

/* Prevent text clipping in selects. */
.inventory-special-fields select {
    min-height: 46px;
    padding: 0 36px 0 12px;
    font-size: .78rem;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.inventory-special-fields input {
    min-height: 46px;
    font-size: .78rem;
}

.weapon-reference-picker {
    margin-top: 0;
    padding: 12px;
    border: 1px solid rgba(226,160,77,.24);
    border-radius: 9px;
    background: rgba(226,160,77,.018);
}

/* Traits are chips with an info button; two columns keep them readable. */
.compact-traits-grid {
    min-height: 92px;
    max-height: 310px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.weapon-trait-reference-row {
    min-height: 48px;
}

.weapon-trait-choice {
    min-height: 48px !important;
}

.weapon-trait-choice strong {
    font-size: .73rem !important;
}

.weapon-trait-choice small {
    font-size: .58rem !important;
}

.trait-info-button {
    min-height: 48px;
}

/* Make labels readable on dark background. */
.inventory-special-fields label,
.inventory-field-label {
    color: #d4c7ba;
}

.weapon-picker-hint {
    max-width: 320px;
    text-align: right;
    line-height: 1.25;
}

/* The description textarea was browser-white in the screenshot. Bring it back into theme. */
.inventory-modal-card textarea {
    width: 100%;
    min-height: 104px;
    padding: 10px 12px;
    border: 1px solid #40352a;
    border-radius: 8px;
    background: #12100e;
    color: #eee4d8;
    font: inherit;
    resize: vertical;
}

.inventory-modal-card textarea:focus {
    outline: none;
    border-color: rgba(226,160,77,.58);
    box-shadow: 0 0 0 2px rgba(226,160,77,.06);
}

@media (max-width: 820px) {
    .weapon-editor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .weapon-field-category,
    .weapon-field-usage,
    .weapon-field-dice,
    .weapon-field-damage,
    .weapon-field-group,
    .weapon-field-traits {
        grid-column: auto;
    }

    .weapon-field-traits {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .weapon-editor-grid {
        grid-template-columns: 1fr !important;
    }

    .weapon-field-traits {
        grid-column: auto;
    }

    .compact-traits-grid {
        grid-template-columns: 1fr !important;
    }
}


/* Stage 8.5.2 — compact weapon trait checkboxes */

.weapon-trait-choice {
    position: relative;
    padding-left: 34px !important;
}

/* Override generic form input sizing inside trait rows. */
.weapon-trait-choice input[type="checkbox"] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 3px;
    accent-color: var(--gold);
    flex: 0 0 15px;
}

.weapon-trait-choice > span {
    width: 100%;
    min-width: 0;
}

.weapon-trait-reference-row {
    grid-template-columns: minmax(0, 1fr) 36px;
}

.trait-info-button {
    width: 36px;
    min-width: 36px;
}

/* Keep trait rows compact and visually consistent. */
.compact-traits-grid {
    gap: 7px;
}

.weapon-trait-choice,
.trait-info-button {
    min-height: 46px !important;
}

.weapon-trait-choice strong {
    line-height: 1.15;
}

.weapon-trait-choice small {
    line-height: 1.15;
}



/* Stage 8.6 — responsive inventory editor with sticky actions */

#inventory-edit-modal,
#inventory-add-modal {
    padding: clamp(8px, 2vw, 24px);
    align-items: center;
    justify-content: center;
}

#inventory-edit-modal .inventory-modal-card,
#inventory-add-modal .inventory-modal-card {
    width: min(96vw, 980px);
    max-height: min(94vh, 920px);
    height: auto;
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: #15120f;
}

#inventory-edit-modal .inventory-modal-card > .eyebrow,
#inventory-add-modal .inventory-modal-card > .eyebrow,
#inventory-edit-modal .inventory-modal-card > h2,
#inventory-add-modal .inventory-modal-card > h2 {
    margin-left: 20px;
    margin-right: 20px;
}

#inventory-edit-modal .inventory-modal-card > .eyebrow,
#inventory-add-modal .inventory-modal-card > .eyebrow {
    margin-top: 18px;
    margin-bottom: 4px;
}

#inventory-edit-modal .inventory-modal-card > h2,
#inventory-add-modal .inventory-modal-card > h2 {
    margin-top: 0;
    margin-bottom: 12px;
}

#inventory-edit-form,
#inventory-add-form {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.inventory-modal-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 20px 18px;
    scrollbar-width: thin;
    scrollbar-color: #6a5036 #1a1612;
}

.inventory-modal-scroll::-webkit-scrollbar {
    width: 10px;
}

.inventory-modal-scroll::-webkit-scrollbar-track {
    background: #1a1612;
}

.inventory-modal-scroll::-webkit-scrollbar-thumb {
    background: #6a5036;
    border-radius: 10px;
    border: 2px solid #1a1612;
}

/* The actions are always visible, so Save never disappears below the screen. */
.inventory-modal-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 0 !important;
    padding: 12px 20px 16px;
    border-top: 1px solid #40352a;
    background:
        linear-gradient(180deg, rgba(21,18,15,.92), #15120f 24%);
    box-shadow: 0 -12px 26px rgba(0,0,0,.18);
}

/* Denser basic item fields on desktop. */
#inventory-edit-modal .inventory-form-grid,
#inventory-add-modal .inventory-form-grid {
    gap: 9px;
}

#inventory-edit-modal .inventory-form-grid > label,
#inventory-add-modal .inventory-form-grid > label {
    gap: 5px;
}

#inventory-edit-modal .inventory-special-fields,
#inventory-add-modal .inventory-special-fields {
    margin: 12px 0;
    padding: 12px;
}

#inventory-edit-modal .weapon-reference-picker,
#inventory-add-modal .weapon-reference-picker {
    padding: 10px;
}

#inventory-edit-modal .compact-traits-grid,
#inventory-add-modal .compact-traits-grid {
    max-height: min(27vh, 260px);
}

/* Use three columns where room permits, reducing vertical height. */
@media (min-width: 1100px) {
    #inventory-edit-modal .compact-traits-grid,
    #inventory-add-modal .compact-traits-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Tablet */
@media (max-width: 900px) {
    #inventory-edit-modal .inventory-modal-card,
    #inventory-add-modal .inventory-modal-card {
        width: min(98vw, 760px);
        max-height: 96vh;
    }

    #inventory-edit-modal .inventory-form-grid,
    #inventory-add-modal .inventory-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #inventory-edit-modal .inventory-form-grid .span-2,
    #inventory-add-modal .inventory-form-grid .span-2 {
        grid-column: 1 / -1;
    }

    #inventory-edit-modal .weapon-editor-grid,
    #inventory-add-modal .weapon-editor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #inventory-edit-modal .weapon-field-category,
    #inventory-edit-modal .weapon-field-usage,
    #inventory-edit-modal .weapon-field-dice,
    #inventory-edit-modal .weapon-field-damage,
    #inventory-edit-modal .weapon-field-group,
    #inventory-add-modal .weapon-field-category,
    #inventory-add-modal .weapon-field-usage,
    #inventory-add-modal .weapon-field-dice,
    #inventory-add-modal .weapon-field-damage,
    #inventory-add-modal .weapon-field-group {
        grid-column: auto;
    }

    #inventory-edit-modal .weapon-field-traits,
    #inventory-add-modal .weapon-field-traits {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 620px) {
    #inventory-edit-modal,
    #inventory-add-modal {
        padding: 0;
        align-items: stretch;
    }

    #inventory-edit-modal .inventory-modal-card,
    #inventory-add-modal .inventory-modal-card {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    #inventory-edit-modal .inventory-modal-card > .eyebrow,
    #inventory-add-modal .inventory-modal-card > .eyebrow,
    #inventory-edit-modal .inventory-modal-card > h2,
    #inventory-add-modal .inventory-modal-card > h2 {
        margin-left: 14px;
        margin-right: 14px;
    }

    #inventory-edit-modal .inventory-modal-card > .eyebrow,
    #inventory-add-modal .inventory-modal-card > .eyebrow {
        margin-top: 12px;
    }

    #inventory-edit-modal .inventory-modal-card > h2,
    #inventory-add-modal .inventory-modal-card > h2 {
        font-size: clamp(1.7rem, 8vw, 2.25rem);
        margin-bottom: 8px;
    }

    .inventory-modal-scroll {
        padding: 4px 12px 14px;
    }

    .inventory-modal-sticky-actions {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 1fr 1.35fr;
        gap: 8px;
    }

    .inventory-modal-sticky-actions button {
        width: 100%;
        min-width: 0;
        min-height: 46px;
    }

    #inventory-edit-modal .inventory-form-grid,
    #inventory-add-modal .inventory-form-grid,
    #inventory-edit-modal .weapon-editor-grid,
    #inventory-add-modal .weapon-editor-grid {
        grid-template-columns: 1fr !important;
    }

    #inventory-edit-modal .inventory-form-grid .span-2,
    #inventory-add-modal .inventory-form-grid .span-2,
    #inventory-edit-modal .weapon-field-traits,
    #inventory-add-modal .weapon-field-traits {
        grid-column: auto;
    }

    #inventory-edit-modal .inventory-special-fields,
    #inventory-add-modal .inventory-special-fields {
        padding: 10px;
    }

    #inventory-edit-modal .compact-traits-grid,
    #inventory-add-modal .compact-traits-grid {
        max-height: 220px;
        grid-template-columns: 1fr !important;
    }

    .trait-description-panel {
        min-height: 64px;
    }

    .weapon-picker-hint {
        display: none;
    }
}

/* Very short landscape/mobile screens */
@media (max-height: 620px) and (min-width: 621px) {
    #inventory-edit-modal .inventory-modal-card,
    #inventory-add-modal .inventory-modal-card {
        max-height: 98vh;
    }

    #inventory-edit-modal .compact-traits-grid,
    #inventory-add-modal .compact-traits-grid {
        max-height: 150px;
    }

    #inventory-edit-modal .inventory-modal-card > .eyebrow,
    #inventory-add-modal .inventory-modal-card > .eyebrow {
        margin-top: 10px;
    }

    #inventory-edit-modal .inventory-modal-card > h2,
    #inventory-add-modal .inventory-modal-card > h2 {
        margin-bottom: 6px;
    }
}


/* Stage 8.6.1 — use the full weapon editor width efficiently */

/*
Desktop weapon fields now occupy one compact row:
Category | Usage | Dice | Damage type | Weapon group
Traits then use the ENTIRE next row.
This removes the large empty block that used to sit under "Weapon group".
*/
@media (min-width: 821px) {
    #inventory-edit-modal .weapon-editor-grid,
    #inventory-add-modal .weapon-editor-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        align-items: start;
    }

    #inventory-edit-modal .weapon-field-category,
    #inventory-add-modal .weapon-field-category {
        grid-column: span 2 !important;
    }

    #inventory-edit-modal .weapon-field-usage,
    #inventory-add-modal .weapon-field-usage {
        grid-column: span 2 !important;
    }

    #inventory-edit-modal .weapon-field-dice,
    #inventory-add-modal .weapon-field-dice {
        grid-column: span 2 !important;
    }

    #inventory-edit-modal .weapon-field-damage,
    #inventory-add-modal .weapon-field-damage {
        grid-column: span 3 !important;
    }

    #inventory-edit-modal .weapon-field-group,
    #inventory-add-modal .weapon-field-group {
        grid-column: span 3 !important;
    }

    #inventory-edit-modal .weapon-field-traits,
    #inventory-add-modal .weapon-field-traits {
        grid-column: 1 / -1 !important;
        width: 100%;
    }
}

/* At normal desktop widths we can show 4 trait columns because the picker
   now has the full modal width. This greatly reduces internal scrolling. */
@media (min-width: 900px) {
    #inventory-edit-modal .compact-traits-grid,
    #inventory-add-modal .compact-traits-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        max-height: min(25vh, 220px);
    }
}

/* Slightly denser cards while keeping labels readable. */
@media (min-width: 900px) {
    #inventory-edit-modal .weapon-trait-reference-row,
    #inventory-add-modal .weapon-trait-reference-row {
        grid-template-columns: minmax(0, 1fr) 32px;
        gap: 4px;
        min-height: 44px;
    }

    #inventory-edit-modal .weapon-trait-choice,
    #inventory-add-modal .weapon-trait-choice,
    #inventory-edit-modal .trait-info-button,
    #inventory-add-modal .trait-info-button {
        min-height: 44px !important;
    }

    #inventory-edit-modal .trait-info-button,
    #inventory-add-modal .trait-info-button {
        width: 32px;
        min-width: 32px;
    }
}

/* Tablet: keep fields in two columns, traits use both columns. */
@media (max-width: 820px) and (min-width: 621px) {
    #inventory-edit-modal .weapon-editor-grid,
    #inventory-add-modal .weapon-editor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #inventory-edit-modal .weapon-field-category,
    #inventory-edit-modal .weapon-field-usage,
    #inventory-edit-modal .weapon-field-dice,
    #inventory-edit-modal .weapon-field-damage,
    #inventory-edit-modal .weapon-field-group,
    #inventory-add-modal .weapon-field-category,
    #inventory-add-modal .weapon-field-usage,
    #inventory-add-modal .weapon-field-dice,
    #inventory-add-modal .weapon-field-damage,
    #inventory-add-modal .weapon-field-group {
        grid-column: auto !important;
    }

    #inventory-edit-modal .weapon-field-traits,
    #inventory-add-modal .weapon-field-traits {
        grid-column: 1 / -1 !important;
    }

    #inventory-edit-modal .compact-traits-grid,
    #inventory-add-modal .compact-traits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-height: 240px;
    }
}



/* Stage 8.6.2 — equipped toggle in header + safer weapon field proportions */

.inventory-modal-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 20px 10px;
    border-bottom: 1px solid rgba(64,53,42,.45);
}

.inventory-modal-title-row .eyebrow {
    margin: 0 0 4px !important;
}

.inventory-modal-title-row h2 {
    margin: 0 !important;
}

.inventory-equip-corner {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(226,160,77,.32);
    border-radius: 8px;
    background: rgba(226,160,77,.035);
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: #d9cdbf;
    cursor: pointer;
    white-space: nowrap;
}

.inventory-equip-corner:hover {
    border-color: rgba(226,160,77,.58);
    background: rgba(226,160,77,.07);
}

.inventory-equip-corner input[type="checkbox"] {
    width: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: var(--gold);
}

.inventory-equip-corner span {
    font-size: .72rem;
    font-weight: 800;
}

/* The modal title is now self-contained; remove old direct heading spacing. */
#inventory-edit-modal .inventory-modal-card > .eyebrow,
#inventory-add-modal .inventory-modal-card > .eyebrow,
#inventory-edit-modal .inventory-modal-card > h2,
#inventory-add-modal .inventory-modal-card > h2 {
    display: none;
}

/* Basic item fields now use the space freed by the old equipped row. */
@media (min-width: 821px) {
    #inventory-edit-modal .inventory-form-grid:not(.weapon-editor-grid),
    #inventory-add-modal .inventory-form-grid:not(.weapon-editor-grid) {
        grid-template-columns: 2fr 1.1fr 1fr 1fr !important;
    }

    #inventory-edit-modal .inventory-form-grid:not(.weapon-editor-grid) .span-2,
    #inventory-add-modal .inventory-form-grid:not(.weapon-editor-grid) .span-2 {
        grid-column: span 2;
    }

    /* Safer weapon proportions:
       category 2, usage 2, dice 3, damage 2, group 3 = 12 */
    #inventory-edit-modal .weapon-field-category,
    #inventory-add-modal .weapon-field-category {
        grid-column: span 2 !important;
    }

    #inventory-edit-modal .weapon-field-usage,
    #inventory-add-modal .weapon-field-usage {
        grid-column: span 2 !important;
    }

    #inventory-edit-modal .weapon-field-dice,
    #inventory-add-modal .weapon-field-dice {
        grid-column: span 3 !important;
    }

    #inventory-edit-modal .weapon-field-damage,
    #inventory-add-modal .weapon-field-damage {
        grid-column: span 2 !important;
    }

    #inventory-edit-modal .weapon-field-group,
    #inventory-add-modal .weapon-field-group {
        grid-column: span 3 !important;
    }

    /* Keep the dice controls from colliding with the damage type field. */
    #inventory-edit-modal .damage-dice-fields,
    #inventory-add-modal .damage-dice-fields {
        grid-template-columns: minmax(58px, .85fr) minmax(90px, 1.15fr) !important;
        gap: 7px !important;
    }

    #inventory-edit-modal .damage-dice-fields > *,
    #inventory-add-modal .damage-dice-fields > * {
        min-width: 0 !important;
        width: 100% !important;
    }

    #inventory-edit-modal .weapon-field-damage select,
    #inventory-add-modal .weapon-field-damage select {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* Tablet: place equipped toggle in the header but allow wrapping cleanly. */
@media (max-width: 820px) {
    .inventory-modal-title-row {
        padding: 14px 14px 10px;
        align-items: center;
    }

    .inventory-equip-corner {
        min-height: 36px;
        padding-inline: 10px;
    }
}

/* Mobile: header remains compact, equipped control becomes icon-sized text pill. */
@media (max-width: 560px) {
    .inventory-modal-title-row {
        gap: 10px;
        padding: 12px 12px 8px;
    }

    .inventory-modal-title-row h2 {
        font-size: clamp(1.55rem, 7vw, 2rem);
    }

    .inventory-equip-corner {
        min-height: 34px;
        padding: 0 9px;
    }

    .inventory-equip-corner span {
        font-size: .65rem;
    }
}


/* Stage 8.6.3 — readable inventory typography + identical add/edit weapon layout */

/* Inventory category and item text must be readable without zooming. */
.inventory-category-head h3 {
    font-size: 1.38rem;
}

.inventory-item-name-line strong {
    font-size: 1.08rem;
    line-height: 1.2;
}

.inventory-item-meta {
    font-size: .76rem;
    line-height: 1.45;
    color: #a89a8c;
}

.inventory-number-cell span {
    font-size: .58rem;
}

.inventory-number-cell strong {
    font-size: 1rem;
}

.equipped-pill {
    font-size: .58rem;
    padding: 3px 7px;
}

.inventory-category-head > span {
    font-size: .76rem;
}

/* The weapon editor uses the exact same layout in Add and Edit. */
#inventory-add-modal .weapon-editor-grid,
#inventory-edit-modal .weapon-editor-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: start;
}

@media (min-width: 821px) {
    #inventory-add-modal .weapon-field-category,
    #inventory-edit-modal .weapon-field-category { grid-column: span 2 !important; }

    #inventory-add-modal .weapon-field-usage,
    #inventory-edit-modal .weapon-field-usage { grid-column: span 2 !important; }

    #inventory-add-modal .weapon-field-dice,
    #inventory-edit-modal .weapon-field-dice { grid-column: span 3 !important; }

    #inventory-add-modal .weapon-field-damage,
    #inventory-edit-modal .weapon-field-damage { grid-column: span 2 !important; }

    #inventory-add-modal .weapon-field-group,
    #inventory-edit-modal .weapon-field-group { grid-column: span 3 !important; }

    #inventory-add-modal .weapon-field-traits,
    #inventory-edit-modal .weapon-field-traits {
        grid-column: 1 / -1 !important;
        width: 100%;
    }
}

/* Form text slightly larger everywhere in item editor. */
#inventory-add-modal label,
#inventory-edit-modal label,
#inventory-add-modal .inventory-field-label,
#inventory-edit-modal .inventory-field-label {
    font-size: .78rem;
}

#inventory-add-modal input,
#inventory-add-modal select,
#inventory-edit-modal input,
#inventory-edit-modal select {
    font-size: .82rem;
}

#inventory-add-modal .weapon-trait-choice strong,
#inventory-edit-modal .weapon-trait-choice strong {
    font-size: .76rem !important;
    line-height: 1.2;
}

#inventory-add-modal .weapon-trait-choice,
#inventory-edit-modal .weapon-trait-choice {
    padding-right: 8px !important;
}

/* English is still searchable in data attributes, but no longer occupies UI space. */
#inventory-add-modal .weapon-trait-choice small,
#inventory-edit-modal .weapon-trait-choice small {
    display: none !important;
}

.trait-description-panel p {
    font-size: .76rem;
}

.trait-description-panel strong {
    font-size: .98rem;
}

/* Tablet */
@media (max-width: 820px) and (min-width: 621px) {
    #inventory-add-modal .weapon-editor-grid,
    #inventory-edit-modal .weapon-editor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #inventory-add-modal .weapon-field-category,
    #inventory-add-modal .weapon-field-usage,
    #inventory-add-modal .weapon-field-dice,
    #inventory-add-modal .weapon-field-damage,
    #inventory-add-modal .weapon-field-group,
    #inventory-edit-modal .weapon-field-category,
    #inventory-edit-modal .weapon-field-usage,
    #inventory-edit-modal .weapon-field-dice,
    #inventory-edit-modal .weapon-field-damage,
    #inventory-edit-modal .weapon-field-group {
        grid-column: auto !important;
    }

    #inventory-add-modal .weapon-field-traits,
    #inventory-edit-modal .weapon-field-traits {
        grid-column: 1 / -1 !important;
    }
}

/* Mobile */
@media (max-width: 620px) {
    #inventory-add-modal .weapon-editor-grid,
    #inventory-edit-modal .weapon-editor-grid {
        grid-template-columns: 1fr !important;
    }

    #inventory-add-modal .weapon-field-category,
    #inventory-add-modal .weapon-field-usage,
    #inventory-add-modal .weapon-field-dice,
    #inventory-add-modal .weapon-field-damage,
    #inventory-add-modal .weapon-field-group,
    #inventory-add-modal .weapon-field-traits,
    #inventory-edit-modal .weapon-field-category,
    #inventory-edit-modal .weapon-field-usage,
    #inventory-edit-modal .weapon-field-dice,
    #inventory-edit-modal .weapon-field-damage,
    #inventory-edit-modal .weapon-field-group,
    #inventory-edit-modal .weapon-field-traits {
        grid-column: auto !important;
    }

    .inventory-item-name-line strong {
        font-size: 1rem;
    }

    .inventory-item-meta {
        font-size: .72rem;
        white-space: normal;
    }
}


/* Stage 9.0 — Actions tab, D20 roller and roll history */

/* Three-column desktop sheet: combat sidebar / sheet / roll history. */
@media (min-width: 1280px) {
    .foundry-character-page {
        width: min(1780px, calc(100% - 24px));
    }

    .foundry-sheet-shell {
        grid-template-columns: 300px minmax(720px, 1fr) 250px;
        gap: 12px;
    }
}

.roll-history-rail {
    position: sticky;
    top: 100px;
    min-width: 0;
    max-height: calc(100vh - 120px);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.008), transparent),
        var(--panel-soft);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.roll-history-head {
    padding: 13px 13px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line-soft);
}

.roll-history-head .eyebrow {
    margin: 0 0 2px;
}

.roll-history-head h3 {
    margin: 0;
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 1.2rem;
}

.roll-history-clear {
    width: 32px;
    height: 32px;
    border: 1px solid #493d33;
    border-radius: 7px;
    background: transparent;
    color: #9a8d80;
    cursor: pointer;
    font-size: 1rem;
}

.roll-history-clear:hover {
    color: #ef9a91;
    border-color: rgba(239,132,122,.48);
}

.roll-history-current {
    min-height: 92px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(226,160,77,.025);
}

.roll-empty-d20,
.roll-current-die {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(226,160,77,.42);
    clip-path: polygon(50% 0%, 95% 25%, 82% 84%, 50% 100%, 18% 84%, 5% 25%);
    background: rgba(226,160,77,.07);
    color: var(--gold-soft);
    font-weight: 900;
    font-size: .7rem;
}

.roll-current-die {
    font-size: 1.4rem;
    font-family: Georgia, serif;
}

.roll-history-current > div {
    min-width: 0;
    display: grid;
}

.roll-history-current strong {
    color: var(--cream);
    font-size: 1.35rem;
}

.roll-history-current small {
    color: #8e8175;
    font-size: .64rem;
    line-height: 1.35;
}

.roll-history-list {
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
    display: grid;
    align-content: start;
    gap: 6px;
}

.roll-history-entry {
    min-height: 54px;
    padding: 8px 9px;
    border: 1px solid #3e342b;
    border-radius: 7px;
    background: #15120f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.roll-history-entry > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.roll-history-entry strong {
    color: #dcd1c5;
    font-size: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roll-history-entry small {
    color: #786d63;
    font-size: .57rem;
}

.roll-history-entry b {
    flex: 0 0 auto;
    color: var(--gold-soft);
    font-family: Georgia, serif;
    font-size: 1.15rem;
}

/* Below desktop, history becomes a compact full-width panel below the main sheet. */
@media (max-width: 1279px) {
    .roll-history-rail {
        grid-column: 1 / -1;
        position: static;
        max-height: 300px;
    }

    .roll-history-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .roll-history-list {
        grid-template-columns: 1fr;
    }
}

/* Six tabs now. */
.foundry-top-tabs {
    grid-template-columns: repeat(6, minmax(105px, 1fr));
}

@media (max-width: 900px) {
    .foundry-top-tabs {
        overflow-x: auto;
        display: flex;
    }

    .foundry-top-tab {
        flex: 0 0 150px;
    }
}

/* Actions tab */
.actions-panel {
    padding: 18px;
}

.actions-panel-head {
    margin-bottom: 18px;
}

.actions-panel-head h2 {
    margin: .18rem 0 .3rem;
    color: var(--cream);
    font-size: 2rem;
}

.actions-panel-head p:last-child {
    margin: 0;
    color: #9b8e82;
    font-size: .82rem;
}

.action-group {
    padding-top: 16px;
    border-top: 1px solid #40352a;
}

.action-group + .action-group {
    margin-top: 20px;
}

.action-group-title {
    margin-bottom: 10px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.action-group-title > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-group-title .eyebrow {
    margin: 0;
}

.action-group-title h3 {
    margin: 2px 0 0;
    color: #eadfd3;
    font-family: Georgia, serif;
    font-size: 1.45rem;
}

.action-symbol {
    color: var(--gold-soft);
    font-size: 1.4rem;
}

.action-weapon-list,
.shield-action-list {
    display: grid;
    gap: 8px;
}

.action-weapon-card {
    min-height: 88px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 92px 122px 104px;
    border: 1px solid #40352a;
    border-radius: 9px;
    background:
        radial-gradient(circle at 0 50%, rgba(226,160,77,.055), transparent 18rem),
        #15120f;
    overflow: hidden;
}

.action-weapon-icon {
    display: grid;
    place-items: center;
    border-right: 1px solid #40352a;
    color: var(--gold-soft);
    font-size: 1.45rem;
}

.action-weapon-main {
    min-width: 0;
    padding: 11px 13px;
    display: grid;
    align-content: center;
    gap: 5px;
}

.action-weapon-name {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.action-weapon-name strong {
    min-width: 0;
    color: #f0e5d8;
    font-family: Georgia, serif;
    font-size: 1.14rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-weapon-details {
    color: #988a7d;
    font-size: .72rem;
    line-height: 1.4;
}

.action-attack-value,
.action-roll-zone {
    border-left: 1px solid #40352a;
    display: grid;
    place-content: center;
    justify-items: center;
}

.action-attack-value span {
    color: #7e7166;
    font-size: .56rem;
    text-transform: uppercase;
}

.action-attack-value strong {
    color: var(--gold-soft);
    font-family: Georgia, serif;
    font-size: 1.85rem;
}

.action-map-values {
    border-left: 1px solid #40352a;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.action-map-values > div {
    display: grid;
    place-content: center;
    justify-items: center;
}

.action-map-values > div + div {
    border-left: 1px solid #40352a;
}

.action-map-values span {
    color: #74685e;
    font-size: .54rem;
    text-transform: uppercase;
}

.action-map-values strong {
    color: #ddd2c6;
    font-size: .98rem;
}

.d20-roll-button,
.mini-d20-button {
    border: 1px solid rgba(226,160,77,.48);
    background: rgba(226,160,77,.055);
    color: var(--gold-soft);
    cursor: pointer;
    display: grid;
    place-items: center;
    clip-path: polygon(50% 0%, 94% 24%, 82% 84%, 50% 100%, 18% 84%, 6% 24%);
}

.d20-roll-button {
    width: 50px;
    height: 50px;
}

.d20-roll-button span,
.mini-d20-button span {
    font-size: .58rem;
    font-weight: 900;
}

.d20-roll-button:hover,
.mini-d20-button:hover {
    background: rgba(226,160,77,.15);
    filter: brightness(1.15);
}

.inline-roll-result {
    margin-top: 4px;
    min-width: 28px;
    text-align: center;
    color: #776b61;
    font-size: .66rem;
    font-weight: 800;
}

.inline-roll-result.has-result {
    color: #aee0b8;
}

.inline-roll-result.compact {
    margin: 0;
    font-size: .62rem;
}

.mini-d20-button {
    width: 31px;
    height: 31px;
    padding: 0;
}

.skill-roll-control {
    display: grid;
    justify-items: center;
    gap: 2px;
}

/* Skills now include D20 control column. */
.skill-foundry-row {
    grid-template-columns: 68px minmax(0, 1fr) 72px 46px 122px;
}

/* Sidebar save buttons fit without making labels tiny. */
.foundry-perception-mini,
.foundry-save-list > div {
    position: relative;
}

.foundry-perception-mini .mini-d20-button {
    margin-top: 4px;
}

.foundry-save-list > div {
    min-height: 112px;
}

.foundry-save-list .mini-d20-button {
    margin-top: 4px;
}

/* Shield actions */
.shield-action-card {
    padding: 10px;
    border: 1px solid #40352a;
    border-radius: 9px;
    background: #15120f;
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(210px, 1fr) minmax(210px, 1fr);
    gap: 9px;
}

.shield-action-ident {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shield-big-icon {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(226,160,77,.35);
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--gold-soft);
    font-size: 1.4rem;
}

.shield-action-ident > div {
    display: grid;
}

.shield-action-ident strong {
    color: #eadfd3;
    font-family: Georgia, serif;
    font-size: 1.05rem;
}

.shield-action-ident small {
    color: #7f7368;
    font-size: .63rem;
}

.sheet-action-button {
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid #493d33;
    border-radius: 8px;
    background: rgba(255,255,255,.008);
    color: #d9cdbf;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.sheet-action-button:hover {
    border-color: rgba(226,160,77,.48);
    background: rgba(226,160,77,.05);
}

.sheet-action-button > span:last-child {
    display: grid;
    gap: 2px;
}

.sheet-action-button b {
    color: #e9ded1;
    font-size: .78rem;
}

.sheet-action-button small {
    color: #85796e;
    font-size: .61rem;
}

.action-count {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid rgba(226,160,77,.32);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--gold-soft);
}

.shield-raised {
    border-color: rgba(95,186,111,.5);
    box-shadow: inset 3px 0 0 rgba(95,186,111,.55);
}

.shield-raised .raise-shield-button {
    border-color: rgba(95,186,111,.45);
    background: rgba(95,186,111,.065);
}

.reaction-used {
    animation: reactionFlash .8s ease;
}

@keyframes reactionFlash {
    0%,100% { background: rgba(255,255,255,.008); }
    40% { background: rgba(95,186,111,.15); }
}

/* D20 modal */
.d20-roll-modal-card {
    width: min(94vw, 560px);
}

.d20-modal-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.d20-large-mark {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    clip-path: polygon(50% 0%, 94% 24%, 82% 84%, 50% 100%, 18% 84%, 6% 24%);
    border: 1px solid var(--gold);
    background: rgba(226,160,77,.1);
    color: var(--gold-soft);
    font-weight: 900;
}

.d20-modal-heading h2 {
    margin: 2px 0 3px;
}

.roll-bonus-list {
    margin-top: 15px;
    display: grid;
    gap: 7px;
}

.roll-bonus-toggle {
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid #40352a;
    border-radius: 8px;
    background: #15120f;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 42px;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.roll-bonus-toggle > span:first-child {
    display: grid;
}

.roll-bonus-toggle strong {
    color: #e3d8cc;
    font-size: .78rem;
}

.roll-bonus-toggle small {
    color: #817469;
    font-size: .61rem;
}

.roll-toggle-value {
    color: var(--gold-soft);
    font-family: Georgia, serif;
    font-size: 1.05rem;
    font-weight: 800;
}

.roll-bonus-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.roll-toggle-switch {
    width: 38px;
    height: 21px;
    border: 1px solid #5a4b3e;
    border-radius: 999px;
    background: #28231f;
    position: relative;
}

.roll-toggle-switch::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    left: 3px;
    top: 2px;
    border-radius: 50%;
    background: #8c7f72;
    transition: transform .16s ease, background .16s ease;
}

.roll-bonus-toggle input:checked + .roll-toggle-switch {
    border-color: rgba(95,186,111,.52);
    background: rgba(95,186,111,.13);
}

.roll-bonus-toggle input:checked + .roll-toggle-switch::after {
    transform: translateX(16px);
    background: #77c789;
}

.roll-custom-row {
    margin-top: 10px;
}

.roll-custom-row input {
    min-height: 44px;
}

.roll-preview {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #40352a;
    border-radius: 8px;
    background: rgba(226,160,77,.025);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.roll-preview span {
    color: #887b6f;
    font-size: .68rem;
}

.roll-preview strong {
    color: var(--gold-soft);
    font-family: Georgia, serif;
    font-size: 1.1rem;
}

.roll-modal-result {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid rgba(95,186,111,.33);
    border-radius: 9px;
    overflow: hidden;
    background: rgba(95,186,111,.035);
}

.roll-modal-result > div {
    min-height: 82px;
    display: grid;
    place-content: center;
    justify-items: center;
}

.roll-modal-result > div + div {
    border-left: 1px solid rgba(95,186,111,.22);
}

.roll-modal-result span {
    color: #8caa92;
    font-size: .6rem;
    text-transform: uppercase;
}

.roll-modal-result strong {
    color: #c9efd1;
    font-family: Georgia, serif;
    font-size: 2rem;
}

.roll-no-bonuses {
    padding: 12px;
    border: 1px dashed #40352a;
    border-radius: 8px;
    color: #82766b;
    text-align: center;
    font-size: .72rem;
}

/* Responsive actions */
@media (max-width: 900px) {
    .action-weapon-card {
        grid-template-columns: 46px minmax(0, 1fr) 78px 86px;
    }

    .action-map-values {
        display: none;
    }

    .shield-action-card {
        grid-template-columns: 1fr 1fr;
    }

    .shield-action-ident {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .actions-panel {
        padding: 12px;
    }

    .action-weapon-card {
        grid-template-columns: 42px minmax(0, 1fr) 72px;
    }

    .action-roll-zone {
        grid-column: 1 / -1;
        min-height: 58px;
        border-left: 0;
        border-top: 1px solid #40352a;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .shield-action-card {
        grid-template-columns: 1fr;
    }

    .shield-action-ident {
        grid-column: auto;
    }

    .skill-foundry-row,
    .lore-foundry-row {
        grid-template-columns: 58px minmax(0, 1fr) 62px 42px;
    }

    .skill-rank-select {
        grid-column: 2 / -1;
        margin: 0 8px 8px;
    }
}


/* Stage 9.1 — rebalance three-column layout + defense save reliability */

/*
History should not steal space from the combat HUD.
On wide screens the left combat sidebar is deliberately wider,
while the central sheet gives up some unused width.
*/
@media (min-width: 1280px) {
    .foundry-character-page {
        width: min(1820px, calc(100% - 20px));
    }

    .foundry-sheet-shell {
        grid-template-columns:
            clamp(330px, 21vw, 360px)
            minmax(610px, 1fr)
            clamp(220px, 15vw, 245px) !important;
        gap: 12px;
    }
}

/* On very wide displays keep the center comfortable, not excessive. */
@media (min-width: 1700px) {
    .foundry-sheet-shell {
        grid-template-columns: 350px minmax(650px, 1fr) 240px !important;
    }
}

/* HP/defense sidebar gets more breathing room. */
@media (min-width: 1280px) {
    .foundry-hp-triad {
        grid-template-columns: .82fr 1.36fr .82fr;
        gap: 8px;
    }

    .foundry-hp-triad > div {
        min-width: 0;
    }

    .foundry-current-hp strong {
        font-size: clamp(1.9rem, 2.15vw, 2.5rem);
    }

    .foundry-save-list > div {
        padding-inline: 7px;
    }
}

/* Visible confirmation when defense proficiency ranks were written to DB. */
.defense-save-flash {
    margin: 9px 10px 0;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid rgba(95,186,111,.38);
    border-radius: 7px;
    background: rgba(95,186,111,.065);
    color: #aee0b8;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .64rem;
}

.defense-save-flash span {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(95,186,111,.5);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
}

.defense-save-flash.error {
    border-color: rgba(239,132,122,.42);
    background: rgba(239,132,122,.06);
    color: #ef9b93;
}

.defense-save-flash.error span {
    border-color: rgba(239,132,122,.5);
}

/* Defense editor: ranks remain readable on compact screens. */
.defense-edit-row select {
    min-width: 130px;
}

@media (max-width: 620px) {
    .defense-edit-row select {
        min-width: 0;
        width: 100%;
    }
}


/* Stage 9.2 — wider combat sidebar + permanent vertical roll log */

/*
Desktop proportions:
- left combat HUD gets noticeably more space;
- center gives up width (it has comfortable reserves);
- roll history remains a narrow but full-height vertical log.
*/
@media (min-width: 1280px) {
    .foundry-character-page {
        width: min(1900px, calc(100% - 16px));
    }

    .foundry-sheet-shell {
        grid-template-columns:
            clamp(380px, 24vw, 420px)
            minmax(560px, 1fr)
            clamp(250px, 16vw, 285px) !important;
        gap: 12px;
        align-items: start;
    }

    /* The left HUD is no longer squeezed by the three-column layout. */
    .foundry-combat-sidebar {
        min-width: 0;
        width: 100%;
    }

    .foundry-hp-triad {
        grid-template-columns: minmax(88px, .9fr) minmax(132px, 1.35fr) minmax(96px, .95fr);
        gap: 9px;
    }

    .foundry-ac-row {
        grid-template-columns: minmax(110px, .9fr) minmax(165px, 1.45fr);
        gap: 9px;
    }

    .foundry-save-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* History becomes a real vertical rail, not a small card. */
    .roll-history-rail {
        position: sticky;
        top: 94px;
        height: calc(100vh - 110px);
        max-height: none;
        min-height: 520px;
        align-self: start;
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    .roll-history-list {
        min-height: 0;
        overflow-y: auto;
    }
}

/* On ultra-wide screens, don't let the center swallow all remaining width. */
@media (min-width: 1700px) {
    .foundry-sheet-shell {
        grid-template-columns: 410px minmax(600px, 1fr) 280px !important;
    }
}

/* The history title now has no unnecessary "close/clear" control. */
.roll-history-head {
    justify-content: flex-start;
}

/* Give the history log a little more presence/readability. */
.roll-history-current {
    min-height: 108px;
}

.roll-history-entry {
    min-height: 60px;
}

.roll-history-entry strong {
    font-size: .76rem;
}

.roll-history-entry small {
    font-size: .61rem;
}

/* Tablet / smaller screens: keep current behavior — history moves below the sheet. */
@media (max-width: 1279px) {
    .roll-history-rail {
        height: auto;
        min-height: 0;
        max-height: 320px;
    }
}


/* Stage 9.3 — larger combat typography, icons and D20 controls */

/* Section titles should visually anchor the left combat rail. */
.foundry-side-title {
    gap: 10px;
}

.foundry-side-title > span {
    font-size: 1.08rem;
    font-weight: 950;
    letter-spacing: .055em;
}

.side-title-icon {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 1.9;
}

/* Defense cards: larger labels and icons. */
.foundry-defense-section .defense-label-with-icon {
    gap: 8px;
    font-size: .79rem;
    font-weight: 800;
    letter-spacing: .015em;
}

.foundry-defense-section .defense-stat-icon {
    width: 21px;
    height: 21px;
    stroke-width: 1.9;
}

.foundry-defense-section .defense-stat-icon.small {
    width: 18px;
    height: 18px;
}

.foundry-ac-badge,
.foundry-perception-mini {
    min-height: 142px;
    padding: 13px 10px;
}

.foundry-ac-badge strong {
    margin-top: 5px;
    font-size: clamp(2.5rem, 3.1vw, 3.25rem);
    line-height: .98;
}

.foundry-perception-mini > strong {
    margin-top: 4px;
    font-size: clamp(2.25rem, 2.8vw, 3rem);
    line-height: 1;
}

.foundry-perception-mini > small,
.foundry-save-list > div > small {
    margin-top: 3px;
    font-size: .68rem;
    color: #9c8f82;
}

/* Saves become visually stronger and easier to scan. */
.foundry-save-list > div {
    min-height: 142px;
    padding: 12px 7px 10px;
}

.foundry-save-list > div > strong {
    margin-top: 5px;
    font-size: clamp(1.85rem, 2vw, 2.3rem);
    line-height: 1;
}

/* D20: larger, obvious, and no longer lost under the numbers. */
.foundry-defense-section .mini-d20-button {
    width: 50px !important;
    height: 50px !important;
    margin-top: 9px !important;
    border: 1px solid rgba(226,160,77,.62);
    background:
        radial-gradient(circle at 50% 40%, rgba(226,160,77,.16), transparent 70%),
        rgba(226,160,77,.055);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.22));
}

.foundry-defense-section .mini-d20-button span {
    font-size: .72rem;
    letter-spacing: .02em;
}

.foundry-defense-section .inline-roll-result.compact {
    min-width: 42px;
    margin-top: 4px;
    font-size: .78rem;
    font-weight: 900;
}

.foundry-defense-section .inline-roll-result.compact.has-result {
    padding: 3px 7px;
    border: 1px solid rgba(95,186,111,.32);
    border-radius: 999px;
    background: rgba(95,186,111,.055);
}

/* Movement section: match the same hierarchy as Defense. */
.foundry-movement-section {
    padding-bottom: 14px;
}

.foundry-movement-section .foundry-side-title {
    margin-bottom: 13px;
}

.foundry-movement-grid {
    gap: 10px;
}

.foundry-movement-grid > div {
    min-height: 118px;
    padding: 13px 10px;
    border-radius: 10px;
}

.foundry-movement-section .defense-label-with-icon {
    gap: 8px;
    font-size: .8rem;
    font-weight: 800;
}

.foundry-movement-section .defense-stat-icon {
    width: 21px;
    height: 21px;
    stroke-width: 1.9;
}

.foundry-movement-grid > div > strong {
    margin-top: 7px;
    font-size: clamp(2rem, 2.3vw, 2.55rem);
    line-height: 1;
}

.foundry-movement-grid > div > small {
    margin-top: 5px;
    font-size: .72rem;
    color: #a09284;
}

.foundry-size-text {
    font-size: clamp(1.7rem, 2vw, 2.15rem) !important;
}

.movement-stat-icon {
    color: var(--gold-soft);
}

/* Slightly stronger section borders / warm glow, matching the new reference. */
.foundry-defense-section,
.foundry-movement-section {
    border-color: rgba(226,160,77,.24);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.008),
        0 8px 24px rgba(0,0,0,.08);
}

/* Desktop: use the available sidebar width rather than compressing content. */
@media (min-width: 1280px) {
    .foundry-ac-row {
        grid-template-columns: minmax(120px, .9fr) minmax(190px, 1.45fr) !important;
    }

    .foundry-save-list {
        gap: 7px;
    }
}

/* Tablet: remain readable without becoming enormous. */
@media (max-width: 1279px) and (min-width: 621px) {
    .foundry-defense-section .mini-d20-button {
        width: 44px !important;
        height: 44px !important;
    }

    .foundry-ac-badge,
    .foundry-perception-mini {
        min-height: 126px;
    }

    .foundry-save-list > div {
        min-height: 126px;
    }
}

/* Phone: icons/buttons stay finger-friendly but don't dominate the screen. */
@media (max-width: 620px) {
    .foundry-side-title > span {
        font-size: 1rem;
    }

    .side-title-icon {
        width: 21px !important;
        height: 21px !important;
    }

    .foundry-defense-section .defense-stat-icon,
    .foundry-movement-section .defense-stat-icon {
        width: 18px;
        height: 18px;
    }

    .foundry-defense-section .mini-d20-button {
        width: 42px !important;
        height: 42px !important;
    }

    .foundry-ac-badge strong,
    .foundry-perception-mini > strong {
        font-size: 2.2rem;
    }

    .foundry-save-list > div > strong {
        font-size: 1.75rem;
    }

    .foundry-movement-grid > div {
        min-height: 102px;
    }
}


/* Stage 9.4 — compact Foundry-like Defense panel */

.foundry-defense-compact {
    padding: 12px !important;
}

.compact-defense-head {
    margin-bottom: 8px;
}

.compact-defense-core {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 7px;
}

.compact-ac-shield {
    min-height: 106px;
    padding: 8px 6px;
    border: 1px solid rgba(226,160,77,.28);
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 20%, rgba(226,160,77,.065), transparent 65%),
        var(--panel-deep);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 3px;
}

.compact-defense-caption {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #b8a99a;
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.compact-defense-caption svg,
.compact-stat-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--gold-soft);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compact-ac-shield > strong {
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 2.65rem;
    line-height: 1;
}

.compact-defense-lines {
    min-width: 0;
    display: grid;
    grid-template-rows: 1fr 1fr;
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    overflow: hidden;
    background: var(--panel-deep);
}

.compact-defense-line {
    min-width: 0;
    min-height: 51px;
    padding: 6px 7px;
    display: grid;
    grid-template-columns: 22px minmax(74px, 1fr) auto auto 35px 25px;
    align-items: center;
    gap: 5px;
}

.compact-defense-line + .compact-defense-line {
    border-top: 1px solid var(--line-soft);
}

.compact-stat-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
}

.compact-defense-name {
    min-width: 0;
    color: #e3d7ca;
    font-size: .72rem;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-defense-value {
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 1.38rem;
    line-height: 1;
}

.compact-rank-pill {
    min-width: 61px;
    padding: 3px 5px;
    border: 1px solid #51443a;
    border-radius: 4px;
    background: #29231f;
    color: #d2c7bb;
    text-align: center;
    font-size: .54rem;
    font-weight: 950;
    text-transform: uppercase;
    white-space: nowrap;
}

.compact-rank-pill.rank-trained {
    border-color: #5067b8;
    background: #24366e;
    color: #d9e2ff;
}

.compact-rank-pill.rank-expert {
    border-color: #8357ae;
    background: #512678;
    color: #f0dcff;
}

.compact-rank-pill.rank-master {
    border-color: #a5692c;
    background: #6a3c18;
    color: #ffe2bd;
}

.compact-rank-pill.rank-legendary {
    border-color: #9d7f23;
    background: #6a5312;
    color: #fff0a8;
}

.compact-d20-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(226,160,77,.5);
    background: rgba(226,160,77,.055);
    color: var(--gold-soft);
    cursor: pointer;
    display: grid;
    place-items: center;
    clip-path: polygon(50% 0%, 94% 24%, 82% 84%, 50% 100%, 18% 84%, 6% 24%);
}

.compact-d20-button span {
    font-size: .52rem;
    font-weight: 950;
}

.compact-d20-button:hover {
    background: rgba(226,160,77,.16);
    filter: brightness(1.13);
}

.compact-inline-result {
    min-width: 24px;
    color: #7f7368;
    font-size: .64rem;
    font-weight: 900;
    text-align: center;
}

.compact-inline-result.has-result {
    color: #aee0b8;
}

.initiative-source-select {
    min-width: 0;
    width: 100%;
    height: 32px;
    padding: 0 26px 0 8px;
    border: 1px solid #5a4633;
    border-radius: 5px;
    background: #17130f;
    color: #ddd1c4;
    font-size: .64rem;
    font-weight: 750;
}

.initiative-line {
    grid-template-columns: 22px minmax(70px, .8fr) auto minmax(92px, 1.2fr) 35px 25px;
}

.compact-saves-title {
    margin-top: 9px;
    padding: 0 2px 5px;
    color: var(--gold-soft);
    font-family: Georgia, serif;
    font-size: .86rem;
    font-weight: 850;
    border-bottom: 1px solid rgba(226,160,77,.28);
}

.compact-save-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line-soft);
    border-top: 0;
    border-radius: 0 0 9px 9px;
    overflow: hidden;
}

.compact-save-cell {
    min-width: 0;
    min-height: 104px;
    padding: 7px 6px 6px;
    background: var(--panel-deep);
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 5px;
}

.compact-save-cell + .compact-save-cell {
    border-left: 1px solid var(--line-soft);
}

.compact-save-head {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #d8ccbf;
    font-size: .62rem;
    font-weight: 850;
    white-space: nowrap;
}

.compact-save-head .compact-stat-icon {
    width: 17px;
    height: 17px;
}

.compact-save-head .compact-stat-icon svg {
    width: 15px;
    height: 15px;
}

.compact-save-cell .compact-rank-pill {
    min-width: 72px;
}

.compact-save-roll-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.compact-save-roll-row > strong {
    color: var(--cream);
    font-size: 1.42rem;
    line-height: 1;
}

.compact-save-cell .compact-d20-button {
    width: 31px;
    height: 31px;
}

.compact-save-cell .compact-inline-result {
    min-height: 14px;
}

/* This Foundry-style layout replaces the taller Stage 9.3 cards. */
.foundry-defense-compact .foundry-ac-row,
.foundry-defense-compact .foundry-save-list,
.foundry-defense-compact .foundry-perception-mini,
.foundry-defense-compact .foundry-ac-badge {
    display: none !important;
}

@media (min-width: 1280px) {
    .compact-defense-core {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .compact-defense-line {
        grid-template-columns: 22px minmax(78px, 1fr) auto auto 36px 26px;
    }

    .initiative-line {
        grid-template-columns: 22px minmax(76px, .8fr) auto minmax(105px, 1.25fr) 36px 26px;
    }
}

@media (max-width: 620px) {
    .compact-defense-core {
        grid-template-columns: 84px minmax(0, 1fr);
    }

    .compact-ac-shield > strong {
        font-size: 2.25rem;
    }

    .compact-defense-line {
        grid-template-columns: 20px minmax(64px, 1fr) auto 32px 24px;
    }

    .compact-defense-line .compact-rank-pill {
        display: none;
    }

    .initiative-line {
        grid-template-columns: 20px minmax(62px, .7fr) auto minmax(92px, 1.3fr) 32px 24px;
    }

    .compact-save-cell {
        min-height: 98px;
        padding-inline: 4px;
    }

    .compact-save-head {
        font-size: .56rem;
    }

    .compact-save-cell .compact-rank-pill {
        min-width: 60px;
        font-size: .48rem;
    }
}


/* Stage 9.5 — true d20-style roll buttons */

/*
The old roll buttons were clipped generic shapes with "D20" text.
Now every roll control uses the same faceted polyhedral die drawing.
*/
.d20-die-icon {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    pointer-events: none;
}

.d20-shell {
    fill: rgba(38, 29, 20, .98);
    stroke: #e2a04d;
    stroke-width: 2.3;
    stroke-linejoin: round;
}

.d20-facet {
    fill: none;
    stroke: rgba(226, 160, 77, .58);
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.d20-number {
    fill: #f2bf73;
    font-family: Georgia, serif;
    font-size: 16px;
    font-weight: 900;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: rgba(18, 13, 9, .75);
    stroke-width: 1.5px;
}

/* All roll buttons now let the SVG define the silhouette. */
.compact-d20-button,
.mini-d20-button,
.d20-roll-button {
    clip-path: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 2px !important;
    background: transparent !important;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.28));
    overflow: visible;
}

.compact-d20-button:hover,
.mini-d20-button:hover,
.d20-roll-button:hover {
    background: transparent !important;
    filter:
        drop-shadow(0 0 5px rgba(226,160,77,.34))
        drop-shadow(0 4px 6px rgba(0,0,0,.28))
        brightness(1.12);
    transform: translateY(-1px);
}

.compact-d20-button:active,
.mini-d20-button:active,
.d20-roll-button:active {
    transform: translateY(1px) scale(.97);
}

/* Larger, unmistakable initiative roll button. */
.initiative-d20-button {
    width: 42px !important;
    height: 42px !important;
    justify-self: center;
}

.initiative-d20-button .d20-number {
    font-size: 17px;
}

.initiative-line {
    grid-template-columns: 22px minmax(74px, .72fr) auto minmax(100px, 1.15fr) 44px 25px !important;
}

/* Saves and Perception: still compact, but clearly dice. */
.compact-defense-line:not(.initiative-line) .compact-d20-button {
    width: 38px;
    height: 38px;
}

.compact-save-cell .compact-d20-button {
    width: 36px !important;
    height: 36px !important;
}

.compact-save-cell .compact-d20-button .d20-number,
.compact-defense-line .compact-d20-button .d20-number {
    font-size: 15px;
}

/* Skills/Lore controls use a slightly smaller die so rows stay compact. */
.mini-d20-button {
    width: 35px !important;
    height: 35px !important;
}

.mini-d20-button .d20-number {
    font-size: 15px;
}

/* Weapon attack die can be larger and more dramatic. */
.d20-roll-button {
    width: 54px !important;
    height: 54px !important;
}

.d20-roll-button .d20-number {
    font-size: 17px;
}

/* History uses the same die artwork instead of a pentagonal text badge. */
.roll-empty-d20 {
    clip-path: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 1px;
}

.history-d20-icon .d20-shell {
    fill: rgba(38, 29, 20, .86);
}

/* Keep the initiative roll usable on narrow layouts. */
@media (max-width: 620px) {
    .initiative-line {
        grid-template-columns: 20px minmax(60px, .58fr) auto minmax(88px, 1fr) 38px 22px !important;
    }

    .initiative-d20-button {
        width: 38px !important;
        height: 38px !important;
    }

    .compact-defense-line:not(.initiative-line) .compact-d20-button,
    .compact-save-cell .compact-d20-button {
        width: 34px !important;
        height: 34px !important;
    }
}


/* Stage 9.6 — initiative select, automatic saves, strike buttons */

/* Initiative source must be as readable as the rest of the compact defense row. */
.initiative-source-select {
    min-height: 38px;
    padding-left: 11px;
    padding-right: 32px;
    font-size: .82rem !important;
    font-weight: 850;
    line-height: 1.2;
}

.initiative-source-select option {
    font-size: .84rem;
    font-weight: 700;
}

@media (max-width: 620px) {
    .initiative-source-select,
    .initiative-source-select option {
        font-size: 1rem !important;
    }
}

/* Automatic class/feat defense explanation. */
.auto-defense-notice {
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(95,186,111,.32);
    border-radius: 8px;
    background: rgba(95,186,111,.045);
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.auto-defense-notice > span {
    color: #8ed09b;
    font-size: 1rem;
}

.auto-defense-notice > div {
    display: grid;
    gap: 3px;
}

.auto-defense-notice strong {
    color: #c9ebd0;
    font-size: .78rem;
}

.auto-defense-notice small {
    color: #91a796;
    font-size: .66rem;
    line-height: 1.45;
}

.defense-form-grid select:disabled {
    opacity: .8;
    cursor: not-allowed;
    color: #aa9f94;
    background: #211d19;
}

/* Actions: one card, three explicit Strike buttons. */
.strike-card {
    grid-template-columns: 54px minmax(220px, 1fr) minmax(330px, .95fr) !important;
    min-height: 102px;
}

.strike-buttons {
    border-left: 1px solid #40352a;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.strike-button-wrap {
    min-width: 0;
    padding: 8px 5px 6px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
}

.strike-button-wrap + .strike-button-wrap {
    border-left: 1px solid #40352a;
}

.strike-roll-button {
    width: 48px;
    height: 48px;
    padding: 2px;
    border: 0;
    background: transparent;
    position: relative;
    cursor: pointer;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
}

.strike-roll-button:hover {
    filter:
        drop-shadow(0 0 5px rgba(226,160,77,.35))
        drop-shadow(0 4px 6px rgba(0,0,0,.25))
        brightness(1.12);
}

.strike-number {
    position: absolute;
    right: -2px;
    bottom: -1px;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(226,160,77,.7);
    border-radius: 50%;
    background: #17120e;
    color: #f0b660;
    display: grid;
    place-items: center;
    font-size: .58rem;
    font-weight: 950;
}

.strike-button-wrap > strong {
    color: #f0e5d8;
    font-size: 1rem;
    line-height: 1;
}

.strike-button-wrap > small {
    color: #817468;
    font-size: .54rem;
    line-height: 1.1;
}

.strike-button-wrap .inline-roll-result {
    margin-top: 1px;
}

.strike-card .action-weapon-details {
    font-size: .75rem;
}

.strike-card .action-weapon-name strong {
    font-size: 1.16rem;
}

/* Locked MAP modifier is visible but can't be accidentally switched off. */
.roll-bonus-toggle input:disabled + .roll-toggle-switch {
    opacity: .68;
    cursor: not-allowed;
}

.roll-bonus-toggle:has(input:disabled) {
    border-color: rgba(226,160,77,.25);
    background: rgba(226,160,77,.025);
}

/* Roll history is strictly chronological: oldest at top, newest at bottom. */
.roll-history-current[hidden] {
    display: none !important;
}

.roll-history-list {
    scroll-behavior: smooth;
}

@media (max-width: 900px) {
    .strike-card {
        grid-template-columns: 46px minmax(0, 1fr) !important;
    }

    .strike-buttons {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px solid #40352a;
        min-height: 92px;
    }
}

@media (max-width: 520px) {
    .strike-buttons {
        grid-template-columns: repeat(3, 1fr);
    }

    .strike-roll-button {
        width: 44px;
        height: 44px;
    }

    .strike-card .action-weapon-main {
        padding-inline: 9px;
    }
}


/* Stage 9.7 — cleaner D20, fixed initiative, readable Strike labels,
   explorer clothing and proper shield UI */

/* ---------- D20 sprite ---------- */
.d20-sprite {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.compact-d20-button,
.mini-d20-button,
.d20-roll-button,
.strike-roll-button {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    clip-path: none !important;
    overflow: visible;
}

.compact-d20-button:hover,
.mini-d20-button:hover,
.d20-roll-button:hover,
.strike-roll-button:hover {
    filter:
        drop-shadow(0 0 5px rgba(229,163,78,.34))
        drop-shadow(0 4px 6px rgba(0,0,0,.28))
        brightness(1.08);
}

/* ---------- Initiative ----------
The old row had six columns and could push the D20 outside the card.
The result lives in History, so the initiative row now has five columns.
*/
.initiative-line {
    grid-template-columns: 20px minmax(74px, .75fr) auto minmax(86px, 1fr) 36px !important;
    gap: 5px !important;
}

.initiative-source-select {
    min-width: 0 !important;
    width: 100% !important;
    height: 34px;
    padding: 0 27px 0 8px !important;
    font-size: .76rem !important;
    font-weight: 850;
}

.initiative-source-select option {
    font-size: .8rem;
}

.initiative-d20-button {
    width: 34px !important;
    height: 34px !important;
    justify-self: end;
}

@media (max-width: 620px) {
    .initiative-line {
        grid-template-columns: 19px minmax(65px, .7fr) auto minmax(78px, 1fr) 34px !important;
    }

    .initiative-source-select,
    .initiative-source-select option {
        font-size: 1rem !important;
    }

    .initiative-d20-button {
        width: 34px !important;
        height: 34px !important;
    }
}

/* ---------- Strike labels ---------- */
.strike-button-wrap > strong {
    margin-top: 2px;
    font-size: 1.13rem !important;
}

.strike-button-wrap > small {
    margin-top: 2px;
    color: #b2a395 !important;
    font-size: .72rem !important;
    font-weight: 800;
    line-height: 1.15 !important;
    text-align: center;
    white-space: nowrap;
}

.strike-button-wrap .inline-roll-result {
    min-height: 17px;
    font-size: .7rem !important;
}

.strike-number {
    width: 20px !important;
    height: 20px !important;
    font-size: .66rem !important;
}

/* ---------- Explorer's clothing ---------- */
.explorer-clothing-note,
.shield-rule-note {
    padding: 9px 11px;
    border: 1px solid rgba(226,160,77,.24);
    border-radius: 8px;
    background: rgba(226,160,77,.025);
    display: grid;
    gap: 3px;
}

.explorer-clothing-note strong,
.shield-rule-note strong {
    color: var(--gold-soft);
    font-family: Georgia, serif;
    font-size: .86rem;
}

.explorer-clothing-note span,
.shield-rule-note span {
    color: #9e9184;
    font-size: .68rem;
    line-height: 1.45;
}

/* ---------- Shield editor ---------- */
.shield-editor {
    border-color: rgba(226,160,77,.3) !important;
}

.shield-editor-head {
    margin-bottom: 10px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.shield-editor-head .eyebrow {
    margin: 0 0 1px;
}

.shield-editor-head h3 {
    margin: 0;
}

.shield-editor-head > span {
    max-width: 360px;
    color: #8d8175;
    font-size: .65rem;
    text-align: right;
}

.shield-editor-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}

.shield-editor-grid .span-2 {
    grid-column: span 2;
}

/* ---------- Shield actions ---------- */
.shield-action-card {
    grid-template-columns: minmax(260px, 1.25fr) minmax(210px, .9fr) minmax(210px, .9fr) !important;
}

.shield-action-ident small {
    margin-top: 3px;
    color: #a29588;
    font-size: .68rem;
    line-height: 1.35;
}

.shield-hp-track {
    width: min(240px, 100%);
    height: 6px;
    margin-top: 7px;
    overflow: hidden;
    border: 1px solid #4a3e34;
    border-radius: 999px;
    background: #0d0b09;
}

.shield-hp-track > span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #985144, #d29a56);
}

.shield-broken {
    border-color: rgba(220,83,73,.5) !important;
    opacity: .82;
}

.shield-broken-label {
    width: fit-content;
    margin-top: 6px;
    padding: 2px 6px;
    border: 1px solid rgba(220,83,73,.5);
    border-radius: 4px;
    background: rgba(220,83,73,.08);
    color: #ef9a91;
    font-size: .57rem;
}

.sheet-action-button:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.shield-block-summary {
    margin: 10px 0;
    display: grid;
    grid-template-columns: 1.4fr .8fr 1fr;
    border: 1px solid #40352a;
    border-radius: 8px;
    overflow: hidden;
}

.shield-block-summary > div {
    min-height: 64px;
    padding: 8px;
    display: grid;
    place-content: center;
    justify-items: center;
}

.shield-block-summary > div + div {
    border-left: 1px solid #40352a;
}

.shield-block-summary span {
    color: #81756a;
    font-size: .58rem;
    text-transform: uppercase;
}

.shield-block-summary strong {
    color: #eadfd3;
    font-size: 1rem;
}

@media (max-width: 820px) {
    .shield-editor-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .shield-action-card {
        grid-template-columns: 1fr 1fr !important;
    }

    .shield-action-ident {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .shield-editor-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .shield-editor-head > span {
        text-align: left;
    }

    .shield-editor-grid {
        grid-template-columns: 1fr !important;
    }

    .shield-editor-grid .span-2 {
        grid-column: auto;
    }

    .shield-action-card {
        grid-template-columns: 1fr !important;
    }

    .shield-action-ident {
        grid-column: auto;
    }
}

/* Final Stage 9.7 initiative fit: designed for the narrow right half beside AC. */
.initiative-line {
    grid-template-columns: 18px minmax(62px, .7fr) 38px minmax(64px, 1fr) 32px !important;
    gap: 4px !important;
}

.initiative-line .compact-stat-icon {
    width: 18px;
}

.initiative-line .compact-defense-name {
    font-size: .69rem;
}

.initiative-line .compact-defense-value {
    font-size: 1.2rem;
}

.initiative-d20-button {
    width: 32px !important;
    height: 32px !important;
}

@media (max-width: 620px) {
    .initiative-line {
        grid-template-columns: 17px minmax(58px, .65fr) 36px minmax(58px, 1fr) 31px !important;
        gap: 3px !important;
    }

    .initiative-d20-button {
        width: 31px !important;
        height: 31px !important;
    }
}


/* Stage 9.8 — AC/Shield + Initiative moved above Defense */

/* ----- AC and equipped shield ----- */
.combat-defense-summary {
    padding: 10px !important;
}

.combat-summary-grid {
    display: grid;
    grid-template-columns: minmax(108px, .82fr) minmax(0, 1.45fr);
    gap: 8px;
}

.combat-ac-card,
.combat-shield-card {
    min-width: 0;
    border: 1px solid rgba(226,160,77,.28);
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 15%, rgba(226,160,77,.055), transparent 62%),
        #15120f;
}

.combat-ac-card {
    min-height: 156px;
    padding: 12px 8px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 5px;
}

.combat-card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c9b8a8;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.combat-card-kicker svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: var(--gold-soft);
    stroke-width: 1.8;
}

.combat-ac-card > strong {
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 3.2rem;
    line-height: 1;
}

.combat-ac-card > small {
    color: #766b61;
    font-size: .56rem;
    text-align: center;
}

.combat-shield-card {
    min-height: 156px;
    padding: 10px;
    display: grid;
    align-content: center;
    gap: 7px;
}

.combat-shield-card.is-broken {
    border-color: rgba(225,82,72,.52);
    box-shadow: inset 3px 0 0 rgba(225,82,72,.45);
}

.combat-shield-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.combat-shield-status {
    padding: 3px 6px;
    border-radius: 999px;
    font-size: .5rem;
    font-weight: 950;
    text-transform: uppercase;
}

.combat-shield-status.ready {
    color: #9ddb9f;
    border: 1px solid rgba(95,186,111,.4);
    background: rgba(95,186,111,.06);
}

.combat-shield-status.broken {
    color: #f29b92;
    border: 1px solid rgba(225,82,72,.52);
    background: rgba(225,82,72,.075);
}

.combat-shield-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #eee2d5;
    font-family: Georgia, serif;
    font-size: .94rem;
}

.combat-shield-hp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.combat-shield-hp > div {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.combat-shield-hp span {
    color: #80746a;
    font-size: .52rem;
    text-transform: uppercase;
}

.combat-shield-hp strong {
    color: #eadfd3;
    font-size: 1rem;
}

.combat-shield-track {
    height: 7px;
    overflow: hidden;
    border: 1px solid #44382f;
    border-radius: 999px;
    background: #0d0b09;
}

.combat-shield-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9d4d42, #d39c58);
}

.combat-shield-card.is-broken .combat-shield-track > span {
    background: #a8453d;
}

.combat-shield-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 9px;
    color: #9a8d81;
    font-size: .58rem;
    font-weight: 750;
}

.combat-shield-empty {
    min-height: 130px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 5px;
    color: #756a60;
    text-align: center;
}

.shield-empty-icon {
    color: #a67a45;
    font-size: 1.4rem;
}

.combat-shield-empty strong {
    color: #a99c8f;
    font-size: .72rem;
}

.combat-shield-empty small {
    font-size: .56rem;
}

/* ----- Standalone Initiative ----- */
.initiative-standalone-section {
    padding: 8px 10px !important;
}

.initiative-standalone-row {
    min-height: 62px;
    display: grid;
    grid-template-columns: 34px minmax(100px, .8fr) minmax(112px, 1fr) 48px;
    align-items: center;
    gap: 8px;
}

.initiative-standalone-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--gold-soft);
}

.initiative-standalone-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linejoin: round;
}

.initiative-standalone-main {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.initiative-standalone-main > span {
    color: #d2c4b7;
    font-size: .76rem;
    font-weight: 950;
}

.initiative-standalone-main > strong {
    color: var(--cream);
    font-size: 1.65rem;
    line-height: 1;
}

.initiative-source-standalone {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 31px 0 10px !important;
    font-size: .82rem !important;
}

.standalone-d20-button {
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    justify-self: end;
}

/* ----- Defense now contains only Perception + Saves ----- */
.defense-without-ac {
    padding-top: 10px !important;
}

.defense-perception-row {
    min-height: 52px;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: 24px minmax(78px, 1fr) auto auto 38px 26px;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--panel-deep);
}

.defense-perception-row .compact-d20-button {
    width: 36px !important;
    height: 36px !important;
}

/* ----- D20 sprite: number 20 is now intentionally dominant ----- */
.d20-sprite {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ----- Armor editor: one stable grid, no "wave" ----- */
#inventory-edit-modal [data-edit-item-fields="armor"] {
    padding: 13px !important;
}

#inventory-edit-modal .armor-editor-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 11px !important;
    align-items: end !important;
}

#inventory-edit-modal .armor-editor-grid .armor-field {
    min-width: 0;
    height: 74px;
    display: grid !important;
    grid-template-rows: 25px 46px;
    align-content: end;
    gap: 3px !important;
    color: #d6cabd;
    font-size: .72rem;
    font-weight: 800;
}

#inventory-edit-modal .armor-editor-grid .armor-field-category {
    grid-column: span 2;
}

#inventory-edit-modal .armor-editor-grid .armor-field input,
#inventory-edit-modal .armor-editor-grid .armor-field select {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-self: end;
    box-sizing: border-box;
}

#inventory-edit-modal .armor-editor-grid .armor-field select {
    padding-right: 34px !important;
}

#inventory-edit-modal .armor-editor-grid .explorer-clothing-note {
    grid-column: span 2;
    min-height: 74px;
    box-sizing: border-box;
    align-self: stretch;
}

#inventory-edit-modal .armor-editor-grid .armor-field-traits {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .combat-summary-grid {
        grid-template-columns: 112px minmax(0,1fr);
    }

    .initiative-standalone-row {
        grid-template-columns: 32px minmax(88px,.75fr) minmax(102px,1fr) 44px;
        gap: 6px;
    }

    #inventory-edit-modal .armor-editor-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    #inventory-edit-modal .armor-editor-grid .armor-field-category,
    #inventory-edit-modal .armor-editor-grid .explorer-clothing-note {
        grid-column: span 2;
    }
}

@media (max-width: 620px) {
    .combat-summary-grid {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .combat-ac-card > strong {
        font-size: 2.65rem;
    }

    .initiative-standalone-row {
        grid-template-columns: 30px minmax(82px, .75fr) minmax(88px, 1fr) 42px;
        gap: 5px;
    }

    .initiative-standalone-main {
        gap: 5px;
    }

    .initiative-standalone-main > span {
        font-size: .69rem;
    }

    .initiative-standalone-main > strong {
        font-size: 1.45rem;
    }

    .initiative-source-standalone,
    .initiative-source-standalone option {
        font-size: 1rem !important;
    }

    .standalone-d20-button {
        width: 41px !important;
        height: 41px !important;
    }

    .defense-perception-row {
        grid-template-columns: 22px minmax(65px,1fr) auto 36px 24px;
    }

    .defense-perception-row .compact-rank-pill {
        display: none;
    }

    #inventory-edit-modal .armor-editor-grid {
        grid-template-columns: 1fr !important;
    }

    #inventory-edit-modal .armor-editor-grid .armor-field-category,
    #inventory-edit-modal .armor-editor-grid .explorer-clothing-note,
    #inventory-edit-modal .armor-editor-grid .armor-field-traits {
        grid-column: auto;
    }

    #inventory-edit-modal .armor-editor-grid .armor-field {
        height: auto;
        min-height: 70px;
    }
}


/* Stage 9.8.1 — standalone initiative D20 button reset
   The initiative button no longer inherits the browser's native white button background. */
.standalone-d20-button,
button.standalone-d20-button,
button.initiative-d20-button {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    outline: 0;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    line-height: 0;
    cursor: pointer;
}

.standalone-d20-button .d20-sprite,
.initiative-d20-button .d20-sprite {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: 0;
}

.standalone-d20-button:hover,
.initiative-d20-button:hover {
    background: transparent !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 0 5px rgba(229,163,78,.38))
        drop-shadow(0 4px 6px rgba(0,0,0,.28))
        brightness(1.08);
}

.standalone-d20-button:focus-visible,
.initiative-d20-button:focus-visible {
    outline: 2px solid rgba(229,163,78,.72);
    outline-offset: 3px;
    border-radius: 50% !important;
}


/* Stage 9.8.2 — initiative row spacing
   Keep the modifier in its own fixed column so it cannot overlap the source select. */
.standalone-initiative .initiative-line {
    display: grid !important;
    grid-template-columns: 24px minmax(78px, auto) minmax(0, 1fr) 48px !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: 100%;
}

.standalone-initiative .initiative-line > .defense-line-icon {
    grid-column: 1;
}

.standalone-initiative .initiative-line > .defense-line-main {
    grid-column: 2;
    min-width: 0;
}

.standalone-initiative .initiative-line .initiative-source-select {
    grid-column: 3;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.standalone-initiative .initiative-line .initiative-d20-button {
    grid-column: 4;
    justify-self: end;
    flex: none;
}

/* If the initiative modifier is a separate element in this layout,
   reserve a dedicated column for it instead of letting it float over the select. */
.standalone-initiative .initiative-line:has(> .initiative-modifier) {
    grid-template-columns: 24px minmax(86px, auto) auto minmax(112px, 1fr) 48px !important;
}

.standalone-initiative .initiative-line > .initiative-modifier {
    grid-column: 3;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    white-space: nowrap;
}

.standalone-initiative .initiative-line:has(> .initiative-modifier) .initiative-source-select {
    grid-column: 4;
}

.standalone-initiative .initiative-line:has(> .initiative-modifier) .initiative-d20-button {
    grid-column: 5;
}

@media (max-width: 620px) {
    .standalone-initiative .initiative-line {
        grid-template-columns: 20px minmax(70px, auto) minmax(92px, 1fr) 42px !important;
        column-gap: 6px !important;
    }

    .standalone-initiative .initiative-line:has(> .initiative-modifier) {
        grid-template-columns: 20px minmax(70px, auto) auto minmax(86px, 1fr) 42px !important;
    }
}


/* Stage 9.8.3 — actual initiative markup fix.
   Previous 9.8.2 targeted old class names and therefore could not affect
   the current Stage 9.8 standalone initiative markup. */

.initiative-standalone-row {
    display: grid !important;
    grid-template-columns:
        32px
        minmax(76px, auto)
        48px
        minmax(118px, 1fr)
        46px !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100%;
    min-width: 0;
}

.initiative-standalone-icon {
    grid-column: 1;
}

.initiative-standalone-label {
    grid-column: 2;
    min-width: 0;
    color: #d2c4b7;
    font-size: .76rem;
    font-weight: 950;
    white-space: nowrap;
}

.initiative-standalone-value {
    grid-column: 3;
    min-width: 0;
    color: var(--cream);
    font-size: 1.58rem;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
}

.initiative-source-standalone {
    grid-column: 4;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.standalone-d20-button {
    grid-column: 5;
    justify-self: end !important;
}

/* Disable old wrapper layout if cached markup ever survives temporarily. */
.initiative-standalone-main {
    display: contents !important;
}

.initiative-standalone-main > span {
    grid-column: 2;
}

.initiative-standalone-main > strong {
    grid-column: 3;
}

@media (max-width: 620px) {
    .initiative-standalone-row {
        grid-template-columns:
            28px
            minmax(67px, auto)
            43px
            minmax(96px, 1fr)
            41px !important;
        gap: 5px !important;
    }

    .initiative-standalone-label {
        font-size: .69rem;
    }

    .initiative-standalone-value {
        font-size: 1.38rem;
    }
}


/* Stage 9.8.4 — hard fix for initiative spacing.
   Use flex with fixed zones instead of grid so the modifier can never touch the select. */
.initiative-standalone-row {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    min-width: 0;
    gap: 0 !important;
}

.initiative-standalone-icon {
    flex: 0 0 30px;
    margin-right: 8px;
}

.initiative-standalone-label {
    flex: 0 0 82px;
    min-width: 82px;
    white-space: nowrap;
}

.initiative-standalone-value {
    flex: 0 0 54px;
    min-width: 54px;
    margin-right: 14px !important;
    text-align: right;
    white-space: nowrap;
}

.initiative-source-standalone {
    flex: 1 1 auto;
    min-width: 0 !important;
    width: auto !important;
    max-width: 150px;
    margin: 0 12px 0 0 !important;
}

.standalone-d20-button {
    flex: 0 0 44px;
    width: 44px !important;
    height: 44px !important;
    margin-left: auto !important;
}

/* In case old wrapper survives browser cache, don't let it interfere. */
.initiative-standalone-main {
    display: contents !important;
}

@media (max-width: 620px) {
    .initiative-standalone-icon {
        flex-basis: 26px;
        margin-right: 6px;
    }

    .initiative-standalone-label {
        flex-basis: 72px;
        min-width: 72px;
    }

    .initiative-standalone-value {
        flex-basis: 48px;
        min-width: 48px;
        margin-right: 10px !important;
    }

    .initiative-source-standalone {
        max-width: 132px;
        margin-right: 8px !important;
    }

    .standalone-d20-button {
        flex-basis: 40px;
        width: 40px !important;
        height: 40px !important;
    }
}


/* Stage 9.8.5 — give the long "Характеристики" tab enough room. */
@media (min-width: 901px) {
    .foundry-top-tabs {
        display: grid !important;
        grid-template-columns:
            minmax(170px, 1.28fr)
            repeat(5, minmax(125px, 1fr)) !important;
    }

    .foundry-top-tab {
        min-width: 0 !important;
        padding-inline: 12px !important;
        gap: 8px !important;
        white-space: nowrap;
        overflow: hidden;
    }

    .foundry-top-tab > span:not(.tab-icon) {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
    }

    .foundry-top-tab .tab-icon {
        flex: 0 0 auto;
    }
}

/* A little more breathing room on medium desktop widths without
   forcing the whole tab bar to overflow. */
@media (min-width: 901px) and (max-width: 1180px) {
    .foundry-top-tabs {
        grid-template-columns:
            minmax(160px, 1.3fr)
            repeat(5, minmax(112px, 1fr)) !important;
    }

    .foundry-top-tab {
        font-size: .9rem !important;
        padding-inline: 9px !important;
        gap: 7px !important;
    }

    .foundry-top-tab .tab-icon {
        font-size: 1.05rem !important;
    }
}


/* Stage 9.8.6 — improve readability of the permanent combat sidebar. */

/* Initiative */
.initiative-standalone-label {
    font-size: .92rem !important;
    font-weight: 950 !important;
    letter-spacing: .01em;
}

/* Perception label in the defense block */
.defense-perception-row .defense-label,
.perception-line .defense-label,
.perception-line .stat-label,
.perception-line .label,
.perception-label {
    font-size: .9rem !important;
    font-weight: 900 !important;
}

/* AC label */
.ac-box .stat-label,
.ac-box .defense-label,
.ac-box .label,
.armor-class-box .stat-label,
.armor-class-box .label,
.ac-label {
    font-size: .9rem !important;
    font-weight: 900 !important;
    letter-spacing: .025em;
}

/* Fortitude / Reflex / Will */
.save-name,
.save-label,
.saving-throw-name,
.saving-throw-label,
.defense-save-name,
.defense-save-label {
    font-size: .84rem !important;
    font-weight: 900 !important;
    line-height: 1.15;
}

/* Current markup fallback: enlarge the first textual label in save cards
   without touching proficiency badges or numeric values. */
.defense-saves-grid > *,
.saves-grid > * {
    --sidebar-small-label-size: .84rem;
}

.defense-saves-grid .stat-label,
.saves-grid .stat-label {
    font-size: var(--sidebar-small-label-size) !important;
    font-weight: 900 !important;
}

/* Make the icons beside those labels scale with the new typography. */
.defense-perception-row .defense-icon,
.perception-line .defense-icon,
.save-name svg,
.save-label svg,
.saving-throw-name svg,
.saving-throw-label svg {
    font-size: 1rem !important;
}

/* Compact desktop sidebar still needs the labels to remain readable. */
@media (max-width: 1180px) and (min-width: 651px) {
    .initiative-standalone-label {
        font-size: .86rem !important;
    }

    .defense-perception-row .defense-label,
    .perception-line .defense-label,
    .perception-label,
    .ac-label {
        font-size: .84rem !important;
    }

    .save-name,
    .save-label,
    .saving-throw-name,
    .saving-throw-label,
    .defense-save-name,
    .defense-save-label,
    .defense-saves-grid .stat-label,
    .saves-grid .stat-label {
        font-size: .78rem !important;
    }
}


/* Stage 9.8.7 — exact selectors for current sidebar markup.
   Previous patch targeted legacy class names, so it did not affect the live UI. */

/* Initiative */
.initiative-standalone-section .initiative-standalone-label {
    font-size: 1rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    color: #e2d6ca !important;
}

/* Armor Class */
.combat-defense-summary .combat-ac-card .combat-card-kicker {
    font-size: .92rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    letter-spacing: .025em !important;
    color: #e1d4c8 !important;
}

.combat-defense-summary .combat-ac-card .combat-card-kicker svg {
    width: 22px !important;
    height: 22px !important;
}

/* Perception */
.defense-without-ac .defense-perception-row .compact-defense-name {
    font-size: .94rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    color: #e2d6ca !important;
}

.defense-without-ac .defense-perception-row .compact-stat-icon {
    width: 24px !important;
    height: 24px !important;
}

.defense-without-ac .defense-perception-row .compact-stat-icon svg {
    width: 19px !important;
    height: 19px !important;
}

/* Fortitude / Reflex / Will */
.defense-without-ac .compact-save-grid .compact-save-head {
    gap: 6px !important;
}

.defense-without-ac .compact-save-grid .compact-save-head > span:last-child {
    font-size: .84rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    color: #e0d4c8 !important;
}

.defense-without-ac .compact-save-grid .compact-save-head .compact-stat-icon {
    width: 19px !important;
    height: 19px !important;
}

.defense-without-ac .compact-save-grid .compact-save-head .compact-stat-icon svg {
    width: 17px !important;
    height: 17px !important;
}

/* Give the save names enough room so the larger font does not wrap awkwardly. */
.defense-without-ac .compact-save-cell {
    padding-inline: 7px !important;
}

/* Keep the sidebar compact on phones but still readable. */
@media (max-width: 620px) {
    .initiative-standalone-section .initiative-standalone-label {
        font-size: .9rem !important;
    }

    .combat-defense-summary .combat-ac-card .combat-card-kicker {
        font-size: .82rem !important;
    }

    .defense-without-ac .defense-perception-row .compact-defense-name {
        font-size: .86rem !important;
    }

    .defense-without-ac .compact-save-grid .compact-save-head > span:last-child {
        font-size: .74rem !important;
    }
}


/* Stage 9.9.0 — combat actions: explicit damage roll + cleaner action economy */
.action-weapon-main {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
}

.action-weapon-name,
.action-weapon-details {
    grid-column: 1;
}

.damage-roll-button {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    min-width: 142px;
    min-height: 54px;
    padding: 7px 10px;
    border: 1px solid rgba(226,160,77,.34);
    border-radius: 9px;
    background: rgba(226,160,77,.045);
    color: #e7d9cb;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.damage-roll-button:hover {
    border-color: rgba(226,160,77,.72);
    background: rgba(226,160,77,.09);
}

.damage-roll-icon {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    border: 1px solid rgba(226,160,77,.55);
    transform: rotate(45deg);
    display: grid;
    place-items: center;
    color: var(--gold-soft);
    font-size: .55rem;
}

.damage-roll-button > span:nth-child(2) {
    display: grid;
    gap: 2px;
}

.damage-roll-button b {
    font-size: .76rem;
    white-space: nowrap;
}

.damage-roll-button small {
    color: #9e9184;
    font-size: .64rem;
    white-space: nowrap;
}

.damage-roll-feedback {
    position: absolute;
    right: -8px;
    top: -12px;
    min-width: 34px;
    height: 34px;
    padding: 0 7px;
    border: 1px solid rgba(226,160,77,.7);
    border-radius: 17px;
    background: #17120e;
    color: var(--gold-soft);
    display: grid;
    place-items: center;
    font-style: normal;
    font-weight: 950;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    animation: damagePop 1.6s ease both;
}

@keyframes damagePop {
    0% { opacity: 0; transform: translateY(6px) scale(.85); }
    15%, 72% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-7px) scale(.94); }
}

.action-count.action-one {
    border-radius: 7px;
    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: 950;
}

.action-count.action-reaction {
    font-size: 1.2rem;
    font-weight: 900;
}

@media (max-width: 1180px) {
    .action-weapon-main {
        grid-template-columns: 1fr;
    }
    .action-weapon-name,
    .action-weapon-details,
    .damage-roll-button {
        grid-column: 1;
    }
    .damage-roll-button {
        grid-row: auto;
        min-width: 0;
        width: max-content;
        max-width: 100%;
        min-height: 42px;
    }
}

@media (max-width: 620px) {
    .damage-roll-button {
        width: 100%;
    }
    .shield-action-card {
        grid-template-columns: 1fr !important;
    }
}


/* Stage 9.9.1 — fast shield HP editing */
.shield-hp-value-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.shield-hp-edit-button {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    padding: 0;
    border: 1px solid rgba(226,160,77,.32);
    border-radius: 7px;
    background: rgba(226,160,77,.035);
    color: #d9a75f;
    display: grid;
    place-items: center;
    font-size: .72rem;
    cursor: pointer;
}

.shield-hp-edit-button:hover {
    border-color: rgba(226,160,77,.7);
    background: rgba(226,160,77,.09);
    color: #f2bb6d;
}

.shield-action-hp-tools {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aa9c8f;
    font-size: .66rem;
}

.shield-action-hp-tools b {
    color: #eadfd3;
    font-size: .75rem;
}

.action-shield-hp-edit {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
}

.shield-hp-modal-card {
    width: min(94vw, 480px);
}

.shield-hp-modal-stats {
    margin: 12px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #40352a;
    border-radius: 9px;
    overflow: hidden;
    background: #15120f;
}

.shield-hp-modal-stats > div {
    min-height: 66px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 3px;
}

.shield-hp-modal-stats > div + div {
    border-left: 1px solid #40352a;
}

.shield-hp-modal-stats span,
.shield-hp-live-state span {
    color: #81756a;
    font-size: .61rem;
    text-transform: uppercase;
}

.shield-hp-modal-stats strong {
    color: #eadfd3;
    font-size: 1.25rem;
}

.shield-hp-quick-actions {
    margin-top: 9px;
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 8px;
}

.shield-hp-quick-button {
    min-height: 40px;
    border: 1px solid #4c4035;
    border-radius: 8px;
    background: #17130f;
    color: #bbae9f;
    cursor: pointer;
    font-size: .7rem;
    font-weight: 800;
}

.shield-hp-quick-button:hover {
    border-color: rgba(226,160,77,.5);
    color: #eadfd3;
}

.shield-hp-quick-button.restore {
    border-color: rgba(95,186,111,.34);
    color: #a8d9b0;
    background: rgba(95,186,111,.045);
}

.shield-hp-quick-button.restore:hover {
    border-color: rgba(95,186,111,.68);
    background: rgba(95,186,111,.09);
}

.shield-hp-live-state {
    margin-top: 9px;
    min-height: 44px;
    padding: 7px 10px;
    border: 1px solid #40352a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shield-hp-live-state strong {
    font-size: .75rem;
    letter-spacing: .04em;
}

.shield-hp-live-state.ready {
    border-color: rgba(95,186,111,.35);
    background: rgba(95,186,111,.04);
}

.shield-hp-live-state.ready strong {
    color: #a8d9b0;
}

.shield-hp-live-state.broken {
    border-color: rgba(225,82,72,.45);
    background: rgba(225,82,72,.055);
}

.shield-hp-live-state.broken strong {
    color: #ef9a91;
}

.shield-save-notice {
    margin-bottom: 12px;
}


/* Stage 9.9.3 — attack row layout based on the approved mockup */

.strike-card {
    display: grid !important;
    grid-template-columns:
        54px
        minmax(0, 1.65fr)
        minmax(170px, .62fr)
        repeat(3, minmax(126px, .52fr)) !important;
    min-height: 122px;
    overflow: hidden;
}

.strike-card > .action-weapon-icon {
    grid-column: 1;
    grid-row: 1;
    min-height: 122px;
}

.strike-card > .action-weapon-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.strike-card > .action-weapon-main .action-weapon-name,
.strike-card > .action-weapon-main .action-weapon-details {
    width: 100%;
    min-width: 0;
}

.strike-card > .action-weapon-main .action-weapon-name {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.strike-card > .action-weapon-main .action-weapon-name strong {
    margin-right: 3px;
}

.strike-card > .action-weapon-main .action-weapon-details {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
}

/* Put the damage button in its own stable column */
.strike-card > .action-weapon-main .damage-roll-button {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
}

.strike-card > .damage-roll-button {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: center;
}

.strike-card > .strike-buttons {
    grid-column: 4 / 7;
    grid-row: 1;
}

/* If button is still inside action-weapon-main from previous markup,
   visually move it to the dedicated third column via display:contents. */
.strike-card > .action-weapon-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

.strike-card > .action-weapon-main .damage-roll-button {
    width: 100%;
    max-width: 175px;
    min-width: 0;
    min-height: 64px;
    padding: 10px 12px !important;
    border-radius: 10px;
    border: 1px solid rgba(226,160,77,.42);
    background: rgba(226,160,77,.045);
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    text-align: left;
    justify-self: end;
}

.strike-card > .action-weapon-main .damage-roll-button .damage-roll-icon {
    width: 40px;
    height: 40px;
    flex: none;
    margin: 0;
}

.strike-card > .action-weapon-main .damage-roll-button > span:nth-child(2) {
    min-width: 0;
}

.strike-card > .action-weapon-main .damage-roll-button b {
    font-size: .76rem;
    line-height: 1.15;
}

.strike-card > .action-weapon-main .damage-roll-button small {
    margin-top: 3px;
    font-size: .61rem;
    line-height: 1.2;
    white-space: normal;
    color: #a9998a;
}

/* Keep the weapon text and damage control separated cleanly.
   Main card becomes a two-part internal grid. */
.strike-card > .action-weapon-main {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 175px) !important;
    column-gap: 18px !important;
    align-items: center;
}

.strike-card > .action-weapon-main .action-weapon-name,
.strike-card > .action-weapon-main .action-weapon-details {
    grid-column: 1;
}

.strike-card > .action-weapon-main .damage-roll-button {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

/* Strike columns */
.strike-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 1px solid #40352a;
    height: 100%;
}

.strike-button-wrap {
    min-height: 122px;
    padding: 11px 6px 8px !important;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 3px;
}

.strike-button-wrap > strong {
    font-size: 1.25rem !important;
}

.strike-button-wrap > small {
    font-size: .78rem !important;
    font-weight: 900 !important;
    color: #c0b0a0 !important;
}

.strike-roll-button {
    width: 50px !important;
    height: 50px !important;
}

/* Preserve a comfortable desktop composition */
@media (min-width: 1181px) {
    .strike-card {
        grid-template-columns:
            54px
            minmax(0, 1.8fr)
            repeat(3, minmax(132px, .52fr)) !important;
    }

    .strike-card > .action-weapon-main {
        grid-column: 2;
    }

    .strike-card > .strike-buttons {
        grid-column: 3 / 6;
    }
}

/* Medium screens: keep button beside text, strikes stay on the right */
@media (max-width: 1180px) and (min-width: 821px) {
    .strike-card {
        grid-template-columns:
            48px
            minmax(0, 1.4fr)
            repeat(3, minmax(110px, .55fr)) !important;
    }

    .strike-card > .action-weapon-main {
        grid-template-columns: minmax(0, 1fr) minmax(140px, 155px) !important;
        column-gap: 12px !important;
        padding-inline: 14px !important;
    }

    .strike-card > .strike-buttons {
        grid-column: 3 / 6;
    }

    .strike-card > .action-weapon-main .damage-roll-button {
        max-width: 155px;
        grid-template-columns: 36px minmax(0,1fr);
        padding: 8px 9px !important;
    }

    .strike-card > .action-weapon-main .damage-roll-button .damage-roll-icon {
        width: 34px;
        height: 34px;
    }
}

/* Tablet/phone: stack weapon block, then damage control, then three strikes */
@media (max-width: 820px) {
    .strike-card {
        grid-template-columns: 44px minmax(0,1fr) !important;
        min-height: 0;
    }

    .strike-card > .action-weapon-icon {
        min-height: 0;
    }

    .strike-card > .action-weapon-main {
        grid-column: 2;
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }

    .strike-card > .action-weapon-main .action-weapon-name,
    .strike-card > .action-weapon-main .action-weapon-details,
    .strike-card > .action-weapon-main .damage-roll-button {
        grid-column: 1;
    }

    .strike-card > .action-weapon-main .damage-roll-button {
        grid-row: auto;
        justify-self: stretch;
        width: 100%;
        max-width: none;
        margin-top: 6px !important;
    }

    .strike-card > .strike-buttons {
        grid-column: 1 / -1;
        grid-row: 2;
        min-height: 98px;
        border-left: 0;
        border-top: 1px solid #40352a;
    }

    .strike-button-wrap {
        min-height: 98px;
    }
}


/* Stage 9.11.0 — local combat turn economy */
.actions-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.turn-economy{flex:0 0 auto;display:flex;align-items:end;gap:12px;padding:8px 9px;border:1px solid #43372c;border-radius:10px;background:#12100e}
.turn-economy-group{display:grid;gap:5px}
.turn-economy-group>span{color:#81756a;font-size:.54rem;font-weight:900;text-transform:uppercase;letter-spacing:.045em}
.turn-action-pips{display:flex;gap:5px}
.turn-action-pip,.turn-reaction-pip{width:31px;height:31px;padding:0;border:1px solid rgba(226,160,77,.52);background:rgba(226,160,77,.07);color:#e6aa54;cursor:pointer;display:grid;place-items:center}
.turn-action-pip{border-radius:5px;font-size:.75rem}
.turn-reaction-pip{border-radius:50%;font-size:1.03rem}
.turn-action-pip.spent,.turn-reaction-pip.spent{border-color:#3c342d;background:#171411;color:#554b42}
.new-turn-button{min-height:36px;padding:0 11px;border:1px solid rgba(95,186,111,.32);border-radius:8px;background:rgba(95,186,111,.045);color:#a6d8ae;font-size:.67rem;font-weight:850;cursor:pointer;white-space:nowrap}
.new-turn-button:hover{border-color:rgba(95,186,111,.62);background:rgba(95,186,111,.085)}
.turn-reset-flash{animation:turnResetFlash .55s ease}
@keyframes turnResetFlash{0%{box-shadow:0 0 0 0 rgba(95,186,111,.4)}100%{box-shadow:0 0 0 10px rgba(95,186,111,0)}}
.economy-warning{animation:economyWarning .55s ease}
@keyframes economyWarning{0%,100%{border-color:#43372c}35%{border-color:rgba(221,75,65,.85);box-shadow:0 0 0 3px rgba(221,75,65,.08)}}
#combat-ac-value.shield-ac-active{color:#9bddaa;text-shadow:0 0 12px rgba(95,186,111,.16)}
#combat-ac-note{max-width:100px;line-height:1.25}
.shield-raised{border-color:rgba(95,186,111,.48)!important;box-shadow:inset 3px 0 0 rgba(95,186,111,.42)}
.shield-raised .raise-shield-button{border-color:rgba(95,186,111,.55);background:rgba(95,186,111,.08)}
@media(max-width:1050px){.actions-panel-head{align-items:stretch;flex-direction:column}.turn-economy{width:fit-content;max-width:100%}}
@media(max-width:620px){.turn-economy{width:100%;justify-content:space-between;gap:6px}.turn-action-pip,.turn-reaction-pip{width:29px;height:29px}.new-turn-button{padding-inline:8px}}


/* Stage 9.11.1 — Finesse: explicit STR/DEX attack choice */
.finesse-ability-switch {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    padding: 2px 3px 2px 6px;
    border: 1px solid #443629;
    border-radius: 7px;
    background: rgba(10, 9, 8, .7);
    vertical-align: middle;
}

.finesse-switch-caption {
    margin-right: 2px;
    color: #85786c;
    font-size: .55rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.finesse-ability-switch button {
    min-width: 34px;
    height: 22px;
    padding: 0 5px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #a89b8d;
    font-size: .61rem;
    font-weight: 950;
    line-height: 1;
    cursor: pointer;
}

.finesse-ability-switch button:hover {
    color: #efb45b;
    border-color: #6b4b25;
}

.finesse-ability-switch button.active {
    color: #17110b;
    border-color: #efb45b;
    background: #dda04f;
}

@media (max-width: 760px) {
    .finesse-ability-switch {
        margin-left: 0;
        margin-top: 3px;
    }
}


/* Stage 9.12.0 — basic PF2e action cards */
.auto-rule-badge.neutral {
    color: #c0b2a4;
    border-color: #4d4136;
    background: #171411;
}

.basic-action-group {
    margin-top: 18px;
}

.basic-action-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.basic-action-card {
    position: relative;
    min-width: 0;
    min-height: 86px;
    padding: 10px 9px;
    border: 1px solid #40352a;
    border-radius: 9px;
    background: #15120f;
    color: #ded2c6;
    display: grid;
    grid-template-columns: 28px 30px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    text-align: left;
    cursor: pointer;
}

.basic-action-card:hover {
    border-color: rgba(226,160,77,.58);
    background: rgba(226,160,77,.045);
}

.basic-action-cost {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(226,160,77,.55);
    border-radius: 7px;
    color: var(--gold-soft);
    display: grid;
    place-items: center;
    font-family: Georgia, serif;
    font-size: .88rem;
    font-weight: 950;
}

.basic-action-icon {
    color: #dea04e;
    font-size: 1.15rem;
    text-align: center;
}

.basic-action-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.basic-action-copy b {
    color: #e8ddd1;
    font-size: .75rem;
    line-height: 1.12;
}

.basic-action-copy small {
    color: #8f8276;
    font-size: .57rem;
    line-height: 1.25;
}

.roll-basic-action {
    grid-template-columns: 28px 28px minmax(0,1fr) 34px;
}

.basic-action-d20 {
    width: 33px;
    height: 33px;
    display: block;
}

.basic-action-used {
    animation: basicActionUsed .58s ease;
}

.basic-action-denied {
    animation: basicActionDenied .58s ease;
}

@keyframes basicActionUsed {
    0%,100% { box-shadow: none; }
    40% { border-color: rgba(95,186,111,.72); box-shadow: 0 0 0 4px rgba(95,186,111,.07); }
}

@keyframes basicActionDenied {
    0%,100% { box-shadow: none; }
    40% { border-color: rgba(221,75,65,.82); box-shadow: 0 0 0 4px rgba(221,75,65,.07); }
}

@media (max-width: 1180px) {
    .basic-action-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .basic-action-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 500px) {
    .basic-action-grid {
        grid-template-columns: 1fr;
    }
}


/* Stage 9.12.1 — redesigned Quick Actions to match the approved concept */
.redesigned-basic-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #3e342b;
}

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

.basic-actions-heading-main {
    display: flex;
    align-items: center;
    gap: 13px;
}

.basic-actions-heading-main .eyebrow {
    margin: 0 0 2px;
    font-size: .72rem;
    letter-spacing: .095em;
}

.basic-actions-heading-main h3 {
    margin: 0;
    color: #f1e7dc;
    font-family: Georgia, serif;
    font-size: 2rem;
    line-height: 1;
}

.basic-actions-star {
    color: #efad50;
    font-size: 1.8rem;
    filter: drop-shadow(0 0 7px rgba(239,173,80,.15));
}

.basic-actions-for-all {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #715233;
    border-radius: 999px;
    color: #e4c7a2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.basic-actions-for-all > span {
    color: #eaa64c;
    font-size: 1.05rem;
}

.redesigned-basic-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.redesigned-action-card {
    min-width: 0;
    min-height: 248px !important;
    padding: 14px 14px 13px !important;
    border: 1px solid #5a432b !important;
    border-radius: 13px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(226,160,77,.035), transparent 42%),
        linear-gradient(180deg, #171411 0%, #13110f 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 11px !important;
    text-align: left !important;
    overflow: hidden;
}

.redesigned-action-card:hover {
    border-color: #a56d32 !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(226,160,77,.08), transparent 44%),
        linear-gradient(180deg, #1a1612 0%, #15120f 100%) !important;
    transform: translateY(-1px);
}

.basic-action-card-top {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.basic-action-main-icon {
    width: 48px;
    height: 48px;
    color: #efad50;
    display: grid;
    place-items: center;
    flex: 0 0 48px;
}

.basic-action-main-icon svg {
    width: 44px;
    height: 44px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.basic-action-main-icon svg circle,
.basic-action-main-icon svg path {
    vector-effect: non-scaling-stroke;
}

.basic-action-main-icon svg path {
    fill: none;
}

.step-icon svg path {
    fill: currentColor;
    stroke: none;
}

.redesigned-cost {
    width: auto !important;
    min-width: 48px;
    height: 48px !important;
    padding: 4px 7px !important;
    border: 1px solid #9b692e !important;
    border-radius: 9px !important;
    background: #15110d;
    display: grid !important;
    place-items: center !important;
    align-content: center;
    gap: 0;
    transform: none !important;
}

.redesigned-cost b {
    color: #f0b25e;
    font-family: Georgia, serif;
    font-size: 1.28rem;
    line-height: 1;
}

.redesigned-cost small {
    margin-top: 2px;
    color: #9b8978;
    font-size: .48rem;
    font-family: inherit;
    font-weight: 800;
    white-space: nowrap;
}

.redesigned-copy {
    display: grid !important;
    gap: 7px !important;
    align-content: start;
    flex: 1 1 auto;
}

.redesigned-copy > b {
    color: #f2e8dd !important;
    font-family: Georgia, serif;
    font-size: 1.13rem !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
}

.redesigned-copy > strong {
    color: #c5b6a8;
    font-size: .78rem;
    line-height: 1.28;
    font-weight: 900;
}

.redesigned-copy > small {
    color: #93867a !important;
    font-size: .69rem !important;
    line-height: 1.5 !important;
    font-weight: 500;
}

.basic-action-footer {
    min-height: 34px;
    padding-top: 9px;
    border-top: 1px solid #46392d;
    color: #dca14d;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .65rem;
    font-weight: 850;
}

.roll-footer {
    margin-top: auto;
}

.roll-footer .basic-action-d20 {
    width: 31px !important;
    height: 31px !important;
    flex: 0 0 31px;
}

.basic-actions-info {
    margin-top: 12px;
    min-height: 48px;
    padding: 9px 13px;
    border: 1px solid #4b3b2c;
    border-radius: 10px;
    background: #14110e;
    color: #9e9185;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .7rem;
    line-height: 1.35;
}

.basic-actions-info b {
    color: #d9ccbf;
}

.basic-actions-info-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border: 1px solid #c98736;
    border-radius: 50%;
    color: #e6a54d;
    display: grid;
    place-items: center;
    font-family: Georgia, serif;
    font-size: .8rem;
    font-weight: 900;
}

@media (max-width: 1280px) {
    .redesigned-basic-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .redesigned-action-card {
        min-height: 225px !important;
    }
}

@media (max-width: 850px) {
    .redesigned-basic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .basic-actions-heading-main h3 {
        font-size: 1.7rem;
    }
}

@media (max-width: 560px) {
    .basic-actions-heading {
        align-items: flex-start;
    }

    .basic-actions-for-all {
        min-height: 34px;
        padding-inline: 10px;
        font-size: .66rem;
    }

    .redesigned-basic-grid {
        grid-template-columns: 1fr !important;
    }

    .redesigned-action-card {
        min-height: 205px !important;
    }

    .redesigned-copy > b {
        font-size: 1.2rem !important;
    }

    .redesigned-copy > strong {
        font-size: .84rem;
    }

    .redesigned-copy > small {
        font-size: .75rem !important;
    }
}


/* Stage 9.12.2 — dedicated Quick Action SVG sprites */
.basic-action-main-icon {
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    display: grid !important;
    place-items: center !important;
    color: transparent !important;
}

.basic-action-main-icon img {
    width: 52px !important;
    height: 52px !important;
    display: block;
    object-fit: contain;
    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.25))
        drop-shadow(0 0 4px rgba(233,169,78,.10));
    pointer-events: none;
    user-select: none;
}

/* Neutralize the old inline-SVG rules from 9.12.1. */
.basic-action-main-icon svg,
.step-icon svg,
.step-icon svg path {
    display: none !important;
}

.redesigned-action-card:hover .basic-action-main-icon img {
    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.25))
        drop-shadow(0 0 7px rgba(233,169,78,.18))
        brightness(1.08);
}

@media (max-width: 560px) {
    .basic-action-main-icon {
        width: 52px !important;
        height: 52px !important;
        flex-basis: 52px !important;
    }

    .basic-action-main-icon img {
        width: 48px !important;
        height: 48px !important;
    }
}


/* Stage 9.12.3 — user-supplied Quick Action sprites */
.basic-action-main-icon {
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
}

.basic-action-main-icon img {
    width: 58px !important;
    height: 58px !important;
    object-fit: contain !important;
    display: block !important;
    filter: none !important;
    pointer-events: none;
    user-select: none;
}

.redesigned-action-card:hover .basic-action-main-icon img {
    filter: brightness(1.08) drop-shadow(0 0 6px rgba(233,169,78,.18)) !important;
}

@media (max-width: 560px) {
    .basic-action-main-icon {
        width: 56px !important;
        height: 56px !important;
        flex-basis: 56px !important;
    }
    .basic-action-main-icon img {
        width: 52px !important;
        height: 52px !important;
    }
}


/* =========================================================
   Stage 10.0.0 — Mobile UI foundation
   ========================================================= */

.mobile-character-hud,
.mobile-bottom-nav,
.mobile-sheet-backdrop,
.mobile-roll-fab {
    display: none;
}

@media (max-width: 760px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }

    .topbar {
        min-height: 58px;
        padding:
            max(8px, env(safe-area-inset-top))
            10px
            8px;
        position: sticky;
        top: 0;
        z-index: 900;
        background: rgba(14,13,12,.96);
        backdrop-filter: blur(14px);
    }

    .topbar .mini-brand {
        font-size: .78rem;
    }

    .topbar-action {
        min-height: 40px;
        padding-inline: 10px;
        font-size: .72rem;
    }

    .back-button-large {
        width: 42px;
        height: 42px;
    }

    .foundry-character-page {
        width: 100% !important;
        padding: 8px 8px 18px !important;
        margin: 0 !important;
    }

    .foundry-sheet-shell {
        display: block !important;
        width: 100%;
    }

    /* Desktop sidebar is replaced by the compact mobile combat HUD. */
    .foundry-sidebar {
        display: none !important;
    }

    .foundry-main-column-v2 {
        width: 100%;
        display: block !important;
    }

    .mobile-character-hud {
        display: grid;
        gap: 8px;
        margin-bottom: 9px;
    }

    .mobile-hud-identity {
        min-height: 64px;
        padding: 8px 10px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: var(--panel-soft);
        display: grid;
        grid-template-columns: 46px minmax(0,1fr) 52px;
        gap: 9px;
        align-items: center;
    }

    .mobile-hud-avatar {
        width: 46px;
        height: 46px;
        border-radius: 9px;
        object-fit: cover;
        border: 1px solid #6a4a27;
    }

    .mobile-hud-avatar-placeholder {
        display: grid;
        place-items: center;
        color: var(--gold-soft);
        background: #18130f;
        font-weight: 900;
    }

    .mobile-hud-name {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    .mobile-hud-name span,
    .mobile-hud-level span {
        color: #81766c;
        font-size: .56rem;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .mobile-hud-name strong {
        overflow: hidden;
        color: #f0e6dc;
        font-family: Georgia, serif;
        font-size: 1.2rem;
        line-height: 1.08;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-hud-level {
        min-height: 46px;
        border-left: 1px solid #3c332b;
        display: grid;
        place-content: center;
        justify-items: center;
    }

    .mobile-hud-level strong {
        color: var(--gold-soft);
        font-family: Georgia, serif;
        font-size: 1.45rem;
    }

    .mobile-combat-summary {
        display: grid;
        grid-template-columns: .78fr 1.45fr .9fr;
        gap: 7px;
    }

    .mobile-summary-card {
        min-width: 0;
        min-height: 78px;
        padding: 7px 6px;
        border: 1px solid var(--line-soft);
        border-radius: 10px;
        background: var(--panel-deep);
        color: inherit;
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 3px;
        text-align: center;
    }

    button.mobile-summary-card {
        cursor: pointer;
    }

    .mobile-summary-card > span {
        color: #9c8f83;
        font-size: .58rem;
        font-weight: 850;
        text-transform: uppercase;
    }

    .mobile-summary-card > strong {
        color: #f1e7dc;
        font-family: Georgia, serif;
        font-size: 1.7rem;
        line-height: 1;
    }

    .mobile-summary-card > strong small {
        margin-left: 2px;
        color: #96897e;
        font-family: inherit;
        font-size: .7rem;
    }

    .mobile-summary-card.hp > strong {
        color: var(--gold-soft);
        font-size: 1.9rem;
    }

    .mobile-hp-quick {
        display: flex;
        gap: 7px;
        margin-top: 5px;
    }

    .mobile-hp-quick button {
        width: 34px;
        height: 30px;
        border: 1px solid #493c31;
        border-radius: 7px;
        background: #15120f;
        color: #b7a99b;
        font-size: .82rem;
    }

    .mobile-hp-quick button:first-child {
        color: #ed8277;
        border-color: rgba(221,75,65,.35);
    }

    .mobile-hp-quick button:last-child {
        color: #83d391;
        border-color: rgba(95,186,111,.35);
    }

    .mobile-initiative-strip {
        min-height: 52px;
        padding: 6px 7px 6px 12px;
        border: 1px solid var(--line-soft);
        border-radius: 10px;
        background: #15120f;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-initiative-strip > div {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-initiative-strip span {
        color: #d8cabe;
        font-size: .8rem;
        font-weight: 850;
    }

    .mobile-initiative-strip strong {
        color: #f0e4d8;
        font-size: 1.28rem;
    }

    .mobile-d20-proxy {
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .mobile-d20-proxy img {
        width: 42px;
        height: 42px;
        display: block;
    }

    /* Persistent desktop identity becomes a compact page identity. */
    .foundry-identity-persistent {
        margin-bottom: 8px;
        padding: 10px 11px !important;
    }

    .foundry-identity-persistent .foundry-identity-top {
        align-items: center;
    }

    .foundry-identity-persistent .eyebrow,
    .foundry-identity-persistent .foundry-identity-sub,
    .foundry-identity-persistent .foundry-reference-row {
        display: none !important;
    }

    .foundry-identity-persistent h1 {
        margin: 0 !important;
        font-size: 1.55rem !important;
        line-height: 1.05 !important;
    }

    .foundry-identity-persistent .foundry-level-box {
        min-width: 54px;
        padding: 5px 8px;
    }

    .foundry-identity-persistent .foundry-level-box strong {
        font-size: 1.45rem;
    }

    .foundry-identity-persistent .icon-button {
        width: 40px;
        height: 40px;
    }

    /* Top desktop tabs are redundant on mobile; bottom nav owns navigation. */
    .foundry-top-tabs {
        display: none !important;
    }

    .foundry-tab-stage {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .foundry-tab-pane {
        padding: 0 !important;
    }

    .foundry-main-panel,
    .foundry-identity-card {
        border-radius: 11px;
    }

    /* General mobile card behavior: stop desktop grids from becoming tiny columns. */
    .character-details-grid,
    .character-benefit-strip,
    .foundry-ability-strip,
    .skills-grid,
    .inventory-summary-grid,
    .inventory-category-grid,
    .tab-placeholder-grid,
    .tab-placeholder-grid.two,
    .tab-placeholder-grid.three,
    .tab-placeholder-grid.four {
        grid-template-columns: 1fr !important;
    }

    .character-details-grid {
        gap: 7px;
    }

    .character-detail-card {
        min-height: 64px;
    }

    .foundry-ability-strip {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        border-radius: 10px;
    }

    .foundry-ability-item {
        min-height: 90px;
        border-right: 1px solid var(--line-soft) !important;
        border-bottom: 1px solid var(--line-soft);
    }

    /* Skills: one readable column with touch-size controls. */
    .skills-columns {
        grid-template-columns: 1fr !important;
    }

    .skill-row {
        min-height: 72px !important;
        grid-template-columns: 52px minmax(0,1fr) !important;
    }

    .skill-row .skill-controls {
        grid-column: 1 / -1;
        width: 100%;
    }

    select,
    input,
    textarea,
    button {
        touch-action: manipulation;
    }

    .skill-row select,
    .skill-row input,
    .inventory-form select,
    .inventory-form input {
        min-height: 44px;
        font-size: 16px !important; /* prevents iOS auto zoom */
    }

    /* Attack rows become vertical cards rather than compressed desktop tables. */
    .strike-card {
        grid-template-columns: 46px minmax(0,1fr) !important;
        min-height: 0 !important;
    }

    .strike-card > .action-weapon-main {
        grid-column: 2 !important;
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }

    .strike-card > .action-weapon-main .action-weapon-name,
    .strike-card > .action-weapon-main .action-weapon-details,
    .strike-card > .action-weapon-main .damage-roll-button {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .strike-card > .action-weapon-main .damage-roll-button {
        width: 100% !important;
        max-width: none !important;
        min-height: 48px !important;
        justify-self: stretch !important;
    }

    .strike-card > .strike-buttons {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        border-left: 0 !important;
        border-top: 1px solid var(--line-soft);
    }

    .strike-button-wrap {
        min-height: 96px !important;
    }

    /* Quick actions: 1-column, app-like cards. */
    .redesigned-basic-grid {
        grid-template-columns: 1fr !important;
    }

    .redesigned-action-card {
        min-height: 170px !important;
    }

    /* Mobile roll history becomes a bottom sheet. */
    .roll-history-rail {
        display: grid !important;
        position: fixed !important;
        z-index: 1200;
        left: 8px;
        right: 8px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        top: auto !important;
        width: auto !important;
        max-height: min(62vh, 520px) !important;
        transform: translateY(calc(100% + 100px));
        opacity: 0;
        pointer-events: none;
        transition: transform .2s ease, opacity .2s ease;
        box-shadow: 0 -18px 50px rgba(0,0,0,.48);
    }

    .roll-history-rail.mobile-history-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .roll-history-current {
        min-height: 78px;
    }

    .mobile-roll-fab {
        display: flex;
        position: fixed;
        z-index: 1050;
        right: 12px;
        bottom: calc(75px + env(safe-area-inset-bottom));
        min-height: 42px;
        padding: 5px 10px 5px 6px;
        border: 1px solid #6b4b28;
        border-radius: 999px;
        background: #17120e;
        color: #e2c59e;
        align-items: center;
        gap: 5px;
        box-shadow: 0 8px 24px rgba(0,0,0,.38);
    }

    .mobile-roll-fab img {
        width: 32px;
        height: 32px;
    }

    .mobile-roll-fab span {
        font-size: .67rem;
        font-weight: 850;
    }

    /* Fixed app-style navigation. */
    .mobile-bottom-nav {
        display: grid;
        position: fixed;
        z-index: 1100;
        left: 0;
        right: 0;
        bottom: 0;
        grid-template-columns: repeat(5, 1fr);
        min-height: calc(64px + env(safe-area-inset-bottom));
        padding: 5px 5px env(safe-area-inset-bottom);
        border-top: 1px solid #44382e;
        background: rgba(16,14,12,.97);
        backdrop-filter: blur(16px);
        box-shadow: 0 -10px 30px rgba(0,0,0,.3);
    }

    .mobile-nav-button {
        min-width: 0;
        min-height: 54px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #847a70;
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 2px;
    }

    .mobile-nav-button > span {
        font-size: 1.05rem;
        line-height: 1;
    }

    .mobile-nav-button small {
        font-size: .56rem;
        font-weight: 800;
    }

    .mobile-nav-button.active {
        color: #efb05a;
        background: rgba(226,160,77,.07);
    }

    /* More menu / bottom sheet */
    .mobile-sheet-backdrop[hidden] {
        display: none !important;
    }

    .mobile-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1300;
        background: rgba(0,0,0,.55);
        opacity: 0;
        transition: opacity .18s ease;
    }

    .mobile-sheet-backdrop.open {
        opacity: 1;
    }

    .mobile-bottom-sheet {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
        border: 1px solid #4b3e33;
        border-radius: 18px 18px 0 0;
        background: #171411;
        transform: translateY(100%);
        transition: transform .18s ease;
    }

    .mobile-sheet-backdrop.open .mobile-bottom-sheet {
        transform: translateY(0);
    }

    .mobile-sheet-handle {
        width: 46px;
        height: 4px;
        margin: 0 auto 9px;
        border-radius: 99px;
        background: #4f443a;
    }

    .mobile-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 2px 10px;
    }

    .mobile-sheet-head strong {
        color: #eee3d8;
        font-family: Georgia, serif;
        font-size: 1.35rem;
    }

    .mobile-sheet-head button {
        width: 42px;
        height: 42px;
        border: 1px solid #45392f;
        border-radius: 9px;
        background: #12100e;
        color: #b9aa9d;
        font-size: 1.4rem;
    }

    .mobile-more-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mobile-more-grid button,
    .mobile-more-grid a {
        min-height: 64px;
        padding: 10px 12px;
        border: 1px solid #45392f;
        border-radius: 10px;
        background: #12100e;
        color: #dbcfc3;
        display: flex;
        align-items: center;
        gap: 9px;
        text-decoration: none;
        font-size: .8rem;
        font-weight: 800;
    }

    body.mobile-sheet-open {
        overflow: hidden;
    }

    /* Fullscreen-friendly modals on phones. */
    .modal-backdrop {
        padding:
            max(8px, env(safe-area-inset-top))
            8px
            max(8px, env(safe-area-inset-bottom)) !important;
    }

    .modal-card {
        width: min(100%, 620px) !important;
        max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .modal-card input,
    .modal-card select,
    .modal-card textarea {
        font-size: 16px !important;
        min-height: 46px;
    }

    .modal-actions button {
        min-height: 46px;
    }
}

@media (min-width: 761px) and (max-width: 1100px) and (pointer: coarse) {
    /* Tablet mode: preserve desktop structure but enlarge touch controls. */
    button,
    .icon-button,
    select,
    input {
        min-height: 42px;
    }

    .foundry-character-page {
        width: min(100% - 18px, 1100px);
    }

    .foundry-sheet-shell {
        grid-template-columns: 270px minmax(0,1fr);
    }

    .foundry-top-tab {
        min-width: 130px;
    }
}


/* =========================================================
   Stage 10.1.0 — Phone + Tablet UX correction
   Fixes duplicate mobile identity, narrow tablet center column,
   clipped tabs/skills and history rail pressure.
   ========================================================= */

/* PHONE — truly app-like, no duplicate desktop identity card */
@media (max-width: 760px) {
    .foundry-identity-persistent {
        display: none !important;
    }

    .foundry-tab-stage {
        margin-top: 0 !important;
    }

    .foundry-tab-pane {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Make every major content panel breathe */
    .foundry-main-panel,
    .tab-content-panel,
    .skills-panel,
    .inventory-panel,
    .actions-panel {
        padding: 12px !important;
    }

    /* Character cards: two columns where it helps, not a one-column endless ribbon */
    .character-details-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 7px !important;
    }

    .character-detail-card {
        min-height: 72px !important;
        padding: 10px !important;
    }

    .character-detail-card strong {
        font-size: .86rem !important;
        overflow-wrap: anywhere;
    }

    .character-benefit-strip {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 7px !important;
    }

    .character-benefit-strip > div {
        min-width: 0 !important;
        min-height: 62px;
    }

    /* Attributes as a compact 2 x 3 grid */
    .foundry-ability-strip {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .foundry-ability-item {
        min-height: 86px !important;
    }

    /* Skills: card rows rather than a desktop row squeezed into 360px */
    .skills-columns,
    .skills-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .skill-row {
        min-height: 0 !important;
        padding: 10px !important;
        border-radius: 10px !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0,1fr) !important;
        gap: 8px !important;
    }

    .skill-total {
        min-height: 52px;
        font-size: 1.35rem !important;
    }

    .skill-main {
        min-width: 0;
    }

    .skill-main strong,
    .skill-name {
        font-size: .96rem !important;
    }

    .skill-controls {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: minmax(88px,.7fr) minmax(150px,1.3fr) 48px !important;
        gap: 7px !important;
        align-items: end !important;
    }

    .skill-controls input,
    .skill-controls select {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
    }

    .skill-controls .d20-roll-button,
    .skill-row .d20-roll-button {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }

    /* Actions: keep card internals large enough for a finger */
    .action-group,
    .basic-action-group {
        padding-inline: 0 !important;
    }

    .actions-panel-head {
        gap: 10px !important;
    }

    .turn-economy {
        width: 100% !important;
        overflow-x: auto;
    }

    .strike-buttons {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }

    .strike-button-wrap {
        min-width: 0 !important;
        padding-inline: 4px !important;
    }

    .strike-button-wrap > strong {
        font-size: 1.12rem !important;
    }

    .strike-button-wrap > small {
        font-size: .7rem !important;
    }

    /* Inventory: prevent desktop edit/list controls from crushing text */
    .inventory-item-row,
    .inventory-row {
        grid-template-columns: minmax(0,1fr) auto !important;
        gap: 8px !important;
    }

    .inventory-item-meta {
        white-space: normal !important;
        line-height: 1.35 !important;
    }

    .inventory-item-actions {
        align-self: center;
        display: grid !important;
        grid-template-columns: repeat(2, 42px) !important;
        gap: 6px !important;
    }

    .inventory-item-actions button,
    .inventory-item-actions a {
        width: 42px !important;
        height: 42px !important;
    }

    /* Feats / Spells should not look like giant desktop sections */
    [data-sheet-pane="feats"] .tab-content-panel,
    [data-sheet-pane="spells"] .tab-content-panel {
        min-height: 0 !important;
        padding: 12px !important;
    }

    [data-sheet-pane="feats"] h2,
    [data-sheet-pane="spells"] h2 {
        font-size: clamp(1.75rem, 9vw, 2.35rem) !important;
        line-height: 1 !important;
    }

    /* Bottom navigation gets a stronger safe-area and touch target */
    .mobile-bottom-nav {
        padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
    }

    .mobile-nav-button {
        min-height: 58px !important;
    }
}

/* Very narrow phones: only then collapse character identity cards to one column. */
@media (max-width: 390px) {
    .character-details-grid,
    .character-benefit-strip {
        grid-template-columns: 1fr !important;
    }

    .skill-controls {
        grid-template-columns: 1fr 1fr !important;
    }

    .skill-controls .d20-roll-button,
    .skill-row .d20-roll-button {
        grid-column: 2;
        justify-self: end;
    }
}

/* TABLET — dedicated touch layout instead of desktop squeezed between sidebar + history */
@media (min-width: 761px) and (max-width: 1366px) and (pointer: coarse) {
    body {
        overflow-x: hidden;
    }

    .foundry-character-page {
        width: calc(100% - 18px) !important;
        max-width: none !important;
        padding-top: 14px !important;
    }

    .foundry-sheet-shell {
        display: grid !important;
        grid-template-columns: 250px minmax(0,1fr) !important;
        gap: 10px !important;
    }

    .foundry-sidebar {
        top: 82px !important;
        gap: 9px !important;
    }

    .character-portrait-frame {
        max-height: 300px;
    }

    /* The permanent right history rail is the main source of cramped tablet UI. */
    .roll-history-rail {
        position: fixed !important;
        z-index: 1200 !important;
        left: auto !important;
        right: 14px !important;
        bottom: 14px !important;
        top: auto !important;
        width: min(390px, calc(100vw - 28px)) !important;
        max-height: 64vh !important;
        transform: translateY(calc(100% + 90px));
        opacity: 0;
        pointer-events: none;
        transition: transform .2s ease, opacity .2s ease;
        box-shadow: 0 18px 50px rgba(0,0,0,.5);
    }

    .roll-history-rail.mobile-history-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-roll-fab {
        display: flex !important;
        position: fixed;
        z-index: 1100;
        right: 14px;
        bottom: 14px;
        min-height: 46px;
        padding: 5px 12px 5px 7px;
        border: 1px solid #6b4b28;
        border-radius: 999px;
        background: #17120e;
        color: #e2c59e;
        align-items: center;
        gap: 6px;
        box-shadow: 0 8px 24px rgba(0,0,0,.38);
    }

    .mobile-roll-fab img {
        width: 34px;
        height: 34px;
    }

    /* Main column gets the space it needs. */
    .foundry-main-column-v2 {
        min-width: 0 !important;
        width: 100% !important;
    }

    .foundry-identity-top h1 {
        font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
        overflow-wrap: anywhere;
    }

    /* Tabs: horizontally scroll instead of shrinking/clipping text */
    .foundry-top-tabs {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .foundry-top-tab {
        flex: 0 0 auto !important;
        min-width: 145px !important;
        min-height: 58px !important;
        padding-inline: 16px !important;
        scroll-snap-align: start;
        white-space: nowrap;
        font-size: .9rem !important;
    }

    /* Skills: single wide column on tablet. Much better for touch editing. */
    .skills-columns,
    .skills-grid {
        grid-template-columns: 1fr !important;
    }

    .skill-row {
        min-height: 72px !important;
    }

    .skill-row select,
    .skill-row input {
        min-height: 44px !important;
        font-size: 16px !important;
    }

    /* Character info doesn't need 4 tiny columns on a tablet. */
    .character-details-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .foundry-ability-strip {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }

    /* Actions: attack cards stack their strike controls under details if central width is tight. */
    .strike-card {
        grid-template-columns: 50px minmax(0,1fr) !important;
    }

    .strike-card > .action-weapon-main {
        grid-column: 2 !important;
        grid-template-columns: minmax(0,1fr) minmax(150px,175px) !important;
    }

    .strike-card > .strike-buttons {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        border-left: 0 !important;
        border-top: 1px solid var(--line-soft);
    }

    .strike-button-wrap {
        min-height: 100px !important;
    }

    /* Modal controls are touch sized on tablet too. */
    .modal-card input,
    .modal-card select,
    .modal-card textarea,
    .modal-actions button {
        min-height: 46px !important;
        font-size: 16px !important;
    }
}

/* Landscape phone / small tablet: use mobile interface if screen height is constrained. */
@media (max-height: 520px) and (max-width: 950px) and (pointer: coarse) {
    .topbar {
        position: static !important;
    }
}


/* =========================================================
   Stage 10.2.0 — mobile/tablet cleanup from real device tests
   ========================================================= */

/* ---------------- PHONE ---------------- */
@media (max-width: 760px) {
    /* HP HUD: keep numbers and action buttons inside their own card */
    .mobile-combat-summary {
        grid-template-columns: .78fr 1.5fr .78fr !important;
        align-items: stretch;
    }

    .mobile-summary-card {
        min-height: 96px !important;
        overflow: hidden;
    }

    .mobile-summary-card.hp {
        display: grid !important;
        grid-template-rows: auto auto auto;
        place-content: center;
        justify-items: center;
        gap: 5px !important;
        padding: 8px 6px !important;
    }

    .mobile-summary-card.hp > strong {
        display: flex !important;
        align-items: baseline;
        justify-content: center;
        gap: 3px;
        font-size: 1.72rem !important;
        line-height: 1 !important;
        white-space: nowrap;
    }

    .mobile-summary-card.hp > strong small {
        margin: 0 !important;
        font-size: .68rem !important;
    }

    .mobile-hp-quick {
        margin-top: 1px !important;
        display: flex !important;
        justify-content: center;
        gap: 7px !important;
    }

    .mobile-hp-quick button {
        width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        display: grid;
        place-items: center;
        font-size: .85rem !important;
    }

    /* On phones History lives in "Ещё". The floating button was covering content. */
    .mobile-roll-fab {
        display: none !important;
    }

    /* Skills: replace squeezed desktop row with a purpose-built mobile card. */
    .skills-foundry-panel {
        padding: 12px !important;
    }

    .skills-foundry-head {
        margin-bottom: 12px !important;
        gap: 10px !important;
    }

    .skills-foundry-head h2 {
        font-size: 1.7rem !important;
        line-height: 1.05;
    }

    .skills-head-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .skills-head-actions > * {
        min-width: 0 !important;
        min-height: 48px !important;
        padding-inline: 8px !important;
        font-size: .78rem !important;
    }

    .skills-core-grid,
    .lore-foundry-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .skill-foundry-row,
    .lore-foundry-row {
        min-height: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        display: grid !important;
        grid-template-columns: 58px minmax(0,1fr) !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
            "total main"
            "rank rank"
            "item roll" !important;
        align-items: stretch !important;
        border-radius: 11px !important;
    }

    .skill-total {
        grid-area: total !important;
        min-height: 72px !important;
        height: auto !important;
        border-right: 1px solid #40352a !important;
        border-bottom: 1px solid #40352a !important;
        font-size: 1.45rem !important;
    }

    .skill-main {
        grid-area: main !important;
        min-width: 0 !important;
        min-height: 72px !important;
        padding: 11px 10px !important;
        border-bottom: 1px solid #40352a;
        display: grid;
        align-content: center;
    }

    .skill-name-line {
        flex-wrap: wrap !important;
        row-gap: 4px !important;
    }

    .skill-name-line strong {
        max-width: 100%;
        font-size: 1.03rem !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.1;
    }

    .skill-ability {
        font-size: .62rem !important;
        padding: 3px 6px !important;
    }

    .skill-breakdown {
        margin-top: 6px !important;
        font-size: .64rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .skill-rank-select {
        grid-area: rank !important;
        width: calc(100% - 16px) !important;
        min-width: 0 !important;
        min-height: 46px !important;
        margin: 8px !important;
        padding: 0 12px !important;
        font-size: .82rem !important;
        text-transform: uppercase;
    }

    .skill-item-bonus-wrap {
        grid-area: item !important;
        min-height: 62px !important;
        padding: 7px 8px 9px !important;
        border-top: 1px solid #302922;
        display: grid !important;
        grid-template-columns: auto 64px !important;
        align-items: center !important;
        justify-content: start !important;
        gap: 8px !important;
    }

    .skill-item-bonus-wrap label {
        font-size: .6rem !important;
    }

    .skill-item-input {
        width: 64px !important;
        min-height: 44px !important;
        font-size: 1rem !important;
    }

    .skill-roll-control {
        grid-area: roll !important;
        min-height: 62px !important;
        padding: 7px 10px 9px !important;
        border-top: 1px solid #302922;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
    }

    .skill-roll-control .mini-d20-button {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }

    .skill-roll-control .inline-roll-result {
        min-width: 26px;
        font-size: .72rem !important;
    }

    .lore-foundry-row .lore-delete-button,
    .lore-foundry-row .lore-locked-mark {
        display: grid !important;
        position: absolute;
        right: 7px;
        bottom: 8px;
        z-index: 2;
    }

    .lore-foundry-row {
        position: relative;
    }

    /* Avoid giant headings on small devices */
    .skills-lore-head h2 {
        font-size: 1.55rem !important;
    }
}

/* ---------------- TABLET / COMPACT DESKTOP ----------------
   Use width, not pointer detection. This also gives small laptops a sane layout.
*/
@media (min-width: 761px) and (max-width: 1366px) {
    .foundry-character-page {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        padding: 12px 0 22px !important;
    }

    /* The desktop sidebar is too dense for tablet widths.
       Replace it with the same compact combat HUD used by phones. */
    .foundry-sheet-shell {
        display: block !important;
        width: 100% !important;
    }

    .foundry-sidebar {
        display: none !important;
    }

    .mobile-character-hud {
        display: grid !important;
        grid-template-columns: minmax(300px, .9fr) minmax(430px, 1.5fr) !important;
        gap: 10px !important;
        margin-bottom: 10px;
    }

    .mobile-hud-identity {
        grid-column: 1;
        min-height: 82px;
    }

    .mobile-combat-summary {
        grid-column: 2;
        grid-row: 1;
        display: grid !important;
        grid-template-columns: .8fr 1.35fr .85fr !important;
        gap: 8px;
    }

    .mobile-summary-card {
        min-height: 82px !important;
    }

    .mobile-initiative-strip {
        grid-column: 1 / -1;
        min-height: 58px;
    }

    .foundry-main-column-v2 {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Persistent identity is redundant once tablet HUD is visible. */
    .foundry-identity-persistent {
        display: none !important;
    }

    /* Tabs remain at the top, but scroll instead of being crushed. */
    .foundry-top-tabs {
        display: flex !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        border-radius: 11px 11px 0 0;
    }

    .foundry-top-tab {
        flex: 0 0 155px !important;
        min-width: 155px !important;
        min-height: 58px !important;
        font-size: .9rem !important;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .foundry-tab-stage {
        width: 100%;
        min-width: 0;
    }

    /* History never takes a permanent column at this width. */
    .roll-history-rail {
        position: fixed !important;
        z-index: 1200 !important;
        left: auto !important;
        right: 16px !important;
        bottom: 70px !important;
        top: auto !important;
        width: min(420px, calc(100vw - 32px)) !important;
        max-height: 65vh !important;
        transform: translateY(calc(100% + 120px));
        opacity: 0;
        pointer-events: none;
        transition: transform .2s ease, opacity .2s ease;
        box-shadow: 0 18px 50px rgba(0,0,0,.5);
    }

    .roll-history-rail.mobile-history-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-roll-fab {
        display: flex !important;
        position: fixed;
        z-index: 1100;
        right: 16px;
        bottom: 16px;
        min-height: 46px;
        padding: 5px 12px 5px 7px;
        border: 1px solid #6b4b28;
        border-radius: 999px;
        background: #17120e;
        color: #e2c59e;
        align-items: center;
        gap: 6px;
        box-shadow: 0 8px 24px rgba(0,0,0,.38);
    }

    .mobile-roll-fab img {
        width: 34px;
        height: 34px;
    }

    /* Character overview: balanced 2-column identity and 3-column abilities. */
    .character-details-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .foundry-ability-strip {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }

    /* Skills: one large readable row per skill, not two narrow columns. */
    .skills-core-grid {
        grid-template-columns: 1fr !important;
    }

    .skill-foundry-row {
        grid-template-columns: 70px minmax(0,1fr) 82px 52px 150px !important;
        min-height: 74px !important;
    }

    .skill-name-line strong {
        font-size: 1rem !important;
    }

    .skill-breakdown {
        font-size: .66rem !important;
    }

    .skill-item-input {
        min-height: 42px !important;
        width: 62px !important;
        font-size: 16px !important;
    }

    .skill-rank-select {
        min-height: 44px !important;
        font-size: .78rem !important;
    }

    .mini-d20-button {
        width: 42px !important;
        height: 42px !important;
    }

    /* Attacks get a full second row for strike controls. */
    .strike-card {
        grid-template-columns: 54px minmax(0,1fr) !important;
        min-height: 0 !important;
    }

    .strike-card > .action-weapon-main {
        grid-column: 2 !important;
        grid-template-columns: minmax(0,1fr) minmax(170px,190px) !important;
    }

    .strike-card > .strike-buttons {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        border-left: 0 !important;
        border-top: 1px solid var(--line-soft);
    }

    .strike-button-wrap {
        min-height: 104px !important;
    }

    /* Quick actions can use 3 columns on landscape tablet. */
    .redesigned-basic-grid {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }

    .redesigned-action-card {
        min-height: 218px !important;
    }

    /* Touch-friendly modal/forms regardless of browser pointer reporting. */
    .modal-card input,
    .modal-card select,
    .modal-card textarea {
        min-height: 46px !important;
        font-size: 16px !important;
    }

    .modal-actions button {
        min-height: 46px !important;
    }
}

/* Portrait tablet: use a simpler two-column quick-actions grid */
@media (min-width: 761px) and (max-width: 950px) {
    .mobile-character-hud {
        grid-template-columns: 1fr !important;
    }

    .mobile-hud-identity,
    .mobile-combat-summary,
    .mobile-initiative-strip {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .redesigned-basic-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}


/* =========================================================
   Stage 10.2.1 — stability + control rendering fixes
   ========================================================= */

/* Manual ability number controls — consistent on desktop/iOS/Android */
.ability-number-stepper {
    min-width: 0;
    display: grid;
    grid-template-columns: 46px minmax(58px, 1fr) 46px;
    gap: 6px;
    align-items: stretch;
}

.ability-number-stepper input[type="number"] {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 6px;
    border: 1px solid #4b4036;
    border-radius: 9px;
    background: #11100f;
    color: #f2e8de !important;
    -webkit-text-fill-color: #f2e8de;
    font-size: 1.25rem !important;
    font-weight: 900;
    text-align: center;
    opacity: 1;
    appearance: textfield;
    -moz-appearance: textfield;
}

.ability-number-stepper input[type="number"]::-webkit-inner-spin-button,
.ability-number-stepper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ability-step-button {
    width: 46px;
    min-width: 46px;
    height: 48px;
    padding: 0;
    border: 1px solid #6d4b27;
    border-radius: 9px;
    background: #17130f;
    color: #e6aa55;
    display: grid;
    place-items: center;
    font-family: Georgia, serif;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.ability-step-button:hover,
.ability-step-button:active {
    border-color: #d6903c;
    background: rgba(226,160,77,.09);
    color: #ffc36e;
}

.ability-edit-control {
    grid-template-columns: minmax(0,1fr) 72px !important;
}

@media (max-width: 640px) {
    .manual-panel {
        margin: 10px !important;
        padding: 14px !important;
    }

    .manual-panel h2 {
        font-size: 2rem !important;
        line-height: 1.08;
    }

    .ability-edit-card {
        min-width: 0;
        padding: 12px !important;
    }

    .ability-edit-heading {
        min-width: 0;
        gap: 7px !important;
        flex-wrap: wrap;
    }

    .ability-edit-heading span {
        min-width: 0;
        font-size: .82rem;
        overflow-wrap: anywhere;
    }

    .ability-edit-control {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .ability-number-stepper {
        grid-template-columns: 42px minmax(52px,1fr) 42px;
        gap: 5px;
    }

    .ability-step-button {
        width: 42px;
        min-width: 42px;
        height: 46px;
    }

    .ability-number-stepper input[type="number"] {
        height: 46px;
        font-size: 1.12rem !important;
    }

    .live-modifier {
        width: 100%;
        height: 44px;
        font-size: 1.05rem;
    }
}

/* Tablet HUD: complete visual definitions.
   Stage 10.2 made it visible on tablet, but the original styling only existed
   under max-width:760px, which let Safari/Chrome draw native white buttons. */
@media (min-width: 761px) and (max-width: 1366px) {
    .mobile-character-hud {
        color: #e9ded3;
    }

    .mobile-hud-identity {
        min-width: 0;
        padding: 9px 11px;
        border: 1px solid var(--line-soft);
        border-radius: 11px;
        background:
            linear-gradient(180deg, rgba(255,255,255,.008), transparent),
            var(--panel-soft);
        display: grid;
        grid-template-columns: 52px minmax(0,1fr) 62px;
        gap: 10px;
        align-items: center;
    }

    .mobile-hud-avatar {
        width: 52px;
        height: 52px;
        border: 1px solid #674925;
        border-radius: 9px;
        background: #14110e;
        color: #e6a850;
        object-fit: cover;
    }

    .mobile-hud-avatar-placeholder {
        display: grid;
        place-items: center;
        font-weight: 900;
    }

    .mobile-hud-name {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    .mobile-hud-name span,
    .mobile-hud-level span {
        color: #8c8075;
        font-size: .58rem;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .mobile-hud-name strong {
        color: #eee3d8;
        font-family: Georgia, serif;
        font-size: 1.22rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-hud-level {
        min-height: 48px;
        border-left: 1px solid #3e342b;
        display: grid;
        place-content: center;
        justify-items: center;
    }

    .mobile-hud-level strong {
        color: #efad55;
        font-family: Georgia, serif;
        font-size: 1.5rem;
    }

    .mobile-combat-summary {
        min-width: 0;
    }

    .mobile-summary-card {
        min-width: 0;
        min-height: 82px;
        padding: 8px;
        border: 1px solid var(--line-soft) !important;
        border-radius: 10px;
        background:
            linear-gradient(180deg, rgba(255,255,255,.006), transparent),
            #15120f !important;
        color: #e8ddd1 !important;
        box-shadow: none !important;
        appearance: none;
        -webkit-appearance: none;
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 4px;
        text-align: center;
    }

    button.mobile-summary-card {
        cursor: pointer;
    }

    .mobile-summary-card > span {
        color: #95887c;
        font-size: .58rem;
        font-weight: 850;
        text-transform: uppercase;
    }

    .mobile-summary-card > strong {
        color: #f0e5d9;
        font-family: Georgia, serif;
        font-size: 1.62rem;
        line-height: 1;
    }

    .mobile-summary-card > strong small {
        margin-left: 2px;
        color: #918479;
        font-size: .68rem;
    }

    .mobile-summary-card.hp > strong {
        color: #efad55;
    }

    .mobile-hp-quick {
        margin-top: 4px;
        display: flex;
        justify-content: center;
        gap: 6px;
    }

    .mobile-hp-quick button {
        width: 35px;
        min-width: 35px;
        height: 34px;
        min-height: 34px !important;
        padding: 0;
        border: 1px solid #493c31;
        border-radius: 7px;
        background: #11100e !important;
        color: #d6c9bc;
        appearance: none;
        -webkit-appearance: none;
        display: grid;
        place-items: center;
        font-size: .82rem;
    }

    .mobile-hp-quick button:first-child {
        color: #ee837a;
        border-color: rgba(221,75,65,.4);
    }

    .mobile-hp-quick button:last-child {
        color: #88d597;
        border-color: rgba(95,186,111,.4);
    }

    .mobile-initiative-strip {
        padding: 7px 9px 7px 13px;
        border: 1px solid var(--line-soft);
        border-radius: 10px;
        background: #15120f;
        color: #e5d9cc;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-initiative-strip > div {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .mobile-initiative-strip span {
        color: #d8cabd;
        font-size: .82rem;
        font-weight: 850;
    }

    .mobile-initiative-strip strong {
        color: #f0e5da;
        font-size: 1.3rem;
    }

    .mobile-d20-proxy {
        width: 46px;
        min-width: 46px;
        height: 46px;
        min-height: 46px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        appearance: none;
        -webkit-appearance: none;
        box-shadow: none !important;
    }

    .mobile-d20-proxy img {
        width: 46px;
        height: 46px;
        display: block;
    }

    /* Tabs/buttons should never inherit white browser-native appearance */
    .foundry-top-tab,
    .mobile-roll-fab,
    .mini-d20-button,
    .d20-roll-button {
        -webkit-appearance: none;
        appearance: none;
    }
}

/* A small guard against native light buttons leaking into dark UI anywhere. */
.foundry-character-page button:not(.primary):not(.danger-button):not(.cancel-button) {
    font-family: inherit;
}

/* Keep D20 sprite itself free from native button background artifacts. */
.mini-d20-button,
.d20-roll-button,
.mobile-d20-proxy {
    background-color: transparent;
}


/* =========================================================
   Stage 10.2.2 — portrait crop modal viewport safety
   ========================================================= */

/* The cropper must never extend beyond the visible browser window. */
#portrait-crop-modal {
    padding: 12px !important;
    overflow: hidden !important;
}

.portrait-crop-modal-card {
    width: min(100%, 780px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-bottom: 0 !important;
}

/* Keep the image area large, but leave guaranteed room for zoom/help/buttons. */
.portrait-crop-stage {
    max-height: min(520px, calc(100dvh - 300px)) !important;
    min-height: 240px;
}

/* Actions remain reachable even when the cropper content has to scroll. */
.portrait-crop-modal-card > .modal-actions {
    position: sticky;
    z-index: 12;
    left: 0;
    right: 0;
    bottom: 0;
    margin:
        12px -1px 0 !important;
    padding:
        12px 1px
        max(12px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #40352a;
    background:
        linear-gradient(180deg, rgba(21,18,15,.94), #15120f 30%);
    backdrop-filter: blur(10px);
}

.portrait-crop-modal-card > .modal-actions button {
    min-height: 46px;
}

/* Short laptop/tablet screens need a more compact cropper. */
@media (max-height: 760px) {
    .portrait-crop-modal-card {
        width: min(100%, 690px) !important;
    }

    .portrait-crop-head .muted {
        margin-bottom: 8px;
        font-size: .76rem;
    }

    .portrait-crop-head h2 {
        font-size: 1.65rem;
    }

    .portrait-crop-stage {
        max-height: min(390px, calc(100dvh - 285px)) !important;
        min-height: 210px;
    }

    .portrait-crop-controls {
        margin-top: 9px !important;
    }

    .portrait-crop-help {
        margin-top: 6px !important;
        font-size: .66rem !important;
    }
}

/* Phone: use nearly the full screen and keep buttons above Safari/Chrome bars. */
@media (max-width: 760px) {
    #portrait-crop-modal {
        padding:
            max(6px, env(safe-area-inset-top))
            6px
            max(6px, env(safe-area-inset-bottom)) !important;
    }

    .portrait-crop-modal-card {
        width: 100% !important;
        max-height: calc(
            100dvh
            - max(6px, env(safe-area-inset-top))
            - max(6px, env(safe-area-inset-bottom))
        ) !important;
        border-radius: 12px;
    }

    .portrait-crop-head h2 {
        font-size: 1.45rem !important;
        line-height: 1.08;
    }

    .portrait-crop-head .muted {
        font-size: .72rem;
        line-height: 1.35;
    }

    .portrait-crop-stage {
        min-height: 190px;
        max-height: min(42dvh, 360px) !important;
    }

    .portrait-crop-controls {
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
    }

    .portrait-crop-controls label {
        grid-column: 1 / -1;
    }

    #portrait-zoom {
        min-height: 40px;
    }

    .portrait-reset-button {
        width: auto !important;
        min-width: 96px;
        min-height: 44px;
    }

    .portrait-crop-modal-card > .modal-actions {
        display: grid !important;
        grid-template-columns: 1fr 1.25fr;
        gap: 8px;
    }

    .portrait-crop-modal-card > .modal-actions button {
        width: 100%;
        min-width: 0;
        min-height: 48px;
    }
}


/* =========================================================
   Stage 10.2.3 — portrait crop aspect-ratio integrity
   ========================================================= */

/*
 * Important: don't constrain a 3:4 cropper with a fixed width and an unrelated
 * max-height. Some browsers then clamp only the height, producing a rectangle
 * that is no longer 3:4. The old JS subsequently stretched that rectangle into
 * 1200×1600, which visually widened/narrowed the portrait.
 */
.portrait-crop-stage {
    aspect-ratio: 3 / 4 !important;
    width: min(100%, 480px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* When vertical space is limited, reduce WIDTH from the available HEIGHT.
   That preserves exactly 3:4 instead of squashing the crop frame. */
@media (max-height: 900px) {
    .portrait-crop-stage {
        width: min(
            100%,
            480px,
            calc((100dvh - 310px) * 0.75)
        ) !important;
    }
}

@media (max-height: 760px) {
    .portrait-crop-stage {
        width: min(
            100%,
            420px,
            calc((100dvh - 285px) * 0.75)
        ) !important;
    }
}

@media (max-width: 760px) {
    .portrait-crop-stage {
        width: min(
            100%,
            360px,
            calc((100dvh - 300px) * 0.75)
        ) !important;
        min-width: 180px;
    }
}

/* The rendered portrait itself always uses the same 3:4 frame. */
.character-portrait-frame {
    aspect-ratio: 3 / 4 !important;
}

.character-portrait-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}


/* =========================================================
   Stage 10.2.4 — mobile/tablet portrait upload trigger
   ========================================================= */

.mobile-portrait-file-input {
    position: fixed !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.mobile-hud-avatar-button {
    position: relative;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 9px;
    padding: 0;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mobile-hud-avatar-button .mobile-hud-avatar {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border-radius: 9px;
    object-fit: cover;
}

.mobile-avatar-edit-badge {
    position: absolute;
    z-index: 2;
    right: -5px;
    bottom: -5px;
    width: 22px;
    height: 22px;
    border: 1px solid #8d612f;
    border-radius: 50%;
    background: #17120e;
    color: #efad55;
    display: grid;
    place-items: center;
    font-size: .68rem;
    font-weight: 900;
    box-shadow: 0 3px 10px rgba(0,0,0,.45);
}

.mobile-hud-avatar-button:active .mobile-avatar-edit-badge {
    background: #2b1d10;
    transform: scale(.94);
}

@media (min-width: 761px) and (max-width: 1366px) {
    .mobile-hud-avatar-button {
        width: 52px;
        height: 52px;
    }

    .mobile-avatar-edit-badge {
        width: 23px;
        height: 23px;
        right: -4px;
        bottom: -4px;
    }
}


/* =========================================================
   Stage 10.2.5 — Lore / Знания responsive layout
   Dedicated layouts: Lore has different children than normal skills,
   so it must not inherit the generic skill row grid.
   ========================================================= */

/* Desktop: explicit five-column Lore row */
.lore-foundry-row {
    grid-template-columns: 68px minmax(0, 1fr) 76px 148px 54px !important;
    grid-template-areas: "total main item rank action" !important;
    align-items: stretch !important;
}

.lore-foundry-row > .skill-total {
    grid-area: total;
}

.lore-foundry-row > .skill-main {
    grid-area: main;
    align-self: center;
}

.lore-foundry-row > .skill-item-bonus-wrap {
    grid-area: item;
    align-self: center;
}

.lore-foundry-row > .skill-rank-select {
    grid-area: rank;
    align-self: center;
    justify-self: center;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    margin: 0 !important;
}

.lore-foundry-row > .lore-action-cell {
    grid-area: action;
    width: 54px;
    min-width: 54px;
    height: 100%;
    border-left: 1px solid rgba(64,53,42,.45);
    display: grid;
    place-items: center;
}

/* Tablet: still a single clean row, but with sensible widths.
   Important: don't reuse the normal skill grid, because that includes
   a dedicated D20 column which Lore currently doesn't have. */
@media (min-width: 761px) and (max-width: 1366px) {
    .lore-foundry-list {
        gap: 9px !important;
    }

    .lore-foundry-row {
        min-height: 78px !important;
        grid-template-columns:
            72px
            minmax(220px, 1fr)
            82px
            150px
            54px !important;
        grid-template-areas: "total main item rank action" !important;
        overflow: hidden !important;
    }

    .lore-foundry-row > .skill-main {
        min-width: 0;
        padding: 10px 12px !important;
    }

    .lore-foundry-row .skill-name-line strong {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.12;
    }

    .lore-foundry-row .skill-breakdown {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.3;
    }

    .lore-foundry-row > .skill-item-bonus-wrap {
        padding: 7px 6px !important;
        justify-items: center !important;
    }

    .lore-foundry-row > .skill-rank-select {
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        min-height: 44px !important;
        margin: 0 !important;
        font-size: .78rem !important;
    }

    .lore-foundry-row > .lore-action-cell {
        position: static !important;
        width: 54px !important;
        min-width: 54px !important;
        height: 100% !important;
        display: grid !important;
        place-items: center !important;
        border-left: 1px solid rgba(64,53,42,.45) !important;
    }

    .lore-foundry-row .lore-delete-button,
    .lore-foundry-row .lore-locked-mark {
        position: static !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
    }
}

/* Phone: purpose-built three-level Lore card.
   Top: total + name
   Middle: proficiency
   Bottom: item bonus + delete/lock
*/
@media (max-width: 760px) {
    .skills-lore-head {
        margin-top: 26px !important;
        padding-top: 20px !important;
        margin-bottom: 12px !important;
    }

    .skills-lore-head h2 {
        font-size: 1.7rem !important;
        line-height: 1.05 !important;
    }

    .lore-foundry-list {
        gap: 10px !important;
    }

    .lore-foundry-row {
        position: relative;
        min-height: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 62px minmax(0, 1fr) 58px !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
            "total main main"
            "rank rank rank"
            "item item action" !important;
        align-items: stretch !important;
        overflow: hidden !important;
        border-radius: 11px !important;
    }

    .lore-foundry-row > .skill-total {
        grid-area: total !important;
        min-height: 82px !important;
        height: auto !important;
        border-right: 1px solid #40352a !important;
        border-bottom: 1px solid #40352a !important;
        font-size: 1.48rem !important;
    }

    .lore-foundry-row > .skill-main {
        grid-area: main !important;
        min-width: 0 !important;
        min-height: 82px !important;
        padding: 12px 12px !important;
        border-bottom: 1px solid #40352a !important;
        display: grid !important;
        align-content: center !important;
    }

    .lore-foundry-row .skill-name-line {
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .lore-foundry-row .skill-name-line strong {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
        font-size: 1.02rem !important;
        line-height: 1.12 !important;
    }

    .lore-foundry-row .skill-ability {
        flex: 0 0 auto;
        font-size: .64rem !important;
        padding: 3px 7px !important;
    }

    .lore-foundry-row .skill-source-dot {
        flex: 0 0 auto;
    }

    .lore-foundry-row .skill-breakdown {
        margin-top: 6px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: .66rem !important;
        line-height: 1.35 !important;
    }

    .lore-foundry-row > .skill-rank-select {
        grid-area: rank !important;
        position: static !important;
        justify-self: stretch !important;
        align-self: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 48px !important;
        margin: 9px 10px !important;
        padding: 0 36px 0 12px !important;
        font-size: .84rem !important;
    }

    .lore-foundry-row > .skill-item-bonus-wrap {
        grid-area: item !important;
        min-height: 66px !important;
        padding: 8px 10px !important;
        border-top: 1px solid #302922 !important;
        display: grid !important;
        grid-template-columns: auto 68px !important;
        align-items: center !important;
        justify-content: start !important;
        justify-items: start !important;
        gap: 9px !important;
    }

    .lore-foundry-row > .skill-item-bonus-wrap label {
        font-size: .62rem !important;
    }

    .lore-foundry-row .skill-item-input {
        width: 68px !important;
        min-height: 44px !important;
        font-size: 1rem !important;
    }

    .lore-foundry-row > .lore-action-cell {
        grid-area: action !important;
        position: static !important;
        width: 58px !important;
        min-width: 58px !important;
        height: auto !important;
        min-height: 66px !important;
        border-top: 1px solid #302922 !important;
        border-left: 1px solid #40352a !important;
        display: grid !important;
        place-items: center !important;
    }

    .lore-foundry-row .lore-delete-button,
    .lore-foundry-row .lore-locked-mark {
        position: static !important;
        right: auto !important;
        bottom: auto !important;
        display: grid !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
    }
}

/* Very narrow phones: reduce header typography without changing structure. */
@media (max-width: 390px) {
    .lore-foundry-row {
        grid-template-columns: 58px minmax(0, 1fr) 54px !important;
    }

    .lore-foundry-row .skill-name-line strong {
        font-size: .94rem !important;
    }

    .lore-foundry-row > .lore-action-cell {
        width: 54px !important;
        min-width: 54px !important;
    }
}


/* =========================================================
   Stage 10.2.6 — mobile "Ещё" sheet close button
   ========================================================= */

@media (max-width: 760px) {
    .mobile-sheet-head {
        position: relative;
        min-height: 58px;
        padding:
            6px
            58px
            10px
            2px !important;
        align-items: center !important;
    }

    .mobile-sheet-head strong {
        margin: 0 !important;
        min-width: 0;
        font-size: 1.45rem !important;
        line-height: 1.05;
    }

    .mobile-sheet-head button[data-mobile-sheet-close] {
        position: absolute !important;
        top: 4px !important;
        right: 2px !important;
        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #5a493a !important;
        border-radius: 10px !important;
        background: #12100e !important;
        color: #d8cabd !important;
        display: grid !important;
        place-items: center !important;
        font-family: Arial, sans-serif !important;
        font-size: 0 !important;
        line-height: 1 !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        transform: none !important;
        overflow: hidden;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Draw the X ourselves, so iOS/Safari doesn't render a broken glyph. */
    .mobile-sheet-head button[data-mobile-sheet-close]::before,
    .mobile-sheet-head button[data-mobile-sheet-close]::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 3px;
        border-radius: 999px;
        background: currentColor;
        left: 50%;
        top: 50%;
        transform-origin: center;
    }

    .mobile-sheet-head button[data-mobile-sheet-close]::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .mobile-sheet-head button[data-mobile-sheet-close]::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .mobile-sheet-head button[data-mobile-sheet-close]:active {
        background: #201912 !important;
        border-color: #9a6935 !important;
        color: #f0b05b !important;
        transform: scale(.96) !important;
    }

    /* Keep the sheet inside viewport and away from browser/home bars. */
    .mobile-bottom-sheet {
        max-height: min(82dvh, 680px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    }

    .mobile-more-grid {
        padding-bottom: 4px;
    }
}


/* =========================================================
   Stage 10.3.0 — combat turn / action economy
   ========================================================= */
.combat-turn-bar {
    position: fixed; z-index: 72; left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: min(680px, calc(100vw - 40px)); min-height: 76px;
    display: grid; grid-template-columns: auto auto 1fr;
    align-items: center; gap: 18px; padding: 10px 12px 10px 16px;
    border: 1px solid #5b4328; border-radius: 16px;
    background: rgba(20,16,12,.97);
    box-shadow: 0 12px 36px rgba(0,0,0,.48);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.combat-turn-title { display:flex; flex-direction:column; line-height:1; white-space:nowrap; }
.combat-turn-title strong { margin-top:5px; color:#f3eadf; font-family:Georgia,serif; font-size:20px; }
.combat-turn-kicker { color:#efad55; font-size:10px; font-weight:900; letter-spacing:.16em; }
.combat-turn-actions { display:flex; align-items:center; gap:7px; }
.turn-pip {
    width:44px; height:44px; min-width:44px; min-height:44px; padding:0;
    display:grid; place-items:center; border:1px solid #8d5b21; border-radius:10px;
    background:linear-gradient(180deg,#2b1e11,#18120d); color:#f0a947;
    font:700 24px/1 Georgia,serif; cursor:pointer; touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}
.turn-pip.reaction-pip { border-radius:50%; color:#f2dfc8; }
.turn-pip.is-spent { opacity:.30; filter:grayscale(.75); transform:scale(.92); }
.turn-separator { width:1px; height:30px; margin:0 2px; background:#493827; }
.combat-turn-meta { min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:12px; }
#combatTurnText { color:#a99c90; font-size:12px; white-space:nowrap; }
.combat-turn-reset {
    min-height:44px; padding:0 15px; border:1px solid #684821; border-radius:10px;
    background:#211810; color:#efad55; font-weight:800; white-space:nowrap;
    cursor:pointer; touch-action:manipulation;
}
.combat-turn-reset:active,.turn-pip:active { transform:scale(.96); }
.combat-turn-shake { animation:combatTurnShake .25s linear 1; }
@keyframes combatTurnShake {
    0%,100% { margin-left:0; } 25% { margin-left:-7px; } 75% { margin-left:7px; }
}
@media (min-width:761px) and (max-width:1180px) {
    .combat-turn-bar { width:min(610px,calc(100vw - 28px)); gap:12px; bottom:14px; }
    #combatTurnText { display:none; }
}
@media (max-width:760px) {
    .combat-turn-bar {
        left:10px; right:10px; bottom:calc(78px + env(safe-area-inset-bottom));
        transform:none; width:auto; min-height:66px;
        grid-template-columns:auto 1fr auto; gap:8px; padding:8px 10px; border-radius:14px;
    }
    .combat-turn-kicker,#combatTurnText { display:none; }
    .combat-turn-title strong { font-size:15px; }
    .combat-turn-actions { justify-content:center; gap:5px; }
    .turn-pip { width:44px; height:44px; min-width:44px; min-height:44px; font-size:22px; }
    .turn-separator { height:28px; margin:0; }
    .combat-turn-reset { width:46px; min-width:46px; height:46px; min-height:46px; padding:0; font-size:24px; }
    .combat-turn-reset span { display:none; }
}
@media (max-width:390px) {
    .combat-turn-bar { left:6px; right:6px; gap:5px; padding:7px; }
    .combat-turn-title { display:none; }
    .combat-turn-bar { grid-template-columns:1fr auto; }
    .turn-pip { width:42px; height:42px; min-width:42px; min-height:42px; }
    .combat-turn-reset { width:44px; min-width:44px; height:44px; min-height:44px; }
}


/* =========================================================
   Stage 10.3.1 — roll result focus + combat turn refinements
   ========================================================= */
.roll-result-highlight {
    position: relative;
    z-index: 1;
    border-color: #d8943f !important;
    box-shadow:
        0 0 0 1px rgba(239,173,85,.72),
        0 0 18px rgba(239,173,85,.28) !important;
    animation: rollResultPulse .72s ease-out 2;
}
@keyframes rollResultPulse {
    0%   { background-color: rgba(239,173,85,.20); }
    100% { background-color: transparent; }
}

/* On phones the right history panel isn't the primary surface:
   don't force page movement when a result is highlighted. */
@media (max-width:760px) {
    .roll-result-highlight {
        animation-duration: .55s;
    }
}


/* =========================================================
   Stage 10.3.2 — damage roll dialog
   ========================================================= */
.damage-roll-modal[hidden] { display:none !important; }
.damage-roll-modal { position:fixed; inset:0; z-index:180; display:grid; place-items:center; padding:20px; }
.damage-roll-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.damage-roll-dialog {
    position:relative; width:min(650px,100%); max-height:min(820px,calc(100dvh - 40px));
    overflow:auto; overscroll-behavior:contain; border:1px solid #60472c; border-radius:18px;
    background:#17130f; color:#eee4d8; box-shadow:0 24px 70px rgba(0,0,0,.65);
}
.damage-roll-head { display:flex; justify-content:space-between; gap:20px; padding:22px 22px 16px; border-bottom:1px solid #3c3025; }
.damage-roll-head h2 { margin:4px 0 4px; font:700 30px/1.05 Georgia,serif; }
.damage-roll-head p { margin:0; color:#a99d91; }
.damage-roll-kicker { color:#efad55; font-size:11px; font-weight:900; letter-spacing:.16em; }
.damage-roll-close,.damage-extra-remove {
    position:relative; flex:0 0 auto; width:44px; height:44px; padding:0;
    border:1px solid #594535; border-radius:10px; background:#110f0d; color:#d8cabd;
}
.damage-roll-close::before,.damage-roll-close::after,
.damage-extra-remove::before,.damage-extra-remove::after {
    content:""; position:absolute; left:50%; top:50%; width:18px; height:2px;
    border-radius:2px; background:currentColor;
}
.damage-roll-close::before,.damage-extra-remove::before { transform:translate(-50%,-50%) rotate(45deg); }
.damage-roll-close::after,.damage-extra-remove::after { transform:translate(-50%,-50%) rotate(-45deg); }
.damage-roll-body { padding:18px 22px; display:grid; gap:18px; }
.damage-crit-toggle { display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid #574126; border-radius:12px; background:#21180f; }
.damage-crit-toggle input { width:22px; height:22px; flex:0 0 auto; accent-color:#d9923d; }
.damage-crit-toggle span { display:grid; gap:4px; }
.damage-crit-toggle small,.damage-extra-head small { color:#9e9287; }
.damage-extra-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.damage-extra-head > div { display:grid; gap:3px; }
.damage-add-extra { min-height:42px; padding:0 14px; border:1px solid #76501f; border-radius:9px; background:#21180f; color:#efad55; font-weight:800; }
.damage-extra-list { display:grid; gap:9px; }
.damage-extra-row { display:grid; grid-template-columns:minmax(0,1fr) 150px 44px; gap:8px; align-items:center; }
.damage-extra-row input,.damage-number-stepper input {
    min-width:0; height:44px; border:1px solid #4d4035; border-radius:9px; background:#100e0c; color:#f0e7dd; padding:0 12px; font-size:15px;
}
.damage-flat-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:4px; }
.damage-number-stepper { display:grid; grid-template-columns:44px 82px 44px; gap:5px; }
.damage-number-stepper button { height:44px; border:1px solid #5c452d; border-radius:9px; background:#1e1711; color:#efad55; font-size:22px; }
.damage-number-stepper input { text-align:center; font-weight:800; font-size:18px; }
.damage-summary { display:flex; justify-content:space-between; gap:18px; padding:14px; border:1px solid #493a2c; border-radius:11px; background:#100e0c; }
.damage-summary span { color:#9e9287; }
.damage-summary strong { color:#efad55; text-align:right; }
.damage-roll-actions { position:sticky; bottom:0; display:grid; grid-template-columns:1fr 1.35fr; gap:10px; padding:14px 22px max(14px,env(safe-area-inset-bottom)); border-top:1px solid #3c3025; background:rgba(23,19,15,.98); }
.damage-roll-actions button { min-height:50px; border-radius:10px; font-size:16px; font-weight:900; }
.damage-cancel { border:1px solid #55483d; background:#17130f; color:#d8cec4; }
.damage-submit { border:1px solid #d69747; background:linear-gradient(#efb462,#d8923e); color:#1b1209; }
.damage-modal-open { overflow:hidden; }

@media (max-width:760px) {
    .damage-roll-modal { padding:10px; align-items:end; }
    .damage-roll-dialog { width:100%; max-height:calc(92dvh - env(safe-area-inset-bottom)); border-radius:18px 18px 0 0; }
    .damage-roll-head { padding:18px 16px 14px; }
    .damage-roll-head h2 { font-size:25px; }
    .damage-roll-body { padding:15px 16px; gap:15px; }
    .damage-extra-head { align-items:flex-end; }
    .damage-extra-row { grid-template-columns:minmax(0,1fr) 112px 44px; }
    .damage-flat-row { align-items:flex-start; flex-direction:column; }
    .damage-number-stepper { width:100%; grid-template-columns:48px 1fr 48px; }
    .damage-roll-actions { padding-left:16px; padding-right:16px; }
}
@media (max-width:390px) {
    .damage-extra-row { grid-template-columns:1fr 44px; }
    .damage-extra-formula { grid-column:1; }
    .damage-extra-remove { grid-column:2; grid-row:1 / span 2; }
}

/* Stage 10.4.0 — item compendium foundation */
.item-compendium-picker{margin:0 0 16px;padding:14px;border:1px solid #594329;border-radius:12px;background:#15110e}
.item-compendium-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.item-compendium-head>div{display:grid;gap:3px}.item-compendium-head span{font-size:10px;font-weight:900;letter-spacing:.14em;color:#d99543}
.item-compendium-head strong{font-family:Georgia,serif;font-size:18px}.item-compendium-clear{min-height:38px;border:1px solid #4e4034;border-radius:8px;background:#110f0d;color:#bcae9f}
.item-compendium-search{width:100%;min-height:46px;border:1px solid #514235;border-radius:9px;background:#0e0d0b;color:#eee4da;padding:0 12px;font-size:16px}
.item-compendium-results{display:grid;gap:5px;margin-top:7px}.item-compendium-results button{min-height:46px;padding:7px 10px;border:1px solid #40362e;border-radius:8px;background:#181410;color:#eee1d4;text-align:left;display:flex;justify-content:space-between;align-items:center}
.item-compendium-results small{color:#95887b;text-transform:uppercase}.damage-rune-box{padding:13px;border:1px solid #654923;border-radius:11px;background:#20170e}.damage-rune-box>div:first-child{display:grid;gap:3px}.damage-rune-box small{color:#a09284}.damage-rune-list{display:grid;gap:6px;margin-top:9px}
@media(max-width:760px){.item-compendium-picker{padding:11px}.item-compendium-head strong{font-size:16px}}


/* Stage 10.4.1 — definitive tablet skills layout */
@media (min-width: 761px) and (max-width: 1366px) {
    [data-sheet-pane="skills"] .skills-core-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    [data-sheet-pane="skills"] .skill-foundry-row:not(.lore-foundry-row) {
        display: grid !important;
        grid-template-columns: 76px minmax(260px, 1fr) 92px 56px 160px !important;
        grid-template-areas: "total main item roll rank" !important;
        min-height: 76px !important;
        overflow: hidden !important;
        align-items: stretch !important;
    }

    [data-sheet-pane="skills"] .skill-foundry-row:not(.lore-foundry-row) > .skill-total {
        grid-area: total !important;
    }
    [data-sheet-pane="skills"] .skill-foundry-row:not(.lore-foundry-row) > .skill-main {
        grid-area: main !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
    }
    [data-sheet-pane="skills"] .skill-foundry-row:not(.lore-foundry-row) > .skill-item-bonus-wrap {
        grid-area: item !important;
        min-width: 0 !important;
        padding: 7px 6px !important;
        justify-items: center !important;
    }
    [data-sheet-pane="skills"] .skill-foundry-row:not(.lore-foundry-row) > .skill-roll-control {
        grid-area: roll !important;
        min-width: 56px !important;
        padding: 0 5px !important;
        display: grid !important;
        place-items: center !important;
    }
    [data-sheet-pane="skills"] .skill-foundry-row:not(.lore-foundry-row) > .skill-rank-select {
        grid-area: rank !important;
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        min-height: 44px !important;
        margin: auto 5px auto auto !important;
        font-size: .78rem !important;
    }

    [data-sheet-pane="skills"] .skill-name-line strong {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    [data-sheet-pane="skills"] .skill-breakdown {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}


/* Stage 10.4.1 — portrait cropper tablet/touch ergonomics */
.portrait-zoom-control {
    min-width: 0;
    display: grid;
    grid-template-columns: 44px minmax(120px, 1fr) 44px;
    gap: 8px;
    align-items: center;
}
.portrait-zoom-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid #664820;
    border-radius: 9px;
    background: #17120e;
    color: #efad55;
    font-size: 22px;
    font-weight: 900;
}
#portrait-zoom {
    width: 100%;
    min-width: 0;
    pointer-events: auto !important;
    touch-action: pan-x !important;
}
#portrait-crop-stage {
    touch-action: none !important;
    user-select: none;
    -webkit-user-select: none;
}

@media (min-width: 761px) and (max-width: 1366px) {
    #portrait-crop-modal {
        padding: 8px !important;
        align-items: center !important;
    }
    .portrait-crop-modal-card {
        width: min(700px, calc(100vw - 24px)) !important;
        max-height: calc(100dvh - 16px) !important;
        padding: 16px 18px 0 !important;
        overflow-y: auto !important;
    }
    .portrait-crop-head h2 {
        font-size: 1.55rem !important;
        margin-bottom: 4px !important;
    }
    .portrait-crop-head .muted {
        margin: 0 !important;
        font-size: .72rem !important;
        line-height: 1.3 !important;
    }
    .portrait-crop-stage {
        width: min(330px, calc((100dvh - 260px) * .75)) !important;
        max-width: 100% !important;
        margin-top: 10px !important;
        margin-bottom: 8px !important;
    }
    .portrait-crop-controls {
        margin-top: 6px !important;
        display: grid !important;
        grid-template-columns: auto minmax(0,1fr) auto !important;
        gap: 10px !important;
        align-items: center !important;
    }
    .portrait-crop-controls > label {
        margin: 0 !important;
    }
    .portrait-crop-help {
        margin-top: 5px !important;
        font-size: .62rem !important;
    }
    .portrait-crop-modal-card > .modal-actions {
        margin-top: 8px !important;
        padding-top: 9px !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
}


/* =========================================================
   Stage 10.4.2 — tablet landscape skills + counter sync
   ========================================================= */

/* Keep the Actions-tab counter and floating counter visually consistent. */
.turn-action-pip.spent,
.turn-reaction-pip.spent,
.turn-pip.is-spent {
    opacity: .30 !important;
    filter: grayscale(.75) !important;
}

/* iPad/tablet landscape can report a viewport wider than the old 1366px
   breakpoint, especially in "desktop site" mode. Keep the skill sheet in
   one readable column through 1600px. */
@media (min-width: 761px) and (max-width: 1600px) {
    [data-sheet-pane="skills"] .skills-core-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    [data-sheet-pane="skills"] .skill-foundry-row:not(.lore-foundry-row) {
        display: grid !important;
        grid-template-columns:
            76px
            minmax(230px, 1fr)
            88px
            58px
            154px !important;
        grid-template-areas: "total main item roll rank" !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 76px !important;
        overflow: hidden !important;
        align-items: stretch !important;
    }

    [data-sheet-pane="skills"] .skill-foundry-row:not(.lore-foundry-row) > .skill-total {
        grid-area: total !important;
        width: auto !important;
        min-width: 0 !important;
    }

    [data-sheet-pane="skills"] .skill-foundry-row:not(.lore-foundry-row) > .skill-main {
        grid-area: main !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 10px 12px !important;
    }

    [data-sheet-pane="skills"] .skill-foundry-row:not(.lore-foundry-row) > .skill-item-bonus-wrap {
        grid-area: item !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 7px 5px !important;
        display: grid !important;
        justify-items: center !important;
        align-content: center !important;
    }

    [data-sheet-pane="skills"] .skill-foundry-row:not(.lore-foundry-row) > .skill-roll-control {
        grid-area: roll !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 5px !important;
        display: grid !important;
        place-items: center !important;
    }

    [data-sheet-pane="skills"] .skill-foundry-row:not(.lore-foundry-row) > .skill-rank-select {
        grid-area: rank !important;
        position: static !important;
        width: 144px !important;
        min-width: 144px !important;
        max-width: 144px !important;
        min-height: 44px !important;
        margin: auto 5px auto auto !important;
        font-size: .76rem !important;
    }

    [data-sheet-pane="skills"] .skill-name-line,
    [data-sheet-pane="skills"] .skill-breakdown {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    [data-sheet-pane="skills"] .skill-name-line strong,
    [data-sheet-pane="skills"] .skill-breakdown {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* If landscape width is available but center content is still constrained,
   move rank below rather than allowing overlap. */
@media (min-width: 761px) and (max-width: 1050px) {
    [data-sheet-pane="skills"] .skill-foundry-row:not(.lore-foundry-row) {
        grid-template-columns: 70px minmax(180px, 1fr) 84px 54px !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "total main item roll"
            "rank rank rank rank" !important;
    }

    [data-sheet-pane="skills"] .skill-foundry-row:not(.lore-foundry-row) > .skill-rank-select {
        width: calc(100% - 16px) !important;
        max-width: none !important;
        margin: 7px 8px !important;
        justify-self: stretch !important;
    }
}


/* =========================================================
   Stage 10.4.4 — layout recovery + initiative/perception cards
   ========================================================= */

/* Initiative: explicit grid prevents +29 from entering select area. */
.initiative-standalone-row {
    display: grid !important;
    grid-template-columns: 28px minmax(78px, auto) 58px minmax(118px, 1fr) 48px !important;
    gap: 8px !important;
    align-items: center !important;
}

.initiative-standalone-icon {
    grid-column: 1 !important;
}

.initiative-standalone-label {
    grid-column: 2 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

.initiative-standalone-value {
    grid-column: 3 !important;
    min-width: 50px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.initiative-source-standalone {
    grid-column: 4 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.standalone-d20-button {
    grid-column: 5 !important;
    justify-self: end !important;
}

/* Remove only the "Защита" title visually; keep its edit button available. */
.compact-defense-head {
    min-height: 42px !important;
    justify-content: flex-end !important;
    margin-bottom: 7px !important;
}

.compact-defense-head .foundry-side-title {
    display: none !important;
}

/* Perception becomes its own obvious field. */
.defense-perception-row {
    margin: 0 0 10px !important;
    padding: 10px !important;
    border: 1px solid #4a3b2f !important;
    border-radius: 10px !important;
    background: #11100e !important;
}

/* Saves are visually independent below Perception. */
.compact-saves-title {
    margin: 0 !important;
    padding: 9px 10px 7px !important;
    border: 1px solid #4a3b2f !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #15120f !important;
}

.compact-save-grid {
    margin-top: 0 !important;
    border: 1px solid #4a3b2f !important;
    border-radius: 0 0 10px 10px !important;
    background: #11100e !important;
}

/* A previous experimental separation could cause sidebar/main flow corruption.
   Force the sheet shell back to its intended desktop structure. */
@media (min-width: 1367px) {
    .foundry-sheet-shell {
        display: grid !important;
        grid-template-columns: var(--sheet-sidebar-width, 390px) minmax(0, 1fr) var(--roll-history-width, 260px) !important;
        align-items: start !important;
    }

    .foundry-sidebar {
        grid-column: 1 !important;
    }

    .foundry-main-column-v2 {
        grid-column: 2 !important;
        min-width: 0 !important;
    }

    .roll-history-rail {
        grid-column: 3 !important;
    }
}

/* Tablet / compact desktop initiative */
@media (min-width: 761px) and (max-width: 1366px) {
    .initiative-standalone-row {
        grid-template-columns: 26px minmax(72px, auto) 54px minmax(110px, 1fr) 46px !important;
        gap: 6px !important;
    }

    .initiative-standalone-label {
        font-size: .82rem !important;
    }

    .initiative-standalone-value {
        font-size: 1.2rem !important;
    }
}

/* Phone initiative can use two rows if width is tight. */
@media (max-width: 520px) {
    .initiative-standalone-row {
        grid-template-columns: 26px minmax(80px, 1fr) 58px 46px !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "icon label value die"
            "select select select select" !important;
    }

    .initiative-standalone-icon { grid-area: icon !important; }
    .initiative-standalone-label { grid-area: label !important; }
    .initiative-standalone-value { grid-area: value !important; }
    .initiative-source-standalone { grid-area: select !important; }
    .standalone-d20-button { grid-area: die !important; }

    .initiative-source-standalone {
        min-height: 44px !important;
    }
}


/* =========================================================
   Stage 10.4.5 — inventory compendium + damage dialog polish
   ========================================================= */

/* The compendium now belongs to the scrollable content. */
#inventory-add-modal .inventory-modal-card {
    overflow: hidden !important;
}

#inventory-add-form {
    min-height: 0 !important;
}

#inventory-add-modal .inventory-modal-scroll {
    padding-top: 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#inventory-add-modal .item-compendium-picker {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 0 14px !important;
    padding: 12px !important;
    border: 1px solid #594329 !important;
    border-radius: 11px !important;
    background: #15110e !important;
    z-index: 1 !important;
}

.item-compendium-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 9px;
}

.item-compendium-filters button {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid #4b3d31;
    border-radius: 999px;
    background: #100e0c;
    color: #a99c8f;
    font-size: .72rem;
    font-weight: 800;
}

.item-compendium-filters button.active {
    border-color: #9b672f;
    background: #24180e;
    color: #efad55;
}

.item-compendium-results {
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.item-compendium-results button {
    width: 100%;
}

.item-compendium-empty {
    padding: 12px;
    border: 1px dashed #40352c;
    border-radius: 8px;
    color: #897d72;
    text-align: center;
}

/* Keep the first general item fields in a clean grid after picking an item. */
#inventory-add-modal .inventory-form-grid {
    align-items: end !important;
}

#inventory-add-modal .inventory-form-grid > label,
#inventory-add-modal .weapon-editor-grid > label {
    min-width: 0 !important;
}

#inventory-add-modal input,
#inventory-add-modal select {
    max-width: 100% !important;
}

/* Damage critical checkbox: site-native square instead of browser checkbox. */
.damage-crit-toggle {
    position: relative;
    display: grid !important;
    grid-template-columns: 24px minmax(0,1fr) !important;
    grid-template-areas: "check copy" !important;
    column-gap: 12px !important;
    align-items: center !important;
    cursor: pointer;
}

.damage-crit-toggle > input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.damage-checkbox-visual {
    grid-area: check;
    position: relative;
    width: 22px;
    height: 22px;
    border: 1px solid #775127;
    border-radius: 5px;
    background: #100e0c;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.18);
}

.damage-crit-toggle > input:checked + .damage-checkbox-visual {
    border-color: #d89745;
    background: #d89745;
}

.damage-crit-toggle > input:checked + .damage-checkbox-visual::before,
.damage-crit-toggle > input:checked + .damage-checkbox-visual::after {
    content: "";
    position: absolute;
    height: 3px;
    border-radius: 2px;
    background: #17110b;
    transform-origin: left center;
}

.damage-crit-toggle > input:checked + .damage-checkbox-visual::before {
    width: 7px;
    left: 4px;
    top: 11px;
    transform: rotate(45deg);
}

.damage-crit-toggle > input:checked + .damage-checkbox-visual::after {
    width: 12px;
    left: 8px;
    top: 14px;
    transform: rotate(-48deg);
}

.damage-crit-toggle > input:focus-visible + .damage-checkbox-visual {
    outline: 2px solid rgba(239,173,85,.5);
    outline-offset: 2px;
}

.damage-crit-copy {
    grid-area: copy;
    min-width: 0;
    display: grid !important;
    gap: 3px;
}

.damage-crit-copy strong,
.damage-crit-copy small {
    line-height: 1.25;
}

/* Center button content consistently. */
.damage-add-extra,
.damage-number-stepper button,
.damage-cancel,
.damage-submit,
.damage-roll-close,
.damage-extra-remove {
    display: inline-grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.damage-add-extra {
    min-width: 112px;
}

.damage-number-stepper {
    align-items: center !important;
}

.damage-number-stepper input {
    height: 44px !important;
    padding: 0 !important;
    display: block;
    line-height: 44px;
    -moz-appearance: textfield;
}

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

.damage-summary {
    min-height: 48px;
    align-items: center !important;
}

.damage-roll-actions {
    align-items: stretch !important;
}

.damage-roll-actions button {
    display: grid !important;
    place-items: center !important;
    padding: 0 16px !important;
}

@media (max-width:760px) {
    #inventory-add-modal .item-compendium-picker {
        padding: 10px !important;
    }

    .item-compendium-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .item-compendium-filters button {
        flex: 0 0 auto;
    }

    .damage-crit-toggle {
        grid-template-columns: 24px minmax(0,1fr) !important;
        padding: 13px !important;
    }

    .damage-extra-head {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) auto;
        align-items: center !important;
    }
}


/* =========================================================
   Stage 10.4.6 — character incoming damage dialog
   ========================================================= */

.incoming-damage-modal-card {
    width: min(520px, calc(100vw - 28px)) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.incoming-damage-heading {
    min-height: 82px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #3f3329;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.incoming-damage-heading h2 {
    margin: 4px 0 0;
    font-family: Georgia, serif;
    font-size: 1.8rem;
    line-height: 1;
}

.incoming-damage-close {
    position: relative;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid #594535;
    border-radius: 10px;
    background: #110f0d;
    color: #d8cabd;
}

.incoming-damage-close::before,
.incoming-damage-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.incoming-damage-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.incoming-damage-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.incoming-damage-help {
    margin: 0 !important;
    padding: 14px 18px 0 !important;
    line-height: 1.45 !important;
}

#incoming-damage-form {
    padding: 16px 18px 0;
}

.incoming-damage-field {
    display: grid !important;
    gap: 9px !important;
    color: #d9cdc1;
    font-weight: 800;
}

.incoming-damage-stepper {
    width: 100%;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    gap: 8px;
    align-items: stretch;
}

.incoming-damage-stepper button {
    min-width: 50px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    border: 1px solid #715027;
    border-radius: 10px;
    background: #18120e;
    color: #efad55;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
}

.incoming-damage-stepper input {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    padding: 0 10px !important;
    border: 1px solid #5b4837 !important;
    border-radius: 10px !important;
    background: #0f0e0c !important;
    color: #f4eadf !important;
    -webkit-text-fill-color: #f4eadf !important;
    text-align: center !important;
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    line-height: 52px !important;
    opacity: 1 !important;
    appearance: textfield;
    -moz-appearance: textfield;
}

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

.incoming-nonlethal-toggle {
    position: relative;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #493b30;
    border-radius: 10px;
    background: #15110e;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    cursor: pointer;
}

.incoming-nonlethal-toggle > input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.incoming-checkbox-visual {
    position: relative;
    width: 22px;
    height: 22px;
    border: 1px solid #775127;
    border-radius: 5px;
    background: #100e0c;
}

.incoming-nonlethal-toggle > input:checked + .incoming-checkbox-visual {
    border-color: #d89745;
    background: #d89745;
}

.incoming-nonlethal-toggle > input:checked + .incoming-checkbox-visual::before,
.incoming-nonlethal-toggle > input:checked + .incoming-checkbox-visual::after {
    content: "";
    position: absolute;
    height: 3px;
    border-radius: 2px;
    background: #17110b;
    transform-origin: left center;
}

.incoming-nonlethal-toggle > input:checked + .incoming-checkbox-visual::before {
    width: 7px;
    left: 4px;
    top: 11px;
    transform: rotate(45deg);
}

.incoming-nonlethal-toggle > input:checked + .incoming-checkbox-visual::after {
    width: 12px;
    left: 8px;
    top: 14px;
    transform: rotate(-48deg);
}

.incoming-checkbox-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.incoming-checkbox-copy small {
    color: #95887d;
    font-weight: 500;
    line-height: 1.35;
}

.incoming-damage-actions {
    margin: 16px -18px 0 !important;
    padding: 14px 18px max(14px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #3f3329;
    display: grid !important;
    grid-template-columns: 1fr 1.25fr !important;
    gap: 10px !important;
}

.incoming-damage-actions button {
    min-height: 50px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 14px !important;
    line-height: 1 !important;
}

.incoming-damage-submit {
    border-color: #8e392f !important;
    background: linear-gradient(180deg, #6b2823, #4c1d19) !important;
    color: #f7ddd8 !important;
}

@media (min-width: 761px) and (max-width: 1366px) {
    .incoming-damage-modal-card {
        width: min(500px, calc(100vw - 32px)) !important;
        max-height: calc(100dvh - 24px) !important;
    }

    .incoming-damage-heading {
        min-height: 72px;
        padding: 15px 16px 12px;
    }

    .incoming-damage-heading h2 {
        font-size: 1.55rem;
    }

    .incoming-damage-help {
        padding: 12px 16px 0 !important;
        font-size: .82rem !important;
    }

    #incoming-damage-form {
        padding: 14px 16px 0;
    }

    .incoming-damage-actions {
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 760px) {
    .incoming-damage-modal-card {
        width: 100% !important;
        max-height: calc(92dvh - env(safe-area-inset-bottom)) !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .incoming-damage-stepper {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
    }

    .incoming-damage-actions {
        grid-template-columns: 1fr 1.25fr !important;
    }
}


/* =========================================================
   Stage 10.4.7 — mobile weapon damage dialog viewport fix
   ========================================================= */

/* The weapon damage dialog must sit ABOVE the mobile navigation. */
.damage-roll-modal {
    z-index: 3200 !important;
}

/* Phone: center the dialog inside the actual visual viewport instead of
   anchoring it to the bottom, where the app navigation/browser UI can cover it. */
@media (max-width: 760px) {
    .damage-roll-modal {
        inset: 0 !important;
        padding:
            max(8px, env(safe-area-inset-top))
            8px
            max(8px, env(safe-area-inset-bottom)) !important;
        display: grid !important;
        place-items: center !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    .damage-roll-dialog {
        width: min(100%, 520px) !important;
        height: auto !important;
        max-height: calc(
            100dvh
            - max(16px, env(safe-area-inset-top))
            - max(16px, env(safe-area-inset-bottom))
        ) !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }

    .damage-roll-head {
        padding: 13px 14px 11px !important;
        gap: 10px !important;
    }

    .damage-roll-head h2 {
        margin: 3px 0 !important;
        font-size: 1.55rem !important;
        line-height: 1 !important;
    }

    .damage-roll-head p {
        font-size: .78rem !important;
        line-height: 1.25 !important;
    }

    .damage-roll-close {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    /* Only the middle part scrolls. Header and action buttons always stay visible. */
    .damage-roll-body {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 12px 14px !important;
        gap: 12px !important;
    }

    .damage-crit-toggle {
        padding: 10px !important;
        gap: 9px !important;
    }

    .damage-checkbox-visual {
        width: 21px !important;
        height: 21px !important;
    }

    .damage-crit-copy strong {
        font-size: .88rem !important;
    }

    .damage-crit-copy small {
        font-size: .7rem !important;
        line-height: 1.25 !important;
    }

    .damage-extra-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .damage-extra-head strong {
        font-size: .9rem !important;
    }

    .damage-extra-head small {
        font-size: .7rem !important;
        line-height: 1.3 !important;
    }

    .damage-add-extra {
        min-width: 96px !important;
        min-height: 40px !important;
        padding: 0 10px !important;
        font-size: .76rem !important;
    }

    .damage-flat-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .damage-flat-row > span {
        font-size: .88rem !important;
        font-weight: 800;
    }

    .damage-number-stepper {
        width: 100% !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        gap: 6px !important;
    }

    .damage-number-stepper button,
    .damage-number-stepper input {
        height: 44px !important;
        min-height: 44px !important;
    }

    .damage-summary {
        min-height: 44px !important;
        padding: 10px 12px !important;
        font-size: .82rem !important;
    }

    .damage-roll-actions {
        position: relative !important;
        bottom: auto !important;
        z-index: 5 !important;
        margin: 0 !important;
        padding:
            10px 14px
            max(10px, env(safe-area-inset-bottom)) !important;
        background: #17130f !important;
        grid-template-columns: .9fr 1.15fr !important;
        gap: 8px !important;
    }

    .damage-roll-actions button {
        min-height: 46px !important;
        font-size: .85rem !important;
        padding: 0 10px !important;
    }
}

/* Very short mobile browser viewport (landscape / browser chrome visible). */
@media (max-width: 760px) and (max-height: 720px) {
    .damage-roll-modal {
        padding: 5px !important;
    }

    .damage-roll-dialog {
        max-height: calc(100dvh - 10px) !important;
    }

    .damage-roll-head {
        padding: 9px 11px 8px !important;
    }

    .damage-roll-head h2 {
        font-size: 1.3rem !important;
    }

    .damage-roll-body {
        padding: 9px 11px !important;
        gap: 9px !important;
    }

    .damage-roll-actions {
        padding: 8px 11px !important;
    }

    .damage-roll-actions button {
        min-height: 42px !important;
    }
}


/* =========================================================
   Stage 10.4.8 — tablet/compact-desktop Actions layout recovery
   ========================================================= */

/*
 * The center column can be much narrower than the browser viewport because
 * sidebar + history remain visible. Therefore Actions must not assume that
 * five quick-action cards or weapon metadata can fit in one row.
 */

/* ---------- WEAPON CARDS ---------- */
.action-weapon-card,
.strike-card {
    min-width: 0 !important;
}

.action-weapon-main,
.action-weapon-name,
.action-weapon-details,
.strike-buttons,
.strike-button-wrap {
    min-width: 0 !important;
}

.action-weapon-name {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
}

.action-weapon-name > strong {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.action-weapon-details {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
}

.finesse-ability-switch {
    flex: 0 0 auto !important;
    max-width: 100% !important;
}

/* A damage button may never float on top of the weapon title/details. */
.damage-roll-button {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.damage-roll-button > span:last-child {
    min-width: 0 !important;
}

.damage-roll-button b,
.damage-roll-button small {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/*
 * Reliable compact layout for desktop windows and tablets:
 * icon + weapon data on the first row, three strikes below.
 */
@media (min-width: 761px) and (max-width: 1600px) {
    .action-weapon-card.strike-card {
        display: grid !important;
        grid-template-columns: 50px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    .action-weapon-card.strike-card > .action-weapon-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 50px !important;
        min-width: 50px !important;
        height: auto !important;
        align-self: stretch !important;
    }

    .action-weapon-card.strike-card > .action-weapon-main {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(150px, 185px) !important;
        grid-template-rows: auto auto !important;
        column-gap: 12px !important;
        row-gap: 6px !important;
        align-items: center !important;
        padding: 12px 14px !important;
        overflow: hidden !important;
    }

    .action-weapon-card.strike-card .action-weapon-name {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .action-weapon-card.strike-card .action-weapon-details {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .action-weapon-card.strike-card .damage-roll-button {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        width: 100% !important;
        min-height: 58px !important;
        align-self: center !important;
    }

    .action-weapon-card.strike-card > .strike-buttons {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        border-left: 0 !important;
        border-top: 1px solid var(--line-soft) !important;
    }

    .action-weapon-card.strike-card .strike-button-wrap {
        min-height: 104px !important;
        overflow: hidden !important;
    }

    .action-weapon-card.strike-card .strike-roll-button {
        max-width: 100% !important;
    }
}

/* If the center column is particularly narrow, damage gets its own line. */
@media (min-width: 761px) and (max-width: 1150px) {
    .action-weapon-card.strike-card > .action-weapon-main {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
    }

    .action-weapon-card.strike-card .action-weapon-name {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .action-weapon-card.strike-card .action-weapon-details {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .action-weapon-card.strike-card .damage-roll-button {
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: min(230px, 100%) !important;
        justify-self: start !important;
        min-height: 52px !important;
    }
}

/* ---------- QUICK ACTIONS ---------- */
.redesigned-basic-grid,
.basic-action-grid.redesigned-basic-grid {
    align-items: stretch !important;
}

.redesigned-action-card {
    min-width: 0 !important;
    overflow: hidden !important;
}

.redesigned-action-card .basic-action-card-top {
    min-width: 0 !important;
}

.redesigned-action-card .redesigned-copy,
.redesigned-action-card .redesigned-copy b,
.redesigned-action-card .redesigned-copy strong,
.redesigned-action-card .redesigned-copy small,
.redesigned-action-card .basic-action-footer {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
}

.redesigned-action-card .redesigned-copy b {
    line-height: 1.08 !important;
}

@media (min-width: 761px) and (max-width: 1600px) {
    .redesigned-basic-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .redesigned-action-card {
        width: 100% !important;
        min-height: 210px !important;
        padding: 12px !important;
    }

    .redesigned-action-card .basic-action-main-icon img {
        max-width: 44px !important;
        max-height: 44px !important;
        object-fit: contain !important;
    }

    .redesigned-action-card .redesigned-copy b {
        font-size: 1rem !important;
    }

    .redesigned-action-card .redesigned-copy strong {
        font-size: .78rem !important;
    }

    .redesigned-action-card .redesigned-copy small {
        font-size: .72rem !important;
        line-height: 1.4 !important;
    }
}

@media (min-width: 761px) and (max-width: 1050px) {
    .redesigned-basic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ---------- MAIN CHARACTER TABS ---------- */
/*
 * Do not squeeze six labels into the center column.
 * Keep normal readable tab sizes and make the strip horizontally scrollable.
 */
@media (min-width: 761px) and (max-width: 1600px) {
    .foundry-top-tabs {
        display: flex !important;
        grid-template-columns: none !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: #73512d #151311;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .foundry-top-tabs::-webkit-scrollbar {
        height: 7px;
    }

    .foundry-top-tabs::-webkit-scrollbar-track {
        background: #151311;
    }

    .foundry-top-tabs::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #73512d;
    }

    .foundry-top-tab {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 136px !important;
        max-width: none !important;
        min-height: 56px !important;
        padding: 0 14px !important;
        white-space: nowrap !important;
        font-size: .82rem !important;
        scroll-snap-align: center;
    }

    .foundry-top-tab .tab-icon {
        flex: 0 0 auto;
    }
}

/* Keep current tab readable even on a very tight central column. */
@media (min-width: 761px) and (max-width: 1050px) {
    .foundry-top-tab {
        min-width: 126px !important;
        padding-inline: 11px !important;
        font-size: .78rem !important;
    }
}

/* ---------- PHONE: keep established mobile cards, but harden text wrapping ---------- */
@media (max-width: 760px) {
    .action-weapon-card.strike-card,
    .action-weapon-card.strike-card > .action-weapon-main,
    .action-weapon-card.strike-card > .strike-buttons {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .redesigned-action-card * {
        max-width: 100%;
    }
}


/* =========================================================
   Stage 10.4.9 — definitive initiative layout
   ========================================================= */

/*
 * Label and numeric bonus are now one semantic/flex unit.
 * This prevents +29 from ever occupying the select's grid cell.
 */
.initiative-standalone-section {
    container-type: inline-size;
}

.initiative-standalone-row {
    display: grid !important;
    grid-template-columns:
        24px
        minmax(108px, 1fr)
        minmax(96px, 118px)
        46px !important;
    grid-template-areas: "icon summary select die" !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
}

.initiative-standalone-icon {
    grid-area: icon !important;
    width: 24px !important;
    min-width: 24px !important;
}

.initiative-summary {
    grid-area: summary !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    overflow: hidden !important;
}

.initiative-summary .initiative-standalone-label {
    position: static !important;
    inset: auto !important;
    grid-column: auto !important;
    grid-area: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: .86rem !important;
    line-height: 1.1 !important;
}

.initiative-summary .initiative-standalone-value {
    position: static !important;
    inset: auto !important;
    grid-column: auto !important;
    grid-area: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-size: 1.28rem !important;
    line-height: 1 !important;
}

.initiative-source-standalone {
    grid-area: select !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 118px !important;
    margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 28px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.standalone-d20-button {
    grid-area: die !important;
    position: static !important;
    inset: auto !important;
    justify-self: end !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
}

/*
 * The actual sidebar can be narrower than viewport media queries suggest.
 * Container query reacts to the initiative card itself.
 */
@container (max-width: 330px) {
    .initiative-standalone-row {
        grid-template-columns: 24px minmax(0, 1fr) 46px !important;
        grid-template-areas:
            "icon summary die"
            "select select select" !important;
    }

    .initiative-source-standalone {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
    }
}

@container (max-width: 275px) {
    .initiative-summary {
        gap: 4px !important;
    }

    .initiative-summary .initiative-standalone-label {
        font-size: .76rem !important;
    }

    .initiative-summary .initiative-standalone-value {
        font-size: 1.12rem !important;
    }
}

/* Fallback for browsers without container queries on very small phones. */
@media (max-width: 520px) {
    .initiative-standalone-row {
        grid-template-columns: 24px minmax(0, 1fr) 46px !important;
        grid-template-areas:
            "icon summary die"
            "select select select" !important;
    }

    .initiative-source-standalone {
        width: 100% !important;
        max-width: none !important;
    }
}


/* =========================================================
   Stage 10.4.10 — initiative/perception spacing alignment
   ========================================================= */

/* Initiative: keep the numeric bonus visually centered between
   the text block on the left and the source selector on the right. */
.initiative-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px !important;
    align-items: center !important;
    column-gap: 10px !important;
    overflow: visible !important;
}

.initiative-summary .initiative-standalone-label {
    min-width: 0 !important;
    text-align: left !important;
}

.initiative-summary .initiative-standalone-value {
    width: 52px !important;
    min-width: 52px !important;
    text-align: center !important;
    justify-self: center !important;
}

/* Perception: give every element its own column.
   The bonus has a fixed central cell, so it cannot visually stick to
   either the label or proficiency badge. */
.defense-perception-row {
    display: grid !important;
    grid-template-columns:
        24px
        minmax(78px, 1fr)
        54px
        minmax(58px, auto)
        40px
        20px !important;
    column-gap: 9px !important;
    align-items: center !important;
}

.defense-perception-row > .compact-stat-icon {
    grid-column: 1 !important;
    justify-self: center !important;
}

.defense-perception-row > .compact-defense-name {
    grid-column: 2 !important;
    min-width: 0 !important;
    text-align: left !important;
}

.defense-perception-row > .compact-defense-value {
    grid-column: 3 !important;
    width: 54px !important;
    min-width: 54px !important;
    margin: 0 !important;
    text-align: center !important;
    justify-self: center !important;
}

.defense-perception-row > .compact-rank-pill {
    grid-column: 4 !important;
    justify-self: center !important;
    margin: 0 !important;
}

.defense-perception-row > .compact-d20-button {
    grid-column: 5 !important;
    justify-self: center !important;
    margin: 0 !important;
}

.defense-perception-row > .compact-inline-result {
    grid-column: 6 !important;
    justify-self: center !important;
    margin: 0 !important;
}

/* Compact sidebar: preserve symmetry by reducing gaps, not by allowing overlap. */
@container (max-width: 330px) {
    .initiative-summary {
        grid-template-columns: minmax(0, 1fr) 48px !important;
        column-gap: 6px !important;
    }

    .initiative-summary .initiative-standalone-value {
        width: 48px !important;
        min-width: 48px !important;
    }
}

@media (max-width: 390px) {
    .defense-perception-row {
        grid-template-columns:
            22px
            minmax(68px, 1fr)
            48px
            minmax(54px, auto)
            38px
            18px !important;
        column-gap: 6px !important;
    }

    .defense-perception-row > .compact-defense-value {
        width: 48px !important;
        min-width: 48px !important;
    }
}


/* =========================================================
   Stage 10.5.0 — Motion & Feedback
   ========================================================= */

:root {
    --motion-fast: 160ms;
    --motion-mid: 280ms;
    --motion-slow: 520ms;
    --motion-ease: cubic-bezier(.2,.8,.2,1);
}

/* General interactive polish */
button,
.foundry-top-tab,
.redesigned-action-card,
.damage-roll-button,
.compact-d20-button,
.standalone-d20-button,
.strike-roll-button {
    transition:
        transform var(--motion-fast) var(--motion-ease),
        border-color var(--motion-fast) ease,
        box-shadow var(--motion-fast) ease,
        background-color var(--motion-fast) ease,
        color var(--motion-fast) ease,
        opacity var(--motion-fast) ease !important;
}

button:hover,
.redesigned-action-card:hover,
.damage-roll-button:hover {
    transform: translateY(-1px);
}

button:active,
.redesigned-action-card:active,
.damage-roll-button:active {
    transform: translateY(0) scale(.985);
}

/* D20 roll */
.motion-d20-roll {
    animation: motionD20Roll .52s var(--motion-ease);
}
@keyframes motionD20Roll {
    0%   { transform: rotate(0deg) scale(1); filter: brightness(1); }
    22%  { transform: rotate(-9deg) scale(1.06); filter: brightness(1.25); }
    48%  { transform: rotate(10deg) scale(.98); }
    72%  { transform: rotate(-4deg) scale(1.03); }
    100% { transform: rotate(0deg) scale(1); filter: brightness(1); }
}

/* Generic gold action flash */
.motion-action-flash {
    animation: motionActionFlash .48s ease-out;
}
@keyframes motionActionFlash {
    0%   { box-shadow: 0 0 0 rgba(239,173,85,0); }
    35%  { box-shadow: 0 0 0 2px rgba(239,173,85,.35), 0 0 20px rgba(239,173,85,.30); }
    100% { box-shadow: 0 0 0 rgba(239,173,85,0); }
}

/* Quick action card press */
.motion-card-press {
    animation: motionCardPress .42s var(--motion-ease);
}
@keyframes motionCardPress {
    0%   { transform: scale(1); }
    45%  { transform: scale(.985); box-shadow: inset 0 0 0 1px rgba(239,173,85,.2); }
    100% { transform: scale(1); }
}

/* Action pips */
.motion-pip-pop {
    animation: motionPipPop .36s var(--motion-ease);
}
@keyframes motionPipPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(.78) rotate(8deg); }
    100% { transform: scale(1); }
}

.motion-pip-ignite {
    animation: motionPipIgnite .52s ease-out;
}
@keyframes motionPipIgnite {
    0%   { box-shadow: 0 0 0 rgba(239,173,85,0); transform: scale(.92); }
    45%  { box-shadow: 0 0 18px rgba(239,173,85,.55); transform: scale(1.08); }
    100% { box-shadow: 0 0 0 rgba(239,173,85,0); transform: scale(1); }
}

/* Pane transition */
.motion-pane-enter {
    animation: motionPaneEnter .36s var(--motion-ease);
}
@keyframes motionPaneEnter {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Modal transition */
.motion-modal-enter {
    animation: motionModalEnter .34s var(--motion-ease);
}
@keyframes motionModalEnter {
    from { opacity: 0; transform: translateY(8px) scale(.975); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Roll history */
.motion-history-enter {
    animation: motionHistoryEnter .48s var(--motion-ease);
}
@keyframes motionHistoryEnter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.motion-critical-20 {
    animation:
        motionHistoryEnter .48s var(--motion-ease),
        motionCrit20 2.2s ease-out;
}
@keyframes motionCrit20 {
    0%   { box-shadow: 0 0 0 rgba(255,196,83,0); }
    20%  { box-shadow: 0 0 0 2px rgba(255,196,83,.45), 0 0 26px rgba(255,196,83,.35); }
    100% { box-shadow: 0 0 0 rgba(255,196,83,0); }
}

.motion-critical-1 {
    animation:
        motionHistoryEnter .48s var(--motion-ease),
        motionCrit1 2.2s ease-out;
}
@keyframes motionCrit1 {
    0%   { box-shadow: 0 0 0 rgba(177,53,45,0); }
    20%  { box-shadow: 0 0 0 2px rgba(177,53,45,.4), 0 0 24px rgba(177,53,45,.28); }
    100% { box-shadow: 0 0 0 rgba(177,53,45,0); }
}

/* HP feedback */
.motion-hp-damage {
    animation: motionHpDamage .7s ease-out;
}
@keyframes motionHpDamage {
    0%   { box-shadow: 0 0 0 rgba(150,42,36,0); }
    28%  { box-shadow: inset 0 0 30px rgba(150,42,36,.34), 0 0 18px rgba(150,42,36,.2); }
    100% { box-shadow: 0 0 0 rgba(150,42,36,0); }
}

.motion-hp-heal {
    animation: motionHpHeal .7s ease-out;
}
@keyframes motionHpHeal {
    0%   { box-shadow: 0 0 0 rgba(55,135,83,0); }
    28%  { box-shadow: inset 0 0 30px rgba(55,135,83,.30), 0 0 18px rgba(55,135,83,.18); }
    100% { box-shadow: 0 0 0 rgba(55,135,83,0); }
}

/* Active tab has a very subtle living gold sheen */
.foundry-top-tab.active {
    position: relative;
    overflow: hidden;
}
.foundry-top-tab.active::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(239,173,85,0) 35%,
            rgba(239,173,85,.10) 50%,
            rgba(239,173,85,0) 65%,
            transparent 100%
        );
    transform: translateX(-130%);
    animation: motionActiveTabSheen 5.6s ease-in-out infinite;
}
@keyframes motionActiveTabSheen {
    0%, 68% { transform: translateX(-130%); }
    82%     { transform: translateX(130%); }
    100%    { transform: translateX(130%); }
}

/* Portrait micro-parallax, desktop only */
.character-portrait-frame {
    transform:
        perspective(900px)
        rotateX(var(--portrait-tilt-x, 0deg))
        rotateY(var(--portrait-tilt-y, 0deg));
    transition: transform 160ms ease-out !important;
    transform-style: preserve-3d;
}

/* Tablet/mobile: trim expensive constant motion */
@media (max-width: 1366px) {
    .foundry-top-tab.active::after {
        animation-duration: 7.5s;
        opacity: .65;
    }
}

@media (max-width: 760px) {
    .foundry-top-tab.active::after {
        display: none;
    }

    .motion-d20-roll {
        animation-duration: .42s;
    }

    .motion-modal-enter {
        animation-duration: .24s;
    }
}

/* Respect OS/browser accessibility preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }

    .character-portrait-frame {
        transform: none !important;
    }
}


/* =========================================================
   Stage 10.6.0 — Weapon runes and sectioned item editor
   ========================================================= */
.weapon-editor-v2 {
    display: grid;
    gap: 12px;
}

.item-editor-subtabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 5px;
    border: 1px solid #4c3d30;
    border-radius: 11px;
    background: #100e0c;
    position: sticky;
    top: 0;
    z-index: 4;
}

.item-editor-subtabs button {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #9d9185;
    font-size: .78rem;
}

.item-editor-subtabs button.active {
    border-color: #815a2d;
    background: linear-gradient(180deg, #2a1c10, #1a140e);
    color: #efad55;
    box-shadow: inset 0 -2px 0 rgba(239, 173, 85, .3);
}

.item-editor-panel[hidden] {
    display: none !important;
}

.item-editor-panel.active {
    animation: runePanelEnter .22s ease-out;
}

@keyframes runePanelEnter {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

.weapon-rune-intro {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    padding: 10px 2px 12px;
    border-bottom: 1px solid #43352a;
}

.weapon-rune-intro h3 {
    margin: 2px 0 0;
    color: #f0e6da;
    font-family: Georgia, serif;
    font-size: 1.45rem;
}

.weapon-rune-intro > span {
    max-width: 300px;
    color: #998d82;
    font-size: .72rem;
    line-height: 1.4;
    text-align: right;
}

.weapon-rune-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.property-rune-picker {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #574126;
    border-radius: 11px;
    background: #15110d;
}

.property-rune-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 9px;
}

.property-rune-head > div {
    display: grid;
    gap: 3px;
}

.property-rune-head small {
    color: #9a8e83;
}

.property-rune-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.property-rune-options > label {
    position: relative;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 9px !important;
    align-items: center;
    min-height: 56px;
    padding: 9px 10px;
    border: 1px solid #43382e;
    border-radius: 9px;
    background: #100e0c;
    cursor: pointer;
}

.property-rune-options > label:has(input:checked) {
    border-color: #9e6a31;
    background: #24180f;
    box-shadow: inset 0 0 0 1px rgba(239, 173, 85, .08);
}

.property-rune-options > label.disabled {
    opacity: .36;
    cursor: default;
}

.property-rune-options input {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0;
    padding: 0 !important;
    accent-color: #d89542;
}

.property-rune-options span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.property-rune-options strong {
    color: #efe4d8;
}

.property-rune-options small {
    color: #998d82;
    font-weight: 500;
}

.weapon-rune-summary {
    margin-top: 10px;
    min-height: 48px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    border: 1px solid #493a2d;
    border-radius: 10px;
    background: #100e0c;
}

.weapon-rune-summary span {
    color: #9c9084;
}

.weapon-rune-summary strong {
    color: #efad55;
    text-align: right;
}

.weapon-rune-chip {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid #7b572d;
    border-radius: 999px;
    background: #21160d;
    color: #efad55;
    font-size: .6rem;
    font-weight: 900;
    text-transform: uppercase;
}

.weapon-rune-chip.striking {
    border-color: #5d4a73;
    background: #1d1727;
    color: #cdb8eb;
}

.damage-rune-box[hidden] {
    display: none !important;
}

.damage-rune-list {
    display: grid;
    gap: 6px;
}

.damage-rune-row {
    min-height: 46px;
    padding: 7px 9px;
    border: 1px solid #46392e;
    border-radius: 8px;
    background: #120f0c;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.damage-rune-row > span {
    display: grid;
    gap: 2px;
}

.damage-rune-row small {
    color: #a09488;
}

.damage-rune-row em {
    color: #7ec78d;
    font-size: .66rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.damage-extra-row-rune {
    display: none !important;
}

@media (max-width: 760px) {
    .item-editor-subtabs {
        position: static;
    }

    .weapon-rune-intro {
        display: grid;
        align-items: start;
    }

    .weapon-rune-intro > span {
        max-width: none;
        text-align: left;
    }

    .weapon-rune-grid,
    .property-rune-options {
        grid-template-columns: 1fr;
    }

    .property-rune-options > label {
        min-height: 52px;
    }
}


/* =========================================================
   Stage 10.6.1 — weapon editor layout fix
   ========================================================= */

/* The "Основное" weapon editor used a generic inventory grid that was
   too narrow for five controls, so labels/selects collided. Give it its own grid. */
.weapon-editor-v2 [data-item-editor-panel="main"] .weapon-editor-grid {
    display: grid !important;
    grid-template-columns:
        minmax(120px, 1.05fr)
        minmax(120px, 1fr)
        minmax(150px, 1.15fr)
        minmax(140px, 1.05fr)
        minmax(170px, 1.25fr) !important;
    gap: 10px !important;
    align-items: end !important;
    width: 100% !important;
}

.weapon-editor-v2 [data-item-editor-panel="main"] .weapon-editor-grid > label {
    min-width: 0 !important;
    width: 100% !important;
    display: grid !important;
    gap: 6px !important;
}

.weapon-editor-v2 [data-item-editor-panel="main"] .weapon-editor-grid input,
.weapon-editor-v2 [data-item-editor-panel="main"] .weapon-editor-grid select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.weapon-editor-v2 [data-item-editor-panel="main"] .damage-dice-fields {
    display: grid !important;
    grid-template-columns: minmax(58px, .7fr) minmax(84px, 1fr) !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.weapon-editor-v2 [data-item-editor-panel="main"] .damage-dice-fields > * {
    min-width: 0 !important;
    width: 100% !important;
}

/* Medium desktop / tablet landscape: use two rows instead of squeezing. */
@media (min-width: 761px) and (max-width: 1450px) {
    .weapon-editor-v2 [data-item-editor-panel="main"] .weapon-editor-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .weapon-editor-v2 [data-item-editor-panel="main"] .weapon-editor-grid > label:nth-child(4),
    .weapon-editor-v2 [data-item-editor-panel="main"] .weapon-editor-grid > label:nth-child(5) {
        grid-column: span 1 !important;
    }
}

/* Narrow tablet/mobile: one clean vertical column. */
@media (max-width: 900px) {
    .weapon-editor-v2 [data-item-editor-panel="main"] .weapon-editor-grid {
        grid-template-columns: 1fr !important;
    }

    .weapon-editor-v2 [data-item-editor-panel="main"] .damage-dice-fields {
        grid-template-columns: 90px minmax(0, 1fr) !important;
    }
}

/* Avoid legacy absolute/positioned rules leaking into new editor. */
.weapon-editor-v2 [data-item-editor-panel="main"] label,
.weapon-editor-v2 [data-item-editor-panel="main"] input,
.weapon-editor-v2 [data-item-editor-panel="main"] select,
.weapon-editor-v2 [data-item-editor-panel="main"] .damage-dice-fields {
    position: static !important;
    inset: auto !important;
    transform: none !important;
}


/* =========================================================
   Stage 10.6.2 — isolated weapon core editor
   ========================================================= */

/*
 * IMPORTANT:
 * This grid deliberately does NOT use .inventory-form-grid or
 * .weapon-editor-grid. Those classes have many legacy rules from older stages.
 * The weapon editor now has an isolated namespace so nothing can squeeze
 * or reposition the controls.
 */

.weapon-editor-v2 .weapon-core-grid {
    display: grid !important;
    grid-template-columns:
        minmax(160px, 1fr)
        minmax(160px, 1fr)
        minmax(190px, 1.15fr) !important;
    gap: 14px 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: end !important;
}

.weapon-editor-v2 .weapon-core-grid > label {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #cfc2b6 !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

/* Damage type + weapon group form a clean second row. */
.weapon-editor-v2 .weapon-core-grid > label:nth-child(4) {
    grid-column: 1 / span 1 !important;
}

.weapon-editor-v2 .weapon-core-grid > label:nth-child(5) {
    grid-column: 2 / -1 !important;
}

/* Every actual control owns the full width of its own grid cell. */
.weapon-editor-v2 .weapon-core-grid > label > input,
.weapon-editor-v2 .weapon-core-grid > label > select,
.weapon-editor-v2 .weapon-core-grid .damage-dice-fields input,
.weapon-editor-v2 .weapon-core-grid .damage-dice-fields select {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: block !important;
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 36px 0 12px !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    color: #f1e7dc !important;
    -webkit-text-fill-color: #f1e7dc !important;
    background-color: #0f0e0c !important;
    border: 1px solid #504237 !important;
    border-radius: 8px !important;
    opacity: 1 !important;

    font-size: .86rem !important;
    font-weight: 700 !important;
    line-height: 44px !important;
}

/* Number input does not need room for a select arrow. */
.weapon-editor-v2 .weapon-core-grid .damage-dice-fields input {
    padding-right: 12px !important;
    text-align: center !important;
}

.weapon-editor-v2 .weapon-core-grid .damage-dice-fields {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: grid !important;
    grid-template-columns: 74px minmax(100px, 1fr) !important;
    gap: 8px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Kill any legacy column/span rules that can leak in by child position. */
#inventory-add-modal .weapon-editor-v2 .weapon-core-grid > *,
#inventory-edit-modal .weapon-editor-v2 .weapon-core-grid > * {
    float: none !important;
    flex: none !important;
    justify-self: stretch !important;
    align-self: end !important;
}

/* Tablet / narrow desktop: two columns, no squeezing. */
@media (max-width: 1180px) {
    .weapon-editor-v2 .weapon-core-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .weapon-editor-v2 .weapon-core-grid > label:nth-child(4),
    .weapon-editor-v2 .weapon-core-grid > label:nth-child(5) {
        grid-column: auto !important;
    }

    .weapon-editor-v2 .weapon-core-grid > label:nth-child(5) {
        grid-column: 1 / -1 !important;
    }
}

/* Phone / narrow tablet: one full-width control per row. */
@media (max-width: 760px) {
    .weapon-editor-v2 .weapon-core-grid {
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    .weapon-editor-v2 .weapon-core-grid > label:nth-child(4),
    .weapon-editor-v2 .weapon-core-grid > label:nth-child(5) {
        grid-column: auto !important;
    }

    .weapon-editor-v2 .weapon-core-grid .damage-dice-fields {
        grid-template-columns: 82px minmax(0, 1fr) !important;
    }

    .weapon-editor-v2 .weapon-core-grid > label > input,
    .weapon-editor-v2 .weapon-core-grid > label > select,
    .weapon-editor-v2 .weapon-core-grid .damage-dice-fields input,
    .weapon-editor-v2 .weapon-core-grid .damage-dice-fields select {
        height: 48px !important;
        min-height: 48px !important;
        font-size: .92rem !important;
    }
}


/* =========================================================
   Stage 10.6.3 — Armor property runes
   ========================================================= */
.armor-property-rune-picker {
    margin-top: 5px !important;
    padding: 12px !important;
    border: 1px solid #574126 !important;
    border-radius: 11px !important;
    background: #15110d !important;
    min-width: 0 !important;
}

.armor-property-rune-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.armor-property-rune-head > div {
    display: grid;
    gap: 3px;
}

.armor-property-rune-head strong {
    color: #f0e6da;
}

.armor-property-rune-head small,
.armor-property-rune-head > span {
    color: #9a8e83;
    font-size: .7rem;
    line-height: 1.35;
}

.armor-property-rune-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.armor-property-rune-options > label {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    min-width: 0 !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 9px !important;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    border: 1px solid #43382e !important;
    border-radius: 9px !important;
    background: #100e0c !important;
    cursor: pointer;
}

.armor-property-rune-options > label:has(input:checked) {
    border-color: #9e6a31 !important;
    background: #24180f !important;
}

.armor-property-rune-options > label.disabled {
    opacity: .36;
    cursor: default;
}

.armor-property-rune-options input[type="checkbox"] {
    position: static !important;
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #d89542;
}

.armor-property-rune-options span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.armor-property-rune-options strong,
.armor-property-rune-options small {
    white-space: normal;
    overflow-wrap: anywhere;
}

.armor-property-rune-options small {
    color: #998d82;
    font-weight: 500;
}

@media (max-width: 1400px) {
    .armor-property-rune-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .armor-property-rune-head {
        display: grid;
        align-items: start;
    }

    .armor-property-rune-options {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Stage 10.6.4 — rune progression / level / proficiency guidance
   ========================================================= */

.rune-progression-card {
    margin-top: 10px;
    padding: 11px;
    border: 1px solid #483a2d;
    border-radius: 10px;
    background: #100e0c;
}

.rune-progression-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.rune-progression-head strong {
    color: #e9ddd1;
    font-size: .78rem;
}

.rune-progression-head small {
    color: #91857a;
    font-size: .66rem;
    text-align: right;
}

.rune-progression-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
}

.rune-progression-track > span {
    position: relative;
    min-width: 0;
    min-height: 58px;
    padding: 7px 6px;
    border: 1px solid #39312a;
    border-radius: 8px;
    background: #15120f;
    color: #958a80;
    display: grid;
    align-content: center;
    gap: 3px;
    text-align: center;
    font-size: .61rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.rune-progression-track > span b {
    color: #efad55;
    font-family: Georgia, serif;
    font-size: .88rem;
}

.rune-progression-track > span.reached {
    border-color: #755329;
    background: #21170f;
    color: #d9c8b8;
}

.rune-progression-track > span.reached::after {
    content: "✓";
    position: absolute;
    top: 4px;
    right: 5px;
    color: #75c78a;
    font-weight: 900;
}

.rune-progression-track > span.future {
    opacity: .56;
}

.rune-rule-warning {
    margin-top: 8px;
    padding: 10px 11px;
    border: 1px solid #8b5c25;
    border-radius: 9px;
    background: #21170d;
    color: #dec7ac;
    display: grid;
    gap: 3px;
    font-size: .72rem;
    line-height: 1.35;
}

.rune-rule-warning[hidden] {
    display: none !important;
}

.rune-rule-warning strong {
    color: #efad55;
}

.rune-rule-warning.proficiency-warning {
    border-color: #81413b;
    background: #21110f;
}

.rune-rule-warning.proficiency-warning strong {
    color: #dc8c82;
}

/* Long level labels should remain readable inside selects. */
.weapon-rune-grid select,
.inventory-special-fields[data-item-fields="armor"] select,
.inventory-special-fields[data-edit-item-fields="armor"] select {
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Clear visual distinction between weapon and armor property-rune catalogs. */
.property-rune-picker::before {
    content: "РУНЫ СВОЙСТВ ОРУЖИЯ";
    display: block;
    margin: 0 0 8px;
    color: #efad55;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.armor-property-rune-picker::before {
    content: "РУНЫ СВОЙСТВ ДОСПЕХА";
    display: block;
    margin: 0 0 8px;
    color: #efad55;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
}

@media (max-width: 1180px) {
    .rune-progression-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .rune-progression-head {
        display: grid;
        align-items: start;
    }

    .rune-progression-head small {
        text-align: left;
    }

    .rune-progression-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   Stage 10.6.5 — compact rune progression help
   ========================================================= */

/* Info buttons do not consume large editor space. */
.rune-info-inline {
    display: flex !important;
    align-items: end !important;
    justify-content: center !important;
    min-width: 38px;
}

.rune-info-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    border: 1px solid #8b632f !important;
    border-radius: 50% !important;
    background: #1b140e !important;
    color: #efad55 !important;

    font-family: Georgia, serif;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.rune-info-button:hover,
.rune-info-button[aria-expanded="true"] {
    border-color: #d08a3c !important;
    background: #2a1b0e !important;
    box-shadow: 0 0 15px rgba(239,173,85,.18);
}

/* Weapon: add ! as a third, compact column next to Potency / Striking. */
.weapon-rune-grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    position: relative;
}

.weapon-rune-grid + .weapon-rune-info-inline {
    position: absolute !important;
    right: 10px !important;
    margin-top: -47px !important;
}

/* Armor: make the info button a small third item after Potency + Resilient. */
.inventory-special-fields[data-item-fields="armor"] .inventory-form-grid,
.inventory-special-fields[data-edit-item-fields="armor"] .inventory-form-grid {
    position: relative !important;
}

.armor-rune-info-inline {
    align-self: end !important;
    justify-self: start !important;
    width: 38px !important;
    min-width: 38px !important;
}

/* Floating layer */
.rune-info-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 6000 !important;
    display: grid;
    place-items: center;
    padding: 20px;
}

.rune-info-layer[hidden] {
    display: none !important;
}

.rune-info-overlay {
    position: absolute;
    inset: 0;
    background: rgba(4,3,3,.68);
    backdrop-filter: blur(3px);
}

.rune-info-popover {
    position: relative;
    z-index: 2;

    width: min(680px, calc(100vw - 40px));
    max-height: min(700px, calc(100dvh - 40px));
    overflow-y: auto;

    padding: 18px;
    border: 1px solid #78552d;
    border-radius: 14px;
    background: #17120f;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.rune-info-popover[hidden] {
    display: none !important;
}

.rune-info-popover-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #44362b;
}

.rune-info-popover-head h3 {
    margin: 3px 0 0;
    color: #f2e8dd;
    font-family: Georgia, serif;
    font-size: 1.45rem;
}

.rune-info-close {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #594535 !important;
    border-radius: 9px !important;
    background: #100e0c !important;
    color: #d0c2b6 !important;
    font-size: 1.3rem !important;
}

.rune-info-copy {
    margin: 12px 0 14px !important;
    color: #aa9e92;
    font-size: .82rem;
    line-height: 1.5;
}

/* Existing progression now lives inside the popover and can be readable. */
.rune-info-content .rune-progression-card {
    margin-top: 0 !important;
    padding: 13px !important;
    border-color: #59432b !important;
    background: #100e0c !important;
}

.rune-info-content .rune-progression-head {
    margin-bottom: 12px;
}

.rune-info-content .rune-progression-head strong {
    font-size: .86rem;
}

.rune-info-content .rune-progression-head small {
    font-size: .72rem;
}

.rune-info-content .rune-progression-track {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 8px !important;
}

.rune-info-content .rune-progression-track > span {
    min-height: 78px !important;
    padding: 10px 8px !important;
    font-size: .72rem !important;
    line-height: 1.25 !important;
}

.rune-info-content .rune-progression-track > span b {
    font-size: 1.05rem !important;
}

.rune-info-content .rune-rule-warning {
    margin-top: 10px !important;
    font-size: .78rem !important;
    line-height: 1.45 !important;
}

/* Keep layout tidy where armor button is inserted. */
@media (min-width: 761px) {
    .inventory-special-fields[data-item-fields="armor"] .inventory-form-grid,
    .inventory-special-fields[data-edit-item-fields="armor"] .inventory-form-grid {
        grid-template-columns: repeat(4, minmax(0,1fr)) 40px !important;
    }

    .armor-property-rune-picker,
    .explorer-clothing-note {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 760px) {
    .weapon-rune-grid + .weapon-rune-info-inline {
        position: static !important;
        margin: 7px 0 0 !important;
        justify-content: flex-end !important;
        width: 100% !important;
    }

    .armor-rune-info-inline {
        width: 100% !important;
        justify-content: flex-end !important;
    }

    .rune-info-layer {
        padding: 12px;
    }

    .rune-info-popover {
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 14px;
    }

    .rune-info-content .rune-progression-track {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}


/* =========================================================
   Stage 10.6.6 — unified rune cards + custom checkboxes + help
   ========================================================= */

.property-rune-options,
.armor-property-rune-options {
    gap: 9px !important;
}

/* Unified rune card */
.property-rune-options > .rune-option-card,
.armor-property-rune-options > .rune-option-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 30px !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 10px 9px 10px 11px !important;

    border: 1px solid #4b3b2d !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), transparent),
        #100e0c !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.property-rune-options > .rune-option-card:hover,
.armor-property-rune-options > .rune-option-card:hover {
    border-color: #75542e !important;
    background: #17120e !important;
    transform: translateY(-1px);
}

.property-rune-options > .rune-option-card:has(input:checked),
.armor-property-rune-options > .rune-option-card:has(input:checked) {
    border-color: #a36b2d !important;
    background:
        linear-gradient(135deg, rgba(239,173,85,.08), transparent 55%),
        #1d150e !important;
    box-shadow:
        inset 3px 0 0 #d89542,
        inset 0 0 0 1px rgba(239,173,85,.05);
}

.property-rune-options > .rune-option-card.disabled,
.armor-property-rune-options > .rune-option-card.disabled {
    opacity: .42;
    transform: none;
}

/* Hide native checkbox but keep it accessible/focusable */
.property-rune-options > .rune-option-card > input[type="checkbox"],
.armor-property-rune-options > .rune-option-card > input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* PF2e-style checkbox */
.rune-checkbox-visual {
    position: relative !important;
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    display: block !important;
    border: 1px solid #79542b !important;
    border-radius: 5px !important;
    background: #0b0a09 !important;
    box-shadow:
        inset 0 0 0 2px #14100c,
        0 0 0 1px rgba(0,0,0,.35);
}

.rune-option-card:has(input:checked) > .rune-checkbox-visual {
    border-color: #e3a451 !important;
    background: linear-gradient(180deg, #efb058, #c87929) !important;
    box-shadow:
        inset 0 0 0 2px rgba(255,231,183,.14),
        0 0 10px rgba(239,173,85,.16);
}

.rune-option-card:has(input:checked) > .rune-checkbox-visual::before,
.rune-option-card:has(input:checked) > .rune-checkbox-visual::after {
    content: "";
    position: absolute;
    height: 3px;
    border-radius: 2px;
    background: #18100a;
    transform-origin: left center;
}

.rune-option-card:has(input:checked) > .rune-checkbox-visual::before {
    width: 7px;
    left: 4px;
    top: 11px;
    transform: rotate(43deg);
}

.rune-option-card:has(input:checked) > .rune-checkbox-visual::after {
    width: 12px;
    left: 9px;
    top: 14px;
    transform: rotate(-48deg);
}

.rune-option-card:focus-within > .rune-checkbox-visual {
    outline: 2px solid rgba(239,173,85,.5);
    outline-offset: 2px;
}

/* Copy */
.rune-option-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

.rune-option-copy strong {
    color: #eee3d8 !important;
    font-size: .78rem !important;
    line-height: 1.15 !important;
}

.rune-option-copy small {
    color: #9e9185 !important;
    font-size: .66rem !important;
    line-height: 1.3 !important;
}

/* Per-rune info button */
.rune-property-info-button {
    position: relative !important;
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    border: 1px solid #68502f !important;
    border-radius: 50% !important;
    background: #17120e !important;
    color: #d99a49 !important;

    font-family: Georgia, serif;
    font-size: .84rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    cursor: pointer;
    z-index: 3;
}

.rune-property-info-button:hover {
    border-color: #d28c3e !important;
    color: #ffc36e !important;
    background: #24180f !important;
    box-shadow: 0 0 12px rgba(239,173,85,.14);
}

/* Help dialog */
.rune-property-help-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 7200 !important;
    display: grid;
    place-items: center;
    padding: 18px;
}

.rune-property-help-layer[hidden] {
    display: none !important;
}

.rune-property-help-overlay {
    position: absolute;
    inset: 0;
    background: rgba(3,3,3,.7);
    backdrop-filter: blur(3px);
}

.rune-property-help-card {
    position: relative;
    z-index: 2;
    width: min(520px, calc(100vw - 36px));
    padding: 17px;
    border: 1px solid #75512a;
    border-radius: 13px;
    background: #17120f;
    box-shadow: 0 24px 65px rgba(0,0,0,.58);
}

.rune-property-help-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 11px;
    border-bottom: 1px solid #44362b;
}

.rune-property-help-head h3 {
    margin: 3px 0 2px;
    color: #f1e7dc;
    font-family: Georgia, serif;
    font-size: 1.35rem;
}

.rune-property-help-head > div > span {
    color: #d99a49;
    font-size: .74rem;
    font-weight: 800;
}

.rune-property-help-close {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #594535 !important;
    border-radius: 9px !important;
    background: #0f0d0b !important;
    color: #cabcb0 !important;
    font-size: 1.2rem !important;
}

.rune-property-help-description {
    margin: 13px 0 0 !important;
    color: #b5a79b !important;
    font-size: .84rem !important;
    line-height: 1.55 !important;
}

/* Make both rune panels visually consistent */
.property-rune-picker,
.armor-property-rune-picker {
    border-color: #5a4328 !important;
    background:
        linear-gradient(180deg, rgba(239,173,85,.018), transparent 35%),
        #14100d !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}

.property-rune-head,
.armor-property-rune-head {
    padding-bottom: 10px !important;
    border-bottom: 1px solid #3e3228 !important;
    margin-bottom: 10px !important;
}

@media (max-width: 760px) {
    .property-rune-options > .rune-option-card,
    .armor-property-rune-options > .rune-option-card {
        grid-template-columns: 24px minmax(0, 1fr) 34px !important;
        min-height: 64px !important;
    }

    .rune-property-help-layer {
        padding: 12px;
    }

    .rune-property-help-card {
        width: 100%;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }
}

/* Stage 10.7.0 authoritative official-book rune catalog */
.property-rune-options,.armor-property-rune-options{max-height:390px;overflow-y:auto;padding-right:5px;scrollbar-width:thin;scrollbar-color:#80582e #100e0c}
.damage-rune-toggle-row{display:grid!important;grid-template-columns:24px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;min-height:54px;padding:9px 10px!important;border:1px solid #4b3b2d!important;border-radius:9px!important;background:#100e0c!important;cursor:pointer}
.damage-rune-toggle-row:has(input:checked){border-color:#9c692f!important;background:#20160e!important;box-shadow:inset 3px 0 0 #d89542}
.damage-rune-toggle{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important}
.damage-rune-toggle-visual{position:relative;display:block;width:22px;height:22px;border:1px solid #765329;border-radius:5px;background:#0c0b09}
.damage-rune-toggle-row:has(input:checked) .damage-rune-toggle-visual{background:linear-gradient(180deg,#efb058,#ca7a29);border-color:#e3a451}
.damage-rune-toggle-row:has(input:checked) .damage-rune-toggle-visual::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#18100a;font-weight:1000}
.damage-rune-toggle-copy{min-width:0;display:grid;gap:2px}.damage-rune-toggle-copy strong{color:#eee3d8}.damage-rune-toggle-copy small{color:#9c9085;font-size:.7rem;line-height:1.3}
.foundry-resistance-section{border-color:#56402a!important}.resistance-list{display:grid;gap:6px}.resistance-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px;border:1px solid #43362b;border-radius:8px;background:#11100d}.resistance-icon{color:#d89542}.resistance-copy{display:grid;gap:1px;min-width:0}.resistance-copy strong{color:#e9dfd4;font-size:.76rem}.resistance-copy small{color:#8f8479;font-size:.62rem}.resistance-row>b{color:#efad55;font-family:Georgia,serif;font-size:1.05rem}.resistance-empty{color:#8f8479;font-size:.7rem;text-align:center;padding:8px;border:1px dashed #40352c;border-radius:8px}
@media(max-width:760px){.property-rune-options,.armor-property-rune-options{max-height:46dvh}}


/* =========================================================
   Stage 10.7.1 — divine weapon proficiency, rune toggles, formulas
   ========================================================= */

.weapon-category-hint {
    display: block;
    margin-top: 5px;
    color: #8f8378;
    font-size: .64rem;
    line-height: 1.35;
}

.formula-hover {
    position: relative;
    cursor: help;
    text-decoration: underline dotted rgba(239,173,85,.42);
    text-underline-offset: 3px;
}

.formula-hover::after {
    content: attr(data-formula-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    z-index: 5000;
    width: max-content;
    max-width: min(430px, 72vw);
    padding: 9px 11px;
    border: 1px solid #73512d;
    border-radius: 9px;
    background: #17120f;
    color: #eadfd4;
    box-shadow: 0 14px 35px rgba(0,0,0,.45);
    font-family: system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    transform: translate(-50%, 4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.formula-hover:hover::after,
.formula-hover:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (max-width: 760px) {
    .formula-hover::after {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 92px;
        width: auto;
        max-width: none;
        transform: none;
    }
    .formula-hover:hover::after,
    .formula-hover:focus::after {
        transform: none;
    }
}


/* =========================================================
   Stage 10.7.2 — readable defense, formulas on bonuses
   ========================================================= */

/* Separate Attention and Saves into independent cards. */
.foundry-attention-section,
.foundry-saves-section {
    overflow: visible !important;
}

.attention-section-title,
.foundry-saves-section .compact-saves-title {
    margin: 0 0 8px !important;
    padding: 0 2px 7px !important;
    border-bottom: 1px solid #4a392c !important;
    color: #efad55 !important;
    font-family: Georgia, serif !important;
    font-size: .92rem !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
}

.foundry-attention-section .defense-perception-row {
    margin: 0 !important;
    border: 1px solid #4a392c !important;
    border-radius: 9px !important;
    background: #15110e !important;
    padding: 9px 8px !important;
}

/* Formula should appear above the actual bonus, not the name. */
.formula-bonus-hover {
    cursor: help !important;
    text-decoration: underline dotted rgba(239,173,85,.55) !important;
    text-underline-offset: 4px !important;
}

.formula-bonus-hover::after {
    bottom: calc(100% + 12px) !important;
    min-width: 255px;
    max-width: min(470px, 78vw) !important;
    padding: 11px 13px !important;
    font-size: .78rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

.skill-total.formula-bonus-hover::after {
    left: 0 !important;
    transform: translate(0, 4px) !important;
}

.skill-total.formula-bonus-hover:hover::after,
.skill-total.formula-bonus-hover:focus::after {
    transform: translate(0, 0) !important;
}

/* Main skill calculation text: make it clearly readable. */
.skill-breakdown {
    margin-top: 5px !important;
    color: #b8aa9d !important;
    font-size: .78rem !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    letter-spacing: .005em;
}

.skill-foundry-row .skill-name-line strong {
    font-size: 1.02rem !important;
}

/* Larger resistance card, matching movement/defense visual weight. */
.foundry-resistance-section {
    padding: 12px !important;
    border-radius: 11px !important;
}

.foundry-resistance-section .foundry-side-title {
    margin-bottom: 9px !important;
    padding-bottom: 7px !important;
    border-bottom: 1px solid #4a392c;
    color: #efad55 !important;
    font-size: .92rem !important;
    font-weight: 900 !important;
    letter-spacing: .035em;
}

.foundry-resistance-section .resistance-list {
    gap: 8px !important;
}

.foundry-resistance-section .resistance-row {
    min-height: 54px !important;
    grid-template-columns: 24px minmax(0,1fr) auto !important;
    gap: 10px !important;
    padding: 10px 11px !important;
    border-radius: 9px !important;
}

.foundry-resistance-section .resistance-icon {
    font-size: .82rem !important;
}

.foundry-resistance-section .resistance-copy strong {
    font-size: .86rem !important;
    line-height: 1.25 !important;
}

.foundry-resistance-section .resistance-copy small {
    margin-top: 2px;
    font-size: .7rem !important;
    line-height: 1.35 !important;
}

.foundry-resistance-section .resistance-row > b {
    min-width: 28px;
    text-align: center;
    font-size: 1.2rem !important;
}

.foundry-resistance-section .resistance-empty {
    min-height: 48px;
    display: grid;
    place-items: center;
    font-size: .76rem !important;
}

/* Remove obsolete visual space left by the defense editor header. */
.compact-defense-head {
    display: none !important;
}

@media (max-width: 760px) {
    .skill-breakdown {
        font-size: .8rem !important;
        line-height: 1.5 !important;
    }

    .formula-bonus-hover::after {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 96px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        transform: none !important;
    }

    .skill-total.formula-bonus-hover:hover::after,
    .skill-total.formula-bonus-hover:focus::after,
    .formula-bonus-hover:hover::after,
    .formula-bonus-hover:focus::after {
        transform: none !important;
    }

    .foundry-resistance-section .resistance-row {
        min-height: 58px !important;
    }

    .foundry-resistance-section .resistance-copy strong {
        font-size: .92rem !important;
    }

    .foundry-resistance-section .resistance-copy small {
        font-size: .74rem !important;
    }
}


/* =========================================================
   Stage 10.7.3 — readable left-column combat typography
   ========================================================= */

/* Initiative */
.initiative-card,
.foundry-initiative-card {
    font-size: 1rem !important;
}
.initiative-card .initiative-label,
.foundry-initiative-card .initiative-label,
.initiative-card label,
.foundry-initiative-card label {
    font-size: .9rem !important;
    font-weight: 800 !important;
}
.initiative-card strong,
.foundry-initiative-card strong,
.initiative-card .initiative-value,
.foundry-initiative-card .initiative-value {
    font-size: 1.28rem !important;
    line-height: 1 !important;
}
.initiative-card select,
.foundry-initiative-card select {
    font-size: .84rem !important;
    font-weight: 700 !important;
}

/* Attention */
.foundry-attention-section .foundry-side-title,
.foundry-attention-section .attention-section-title {
    font-size: 1.04rem !important;
}
.foundry-attention-section .compact-defense-name {
    font-size: .92rem !important;
    font-weight: 800 !important;
}
.foundry-attention-section .compact-defense-value {
    font-size: 1.34rem !important;
    line-height: 1 !important;
}
.foundry-attention-section .compact-rank-pill {
    font-size: .67rem !important;
    min-height: 22px !important;
    padding: 3px 8px !important;
}

/* Saves */
.foundry-saves-section .compact-saves-title {
    font-size: 1.04rem !important;
}
.foundry-saves-section .compact-save-head {
    font-size: .82rem !important;
    font-weight: 800 !important;
}
.foundry-saves-section .compact-save-roll-row strong {
    font-size: 1.34rem !important;
    line-height: 1 !important;
}
.foundry-saves-section .compact-rank-pill {
    font-size: .67rem !important;
    min-height: 22px !important;
    padding: 3px 8px !important;
}
.foundry-saves-section .compact-inline-result {
    font-size: .74rem !important;
}

/* Resistances */
.foundry-resistance-section .foundry-side-title {
    font-size: 1.08rem !important;
}
.foundry-resistance-section .resistance-copy strong {
    font-size: .96rem !important;
    line-height: 1.3 !important;
}
.foundry-resistance-section .resistance-copy small {
    font-size: .78rem !important;
    line-height: 1.4 !important;
}
.foundry-resistance-section .resistance-row > b {
    font-size: 1.28rem !important;
}

/* Movement */
.foundry-movement-section .foundry-side-title {
    font-size: 1.08rem !important;
}
.foundry-movement-section .defense-label-with-icon {
    font-size: .8rem !important;
    font-weight: 800 !important;
}
.foundry-movement-section .foundry-movement-grid strong {
    font-size: 1.72rem !important;
    line-height: 1.05 !important;
}
.foundry-movement-section .foundry-movement-grid small {
    font-size: .72rem !important;
}

/* The narrow left rail needs a slightly denser but still readable scale. */
@media (min-width: 761px) and (max-width: 1400px) {
    .foundry-attention-section .compact-defense-name,
    .foundry-saves-section .compact-save-head {
        font-size: .88rem !important;
    }

    .foundry-attention-section .compact-defense-value,
    .foundry-saves-section .compact-save-roll-row strong {
        font-size: 1.28rem !important;
    }

    .foundry-resistance-section .resistance-copy strong {
        font-size: .92rem !important;
    }

    .foundry-resistance-section .resistance-copy small {
        font-size: .75rem !important;
    }
}

/* Phones: do not shrink these critical values back down. */
@media (max-width: 760px) {
    .foundry-attention-section .compact-defense-name {
        font-size: .98rem !important;
    }

    .foundry-attention-section .compact-defense-value,
    .foundry-saves-section .compact-save-roll-row strong {
        font-size: 1.42rem !important;
    }

    .foundry-saves-section .compact-save-head {
        font-size: .88rem !important;
    }

    .foundry-attention-section .compact-rank-pill,
    .foundry-saves-section .compact-rank-pill {
        font-size: .7rem !important;
    }

    .foundry-resistance-section .resistance-copy strong {
        font-size: 1rem !important;
    }

    .foundry-resistance-section .resistance-copy small {
        font-size: .8rem !important;
    }

    .foundry-movement-section .defense-label-with-icon {
        font-size: .84rem !important;
    }

    .foundry-movement-section .foundry-movement-grid strong {
        font-size: 1.8rem !important;
    }
}


/* =========================================================
   Stage 10.7.4 — viewport-safe formula tooltip
   ========================================================= */

/* Stage 10.7.1/10.7.2 used ::after. Disable it to avoid duplicate,
   clipped tooltips inside narrow cards. */
.formula-hover::after,
.formula-bonus-hover::after {
    display: none !important;
    content: none !important;
}

/* Numeric bonus remains clearly interactive. */
.formula-bonus-hover {
    cursor: help !important;
    text-decoration: underline dotted rgba(239,173,85,.68) !important;
    text-underline-offset: 4px !important;
}

/* One global tooltip lives directly under <body>, so it can never be clipped
   by sidebar/card overflow. */
.formula-floating-tooltip {
    position: fixed !important;
    z-index: 12000 !important;

    width: max-content;
    min-width: 300px;
    max-width: min(560px, calc(100vw - 24px));

    padding: 14px 16px !important;
    border: 1px solid #a16d34 !important;
    border-radius: 11px !important;

    background:
        linear-gradient(180deg, rgba(239,173,85,.055), transparent 42%),
        #17120f !important;
    color: #f2e8dd !important;

    box-shadow:
        0 18px 48px rgba(0,0,0,.58),
        inset 0 1px 0 rgba(255,255,255,.035) !important;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: .92rem !important;
    font-weight: 650 !important;
    line-height: 1.55 !important;
    letter-spacing: .005em !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;

    pointer-events: none !important;
}

.formula-floating-tooltip[hidden] {
    display: none !important;
}

/* Skill bonuses are also formula targets. Keep them obviously hoverable. */
.skills-core-grid .skill-total.formula-bonus-hover,
.lore-foundry-row .skill-total.formula-bonus-hover {
    cursor: help !important;
}

/* Tablet */
@media (max-width: 1180px) {
    .formula-floating-tooltip {
        min-width: 280px;
        max-width: min(520px, calc(100vw - 24px));
        font-size: .9rem !important;
    }
}

/* Phone/touch: large readable card, never outside viewport. */
@media (max-width: 760px) {
    .formula-floating-tooltip {
        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 15px 16px !important;
        font-size: 1rem !important;
        line-height: 1.55 !important;
        pointer-events: auto !important;
    }
}

/* =========================================================
   Stage 10.7.5 — larger/readable combat sidebar
   ========================================================= */

/* Give the left combat rail a little more room on desktop. */
@media (min-width: 1280px) {
    .foundry-sheet-shell {
        grid-template-columns: 340px minmax(0, 1fr) !important;
    }
}

/* ---------------------------------------------------------
   AC + Shield
   --------------------------------------------------------- */
.combat-defense-summary {
    padding: 13px !important;
}

.combat-summary-grid {
    grid-template-columns: minmax(112px, .8fr) minmax(0, 1.55fr) !important;
    gap: 10px !important;
}

.combat-ac-card,
.combat-shield-card {
    min-height: 170px !important;
}

.combat-card-kicker {
    font-size: .82rem !important;
    gap: 7px !important;
}

.combat-card-kicker svg {
    width: 21px !important;
    height: 21px !important;
}

.combat-ac-card > strong {
    font-size: 3.35rem !important;
}

.combat-ac-card > small {
    font-size: .66rem !important;
    line-height: 1.35 !important;
}

.combat-shield-card {
    padding: 13px !important;
    gap: 9px !important;
}

.combat-shield-status {
    padding: 4px 7px !important;
    font-size: .58rem !important;
}

.combat-shield-name {
    font-size: 1.12rem !important;
    line-height: 1.2 !important;
}

.combat-shield-hp {
    gap: 10px !important;
}

.combat-shield-hp span {
    font-size: .66rem !important;
    line-height: 1.25 !important;
}

.combat-shield-hp strong {
    font-size: 1.2rem !important;
}

.combat-shield-track {
    height: 8px !important;
}

.combat-shield-meta {
    gap: 6px 11px !important;
    font-size: .72rem !important;
    line-height: 1.3 !important;
}

/* ---------------------------------------------------------
   Initiative
   --------------------------------------------------------- */
.initiative-standalone-section {
    padding: 13px !important;
    overflow: visible !important;
}

.initiative-standalone-row {
    grid-template-columns: 24px minmax(118px, 1fr) minmax(104px, 116px) 46px !important;
    column-gap: 9px !important;
    min-height: 52px !important;
}

.initiative-summary .initiative-standalone-label {
    font-size: 1rem !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
}

.initiative-summary .initiative-standalone-value {
    width: 58px !important;
    min-width: 58px !important;
    font-size: 1.42rem !important;
    line-height: 1 !important;
}

.initiative-source-standalone {
    min-height: 42px !important;
    font-size: .88rem !important;
    font-weight: 750 !important;
}

/* ---------------------------------------------------------
   Attention and Saves — same internal alignment as Movement
   --------------------------------------------------------- */
.foundry-attention-section,
.foundry-saves-section {
    padding: 16px !important;
    overflow: visible !important;
}

.foundry-attention-section .attention-section-title,
.foundry-saves-section .compact-saves-title {
    margin: 0 0 12px !important;
    padding: 0 0 9px !important;
    border-bottom: 1px solid rgba(226,160,77,.28) !important;
    color: var(--gold-soft) !important;
    font-family: inherit !important;
    font-size: 1.08rem !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

.foundry-attention-section .defense-perception-row {
    min-height: 66px !important;
    padding: 11px 10px !important;
    grid-template-columns: 24px minmax(74px, 1fr) 56px minmax(58px, auto) 42px 18px !important;
    column-gap: 7px !important;
}

.foundry-attention-section .compact-stat-icon {
    width: 20px !important;
    height: 20px !important;
}

.foundry-attention-section .compact-defense-name {
    font-size: .98rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

.foundry-attention-section .compact-defense-value {
    font-size: 1.46rem !important;
}

.foundry-attention-section .compact-rank-pill {
    min-height: 24px !important;
    padding: 4px 7px !important;
    font-size: .7rem !important;
}

.foundry-attention-section .compact-d20-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
}

/* Save cards */
.foundry-saves-section .compact-save-grid {
    border-top: 1px solid var(--line-soft) !important;
    border-radius: 9px !important;
}

.foundry-saves-section .compact-save-cell {
    min-height: 124px !important;
    padding: 11px 7px 9px !important;
    gap: 7px !important;
}

.foundry-saves-section .compact-save-head {
    gap: 5px !important;
    font-size: .8rem !important;
    line-height: 1.2 !important;
}

.foundry-saves-section .compact-save-head .compact-stat-icon {
    width: 18px !important;
    height: 18px !important;
}

.foundry-saves-section .compact-rank-pill {
    min-width: 70px !important;
    min-height: 23px !important;
    padding: 4px 6px !important;
    font-size: .68rem !important;
}

.foundry-saves-section .compact-save-roll-row {
    gap: 6px !important;
}

.foundry-saves-section .compact-save-roll-row strong {
    font-size: 1.5rem !important;
}

.foundry-saves-section .compact-d20-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
}

.foundry-saves-section .compact-inline-result {
    font-size: .76rem !important;
}

/* ---------------------------------------------------------
   Resistances
   --------------------------------------------------------- */
.foundry-resistance-section {
    padding: 16px !important;
    overflow: visible !important;
}

.foundry-resistance-section .foundry-side-title {
    margin: 0 0 12px !important;
    padding: 0 0 9px !important;
    border-bottom: 1px solid rgba(226,160,77,.28) !important;
}

.foundry-resistance-section .foundry-side-title > span {
    font-size: 1.08rem !important;
    font-weight: 950 !important;
    letter-spacing: .055em !important;
}

.foundry-resistance-section .resistance-row {
    min-height: 66px !important;
    padding: 11px 12px !important;
    grid-template-columns: 22px minmax(0,1fr) 36px !important;
    gap: 10px !important;
}

.foundry-resistance-section .resistance-icon {
    font-size: .9rem !important;
}

.foundry-resistance-section .resistance-copy strong {
    font-size: .98rem !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
}

.foundry-resistance-section .resistance-copy small {
    margin-top: 3px !important;
    font-size: .78rem !important;
    line-height: 1.4 !important;
}

.foundry-resistance-section .resistance-row > b {
    font-size: 1.34rem !important;
}

/* Keep the movement heading as the visual reference. */
.foundry-movement-section {
    padding: 16px !important;
}

/* Slightly smaller desktop/tablet rail still remains readable. */
@media (min-width: 761px) and (max-width: 1279px) {
    .foundry-attention-section,
    .foundry-saves-section,
    .foundry-resistance-section,
    .initiative-standalone-section {
        padding: 14px !important;
    }

    .foundry-attention-section .attention-section-title,
    .foundry-saves-section .compact-saves-title,
    .foundry-resistance-section .foundry-side-title > span {
        font-size: 1rem !important;
    }

    .foundry-attention-section .compact-defense-name {
        font-size: .92rem !important;
    }

    .foundry-saves-section .compact-save-head {
        font-size: .74rem !important;
    }
}

@media (max-width: 760px) {
    .foundry-attention-section,
    .foundry-saves-section,
    .foundry-resistance-section,
    .initiative-standalone-section {
        padding: 14px !important;
    }

    .foundry-attention-section .attention-section-title,
    .foundry-saves-section .compact-saves-title,
    .foundry-resistance-section .foundry-side-title > span {
        font-size: 1.08rem !important;
    }

    .foundry-saves-section .compact-save-head {
        font-size: .82rem !important;
    }

    .foundry-resistance-section .resistance-copy strong {
        font-size: 1rem !important;
    }

    .foundry-resistance-section .resistance-copy small {
        font-size: .8rem !important;
    }
}


/* =========================================================
   Stage 10.7.6 — compact sidebar cleanup
   ========================================================= */

.foundry-hp-triad {
    grid-template-columns: .78fr 1.72fr !important;
    gap: 9px !important;
}

.foundry-hp-box {
    min-width: 0 !important;
}

.foundry-current-hp-wide {
    min-height: 104px !important;
    padding-inline: 12px !important;
}

.foundry-current-hp-wide > span {
    font-size: .64rem !important;
}

.foundry-current-hp-wide > strong {
    font-size: 2.65rem !important;
}

.foundry-current-hp-wide > small {
    margin-top: -3px !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
}

.initiative-standalone-section {
    padding: 15px !important;
}

.initiative-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 11px !important;
    padding: 0 0 9px !important;
    border-bottom: 1px solid rgba(226,160,77,.28) !important;
    color: var(--gold-soft) !important;
    font-size: 1.06rem !important;
    font-weight: 950 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}

.initiative-section-title .initiative-standalone-icon {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    color: var(--gold-soft) !important;
}

.initiative-section-title .initiative-standalone-icon svg {
    width: 20px !important;
    height: 20px !important;
}

.initiative-controls-row {
    display: grid !important;
    grid-template-columns: 72px minmax(0,1fr) 44px !important;
    gap: 9px !important;
    align-items: center !important;
    min-height: 48px !important;
}

.initiative-controls-row .initiative-standalone-value {
    grid-column: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: center !important;
    font-size: 1.58rem !important;
}

.initiative-controls-row .initiative-source-standalone {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    font-size: .9rem !important;
}

.initiative-controls-row .standalone-d20-button {
    grid-column: 3 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    justify-self: end !important;
}

.foundry-attention-section {
    padding: 15px !important;
}

.foundry-attention-section .attention-section-title {
    margin: 0 0 11px !important;
    padding: 0 0 9px !important;
    border-bottom: 1px solid rgba(226,160,77,.28) !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: 1.06rem !important;
}

.foundry-attention-section .defense-perception-row {
    min-height: 62px !important;
    padding: 10px 11px !important;
    grid-template-columns: 24px 64px minmax(66px,1fr) 42px 18px !important;
    gap: 8px !important;
}

.foundry-attention-section .compact-defense-value {
    grid-column: 2 !important;
    text-align: center !important;
    font-size: 1.55rem !important;
}

.foundry-attention-section .compact-rank-pill {
    grid-column: 3 !important;
    justify-self: center !important;
    min-width: 74px !important;
}

.foundry-attention-section .compact-d20-button {
    grid-column: 4 !important;
}

.foundry-attention-section .compact-inline-result {
    grid-column: 5 !important;
}

.foundry-saves-section {
    padding: 15px !important;
}

.foundry-saves-section .compact-saves-title {
    margin: 0 0 11px !important;
    padding: 0 0 9px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226,160,77,.28) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--gold-soft) !important;
    font-family: inherit !important;
    font-size: 1.06rem !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}

.foundry-saves-section .compact-save-grid {
    border: 1px solid var(--line-soft) !important;
    border-radius: 9px !important;
    overflow: hidden !important;
}

.foundry-resistance-section {
    padding: 15px !important;
}

.foundry-resistance-section .foundry-side-title {
    margin: 0 0 11px !important;
    padding: 0 0 9px !important;
    border-bottom: 1px solid rgba(226,160,77,.28) !important;
}

@media (max-width: 760px) {
    .foundry-hp-triad {
        grid-template-columns: .72fr 1.78fr !important;
    }

    .initiative-controls-row {
        grid-template-columns: 68px minmax(0,1fr) 44px !important;
    }

    .foundry-attention-section .defense-perception-row {
        grid-template-columns: 22px 60px minmax(62px,1fr) 40px 16px !important;
        gap: 6px !important;
    }
}


/* =========================================================
   Stage 10.7.7 — HP alignment + one-line initiative + larger defenses
   ========================================================= */

/* ---------------------------------------------------------
   HP
   | Временные | | Текущие / Макс. |
   |     0      | |     124 / 228    |
   --------------------------------------------------------- */

.foundry-hp-triad {
    grid-template-columns: minmax(96px, .82fr) minmax(0, 1.78fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

.foundry-temp-hp,
.foundry-current-hp-wide {
    min-height: 116px !important;
    padding: 12px 10px !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
}

.foundry-temp-hp > span,
.foundry-current-hp-wide > span {
    min-height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 6px !important;
    color: #b8aba0 !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    letter-spacing: .035em !important;
    white-space: nowrap !important;
}

.foundry-current-hp-wide > span em {
    margin-left: 5px !important;
    color: #8f8378 !important;
    font-style: normal !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
}

.foundry-temp-hp > strong {
    margin-top: 0 !important;
    font-size: 2.1rem !important;
    line-height: 1 !important;
}

.foundry-current-hp-wide > strong {
    margin-top: 0 !important;
    font-size: 2.85rem !important;
    line-height: 1 !important;
}

.foundry-current-hp-wide > small {
    margin-top: 1px !important;
    color: #f0e5da !important;
    font-size: .86rem !important;
    font-weight: 800 !important;
}

.foundry-temp-hp .hp-mini-edit,
.foundry-current-hp-wide .hp-actions {
    margin-top: 8px !important;
}

/* ---------------------------------------------------------
   Initiative: bonus + select + D20 strictly on one line.
   --------------------------------------------------------- */
.initiative-controls-row {
    display: grid !important;
    grid-template-columns: minmax(68px, .72fr) minmax(126px, 1.65fr) 48px !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
}

.initiative-controls-row .initiative-standalone-value,
.initiative-controls-row .initiative-source-standalone,
.initiative-controls-row .standalone-d20-button {
    margin: 0 !important;
    align-self: center !important;
}

.initiative-controls-row .initiative-standalone-value {
    font-size: 1.68rem !important;
    justify-self: start !important;
    text-align: left !important;
}

.initiative-controls-row .initiative-source-standalone {
    min-height: 46px !important;
    font-size: .94rem !important;
    font-weight: 750 !important;
}

.initiative-controls-row .standalone-d20-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    justify-self: end !important;
}

/* ---------------------------------------------------------
   Attention: wider row and larger inner values.
   --------------------------------------------------------- */
.foundry-attention-section,
.foundry-saves-section {
    padding: 16px !important;
}

.foundry-attention-section .attention-section-title,
.foundry-saves-section .compact-saves-title {
    font-size: 1.12rem !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
}

.foundry-attention-section .defense-perception-row {
    min-height: 72px !important;
    grid-template-columns: 24px minmax(70px, .8fr) minmax(84px, 1fr) 48px 18px !important;
    gap: 10px !important;
    padding: 12px !important;
}

.foundry-attention-section .compact-defense-value {
    font-size: 1.72rem !important;
    line-height: 1 !important;
}

.foundry-attention-section .compact-rank-pill {
    min-width: 84px !important;
    min-height: 26px !important;
    padding: 4px 10px !important;
    font-size: .74rem !important;
}

.foundry-attention-section .compact-d20-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
}

/* ---------------------------------------------------------
   Saves: larger cells, names, ranks, bonuses and d20.
   --------------------------------------------------------- */
.foundry-saves-section .compact-save-grid {
    width: 100% !important;
    min-height: 148px !important;
}

.foundry-saves-section .compact-save-cell {
    min-width: 0 !important;
    padding: 12px 9px !important;
}

.foundry-saves-section .compact-save-head {
    gap: 5px !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
}

.foundry-saves-section .compact-rank-pill {
    min-width: 80px !important;
    min-height: 25px !important;
    padding: 4px 8px !important;
    font-size: .72rem !important;
}

.foundry-saves-section .compact-save-roll-row {
    margin-top: 8px !important;
    gap: 6px !important;
}

.foundry-saves-section .compact-save-roll-row strong {
    font-size: 1.55rem !important;
    line-height: 1 !important;
}

.foundry-saves-section .compact-save-roll-row .compact-d20-button,
.foundry-saves-section .compact-save-roll-row button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
}

.foundry-saves-section .compact-inline-result {
    font-size: .82rem !important;
}

/* Give the left rail a little more breathing room on desktop/tablet. */
@media (min-width: 761px) {
    .character-foundry-layout {
        grid-template-columns: minmax(340px, 372px) minmax(0, 1fr) !important;
    }
}

/* Tablet/phone: preserve single-line initiative as long as physically possible. */
@media (max-width: 760px) {
    .foundry-hp-triad {
        grid-template-columns: minmax(92px, .78fr) minmax(0, 1.82fr) !important;
    }

    .initiative-controls-row {
        grid-template-columns: 64px minmax(116px, 1fr) 44px !important;
        gap: 8px !important;
    }

    .initiative-controls-row .initiative-standalone-value {
        font-size: 1.55rem !important;
    }

    .initiative-controls-row .initiative-source-standalone {
        min-height: 44px !important;
        font-size: .9rem !important;
    }

    .initiative-controls-row .standalone-d20-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .foundry-attention-section .defense-perception-row {
        grid-template-columns: 22px 64px minmax(76px, 1fr) 44px 16px !important;
        gap: 7px !important;
    }

    .foundry-saves-section .compact-save-head {
        font-size: .84rem !important;
    }

    .foundry-saves-section .compact-save-roll-row strong {
        font-size: 1.45rem !important;
    }
}


/* =========================================================
   Stage 10.7.8 — sidebar alignment fixes
   ========================================================= */

/* HP headers aligned on the same baseline. */
.foundry-hp-triad {
    align-items: stretch !important;
}

.foundry-temp-hp,
.foundry-current-hp-wide {
    display: grid !important;
    grid-template-rows: 26px auto auto !important;
    align-content: start !important;
    padding-top: 12px !important;
}

.foundry-temp-hp > span,
.foundry-current-hp-wide > span {
    height: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.foundry-temp-hp > strong {
    margin-top: 12px !important;
}

.hp-current-max-inline {
    margin-top: 7px !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.hp-current-max-inline > strong {
    color: var(--gold-soft) !important;
    font-family: Georgia, serif !important;
    font-size: 2.7rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.hp-current-max-inline > span {
    color: #f2e7dc !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
}

.hp-current-max-inline > b {
    color: #f2e7dc !important;
    font-family: Georgia, serif !important;
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* Initiative: bonus, select and D20 on one single line. */
.initiative-controls-row {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) 48px !important;
    grid-template-rows: 48px !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
}

.initiative-controls-row .initiative-standalone-value {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.62rem !important;
    line-height: 1 !important;
}

.initiative-controls-row .initiative-source-standalone {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
}

.initiative-controls-row .standalone-d20-button {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
}

/* Saves: keep all content inside each third of the card. */
.foundry-saves-section .compact-save-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    overflow: hidden !important;
}

.foundry-saves-section .compact-save-cell {
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 11px 5px 10px !important;
}

.foundry-saves-section .compact-save-head {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    font-size: .79rem !important;
    white-space: nowrap !important;
}

.foundry-saves-section .compact-rank-pill {
    display: block !important;
    width: calc(100% - 8px) !important;
    min-width: 0 !important;
    max-width: 78px !important;
    margin: 6px auto 0 !important;
    padding: 4px 4px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-size: .67rem !important;
}

.foundry-saves-section .compact-save-roll-row {
    display: grid !important;
    grid-template-columns: minmax(40px, 1fr) 38px !important;
    gap: 3px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 9px !important;
}

.foundry-saves-section .compact-save-roll-row strong {
    min-width: 0 !important;
    text-align: right !important;
    font-size: 1.34rem !important;
    white-space: nowrap !important;
}

.foundry-saves-section .compact-save-roll-row button,
.foundry-saves-section .compact-save-roll-row .compact-d20-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
}

.foundry-saves-section .compact-inline-result {
    margin-top: 5px !important;
    text-align: center !important;
}

/* Attention: preserve larger readable bonus while staying in bounds. */
.foundry-attention-section .defense-perception-row {
    grid-template-columns: 22px 68px minmax(72px, 1fr) 44px 16px !important;
    gap: 7px !important;
}

.foundry-attention-section .compact-defense-value {
    font-size: 1.62rem !important;
}

@media (max-width: 760px) {
    .hp-current-max-inline > strong {
        font-size: 2.45rem !important;
    }

    .hp-current-max-inline > b {
        font-size: 1.06rem !important;
    }

    .initiative-controls-row {
        grid-template-columns: 58px minmax(0, 1fr) 42px !important;
        gap: 7px !important;
    }

    .initiative-controls-row .standalone-d20-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .foundry-saves-section .compact-save-cell {
        padding-inline: 4px !important;
    }

    .foundry-saves-section .compact-save-head {
        font-size: .72rem !important;
    }

    .foundry-saves-section .compact-rank-pill {
        font-size: .62rem !important;
    }

    .foundry-saves-section .compact-save-roll-row {
        grid-template-columns: minmax(36px, 1fr) 34px !important;
    }

    .foundry-saves-section .compact-save-roll-row button,
    .foundry-saves-section .compact-save-roll-row .compact-d20-button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    .foundry-saves-section .compact-save-roll-row strong {
        font-size: 1.24rem !important;
    }
}


/* =========================================================
   Stage 10.8.0 — PF2e conditions & effects foundation
   ========================================================= */
.active-condition-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}
.active-condition-chip {
    border: 1px solid rgba(232, 164, 70, .42);
    background: linear-gradient(180deg, rgba(66, 38, 22, .72), rgba(24, 18, 15, .96));
    color: #f4e9df;
    border-radius: 9px;
    padding: 7px 9px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    cursor: pointer;
}
.active-condition-chip:hover {
    border-color: var(--gold-soft);
    transform: translateY(-1px);
}
.active-condition-chip strong {
    min-width: 23px;
    height: 23px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: var(--gold-soft);
    color: #17100c;
    font-size: .78rem;
}
.pf2e-condition-editor {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(232, 164, 70, .25);
}
.condition-editor-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.condition-editor-heading strong {
    color: var(--gold-soft);
    font-size: 1.05rem;
}
.condition-editor-heading small {
    color: var(--muted);
    line-height: 1.35;
}
.condition-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
.condition-editor-grid label {
    min-width: 0;
    border: 1px solid rgba(232, 164, 70, .24);
    border-radius: 10px;
    background: rgba(12, 10, 9, .48);
    padding: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    align-items: center;
    gap: 10px;
}
.condition-editor-grid label > span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-weight: 700;
}
.condition-editor-grid label small {
    color: var(--muted);
    font-weight: 500;
    line-height: 1.25;
}
.condition-editor-grid input[type="number"] {
    width: 64px;
    min-width: 64px;
    text-align: center;
}
.condition-editor-grid .condition-toggle-row input[type="checkbox"] {
    appearance: none;
    width: 28px;
    height: 28px;
    justify-self: end;
    border: 1px solid rgba(232, 164, 70, .55);
    border-radius: 7px;
    background: #0e0b09;
    cursor: pointer;
}
.condition-editor-grid .condition-toggle-row input[type="checkbox"]:checked {
    background: var(--gold-soft);
    box-shadow: inset 0 0 0 6px #17100c;
}
@media (max-width: 620px) {
    .condition-editor-grid {
        grid-template-columns: 1fr;
    }
}

/* Stage 10.8.1 — advanced condition mechanics */
.condition-mechanics-summary {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.condition-mechanics-summary > span {
    border: 1px solid rgba(232,164,70,.22);
    background: rgba(12,10,9,.62);
    border-radius: 8px;
    padding: 6px 8px;
    color: #cfc2b7;
    font-size: .75rem;
    line-height: 1.25;
}
.condition-mechanics-summary b { color: var(--gold-soft); }
.condition-mechanics-summary em {
    color: #f0dfce;
    font-style: normal;
}

/* Stage 10.8.2 — conditions integrated with New Turn */
.quickened-group[hidden] { display: none !important; }
.quickened-action-pip {
    min-width: 38px !important;
    padding-inline: 6px !important;
    color: #efc275 !important;
}
.quickened-action-pip.spent {
    opacity: .34 !important;
    filter: grayscale(.75);
}
.turn-condition-toast {
    position: fixed;
    left: 50%;
    bottom: 94px;
    transform: translateX(-50%);
    z-index: 11000;
    width: min(620px, calc(100vw - 24px));
    display: grid;
    gap: 5px;
    padding: 10px 12px;
    border: 1px solid rgba(232,164,70,.48);
    border-radius: 11px;
    background: rgba(18,13,10,.96);
    box-shadow: 0 18px 46px rgba(0,0,0,.48);
    color: #eee2d7;
    font-size: .78rem;
    line-height: 1.4;
}
.turn-condition-toast[hidden] { display:none !important; }
.turn-condition-toast span + span {
    border-top: 1px solid rgba(232,164,70,.16);
    padding-top: 5px;
}
.persistent-condition-editor {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
}
.persistent-condition-editor label {
    grid-template-columns: minmax(0,1fr) !important;
    align-items: start !important;
}
.persistent-condition-editor input[type="text"],
.persistent-condition-editor input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
}
@media (max-width: 760px) {
    .persistent-condition-editor { grid-template-columns: 1fr; }
    .turn-condition-toast { bottom: 82px; font-size: .82rem; }
}


/* =========================================================
   Stage 10.8.3 — visible Conditions & Effects entry points
   ========================================================= */
.foundry-effects-section {
    padding: 15px !important;
}
.effects-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}
.effects-add-button {
    border: 1px solid rgba(232,164,70,.45) !important;
    border-radius: 8px !important;
    background: rgba(39,25,16,.9) !important;
    color: #f2e5d6 !important;
    min-height: 34px !important;
    padding: 6px 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer;
    flex: 0 0 auto;
}
.effects-add-button span {
    color: var(--gold-soft);
    font-size: 1rem;
}
.effects-add-button b {
    font-size: .72rem;
}
.effects-add-button:hover {
    border-color: var(--gold-soft) !important;
}

.effects-empty-state {
    width: 100% !important;
    min-height: 70px !important;
    border: 1px dashed rgba(232,164,70,.35) !important;
    border-radius: 10px !important;
    background: rgba(12,10,9,.38) !important;
    color: #cbbcaf !important;
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0,1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    text-align: left !important;
    cursor: pointer;
}
.effects-empty-state:hover {
    border-color: var(--gold-soft) !important;
    background: rgba(38,24,15,.55) !important;
}
.effects-empty-icon {
    color: var(--gold-soft);
    font-size: 1.25rem;
    text-align: center;
}
.effects-empty-state > span:last-child {
    display: grid;
    gap: 3px;
}
.effects-empty-state strong {
    color: #eee2d7;
    font-size: .8rem;
}
.effects-empty-state small {
    color: #9f9185;
    font-size: .68rem;
    line-height: 1.3;
}

.effects-active-strip {
    margin-top: 0 !important;
}

.action-effects-shortcut {
    margin-bottom: 12px;
}
.action-effects-shortcut > button {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(232,164,70,.30);
    border-radius: 10px;
    background: linear-gradient(180deg,rgba(42,27,17,.72),rgba(17,13,10,.92));
    color: #ede0d4;
    padding: 9px 12px;
    display: grid;
    grid-template-columns: 28px minmax(0,1fr);
    grid-template-rows: auto auto;
    column-gap: 9px;
    text-align: left;
    cursor: pointer;
}
.action-effects-shortcut > button > span {
    grid-row: 1 / 3;
    align-self: center;
    color: var(--gold-soft);
    font-size: 1.15rem;
}
.action-effects-shortcut b {
    font-size: .82rem;
}
.action-effects-shortcut small {
    color: #9f9185;
    font-size: .68rem;
}
.action-effects-shortcut > button:hover {
    border-color: var(--gold-soft);
}

.condition-modal-intro {
    margin: 7px 0 14px;
    color: #ad9f93;
    font-size: .76rem;
    line-height: 1.45;
}
.condition-editor-grid label {
    position: relative;
    padding-right: 82px !important;
}
.condition-step-controls {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    gap: 4px;
}
.condition-step-controls button {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
    padding: 0 !important;
    border: 1px solid rgba(232,164,70,.34) !important;
    border-radius: 7px !important;
    background: #17110d !important;
    color: #e8d4c0 !important;
    font-size: 1rem !important;
    display: grid !important;
    place-items: center !important;
}
.condition-step-controls button:hover {
    border-color: var(--gold-soft) !important;
}
.persistent-condition-editor label {
    padding-right: 10px !important;
}
.persistent-condition-editor .condition-step-controls {
    display: none !important;
}

@media (max-width: 760px) {
    .effects-section-title {
        align-items: center !important;
    }
    .effects-section-title > span {
        font-size: .94rem;
    }
    .effects-add-button b {
        display: none;
    }
    .effects-add-button {
        width: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        justify-content: center !important;
    }
    .condition-editor-grid label {
        padding-right: 78px !important;
    }
}


/* =========================================================
   Stage 10.8.4 — conditions button moved out of HP
   ========================================================= */

/* В нижней строке ОЗ больше нет отдельной кнопки состояний. */
.foundry-hp-states {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Кнопка "+ Добавить" — единственная основная точка добавления состояний
   в левой панели и должна быть хорошо заметна. */
.foundry-effects-section .effects-add-button {
    min-height: 36px !important;
    padding-inline: 11px !important;
    border-color: rgba(232,164,70,.58) !important;
}

.foundry-effects-section .effects-add-button:hover,
.foundry-effects-section .effects-add-button:focus-visible {
    border-color: var(--gold-soft) !important;
    box-shadow: 0 0 0 1px rgba(232,164,70,.18) inset !important;
}


/* =========================================================
   Stage 10.8.5 — condition controls + HP lower row alignment
   ========================================================= */

/* Three status panels share the full width and align symmetrically. */
.foundry-hp-section .foundry-state-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
}

.foundry-hp-section .foundry-state-chip {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.foundry-hp-section .foundry-state-chip > span,
.foundry-hp-section .foundry-state-chip > strong {
    width: 100% !important;
    text-align: center !important;
}

/* Active conditions: chip opens editor, X removes only that condition. */
.effects-active-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

.active-condition-chip-wrap {
    display: inline-flex !important;
    align-items: stretch !important;
    border: 1px solid rgba(232,164,70,.42) !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(66,38,22,.72), rgba(24,18,15,.96)) !important;
}

.active-condition-chip-wrap .active-condition-chip {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.condition-remove-form {
    margin: 0 !important;
    display: flex !important;
}

.condition-remove-button {
    width: 32px !important;
    min-width: 32px !important;
    border: 0 !important;
    border-left: 1px solid rgba(232,164,70,.26) !important;
    border-radius: 0 !important;
    background: rgba(80,25,20,.22) !important;
    color: #cfa99f !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
}

.condition-remove-button:hover,
.condition-remove-button:focus-visible {
    background: rgba(145,45,35,.42) !important;
    color: #ffd6cf !important;
}

@media (max-width: 760px) {
    .foundry-hp-section .foundry-state-row {
        gap: 6px !important;
    }

    .foundry-hp-section .foundry-state-chip {
        min-height: 60px !important;
        padding-inline: 4px !important;
    }
}


/* =========================================================
   Stage 10.8.6 — Drained fully affects HP
   ========================================================= */

.hp-current-max-inline.hp-drained-active > b {
    color: #efaa72 !important;
}

.hp-drained-note {
    width: 100%;
    margin-top: 4px;
    color: #c69476;
    font-size: .62rem;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

.hp-drained-note strong {
    color: #efaa72;
}

.hp-drained-note small {
    color: #8f8076;
    margin-left: 3px;
}

@media (max-width: 760px) {
    .hp-drained-note {
        font-size: .6rem;
    }
}


/* =========================================================
   Stage 10.8.7 — Quickened is a real additional action
   ========================================================= */

.quickened-floating-pip {
    color: #f2bd62 !important;
    border-color: rgba(237, 173, 73, .72) !important;
    min-width: 42px !important;
    padding-inline: 5px !important;
}

.quickened-floating-pip[hidden] {
    display: none !important;
}

.quickened-floating-pip.is-spent {
    opacity: .32 !important;
    filter: grayscale(.8) !important;
}

/* Keep the special action visually distinct from the three normal actions. */
.quickened-group {
    border-left: 1px solid rgba(237,173,73,.18);
    padding-left: 8px;
}


/* =========================================================
   Stage 10.8.8 — condition mechanics audit
   ========================================================= */
.condition-impact-list {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

.condition-impact-list > span {
    padding: 6px 8px;
    border-left: 2px solid rgba(232,164,70,.55);
    background: rgba(17,13,10,.42);
    color: #ad9f93;
    font-size: .67rem;
    line-height: 1.35;
}

.condition-impact-list b {
    color: #ead8c4;
}


/* =========================================================
   Stage 10.8.9 — persistent damage visibility
   ========================================================= */

.active-condition-chip > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.active-condition-chip > span > small {
    color: #bda78f !important;
    font-size: .62rem !important;
    font-weight: 600 !important;
    text-transform: lowercase;
}

.active-condition-chip-wrap .active-condition-chip > strong {
    min-width: 31px !important;
    padding-inline: 6px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

/* Stage 10.8.10 — canonical persistent damage types */
.persistent-condition-editor select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
}


/* =========================================================
   Stage 10.8.11 — system rolls in roll history
   ========================================================= */
.roll-history-entry[data-roll-kind="persistent_damage"] b {
    color: #e7a06f;
}

.roll-history-entry[data-roll-kind="flat_check"] b {
    color: #d8c394;
}


/* Stage 10.8.12 — live removal of recovered persistent damage */
.condition-mechanics-summary:empty,
.effects-active-strip:empty {
    display: none !important;
}


/* Stage 10.8.13 — live persistent-damage HP update */
@keyframes hp-live-flash {
    0%   { transform: scale(1); text-shadow: none; }
    35%  { transform: scale(1.08); text-shadow: 0 0 14px rgba(218,84,65,.55); }
    100% { transform: scale(1); text-shadow: none; }
}

.hp-live-flash {
    animation: hp-live-flash .48s ease-out;
}

/* Stage 10.9.0 — temporary effects */
.temporary-effect-editor{margin-top:18px;padding-top:18px;border-top:1px solid rgba(220,159,73,.25)}
.temporary-effect-form{display:grid;grid-template-columns:minmax(180px,1.3fr) minmax(130px,.8fr) minmax(180px,1.1fr) 120px;gap:10px;align-items:end}
.temporary-effect-form label{display:grid;gap:6px;min-width:0;font-weight:700}.temporary-effect-form input,.temporary-effect-form select{width:100%;min-height:44px}
.effect-source-field{grid-column:1/4}.effect-add-submit{min-height:44px}
.temporary-effect-list{display:grid;gap:7px;margin-top:8px}.temporary-effect-chip{display:grid;grid-template-columns:minmax(0,1fr) auto;border:1px solid rgba(220,159,73,.42);border-radius:10px;overflow:hidden;background:rgba(130,80,24,.12)}
.temporary-effect-main{border:0;background:transparent;color:inherit;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;text-align:left;padding:9px 10px;cursor:pointer}
.temporary-effect-main span{font-weight:800}.temporary-effect-main small{grid-column:1;opacity:.68;font-size:.72rem}.temporary-effect-main strong{grid-column:2;grid-row:1/3;align-self:center;color:#e7a64c;font-size:1rem}
.temporary-effect-chip form{display:flex}.temporary-effect-chip .condition-remove-button{height:100%;border-radius:0}
@media(max-width:900px){.temporary-effect-form{grid-template-columns:1fr 1fr}.effect-source-field,.effect-add-submit{grid-column:1/-1}}
@media(max-width:560px){.temporary-effect-form{grid-template-columns:1fr}.effect-source-field,.effect-add-submit{grid-column:1}}


/* =========================================================
   Stage 10.9.1 — tabbed Conditions / Temporary Effects modal
   ========================================================= */

#conditions-modal .sheet-modal-card {
    width: min(760px, calc(100vw - 24px)) !important;
    max-height: min(88vh, 900px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#conditions-modal .condition-modal-intro {
    margin-bottom: 12px !important;
}

.conditions-modal-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 4px 0 14px;
    flex: 0 0 auto;
}

.conditions-modal-tab {
    min-height: 44px;
    border: 1px solid rgba(232,164,70,.32);
    border-radius: 9px;
    background: rgba(18,13,10,.75);
    color: #b8aaa0;
    font-weight: 800;
    cursor: pointer;
}

.conditions-modal-tab.is-active {
    border-color: rgba(232,164,70,.72);
    background: linear-gradient(180deg, rgba(74,45,21,.92), rgba(35,22,14,.96));
    color: #f2c16f;
    box-shadow: inset 0 -2px 0 rgba(232,164,70,.42);
}

.conditions-modal-panels {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.conditions-modal-panel {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-gutter: stable;
}

.conditions-modal-panel[hidden] {
    display: none !important;
}

#conditions-modal .temporary-effect-editor {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

#conditions-modal .temporary-effect-editor .condition-editor-heading {
    margin-top: 0 !important;
}

#conditions-modal .temporary-effect-form {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: end !important;
}

#conditions-modal .temporary-effect-form label {
    min-width: 0 !important;
}

#conditions-modal .temporary-effect-form .effect-source-field,
#conditions-modal .temporary-effect-form .effect-add-submit {
    grid-column: 1 / -1 !important;
}

#conditions-modal .temporary-effect-form input,
#conditions-modal .temporary-effect-form select,
#conditions-modal .temporary-effect-form button {
    min-height: 46px !important;
}

#conditions-modal .temporary-effect-form .effect-add-submit {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 4px;
    box-shadow: 0 -8px 18px rgba(18,13,10,.78);
}

#conditions-modal .condition-editor-grid {
    grid-template-columns: 1fr 1fr !important;
}

#conditions-modal .persistent-condition-editor {
    grid-template-columns: 1fr 1fr 1fr !important;
}

#conditions-modal .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: linear-gradient(180deg, rgba(24,18,15,.35), rgba(24,18,15,.98) 35%);
    padding-top: 12px;
    margin-top: 12px;
}

@media (max-width: 760px) {
    #conditions-modal .sheet-modal-card {
        width: calc(100vw - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
        border-radius: 14px !important;
    }

    .conditions-modal-tabs {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #18120f;
        padding-bottom: 8px;
    }

    #conditions-modal .condition-editor-grid,
    #conditions-modal .temporary-effect-form,
    #conditions-modal .persistent-condition-editor {
        grid-template-columns: 1fr !important;
    }

    #conditions-modal .temporary-effect-form .effect-source-field,
    #conditions-modal .temporary-effect-form .effect-add-submit {
        grid-column: 1 !important;
    }
}


/* =========================================================
   Stage 10.9.2 — ready effects + true viewport modal sizing
   ========================================================= */

#conditions-modal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4200 !important;
    display: grid !important;
    place-items: center !important;
    padding:
        max(10px, env(safe-area-inset-top))
        max(10px, env(safe-area-inset-right))
        max(10px, env(safe-area-inset-bottom))
        max(10px, env(safe-area-inset-left)) !important;
    overflow: hidden !important;
}
#conditions-modal[hidden] { display:none !important; }

/* 10.9.1 targeted a non-existent .sheet-modal-card.
   Actual markup is .modal-card.hp-modal-card. */
#conditions-modal > .modal-card.hp-modal-card {
    width: min(760px, calc(100vw - 24px)) !important;
    height: min(900px, calc(100dvh - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 0 !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
#conditions-modal > .modal-card.hp-modal-card > .eyebrow,
#conditions-modal > .modal-card.hp-modal-card > h2,
#conditions-modal > .modal-card.hp-modal-card > .condition-modal-intro,
#conditions-modal > .modal-card.hp-modal-card > .conditions-modal-tabs {
    flex:0 0 auto !important;
}
#conditions-modal .conditions-modal-panels {
    flex:1 1 0 !important;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
}
#conditions-modal .conditions-modal-panel {
    height:100% !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-right:5px !important;
    padding-bottom:10px !important;
}
#conditions-modal .modal-actions,
#conditions-modal .effect-add-submit {
    position:sticky !important;
    bottom:0 !important;
    z-index:8 !important;
}
#conditions-modal .modal-actions {
    padding-top:16px !important;
    padding-bottom:2px !important;
    background:linear-gradient(180deg,rgba(24,18,15,0),#18120f 28%) !important;
}
#conditions-modal .effect-add-submit {
    box-shadow:0 -12px 20px rgba(18,13,10,.82) !important;
}

/* Ready presets */
.effect-preset-grid { display:grid; gap:10px; margin:2px 0 16px; }
.effect-preset-card {
    border:1px solid rgba(232,164,70,.30);
    border-radius:11px;
    background:rgba(18,13,10,.58);
    padding:11px;
}
.effect-preset-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}
.effect-preset-head > div { display:grid; gap:3px; min-width:0; }
.effect-preset-head strong { color:#f0d9c4; font-size:.92rem; }
.effect-preset-head small { color:#9e9186; line-height:1.35; font-size:.72rem; }
.effect-preset-badge {
    flex:0 0 auto;
    border:1px solid rgba(232,164,70,.34);
    border-radius:999px;
    padding:4px 7px;
    color:#d7ae73;
    font-size:.63rem;
    font-weight:800;
}
.effect-preset-actions {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:10px;
}
.effect-preset-actions button {
    min-height:36px;
    border:1px solid rgba(232,164,70,.38);
    border-radius:8px;
    background:rgba(53,32,18,.72);
    color:#ecd7c1;
    padding:6px 10px;
    font-weight:800;
    cursor:pointer;
}
.effect-preset-actions button:hover,
.effect-preset-actions button:focus-visible {
    border-color:#e8a446;
    color:#ffd18a;
}
.aid-preset-target {
    display:grid;
    grid-template-columns:auto minmax(130px,200px);
    gap:9px;
    align-items:center;
    margin-top:10px;
    font-size:.74rem;
    color:#b8aaa0;
}
.aid-preset-target select { min-height:38px !important; }
.manual-effect-heading { margin-top:14px !important; }

@keyframes effect-form-highlight {
    0%{box-shadow:0 0 0 0 rgba(232,164,70,0)}
    35%{box-shadow:0 0 0 2px rgba(232,164,70,.52)}
    100%{box-shadow:0 0 0 0 rgba(232,164,70,0)}
}
.effect-form-highlight { animation:effect-form-highlight .7s ease-out; border-radius:10px; }

/* Tablet landscape + portrait */
@media (min-width:761px) and (max-width:1366px) {
    #conditions-modal > .modal-card.hp-modal-card {
        width:min(720px,calc(100vw - 28px)) !important;
        height:calc(100dvh - 28px) !important;
        max-height:calc(100dvh - 28px) !important;
        padding:16px !important;
    }
    #conditions-modal > .modal-card.hp-modal-card > h2 {
        font-size:1.72rem !important;
        line-height:1.05 !important;
        margin-bottom:6px !important;
    }
    #conditions-modal .condition-modal-intro {
        font-size:.76rem !important;
        line-height:1.35 !important;
        margin-bottom:8px !important;
    }
    #conditions-modal .conditions-modal-tabs { margin-bottom:8px !important; }
    #conditions-modal .conditions-modal-tab { min-height:40px !important; }
}

/* Phone */
@media (max-width:760px) {
    #conditions-modal:not([hidden]) {
        padding:
            max(5px,env(safe-area-inset-top))
            5px
            max(5px,env(safe-area-inset-bottom))
            5px !important;
    }
    #conditions-modal > .modal-card.hp-modal-card {
        width:100% !important;
        height:calc(100dvh - 10px) !important;
        max-height:calc(100dvh - 10px) !important;
        padding:13px !important;
        border-radius:14px !important;
    }
    #conditions-modal > .modal-card.hp-modal-card > .eyebrow {
        font-size:.66rem !important;
        margin-bottom:4px !important;
    }
    #conditions-modal > .modal-card.hp-modal-card > h2 {
        font-size:1.42rem !important;
        line-height:1.02 !important;
        margin:0 0 6px !important;
    }
    #conditions-modal .condition-modal-intro { display:none !important; }
    #conditions-modal .conditions-modal-tabs {
        position:static !important;
        grid-template-columns:1fr 1fr !important;
        gap:6px !important;
        margin:3px 0 7px !important;
        padding:0 !important;
        background:transparent !important;
    }
    #conditions-modal .conditions-modal-tab {
        min-height:38px !important;
        padding:5px 6px !important;
        font-size:.74rem !important;
    }
    #conditions-modal .conditions-modal-panel {
        padding-right:2px !important;
        padding-bottom:8px !important;
    }
    .aid-preset-target { grid-template-columns:1fr; gap:5px; }
    .effect-preset-actions {
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .effect-preset-actions button {
        width:100%;
        padding-inline:5px;
        font-size:.7rem;
    }
}

/* Stage 10.9.3 — Aid explanation and one-shot effects */
.aid-explanation{margin-top:10px;display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;padding:9px 10px;border:1px solid rgba(232,164,70,.25);border-radius:9px;background:rgba(36,25,18,.62);color:#ad9e92}
.aid-explanation>span{color:#e8a446;font-size:1rem;line-height:1.3}
.aid-explanation p{margin:0;font-size:.69rem;line-height:1.42}.aid-explanation strong,.aid-explanation b{color:#ead8c4}


/* Stage 10.9.4 — unified PF2e scrollbars
   Keep modal/internal scrolling functional while matching the dark-gold UI. */

/* Firefox */
:root,
html,
body,
.pf-modal,
.pf-modal *,
.modal,
.modal *,
[role="dialog"],
[role="dialog"] * {
    scrollbar-width: thin;
    scrollbar-color: #8f6128 #17130f;
}

/* Chromium / Safari / Edge */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #17130f;
    border-left: 1px solid rgba(232, 164, 70, .12);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8f6128 0%, #6f491f 100%);
    border: 2px solid #17130f;
    border-radius: 999px;
    min-height: 34px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #c88937 0%, #95632a 100%);
}

::-webkit-scrollbar-thumb:active {
    background: #e8a446;
}

::-webkit-scrollbar-corner {
    background: #17130f;
}

/* Hide the browser's old scrollbar arrow buttons where supported. */
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}


/* Stage 10.9.5 — effect duration controls */
#effect-duration-value-wrap[hidden]{display:none!important}
.temporary-effect-main small{line-height:1.25!important}
.effect-preset-badge{white-space:nowrap}
@media(max-width:760px){
  #temporary-effect-form{grid-template-columns:1fr!important}
  #temporary-effect-form>label,
  #temporary-effect-form .effect-source-field,
  #temporary-effect-form .effect-add-submit{grid-column:1!important}
}


/* Stage 10.9.10 — one-shot roll synchronization */
.roll-modal button:disabled,
#roll-modal button:disabled {
    opacity: .58;
    cursor: wait;
}

/* Stage 10.10.0 — temporary effect stacking help */
.effect-rule-hint {
    display:block;
    margin-top:.45rem;
    max-width:32rem;
    color:var(--muted);
    font-size:.82rem;
    line-height:1.35;
}

/* Stage 10.10.1 — persistent damage conflicts */
.persistent-existing-list{display:grid;gap:7px;margin:0 0 10px;padding:10px;border:1px solid rgba(232,164,70,.28);border-radius:10px;background:rgba(20,14,11,.48)}
.persistent-existing-list>strong{color:#e6c99f;font-size:.78rem}
.persistent-existing-row{display:grid;gap:2px;padding:7px 8px;border-radius:8px;background:rgba(232,164,70,.06)}
.persistent-existing-row>span{font-weight:800}
.persistent-existing-row>small{color:#a59689;line-height:1.35}
.persistent-rule-note{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;margin-bottom:10px;padding:9px 10px;border:1px solid rgba(232,164,70,.22);border-radius:9px;color:#ad9e92;background:rgba(36,25,18,.55)}
.persistent-rule-note>span{color:#e8a446}
.persistent-rule-note p{margin:0;font-size:.69rem;line-height:1.42}
.persistent-rule-note strong{color:#ead8c4}


/* Stage 10.10.2 — persistent damage chip value */
.active-condition-chip[data-open-conditions] > span > small {
    display: block;
    margin-top: 2px;
    opacity: .72;
    font-size: .68rem;
    line-height: 1.15;
}


/* Stage 10.10.3 — unified PF2e modifier resolver */
.roll-bonus-toggle.is-suppressed {
    opacity: .52;
    border-style: dashed;
    background: rgba(80, 67, 57, .16);
}
.roll-bonus-toggle.is-suppressed strong {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.roll-bonus-toggle.is-suppressed small {
    color: #b7a99e !important;
    line-height: 1.3;
}
.roll-bonus-toggle.is-suppressed .roll-toggle-value {
    color: #9b8f86;
}
.roll-bonus-toggle.is-suppressed .roll-toggle-switch {
    opacity: .35;
}


/* Stage 10.10.4 — multi-target temporary effects */
.effect-target-fieldset {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(232,164,70,.24);
    border-radius: 10px;
    background: rgba(22,16,12,.36);
}
.effect-target-fieldset legend {
    padding: 0 6px;
    color: #e6c99f;
    font-weight: 800;
}
.effect-target-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 7px;
}
.effect-target-choice {
    display: flex !important;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgba(232,164,70,.18);
    border-radius: 8px;
    background: rgba(255,255,255,.018);
    cursor: pointer;
}
.effect-target-choice:has(input:checked) {
    border-color: rgba(232,164,70,.72);
    background: rgba(232,164,70,.10);
    box-shadow: inset 0 0 0 1px rgba(232,164,70,.12);
}
.effect-target-choice input {
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    accent-color: #e8a446;
    flex: 0 0 auto;
}
.effect-target-choice span {
    min-width: 0;
    font-size: .76rem;
    line-height: 1.2;
}
.effect-specific-skills {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(232,164,70,.16);
}
.effect-specific-skills summary {
    color: #d9bd98;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}
.effect-skill-target-grid {
    margin-top: 8px;
    grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 900px) {
    .effect-target-grid,
    .effect-skill-target-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}
@media (max-width: 560px) {
    .effect-target-grid,
    .effect-skill-target-grid {
        grid-template-columns: 1fr;
    }
}


/* Stage 10.10.5 — automatic spell effects */
.spell-effects-panel{display:grid;gap:16px}
.spell-effects-lead{margin:.35rem 0 0;color:var(--muted);max-width:48rem;line-height:1.45}
.spell-stage-badge{align-self:start;padding:6px 9px;border:1px solid rgba(232,164,70,.45);border-radius:999px;color:#e8a446;font-size:.68rem;font-weight:900;letter-spacing:.08em}
.spell-effect-result{padding:10px 12px;border-radius:10px;font-size:.82rem;font-weight:700}
.spell-effect-result.is-success{border:1px solid rgba(92,180,106,.42);background:rgba(36,97,48,.18);color:#a9d9b0}
.spell-effect-result.is-warning{border:1px solid rgba(232,164,70,.36);background:rgba(120,78,26,.16);color:#e4bf89}
.spell-auto-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.spell-auto-card{display:grid;gap:11px;padding:14px;border:1px solid rgba(232,164,70,.24);border-radius:12px;background:linear-gradient(180deg,rgba(37,27,20,.78),rgba(18,14,11,.72))}
.spell-auto-card header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.spell-auto-card h3{margin:4px 0 0;font-family:var(--font-display);font-size:1.35rem}
.spell-rank-chip,.spell-action-chip{display:inline-flex;align-items:center;min-height:24px;padding:3px 7px;border:1px solid rgba(232,164,70,.25);border-radius:999px;color:#d8b27d;font-size:.65rem;font-weight:800}
.spell-auto-card>p{margin:0;color:#c7b9aa;line-height:1.45;font-size:.83rem}
.spell-auto-meta{display:flex;flex-wrap:wrap;gap:6px}
.spell-auto-meta span{padding:4px 7px;border-radius:7px;background:rgba(255,255,255,.035);color:#9f9185;font-size:.67rem}
.spell-auto-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.spell-auto-actions form,.spell-single-apply{margin:0}
.spell-auto-actions button,.spell-single-apply button{width:100%;min-height:46px;border:1px solid rgba(232,164,70,.42);border-radius:9px;background:rgba(232,164,70,.08);color:#ead4b5;cursor:pointer;font-weight:800}
.spell-auto-actions button{display:flex;align-items:center;justify-content:center;gap:7px}
.spell-auto-actions button small{font-size:.65rem;color:#ae9c8c}
.spell-auto-actions button strong{font-size:1rem;color:#e8a446}
.spell-auto-actions button:hover,.spell-single-apply button:hover{background:rgba(232,164,70,.15);border-color:rgba(232,164,70,.72)}
.spell-rule-note{color:#8f8277;line-height:1.4;font-size:.68rem}
.spell-automation-info{display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;padding:11px 12px;border:1px solid rgba(232,164,70,.2);border-radius:10px;background:rgba(232,164,70,.035)}
.spell-automation-info>span{color:#e8a446}
.spell-automation-info strong{color:#dec29a}
.spell-automation-info p{margin:3px 0 0;color:#9f9185;font-size:.75rem;line-height:1.42}
@media(max-width:850px){.spell-auto-grid{grid-template-columns:1fr}}
@media(max-width:520px){.spell-auto-actions{grid-template-columns:1fr}.spell-auto-card header{align-items:center}}


/* Stage 10.10.6 — class-aware spell preparation */
.spellbook-panel{display:grid;gap:14px}
.spellbook-head{align-items:flex-start}
.spellbook-layout{display:grid;grid-template-columns:minmax(230px,280px) minmax(0,1fr);gap:14px}
.spellcasting-source-card{align-self:start;display:grid;gap:8px;padding:12px;border:1px solid rgba(232,164,70,.24);border-radius:12px;background:rgba(20,15,12,.55)}
.spell-source-line{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(232,164,70,.11)}
.spell-source-line span{color:#928579;font-size:.7rem}
.spell-source-line strong{text-align:right;color:#dfc49e;font-size:.76rem}
.spell-source-form{display:grid;gap:8px;margin-top:6px}
.spell-source-form label{display:grid;gap:4px;color:#aa9b8d;font-size:.68rem}
.spell-source-form input,.spell-source-form select{width:100%;min-width:0}
.spell-source-form button{min-height:38px;border:1px solid rgba(232,164,70,.35);border-radius:8px;background:rgba(232,164,70,.08);color:#e8cba3;font-weight:800;cursor:pointer}
.spellcasting-mode-note{display:grid;gap:3px;margin-top:3px;padding:9px;border-radius:8px;background:rgba(232,164,70,.045)}
.spellcasting-mode-note strong{color:#e0c398;font-size:.72rem}
.spellcasting-mode-note small{color:#928579;font-size:.66rem;line-height:1.4}
.spellbook-ranks{display:grid;gap:10px}
.spell-rank-section{border:1px solid rgba(232,164,70,.18);border-radius:11px;overflow:hidden;background:rgba(16,12,10,.42)}
.spell-rank-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid rgba(232,164,70,.15);background:rgba(232,164,70,.035)}
.spell-rank-head>div{display:flex;align-items:center;gap:8px}
.spell-rank-head>span{color:#8f8277;font-size:.65rem}
.spell-rank-number{display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(232,164,70,.42);border-radius:7px;color:#e8a446;font-weight:900}
.prepared-spell-list{display:grid}
.prepared-spell-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-bottom:1px solid rgba(232,164,70,.09)}
.prepared-spell-row.is-spent{opacity:.48;background:rgba(95,37,31,.08)}
.prepared-spell-row.is-spent .prepared-spell-main strong{text-decoration:line-through}
.prepared-spell-main{display:grid;gap:2px;min-width:0}
.prepared-spell-main strong{font-size:.8rem}
.prepared-spell-main small{color:#908276;font-size:.65rem;white-space:normal}
.prepared-spell-actions{display:flex;gap:5px;flex:0 0 auto}
.prepared-spell-actions form{margin:0}
.spell-spend-button,.spell-remove-button{min-height:32px;border:1px solid rgba(232,164,70,.25);border-radius:7px;background:transparent;color:#c9b294;cursor:pointer}
.spell-spend-button{padding:0 9px;font-size:.67rem}
.spell-remove-button{width:32px;color:#d18e81;font-size:1rem}
.spell-add-row{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(120px,1fr) auto;gap:6px;padding:9px}
.spell-add-row input{min-width:0}
.spell-add-row button{padding:0 10px;border:1px solid rgba(232,164,70,.35);border-radius:8px;background:rgba(232,164,70,.08);color:#e7c89d;font-weight:800;cursor:pointer}
.spell-rank-empty{padding:10px 11px;color:#82766c;font-size:.68rem;font-style:italic}
.spell-effect-library{border-top:1px solid rgba(232,164,70,.16);padding-top:10px}
.spell-effect-library summary{cursor:pointer;color:#d9bd96;font-weight:800;font-size:.76rem}
.spell-effect-library .spell-auto-grid{margin-top:10px}
.spell-noncaster-card{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px dashed rgba(232,164,70,.25);border-radius:12px;color:#9d8f82}
.spell-noncaster-card>span{color:#e8a446;font-size:1.4rem}
.spell-noncaster-card h3{margin:0 0 5px;color:#d7bea0}
.spell-noncaster-card p{margin:0;line-height:1.45}
.roll-history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.roll-history-clear-button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid rgba(232,164,70,.22);border-radius:7px;background:rgba(232,164,70,.04);color:#ba8b58;cursor:pointer}
.roll-history-clear-button:hover{border-color:rgba(232,164,70,.6);background:rgba(232,164,70,.1);color:#e8a446}
@media(max-width:950px){.spellbook-layout{grid-template-columns:1fr}.spellcasting-source-card{position:static}}
@media(max-width:650px){.spell-add-row{grid-template-columns:1fr}.prepared-spell-row{align-items:flex-start}.spellbook-head form{width:100%}.spellbook-head .tab-primary-action{width:100%}}


/* Stage 10.10.7 — Foundry-like spell picker */
.spell-picker-notice{padding:10px 12px;border-radius:9px;font-size:.75rem;font-weight:700}
.spell-picker-notice.is-error{border:1px solid rgba(191,83,70,.38);background:rgba(112,37,30,.16);color:#e1a69e}
.spell-add-picker-row{grid-template-columns:1fr}
.spell-picker-open{width:100%;min-height:38px;border:1px dashed rgba(232,164,70,.32);border-radius:8px;background:rgba(232,164,70,.035);color:#d9bd97;font-weight:800;cursor:pointer}
.spell-picker-open:hover{border-style:solid;border-color:rgba(232,164,70,.65);background:rgba(232,164,70,.08)}
.spell-picker-open:disabled{opacity:.35;cursor:not-allowed}
.spell-info-button{width:32px;min-height:32px;border:1px solid rgba(232,164,70,.22);border-radius:7px;background:transparent;color:#d9aa6a;cursor:pointer}
.spell-cast-button{min-height:32px;padding:0 10px;border:1px solid rgba(80,155,94,.38);border-radius:7px;background:rgba(58,122,70,.10);color:#a8d8af;font-size:.67rem;font-weight:800;cursor:pointer}
.spell-cast-button:disabled{opacity:.38;cursor:not-allowed}
.spell-picker-modal[hidden]{display:none!important}
.spell-picker-modal{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:20px}
.spell-picker-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(3px)}
.spell-picker-dialog{position:relative;z-index:1;width:min(1120px,96vw);height:min(780px,92vh);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden;border:1px solid rgba(232,164,70,.34);border-radius:14px;background:#17120f;box-shadow:0 28px 80px rgba(0,0,0,.65)}
.spell-picker-head{display:flex;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid rgba(232,164,70,.16)}
.spell-picker-head h2{margin:4px 0 0;font-family:var(--font-display);font-size:1.65rem}
.spell-picker-head p{margin:5px 0 0;color:#97897d;font-size:.75rem}
.spell-picker-close{width:40px;height:40px;border:1px solid rgba(232,164,70,.25);border-radius:9px;background:transparent;color:#d7c3aa;font-size:1.4rem;cursor:pointer}
.spell-picker-toolbar{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(130px,.7fr));gap:8px;padding:10px 14px;border-bottom:1px solid rgba(232,164,70,.12);background:rgba(255,255,255,.012)}
.spell-picker-toolbar label{display:grid;gap:4px;color:#97897d;font-size:.64rem}
.spell-picker-toolbar input,.spell-picker-toolbar select{width:100%;min-width:0}
.spell-picker-body{display:grid;grid-template-columns:minmax(300px,.92fr) minmax(360px,1.08fr);min-height:0}
.spell-picker-results{overflow:auto;padding:9px;border-right:1px solid rgba(232,164,70,.13)}
.spell-picker-result{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) 28px;gap:8px;align-items:start;margin-bottom:6px;padding:9px;border:1px solid rgba(232,164,70,.14);border-radius:9px;background:rgba(255,255,255,.012);color:inherit;text-align:left;cursor:pointer}
.spell-picker-result:hover,.spell-picker-result.active{border-color:rgba(232,164,70,.55);background:rgba(232,164,70,.07)}
.spell-result-rank{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(232,164,70,.32);border-radius:7px;color:#e8a446;font-weight:900}
.spell-result-copy{display:grid;gap:1px;min-width:0}
.spell-result-copy strong{font-size:.78rem}
.spell-result-copy small{color:#a08f80;font-size:.64rem}
.spell-result-copy em{margin-top:3px;color:#887b70;font-size:.63rem;line-height:1.3;font-style:normal}
.spell-result-info{color:#bb8b52}
.spell-picker-no-results{padding:24px 12px;text-align:center;color:#81746a;font-size:.74rem}
.spell-picker-details{min-height:0;overflow:auto;padding:16px}
.spell-detail-empty{height:100%;display:grid;place-content:center;justify-items:center;gap:6px;color:#80746a;text-align:center}
.spell-detail-empty>span{font-size:2rem;color:#a7783e}
.spell-detail-card{display:grid;gap:13px}
.spell-detail-title{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.spell-detail-title span,.spell-detail-title small{color:#9b8b7d;font-size:.68rem}
.spell-detail-title h3{margin:3px 0 0;font-family:var(--font-display);font-size:1.55rem}
.spell-detail-rank{display:grid!important;place-items:center;width:42px;height:42px;border:1px solid rgba(232,164,70,.45);border-radius:50%!important;color:#e8a446!important;font-size:1rem!important;font-weight:900}
.spell-detail-tags{display:flex;flex-wrap:wrap;gap:5px}
.spell-detail-tags span{padding:3px 6px;border-radius:999px;background:rgba(232,164,70,.06);border:1px solid rgba(232,164,70,.16);color:#a8947d;font-size:.6rem}
.spell-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0}
.spell-detail-grid>div{padding:8px;border-radius:8px;background:rgba(255,255,255,.018)}
.spell-detail-grid dt{color:#8e8175;font-size:.6rem;text-transform:uppercase;letter-spacing:.04em}
.spell-detail-grid dd{margin:3px 0 0;color:#d2c0ac;font-size:.72rem}
.spell-detail-text{padding-top:9px;border-top:1px solid rgba(232,164,70,.12)}
.spell-detail-text strong{color:#dbbf97;font-size:.72rem}
.spell-detail-text p{margin:5px 0 0;color:#a29486;font-size:.74rem;line-height:1.5}
.spell-detail-add button{width:100%;min-height:44px;border:1px solid rgba(232,164,70,.5);border-radius:9px;background:linear-gradient(180deg,rgba(232,164,70,.18),rgba(154,94,34,.12));color:#ecd2ae;font-weight:900;cursor:pointer}
.spell-picker-footer{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-top:1px solid rgba(232,164,70,.14);color:#8f8176;font-size:.68rem}
.spell-picker-footer button{min-height:34px;padding:0 12px;border:1px solid rgba(232,164,70,.22);border-radius:7px;background:transparent;color:#bca88f;cursor:pointer}
@media(max-width:820px){
  .spell-picker-modal{padding:8px}
  .spell-picker-dialog{width:100%;height:calc(100dvh - 16px)}
  .spell-picker-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spell-picker-search{grid-column:1/-1}
  .spell-picker-body{grid-template-columns:1fr}
  .spell-picker-results{border-right:0;border-bottom:1px solid rgba(232,164,70,.13);max-height:42vh}
  .spell-picker-details{max-height:40vh}
}
@media(max-width:520px){
  .spell-picker-toolbar{grid-template-columns:1fr}
  .spell-picker-search{grid-column:auto}
  .spell-detail-grid{grid-template-columns:1fr}
  .spell-picker-head{padding:14px}
}

.spell-source-note{display:grid;gap:3px;padding:10px 12px;border:1px solid rgba(232,164,70,.20);border-radius:9px;background:rgba(232,164,70,.035);color:#c9b59b;font-size:.69rem}
.spell-source-note strong{color:#e1b36f}
.spell-source-note small{color:#8f8176;line-height:1.4}


/* ==========================================================
   Stage 10.10.7 UI hotfix — spellbook / spell picker
   Fixes cramped action buttons and undersized typography.
   ========================================================== */

/* --- General spellbook typography --- */
.spellbook-panel,
.spell-picker-dialog {
    font-size: 15px;
}

.spellbook-panel .eyebrow,
.spell-picker-dialog .eyebrow {
    font-size: 12px !important;
    letter-spacing: .12em;
}

.spell-effects-lead,
.spellbook-head p,
.spell-picker-head p {
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.spell-source-line span,
.spell-source-form label,
.spellcasting-mode-note small,
.spell-rank-head > span,
.spell-rank-empty,
.prepared-spell-main small,
.spell-result-copy small,
.spell-result-copy em,
.spell-picker-toolbar label,
.spell-picker-footer,
.spell-detail-title span,
.spell-detail-title small,
.spell-detail-grid dt,
.spell-detail-grid dd,
.spell-detail-text strong,
.spell-detail-text p {
    font-size: 13px !important;
}

.spell-source-line strong,
.spellcasting-mode-note strong,
.prepared-spell-main strong,
.spell-result-copy strong {
    font-size: 14px !important;
}

.spell-rank-head strong {
    font-size: 17px !important;
}

/* --- Prepared spell row: keep actions readable and non-overlapping --- */
.prepared-spell-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 58px;
}

.prepared-spell-main {
    min-width: 0;
}

.prepared-spell-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
    min-width: max-content;
}

.prepared-spell-actions form {
    margin: 0 !important;
    flex: 0 0 auto;
}

.spell-info-button,
.spell-remove-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    line-height: 1 !important;
    border-radius: 9px !important;
    font-size: 18px !important;
}

.spell-cast-button {
    min-width: 104px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 9px !important;
    font-size: 13px !important;
}

.spell-cast-button:disabled {
    opacity: .48 !important;
}

/* --- Rank add button --- */
.spell-picker-open {
    min-height: 44px !important;
    font-size: 14px !important;
}

/* --- Spell source sidebar --- */
.spellcasting-source-card {
    gap: 10px !important;
    padding: 14px !important;
}

.spell-source-line {
    min-height: 38px;
    align-items: center;
}

.spell-source-form input,
.spell-source-form select,
.spell-source-form button {
    min-height: 42px !important;
    font-size: 14px !important;
}

/* --- Picker header and close button --- */
.spell-picker-head {
    align-items: flex-start !important;
}

.spell-picker-close {
    flex: 0 0 auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
}

/* --- Picker toolbar: larger controls and text --- */
.spell-picker-toolbar {
    gap: 10px !important;
}

.spell-picker-toolbar input,
.spell-picker-toolbar select {
    min-height: 42px !important;
    font-size: 14px !important;
}

/* --- Picker result cards --- */
.spell-picker-result {
    min-height: 82px;
    padding: 11px !important;
    grid-template-columns: 38px minmax(0, 1fr) 32px !important;
    gap: 10px !important;
}

.spell-result-rank {
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
}

.spell-result-copy {
    gap: 3px !important;
}

.spell-result-copy strong {
    line-height: 1.2 !important;
}

.spell-result-copy em {
    line-height: 1.35 !important;
}

.spell-result-info {
    font-size: 18px !important;
    align-self: center;
}

/* --- Details panel --- */
.spell-detail-title h3 {
    font-size: 28px !important;
    line-height: 1.08;
}

.spell-detail-rank {
    width: 48px !important;
    height: 48px !important;
    font-size: 17px !important;
}

.spell-detail-tags span {
    font-size: 12px !important;
    padding: 4px 7px !important;
}

.spell-detail-grid > div {
    padding: 10px !important;
}

.spell-detail-text p {
    line-height: 1.5 !important;
}

.spell-detail-add button {
    min-height: 48px !important;
    font-size: 15px !important;
}

/* --- Bottom picker close button --- */
.spell-picker-footer button {
    min-height: 40px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
}

/* --- Responsive: stack spell-row controls below title before they collide --- */
@media (max-width: 760px) {
    .prepared-spell-row {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .prepared-spell-actions {
        justify-content: flex-start !important;
        min-width: 0;
        flex-wrap: wrap !important;
    }

    .spell-cast-button {
        min-width: 120px !important;
    }
}

@media (max-width: 520px) {
    .spellbook-panel,
    .spell-picker-dialog {
        font-size: 14px;
    }

    .spell-picker-dialog {
        border-radius: 10px !important;
    }

    .spell-picker-head h2 {
        font-size: 24px !important;
    }

    .spell-picker-close {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
    }
}


/* ==========================================================
   Stage 10.10.7 — Foundry-like compact spellbook
   ========================================================== */

.foundry-spellbook{
    border:1px solid rgba(232,164,70,.24);
    border-radius:10px;
    overflow:hidden;
    background:rgba(16,12,10,.44);
}

.foundry-casting-header{
    display:grid;
    grid-template-columns:minmax(220px,1fr) minmax(0,2fr) 42px;
    align-items:center;
    gap:10px;
    min-height:52px;
    padding:7px 10px;
    border-bottom:1px solid rgba(232,164,70,.22);
    background:linear-gradient(180deg,rgba(76,45,19,.34),rgba(37,25,17,.25));
}

.foundry-casting-title{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.foundry-casting-menu{
    color:#e8a446;
    font-size:18px;
}

.foundry-casting-title strong{
    color:#ead7bd;
    font-size:15px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.foundry-casting-summary{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:16px;
    min-width:0;
    color:#b3a292;
    font-size:12px;
    white-space:nowrap;
}

.foundry-casting-summary b{
    color:#d7bea0;
}

.foundry-source-edit{
    width:34px;
    height:34px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid rgba(232,164,70,.25);
    border-radius:7px;
    background:rgba(232,164,70,.04);
    color:#d7ad78;
    cursor:pointer;
    font-size:16px;
}

.foundry-source-editor{
    display:grid;
    grid-template-columns:minmax(180px,1fr) minmax(160px,.8fr) auto;
    gap:8px;
    padding:10px;
    border-bottom:1px solid rgba(232,164,70,.18);
    background:rgba(232,164,70,.035);
}

.foundry-source-editor[hidden]{display:none!important}

.foundry-source-editor label{
    display:grid;
    gap:4px;
    color:#9f9185;
    font-size:12px;
}

.foundry-source-editor input,
.foundry-source-editor select,
.foundry-source-editor button{
    min-height:38px;
    font-size:13px;
}

.foundry-source-editor button{
    align-self:end;
    padding:0 14px;
    border:1px solid rgba(232,164,70,.35);
    border-radius:7px;
    background:rgba(232,164,70,.08);
    color:#e5c69c;
    font-weight:800;
    cursor:pointer;
}

.foundry-spell-columns{
    display:grid;
    grid-template-columns:minmax(260px,1fr) 125px 145px 108px 38px;
    align-items:center;
}

.foundry-spell-columns-head{
    min-height:34px;
    padding:0 8px;
    border-bottom:1px solid rgba(232,164,70,.14);
    background:rgba(255,255,255,.025);
    color:#97897d;
    font-size:12px;
    font-weight:700;
}

.foundry-spell-columns-head span:nth-child(2),
.foundry-spell-columns-head span:nth-child(3){
    text-align:center;
}

.foundry-spell-ranks{
    display:grid!important;
    gap:0!important;
}

.foundry-rank-section{
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    overflow:visible!important;
}

.foundry-rank-section + .foundry-rank-section{
    border-top:1px solid rgba(232,164,70,.22)!important;
}

.foundry-rank-head{
    min-height:35px;
    padding:0 8px!important;
    border-bottom:1px solid rgba(232,164,70,.12)!important;
    background:rgba(232,164,70,.085)!important;
}

.foundry-rank-title{
    display:flex;
    align-items:center;
    gap:8px;
}

.foundry-rank-title span{
    color:#e0c4a0;
    font-size:14px;
    font-weight:900;
}

.foundry-rank-title b{
    min-width:25px;
    padding:2px 6px;
    border-radius:5px;
    background:rgba(232,164,70,.18);
    color:#e8a446;
    text-align:center;
    font-size:11px;
}

.foundry-rank-add{
    width:28px!important;
    min-width:28px!important;
    height:28px!important;
    min-height:28px!important;
    padding:0!important;
    border:1px solid rgba(232,164,70,.28)!important;
    border-radius:6px!important;
    background:rgba(232,164,70,.04)!important;
    color:#e4b577!important;
    font-size:19px!important;
    line-height:1!important;
    cursor:pointer;
}

.foundry-prepared-list{
    display:grid!important;
}

.foundry-spell-row{
    display:grid!important;
    grid-template-columns:minmax(260px,1fr) 125px 145px 108px 38px!important;
    align-items:center!important;
    gap:0!important;
    min-height:46px!important;
    padding:0 8px!important;
    border-bottom:1px solid rgba(232,164,70,.075)!important;
    background:rgba(255,255,255,.008);
}

.foundry-spell-row:nth-child(even){
    background:rgba(255,255,255,.018);
}

.foundry-spell-row:hover{
    background:rgba(232,164,70,.045);
}

.foundry-spell-row.is-spent{
    opacity:.48;
    background:rgba(93,38,31,.08)!important;
}

.foundry-spell-row.is-spent .foundry-spell-title strong{
    text-decoration:line-through;
    text-decoration-thickness:1px;
}

.foundry-spell-name{
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    align-items:center;
    gap:8px;
    min-width:0;
}

.foundry-spell-icon{
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border:1px solid rgba(232,164,70,.28);
    border-radius:5px;
    background:radial-gradient(circle at 50% 40%,rgba(232,164,70,.20),rgba(232,164,70,.035));
    color:#e8a446;
    font-size:13px;
}

.foundry-spell-title{
    display:grid;
    gap:1px;
    min-width:0;
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    text-align:left;
    cursor:default;
}

.foundry-spell-title.has-details{
    cursor:pointer;
}

.foundry-spell-title strong{
    color:#e3d2bd;
    font-size:14px;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.foundry-spell-title small{
    color:#807469;
    font-size:10px;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.foundry-spell-defense,
.foundry-spell-range{
    padding:0 8px;
    color:#b6a797;
    font-size:12px;
    text-align:center;
    line-height:1.2;
}

.foundry-cast-form,
.foundry-delete-form{
    margin:0!important;
    display:flex;
    justify-content:center;
}

.foundry-cast-button{
    width:96px;
    min-height:29px;
    padding:0 7px;
    border:1px solid rgba(89,158,96,.42);
    border-radius:4px;
    background:rgba(55,116,62,.15);
    color:#a9d7af;
    font-size:10px;
    font-weight:900;
    line-height:1;
    cursor:pointer;
}

.foundry-cast-button:hover:not(:disabled){
    background:rgba(65,138,73,.25);
    border-color:rgba(101,185,109,.65);
}

.foundry-cast-button:disabled{
    opacity:.38;
    cursor:not-allowed;
}

.foundry-delete-button{
    width:28px;
    height:28px;
    padding:0;
    display:grid;
    place-items:center;
    border:0;
    border-radius:4px;
    background:transparent;
    color:#a47d72;
    font-size:16px;
    cursor:pointer;
}

.foundry-delete-button:hover{
    background:rgba(153,68,57,.12);
    color:#db9388;
}

.foundry-empty-row{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:6px 8px 6px 46px;
    color:#756b62;
    font-size:12px;
    font-style:italic;
}

.foundry-empty-row .spell-picker-open{
    width:auto!important;
    min-height:28px!important;
    padding:0 9px!important;
    border-style:solid!important;
    font-size:11px!important;
}

@media(max-width:1050px){
    .foundry-casting-header{
        grid-template-columns:minmax(200px,1fr) auto 40px;
    }
    .foundry-casting-summary span:nth-child(2){
        display:none;
    }
    .foundry-spell-columns,
    .foundry-spell-row{
        grid-template-columns:minmax(220px,1fr) 110px 125px 100px 34px!important;
    }
}

@media(max-width:800px){
    .foundry-casting-header{
        grid-template-columns:minmax(0,1fr) 40px;
    }
    .foundry-casting-summary{
        grid-column:1/-1;
        justify-content:flex-start;
        flex-wrap:wrap;
        white-space:normal;
    }
    .foundry-source-editor{
        grid-template-columns:1fr;
    }
    .foundry-spell-columns-head{
        display:none;
    }
    .foundry-spell-row{
        grid-template-columns:minmax(0,1fr) auto auto!important;
        grid-template-areas:
            "name cast delete"
            "meta meta meta";
        row-gap:5px!important;
        padding:7px 8px!important;
    }
    .foundry-spell-name{grid-area:name}
    .foundry-cast-form{grid-area:cast}
    .foundry-delete-form{grid-area:delete}
    .foundry-spell-defense,
    .foundry-spell-range{
        grid-area:meta;
        display:inline;
        text-align:left;
        padding-left:38px;
        font-size:11px;
    }
    .foundry-spell-defense::before{content:"Защита: "}
    .foundry-spell-range::before{content:" · Дистанция: "}
    .foundry-spell-range{margin-left:110px;margin-top:-18px}
}

@media(max-width:520px){
    .foundry-spell-row{
        grid-template-columns:minmax(0,1fr) 32px!important;
        grid-template-areas:
            "name delete"
            "meta meta"
            "cast cast";
    }
    .foundry-cast-button{
        width:100%;
        min-height:34px;
    }
    .foundry-cast-form{
        width:100%;
    }
    .foundry-spell-defense,
    .foundry-spell-range{
        padding-left:38px;
    }
    .foundry-spell-range{
        margin-left:0;
        margin-top:0;
    }
}


/* ==========================================================
   Stage 10.10.7 — inline expanded spell details
   ========================================================== */

.foundry-spell-title{
    position:relative;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    column-gap:6px;
}

.foundry-spell-title strong,
.foundry-spell-title small{
    grid-column:1;
}

.foundry-spell-chevron{
    grid-column:2;
    grid-row:1 / span 2;
    color:#9e866d;
    font-size:16px;
    font-weight:900;
    transition:transform .16s ease,color .16s ease;
}

.foundry-spell-title.has-details:hover .foundry-spell-chevron,
.foundry-spell-title.is-open .foundry-spell-chevron{
    color:#e8a446;
}

.foundry-spell-title.is-open .foundry-spell-chevron{
    transform:rotate(90deg);
}

.foundry-spell-inline-detail[hidden]{
    display:none!important;
}

.foundry-spell-inline-detail{
    display:grid;
    gap:11px;
    padding:12px 14px 14px 46px;
    border-bottom:1px solid rgba(232,164,70,.16);
    background:
        linear-gradient(180deg,rgba(232,164,70,.045),rgba(255,255,255,.012));
    box-shadow:inset 3px 0 0 rgba(232,164,70,.28);
}

.inline-spell-traits{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.inline-spell-traits span{
    padding:3px 6px;
    border:1px solid rgba(232,164,70,.20);
    border-radius:4px;
    background:rgba(232,164,70,.08);
    color:#d6b98f;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.inline-spell-meta{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}

.inline-spell-meta>div{
    display:grid;
    gap:3px;
    min-width:0;
    padding:7px 8px;
    border-radius:6px;
    background:rgba(255,255,255,.018);
}

.inline-spell-meta strong{
    color:#8e8074;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.inline-spell-meta span{
    color:#cfbda8;
    font-size:12px;
    line-height:1.25;
}

.inline-spell-description{
    display:grid;
    gap:4px;
    padding-top:7px;
    border-top:1px dotted rgba(232,164,70,.18);
}

.inline-spell-description strong{
    color:#e0bd8d;
    font-size:12px;
}

.inline-spell-description p{
    margin:0;
    color:#b5a79a;
    font-size:13px;
    line-height:1.5;
}

.inline-spell-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding-top:7px;
    border-top:1px solid rgba(232,164,70,.12);
    color:#776c63;
    font-size:10px;
}

.inline-spell-open-full{
    min-height:30px;
    padding:0 9px;
    border:1px solid rgba(232,164,70,.25);
    border-radius:5px;
    background:rgba(232,164,70,.04);
    color:#cda66f;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.inline-spell-open-full:hover{
    border-color:rgba(232,164,70,.55);
    background:rgba(232,164,70,.09);
    color:#e8bd80;
}

@media(max-width:800px){
    .foundry-spell-inline-detail{
        padding-left:12px;
    }

    .inline-spell-meta{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:520px){
    .inline-spell-meta{
        grid-template-columns:1fr;
    }

    .inline-spell-footer{
        align-items:stretch;
        flex-direction:column;
    }

    .inline-spell-open-full{
        width:100%;
        min-height:36px;
    }
}


/* Stage 10.10.7 — DB spell catalog, Russian coloured descriptors */
.spell-trait-badge{
    display:inline-flex!important;
    align-items:center;
    min-height:23px;
    padding:3px 7px!important;
    border:1px solid rgba(232,164,70,.25)!important;
    border-radius:5px!important;
    font-size:10px!important;
    font-weight:900!important;
    line-height:1!important;
    text-transform:uppercase;
    letter-spacing:.025em;
}
.spell-trait-badge.tradition-arcane{background:rgba(45,92,171,.24)!important;border-color:rgba(76,136,230,.70)!important;color:#a8ceff!important}
.spell-trait-badge.tradition-divine{background:rgba(171,119,25,.24)!important;border-color:rgba(226,166,47,.72)!important;color:#ffd77a!important}
.spell-trait-badge.tradition-occult{background:rgba(105,50,153,.25)!important;border-color:rgba(165,92,220,.70)!important;color:#dba8ff!important}
.spell-trait-badge.tradition-primal{background:rgba(44,116,60,.25)!important;border-color:rgba(72,174,92,.70)!important;color:#a5e8ae!important}
.spell-trait-badge.rarity-common{background:rgba(104,96,89,.22)!important;border-color:rgba(153,143,132,.52)!important;color:#d0c5b8!important}
.spell-trait-badge.rarity-uncommon{background:rgba(34,103,151,.23)!important;border-color:rgba(66,151,210,.68)!important;color:#96d1f7!important}
.spell-trait-badge.rarity-rare{background:rgba(102,55,155,.24)!important;border-color:rgba(157,93,214,.68)!important;color:#d1a8ff!important}
.spell-trait-badge.rarity-unique{background:rgba(153,56,42,.24)!important;border-color:rgba(218,88,68,.70)!important;color:#ffae9e!important}
.spell-trait-badge.energy-fire{background:rgba(168,54,28,.28)!important;border-color:rgba(231,87,49,.72)!important;color:#ffad80!important}
.spell-trait-badge.energy-cold{background:rgba(36,105,155,.27)!important;border-color:rgba(72,160,216,.72)!important;color:#a0dbff!important}
.spell-trait-badge.energy-electricity{background:rgba(151,126,23,.28)!important;border-color:rgba(220,190,42,.72)!important;color:#ffea77!important}
.spell-trait-badge.energy-acid{background:rgba(79,127,33,.28)!important;border-color:rgba(131,190,57,.72)!important;color:#c0ef83!important}
.spell-trait-badge.energy-sonic{background:rgba(42,124,138,.27)!important;border-color:rgba(66,183,202,.70)!important;color:#9ceaf3!important}
.spell-trait-badge.energy-force{background:rgba(54,84,161,.27)!important;border-color:rgba(87,126,223,.70)!important;color:#adc6ff!important}
.spell-trait-badge.effect-mental{background:rgba(119,51,141,.27)!important;border-color:rgba(181,84,203,.68)!important;color:#e4aaee!important}
.spell-trait-badge.effect-fear{background:rgba(111,45,68,.29)!important;border-color:rgba(177,68,105,.68)!important;color:#f0a4bd!important}
.spell-trait-badge.effect-healing{background:rgba(40,125,79,.27)!important;border-color:rgba(67,183,111,.68)!important;color:#9ce5b8!important}
.spell-trait-badge.effect-attack{background:rgba(142,72,27,.27)!important;border-color:rgba(205,111,47,.68)!important;color:#f2bd83!important}
.spell-trait-badge.spell-cantrip{background:rgba(149,102,20,.27)!important;border-color:rgba(216,157,38,.68)!important;color:#f4cc78!important}
.spell-trait-badge.spell-focus{background:rgba(112,51,142,.27)!important;border-color:rgba(171,82,205,.68)!important;color:#dda7ef!important}

.spell-trait-badge.trait-palette-0{background:#38271c!important;border-color:#82542f!important;color:#e6b77e!important}
.spell-trait-badge.trait-palette-1{background:#25332a!important;border-color:#527a5c!important;color:#acd1b5!important}
.spell-trait-badge.trait-palette-2{background:#26313b!important;border-color:#54768f!important;color:#add1e8!important}
.spell-trait-badge.trait-palette-3{background:#33263b!important;border-color:#76548c!important;color:#d1afe4!important}
.spell-trait-badge.trait-palette-4{background:#3b2929!important;border-color:#8a5555!important;color:#e3aaaa!important}
.spell-trait-badge.trait-palette-5{background:#30321e!important;border-color:#71783f!important;color:#ccd58e!important}
.spell-trait-badge.trait-palette-6{background:#243638!important;border-color:#4d7e82!important;color:#a3d7db!important}
.spell-trait-badge.trait-palette-7{background:#3a3021!important;border-color:#8b6c3b!important;color:#e5c080!important}
.spell-trait-badge.trait-palette-8{background:#2d2b3b!important;border-color:#67618c!important;color:#bbb4e4!important}
.spell-trait-badge.trait-palette-9{background:#3a2532!important;border-color:#88536f!important;color:#e1a7c4!important}
.spell-trait-badge.trait-palette-10{background:#25382d!important;border-color:#528565!important;color:#a5deb8!important}
.spell-trait-badge.trait-palette-11{background:#383029!important;border-color:#806a55!important;color:#d7c0aa!important}

.spell-full-description p,
.spell-detail-full-text p{
    white-space:pre-wrap;
}

.inline-spell-conditions{
    display:grid;
    gap:4px;
    padding-top:8px;
    border-top:1px dotted rgba(232,164,70,.18);
}
.inline-spell-conditions p{margin:0;color:#b7a99c;font-size:13px;line-height:1.45}
.inline-spell-conditions strong{color:#dfbf92}

.spell-db-status{
    display:flex;
    flex-wrap:wrap;
    gap:6px 10px;
    align-items:center;
    padding:9px 11px;
    border-radius:8px;
    font-size:12px;
}
.spell-db-status.is-ready{border:1px solid rgba(74,166,92,.34);background:rgba(46,117,61,.11);color:#a4d9ae}
.spell-db-status.is-warning{border:1px solid rgba(213,143,41,.34);background:rgba(124,81,21,.11);color:#e3bd80}


/* Stage 10.10.7 — focus & cleric magic completion */
.cleric-magic-note{
    display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;
    padding:9px 11px;border:1px solid rgba(224,170,62,.26);border-radius:8px;
    background:rgba(155,104,25,.08);color:#cbb491;font-size:12px
}
.cleric-magic-note strong{color:#ffd47a}

.focus-spellbook{
    border:1px solid rgba(159,96,200,.28);
    border-radius:10px;
    overflow:hidden;
    background:rgba(28,18,31,.28)
}
.focus-spellbook-head{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:10px 12px;border-bottom:1px solid rgba(159,96,200,.22);
    background:linear-gradient(180deg,rgba(98,50,126,.16),rgba(30,20,34,.08))
}
.focus-spellbook-head h3{margin:2px 0 0;font-size:18px}
.focus-pool{display:flex;align-items:center;gap:8px;font-size:12px;color:#aa96b3}
.focus-pool strong{font-size:18px;color:#d9a6ff}
.focus-pool form{margin:0}
.focus-pool button,.focus-picker-open,.focus-pool-editor button{
    min-height:34px;padding:0 10px;border:1px solid rgba(169,101,213,.38);
    border-radius:7px;background:rgba(118,62,156,.10);color:#d9a6ff;font-weight:800;cursor:pointer
}
.focus-pool button:disabled{opacity:.35;cursor:not-allowed}
.focus-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid rgba(159,96,200,.14)}
.focus-pool-editor{display:flex;align-items:end;gap:7px;margin:0}
.focus-pool-editor label{display:grid;gap:3px;color:#9988a2;font-size:10px}
.focus-pool-editor input{width:72px;min-height:34px}
.focus-spell-list{display:grid}
.focus-spell-row{
    display:grid;grid-template-columns:minmax(260px,1fr) 125px 145px 108px 38px;
    align-items:center;gap:0;min-height:46px;padding:0 8px;
    border-bottom:1px solid rgba(159,96,200,.10)
}
.focus-spell-name{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;min-width:0}
.focus-spell-defense,.focus-spell-range{padding:0 8px;color:#b6a797;font-size:12px;text-align:center}
.focus-empty{display:flex;justify-content:space-between;align-items:center;padding:12px;color:#807386;font-size:12px}
.focus-empty button{min-height:32px;padding:0 10px;border:1px solid rgba(169,101,213,.32);border-radius:6px;background:transparent;color:#d3a2ec}
.focus-picker-modal[hidden]{display:none!important}
.focus-picker-modal{position:fixed;inset:0;z-index:1450;display:grid;place-items:center;padding:20px}
.focus-picker-dialog{height:min(720px,90vh)}
.focus-picker-results{overflow:auto;padding:10px;display:grid;gap:7px}
.focus-picker-card{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
    padding:10px;border:1px solid rgba(159,96,200,.18);border-radius:9px;background:rgba(255,255,255,.012)
}
.focus-picker-card>div{display:grid;gap:2px}
.focus-picker-card span,.focus-picker-card small{font-size:11px;color:#918198}
.focus-picker-card strong{font-size:14px;color:#e1d3e8}
.focus-picker-card p{margin:4px 0 0;color:#a698aa;font-size:12px;line-height:1.4;max-height:3.4em;overflow:hidden}
.focus-picker-card form{margin:0}
.focus-picker-card button{min-height:36px;padding:0 12px;border:1px solid rgba(169,101,213,.40);border-radius:7px;background:rgba(118,62,156,.12);color:#dda7ec;font-weight:800}
@media(max-width:800px){
    .focus-spellbook-head,.focus-toolbar{align-items:stretch;flex-direction:column}
    .focus-pool{flex-wrap:wrap}
    .focus-spell-row{
        grid-template-columns:minmax(0,1fr) auto auto;
        grid-template-areas:"name cast delete" "meta meta meta";
        padding:7px 8px;row-gap:5px
    }
    .focus-spell-name{grid-area:name}
    .focus-spell-row form:first-of-type{grid-area:cast}
    .focus-spell-row form:last-of-type{grid-area:delete}
    .focus-spell-defense,.focus-spell-range{grid-area:meta;text-align:left;padding-left:38px}
}
@media(max-width:520px){
    .focus-pool-editor{display:grid;grid-template-columns:1fr 1fr;align-items:end}
    .focus-pool-editor button{grid-column:1/-1}
    .focus-picker-card{grid-template-columns:1fr}
    .focus-picker-card button{width:100%}
}


/* Stage 10.11.0 — Foundry-like non-class feats */
.feat-head p{max-width:760px;color:#9c8d80;font-size:13px;line-height:1.45}
.feat-notice{padding:9px 11px;border-radius:8px;font-size:12px}.feat-notice.error{border:1px solid rgba(191,83,70,.4);color:#dfaaa3}
.feat-summary-strip{display:flex;gap:18px;flex-wrap:wrap;padding:8px 10px;border:1px solid rgba(232,164,70,.14);background:rgba(255,255,255,.012);font-size:12px;color:#938579}.feat-summary-strip strong{color:#dcb77f}
.foundry-feat-list{display:grid;border:1px solid rgba(232,164,70,.17);border-radius:9px;overflow:hidden}
.foundry-feat-entry+ .foundry-feat-entry{border-top:1px solid rgba(232,164,70,.10)}
.foundry-feat-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto 34px;align-items:center;gap:6px;min-height:44px;padding:0 8px;background:rgba(255,255,255,.01)}
.foundry-feat-row:hover{background:rgba(232,164,70,.035)}
.feat-level{display:grid;place-items:center;width:28px;height:28px;border-radius:5px;background:rgba(232,164,70,.10);color:#e8a446;font-size:13px;font-weight:900}
.feat-expand{display:grid;grid-template-columns:28px minmax(0,1fr) 18px;align-items:center;gap:7px;min-width:0;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.feat-book{display:grid;place-items:center;width:25px;height:25px;border-radius:4px;background:#7e291f;color:#ffd38b;font-size:12px}
.feat-title-copy{display:grid;min-width:0}.feat-title-copy strong{font-size:14px;color:#e3d4c0}.feat-title-copy small{font-size:10px;color:#817469;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat-chevron{color:#9e866d;font-size:16px;font-weight:900;transition:transform .15s}.feat-expand.is-open .feat-chevron{transform:rotate(90deg);color:#e8a446}
.feat-row-tags{display:flex;gap:4px}.feat-kind{padding:3px 6px;border-radius:4px;font-size:9px;font-weight:900}.feat-kind.skill{background:#25456c;color:#a8cbff}.feat-kind.general{background:#6d451d;color:#f0c07e}
.foundry-feat-detail[hidden]{display:none!important}.foundry-feat-detail{display:grid;gap:10px;padding:12px 14px 14px 48px;border-top:1px solid rgba(232,164,70,.08);background:rgba(232,164,70,.025);box-shadow:inset 3px 0 rgba(232,164,70,.25)}
.feat-traits{display:flex;gap:5px;flex-wrap:wrap}.feat-traits span{padding:3px 6px;border:1px solid rgba(232,164,70,.22);border-radius:4px;color:#d1af7c;background:rgba(232,164,70,.06);font-size:10px;font-weight:800;text-transform:uppercase}.feat-traits .skill{background:#243d5a;color:#a9ceff}.feat-traits .general{background:#5a3b1e;color:#edc182}
.feat-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.feat-meta-grid>div{display:grid;gap:3px;padding:8px;border-radius:6px;background:rgba(255,255,255,.015)}.feat-meta-grid b{font-size:10px;color:#978679;text-transform:uppercase}.feat-meta-grid span{font-size:12px;color:#c3b3a2;line-height:1.4}
.feat-description{white-space:pre-wrap;color:#b9aa9c;font-size:13px;line-height:1.55;padding-top:8px;border-top:1px dotted rgba(232,164,70,.17)}
.feat-automation-note{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid rgba(75,164,91,.20);border-radius:6px;background:rgba(51,116,64,.07);font-size:11px;color:#9fc0a4}.feat-automation-note b{color:#a9d8b0}
.feat-empty{padding:25px;text-align:center;color:#786c62;font-size:12px}
.feat-picker-modal[hidden],.feat-choice-modal[hidden]{display:none!important}.feat-picker-modal,.feat-choice-modal{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:18px}
.feat-picker-dialog,.feat-choice-dialog{position:relative;z-index:1;width:min(1050px,96vw);height:min(780px,92vh);display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden;border:1px solid rgba(232,164,70,.32);border-radius:12px;background:#17120f;box-shadow:0 25px 70px rgba(0,0,0,.65)}
.feat-choice-dialog{width:min(620px,94vw);height:auto;max-height:90vh;grid-template-rows:auto minmax(0,1fr)}
.feat-picker-toolbar{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(130px,.6fr));gap:8px;padding:10px;border-bottom:1px solid rgba(232,164,70,.12)}.feat-picker-toolbar input,.feat-picker-toolbar select{min-height:40px;font-size:13px}
.feat-picker-results{overflow:auto;padding:9px;display:grid;gap:6px}
.feat-picker-card{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px;border:1px solid rgba(232,164,70,.14);border-radius:8px;background:rgba(255,255,255,.012)}.feat-picker-card:hover{border-color:rgba(232,164,70,.45)}
.feat-picker-copy{display:grid;gap:2px;min-width:0}.feat-picker-copy strong{font-size:14px}.feat-picker-copy small{font-size:10px;color:#84786d}.feat-picker-copy div{display:flex;gap:3px;flex-wrap:wrap}.feat-picker-copy i{padding:2px 4px;border-radius:3px;background:rgba(232,164,70,.06);color:#a98c69;font-size:9px;font-style:normal}.feat-picker-copy p{margin:2px 0 0;color:#85796e;font-size:11px;line-height:1.35}
.feat-picker-card>button{min-height:34px;padding:0 10px;border:1px solid rgba(232,164,70,.32);border-radius:6px;background:rgba(232,164,70,.07);color:#e1bb82;font-weight:800}
.feat-choice-body{padding:16px;overflow:auto}.feat-choice-body label{display:grid;gap:6px;color:#a89482;font-size:12px}.feat-choice-body input,.feat-choice-body select{min-height:42px;font-size:14px}.feat-choice-actions{display:flex;justify-content:flex-end;gap:8px;padding:10px 16px;border-top:1px solid rgba(232,164,70,.12)}.feat-choice-actions button{min-height:38px;padding:0 13px}
.feat-dependent-warning{display:grid;gap:8px;padding:10px;border:1px solid rgba(213,143,41,.3);border-radius:7px;background:rgba(124,81,21,.08)}.feat-dependent-warning p{margin:0;color:#998778;font-size:12px;line-height:1.4}
@media(max-width:760px){.feat-row-tags{display:none}.foundry-feat-row{grid-template-columns:30px minmax(0,1fr) 30px}.foundry-feat-detail{padding-left:12px}.feat-meta-grid{grid-template-columns:1fr}.feat-picker-modal,.feat-choice-modal{padding:6px}.feat-picker-dialog{width:100%;height:calc(100dvh - 12px)}.feat-picker-toolbar{grid-template-columns:1fr 1fr}.feat-picker-toolbar input{grid-column:1/-1}.feat-picker-card{grid-template-columns:30px minmax(0,1fr)}.feat-picker-card>button{grid-column:1/-1;width:100%}}


/* Stage 10.11.1 — advancement-driven feat slots */
.feat-class-chip{display:grid;gap:1px;min-width:150px;padding:8px 12px;border:1px solid rgba(232,164,70,.22);border-radius:8px;background:rgba(232,164,70,.04);text-align:right}
.feat-class-chip span,.feat-class-chip small{font-size:10px;color:#86776a}.feat-class-chip strong{color:#e0b574}
.granted-feat-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border:1px dashed rgba(89,139,93,.35);border-radius:8px;background:rgba(55,103,59,.06)}
.granted-feat-row>div{display:grid}.granted-feat-row strong{font-size:13px}.granted-feat-row small{font-size:10px;color:#7f8f7e}
.feat-progression-list{display:grid;gap:6px}
.feat-slot-card{display:grid;grid-template-columns:52px minmax(0,1fr) 120px;min-height:66px;border:1px solid rgba(232,164,70,.15);border-radius:9px;overflow:hidden;background:rgba(255,255,255,.01)}
.feat-slot-card.is-open{border-style:dashed}.feat-slot-card.is-filled{border-color:rgba(232,164,70,.26)}
.feat-slot-card.type-class{border-left:3px solid rgba(173,75,55,.65)}.feat-slot-card.type-ancestry{border-left:3px solid rgba(78,125,78,.65)}.feat-slot-card.type-skill{border-left:3px solid rgba(56,103,163,.65)}.feat-slot-card.type-general{border-left:3px solid rgba(176,119,45,.75)}
.feat-slot-level{display:grid;place-content:center;text-align:center;border-right:1px solid rgba(232,164,70,.09);background:rgba(0,0,0,.12)}
.feat-slot-level span{font-size:20px;font-weight:900;color:#e3b268}.feat-slot-level small{font-size:9px;color:#7b6c60;text-transform:uppercase}
.feat-slot-main{display:grid;align-content:center;gap:5px;padding:8px 10px;min-width:0}.feat-slot-heading{display:flex;align-items:center;gap:8px}.feat-slot-type{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#9b866f}.feat-slot-heading small{font-size:9px;color:#776b61}
.feat-slot-empty-copy{display:grid;gap:2px}.feat-slot-empty-copy strong{font-size:13px;color:#bbaa99}.feat-slot-empty-copy small{font-size:10px;color:#75695f;line-height:1.35}
.feat-slot-selected{display:grid;grid-template-columns:28px minmax(0,1fr) 18px;gap:7px;align-items:center;border:0;background:transparent;color:inherit;text-align:left;padding:0;cursor:pointer}.feat-slot-selected>span:nth-child(2){display:grid;min-width:0}.feat-slot-selected strong{font-size:14px;color:#e4d5c1}.feat-slot-selected small{font-size:10px;color:#827568;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feat-slot-selected i{font-style:normal;color:#a98a69;font-size:17px}
.feat-slot-actions{display:grid;place-items:center;padding:8px;border-left:1px solid rgba(232,164,70,.08)}
.feat-slot-pick,.feat-slot-remove{width:100%;min-height:36px;border:1px solid rgba(232,164,70,.32);border-radius:6px;background:rgba(232,164,70,.07);color:#e3b678;font-weight:800;font-size:11px}.feat-slot-remove{border-color:rgba(175,83,69,.28);color:#c99a91;background:rgba(145,55,45,.05)}.feat-slot-pick.disabled{opacity:.4}
.feat-slot-detail{margin-top:-6px;border:1px solid rgba(232,164,70,.12);border-top:0;border-radius:0 0 8px 8px}
.feat-next-level{display:grid;gap:5px;padding:10px 12px;border:1px solid rgba(92,108,133,.2);border-radius:8px;background:rgba(65,78,102,.05)}.feat-next-level h3{margin:0;font-size:16px}.feat-next-level>div{display:flex;gap:6px;flex-wrap:wrap}.feat-next-level>div span{padding:4px 7px;border-radius:5px;background:rgba(255,255,255,.03);color:#988d83;font-size:10px}
.feat-legacy{padding:8px 10px;border:1px solid rgba(178,108,61,.18);border-radius:8px;color:#8e7d6e;font-size:11px}.feat-legacy summary{cursor:pointer;color:#c09368;font-weight:800}.feat-legacy>div{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-top:1px solid rgba(255,255,255,.04)}
@media(max-width:760px){.feat-head{align-items:stretch}.feat-class-chip{text-align:left}.feat-slot-card{grid-template-columns:44px minmax(0,1fr);}.feat-slot-actions{grid-column:1/-1;border-left:0;border-top:1px solid rgba(232,164,70,.08);padding:6px}.feat-slot-pick,.feat-slot-remove{min-height:34px}.granted-feat-row{grid-template-columns:32px minmax(0,1fr)}.granted-feat-row .feat-kind{display:none}}


/* Stage 10.11.2 — separated feat categories */
.feat-category-stack{display:grid;gap:14px}
.feat-category-card{border:1px solid rgba(232,164,70,.16);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.008)}
.feat-category-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(232,164,70,.11);background:rgba(255,255,255,.015)}
.feat-category-head>div:first-child{display:flex;align-items:center;gap:10px;min-width:0}
.feat-category-icon{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(232,164,70,.24);border-radius:7px;color:#e8a446;background:rgba(232,164,70,.05);font-size:15px;flex:0 0 auto}
.feat-category-head h3{margin:0;font-size:16px;color:#e4d4bf}
.feat-category-head p{margin:2px 0 0;color:#83766b;font-size:10px;line-height:1.35}
.feat-category-count,.feat-category-badge{display:grid;place-items:center;min-width:28px;min-height:24px;padding:2px 7px;border:1px solid rgba(232,164,70,.20);border-radius:999px;background:rgba(232,164,70,.05);color:#d5aa70;font-size:10px;font-weight:900;white-space:nowrap}
.feat-category-body{display:grid;gap:6px;padding:8px}
.feat-category-placeholder{display:grid;gap:3px;padding:12px;border:1px dashed rgba(232,164,70,.14);border-radius:8px;background:rgba(0,0,0,.08)}
.feat-category-placeholder strong{color:#b8a794;font-size:12px}
.feat-category-placeholder span{color:#786c62;font-size:10px;line-height:1.45}
.feat-category-empty{padding:12px;text-align:center;color:#75695f;font-size:11px}
.additional-feat-list{gap:8px}

/* category identity */
.feat-category-class-features{border-color:rgba(164,93,59,.26)}
.feat-category-class-features .feat-category-icon{border-color:rgba(164,93,59,.35);color:#db9876;background:rgba(164,93,59,.08)}
.feat-category-ancestry{border-color:rgba(72,125,79,.26)}
.feat-category-ancestry .feat-category-icon{border-color:rgba(72,125,79,.38);color:#96ca9d;background:rgba(72,125,79,.08)}
.feat-category-class{border-color:rgba(170,69,54,.26)}
.feat-category-class .feat-category-icon{border-color:rgba(170,69,54,.38);color:#dd8d80;background:rgba(170,69,54,.08)}
.feat-category-skill{border-color:rgba(57,103,164,.27)}
.feat-category-skill .feat-category-icon{border-color:rgba(57,103,164,.40);color:#9ec3ef;background:rgba(57,103,164,.08)}
.feat-category-general{border-color:rgba(176,119,45,.29)}
.feat-category-general .feat-category-icon{border-color:rgba(176,119,45,.42);color:#e3b775;background:rgba(176,119,45,.08)}
.feat-category-campaign{border-color:rgba(112,74,139,.27)}
.feat-category-campaign .feat-category-icon{border-color:rgba(112,74,139,.42);color:#c7a1df;background:rgba(112,74,139,.08)}
.feat-category-additional{border-color:rgba(96,96,96,.24)}
.feat-category-additional .feat-category-icon{border-color:rgba(126,126,126,.36);color:#c7c0b8;background:rgba(126,126,126,.07)}

@media(max-width:760px){
  .feat-category-head{align-items:flex-start}
  .feat-category-head h3{font-size:15px}
  .feat-category-head p{font-size:9px}
  .feat-category-count,.feat-category-badge{margin-top:2px}
}
/* Stage 10.11.3 cleric */
.cleric-choice-panel{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;padding:10px;border:1px solid rgba(232,164,70,.16);border-radius:8px;background:rgba(0,0,0,.12)}
.cleric-choice-panel label{display:grid;gap:4px}.cleric-choice-panel label span{font-size:9px;text-transform:uppercase;color:#927d69;font-weight:800}.cleric-choice-panel select{min-height:34px;background:#171310;color:#dfd0be;border:1px solid rgba(232,164,70,.2);border-radius:6px;padding:0 8px}.cleric-choice-panel button{min-height:34px;border:1px solid rgba(232,164,70,.3);border-radius:6px;background:rgba(232,164,70,.1);color:#e7bd82;font-weight:800}
.class-feature-row{border:1px solid rgba(164,93,59,.18);border-radius:7px;background:rgba(0,0,0,.08)}.class-feature-row summary{display:grid;grid-template-columns:30px minmax(160px,1fr) auto;gap:8px;align-items:center;padding:9px 10px;cursor:pointer}.class-feature-row summary strong{color:#d9c7b3}.class-feature-row summary small{color:#786d64}.class-feature-description{padding:0 12px 12px 48px;color:#a99a8b;font-size:11px;line-height:1.55;white-space:pre-line}.doctrine-timeline{margin:0 12px 12px 48px;padding:9px;border-left:2px solid rgba(232,164,70,.18)}.doctrine-timeline h4{margin:0 0 7px;color:#e1b578}.doctrine-step{display:grid;gap:2px;padding:6px 8px;opacity:.48}.doctrine-step.active{opacity:1;background:rgba(232,164,70,.045)}.doctrine-step b{font-size:10px;color:#c9ad8c}.doctrine-step span{font-size:10px;color:#918276}
@media(max-width:760px){.cleric-choice-panel{grid-template-columns:1fr}.class-feature-row summary{grid-template-columns:30px 1fr}.class-feature-row summary small{grid-column:2}.class-feature-description,.doctrine-timeline{margin-left:0;padding-left:12px}}


/* Stage 10.11.4 — cleric creation choices */
.cleric-create-panel{
    display:grid;
    gap:12px;
    margin:14px 0;
    padding:14px;
    border:1px solid rgba(218,176,77,.30);
    border-radius:11px;
    background:linear-gradient(180deg,rgba(161,111,31,.08),rgba(255,255,255,.01));
}
.cleric-create-panel[hidden]{display:none!important}
.cleric-create-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.cleric-create-head h2{margin:2px 0 0;font-size:20px}
.cleric-create-head p:not(.eyebrow){margin:4px 0 0;color:#928274;font-size:12px}
.cleric-create-head>span{padding:5px 8px;border:1px solid rgba(218,176,77,.30);border-radius:999px;color:#e1bd68;font-size:9px;font-weight:900;white-space:nowrap}
.cleric-catalog-warning{padding:9px 11px;border:1px solid rgba(205,133,48,.32);border-radius:7px;background:rgba(122,77,22,.09);color:#d4a865;font-size:11px;line-height:1.4}
.cleric-catalog-warning code{color:#f0c783}
.field-hint{display:block;margin-top:4px;color:#766a60;font-size:10px;line-height:1.35}
.cleric-deity-preview{display:flex;gap:8px;flex-wrap:wrap}
.cleric-deity-preview span{padding:5px 8px;border:1px solid rgba(232,164,70,.15);border-radius:5px;background:rgba(255,255,255,.015);color:#aa9987;font-size:10px}
.cleric-choice-panel{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.cleric-choice-panel button{grid-column:1/-1}
@media(max-width:650px){
  .cleric-create-head{flex-direction:column}
  .cleric-choice-panel{grid-template-columns:1fr!important}
}


/* Stage 10.11.5 — human heritages and ancestry mechanics */
.heritage-create-panel{display:grid;gap:10px;margin:12px 0;padding:13px;border:1px solid rgba(72,125,79,.28);border-radius:10px;background:rgba(72,125,79,.045)}
.heritage-create-panel[hidden]{display:none!important}
.heritage-create-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.heritage-create-head h2{margin:2px 0;font-size:19px}.heritage-create-head p:not(.eyebrow){margin:0;color:#887a6e;font-size:11px;line-height:1.45}
.heritage-traits{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.heritage-traits span{padding:3px 6px;border:1px solid rgba(72,125,79,.35);border-radius:4px;background:rgba(72,125,79,.08);color:#a5d1ab;font-size:9px;font-weight:800;text-transform:uppercase}
.heritage-selected-feat{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(232,164,70,.18);border-radius:7px}.heritage-selected-feat span{color:#c0af9d;font-size:12px}.heritage-selected-feat button{min-height:34px}
.heritage-passive-note{padding:9px 10px;border-radius:7px;background:rgba(255,255,255,.018);color:#a09183;font-size:11px}
.heritage-feat-modal[hidden]{display:none!important}.heritage-feat-modal{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:16px}.heritage-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.heritage-feat-dialog{position:relative;z-index:1;width:min(760px,96vw);height:min(680px,90vh);display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;padding:14px;border:1px solid rgba(232,164,70,.30);border-radius:11px;background:#17120f}
.heritage-feat-dialog header{display:flex;justify-content:space-between;gap:12px}.heritage-feat-dialog header h2{margin:2px 0}.heritage-feat-dialog header p:not(.eyebrow){margin:0;color:#8b7d71;font-size:11px}.heritage-feat-dialog header>button{width:38px;height:38px}
.heritage-feat-results{overflow:auto;display:grid;gap:6px}.heritage-feat-result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px;border:1px solid rgba(232,164,70,.15);border-radius:7px;background:rgba(255,255,255,.012);color:inherit;text-align:left}.heritage-feat-result span{display:grid}.heritage-feat-result b{font-size:13px}.heritage-feat-result small,.heritage-feat-result em{font-size:10px;color:#84786e;font-style:normal}.heritage-feat-result:hover{border-color:rgba(232,164,70,.45)}
.heritage-feature-card{display:grid;gap:8px;padding:9px 10px;border:1px solid rgba(72,125,79,.24);border-radius:8px;background:rgba(72,125,79,.035)}
.heritage-feature-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.heritage-feature-head>div{display:flex;align-items:center;gap:8px}.heritage-feature-head>div>span:last-child{display:grid}.heritage-feature-head strong{font-size:13px}.heritage-feature-head small{font-size:10px;color:#81766c}.heritage-feature-head>button{min-height:30px}
.heritage-feature-detail{display:grid;gap:8px;padding-top:7px;border-top:1px solid rgba(72,125,79,.13)}
.heritage-mechanic-chip{display:inline-flex;width:max-content;max-width:100%;padding:5px 8px;border:1px solid rgba(72,125,79,.24);border-radius:5px;background:rgba(72,125,79,.07);color:#a4c9aa;font-size:10px}
.heritage-choice-edit{display:grid;grid-template-columns:minmax(180px,1fr) minmax(150px,.8fr) auto;align-items:end;gap:8px;padding-top:8px;border-top:1px solid rgba(72,125,79,.13)}.heritage-choice-edit label{display:grid;gap:4px;font-size:10px;color:#8b7e73}.heritage-choice-edit select{min-height:36px}.heritage-choice-result{padding-bottom:8px;color:#95877b;font-size:10px}.heritage-choice-edit button{min-height:36px}
@media(max-width:650px){.heritage-create-head{flex-direction:column}.heritage-traits{justify-content:flex-start}.heritage-choice-edit{grid-template-columns:1fr}.heritage-choice-result{padding-bottom:0}.heritage-selected-feat{align-items:stretch;flex-direction:column}.heritage-feat-modal{padding:6px}.heritage-feat-dialog{width:100%;height:calc(100dvh - 12px)}}


/* Stage 10.11.6 — edit heritage and its dependent choices */
.heritage-edit-panel{display:grid;gap:10px;margin:12px 0;padding:13px;border:1px solid rgba(72,125,79,.28);border-radius:10px;background:rgba(72,125,79,.045);scroll-margin-top:84px}
.heritage-edit-panel>div{display:grid;gap:10px}
.heritage-edit-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.heritage-edit-panel-head h2{margin:2px 0;font-size:18px}
.heritage-edit-panel-head p:not(.eyebrow){margin:0;color:#887a6e;font-size:11px;line-height:1.45}
#heritage-edit-skill,#heritage-edit-feat,#heritage-edit-passive{padding:9px 10px;border-top:1px solid rgba(72,125,79,.13)}
#heritage-edit-skill[hidden],#heritage-edit-feat[hidden],#heritage-edit-passive[hidden]{display:none!important}
.heritage-feature-actions{display:flex;gap:6px;align-items:center}
.heritage-feature-actions a,.heritage-feature-actions button{min-height:30px;padding:0 9px;display:inline-flex;align-items:center;border:1px solid rgba(72,125,79,.25);border-radius:6px;background:rgba(72,125,79,.05);color:#b6cdb8;font-size:10px;font-weight:800;text-decoration:none}
@media(max-width:650px){.heritage-feature-actions{align-items:stretch;flex-direction:column}.heritage-feature-actions a,.heritage-feature-actions button{justify-content:center}}


/* Stage 10.11.7 — mobile combat essentials */
.mobile-character-essentials{display:none}
@media(max-width:900px){
    .mobile-character-essentials{
        display:grid;
        gap:12px;
        margin-top:12px;
    }
    .mobile-essential-card{
        border:1px solid rgba(232,164,70,.20);
        border-radius:12px;
        background:rgba(255,255,255,.018);
        overflow:hidden;
    }
    .mobile-essential-title{
        min-height:42px;
        padding:9px 12px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:8px;
        border-bottom:1px solid rgba(232,164,70,.12);
    }
    .mobile-essential-title>span{
        color:#e3d2bd;
        font-size:13px;
        font-weight:900;
        letter-spacing:.035em;
    }
    .mobile-essential-title button{
        min-height:30px;
        padding:0 9px;
        border:1px solid rgba(232,164,70,.28);
        border-radius:7px;
        background:rgba(232,164,70,.07);
        color:#dfb472;
        font-size:10px;
        font-weight:900;
    }
    .mobile-state-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:1px;
        background:rgba(232,164,70,.10);
    }
    .mobile-state-grid>div{
        min-height:68px;
        padding:9px 6px;
        display:grid;
        place-content:center;
        gap:4px;
        text-align:center;
        background:#171310;
    }
    .mobile-state-grid span{
        color:#86796e;
        font-size:9px;
        text-transform:uppercase;
    }
    .mobile-state-grid strong{
        color:#eee4d8;
        font-size:22px;
        line-height:1;
    }
    .mobile-state-grid .is-danger strong{color:#df776c}
    .mobile-state-grid .is-wounded strong{color:#e2a05f}
    .mobile-state-grid .is-hero strong{color:#f0c36f}
    .mobile-heroic-recovery{padding:8px}
    .mobile-heroic-recovery button{
        width:100%;
        min-height:36px;
        border:1px solid rgba(232,164,70,.28);
        border-radius:7px;
        background:rgba(232,164,70,.08);
        color:#e6b974;
        font-weight:900;
    }
    .mobile-condition-list{
        display:flex;
        flex-wrap:wrap;
        gap:6px;
        padding:10px;
    }
    .mobile-condition-chip{
        min-height:34px;
        display:flex;
        align-items:center;
        gap:7px;
        padding:0 9px;
        border:1px solid rgba(232,164,70,.24);
        border-radius:7px;
        background:rgba(116,64,36,.18);
        color:#d7c5b2;
        font-size:11px;
    }
    .mobile-condition-chip strong{
        min-width:22px;
        height:22px;
        display:grid;
        place-items:center;
        border-radius:999px;
        background:#e4a34d;
        color:#17100b;
        font-size:10px;
    }
    .mobile-empty-note{
        padding:12px;
        color:#74695f;
        font-size:10px;
    }
    .mobile-single-roll{
        min-height:68px;
        padding:10px 12px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
    }
    .mobile-single-roll>div{
        display:flex;
        align-items:center;
        gap:10px;
    }
    .mobile-single-roll strong{
        font-size:26px;
        color:#eee4d7;
    }
    .mobile-rank{
        display:inline-flex;
        align-items:center;
        min-height:22px;
        padding:0 6px;
        border-radius:4px;
        background:rgba(83,58,112,.42);
        color:#d9b8ef;
        font-size:8px;
        font-weight:900;
        text-transform:uppercase;
    }
    .mobile-inline-d20{
        width:42px;
        height:42px;
        padding:4px;
        border:0;
        background:transparent;
    }
    .mobile-inline-d20 img{width:100%;height:100%;object-fit:contain}
    .mobile-save-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:1px;
        background:rgba(232,164,70,.10);
    }
    .mobile-save-cell{
        min-width:0;
        padding:9px 6px;
        display:grid;
        gap:5px;
        background:#171310;
    }
    .mobile-save-cell>span{
        color:#b6a697;
        font-size:10px;
        font-weight:800;
        text-align:center;
    }
    .mobile-save-cell>small{
        justify-self:center;
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .mobile-save-cell>div{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:4px;
    }
    .mobile-save-cell strong{
        color:#eee4d8;
        font-size:21px;
    }
    .mobile-save-cell .mobile-inline-d20{width:34px;height:34px}
    .mobile-two-column-essentials{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px;
    }
    .mobile-movement-values{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:1px;
        background:rgba(232,164,70,.10);
    }
    .mobile-movement-values>div{
        min-height:72px;
        display:grid;
        place-content:center;
        gap:2px;
        text-align:center;
        background:#171310;
    }
    .mobile-movement-values span,.mobile-resistance-list span{
        color:#84776c;
        font-size:9px;
        text-transform:uppercase;
    }
    .mobile-movement-values strong{
        color:#eee4d8;
        font-size:21px;
    }
    .mobile-movement-values small{color:#8c7e72;font-size:9px}
    .mobile-resistance-list{display:grid}
    .mobile-resistance-list>div{
        min-height:46px;
        padding:6px 9px;
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
        gap:2px 7px;
        border-bottom:1px solid rgba(232,164,70,.08);
    }
    .mobile-resistance-list>div:last-child{border-bottom:0}
    .mobile-resistance-list strong{
        grid-row:1/3;
        grid-column:2;
        color:#e5ad57;
        font-size:18px;
    }
    .mobile-resistance-list small{
        color:#72675e;
        font-size:8px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
}
@media(max-width:520px){
    .mobile-character-essentials{gap:10px}
    .mobile-two-column-essentials{grid-template-columns:1fr}
    .mobile-save-cell>span{font-size:9px}
    .mobile-save-cell strong{font-size:19px}
}


/* Stage 10.11.7.1 — iOS cache/native-control hardening */
@media(max-width:900px){
    .mobile-character-essentials,
    .mobile-character-essentials *{
        box-sizing:border-box;
    }
    .mobile-character-essentials button{
        -webkit-appearance:none;
        appearance:none;
        font:inherit;
    }
    .mobile-essential-title button,
    .mobile-condition-chip,
    .mobile-inline-d20,
    .mobile-heroic-recovery button{
        -webkit-tap-highlight-color:transparent;
    }
    .mobile-inline-d20{
        border:1px solid rgba(232,164,70,.20);
        border-radius:8px;
        background:#171310;
    }
}


/* =========================================================
   Stage 10.11.8 — mobile modal system
   All dialogs must fit inside the dynamic viewport and stay
   above the persistent mobile navigation.
   ========================================================= */
@media (max-width: 900px) {
    /* Generic FastAPI/Jinja modals */
    .modal-backdrop:not([hidden]),
    #conditions-modal:not([hidden]) {
        z-index: 20000 !important;
        place-items: start center !important;
        align-items: start !important;
        justify-items: center !important;
        padding:
            max(8px, env(safe-area-inset-top))
            8px
            max(8px, env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
    }

    .modal-card,
    .modal-card.hp-modal-card,
    .modal-card.d20-roll-modal-card,
    .modal-card.defense-modal-card,
    .modal-card.inventory-modal-card,
    .modal-card.portrait-crop-modal-card,
    .modal-card.incoming-damage-modal-card,
    .modal-card.shield-block-modal-card,
    .modal-card.shield-hp-modal-card,
    .modal-card.lore-modal-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
        margin: 0 !important;
        padding: 14px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px !important;
    }

    /* Keep action buttons reachable even in tall dialogs. */
    .modal-card > .modal-actions,
    .modal-card form > .modal-actions,
    .inventory-modal-sticky-actions {
        position: sticky !important;
        bottom: -14px !important;
        z-index: 30 !important;
        margin: 12px -14px -14px !important;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid rgba(232,164,70,.16) !important;
        background: rgba(20,17,14,.98) !important;
        backdrop-filter: blur(12px);
    }

    .modal-card > .modal-actions button,
    .modal-card form > .modal-actions button {
        min-height: 44px !important;
        flex: 1 1 auto;
    }

    /* D20 roll: compact enough for portrait phones. */
    .d20-roll-modal-card {
        display: block !important;
    }

    .d20-modal-heading {
        gap: 10px !important;
        align-items: center !important;
    }

    .d20-large-mark {
        width: 50px !important;
        height: 50px !important;
        flex-basis: 50px !important;
        font-size: .9rem !important;
    }

    .d20-modal-heading h2 {
        font-size: 1.45rem !important;
        line-height: 1.05 !important;
    }

    .d20-modal-heading .muted {
        margin: 4px 0 0 !important;
        font-size: .78rem !important;
        line-height: 1.35 !important;
    }

    .roll-bonus-list {
        margin-top: 10px !important;
        gap: 6px !important;
    }

    .roll-bonus-toggle {
        min-height: 48px !important;
        padding: 7px 9px !important;
    }

    .roll-custom-row {
        margin-top: 10px !important;
    }

    .roll-custom-row input {
        min-height: 42px !important;
    }

    .roll-preview {
        min-height: 54px !important;
        margin-top: 10px !important;
    }

    .roll-modal-result {
        margin-top: 10px !important;
        min-height: 78px !important;
    }

    /* Damage dialog */
    .damage-roll-modal:not([hidden]) {
        z-index: 20000 !important;
        place-items: start center !important;
        padding:
            max(8px, env(safe-area-inset-top))
            8px
            max(8px, env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
    }

    .damage-roll-dialog {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px !important;
    }

    /* Spell/focus picker dialogs */
    .spell-picker-modal:not([hidden]),
    .focus-picker-modal:not([hidden]),
    .feat-picker-modal:not([hidden]),
    .feat-choice-modal:not([hidden]),
    .heritage-feat-modal:not([hidden]) {
        z-index: 20000 !important;
        place-items: start center !important;
        padding:
            max(6px, env(safe-area-inset-top))
            6px
            max(6px, env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
    }

    .spell-picker-dialog,
    .focus-picker-dialog,
    .feat-picker-dialog,
    .feat-choice-dialog,
    .heritage-feat-dialog {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))) !important;
        overflow: hidden !important;
        border-radius: 12px !important;
    }

    /* Grid dialogs need a scrollable middle region rather than a page-sized card. */
    .spell-picker-dialog,
    .focus-picker-dialog,
    .feat-picker-dialog {
        height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))) !important;
    }

    .spell-picker-body,
    .spell-picker-results,
    .focus-picker-results,
    .feat-picker-results,
    .feat-choice-body,
    .heritage-feat-results {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .feat-choice-dialog,
    .heritage-feat-dialog {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Picker headers stay compact. */
    .spell-picker-head {
        padding: 10px 12px !important;
    }

    .spell-picker-head h2 {
        font-size: 1.35rem !important;
        line-height: 1.1 !important;
    }

    .spell-picker-head p {
        font-size: .72rem !important;
        line-height: 1.3 !important;
    }

    .spell-picker-toolbar,
    .feat-picker-toolbar {
        padding: 8px !important;
        gap: 6px !important;
    }

    /* Rune/help overlays are also real popups and must clear mobile navigation. */
    .rune-info-overlay,
    .rune-property-help-overlay {
        z-index: 21000 !important;
    }

    /* Native iOS controls must not escape the visual language of the site. */
    .modal-backdrop button,
    .damage-roll-modal button,
    .spell-picker-modal button,
    .focus-picker-modal button,
    .feat-picker-modal button,
    .feat-choice-modal button,
    .heritage-feat-modal button {
        -webkit-appearance: none;
        appearance: none;
    }
}

@media (max-width: 520px) {
    .modal-card,
    .modal-card.hp-modal-card,
    .modal-card.d20-roll-modal-card {
        padding: 11px !important;
    }

    .modal-card > .modal-actions,
    .modal-card form > .modal-actions {
        bottom: -11px !important;
        margin: 10px -11px -11px !important;
        padding: 9px 11px calc(9px + env(safe-area-inset-bottom)) !important;
    }

    .d20-modal-heading h2 {
        font-size: 1.3rem !important;
    }

    .d20-modal-heading .muted {
        font-size: .72rem !important;
    }
}

/* =========================================================
   Stage 10.11.9 — unified golden D20 sprite
   All clickable and static D20 marks use the same user-provided
   sprite. Existing button animation classes remain untouched.
   ========================================================= */
.d20-sprite,
.basic-action-d20,
.mobile-d20-proxy img,
.mobile-inline-d20 img,
.mobile-roll-fab img,
.roll-empty-d20 img,
.d20-large-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* The old D20 modal badge was a clipped CSS polygon with text.
   It is now a genuine static sprite. */
.d20-large-mark {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    clip-path: none !important;
    overflow: visible !important;
    filter: drop-shadow(0 0 8px rgba(231,164,62,.18));
}

/* Preserve the original interactive feel while letting the artwork
   itself provide the gold frame/glow. */
.compact-d20-button,
.mini-d20-button,
.d20-roll-button,
.standalone-d20-button,
.initiative-d20-button,
.strike-roll-button,
.mobile-d20-proxy,
.mobile-inline-d20,
.mobile-roll-fab {
    overflow: visible !important;
}

.compact-d20-button:hover .d20-sprite,
.mini-d20-button:hover .d20-sprite,
.d20-roll-button:hover .d20-sprite,
.standalone-d20-button:hover .d20-sprite,
.initiative-d20-button:hover .d20-sprite,
.strike-roll-button:hover .d20-sprite,
.mobile-d20-proxy:active img,
.mobile-inline-d20:active img {
    filter: brightness(1.10) drop-shadow(0 0 7px rgba(238,174,73,.34));
}

@media(max-width:900px){
    .d20-large-mark {
        width: 54px !important;
        height: 54px !important;
        flex-basis: 54px !important;
    }
}


/* =========================================================
   Stage 10.11.9.1 — tablet D20 FAB hotfix
   10.11.9 made all D20 images width/height:100%. On the tablet
   history FAB the parent has content-sized dimensions, so the
   new sprite could expand to its intrinsic size and cover the UI.
   ========================================================= */

/* The floating history button must always remain a small pill. */
.mobile-roll-fab {
    inline-size: auto !important;
    width: auto !important;
    max-width: 132px !important;
    block-size: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    overflow: hidden !important;
}

.mobile-roll-fab > img {
    display: block !important;
    flex: 0 0 34px !important;
    inline-size: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    block-size: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    object-fit: contain !important;
}

.mobile-roll-fab > span {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Tablet UI uses the same floating history control as mobile, but without
   the phone bottom navigation. Keep it unobtrusive and below any modal. */
@media (min-width: 761px) and (max-width: 1366px) {
    .mobile-roll-fab {
        z-index: 850 !important;
        right: 14px !important;
        bottom: 14px !important;
        padding: 5px 11px 5px 6px !important;
        border-radius: 999px !important;
    }

    .mobile-roll-fab > img {
        flex-basis: 32px !important;
        inline-size: 32px !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        block-size: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }

    /* Every popup must win the stacking order over the history FAB on tablet. */
    .modal-backdrop:not([hidden]),
    #conditions-modal:not([hidden]),
    .damage-roll-modal:not([hidden]),
    .spell-picker-modal:not([hidden]),
    .focus-picker-modal:not([hidden]),
    .feat-picker-modal:not([hidden]),
    .feat-choice-modal:not([hidden]),
    .heritage-feat-modal:not([hidden]) {
        z-index: 20000 !important;
    }

    .rune-info-overlay,
    .rune-property-help-overlay {
        z-index: 21000 !important;
    }
}

/* Phone retains the compact FAB above the bottom navigation. */
@media (max-width: 760px) {
    .mobile-roll-fab {
        z-index: 1050 !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        max-width: 120px !important;
        overflow: hidden !important;
    }

    .mobile-roll-fab > img {
        flex-basis: 30px !important;
        inline-size: 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        block-size: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }
}

/* Safety: no D20 icon used inside a fixed/pill control may inherit
   the sprite's intrinsic 512px size. */
.mobile-d20-proxy > img {
    max-width: 46px !important;
    max-height: 46px !important;
}
.mobile-inline-d20 > img {
    max-width: 100% !important;
    max-height: 100% !important;
}


/* =========================================================
   Stage 10.11.9.2 — tablet landscape roll history containment
   Prevent the history panel from covering the character sheet
   when tablet width falls below the desktop three-column layout.
   ========================================================= */

/* Tablet landscape: history behaves as a compact drawer, never as a huge rail. */
@media (min-width: 951px) and (max-width: 1366px) and (orientation: landscape) {
    .foundry-shell-v2,
    .foundry-layout-v2,
    .foundry-character-grid,
    .foundry-character-page {
        min-width: 0 !important;
    }

    .roll-history-rail {
        position: fixed !important;
        z-index: 1250 !important;
        top: 96px !important;
        right: 14px !important;
        bottom: auto !important;
        left: auto !important;

        width: min(360px, calc(100vw - 28px)) !important;
        max-width: 360px !important;
        height: auto !important;
        max-height: min(58dvh, 520px) !important;

        grid-column: auto !important;
        align-self: auto !important;
        overflow: hidden !important;

        transform: translateX(calc(100% + 28px)) !important;
        opacity: 0 !important;
        pointer-events: none !important;

        border-radius: 12px !important;
        box-shadow: 0 18px 48px rgba(0,0,0,.48) !important;
        background: rgba(22,18,15,.985) !important;
        backdrop-filter: blur(14px);
    }

    .roll-history-rail.mobile-history-open {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .roll-history-head {
        position: sticky;
        top: 0;
        z-index: 3;
        background: rgba(22,18,15,.985);
    }

    .roll-history-current {
        min-height: 70px !important;
        padding: 9px 10px !important;
    }

    .roll-history-current .roll-empty-d20 {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
    }

    .roll-history-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        max-height: calc(min(58dvh, 520px) - 122px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 8px !important;
        gap: 6px !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .roll-history-entry {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Keep the sheet itself full-width while history is closed. */
    .foundry-main-column-v2 {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Make the history FAB the only permanent tablet history affordance. */
    .mobile-roll-fab {
        display: flex !important;
        z-index: 1100 !important;
    }
}

/* A narrower portrait/tablet safeguard as well. */
@media (min-width: 761px) and (max-width: 950px) {
    .roll-history-rail {
        width: min(360px, calc(100vw - 28px)) !important;
        max-width: 360px !important;
        max-height: min(60dvh, 500px) !important;
        overflow: hidden !important;
    }

    .roll-history-list {
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: calc(min(60dvh, 500px) - 122px) !important;
    }
}


/* =========================================================
   Stage 10.11.9.3 — definitive compact-history layout
   At compact desktop / tablet widths the history MUST NOT be
   a permanent third grid column.
   ========================================================= */

@media (max-width: 1599px) {
    .foundry-character-page {
        width: min(100%, calc(100% - 12px)) !important;
        max-width: none !important;
    }

    /* Remove the permanent history column entirely. */
    .foundry-sheet-shell {
        display: grid !important;
        grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) !important;
        grid-template-areas:
            "mobile mobile"
            "sidebar main" !important;
        gap: 10px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-character-hud {
        grid-area: mobile !important;
    }

    .foundry-sidebar {
        grid-area: sidebar !important;
        grid-column: auto !important;
    }

    .foundry-main-column-v2 {
        grid-area: main !important;
        grid-column: auto !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* History is a drawer only. It never participates in grid sizing. */
    .roll-history-rail {
        display: grid !important;
        position: fixed !important;
        z-index: 1250 !important;

        top: 92px !important;
        right: 12px !important;
        bottom: auto !important;
        left: auto !important;

        width: min(360px, calc(100vw - 24px)) !important;
        max-width: 360px !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: min(62dvh, 520px) !important;

        grid-column: unset !important;
        grid-row: unset !important;
        align-self: unset !important;

        overflow: hidden !important;
        border-radius: 12px !important;
        background: rgba(21,18,15,.985) !important;
        box-shadow: 0 18px 48px rgba(0,0,0,.48) !important;

        transform: translateX(calc(100% + 32px)) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transition:
            transform .2s ease,
            opacity .2s ease,
            visibility 0s linear .2s !important;
    }

    .roll-history-rail.mobile-history-open {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition:
            transform .2s ease,
            opacity .2s ease !important;
    }

    .roll-history-head {
        flex: 0 0 auto !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 4 !important;
        background: rgba(21,18,15,.99) !important;
    }

    .roll-history-current {
        min-height: 68px !important;
        padding: 8px 10px !important;
    }

    .roll-history-current .roll-empty-d20 {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }

    .roll-history-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        max-height: calc(min(62dvh, 520px) - 120px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 8px !important;
        gap: 6px !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .roll-history-entry {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* The floating button is the only permanent entry point to history. */
    .mobile-roll-fab {
        display: flex !important;
        position: fixed !important;
        z-index: 1100 !important;
        right: 14px !important;
        bottom: 14px !important;
    }
}

/* Portrait tablets use a single content column but history remains a drawer. */
@media (min-width: 761px) and (max-width: 980px) {
    .foundry-sheet-shell {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "mobile"
            "sidebar"
            "main" !important;
    }

    .foundry-sidebar {
        position: static !important;
        width: 100% !important;
    }
}

/* True desktop gets the permanent third history rail back. */
@media (min-width: 1600px) {
    .foundry-sheet-shell {
        grid-template-columns:
            var(--sheet-sidebar-width, 390px)
            minmax(0, 1fr)
            var(--roll-history-width, 260px) !important;
    }

    .roll-history-rail {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }
}


/* =========================================================
   Stage 10.11.9.4 — restore site styling for roll-history FAB
   ========================================================= */

.mobile-roll-fab,
.foundry-character-page .mobile-roll-fab {
    -webkit-appearance: none !important;
    appearance: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 138px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    padding: 5px 12px 5px 7px !important;

    border: 1px solid #6b4b28 !important;
    border-radius: 999px !important;

    background:
        linear-gradient(180deg, rgba(42,31,22,.98), rgba(22,17,13,.98)) !important;
    color: #e7c18c !important;
    -webkit-text-fill-color: #e7c18c !important;

    font-family: inherit !important;
    font-size: .72rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;

    box-shadow:
        0 8px 22px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,197,111,.06) !important;

    overflow: hidden !important;
    cursor: pointer !important;
    backdrop-filter: blur(10px);
}

.mobile-roll-fab:hover,
.foundry-character-page .mobile-roll-fab:hover {
    border-color: #9a6a35 !important;
    background:
        linear-gradient(180deg, rgba(55,39,26,.98), rgba(25,18,13,.98)) !important;
    color: #f0cc97 !important;
    -webkit-text-fill-color: #f0cc97 !important;
}

.mobile-roll-fab:active,
.foundry-character-page .mobile-roll-fab:active {
    transform: translateY(1px) scale(.985) !important;
    box-shadow:
        0 4px 14px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,197,111,.04) !important;
}

.mobile-roll-fab > img,
.foundry-character-page .mobile-roll-fab > img {
    display: block !important;
    flex: 0 0 31px !important;
    width: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;

    object-fit: contain !important;
    filter: drop-shadow(0 0 5px rgba(229,161,66,.2));
}

.mobile-roll-fab > span,
.foundry-character-page .mobile-roll-fab > span {
    display: inline-block !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    white-space: nowrap !important;
    font: inherit !important;
}

/* Tablet: keep the button visually compact and tucked into the corner. */
@media (min-width: 761px) and (max-width: 1599px) {
    .mobile-roll-fab,
    .foundry-character-page .mobile-roll-fab {
        right: 14px !important;
        bottom: 14px !important;
        z-index: 1100 !important;
    }
}

/* Phone: same visual language, slightly smaller. */
@media (max-width: 760px) {
    .mobile-roll-fab,
    .foundry-character-page .mobile-roll-fab {
        max-width: 126px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 5px 10px 5px 6px !important;
    }

    .mobile-roll-fab > img,
    .foundry-character-page .mobile-roll-fab > img {
        flex-basis: 29px !important;
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;
        height: 29px !important;
        min-height: 29px !important;
        max-height: 29px !important;
    }
}


/* =========================================================
   Stage 10.11.9.5 — tablet sidebar geometry
   - Attention D20 stays inside its card
   - remove useless perception result dash
   - Movement/Size text cannot escape its cell
   ========================================================= */

/* Attention has exactly four meaningful cells:
   icon | bonus | proficiency | D20 */
.foundry-attention-section {
    overflow: hidden !important;
}

.foundry-attention-section .defense-perception-row {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns:
        22px
        minmax(48px, 62px)
        minmax(0, 1fr)
        38px !important;

    align-items: center !important;
    column-gap: 6px !important;
    padding: 9px 10px !important;
    overflow: hidden !important;
}

.foundry-attention-section .defense-perception-row > .compact-stat-icon {
    grid-column: 1 !important;
    min-width: 0 !important;
}

.foundry-attention-section .defense-perception-row > .compact-defense-value {
    grid-column: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: center !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 1.42rem !important;
    white-space: nowrap !important;
}

.foundry-attention-section .defense-perception-row > .compact-rank-pill {
    grid-column: 3 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: center !important;
    margin: 0 !important;
    padding-inline: 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.foundry-attention-section .defense-perception-row > .compact-d20-button {
    grid-column: 4 !important;
    justify-self: end !important;

    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* There is no longer a result placeholder in Attention. If an older cached
   template still contains it, hide it so it cannot steal width. */
.foundry-attention-section .compact-inline-result {
    display: none !important;
}

/* Movement cards must be allowed to shrink inside a narrow sidebar. */
.foundry-movement-section,
.foundry-movement-grid,
.foundry-movement-grid > div {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.foundry-movement-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: hidden !important;
}

.foundry-movement-grid > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 11px 8px !important;
    overflow: hidden !important;
}

.foundry-movement-grid .defense-label-with-icon {
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: .72rem !important;
    white-space: nowrap !important;
}

.foundry-movement-grid > div > strong {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 7px !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.foundry-movement-grid .foundry-size-text {
    font-size: clamp(1.05rem, 1.65vw, 1.45rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
}

/* Tablet sidebar is the critical width from the screenshot. */
@media (min-width: 761px) and (max-width: 1599px) {
    .foundry-attention-section .defense-perception-row {
        grid-template-columns: 20px 52px minmax(0, 1fr) 34px !important;
        column-gap: 5px !important;
        padding-inline: 8px !important;
    }

    .foundry-attention-section .defense-perception-row > .compact-defense-value {
        font-size: 1.28rem !important;
    }

    .foundry-attention-section .defense-perception-row > .compact-rank-pill {
        font-size: .58rem !important;
        min-height: 21px !important;
        padding-inline: 5px !important;
    }

    .foundry-attention-section .defense-perception-row > .compact-d20-button {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
    }

    .foundry-movement-grid .foundry-size-text {
        font-size: 1.12rem !important;
        letter-spacing: -.01em !important;
    }
}

/* Very narrow rails: stack Speed and Size instead of clipping either one. */
@media (min-width: 761px) and (max-width: 980px) {
    .foundry-movement-grid {
        grid-template-columns: 1fr !important;
    }

    .foundry-movement-grid > div {
        min-height: 86px !important;
    }
}

/* Phone uses its own mobile HUD, but keep the source sidebar safe if exposed. */
@media (max-width: 760px) {
    .foundry-attention-section .defense-perception-row {
        grid-template-columns: 20px 52px minmax(0, 1fr) 34px !important;
        gap: 5px !important;
    }

    .foundry-movement-grid .foundry-size-text {
        font-size: 1.08rem !important;
    }
}


/* =========================================================
   Stage 10.11.9.6 — compact Conditions add button
   ========================================================= */

.conditions-add-icon-button {
    -webkit-appearance: none !important;
    appearance: none !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 34px !important;

    border: 1px solid rgba(226,160,77,.48) !important;
    border-radius: 8px !important;

    background:
        linear-gradient(180deg, rgba(53,37,24,.95), rgba(25,18,13,.98)) !important;

    color: #e6ad5a !important;
    -webkit-text-fill-color: #e6ad5a !important;

    box-shadow:
        inset 0 1px 0 rgba(255,212,146,.06),
        0 4px 10px rgba(0,0,0,.18) !important;

    cursor: pointer !important;
    overflow: hidden !important;
}

.conditions-add-icon-button > span {
    display: block !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: inherit !important;
    font-size: 1.22rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transform: translateY(-1px);
}

.conditions-add-icon-button:hover {
    border-color: rgba(226,160,77,.78) !important;
    background:
        linear-gradient(180deg, rgba(68,46,28,.98), rgba(31,21,14,.98)) !important;
    color: #f1bf72 !important;
    -webkit-text-fill-color: #f1bf72 !important;
    box-shadow:
        0 0 0 1px rgba(226,160,77,.08),
        0 5px 14px rgba(0,0,0,.22) !important;
}

.conditions-add-icon-button:active {
    transform: translateY(1px) scale(.96) !important;
}

@media (max-width: 760px) {
    .conditions-add-icon-button {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        border-radius: 7px !important;
    }

    .conditions-add-icon-button > span {
        font-size: 1.14rem !important;
    }
}


/* =========================================================
   Stage 10.11.9.7 — exact Conditions/Effects add button fix
   ========================================================= */

.foundry-effects-section .effects-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.foundry-effects-section .effects-section-title > span:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.foundry-effects-section .effects-add-button.effects-add-icon-only {
    -webkit-appearance: none !important;
    appearance: none !important;

    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-grid !important;
    place-items: center !important;

    border: 1px solid rgba(226,160,77,.48) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(53,37,24,.96), rgba(25,18,13,.98)) !important;

    color: #e6ad5a !important;
    -webkit-text-fill-color: #e6ad5a !important;

    box-shadow:
        inset 0 1px 0 rgba(255,212,146,.06),
        0 4px 10px rgba(0,0,0,.18) !important;

    overflow: hidden !important;
    cursor: pointer !important;
}

.foundry-effects-section .effects-add-button.effects-add-icon-only > span {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;

    font-family: inherit !important;
    font-size: 1.18rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;

    transform: translateY(-1px) !important;
}

.foundry-effects-section .effects-add-button.effects-add-icon-only:hover {
    border-color: rgba(226,160,77,.78) !important;
    background: linear-gradient(180deg, rgba(68,46,28,.98), rgba(31,21,14,.98)) !important;
    color: #f0be72 !important;
    -webkit-text-fill-color: #f0be72 !important;
}

.foundry-effects-section .effects-add-button.effects-add-icon-only:active {
    transform: translateY(1px) scale(.96) !important;
}

/* Old text layout must never leak back through inherited styles. */
.foundry-effects-section .effects-add-button.effects-add-icon-only b,
.foundry-effects-section .effects-add-button.effects-add-icon-only small {
    display: none !important;
}

@media (max-width: 760px) {
    .foundry-effects-section .effects-add-button.effects-add-icon-only {
        flex-basis: 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        border-radius: 7px !important;
    }
}

/* Stage 10.11.9.8 — keep effects + button inside header */
.foundry-effects-section .effects-section-title {
    position: relative !important;
    min-height: 38px !important;
    padding-right: 42px !important;
    box-sizing: border-box !important;
}
.foundry-effects-section .effects-add-button.effects-add-icon-only {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}
@media (max-width: 760px) {
 .foundry-effects-section .effects-section-title { min-height: 36px !important; padding-right: 40px !important; }
}


/* =========================================================
   Stage 10.11.9.9 — Initiative / Attention / Saves cleanup
   ========================================================= */

/* -----------------------------------------
   Initiative: balanced full-width row
   ----------------------------------------- */
.initiative-standalone-section .initiative-controls-row,
.initiative-section .initiative-controls-row {
    display: grid !important;
    grid-template-columns: minmax(64px, 82px) minmax(150px, 1fr) 46px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.initiative-controls-row .initiative-standalone-value {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    justify-self: stretch !important;
}

.initiative-controls-row .initiative-source-standalone,
.initiative-controls-row .initiative-source-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    text-align: left !important;

    min-height: 42px !important;
    padding: 0 36px 0 12px !important;
    border-radius: 7px !important;

    background-color: rgba(28,22,18,.96) !important;
    border-color: rgba(226,160,77,.28) !important;
    color: #dfd1c1 !important;
    font-size: .82rem !important;
    font-weight: 750 !important;
}

.initiative-controls-row .standalone-d20-button {
    justify-self: end !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
}

/* -----------------------------------------
   Attention: remove dark inner field/card
   ----------------------------------------- */
.foundry-attention-section {
    overflow: hidden !important;
}

.foundry-attention-section .defense-perception-row {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    padding: 8px 0 2px !important;
    min-height: 58px !important;

    grid-template-columns:
        22px
        minmax(48px, 62px)
        minmax(0, 1fr)
        38px !important;
    gap: 8px !important;
}

.foundry-attention-section .compact-defense-value,
.foundry-attention-section .compact-rank-pill,
.foundry-attention-section .compact-d20-button {
    position: relative !important;
    z-index: 1 !important;
}

/* -----------------------------------------
   Saves: remove dark inner boxes/dividers
   and give values more breathing room
   ----------------------------------------- */
.foundry-saves-section .compact-save-grid {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 8px !important;
}

.foundry-saves-section .compact-save-cell {
    min-width: 0 !important;
    min-height: 112px !important;
    padding: 8px 5px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    display: grid !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 7px !important;
}

.foundry-saves-section .compact-save-cell + .compact-save-cell {
    border-left: 0 !important;
}

.foundry-saves-section .compact-save-head {
    max-width: 100% !important;
    white-space: nowrap !important;
    font-size: .78rem !important;
}

.foundry-saves-section .compact-rank-pill {
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: 7px !important;
}

.foundry-saves-section .compact-save-roll-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(34px, 1fr) 36px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin-top: 4px !important;
}

.foundry-saves-section .compact-save-roll-row > strong {
    min-width: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.foundry-saves-section .compact-save-roll-row .compact-d20-button {
    justify-self: start !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
}

.foundry-saves-section .compact-inline-result {
    margin-top: 1px !important;
}

/* Tablet / compact desktop */
@media (min-width: 761px) and (max-width: 1599px) {
    .initiative-standalone-section .initiative-controls-row,
    .initiative-section .initiative-controls-row {
        grid-template-columns: 72px minmax(130px, 1fr) 42px !important;
        gap: 8px !important;
    }

    .initiative-controls-row .initiative-source-standalone,
    .initiative-controls-row .initiative-source-select {
        min-height: 40px !important;
        font-size: .76rem !important;
    }

    .initiative-controls-row .standalone-d20-button {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }

    .foundry-saves-section .compact-save-grid {
        gap: 4px !important;
    }

    .foundry-saves-section .compact-save-head {
        font-size: .68rem !important;
    }

    .foundry-saves-section .compact-save-cell {
        min-height: 106px !important;
        padding-inline: 3px !important;
    }
}

/* Phone: keep the same visual language, but stack initiative cleanly */
@media (max-width: 760px) {
    .initiative-standalone-section .initiative-controls-row,
    .initiative-section .initiative-controls-row {
        grid-template-columns: 64px minmax(0, 1fr) 40px !important;
        gap: 7px !important;
    }

    .initiative-controls-row .initiative-source-standalone,
    .initiative-controls-row .initiative-source-select {
        min-height: 40px !important;
        font-size: .74rem !important;
        padding-left: 10px !important;
        padding-right: 30px !important;
    }

    .initiative-controls-row .standalone-d20-button {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }

    .foundry-attention-section .defense-perception-row {
        grid-template-columns: 20px 52px minmax(0, 1fr) 34px !important;
        gap: 6px !important;
    }

    .foundry-saves-section .compact-save-grid {
        gap: 2px !important;
    }

    .foundry-saves-section .compact-save-head {
        font-size: .64rem !important;
    }

    .foundry-saves-section .compact-save-roll-row {
        grid-template-columns: minmax(30px, 1fr) 32px !important;
    }

    .foundry-saves-section .compact-save-roll-row .compact-d20-button {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }
}


/* =========================================================
   Stage 10.11.9.10 — Larger Attention & Saves content
   ========================================================= */

/* ATTENTION */
.foundry-attention-section .defense-perception-row {
    min-height: 72px !important;
    grid-template-columns: 28px minmax(58px, 74px) minmax(0, 1fr) 46px !important;
    gap: 11px !important;
    padding: 10px 4px 5px !important;
}

.foundry-attention-section .defense-perception-row > :first-child,
.foundry-attention-section .defense-perception-row .defense-icon,
.foundry-attention-section .defense-perception-row .compact-defense-icon {
    font-size: 1.12rem !important;
    width: 28px !important;
    min-width: 28px !important;
}

.foundry-attention-section .compact-defense-value {
    font-size: 1.28rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

.foundry-attention-section .compact-rank-pill {
    font-size: .78rem !important;
    min-height: 28px !important;
    padding: 5px 10px !important;
}

.foundry-attention-section .compact-d20-button {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
}

/* SAVES */
.foundry-saves-section .compact-save-cell {
    min-height: 132px !important;
    padding: 10px 5px 8px !important;
    gap: 9px !important;
}

.foundry-saves-section .compact-save-head {
    font-size: .88rem !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    gap: 5px !important;
}

.foundry-saves-section .compact-save-head > :first-child,
.foundry-saves-section .compact-save-head svg,
.foundry-saves-section .compact-save-head i {
    font-size: 1rem !important;
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
}

.foundry-saves-section .compact-rank-pill {
    font-size: .73rem !important;
    min-height: 27px !important;
    padding: 5px 9px !important;
}

.foundry-saves-section .compact-save-roll-row {
    grid-template-columns: minmax(42px, 1fr) 42px !important;
    gap: 6px !important;
    margin-top: 5px !important;
}

.foundry-saves-section .compact-save-roll-row > strong {
    font-size: 1.22rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

.foundry-saves-section .compact-save-roll-row .compact-d20-button {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
}

.foundry-saves-section .compact-inline-result {
    font-size: .92rem !important;
    min-height: 18px !important;
}

/* Tablet */
@media (min-width: 761px) and (max-width: 1599px) {
    .foundry-attention-section .defense-perception-row {
        grid-template-columns: 26px minmax(54px, 70px) minmax(0, 1fr) 42px !important;
        gap: 9px !important;
    }

    .foundry-attention-section .compact-defense-value {
        font-size: 1.2rem !important;
    }

    .foundry-attention-section .compact-d20-button {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }

    .foundry-saves-section .compact-save-head {
        font-size: .80rem !important;
    }

    .foundry-saves-section .compact-save-roll-row > strong {
        font-size: 1.14rem !important;
    }

    .foundry-saves-section .compact-save-roll-row {
        grid-template-columns: minmax(38px, 1fr) 38px !important;
    }

    .foundry-saves-section .compact-save-roll-row .compact-d20-button {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }
}

/* Phone */
@media (max-width: 760px) {
    .foundry-attention-section .defense-perception-row {
        min-height: 66px !important;
        grid-template-columns: 24px 54px minmax(0, 1fr) 38px !important;
        gap: 7px !important;
    }

    .foundry-attention-section .compact-defense-value {
        font-size: 1.14rem !important;
    }

    .foundry-attention-section .compact-rank-pill {
        font-size: .68rem !important;
        padding-inline: 7px !important;
    }

    .foundry-attention-section .compact-d20-button {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    .foundry-saves-section .compact-save-cell {
        min-height: 122px !important;
        gap: 7px !important;
        padding-inline: 2px !important;
    }

    .foundry-saves-section .compact-save-head {
        font-size: .72rem !important;
        gap: 3px !important;
    }

    .foundry-saves-section .compact-save-head > :first-child,
    .foundry-saves-section .compact-save-head svg,
    .foundry-saves-section .compact-save-head i {
        font-size: .88rem !important;
        width: 14px !important;
        min-width: 14px !important;
        height: 14px !important;
    }

    .foundry-saves-section .compact-rank-pill {
        font-size: .64rem !important;
        min-height: 24px !important;
        padding: 4px 5px !important;
    }

    .foundry-saves-section .compact-save-roll-row {
        grid-template-columns: minmax(34px, 1fr) 34px !important;
        gap: 3px !important;
    }

    .foundry-saves-section .compact-save-roll-row > strong {
        font-size: 1.05rem !important;
    }

    .foundry-saves-section .compact-save-roll-row .compact-d20-button {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
    }
}

/* =========================================================
   Stage 10.11.9.11 — Tablet saves fit + desktop attention scale
   ========================================================= */

/* Desktop only: Attention can use a little more visual weight. */
@media (min-width: 1600px) {
    .foundry-attention-section .defense-perception-row {
        min-height: 78px !important;
        grid-template-columns: 30px minmax(64px, 82px) minmax(0, 1fr) 50px !important;
        gap: 12px !important;
        padding: 11px 5px 7px !important;
    }
    .foundry-attention-section .defense-perception-row > :first-child,
    .foundry-attention-section .defense-perception-row .defense-icon,
    .foundry-attention-section .defense-perception-row .compact-defense-icon {
        font-size: 1.24rem !important;
        width: 30px !important;
        min-width: 30px !important;
    }
    .foundry-attention-section .compact-defense-value {
        font-size: 1.4rem !important;
    }
    .foundry-attention-section .compact-rank-pill {
        font-size: .82rem !important;
        min-height: 30px !important;
        padding: 5px 11px !important;
    }
    .foundry-attention-section .compact-d20-button {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }
}

/* Tablet: keep all three save columns fully inside their panel. */
@media (min-width: 761px) and (max-width: 1599px) {
    .foundry-saves-section,
    .foundry-saves-section .defense-saves-grid,
    .foundry-saves-section .compact-saves-grid {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .foundry-saves-section .defense-saves-grid,
    .foundry-saves-section .compact-saves-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .foundry-saves-section .compact-save-cell {
        min-width: 0 !important;
        min-height: 126px !important;
        padding: 9px 3px 7px !important;
        gap: 7px !important;
        overflow: hidden !important;
    }

    .foundry-saves-section .compact-save-head {
        min-width: 0 !important;
        font-size: .72rem !important;
        gap: 3px !important;
        white-space: nowrap !important;
    }

    .foundry-saves-section .compact-save-head > :first-child,
    .foundry-saves-section .compact-save-head svg,
    .foundry-saves-section .compact-save-head i {
        font-size: .86rem !important;
        width: 14px !important;
        min-width: 14px !important;
        height: 14px !important;
    }

    /* The proficiency label must remain readable instead of being clipped. */
    .foundry-saves-section .compact-rank-pill {
        width: calc(100% - 4px) !important;
        max-width: calc(100% - 4px) !important;
        min-width: 0 !important;
        min-height: 25px !important;
        padding: 4px 3px !important;
        font-size: .62rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        box-sizing: border-box !important;
    }

    .foundry-saves-section .compact-save-roll-row {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) 34px !important;
        gap: 2px !important;
        margin-top: 3px !important;
    }

    .foundry-saves-section .compact-save-roll-row > strong {
        min-width: 0 !important;
        font-size: 1.06rem !important;
    }

    .foundry-saves-section .compact-save-roll-row .compact-d20-button {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
    }

    .foundry-saves-section .compact-inline-result {
        font-size: .82rem !important;
        min-height: 16px !important;
    }
}


/* =========================================================
   Stage 10.11.9.12 — ancestry heritage collapse fix
   ========================================================= */

.heritage-feature-detail[hidden],
.heritage-choice-edit[hidden] {
    display: none !important;
}

.heritage-feature-card:not(.is-expanded) {
    gap: 0 !important;
}

.heritage-feature-card.is-expanded {
    gap: 8px !important;
}

.heritage-feature-actions [data-heritage-feature-toggle] {
    cursor: pointer !important;
}

/* Stage 10.11.9.13 — unified Edit/Delete sprite controls */
:root {
    --pf2e-edit-sprite: url('/static/icons/edit-button-sprite.webp');
    --pf2e-delete-sprite: url('/static/icons/delete-button-sprite.webp');
}

/* Shared sprite surface. Existing click handlers/forms remain untouched. */
.pf2e-edit-sprite,
.pf2e-delete-sprite,
.icon-button[title*="Редакт"],
.icon-button[title*="Измен"],
.hp-mini-button[title*="Измен"],
.hp-mini-button[title*="Задать"],
.shield-hp-edit-button,
.inventory-edit-button,
.foundry-source-edit,
.mobile-avatar-edit-badge,
.portrait-delete-button,
.inventory-delete-button,
.lore-delete-button,
.foundry-delete-button,
.feat-slot-remove,
.roll-history-clear-button {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden;
    vertical-align: middle;
}

.pf2e-edit-sprite,
.icon-button[title*="Редакт"],
.icon-button[title*="Измен"],
.hp-mini-button[title*="Измен"],
.hp-mini-button[title*="Задать"],
.shield-hp-edit-button,
.inventory-edit-button,
.foundry-source-edit,
.mobile-avatar-edit-badge {
    background-image: var(--pf2e-edit-sprite) !important;
}

.pf2e-delete-sprite,
.portrait-delete-button,
.inventory-delete-button,
.lore-delete-button,
.foundry-delete-button,
.feat-slot-remove,
.roll-history-clear-button,
.icon-button.danger-icon[title*="Удал"] {
    background-image: var(--pf2e-delete-sprite) !important;
}

/* The sprite itself replaces old glyph/SVG art. */
.icon-button[title*="Редакт"] > *,
.icon-button[title*="Измен"] > *,
.hp-mini-button[title*="Измен"] > *,
.hp-mini-button[title*="Задать"] > *,
.shield-hp-edit-button > *,
.inventory-edit-button > *,
.foundry-source-edit > *,
.portrait-delete-button > *,
.inventory-delete-button > *,
.lore-delete-button > *,
.foundry-delete-button > *,
.feat-slot-remove > *,
.roll-history-clear-button > *,
.icon-button.danger-icon[title*="Удал"] > * {
    display: none !important;
}

/* Dashboard uses the same sprite controls but keeps its original larger hit target. */
.character-card-toolbar .icon-button-large {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
}

/* Feat rows used to have a full-width textual Delete button. Keep the action compact. */
.feat-slot-actions .feat-slot-remove {
    width: 34px !important;
    min-width: 34px !important;
    margin-inline: auto;
}

/* Hover/press animation shared by both sprite families. */
.pf2e-edit-sprite,
.pf2e-delete-sprite,
.icon-button[title*="Редакт"],
.icon-button[title*="Измен"],
.hp-mini-button[title*="Измен"],
.hp-mini-button[title*="Задать"],
.shield-hp-edit-button,
.inventory-edit-button,
.foundry-source-edit,
.portrait-delete-button,
.inventory-delete-button,
.lore-delete-button,
.foundry-delete-button,
.feat-slot-remove,
.roll-history-clear-button,
.icon-button.danger-icon[title*="Удал"] {
    transition: transform .16s ease, filter .16s ease;
}

.pf2e-edit-sprite:hover,
.pf2e-delete-sprite:hover,
.icon-button[title*="Редакт"]:hover,
.icon-button[title*="Измен"]:hover,
.hp-mini-button[title*="Измен"]:hover,
.hp-mini-button[title*="Задать"]:hover,
.shield-hp-edit-button:hover,
.inventory-edit-button:hover,
.foundry-source-edit:hover,
.portrait-delete-button:hover,
.inventory-delete-button:hover,
.lore-delete-button:hover,
.foundry-delete-button:hover,
.feat-slot-remove:hover,
.roll-history-clear-button:hover,
.icon-button.danger-icon[title*="Удал"]:hover {
    transform: translateY(-1px) scale(1.06);
    filter: brightness(1.14) drop-shadow(0 0 7px rgba(232,164,70,.24));
}

.pf2e-edit-sprite:active,
.pf2e-delete-sprite:active,
.icon-button[title*="Редакт"]:active,
.icon-button[title*="Измен"]:active,
.hp-mini-button[title*="Измен"]:active,
.hp-mini-button[title*="Задать"]:active,
.shield-hp-edit-button:active,
.inventory-edit-button:active,
.foundry-source-edit:active,
.portrait-delete-button:active,
.inventory-delete-button:active,
.lore-delete-button:active,
.foundry-delete-button:active,
.feat-slot-remove:active,
.roll-history-clear-button:active,
.icon-button.danger-icon[title*="Удал"]:active {
    transform: scale(.94);
}
\n\n/* =========================================================
   Stage 10.11.9.14 — header sprite cleanup + desktop history
   ========================================================= */

/* Header actions use only our sprites. Removing the text glyph from the
   template is important because colour emoji can ignore color:transparent. */
.foundry-identity-actions .pf2e-edit-sprite,
.foundry-identity-actions .pf2e-delete-sprite {
    display: inline-block !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* 1367px+ is desktop for this sheet. The roll-history rail is permanent,
   therefore the floating History button must not exist there. */
@media (min-width: 1367px) {
    .foundry-sheet-shell {
        grid-template-columns:
            var(--sheet-sidebar-width, 390px)
            minmax(0, 1fr)
            var(--roll-history-width, 260px) !important;
    }

    .roll-history-rail {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    .mobile-roll-fab,
    .foundry-character-page .mobile-roll-fab {
        display: none !important;
    }
}

/* Tablet keeps the compact floating history control. */
@media (min-width: 761px) and (max-width: 1366px) {
    .mobile-roll-fab,
    .foundry-character-page .mobile-roll-fab {
        display: flex !important;
    }
}


/* =========================================================
   Stage 10.11.9.15 — header sprites + portrait tablet essentials
   ========================================================= */

:root {
    --pf2e-edit-sprite: url('/static/icons/edit-button-sprite.webp?v=10.11.9.15') !important;
    --pf2e-delete-sprite: url('/static/icons/delete-button-sprite.webp?v=10.11.9.15') !important;
}

/* Header controls: render only the intended full sprite. */
.foundry-identity-actions .pf2e-edit-sprite,
.foundry-identity-actions .pf2e-delete-sprite {
    display: inline-block !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background-color: transparent !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 38px 38px !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

.foundry-identity-actions .pf2e-edit-sprite::before,
.foundry-identity-actions .pf2e-edit-sprite::after,
.foundry-identity-actions .pf2e-delete-sprite::before,
.foundry-identity-actions .pf2e-delete-sprite::after {
    content: none !important;
    display: none !important;
}

/* Portrait tablet: the desktop sidebar is intentionally hidden in the
   compact tablet layout, so expose the combat essentials inside the tablet HUD. */
@media (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
    .mobile-character-hud {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .mobile-hud-identity,
    .mobile-combat-summary {
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-combat-summary {
        grid-row: auto !important;
    }

    .mobile-character-essentials {
        display: grid !important;
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    .mobile-effects-card,
    .mobile-perception-card,
    .mobile-saves-card,
    .mobile-resistance-card,
    .mobile-movement-card {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .mobile-save-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .mobile-two-column-essentials {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    .mobile-essential-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .mobile-essential-title > span {
        font-size: 14px !important;
    }

    .mobile-single-roll strong,
    .mobile-save-cell strong {
        font-size: 23px !important;
    }

    .mobile-save-cell > span {
        font-size: 10px !important;
    }

    .mobile-inline-d20 {
        width: 38px !important;
        height: 38px !important;
    }
}

/* Narrow portrait tablets: Movement and Resistances stack instead of squeezing. */
@media (min-width: 761px) and (max-width: 900px) and (orientation: portrait) {
    .mobile-two-column-essentials {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   Stage 10.11.9.16 — dashboard edit/delete sprites
   ========================================================= */

:root {
    --pf2e-edit-sprite: url('/static/icons/edit-button-sprite.webp?v=10.11.9.16') !important;
    --pf2e-delete-sprite: url('/static/icons/delete-button-sprite.webp?v=10.11.9.16') !important;
}

.character-card-toolbar .dashboard-edit-sprite,
.character-card-toolbar .dashboard-delete-sprite {
    display: inline-block !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 9px !important;
    background-color: transparent !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 42px 42px !important;
    box-shadow: none !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

.character-card-toolbar .dashboard-edit-sprite {
    background-image: var(--pf2e-edit-sprite) !important;
}

.character-card-toolbar .dashboard-delete-sprite {
    background-image: var(--pf2e-delete-sprite) !important;
}

.character-card-toolbar .dashboard-edit-sprite::before,
.character-card-toolbar .dashboard-edit-sprite::after,
.character-card-toolbar .dashboard-delete-sprite::before,
.character-card-toolbar .dashboard-delete-sprite::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   Stage 10.11.9.17 — portrait tablet combat HUD design
   10.11.9.15 only made these blocks visible above 900px.
   Their actual visual styles still ended at 900px, so iPad portrait
   rendered raw text/native buttons. Apply the complete HUD design
   to portrait tablets up to 1180px.
   ========================================================= */

@media (min-width: 901px) and (max-width: 1180px) and (orientation: portrait) {
    .mobile-character-essentials,
    .mobile-character-essentials * {
        box-sizing: border-box !important;
    }

    .mobile-character-essentials {
        display: grid !important;
        gap: 12px !important;
        margin-top: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-essential-card {
        width: 100% !important;
        min-width: 0 !important;
        border: 1px solid rgba(232,164,70,.20) !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.018) !important;
        overflow: hidden !important;
    }

    .mobile-essential-title {
        min-height: 44px !important;
        padding: 9px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        border-bottom: 1px solid rgba(232,164,70,.12) !important;
    }

    .mobile-essential-title > span {
        color: #e3d2bd !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        letter-spacing: .035em !important;
    }

    .mobile-essential-title button {
        -webkit-appearance: none !important;
        appearance: none !important;
        min-height: 32px !important;
        padding: 0 10px !important;
        border: 1px solid rgba(232,164,70,.28) !important;
        border-radius: 7px !important;
        background: rgba(232,164,70,.07) !important;
        color: #dfb472 !important;
        font: inherit !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        box-shadow: none !important;
    }

    .mobile-state-grid {
        display: grid !important;
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        gap: 1px !important;
        background: rgba(232,164,70,.10) !important;
    }

    .mobile-state-grid > div {
        min-height: 72px !important;
        padding: 9px 6px !important;
        display: grid !important;
        place-content: center !important;
        gap: 4px !important;
        text-align: center !important;
        background: #171310 !important;
    }

    .mobile-state-grid span {
        color: #86796e !important;
        font-size: 9px !important;
        text-transform: uppercase !important;
    }

    .mobile-state-grid strong {
        color: #eee4d8 !important;
        font-size: 23px !important;
        line-height: 1 !important;
    }

    .mobile-state-grid .is-danger strong { color:#df776c !important; }
    .mobile-state-grid .is-wounded strong { color:#e2a05f !important; }
    .mobile-state-grid .is-hero strong { color:#f0c36f !important; }

    .mobile-heroic-recovery { padding: 8px !important; }

    .mobile-heroic-recovery button {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 100% !important;
        min-height: 38px !important;
        border: 1px solid rgba(232,164,70,.28) !important;
        border-radius: 7px !important;
        background: rgba(232,164,70,.08) !important;
        color: #e6b974 !important;
        font-weight: 900 !important;
    }

    .mobile-condition-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 10px !important;
    }

    .mobile-condition-chip {
        min-height: 34px !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 0 9px !important;
        border: 1px solid rgba(232,164,70,.24) !important;
        border-radius: 7px !important;
        background: rgba(116,64,36,.18) !important;
        color: #d7c5b2 !important;
        font-size: 11px !important;
    }

    .mobile-condition-chip strong {
        min-width: 22px !important;
        height: 22px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 999px !important;
        background: #e4a34d !important;
        color: #17100b !important;
        font-size: 10px !important;
    }

    .mobile-empty-note {
        padding: 12px !important;
        color: #74695f !important;
        font-size: 10px !important;
    }

    .mobile-single-roll {
        min-height: 72px !important;
        padding: 10px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    .mobile-single-roll > div {
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .mobile-single-roll strong {
        color: #eee4d7 !important;
        font-size: 26px !important;
    }

    .mobile-rank {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 24px !important;
        padding: 0 7px !important;
        border-radius: 4px !important;
        background: rgba(83,58,112,.42) !important;
        color: #d9b8ef !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .mobile-inline-d20 {
        -webkit-appearance: none !important;
        appearance: none !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 4px !important;
        border: 1px solid rgba(232,164,70,.20) !important;
        border-radius: 8px !important;
        background: #171310 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .mobile-inline-d20 img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    .mobile-save-grid {
        display: grid !important;
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        gap: 1px !important;
        background: rgba(232,164,70,.10) !important;
    }

    .mobile-save-cell {
        min-width: 0 !important;
        padding: 10px 7px !important;
        display: grid !important;
        gap: 6px !important;
        background: #171310 !important;
        overflow: hidden !important;
    }

    .mobile-save-cell > span {
        color: #b6a697 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .mobile-save-cell > small {
        justify-self: center !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .mobile-save-cell > div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    .mobile-save-cell strong {
        color: #eee4d8 !important;
        font-size: 22px !important;
    }

    .mobile-save-cell .mobile-inline-d20 {
        flex-basis: 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }

    .mobile-two-column-essentials {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    .mobile-movement-values {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1px !important;
        background: rgba(232,164,70,.10) !important;
    }

    .mobile-movement-values > div {
        min-height: 76px !important;
        display: grid !important;
        place-content: center !important;
        gap: 2px !important;
        text-align: center !important;
        background: #171310 !important;
        overflow: hidden !important;
    }

    .mobile-movement-values span,
    .mobile-resistance-list span {
        color: #84776c !important;
        font-size: 9px !important;
        text-transform: uppercase !important;
    }

    .mobile-movement-values strong {
        color: #eee4d8 !important;
        font-size: 22px !important;
        white-space: nowrap !important;
    }

    .mobile-movement-values small {
        color: #8c7e72 !important;
        font-size: 9px !important;
    }

    .mobile-resistance-list {
        display: grid !important;
    }

    .mobile-resistance-list > div {
        min-height: 48px !important;
        padding: 7px 10px !important;
        display: grid !important;
        grid-template-columns: minmax(0,1fr) auto !important;
        align-items: center !important;
        gap: 2px 7px !important;
        border-bottom: 1px solid rgba(232,164,70,.08) !important;
    }

    .mobile-resistance-list > div:last-child {
        border-bottom: 0 !important;
    }

    .mobile-resistance-list strong {
        grid-row: 1/3 !important;
        grid-column: 2 !important;
        color: #e5ad57 !important;
        font-size: 18px !important;
    }

    .mobile-resistance-list small {
        color: #72675e !important;
        font-size: 8px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* Narrower portrait tablets: prevent the bottom two cards from squeezing. */
@media (min-width: 761px) and (max-width: 900px) and (orientation: portrait) {
    .mobile-two-column-essentials {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   Stage 10.11.9.18 — tablet landscape permanent roll history
   In landscape the tablet has a real third column for History.
   It is not a fixed drawer and does not overlap the sheet.
   ========================================================= */

@media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape) {
    /* Use the whole available width, but keep safe outer spacing. */
    .foundry-character-page {
        width: calc(100% - 12px) !important;
        max-width: none !important;
        margin-inline: auto !important;
    }

    /* Three real columns: sidebar / sheet / history. */
    .foundry-sheet-shell {
        display: grid !important;
        grid-template-columns:
            clamp(270px, 24vw, 340px)
            minmax(0, 1fr)
            clamp(250px, 21vw, 310px) !important;
        grid-template-areas:
            "sidebar main history" !important;
        gap: 10px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .foundry-sidebar {
        grid-area: sidebar !important;
        grid-column: auto !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .foundry-main-column-v2 {
        grid-area: main !important;
        grid-column: auto !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* History is a normal right-hand field, not an overlay. */
    .roll-history-rail,
    .roll-history-rail.mobile-history-open {
        grid-area: history !important;
        grid-column: auto !important;
        grid-row: auto !important;

        position: sticky !important;
        top: 84px !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: grid !important;
        align-self: start !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: calc(100dvh - 98px) !important;
        min-height: 420px !important;
        max-height: none !important;

        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        overflow: hidden !important;
        border-radius: 12px !important;
        background: rgba(21,18,15,.985) !important;
        box-shadow: none !important;

        transition: none !important;
    }

    .roll-history-head {
        position: sticky !important;
        top: 0 !important;
        z-index: 4 !important;
        flex: 0 0 auto !important;
        background: rgba(21,18,15,.99) !important;
    }

    .roll-history-current {
        min-height: 76px !important;
        padding: 9px 10px !important;
    }

    .roll-history-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 8px !important;
        gap: 6px !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .roll-history-entry {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* There is no need for the floating History button while the rail is open. */
    .mobile-roll-fab,
    .foundry-character-page .mobile-roll-fab {
        display: none !important;
    }

    /* The tablet portrait HUD must not consume an extra grid row in landscape. */
    .mobile-character-hud {
        grid-area: auto !important;
    }
}

/* A slightly narrower landscape tablet needs a little more room for the sheet. */
@media (min-width: 901px) and (max-width: 1100px) and (orientation: landscape) {
    .foundry-sheet-shell {
        grid-template-columns:
            255px
            minmax(0, 1fr)
            245px !important;
        gap: 8px !important;
    }

    .roll-history-rail,
    .roll-history-rail.mobile-history-open {
        top: 78px !important;
        height: calc(100dvh - 90px) !important;
    }
}


/* =========================================================
   Stage 10.11.9.19 — landscape history definitive override
   Some iPad browsers report a CSS viewport wider than 1366px.
   Therefore the previous tablet-only breakpoint never matched.
   This override covers landscape layouts up to 1599px and wins
   over the older compact-history drawer rules.
   ========================================================= */

@media (min-width: 901px) and (max-width: 1599px) and (orientation: landscape) {
    .foundry-character-page {
        width: calc(100% - 12px) !important;
        max-width: none !important;
        margin-inline: auto !important;
    }

    .foundry-sheet-shell,
    .foundry-sheet-shell.foundry-sheet-v2 {
        display: grid !important;
        grid-template-columns:
            clamp(260px, 23vw, 330px)
            minmax(0, 1fr)
            clamp(250px, 22vw, 320px) !important;
        grid-template-areas:
            "sidebar main history" !important;
        gap: 10px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .foundry-sidebar {
        grid-area: sidebar !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .foundry-main-column,
    .foundry-main-column-v2 {
        grid-area: main !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .roll-history-rail,
    .roll-history-rail.mobile-history-open {
        grid-area: history !important;
        grid-column: auto !important;
        grid-row: auto !important;

        position: sticky !important;
        top: 84px !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: grid !important;
        grid-template-rows: auto auto minmax(0,1fr) !important;
        align-self: start !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: calc(100dvh - 98px) !important;
        min-height: 420px !important;
        max-height: none !important;

        transform: none !important;
        translate: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        overflow: hidden !important;
        border-radius: 12px !important;
        background: rgba(21,18,15,.985) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        transition: none !important;
    }

    .roll-history-head {
        position: relative !important;
        top: auto !important;
        z-index: 2 !important;
    }

    .roll-history-current {
        min-height: 74px !important;
        padding: 9px 10px !important;
    }

    .roll-history-list {
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 8px !important;
    }

    .mobile-roll-fab,
    .foundry-character-page .mobile-roll-fab {
        display: none !important;
    }
}

/* On medium landscape widths give the center column priority. */
@media (min-width: 901px) and (max-width: 1250px) and (orientation: landscape) {
    .foundry-sheet-shell,
    .foundry-sheet-shell.foundry-sheet-v2 {
        grid-template-columns: 250px minmax(0,1fr) 245px !important;
        gap: 8px !important;
    }
}


/* =========================================================
   Stage 10.12.0 — cinematic D20 prototype (Perception only)
   ========================================================= */

.dice-cinematic-overlay[hidden] {
    display: none !important;
}

.dice-cinematic-overlay {
    position: fixed;
    inset: 0;
    z-index: 32000;
    display: grid;
    place-items: center;
    pointer-events: none;
    overflow: hidden;
    isolation: isolate;
}

.dice-cinematic-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 48%, rgba(131,79,28,.16), transparent 34%),
        rgba(5,4,3,.68);
    opacity: 0;
    backdrop-filter: blur(2px);
    transition: opacity .18s ease;
}

.dice-cinematic-overlay.is-running .dice-cinematic-backdrop {
    opacity: 1;
}

.dice-cinematic-stage {
    position: relative;
    width: min(620px, 92vw);
    height: min(520px, 72dvh);
    display: grid;
    place-items: center;
    perspective: 900px;
    transform-style: preserve-3d;
}

.dice-cinematic-aura {
    position: absolute;
    width: min(360px, 58vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(231,166,73,.18) 0%,
            rgba(190,109,31,.07) 38%,
            transparent 70%);
    filter: blur(10px);
    opacity: 0;
    transform: scale(.65);
    transition: opacity .25s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

.dice-cinematic-overlay.is-running .dice-cinematic-aura {
    opacity: .8;
    transform: scale(1);
}

.dice-cinematic-die {
    position: relative;
    z-index: 3;
    width: clamp(150px, 24vw, 245px);
    aspect-ratio: 1;
    transform-style: preserve-3d;
    will-change: transform, filter, opacity;
    filter:
        drop-shadow(0 30px 28px rgba(0,0,0,.48))
        drop-shadow(0 0 18px rgba(226,151,55,.18));
}

.dice-cinematic-die img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.dice-cinematic-die.is-rolling {
    animation: pf2e-d20-cinematic-roll .82s cubic-bezier(.12,.72,.18,1) both;
}

.dice-cinematic-die.is-settling {
    animation: pf2e-d20-cinematic-settle .34s cubic-bezier(.15,.78,.2,1.1) both;
}

@keyframes pf2e-d20-cinematic-roll {
    0% {
        opacity: 0;
        transform:
            translate3d(-22vw, 16vh, -360px)
            rotateX(-120deg)
            rotateY(80deg)
            rotateZ(-60deg)
            scale(.34);
        filter:
            blur(3px)
            drop-shadow(0 12px 14px rgba(0,0,0,.30))
            drop-shadow(0 0 8px rgba(226,151,55,.1));
    }
    22% {
        opacity: 1;
        transform:
            translate3d(-10vw, 2vh, -120px)
            rotateX(230deg)
            rotateY(310deg)
            rotateZ(100deg)
            scale(.72);
    }
    58% {
        transform:
            translate3d(5vw, -4vh, 50px)
            rotateX(610deg)
            rotateY(720deg)
            rotateZ(310deg)
            scale(1.12);
    }
    82% {
        transform:
            translate3d(-1.5vw, 2vh, 15px)
            rotateX(880deg)
            rotateY(1010deg)
            rotateZ(470deg)
            scale(.96);
    }
    100% {
        opacity: 1;
        transform:
            translate3d(0, 1.2vh, 0)
            rotateX(1040deg)
            rotateY(1200deg)
            rotateZ(540deg)
            scale(1);
        filter:
            blur(0)
            drop-shadow(0 30px 28px rgba(0,0,0,.48))
            drop-shadow(0 0 22px rgba(226,151,55,.22));
    }
}

@keyframes pf2e-d20-cinematic-settle {
    0% {
        transform:
            translate3d(0, 1.2vh, 0)
            rotateX(1040deg)
            rotateY(1200deg)
            rotateZ(540deg)
            scale(1);
    }
    35% {
        transform:
            translate3d(0, 5vh, 0)
            rotateX(1050deg)
            rotateY(1212deg)
            rotateZ(542deg)
            scale(.90);
    }
    62% {
        transform:
            translate3d(0, -1.7vh, 0)
            rotateX(1056deg)
            rotateY(1218deg)
            rotateZ(544deg)
            scale(1.07);
    }
    100% {
        transform:
            translate3d(0, 0, 0)
            rotateX(1060deg)
            rotateY(1220deg)
            rotateZ(545deg)
            scale(1);
    }
}

.dice-cinematic-impact {
    position: absolute;
    z-index: 2;
    width: clamp(110px, 18vw, 190px);
    height: 20px;
    top: 66%;
    border-radius: 50%;
    border: 2px solid rgba(229,165,74,.0);
    box-shadow: 0 0 0 rgba(229,165,74,0);
    opacity: 0;
}

.dice-cinematic-impact.is-hit {
    animation: pf2e-d20-impact .48s ease-out both;
}

@keyframes pf2e-d20-impact {
    0% {
        opacity: .95;
        transform: scale(.3);
        border-color: rgba(244,190,104,.8);
        box-shadow: 0 0 16px rgba(230,154,61,.5);
    }
    100% {
        opacity: 0;
        transform: scale(2.15);
        border-color: rgba(244,190,104,0);
        box-shadow: 0 0 38px rgba(230,154,61,0);
    }
}

.dice-cinematic-result {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 69%;
    min-width: min(310px, 78vw);
    transform: translate(-50%, 22px) scale(.94);
    opacity: 0;
    display: grid;
    justify-items: center;
    gap: 2px;
    color: #efe3d4;
    text-align: center;
    text-shadow: 0 3px 16px rgba(0,0,0,.7);
    transition:
        opacity .22s ease,
        transform .28s cubic-bezier(.2,.8,.2,1);
}

.dice-cinematic-result.is-visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.dice-cinematic-kicker {
    color: #d9a052;
    font-size: clamp(10px, 1.3vw, 13px);
    font-weight: 900;
    letter-spacing: .22em;
}

.dice-cinematic-result strong {
    color: #f0c170;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 7vw, 74px);
    line-height: .95;
}

.dice-cinematic-result small {
    color: #c7b6a5;
    font-size: clamp(12px, 1.8vw, 16px);
    font-weight: 700;
}

.dice-cinematic-overlay.is-critical .dice-cinematic-aura {
    opacity: 1;
    background:
        radial-gradient(circle,
            rgba(255,205,104,.42) 0%,
            rgba(231,156,56,.16) 38%,
            transparent 72%);
}

.dice-cinematic-overlay.is-critical.is-reveal .dice-cinematic-die {
    animation: pf2e-d20-critical-pulse .52s ease-out 1;
}

@keyframes pf2e-d20-critical-pulse {
    0% { filter: drop-shadow(0 0 12px rgba(255,192,78,.2)); }
    45% {
        filter:
            brightness(1.28)
            drop-shadow(0 0 42px rgba(255,196,82,.82))
            drop-shadow(0 0 90px rgba(215,124,30,.45));
    }
    100% { filter: drop-shadow(0 0 22px rgba(226,151,55,.24)); }
}

.dice-cinematic-overlay.is-critical .dice-cinematic-result strong {
    color: #ffd789;
}

.dice-cinematic-overlay.is-fumble .dice-cinematic-aura {
    background:
        radial-gradient(circle,
            rgba(162,45,35,.34) 0%,
            rgba(105,22,18,.12) 40%,
            transparent 72%);
}

.dice-cinematic-overlay.is-fumble .dice-cinematic-result strong {
    color: #d96d5d;
}

.dice-cinematic-overlay.is-closing {
    animation: pf2e-d20-overlay-close .23s ease-in both;
}

@keyframes pf2e-d20-overlay-close {
    to { opacity: 0; }
}

/* Tablet */
@media (max-width: 1180px) {
    .dice-cinematic-stage {
        width: min(560px, 94vw);
        height: min(470px, 68dvh);
    }
    .dice-cinematic-die {
        width: clamp(145px, 28vw, 215px);
    }
}

/* Phone */
@media (max-width: 760px) {
    .dice-cinematic-stage {
        width: 100vw;
        height: min(460px, 68dvh);
    }

    .dice-cinematic-die {
        width: clamp(138px, 44vw, 190px);
    }

    .dice-cinematic-result {
        top: 70%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dice-cinematic-overlay {
        display: none !important;
    }
}


/* =========================================================
   Stage 10.12.1 — D20 sprite proportion + result hold polish
   ========================================================= */

.dice-cinematic-die {
    aspect-ratio: 1 / 1 !important;
    transform-origin: 50% 50% !important;
}

.dice-cinematic-die img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    aspect-ratio: 1 / 1 !important;
    transform: none !important;
}

/* Never use anisotropic X/Y scaling on the raster D20 sprite. */
@keyframes pf2e-d20-cinematic-settle {
    0% {
        transform:
            translate3d(0, 1.2vh, 0)
            rotateX(1040deg)
            rotateY(1200deg)
            rotateZ(540deg)
            scale(1);
    }
    35% {
        transform:
            translate3d(0, 4.2vh, 0)
            rotateX(1050deg)
            rotateY(1212deg)
            rotateZ(542deg)
            scale(.90);
    }
    62% {
        transform:
            translate3d(0, -1.4vh, 0)
            rotateX(1056deg)
            rotateY(1218deg)
            rotateZ(544deg)
            scale(1.06);
    }
    100% {
        transform:
            translate3d(0, 0, 0)
            rotateX(1060deg)
            rotateY(1220deg)
            rotateZ(545deg)
            scale(1);
    }
}

/* Let the final result breathe a little more visually. */
.dice-cinematic-result.is-visible {
    transition-duration: .34s !important;
}

.dice-cinematic-overlay.is-reveal .dice-cinematic-die {
    filter:
        drop-shadow(0 30px 28px rgba(0,0,0,.48))
        drop-shadow(0 0 24px rgba(226,151,55,.28));
}


/* =========================================================
   Stage 10.12.2 — D20 geometry/orientation correction
   The D20 is a 2D raster sprite, not a real 3D mesh.
   rotateX/rotateY were perspective-distorting the sprite and could show
   it mirrored/upside-down. Keep the face camera-facing at all times.
   ========================================================= */

.dice-cinematic-stage {
    perspective: none !important;
    transform-style: flat !important;
}

.dice-cinematic-die {
    width: clamp(150px, 24vw, 245px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    transform-style: flat !important;
    transform-origin: 50% 50% !important;
    backface-visibility: visible !important;
}

.dice-cinematic-die img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    rotate: 0deg !important;
    scale: 1 !important;
}

/* The sprite always faces the camera.
   Rotation is only around Z and ends exactly upright (multiple of 360deg). */
@keyframes pf2e-d20-cinematic-roll {
    0% {
        opacity: 0;
        transform:
            translate3d(-22vw, 15vh, 0)
            rotateZ(-720deg)
            scale(.34);
        filter:
            blur(2px)
            drop-shadow(0 12px 14px rgba(0,0,0,.30))
            drop-shadow(0 0 8px rgba(226,151,55,.10));
    }
    22% {
        opacity: 1;
        transform:
            translate3d(-10vw, 2vh, 0)
            rotateZ(-470deg)
            scale(.72);
    }
    58% {
        transform:
            translate3d(5vw, -4vh, 0)
            rotateZ(-205deg)
            scale(1.10);
    }
    82% {
        transform:
            translate3d(-1.5vw, 2vh, 0)
            rotateZ(-72deg)
            scale(.97);
    }
    100% {
        opacity: 1;
        transform:
            translate3d(0, 1.2vh, 0)
            rotateZ(0deg)
            scale(1);
        filter:
            blur(0)
            drop-shadow(0 30px 28px rgba(0,0,0,.48))
            drop-shadow(0 0 22px rgba(226,151,55,.22));
    }
}

@keyframes pf2e-d20-cinematic-settle {
    0% {
        transform:
            translate3d(0, 1.2vh, 0)
            rotateZ(0deg)
            scale(1);
    }
    35% {
        transform:
            translate3d(0, 4.2vh, 0)
            rotateZ(5deg)
            scale(.91);
    }
    62% {
        transform:
            translate3d(0, -1.4vh, 0)
            rotateZ(-3deg)
            scale(1.055);
    }
    82% {
        transform:
            translate3d(0, .35vh, 0)
            rotateZ(1deg)
            scale(.99);
    }
    100% {
        transform:
            translate3d(0, 0, 0)
            rotateZ(0deg)
            scale(1);
    }
}

/* After reveal, lock the sprite into its exact source orientation and proportions. */
.dice-cinematic-overlay.is-reveal .dice-cinematic-die {
    transform: translate3d(0,0,0) rotateZ(0deg) scale(1) !important;
    width: clamp(150px, 24vw, 245px) !important;
    aspect-ratio: 1 / 1 !important;
}

.dice-cinematic-overlay.is-reveal .dice-cinematic-die img {
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
}

/* Tablet / phone preserve source geometry as well. */
@media (max-width: 1180px) {
    .dice-cinematic-die,
    .dice-cinematic-overlay.is-reveal .dice-cinematic-die {
        width: clamp(145px, 28vw, 215px) !important;
        height: auto !important;
    }
}

@media (max-width: 760px) {
    .dice-cinematic-die,
    .dice-cinematic-overlay.is-reveal .dice-cinematic-die {
        width: clamp(138px, 44vw, 190px) !important;
        height: auto !important;
    }
}


/* =========================================================
   Stage 10.12.3 — heavier D20 throw / bounce physics
   Still a flat sprite: only translate + rotateZ + uniform scale.
   No rotateX/rotateY, no mirroring, no anisotropic deformation.
   ========================================================= */

.dice-cinematic-ground-shadow {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 67%;
    width: clamp(92px, 16vw, 165px);
    height: clamp(16px, 2.8vw, 26px);
    border-radius: 50%;
    background: rgba(0,0,0,.58);
    filter: blur(9px);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.46);
    will-change: transform, opacity, filter;
}

.dice-cinematic-overlay.is-running .dice-cinematic-ground-shadow {
    animation: pf2e-d20-ground-shadow-roll .98s linear both;
}

.dice-cinematic-overlay.is-reveal .dice-cinematic-ground-shadow {
    opacity: .48;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(8px);
}

@keyframes pf2e-d20-ground-shadow-roll {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.35);
        filter: blur(14px);
    }
    35% {
        opacity: .15;
        transform: translate(-50%, -50%) scale(.48);
        filter: blur(13px);
    }
    68% {
        opacity: .30;
        transform: translate(-50%, -50%) scale(.72);
        filter: blur(11px);
    }
    88% {
        opacity: .48;
        transform: translate(-50%, -50%) scale(.94);
        filter: blur(8px);
    }
    100% {
        opacity: .60;
        transform: translate(-50%, -50%) scale(1.06);
        filter: blur(7px);
    }
}

/* Main throw: a clear ballistic arc ending in a hard first landing.
   It always finishes upright. */
@keyframes pf2e-d20-cinematic-roll {
    0% {
        opacity: 0;
        transform:
            translate3d(-19vw, -23vh, 0)
            rotateZ(-900deg)
            scale(.38);
        filter:
            blur(2px)
            drop-shadow(0 10px 12px rgba(0,0,0,.22))
            drop-shadow(0 0 8px rgba(226,151,55,.08));
    }
    14% {
        opacity: 1;
        transform:
            translate3d(-14vw, -15vh, 0)
            rotateZ(-720deg)
            scale(.58);
    }
    38% {
        transform:
            translate3d(-6vw, -18vh, 0)
            rotateZ(-500deg)
            scale(.79);
        filter:
            blur(.8px)
            drop-shadow(0 20px 18px rgba(0,0,0,.28))
            drop-shadow(0 0 13px rgba(226,151,55,.13));
    }
    64% {
        transform:
            translate3d(3vw, -8vh, 0)
            rotateZ(-285deg)
            scale(.96);
    }
    84% {
        transform:
            translate3d(1.2vw, 1.5vh, 0)
            rotateZ(-105deg)
            scale(1.035);
        filter:
            blur(0)
            drop-shadow(0 26px 24px rgba(0,0,0,.38))
            drop-shadow(0 0 19px rgba(226,151,55,.20));
    }
    96% {
        transform:
            translate3d(.2vw, 4.8vh, 0)
            rotateZ(-18deg)
            scale(.985);
    }
    100% {
        opacity: 1;
        transform:
            translate3d(0, 4.6vh, 0)
            rotateZ(0deg)
            scale(.965);
        filter:
            blur(0)
            drop-shadow(0 16px 16px rgba(0,0,0,.44))
            drop-shadow(0 0 24px rgba(226,151,55,.25));
    }
}

/* Two diminishing bounces. No squash/stretch, so the sprite stays correct. */
@keyframes pf2e-d20-cinematic-settle {
    0% {
        transform:
            translate3d(0, 4.6vh, 0)
            rotateZ(0deg)
            scale(.965);
    }
    20% {
        transform:
            translate3d(-.8vw, -4.4vh, 0)
            rotateZ(24deg)
            scale(1);
    }
    43% {
        transform:
            translate3d(.45vw, 2.7vh, 0)
            rotateZ(-9deg)
            scale(.985);
    }
    61% {
        transform:
            translate3d(-.28vw, -1.55vh, 0)
            rotateZ(4deg)
            scale(.998);
    }
    78% {
        transform:
            translate3d(.12vw, .75vh, 0)
            rotateZ(-1.5deg)
            scale(.994);
    }
    90% {
        transform:
            translate3d(-.04vw, -.28vh, 0)
            rotateZ(.5deg)
            scale(.999);
    }
    100% {
        transform:
            translate3d(0, 0, 0)
            rotateZ(0deg)
            scale(1);
    }
}

/* A denser impact ring makes the first landing feel heavier. */
.dice-cinematic-impact {
    top: 67% !important;
    width: clamp(105px, 18vw, 185px) !important;
    height: 20px !important;
}

.dice-cinematic-impact.is-hit {
    animation: pf2e-d20-impact-heavy .58s cubic-bezier(.08,.68,.15,1) both !important;
}

@keyframes pf2e-d20-impact-heavy {
    0% {
        opacity: .98;
        transform: scale(.22);
        border-color: rgba(248,197,111,.92);
        box-shadow:
            0 0 12px rgba(241,174,77,.58),
            0 0 36px rgba(213,116,32,.20);
    }
    38% {
        opacity: .72;
        transform: scale(1.05);
        border-color: rgba(242,179,88,.55);
        box-shadow:
            0 0 22px rgba(235,159,67,.38),
            0 0 52px rgba(213,116,32,.13);
    }
    100% {
        opacity: 0;
        transform: scale(2.35);
        border-color: rgba(244,190,104,0);
        box-shadow: 0 0 46px rgba(230,154,61,0);
    }
}

/* During settling, shadow briefly follows the bounce amplitude. */
.dice-cinematic-die.is-settling ~ .dice-cinematic-ground-shadow {
    animation: pf2e-d20-ground-shadow-bounce .54s ease-out both;
}

@keyframes pf2e-d20-ground-shadow-bounce {
    0%   { opacity:.60; transform:translate(-50%,-50%) scale(1.06); filter:blur(7px); }
    20%  { opacity:.22; transform:translate(-50%,-50%) scale(.58); filter:blur(12px); }
    43%  { opacity:.53; transform:translate(-50%,-50%) scale(.92); filter:blur(8px); }
    61%  { opacity:.34; transform:translate(-50%,-50%) scale(.74); filter:blur(10px); }
    78%  { opacity:.47; transform:translate(-50%,-50%) scale(.88); filter:blur(8px); }
    100% { opacity:.48; transform:translate(-50%,-50%) scale(1); filter:blur(8px); }
}

/* Final lock: exact source geometry/orientation, inherited from 10.12.2. */
.dice-cinematic-overlay.is-reveal .dice-cinematic-die {
    transform: translate3d(0,0,0) rotateZ(0deg) scale(1) !important;
}


/* =========================================================
   Stage 10.12.4 — iOS/iPad white-frame artifact fix
   Safari can briefly rasterize a transformed transparent <img> as a white
   rectangular layer while the compositor promotes it during animation.
   Render the D20 as a CSS background on the animated element instead.
   ========================================================= */

.dice-cinematic-die {
    background-image: url('/static/icons/d20-gold.png?v=10.12.5') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    background-color: transparent !important;

    /* Keep the layer stable in Safari/iPadOS during transform animation. */
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform-style: flat !important;
    transform-style: flat !important;
    -webkit-perspective: 0 !important;
    perspective: 0 !important;
    contain: layout paint style !important;
    isolation: isolate !important;
    will-change: transform, opacity, filter !important;
}

/* There should be no raster <img> inside the animated die anymore.
   Hide it defensively in case an old cached template survives for one load. */
.dice-cinematic-die > img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Prevent any UA/native background flash on the cinematic layers. */
.dice-cinematic-overlay,
.dice-cinematic-stage,
.dice-cinematic-die,
.dice-cinematic-aura,
.dice-cinematic-impact,
.dice-cinematic-ground-shadow {
    -webkit-tap-highlight-color: transparent !important;
}

@media (max-width: 1180px) {
    .dice-cinematic-die {
        /* Force compositor to keep transparency without creating a white backing box. */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .dice-cinematic-die.is-rolling,
    .dice-cinematic-die.is-settling {
        background-color: transparent !important;
    }
}


/* =========================================================
   Stage 10.13.0 — true 3D D20 prototype
   Canvas-rendered icosahedron with real 3D vertex rotation,
   face depth sorting, lighting and numbered faces.
   Active ONLY for Perception while being validated.
   ========================================================= */

.dice-cinematic-3d[hidden] {
    display: none !important;
}

.dice-cinematic-3d {
    position: relative;
    z-index: 3;
    width: clamp(190px, 31vw, 315px);
    height: clamp(190px, 31vw, 315px);
    display: block;
    background: transparent !important;
    pointer-events: none;
    filter:
        drop-shadow(0 28px 24px rgba(0,0,0,.46))
        drop-shadow(0 0 18px rgba(226,151,55,.18));
}

.dice-cinematic-overlay.use-3d .dice-cinematic-die {
    display: none !important;
}

.dice-cinematic-overlay.use-3d.is-reveal .dice-cinematic-3d {
    filter:
        drop-shadow(0 30px 26px rgba(0,0,0,.50))
        drop-shadow(0 0 28px rgba(226,151,55,.30));
}

.dice-cinematic-overlay.use-3d.is-critical.is-reveal .dice-cinematic-3d {
    animation: pf2e-3d-critical-pulse .52s ease-out 1;
}

@keyframes pf2e-3d-critical-pulse {
    0% { filter: drop-shadow(0 0 12px rgba(255,192,78,.18)); }
    45% {
        filter:
            brightness(1.22)
            drop-shadow(0 0 38px rgba(255,196,82,.78))
            drop-shadow(0 0 82px rgba(215,124,30,.42));
    }
    100% {
        filter:
            drop-shadow(0 30px 26px rgba(0,0,0,.50))
            drop-shadow(0 0 28px rgba(226,151,55,.30));
    }
}

@media (max-width: 1180px) {
    .dice-cinematic-3d {
        width: clamp(175px, 36vw, 275px);
        height: clamp(175px, 36vw, 275px);
    }
}

@media (max-width: 760px) {
    .dice-cinematic-3d {
        width: clamp(165px, 52vw, 235px);
        height: clamp(165px, 52vw, 235px);
    }
}


/* =========================================================
   Stage 10.13.2 — 3D D20 visual polish
   ========================================================= */
.dice-cinematic-3d {
    width: clamp(220px, 34vw, 350px) !important;
    height: clamp(220px, 34vw, 350px) !important;
}

@media (max-width: 1180px) {
    .dice-cinematic-3d {
        width: clamp(205px, 40vw, 310px) !important;
        height: clamp(205px, 40vw, 310px) !important;
    }
}

@media (max-width: 760px) {
    .dice-cinematic-3d {
        width: clamp(190px, 58vw, 270px) !important;
        height: clamp(190px, 58vw, 270px) !important;
    }
}


/* =========================================================
   Stage 10.13.7 — realistic D20 material pass
   ========================================================= */
.dice-cinematic-3d {
    width: clamp(235px, 36vw, 370px) !important;
    height: clamp(235px, 36vw, 370px) !important;
    filter:
        drop-shadow(0 30px 28px rgba(0,0,0,.54))
        drop-shadow(0 0 14px rgba(226,151,55,.14)) !important;
}

.dice-cinematic-overlay.use-3d.is-reveal .dice-cinematic-3d {
    filter:
        drop-shadow(0 32px 30px rgba(0,0,0,.58))
        drop-shadow(0 0 20px rgba(226,151,55,.20)) !important;
}

@media (max-width: 1180px) {
    .dice-cinematic-3d {
        width: clamp(215px, 42vw, 325px) !important;
        height: clamp(215px, 42vw, 325px) !important;
    }
}

@media (max-width: 760px) {
    .dice-cinematic-3d {
        width: clamp(200px, 61vw, 285px) !important;
        height: clamp(200px, 61vw, 285px) !important;
    }
}


/* =========================================================
   Stage 10.13.8 — fuller sprite-like geometry + physical bevels
   ========================================================= */
.dice-cinematic-3d {
    width: clamp(245px, 37vw, 385px) !important;
    height: clamp(245px, 37vw, 385px) !important;
    filter:
        drop-shadow(0 34px 30px rgba(0,0,0,.60))
        drop-shadow(0 0 11px rgba(226,151,55,.10)) !important;
}

.dice-cinematic-overlay.use-3d.is-reveal .dice-cinematic-3d {
    filter:
        drop-shadow(0 36px 32px rgba(0,0,0,.64))
        drop-shadow(0 0 15px rgba(226,151,55,.16)) !important;
}

@media (max-width: 1180px) {
    .dice-cinematic-3d {
        width: clamp(225px, 43vw, 340px) !important;
        height: clamp(225px, 43vw, 340px) !important;
    }
}

@media (max-width: 760px) {
    .dice-cinematic-3d {
        width: clamp(210px, 63vw, 300px) !important;
        height: clamp(210px, 63vw, 300px) !important;
    }
}


/* =========================================================
   Stage 10.13.9 — ultra-detail texture + impact shards
   ========================================================= */
.dice-cinematic-overlay.use-3d.is-reveal .dice-cinematic-3d {
    filter:
        contrast(1.035)
        saturate(1.035)
        drop-shadow(0 36px 32px rgba(0,0,0,.66))
        drop-shadow(0 0 17px rgba(226,151,55,.17)) !important;
}


/* =========================================================
   Stage 10.13.10 — rounded polished edges + hovering shards
   ========================================================= */
.dice-cinematic-overlay.use-3d.is-reveal .dice-cinematic-3d {
    filter:
        contrast(1.045)
        saturate(1.055)
        drop-shadow(0 37px 33px rgba(0,0,0,.67))
        drop-shadow(0 0 18px rgba(226,151,55,.18)) !important;
}


/* =========================================================
   Stage 10.13.12 — softer rolled D20 geometry
   ========================================================= */
.dice-cinematic-overlay.use-3d.is-reveal .dice-cinematic-3d {
    filter:
        contrast(1.025)
        saturate(1.045)
        drop-shadow(0 37px 33px rgba(0,0,0,.66))
        drop-shadow(0 0 16px rgba(226,151,55,.16)) !important;
}

/* Stage 10.13.13 — smoother physical D20 shell */
.dice-cinematic-overlay.use-3d .dice-cinematic-3d{image-rendering:auto!important}
.dice-cinematic-overlay.use-3d.is-reveal .dice-cinematic-3d{
 filter:contrast(1.005) saturate(1.055)
 drop-shadow(0 38px 34px rgba(0,0,0,.65))
 drop-shadow(0 0 18px rgba(224,149,52,.18))!important;
}

/* =========================================================
   Stage 10.13.18 — mobile UI fixes
   - portrait is the only mobile edit/upload trigger
   - roll history FAB no longer overlaps bottom navigation
   - character info + modifiers use the full mobile content width
   ========================================================= */
@media (max-width: 760px) {
    /* The portrait itself remains a <label for="portrait-file-mobile">,
       so tapping anywhere on it opens the existing crop/upload flow. */
    .mobile-avatar-edit-badge {
        display: none !important;
    }

    .mobile-hud-avatar-button {
        overflow: hidden !important;
    }

    /* Keep roll history clearly detached from the fixed bottom tabs.
       Extra clearance also accounts for iPhone safe-area insets. */
    .mobile-roll-fab,
    .foundry-character-page .mobile-roll-fab {
        right: 12px !important;
        bottom: calc(92px + env(safe-area-inset-bottom)) !important;
        z-index: 1080 !important;
        max-width: 116px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 5px 10px 5px 6px !important;
        box-shadow: 0 10px 28px rgba(0,0,0,.48) !important;
    }

    /* The opened history drawer follows the same safe clearance. */
    .roll-history-rail,
    .roll-history-rail.mobile-history-open {
        bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }

    /* Some older responsive rules leave the lower character panels with
       desktop-ish intrinsic sizing. Force the character tab to own the full
       available viewport width instead of shrink-wrapping its contents. */
    .foundry-main-column-v2,
    .foundry-tab-stage,
    .foundry-tab-pane,
    [data-sheet-pane="character"],
    [data-sheet-pane="character"] > .foundry-main-panel,
    .character-details-panel,
    .foundry-abilities-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    [data-sheet-pane="character"] {
        display: block !important;
    }

    .character-details-grid,
    .character-benefit-strip,
    .foundry-ability-strip {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .character-details-panel,
    .foundry-abilities-panel {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* =========================================================
   Stage 10.13.19 — mobile width + roll FAB placement hotfix
   - phone sheet must not inherit the compact desktop 2-column grid
   - roll history button sits above the persistent combat-turn bar
   ========================================================= */
@media (max-width: 760px) {
    /* Stage 10.11.9.x compact-history rules are declared later than the
       original mobile foundation and can restore a two-column sheet grid.
       On a phone that leaves a phantom desktop column and makes the
       character/details + abilities panels look artificially narrow. */
    .foundry-character-page {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }

    .foundry-sheet-shell,
    .foundry-sheet-shell.foundry-sheet-v2 {
        display: block !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .mobile-character-hud,
    .foundry-main-column,
    .foundry-main-column-v2,
    .foundry-tab-stage,
    .foundry-tab-pane,
    [data-sheet-pane="character"],
    [data-sheet-pane="character"] > .foundry-main-panel,
    .character-details-panel,
    .foundry-abilities-panel {
        grid-area: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    [data-sheet-pane="character"] {
        display: block !important;
    }

    .character-details-grid,
    .character-benefit-strip,
    .foundry-ability-strip {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Persistent combat bar occupies roughly 66px above the 78px bottom
       navigation offset. Keep a real visual gap above it instead of laying
       the roll-history FAB on top of the action pips. */
    .mobile-roll-fab,
    .foundry-character-page .mobile-roll-fab {
        right: 12px !important;
        bottom: calc(158px + env(safe-area-inset-bottom)) !important;
        z-index: 1080 !important;
    }
}

/* =========================================================
   Stage 10.13.20 — phone-only Character tab ownership
   - combat essentials are shown only on the Character tab
   - hidden tab panes remain truly hidden on phones
   - tablet and desktop layouts are intentionally untouched
   ========================================================= */
@media (max-width: 760px) {
    /* Stage 10.13.19 forced the Character pane to display:block in order to
       repair its width. That must never override the pane's hidden state. */
    .foundry-tab-pane[hidden],
    [data-sheet-pane="character"][hidden] {
        display: none !important;
    }

    [data-sheet-pane="character"]:not([hidden]) {
        display: block !important;
    }

    /* State / effects / perception / saves / movement / resistances are part
       of the mobile Character tab, even though their HUD lives before the
       actual tab stage in the DOM. */
    .mobile-character-essentials {
        display: none !important;
    }

    .foundry-character-page.mobile-character-tab-active .mobile-character-essentials {
        display: grid !important;
    }
}