/* Shared Components - Mist & Steam TTRPG tools */

/* ── CSS Custom Properties ────────────────────────────────────────────────── */
.mns-ui {
    font-size: 0.9rem;
    /* Base palette */
    --mns-text:       #1f2937;
    --mns-text-muted: #6b7280;
    --mns-border:     #d1d5db;
    --mns-card-bg:    #ffffff;
    /* Primary (blue) */
    --mns-primary:       #3b82f6;
    --mns-primary-hover: #2563eb;
    /* Danger (red) */
    --mns-danger-bg:     #fee2e2;
    --mns-danger-border: #fca5a5;
    --mns-danger-text:   #991b1b;
    /* Player / Active (green) */
    --mns-player-bg:     #dcfce7;
    --mns-player-text:   #166534;
    /* NPC / Eliminated (red) */
    --mns-npc-bg:        #fee2e2;
    --mns-npc-text:      #991b1b;
    /* Player badge (indigo) */
    --mns-badge-player-bg:   #e0e7ff;
    --mns-badge-player-text: #3730a3;
    /* Amber (traits, chaos, acted) */
    --mns-amber-bg:   #fef3c7;
    --mns-amber-text: #92400e;
    /* Partial/acted (yellow) */
    --mns-partial-bg:   #fef9c3;
    --mns-partial-text: #854d0e;
    /* Green light (instances badge, power tags) */
    --mns-green-bg:     #f0fdf4;
    --mns-green-text:   #166534;
    --mns-green-border: #bbf7d0;
    /* Condition pill (blue) */
    --mns-pill-bg:   #dbeafe;
    --mns-pill-text: #1e40af;
    /* Skill: Survive (rose) */
    --mns-skill-survive-bg:     #fff1f2;
    --mns-skill-survive-text:   #be123c;
    --mns-skill-survive-border: #fecdd3;
    /* Skill: Operate (amber) */
    --mns-skill-operate-bg:     #fffbeb;
    --mns-skill-operate-text:   #b45309;
    --mns-skill-operate-border: #fde68a;
    /* Skill: Study (violet) */
    --mns-skill-study-bg:       #f5f3ff;
    --mns-skill-study-text:     #6d28d9;
    --mns-skill-study-border:   #ddd6fe;
    /* Mana (blue) */
    --mns-mana-bg:     #eff6ff;
    --mns-mana-text:   #1e40af;
    --mns-mana-border: #bfdbfe;
    --mns-mana-fg:     #2563eb;
    --mns-mana-drop:   #3b82f6;
    /* Armor (silver) */
    --mns-armor: #6b7280;
    --mns-nat-armor-shield: #15803d;
    --mns-nat-armor-leaf: #fff;
    /* Determination (purple) */
    --mns-determination: #7c3aed;
    /* Stress (red) */
    --mns-stress: #dc2626;
    /* Damage */
    --mns-damage: #dc2626;
    --mns-dmg-bg:     #fee2e2;
    --mns-dmg-text:   #991b1b;
    --mns-dmg-border: #fca5a5;
    /* Player card chrome (indigo) */
    --mns-player-border:       #a5b4fc;
    --mns-player-header-bg:    #eef2ff;
    --mns-player-header-hover: #e0e7ff;
    /* Amber border (chaos badge) */
    --mns-amber-border: #fcd34d;
    /* Chaos pill (intense orange) */
    --mns-chaos-bg:     #fff7ed;
    --mns-chaos-text:   #c2410c;
    --mns-chaos-border: #fdba74;
}

@media (prefers-color-scheme: dark) {
    .mns-ui {
        --mns-text:       #e5e7eb;
        --mns-text-muted: #9ca3af;
        --mns-border:     #374151;
        --mns-card-bg:    #1f2937;
        --mns-primary:       #2563eb;
        --mns-primary-hover: #1d4ed8;
        --mns-danger-bg:     #7f1d1d;
        --mns-danger-border: #991b1b;
        --mns-danger-text:   #fecaca;
        --mns-player-bg:     #14532d;
        --mns-player-text:   #86efac;
        --mns-npc-bg:        #7f1d1d;
        --mns-npc-text:      #fca5a5;
        --mns-badge-player-bg:   #312e81;
        --mns-badge-player-text: #c7d2fe;
        --mns-amber-bg:   #3b2a0a;
        --mns-amber-text: #fcd34d;
        --mns-partial-bg:   #422006;
        --mns-partial-text: #fcd34d;
        --mns-green-bg:     #14532d;
        --mns-green-text:   #86efac;
        --mns-green-border: #166534;
        --mns-pill-bg:   #1e3a5f;
        --mns-pill-text: #93c5fd;
        --mns-skill-survive-bg:     #4c0519;
        --mns-skill-survive-text:   #fda4af;
        --mns-skill-survive-border: #881337;
        --mns-skill-operate-bg:     #451a03;
        --mns-skill-operate-text:   #fcd34d;
        --mns-skill-operate-border: #92400e;
        --mns-skill-study-bg:       #2e1065;
        --mns-skill-study-text:     #c4b5fd;
        --mns-skill-study-border:   #5b21b6;
        --mns-mana-bg:     #172554;
        --mns-mana-text:   #93c5fd;
        --mns-mana-border: #1e40af;
        --mns-mana-fg:     #60a5fa;
        --mns-mana-drop:   #60a5fa;
        --mns-armor: #9ca3af;
        --mns-nat-armor-shield: #16a34a;
        --mns-nat-armor-leaf: #1a1a2e;
        --mns-determination: #c4b5fd;
        --mns-stress: #f87171;
        --mns-damage: #f87171;
        --mns-dmg-bg:     #7f1d1d;
        --mns-dmg-text:   #fca5a5;
        --mns-dmg-border: #991b1b;
        --mns-player-border:       #4338ca;
        --mns-player-header-bg:    #1e1b4b;
        --mns-player-header-hover: #2e2770;
        --mns-chaos-bg:     #431407;
        --mns-chaos-text:   #fdba74;
        --mns-chaos-border: #c2410c;
    }
}

/* ── Shared button ─────────────────────────────────────────────────────────── */
.mns-btn {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    border: 1px solid var(--gray-400, #adb5bd);
    border-radius: 4px;
    background: var(--gray-100, #f8f9fa);
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    color: inherit;
}
.mns-btn:hover {
    background: var(--gray-200, #e9ecef);
}
.mns-btn-primary:not(:disabled) {
    background: var(--mns-primary);
    border-color: var(--mns-primary-hover);
    color: #fff;
}
.mns-btn-primary:hover:not(:disabled) {
    background: var(--mns-primary-hover);
}
.mns-btn-primary:disabled {
    background: var(--mns-border);
    border-color: var(--mns-border);
    color: var(--mns-text-muted);
    cursor: not-allowed;
}
.mns-btn-danger {
    background: var(--mns-danger-bg);
    border-color: var(--mns-danger-border);
    color: var(--mns-danger-text);
}
.mns-btn-danger:hover {
    background: var(--mns-danger-border);
}
.mns-btn-sm {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
}
.mns-btn-active {
    background: var(--gray-300, #dee2e6);
}

@media (prefers-color-scheme: dark) {
    .mns-btn {
        background: #374151;
        border-color: #4b5563;
        color: #e5e7eb;
    }
    .mns-btn:hover {
        background: #4b5563;
    }
    .mns-btn-active {
        background: #4b5563;
    }
    .mns-btn-primary:not(:disabled) {
        background: var(--mns-primary);
        border-color: var(--mns-primary-hover);
        color: #fff;
    }
    .mns-btn-primary:hover:not(:disabled) {
        background: var(--mns-primary-hover);
    }
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.mns-card {
    border: 1px solid var(--gray-300, #dee2e6);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.mns-card-inactive {
    opacity: 0.65;
}
.mns-card-eliminated {
    opacity: 0.4;
}
.mns-card-player {
    border-color: var(--mns-player-border);
}

.mns-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    user-select: none;
    background: var(--gray-50, #f9fafb);
    flex-wrap: wrap;
}
.mns-card-header:hover {
    background: var(--gray-100, #f3f4f6);
}
.mns-card-player > .mns-card-header {
    background: var(--mns-player-header-bg);
}
.mns-card-player > .mns-card-header:hover {
    background: var(--mns-player-header-hover);
}

.mns-card-body {
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

@media (prefers-color-scheme: dark) {
    .mns-card {
        background: #1f2937;
        border-color: #4b5563;
    }
    .mns-card-header {
        background: #111827;
    }
    .mns-card-header:hover {
        background: #1a2433;
    }
    .mns-card-body { border-top-color: #374151; }
}

/* ── Chevron ──────────────────────────────────────────────────────────────── */
.mns-chevron {
    font-size: 0.65rem;
    color: var(--gray-500, #6b7280);
    flex-shrink: 0;
    display: inline-block;
    transition: transform 0.15s ease;
}
.mns-chevron-open {
    transform: rotate(90deg);
}

/* ── Card name & strike ───────────────────────────────────────────────────── */
.mns-card-name {
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 1;
    min-width: 0;
    word-break: break-word;
}
.mns-strike {
    text-decoration: line-through;
}

/* ── Header stress / stats ────────────────────────────────────────────────── */
.mns-header-stress {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.mns-stress-dots {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
}
.mns-dot-filled {
    color: var(--mns-damage);
}
.mns-dot-empty {
    color: var(--gray-300, #d1d5db);
}
.mns-stress-num {
    display: none;
}

.mns-header-stat {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.mns-header-mana {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    color: var(--mns-mana-fg);
}
.mns-header-mana svg {
    width: 0.7em;
    height: 0.7em;
    flex-shrink: 0;
}
.mns-header-armor {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    color: var(--mns-armor);
}
.mns-stat-icon {
    width: 0.9em;
    height: 0.9em;
    flex-shrink: 0;
}

.mns-stress-compact {
    display: none;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
}
.mns-stress-compact-icon {
    width: 0.85em;
    height: 0.85em;
    color: #dc2626;
    flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
    .mns-dot-empty {
        color: #4b5563;
    }
    .mns-stress-compact-icon { color: #f87171; }
}

/* ── Status badges ────────────────────────────────────────────────────────── */
.mns-status-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.mns-status-active {
    background: var(--mns-player-bg);
    color: var(--mns-player-text);
}
.mns-status-inactive {
    background: #f3f4f6;
    color: #6b7280;
}
.mns-status-eliminated {
    background: var(--mns-npc-bg);
    color: var(--mns-npc-text);
}

.mns-player-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    background: var(--mns-badge-player-bg);
    color: var(--mns-badge-player-text);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mns-instances-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    background: var(--mns-green-bg);
    color: var(--mns-green-text);
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid var(--mns-green-border);
}

.mns-acted-badge {
    font-size: 0.65rem;
    padding: 0.08rem 0.35rem;
    border-radius: 10px;
    background: var(--mns-partial-bg);
    color: var(--mns-partial-text);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (prefers-color-scheme: dark) {
    .mns-status-inactive {
        background: #374151;
        color: #9ca3af;
    }
}

/* ── Body layout ──────────────────────────────────────────────────────────── */
.mns-body-row,
.mns-stats-row,
.mns-personal-traits,
.mns-traits-row {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.mns-skills-section,
.mns-ref-section {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.mns-body-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.mns-body-row-top {
    align-items: center;
    gap: 0.5rem;
}

/* ── Personal traits line ─────────────────────────────────────────────────── */
.mns-personal-traits {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--gray-500, #6b7280);
    padding: 0.0rem 0.75rem 0.55rem;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
}

.mns-trait-sep {
    font-style: normal;
    opacity: 0.5;
    margin: 0 0.6rem;
}

@media (prefers-color-scheme: dark) {
    .mns-personal-traits {
        color: #9ca3af;
        border-bottom-color: #374151;
    }
}

/* ── Stat controls ────────────────────────────────────────────────────────── */
.mns-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    align-items: flex-end;
}

.mns-stat-control {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.mns-stat-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    margin-right: 0.1rem;
    white-space: nowrap;
}
.mns-stat-mana-icon {
    width: 0.8em;
    height: 0.8em;
    color: var(--mns-mana-fg);
}
.mns-stat-determination-icon {
    width: 1em;
    height: 1em;
    color: var(--mns-determination);
}
.mns-stat-stress-icon {
    width: 0.8em;
    height: 0.8em;
    color: var(--mns-stress);
}
.mns-stat-armor-icon {
    width: 1em;
    height: 1em;
    color: var(--mns-armor);
}

.mns-stat-value {
    min-width: 1.8rem;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
}

.mns-stat-btn-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mns-stat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.65rem;
    line-height: 1;
    color: var(--gray-400, #aaa);
}
.mns-stat-btn:hover { color: inherit; }

/* ── Traits / conditions ──────────────────────────────────────────────────── */
.mns-traits-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.mns-pills {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: flex-start;
}

.mns-pill-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.mns-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.4rem;
    background: var(--mns-pill-bg);
    color: var(--mns-pill-text);
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 500;
}

.mns-pill-name {
    cursor: pointer;
}
.mns-pill-name:hover {
    text-decoration: underline dotted;
}

.mns-pill-value {
    width: 2.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    border-bottom: 1px solid var(--mns-pill-text);
    background: transparent;
    color: inherit;
    text-align: center;
    padding: 0;
    -moz-appearance: textfield;
}
.mns-pill-value::-webkit-inner-spin-button,
.mns-pill-value::-webkit-outer-spin-button { -webkit-appearance: none; }

.mns-pill-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mns-pill-text);
    font-size: 0.9rem;
    line-height: 1;
    padding: 0;
    margin-left: 0.1rem;
}
.mns-pill-remove:hover { color: var(--mns-danger-text); }

.mns-pill-desc {
    font-size: 0.72rem;
    color: var(--gray-600, #4b5563);
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    max-width: 260px;
    line-height: 1.35;
}

.mns-add-trait {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.mns-trait-select {
    padding: 0.15rem 0.3rem;
    font-size: 0.78rem;
    border: 1px solid var(--gray-300, #dee2e6);
    border-radius: 4px;
    background: var(--gray-100, #f8f9fa);
    color: inherit;
}

.mns-custom-trait {
    padding: 0.15rem 0.35rem;
    font-size: 0.78rem;
    border: 1px solid var(--gray-300, #dee2e6);
    border-radius: 4px;
    width: 90px;
    background: inherit;
    color: inherit;
}

@media (prefers-color-scheme: dark) {
    .mns-pill-desc {
        color: #d1d5db;
        background: #1f2937;
        border-color: #374151;
    }
    .mns-trait-select, .mns-custom-trait {
        background: #374151;
        border-color: #4b5563;
        color: #e5e7eb;
    }
}

/* ── Has Acted / Notes ────────────────────────────────────────────────────── */
.mns-acted-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    cursor: pointer;
    user-select: none;
}

.mns-notes {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.8rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--gray-300, #dee2e6);
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
    background: inherit;
    color: inherit;
}

.mns-notes-toggle {
    font-size: 0.75rem;
    color: var(--gray-400, #9ca3af);
    border-color: transparent;
    background: transparent;
}
.mns-notes-toggle:hover {
    color: var(--gray-600, #4b5563);
    background: var(--gray-100, #f3f4f6);
    border-color: var(--gray-300, #dee2e6);
}

@media (prefers-color-scheme: dark) {
    .mns-notes {
        background: #111827;
        border-color: #4b5563;
        color: #e5e7eb;
    }
    .mns-notes-toggle { color: #4b5563; }
    .mns-notes-toggle:hover { color: #9ca3af; background: #374151; border-color: #4b5563; }
}

/* ── Status controls ──────────────────────────────────────────────────────── */
.mns-status-group {
    display: flex;
    gap: 2px;
}
.mns-status-btn {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--gray-300, #dee2e6);
    background: var(--gray-100, #f8f9fa);
    cursor: pointer;
    color: inherit;
}
.mns-status-btn:first-child { border-radius: 4px 0 0 4px; }
.mns-status-btn:last-child  { border-radius: 0 4px 4px 0; }
.mns-status-btn:hover { background: var(--gray-200, #e9ecef); }
.mns-status-btn-active {
    background: #374151;
    color: #f9fafb;
    border-color: #374151;
}

@media (prefers-color-scheme: dark) {
    .mns-status-btn {
        background: #374151;
        border-color: #4b5563;
        color: #e5e7eb;
    }
    .mns-status-btn:hover { background: #4b5563; }
    .mns-status-btn-active {
        background: #e5e7eb;
        color: #111827;
        border-color: #e5e7eb;
    }
}

/* ── Header traits ────────────────────────────────────────────────────────── */
.mns-header-traits {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.mns-header-trait-pill {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    background: var(--mns-amber-bg);
    color: var(--mns-amber-text);
    white-space: nowrap;
}

/* ── Skills table ─────────────────────────────────────────────────────────── */
.mns-skills-section {
    border-top: 1px solid var(--gray-200, #e5e7eb);
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

.mns-skills-row {
    display: flex;
    width: 100%;
}

.mns-focuses-row {
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

.mns-skills-cell {
    flex: 1;
    text-align: center;
    padding: 0.2rem 0.25rem;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mns-skills-cell + .mns-skills-cell {
    border-left: 1px solid var(--gray-200, #e5e7eb);
}

@media (prefers-color-scheme: dark) {
    .mns-skills-section { border-top-color: #374151; border-bottom-color: #374151; }
    .mns-focuses-row { border-top-color: #374151; }
    .mns-skills-cell + .mns-skills-cell { border-left-color: #374151; }
}

/* ── Ref sections (Abilities, Actions, Powers, etc.) ──────────────────────── */
.mns-ref-section {
    border-top: 1px solid var(--gray-200, #e5e7eb);
    padding-top: 0.4rem;
}

.mns-skills-section + .mns-ref-section {
    border-top: none;
    margin-top: calc(-0.45rem);
}

.mns-ref-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gray-500, #6b7280);
    margin-bottom: 0.25rem;
}

.mns-ref-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.mns-ref-item {
    font-size: 0.82rem;
    line-height: 1.4;
}

@media (prefers-color-scheme: dark) {
    .mns-ref-section {
        border-top-color: #374151;
    }
    .mns-ref-title { color: #9ca3af; }
}

/* ── Action badges ────────────────────────────────────────────────────────── */
.mns-action-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    background: var(--gray-200, #e5e7eb);
    color: var(--gray-700, #374151);
    letter-spacing: 0.04em;
    vertical-align: middle;
}

@media (prefers-color-scheme: dark) {
    .mns-action-badge {
        background: #374151;
        color: #d1d5db;
    }
}

/* ── Action / power line layout ───────────────────────────────────────────── */
.mns-action-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.mns-action-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.8;
    cursor: default;
}

.mns-action-icon-invisible {
    visibility: hidden;
}

.mns-action-icons-group {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.1rem;
}

.mns-action-icons-sep {
    font-size: 0.7rem;
    opacity: 0.4;
    line-height: 1;
}

.mns-action-desc {
    font-size: 0.78rem;
}

.mns-ref-item:not(.mns-power-item) > .mns-action-desc {
    padding-left: calc(14px + 0.3rem);
}

.mns-action-label {
    font-size: 0.85rem;
}

/* ── Chaos pill tag ───────────────────────────────────────────────────────── */
.mns-chaos-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    background: var(--mns-chaos-bg);
    color: var(--mns-chaos-text);
    border: 1px solid var(--mns-chaos-border);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    font-variant-numeric: tabular-nums;
}
.mns-chaos-tag svg {
    width: 0.65em;
    height: 0.65em;
    flex-shrink: 0;
}

/* ── Mana tag ─────────────────────────────────────────────────────────────── */
.mns-power-tag {
    background: var(--mns-green-bg);
    color: var(--mns-green-text);
    border: 1px solid var(--mns-green-border);
    text-transform: none;
    font-weight: 600;
}

.mns-mana-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    background: var(--mns-mana-bg);
    color: var(--mns-mana-text);
    border: 1px solid var(--mns-mana-border);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    font-variant-numeric: tabular-nums;
}
.mns-mana-tag svg {
    width: 0.65em;
    height: 0.65em;
    flex-shrink: 0;
}

/* ── Armor tags ───────────────────────────────────────────────────────────── */
.mns-armor-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    color: var(--mns-armor, #6b7280);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
}
.mns-nat-armor-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    color: var(--mns-nat-armor-shield, #15803d);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
}
.mns-armor-tag svg,
.mns-nat-armor-tag svg {
    width: 0.75em;
    height: 0.75em;
    flex-shrink: 0;
}

/* ── Damage tag ───────────────────────────────────────────────────────────── */
.mns-dmg-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    background: var(--mns-dmg-bg);
    color: var(--mns-dmg-text);
    border: 1px solid var(--mns-dmg-border);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    font-variant-numeric: tabular-nums;
}
.mns-dmg-tag svg {
    width: 0.65em;
    height: 0.65em;
    flex-shrink: 0;
}

/* ── Skill tags ───────────────────────────────────────────────────────────── */
.mns-skill-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0.15rem;
    line-height: 1;
}
.mns-skill-tag svg {
    width: 0.95em;
    height: 0.95em;
    flex-shrink: 0;
}
.mns-skill-survive { color: var(--mns-skill-survive-text); }
.mns-skill-operate { color: var(--mns-skill-operate-text); }
.mns-skill-study   { color: var(--mns-skill-study-text); }

/* ── Quality chips (action qualities) ─────────────────────────────────────── */
.mns-quality-chip {
    display: inline-block;
    font-size: 0.72rem;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    background: var(--gray-100, #f3f4f6);
    border: 1px solid var(--gray-300, #dee2e6);
    color: var(--gray-700, #374151);
    white-space: nowrap;
    vertical-align: middle;
}

.mns-quality-chip-has-desc {
    cursor: pointer;
    text-decoration: underline dotted;
}
.mns-quality-chip-has-desc:hover {
    background: var(--gray-200, #e9ecef);
}

.mns-quality-descs {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.1rem;
}

.mns-quality-desc-item {
    font-size: 0.75rem;
    color: var(--gray-600, #4b5563);
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    line-height: 1.35;
}

@media (prefers-color-scheme: dark) {
    .mns-quality-chip {
        background: #374151;
        border-color: #4b5563;
        color: #d1d5db;
    }
    .mns-quality-chip-has-desc:hover { background: #4b5563; }
    .mns-quality-desc-item {
        color: #d1d5db;
        background: #1f2937;
        border-color: #374151;
    }
}

/* ── Power tree ───────────────────────────────────────────────────────────── */
.mns-power-name-line {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
}

.mns-power-name-line > .mns-action-icon,
.mns-power-name-line > .mns-skill-tag {
    height: 1.4em;
}

.mns-power-name-body {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}

.mns-power-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    line-height: 1.4;
}

.mns-imp-body {
    flex: 1;
    min-width: 0;
}

.mns-power-improvements {
    position: relative;
    margin: 0.2rem 0 0 0;
    padding: 0 0 0 7px;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
}

/* Vertical trunk from name row down through description area */
.mns-power-has-imp > .mns-power-name-line {
    position: relative;
}
.mns-power-has-imp > .mns-power-name-line::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 1.4em;
    bottom: 0;
    border-left: 1.5px solid var(--gray-300, #d1d5db);
    pointer-events: none;
}

.mns-power-improvements::before {
    content: '';
    position: absolute;
    left: 7px;
    top: calc(-0.2rem);
    height: 0.2rem;
    border-left: 1.5px solid var(--gray-300, #d1d5db);
    pointer-events: none;
}

.mns-power-imp-row {
    position: relative;
    padding-left: 0.75rem;
    padding-bottom: 0.25rem;
}

.mns-power-imp-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 0.6em;
    width: 0.5rem;
    border-left: 1.5px solid var(--gray-300, #d1d5db);
    border-bottom: 1.5px solid var(--gray-300, #d1d5db);
    border-bottom-left-radius: 0.4rem;
}

.mns-power-imp-row:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    bottom: 0;
    border-left: 1.5px solid var(--gray-300, #d1d5db);
}

.mns-power-imp-row:last-child {
    padding-bottom: 0;
}

.mns-imp-label {
    display: flex;
    align-items: first baseline;
    gap: 0.25rem;
}

.mns-imp-desc {
    line-height: 1.4;
    color: var(--gray-600, #4b5563);
}

.mns-imp-name {
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .mns-power-imp-row::before {
        border-left-color: #4b5563;
        border-bottom-color: #4b5563;
    }
    .mns-power-imp-row:not(:last-child)::after {
        border-left-color: #4b5563;
    }
    .mns-power-has-imp > .mns-power-name-line::after,
    .mns-power-improvements::before {
        border-left-color: #4b5563;
    }
    .mns-imp-desc {
        color: #9ca3af;
    }
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.mns-empty {
    color: var(--gray-500, #6b7280);
    font-style: italic;
    margin: 1rem 0;
}

/* ── Mobile responsive (shared components) ────────────────────────────────── */
@media (max-width: 900px) {
    .mns-stats-row {
        gap: 0.25rem 0;
    }
    .mns-stat-control {
        padding: 0.15rem 0.25rem;
    }
    .mns-stat-label {
        font-size: 0.85rem;
    }
    .mns-stat-value {
        font-size: 0.85rem;
        min-width: 1.4rem;
    }

    .mns-header-stress { order: 10; width: 100%; }
    .mns-header-traits { order: 11; width: 100%; }

    .mns-stress-dots { display: none; }
    .mns-stress-compact { display: inline-flex; }

    .mns-skills-row {
        flex-wrap: wrap;
    }
    .mns-skills-cell {
        flex: 1 1 30%;
        box-sizing: border-box;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .mns-skills-cell:nth-child(n+4) {
        border-top: 1px solid var(--gray-200, #e5e7eb);
    }
    .mns-skills-cell:nth-child(3n+1) {
        border-left: none;
    }
}
@media (max-width: 900px) and (prefers-color-scheme: dark) {
    .mns-skills-cell:nth-child(n+4) {
        border-top-color: #374151;
    }
}

/* ── Toast notification ──────────────────────────────────────────────────── */
.mns-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #f9fafb;
    padding: .5rem 1.25rem;
    border-radius: 999px;
    font-size: .875rem;
    pointer-events: none;
    animation: mns-toast-in .2s ease;
    z-index: 9999;
}
@keyframes mns-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}