/* ===== D&D Sanctum — Page Styles ===== */

/* --- Auth Pages --- */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.auth-form {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-xl);
}

.auth-title {
    font-family: var(--font-display), serif;
    font-size: var(--text-2xl);
    text-align: center;
    color: var(--accent);
}

.auth-subtitle {
    text-align: center;
    margin-bottom: var(--space-sm);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-toggle {
    text-align: center;
    font-size: var(--text-sm);
}

.auth-error {
    background: rgba(233, 69, 96, 0.1);
    border: 1px solid var(--error);
    color: var(--error);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.auth-success {
    background: rgba(78, 204, 163, 0.1);
    border: 1px solid var(--success);
    color: var(--success);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.btn-full {
    width: 100%;
}

/* --- Home Page --- */
.home-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.home-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.home-actions {
    display: flex;
    gap: var(--space-sm);
}

.campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

.campaign-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    transition: border-color var(--transition-fast);
}

.campaign-card:hover {
    border-color: var(--accent);
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    width: fit-content;
}

.badge-dm {
    background: var(--accent-dim);
    color: var(--accent);
}

.badge-player {
    background: rgba(78, 204, 163, 0.15);
    color: var(--success);
}

/* --- Modal Overlay --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
    padding: var(--space-md);
}

.modal {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-xl);
    z-index: var(--z-modal);
}

.modal h2 {
    margin-bottom: var(--space-sm);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

/* --- Settings Page --- */
.settings-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 600px;
}

/* --- Character List --- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-md);
}

.character-card { transition: border-color var(--transition-fast); }
.character-card:hover { border-color: var(--accent); }

.char-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.char-card-portrait {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.char-card-portrait-placeholder {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

/* --- Character Sheet --- */
.sheet { display: flex; flex-direction: column; gap: var(--space-md); }

.sheet-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.sheet-back { font-size: var(--text-lg); }

.sheet-identity {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    min-width: 200px;
}

.sheet-portrait {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--accent, var(--accent));
}

.sheet-portrait-placeholder {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    border: 2px solid var(--border);
}

.sheet-portrait-wrap { position: relative; }
.sheet-portrait-upload {
    position: absolute; bottom: -2px; right: -2px;
    width: 22px; height: 22px;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity var(--transition-fast);
}
.sheet-portrait-wrap:hover .sheet-portrait-upload { opacity: 1; }
.portrait-edit-icon { font-size: 11px; color: var(--text-secondary); }

.sheet-name {
    font-size: var(--text-xl);
    font-family: var(--font-display), serif;
}

.sheet-quick-stats {
    display: flex;
    gap: var(--space-lg);
}

.quick-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.quick-stat-label { font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; }
.quick-stat-value { font-size: var(--text-lg); font-weight: 700; color: var(--text-bright); }

.hp-bar {
    width: 60px;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}

.hp-fill {
    height: 100%;
    background: var(--success);
    transition: width var(--transition-base);
}

/* Tabs */
.sheet-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.tab-btn {
    padding: var(--space-sm) var(--space-md);
    color: var(--text-dim);
    font-size: var(--text-sm);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Sheet Grid (overview tab) */
.sheet-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .sheet-grid { grid-template-columns: auto 1fr; }
}

/* Ability Scores */
.ability-row-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-sm);
    text-align: center;
}

.ability-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.ability-label { font-size: var(--text-xs); color: var(--text-dim); font-weight: 600; }
.ability-score { font-size: var(--text-lg); font-weight: 700; color: var(--text-bright); }
.ability-mod { font-size: var(--text-sm); color: var(--accent); }

/* HP Controls */
.hp-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.hp-display {
    font-size: var(--text-lg);
    font-weight: 700;
    min-width: 80px;
    text-align: center;
}

.hp-btn { font-size: var(--text-lg); padding: var(--space-xs) var(--space-sm); }

/* Death Saves */
.death-saves { margin-top: var(--space-sm); }
.death-saves h4 { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-xs); }
.death-saves-row { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: 4px; }
.death-saves-row span { font-size: var(--text-xs); min-width: 50px; }
.death-pips { display: flex; gap: 6px; }
.death-pip {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--text-dim); background: transparent;
    cursor: pointer; padding: 0; transition: all var(--transition-fast);
}
.death-pip:hover { transform: scale(1.25); }
.death-success.active { background: var(--success); border-color: var(--success); }
.death-failure.active { background: var(--error); border-color: var(--error); }

/* Conditions */
.conditions-section { margin-top: var(--space-xs); }
.conditions-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); min-height: 24px; }
.condition-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; font-size: var(--text-xs); font-weight: 600;
    background: rgba(240, 165, 0, 0.15); color: var(--warning);
    border-radius: var(--radius-full);
}
.condition-remove {
    background: none; border: none; color: inherit;
    cursor: pointer; font-size: var(--text-sm); padding: 0;
    line-height: 1; opacity: 0.7;
}
.condition-remove:hover { opacity: 1; }
.condition-add-select {
    font-size: var(--text-xs); padding: 2px 4px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-secondary);
}

/* Saving Throws & Skills */
.save-row, .skill-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 3px 0;
    font-size: var(--text-sm);
}

.save-prof, .skill-prof { width: 16px; text-align: center; color: var(--accent); }
.save-bonus, .skill-bonus { width: 28px; text-align: right; font-weight: 600; }
.skill-name { flex: 1; text-transform: capitalize; }

/* Features */
.feature-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-xs);
}

.feature-card h4 { font-size: var(--text-sm); margin-bottom: 2px; }
.feature-card p { font-size: var(--text-xs); line-height: 1.5; }

/* Spell Slots */
.spell-slots-section { margin-bottom: var(--space-md); }

.slots-grid {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.slot-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.slot-level { font-size: var(--text-xs); color: var(--text-dim); }
.slot-count { font-size: var(--text-xs); color: var(--text-secondary); }

.slot-pips { display: flex; gap: 4px; }

.slot-pip {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all var(--transition-fast);
}
.slot-pip.slot-available { background: var(--accent); }
.slot-pip.slot-used { background: transparent; }
.slot-pip:hover { transform: scale(1.25); }

/* Spell List */
.spell-list-section { display: flex; flex-direction: column; gap: var(--space-sm); }

.spell-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.spell-group { margin-bottom: var(--space-sm); }

.spell-group-header {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}

.spell-entry { border-bottom: 1px solid var(--border); }
.spell-entry:last-child { border-bottom: none; }

.spell-row-main {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-xs);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.spell-row-main:hover { background: var(--bg-elevated); }

.spell-cantrip-dot { color: var(--accent); width: 16px; text-align: center; font-size: var(--text-xs); }

.spell-prepare-btn {
    background: none; border: none; color: var(--accent);
    width: 16px; text-align: center; cursor: pointer;
    font-size: var(--text-sm); padding: 0;
}
.spell-prepare-btn:hover { color: var(--accent-hover); }

.spell-name { flex: 1; font-weight: 500; }
.spell-meta { font-size: var(--text-xs); }

.spell-tag {
    font-size: 10px; font-weight: 700;
    padding: 1px 4px; border-radius: 3px;
    line-height: 1;
}
.tag-conc { background: rgba(74, 158, 255, 0.15); color: var(--info); }
.tag-ritual { background: rgba(78, 204, 163, 0.15); color: var(--success); }

.spell-remove-btn {
    background: none; border: none;
    color: var(--text-dim); cursor: pointer;
    font-size: var(--text-lg); padding: 0 2px;
    line-height: 1; opacity: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}
.spell-row-main:hover .spell-remove-btn { opacity: 1; }
.spell-remove-btn:hover { color: var(--error); }

/* Spell Detail (expandable) */
.spell-detail {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    margin: 2px 0 var(--space-xs);
    font-size: var(--text-sm);
}
.spell-detail-hidden { display: none; }

.spell-props {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px var(--space-md);
    margin-bottom: var(--space-sm);
}
.spell-prop-label { color: var(--text-dim); font-weight: 600; font-size: var(--text-xs); }

.spell-desc { color: var(--text-secondary); line-height: 1.5; }
.spell-higher { color: var(--text-dim); font-size: var(--text-xs); margin-top: var(--space-xs); line-height: 1.5; }

/* Spell Search Modal */
.spell-search-modal { max-width: 560px; max-height: 80vh; display: flex; flex-direction: column; }

.spell-search-filters {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.spell-search-input {
    flex: 1; min-width: 150px;
}

.spell-filter-level, .spell-filter-class {
    min-width: 100px;
}

.spell-search-results {
    overflow-y: auto;
    max-height: 40vh;
    margin: var(--space-sm) 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.spell-search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
}
.spell-search-row:last-child { border-bottom: none; }
.spell-search-row:hover { background: var(--bg-elevated); }
.spell-search-row.spell-known { opacity: 0.5; }

.spell-search-info { display: flex; flex-direction: column; gap: 1px; }
.spell-search-name { font-weight: 600; font-size: var(--text-sm); }

.spell-badge-known {
    font-size: var(--text-xs);
    color: var(--text-dim);
    padding: 2px 8px;
    background: var(--bg-base);
    border-radius: var(--radius-sm);
}

/* Inventory */
.inventory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.inventory-stats { display: flex; gap: var(--space-lg); align-items: center; }

.inv-stat {
    display: flex; align-items: center; gap: var(--space-xs);
    font-size: var(--text-sm);
}
.inv-stat-label { color: var(--text-dim); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; }

.inv-gold-display { display: flex; align-items: center; gap: 2px; }
.inv-gold-input {
    width: 60px; text-align: center;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 2px 4px;
    font-size: var(--text-sm); color: var(--warning); font-weight: 600;
}
.inv-gold-input:focus { border-color: var(--accent); outline: none; }
.inv-gold-btn { padding: 0 4px; font-size: var(--text-sm); }

.inv-actions { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); }

.inv-section { margin-bottom: var(--space-sm); }
.inv-section-header {
    font-size: var(--text-xs); font-weight: 700;
    color: var(--text-dim); text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}

.inv-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    transition: background var(--transition-fast);
}
.inv-row:hover { background: var(--bg-elevated); }
.inv-row:last-child { border-bottom: none; }

.inv-equip-btn {
    background: none; border: none;
    color: var(--accent); cursor: pointer;
    font-size: var(--text-sm); padding: 0;
    width: 16px; text-align: center;
}

.inv-item-name { flex: 1; font-weight: 500; }
.inv-item-type { font-size: var(--text-xs); }

.inv-qty {
    display: flex; align-items: center; gap: 2px;
}
.inv-qty-btn {
    background: none; border: none;
    color: var(--text-secondary); cursor: pointer;
    font-size: var(--text-sm); padding: 0 3px;
}
.inv-qty-btn:hover { color: var(--accent); }
.inv-qty-val { min-width: 20px; text-align: center; font-weight: 600; }

.inv-weight { font-size: var(--text-xs); min-width: 40px; text-align: right; }

.inv-remove-btn {
    background: none; border: none;
    color: var(--text-dim); cursor: pointer;
    font-size: var(--text-lg); padding: 0 2px;
    line-height: 1; opacity: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}
.inv-row:hover .inv-remove-btn { opacity: 1; }
.inv-remove-btn:hover { color: var(--error); }

/* Item Search Modal */
.item-search-modal { max-width: 500px; max-height: 80vh; display: flex; flex-direction: column; }
.item-search-filters { display: flex; gap: var(--space-sm); }
.item-search-input { flex: 1; }
.item-search-results {
    overflow-y: auto; max-height: 40vh;
    margin: var(--space-sm) 0;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.item-search-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
}
.item-search-row:last-child { border-bottom: none; }
.item-search-row:hover { background: var(--bg-elevated); }
.item-search-info { display: flex; flex-direction: column; gap: 1px; }
.item-search-name { font-weight: 600; font-size: var(--text-sm); }

/* Notes */
.notes-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-md);
}
.notes-section { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-sm); }

.note-card { margin-bottom: 0; position: relative; }
.note-card-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-sm); margin-bottom: 4px;
}
.note-title { font-size: var(--text-sm); flex: 1; }
.note-card-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--transition-fast); }
.note-card:hover .note-card-actions { opacity: 1; }
.note-pin-btn, .note-edit-btn, .note-delete-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-size: var(--text-sm); padding: 0 2px;
}
.note-pin-btn:hover { color: var(--warning); }
.note-edit-btn:hover { color: var(--accent); }
.note-delete-btn:hover { color: var(--error); }

.note-content {
    font-size: var(--text-sm); line-height: 1.5;
    white-space: pre-wrap; word-break: break-word;
}
.note-date { font-size: var(--text-xs); }

/* Bio */
.bio-tab { display: flex; flex-direction: column; gap: var(--space-lg); }

/* Creation Wizard */
.wizard-modal { max-width: 520px; }

.wizard-progress {
    display: flex;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-dim);
}

.wizard-progress .active { color: var(--accent); font-weight: 600; }
.wizard-body { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-md) 0; }

.ability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

@media (min-width: 480px) {
    .ability-grid { grid-template-columns: repeat(6, 1fr); }
}

.ability-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ability-input label { font-size: var(--text-xs); font-weight: 600; color: var(--text-dim); }

.ability-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ability-value {
    font-size: var(--text-lg);
    font-weight: 700;
    min-width: 28px;
    text-align: center;
}

.ab-btn { padding: 2px 6px; font-size: var(--text-sm); }

/* Level Up Modal */
.levelup-summary { font-size: var(--text-sm); line-height: 1.6; }
.levelup-features { margin: var(--space-sm) 0; }
.levelup-features h3 { font-size: var(--text-sm); margin-bottom: var(--space-xs); }
.levelup-asi h3 { font-size: var(--text-sm); margin-bottom: var(--space-xs); }

.asi-grid { display: flex; flex-direction: column; gap: 4px; margin: var(--space-sm) 0; }
.asi-row { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); }
.asi-label { width: 32px; font-weight: 700; color: var(--text-dim); }
.asi-current { width: 24px; text-align: center; }
.asi-btn { padding: 0 6px; font-size: var(--text-sm); }
.asi-boost { width: 24px; text-align: center; font-weight: 700; }
.asi-boosted { color: var(--success); }
.asi-new { width: 24px; text-align: center; font-weight: 700; color: var(--accent); }

.wizard-summary {
    background: var(--bg-elevated);
    padding: var(--space-md);
    font-size: var(--text-sm);
}

/* --- Combat --- */
.combat-page { display: flex; flex-direction: column; gap: var(--space-md); }
.combat-header { display: flex; align-items: center; justify-content: space-between; }
.combat-info { display: flex; gap: var(--space-lg); font-size: var(--text-lg); font-weight: 600; }
.combat-round { color: var(--accent); }
.combat-turn { color: var(--text-secondary); }
.combat-controls { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* Initiative List */
.initiative-list { display: flex; flex-direction: column; gap: 2px; }

.init-entry {
    display: flex; align-items: center; gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); transition: all var(--transition-fast);
}
.init-entry.init-current { border-color: var(--accent); background: var(--elevated); }
.init-entry.init-npc { opacity: 0.85; }
.init-order { font-size: var(--text-lg); font-weight: 700; min-width: 32px; text-align: center; color: var(--accent); }
.init-info { flex: 1; display: flex; flex-direction: column; }
.init-name { font-weight: 600; }
.init-conditions { font-size: var(--text-xs); color: var(--warning); }

.init-hp { display: flex; align-items: center; gap: var(--space-sm); min-width: 100px; }
.init-hp-bar { width: 60px; height: 6px; background: var(--elevated); border-radius: 3px; overflow: hidden; }
.init-hp-fill { height: 100%; transition: width var(--transition-base); }
.init-hp-text { font-size: var(--text-sm); font-weight: 600; min-width: 50px; }

.init-actions { display: flex; gap: 4px; }
.init-dmg, .init-heal { padding: 2px 8px; font-size: var(--text-lg); }

/* Dice Roller */
.dice-roller { display: flex; flex-direction: column; gap: var(--space-sm); }
.dice-buttons { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.dice-btn { font-weight: 700; min-width: 44px; }
.dice-result { font-size: var(--text-lg); min-height: 2rem; display: flex; align-items: center; gap: var(--space-sm); }
.dice-total { font-size: var(--text-xl); font-weight: 700; color: var(--accent); }
.dice-detail { color: var(--text-dim); font-size: var(--text-sm); }
.dice-custom { max-width: 120px; }
.dice-flash { animation: flash 0.3s ease; }
@keyframes flash { 0% { opacity: 0.5; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }

.dice-broadcast { min-height: 1.5rem; }
.dice-broadcast-msg { color: var(--text-secondary); font-size: var(--text-sm); }

.combat-dice-section { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); }
.no-combat { text-align: center; padding: var(--space-xl) 0; }

/* --- DM Tools --- */
.dm-page { display: flex; flex-direction: column; gap: var(--space-md); }
.dm-header { display: flex; align-items: center; gap: var(--space-md); }
.dm-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.dm-content { min-height: 200px; }
.dm-tab-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }

/* NPC Cards */
.npc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); }
.npc-card { transition: border-color var(--transition-fast); }
.npc-card:hover { border-color: var(--accent); }
.npc-dead { opacity: 0.5; }

.npc-card-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm); }
.npc-portrait { width: 48px; height: 48px; border-radius: var(--radius-full); object-fit: cover; }
.npc-portrait-placeholder { width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--bg-elevated); border: 1px solid var(--border); }
.npc-card-info { flex: 1; }
.npc-name { font-size: var(--text-md); }
.npc-location { font-size: var(--text-xs); }
.npc-actions { display: flex; gap: 2px; }
.npc-actions button { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px 4px; font-size: var(--text-sm); }
.npc-actions button:hover { color: var(--accent); }
.npc-desc { font-size: var(--text-sm); line-height: 1.5; }
.npc-notes { font-size: var(--text-xs); font-style: italic; margin-top: var(--space-xs); border-top: 1px dashed var(--border); padding-top: var(--space-xs); }

.dead-npcs { margin-top: var(--space-md); }
.dead-npcs summary { cursor: pointer; font-size: var(--text-sm); }

/* Quest Cards */
.quest-card { margin-bottom: var(--space-sm); }
.quest-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.quest-title { font-size: var(--text-md); flex: 1; }
.quest-header-actions { display: flex; align-items: center; gap: var(--space-xs); }
.quest-status-select { font-size: var(--text-xs); padding: 2px 4px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); }
.quest-status-badge { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; }
.quest-header-actions button { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px; font-size: var(--text-sm); }
.quest-header-actions button:hover { color: var(--accent); }
.quest-desc { font-size: var(--text-sm); line-height: 1.5; }
.quest-reward { font-size: var(--text-xs); margin-top: var(--space-xs); }
.quest-assigned { font-size: var(--text-xs); }

.quest-assign-list { display: flex; flex-direction: column; gap: 4px; }
.quest-assign-item { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); cursor: pointer; }

/* DM Notes */
.dm-note-card { margin-bottom: var(--space-sm); }
.dm-note-cat { font-size: 10px; padding: 1px 6px; background: var(--accent-dim); color: var(--accent); border-radius: 3px; font-weight: 600; margin-left: var(--space-xs); }

/* Timeline */
.timeline-list { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 40px; }
.timeline-list::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; background: var(--border); }

.timeline-entry { display: flex; gap: var(--space-md); position: relative; margin-bottom: var(--space-md); }
.timeline-marker { position: absolute; left: -40px; width: 36px; text-align: center; }
.timeline-session { display: inline-block; background: var(--accent); color: var(--text-bright); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-full); }
.timeline-content { flex: 1; }
.timeline-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.timeline-header h4 { flex: 1; font-size: var(--text-sm); }
.timeline-header button { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0 2px; font-size: var(--text-sm); }
.timeline-header button:hover { color: var(--accent); }

/* --- Maps --- */
.maps-page { display: flex; flex-direction: column; gap: var(--space-md); }

.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); }
.map-card { cursor: pointer; transition: border-color var(--transition-fast); position: relative; padding: 0; overflow: hidden; }
.map-card:hover { border-color: var(--accent); }
.map-thumb { width: 100%; height: 140px; object-fit: cover; display: block; }
.map-thumb-placeholder { width: 100%; height: 140px; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); color: var(--text-dim); font-size: var(--text-sm); }
.map-card-info { padding: var(--space-sm) var(--space-md); }
.map-card-info h3 { font-size: var(--text-sm); }
.map-delete-btn { position: absolute; top: var(--space-xs); right: var(--space-xs); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-full); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-dim); font-size: var(--text-sm); opacity: 0; transition: opacity var(--transition-fast); }
.map-card:hover .map-delete-btn { opacity: 1; }
.map-delete-btn:hover { color: var(--error); }

/* Map Viewer */
.map-viewer-page { display: flex; flex-direction: column; height: calc(100vh - 120px); }
.map-viewer-header { display: flex; align-items: center; gap: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.map-viewer-header h2 { font-size: var(--text-lg); }

.map-canvas-wrap { flex: 1; overflow: hidden; position: relative; cursor: grab; background: var(--bg-base); border-radius: var(--radius-md); border: 1px solid var(--border); }
.map-canvas-inner { transform-origin: 0 0; position: relative; display: inline-block; }
.map-image { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }

/* Map Pins */
.map-pin { position: absolute; transform: translate(-50%, -100%); cursor: pointer; z-index: 2; transition: transform var(--transition-fast); }
.map-pin:hover { transform: translate(-50%, -100%) scale(1.3); z-index: 3; }
.map-pin-icon { font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }

.pin-popover { font-size: var(--text-sm); animation: flash 0.2s ease; }
.pin-popover h4 { font-size: var(--text-sm); margin-bottom: 4px; }
.pin-popover p { font-size: var(--text-xs); margin-bottom: var(--space-sm); }

/* --- Lore --- */
.lore-page { display: flex; flex-direction: column; gap: var(--space-md); }
.lore-header { display: flex; align-items: center; justify-content: space-between; }
.lore-filters { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.lore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-md); }
.lore-card { cursor: pointer; transition: border-color var(--transition-fast); }
.lore-card:hover { border-color: var(--accent); }
.lore-card-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.lore-card-header h3 { flex: 1; font-size: var(--text-md); }
.lore-cat-badge { font-size: 10px; padding: 1px 6px; background: rgba(74, 158, 255, 0.15); color: var(--info); border-radius: 3px; font-weight: 600; }
.lore-preview { font-size: var(--text-sm); line-height: 1.5; white-space: pre-wrap; }
.lore-expanded .lore-preview { white-space: pre-wrap; }
.lore-card-actions { display: flex; gap: 2px; margin-top: var(--space-sm); opacity: 0; transition: opacity var(--transition-fast); }
.lore-card:hover .lore-card-actions { opacity: 1; }
.lore-card-actions button { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px 4px; font-size: var(--text-sm); }
.lore-card-actions button:hover { color: var(--accent); }

/* --- Entity Linker --- */
.entity-autocomplete {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    overflow: hidden; max-height: 240px; overflow-y: auto;
}
.entity-ac-row {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md); cursor: pointer;
    transition: background var(--transition-fast);
}
.entity-ac-row:hover, .entity-ac-selected { background: var(--bg-elevated); }
.entity-ac-type {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    padding: 1px 6px; border-radius: 3px;
    background: var(--accent-dim); color: var(--accent);
    min-width: 48px; text-align: center;
}
.entity-ac-name { font-size: var(--text-sm); font-weight: 500; }

.entity-link { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.entity-link:hover { color: var(--accent-hover); }