/* Live Interactive Player Sheet - paper character-sheet styling
 * Matches the wiki's classic read-only sheet look (Georgia serif on white paper,
 * saddle-brown/burgundy rules, dark modifier pills, uppercase section headers).
 */

.live-sheet-root {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11px;
    color: #333;
    line-height: 1.35;
    max-width: 100%;
}

/* ---- Header / meta ---- */
.live-sheet-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin-bottom: 4px;
}
.live-sheet-title {
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8B4513;
    margin: 0;
}
.live-sheet-save-state {
    margin-left: auto;
    font-size: 10px;
    color: #2e5d4c;
    font-weight: bold;
}
.live-sheet-save-state.error { color: #8B2332; }

.live-sheet-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ls-chip {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 1px 6px;
    border: 1px solid #8B4513;
    border-radius: 3px;
    color: #8B4513;
    background: #fff;
    font-weight: bold;
}
.ls-chip-ac { background: #8B4513; color: #fff; border-color: #8B4513; }
.ls-chip-hp { background: #2e5d4c; color: #fff; border-color: #2e5d4c; }
.ls-chip-prof { background: #8B4513; color: #fff; border-color: #8B4513; }
.ls-chip-level { background: #8B4513; color: #fff; border-color: #8B4513; }

.live-sheet-loading { padding: 12px; font-style: italic; color: #666; }

/* ---- Section cards ---- */
.ls-section {
    margin-bottom: 8px;
    border: 1px solid #c9b48a;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.ls-section-head { margin: 0; }
.ls-collapse {
    width: 100%;
    padding: 4px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8B4513;
    border-bottom: 2px solid #8B4513;
}
.ls-caret { display: inline-block; margin-right: 4px; color: #8B4513; }
.ls-section-body { display: none; padding: 8px 10px; }
.ls-section-body.open { display: block; }

.ls-subhead {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8B4513;
    border-bottom: 1px solid #8B4513;
    margin: 10px 0 5px;
    padding-bottom: 2px;
}
.ls-hint { font-size: 9px; color: #666; font-style: italic; margin-top: 3px; }

/* ---- Ability scores ---- */
.ls-ability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}
.ls-ability {
    text-align: center;
    border: 2px solid #8B4513;
    border-radius: 5px;
    padding: 5px 4px;
    background: #fafafa;
}
.ls-ability-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
    color: #8B4513;
    margin-bottom: 2px;
}
.ls-ability-score { font-size: 15px; font-weight: bold; line-height: 1.1; }
.ls-ability-input {
    width: 3.2rem;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    border: none;
    border-bottom: 1px solid #999;
    background: transparent;
    color: #333;
    font-family: Georgia, serif;
}
.ls-ability-mod {
    display: inline-block;
    font-size: 10px;
    background: #8B4513;
    color: #fff;
    border-radius: 3px;
    padding: 1px 6px;
    margin-top: 2px;
    min-width: 22px;
}
.ls-static { font-weight: bold; }

/* ---- Combat stats ---- */
.ls-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}
.ls-stat {
    text-align: center;
    border: 1px solid #8B4513;
    border-radius: 4px;
    padding: 6px 4px;
    background: #fafafa;
}
.ls-stat-value { font-size: 16px; font-weight: bold; color: #333; }
.ls-stat-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8B4513;
    font-weight: bold;
}
.ls-casting { font-size: 10px; margin-top: 4px; color: #333; }
.ls-casting strong { color: #8B4513; }

/* ---- HP ---- */
.ls-hp-bar {
    height: 10px;
    background: #e6ddd0;
    border: 1px solid #c9b48a;
    border-radius: 3px;
    overflow: hidden;
}
.ls-hp-fill { height: 100%; background: #2e5d4c; }
.ls-hp-fill.warn { background: #c8961e; }
.ls-hp-fill.danger { background: #8B2332; }
.ls-hp-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.ls-hp-value { font-size: 16px; font-weight: bold; color: #333; }
.ls-hp-controls { display: flex; align-items: center; gap: 4px; }
.ls-hp-input {
    width: 3.4rem;
    text-align: center;
    font-size: 13px;
    border: 1px solid #c9b48a;
    border-radius: 3px;
    background: #fff;
    font-weight: bold;
    padding: 1px;
}
.ls-hp-temp { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 10px; color: #555; }
.ls-hp-temp-input { width: 2.6rem; text-align: center; border: 1px solid #c9b48a; border-radius: 3px; }

/* ---- Hit dice ---- */
.ls-hd-list { display: flex; flex-direction: column; gap: 4px; }
.ls-hd {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid #c9b48a; border-radius: 3px;
    padding: 3px 6px; background: #fafafa;
}
.ls-hd-label { font-weight: bold; color: #8B4513; }
.ls-hd-count { color: #333; font-weight: bold; }

/* ---- Resources ---- */
.ls-res-list { display: flex; flex-direction: column; gap: 5px; }
.ls-resource { border: 1px solid #c9b48a; border-radius: 3px; padding: 5px 6px; background: #fafafa; }
.ls-res-info { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ls-res-label { font-weight: bold; color: #333; }
.ls-res-name {
    width: 8rem; font-size: 10px; padding: 1px 3px;
    border: 1px solid #c9b48a; border-radius: 3px; background: #fff; font-weight: bold;
}
.ls-res-count { color: #555; font-weight: bold; }
.ls-res-bar { height: 8px; background: #e6ddd0; border-radius: 3px; overflow: hidden; margin: 3px 0; }
.ls-res-fill { height: 100%; background: #8B4513; }
.ls-res-controls { display: flex; align-items: center; gap: 4px; }
.ls-res-input { width: 2.6rem; text-align: center; border: 1px solid #c9b48a; border-radius: 3px; }
.ls-res-maxwrap { display: flex; align-items: center; gap: 2px; font-size: 9px; color: #555; }
.ls-res-max-input { width: 2.2rem; text-align: center; border: 1px solid #c9b48a; border-radius: 3px; }
.ls-res-refresh {
    font-size: 8px; text-transform: uppercase; color: #8B4513;
    border: 1px solid #c9b48a; border-radius: 3px; padding: 0 3px; margin-left: 4px; opacity: 0.85;
}

/* ---- Buttons / inputs ---- */
.ls-btn {
    font-family: Georgia, serif; font-size: 9px; font-weight: bold;
    background: #8B4513; color: #fff; border: 1px solid #8B4513;
    border-radius: 3px; padding: 2px 8px; cursor: pointer;
}
.ls-btn:hover { background: #6d3510; }
.ls-btn.small { padding: 1px 6px; font-size: 8px; }
.ls-btn.active { background: #B8860B; border-color: #B8860B; }
.ls-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ls-btn.ls-remove-res { background: #8B2332; border-color: #8B2332; }
.ls-step {
    font-family: Georgia, serif; font-size: 10px; font-weight: bold;
    min-width: 1.9rem; padding: 1px 2px; color: #8B4513;
    border: 1px solid #8B4513; border-radius: 3px; background: #fff; cursor: pointer;
}
.ls-step:hover { background: #f3ead9; }
.ls-num { border: 1px solid #c9b48a; border-radius: 3px; background: #fff; color: #333; }

/* ---- Saves & skills ---- */
.ls-check-list { }
.ls-check-row {
    display: flex; align-items: center; gap: 6px;
    padding: 2px 2px; border-bottom: 1px solid #e0d8c8;
}
.ls-check-prof { width: 12px; color: #2e5d4c; font-weight: bold; }
.ls-check-name { flex: 1; }
.ls-save-name { font-weight: bold; }
.ls-check-mod { font-weight: bold; color: #8B4513; min-width: 22px; text-align: right; }

/* ---- Dice log ---- */
.ls-dice-log { border: 1px solid #8B4513; border-radius: 3px; background: #2b211a; color: #ffdba6; max-height: 140px; overflow-y: auto; margin-top: 4px; }
.ls-roll-line { padding: 2px 5px; border-bottom: 1px solid #4a3a2f; font-size: 9px; }
.ls-roll-line:last-child { border-bottom: none; }
.ls-roll {
    font-family: Georgia, serif; font-size: 8px; font-weight: bold;
    background: #8B2332; color: #fff; border: none; border-radius: 3px;
    padding: 1px 5px; cursor: pointer;
}
.ls-roll:hover { filter: brightness(1.15); }

/* ---- Attacks ---- */
.ls-attack-list { display: flex; flex-direction: column; gap: 4px; }
.ls-attack {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border: 1px solid #c9b48a; border-radius: 3px; padding: 3px 6px; background: #fafafa;
}
.ls-attack-name { font-weight: bold; }

/* ---- Spell slots ---- */
.ls-slot-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.ls-slot-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ls-slot-label { min-width: 2.6rem; font-weight: bold; color: #555; }
.ls-slot-dots { display: flex; gap: 3px; }
.ls-slot-dot {
    width: 15px; height: 15px; border-radius: 50%;
    border: 1px solid #2e5d4c; background: #eff6f1; color: #2e5d4c;
    font-size: 9px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ls-slot-dot.spent { background: #aaa8a0; border-color: #7a7870; color: #555; }
.ls-slot-count { font-weight: bold; color: #555; }

/* ---- Spells ---- */
.ls-spell-group { margin-bottom: 6px; }
.ls-spell-level { font-weight: bold; color: #8B4513; margin-bottom: 2px; }
.ls-spell {
    display: flex; align-items: center; gap: 6px; padding: 2px 2px;
    border-bottom: 1px solid #e0d8c8; flex-wrap: wrap;
}
.ls-spell-name { flex: 1; font-weight: bold; }
.ls-spell-meta { font-size: 8px; color: #777; }
.ls-spell-actions { display: flex; align-items: center; gap: 4px; }
.ls-cast-group { display: flex; align-items: center; gap: 3px; }
.ls-cast-count { font-weight: bold; color: #555; font-size: 9px; }

/* ---- Inventory ---- */
.ls-item-list { }
.ls-item { display: flex; align-items: center; gap: 6px; padding: 2px 2px; border-bottom: 1px solid #e0d8c8; }
.ls-item-name { flex: 1; }
.ls-item-qty { font-weight: bold; color: #555; }
.ls-badge-equipped { font-size: 7px; background: #2e5d4c; color: #fff; padding: 1px 4px; border-radius: 2px; }
.ls-currency-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.ls-currency { display: flex; align-items: center; justify-content: space-between; gap: 4px; border-bottom: 1px solid #e0d8c8; }
.ls-currency-code { font-size: 9px; color: #555; text-transform: capitalize; }
.ls-currency-input { width: 3rem; text-align: center; border: 1px solid #c9b48a; border-radius: 3px; }

/* ---- Features ---- */
.ls-feature-list { }
.ls-feature { padding: 2px 2px; border-bottom: 1px solid #e0d8c8; }
.ls-feature-name { display: inline-block; font-weight: 700; color: var(--dnd-text, inherit); margin-right: 0.5rem; }
.ls-feature-detail { color: inherit; opacity: 0.85; }

/* ---- Notes ---- */
.ls-notes {
    width: 100%; min-height: 90px;
    font-family: Georgia, serif; font-size: 11px; color: #333;
    border: 1px solid #c9b48a; border-radius: 3px; padding: 4px; resize: vertical;
}

/* ---- Rest bar ---- */
.ls-rest-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-bottom: 6px; padding: 4px 6px;
    border: 1px solid #8B4513; border-radius: 3px; background: #fafafa;
}
.ls-rest-bar .ls-btn[data-rest="long"] { background: #2b5a83; border-color: #2b5a83; }
.ls-rest-bar .ls-hint { margin-top: 0; }

/* ---- Larger screens: denser grids like a paper sheet ---- */
@media (min-width: 700px) {
    .ls-ability-grid { grid-template-columns: repeat(6, 1fr); }
    .ls-stat-grid { grid-template-columns: repeat(4, 1fr); }
    .ls-currency-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
   Phase 3 — Mobile-first tab architecture
   ============================================================ */
.ls-tabs-container { display: flex; flex-direction: column; }

/* Tab bar: thumb-reachable. Anchored to the bottom on phones, top on desktop. */
.ls-tabbar {
    display: flex;
    gap: 2px;
    position: sticky;
    bottom: 0;
    top: auto;
    z-index: 5;
    background: #8B4513;
    padding: 4px;
    border-radius: 4px;
    margin-bottom: 6px;
    order: 2;
}
.ls-tab {
    flex: 1;
    font-family: Georgia, serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #f5ead0;
    background: transparent;
    border: none;
    border-radius: 3px;
    padding: 12px 4px;      /* >=44px tall tap targets, one-hand friendly */
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ls-tab:hover { background: rgba(255, 255, 255, 0.10); }
.ls-tab.active { background: #ffd8a0; color: #5a2e0d; }

.ls-tabpanels {
    order: 1;
    display: block;
    overflow: hidden;
    min-height: 60vh;
}
.ls-tabpanel { display: none; }
.ls-tabpanel.active { display: block; }

/* Dark-mode toggle chip in the meta bar */
.ls-dark-toggle {
    margin-left: auto;
    border: 1px solid #8B4513;
    background: #fff;
    color: #8B4513;
    padding: 6px 10px;
}

/* Upcast / refund (uncast) button */
.ls-btn.alt {
    background: #b8860b;
    border-color: #b8860b;
}
.ls-btn.small:disabled { opacity: 0.45; cursor: not-allowed; }

/* Desktop: tabs become a top rail so multiple sections read like a paper sheet */
@media (min-width: 900px) {
    .ls-tabbar {
        position: static;
        order: 1;
        margin-bottom: 8px;
    }
    .ls-tabpanels { order: 2; }
}

/* ============================================================
   Dark mode (CSS variables)
   ============================================================ */
.live-sheet-root {
    --ls-bg: #fff;
    --ls-ink: #333;
    --ls-border: #c9b48a;
    --ls-card: #fff;
    --ls-soft: #fafafa;
    --ls-rule: #8B4513;
    --ls-accent: #2e5d4c;
    --ls-muted: #666;
}
.live-sheet-root.ls-dark {
    --ls-bg: #1c1a17;
    --ls-ink: #e8e0d0;
    --ls-border: #5a4631;
    --ls-card: #241f1a;
    --ls-soft: #2a241e;
    --ls-rule: #d9a05b;
    --ls-accent: #6fae94;
    --ls-muted: #b3a68f;
    color: var(--ls-ink);
}
.live-sheet-root.ls-dark .ls-section,
.live-sheet-root.ls-dark .ls-rest-bar { background: var(--ls-card); border-color: var(--ls-border); }
.live-sheet-root.ls-dark .ls-section-body,
.live-sheet-root.ls-dark .ls-ability,
.live-sheet-root.ls-dark .ls-resource,
.live-sheet-root.ls-dark .ls-attack { background: var(--ls-soft); color: var(--ls-ink); }
.live-sheet-root.ls-dark .ls-collapse,
.live-sheet-root.ls-dark .ls-subhead { color: var(--ls-rule); border-color: var(--ls-rule); }
.live-sheet-root.ls-dark .ls-spell,
.live-sheet-root.ls-dark .ls-item,
.live-sheet-root.ls-dark .ls-currency { border-color: var(--ls-border); }
.live-sheet-root.ls-dark .ls-ability-label { color: var(--ls-rule); }
.live-sheet-root.ls-dark .ls-chip { color: var(--ls-rule); border-color: var(--ls-rule); background: var(--ls-card); }
.live-sheet-root.ls-dark .ls-slot-dot { border-color: var(--ls-accent); background: #20302a; color: var(--ls-accent); }
.live-sheet-root.ls-dark input,
.live-sheet-root.ls-dark textarea,
.live-sheet-root.ls-dark select {
    background: var(--ls-soft); color: var(--ls-ink);
    border-color: var(--ls-border);
}
.live-sheet-root.ls-dark .live-sheet-title { color: var(--ls-rule); }
.live-sheet-root.ls-dark .ls-dark-toggle { background: var(--ls-card); color: var(--ls-rule); border-color: var(--ls-rule); }

/* ============================================================
   Roll-result announcement modal (bottom of screen)
   ============================================================ */
.ls-roll-announce {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    pointer-events: none;         /* so the sheet stays usable; the card re-enables */
    display: flex;
    justify-content: flex-end;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.22s ease-out, opacity 0.22s ease-out;
}
.ls-roll-announce.showing {
    transform: translateY(0);
    opacity: 1;
}
.ls-roll-announce-card {
    pointer-events: auto;
    cursor: pointer;
    text-align: right;
    max-width: 86vw;
    padding: 14px 16px;
    border-radius: 14px;
    background: #2e2417;            /* rich parchment-ink */
    color: #f5ead0;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    border: 1px solid #d9a05b;
    font-family: Georgia, 'Times New Roman', serif;
}
.ls-roll-announce-label {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #d9a05b;
    margin-bottom: 4px;
}
.ls-roll-announce-result {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: 0.5px;
}
/* Light/dark friendly */
.live-sheet-root.ls-dark ~ .ls-roll-announce .ls-roll-announce-card {
    background: #e8dcc9;
    color: #2a241e;
    border-color: #8B4513;
}
.live-sheet-root.ls-dark ~ .ls-roll-announce .ls-roll-announce-label { color: #8B4513; }

/* ============================================================
   Mobile readability pass — larger type + tap targets on phones.
   (Desktop keeps the denser paper-sheet look above.)
   ============================================================ */
@media (max-width: 760px) {
    .live-sheet-root { font-size: 16px; }

    /* Section bodies need a little more air at the larger type size */
    .ls-section-body { padding: 10px 12px; }

    /* Tab bar: readable labels, thumb-friendly height */
    .ls-tabbar { padding: 6px; gap: 4px; border-radius: 6px; }
    .ls-tab { font-size: 13px; padding: 13px 4px; }

    /* Header / meta */
    .live-sheet-meta { gap: 8px 12px; }
    .live-sheet-title { font-size: 24px; }
    .live-sheet-save-state { font-size: 13px; }
    .ls-chip { font-size: 12px; padding: 4px 10px; border-radius: 5px; }

    /* Section heads & subheads */
    .ls-collapse { font-size: 17px; padding: 12px 12px; }
    .ls-subhead { font-size: 15px; margin: 14px 0 6px; }
    .ls-hint { font-size: 13px; margin-top: 5px; }

    /* Ability scores */
    .ls-ability { padding: 10px 6px; }
    .ls-ability-label { font-size: 12.5px; letter-spacing: 0.6px; margin-bottom: 3px; }
    .ls-ability-score { font-size: 22px; }
    .ls-ability-input { font-size: 22px; width: 4.2rem; }
    .ls-ability-mod { font-size: 13px; padding: 3px 10px; min-width: 30px; margin-top: 4px; border-radius: 6px; }

    /* Combat stats + casting */
    .ls-stat { padding: 10px 6px; }
    .ls-stat-value { font-size: 24px; }
    .ls-stat-label { font-size: 12px; }
    .ls-casting { font-size: 14px; margin-top: 6px; }

    /* HP */
    .ls-hp-bar { height: 16px; border-radius: 5px; }
    .ls-hp-row { gap: 10px; margin-top: 8px; }
    .ls-hp-value { font-size: 24px; }
    .ls-hp-input { width: 4.4rem; font-size: 18px; padding: 6px 4px; }
    .ls-hp-temp { font-size: 14px; gap: 8px; }
    .ls-hp-temp-input { width: 3.4rem; font-size: 16px; padding: 6px 4px; }

    /* Hit dice */
    .ls-hd { padding: 8px 10px; gap: 10px; }
    .ls-hd-label { font-size: 15px; }
    .ls-hd-count { font-size: 15px; }

    /* Resources */
    .ls-resource { padding: 10px 10px; }
    .ls-res-name { width: auto; flex: 1; font-size: 15px; padding: 6px 8px; }
    .ls-res-count { font-size: 15px; }
    .ls-res-bar { height: 12px; margin: 5px 0; }
    .ls-res-input { width: 3.4rem; font-size: 16px; padding: 6px 4px; }
    .ls-res-maxwrap { font-size: 13px; }
    .ls-res-max-input { width: 3rem; font-size: 16px; padding: 6px 4px; }
    .ls-res-refresh { font-size: 11px; padding: 2px 6px; }

    /* Buttons / steppers — comfortable tap targets */
    .ls-btn { font-size: 13px; padding: 8px 12px; border-radius: 6px; }
    .ls-btn.small { font-size: 12px; padding: 7px 10px; }
    .ls-step { font-size: 15px; min-width: 46px; min-height: 46px; padding: 4px; border-radius: 6px; }

    /* Roll buttons */
    .ls-roll { font-size: 14px; padding: 6px 12px; border-radius: 6px; }

    /* Attacks */
    .ls-attack { padding: 8px 10px; }
    .ls-attack-name { font-size: 15px; }

    /* Spell slots */
    .ls-slot-label { font-size: 15px; min-width: auto; }
    .ls-slot-dot { width: 26px; height: 26px; font-size: 14px; }
    .ls-slot-count { font-size: 15px; }

    /* Spells */
    .ls-spell-group { margin-bottom: 10px; }
    .ls-spell-level { font-size: 16px; }
    .ls-spell { padding: 8px 4px; gap: 8px; }
    .ls-spell-name { font-size: 16px; }
    .ls-spell-meta { font-size: 13px; }
    .ls-cast-count { font-size: 13px; }

    /* Inventory */
    .ls-item { padding: 8px 4px; gap: 8px; }
    .ls-item-name { font-size: 15px; }
    .ls-item-qty { font-size: 14px; }
    .ls-badge-equipped { font-size: 10px; padding: 2px 6px; }
    .ls-currency-code { font-size: 14px; }
    .ls-currency-input { width: 4rem; font-size: 16px; padding: 6px 4px; }

    /* Features */
    .ls-feature { padding: 8px 4px; font-size: 15px; }

    /* Notes */
    .ls-notes { font-size: 16px; min-height: 120px; padding: 10px; }

    /* Rest bar */
    .ls-rest-bar { gap: 8px; padding: 8px 10px; }
    .ls-rest-bar .ls-hint { font-size: 13px; }

    /* Dice log lines in the Combat tab */
    .ls-roll-line { font-size: 14px; }
}

/* ============================================================
   D&D Beyond-style additions (Phases 6-10)
   ============================================================ */

/* Portrait / initials avatar in the sheet header */
.ls-portrait-box {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 50%; overflow: hidden;
    border: 2px solid #8B4513; background: #fafafa;
    flex: 0 0 56px;
    display: flex; align-items: center; justify-content: center;
    margin-right: 2px;
}
.ls-portrait-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-portrait-initials { font-size: 20px; font-weight: bold; color: #8B4513; letter-spacing: 1px; }
.ls-portrait-edit {
    position: absolute; right: 0; bottom: 0;
    background: #8B4513; color: #fff; border: 1px solid #8B4513;
    border-radius: 50%; width: 18px; height: 18px; line-height: 1;
    font-size: 11px; cursor: pointer; padding: 0; text-align: center;
}

/* Inspiration toggle */
.ls-insp-row { margin-bottom: 8px; }
.ls-inspiration { width: 100%; font-size: 12px; padding: 10px; background: #fff; color: #b8860b; border: 2px dashed #b8860b; border-radius: 6px; }
.ls-inspiration.active { background: #b8860b; color: #fff; border-style: solid; }
.ls-chip-inspiration { background: #b8860b; color: #fff; border-color: #b8860b; }

/* Ability boxes - larger tap targets + save value */
.ls-ability {
    border: 2px solid #8B4513; border-radius: 5px;
    background: #fafafa; cursor: pointer; font-family: Georgia, serif;
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 4px; gap: 2px; width: 100%;
}
.ls-ability:hover { background: #f3ead9; }
.ls-ability-save { font-size: 9px; color: #555; margin-top: 2px; }
.ls-ability-save strong { color: #8B4513; }

/* Ability popover (score edit + roll save) */
.ls-popover {
    position: fixed; z-index: 9999; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 88vw; max-width: 340px;
    background: #fff; color: #333; border: 2px solid #8B4513; border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    font-family: Georgia, serif; padding: 0; overflow: hidden;
}
.ls-popover-head {
    display: flex; justify-content: space-between; align-items: center;
    background: #8B4513; color: #fff; padding: 10px 12px; font-size: 14px;
}
.ls-popover-close { background: transparent; border: none; color: #fff; font-size: 16px; cursor: pointer; }
.ls-popover-body { padding: 14px 16px; }
.ls-popover-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: bold; margin-bottom: 10px; }
.ls-popover-field .ls-abil-edit { width: 4.6rem; font-size: 18px; text-align: center; padding: 6px; font-family: Georgia, serif; border: 1px solid #c9b48a; border-radius: 4px; }
.ls-popover-mod, .ls-popover-save { font-size: 13px; margin-bottom: 6px; }
.ls-popover-mod strong, .ls-popover-save strong { color: #8B4513; }
.ls-popover-footer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e0d8c8; }

/* Senses grid (Defenses + Senses) */
.ls-sense-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 4px; }
.ls-sense { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px; border: 1px solid #c9b48a; border-radius: 3px; background: #fafafa; }
.ls-sense-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; color: #555; font-weight: bold; }
.ls-sense-input { width: 6rem; text-align: left; padding: 2px 4px; font-size: 10px; border: 1px solid #c9b48a; border-radius: 3px; }
.ls-ac-input { width: 3.4rem; text-align: center; font-size: 16px; font-weight: bold; padding: 2px; border: 1px solid #c9b48a; border-radius: 3px; font-family: Georgia, serif; }
.ls-muted { color: #999; }

/* Death saves (inside HP block) */
.ls-death-saves { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ls-ds-label { font-size: 9px; font-weight: bold; text-transform: uppercase; color: #8B2332; }
.ls-ds-group { display: inline-flex; align-items: center; gap: 3px; }
.ls-ds-dot {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid #aaa; background: #fff; color: #8B2332;
    font-size: 12px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ls-ds-dot.success.filled { background: #2e5d4c; border-color: #2e5d4c; color: #fff; }
.ls-ds-dot.fail.filled { background: #8B2332; border-color: #8B2332; color: #fff; }
.ls-ds-minus, .ls-ds-plus {
    width: 24px; height: 24px; border-radius: 50%; border: 1px solid #8B4513;
    background: #fff; color: #8B4513; font-weight: bold; cursor: pointer; padding: 0; line-height: 1;
}

/* Condition chips */
.ls-cond-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ls-cond {
    font-size: 9px; text-transform: capitalize; padding: 3px 8px; border-radius: 12px;
    border: 1px solid #c9b48a; background: #fff; color: #555; cursor: pointer;
}
.ls-cond.active { background: #8B2332; border-color: #8B2332; color: #fff; }

/* Attacks - roll / damage / advantage toggle (Phase 7) */
.ls-attack { flex-wrap: wrap; }
.ls-attack-main { display: flex; align-items: baseline; gap: 8px; width: 100%; }
.ls-attack-name { font-weight: bold; flex: 1; }
.ls-attack-bonus { font-weight: bold; color: #8B4513; font-size: 14px; }
.ls-attack-controls { display: flex; align-items: center; gap: 6px; width: 100%; flex-wrap: wrap; justify-content: flex-end; }
.ls-attack-roll { background: #8B2332; }
.ls-dmg { background: #2b5a83; }
.ls-adv-group { display: inline-flex; align-items: center; gap: 3px; }
.ls-adv, .ls-dis { padding: 4px 7px; font-size: 11px; }
.ls-adv.active { background: #b8860b; border-color: #b8860b; color: #fff; }
.ls-dis.active { background: #4a3a2f; border-color: #4a3a2f; color: #fff; }

/* Spell search + counts + upcast select (Phase 8) */
.ls-spell-search { width: 100%; padding: 8px 10px; font-size: 13px; margin-bottom: 6px; border: 1px solid #8B4513; border-radius: 4px; font-family: Georgia, serif; }
.ls-spell-count { font-size: 9px; color: #777; font-weight: normal; }
.ls-upcast { font-size: 10px; padding: 2px; border: 1px solid #c9b48a; border-radius: 3px; font-family: Georgia, serif; max-width: 3.6rem; }

/* Proficiencies lists (Phase 6) */
.ls-prof-list { display: flex; flex-direction: column; gap: 6px; }
.ls-prof-field { display: flex; align-items: center; gap: 8px; }
.ls-prof-field label { flex: 0 0 88px; font-weight: bold; color: #8B4513; font-size: 10px; text-transform: uppercase; }
.ls-prof-input { flex: 1; padding: 5px 8px; font-size: 11px; font-family: Georgia, serif; border: 1px solid #c9b48a; border-radius: 3px; }

/* Inventory - encumbrance bar + item controls (Phase 9) */
.ls-encumbrance { margin-bottom: 6px; padding: 6px; border: 1px solid #c9b48a; border-radius: 4px; background: #fafafa; }
.ls-enc-label { font-size: 10px; color: #555; display: block; margin-bottom: 4px; }
.ls-enc-label strong { color: #8B4513; }
.ls-enc-bar { height: 8px; background: #e6ddd0; border-radius: 3px; overflow: hidden; }
.ls-enc-fill { height: 100%; background: #2e5d4c; }
.ls-enc-fill.warn { background: #c8961e; }
.ls-enc-fill.over { background: #8B2332; }
.ls-enc-status { font-size: 10px; font-weight: bold; color: #8B2332; display: block; margin-top: 3px; }
.ls-item { flex-wrap: wrap; }
.ls-item-line { font-size: 9px; color: #777; }
.ls-item-controls { display: inline-flex; align-items: center; gap: 4px; }
.ls-item-qty-input { width: 3rem; text-align: center; font-size: 12px; padding: 2px; border: 1px solid #c9b48a; border-radius: 3px; font-family: Georgia, serif; }

/* View toggle: Live vs Printable */
.live-sheet-view-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px;
    background: #fafafa;
    border: 1px solid #c9b48a;
    border-radius: 6px;
}
.ls-view-toggle-btn {
    flex: 1;
    padding: 10px 16px;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: bold;
    border: 2px solid #8B4513;
    border-radius: 4px;
    background: #fff;
    color: #8B4513;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ls-view-toggle-btn:hover {
    background: #f3ead9;
}
.ls-view-toggle-btn.active,
.ls-view-toggle-btn[aria-pressed="true"] {
    background: #8B4513;
    color: #fff;
    border-color: #8B4513;
}

/* Enhanced dice roll modal - full calculation breakdown */
.ls-roll-announce-card {
    pointer-events: auto;
    cursor: pointer;
    text-align: left;
    max-width: 90vw;
    min-width: 280px;
    padding: 16px 20px;
    border-radius: 14px;
    background: #2e2417;
    color: #f5ead0;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    border: 1px solid #d9a05b;
    font-family: Georgia, 'Times New Roman', serif;
}
.ls-roll-announce-label {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #d9a05b;
    margin-bottom: 8px;
}
.ls-roll-announce-expression {
    font-size: 12px;
    color: #b8a080;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}
.ls-roll-announce-breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}
.ls-roll-announce-dice {
    font-size: 13px;
    color: #e8dcc9;
}
.ls-roll-announce-dice .dice-value {
    display: inline-block;
    padding: 2px 6px;
    margin: 0 2px;
    background: #d9a05b;
    color: #2e2417;
    border-radius: 3px;
    font-weight: bold;
}
.ls-roll-announce-dice .dice-value.kept {
    background: #6fae94;
}
.ls-roll-announce-dice .dice-value.discarded {
    background: #8B2332;
    opacity: 0.6;
    text-decoration: line-through;
}
.ls-roll-announce-modifier {
    font-size: 13px;
    color: #e8dcc9;
}
.ls-roll-announce-calculation {
    font-size: 12px;
    color: #b8a080;
    font-style: italic;
}
.ls-roll-announce-result {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: 0.5px;
    color: #d9a05b;
    text-align: right;
    margin-top: 8px;
}
.ls-roll-announce-kind {
    font-size: 11px;
    color: #6fae94;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    text-align: right;
}

/* Dark-mode adjustments for the new components */
.live-sheet-root.ls-dark .ls-ability,
.live-sheet-root.ls-dark .ls-sense,
.live-sheet-root.ls-dark .ls-encumbrance { background: var(--ls-soft); border-color: var(--ls-border); color: var(--ls-ink); }
.live-sheet-root.ls-dark .ls-ability:hover { background: #33291f; }
.live-sheet-root.ls-dark .ls-ability-save strong,
.live-sheet-root.ls-dark .ls-sense-label,
.live-sheet-root.ls-dark .ls-enc-label strong { color: var(--ls-rule); }
.live-sheet-root.ls-dark .ls-popover { background: var(--ls-card); color: var(--ls-ink); border-color: var(--ls-rule); }
.live-sheet-root.ls-dark .ls-popover-head { background: var(--ls-rule); color: #2a241e; }
.live-sheet-root.ls-dark .ls-popover-head .ls-popover-close { color: #2a241e; }
.live-sheet-root.ls-dark .ls-popover-footer { border-color: var(--ls-border); }
.live-sheet-root.ls-dark .ls-cond { background: var(--ls-soft); color: var(--ls-muted); border-color: var(--ls-border); }
.live-sheet-root.ls-dark .ls-chip-inspiration { background: #b8860b; color: #fff; border-color: #b8860b; }
.live-sheet-root.ls-dark .ls-ds-dot { background: var(--ls-soft); border-color: var(--ls-border); }
.live-sheet-root.ls-dark .ls-spell-count { color: var(--ls-muted); }
.live-sheet-root.ls-dark .ls-spell-search,
.live-sheet-root.ls-dark .ls-prof-input,
.live-sheet-root.ls-dark .ls-upcast { background: var(--ls-soft); color: var(--ls-ink); border-color: var(--ls-border); }
.live-sheet-root.ls-dark .ls-prof-field label { color: var(--ls-rule); }

/* Mobile scaling for the new components */
@media (max-width: 760px) {
    .live-sheet-root.ls-dark .ls-popover { width: 92vw; }
    .ls-portrait-box { width: 64px; height: 64px; flex-basis: 64px; }
    .ls-portrait-initials { font-size: 24px; }
    .ls-inspiration { font-size: 15px; padding: 13px; }
    .ls-ability { padding: 12px 6px; }
    .ls-ability-save { font-size: 12px; }
    .ls-sense-label { font-size: 12px; }
    .ls-sense-input { font-size: 12px; width: 8rem; }
    .ls-ds-dot { width: 28px; height: 28px; font-size: 14px; }
    .ls-ds-minus, .ls-ds-plus { width: 30px; height: 30px; }
    .ls-cond { font-size: 12px; padding: 6px 12px; }
    .ls-attack-bonus { font-size: 16px; }
    .ls-adv-group .ls-btn { font-size: 13px; padding: 8px 12px; }
    .ls-spell-count { font-size: 12px; }
    .ls-upcast { font-size: 13px; max-width: 4.4rem; }
    .ls-prof-field label { flex-basis: 108px; font-size: 13px; }
    .ls-prof-input { font-size: 15px; padding: 8px 10px; }
    .ls-enc-label { font-size: 13px; }
    .ls-item-line { font-size: 12px; }
    .ls-item-qty-input { width: 3.6rem; font-size: 15px; }
}

/* ============================================================
   Live sheet — post-2026-08-15 additions
   (readability palette, inventory editor, campaign settings, item value)
   ============================================================ */

/* Item value + edit/remove controls */
.ls-item-line .ls-item-value { color: var(--ls-rule, #8B4513); font-weight: bold; }
.ls-item-controls .ls-btn { padding: 2px 6px; }
#ls-add-item { margin: 6px 0 2px; }
.ls-item-editor {
    margin: 6px 0 10px; padding: 10px; border: 1px solid var(--ls-rule, #8B4513);
    border-radius: 6px; background: var(--ls-soft, #fafafa);
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
}
.ls-item-editor-head { grid-column: 1 / -1; font-weight: bold; color: var(--ls-rule, #8B4513); }
.ls-item-editor label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ls-ink, #333); }
.ls-item-editor .ls-num { flex: 1; padding: 5px; font-size: 12px; font-family: Georgia, serif; border: 1px solid var(--ls-border, #c9b48a); border-radius: 3px; }
.ls-item-editor-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.ls-item-editor-actions .ls-btn { font-size: 11px; padding: 6px 10px; }

/* Campaign settings popover */
.ls-settings-popover { max-width: 320px; }
.ls-settings-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* Header toggles spacing */
.ls-read-toggle, .ls-settings-toggle { margin-left: 6px; }

/* Readability palette (high contrast) — composes with dark mode */
.live-sheet-root.ls-readable {
    --ls-ink: #14201a; --ls-border: #4a2f12; --ls-rule: #5a3310;
    --ls-accent: #174d3a; --ls-muted: #32322e;
}
.live-sheet-root.ls-readable .ls-btn,
.live-sheet-root.ls-readable .ls-num,
.live-sheet-root.ls-readable .ls-static { font-size: 11px; }
.live-sheet-root.ls-readable .ls-item-name,
.live-sheet-root.ls-readable .ls-spell-name,
.live-sheet-root.ls-readable .ls-check-name,
.live-sheet-root.ls-readable .ls-feature-name { font-weight: 600; }
.live-sheet-root.ls-readable .live-sheet-title,
.live-sheet-root.ls-readable .ls-subhead { letter-spacing: 0.2px; }
.live-sheet-root.ls-readable.ls-dark {
    --ls-ink: #fff7e6; --ls-border: #f0d6a0; --ls-rule: #ffd98a;
    --ls-accent: #8fe0bf; --ls-muted: #e2d8c4;
}
.live-sheet-root.ls-readable.ls-dark .ls-btn,
.live-sheet-root.ls-readable.ls-dark .ls-num { border-color: var(--ls-rule); color: var(--ls-ink); }