/* RPG Actor - Character Sheet Styles */

/* Hide scrollbar but allow scrolling */
html {
    overflow-y: scroll;
    overflow-x: hidden; /* Prevent horizontal scroll */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
html::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Ensure body doesn't overflow */
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Header styles are in style.css - do not duplicate here */

.character-sheet {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    align-items: start;
    max-width: 100%;
    overflow-x: hidden;
    padding: 1.5rem 1rem;
    margin-top: 0.5rem;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .character-sheet {
        grid-template-columns: 1fr;
        padding: 1rem 0.5rem;
        gap: 1rem;
    }
}

/* Sprite showcase */
.sprite-showcase {
    background: var(--parchment-dark);
    border: 3px solid var(--ink);
    padding: 1.5rem;
    outline: none;
}

.sprite-showcase:focus .sprite-frame {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold);
}

.sprite-frame {
    position: relative;
    background: linear-gradient(to bottom, #c0c0c0 0%, #a0a0a0 100%);
    border: 2px solid var(--ink);
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.sprite-display {
    position: relative;
}

/* Sprite button group (download + upload) */
.sprite-btn-group {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    z-index: 10;
}

/* Sprite upload/download/generator buttons */
.sprite-upload-btn,
.sprite-download-btn,
.sprite-generator-btn {
    background: var(--parchment);
    border: 1px solid var(--ink);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 3px;
    color: var(--ink);
}

.sprite-upload-btn svg,
.sprite-download-btn svg,
.sprite-generator-btn svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sprite-upload-btn:hover,
.sprite-download-btn:hover,
.sprite-generator-btn:hover {
    opacity: 1;
    background: var(--gold);
}

.sprite-upload-btn:disabled,
.sprite-download-btn:disabled,
.sprite-generator-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* Compass controls in top-left */
.compass-controls {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    z-index: 10;
}

.compass-row {
    display: flex;
    gap: 1px;
    align-items: center;
}

.compass-center {
    width: 16px;
    height: 16px;
    background: var(--parchment);
    border: 1px solid var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    font-size: 8px;
    line-height: 1;
}

.compass-center:hover {
    opacity: 1;
    background: var(--parchment-dark);
}

.compass-center.walking {
    background: var(--gold);
    opacity: 1;
}

.compass-btn {
    width: 16px;
    height: 16px;
    padding: 0;
    font-size: 7px;
    line-height: 1;
    background: var(--parchment);
    border: 1px solid var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}

.compass-btn:hover {
    opacity: 1;
    background: var(--parchment-dark);
}

.compass-btn.active {
    background: var(--ink);
    color: var(--parchment);
    opacity: 1;
}

/* Actor identity below sprite */
.actor-identity {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--parchment);
    border: 1px solid var(--ink-light);
}

.actor-identity-avatar {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 2px solid var(--ink);
}

/* Avatar wrap — contains avatar + edit overlay */
.actor-identity-avatar-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.actor-identity-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink-light);
    color: var(--parchment);
    font-size: 1.3rem;
    font-weight: bold;
}

.avatar-edit-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border: 2px solid var(--ink);
}

.avatar-edit-overlay svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

.actor-identity-avatar-wrap.editable {
    cursor: pointer;
}

.actor-identity-avatar-wrap.editable:hover .avatar-edit-overlay,
.actor-identity-avatar-wrap.editable:focus-within .avatar-edit-overlay {
    display: flex;
}

.actor-identity-info {
    flex: 1;
    min-width: 0;
}

.actor-identity-name {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actor-identity-handle {
    font-size: 0.85rem;
    color: var(--ink-light);
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actor-identity-updated {
    font-size: 0.75rem;
    color: var(--ink-light);
    font-style: italic;
    margin-top: 0.25rem;
    opacity: 0.8;
}

/* Back to Creator Roster link (DirectSession only) */
.back-to-roster {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--parchment);
    border: 1px solid var(--accent);
    color: var(--accent-dark);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: bold;
    transition: background 0.15s, border-color 0.15s;
}

.back-to-roster:hover {
    background: var(--parchment-dark);
    border-color: var(--ink);
    color: var(--ink);
}

.back-arrow-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Delete own character button (adopted characters only) */
.delete-own-character-btn {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-top: 1.5rem;
    background: transparent;
    border: 1px solid var(--danger, #c0392b);
    color: var(--danger, #c0392b);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: center;
    opacity: 0.7;
}

.delete-own-character-btn:hover {
    background: var(--danger, #c0392b);
    color: #fff;
    opacity: 1;
}

/* Account Options button */
.account-options-btn {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-top: 1.5rem;
    background: transparent;
    border: 1px solid var(--ink-light, #b0a890);
    color: var(--ink-light, #b0a890);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-align: center;
    opacity: 0.7;
}

.account-options-btn:hover {
    background: var(--parchment-dark, #3a3520);
    border-color: var(--ink, #e8e0d0);
    color: var(--ink, #e8e0d0);
    opacity: 1;
}

/* Account Options panel list */
.acct-options-list {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.65rem;
    gap: 0.4rem;
}

.acct-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    border: 1px solid rgba(60, 42, 20, 0.5);
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
}

.acct-info-section {
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    color: var(--ink-light, #b0a890);
    line-height: 1.6;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.acct-info-section .acct-info-row {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.acct-info-section .acct-info-label {
    font-weight: 600;
    color: var(--ink, #e8e0d0);
    min-width: 3rem;
}

.acct-info-section .acct-info-value {
    word-break: break-all;
    opacity: 0.85;
}

.acct-option:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.acct-option:active {
    background: rgba(255,255,255,0.09);
    transform: scale(0.985);
}

.acct-option-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    color: var(--ink-light, #b0a890);
}

.acct-option-text {
    flex: 1;
    min-width: 0;
}

.acct-option-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink, #e8e0d0);
}

.acct-option-desc {
    font-size: 0.76rem;
    color: var(--ink-light, #b0a890);
    margin-top: 0.15rem;
    line-height: 1.3;
}

.acct-option-arrow {
    flex-shrink: 0;
    font-size: 1.2rem;
    color: var(--ink-light, #b0a890);
    opacity: 0.35;
    line-height: 1;
    transition: opacity 0.15s, transform 0.15s;
}

.acct-option:hover .acct-option-arrow {
    opacity: 0.7;
    transform: translateX(2px);
}

.acct-option-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0.15rem 0.25rem;
}

.acct-option-danger {
    border-color: rgba(192, 57, 43, 0.2);
    background: rgba(192, 57, 43, 0.04);
}

.acct-option-danger .acct-option-icon {
    color: var(--danger, #c0392b);
    background: rgba(192, 57, 43, 0.1);
}

.acct-option-danger .acct-option-label {
    color: var(--danger, #c0392b);
}

.acct-option-danger:hover {
    background: rgba(192, 57, 43, 0.1);
    border-color: rgba(192, 57, 43, 0.35);
    box-shadow: 0 1px 4px rgba(192, 57, 43, 0.1);
}

.acct-option-danger .acct-option-arrow {
    color: var(--danger, #c0392b);
}

.acct-external-note {
    padding: 0.5rem 0.75rem;
    font-size: 0.76rem;
    color: var(--ink-light, #b0a890);
    font-style: italic;
    margin: 0;
    text-align: center;
    opacity: 0.8;
}

/* Popup input (shared across popup modals) */
.popup-input {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--parchment-dark, #3a3520);
    border: 1px solid var(--ink-light, #b0a890);
    color: var(--ink, #e8e0d0);
    font-size: 0.9rem;
    border-radius: 3px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.popup-input:focus {
    border-color: var(--accent, #d4a847);
}

.popup-input::placeholder {
    color: var(--ink-light, #b0a890);
    opacity: 0.5;
}

/* Actor linkouts - external profile links */
.actor-linkouts {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.linkout-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    text-decoration: none;
    color: var(--ink);
    font-size: 0.85rem;
    transition: background 0.15s, border-color 0.15s;
}

.linkout-btn:hover {
    background: var(--parchment-dark);
    border-color: var(--ink);
}

.linkout-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* Widget button — matches linkout-btn but is a <button> not <a> */
.widget-btn {
    cursor: pointer;
    font-family: inherit;
}

/* Actor updated timestamp (below linkouts) */
.actor-updated {
    margin-top: 0.75rem;
    text-align: center;
}

.actor-updated-text {
    font-size: 0.75rem;
    color: var(--ink-light);
    font-style: italic;
    opacity: 0.8;
}

/* Stats section */
.stats-section {
    background: var(--parchment-dark);
    border: 3px solid var(--ink);
    position: relative;
    margin-bottom: 3rem; /* Chin - blank space below the sheet frame */
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .stats-section {
        border-width: 2px;
    }
}

.stat-tabs {
    display: flex;
    border-bottom: 2px solid var(--ink);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.stat-tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.stat-tab {
    font-family: inherit;
    background: transparent;
    border: none;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    font-size: 1rem;
    border-right: 1px solid var(--ink-light);
    position: relative;
}

.stat-tab:last-child {
    border-right: none;
}

.stat-tab:hover {
    background: var(--parchment);
}

.stat-tab.active {
    background: var(--parchment);
    font-weight: bold;
}

.stat-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--parchment);
}

/* Mobile tab dropdown */
.stat-tabs-mobile {
    display: none;
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    border: 2px solid var(--ink);
    background: var(--parchment);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232c2416' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.stat-tabs-mobile:focus {
    outline: none;
    border-color: var(--gold);
}

@media (max-width: 600px) {
    .stat-tabs {
        display: none;
    }
    
    .stat-tabs-mobile {
        display: block;
    }
}

/* Stat panels */
.stat-panels {
    padding: 1.5rem;
    min-height: 300px;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .stat-panels {
        padding: 0.75rem;
    }
}

.stat-panel {
    display: none;
    padding-bottom: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.stat-panel.active {
    display: block;
}

.stat-panel h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.5rem;
}

/* Stat panel header with inline edit button */
.stat-panel h3.stat-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.stat-panel h3.stat-panel-header .edit-controls {
    margin-left: auto;
}

/* Stat grid */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.stat-item {
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    padding: 0.75rem;
}

.stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-light);
    margin-bottom: 0.25rem;
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

.stat-item {
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    padding: 0.75rem;
    text-align: center;
}

/* Special stat layouts */

/* D&D style - vitals left, ability scores right */
.dnd-stats .dnd-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 500px) {
    .dnd-stats .dnd-layout {
        grid-template-columns: 1fr;
    }
}

/* Legacy sidebar layout styles removed - using identity-row and main-grid layout */

/* ============================================
   D&D Full Character Sheet Styles
   ============================================ */

/* D&D uses standard h3 styling from .stat-panel h3, no override needed */

/* Identity Row */
.dnd-identity-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.05), rgba(139, 69, 19, 0.02));
    border: 1px solid var(--ink-light);
    align-items: stretch;
}

.dnd-identity-row .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0.25rem 0.5rem;
    min-width: 70px;
    flex: 1 1 auto;
}

.dnd-identity-row .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 0.15rem;
    flex-shrink: 0;
    height: 0.8rem;
}

.dnd-identity-row .stat-value {
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    height: 1.6rem;
    /* Use flexbox to center text vertically, avoiding baseline differences between characters */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Identity row editable fields - uniform height */
.dnd-identity-row .stat-value.editable {
    min-width: 4em;
    max-width: 100%;
    font-size: 0.8rem;
    padding: 0 0.4rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Main Grid Layout - Two columns */
.dnd-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .dnd-main-grid {
        grid-template-columns: 1fr;
    }
    
    /* Conditions - stack vertically on mobile */
    .dnd-conditions-grid {
        flex-direction: column;
    }
    
    .inspiration-box {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.5rem;
        padding: 0.4rem 0.5rem;
    }
    
    .inspiration-box .condition-toggle {
        font-size: 1.2rem;
    }
    
    .inspiration-box .inspiration-label {
        margin-top: 0;
    }
    
    /* Ensure all D&D boxes fit viewport */
    .dnd-combat-section,
    .dnd-abilities-row,
    .dnd-saves-section,
    .dnd-skills-section,
    .dnd-conditions-section,
    .dnd-spellcasting-box,
    .dnd-features-section,
    .dnd-equipment-section,
    .dnd-attacks-section,
    .dnd-attacks-box,
    .dnd-coinage-box,
    .dnd-left-column,
    .dnd-right-column {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    /* D&D Attacks - card layout on mobile */
    .dnd-attacks-box .attacks-table {
        display: block;
    }
    
    .dnd-attacks-box .attacks-table thead {
        display: none;
    }
    
    .dnd-attacks-box .attacks-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .dnd-attacks-box .attacks-table tr {
        display: flex;
        flex-direction: column;
        background: var(--parchment);
        border: 1px solid var(--ink-light);
        padding: 0.4rem;
        gap: 0.15rem;
    }
    
    .dnd-attacks-box .attacks-table td {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.1rem 0;
        border: none;
        font-size: 0.7rem;
    }
    
    .dnd-attacks-box .attacks-table td::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.7rem;
        min-width: 4em;
        color: var(--ink-light);
    }
    
    /* Remove button on its own row at bottom of card */
    .dnd-attacks-box .attacks-table td.attack-remove-col {
        display: flex;
        justify-content: flex-end;
        border-top: 1px dashed var(--ink-light);
        padding-top: 0.25rem;
        margin-top: 0.15rem;
    }
    
    .dnd-attacks-box .attacks-table td.attack-remove-col::before {
        display: none;
    }
    
    .dnd-attacks-box .attacks-table tr {
        position: relative;
    }
    
    /* Hide table header on mobile */
    .dnd-attacks-box .attacks-table thead {
        display: none;
    }
    
    /* D&D Spellcasting - dropdown instead of tabs on mobile */
    .dnd-spellcasting-box .dnd-spell-level-dropdown {
        display: block;
    }
    
    .dnd-spellcasting-box .spell-tabs {
        display: none;
    }
}

/* Left Column: Combat + Abilities */
.dnd-left-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Right Column: Saves + Skills + Passive */
.dnd-right-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Ability Scores Grid (2 rows of 3) */
.dnd-abilities-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
}

.dnd-ability-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.35rem;
    background: var(--parchment);
    border: 2px solid var(--ink);
}

.dnd-ability-block .ability-name {
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--ink);
}

.dnd-ability-block .ability-score {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--ink);
}

.dnd-ability-block .ability-mod {
    font-size: 0.85rem;
    color: var(--ink-light);
    border-top: 1px solid var(--ink-light);
    padding-top: 0.15rem;
    margin-top: 0.15rem;
    width: 100%;
    text-align: center;
}

/* Combat Stats Row */
.dnd-combat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
}

.dnd-combat-row .stat-item {
    background: var(--parchment);
    border: 2px solid var(--ink);
    padding: 0.35rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
}

.dnd-combat-row .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--ink-light);
}

.dnd-combat-row .stat-value {
    font-size: 1rem;
    font-weight: bold;
}

.dnd-hp-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0.35rem;
}

.dnd-hp-row .stat-item {
    background: var(--parchment);
    border: 2px solid var(--ink);
    padding: 0.35rem;
    text-align: center;
}

.dnd-hp-row .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
}

.dnd-hp-row .stat-value {
    font-size: 1rem;
    font-weight: bold;
}

.dnd-hp-row .stat-value-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.dnd-hp-row .stat-separator {
    color: var(--ink-light);
}

/* Skills Column */
.dnd-skills-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dnd-saves-section h4,
.dnd-skills-section h4,
.dnd-passive-section h4,
.dnd-conditions-section h4 {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.25rem;
    margin-bottom: 0.35rem;
}

/* Conditions Section */
.dnd-conditions-section {
    background: var(--parchment);
    border: 2px solid var(--ink);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.dnd-conditions-grid {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: stretch;
}

/* Inspiration Box - styled like passives/coinage */
.inspiration-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background: rgba(212, 175, 55, 0.15);
    border: 2px solid var(--gold);
    min-width: 4rem;
}

.inspiration-box .condition-toggle {
    font-size: 1.5rem;
    color: var(--ink-light);
    cursor: default;
    user-select: none;
    line-height: 1;
}

.inspiration-box .condition-toggle.active {
    color: var(--gold);
}

body.edit-mode .inspiration-box .condition-toggle {
    cursor: pointer;
}

body.edit-mode .inspiration-box .condition-toggle:hover {
    color: var(--gold);
}

.inspiration-box .inspiration-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #a08830;
    margin-top: 0.15rem;
}

/* Conditions right side (exhaustion + death saves) */
.conditions-right {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.condition-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.7rem;
    gap: 0.5rem;
}

.condition-label {
    font-weight: 500;
    min-width: 5.5em;
}

.condition-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.condition-toggle {
    font-size: 0.9rem;
    color: var(--ink-light);
    cursor: default;
    user-select: none;
}

.condition-toggle.active {
    color: var(--gold);
}

body.edit-mode .condition-toggle {
    cursor: pointer;
}

body.edit-mode .condition-toggle:hover {
    color: var(--gold);
}

/* Exhaustion pips */
.exhaustion-tracker {
    flex-wrap: wrap;
}

.exhaustion-pips {
    display: flex;
    gap: 0.25rem;
}

.exhaustion-pip {
    width: 12px;
    height: 12px;
    border: 2px solid var(--ink);
    background: var(--parchment);
    cursor: default;
}

@media (max-width: 768px) {
    .exhaustion-pip {
        width: 16px;
        height: 16px;
    }
}

.exhaustion-pip.filled {
    background: var(--ink);
}

body.edit-mode .exhaustion-pip {
    cursor: pointer;
}

body.edit-mode .exhaustion-pip:hover {
    border-color: var(--gold);
}

/* Death saves */
.death-saves-tracker {
    flex-wrap: wrap;
}

.death-saves-controls {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.death-saves-row {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.death-pip-icon {
    width: 0.85rem;
    height: 0.85rem;
    order: 1;
    margin-left: 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.death-pip-icon svg {
    width: 0.75rem;
    height: 0.75rem;
    stroke-width: 0;
    fill: var(--ink);
}

.death-pip {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    background: var(--parchment);
    cursor: default;
}

@media (max-width: 768px) {
    .death-pip {
        width: 14px;
        height: 14px;
    }
    
    .death-pip-icon {
        width: 1rem;
        height: 1rem;
    }
    
    .death-pip-icon svg {
        width: 0.9rem;
        height: 0.9rem;
    }
}

.death-pip.success.filled {
    background: #228b22;
    border-color: #228b22;
}

.death-pip.failure.filled {
    background: #8b0000;
    border-color: #8b0000;
}

body.edit-mode .death-pip {
    cursor: pointer;
}

body.edit-mode .death-pip:hover {
    border-color: var(--gold);
}

.dnd-saves-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.15rem;
}

.save-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    padding: 0.15rem 0.25rem;
}

.save-bonus,
.skill-bonus {
    font-weight: bold;
    min-width: 1.5rem;
    text-align: center;
}

.dnd-skills-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    padding: 0.15rem 0.25rem;
}

.skill-ability {
    color: var(--ink-light);
    font-size: 0.7rem;
    margin-left: auto;
}

/* Proficiency icons - shown when proficient/expertise, all shown in edit mode */
.prof-icon {
    font-size: 0.65rem;
    color: var(--ink-light);
    display: none;
    margin-right: 0.25em;
}

/* Show filled proficiency icons in view mode */
.prof-icon.proficient,
.prof-icon.expertise {
    display: inline;
}

.prof-icon.proficient {
    color: var(--ink);
}

.prof-icon.expertise {
    color: var(--gold);
}

/* Show all proficiency icons in edit mode (including empty) */
body.edit-mode .prof-icon {
    display: inline;
    cursor: pointer;
    padding: 0.15rem;
    transition: background 0.15s ease;
}

body.edit-mode .prof-icon:hover {
    background: rgba(218, 165, 32, 0.2);
}

body.edit-mode .save-item,
body.edit-mode .skill-item {
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed transparent;
    cursor: pointer;
}

body.edit-mode .save-item:hover,
body.edit-mode .skill-item:hover {
    border-color: var(--gold);
    background: rgba(218, 165, 32, 0.15);
}

/* Auto-calc buttons - hidden by default, shown in edit mode */
.auto-calc-btn {
    display: none;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    margin-left: auto;
    background: var(--parchment);
    border: 1px solid var(--gold);
    color: var(--ink);
    border-radius: 3px;
    cursor: pointer;
    font-weight: normal;
    transition: background 0.15s ease;
}

body.edit-mode .auto-calc-btn {
    display: inline-block;
}

.auto-calc-btn:hover {
    background: rgba(218, 165, 32, 0.3);
}

/* Passive Scores - Box style like coinage */
.dnd-passive-grid {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.passive-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.5rem;
    text-align: center;
    flex: 1;
    background: rgba(100, 100, 150, 0.1);
    border: 2px solid #5a5a8a;
}

.passive-box .passive-value {
    font-size: 1rem;
    font-weight: bold;
    color: var(--ink);
}

.passive-box .passive-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #5a5a8a;
    margin-top: 0.15rem;
}

/* Keep old passive-item and passive-value for backwards compatibility */
.passive-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
}

.passive-value {
    font-weight: bold;
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    padding: 0.1rem 0.25rem;
    min-width: 1.25rem;
    text-align: center;
    font-size: 0.7rem;
}

/* D&D Attacks Box (inside left column) */
.dnd-attacks-box,
.dnd-spellcasting-box {
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}

.dnd-attacks-box h4,
.dnd-spellcasting-box h4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.25rem;
    margin-bottom: 0.35rem;
}

/* Attacks table */
.dnd-attacks-box .attacks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}

.dnd-attacks-box .attacks-table th {
    text-align: left;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--ink-light);
    border-bottom: 1px solid var(--ink-light);
    padding: 0.15rem 0.25rem;
}

.dnd-attacks-box .attacks-table td {
    padding: 0.15rem 0.25rem;
    border-bottom: 1px dashed var(--ink-light);
    font-size: 0.7rem;
}

.dnd-attacks-box .attacks-table td .stat-value {
    font-size: 0.7rem;
    display: block;
    width: 100%;
    text-align: left;
}

.dnd-attacks-box .attacks-table tr:last-child td {
    border-bottom: none;
}

.dnd-attacks-box .attacks-content {
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.dnd-spellcasting-box .spell-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed var(--ink-light);
}

.dnd-spellcasting-box .spell-stats > span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}

.dnd-spellcasting-box .spell-stats .stat-value {
    font-size: 0.8rem;
}

/* Spellcasting layout - single column, spell slots at bottom */
.dnd-spellcasting-box .spellcasting-layout {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Legacy support for old grid layout */
.dnd-spellcasting-box .spellcasting-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
}

.dnd-spellcasting-box .spellcasting-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dnd-spellcasting-box .cantrips-box,
.dnd-spellcasting-box .spells-known-box {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--ink-light);
    padding: 0.35rem 0.5rem;
}

.dnd-spellcasting-box .spell-section-header {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--ink-light);
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.dnd-spellcasting-box .spell-section-content {
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: left;
}

.dnd-spellcasting-box .spell-section-content .empty-placeholder,
.dnd-spellcasting-box .spell-slots-box .empty-placeholder,
.dnd-spellcasting-box .spell-level-content .empty-placeholder {
    color: var(--ink-light);
    font-style: italic;
    font-size: 0.75rem;
}

/* Spell Tabs */
.dnd-spellcasting-box .spells-tabbed-box {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--ink-light);
    padding: 0;
    margin-top: 0.25rem;
}

/* D&D Spell level dropdown (mobile) - hidden by default */
.dnd-spellcasting-box .dnd-spell-level-dropdown {
    display: none;
    width: 100%;
    padding: 0.4rem;
    font-size: 0.75rem;
    font-family: inherit;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    margin-bottom: 0.5rem;
}

.dnd-spellcasting-box .spell-tabs {
    display: flex;
    border-bottom: 1px solid var(--ink-light);
    background: rgba(0, 0, 0, 0.02);
}

.dnd-spellcasting-box .spell-tab {
    flex: 1;
    padding: 0.25rem 0.15rem;
    font-size: 0.7rem;
    font-weight: bold;
    border: none;
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    border-right: 1px solid var(--ink-light);
    font-family: inherit;
    position: relative;
}

.dnd-spellcasting-box .spell-tab:last-child {
    border-right: none;
}

.dnd-spellcasting-box .spell-tab:hover {
    background: rgba(218, 165, 32, 0.1);
}

.dnd-spellcasting-box .spell-tab.active {
    background: var(--parchment);
    color: var(--ink);
    border-bottom: 2px solid var(--gold);
    margin-bottom: -1px;
}

.dnd-spellcasting-box .spell-tab.has-spells {
    color: var(--ink);
}

.dnd-spellcasting-box .spell-tab sup {
    font-size: 0.45rem;
    color: var(--gold);
    margin-left: 1px;
}

.dnd-spellcasting-box .spell-tab-panels {
    min-height: 4em;
}

.dnd-spellcasting-box .spell-tab-panel {
    display: none;
    padding: 0.4rem 0.5rem;
}

.dnd-spellcasting-box .spell-tab-panel.active {
    display: block;
}

.dnd-spellcasting-box .spell-level-content {
    font-size: 0.75rem;
    line-height: 1.5;
    min-height: 3em;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

/* Center empty placeholder in spell tab panels */
.dnd-spellcasting-box .spell-level-content .empty-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 3em;
}

.dnd-spellcasting-box .spellcasting-right {
    min-width: 100px;
}

.dnd-spellcasting-box .spell-slots-box {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--ink-light);
    padding: 0.35rem 0.5rem;
}

.dnd-spellcasting-box .spell-slots-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0.25rem;
}

/* For narrow containers (e.g., in spellcasting-right column) */
.dnd-spellcasting-box .spellcasting-right .spell-slots-grid {
    grid-template-columns: repeat(3, 1fr);
}

.dnd-spellcasting-box .slot-level {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.2rem;
    background: var(--parchment);
    border: 1px solid var(--ink-light);
}

.dnd-spellcasting-box .slot-level.slot-empty {
    opacity: 0.4;
}

.dnd-spellcasting-box .spell-slots-empty .slot-level {
    opacity: 0.4;
}

.dnd-spellcasting-box .slot-level-num {
    font-size: 0.7rem;
    color: var(--ink-light);
}

.dnd-spellcasting-box .slot-count {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--ink);
    min-width: 1.5em;
    text-align: center;
}

/* Slot count is editable */
.dnd-spellcasting-box .slot-count.editable {
    min-width: 1.5em;
    padding: 0.1rem 0.25rem;
}

.dnd-spellcasting-box .spell-list {
    font-size: 0.8rem;
    line-height: 1.4;
}

.dnd-spellcasting-box .spell-row {
    margin-bottom: 0.25rem;
}

/* D&D Row Layouts */
.dnd-equipment-row,
.dnd-features-row,
.dnd-character-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

/* Features row - ensure columns stretch to same height */
.dnd-features-row {
    align-items: stretch;
}

.dnd-features-row [data-section="features"] {
    display: flex;
    flex-direction: column;
}

/* Features box - fill available height */
.dnd-features-row [data-section="features"] .text-content {
    white-space: pre-wrap;
    line-height: 1.4;
    flex: 1;
    min-height: 5em;
}

/* Equipment Other field - 2 rows tall */
.dnd-equipment-box .text-item[data-stat="equipment"] .stat-value {
    display: block;
    min-height: 2.4em;
    line-height: 1.2;
}

/* Remove extra margin from last equipment text-item */
.dnd-equipment-box .text-item:last-child {
    margin-bottom: 0;
}

/* Ensure equipment box items are evenly distributed */
.dnd-equipment-box .text-content {
    display: flex;
    flex-direction: column;
}

@media (max-width: 600px) {
    .dnd-equipment-row,
    .dnd-features-row,
    .dnd-character-row {
        grid-template-columns: 1fr;
    }
    
    /* Ensure D&D text boxes don't overflow */
    .dnd-text-section,
    .dnd-equipment-box,
    .dnd-coinage-box {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
        word-wrap: break-word;
    }
    
    .dnd-text-section .text-content,
    .dnd-text-section .stat-value {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: pre-wrap;
    }
    
    /* Stack label/value vertically - title full left, content full width below */
    .dnd-text-section .text-item {
        display: block;
        margin-bottom: 0.6rem;
        padding: 0;
    }
    
    .dnd-text-section .text-item:last-child {
        margin-bottom: 0;
    }
    
    /* Title: same size as content, left-aligned, no special styling */
    .dnd-text-section .text-item strong {
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--ink);
        text-transform: none;
        letter-spacing: normal;
        text-align: left;
        margin-bottom: 0.1rem;
    }
    
    /* Content: full width row below title */
    .dnd-text-section .text-item .stat-value {
        display: block;
        width: 100%;
        font-size: 0.7rem;
        line-height: 1.4;
        text-align: left;
    }
    
    /* Equipment & Proficiencies & Personality - same treatment */
    .dnd-equipment-box .text-item strong,
    .dnd-text-section[data-section="proficiencies"] .text-item strong,
    .dnd-personality-section .text-item strong {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--ink);
        text-transform: none;
        text-align: left;
        margin-bottom: 0.1rem;
    }
    
    /* Equipment/proficiencies/personality titles align left */
    .dnd-equipment-box h4,
    .dnd-text-section[data-section="proficiencies"] h4,
    .dnd-personality-section h4 {
        text-align: left;
    }
    
    /* Remove extra box padding that causes issues */
    .dnd-equipment-box,
    .dnd-text-section[data-section="proficiencies"],
    .dnd-personality-section {
        padding: 0.4rem 0.5rem;
    }
    
    .dnd-coinage-box h4 {
        text-align: left;
    }
}

/* Equipment row: equipment takes 2/3, coinage takes 1/3 */
.dnd-equipment-row {
    grid-template-columns: 2fr 1fr;
}

@media (max-width: 600px) {
    .dnd-equipment-row {
        grid-template-columns: 1fr;
    }
}

/* Text Sections (shared by all rows) */
.dnd-text-section {
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    padding: 0.5rem 0.75rem;
}

.dnd-text-section h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.25rem;
    margin-bottom: 0.35rem;
}

.dnd-text-section .text-content {
    font-size: 0.85rem;
    line-height: 1.4;
}

.dnd-text-section .text-item {
    margin-bottom: 0.35rem;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.dnd-text-section .text-item strong {
    color: var(--ink);
    flex-shrink: 0;
    text-align: right;
    font-size: 0.85rem;
}

.dnd-text-section .text-item .stat-value {
    flex: 1;
    text-align: left;
    font-size: 0.8rem;
    min-height: 1.2em;
}

/* Per-box label alignment - each box aligns within itself */
.dnd-equipment-box .text-item strong {
    min-width: 4.5em;
}

.dnd-text-section[data-section="proficiencies"] .text-item strong {
    min-width: 7em;
}

.dnd-personality-section .text-item strong {
    min-width: 3.5em;
}

/* Smaller field values for these sections */
.dnd-personality-section .text-item .stat-value,
.dnd-text-section[data-section="proficiencies"] .text-item .stat-value,
.dnd-text-section[data-section="features"] .text-item .stat-value,
.dnd-equipment-box .text-item .stat-value {
    font-size: 0.75rem;
    font-weight: normal;
}

/* Features and backstory content should also be non-bold */
.dnd-text-section[data-section="features"] .text-content,
.dnd-backstory-section .text-content.stat-value {
    font-weight: normal;
}

/* Coinage grid layout: Olympics logo - 3 on top, 2 centered below */
.dnd-coinage-box .coinage-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.35rem;
}

.dnd-coinage-box .currency-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.25rem;
    text-align: center;
    grid-column: span 2;
}

.dnd-coinage-box .currency-item .stat-value {
    font-size: 1rem;
    font-weight: bold;
}

.dnd-coinage-box .currency-item .currency-label {
    font-size: 0.65rem;
    text-transform: uppercase;
}

/* Currency colors - light fills with colored borders */
.dnd-coinage-box .currency-item[data-stat="copper"] {
    background: rgba(205, 127, 50, 0.15);
    border: 2px solid #cd7f32;
    color: #8b5a2b;
}
.dnd-coinage-box .currency-item[data-stat="copper"] .currency-label {
    color: #a06830;
}

.dnd-coinage-box .currency-item[data-stat="silver"] {
    background: rgba(192, 192, 192, 0.2);
    border: 2px solid #a0a0a0;
    color: #555;
}
.dnd-coinage-box .currency-item[data-stat="silver"] .currency-label {
    color: #777;
}

.dnd-coinage-box .currency-item[data-stat="gold"] {
    background: rgba(212, 175, 55, 0.15);
    border: 2px solid #d4af37;
    color: #8b7722;
}
.dnd-coinage-box .currency-item[data-stat="gold"] .currency-label {
    color: #a08830;
}

.dnd-coinage-box .currency-item[data-stat="electrum"] {
    background: rgba(112, 112, 112, 0.15);
    border: 2px solid #707070;
    color: #444;
}
.dnd-coinage-box .currency-item[data-stat="electrum"] .currency-label {
    color: #555;
}

.dnd-coinage-box .currency-item[data-stat="platinum"] {
    background: rgba(64, 64, 64, 0.1);
    border: 2px solid #404040;
    color: #333;
}
.dnd-coinage-box .currency-item[data-stat="platinum"] .currency-label {
    color: #444;
}

/* Keep coinage entry values normal color (not colored like their boxes) */
.dnd-coinage-box .currency-item .stat-value {
    color: var(--ink);
}

/* ep and pp - centered on bottom row (Olympics logo style) */
.dnd-coinage-box .currency-item:nth-child(4) {
    grid-column: 2 / 4;
}

.dnd-coinage-box .currency-item:nth-child(5) {
    grid-column: 4 / 6;
}

/* Backstory section */
.dnd-backstory-section {
    min-height: 6rem;
    display: flex;
    flex-direction: column;
}

.dnd-backstory-section .text-content {
    flex: 1;
    white-space: pre-wrap;
    line-height: 1.5;
}

/* HR divider between main content and equipment */
.dnd-section-divider {
    width: 85%;
    margin: 1.5rem auto;
    border: none;
    border-top: 1px solid var(--ink-light);
}

/* Mobile responsiveness for D&D sheet */
@media (max-width: 600px) {
    .dnd-identity-row .stat-item {
        min-width: 60px;
    }
    
    .dnd-combat-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dnd-combat-row .stat-item {
        padding: 0.25rem;
        min-height: auto;
    }
    
    .dnd-hp-row {
        grid-template-columns: 1fr;
    }
    
    /* Keep saves as 2 columns on mobile to save space */
    .dnd-saves-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dnd-abilities-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.25rem;
    }
    
    .dnd-ability-block {
        padding: 0.35rem 0.25rem;
    }
    
    /* Spell slots: stack into 2 rows on mobile */
    .dnd-spellcasting-box .spell-slots-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ============================================
   DCC (Dungeon Crawl Classics) Styles
   ============================================ */

.dcc-stats {
    font-family: inherit;
}

.dcc-stats h3 {
    color: var(--ink);
    border-bottom: 2px solid #5a3825;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* DCC Identity Row */
.dcc-identity-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(90, 56, 37, 0.08), rgba(90, 56, 37, 0.02));
    border: 1px solid var(--ink-light);
    align-items: stretch;
}

.dcc-identity-row .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0.25rem 0.5rem;
    min-width: 70px;
    flex: 1 1 auto;
}

.dcc-identity-row .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 0.15rem;
    flex-shrink: 0;
    height: 0.8rem;
}

.dcc-identity-row .stat-value {
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dcc-identity-row .stat-value.editable {
    min-width: 4em;
    max-width: 100%;
    font-size: 0.8rem;
    padding: 0 0.4rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* DCC Main Grid */
.dcc-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .dcc-main-grid {
        grid-template-columns: 1fr;
    }
}

.dcc-left-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dcc-right-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* DCC Combat Row */
.dcc-combat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
}

.dcc-combat-row .stat-item {
    background: var(--parchment);
    border: 2px solid #5a3825;
    padding: 0.35rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
}

.dcc-combat-row .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--ink-light);
}

.dcc-combat-row .stat-value {
    font-size: 1rem;
    font-weight: bold;
}

.dcc-combat-row .stat-value-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.dcc-combat-row .stat-separator {
    color: var(--ink-light);
}

/* DCC Dice Row (Action Die, Crit, Fumble) */
.dcc-dice-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem;
}

.dcc-dice-row .stat-item {
    background: var(--parchment);
    border: 2px solid var(--ink);
    padding: 0.35rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dcc-dice-row .stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--ink-light);
}

.dcc-dice-row .stat-value {
    font-size: 0.85rem;
    font-weight: bold;
}

/* DCC Ability Scores */
.dcc-abilities-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
}

.dcc-ability-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.35rem;
    background: var(--parchment);
    border: 2px solid #5a3825;
}

.dcc-ability-block .ability-name {
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #5a3825;
}

.dcc-ability-block .ability-score {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--ink);
}

.dcc-ability-block .ability-mod {
    font-size: 0.85rem;
    color: var(--ink-light);
    border-top: 1px solid var(--ink-light);
    padding-top: 0.15rem;
    margin-top: 0.15rem;
    width: 100%;
    text-align: center;
}

/* Special styling for Luck ability */
.dcc-luck-ability {
    background: linear-gradient(135deg, #f5f0e0, #e8dcc8);
    border-color: #8b7355;
}

.dcc-luck-ability .ability-name {
    color: #8b7355;
}

/* DCC Saves Section - three-box layout like currency */
.dcc-saves-section {
    background: var(--parchment);
    border: 2px solid var(--ink);
    padding: 0.5rem;
}

.dcc-saves-section h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.25rem;
    margin-bottom: 0.35rem;
}

.dcc-saves-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
}

.dcc-saves-grid .save-item-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.25rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--ink-light);
}

.dcc-saves-grid .save-bonus {
    font-size: 1rem;
    font-weight: bold;
    color: var(--ink);
}

.dcc-saves-grid .save-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--ink-light);
}

/* DCC Luck Tracking Section (simplified) */
.dcc-luck-tracking-section {
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    padding: 0.35rem;
    font-size: 0.7rem;
    margin-top: 0.5rem;
}

.dcc-luck-tracking-section .luck-burned {
    font-size: 0.65rem;
    color: var(--ink-light);
    margin-left: 0.25rem;
}

/* DCC Languages Section - thin border */
.dcc-languages-section {
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
}

.dcc-languages-section h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.25rem;
    margin-bottom: 0.35rem;
}

.dcc-languages-section .text-content {
    font-size: 0.75rem;
    text-align: left;
    min-height: 3rem;
    white-space: pre-wrap;
    line-height: 1.4;
    font-weight: normal;
}

/* DCC Class Sections */
.dcc-class-section {
    background: var(--parchment);
    border: 2px solid var(--ink);
    padding: 0.5rem;
    margin-top: 0.5rem;
}

.dcc-class-section h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Warrior Features */
.dcc-warrior-section {
    border-color: #8b0000;
}

.dcc-warrior-section h4 {
    color: #8b0000;
}

.dcc-warrior-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.dcc-warrior-grid .stat-item {
    text-align: center;
    padding: 0.25rem;
    background: rgba(139, 0, 0, 0.05);
}

.dcc-warrior-grid .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--ink-light);
}

.dcc-warrior-grid .stat-value {
    font-weight: bold;
}

.dcc-mighty-deeds {
    font-size: 0.75rem;
    padding: 0.25rem;
    background: rgba(139, 0, 0, 0.05);
}

/* Wizard Features */
.dcc-wizard-section {
    border-color: #4a0080;
}

.dcc-wizard-section h4 {
    color: #4a0080;
}

.dcc-wizard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.dcc-wizard-grid .stat-item {
    text-align: center;
    padding: 0.25rem;
    background: rgba(74, 0, 128, 0.05);
}

.dcc-wizard-grid .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--ink-light);
}

.dcc-wizard-grid .stat-value {
    font-weight: bold;
}

.dcc-spellburn-box {
    font-size: 0.75rem;
    padding: 0.35rem;
    background: rgba(139, 0, 0, 0.1);
    margin-bottom: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.spellburn-stat {
    color: #8b0000;
    font-weight: 600;
}

.dcc-corruption-box {
    font-size: 0.75rem;
    padding: 0.35rem;
    background: rgba(0, 0, 0, 0.05);
    margin-bottom: 0.35rem;
}

.corruption-list {
    margin: 0.25rem 0 0 1rem;
    padding: 0;
    font-size: 0.7rem;
}

.corruption-list li {
    margin-bottom: 0.15rem;
}

.dcc-spells-box {
    font-size: 0.75rem;
    padding: 0.35rem;
    background: rgba(74, 0, 128, 0.05);
}

.spell-list {
    margin: 0.25rem 0 0 1rem;
    padding: 0;
    font-size: 0.7rem;
}

.spell-list li {
    margin-bottom: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.spell-list .spell-level {
    font-size: 0.7rem;
    color: var(--ink-light);
}

.spell-list .mercurial {
    color: #8b7355;
    cursor: help;
}

.spell-list .lost-marker {
    color: #8b0000;
    font-size: 0.7rem;
    font-weight: bold;
}

.spell-list .spell-lost {
    opacity: 0.6;
    text-decoration: line-through;
}

.spell-list .sinful-marker {
    color: #cc6600;
    cursor: help;
}

/* Cleric Features */
.dcc-cleric-section {
    border-color: #006633;
}

.dcc-cleric-section h4 {
    color: #006633;
}

.dcc-cleric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.dcc-cleric-grid .stat-item {
    text-align: center;
    padding: 0.25rem;
    background: rgba(0, 102, 51, 0.05);
}

.dcc-cleric-grid .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--ink-light);
}

.dcc-cleric-grid .stat-value {
    font-weight: bold;
}

.dcc-disapproval-box .stat-value {
    color: #cc6600;
}

.dcc-cleric-abilities {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.dcc-cleric-abilities .stat-item {
    display: flex;
    gap: 0.35rem;
    font-size: 0.75rem;
}

.dcc-cleric-abilities .stat-label {
    font-weight: 600;
}

/* ==================================
   DCC Comprehensive Spellcasting UI
   ================================== */

/* Full-Width Spellcasting Box with Arcane/Divine Tabs */
.dcc-spellcasting-box {
    background: var(--parchment);
    border: 2px solid var(--ink);
    margin-bottom: 1rem;
}

.dcc-magic-tabs {
    display: flex;
    border-bottom: 1px solid var(--ink-light);
    background: rgba(0, 0, 0, 0.03);
}

.dcc-magic-tab {
    flex: 1;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    color: var(--ink-light);
    transition: all 0.15s ease;
}

.dcc-magic-tab:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--ink);
}

.dcc-magic-tab.active {
    border-bottom-color: var(--ink);
    color: var(--ink);
    background: var(--parchment);
}

/* Hide tabs with no content (unless in edit mode) */
.dcc-magic-tab.no-content {
    display: none;
}

.edit-mode .dcc-magic-tab.no-content {
    display: block;
    opacity: 0.6;
}

.dcc-magic-panel {
    display: none;
    padding: 0.75rem;
}

.dcc-magic-panel.active {
    display: block;
}

/* Hide panels with no content (unless in edit mode) */
.dcc-magic-panel.no-content {
    display: none;
}

.edit-mode .dcc-magic-panel.no-content.active {
    display: block;
}

/* Magic Stats Row */
.dcc-magic-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.magic-stat-item {
    text-align: center;
    padding: 0.35rem 0.75rem;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--ink-light);
    min-width: 70px;
}

.magic-stat-item.magic-stat-wide {
    flex: 1;
    min-width: 120px;
}

.magic-stat-item .stat-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 0.1rem;
}

.magic-stat-item .stat-value {
    font-size: 0.85rem;
    font-weight: bold;
}

/* Magic Content Row (side-by-side boxes) */
.dcc-magic-content-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Corruption Box */
.dcc-corruption-box {
    flex: 1;
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
    min-height: 4rem;
    display: flex;
    flex-direction: column;
}

.corruption-header {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.25rem;
}

.corruption-text {
    font-size: 0.65rem;
    line-height: 1.4;
    flex: 1;
}

.corruption-text .stat-value {
    display: block;
    width: 100%;
}

/* Legacy Patron Bond Box (kept for compatibility) */
.dcc-patron-bond-box {
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
}

.patron-header {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.patron-content {
    font-size: 0.7rem;
    line-height: 1.4;
}

/* Disapproval Box */
.dcc-disapproval-box {
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
}

.disapproval-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.disapproval-title {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.disapproval-help {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ink-light);
    color: var(--parchment);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}

.disapproval-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.disapproval-range {
    font-size: 0.85rem;
    font-weight: bold;
}

.disapproval-max {
    font-size: 1rem;
}

.disapproval-pips {
    display: flex;
    gap: 0.1rem;
    flex-wrap: wrap;
}

.disapproval-pip {
    width: 8px;
    height: 8px;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
}

.disapproval-pip.active {
    background: var(--ink);
    border-color: var(--ink);
}

.disapproval-table-ref {
    font-size: 0.7rem;
    color: var(--ink-light);
    margin-top: 0.25rem;
}

/* Cleric Powers Box */
.dcc-cleric-powers-box {
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
}

.cleric-power-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px dotted var(--ink-light);
    font-size: 0.7rem;
}

.cleric-power-item:last-child {
    border-bottom: none;
}

.cleric-power-item .power-label {
    color: var(--ink-light);
}

.cleric-power-item .power-die,
.cleric-power-item .power-value {
    font-weight: bold;
}

/* Spells Table Box */
.dcc-spells-table-box {
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
}

.dcc-spells-table-box h5 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--ink-light);
}

.add-spell-btn {
    font-size: 0.7rem;
    padding: 0.15rem 0.35rem;
    background: var(--ink);
    color: var(--parchment);
    border: none;
    cursor: pointer;
    display: none;
}

.edit-mode .add-spell-btn {
    display: inline-flex;
}

.spells-table {
    width: 100%;
    font-size: 0.65rem;
    border-collapse: collapse;
    table-layout: fixed;
}

.spells-table th {
    text-align: center;
    font-weight: 600;
    padding: 0.15rem 0.25rem;
    border-bottom: 1px solid var(--ink-light);
    font-size: 0.7rem;
}

/* Center td content to match headers */
.spells-table td {
    text-align: center;
    padding: 0.15rem 0.25rem;
}

/* Spell notes should be non-bold */
.spells-table .spell-notes {
    font-weight: normal;
}

/* Column widths for Known Spells table */
.spells-table th:first-child { /* Spell Name */
    width: 30%;
}

.spells-table th:nth-child(2) { /* Mercurial/Sinful */
    width: 30%;
}

.spells-table th:nth-child(3) { /* Notes */
    width: 25%;
}

.spells-table th.spell-add-col { /* Add button */
    width: 40px;
}

.spells-table th.spell-remove-col { /* Remove button */
    width: 28px;
}

/* Divine Spells table - Sinful as checkbox */
.divine-spells-table th:first-child { /* Spell Name */
    width: 40%;
}

.divine-spells-table th.sinful-col { /* Sinful checkbox */
    width: 3rem;
    text-align: center;
}

.divine-spells-table th:nth-child(3) { /* Notes */
    width: 40%;
}

.divine-spells-table .sinful-cell {
    text-align: center;
}

.divine-spells-table .sinful-checkbox {
    width: 0.9rem;
    height: 0.9rem;
    cursor: default;
    accent-color: var(--ink);
    pointer-events: none;
}

.edit-mode .divine-spells-table .sinful-checkbox {
    cursor: pointer;
    pointer-events: auto;
}

.spells-table td {
    padding: 0.15rem 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spells-table .stat-value {
    font-size: 0.65rem;
    display: block;
    width: 100%;
}

.spell-row.spell-lost {
    opacity: 0.6;
}

.spell-row.spell-lost .spell-name {
    text-decoration: line-through;
}

.lost-badge {
    font-size: 0.5rem;
    color: var(--parchment);
    background: var(--ink);
    padding: 0.05rem 0.2rem;
    margin-left: 0.25rem;
    font-weight: bold;
}

/* Spell remove button column */
.spell-remove-col {
    text-align: center;
    visibility: hidden;
    width: 0;
    padding: 0;
}

.edit-mode .spell-remove-col {
    visibility: visible;
    width: 28px;
}

/* Lost column - narrow checkbox column */
.lost-col {
    text-align: center;
    width: 2.5rem;
}

.lost-cell {
    text-align: center;
}

.lost-checkbox {
    cursor: pointer;
}

.spell-row .remove-spell-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
    border: 1px solid var(--ink-light);
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.spell-row .remove-spell-btn:hover {
    background: var(--ink);
    color: var(--parchment);
    border-color: var(--ink);
}

/* DCC Spells Tabbed Box (with level tabs) */
.dcc-spells-tabbed-box {
    margin-top: 0.75rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
}

/* Hide dropdown on desktop */
.dcc-spell-level-dropdown {
    display: none;
}

.dcc-spells-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--ink-light);
}

.dcc-spells-header h5 {
    font-size: 0.7rem;
    text-transform: uppercase;
    margin: 0;
}

.dcc-spell-level-tabs {
    display: flex;
    border-bottom: 1px solid var(--ink-light);
    background: rgba(0, 0, 0, 0.02);
}

.dcc-spell-level-tab {
    flex: 1;
    padding: 0.35rem 0.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--ink-light);
    transition: all 0.15s ease;
}

.dcc-spell-level-tab:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--ink);
}

.dcc-spell-level-tab.active {
    border-bottom-color: var(--ink);
    color: var(--ink);
    background: var(--parchment);
}

.dcc-spell-level-tab .spell-count {
    font-size: 0.65rem;
    color: var(--ink-light);
    margin-left: 0.15rem;
}

.dcc-spell-level-tab.active .spell-count {
    color: var(--ink);
}

.dcc-spell-level-panel {
    display: none;
    padding: 0.35rem;
}

.dcc-spell-level-panel.active {
    display: block;
}

.dcc-spell-level-panel .no-spells {
    text-align: center;
    color: var(--ink-light);
    font-style: italic;
    font-size: 0.7rem;
    padding: 0.5rem;
}

/* Common Spellcasting Layout (legacy - keep for compatibility) */
.dcc-spellcasting-section {
    min-width: 0; /* Allow shrinking on mobile */
    max-width: 100%;
}

.dcc-spellcasting-layout {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Spell Stats Row */
.dcc-spell-stats,
.dcc-divine-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
}

.spell-stat-item,
.divine-stat-item {
    text-align: center;
    padding: 0.35rem;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--ink-light);
}

.spell-stat-item .stat-label,
.divine-stat-item .stat-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 0.1rem;
}

.spell-stat-item .stat-value,
.divine-stat-item .stat-value {
    font-size: 0.85rem;
    font-weight: bold;
}

.spell-stat-patron {
    grid-column: span 3;
}

.divine-deity {
    grid-column: span 3;
}

/* Cleric Powers (legacy) */
.dcc-cleric-powers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
}

/* Tabbed Spell Box (legacy) */
.dcc-spells-tabbed-box {
    background: var(--parchment);
    border: 2px solid var(--ink-light);
}

.dcc-spell-tabs {
    display: flex;
    border-bottom: 1px solid var(--ink-light);
    background: rgba(0, 0, 0, 0.03);
}

.dcc-spell-tab {
    flex: 1;
    padding: 0.35rem 0.25rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--ink-light);
    transition: all 0.15s ease;
}

.dcc-spell-tab:hover {
    background: rgba(0, 0, 0, 0.05);
}

.dcc-spell-tab.active {
    border-bottom-color: var(--ink);
    color: var(--ink);
    background: var(--parchment);
}

.dcc-spell-tab.has-spells {
    color: var(--ink);
}

.dcc-spell-tab sup {
    font-size: 0.5rem;
    vertical-align: super;
    margin-left: 1px;
}

.dcc-spell-tab-panels {
    min-height: 60px;
}

.dcc-spell-tab-panel {
    display: none;
    padding: 0.5rem;
}

.dcc-spell-tab-panel.active {
    display: block;
}

.dcc-spell-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dcc-spell-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.75rem;
}

.dcc-spell-item:last-child {
    border-bottom: none;
}

.dcc-spell-item .spell-name {
    flex: 1;
}

.dcc-spell-item.spell-lost {
    opacity: 0.6;
}

.dcc-spell-item.spell-lost .spell-name {
    text-decoration: line-through;
}

.mercurial-badge {
    font-size: 0.7rem;
    color: var(--ink-light);
    background: var(--parchment-light);
    padding: 0.1rem 0.25rem;
    border: 1px solid var(--ink-light);
    cursor: help;
}

.sinful-badge {
    font-size: 0.65rem;
    color: var(--ink-light);
    cursor: help;
}

.spell-notes {
    font-size: 0.65rem;
    cursor: help;
}

.no-spells {
    font-size: 0.7rem;
    color: var(--ink-light);
    font-style: italic;
    text-align: center;
    padding: 0.5rem;
}

/* Patron Box (legacy) */
.dcc-patron-box {
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
}

/* Legacy corruption styling (no colors) */
.dcc-corruption-box {
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
}

.corruption-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.corruption-title {
    font-weight: 700;
    font-size: 0.75rem;
}

.corruption-count {
    font-size: 0.65rem;
    background: var(--ink);
    color: var(--parchment);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-weight: bold;
}

.corruption-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.corruption-item {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--ink-light);
    font-size: 0.7rem;
}

.corruption-item:last-child {
    border-bottom: none;
}

.corruption-type {
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0.1rem 0.25rem;
    background: var(--ink-light);
    color: var(--parchment);
    border-radius: 3px;
    flex-shrink: 0;
}

.corruption-effect {
    flex: 1;
}

.corruption-source {
    font-size: 0.7rem;
    color: var(--ink-light);
    font-style: italic;
}

/* Thief Features */
.dcc-thief-section {
    border-color: #333;
}

.dcc-thief-section h4 {
    color: #333;
}

.dcc-thief-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.25rem;
    margin-bottom: 0.35rem;
}

.thief-skill-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0.35rem;
    background: rgba(0, 0, 0, 0.03);
    font-size: 0.7rem;
}

.thief-skill-item .skill-label {
    color: var(--ink-light);
}

.thief-skill-item .skill-value {
    font-weight: bold;
}

/* Halfling Features */
.dcc-halfling-section {
    border-color: #8b7355;
}

.dcc-halfling-section h4 {
    color: #8b7355;
}

.dcc-halfling-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.dcc-halfling-grid .stat-item {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem;
    background: rgba(139, 115, 85, 0.05);
    font-size: 0.75rem;
}

.dcc-halfling-grid .stat-label {
    color: var(--ink-light);
}

.dcc-halfling-grid .stat-value {
    font-weight: bold;
}

/* DCC Section Divider */
.dcc-section-divider {
    width: 85%;
    margin: 1.5rem auto;
    border: none;
    border-top: 1px solid var(--ink-light);
}

/* DCC Equipment Row */
.dcc-equipment-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 600px) {
    .dcc-equipment-row {
        grid-template-columns: 1fr;
    }
}

.dcc-text-section {
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
}

.dcc-text-section h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
}

.dcc-text-section .text-content {
    font-size: 0.7rem;
}

.dcc-text-section .text-item {
    margin-bottom: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.dcc-text-section .text-item strong {
    font-size: 0.65rem;
    min-width: 4rem;
}

.dcc-text-section .text-item .stat-value {
    font-size: 0.7rem;
    flex: 1;
    text-align: left;
}

/* DCC Treasure Box - replaces Coinage */
.dcc-treasure-box {
    background: var(--parchment);
    border: 2px solid var(--ink);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

.dcc-treasure-box .coinage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.dcc-treasure-box .currency-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.25rem;
    text-align: center;
}

.dcc-treasure-box .currency-label {
    font-size: 0.7rem;
    text-transform: uppercase;
}

.dcc-treasure-box > .stat-value,
.dcc-treasure-box .coinage-grid .stat-value {
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--ink);
}

.dcc-treasure-box .treasure-notes {
    padding: 0.35rem;
    background: rgba(0, 0, 0, 0.03);
    border-top: 1px solid var(--ink-light);
    font-size: 0.7rem;
    flex: 1;
    min-height: 3rem;
}

.dcc-treasure-box .treasure-notes .stat-value {
    font-weight: normal;
    font-size: 0.7rem;
    display: block;
    width: 100%;
    min-height: 100%;
}

/* DCC Treasure Currency colors - matches DND */
.dcc-treasure-box .currency-item[data-stat="copper"] {
    background: rgba(205, 127, 50, 0.15);
    border: 2px solid #cd7f32;
}
.dcc-treasure-box .currency-item[data-stat="copper"] .currency-label {
    color: #a06830;
}

.dcc-treasure-box .currency-item[data-stat="silver"] {
    background: rgba(192, 192, 192, 0.2);
    border: 2px solid #a0a0a0;
}
.dcc-treasure-box .currency-item[data-stat="silver"] .currency-label {
    color: #777;
}

.dcc-treasure-box .currency-item[data-stat="gold"] {
    background: rgba(212, 175, 55, 0.15);
    border: 2px solid #d4af37;
}
.dcc-treasure-box .currency-item[data-stat="gold"] .currency-label {
    color: #a08830;
}

/* DCC Notes Row */
.dcc-notes-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 600px) {
    .dcc-notes-row {
        grid-template-columns: 1fr;
    }
}

.dcc-notes-box .text-content {
    min-height: 3rem;
    white-space: pre-wrap;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: normal;
}

/* DCC Attacks Row - Attacks table full width */
.dcc-attacks-row {
    margin-bottom: 1rem;
}

/* DCC Attacks Box */
.dcc-attacks-box {
    background: var(--parchment);
    border: 2px solid var(--ink);
    padding: 0.5rem;
}

/* DCC Birth Augur Box (now in right column under saves) */
.dcc-birthaugur-box {
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
}

.dcc-birthaugur-box h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.15rem;
    margin-bottom: 0.35rem;
}

.dcc-birthaugur-box .birthaugur-content {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dcc-birthaugur-box .birthaugur-field {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.dcc-birthaugur-box .birthaugur-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ink-light);
    text-align: center;
}

.dcc-birthaugur-box .birthaugur-field .stat-value {
    font-size: 0.65rem;
    line-height: 1.3;
    min-height: 1.2em;
    text-align: center;
}

.dcc-birthaugur-box .birthaugur-effect .stat-value {
    font-weight: normal;
}

/* DCC Abilities Box (large text area) */
.dcc-abilities-box {
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dcc-abilities-box h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.25rem;
    margin-bottom: 0.35rem;
}

.dcc-abilities-box .abilities-text {
    font-size: 0.65rem;
    line-height: 1.4;
    flex: 1;
    min-height: 4rem;
    white-space: pre-wrap;
    overflow-y: auto;
    font-weight: normal;
    text-align: left;
}

.edit-mode .dcc-abilities-box .abilities-text {
    cursor: text;
    outline: none;
}

.edit-mode .dcc-abilities-box .abilities-text:focus {
    background: rgba(0, 0, 0, 0.02);
}

/* DCC Speed with suffix */
.stat-value-with-suffix {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.stat-value-with-suffix .stat-value {
    flex: 1;
}

.stat-value-with-suffix .stat-suffix {
    font-size: 0.65rem;
    color: var(--ink-light);
    font-weight: 600;
    user-select: none;
}

/* DCC Equipment Labels - align colons with Weapons (longest label) */
.dcc-equipment-box .item-label {
    display: inline-block;
    width: 4rem;
    text-align: right;
    font-weight: 600;
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* Make equipment value fields expand to fill available space */
.dcc-equipment-box .text-item {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}

.dcc-equipment-box .text-item .stat-value {
    flex: 1;
    font-weight: normal;
}

/* DCC Arcane Magic Layout (Patron 70%, Corruption 30%) */
.dcc-arcane-two-boxes {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 0.5rem;
}

/* DCC Two-Box Layout (legacy) */
.dcc-magic-two-boxes {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 0.5rem;
}

/* DCC Divine Layout (Deity, Disapproval, Cleric Powers) */
.dcc-divine-layout {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 0.5rem;
}

.dcc-divine-left-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dcc-divine-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.dcc-divine-right-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* DCC Patron Box (70% width with stacked content) */
.dcc-patron-box {
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

.dcc-patron-box .patron-header {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    border-bottom: 2px solid var(--ink-light);
    padding-bottom: 0.25rem;
}

.dcc-patron-box .patron-name-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.dcc-patron-box .patron-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--ink-light);
    white-space: nowrap;
}

.dcc-patron-box .patron-name-row .stat-value {
    flex: 1;
    font-size: 0.75rem;
    font-weight: 600;
}

.dcc-patron-box .patron-bond-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dcc-patron-box .bond-subheader {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-light);
    margin-bottom: 0.25rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid var(--ink-light);
}

.dcc-patron-box .bond-text {
    flex: 1;
    font-size: 0.75rem !important;
    line-height: 1.2;
    text-align: left;
}

.dcc-patron-box .bond-text .stat-value {
    display: block;
    width: 100%;
    min-height: 2rem;
    font-weight: normal;
    font-size: 0.75rem !important;
    white-space: pre-wrap;
    text-align: left;
}

.edit-mode .dcc-patron-box .bond-text .stat-value {
    cursor: text;
    outline: none;
}

.edit-mode .dcc-patron-box .bond-text .stat-value:focus {
    background: rgba(0, 0, 0, 0.02);
}

/* DCC Corruption Box (30% width, matches Patron height) */
.dcc-arcane-two-boxes .dcc-corruption-box {
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

.dcc-arcane-two-boxes .dcc-corruption-box .corruption-header {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    border-bottom: 2px solid var(--ink-light);
    padding-bottom: 0.25rem;
}

.dcc-arcane-two-boxes .dcc-corruption-box .corruption-text {
    flex: 1;
    font-size: 0.75rem !important;
    line-height: 1.2;
    text-align: left;
}

.dcc-arcane-two-boxes .dcc-corruption-box .corruption-text .stat-value {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 3rem;
    font-weight: normal;
    font-size: 0.75rem !important;
    white-space: pre-wrap;
    text-align: left;
}

.edit-mode .dcc-arcane-two-boxes .dcc-corruption-box .corruption-text .stat-value {
    cursor: text;
    outline: none;
}

.edit-mode .dcc-arcane-two-boxes .dcc-corruption-box .corruption-text .stat-value:focus {
    background: rgba(0, 0, 0, 0.02);
}

/* DCC Spells Header Stats (horizontal layout) */
.dcc-spells-header-stats {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}

.dcc-spells-header-stats .header-stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.35rem;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--ink-light);
}

.dcc-spells-header-stats .header-stat-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink-light);
}

.dcc-spells-header-stats .header-stat .stat-value {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ink);
    min-width: 1rem;
    text-align: center;
}

/* Mobile: Center DCC spells header stats */
@media (max-width: 768px) {
    .dcc-spells-header {
        flex-direction: column;
        gap: 0.35rem;
        text-align: center;
    }
    
    .dcc-spells-header-stats {
        margin-left: 0;
        justify-content: center;
    }
}

/* Spell Add button column (flush right) */
.spell-add-col {
    width: 40px;
    text-align: right;
    padding-right: 0.25rem !important;
}

.spell-add-col .add-spell-btn {
    font-size: 0.65rem;
    padding: 0.1rem 0.3rem;
    background: var(--ink);
    color: var(--parchment);
    border: none;
    cursor: pointer;
    display: none;
}

.edit-mode .spell-add-col .add-spell-btn {
    display: inline-block;
}

/* DCC Deity Box (Divine Magic) */
.dcc-deity-box {
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
}

.dcc-deity-box .deity-header {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.25rem;
}

.dcc-deity-box .deity-name-field {
    display: block;
}

.dcc-deity-box .deity-name-field .stat-value {
    font-size: 0.75rem;
    font-weight: 600;
    display: block;
}

/* DCC Disapproval Box (separate box for Divine) */
.dcc-disapproval-box {
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
}

.dcc-disapproval-box .disapproval-header {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.25rem;
}

.dcc-disapproval-box .disapproval-grid-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dcc-disapproval-box .disapproval-prefix {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink);
}

.dcc-disapproval-box .disapproval-value {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink);
    min-width: 1.2rem;
    text-align: center;
    border: 1px solid var(--ink-light);
    padding: 0.1rem 0.2rem;
    background: var(--parchment);
}

.dcc-disapproval-box .disapproval-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 1px;
    flex: 1;
}

.dcc-disapproval-box .disapproval-box {
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    transition: background 0.1s ease;
    cursor: default;
}

.dcc-disapproval-box .disapproval-box.filled {
    background: var(--ink);
}

.edit-mode .dcc-disapproval-box .disapproval-box {
    cursor: pointer;
}

.dcc-disapproval-box .disapproval-controls {
    display: none;
    flex-direction: column;
    gap: 0.1rem;
}

.edit-mode .dcc-disapproval-box .disapproval-controls {
    display: flex;
}

.dcc-disapproval-box .disapproval-btn {
    width: 1rem;
    height: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

/* Disapproval Section (legacy, inside deity box) */
.dcc-deity-box .disapproval-section {
    margin-top: 0.35rem;
}

.dcc-deity-box .disapproval-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-light);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dcc-deity-box .disapproval-help {
    font-size: 0.5rem;
    background: var(--ink-light);
    color: var(--parchment);
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}

.dcc-deity-box .disapproval-grid-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.dcc-deity-box .disapproval-value {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink);
    min-width: 2.5rem;
    text-align: center;
    white-space: nowrap;
}

.dcc-deity-box .disapproval-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
}

.dcc-deity-box .disapproval-box {
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    transition: background 0.1s ease;
    cursor: default;
}

.dcc-deity-box .disapproval-box.filled {
    background: var(--ink);
}

.edit-mode .dcc-deity-box .disapproval-box {
    cursor: pointer;
}

/* Hide disapproval controls when not in edit mode */
.dcc-deity-box .disapproval-controls {
    display: none;
    flex-direction: column;
    gap: 0.1rem;
}

.edit-mode .dcc-deity-box .disapproval-controls {
    display: flex;
}

.dcc-deity-box .disapproval-btn {
    width: 1rem;
    height: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

/* DCC Cleric Powers Box */
.dcc-cleric-powers-box {
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
}

.dcc-cleric-powers-box .cleric-powers-header {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.25rem;
}

/* Cleric Power Row (Turn Unholy, Divine Favor) */
.dcc-cleric-powers-box .cleric-power-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
    padding: 0.15rem;
    background: rgba(0, 0, 0, 0.02);
}

.dcc-cleric-powers-box .power-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-light);
    flex: 1;
}

.dcc-cleric-powers-box .power-die {
    font-size: 0.65rem;
    font-weight: 700;
    border: 1px solid var(--ink-light);
    padding: 0.1rem 0.25rem;
    background: var(--parchment);
    min-width: 1.8rem;
    text-align: center;
}

/* Lay on Hands Section */
.dcc-cleric-powers-box .lay-on-hands-section {
    margin-top: 0.35rem;
}

.dcc-cleric-powers-box .loh-title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: var(--ink);
}

.dcc-cleric-powers-box .loh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.65rem;
}

.dcc-cleric-powers-box .loh-table th {
    font-weight: 600;
    text-align: center;
    padding: 0.15rem 0.1rem;
    border-bottom: 1px solid var(--ink-light);
    font-size: 0.5rem;
    color: var(--ink-light);
}

.dcc-cleric-powers-box .loh-table th:first-child {
    text-align: left;
}

.dcc-cleric-powers-box .loh-table td {
    padding: 0.15rem 0.1rem;
    text-align: center;
    font-size: 0.65rem;
}

.dcc-cleric-powers-box .loh-table .loh-alignment {
    text-align: left;
    font-weight: 500;
    color: var(--ink-light);
    white-space: nowrap;
}

.dcc-cleric-powers-box .loh-table .loh-alignment-value {
    font-weight: 600;
    color: var(--ink);
    min-width: 2rem;
    display: inline-block;
}

.dcc-cleric-powers-box .loh-table .loh-dice {
    font-weight: 700;
    color: var(--ink);
    min-width: 0.8rem;
    display: inline-block;
    text-align: right;
}

/* DCC Lay on Hands Box - Table Layout */
.dcc-lay-on-hands-box {
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    padding: 0.35rem;
    flex: 1;
}

.dcc-lay-on-hands-box .loh-header {
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.2rem;
}

.dcc-lay-on-hands-box .loh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.65rem;
}

.dcc-lay-on-hands-box .loh-table th,
.dcc-lay-on-hands-box .loh-table td {
    border: 1px solid var(--ink-light);
    padding: 0.1rem 0.15rem;
}

.dcc-lay-on-hands-box .loh-table th {
    font-weight: 600;
    font-size: 0.65rem;
    color: var(--ink-light);
    text-align: center;
    background: rgba(0, 0, 0, 0.02);
}

.dcc-lay-on-hands-box .loh-table th:first-child {
    text-align: left;
    width: 35%;
}

.dcc-lay-on-hands-box .loh-table .loh-align-cell {
    text-align: left;
}

.dcc-lay-on-hands-box .loh-table .loh-align-label {
    font-weight: 600;
    font-size: 0.5rem;
    color: var(--ink-light);
    display: inline-block;
    min-width: 3rem;
}

.dcc-lay-on-hands-box .loh-table .loh-align-cell .stat-value {
    font-weight: normal;
    color: var(--ink);
    display: inline-block;
    width: calc(100% - 3.2rem);
    line-height: 1.1;
    font-size: 0.65rem;
    vertical-align: middle;
    text-align: left;
}

.edit-mode .dcc-lay-on-hands-box .loh-table .loh-align-cell .stat-value {
    cursor: text;
    min-width: 2rem;
    outline: none;
}

.edit-mode .dcc-lay-on-hands-box .loh-table .loh-align-cell .stat-value:focus {
    background: rgba(0, 0, 0, 0.05);
}

.dcc-lay-on-hands-box .loh-table .loh-dice-cell {
    text-align: center;
    width: 2.8rem;
    vertical-align: middle;
}

.dcc-lay-on-hands-box .loh-table .loh-dice-cell .stat-value {
    font-weight: 700;
    color: var(--ink);
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    font-size: 0.65rem;
    vertical-align: middle;
    padding: 0;
    margin: 0;
}

.edit-mode .dcc-lay-on-hands-box .loh-table .loh-dice-cell .stat-value {
    min-width: 1.1rem;
    width: auto;
    padding: 0 0.1rem;
}

/* Atonement / Blessings Box */
.dcc-atonement-box {
    background: var(--parchment-light);
    border: 1px solid var(--ink-light);
    padding: 0.35rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dcc-atonement-box .atonement-header {
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.2rem;
}

.dcc-atonement-box .atonement-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dcc-atonement-box .atonement-content .stat-value {
    font-size: 0.7rem;
    display: block;
    flex: 1;
    min-height: 3rem;
    white-space: pre-wrap;
    line-height: 1.3;
    overflow-y: auto;
    font-weight: normal;
    text-align: left;
}

.edit-mode .dcc-atonement-box .atonement-content .stat-value {
    cursor: text;
    outline: none;
}

.edit-mode .dcc-atonement-box .atonement-content .stat-value:focus {
    background: rgba(0, 0, 0, 0.02);
}

.dcc-attacks-box h4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
}

.dcc-attacks-box h4 span {
    flex: 1;
}

.dcc-attacks-box .add-attack-btn {
    font-size: 0.65rem;
    padding: 0.1rem 0.3rem;
    background: var(--ink);
    color: var(--parchment);
    border: none;
    cursor: pointer;
    display: none;
    margin-left: auto;
}

.edit-mode .dcc-attacks-box .add-attack-btn {
    display: inline-flex;
}

.dcc-attacks-box .attacks-table {
    width: 100%;
    font-size: 0.65rem;
    border-collapse: collapse;
    table-layout: fixed;
}

.dcc-attacks-box .attacks-table th {
    text-align: center;
    font-weight: 600;
    padding: 0.15rem 0.25rem;
    border-bottom: 1px solid var(--ink-light);
    font-size: 0.7rem;
}

/* Center td content to match headers */
.dcc-attacks-box .attacks-table td {
    text-align: center;
    padding: 0.15rem 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Column widths for attacks table */
.dcc-attacks-box .attacks-table th:first-child { /* Weapon */
    width: 30%;
}

.dcc-attacks-box .attacks-table th:nth-child(2) { /* Attack */
    width: 15%;
}

.dcc-attacks-box .attacks-table th:nth-child(3) { /* Damage */
    width: 15%;
}

.dcc-attacks-box .attacks-table th:nth-child(4) { /* Crit */
    width: 12%;
}

.dcc-attacks-box .attacks-table th:nth-child(5) { /* Range */
    width: 12%;
}

.dcc-attacks-box .attacks-table .stat-value {
    font-size: 0.65rem;
    display: block;
    width: 100%;
}

/* Mobile responsiveness for DCC */
@media (max-width: 600px) {
    .dcc-identity-row .stat-item {
        min-width: 60px;
    }
    
    .dcc-combat-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dcc-dice-row {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .dcc-wizard-grid,
    .dcc-cleric-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* DCC Attacks - card layout on mobile */
    .dcc-attacks-box .attacks-table {
        display: block;
    }
    
    .dcc-attacks-box .attacks-table thead {
        display: none;
    }
    
    .dcc-attacks-box .attacks-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .dcc-attacks-box .attacks-table tr {
        display: flex;
        flex-direction: column;
        background: var(--parchment);
        border: 1px solid var(--ink-light);
        padding: 0.4rem;
        gap: 0.15rem;
        position: relative;
    }
    
    .dcc-attacks-box .attacks-table td {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.1rem 0;
        border: none;
        font-size: 0.7rem;
    }
    
    .dcc-attacks-box .attacks-table td::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.7rem;
        min-width: 4em;
        color: var(--ink-light);
    }
    
    /* Remove button on its own row at bottom of card */
    .dcc-attacks-box .attacks-table td.attack-remove-col {
        display: flex;
        justify-content: flex-end;
        border-top: 1px dashed var(--ink-light);
        padding-top: 0.25rem;
        margin-top: 0.15rem;
    }
    
    .dcc-attacks-box .attacks-table td.attack-remove-col::before {
        display: none;
    }
    
    /* Arcane magic: Patron Bond and Corruption stacked vertically */
    .dcc-arcane-two-boxes {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .dcc-arcane-two-boxes .dcc-patron-box,
    .dcc-arcane-two-boxes .dcc-corruption-box {
        width: 100% !important;
    }
    
    /* Divine magic layout: full stack on mobile */
    .dcc-divine-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .dcc-divine-left-col,
    .dcc-divine-right-col {
        width: 100% !important;
    }
    
    .dcc-divine-top-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .dcc-divine-top-row .dcc-deity-box,
    .dcc-divine-top-row .dcc-disapproval-box {
        width: 100% !important;
    }
    
    /* Lay on Hands - restructured layout on mobile */
    .dcc-lay-on-hands-box {
        overflow-x: visible;
    }
    
    .dcc-lay-on-hands-box .loh-table {
        display: block;
        font-size: 0.65rem;
        min-width: 0;
    }
    
    .dcc-lay-on-hands-box .loh-table thead {
        display: none;
    }
    
    .dcc-lay-on-hands-box .loh-table tbody {
        display: block;
    }
    
    /* Each row is a card */
    .dcc-lay-on-hands-box .loh-table tr {
        display: block;
        background: var(--parchment);
        border: 1px solid var(--ink-light);
        padding: 0.4rem;
        margin-bottom: 0.4rem;
    }
    
    .dcc-lay-on-hands-box .loh-table tr:last-child {
        margin-bottom: 0;
    }
    
    .dcc-lay-on-hands-box .loh-table td {
        display: block;
        padding: 0;
        border: none;
    }
    
    /* Alignment row at top */
    .dcc-lay-on-hands-box .loh-table .loh-align-cell {
        font-weight: bold;
        font-size: 0.7rem;
        margin-bottom: 0.35rem;
        padding-bottom: 0.25rem;
        border-bottom: 1px dashed var(--ink-light);
    }
    
    .dcc-lay-on-hands-box .loh-table .loh-align-cell .stat-value {
        font-weight: normal;
    }
    
    /* Dice cells in 4-column grid */
    .dcc-lay-on-hands-box .loh-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 0.25rem;
    }
    
    .dcc-lay-on-hands-box .loh-table .loh-align-cell {
        grid-column: 1 / -1;
    }
    
    .dcc-lay-on-hands-box .loh-table .loh-dice-cell {
        text-align: center;
        background: var(--parchment-light);
        border: 1px solid var(--ink-light);
        padding: 0.3rem 0.15rem;
        border-radius: 2px;
    }
    
    .dcc-lay-on-hands-box .loh-table .loh-dice-cell::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.65rem;
        display: block;
        color: var(--ink-light);
        margin-bottom: 0.1rem;
    }
    
    .dcc-lay-on-hands-box .loh-table .loh-dice-cell .stat-value {
        font-size: 0.8rem;
        font-weight: bold;
    }
    
    /* Cleric powers stacked */
    .dcc-cleric-powers-box,
    .dcc-atonement-box {
        width: 100%;
    }
    
    /* Spell level tabs become dropdown on mobile */
    .dcc-spell-level-tabs {
        display: none;
    }
    
    .dcc-spell-level-dropdown {
        display: block;
        width: 100%;
        padding: 0.4rem;
        font-size: 0.75rem;
        border: 1px solid var(--ink-light);
        background: var(--parchment);
        margin-bottom: 0.5rem;
    }
    
    /* Spells tables - card layout on mobile */
    .spells-table {
        display: block;
    }
    
    /* Hide header row labels but keep add button visible */
    .spells-table thead {
        display: block;
    }
    
    .spells-table thead tr {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 0.5rem;
    }
    
    .spells-table thead th {
        display: none;
    }
    
    .spells-table thead th.spell-add-col {
        display: block;
    }
    
    .spells-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .spells-table tr.spell-row {
        display: flex;
        flex-direction: column;
        background: var(--parchment);
        border: 1px solid var(--ink-light);
        padding: 0.4rem;
        gap: 0.15rem;
    }
    
    .spells-table tr.spell-placeholder {
        display: block;
        text-align: center;
        padding: 0.5rem;
        background: var(--parchment);
        border: 1px dashed var(--ink-light);
    }
    
    .spells-table td {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.1rem 0;
        border: none;
        font-size: 0.7rem;
    }
    
    .spells-table td::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.7rem;
        min-width: 5em;
        color: var(--ink-light);
    }
    
    /* Left-align spell name and notes content */
    .spells-table td[data-label="Name:"] .stat-value,
    .spells-table td[data-label="Notes:"] .stat-value {
        text-align: left;
        flex: 1;
    }
    
    /* Sinful cell goes to bottom of card */
    .spells-table td.sinful-cell {
        order: 99;
        flex-direction: row;
        border-top: 1px dashed var(--ink-light);
        padding-top: 0.25rem;
        margin-top: 0.15rem;
    }
    
    /* Remove button on its own row at bottom of card */
    .spells-table td.spell-remove-col {
        display: flex;
        justify-content: flex-end;
        order: 100;
        border-top: 1px dashed var(--ink-light);
        padding-top: 0.25rem;
        margin-top: 0.15rem;
    }
    
    /* Fix double border when both sinful and remove are present */
    .spells-table td.sinful-cell + td.spell-remove-col {
        border-top: none;
        margin-top: 0;
    }
    
    .spells-table td.spell-remove-col::before,
    .spells-table td.spell-add-col::before,
    .spells-table td.no-spells::before {
        display: none;
    }
}

/* RMMZ style - vitals left, combat stats right */
.rmmz-stats .rmmz-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 500px) {
    .rmmz-stats .rmmz-layout {
        grid-template-columns: 1fr;
    }
    
    .rmmz-stats .rmmz-resources {
        grid-template-columns: 1fr;
    }
    
    .rmmz-stats .rmmz-hp-box,
    .rmmz-stats .rmmz-mp-box,
    .rmmz-stats .rmmz-tp-box {
        padding: 0.4rem 0.75rem;
    }
    
    .rmmz-stats .rmmz-combat-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .rmmz-stats .rmmz-ex-params {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rmmz-stats .rmmz-vitals {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 110px;
}

/* Level box - inline label + value */
.rmmz-stats .rmmz-level-box {
    background: var(--parchment);
    border: 1px solid var(--ink);
    padding: 0.35rem 1rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
}

.rmmz-stats .rmmz-level-box .stat-value {
    font-size: 0.9rem;
    font-weight: bold;
}

.rmmz-stats .stat-label-inline {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--ink-light);
}

.rmmz-stats .rmmz-secondary {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rmmz-stats .rmmz-resources {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.rmmz-stats .rmmz-hp-box,
.rmmz-stats .rmmz-mp-box,
.rmmz-stats .rmmz-tp-box {
    background: var(--parchment);
    border: 2px solid var(--ink);
    padding: 0.5rem 1rem;
    text-align: center;
}

.rmmz-stats .rmmz-hp-box .stat-label,
.rmmz-stats .rmmz-mp-box .stat-label,
.rmmz-stats .rmmz-tp-box .stat-label {
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 0.15rem;
}

.rmmz-stats .rmmz-hp-box .stat-value,
.rmmz-stats .rmmz-mp-box .stat-value,
.rmmz-stats .rmmz-tp-box .stat-value {
    font-size: 1.1rem;
}

.rmmz-stats .rmmz-hp-box .stat-value-pair,
.rmmz-stats .rmmz-mp-box .stat-value-pair,
.rmmz-stats .rmmz-tp-box .stat-value-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.rmmz-stats .rmmz-hp-box .stat-separator,
.rmmz-stats .rmmz-mp-box .stat-separator,
.rmmz-stats .rmmz-tp-box .stat-separator {
    color: var(--ink-light);
    font-weight: normal;
}

/* Class and XP boxes - title over value style */
.rmmz-stats .rmmz-class-box,
.rmmz-stats .rmmz-xp-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0.6rem;
    background: var(--parchment);
    border: 1px solid var(--ink-light);
}

.rmmz-stats .rmmz-class-box .stat-label,
.rmmz-stats .rmmz-xp-box .stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 0.15rem;
}

.rmmz-stats .rmmz-class-box .stat-value,
.rmmz-stats .rmmz-xp-box .stat-value {
    font-size: 0.9rem;
    font-weight: bold;
}

.rmmz-stats .rmmz-combat-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (max-width: 500px) {
    .rmmz-stats .rmmz-combat-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

.rmmz-stats .rmmz-combat-stats .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.5rem;
    background: var(--parchment);
    border: 1px solid var(--ink-light);
}

.rmmz-stats .rmmz-combat-stats .stat-label {
    font-size: 0.7rem;
    margin-bottom: 0;
}

.rmmz-stats .rmmz-combat-stats .stat-value {
    font-size: 1rem;
}

/* Ex-Parameters (Hit, Eva, Crit) */
.rmmz-stats .rmmz-ex-params {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.rmmz-stats .rmmz-ex-params .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.4rem;
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    font-size: 0.8rem;
}

.rmmz-stats .rmmz-ex-params .stat-label {
    font-size: 0.65rem;
    margin-bottom: 0;
    color: var(--ink-light);
}

.rmmz-stats .rmmz-ex-params .stat-value {
    font-size: 0.85rem;
}

/* Reverie style - Octant colors */
:root {
    --octant-adaptive: rgb(100, 255, 200);
    --octant-adaptive-dark: rgb(45, 140, 100);
    --octant-chaotic: rgb(100, 200, 255);
    --octant-chaotic-dark: rgb(45, 110, 150);
    --octant-intended: rgb(255, 100, 150);
    --octant-intended-dark: rgb(160, 50, 90);
    --octant-prepared: rgb(255, 180, 100);
    --octant-prepared-dark: rgb(150, 100, 50);
    --octant-contented: rgb(255, 150, 255);
    --octant-contented-dark: rgb(141, 87, 141);
    --octant-assertive: rgb(150, 150, 255);
    --octant-assertive-dark: rgb(80, 80, 150);
    --octant-ordered: rgb(255, 255, 100);
    --octant-ordered-dark: rgb(140, 140, 50);
    --octant-guarded: rgb(169, 85, 214);
    --octant-guarded-dark: rgb(100, 50, 130);
    --octant-equilibrium: rgb(200, 200, 200);
    --octant-equilibrium-dark: rgb(100, 100, 100);
    
    /* Axis colors from origin card system */
    --axis-oblivion: rgb(150, 120, 180);
    --axis-entropy: rgb(255, 120, 80);
    --axis-authority: rgb(200, 60, 60);
    --axis-liberty: rgb(80, 180, 255);
    --axis-skeptic: rgb(255, 200, 80);
    --axis-receptive: rgb(120, 220, 160);
}

.reverie-stats .octant-container {
    margin-bottom: 1rem;
}

.reverie-stats .octant-display {
    font-size: 1.1rem;
    text-align: center;
    padding: 0.6rem 1rem;
    font-weight: bold;
    border: 2px solid;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.reverie-stats .octant-value {
    display: inline-block;
    min-width: 3em;
}

.reverie-stats .octant-value.editable {
    background: rgba(255, 255, 255, 0.5);
    outline: 1px dashed var(--ink-light);
    padding: 0.1em 0.3em;
}

/* Octant display - colored backgrounds with dark text */
.reverie-stats .octant-display[data-octant="adaptive"] {
    background: rgba(100, 255, 200, 0.25);
    color: #1a3a2d;
    border-color: var(--octant-adaptive-dark);
}

.reverie-stats .octant-display[data-octant="chaotic"] {
    background: rgba(100, 200, 255, 0.25);
    color: #1a2d3a;
    border-color: var(--octant-chaotic-dark);
}

.reverie-stats .octant-display[data-octant="intended"] {
    background: rgba(255, 100, 150, 0.25);
    color: #3a1a22;
    border-color: var(--octant-intended-dark);
}

.reverie-stats .octant-display[data-octant="prepared"] {
    background: rgba(255, 180, 100, 0.25);
    color: #3a2a1a;
    border-color: var(--octant-prepared-dark);
}

.reverie-stats .octant-display[data-octant="contented"] {
    background: rgba(255, 150, 255, 0.25);
    color: #3a1a3a;
    border-color: var(--octant-contented-dark);
}

.reverie-stats .octant-display[data-octant="assertive"] {
    background: rgba(150, 150, 255, 0.25);
    color: #1a1a3a;
    border-color: var(--octant-assertive-dark);
}

.reverie-stats .octant-display[data-octant="ordered"] {
    background: rgba(255, 255, 100, 0.25);
    color: #3a3a1a;
    border-color: var(--octant-ordered-dark);
}

.reverie-stats .octant-display[data-octant="guarded"] {
    background: rgba(169, 85, 214, 0.25);
    color: #2a1a32;
    border-color: var(--octant-guarded-dark);
}

.reverie-stats .octant-display[data-octant="equilibrium"] {
    background: rgba(200, 200, 200, 0.25);
    color: #2a2a2a;
    border-color: var(--octant-equilibrium-dark);
}

/* New octant values from lexicon */
.reverie-stats .octant-display[data-octant="seeker"] {
    background: rgba(80, 180, 255, 0.25);
    color: #1a2a3a;
    border-color: #3a90c0;
}

.reverie-stats .octant-display[data-octant="wanderer"] {
    background: rgba(255, 200, 100, 0.25);
    color: #3a2a15;
    border-color: #c09040;
}

.reverie-stats .octant-display[data-octant="keeper"] {
    background: rgba(100, 200, 100, 0.25);
    color: #1a3a1a;
    border-color: #40a040;
}

.reverie-stats .octant-display[data-octant="sovereign"] {
    background: rgba(220, 160, 80, 0.25);
    color: #3a2815;
    border-color: #b08030;
}

.reverie-stats .octant-display[data-octant="herald"] {
    background: rgba(255, 130, 130, 0.25);
    color: #3a1a1a;
    border-color: #c05050;
}

.reverie-stats .octant-display[data-octant="dreamer"] {
    background: rgba(180, 140, 255, 0.25);
    color: #251a3a;
    border-color: #8050c0;
}

.reverie-stats .octant-display[data-octant="watcher"] {
    background: rgba(120, 180, 180, 0.25);
    color: #1a2a2a;
    border-color: #508080;
}

.reverie-stats .spectrum-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (max-width: 400px) {
    .reverie-stats .spectrum-grid {
        grid-template-columns: 1fr;
    }
}

.spectrum-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
}

/* Axis-colored spectrum items - left border accent + light tinted background */
.spectrum-item[data-axis="oblivion"] {
    border-left: 3px solid var(--axis-oblivion);
    background: rgba(150, 120, 180, 0.1);
}
.spectrum-item[data-axis="entropy"] {
    border-left: 3px solid var(--axis-entropy);
    background: rgba(255, 120, 80, 0.1);
}
.spectrum-item[data-axis="authority"] {
    border-left: 3px solid var(--axis-authority);
    background: rgba(200, 60, 60, 0.1);
}
.spectrum-item[data-axis="liberty"] {
    border-left: 3px solid var(--axis-liberty);
    background: rgba(80, 180, 255, 0.1);
}
.spectrum-item[data-axis="skeptic"] {
    border-left: 3px solid var(--axis-skeptic);
    background: rgba(255, 200, 80, 0.1);
}
.spectrum-item[data-axis="receptive"] {
    border-left: 3px solid var(--axis-receptive);
    background: rgba(120, 220, 160, 0.1);
}

.spectrum-label {
    font-size: 0.9rem;
    font-weight: bold;
}

.spectrum-value {
    font-size: 1.1rem;
}

/* =========================================================================
   PLAYTOPIA QUEST
   ========================================================================= */

:root {
    --pq-heart:       #e84060;
    --pq-heart-empty: #ccc;
    --pq-friend:      #2e9e5a;
    --pq-enemy:       #cc3838;
}

/* ── Overall container ── */
.playtopia-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Section cards ── */
.pq-section {
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.6rem;
}

.pq-section-header {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-light);
    margin-bottom: 0.45rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.pq-field-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.55;
    margin-bottom: 0.15rem;
}

/* ── Identity: Level | Class | Alignment — coloured by fave colour ── */
.pq-section--identity {
    border-width: 2px;
}

.pq-identity-row {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 0.65rem;
}

.pq-level-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.2rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    gap: 0.1rem;
}

.pq-level-value {
    font-size: 1.6rem;
    font-weight: 800;
    min-width: 2.2em;
    text-align: center;
    line-height: 1.1;
}

.pq-class-badge,
.pq-alignment-badge {
    text-align: center;
    padding: 0.55rem 0.65rem 0.5rem;
    border: 2px solid;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.pq-class-badge .stat-value,
.pq-alignment-badge .stat-value {
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Class colour variants */
.pq-class-badge[data-class="artist"]  { background: rgba(255,130,180,0.18); border-color: #d45d8a; color: #8a2e55; }
.pq-class-badge[data-class="coder"]   { background: rgba(100,210,255,0.18); border-color: #3a9fcc; color: #1c5f80; }
.pq-class-badge[data-class="gamer"]   { background: rgba(130,255,140,0.18); border-color: #40b84a; color: #1f6e26; }
.pq-class-badge[data-class="suit"]    { background: rgba(80,80,80,0.18); border-color: #444; color: #222; }
.pq-class-badge[data-class="weirdo"]  { background: rgba(200,140,255,0.18); border-color: #8a50cc; color: #4e2080; }

/* Alignment colour variants */
.pq-alignment-badge[data-alignment="ordered"] { background: rgba(100,180,255,0.15); border-color: #4a90cc; color: #1c4a6e; }
.pq-alignment-badge[data-alignment="neutral"] { background: rgba(230,200,50,0.15); border-color: #b89e20; color: #5c4f10; }
.pq-alignment-badge[data-alignment="chaotic"] { background: rgba(255,120,100,0.15); border-color: #cc5040; color: #6e2218; }

/* Dropdowns in edit mode */
.pq-class-select,
.pq-alignment-select {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    background: rgba(255,255,255,0.55);
    border: 1px solid currentColor;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    color: var(--ink);
    width: 100%;
}

/* ── Vitals: Health + Catchphrase ── */
.pq-section--vitals {
    border-left: 3px solid var(--ink-light);
}

.pq-vitals-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: stretch;
}

.pq-health-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.2rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    gap: 0.1rem;
}

.pq-catchphrase-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--ink-light);
    background: rgba(255,255,255,0.35);
    gap: 0.1rem;
}

.pq-catchphrase-value {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--ink);
    display: block;
    min-height: 1.3em;
    text-align: center;
}

/* Hearts */
.pq-hearts {
    display: flex;
    gap: 0.4rem;
    font-size: 1.6rem;
    line-height: 1;
}

.pq-heart {
    transition: transform 0.12s ease, color 0.12s ease;
}

.pq-heart--full  { color: var(--pq-heart); }
.pq-heart--empty { color: var(--pq-heart-empty); }

/* ── Social: friend + enemy in a row ── */
.pq-social-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 0.6rem;
}

.pq-social-item {
    display: flex;
    flex-direction: column;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--ink-light);
    background: rgba(255,255,255,0.35);
    gap: 0.1rem;
}

.pq-social--friend {
    border-left: 3px solid var(--pq-friend);
}
.pq-social--enemy {
    border-left: 3px solid var(--pq-enemy);
}

.pq-social-value {
    font-size: 0.9rem;
    font-weight: 600;
    word-break: break-all;
    min-height: 1.2em;
}

.pq-social--friend .pq-social-value { color: var(--pq-friend); }
.pq-social--enemy  .pq-social-value { color: var(--pq-enemy);  }

/* Social body: handle text below avatar card */
.pq-social-body {
    display: flex;
    flex-direction: column;
}

/* Avatar card: avatar + displayName, above the handle */
.pq-social-avatar-card {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0;
    text-decoration: none;
    color: var(--ink);
    transition: opacity 0.15s;
}
.pq-social-avatar-card:hover {
    opacity: 0.75;
}

.pq-social-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--ink-light);
    flex-shrink: 0;
}

.pq-social-avatar--placeholder {
    background: var(--ink-light);
    opacity: 0.3;
}

.pq-social-displayname {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Handle validation indicator */
.pq-handle-indicator {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 0.2rem;
    transition: color 0.15s;
}
.pq-handle--hint     { color: var(--ink-light); opacity: 0.6; }
.pq-handle--checking { color: var(--ink-light); }
.pq-handle--valid    { color: var(--pq-friend); }
.pq-handle--invalid  { color: var(--pq-enemy); }

/* ── Bottom row: Traits + Fave Colour side by side ── */
.pq-bottom-row {
    display: flex;
    gap: 0.65rem;
    align-items: stretch;
}

/* ── Personal Traits — each trait gets its own colour via inline CSS vars ── */
.pq-section--traits {
    border-left: 3px solid var(--ink-light);
    flex: 1;
    min-width: 0;
}

.pq-traits-badges {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.pq-trait {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.22rem 0.65rem;
    border: 1.5px solid;
    letter-spacing: 0.03em;
    transition: all 0.15s ease;
    user-select: none;
}

.pq-trait--on {
    background: var(--pq-tc-bg, rgba(138,80,204,0.22));
    border-color: var(--pq-tc-border, #8a50cc);
    color: var(--pq-tc-text, #4e2080);
}

.pq-trait--off {
    background: transparent;
    border-color: var(--ink-light);
    color: var(--ink-light);
    opacity: 0.45;
}

.pq-trait.editable {
    cursor: pointer;
}
.pq-trait.editable:hover {
    opacity: 1;
    transform: scale(1.08);
}

/* ── Fave Colour — centered picker ── */
.pq-section--colour {
    border-left: 3px solid var(--ink-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 220px;
}

.pq-section--colour .pq-section-header {
    align-self: stretch;
}

.pq-colour-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.pq-colour-swatch {
    width: 4rem;
    height: 4rem;
    border: 2px solid var(--ink-light);
    border-radius: 0.4rem;
    flex-shrink: 0;
}

.pq-colour-hex {
    font-size: 0.82rem;
    font-family: monospace;
    font-weight: 600;
    opacity: 0.75;
}

/* ── HSV Colour Picker (edit mode) ── */
.pq-colour-picker-mount:empty {
    display: none;
}

.pq-cp-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 0.4rem;
    max-width: 200px;
    user-select: none;
    -webkit-user-select: none;
}

.pq-cp-sv {
    width: 100%;
    aspect-ratio: 1;
    cursor: crosshair;
    border: 1px solid var(--ink-light);
    display: block;
}

.pq-cp-hue {
    width: 100%;
    height: 18px;
    cursor: crosshair;
    border: 1px solid var(--ink-light);
    display: block;
}

.pq-cp-info {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.pq-cp-preview {
    width: 26px;
    height: 26px;
    border: 1px solid var(--ink-light);
    flex-shrink: 0;
}

.pq-cp-hex {
    width: 6.5em;
    padding: 0.25rem 0.4rem;
    font-family: monospace;
    font-size: 0.85rem;
    border: 1px solid var(--ink-light);
    background: rgba(255,255,255,0.5);
    color: var(--ink);
}
.pq-cp-hex:focus {
    outline: 1px solid var(--pq-fave, #8a50cc);
    border-color: var(--pq-fave, #8a50cc);
}

/* ── Responsive ── */
@media (max-width: 420px) {
    .pq-identity-row {
        grid-template-columns: 1fr;
    }
    .pq-vitals-row {
        grid-template-columns: 1fr;
    }
    .pq-social-row {
        grid-template-columns: 1fr;
    }
    .pq-bottom-row {
        flex-direction: column;
    }
    .pq-section--colour {
        width: auto;
    }
}

/* No data state */
.no-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;
    padding: 2rem;
    font-style: italic;
    color: var(--ink-light);
}

/* Master validation footer (base styling, often wrapped in stat-panel-footer) */
.master-footer {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem 0 0.5rem;
    border-top: 1px dashed var(--ink-light);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--ink);
}

.master-footer.master-none {
    color: var(--ink-light);
    font-style: italic;
}

.master-footer .master-link {
    color: var(--ink);
    text-decoration: none;
}

.master-footer .master-link:hover {
    text-decoration: underline;
    color: var(--gold);
}

/* Edit mode controls - inline with stat panel headers */
.edit-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.edit-btn,
.save-btn,
.cancel-btn {
    font-family: inherit;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--ink);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.edit-btn {
    background: var(--parchment);
    color: var(--ink);
}

.edit-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
}

.save-btn {
    background: #2a7d3d;
    color: white;
    border-color: #1f5c2d;
}

.save-btn:hover {
    background: #1f5c2d;
}

.save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cancel-btn {
    background: var(--parchment);
    color: var(--ink);
}

.cancel-btn:hover {
    background: #d32f2f;
    color: white;
    border-color: #d32f2f;
}

.delete-stats-btn {
    background: var(--parchment);
    color: #b71c1c;
    border-color: #b71c1c;
    margin-left: 1rem;
    font-family: inherit;
    padding: 0.35rem 0.75rem;
    border: 1px solid #b71c1c;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.delete-stats-btn:hover {
    background: #b71c1c;
    color: white;
}

.edit-save-cancel {
    display: flex;
    gap: 0.5rem;
}

/* Header Check Masters button */
.header-check-masters {
    background: var(--parchment);
    color: var(--ink);
    font-family: inherit;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--ink);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    margin-left: 0.5rem;
}

.header-check-masters:hover {
    background: var(--gold);
    border-color: var(--gold);
}

/* Stat panel footer - contains master footer and delete button */
.stat-panel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 0.75rem 0 0.5rem;
    border-top: 1px dashed var(--ink-light, rgba(62, 39, 35, 0.25));
}

.stat-panel-footer .master-footer {
    flex: 1;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0.85rem;
    line-height: 1.6;
}

.stat-panel-footer .delete-stats-btn {
    flex-shrink: 0;
}

/* Editable stat values */
.stat-value.editable,
.spectrum-value.editable {
    background: rgba(255, 255, 255, 0.8);
    border: 1px dashed var(--gold);
    padding: 0.25rem 0.5rem;
    min-width: 2em;
    cursor: text;
    outline: none;
}

/* XP field needs less space (numbers only) - see main identity row editable rule above */
.dnd-xp-box .stat-value.editable,
.dnd-level-box .stat-value.editable {
    min-width: 3em;
}

/* Race, Class, Background, Alignment are text words - need more space */
.dnd-race-box .stat-value.editable,
.dnd-class-box .stat-value.editable,
.dnd-background-box .stat-value.editable,
.dnd-alignment-box .stat-value.editable {
    min-width: 6em;
}

/* Spellcasting ability field */
.dnd-spellcasting-box [data-stat="spellcasting.ability"].editable {
    min-width: 3em;
}

/* Text sections - shorter height, longer width */
.dnd-text-section .text-item .stat-value.editable {
    display: inline-block;
    min-width: 15em;
    max-width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Features and backstory - left aligned text, larger area */
.dnd-text-section .text-content.stat-value.editable,
[data-stat="features"].editable,
[data-stat="backstory"].editable {
    display: block;
    text-align: left;
    min-height: 3em;
    padding: 0.5rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Cantrips and spells known text boxes */
.dnd-spellcasting-box .spell-section-content.editable {
    text-align: left;
    min-height: 2em;
    display: block;
}

.stat-value.editable:focus,
.spectrum-value.editable:focus {
    border-style: solid;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(218, 165, 32, 0.3);
}

/* Visual indicator in edit mode */
body.edit-mode .stats-section {
    border: 2px dashed var(--gold);
}

body.edit-mode .stat-tab.active {
    background: rgba(218, 165, 32, 0.15);
}

/* Validation errors - inline tooltips */
.field-error-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #8b2020;
    color: #fff;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 100;
    margin-top: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    animation: tooltipFadeIn 0.2s ease;
}

.field-error-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #8b2020;
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Toast notifications */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 1000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-error {
    background: #8b2020;
    color: #fff;
    border: 1px solid #a52a2a;
}

.toast-success {
    background: #1a5c1a;
    color: #fff;
    border: 1px solid #228b22;
}

.toast-info {
    background: var(--ink);
    color: var(--parchment);
    border: 1px solid var(--gold);
}

.stat-value.validation-error,
.spectrum-value.validation-error {
    border-color: #ff6b6b !important;
    background: rgba(255, 107, 107, 0.2) !important;
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Edit mode cursor and interaction hints */
.editable {
    cursor: text;
}

/* Empty editable fields need proper cursor positioning */
.editable:empty::before {
    content: '\200B'; /* Zero-width space to maintain line height */
    display: inline;
}

.editable:focus {
    outline: none;
    background: rgba(218, 165, 32, 0.15);
}

.editable:hover:not(:focus) {
    background: rgba(218, 165, 32, 0.08);
}

/* Add Stats Tab */
.stat-tab.add-stats-tab {
    background: transparent;
    border: 2px dashed var(--ink-light);
    color: var(--ink-light);
    font-style: italic;
}

.stat-tab.add-stats-tab:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.stat-tab.add-stats-tab.active {
    background: var(--parchment);
    border-style: solid;
    border-color: var(--ink);
    color: var(--ink);
    font-style: normal;
}

/* Add Stats Panel Content */
.add-stats-content {
    padding: 0.5rem 0;
}

.add-stats-content h3 {
    margin-bottom: 1rem;
}

.system-selector-wrapper {
    margin-bottom: 1.5rem;
}

.system-selector-wrapper label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.system-selector {
    width: 100%;
    max-width: 300px;
    padding: 0.5rem;
    font-family: inherit;
    font-size: 1rem;
    border: 2px solid var(--ink);
    background: var(--parchment);
    cursor: pointer;
}

.system-selector:focus {
    outline: none;
    border-color: var(--gold);
}

/* New Stats Preview */
.new-stats-preview {
    margin-top: 1rem;
}

.new-stats-form {
    border: 2px solid var(--ink);
    padding: 1rem;
    background: var(--parchment-light);
}

.add-stats-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ink-light);
    display: flex;
    gap: 0.5rem;
}

/* Add Stats Header with Check Masters button */
.add-stats-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.add-stats-header h3 {
    margin: 0;
}

.add-stats-header-actions {
    display: flex;
    gap: 0.5rem;
}

.check-masters-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.masters-available {
    font-size: 0.75rem;
    color: var(--ink-light);
}

.check-masters-btn {
    font-family: inherit;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--ink);
    background: var(--parchment);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.check-masters-btn:hover {
    background: var(--ink);
    color: var(--parchment);
}

/* New Stats Form Header (Save/Cancel in header) */
.new-stats-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ink-light);
}

.new-stats-form-header h4 {
    margin: 0;
    font-size: 1.1rem;
}

.new-stats-form-actions {
    display: flex;
    gap: 0.5rem;
}

.new-stats-form-actions .reverie-roll-btn {
    background: #7e57c2;
    color: #ede7f6;
    border-color: #4a148c;
}

.new-stats-form-actions .reverie-roll-btn:hover {
    background: #6a3fb5;
    color: #f3e5f5;
    border-color: #38006b;
}

/* Check Masters Modal */
.check-masters-modal {
    min-width: 400px;
    max-width: 600px;
}

.masters-loading,
.masters-error,
.masters-empty {
    padding: 1rem 0;
    text-align: center;
}

.masters-error {
    color: #9b3d3d;
}

.masters-hint {
    font-size: 0.85rem;
    color: var(--ink-light);
    margin-top: 0.5rem;
}

.masters-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.master-record {
    border: 1px solid var(--ink-light);
    padding: 1rem;
    background: var(--parchment-light);
}

.master-record-campaign {
    font-size: 0.85rem;
    color: var(--ink-light);
    font-style: italic;
    margin-bottom: 0.5rem;
}

.master-record-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.master-match {
    color: #3d7a4a;
    font-size: 0.85rem;
}

.master-mismatch {
    color: #b8860b;
    font-size: 0.85rem;
}

.master-new {
    color: #4a7c9b;
    font-size: 0.85rem;
    font-weight: bold;
}

.master-record-authority {
    font-size: 0.9rem;
    color: var(--ink-light);
    margin-bottom: 0.5rem;
}

.master-record-authority a {
    color: var(--ink);
}

.master-record-stats {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.stats-preview-box {
    background: var(--parchment-light, #faf8f3);
    border: 1px solid var(--ink-light);
    padding: 0.5rem 0.75rem;
    font-family: monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    min-height: 2.5em;
}

.master-record-stats code {
    background: var(--parchment);
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
}

.master-record-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.confirm-master-stats-btn {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
}

/* ======================================================================
   CUSTOM SYSTEM COMPOSER (csf-*)
   Mirrors the structured card layout of D&D / DCC sheets.
   ====================================================================== */

/* ── Form wrapper ─────────────────────────────────────────── */
.csf-form {
    border: 2px solid var(--ink);
    background: var(--parchment-light);
    overflow: hidden;
}

/* ── Identity row (system name + ID) ──────────────────────── */
.csf-identity {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    padding: 1.25rem 1.25rem 1rem;
}

.csf-identity-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.csf-identity-name { flex: 4; min-width: 0; }
.csf-identity-id   { flex: 1; min-width: 0; }

.csf-field-label {
    display: block;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-light);
}

.csf-identity-input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    font-family: inherit;
    font-size: 0.95rem;
    border: 1px solid var(--ink);
    background: var(--parchment);
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.csf-identity-input:focus {
    outline: none;
    border-color: var(--gold);
}

.csf-id-readonly {
    color: var(--ink-light);
    background: transparent !important;
    border-color: var(--ink-light) !important;
    border-style: dashed !important;
    cursor: default;
    font-size: 0.85rem;
    text-align: center;
}

/* ── Stats area ───────────────────────────────────────────── */
.csf-stats-area {
    border-top: 1px solid var(--ink-light);
    padding: 0 1.25rem 1rem;
}

.csf-stats-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.75rem 0 0.6rem;
}

.csf-stats-title {
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink);
}

.csf-stats-hint {
    font-size: 0.72rem;
    color: var(--ink-light);
    font-style: italic;
}

/* ── Sections container (vertical stack of section groups) ── */
.csf-sections {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0.75rem;
}

/* ── Section (contains header + card grid + add-stat button) ── */
.csf-section {
    padding-bottom: 0.4rem;
}

.csf-section + .csf-section {
    margin-top: 0.4rem;
}

/* ── Per-section footer (Add Stat + Add Section Below) ──── */
.csf-section-foot {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.csf-section-add {
    flex: 1;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
}

.csf-section-insert {
    flex: 0 0 auto;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* ── Card grid (inside each section) ──────────────────────── */
.csf-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
}

/* ── Stat card ─────────────────────────────────────────────── */
.csf-card {
    background: var(--parchment);
    border: 2px solid var(--ink);
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.csf-card:focus-within {
    border-color: var(--gold, #b8860b);
    box-shadow: 0 0 0 1px var(--gold, #b8860b);
}

/* Card top bar: grip + name + type selector + remove */
.csf-card-top {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid var(--ink-light);
    background: linear-gradient(to bottom, rgba(139, 69, 19, 0.06), transparent);
}

/* Move arrows grip (stacked ▲▼) */
.csf-card-grip {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
    margin-right: 0.15rem;
}

.csf-card-move {
    width: 16px;
    height: 12px;
    padding: 0;
    font-size: 0.45rem;
    line-height: 1;
    border: none;
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.csf-card:hover .csf-card-move {
    opacity: 0.45;
}

.csf-card-move:hover {
    opacity: 1 !important;
    color: var(--ink);
}

.csf-card-name {
    flex: 1;
    min-width: 0;
    padding: 0.2rem 0.3rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: bold;
    border: 1px solid transparent;
    background: transparent;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.csf-card-name:focus {
    border-color: var(--ink-light);
    background: var(--parchment);
    outline: none;
}

.csf-card-name::placeholder {
    font-weight: normal;
    color: var(--ink-light);
}

.csf-card-type {
    width: 82px;
    flex-shrink: 0;
    padding: 0.2rem 0.2rem;
    font-family: inherit;
    font-size: 0.72rem;
    border: 1px solid var(--ink-light);
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.csf-card-type:focus,
.csf-card-type:hover {
    border-color: var(--ink);
    color: var(--ink);
    outline: none;
}

.csf-card-remove {
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
    border: none;
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.csf-card:hover .csf-card-remove,
.csf-section-bar:hover .csf-section-remove,
.csf-section-divider-legacy:hover .csf-card-remove {
    opacity: 0.6;
}

.csf-card-remove:hover {
    opacity: 1 !important;
    color: #9b3d3d;
}

/* ── Card body (common) ───────────────────────────────────── */
.csf-card-body {
    padding: 0.5rem 0.55rem 0.5rem;
}

/* ── Shared inputs ────────────────────────────────────────── */
.csf-default-input {
    width: 100%;
    padding: 0.3rem 0.4rem;
    font-family: inherit;
    font-size: 0.85rem;
    border: 1px solid var(--ink-light);
    background: transparent;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.csf-default-input:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--parchment);
}

/* ── Type badge (subtle label bottom-right) ───────────────── */
.csf-type-badge {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-light);
    text-align: right;
    margin-top: 0.3rem;
    opacity: 0.6;
}

/* ── Type hint (below input) ──────────────────────────────── */
.csf-type-hint {
    display: block;
    font-size: 0.68rem;
    color: var(--ink-light);
    margin-top: 0.25rem;
    font-style: italic;
}

/* ── NUMBER — tall centered value like DnD ability blocks ── */
.csf-body-number {
    text-align: center;
}

.csf-body-number .csf-default-number {
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    padding: 0.35rem 0.3rem;
    border: 2px solid var(--ink);
    -moz-appearance: textfield;
}

.csf-body-number .csf-default-number::-webkit-inner-spin-button,
.csf-body-number .csf-default-number::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── TEXT — simple input ──────────────────────────────────── */
.csf-body-text .csf-default-input {
    border-style: dashed;
}

/* ── LIMIT — side-by-side cur/max like DnD HP ─────────────── */
.csf-body-limit {
    display: flex;
    justify-content: center;
}

.csf-limit-pair {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
}

.csf-limit-box {
    flex: 1;
    text-align: center;
    border: 2px solid var(--ink);
    padding: 0.25rem 0.2rem 0.2rem;
    background: var(--parchment);
}

.csf-limit-label {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-light);
    margin-bottom: 0.1rem;
}

.csf-limit-box .csf-default-input {
    border: none;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 0.1rem 0;
    -moz-appearance: textfield;
}

.csf-limit-box .csf-default-input::-webkit-inner-spin-button,
.csf-limit-box .csf-default-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.csf-limit-slash {
    color: var(--ink-light);
    font-size: 1.1rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* ── BOOLEAN — centered toggle ────────────────────────────── */
.csf-body-boolean {
    display: flex;
    justify-content: center;
    padding: 0.15rem 0;
}

.csf-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    user-select: none;
}

.csf-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.csf-toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--ink-light);
    border-radius: 10px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.csf-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--parchment);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.csf-toggle-input:checked + .csf-toggle-track {
    background: var(--ink);
}

.csf-toggle-input:checked + .csf-toggle-track .csf-toggle-thumb {
    transform: translateX(16px);
}

.csf-toggle-label {
    color: var(--ink-light);
    font-size: 0.82rem;
    min-width: 1.5em;
}

.csf-toggle-input:checked ~ .csf-toggle-label {
    color: var(--ink);
}

/* ── NOTE — wide card, spans full grid ────────────────────── */
.csf-card--note {
    grid-column: 1 / -1;
}

.csf-body-note .csf-default-note {
    resize: vertical;
    min-height: 3rem;
    font-size: 0.82rem;
    border-style: dashed;
}

/* ── LIST — bulleted list ─────────────────────────────────── */
.csf-bullet-list {
    width: 100%;
    min-height: 2.4rem;
    padding: 0.3rem 0.4rem;
    font-family: inherit;
    font-size: 0.85rem;
    border: 1px dashed var(--ink-light);
    background: transparent;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
    cursor: text;
    line-height: 1.6;
}

.csf-bullet-list:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--parchment);
}

.csf-bullet-item {
    white-space: pre-wrap;
    word-break: break-word;
}

.csf-bullet-item::before {
    content: '';
}

/* ── SELECT — dropdown hints ──────────────────────────────── */
.csf-body-select .csf-default-input {
    border-style: dashed;
}

/* ── Section header bar ───────────────────────────────────── */
.csf-section-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.6rem;
    border-top: 1px solid var(--ink-light);
    border-bottom: 2px solid var(--ink);
    background: linear-gradient(to bottom, rgba(139, 69, 19, 0.05), transparent);
}

.csf-section-name {
    flex: 1;
    min-width: 0;
    padding: 0.25rem 0.4rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    background: transparent;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.csf-section-name:focus {
    border-color: var(--ink-light);
    background: var(--parchment);
    outline: none;
}

.csf-section-name::placeholder {
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink-light);
}

.csf-section-remove {
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
    border: none;
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.csf-section-bar:hover .csf-section-remove {
    opacity: 0.6;
}

.csf-section-remove:hover {
    opacity: 1 !important;
    color: #9b3d3d;
}

/* ── Add bar (kept for potential future use) ──────────────── */
.csf-add-bar {
    display: flex;
    gap: 0.5rem;
}

.csf-add-btn {
    font-family: inherit;
    padding: 0.55rem 0.5rem;
    font-size: 0.8rem;
    border: 1px dashed var(--ink-light);
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.csf-add-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--parchment);
}

.csf-add-section {
    width: 100%;
    white-space: nowrap;
}

.csf-add-icon {
    font-weight: bold;
    margin-right: 0.25rem;
}

/* ── Action bar ───────────────────────────────────────────── */
.csf-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--ink-light);
    background: linear-gradient(to bottom, var(--parchment-light), var(--parchment));
}

/* ── Mobile responsive ────────────────────────────────────── */
@media (max-width: 500px) {
    .csf-identity {
        flex-direction: column;
        gap: 0.5rem;
    }
    .csf-identity-name { flex: 1; }
    .csf-identity-id { flex: 1; width: auto; }
    .csf-card-grid {
        grid-template-columns: 1fr;
    }
    .csf-stats-area,
    .csf-actions {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .csf-section-foot {
        flex-direction: column;
    }
    .csf-section-insert { flex: 1; }
    .csf-stats-hint { display: none; }
}

/* Resource display in generic stats */
.resource-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.2em;
    font-variant-numeric: tabular-nums;
}

.resource-sep {
    color: var(--ink-light);
    font-size: 0.85em;
}

.toggle-display {
    font-size: 1.1em;
}

.toggle-on {
    color: #3d7a4a;
}

.toggle-off {
    color: var(--ink-light);
}

/* ======================================================================
   GENERIC STATS DISPLAY — DnD/DCC-style layout
   ====================================================================== */

/* Section wrapper */
.gs-section {
    margin-bottom: 1rem;
}

.gs-section:last-child {
    margin-bottom: 0;
}

/* Headed sections get a card wrapper */
.gs-section--headed {
    border: 1px solid var(--ink-light);
    padding: 0.6rem 0.75rem 0.75rem;
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.04), rgba(139, 69, 19, 0.01));
    margin-top: 0.75rem;
}

.gs-section--headed:first-child {
    margin-top: 0;
}

/* Section heading — mirrors D&D h4 pattern */
.gs-section-heading {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink);
    padding-bottom: 0.35rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--ink-light);
}

/* Section divider — matches .dnd-section-divider */
.gs-divider {
    width: 85%;
    margin: 1.25rem auto;
    border: none;
    border-top: 1px solid var(--ink-light);
}

/* ── Compact grid (combat-row style) ────────────────────────── */
.gs-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.gs-compact-grid:last-child {
    margin-bottom: 0;
}

/* Stat box — mirrors .dnd-combat-row .stat-item */
.gs-box {
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    padding: 0.4rem 0.35rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
}

.gs-box .stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-light);
    margin-bottom: 0.15rem;
}

.gs-box .stat-value {
    font-size: 1.1rem;
    font-weight: bold;
}

/* Number boxes — thicker border, like ability-blocks */
.gs-box--number {
    border: 2px solid var(--ink);
}

.gs-box--number .stat-value {
    font-size: 1.25rem;
}

/* Limit boxes — 2px border, HP-row style */
.gs-box--limit {
    border: 2px solid var(--ink);
}

.gs-box--limit .resource-display {
    font-size: 1.1rem;
}

/* Short text values */
.gs-text-value {
    font-size: 0.85rem !important;
    font-weight: normal !important;
    word-break: break-word;
}

/* ── Wide items (text-section pattern) ──────────────────────── */
.gs-wide-box {
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

.gs-wide-box:last-child {
    margin-bottom: 0;
}

.gs-wide-box h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink);
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.2rem;
    margin: 0 0 0.35rem 0;
}

.gs-wide-box .stat-value {
    font-size: 0.85rem;
    font-weight: normal;
    text-align: left;
    line-height: 1.5;
}

.gs-wide-text {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ─── List pill display ─── */
.stat-list-value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-height: 1.2em;
}

.stat-list-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    border-radius: 10px;
    color: var(--ink);
    line-height: 1.3;
}

.stat-list-empty {
    color: var(--ink-light);
}

/* Editable list: show as plain text */
.stat-list-value.editable {
    display: block;
    min-height: 1.4em;
    padding: 0.2rem 0.3rem;
    border: 1px dashed var(--ink-light);
    border-radius: 2px;
}

/* ─── Select dropdown display ─── */
.stat-select-dropdown {
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.1rem 0.3rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    cursor: default;
    text-align: center;
    width: 100%;
}

.stat-select-dropdown.editable {
    cursor: pointer;
    border-color: var(--ink-light);
    background: var(--parchment);
}

.stat-select-dropdown:focus {
    outline: none;
    border-color: var(--gold);
}

/* Mobile responsive */
@media (max-width: 500px) {
    .gs-compact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gs-section--headed {
        padding: 0.4rem 0.5rem 0.6rem;
    }
}

/* Attack add button - inline with header, hidden by default */
.dnd-attacks-box h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.add-attack-btn {
    font-family: inherit;
    padding: 0.1rem 0.3rem;
    margin-left: auto;
    font-size: 0.65rem;
    border: none;
    background: var(--ink);
    color: var(--parchment);
    cursor: pointer;
    display: none;
}

.edit-mode .add-attack-btn {
    display: inline-flex;
}

/* Attack remove button and column - hidden by default, shown in edit mode */
.attack-remove-col {
    text-align: center;
    visibility: hidden;
    width: 0;
    padding: 0;
}

.edit-mode .attack-remove-col {
    visibility: visible;
    width: 28px;
}

.attack-row .remove-attack-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
    border: 1px solid var(--ink-light);
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.attack-row .remove-attack-btn:hover {
    background: #9b3d3d;
    border-color: #9b3d3d;
    color: white;
}

/* ============================================
   VALIDATION CONTROLS (viewing others' pages)
   ============================================ */

.master-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem 1rem;
    margin-top: 1rem;
    border-top: 1px dashed var(--ink-light, rgba(62, 39, 35, 0.25));
    gap: 1rem;
}

.master-footer-row .master-footer {
    flex: 1;
    padding: 0;
    margin: 0;
    border: none;
    font-size: 0.85rem;
    line-height: 1.6;
}

.validation-controls {
    flex-shrink: 0;
}

.validate-master-btn {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink-light);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.validate-master-btn:hover {
    background: var(--ink);
    color: var(--parchment);
    border-color: var(--ink);
}

.delete-stats-btn {
    display: none;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    background: transparent;
    color: #8b3a3a;
    border: 1px solid #8b3a3a;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

body.edit-mode .delete-stats-btn {
    display: inline-block;
}

.delete-stats-btn:hover {
    background: #8b3a3a;
    color: var(--parchment);
    border-color: #8b3a3a;
}

/* Print Sheet button in stat panel header — matches edit-btn style */
.print-sheet-btn {
    cursor: pointer;
    font-family: inherit;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--ink);
    background: var(--parchment);
    color: var(--ink);
    font-size: 0.85rem;
    transition: all 0.2s ease;
    margin-right: auto;
    margin-left: 0.5rem;
    opacity: 0.5;
}
.print-sheet-btn:hover {
    opacity: 1;
    background: var(--gold);
    border-color: var(--gold);
}

/* Share character button */
.share-character-btn {
    cursor: pointer;
    font-family: inherit;
}
.share-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--ink);
}
.linkout-icon-text {
    font-size: 1rem;
    line-height: 1;
    width: 18px;
    text-align: center;
}

/* Print is handled by js/print-layout.js in a dedicated window */