/* /Components/Account/StatAllocationPanel.razor.rz.scp.css */
/* StatAllocationPanel — ability-scores card + batch stat-allocation stepper.
   Extracted from CharacterSheet.razor.css so the surface renders identically whether
   hosted by the /game/character route or the tavern hub drawer. */

/* Card chrome (shared look with the other sheet cards) */
.sheet-card[b-qdr60eqfa6] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.6)) !important;
    border: 1px solid var(--color-border-base) !important;
    border-radius: 10px !important;
}

.card-icon[b-qdr60eqfa6] {
    color: var(--color-primary);
    margin-right: 0.5rem;
}

.card-title[b-qdr60eqfa6] {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--color-text-light);
}

/* ========================================
   Ability Scores (Detailed Grid)
   ======================================== */

.abilities-grid-detailed[b-qdr60eqfa6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.ability-card-detailed[b-qdr60eqfa6] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    padding: 1rem;
    position: relative;
    transition: all 0.3s ease;
}

.ability-card-detailed.primary[b-qdr60eqfa6] {
    border-color: var(--color-border-active);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0.02));
}

.ability-card-detailed:hover[b-qdr60eqfa6] {
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.ability-header[b-qdr60eqfa6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.ability-name-group[b-qdr60eqfa6] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.ability-abbr[b-qdr60eqfa6] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.5px;
    font-family: 'Cinzel', serif;
}

.ability-name[b-qdr60eqfa6] {
    font-size: 1rem;
    color: var(--color-text-light);
    font-weight: 600;
}

.ability-value-group[b-qdr60eqfa6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ability-value-group .total[b-qdr60eqfa6] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    font-family: 'Cinzel', serif;
    line-height: 1;
}

.ability-value-group .modifier[b-qdr60eqfa6] {
    font-size: 1.125rem;
    font-weight: 600;
    font-family: monospace;
}

.ability-value-group .modifier.positive[b-qdr60eqfa6] { color: var(--color-success); }
.ability-value-group .modifier.negative[b-qdr60eqfa6] { color: var(--color-danger); }

.ability-description[b-qdr60eqfa6] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 4px;
}

.ability-breakdown[b-qdr60eqfa6] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-bottom: 0.75rem;
}

.ability-breakdown .equipment.positive[b-qdr60eqfa6] { color: var(--color-success); }
.ability-breakdown .equipment.negative[b-qdr60eqfa6] { color: var(--color-danger); }

/* Staged stat-allocation stepper (per ability card) */
.allocate-stepper[b-qdr60eqfa6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.allocate-step[b-qdr60eqfa6] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.08));
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: var(--color-success);
}

.allocate-step.minus[b-qdr60eqfa6] {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0.05));
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--color-text-secondary);
}

.allocate-step:hover:not(:disabled)[b-qdr60eqfa6] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.allocate-step.minus:hover:not(:disabled)[b-qdr60eqfa6] {
    box-shadow: 0 2px 8px rgba(148, 163, 184, 0.25);
}

.allocate-step:disabled[b-qdr60eqfa6] {
    opacity: 0.4;
    cursor: not-allowed;
}

.allocate-pending[b-qdr60eqfa6] {
    min-width: 2.25rem;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-text-tertiary);
}

.allocate-pending.active[b-qdr60eqfa6] {
    color: var(--color-success);
}

/* Confirm / Reset action bar below the ability grid */
.allocate-actionbar[b-qdr60eqfa6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-subtle);
}

.allocate-summary[b-qdr60eqfa6] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
}

.allocate-actions[b-qdr60eqfa6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Single column on mobile */
@media (max-width: 768px) {
    .abilities-grid-detailed[b-qdr60eqfa6] {
        grid-template-columns: 1fr;
    }
}
/* /Components/AdventureEditor/AdventureEditorFormView.razor.rz.scp.css */
/* Adventure Editor Form View - Pure HTML/CSS with Design System Tokens */

.adventure-form[b-sdrctgwcm2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* Tabbed Form Navigation */
.form-tabs-nav[b-sdrctgwcm2] {
    display: flex;
    gap: var(--space-sm);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(255, 215, 0, 0.02));
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-base);
    flex-wrap: wrap;
}

.tab-btn[b-sdrctgwcm2] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: transparent;
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.tab-btn:hover[b-sdrctgwcm2] {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tab-btn.active[b-sdrctgwcm2] {
    background: var(--color-primary);
    color: var(--color-bg-base);
    border-color: var(--color-primary);
}

.icon-sm[b-sdrctgwcm2] {
    width: 1rem;
    height: 1rem;
}

/* Form Groups */
.form-group[b-sdrctgwcm2] {
    margin-bottom: var(--space-lg);
}

.form-row[b-sdrctgwcm2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.form-label[b-sdrctgwcm2] {
    display: block;
    margin-bottom: var(--space-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.95rem;
}

.form-control[b-sdrctgwcm2] {
    width: 100%;
    padding: var(--space-md);
    background: var(--color-border-subtle);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    transition: all var(--transition-fast);
}

.form-control:focus[b-sdrctgwcm2] {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-border-subtle);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.form-control[b-sdrctgwcm2]::placeholder {
    color: var(--color-text-muted);
}

.form-control:read-only[b-sdrctgwcm2] {
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
}

.form-hint[b-sdrctgwcm2] {
    margin-top: var(--space-xs);
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
}

/* Form Checkboxes */
.form-checkbox[b-sdrctgwcm2] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(255, 215, 0, 0.03);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.form-checkbox:hover[b-sdrctgwcm2] {
    background: rgba(255, 215, 0, 0.08);
    border-color: var(--color-primary);
}

.form-checkbox input[type="checkbox"][b-sdrctgwcm2] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.form-checkbox span[b-sdrctgwcm2] {
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Waypoints List */
.waypoints-list[b-sdrctgwcm2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.waypoint-card[b-sdrctgwcm2] {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: all var(--transition-fast);
}

.waypoint-card:hover[b-sdrctgwcm2] {
    border-color: var(--color-primary);
    background: rgba(255, 215, 0, 0.08);
}

.waypoint-header[b-sdrctgwcm2] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.waypoint-position[b-sdrctgwcm2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-primary);
    color: var(--color-bg-base);
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.waypoint-name[b-sdrctgwcm2] {
    flex: 1;
    padding: var(--space-md);
    background: var(--color-border-subtle);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 1rem;
}

.waypoint-name:focus[b-sdrctgwcm2] {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-border-subtle);
}

.waypoint-content[b-sdrctgwcm2] {
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-base);
}

/* Reward Items Grid */
.reward-items-grid[b-sdrctgwcm2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.reward-item[b-sdrctgwcm2] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(255, 215, 0, 0.03);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.reward-item:hover[b-sdrctgwcm2] {
    background: rgba(255, 215, 0, 0.08);
    border-color: var(--color-primary);
}

.reward-item input[type="checkbox"][b-sdrctgwcm2] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    cursor: pointer;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.reward-item-info[b-sdrctgwcm2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
}

.reward-item-name[b-sdrctgwcm2] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.reward-item-type[b-sdrctgwcm2] {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .form-tabs-nav[b-sdrctgwcm2] {
        flex-direction: column;
    }

    .tab-btn[b-sdrctgwcm2] {
        width: 100%;
        justify-content: center;
    }

    .form-row[b-sdrctgwcm2] {
        grid-template-columns: 1fr;
    }

    .waypoint-header[b-sdrctgwcm2] {
        flex-direction: column;
        align-items: flex-start;
    }

    .waypoint-name[b-sdrctgwcm2] {
        width: 100%;
    }

    .reward-items-grid[b-sdrctgwcm2] {
        grid-template-columns: 1fr;
    }

    .card-footer[b-sdrctgwcm2] {
        flex-direction: column;
    }

    .btn[b-sdrctgwcm2] {
        width: 100%;
    }
}
/* /Components/AdventureEditor/AdventureEditorListView.razor.rz.scp.css */
/* Adventure Editor List View - Pure HTML/CSS with Design System Tokens */

.table-wrapper[b-8no1c87c1b] {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.03), rgba(255, 215, 0, 0.01));
}

.adventure-table[b-8no1c87c1b] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.adventure-table thead[b-8no1c87c1b] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0.04));
    border-bottom: 2px solid var(--color-border-hover);
}

.adventure-table th[b-8no1c87c1b] {
    padding: var(--space-lg);
    text-align: left;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.adventure-table tbody tr[b-8no1c87c1b] {
    border-bottom: 1px solid var(--color-border-base);
    transition: background-color var(--transition-fast);
}

.adventure-table tbody tr:hover[b-8no1c87c1b] {
    background: rgba(255, 215, 0, 0.05);
}

.adventure-table td[b-8no1c87c1b] {
    padding: var(--space-lg);
    color: var(--color-text-primary);
}

.adventure-table code[b-8no1c87c1b] {
    background: rgba(255, 215, 0, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--color-primary);
}

.badge[b-8no1c87c1b] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-default[b-8no1c87c1b] {
    background: var(--color-border-base);
    border: 1px solid var(--color-border-active);
    color: var(--color-primary);
}

.badge-success[b-8no1c87c1b] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--color-success-lighter);
}

.badge-warning[b-8no1c87c1b] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--color-warning-light);
}

.badge-info[b-8no1c87c1b] {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--color-info-lighter);
}

.badge-secondary[b-8no1c87c1b] {
    background: rgba(148, 163, 184, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--color-text-light);
}

.icon-xs[b-8no1c87c1b] {
    width: 0.875rem;
    height: 0.875rem;
}

.font-semibold[b-8no1c87c1b] {
    font-weight: 600;
}

.text-sm[b-8no1c87c1b] {
    font-size: 0.875rem;
}

.btn-sm[b-8no1c87c1b] {
    padding: 0.375rem 0.75rem;
    font-size: 0.85rem;
}

.btn-text[b-8no1c87c1b] {
    background: transparent;
    color: var(--color-primary);
    border: none;
    padding: 0.25rem 0.5rem;
}

.btn-text:hover:not(:disabled)[b-8no1c87c1b] {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary-light);
}

.btn-danger[b-8no1c87c1b] {
    color: var(--color-danger);
}

.btn-danger:hover:not(:disabled)[b-8no1c87c1b] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger-lighter);
}

hr[b-8no1c87c1b] {
    border: none;
    height: 1px;
    background: var(--color-border-base);
    margin: var(--space-xl) 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .adventure-table[b-8no1c87c1b] {
        font-size: 0.875rem;
    }

    .adventure-table th[b-8no1c87c1b],
    .adventure-table td[b-8no1c87c1b] {
        padding: var(--space-md);
    }
}

@media (max-width: 768px) {
    .table-wrapper[b-8no1c87c1b] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .adventure-table[b-8no1c87c1b] {
        min-width: 600px;
        font-size: 0.8rem;
    }

    .adventure-table th[b-8no1c87c1b],
    .adventure-table td[b-8no1c87c1b] {
        padding: var(--space-sm) var(--space-md);
    }

    .btn-sm[b-8no1c87c1b] {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .badge[b-8no1c87c1b] {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
}
/* /Components/AdventureEditor/RestEventSelectionDialog.razor.rz.scp.css */
/* Rest Event Selection Dialog Styles */

.rest-event-dialog-overlay[b-77fb9njh7i] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.rest-event-dialog[b-77fb9njh7i] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Header */
.dialog-header[b-77fb9njh7i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.dialog-header h3[b-77fb9njh7i] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-lightest);
}

.close-button[b-77fb9njh7i] {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.close-button:hover[b-77fb9njh7i] {
    background-color: rgba(148, 163, 184, 0.1);
    color: var(--color-text-lightest);
}

/* Content */
.dialog-content[b-77fb9njh7i] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Alerts */
.alert[b-77fb9njh7i] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
}

.alert-info[b-77fb9njh7i] {
    background-color: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--color-info-lighter);
}

.alert-warning[b-77fb9njh7i] {
    background-color: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--color-warning-lighter);
}

.alert-success[b-77fb9njh7i] {
    background-color: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--color-success-lighter);
}

.alert .material-icons[b-77fb9njh7i] {
    font-size: 20px;
}

/* Filters */
.filter-grid[b-77fb9njh7i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.filter-item[b-77fb9njh7i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-item label[b-77fb9njh7i] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-light);
}

.form-select[b-77fb9njh7i] {
    background-color: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--color-text-lightest);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.form-select:hover[b-77fb9njh7i] {
    border-color: rgba(148, 163, 184, 0.5);
}

.form-select:focus[b-77fb9njh7i] {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Event Count */
.event-count[b-77fb9njh7i] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 16px;
}

/* Event List */
.event-list[b-77fb9njh7i] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.event-item[b-77fb9njh7i] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background-color: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    transition: all 0.2s;
}

.event-item:hover[b-77fb9njh7i] {
    background-color: rgba(30, 41, 59, 0.8);
    border-color: rgba(148, 163, 184, 0.4);
}

.event-checkbox[b-77fb9njh7i] {
    flex-shrink: 0;
}

.event-checkbox input[type="checkbox"][b-77fb9njh7i] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--color-info);
}

.event-details[b-77fb9njh7i] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-header[b-77fb9njh7i] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.event-title[b-77fb9njh7i] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-lightest);
    cursor: pointer;
    margin: 0;
}

.event-chip[b-77fb9njh7i] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Event Type Chips */
.event-type-story[b-77fb9njh7i] {
    background-color: rgba(59, 130, 246, 0.2);
    color: var(--color-info-lighter);
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.event-type-choice[b-77fb9njh7i] {
    background-color: rgba(251, 191, 36, 0.2);
    color: var(--color-warning-lighter);
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.event-type-ambush[b-77fb9njh7i] {
    background-color: rgba(34, 197, 94, 0.2);
    color: var(--color-success-lighter);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.event-type-environmental[b-77fb9njh7i] {
    background-color: rgba(168, 85, 247, 0.2);
    color: var(--color-monk-light);
    border: 1px solid rgba(168, 85, 247, 0.4);
}

/* Difficulty Chips */
.difficulty-easy[b-77fb9njh7i] {
    background-color: rgba(34, 197, 94, 0.2);
    color: var(--color-success-lighter);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.difficulty-medium[b-77fb9njh7i] {
    background-color: rgba(251, 191, 36, 0.2);
    color: var(--color-warning-lighter);
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.difficulty-hard[b-77fb9njh7i] {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--color-danger-lighter);
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.difficulty-veryhard[b-77fb9njh7i] {
    background-color: rgba(220, 38, 38, 0.2);
    color: var(--color-danger-light);
    border: 1px solid rgba(220, 38, 38, 0.4);
}

.difficulty-legendary[b-77fb9njh7i] {
    background-color: rgba(168, 85, 247, 0.2);
    color: var(--color-monk-light);
    border: 1px solid rgba(168, 85, 247, 0.4);
}

.event-description[b-77fb9njh7i] {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Footer */
.dialog-footer[b-77fb9njh7i] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

/* Buttons */
.btn[b-77fb9njh7i] {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary[b-77fb9njh7i] {
    background-color: var(--color-info);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-77fb9njh7i] {
    background-color: var(--color-info-dark);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-secondary[b-77fb9njh7i] {
    background-color: rgba(148, 163, 184, 0.2);
    color: var(--color-text-light);
}

.btn-secondary:hover:not(:disabled)[b-77fb9njh7i] {
    background-color: rgba(148, 163, 184, 0.3);
}

.btn:disabled[b-77fb9njh7i] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Scrollbar Styling */
.dialog-content[b-77fb9njh7i]::-webkit-scrollbar {
    width: 8px;
}

.dialog-content[b-77fb9njh7i]::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 4px;
}

.dialog-content[b-77fb9njh7i]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 4px;
}

.dialog-content[b-77fb9njh7i]::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .rest-event-dialog[b-77fb9njh7i] {
        max-height: 95vh;
    }

    .filter-grid[b-77fb9njh7i] {
        grid-template-columns: 1fr;
    }

    .dialog-header h3[b-77fb9njh7i] {
        font-size: 1.25rem;
    }

    .dialog-footer[b-77fb9njh7i] {
        flex-direction: column;
    }

    .btn[b-77fb9njh7i] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Adventures/ContinueAdventureCard.razor.rz.scp.css */
.continue-hero[b-ydb13zuxcd] {
    position: relative;
    width: 100%;
    min-height: 320px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 215, 0, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    margin-bottom: 1.5rem;
}

.continue-hero:hover[b-ydb13zuxcd] {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.55);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.1);
}

.continue-hero:focus-visible[b-ydb13zuxcd] {
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}

.continue-hero.is-boss[b-ydb13zuxcd] {
    border-color: rgba(239, 68, 68, 0.45);
}

.continue-hero.is-boss:hover[b-ydb13zuxcd] {
    border-color: rgba(239, 68, 68, 0.75);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(239, 68, 68, 0.18);
}

.continue-hero-bg[b-ydb13zuxcd] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #0f172a;
    transform: scale(1.05);
    transition: transform 0.6s ease;
}

.continue-hero:hover .continue-hero-bg[b-ydb13zuxcd] {
    transform: scale(1.1);
}

.continue-hero-overlay[b-ydb13zuxcd] {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.65) 55%, rgba(15, 23, 42, 0.35) 100%),
        linear-gradient(0deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0) 60%);
}

.continue-hero.is-boss .continue-hero-overlay[b-ydb13zuxcd] {
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(127, 29, 29, 0.55) 55%, rgba(127, 29, 29, 0.25) 100%),
        linear-gradient(0deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0) 60%);
}

.continue-hero-content[b-ydb13zuxcd] {
    position: relative;
    z-index: 1;
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    height: 100%;
    min-height: 320px;
    box-sizing: border-box;
    color: #f8fafc;
}

.continue-hero-eyebrow[b-ydb13zuxcd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-warning-bright);
}

.pulse-dot[b-ydb13zuxcd] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-warning-bright);
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6);
    animation: continue-hero-pulse-b-ydb13zuxcd 2s infinite;
}

.continue-hero.is-boss .pulse-dot[b-ydb13zuxcd] {
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}

@keyframes continue-hero-pulse-b-ydb13zuxcd {
    0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(251, 191, 36, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}

.continue-hero-more[b-ydb13zuxcd] {
    margin-left: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.continue-hero-switch[b-ydb13zuxcd] {
    display: inline-flex;
}

.continue-hero-more-action[b-ydb13zuxcd] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.continue-hero-more-action:hover[b-ydb13zuxcd] {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
}

.continue-hero-title[b-ydb13zuxcd] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: #f8fafc;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
    line-height: 1.15;
}

.continue-hero-waypoint[b-ydb13zuxcd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #ffd700;
    font-size: 0.95rem;
    font-weight: 600;
}

.continue-hero-waypoint-name[b-ydb13zuxcd] {
    color: #e2e8f0;
    font-weight: 500;
}

.continue-hero-tease[b-ydb13zuxcd] {
    color: #cbd5e1;
    font-style: italic;
    line-height: 1.5;
    margin: 0;
    max-width: 70%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.continue-hero-chips[b-ydb13zuxcd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hero-chip[b-ydb13zuxcd] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}

.chip-boss[b-ydb13zuxcd] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.12));
    border-color: rgba(245, 158, 11, 0.5);
    color: var(--color-warning-bright);
}

.chip-enemies[b-ydb13zuxcd] {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.chip-xp[b-ydb13zuxcd] {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

.continue-hero-footer[b-ydb13zuxcd] {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 0.5rem;
}

.continue-hero-progress[b-ydb13zuxcd] {
    flex: 1;
    min-width: 0;
}

.progress-track[b-ydb13zuxcd] {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill[b-ydb13zuxcd] {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #f59e0b);
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.45);
    transition: width 0.4s ease;
}

.continue-hero.is-boss .progress-fill[b-ydb13zuxcd] {
    background: linear-gradient(90deg, var(--color-warning-bright), #ef4444);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

.progress-meta[b-ydb13zuxcd] {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: #94a3b8;
    letter-spacing: 0.05em;
}

.btn-continue-hero[b-ydb13zuxcd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, #ffd700, #daa520);
    color: #0f172a;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(255, 215, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    white-space: nowrap;
}

.btn-continue-hero:hover[b-ydb13zuxcd] {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 6px 22px rgba(255, 215, 0, 0.5);
}

.continue-hero.is-boss .btn-continue-hero[b-ydb13zuxcd] {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff;
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.4);
}

.continue-hero.is-boss .btn-continue-hero:hover[b-ydb13zuxcd] {
    box-shadow: 0 6px 22px rgba(239, 68, 68, 0.55);
}

@media (max-width: 768px) {
    .continue-hero[b-ydb13zuxcd] { min-height: 360px; }
    .continue-hero-content[b-ydb13zuxcd] { padding: 1.25rem 1.25rem; gap: 0.65rem; }
    .continue-hero-title[b-ydb13zuxcd] { font-size: 1.5rem; }
    .continue-hero-tease[b-ydb13zuxcd] { max-width: 100%; }
    .continue-hero-footer[b-ydb13zuxcd] { flex-direction: column; align-items: stretch; gap: 0.85rem; }
    .btn-continue-hero[b-ydb13zuxcd] { width: 100%; justify-content: center; }
    .continue-hero-overlay[b-ydb13zuxcd] {
        background:
            linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.92) 65%);
    }
}
/* /Components/Bestiary/BestiaryCard.razor.rz.scp.css */
.bestiary-card[b-mdgdtfkfg5] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bestiary-card:hover[b-mdgdtfkfg5],
.bestiary-card:focus-visible[b-mdgdtfkfg5] {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
    border-color: var(--mud-palette-primary);
    outline: none;
}

.bestiary-card.undiscovered[b-mdgdtfkfg5] {
    opacity: 0.7;
}

.bestiary-card.undiscovered .card-portrait img[b-mdgdtfkfg5],
.bestiary-card.undiscovered .portrait-silhouette[b-mdgdtfkfg5] {
    filter: brightness(0) saturate(0);
}

.card-portrait[b-mdgdtfkfg5] {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-base));
}

.card-portrait img[b-mdgdtfkfg5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.portrait-silhouette[b-mdgdtfkfg5] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled);
    background: linear-gradient(135deg, #2a2a3a, #1a1a2a);
}

.boss-badge[b-mdgdtfkfg5] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    background: rgba(245, 158, 11, 0.9);
    color: #1a1a2e;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-body[b-mdgdtfkfg5] {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

.card-name[b-mdgdtfkfg5] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unknown-name[b-mdgdtfkfg5] {
    color: var(--mud-palette-text-disabled);
    letter-spacing: 0.1em;
}

.card-meta[b-mdgdtfkfg5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

.card-defeats[b-mdgdtfkfg5] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
/* /Components/Bestiary/BestiaryDetailDrawer.razor.rz.scp.css */
[b-6zvz4agatr] .bestiary-drawer {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.bestiary-detail[b-6zvz4agatr] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.detail-header[b-6zvz4agatr] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
}

.detail-portrait[b-6zvz4agatr] {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-base));
    flex-shrink: 0;
}

.detail-portrait img[b-6zvz4agatr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portrait-silhouette[b-6zvz4agatr] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled);
}

.detail-headline[b-6zvz4agatr] {
    flex-grow: 1;
    min-width: 0;
}

.detail-name[b-6zvz4agatr] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-bottom: 4px;
}

.detail-tagline[b-6zvz4agatr] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.boss-tag[b-6zvz4agatr] {
    background: rgba(245, 158, 11, 0.9);
    color: #1a1a2e;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.archetype-tag[b-6zvz4agatr] {
    background: var(--mud-palette-primary);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.close-btn[b-6zvz4agatr] {
    flex-shrink: 0;
    align-self: flex-start;
}

.detail-body[b-6zvz4agatr] {
    padding: 16px 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.detail-section[b-6zvz4agatr] {
    margin-bottom: 20px;
}

.section-title[b-6zvz4agatr] {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-bottom: 4px;
}

.section-text[b-6zvz4agatr] {
    color: var(--mud-palette-text-primary);
    line-height: 1.6;
    font-size: 0.95rem;
}

.stat-grid[b-6zvz4agatr],
.encounter-grid[b-6zvz4agatr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
}

.stat-grid > div[b-6zvz4agatr],
.encounter-grid > div[b-6zvz4agatr] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.encounter-full[b-6zvz4agatr] {
    grid-column: 1 / -1;
}

.stat-label[b-6zvz4agatr] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.undiscovered-text[b-6zvz4agatr] {
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    padding: 32px 16px;
}
/* /Components/Bestiary/BestiaryFiltersBar.razor.rz.scp.css */
.bestiary-filters[b-g11n9xqymn] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.filter-row[b-g11n9xqymn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.search-input[b-g11n9xqymn] {
    flex: 1 1 220px;
    min-width: 180px;
}

.filter-select[b-g11n9xqymn] {
    flex: 0 1 200px;
    min-width: 160px;
}

@media (max-width: 600px) {
    .filter-row[b-g11n9xqymn] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input[b-g11n9xqymn],
    .filter-select[b-g11n9xqymn] {
        flex: 1 1 100%;
    }
}
/* /Components/Characters/Detail/CharacterDetailPanel.razor.rz.scp.css */
/* Character Detail Panel — roster preview built on the shared CharacterHeroStrip.
   The identity band (portrait / name / level / readiness grade / micro-stats / vitals) is the
   primitive; this file only styles the side-slot actions + the supporting sections below. */

.character-detail[b-jywxoucvm6] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.6));
    border: 1px solid var(--color-border-base);
    border-radius: 10px;
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}

/* ===== SIDE ACTIONS (authored here, rendered into the strip's Side slot) =====
   The buttons themselves use the global design-system .btn / .btn-success / .btn-outline /
   .btn-ghost classes; this only owns their stacked layout + the delete tint. */
.detail-actions[b-jywxoucvm6] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 190px;
}

.detail-action-full[b-jywxoucvm6] {
    width: 100%;
}

/* Delete is a quiet ghost button until hovered — destructive, so it stays low-emphasis. */
.detail-action-delete[b-jywxoucvm6] {
    color: var(--color-danger);
}

.detail-action-delete:hover:not(:disabled)[b-jywxoucvm6] {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-danger);
}

/* ===== SECTIONS (combat stats, readiness recommendations) ===== */
.detail-section[b-jywxoucvm6] {
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    padding: 0.875rem;
    margin-top: 1rem;
}

.section-title[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border-subtle);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text-light);
}

.improvements-list[b-jywxoucvm6] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.improvements-list li[b-jywxoucvm6] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    padding-left: 1.25rem;
    position: relative;
}

.improvements-list li[b-jywxoucvm6]::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* ===== PREMIUM NOTICE ===== */
.premium-notice[b-jywxoucvm6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-top: 1rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--color-warning);
    font-weight: 600;
}

/* ===== EMPTY STATE ===== */
.detail-empty-state[b-jywxoucvm6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.detail-empty-icon[b-jywxoucvm6] {
    font-size: 4rem !important;
    color: #475569;
    margin-bottom: 1rem;
}

.detail-empty-state h3[b-jywxoucvm6] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: var(--color-text-light);
    margin: 0 0 0.5rem 0;
}

.detail-empty-state p[b-jywxoucvm6] {
    font-size: 0.9375rem;
    color: var(--color-text-tertiary);
    margin: 0;
}

/* ===== RESPONSIVE ===== */
/* The strip wraps its Side slot full-width at <=1024; let the actions flow into a row there. */
@media (max-width: 1024px) {
    .detail-actions[b-jywxoucvm6] {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .detail-action-full[b-jywxoucvm6] {
        flex: 1;
        width: auto;
    }
}

@media (max-width: 768px) {
    .character-detail[b-jywxoucvm6] {
        padding: 1rem;
        max-height: none;
    }

    /* On mobile the carousel card above already carries a Play button; drop the duplicate here. */
    .detail-action-play[b-jywxoucvm6] {
        display: none;
    }
}
/* /Components/Characters/Header/CharactersHeader.razor.rz.scp.css */
/* Characters Header Styles - Compact Design */
.characters-header[b-8tilutqcxa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.7));
    border: 1px solid var(--color-border-base);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.header-left[b-8tilutqcxa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-icon[b-8tilutqcxa] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-900);
    flex-shrink: 0;
}

.header-content[b-8tilutqcxa] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.header-title[b-8tilutqcxa] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.header-subtitle[b-8tilutqcxa] {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.header-right[b-8tilutqcxa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[b-8tilutqcxa] .tier-chip {
    font-weight: 600;
    font-size: 0.7rem !important;
    height: 26px !important;
}

[b-8tilutqcxa] .tier-chip.premium {
    background: linear-gradient(135deg, var(--color-success-dark), var(--color-success)) !important;
    color: white !important;
}

.btn-create-header[b-8tilutqcxa] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    color: var(--color-gray-900) !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 600 !important;
    padding: 0.4rem 1rem !important;
    letter-spacing: 0.03em !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

.btn-create-header:hover[b-8tilutqcxa] {
    box-shadow: 0 0 15px var(--color-border-active) !important;
    transform: translateY(-1px);
}

.btn-create-header.disabled[b-8tilutqcxa] {
    background: var(--color-gray-700) !important;
    color: var(--color-text-tertiary) !important;
}

/* Mobile responsiveness - keep existing */
@media (max-width: 768px) {
    .characters-header[b-8tilutqcxa] {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
        padding: 1rem;
    }
    
    .header-left[b-8tilutqcxa],
    .header-right[b-8tilutqcxa] {
        justify-content: center;
    }
    
    .header-content[b-8tilutqcxa] {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }
}
/* /Components/Characters/List/CharacterListPanel.razor.rz.scp.css */
/* Character List Panel - Compact Styles */
.character-list[b-4w00ae2ssc] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    padding: 0.75rem;
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}

.list-empty-state[b-4w00ae2ssc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.character-list-item[b-4w00ae2ssc] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.7));
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.character-list-item:last-child[b-4w00ae2ssc] {
    margin-bottom: 0;
}

.character-list-item:hover[b-4w00ae2ssc] {
    border-color: var(--color-border-hover);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.85));
    transform: translateX(3px);
}

.character-list-item.selected[b-4w00ae2ssc] {
    border-color: rgba(255, 215, 0, 0.5);
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.08), rgba(218, 165, 32, 0.04));
    box-shadow: 0 0 12px var(--color-border-base);
}

.character-list-item.locked[b-4w00ae2ssc] {
    opacity: 0.6;
    cursor: not-allowed;
}

.character-list-item.locked:hover[b-4w00ae2ssc] {
    transform: none;
    border-color: rgba(255, 215, 0, 0.08);
}

/* Avatar is now the shared <CharacterPortrait> (rounded-square, self-sized via its Size param). */

.list-item-content[b-4w00ae2ssc] {
    flex: 1;
    min-width: 0;
}

.list-item-name[b-4w00ae2ssc] {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 0.1rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

.list-item-details[b-4w00ae2ssc] {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    margin: 0;
}

.list-item-level[b-4w00ae2ssc] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-primary);
    background: rgba(255, 215, 0, 0.08);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .character-list[b-4w00ae2ssc] {
        max-height: 280px;
    }
    
    .character-list-item[b-4w00ae2ssc]  .character-portrait {
        width: 32px;
        height: 32px;
    }
}
/* /Components/Characters/Mobile/MobileCharacterCard.razor.rz.scp.css */
/* Mobile Character Card Styles */
.mobile-character-card[b-mcs94j69xw] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-character-card:active[b-mcs94j69xw] {
    border-color: var(--color-border-active);
    background: linear-gradient(145deg, var(--color-bg-elevated), rgba(15, 23, 42, 1));
    box-shadow: 0 0 16px var(--color-border-hover);
}

.mobile-character-card.selected[b-mcs94j69xw] {
    border-color: rgba(255, 215, 0, 0.6);
    background: linear-gradient(145deg, var(--color-border-base), rgba(218, 165, 32, 0.08));
    box-shadow: 0 0 20px var(--color-border-hover);
    border-width: 2px;
}

/* Top Bar with Play Button */
.mobile-card-top-bar[b-mcs94j69xw] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.25rem;
}

.play-button-custom[b-mcs94j69xw] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-gray-900);
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: 32px;
    box-shadow: 0 2px 8px var(--color-border-active);
}

.play-button-custom:hover:not(:disabled)[b-mcs94j69xw] {
    background: linear-gradient(135deg, #ffed4e, #f0c020);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.5);
    transform: translateY(-1px);
}

.play-button-custom:active:not(:disabled)[b-mcs94j69xw] {
    transform: translateY(0);
    box-shadow: 0 2px 4px var(--color-border-active);
}

.play-button-custom:disabled[b-mcs94j69xw] {
    opacity: 0.5;
    cursor: not-allowed;
}

.button-icon[b-mcs94j69xw] {
    font-size: 0.875rem !important;
}

/* Header with Avatar and Level */
.mobile-card-header[b-mcs94j69xw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

/* The avatar is now the shared <CharacterPortrait>; ::deep keeps the card's framed look
   (rounded-square per the consolidation decision, not the old circle). */
.mobile-card-header[b-mcs94j69xw]  .character-portrait {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--color-border-hover);
}

.mobile-card-level-badge[b-mcs94j69xw] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-gray-900);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.65rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px var(--color-border-active);
    border: 2px solid rgba(15, 23, 42, 0.5);
    margin-left: auto;
}

/* Card Content */
.mobile-card-content[b-mcs94j69xw] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mobile-card-name[b-mcs94j69xw] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.premium-star[b-mcs94j69xw] {
    color: var(--color-primary);
    font-size: 0.7rem !important;
    margin: 0;
}

.premium-star-icon[b-mcs94j69xw] {
    color: var(--color-primary);
    font-size: 0.85rem;
    line-height: 1;
    margin-left: 0.25rem;
    display: inline-flex;
    align-items: center;
}

.mobile-card-details[b-mcs94j69xw] {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Locked Badge */
.mobile-card-locked-badge[b-mcs94j69xw] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    color: var(--color-warning);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    margin-top: 0.25rem;
}

/* Vitals Section - Compact */
.mobile-card-vitals[b-mcs94j69xw] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

/* Vital bars retired here — the card now renders the canonical <ResourceBar Compact>
   (HP is canonical green, not the old red; styling lives in design-system.css). */

/* Mobile-only list container */
@media (max-width: 768px) {
    .mobile-characters-list[b-mcs94j69xw] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .mobile-character-card[b-mcs94j69xw] {
        margin-bottom: 0;
    }
}
/* /Components/Characters/Mobile/MobileCharactersList.razor.rz.scp.css */
/* Mobile Characters List Container */
.mobile-characters-container[b-ypdciz4wut] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding: 0;
}

.mobile-empty-state[b-ypdciz4wut] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    margin: 0 var(--space-lg);
}

.mobile-empty-icon[b-ypdciz4wut] {
    color: var(--color-primary);
    opacity: 0.5;
    margin-bottom: var(--space-lg) !important;
    font-size: var(--font-size-4xl) !important;
}

/* ========== CAROUSEL WRAPPER ========== */
.carousel-wrapper[b-ypdciz4wut] {
    width: 100%;
    overflow: hidden;
    padding: 0 var(--space-lg);
    touch-action: pan-y;
    user-select: none;
}

.carousel-track[b-ypdciz4wut] {
    display: flex;
    width: 100%;
    transition: transform var(--transition-slow);
}

/* ========== CAROUSEL ITEMS ========== */
.carousel-item[b-ypdciz4wut] {
    flex: 0 0 100%;
    min-width: 100%;
    padding: var(--space-xl);
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-3xl);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-lg);
    min-height: 140px;
}

.carousel-item:active:not(.locked)[b-ypdciz4wut] {
    border-color: var(--color-border-hover);
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    transform: scale(0.98);
}

.carousel-item.selected[b-ypdciz4wut] {
    border-color: var(--color-border-active);
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    box-shadow: var(--shadow-gold);
}

.carousel-item.locked[b-ypdciz4wut] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========== LEFT COLUMN: AVATAR + LEVEL BADGE ========== */
.item-left-column[b-ypdciz4wut] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-avatar-container[b-ypdciz4wut] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Avatar is now the shared <CharacterPortrait> (rounded-square per the consolidation
   decision, not the old circle); ::deep keeps the framed look. */
.item-avatar-container[b-ypdciz4wut]  .character-portrait {
    border: 3px solid var(--color-border-base);
    box-shadow: var(--shadow-lg);
    z-index: 1;
}

.item-level-badge[b-ypdciz4wut] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-bg-base);
    border-radius: var(--radius-round);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-gold-lg);
    border: 2px solid rgba(15, 23, 42, 0.6);
    white-space: nowrap;
    flex-shrink: 0;
    z-index: 2;
}

/* ========== RIGHT COLUMN: CHARACTER INFO ========== */
.item-right-column[b-ypdciz4wut] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.item-info[b-ypdciz4wut] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.item-name[b-ypdciz4wut] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.premium-star-icon[b-ypdciz4wut] {
    color: var(--color-primary);
    font-size: var(--font-size-md);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.item-details[b-ypdciz4wut] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== CAROUSEL INDICATORS/DOTS ========== */
.carousel-dots[b-ypdciz4wut] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg) 0 var(--space-lg);
}

.dot[b-ypdciz4wut] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-round);
    background: var(--color-border-hover);
    cursor: pointer;
    transition: all var(--transition-base);
    border: none;
}

.dot:hover[b-ypdciz4wut] {
    background: var(--color-border-active);
}

.dot.active[b-ypdciz4wut] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    width: 28px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-gold);
}

/* ========== ANIMATIONS ========== */
@keyframes pulse-glow-b-ypdciz4wut {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 4px var(--shadow-sm));
    }
    50% {
        opacity: 0.8;
        filter: drop-shadow(0 0 8px var(--shadow-md));
    }
}

/* ========== LEGACY CHARACTER LIST (FALLBACK) ========== */
.mobile-characters-list[b-ypdciz4wut] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: 0 var(--space-lg);
}

.character-card-item[b-ypdciz4wut] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    cursor: pointer;
    transition: all var(--transition-slow);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.character-card-item:hover[b-ypdciz4wut] {
    border-color: var(--color-border-hover);
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    transform: translateX(var(--space-sm));
}

.character-card-item.selected[b-ypdciz4wut] {
    border-color: var(--color-border-active);
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    box-shadow: var(--shadow-gold);
}

.character-card-item.locked[b-ypdciz4wut] {
    opacity: 0.6;
    cursor: not-allowed;
}

.card-header[b-ypdciz4wut] {
    position: relative;
    flex-shrink: 0;
}

.card-avatar[b-ypdciz4wut] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--color-border-base);
}

.card-level-badge[b-ypdciz4wut] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-bg-base);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-gold);
    border: 1px solid rgba(15, 23, 42, 0.3);
}

.card-info[b-ypdciz4wut] {
    flex: 1;
    min-width: 0;
}

.card-name[b-ypdciz4wut] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-xs) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-title[b-ypdciz4wut] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-xs) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-race[b-ypdciz4wut] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
}

.card-selected-indicator[b-ypdciz4wut] {
    color: var(--color-success-light);
    animation: pulse-glow-b-ypdciz4wut 1.5s ease-in-out infinite;
}
/* /Components/Characters/Portrait/CharacterPortraitEditor.razor.rz.scp.css */
/* ── Dialog content wrapper ─────────────────────────────────────────────── */

.portrait-editor[b-aa6694ge8c] {
    min-width: 320px;
    max-width: 480px;
}

/* ── Section labels ─────────────────────────────────────────────────────── */

.section-label[b-aa6694ge8c] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.75rem;
}

/* ── Portrait grid ──────────────────────────────────────────────────────── */

.portrait-grid[b-aa6694ge8c] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.625rem;
}

.portrait-tile[b-aa6694ge8c] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--color-border-subtle);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    user-select: none;
}

.portrait-tile:hover:not(.locked)[b-aa6694ge8c] {
    transform: translateY(-2px) scale(1.03);
    border-color: rgba(255, 255, 255, 0.25);
}

.portrait-tile.locked[b-aa6694ge8c] {
    cursor: default;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */

.portrait-badge[b-aa6694ge8c] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.badge-premium[b-aa6694ge8c] {
    background: rgba(0, 0, 0, 0.65);
    color: var(--color-primary);
}

.badge-locked[b-aa6694ge8c] {
    background: rgba(0, 0, 0, 0.65);
    color: rgba(255, 215, 0, 0.5);
}

/* ── Lock overlay ───────────────────────────────────────────────────────── */

.lock-overlay[b-aa6694ge8c] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Selected checkmark ─────────────────────────────────────────────────── */

.selected-check[b-aa6694ge8c] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Variant label ──────────────────────────────────────────────────────── */

.variant-label[b-aa6694ge8c] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    font-size: 0.6rem;
    font-weight: 600;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    padding: 6px 2px 3px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Premium upgrade hint ───────────────────────────────────────────────── */

.premium-hint[b-aa6694ge8c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 215, 0, 0.07);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Description field spacing ──────────────────────────────────────────── */

.description-field[b-aa6694ge8c] {
    margin-top: 0.25rem;
}
/* /Components/Combat/AdventureWaypointInfo.razor.rz.scp.css */
/* ============================================================
   ADVENTURE WAYPOINT INFO — Fantasy RPG Design
   Displays current adventure and waypoint in combat
   ============================================================ */

.adventure-waypoint-info[b-uwhaqyzxcm] {
    display: flex;
    align-items: center;
    background: linear-gradient(160deg, rgba(18, 24, 42, 0.97) 0%, rgba(8, 12, 24, 0.99) 100%);
    border-radius: 10px;
    border: 1px solid var(--color-border-hover);
    border-top: 2px solid var(--color-border-active);
    padding: 10px 16px 14px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 215, 0, 0.08);
    min-height: 50px;
    width: 100%;
}

.adventure-waypoint-header[b-uwhaqyzxcm] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.adventure-icon[b-uwhaqyzxcm] {
    color: rgba(255, 215, 0, 0.7);
    flex-shrink: 0;
}

.adventure-waypoint-content[b-uwhaqyzxcm] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.adventure-name[b-uwhaqyzxcm] {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 215, 0, 0.9);
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.waypoint-divider[b-uwhaqyzxcm] {
    color: var(--color-border-active);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.waypoint-name[b-uwhaqyzxcm] {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.85);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive design: the tablet HUD only. The Desktop / Wide board keeps its 1280 look in any window (WP12c floor). */
@media (max-width: 768px) {
    :where(.tablet-hud) .adventure-waypoint-info[b-uwhaqyzxcm] {
        padding: 8px 12px;
        min-height: 42px;
        min-width: unset;
        max-width: unset;
        width: 100%;
    }

    :where(.tablet-hud) .adventure-waypoint-header[b-uwhaqyzxcm] {
        gap: 8px;
    }

    :where(.tablet-hud) .adventure-name[b-uwhaqyzxcm] {
        font-size: 0.8rem;
    }

    :where(.tablet-hud) .waypoint-name[b-uwhaqyzxcm] {
        font-size: 0.72rem;
    }
}

@media (max-width: 599px) {
    :where(.tablet-hud) .adventure-waypoint-info[b-uwhaqyzxcm] {
        padding: 6px 10px;
        min-height: 38px;
    }

    :where(.tablet-hud) .adventure-waypoint-content[b-uwhaqyzxcm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    :where(.tablet-hud) .waypoint-divider[b-uwhaqyzxcm] {
        display: none;
    }

    :where(.tablet-hud) .adventure-name[b-uwhaqyzxcm] {
        font-size: 0.75rem;
    }

    :where(.tablet-hud) .waypoint-name[b-uwhaqyzxcm] {
        font-size: 0.68rem;
    }
}
/* /Components/Combat/Aiming/AimBannerStrip.razor.rz.scp.css */
/* Board aiming (HUD decision D10): the pending-target banner. Its accent is the aimed action's turn slot
   (--color-eco-action circle, --color-eco-bonus triangle, design skill "Action economy tokens"), so the
   banner, the card and the glowing targets on the board all wear one color. Its text follows the combat text size
   (WP12g, the --ct-* tokens); the slot marker and the touch buttons' 44px floor do not. */

/* A grid, not a row (WP12g): the title shares the first line with Confirm / Cancel, and the preview card and the meta
   line run the banner's full width under them. Side by side with the buttons the text column was a third of the
   banner, so at Extra large every line wrapped and the dock grew until the board had no height left. */
.aim-banner[b-5oy4yswn7q] {
    --aim-eco: var(--color-eco-action);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-sm);
    row-gap: 1px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--aim-eco) 16%, var(--color-bg-base)),
        var(--color-bg-elevated));
    border: 1px solid color-mix(in srgb, var(--aim-eco) 65%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--aim-eco) 28%, transparent);
    color: var(--color-text-primary);
    font-size: var(--ct-sm);
    line-height: 1.35;
    min-width: 0;
}

.aim-banner.aim-eco-bonus[b-5oy4yswn7q] {
    --aim-eco: var(--color-eco-bonus);
}

/* Turn-slot marker: the same shapes as the dock rail (circle = Action, triangle = Bonus). */
.aim-banner-eco[b-5oy4yswn7q] {
    grid-column: 1;
    grid-row: 1;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--aim-eco);
}

.aim-banner.aim-eco-bonus .aim-banner-eco[b-5oy4yswn7q] {
    width: 12px;
    height: 11px;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* The text column's lines are the banner's grid rows. */
.aim-banner-text[b-5oy4yswn7q] {
    display: contents;
}

.aim-banner-title[b-5oy4yswn7q] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
    min-width: 0;
}

.aim-banner-preview[b-5oy4yswn7q],
.aim-banner-strike[b-5oy4yswn7q],
.aim-banner-meta[b-5oy4yswn7q],
.aim-banner-text[b-5oy4yswn7q]  .preview-card {
    grid-column: 2 / -1;
}

.aim-banner-action[b-5oy4yswn7q] {
    color: var(--aim-eco);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.aim-banner-arrow[b-5oy4yswn7q] {
    font-size: var(--ct-base);
    color: var(--color-text-secondary);
}

.aim-banner-target[b-5oy4yswn7q] {
    font-weight: var(--font-weight-semibold);
    min-width: 0;
    overflow-wrap: break-word;
}

.aim-banner-preview[b-5oy4yswn7q] {
    font-weight: var(--font-weight-semibold);
}

.aim-banner-strike[b-5oy4yswn7q] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-aoe-footprint);
}

.aim-banner-strike .material-icons[b-5oy4yswn7q],
.aim-banner-range .material-icons[b-5oy4yswn7q] {
    font-size: var(--ct-md);
}

.aim-banner-meta[b-5oy4yswn7q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--ct-2xs);
}

.aim-banner-range[b-5oy4yswn7q] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.aim-banner-buttons[b-5oy4yswn7q] {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    gap: 6px;
}

.aim-strip-btn[b-5oy4yswn7q] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--aim-eco) 55%, transparent);
    background: color-mix(in srgb, var(--color-bg-base) 70%, transparent);
    color: var(--color-text-primary);
    font-size: var(--ct-2xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast);
}

.aim-strip-btn .material-icons[b-5oy4yswn7q] {
    font-size: var(--ct-base);
}

.aim-strip-btn:hover[b-5oy4yswn7q],
.aim-strip-btn:focus-visible[b-5oy4yswn7q] {
    background: color-mix(in srgb, var(--aim-eco) 25%, var(--color-bg-base));
}

.aim-banner-confirm[b-5oy4yswn7q] {
    background: color-mix(in srgb, var(--aim-eco) 85%, var(--color-bg-base));
    color: var(--color-bg-base);
    border-color: var(--aim-eco);
}

.aim-banner-confirm:hover[b-5oy4yswn7q],
.aim-banner-confirm:focus-visible[b-5oy4yswn7q] {
    background: var(--aim-eco);
}

/* Touch strip over the board (the tablet's Aim surface): tighter text, finger-sized (44px) Confirm and Cancel. */
.aim-banner.compact[b-5oy4yswn7q] {
    padding: 6px 8px;
    box-shadow: var(--shadow-md);
}

.aim-banner.compact .aim-strip-btn[b-5oy4yswn7q] {
    min-height: 44px;
    min-width: 88px;
    justify-content: center;
    padding: 4px 12px;
    font-size: var(--ct-sm);
}

.aim-banner.compact .aim-strip-btn .material-icons[b-5oy4yswn7q] {
    font-size: var(--ct-xl);
}

@media (max-width: 480px) {
    .aim-banner.compact .aim-banner-buttons[b-5oy4yswn7q] {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-content: flex-end;
    }
}
/* /Components/Combat/CombatActionBanner.razor.rz.scp.css */
/* ===== COMBAT ACTION BANNER =====
 *
 * Polish item 6 — Positioning verification (Cluster 2 / Phase 8b follow-up).
 *
 * The banner uses position:fixed relative to the viewport (NOT to the combat
 * grid), so the new map-anchored geometry (Wide / Desktop / Tablet / Mobile)
 * does not affect its placement. It floats above ALL layout tiers.
 *
 * Vertical anchor: `top: 80px` clears the global MudAppBar (Dense=false ≈ 64px
 * tall, fixed at viewport top), leaving ~16px breathing room. The 599px
 * media-query bump to 120px clears the taller mobile header stack which can
 * grow when secondary controls wrap onto a second row.
 *
 * Horizontal: centered via `left: 50%; translateX(-50%)`. Transient, so
 * z-index: 1500 sits above layout content but below modal overlays (≥2000).
 *
 * VERIFIED on Wide (1920+), Desktop (1280-1919), Tablet, and Mobile — banner
 * appears at the same viewport-relative spot in all four tiers, never overlaps
 * the log column or the bottom action row.
 */

.combat-action-banner[b-7pxstjwh39] {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1500;
    pointer-events: none;
    animation: banner-enter-b-7pxstjwh39 0.3s ease-out, banner-exit-b-7pxstjwh39 0.4s ease-in 1.6s forwards;
    max-width: 90vw;
    width: max-content;
}

.banner-content[b-7pxstjwh39] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    border-radius: 10px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* Variants */
.banner-player .banner-content[b-7pxstjwh39] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--combat-good) 90%, transparent), color-mix(in srgb, var(--combat-good-deep) 85%, transparent));
    border: 2px solid color-mix(in srgb, var(--combat-good-light) 60%, transparent);
    color: #ffffff;
}

.banner-enemy .banner-content[b-7pxstjwh39] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--combat-bad) 90%, transparent), color-mix(in srgb, var(--combat-bad-darker) 85%, transparent));
    border: 2px solid color-mix(in srgb, var(--combat-bad-light) 60%, transparent);
    color: #ffffff;
}

.banner-healing-type .banner-content[b-7pxstjwh39] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--combat-heal-dark) 90%, transparent), color-mix(in srgb, var(--combat-good-deep) 85%, transparent));
    border: 2px solid color-mix(in srgb, var(--combat-heal-light) 60%, transparent);
    color: #ffffff;
}

.banner-miss .banner-content[b-7pxstjwh39] {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.85), rgba(71, 85, 105, 0.8));
    border: 2px solid rgba(148, 163, 184, 0.4);
    color: #cbd5e1;
}

.banner-crit .banner-content[b-7pxstjwh39],
.combat-action-banner.is-critical .banner-content[b-7pxstjwh39] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.9));
    border: 2px solid rgba(251, 191, 36, 0.8);
    color: #ffffff;
    animation: banner-crit-glow-b-7pxstjwh39 0.6s ease-in-out 2;
}

.banner-item .banner-content[b-7pxstjwh39] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.9), rgba(8, 145, 178, 0.85));
    border: 2px solid rgba(103, 232, 249, 0.6);
    color: #ffffff;
}

.banner-status .banner-content[b-7pxstjwh39] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(124, 58, 237, 0.85));
    border: 2px solid rgba(167, 139, 250, 0.6);
    color: #ffffff;
}

.banner-ability .banner-content[b-7pxstjwh39] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.9), rgba(219, 39, 119, 0.85));
    border: 2px solid rgba(244, 114, 182, 0.6);
    color: #ffffff;
}

/* Multiplayer: the local player's turn (gold, the theme accent). */
.banner-your-turn .banner-content[b-7pxstjwh39] {
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.95), rgba(184, 134, 11, 0.92));
    border: 2px solid var(--color-primary);
    color: var(--color-bg-base);
    text-shadow: none;
    font-size: 1.15rem;
    letter-spacing: 0.06em;
}

/* Multiplayer: an ally acted (quiet, so it never competes with your own actions). */
.banner-ally .banner-content[b-7pxstjwh39] {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.45);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 16px;
}

.banner-info .banner-content[b-7pxstjwh39] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.85));
    border: 2px solid rgba(96, 165, 250, 0.6);
    color: #ffffff;
}

/* Labels */
.banner-crit-label[b-7pxstjwh39] {
    color: #fef3c7;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.banner-miss-label[b-7pxstjwh39] {
    color: #e2e8f0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

.banner-message[b-7pxstjwh39] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.banner-damage[b-7pxstjwh39] {
    color: var(--combat-bad-lighter);
    font-weight: 700;
    font-size: 1.1rem;
}

.banner-healing[b-7pxstjwh39] {
    color: var(--combat-good-lighter);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Animations */
@keyframes banner-enter-b-7pxstjwh39 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes banner-exit-b-7pxstjwh39 {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

@keyframes banner-crit-glow-b-7pxstjwh39 {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }
    50% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 30px rgba(245, 158, 11, 0.6);
    }
}

/* Mobile adjustments */
@media (max-width: 599px) {
    .combat-action-banner[b-7pxstjwh39] {
        top: 120px;
        max-width: 95vw;
    }

    .banner-content[b-7pxstjwh39] {
        font-size: 0.85rem;
        padding: 8px 16px;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .combat-action-banner[b-7pxstjwh39] {
        animation: none;
        opacity: 1;
    }
    .banner-crit .banner-content[b-7pxstjwh39],
    .combat-action-banner.is-critical .banner-content[b-7pxstjwh39] {
        animation: none;
    }
}
/* /Components/Combat/CombatActionsPanel.razor.rz.scp.css */
/* ============================================================
   COMBAT ACTIONS PANEL — Fantasy RPG Design
   BG3-inspired action bar with gold accents & class theming
   ============================================================ */

/* ===== PANEL CONTAINER ===== */
.combat-actions-panel[b-x875gdys2p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: linear-gradient(160deg, rgba(18, 24, 42, 0.97) 0%, rgba(8, 12, 24, 0.99) 100%);
    border-radius: 12px;
    border: 1px solid var(--color-border-hover);
    border-top: 3px solid rgba(255, 215, 0, 0.5);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 215, 0, 0.08);
}

/* ===== PLAYER TURN GLOW (active state) ===== */
.combat-actions-panel:not(.locked)[b-x875gdys2p] {
    border-top-color: rgba(255, 215, 0, 0.75);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.6),
        0 0 18px rgba(255, 215, 0, 0.15),
        inset 0 1px 0 rgba(255, 215, 0, 0.12);
    animation: panelTurnGlow-b-x875gdys2p 2.5s ease-in-out infinite;
}

@keyframes panelTurnGlow-b-x875gdys2p {
    0%, 100% {
        box-shadow:
            0 6px 24px rgba(0, 0, 0, 0.6),
            0 0 12px rgba(255, 215, 0, 0.1),
            inset 0 1px 0 rgba(255, 215, 0, 0.08);
    }
    50% {
        box-shadow:
            0 6px 24px rgba(0, 0, 0, 0.6),
            0 0 28px rgba(255, 215, 0, 0.22),
            inset 0 1px 0 rgba(255, 215, 0, 0.15);
    }
}

/* ===== LOCKED STATE (not player's turn) ===== */
.combat-actions-panel.locked[b-x875gdys2p] {
    border-top-color: rgba(148, 163, 184, 0.25);
    border-color: var(--color-border-subtle);
    animation: none;
}

.combat-actions-panel.locked .action-section-header[b-x875gdys2p] {
    color: rgba(148, 163, 184, 0.45);
}

.combat-actions-panel.locked .action-section-header[b-x875gdys2p]::after {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.15), transparent);
}

.combat-actions-panel.locked .actions-panel-header[b-x875gdys2p]::before,
.combat-actions-panel.locked .actions-panel-header[b-x875gdys2p]::after {
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.2), transparent);
}

.combat-actions-panel.locked .actions-panel-title[b-x875gdys2p] {
    color: rgba(148, 163, 184, 0.5);
    letter-spacing: 0.12em;
}

/* ===== PANEL HEADER ===== */
.actions-panel-header[b-x875gdys2p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.actions-panel-header[b-x875gdys2p]::before,
.actions-panel-header[b-x875gdys2p]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border-active), transparent);
}

.actions-panel-title[b-x875gdys2p] {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 215, 0, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    white-space: nowrap;
}

/* ===== SECTION CONTAINER ===== */
.action-section[b-x875gdys2p] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ===== SECTION HEADERS ===== */
.action-section-header[b-x875gdys2p] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 215, 0, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 4px;
}

.action-section-header[b-x875gdys2p]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--color-border-hover), transparent);
}

/* ===== BUTTON GRID ===== */
.action-buttons[b-x875gdys2p] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Phase 5/8b fix: the legacy desktop grid stretch
   (`.combat-actions-panel.desktop .basic-actions .action-buttons` with
   `grid-template-columns: repeat(auto-fit, minmax(88px, 1fr))`) has 4-class
   specificity. Earlier Phase 5 override had only 2 — it lost the cascade.
   These selectors match or exceed the legacy specificity so the override
   actually wins, AND the !important on display protects against any future
   selector resurrecting the grid stretch.

   Without this fix, in Phase 8b's wider middle column, the AbilityCard cells
   stretched to 1fr (~250px each), the panel grew very tall, and the auto-sized
   bottom row crushed the hex grid down to almost nothing. */
.combat-actions-panel.desktop .basic-actions .action-buttons.ability-card-row[b-x875gdys2p],
.combat-actions-panel.desktop .class-features .action-buttons.ability-card-row[b-x875gdys2p],
.combat-actions-panel.desktop .spell-row .action-buttons.spell-card-row[b-x875gdys2p],
.combat-actions-panel .action-section .action-buttons.ability-card-row[b-x875gdys2p],
.combat-actions-panel .action-section .action-buttons.spell-card-row[b-x875gdys2p] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    grid-template-columns: none !important;
    gap: 8px;
}

.combat-actions-panel .action-buttons.ability-card-row > .ability-card[b-x875gdys2p],
.combat-actions-panel .action-buttons.spell-card-row > .spell-card-mini[b-x875gdys2p],
.combat-actions-panel .action-buttons.spell-card-row > .spell-card[b-x875gdys2p] {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
}

/* Phase 8b fix: cap the action panel's height inside the bottom row so it
   can't grow tall enough to crush the hex grid. Internal scroll is fine —
   the spell row may have many cards but they wrap. */
.combat-bottom-row .combat-actions-panel.desktop[b-x875gdys2p] {
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
}

/* Horizontal-scroll variant — used by the merged Actions + Class Features row
   so the row stays one line tall and overflow scrolls horizontally instead of
   wrapping into multiple rows (which would push the spell row + the hex grid
   below it down). Spell row keeps the wrapping behavior. */
.action-buttons.ability-card-row.ability-card-row--scroll[b-x875gdys2p],
.combat-actions-panel .action-section .action-buttons.ability-card-row.ability-card-row--scroll[b-x875gdys2p] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;          /* let card hover popovers escape vertically */
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.4) transparent;
    padding-bottom: 4px;          /* breathing room for scrollbar */
}

.action-buttons.ability-card-row--scroll > .ability-card[b-x875gdys2p] {
    scroll-snap-align: start;
}

.action-buttons.ability-card-row--scroll[b-x875gdys2p]::-webkit-scrollbar { height: 6px; }
.action-buttons.ability-card-row--scroll[b-x875gdys2p]::-webkit-scrollbar-track { background: transparent; }
.action-buttons.ability-card-row--scroll[b-x875gdys2p]::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.35);
    border-radius: 3px;
}
.action-buttons.ability-card-row--scroll[b-x875gdys2p]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.55);
}

/* Vertical-rule divider chip between Basic Actions and Class Features */
.ability-row-divider[b-x875gdys2p] {
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 215, 0, 0.35) 30%,
        rgba(255, 215, 0, 0.35) 70%,
        transparent 100%
    );
    margin: 4px 6px;
    pointer-events: none;
}

/* ===== BASE ACTION BUTTON ===== */
.action-btn[b-x875gdys2p] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    min-width: 80px;
    min-height: unset;
    flex: 1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(25, 33, 55, 0.9), rgba(12, 16, 32, 0.95));
    color: var(--color-text-light);
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    cursor: pointer;
    transition: all 0.18s ease;
    line-height: 1;
}

.action-btn:hover:not(:disabled)[b-x875gdys2p] {
    transform: translateY(-3px);
    color: #fff;
}

.action-btn:active:not(:disabled)[b-x875gdys2p] {
    transform: translateY(0) scale(0.97);
}

.action-btn:disabled[b-x875gdys2p] {
    opacity: 0.32;
    cursor: not-allowed;
    filter: grayscale(50%);
}

/* ===== ICON SIZING ===== */
.action-btn :deep(.mud-icon-root)[b-x875gdys2p] {
    font-size: 1.15rem;
    transition: transform 0.18s ease;
}

.action-btn:hover:not(:disabled) :deep(.mud-icon-root)[b-x875gdys2p] {
    transform: scale(1.12);
}

/* ===== PRIMARY ACTIONS — Attack / Spell / Item ===== */

.action-btn.primary.attack[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(160, 28, 28, 0.45), rgba(90, 10, 10, 0.55));
    border-color: rgba(239, 68, 68, 0.45);
    color: var(--color-danger-lighter);
}

.action-btn.primary.attack:hover:not(:disabled)[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(210, 40, 40, 0.6), rgba(130, 15, 15, 0.65));
    border-color: rgba(239, 68, 68, 0.9);
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.4), 0 6px 14px rgba(0, 0, 0, 0.45);
    color: var(--color-danger-lightest);
}

.action-btn.primary.spell[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(28, 58, 170, 0.45), rgba(10, 30, 110, 0.55));
    border-color: rgba(59, 130, 246, 0.45);
    color: var(--color-info-lighter);
}

.action-btn.primary.spell:hover:not(:disabled)[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(45, 90, 215, 0.6), rgba(20, 50, 155, 0.65));
    border-color: rgba(59, 130, 246, 0.9);
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.4), 0 6px 14px rgba(0, 0, 0, 0.45);
    color: var(--color-info-lightest);
}

.action-btn.primary.item[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(12, 90, 62, 0.45), rgba(5, 55, 38, 0.55));
    border-color: rgba(16, 185, 129, 0.45);
    color: var(--color-cleric-light);
}

.action-btn.primary.item:hover:not(:disabled)[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(18, 130, 88, 0.6), rgba(8, 80, 55, 0.65));
    border-color: rgba(16, 185, 129, 0.9);
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.4), 0 6px 14px rgba(0, 0, 0, 0.45);
    color: var(--color-cleric-lighter);
}

/* ===== CLASS FEATURE BUTTONS ===== */

/* Paladin — Holy Gold */
.action-btn.feature.paladin[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(110, 75, 8, 0.38), rgba(65, 42, 3, 0.48));
    border-color: rgba(245, 158, 11, 0.45);
    color: var(--color-warning-light);
}

.action-btn.feature.paladin:hover:not(:disabled)[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(155, 105, 12, 0.55), rgba(95, 60, 5, 0.62));
    border-color: rgba(245, 158, 11, 0.9);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.38), 0 6px 14px rgba(0, 0, 0, 0.45);
    color: var(--color-warning-lightest);
}

/* Bard — Vibrant Pink */
.action-btn.feature.bard[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(115, 28, 78, 0.38), rgba(70, 14, 48, 0.48));
    border-color: rgba(236, 72, 153, 0.45);
    color: var(--color-bard-light);
}

.action-btn.feature.bard:hover:not(:disabled)[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(160, 40, 108, 0.55), rgba(100, 20, 65, 0.62));
    border-color: rgba(236, 72, 153, 0.9);
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.38), 0 6px 14px rgba(0, 0, 0, 0.45);
    color: var(--color-bard-lighter);
}

/* Barbarian — Primal Red */
.action-btn.feature.barbarian[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(105, 12, 12, 0.38), rgba(65, 6, 6, 0.48));
    border-color: rgba(220, 38, 38, 0.45);
    color: var(--color-danger-lighter);
}

.action-btn.feature.barbarian:hover:not(:disabled)[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(148, 18, 18, 0.55), rgba(92, 8, 8, 0.62));
    border-color: rgba(220, 38, 38, 0.9);
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.38), 0 6px 14px rgba(0, 0, 0, 0.45);
    color: var(--color-danger-lightest);
}

.action-btn.feature.barbarian.active[b-x875gdys2p] {
    border-color: rgba(251, 191, 36, 0.8);
    box-shadow: 0 0 28px rgba(251, 191, 36, 0.55), inset 0 0 14px rgba(251, 191, 36, 0.1);
    animation: rage-pulse-b-x875gdys2p 1.5s ease-in-out infinite;
}

@keyframes rage-pulse-b-x875gdys2p {
    0%, 100% { box-shadow: 0 0 18px rgba(251, 191, 36, 0.4), inset 0 0 8px rgba(251, 191, 36, 0.08); }
    50%       { box-shadow: 0 0 36px rgba(251, 191, 36, 0.8), inset 0 0 18px rgba(251, 191, 36, 0.18); }
}

/* Monk — Arcane Violet */
.action-btn.feature.monk[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(58, 22, 125, 0.38), rgba(35, 12, 80, 0.48));
    border-color: rgba(139, 92, 246, 0.45);
    color: var(--color-monk-lighter);
}

.action-btn.feature.monk:hover:not(:disabled)[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(82, 32, 168, 0.55), rgba(50, 18, 110, 0.62));
    border-color: rgba(139, 92, 246, 0.9);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.38), 0 6px 14px rgba(0, 0, 0, 0.45);
    color: var(--color-monk-lightest);
}

/* Pirate — Ocean Cyan */
.action-btn.feature.pirate[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(4, 82, 105, 0.38), rgba(2, 52, 70, 0.48));
    border-color: rgba(6, 182, 212, 0.45);
    color: var(--color-pirate-light);
}

.action-btn.feature.pirate:hover:not(:disabled)[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(6, 120, 152, 0.55), rgba(4, 78, 102, 0.62));
    border-color: rgba(6, 182, 212, 0.9);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.38), 0 6px 14px rgba(0, 0, 0, 0.45);
    color: var(--color-pirate-lighter);
}

/* Rogue — Shadow Indigo */
.action-btn.feature.rogue[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(38, 38, 125, 0.38), rgba(22, 22, 80, 0.48));
    border-color: rgba(99, 102, 241, 0.45);
    color: var(--color-rogue-light);
}

.action-btn.feature.rogue:hover:not(:disabled)[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(55, 55, 170, 0.55), rgba(32, 32, 115, 0.62));
    border-color: rgba(99, 102, 241, 0.9);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.38), 0 6px 14px rgba(0, 0, 0, 0.45);
    color: var(--color-rogue-lighter);
}

/* Cleric — Emerald / Divine Teal */
.action-btn.feature.cleric[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(8, 90, 60, 0.38), rgba(4, 55, 38, 0.48));
    border-color: rgba(16, 185, 129, 0.45);
    color: var(--color-cleric-light);
}

.action-btn.feature.cleric:hover:not(:disabled)[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(12, 130, 88, 0.55), rgba(8, 80, 55, 0.62));
    border-color: rgba(16, 185, 129, 0.9);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.38), 0 6px 14px rgba(0, 0, 0, 0.45);
    color: var(--color-cleric-lighter);
}

/* ===== RANGER ===== */
.action-btn.feature.ranger[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(10, 80, 20, 0.38), rgba(5, 50, 12, 0.48));
    border-color: rgba(74, 222, 128, 0.4);
    color: #86efac;
}

.action-btn.feature.ranger:hover:not(:disabled)[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(15, 110, 30, 0.55), rgba(8, 72, 18, 0.62));
    border-color: rgba(74, 222, 128, 0.85);
    box-shadow: 0 0 18px rgba(74, 222, 128, 0.32), 0 6px 14px rgba(0, 0, 0, 0.45);
    color: #bbf7d0;
}

/* ===== UTILITY — FLEE ===== */
.action-btn.utility.flee[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(75, 50, 4, 0.4), rgba(45, 28, 2, 0.5));
    border-color: rgba(245, 158, 11, 0.35);
    color: var(--color-warning-bright);
}

.action-btn.utility.flee:hover:not(:disabled)[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(115, 75, 6, 0.55), rgba(72, 45, 3, 0.62));
    border-color: rgba(245, 158, 11, 0.7);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.28);
    color: var(--color-warning-lightest);
}

/* ===== UTILITY — END TURN ===== */
.action-btn.utility.end-turn[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(30, 55, 80, 0.4), rgba(15, 30, 50, 0.5));
    border-color: rgba(100, 181, 246, 0.35);
    color: rgba(100, 181, 246, 0.85);
}

.action-btn.utility.end-turn:hover:not(:disabled)[b-x875gdys2p] {
    background: linear-gradient(160deg, rgba(45, 80, 115, 0.55), rgba(25, 50, 80, 0.62));
    border-color: rgba(100, 181, 246, 0.65);
    box-shadow: 0 0 14px rgba(100, 181, 246, 0.22);
    color: rgba(144, 202, 249, 1);
}

/* ===== ACTION BADGES ===== */
.action-badge[b-x875gdys2p] {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 99px;
    font-family: sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid var(--color-bg-base);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Item count — small green quantity pill */
.action-badge.count[b-x875gdys2p] {
    background: linear-gradient(135deg, var(--combat-good), var(--combat-good-dark));
    color: white;
}

/* Mana cost — static blue teardrop with subtle inner glow.
   Reads as "resource cost" — always present, informational. */
.action-badge.mana[b-x875gdys2p] {
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    color: white;
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.6),
        inset 0 1px 3px rgba(147, 197, 253, 0.25);
}

/* Cooldown countdown — amber-to-red animated timer badge.
   The spinning ring + pulse convey "ticking down, unavailable". */
.action-badge.cooldown[b-x875gdys2p] {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.95), rgba(153, 27, 27, 0.95));
    color: var(--color-warning-lightest);
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.6),
        0 0 8px rgba(245, 158, 11, 0.35);
    animation: cooldown-tick-b-x875gdys2p 2s ease-in-out infinite;
}

@keyframes cooldown-tick-b-x875gdys2p {
    0%, 100% {
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.6),
            0 0 6px rgba(245, 158, 11, 0.25);
        border-color: rgba(245, 158, 11, 0.5);
    }
    50% {
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.6),
            0 0 14px rgba(239, 68, 68, 0.55);
        border-color: rgba(239, 68, 68, 0.7);
    }
}

/* Ready — green glow beacon that says "use me now!" */
.action-badge.ready[b-x875gdys2p] {
    background: linear-gradient(135deg, var(--combat-good), var(--combat-good-dark));
    color: white;
    border-color: color-mix(in srgb, var(--combat-good) 60%, transparent);
    animation: ready-beacon-b-x875gdys2p 1.8s ease-in-out infinite;
}

@keyframes ready-beacon-b-x875gdys2p {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.6),
            0 0 6px color-mix(in srgb, var(--combat-good) 40%, transparent);
    }
    50% {
        transform: scale(1.15);
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.6),
            0 0 16px color-mix(in srgb, var(--combat-good) 80%, transparent);
    }
}

/* =========================================================
   DESKTOP VARIANT
   ========================================================= */
.combat-actions-panel.desktop .basic-actions .action-buttons[b-x875gdys2p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 10px;
}

.combat-actions-panel.desktop .class-features .action-buttons[b-x875gdys2p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}

.combat-actions-panel.desktop .action-btn[b-x875gdys2p] {
    padding: 9px 12px;
    font-size: 0.72rem;
}

/* =========================================================
   MOBILE VARIANT
   ========================================================= */
.combat-actions-panel.mobile[b-x875gdys2p] {
    padding: 8px;
    gap: 6px;
}

.combat-actions-panel.mobile .actions-panel-title[b-x875gdys2p] {
    font-size: 0.65rem;
}

.combat-actions-panel.mobile .action-section-header[b-x875gdys2p] {
    font-size: 0.65rem;
    padding-bottom: 6px;
}

.combat-actions-panel.mobile .action-buttons[b-x875gdys2p] {
    gap: 6px;
}

.combat-actions-panel.mobile .action-btn[b-x875gdys2p] {
    padding: 7px 10px;
    font-size: 0.65rem;
    min-width: 68px;
    min-height: unset;
}

.combat-actions-panel.mobile .action-btn :deep(.mud-icon-root)[b-x875gdys2p] {
    font-size: 1rem;
}

.combat-actions-panel.mobile .action-badge[b-x875gdys2p] {
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    font-size: 0.58rem;
}

@media (max-width: 380px) {
    .combat-actions-panel.mobile .basic-actions .action-buttons[b-x875gdys2p] {
        flex-direction: column;
    }

    .combat-actions-panel.mobile .action-btn[b-x875gdys2p] {
        width: 100%;
        min-width: unset;
        flex-direction: row;
        min-height: unset;
        padding: 10px 14px;
        justify-content: flex-start;
        gap: 10px;
    }

    .combat-actions-panel.mobile .action-btn :deep(.mud-icon-root)[b-x875gdys2p] {
        font-size: 1.2rem;
    }
}

/* ===== PASSIVES ROW ===== */
.passives-row[b-x875gdys2p] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 2px;
}

.passives-row .passive-indicator[b-x875gdys2p] {
    flex: 1;
    min-width: 120px;
    padding: 6px 10px;
}

.combat-actions-panel.desktop .class-features .passives-row[b-x875gdys2p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.combat-actions-panel.mobile .passives-row[b-x875gdys2p] {
    gap: 5px;
}

.combat-actions-panel.mobile .passives-row .passive-indicator[b-x875gdys2p] {
    padding: 5px 8px;
    min-width: 100px;
}

/* ===== PASSIVE ABILITY INDICATORS ===== */
.passive-indicator[b-x875gdys2p] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(15, 20, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    cursor: default;
}

.passive-indicator.active[b-x875gdys2p] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--combat-good) 15%, transparent) 0%, color-mix(in srgb, var(--combat-good-dark) 10%, transparent) 100%);
    border-color: color-mix(in srgb, var(--combat-good) 40%, transparent);
    box-shadow: 
        0 2px 8px color-mix(in srgb, var(--combat-good) 20%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--combat-good) 10%, transparent);
}

.passive-indicator.inactive[b-x875gdys2p] {
    background: rgba(15, 20, 35, 0.4);
    border-color: rgba(148, 163, 184, 0.15);
    opacity: 0.7;
}

.passive-indicator.info[b-x875gdys2p] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(37, 99, 235, 0.08) 100%);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 
        0 2px 8px rgba(59, 130, 246, 0.15),
        inset 0 1px 0 rgba(59, 130, 246, 0.08);
}

.passive-content[b-x875gdys2p] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.8rem;
    font-weight: 500;
}

.passive-indicator.active .passive-content[b-x875gdys2p] {
    color: var(--combat-good);
}

.passive-indicator.inactive .passive-content[b-x875gdys2p] {
    color: rgba(148, 163, 184, 0.6);
}

.passive-indicator.info .passive-content[b-x875gdys2p] {
    color: rgba(96, 165, 250, 1);
}

.passive-content :deep(.mud-icon-root)[b-x875gdys2p] {
    font-size: 1.1rem;
}

.passive-status[b-x875gdys2p] {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.passive-indicator.active .passive-status[b-x875gdys2p] {
    background: color-mix(in srgb, var(--combat-good) 20%, transparent);
    color: var(--combat-good);
}

.passive-indicator.inactive .passive-status[b-x875gdys2p] {
    background: rgba(148, 163, 184, 0.1);
    color: rgba(148, 163, 184, 0.5);
}

.passive-indicator.info .passive-status[b-x875gdys2p] {
    background: rgba(59, 130, 246, 0.2);
    color: rgba(96, 165, 250, 1);
}

/* Passive indicator hover effect */
.passive-indicator:hover[b-x875gdys2p] {
    border-color: var(--color-border-active);
}

.passive-indicator.active:hover[b-x875gdys2p] {
    border-color: color-mix(in srgb, var(--combat-good) 60%, transparent);
    box-shadow: 
        0 4px 12px color-mix(in srgb, var(--combat-good) 30%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--combat-good) 15%, transparent);
}

.passive-indicator.info:hover[b-x875gdys2p] {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow:
        0 4px 12px rgba(59, 130, 246, 0.25),
        inset 0 1px 0 rgba(59, 130, 246, 0.12);
}

/* =================================================================
   Phase 11: targeting strip + pending-target banner
   ================================================================= */

[b-x875gdys2p] .actions-panel-targeting-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 6px;
    font-size: 0.72rem;
    color: #cbd5e1;
}

[b-x875gdys2p] .actions-panel-targeting-strip.no-target {
    border-color: color-mix(in srgb, var(--combat-bad-light) 35%, transparent);
    background: color-mix(in srgb, var(--combat-bad-deep) 18%, transparent);
    color: var(--combat-bad-lighter);
}

[b-x875gdys2p] .targeting-strip-icon {
    color: rgba(255, 215, 0, 0.7);
}

[b-x875gdys2p] .actions-panel-targeting-strip.no-target .targeting-strip-icon {
    color: var(--combat-bad-lighter);
}

[b-x875gdys2p] .targeting-strip-empty {
    font-size: 0.72rem;
    font-style: italic;
}

/* Board aiming (HUD decision D10): the pending-target banner (AimBannerStrip owns its own styles). */
.actions-panel-aim-banner[b-x875gdys2p] {
    margin-bottom: 4px;
}
/* /Components/Combat/CombatLogEntry.razor.rz.scp.css */
.combat-entry[b-lwrf5705g3] {
    padding: 6px 10px;
    margin: 3px 0;
    border-radius: 4px;
    border-left: 3px solid #6b7280;
    transition: background 0.2s ease;
}

.combat-entry.player-action[b-lwrf5705g3] {
    background: color-mix(in srgb, var(--combat-ally) 10%, transparent);
}

.combat-entry.enemy-action[b-lwrf5705g3] {
    background: color-mix(in srgb, var(--combat-enemy) 10%, transparent);
}

.combat-entry.system-action[b-lwrf5705g3] {
    background: rgba(107, 114, 128, 0.05);
}

.combat-entry.zone-move-entry[b-lwrf5705g3] {
    background: rgba(6, 182, 212, 0.07);
}

.combat-entry.critical-entry[b-lwrf5705g3] {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.2) 0%, rgba(251, 191, 36, 0.05) 100%) !important;
    border-left-color: var(--color-warning-bright) !important;
}

.combat-entry.entry-new[b-lwrf5705g3] {
    animation: slideIn-b-lwrf5705g3 0.3s ease-out;
}

@keyframes slideIn-b-lwrf5705g3 {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.entry-row[b-lwrf5705g3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 10px;
    width: 100%;
}

.entry-icon[b-lwrf5705g3] {
    padding-top: 2px;
    flex-shrink: 0;
}

/* The message keeps at least 11em of the row (WP12g): when the chips would squeeze it below that (two chips in the
   320px docked log, or any chip at a large combat text size) they wrap onto a line of their own under it instead of
   leaving one word per line or running past the log's edge. */
.entry-message[b-lwrf5705g3] {
    flex: 1 1 11em;
    min-width: 0;
    word-wrap: break-word;
    line-height: 1.5;
    padding-top: 2px;
}

.entry-badges[b-lwrf5705g3] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    max-width: 100%;
    margin-left: auto;
}

/* The row's chips (damage, healing, reductions, the roll, the turn summary's totals) are MudBlazor's small chips: a
   12px label in a 24px box. Combat text size (WP12g): the label takes the token and the box follows it in em, so a
   chip never clips its text at Extra large. */
[b-lwrf5705g3] .mud-chip.mud-chip-size-small {
    font-size: var(--ct-sm);
    height: auto;
    min-height: 2em;
    padding: 0 0.67em;
    border-radius: 1em;
}

[b-lwrf5705g3] .mud-chip.mud-chip-size-small .mud-icon-root {
    font-size: 1.5em;
}

.turn-marker[b-lwrf5705g3] {
    margin: 6px 0;
    padding: 4px 10px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0) 100%);
    border-left: 3px solid #6366f1;
    color: #a5b4fc;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 3px;
}

.turn-summary[b-lwrf5705g3] {
    margin: 6px 0;
    padding: 6px 10px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 4px;
    color: #c4b5fd;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.critical-flash[b-lwrf5705g3] {
    animation: critFlash-b-lwrf5705g3 0.5s ease-in-out 2;
}

@keyframes critFlash-b-lwrf5705g3 {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.dice-breakdown[b-lwrf5705g3] {
    margin-top: 6px;
    margin-left: 32px;
    padding-left: 10px;
    font-size: var(--ct-2xs);
    color: #9ca3af;
    line-height: 1.6;
    border-left: 2px solid rgba(255, 215, 0, 0.25);
    width: calc(100% - 32px);
}

.breakdown-line[b-lwrf5705g3] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.breakdown-label[b-lwrf5705g3] {
    font-weight: 600;
    color: #94a3b8;
    min-width: 5.3em;
}

.dice-notation[b-lwrf5705g3] {
    color: #60a5fa;
    font-weight: 500;
}

.dice-rolls[b-lwrf5705g3] {
    color: var(--color-warning-bright);
    font-weight: 600;
}

.modifier[b-lwrf5705g3] {
    color: var(--combat-hit);
    font-weight: 600;
}

.modifier-source[b-lwrf5705g3] {
    color: #9ca3af;
    font-style: italic;
    font-size: var(--ct-3xs);
}

.roll-success[b-lwrf5705g3] {
    color: var(--combat-hit);
    font-weight: 600;
}

.roll-fail[b-lwrf5705g3] {
    color: var(--combat-miss);
    font-weight: 600;
}

.damage-bonus[b-lwrf5705g3] {
    color: #a78bfa;
    font-weight: 600;
}

.damage-total[b-lwrf5705g3] {
    color: var(--combat-hit);
    font-weight: 700;
}

.damage-final[b-lwrf5705g3] {
    color: var(--combat-damage);
    font-weight: 700;
}

.reduction-hardened[b-lwrf5705g3] {
    color: #a855f7;
    font-weight: 600;
}

.reduction-rage[b-lwrf5705g3] {
    color: #f59e0b;
    font-weight: 700;
}

.reduction-mana[b-lwrf5705g3] {
    color: #60a5fa;
    font-weight: 600;
}

.text-player[b-lwrf5705g3]    { color: var(--combat-good-light); }
.text-enemy[b-lwrf5705g3]     { color: var(--combat-bad-light); }
.text-critical[b-lwrf5705g3]  { color: var(--color-warning-bright); font-weight: bold; }
.text-victory[b-lwrf5705g3]   { color: var(--color-warning-bright); font-weight: bold; }
.text-defeat[b-lwrf5705g3]    { color: var(--combat-bad-light); font-weight: bold; }
.text-info[b-lwrf5705g3]      { color: #e5e7eb; }
.text-movement[b-lwrf5705g3]  { color: #06b6d4; font-style: italic; }

.icon-attack[b-lwrf5705g3]    { color: var(--combat-hit-icon) !important; }
.icon-damage[b-lwrf5705g3]    { color: var(--combat-damage-soft) !important; }
.icon-heal[b-lwrf5705g3]      { color: var(--combat-hit-icon) !important; }
.icon-special[b-lwrf5705g3]   { color: #ffd43b !important; }
.icon-info[b-lwrf5705g3]      { color: #4dabf7 !important; }
.icon-error[b-lwrf5705g3]     { color: #868e96 !important; }
.icon-victory[b-lwrf5705g3]   { color: #ffd43b !important; }
.icon-movement[b-lwrf5705g3]  { color: #06b6d4 !important; }

[b-lwrf5705g3] .damage-badge-crit {
    animation: pop-b-lwrf5705g3 0.3s ease-out;
}

@keyframes pop-b-lwrf5705g3 {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

[b-lwrf5705g3] .crit-badge {
    animation: pulse-b-lwrf5705g3 1.5s ease-in-out infinite;
}

@keyframes pulse-b-lwrf5705g3 {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

[b-lwrf5705g3] .damage-reduction-badge {
    background: rgba(168, 85, 247, 0.15) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    font-weight: 600 !important;
    animation: fadeIn-b-lwrf5705g3 0.3s ease-out;
}

[b-lwrf5705g3] .damage-reduction-badge .mud-icon-root {
    font-size: 1.17em !important;
}

@keyframes fadeIn-b-lwrf5705g3 {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Phase 12.1 — Timeline sync highlight.
   The combat log subscribes to CombatAnimationBridge.PlaybackStarted and flags
   the row whose VFX is currently dispatching. A soft left-border pulse + subtle
   backdrop tint draws the eye to the narrative event that matches what just
   moved on the battlefield. Pulse is purely decorative — reduced-motion users
   still get the static border/background so they see the sync. */
.combat-entry.log-entry-playing[b-lwrf5705g3] {
    background: linear-gradient(90deg,
        rgba(59, 130, 246, 0.12) 0%,
        rgba(59, 130, 246, 0.04) 40%,
        transparent 100%);
    box-shadow: inset 3px 0 0 rgba(147, 197, 253, 0.9);
    animation: logEntryPlayingPulse-b-lwrf5705g3 900ms ease-out;
}

@keyframes logEntryPlayingPulse-b-lwrf5705g3 {
    0%   { box-shadow: inset 3px 0 0 rgba(147, 197, 253, 0.9),
                       0 0 0 0 rgba(59, 130, 246, 0.45); }
    60%  { box-shadow: inset 3px 0 0 rgba(147, 197, 253, 0.9),
                       0 0 0 6px rgba(59, 130, 246, 0.0); }
    100% { box-shadow: inset 3px 0 0 rgba(147, 197, 253, 0.9); }
}

@media (prefers-reduced-motion: reduce) {
    .combat-entry.entry-new[b-lwrf5705g3],
    .critical-flash[b-lwrf5705g3],
    .combat-entry.log-entry-playing[b-lwrf5705g3],
    [b-lwrf5705g3] .damage-badge-crit,
    [b-lwrf5705g3] .crit-badge,
    [b-lwrf5705g3] .damage-reduction-badge {
        animation: none;
    }
}

/* H1 PR 2 — Item lore surfacing in combat. Visually subdued treatment so
   lore reveals sit between the kinetic combat events without competing for
   attention. Gold border-left matches the design system primary accent; the
   Cinzel item-name keeps the tabletop tone. */
.log-lore-reveal[b-lwrf5705g3] {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-xs) 0;
    border-left: 2px solid rgba(255, 215, 0, 0.4);
    background: rgba(255, 215, 0, 0.04);
    border-radius: 4px;
}

.log-lore-icon[b-lwrf5705g3] {
    color: var(--color-primary);
    opacity: 0.75;
    flex-shrink: 0;
    margin-top: 2px;
}

.log-lore-body[b-lwrf5705g3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.log-lore-item-name[b-lwrf5705g3] {
    font-family: var(--font-display);
    color: var(--color-primary);
    font-size: var(--ct-base);
    letter-spacing: 0.03em;
}

.log-lore-text[b-lwrf5705g3] {
    font-style: italic;
    color: var(--color-text-secondary);
    line-height: 1.4;
    font-size: var(--ct-base);
}
/* /Components/Combat/CombatLogHeader.razor.rz.scp.css */
[b-g221qwgd2w] .combat-log-header {
    padding: 8px 12px !important;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.header-title-row[b-g221qwgd2w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.header-icon[b-g221qwgd2w] {
    color: #ffd700;
}

/* MudText: its element carries no scope attribute, hence ::deep. The title keeps MudText's subtitle1 face (the Cinzel
   rule written here before never matched: it lacked ::deep) and takes the combat text size (WP12g). */
[b-g221qwgd2w] .header-title {
    font-size: var(--ct-lg);
}

.header-actions[b-g221qwgd2w] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* .mud-chip too: MudBlazor's small-chip rule (12px) has the same weight and loads after the scoped bundle. */
[b-g221qwgd2w] .mud-chip.entry-count-chip {
    height: auto !important;
    min-height: 2em;
    font-size: var(--ct-sm);
    background: rgba(0, 0, 0, 0.3) !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 0 10px !important;
}
/* /Components/Combat/CombatLogStats.razor.rz.scp.css */
.stats-inline[b-jr36lvywa5] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: 8px;
}

/* Combat text size (WP12g): the label takes the token and the chip's box follows it in em (22px at Medium). */
[b-jr36lvywa5] .stat-chip {
    height: auto !important;
    min-height: 1.84em;
    font-weight: 500 !important;
    font-size: var(--ct-sm) !important;
}

[b-jr36lvywa5] .stat-chip .mud-icon-root {
    font-size: 1.17em !important;
}

/* The Desktop / Wide log column (CombatLogDock, 320px pinned; WP12b): the stats get a line of their own under the
   title, about 157px, and at the default chip spacing the third chip ("0%") wrapped onto a second line. Tighter here:
   no lead margin, a 4px gap, no outer chip margin, and a slimmer padding and icon gap. Still wraps rather than
   overflowing once crits and healing add chips. The tablet's full-log drawer keeps the roomier look. */
.combat-log-dock .stats-inline[b-jr36lvywa5] {
    gap: 4px;
    margin-left: 0;
}

.combat-log-dock .stats-inline[b-jr36lvywa5]  .stat-chip {
    margin: 0;
    padding: 0 6px;
}

.combat-log-dock .stats-inline[b-jr36lvywa5]  .stat-chip .mud-chip-icon {
    margin-left: 0;
    margin-right: 2px;
    margin-inline-start: 0;
    margin-inline-end: 2px;
}
/* /Components/Combat/CombatSettingsDrawer.razor.rz.scp.css */
/* ===== Combat Settings Drawer (polish item 1) =====
   The drawer, its header and its selects are MudBlazor components, whose elements never carry this file's isolation
   scope: their styles live in combat-header.css. Only the drawer's own markup (.csd-*) is styled here. */

.csd-header-row[b-909uin77u1] {
    display: flex;
    align-items: center;
    width: 100%;
    color: #ffd700;
    font-family: 'Cinzel', serif;
}

/* The drawer content is a flex column (MudBlazor), so the settings fill what the header leaves and scroll on their own. */
.csd-content[b-909uin77u1] {
    padding: 12px 16px 24px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.csd-section[b-909uin77u1] {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.csd-section:last-of-type[b-909uin77u1] {
    border-bottom: none;
}

.csd-section-title[b-909uin77u1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ct-md);
    font-weight: 700;
    color: var(--color-text-secondary, #cbd5e1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.csd-help-text[b-909uin77u1] {
    margin-top: 6px;
    font-size: var(--ct-sm);
    color: var(--color-text-tertiary, #94a3b8);
    line-height: 1.35;
}
/* /Components/Combat/EnemyRoster.razor.rz.scp.css */
/* EnemyRoster component — --mp-* var() calls fall back to literal values inline (FocusMonsterPanel removed). */

.enemy-roster[b-ge04umde3e] {
    padding: 12px 0 4px;
}

.roster-header[b-ge04umde3e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 8px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    margin-bottom: 10px;
}

.roster-title[b-ge04umde3e] {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.roster-count[b-ge04umde3e] {
    font-size: 0.72rem;
    color: var(--mp-text-secondary, #9a9590);
}

.roster-grid[b-ge04umde3e] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Individual enemy card */
.roster-enemy[b-ge04umde3e] {
    flex-shrink: 0;
    width: 80px;
    background: var(--mp-bg-card, #1a1e28);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.roster-enemy:hover:not(.defeated)[b-ge04umde3e] {
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.roster-enemy.selected[b-ge04umde3e] {
    border-color: var(--color-primary, #ffd700);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.roster-enemy.defeated[b-ge04umde3e] {
    opacity: 0.45;
    filter: grayscale(70%);
    cursor: default;
}

/* Image container */
.roster-enemy-img-container[b-ge04umde3e] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}

.roster-enemy-img[b-ge04umde3e] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.roster-defeated-overlay[b-ge04umde3e] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--combat-bad);
    z-index: 2;
}

.roster-turn-indicator[b-ge04umde3e] {
    position: absolute;
    inset: 0;
    border: 2px solid var(--color-warning-bright);
    border-radius: 0;
    animation: rosterTurnPulse-b-ge04umde3e 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes rosterTurnPulse-b-ge04umde3e {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* HP bar — below image, not overlaid */
.roster-enemy-hp[b-ge04umde3e] {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.roster-enemy-hp-fill[b-ge04umde3e] {
    height: 100%;
    background: var(--combat-hp-high-light);
    transition: width 0.35s ease;
}

.roster-enemy-hp-fill.warning[b-ge04umde3e] {
    background: var(--combat-hp-mid-yellow-light);
}

.roster-enemy-hp-fill.danger[b-ge04umde3e] {
    background: var(--combat-hp-danger);
}

.roster-enemy-hp-fill.critical[b-ge04umde3e] {
    background: var(--combat-hp-low);
    animation: critRosterPulse-b-ge04umde3e 1s ease-in-out infinite;
}

@keyframes critRosterPulse-b-ge04umde3e {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Name + zone label */
.roster-enemy-info[b-ge04umde3e] {
    padding: 5px 6px;
    text-align: center;
}

.roster-enemy-name[b-ge04umde3e] {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    color: var(--mp-text-primary, #e8e6e1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.roster-zone-label[b-ge04umde3e] {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.roster-zone-label.zone-vanguard[b-ge04umde3e] { color: #ef4444; }
.roster-zone-label.zone-flankleft[b-ge04umde3e] { color: #f59e0b; }
.roster-zone-label.zone-flankright[b-ge04umde3e] { color: #f59e0b; }
.roster-zone-label.zone-rear[b-ge04umde3e] { color: #6b7280; }
/* /Components/Combat/FormationZoneCard.razor.rz.scp.css */
/* FormationZoneCard scoped styles */

.formation-zone-card[b-6cgvfcqnxc] {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: var(--space-md);
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
}

.formation-zone-card:hover[b-6cgvfcqnxc] {
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
}

.formation-zone-card.selected[b-6cgvfcqnxc] {
    border-color: rgba(34, 197, 94, 0.7);
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.3);
}

/* ===== COMPACT MODE (portrait tablet / small screens) ===== */
.formation-zone-compact[b-6cgvfcqnxc] {
    padding: var(--space-sm) var(--space-md) !important;
    min-height: 52px;
}

.fzc-compact-row[b-6cgvfcqnxc] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.fzc-compact-info[b-6cgvfcqnxc] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.fzc-compact-name[b-6cgvfcqnxc] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fzc-compact-bonus[b-6cgvfcqnxc] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== CAPACITY INDICATOR ===== */
.fzc-capacity[b-6cgvfcqnxc] {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    margin-top: 2px;
}

.fzc-capacity-full[b-6cgvfcqnxc] {
    color: rgba(244, 67, 54, 0.9);
    background: rgba(244, 67, 54, 0.15);
}

.fzc-capacity-label[b-6cgvfcqnxc] {
    font-weight: var(--font-weight-semibold);
}

/* ===== INVADED STATE (monsters physically present in zone) ===== */
.formation-zone-card.zone-invaded[b-6cgvfcqnxc] {
    border-color: rgba(244, 67, 54, 0.6);
    box-shadow: 0 0 10px rgba(244, 67, 54, 0.2);
}

/* ===== FULL STATE (zone at capacity) ===== */
.formation-zone-card.zone-full[b-6cgvfcqnxc] {
    opacity: 0.75;
}

/* ===== OCCUPANT CHIPS ===== */
.fzc-occupant[b-6cgvfcqnxc] {
    margin: 1px 0;
    max-width: 120px;
}

.fzc-occupant-player[b-6cgvfcqnxc] {
    /* Success color handled by MudChip Color.Success */
}

.fzc-occupant-monster[b-6cgvfcqnxc] {
    /* Error color handled by MudChip Color.Error */
}
/* /Components/Combat/HUD/CompactPlayerHud.razor.rz.scp.css */
/* CompactPlayerHud.razor.css — scoped styles for the new compact player HUD.
   Three variants share the same base; modifier classes tweak dimensions, layout
   density, and which sub-elements show. Visual language matches Phase 4/5
   (slate gradient, gold accent, Cinzel name typography). */

/* ===== Base ===== */
.compact-player-hud[b-upyuwl3rz4] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 215, 0, 0.20);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    color: #f1f5f9;
}

.compact-player-hud:hover[b-upyuwl3rz4] {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 215, 0, 0.25);
}

.compact-player-hud.is-turn[b-upyuwl3rz4] {
    border-color: rgba(255, 193, 7, 0.6);
    animation: cph-turn-pulse-b-upyuwl3rz4 2s ease-in-out infinite;
}

@keyframes cph-turn-pulse-b-upyuwl3rz4 {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 193, 7, 0.4); }
    50% { box-shadow: 0 0 25px rgba(255, 193, 7, 0.8), 0 0 40px rgba(255, 193, 7, 0.3); }
}

/* Class-colored left border accent (mirrors PlayerCard) */
.compact-player-hud.warrior[b-upyuwl3rz4]   { border-left: 3px solid var(--color-danger); }
.compact-player-hud.wizard[b-upyuwl3rz4]    { border-left: 3px solid var(--color-info); }
.compact-player-hud.ranger[b-upyuwl3rz4]    { border-left: 3px solid var(--color-ranger); }
.compact-player-hud.rogue[b-upyuwl3rz4]     { border-left: 3px solid var(--color-rogue); }
.compact-player-hud.paladin[b-upyuwl3rz4]   { border-left: 3px solid var(--color-paladin); }
.compact-player-hud.bard[b-upyuwl3rz4]      { border-left: 3px solid var(--color-bard); }
.compact-player-hud.monk[b-upyuwl3rz4]      { border-left: 3px solid var(--color-monk); }
.compact-player-hud.barbarian[b-upyuwl3rz4] { border-left: 3px solid var(--color-barbarian); }
.compact-player-hud.cleric[b-upyuwl3rz4]    { border-left: 3px solid var(--color-cleric); }
.compact-player-hud.pirate[b-upyuwl3rz4]    { border-left: 3px solid var(--color-pirate); }

/* Damage / heal animations */
.compact-player-hud.taking-damage[b-upyuwl3rz4] {
    animation: cph-damage-flash-b-upyuwl3rz4 0.5s ease-out, cph-shake-b-upyuwl3rz4 0.4s ease-out;
}
.compact-player-hud.healing[b-upyuwl3rz4] { animation: cph-heal-flash-b-upyuwl3rz4 0.6s ease-out; }
.compact-player-hud.critical-hit[b-upyuwl3rz4] { animation: cph-critical-flash-b-upyuwl3rz4 0.7s ease-out; }

@keyframes cph-damage-flash-b-upyuwl3rz4 {
    0% { filter: brightness(1); }
    25% { filter: brightness(1.3) saturate(1.5); box-shadow: 0 0 20px color-mix(in srgb, var(--combat-damage) 80%, transparent), inset 0 0 30px color-mix(in srgb, var(--combat-damage) 30%, transparent); }
    50% { filter: brightness(0.8); }
    100% { filter: brightness(1); }
}
@keyframes cph-heal-flash-b-upyuwl3rz4 {
    0% { filter: brightness(1); }
    25% { filter: brightness(1.3); box-shadow: 0 0 25px color-mix(in srgb, var(--combat-good) 80%, transparent); }
    100% { filter: brightness(1); }
}
@keyframes cph-critical-flash-b-upyuwl3rz4 {
    0% { transform: scale(1); }
    15% { transform: scale(1.05); filter: brightness(1.5); box-shadow: 0 0 30px rgba(245, 158, 11, 1); }
    30% { transform: scale(0.98); }
    100% { transform: scale(1); }
}
@keyframes cph-shake-b-upyuwl3rz4 {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* ===== Portrait column ===== */
.cph-portrait-wrap[b-upyuwl3rz4] {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.cph-portrait-level[b-upyuwl3rz4] {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-warning-light);
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.28);
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.cph-portrait[b-upyuwl3rz4] {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.4);
}

.cph-portrait-fallback[b-upyuwl3rz4] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.6);
}

.cph-portrait-img[b-upyuwl3rz4] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cph-turn-dot[b-upyuwl3rz4] {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-warning-bright);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
    animation: cph-pulse-b-upyuwl3rz4 1.2s ease-in-out infinite;
}

@keyframes cph-pulse-b-upyuwl3rz4 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

/* ===== Body (right column) ===== */
.cph-body[b-upyuwl3rz4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Top name row */
.cph-name-row[b-upyuwl3rz4] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cph-name[b-upyuwl3rz4] {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffd700;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cph-spacer[b-upyuwl3rz4] { flex: 1; }

.cph-class[b-upyuwl3rz4] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.cph-class.warrior-text[b-upyuwl3rz4]   { color: var(--color-danger); }
.cph-class.wizard-text[b-upyuwl3rz4]    { color: var(--color-info); }
.cph-class.ranger-text[b-upyuwl3rz4]    { color: var(--color-success); }
.cph-class.rogue-text[b-upyuwl3rz4]     { color: var(--color-rogue); }
.cph-class.paladin-text[b-upyuwl3rz4]   { color: var(--color-warning); }
.cph-class.bard-text[b-upyuwl3rz4]      { color: var(--color-bard); }
.cph-class.monk-text[b-upyuwl3rz4]      { color: var(--color-monk); }
.cph-class.barbarian-text[b-upyuwl3rz4] { color: var(--color-barbarian); }
.cph-class.cleric-text[b-upyuwl3rz4]    { color: var(--color-cleric); }

.cph-you-badge[b-upyuwl3rz4] {
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    color: white;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ===== Resource bars ===== */
.cph-bars[b-upyuwl3rz4] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cph-bar-row[b-upyuwl3rz4] {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.cph-bar-label[b-upyuwl3rz4] {
    font-weight: 700;
    color: var(--color-text-tertiary);
    letter-spacing: 0.05em;
    text-align: left;
}

.cph-bar[b-upyuwl3rz4] {
    position: relative;
    height: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
}

.cph-bar-drain[b-upyuwl3rz4] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    z-index: 1;
    transition: width 1.6s ease-in 0.3s;
}

.cph-bar-drain.hp[b-upyuwl3rz4] {
    background: linear-gradient(90deg, color-mix(in srgb, var(--combat-damage) 45%, transparent), color-mix(in srgb, var(--combat-bad-light) 35%, transparent));
}

.cph-bar-fill[b-upyuwl3rz4] {
    position: relative;
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    z-index: 2;
}

.cph-bar-fill.hp[b-upyuwl3rz4] {
    background: linear-gradient(90deg, var(--combat-hp-high), var(--combat-hp-high-light));
}
.cph-bar-fill.hp.low[b-upyuwl3rz4] {
    background: linear-gradient(90deg, var(--combat-hp-mid), var(--combat-hp-mid-light));
}
.cph-bar-fill.hp.critical[b-upyuwl3rz4] {
    background: linear-gradient(90deg, var(--combat-hp-low), var(--combat-hp-low-light));
    animation: cph-hp-pulse-b-upyuwl3rz4 1.5s ease-in-out infinite;
}
.cph-bar-fill.mana[b-upyuwl3rz4] {
    background: linear-gradient(90deg, var(--color-info), var(--color-info-light));
}
/* Ki and Swagger wear their own resource tokens, so neither reads as the low-HP amber above. */
.cph-bar-fill.ki[b-upyuwl3rz4] {
    background: linear-gradient(90deg, var(--color-monk), var(--color-ki));
}
.cph-bar-fill.swagger[b-upyuwl3rz4] {
    background: linear-gradient(90deg, var(--color-swagger), var(--color-pirate-light));
}

@keyframes cph-hp-pulse-b-upyuwl3rz4 {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); box-shadow: 0 0 6px color-mix(in srgb, var(--combat-hp-low) 50%, transparent); }
}

/* Predicted incoming damage (translucent red sliver on right edge of HP bar) */
.cph-bar-incoming[b-upyuwl3rz4] {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    background: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--combat-damage) 55%, transparent),
        color-mix(in srgb, var(--combat-damage) 55%, transparent) 4px,
        color-mix(in srgb, var(--combat-bad-deep) 45%, transparent) 4px,
        color-mix(in srgb, var(--combat-bad-deep) 45%, transparent) 8px
    );
    border-left: 1px solid color-mix(in srgb, var(--combat-damage) 85%, transparent);
    pointer-events: none;
}

/* Mana bar cost ticks */
.cph-bar-tick[b-upyuwl3rz4] {
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 1px;
    background: rgba(255, 255, 255, 0.5);
    z-index: 4;
    pointer-events: none;
}

.cph-bar-value[b-upyuwl3rz4] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ===== AC + weapon row ===== */
.cph-ac-weapon-row[b-upyuwl3rz4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
}

.cph-ac[b-upyuwl3rz4] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.cph-ac-label[b-upyuwl3rz4] {
    font-size: 0.65rem;
    color: var(--color-text-tertiary);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.cph-ac-value[b-upyuwl3rz4] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-warning-light);
}

.cph-ac-line[b-upyuwl3rz4] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.75rem;
    padding: 1px 0;
}

.cph-ac-total[b-upyuwl3rz4] {
    font-weight: 700;
    border-top: 1px solid rgba(255, 215, 0, 0.3);
    padding-top: 4px;
    margin-top: 2px;
}

.cph-weapon[b-upyuwl3rz4] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.cph-weapon:hover[b-upyuwl3rz4] {
    background: rgba(255, 255, 255, 0.06);
}

.cph-weapon.swappable[b-upyuwl3rz4] {
    color: var(--color-info-light);
}

.cph-weapon-name[b-upyuwl3rz4] {
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.cph-weapon-dice[b-upyuwl3rz4] {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ===== Bottom row (pips, pet, status, more) ===== */
.cph-bottom-row[b-upyuwl3rz4] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.cph-pet[b-upyuwl3rz4] {
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.07);
    flex-shrink: 0;
}

.cph-pet.clickable[b-upyuwl3rz4] { cursor: pointer; }
.cph-pet.clickable:hover[b-upyuwl3rz4] { border-color: rgba(251, 191, 36, 0.75); }

.cph-pet-portrait[b-upyuwl3rz4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cph-pet-icon[b-upyuwl3rz4] {
    font-size: 14px;
    color: var(--color-warning-bright);
    margin: auto;
}

.cph-status-strip[b-upyuwl3rz4] {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.cph-status-pip[b-upyuwl3rz4] {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    transition: transform 0.15s ease;
}

.cph-status-pip:hover[b-upyuwl3rz4] {
    transform: translateY(-1px) scale(1.05);
}

.cph-status-pip[b-upyuwl3rz4]  .mud-icon-root {
    font-size: 14px;
    color: white;
}

.cph-status-pip.se-more[b-upyuwl3rz4] {
    font-size: 10px;
    font-weight: 700;
    color: white;
}

.cph-status-duration[b-upyuwl3rz4] {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    font-size: 8px;
    font-weight: 700;
    padding: 0 2px;
    border-radius: 2px;
    line-height: 1.2;
    min-width: 9px;
    text-align: center;
}

.cph-more-btn[b-upyuwl3rz4] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
    margin-left: auto;
}

.cph-more-btn:hover[b-upyuwl3rz4] {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.4);
    color: var(--color-warning-light);
}

.cph-more-btn .material-icons[b-upyuwl3rz4] { font-size: 16px; }

/* ===== "More" popover ===== */
.cph-more-popover[b-upyuwl3rz4] {
    max-width: 360px;
    min-width: 280px;
    z-index: 2000;
}

.cph-more-content[b-upyuwl3rz4] {
    padding: 8px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 1) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    color: #f1f5f9;
}

.cph-more-header[b-upyuwl3rz4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    margin-bottom: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: #ffd700;
}

.cph-more-section[b-upyuwl3rz4] {
    margin-bottom: 8px;
}

.cph-more-section-title[b-upyuwl3rz4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
    padding: 0 4px;
}

.cph-more-row[b-upyuwl3rz4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px;
    font-size: 0.78rem;
    border-radius: 4px;
    transition: background 0.12s ease;
}

.cph-more-row.clickable[b-upyuwl3rz4] {
    cursor: pointer;
}

.cph-more-row.clickable:hover[b-upyuwl3rz4] {
    background: rgba(255, 255, 255, 0.06);
}

.cph-more-row-label[b-upyuwl3rz4] {
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.cph-more-row-value[b-upyuwl3rz4] {
    color: var(--color-text-primary);
    font-weight: 500;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cph-more-empty[b-upyuwl3rz4] {
    color: var(--color-warning-bright);
    font-style: italic;
    text-align: center;
}

.cph-conn-dot[b-upyuwl3rz4] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.cph-conn-dot.connected[b-upyuwl3rz4] { background: var(--combat-good); box-shadow: 0 0 6px color-mix(in srgb, var(--combat-good) 50%, transparent); }
.cph-conn-dot.disconnected[b-upyuwl3rz4] { background: var(--combat-bad); }

/* ===== Damage / healing overlays ===== */
.cph-damage-overlay[b-upyuwl3rz4],
.cph-healing-overlay[b-upyuwl3rz4] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 20;
    pointer-events: none;
    border-radius: 10px;
    animation: cph-overlay-in-b-upyuwl3rz4 0.25s ease-out, cph-overlay-out-b-upyuwl3rz4 0.35s ease-in 0.85s forwards;
}

.cph-damage-overlay[b-upyuwl3rz4] {
    background: color-mix(in srgb, var(--combat-bad-deep) 85%, transparent);
    border: 2px solid color-mix(in srgb, var(--combat-damage) 60%, transparent);
}

.cph-damage-overlay.crit[b-upyuwl3rz4] {
    background: rgba(120, 53, 15, 0.9);
    border: 2px solid rgba(245, 158, 11, 0.8);
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.4);
}

.cph-healing-overlay[b-upyuwl3rz4] {
    background: color-mix(in srgb, var(--combat-heal-deep) 85%, transparent);
    border: 2px solid color-mix(in srgb, var(--combat-good) 60%, transparent);
}

.cph-overlay-crit[b-upyuwl3rz4] {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fcd34d;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.8);
}

.cph-overlay-amount[b-upyuwl3rz4] {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    animation: cph-overlay-bounce-b-upyuwl3rz4 0.4s ease-out;
}

.cph-overlay-amount.damage[b-upyuwl3rz4] { font-size: 1.6rem; color: var(--combat-damage-soft); }
.cph-damage-overlay.crit .cph-overlay-amount.damage[b-upyuwl3rz4] { font-size: 1.9rem; color: var(--color-warning-bright); }
.cph-overlay-amount.healing[b-upyuwl3rz4] { font-size: 1.6rem; color: var(--combat-heal); }

.cph-overlay-source[b-upyuwl3rz4] {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@keyframes cph-overlay-in-b-upyuwl3rz4 {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes cph-overlay-out-b-upyuwl3rz4 {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes cph-overlay-bounce-b-upyuwl3rz4 {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ===== Variant: BottomSlot (default — desktop / wide bottom row) ===== */
.compact-player-hud--bottom-slot[b-upyuwl3rz4] {
    width: 100%;
    max-width: 320px;
}

/* ===== Variant: StickyTop (mobile / tablet sticky bar at top) ===== */
.compact-player-hud--sticky-top[b-upyuwl3rz4] {
    border-radius: 0 0 8px 8px;
    border-top: none;
    padding: 6px 10px;
    margin-bottom: 0;
    backdrop-filter: blur(10px);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.92) 100%);
}

.compact-player-hud--sticky-top .cph-portrait[b-upyuwl3rz4] {
    width: 44px;
    height: 44px;
}

.compact-player-hud--sticky-top .cph-portrait-level[b-upyuwl3rz4] {
    font-size: 0.55rem;
    padding: 0 4px;
}

.compact-player-hud--sticky-top .cph-name[b-upyuwl3rz4] {
    font-size: 0.85rem;
}

.compact-player-hud--sticky-top .cph-bars[b-upyuwl3rz4] {
    gap: 2px;
}

.compact-player-hud--sticky-top .cph-bar[b-upyuwl3rz4] {
    height: 8px;
}

/* StickyTop pip strip — drop the rounded outline + background plate so the pips
   sit flush below the HP/AC row. Vertical space is at a premium on mobile and
   the pips already self-identify via colored borders. The dashed-underline
   feel of the rounded plate above the HP bar was the cluttered surface the
   wireframe spec called out — keep the pips themselves but ditch the chrome. */
.compact-player-hud--sticky-top .cph-bottom-row[b-upyuwl3rz4] {
    gap: 4px;
    margin-top: 1px;
}

.compact-player-hud--sticky-top .action-economy-pips[b-upyuwl3rz4] {
    padding: 0;
    background: transparent;
    border: none;
    gap: 4px;
}

.compact-player-hud--sticky-top .ae-pip[b-upyuwl3rz4] {
    width: 18px;
    height: 18px;
    border-width: 1px;
}

.compact-player-hud--sticky-top .ae-pip .material-icons[b-upyuwl3rz4] {
    font-size: 10px;
}

.compact-player-hud--sticky-top .cph-status-pip[b-upyuwl3rz4] {
    width: 18px;
    height: 18px;
}

/* ===== Variant: PartyTile (multiplayer per-player card) ===== */
.compact-player-hud--party-tile[b-upyuwl3rz4] {
    width: 100%;
    max-width: 360px;
    padding: 12px;
}

.compact-player-hud--party-tile .cph-portrait[b-upyuwl3rz4] {
    width: 64px;
    height: 64px;
}

.compact-player-hud--party-tile .cph-name[b-upyuwl3rz4] {
    font-size: 1rem;
}
/* /Components/Combat/HUD/HotbarSlotFace.razor.rz.scp.css */
/* HotbarSlotFace.razor.css: the compact face of an economy hotbar slot (combat HUD rethink WP12). The card's button
   is the frame (sized and padded by CombatHotbar.razor.css, position: relative); this file lays out what sits inside
   it. Tokens only. --eco is the lane's turn-slot token (CombatHotbar's .hotbar-lane--*), so the hotkey wears its
   lane's color; outside a lane it falls back to the primary gold. The icon shares the top row with the two corner
   chips (hotkey left, cost / cooldown / "!" right) and the name takes the two lines under it. */

.slot-face-key[b-fczsndnrt6],
.slot-face-cost[b-fczsndnrt6],
.slot-face-cd[b-fczsndnrt6],
.slot-face-ready[b-fczsndnrt6] {
    position: absolute;
    top: 3px;
    z-index: 1;
    height: 14px;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    line-height: 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.slot-face-key[b-fczsndnrt6] {
    left: 3px;
    min-width: 14px;
    padding: 0 2px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--eco, var(--color-primary)) 60%, transparent);
    background: color-mix(in srgb, var(--color-bg-base) 88%, transparent);
    color: var(--eco, var(--color-primary));
    font-size: 0.58rem;
}

/* The cost, outlined in its resource color (never a filled eco token, which would read as a lane tag). */
.slot-face-cost[b-fczsndnrt6] {
    right: 3px;
    min-width: 14px;
    padding: 0 3px;
    border-radius: 7px;
    border: 1px solid var(--color-mana);
    background: color-mix(in srgb, var(--color-bg-base) 88%, transparent);
    color: var(--color-info-lighter);
    font-size: 0.58rem;
}

.slot-face-cost.cost-ki[b-fczsndnrt6] {
    border-color: var(--color-ki);
    color: var(--color-ki);
}

.slot-face-cost.cost-swagger[b-fczsndnrt6] {
    border-color: var(--color-swagger);
    color: var(--color-swagger);
}

/* A cost lowered by the caster's active effects (the full card's .cost-reduced). */
.slot-face-cost.is-reduced[b-fczsndnrt6] {
    color: var(--combat-good-lighter);
}

/* The cooldown takes the cost's corner while it runs; it stays bright while the rest of the face dims. */
.slot-face-cd[b-fczsndnrt6] {
    right: 3px;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 0 4px 0 2px;
    border-radius: 7px;
    border: 1px solid var(--color-warning);
    background: var(--color-bg-base);
    color: var(--color-warning-bright);
    font-size: 0.6rem;
}

.slot-face-cd .material-icons[b-fczsndnrt6] {
    font-size: 10px;
}

/* A once-per-battle card still unused. */
.slot-face-ready[b-fczsndnrt6] {
    right: 3px;
    width: 14px;
    border-radius: var(--radius-round);
    background: var(--combat-good-light);
    color: var(--color-bg-base);
    font-size: 0.6rem;
    line-height: 14px;
}

.slot-face-icon[b-fczsndnrt6] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 22px;
    color: var(--color-primary);
}

/* A spell's icon keeps its school color (the global .spell-school-* .mud-icon-root rule on the card). */
.slot-face-icon[b-fczsndnrt6]  .mud-icon-root {
    width: 22px;
    height: 22px;
    font-size: 22px;
}

.slot-face-name[b-fczsndnrt6] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* The slot's full inner width: the name reaches into the frame's 3px side padding (the corner chips are above it). */
    max-width: calc(100% + 4px);
    margin: 4px -2px 0;
    color: var(--color-text-lightest);
    font-family: var(--font-primary);
    font-size: 0.64rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.15;
    text-align: center;
    /* The size tier (HotbarSlotFace.NameSizeClass, from the longest word) keeps every word whole; breaking inside one
       is the last resort only, for a word longer than any tier was sized for. */
    overflow-wrap: anywhere;
}

/* 10 to 12 letters ("Disintegrate", "Restoration"). */
.slot-face-name.name-long[b-fczsndnrt6] {
    font-size: 0.54rem;
}

/* 13 letters or more ("Mordenkainen's"). */
.slot-face-name.name-very-long[b-fczsndnrt6] {
    font-size: 0.48rem;
}

/* Greyed (the gate's reason is in the hover zoom): the icon, name, hotkey and cost dim; a cooldown stays readable. */
.disabled .slot-face-icon[b-fczsndnrt6],
.disabled .slot-face-name[b-fczsndnrt6],
.disabled .slot-face-key[b-fczsndnrt6],
.disabled .slot-face-cost[b-fczsndnrt6],
.disabled .slot-face-ready[b-fczsndnrt6] {
    opacity: 0.45;
    filter: grayscale(0.6);
}

/* Read once after the name by a screen reader; never drawn. */
.slot-face-sr[b-fczsndnrt6] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Combat/HUD/SpellCard.razor.rz.scp.css */
/* Combat HUD rethink WP9c: the spell card face. The card's frame, badges and hover zoom keep their global rules
   (combat-shared.css, .spell-card-mini / .spell-hz-*); this file styles what the face adds: the hex range badge,
   the dice row, the reduced mana cost and the hover zoom's effect / area / save lines. Tokens only; the damage-type
   colors are the global .damage-type-* palette (design-system.css). */

.spell-card-range-badge[b-mfdueihnme] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.spell-face-hex-glyph[b-mfdueihnme] {
    font-size: 9px;
    line-height: 1;
    opacity: 0.85;
}

/* A cost lowered by the caster's active effects (SpellCastRules.GetEffectiveManaCost). */
.spell-card-cost-badge.cost-reduced[b-mfdueihnme] {
    color: var(--combat-good-lighter);
}

/* One fixed-height row under the name, so cards with and without dice stay level in the row. */
.spell-face-dice-row[b-mfdueihnme] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 12px;
    font-size: 0.58rem;
    font-weight: var(--font-weight-semibold);
    line-height: 12px;
    font-variant-numeric: tabular-nums;
}

.spell-face-dice[b-mfdueihnme],
.spell-face-area[b-mfdueihnme] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    white-space: nowrap;
}

.spell-face-heal[b-mfdueihnme] {
    color: var(--combat-heal);
}

.spell-face-area[b-mfdueihnme] {
    color: var(--color-aoe-footprint);
}

.spell-face-dice-glyph[b-mfdueihnme] {
    font-size: 10px;
    line-height: 1;
}

[b-mfdueihnme] .spell-face-dice-icon {
    font-size: 10px !important;
    width: 10px;
    height: 10px;
}

/* Hover zoom: the full face in words. It follows the combat text size (WP12g, the --ct-* tokens); the card face above
   does not. */
.spell-face-base-cost[b-mfdueihnme] {
    color: var(--color-text-secondary);
    font-size: var(--ct-2xs);
}

.spell-face-lines[b-mfdueihnme] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0;
    font-size: var(--ct-sm);
    color: var(--color-text-lighter);
}

.spell-face-line[b-mfdueihnme] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.spell-face-line-glyph[b-mfdueihnme] {
    font-size: var(--ct-base);
    color: var(--color-text-secondary);
}

.spell-face-area-line[b-mfdueihnme],
.spell-face-area-line .spell-face-line-glyph[b-mfdueihnme] {
    color: var(--color-aoe-footprint);
}

/* How to pin the zoom (a right-click on the card); the pinned zoom shows the global .hz-esc-hint instead. */
.spell-pin-hint[b-mfdueihnme] {
    margin-top: 6px;
    font-size: var(--ct-2xs);
    color: var(--color-text-secondary);
    text-align: right;
}

[b-mfdueihnme] .spell-face-line-icon {
    font-size: var(--ct-base) !important;
    width: 1em;
    height: 1em;
}
/* /Components/Combat/InitiativeTracker.razor.rz.scp.css */
/* ===== Phase 8 — Initiative Tracker ===== */
/* Larger portraits (52×52), prominent ROUND pill, sliding active marker, status pip strip. */

.initiative-tracker[b-el113q63ts] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 14px;
    background: var(--color-bg-elevated-alt);
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* ---------- Round pill (replaces "Turn N" label) ---------- */
.initiative-round-pill[b-el113q63ts] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(217, 119, 6, 0.16));
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-radius: 999px;
    color: var(--color-warning-bright);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.18);
    white-space: nowrap;
    align-self: center;
}

.initiative-round-label[b-el113q63ts] {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(251, 191, 36, 0.85);
}

.initiative-round-number[b-el113q63ts] {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: #fde68a;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ---------- Slot row ---------- */
.initiative-slots[b-el113q63ts] {
    --slot-size: 52px;
    --slot-gap: 10px;
    position: relative;
    display: flex;
    gap: var(--slot-gap);
    flex: 1;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* ---------- Sliding active marker (one per tracker, FLIP via transform) ---------- */
.initiative-active-marker[b-el113q63ts] {
    position: absolute;
    top: -3px;
    left: 0;
    width: calc(var(--slot-size) + 6px);
    height: calc(var(--slot-size) + 6px);
    border-radius: 50%;
    border: 2px solid var(--color-warning-bright);
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.55), 0 0 0 2px rgba(0, 0, 0, 0.35) inset;
    /* --active-divider-offset compensates for the 2px-wide player->monster divider
       (plus the row's 10px flex gap = 12px per divider crossed). Without this the
       marker slides only by uniform slot pitch and lands left of the active monster. */
    transform: translateX(calc(var(--active-index, 0) * (var(--slot-size) + var(--slot-gap)) + var(--active-divider-offset, 0px) - 3px));
    transition: transform 200ms ease;
    pointer-events: none;
    z-index: 3;
    animation: activeMarkerPulse-b-el113q63ts 1.6s ease-in-out infinite;
}

@keyframes activeMarkerPulse-b-el113q63ts {
    0%, 100% { box-shadow: 0 0 14px rgba(251, 191, 36, 0.5), 0 0 0 2px rgba(0, 0, 0, 0.35) inset; }
    50%      { box-shadow: 0 0 22px rgba(251, 191, 36, 0.9), 0 0 0 2px rgba(0, 0, 0, 0.35) inset; }
}

/* ---------- Slot button ---------- */
.initiative-slot[b-el113q63ts] {
    position: relative;
    width: var(--slot-size);
    height: var(--slot-size);
    background: rgba(30, 41, 59, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    padding: 0;
    color: inherit;
    /* Subtle gradient frame to match Phase 5 ability cards */
    background-image:
        linear-gradient(rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)),
        linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(255, 255, 255, 0));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.initiative-slot:hover[b-el113q63ts],
.initiative-slot:focus-visible[b-el113q63ts] {
    transform: scale(1.08);
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
    outline: none;
}

.initiative-slot img[b-el113q63ts] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.initiative-slot.player[b-el113q63ts] {
    border-color: color-mix(in srgb, var(--combat-ally) 55%, transparent);
    background: color-mix(in srgb, var(--combat-ally) 16%, transparent);
}

.initiative-slot.enemy[b-el113q63ts] {
    border-color: color-mix(in srgb, var(--combat-enemy) 35%, transparent);
}

.initiative-slot.defeated[b-el113q63ts] {
    opacity: 0.4;
    filter: grayscale(100%);
}

.defeated-marker[b-el113q63ts] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--combat-bad);
}

.initiative-divider[b-el113q63ts] {
    width: 2px;
    height: 36px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    align-self: center;
}

/* ---------- Mobile variant ---------- */
.initiative-tracker.mobile[b-el113q63ts] {
    padding: 8px 10px;
    margin-bottom: 8px;
    gap: 8px;
}

.initiative-tracker.mobile .initiative-round-pill[b-el113q63ts] {
    padding: 5px 10px;
}

.initiative-tracker.mobile .initiative-round-label[b-el113q63ts] { font-size: 0.6rem; }
.initiative-tracker.mobile .initiative-round-number[b-el113q63ts] { font-size: 0.95rem; }

.initiative-tracker.mobile .initiative-slots[b-el113q63ts] {
    --slot-size: 38px;
    --slot-gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.initiative-tracker.mobile .initiative-slot[b-el113q63ts] {
    min-width: var(--slot-size);
}

/* ---------- Slot wrapper (slot + HP strip + status pips) ---------- */
.initiative-slot-wrapper[b-el113q63ts] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* HP indicator strip below each slot */
.initiative-hp-strip[b-el113q63ts] {
    width: var(--slot-size, 52px);
    height: 5px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.hp-strip-fill[b-el113q63ts] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.hp-strip-healthy[b-el113q63ts] { background: linear-gradient(90deg, var(--combat-hp-high-alt), var(--combat-hp-high-alt-dark)); }
.hp-strip-low[b-el113q63ts]     { background: linear-gradient(90deg, var(--combat-hp-mid-light), var(--combat-hp-mid)); }
.hp-strip-critical[b-el113q63ts] {
    background: linear-gradient(90deg, var(--combat-hp-low), var(--combat-hp-low-darker));
    animation: critStripPulse-b-el113q63ts 1s ease-in-out infinite;
}

@keyframes critStripPulse-b-el113q63ts {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* "NEXT" label overlay at bottom of slot */
.next-up-label[b-el113q63ts] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.72);
    color: #cbd5e1;
    font-size: 0.55rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    padding: 2px 0;
    pointer-events: none;
}

/* Next-up slot: subtle gray-blue border */
.initiative-slot.next-up[b-el113q63ts] {
    border-color: rgba(148, 163, 184, 0.55);
    box-shadow: 0 0 8px rgba(148, 163, 184, 0.2);
}

/* ---------- Status pip strip (max 3 + overflow) ---------- */
.initiative-status-strip[b-el113q63ts] {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    min-height: 16px;
    max-width: calc(var(--slot-size, 52px) + 6px);
}

.initiative-status-pip[b-el113q63ts] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 0.55rem;
    font-weight: 700;
    color: #f1f5f9;
}

.initiative-status-pip .mud-icon-root[b-el113q63ts] {
    width: 10px !important;
    height: 10px !important;
    font-size: 10px !important;
}

.initiative-status-overflow[b-el113q63ts] {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(148, 163, 184, 0.55);
    color: #cbd5e1;
    padding: 0 3px;
    width: auto;
    min-width: 14px;
    font-size: 0.5rem;
}

/* Mobile: hide HP strips + status pips for density */
.initiative-tracker.mobile .initiative-hp-strip[b-el113q63ts],
.initiative-tracker.mobile .initiative-status-strip[b-el113q63ts] {
    display: none;
}

/* Reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
    .initiative-active-marker[b-el113q63ts] {
        transition: none;
        animation: none;
    }
    .initiative-slot:hover[b-el113q63ts],
    .initiative-slot:focus-visible[b-el113q63ts] {
        transform: none;
    }
}

/* ---------- Party identity (2026-10, audit U4 / U11) ----------
   Player slots show THAT character: class icon under a portrait, class-colored ring
   (--class-accent from the design-system class utilities), a gold "YOU" tag on the local
   player's slot, and a Downed countdown. */
.initiative-slot.player.class-accent[b-el113q63ts] {
    border-color: var(--class-accent);
    background: color-mix(in srgb, var(--class-accent) 16%, rgba(15, 23, 42, 0.95));
}

/* Keep the hover and next-up cues on class-ringed slots (the ring rule above outranks them). */
.initiative-slot.player.class-accent:hover[b-el113q63ts],
.initiative-slot.player.class-accent:focus-visible[b-el113q63ts] {
    border-color: rgba(255, 215, 0, 0.5);
}

.initiative-slot.player.class-accent.next-up[b-el113q63ts] {
    border-color: rgba(148, 163, 184, 0.55);
}

.player-class-icon[b-el113q63ts] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--class-accent, var(--color-info));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.initiative-slot img.player-portrait[b-el113q63ts] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* An outline, so the hover / next-up box-shadows still show on the local player's slot. */
.initiative-slot.player.is-self[b-el113q63ts] {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.initiative-slot-wrapper[b-el113q63ts] {
    position: relative;
}

/* Sits on the wrapper above the round slot, so the circle's overflow:hidden can't clip it. */
.initiative-you-tag[b-el113q63ts] {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-bg-base);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.4;
    pointer-events: none;
    z-index: 2;
}

.initiative-slot.player.downed[b-el113q63ts] {
    border-color: var(--combat-bad);
}

.downed-marker[b-el113q63ts] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: color-mix(in srgb, var(--combat-bad-deep) 55%, transparent);
    color: var(--combat-bad-lightest);
    z-index: 1;
}

.downed-marker .material-icons[b-el113q63ts] {
    font-size: 1.05rem;
}

.downed-rounds[b-el113q63ts] {
    font-size: 0.85rem;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.initiative-tracker.mobile .player-class-icon[b-el113q63ts] {
    font-size: 1.05rem;
}

/* Identity (HUD decision D10): a duplicate monster's "#N" ordinal, on the wrapper (top-right of the round slot)
   so the circle's overflow:hidden can't clip it. Same number as the board token's badge. */
.initiative-ordinal-badge[b-el113q63ts] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--color-bg-base);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 12px;
    text-align: center;
    pointer-events: none;
    z-index: 2;
}

/* ---------- Co-op cues (combat HUD rethink WP10) ----------
   On deck (D11): the local player's slot while they act next, a gold ring and an "ON DECK" label in place of NEXT.
   Legendary pip (3A): a boss's legendary actions left this round, top-left of its portrait (the ordinal badge sits
   top-right), positioned on the wrapper so it never widens the slot (the active marker slides by a fixed pitch). */
.initiative-slot.on-deck[b-el113q63ts],
.initiative-slot.player.class-accent.on-deck[b-el113q63ts] {
    border-color: var(--color-primary);
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.next-up-label.on-deck-label[b-el113q63ts] {
    background: color-mix(in srgb, var(--color-bg-base) 85%, transparent);
    color: var(--color-primary);
}

.initiative-legendary-pip[b-el113q63ts] {
    position: absolute;
    top: -6px;
    left: -6px;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    height: 15px;
    padding: 0 4px 0 2px;
    border-radius: 999px;
    background: var(--color-bg-base);
    border: 1px solid var(--combat-enemy-light);
    color: var(--combat-enemy-lighter);
    font-size: 0.55rem;
    font-weight: 800;
    line-height: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: auto;
    z-index: 3;
}

.initiative-legendary-pip .material-icons[b-el113q63ts] {
    font-size: 11px;
}

.initiative-legendary-pip.is-spent[b-el113q63ts] {
    border-color: color-mix(in srgb, var(--color-text-secondary) 60%, transparent);
    color: var(--color-text-secondary);
}
/* /Components/Combat/Layouts/CombatBottomDock.razor.rz.scp.css */
/* CombatBottomDock.razor.css: the economy-hotbar dock only (.combat-bottom-dock--hotbar, combat HUD rethink WP12).
   The dock's frame and the older dock (CompactPlayerHud + CombatActionsPanel + economy rail) keep their global rules
   in wwwroot/css/combat-responsive.css; nothing here reaches them. The hotbar gets the room it needs: the vitals
   column is capped (the vitals card restacks to its height, CombatVitals.razor.css), End Turn is a narrow upright button, and the vertical padding is
   trimmed, so the two-row bar is no taller than the old one-row bar with its scrollbar. The caps scale with the
   viewport (clamp) rather than step at a breakpoint, so the hotbar never gets narrower as the screen gets wider.
   Tokens only; no breakpoints. */

.combat-bottom-dock--hotbar[b-7e3cbh5vh2] {
    gap: var(--space-md);
    padding: 4px 10px;
}

/* Vitals: 252px at 1280, growing to 312px by about 1580. The floor is the 1280 width, so a desktop window narrower
   than 1280 (the page keeps 1280 and scrolls, WP12c) does not shrink it. */
.combat-bottom-dock--hotbar.with-hud[b-7e3cbh5vh2] {
    grid-template-columns: clamp(252px, calc(20vw - 4px), 312px) minmax(0, 1fr) auto;
}

.combat-bottom-dock--hotbar .dock-hud-segment[b-7e3cbh5vh2] {
    padding-right: var(--space-md);
}

.combat-bottom-dock--hotbar .dock-endturn-segment[b-7e3cbh5vh2] {
    min-width: 0;
    padding-left: var(--space-md);
}

/* Upright: icon, the two-line label, the Q hint. 78px at 1280, 92px by about 1530. */
.combat-bottom-dock--hotbar .dock-end-turn-btn[b-7e3cbh5vh2] {
    flex-direction: column;
    gap: 3px;
    width: clamp(78px, 6vw, 92px);
    padding: 10px 6px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
}
/* /Components/Combat/Layouts/CombatHotbar.razor.rz.scp.css */
/* CombatHotbar.razor.css: the economy hotbar (combat HUD rethink WP9b, Concept A; density pass WP12).
   Colors are design-system tokens only. The lane header is the turn pip: one eco token and one WP4 shape per lane
   (action circle, bonus triangle, move square, free ring), so a lane reads without color too. A spent lane fades
   as a whole. No breakpoints: the slot size scales with the viewport (clamp), so the bar never steps narrower.
   WP12: the Action lane takes the free width and WRAPS its slots onto up to two rows (row-major: the DOM order is the
   builder's, so the digits read left to right, top to bottom), then scrolls vertically inside itself; it never
   scrolls sideways. Bonus and Free fold into two rows when the bar is short of width and spread to one row (up to
   three columns) when it isn't; the Action lane gets the width first. The slots wear HotbarSlotFace, the compact
   face; the hover zoom keeps the full card. */

.combat-hotbar[b-fngmrzmqby] {
    /* One slot, one gap: the lanes' widths are counted in slots. The slot grows from 68x58 at 1280 (the Desktop tier's
       floor) to 74x62 by 1480, smoothly, so a few pixels of screen never cost a whole slot column. */
    --slot-w: clamp(68px, calc(68px + (100vw - 1280px) * 0.03), 74px);
    --slot-h: clamp(58px, calc(58px + (100vw - 1280px) * 0.02), 62px);
    --slot-gap: clamp(5px, calc(5px + (100vw - 1280px) * 0.005), 6px);
    --lane-pad-x: 3px;
    --move-w: clamp(52px, calc(52px + (100vw - 1280px) * 0.02), 56px);
    /* The slot box's own padding: room for a slot's hover lift and armed ring inside a scrolling lane. */
    --slots-pad: 2px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    min-height: 0;
}

/* ----- Aim banner, concentration warning, target line ----- */

/* The overflow menu (Flee) sits in the top-right corner over these strips, so they keep its width clear. */
.hotbar-aim[b-fngmrzmqby],
.hotbar-warning[b-fngmrzmqby],
.hotbar-target[b-fngmrzmqby] {
    margin-right: 34px;
}

.hotbar-aim[b-fngmrzmqby] {
    min-width: 0;
}

.hotbar-warning[b-fngmrzmqby] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px var(--space-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
    color: var(--color-warning-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.hotbar-warning .material-icons[b-fngmrzmqby] {
    font-size: 1rem;
}

.hotbar-target[b-fngmrzmqby] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 22px;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    min-width: 0;
}

.hotbar-target .material-icons[b-fngmrzmqby] {
    font-size: 1rem;
    color: var(--color-primary);
}

.hotbar-target.no-target .material-icons[b-fngmrzmqby],
.hotbar-target-empty[b-fngmrzmqby] {
    color: var(--color-text-tertiary);
}

/* ----- Lanes ----- */

.hotbar-body[b-fngmrzmqby] {
    min-width: 0;
}

/* The lanes sit in one line. Only when even every lane's folded width cannot fit (Move, two Action columns, the side
   lanes in two rows) does a lane drop to a second line: the bar grows taller rather than clipping a lane or scrolling
   sideways. */
.hotbar-lanes[b-fngmrzmqby] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-xs) var(--space-sm);
    min-width: 0;
}

.hotbar-lane[b-fngmrzmqby] {
    --eco: var(--color-eco-action);
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
    min-width: 0;
    padding: 2px var(--lane-pad-x) 2px;
    border-top: 3px solid var(--eco);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--eco) 6%, transparent);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.hotbar-lane--move[b-fngmrzmqby]     { --eco: var(--color-eco-move); }
.hotbar-lane--action[b-fngmrzmqby]   { --eco: var(--color-eco-action); }
.hotbar-lane--bonus[b-fngmrzmqby]    { --eco: var(--color-eco-bonus); }
.hotbar-lane--free[b-fngmrzmqby]     { --eco: var(--color-eco-free); }
.hotbar-lane--reaction[b-fngmrzmqby] { --eco: var(--color-eco-reaction); }

/* A sized lane (HotbarView.LaneColumns, set inline as --fold-cols / --lane-cols): it starts from its folded width
   (its flex basis, so a lane line breaks only on the folded widths) and grows up to its full width; its slots wrap
   inside it. Width in columns: N slots, N - 1 gaps, the slot box's and the lane's paddings. */
.hotbar-lane.is-sized[b-fngmrzmqby] {
    --fold-w: calc(var(--fold-cols) * var(--slot-w) + (var(--fold-cols) - 1) * var(--slot-gap) + 2 * var(--slots-pad) + 2 * var(--lane-pad-x));
    --full-w: calc(var(--lane-cols) * var(--slot-w) + (var(--lane-cols) - 1) * var(--slot-gap) + 2 * var(--slots-pad) + 2 * var(--lane-pad-x));
    flex: 1 0 var(--fold-w);
    max-width: var(--full-w);
}

/* The Action lane takes the free width first (a flex-grow far above the side lanes', so they gain only what is left
   once every Action slot fits in one row) and is the one lane that shrinks back to its two folded columns. Folding
   Bonus and Free therefore costs no height: they fold only while the Action lane needs its second row anyway. */
.hotbar-lane--action.is-sized[b-fngmrzmqby] {
    flex: 9999 1 var(--fold-w);
    min-width: var(--fold-w);
}

/* A spent lane fades as a whole (its slots grey with the gate's reason too). */
.hotbar-lane.is-spent[b-fngmrzmqby] {
    opacity: 0.45;
    filter: grayscale(0.4);
}

/* The header never sets the lane's width (contain: inline-size), so a one-slot Bonus lane stays one slot wide. It is
   one line tall and wraps: a note too wide for the lane ("Spent" beside a one-slot lane's title) drops to the hidden
   second line rather than showing a stub; the lane still fades, strikes its title and says "spent" to a screen
   reader. */
.hotbar-lane-head[b-fngmrzmqby] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 5px;
    contain: inline-size;
    min-width: 0;
    height: 12px;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--eco);
    white-space: nowrap;
}

.hotbar-lane-title[b-fngmrzmqby] {
    flex: 0 0 auto;
}

.hotbar-lane-note[b-fngmrzmqby] {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-secondary);
}

.hotbar-lane.is-spent .hotbar-lane-title[b-fngmrzmqby] {
    text-decoration: line-through;
}

/* The lane pip: the WP4 shapes (design-system.css action economy block). */
.eco-pip[b-fngmrzmqby] {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--eco);
    box-shadow: 0 0 6px color-mix(in srgb, var(--eco) 70%, transparent);
}

.hotbar-lane--bonus .eco-pip[b-fngmrzmqby] {
    width: 12px;
    height: 11px;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    box-shadow: none;
}

.hotbar-lane--move .eco-pip[b-fngmrzmqby] {
    border-radius: 2px;
}

.hotbar-lane--free .eco-pip[b-fngmrzmqby] {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--eco);
}

.hotbar-lane--reaction .eco-pip[b-fngmrzmqby] {
    border-radius: 0;
    transform: rotate(45deg) scale(0.8);
}

.hotbar-lane.is-spent .eco-pip[b-fngmrzmqby] {
    background: var(--color-text-muted);
    box-shadow: none;
}

.hotbar-lane--free.is-spent .eco-pip[b-fngmrzmqby] {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--color-text-muted);
}

/* The slots wrap, row-major, at most two rows tall; a kit that needs a third row scrolls vertically inside its lane
   (never sideways), on a scrollbar in the lane's own color so the overflow is plain to see. */
.hotbar-lane-slots[b-fngmrzmqby] {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: var(--slot-gap);
    max-height: calc(2 * var(--slot-h) + var(--slot-gap) + 2 * var(--slots-pad));
    padding: var(--slots-pad);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--eco) color-mix(in srgb, var(--eco) 12%, transparent);
}

/* ----- Move: a compact status tile (the full lane height); the hexes left are the header's note, on a line of
   its own ----- */

.hotbar-lane--move[b-fngmrzmqby] {
    width: calc(var(--move-w) + 2 * var(--lane-pad-x));
}

.hotbar-lane--move .hotbar-lane-head[b-fngmrzmqby] {
    column-gap: 4px;
    row-gap: 1px;
    height: auto;
    overflow: visible;
    letter-spacing: 0.04em;
    white-space: normal;
}

.hotbar-lane--move .hotbar-lane-note[b-fngmrzmqby] {
    flex: 1 0 100%;
    font-size: 0.6rem;
    line-height: 11px;
    letter-spacing: 0;
    overflow: visible;
}

.hotbar-lane--move .hotbar-lane-slots[b-fngmrzmqby] {
    flex: 1 1 auto;
    padding: var(--slots-pad) 0;
    overflow: visible;
}

.hotbar-move-slot[b-fngmrzmqby] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--move-w);
    height: 100%;
    min-height: 30px;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-eco-move) 45%, transparent);
    background: color-mix(in srgb, var(--color-eco-move) 8%, transparent);
    color: var(--color-eco-move);
}

.hotbar-move-slot .material-icons[b-fngmrzmqby] {
    font-size: 1.4rem;
}

.hotbar-move-slot.disabled[b-fngmrzmqby] {
    color: var(--color-text-tertiary);
    border-color: var(--color-border-subtle);
    background: transparent;
}

/* The tile's line (hexes left, or why moving is closed) for a screen reader; sighted players have the tooltip. */
.hotbar-move-sr[b-fngmrzmqby] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ----- Slots: AbilityCard / SpellCard with the compact face (HotbarSlotFace), in a pinnable wrapper ----- */

.hotbar-slot[b-fngmrzmqby] {
    position: relative;
    flex: 0 0 auto;
    width: var(--slot-w);
    height: var(--slot-h);
}

/* The card's wrappers (its root and MudTooltip's) are inline boxes; as blocks they add no line gap under the slot. */
.hotbar-slot[b-fngmrzmqby]  .ability-card-wrapper,
.hotbar-slot[b-fngmrzmqby]  .spell-card-wrapper,
.hotbar-slot[b-fngmrzmqby]  .mud-tooltip-root {
    display: block;
}

/* The frame. The global card rules (combat-shared.css, class-pages.css) size and pad the full faces with !important,
   so the compact frame answers in kind. A spell keeps its school tint and border (.spell-school-*). */
.combat-hotbar .hotbar-lane-slots[b-fngmrzmqby]  .is-compact {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    box-sizing: border-box;
    width: var(--slot-w) !important;
    height: var(--slot-h);
    min-height: var(--slot-h) !important;
    padding: 3px 3px 2px !important;
    margin: 0;
    border: 1px solid var(--color-border-hover);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    color: var(--color-text-lighter);
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    transform: none;
    transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Hover: a 1px lift and an inset ring in the lane's turn-slot color, both inside the slot box's padding, so a scrolling
   lane never clips them. Keyboard focus: the global 2px gold ring, drawn inset for the same reason (it survives the
   armed slot's !important pulse, which only sets box-shadow). */
.combat-hotbar .hotbar-lane-slots[b-fngmrzmqby]  .is-compact:hover:not(.disabled) {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px var(--eco);
}

.combat-hotbar .hotbar-lane-slots[b-fngmrzmqby]  .is-compact:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Greyed: the face dims itself (HotbarSlotFace) so the cooldown badge stays readable; the frame only loses its glow. */
.combat-hotbar .hotbar-lane-slots[b-fngmrzmqby]  .is-compact.disabled {
    opacity: 1;
    filter: none;
    box-shadow: none;
    cursor: not-allowed;
}

/* Favorites: the star button shows on hover / keyboard focus, and stays lit on a pinned slot. It sits under the
   hotkey, left of the icon, clear of the name. */
.hotbar-pin[b-fngmrzmqby] {
    position: absolute;
    top: 17px;
    left: 3px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 12px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-bg-base) 80%, transparent);
    color: var(--color-text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.hotbar-pin .material-icons[b-fngmrzmqby] {
    font-size: 0.75rem;
}

.hotbar-slot:hover .hotbar-pin[b-fngmrzmqby],
.hotbar-slot:focus-within .hotbar-pin[b-fngmrzmqby],
.hotbar-pin.pinned[b-fngmrzmqby] {
    opacity: 1;
}

.hotbar-pin.pinned[b-fngmrzmqby],
.hotbar-pin:hover[b-fngmrzmqby] {
    color: var(--color-primary);
}

.hotbar-pin:focus-visible[b-fngmrzmqby] {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* ----- Divine Smite stepper (Free lane) ----- */

.smite-stepper[b-fngmrzmqby] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    box-sizing: border-box;
    height: var(--slot-h);
    padding: 3px var(--space-xs);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
}

.smite-stepper.is-offered[b-fngmrzmqby] {
    border-color: var(--color-primary);
    /* Inset, so the lane's slot box (it scrolls) never clips the glow. */
    box-shadow: inset 0 0 12px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.smite-stepper-head[b-fngmrzmqby] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.smite-stepper-head .material-icons[b-fngmrzmqby] {
    font-size: 0.95rem;
    color: var(--color-primary);
}

.smite-stepper-crit[b-fngmrzmqby] {
    margin-left: auto;
    padding: 0 4px;
    border-radius: var(--radius-sm);
    background: var(--color-warning-bright);
    color: var(--color-bg-base);
    font-weight: var(--font-weight-bold);
}

.smite-stepper-tiers[b-fngmrzmqby] {
    display: flex;
    gap: 3px;
}

.smite-tier[b-fngmrzmqby] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 30px;
    padding: 2px 4px 1px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-hover);
    background: var(--color-bg-elevated-alt);
    color: var(--color-text-lighter);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.15s ease;
}

.smite-tier.is-usable:hover[b-fngmrzmqby] {
    transform: translateY(-2px);
    border-color: var(--color-primary);
}

.smite-tier:disabled[b-fngmrzmqby] {
    opacity: 0.45;
    cursor: not-allowed;
}

.smite-tier:focus-visible[b-fngmrzmqby] {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.smite-tier-numeral[b-fngmrzmqby] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.smite-tier-cost[b-fngmrzmqby] {
    font-size: var(--font-size-xs);
    line-height: 1.2;
    color: var(--color-mana);
}

.smite-tier-hotkey[b-fngmrzmqby] {
    position: absolute;
    top: -6px;
    right: -5px;
    min-width: 13px;
    padding: 0 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-active);
    background: var(--color-bg-base);
    color: var(--color-primary);
    font-size: 0.55rem;
    font-weight: var(--font-weight-bold);
    line-height: 12px;
}

/* ----- Overflow menu (Flee): the top-right corner, so it never takes a lane's width ----- */

/* Inside the bar's box: the dock's actions segment clips its overflow, which would cut the button's ring. */
.hotbar-overflow[b-fngmrzmqby] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: flex;
}

@media (prefers-reduced-motion: reduce) {
    .hotbar-lane[b-fngmrzmqby],
    .smite-tier[b-fngmrzmqby],
    .hotbar-pin[b-fngmrzmqby],
    .combat-hotbar .hotbar-lane-slots[b-fngmrzmqby]  .is-compact {
        transition: none;
    }

    .smite-tier.is-usable:hover[b-fngmrzmqby],
    .combat-hotbar .hotbar-lane-slots[b-fngmrzmqby]  .is-compact:hover:not(.disabled) {
        transform: none;
    }

    /* The armed slot keeps its ring, without the pulse. */
    .combat-hotbar .hotbar-lane-slots[b-fngmrzmqby]  .is-compact.pending-target {
        animation: none;
    }
}
/* /Components/Combat/Layouts/CombatVitals.razor.rz.scp.css */
/* CombatVitals.razor.css: the vitals block of the economy dock (combat HUD rethink WP9b, restacked WP12j).
   Rows that fill the height the host gives (the two-row dock): identity (portrait, name, class and the quick
   buttons), HP, the class resources, AC and the weapon, then the chips. The frame is a size container: the card never
   makes its host taller than its minimum, and a short host (a one-row dock, the tablet tile) gets the compact
   arrangement. Tokens only: the meter colors are set once on .combat-vitals; the chips use their state's meaning
   color. No viewport breakpoints: the layout reads its own height (a container query). */

/* ----- Frame: the card's size container ----- */

/* The host sizes the frame (flex: 1 in the dock segment, the party layout's own-vitals cell or the tablet tile); the
   frame contributes only its minimum to the host's height: what the compact arrangement needs (a second resource
   row adds one row). */
.vitals-frame[b-3z7p4vla93] {
    --vitals-min-h: 122px;
    container: vitals / size;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--vitals-min-h);
}

.vitals-frame.res-2[b-3z7p4vla93] {
    --vitals-min-h: 138px;
}

/* ----- Card ----- */

.combat-vitals[b-3z7p4vla93] {
    --class-color: var(--color-primary);
    /* The meter colors, in one place. */
    --vitals-hp: var(--combat-hp-high);
    --vitals-hp-low: var(--combat-hp-mid);
    --vitals-hp-critical: var(--combat-hp-low);
    --vitals-mana: var(--color-mana);
    --vitals-ki: var(--color-ki);
    --vitals-swagger: var(--color-swagger);
    --vitals-divinity: var(--color-cleric);
    --quick-size: 32px;
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: grid;
    /* One column of rows. The identity row grows with the free height (52-60px, the portrait follows it); what is
       left spreads between the rows. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(52px, 60px);
    grid-auto-rows: auto;
    align-content: space-between;
    row-gap: var(--space-xs);
    padding: 2px var(--space-xs) 2px 6px;
    border-left: 3px solid var(--class-color);
    border-radius: var(--radius-lg);
    color: var(--color-text-lightest);
}

.combat-vitals.warrior[b-3z7p4vla93]   { --class-color: var(--color-warrior); }
.combat-vitals.wizard[b-3z7p4vla93]    { --class-color: var(--color-wizard); }
.combat-vitals.ranger[b-3z7p4vla93]    { --class-color: var(--color-ranger); }
.combat-vitals.rogue[b-3z7p4vla93]     { --class-color: var(--color-rogue); }
.combat-vitals.paladin[b-3z7p4vla93]   { --class-color: var(--color-paladin); }
.combat-vitals.bard[b-3z7p4vla93]      { --class-color: var(--color-bard); }
.combat-vitals.monk[b-3z7p4vla93]      { --class-color: var(--color-monk); }
.combat-vitals.barbarian[b-3z7p4vla93] { --class-color: var(--color-barbarian); }
.combat-vitals.cleric[b-3z7p4vla93]    { --class-color: var(--color-cleric); }
.combat-vitals.pirate[b-3z7p4vla93]    { --class-color: var(--color-pirate); }

.combat-vitals.healing[b-3z7p4vla93] {
    animation: vitals-heal-flash-b-3z7p4vla93 0.6s ease-out;
}

@keyframes vitals-heal-flash-b-3z7p4vla93 {
    0% { filter: brightness(1); }
    25% { filter: brightness(1.3); box-shadow: 0 0 20px color-mix(in srgb, var(--combat-good) 70%, transparent); }
    100% { filter: brightness(1); }
}

/* ----- Identity: portrait with the level badge, name, class ----- */

.vitals-identity[b-3z7p4vla93] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
    min-height: 0;
}

/* Square, as tall as the identity row. */
.vitals-portrait-wrap[b-3z7p4vla93] {
    position: relative;
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 1 / 1;
}

.vitals-portrait[b-3z7p4vla93] {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-active);
}

.combat-vitals.is-turn .vitals-portrait[b-3z7p4vla93] {
    border-color: var(--color-warning-bright);
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-warning-bright) 55%, transparent);
}

.vitals-portrait-fallback[b-3z7p4vla93] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-elevated-alt);
}

.vitals-portrait-img[b-3z7p4vla93] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The level badge sits on the portrait's bottom edge. */
.vitals-level[b-3z7p4vla93] {
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    white-space: nowrap;
    color: var(--color-warning-light);
    padding: 0 4px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--color-warning) 45%, transparent);
    background: color-mix(in srgb, var(--color-bg-base) 82%, var(--color-warning));
}

/* Roomy: the name over the heading's width, the class and the quick buttons under it. */
.vitals-heading[b-3z7p4vla93] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name  name"
        "class quick";
    align-items: center;
    align-content: center;
    column-gap: var(--space-xs);
    row-gap: 2px;
    min-width: 0;
}

/* The name over the heading's width, then an ellipsis (the tooltip has it whole). */
.vitals-name[b-3z7p4vla93] {
    grid-area: name;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
}

.vitals-class[b-3z7p4vla93] {
    grid-area: class;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: var(--class-color);
}

/* ----- Meters: HP and the class resources ----- */

.vitals-meters[b-3z7p4vla93] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.vitals-row[b-3z7p4vla93] {
    --meter: var(--vitals-mana);
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-height: 13px;
}

.vitals-row.kind-ki[b-3z7p4vla93]        { --meter: var(--vitals-ki); }
.vitals-row.kind-swagger[b-3z7p4vla93]   { --meter: var(--vitals-swagger); }
.vitals-row.kind-divinity[b-3z7p4vla93]  { --meter: var(--vitals-divinity); }

.vitals-label[b-3z7p4vla93] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
}

.vitals-value[b-3z7p4vla93] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vitals-bar[b-3z7p4vla93] {
    position: relative;
    height: 9px;
    border-radius: 5px;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-bg-base) 80%, transparent);
    border: 1px solid var(--color-border-subtle);
}

.vitals-bar-fill[b-3z7p4vla93] {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--meter);
    transition: width 0.3s ease;
}

.vitals-bar.hp .vitals-bar-fill[b-3z7p4vla93]          { background: var(--vitals-hp); }
.vitals-bar.hp.low .vitals-bar-fill[b-3z7p4vla93]      { background: var(--vitals-hp-low); }
.vitals-bar.hp.critical .vitals-bar-fill[b-3z7p4vla93] { background: var(--vitals-hp-critical); }

/* The incoming-damage forecast: the part of the HP bar the next monster turn is expected to take. */
.vitals-bar-incoming[b-3z7p4vla93] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--combat-damage) 75%, transparent) 0 3px,
        color-mix(in srgb, var(--combat-damage) 35%, transparent) 3px 6px);
}

/* Mana cost ticks: where each prepared spell's cost falls on the bar. */
.vitals-bar-tick[b-3z7p4vla93] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: color-mix(in srgb, var(--color-text-primary) 55%, transparent);
}

.vitals-pips[b-3z7p4vla93] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.vitals-pip[b-3z7p4vla93] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid var(--meter);
    background: transparent;
}

.vitals-pip.lit[b-3z7p4vla93] {
    background: var(--meter);
}

/* ----- Gear: AC and the weapon ----- */

.vitals-gear-row[b-3z7p4vla93] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
}

/* The AC badge: the number on a shield, 26px square. */
.vitals-ac[b-3z7p4vla93] {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    cursor: help;
}

.vitals-ac .material-icons[b-3z7p4vla93] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--color-info-light);
}

.vitals-ac-value[b-3z7p4vla93] {
    position: relative;
    margin-top: -2px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-bg-base);
    font-variant-numeric: tabular-nums;
}

/* The weapon takes the rest of its row: the full name and dice, wrapping to a second line before an ellipsis. */
.vitals-weapon[b-3z7p4vla93] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 24px;
    padding: 1px 6px 1px 4px;
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-light);
    font: inherit;
    font-size: var(--font-size-sm);
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.vitals-weapon .material-icons[b-3z7p4vla93] {
    flex: 0 0 auto;
    font-size: 0.95rem;
    color: var(--color-warning);
}

.vitals-weapon.swappable[b-3z7p4vla93] {
    border-color: var(--color-border-hover);
}

.vitals-weapon:hover[b-3z7p4vla93],
.vitals-weapon:focus-visible[b-3z7p4vla93] {
    border-color: var(--color-border-active);
}

/* The name and the dice flow as one text, up to two lines, then an ellipsis (no weapon name in the game needs more
   at 1280). */
.vitals-weapon-text[b-3z7p4vla93] {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: break-word;
}

.vitals-weapon-dice[b-3z7p4vla93] {
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.vitals-weapon .vitals-weapon-swap[b-3z7p4vla93] {
    color: var(--color-info-light);
}

/* ----- Quick buttons: worn armor and the pet ----- */

.vitals-quick[b-3z7p4vla93] {
    grid-area: quick;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.vitals-quick[b-3z7p4vla93]  .mud-icon-button,
.vitals-pet[b-3z7p4vla93] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--quick-size);
    height: var(--quick-size);
    padding: 0;
    border: 1px solid var(--color-border-hover);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    overflow: hidden;
}

.vitals-quick[b-3z7p4vla93]  .mud-icon-button:hover,
.vitals-quick[b-3z7p4vla93]  .mud-icon-button:focus-visible,
.vitals-pet:hover[b-3z7p4vla93],
.vitals-pet:focus-visible[b-3z7p4vla93] {
    border-color: var(--color-border-active);
}

.vitals-quick[b-3z7p4vla93]  .mud-icon-button .mud-icon-root {
    font-size: 1.15rem;
}

.vitals-pet .material-icons[b-3z7p4vla93] {
    font-size: 1.15rem;
}

.vitals-pet-img[b-3z7p4vla93] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- State chips and status effects ----- */

/* One line over the card's width: a state chip shrinks to its icon (ellipsis; the tooltip has the label) before
   anything wraps, so the row's height is fixed. */
.vitals-chips[b-3z7p4vla93] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.vitals-chip[b-3z7p4vla93] {
    --chip: var(--color-text-light);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 1 auto;
    min-width: 22px;
    max-width: 100%;
    padding: 0 6px 0 4px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--chip) 55%, transparent);
    background: color-mix(in srgb, var(--chip) 14%, transparent);
    color: var(--chip);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 18px;
    white-space: nowrap;
}

.vitals-chip .material-icons[b-3z7p4vla93] {
    flex: 0 0 auto;
    font-size: 0.8rem;
}

.vitals-chip-label[b-3z7p4vla93] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The concentration chip keeps its spell's name longest: the other chips shrink first. */
.vitals-chip[b-3z7p4vla93] {
    flex-shrink: 100;
}

.vitals-chip.kind-concentration[b-3z7p4vla93] {
    flex-shrink: 1;
}

.vitals-chip.kind-rage[b-3z7p4vla93]          { --chip: var(--color-barbarian); }
.vitals-chip.kind-hidden[b-3z7p4vla93]        { --chip: var(--color-rogue-light); }
.vitals-chip.kind-inspired[b-3z7p4vla93]      { --chip: var(--color-bard-light); }
.vitals-chip.kind-smite[b-3z7p4vla93]         { --chip: var(--color-primary); }
.vitals-chip.kind-concentration[b-3z7p4vla93] { --chip: var(--color-info-light); }

.vitals-status[b-3z7p4vla93] {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 2px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.vitals-status[b-3z7p4vla93]  .mud-icon-root {
    font-size: 0.85rem;
}

.vitals-status-duration[b-3z7p4vla93] {
    font-size: 0.55rem;
    font-weight: var(--font-weight-bold);
    margin-left: 1px;
}

/* ----- Compact: a short host (a one-row dock, the tablet tile) -----
   The identity row narrows (30-48px), the quick buttons (28px) move to the heading's right edge beside the name and
   class, the level badge to the portrait's corner, and the weapon name keeps one line (its tooltip has it whole; the
   dice stay). The threshold is what the roomy arrangement needs at its fullest: two resource rows and a two-line
   weapon name. */

@container vitals (max-height: 165px) {
    .combat-vitals[b-3z7p4vla93] {
        --quick-size: 28px;
        grid-template-rows: minmax(30px, 48px);
    }

    .vitals-heading[b-3z7p4vla93] {
        grid-template-areas:
            "name  quick"
            "class quick";
        row-gap: 0;
    }

    .vitals-name[b-3z7p4vla93] {
        font-size: var(--font-size-base);
    }

    /* One line: the name ellipsizes, the dice stay. */
    .vitals-weapon-text[b-3z7p4vla93] {
        display: flex;
        gap: 0.25em;
    }

    .vitals-weapon-name[b-3z7p4vla93] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vitals-weapon-dice[b-3z7p4vla93] {
        flex: 0 0 auto;
    }

    /* The portrait can be 30px: the level drops its "LV" and sits in the corner. */
    .vitals-level[b-3z7p4vla93] {
        left: auto;
        right: -3px;
        bottom: -3px;
        transform: none;
        padding: 0 3px;
        font-size: 0.6rem;
    }

    .vitals-level-prefix[b-3z7p4vla93] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .combat-vitals.healing[b-3z7p4vla93] {
        animation: none;
    }

    .vitals-bar-fill[b-3z7p4vla93] {
        transition: none;
    }
}
/* /Components/Combat/Modals/ConsumableModal.razor.rz.scp.css */
/* ConsumableModal.razor.css - CSS Isolation */
/* Fantasy RPG theme for consumable selection modal */

.consumable-modal-title[b-t8ytr3yszx] {
    display: flex;
    align-items: center;
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
}

.consumable-empty-state[b-t8ytr3yszx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    color: var(--color-text-secondary);
}

.consumable-list[b-t8ytr3yszx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    min-height: 150px;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.consumable-list.consuming[b-t8ytr3yszx] {
    pointer-events: none;
    opacity: 0.8;
}

.consumable-card[b-t8ytr3yszx] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    padding: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* Prevent cards from being compressed */
    min-height: auto;
}

.consumable-card:hover:not(.selected-consume)[b-t8ytr3yszx] {
    transform: translateY(-2px);
    border-color: var(--color-border-active);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.1);
}

.consumable-card.selected-consume[b-t8ytr3yszx] {
    border-color: rgba(34, 197, 94, 0.6);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.4), inset 0 0 20px rgba(34, 197, 94, 0.1);
    animation: consume-pulse-b-t8ytr3yszx 0.6s ease-in-out;
}

@keyframes consume-pulse-b-t8ytr3yszx {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.4);
    }
    50% { 
        transform: scale(1.02);
        box-shadow: 0 0 50px rgba(34, 197, 94, 0.6);
    }
}

.consume-effect[b-t8ytr3yszx] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 10;
}

.consume-text[b-t8ytr3yszx] {
    color: var(--color-success-light);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
    animation: pulse-text-b-t8ytr3yszx 1s ease-in-out infinite;
}

@keyframes pulse-text-b-t8ytr3yszx {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.consume-particles[b-t8ytr3yszx] {
    position: absolute;
    inset: 0;
}

.particle[b-t8ytr3yszx] {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, var(--color-success-light), transparent);
    border-radius: 50%;
    animation: float-particle-b-t8ytr3yszx 1s ease-in-out infinite;
}

.particle:nth-child(1)[b-t8ytr3yszx] {
    left: 20%;
    animation-delay: 0s;
}

.particle:nth-child(2)[b-t8ytr3yszx] {
    left: 40%;
    animation-delay: 0.2s;
}

.particle:nth-child(3)[b-t8ytr3yszx] {
    left: 60%;
    animation-delay: 0.4s;
}

.particle:nth-child(4)[b-t8ytr3yszx] {
    left: 80%;
    animation-delay: 0.6s;
}

.particle:nth-child(5)[b-t8ytr3yszx] {
    left: 50%;
    animation-delay: 0.3s;
}

@keyframes float-particle-b-t8ytr3yszx {
    0% {
        bottom: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        bottom: 100%;
        opacity: 0;
    }
}

/* Rarity border colors */
.consumable-card.rarity-common[b-t8ytr3yszx] {
    border-left: 3px solid var(--color-text-secondary);
}

.consumable-card.rarity-uncommon[b-t8ytr3yszx] {
    border-left: 3px solid var(--color-success);
}

.consumable-card.rarity-rare[b-t8ytr3yszx] {
    border-left: 3px solid var(--color-info);
}

.consumable-card.rarity-epic[b-t8ytr3yszx] {
    border-left: 3px solid #a855f7;
}

.consumable-card.rarity-legendary[b-t8ytr3yszx] {
    border-left: 3px solid var(--color-warning);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}

.consumable-card.rarity-legendary:hover[b-t8ytr3yszx] {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 30px rgba(245, 158, 11, 0.3);
}

.consumable-card-header[b-t8ytr3yszx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

.consumable-name-section[b-t8ytr3yszx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.consumable-name[b-t8ytr3yszx] {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quantity-badge[b-t8ytr3yszx] {
    background: rgba(0, 0, 0, 0.4);
    color: var(--color-warning-bright);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(251, 191, 36, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
}

.consumable-meta[b-t8ytr3yszx] {
    flex-shrink: 0;
}

.consumable-description[b-t8ytr3yszx] {
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.consumable-effects[b-t8ytr3yszx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Effect chip styling */
.effect-chip-hp[b-t8ytr3yszx] {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: var(--color-danger-lighter) !important;
}

.effect-chip-mana[b-t8ytr3yszx] {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: var(--color-info-lighter) !important;
}

.effect-chip-buff[b-t8ytr3yszx] {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: var(--color-warning-light) !important;
}

.effect-chip-damage[b-t8ytr3yszx] {
    background: rgba(139, 92, 246, 0.15) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    color: var(--color-monk-lighter) !important;
}

.effect-chip-full[b-t8ytr3yszx] {
    background: rgba(34, 197, 94, 0.15) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: var(--color-success-lighter) !important;
}

.consumable-type[b-t8ytr3yszx] {
    display: flex;
    align-items: center;
    color: var(--color-text-tertiary);
    font-size: 0.75rem;
}

/* Rarity chip styling */
.rarity-chip-common[b-t8ytr3yszx] {
    background: rgba(148, 163, 184, 0.2) !important;
    color: var(--color-text-secondary) !important;
}

.rarity-chip-uncommon[b-t8ytr3yszx] {
    background: rgba(34, 197, 94, 0.2) !important;
    color: var(--color-success-light) !important;
}

.rarity-chip-rare[b-t8ytr3yszx] {
    background: rgba(59, 130, 246, 0.2) !important;
    color: var(--color-info-light) !important;
}

.rarity-chip-epic[b-t8ytr3yszx] {
    background: rgba(168, 85, 247, 0.2) !important;
    color: #a78bfa !important;
}

.rarity-chip-legendary[b-t8ytr3yszx] {
    background: rgba(245, 158, 11, 0.2) !important;
    color: var(--color-warning-bright) !important;
    font-weight: 600 !important;
}

/* Button styling */
.btn-cancel-consumable[b-t8ytr3yszx] {
    color: var(--color-text-secondary) !important;
}

.btn-cancel-consumable:hover:not(:disabled)[b-t8ytr3yszx] {
    background: rgba(255, 215, 0, 0.1) !important;
    color: var(--color-primary) !important;
}

/* Custom scrollbar */
.consumable-list[b-t8ytr3yszx]::-webkit-scrollbar {
    width: 8px;
}

.consumable-list[b-t8ytr3yszx]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.consumable-list[b-t8ytr3yszx]::-webkit-scrollbar-thumb {
    background: var(--color-border-active);
    border-radius: 4px;
}

.consumable-list[b-t8ytr3yszx]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.5);
}

/* ===== MOBILE RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
    .consumable-list[b-t8ytr3yszx] {
        max-height: none; /* Let the dialog control the height */
        min-height: auto;
        padding: 0.25rem;
        gap: 0.5rem;
        overflow-y: visible; /* Content handled by dialog */
    }

    .consumable-card[b-t8ytr3yszx] {
        padding: 0.75rem;
        flex-shrink: 0;
    }

    .consumable-card-header[b-t8ytr3yszx] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .consumable-name-section[b-t8ytr3yszx] {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .consumable-name[b-t8ytr3yszx] {
        font-size: 0.95rem !important;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .consumable-meta[b-t8ytr3yszx] {
        flex-shrink: 0;
    }

    .consumable-meta[b-t8ytr3yszx]  .mud-chip {
        font-size: 0.65rem !important;
        height: 20px !important;
    }

    .consumable-description[b-t8ytr3yszx] {
        display: none; /* Hide description on mobile to save space */
    }

    .consumable-effects[b-t8ytr3yszx] {
        gap: 0.25rem;
        flex-wrap: wrap;
    }

    .consumable-effects[b-t8ytr3yszx]  .mud-chip {
        font-size: 0.65rem !important;
        padding: 0.1rem 0.4rem !important;
        height: auto !important;
        min-height: 22px;
    }

    .quantity-badge[b-t8ytr3yszx] {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }

    .consumable-type[b-t8ytr3yszx] {
        display: none; /* Hide type on mobile */
    }

    .consumable-modal-title[b-t8ytr3yszx] {
        font-size: 1rem;
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .consumable-card[b-t8ytr3yszx] {
        padding: 0.6rem;
    }

    .consumable-name[b-t8ytr3yszx] {
        font-size: 0.85rem !important;
    }

    .consumable-effects[b-t8ytr3yszx]  .mud-chip {
        font-size: 0.6rem !important;
    }

    .quantity-badge[b-t8ytr3yszx] {
        font-size: 0.65rem;
    }
}
/* /Components/Combat/Modals/FormationPickerModal.razor.rz.scp.css */
/* ── Formation Picker Modal – Hex Board Styles ── */

/* Title */
.formation-title[b-pc6jqeqxsb] {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.02em;
}

/* ── Hex board container ── */
.formation-hex-board[b-pc6jqeqxsb] {
    position: relative;
    width: 100%;
    max-height: 340px;
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.95));
    border: 1px solid rgba(255, 215, 0, 0.12);
}

.formation-hex-svg[b-pc6jqeqxsb] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 340px;
}

/* ── Hex cell base ── */
.fp-hex[b-pc6jqeqxsb] {
    fill: rgba(30, 41, 59, 0.6);
    stroke: rgba(148, 163, 184, 0.15);
    stroke-width: 0.5;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

/* ── Player-side zone colours ── */
.fp-player-zone[b-pc6jqeqxsb] {
    stroke: rgba(148, 163, 184, 0.25);
}

.fp-zone-vanguard[b-pc6jqeqxsb] {
    fill: rgba(239, 68, 68, 0.12);
}

.fp-zone-flank[b-pc6jqeqxsb] {
    fill: rgba(245, 158, 11, 0.10);
}

.fp-zone-rear[b-pc6jqeqxsb] {
    fill: rgba(59, 130, 246, 0.10);
}

/* Hover */
.fp-player-zone:hover:not(.fp-full)[b-pc6jqeqxsb] {
    stroke: rgba(255, 215, 0, 0.5);
    stroke-width: 1;
}

.fp-zone-vanguard:hover:not(.fp-full)[b-pc6jqeqxsb] {
    fill: rgba(239, 68, 68, 0.25);
}

.fp-zone-flank:hover:not(.fp-full)[b-pc6jqeqxsb] {
    fill: rgba(245, 158, 11, 0.22);
}

.fp-zone-rear:hover:not(.fp-full)[b-pc6jqeqxsb] {
    fill: rgba(59, 130, 246, 0.22);
}

/* Selected */
.fp-selected[b-pc6jqeqxsb] {
    stroke: rgba(74, 222, 128, 0.7) !important;
    stroke-width: 1.5 !important;
    filter: url(#fp-glow);
}

.fp-zone-vanguard.fp-selected[b-pc6jqeqxsb] {
    fill: rgba(239, 68, 68, 0.35);
}

.fp-zone-flank.fp-selected[b-pc6jqeqxsb] {
    fill: rgba(245, 158, 11, 0.30);
}

.fp-zone-rear.fp-selected[b-pc6jqeqxsb] {
    fill: rgba(59, 130, 246, 0.30);
}

/* Full (disabled) */
.fp-full[b-pc6jqeqxsb] {
    opacity: 0.35;
}

/* Occupied by another player — locked, not clickable */
.fp-occupied[b-pc6jqeqxsb] {
    fill: rgba(100, 116, 139, 0.45) !important;
    stroke: rgba(148, 163, 184, 0.4) !important;
    pointer-events: none;
}

/* Player-claim tokens (rendered on top of polygons) */
.fp-token[b-pc6jqeqxsb] {
    pointer-events: none;
    stroke-width: 1.5;
}

.fp-token-mine[b-pc6jqeqxsb] {
    fill: rgba(74, 222, 128, 0.85);
    stroke: rgba(255, 215, 0, 0.95);
    filter: url(#fp-glow);
}

.fp-token-other[b-pc6jqeqxsb] {
    fill: rgba(59, 130, 246, 0.7);
    stroke: rgba(148, 163, 184, 0.6);
}

.fp-token-label[b-pc6jqeqxsb] {
    pointer-events: none;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 700;
    fill: rgba(15, 23, 42, 0.95);
    text-transform: uppercase;
}

/* ── Barrier hexes ── */
.fp-barrier[b-pc6jqeqxsb] {
    fill: rgba(148, 163, 184, 0.08);
    stroke: rgba(148, 163, 184, 0.12);
    stroke-width: 0.4;
}

/* ── Enemy-side hexes (dimmed, non-interactive) ── */
.fp-enemy[b-pc6jqeqxsb] {
    fill: rgba(239, 68, 68, 0.04);
    stroke: rgba(148, 163, 184, 0.08);
    stroke-width: 0.3;
    pointer-events: none;
}

/* ── Zone labels ── */
.fp-zone-label[b-pc6jqeqxsb] {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 600;
    fill: rgba(248, 250, 252, 0.7);
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fp-zone-label-selected[b-pc6jqeqxsb] {
    fill: rgba(74, 222, 128, 0.9);
}

.fp-zone-bonus[b-pc6jqeqxsb] {
    font-family: inherit;
    font-size: 6px;
    fill: rgba(148, 163, 184, 0.6);
    pointer-events: none;
}

.fp-side-label[b-pc6jqeqxsb] {
    font-family: 'Cinzel', serif;
    font-size: 7px;
    font-weight: 600;
    fill: rgba(59, 130, 246, 0.5);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
}

.fp-side-label-enemy[b-pc6jqeqxsb] {
    fill: rgba(239, 68, 68, 0.4);
}

/* ── Zone detail strip (below the hex board) ── */
.formation-zone-strip[b-pc6jqeqxsb] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fzs-item[b-pc6jqeqxsb] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(30, 41, 59, 0.4);
    cursor: default;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 100px;
}

.fzs-selected[b-pc6jqeqxsb] {
    border-color: rgba(74, 222, 128, 0.5);
    background: rgba(74, 222, 128, 0.08);
}

.fzs-full[b-pc6jqeqxsb] {
    opacity: 0.5;
    cursor: not-allowed;
}

.fzs-name[b-pc6jqeqxsb] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-primary, #f8fafc);
    white-space: nowrap;
}

.fzs-chip[b-pc6jqeqxsb] {
    font-size: 0.7rem !important;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .formation-hex-board[b-pc6jqeqxsb] {
        max-height: 260px;
    }

    .formation-zone-strip[b-pc6jqeqxsb] {
        flex-direction: column;
    }

    .fzs-item[b-pc6jqeqxsb] {
        min-width: unset;
    }
}
/* /Components/Combat/Modals/HexPickerModal.razor.rz.scp.css */
/* ── Hex Picker Modal — Shadow Step / Swift Step target picker ── */

.hp-board[b-lvorl7of51] {
    position: relative;
    width: 100%;
    max-height: 340px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.95));
    border: 1px solid rgba(255, 215, 0, 0.12);
}

.hp-svg[b-lvorl7of51] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 340px;
}

/* ── Hex base ── */
.hp-hex[b-lvorl7of51] {
    fill: rgba(30, 41, 59, 0.6);
    stroke: rgba(148, 163, 184, 0.15);
    stroke-width: 0.5;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

/* Player-side zone tints */
.hp-player-zone[b-lvorl7of51] {
    stroke: rgba(148, 163, 184, 0.25);
}

.hp-zone-vanguard.hp-player-zone[b-lvorl7of51] {
    fill: rgba(239, 68, 68, 0.12);
}

.hp-zone-flank.hp-player-zone[b-lvorl7of51] {
    fill: rgba(245, 158, 11, 0.10);
}

.hp-zone-rear.hp-player-zone[b-lvorl7of51] {
    fill: rgba(59, 130, 246, 0.10);
}

/* Enemy-side zone tints (slightly redder, dimmer when not selectable) */
.hp-enemy-zone[b-lvorl7of51] {
    fill: color-mix(in srgb, var(--combat-enemy) 6%, transparent);
    stroke: rgba(148, 163, 184, 0.08);
}

.hp-enemy-zone:not(.hp-disallowed):not(.hp-occupied)[b-lvorl7of51] {
    fill: color-mix(in srgb, var(--combat-enemy) 14%, transparent);
}

/* Hover for clickable hexes */
.hp-hex:not(.hp-disallowed):not(.hp-occupied):hover[b-lvorl7of51] {
    stroke: rgba(255, 215, 0, 0.6);
    stroke-width: 1;
    fill: rgba(255, 215, 0, 0.18);
}

/* Selected */
.hp-selected[b-lvorl7of51] {
    stroke: color-mix(in srgb, var(--combat-aim-valid) 85%, transparent) !important;
    stroke-width: 1.8 !important;
    fill: color-mix(in srgb, var(--combat-aim-valid) 35%, transparent) !important;
    filter: url(#hp-glow);
}

/* Disallowed (zone not in AvailableZones, or enemy side when EnemySideSelectable=false) */
.hp-disallowed[b-lvorl7of51] {
    opacity: 0.35;
}

/* Occupied (a combatant is already on this hex) */
.hp-occupied[b-lvorl7of51] {
    fill: rgba(100, 116, 139, 0.5) !important;
    stroke: rgba(148, 163, 184, 0.4) !important;
    opacity: 0.6;
}

/* Barrier */
.hp-barrier[b-lvorl7of51] {
    fill: rgba(148, 163, 184, 0.08);
    stroke: rgba(148, 163, 184, 0.12);
    stroke-width: 0.4;
    pointer-events: none;
}

/* Labels */
.hp-zone-label[b-lvorl7of51] {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 600;
    fill: rgba(248, 250, 252, 0.7);
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hp-zone-label-enemy[b-lvorl7of51] {
    fill: color-mix(in srgb, var(--combat-enemy) 70%, transparent);
}

.hp-side-label[b-lvorl7of51] {
    font-family: 'Cinzel', serif;
    font-size: 7px;
    font-weight: 600;
    fill: color-mix(in srgb, var(--combat-ally) 50%, transparent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
}

.hp-side-label-enemy[b-lvorl7of51] {
    fill: color-mix(in srgb, var(--combat-enemy) 40%, transparent);
}

@media (max-width: 600px) {
    .hp-board[b-lvorl7of51] {
        max-height: 260px;
    }
}
/* /Components/Combat/Modals/WeaponSwitcherDialog.razor.rz.scp.css */
/* ============================================================
   WeaponSwitcherDialog — scoped styles
   Evoking: Slay the Spire card hover, Diablo IV item tile,
            Path of Exile inventory grid.
   ============================================================ */

/* ── Dialog shell ─────────────────────────────────────────── */
:global(.weapon-switcher-dialog .mud-dialog)[b-kohgc8g5nn] {
    max-width: 640px;
    width: 100%;
    background: linear-gradient(160deg, rgba(13, 19, 33, 0.98) 0%, rgba(20, 30, 50, 0.98) 100%);
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 215, 0, 0.06);
}

:global(.weapon-switcher-dialog .mud-dialog-content)[b-kohgc8g5nn] {
    padding: 0 16px 8px;
    overflow-y: auto;
    max-height: 60vh;
}

:global(.weapon-switcher-dialog .mud-dialog-title)[b-kohgc8g5nn] {
    padding: 14px 16px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

:global(.weapon-switcher-dialog .mud-dialog-actions)[b-kohgc8g5nn] {
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    justify-content: flex-start;
}

/* ── Title row ────────────────────────────────────────────── */
.wsd-title-row[b-kohgc8g5nn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wsd-title-left[b-kohgc8g5nn] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.wsd-title-icon[b-kohgc8g5nn] {
    flex-shrink: 0;
}

.wsd-title-text[b-kohgc8g5nn] {
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffd700;
    white-space: nowrap;
}

.wsd-title-current[b-kohgc8g5nn] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.wsd-subtitle[b-kohgc8g5nn] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    padding-top: 3px;
    letter-spacing: 0.02em;
}

/* ── Card grid ────────────────────────────────────────────── */
.wsd-grid[b-kohgc8g5nn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px 0 4px;
}

@media (max-width: 500px) {
    .wsd-grid[b-kohgc8g5nn] {
        grid-template-columns: 1fr;
    }
}

/* ── Individual weapon card ───────────────────────────────── */
.wsd-card[b-kohgc8g5nn] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 12px 10px;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    background: rgba(20, 30, 48, 0.7);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
}

.wsd-card--available[b-kohgc8g5nn] {
    cursor: pointer;
}

.wsd-card--available:hover[b-kohgc8g5nn] {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(99, 102, 241, 0.5);
    border-color: rgba(99, 102, 241, 0.55);
    background: rgba(30, 40, 70, 0.85);
}

.wsd-card--available:active[b-kohgc8g5nn] {
    transform: translateY(-1px);
}

.wsd-card--equipped[b-kohgc8g5nn] {
    border-color: rgba(234, 179, 8, 0.65);
    background: rgba(234, 179, 8, 0.05);
    box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.2), inset 0 0 30px rgba(234, 179, 8, 0.03);
    cursor: default;
}

/* ── Equipped badge ───────────────────────────────────────── */
.wsd-equipped-badge[b-kohgc8g5nn] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-warning-bright);
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.35);
    border-radius: 999px;
    padding: 2px 7px;
}

/* ── Magic bonus badge ────────────────────────────────────── */
.wsd-magic-badge[b-kohgc8g5nn] {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 6px;
    border: 1px solid transparent;
}

/* ── Card header: icon + name ─────────────────────────────── */
.wsd-card-header[b-kohgc8g5nn] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px; /* clear equipped / magic badges */
    padding-right: 60px; /* avoid overlap with absolute badges */
}

.wsd-weapon-icon-wrap[b-kohgc8g5nn] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.wsd-name-col[b-kohgc8g5nn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wsd-name[b-kohgc8g5nn] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wsd-level-req[b-kohgc8g5nn] {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.04em;
}

/* ── Damage dice chip ─────────────────────────────────────── */
.wsd-damage-chip[b-kohgc8g5nn] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    border-radius: 8px;
    padding: 4px 10px;
    align-self: flex-start;
    border: 1.5px solid transparent;
}

.wsd-dice-icon[b-kohgc8g5nn] {
    opacity: 0.75;
}

/* Rarity tints for damage chip + magic badge */
.rarity-common[b-kohgc8g5nn]   { color: #94a3b8; border-color: rgba(148, 163, 184, 0.25); background: rgba(148, 163, 184, 0.08); }
.rarity-uncommon[b-kohgc8g5nn] { color: #4ade80; border-color: rgba(74, 222, 128, 0.35);  background: rgba(74, 222, 128, 0.07); }
.rarity-rare[b-kohgc8g5nn]     { color: #60a5fa; border-color: rgba(96, 165, 250, 0.35);  background: rgba(96, 165, 250, 0.07); }
.rarity-epic[b-kohgc8g5nn]     { color: #c084fc; border-color: rgba(192, 132, 252, 0.35); background: rgba(192, 132, 252, 0.07); }
.rarity-legendary[b-kohgc8g5nn]{ color: #f59e0b; border-color: rgba(245, 158, 11, 0.5);   background: rgba(245, 158, 11, 0.1); }

/* ── Chips row ────────────────────────────────────────────── */
.wsd-chips-row[b-kohgc8g5nn] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.wsd-chip[b-kohgc8g5nn] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.wsd-chip--melee[b-kohgc8g5nn]   { color: #94a3b8; background: rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.2); }
.wsd-chip--ranged[b-kohgc8g5nn]  { color: #60a5fa; background: rgba(96, 165, 250, 0.08);  border-color: rgba(96, 165, 250, 0.25); }
.wsd-chip--dmg-type[b-kohgc8g5nn]{ color: #f87171; background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.22); }
.wsd-chip--prop[b-kohgc8g5nn]    { color: #a8a29e; background: rgba(168, 162, 158, 0.08); border-color: rgba(168, 162, 158, 0.2); }
.wsd-chip--twohanded[b-kohgc8g5nn] { color: #fb923c; background: rgba(251, 146, 60, 0.08); border-color: rgba(251, 146, 60, 0.25); }

/* Elemental type chips */
.wsd-chip--elemental[b-kohgc8g5nn] { font-size: 0.64rem; }
.elemental-fire[b-kohgc8g5nn]      { color: #fb923c; background: rgba(251, 146, 60, 0.1);  border-color: rgba(251, 146, 60, 0.3); }
.elemental-frost[b-kohgc8g5nn]     { color: #7dd3fc; background: rgba(125, 211, 252, 0.08);border-color: rgba(125, 211, 252, 0.3); }
.elemental-lightning[b-kohgc8g5nn] { color: #fde047; background: rgba(253, 224, 71, 0.08); border-color: rgba(253, 224, 71, 0.3); }
.elemental-holy[b-kohgc8g5nn]      { color: #fef08a; background: rgba(254, 240, 138, 0.08);border-color: rgba(254, 240, 138, 0.4); }
.elemental-cursed[b-kohgc8g5nn]    { color: #a78bfa; background: rgba(167, 139, 250, 0.08);border-color: rgba(167, 139, 250, 0.3); }
.elemental-nature[b-kohgc8g5nn]    { color: #86efac; background: rgba(134, 239, 172, 0.08);border-color: rgba(134, 239, 172, 0.3); }
.elemental-void[b-kohgc8g5nn]      { color: #818cf8; background: rgba(129, 140, 248, 0.08);border-color: rgba(129, 140, 248, 0.3); }
.elemental-shadow[b-kohgc8g5nn]    { color: #94a3b8; background: rgba(148, 163, 184, 0.06);border-color: rgba(148, 163, 184, 0.2); }

/* ── Stat bonuses ─────────────────────────────────────────── */
.wsd-stat-bonuses[b-kohgc8g5nn] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #7dd3fc;
    letter-spacing: 0.01em;
}

/* ── Lore text ────────────────────────────────────────────── */
.wsd-lore[b-kohgc8g5nn] {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Equip button ─────────────────────────────────────────── */
.wsd-select-btn[b-kohgc8g5nn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 7px 0;
    margin-top: 2px;
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.wsd-select-btn:hover[b-kohgc8g5nn] {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.65);
    color: #a5b4fc;
}

.wsd-select-btn:active[b-kohgc8g5nn] {
    background: rgba(99, 102, 241, 0.32);
}

/* ── Empty state ──────────────────────────────────────────── */
.wsd-empty[b-kohgc8g5nn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 16px;
    color: rgba(255, 255, 255, 0.3);
}
/* /Components/Combat/Multiplayer/AllySelectionModal.razor.rz.scp.css */
/* AllySelectionModal - multiplayer ally picker (heal / buff spells, Lay on Hands). */

.ally-picker-title[b-3jvf9ggzoi] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    color: var(--color-primary);
}

.ally-picker-prompt[b-3jvf9ggzoi],
.ally-picker-empty[b-3jvf9ggzoi] {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.ally-picker-list[b-3jvf9ggzoi] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-height: 55vh;
    overflow-y: auto;
}

.ally-row[b-3jvf9ggzoi] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    min-height: 44px; /* touch target on tablets */
    text-align: left;
    color: var(--color-text-primary);
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.ally-row.selectable:hover[b-3jvf9ggzoi],
.ally-row.selectable:focus-visible[b-3jvf9ggzoi] {
    border-color: var(--color-border-active);
    transform: translateY(-1px);
}

.ally-row.downed.selectable[b-3jvf9ggzoi] {
    border-color: var(--combat-bad);
}

.ally-row.blocked[b-3jvf9ggzoi] {
    cursor: not-allowed;
    opacity: 0.55;
}

.ally-row-head[b-3jvf9ggzoi] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ally-row-name[b-3jvf9ggzoi] {
    font-weight: 600;
}

.ally-row-tag[b-3jvf9ggzoi] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 var(--space-xs);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-sm);
}

.ally-row-tag.downed[b-3jvf9ggzoi] {
    color: var(--combat-bad);
    border-color: var(--combat-bad);
}

.ally-row-hp[b-3jvf9ggzoi] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ally-hp-bar[b-3jvf9ggzoi] {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.ally-hp-fill[b-3jvf9ggzoi] {
    display: block;
    height: 100%;
}

.ally-hp-fill.hp-high[b-3jvf9ggzoi] {
    background: var(--combat-hp-high);
}

.ally-hp-fill.hp-mid[b-3jvf9ggzoi] {
    background: var(--combat-hp-mid);
}

.ally-hp-fill.hp-low[b-3jvf9ggzoi] {
    background: var(--combat-hp-low);
}

.ally-hp-text[b-3jvf9ggzoi] {
    min-width: 6.5em;
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.ally-row-reason[b-3jvf9ggzoi] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
/* /Components/Combat/Multiplayer/MultiplayerReconnectBanner.razor.rz.scp.css */
/* MultiplayerReconnectBanner - pinned to the top of the combat page while the hub reconnects.
   Above the rest-flow overlays (z-index 9999 in Combat.razor) so it is never hidden behind a vote. */

.mp-reconnect-banner[b-9o2j89ca23] {
    position: fixed;
    top: var(--space-sm);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    max-width: calc(100vw - 2 * var(--space-md));
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated-alt);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-lg);
}

.mp-reconnect-failed[b-9o2j89ca23] {
    border-color: var(--combat-bad);
}

.mp-reconnect-icon[b-9o2j89ca23] {
    color: var(--color-warning);
    font-size: 20px;
}

.mp-reconnect-failed .mp-reconnect-icon[b-9o2j89ca23] {
    color: var(--combat-bad-light);
}

.mp-reconnect-banner:not(.mp-reconnect-failed) .mp-reconnect-icon[b-9o2j89ca23] {
    animation: mp-reconnect-spin-b-9o2j89ca23 1.2s linear infinite;
}

.mp-reconnect-refresh[b-9o2j89ca23] {
    flex-shrink: 0;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-primary-dark);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
}

.mp-reconnect-refresh:hover[b-9o2j89ca23],
.mp-reconnect-refresh:focus-visible[b-9o2j89ca23] {
    background: var(--color-primary-dark);
    color: var(--color-bg-base);
}

@keyframes mp-reconnect-spin-b-9o2j89ca23 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mp-reconnect-banner .mp-reconnect-icon[b-9o2j89ca23] {
        animation: none;
    }
}
/* /Components/Combat/Multiplayer/PartyMemberFrame.razor.rz.scp.css */
/* PartyMemberFrame: one ally (audit U6). Row on the desktop party stack, compact chip on the
   tablet strip. Class identity comes from the design-system class utilities: `class-accent`
   (--class-accent for the frame border) and `class-text` (name color). */

.pmf[b-7seqaqxw9j] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid color-mix(in srgb, var(--class-accent, var(--color-primary)) 35%, transparent);
    border-left: 3px solid var(--class-accent, var(--color-primary));
    border-radius: var(--radius-md);
    min-width: 0;
    position: relative;
}

.pmf.is-turn[b-7seqaqxw9j] {
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}

.pmf.is-self[b-7seqaqxw9j] {
    background: rgba(30, 41, 59, 0.9);
}

.pmf.is-downed[b-7seqaqxw9j] {
    border-color: color-mix(in srgb, var(--combat-bad-light) 75%, transparent);
}

.pmf.is-dead[b-7seqaqxw9j],
.pmf.is-fled[b-7seqaqxw9j] {
    opacity: 0.55;
    filter: grayscale(0.6);
}

.pmf.is-offline .pmf-avatar[b-7seqaqxw9j] {
    filter: grayscale(0.8);
}

/* ---------- Avatar ---------- */
.pmf-avatar[b-7seqaqxw9j] {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 6px;
    background: color-mix(in srgb, var(--class-accent, var(--color-primary)) 18%, rgba(0, 0, 0, 0.4));
    border: 1px solid color-mix(in srgb, var(--class-accent, var(--color-primary)) 60%, transparent);
}

.pmf-class-icon[b-7seqaqxw9j] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--class-accent, var(--color-primary));
}

.pmf-portrait[b-7seqaqxw9j] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.pmf-turn-dot[b-7seqaqxw9j] {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
}

.pmf-conn[b-7seqaqxw9j] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.9);
}

.pmf-conn.online[b-7seqaqxw9j]  { background: var(--combat-good); }
.pmf-conn.offline[b-7seqaqxw9j] { background: var(--combat-bad); }

/* ---------- Body ---------- */
.pmf-body[b-7seqaqxw9j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pmf-name-row[b-7seqaqxw9j] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.pmf-name[b-7seqaqxw9j] {
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pmf-you[b-7seqaqxw9j] {
    flex-shrink: 0;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-bg-base);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.pmf-level[b-7seqaqxw9j] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.6rem;
    color: var(--color-text-secondary);
}

.pmf-state[b-7seqaqxw9j] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6rem;
    font-weight: 700;
}

.pmf-state .material-icons[b-7seqaqxw9j] { font-size: 12px; }
.pmf-state.downed[b-7seqaqxw9j] { color: var(--combat-bad-lighter); }
.pmf-state.dead[b-7seqaqxw9j]   { color: var(--color-text-secondary); }
.pmf-state.fled[b-7seqaqxw9j]   { color: var(--color-warning-bright); }

/* ---------- Bars ---------- */
.pmf-bar-row[b-7seqaqxw9j] {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 4px;
}

.pmf-bar-label[b-7seqaqxw9j] {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.pmf-bar[b-7seqaqxw9j] {
    height: 5px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 3px;
    overflow: hidden;
}

.pmf-bar-fill[b-7seqaqxw9j] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.pmf-bar-fill.hp.healthy[b-7seqaqxw9j]  { background: var(--combat-hp-high); }
.pmf-bar-fill.hp.low[b-7seqaqxw9j]      { background: var(--combat-hp-mid-light); }
.pmf-bar-fill.hp.critical[b-7seqaqxw9j] { background: var(--combat-hp-low); }
.pmf-bar-fill.mana[b-7seqaqxw9j]        { background: var(--color-mana); }
/* Same monk-to-ki gradient as the HUD Ki bar (CompactPlayerHud .cph-bar-fill.ki). */
.pmf-bar-fill.ki[b-7seqaqxw9j]          { background: linear-gradient(90deg, var(--color-monk), var(--color-ki)); }
.pmf-bar-fill.swagger[b-7seqaqxw9j]     { background: var(--color-swagger); }

.pmf-bar-value[b-7seqaqxw9j] {
    font-size: 0.6rem;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ---------- Status pips ---------- */
.pmf-status-row[b-7seqaqxw9j] {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    margin-top: 1px;
}

.pmf-status-pip[b-7seqaqxw9j] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.pmf-status-pip[b-7seqaqxw9j]  .mud-icon-root {
    width: 11px;
    height: 11px;
    font-size: 11px;
}

.pmf-status-duration[b-7seqaqxw9j] {
    position: absolute;
    right: -3px;
    bottom: -3px;
    min-width: 9px;
    padding: 0 1px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.8);
    font-size: 0.45rem;
    line-height: 9px;
    text-align: center;
}

.pmf-status-more[b-7seqaqxw9j] {
    width: auto;
    padding: 0 3px;
    background: rgba(15, 23, 42, 0.85);
}

/* ---------- Compact (tablet strip chip) ---------- */
.pmf.pmf--compact[b-7seqaqxw9j] {
    min-width: 132px;
    max-width: 168px;
    flex-shrink: 0;
    padding: 4px 6px;
    gap: 6px;
}

.pmf.pmf--compact .pmf-avatar[b-7seqaqxw9j] {
    width: 30px;
    height: 30px;
}

.pmf.pmf--compact .pmf-class-icon[b-7seqaqxw9j] { font-size: 16px; }

/* ---------- Party column additions (combat HUD rethink WP10) ---------- */

/* Tags under the name: who is acting, who is away (presence from the server's presence service). */
.pmf-tags[b-7seqaqxw9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.pmf-tag[b-7seqaqxw9j] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 5px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 45%, transparent);
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    flex-shrink: 0;
}

.pmf-tag .material-icons[b-7seqaqxw9j] { font-size: 11px; }

.pmf-tag-acting[b-7seqaqxw9j] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pmf-tag-away[b-7seqaqxw9j] {
    border-color: color-mix(in srgb, var(--combat-bad-light) 60%, transparent);
    color: var(--combat-bad-lighter);
}

.pmf-tag-target[b-7seqaqxw9j] {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    color: var(--color-primary);
}

/* Downed: the one state an ally can still fix, so it reads first, with the rounds left large. */
.pmf.is-downed:not(.pmf--compact)[b-7seqaqxw9j] {
    border-left-color: var(--combat-bad);
    background: color-mix(in srgb, var(--combat-bad-dark) 22%, var(--color-bg-elevated-alt));
}

.pmf-downed[b-7seqaqxw9j] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--combat-bad-dark) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--combat-bad-light) 70%, transparent);
    color: var(--combat-bad-lightest);
    font-size: 0.65rem;
    font-weight: 800;
}

.pmf-downed-icon[b-7seqaqxw9j] {
    font-size: 15px;
    animation: pmfDownedPulse-b-7seqaqxw9j 1.4s ease-in-out infinite;
}

.pmf-downed-rounds[b-7seqaqxw9j] {
    font-size: 0.95rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pmf-downed-unit[b-7seqaqxw9j] {
    font-weight: 600;
    color: var(--combat-bad-lighter);
}

@keyframes pmfDownedPulse-b-7seqaqxw9j {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* Status chips (the full frame): icon, name, turns left. */
.pmf-status-chip[b-7seqaqxw9j] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 0 4px 0 2px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 20%, transparent);
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 16px;
    color: var(--color-text-primary);
    min-width: 0;
}

.pmf-status-chip[b-7seqaqxw9j]  .mud-icon-root {
    width: 11px;
    height: 11px;
    font-size: 11px;
    flex-shrink: 0;
}

.pmf-status-name[b-7seqaqxw9j] {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pmf-status-chip-duration[b-7seqaqxw9j] {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Ally target (WP10): clickable frames, the selected ally, and the ally aim. The party column sets --aim-eco to the
   aimed action's turn slot (the board's rule), so a frame lights in the same color as the tokens. */
.pmf.is-clickable[b-7seqaqxw9j] {
    cursor: pointer;
}

.pmf.is-clickable:hover[b-7seqaqxw9j] {
    border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.pmf.is-clickable:focus-visible[b-7seqaqxw9j] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.pmf.is-selected[b-7seqaqxw9j] {
    outline: 1px dashed var(--color-primary);
    outline-offset: 2px;
}

.pmf.aim-valid[b-7seqaqxw9j] {
    outline: 2px solid var(--aim-eco, var(--color-eco-action));
    outline-offset: 2px;
    box-shadow: 0 0 10px color-mix(in srgb, var(--aim-eco, var(--color-eco-action)) 45%, transparent);
}

.pmf.aim-armed[b-7seqaqxw9j] {
    outline-width: 3px;
    animation: pmfArmedPulse-b-7seqaqxw9j 1.2s ease-in-out infinite;
}

.pmf.aim-invalid[b-7seqaqxw9j] {
    cursor: not-allowed;
    opacity: 0.45;
    filter: grayscale(0.7);
}

@keyframes pmfArmedPulse-b-7seqaqxw9j {
    0%, 100% { outline-offset: 2px; }
    50%      { outline-offset: 4px; }
}

.pmf-target-line[b-7seqaqxw9j] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 0;
}

.pmf-target-line > span:last-child[b-7seqaqxw9j] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.pmf-target-line .material-icons[b-7seqaqxw9j] { font-size: 12px; flex-shrink: 0; }
.pmf-target-line.valid[b-7seqaqxw9j],
.pmf-target-line.armed[b-7seqaqxw9j]   { color: var(--aim-eco, var(--color-eco-action)); }
.pmf-target-line.blocked[b-7seqaqxw9j] { color: var(--color-text-secondary); }

@media (prefers-reduced-motion: reduce) {
    .pmf-bar-fill[b-7seqaqxw9j] { transition: none; }
    .pmf-downed-icon[b-7seqaqxw9j],
    .pmf.aim-armed[b-7seqaqxw9j] { animation: none; }
}
/* /Components/Combat/Multiplayer/PartyRecoveryList.razor.rz.scp.css */
.party-recovery-list[b-6cd7xxqjh7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prl-row[b-6cd7xxqjh7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.prl-row.is-self[b-6cd7xxqjh7] {
    border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.prl-name[b-6cd7xxqjh7] {
    flex: 1 1 140px;
    font-weight: 700;
    min-width: 0;
}

.prl-stat[b-6cd7xxqjh7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.prl-icon[b-6cd7xxqjh7] {
    font-size: 16px;
}

.prl-icon.hp[b-6cd7xxqjh7]   { color: var(--color-danger-light); }
.prl-icon.mana[b-6cd7xxqjh7] { color: var(--color-mana); }

.prl-change[b-6cd7xxqjh7] {
    font-weight: 700;
    font-size: 0.8rem;
}

.prl-change.up[b-6cd7xxqjh7]   { color: var(--combat-good); }
.prl-change.down[b-6cd7xxqjh7] { color: var(--combat-bad-light); }

.prl-row.is-away[b-6cd7xxqjh7] {
    opacity: 0.7;
    border-style: dashed;
}

.prl-away[b-6cd7xxqjh7] {
    margin-left: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}
/* /Components/Combat/Multiplayer/PartyVoteChips.razor.rz.scp.css */
.party-vote-chips[b-e68fa59oey] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.pvc-chip[b-e68fa59oey] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.3);
    font-size: 0.75rem;
}

.pvc-chip.voted[b-e68fa59oey] {
    border-color: color-mix(in srgb, var(--combat-good) 60%, transparent);
}

.pvc-chip.is-self[b-e68fa59oey] {
    box-shadow: 0 0 0 1px var(--color-primary);
}

.pvc-chip.away[b-e68fa59oey],
.pvc-chip.sitting-out[b-e68fa59oey] {
    opacity: 0.6;
    border-style: dashed;
}

.pvc-icon[b-e68fa59oey] {
    font-size: 15px;
    color: var(--color-text-secondary);
}

.pvc-chip.voted .pvc-icon[b-e68fa59oey] {
    color: var(--combat-good);
}

.pvc-name[b-e68fa59oey] {
    font-weight: 700;
}

.pvc-choice[b-e68fa59oey] {
    color: var(--color-text-secondary);
}

.pvc-chip.voted .pvc-choice[b-e68fa59oey] {
    color: var(--color-text-primary);
    font-weight: 600;
}

.pvc-tally[b-e68fa59oey] {
    margin-top: 4px;
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}
/* /Components/Combat/Multiplayer/PlayerPartyPanel.razor.rz.scp.css */
/* Desktop / wide party column (combat HUD rethink WP10). The layout's grid cell (.combat-party-col) owns the frame
   and the scroll; this lays out the header, the on-deck pill, the ally frames and the hint. Was an inline
   (unscoped) <style> block that leaked .status-effect-badge and friends into every page; now isolated, with the
   ally frames in PartyMemberFrame.
   While an ally action is aimed the section carries the board's .aim-mode classes, so --aim-eco (the aimed
   action's turn slot: --color-eco-action or --color-eco-bonus) reaches the frames' glow. */

.player-party-panel[b-5m5k1e5g50] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.player-party-panel.aim-mode[b-5m5k1e5g50] {
    --aim-eco: var(--color-eco-action);
}

.player-party-panel.aim-mode.aim-eco-bonus[b-5m5k1e5g50] {
    --aim-eco: var(--color-eco-bonus);
}

.ppp-header[b-5m5k1e5g50] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
}

.ppp-title[b-5m5k1e5g50] {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.ppp-count[b-5m5k1e5g50] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--combat-good);
    font-variant-numeric: tabular-nums;
}

/* D11: you're next. Gold, like the "Your turn" pill it precedes, but outlined (not filled) so the two never read
   as the same state. */
.ppp-on-deck[b-5m5k1e5g50] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 800;
}

.ppp-on-deck .material-icons[b-5m5k1e5g50] {
    font-size: 15px;
}

.ppp-allies[b-5m5k1e5g50] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ppp-empty[b-5m5k1e5g50],
.ppp-hint[b-5m5k1e5g50] {
    margin: 0;
    padding: 0 4px;
    font-size: 0.62rem;
    line-height: 1.35;
    color: var(--color-text-secondary);
}
/* /Components/Combat/Multiplayer/TurnCountdown.razor.rz.scp.css */
.turn-countdown[b-02k9201d02] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--color-text-primary);
}

.tc-ring[b-02k9201d02] {
    width: 20px;
    height: 20px;
    transform: rotate(-90deg);
}

.turn-countdown.compact .tc-ring[b-02k9201d02] {
    width: 16px;
    height: 16px;
}

.turn-countdown.compact[b-02k9201d02] {
    font-size: 0.7rem;
}

.tc-track[b-02k9201d02] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 4;
}

.tc-fill[b-02k9201d02] {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dasharray 0.9s linear;
}

.turn-countdown.low .tc-fill[b-02k9201d02]   { stroke: var(--color-warning-bright); }
.turn-countdown.urgent .tc-fill[b-02k9201d02] { stroke: var(--combat-bad); }
.turn-countdown.urgent .tc-text[b-02k9201d02] { color: var(--combat-bad-lighter); }

@media (prefers-reduced-motion: reduce) {
    .tc-fill[b-02k9201d02] { transition: none; }
}
/* /Components/Combat/Multiplayer/TurnStatusPill.razor.rz.scp.css */
.turn-status-pill[b-nzdpcgjt4t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}

.turn-status-pill.compact[b-nzdpcgjt4t] {
    padding: 2px 8px;
    font-size: 0.72rem;
    gap: 4px;
}

.turn-status-pill.is-you[b-nzdpcgjt4t] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.28), rgba(218, 165, 32, 0.22));
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.turn-status-pill.is-waiting[b-nzdpcgjt4t] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: var(--color-text-secondary);
}

.tsp-icon[b-nzdpcgjt4t] {
    font-size: 16px;
}

.tsp-label[b-nzdpcgjt4t] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tsp-name[b-nzdpcgjt4t] {
    font-weight: 800;
}

.tsp-offline[b-nzdpcgjt4t] {
    color: var(--combat-bad-light);
    font-weight: 600;
}

/* D11: "You're on deck" inside the waiting pill. Outlined gold (the filled gold is "Your turn"). */
.tsp-on-deck[b-nzdpcgjt4t] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

.tsp-on-deck .material-icons[b-nzdpcgjt4t] {
    font-size: 14px;
}

.turn-status-pill.compact .tsp-on-deck[b-nzdpcgjt4t] {
    font-size: 0.66rem;
    padding: 0 5px;
}
/* /Components/Combat/Panels/BattleRecapCard.razor.rz.scp.css */
/* Battle Recap Card — post-combat performance summary.
   Uses design-system tokens; --accent is injected by the parent for class color. */

.battle-recap[b-5isoc62mpz] {
    padding: var(--space-lg);
    border-top: 2px solid var(--accent, var(--color-primary));
    box-shadow: var(--shadow-md);
}

.battle-recap-header[b-5isoc62mpz] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-base);
}

.battle-recap-title[b-5isoc62mpz] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    letter-spacing: 0.05em;
    flex: 1;
}

.battle-recap-boss-badge[b-5isoc62mpz] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Hero tile — biggest hit highlight, gold glow */
.battle-recap-hero-tile[b-5isoc62mpz] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.10), rgba(255, 215, 0, 0.02));
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-gold);
}

.battle-recap-hero-icon[b-5isoc62mpz] {
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 215, 0, 0.12);
    border-radius: var(--radius-md);
}

.battle-recap-hero-body[b-5isoc62mpz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.battle-recap-hero-label[b-5isoc62mpz] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.battle-recap-hero-value[b-5isoc62mpz] {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
}

.battle-recap-hero-damage[b-5isoc62mpz] {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    line-height: 1;
}

.battle-recap-hero-source[b-5isoc62mpz] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Stat grid */
.battle-recap-grid[b-5isoc62mpz] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
}

.battle-recap-grid.grid-compact[b-5isoc62mpz] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.battle-recap-tile[b-5isoc62mpz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-md);
    text-align: center;
}

.battle-recap-tile .mud-icon-root[b-5isoc62mpz] {
    color: var(--accent, var(--color-primary));
    opacity: 0.85;
}

.battle-recap-tile-label[b-5isoc62mpz] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.battle-recap-tile-value[b-5isoc62mpz] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    line-height: 1.1;
}

/* Chip rows */
.battle-recap-chips[b-5isoc62mpz] {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.battle-recap-chip-row[b-5isoc62mpz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}

.battle-recap-chip-label[b-5isoc62mpz] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: var(--space-xs);
}

/* Notable events list */
.battle-recap-notables[b-5isoc62mpz] {
    margin: var(--space-md) 0 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.battle-recap-notable[b-5isoc62mpz] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 215, 0, 0.04);
    border-left: 2px solid var(--accent, var(--color-primary));
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.battle-recap-notable .mud-icon-root[b-5isoc62mpz] {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Compact mode — used by DefeatPanel */
.battle-recap-compact[b-5isoc62mpz] {
    padding: var(--space-md);
}

.battle-recap-compact .battle-recap-hero-tile[b-5isoc62mpz] {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
}

.battle-recap-compact .battle-recap-tile-value[b-5isoc62mpz] {
    font-size: var(--font-size-lg);
}
/* /Components/Combat/Panels/DefeatPanel.razor.rz.scp.css */
/* Lourdin.Web/Components/Combat/Panels/DefeatPanel.razor.css */
/* Reimagined defeat layout — death header + last stand + recap + tip + footer.
   --class-accent is injected inline by the parent so accents follow class color. */

.defeat-panel[b-zdtpgqkwhj] {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* ═════════ Death header ═════════ */
.defeat-banner[b-zdtpgqkwhj] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.45), rgba(15, 23, 42, 0.7));
    border-bottom: 1px solid rgba(220, 38, 38, 0.35);
    flex-shrink: 0;
}

.defeat-banner[b-zdtpgqkwhj]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.6), transparent);
}

.defeat-portrait[b-zdtpgqkwhj] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(1) brightness(0.7);
    border: 2px solid rgba(220, 38, 38, 0.5);
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.defeat-portrait-fallback[b-zdtpgqkwhj] {
    background: rgba(127, 29, 29, 0.4);
    color: rgba(220, 38, 38, 0.85);
}

.defeat-banner-body[b-zdtpgqkwhj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.defeat-banner-eyebrow[b-zdtpgqkwhj] {
    font-size: var(--font-size-xs);
    color: rgba(220, 38, 38, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: var(--font-weight-semibold);
}

.defeat-banner-title[b-zdtpgqkwhj] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: 0.05em;
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.defeat-slayer-name[b-zdtpgqkwhj] {
    color: rgba(248, 113, 113, 0.95);
    text-shadow: 0 0 12px rgba(220, 38, 38, 0.35);
}

/* ═════════ Content body ═════════ */
.defeat-content[b-zdtpgqkwhj] {
    padding: var(--space-lg);
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.defeat-content[b-zdtpgqkwhj]::-webkit-scrollbar { width: 8px; }
.defeat-content[b-zdtpgqkwhj]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}
.defeat-content[b-zdtpgqkwhj]::-webkit-scrollbar-thumb {
    background: var(--color-border-active);
    border-radius: 4px;
}

.section-title[b-zdtpgqkwhj] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ═════════ Last stand log ═════════ */
.defeat-last-stand[b-zdtpgqkwhj] {
    padding: var(--space-md);
    background: rgba(127, 29, 29, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: var(--radius-lg);
}

.defeat-log-entries[b-zdtpgqkwhj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.defeat-log-entry[b-zdtpgqkwhj] {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(0, 0, 0, 0.3);
    border-left: 2px solid rgba(220, 38, 38, 0.45);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.defeat-log-turn[b-zdtpgqkwhj] {
    font-family: var(--font-mono);
    color: rgba(220, 38, 38, 0.85);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
    min-width: 2.5rem;
}

.defeat-log-actor[b-zdtpgqkwhj] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
}

.defeat-log-message[b-zdtpgqkwhj] {
    color: var(--color-text-secondary);
    flex: 1;
}

/* Multiplayer: the failed-adventure line under the party title */
.defeat-party-note[b-zdtpgqkwhj] {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.45;
    color: var(--color-text-primary);
}

/* ═════════ Tactical tip ═════════ */
.defeat-tip[b-zdtpgqkwhj] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(255, 215, 0, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.defeat-tip .mud-icon-root[b-zdtpgqkwhj] {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ═════════ Restoration notice — demoted footnote ═════════ */
.defeat-restoration[b-zdtpgqkwhj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: rgba(34, 197, 94, 0.06);
    border-left: 2px solid rgba(34, 197, 94, 0.45);
    border-radius: var(--radius-sm);
}

.restoration-line[b-zdtpgqkwhj] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-success-light);
}

.restoration-line .mud-icon-root[b-zdtpgqkwhj] { color: var(--color-success-light); }

/* ═════════ Sticky footer ═════════ */
.defeat-panel-footer[b-zdtpgqkwhj] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(to top,
        var(--color-bg-base) 0%,
        var(--color-bg-base) 70%,
        transparent 100%);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.btn-copy-combat-log[b-zdtpgqkwhj] {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 1px solid var(--color-border, rgba(148, 163, 184, 0.35));
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    transition: all var(--transition-slow);
}

.btn-copy-combat-log:hover[b-zdtpgqkwhj] {
    background: rgba(148, 163, 184, 0.1);
    color: var(--color-text-primary);
    border-color: rgba(148, 163, 184, 0.6);
}

.btn-return-defeat[b-zdtpgqkwhj] {
    width: 100%;
    padding: var(--space-md);
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all var(--transition-slow);
}

.btn-return-defeat:hover[b-zdtpgqkwhj] {
    background: linear-gradient(135deg, var(--color-info-dark), #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}
/* /Components/Combat/Panels/LootEquipModal.razor.rz.scp.css */
/* Loot-equip modal — appears between victory and continue.
   Reuses LoadoutPanel + InventoryWeaponsSection + InventoryArmorSection. */

.loot-equip-modal-paper[b-vhoc3srtf6] {
    width: min(95vw, 1100px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid rgba(255, 215, 0, 0.45);
    border-radius: var(--radius-2xl);
}

.loot-equip-modal-header[b-vhoc3srtf6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.10), rgba(218, 165, 32, 0.06));
    border-bottom: 1px solid rgba(255, 215, 0, 0.35);
    flex-shrink: 0;
}

.loot-equip-modal-title[b-vhoc3srtf6] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.loot-equip-modal-body[b-vhoc3srtf6] {
    flex: 1;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg);
    overflow: hidden;
    min-height: 0;
}

.loot-equip-loadout-pane[b-vhoc3srtf6] {
    overflow-y: auto;
    min-height: 0;
}

.loot-equip-loadout-pane[b-vhoc3srtf6]::-webkit-scrollbar { width: 6px; }
.loot-equip-loadout-pane[b-vhoc3srtf6]::-webkit-scrollbar-thumb {
    background: var(--color-border-active);
    border-radius: 3px;
}

.loot-equip-grid-pane[b-vhoc3srtf6] {
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.loot-equip-grid-pane[b-vhoc3srtf6]::-webkit-scrollbar { width: 6px; }
.loot-equip-grid-pane[b-vhoc3srtf6]::-webkit-scrollbar-thumb {
    background: var(--color-border-active);
    border-radius: 3px;
}

/* Tabs + show-all toggle */
.loot-equip-controls[b-vhoc3srtf6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-subtle);
}

.loot-equip-tabs[b-vhoc3srtf6] {
    display: flex;
    gap: var(--space-xs);
}

.loot-equip-tab[b-vhoc3srtf6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-slow);
}

.loot-equip-tab:hover[b-vhoc3srtf6] {
    background: rgba(255, 215, 0, 0.05);
    color: var(--color-text-primary);
}

.loot-equip-tab.active[b-vhoc3srtf6] {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.45);
    color: var(--color-primary);
    box-shadow: var(--shadow-gold);
}

.loot-equip-tab-count[b-vhoc3srtf6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 6px;
    background: rgba(255, 215, 0, 0.18);
    color: var(--color-primary);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.loot-equip-show-all[b-vhoc3srtf6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.loot-equip-show-all input[b-vhoc3srtf6] { cursor: pointer; }

.loot-equip-grid-body[b-vhoc3srtf6] {
    flex: 1;
    min-height: 0;
}

/* Empty state */
.loot-equip-empty[b-vhoc3srtf6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.loot-equip-empty .mud-icon-root[b-vhoc3srtf6] { opacity: 0.5; }

/* Footer */
.loot-equip-modal-footer[b-vhoc3srtf6] {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border-subtle);
    background: rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.btn-loot-equip-done[b-vhoc3srtf6] {
    padding: var(--space-sm) var(--space-xl);
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all var(--transition-slow);
}

.btn-loot-equip-done:hover[b-vhoc3srtf6] {
    background: linear-gradient(135deg, var(--color-success-dark), #15803d);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

/* Tablet — collapse loadout above grid below 960px (combat is tablet+ only) */
@media (max-width: 960px) {
    .loot-equip-modal-body[b-vhoc3srtf6] {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .loot-equip-loadout-pane[b-vhoc3srtf6] {
        max-height: 200px;
    }
}
/* /Components/Combat/Preview/CombatPreviewCard.razor.rz.scp.css */
/* Combat HUD rethink WP9c: the preview card. Tokens only (design-system.css). Two surfaces:
   - surface-aim: wrapping lines under the aim banner's title (the banner owns the frame and the --aim-eco accent;
     the card inherits its font size, the banner's --ct-sm).
   - surface-selection: one wrapping row inside the dock's targeting strip (the strip owns the frame).
   Combat text size (WP12g): every size is a --ct-* token, so the card scales in every host; the Selection surface sets
   its own base (the dock strip's 12px, the tablet target panel's 16px at Medium) instead of inheriting an unscaled
   one. Rows wrap; nothing scrolls sideways. */

.preview-card[b-44d6vpoh8t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    color: var(--color-text-primary);
}

/* In the aim banner the groups (hit points and AC, the odds, damage type and resistance) share lines as they fit and
   the strike list takes a line of its own (WP12g): stacked one per line, the banner grew taller than the board could
   spare once the text was larger. */
.preview-card.surface-aim[b-44d6vpoh8t] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-sm);
    row-gap: 1px;
}

.preview-card.surface-aim .pc-strike[b-44d6vpoh8t] {
    flex-basis: 100%;
}

.preview-card.surface-selection[b-44d6vpoh8t] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-sm);
    row-gap: 2px;
    flex: 1 1 auto;
    font-size: var(--ct-sm);
}

.preview-card.surface-selection.compact[b-44d6vpoh8t] {
    font-size: var(--ct-lg);
}

.pc-identity[b-44d6vpoh8t],
.pc-odds[b-44d6vpoh8t],
.pc-type[b-44d6vpoh8t],
.pc-strike[b-44d6vpoh8t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    row-gap: 2px;
    min-width: 0;
}

/* --- Identity: name (targeting strip only), hit points, armor class --- */
.pc-label[b-44d6vpoh8t] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--ct-2xs);
    color: var(--color-text-secondary);
}

.pc-name[b-44d6vpoh8t] {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16em;
}

.pc-hp[b-44d6vpoh8t] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pc-hp-track[b-44d6vpoh8t] {
    display: inline-block;
    width: 72px;
    height: 6px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-bg-base) 85%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
    overflow: hidden;
}

.pc-hp-fill[b-44d6vpoh8t] {
    display: block;
    height: 100%;
    transition: width var(--transition-fast, 0.15s) ease;
}

.pc-hp-fill.hp-high[b-44d6vpoh8t] { background: var(--combat-hp-high); }
.pc-hp-fill.hp-mid[b-44d6vpoh8t]  { background: var(--combat-hp-mid); }
.pc-hp-fill.hp-low[b-44d6vpoh8t]  { background: var(--combat-hp-low); }

.pc-hp-text[b-44d6vpoh8t],
.pc-ac[b-44d6vpoh8t] {
    font-size: var(--ct-2xs);
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pc-ac[b-44d6vpoh8t] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.pc-ac .material-icons[b-44d6vpoh8t],
.pc-lethal .material-icons[b-44d6vpoh8t],
.pc-strike .material-icons[b-44d6vpoh8t] {
    font-size: var(--ct-md);
}

/* --- Odds: the engine's numbers --- */
.pc-headline[b-44d6vpoh8t] {
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.pc-headline.hit-high[b-44d6vpoh8t] { color: var(--combat-good-light); }
.pc-headline.hit-mid[b-44d6vpoh8t]  { color: var(--color-warning-light); }
.pc-headline.hit-low[b-44d6vpoh8t]  { color: var(--combat-bad-light); }

.pc-headline.pc-refusal[b-44d6vpoh8t] {
    color: var(--color-text-secondary);
    font-style: italic;
    font-weight: var(--font-weight-normal);
    white-space: normal;
}

.pc-damage[b-44d6vpoh8t] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pc-lethal[b-44d6vpoh8t] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    font-size: var(--ct-2xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--combat-bad-lighter);
    background: color-mix(in srgb, var(--combat-bad) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--combat-bad) 55%, transparent);
}

/* --- Damage type (the engine's) and the target's resistance --- */
.pc-type[b-44d6vpoh8t] {
    font-size: var(--ct-2xs);
}

/* The .damage-type-* palette (design-system.css) sets the text color; the scoped rule only adds layout. */
.pc-type-name[b-44d6vpoh8t] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

[b-44d6vpoh8t] .pc-type-icon {
    font-size: var(--ct-md) !important;
    width: 1em;
    height: 1em;
}

/* An elemental weapon's rider element, after the weapon's physical type (its hint is the rider's alone). */
.pc-rider[b-44d6vpoh8t] {
    margin-left: 2px;
}

.pc-resist[b-44d6vpoh8t] {
    padding: 0 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    color: var(--color-text-light);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text-secondary) 40%, transparent);
}

.pc-resist.tone-vulnerable[b-44d6vpoh8t] {
    color: var(--combat-good-lighter);
    background: color-mix(in srgb, var(--combat-good) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--combat-good) 50%, transparent);
}

.pc-resist.tone-resists[b-44d6vpoh8t] {
    color: var(--color-warning-light);
    background: color-mix(in srgb, var(--color-warning) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 45%, transparent);
}

.pc-resist.tone-immune[b-44d6vpoh8t] {
    color: var(--combat-bad-lighter);
    background: color-mix(in srgb, var(--combat-bad) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--combat-bad) 50%, transparent);
}

/* --- The target's conditions (WP12e, targeting strip only): the board rails' order, kind colors and shapes (harmful
   square, beneficial round), each with its remaining rounds; one in its last round has a dashed rim. The group takes
   the row's leftover width and never pushes the strip onto another line for its names: they ellipsize first, down
   to the icon and the rounds (its minimum width is about that per chip). --- */
.pc-conditions[b-44d6vpoh8t] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: calc(var(--pc-conditions, 1) * 2.1rem);
    /* The chips are 14px; the row they share (the damage type) is 11px: the negative margin keeps the strip's height. */
    margin-block: -2px;
    overflow: hidden;
    font-size: var(--font-size-xs);
}

.pc-condition[b-44d6vpoh8t] {
    --pc-kind: var(--color-status-debuff);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 1 auto;
    min-width: 0;
    box-sizing: border-box;
    height: 14px;
    padding: 0 5px 0 3px;
    border: 1px solid color-mix(in srgb, var(--pc-kind) 60%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--pc-kind) 12%, transparent);
    color: var(--pc-kind);
    line-height: 12px;
    white-space: nowrap;
}

.pc-condition.is-beneficial[b-44d6vpoh8t] {
    border-radius: 999px;
}

.pc-condition.status-pip-cc[b-44d6vpoh8t]     { --pc-kind: var(--color-status-control); }
.pc-condition.status-pip-dot[b-44d6vpoh8t]    { --pc-kind: var(--color-status-dot); }
.pc-condition.status-pip-debuff[b-44d6vpoh8t] { --pc-kind: var(--color-status-debuff); }
.pc-condition.status-pip-buff[b-44d6vpoh8t]   { --pc-kind: var(--color-status-buff); }

.pc-condition.is-last-round[b-44d6vpoh8t] {
    border-style: dashed;
}

.pc-condition .material-icons[b-44d6vpoh8t] {
    flex-shrink: 0;
    font-size: 12px;
}

.pc-condition-name[b-44d6vpoh8t] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-light);
}

.pc-condition-rounds[b-44d6vpoh8t] {
    flex-shrink: 0;
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

.pc-condition-more[b-44d6vpoh8t] {
    --pc-kind: var(--color-text-secondary);
    flex-shrink: 0;
    padding: 0 5px;
    color: var(--color-text-light);
}

/* --- Who else it strikes: the 7A footprint color, like the board's struck hexes --- */
.pc-strike[b-44d6vpoh8t] {
    color: var(--color-aoe-footprint);
    flex-wrap: nowrap;
    align-items: flex-start;
}

.pc-strike .material-icons[b-44d6vpoh8t] {
    margin-top: 1px;
}

/* --- Touch variant --- */
.preview-card.compact[b-44d6vpoh8t] {
    gap: 1px;
}

.preview-card.compact .pc-hp-track[b-44d6vpoh8t] {
    width: 56px;
}

/* Narrower docks get a shorter HP bar; on a phone-width strip the bar goes and the numbers stay. */
@media (max-width: 1280px) {
    .preview-card.surface-selection .pc-hp-track[b-44d6vpoh8t] {
        width: 56px;
    }
}

@media (max-width: 480px) {
    .preview-card.compact .pc-hp-track[b-44d6vpoh8t] {
        display: none;
    }
}
/* /Components/Combat/Rest/RestChoiceCard.razor.rz.scp.css */
/* A choice card: one large button. --rd-accent is the choice's color: Press On gold
   (--color-primary), Short Rest the heal color (--combat-heal, palette-aware). Never an
   eco token: those mean a turn slot and nothing else (design skill, Action economy). */

.rd-choice[b-bsaqbu1qtq] {
    --rd-accent: var(--color-primary);
    --rd-accent-text: var(--color-primary-light);
    appearance: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;           /* MudBlazor's button reset centers flex children */
    justify-content: flex-start;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 18px 18px 14px;
    border-radius: var(--radius-3xl);
    border: 1.5px solid color-mix(in srgb, var(--rd-accent) 42%, transparent);
    background:
        radial-gradient(ellipse 90% 60% at 0% 0%, color-mix(in srgb, var(--rd-accent) 16%, transparent), transparent 70%),
        linear-gradient(180deg, var(--color-gray-900) 0%, color-mix(in srgb, var(--color-gray-900) 82%, var(--color-bg-base)) 100%);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--color-bg-base) 75%, transparent);
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    animation: rd-choice-deal-b-bsaqbu1qtq 520ms cubic-bezier(0.2, 0.9, 0.3, 1) var(--rd-delay, 260ms) both;
}

.rd-choice--rest[b-bsaqbu1qtq] {
    --rd-accent: var(--combat-heal);
    --rd-accent-text: var(--combat-heal-light);
}

    .rd-choice:hover:not([aria-disabled="true"])[b-bsaqbu1qtq] {
        transform: translateY(-3px);
        border-color: var(--rd-accent);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--rd-accent) 12%, transparent), 0 22px 48px color-mix(in srgb, var(--color-bg-base) 80%, transparent);
    }

    .rd-choice:focus[b-bsaqbu1qtq] {
        outline: none;
    }

    /* Keyboard focus only (:focus-visible: a mouse click or tap, or the screen's own initial focus after one, shows
       none), drawn as an offset outline so it never reads as the ringed "Your vote" card. A card you can't choose
       (spent, or your vote is in) shows a quiet dashed outline instead, so focus is still visible on it. */
    .rd-choice:focus-visible:not([aria-disabled="true"])[b-bsaqbu1qtq] {
        border-color: var(--rd-accent);
        outline: 2px solid var(--rd-accent-text);
        outline-offset: 4px;
    }

    .rd-choice[aria-disabled="true"]:focus-visible[b-bsaqbu1qtq] {
        outline: 2px dashed color-mix(in srgb, var(--color-text-secondary) 70%, transparent);
        outline-offset: 4px;
    }

    .rd-choice:active:not([aria-disabled="true"])[b-bsaqbu1qtq] {
        transform: translateY(-1px);
    }

    .rd-choice[aria-busy="true"][b-bsaqbu1qtq] {
        cursor: progress;
    }

/* The stop's rest is spent: greyed, but focusable so its reason can be read. */
.rd-choice.is-unavailable[b-bsaqbu1qtq] {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--color-text-secondary) 40%, transparent);
    background: color-mix(in srgb, var(--color-gray-900) 70%, transparent);
    box-shadow: none;
    cursor: not-allowed;
}

    .rd-choice.is-unavailable .rd-choice-medal[b-bsaqbu1qtq],
    .rd-choice.is-unavailable .rd-choice-title[b-bsaqbu1qtq],
    .rd-choice.is-unavailable .rd-choice-tagline[b-bsaqbu1qtq],
    .rd-choice.is-unavailable .rd-choice-cta[b-bsaqbu1qtq] {
        opacity: 0.5;
        filter: grayscale(0.7);
    }

/* Multiplayer: your vote is in. Yours is ringed; the other card steps back. */
.rd-choice.is-your-vote[b-bsaqbu1qtq] {
    border-color: var(--rd-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-accent) 35%, transparent), 0 16px 40px color-mix(in srgb, var(--color-bg-base) 75%, transparent);
    cursor: default;
}

.rd-choice.is-locked[b-bsaqbu1qtq] {
    opacity: 0.55;
    cursor: default;
}

/* ---- Head: medal, title, tagline, votes ------------------------------------------ */

.rd-choice-head[b-bsaqbu1qtq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rd-choice-medal[b-bsaqbu1qtq] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--rd-accent) 70%, transparent);
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rd-accent) 30%, var(--color-gray-800)), var(--color-bg-base));
    color: var(--rd-accent-text);
    font-size: 27px;
    box-shadow: 0 0 18px color-mix(in srgb, var(--rd-accent) 25%, transparent);
}

.rd-choice-heading[b-bsaqbu1qtq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.rd-choice-title[b-bsaqbu1qtq] {
    color: var(--rd-accent-text);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: 0.03em;
}

.rd-choice-tagline[b-bsaqbu1qtq] {
    color: var(--color-text-light);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.rd-choice-votes[b-bsaqbu1qtq] {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 46px;
    padding: 4px 8px;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--rd-accent) 35%, transparent);
    background: color-mix(in srgb, var(--rd-accent) 10%, transparent);
    line-height: 1;
}

.rd-choice-votes-n[b-bsaqbu1qtq] {
    color: var(--rd-accent-text);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
}

.rd-choice-votes-word[b-bsaqbu1qtq] {
    margin-top: 2px;
    color: var(--color-text-secondary);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---- Detail: reason, preview, lines --------------------------------------------- */

.rd-choice-detail[b-bsaqbu1qtq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rd-choice-reason[b-bsaqbu1qtq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-text-secondary) 10%, transparent);
    color: var(--color-text-lighter);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
}

.rd-choice-reason-ico[b-bsaqbu1qtq] {
    display: inline-flex;
    font-size: 17px;
    color: var(--color-text-secondary);
}

.rd-preview[b-bsaqbu1qtq] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px 12px;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--rd-accent) 16%, transparent);
    background: color-mix(in srgb, var(--color-bg-base) 55%, transparent);
}

.rd-preview-heading[b-bsaqbu1qtq] {
    color: var(--color-text-secondary);
    font-size: 10.5px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.rd-preview-row[b-bsaqbu1qtq] {
    --rd-bar: var(--combat-hp-high);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .rd-preview-row.kind-hp-mid[b-bsaqbu1qtq] {
        --rd-bar: var(--combat-hp-mid);
    }

    .rd-preview-row.kind-hp-low[b-bsaqbu1qtq] {
        --rd-bar: var(--combat-hp-low);
    }

    .rd-preview-row.kind-mana[b-bsaqbu1qtq] {
        --rd-bar: var(--color-mana);
    }

.rd-preview-head[b-bsaqbu1qtq] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.rd-preview-label[b-bsaqbu1qtq] {
    flex: none;
    width: 38px;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rd-preview-values[b-bsaqbu1qtq] {
    flex: none;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rd-preview-before[b-bsaqbu1qtq] {
    color: var(--color-text-secondary);
    font-size: 14px;
}

.rd-preview-arrow[b-bsaqbu1qtq] {
    align-self: center;
    font-size: 15px;
    color: var(--color-text-secondary);
}

.rd-preview-after[b-bsaqbu1qtq] {
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 18px;
}

    .rd-preview-after.is-changed[b-bsaqbu1qtq] {
        color: var(--rd-accent-text);
    }

.rd-preview-max[b-bsaqbu1qtq] {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.rd-preview-note[b-bsaqbu1qtq] {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .rd-preview-note.is-gain[b-bsaqbu1qtq] {
        color: var(--rd-accent-text);
        font-weight: var(--font-weight-bold);
    }

.rd-preview-bar[b-bsaqbu1qtq] {
    position: relative;
    display: block;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-gray-800);
}

.rd-preview-fill[b-bsaqbu1qtq] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background: var(--rd-bar);
}

/* What the choice adds: a hatched segment in the choice's color past the current fill. */
.rd-preview-gain[b-bsaqbu1qtq] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--rd-accent) 85%, transparent) 0 4px,
        color-mix(in srgb, var(--rd-accent) 45%, transparent) 4px 7px);
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--color-bg-base) 70%, transparent);
    animation: rd-gain-in-b-bsaqbu1qtq 700ms cubic-bezier(0.3, 0.8, 0.3, 1) calc(var(--rd-delay, 260ms) + 320ms) both;
    transform-origin: left center;
}

.rd-lines[b-bsaqbu1qtq] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.rd-line[b-bsaqbu1qtq] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--color-text-light);
    font-size: 13px;
    line-height: 1.4;
}

.rd-line-ico[b-bsaqbu1qtq] {
    display: inline-flex;
    flex: none;
    margin-top: 1px;
    font-size: 16px;
    color: var(--color-text-secondary);
}

.rd-line.tone-good .rd-line-ico[b-bsaqbu1qtq] {
    color: var(--combat-good-light);
}

.rd-line.tone-bad .rd-line-ico[b-bsaqbu1qtq] {
    color: var(--combat-bad-light);
}

.rd-line.tone-bad .rd-line-text[b-bsaqbu1qtq] {
    color: var(--color-text-lighter);
    font-weight: var(--font-weight-semibold);
}

.rd-line.tone-warning .rd-line-ico[b-bsaqbu1qtq] {
    color: var(--color-warning-light);
}

/* ---- Call to action ------------------------------------------------------------- */

.rd-choice-cta[b-bsaqbu1qtq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid color-mix(in srgb, var(--rd-accent) 20%, transparent);
    color: var(--rd-accent-text);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rd-choice-cta-ico[b-bsaqbu1qtq] {
    font-size: 18px;
    transition: transform 160ms ease;
}

.rd-choice:hover:not([aria-disabled="true"]) .rd-choice-cta-ico:last-child[b-bsaqbu1qtq] {
    transform: translateX(3px);
}

@keyframes rd-choice-deal-b-bsaqbu1qtq {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
}

@keyframes rd-gain-in-b-bsaqbu1qtq {
    from {
        transform: scaleX(0);
    }
}

/* ---- Touch: a 44px floor is met by the whole card; keep hover lift off --------------- */

@media (hover: none) {
    .rd-choice:hover:not([aria-disabled="true"])[b-bsaqbu1qtq] {
        transform: none;
    }
}

@media (max-width: 1024px) {
    .rd-choice[b-bsaqbu1qtq] {
        padding: 16px 15px 13px;
    }

    .rd-choice-title[b-bsaqbu1qtq] {
        font-size: 20px;
    }

    .rd-choice-medal[b-bsaqbu1qtq] {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .rd-choice-head[b-bsaqbu1qtq] {
        gap: 10px;
    }

    .rd-preview-note[b-bsaqbu1qtq] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rd-choice[b-bsaqbu1qtq],
    .rd-preview-gain[b-bsaqbu1qtq],
    .rd-choice-cta-ico[b-bsaqbu1qtq] {
        animation: none;
        transition: none;
    }

    .rd-choice:hover:not([aria-disabled="true"])[b-bsaqbu1qtq],
    .rd-choice:active:not([aria-disabled="true"])[b-bsaqbu1qtq],
    .rd-choice:hover:not([aria-disabled="true"]) .rd-choice-cta-ico:last-child[b-bsaqbu1qtq] {
        transform: none;
    }
}
/* /Components/Combat/Rest/RestDecisionScreen.razor.rz.scp.css */
/* ==========================================================================
   Rest Decision: a full-screen layer over the battlefield, between waypoints.
   z 9999: above the victory screen (9998; the victory looks back, this looks
   forward) and below the Try-Your-New-Gear modal (10000). combat-shared.css
   raises MudBlazor's dialog and snackbar layers above it while it is up, and
   nothing in it uses a MudBlazor popover (tooltips are title attributes).
   ========================================================================== */

.rd-screen[b-8kx0ekgiai] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
        radial-gradient(ellipse 56% 36% at 50% 0%, color-mix(in srgb, var(--color-primary) 13%, transparent), transparent 72%),
        radial-gradient(ellipse 46% 38% at 50% 112%, color-mix(in srgb, var(--color-warning-dark) 15%, transparent), transparent 70%),
        radial-gradient(ellipse 120% 90% at 50% 45%, color-mix(in srgb, var(--color-bg-base) 90%, var(--color-gray-800)) 0%, color-mix(in srgb, var(--color-bg-base) 70%, var(--color-gray-850)) 100%);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    animation: rd-screen-in-b-8kx0ekgiai 240ms ease-out both;
}

    .rd-screen:focus[b-8kx0ekgiai] {
        outline: none;
    }

/* Off-screen but focusable: they only bounce Tab back into the dialog. */
.rd-focus-sentinel[b-8kx0ekgiai] {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.rd-stage[b-8kx0ekgiai] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;        /* a short decision sits mid-screen; a tall one starts at the top and scrolls */
    gap: 20px;
    box-sizing: border-box;
    min-height: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 24px 32px 24px;
}

/* ---- Header: kicker, title, the road ahead ---------------------------------- */

.rd-header[b-8kx0ekgiai] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.rd-kicker[b-8kx0ekgiai] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    animation: rd-rise-b-8kx0ekgiai 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 0ms both;
}

.rd-kicker-ico[b-8kx0ekgiai] {
    display: inline-flex;
    font-size: 18px;
    color: var(--color-warning);
}

.rd-title[b-8kx0ekgiai] {
    margin: 0;
    padding-left: 0.08em;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 22px color-mix(in srgb, var(--color-primary) 30%, transparent));
    animation: rd-rise-b-8kx0ekgiai 480ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms both;
}

.rd-subtitle[b-8kx0ekgiai] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    margin: 2px 0 0;
    color: var(--color-text-light);
    font-size: 15px;
    animation: rd-rise-b-8kx0ekgiai 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 140ms both;
}

.rd-next-label[b-8kx0ekgiai] {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.rd-next-name[b-8kx0ekgiai] {
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 17px;
    letter-spacing: 0.02em;
}

.rd-boss-tag[b-8kx0ekgiai] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px 2px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--combat-bad) 55%, transparent);
    background: color-mix(in srgb, var(--combat-bad) 14%, transparent);
    color: var(--combat-bad-lighter);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rd-boss-ico[b-8kx0ekgiai] {
    display: inline-flex;
    font-size: 15px;
    color: var(--combat-bad-light);
}

/* ---- Body: your condition | your choice --------------------------------------- */

.rd-body[b-8kx0ekgiai] {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.rd-condition[b-8kx0ekgiai],
.rd-decision[b-8kx0ekgiai] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Tracked gold caps with a hairline running out to the right. */
.rd-section-title[b-8kx0ekgiai] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

    .rd-section-title[b-8kx0ekgiai]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 45%, transparent), transparent);
    }

.rd-party[b-8kx0ekgiai] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rd-notice[b-8kx0ekgiai] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--combat-heal) 35%, transparent);
    background: color-mix(in srgb, var(--combat-heal) 8%, var(--color-gray-900));
    color: var(--color-text-light);
    font-size: 13px;
    line-height: 1.4;
    animation: rd-rise-b-8kx0ekgiai 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both;
}

.rd-notice-ico[b-8kx0ekgiai] {
    display: inline-flex;
    flex: none;
    margin-top: 1px;
    font-size: 16px;
    color: var(--combat-heal);
}

.rd-choices[b-8kx0ekgiai] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* ---- Party vote --------------------------------------------------------------- */

.rd-vote[b-8kx0ekgiai] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 14px 8px;
    border-radius: var(--radius-2xl);
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
    background: color-mix(in srgb, var(--color-gray-900) 82%, transparent);
    animation: rd-rise-b-8kx0ekgiai 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 520ms both;
}

.rd-vote-head[b-8kx0ekgiai] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
}

.rd-vote-status[b-8kx0ekgiai] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--color-text-light);
    font-size: 13px;
}

.rd-vote-ico[b-8kx0ekgiai] {
    display: inline-flex;
    font-size: 17px;
    color: var(--color-primary);
}

.rd-vote-rule[b-8kx0ekgiai] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-style: italic;
}

/* The party vote has more to show: a smaller title gives the lineup the room. */
.rd-screen.is-mp .rd-title[b-8kx0ekgiai] {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.rd-screen.is-mp .rd-stage[b-8kx0ekgiai] {
    gap: 16px;
    padding-top: 18px;
    padding-bottom: 18px;
}

/* ---- Keyboard hint (pointer screens only) ---------------------------------------- */

.rd-hint[b-8kx0ekgiai] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 12px;
    text-align: center;
    animation: rd-rise-b-8kx0ekgiai 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 600ms both;
}

.rd-key[b-8kx0ekgiai] {
    display: inline-block;
    min-width: 1.6em;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 45%, transparent);
    border-bottom-width: 2px;
    background: var(--color-gray-900);
    color: var(--color-text-light);
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

@media (hover: none) {
    .rd-hint[b-8kx0ekgiai] {
        display: none;
    }
}

/* ---- Reveal control ----------------------------------------------------------
   Every staged element animates from hidden to its natural state, so turning the
   animation off (skip, or reduced motion) shows the finished screen. The level-up
   callout is the victory screen's; it pops in sooner here. */

.rd-screen[b-8kx0ekgiai]  .vs-levelup {
    animation-delay: 620ms;
}

.rd-screen.is-revealed .rd-reveal[b-8kx0ekgiai],
.rd-screen.is-revealed[b-8kx0ekgiai]  .rd-reveal,
.rd-screen.is-revealed[b-8kx0ekgiai]  .vs-reveal {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .rd-screen[b-8kx0ekgiai],
    .rd-screen .rd-reveal[b-8kx0ekgiai],
    .rd-screen[b-8kx0ekgiai]  .rd-reveal,
    .rd-screen[b-8kx0ekgiai]  .vs-reveal {
        animation: none !important;
    }
}

@keyframes rd-screen-in-b-8kx0ekgiai {
    from {
        opacity: 0;
    }
}

@keyframes rd-rise-b-8kx0ekgiai {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* ---- Tablet and small laptops (1024 / 960) ------------------------------------------ */

@media (max-width: 1024px) {
    .rd-stage[b-8kx0ekgiai] {
        gap: 18px;
        padding: 18px 24px 20px;
    }

    .rd-body[b-8kx0ekgiai] {
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
        gap: 20px;
    }

    .rd-choices[b-8kx0ekgiai] {
        gap: 12px;
    }
}

@media (max-width: 960px) {
    .rd-body[b-8kx0ekgiai] {
        grid-template-columns: minmax(0, 1fr);
    }

    .rd-party[b-8kx0ekgiai] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Phones (768 / 480) ----------------------------------------------------------- */

@media (max-width: 768px) {
    .rd-stage[b-8kx0ekgiai] {
        gap: 16px;
        padding: 14px 16px 18px;
    }

    .rd-choices[b-8kx0ekgiai] {
        grid-template-columns: minmax(0, 1fr);
    }

    .rd-party[b-8kx0ekgiai] {
        grid-template-columns: minmax(0, 1fr);
    }

    .rd-kicker[b-8kx0ekgiai] {
        font-size: 11px;
        letter-spacing: 0.24em;
    }
}

@media (max-width: 480px) {
    .rd-title[b-8kx0ekgiai] {
        letter-spacing: 0.04em;
    }

    .rd-next-name[b-8kx0ekgiai] {
        font-size: 15px;
    }
}
/* /Components/Combat/Rest/RestHeroCard.razor.rz.scp.css */
/* Your condition card. --rd-accent is the class color (var(--color-{class})); the HP
   bar and its number take the combat HP step tokens (palette-aware). */

.rd-hero[b-h740sivrsp] {
    --rd-hp: var(--combat-hp-high);
    --rd-hp-text: var(--combat-hp-high-light);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 16px 18px 18px;
    border-radius: var(--radius-3xl);
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    background:
        radial-gradient(ellipse 80% 55% at 0% 0%, color-mix(in srgb, var(--rd-accent) 22%, transparent), transparent 72%),
        linear-gradient(180deg, var(--color-gray-900) 0%, color-mix(in srgb, var(--color-gray-900) 85%, var(--color-bg-base)) 100%);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--color-bg-base) 80%, transparent);
    animation: rd-hero-rise-b-h740sivrsp 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 160ms both;
}

.rd-hero.is-you[b-h740sivrsp] {
    border: 1.5px solid var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 10%, transparent), 0 18px 44px color-mix(in srgb, var(--color-bg-base) 80%, transparent);
}

.rd-you-badge[b-h740sivrsp] {
    position: absolute;
    top: -11px;
    left: 18px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-bg-base);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ---- Identity ------------------------------------------------------------------- */

.rd-hero-head[b-h740sivrsp] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* The portrait over the class medallion: if the image fails it hides and the medallion shows. */
.rd-portrait[b-h740sivrsp] {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
}

.rd-portrait-img[b-h740sivrsp] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-2xl);
    border: 2px solid color-mix(in srgb, var(--rd-accent) 75%, var(--color-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-accent) 18%, transparent), 0 6px 16px color-mix(in srgb, var(--color-bg-base) 70%, transparent);
    background: var(--color-gray-800);
}

.rd-hero-id[b-h740sivrsp] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.rd-hero-name[b-h740sivrsp] {
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 21px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.rd-hero-class[b-h740sivrsp] {
    color: color-mix(in srgb, var(--rd-accent) 55%, var(--color-text-primary));
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
}

/* ---- HP: the number to decide on ------------------------------------------------ */

.rd-hp[b-h740sivrsp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .rd-hp.kind-hp-mid[b-h740sivrsp] {
        --rd-hp: var(--combat-hp-mid);
        --rd-hp-text: var(--combat-hp-mid-light);
    }

    .rd-hp.kind-hp-low[b-h740sivrsp] {
        --rd-hp: var(--combat-hp-low);
        --rd-hp-text: var(--combat-hp-low-light);
    }

.rd-hp-head[b-h740sivrsp] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.rd-hp-label[b-h740sivrsp] {
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.rd-hp-condition[b-h740sivrsp] {
    color: var(--rd-hp-text);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rd-hp-values[b-h740sivrsp] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.rd-hp-current[b-h740sivrsp] {
    color: var(--rd-hp-text);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
}

.rd-hp-max[b-h740sivrsp] {
    color: var(--color-text-light);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
}

.rd-hp-pct[b-h740sivrsp] {
    margin-left: auto;
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
}

.rd-hp-bar[b-h740sivrsp] {
    position: relative;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-gray-800);
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-bg-base) 70%, transparent);
}

.rd-hp-fill[b-h740sivrsp] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--rd-hp) 70%, var(--color-bg-base)), var(--rd-hp));
    box-shadow: 0 0 12px color-mix(in srgb, var(--rd-hp) 45%, transparent);
    transform-origin: left center;
    animation: rd-hero-fill-b-h740sivrsp 700ms cubic-bezier(0.3, 0.8, 0.3, 1) 360ms both;
}

/* ---- Class rows: as the combat vitals show them --------------------------------- */

.rd-resources[b-h740sivrsp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rd-res[b-h740sivrsp] {
    --rd-res: var(--color-mana);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .rd-res.kind-ki[b-h740sivrsp] {
        --rd-res: var(--color-ki);
    }

    .rd-res.kind-swagger[b-h740sivrsp] {
        --rd-res: var(--color-swagger);
    }

    .rd-res.kind-divinity[b-h740sivrsp] {
        --rd-res: var(--color-cleric-light);
    }

.rd-res-head[b-h740sivrsp] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.rd-res-label[b-h740sivrsp] {
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rd-res-value[b-h740sivrsp] {
    color: var(--color-text-primary);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.rd-res-bar[b-h740sivrsp] {
    position: relative;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-gray-800);
}

.rd-res-fill[b-h740sivrsp] {
    height: 100%;
    border-radius: inherit;
    background: var(--rd-res);
}

.rd-pips[b-h740sivrsp] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.rd-pip[b-h740sivrsp] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--rd-res) 55%, transparent);
    background: transparent;
}

    .rd-pip.is-lit[b-h740sivrsp] {
        border-color: var(--rd-res);
        background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--rd-res) 55%, var(--color-text-primary)), var(--rd-res));
        box-shadow: 0 0 6px color-mix(in srgb, var(--rd-res) 50%, transparent);
    }

.rd-res-note[b-h740sivrsp] {
    color: var(--color-text-secondary);
    font-size: 11.5px;
}

/* ---- Buffs that carry from fight to fight ----------------------------------------- */

.rd-effects[b-h740sivrsp] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rd-effect[b-h740sivrsp] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 4px 3px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-status-buff) 45%, transparent);
    background: color-mix(in srgb, var(--color-status-buff) 10%, transparent);
    font-size: 12px;
}

.rd-effect-ico[b-h740sivrsp] {
    font-size: 14px;
    color: var(--color-status-buff);
}

.rd-effect-name[b-h740sivrsp] {
    overflow: hidden;
    color: var(--color-text-lighter);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-effect-detail[b-h740sivrsp] {
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.rd-effect-turns[b-h740sivrsp] {
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-status-buff) 25%, var(--color-gray-900));
    color: var(--color-text-primary);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-align: center;
}

@keyframes rd-hero-rise-b-h740sivrsp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

@keyframes rd-hero-fill-b-h740sivrsp {
    from {
        transform: scaleX(0);
    }
}

@media (max-width: 1024px) {
    .rd-hero[b-h740sivrsp] {
        padding: 14px 16px 16px;
    }

    .rd-hp-current[b-h740sivrsp] {
        font-size: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rd-hero[b-h740sivrsp],
    .rd-hp-fill[b-h740sivrsp] {
        animation: none;
    }
}
/* /Components/Combat/Rest/RestPartyMemberCard.razor.rz.scp.css */
/* A party member's frame on the vote. --rd-accent is their class color. */

.rd-member[b-v0uwx997k2] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 8px 12px;
    border-radius: var(--radius-2xl);
    border: 1px solid color-mix(in srgb, var(--rd-accent) 28%, transparent);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--rd-accent) 12%, var(--color-gray-900)) 0%, var(--color-gray-900) 45%);
    animation: rd-member-in-b-v0uwx997k2 460ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--rd-delay, 200ms) both;
}

.rd-member.is-away[b-v0uwx997k2] {
    opacity: 0.6;
    border-style: dashed;
}

.rd-member-portrait[b-v0uwx997k2] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 50px;
}

.rd-member-img[b-v0uwx997k2] {
    position: absolute;
    top: 3px;
    left: 0;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--radius-xl);
    border: 1.5px solid color-mix(in srgb, var(--rd-accent) 70%, transparent);
    background: var(--color-gray-800);
}

.rd-member-body[b-v0uwx997k2] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.rd-member-head[b-v0uwx997k2] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.rd-member-name[b-v0uwx997k2] {
    overflow: hidden;
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-member-class[b-v0uwx997k2] {
    flex: none;
    color: color-mix(in srgb, var(--rd-accent) 55%, var(--color-text-primary));
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
}

.rd-member-tag[b-v0uwx997k2] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

    .rd-member-tag .material-icons[b-v0uwx997k2] {
        font-size: 13px;
    }

.rd-member-row[b-v0uwx997k2] {
    --rd-bar: var(--combat-hp-high);
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 56px;
    gap: 7px;
    align-items: center;
}

    .rd-member-row.kind-hp-mid[b-v0uwx997k2] {
        --rd-bar: var(--combat-hp-mid);
    }

    .rd-member-row.kind-hp-low[b-v0uwx997k2] {
        --rd-bar: var(--combat-hp-low);
    }

    .rd-member-row.kind-mana[b-v0uwx997k2] {
        --rd-bar: var(--color-mana);
    }

    .rd-member-row.kind-ki[b-v0uwx997k2] {
        --rd-bar: var(--color-ki);
    }

    .rd-member-row.kind-swagger[b-v0uwx997k2] {
        --rd-bar: var(--color-swagger);
    }

.rd-member-label[b-v0uwx997k2] {
    color: var(--color-text-secondary);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
}

.rd-member-bar[b-v0uwx997k2] {
    position: relative;
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-gray-800);
}

.rd-member-fill[b-v0uwx997k2] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background: var(--rd-bar);
}

/* What a Short Rest would restore: the heal color, hatched, like the Short Rest card's preview. */
.rd-member-gain-bar[b-v0uwx997k2] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--combat-heal) 80%, transparent) 0 3px,
        color-mix(in srgb, var(--combat-heal) 40%, transparent) 3px 6px);
}

.rd-member-value[b-v0uwx997k2] {
    color: var(--color-text-light);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* "+90 HP": what a Short Rest would restore them, in the Short Rest card's heal color. */
.rd-member-gain[b-v0uwx997k2] {
    flex: none;
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--combat-heal) 40%, transparent);
    background: color-mix(in srgb, var(--combat-heal) 10%, transparent);
    color: var(--combat-heal-light);
    font-size: 10.5px;
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rd-member-tag + .rd-member-gain[b-v0uwx997k2] {
    margin-left: 0;
}

@keyframes rd-member-in-b-v0uwx997k2 {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rd-member[b-v0uwx997k2] {
        animation: none;
    }
}
/* /Components/Combat/Tablet/TabletHotbar.razor.rz.scp.css */
/* TabletHotbar.razor.css : the tablet action bar (combat HUD rethink WP11, D11 tablet).
   Lane tabs wear the turn-slot tokens and WP4 shapes (action circle, bonus triangle, move square, free ring), the
   same as the desktop hotbar's lane headers, so a lane reads without color too. Every control is a touch target of at
   least 44px; nothing depends on hover. Colors are design-system tokens only. Breakpoints: canonical only (1024). */

.tablet-hotbar[b-tr82qxadk2] {
    --class-color: var(--color-primary);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: var(--space-sm);
    min-width: 0;
}

.tablet-hotbar.warrior[b-tr82qxadk2]   { --class-color: var(--color-warrior); }
.tablet-hotbar.wizard[b-tr82qxadk2]    { --class-color: var(--color-wizard); }
.tablet-hotbar.ranger[b-tr82qxadk2]    { --class-color: var(--color-ranger); }
.tablet-hotbar.rogue[b-tr82qxadk2]     { --class-color: var(--color-rogue); }
.tablet-hotbar.paladin[b-tr82qxadk2]   { --class-color: var(--color-paladin); }
.tablet-hotbar.bard[b-tr82qxadk2]      { --class-color: var(--color-bard); }
.tablet-hotbar.monk[b-tr82qxadk2]      { --class-color: var(--color-monk); }
.tablet-hotbar.barbarian[b-tr82qxadk2] { --class-color: var(--color-barbarian); }
.tablet-hotbar.cleric[b-tr82qxadk2]    { --class-color: var(--color-cleric); }
.tablet-hotbar.pirate[b-tr82qxadk2]    { --class-color: var(--color-pirate); }

.th-main[b-tr82qxadk2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.th-warning[b-tr82qxadk2] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px var(--space-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
    color: var(--color-warning-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.th-warning .material-icons[b-tr82qxadk2] {
    font-size: 1.1rem;
}

/* ----- Lane tabs ----- */

.th-tabs-row[b-tr82qxadk2] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.th-tabs[b-tr82qxadk2] {
    display: flex;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.th-tabs[b-tr82qxadk2]::-webkit-scrollbar {
    display: none;
}

.th-tab[b-tr82qxadk2] {
    --eco: var(--color-eco-action);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 88px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--eco) 40%, transparent);
    background: color-mix(in srgb, var(--eco) 7%, var(--color-bg-base));
    color: var(--eco);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition-fast), opacity 0.2s ease, filter 0.2s ease;
}

.th-tab--move[b-tr82qxadk2]     { --eco: var(--color-eco-move); }
.th-tab--action[b-tr82qxadk2]   { --eco: var(--color-eco-action); }
.th-tab--bonus[b-tr82qxadk2]    { --eco: var(--color-eco-bonus); }
.th-tab--free[b-tr82qxadk2]     { --eco: var(--color-eco-free); }
.th-tab--reaction[b-tr82qxadk2] { --eco: var(--color-eco-reaction); }

.th-tab.is-selected[b-tr82qxadk2] {
    border-color: var(--eco);
    background: color-mix(in srgb, var(--eco) 22%, var(--color-bg-base));
    box-shadow: inset 0 -3px 0 var(--eco);
}

.th-tab:focus-visible[b-tr82qxadk2] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* A spent lane fades as a whole, on its tab and its page. */
.th-tab.is-spent[b-tr82qxadk2] {
    opacity: 0.45;
    filter: grayscale(0.4);
}

.th-tab.is-spent .th-tab-title[b-tr82qxadk2] {
    text-decoration: line-through;
}

/* A Smite offer waits while another tab is shown: the Free tab glows gold, as the desktop stepper does (D7). */
.th-tab.is-calling[b-tr82qxadk2] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) 50%, transparent);
    animation: th-calling-pulse-b-tr82qxadk2 1.4s ease-in-out infinite;
}

@keyframes th-calling-pulse-b-tr82qxadk2 {
    0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--color-primary) 35%, transparent); }
    50%      { box-shadow: 0 0 14px color-mix(in srgb, var(--color-primary) 65%, transparent); }
}

.th-tab-badge[b-tr82qxadk2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-round);
    background: var(--eco);
    color: var(--color-bg-base);
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    letter-spacing: 0;
}

/* The lane pip: the WP4 shapes (design-system.css action economy block). */
.eco-pip[b-tr82qxadk2] {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--eco);
}

.th-tab--bonus .eco-pip[b-tr82qxadk2],
.th-card--bonus .eco-pip[b-tr82qxadk2] {
    width: 12px;
    height: 11px;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.th-tab--move .eco-pip[b-tr82qxadk2],
.th-card--move .eco-pip[b-tr82qxadk2] {
    border-radius: 2px;
}

.th-tab--free .eco-pip[b-tr82qxadk2],
.th-card--free .eco-pip[b-tr82qxadk2] {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--eco);
}

.th-tab--reaction .eco-pip[b-tr82qxadk2],
.th-card--reaction .eco-pip[b-tr82qxadk2] {
    border-radius: 0;
    transform: rotate(45deg) scale(0.8);
}

.th-tab.is-spent .eco-pip[b-tr82qxadk2] {
    background: var(--color-text-muted);
}

.th-tab--free.is-spent .eco-pip[b-tr82qxadk2] {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--color-text-muted);
}

/* ----- Tools: full cards, overflow (Flee) ----- */

.th-tools[b-tr82qxadk2] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.th-icon-btn[b-tr82qxadk2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-hover);
    background: color-mix(in srgb, var(--color-bg-base) 80%, transparent);
    color: var(--color-text-light);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.th-icon-btn .material-icons[b-tr82qxadk2] {
    font-size: 1.35rem;
}

.th-icon-btn.is-active[b-tr82qxadk2] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.th-icon-btn:focus-visible[b-tr82qxadk2] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ----- The lane page ----- */

.th-panel[b-tr82qxadk2] {
    --eco: var(--color-eco-action);
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    padding: 6px;
    border-top: 3px solid var(--eco);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--eco) 6%, transparent);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.th-panel--move[b-tr82qxadk2]     { --eco: var(--color-eco-move); }
.th-panel--action[b-tr82qxadk2]   { --eco: var(--color-eco-action); }
.th-panel--bonus[b-tr82qxadk2]    { --eco: var(--color-eco-bonus); }
.th-panel--free[b-tr82qxadk2]     { --eco: var(--color-eco-free); }
.th-panel--reaction[b-tr82qxadk2] { --eco: var(--color-eco-reaction); }

.th-panel.is-spent[b-tr82qxadk2] {
    opacity: 0.5;
    filter: grayscale(0.4);
}

.th-slots[b-tr82qxadk2] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

.th-page-btn[b-tr82qxadk2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    min-height: 44px;
    padding: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-hover);
    background: color-mix(in srgb, var(--color-bg-base) 80%, transparent);
    color: var(--color-text-light);
    cursor: pointer;
    touch-action: manipulation;
}

.th-page-btn .material-icons[b-tr82qxadk2] {
    font-size: 1.6rem;
}

.th-page-btn:disabled[b-tr82qxadk2] {
    opacity: 0.35;
    cursor: default;
}

.th-panel-foot[b-tr82qxadk2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-basis: 100%;
    min-height: 16px;
    padding: 0 2px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.th-lane-note[b-tr82qxadk2] {
    font-weight: var(--font-weight-semibold);
}

.th-page-count[b-tr82qxadk2] {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* ----- Large slots ----- */

.th-slot[b-tr82qxadk2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 78px;
    padding: 8px 4px 6px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-hover);
    border-left: 3px solid var(--class-color);
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    color: var(--color-text-lighter);
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, opacity 0.2s ease, filter 0.2s ease;
}

/* A spell slot wears its school's tint and border (the global .spell-school-* block, as the SpellCard does). */
.th-slot.is-spell[b-tr82qxadk2] {
    border-left-width: 1px;
}

.th-slot:active[b-tr82qxadk2] {
    transform: scale(0.97);
}

.th-slot:focus-visible[b-tr82qxadk2],
.th-move:focus-visible[b-tr82qxadk2],
.th-smite-tier:focus-visible[b-tr82qxadk2],
.th-end-turn:focus-visible[b-tr82qxadk2] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.th-slot[b-tr82qxadk2]  .th-slot-icon {
    width: 28px;
    height: 28px;
    font-size: 28px;
}

.th-slot-name[b-tr82qxadk2] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.15;
}

/* Costs are outlined chips in the resource color (never a filled eco token). */
.th-slot-cost[b-tr82qxadk2] {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 20px;
    padding: 0 5px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-mana);
    background: color-mix(in srgb, var(--color-bg-base) 85%, transparent);
    color: var(--color-mana);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 18px;
}

.th-slot-cost.cost-ki[b-tr82qxadk2] {
    border-color: var(--color-ki);
    color: var(--color-ki);
}

.th-slot-cost.cost-swagger[b-tr82qxadk2] {
    border-color: var(--color-swagger);
    color: var(--color-swagger);
}

.th-slot-fav[b-tr82qxadk2] {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 15px;
    color: var(--color-primary);
}

.th-slot-cd[b-tr82qxadk2] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    min-width: 20px;
    padding: 0 5px;
    border-radius: var(--radius-round);
    background: var(--color-bg-base);
    border: 1px solid var(--color-border-active);
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 18px;
}

.th-slot-block[b-tr82qxadk2] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 15px;
    color: var(--color-text-tertiary);
}

/* The slot's key for a keyboard on this tier (the hotbar's digits, A, E), quiet so touch players can ignore it. */
.th-slot-key[b-tr82qxadk2] {
    position: absolute;
    bottom: 4px;
    left: 5px;
    min-width: 14px;
    padding: 0 3px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-tertiary);
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    line-height: 13px;
    text-align: center;
}


/* A greyed slot still answers a tap: the page says the gate's reason. */
.th-slot.is-disabled[b-tr82qxadk2] {
    opacity: 0.5;
    filter: grayscale(0.5);
}

/* The slot an aim came from pulses in the aimed action's turn slot color (the board's glow). */
.th-slot.aim-eco-action[b-tr82qxadk2] { --aim-eco: var(--color-eco-action); }
.th-slot.aim-eco-bonus[b-tr82qxadk2]  { --aim-eco: var(--color-eco-bonus); }

.th-slot.is-pending[b-tr82qxadk2] {
    outline: 2px solid var(--aim-eco);
    outline-offset: 2px;
    box-shadow: 0 0 12px color-mix(in srgb, var(--aim-eco) 45%, transparent);
    animation: th-pending-pulse-b-tr82qxadk2 1.4s ease-in-out infinite;
}

.th-slot.is-armed[b-tr82qxadk2] {
    outline-width: 3px;
}

@keyframes th-pending-pulse-b-tr82qxadk2 {
    0%, 100% { outline-offset: 2px; }
    50%      { outline-offset: 4px; }
}

.th-slot-confirm[b-tr82qxadk2] {
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    padding: 0 6px;
    border-radius: var(--radius-round);
    background: var(--aim-eco);
    color: var(--color-bg-base);
    font-size: 0.62rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    line-height: 16px;
    white-space: nowrap;
    text-transform: uppercase;
}

/* ----- Move tile (the board moves you) ----- */

.th-move[b-tr82qxadk2] {
    grid-column: span 2;
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    min-height: 78px;
    padding: 8px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-eco-move) 45%, transparent);
    background: color-mix(in srgb, var(--color-eco-move) 8%, transparent);
    color: var(--color-eco-move);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.th-move .material-icons[b-tr82qxadk2] {
    grid-row: span 2;
    font-size: 30px;
}

.th-move-range[b-tr82qxadk2] {
    grid-row: span 2;
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.th-move-unit[b-tr82qxadk2] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.th-move-text[b-tr82qxadk2] {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.th-move.is-disabled[b-tr82qxadk2] {
    color: var(--color-text-tertiary);
    border-color: var(--color-border-subtle);
    background: transparent;
}

/* ----- Divine Smite stepper (Free lane), as on the desktop bar but finger-sized ----- */

.th-smite[b-tr82qxadk2] {
    grid-column: span 3;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 78px;
    padding: 6px 8px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
}

.th-smite.is-offered[b-tr82qxadk2] {
    border-color: var(--color-primary);
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.th-smite-head[b-tr82qxadk2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 48px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.th-smite-head .material-icons[b-tr82qxadk2] {
    font-size: 1.3rem;
    color: var(--color-primary);
}

.th-smite-crit[b-tr82qxadk2] {
    padding: 0 5px;
    border-radius: var(--radius-sm);
    background: var(--color-warning-bright);
    color: var(--color-bg-base);
}

.th-smite-tiers[b-tr82qxadk2] {
    display: flex;
    gap: 6px;
    flex: 1 1 auto;
}

.th-smite-tier[b-tr82qxadk2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 48px;
    min-height: 56px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-hover);
    background: var(--color-bg-elevated-alt);
    color: var(--color-text-lighter);
    cursor: pointer;
    touch-action: manipulation;
}

.th-smite-tier.is-usable[b-tr82qxadk2] {
    border-color: var(--color-primary);
}

.th-smite-tier[aria-disabled="true"][b-tr82qxadk2] {
    opacity: 0.45;
}

.th-smite-numeral[b-tr82qxadk2] {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
}

.th-smite-cost[b-tr82qxadk2] {
    font-size: var(--font-size-xs);
    color: var(--color-mana);
}

/* ----- End Turn ----- */

.th-end-turn[b-tr82qxadk2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 112px;
    min-height: 88px;
    padding: 10px 14px;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-bg-base);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: var(--shadow-gold);
}

.th-end-turn .material-icons[b-tr82qxadk2] {
    font-size: 1.8rem;
}

.th-end-turn-label[b-tr82qxadk2] {
    font-size: var(--font-size-sm);
}

.th-end-turn-state[b-tr82qxadk2] {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    letter-spacing: 0;
    text-transform: none;
}

.th-end-turn:disabled[b-tr82qxadk2] {
    cursor: default;
    border-color: var(--color-border-subtle);
    background: var(--color-bg-elevated);
    color: var(--color-text-tertiary);
    box-shadow: none;
}

/* ----- Full cards (the touch stand-in for the desktop hover zoom) ----- */

.th-details[b-tr82qxadk2] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(55vh, 440px);
    padding: 8px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-active);
    background: color-mix(in srgb, var(--color-bg-base) 96%, transparent);
    box-shadow: var(--shadow-lg);
}

.th-details-head[b-tr82qxadk2] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
}

.th-details-title[b-tr82qxadk2] {
    flex: 1 1 auto;
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
}

.th-details-list[b-tr82qxadk2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.th-card[b-tr82qxadk2] {
    --eco: var(--color-eco-action);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    border-left: 3px solid var(--eco);
    background: var(--color-bg-elevated);
}

.th-card--move[b-tr82qxadk2]     { --eco: var(--color-eco-move); }
.th-card--action[b-tr82qxadk2]   { --eco: var(--color-eco-action); }
.th-card--bonus[b-tr82qxadk2]    { --eco: var(--color-eco-bonus); }
.th-card--free[b-tr82qxadk2]     { --eco: var(--color-eco-free); }
.th-card--reaction[b-tr82qxadk2] { --eco: var(--color-eco-reaction); }

.th-card-head[b-tr82qxadk2] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.th-card[b-tr82qxadk2]  .th-card-icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: var(--color-text-light);
}

.th-card-name[b-tr82qxadk2] {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-lightest);
}

.th-card-lane[b-tr82qxadk2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--eco);
}

.th-card-line[b-tr82qxadk2] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.35;
}

.th-card-reason[b-tr82qxadk2] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-warning-light);
}

.th-card-reason .material-icons[b-tr82qxadk2] {
    font-size: 1rem;
}

.th-card-pin[b-tr82qxadk2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-hover);
    background: transparent;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    cursor: pointer;
    touch-action: manipulation;
}

.th-card-pin.is-pinned[b-tr82qxadk2] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ----- Canonical breakpoints ----- */

@media (max-width: 1024px) {
    .th-tab[b-tr82qxadk2] {
        min-width: 76px;
        padding: 0 10px;
    }

    .th-slot[b-tr82qxadk2],
    .th-move[b-tr82qxadk2],
    .th-smite[b-tr82qxadk2] {
        min-height: 72px;
    }

    .th-end-turn[b-tr82qxadk2] {
        min-width: 100px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .th-tab[b-tr82qxadk2],
    .th-panel[b-tr82qxadk2],
    .th-slot[b-tr82qxadk2] {
        transition: none;
    }

    .th-slot:active[b-tr82qxadk2] {
        transform: none;
    }

    .th-slot.is-pending[b-tr82qxadk2],
    .th-tab.is-calling[b-tr82qxadk2] {
        animation: none;
    }
}
/* /Components/Combat/Tablet/TabletPartyStrip.razor.rz.scp.css */
/* TabletPartyStrip.razor.css : the tablet's co-op party strip (combat HUD rethink WP11). A quiet panel framed like
   the desktop party column; the compact ally frames scroll sideways. While an ally action is aimed the section carries
   the board's .aim-mode classes, so --aim-eco (the aimed action's turn slot) reaches the frames' glow. Tokens only. */

.tablet-party-strip[b-bdgp541tz0] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--space-sm);
    row-gap: 2px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    background: color-mix(in srgb, var(--color-bg-base) 72%, transparent);
}

/* D11: you're next. The strip's frame turns gold (outlined, never filled) beside the "You're on deck" pill. */
.tablet-party-strip.is-on-deck[b-bdgp541tz0] {
    border-color: var(--color-primary);
}

.tablet-party-strip.aim-mode[b-bdgp541tz0] {
    --aim-eco: var(--color-eco-action);
}

.tablet-party-strip.aim-mode.aim-eco-bonus[b-bdgp541tz0] {
    --aim-eco: var(--color-eco-bonus);
}

.tps-head[b-bdgp541tz0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 72px;
}

.tps-title[b-bdgp541tz0] {
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.tps-count[b-bdgp541tz0] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--combat-good);
    font-variant-numeric: tabular-nums;
}

/* D11: you're next. Outlined gold (never filled), so it can't read as the filled "Your turn" pill. */
.tps-on-deck[b-bdgp541tz0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-round);
    border: 1px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.tps-on-deck .material-icons[b-bdgp541tz0] {
    font-size: 14px;
}

.tps-frames[b-bdgp541tz0] {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 4px 2px;
    scrollbar-width: none;
}

.tps-frames[b-bdgp541tz0]::-webkit-scrollbar {
    display: none;
}

/* Each ally is a compact PartyMemberFrame: a 44px+ tap target when it is an ally target. */
.tps-frames[b-bdgp541tz0]  .pmf.pmf--compact {
    min-height: 52px;
    max-width: 200px;
    touch-action: manipulation;
}

.tps-empty[b-bdgp541tz0],
.tps-hint[b-bdgp541tz0] {
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: 1.35;
    color: var(--color-text-secondary);
}

.tps-hint[b-bdgp541tz0] {
    grid-column: 1 / -1;
}
/* /Components/Combat/Tablet/TabletTargetPanel.razor.rz.scp.css */
/* TabletTargetPanel.razor.css : the tablet's target panel (combat HUD rethink WP11, D4). One quiet card: the monster's
   header with the info button (44px), the preview card (HP, AC, odds), the intent and status pips, and while an enemy
   action is aimed its aim button in the aimed slot's color (--aim-eco). Tokens only; no hover-only affordance. */

.tablet-target[b-yzu39f44db] {
    --aim-eco: var(--color-eco-action);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    background: color-mix(in srgb, var(--color-bg-base) 78%, transparent);
}

.tablet-target.is-boss[b-yzu39f44db] {
    border-color: color-mix(in srgb, var(--combat-enemy-light) 55%, transparent);
}

.tablet-target.aim-eco-bonus[b-yzu39f44db] {
    --aim-eco: var(--color-eco-bonus);
}

.tt-head[b-yzu39f44db] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.tt-portrait[b-yzu39f44db] {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-active);
    background: var(--color-bg-elevated-alt);
}

.tt-portrait img[b-yzu39f44db] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tt-boss-pip[b-yzu39f44db] {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    padding: 1px;
    border-radius: var(--radius-round);
    background: var(--color-bg-base);
    color: var(--combat-enemy-light);
}

.tt-boss-pip .material-icons[b-yzu39f44db] {
    font-size: 14px;
}

.tt-meta[b-yzu39f44db] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tt-name-row[b-yzu39f44db] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.tt-name[b-yzu39f44db] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.tt-level[b-yzu39f44db] {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.tt-sub[b-yzu39f44db] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.tt-zone[b-yzu39f44db] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    border-radius: var(--radius-round);
    border: 1px solid var(--color-border-hover);
    color: var(--color-text-light);
    font-weight: var(--font-weight-bold);
}

.tt-zone.zone-vanguard[b-yzu39f44db] { border-color: var(--color-zone-vanguard-border); color: var(--color-zone-vanguard-light); }
.tt-zone.zone-flankleft[b-yzu39f44db],
.tt-zone.zone-flankright[b-yzu39f44db] { border-color: var(--color-zone-flank-border); color: var(--color-zone-flank-light); }
.tt-zone.zone-rear[b-yzu39f44db] { border-color: var(--color-zone-rear-border); color: var(--color-zone-rear-light); }

.tt-zone[b-yzu39f44db]  .mud-icon-root {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

/* D4: the info button (the tablet's way to the monster card). */
.tt-info[b-yzu39f44db] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-round);
    border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    cursor: pointer;
    touch-action: manipulation;
}

.tt-info .material-icons[b-yzu39f44db] {
    font-size: 1.5rem;
}

.tt-info:focus-visible[b-yzu39f44db],
.tt-aim:focus-visible[b-yzu39f44db] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.tt-intent[b-yzu39f44db] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
}

.tt-intent-label[b-yzu39f44db] {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
}

.tt-status[b-yzu39f44db] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tt-status-pip[b-yzu39f44db] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-hover);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.tt-status-pip[b-yzu39f44db]  .mud-icon-root {
    width: 15px;
    height: 15px;
    font-size: 15px;
}

.tt-status-duration[b-yzu39f44db] {
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 12px;
    padding: 0 2px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-base);
    font-size: 0.55rem;
    line-height: 12px;
    text-align: center;
}

.tt-status-more[b-yzu39f44db] {
    width: auto;
    padding: 0 6px;
}

/* WP12e: the board rail's kind colors (the status tokens; deuteranopia turns buff blue), shapes (harmful square,
   beneficial round) and the last-round dashed rim. */
.tt-status-pip[b-yzu39f44db] {
    --tt-kind: var(--color-status-debuff);
    border-color: color-mix(in srgb, var(--tt-kind) 65%, transparent);
    background: color-mix(in srgb, var(--tt-kind) 16%, var(--color-bg-base));
    color: var(--tt-kind);
}

.tt-status-pip.status-pip-cc[b-yzu39f44db]     { --tt-kind: var(--color-status-control); }
.tt-status-pip.status-pip-dot[b-yzu39f44db]    { --tt-kind: var(--color-status-dot); }
.tt-status-pip.status-pip-debuff[b-yzu39f44db] { --tt-kind: var(--color-status-debuff); }
.tt-status-pip.status-pip-buff[b-yzu39f44db]   { --tt-kind: var(--color-status-buff); }

.tt-status-pip.tt-status-more[b-yzu39f44db] {
    --tt-kind: var(--color-text-secondary);
    color: var(--color-text-light);
}

.tt-status-duration[b-yzu39f44db] {
    color: var(--color-text-primary);
}

.tt-status-pip.is-beneficial[b-yzu39f44db] {
    border-radius: var(--radius-round);
}

.tt-status-pip.is-last-round[b-yzu39f44db] {
    border-style: dashed;
}

/* While an enemy action is aimed: the panel's aim button, in the aimed slot's color. */
.tt-aim[b-yzu39f44db] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--aim-eco);
    background: color-mix(in srgb, var(--aim-eco) 14%, transparent);
    color: var(--aim-eco);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    touch-action: manipulation;
}

.tt-aim.is-armed[b-yzu39f44db] {
    background: var(--aim-eco);
    color: var(--color-bg-base);
}

.tt-aim:disabled[b-yzu39f44db] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tt-aim-reason[b-yzu39f44db] {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.tt-empty[b-yzu39f44db] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.tt-empty .material-icons[b-yzu39f44db] {
    font-size: 1.4rem;
    color: var(--color-text-tertiary);
}
/* /Components/Combat/UnifiedCombatLog.razor.rz.scp.css */
.combat-log-card[b-pd6xoww0ax] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 8px;
}

/* Screen-reader only — visually hidden, but announced by assistive tech */
.combat-log-sr-only[b-pd6xoww0ax] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.combat-log-filter-bar[b-pd6xoww0ax] {
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-spacer[b-pd6xoww0ax] {
    flex: 1;
}

[b-pd6xoww0ax] .filter-search {
    max-width: 150px;
    font-size: var(--ct-sm);
}

/* The search field's text and placeholder are MudBlazor's input (1rem); combat text size (WP12g). */
[b-pd6xoww0ax] .filter-search .mud-input {
    font-size: var(--ct-sm);
}

/* The filter toggles are MudBlazor's buttons (their own px size); combat text size (WP12g). */
.combat-log-filter-bar[b-pd6xoww0ax]  .mud-toggle-item {
    font-size: var(--ct-md);
}

/* The Desktop / Wide log column (CombatLogDock, 320px pinned): MudToggleGroup lays its items in equal minmax(0, 1fr)
   grid columns, so in a narrow bar "ALL PLAYER ENEMY" ran into each other. Here the group keeps its natural width
   (each column at least its own label), the labels drop the all-caps tracking, and the search takes what is left,
   wrapping under the filters only if even that is too narrow. The tablet's full-log drawer keeps its own look. */
.combat-log-dock .combat-log-filter-bar[b-pd6xoww0ax] {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 6px 10px;
}

.combat-log-dock .combat-log-filter-bar[b-pd6xoww0ax]  .mud-toggle-group {
    flex: 0 0 auto;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

.combat-log-dock .combat-log-filter-bar[b-pd6xoww0ax]  .mud-toggle-item {
    min-width: 0;
    padding: 2px 8px;
    font-size: var(--ct-sm);
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
}

.combat-log-dock .filter-spacer[b-pd6xoww0ax] {
    display: none;
}

.combat-log-dock .combat-log-filter-bar[b-pd6xoww0ax]  .filter-search {
    flex: 1 1 104px;
    min-width: 104px;
    max-width: 170px;
    margin-left: auto;
}

.combat-log-content[b-pd6xoww0ax] {
    overflow-y: auto;
    background-color: #1e1e1e;
    padding: 8px;
    flex: 1;
    min-height: 0;
    position: relative;
    font-family: 'Courier New', monospace;
    font-size: var(--ct-sm);
    scroll-behavior: smooth;
}

/* MudText: its element carries no scope attribute, hence ::deep. */
[b-pd6xoww0ax] .empty-message {
    color: #888;
    padding: 8px;
    font-size: var(--ct-sm);
}

.jump-to-latest[b-pd6xoww0ax] {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 10;
}

/* Narrow-window sizes for the full-log drawer; never the docked log of the floored Desktop / Wide layout (WP12c). */
@media (max-width: 768px) {
    .combat-log-content:where(:not(.combat-floor--desktop *))[b-pd6xoww0ax] { font-size: var(--ct-xs); }
}

@media (max-width: 767px) and (orientation: portrait) {
    .combat-log-content:where(:not(.combat-floor--desktop *))[b-pd6xoww0ax] { min-height: 180px; }
}

@media (max-width: 900px) and (orientation: landscape) {
    .combat-log-content:where(:not(.combat-floor--desktop *))[b-pd6xoww0ax] { font-size: var(--ct-2xs); min-height: 80px; }
}
/* /Components/Combat/Victory/VictoryActionBar.razor.rz.scp.css */
.vs-actions[b-e8qqjdczgd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.vs-actions-row[b-e8qqjdczgd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 16px;
    width: 100%;
}

/* ---- Primary: the one obvious next action ------------------------------- */

.vs-btn-primary[b-e8qqjdczgd] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: min(100%, 360px);
    min-height: 60px;
    padding: 8px 18px;
    border: 0;
    border-radius: var(--radius-2xl);
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 45%, var(--color-primary-dark));
    color: var(--color-bg-base);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--color-primary) 28%, transparent);
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease;
    animation: vs-cta-in-b-e8qqjdczgd 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 1100ms both;
}

    .vs-btn-primary:hover:not(:disabled)[b-e8qqjdczgd] {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

    .vs-btn-primary:active:not(:disabled)[b-e8qqjdczgd] {
        transform: translateY(1px);
    }

    .vs-btn-primary:focus-visible[b-e8qqjdczgd] {
        outline: 3px solid var(--color-text-primary);
        outline-offset: 3px;
    }

    .vs-btn-primary:disabled[b-e8qqjdczgd] {
        cursor: progress;
        filter: saturate(0.6) brightness(0.85);
    }

    /* Waiting on you: a soft ring pulse until you ready up. On a pseudo-element, so it keeps going
       after the reveal freezes the button's own entrance animation. */
    .vs-btn-primary.is-ready-check:not(.is-ready)[b-e8qqjdczgd]::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        animation: vs-cta-pulse-b-e8qqjdczgd 2.2s ease-out 1.6s infinite;
    }

    /* Already ready: quiet outline so it reads as done, still clickable to cancel. */
    .vs-btn-primary.is-ready[b-e8qqjdczgd] {
        background: color-mix(in srgb, var(--color-success) 16%, var(--color-gray-900));
        color: var(--color-success-light);
        box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-success) 60%, transparent);
    }

.vs-btn-primary-label[b-e8qqjdczgd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vs-btn-primary-ico[b-e8qqjdczgd] {
    display: inline-flex;
    font-size: 22px;
}

.vs-btn-primary-sub[b-e8qqjdczgd] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: color-mix(in srgb, var(--color-bg-base) 80%, var(--color-primary-darker));
}

.vs-btn-primary.is-ready .vs-btn-primary-sub[b-e8qqjdczgd] {
    color: var(--color-text-light);
}

/* ---- Secondary: quiet gold outline -------------------------------------- */

.vs-btn-secondary[b-e8qqjdczgd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 20px;
    border-radius: var(--radius-2xl);
    border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: 15px;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}

    .vs-btn-secondary:hover:not(:disabled)[b-e8qqjdczgd] {
        background: color-mix(in srgb, var(--color-primary) 12%, transparent);
        border-color: var(--color-primary);
    }

    .vs-btn-secondary:focus-visible[b-e8qqjdczgd] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    .vs-btn-secondary:disabled[b-e8qqjdczgd] {
        opacity: 0.6;
        cursor: progress;
    }

.vs-btn-ico[b-e8qqjdczgd] {
    display: inline-flex;
    font-size: 20px;
}

.vs-btn-badge[b-e8qqjdczgd] {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-bg-base);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ---- Ready dots and the key hint ---------------------------------------- */

.vs-ready-dots[b-e8qqjdczgd] {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-ready-dot[b-e8qqjdczgd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px dashed var(--color-text-tertiary);
    background: var(--color-bg-base);
}

    .vs-ready-dot + .vs-ready-dot[b-e8qqjdczgd] {
        margin-left: -6px;
    }

    .vs-ready-dot.is-ready[b-e8qqjdczgd] {
        border: 2px solid var(--vs-accent);
    }

    /* Away (or sitting out): not waited for, so the dot fades instead of reading as pending. */
    .vs-ready-dot.is-away[b-e8qqjdczgd] {
        border-style: dotted;
        opacity: 0.45;
    }

.vs-ready-dot-ico[b-e8qqjdczgd] {
    display: inline-flex;
    font-size: 16px;
    color: var(--color-success-light);
}

.vs-keyhint[b-e8qqjdczgd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

    .vs-keyhint kbd[b-e8qqjdczgd] {
        padding: 2px 7px;
        border: 1px solid color-mix(in srgb, var(--color-text-secondary) 40%, transparent);
        border-bottom-width: 2px;
        border-radius: 5px;
        color: var(--color-text-light);
        font-family: var(--font-primary);
        font-size: 11px;
    }

/* ---- Notes ---------------------------------------------------------------- */

.vs-notes[b-e8qqjdczgd] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-secondary);
    font-size: 12.5px;
}

.vs-note[b-e8qqjdczgd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vs-note-ico[b-e8qqjdczgd] {
    display: inline-flex;
    font-size: 16px;
}

.vs-note--danger .vs-note-ico[b-e8qqjdczgd] {
    color: var(--color-danger-light);
}

@keyframes vs-cta-in-b-e8qqjdczgd {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

@keyframes vs-cta-pulse-b-e8qqjdczgd {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent);
    }

    70%, 100% {
        box-shadow: 0 0 0 10px transparent;
    }
}

/* Phones: hide the keyboard hint, keep the primary full width. */
@media (max-width: 768px) {
    .vs-keyhint[b-e8qqjdczgd] {
        display: none;
    }

    .vs-btn-primary[b-e8qqjdczgd] {
        width: 100%;
        order: -1;
    }

    .vs-btn-secondary[b-e8qqjdczgd] {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vs-btn-primary[b-e8qqjdczgd],
    .vs-btn-primary.is-ready-check:not(.is-ready)[b-e8qqjdczgd]::after {
        animation: none;
        transition: none;
    }
}
/* /Components/Combat/Victory/VictoryBar.razor.rz.scp.css */
.vs-bar-block[b-9q1gwu5c6z] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.vs-bar-head[b-9q1gwu5c6z] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
}

.vs-bar-label[b-9q1gwu5c6z] {
    color: var(--color-text-secondary);
}

.vs-bar-value[b-9q1gwu5c6z] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vs-bar[b-9q1gwu5c6z] {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-gray-800);
}

.vs-bar--thin[b-9q1gwu5c6z] {
    height: 7px;
}

.vs-bar--regular[b-9q1gwu5c6z] {
    height: 9px;
}

.vs-bar-fill[b-9q1gwu5c6z] {
    height: 100%;
    border-radius: inherit;
    background: var(--color-hp);
}

    .vs-bar-fill.is-low[b-9q1gwu5c6z] {
        background: var(--color-hp-low);
    }

    .vs-bar-fill.is-critical[b-9q1gwu5c6z] {
        background: var(--color-hp-critical);
    }

    .vs-bar-fill.is-mana[b-9q1gwu5c6z] {
        background: var(--color-mana);
    }
/* /Components/Combat/Victory/VictoryHonors.razor.rz.scp.css */
.vs-honors[b-8nclv3przx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Companion rarity, from the design-system pet rarity tokens. */
.pet-common[b-8nclv3przx] { --vs-pet: var(--color-pet-common); }
.pet-uncommon[b-8nclv3przx] { --vs-pet: var(--color-pet-uncommon); }
.pet-rare[b-8nclv3przx] { --vs-pet: var(--color-pet-rare); }
.pet-epic[b-8nclv3przx] { --vs-pet: var(--color-pet-epic); }
.pet-legendary[b-8nclv3przx] { --vs-pet: var(--color-pet-legendary); }

.vs-honor[b-8nclv3przx] {
    min-width: 0;
    border-radius: var(--radius-3xl);
    animation: vs-honor-rise-b-8nclv3przx 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 1200ms both;
}

.vs-honor--companion[b-8nclv3przx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--vs-pet) 60%, transparent);
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--vs-pet) 30%, transparent), transparent 65%), var(--color-gray-900);
}

    .vs-honor--companion.is-duplicate[b-8nclv3przx] {
        border-color: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
        background: var(--color-gray-900);
    }

.vs-honor-kicker[b-8nclv3przx] {
    color: color-mix(in srgb, var(--vs-pet, var(--color-primary)) 70%, var(--color-text-primary));
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

    .vs-honor-kicker.is-gold[b-8nclv3przx] {
        color: var(--color-primary);
        letter-spacing: 0.14em;
    }

.vs-honor-portrait[b-8nclv3przx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 80px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: linear-gradient(160deg, color-mix(in srgb, var(--vs-pet) 45%, var(--color-text-primary)), var(--vs-pet) 50%, color-mix(in srgb, var(--vs-pet) 40%, var(--color-bg-base)));
}

.vs-honor-portrait-inner[b-8nclv3przx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 72px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--color-bg-base);
    color: color-mix(in srgb, var(--vs-pet) 60%, var(--color-text-primary));
    font-size: 34px;
}

.vs-honor-name[b-8nclv3przx] {
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
}

.vs-honor-detail[b-8nclv3przx] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.vs-honor--companion .vs-honor-detail[b-8nclv3przx] {
    color: color-mix(in srgb, var(--vs-pet) 70%, var(--color-text-primary));
    font-weight: var(--font-weight-semibold);
}

.vs-honor-text[b-8nclv3przx] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
    line-height: 1.45;
}

.vs-honor--achievement[b-8nclv3przx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 12%, transparent), color-mix(in srgb, var(--color-primary) 4%, transparent));
}

.vs-honor-medal[b-8nclv3przx] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, var(--color-primary-light), var(--color-primary) 50%, var(--color-primary-darker));
    color: var(--color-bg-base);
    font-size: 26px;
}

.vs-honor-achievement-body[b-8nclv3przx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vs-honor-achievement-name[b-8nclv3przx] {
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 16px;
}

@keyframes vs-honor-rise-b-8nclv3przx {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vs-honor[b-8nclv3przx] {
        animation: none;
    }
}
/* /Components/Combat/Victory/VictoryIcon.razor.rz.scp.css */
.vs-icon[b-0ji5idaq2m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1em;
    height: 1em;
    line-height: 1;
}

    .vs-icon[b-0ji5idaq2m]  .mud-icon-root {
        width: 1em;
        height: 1em;
        font-size: inherit;
    }
/* /Components/Combat/Victory/VictoryLevelUpCallout.razor.rz.scp.css */
.vs-levelup[b-zgmc4572eo] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--radius-2xl);
    border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--color-primary) 30%, transparent);
    animation: vs-levelup-pop-b-zgmc4572eo 460ms cubic-bezier(0.2, 1.4, 0.4, 1) 1500ms both;
}

/* The breathing glow lives on a pseudo-element, so it outlasts the reveal freezing the pop. */
.vs-levelup[b-zgmc4572eo]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: vs-levelup-glow-b-zgmc4572eo 2.8s ease-in-out 2s infinite;
}

.vs-levelup-hex[b-zgmc4572eo] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 68px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 50%, var(--color-primary-dark));
    color: var(--color-bg-base);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 28px;
}

.vs-levelup-body[b-zgmc4572eo] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-size: 13px;
    color: var(--color-text-primary);
}

.vs-levelup-title[b-zgmc4572eo] {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.vs-levelup-muted[b-zgmc4572eo] {
    color: var(--color-text-secondary);
}

.vs-levelup-gain[b-zgmc4572eo] {
    color: var(--color-success-light);
    font-weight: var(--font-weight-semibold);
}

.vs-levelup-restored[b-zgmc4572eo] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-success-light);
}

.vs-levelup-restored-ico[b-zgmc4572eo] {
    display: inline-flex;
    font-size: 15px;
}

.vs-levelup.is-compact[b-zgmc4572eo] {
    gap: 10px;
    padding: 8px 10px;
}

    .vs-levelup.is-compact .vs-levelup-hex[b-zgmc4572eo] {
        width: 40px;
        height: 46px;
        font-size: 19px;
    }

    .vs-levelup.is-compact .vs-levelup-title[b-zgmc4572eo] {
        font-size: 13px;
    }

    .vs-levelup.is-compact .vs-levelup-body[b-zgmc4572eo] {
        font-size: var(--font-size-sm);
    }

@keyframes vs-levelup-pop-b-zgmc4572eo {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
}

@keyframes vs-levelup-glow-b-zgmc4572eo {
    0%, 100% {
        box-shadow: 0 0 0 transparent;
    }

    50% {
        box-shadow: 0 0 30px color-mix(in srgb, var(--color-primary) 40%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vs-levelup[b-zgmc4572eo],
    .vs-levelup[b-zgmc4572eo]::after {
        animation: none;
    }
}
/* /Components/Combat/Victory/VictoryLootCard.razor.rz.scp.css */
/* Rarity drives every loot frame through one custom property, from the design-system rarity tokens. */
.rarity-common[b-uvayhujwcg] { --vs-rarity: var(--color-rarity-common); }
.rarity-uncommon[b-uvayhujwcg] { --vs-rarity: var(--color-rarity-uncommon); }
.rarity-rare[b-uvayhujwcg] { --vs-rarity: var(--color-rarity-rare); }
.rarity-epic[b-uvayhujwcg] { --vs-rarity: var(--color-rarity-epic); }
.rarity-legendary[b-uvayhujwcg] { --vs-rarity: var(--color-rarity-legendary); }

/* ---- Card / Relic ------------------------------------------------------ */

.vs-loot-card[b-uvayhujwcg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    height: 100%;
    padding: 14px;
    border-radius: var(--radius-2xl);
    border: 1px solid color-mix(in srgb, var(--vs-rarity) 70%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--vs-rarity) 22%, var(--color-gray-900)) 0%, var(--color-gray-900) 55%);
    box-shadow: 0 0 26px color-mix(in srgb, var(--vs-rarity) 26%, transparent);
    animation: vs-loot-deal-b-uvayhujwcg 520ms cubic-bezier(0.2, 0.9, 0.3, 1) var(--vs-delay, 900ms) both;
}

.vs-loot-card.rarity-common[b-uvayhujwcg] {
    box-shadow: none;
}

.vs-loot-head[b-uvayhujwcg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
}

.vs-loot-rarity[b-uvayhujwcg] {
    color: color-mix(in srgb, var(--vs-rarity) 75%, var(--color-text-primary));
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 11px;
}

.vs-loot-kind[b-uvayhujwcg] {
    color: var(--color-text-secondary);
}

.vs-loot-tile[b-uvayhujwcg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--vs-rarity) 22%, transparent);
    color: color-mix(in srgb, var(--vs-rarity) 55%, var(--color-text-primary));
    font-size: 26px;
}

.vs-loot-name[b-uvayhujwcg] {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 17px;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.vs-loot-qty[b-uvayhujwcg] {
    margin-left: 4px;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.vs-loot-stats[b-uvayhujwcg],
.vs-loot-meta[b-uvayhujwcg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.vs-loot-lore[b-uvayhujwcg] {
    margin: 0;
    font-size: var(--font-size-sm);
    font-style: italic;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

/* A small dot drawn in CSS between text parts (no separator glyphs in markup). */
.vs-sep[b-uvayhujwcg] {
    display: inline-block;
    flex: none;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

.vs-verdict[b-uvayhujwcg] {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius-xl);
    line-height: 1.35;
    border: 1px solid var(--vs-verdict-border);
    background: var(--vs-verdict-bg);
    color: var(--vs-verdict-ink);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.vs-verdict-ico[b-uvayhujwcg] {
    display: inline-flex;
    flex: none;
    margin-top: 1px;
    font-size: 15px;
}

.vs-verdict-detail[b-uvayhujwcg] {
    margin-left: 4px;
    font-weight: var(--font-weight-medium);
}

.vs-verdict--upgrade[b-uvayhujwcg] {
    --vs-verdict-ink: var(--color-success-light);
    --vs-verdict-bg: color-mix(in srgb, var(--color-success) 14%, transparent);
    --vs-verdict-border: color-mix(in srgb, var(--color-success) 40%, transparent);
}

.vs-verdict--tradeoff[b-uvayhujwcg],
.vs-verdict--neutral[b-uvayhujwcg] {
    --vs-verdict-ink: var(--color-text-light);
    --vs-verdict-bg: color-mix(in srgb, var(--color-text-secondary) 12%, transparent);
    --vs-verdict-border: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
}

.vs-verdict--locked[b-uvayhujwcg] {
    --vs-verdict-ink: var(--color-danger-lighter);
    --vs-verdict-bg: color-mix(in srgb, var(--color-danger) 12%, transparent);
    --vs-verdict-border: color-mix(in srgb, var(--color-danger) 35%, transparent);
}

.vs-loot-card.is-relic[b-uvayhujwcg] {
    align-items: center;
    text-align: center;
    padding: 16px;
    border-width: 1.5px;
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--vs-rarity) 40%, transparent), transparent 62%), var(--color-gray-900);
    box-shadow: 0 0 38px color-mix(in srgb, var(--vs-rarity) 35%, transparent);
}

    .vs-loot-card.is-relic .vs-loot-head[b-uvayhujwcg] {
        justify-content: center;
    }

    .vs-loot-card.is-relic .vs-loot-tile[b-uvayhujwcg] {
        width: 64px;
        height: 64px;
        font-size: 40px;
        margin: 4px 0;
    }

    .vs-loot-card.is-relic .vs-loot-name[b-uvayhujwcg] {
        font-size: 22px;
        font-weight: 800;
    }

    .vs-loot-card.is-relic .vs-loot-stats[b-uvayhujwcg] {
        justify-content: center;
    }

    .vs-loot-card.is-relic .vs-verdict[b-uvayhujwcg] {
        align-self: center;
    }

/* ---- Row --------------------------------------------------------------- */

.vs-loot-row[b-uvayhujwcg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--vs-rarity) 55%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--vs-rarity) 18%, transparent), color-mix(in srgb, var(--vs-rarity) 4%, transparent));
    animation: vs-loot-deal-b-uvayhujwcg 520ms cubic-bezier(0.2, 0.9, 0.3, 1) var(--vs-delay, 900ms) both;
}

    .vs-loot-row .vs-loot-tile[b-uvayhujwcg] {
        width: 36px;
        height: 36px;
        font-size: 22px;
        border-radius: var(--radius-lg);
    }

    .vs-loot-row .vs-loot-name[b-uvayhujwcg] {
        font-size: 15px;
    }

    .vs-loot-row .vs-loot-rarity[b-uvayhujwcg] {
        letter-spacing: 0;
        text-transform: none;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
    }

.vs-loot-row-body[b-uvayhujwcg] {
    flex: 1;
    min-width: 0;
}

.vs-loot-short[b-uvayhujwcg] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--vs-verdict-ink);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.vs-loot-short-ico[b-uvayhujwcg] {
    display: inline-flex;
    font-size: 15px;
}

/* ---- Line -------------------------------------------------------------- */

.vs-loot-line[b-uvayhujwcg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    min-width: 0;
    font-size: 13px;
}

.vs-loot-diamond[b-uvayhujwcg] {
    flex: none;
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
    background: var(--vs-rarity);
}

.vs-loot-line-name[b-uvayhujwcg] {
    min-width: 0;
    overflow-wrap: anywhere;
    color: color-mix(in srgb, var(--vs-rarity) 65%, var(--color-text-primary));
    font-weight: var(--font-weight-semibold);
}

.vs-loot-line-kind[b-uvayhujwcg] {
    flex: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.vs-sr-only[b-uvayhujwcg] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes vs-loot-deal-b-uvayhujwcg {
    from {
        opacity: 0;
        transform: translateY(18px) rotate(-2deg) scale(0.96);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vs-loot-card[b-uvayhujwcg],
    .vs-loot-row[b-uvayhujwcg] {
        animation: none;
    }
}
/* /Components/Combat/Victory/VictoryMedallion.razor.rz.scp.css */
/* Hex portrait: a class-colored rim around a dark core. clip-path draws the hex, so no glyphs. */
.vs-med[b-44xnkcs4th] {
    --vs-hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: var(--vs-hex);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--vs-accent) 55%, var(--color-text-primary)),
        var(--vs-accent) 50%,
        color-mix(in srgb, var(--vs-accent) 45%, var(--color-bg-base)));
}

.vs-med-inner[b-44xnkcs4th] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    clip-path: var(--vs-hex);
    background: radial-gradient(circle at 50% 38%, var(--color-gray-800), var(--color-bg-base));
}

.vs-med-glyph[b-44xnkcs4th] {
    display: inline-flex;
    color: color-mix(in srgb, var(--vs-accent) 70%, var(--color-text-primary));
}

.vs-med--small[b-44xnkcs4th] {
    width: 44px;
    height: 50px;
}

    .vs-med--small .vs-med-glyph[b-44xnkcs4th] {
        font-size: 21px;
    }

.vs-med--medium[b-44xnkcs4th] {
    width: 54px;
    height: 60px;
}

    .vs-med--medium .vs-med-glyph[b-44xnkcs4th] {
        font-size: 26px;
    }

.vs-med--large[b-44xnkcs4th] {
    width: 84px;
    height: 94px;
}

    .vs-med--large .vs-med-inner[b-44xnkcs4th] {
        width: calc(100% - 10px);
        height: calc(100% - 10px);
    }

    .vs-med--large .vs-med-glyph[b-44xnkcs4th] {
        font-size: 40px;
    }

@media (max-width: 768px) {
    .vs-med--large[b-44xnkcs4th] {
        width: 64px;
        height: 72px;
    }

        .vs-med--large .vs-med-glyph[b-44xnkcs4th] {
            font-size: 30px;
        }
}
/* /Components/Combat/Victory/VictoryOutcomeBanner.razor.rz.scp.css */
.vs-outcome[b-2jwoajc9gw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.vs-outcome-emblem[b-2jwoajc9gw] {
    width: 50px;
    height: 50px;
    animation: vs-outcome-rise-b-2jwoajc9gw 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 0ms both;
}

.vs-outcome-kicker[b-2jwoajc9gw] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    animation: vs-outcome-rise-b-2jwoajc9gw 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 0ms both;
}

.vs-outcome-kicker-ico[b-2jwoajc9gw] {
    display: inline-flex;
    font-size: 22px;
}

/* The win word: huge, gold-gradient, tracked out. */
.vs-outcome-title[b-2jwoajc9gw] {
    margin: 0;
    padding-left: 0.16em;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 48%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 28px color-mix(in srgb, var(--color-primary) 35%, transparent));
    animation: vs-outcome-slam-b-2jwoajc9gw 620ms cubic-bezier(0.2, 1.3, 0.35, 1) 80ms both;
}

.vs-outcome.is-compact .vs-outcome-title[b-2jwoajc9gw] {
    font-size: clamp(2.4rem, 5.4vw, 4.25rem);
}

.vs-outcome.is-grand .vs-outcome-title[b-2jwoajc9gw] {
    padding-left: 0;
    font-size: clamp(2.2rem, 5.5vw, 3.9rem);
    letter-spacing: 0.04em;
    line-height: 1.05;
    text-transform: none;
}

.vs-outcome.is-spectator .vs-outcome-title[b-2jwoajc9gw] {
    font-size: clamp(2rem, 5vw, 3.6rem);
    letter-spacing: 0.08em;
}

.vs-outcome-subtitle[b-2jwoajc9gw] {
    margin: 2px 0 0;
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
    letter-spacing: 0.04em;
    animation: vs-outcome-rise-b-2jwoajc9gw 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 260ms both;
}

.vs-outcome.is-grand .vs-outcome-subtitle[b-2jwoajc9gw] {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
    font-size: 15px;
    letter-spacing: 0;
    color: var(--color-text-lighter);
}

.vs-outcome-facts[b-2jwoajc9gw] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-light);
    font-size: 13px;
    animation: vs-outcome-rise-b-2jwoajc9gw 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 360ms both;
}

.vs-outcome.is-grand .vs-outcome-facts[b-2jwoajc9gw] {
    gap: 10px;
}

.vs-fact[b-2jwoajc9gw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vs-outcome.is-grand .vs-fact[b-2jwoajc9gw] {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 25%, transparent);
    background: color-mix(in srgb, var(--color-gray-900) 70%, transparent);
}

.vs-fact-ico[b-2jwoajc9gw] {
    display: inline-flex;
    font-size: 17px;
    color: var(--color-text-secondary);
}

.vs-fact--gold .vs-fact-ico[b-2jwoajc9gw] {
    color: var(--color-warning-bright);
}

.vs-fact--danger .vs-fact-ico[b-2jwoajc9gw] {
    color: var(--color-danger-light);
}

.vs-fact--success .vs-fact-ico[b-2jwoajc9gw] {
    color: var(--color-success-light);
}

.vs-fact--info .vs-fact-ico[b-2jwoajc9gw] {
    color: var(--color-info-light);
}

.vs-outcome-notice[b-2jwoajc9gw] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 640px;
    margin-top: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-2xl);
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
    background: color-mix(in srgb, var(--color-gray-900) 85%, transparent);
    text-align: left;
    animation: vs-outcome-rise-b-2jwoajc9gw 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 420ms both;
}

.vs-outcome-notice-ico[b-2jwoajc9gw] {
    display: inline-flex;
    font-size: 24px;
    color: var(--color-text-secondary);
}

.vs-outcome-notice-main[b-2jwoajc9gw],
.vs-outcome-notice-detail[b-2jwoajc9gw] {
    margin: 0;
}

.vs-outcome-notice-main[b-2jwoajc9gw] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

.vs-outcome-notice-detail[b-2jwoajc9gw] {
    margin-top: 2px;
    color: var(--color-text-light);
    font-size: 13px;
}

@keyframes vs-outcome-slam-b-2jwoajc9gw {
    from {
        opacity: 0;
        transform: scale(1.18);
        letter-spacing: 0.4em;
    }
}

@keyframes vs-outcome-rise-b-2jwoajc9gw {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

@media (max-width: 480px) {
    .vs-outcome-title[b-2jwoajc9gw] {
        letter-spacing: 0.08em;
    }

    .vs-outcome-facts[b-2jwoajc9gw] {
        gap: 6px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vs-outcome-emblem[b-2jwoajc9gw],
    .vs-outcome-kicker[b-2jwoajc9gw],
    .vs-outcome-title[b-2jwoajc9gw],
    .vs-outcome-subtitle[b-2jwoajc9gw],
    .vs-outcome-facts[b-2jwoajc9gw],
    .vs-outcome-notice[b-2jwoajc9gw] {
        animation: none;
    }
}
/* /Components/Combat/Victory/VictoryOverflowMenu.razor.rz.scp.css */
.vs-menu[b-3ylz5wp313] {
    position: relative;
    flex: none;
}

.vs-menu-toggle[b-3ylz5wp313] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 25%, transparent);
    background: color-mix(in srgb, var(--color-gray-900) 60%, transparent);
    color: var(--color-text-light);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

    .vs-menu-toggle:hover[b-3ylz5wp313] {
        border-color: var(--color-border-active);
        background: color-mix(in srgb, var(--color-gray-800) 80%, transparent);
    }

    .vs-menu-toggle:focus-visible[b-3ylz5wp313],
    .vs-menu-item:focus-visible[b-3ylz5wp313] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

.vs-menu-toggle-ico[b-3ylz5wp313] {
    display: inline-flex;
    font-size: 22px;
}

.vs-menu-scrim[b-3ylz5wp313] {
    position: fixed;
    inset: 0;
    z-index: 1;
}

.vs-menu-list[b-3ylz5wp313] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 2;
    min-width: 240px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border-hover);
    background: var(--color-gray-900);
    box-shadow: var(--shadow-md);
}

.vs-menu-item[b-3ylz5wp313] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--font-size-base);
    text-align: left;
    cursor: pointer;
}

    .vs-menu-item:hover[b-3ylz5wp313] {
        background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    }

    .vs-menu-item:disabled[b-3ylz5wp313] {
        opacity: 0.5;
        cursor: progress;
    }

.vs-menu-item-ico[b-3ylz5wp313] {
    display: inline-flex;
    font-size: 19px;
    color: var(--color-text-secondary);
}

.vs-menu-item-text[b-3ylz5wp313] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vs-menu-item-sub[b-3ylz5wp313] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
/* /Components/Combat/Victory/VictoryPartyMemberCard.razor.rz.scp.css */
/* Desktop: a portrait column. Tablet (1024 and below): a horizontal row card. */
.vs-member[b-p3vzitn8kl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 16px;
    border-radius: var(--radius-2xl);
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 20%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--vs-accent) 16%, var(--color-gray-900)) 0%, var(--color-gray-900) 30%, color-mix(in srgb, var(--color-gray-900) 85%, var(--color-bg-base)) 100%);
    animation: vs-member-rise-b-p3vzitn8kl 520ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--vs-delay, 520ms) both;
}

.vs-member.is-fled[b-p3vzitn8kl] {
    background: color-mix(in srgb, var(--color-gray-900) 85%, var(--color-bg-base));
}

.vs-member-head[b-p3vzitn8kl] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.vs-member-id[b-p3vzitn8kl] {
    min-width: 0;
}

.vs-member-name[b-p3vzitn8kl] {
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 17px;
    overflow-wrap: anywhere;
}

.vs-member-class[b-p3vzitn8kl] {
    color: color-mix(in srgb, var(--vs-accent) 55%, var(--color-text-primary));
    font-size: var(--font-size-sm);
}

.vs-member-body[b-p3vzitn8kl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.vs-member-vitals[b-p3vzitn8kl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-secondary) 16%, transparent);
}

.vs-member-xp-amount[b-p3vzitn8kl] {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
}

.vs-member-xp-none[b-p3vzitn8kl] {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-style: italic;
}

.vs-member-section[b-p3vzitn8kl] {
    margin: 0 0 6px;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vs-member-loot-list[b-p3vzitn8kl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-member-loot-none[b-p3vzitn8kl] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.vs-member-ready[b-p3vzitn8kl] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
}

    .vs-member-ready.is-ready[b-p3vzitn8kl] {
        color: var(--color-success-light);
    }

    .vs-member-ready.is-away[b-p3vzitn8kl] {
        color: var(--color-text-tertiary);
        font-weight: var(--font-weight-normal);
    }

.vs-member-ready-ico[b-p3vzitn8kl] {
    display: inline-flex;
    font-size: 18px;
}

.vs-member-ready--foot[b-p3vzitn8kl] {
    margin-top: auto;
}

.vs-member-ready--inline[b-p3vzitn8kl] {
    display: none;
    margin-left: auto;
}

@keyframes vs-member-rise-b-p3vzitn8kl {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

@media (max-width: 1024px) {
    .vs-member[b-p3vzitn8kl] {
        padding: 10px 16px;
        gap: 7px;
        background: linear-gradient(90deg, color-mix(in srgb, var(--vs-accent) 14%, var(--color-gray-900)) 0%, var(--color-gray-900) 40%, color-mix(in srgb, var(--color-gray-900) 85%, var(--color-bg-base)) 100%);
    }

    .vs-member-body[b-p3vzitn8kl] {
        display: grid;
        grid-template-columns: minmax(0, 170px) minmax(0, 130px) minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }

    .vs-member-vitals[b-p3vzitn8kl] {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .vs-member-xp-amount[b-p3vzitn8kl] {
        font-size: 17px;
    }

    .vs-member-ready--inline[b-p3vzitn8kl] {
        display: flex;
    }

    .vs-member-ready--foot[b-p3vzitn8kl] {
        display: none;
    }
}

@media (max-width: 480px) {
    .vs-member-body[b-p3vzitn8kl] {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vs-member[b-p3vzitn8kl] {
        animation: none;
    }
}
/* /Components/Combat/Victory/VictoryRewardsBand.razor.rz.scp.css */
.vs-band[b-yhwm8vh8kg] {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 16px 24px;
    border-radius: var(--radius-3xl);
    border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-gray-800) 70%, var(--color-bg-base)), color-mix(in srgb, var(--color-gray-900) 94%, transparent));
    box-shadow: 0 18px 50px color-mix(in srgb, var(--color-bg-base) 80%, transparent);
    animation: vs-band-rise-b-yhwm8vh8kg 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 360ms both;
}

.vs-band.has-level-up[b-yhwm8vh8kg] {
    grid-template-columns: 170px minmax(0, 1fr) minmax(0, 290px);
}

.vs-band-hero[b-yhwm8vh8kg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    text-align: center;
}

.vs-band-name[b-yhwm8vh8kg] {
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 15px;
}

.vs-band-class[b-yhwm8vh8kg] {
    margin-top: -4px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.vs-band-xp[b-yhwm8vh8kg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.vs-band-xp-head[b-yhwm8vh8kg] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.vs-band-xp-amount[b-yhwm8vh8kg] {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    line-height: 1;
}

.vs-band-xp-parts[b-yhwm8vh8kg] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

    .vs-band-xp-parts .is-bonus[b-yhwm8vh8kg] {
        color: var(--color-primary-light);
    }

.vs-band-sep[b-yhwm8vh8kg] {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

@keyframes vs-band-rise-b-yhwm8vh8kg {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

@media (max-width: 1024px) {
    .vs-band[b-yhwm8vh8kg] {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 22px;
        padding: 14px 20px;
    }

    .vs-band.has-level-up[b-yhwm8vh8kg] {
        grid-template-columns: 120px minmax(0, 1fr) minmax(0, 246px);
    }
}

@media (max-width: 960px) {
    .vs-band.has-level-up[b-yhwm8vh8kg] {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .vs-band-levelup[b-yhwm8vh8kg] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .vs-band[b-yhwm8vh8kg],
    .vs-band.has-level-up[b-yhwm8vh8kg] {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .vs-band-hero[b-yhwm8vh8kg] {
        flex-direction: row;
        text-align: left;
        gap: 12px;
    }

    .vs-band-class[b-yhwm8vh8kg] {
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vs-band[b-yhwm8vh8kg] {
        animation: none;
    }
}
/* /Components/Combat/Victory/VictoryScreen.razor.rz.scp.css */
/* ==========================================================================
   Triumph victory screen: a full-screen layer over the battlefield.
   Below the Try-Your-New-Gear modal (z 10000) so that modal opens on top.
   ========================================================================== */

.vs-screen[b-7l9wvt4log] {
    position: fixed;
    inset: 0;
    z-index: 9998;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
        radial-gradient(ellipse 58% 46% at 50% 14%, color-mix(in srgb, var(--color-primary) 17%, transparent), transparent 72%),
        radial-gradient(ellipse 120% 90% at 50% 50%, color-mix(in srgb, var(--color-bg-base) 92%, var(--color-gray-800)) 0%, color-mix(in srgb, var(--color-bg-base) 55%, black) 100%);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    animation: vs-screen-in-b-7l9wvt4log 280ms ease-out both;
}

    .vs-screen:focus[b-7l9wvt4log] {
        outline: none;
    }

.vs-screen.vs-kind-complete[b-7l9wvt4log] {
    background:
        radial-gradient(ellipse 70% 52% at 50% 14%, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 72%),
        radial-gradient(ellipse 120% 90% at 50% 50%, color-mix(in srgb, var(--color-bg-base) 85%, var(--color-gray-800)) 0%, color-mix(in srgb, var(--color-bg-base) 55%, black) 100%);
}

.vs-screen.is-spectator[b-7l9wvt4log] {
    background: radial-gradient(ellipse 120% 90% at 50% 40%, color-mix(in srgb, var(--color-bg-base) 92%, var(--color-gray-800)) 0%, color-mix(in srgb, var(--color-bg-base) 55%, black) 100%);
}

/* Slowly turning sunburst behind the title. Decorative only. */
/* Off-screen but focusable: they only bounce Tab back into the dialog. */
.vs-focus-sentinel[b-7l9wvt4log] {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.vs-backdrop[b-7l9wvt4log] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.vs-rays[b-7l9wvt4log] {
    position: absolute;
    left: 50%;
    top: -560px;
    width: 1400px;
    height: 1400px;
    margin-left: -700px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--color-primary) 9%, transparent) 0deg 5deg, transparent 5deg 15deg);
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 46%);
    mask-image: radial-gradient(circle, black 0%, transparent 46%);
    animation: vs-rays-b-7l9wvt4log 90s linear infinite;
}

.vs-stage[b-7l9wvt4log] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 32px 0;
}

.vs-topbar[b-7l9wvt4log] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* ---- Section titles: tracked gold caps between two hairlines ------------- */

.vs-section[b-7l9wvt4log] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.vs-section-title[b-7l9wvt4log] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

    .vs-section-title[b-7l9wvt4log]::before,
    .vs-section-title[b-7l9wvt4log]::after {
        content: "";
        width: 110px;
        height: 1px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 60%, transparent));
    }

    .vs-section-title[b-7l9wvt4log]::after {
        background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 60%, transparent), transparent);
    }

.vs-subhead[b-7l9wvt4log] {
    align-self: stretch;
    margin: 4px 0 0;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vs-empty[b-7l9wvt4log] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

/* ---- Single-player spoils row --------------------------------------------- */

.vs-spoils-row[b-7l9wvt4log] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.vs-spoils-slot[b-7l9wvt4log] {
    flex: 0 1 212px;
    min-width: 0;
    min-height: 178px;
}

    .vs-spoils-slot.is-coin[b-7l9wvt4log] {
        flex-basis: 160px;
    }

.vs-coin[b-7l9wvt4log] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 14px;
    border-radius: var(--radius-2xl);
    border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-gray-900)) 0%, var(--color-gray-900) 60%);
    text-align: center;
    animation: vs-screen-deal-b-7l9wvt4log 520ms cubic-bezier(0.2, 0.9, 0.3, 1) var(--vs-delay, 900ms) both;
}

.vs-coin-ico[b-7l9wvt4log] {
    display: inline-flex;
    font-size: 38px;
    color: var(--color-primary);
}

.vs-coin-amount[b-7l9wvt4log] {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
}

.vs-coin-label[b-7l9wvt4log] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.vs-companion-line[b-7l9wvt4log] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: -8px 0 0;
    color: var(--color-text-light);
    font-size: 13px;
}

.vs-companion-ico[b-7l9wvt4log] {
    display: inline-flex;
    font-size: 17px;
    color: var(--color-warning-bright);
}

/* ---- Adventure complete: hero | relics | honors ---------------------------- */

.vs-complete[b-7l9wvt4log] {
    display: grid;
    grid-template-columns: minmax(0, 288px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

    .vs-complete.has-honors[b-7l9wvt4log] {
        grid-template-columns: minmax(0, 288px) minmax(0, 1fr) minmax(0, 288px);
    }

.vs-complete-rewards[b-7l9wvt4log] {
    align-items: stretch;
}

    .vs-complete-rewards .vs-section-title[b-7l9wvt4log] {
        align-self: center;
    }

.vs-relics-row[b-7l9wvt4log] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    width: 100%;
}

.vs-rows[b-7l9wvt4log] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    width: 100%;
}

/* ---- Multiplayer lineup: you, then the party ------------------------------ */

.vs-lineup[b-7l9wvt4log] {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.vs-party[b-7l9wvt4log] {
    display: grid;
    grid-template-columns: repeat(var(--vs-party-count, 3), minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
}

/* ---- Footer: always reachable. Sticky, so on a short screen (a laptop at 768
   high, a tablet, a phone) the one next action never scrolls out of view; it keeps
   its own place in the flow, so scrolling to the end uncovers everything. ---------- */

.vs-footer[b-7l9wvt4log] {
    position: sticky;
    bottom: 0;
    z-index: 0;
    margin-top: auto;
    padding: 14px 0 18px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-bg-base) 92%, transparent) 30%);
}

/* ---- Reveal control --------------------------------------------------------
   Every staged element animates from hidden to its natural state, so turning
   the animation off (skip, or reduced motion) shows the finished screen. */

.vs-screen.is-revealed[b-7l9wvt4log]  .vs-reveal,
.vs-screen.is-revealed .vs-reveal[b-7l9wvt4log] {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .vs-screen[b-7l9wvt4log],
    .vs-screen[b-7l9wvt4log]  .vs-reveal,
    .vs-screen[b-7l9wvt4log]  .vs-ambient,
    .vs-coin[b-7l9wvt4log] {
        animation: none !important;
    }

    .vs-rays[b-7l9wvt4log] {
        display: none;
    }
}

@keyframes vs-screen-in-b-7l9wvt4log {
    from {
        opacity: 0;
    }
}

@keyframes vs-screen-deal-b-7l9wvt4log {
    from {
        opacity: 0;
        transform: translateY(18px) rotate(-2deg) scale(0.96);
    }
}

@keyframes vs-rays-b-7l9wvt4log {
    to {
        transform: rotate(360deg);
    }
}

/* ---- Tablet (1024) ------------------------------------------------------------ */

@media (max-width: 1024px) {
    .vs-stage[b-7l9wvt4log] {
        gap: 18px;
        padding: 16px 24px 0;
    }

    .vs-lineup[b-7l9wvt4log] {
        grid-template-columns: minmax(0, 388px) minmax(0, 1fr);
    }

    .vs-party[b-7l9wvt4log] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .vs-complete[b-7l9wvt4log],
    .vs-complete.has-honors[b-7l9wvt4log] {
        grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    }

    .vs-complete-honors[b-7l9wvt4log] {
        grid-column: 1 / -1;
    }

    .vs-spoils-slot[b-7l9wvt4log] {
        flex-basis: 200px;
        min-height: 170px;
    }

        .vs-spoils-slot.is-coin[b-7l9wvt4log] {
            flex-basis: 136px;
        }
}

@media (max-width: 960px) {
    .vs-lineup[b-7l9wvt4log] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Phones (768 / 480) ------------------------------------------------------- */

@media (max-width: 768px) {
    .vs-stage[b-7l9wvt4log] {
        gap: 16px;
        padding: 14px 16px 0;
    }

    .vs-complete[b-7l9wvt4log],
    .vs-complete.has-honors[b-7l9wvt4log] {
        grid-template-columns: minmax(0, 1fr);
    }

    .vs-spoils-row[b-7l9wvt4log] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .vs-spoils-slot[b-7l9wvt4log],
    .vs-spoils-slot.is-coin[b-7l9wvt4log] {
        min-height: 0;
    }

    .vs-section-title[b-7l9wvt4log]::before,
    .vs-section-title[b-7l9wvt4log]::after {
        width: 48px;
    }

    .vs-rays[b-7l9wvt4log] {
        top: -700px;
    }

}

@media (max-width: 480px) {
    .vs-spoils-row[b-7l9wvt4log] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Combat/Victory/VictoryTagList.razor.rz.scp.css */
.vs-tags[b-cp4qkd1pfo] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vs-tag[b-cp4qkd1pfo] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--vs-tag-border, var(--color-border-subtle));
    background: var(--vs-tag-bg, transparent);
    color: var(--vs-tag-ink, var(--color-text-light));
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
}

.vs-tag-ico[b-cp4qkd1pfo] {
    display: inline-flex;
    font-size: 14px;
}

.vs-tag--neutral[b-cp4qkd1pfo] {
    --vs-tag-ink: var(--color-text-light);
    --vs-tag-bg: color-mix(in srgb, var(--color-text-secondary) 12%, transparent);
    --vs-tag-border: color-mix(in srgb, var(--color-text-secondary) 32%, transparent);
}

.vs-tag--gold[b-cp4qkd1pfo] {
    --vs-tag-ink: var(--color-warning-bright);
    --vs-tag-bg: color-mix(in srgb, var(--color-warning) 12%, transparent);
    --vs-tag-border: color-mix(in srgb, var(--color-warning) 40%, transparent);
}

.vs-tag--success[b-cp4qkd1pfo] {
    --vs-tag-ink: var(--color-success-light);
    --vs-tag-bg: color-mix(in srgb, var(--color-success) 14%, transparent);
    --vs-tag-border: color-mix(in srgb, var(--color-success) 40%, transparent);
}

.vs-tag--danger[b-cp4qkd1pfo] {
    --vs-tag-ink: var(--color-danger-light);
    --vs-tag-bg: color-mix(in srgb, var(--color-danger) 12%, transparent);
    --vs-tag-border: color-mix(in srgb, var(--color-danger) 40%, transparent);
}

.vs-tag--info[b-cp4qkd1pfo] {
    --vs-tag-ink: var(--color-info-lightest);
    --vs-tag-bg: color-mix(in srgb, var(--color-rogue) 18%, transparent);
    --vs-tag-border: color-mix(in srgb, var(--color-rogue-light) 45%, transparent);
}

/* Solid pill for the one state that matters most on a card (Revived). Dark ink on a light fill. */
.vs-tag.is-solid[b-cp4qkd1pfo] {
    color: var(--color-bg-base);
    background: var(--vs-tag-ink);
    border-color: transparent;
}
/* /Components/Combat/Victory/VictoryTrail.razor.rz.scp.css */
.vs-trail[b-k4jvvcnq22] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    min-width: 0;
}

.vs-trail-name[b-k4jvvcnq22] {
    color: var(--color-text-light);
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    letter-spacing: 0.06em;
}

.vs-trail-pips[b-k4jvvcnq22] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-pip[b-k4jvvcnq22] {
    width: 13px;
    height: 15px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--color-gray-700);
}

.vs-pip--cleared[b-k4jvvcnq22] {
    background: var(--color-primary-dark);
}

.vs-pip--just[b-k4jvvcnq22] {
    background: var(--color-primary);
}

.vs-trail-label[b-k4jvvcnq22] {
    color: var(--color-text-secondary);
    font-size: 13px;
}

@media (max-width: 480px) {
    .vs-trail-name[b-k4jvvcnq22] {
        flex-basis: 100%;
    }
}
/* /Components/Combat/Victory/VictoryXpBar.razor.rz.scp.css */
.vs-xp[b-of0zo67cxj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.vs-xp-row[b-of0zo67cxj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vs-xp-level[b-of0zo67cxj] {
    flex: none;
    width: 3.2em;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.vs-xp-track[b-of0zo67cxj] {
    position: relative;
    flex: 1;
    height: 16px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-gray-850);
}

.vs-xp.is-compact .vs-xp-track[b-of0zo67cxj] {
    height: 10px;
    border-radius: 5px;
}

.vs-xp-before[b-of0zo67cxj] {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(180deg, var(--color-primary-darker), color-mix(in srgb, var(--color-primary-darker) 75%, var(--color-bg-base)));
}

.vs-xp-gain[b-of0zo67cxj] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 55%, var(--color-primary-dark));
    box-shadow: var(--shadow-gold);
    transform-origin: left center;
    animation: vs-xp-fill-b-of0zo67cxj 900ms cubic-bezier(0.25, 0.8, 0.3, 1) 650ms both;
}

.vs-xp-sheen[b-of0zo67cxj] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 22%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-text-primary) 55%, transparent), transparent);
    animation: vs-xp-sheen-b-of0zo67cxj 2.6s ease-in-out 1.6s infinite;
    opacity: 0;
}

/* The next level's hex badge lights up once the bar has filled. */
.vs-xp-badge[b-of0zo67cxj] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 34px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--color-primary);
    color: var(--color-bg-base);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: var(--font-size-sm);
    animation: vs-xp-badge-b-of0zo67cxj 420ms cubic-bezier(0.2, 1.4, 0.4, 1) 1500ms both;
}

.vs-xp-caption[b-of0zo67cxj] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.vs-xp:not(.is-compact) .vs-xp-caption[b-of0zo67cxj] {
    padding-left: calc(3.2em + 10px);
}

.vs-xp.is-level-up:not(.is-compact) .vs-xp-caption[b-of0zo67cxj] {
    padding-right: 40px;
}

.vs-xp-caption-main[b-of0zo67cxj] {
    margin-left: auto;
}

.vs-xp-legend[b-of0zo67cxj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vs-xp-swatch[b-of0zo67cxj] {
    width: 10px;
    height: 8px;
    border-radius: 2px;
}

    .vs-xp-swatch.is-before[b-of0zo67cxj] {
        background: var(--color-primary-darker);
    }

    .vs-xp-swatch.is-gain[b-of0zo67cxj] {
        background: var(--color-primary);
    }

@keyframes vs-xp-fill-b-of0zo67cxj {
    from {
        transform: scaleX(0);
    }
}

@keyframes vs-xp-badge-b-of0zo67cxj {
    from {
        transform: scale(0.4);
        opacity: 0;
    }
}

@keyframes vs-xp-sheen-b-of0zo67cxj {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateX(520%);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vs-xp-gain[b-of0zo67cxj],
    .vs-xp-badge[b-of0zo67cxj],
    .vs-xp-sheen[b-of0zo67cxj] {
        animation: none;
    }
}
/* /Components/Combat/Victory/VictoryYouCard.razor.rz.scp.css */
.vs-you[b-7xg0dqdozc] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
    padding: 16px 18px;
    border-radius: var(--radius-3xl);
    border: 1.5px solid var(--color-primary);
    background: linear-gradient(180deg, color-mix(in srgb, var(--vs-accent) 20%, var(--color-gray-900)) 0%, var(--color-gray-900) 34%, color-mix(in srgb, var(--color-gray-900) 85%, var(--color-bg-base)) 100%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 10%, transparent), 0 20px 50px color-mix(in srgb, var(--color-bg-base) 80%, transparent);
    animation: vs-you-rise-b-7xg0dqdozc 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 360ms both;
}

.vs-you.is-summary[b-7xg0dqdozc] {
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    box-shadow: none;
}

.vs-you.is-fled[b-7xg0dqdozc] {
    border-color: color-mix(in srgb, var(--color-text-secondary) 50%, transparent);
    box-shadow: none;
}

.vs-you-badge[b-7xg0dqdozc] {
    position: absolute;
    top: -11px;
    left: 18px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-bg-base);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vs-you.is-fled .vs-you-badge[b-7xg0dqdozc] {
    background: var(--color-text-light);
}

.vs-you-head[b-7xg0dqdozc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vs-you-id[b-7xg0dqdozc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vs-you-name[b-7xg0dqdozc] {
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 21px;
    overflow-wrap: anywhere;
}

.vs-you-class[b-7xg0dqdozc] {
    color: color-mix(in srgb, var(--vs-accent) 55%, var(--color-text-primary));
    font-size: var(--font-size-sm);
}

.vs-you-vitals[b-7xg0dqdozc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vs-you-rule[b-7xg0dqdozc] {
    height: 1px;
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.vs-you-xp[b-7xg0dqdozc] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.vs-you-xp-amount[b-7xg0dqdozc] {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 30px;
    line-height: 1;
}

.vs-you.is-summary .vs-you-xp-amount[b-7xg0dqdozc] {
    font-size: 36px;
}

/* A recovered victory: the rewards were granted but aren't listed, so the line is quieter than "+N XP". */
.vs-you-xp-amount.is-unlisted[b-7xg0dqdozc] {
    color: var(--color-text-light);
    font-size: 20px;
}

.vs-you-coin[b-7xg0dqdozc] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: 18px;
}

.vs-you-coin-ico[b-7xg0dqdozc] {
    display: inline-flex;
    font-size: 19px;
}

.vs-you-parts[b-7xg0dqdozc] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    font-size: 13px;
}

.vs-you-part[b-7xg0dqdozc] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    .vs-you-part dt[b-7xg0dqdozc] {
        color: var(--color-text-secondary);
    }

    .vs-you-part dd[b-7xg0dqdozc] {
        margin: 0;
        color: var(--color-text-primary);
        font-variant-numeric: tabular-nums;
    }

        .vs-you-part dd.is-bonus[b-7xg0dqdozc] {
            color: var(--color-primary);
            font-weight: var(--font-weight-semibold);
        }

.vs-you-purse[b-7xg0dqdozc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vs-you-purse-ico[b-7xg0dqdozc] {
    display: inline-flex;
    font-size: 30px;
    color: var(--color-primary);
}

.vs-you-purse-amount[b-7xg0dqdozc] {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
}

.vs-you-purse-detail[b-7xg0dqdozc] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.vs-you-section[b-7xg0dqdozc] {
    margin: 2px 0 0;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vs-you-loot[b-7xg0dqdozc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vs-you-empty[b-7xg0dqdozc] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.vs-you-companion[b-7xg0dqdozc] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--color-text-light);
    font-size: 13px;
}

.vs-you-companion-ico[b-7xg0dqdozc] {
    display: inline-flex;
    font-size: 17px;
    color: var(--color-warning-bright);
}

.vs-you-nothing[b-7xg0dqdozc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    font-size: 13px;
}

.vs-you-nothing-row[b-7xg0dqdozc] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    .vs-you-nothing-row dt[b-7xg0dqdozc] {
        color: var(--color-text-secondary);
    }

    .vs-you-nothing-row dd[b-7xg0dqdozc] {
        margin: 0;
        color: var(--color-text-secondary);
        font-style: italic;
    }

@keyframes vs-you-rise-b-7xg0dqdozc {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vs-you[b-7xg0dqdozc] {
        animation: none;
    }
}
/* /Components/Combat/ZoneBattlefieldCanvas.razor.rz.scp.css */
/* ==========================================================================
   ZoneBattlefieldCanvas — board wrapper, SVG board, HTML overlay, VFX canvas
   Desktop-only (mobile/tablet remain on ZoneBattlefieldVertical).
   ========================================================================== */

/* ---------- Board outer wrapper ---------- */

.board-canvas-wrapper[b-v3rykgefk7] {
    position: relative;
    width: 100%;
    /* Maintain SVG viewBox aspect ratio 800:450 */
    aspect-ratio: 800 / 450;
    border-radius: 12px;
    overflow: hidden;
    /* Dark fantasy texture: diagonal crosshatch over a deep purple/red dungeon gradient */
    background:
        radial-gradient(ellipse 60% 80% at 22% 50%, rgba(30, 50, 120, 0.18) 0%, transparent 65%),
        radial-gradient(ellipse 60% 80% at 78% 50%, rgba(120, 20,  20,  0.18) 0%, transparent 65%),
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.012) 0px,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px,
            transparent 12px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.012) 0px,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px,
            transparent 12px
        ),
        linear-gradient(160deg, #1c1826 0%, #16121e 40%, #1a1014 60%, #1c1218 100%);
    border: 1px solid rgba(100, 116, 139, 0.22);
    box-shadow:
        0 0 0 1px rgba(100, 116, 139, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 32px rgba(0, 0, 0, 0.6);
}

/* ---------- SVG board layer ---------- */

.board-svg[b-v3rykgefk7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* all interaction via HTML overlay */
}

/* ---- Frontline rift divider ---- */

.frontline-rift[b-v3rykgefk7] {
    stroke: rgba(239, 68, 68, 0.30);
    stroke-width: 2;
    stroke-dasharray: 8 6;
}

/* ---- Cross-frontline connector (Vanguard <-> Vanguard) ---- */

.frontline-connector[b-v3rykgefk7] {
    stroke: rgba(100, 116, 139, 0.25);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke 0.3s, stroke-width 0.3s;
}

.frontline-connector.charge-available[b-v3rykgefk7] {
    stroke: rgba(251, 146, 60, 0.80);
    stroke-width: 4;
    animation: connectorPulse-b-v3rykgefk7 1.4s ease-in-out infinite;
}

@keyframes connectorPulse-b-v3rykgefk7 {
    0%, 100% { stroke-opacity: 0.80; }
    50%       { stroke-opacity: 1; }
}

/* ---- Side labels in SVG ---- */

.side-label[b-v3rykgefk7] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.85;
}

.player-side-label[b-v3rykgefk7] { fill: rgba(147, 197, 253, 1.0); }
.enemy-side-label[b-v3rykgefk7]  { fill: rgba(252, 165, 165, 1.0); }

/* ---- Zone polygon base styles ---- */

.zone-poly[b-v3rykgefk7] {
    fill: rgba(22, 30, 46, 0.82);
    stroke: rgba(100, 116, 139, 0.35);
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: fill 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}

.zone-poly.player-zone[b-v3rykgefk7] {
    fill: rgba(17, 30, 64, 0.80);
    stroke: rgba(59, 130, 246, 0.40);
}

.zone-poly.enemy-zone[b-v3rykgefk7] {
    fill: rgba(44, 14, 14, 0.80);
    stroke: rgba(239, 68, 68, 0.40);
}

/* Zone type tints */
.zone-poly.zone-vanguard.player-zone[b-v3rykgefk7] { fill: rgba(22, 38, 80, 0.85); }
.zone-poly.zone-vanguard.enemy-zone[b-v3rykgefk7]  { fill: rgba(58, 16, 16, 0.85); }
.zone-poly.zone-rear.player-zone[b-v3rykgefk7]     { fill: rgba(13, 24, 56, 0.75); }
.zone-poly.zone-rear.enemy-zone[b-v3rykgefk7]      { fill: rgba(34, 10, 10, 0.75); }

/* ---- Zone states ---- */

.zone-poly.zone-current[b-v3rykgefk7] {
    fill: rgba(29, 58, 138, 0.90);
    stroke: rgba(96, 165, 250, 0.95);
    stroke-width: 2.5;
    filter: url(#zone-glow);
}

.zone-poly.zone-available[b-v3rykgefk7] {
    fill: rgba(20, 48, 110, 0.85);
    stroke: rgba(96, 165, 250, 0.80);
    stroke-width: 2;
    filter: url(#zone-glow);
    animation: zoneAvailablePulse-b-v3rykgefk7 1.8s ease-in-out infinite;
}

@keyframes zoneAvailablePulse-b-v3rykgefk7 {
    0%, 100% { stroke-opacity: 0.80; }
    50%       { stroke-opacity: 1; fill: rgba(25, 55, 130, 0.92); }
}

.zone-poly.zone-pending[b-v3rykgefk7] {
    fill: rgba(16, 70, 38, 0.88);
    stroke: rgba(74, 222, 128, 0.95);
    stroke-width: 2.5;
    filter: url(#zone-glow);
}

.zone-poly.zone-full[b-v3rykgefk7] {
    opacity: 0.70;
    stroke-dasharray: 4 3;
}

/* ---------- HTML overlay layer ---------- */

.board-overlay[b-v3rykgefk7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ---- Zone overlays ---- */

.zone-overlay[b-v3rykgefk7] {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: all;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: default;
    padding: 2px 4px;
    box-sizing: border-box;
}

.zone-overlay.overlay-available[b-v3rykgefk7] {
    cursor: pointer;
}

/* ---- Zone name label ---- */

.zone-overlay-name[b-v3rykgefk7] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 1;
    opacity: 1.0;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8);
}

.zone-overlay-name.player[b-v3rykgefk7] { color: rgba(186, 220, 255, 1.0); }
.zone-overlay-name.enemy[b-v3rykgefk7]  { color: rgba(255, 180, 180, 1.0); }

/* ---- YOU badge ---- */

.zone-you-badge[b-v3rykgefk7] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #fde68a;
    background: rgba(251, 191, 36, 0.20);
    border: 1px solid rgba(251, 191, 36, 0.65);
    border-radius: 3px;
    padding: 1px 4px;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* ---- Token row ---- */

.zone-tokens[b-v3rykgefk7] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

/* ---- Base token ---- */

.token[b-v3rykgefk7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(100, 116, 139, 0.50);
    background: rgba(10, 15, 28, 0.92);
    padding: 0;
    cursor: default;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

.token .material-icons[b-v3rykgefk7] {
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
}

/* Player token */
.token.player-token[b-v3rykgefk7] {
    border-color: rgba(59, 130, 246, 0.80);
    color: rgba(147, 197, 253, 1.0);
}

/* Enemy token */
.token.enemy-token[b-v3rykgefk7] {
    border-color: rgba(239, 68, 68, 0.80);
    color: rgba(252, 165, 165, 1.0);
    cursor: pointer;
}

.token.enemy-token:hover[b-v3rykgefk7] {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.45), 0 0 10px rgba(239, 68, 68, 0.30);
}

/* Selected enemy */
.token.token-selected[b-v3rykgefk7] {
    border-color: var(--color-warning-bright);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.50);
}

/* Active combatant (current turn) */
.token.token-active[b-v3rykgefk7] {
    border-color: var(--color-warning-bright);
    animation: tokenActivePulse-b-v3rykgefk7 1.5s ease-in-out infinite;
}

@keyframes tokenActivePulse-b-v3rykgefk7 {
    0%, 100% { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.50); }
    50%       { box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.70), 0 0 12px rgba(251, 191, 36, 0.35); }
}

/* Defeated token */
.token.token-defeated[b-v3rykgefk7] {
    opacity: 0.28;
    border-color: rgba(100, 116, 139, 0.2);
    cursor: default;
}

.token.token-defeated .material-icons[b-v3rykgefk7] { color: rgba(100, 116, 139, 0.5); }

/* Downed player (P2.3): unconscious but rescuable — distinct red affordance, not the grey of a corpse. */
.token.token-downed[b-v3rykgefk7] {
    opacity: 0.7;
    border-color: rgba(248, 113, 113, 0.55);
    cursor: default;
}

.token.token-downed .material-icons[b-v3rykgefk7] { color: rgba(248, 113, 113, 0.95); }

/* Overflow count */
.token-overflow[b-v3rykgefk7] {
    font-size: 11px;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.85);
    line-height: 1;
    padding: 0 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ---- Hazard pips ---- */

.zone-hazard-pips[b-v3rykgefk7] {
    display: flex;
    gap: 2px;
    justify-content: center;
    pointer-events: all;
}

.hazard-pip[b-v3rykgefk7] {
    font-size: 11px;
    line-height: 1;
}

.hazard-fire[b-v3rykgefk7]    { color: rgba(239, 68,  68,  0.90); }
.hazard-ice[b-v3rykgefk7]     { color: rgba(96,  165, 250, 0.90); }
.hazard-toxic[b-v3rykgefk7]   { color: rgba(163, 230, 53,  0.90); }
.hazard-blessed[b-v3rykgefk7] { color: rgba(74,  222, 128, 0.90); }
.hazard-arcane[b-v3rykgefk7]  { color: rgba(167, 139, 250, 0.90); }
.hazard-rubble[b-v3rykgefk7]  { color: rgba(156, 163, 175, 0.90); }
.hazard-dark[b-v3rykgefk7]    { color: rgba(100,  90, 160, 0.90); }

/* ---- Zone bonus description ---- */

.zone-overlay-bonus[b-v3rykgefk7] {
    font-size: 8px;
    color: rgba(148, 163, 184, 0.75);
    text-align: center;
    line-height: 1;
    pointer-events: none;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ---------- VFX canvas layer ---------- */

.board-vfx-canvas[b-v3rykgefk7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* ---------- Movement controls below the board ---------- */

/* Inherits .zone-movement-controls from combat-responsive.css */
/* /Components/Combat/ZoneBattlefieldHex.razor.rz.scp.css */
/* ==========================================================================
   ZoneBattlefieldHex — pointy-top hex grid board for desktop combat
   Desktop-only (mobile/tablet portrait remain on ZoneBattlefieldVertical).
   TODO: Add BoardSize.Small layout at 32px hex for landscape phone (M4 milestone)
   ========================================================================== */

/* ---------- Adventure waypoint info strip above the board ---------- */

.combat-adventure-info[b-nog2z1p06p] {
    margin-bottom: 10px;
}

/* ---------- Zoom viewport (clips zoomed board, captures wheel) ---------- */

.board-zoom-viewport[b-nog2z1p06p] {
    position: relative;
    width: 100%;
    /* Phase 9 redesign: clamp the board to a reasonable max width so hexes
       don't grow cartoonishly large on 4K+ monitors. Chrome overlays anchor
       to viewport edges, not to the board, so this letterboxing only affects
       the hex grid itself. ResizeObserver in boardSizing.js reads the
       post-clamp container rect, so its measurements stay sensible. */
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* Token geometry (WP12b): a standee is sized from the hex it stands on. boardSizing.js publishes
       --hex-px (the on-screen hex width) and --token-w-px (clamp(30px, 1.05 hex, 72px)) here; the
       fallbacks are the old fixed 42px card on a 44px hex. It also reads the two knobs below to keep
       headroom over the board for the back row: how far the standee rises above its card (WP12e: only the
       intent bubble may, seated on the card's top edge, 18px tall at a ui scale of 1; the nameplates and
       the target mark moved to the ground) and a boss card's size over a regular one. The badges and labels
       on a standee scale with its card by --token-ui-scale (also from boardSizing.js, clamped to stay
       readable). --token-touch-min is the touch tiers' 44px floor on an enemy card (a button), 0 here;
       boardSizing.js reads it too. */
    --token-touch-min: 0px;
    --token-stack-extra: 18px;
    --board-tilt: 42deg; /* the plane's rotateX (the side labels read it; .board-token-layer's counter-tilt mirrors it) */
    --token-boss-scale: 1.24;
    --token-w-unit: var(--token-w-px, 42px);
}

/* The card's size, per anchor, for every part of the standee. An enemy card is a button: on the touch tiers it
   keeps a 44px target (--token-touch-min), and these say so, so its badges and HUD sit on the card that is drawn.
   A boss anchor scales the card by --token-boss-scale. */
.hex-token-anchor[b-nog2z1p06p] {
    --token-w: var(--token-w-unit, 42px);
    --token-h: calc(var(--token-w) * 54 / 42);
    /* The selected target's ground mark (WP12e): the card rises from the hex centre and hides the back half of its own
       hex, so the mark reaches past the card's sides: half as wide as the card plus an arm (and at least 1.32 hex radii,
       0.76 hex), so its back corners stay in view beside the card at every card size (boss, the 30px minimum, the 44px
       touch floor). Its depth is 0.92 of its half-width on the plane (1.4 apothems for a regular card). The ground
       labels hang under its front edge. Every var(--token-w) here resolves on the anchor, a boss's included. */
    --mark-arm: max(6px, calc(var(--hex-px, 44px) * 0.23));
    --mark-half-w: max(calc(var(--hex-px, 44px) * 0.76), calc(var(--token-w) / 2 + var(--mark-arm) + 2px));
    --mark-half-h: calc(var(--mark-half-w) * 0.92);
}

.hex-token-anchor[data-token-side="enemy"][b-nog2z1p06p] {
    --token-w: max(var(--token-touch-min, 0px), var(--token-w-unit, 42px));
    --token-h: max(var(--token-touch-min, 0px), calc(var(--token-w-unit, 42px) * 54 / 42));
}

.hex-token-anchor.boss-token-anchor[b-nog2z1p06p] {
    --token-w: max(var(--token-touch-min, 0px), calc(var(--token-w-unit, 42px) * var(--token-boss-scale, 1.24)));
    --token-h: max(var(--token-touch-min, 0px), calc(var(--token-w-unit, 42px) * var(--token-boss-scale, 1.24) * 54 / 42));
}

.board-zoom-viewport.panning[b-nog2z1p06p] {
    cursor: grabbing;
}

/* ---------- Isometric perspective container ---------- */

.board-iso-container[b-nog2z1p06p] {
    perspective: 1100px;
    perspective-origin: 50% 15%;
    /* boardSizing.js writes --board-w-px / --board-h-px on .board-zoom-viewport
       (which inherits down to here). Falls back to 100% width + auto height if
       the JS hasn't attached yet (initial render flicker is invisible since
       the SVG inside has its own aspect-ratio guard). */
    width: var(--board-w-px, 100%);
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    transition: transform 0.15s ease-out;
    transform-origin: 50% 50%;
    will-change: transform;
}

/* VFX cleanup — Camera-pan layer.
   Owned exclusively by combat/index.js panToHex (via GSAP). Composes with the
   user-controlled scale+pan on the parent .board-iso-container so the two
   transforms never race. Default identity transform; GSAP tweens translate(x,y)
   to center the focused hex within .board-zoom-viewport. No transition here —
   GSAP supplies its own ease for snappy/smooth control. */
.board-camera-pan[b-nog2z1p06p] {
    width: 100%;
    height: 100%;
    transform: translate(0px, 0px);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .board-camera-pan[b-nog2z1p06p] { transition: none !important; }
}

/* Disable transition during active pan for instant visual feedback */
.board-zoom-viewport.panning .board-iso-container[b-nog2z1p06p] {
    transition: none;
}

/* ---------- Zoom controls ---------- */

.board-zoom-controls[b-nog2z1p06p] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 20;
}

.zoom-btn[b-nog2z1p06p] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(100, 90, 70, 0.25);
    background: rgba(20, 18, 14, 0.85);
    color: rgba(200, 190, 170, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
    backdrop-filter: blur(6px);
}

.zoom-btn:hover[b-nog2z1p06p] {
    background: rgba(40, 36, 28, 0.9);
    border-color: rgba(140, 130, 100, 0.4);
}

.zoom-btn .material-icons[b-nog2z1p06p] {
    font-size: 18px;
    pointer-events: none;
}

/* ---------- Board outer wrapper (tilted in 3D) ---------- */

.board-hex-wrapper[b-nog2z1p06p] {
    position: relative;
    width: 100%;
    max-height: 100%;
    border-radius: 14px;
    overflow: hidden;
    transform: rotateX(42deg);
    transform-origin: 50% 50%;
    will-change: transform;
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, color-mix(in srgb, var(--combat-ground-ally-glow) 20%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(80, 40, 20, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(18, 16, 12, 0.0) 40%, rgba(0, 0, 0, 0.5) 100%),
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.006) 0px,
            rgba(255, 255, 255, 0.006) 1px,
            transparent 1px,
            transparent 14px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.006) 0px,
            rgba(255, 255, 255, 0.006) 1px,
            transparent 1px,
            transparent 14px
        ),
        linear-gradient(160deg, #1a1810 0%, #14120c 40%, #161210 60%, #181410 100%);
    border: 1px solid rgba(90, 80, 60, 0.15);
    box-shadow:
        0 0 0 1px rgba(90, 80, 60, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.02),
        inset 0 0 60px rgba(0, 0, 0, 0.35),
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 32px 64px rgba(0, 0, 0, 0.8);
}

/* ---------- SVG hex grid layer ---------- */

.board-hex-svg[b-nog2z1p06p] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ---- Hex cell base ---- */

.hex-cell[b-nog2z1p06p] {
    fill: rgb(34, 32, 28);
    stroke: rgba(100, 90, 70, 0.16);
    stroke-width: 0.6;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
    transition: fill 0.2s ease, stroke 0.2s ease, filter 0.2s ease;
    pointer-events: all;
    cursor: default;
}

/* Side tints */
.hex-cell.player-zone[b-nog2z1p06p] {
    fill: var(--combat-ground-ally);
    stroke: color-mix(in srgb, var(--combat-ground-ally-edge) 12%, transparent);
}
.hex-cell.enemy-zone[b-nog2z1p06p] {
    fill: rgb(50, 34, 24);
    stroke: rgba(140, 90, 50, 0.12);
}

/* Zone-type tints */
.hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: var(--combat-ground-ally-vanguard); }
.hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(58, 38, 26); }
.hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: var(--combat-ground-ally-flank); }
.hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(46, 32, 22); }
.hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: var(--combat-ground-ally-rear); }
.hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(38, 26, 18); }

/* ---- Zone states ---- */

.hex-cell.zone-current[b-nog2z1p06p] {
    fill: var(--combat-ground-ally-current);
    stroke: color-mix(in srgb, var(--combat-ground-ally-current-edge) 50%, transparent);
    stroke-width: 0.9;
    filter: url(#zone-glow);
}

.hex-cell.zone-full[b-nog2z1p06p] {
    opacity: 0.65;
    stroke-dasharray: 3 3;
}

/* ---- Barrier hexes ---- */

.hex-cell.hex-barrier[b-nog2z1p06p] {
    fill: rgb(46, 42, 38);
    stroke: rgba(120, 110, 95, 0.20);
    stroke-width: 0.6;
    animation: barrierPulse-b-nog2z1p06p 3.0s ease-in-out infinite;
    cursor: default;
    pointer-events: none;
}

/* Barrier hex is reachable this turn — make it clickable */
.hex-cell.hex-barrier.hex-movable-free[b-nog2z1p06p] {
    pointer-events: all;
    cursor: pointer;
    animation: hexMovablePulse-b-nog2z1p06p 1.6s ease-in-out infinite;
}

@keyframes barrierPulse-b-nog2z1p06p {
    0%, 100% { fill: rgb(46, 42, 38); stroke-opacity: 0.20; }
    50%       { fill: rgb(54, 50, 44); stroke-opacity: 0.35; }
}

/* ---- Hazard hex overlays ---- */

.hex-cell.hex-hazard[b-nog2z1p06p] { animation: hazardFlicker-b-nog2z1p06p 1.6s ease-in-out infinite; }

.hex-cell.hex-hazard-fire[b-nog2z1p06p]    { fill: rgb(120, 32, 22);   stroke: rgba(255, 100,  40, 0.65); stroke-width: 1.2; }
.hex-cell.hex-hazard-ice[b-nog2z1p06p]     { fill: rgb(22,  55, 110);  stroke: rgba(120, 190, 255, 0.60); stroke-width: 1.2; }
.hex-cell.hex-hazard-toxic[b-nog2z1p06p]   { fill: rgb(44,  80, 14);   stroke: rgba(140, 230,  50, 0.60); stroke-width: 1.2; }
.hex-cell.hex-hazard-blessed[b-nog2z1p06p] { fill: rgb(22,  72, 40);   stroke: rgba(100, 240, 150, 0.55); stroke-width: 1.2; }
.hex-cell.hex-hazard-arcane[b-nog2z1p06p]  { fill: rgb(62,  30, 110);  stroke: rgba(180, 140, 255, 0.60); stroke-width: 1.2; }
.hex-cell.hex-hazard-rubble[b-nog2z1p06p]  { fill: rgb(58,  54, 48);   stroke: rgba(170, 165, 150, 0.45); stroke-width: 1.0; }
.hex-cell.hex-hazard-dark[b-nog2z1p06p]    { fill: rgb(22,  18, 48);   stroke: rgba(90,  70,  160, 0.55); stroke-width: 1.2; }

@keyframes hazardFlicker-b-nog2z1p06p {
    0%, 100% { filter: brightness(0.85); }
    50%       { filter: brightness(1.25); }
}

/* ---- Side-face hazard tinting (elevated hexes glow on walls) ---- */

.hex-side-face.side-hex-hazard-fire[b-nog2z1p06p]    { fill: rgb(100, 22, 14); }
.hex-side-face.side-hex-hazard-ice[b-nog2z1p06p]     { fill: rgb(14, 38, 90);  }
.hex-side-face.side-hex-hazard-toxic[b-nog2z1p06p]   { fill: rgb(32, 60, 10);  }
.hex-side-face.side-hex-hazard-blessed[b-nog2z1p06p] { fill: rgb(14, 54, 30);  }
.hex-side-face.side-hex-hazard-arcane[b-nog2z1p06p]  { fill: rgb(48, 24, 88);  }
.hex-side-face.side-hex-hazard-rubble[b-nog2z1p06p]  { fill: rgb(44, 42, 38);  }
.hex-side-face.side-hex-hazard-dark[b-nog2z1p06p]    { fill: rgb(16, 12, 38);  }

/* ---- Movable hex highlights (shown during player's turn) ---- */

/* Within-zone free reposition: --color-eco-move tint + pulsing stroke. Movement is the Move
   slot, so it wears the Move token (green; a pale sage under the red-green palette), never action amber
   (design-system.css). */
.hex-cell.hex-movable-free[b-nog2z1p06p] {
    fill: color-mix(in srgb, var(--color-eco-move) 20%, black);
    stroke: color-mix(in srgb, var(--color-eco-move) 50%, transparent);
    stroke-width: 0.9;
    animation: hexMovablePulse-b-nog2z1p06p 1.6s ease-in-out infinite;
    cursor: pointer;
}

@keyframes hexMovablePulse-b-nog2z1p06p {
    0%, 100% { stroke-opacity: 0.45; filter: brightness(1.0); }
    50%       { stroke-opacity: 0.80; filter: brightness(1.12); }
}

/* ---- Attackable hex highlight (enemy hexes with in-range targets) ---- */

.hex-cell.hex-attackable[b-nog2z1p06p] {
    stroke: rgba(220, 120, 40, 0.55);
    stroke-width: 1.0;
    filter: url(#zone-glow);
}

/* ---- Out-of-range enemy token ---- */

.token.hex-out-of-range[b-nog2z1p06p] {
    opacity: 0.45;
    filter: grayscale(60%);
}

/* ---- Phase 11.3 valid-target highlight: the base disc's .base-in-range fill (WP12e, Ground state below). It was a
       pulsing glow around the card, which washed over the status rails. ---- */

/* ---- Board side labels (HTML, not tilted with the board) ----
   WP12b: under the plane's front edge, in the box's empty bottom band (the plane is centred in its box and
   --board-tilt deep, so its front edge is at 50% + 50% cos(tilt) of the box). Above the plane they sat in the back
   row's headroom, over the standees' badges. On a short screen the band is clipped and so are they (decorative). */

.board-side-labels[b-nog2z1p06p] {
    position: absolute;
    top: calc(50% + 50% * cos(var(--board-tilt, 42deg)) + 4px);
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    /* Near the middle of each side, clear of the corner controls (the touch tiers' touch buttons and zoom bar). */
    padding: 0 28%;
    box-sizing: border-box;
    z-index: 5;
}

.board-side-label[b-nog2z1p06p] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
}

.board-side-label-player[b-nog2z1p06p] { color: var(--combat-ground-ally-label); }
.board-side-label-enemy[b-nog2z1p06p]  { color: rgba(210, 160, 110, 1.0); }

/* ---------- Token standee layer ---------- */
/* Separate from board-hex-wrapper so preserve-3d can propagate without conflicting with overflow:hidden */

.board-token-layer[b-nog2z1p06p] {
    position: absolute;
    inset: 0;
    transform: rotateX(42deg);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    pointer-events: none;
    /* Counter-rotation shared by every "facing the camera" element on the board
       (token cards, HUD bars, intent badges, status rack). Override at breakpoints
       so a single source of truth keeps everything in sync with the board tilt. */
    --board-counter-tilt: -42deg;
}

/* ---------- HTML overlay layer ---------- */

.board-overlay[b-nog2z1p06p] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-style: preserve-3d;
}

/* ---- Per-hex token anchor — positioned at hex center, stays on the board plane ---- */

.hex-token-anchor[b-nog2z1p06p] {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Slide animation: Blazor patches left/top when position changes */
    transition: left 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                top  0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
    /* Phase A perf: keep the anchor on its own compositor layer so the first
       lunge/recoil/death animation skips the one-frame layer-promotion cost. */
    will-change: transform;
}

/* ---- Token motion animations (lunge / recoil / death) ----
   Applied via JS adding a transient class to the anchor. Each keyframe re-declares
   the static translate(-50%, -50%) so the animation overrides only for its duration.
   WP12b: the sideways travel is a share of the card's width (--token-w; 0.43 = the old 18px on a
   42px card), so a lunge on a small board stays within its hex. */

@keyframes tokenLungePlayer-b-nog2z1p06p {
    0%   { transform: translate(-50%, -50%); }
    35%  { transform: translate(calc(-50% + var(--token-w, 42px) * 0.43), -55%); }
    100% { transform: translate(-50%, -50%); }
}

@keyframes tokenLungeEnemy-b-nog2z1p06p {
    0%   { transform: translate(-50%, -50%); }
    35%  { transform: translate(calc(-50% - var(--token-w, 42px) * 0.43), -55%); }
    100% { transform: translate(-50%, -50%); }
}

@keyframes tokenRecoilPlayer-b-nog2z1p06p {
    0%   { transform: translate(-50%, -50%); }
    25%  { transform: translate(calc(-50% - var(--token-w, 42px) * 0.24), -48%); }
    100% { transform: translate(-50%, -50%); }
}

@keyframes tokenRecoilEnemy-b-nog2z1p06p {
    0%   { transform: translate(-50%, -50%); }
    25%  { transform: translate(calc(-50% + var(--token-w, 42px) * 0.24), -48%); }
    100% { transform: translate(-50%, -50%); }
}

@keyframes tokenRecoilCritPlayer-b-nog2z1p06p {
    0%   { transform: translate(-50%, -50%); }
    20%  { transform: translate(calc(-50% - var(--token-w, 42px) * 0.43), -42%) rotate(-4deg); }
    60%  { transform: translate(calc(-50% - var(--token-w, 42px) * 0.14), -50%) rotate(2deg); }
    100% { transform: translate(-50%, -50%); }
}

@keyframes tokenRecoilCritEnemy-b-nog2z1p06p {
    0%   { transform: translate(-50%, -50%); }
    20%  { transform: translate(calc(-50% + var(--token-w, 42px) * 0.43), -42%) rotate(4deg); }
    60%  { transform: translate(calc(-50% + var(--token-w, 42px) * 0.14), -50%) rotate(-2deg); }
    100% { transform: translate(-50%, -50%); }
}

@keyframes tokenDeathFade-b-nog2z1p06p {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    60%  { transform: translate(-50%, -42%) scale(0.92) rotate(8deg); opacity: 0.6; }
    100% { transform: translate(-50%, -38%) scale(0.78) rotate(14deg); opacity: 0.0; }
}

/* Sidestep: target evades a missed swing. Two-phase: hop away, return. */
@keyframes tokenSidestepPlayer-b-nog2z1p06p {
    0%   { transform: translate(-50%, -50%); }
    30%  { transform: translate(calc(-50% - var(--token-w, 42px) * 0.33), -54%) rotate(-3deg); }
    70%  { transform: translate(calc(-50% + var(--token-w, 42px) * 0.07), -48%) rotate(1deg); }
    100% { transform: translate(-50%, -50%); }
}

@keyframes tokenSidestepEnemy-b-nog2z1p06p {
    0%   { transform: translate(-50%, -50%); }
    30%  { transform: translate(calc(-50% + var(--token-w, 42px) * 0.33), -54%) rotate(3deg); }
    70%  { transform: translate(calc(-50% - var(--token-w, 42px) * 0.07), -48%) rotate(-1deg); }
    100% { transform: translate(-50%, -50%); }
}

/* Buff: gentle upward bob with a slight scale-up, suggesting empowerment. */
@keyframes tokenBuffPulse-b-nog2z1p06p {
    0%   { transform: translate(-50%, -50%) scale(1);    }
    40%  { transform: translate(-50%, -58%) scale(1.06); }
    100% { transform: translate(-50%, -50%) scale(1);    }
}

/* Debuff: heavy downward sag with slight scale-down. */
@keyframes tokenDebuffPulse-b-nog2z1p06p {
    0%   { transform: translate(-50%, -50%) scale(1);    }
    40%  { transform: translate(-50%, -44%) scale(0.94); }
    100% { transform: translate(-50%, -50%) scale(1);    }
}

.hex-token-anchor.token-lunge-player[b-nog2z1p06p]    { animation: tokenLungePlayer-b-nog2z1p06p    340ms ease-out; }
.hex-token-anchor.token-lunge-enemy[b-nog2z1p06p]     { animation: tokenLungeEnemy-b-nog2z1p06p     340ms ease-out; }
.hex-token-anchor.token-recoil-player[b-nog2z1p06p]   { animation: tokenRecoilPlayer-b-nog2z1p06p   280ms ease-out; }
.hex-token-anchor.token-recoil-enemy[b-nog2z1p06p]    { animation: tokenRecoilEnemy-b-nog2z1p06p    280ms ease-out; }
.hex-token-anchor.token-recoil-crit-player[b-nog2z1p06p] { animation: tokenRecoilCritPlayer-b-nog2z1p06p 480ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.hex-token-anchor.token-recoil-crit-enemy[b-nog2z1p06p]  { animation: tokenRecoilCritEnemy-b-nog2z1p06p  480ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.hex-token-anchor.token-death-fade[b-nog2z1p06p]      { animation: tokenDeathFade-b-nog2z1p06p 700ms cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards; }
.hex-token-anchor.token-sidestep-player[b-nog2z1p06p] { animation: tokenSidestepPlayer-b-nog2z1p06p 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.hex-token-anchor.token-sidestep-enemy[b-nog2z1p06p]  { animation: tokenSidestepEnemy-b-nog2z1p06p  360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.hex-token-anchor.token-buff-pulse[b-nog2z1p06p]      { animation: tokenBuffPulse-b-nog2z1p06p      520ms ease-in-out; }
.hex-token-anchor.token-debuff-pulse[b-nog2z1p06p]    { animation: tokenDebuffPulse-b-nog2z1p06p    520ms ease-in-out; }

@media (prefers-reduced-motion: reduce) {
    .hex-token-anchor.token-lunge-player[b-nog2z1p06p],
    .hex-token-anchor.token-lunge-enemy[b-nog2z1p06p],
    .hex-token-anchor.token-recoil-player[b-nog2z1p06p],
    .hex-token-anchor.token-recoil-enemy[b-nog2z1p06p],
    .hex-token-anchor.token-recoil-crit-player[b-nog2z1p06p],
    .hex-token-anchor.token-recoil-crit-enemy[b-nog2z1p06p],
    .hex-token-anchor.token-sidestep-player[b-nog2z1p06p],
    .hex-token-anchor.token-sidestep-enemy[b-nog2z1p06p],
    .hex-token-anchor.token-buff-pulse[b-nog2z1p06p],
    .hex-token-anchor.token-debuff-pulse[b-nog2z1p06p] { animation: none; }
}

/* ---- Base — the standee's footprint, flat on the board surface (no counter-rotation) ----
   WP12b: a disc 0.8 of a hex wide, centred on the hex centre (the anchor point, where the card's foot
   stands), so the token reads as standing IN its hex: a dark contact shadow under the feet, ringed in
   the side's color. It lies in the tilted plane, so it shows as an ellipse; the card covers its back
   half and its front half shows under the feet.

   Ground state language (WP12e): state lies on the ground, identity stays on the card, and nothing spreads
   over the card's status rail. One primitive per state, so any two combine and still read:
     ring     whose turn it is: a solid 3px gold ring (--color-warning-bright), steady; the card's border turns gold too,
              so a token standing behind another (its disc hidden under that card) still shows it
     fill     the weapon can reach it (faint) or an open aim takes it, in the aimed slot's --aim-eco (stronger when
              armed; the footprint fuchsia when the armed action would strike it): a pool in the middle of the disc,
              fading before the rim, so it never reads as the turn ring; a refused target's disc loses its fill
     halo     enemy hover / keyboard focus: a thin outline around the disc
     mark     the selected target: a shape on the ground around the hex (.token-ground-mark, default corner
              brackets), --color-target
   The ring keeps the side's color otherwise, so an aim never hides whose turn it is. */

.token-base[b-nog2z1p06p] {
    --token-base-ring: color-mix(in srgb, var(--color-text-secondary) 55%, transparent);
    --token-base-ring-w: 2px;
    --token-base-tint: none;
    --token-base-halo: 0 0 0 0 transparent;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    width: calc(var(--hex-px, 44px) * 0.8);
    height: calc(var(--hex-px, 44px) * 0.8);
    border-radius: 50%;
    background:
        var(--token-base-tint),
        radial-gradient(closest-side,
            color-mix(in srgb, var(--color-bg-base) 85%, transparent) 0%,
            color-mix(in srgb, var(--color-bg-base) 55%, transparent) 62%,
            color-mix(in srgb, var(--token-base-ring) 30%, transparent) 100%);
    box-shadow: inset 0 0 0 var(--token-base-ring-w) var(--token-base-ring), var(--token-base-halo);
    pointer-events: none;
    z-index: 0;
}

.token-base.base-player[b-nog2z1p06p] {
    --token-base-ring: color-mix(in srgb, var(--combat-ally) 75%, transparent);
}

.token-base.base-enemy[b-nog2z1p06p] {
    --token-base-ring: color-mix(in srgb, var(--combat-enemy) 75%, transparent);
}

/* Whose turn it is: steady (it used to pulse in gold like the target ring, so the two read alike). */
.token-base.base-active[b-nog2z1p06p] {
    --token-base-ring: var(--color-warning-bright);
    --token-base-ring-w: 3px;
}

/* The weapon can reach it this turn (no aim open): a faint pool in the Action slot's color. */
.token-base.base-in-range[b-nog2z1p06p] {
    --token-base-tint: radial-gradient(closest-side,
        color-mix(in srgb, var(--color-eco-action) 30%, transparent) 0%,
        color-mix(in srgb, var(--color-eco-action) 16%, transparent) 62%,
        transparent 86%);
}

/* :has(:focus-visible), not :focus-within: a mouse click focuses the token button, and the halo would stay on it (Chrome
   still turns that focus visible once a key is pressed, so after a hotkey the thin halo can stay until focus moves). */
.hex-token-anchor[data-token-side="enemy"]:hover .token-base[b-nog2z1p06p],
.hex-token-anchor:has(:focus-visible) .token-base[b-nog2z1p06p] {
    --token-base-halo: 0 0 0 1px color-mix(in srgb, var(--color-text-primary) 75%, transparent);
}

.token-base.base-defeated[b-nog2z1p06p] {
    opacity: 0.15;
}

/* The selected target's ground mark (.token-ground-mark): an element on the plane around its hex, rendered only while
   the token is selected, so its one-shot lock-in runs on selection, then holds (never under reduced motion). Its shape
   is a modifier (ZoneBattlefieldHex.TargetMarkClass) drawn by one block under "Ground mark shapes" below; the base rule
   only places and sizes it. */
.token-ground-mark[b-nog2z1p06p] {
    --mark-color: var(--color-target);
    --mark-w: max(2px, calc(var(--hex-px, 44px) * 0.065));
    /* A horizontal stroke on the tilted plane is foreshortened: drawn 1 / cos(tilt) thick, it shows as thick as the
       depth strokes on screen. */
    --mark-h: calc(var(--mark-w) / cos(var(--board-counter-tilt, -42deg)));
    position: absolute;
    left: 0;
    top: 0;
    /* The anchor's --mark-half-w / --mark-half-h: wider than the card, so the back corners show beside it. */
    width: calc(var(--mark-half-w) * 2);
    height: calc(var(--mark-half-h) * 2);
    transform: translate(-50%, -50%) translateZ(1px);
    filter: drop-shadow(0 0 1px color-mix(in srgb, var(--color-bg-base) 90%, transparent));
    pointer-events: none;
    z-index: 0;
    animation: tokenTargetLockIn-b-nog2z1p06p 360ms cubic-bezier(0.2, 0.8, 0.3, 1) 1 both;
}

@keyframes tokenTargetLockIn-b-nog2z1p06p {
    from { opacity: 0; transform: translate(-50%, -50%) translateZ(1px) scale(1.45); }
    to   { opacity: 1; transform: translate(-50%, -50%) translateZ(1px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .token-ground-mark[b-nog2z1p06p] { animation: none; }
}

/* ---- Ground mark shapes (one block per TargetMarkClass modifier) ---- */

/* Corner brackets (the default): four L-shaped corners around the hex, each arm --mark-arm long. The mark reaches
   past the card's sides by an arm (and 2px), so all four corners show beside the card: the back corners' arms end just
   outside its edges. A neighbour's card, standing in the next hex, can still stand in front of a corner. */
.token-ground-mark--brackets[b-nog2z1p06p] {
    --bracket-len: var(--mark-arm);
    background:
        linear-gradient(var(--mark-color), var(--mark-color)) left top / var(--bracket-len) var(--mark-h) no-repeat,
        linear-gradient(var(--mark-color), var(--mark-color)) left top / var(--mark-w) var(--bracket-len) no-repeat,
        linear-gradient(var(--mark-color), var(--mark-color)) right top / var(--bracket-len) var(--mark-h) no-repeat,
        linear-gradient(var(--mark-color), var(--mark-color)) right top / var(--mark-w) var(--bracket-len) no-repeat,
        linear-gradient(var(--mark-color), var(--mark-color)) left bottom / var(--bracket-len) var(--mark-h) no-repeat,
        linear-gradient(var(--mark-color), var(--mark-color)) left bottom / var(--mark-w) var(--bracket-len) no-repeat,
        linear-gradient(var(--mark-color), var(--mark-color)) right bottom / var(--bracket-len) var(--mark-h) no-repeat,
        linear-gradient(var(--mark-color), var(--mark-color)) right bottom / var(--mark-w) var(--bracket-len) no-repeat;
}

/* ---- Card container — counter-rotates to face the viewer ---- */

/* ---- Zone click overlay (for zone-move selection) ---- */

.hex-zone-click-overlay[b-nog2z1p06p] {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: all;
    cursor: pointer;
    border-radius: 4px;
    background: transparent;
}

.hex-zone-click-overlay.overlay-available[b-nog2z1p06p] {
    background: rgba(200, 170, 60, 0.06);
}

/* ---- Card container — counter-rotates to face the viewer ---- */

.token-card[b-nog2z1p06p] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotateX(var(--board-counter-tilt, -42deg));
    transform-origin: 50% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}

.token-card.card-defeated[b-nog2z1p06p] {
    opacity: 0.30;
    z-index: 0;
}

/* ---- Base token — portrait-oriented rounded rect card ---- */

.token[b-nog2z1p06p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--token-w, 42px);
    height: var(--token-h, 54px);
    border-radius: 5px;
    border: 2px solid rgba(100, 116, 139, 0.45);
    background: linear-gradient(180deg, rgba(36, 34, 28, 0.92) 0%, rgba(18, 16, 12, 0.97) 100%);
    padding: 0;
    cursor: default;
    transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
    pointer-events: all;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7),
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.token .material-icons[b-nog2z1p06p] {
    font-size: calc(var(--token-w, 42px) * 0.57);
    line-height: 1;
    pointer-events: none;
}

/* Portrait token — image fills the card */
.token.token-portrait[b-nog2z1p06p] {
    background-size: cover;
    background-position: center 20%;
    background-color: rgba(10, 15, 28, 0.92);
}

/* Player token */
.token.player-token[b-nog2z1p06p] {
    border-color: color-mix(in srgb, var(--combat-ally) 70%, transparent);
    color: var(--combat-ally-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7),
                0 0 12px color-mix(in srgb, var(--combat-ally) 10%, transparent),
                inset 0 1px 0 color-mix(in srgb, var(--combat-ally-light) 10%, transparent),
                inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Enemy token */
.token.enemy-token[b-nog2z1p06p] {
    border-color: color-mix(in srgb, var(--combat-enemy) 70%, transparent);
    color: var(--combat-enemy-lighter);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7),
                0 0 12px color-mix(in srgb, var(--combat-enemy) 10%, transparent),
                inset 0 1px 0 color-mix(in srgb, var(--combat-enemy-lighter) 8%, transparent),
                inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Hover keeps the card's size (WP12e: a scaled card reached into its status rails) and the turn's gold border; the
   base disc gets the halo. */
.token.enemy-token:not(.token-active):hover[b-nog2z1p06p] {
    border-color: color-mix(in srgb, var(--combat-enemy-lighter) 90%, transparent);
}

/* Selected enemy (WP12e): a crisp 1px outline in --color-target; the target mark itself is the corner brackets on
   the ground (.token-ground-mark). The old reticle (a 3px gold + 5px red ring and an 18-26px glow pulsing forever)
   and the "TARGET" ribbon over the card covered the status rail and the intent bubble. While an aim is open the
   aim's own outline (--aim-eco) takes the card and the brackets keep marking the selection. */
.token.token-selected[b-nog2z1p06p] {
    outline: 1px solid var(--color-target);
    outline-offset: 1px;
}

/* Whose turn it is: the card's own border turns gold, steady (the ring on the ground says it too, but a token behind
   another has its disc under that card). It used to pulse a gold glow, which read like the target ring. */
.token.token-active[b-nog2z1p06p] {
    border-color: var(--color-warning-bright);
}

/* Defeated token */
.token.token-defeated[b-nog2z1p06p] {
    opacity: 0.35;
    border-color: rgba(100, 116, 139, 0.2);
    cursor: default;
    filter: grayscale(0.6);
    pointer-events: none;
}

.token.token-defeated .material-icons[b-nog2z1p06p] { color: rgba(100, 116, 139, 0.5); }

/* Downed token (P2.3, multiplayer): unconscious but rescuable — still visibly a player to revive,
   so less faded than a defeated token, with a red heart_broken affordance. */
.token.token-downed[b-nog2z1p06p] {
    opacity: 0.6;
    filter: grayscale(0.7) brightness(0.82);
    border-color: color-mix(in srgb, var(--combat-bad-light) 55%, transparent);
    cursor: default;
    pointer-events: none;
}

.token-downed-icon[b-nog2z1p06p] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--combat-bad-light) 95%, transparent);
    font-size: 22px;
    pointer-events: none;
    animation: tokenDownedPulse-b-nog2z1p06p 1.4s ease-in-out infinite;
}

@keyframes tokenDownedPulse-b-nog2z1p06p {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .token-downed-icon[b-nog2z1p06p] { animation: none; opacity: 0.9; }
}

/* Party identity (2026-10, audit U5 / U11). The local player's token gets a static gold
   outline ring (an outline, so the current-turn box-shadow pulse doesn't override it);
   every player token in a party battle gets a nameplate in its class color
   (class-text + --color-{class} from design-system.css); a Downed token shows the
   rescue rounds left. */
.token.player-token.token-self[b-nog2z1p06p] {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.token-nameplate[b-nog2z1p06p] {
    max-width: 96px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(10, 15, 30, 0.85);
    border: 1px solid color-mix(in srgb, var(--class-color, var(--color-primary)) 55%, transparent);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

.token-nameplate.is-self[b-nog2z1p06p] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg-base);
    text-shadow: none;
}

.token-downed-rounds[b-nog2z1p06p] {
    position: absolute;
    left: 2px;
    /* Top-left corner: the HP bar runs along the card's bottom edge (WP12b) and the status rail holds the top-right
       (WP12e). */
    top: 1px;
    min-width: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--combat-bad-deep) 95%, transparent);
    color: var(--combat-bad-lightest);
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    pointer-events: none;
}

/* The 1024 tier's board is small: nameplates would bury it. */
@media (max-width: 1024px) {
    :where(.tablet-hud) .token-nameplate[b-nog2z1p06p],
    :where(.tablet-hud) .token-downed-rounds[b-nog2z1p06p] { display: none; }
    :where(.tablet-hud) .token.player-token.token-self[b-nog2z1p06p] { outline-width: 1px; outline-offset: 1px; }
}

/* ======================================================
   MOBILE RESPONSIVE — scale tokens and UI for mobile viewports
   ====================================================== */

/* Tablet and mobile portrait (max-width: 1024px) — aggressive scaling. The token card, its icon and
   its base follow the hex they stand on (WP12b, --token-w / --hex-px), so no fixed sizes here. */
@media (max-width: 1024px) {
    /* Scale mini HP bar */
    :where(.tablet-hud) .token-hp-bar[b-nog2z1p06p] {
        width: 11px;
        height: 1px;
    }

    :where(.tablet-hud) .boss-token-anchor .token-hp-bar[b-nog2z1p06p] {
        width: 15px;
    }

}

/* Mobile-only (max-width: 768px) — maximum scaling down */
@media (max-width: 768px) {
    /* Scale mini HP bar */
    :where(.tablet-hud) .token-hp-bar[b-nog2z1p06p] {
        width: 10px;
        height: 1px;
    }

    :where(.tablet-hud) .boss-token-anchor .token-hp-bar[b-nog2z1p06p] {
        width: 12px;
    }

    /* Hide desktop zoom controls on mobile, show only touch controls */
    :where(.tablet-hud) .board-zoom-controls[b-nog2z1p06p] {
        display: none !important;
    }

    :where(.tablet-hud) .board-touch-controls[b-nog2z1p06p] {
        display: flex !important;
        position: absolute;
        bottom: 12px;
        right: 12px;
        flex-direction: column;
        gap: 4px;
        z-index: 20;
    }

    :where(.tablet-hud) .touch-ctrl-btn[b-nog2z1p06p] {
        width: 28px;
        height: 28px;
        border-radius: 5px;
        border: 1px solid rgba(100, 90, 70, 0.25);
        background: rgba(20, 18, 14, 0.85);
        color: rgba(200, 190, 170, 0.85);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: background 0.15s ease, border-color 0.15s ease;
        backdrop-filter: blur(6px);
    }

    :where(.tablet-hud) .touch-ctrl-btn:hover[b-nog2z1p06p] {
        background: rgba(40, 36, 28, 0.9);
        border-color: rgba(140, 130, 100, 0.4);
    }

    :where(.tablet-hud) .touch-ctrl-btn .material-icons[b-nog2z1p06p] {
        font-size: 16px;
        pointer-events: none;
    }
}

/* ---------- VFX canvas layers ---------- */

/* Back layer — child of .board-hex-wrapper. Stacks under the token DOM because
   .board-token-layer is a later sibling of .board-hex-wrapper. Used for
   atmosphere (hazard tiles, ambient biome particles) so characters occlude
   environmental effects. */
.board-vfx-canvas[b-nog2z1p06p] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* Front VFX wrapper — sibling AFTER .board-token-layer with matching rotateX so
   getBoundingClientRect lands at the same tilted AABB as .board-hex-wrapper and
   .board-token-layer. NO preserve-3d here (default transform-style: flat) so the
   child canvas paints as a single 2D layer in document order, stacking cleanly
   above the entire token-layer (no card-top piercing through).

   Keep the THREE rotateX values (.board-hex-wrapper / .board-token-layer / this)
   in sync at every breakpoint — drift will desynchronize VFX placement. */
.board-vfx-front-wrapper[b-nog2z1p06p] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: rotateX(42deg);
    transform-origin: 50% 50%;
    z-index: 1;
}

/* Front canvas itself — fills the tilted wrapper. z-index: 1 on the wrapper above
   keeps both above the auto-stacked token layer; .board-side-labels (z-index: 5)
   still wins above the VFX so YOUR-SIDE / ENEMY-SIDE labels remain readable. */
.board-vfx-canvas-front[b-nog2z1p06p] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ---------- Movement hint below the board ---------- */

/* Inherits .zone-movement-hint from combat-responsive.css */

/* ======================================================
   MINI HP BARS — thin bar flush at bottom of the card
   ====================================================== */

.token-hp-bar[b-nog2z1p06p] {
    width: 38px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: rgba(0, 0, 0, 0.65);
    overflow: hidden;
    pointer-events: none;
    margin-top: -3px;
    z-index: 12;
}

.token-hp-fill[b-nog2z1p06p] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease-out, background-color 0.3s ease;
}

.token-hp-fill.hp-high[b-nog2z1p06p] { background: linear-gradient(90deg, var(--combat-hp-high), var(--combat-hp-high-light)); }
.token-hp-fill.hp-mid[b-nog2z1p06p]  { background: linear-gradient(90deg, var(--combat-hp-mid-yellow), var(--combat-hp-mid-yellow-light)); }
.token-hp-fill.hp-low[b-nog2z1p06p]  { background: linear-gradient(90deg, var(--combat-hp-low-dark), var(--combat-hp-low-light)); }

.token-hp-bar.hp-player[b-nog2z1p06p] { border-left: 1px solid color-mix(in srgb, var(--combat-ally) 25%, transparent); border-right: 1px solid color-mix(in srgb, var(--combat-ally) 25%, transparent); }
.token-hp-bar.hp-enemy[b-nog2z1p06p]  { border-left: 1px solid color-mix(in srgb, var(--combat-enemy) 25%, transparent); border-right: 1px solid color-mix(in srgb, var(--combat-enemy) 25%, transparent); }

/* ======================================================
   PHASE 10 — TOKEN HUD: flat (un-tilted) HP bar + buff/debuff rack
   Sibling of .token-card so the rotateX(-42deg) tilt doesn't skew it.
   ====================================================== */

/* The HUD wrapper mirrors the token card's geometry (same width, same bottom
   anchor, same counter-rotation around the base) so status rack + HP bar
   anchor cleanly off the card's top and bottom edges.

   Transform chain is identical to .token-card EXCEPT for the extra translateZ
   — that lifts us ~10px toward the viewer in the rotated frame so the tilted
   card sprite can't occlude us in the preserve-3d stacking context. Without
   the rotateX(-42deg), children would appear angled (rotated along with the
   tilted scene); with it, they stand upright like the card face.

   Explicit size (the card's --token-w / --token-h, WP12b) keeps the status rack
   and HP bar horizontally centered regardless of the anchor's content box. */
.token-hud[b-nog2z1p06p] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotateX(var(--board-counter-tilt, -42deg)) translateZ(10px);
    transform-origin: 50% 100%;
    width: var(--token-w, 42px);
    height: var(--token-h, 54px);
    pointer-events: none;
    z-index: 25;
}

.token-hud-status-icon[b-nog2z1p06p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    pointer-events: all;
    cursor: help;
    background: rgba(20, 24, 34, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.40);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* ---- Token intent badge — predictive icon above the token card.
   Sibling of .token-card. It stands up AT the anchor (pivot on the plane, like the card) and is lifted by the card's
   height in screen space, so it sits on the card's top edge at any card size and at the card's own depth (WP12e: it
   used to be placed far back along the tilted plane, about 0.9 card heights behind its token, so a token two rows
   behind drew its card's HUD and badges over this bubble). It is the only thing above the card, seated on the top
   edge with a short tail, and tighter than the roster's compact badge (12px icon, 2px padding: 18px tall). Keep its
   height in step with --token-stack-extra. */
.token-intent-badge[b-nog2z1p06p] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotateX(var(--board-counter-tilt, -42deg)) translateY(calc(-1 * var(--token-h, 54px))) translateZ(11px) scale(var(--token-ui-scale, 1));
    transform-origin: 50% 100%;
    pointer-events: auto;
    z-index: 30;
    white-space: nowrap;
}

.token-intent-badge[b-nog2z1p06p]  .enemy-intent-badge.compact {
    padding: 2px 6px;
    gap: 3px;
    font-size: 0.66rem;
}

.token-intent-badge[b-nog2z1p06p]  .enemy-intent-badge.compact .material-icons {
    font-size: 12px;
}

.token-intent-badge[b-nog2z1p06p]::after {
    border-left-width: 4px;
    border-right-width: 4px;
    border-top-width: 4px;
}

/* ---- Status rails (WP12e) -- the token's effects, on its own card.
   TokenStatusRails orders them (control, damage over time, other debuffs, then buffs) and splits them by polarity into
   the harmful rail (.rail-harm, square icons) and the beneficial rail (.rail-boon, round icons), so the kind reads by
   place and shape as well as by color. Both sit inside the card's own edges, not beside it: a card is about a hex wide,
   so the cards of tokens in neighbouring hexes touch and a rail beside one lay on the other's card, its HP bar and its
   click area. Where the rails sit is the arrangement's one block under "Status placement" below (the viewport's
   token-status--* modifier, ZoneBattlefieldHex.StatusPlacement); its capacity is TokenStatusRails.Layout's. Icons are
   sized from the card (--rail-slot), so a rail of two always ends above the HP bar; a side's effects that don't fit are
   a "+N" tag on its last icon. Each icon shows its remaining rounds; an effect in its last round (it lapses at its
   bearer's next turn start) has a dashed rim. The badges hang toward the card's middle, never past its edge.
   The container stands upright AT the anchor (pivot on the plane, so the rails sit at the card's depth), as tall as
   the card, its .token-status-set the card's own box, just in front of its own card, HUD and intent bubble
   (translateZ 14px): nothing of its own token covers them, and no neighbour's glow, ribbon or label does (those are
   gone or on the ground). It stays under one row of depth (about 19px at the smallest full-density card), so a token
   standing in front still hides them the way it hides the card, and that token's intent bubble stays readable.
   Hovering or keyboard-focusing a token brings its rails to the front (70px). While an aim is open the icons let clicks
   through to the card, so an aim click anywhere on the card arms it. On small cards boardSizing.js marks the viewport
   data-token-density="compact": the rails fold into two count chips above the HP bar (on the token HUD: a round green
   "+2" and a square "3" in the leading harmful kind's color), and on a mouse hover they peek out beside the card, in
   front of everything, like a tooltip (inside a small card they would overlap each other and the HP bar). The token's
   hover card and the dock / tablet target rows list the conditions in full. */
.token-status-rails[b-nog2z1p06p] {
    --rail-slot: clamp(14px, calc(var(--token-w, 42px) * 0.32), 22px);
    --rail-gap: 2px;
    --rail-badge: calc(var(--rail-slot) * 0.55);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: var(--token-h, 54px);
    transform: rotateX(var(--board-counter-tilt, -42deg)) translateZ(14px);
    transform-origin: 0 100%;
    pointer-events: none;
    z-index: 28;
}

.hex-token-anchor:has(:focus-visible) .token-status-rails[b-nog2z1p06p] {
    transform: rotateX(var(--board-counter-tilt, -42deg)) translateZ(70px);
}

@media (hover: hover) {
    .hex-token-anchor:hover .token-status-rails[b-nog2z1p06p] {
        transform: rotateX(var(--board-counter-tilt, -42deg)) translateZ(70px);
    }
}

/* The card's own box, which the arrangement places the rails in. */
.token-status-set[b-nog2z1p06p] {
    position: absolute;
    left: calc(var(--token-w, 42px) / -2);
    bottom: 0;
    width: var(--token-w, 42px);
    height: 100%;
    box-sizing: border-box;
    pointer-events: none;
}

.token-status-rail[b-nog2z1p06p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rail-gap);
    padding: 1px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-bg-base) 70%, transparent);
    line-height: 0;
    pointer-events: none;
}

/* Each icon sits in its MudTooltip's root: a flex box, so the root's line box doesn't pad the slot. Only the icons
   take the pointer (the rail's backing lets clicks through to the card; an enemy's icons click and right-click like its
   card), and not while an aim is open (an aim click anywhere on the card arms it) nor on touch screens (a tap goes to
   the card: boardTouch.js looks for the token button under the finger). */
.token-status-rail[b-nog2z1p06p]  .mud-tooltip-root {
    display: flex;
    pointer-events: auto;
}

.board-zoom-viewport.aim-mode .token-status-rail[b-nog2z1p06p]  .mud-tooltip-root,
.board-zoom-viewport.aim-mode .token-status-rail .token-hud-status-icon[b-nog2z1p06p],
.board-zoom-viewport.aim-mode .token-status-rail[b-nog2z1p06p]::before {
    pointer-events: none;
}

@media (hover: none) {
    .token-status-rail[b-nog2z1p06p]  .mud-tooltip-root,
    .token-status-rail .token-hud-status-icon[b-nog2z1p06p] {
        pointer-events: none;
    }
}

.token-status-rail .token-hud-status-icon[b-nog2z1p06p] {
    position: relative;
    box-sizing: border-box;
    width: var(--rail-slot);
    height: var(--rail-slot);
    border-radius: 3px;
}

.token-status-rail .token-hud-status-icon.is-beneficial[b-nog2z1p06p] {
    border-radius: 50%;
}

.token-status-rail .token-hud-status-icon .material-icons[b-nog2z1p06p] {
    font-size: calc(var(--rail-slot) * 0.7);
}

/* Remaining rounds, on the icon's lower outer corner (1px inside the card's edge, never past it). A rail on the card's
   left edge mirrors both badges (the arrangement's block). */
.token-status-rounds[b-nog2z1p06p] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    min-width: var(--rail-badge);
    height: var(--rail-badge);
    padding: 0 1px;
    box-sizing: border-box;
    border-radius: 3px;
    background: var(--color-bg-base);
    color: var(--color-text-primary);
    font-size: calc(var(--rail-badge) * 0.8);
    font-weight: 800;
    line-height: var(--rail-badge);
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* "+N": the side's effects that don't fit, on its last icon's top inner corner, inside the icon's own column (1px over
   its inner edge): beside the icon it reached into the other rail on 40-45px cards, and on the top row into the "#N".
   The rounds badge holds the lower outer corner. */
.token-status-more[b-nog2z1p06p] {
    position: absolute;
    top: 0;
    left: -1px;
    min-width: var(--rail-badge);
    height: var(--rail-badge);
    padding: 0 1px;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 70%, transparent);
    border-radius: 3px;
    background: var(--color-bg-base);
    color: var(--color-text-light);
    font-size: calc(var(--rail-badge) * 0.8);
    font-weight: 800;
    line-height: calc(var(--rail-badge) - 2px);
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* Last round: a dashed rim and a quieter glyph; the number reads 1. */
.token-hud-status-icon.is-last-round[b-nog2z1p06p] {
    border-style: dashed;
}

.token-hud-status-icon.is-last-round .material-icons[b-nog2z1p06p] {
    opacity: 0.7;
}

/* The folded rails: the count chips just above the HP bar, on the token HUD (part of the card, so what stands in front
   of the card stands in front of them, and hovering one hovers the token). Low on the card, so they never meet the
   "#N" in its top-left corner or a neighbour's. A flex row (the beneficial chip at the left edge, the harmful one
   pushed to the right edge), so a two-digit count pushes its neighbour instead of overlapping it. */
.token-status-counts[b-nog2z1p06p] {
    position: absolute;
    bottom: 12px;
    left: 2px;
    right: 2px;
    display: none;
    flex-direction: row;
    gap: 2px;
    pointer-events: none;
}

.token-status-count[b-nog2z1p06p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: calc(12px * var(--token-ui-scale, 1));
    height: calc(12px * var(--token-ui-scale, 1));
    padding: 0 calc(2px * var(--token-ui-scale, 1));
    border: 1px solid currentColor;
    border-radius: 2px;
    background: color-mix(in srgb, var(--color-bg-base) 88%, transparent);
    font-size: calc(8px * var(--token-ui-scale, 1));
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.token-status-count.count-boon[b-nog2z1p06p] {
    border-radius: 999px;
}

.token-status-count.count-harm[b-nog2z1p06p] {
    margin-left: auto;
}

.token-status-count.status-pip-buff[b-nog2z1p06p]   { color: var(--color-status-buff); }
.token-status-count.status-pip-debuff[b-nog2z1p06p] { color: var(--color-status-debuff); }
.token-status-count.status-pip-dot[b-nog2z1p06p]    { color: var(--color-status-dot); }
.token-status-count.status-pip-cc[b-nog2z1p06p]     { color: var(--color-status-control); }

.board-zoom-viewport[data-token-density="compact"] .token-status-counts[b-nog2z1p06p] {
    display: flex;
}

.board-zoom-viewport[data-token-density="compact"] .token-status-rail[b-nog2z1p06p] {
    display: none;
}

/* The peek is for a mouse only: a touch screen keeps :hover after a tap, which would leave the rails out over the
   neighbour; keyboard focus (which Chrome also gives a clicked token once a hotkey is pressed) doesn't open it either.
   Both read the conditions on the token's hover card and in the dock / tablet target rows. */
@media (hover: hover) {
    .board-zoom-viewport[data-token-density="compact"] .hex-token-anchor:hover .token-status-rail[b-nog2z1p06p] {
        display: flex;
    }

    .board-zoom-viewport[data-token-density="compact"] .hex-token-anchor:hover .token-status-counts[b-nog2z1p06p] {
        display: none;
    }
}

/* A peeking rail stands a couple of pixels off the card: a strip bridges the gap toward the card, so the pointer can
   travel to its icons (and their tooltips) without the token's hover dropping. Each arrangement sets which side. */
.board-zoom-viewport[data-token-density="compact"] .token-status-rail[b-nog2z1p06p]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    pointer-events: auto;
}

/* ---- Status placement (one block per TokenStatusPlacement; the viewport carries its token-status--* modifier) ---- */

/* Split rails (the default): harmful down the card's top-right edge (two icons), beneficial up its bottom-left edge from
   the HP bar (one icon, clear of the "#N" corner), so polarity reads by side: debuffs right, buffs left. The left rail
   mirrors its badges. Folded: the "+2" chip bottom-left, the harmful count bottom-right; peeking, each rail stands just
   outside its own edge. */
.board-zoom-viewport.token-status--split .token-status-rail[b-nog2z1p06p] {
    position: absolute;
}

.board-zoom-viewport.token-status--split .token-status-rail.rail-harm[b-nog2z1p06p] {
    top: 2px;
    right: 2px;
}

.board-zoom-viewport.token-status--split .token-status-rail.rail-boon[b-nog2z1p06p] {
    bottom: 12px;
    left: 2px;
    flex-direction: column-reverse;
}

.board-zoom-viewport.token-status--split .rail-boon .token-status-rounds[b-nog2z1p06p] {
    right: auto;
    left: -2px;
}

.board-zoom-viewport.token-status--split .rail-boon .token-status-more[b-nog2z1p06p] {
    left: auto;
    right: -1px;
}

.board-zoom-viewport.token-status--split[data-token-density="compact"] .token-status-rail.rail-harm[b-nog2z1p06p] {
    right: auto;
    left: calc(100% + 2px);
}

.board-zoom-viewport.token-status--split[data-token-density="compact"] .token-status-rail.rail-boon[b-nog2z1p06p] {
    left: auto;
    right: calc(100% + 2px);
}

.board-zoom-viewport.token-status--split[data-token-density="compact"] .rail-harm[b-nog2z1p06p]::before { left: -4px; }
.board-zoom-viewport.token-status--split[data-token-density="compact"] .rail-boon[b-nog2z1p06p]::before { right: -4px; }

/* One column: down the card's top-right edge, harmful, a divider, then beneficial (two icons in all). Folded: both
   chips bottom-right; peeking, the column stands just outside the right edge. */
.board-zoom-viewport.token-status--column .token-status-set[b-nog2z1p06p] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 2px;
}

.board-zoom-viewport.token-status--column .rail-harm + .rail-boon[b-nog2z1p06p] {
    border-top: 1px solid color-mix(in srgb, var(--color-text-secondary) 60%, transparent);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.board-zoom-viewport.token-status--column .token-status-counts[b-nog2z1p06p] {
    left: auto;
}

.board-zoom-viewport.token-status--column[data-token-density="compact"] .token-status-set[b-nog2z1p06p] {
    align-items: flex-start;
    /* The card's width, not 100%: a padding percentage resolves against the 0-wide .token-status-rails. */
    padding-left: calc(var(--token-w, 42px) + 2px);
}

.board-zoom-viewport.token-status--column[data-token-density="compact"] .token-status-rail[b-nog2z1p06p] {
    position: relative;
}

.board-zoom-viewport.token-status--column[data-token-density="compact"] .token-status-rail[b-nog2z1p06p]::before { left: -4px; }

.token-hud-status-icon .material-icons[b-nog2z1p06p] {
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
}

/* Kind tints (the status tokens in design-system.css; the deuteranopia palette swaps buff and debuff there). */
.token-hud-status-icon.status-pip-buff[b-nog2z1p06p]   { border-color: color-mix(in srgb, var(--color-status-buff) 65%, transparent);    color: var(--color-status-buff);    box-shadow: 0 0 4px color-mix(in srgb, var(--color-status-buff) 35%, transparent); }
.token-hud-status-icon.status-pip-debuff[b-nog2z1p06p] { border-color: color-mix(in srgb, var(--color-status-debuff) 65%, transparent);  color: var(--color-status-debuff);  box-shadow: 0 0 4px color-mix(in srgb, var(--color-status-debuff) 35%, transparent); }
.token-hud-status-icon.status-pip-dot[b-nog2z1p06p]    { border-color: color-mix(in srgb, var(--color-status-dot) 65%, transparent);     color: var(--color-status-dot);     box-shadow: 0 0 4px color-mix(in srgb, var(--color-status-dot) 35%, transparent); }
.token-hud-status-icon.status-pip-cc[b-nog2z1p06p]     { border-color: color-mix(in srgb, var(--color-status-control) 65%, transparent); color: var(--color-status-control); box-shadow: 0 0 4px color-mix(in srgb, var(--color-status-control) 35%, transparent); }


/* Pop-in animation — JS toggles .icon-pop on freshly-mounted icons to sell the "added" moment. */
.token-hud-status-icon.icon-pop[b-nog2z1p06p] {
    animation: tokenHudIconPop-b-nog2z1p06p 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.token-hud-status-icon.icon-expire[b-nog2z1p06p] {
    animation: tokenHudIconExpire-b-nog2z1p06p 340ms ease-out forwards;
}

@keyframes tokenHudIconPop-b-nog2z1p06p {
    0%   { transform: scale(0.2) rotate(-18deg); opacity: 0;   }
    55%  { transform: scale(1.25) rotate(6deg);   opacity: 1.0; }
    100% { transform: scale(1.0)  rotate(0deg);   opacity: 1.0; }
}
@keyframes tokenHudIconExpire-b-nog2z1p06p {
    0%   { transform: scale(1.0); opacity: 1.0; }
    100% { transform: scale(0.3); opacity: 0.0; }
}

/* ---- HP bar ---- */

.token-hud-hp[b-nog2z1p06p] {
    position: absolute;
    /* WP12b: along the card's bottom edge, inside its frame, so the bar stays tied to the figure and the
       base disc under the feet stays in view (the bar used to hang 10px below the feet, over it). */
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--token-w, 42px) - 6px);
    box-sizing: border-box;
    padding: 1px 2px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.token-hud.hud-player .token-hud-hp[b-nog2z1p06p] { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px color-mix(in srgb, var(--combat-ally) 35%, transparent); }
.token-hud.hud-enemy  .token-hud-hp[b-nog2z1p06p] { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px color-mix(in srgb, var(--combat-enemy) 35%, transparent); }

.token-hud-hp-track[b-nog2z1p06p] {
    position: relative;
    width: 100%;
    height: 5px;
    border-radius: 2px;
    background: rgba(15, 23, 42, 0.90);
    overflow: hidden;
}

.token-hud-hp-fill[b-nog2z1p06p] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 2px;
    transition: width 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background-color 0.3s ease;
    z-index: 1;
}

.token-hud-hp-fill.hp-high[b-nog2z1p06p] { background: linear-gradient(90deg, var(--combat-hp-high-dark), var(--combat-hp-high-light)); }
.token-hud-hp-fill.hp-mid[b-nog2z1p06p]  { background: linear-gradient(90deg, var(--combat-hp-mid-yellow-dark), var(--combat-hp-mid-yellow-light)); }
.token-hud-hp-fill.hp-low[b-nog2z1p06p]  { background: linear-gradient(90deg, var(--combat-hp-low-darker), var(--combat-hp-low-light)); }

/* Damage streak — white tail behind the shrinking bar; JS toggles .hp-streak-active */
.token-hud-hp-streak[b-nog2z1p06p] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.85));
    pointer-events: none;
    opacity: 0;
    z-index: 2;
}

.token-hud-hp.hp-streak-active .token-hud-hp-streak[b-nog2z1p06p] {
    animation: tokenHudHpStreak-b-nog2z1p06p 420ms ease-out forwards;
}

@keyframes tokenHudHpStreak-b-nog2z1p06p {
    0%   { width: 100%; opacity: 0.85; }
    60%  { opacity: 0.55; }
    100% { width: 0%;    opacity: 0.0; }
}

/* Crit white flash — JS toggles .hp-flash-crit for ~150ms */
.token-hud-hp-flash[b-nog2z1p06p] {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.0);
    pointer-events: none;
    z-index: 3;
    border-radius: 2px;
}

.token-hud-hp.hp-flash-crit .token-hud-hp-flash[b-nog2z1p06p] {
    animation: tokenHudHpCritFlash-b-nog2z1p06p 180ms ease-out;
}

@keyframes tokenHudHpCritFlash-b-nog2z1p06p {
    0%   { background: rgba(255, 255, 255, 0.95); }
    60%  { background: rgba(255, 255, 255, 0.50); }
    100% { background: rgba(255, 255, 255, 0.0);  }
}

/* Heal overshoot bloom — green pulse outside the bar */
.token-hud-hp.hp-heal-bloom .token-hud-hp-flash[b-nog2z1p06p] {
    animation: tokenHudHpHealBloom-b-nog2z1p06p 460ms ease-out;
}

@keyframes tokenHudHpHealBloom-b-nog2z1p06p {
    0%   { background: color-mix(in srgb, var(--combat-heal) 0%, transparent);  box-shadow: 0 0 0 0 color-mix(in srgb, var(--combat-heal) 0%, transparent); }
    40%  { background: color-mix(in srgb, var(--combat-heal) 40%, transparent); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--combat-heal) 55%, transparent); }
    100% { background: color-mix(in srgb, var(--combat-heal) 0%, transparent);  box-shadow: 0 0 0 0 color-mix(in srgb, var(--combat-heal) 0%, transparent); }
}

/* Reduced-motion: kill the transient flourishes; persistent bar + icons still render. */
@media (prefers-reduced-motion: reduce) {
    .token-hud-hp.hp-streak-active .token-hud-hp-streak[b-nog2z1p06p],
    .token-hud-hp.hp-flash-crit    .token-hud-hp-flash[b-nog2z1p06p],
    .token-hud-hp.hp-heal-bloom    .token-hud-hp-flash[b-nog2z1p06p],
    .token-hud-status-icon.icon-pop[b-nog2z1p06p],
    .token-hud-status-icon.icon-expire[b-nog2z1p06p] {
        animation: none;
    }
    .token-hud-hp-fill[b-nog2z1p06p] { transition: none; }
}

/* (The old max-width: 1024px collapse of this HUD, a 14px bar and 7px icons for the 13px cards of that tier, is
   gone: the card follows the hex on every tier now, WP12b, and the HUD follows the card.) */

/* ======================================================
   BOSS ENCOUNTER — larger card + crown + board vignette
   (the card's size is the anchor's --token-w, scaled by --token-boss-scale)
   ====================================================== */

.token.token-boss[b-nog2z1p06p] {
    border-width: 3px;
    border-color: color-mix(in srgb, var(--combat-enemy-dark) 80%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--combat-enemy) 25%, transparent),
                0 0 18px color-mix(in srgb, var(--combat-enemy) 18%, transparent),
                0 4px 16px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 200, 100, 0.10);
}

/* Whose turn it is beats the boss frame's red border (same specificity, later in the file). */
.token.token-boss.token-active[b-nog2z1p06p] {
    border-color: var(--color-warning-bright);
}

.token.token-boss[b-nog2z1p06p]::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M12 0L16 7L24 7L18 12L20 18L12 14L4 18L6 12L0 7L8 7Z' fill='%23fbbf24'/%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
    z-index: 5;
}

.boss-token-anchor .token-hp-bar[b-nog2z1p06p] {
    width: 48px;
}

/* ======================================================
   HEX HOVER STATES — interactive feedback on hex cells
   ====================================================== */

.hex-cell:hover[b-nog2z1p06p] {
    filter: brightness(1.20);
    stroke: rgba(200, 190, 160, 0.30);
    stroke-width: 0.8;
}

.hex-cell.hex-movable-free:hover[b-nog2z1p06p] {
    filter: brightness(1.30);
    stroke: color-mix(in srgb, var(--color-eco-move) 70%, transparent);
    stroke-width: 1.2;
}

.hex-cell.hex-attackable:hover[b-nog2z1p06p] {
    filter: brightness(1.25);
    stroke: rgba(220, 120, 40, 0.75);
    stroke-width: 1.3;
}

.hex-cell.hex-barrier:hover[b-nog2z1p06p] {
    filter: brightness(1.15);
}

/* Disable hover effects on touch devices */
@media (hover: none) {
    .hex-cell:hover[b-nog2z1p06p] {
        filter: none;
        stroke: rgba(100, 90, 70, 0.10);
        stroke-width: 0.5;
    }
    .hex-cell.hex-movable-free:hover[b-nog2z1p06p] {
        filter: none;
    }
    .hex-cell.hex-attackable:hover[b-nog2z1p06p] {
        filter: none;
    }
}

/* ======================================================
   ZONE BOUNDARY LINES — dashed lines between zone regions
   ====================================================== */

.zone-boundary-line[b-nog2z1p06p] {
    stroke: rgba(140, 130, 110, 0.12);
    stroke-width: 0.6;
    stroke-dasharray: 3 4;
    fill: none;
    pointer-events: none;
}

/* Active hex spotlight — subtle glow on the active combatant's hex */
.active-hex-spotlight[b-nog2z1p06p] {
    animation: spotlightPulse-b-nog2z1p06p 1.8s ease-in-out infinite;
}

@keyframes spotlightPulse-b-nog2z1p06p {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1.0; }
}

/* ======================================================
   ELEVATION — side faces + brightness tiers
   ====================================================== */

/* Side-face wall polygons (rendered below each elevated top face).
   Dark shadows beneath each hex create the tiled/stacked depth effect. */
.hex-side-face[b-nog2z1p06p] {
    pointer-events: none;
    stroke-width: 0.3;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
}

/* Player side wall — dark forest shadow beneath hex */
.hex-side-face.player-side[b-nog2z1p06p] {
    fill: rgb(8, 14, 8);
    stroke: color-mix(in srgb, var(--combat-ground-ally-wall) 12%, transparent);
}

/* Enemy side wall — dark earth shadow beneath hex */
.hex-side-face.enemy-side[b-nog2z1p06p] {
    fill: rgb(18, 10, 6);
    stroke: rgba(60, 30, 15, 0.12);
}

/* Barrier side wall — dark stone shadow beneath hex */
.hex-side-face.barrier-side[b-nog2z1p06p] {
    fill: rgb(16, 14, 12);
    stroke: rgba(50, 45, 35, 0.15);
}

/* Top-face brightness: higher elevation = brighter top surface (light from above) */
.hex-cell.hex-elevation-3[b-nog2z1p06p] { filter: brightness(1.30); }
.hex-cell.hex-elevation-2[b-nog2z1p06p] { filter: brightness(1.18); }
.hex-cell.hex-elevation-1[b-nog2z1p06p] { filter: brightness(1.08); }

/* ======================================================
   BIOME THEMES — per-biome hex palette overrides
   Applied via .biome-{name} on .board-hex-wrapper
   ====================================================== */

/* ---- Forest ---- */
.biome-forest[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(20, 60, 15, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(50, 70, 20, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(12, 18, 8, 0.0) 40%, rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(160deg, #12180c 0%, #0e140a 40%, #101608 60%, #141a0c 100%) !important;
    border-color: rgba(60, 90, 40, 0.15) !important;
}
.biome-forest .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(22, 42, 18); }
.biome-forest .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(38, 44, 18); }
.biome-forest .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(28, 52, 22); }
.biome-forest .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(44, 50, 22); }
.biome-forest .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(20, 38, 16); }
.biome-forest .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(36, 40, 16); }
.biome-forest .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(16, 30, 14); }
.biome-forest .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(30, 34, 14); }
.biome-forest .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(6, 14, 4); }
.biome-forest .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(12, 14, 4); }
.biome-forest .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(32, 40, 28); }
.biome-forest .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(10, 14, 8); }
.biome-forest .hex-cell[b-nog2z1p06p] { stroke: rgba(60, 110, 40, 0.18); stroke-width: 0.6; }

/* ---- Volcanic ---- */
.biome-volcanic[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(80, 30, 5, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(100, 20, 0, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(20, 8, 4, 0.0) 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(160deg, #1a0e08 0%, #140a06 40%, #180c06 60%, #1c0e08 100%) !important;
    border-color: rgba(120, 50, 20, 0.18) !important;
}
.biome-volcanic .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(42, 22, 14); }
.biome-volcanic .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(56, 26, 12); }
.biome-volcanic .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(50, 28, 16); }
.biome-volcanic .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(64, 30, 14); }
.biome-volcanic .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(38, 20, 12); }
.biome-volcanic .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(50, 24, 10); }
.biome-volcanic .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(32, 16, 10); }
.biome-volcanic .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(42, 20, 8); }
.biome-volcanic .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(14, 6, 2); }
.biome-volcanic .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(20, 8, 2); }
.biome-volcanic .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(48, 22, 12); stroke: rgba(180, 80, 20, 0.20); }
.biome-volcanic .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(16, 6, 2); }
.biome-volcanic .hex-cell[b-nog2z1p06p] { stroke: rgba(180, 80, 20, 0.18); stroke-width: 0.6; }

/* ---- Underground ---- */
.biome-underground[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(20, 24, 40, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(30, 22, 15, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(10, 10, 12, 0.0) 40%, rgba(0, 0, 0, 0.6) 100%),
        linear-gradient(160deg, #111014 0%, #0e0c10 40%, #100e12 60%, #121014 100%) !important;
    border-color: rgba(60, 55, 70, 0.15) !important;
}
.biome-underground .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(26, 26, 34); }
.biome-underground .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(36, 30, 26); }
.biome-underground .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(30, 30, 40); }
.biome-underground .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(42, 34, 28); }
.biome-underground .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(24, 24, 30); }
.biome-underground .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(32, 28, 24); }
.biome-underground .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(20, 20, 26); }
.biome-underground .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(28, 24, 20); }
.biome-underground .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(6, 6, 10); }
.biome-underground .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(10, 8, 6); }
.biome-underground .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(34, 32, 36); }
.biome-underground .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(8, 8, 10); }
.biome-underground .hex-cell[b-nog2z1p06p] { stroke: rgba(80, 100, 160, 0.16); stroke-width: 0.6; }

/* ---- Mountain ---- */
.biome-mountain[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(40, 45, 50, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(50, 50, 55, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(14, 14, 16, 0.0) 40%, rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(160deg, #161618 0%, #121214 40%, #141416 60%, #181818 100%) !important;
    border-color: rgba(80, 80, 90, 0.15) !important;
}
.biome-mountain .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(30, 34, 36); }
.biome-mountain .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(38, 36, 32); }
.biome-mountain .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(36, 40, 42); }
.biome-mountain .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(44, 42, 36); }
.biome-mountain .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(28, 32, 34); }
.biome-mountain .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(34, 32, 28); }
.biome-mountain .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(24, 28, 30); }
.biome-mountain .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(30, 28, 24); }
.biome-mountain .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(8, 10, 12); }
.biome-mountain .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(12, 10, 8); }
.biome-mountain .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(40, 40, 42); }
.biome-mountain .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(10, 10, 12); }
.biome-mountain .hex-cell[b-nog2z1p06p] { stroke: rgba(140, 150, 170, 0.16); stroke-width: 0.6; }

/* ---- Coastal ---- */
.biome-coastal[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(15, 35, 50, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(50, 40, 25, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(10, 14, 18, 0.0) 40%, rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(160deg, #0e1418 0%, #0c1014 40%, #0e1216 60%, #101618 100%) !important;
    border-color: rgba(50, 70, 90, 0.15) !important;
}
.biome-coastal .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(22, 32, 38); }
.biome-coastal .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(36, 32, 24); }
.biome-coastal .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(26, 38, 44); }
.biome-coastal .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(42, 36, 26); }
.biome-coastal .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(20, 28, 34); }
.biome-coastal .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(32, 28, 22); }
.biome-coastal .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(18, 24, 30); }
.biome-coastal .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(28, 24, 18); }
.biome-coastal .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(4, 8, 12); }
.biome-coastal .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(12, 10, 6); }
.biome-coastal .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(30, 36, 40); }
.biome-coastal .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(6, 10, 14); }
.biome-coastal .hex-cell[b-nog2z1p06p] { stroke: rgba(80, 150, 200, 0.16); stroke-width: 0.6; }

/* ---- Urban ---- */
.biome-urban[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(40, 30, 15, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(30, 25, 20, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(14, 12, 10, 0.0) 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(160deg, #16140e 0%, #12100c 40%, #14120e 60%, #181610 100%) !important;
    border-color: rgba(80, 70, 50, 0.15) !important;
}
.biome-urban .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(30, 28, 22); }
.biome-urban .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(38, 34, 26); }
.biome-urban .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(36, 34, 26); }
.biome-urban .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(44, 38, 28); }
.biome-urban .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(28, 26, 20); }
.biome-urban .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(34, 30, 22); }
.biome-urban .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(24, 22, 18); }
.biome-urban .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(30, 26, 20); }
.biome-urban .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(8, 6, 4); }
.biome-urban .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(12, 10, 6); }
.biome-urban .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(40, 36, 30); stroke: rgba(100, 90, 60, 0.18); }
.biome-urban .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(10, 8, 6); }
.biome-urban .hex-cell[b-nog2z1p06p] { stroke: rgba(140, 130, 100, 0.18); stroke-width: 0.6; }

/* ---- FeyForest ---- */
.biome-feyforest[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(40, 20, 60, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(15, 50, 45, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(12, 10, 18, 0.0) 40%, rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(160deg, #140e1a 0%, #100c16 40%, #120e18 60%, #16101c 100%) !important;
    border-color: rgba(80, 50, 100, 0.15) !important;
}
.biome-feyforest .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(24, 28, 34); }
.biome-feyforest .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(34, 24, 38); }
.biome-feyforest .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(28, 34, 40); }
.biome-feyforest .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(40, 28, 44); }
.biome-feyforest .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(22, 26, 30); }
.biome-feyforest .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(30, 22, 34); }
.biome-feyforest .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(18, 22, 26); }
.biome-feyforest .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(26, 18, 30); }
.biome-feyforest .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(6, 8, 12); }
.biome-feyforest .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(10, 6, 14); }
.biome-feyforest .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(30, 28, 38); }
.biome-feyforest .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(8, 6, 12); }
.biome-feyforest .hex-cell[b-nog2z1p06p] { stroke: rgba(120, 80, 180, 0.18); stroke-width: 0.6; }

/* ---- Ruins ---- */
.biome-ruins[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(40, 24, 60, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(30, 28, 40, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(12, 10, 16, 0.0) 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(160deg, #141018 0%, #100e14 40%, #121016 60%, #16121a 100%) !important;
    border-color: rgba(70, 50, 90, 0.15) !important;
}
.biome-ruins .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(28, 26, 36); }
.biome-ruins .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(36, 28, 38); }
.biome-ruins .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(34, 30, 42); }
.biome-ruins .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(42, 32, 44); }
.biome-ruins .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(26, 24, 32); }
.biome-ruins .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(32, 26, 34); }
.biome-ruins .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(22, 20, 28); }
.biome-ruins .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(28, 22, 30); }
.biome-ruins .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(8, 6, 12); }
.biome-ruins .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(12, 8, 14); }
.biome-ruins .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(36, 32, 42); stroke: rgba(120, 80, 160, 0.18); }
.biome-ruins .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(10, 8, 14); }
.biome-ruins .hex-cell[b-nog2z1p06p] { stroke: rgba(120, 80, 160, 0.16); stroke-width: 0.6; }

/* ---- Undead ---- */
.biome-undead[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(30, 35, 30, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(40, 38, 35, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(14, 14, 14, 0.0) 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(160deg, #161614 0%, #121210 40%, #141412 60%, #181816 100%) !important;
    border-color: rgba(80, 80, 70, 0.15) !important;
}
.biome-undead .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(30, 32, 28); }
.biome-undead .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(36, 34, 30); }
.biome-undead .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(36, 38, 32); }
.biome-undead .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(42, 38, 34); }
.biome-undead .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(28, 30, 26); }
.biome-undead .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(32, 30, 28); }
.biome-undead .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(24, 26, 22); }
.biome-undead .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(28, 26, 24); }
.biome-undead .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(8, 10, 6); }
.biome-undead .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(12, 10, 8); }
.biome-undead .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(38, 38, 36); }
.biome-undead .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(10, 10, 8); }
.biome-undead .hex-cell[b-nog2z1p06p] { stroke: rgba(160, 170, 140, 0.15); stroke-width: 0.6; }

/* ---- Demonic ---- */
.biome-demonic[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(80, 10, 10, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(60, 5, 20, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(16, 6, 6, 0.0) 40%, rgba(0, 0, 0, 0.6) 100%),
        linear-gradient(160deg, #1a0808 0%, #140606 40%, #160808 60%, #1c0a0a 100%) !important;
    border-color: rgba(120, 30, 30, 0.18) !important;
}
.biome-demonic .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(36, 18, 18); }
.biome-demonic .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(48, 16, 16); }
.biome-demonic .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(42, 22, 22); }
.biome-demonic .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(56, 20, 18); }
.biome-demonic .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(32, 16, 16); }
.biome-demonic .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(42, 14, 14); }
.biome-demonic .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(28, 14, 14); }
.biome-demonic .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(36, 12, 12); }
.biome-demonic .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(12, 4, 4); }
.biome-demonic .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(18, 4, 4); }
.biome-demonic .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(44, 18, 16); stroke: rgba(180, 40, 30, 0.20); }
.biome-demonic .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(14, 4, 4); }
.biome-demonic .hex-cell[b-nog2z1p06p] { stroke: rgba(180, 40, 30, 0.18); stroke-width: 0.6; }

/* ---- Swamp ---- */
.biome-swamp[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(30, 50, 20, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(40, 35, 15, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(12, 14, 8, 0.0) 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(160deg, #14160c 0%, #10120a 40%, #12140a 60%, #16180c 100%) !important;
    border-color: rgba(60, 70, 40, 0.15) !important;
}
.biome-swamp .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(24, 34, 18); }
.biome-swamp .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(36, 34, 16); }
.biome-swamp .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(28, 40, 20); }
.biome-swamp .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(42, 38, 18); }
.biome-swamp .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(22, 30, 16); }
.biome-swamp .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(32, 30, 14); }
.biome-swamp .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(18, 26, 14); }
.biome-swamp .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(28, 26, 12); }
.biome-swamp .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(6, 12, 4); }
.biome-swamp .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(12, 10, 4); }
.biome-swamp .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(32, 38, 24); }
.biome-swamp .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(8, 12, 6); }
.biome-swamp .hex-cell[b-nog2z1p06p] { stroke: rgba(80, 100, 40, 0.16); stroke-width: 0.6; }

/* ----- Ice — frozen tundra, frost giant lairs, ice caves ----- */
.biome-ice[b-nog2z1p06p] {
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%, rgba(80, 140, 200, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(100, 160, 220, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(10, 14, 20, 0.0) 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(160deg, #0c1018 0%, #0e1420 40%, #101824 60%, #0c1420 100%) !important;
    border-color: rgba(100, 160, 220, 0.12) !important;
}
.biome-ice .hex-cell.player-zone[b-nog2z1p06p]           { fill: rgb(22, 36, 50); }
.biome-ice .hex-cell.enemy-zone[b-nog2z1p06p]            { fill: rgb(24, 30, 44); }
.biome-ice .hex-cell.zone-vanguard.player-zone[b-nog2z1p06p] { fill: rgb(26, 42, 58); }
.biome-ice .hex-cell.zone-vanguard.enemy-zone[b-nog2z1p06p]  { fill: rgb(28, 34, 50); }
.biome-ice .hex-cell.zone-flank.player-zone[b-nog2z1p06p]    { fill: rgb(20, 32, 46); }
.biome-ice .hex-cell.zone-flank.enemy-zone[b-nog2z1p06p]     { fill: rgb(22, 28, 40); }
.biome-ice .hex-cell.zone-rear.player-zone[b-nog2z1p06p]     { fill: rgb(16, 26, 38); }
.biome-ice .hex-cell.zone-rear.enemy-zone[b-nog2z1p06p]      { fill: rgb(18, 24, 34); }
.biome-ice .hex-side-face.player-side[b-nog2z1p06p]      { fill: rgb(6, 12, 20); }
.biome-ice .hex-side-face.enemy-side[b-nog2z1p06p]       { fill: rgb(8, 10, 18); }
.biome-ice .hex-cell.hex-barrier[b-nog2z1p06p]           { fill: rgb(30, 50, 68); }
.biome-ice .hex-side-face.barrier-side[b-nog2z1p06p]     { fill: rgb(8, 16, 24); }
.biome-ice .hex-cell[b-nog2z1p06p] { stroke: rgba(120, 190, 255, 0.20); stroke-width: 0.6; }

/* ----- Ice barrier pulse ----- */
.biome-ice .hex-cell.hex-barrier[b-nog2z1p06p] {
    animation: barrierPulseIce-b-nog2z1p06p 3.0s ease-in-out infinite;
}
@keyframes barrierPulseIce-b-nog2z1p06p {
    0%, 100% { fill: rgb(30, 50, 68); stroke: rgba(120, 180, 240, 0.15); }
    50%      { fill: rgb(36, 60, 80); stroke: rgba(140, 200, 255, 0.35); }
}

/* ----- Biome-themed barrier pulse animations ----- */
.biome-volcanic .hex-cell.hex-barrier[b-nog2z1p06p] {
    animation: barrierPulseVolcanic-b-nog2z1p06p 3.0s ease-in-out infinite;
}
@keyframes barrierPulseVolcanic-b-nog2z1p06p {
    0%, 100% { fill: rgb(48, 22, 12); stroke: rgba(180, 80, 20, 0.20); }
    50%      { fill: rgb(60, 28, 14); stroke: rgba(220, 100, 30, 0.40); }
}

.biome-demonic .hex-cell.hex-barrier[b-nog2z1p06p] {
    animation: barrierPulseDemonic-b-nog2z1p06p 3.0s ease-in-out infinite;
}
@keyframes barrierPulseDemonic-b-nog2z1p06p {
    0%, 100% { fill: rgb(44, 18, 16); stroke: rgba(180, 40, 30, 0.20); }
    50%      { fill: rgb(56, 24, 20); stroke: rgba(220, 50, 40, 0.40); }
}

.biome-feyforest .hex-cell.hex-barrier[b-nog2z1p06p] {
    animation: barrierPulseFey-b-nog2z1p06p 4.0s ease-in-out infinite;
}
@keyframes barrierPulseFey-b-nog2z1p06p {
    0%, 100% { fill: rgb(30, 28, 38); stroke: rgba(160, 100, 200, 0.18); }
    50%      { fill: rgb(36, 32, 48); stroke: rgba(180, 120, 220, 0.35); }
}

.biome-ruins .hex-cell.hex-barrier[b-nog2z1p06p] {
    animation: barrierPulseRuins-b-nog2z1p06p 3.5s ease-in-out infinite;
}
@keyframes barrierPulseRuins-b-nog2z1p06p {
    0%, 100% { fill: rgb(36, 32, 42); stroke: rgba(120, 80, 160, 0.18); }
    50%      { fill: rgb(42, 36, 52); stroke: rgba(150, 100, 200, 0.35); }
}

.biome-underground .hex-cell.hex-barrier[b-nog2z1p06p] {
    animation: barrierPulseUnderground-b-nog2z1p06p 3.5s ease-in-out infinite;
}
@keyframes barrierPulseUnderground-b-nog2z1p06p {
    0%, 100% { fill: rgb(34, 32, 36); stroke: rgba(60, 80, 120, 0.18); }
    50%      { fill: rgb(40, 38, 46); stroke: rgba(80, 110, 160, 0.30); }
}

.biome-undead .hex-cell.hex-barrier[b-nog2z1p06p] {
    animation: barrierPulseUndead-b-nog2z1p06p 4.0s ease-in-out infinite;
}
@keyframes barrierPulseUndead-b-nog2z1p06p {
    0%, 100% { fill: rgb(38, 38, 36); stroke: rgba(100, 100, 80, 0.18); }
    50%      { fill: rgb(48, 48, 44); stroke: rgba(140, 140, 100, 0.30); }
}

/* ======================================================
   MOBILE & TABLET TOUCH OPTIMIZATIONS
   ====================================================== */

/* Prevent browser default pinch-zoom / scroll on the board */
.board-zoom-viewport[b-nog2z1p06p] {
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    overscroll-behavior: contain;
}

/* ---- Mobile token sizing (44px min touch target) ---- */
@media (max-width: 767px) {
    :where(.tablet-hud) .board-iso-container[b-nog2z1p06p] {
        max-width: 100% !important;
    }

    /* Reduce isometric tilt on mobile for easier reading */
    :where(.tablet-hud) .board-zoom-viewport[b-nog2z1p06p] {
        --board-tilt: 32deg;
    }

    :where(.tablet-hud) .board-hex-wrapper[b-nog2z1p06p] {
        transform: rotateX(32deg);
    }

    :where(.tablet-hud) .board-token-layer[b-nog2z1p06p] {
        transform: rotateX(32deg);
        --board-counter-tilt: -32deg;
    }

    /* Match the front VFX wrapper tilt to the token layer so percent-based
       VFX coords keep landing on tokens at this breakpoint. */
    :where(.tablet-hud) .board-vfx-front-wrapper[b-nog2z1p06p] {
        transform: rotateX(32deg);
    }

    /* Token cards: compact for mobile — a fixed 26px card, as before WP12b (the box is capped to the phone's
       width here, so a card sized from its hex would be about 14px); a boss scales it as everywhere, and an
       enemy card keeps its 44px touch target. */
    :where(.tablet-hud) .board-zoom-viewport[b-nog2z1p06p] {
        --token-w-unit: 26px;
        --token-touch-min: 44px;
    }

    :where(.tablet-hud) .token[b-nog2z1p06p] {
        border-width: 1.5px;
        border-radius: 4px;
    }

    /* Enemy tokens are <button> — extend touch target without growing the visual card */
    :where(.tablet-hud) button.token.enemy-token[b-nog2z1p06p] {
        min-width: 44px;
        min-height: 44px;
        border-width: 2px;
    }


    /* Pet companion: smaller on mobile */
    :where(.tablet-hud) .pet-companion-token[b-nog2z1p06p] {
        width: 18px;
        height: 18px;
        left: -18px;
        bottom: -3px;
    }

    /* Board side labels: smaller on mobile */
    :where(.tablet-hud) .board-side-labels[b-nog2z1p06p] {
        top: -16px;
        padding: 0 6%;
    }

    :where(.tablet-hud) .board-side-label[b-nog2z1p06p] {
        font-size: 8px;
        letter-spacing: 0.08em;
    }

    /* HP bars: scaled to smaller token */
    :where(.tablet-hud) .token-hp-bar[b-nog2z1p06p] {
        width: 22px;
        height: 2px;
    }

    :where(.tablet-hud) .boss-token-anchor .token-hp-bar[b-nog2z1p06p] {
        width: 28px;
    }

    /* Boss token: the scaled card, with the touch target's floor */
    :where(.tablet-hud) .boss-token-anchor .token[b-nog2z1p06p] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ---- Mobile zoom controls: horizontal bar, larger touch targets ---- */
@media (max-width: 767px) {
    :where(.tablet-hud) .board-zoom-controls[b-nog2z1p06p] {
        flex-direction: row;
        bottom: 8px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        gap: 6px;
        background: rgba(10, 8, 6, 0.85);
        backdrop-filter: blur(8px);
        padding: 4px 8px;
        border-radius: 20px;
        border: 1px solid rgba(100, 90, 70, 0.20);
    }

    :where(.tablet-hud) .zoom-btn[b-nog2z1p06p] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        min-width: 44px;
        min-height: 44px;
    }

    :where(.tablet-hud) .zoom-btn .material-icons[b-nog2z1p06p] {
        font-size: 20px;
    }
}

/* ---- Mobile zoom level badge ---- */
.board-zoom-badge[b-nog2z1p06p] {
    display: none;
}

@media (max-width: 1199px) {
    :where(.tablet-hud) .board-zoom-badge[b-nog2z1p06p] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: rgba(200, 190, 170, 0.75);
        min-width: 32px;
        white-space: nowrap;
        letter-spacing: 0.02em;
    }
}

/* ---- Mobile extra controls (center, fit-all) ---- */
.board-touch-controls[b-nog2z1p06p] {
    display: none;
}

@media (max-width: 1199px) {
    :where(.tablet-hud) .board-touch-controls[b-nog2z1p06p] {
        display: flex;
        position: absolute;
        bottom: 8px;
        left: 12px;
        gap: 6px;
        z-index: 20;
    }

    :where(.tablet-hud) .touch-ctrl-btn[b-nog2z1p06p] {
        width: 40px;
        height: 40px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
        border: 1px solid rgba(100, 90, 70, 0.25);
        background: rgba(20, 18, 14, 0.85);
        color: rgba(200, 190, 170, 0.85);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        backdrop-filter: blur(6px);
        transition: background 0.15s ease, border-color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    :where(.tablet-hud) .touch-ctrl-btn:active[b-nog2z1p06p] {
        background: rgba(50, 46, 38, 0.95);
        border-color: rgba(180, 170, 140, 0.4);
    }

    :where(.tablet-hud) .touch-ctrl-btn .material-icons[b-nog2z1p06p] {
        font-size: 20px;
        pointer-events: none;
    }
}

/* ---- Tablet: moderate adjustments ---- */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Slightly reduced tilt for better touch interaction; an enemy card keeps a 44px touch target. */
    :where(.tablet-hud) .board-zoom-viewport[b-nog2z1p06p] {
        --board-tilt: 36deg;
        --token-touch-min: 44px;
    }

    :where(.tablet-hud) .board-hex-wrapper[b-nog2z1p06p] {
        transform: rotateX(36deg);
    }

    :where(.tablet-hud) .board-token-layer[b-nog2z1p06p] {
        transform: rotateX(36deg);
        --board-counter-tilt: -36deg;
    }

    /* Match the front VFX wrapper tilt to the token layer so percent-based
       VFX coords keep landing on tokens at this breakpoint. */
    :where(.tablet-hud) .board-vfx-front-wrapper[b-nog2z1p06p] {
        transform: rotateX(36deg);
    }

    /* The token card follows the hex (WP12b, --token-w); an enemy keeps its 44px touch target. */
    :where(.tablet-hud) button.token.enemy-token[b-nog2z1p06p] {
        min-width: 44px;
        min-height: 44px;
    }

    :where(.tablet-hud) .board-zoom-controls[b-nog2z1p06p] {
        flex-direction: row;
        bottom: 10px;
        right: 12px;
        gap: 4px;
        background: rgba(10, 8, 6, 0.80);
        backdrop-filter: blur(8px);
        padding: 4px 6px;
        border-radius: 16px;
        border: 1px solid rgba(100, 90, 70, 0.20);
    }

    :where(.tablet-hud) .zoom-btn[b-nog2z1p06p] {
        width: 36px;
        height: 36px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Pet companion: slightly smaller on tablet */
    :where(.tablet-hud) .pet-companion-token[b-nog2z1p06p] {
        width: 20px;
        height: 20px;
        left: -20px;
        bottom: -3px;
    }

    /* HP bar: slightly narrower */
    :where(.tablet-hud) .token-hp-bar[b-nog2z1p06p] {
        width: 26px;
    }

    :where(.tablet-hud) .boss-token-anchor .token-hp-bar[b-nog2z1p06p] {
        width: 34px;
    }

}

/* ---- Movement hint: mobile compact ---- */
@media (max-width: 767px) {
    :where(.tablet-hud) .zone-movement-hint[b-nog2z1p06p] {
        padding: var(--space-xs, 4px) var(--space-sm, 8px);
        gap: var(--space-sm, 8px);
    }

    :where(.tablet-hud) .movement-hint-text[b-nog2z1p06p] {
        font-size: 11px;
    }
}

/* ===== Pet Companion Token ===== */
/* Beside the card's lower-left corner, clear of the base disc (WP12e: the card's right side holds the status rail). */
.pet-companion-token[b-nog2z1p06p] {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-size: cover;
    background-position: center top;
    background-color: rgba(15,23,42,0.8);
    left: -24px;
    bottom: -4px;
    pointer-events: none;
    z-index: 5;
    border: 2px solid rgba(148,163,184,0.5);
    animation: petFloat-b-nog2z1p06p 3.5s ease-in-out infinite;
}

.pet-companion-token.rarity-common[b-nog2z1p06p] {
    border-color: rgba(148,163,184,0.6);
}

.pet-companion-token.rarity-uncommon[b-nog2z1p06p] {
    border-color: rgba(74,222,128,0.7);
    box-shadow: 0 0 4px rgba(74,222,128,0.4);
}

.pet-companion-token.rarity-rare[b-nog2z1p06p] {
    border-color: rgba(96,165,250,0.8);
    box-shadow: 0 0 5px rgba(96,165,250,0.5);
}

.pet-companion-token.rarity-epic[b-nog2z1p06p] {
    border-color: rgba(192,132,252,0.9);
    box-shadow: 0 0 6px rgba(192,132,252,0.5);
}

.pet-companion-token.rarity-legendary[b-nog2z1p06p] {
    border-color: gold;
    box-shadow: 0 0 6px 2px rgba(255,215,0,0.6);
    animation: petFloat-b-nog2z1p06p 3.5s ease-in-out infinite, petLegendaryGlow-b-nog2z1p06p 2s ease-in-out infinite;
}

@keyframes petFloat-b-nog2z1p06p {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
}

@keyframes petLegendaryGlow-b-nog2z1p06p {
    0%, 100% { box-shadow: 0 0 6px 2px rgba(255,215,0,0.6); }
    50%       { box-shadow: 0 0 14px 5px rgba(255,215,0,0.9); }
}

/* ======================================================
   HEX TOUCH OVERLAYS — enlarged tap targets for mobile movement mode
   Invisible buttons positioned over movable hexes, sized for fingers.
   ====================================================== */

.hex-touch-overlay[b-nog2z1p06p] {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    pointer-events: all;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Visual ring inside the touch target — shows the hex is tappable. The default ring marks a
   movable hex (the touch twin of .hex-movable-free), so it wears --color-eco-move too. */
.hex-touch-overlay-ring[b-nog2z1p06p] {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--color-eco-move) 55%, transparent);
    background: color-mix(in srgb, var(--color-eco-move) 8%, transparent);
    pointer-events: none;
    animation: touchOverlayPulse-b-nog2z1p06p 1.4s ease-in-out infinite;
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-eco-move) 20%, transparent);
}

.hex-touch-overlay-ring.ring-attack[b-nog2z1p06p] {
    border-color: color-mix(in srgb, var(--combat-enemy) 60%, transparent);
    background: color-mix(in srgb, var(--combat-enemy) 8%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--combat-enemy) 25%, transparent);
    animation: touchOverlayPulseAttack-b-nog2z1p06p 1.4s ease-in-out infinite;
}

@keyframes touchOverlayPulse-b-nog2z1p06p {
    0%, 100% {
        transform: scale(1.0);
        border-color: color-mix(in srgb, var(--color-eco-move) 55%, transparent);
        box-shadow: 0 0 8px color-mix(in srgb, var(--color-eco-move) 20%, transparent);
    }
    50% {
        transform: scale(1.12);
        border-color: color-mix(in srgb, var(--color-eco-move) 80%, transparent);
        box-shadow: 0 0 14px color-mix(in srgb, var(--color-eco-move) 35%, transparent);
    }
}

@keyframes touchOverlayPulseAttack-b-nog2z1p06p {
    0%, 100% {
        transform: scale(1.0);
        border-color: color-mix(in srgb, var(--combat-enemy) 60%, transparent);
        box-shadow: 0 0 8px color-mix(in srgb, var(--combat-enemy) 25%, transparent);
    }
    50% {
        transform: scale(1.12);
        border-color: color-mix(in srgb, var(--combat-enemy) 85%, transparent);
        box-shadow: 0 0 14px color-mix(in srgb, var(--combat-enemy) 40%, transparent);
    }
}

/* Active state: brief flash on tap */
.hex-touch-overlay:active .hex-touch-overlay-ring[b-nog2z1p06p] {
    transform: scale(0.90);
    border-color: color-mix(in srgb, var(--color-eco-move) 90%, transparent);
    background: color-mix(in srgb, var(--color-eco-move) 15%, transparent);
    transition: all 0.08s ease-out;
}

.hex-touch-overlay:active .hex-touch-overlay-ring.ring-attack[b-nog2z1p06p] {
    border-color: color-mix(in srgb, var(--combat-enemy-lighter) 90%, transparent);
    background: color-mix(in srgb, var(--combat-enemy-lighter) 15%, transparent);
}

/* Hide overlays on desktop — they are only for touch */
@media (hover: hover) and (pointer: fine) {
    .hex-touch-overlay[b-nog2z1p06p] {
        display: none !important;
    }
}

/* ======================================================
   MOVEMENT MODE — active button state + transition
   ====================================================== */

/* Active state for movement mode toggle button */
.touch-ctrl-btn.touch-ctrl-active[b-nog2z1p06p] {
    background: rgba(200, 170, 60, 0.20);
    border-color: rgba(200, 170, 60, 0.50);
    color: rgba(255, 215, 0, 0.95);
}

.touch-ctrl-btn.touch-ctrl-active:active[b-nog2z1p06p] {
    background: rgba(200, 170, 60, 0.35);
}

/* Smooth zoom transition for movement mode entry/exit */
.board-iso-container.movement-mode-transition[b-nog2z1p06p] {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ======================================================
   MOVEMENT MODE BANNER — "Tap a hex to move" indicator
   ====================================================== */

.movement-mode-banner[b-nog2z1p06p] {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(200, 170, 60, 0.15);
    border: 1px solid rgba(200, 170, 60, 0.40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 215, 0, 0.90);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
    animation: movementBannerFadeIn-b-nog2z1p06p 0.3s ease-out;
}

.movement-mode-banner .material-icons[b-nog2z1p06p] {
    font-size: 16px;
    opacity: 0.85;
}

@keyframes movementBannerFadeIn-b-nog2z1p06p {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- Phase 9: camera focus pulse (panToHex feedback) ----
   Brief glow that fires when JS panToHex highlights a hex via initiative
   click, log click-to-replay, or any future camera-cue path. The class is
   added by combat/index.js and removed after ~950ms. Honors reduced-motion. */
.hex-cell.hex-camera-focus[b-nog2z1p06p] {
    animation: hexCameraFocusPulse-b-nog2z1p06p 0.9s ease-out;
    filter: url(#zone-glow) brightness(1.4);
}

@keyframes hexCameraFocusPulse-b-nog2z1p06p {
    0%   { stroke-opacity: 1; stroke: rgba(255, 230, 120, 0.95); stroke-width: 2.4; }
    40%  { stroke-opacity: 0.85; stroke: rgba(255, 200, 80, 0.85); stroke-width: 1.8; }
    100% { stroke-opacity: 0.40; stroke-width: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
    .hex-cell.hex-camera-focus[b-nog2z1p06p] { animation: none; filter: none; }
}

/* ======================================================
   AOE FOOTPRINT PREVIEW (decision 7A)
   ====================================================== */

/* While an area damage spell with a footprint is aimed, the viewport carries .aoe-footprint-mode.
   Every legal anchor gets a static dashed stroke: box-shadow (the global .spell-target-glow) does not
   paint on an SVG polygon, and its opacity pulse stops under prefers-reduced-motion, so the glow alone
   barely marked them. Hovering or focusing an anchor lights every enemy it would strike with a solid
   fill and stroke in --color-aoe-footprint (fuchsia: its own token, so it never reads as action amber
   or bonus blue). boardTouch.js toggles .spell-aoe-footprint on those hexes and tokens from the
   anchor's data-aoe-footprint. The footprint rule comes after the anchor rule, so a lit anchor reads as
   struck rather than aimable. Gating on the viewport class means a class left behind by a cast never
   shows.
   These rules must stay LAST in this file. They tie the zone tints and biome palettes above at (0,5,0)
   once scoped, and source order breaks the tie. Static (no animation), so nothing to relax for
   reduced motion. */
.board-zoom-viewport.aoe-footprint-mode .hex-cell.spell-target-glow[b-nog2z1p06p] {
    stroke: var(--color-text-primary);
    stroke-width: 1.2;
    stroke-dasharray: 3 2;
    stroke-opacity: 0.9;
}

.board-zoom-viewport.aoe-footprint-mode .hex-cell.spell-aoe-footprint[b-nog2z1p06p] {
    fill: color-mix(in srgb, var(--color-aoe-footprint) 30%, var(--color-bg-base));
    stroke: var(--color-aoe-footprint);
    stroke-width: 1.4;
    stroke-dasharray: none;
    stroke-opacity: 1;
}

.board-zoom-viewport.aoe-footprint-mode .hex-token-anchor.spell-aoe-footprint .token[b-nog2z1p06p] {
    outline: 2px solid var(--color-aoe-footprint);
    outline-offset: 1px;
}

/* ======================================================
   BOARD AIMING (HUD decision D10) + THREAT OVERLAY (F11)
   ====================================================== */

/* While an action is aimed the viewport carries .aim-mode plus the action's turn slot: --aim-eco is
   --color-eco-action (amber) or --color-eco-bonus (blue), the only colors a turn slot wears (design skill
   "Action economy tokens"). Valid targets' base discs fill with it and their cards wear a crisp outline in it, the
   armed one a stronger fill and outline (WP12e: the old drop-shadow glow and pulse spread over the status rail);
   targets the engine refuses dim (their reason shows on hover / focus), the range ring is dashed in it, and whatever
   the armed action would strike (an area spell's footprint, Multi-Shot's zone) wears --color-aoe-footprint, like the
   7A hover preview. Outlines, not box-shadow, each within 3px of the card.
   Like the 7A block above, these rules must stay LAST: the hex rules tie the zone tints and biome palettes
   at (0,5,0) once scoped, and source order breaks the tie. */
.board-zoom-viewport.aim-mode[b-nog2z1p06p] {
    --aim-eco: var(--color-eco-action);
}

.board-zoom-viewport.aim-mode.aim-eco-bonus[b-nog2z1p06p] {
    --aim-eco: var(--color-eco-bonus);
}

/* Range ring: the hexes exactly the action's reach from the caster (already board-scaled, decision 5A). */
.board-zoom-viewport.aim-mode .hex-cell.aim-range-edge[b-nog2z1p06p] {
    stroke: var(--aim-eco);
    stroke-width: 1.3;
    stroke-dasharray: 3 2;
    stroke-opacity: 0.9;
}

/* What the armed action would strike. */
.board-zoom-viewport.aim-mode .hex-cell.aim-strike[b-nog2z1p06p] {
    fill: color-mix(in srgb, var(--color-aoe-footprint) 30%, var(--color-bg-base));
    stroke: var(--color-aoe-footprint);
    stroke-width: 1.4;
    stroke-dasharray: none;
    stroke-opacity: 1;
}

/* The card wears a crisp outline in the aim's color (WP12e: no drop-shadow glow and no pulse, which reached into the
   status rails); the base disc carries the fill (Ground state above). Every outline stays within 3px of the card. */
.board-zoom-viewport.aim-mode .token.aim-valid[b-nog2z1p06p] {
    cursor: pointer;
    outline: 1px solid var(--aim-eco);
    outline-offset: 1px;
}

.board-zoom-viewport.aim-mode .token.aim-invalid[b-nog2z1p06p] {
    cursor: not-allowed;
    opacity: 0.4;
    filter: grayscale(0.8);
}

.board-zoom-viewport.aim-mode .token.aim-strike[b-nog2z1p06p] {
    outline: 2px solid var(--color-aoe-footprint);
    outline-offset: 1px;
}

.board-zoom-viewport.aim-mode .token.aim-armed[b-nog2z1p06p] {
    outline: 2px solid var(--aim-eco);
    outline-offset: 1px;
}

/* Self aim (F16): the caster's own token is armed until the second press. */
.board-zoom-viewport.aim-mode .token.aim-self-armed[b-nog2z1p06p] {
    outline: 2px solid var(--aim-eco);
    outline-offset: 1px;
}

/* The aim on the ground: valid targets' base discs fill with the aimed slot's color, the armed one strongly; what
   the armed action would strike fills fuchsia; a refused one has no fill (its card dims). Each fill is a pool that
   fades before the rim, so the ring (the side's, or gold for whose turn it is) always reads, never dimmed. */
.board-zoom-viewport.aim-mode .token-base.base-aim-valid[b-nog2z1p06p] {
    --token-base-tint: radial-gradient(closest-side,
        color-mix(in srgb, var(--aim-eco) 55%, transparent) 0%,
        color-mix(in srgb, var(--aim-eco) 36%, transparent) 66%,
        transparent 88%);
}

.board-zoom-viewport.aim-mode .token-base.base-aim-armed[b-nog2z1p06p] {
    --token-base-tint: radial-gradient(closest-side,
        color-mix(in srgb, var(--aim-eco) 90%, transparent) 0%,
        color-mix(in srgb, var(--aim-eco) 72%, transparent) 70%,
        transparent 90%);
}

.board-zoom-viewport.aim-mode .token-base.base-aim-strike[b-nog2z1p06p] {
    --token-base-tint: radial-gradient(closest-side,
        color-mix(in srgb, var(--color-aoe-footprint) 70%, transparent) 0%,
        color-mix(in srgb, var(--color-aoe-footprint) 50%, transparent) 70%,
        transparent 90%);
}

.board-zoom-viewport.aim-mode .token-base.base-aim-invalid[b-nog2z1p06p] {
    --token-base-tint: none;
}

/* F11 threat overlay: hexes an enemy can reach and hit in melee on its next turn (ZoneHexLayout.GetThreatenedHexes,
   the monster AI's own movement budget, boss +1 included). A stroke, not a fill, so a movable hex keeps its
   Move tint and reads "you can go here, but it is threatened". The stroke is dotted as well as colored (WP12h), so
   "threatened" never rests on hue alone: a Move hex's edge is solid, the aim's range ring dashed (a ring or struck
   hex keeps its own dash pattern). */
.board-zoom-viewport.threat-overlay .hex-cell.hex-threatened[b-nog2z1p06p] {
    stroke: var(--combat-threat);
    stroke-width: 1.5;
    stroke-opacity: 0.85;
}

.board-zoom-viewport.threat-overlay .hex-cell.hex-threatened:not(.aim-range-edge):not(.aim-strike)[b-nog2z1p06p] {
    stroke-dasharray: 0.01 3;
    stroke-linecap: round;
}

/* Identity: the "#N" of a duplicate monster (MonsterRoster.StampDisplayNames), on the flat token HUD, inside the
   card's top-left corner (WP12e: it poked above the card, into the intent bubble's room; the split status rails hold
   the top-right edge and the bottom-left one under it). */
.token-ordinal-badge[b-nog2z1p06p] {
    position: absolute;
    top: 2px;
    left: 2px;
    transform: scale(var(--token-ui-scale, 1));
    transform-origin: 0 0;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--color-bg-base);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 12px;
    text-align: center;
    pointer-events: none;
    z-index: 7;
}

/* Ground labels (WP12e): the party nameplate and the enemy nameplate (or, for a target the aim refuses, the engine's
   reason in its place) stack under the base, under the ground mark's front edge (the anchor's --mark-half-h), upright.
   They used to sit over the card
   (party) or over the base's front (enemy). The enemy label shows on hover / focus, on the selected monster and on
   valid targets while aiming. */
.token-ground-labels[b-nog2z1p06p] {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: max-content;
    transform: translateX(-50%) rotateX(var(--board-counter-tilt, -42deg))
               translateY(calc(var(--mark-half-h) * cos(var(--board-counter-tilt, -42deg)) + 4px))
               translateZ(var(--label-z, 12px)) scale(var(--token-ui-scale, 1));
    transform-origin: 50% 0;
    pointer-events: none;
    z-index: 27;
}

/* The labels of the token the player is working with (hovered, focused, selected, armed) come in front of the card
   rows in front of it; the rest keep the plane's own order, so a back-row token's name hides behind the cards in
   front of it instead of landing on them. A hovered token's status rail (70px) still comes in front of them. */
.token-ground-labels.is-raised[b-nog2z1p06p],
.hex-token-anchor:hover .token-ground-labels[b-nog2z1p06p],
.hex-token-anchor:has(:focus-visible) .token-ground-labels[b-nog2z1p06p] {
    --label-z: 60px;
}

.token-ground-labels.is-armed[b-nog2z1p06p] {
    --label-z: 64px;
}

.token-enemy-label[b-nog2z1p06p] {
    display: none;
    max-width: 120px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg-base) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--combat-enemy-light) 50%, transparent);
    color: var(--color-text-primary);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

.token-enemy-label.is-shown[b-nog2z1p06p],
.hex-token-anchor:hover .token-enemy-label[b-nog2z1p06p],
.hex-token-anchor:has(:focus-visible) .token-enemy-label[b-nog2z1p06p] {
    display: block;
}

.board-zoom-viewport.aim-mode .token-enemy-nameplate.is-shown[b-nog2z1p06p] {
    border-color: color-mix(in srgb, var(--aim-eco) 70%, transparent);
}

.board-zoom-viewport.aim-mode .token-enemy-nameplate.is-armed[b-nog2z1p06p] {
    border-color: var(--aim-eco);
    color: var(--aim-eco);
}

.token-aim-reason[b-nog2z1p06p] {
    max-width: 170px;
    border-color: color-mix(in srgb, var(--color-text-secondary) 50%, transparent);
    color: var(--color-text-secondary);
    font-weight: 600;
}

/* The 1024 tier's board is small: labels would bury it (the banner names the target there). The ordinal badge
   scales with the card (--token-ui-scale) on every tier. */
@media (max-width: 1024px) {
    :where(.tablet-hud) .token-enemy-label[b-nog2z1p06p],
    :where(.tablet-hud) .token-enemy-label.is-shown[b-nog2z1p06p],
    :where(.tablet-hud) .hex-token-anchor:hover .token-enemy-label[b-nog2z1p06p],
    :where(.tablet-hud) .hex-token-anchor:has(:focus-visible) .token-enemy-label[b-nog2z1p06p] {
        display: none;
    }
}

/* The touch tiers' pending banner, laid over the top of the board (the dock shows it on Desktop/Wide). */
.board-aim-strip[b-nog2z1p06p] {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 16px));
    z-index: 35;
    pointer-events: auto;
}

/* ======================================================
   ALLY AIMING (combat HUD rethink WP10 on Desktop/Wide, WP11 on the tablet; multiplayer)
   ======================================================
   A heal, buff or Lay on Hands aimed at a party member reuses the enemy aim's rules above: the viewport carries
   .aim-mode with the action's --aim-eco, valid player tokens get .aim-valid, the armed one .aim-armed, refused ones
   .aim-invalid (their engine reason shows on hover, like an enemy's). Player tokens are spans, so each aimed one gets
   a transparent hit button laid over it (.token-ally-aim-hit). A Downed member a heal can reach drops the Downed
   fade and wears a "Revive" label, so the rescue reads first. Kept last for the same tie-break reason. */
.token-ally-aim-hit[b-nog2z1p06p] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    z-index: 2;
}

.board-zoom-viewport.aim-mode .token.aim-invalid .token-ally-aim-hit[b-nog2z1p06p] {
    cursor: not-allowed;
}

.token-ally-aim-hit:focus-visible[b-nog2z1p06p] {
    outline: 2px solid var(--aim-eco, var(--color-primary));
    outline-offset: -2px;
}

.board-zoom-viewport.aim-mode .token.token-downed.aim-valid[b-nog2z1p06p] {
    opacity: 1;
    pointer-events: all;
}

.token-ally-revive[b-nog2z1p06p] {
    border-color: var(--aim-eco, var(--combat-bad-light));
    color: var(--aim-eco, var(--combat-bad-lighter));
}
/* /Components/Combat/ZoneCard.razor.rz.scp.css */
/* ZoneCard component scoped styles */

/* ===== BASE ZONE CARD ===== */
.zone-card[b-dfw9jzecwk] {
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
    border-radius: 8px;
}

/* ===== COMPACT ZONE CARD (portrait tablet) ===== */
.zone-card-compact[b-dfw9jzecwk] {
    padding: 8px !important;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zone-compact-header[b-dfw9jzecwk] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.zone-compact-name[b-dfw9jzecwk] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.zone-compact-name.player[b-dfw9jzecwk] {
    color: rgba(59, 130, 246, 0.9);
}

.zone-compact-name.enemy[b-dfw9jzecwk] {
    color: rgba(239, 68, 68, 0.9);
}

.zone-compact-full[b-dfw9jzecwk] {
    font-size: 0.9rem;
    color: rgba(251, 191, 36, 0.9);
    line-height: 1;
}

.zone-compact-you[b-dfw9jzecwk] {
    font-size: 0.6rem;
    font-weight: 700;
    background: rgba(255, 215, 0, 0.2);
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 3px;
    padding: 1px 4px;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.zone-compact-occupants[b-dfw9jzecwk] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* Touch-friendly occupant buttons — 40x40 min for tablet */
.zone-occ-btn[b-dfw9jzecwk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: rgba(0, 0, 0, 0.25);
    cursor: default;
    transition: all 0.15s ease;
    padding: 0;
}

.zone-occ-btn.enemy-occ[b-dfw9jzecwk] {
    border-color: rgba(239, 68, 68, 0.4);
    cursor: pointer;
}

.zone-occ-btn.enemy-occ:hover[b-dfw9jzecwk],
.zone-occ-btn.enemy-occ:active[b-dfw9jzecwk] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.8);
    transform: scale(1.05);
}

.zone-occ-btn.enemy-occ.selected[b-dfw9jzecwk] {
    border-color: #fb923c;
    background: rgba(251, 146, 60, 0.2);
    box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.4);
}

.zone-occ-btn.player-occ[b-dfw9jzecwk] {
    border-color: rgba(59, 130, 246, 0.4);
}

.zone-occ-more[b-dfw9jzecwk] {
    font-size: 0.65rem;
    color: rgba(148, 163, 184, 0.8);
    font-weight: 600;
}

.zone-compact-empty[b-dfw9jzecwk] {
    font-size: 0.75rem;
    color: rgba(100, 116, 139, 0.6);
    font-style: italic;
}

.zone-compact-hazards[b-dfw9jzecwk] {
    display: flex;
    gap: 2px;
    margin-top: 2px;
}



/* ===== PLAYER SIDE — blue left border accent only ===== */
.zone-card.player-zone[b-dfw9jzecwk] {
    border-left: 3px solid var(--color-zone-player-accent) !important;
}

/* ===== ENEMY SIDE — red left border accent only ===== */
.zone-card.enemy-zone[b-dfw9jzecwk] {
    border-left: 3px solid var(--color-zone-enemy-accent) !important;
}

/* ===== ZONE TYPE THEMING (from landing page CombatShowcase) ===== */
.zone-card.zone-type-vanguard[b-dfw9jzecwk] {
    background: var(--color-zone-vanguard-bg) !important;
    border-color: var(--color-zone-vanguard-border);
}

.zone-card.zone-type-flank[b-dfw9jzecwk] {
    background: var(--color-zone-flank-bg) !important;
    border-color: var(--color-zone-flank-border);
}

.zone-card.zone-type-rear[b-dfw9jzecwk] {
    background: var(--color-zone-rear-bg) !important;
    border-color: var(--color-zone-rear-border);
}

/* Zone type text glow */
.zone-card.zone-type-vanguard .zone-header .mud-typography[b-dfw9jzecwk] { text-shadow: 0 0 8px rgba(239, 68, 68, 0.35); }
.zone-card.zone-type-flank .zone-header .mud-typography[b-dfw9jzecwk]   { text-shadow: 0 0 8px rgba(245, 158, 11, 0.35); }
.zone-card.zone-type-rear .zone-header .mud-typography[b-dfw9jzecwk]    { text-shadow: 0 0 8px rgba(59, 130, 246, 0.35); }

/* Zone hover lift — only on idle cards (not active/pending states) */
.zone-card:not(.current-player-zone):not(.available-move):not(.pending-move):not(.empty-zone):hover[b-dfw9jzecwk] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ===== EMPTY ZONE — dimmed ===== */
.zone-card.empty-zone[b-dfw9jzecwk] {
    opacity: 0.55;
}

/* ===== ACTIVE MOVE STATES ===== */
.zone-card.current-player-zone[b-dfw9jzecwk] {
    opacity: 1;
}

.zone-card.available-move[b-dfw9jzecwk] {
    opacity: 1;
}
/* /Components/Friends/ActivityFeed.razor.rz.scp.css */
.activity-feed[b-fax3bfvfg4] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Loading & Empty States */
.loading-state[b-fax3bfvfg4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
}

.spinner[b-fax3bfvfg4] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 215, 0, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-fax3bfvfg4 0.8s linear infinite;
}

.spinner-small[b-fax3bfvfg4] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-hover);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-fax3bfvfg4 0.8s linear infinite;
}

@keyframes spin-b-fax3bfvfg4 {
    to { transform: rotate(360deg); }
}

.empty-state[b-fax3bfvfg4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
}

.empty-state .material-icons[b-fax3bfvfg4] {
    font-size: 4rem;
    color: var(--color-text-tertiary);
}

.empty-state p[b-fax3bfvfg4] {
    color: var(--color-text-light);
    font-size: 1.1rem;
    margin: 0;
    max-width: 500px;
}

.empty-hint[b-fax3bfvfg4] {
    color: var(--color-text-secondary) !important;
    font-size: 0.95rem !important;
}

/* Activity List */
.activity-list[b-fax3bfvfg4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-card[b-fax3bfvfg4] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.activity-card:hover[b-fax3bfvfg4] {
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--color-border-hover);
    transform: translateX(4px);
}

/* Activity Icon */
.activity-icon[b-fax3bfvfg4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.05);
    flex-shrink: 0;
}

.activity-icon .material-icons[b-fax3bfvfg4] {
    font-size: 24px;
}

/* Activity Content */
.activity-content[b-fax3bfvfg4] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.activity-title[b-fax3bfvfg4] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.activity-description[b-fax3bfvfg4] {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.activity-meta[b-fax3bfvfg4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.meta-item[b-fax3bfvfg4] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.meta-item .material-icons[b-fax3bfvfg4] {
    font-size: 1rem;
}

/* Activity Action */
.activity-action[b-fax3bfvfg4] {
    display: flex;
    align-items: center;
}

.action-link[b-fax3bfvfg4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-link:hover[b-fax3bfvfg4] {
    background: var(--color-border-base);
    transform: scale(1.1);
}

.action-link .material-icons[b-fax3bfvfg4] {
    font-size: 1.25rem;
}

/* Activity Type Colors */
.activity-card.levelup[b-fax3bfvfg4] {
    border-left: 3px solid var(--color-info);
}

.activity-card.bossdefeat[b-fax3bfvfg4] {
    border-left: 3px solid var(--color-warning-bright);
}

.activity-card.rareloot[b-fax3bfvfg4] {
    border-left: 3px solid #a855f7;
}

.activity-card.achievement[b-fax3bfvfg4] {
    border-left: 3px solid var(--color-success);
}

.activity-card.newcharacter[b-fax3bfvfg4] {
    border-left: 3px solid var(--color-info-light);
}

.activity-card.adventurecomplete[b-fax3bfvfg4] {
    border-left: 3px solid var(--color-cleric);
}

/* Load More */
.load-more[b-fax3bfvfg4] {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.btn-load-more[b-fax3bfvfg4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-load-more:hover:not(:disabled)[b-fax3bfvfg4] {
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
}

.btn-load-more:disabled[b-fax3bfvfg4] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-load-more .material-icons[b-fax3bfvfg4] {
    font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .activity-card[b-fax3bfvfg4] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .activity-action[b-fax3bfvfg4] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Quick-Join Button */
.quick-join-btn[b-fax3bfvfg4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-join-btn:hover[b-fax3bfvfg4] {
    background: linear-gradient(135deg, var(--color-info-dark) 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.quick-join-btn .material-icons[b-fax3bfvfg4] {
    font-size: 1.125rem;
}

.join-text[b-fax3bfvfg4] {
    display: inline-block;
}

@media (max-width: 768px) {
    .join-text[b-fax3bfvfg4] {
        display: none;
    }
    
    .quick-join-btn[b-fax3bfvfg4] {
        padding: 0.5rem;
        min-width: 40px;
        justify-content: center;
    }
}

/* /Components/Friends/BlockedUsersList.razor.rz.scp.css */
.blocked-users-list[b-jc7zc9rvng] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Loading & Empty States */
.loading-state[b-jc7zc9rvng] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
}

.spinner[b-jc7zc9rvng] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 215, 0, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-jc7zc9rvng 0.8s linear infinite;
}

@keyframes spin-b-jc7zc9rvng {
    to { transform: rotate(360deg); }
}

.empty-state[b-jc7zc9rvng] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
}

.empty-state .material-icons[b-jc7zc9rvng] {
    font-size: 4rem;
    color: var(--color-text-tertiary);
}

.empty-state p[b-jc7zc9rvng] {
    color: var(--color-text-light);
    font-size: 1.1rem;
    margin: 0;
    max-width: 500px;
}

.empty-hint[b-jc7zc9rvng] {
    color: var(--color-text-secondary) !important;
    font-size: 0.95rem !important;
}

/* Blocked List */
.blocked-list[b-jc7zc9rvng] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blocked-card[b-jc7zc9rvng] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-left: 3px solid var(--color-danger);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.blocked-card:hover[b-jc7zc9rvng] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Blocked Info */
.blocked-info[b-jc7zc9rvng] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.blocked-avatar[b-jc7zc9rvng] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid rgba(239, 68, 68, 0.3);
    flex-shrink: 0;
}

.blocked-avatar .material-icons[b-jc7zc9rvng] {
    font-size: 24px;
    color: var(--color-danger-light);
}

.blocked-details[b-jc7zc9rvng] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.blocked-name[b-jc7zc9rvng] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.blocked-meta[b-jc7zc9rvng] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-danger-light);
    font-size: 0.875rem;
    margin: 0;
}

.blocked-meta .material-icons[b-jc7zc9rvng] {
    font-size: 1rem;
}

.blocked-reason[b-jc7zc9rvng] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
    font-style: italic;
}

/* Blocked Actions */
.blocked-actions[b-jc7zc9rvng] {
    display: flex;
    align-items: center;
}

.btn-unblock[b-jc7zc9rvng] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    color: var(--color-success);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-unblock .material-icons[b-jc7zc9rvng] {
    font-size: 1.125rem;
}

.btn-unblock:hover[b-jc7zc9rvng] {
    background: rgba(34, 197, 94, 0.2);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .blocked-card[b-jc7zc9rvng] {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem;
    }

    .blocked-info[b-jc7zc9rvng] {
        width: 100%;
    }

    .blocked-actions[b-jc7zc9rvng] {
        width: 100%;
        justify-content: flex-end;
    }

    .btn-unblock[b-jc7zc9rvng] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Friends/ConversationList.razor.rz.scp.css */
.conversation-list[b-bygb7wt996] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header */
.list-header[b-bygb7wt996] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    flex-shrink: 0;
}

.list-header h3[b-bygb7wt996] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-refresh[b-bygb7wt996] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh:hover[b-bygb7wt996] {
    background: var(--color-border-base);
    transform: rotate(90deg);
}

.btn-refresh .material-icons[b-bygb7wt996] {
    font-size: 1.25rem;
}

/* Search */
.search-box[b-bygb7wt996] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    flex-shrink: 0;
}

.search-box .material-icons[b-bygb7wt996] {
    color: var(--color-text-tertiary);
    font-size: 1.25rem;
}

.search-box input[b-bygb7wt996] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    outline: none;
}

.search-box input[b-bygb7wt996]::placeholder {
    color: var(--color-text-tertiary);
}

/* Conversations Scroll */
.conversations-scroll[b-bygb7wt996] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.conversations-scroll[b-bygb7wt996]::-webkit-scrollbar {
    width: 6px;
}

.conversations-scroll[b-bygb7wt996]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
}

.conversations-scroll[b-bygb7wt996]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: 3px;
}

.conversations-scroll[b-bygb7wt996]::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-active);
}

/* Conversation Item */
.conversation-item[b-bygb7wt996] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.05);
    cursor: pointer;
    transition: all 0.15s ease;
}

.conversation-item:hover[b-bygb7wt996] {
    background: rgba(255, 215, 0, 0.05);
}

.conversation-item.active[b-bygb7wt996] {
    background: rgba(255, 215, 0, 0.1);
    border-left: 3px solid var(--color-primary);
    padding-left: calc(1.5rem - 3px);
}

.conversation-item.unread[b-bygb7wt996] {
    background: rgba(59, 130, 246, 0.02);
}

/* Avatar */
.conversation-avatar[b-bygb7wt996] {
    position: relative;
    flex-shrink: 0;
}

.avatar-circle[b-bygb7wt996] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-border-active);
}

.avatar-circle .material-icons[b-bygb7wt996] {
    font-size: 24px;
    color: var(--color-primary);
}

.avatar-circle.online[b-bygb7wt996]::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: var(--color-success);
    border: 2px solid var(--color-gray-900);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.unread-badge[b-bygb7wt996] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    background: var(--color-info);
    border: 2px solid var(--color-gray-900);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Content */
.conversation-content[b-bygb7wt996] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.conversation-header[b-bygb7wt996] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.conversation-name[b-bygb7wt996] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-time[b-bygb7wt996] {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.conversation-preview[b-bygb7wt996] {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item.unread .conversation-preview[b-bygb7wt996] {
    color: var(--color-text-primary);
    font-weight: 500;
}

.you-label[b-bygb7wt996] {
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Empty List */
.empty-list[b-bygb7wt996] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-list .material-icons[b-bygb7wt996] {
    font-size: 3rem;
    color: var(--color-text-tertiary);
}

.empty-list p[b-bygb7wt996] {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin: 0;
}
/* /Components/Friends/FriendCard.razor.rz.scp.css */
.friend-card[b-wy5ztsoayb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.friend-card:hover[b-wy5ztsoayb] {
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.friend-card.favorite[b-wy5ztsoayb] {
    border-color: var(--color-border-active);
    background: rgba(255, 215, 0, 0.02);
}

.friend-card.list[b-wy5ztsoayb] {
    padding: 1.25rem 1.5rem;
}

/* Friend Info */
.friend-info[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.friend-avatar[b-wy5ztsoayb] {
    position: relative;
    flex-shrink: 0;
}

.avatar-circle[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-border-active);
}

.list .avatar-circle[b-wy5ztsoayb] {
    width: 48px;
    height: 48px;
}

.avatar-circle .material-icons[b-wy5ztsoayb] {
    font-size: 28px;
    color: var(--color-primary);
}

.status-dot[b-wy5ztsoayb] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-gray-900);
}

.status-dot.online[b-wy5ztsoayb] {
    background: var(--color-success);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.status-dot.away[b-wy5ztsoayb] {
    background: var(--color-warning);
}

.status-dot.busy[b-wy5ztsoayb] {
    background: var(--color-danger);
}

.status-dot.offline[b-wy5ztsoayb] {
    background: var(--color-text-tertiary);
}

/* Friend Details */
.friend-details[b-wy5ztsoayb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.friend-header[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.friend-name[b-wy5ztsoayb] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favorite-icon[b-wy5ztsoayb] {
    font-size: 1rem;
    color: var(--color-primary);
}

.muted-badge[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    background: rgba(100, 116, 139, 0.2);
    border-radius: 4px;
}

.muted-badge .material-icons[b-wy5ztsoayb] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.friend-meta[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.status-text[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-text .material-icons[b-wy5ztsoayb] {
    font-size: 0.75rem;
}

.status-text.online[b-wy5ztsoayb] {
    color: var(--color-success);
}

.status-text.away[b-wy5ztsoayb] {
    color: var(--color-warning);
}

.status-text.busy[b-wy5ztsoayb] {
    color: var(--color-danger);
}

.status-text.offline[b-wy5ztsoayb] {
    color: var(--color-text-secondary);
}

.activity-text[b-wy5ztsoayb] {
    color: var(--color-text-light);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-stats[b-wy5ztsoayb] {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.25rem;
}

.stat-item[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.stat-item .material-icons[b-wy5ztsoayb] {
    font-size: 1rem;
}

/* Friend Actions */
.friend-actions[b-wy5ztsoayb] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.action-btn[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn .material-icons[b-wy5ztsoayb] {
    font-size: 1.25rem;
}

.list .action-btn span:not(.material-icons)[b-wy5ztsoayb] {
    display: inline;
    font-size: 0.875rem;
    font-weight: 500;
}

.list .action-btn[b-wy5ztsoayb] {
    width: auto;
    padding: 0 1rem;
}

.action-btn:hover[b-wy5ztsoayb] {
    background: rgba(255, 215, 0, 0.05);
    border-color: var(--color-border-hover);
    color: var(--color-primary);
}

.action-btn.primary[b-wy5ztsoayb] {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--color-border-hover);
    color: var(--color-primary);
}

.action-btn.primary:hover[b-wy5ztsoayb] {
    background: var(--color-border-base);
}

.action-btn.active[b-wy5ztsoayb] {
    color: var(--color-primary);
}

/* Dropdown */
.dropdown[b-wy5ztsoayb] {
    position: relative;
}

.dropdown-toggle:focus + .dropdown-menu[b-wy5ztsoayb],
.dropdown-menu:hover[b-wy5ztsoayb] {
    display: block;
}

.dropdown-menu[b-wy5ztsoayb] {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 200px;
    padding: 0.5rem;
    background: var(--color-gray-800);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

.dropdown-item[b-wy5ztsoayb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-text-light);
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dropdown-item .material-icons[b-wy5ztsoayb] {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
}

.dropdown-item:hover[b-wy5ztsoayb] {
    background: rgba(255, 215, 0, 0.05);
    color: var(--color-primary);
}

.dropdown-item:hover .material-icons[b-wy5ztsoayb] {
    color: var(--color-primary);
}

.dropdown-item.danger:hover[b-wy5ztsoayb] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger-light);
}

.dropdown-item.danger:hover .material-icons[b-wy5ztsoayb] {
    color: var(--color-danger-light);
}

.dropdown-divider[b-wy5ztsoayb] {
    height: 1px;
    margin: 0.5rem 0;
    background: rgba(255, 215, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .friend-card[b-wy5ztsoayb] {
        flex-direction: column;
        align-items: flex-start;
    }

    .friend-info[b-wy5ztsoayb] {
        width: 100%;
    }

    .friend-actions[b-wy5ztsoayb] {
        width: 100%;
        justify-content: flex-end;
    }

    .list .action-btn[b-wy5ztsoayb] {
        width: 40px;
        padding: 0;
    }

    .list .action-btn span:not(.material-icons)[b-wy5ztsoayb] {
        display: none;
    }
}
/* /Components/Friends/FriendListView.razor.rz.scp.css */
.friend-list-view[b-m7pddgq47e] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* List Controls */
.list-controls[b-m7pddgq47e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.search-box[b-m7pddgq47e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    max-width: 400px;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
}

.search-box .material-icons[b-m7pddgq47e] {
    color: var(--color-text-tertiary);
    font-size: 1.25rem;
}

.search-box input[b-m7pddgq47e] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 1rem;
    outline: none;
}

.search-box input[b-m7pddgq47e]::placeholder {
    color: var(--color-text-tertiary);
}

.view-controls[b-m7pddgq47e] {
    display: flex;
    gap: 0.5rem;
}

.view-toggle[b-m7pddgq47e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle .material-icons[b-m7pddgq47e] {
    font-size: 1.25rem;
}

.view-toggle:hover[b-m7pddgq47e] {
    background: rgba(255, 215, 0, 0.05);
    border-color: var(--color-border-hover);
}

.view-toggle.active[b-m7pddgq47e] {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--color-border-active);
    color: var(--color-primary);
}

/* Friends Container */
.friends-container[b-m7pddgq47e] {
    display: grid;
    gap: 1rem;
}

.friends-container.grid[b-m7pddgq47e] {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.friends-container.list[b-m7pddgq47e] {
    grid-template-columns: 1fr;
}

/* Empty State */
.empty-state[b-m7pddgq47e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
}

.empty-state .material-icons[b-m7pddgq47e] {
    font-size: 4rem;
    color: var(--color-text-tertiary);
}

.empty-state p[b-m7pddgq47e] {
    color: var(--color-text-light);
    font-size: 1.1rem;
    margin: 0;
}

.empty-hint[b-m7pddgq47e] {
    color: var(--color-text-secondary) !important;
    font-size: 0.95rem !important;
}

/* Responsive */
@media (max-width: 768px) {
    .list-controls[b-m7pddgq47e] {
        flex-direction: column;
        gap: 1rem;
    }

    .search-box[b-m7pddgq47e] {
        max-width: 100%;
    }

    .friends-container.grid[b-m7pddgq47e] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Friends/FriendRequestList.razor.rz.scp.css */
.friend-request-list[b-yhg89t85ut] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Loading State */
.loading-state[b-yhg89t85ut] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
}

.spinner[b-yhg89t85ut] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 215, 0, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-yhg89t85ut 0.8s linear infinite;
}

@keyframes spin-b-yhg89t85ut {
    to { transform: rotate(360deg); }
}

/* Request Section */
.request-section[b-yhg89t85ut] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-title[b-yhg89t85ut] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

.section-title .material-icons[b-yhg89t85ut] {
    font-size: 1.5rem;
}

.section-title .badge[b-yhg89t85ut] {
    background: var(--color-border-hover);
    color: var(--color-primary);
    padding: 0.125rem 0.625rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Request Cards */
.request-cards[b-yhg89t85ut] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.request-card[b-yhg89t85ut] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.request-card:hover[b-yhg89t85ut] {
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--color-border-hover);
}

.request-card.received[b-yhg89t85ut] {
    border-left: 3px solid var(--color-success);
}

.request-card.sent[b-yhg89t85ut] {
    border-left: 3px solid var(--color-info-light);
}

/* Request Info */
.request-info[b-yhg89t85ut] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.request-avatar[b-yhg89t85ut] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-border-active);
    flex-shrink: 0;
}

.request-avatar .material-icons[b-yhg89t85ut] {
    font-size: 24px;
    color: var(--color-primary);
}

.request-details[b-yhg89t85ut] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.request-name[b-yhg89t85ut] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.request-message[b-yhg89t85ut] {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.request-time[b-yhg89t85ut] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.request-time .material-icons[b-yhg89t85ut] {
    font-size: 1rem;
}

/* Request Actions */
.request-actions[b-yhg89t85ut] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.request-actions button[b-yhg89t85ut] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.request-actions .material-icons[b-yhg89t85ut] {
    font-size: 1.125rem;
}

.btn-accept[b-yhg89t85ut] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--color-success);
}

.btn-accept:hover[b-yhg89t85ut] {
    background: rgba(34, 197, 94, 0.2);
    transform: translateY(-2px);
}

.btn-decline[b-yhg89t85ut] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-danger-light);
}

.btn-decline:hover[b-yhg89t85ut] {
    background: rgba(239, 68, 68, 0.2);
    transform: translateY(-2px);
}

.btn-cancel[b-yhg89t85ut] {
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: var(--color-text-secondary);
}

.btn-cancel:hover[b-yhg89t85ut] {
    background: rgba(100, 116, 139, 0.2);
    transform: translateY(-2px);
}

/* Empty State */
.empty-state[b-yhg89t85ut] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
}

.empty-state .material-icons[b-yhg89t85ut] {
    font-size: 3rem;
    color: var(--color-text-tertiary);
}

.empty-state p[b-yhg89t85ut] {
    color: var(--color-text-light);
    font-size: 1rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .request-card[b-yhg89t85ut] {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem;
    }

    .request-info[b-yhg89t85ut] {
        width: 100%;
    }

    .request-actions[b-yhg89t85ut] {
        width: 100%;
        justify-content: flex-end;
    }

    .request-actions button[b-yhg89t85ut] {
        flex: 1;
    }
}
/* /Components/Friends/InviteFriendDialog.razor.rz.scp.css */
/* Dialog Overlay */
.dialog-overlay[b-l8bqg2k8av] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-l8bqg2k8av 0.2s ease;
}

@keyframes fadeIn-b-l8bqg2k8av {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Dialog Container */
.dialog-container[b-l8bqg2k8av] {
    background: var(--color-gray-800);
    border: 1px solid var(--color-border-active);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-l8bqg2k8av 0.3s ease;
}

@keyframes slideUp-b-l8bqg2k8av {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Dialog Header */
.dialog-header[b-l8bqg2k8av] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border-hover);
}

.dialog-header h3[b-l8bqg2k8av] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.close-btn[b-l8bqg2k8av] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-btn:hover[b-l8bqg2k8av] {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--color-border-active);
    color: var(--color-primary);
}

.close-btn .material-icons[b-l8bqg2k8av] {
    font-size: 1.25rem;
}

/* Dialog Content */
.dialog-content[b-l8bqg2k8av] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.dialog-content[b-l8bqg2k8av]::-webkit-scrollbar {
    width: 6px;
}

.dialog-content[b-l8bqg2k8av]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
}

.dialog-content[b-l8bqg2k8av]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: 3px;
}

/* Alerts */
.alert[b-l8bqg2k8av] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.alert .material-icons[b-l8bqg2k8av] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.alert p[b-l8bqg2k8av] {
    margin: 0;
    line-height: 1.5;
}

.alert-hint[b-l8bqg2k8av] {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 0.5rem !important;
}

.alert.error[b-l8bqg2k8av] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-danger-light);
}

.alert.error .material-icons[b-l8bqg2k8av] {
    color: var(--color-danger-light);
}

.alert.success[b-l8bqg2k8av] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--color-success-light);
}

.alert.success .material-icons[b-l8bqg2k8av] {
    color: var(--color-success-light);
}

/* Form Groups */
.form-group[b-l8bqg2k8av] {
    margin-bottom: 1.5rem;
}

.form-group label[b-l8bqg2k8av] {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.form-group input[b-l8bqg2k8av],
.form-group textarea[b-l8bqg2k8av] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-group input:focus[b-l8bqg2k8av],
.form-group textarea:focus[b-l8bqg2k8av] {
    outline: none;
    border-color: var(--color-border-active);
    background: rgba(15, 23, 42, 0.8);
}

.form-group input:disabled[b-l8bqg2k8av],
.form-group textarea:disabled[b-l8bqg2k8av] {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-group textarea[b-l8bqg2k8av] {
    resize: vertical;
    min-height: 80px;
}

.form-hint[b-l8bqg2k8av] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin: 0.375rem 0 0 0;
}

/* Dialog Actions */
.dialog-actions[b-l8bqg2k8av] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid var(--color-border-hover);
}

.btn-primary[b-l8bqg2k8av],
.btn-secondary[b-l8bqg2k8av] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary .material-icons[b-l8bqg2k8av],
.btn-secondary .material-icons[b-l8bqg2k8av] {
    font-size: 1.125rem;
}

.btn-primary[b-l8bqg2k8av] {
    background: linear-gradient(135deg, var(--color-primary) 0%, #ffed4e 100%);
    color: var(--color-gray-900);
}

.btn-primary:hover:not(:disabled)[b-l8bqg2k8av] {
    background: linear-gradient(135deg, #ffed4e 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-border-active);
}

.btn-primary:disabled[b-l8bqg2k8av] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-l8bqg2k8av] {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: var(--color-text-light);
}

.btn-secondary:hover:not(:disabled)[b-l8bqg2k8av] {
    background: rgba(100, 116, 139, 0.3);
    border-color: rgba(100, 116, 139, 0.4);
}

.btn-secondary:disabled[b-l8bqg2k8av] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Spinner */
.spinner-small[b-l8bqg2k8av] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(15, 23, 42, 0.3);
    border-top-color: var(--color-gray-900);
    border-radius: 50%;
    animation: spin-b-l8bqg2k8av 0.8s linear infinite;
}

@keyframes spin-b-l8bqg2k8av {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .dialog-container[b-l8bqg2k8av] {
        width: 95%;
        max-height: 95vh;
    }

    .dialog-header[b-l8bqg2k8av],
    .dialog-content[b-l8bqg2k8av],
    .dialog-actions[b-l8bqg2k8av] {
        padding: 1.25rem;
    }

    .dialog-actions[b-l8bqg2k8av] {
        flex-direction: column;
    }

    .btn-primary[b-l8bqg2k8av],
    .btn-secondary[b-l8bqg2k8av] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Friends/MessageInput.razor.rz.scp.css */
.message-input[b-n8d25k6q2v] {
    border-top: 1px solid rgba(255, 215, 0, 0.1);
    padding: 1rem 1.5rem;
    flex-shrink: 0;
}

.input-wrapper[b-n8d25k6q2v] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--color-border-hover);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    transition: all 0.2s ease;
}

.input-wrapper:focus-within[b-n8d25k6q2v] {
    border-color: var(--color-border-active);
    background: rgba(15, 23, 42, 0.6);
}

textarea[b-n8d25k6q2v] {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 0.975rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    resize: none;
    outline: none;
    min-height: 24px;
    max-height: 150px;
}

textarea[b-n8d25k6q2v]::placeholder {
    color: var(--color-text-tertiary);
}

textarea:disabled[b-n8d25k6q2v] {
    opacity: 0.5;
    cursor: not-allowed;
}

.input-actions[b-n8d25k6q2v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.char-count[b-n8d25k6q2v] {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
}

.char-count.warning[b-n8d25k6q2v] {
    color: var(--color-warning);
    font-weight: 600;
}

.btn-send[b-n8d25k6q2v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #ffed4e 100%);
    border: none;
    border-radius: 8px;
    color: var(--color-gray-900);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-send:hover:not(:disabled)[b-n8d25k6q2v] {
    background: linear-gradient(135deg, #ffed4e 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-border-active);
}

.btn-send:active:not(:disabled)[b-n8d25k6q2v] {
    transform: translateY(0);
}

.btn-send:disabled[b-n8d25k6q2v] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.btn-send .material-icons[b-n8d25k6q2v] {
    font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .message-input[b-n8d25k6q2v] {
        padding: 0.875rem 1rem;
    }

    .input-wrapper[b-n8d25k6q2v] {
        padding: 0.75rem 0.875rem;
    }
}
/* /Components/Friends/MessageThread.razor.rz.scp.css */
.message-thread[b-yf47xgzeds] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Thread Header */
.thread-header[b-yf47xgzeds] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    flex-shrink: 0;
}

.header-info[b-yf47xgzeds] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.friend-avatar[b-yf47xgzeds] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-border-active);
    flex-shrink: 0;
}

.friend-avatar .material-icons[b-yf47xgzeds] {
    font-size: 24px;
    color: var(--color-primary);
}

.friend-avatar.online[b-yf47xgzeds]::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: var(--color-success);
    border: 2px solid var(--color-gray-900);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.header-details[b-yf47xgzeds] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.friend-name[b-yf47xgzeds] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

.friend-status[b-yf47xgzeds] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.status-indicator[b-yf47xgzeds] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.status-indicator.online[b-yf47xgzeds] {
    color: var(--color-success);
}

.status-indicator .material-icons[b-yf47xgzeds] {
    font-size: 0.875rem;
}

.header-actions[b-yf47xgzeds] {
    display: flex;
    gap: 0.5rem;
}

.action-btn[b-yf47xgzeds] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover[b-yf47xgzeds] {
    background: var(--color-border-base);
}

.action-btn .material-icons[b-yf47xgzeds] {
    font-size: 1.25rem;
}

/* Messages Area */
.messages-area[b-yf47xgzeds] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.messages-area[b-yf47xgzeds]::-webkit-scrollbar {
    width: 6px;
}

.messages-area[b-yf47xgzeds]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
}

.messages-area[b-yf47xgzeds]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: 3px;
}

.messages-area[b-yf47xgzeds]::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-active);
}

/* Loading & Empty States */
.loading-messages[b-yf47xgzeds],
.empty-messages[b-yf47xgzeds] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    flex: 1;
}

.spinner[b-yf47xgzeds] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 215, 0, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-yf47xgzeds 0.8s linear infinite;
}

@keyframes spin-b-yf47xgzeds {
    to { transform: rotate(360deg); }
}

.empty-messages .material-icons[b-yf47xgzeds] {
    font-size: 4rem;
    color: var(--color-text-tertiary);
}

.empty-messages p[b-yf47xgzeds] {
    color: var(--color-text-light);
    font-size: 1.1rem;
    margin: 0;
    text-align: center;
}

.empty-hint[b-yf47xgzeds] {
    color: var(--color-text-secondary) !important;
    font-size: 0.95rem !important;
}

/* Message Bubbles */
.message[b-yf47xgzeds] {
    display: flex;
    width: 100%;
}

.message.mine[b-yf47xgzeds] {
    justify-content: flex-end;
}

.message.theirs[b-yf47xgzeds] {
    justify-content: flex-start;
}

.message-bubble[b-yf47xgzeds] {
    max-width: 70%;
    padding: 0.875rem 1.125rem;
    border-radius: 12px;
    position: relative;
}

.message.mine .message-bubble[b-yf47xgzeds] {
    background: linear-gradient(135deg, var(--color-primary) 0%, #ffed4e 100%);
    color: var(--color-gray-900);
    border-bottom-right-radius: 4px;
}

.message.theirs .message-bubble[b-yf47xgzeds] {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    color: var(--color-text-primary);
    border-bottom-left-radius: 4px;
}

.message-content[b-yf47xgzeds] {
    margin: 0;
    font-size: 0.975rem;
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.message-meta[b-yf47xgzeds] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.375rem;
}

.message-time[b-yf47xgzeds] {
    font-size: 0.75rem;
    opacity: 0.7;
}

.message.mine .message-time[b-yf47xgzeds] {
    color: var(--color-gray-900);
}

.message.theirs .message-time[b-yf47xgzeds] {
    color: var(--color-text-light);
}

.message-read[b-yf47xgzeds],
.message-sent[b-yf47xgzeds] {
    display: flex;
    align-items: center;
}

.message-read .material-icons[b-yf47xgzeds],
.message-sent .material-icons[b-yf47xgzeds] {
    font-size: 0.875rem;
}

.message.mine .message-read .material-icons[b-yf47xgzeds] {
    color: var(--color-gray-900);
}

.message.mine .message-sent .material-icons[b-yf47xgzeds] {
    color: rgba(15, 23, 42, 0.6);
}

/* Typing Indicator */
.typing-indicator[b-yf47xgzeds] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 1.125rem;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    max-width: 70px;
}

.typing-indicator span[b-yf47xgzeds] {
    width: 8px;
    height: 8px;
    background: var(--color-text-light);
    border-radius: 50%;
    animation: typing-b-yf47xgzeds 1.4s infinite;
}

.typing-indicator span:nth-child(1)[b-yf47xgzeds] {
    animation-delay: 0s;
}

.typing-indicator span:nth-child(2)[b-yf47xgzeds] {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3)[b-yf47xgzeds] {
    animation-delay: 0.4s;
}

@keyframes typing-b-yf47xgzeds {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .thread-header[b-yf47xgzeds] {
        padding: 1rem 1.25rem;
    }

    .friend-name[b-yf47xgzeds] {
        font-size: 1rem;
    }

    .messages-area[b-yf47xgzeds] {
        padding: 1rem;
    }

    .message-bubble[b-yf47xgzeds] {
        max-width: 85%;
    }
}
/* /Components/Friends/SendFriendRequestDialog.razor.rz.scp.css */
/* Dialog Overlay */
.dialog-overlay[b-j2yse8eoku] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-j2yse8eoku 0.2s ease;
}

@keyframes fadeIn-b-j2yse8eoku {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Dialog Container */
.dialog-container[b-j2yse8eoku] {
    background: var(--color-gray-800);
    border: 1px solid var(--color-border-active);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-j2yse8eoku 0.3s ease;
}

@keyframes slideUp-b-j2yse8eoku {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Dialog Header */
.dialog-header[b-j2yse8eoku] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border-hover);
}

.dialog-header h3[b-j2yse8eoku] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.close-btn[b-j2yse8eoku] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-btn:hover[b-j2yse8eoku] {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--color-border-active);
    color: var(--color-primary);
}

.close-btn .material-icons[b-j2yse8eoku] {
    font-size: 1.25rem;
}

/* Dialog Content */
.dialog-content[b-j2yse8eoku] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.dialog-content[b-j2yse8eoku]::-webkit-scrollbar {
    width: 6px;
}

.dialog-content[b-j2yse8eoku]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
}

.dialog-content[b-j2yse8eoku]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: 3px;
}

/* Dialog Actions */
.dialog-actions[b-j2yse8eoku] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid var(--color-border-hover);
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0.3);
    flex-shrink: 0;
}

.dialog-actions button[b-j2yse8eoku] {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dialog-actions .btn-primary[b-j2yse8eoku] {
    background: linear-gradient(135deg, var(--color-primary), #ffed4e);
    color: var(--color-gray-900);
}

.dialog-actions .btn-primary:hover:not(:disabled)[b-j2yse8eoku] {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px var(--color-border-active);
}

.dialog-actions .btn-secondary[b-j2yse8eoku] {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    color: var(--color-primary);
}

.dialog-actions .btn-secondary:hover:not(:disabled)[b-j2yse8eoku] {
    background: var(--color-border-base);
    border-color: var(--color-border-active);
}

.dialog-actions button:disabled[b-j2yse8eoku] {
    opacity: 0.6;
    cursor: not-allowed;
}

.dialog-actions .material-icons[b-j2yse8eoku] {
    font-size: 1.2rem;
}

/* Form Groups (shared) */
.form-group[b-j2yse8eoku] {
    margin-bottom: 1.5rem;
}

.form-group:last-child[b-j2yse8eoku] {
    margin-bottom: 0;
}

.form-group label[b-j2yse8eoku] {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-group input[b-j2yse8eoku],
.form-group textarea[b-j2yse8eoku] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--color-border-hover);
    border-radius: 6px;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-group input:focus[b-j2yse8eoku],
.form-group textarea:focus[b-j2yse8eoku] {
    outline: none;
    border-color: rgba(255, 215, 0, 0.5);
    background: rgba(15, 23, 42, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.form-group input[b-j2yse8eoku]::placeholder,
.form-group textarea[b-j2yse8eoku]::placeholder {
    color: var(--color-text-tertiary);
}

.form-group textarea[b-j2yse8eoku] {
    resize: vertical;
    min-height: 100px;
}

.form-hint[b-j2yse8eoku] {
    color: var(--color-text-tertiary);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* Alerts */
.alert[b-j2yse8eoku] {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.alert .material-icons[b-j2yse8eoku] {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.alert p[b-j2yse8eoku] {
    margin: 0;
    font-size: 0.95rem;
}

.alert.success[b-j2yse8eoku] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: var(--color-success-lighter);
}

.alert.error[b-j2yse8eoku] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--color-danger-light);
}

.alert-hint[b-j2yse8eoku] {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Spinners */
.spinner-small[b-j2yse8eoku] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-j2yse8eoku 0.6s linear infinite;
}

@keyframes spin-b-j2yse8eoku {
    to { transform: rotate(360deg); }
}

/* User Preview */
.user-preview[b-j2yse8eoku] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--color-border-hover);
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.user-avatar[b-j2yse8eoku] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-border-active);
    flex-shrink: 0;
}

.user-avatar .material-icons[b-j2yse8eoku] {
    font-size: 28px;
    color: var(--color-primary);
}

.user-info[b-j2yse8eoku] {
    flex: 1;
    min-width: 0;
}

.user-info h4[b-j2yse8eoku] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem 0;
}

.user-info p[b-j2yse8eoku] {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.btn-clear[b-j2yse8eoku] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    color: var(--color-danger-light);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-clear:hover[b-j2yse8eoku] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-clear .material-icons[b-j2yse8eoku] {
    font-size: 1rem;
}

/* Search Input Wrapper */
.search-input-wrapper[b-j2yse8eoku] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .material-icons[b-j2yse8eoku] {
    position: absolute;
    left: 1rem;
    color: var(--color-text-tertiary);
    font-size: 1.25rem;
    pointer-events: none;
}

.search-input-wrapper input[b-j2yse8eoku] {
    padding-left: 3rem;
}

/* Search Loading */
.search-loading[b-j2yse8eoku] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    justify-content: center;
}

.search-loading p[b-j2yse8eoku] {
    color: var(--color-text-light);
    margin: 0;
}

/* Search Results */
.search-results[b-j2yse8eoku] {
    max-height: 300px;
    overflow-y: auto;
}

.search-results[b-j2yse8eoku]::-webkit-scrollbar {
    width: 6px;
}

.search-results[b-j2yse8eoku]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
}

.search-results[b-j2yse8eoku]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: 3px;
}

.results-label[b-j2yse8eoku] {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0 0 0.75rem 0;
    font-weight: 500;
}

.search-result-item[b-j2yse8eoku] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-result-item:hover[b-j2yse8eoku] {
    background: rgba(255, 215, 0, 0.05);
    border-color: var(--color-border-hover);
    transform: translateX(4px);
}

.result-avatar[b-j2yse8eoku] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-border-hover);
    flex-shrink: 0;
}

.result-avatar .material-icons[b-j2yse8eoku] {
    font-size: 24px;
    color: var(--color-primary);
}

.result-info[b-j2yse8eoku] {
    flex: 1;
    min-width: 0;
}

.result-info h5[b-j2yse8eoku] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem 0;
}

.result-info p[b-j2yse8eoku] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-item > .material-icons[b-j2yse8eoku] {
    color: var(--color-text-tertiary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Empty Results */
.empty-results[b-j2yse8eoku] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-results .material-icons[b-j2yse8eoku] {
    font-size: 3rem;
    color: var(--color-text-tertiary);
}

.empty-results p[b-j2yse8eoku] {
    color: var(--color-text-light);
    margin: 0;
}
/* /Components/Inventory/InventoryHeader.razor.rz.scp.css */
/* Inventory Topbar - Compact stats bar */

.inventory-topbar[b-xms61v952k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(37, 99, 235, 0.06) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-lg);
}

.topbar-left[b-xms61v952k] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.topbar-icon[b-xms61v952k] {
    font-size: 1.25rem;
    color: var(--color-info);
    flex-shrink: 0;
}

.topbar-title[b-xms61v952k] {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-info-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-stats[b-xms61v952k] {
    display: flex;
    gap: var(--space-md);
    flex-shrink: 0;
}

.topbar-stat[b-xms61v952k] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-xs) var(--space-md);
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.stat-icon[b-xms61v952k] {
    font-size: 0.875rem;
}

.stat-icon.equipped-icon[b-xms61v952k] {
    color: var(--color-success-light);
}

.stat-icon.items-icon[b-xms61v952k] {
    color: var(--color-info-light);
}

.stat-icon.consumable-icon[b-xms61v952k] {
    color: var(--color-warning-light);
}

.stat-value[b-xms61v952k] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.stat-label[b-xms61v952k] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    display: none;
}

@media (min-width: 769px) {
    .stat-label[b-xms61v952k] {
        display: inline;
    }
}

@media (max-width: 768px) {
    .inventory-topbar[b-xms61v952k] {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
    }

    .topbar-title[b-xms61v952k] {
        font-size: var(--font-size-sm);
    }

    .topbar-stats[b-xms61v952k] {
        gap: var(--space-sm);
    }

    .topbar-stat[b-xms61v952k] {
        padding: var(--space-xs) var(--space-sm);
    }

    .stat-icon[b-xms61v952k] {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .inventory-topbar[b-xms61v952k] {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar-stats[b-xms61v952k] {
        justify-content: space-between;
    }

    .stat-label[b-xms61v952k] {
        display: inline;
    }
}
/* /Components/Inventory/InventoryTabs.razor.rz.scp.css */
/* InventoryTabs - Compact horizontal tabs (mirrors MerchantTabs pattern) */

/* ===== CONTAINER ===== */
.inventory-tabs-container[b-zm6z1q1tqn] {
    margin-bottom: var(--space-md);
}

/* ===== TABS ROW ===== */
.inventory-tabs[b-zm6z1q1tqn] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(59, 130, 246, 0.15);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .inventory-tabs[b-zm6z1q1tqn]::-webkit-scrollbar {
        display: none;
    }

/* ===== INDIVIDUAL TAB (horizontal: icon + label + count inline) ===== */
.inventory-tab[b-zm6z1q1tqn] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.18s ease, border-bottom-color 0.18s ease, background 0.18s ease;
    color: #64748b;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    justify-content: center;
    outline: none;
}

    .inventory-tab.active[b-zm6z1q1tqn] {
        color: #60a5fa;
        border-bottom-color: #60a5fa;
    }

    /* ===== ICON WRAPPER ===== */
    .tab-icon-wrapper[b-zm6z1q1tqn] {
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
        flex-shrink: 0;
    }

    .tab-icon-wrapper.weapons[b-zm6z1q1tqn] {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.25);
    }

    .tab-icon-wrapper.armor[b-zm6z1q1tqn] {
        background: rgba(59, 130, 246, 0.15);
        border: 1px solid rgba(59, 130, 246, 0.25);
    }

    .tab-icon-wrapper.consumables[b-zm6z1q1tqn] {
        background: rgba(34, 197, 94, 0.15);
        border: 1px solid rgba(34, 197, 94, 0.25);
    }

    .tab-icon-wrapper.weapons .tab-icon[b-zm6z1q1tqn] {
        color: #f87171;
    }

    .tab-icon-wrapper.armor .tab-icon[b-zm6z1q1tqn] {
        color: #60a5fa;
    }

    .tab-icon-wrapper.consumables .tab-icon[b-zm6z1q1tqn] {
        color: #4ade80;
    }

/* ===== HOVER & FOCUS ===== */
.inventory-tab:hover[b-zm6z1q1tqn] {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.03);
}

.inventory-tab:focus-visible[b-zm6z1q1tqn] {
    outline: 2px solid rgba(59, 130, 246, 0.6);
    outline-offset: -2px;
    border-radius: 4px 4px 0 0;
}

.inventory-tab.active .tab-icon-wrapper[b-zm6z1q1tqn] {
    transform: scale(1.05);
}

    .inventory-tab.active .tab-icon-wrapper.weapons[b-zm6z1q1tqn] {
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
    }

    .inventory-tab.active .tab-icon-wrapper.armor[b-zm6z1q1tqn] {
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
    }

    .inventory-tab.active .tab-icon-wrapper.consumables[b-zm6z1q1tqn] {
        box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
    }

.tab-icon[b-zm6z1q1tqn] {
    font-size: 0.95rem !important;
    transition: none;
}

/* ===== TAB LABEL ===== */
.tab-label[b-zm6z1q1tqn] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: inherit;
    transition: none;
}

/* ===== INLINE COUNT PILL ===== */
.tab-count[b-zm6z1q1tqn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.inventory-tab.active .tab-count[b-zm6z1q1tqn] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
    .inventory-tab[b-zm6z1q1tqn] {
        padding: var(--space-sm) var(--space-md);
    }

    .tab-icon-wrapper[b-zm6z1q1tqn] {
        width: 24px;
        height: 24px;
    }

    .tab-icon[b-zm6z1q1tqn] {
        font-size: 0.9rem !important;
    }
}

/* ===== MOBILE: FIXED BOTTOM NAV BAR ===== */
@media (max-width: 768px) {
    .inventory-tabs-container[b-zm6z1q1tqn] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        margin: 0;
        padding: 4px var(--space-sm);
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
        background: rgba(10, 15, 30, 0.97);
        border-top: 1px solid rgba(59, 130, 246, 0.25);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(12px);
    }

    .inventory-tabs[b-zm6z1q1tqn] {
        border-bottom: none;
        gap: 0;
        background: transparent;
    }

    .inventory-tab[b-zm6z1q1tqn] {
        flex-direction: column;
        border: none;
        border-bottom: none;
        border-radius: var(--radius-lg);
        padding: 6px 8px;
        min-height: 54px;
        margin-bottom: 0;
        gap: 2px;
    }

        .inventory-tab.active[b-zm6z1q1tqn] {
            background: rgba(59, 130, 246, 0.07);
            border-bottom: none;
            border-bottom-color: transparent;
        }

    .tab-icon-wrapper[b-zm6z1q1tqn] {
        width: 28px;
        height: 28px;
        background: transparent !important;
        border: none !important;
    }

    .inventory-tab.active .tab-icon-wrapper[b-zm6z1q1tqn] {
        transform: none;
        box-shadow: none;
    }

    .tab-icon[b-zm6z1q1tqn] {
        font-size: 1.15rem !important;
    }

    .tab-label[b-zm6z1q1tqn] {
        font-size: 0.65rem;
        letter-spacing: 0;
    }

    .tab-count[b-zm6z1q1tqn] {
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 0.6rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout scoped styles - Uses Design System Tokens */

.page[b-ei8mtptfs0] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 50%, var(--color-bg-base) 100%);
}

main[b-ei8mtptfs0] {
    flex: 1;
}

/* Sidebar fantasy gradient */
.sidebar[b-ei8mtptfs0] {
    background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 100%);
    border-right: 1px solid var(--color-border-base);
}

/* Top row styling */
.top-row[b-ei8mtptfs0] {
    background: linear-gradient(90deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 50%, var(--color-bg-base) 100%);
    border-bottom: 1px solid var(--color-border-base);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-ei8mtptfs0]  a, 
.top-row[b-ei8mtptfs0]  .btn-link {
    white-space: nowrap;
    margin-left: var(--space-xl);
    text-decoration: none;
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
}

.top-row[b-ei8mtptfs0]  a:hover, 
.top-row[b-ei8mtptfs0]  .btn-link:hover {
    text-decoration: none;
    color: var(--color-primary);
}

.top-row[b-ei8mtptfs0]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile responsiveness */
@media (max-width: 640.98px) {
    .top-row[b-ei8mtptfs0] {
        justify-content: space-between;
    }

    .top-row[b-ei8mtptfs0]  a, 
    .top-row[b-ei8mtptfs0]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ei8mtptfs0] {
        flex-direction: row;
    }

    .sidebar[b-ei8mtptfs0] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ei8mtptfs0] {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
    }

    .top-row.auth[b-ei8mtptfs0]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ei8mtptfs0], article[b-ei8mtptfs0] {
        padding-left: var(--space-2xl);
        padding-right: var(--space-xl);
    }
}

/* Blazor Error UI - Fantasy themed */
#blazor-error-ui[b-ei8mtptfs0] {
    color-scheme: dark only;
    background: linear-gradient(135deg, #7f1d1d, #991b1b);
    bottom: 0;
    box-shadow: 0 -4px 20px rgba(239, 68, 68, 0.3);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--space-md) var(--space-xl);
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: var(--color-danger-lightest);
    font-family: 'Cinzel', serif;
    border-top: 2px solid var(--color-danger);
}

#blazor-error-ui .dismiss[b-ei8mtptfs0] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    color: var(--color-danger-lightest);
    transition: color 0.2s ease;
}

#blazor-error-ui .dismiss:hover[b-ei8mtptfs0] {
    color: #ffffff;
}

#blazor-error-ui .reload[b-ei8mtptfs0] {
    color: var(--color-primary);
    text-decoration: underline;
    margin-left: 0.5rem;
}

#blazor-error-ui .reload:hover[b-ei8mtptfs0] {
    color: var(--color-primary-light);
}

/* Custom scrollbar for fantasy theme */
[b-ei8mtptfs0]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-ei8mtptfs0]::-webkit-scrollbar-track {
    background: var(--color-gray-900);
}

[b-ei8mtptfs0]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #475569, var(--color-gray-700));
    border-radius: 4px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

[b-ei8mtptfs0]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--color-text-tertiary), #475569);
    border-color: var(--color-border-hover);
}

/* Selection highlighting */
[b-ei8mtptfs0]::selection {
    background: var(--color-border-active);
    color: var(--color-primary);
}

/* ===== APP BAR / DRAWER CHROME (moved from the inline <style> block) ===== */

[b-ei8mtptfs0] .mud-appbar {
    background: linear-gradient(90deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 50%, var(--color-bg-base) 100%) !important;
    border-bottom: 1px solid var(--color-border-base) !important;
}

[b-ei8mtptfs0] .mud-drawer {
    background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 100%) !important;
    border-right: 1px solid var(--color-border-base) !important;
}

/* ===== LOGO (keyboard-accessible anchor) ===== */

.app-logo[b-ei8mtptfs0] {
    display: flex;
    align-items: baseline;
    text-decoration: none;
    cursor: pointer;
}

.app-logo .app-logo-icon[b-ei8mtptfs0] {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    align-self: center;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.35));
}

.app-title[b-ei8mtptfs0] {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.app-subtitle[b-ei8mtptfs0] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-left: var(--space-sm);
}

/* ===== HEADER AUTH BUTTONS ===== */

[b-ei8mtptfs0] .header-login-btn {
    border-color: rgba(255, 215, 0, 0.4) !important; /* --color-primary at 40% */
    color: var(--color-primary) !important;
    margin-right: 0.5rem;
}

[b-ei8mtptfs0] .header-signup-btn {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker)) !important;
    color: #ffffff !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ===== MAIN CONTENT ===== */

/* Matches the original #0f172a -> #1e293b -> #0f172a gradient via tokens */
[b-ei8mtptfs0] .main-content-bg {
    background: linear-gradient(180deg, var(--color-bg-elevated-alt) 0%, var(--color-bg-elevated) 50%, var(--color-bg-elevated-alt) 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Splash / auth pages have no AppBar - remove its reserved padding */
.splash-layout[b-ei8mtptfs0]  .mud-main-content,
.auth-layout[b-ei8mtptfs0]  .mud-main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ===== FOOTER ===== */

[b-ei8mtptfs0] .footer-divider {
    border-color: rgba(255, 215, 0, 0.1) !important; /* --color-primary at 10% */
    margin-bottom: 1rem;
}

[b-ei8mtptfs0] .footer-copy {
    color: var(--color-text-tertiary); /* #64748b, matches the original inline value */
}

[b-ei8mtptfs0] .footer-link {
    color: var(--color-text-secondary) !important;
}

[b-ei8mtptfs0] .footer-content {
    flex-wrap: wrap;
    gap: var(--space-lg);
}

@media (max-width: 600px) {
    [b-ei8mtptfs0] .footer-content {
        flex-direction: column;
        text-align: center;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ============================================
   NAV MENU - FANTASY THEME
   ============================================ */

/* Navbar toggler for mobile */
.navbar-toggler[b-hjy8pn4tj3] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--color-primary);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--color-border-hover);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 215, 0, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 215, 0, 0.05);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.navbar-toggler:hover[b-hjy8pn4tj3] {
    background-color: rgba(255, 215, 0, 0.1);
    border-color: var(--color-border-active);
}

.top-row[b-hjy8pn4tj3] {
    min-height: 3.5rem;
    background: linear-gradient(90deg, var(--color-gray-900) 0%, rgba(30, 41, 59, 0.8) 50%, var(--color-gray-900) 100%);
    border-bottom: 1px solid var(--color-border-base);
}

.navbar-brand[b-hjy8pn4tj3] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Scrollable nav area */
.nav-scrollable[b-hjy8pn4tj3] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-hjy8pn4tj3] {
    display: block;
}

/* ============================================
   NAV MENU CONTAINER
   ============================================ */

[b-hjy8pn4tj3] .nav-menu-fantasy {
    padding: 0.75rem 0.5rem;
}

[b-hjy8pn4tj3] .nav-section-title {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    padding: 0.75rem 1rem 0.4rem;
}

[b-hjy8pn4tj3] .nav-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border-base), transparent);
    margin: 0.5rem 0;
}

/* ============================================
   CHARACTER PREVIEW CARD
   ============================================ */

[b-hjy8pn4tj3] .character-preview {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-hover);
    border-radius: 10px;
    padding: 0.75rem;
    margin: 0.25rem 0.25rem 0.75rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-hjy8pn4tj3] .character-preview-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

[b-hjy8pn4tj3] .character-preview-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

[b-hjy8pn4tj3] .character-name {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

[b-hjy8pn4tj3] .character-info {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* ============================================
   TIER BADGE
   ============================================ */

[b-hjy8pn4tj3] .tier-badge-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    margin-bottom: 0.25rem;
}

[b-hjy8pn4tj3] .tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}

[b-hjy8pn4tj3] .tier-badge .mud-icon-root {
    font-size: 0.75rem !important;
}

[b-hjy8pn4tj3] .tier-badge.premium {
    background: linear-gradient(135deg, var(--color-border-hover), rgba(218, 165, 32, 0.1));
    border: 1px solid var(--color-border-active);
    color: var(--color-primary);
}

[b-hjy8pn4tj3] .tier-badge.basic {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: var(--color-text-secondary);
}

[b-hjy8pn4tj3] .tier-slots {
    font-size: 0.6rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

/* ============================================
   STAT BARS (HP/Mana)
   ============================================ */

[b-hjy8pn4tj3] .character-stat-bar {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

[b-hjy8pn4tj3] .character-stat-bar .stat-bar-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--color-text-tertiary);
    font-weight: 500;
}

[b-hjy8pn4tj3] .character-stat-bar .stat-bar-track {
    height: 5px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    overflow: hidden;
}

[b-hjy8pn4tj3] .character-stat-bar .stat-bar-track.hp .stat-bar-fill {
    background: linear-gradient(90deg, var(--color-success), var(--color-success-light));
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
}

[b-hjy8pn4tj3] .character-stat-bar .stat-bar-track.mana .stat-bar-fill {
    background: linear-gradient(90deg, var(--color-info), var(--color-info-light));
    box-shadow: 0 0 4px rgba(59, 130, 246, 0.4);
}

[b-hjy8pn4tj3] .character-stat-bar .stat-bar-track.xp .stat-bar-fill {
    background: linear-gradient(90deg, var(--color-xp), var(--color-primary-light));
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
}

[b-hjy8pn4tj3] .character-stat-bar .stat-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ============================================
   NAV LINKS
   ============================================ */

[b-hjy8pn4tj3] .mud-nav-link {
    border-radius: 6px !important;
    margin: 1px 4px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    color: var(--color-text-secondary) !important;
    transition: all 0.2s ease !important;
    position: relative;
}

[b-hjy8pn4tj3] .mud-nav-link:hover {
    background: rgba(255, 215, 0, 0.08) !important;
    color: var(--color-text-primary) !important;
}

[b-hjy8pn4tj3] .mud-nav-link.active {
    background: linear-gradient(90deg, var(--color-border-base), rgba(255, 215, 0, 0.05)) !important;
    color: var(--color-primary) !important;
    border-left: 2px solid var(--color-primary) !important;
}

[b-hjy8pn4tj3] .mud-nav-link .mud-icon-root {
    font-size: 1.1rem !important;
    margin-right: 0.5rem;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1024px) {
    [b-hjy8pn4tj3] .character-preview {
        padding: 0.6rem;
    }

    [b-hjy8pn4tj3] .character-name {
        font-size: 0.85rem;
    }

    [b-hjy8pn4tj3] .character-info {
        font-size: 0.65rem;
    }

    [b-hjy8pn4tj3] .mud-nav-link {
        padding: 0.45rem 0.6rem !important;
        font-size: 0.8rem !important;
    }

    [b-hjy8pn4tj3] .nav-badge {
        font-size: 0.6rem;
        padding: 0.15rem 0.4rem;
    }
}

/* ============================================
   NOTIFICATION BADGES
   ============================================ */

[b-hjy8pn4tj3] .nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0.15rem 0.45rem;
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
    border-radius: 9px;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.5rem;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
    animation: pulse-badge-b-hjy8pn4tj3 2s infinite;
}

@keyframes pulse-badge-b-hjy8pn4tj3 {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 2px 12px rgba(59, 130, 246, 0.5);
    }
}

/* ============================================
   SWITCH HERO BUTTON
   ============================================ */

[b-hjy8pn4tj3] .switch-hero-wrapper {
    padding-top: var(--space-sm);
    margin-top: var(--space-xs);
    border-top: 1px solid rgba(255, 215, 0, 0.08);
}

[b-hjy8pn4tj3] .switch-hero-btn {
    border-color: rgba(255, 215, 0, 0.4) !important; /* --color-primary at 40% */
    color: var(--color-primary) !important;
}

[b-hjy8pn4tj3] .welcome-caption {
    display: block;
    color: var(--color-text-secondary);
    padding: 0 1rem;
    margin-bottom: 1rem;
}

/* ============================================
   EXPANSION PANEL TITLE WITH ICON
   ============================================ */

[b-hjy8pn4tj3] .expansion-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

[b-hjy8pn4tj3] .expansion-panel-title .mud-icon-root {
    font-size: 1rem !important;
    color: var(--color-text-tertiary);
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */


@media (max-width: 599px) {
    [b-hjy8pn4tj3] .nav-menu-fantasy {
        padding: 0.5rem 0.25rem;
    }

    [b-hjy8pn4tj3] .character-preview {
        padding: 0.5rem;
        margin: 0.25rem 0.15rem 0.5rem 0.15rem;
        border-radius: 8px;
    }

    [b-hjy8pn4tj3] .character-preview-header {
        gap: 0.4rem;
    }

    [b-hjy8pn4tj3] .mud-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    [b-hjy8pn4tj3] .mud-avatar .mud-icon-root {
        font-size: 0.9rem !important;
    }

    [b-hjy8pn4tj3] .character-name {
        font-size: 0.8rem;
    }

    [b-hjy8pn4tj3] .character-info {
        font-size: 0.6rem;
    }

    [b-hjy8pn4tj3] .tier-badge {
        font-size: 0.55rem;
        padding: 0.15rem 0.35rem;
    }

    [b-hjy8pn4tj3] .tier-slots {
        font-size: 0.55rem;
    }

    [b-hjy8pn4tj3] .character-stat-bar .stat-bar-header {
        font-size: 0.55rem;
    }

    [b-hjy8pn4tj3] .character-stat-bar .stat-bar-track {
        height: 4px;
    }

    [b-hjy8pn4tj3] .nav-section-title {
        font-size: 0.6rem;
        padding: 0.5rem 0.75rem 0.3rem;
    }

    [b-hjy8pn4tj3] .mud-nav-link {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.75rem !important;
        margin: 1px 2px !important;
    }

    [b-hjy8pn4tj3] .mud-nav-link .mud-icon-root {
        font-size: 1rem !important;
        margin-right: 0.4rem;
    }
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* PublicLayout — Static SSR nav & footer for all public/indexable pages.
   Uses design-system tokens throughout. */

.pub-header[b-fswictcyvl] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(90deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 50%, var(--color-bg-base) 100%);
    border-bottom: 1px solid var(--color-border-base);
}

.pub-nav[b-fswictcyvl] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-xl);
}

/* Brand */
.pub-brand[b-fswictcyvl] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    flex-shrink: 0;
}

.pub-brand-icon[b-fswictcyvl] {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.35));
}

.pub-footer-brand[b-fswictcyvl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Build stamp - see .lp-footer-version in lp-shared.css. */
.pub-footer-version[b-fswictcyvl] {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    opacity: 0.85;
    user-select: all;
}

.pub-footer-mark[b-fswictcyvl] {
    width: 20px;
    height: 20px;
    opacity: 0.85;
}

.pub-brand-name[b-fswictcyvl] {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub-brand-sub[b-fswictcyvl] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Nav links */
.pub-nav-links[b-fswictcyvl] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-left: var(--space-lg);
}

.pub-nav-link[b-fswictcyvl] {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-base);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    transition: color 0.2s, background 0.2s;
}

.pub-nav-link:hover[b-fswictcyvl] {
    color: var(--color-primary);
    background: rgba(255, 215, 0, 0.08);
}

/* Auth actions */
.pub-nav-actions[b-fswictcyvl] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;
}

.pub-btn-secondary[b-fswictcyvl] {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-base);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-base);
    transition: all 0.2s;
}

.pub-btn-secondary:hover[b-fswictcyvl] {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.pub-btn-primary[b-fswictcyvl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-bg-base);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    transition: opacity 0.2s;
}

.pub-btn-primary:hover[b-fswictcyvl] {
    opacity: 0.9;
}

/* ::deep - the glyph is rendered by the shared Icon component, so it carries that
   component's scope id rather than this layout's. */
.pub-btn-primary[b-fswictcyvl]  .material-icons {
    font-size: 1rem;
}

/* Main content */
.pub-main[b-fswictcyvl] {
    min-height: calc(100vh - 130px);
    background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 50%, var(--color-bg-base) 100%);
}

/* Footer */
.pub-footer[b-fswictcyvl] {
    background: var(--color-bg-base);
    border-top: 1px solid var(--color-border-base);
    padding: var(--space-lg) var(--space-xl);
}

.pub-footer-inner[b-fswictcyvl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    max-width: 1400px;
    margin: 0 auto;
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.pub-footer-links[b-fswictcyvl] {
    display: flex;
    gap: var(--space-lg);
}

.pub-footer-links a[b-fswictcyvl] {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.pub-footer-links a:hover[b-fswictcyvl] {
    color: var(--color-primary);
}

/* Mobile */
@media (max-width: 768px) {
    .pub-nav[b-fswictcyvl] {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
    }

    .pub-nav-links[b-fswictcyvl] {
        display: none;
    }

    .pub-brand-sub[b-fswictcyvl] {
        display: none;
    }

    .pub-footer-inner[b-fswictcyvl] {
        flex-direction: column;
        text-align: center;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-o2d7qkooc8],
.components-reconnect-repeated-attempt-visible[b-o2d7qkooc8],
.components-reconnect-failed-visible[b-o2d7qkooc8],
.components-pause-visible[b-o2d7qkooc8],
.components-resume-failed-visible[b-o2d7qkooc8],
.components-rejoining-animation[b-o2d7qkooc8] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-retrying[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-failed[b-o2d7qkooc8],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-o2d7qkooc8] {
    display: block;
}


#components-reconnect-modal[b-o2d7qkooc8] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-o2d7qkooc8 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-o2d7qkooc8 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-o2d7qkooc8 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-o2d7qkooc8]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-o2d7qkooc8 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-o2d7qkooc8 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-o2d7qkooc8 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-o2d7qkooc8 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-o2d7qkooc8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-o2d7qkooc8] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-o2d7qkooc8] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-o2d7qkooc8] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-o2d7qkooc8] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-o2d7qkooc8] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-o2d7qkooc8] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-o2d7qkooc8 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-o2d7qkooc8] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-o2d7qkooc8 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Merchant/EquipmentGuide.razor.rz.scp.css */
/* Equipment Guide Component - Fantasy RPG Theme */

/* ===== CONTAINER ===== */
.equipment-guide-container[b-kii38ak5hk] {
    margin-bottom: var(--space-xl);
}

/* ===== TOGGLE BUTTON ===== */
.guide-toggle-btn[b-kii38ak5hk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-lg) var(--space-xl);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.08));
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-xl);
    color: var(--color-monk-lighter);
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-slow);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    overflow: hidden;
}

.guide-toggle-btn[b-kii38ak5hk]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.2), transparent);
    transition: height var(--transition-slow);
}

.guide-toggle-btn:hover[b-kii38ak5hk] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(139, 92, 246, 0.15));
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
}

.guide-toggle-btn:hover[b-kii38ak5hk]::before {
    height: 100%;
}

/* Focus state for accessibility */
.guide-toggle-btn:focus-visible[b-kii38ak5hk] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-border-hover);
}

/* Chevron icon animation */
.guide-toggle-btn .chevron-icon[b-kii38ak5hk] {
    transition: transform 0.3s ease-out;
}

.guide-toggle-btn.expanded .chevron-icon[b-kii38ak5hk] {
    transform: rotate(180deg);
}

/* ===== GUIDE CONTENT ===== */
.guide-content[b-kii38ak5hk] {
    margin-top: var(--space-lg);
    padding: var(--space-2xl);
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid rgba(139, 92, 246, 0.25);
    border-radius: var(--radius-2xl);
    animation: slideDown-b-kii38ak5hk 0.3s ease-out;
    position: relative;
}

.guide-content[b-kii38ak5hk]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(139, 92, 246, 0.6) 20%,
        var(--color-monk) 50%,
        rgba(139, 92, 246, 0.6) 80%,
        transparent 100%);
}

@keyframes slideDown-b-kii38ak5hk {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp-b-kii38ak5hk {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-15px);
    }
}

/* Guide content wrapper for smooth expand/collapse */
.guide-content-wrapper[b-kii38ak5hk] {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.guide-content-wrapper.collapsed[b-kii38ak5hk] {
    max-height: 0;
    opacity: 0;
}

.guide-content-wrapper.expanded[b-kii38ak5hk] {
    max-height: 2000px; /* Large enough to contain content */
    opacity: 1;
}

/* ===== GUIDE HEADER ===== */
.guide-header[b-kii38ak5hk] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid rgba(139, 92, 246, 0.3);
}

.guide-header .guide-icon[b-kii38ak5hk] {
    color: #a78bfa;
    font-size: 2rem !important;
}

.guide-header h3[b-kii38ak5hk] {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-monk-lighter);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

/* ===== GUIDE SECTIONS ===== */
.guide-section[b-kii38ak5hk] {
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-subtle);
    position: relative;
}

.guide-section:last-child[b-kii38ak5hk] {
    margin-bottom: 0;
}

.guide-section h4[b-kii38ak5hk] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0 0 var(--space-lg) 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ===== STAT PRIORITIES ===== */
.stat-priorities[b-kii38ak5hk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.stat-badge[b-kii38ak5hk] {
    display: flex;
    padding: var(--space-md) var(--space-lg);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    border-left: 4px solid transparent;
    transition: all var(--transition-base);
}

.stat-badge:hover[b-kii38ak5hk] {
    background: rgba(0, 0, 0, 0.4);
    transform: translateX(4px);
}

.stat-badge.primary[b-kii38ak5hk] {
    border-left-color: var(--color-primary);
    color: var(--color-primary-light);
}

.stat-badge.secondary[b-kii38ak5hk] {
    border-left-color: var(--color-info);
    color: var(--color-info-light);
}

.stat-badge.tertiary[b-kii38ak5hk] {
    border-left-color: var(--color-text-tertiary);
    color: var(--color-text-secondary);
}

/* ===== RECOMMENDATIONS LIST ===== */
.recommendations-list[b-kii38ak5hk] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.recommendations-list li[b-kii38ak5hk] {
    padding: var(--space-md) var(--space-lg);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.recommendations-list li strong[b-kii38ak5hk] {
    color: var(--color-text-primary);
}

.stat-uses[b-kii38ak5hk] {
    margin-left: auto;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* ===== ARMOR INFO ===== */
.armor-info[b-kii38ak5hk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.armor-info p[b-kii38ak5hk] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.armor-info p strong[b-kii38ak5hk] {
    color: var(--color-text-primary);
}

.armor-info .tip[b-kii38ak5hk] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius-lg);
    color: var(--color-warning-light);
    font-style: italic;
}

/* ===== SPELLCASTER INFO ===== */
.spellcaster-info[b-kii38ak5hk] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.spellcaster-info h4[b-kii38ak5hk] {
    color: var(--color-info-light);
}

/* ===== QUICK TIPS ===== */
.quick-tips[b-kii38ak5hk] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.quick-tips h4[b-kii38ak5hk] {
    color: var(--color-success-light);
}

/* ===== TIPS LIST ===== */
.tips-list[b-kii38ak5hk] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.tips-list li[b-kii38ak5hk] {
    position: relative;
    padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-xl);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.tips-list li[b-kii38ak5hk]::before {
    content: '?';
    position: absolute;
    left: var(--space-sm);
    color: var(--color-primary);
    font-weight: bold;
}

.tips-list li strong[b-kii38ak5hk] {
    color: var(--color-primary);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .guide-content[b-kii38ak5hk] {
        padding: var(--space-lg);
    }

    .guide-header[b-kii38ak5hk] {
        flex-direction: column;
        text-align: center;
    }

    .guide-header h3[b-kii38ak5hk] {
        font-size: var(--font-size-xl);
    }

    .guide-section[b-kii38ak5hk] {
        padding: var(--space-md);
    }

    .stat-badge[b-kii38ak5hk] {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .recommendations-list li[b-kii38ak5hk] {
        flex-direction: column;
        align-items: flex-start;
    }

    .stat-uses[b-kii38ak5hk] {
        margin-left: 0;
        margin-top: var(--space-sm);
    }
}
/* /Components/Merchant/MerchantHeader.razor.rz.scp.css */
/* MerchantHeader - Compact topbar */

.merchant-topbar[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.15) 0%, rgba(101, 67, 33, 0.08) 100%);
    border: 1px solid var(--color-border-active);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-lg);
}

/* ===== LEFT: Shop identity ===== */

.topbar-left[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}

.topbar-emblem[b-6ud9r4a04e] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 10px var(--color-border-active);
    object-fit: cover;
    flex-shrink: 0;
}

.topbar-info[b-6ud9r4a04e] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.topbar-title[b-6ud9r4a04e] {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-subtitle[b-6ud9r4a04e] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* ===== RIGHT: Currency + guide ===== */

.topbar-right[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

.currency-display[b-6ud9r4a04e] {
    display: flex;
    gap: var(--space-sm);
}

.currency-coin[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.coin-icon[b-6ud9r4a04e] {
    font-size: 0.5rem;
}

.ci-gold[b-6ud9r4a04e] {
    color: var(--color-primary);
}

.ci-silver[b-6ud9r4a04e] {
    color: var(--color-silver);
}

.ci-copper[b-6ud9r4a04e] {
    color: var(--color-bronze);
}

.coin-value[b-6ud9r4a04e] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.coin-label[b-6ud9r4a04e] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    opacity: 0.6;
}

.currency-coin.gold .coin-value[b-6ud9r4a04e],
.currency-coin.gold .coin-label[b-6ud9r4a04e] {
    color: var(--color-primary);
}

.currency-coin.silver .coin-value[b-6ud9r4a04e],
.currency-coin.silver .coin-label[b-6ud9r4a04e] {
    color: var(--color-silver);
}

.currency-coin.copper .coin-value[b-6ud9r4a04e],
.currency-coin.copper .coin-label[b-6ud9r4a04e] {
    color: var(--color-bronze);
}

.guide-btn[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-lg);
    color: var(--color-monk-lighter);
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.guide-btn:hover[b-6ud9r4a04e] {
    background: rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.5);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .merchant-topbar[b-6ud9r4a04e] {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
    }

    .topbar-emblem[b-6ud9r4a04e] {
        width: 28px;
        height: 28px;
    }

    .topbar-title[b-6ud9r4a04e] {
        font-size: var(--font-size-sm);
    }

    .topbar-subtitle[b-6ud9r4a04e] {
        display: none;
    }

    .currency-coin[b-6ud9r4a04e] {
        padding: var(--space-xs) 4px;
    }

    .coin-label[b-6ud9r4a04e] {
        display: none;
    }
}

@media (max-width: 480px) {
    .merchant-topbar[b-6ud9r4a04e] {
        flex-wrap: wrap;
    }

    .coin-label[b-6ud9r4a04e] {
        display: inline;
    }

    .currency-display[b-6ud9r4a04e] {
        flex: 1;
        justify-content: space-between;
    }
}

/* ===== FLOATING CURRENCY DISPLAY ===== */

.floating-currency[b-6ud9r4a04e] {
    position: fixed;
    bottom: var(--space-xl);
    right: var(--space-xl);
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: all var(--transition-slow);
}

.floating-currency.visible[b-6ud9r4a04e] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.floating-currency-inner[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background: linear-gradient(145deg, var(--color-bg-elevated-alt), var(--color-bg-elevated));
    border: 2px solid var(--color-border-active);
    border-radius: var(--radius-xl);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 20px var(--color-border-base);
    backdrop-filter: blur(10px);
}

.floating-wallet-icon[b-6ud9r4a04e] {
    color: var(--color-primary);
}

.floating-coin[b-6ud9r4a04e] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.floating-coin-value[b-6ud9r4a04e] {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.floating-coin-label[b-6ud9r4a04e] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    opacity: 0.7;
}

.floating-coin.gold .floating-coin-value[b-6ud9r4a04e],
.floating-coin.gold .floating-coin-label[b-6ud9r4a04e] {
    color: var(--color-primary);
}

.floating-coin.silver .floating-coin-value[b-6ud9r4a04e],
.floating-coin.silver .floating-coin-label[b-6ud9r4a04e] {
    color: var(--color-silver);
}

.floating-coin.copper .floating-coin-value[b-6ud9r4a04e],
.floating-coin.copper .floating-coin-label[b-6ud9r4a04e] {
    color: var(--color-bronze);
}

@media (max-width: 768px) {
    .floating-currency[b-6ud9r4a04e] {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--space-md));
        right: var(--space-md);
        left: var(--space-md);
    }

    .floating-currency-inner[b-6ud9r4a04e] {
        justify-content: center;
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
    }

    .floating-coin-value[b-6ud9r4a04e] {
        font-size: var(--font-size-sm);
    }
}
/* /Components/Merchant/MerchantTabs.razor.rz.scp.css */
/* MerchantTabs Component Styles */

/* ===== CONTAINER ===== */
.merchant-tabs-container[b-z6jpglsu1z] {
    margin-bottom: var(--space-md);
}

/* ===== TABS ROW ===== */
.merchant-tabs[b-z6jpglsu1z] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(255, 215, 0, 0.12);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .merchant-tabs[b-z6jpglsu1z]::-webkit-scrollbar {
        display: none;
    }

/* ===== INDIVIDUAL TAB (horizontal: icon + label inline) ===== */
.merchant-tab[b-z6jpglsu1z] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.18s ease, border-bottom-color 0.18s ease, background 0.18s ease;
    color: #64748b;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    justify-content: center;
    outline: none;
}

    /* ===== TAB INDICATOR (bottom underline via border) ===== */
    .merchant-tab.active[b-z6jpglsu1z] {
        color: #ffd700;
        border-bottom-color: #ffd700;
    }

    /* ===== ICON WRAPPER ===== */
    .tab-icon-wrapper[b-z6jpglsu1z] {
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
        flex-shrink: 0;
    }

    /* Icon type colors */
    .tab-icon-wrapper.weapons[b-z6jpglsu1z] {
        background: rgba(239,68,68,0.15);
        border: 1px solid rgba(239,68,68,0.25);
    }

    .tab-icon-wrapper.armor[b-z6jpglsu1z] {
        background: rgba(59,130,246,0.15);
        border: 1px solid rgba(59,130,246,0.25);
    }

    .tab-icon-wrapper.consumables[b-z6jpglsu1z] {
        background: rgba(34,197,94,0.15);
        border: 1px solid rgba(34,197,94,0.25);
    }

    .tab-icon-wrapper.sell[b-z6jpglsu1z] {
        background: rgba(245,158,11,0.15);
        border: 1px solid rgba(245,158,11,0.25);
    }

    .tab-icon-wrapper.weapons .tab-icon[b-z6jpglsu1z] {
        color: #f87171;
    }

    .tab-icon-wrapper.armor .tab-icon[b-z6jpglsu1z] {
        color: #60a5fa;
    }

    .tab-icon-wrapper.consumables .tab-icon[b-z6jpglsu1z] {
        color: #4ade80;
    }

    .tab-icon-wrapper.sell .tab-icon[b-z6jpglsu1z] {
        color: #fcd34d;
    }

/* Active icon glow */
.merchant-tab:hover[b-z6jpglsu1z] {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.03);
}

.merchant-tab:focus-visible[b-z6jpglsu1z] {
    outline: 2px solid rgba(255, 215, 0, 0.6);
    outline-offset: -2px;
    border-radius: 4px 4px 0 0;
}

.merchant-tab.active .tab-icon-wrapper[b-z6jpglsu1z] {
    transform: scale(1.05);
}

    .merchant-tab.active .tab-icon-wrapper.weapons[b-z6jpglsu1z] {
        box-shadow: 0 0 12px rgba(239,68,68,0.35);
    }

    .merchant-tab.active .tab-icon-wrapper.armor[b-z6jpglsu1z] {
        box-shadow: 0 0 12px rgba(59,130,246,0.35);
    }

    .merchant-tab.active .tab-icon-wrapper.consumables[b-z6jpglsu1z] {
        box-shadow: 0 0 12px rgba(34,197,94,0.35);
    }

    .merchant-tab.active .tab-icon-wrapper.sell[b-z6jpglsu1z] {
        box-shadow: 0 0 12px rgba(245,158,11,0.35);
    }

.tab-icon[b-z6jpglsu1z] {
    font-size: 0.95rem !important;
    transition: none;
}

/* ===== TAB LABEL ===== */
.tab-label[b-z6jpglsu1z] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: inherit;
    transition: none;
}

/* ===== INLINE COUNT PILL ===== */
.tab-count[b-z6jpglsu1z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.merchant-tab.active .tab-count[b-z6jpglsu1z] {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.3);
}

/* ===== SELL TAB SPECIAL ===== */
.sell-tab.active .tab-label[b-z6jpglsu1z] {
    color: #fcd34d;
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
    .merchant-tab[b-z6jpglsu1z] {
        padding: var(--space-sm) var(--space-md);
    }

    .tab-icon-wrapper[b-z6jpglsu1z] {
        width: 24px;
        height: 24px;
    }

    .tab-icon[b-z6jpglsu1z] {
        font-size: 0.9rem !important;
    }
}

/* ===== MOBILE: FIXED BOTTOM NAV BAR ===== */
@media (max-width: 768px) {
    .merchant-tabs-container[b-z6jpglsu1z] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        margin: 0;
        padding: 4px var(--space-sm);
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
        background: rgba(10, 15, 30, 0.97);
        border-top: 1px solid rgba(255, 215, 0, 0.2);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(12px);
    }

    .merchant-tabs[b-z6jpglsu1z] {
        border-bottom: none;
        gap: 0;
        background: transparent;
    }

    .merchant-tab[b-z6jpglsu1z] {
        flex-direction: column;
        border: none;
        border-bottom: none;
        border-radius: var(--radius-lg);
        padding: 6px 8px;
        min-height: 54px;
        margin-bottom: 0;
        gap: 2px;
    }

        .merchant-tab.active[b-z6jpglsu1z] {
            background: rgba(255, 215, 0, 0.07);
            border-bottom: none;
            border-bottom-color: transparent;
        }

    .tab-icon-wrapper[b-z6jpglsu1z] {
        width: 28px;
        height: 28px;
        background: transparent !important;
        border: none !important;
    }

    .merchant-tab.active .tab-icon-wrapper[b-z6jpglsu1z] {
        transform: none;
        box-shadow: none;
    }

    .tab-icon[b-z6jpglsu1z] {
        font-size: 1.15rem !important;
    }

    .tab-label[b-z6jpglsu1z] {
        font-size: 0.65rem;
        letter-spacing: 0;
    }

    .tab-count[b-z6jpglsu1z] {
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 0.6rem;
    }
}
/* /Components/Merchant/SellTab.razor.rz.scp.css */
/* SellTab Component Styles - Fantasy RPG Theme */

/* ===== SELL INFO BAR ===== */
.sell-info-bar[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-md);
}

.sell-info-rates[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    background: rgba(0, 0, 0, 0.2);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-base);
}

/* ===== INFO SEPARATOR ===== */
.info-separator[b-qhj6j2hlmd] {
    margin: 0 var(--space-xs);
    color: var(--color-text-tertiary);
    opacity: 0.5;
}

/* ===== QUANTITY BADGE WITH ICON ===== */
.quantity-badge[b-qhj6j2hlmd] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: #a78bfa;
}

.quantity-badge .quantity-icon[b-qhj6j2hlmd] {
    font-size: 0.875rem !important;
}

/* ===== SELL PRICE SECTION ===== */
.sell-price-section[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--radius-lg);
}

.sell-price-section .price-label[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sell-price-section .price-value[b-qhj6j2hlmd] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-success-light);
}

/* ===== SELL QUANTITY ROW ===== */
.sell-quantity-row[b-qhj6j2hlmd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
}

.quantity-slider-group[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
}

.quantity-display[b-qhj6j2hlmd] {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    min-width: 60px;
    text-align: right;
}

/* ===== SELL BUTTONS ===== */
.sell-buttons[b-qhj6j2hlmd] {
    display: flex;
    gap: var(--space-sm);
}

.btn-sell-single[b-qhj6j2hlmd] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

/* ===== EQUIPPED BADGE ===== */
.equipped-badge[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-lg);
    color: var(--color-danger-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    width: 100%;
    justify-content: center;
}

/* ===== QUANTITY SELECTOR ===== */
.quantity-selector[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6));
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-hover);
    flex-shrink: 0;
}

.quantity-btn[b-qhj6j2hlmd] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.9), var(--color-bg-elevated));
    border: 1px solid var(--color-border-active);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: all var(--transition-base);
    padding: 0;
}

.quantity-btn:hover:not(:disabled)[b-qhj6j2hlmd] {
    background: linear-gradient(145deg, var(--color-border-hover), rgba(255, 215, 0, 0.1));
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.quantity-btn:active:not(:disabled)[b-qhj6j2hlmd] {
    transform: scale(0.95);
}

.quantity-btn:disabled[b-qhj6j2hlmd] {
    opacity: 0.3;
    cursor: not-allowed;
}

.quantity-input[b-qhj6j2hlmd] {
    width: 44px;
    height: 28px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-border-active);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    padding: 0;
}

.quantity-input:focus[b-qhj6j2hlmd] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-border-base);
}

/* Focus state for accessibility */
.quantity-btn:focus-visible[b-qhj6j2hlmd] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-border-hover);
}

/* Quantity label pulse animation */
.quantity-label[b-qhj6j2hlmd] {
    transition: all 0.2s ease-out;
}

.quantity-label.updating[b-qhj6j2hlmd] {
    color: var(--color-primary);
    transform: scale(1.1);
}

/* Remove spinner arrows in Chrome, Safari, Edge */
.quantity-input[b-qhj6j2hlmd]::-webkit-outer-spin-button,
.quantity-input[b-qhj6j2hlmd]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove spinner arrows in Firefox */
.quantity-input[type=number][b-qhj6j2hlmd] {
    -moz-appearance: textfield;
}

/* ===== ITEM FOOTER LAYOUT FIX ===== */
.item-footer[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
}

.item-footer > .price-display[b-qhj6j2hlmd] {
    flex: 0 0 auto;
}

.item-footer > .quantity-selector[b-qhj6j2hlmd] {
    flex: 0 0 auto;
}

.item-footer > .btn-sell[b-qhj6j2hlmd] {
    flex: 0 0 auto;
    min-width: 70px;
}

.item-footer > .equipped-badge[b-qhj6j2hlmd] {
    flex: 0 0 auto;
}

/* ===== ICON STYLES ===== */
.lock-icon[b-qhj6j2hlmd],
.info-icon[b-qhj6j2hlmd] {
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
}

.section-icon[b-qhj6j2hlmd] {
    font-size: 1.5rem;
    display: inline-flex;
    align-items: center;
}

.empty-state-icon[b-qhj6j2hlmd] {
    font-size: 4rem !important;
    display: flex;
    justify-content: center;
}

/* ===== QUANTITY CONTROLS ===== */
.quantity-controls[b-qhj6j2hlmd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
}

.quantity-slider-container[b-qhj6j2hlmd] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.quantity-slider[b-qhj6j2hlmd] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
}

.quantity-slider[b-qhj6j2hlmd]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px var(--color-border-active);
    transition: transform var(--transition-fast);
}

.quantity-slider[b-qhj6j2hlmd]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.quantity-slider[b-qhj6j2hlmd]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px var(--color-border-active);
}

/* Slider focus state */
.quantity-slider:focus-visible[b-qhj6j2hlmd] {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.quantity-slider:focus-visible[b-qhj6j2hlmd]::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--color-border-active);
}

.quantity-label[b-qhj6j2hlmd] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    min-width: 50px;
    text-align: right;
}

.sell-actions[b-qhj6j2hlmd] {
    display: flex;
    gap: var(--space-sm);
}

.btn-sell-all[b-qhj6j2hlmd] {
    padding: var(--space-sm) var(--space-md);
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: var(--radius-lg);
    color: var(--color-warning-light);
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-sell-all:hover[b-qhj6j2hlmd] {
    background: rgba(245, 158, 11, 0.25);
    border-color: rgba(245, 158, 11, 0.6);
    transform: translateY(-1px);
}

.btn-sell-all:active[b-qhj6j2hlmd] {
    transform: translateY(0) scale(0.98);
}

.btn-sell-all:focus-visible[b-qhj6j2hlmd] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-border-hover);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .item-footer[b-qhj6j2hlmd] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .sell-price-section[b-qhj6j2hlmd] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .quantity-selector[b-qhj6j2hlmd] {
        width: 100%;
        justify-content: center;
    }

    .sell-buttons[b-qhj6j2hlmd] {
        flex-direction: column;
    }

    .btn-sell[b-qhj6j2hlmd],
    .btn-sell-all[b-qhj6j2hlmd] {
        width: 100%;
    }
}

/* Mobile - LARGER touch targets (minimum 44x44px) */
@media (max-width: 640px) {
    .quantity-btn[b-qhj6j2hlmd] {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .quantity-input[b-qhj6j2hlmd] {
        width: 56px;
        height: 44px;
        font-size: var(--font-size-base);
    }

    .quantity-slider[b-qhj6j2hlmd] {
        height: 8px;
    }

    .quantity-slider[b-qhj6j2hlmd]::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
    }

    .quantity-slider[b-qhj6j2hlmd]::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }

    .btn-sell[b-qhj6j2hlmd],
    .btn-sell-all[b-qhj6j2hlmd] {
        min-height: 44px;
        padding: var(--space-md) var(--space-lg);
        font-size: var(--font-size-sm);
    }

    .sell-actions[b-qhj6j2hlmd] {
        flex-direction: column;
        gap: var(--space-md);
    }

    .sell-actions .btn-sell[b-qhj6j2hlmd],
    .sell-actions .btn-sell-all[b-qhj6j2hlmd] {
        width: 100%;
    }
}

/* Very small screens - even larger targets */
@media (max-width: 400px) {
    .quantity-btn[b-qhj6j2hlmd] {
        width: 48px;
        height: 48px;
    }

    .quantity-input[b-qhj6j2hlmd] {
        width: 52px;
        height: 48px;
    }
}
/* /Components/Pages/Account/CharacterSheet.razor.rz.scp.css */
/* Character Sheet - Complete Redesign */

/* ========================================
   Container Layout
   ======================================== */

.character-sheet-container[b-nclome5jxu] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ========================================
   Hero Header
   ======================================== */

.hero-header[b-nclome5jxu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    padding: 2rem;
    gap: 2rem;
}

.hero-header-left[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

/* Clickable wrapper that reveals the edit overlay on hover */
.hero-avatar-wrapper[b-nclome5jxu] {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 12px;
    flex-shrink: 0;
}

.avatar-edit-overlay[b-nclome5jxu] {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.52);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.hero-avatar-wrapper:hover .avatar-edit-overlay[b-nclome5jxu] {
    opacity: 1;
}

.hero-avatar[b-nclome5jxu] {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--color-border-base), rgba(255, 215, 0, 0.05));
    border: 2px solid var(--color-border-active);
}

.hero-avatar.warrior[b-nclome5jxu] { border-color: var(--color-danger); background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.05)); }
.hero-avatar.wizard[b-nclome5jxu] { border-color: var(--color-info); background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05)); }
.hero-avatar.ranger[b-nclome5jxu] { border-color: var(--color-success); background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05)); }
.hero-avatar.rogue[b-nclome5jxu] { border-color: var(--color-rogue); background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.05)); }
.hero-avatar.paladin[b-nclome5jxu] { border-color: var(--color-warning); background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05)); }
.hero-avatar.bard[b-nclome5jxu] { border-color: var(--color-bard); background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.05)); }
.hero-avatar.cleric[b-nclome5jxu] { border-color: var(--color-cleric); background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05)); }
.hero-avatar.monk[b-nclome5jxu] { border-color: var(--color-monk); background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05)); }
.hero-avatar.barbarian[b-nclome5jxu] { border-color: var(--color-barbarian); background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(220, 38, 38, 0.05)); }
.hero-avatar.pirate[b-nclome5jxu] { border-color: #78716c; background: linear-gradient(135deg, rgba(120, 113, 108, 0.2), rgba(120, 113, 108, 0.05)); }

.hero-info[b-nclome5jxu] {
    flex: 1;
}

.hero-name[b-nclome5jxu] {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1.2;
}

.hero-subtitle[b-nclome5jxu] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 1rem;
}

.hero-level[b-nclome5jxu] {
    color: var(--color-primary);
    font-weight: 600;
    font-family: 'Cinzel', serif;
}

.hero-class[b-nclome5jxu] {
    color: var(--color-text-secondary);
}

.hero-header-right[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

.hero-stat-badges[b-nclome5jxu] {
    display: flex;
    gap: 0.75rem;
}

.stat-badge[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.625rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    min-width: 80px;
}

.badge-label[b-nclome5jxu] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.badge-value[b-nclome5jxu] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
    font-family: 'Cinzel', serif;
}

/* ========================================
   Combat Readiness Banner
   ======================================== */

.combat-readiness-banner[b-nclome5jxu] {
    padding: 1.5rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border: 1px solid var(--color-border-subtle);
}

.combat-readiness-banner.grade-a[b-nclome5jxu] {
    border-left: 4px solid var(--color-success);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
}

.combat-readiness-banner.grade-b[b-nclome5jxu] {
    border-left: 4px solid var(--color-info);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
}

.combat-readiness-banner.grade-c[b-nclome5jxu] {
    border-left: 4px solid var(--color-warning);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
}

.combat-readiness-banner.grade-d[b-nclome5jxu] {
    border-left: 4px solid #f97316;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.05));
}

.combat-readiness-banner.grade-f[b-nclome5jxu] {
    border-left: 4px solid var(--color-danger);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
}

.readiness-score[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.readiness-icon[b-nclome5jxu] {
    color: var(--color-primary);
    flex-shrink: 0;
}

.readiness-content[b-nclome5jxu] {
    flex: 1;
}

.readiness-label[b-nclome5jxu] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.readiness-grade[b-nclome5jxu] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.readiness-improvements[b-nclome5jxu] {
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-subtle);
}

.improvements-header[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-light);
    font-size: 0.875rem;
    font-weight: 600;
}

.improvements-list[b-nclome5jxu] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.improvements-list li[b-nclome5jxu] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    padding-left: 1.25rem;
    position: relative;
}

.improvements-list li[b-nclome5jxu]::before {
    content: '?';
    position: absolute;
    left: 0;
    color: var(--color-primary);
}

/* ========================================
   Stat Points Alert
   ======================================== */

.stat-points-alert[b-nclome5jxu] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-left: 4px solid var(--color-warning);
    border-radius: 10px;
}

.alert-icon[b-nclome5jxu] {
    color: var(--color-warning);
    flex-shrink: 0;
    font-size: 1.5rem !important;
}

.stat-points-alert strong[b-nclome5jxu] {
    color: var(--color-warning-bright);
    font-family: 'Cinzel', serif;
    font-size: 1.125rem;
}

.stat-points-alert p[b-nclome5jxu] {
    color: var(--color-text-light);
    margin: 0.5rem 0 0 0;
    font-size: 0.875rem;
}

/* ========================================
   Main Content Grid
   ======================================== */

.sheet-grid[b-nclome5jxu] {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1400px) {
    .sheet-grid[b-nclome5jxu] {
        grid-template-columns: 1fr 1fr;
    }

    .column-center[b-nclome5jxu] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 968px) {
    .sheet-grid[b-nclome5jxu] {
        grid-template-columns: 1fr;
    }
}

.sheet-column[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ========================================
   Card Styling
   ======================================== */

.sheet-card[b-nclome5jxu] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.6)) !important;
    border: 1px solid var(--color-border-base) !important;
    border-radius: 10px !important;
}

.card-icon[b-nclome5jxu] {
    color: var(--color-primary);
    margin-right: 0.5rem;
}

.card-title[b-nclome5jxu] {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--color-text-light);
}

/* ========================================
   Progress Bars
   ======================================== */

.progress-bar-group[b-nclome5jxu] {
    margin-bottom: 1.25rem;
}

.progress-bar-group:last-child[b-nclome5jxu] {
    margin-bottom: 0;
}

.progress-label[b-nclome5jxu] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-light);
    font-weight: 600;
}

.progress-value[b-nclome5jxu] {
    color: var(--color-text-secondary);
    font-family: monospace;
}

.progress-bar[b-nclome5jxu] {
    height: 10px !important;
    border-radius: 5px !important;
}

/* ========================================
   Combat Stats Compact
   ======================================== */

.combat-stats-compact[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.combat-stat-row[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--color-border-subtle);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.combat-stat-row:hover[b-nclome5jxu] {
    border-color: var(--color-border-active);
    transform: translateX(2px);
}

.stat-icon.ac[b-nclome5jxu] { color: var(--color-info); }
.stat-icon.init[b-nclome5jxu] { color: var(--color-success); }
.stat-icon.attack[b-nclome5jxu] { color: var(--color-danger); }
.stat-icon.saves[b-nclome5jxu] { color: var(--color-monk); }

.stat-details[b-nclome5jxu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.stat-label[b-nclome5jxu] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.stat-value[b-nclome5jxu] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    font-family: 'Cinzel', serif;
}

/* ========================================
   Class Tips
   ======================================== */

.class-tips[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.tip-item[b-nclome5jxu] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid var(--color-border-subtle);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--color-text-light);
    line-height: 1.5;
    transition: all 0.2s ease;
}

.tip-item:hover[b-nclome5jxu] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.tip-icon[b-nclome5jxu] {
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* ========================================
   Currency Display
   ======================================== */

.currency-grid[b-nclome5jxu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.currency-box[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.currency-box:hover[b-nclome5jxu] {
    transform: translateY(-2px);
}

.currency-box.gold[b-nclome5jxu] { border-color: var(--color-border-active); }
.currency-box.silver[b-nclome5jxu] { border-color: rgba(192, 192, 192, 0.3); }
.currency-box.copper[b-nclome5jxu] { border-color: rgba(205, 127, 50, 0.3); }

.currency-icon[b-nclome5jxu] {
    opacity: 0.6;
    margin-bottom: 0.5rem;
}

.currency-box.gold .currency-icon[b-nclome5jxu] { color: var(--color-primary); }
.currency-box.silver .currency-icon[b-nclome5jxu] { color: var(--color-silver); }
.currency-box.copper .currency-icon[b-nclome5jxu] { color: var(--color-bronze); }

.currency-amount[b-nclome5jxu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    font-family: 'Cinzel', serif;
    line-height: 1;
}

.currency-name[b-nclome5jxu] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 0.375rem;
}

.currency-total[b-nclome5jxu] {
    padding: 0.75rem;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 6px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* Ability-scores + stat-allocation styles moved to StatAllocationPanel.razor.css
   when that surface was extracted (the markup now lives there). */

/* ========================================
   Equipment & Inventory
   ======================================== */

.inventory-summary[b-nclome5jxu] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--color-border-subtle);
    border-radius: 6px;
}

.inv-stat-inline[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.inv-label[b-nclome5jxu] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.inv-value-inline[b-nclome5jxu] {
    font-size: 1rem;
    color: var(--color-primary);
    font-weight: 700;
    font-family: 'Cinzel', serif;
}

.equipment-slots-grid[b-nclome5jxu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.equipment-slot-card[b-nclome5jxu] {
    padding: 0.875rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.equipment-slot-card.full-width[b-nclome5jxu] {
    grid-column: 1 / -1;
}

.equipment-slot-card.equipped[b-nclome5jxu] {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(34, 197, 94, 0.02));
}

.equipment-slot-card.empty[b-nclome5jxu] {
    border-color: rgba(100, 116, 139, 0.2);
    opacity: 0.7;
}

.equipment-slot-card:hover[b-nclome5jxu] {
    border-color: var(--color-border-active);
    transform: translateY(-1px);
}

.slot-header[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.slot-icon[b-nclome5jxu] {
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.equipment-slot-card.equipped .slot-icon[b-nclome5jxu] {
    color: var(--color-success);
}

.equipment-slot-card.full-width .slot-icon[b-nclome5jxu] {
    font-size: 2rem !important;
}

.slot-info[b-nclome5jxu] {
    flex: 1;
    min-width: 0;
}

.slot-label[b-nclome5jxu] {
    font-size: 0.6875rem;
    color: var(--color-text-tertiary);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.slot-item-name[b-nclome5jxu] {
    font-size: 0.9375rem;
    color: var(--color-text-light);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipment-slot-card.empty .slot-item-name[b-nclome5jxu] {
    color: var(--color-text-tertiary);
    font-style: italic;
    font-weight: 400;
}

.equipment-slot-card.full-width .slot-item-name[b-nclome5jxu] {
    font-size: 1.125rem;
    font-family: 'Cinzel', serif;
}

.slot-status[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
}

.slot-status.equipped-badge[b-nclome5jxu] {
    color: var(--color-success);
    font-weight: 600;
    padding: 0.375rem 0.5rem;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 4px;
}

.equipment-summary-footer[b-nclome5jxu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--color-text-light);
    font-weight: 600;
}

/* ========================================
   Combat Statistics
   ======================================== */

.combat-grid[b-nclome5jxu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.combat-stat[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
}

.combat-stat.wins[b-nclome5jxu] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.combat-icon[b-nclome5jxu] {
    flex-shrink: 0;
}

.combat-info[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
}

.combat-details[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-row[b-nclome5jxu] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.detail-row span[b-nclome5jxu] {
    color: var(--color-text-secondary);
}

.detail-row strong[b-nclome5jxu] {
    color: var(--color-text-primary);
}

/* ========================================
   Recommended Adventures
   ======================================== */

.adventures-list[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.adventure-card[b-nclome5jxu] {
    padding: 1.125rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.adventure-card:hover:not(.locked)[b-nclome5jxu] {
    border-color: var(--color-border-active);
    transform: translateY(-2px);
}

.adventure-card.locked[b-nclome5jxu] {
    opacity: 0.6;
}

.adventure-header[b-nclome5jxu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.adventure-name[b-nclome5jxu] {
    font-family: 'Cinzel', serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-primary);
}

.adventure-meta[b-nclome5jxu] {
    display: flex;
    gap: 0.875rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.level-range[b-nclome5jxu] {
    color: var(--color-text-light);
    font-weight: 600;
}

.adventure-description[b-nclome5jxu] {
    font-size: 0.875rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.adventure-btn[b-nclome5jxu] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1)) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: var(--color-success) !important;
    font-weight: 600 !important;
}

.locked-overlay-small[b-nclome5jxu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 6px;
    color: var(--color-warning);
    font-size: 0.875rem;
    font-weight: 600;
}

.view-all-btn[b-nclome5jxu] {
    margin-top: 0.5rem;
    color: var(--color-text-light) !important;
}

.no-adventures[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
}

.no-adventures-icon[b-nclome5jxu] {
    font-size: 3rem !important;
    color: #475569;
    margin-bottom: 1rem;
}

.no-adventures p[b-nclome5jxu] {
    color: var(--color-text-secondary);
    margin: 0;
}

/* ========================================
   No Character State
   ======================================== */

.no-character-panel[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}

.no-character-panel .warning-icon[b-nclome5jxu] {
    font-size: 4rem !important;
    color: var(--color-warning);
    margin-bottom: 1.5rem;
}

.no-character-title[b-nclome5jxu] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.no-character-text[b-nclome5jxu] {
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

.btn-primary[b-nclome5jxu] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    color: var(--color-gray-900) !important;
    font-weight: 600;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) { 
    .character-sheet-container[b-nclome5jxu] {
        padding: 1rem;
        gap: 1.5rem;
    }

    .hero-header[b-nclome5jxu] {
        flex-direction: column;
        padding: 1.5rem;
    }

    .hero-header-left[b-nclome5jxu] {
        flex-direction: column;
        width: 100%;
    }

    .hero-info[b-nclome5jxu] {
        width: 100%;
    }

    .hero-name[b-nclome5jxu] {
        font-size: 1.8rem;
    }

    .hero-subtitle[b-nclome5jxu] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .hero-header-right[b-nclome5jxu] {
        align-items: center;
        width: 100%;
    }

    .hero-stat-badges[b-nclome5jxu] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .currency-grid[b-nclome5jxu] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .improvements-list[b-nclome5jxu] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .character-sheet-container[b-nclome5jxu] {
        padding: 0.75rem;
        gap: 1rem;
    }

    .hero-name[b-nclome5jxu] {
        font-size: 1.5rem;
    }

    .hero-stat-badges[b-nclome5jxu] {
        gap: 0.5rem;
    }

    .stat-badge[b-nclome5jxu] {
        padding: 0.5rem 0.75rem;
    }

    .combat-grid[b-nclome5jxu] {
        grid-template-columns: 1fr;
    }
}

/* Active Companion Row */
.companion-row[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.15);
    border-radius: 8px;
    margin-top: 10px;
}

.companion-portrait-wrap[b-nclome5jxu] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(251,191,36,0.4);
}

.companion-portrait[b-nclome5jxu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.companion-info[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.companion-name[b-nclome5jxu] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.companion-level[b-nclome5jxu] {
    font-size: 0.68rem;
    color: #94a3b8;
}

.companion-gem[b-nclome5jxu] {
    font-size: 0.6rem;
}
.companion-gem.stage-1[b-nclome5jxu] { color: #94a3b8; }
.companion-gem.stage-2[b-nclome5jxu] { color: #22d3ee; }
.companion-gem.stage-3[b-nclome5jxu] { color: var(--color-warning-bright); }

/* ========================================
   Character Hub (tabbed layout)
   ======================================== */

.character-hub[b-nclome5jxu] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hub-header[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-hover);
    border-left: 4px solid var(--class-accent, var(--color-primary));
    border-radius: 12px;
    padding: 1.5rem;
}

.hub-identity[b-nclome5jxu] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hub-name[b-nclome5jxu] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.1;
}

/* Hero-switcher dropdown trigger (the name doubles as a menu) */
.hub-name-btn[b-nclome5jxu] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

.hub-name-btn .mud-icon-root[b-nclome5jxu] {
    color: var(--color-text-secondary);
}

.hub-name-btn:hover .hub-name[b-nclome5jxu] {
    text-decoration: underline;
    text-decoration-color: var(--color-border-active);
}

.hero-switch-item[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
}

.hero-switch-name[b-nclome5jxu] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.hero-switch-meta[b-nclome5jxu] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.hub-subtitle[b-nclome5jxu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

.hub-level[b-nclome5jxu] {
    color: var(--color-primary);
    font-weight: 600;
    font-family: 'Cinzel', serif;
}

.hub-vitals[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
    max-width: 420px;
}

.hub-header-side[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
}

.hub-header-nav[b-nclome5jxu] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* These are <a class="btn ..."> nav links — strip the default anchor underline. */
.hub-header-nav .btn[b-nclome5jxu] {
    text-decoration: none;
}

.readiness-badge[b-nclome5jxu] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.85rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--color-border-hover);
}

.readiness-badge.grade-a[b-nclome5jxu] { color: var(--color-success); border-color: rgba(34, 197, 94, 0.4); }
.readiness-badge.grade-b[b-nclome5jxu] { color: var(--color-info); border-color: rgba(59, 130, 246, 0.4); }
.readiness-badge.grade-c[b-nclome5jxu] { color: var(--color-warning); border-color: rgba(245, 158, 11, 0.4); }
.readiness-badge.grade-d[b-nclome5jxu] { color: #f97316; border-color: rgba(249, 115, 22, 0.4); }
.readiness-badge.grade-f[b-nclome5jxu] { color: var(--color-danger); border-color: rgba(239, 68, 68, 0.4); }

.hub-stat-points-alert[b-nclome5jxu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-left: 4px solid var(--color-warning);
    border-radius: 10px;
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.hub-stat-points-alert strong[b-nclome5jxu] { color: var(--color-warning-bright); font-family: 'Cinzel', serif; }
.hub-stat-points-alert span[b-nclome5jxu] { flex: 1; }

/* Tab panel body: vertical stack of sheet-cards */
.hub-tab-body[b-nclome5jxu] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 1.5rem;
}

.companion-empty[b-nclome5jxu] {
    flex: 1;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.profile-backstory[b-nclome5jxu] {
    color: var(--color-text-light);
    font-style: italic;
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

.profile-backstory-empty[b-nclome5jxu] {
    color: var(--color-text-tertiary);
}

@media (max-width: 768px) {
    .character-hub[b-nclome5jxu] { padding: 1rem; gap: 1rem; }
    .hub-header[b-nclome5jxu] { flex-direction: column; align-items: flex-start; }
    .hub-header-side[b-nclome5jxu] { align-items: flex-start; width: 100%; flex-direction: row; justify-content: space-between; }
    .hub-vitals[b-nclome5jxu] { max-width: none; }
    .hub-name[b-nclome5jxu] { font-size: 1.6rem; }
}
/* /Components/Pages/Admin/CharacterExplorer.razor.rz.scp.css */
/* Admin Character Explorer
   Mirrors the Users.razor.css admin shell so the page reads as part of the same tool set.
   Deltas from that file, deliberate:
     - tokens instead of raw rgba() literals for the stat-card variants
     - canonical breakpoints only (960 / 768 / 480); Users.razor.css still uses a stray 600
     - ::deep on every selector that targets MudBlazor-rendered DOM (scoped attributes are
       not applied inside a child component's markup) */

.character-explorer-page[b-2e6qejykx1] {
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* ===== Page Header ===== */
.page-header[b-2e6qejykx1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title[b-2e6qejykx1] {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    display: flex;
    align-items: center;
    text-shadow: 0 0 10px var(--color-border-active);
}

.page-subtitle[b-2e6qejykx1] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0.5rem 0 0 0;
}

.header-actions[b-2e6qejykx1] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ===== Stat Cards =====
   ::deep is required on .stat-card / .search-field / .characters-table: those classes are passed
   to MudBlazor components, so they land on the CHILD's rendered root, which never carries this
   component's b-* scope attribute. Without ::deep the rules compile to `.stat-card[b-*]` and
   match nothing. Classes on elements written in this file's own markup (.stat-icon, .stat-value,
   .character-cell, the metrics-table <td>s) do carry the attribute and must NOT use ::deep. */
[b-2e6qejykx1] .stat-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-hover);
    transition: all 0.3s ease;
    height: 100%;
}

[b-2e6qejykx1] .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-active);
}

[b-2e6qejykx1] .stat-card .mud-card-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem !important;
}

.stat-icon[b-2e6qejykx1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border: 1px solid var(--color-border-active);
    flex-shrink: 0;
}

[b-2e6qejykx1] .stat-icon .mud-icon-root {
    color: var(--color-primary);
}

.stat-content[b-2e6qejykx1] {
    flex: 1;
    min-width: 0;
}

.stat-label[b-2e6qejykx1] {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value[b-2e6qejykx1] {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

/* Variants — every one referenced by the markup is defined here. */
.stat-card-info .stat-icon[b-2e6qejykx1] {
    background: color-mix(in srgb, var(--color-info) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
}

[b-2e6qejykx1] .stat-card-info .stat-icon .mud-icon-root,
.stat-card-info .stat-value[b-2e6qejykx1] {
    color: var(--color-info);
}

.stat-card-warning .stat-icon[b-2e6qejykx1] {
    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}

[b-2e6qejykx1] .stat-card-warning .stat-icon .mud-icon-root,
.stat-card-warning .stat-value[b-2e6qejykx1] {
    color: var(--color-warning);
}

.stat-card-success .stat-icon[b-2e6qejykx1] {
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

[b-2e6qejykx1] .stat-card-success .stat-icon .mud-icon-root,
.stat-card-success .stat-value[b-2e6qejykx1] {
    color: var(--color-success);
}

.stat-card-primary .stat-icon[b-2e6qejykx1] {
    background: color-mix(in srgb, var(--color-monk) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-monk) 30%, transparent);
}

[b-2e6qejykx1] .stat-card-primary .stat-icon .mud-icon-root,
.stat-card-primary .stat-value[b-2e6qejykx1] {
    color: var(--color-monk);
}

/* ===== Card chrome ===== */
.card-header-title[b-2e6qejykx1] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-primary);
    display: flex;
    align-items: center;
}

[b-2e6qejykx1] .search-field {
    min-width: 300px;
}

[b-2e6qejykx1] .search-field .mud-input-root {
    background: rgba(0, 0, 0, 0.3);
}

.subsection-title[b-2e6qejykx1] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.chip-row[b-2e6qejykx1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.muted-note[b-2e6qejykx1] {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
}

.mono[b-2e6qejykx1] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    word-break: break-all;
}

/* ===== Loading / empty ===== */
.loading-container[b-2e6qejykx1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--color-text-secondary);
}

.empty-state[b-2e6qejykx1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--color-text-tertiary);
    text-align: center;
}

[b-2e6qejykx1] .empty-state .mud-icon-root {
    font-size: 4rem;
    color: var(--color-text-tertiary);
}

/* ===== Characters table ===== */
[b-2e6qejykx1] .characters-table {
    background: transparent;
}

[b-2e6qejykx1] .characters-table .mud-table-head .mud-table-cell {
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
    border-bottom: 2px solid var(--color-border-active);
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    font-size: var(--font-size-base);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

[b-2e6qejykx1] .characters-table .mud-table-row:hover {
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

[b-2e6qejykx1] .characters-table .mud-table-cell {
    border-bottom: 1px solid var(--color-border-base);
    vertical-align: middle;
}

.character-cell[b-2e6qejykx1] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.character-name-row[b-2e6qejykx1] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.character-name[b-2e6qejykx1] {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.95rem;
}

.character-name:hover[b-2e6qejykx1] {
    text-decoration: underline;
}

.character-sub[b-2e6qejykx1] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.level-cell[b-2e6qejykx1] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.level-value[b-2e6qejykx1] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}

.level-xp[b-2e6qejykx1] {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.vitals-cell[b-2e6qejykx1] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.vital[b-2e6qejykx1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

[b-2e6qejykx1] .vital .mud-icon-root {
    font-size: 0.95rem;
}

.vital-hp[b-2e6qejykx1] { color: var(--color-hp); }
.vital-mana[b-2e6qejykx1] { color: var(--color-mana); }
.vital-ac[b-2e6qejykx1] { color: var(--color-text-secondary); }

.abilities-cell[b-2e6qejykx1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.1rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.record-cell[b-2e6qejykx1] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8rem;
}

.record-sub[b-2e6qejykx1] {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.owner-cell[b-2e6qejykx1] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-width: 220px;
}

.owner-name[b-2e6qejykx1] {
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.owner-name:hover[b-2e6qejykx1] {
    text-decoration: underline;
}

.owner-name-missing[b-2e6qejykx1] {
    color: var(--color-text-tertiary);
    font-style: italic;
}

.owner-id[b-2e6qejykx1] {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}

.date-cell[b-2e6qejykx1] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.date-cell > div:first-child[b-2e6qejykx1] {
    color: var(--color-text-primary);
    font-size: 0.85rem;
    white-space: nowrap;
}

.date-relative[b-2e6qejykx1] {
    color: var(--color-text-tertiary);
    font-size: 0.7rem;
}

/* ===== Owner summary (user drill-down) ===== */
.owner-summary[b-2e6qejykx1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);
}

.owner-field[b-2e6qejykx1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.owner-field-label[b-2e6qejykx1] {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-tertiary);
}

.owner-field-value[b-2e6qejykx1] {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

/* ===== Character detail ===== */
.detail-back[b-2e6qejykx1] {
    margin-bottom: var(--space-lg);
}

/* Default text colour is set on the table so it reaches the cells by INHERITANCE. Setting it on
   `.metrics-table td` directly would score (0,2,1) and beat the semantic `.success-text[b-*]`
   (0,2,0) on every cell that carries both classes, forcing the whole detail view plain white. */
[b-2e6qejykx1] .metrics-table {
    color: var(--color-text-primary);
}

.metrics-table td[b-2e6qejykx1] {
    border-bottom: 1px solid var(--color-border-base);
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
}

.metrics-table .text-right[b-2e6qejykx1] {
    text-align: right;
}

.success-text[b-2e6qejykx1] { color: var(--color-success); }
.warning-text[b-2e6qejykx1] { color: var(--color-warning); }
.error-text[b-2e6qejykx1] { color: var(--color-danger); }

.ability-grid[b-2e6qejykx1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
}

.ability-tile[b-2e6qejykx1] {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    text-align: center;
}

.ability-label[b-2e6qejykx1] {
    font-size: var(--font-size-xs);
    letter-spacing: 0.5px;
    color: var(--color-text-tertiary);
}

.ability-score[b-2e6qejykx1] {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.1;
}

.ability-mod[b-2e6qejykx1] {
    font-size: 0.75rem;
    color: var(--color-primary);
}

/* ===== Responsive (canonical breakpoints only) ===== */
@media (max-width: 960px) {
    .character-explorer-page[b-2e6qejykx1] {
        padding: 1rem;
    }

    .page-header[b-2e6qejykx1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-title[b-2e6qejykx1] {
        font-size: 2rem;
    }

    .header-actions[b-2e6qejykx1] {
        width: 100%;
    }

    [b-2e6qejykx1] .stat-card .mud-card-content {
        padding: 1rem !important;
    }

    [b-2e6qejykx1] .search-field {
        min-width: auto;
        width: 100%;
    }

    .stat-icon[b-2e6qejykx1] {
        width: 50px;
        height: 50px;
    }

    .stat-value[b-2e6qejykx1] {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .page-title[b-2e6qejykx1] {
        font-size: 1.5rem;
    }

    [b-2e6qejykx1] .stat-card .mud-card-content {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .stat-content[b-2e6qejykx1] {
        width: 100%;
    }

    .owner-cell[b-2e6qejykx1] {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .abilities-cell[b-2e6qejykx1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ability-grid[b-2e6qejykx1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Pages/Admin/CombatDynamics.razor.rz.scp.css */
.combat-dynamics-page[b-mk8o1u2uip] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-mk8o1u2uip] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--mud-palette-divider);
}

.page-title[b-mk8o1u2uip] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    margin: 0;
    display: flex;
    align-items: center;
}

.page-subtitle[b-mk8o1u2uip] {
    font-size: 1.1rem;
    color: var(--mud-palette-text-secondary);
    margin: 0.5rem 0 0 0;
}

.section-header[b-mk8o1u2uip] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.mechanics-section[b-mk8o1u2uip] {
    scroll-margin-top: 100px;
    margin-bottom: 2rem;
}

/* ================================================
   CODE BLOCKS AND FORMULAS - FIXED
   ================================================ */
[b-mk8o1u2uip] code {
    background-color: rgba(25, 118, 210, 0.08) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 0.95rem !important;
    color: #1976d2 !important;
    font-weight: 600 !important;
}

[b-mk8o1u2uip] .mud-alert code {
    background-color: transparent !important;
    color: inherit !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* ================================================
   EXAMPLE BOXES - COMPLETELY REDESIGNED
   ================================================ */
[b-mk8o1u2uip] .mud-paper[elevation="0"] {
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    background-color: #263238 !important;
    color: #eceff1 !important;
    padding: 1rem !important;
}

[b-mk8o1u2uip] .mud-paper[elevation="0"] * {
    color: #eceff1 !important;
}

[b-mk8o1u2uip] .mud-paper[elevation="0"] .mud-typography {
    color: #eceff1 !important;
}

[b-mk8o1u2uip] .mud-paper[elevation="0"] strong {
    color: #4fc3f7 !important;
    font-weight: 600 !important;
}

[b-mk8o1u2uip] .mud-paper[elevation="0"] em {
    color: #81c784 !important;
    font-style: italic !important;
}

/* Monospace text styling - FIXED */
[b-mk8o1u2uip] [style*="font-family: monospace"],
[b-mk8o1u2uip] [style*="font-family:monospace"] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    line-height: 1.8 !important;
    font-size: 0.9rem !important;
    color: #eceff1 !important;
}

[b-mk8o1u2uip] .mud-paper[elevation="0"] [style*="font-family: monospace"] {
    color: #eceff1 !important;
}

/* Color-coded text - ENHANCED */
[b-mk8o1u2uip] .text-primary,
[b-mk8o1u2uip] .mud-paper [class*="text-primary"] {
    color: #64b5f6 !important;
    font-weight: 600 !important;
}

[b-mk8o1u2uip] .text-secondary,
[b-mk8o1u2uip] .mud-paper [class*="text-secondary"] {
    color: #ba68c8 !important;
    font-weight: 600 !important;
}

[b-mk8o1u2uip] .text-success,
[b-mk8o1u2uip] .mud-paper [class*="text-success"] {
    color: #81c784 !important;
    font-weight: 600 !important;
}

[b-mk8o1u2uip] .text-warning,
[b-mk8o1u2uip] .mud-paper [class*="text-warning"] {
    color: #ffb74d !important;
    font-weight: 600 !important;
}

[b-mk8o1u2uip] .text-error,
[b-mk8o1u2uip] .mud-paper [class*="text-error"] {
    color: #e57373 !important;
    font-weight: 600 !important;
}

/* Specific background colors for different example types - FIXED */
[b-mk8o1u2uip] .mud-paper[style*="background-color: #f5f5f5"],
[b-mk8o1u2uip] .mud-paper[style*="background-color:#f5f5f5"] {
    background-color: #263238 !important;
    border-left: 4px solid #2196f3 !important;
}

[b-mk8o1u2uip] .mud-paper[style*="background-color: #e8f5e9"],
[b-mk8o1u2uip] .mud-paper[style*="background-color:#e8f5e9"] {
    background-color: #1b5e20 !important;
    border-left: 4px solid #4caf50 !important;
}

[b-mk8o1u2uip] .mud-paper[style*="background-color: #fff3e0"],
[b-mk8o1u2uip] .mud-paper[style*="background-color:#fff3e0"] {
    background-color: #e65100 !important;
    border-left: 4px solid #ff9800 !important;
}

[b-mk8o1u2uip] .mud-paper[style*="background-color: #e3f2fd"],
[b-mk8o1u2uip] .mud-paper[style*="background-color:#e3f2fd"] {
    background-color: #0d47a1 !important;
    border-left: 4px solid #2196f3 !important;
}

[b-mk8o1u2uip] .mud-paper[style*="background-color: #ffebee"],
[b-mk8o1u2uip] .mud-paper[style*="background-color:#ffebee"] {
    background-color: #b71c1c !important;
    border-left: 4px solid #f44336 !important;
}

/* ================================================
   TABLES - IMPROVED
   ================================================ */
[b-mk8o1u2uip] .mud-table-simple {
    background-color: transparent !important;
}

[b-mk8o1u2uip] .mud-table-simple tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

[b-mk8o1u2uip] .mud-table-simple th {
    font-weight: 700 !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    padding: 12px 16px !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

[b-mk8o1u2uip] .mud-table-simple td {
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
}

[b-mk8o1u2uip] .mud-table-simple tbody tr td:first-child {
    font-weight: 600 !important;
}

/* Table row backgrounds - FIXED */
[b-mk8o1u2uip] .mud-table-simple tbody tr[style*="background-color: #ffebee"],
[b-mk8o1u2uip] .mud-table-simple tbody tr[style*="background-color:#ffebee"] {
    background-color: rgba(244, 67, 54, 0.08) !important;
}

[b-mk8o1u2uip] .mud-table-simple tbody tr[style*="background-color: #e8f5e9"],
[b-mk8o1u2uip] .mud-table-simple tbody tr[style*="background-color:#e8f5e9"] {
    background-color: rgba(76, 175, 80, 0.08) !important;
}

/* ================================================
   KEY TAKEAWAYS SECTION - COMPLETELY FIXED
   ================================================ */
[b-mk8o1u2uip] .mud-paper[style*="linear-gradient(135deg, #667eea"] {
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%) !important;
    color: white !important;
    padding: 2rem !important;
}

[b-mk8o1u2uip] .mud-paper[style*="linear-gradient(135deg, #667eea"] * {
    color: white !important;
}

[b-mk8o1u2uip] .mud-paper[style*="linear-gradient(135deg, #667eea"] .mud-typography {
    color: white !important;
}

[b-mk8o1u2uip] .mud-paper[style*="linear-gradient(135deg, #667eea"] .mud-list-item {
    color: white !important;
    padding: 12px 16px !important;
}

[b-mk8o1u2uip] .mud-paper[style*="linear-gradient(135deg, #667eea"] .mud-list-item * {
    color: white !important;
}

[b-mk8o1u2uip] .mud-paper[style*="linear-gradient(135deg, #667eea"] strong {
    color: white !important;
    font-weight: 700 !important;
}

[b-mk8o1u2uip] .mud-paper[style*="linear-gradient(135deg, #667eea"] .mud-icon-root {
    color: white !important;
}

/* ================================================
   LIST STYLING
   ================================================ */
[b-mk8o1u2uip] .mud-list-item-icon {
    min-width: 40px !important;
}

[b-mk8o1u2uip] .mud-list-item {
    padding: 8px 16px !important;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 960px) {
    .combat-dynamics-page[b-mk8o1u2uip] {
        padding: 1rem;
    }

    .page-header[b-mk8o1u2uip] {
        flex-direction: column;
        gap: 1rem;
    }

    .page-title[b-mk8o1u2uip] {
        font-size: 2rem;
    }
}

/* ================================================
   CHIP SET AND NAVIGATION
   ================================================ */
[b-mk8o1u2uip] .mud-chipset {
    gap: 0.5rem !important;
}

[b-mk8o1u2uip] .mud-chip {
    cursor: pointer !important;
}

/* ================================================
   ALERT IMPROVEMENTS
   ================================================ */
[b-mk8o1u2uip] .mud-alert {
    margin-bottom: 1rem !important;
}

[b-mk8o1u2uip] .mud-alert strong {
    font-weight: 700 !important;
}

[b-mk8o1u2uip] .mud-alert-message {
    width: 100% !important;
}

[b-mk8o1u2uip] .mud-alert.mud-alert-filled-info {
    background-color: rgba(33, 150, 243, 0.12) !important;
    color: #1976d2 !important;
}

[b-mk8o1u2uip] .mud-alert.mud-alert-filled-warning {
    background-color: rgba(255, 152, 0, 0.12) !important;
    color: #f57c00 !important;
}

[b-mk8o1u2uip] .mud-alert.mud-alert-filled-success {
    background-color: rgba(76, 175, 80, 0.12) !important;
    color: #388e3c !important;
}

/* ================================================
   GRID SPACING
   ================================================ */
[b-mk8o1u2uip] .mud-grid {
    gap: 1rem !important;
}

/* ================================================
   SECTION IMPROVEMENTS
   ================================================ */
.mechanics-section .mud-paper[b-mk8o1u2uip] {
    transition: box-shadow 0.3s ease !important;
}

.mechanics-section .mud-paper:hover[b-mk8o1u2uip] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* ================================================
   SUBTITLE STYLING IN EXAMPLES
   ================================================ */
[b-mk8o1u2uip] .mud-typography-subtitle2 {
    font-weight: 700 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    color: var(--mud-palette-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.875rem !important;
}

/* ================================================
   EXAMPLE BATTLE BORDERS
   ================================================ */
[b-mk8o1u2uip] .mud-paper[elevation="2"] {
    border-radius: 8px !important;
    overflow: hidden !important;
}

[b-mk8o1u2uip] .mud-paper[elevation="2"][style*="border-left"] {
    margin-bottom: 2rem !important;
}

/* ================================================
   DIVIDER SPACING
   ================================================ */
[b-mk8o1u2uip] .mud-divider {
    margin: 1.5rem 0 !important;
}

/* ================================================
   BODY TEXT
   ================================================ */
[b-mk8o1u2uip] .mechanics-section .mud-typography-body1,
[b-mk8o1u2uip] .mechanics-section .mud-typography-body2 {
    line-height: 1.7 !important;
}

[b-mk8o1u2uip] .mechanics-section ul {
    margin: 0.5rem 0 1rem 1.5rem !important;
    line-height: 1.8 !important;
}

[b-mk8o1u2uip] .mechanics-section ul li {
    margin-bottom: 0.5rem !important;
}

/* ================================================
   FORMULA BOX IMPROVEMENTS
   ================================================ */
[b-mk8o1u2uip] .mud-alert code strong {
    font-size: 1.1rem !important;
}

/* ================================================
   PAPER BACKGROUND OVERRIDE FOR ALL EXAMPLES
   ================================================ */
[b-mk8o1u2uip] .mechanics-section .mud-paper[elevation="0"] {
    background-color: #263238 !important;
}

[b-mk8o1u2uip] .mechanics-section .mud-paper[elevation="0"] br {
    display: block !important;
    content: "" !important;
    margin-top: 0.25rem !important;
}
/* /Components/Pages/Admin/Dashboard.razor.rz.scp.css */
/* Admin Dashboard Styles */

.admin-dashboard[b-tzodqnyl78] {
    padding: 1.5rem;
}

/* Dashboard Header */
.dashboard-header[b-tzodqnyl78] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.page-title[b-tzodqnyl78] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    display: flex;
    align-items: center;
}

.page-subtitle[b-tzodqnyl78] {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.header-actions[b-tzodqnyl78] {
    display: flex;
    gap: 0.75rem;
}

/* Loading Container */
.loading-container[b-tzodqnyl78] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    color: var(--color-text-secondary);
}

/* Stat Cards */
.stat-card[b-tzodqnyl78] {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 100%;
}

.stat-card:hover[b-tzodqnyl78] {
    transform: translateY(-4px);
    border-color: var(--color-border-active);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(255, 215, 0, 0.1);
}

.stat-card-success[b-tzodqnyl78] {
    border-top: 3px solid var(--color-success);
}

.stat-card-info[b-tzodqnyl78] {
    border-top: 3px solid var(--color-info);
}

.stat-card-warning[b-tzodqnyl78] {
    border-top: 3px solid var(--color-warning);
}

.stat-card-error[b-tzodqnyl78] {
    border-top: 3px solid var(--color-danger);
}

[b-tzodqnyl78] .stat-card .mud-card-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem !important;
}

.stat-icon[b-tzodqnyl78] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
}

.stat-content[b-tzodqnyl78] {
    flex: 1;
}

.stat-label[b-tzodqnyl78] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.stat-value[b-tzodqnyl78] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: 'Cinzel', serif;
}

/* Card Header Title */
.card-header-title[b-tzodqnyl78] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    display: flex;
    align-items: center;
}

/* Metrics Tables */
.metrics-table[b-tzodqnyl78] {
    background: transparent !important;
}

[b-tzodqnyl78] .metrics-table td {
    border-bottom: 1px solid rgba(255, 215, 0, 0.05) !important;
    padding: 0.75rem 0.5rem !important;
    color: var(--color-text-primary);
}

[b-tzodqnyl78] .metrics-table tr:last-child td {
    border-bottom: none !important;
}

[b-tzodqnyl78] .metrics-table tbody tr:hover {
    background: rgba(255, 215, 0, 0.05) !important;
}

.text-right[b-tzodqnyl78] {
    text-align: right !important;
}

.success-text[b-tzodqnyl78] {
    color: var(--color-success) !important;
    font-weight: 600;
}

.error-text[b-tzodqnyl78] {
    color: var(--color-danger) !important;
    font-weight: 600;
}

.warning-text[b-tzodqnyl78] {
    color: var(--color-warning) !important;
    font-weight: 600;
}

/* Subsection Title */
.subsection-title[b-tzodqnyl78] {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Activity Feed */
.activity-feed[b-tzodqnyl78] {
    max-height: 500px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.activity-item[b-tzodqnyl78] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.05);
    transition: all 0.2s ease;
}

.activity-item:hover[b-tzodqnyl78] {
    background: rgba(255, 215, 0, 0.05);
    border-color: var(--color-border-base);
}

.activity-icon[b-tzodqnyl78] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
    flex-shrink: 0;
}

.activity-content[b-tzodqnyl78] {
    flex: 1;
    min-width: 0;
}

.activity-description[b-tzodqnyl78] {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.activity-description strong[b-tzodqnyl78] {
    color: var(--color-primary);
    font-weight: 600;
}

.activity-time[b-tzodqnyl78] {
    color: var(--color-text-tertiary);
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-dashboard[b-tzodqnyl78] {
        padding: 1rem;
    }

    .dashboard-header[b-tzodqnyl78] {
        flex-direction: column;
        gap: 1rem;
    }

    .header-actions[b-tzodqnyl78] {
        width: 100%;
    }

    .header-actions button[b-tzodqnyl78] {
        flex: 1;
    }

    .page-title[b-tzodqnyl78] {
        font-size: 1.5rem;
    }

    .stat-value[b-tzodqnyl78] {
        font-size: 1.5rem;
    }

    .stat-icon[b-tzodqnyl78] {
        width: 48px;
        height: 48px;
    }
}

/* Custom Scrollbar for Activity Feed */
.activity-feed[b-tzodqnyl78]::-webkit-scrollbar {
    width: 8px;
}

.activity-feed[b-tzodqnyl78]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.activity-feed[b-tzodqnyl78]::-webkit-scrollbar-thumb {
    background: var(--color-border-active);
    border-radius: 4px;
}

.activity-feed[b-tzodqnyl78]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.5);
}
/* /Components/Pages/Admin/Users.razor.rz.scp.css */
/* Admin Users Page Styles */
.admin-users-page[b-73i8al9my5] {
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* Page Header */
.page-header[b-73i8al9my5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title[b-73i8al9my5] {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    display: flex;
    align-items: center;
    text-shadow: 0 0 10px var(--color-border-active);
}

.page-subtitle[b-73i8al9my5] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0 0 0;
}

.header-actions[b-73i8al9my5] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Statistics Cards */
.stat-card[b-73i8al9my5] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-hover);
    transition: all 0.3s ease;
}

.stat-card:hover[b-73i8al9my5] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--color-border-hover);
    border-color: var(--color-border-active);
}

.stat-card .mud-card-content[b-73i8al9my5] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem !important;
}

.stat-icon[b-73i8al9my5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-active);
}

.stat-icon .mud-icon-root[b-73i8al9my5] {
    color: var(--color-primary);
}

.stat-content[b-73i8al9my5] {
    flex: 1;
}

.stat-label[b-73i8al9my5] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value[b-73i8al9my5] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

/* Stat Card Variants */
.stat-card-info .stat-icon[b-73i8al9my5] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.stat-card-info .stat-icon .mud-icon-root[b-73i8al9my5] {
    color: var(--color-info);
}

.stat-card-info .stat-value[b-73i8al9my5] {
    color: var(--color-info);
}

.stat-card-warning .stat-icon[b-73i8al9my5] {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.stat-card-warning .stat-icon .mud-icon-root[b-73i8al9my5] {
    color: var(--color-warning);
}

.stat-card-warning .stat-value[b-73i8al9my5] {
    color: var(--color-warning);
}

.stat-card-success .stat-icon[b-73i8al9my5] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.stat-card-success .stat-icon .mud-icon-root[b-73i8al9my5] {
    color: var(--color-success);
}

.stat-card-success .stat-value[b-73i8al9my5] {
    color: var(--color-success);
}

.stat-card-primary .stat-icon[b-73i8al9my5] {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

.stat-card-primary .stat-icon .mud-icon-root[b-73i8al9my5] {
    color: var(--color-monk);
}

.stat-card-primary .stat-value[b-73i8al9my5] {
    color: var(--color-monk);
}

/* Table Card */
.card-header-title[b-73i8al9my5] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    display: flex;
    align-items: center;
}

.search-field[b-73i8al9my5] {
    min-width: 300px;
}

.search-field .mud-input-root[b-73i8al9my5] {
    background: rgba(0, 0, 0, 0.3);
}

/* Loading State */
.loading-container[b-73i8al9my5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Empty State */
.empty-state[b-73i8al9my5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.5);
}

.empty-state .mud-icon-root[b-73i8al9my5] {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.3);
}

/* Users Table */
.users-table[b-73i8al9my5] {
    background: transparent;
}

.users-table .mud-table-head .mud-table-cell[b-73i8al9my5] {
    background: rgba(255, 215, 0, 0.05);
    border-bottom: 2px solid var(--color-border-active);
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

.users-table .mud-table-row:hover[b-73i8al9my5] {
    background: rgba(255, 215, 0, 0.05);
}

.users-table .mud-table-cell[b-73i8al9my5] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* User Cell */
.user-cell[b-73i8al9my5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-email[b-73i8al9my5] {
    font-weight: 500;
    color: #fff;
    font-size: 0.95rem;
}

.user-id[b-73i8al9my5] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Courier New', monospace;
}

/* Status Badges */
.status-badges[b-73i8al9my5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Date Cell */
.date-cell[b-73i8al9my5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.date-cell > div:first-child[b-73i8al9my5] {
    color: #fff;
    font-size: 0.9rem;
}

.date-relative[b-73i8al9my5] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

/* Dialog Styles */
.dialog-title[b-73i8al9my5] {
    font-family: 'Cinzel', serif;
    color: var(--color-primary);
    display: flex;
    align-items: center;
}

.edit-dialog-content[b-73i8al9my5] {
    padding-top: 1rem;
}

.role-option[b-73i8al9my5] {
    display: flex;
    align-items: center;
}

/* Responsive Design */
@media (max-width: 960px) {
    .admin-users-page[b-73i8al9my5] {
        padding: 1rem;
    }

    .page-header[b-73i8al9my5] {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-title[b-73i8al9my5] {
        font-size: 2rem;
    }

    .header-actions[b-73i8al9my5] {
        width: 100%;
    }

    .search-field[b-73i8al9my5] {
        min-width: auto;
        width: 100%;
    }

    .stat-card .mud-card-content[b-73i8al9my5] {
        padding: 1rem !important;
    }

    .stat-icon[b-73i8al9my5] {
        width: 50px;
        height: 50px;
    }

    .stat-value[b-73i8al9my5] {
        font-size: 1.5rem;
    }
}

@media (max-width: 600px) {
    .page-title[b-73i8al9my5] {
        font-size: 1.5rem;
    }

    .stat-card .mud-card-content[b-73i8al9my5] {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .stat-content[b-73i8al9my5] {
        width: 100%;
    }
}
/* /Components/Pages/Auth/ForgotPassword.razor.rz.scp.css */
/* Shared authentication page styles - Forgot Password & Reset Password */

[b-y47c9xc3s4] .login-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

[b-y47c9xc3s4] .login-paper {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 
                0 0 40px rgba(255, 215, 0, 0.1);
    padding: 3rem 2.5rem;
    max-width: 480px;
    width: 100%;
    margin: auto;
}

[b-y47c9xc3s4] .login-title {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px var(--color-border-hover);
}

[b-y47c9xc3s4] .login-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 2rem;
}

[b-y47c9xc3s4] .login-form-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

[b-y47c9xc3s4] .mud-text-field {
    --text-field-background: rgba(0, 0, 0, 0.3);
}

[b-y47c9xc3s4] .mud-text-field .mud-input {
    color: var(--color-text-primary);
}

[b-y47c9xc3s4] .mud-text-field .mud-input-slot {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

[b-y47c9xc3s4] .mud-text-field .mud-input-underline {
    display: none;
}

[b-y47c9xc3s4] .mud-text-field .mud-input-outlined {
    border: 1px solid var(--color-border-hover);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[b-y47c9xc3s4] .mud-text-field .mud-input-outlined:hover {
    border-color: var(--color-border-active);
}

[b-y47c9xc3s4] .mud-text-field .mud-input-outlined:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--color-border-hover);
}

[b-y47c9xc3s4] .mud-text-field-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-y47c9xc3s4] .mud-text-field-outlined .mud-notched-outline {
    border: 1px solid var(--color-border-hover);
}

[b-y47c9xc3s4] .mud-text-field-outlined .mud-notched-outline:hover {
    border-color: var(--color-border-active);
}

[b-y47c9xc3s4] .login-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-gray-900);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-border-active);
    margin-top: 1.5rem;
}

[b-y47c9xc3s4] .login-button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5);
}

[b-y47c9xc3s4] .login-button:active:not(:disabled) {
    transform: translateY(0);
}

[b-y47c9xc3s4] .login-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

[b-y47c9xc3s4] .mud-progress-circular {
    color: var(--color-gray-900) !important;
}

[b-y47c9xc3s4] .login-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: var(--color-danger-lighter);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

[b-y47c9xc3s4] .login-divider {
    border-color: var(--color-border-base);
    margin: 1.5rem 0;
}

[b-y47c9xc3s4] .login-footer {
    text-align: center;
    margin-top: 1.5rem;
}

[b-y47c9xc3s4] .login-footer-text {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

[b-y47c9xc3s4] .login-footer-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

[b-y47c9xc3s4] .login-footer-link:hover {
    color: var(--color-primary-light);
    text-decoration: underline;
}

/* Alert styles */
[b-y47c9xc3s4] .mud-alert {
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

[b-y47c9xc3s4] .mud-alert-filled-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--color-success-lighter);
}

[b-y47c9xc3s4] .mud-alert-filled-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-danger-lighter);
}

/* Password requirements box */
[b-y47c9xc3s4] .password-requirements {
    background: rgba(255, 215, 0, 0.1);
    border-left: 3px solid var(--color-primary);
    padding: 0.75rem;
    margin: 1rem 0;
    border-radius: 4px;
}

[b-y47c9xc3s4] .password-requirements strong {
    color: var(--color-primary);
}

/* Outlined button style */
[b-y47c9xc3s4] .mud-button-outlined {
    border-color: var(--color-border-active);
    color: var(--color-primary);
    transition: all 0.3s ease;
}

[b-y47c9xc3s4] .mud-button-outlined:hover {
    border-color: var(--color-primary);
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
[b-be9mscd9b5] .login-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

[b-be9mscd9b5] .login-paper {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 
                0 0 40px rgba(255, 215, 0, 0.1);
    padding: 3rem 2.5rem;
    max-width: 420px;
    width: 100%;
    margin: auto;
}

[b-be9mscd9b5] .login-title {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px var(--color-border-hover);
}

[b-be9mscd9b5] .login-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 2rem;
}

[b-be9mscd9b5] .login-form-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

[b-be9mscd9b5] .mud-text-field {
    --text-field-background: rgba(0, 0, 0, 0.3);
}

[b-be9mscd9b5] .mud-text-field .mud-input {
    color: var(--color-text-primary);
}

[b-be9mscd9b5] .mud-text-field .mud-input-slot {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

[b-be9mscd9b5] .mud-text-field .mud-input-underline {
    display: none;
}

[b-be9mscd9b5] .mud-text-field .mud-input-outlined {
    border: 1px solid var(--color-border-hover);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[b-be9mscd9b5] .mud-text-field .mud-input-outlined:hover {
    border-color: var(--color-border-active);
}

[b-be9mscd9b5] .mud-text-field .mud-input-outlined:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--color-border-hover);
}

[b-be9mscd9b5] .mud-text-field-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-be9mscd9b5] .mud-text-field-outlined .mud-notched-outline {
    border: 1px solid var(--color-border-hover);
}

[b-be9mscd9b5] .mud-text-field-outlined .mud-notched-outline:hover {
    border-color: var(--color-border-active);
}

[b-be9mscd9b5] .mud-text-field-outlined .mud-notched-outline-trailing,
[b-be9mscd9b5] .mud-text-field-outlined .mud-notched-outline-leading {
    border-top-color: var(--color-border-hover);
}

[b-be9mscd9b5] .login-remember-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

[b-be9mscd9b5] .mud-checkbox {
    margin: 0;
}

[b-be9mscd9b5] .mud-checkbox-root {
    color: var(--color-primary);
}

[b-be9mscd9b5] .remember-label {
    color: var(--color-text-light);
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

[b-be9mscd9b5] .remember-label:hover {
    color: var(--color-primary);
}

[b-be9mscd9b5] .forgot-password-link {
    transition: all 0.3s ease;
}

[b-be9mscd9b5] .forgot-password-link:hover {
    color: var(--color-primary-light) !important;
    text-decoration: underline !important;
}

[b-be9mscd9b5] .login-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-gray-900);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-border-active);
    margin-bottom: 1.5rem;
}

[b-be9mscd9b5] .login-button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5);
}

[b-be9mscd9b5] .login-button:active:not(:disabled) {
    transform: translateY(0);
}

[b-be9mscd9b5] .login-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

[b-be9mscd9b5] .mud-progress-circular {
    color: var(--color-gray-900) !important;
}

[b-be9mscd9b5] .login-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: var(--color-danger-lighter);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

[b-be9mscd9b5] .login-divider {
    border-color: var(--color-border-base);
    margin: 1.5rem 0;
}

[b-be9mscd9b5] .login-footer {
    text-align: center;
}

[b-be9mscd9b5] .login-footer-text {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

[b-be9mscd9b5] .login-footer-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

[b-be9mscd9b5] .login-footer-link:hover {
    color: var(--color-primary-light);
    text-shadow: 0 0 10px var(--color-border-active);
}

[b-be9mscd9b5] .mud-form {
    width: 100%;
}

/* Responsive */
@@media (max-width: 599px) {
    [b-be9mscd9b5] .login-paper {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    [b-be9mscd9b5] .login-title {
        font-size: 1.5rem;
    }

    [b-be9mscd9b5] .login-form-group {
        gap: 1rem;
        margin-bottom: 1rem;
    }
}

/* Animations */
@@keyframes fadeIn {
    from[b-be9mscd9b5] {
        opacity: 0;
        transform: translateY(20px);
    }
    to[b-be9mscd9b5] {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-be9mscd9b5] .login-paper {
    animation: fadeIn 0.5s ease-out;
}

/* Accessibility */
@@media (prefers-reduced-motion: reduce) {
    [b-be9mscd9b5] .login-button {
        transition: none;
    }

    [b-be9mscd9b5] .login-paper {
        animation: none;
    }

    [b-be9mscd9b5] .login-footer-link {
        transition: none;
    }
}

/* MudBlazor overrides for consistency */
[b-be9mscd9b5] .mud-input-base-root input {
    font-family: inherit;
}

[b-be9mscd9b5] .mud-input-base-root input::placeholder {
    color: var(--color-text-tertiary);
    opacity: 0.8;
}

[b-be9mscd9b5] .mud-checkbox-root input {
    cursor: pointer;
}
/* /Components/Pages/Auth/ResetPassword.razor.rz.scp.css */
/* Shared authentication page styles - Reset Password */

[b-w25u27kobd] .login-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

[b-w25u27kobd] .login-paper {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 
                0 0 40px rgba(255, 215, 0, 0.1);
    padding: 3rem 2.5rem;
    max-width: 480px;
    width: 100%;
    margin: auto;
}

[b-w25u27kobd] .login-title {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px var(--color-border-hover);
}

[b-w25u27kobd] .login-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 2rem;
}

[b-w25u27kobd] .login-form-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

[b-w25u27kobd] .mud-text-field {
    --text-field-background: rgba(0, 0, 0, 0.3);
}

[b-w25u27kobd] .mud-text-field .mud-input {
    color: var(--color-text-primary);
}

[b-w25u27kobd] .mud-text-field .mud-input-slot {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

[b-w25u27kobd] .mud-text-field .mud-input-underline {
    display: none;
}

[b-w25u27kobd] .mud-text-field .mud-input-outlined {
    border: 1px solid var(--color-border-hover);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[b-w25u27kobd] .mud-text-field .mud-input-outlined:hover {
    border-color: var(--color-border-active);
}

[b-w25u27kobd] .mud-text-field .mud-input-outlined:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--color-border-hover);
}

[b-w25u27kobd] .mud-text-field-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-w25u27kobd] .mud-text-field-outlined .mud-notched-outline {
    border: 1px solid var(--color-border-hover);
}

[b-w25u27kobd] .mud-text-field-outlined .mud-notched-outline:hover {
    border-color: var(--color-border-active);
}

[b-w25u27kobd] .login-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-gray-900);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-border-active);
    margin-top: 1.5rem;
}

[b-w25u27kobd] .login-button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5);
}

[b-w25u27kobd] .login-button:active:not(:disabled) {
    transform: translateY(0);
}

[b-w25u27kobd] .login-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

[b-w25u27kobd] .mud-progress-circular {
    color: var(--color-gray-900) !important;
}

[b-w25u27kobd] .login-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: var(--color-danger-lighter);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

/* Alert styles */
[b-w25u27kobd] .mud-alert {
    border-radius: 8px;
    margin-bottom: 1.5rem;
    padding: 1rem;
}

[b-w25u27kobd] .mud-alert-filled-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--color-success-lighter);
}

[b-w25u27kobd] .mud-alert-filled-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-danger-lighter);
}

[b-w25u27kobd] .mud-alert .mud-alert-icon {
    color: inherit;
}

/* Password requirements box */
.password-requirements[b-w25u27kobd] {
    background: rgba(255, 215, 0, 0.1);
    border-left: 3px solid var(--color-primary);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.password-requirements strong[b-w25u27kobd] {
    color: var(--color-primary);
}

/* Outlined button style */
[b-w25u27kobd] .mud-button-outlined {
    border-color: var(--color-border-active);
    color: var(--color-primary);
    transition: all 0.3s ease;
}

[b-w25u27kobd] .mud-button-outlined:hover {
    border-color: var(--color-primary);
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
}
/* /Components/Pages/Auth/Signup.razor.rz.scp.css */
/* Signup Page Styles - Matches Login.razor.css with additional features */

[b-jiepl7sjeg] .signup-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

[b-jiepl7sjeg] .signup-paper {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 
                0 0 40px rgba(255, 215, 0, 0.1);
    padding: 3rem 2.5rem;
    max-width: 420px;
    width: 100%;
    margin: auto;
}

[b-jiepl7sjeg] .signup-title {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px var(--color-border-hover);
}

[b-jiepl7sjeg] .signup-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 2rem;
}

[b-jiepl7sjeg] .signup-form-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

/* Text Field Styling */
[b-jiepl7sjeg] .mud-text-field {
    --text-field-background: rgba(0, 0, 0, 0.3);
}

[b-jiepl7sjeg] .mud-text-field .mud-input {
    color: var(--color-text-primary);
}

[b-jiepl7sjeg] .mud-text-field .mud-input-slot {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

[b-jiepl7sjeg] .mud-text-field .mud-input-underline {
    display: none;
}

[b-jiepl7sjeg] .mud-text-field .mud-input-outlined {
    border: 1px solid var(--color-border-hover);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[b-jiepl7sjeg] .mud-text-field .mud-input-outlined:hover {
    border-color: var(--color-border-active);
}

[b-jiepl7sjeg] .mud-text-field .mud-input-outlined:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--color-border-hover);
}

[b-jiepl7sjeg] .mud-text-field-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-jiepl7sjeg] .mud-text-field-outlined .mud-notched-outline {
    border: 1px solid var(--color-border-hover);
}

[b-jiepl7sjeg] .mud-text-field-outlined .mud-notched-outline:hover {
    border-color: var(--color-border-active);
}

[b-jiepl7sjeg] .mud-text-field-outlined .mud-notched-outline-trailing,
[b-jiepl7sjeg] .mud-text-field-outlined .mud-notched-outline-leading {
    border-top-color: var(--color-border-hover);
}

/* Password Requirements */
[b-jiepl7sjeg] .password-requirements {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

[b-jiepl7sjeg] .requirements-icon {
    color: var(--color-info-light);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

[b-jiepl7sjeg] .requirement-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    transition: color 0.3s ease;
}

[b-jiepl7sjeg] .requirement-item.valid {
    color: var(--color-success-light);
}

[b-jiepl7sjeg] .requirement-item .mud-icon-root {
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
}

[b-jiepl7sjeg] .requirement-item.valid .mud-icon-root {
    color: var(--color-success-light);
}

/* Buttons */
[b-jiepl7sjeg] .signup-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-gray-900);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-border-active);
    margin-bottom: 1.5rem;
}

[b-jiepl7sjeg] .signup-button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5);
}

[b-jiepl7sjeg] .signup-button:active:not(:disabled) {
    transform: translateY(0);
}

[b-jiepl7sjeg] .signup-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

[b-jiepl7sjeg] .login-link-button {
    border: 1px solid var(--color-border-active);
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

[b-jiepl7sjeg] .login-link-button:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

/* Error Message */
[b-jiepl7sjeg] .signup-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: var(--color-danger-lighter);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

/* Divider */
[b-jiepl7sjeg] .signup-divider {
    text-align: center;
    position: relative;
    margin: 1.5rem 0;
}

[b-jiepl7sjeg] .signup-divider span {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    padding: 0 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    position: relative;
    z-index: 1;
}

[b-jiepl7sjeg] .signup-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border-base);
    z-index: 0;
}

/* Email Verification Notice */
[b-jiepl7sjeg] .email-verification-notice {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border: 2px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    animation: slideUpFade-b-jiepl7sjeg 0.5s ease-out;
}

[b-jiepl7sjeg] .verification-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

[b-jiepl7sjeg] .verification-icon .mud-icon-root {
    font-size: 4rem;
    color: var(--color-success-light);
    filter: drop-shadow(0 0 15px rgba(74, 222, 128, 0.4));
}

[b-jiepl7sjeg] .verification-title {
    font-family: 'Cinzel', serif;
    color: var(--color-success-light);
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 10px rgba(74, 222, 128, 0.2);
}

[b-jiepl7sjeg] .verification-message {
    color: var(--color-text-lighter);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

[b-jiepl7sjeg] .verification-message strong {
    color: var(--color-primary);
    font-weight: 600;
}

[b-jiepl7sjeg] .verification-instructions {
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

[b-jiepl7sjeg] .verification-note {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

[b-jiepl7sjeg] .verification-note .mud-icon-root {
    color: var(--color-info-light);
    font-size: 1rem;
    flex-shrink: 0;
}

[b-jiepl7sjeg] .verification-note span {
    color: var(--color-text-light);
    font-size: 0.8rem;
    text-align: left;
}

/* Progress Circular */
[b-jiepl7sjeg] .mud-progress-circular {
    color: var(--color-gray-900) !important;
}

/* Responsive */
@media (max-width: 599px) {
    [b-jiepl7sjeg] .signup-paper {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    [b-jiepl7sjeg] .signup-title {
        font-size: 1.5rem;
    }

    [b-jiepl7sjeg] .signup-form-group {
        gap: 1rem;
        margin-bottom: 1rem;
    }

    [b-jiepl7sjeg] .email-verification-notice {
        padding: 1.5rem;
    }

    [b-jiepl7sjeg] .verification-icon .mud-icon-root {
        font-size: 3rem;
    }
}

/* Animations */
@keyframes fadeIn-b-jiepl7sjeg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUpFade-b-jiepl7sjeg {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

[b-jiepl7sjeg] .signup-paper {
    animation: fadeIn-b-jiepl7sjeg 0.5s ease-out;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    [b-jiepl7sjeg] .signup-button,
    [b-jiepl7sjeg] .login-link-button {
        transition: none;
    }

    [b-jiepl7sjeg] .signup-paper,
    [b-jiepl7sjeg] .email-verification-notice {
        animation: none;
    }
}
/* /Components/Pages/Characters/Characters.razor.rz.scp.css */
/* Characters Page Styles - Updated January 2025 */

/* ===== Page Header ===== */
.page-header[b-zy3wbuwm0q] {
    text-align: center;
    margin-bottom: 2rem;
}

.page-title[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.page-subtitle[b-zy3wbuwm0q] {
    color: var(--color-text-tertiary);
    font-size: 1rem;
}

/* ===== Character Slots Banner ===== */
.character-slots-banner[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.slots-info[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    color: var(--color-text-light);
    font-size: 0.95rem;
}

.slots-text strong[b-zy3wbuwm0q] {
    color: var(--color-primary);
}

/* ===== Character Limit Notice ===== */
.character-limit-notice[b-zy3wbuwm0q] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid rgba(245, 158, 11, 0.3);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

    .character-limit-notice strong[b-zy3wbuwm0q] {
        color: var(--color-primary);
    }

/* ===== Animations ===== */
@keyframes fadeIn-b-zy3wbuwm0q {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-zy3wbuwm0q {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromRight-b-zy3wbuwm0q {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulseGlow-b-zy3wbuwm0q {
    0%, 100% {
        box-shadow: 0 0 20px var(--color-border-active);
    }

    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
    }
}

@keyframes diceRoll-b-zy3wbuwm0q {
    0% {
        transform: rotateY(0deg) scale(0.8);
        opacity: 0.5;
    }

    25% {
        transform: rotateY(90deg) scale(1.1);
    }

    50% {
        transform: rotateY(180deg) scale(0.9);
    }

    75% {
        transform: rotateY(270deg) scale(1.05);
    }

    100% {
        transform: rotateY(360deg) scale(1);
        opacity: 1;
    }
}

@keyframes statReveal-b-zy3wbuwm0q {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes shimmer-b-zy3wbuwm0q {
    to {
        background-position: 200% center;
    }
}

@keyframes borderGlow-b-zy3wbuwm0q {
    0%, 100% {
        border-color: var(--color-border-active);
    }

    50% {
        border-color: rgba(255, 215, 0, 0.6);
    }
}

.fade-in[b-zy3wbuwm0q] {
    animation: fadeIn-b-zy3wbuwm0q 0.5s ease-out;
}

.step-slide-in[b-zy3wbuwm0q] {
    animation: slideUp-b-zy3wbuwm0q 0.4s ease-out;
}

.pulse-glow[b-zy3wbuwm0q] {
    animation: pulseGlow-b-zy3wbuwm0q 2s ease-in-out infinite;
}

.dice-roll-animation[b-zy3wbuwm0q] {
    animation: diceRoll-b-zy3wbuwm0q 0.6s ease-out;
}

.stat-reveal[b-zy3wbuwm0q] {
    animation: statReveal-b-zy3wbuwm0q 0.5s ease-out backwards;
}

/* ===== Creation Container ===== */
.creation-container[b-zy3wbuwm0q] {
    max-width: 1200px;
    margin: 0 auto;
}

/* ===== Progress Indicator ===== */
.creation-progress[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.progress-step[b-zy3wbuwm0q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.step-icon[b-zy3wbuwm0q] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: var(--color-text-tertiary);
    transition: all 0.3s ease;
}

.progress-step.active .step-icon[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-color: var(--color-primary);
    color: var(--color-gray-900);
    box-shadow: 0 0 20px var(--color-border-active);
}

.progress-step.completed .step-icon[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    border-color: var(--color-success);
    color: white;
}

.step-label[b-zy3wbuwm0q] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    transition: color 0.3s ease;
}

.progress-step.active .step-label[b-zy3wbuwm0q],
.progress-step.completed .step-label[b-zy3wbuwm0q] {
    color: var(--color-primary);
}

.progress-line[b-zy3wbuwm0q] {
    width: 80px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 0.5rem;
    margin-bottom: 1.5rem;
    transition: background 0.3s ease;
}

    .progress-line.active[b-zy3wbuwm0q] {
        background: linear-gradient(90deg, var(--color-success), var(--color-primary));
    }

/* ===== Creation Step ===== */
.creation-step[b-zy3wbuwm0q] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 1rem;
}

.step-header[b-zy3wbuwm0q] {
    text-align: center;
    margin-bottom: 2rem;
}

.step-title[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.step-subtitle[b-zy3wbuwm0q] {
    color: var(--color-text-secondary);
    font-size: 1rem;
}

/* ===== Form Styles ===== */
.form-grid[b-zy3wbuwm0q] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 600px;
    margin: 0 auto;
}

.form-row[b-zy3wbuwm0q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-section[b-zy3wbuwm0q] {
    width: 100%;
}

[b-zy3wbuwm0q] .fantasy-input .mud-input-outlined .mud-input-root {
    background: rgba(15, 23, 42, 0.8);
}

[b-zy3wbuwm0q] .fantasy-input .mud-input-label {
    color: var(--color-text-secondary);
}

.race-info-card[b-zy3wbuwm0q] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    color: var(--color-info-lighter);
    font-size: 0.9rem;
}

.race-info-icon[b-zy3wbuwm0q] {
    color: var(--color-info-light);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===== Class Selection Grid ===== */
.class-grid[b-zy3wbuwm0q] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
    .class-grid[b-zy3wbuwm0q] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .class-grid[b-zy3wbuwm0q] {
        grid-template-columns: 1fr;
    }

    .form-row[b-zy3wbuwm0q] {
        grid-template-columns: 1fr;
    }
}

/* ===== Class Card ===== */
.class-card[b-zy3wbuwm0q] {
    position: relative;
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

    .class-card:hover[b-zy3wbuwm0q] {
        transform: translateY(-4px);
        border-color: var(--color-border-active);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    }

    .class-card.selected[b-zy3wbuwm0q] {
        border-color: var(--color-primary);
        animation: borderGlow-b-zy3wbuwm0q 2s ease-in-out infinite;
    }

.class-card-glow[b-zy3wbuwm0q] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.class-card:hover .class-card-glow[b-zy3wbuwm0q],
.class-card.selected .class-card-glow[b-zy3wbuwm0q] {
    opacity: 1;
}

.class-card-content[b-zy3wbuwm0q] {
    position: relative;
    z-index: 1;
}

/* Class-specific colors */
.class-card.warrior .class-card-glow[b-zy3wbuwm0q] {
    background: linear-gradient(90deg, transparent, var(--color-danger), transparent);
}

.class-card.wizard .class-card-glow[b-zy3wbuwm0q] {
    background: linear-gradient(90deg, transparent, var(--color-info), transparent);
}

.class-card.ranger .class-card-glow[b-zy3wbuwm0q] {
    background: linear-gradient(90deg, transparent, var(--color-success), transparent);
}

.class-card.rogue .class-card-glow[b-zy3wbuwm0q] {
    background: linear-gradient(90deg, transparent, var(--color-rogue), transparent);
}

.class-card.paladin .class-card-glow[b-zy3wbuwm0q] {
    background: linear-gradient(90deg, transparent, var(--color-warning), transparent);
}

.class-card.bard .class-card-glow[b-zy3wbuwm0q] {
    background: linear-gradient(90deg, transparent, var(--color-bard), transparent);
}

.class-card.cleric .class-card-glow[b-zy3wbuwm0q] {
    background: linear-gradient(90deg, transparent, var(--color-cleric), transparent);
}

.class-card.monk .class-card-glow[b-zy3wbuwm0q] {
    background: linear-gradient(90deg, transparent, var(--color-monk), transparent);
}

.class-card.barbarian .class-card-glow[b-zy3wbuwm0q] {
    background: linear-gradient(90deg, transparent, var(--color-barbarian), transparent);
}

.class-card.warrior .class-icon-container[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.05));
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--color-danger);
}

.class-card.wizard .class-icon-container[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--color-info);
}

.class-card.ranger .class-icon-container[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05));
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--color-success);
}

.class-card.rogue .class-icon-container[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.05));
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--color-rogue);
}

.class-card.paladin .class-icon-container[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--color-warning);
}

.class-card.bard .class-icon-container[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.05));
    border-color: rgba(236, 72, 153, 0.3);
    color: var(--color-bard);
}

.class-card.cleric .class-icon-container[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--color-cleric);
}

.class-card.monk .class-icon-container[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05));
    border-color: rgba(139, 92, 246, 0.3);
    color: var(--color-monk);
}

.class-card.barbarian .class-icon-container[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(220, 38, 38, 0.05));
    border-color: rgba(220, 38, 38, 0.3);
    color: var(--color-barbarian);
}

.class-card.warrior.selected[b-zy3wbuwm0q] {
    border-color: var(--color-danger);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.3);
}

.class-card.wizard.selected[b-zy3wbuwm0q] {
    border-color: var(--color-info);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}

.class-card.ranger.selected[b-zy3wbuwm0q] {
    border-color: var(--color-success);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.3);
}

.class-card.rogue.selected[b-zy3wbuwm0q] {
    border-color: var(--color-rogue);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
}

.class-card.paladin.selected[b-zy3wbuwm0q] {
    border-color: var(--color-warning);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
}

.class-card.bard.selected[b-zy3wbuwm0q] {
    border-color: var(--color-bard);
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.3);
}

.class-card.cleric.selected[b-zy3wbuwm0q] {
    border-color: var(--color-cleric);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
}

.class-card.monk.selected[b-zy3wbuwm0q] {
    border-color: var(--color-monk);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
}

.class-card.barbarian.selected[b-zy3wbuwm0q] {
    border-color: var(--color-barbarian);
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.3);
}

.class-icon-container[b-zy3wbuwm0q] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    transition: all 0.3s ease;
}

.class-card:hover .class-icon-container[b-zy3wbuwm0q] {
    transform: scale(1.1);
}

.class-name[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: 0.25rem;
}

.class-role[b-zy3wbuwm0q] {
    font-size: 0.75rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 0.75rem;
}

.class-description[b-zy3wbuwm0q] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.4;
    margin-bottom: 1rem;
    min-height: 40px;
}

.class-features[b-zy3wbuwm0q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.feature-row[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
}

.feature-icon-cell[b-zy3wbuwm0q] {
    width: 50%;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
    padding-right: 5px;
}

.feature-text-cell[b-zy3wbuwm0q] {
    text-align: left;
}

.class-armor-types[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.armor-label[b-zy3wbuwm0q] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    font-weight: 600;
}

.armor-badge[b-zy3wbuwm0q] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

    .armor-badge.light[b-zy3wbuwm0q] {
        background: rgba(34, 197, 94, 0.2);
        color: var(--color-success-lighter);
        border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .armor-badge.medium[b-zy3wbuwm0q] {
        background: rgba(59, 130, 246, 0.2);
        color: var(--color-info-lighter);
        border: 1px solid rgba(59, 130, 246, 0.3);
    }

    .armor-badge.heavy[b-zy3wbuwm0q] {
        background: rgba(239, 68, 68, 0.2);
        color: var(--color-danger-lighter);
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

/* Premium Class Badge */
.premium-class-badge[b-zy3wbuwm0q] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-gray-900);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    z-index: 2;
    box-shadow: 0 2px 8px var(--color-border-active);
}

/* Locked Overlay */
.class-card.premium-locked[b-zy3wbuwm0q] {
    opacity: 0.6;
    cursor: not-allowed;
}

.locked-overlay[b-zy3wbuwm0q] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    z-index: 10;
}

.lock-icon[b-zy3wbuwm0q] {
    color: var(--color-warning);
    margin-bottom: 0.5rem;
}

.lock-text[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Selected Indicator */
.selected-indicator[b-zy3wbuwm0q] {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    color: var(--color-success);
    z-index: 2;
    animation: pulseGlow-b-zy3wbuwm0q 1.5s ease-in-out infinite;
}

/* ===== Step Actions ===== */
.step-actions[b-zy3wbuwm0q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.btn-cancel[b-zy3wbuwm0q] {
    color: var(--color-text-secondary) !important;
}

    .btn-cancel:hover[b-zy3wbuwm0q] {
        color: var(--color-text-primary) !important;
    }

.btn-back[b-zy3wbuwm0q],
.btn-next[b-zy3wbuwm0q],
.btn-reroll[b-zy3wbuwm0q],
.btn-create[b-zy3wbuwm0q],
.btn-roll[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-next[b-zy3wbuwm0q],
.btn-create[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    color: var(--color-gray-900) !important;
}

    .btn-next:hover[b-zy3wbuwm0q],
    .btn-create:hover[b-zy3wbuwm0q] {
        box-shadow: 0 8px 25px var(--color-border-active);
        transform: translateY(-2px);
    }

.btn-roll[b-zy3wbuwm0q] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-gray-900) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .btn-roll:hover[b-zy3wbuwm0q] {
        box-shadow: 0 8px 25px var(--color-border-active);
        transform: translateY(-2px);
    }

/* ===== Summary Card ===== */
.summary-card[b-zy3wbuwm0q] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.summary-header[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.1), transparent);
}

.summary-avatar[b-zy3wbuwm0q] {
    flex-shrink: 0;
}

.summary-info[b-zy3wbuwm0q] {
    flex: 1;
}

.summary-name[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 0.25rem 0;
}

.summary-details[b-zy3wbuwm0q] {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.summary-backstory[b-zy3wbuwm0q] {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
    font-size: 0.9rem;
    font-style: italic;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.quote-icon[b-zy3wbuwm0q] {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===== Roll Prompt ===== */
.roll-prompt[b-zy3wbuwm0q] {
    text-align: center;
    padding: 2rem;
}

.roll-prompt-icon[b-zy3wbuwm0q] {
    color: var(--color-primary);
    font-size: 4rem;
    margin-bottom: 1rem;
}

.roll-prompt h3[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.roll-prompt p[b-zy3wbuwm0q] {
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.roll-info[b-zy3wbuwm0q] {
    font-size: 0.9rem;
    color: var(--color-text-tertiary);
    margin-bottom: 1.5rem !important;
}

/* ===== Stats Rolled ===== */
.stats-rolled[b-zy3wbuwm0q] {
    transition: opacity 0.3s ease;
}

    .stats-rolled.rolling[b-zy3wbuwm0q] {
        opacity: 0.7;
    }

.stats-header[b-zy3wbuwm0q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .stats-header h3[b-zy3wbuwm0q] {
        font-family: 'Cinzel', serif;
        font-size: 1.25rem;
        color: var(--color-primary);
        margin: 0;
    }

.stats-grid-rolled[b-zy3wbuwm0q] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .stats-grid-rolled[b-zy3wbuwm0q] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .stats-grid-rolled[b-zy3wbuwm0q] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-roll-card[b-zy3wbuwm0q] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid;
    border-color: color-mix(in srgb, var(--stat-color) 30%, transparent);
    border-radius: 10px;
    padding: 1rem 0.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .stat-roll-card[b-zy3wbuwm0q]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--stat-color);
        opacity: 0.5;
    }

.stat-roll-header[b-zy3wbuwm0q] {
    margin-bottom: 0.5rem;
}

.stat-abbrev[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    font-weight: 600;
    display: block;
}

.stat-full-name[b-zy3wbuwm0q] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    display: block;
}

.stat-roll-value[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--stat-color);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-roll-modifier[b-zy3wbuwm0q] {
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}

.stat-roll-dice[b-zy3wbuwm0q] {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.die[b-zy3wbuwm0q] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

    .die.kept[b-zy3wbuwm0q] {
        background: rgba(34, 197, 94, 0.2);
        color: var(--color-success-lighter);
        border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .die.dropped[b-zy3wbuwm0q] {
        background: rgba(239, 68, 68, 0.1);
        color: var(--color-danger-light);
        border: 1px solid rgba(239, 68, 68, 0.2);
        opacity: 0.5;
        text-decoration: line-through;
    }

/* Primary and Spellcasting Indicators */
.stat-roll-card.primary[b-zy3wbuwm0q] {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--color-border-active);
}

.stat-roll-card.spellcasting[b-zy3wbuwm0q] {
    border-color: var(--color-info);
}

.primary-indicator[b-zy3wbuwm0q],
.spellcasting-indicator[b-zy3wbuwm0q] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--color-primary);
}

.spellcasting-indicator[b-zy3wbuwm0q] {
    color: var(--color-info);
}

.stat-note[b-zy3wbuwm0q] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
    font-weight: 600;
}

.primary-note[b-zy3wbuwm0q] {
    color: var(--color-primary);
}

.spellcasting-note[b-zy3wbuwm0q] {
    color: var(--color-info);
}

/* Primary Stat Info Banner */
.primary-stat-info[b-zy3wbuwm0q] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-active);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.info-icon[b-zy3wbuwm0q] {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.info-text[b-zy3wbuwm0q] {
    color: var(--color-warning-light);
    font-size: 0.85rem;
    line-height: 1.5;
}

.spellcasting-note[b-zy3wbuwm0q] {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-info-lighter);
}

/* Combat Preview */
.combat-preview[b-zy3wbuwm0q] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .combat-preview[b-zy3wbuwm0q] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.combat-stat-item[b-zy3wbuwm0q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.hp-icon[b-zy3wbuwm0q] {
    color: var(--color-danger);
}

.mana-icon[b-zy3wbuwm0q] {
    color: var(--color-info);
}

.ac-icon[b-zy3wbuwm0q] {
    color: var(--color-primary);
}

.total-icon[b-zy3wbuwm0q] {
    color: var(--color-success);
}

.combat-stat-label[b-zy3wbuwm0q] {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.combat-stat-value[b-zy3wbuwm0q] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

/* Low Stats Warning */
.low-stats-warning[b-zy3wbuwm0q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    color: var(--color-warning-bright);
    font-size: 0.85rem;
}

/* Empty State */
.empty-state-full[b-zy3wbuwm0q] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state-icon[b-zy3wbuwm0q] {
    font-size: 4rem;
    color: var(--color-border-active);
    margin-bottom: 1rem;
}

/* Class Helper Link */
.class-helper-link[b-zy3wbuwm0q] {
    text-align: right;
    margin-bottom: 1.5rem;
}
/* /Components/Pages/Combat/Combat.razor.rz.scp.css */
/* Combat Page - Pure CSS without MudBlazor interference */

.combat-empty-state[b-necssm1ckz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    min-height: 50vh;
    color: var(--color-text-secondary);
}

/* Combat Page Container */
.combat-page[b-necssm1ckz] {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-secondary);
    flex: 1;
    min-height: 0;
    height: 100%;
    /* Phase 9 — anchor for the cinematic round banner (absolute-positioned child). */
    position: relative;
}

/* Screen shake for big hits / crits */
.combat-page.screen-shake[b-necssm1ckz] {
    animation: screen-shake-b-necssm1ckz 0.45s ease-out;
}

@keyframes screen-shake-b-necssm1ckz {
    0%   { transform: translate(0, 0); }
    10%  { transform: translate(-6px, 3px); }
    20%  { transform: translate(5px, -4px); }
    30%  { transform: translate(-4px, 2px); }
    40%  { transform: translate(4px, -2px); }
    50%  { transform: translate(-3px, 3px); }
    60%  { transform: translate(3px, -1px); }
    70%  { transform: translate(-2px, 1px); }
    80%  { transform: translate(1px, -1px); }
    90%  { transform: translate(-1px, 0); }
    100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .combat-page.screen-shake[b-necssm1ckz] {
        animation: none;
    }
}

/* ===== BATTLE RESULT INLINE (Victory/Defeat in Middle Column) ===== */
.battle-result-inline[b-necssm1ckz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    padding: var(--space-md);
    overflow-y: auto;
    animation: fadeInScale-b-necssm1ckz 0.4s ease-out;
    border-radius: var(--radius-2xl);
    min-height: 0;
    max-height: calc(100vh - 200px);
}

@keyframes fadeInScale-b-necssm1ckz {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Victory Inline - Subtle Green Glow Background */
.battle-result-inline.victory[b-necssm1ckz] {
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--combat-good) 10%, transparent) 0%, transparent 70%);
    box-shadow:
        inset 0 0 30px color-mix(in srgb, var(--combat-good) 15%, transparent),
        0 0 20px color-mix(in srgb, var(--combat-good) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--combat-good) 30%, transparent);
    animation: fadeInScale-b-necssm1ckz 0.4s ease-out, inlineGlowGreen-b-necssm1ckz 2s ease-in-out infinite;
}

@keyframes inlineGlowGreen-b-necssm1ckz {
    0%, 100% {
        box-shadow:
            inset 0 0 30px color-mix(in srgb, var(--combat-good) 15%, transparent),
            0 0 20px color-mix(in srgb, var(--combat-good) 20%, transparent);
    }
    50% {
        box-shadow:
            inset 0 0 40px color-mix(in srgb, var(--combat-good) 20%, transparent),
            0 0 30px color-mix(in srgb, var(--combat-good) 30%, transparent);
    }
}

/* Defeat Inline - Subtle Red Glow Background */
.battle-result-inline.defeat[b-necssm1ckz] {
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--combat-bad) 10%, transparent) 0%, transparent 70%);
    box-shadow:
        inset 0 0 30px color-mix(in srgb, var(--combat-bad) 15%, transparent),
        0 0 20px color-mix(in srgb, var(--combat-bad) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--combat-bad) 30%, transparent);
    animation: fadeInScale-b-necssm1ckz 0.4s ease-out, inlineGlowRed-b-necssm1ckz 2s ease-in-out infinite;
}

@keyframes inlineGlowRed-b-necssm1ckz {
    0%, 100% {
        box-shadow:
            inset 0 0 30px color-mix(in srgb, var(--combat-bad) 15%, transparent),
            0 0 20px color-mix(in srgb, var(--combat-bad) 20%, transparent);
    }
    50% {
        box-shadow:
            inset 0 0 40px color-mix(in srgb, var(--combat-bad) 20%, transparent),
            0 0 30px color-mix(in srgb, var(--combat-bad) 30%, transparent);
    }
}

/* Scrollbar for inline panels */
.battle-result-inline[b-necssm1ckz]::-webkit-scrollbar {
    width: 8px;
}

.battle-result-inline[b-necssm1ckz]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
}

.battle-result-inline[b-necssm1ckz]::-webkit-scrollbar-thumb {
    background: var(--color-border-active);
    border-radius: var(--radius-sm);
}

.battle-result-inline[b-necssm1ckz]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.6);
}

/* ===== HEADER ===== */
.combat-header[b-necssm1ckz] {
    background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border-bottom: 1px solid var(--color-border-base);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown);
    flex-shrink: 0;
}

.combat-header-left[b-necssm1ckz] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-primary);
}

.combat-title[b-necssm1ckz] {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.combat-header-right[b-necssm1ckz] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.turn-badge[b-necssm1ckz] {
    background: rgba(0, 0, 0, 0.3);
    padding: var(--space-xs) var(--space-md);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.turn-indicator[b-necssm1ckz] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.1));
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 20px;
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-warning-light);
    text-transform: uppercase;
    white-space: nowrap;
}

.turn-indicator.active[b-necssm1ckz] {
    animation: turn-pulse-b-necssm1ckz 1.5s ease-in-out infinite;
}

@keyframes turn-pulse-b-necssm1ckz {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 193, 7, 0.8), 0 0 40px rgba(255, 193, 7, 0.3);
    }
}

/* ===== MAIN LAYOUT (DESKTOP DEFAULT) ===== */
.combat-layout[b-necssm1ckz] {
    display: grid;
    grid-template-columns: 280px minmax(400px, 500px) 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg);
    /* Account for: AppBar (64px) + Container padding (32px) + Footer (100px) + Combat header (60px) */
    height: calc(100vh - 256px);
    overflow: hidden;
    /* Isolate stacking context to prevent z-index conflicts with MudBlazor popovers */
    isolation: isolate;
}

.combat-sidebar[b-necssm1ckz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    overflow-y: auto;
}

.combat-monsters[b-necssm1ckz] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: var(--space-md);
    padding-right: var(--space-sm);
}

.combat-log-container[b-necssm1ckz] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scrollbars */
.combat-sidebar[b-necssm1ckz]::-webkit-scrollbar,
.combat-monsters[b-necssm1ckz]::-webkit-scrollbar {
    width: 6px;
}

.combat-sidebar[b-necssm1ckz]::-webkit-scrollbar-track,
.combat-monsters[b-necssm1ckz]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.combat-sidebar[b-necssm1ckz]::-webkit-scrollbar-thumb,
.combat-monsters[b-necssm1ckz]::-webkit-scrollbar-thumb {
    background: var(--color-border-active);
    border-radius: 3px;
}

.combat-sidebar[b-necssm1ckz]::-webkit-scrollbar-thumb:hover,
.combat-monsters[b-necssm1ckz]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.5);
}

/* Formation Picker */
.formation-picker-diamond[b-necssm1ckz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-2xl);
}

.formation-row[b-necssm1ckz] {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
    .combat-header[b-necssm1ckz] {
        padding: var(--space-sm);
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .combat-header-left[b-necssm1ckz],
    .combat-header-right[b-necssm1ckz] {
        flex: 1 1 100%;
        justify-content: center;
    }

    .combat-title[b-necssm1ckz] {
        font-size: 0.85rem;
    }

    .combat-layout[b-necssm1ckz] {
        gap: var(--space-lg);
        padding: var(--space-sm);
        height: calc(100vh - 240px);
    }

    .combat-sidebar[b-necssm1ckz] {
        gap: var(--space-sm);
    }

    .combat-monsters[b-necssm1ckz] {
        gap: var(--space-sm);
    }

    .combat-log-container[b-necssm1ckz] {
        max-height: 300px;
        min-height: 250px;
    }

    .formation-picker-diamond[b-necssm1ckz] {
        padding: var(--space-lg);
        gap: var(--space-md);
    }

    .formation-row[b-necssm1ckz] {
        gap: var(--space-sm);
    }
}


/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 926px) and (max-height: 428px) and (orientation: landscape) {
    .combat-layout[b-necssm1ckz] {
        grid-template-columns: 200px 1fr 1fr;
        grid-template-rows: 1fr;
        height: calc(100vh - 60px);
        padding: var(--space-sm);
        gap: var(--space-sm);
    }

    .combat-sidebar[b-necssm1ckz],
    .combat-monsters[b-necssm1ckz] {
        overflow-y: auto;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .turn-indicator.active[b-necssm1ckz] {
        animation: none;
    }
}

/* ===== CLASS FEATURES PANEL ===== */
.class-features-panel[b-necssm1ckz] {
    background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-hover);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.class-features-panel .panel-title[b-necssm1ckz] {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-md) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[b-necssm1ckz] .class-feature-btn {
    background: linear-gradient(135deg, var(--color-border-base), rgba(218, 165, 32, 0.1)) !important;
    border: 1px solid var(--color-border-active) !important;
    color: var(--color-primary) !important;
    transition: all var(--transition-slow) !important;
}

[b-necssm1ckz] .class-feature-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-border-hover), rgba(218, 165, 32, 0.15)) !important;
    border-color: rgba(255, 215, 0, 0.5) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

[b-necssm1ckz] .class-feature-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-necssm1ckz] .class-feature-btn .mud-chip {
    background: rgba(59, 130, 246, 0.2) !important;
    color: var(--color-info-lighter) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* Paladin-specific */
[b-necssm1ckz] .class-feature-btn.mud-button-filled.mud-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15)) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    color: var(--color-warning-light) !important;
}

/* Bard-specific */
[b-necssm1ckz] .class-feature-btn.mud-button-filled.mud-secondary {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(219, 39, 119, 0.15)) !important;
    border-color: rgba(236, 72, 153, 0.4) !important;
    color: var(--color-bard-light) !important;
}

/* Responsive adjustments */
@media (max-width: 1023px) {
    .class-features-panel[b-necssm1ckz] {
        margin-top: var(--space-lg);
    }
}

/* ===== STATUS EFFECTS OVERLAY ===== */
.player-card-wrapper[b-necssm1ckz] {
    position: relative;
    flex: 0 0 auto;
}

.status-effects-overlay[b-necssm1ckz] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 180px;
    z-index: var(--z-elevated);
    pointer-events: auto;
}

.status-effects-overlay.monster-effects[b-necssm1ckz] {
    top: 8px;
    right: 8px;
}

.status-effect-badge[b-necssm1ckz] {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-elevated-alt);
    border: 2px solid;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base);
    animation: statusEffectPulse-b-necssm1ckz 2s ease-in-out infinite;
}

.status-effect-badge:hover[b-necssm1ckz] {
    transform: scale(1.2);
    z-index: 20;
}

/* Per-category colors provided by se-* classes in design-system.css */

/* More effects indicator */
.status-effect-badge.se-more[b-necssm1ckz] {
    border-color: var(--color-text-secondary);
    background: rgba(148, 163, 184, 0.2);
}

.status-effect-badge.se-more[b-necssm1ckz]  .mud-icon-root {
    color: var(--color-text-light);
}

/* Duration badge */
.duration-badge[b-necssm1ckz] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    width: 16px;
    height: 16px;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Pulse animation for status effects */
@keyframes statusEffectPulse-b-necssm1ckz {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 0 20px currentColor;
    }
}

/* Responsive adjustments */
@media (max-width: 1023px) {
    .status-effects-overlay[b-necssm1ckz] {
        max-width: 140px;
    }

    .status-effect-badge[b-necssm1ckz] {
        width: 28px;
        height: 28px;
    }

    .duration-badge[b-necssm1ckz] {
        width: 14px;
        height: 14px;
        font-size: 0.6rem;
    }
}

@media (max-width: 767px) {
    .status-effects-overlay[b-necssm1ckz] {
        max-width: 120px;
        gap: 3px;
    }

    .status-effect-badge[b-necssm1ckz] {
        width: 24px;
        height: 24px;
    }

    .duration-badge[b-necssm1ckz] {
        width: 12px;
        height: 12px;
        font-size: 0.55rem;
    }
}
/* /Components/Pages/Combat/Layouts/CombatMapAnchoredLayout.razor.rz.scp.css */
/* Map-anchored layout, co-op additions (combat HUD rethink WP10, Concept A). The base Desktop / Wide grid
   ("topstrip log" / "battle log" / "dock log") lives in wwwroot/css/combat-responsive.css (.combat-layout) and
   combat-wide.css (.combat-layout-wide). A party battle adds a left column: the party frames beside the board, and
   under them, beside the dock, the local player's own vitals (F14: WP9b's CombatVitals, which the dock drops in a
   party battle). Both are grid items, never position: fixed over the board.
   The child components keep their global grid-area names (topstrip, battle, dock, log); these scoped rules only
   re-template the grid when the layout root carries .combat-layout--party. Scoped selectors outrank the global
   .combat-layout / .combat-layout-wide templates whatever the stylesheet order. */

main.combat-layout.combat-layout--party[b-y2xdzqt77v],
main.combat-layout-wide.combat-layout--party[b-y2xdzqt77v] {
    grid-template-columns: var(--party-col-width) minmax(0, 1fr) var(--log-col-width, 0px);
    grid-template-areas:
        "topstrip topstrip log"
        "party    battle   log"
        "vitals   dock     log";
}

/* Desktop tier (1280-1919): wide enough for CombatVitals in the vitals cell, narrow enough to leave
   the board most of the row. */
main.combat-layout.combat-layout--party[b-y2xdzqt77v] {
    --party-col-width: 280px;
}

/* Wide tier (1920+). */
main.combat-layout-wide.combat-layout--party[b-y2xdzqt77v] {
    --party-col-width: 300px;
}

/* The battle cell's height (WP12). Desktop / Wide only: the tablet's board cell is not a .combat-zone-col of this
   layout, so none of this reaches it.
   - Free height. When the board is width-bound (boardSizing.js) the cell has height to spare, and its
     justify-content: center used to park half of it as a blank band between the top strip and the waypoint
     breadcrumb. Now the breadcrumb hugs the top strip and the board centers in the height left under it (auto
     margins take the free space first; with none they resolve to 0).
   - Short height. boardSizing.js fits the TILTED board (42deg: the drawn board is 74% of its box, centered in it) to
     the height left for it (the cell's content box minus the breadcrumb) less a headroom for the back row's standees,
     which rise out of the plane (WP12b: the card, sized from the hex, plus the badge over it). On a short screen the
     box overflows its viewport, which centers it, so the clipped part is the box's empty tilt band; the viewport's top
     padding is that headroom (--board-headroom-px, from boardSizing.js: what the box's own band doesn't already
     cover), so the drawn plane sits under it and the back row's tokens stay in view. Its bottom padding goes (the zoom
     controls are absolutely placed), and the breadcrumb sheds its tall padding, so a two-row dock costs the board no
     visible height. Board coordinates are measured from the elements' rects (VFX, camera pan), so the box may sit
     anywhere in its viewport.
   - A fixed slot for the movement hint. The hint comes and goes (your turn only, hidden while an action is in flight);
     in the flow it changed the viewport's height, and the centered board jumped by half the hint each time. It now sits
     in a slot the cell always keeps at its bottom, so the board never moves when it toggles. Its buttons (Shadow Step,
     Swift Step) drop their vertical padding to fit the slot. */
.combat-zone-col[b-y2xdzqt77v] {
    --move-hint-h: 32px;
    position: relative;
    padding-bottom: var(--move-hint-h);
}

/* The rows sit a little closer than the columns (the global grids' gap is 10px / 12px): the vertical space goes to
   the board. */
main.combat-layout[b-y2xdzqt77v] {
    row-gap: 6px;
}

main.combat-layout-wide[b-y2xdzqt77v] {
    row-gap: 8px;
}

.combat-zone-col[b-y2xdzqt77v]  .board-zoom-viewport {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: var(--board-headroom-px, 20px);
    padding-bottom: 0;
}

.combat-zone-col[b-y2xdzqt77v]  .board-iso-container {
    flex-shrink: 0;
}

.combat-zone-col[b-y2xdzqt77v]  .zone-movement-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    min-height: var(--move-hint-h);
    max-height: var(--move-hint-h);
    flex-wrap: nowrap;
    overflow: hidden;
}

.combat-zone-col[b-y2xdzqt77v]  .zone-movement-hint .mud-button-root {
    padding-top: 0;
    padding-bottom: 0;
}

.combat-zone-col[b-y2xdzqt77v]  .combat-adventure-info {
    margin-bottom: 6px;
}

.combat-zone-col[b-y2xdzqt77v]  .adventure-waypoint-info {
    min-height: 0;
    padding: 6px 14px 7px;
}

.combat-party-col[b-y2xdzqt77v] {
    grid-area: party;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    background: color-mix(in srgb, var(--color-bg-base) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    border-radius: var(--radius-2xl);
}

/* The own-vitals cell: CombatVitals sheds its frame for the dock's, so the cell draws the party column's frame
   (and, while an ally action is aimed, makes the whole tile your own target). */
.combat-own-vitals[b-y2xdzqt77v] {
    grid-area: vitals;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 8px;
    background: color-mix(in srgb, var(--color-bg-base) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    border-radius: var(--radius-2xl);
}

.combat-own-vitals[b-y2xdzqt77v]  .combat-vitals {
    min-width: 0;
    max-width: none;
}

/* Ally aiming on yourself: the board's --aim-eco rule (the aimed action's turn slot), the frames' glow / dim. */
.combat-own-vitals.aim-mode[b-y2xdzqt77v] {
    --aim-eco: var(--color-eco-action);
}

.combat-own-vitals.aim-mode.aim-eco-bonus[b-y2xdzqt77v] {
    --aim-eco: var(--color-eco-bonus);
}

.combat-own-vitals.aim-valid[b-y2xdzqt77v] {
    outline: 2px solid var(--aim-eco);
    outline-offset: 2px;
}

.combat-own-vitals.aim-armed[b-y2xdzqt77v] {
    outline-width: 3px;
}

.combat-own-vitals.aim-invalid[b-y2xdzqt77v] {
    opacity: 0.55;
}

.own-vitals-aim-hit[b-y2xdzqt77v] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 6px;
    border: 0;
    border-radius: var(--radius-2xl);
    background: color-mix(in srgb, var(--aim-eco, var(--color-eco-action)) 10%, transparent);
    cursor: pointer;
    z-index: 2;
}

.combat-own-vitals.aim-invalid .own-vitals-aim-hit[b-y2xdzqt77v] {
    cursor: not-allowed;
    background: transparent;
}

.own-vitals-aim-hit:focus-visible[b-y2xdzqt77v] {
    outline: 2px solid var(--aim-eco, var(--color-primary));
    outline-offset: -2px;
}

.own-vitals-aim-label[b-y2xdzqt77v] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 12px);
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg-base) 90%, transparent);
    border: 1px solid var(--aim-eco, var(--color-eco-action));
    color: var(--aim-eco, var(--color-eco-action));
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combat-own-vitals.aim-invalid .own-vitals-aim-label[b-y2xdzqt77v] {
    border-color: color-mix(in srgb, var(--color-text-secondary) 50%, transparent);
    color: var(--color-text-secondary);
}

.own-vitals-aim-label .material-icons[b-y2xdzqt77v] {
    font-size: 13px;
}
/* /Components/Pages/Combat/Layouts/CombatTabletLayout.razor.rz.scp.css */
/* CombatTabletLayout.razor.css : the tablet tier (960-1279px, Combat.Layout.cs; combat HUD rethink WP11).
   Its own class names (tablet-hud-*), so the legacy 768-1199 rules in combat-responsive.css never reach it. The grid
   fills the main content, which combat-responsive.css sizes to the viewport for this layout (the .tablet-hud :has()
   rule there). Landscape: the board with a side column (target panel, enemies, recent events). Portrait: the side
   panel becomes a row under the board. The dock is your vitals beside the tabbed hotbar in both.
   Canonical breakpoints only (1024); orientation picks the arrangement. Tokens only. */

.tablet-hud[b-vnx9gb7pru] {
    --tablet-vitals-width: 280px;
    --tablet-side-width: 300px;
    display: grid;
    grid-template-columns: var(--tablet-vitals-width) minmax(0, 1fr) var(--tablet-side-width);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "top    top     top"
        "board  board   side"
        "vitals actions actions";
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    overflow: hidden;
}

.tablet-hud.tablet-hud--party[b-vnx9gb7pru] {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
        "top    top     top"
        "party  party   party"
        "board  board   side"
        "vitals actions actions";
}

/* ----- Top strip (the desktop's CombatTopStrip, made finger-sized) ----- */

.tablet-hud-top[b-vnx9gb7pru] {
    grid-area: top;
    min-width: 0;
}

.tablet-hud-top[b-vnx9gb7pru]  .combat-topstrip {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 52px;
    padding: 4px 8px;
}

.tablet-hud-top[b-vnx9gb7pru]  .topstrip-title {
    max-width: 150px;
}

.tablet-hud-top[b-vnx9gb7pru]  .topstrip-log-btn {
    width: 44px;
    height: 44px;
}

/* ----- Party strip (co-op) ----- */

.tablet-hud-party[b-vnx9gb7pru] {
    grid-area: party;
    min-width: 0;
}

/* ----- Board ----- */

.tablet-hud-board[b-vnx9gb7pru] {
    --move-hint-h: 32px;
    grid-area: board;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding-bottom: var(--move-hint-h);
}

/* The board fits this cell (WP12b; boardSizing.js's container), as on Desktop / Wide: it used to be sized from the
   page's width, so a short screen clipped its front rows under the hint. The viewport centers the tilted box (the
   clipped part is its empty tilt band) and its top padding is the back row's headroom (--board-headroom-px), so the
   standees stay in view; the movement hint has a fixed slot at the cell's bottom, so the board never jumps when it
   comes and goes. */
.tablet-hud-board[b-vnx9gb7pru]  .board-zoom-viewport {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: var(--board-headroom-px, 20px);
    padding-bottom: 0;
}

.tablet-hud-board[b-vnx9gb7pru]  .board-iso-container {
    flex-shrink: 0;
}

.tablet-hud-board[b-vnx9gb7pru]  .zone-movement-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    min-height: var(--move-hint-h);
    max-height: var(--move-hint-h);
    flex-wrap: nowrap;
    overflow: hidden;
}

.tablet-hud-board[b-vnx9gb7pru]  .zone-movement-hint .mud-button-root {
    padding-top: 0;
    padding-bottom: 0;
}

.tablet-hud-board[b-vnx9gb7pru]  .combat-adventure-info {
    margin-bottom: 6px;
}

/* Touch ergonomics on the board: the touch aim strip (Confirm / Cancel) docks at the board's bottom edge, the thumb's
   side next to the dock (D10: "the preview docks within thumb reach"), above the board's touch controls, which grow
   to 44px. */
.tablet-hud-board[b-vnx9gb7pru]  .board-aim-strip {
    top: auto;
    bottom: 60px;
}

.tablet-hud-board[b-vnx9gb7pru]  .touch-ctrl-btn,
.tablet-hud-board[b-vnx9gb7pru]  .zoom-btn {
    width: 44px;
    height: 44px;
}

/* ----- Side column: target panel, enemies, recent events ----- */

.tablet-hud-side[b-vnx9gb7pru] {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The enemy list keeps its full height (WP12b): it used to shrink with the column (flex-shrink plus min-height: 0)
   while its cards kept drawing, under Recent Events, at short heights. Now the side column scrolls instead. */
.tablet-hud-roster[b-vnx9gb7pru] {
    flex: 0 0 auto;
}

.tablet-hud-events[b-vnx9gb7pru] {
    flex: 1 1 auto;
    min-height: 120px;
    overflow: hidden;
    /* A column, so the events list (flex: 1, min-height: 0, overflow-y: auto in combat-responsive.css) scrolls inside
       the panel instead of being cut off at its edge; at a larger combat text size fewer rows fit. */
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-bg-base) 72%, transparent);
}

/* ----- Dock: your vitals and the tabbed hotbar ----- */

.tablet-hud-vitals[b-vnx9gb7pru] {
    grid-area: vitals;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 6px;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    background: color-mix(in srgb, var(--color-bg-base) 72%, transparent);
}

.tablet-hud-vitals[b-vnx9gb7pru]  .combat-vitals {
    min-width: 0;
    max-width: none;
}

.tablet-hud-actions[b-vnx9gb7pru] {
    grid-area: actions;
    min-width: 0;
    padding: 6px;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    background: color-mix(in srgb, var(--color-bg-base) 72%, transparent);
}

/* Your vitals as an ally target (a heal on yourself), as the desktop's own-vitals cell. */
.tablet-hud-vitals.aim-mode[b-vnx9gb7pru] {
    --aim-eco: var(--color-eco-action);
}

.tablet-hud-vitals.aim-mode.aim-eco-bonus[b-vnx9gb7pru] {
    --aim-eco: var(--color-eco-bonus);
}

.tablet-hud-vitals.aim-valid[b-vnx9gb7pru] {
    outline: 2px solid var(--aim-eco);
    outline-offset: 2px;
}

.tablet-hud-vitals.aim-armed[b-vnx9gb7pru] {
    outline-width: 3px;
}

.tablet-hud-vitals.aim-invalid[b-vnx9gb7pru] {
    opacity: 0.6;
}

.tablet-hud-self-aim[b-vnx9gb7pru] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 6px;
    border: none;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
}

.tablet-hud-self-aim-label[b-vnx9gb7pru] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-round);
    background: color-mix(in srgb, var(--color-bg-base) 88%, transparent);
    border: 1px solid var(--aim-eco);
    color: var(--aim-eco);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.tablet-hud-self-aim-label .material-icons[b-vnx9gb7pru] {
    font-size: 14px;
}

.tablet-hud-self-aim:focus-visible[b-vnx9gb7pru] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ----- 1024 and below: a narrower side column and vitals ----- */

@media (max-width: 1024px) {
    .tablet-hud[b-vnx9gb7pru] {
        --tablet-vitals-width: 248px;
        --tablet-side-width: 268px;
        gap: 6px;
    }
}

/* ----- Portrait (960-1279px wide, taller than wide): the side panel becomes a row under the board ----- */

@media (orientation: portrait) {
    .tablet-hud[b-vnx9gb7pru] {
        grid-template-columns: var(--tablet-vitals-width) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "top    top"
            "board  board"
            "side   side"
            "vitals actions";
    }

    .tablet-hud.tablet-hud--party[b-vnx9gb7pru] {
        grid-template-rows: auto auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "top    top"
            "party  party"
            "board  board"
            "side   side"
            "vitals actions";
    }

    .tablet-hud-side[b-vnx9gb7pru] {
        flex-direction: row;
        align-items: stretch;
        max-height: 230px;
        overflow-y: hidden;
    }

    /* The row is capped (the board keeps its height), so a tall target panel (intent, statuses, the aim button and
       its reason) scrolls inside its card instead of losing its aim button below the cap. */
    .tablet-hud-side[b-vnx9gb7pru]  .tablet-target {
        flex: 0 0 360px;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .tablet-hud-roster[b-vnx9gb7pru] {
        flex: 1 1 auto;
        min-width: 0;
        overflow-y: auto;
    }

    /* The full log is one tap away in the top strip; portrait keeps the board's height. */
    .tablet-hud-events[b-vnx9gb7pru] {
        display: none;
    }
}
/* /Components/Pages/Editors/AdventureEditor.razor.rz.scp.css */
/* Adventure Editor - Fantasy RPG Theme */

/* Admin Warning Banner - Dark theme */
[b-ih81enozou] .admin-warning-banner {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05)) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    border-left: 4px solid var(--color-warning) !important;
    border-radius: 12px;
}

[b-ih81enozou] .admin-warning-banner .mud-typography-h5 {
    color: var(--color-warning-bright) !important;
    font-family: 'Cinzel', serif;
    font-weight: 600;
}

[b-ih81enozou] .admin-warning-banner .mud-typography-caption {
    color: var(--color-warning-light) !important;
}

[b-ih81enozou] .admin-warning-banner strong {
    color: var(--color-warning-bright);
    font-weight: 700;
}

/* Loading Paper - Centered content */
[b-ih81enozou] .loading-paper {
    text-align: center;
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt)) !important;
    border: 1px solid var(--color-border-base) !important;
}

[b-ih81enozou] .loading-paper .mud-typography {
    color: var(--color-text-primary) !important;
}

/* Page Header */
.adventure-editor-header[b-ih81enozou] {
    background: linear-gradient(135deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.adventure-editor-header h1[b-ih81enozou] {
    font-family: 'Cinzel', serif;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

/* Waypoint Section Header */
[b-ih81enozou] .mud-typography[class*="h"] {
    font-family: 'Cinzel', serif;
    color: var(--color-primary);
}

/* Waypoint Cards - Override MudBlazor Paper defaults */
[b-ih81enozou] .mud-paper {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt)) !important;
    color: var(--color-text-primary) !important;
}

[b-ih81enozou] .mud-paper.mud-elevation-2,
[b-ih81enozou] .mud-paper.mud-elevation-4 {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt)) !important;
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
}

/* Waypoint Card specific styling */
.waypoint-card[b-ih81enozou],
[b-ih81enozou] .mud-paper:has(.mud-typography:contains("Waypoint")) {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid var(--color-border-base) !important;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Waypoint Title Styling */
[b-ih81enozou] .mud-typography-h6,
[b-ih81enozou] .mud-typography-body1,
[b-ih81enozou] .mud-typography-body2 {
    color: var(--color-text-primary) !important;
}

[b-ih81enozou] .mud-paper .mud-typography-h6 {
    font-family: 'Cinzel', serif;
    color: var(--color-primary) !important;
    font-weight: 600;
}

/* Form Fields - Dark theme overrides */
[b-ih81enozou] .mud-input-outlined .mud-input-root {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: var(--color-border-hover) !important;
}

[b-ih81enozou] .mud-input-outlined:hover .mud-input-root {
    border-color: var(--color-border-active) !important;
}

[b-ih81enozou] .mud-input-outlined.mud-input-focused .mud-input-root {
    border-color: rgba(255, 215, 0, 0.5) !important;
}

[b-ih81enozou] .mud-input-label {
    color: var(--color-text-secondary) !important;
}

[b-ih81enozou] .mud-input-text,
[b-ih81enozou] .mud-input input {
    color: var(--color-text-primary) !important;
}

/* Textarea fields */
[b-ih81enozou] .mud-input-outlined textarea {
    background: rgba(15, 23, 42, 0.8) !important;
    color: var(--color-text-primary) !important;
}

/* Select dropdowns */
[b-ih81enozou] .mud-select .mud-input-root {
    background: rgba(15, 23, 42, 0.8) !important;
}

[b-ih81enozou] .mud-popover .mud-list {
    background: var(--color-gray-800) !important;
}

[b-ih81enozou] .mud-list-item {
    color: var(--color-text-primary) !important;
}

[b-ih81enozou] .mud-list-item:hover {
    background: rgba(255, 215, 0, 0.1) !important;
}

/* Chips & Badges */
[b-ih81enozou] .mud-chip {
    background: rgba(245, 158, 11, 0.2) !important;
    color: var(--color-warning-bright) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-ih81enozou] .mud-chip .mud-chip-icon {
    color: var(--color-warning) !important;
}

/* Loading States */
[b-ih81enozou] .mud-progress-linear {
    background-color: rgba(255, 215, 0, 0.1) !important;
}

[b-ih81enozou] .mud-progress-linear-bar {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)) !important;
}

[b-ih81enozou] .mud-progress-circular circle {
    stroke: var(--color-primary) !important;
}

/* Tab styling for editor sections */
[b-ih81enozou] .mud-tabs {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px 8px 0 0;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

[b-ih81enozou] .mud-tab {
    color: var(--color-text-secondary) !important;
}

[b-ih81enozou] .mud-tab.mud-tab-active {
    color: var(--color-primary) !important;
}

[b-ih81enozou] .mud-tab-slider {
    background: var(--color-primary) !important;
}

/* Switch toggles */
[b-ih81enozou] .mud-switch .mud-switch-track {
    background: rgba(255, 255, 255, 0.1) !important;
}

[b-ih81enozou] .mud-switch.mud-checked .mud-switch-track {
    background: var(--color-border-active) !important;
}

[b-ih81enozou] .mud-switch.mud-checked .mud-switch-thumb {
    background: var(--color-primary) !important;
}

/* Monster/Item Selection Chips */
[b-ih81enozou] .mud-chip-set .mud-chip {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: var(--color-info-lighter) !important;
}

[b-ih81enozou] .mud-chip-set .mud-chip .mud-chip-icon {
    color: var(--color-info-light) !important;
}

/* Delete buttons */
[b-ih81enozou] .mud-button-text.mud-button-text-error {
    color: var(--color-danger-light) !important;
}

[b-ih81enozou] .mud-button-text.mud-button-text-error:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Info/Alert boxes */
[b-ih81enozou] .mud-alert.mud-alert-outlined-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: var(--color-info-lighter) !important;
}

[b-ih81enozou] .mud-alert.mud-alert-outlined-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: var(--color-warning-light) !important;
}

[b-ih81enozou] .mud-alert.mud-alert-outlined-error {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: var(--color-danger-lighter) !important;
}

/* Expansion panels for waypoint details */
[b-ih81enozou] .mud-expand-panel {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid var(--color-border-base) !important;
}

[b-ih81enozou] .mud-expand-panel-header {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* ====================================================================== */
/* SIMULATION DIALOG STYLING (PHASE 1-3) */
/* ====================================================================== */

/* Simulation Dialog Styling */
[b-ih81enozou] .mud-dialog .mud-dialog-content {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt)) !important;
    color: var(--color-text-primary) !important;
}

[b-ih81enozou] .mud-dialog .mud-dialog-title {
    background: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid var(--color-border-hover) !important;
}

/* Expansion Panels in Results */
[b-ih81enozou] .mud-expansion-panel {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid var(--color-border-base) !important;
    margin-bottom: 0.5rem !important;
    border-radius: 8px !important;
}

[b-ih81enozou] .mud-expansion-panel-header {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px 8px 0 0 !important;
}

[b-ih81enozou] .mud-expansion-panel-text {
    color: var(--color-primary) !important;
}

/* Simple Table Styling */
[b-ih81enozou] .mud-table {
    background: transparent !important;
}

[b-ih81enozou] .mud-table-head {
    background: rgba(255, 215, 0, 0.1) !important;
}

[b-ih81enozou] .mud-table-cell {
    color: var(--color-text-primary) !important;
    border-bottom-color: rgba(255, 215, 0, 0.1) !important;
    padding: 0.75rem 1rem !important;
}

[b-ih81enozou] .mud-table-row:hover {
    background: rgba(255, 215, 0, 0.05) !important;
}

/* Warning Color Coding */
[b-ih81enozou] .mud-alert.mud-alert-outlined-error,
[b-ih81enozou] .mud-alert.mud-alert-text-error {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

[b-ih81enozou] .mud-alert.mud-alert-outlined-warning,
[b-ih81enozou] .mud-alert.mud-alert-text-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

[b-ih81enozou] .mud-alert.mud-alert-outlined-success,
[b-ih81enozou] .mud-alert.mud-alert-text-success {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
}

[b-ih81enozou] .mud-alert.mud-alert-outlined-info,
[b-ih81enozou] .mud-alert.mud-alert-text-info {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

/* Balance Testing Section */
[b-ih81enozou] .mud-paper:has([style*="rgba(59, 130, 246"]) {
    transition: all 0.3s ease;
}

[b-ih81enozou] .mud-paper:has([style*="rgba(59, 130, 246"]):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2) !important;
}

/* Simulation Progress */
[b-ih81enozou] .mud-progress-circular {
    color: var(--color-info-light) !important;
}

/* Dialog Actions */
[b-ih81enozou] .mud-dialog-actions {
    background: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid rgba(255, 215, 0, 0.1) !important;
}

/* MudChip in Results */
[b-ih81enozou] .mud-chip {
    font-weight: 600 !important;
    border-radius: 16px !important;
}

[b-ih81enozou] .mud-expand-panel-text {
    font-family: 'Cinzel', serif;
    color: var(--color-primary) !important;
}

/* Numeric fields */
[b-ih81enozou] .mud-input-numeric {
    text-align: right;
}

/* Buttons - Primary (Golden) */
[b-ih81enozou] .mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(135deg, #b8860b 0%, var(--color-primary-dark) 50%, var(--color-primary) 100%) !important;
    color: var(--color-gray-900) !important;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[b-ih81enozou] .mud-button-filled.mud-button-filled-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(218, 165, 32, 0.5) !important;
}

/* Buttons - Success (Green) */
[b-ih81enozou] .mud-button-filled.mud-button-filled-success {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark)) !important;
    color: white !important;
}

[b-ih81enozou] .mud-button-filled.mud-button-filled-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4) !important;
}

/* Buttons - Error (Red) */
[b-ih81enozou] .mud-button-filled.mud-button-filled-error {
    background: linear-gradient(135deg, var(--color-danger), var(--color-barbarian)) !important;
    color: white !important;
}

[b-ih81enozou] .mud-button-filled.mud-button-filled-error:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4) !important;
}

/* Status Badges */
[b-ih81enozou] .status-draft {
    background: rgba(148, 163, 184, 0.2) !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

[b-ih81enozou] .status-live {
    background: rgba(34, 197, 94, 0.2) !important;
    color: var(--color-success-light) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

[b-ih81enozou] .status-archived {
    background: rgba(239, 68, 68, 0.2) !important;
    color: var(--color-danger-lighter) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* Checkbox styling */
[b-ih81enozou] .mud-checkbox .mud-checkbox-icon {
    color: var(--color-primary) !important;
}

[b-ih81enozou] .mud-checkbox.mud-checked .mud-checkbox-icon {
    color: var(--color-primary) !important;
}

/* Icon buttons */
[b-ih81enozou] .mud-icon-button {
    color: var(--color-text-secondary) !important;
}

[b-ih81enozou] .mud-icon-button:hover {
    background: rgba(255, 215, 0, 0.1) !important;
    color: var(--color-primary) !important;
}

/* Text inside waypoint cards */
[b-ih81enozou] .mud-paper .mud-typography {
    color: var(--color-text-primary) !important;
}

[b-ih81enozou] .mud-paper .mud-typography.mud-typography-caption {
    color: var(--color-text-secondary) !important;
}

/* Boss waypoint indicator */
[b-ih81enozou] .mud-paper:has(.mud-checkbox[checked]) {
    border-left: 3px solid var(--color-danger) !important;
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), var(--color-bg-elevated)) !important;
}

/* Waypoint Cards */
[b-ih81enozou] .waypoint-card {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt)) !important;
    border: 1px solid var(--color-border-base) !important;
    border-radius: 12px;
}

[b-ih81enozou] .waypoint-header-item {
    display: flex;
    align-items: center;
}

[b-ih81enozou] .waypoint-number {
    font-family: 'Cinzel', serif;
    color: var(--color-primary) !important;
    font-weight: 600;
}

/* JSON Preview */
[b-ih81enozou] .json-preview {
    background: var(--color-bg-elevated-alt) !important;
    border: 1px solid var(--color-border-base) !important;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
}

[b-ih81enozou] .json-code {
    font-size: 0.85em;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--color-success-lighter) !important;
    font-family: 'Courier New', monospace;
}
/* /Components/Pages/Game/Bestiary.razor.rz.scp.css */
.bestiary-header[b-kckr83saqy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.header-title[b-kckr83saqy] {
    display: flex;
    align-items: center;
    color: var(--mud-palette-primary);
}

.header-stats[b-kckr83saqy] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.stat-pill[b-kckr83saqy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 6px 14px;
    min-width: 110px;
}

.stat-pill-label[b-kckr83saqy] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
}

.stat-pill-value[b-kckr83saqy] {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--mud-palette-text-primary);
}

.bestiary-grid[b-kckr83saqy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.loading-state[b-kckr83saqy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 16px;
}

@media (max-width: 600px) {
    .bestiary-grid[b-kckr83saqy] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .header-stats[b-kckr83saqy] {
        width: 100%;
        justify-content: space-between;
    }

    .stat-pill[b-kckr83saqy] {
        min-width: 0;
        flex: 1 1 90px;
        padding: 6px 10px;
    }
}
/* /Components/Pages/Game/Components/AdventureSelectionCard.razor.rz.scp.css */
/* AdventureSelectionCard scoped styles - Uses Design System Tokens */

.adventure-card[b-lq7enfpgcd] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    cursor: pointer;
    transition: all var(--transition-slow);
}

.adventure-card:hover[b-lq7enfpgcd] {
    transform: translateY(-4px);
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-lg), var(--shadow-gold);
}

.adventure-card-title[b-lq7enfpgcd] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-sm) 0;
}

.adventure-card-description[b-lq7enfpgcd] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.5;
}

.adventure-card-meta[b-lq7enfpgcd] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
}

.meta-item[b-lq7enfpgcd] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}
/* /Components/Pages/Game/Components/CompletedAdventureCard.razor.rz.scp.css */
/* CompletedAdventureCard scoped styles - Uses Design System Tokens */

.completed-adventure-card[b-rvc6jconrm] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    transition: all var(--transition-slow);
}

.completed-adventure-card:hover[b-rvc6jconrm] {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-lg);
}

.completed-adventure-header[b-rvc6jconrm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.completed-adventure-info[b-rvc6jconrm] {
    flex: 1;
}

.completed-adventure-title[b-rvc6jconrm] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-sm) 0;
}

.completed-adventure-meta[b-rvc6jconrm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.completed-meta-divider[b-rvc6jconrm] {
    margin: 0 var(--space-xs);
}

.completed-adventure-actions[b-rvc6jconrm] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
}

.completed-date[b-rvc6jconrm] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.completed-adventure-players[b-rvc6jconrm] {
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    margin: var(--space-md) 0;
}

.players-label[b-rvc6jconrm] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
    display: block;
}

.player-badges[b-rvc6jconrm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.player-badge[b-rvc6jconrm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    transition: all var(--transition-base);
}

.player-badge.connected[b-rvc6jconrm] {
    border-color: rgba(34, 197, 94, 0.3);
}

.player-badge.disconnected[b-rvc6jconrm] {
    opacity: 0.6;
    border-color: rgba(239, 68, 68, 0.3);
}

.player-badge-avatar[b-rvc6jconrm] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-border-hover), rgba(218, 165, 32, 0.2));
    border: 1px solid var(--color-border-hover);
}

.player-badge-avatar.warrior[b-rvc6jconrm] { background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(185, 28, 28, 0.2)); border-color: rgba(220, 38, 38, 0.3); }
.player-badge-avatar.wizard[b-rvc6jconrm] { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2)); border-color: rgba(59, 130, 246, 0.3); }
.player-badge-avatar.ranger[b-rvc6jconrm] { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2)); border-color: rgba(34, 197, 94, 0.3); }
.player-badge-avatar.rogue[b-rvc6jconrm] { background: linear-gradient(135deg, rgba(107, 114, 128, 0.2), rgba(75, 85, 99, 0.2)); border-color: rgba(107, 114, 128, 0.3); }
.player-badge-avatar.paladin[b-rvc6jconrm] { background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(202, 138, 4, 0.2)); border-color: rgba(234, 179, 8, 0.3); }
.player-badge-avatar.bard[b-rvc6jconrm] { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(147, 51, 234, 0.2)); border-color: rgba(168, 85, 247, 0.3); }
.player-badge-avatar.barbarian[b-rvc6jconrm] { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2)); border-color: rgba(239, 68, 68, 0.3); }

.player-badge-info[b-rvc6jconrm] {
    display: flex;
    flex-direction: column;
}

.player-badge-name[b-rvc6jconrm] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-lighter);
}

.player-badge-status[b-rvc6jconrm] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
}

.host-tag[b-rvc6jconrm] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #000;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
}

.connected-tag[b-rvc6jconrm] {
    color: var(--color-success);
}

.completed-adventure-code[b-rvc6jconrm] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    margin-top: var(--space-md);
}

.code-label[b-rvc6jconrm] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.code-value[b-rvc6jconrm] {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    letter-spacing: 0.15em;
}

.btn-copy-small[b-rvc6jconrm] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--color-info-light);
    padding: 0.375rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    margin-left: auto;
}

.btn-copy-small:hover[b-rvc6jconrm] {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    transform: scale(1.05);
}
/* /Components/Pages/Game/Components/PlayerSlot.razor.rz.scp.css */
/* PlayerSlot scoped styles - Uses Design System Tokens */

.player-slot[b-gsvtxennrc] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition-base);
}

.player-slot:hover[b-gsvtxennrc] {
    border-color: var(--color-border-hover);
}

.player-slot.host[b-gsvtxennrc] {
    border-left: 3px solid var(--color-primary);
}

.player-slot.ready[b-gsvtxennrc] {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.05);
}

.player-slot-info[b-gsvtxennrc] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.player-avatar[b-gsvtxennrc] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-avatar.warrior[b-gsvtxennrc] {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-danger-light);
}

.player-avatar.wizard[b-gsvtxennrc] {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-info-light);
}

.player-avatar.ranger[b-gsvtxennrc] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-light);
}

.player-avatar.rogue[b-gsvtxennrc] {
    background: rgba(99, 102, 241, 0.2);
    color: var(--color-rogue-light);
}

.player-avatar.paladin[b-gsvtxennrc] {
    background: rgba(245, 158, 11, 0.2);
    color: var(--color-warning-light);
}

.player-avatar.bard[b-gsvtxennrc] {
    background: rgba(236, 72, 153, 0.2);
    color: var(--color-bard-light);
}

.player-avatar.barbarian[b-gsvtxennrc] {
    background: rgba(220, 38, 38, 0.2);
    color: var(--color-danger-light);
}

.player-details[b-gsvtxennrc] {
    display: flex;
    flex-direction: column;
}

.player-slot-name[b-gsvtxennrc] {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.player-slot-class[b-gsvtxennrc] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.player-slot-status[b-gsvtxennrc] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.connection-dot[b-gsvtxennrc] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-round);
}

.connection-dot.connected[b-gsvtxennrc] {
    background: var(--color-success);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.connection-dot.disconnected[b-gsvtxennrc] {
    background: var(--color-danger);
}

.ready-badge[b-gsvtxennrc] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.not-ready-badge[b-gsvtxennrc] {
    background: rgba(100, 116, 139, 0.2);
    color: var(--color-text-secondary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.host-badge[b-gsvtxennrc] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-gray-900);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}
/* /Components/Pages/Game/Components/SavedAdventureCard.razor.rz.scp.css */
/* SavedAdventureCard scoped styles - Uses Design System Tokens */

.saved-adventure-card[b-j5q6bgylwm] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    transition: all var(--transition-slow);
}

.saved-adventure-card:hover[b-j5q6bgylwm] {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-lg);
}

.saved-adventure-header[b-j5q6bgylwm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.saved-adventure-info[b-j5q6bgylwm] {
    flex: 1;
}

.saved-adventure-title[b-j5q6bgylwm] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-sm) 0;
}

.saved-adventure-meta[b-j5q6bgylwm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.saved-meta-divider[b-j5q6bgylwm] {
    margin: 0 var(--space-xs);
}

.saved-adventure-actions[b-j5q6bgylwm] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
}

.saved-date[b-j5q6bgylwm] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.btn-rejoin[b-j5q6bgylwm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    color: white;
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-rejoin:hover[b-j5q6bgylwm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.saved-adventure-players[b-j5q6bgylwm] {
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    margin: var(--space-md) 0;
}

.players-label[b-j5q6bgylwm] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
    display: block;
}

.player-badges[b-j5q6bgylwm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.player-badge[b-j5q6bgylwm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    transition: all var(--transition-base);
}

.player-badge.connected[b-j5q6bgylwm] {
    border-color: rgba(34, 197, 94, 0.3);
}

.player-badge.disconnected[b-j5q6bgylwm] {
    opacity: 0.6;
    border-color: rgba(239, 68, 68, 0.3);
}

.player-badge-avatar[b-j5q6bgylwm] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-border-hover), rgba(218, 165, 32, 0.2));
    border: 1px solid var(--color-border-hover);
}

.player-badge-avatar.warrior[b-j5q6bgylwm] { background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(185, 28, 28, 0.2)); border-color: rgba(220, 38, 38, 0.3); }
.player-badge-avatar.wizard[b-j5q6bgylwm] { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2)); border-color: rgba(59, 130, 246, 0.3); }
.player-badge-avatar.ranger[b-j5q6bgylwm] { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2)); border-color: rgba(34, 197, 94, 0.3); }
.player-badge-avatar.rogue[b-j5q6bgylwm] { background: linear-gradient(135deg, rgba(107, 114, 128, 0.2), rgba(75, 85, 99, 0.2)); border-color: rgba(107, 114, 128, 0.3); }
.player-badge-avatar.paladin[b-j5q6bgylwm] { background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(202, 138, 4, 0.2)); border-color: rgba(234, 179, 8, 0.3); }
.player-badge-avatar.bard[b-j5q6bgylwm] { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(147, 51, 234, 0.2)); border-color: rgba(168, 85, 247, 0.3); }
.player-badge-avatar.barbarian[b-j5q6bgylwm] { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2)); border-color: rgba(239, 68, 68, 0.3); }

.player-badge-info[b-j5q6bgylwm] {
    display: flex;
    flex-direction: column;
}

.player-badge-name[b-j5q6bgylwm] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-lighter);
}

.player-badge-status[b-j5q6bgylwm] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
}

.host-tag[b-j5q6bgylwm] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #000;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
}

.connected-tag[b-j5q6bgylwm] {
    color: var(--color-success);
}

.saved-adventure-code[b-j5q6bgylwm] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    margin-top: var(--space-md);
}

.code-label[b-j5q6bgylwm] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.code-value[b-j5q6bgylwm] {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    letter-spacing: 0.15em;
}

.btn-copy-small[b-j5q6bgylwm] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--color-info-light);
    padding: 0.375rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    margin-left: auto;
}

.btn-copy-small:hover[b-j5q6bgylwm] {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    transform: scale(1.05);
}
/* /Components/Pages/Game/Consumables.razor.rz.scp.css */
/* Consumable Editor Styling */
.consumable-editor-container[b-c1a622ug76] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Header */
.consumable-editor-header[b-c1a622ug76] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.header-content[b-c1a622ug76] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.header-title-section[b-c1a622ug76] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-title[b-c1a622ug76] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #22c55e;
    margin: 0;
    line-height: 1.2;
}

.header-subtitle[b-c1a622ug76] {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0.25rem 0 0 0;
}

.header-actions[b-c1a622ug76] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Filters Section */
.filters-section[b-c1a622ug76] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group[b-c1a622ug76] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 150px;
}

.filter-group.search-group[b-c1a622ug76] {
    flex: 1;
    min-width: 250px;
}

.filter-label[b-c1a622ug76] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #22c55e;
    opacity: 0.9;
}

/* Stats Bar */
.stats-bar[b-c1a622ug76] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.stat-chip[b-c1a622ug76] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: transform 0.2s ease;
}

.stat-chip:hover[b-c1a622ug76] { transform: translateY(-2px); }

.stat-chip.total[b-c1a622ug76] {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--color-text-light);
}

.stat-chip.type-health[b-c1a622ug76] {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #86efac;
}

.stat-chip.type-mana[b-c1a622ug76] {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--color-info-lighter);
}

.stat-chip.type-buff[b-c1a622ug76] {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--color-warning-light);
}

.stat-chip.type-cure[b-c1a622ug76] {
    background: rgba(20, 184, 166, 0.2);
    border: 1px solid rgba(45, 212, 191, 0.3);
    color: #5eead4;
}

.stat-chip.type-scroll[b-c1a622ug76] {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: var(--color-monk-lighter);
}

.stat-chip.type-special[b-c1a622ug76] {
    background: rgba(236, 72, 153, 0.2);
    border: 1px solid rgba(244, 114, 182, 0.3);
    color: var(--color-bard-light);
}

/* Loading & Empty States */
.loading-state[b-c1a622ug76], .empty-state[b-c1a622ug76] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

/* Consumables Grid */
.consumables-grid[b-c1a622ug76] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Consumable Cards */
.consumable-card[b-c1a622ug76] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.consumable-card[b-c1a622ug76]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    transition: all 0.3s ease;
}

.consumable-card-health[b-c1a622ug76]::before   { background: linear-gradient(180deg, #22c55e, #15803d); }
.consumable-card-mana[b-c1a622ug76]::before     { background: linear-gradient(180deg, var(--color-info), #1e40af); }
.consumable-card-buff[b-c1a622ug76]::before     { background: linear-gradient(180deg, var(--color-warning), var(--color-warning-dark)); }
.consumable-card-cure[b-c1a622ug76]::before     { background: linear-gradient(180deg, #14b8a6, #0f766e); }
.consumable-card-scroll[b-c1a622ug76]::before   { background: linear-gradient(180deg, var(--color-monk), #7c3aed); }
.consumable-card-special[b-c1a622ug76]::before  { background: linear-gradient(180deg, var(--color-bard), #db2777); }

.consumable-card:hover[b-c1a622ug76] {
    transform: translateY(-4px);
    border-color: var(--color-border-active);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.consumable-card-deleted[b-c1a622ug76] {
    opacity: 0.6;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.consumable-card-header[b-c1a622ug76] { margin-bottom: 1rem; }

.consumable-card-title-row[b-c1a622ug76] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.consumable-name-section[b-c1a622ug76] { flex: 1; min-width: 0; }

.consumable-name[b-c1a622ug76] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #22c55e;
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.consumable-id[b-c1a622ug76] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    font-family: 'Courier New', monospace;
}

.consumable-badges[b-c1a622ug76] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.consumable-actions[b-c1a622ug76] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.consumable-description[b-c1a622ug76] {
    color: var(--color-text-light);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Consumable Stats Grid */
.consumable-stats-grid[b-c1a622ug76] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.consumable-stat[b-c1a622ug76] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.stat-label[b-c1a622ug76] {
    font-size: 0.65rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.stat-value[b-c1a622ug76] {
    font-size: 0.875rem;
    color: var(--color-text-lighter);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rarity Badges */
.badge-rarity-common[b-c1a622ug76]   { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.3); }
.badge-rarity-uncommon[b-c1a622ug76] { background: rgba(34, 197, 94, 0.2);   color: #86efac; border: 1px solid rgba(74, 222, 128, 0.3); }
.badge-rarity-rare[b-c1a622ug76]     { background: rgba(59, 130, 246, 0.2);  color: #93c5fd; border: 1px solid rgba(96, 165, 250, 0.3); }
.badge-rarity-epic[b-c1a622ug76]     { background: rgba(139, 92, 246, 0.2);  color: #c4b5fd; border: 1px solid rgba(167, 139, 250, 0.3); }
.badge-rarity-legendary[b-c1a622ug76]{ background: rgba(245, 158, 11, 0.2);  color: #fde68a; border: 1px solid rgba(251, 191, 36, 0.3); }

.badge-type[b-c1a622ug76] {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border: 1px solid rgba(74, 222, 128, 0.25);
}

/* Effects List */
.effects-list[b-c1a622ug76] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.effect-chip[b-c1a622ug76] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-text-light);
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
}

/* Effects Section in Modal */
.effects-section-header[b-c1a622ug76] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.effects-section-title[b-c1a622ug76] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #22c55e;
}

.effect-editor-block[b-c1a622ug76] {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.effect-editor-header[b-c1a622ug76] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #86efac;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-sm[b-c1a622ug76] {
    padding: 0.3rem 0.75rem !important;
    font-size: 0.8rem !important;
}

.btn-xs[b-c1a622ug76] {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.75rem !important;
    min-width: unset !important;
}

/* Modals */
.modal-overlay[b-c1a622ug76] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-dialog[b-c1a622ug76] {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.modal-dialog-wide[b-c1a622ug76] {
    max-width: 680px;
}

.modal[b-c1a622ug76] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content[b-c1a622ug76] {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.modal-header[b-c1a622ug76] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h2[b-c1a622ug76] {
    margin: 0;
    color: #22c55e;
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
}

.modal-body[b-c1a622ug76] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.modal-footer[b-c1a622ug76] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.close-btn[b-c1a622ug76] {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.close-btn:hover[b-c1a622ug76] {
    color: var(--color-text-light);
    background: rgba(255, 255, 255, 0.08);
}

.form-row[b-c1a622ug76] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-row label[b-c1a622ug76] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.form-grid-2col[b-c1a622ug76] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.form-grid-2col .form-row-span[b-c1a622ug76] {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .form-grid-2col[b-c1a622ug76] {
        grid-template-columns: 1fr;
    }

    .form-grid-2col .form-row-span[b-c1a622ug76] {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .consumable-editor-container[b-c1a622ug76] {
        padding: 1rem;
    }

    .header-content[b-c1a622ug76] {
        flex-direction: column;
        align-items: flex-start;
    }

    .consumables-grid[b-c1a622ug76] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Game/FriendLeaderboards.razor.rz.scp.css */
/* Page Container */
.page-container[b-3g34hga7y9] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* Hero Header */
.hero-header[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(15, 23, 42, 0.6) 100%);
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.hero-left[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.hero-icon[b-3g34hga7y9] {
    font-size: 3rem;
    color: var(--color-primary);
}

.hero-title h1[b-3g34hga7y9] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-title p[b-3g34hga7y9] {
    font-size: 1rem;
    color: var(--color-text-light);
    margin: 0;
}

/* Tab Navigation */
.tab-navigation[b-3g34hga7y9] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--color-border-hover);
}

.tab-button[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color-text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.tab-button:hover[b-3g34hga7y9] {
    color: var(--color-primary);
    background: rgba(255, 215, 0, 0.05);
}

.tab-button.active[b-3g34hga7y9] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-button .material-icons[b-3g34hga7y9] {
    font-size: 1.25rem;
}

/* Loading */
.loading-container[b-3g34hga7y9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.spinner[b-3g34hga7y9] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-border-hover);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-3g34hga7y9 0.8s linear infinite;
}

@keyframes spin-b-3g34hga7y9 {
    to { transform: rotate(360deg); }
}

.loading-container p[b-3g34hga7y9] {
    color: var(--color-text-light);
    font-size: 1rem;
}

/* Empty State */
.empty-state[b-3g34hga7y9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    gap: 1rem;
}

.empty-state .material-icons[b-3g34hga7y9] {
    font-size: 4rem;
    color: var(--color-text-tertiary);
}

.empty-state h3[b-3g34hga7y9] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.empty-state p[b-3g34hga7y9] {
    color: var(--color-text-secondary);
    margin: 0 0 1rem 0;
}

.btn-primary[b-3g34hga7y9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, #ffed4e 100%);
    border: none;
    border-radius: 8px;
    color: var(--color-gray-900);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-3g34hga7y9] {
    background: linear-gradient(135deg, #ffed4e 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-border-active);
}

/* Leaderboard Grid */
.leaderboard-grid[b-3g34hga7y9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

/* Leaderboard Card */
.leaderboard-card[b-3g34hga7y9] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    overflow: hidden;
}

.leaderboard-header[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(15, 23, 42, 0.4) 100%);
    border-bottom: 1px solid var(--color-border-hover);
}

.leaderboard-header .material-icons[b-3g34hga7y9] {
    font-size: 1.75rem;
    color: var(--color-primary);
}

.leaderboard-header h3[b-3g34hga7y9] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

/* Leaderboard List */
.leaderboard-list[b-3g34hga7y9] {
    padding: 0.75rem;
}

.leaderboard-item[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

.leaderboard-item:last-child[b-3g34hga7y9] {
    margin-bottom: 0;
}

.leaderboard-item:hover[b-3g34hga7y9] {
    background: rgba(255, 215, 0, 0.05);
    border-color: var(--color-border-hover);
}

.leaderboard-item.current-user[b-3g34hga7y9] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.leaderboard-item.current-user .rank[b-3g34hga7y9] {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
}

/* Rank Badge */
.rank[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 8px;
    color: var(--color-gray-900);
    font-size: 1.125rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Player Info */
.player-info[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.player-avatar[b-3g34hga7y9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-border-active);
    flex-shrink: 0;
}

.player-avatar .material-icons[b-3g34hga7y9] {
    font-size: 20px;
    color: var(--color-primary);
}

.player-details[b-3g34hga7y9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.player-name[b-3g34hga7y9] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-stat[b-3g34hga7y9] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* Score */
.score[b-3g34hga7y9] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .page-container[b-3g34hga7y9] {
        padding: 1rem;
    }

    .hero-header[b-3g34hga7y9] {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .hero-left[b-3g34hga7y9] {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-title h1[b-3g34hga7y9] {
        font-size: 1.5rem;
    }

    .tab-navigation[b-3g34hga7y9] {
        flex-wrap: wrap;
    }

    .tab-button[b-3g34hga7y9] {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }

    .leaderboard-grid[b-3g34hga7y9] {
        grid-template-columns: 1fr;
    }

    .leaderboard-item[b-3g34hga7y9] {
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .rank[b-3g34hga7y9] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .player-avatar[b-3g34hga7y9] {
        width: 36px;
        height: 36px;
    }

    .player-name[b-3g34hga7y9] {
        font-size: 0.9rem;
    }

    .score[b-3g34hga7y9] {
        font-size: 1.125rem;
    }
}
/* /Components/Pages/Game/Friends.razor.rz.scp.css */
.friends-page[b-918busdmjg] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* Hero Header */
.hero-header[b-918busdmjg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
}

.hero-left[b-918busdmjg] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.hero-icon[b-918busdmjg] {
    font-size: 3rem;
    color: var(--color-primary);
}

.hero-info h1[b-918busdmjg] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-subtitle[b-918busdmjg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0 0;
    color: var(--color-text-light);
    font-size: 0.95rem;
}

.hero-subtitle .separator[b-918busdmjg] {
    color: var(--color-text-tertiary);
}

.hero-right[b-918busdmjg] {
    display: flex;
    gap: 1rem;
}

/* Tab Navigation */
.tab-navigation[b-918busdmjg] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
}

.tab-button[b-918busdmjg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-text-light);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.tab-button .material-icons[b-918busdmjg] {
    font-size: 1.25rem;
}

.tab-button:hover[b-918busdmjg] {
    background: rgba(255, 215, 0, 0.05);
    color: var(--color-primary);
}

.tab-button.active[b-918busdmjg] {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
    border: 1px solid var(--color-border-active);
}

.tab-button .badge[b-918busdmjg] {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-info-light);
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.tab-button .badge.warning[b-918busdmjg] {
    background: rgba(251, 191, 36, 0.2);
    color: var(--color-warning-bright);
}

/* Tab Content */
.tab-content[b-918busdmjg] {
    min-height: 400px;
}

/* Buttons */
.btn-primary[b-918busdmjg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, #ffed4e 100%);
    border: none;
    border-radius: 8px;
    color: var(--color-gray-900);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary .material-icons[b-918busdmjg] {
    font-size: 1.25rem;
}

.btn-primary:hover[b-918busdmjg] {
    background: linear-gradient(135deg, #ffed4e 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-border-active);
}

.btn-primary:active[b-918busdmjg] {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .friends-page[b-918busdmjg] {
        padding: 1rem;
        gap: 1rem;
    }

    .hero-header[b-918busdmjg] {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .hero-left[b-918busdmjg] {
        flex-direction: column;
        text-align: center;
    }

    .hero-icon[b-918busdmjg] {
        font-size: 2.5rem;
    }

    .hero-info h1[b-918busdmjg] {
        font-size: 1.5rem;
    }

    .hero-subtitle[b-918busdmjg] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .tab-navigation[b-918busdmjg] {
        flex-wrap: wrap;
    }

    .tab-button[b-918busdmjg] {
        flex: 1;
        min-width: calc(50% - 0.25rem);
        justify-content: center;
        padding: 0.625rem 1rem;
    }

    .tab-button span:not(.material-icons):not(.badge)[b-918busdmjg] {
        display: none;
    }
}
/* /Components/Pages/Game/Game.razor.rz.scp.css */
/* ============================================
   THE TAVERN HUB ("Hearthside") - page composition only
   Docs/LRPG_TAVERN_HUB.md section 3 and the canvas boards A-1920 / A-1366 / A-1280 / A-1024 / A-768 / A-390 /
   A-New. Each section component styles itself; this file places the section areas per tier and owns the shared page
   tokens. Canonical breakpoints only:
     base             portrait (481-959): hero band, quest card, paired grids
     max-width 480    phone: one column in the portrait order (camp mode is the model class below), the hub dock
     min-width 960    tablet: the quest stage leads, the hero plate on it
     min-width 1280   desktop: two-column lower deck (three columns on .tavern-hub--wide)
   Three modifier classes come from the model (TavernHubLayout), never from a width in this file:
     .tavern-hub--wide         combat's Wide tier: the three-column lower deck, as stacked column wrappers
     .tavern-hub--first-visit  first steps showing: the common room sits beside the roads (A-New)
     .tavern-hub--camp         a phone that can't fight (camp mode): Get ready before Where you left off (A-390)
   The page renders the sections in each mode's reading order (TavernHubLayout.Composition), so the DOM, which a
   screen reader and Tab follow, matches what the templates below draw.
   Owner: W4 (page composition after the foundation).
   ============================================ */

/* ===== Page tokens =====
   On .tavern-page so the dock and the sheet (siblings of the hub, outside its grid) inherit them too. Section
   components may read every one of them (custom properties inherit across CSS isolation scopes):
     --tavern-gutter        the distance from the screen edge to the content column (an absolute length). A section
                            drawn edge to edge in the comps (the stage art from 960 up, the hero band below 960) can
                            bleed with margin-inline: calc(-1 * var(--tavern-gutter)) and pad its content back with
                            padding-inline: var(--tavern-gutter). Without that it simply sits in the content column.
     --tavern-gap           the vertical space between sections.
     --tavern-col-gap       the space between side-by-side sections.
     --tavern-stage-height  the quest stage's height from 960 up (D5).
     --tavern-plate-width   the hero plate's width on the stage (0 below 960, where it is the header band).
     --tavern-plate-inset   the room between the plate and the content column's right edge, where the class standee
                            stands (0 on the 960 tier, which has no standee). The stage keeps its own content clear of
                            --tavern-plate-width + --tavern-plate-inset on the right.
     --tavern-plate-top     the plate's distance from the top of the stage.
     --tavern-stage-bleed   how far the stage reaches past the content column on each side (the gutter from 960 up,
                            where the stage art runs edge to edge; 0 below). TavernQuestStage pads its text back in by it.
     --tavern-stage-clear-end  the room the stage's text keeps clear on its right, measured from the stage's own right
                            edge: the gutter, the standee's room and the plate.
     --tavern-standee-width the class standee's width (0 below 1280, where there is no standee).
     --tavern-standee-end   the standee's distance from the stage's right edge: its left edge sits just under the
                            plate's right edge, so the plate overlaps the standee's feathered side (A-1920 / A-1366 /
                            A-1280).
     --tavern-dock-height   the phone hub dock's height (the safe-area inset comes on top).
     --tavern-banner-room   the room a page banner above the hub takes (MainLayout's Alpha banner or the active
                            adventure banner, about 45px each, plus a little clearance); 0 while none shows. The
                            desktop tiers take it out of the gap above the ready check (the 1280x720 fold, below). */
.tavern-page[b-vpuzfddh0s] {
    --tavern-shell-inset: 16px; /* MainLayout's MudContainer padding (pa-4), which the hub runs over */
    --tavern-gutter: var(--space-xl);
    --tavern-gap: var(--space-2xl);
    --tavern-col-gap: 20px;
    --tavern-stage-height: clamp(400px, 58vh, 520px);
    --tavern-plate-width: 0px;
    --tavern-plate-inset: 0px;
    --tavern-plate-top: 0px;
    --tavern-stage-bleed: 0px;
    --tavern-stage-clear-end: 0px;
    --tavern-standee-width: 0px;
    --tavern-standee-end: 0px;
    --tavern-dock-height: 72px;
    --tavern-banner-room: 0px;
}

/* A banner above the hub (the Alpha banner, BetaBanner; the active adventure banner) pushes the whole page down. Both
   sit directly in MudBlazor's main content, ahead of the page container. */
.mud-main-content:has(> .beta-banner) .tavern-page[b-vpuzfddh0s] {
    --tavern-banner-room: 52px;
}

.mud-main-content:has(> .adventure-banner-container) .tavern-page[b-vpuzfddh0s] {
    --tavern-banner-room: 52px;
}

/* ===== The grid =====
   The hub runs over MainLayout's container padding, so its edges are the screen's (and its top meets the app bar);
   its own padding is the page gutter, and the grid's columns are the content columns. On wide screens the gutter
   grows so the content tops out at 1680px.
   Rows have no gap: each area carries its own bottom margin, so the row of a section that is not rendered (null in the
   model) collapses to nothing. */
.tavern-hub[b-vpuzfddh0s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "hero hero"
        "garrick garrick"
        "stage stage"
        "ready ready"
        "ahead ahead"
        "roads roads"
        "contracts contracts"
        "stations stations"
        "common trophies"
        "notice notice";
    column-gap: var(--tavern-col-gap);
    align-items: start;
    margin: calc(-1 * var(--tavern-shell-inset)) calc(-1 * var(--tavern-shell-inset)) 0;
    padding-inline: var(--tavern-gutter);
}

.tavern-area[b-vpuzfddh0s] {
    min-width: 0;
    margin-bottom: var(--tavern-gap);
}

.tavern-area--stage[b-vpuzfddh0s] { grid-area: stage; }
.tavern-area--hero[b-vpuzfddh0s] { grid-area: hero; margin: 0 calc(-1 * var(--tavern-gutter)) var(--space-lg); }
.tavern-area--garrick[b-vpuzfddh0s] { grid-area: garrick; position: relative; z-index: 2; margin-bottom: var(--space-xl); }
.tavern-area--ready[b-vpuzfddh0s] { grid-area: ready; scroll-margin-top: var(--space-4xl); }
.tavern-area--ahead[b-vpuzfddh0s] { grid-area: ahead; }
.tavern-area--roads[b-vpuzfddh0s] { grid-area: roads; }
.tavern-area--contracts[b-vpuzfddh0s] { grid-area: contracts; }
.tavern-area--stations[b-vpuzfddh0s] { grid-area: stations; }
.tavern-area--common[b-vpuzfddh0s] { grid-area: common; }
.tavern-area--trophies[b-vpuzfddh0s] { grid-area: trophies; }
.tavern-area--notice[b-vpuzfddh0s] { grid-area: notice; }

/* "Get ready first" focuses the ready area (and "Who's about?" the common room) so the browser scrolls to it; no
   ring on that programmatic focus. */
.tavern-area--ready:focus:not(:focus-visible)[b-vpuzfddh0s],
.tavern-area--common:focus:not(:focus-visible)[b-vpuzfddh0s] {
    outline: none;
}

.tavern-area--common[b-vpuzfddh0s] {
    scroll-margin-top: var(--space-4xl);
}

/* Portrait pairs the common room with the trophies; either one alone takes the whole row. */
.tavern-hub:not(:has(.tavern-area--trophies)) .tavern-area--common[b-vpuzfddh0s],
.tavern-hub:not(:has(.tavern-area--common)) .tavern-area--trophies[b-vpuzfddh0s] {
    grid-column: 1 / -1;
}

/* ===== Phone (480 and down): one column =====
   Spacing and the single column. A phone that can't fight takes camp mode's order (.tavern-hub--camp, below); a
   narrow window with a mouse can fight, so it keeps the portrait order. The dock is fixed to the bottom; game-hub.css
   reserves its height under the page (footer included). */
@media (max-width: 480px) {
    .tavern-page[b-vpuzfddh0s] {
        --tavern-gutter: var(--space-lg);
        --tavern-gap: var(--space-xl);
        --tavern-col-gap: var(--space-lg);
    }

    .tavern-hub[b-vpuzfddh0s] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "hero"
            "garrick"
            "stage"
            "ready"
            "ahead"
            "roads"
            "contracts"
            "stations"
            "common"
            "trophies"
            "notice";
    }

    .tavern-area--hero[b-vpuzfddh0s] {
        margin-bottom: var(--space-md);
    }
}

/* ===== Camp mode (the model's .tavern-hub--camp: a phone that can't fight) =====
   Combat can't load here, so getting ready comes before "Where you left off" (A-390), and the roads follow the
   contracts and stations. One column at any width the class applies (a phone up to the 600px Xs tier). */
.tavern-hub.tavern-hub--camp[b-vpuzfddh0s] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "hero"
        "garrick"
        "ready"
        "stage"
        "ahead"
        "contracts"
        "stations"
        "roads"
        "common"
        "trophies"
        "notice";
}

/* ===== Tablet (960-1279) and up: the stage =====
   The stage leads (its art edge to edge under the app bar in the comps: A-1024 / A-1366 / A-1920); the hero plate
   shares its area, floating at the content column's right edge less the standee's room, and Garrick's bar overlaps the
   stage's bottom edge. */
@media (min-width: 960px) {
    .tavern-page[b-vpuzfddh0s] {
        --tavern-gutter: var(--space-2xl);
        --tavern-col-gap: var(--space-xl);
        --tavern-plate-width: 330px;
        --tavern-plate-top: var(--space-2xl);
        --tavern-stage-bleed: var(--tavern-gutter);
        --tavern-stage-clear-end: calc(var(--tavern-gutter) + var(--tavern-plate-inset) + var(--tavern-plate-width));
    }

    /* The contracts span the common room's row and the trophies' row. With every row auto, a contracts panel taller
       than the two would grow both rows and open a band under the common room (A-1024 stacks them 26px apart); the
       trophies' row is flexible instead, so the surplus lands under the trophies. */
    .tavern-hub[b-vpuzfddh0s] {
        grid-template-areas:
            "stage stage"
            "garrick garrick"
            "ready ready"
            "ahead ahead"
            "roads roads"
            "contracts common"
            "contracts trophies"
            "stations stations"
            "notice notice";
        grid-template-rows: repeat(6, auto) 1fr auto auto;
    }

    /* A flex column of the stage's height (D5); TavernQuestStage's root takes flex: 1 to fill it. It bleeds over the
       gutters, so the art runs edge to edge (the stage pads its text back in by --tavern-stage-bleed). No bottom
       margin: Garrick's overlap is measured from the stage's edge. */
    .tavern-area--stage[b-vpuzfddh0s] {
        min-height: var(--tavern-stage-height);
        display: flex;
        flex-direction: column;
        margin: 0 calc(-1 * var(--tavern-stage-bleed));
    }

    .tavern-area--hero[b-vpuzfddh0s] {
        grid-area: stage;
        justify-self: end;
        align-self: start;
        width: var(--tavern-plate-width);
        max-width: 100%;
        margin: var(--tavern-plate-top) var(--tavern-plate-inset) 0 0;
        position: relative;
        z-index: 1;
    }

    .tavern-area--garrick[b-vpuzfddh0s] {
        margin-top: -24px;
        margin-bottom: var(--tavern-gap);
    }

    /* The portrait pairing above does not apply to these templates: back to each area's own columns. */
    .tavern-hub:not(:has(.tavern-area--trophies)) .tavern-area--common[b-vpuzfddh0s] {
        grid-column: common;
    }

    .tavern-hub:not(:has(.tavern-area--common)) .tavern-area--trophies[b-vpuzfddh0s] {
        grid-column: trophies;
    }

    /* No contracts (before the contracts engine, or an empty board): the common room and trophies pair up. */
    .tavern-hub:not(:has(.tavern-area--contracts))[b-vpuzfddh0s] {
        grid-template-areas:
            "stage stage"
            "garrick garrick"
            "ready ready"
            "ahead ahead"
            "roads roads"
            "common trophies"
            "stations stations"
            "notice notice";
        grid-template-rows: none;
    }

    /* The common room and the trophy mantle stack in one deck column beside the contracts: two cards 24px apart
       (A-1024), the column gap, not the gap between sections. Without contracts this tier pairs them side by side. */
    .tavern-hub:not(.tavern-hub--first-visit):has(.tavern-area--contracts):has(.tavern-area--trophies) .tavern-area--common[b-vpuzfddh0s] {
        margin-bottom: var(--tavern-col-gap);
    }

    /* No common room: the trophies move up into its place (two-column decks). */
    .tavern-hub:not(.tavern-hub--wide):not(.tavern-hub--first-visit):not(:has(.tavern-area--common)) .tavern-area--trophies[b-vpuzfddh0s] {
        grid-area: common;
    }

    /* No contracts and no trophies yet (a new hero): the common room takes the pair's whole row on this tier. */
    .tavern-hub:not(:has(.tavern-area--contracts)):not(:has(.tavern-area--trophies)) .tavern-area--common[b-vpuzfddh0s] {
        grid-column: 1 / -1;
    }
}

/* ===== Desktop (1280 and up) =====
   Lower deck in two columns (A-1366, A-1280): contracts over stations on the left, the common room over the trophy
   mantle on the right; the notice board runs full width below. */
@media (min-width: 1280px) {
    .tavern-page[b-vpuzfddh0s] {
        --tavern-gutter: max(clamp(48px, 4.1vw, 56px), (min(100vw, 1920px) - 1680px) / 2);
        --tavern-gap: clamp(32px, 2.5vw, 40px);
        --tavern-plate-width: clamp(360px, 28vw, 420px);
        --tavern-plate-inset: clamp(140px, 20vw - 120px, 260px);
        --tavern-plate-top: clamp(32px, 6.5vh, 72px);
        /* The class standee (W1) fills the plate's inset and the gutter, up to the comps' 260px, and starts 32px
           under the plate's right edge: 225px wide 16px from the edge at 1366, 209 / 16 at 1280, 260 / 152 at 1920. */
        --tavern-standee-width: min(260px, calc(var(--tavern-gutter) + var(--tavern-plate-inset) + 16px));
        --tavern-standee-end: calc(var(--tavern-gutter) + var(--tavern-plate-inset) + 32px - var(--tavern-standee-width));
    }

    .tavern-hub[b-vpuzfddh0s] {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        grid-template-areas:
            "stage stage"
            "garrick garrick"
            "ready ready"
            "ahead ahead"
            "roads roads"
            "contracts common"
            "contracts trophies"
            "stations trophies"
            "notice notice";
        grid-template-rows: none;
    }

    /* The ready check clears the 1280x720 desktop floor's fold: A-1280 ends its cards at 688px. A banner above the hub
       (--tavern-banner-room) pushes them under it, so on a short window the gap above the ready check gives way first,
       down to 12px (1280x720 with the Alpha banner: cards end at about 713px). Tall windows keep the full gap; the
       stage keeps D5's height. */
    .tavern-area--garrick[b-vpuzfddh0s] {
        margin-top: -30px;
        margin-bottom: clamp(12px, 100vh - 688px - var(--tavern-banner-room), var(--tavern-gap));
    }

    /* The desktop decks stack the common room over the trophy mantle in the right column, contracts or not (A-1366:
       24px apart). A first visit seats the common room beside the roads instead. */
    .tavern-hub:not(.tavern-hub--first-visit):has(.tavern-area--trophies) .tavern-area--common[b-vpuzfddh0s] {
        margin-bottom: var(--tavern-col-gap);
    }

    /* The desktop decks give the common room a column of its own, trophies or not. */
    .tavern-hub:not(:has(.tavern-area--contracts)):not(:has(.tavern-area--trophies)) .tavern-area--common[b-vpuzfddh0s] {
        grid-column: common;
    }

    /* No contracts: the stations climb into the left column's top (the right column keeps its pair). */
    .tavern-hub:not(:has(.tavern-area--contracts))[b-vpuzfddh0s] {
        grid-template-areas:
            "stage stage"
            "garrick garrick"
            "ready ready"
            "ahead ahead"
            "roads roads"
            "stations common"
            "stations trophies"
            "notice notice";
    }

    /* First visit (A-New): the roads and the common room share a row; the rest of the deck follows. */
    .tavern-hub.tavern-hub--first-visit[b-vpuzfddh0s] {
        grid-template-areas:
            "stage stage"
            "garrick garrick"
            "ready ready"
            "ahead ahead"
            "roads common"
            "contracts trophies"
            "stations trophies"
            "notice notice";
    }

    .tavern-hub.tavern-hub--first-visit:not(:has(.tavern-area--contracts))[b-vpuzfddh0s] {
        grid-template-areas:
            "stage stage"
            "garrick garrick"
            "ready ready"
            "ahead ahead"
            "roads common"
            "stations trophies"
            "notice notice";
    }

    /* Wide desktops (combat tier Wide, A-1920): contracts / (stations + trophies) / (common room + notice). The two
       right columns are wrappers (.tavern-deck-col, TavernHubLayout) that stack their sections, so each column's
       sections sit one under the other whatever the others' heights (A-1920: 26px apart), and a missing section leaves
       no hole. On a first visit the common room joins the roads' row and the side column is the notice alone. */
    .tavern-hub.tavern-hub--wide[b-vpuzfddh0s] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "stage stage stage"
            "garrick garrick garrick"
            "ready ready ready"
            "ahead ahead ahead"
            "roads roads roads"
            "contracts deckmid deckside";
    }

    .tavern-hub.tavern-hub--wide:not(:has(.tavern-area--contracts))[b-vpuzfddh0s] {
        grid-template-areas:
            "stage stage stage"
            "garrick garrick garrick"
            "ready ready ready"
            "ahead ahead ahead"
            "roads roads roads"
            "deckmid deckmid deckside";
    }

    .tavern-hub.tavern-hub--wide.tavern-hub--first-visit[b-vpuzfddh0s] {
        grid-template-areas:
            "stage stage stage"
            "garrick garrick garrick"
            "ready ready ready"
            "ahead ahead ahead"
            "roads roads common"
            "contracts deckmid deckside";
    }

    .tavern-hub.tavern-hub--wide.tavern-hub--first-visit:not(:has(.tavern-area--contracts))[b-vpuzfddh0s] {
        grid-template-areas:
            "stage stage stage"
            "garrick garrick garrick"
            "ready ready ready"
            "ahead ahead ahead"
            "roads roads common"
            "deckmid deckmid deckside";
    }
}

/* ===== Wide deck columns (rendered only on the wide tier, TavernHubLayout.Composition) ===== */
.tavern-deck-col[b-vpuzfddh0s] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Sections stacked in one column sit the column gap apart (A-1920: 24px), as the deck's columns do; the last keeps
   the section gap above the footer. */
.tavern-deck-col > .tavern-area:not(:last-child)[b-vpuzfddh0s] {
    margin-bottom: var(--tavern-col-gap);
}

.tavern-deck-col--mid[b-vpuzfddh0s] {
    grid-area: deckmid;
}

.tavern-deck-col--side[b-vpuzfddh0s] {
    grid-area: deckside;
}

/* ===== Bag sheet purse (canvas A-Sheet), passed into TavernSheet's aside ===== */

.tavern-sheet-purse[b-vpuzfddh0s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    background: color-mix(in srgb, var(--color-primary) 7%, transparent);
    color: var(--color-primary-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.tavern-sheet-purse[b-vpuzfddh0s]  .tavern-sheet-purse-icon {
    font-size: 16px;
    color: var(--color-primary);
}

/* ============================================
   TAVERN LOADING (prerender + first interactive pass)
   ============================================ */

.tavern-loading[b-vpuzfddh0s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    min-height: 60vh;
}

.tavern-loading-text[b-vpuzfddh0s] {
    font-family: var(--font-display);
    color: var(--color-primary);
    letter-spacing: 0.05em;
}

/* ============================================
   NO HERO SELECTED
   ============================================ */

.no-hero-state[b-vpuzfddh0s] {
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-active);
    border-radius: var(--radius-3xl);
}

.no-hero-state[b-vpuzfddh0s]  .no-hero-icon {
    color: var(--color-warning);
    margin-bottom: var(--space-lg);
}

.no-hero-title[b-vpuzfddh0s] {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-warning);
    margin-bottom: var(--space-sm);
}

.no-hero-text[b-vpuzfddh0s] {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
}
/* /Components/Pages/Game/Inventory.razor.rz.scp.css */
/* Inventory Page - Scoped Styles */
/* Shared classes (item-grid, empty-state, filters-row, etc.) are in game-shared.css */

/* ============================================
   INVENTORY CONTAINER
   ============================================ */

.inventory-container[b-rt2ykpb1f9] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    position: relative;
}

    .inventory-container[b-rt2ykpb1f9]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--color-border-active), transparent);
    }

.items-container[b-rt2ykpb1f9] {
    border-color: rgba(59, 130, 246, 0.2);
}

    .items-container[b-rt2ykpb1f9]::before {
        background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), transparent);
    }

/* ============================================
   INVENTORY TAB BAR (tabs + toolbar inline)
   ============================================ */

.inventory-tab-bar[b-rt2ykpb1f9] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

    .inventory-tab-bar > :first-child[b-rt2ykpb1f9] {
        flex: 1;
        min-width: 0;
    }

.inventory-toolbar[b-rt2ykpb1f9] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
    padding-bottom: var(--space-xs);
}

/* ============================================
   DENSITY GRID
   ============================================ */

[b-rt2ykpb1f9] .item-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
}

[b-rt2ykpb1f9] .item-grid.item-grid-dense {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    [b-rt2ykpb1f9] .item-grid,
    [b-rt2ykpb1f9] .item-grid.item-grid-dense {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    [b-rt2ykpb1f9] .item-grid,
    [b-rt2ykpb1f9] .item-grid.item-grid-dense {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   BUTTONS
   ============================================ */

.btn[b-rt2ykpb1f9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-xl);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all var(--transition-slow);
    text-decoration: none;
    border: 2px solid transparent;
}

.btn-primary[b-rt2ykpb1f9] {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: var(--color-gray-900);
    box-shadow: 0 4px 15px var(--color-border-active);
}

    .btn-primary:hover[b-rt2ykpb1f9] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px var(--color-border-active);
    }

.btn-secondary[b-rt2ykpb1f9] {
    background: rgba(51, 65, 85, 0.6);
    border-color: var(--color-border-active);
    color: var(--color-primary);
}

    .btn-secondary:hover[b-rt2ykpb1f9] {
        background: rgba(51, 65, 85, 0.9);
        border-color: var(--color-primary);
        transform: translateY(-3px);
    }

[b-rt2ykpb1f9] .btn-equip {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)) !important;
    color: var(--color-gray-900) !important;
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    padding: var(--space-sm) var(--space-lg) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 4px 12px var(--color-border-active);
}

    [b-rt2ykpb1f9] .btn-equip:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px var(--color-border-active);
    }

/* ============================================
   STAT CHIPS (drawer)
   ============================================ */

.stat-chip[b-rt2ykpb1f9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-secondary);
}

.stat-damage[b-rt2ykpb1f9] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--color-danger-light);
}

.stat-ac[b-rt2ykpb1f9] {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--color-info-light);
}

.stat-type[b-rt2ykpb1f9] {
    text-transform: capitalize;
}

.stat-level[b-rt2ykpb1f9] {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
}

.stat-bonus[b-rt2ykpb1f9] {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--color-success-light);
}

.effect-chip[b-rt2ykpb1f9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--color-success-light);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-rt2ykpb1f9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    min-height: 300px;
    padding: var(--space-3xl);
    text-align: center;
}

.empty-state-icon[b-rt2ykpb1f9] {
    font-size: 4rem !important;
    color: var(--color-text-tertiary);
    opacity: 0.4;
}

.warning-icon[b-rt2ykpb1f9] {
    color: var(--color-warning) !important;
    opacity: 0.8;
}

.empty-state-title[b-rt2ykpb1f9] {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-transform: uppercase;
}

.empty-state-text[b-rt2ykpb1f9] {
    color: var(--color-text-secondary);
    max-width: 400px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
    .inventory-container[b-rt2ykpb1f9] {
        padding: var(--space-lg);
    }
}
/* /Components/Pages/Game/LootTables.razor.rz.scp.css */
/* Loot Table Editor Styling */
.lt-editor-container[b-sisfwbmz2p] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Header */
.lt-editor-header[b-sisfwbmz2p] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.header-content[b-sisfwbmz2p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.header-title-section[b-sisfwbmz2p] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-title[b-sisfwbmz2p] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #f59e0b;
    margin: 0;
    line-height: 1.2;
}

.header-subtitle[b-sisfwbmz2p] {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0.25rem 0 0 0;
}

.header-actions[b-sisfwbmz2p] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Filters */
.filters-section[b-sisfwbmz2p] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group[b-sisfwbmz2p] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 150px;
}

.filter-group.search-group[b-sisfwbmz2p] {
    flex: 1;
    min-width: 250px;
}

.filter-label[b-sisfwbmz2p] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f59e0b;
    opacity: 0.9;
}

/* Stats Bar */
.stats-bar[b-sisfwbmz2p] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.stat-chip[b-sisfwbmz2p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: transform 0.2s ease;
}

.stat-chip:hover[b-sisfwbmz2p] { transform: translateY(-2px); }

.stat-chip.total[b-sisfwbmz2p] {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--color-text-light);
}

.stat-chip.total-entries[b-sisfwbmz2p] {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fde68a;
}

.stat-chip.type-weapon[b-sisfwbmz2p] {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #fca5a5;
}

.stat-chip.type-armor[b-sisfwbmz2p] {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--color-info-lighter);
}

.stat-chip.type-consumable[b-sisfwbmz2p] {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #86efac;
}

.stat-chip.type-currency[b-sisfwbmz2p] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fde68a;
}

/* Loading & Empty */
.loading-state[b-sisfwbmz2p], .empty-state[b-sisfwbmz2p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

/* Grid */
.lt-grid[b-sisfwbmz2p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Cards */
.lt-card[b-sisfwbmz2p] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.lt-card[b-sisfwbmz2p]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #f59e0b, #b45309);
}

.lt-card:hover[b-sisfwbmz2p] {
    transform: translateY(-4px);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.lt-card-header[b-sisfwbmz2p] { margin-bottom: 1rem; }

.lt-card-title-row[b-sisfwbmz2p] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.lt-id-section[b-sisfwbmz2p] { flex: 1; min-width: 0; }

.lt-id[b-sisfwbmz2p] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #f59e0b;
    margin: 0 0 0.35rem 0;
}

.lt-monster-badge[b-sisfwbmz2p] {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.2rem 0.6rem;
    font-family: 'Courier New', monospace;
}

.lt-actions[b-sisfwbmz2p] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Entries Table */
.lt-entries-table[b-sisfwbmz2p] {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.8rem;
}

.lt-entries-header[b-sisfwbmz2p] {
    display: grid;
    grid-template-columns: 1fr 90px 60px;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: rgba(245, 158, 11, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f59e0b;
}

.lt-entry-row[b-sisfwbmz2p] {
    display: grid;
    grid-template-columns: 1fr 90px 60px;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease;
}

.lt-entry-row:last-child[b-sisfwbmz2p] { border-bottom: none; }
.lt-entry-row:hover[b-sisfwbmz2p] { background: rgba(255, 255, 255, 0.03); }

.lt-entry-item[b-sisfwbmz2p] {
    color: var(--color-text-lighter);
    font-family: 'Courier New', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lt-entry-type[b-sisfwbmz2p] {
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
}

.lt-entry-type.type-weapon[b-sisfwbmz2p]    { background: rgba(239,68,68,0.15); color: #fca5a5; }
.lt-entry-type.type-armor[b-sisfwbmz2p]     { background: rgba(59,130,246,0.15); color: #93c5fd; }
.lt-entry-type.type-consumable[b-sisfwbmz2p]{ background: rgba(34,197,94,0.15);  color: #86efac; }
.lt-entry-type.type-currency[b-sisfwbmz2p]  { background: rgba(245,158,11,0.15); color: #fde68a; }

.lt-entry-chance[b-sisfwbmz2p] {
    font-weight: 700;
    text-align: right;
}

.lt-entry-chance.chance-high[b-sisfwbmz2p] { color: #4ade80; }
.lt-entry-chance.chance-mid[b-sisfwbmz2p]  { color: #facc15; }
.lt-entry-chance.chance-low[b-sisfwbmz2p]  { color: #fb923c; }
.lt-entry-chance.chance-rare[b-sisfwbmz2p] { color: #f87171; }

.lt-card-footer[b-sisfwbmz2p] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.lt-entry-count[b-sisfwbmz2p] {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
}

/* Stat labels inside cards (reuse) */
.stat-label[b-sisfwbmz2p] {
    font-size: 0.65rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.stat-value[b-sisfwbmz2p] {
    font-size: 0.875rem;
    color: var(--color-text-lighter);
    font-weight: 500;
}

/* Entry editor rows inside modal */
.entry-editor-row[b-sisfwbmz2p] {
    display: grid;
    grid-template-columns: 1fr 110px 130px 40px;
    gap: 0.75rem;
    align-items: end;
    padding: 0.75rem;
    background: rgba(245, 158, 11, 0.04);
    border: 1px solid rgba(245, 158, 11, 0.12);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.entry-remove-field[b-sisfwbmz2p] {
    align-self: end;
}

/* Modals */
.modal-overlay[b-sisfwbmz2p] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-dialog[b-sisfwbmz2p] {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.modal-dialog-wide[b-sisfwbmz2p] { max-width: 720px; }

.modal[b-sisfwbmz2p] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content[b-sisfwbmz2p] {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.modal-header[b-sisfwbmz2p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h2[b-sisfwbmz2p] {
    margin: 0;
    color: #f59e0b;
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
}

.modal-body[b-sisfwbmz2p] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.modal-footer[b-sisfwbmz2p] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.close-btn[b-sisfwbmz2p] {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.close-btn:hover[b-sisfwbmz2p] {
    color: var(--color-text-light);
    background: rgba(255, 255, 255, 0.08);
}

.form-row[b-sisfwbmz2p] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-row label[b-sisfwbmz2p] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.form-grid-2col[b-sisfwbmz2p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.effects-section-header[b-sisfwbmz2p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.effects-section-title[b-sisfwbmz2p] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f59e0b;
}

.btn-sm[b-sisfwbmz2p] {
    padding: 0.3rem 0.75rem !important;
    font-size: 0.8rem !important;
}

.btn-xs[b-sisfwbmz2p] {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.75rem !important;
    min-width: unset !important;
}

@media (max-width: 768px) {
    .lt-editor-container[b-sisfwbmz2p] { padding: 1rem; }
    .lt-grid[b-sisfwbmz2p] { grid-template-columns: 1fr; }
    .entry-editor-row[b-sisfwbmz2p] { grid-template-columns: 1fr 1fr; }
    .entry-remove-field[b-sisfwbmz2p] { grid-column: 1 / -1; }
    .form-grid-2col[b-sisfwbmz2p] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Game/Merchant.razor.rz.scp.css */
/* Merchant Page Styles - Fantasy RPG Theme */

/* ===== STORE CONTAINER ===== */
.store-container[b-p0opus3hoz] {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    position: relative;
    overflow: hidden;
}

.store-container[b-p0opus3hoz]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--color-border-active) 20%,
        var(--color-primary) 50%,
        var(--color-border-active) 80%,
        transparent 100%);
}

.store-container[b-p0opus3hoz]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--color-border-hover) 50%,
        transparent 100%);
}

/* ===== ALERT MESSAGES ===== */
.alert-message[b-p0opus3hoz] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-lg);
    animation: slideIn-b-p0opus3hoz 0.3s ease-out;
}

@keyframes slideIn-b-p0opus3hoz {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-p0opus3hoz] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border: 2px solid rgba(34, 197, 94, 0.4);
    color: var(--color-success-light);
}

.alert-success[b-p0opus3hoz]::before {
    content: '?';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 50%;
    font-weight: bold;
    flex-shrink: 0;
}

.alert-error[b-p0opus3hoz] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border: 2px solid rgba(239, 68, 68, 0.4);
    color: var(--color-danger-light);
}

.alert-error[b-p0opus3hoz]::before {
    content: '?';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(239, 68, 68, 0.2);
    border-radius: 50%;
    font-weight: bold;
    flex-shrink: 0;
}

.alert-icon[b-p0opus3hoz] {
    display: none; /* Using CSS pseudo-elements instead */
}

.alert-close[b-p0opus3hoz] {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: inherit;
    cursor: pointer;
    padding: var(--space-sm);
    opacity: 0.7;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-close:hover[b-p0opus3hoz] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.close-icon[b-p0opus3hoz] {
    font-size: 1.2rem;
    line-height: 1;
}

/* ===== TOAST NOTIFICATION ===== */
.toast-notification[b-p0opus3hoz] {
    position: fixed;
    top: 80px;
    right: var(--space-xl);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-xl);
    min-width: 300px;
    max-width: 450px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease-out;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.toast-notification.visible[b-p0opus3hoz] {
    opacity: 1;
    transform: translateX(0);
}

.toast-success[b-p0opus3hoz] {
    background: linear-gradient(135deg, var(--color-bg-elevated-alt), rgba(34, 197, 94, 0.15));
    border: 2px solid rgba(34, 197, 94, 0.5);
}

.toast-error[b-p0opus3hoz] {
    background: linear-gradient(135deg, var(--color-bg-elevated-alt), rgba(239, 68, 68, 0.15));
    border: 2px solid rgba(239, 68, 68, 0.5);
}

.toast-icon[b-p0opus3hoz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.toast-success .toast-icon[b-p0opus3hoz] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-light);
}

.toast-error .toast-icon[b-p0opus3hoz] {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-danger-light);
}

.toast-message[b-p0opus3hoz] {
    flex: 1;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.toast-success .toast-message[b-p0opus3hoz] {
    color: var(--color-success-light);
}

.toast-error .toast-message[b-p0opus3hoz] {
    color: var(--color-danger-light);
}

.toast-close[b-p0opus3hoz] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--space-xs);
    opacity: 0.7;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover[b-p0opus3hoz] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.toast-progress[b-p0opus3hoz] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    animation: toast-progress-b-p0opus3hoz 4s linear forwards;
}

.progress-success[b-p0opus3hoz] {
    background: linear-gradient(90deg, var(--color-success), var(--color-success-light));
}

.progress-error[b-p0opus3hoz] {
    background: linear-gradient(90deg, var(--color-danger), var(--color-danger-light));
}

@keyframes toast-progress-b-p0opus3hoz {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Toast mobile responsive */
@media (max-width: 640px) {
    .toast-notification[b-p0opus3hoz] {
        top: auto;
        bottom: var(--space-lg);
        left: var(--space-md);
        right: var(--space-md);
        min-width: auto;
        max-width: none;
        transform: translateY(100%);
    }

    .toast-notification.visible[b-p0opus3hoz] {
        transform: translateY(0);
    }
}

/* ===== LOADING CONTAINER ===== */
.loading-container[b-p0opus3hoz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    min-height: 400px;
    color: var(--color-text-secondary);
}

.spinner[b-p0opus3hoz] {
    width: 70px;
    height: 70px;
    border: 4px solid rgba(255, 215, 0, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-p0opus3hoz 1s linear infinite;
    box-shadow: 0 0 20px var(--color-border-hover);
}

@keyframes spin-b-p0opus3hoz {
    to { transform: rotate(360deg); }
}

.loading-text[b-p0opus3hoz] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    animation: pulse-b-p0opus3hoz 1.5s ease-in-out infinite;
}

@keyframes pulse-b-p0opus3hoz {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ===== EMPTY STATE ===== */
.empty-state[b-p0opus3hoz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    min-height: 350px;
    padding: var(--space-3xl);
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.03), transparent 70%);
    border-radius: var(--radius-2xl);
}

.empty-state-icon[b-p0opus3hoz] {
    font-size: 5rem !important;
    color: var(--color-text-tertiary);
    opacity: 0.4;
}

.warning-icon[b-p0opus3hoz] {
    color: var(--color-warning) !important;
    opacity: 0.8;
}

.empty-state-title[b-p0opus3hoz] {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.empty-state-text[b-p0opus3hoz] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    max-width: 400px;
}

/* ===== PAGE FOOTER ===== */
.page-footer[b-p0opus3hoz] {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    flex-wrap: wrap;
    justify-content: center;
}

/* ===== BUTTON STYLES ===== */
.btn[b-p0opus3hoz] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-xl);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all var(--transition-slow);
    text-decoration: none;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.btn[b-p0opus3hoz]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover[b-p0opus3hoz]::before {
    left: 100%;
}

.btn-primary[b-p0opus3hoz] {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: var(--color-gray-900);
    box-shadow: 
        0 4px 15px var(--color-border-active),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-primary:hover[b-p0opus3hoz] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    transform: translateY(-3px);
    box-shadow: 
        0 8px 25px var(--color-border-active),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-secondary[b-p0opus3hoz] {
    background: rgba(51, 65, 85, 0.6);
    border-color: var(--color-border-active);
    color: var(--color-primary);
    backdrop-filter: blur(5px);
}

.btn-secondary:hover[b-p0opus3hoz] {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.btn-icon[b-p0opus3hoz] {
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
}

/* ===== TABLET RESPONSIVE ===== */
@media (max-width: 1024px) {
    .store-container[b-p0opus3hoz] {
        padding: var(--space-lg);
    }

    .page-footer[b-p0opus3hoz] {
        justify-content: center;
    }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 640px) {
    .store-container[b-p0opus3hoz] {
        padding: var(--space-md);
        border-radius: var(--radius-lg);
    }

    .alert-message[b-p0opus3hoz] {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }

    .alert-close[b-p0opus3hoz] {
        position: absolute;
        top: var(--space-sm);
        right: var(--space-sm);
    }

    .alert-message[b-p0opus3hoz] {
        position: relative;
        padding-top: var(--space-xl);
    }

    .loading-container[b-p0opus3hoz] {
        min-height: 300px;
    }

    .empty-state[b-p0opus3hoz] {
        min-height: 250px;
        padding: var(--space-xl);
    }

    .empty-state-icon[b-p0opus3hoz] {
        font-size: 3.5rem !important;
    }

    .empty-state-title[b-p0opus3hoz] {
        font-size: var(--font-size-xl);
    }

    .page-footer[b-p0opus3hoz] {
        flex-direction: column;
        gap: var(--space-md);
    }

    .btn[b-p0opus3hoz] {
        width: 100%;
        justify-content: center;
        padding: var(--space-lg);
    }
}

/* ===== PHASE 1B - AFFORDABILITY STATE UTILITIES ===== */

.price-affordable[b-p0opus3hoz] { color: #15803d; font-weight: 600; }
.price-unaffordable[b-p0opus3hoz] { color: #dc2626; font-weight: 600; }

/* ===== PHASE 1E - MERCHANT IDENTITY (now in left column portrait card) ===== */
/* Legacy identity-header styles removed — portrait card uses game-shared.css */

/* ===== PHASE 1D - COMPARE POPOVER ===== */

.merchant-modal-overlay[b-p0opus3hoz] {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.compare-popover[b-p0opus3hoz] {
    background: #1e293b;
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 12px;
    padding: 1.5rem;
    width: 480px;
    max-width: 94vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.compare-header[b-p0opus3hoz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffd700;
    font-family: Cinzel, serif;
    font-size: 1rem;
    margin-bottom: 1rem;
    justify-content: space-between;
}

.compare-header-title[b-p0opus3hoz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.compare-cols[b-p0opus3hoz] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: start;
}

.compare-col-label[b-p0opus3hoz] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 4px;
}

.compare-item-name[b-p0opus3hoz] {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
}

.compare-empty[b-p0opus3hoz] {
    color: #475569;
    font-style: italic;
    font-size: 0.85rem;
}

.compare-divider[b-p0opus3hoz] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    padding-top: 1.2rem;
}

.compare-stat-rows[b-p0opus3hoz] {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.5rem;
}

.compare-stat-row[b-p0opus3hoz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.85rem;
}

.compare-stat-label[b-p0opus3hoz] {
    color: #94a3b8;
}

.compare-stat-values[b-p0opus3hoz] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.compare-val[b-p0opus3hoz] {
    font-size: 0.8rem;
    color: #64748b;
    min-width: 60px;
    text-align: right;
}

.diff-positive[b-p0opus3hoz] { color: #22c55e; font-weight: 700; }
.diff-negative[b-p0opus3hoz] { color: #ef4444; font-weight: 700; }
.diff-neutral[b-p0opus3hoz] { color: #64748b; }
.diff-new[b-p0opus3hoz] { color: #a78bfa; font-weight: 700; }

/* btn-compare in tab action buttons */
[b-p0opus3hoz] .btn-compare {
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.3);
    min-width: unset !important;
    padding: 4px 8px !important;
    border-radius: 6px;
    transition: all 0.2s;
}

[b-p0opus3hoz] .btn-compare:hover {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.5);
}

/* ===== MERCHANT TAB BAR (tabs + toolbar inline) ===== */
.merchant-tab-bar[b-p0opus3hoz] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

    .merchant-tab-bar > :first-child[b-p0opus3hoz] {
        flex: 1;
        min-width: 0;
    }

/* ===== MERCHANT SHOP TOOLBAR ===== */
.merchant-shop-toolbar[b-p0opus3hoz] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
    padding-bottom: var(--space-xs);
}

/* ===== SLOT SELECTION - LOADOUT PANEL (Phase 2D) ===== */
[b-p0opus3hoz] .slot-normal {
    cursor: pointer;
    transition: all 0.15s;
}

[b-p0opus3hoz] .slot-selected {
    border: 1px solid rgba(255,215,0,0.5) !important;
    background: rgba(255,215,0,0.05) !important;
    cursor: pointer;
}

/* ===== ITEM GRID HIGHLIGHT (Phase 2D) ===== */
[b-p0opus3hoz] .item-slot-highlighted {
    border: 2px solid rgba(255,215,0,0.4) !important;
    animation: slot-pulse-b-p0opus3hoz 1.8s ease-in-out infinite;
}

[b-p0opus3hoz] .item-slot-dimmed {
    opacity: 0.35;
    filter: grayscale(0.5);
    pointer-events: none;
}

@keyframes slot-pulse-b-p0opus3hoz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
    50%       { box-shadow: 0 0 0 4px rgba(255,215,0,0.15); }
}

/* ===== DENSITY GRID (Phase 3A) ===== */
[b-p0opus3hoz] .item-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
}

[b-p0opus3hoz] .item-grid.item-grid-dense {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    [b-p0opus3hoz] .item-grid,
    [b-p0opus3hoz] .item-grid.item-grid-dense {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    [b-p0opus3hoz] .item-grid,
    [b-p0opus3hoz] .item-grid.item-grid-dense {
        grid-template-columns: 1fr;
    }
}

/* ===== BUY / SELL CONFIRMATION POPOVER (Phase 3B & 3C) ===== */
.buy-confirm-popover[b-p0opus3hoz] {
    background: #1e293b;
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 12px;
    padding: 1.5rem;
    width: 340px;
    max-width: 94vw;
}

.buy-confirm-title[b-p0opus3hoz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffd700;
    font-family: Cinzel, serif;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.buy-confirm-item-name[b-p0opus3hoz] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sell-confirm-qty[b-p0opus3hoz] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.buy-gold-summary[b-p0opus3hoz] { margin-bottom: 1.25rem; }

.gold-row[b-p0opus3hoz] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.875rem;
    color: #94a3b8;
}

.gold-row-cost[b-p0opus3hoz] { color: #ef4444; }

.gold-row-gain[b-p0opus3hoz] { color: #22c55e; }

.gold-row-after[b-p0opus3hoz] {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 10px;
    margin-top: 4px;
    font-weight: 600;
    color: #e2e8f0;
}

.gold-ok[b-p0opus3hoz] { color: #22c55e; }
.gold-danger[b-p0opus3hoz] { color: #ef4444; }

.buy-confirm-actions[b-p0opus3hoz] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* ===== RESPONSIVE AUDIT (Phase 3D) ===== */
@media (max-width: 1024px) {
    .merchant-main-layout[b-p0opus3hoz] {
        flex-direction: column;
    }

    .merchant-loadout-column[b-p0opus3hoz] {
        width: 100%;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
    }

    .merchant-right-panel[b-p0opus3hoz] { width: 100%; }
}

@media (max-width: 600px) {
    .buy-confirm-popover[b-p0opus3hoz] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 16px 16px 0 0;
        width: 100%;
        max-width: 100%;
    }

    .merchant-modal-overlay[b-p0opus3hoz] {
        align-items: flex-end;
    }
}
/* /Components/Pages/Game/Messages.razor.rz.scp.css */
.messages-page[b-togmvom9vh] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
    height: calc(100vh - 4rem);
}

/* Hero Header */
.hero-header[b-togmvom9vh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    flex-shrink: 0;
}

.hero-left[b-togmvom9vh] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.hero-icon[b-togmvom9vh] {
    font-size: 2.5rem;
    color: var(--color-primary);
}

.hero-info h1[b-togmvom9vh] {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-subtitle[b-togmvom9vh] {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin: 0.375rem 0 0 0;
}

.hero-right[b-togmvom9vh] {
    display: flex;
    gap: 0.75rem;
}

/* Split View Container */
.messages-container[b-togmvom9vh] {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.messages-container.no-selection[b-togmvom9vh] {
    grid-template-columns: 1fr;
}

.messages-container.has-selection .conversations-panel[b-togmvom9vh] {
    display: block;
}

.messages-container.no-selection .messages-panel[b-togmvom9vh] {
    display: flex;
}

/* Panels */
.conversations-panel[b-togmvom9vh],
.messages-panel[b-togmvom9vh] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Empty State */
.empty-state[b-togmvom9vh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 4rem 2rem;
    height: 100%;
}

.empty-state .material-icons[b-togmvom9vh] {
    font-size: 5rem;
    color: var(--color-text-tertiary);
}

.empty-state p[b-togmvom9vh] {
    color: var(--color-text-light);
    font-size: 1.2rem;
    margin: 0;
    text-align: center;
}

/* Buttons */
.btn-secondary[b-togmvom9vh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 8px;
    color: var(--color-text-light);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary .material-icons[b-togmvom9vh] {
    font-size: 1.125rem;
}

.btn-secondary:hover[b-togmvom9vh] {
    background: rgba(100, 116, 139, 0.3);
    border-color: rgba(100, 116, 139, 0.4);
}

/* Responsive */
@media (max-width: 1024px) {
    .messages-container[b-togmvom9vh] {
        grid-template-columns: 1fr;
    }

    .messages-container.has-selection .conversations-panel[b-togmvom9vh] {
        display: none;
    }

    .messages-container.no-selection .messages-panel[b-togmvom9vh] {
        display: none;
    }
}

@media (max-width: 768px) {
    .messages-page[b-togmvom9vh] {
        padding: 1rem;
        height: calc(100vh - 2rem);
    }

    .hero-header[b-togmvom9vh] {
        padding: 1rem 1.25rem;
    }

    .hero-icon[b-togmvom9vh] {
        font-size: 2rem;
    }

    .hero-info h1[b-togmvom9vh] {
        font-size: 1.5rem;
    }

    .messages-container[b-togmvom9vh] {
        gap: 1rem;
    }
}
/* /Components/Pages/Game/MultiplayerAdventure.razor.rz.scp.css */
/* Lourdin.Web/Components/Pages/MultiplayerAdventure.razor.css */
/* CSS Isolation for Multiplayer Adventures Page */
/* Uses Design System Tokens from design-system.css */

.multiplayer-container[b-eqihb5ltji] {
    max-width: var(--page-max-width-md);
    margin: 0 auto;
    padding: var(--page-padding-x);
}


/* Selection View */
.multiplayer-selection[b-eqihb5ltji] {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-3xl);
    overflow: hidden;
}

.selection-header[b-eqihb5ltji] {
    background: linear-gradient(135deg, var(--color-border-base) 0%, rgba(218, 165, 32, 0.08) 100%);
    padding: var(--space-2xl);
    text-align: center;
    border-bottom: 1px solid var(--color-border-base);
}

.selection-title[b-eqihb5ltji] {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin: 0 0 var(--space-sm) 0;
}

.selection-subtitle[b-eqihb5ltji] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin: 0;
}

.multiplayer-tabs[b-eqihb5ltji] {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--color-border-subtle);
}

.multiplayer-tab[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 1px solid transparent;
    background: rgba(0, 0, 0, 0.3);
    color: var(--color-text-secondary);
}

.multiplayer-tab:hover[b-eqihb5ltji] {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
}

.multiplayer-tab.active[b-eqihb5ltji] {
    background: var(--color-border-base);
    border-color: var(--color-border-hover);
    color: var(--color-primary);
}

.create-section[b-eqihb5ltji], .saved-section[b-eqihb5ltji], .completed-section[b-eqihb5ltji] {
    padding: var(--space-xl);
}

.adventure-grid[b-eqihb5ltji] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.adventure-card[b-eqihb5ltji] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    cursor: pointer;
    transition: all var(--transition-slow);
}

.adventure-card:hover[b-eqihb5ltji] {
    transform: translateY(-4px);
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-lg), var(--shadow-gold);
}

.adventure-card-title[b-eqihb5ltji] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-sm) 0;
}

.adventure-card-description[b-eqihb5ltji] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.5;
}

.adventure-card-meta[b-eqihb5ltji] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
}

.meta-item[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.empty-adventures[b-eqihb5ltji], .empty-saved[b-eqihb5ltji], .empty-completed[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-3xl);
    color: var(--color-text-tertiary);
    text-align: center;
}

.empty-saved-hint[b-eqihb5ltji], .empty-completed-hint[b-eqihb5ltji] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.join-code-container[b-eqihb5ltji] {
    padding: var(--space-2xl);
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}

.join-code-title[b-eqihb5ltji] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-xl) 0;
}

.join-code-input[b-eqihb5ltji] {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-hover);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    font-size: var(--font-size-2xl);
    font-family: var(--font-display);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: var(--space-lg);
}

.join-code-input:focus[b-eqihb5ltji] {
    outline: none;
    border-color: var(--color-border-active);
    box-shadow: var(--shadow-gold);
}

.join-code-input[b-eqihb5ltji]::placeholder {
    color: var(--color-text-muted);
    letter-spacing: 0.3em;
}

.btn-join[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    color: white;
    border: none;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-join:hover:not(:disabled)[b-eqihb5ltji] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
}

.btn-join:disabled[b-eqihb5ltji] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Saved & Completed Adventures Lists */
.loading-saved[b-eqihb5ltji], .loading-completed[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--color-text-secondary);
}

.saved-adventures-list[b-eqihb5ltji], .completed-adventures-list[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.saved-adventure-card[b-eqihb5ltji], .completed-adventure-card[b-eqihb5ltji] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.saved-adventure-card:hover[b-eqihb5ltji], .completed-adventure-card:hover[b-eqihb5ltji] {
    border-color: var(--color-border-active);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.saved-adventure-header[b-eqihb5ltji], .completed-adventure-header[b-eqihb5ltji] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.saved-adventure-info[b-eqihb5ltji], .completed-adventure-info[b-eqihb5ltji] {
    flex: 1;
}

.saved-adventure-title[b-eqihb5ltji], .completed-adventure-title[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 0.5rem 0;
}

.saved-adventure-meta[b-eqihb5ltji], .completed-adventure-meta[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.saved-meta-divider[b-eqihb5ltji], .completed-meta-divider[b-eqihb5ltji] {
    margin: 0 0.25rem;
}

.saved-adventure-actions[b-eqihb5ltji], .completed-adventure-actions[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.saved-date[b-eqihb5ltji], .completed-date[b-eqihb5ltji] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.btn-rejoin[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-rejoin:hover[b-eqihb5ltji] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.saved-adventure-players[b-eqihb5ltji], .completed-adventure-players[b-eqihb5ltji] {
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    margin: 0.75rem 0;
}

.players-label[b-eqihb5ltji] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

.player-badges[b-eqihb5ltji] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.player-badge[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
}

.player-badge.connected[b-eqihb5ltji] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.player-badge-avatar[b-eqihb5ltji] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-badge-info[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.player-badge-name[b-eqihb5ltji] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.player-badge-status[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
}

.host-tag[b-eqihb5ltji] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-gray-900);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

.connected-tag[b-eqihb5ltji] {
    color: var(--color-success);
    font-size: 1rem;
    line-height: 1;
}

.saved-adventure-code[b-eqihb5ltji], .completed-adventure-code[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid var(--color-border-hover);
    border-radius: 6px;
    margin-top: 0.75rem;
}

.code-label[b-eqihb5ltji] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.code-value[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.2em;
}

.btn-copy-small[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: 1px solid var(--color-border-active);
    color: var(--color-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}

.btn-copy-small:hover[b-eqihb5ltji] {
    background: rgba(255, 215, 0, 0.1);
}

/* Lobby View */
.multiplayer-lobby[b-eqihb5ltji] {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 16px;
    overflow: hidden;
}

.lobby-header[b-eqihb5ltji] {
    background: linear-gradient(135deg, var(--color-border-base) 0%, rgba(218, 165, 32, 0.08) 100%);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    flex-wrap: wrap;
}

.lobby-title[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem 0;
}

.lobby-description[b-eqihb5ltji] {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    margin: 0 0 0.75rem 0;
}

.lobby-status[b-eqihb5ltji] {
    margin-top: 0.5rem;
}

.status-badge[b-eqihb5ltji] {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.waiting-for-players[b-eqihb5ltji] {
    background: rgba(245, 158, 11, 0.2);
    color: var(--color-warning-bright);
}

.status-badge.in-progress[b-eqihb5ltji],
.status-badge.in-combat[b-eqihb5ltji] {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-info-light);
}

.status-badge.waiting-for-ready-check[b-eqihb5ltji] {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.status-badge.completed[b-eqihb5ltji] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-light);
}

/* A lost battle failed the run (decision 4A); the tint is --color-danger at 20% */
.status-badge.failed[b-eqihb5ltji] {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-danger-light);
}

.lobby-code-section[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.lobby-code-label[b-eqihb5ltji] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
}

.lobby-code-value[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.2em;
}

.btn-copy[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: 1px solid var(--color-border-active);
    color: var(--color-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy:hover[b-eqihb5ltji] {
    background: rgba(255, 215, 0, 0.1);
}

/* Player List */
.player-list[b-eqihb5ltji] {
    padding: 1rem;
}

.player-list-header[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
}

.player-slots[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.player-slot[b-eqihb5ltji] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.player-slot:hover[b-eqihb5ltji] {
    border-color: var(--color-border-hover);
}

.player-slot.host[b-eqihb5ltji] {
    border-left: 3px solid var(--color-primary);
}

.player-slot.ready[b-eqihb5ltji] {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.05);
}

.player-slot-info[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.player-avatar[b-eqihb5ltji] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-avatar.warrior[b-eqihb5ltji] {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-danger-lighter);
}

.player-avatar.wizard[b-eqihb5ltji] {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-info-lighter);
}

.player-avatar.ranger[b-eqihb5ltji] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-lighter);
}

.player-avatar.rogue[b-eqihb5ltji] {
    background: rgba(99, 102, 241, 0.2);
    color: var(--color-rogue-light);
}

.player-avatar.paladin[b-eqihb5ltji] {
    background: rgba(245, 158, 11, 0.2);
    color: var(--color-warning-light);
}

.player-avatar.bard[b-eqihb5ltji] {
    background: rgba(236, 72, 153, 0.2);
    color: var(--color-bard-light);
}

.player-details[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
}

.player-slot-name[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: var(--color-text-primary);
}

.player-slot-class[b-eqihb5ltji] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.player-slot-status[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.connection-dot[b-eqihb5ltji] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.connection-dot.connected[b-eqihb5ltji] {
    background: var(--color-success);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.connection-dot.disconnected[b-eqihb5ltji] {
    background: var(--color-danger);
}

.ready-badge[b-eqihb5ltji] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.not-ready-badge[b-eqihb5ltji] {
    background: rgba(100, 116, 139, 0.2);
    color: var(--color-text-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.host-badge[b-eqihb5ltji] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-gray-900);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Lobby Actions */
.lobby-actions[b-eqihb5ltji] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid var(--color-border-subtle);
}

.btn-primary-action[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary-action:hover:not(:disabled)[b-eqihb5ltji] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.btn-primary-action:disabled[b-eqihb5ltji] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary-action[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--color-border-active);
    color: var(--color-primary);
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary-action:hover[b-eqihb5ltji] {
    background: rgba(255, 215, 0, 0.1);
}

.btn-ready[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-ready:hover[b-eqihb5ltji] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

.btn-ready.active[b-eqihb5ltji] {
    background: linear-gradient(135deg, var(--color-success-dark), #15803d);
}

.btn-leave[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-danger-light);
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}

.btn-leave:hover[b-eqihb5ltji] {
    background: rgba(239, 68, 68, 0.1);
}

/* Dialog Styles */
.dialog-title[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.invite-form[b-eqihb5ltji] {
    padding: 1rem 0;
}

/* Invite Friends Dialog */
.invite-friends-content[b-eqihb5ltji] {
    padding: 1rem 0;
}

.loading-state[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    color: var(--color-text-secondary);
}

.empty-state[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    color: var(--color-text-tertiary);
}

.empty-state p[b-eqihb5ltji] {
    margin: 0;
}

.hint-text[b-eqihb5ltji] {
    font-size: 0.85rem;
    color: #475569;
}

.friends-list-invite[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.friends-list-invite[b-eqihb5ltji]::-webkit-scrollbar {
    width: 6px;
}

.friends-list-invite[b-eqihb5ltji]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.friends-list-invite[b-eqihb5ltji]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: 3px;
}

.friends-list-invite[b-eqihb5ltji]::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-active);
}

.friend-card-invite[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.friend-card-invite:hover[b-eqihb5ltji] {
    border-color: var(--color-border-hover);
    background: rgba(0, 0, 0, 0.3);
}

.friend-card-invite.selected[b-eqihb5ltji] {
    border-color: var(--color-border-active);
    background: rgba(255, 215, 0, 0.05);
}

.friend-card-header[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.friend-avatar[b-eqihb5ltji] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 215, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.friend-info[b-eqihb5ltji] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.friend-name[b-eqihb5ltji] {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.95rem;
}

.friend-status[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.friend-status.online[b-eqihb5ltji] {
    color: var(--color-success);
}

.friend-status.offline[b-eqihb5ltji] {
    color: var(--color-text-secondary);
}

.status-dot[b-eqihb5ltji] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.friend-status.online .status-dot[b-eqihb5ltji] {
    background: var(--color-success);
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.6);
}

.friend-status.offline .status-dot[b-eqihb5ltji] {
    background: var(--color-text-tertiary);
}

.friend-card-action[b-eqihb5ltji] {
    display: flex;
    align-items: center;
    margin-left: 0.75rem;
}

.friend-card-action input[type="checkbox"][b-eqihb5ltji] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.invite-message-section[b-eqihb5ltji] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-subtle);
}

.invite-message-section label[b-eqihb5ltji] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.invite-message-section textarea[b-eqihb5ltji] {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-hover);
    border-radius: 6px;
    padding: 0.75rem;
    color: var(--color-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 0.9rem;
    resize: vertical;
    transition: all 0.2s ease;
}

.invite-message-section textarea:focus[b-eqihb5ltji] {
    outline: none;
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 12px var(--color-border-base);
    background: rgba(0, 0, 0, 0.4);
}

.invite-message-section textarea[b-eqihb5ltji]::placeholder {
    color: #475569;
}

.char-count[b-eqihb5ltji] {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    text-align: right;
}

/* Responsive */
@media (max-width: 768px) {
    .multiplayer-container[b-eqihb5ltji] {
        padding: 1rem;
    }
    
    .lobby-header[b-eqihb5ltji] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .lobby-code-section[b-eqihb5ltji] {
        align-items: flex-start;
        width: 100%;
        padding-top: 1rem;
        border-top: 1px solid var(--color-border-subtle);
    }
    
    .lobby-title[b-eqihb5ltji] {
        font-size: 1.25rem;
    }
    
    .adventure-grid[b-eqihb5ltji] {
        grid-template-columns: 1fr;
    }
    
    .lobby-actions[b-eqihb5ltji] {
        flex-direction: column;
    }
    
    .btn-leave[b-eqihb5ltji] {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    
    .selection-title[b-eqihb5ltji] {
        font-size: 1.4rem;
    }
    
    .multiplayer-tabs[b-eqihb5ltji] {
        flex-direction: column;
    }
    
    .saved-adventure-header[b-eqihb5ltji], .completed-adventure-header[b-eqihb5ltji] {
        flex-direction: column;
        align-items: flex-start;
    }

    .saved-adventure-actions[b-eqihb5ltji], .completed-adventure-actions[b-eqihb5ltji] {
        align-items: flex-start;
        width: 100%;
    }

    .btn-rejoin[b-eqihb5ltji] {
        width: 100%;
        justify-content: center;
    }

    .player-badges[b-eqihb5ltji] {
        flex-direction: column;
    }
}

/* REST Event System Styles */

.rest-decision-overlay[b-eqihb5ltji] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-eqihb5ltji 0.3s ease-in-out;
}

.rest-decision-card[b-eqihb5ltji] {
    background: linear-gradient(145deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 2px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    max-width: 700px;
    width: 90%;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    animation: slideUp-b-eqihb5ltji 0.4s ease-out;
}

.rest-decision-header[b-eqihb5ltji] {
    text-align: center;
    padding: var(--space-2xl);
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.15) 0%, rgba(255, 215, 0, 0.08) 100%);
    border-bottom: 1px solid var(--color-border-base);
}

.rest-decision-header h2[b-eqihb5ltji] {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: var(--space-md) 0 var(--space-sm) 0;
}

.rest-decision-header p[b-eqihb5ltji] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin: 0;
}

.rest-decision-choices[b-eqihb5ltji] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
    padding: var(--space-2xl);
}

.rest-choice-card[b-eqihb5ltji] {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rest-choice-card:hover[b-eqihb5ltji] {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.rest-choice-card h3[b-eqihb5ltji] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: var(--space-md) 0 var(--space-sm) 0;
}

.rest-choice-card p[b-eqihb5ltji] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.6;
}

.vote-counter[b-eqihb5ltji] {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-bg-base);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    margin-top: var(--space-sm);
}

.rest-decision-footer[b-eqihb5ltji] {
    display: flex;
    justify-content: center;
    padding: var(--space-lg) var(--space-2xl) var(--space-2xl);
    border-top: 1px solid var(--color-border-subtle);
}

@keyframes fadeIn-b-eqihb5ltji {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-eqihb5ltji {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Phone-tier gate (audit B8): multiplayer needs the combat board, which renders at 960px and up. */
.mp-phone-gate[b-eqihb5ltji] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated-alt);
}

.mp-phone-gate-icon[b-eqihb5ltji] {
    color: var(--color-primary);
    font-size: 28px;
}

.mp-phone-gate-title[b-eqihb5ltji] {
    display: block;
    font-family: var(--font-display);
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.mp-phone-gate-text[b-eqihb5ltji] {
    margin: 0;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}
/* /Components/Pages/Game/PartyChronicle.razor.rz.scp.css */
:root[b-cdky6d6si2] {
    --color-gold: #ffd700;
    --color-primary: #daa520;
    --color-bg-dark: #0f172a;
    --color-bg-card: #1e293b;
    --color-text-primary: #e2e8f0;
    --color-text-secondary: #94a3b8;
    --color-border: rgba(255, 215, 0, 0.2);
}

.page-header[b-cdky6d6si2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.page-header h2[b-cdky6d6si2] {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: var(--color-gold);
    margin: 0;
}

.page-subtitle[b-cdky6d6si2] {
    color: var(--color-text-secondary);
    font-size: 1rem;
    margin: 0;
}

.loading-container[b-cdky6d6si2] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.empty-state[b-cdky6d6si2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--color-bg-card), var(--color-bg-dark));
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 3rem 2rem;
    gap: 1rem;
    text-align: center;
}

.empty-state-icon[b-cdky6d6si2] {
    font-size: 3rem;
    color: var(--color-text-secondary);
    opacity: 0.5;
}

.empty-state h3[b-cdky6d6si2] {
    font-family: 'Cinzel', serif;
    color: var(--color-text-primary);
    margin: 0;
}

.empty-state p[b-cdky6d6si2] {
    color: var(--color-text-secondary);
    margin: 0;
}

.adventure-card[b-cdky6d6si2] {
    background: linear-gradient(145deg, var(--color-bg-card), var(--color-bg-dark));
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.card-header[b-cdky6d6si2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.card-header h3[b-cdky6d6si2] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: var(--color-gold);
    margin: 0;
}

.card-date[b-cdky6d6si2] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
}

.card-meta[b-cdky6d6si2] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.meta-item[b-cdky6d6si2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.meta-death[b-cdky6d6si2] {
    color: #ef4444;
}

.waypoint-timeline[b-cdky6d6si2] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    padding-left: 0;
    border-left: 2px solid var(--color-border);
}

.timeline-node[b-cdky6d6si2] {
    padding: 0.75rem 1rem;
    border-left: 3px solid transparent;
    position: relative;
}

.timeline-node[b-cdky6d6si2]::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 1.5rem;
    width: 12px;
    height: 12px;
    background: var(--color-border);
    border-radius: 50%;
}

.timeline-node.boss[b-cdky6d6si2] {
    border-left-color: var(--color-gold);
    background: rgba(255, 215, 0, 0.05);
}

.timeline-node.boss[b-cdky6d6si2]::before {
    background: var(--color-gold);
}

.waypoint-name[b-cdky6d6si2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.boss-icon[b-cdky6d6si2] {
    color: var(--color-gold);
}

.narrative-text[b-cdky6d6si2] {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.no-data[b-cdky6d6si2] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    margin: 0;
    opacity: 0.7;
}

.card-footer[b-cdky6d6si2] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.generation-note[b-cdky6d6si2] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}
/* /Components/Pages/Game/PetManagement.razor.rz.scp.css */
.pets-locked-panel[b-f30u39tu49] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    gap: 0.5rem;
}

/* Page layout */
.pets-page[b-f30u39tu49] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.pets-page-header[b-f30u39tu49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.pets-header-left[b-f30u39tu49] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pets-page-title[b-f30u39tu49] {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0;
}

.pets-page-subtitle[b-f30u39tu49] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0.15rem 0 0;
}

/* Panels */
.pets-panel[b-f30u39tu49] {
    background: linear-gradient(160deg, rgba(30,41,59,0.85), rgba(15,23,42,0.9));
    border: 1px solid rgba(148,163,184,0.15);
    border-radius: 12px;
    padding: 1.25rem;
    height: 100%;
}

.pets-active-panel[b-f30u39tu49] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pets-panel-title[b-f30u39tu49] {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-warning-bright);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(251,191,36,0.2);
    padding-bottom: 0.5rem;
}

/* Active pet portrait */
.active-pet-portrait-wrapper[b-f30u39tu49] {
    position: relative;
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
}

.active-pet-portrait-fallback[b-f30u39tu49] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.active-pet-portrait-img[b-f30u39tu49] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.active-pet-rarity-glow[b-f30u39tu49] {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
}

.active-pet-rarity-glow.rarity-common[b-f30u39tu49]   { box-shadow: inset 0 0 0 2px rgba(148,163,184,0.4); }
.active-pet-rarity-glow.rarity-uncommon[b-f30u39tu49] { box-shadow: inset 0 0 0 2px rgba(74,222,128,0.5); }
.active-pet-rarity-glow.rarity-rare[b-f30u39tu49]     { box-shadow: inset 0 0 0 2px rgba(96,165,250,0.6); }
.active-pet-rarity-glow.rarity-epic[b-f30u39tu49]     { box-shadow: inset 0 0 0 2px rgba(192,132,252,0.7); }
.active-pet-rarity-glow.rarity-legendary[b-f30u39tu49] {
    box-shadow: inset 0 0 0 2px rgba(251,191,36,0.8), 0 0 20px rgba(251,191,36,0.3);
    animation: legendaryGlow-b-f30u39tu49 2.5s ease-in-out infinite;
}

@keyframes legendaryGlow-b-f30u39tu49 {
    0%, 100% { box-shadow: inset 0 0 0 2px rgba(251,191,36,0.8), 0 0 20px rgba(251,191,36,0.3); }
    50%       { box-shadow: inset 0 0 0 2px rgba(251,191,36,1.0), 0 0 35px rgba(251,191,36,0.5); }
}

/* Active pet info */
.active-pet-name-row[b-f30u39tu49] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.active-pet-name[b-f30u39tu49] {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0;
    text-align: center;
}

.active-pet-stage[b-f30u39tu49] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #94a3b8;
}

.stage-gem[b-f30u39tu49] { font-size: 0.75rem; }
.stage-gem.stage-1[b-f30u39tu49] { color: #94a3b8; }
.stage-gem.stage-2[b-f30u39tu49] { color: #22d3ee; }
.stage-gem.stage-3[b-f30u39tu49] { color: var(--color-warning-bright); }

/* XP bar */
.active-pet-xp-section[b-f30u39tu49] {
    width: 100%;
}

.xp-label-row[b-f30u39tu49] {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #94a3b8;
    margin-bottom: 4px;
}

.xp-bar[b-f30u39tu49] {
    width: 100%;
    height: 6px;
    background: rgba(148,163,184,0.15);
    border-radius: 3px;
    overflow: hidden;
}

.xp-bar-fill[b-f30u39tu49] {
    height: 100%;
    background: linear-gradient(90deg, #60a5fa, #93c5fd);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Stats */
.active-pet-stats[b-f30u39tu49] {
    width: 100%;
}

.stats-grid[b-f30u39tu49] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px;
}

.stat-chip[b-f30u39tu49] {
    background: rgba(96,165,250,0.12);
    border: 1px solid rgba(96,165,250,0.3);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.7rem;
    color: #93c5fd;
    font-weight: 600;
}

.affinity-banner[b-f30u39tu49] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #fde68a;
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.2);
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 4px;
}

/* Evolution panel */
.evolve-panel[b-f30u39tu49] {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.evolve-title[b-f30u39tu49] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-warning-bright);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.evolve-info[b-f30u39tu49] {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    flex-wrap: wrap;
    gap: 4px;
}

/* No active pet */
.no-active-pet[b-f30u39tu49] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
    flex: 1;
}

/* Owned pets grid */
.owned-pets-grid[b-f30u39tu49] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 2px;
}

/* Discovery grid */
.discovery-grid[b-f30u39tu49] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 2px;
}

.discovery-card[b-f30u39tu49] {
    background: rgba(15,23,42,0.6);
    border: 1px solid rgba(148,163,184,0.15);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.discovery-card.discovery-locked[b-f30u39tu49] {
    opacity: 0.75;
}

.discovery-silhouette[b-f30u39tu49] {
    aspect-ratio: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,0.8);
    overflow: hidden;
}

.discovery-silhouette-img[b-f30u39tu49] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0) brightness(0.35);
}

.discovery-info[b-f30u39tu49] {
    padding: 5px 7px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.discovery-rarity[b-f30u39tu49] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.discovery-hint[b-f30u39tu49] {
    font-size: 0.62rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Companion quest panel */
.companion-quest-panel[b-f30u39tu49] {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: rgba(245, 158, 11, 0.06);
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.companion-quest-title[b-f30u39tu49] {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: var(--color-warning-bright);
    text-transform: uppercase;
    font-family: 'Cinzel', serif;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.companion-quest-hint[b-f30u39tu49] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
    line-height: 1.3;
}
/* /Components/Pages/Game/PetShop.razor.rz.scp.css */
/* ============================================================
   PET SHOP — dark RPG aesthetic, mirrors PetManagement.razor.css
   ============================================================ */

/* Locked / no-character panel (re-uses pets-locked-panel class from PetManagement) */
.pets-locked-panel[b-l33gtl3fpp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    gap: 0.5rem;
}

/* ── Page layout ─────────────────────────────────────────── */

.shop-page[b-l33gtl3fpp] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.shop-page-header[b-l33gtl3fpp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.shop-header-left[b-l33gtl3fpp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.shop-page-title[b-l33gtl3fpp] {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0;
}

.shop-page-subtitle[b-l33gtl3fpp] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0.15rem 0 0;
}

/* ── Premium banner ──────────────────────────────────────── */

.premium-banner[b-l33gtl3fpp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, rgba(161,89,14,0.25), rgba(120,53,15,0.2));
    border: 1px solid rgba(251,191,36,0.35);
    border-radius: 10px;
    color: #fde68a;
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.premium-banner strong[b-l33gtl3fpp] {
    color: var(--color-warning-bright);
}

/* ── Shop grid ───────────────────────────────────────────── */

.shop-grid[b-l33gtl3fpp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

/* ── Shop card ───────────────────────────────────────────── */

.shop-pet-card[b-l33gtl3fpp] {
    background: linear-gradient(160deg, rgba(30,41,59,0.9), rgba(15,23,42,0.95));
    border: 1px solid rgba(251,191,36,0.22);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.shop-pet-card:hover:not(.owned):not(.locked)[b-l33gtl3fpp] {
    transform: translateY(-4px);
    border-color: rgba(251,191,36,0.55);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 12px rgba(251,191,36,0.15);
}

.shop-pet-card.owned[b-l33gtl3fpp] {
    opacity: 0.72;
}

.shop-pet-card.locked .shop-pet-img[b-l33gtl3fpp] {
    filter: saturate(0.3) brightness(0.6);
}

/* ── Card image wrapper ──────────────────────────────────── */

.shop-pet-image-wrapper[b-l33gtl3fpp] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: rgba(15,23,42,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.shop-pet-image-fallback[b-l33gtl3fpp] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-pet-img[b-l33gtl3fpp] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.2s ease;
}

/* ── Badges ──────────────────────────────────────────────── */

.shop-rarity-badge[b-l33gtl3fpp] {
    position: absolute;
    top: 5px;
    left: 6px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(15,23,42,0.75);
    padding: 2px 5px;
    border-radius: 4px;
}

.shop-owned-badge[b-l33gtl3fpp] {
    position: absolute;
    top: 5px;
    right: 6px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(22,101,52,0.85);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.4);
    padding: 2px 5px;
    border-radius: 4px;
}

/* ── Card info section ───────────────────────────────────── */

.shop-pet-info[b-l33gtl3fpp] {
    padding: 0.6rem 0.65rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.shop-pet-name[b-l33gtl3fpp] {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fde68a;
    line-height: 1.2;
}

.shop-pet-category[b-l33gtl3fpp] {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.shop-pet-desc[b-l33gtl3fpp] {
    font-size: 0.65rem;
    color: #94a3b8;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-stat-chips[b-l33gtl3fpp] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.shop-stat-chip[b-l33gtl3fpp] {
    background: rgba(96,165,250,0.1);
    border: 1px solid rgba(96,165,250,0.25);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.6rem;
    color: #93c5fd;
    font-weight: 600;
}

.shop-pet-price[b-l33gtl3fpp] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #b45309;
    margin-top: auto;
    padding-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ── Buy button ──────────────────────────────────────────── */

.shop-buy-btn[b-l33gtl3fpp] {
    width: 100%;
    margin-top: 0.4rem;
    padding: 6px 10px;
    border-radius: 7px;
    border: none;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.15s ease;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.shop-buy-btn:hover:not(:disabled):not(.disabled):not(.owned)[b-l33gtl3fpp] {
    background: linear-gradient(135deg, var(--color-warning-bright), #f59e0b);
    box-shadow: 0 4px 14px rgba(245,158,11,0.45);
}

.shop-buy-btn.owned[b-l33gtl3fpp] {
    background: rgba(30,41,59,0.6);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.3);
    cursor: default;
}

.shop-buy-btn.disabled[b-l33gtl3fpp],
.shop-buy-btn:disabled[b-l33gtl3fpp] {
    background: rgba(30,41,59,0.6);
    color: #475569;
    border: 1px solid rgba(71,85,105,0.3);
    cursor: not-allowed;
    box-shadow: none;
}
/* /Components/Pages/Game/Spells.razor.rz.scp.css */
/* Spell Editor Styling */
.spell-editor-container[b-5wuaiy90rn] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Header */
.spell-editor-header[b-5wuaiy90rn] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
    border: 1px solid var(--color-border-hover);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.header-content[b-5wuaiy90rn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.header-title-section[b-5wuaiy90rn] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-5wuaiy90rn] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-warning));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-800);
    font-size: 2rem;
}

.header-title[b-5wuaiy90rn] {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.2;
}

.header-subtitle[b-5wuaiy90rn] {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0.25rem 0 0 0;
}

.header-actions[b-5wuaiy90rn] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.create-spell-btn[b-5wuaiy90rn] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark)) !important;
}

/* Filters Section */
.filters-section[b-5wuaiy90rn] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group[b-5wuaiy90rn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 150px;
}

.filter-group.search-group[b-5wuaiy90rn] {
    flex: 1;
    min-width: 250px;
}

.filter-label[b-5wuaiy90rn] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    opacity: 0.9;
}

.filter-option[b-5wuaiy90rn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-option.wizard[b-5wuaiy90rn] { color: var(--color-info-light); }
.filter-option.paladin[b-5wuaiy90rn] { color: var(--color-warning-bright); }
.filter-option.bard[b-5wuaiy90rn] { color: #f472b6; }
.filter-option.any[b-5wuaiy90rn] { color: #a78bfa; }

/* Stats Bar */
.stats-bar[b-5wuaiy90rn] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.stat-chip[b-5wuaiy90rn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: transform 0.2s ease;
}

.stat-chip:hover[b-5wuaiy90rn] {
    transform: translateY(-2px);
}

.stat-chip.total[b-5wuaiy90rn] {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--color-text-light);
}

.stat-chip.wizard[b-5wuaiy90rn] {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--color-info-lighter);
}

.stat-chip.paladin[b-5wuaiy90rn] {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--color-warning-light);
}

.stat-chip.bard[b-5wuaiy90rn] {
    background: rgba(236, 72, 153, 0.2);
    border: 1px solid rgba(244, 114, 182, 0.3);
    color: var(--color-bard-light);
}

.stat-chip.any[b-5wuaiy90rn] {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: var(--color-monk-lighter);
}

/* Loading & Empty States */
.loading-state[b-5wuaiy90rn], .empty-state[b-5wuaiy90rn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon[b-5wuaiy90rn] {
    font-size: 4rem;
    color: #475569;
    margin-bottom: 1rem;
}

.empty-title[b-5wuaiy90rn] {
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}

.empty-text[b-5wuaiy90rn] {
    color: var(--color-text-secondary);
    max-width: 400px;
}

/* Spells Grid */
.spells-grid[b-5wuaiy90rn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Spell Cards */
.spell-card[b-5wuaiy90rn] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.spell-card[b-5wuaiy90rn]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    transition: all 0.3s ease;
}

.spell-card-wizard[b-5wuaiy90rn]::before { background: linear-gradient(180deg, var(--color-info), #1e40af); }
.spell-card-paladin[b-5wuaiy90rn]::before { background: linear-gradient(180deg, var(--color-warning), var(--color-warning-dark)); }
.spell-card-bard[b-5wuaiy90rn]::before { background: linear-gradient(180deg, var(--color-bard), #db2777); }
.spell-card-any[b-5wuaiy90rn]::before { background: linear-gradient(180deg, var(--color-monk), #7c3aed); }

.spell-card:hover[b-5wuaiy90rn] {
    transform: translateY(-4px);
    border-color: var(--color-border-active);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.spell-card-deleted[b-5wuaiy90rn] {
    opacity: 0.6;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.spell-card-header[b-5wuaiy90rn] {
    margin-bottom: 1rem;
}

.spell-card-title-row[b-5wuaiy90rn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.spell-name-section[b-5wuaiy90rn] {
    flex: 1;
    min-width: 0;
}

.spell-name[b-5wuaiy90rn] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spell-id[b-5wuaiy90rn] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    font-family: 'Courier New', monospace;
}

.spell-badges[b-5wuaiy90rn] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.spell-actions[b-5wuaiy90rn] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.spell-description[b-5wuaiy90rn] {
    color: var(--color-text-light);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Spell Stats Grid */
.spell-stats-grid[b-5wuaiy90rn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.spell-stat[b-5wuaiy90rn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-icon[b-5wuaiy90rn] {
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.stat-icon.mana[b-5wuaiy90rn] { color: var(--color-info); }
.stat-icon.effect[b-5wuaiy90rn] { color: var(--color-warning); }

.stat-content[b-5wuaiy90rn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stat-label[b-5wuaiy90rn] {
    font-size: 0.65rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.stat-value[b-5wuaiy90rn] {
    font-size: 0.875rem;
    color: var(--color-text-lighter);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Class Chips */
.class-chip-wizard[b-5wuaiy90rn] {
    background: rgba(59, 130, 246, 0.2) !important;
    color: var(--color-info-lighter) !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
}

.class-chip-paladin[b-5wuaiy90rn] {
    background: rgba(245, 158, 11, 0.2) !important;
    color: var(--color-warning-light) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

.class-chip-bard[b-5wuaiy90rn] {
    background: rgba(236, 72, 153, 0.2) !important;
    color: var(--color-bard-light) !important;
    border: 1px solid rgba(244, 114, 182, 0.3) !important;
}

.class-chip-any[b-5wuaiy90rn] {
    background: rgba(139, 92, 246, 0.2) !important;
    color: var(--color-monk-lighter) !important;
    border: 1px solid rgba(167, 139, 250, 0.3) !important;
}

/* ── Modals ─────────────────────────────────────────────────────────── */

/* Create / Edit modal */
.modal-overlay[b-5wuaiy90rn] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-dialog[b-5wuaiy90rn] {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* Delete / Restore modals */
.modal[b-5wuaiy90rn] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content[b-5wuaiy90rn] {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* Shared modal structure */
.modal-header[b-5wuaiy90rn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h2[b-5wuaiy90rn] {
    margin: 0;
    color: var(--color-primary);
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
}

.modal-body[b-5wuaiy90rn] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.modal-footer[b-5wuaiy90rn] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.close-btn[b-5wuaiy90rn] {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.close-btn:hover[b-5wuaiy90rn] {
    color: var(--color-text-light);
    background: rgba(255, 255, 255, 0.08);
}

/* Form rows inside modal */
.form-row[b-5wuaiy90rn] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-row label[b-5wuaiy90rn] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

/* 2-column form grid */
.form-grid-2col[b-5wuaiy90rn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.form-grid-2col .form-row-span[b-5wuaiy90rn] {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .form-grid-2col[b-5wuaiy90rn] {
        grid-template-columns: 1fr;
    }

    .form-grid-2col .form-row-span[b-5wuaiy90rn] {
        grid-column: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .spell-editor-container[b-5wuaiy90rn] {
        padding: 1rem;
    }

    .header-content[b-5wuaiy90rn] {
        flex-direction: column;
        align-items: flex-start;
    }

    .filters-section[b-5wuaiy90rn] {
        flex-direction: column;
    }

    .filter-group[b-5wuaiy90rn] {
        width: 100%;
    }

    .spells-grid[b-5wuaiy90rn] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Game/WeaponsEditor.razor.rz.scp.css */
/* Weapons Editor - Fantasy RPG Theme */

/* Page Header */
.weapons-header[b-mlh4t5yxj1] {
    background: linear-gradient(135deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.weapons-header h1[b-mlh4t5yxj1] {
    font-family: 'Cinzel', serif;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

/* Weapon Cards */
[b-mlh4t5yxj1] .weapon-card {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    transition: all 0.3s ease;
}

[b-mlh4t5yxj1] .weapon-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-border-active);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(255, 215, 0, 0.1);
}

[b-mlh4t5yxj1] .weapon-card.deleted {
    opacity: 0.6;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

/* Action Buttons */
[b-mlh4t5yxj1] .btn-primary {
    background: linear-gradient(135deg, #b8860b 0%, var(--color-primary-dark) 50%, var(--color-primary) 100%) !important;
    color: var(--color-gray-900) !important;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[b-mlh4t5yxj1] .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(218, 165, 32, 0.5) !important;
}

[b-mlh4t5yxj1] .btn-success {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark)) !important;
    color: white !important;
}

[b-mlh4t5yxj1] .btn-error {
    background: linear-gradient(135deg, var(--color-danger), var(--color-barbarian)) !important;
    color: white !important;
}

/* Dialog Styling */
[b-mlh4t5yxj1] .mud-dialog {
    background: linear-gradient(145deg, var(--color-bg-elevated), rgba(15, 23, 42, 1));
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
}

[b-mlh4t5yxj1] .mud-dialog-title {
    font-family: 'Cinzel', serif;
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    padding-bottom: 1rem;
}

/* Form Fields */
[b-mlh4t5yxj1] .mud-input-outlined {
    border-color: var(--color-border-hover) !important;
}

[b-mlh4t5yxj1] .mud-input-outlined:hover {
    border-color: var(--color-border-active) !important;
}

[b-mlh4t5yxj1] .mud-input-outlined.mud-input-focused {
    border-color: rgba(255, 215, 0, 0.5) !important;
}

/* Chips & Badges */
[b-mlh4t5yxj1] .mud-chip {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Loading States */
[b-mlh4t5yxj1] .mud-progress-linear {
    background-color: rgba(255, 215, 0, 0.1) !important;
}

[b-mlh4t5yxj1] .mud-progress-linear-bar {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)) !important;
}
/* /Components/Pages/Guide/GuideCombat.razor.rz.scp.css */
/* GuideCombat scoped styles — lp- design-system extensions for patterns
   the combat guide reference needs that lp-shared.css does not cover.
   All class names are lp- prefixed to avoid collisions with legacy globals. */

/* ---------- Movement-range number cards ---------- */

.lp-move-card[b-iedi16dps7] {
    border: 1px solid rgba(218, 165, 32, .25);
    border-radius: 6px;
    padding: 24px;
    background: #0d1322;
    text-align: center;
}

.lp-move-num[b-iedi16dps7] {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 800;
    color: var(--color-primary);
}

.lp-move-unit[b-iedi16dps7] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8b93a7;
    margin-top: 2px;
}

.lp-move-classes[b-iedi16dps7] {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #f4ecd8;
    margin-top: 12px;
}

.lp-move-note[b-iedi16dps7] {
    font-size: 15px;
    line-height: 1.5;
    color: #98a1b5;
    margin-top: 6px;
}

/* ---------- Numbered action-card headers ---------- */

.lp-action-head[b-iedi16dps7] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

/* ---------- Monster archetype cards ---------- */

.lp-arch-card[b-iedi16dps7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp-arch-head[b-iedi16dps7] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.lp-arch-spell[b-iedi16dps7] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.lp-arch-counter[b-iedi16dps7] {
    margin-top: auto;
    border-top: 1px solid rgba(139, 147, 167, .14);
    padding-top: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: #98a1b5;
}

.lp-arch-counter strong[b-iedi16dps7] {
    color: #e8c352;
}

/* ---------- Class strategy rows (gold class-label column) ---------- */

.lp-strat-row[b-iedi16dps7] {
    gap: 14px;
}

.lp-strat-cls[b-iedi16dps7] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-primary);
    white-space: nowrap;
    width: 82px;
    flex-shrink: 0;
    margin-top: 2px;
}

.lp-strat-tip[b-iedi16dps7] {
    font-size: 15.5px;
    line-height: 1.5;
    color: #98a1b5;
}
/* /Components/Pages/Guide/GuideHowToPlay.razor.rz.scp.css */
/* Scoped styles for /guide/how-to-play — patterns from the How to Play design
   reference (design_handoff_content_pages/How to Play Guide.dc.html) that have
   no lp-shared equivalent. All class names are lp- prefixed by convention. */

/* Numbered getting-started step cards: larger number circle, centered header */
.lp-step-head[b-2e00lon06j] {
    align-items: center;
}

.lp-step-num[b-2e00lon06j] {
    width: 34px;
    height: 34px;
    font-size: 15px;
}

/* Core-stat cards with gold STR/DEX/CON/INT/WIS/CHA abbreviation column */
.lp-stat-card[b-2e00lon06j] {
    display: flex;
    gap: 16px;
    padding: 22px 24px;
}

.lp-stat-abbr[b-2e00lon06j] {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--color-primary);
    width: 44px;
    flex-shrink: 0;
}

.lp-stat-name[b-2e00lon06j] {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: #f4ecd8;
}

.lp-stat-role[b-2e00lon06j] {
    font-size: 15px;
    line-height: 1.5;
    color: #98a1b5;
    margin-top: 4px;
}

/* Gold class-list line in zone cards and party-role cards */
.lp-zone-classes[b-2e00lon06j] {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--color-primary);
    text-transform: uppercase;
}

/* Panel data rows: cream key, muted value, gold value */
.lp-prow-key[b-2e00lon06j] {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: #f4ecd8;
}

.lp-prow-keywrap[b-2e00lon06j] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    min-width: 0;
}

.lp-prow-val[b-2e00lon06j] {
    font-size: 14.5px;
    color: #98a1b5;
    text-align: right;
}

.lp-prow-gold[b-2e00lon06j] {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--color-primary);
    text-align: right;
}

/* Consumables price-panel rows: name + gold price line, muted effect below */
.lp-price-row[b-2e00lon06j] {
    padding: 13px 22px;
    border-bottom: 1px solid rgba(139, 147, 167, .12);
}

.lp-price-row:last-child[b-2e00lon06j] {
    border-bottom: none;
}

.lp-price-head[b-2e00lon06j] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}

.lp-price-desc[b-2e00lon06j] {
    font-size: 14.5px;
    color: #98a1b5;
    margin-top: 3px;
}

/* Class quick-tip rows: gold class label column + tip text */
.lp-classtip-cls[b-2e00lon06j] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    width: 82px;
    flex-shrink: 0;
    margin-top: 2px;
    white-space: nowrap;
}

.lp-classtip-tip[b-2e00lon06j] {
    font-size: 15.5px;
    line-height: 1.5;
    color: #98a1b5;
}
/* /Components/Pages/Guide/GuidePets.razor.rz.scp.css */
/* GuidePets scoped styles — reference-specific patterns from the Pet Companions
   Guide design packet (design_handoff_content_pages). Shared lp- classes stay in
   lp-shared.css; only patterns unique to this page live here. */

/* ---------- Hero pet portrait orbs (above the ornament) ---------- */

.lp-pet-orb-row[b-k92okbb4l0] {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.lp-pet-orb[b-k92okbb4l0] {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 1px solid rgba(218, 165, 32, .45);
    object-fit: cover;
    background-color: #0d1322;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

/* ---------- Level & evolution scaling: 4-col framed panel ---------- */

.lp-evo-panel[b-k92okbb4l0] {
    max-width: 820px;
    margin: 28px auto 0;
}

h3.lp-panel-title[b-k92okbb4l0] {
    margin: 0;
}

.lp-evo-row[b-k92okbb4l0] {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(139, 147, 167, .12);
    align-items: baseline;
}

.lp-evo-row:last-child[b-k92okbb4l0] {
    border-bottom: none;
}

.lp-evo-head[b-k92okbb4l0] {
    padding: 12px 22px;
    border-bottom: 1px solid rgba(218, 165, 32, .2);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #8b93a7;
    text-transform: uppercase;
}

.lp-evo-stage[b-k92okbb4l0] {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    color: #f4ecd8;
}

.lp-evo-mult[b-k92okbb4l0] {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    color: var(--color-primary);
}

.lp-evo-cell[b-k92okbb4l0] {
    font-size: 15.5px;
    color: #98a1b5;
}

/* ---------- Class affinity cards (circular thumb + class chip + bonus) ---------- */

.lp-aff-grid[b-k92okbb4l0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 18px;
}

.lp-aff-card[b-k92okbb4l0] {
    display: flex;
    gap: 16px;
    align-items: center;
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    padding: 18px 20px;
    background: #0d1322;
    transition: border-color .25s ease;
}

.lp-aff-card:hover[b-k92okbb4l0] {
    border-color: rgba(255, 215, 0, .55);
}

.lp-aff-thumb[b-k92okbb4l0] {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid rgba(218, 165, 32, .4);
    object-fit: cover;
    background-color: #0b1120;
    flex-shrink: 0;
}

.lp-aff-copy[b-k92okbb4l0] {
    min-width: 0;
}

.lp-aff-head[b-k92okbb4l0] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}

.lp-aff-pet[b-k92okbb4l0] {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: #f4ecd8;
}

.lp-aff-class[b-k92okbb4l0] {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--color-primary);
    text-transform: uppercase;
}

.lp-aff-class[b-k92okbb4l0]::before {
    content: "+ ";
}

.lp-aff-bonus[b-k92okbb4l0] {
    font-size: 15px;
    line-height: 1.45;
    color: #98a1b5;
    margin-top: 4px;
}

/* ---------- Dual trigger panels (conditions / effects) ---------- */

.lp-trig-grid[b-k92okbb4l0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 18px;
}

.lp-trig-row[b-k92okbb4l0] {
    padding: 14px 22px;
    border-bottom: 1px solid rgba(139, 147, 167, .12);
}

.lp-trig-row:last-child[b-k92okbb4l0] {
    border-bottom: none;
}

.lp-trig-head[b-k92okbb4l0] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}

.lp-trig-k[b-k92okbb4l0] {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #f4ecd8;
}

.lp-trig-pet[b-k92okbb4l0] {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-primary);
    white-space: nowrap;
    text-transform: uppercase;
}

.lp-trig-v[b-k92okbb4l0] {
    font-size: 15.5px;
    line-height: 1.5;
    color: #98a1b5;
    margin-top: 4px;
}

/* ---------- Pet roster: compact rows with 64px square thumb ---------- */

.lp-pet-roster-grid[b-k92okbb4l0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 16px;
}

.lp-pet-row[b-k92okbb4l0] {
    display: flex;
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    padding: 14px 16px;
    background: #0d1322;
    transition: border-color .25s ease;
}

.lp-pet-row:hover[b-k92okbb4l0] {
    border-color: rgba(255, 215, 0, .55);
}

.lp-pet-row-thumb[b-k92okbb4l0] {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    border: 1px solid rgba(218, 165, 32, .3);
    object-fit: cover;
    background-color: #0b1120;
    flex-shrink: 0;
}

.lp-pet-row-info[b-k92okbb4l0] {
    min-width: 0;
}

.lp-pet-row-name[b-k92okbb4l0] {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 800;
    color: #f4ecd8;
}

.lp-pet-row-rarity[b-k92okbb4l0] {
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: 3px;
}

.lp-rarity--common[b-k92okbb4l0] { color: #8b93a7; }
.lp-rarity--uncommon[b-k92okbb4l0] { color: #8fbf9a; }
.lp-rarity--rare[b-k92okbb4l0] { color: #82a9dc; }
.lp-rarity--epic[b-k92okbb4l0] { color: #af90dd; }
.lp-rarity--legendary[b-k92okbb4l0] { color: var(--color-primary); }

.lp-pet-row-src[b-k92okbb4l0] {
    font-size: 14px;
    line-height: 1.4;
    color: #8b93a7;
    margin-top: 3px;
}

/* ---------- Stat-category cards: gold pet list pinned to card bottom ---------- */

.lp-statcat-pets[b-k92okbb4l0] {
    margin-top: auto;
}

.lp-statcat-pets strong[b-k92okbb4l0] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #e8c352;
    text-transform: uppercase;
}

/* ---------- Tips grid ---------- */

.lp-tips-grid[b-k92okbb4l0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-tip-card[b-k92okbb4l0] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid rgba(218, 165, 32, .18);
    border-radius: 6px;
    padding: 18px 20px;
    background: #0d1322;
}

.lp-tip-body[b-k92okbb4l0] {
    font-size: 15.5px;
    line-height: 1.5;
    color: #98a1b5;
}

.lp-tip-body strong[b-k92okbb4l0] {
    color: #f4ecd8;
}

/* ---------- Spacing helpers (replace inline styles) ---------- */

.lp-pets-mt[b-k92okbb4l0] {
    margin-top: 28px;
}

.lp-pets-mt-sm[b-k92okbb4l0] {
    margin-top: 20px;
}

/* ---------- Mobile: evolution rows collapse 4-col -> 2x2 (canonical 480px) ---------- */

@media (max-width: 480px) {
    .lp-evo-row[b-k92okbb4l0] {
        grid-template-columns: 1fr 1fr;
        row-gap: 4px;
    }
}
/* /Components/Pages/Guilds/Leaderboards.razor.rz.scp.css */
/* Leaderboards Page - High Fantasy RPG Aesthetic */

.leaderboards-page[b-r0xlvthx51] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-gray-900);
    padding: 2rem;
    gap: 2rem;
}

/* ===== HEADER ===== */
.leaderboards-header[b-r0xlvthx51] {
    background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

.header-content[b-r0xlvthx51] {
    max-width: 800px;
    margin: 0 auto;
}

.page-title[b-r0xlvthx51] {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.title-icon[b-r0xlvthx51] {
    font-size: 3rem;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    display: inline-flex;
    align-items: center;
}

.page-subtitle[b-r0xlvthx51] {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ===== TAB NAVIGATION ===== */
.leaderboard-tabs[b-r0xlvthx51] {
    display: flex;
    gap: 0.5rem;
    background: rgba(30, 41, 59, 0.5);
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.1);
    overflow-x: auto;
    flex-wrap: wrap;
}

.tab-button[b-r0xlvthx51] {
    flex: 1;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0.5rem;
    background: rgba(51, 65, 85, 0.5);
    border: 2px solid transparent;
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.tab-button:hover[b-r0xlvthx51] {
    background: rgba(51, 65, 85, 0.8);
    border-color: var(--color-border-active);
    transform: translateY(-2px);
}

.tab-button.active[b-r0xlvthx51] {
    background: linear-gradient(135deg, var(--color-border-hover), rgba(255, 215, 0, 0.1));
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 20px var(--color-border-active);
}

.tab-icon[b-r0xlvthx51] {
    font-size: 1.4rem;
    display: inline-flex;
}

.tab-label[b-r0xlvthx51] {
    font-size: 0.8rem;
}

/* ===== CONTENT AREA ===== */
.leaderboard-content[b-r0xlvthx51] {
    flex: 1;
    background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
    border: 1px solid var(--color-border-base);
    border-radius: 12px;
    padding: 2rem;
    min-height: 500px;
}

/* ===== CATEGORY HEADER ===== */
.category-header[b-r0xlvthx51] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.category-title[b-r0xlvthx51] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

.category-unit[b-r0xlvthx51] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ===== LOADING & ERROR STATES ===== */
.loading-state[b-r0xlvthx51],
.error-state[b-r0xlvthx51],
.empty-state[b-r0xlvthx51] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 400px;
    color: var(--color-text-secondary);
    text-align: center;
    padding: 1rem;
}

.spinner[b-r0xlvthx51] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 215, 0, 0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-r0xlvthx51 1s linear infinite;
}

@keyframes spin-b-r0xlvthx51 {
    to { transform: rotate(360deg); }
}

.error-icon[b-r0xlvthx51],
.empty-icon[b-r0xlvthx51] {
    font-size: 4rem;
    display: inline-flex;
}

.retry-button[b-r0xlvthx51],
.back-button[b-r0xlvthx51] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    color: var(--color-primary);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.retry-button:hover[b-r0xlvthx51],
.back-button:hover[b-r0xlvthx51] {
    background: var(--color-border-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--color-border-active);
}

.button-icon[b-r0xlvthx51] {
    display: inline-flex;
}

/* ===== PODIUM ===== */
.podium-section[b-r0xlvthx51] {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    padding: 0 0.5rem;
}

.podium-card[b-r0xlvthx51] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem 0;
    border-radius: 12px 12px 0 0;
    min-width: 140px;
    max-width: 200px;
    flex: 1;
    text-align: center;
    border: 2px solid transparent;
    transition: transform 0.3s ease;
}

.podium-card:hover[b-r0xlvthx51] {
    transform: translateY(-4px);
}

.podium-card.champion[b-r0xlvthx51] {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 215, 0, 0.04) 100%);
    border-color: var(--color-primary);
    animation: champion-glow-b-r0xlvthx51 3s ease-in-out infinite;
}

.podium-card.podium-silver[b-r0xlvthx51] {
    background: linear-gradient(180deg, rgba(192, 192, 192, 0.12) 0%, rgba(192, 192, 192, 0.04) 100%);
    border-color: #C0C0C0;
}

.podium-card.podium-bronze[b-r0xlvthx51] {
    background: linear-gradient(180deg, rgba(205, 127, 50, 0.12) 0%, rgba(205, 127, 50, 0.04) 100%);
    border-color: #CD7F32;
}

.champion-label[b-r0xlvthx51] {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0.2rem 0.6rem;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 20px;
    white-space: nowrap;
}

.podium-avatar[b-r0xlvthx51] {
    font-size: 2.25rem;
    line-height: 1;
}

.podium-name[b-r0xlvthx51] {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

.podium-meta[b-r0xlvthx51] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}

.podium-level[b-r0xlvthx51] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.podium-score[b-r0xlvthx51] {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-border-active);
    margin-top: 0.25rem;
}

.podium-stand[b-r0xlvthx51] {
    margin-top: auto;
    width: calc(100% + 4px);
    margin-left: -2px;
    margin-right: -2px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.75rem;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
}

.gold-stand[b-r0xlvthx51] {
    background: linear-gradient(180deg, var(--color-primary) 0%, #d4aa00 100%);
    min-height: 80px;
    color: #111;
}

.silver-stand[b-r0xlvthx51] {
    background: linear-gradient(180deg, #C0C0C0 0%, #909090 100%);
    min-height: 60px;
    color: #111;
}

.bronze-stand[b-r0xlvthx51] {
    background: linear-gradient(180deg, #CD7F32 0%, #9e5f20 100%);
    min-height: 40px;
    color: #fff;
}

@keyframes champion-glow-b-r0xlvthx51 {
    0%, 100% { box-shadow: 0 -4px 20px rgba(255, 215, 0, 0.2); }
    50%       { box-shadow: 0 -4px 35px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.1); }
}

/* ===== LEADERBOARD TABLE ===== */
.leaderboard-table-container[b-r0xlvthx51] {
    width: 100%;
}

.leaderboard-table[b-r0xlvthx51] {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.table-header[b-r0xlvthx51] {
    display: grid;
    grid-template-columns: 110px 1fr 90px 130px 140px;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 215, 0, 0.1);
    border-bottom: 2px solid var(--color-primary);
}

.header-cell[b-r0xlvthx51] {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
}

.table-body[b-r0xlvthx51] {
    display: flex;
    flex-direction: column;
}

.table-row[b-r0xlvthx51] {
    display: grid;
    grid-template-columns: 110px 1fr 90px 130px 140px;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: rgba(30, 41, 59, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.08);
    transition: all 0.3s ease;
}

.table-row:hover[b-r0xlvthx51] {
    background: rgba(51, 65, 85, 0.5);
    transform: translateX(4px);
}

.table-row.top-1[b-r0xlvthx51] {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.03));
    border-left: 4px solid var(--color-primary);
}

.table-row.top-2[b-r0xlvthx51] {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.15), rgba(192, 192, 192, 0.03));
    border-left: 4px solid #C0C0C0;
}

.table-row.top-3[b-r0xlvthx51] {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.15), rgba(205, 127, 50, 0.03));
    border-left: 4px solid #CD7F32;
}

.table-cell[b-r0xlvthx51] {
    display: flex;
    align-items: center;
    color: var(--color-text-primary);
}

.rank-cell[b-r0xlvthx51]      { justify-content: flex-start; }
.character-cell[b-r0xlvthx51] { justify-content: flex-start; }
.level-cell[b-r0xlvthx51],
.class-cell[b-r0xlvthx51],
.score-cell[b-r0xlvthx51]     { justify-content: center; }

/* ===== RANK BADGES ===== */
.rank-badge[b-r0xlvthx51] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.rank-gold[b-r0xlvthx51] {
    background: linear-gradient(135deg, var(--color-primary), #e6c200);
    color: #111;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}

.rank-silver[b-r0xlvthx51] {
    background: linear-gradient(135deg, #C0C0C0, #e8e8e8);
    color: #111;
    box-shadow: 0 0 12px rgba(192, 192, 192, 0.5);
}

.rank-bronze[b-r0xlvthx51] {
    background: linear-gradient(135deg, #CD7F32, #daa06d);
    color: #fff;
    box-shadow: 0 0 12px rgba(205, 127, 50, 0.5);
}

.medal[b-r0xlvthx51] {
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
}

.rank-number[b-r0xlvthx51] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* ===== CHARACTER & CLASS BADGES ===== */
.character-name[b-r0xlvthx51] {
    font-size: 1rem;
    color: var(--color-primary);
}

.level-badge[b-r0xlvthx51] {
    padding: 0.25rem 0.7rem;
    background: rgba(51, 65, 85, 0.8);
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.class-badge[b-r0xlvthx51] {
    padding: 0.25rem 0.7rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.class-warrior[b-r0xlvthx51] { background: rgba(239, 68, 68, 0.2);   color: var(--color-danger);          border: 1px solid var(--color-danger); }
.class-wizard[b-r0xlvthx51]  { background: rgba(59, 130, 246, 0.2);  color: var(--color-info);            border: 1px solid var(--color-info); }
.class-ranger[b-r0xlvthx51]  { background: rgba(34, 197, 94, 0.2);   color: var(--color-success);         border: 1px solid var(--color-success); }
.class-rogue[b-r0xlvthx51]   { background: rgba(99, 102, 241, 0.2);  color: var(--color-rogue);           border: 1px solid var(--color-rogue); }
.class-paladin[b-r0xlvthx51] { background: rgba(245, 158, 11, 0.2);  color: var(--color-warning);         border: 1px solid var(--color-warning); }
.class-bard[b-r0xlvthx51]    { background: rgba(236, 72, 153, 0.2);  color: var(--color-bard);            border: 1px solid var(--color-bard); }
.class-pirate[b-r0xlvthx51]  { background: rgba(20, 184, 166, 0.2);  color: #14b8a6;                      border: 1px solid #14b8a6; }
.class-default[b-r0xlvthx51] { background: rgba(148, 163, 184, 0.2); color: var(--color-text-secondary);  border: 1px solid var(--color-text-secondary); }

.score-value[b-r0xlvthx51] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-border-active);
}

/* ===== FOOTER ===== */
.leaderboards-footer[b-r0xlvthx51] {
    display: flex;
    justify-content: center;
}

.back-button[b-r0xlvthx51] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--color-gray-700), var(--color-gray-800));
    border: 2px solid var(--color-border-active);
    border-radius: 8px;
    color: var(--color-primary);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.back-button:hover[b-r0xlvthx51] {
    background: linear-gradient(135deg, #475569, var(--color-gray-700));
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-border-active);
}

/* ===== RESPONSIVE — TABLET LANDSCAPE (1024–1366px) ===== */
@media (max-width: 1366px) and (min-width: 1024px) {
    .leaderboards-page[b-r0xlvthx51] { padding: 1.5rem; }
    .page-title[b-r0xlvthx51]        { font-size: 2rem; }

    .table-header[b-r0xlvthx51],
    .table-row[b-r0xlvthx51] {
        grid-template-columns: 100px 1fr 80px 115px 125px;
    }
}

/* ===== RESPONSIVE — TABLET PORTRAIT (768–1023px) ===== */
@media (max-width: 1023px) and (min-width: 768px) {
    .leaderboards-page[b-r0xlvthx51] {
        padding: 1rem;
        gap: 1.5rem;
    }

    .page-title[b-r0xlvthx51] { font-size: 1.75rem; }
    .title-icon[b-r0xlvthx51] { font-size: 2rem; }

    .tab-button[b-r0xlvthx51] {
        min-width: 80px;
        padding: 0.75rem 0.5rem;
        font-size: 0.8rem;
    }

    .table-header[b-r0xlvthx51],
    .table-row[b-r0xlvthx51] {
        grid-template-columns: 90px 1fr 75px 100px 110px;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .podium-card[b-r0xlvthx51]  { min-width: 120px; }
    .podium-name[b-r0xlvthx51]  { font-size: 0.85rem; }
    .podium-score[b-r0xlvthx51] { font-size: 1rem; }
}

/* ===== RESPONSIVE — MOBILE (< 768px) ===== */
@media (max-width: 767px) {
    .leaderboards-page[b-r0xlvthx51] {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .leaderboards-header[b-r0xlvthx51] { padding: 1.25rem 1rem; }

    .page-title[b-r0xlvthx51] {
        font-size: 1.4rem;
        flex-direction: column;
        gap: 0.4rem;
    }

    .title-icon[b-r0xlvthx51]    { font-size: 1.75rem; }
    .page-subtitle[b-r0xlvthx51] { font-size: 0.85rem; }

    /* Tabs: 4-per-row grid so all 8 show in 2 rows */
    .leaderboard-tabs[b-r0xlvthx51] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.4rem;
        padding: 0.5rem;
    }

    .tab-button[b-r0xlvthx51] {
        min-width: 0;
        padding: 0.6rem 0.25rem;
        gap: 0.3rem;
    }

    .tab-icon[b-r0xlvthx51]  { font-size: 1.1rem; }
    .tab-label[b-r0xlvthx51] { font-size: 0.65rem; }

    .leaderboard-content[b-r0xlvthx51] {
        padding: 0.875rem;
        min-height: auto;
    }

    .category-header[b-r0xlvthx51] { margin-bottom: 1.25rem; gap: 0.5rem; }
    .category-title[b-r0xlvthx51]  { font-size: 1.2rem; }
    .category-unit[b-r0xlvthx51]   { font-size: 0.8rem; }

    /* Podium: compact */
    .podium-section[b-r0xlvthx51] {
        gap: 0.4rem;
        margin-bottom: 1.5rem;
    }

    .podium-card[b-r0xlvthx51] {
        min-width: 0;
        padding: 0.75rem 0.4rem 0;
        gap: 0.3rem;
    }

    .champion-label[b-r0xlvthx51] { display: none; }     /* too cramped on mobile */

    .podium-avatar[b-r0xlvthx51] { font-size: 1.5rem; }

    .podium-name[b-r0xlvthx51] {
        font-size: 0.75rem;
        max-width: 80px;
    }

    .podium-meta[b-r0xlvthx51] { gap: 0.25rem; }
    .podium-level[b-r0xlvthx51] { font-size: 0.65rem; }

    .podium-score[b-r0xlvthx51] {
        font-size: 0.85rem;
        margin-top: 0.1rem;
    }

    .podium-stand[b-r0xlvthx51] {
        font-size: 0.7rem;
        padding-bottom: 0.5rem;
    }

    .gold-stand[b-r0xlvthx51]   { min-height: 55px; }
    .silver-stand[b-r0xlvthx51] { min-height: 40px; }
    .bronze-stand[b-r0xlvthx51] { min-height: 28px; }

    .podium-meta .class-badge[b-r0xlvthx51] {
        font-size: 0.6rem;
        padding: 0.15rem 0.4rem;
    }

    /* Table: hide header, use flex-wrap rows instead of grid */
    .table-header[b-r0xlvthx51] { display: none; }

    .table-row[b-r0xlvthx51] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.875rem;
        border-left-width: 3px;
    }

    .table-cell[b-r0xlvthx51] { justify-content: flex-start; }

    .rank-cell[b-r0xlvthx51]      { flex: 0 0 auto; order: 1; }
    .character-cell[b-r0xlvthx51] { flex: 1;        order: 2; min-width: 0; }
    .level-cell[b-r0xlvthx51]     { flex: 0 0 auto; order: 3; }
    .class-cell[b-r0xlvthx51]     { flex: 0 0 auto; order: 4; }
    .score-cell[b-r0xlvthx51]     { flex: 1;        order: 5; justify-content: flex-end; }

    .character-name[b-r0xlvthx51] {
        font-size: 0.95rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .score-value[b-r0xlvthx51] { font-size: 1.1rem; }
    .rank-badge[b-r0xlvthx51]  { font-size: 0.75rem; padding: 0.3rem 0.6rem; }
    .level-badge[b-r0xlvthx51] { font-size: 0.75rem; padding: 0.2rem 0.5rem; }
    .class-badge[b-r0xlvthx51] { font-size: 0.75rem; padding: 0.2rem 0.5rem; }

    .back-button[b-r0xlvthx51] { padding: 0.75rem 1.5rem; font-size: 0.9rem; }
}

/* ===== EXTRA SMALL (< 400px) ===== */
@media (max-width: 400px) {
    /* Tabs: icon only */
    .tab-label[b-r0xlvthx51]  { display: none; }
    .tab-icon[b-r0xlvthx51]   { font-size: 1.25rem; }
    .tab-button[b-r0xlvthx51] { padding: 0.65rem 0.25rem; }

    .podium-name[b-r0xlvthx51]  { max-width: 60px; font-size: 0.7rem; }
    .podium-score[b-r0xlvthx51] { font-size: 0.8rem; }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *[b-r0xlvthx51] {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/Index.razor.rz.scp.css */
/* ============================================
   HOMEPAGE-SPECIFIC STYLES
   Shared lp- patterns (nav, footer, buttons, ornament, section
   scaffolding, diamond/guide cards, final CTA) live in
   wwwroot/css/lp-shared.css — this file holds only what is
   unique to the homepage (hero video, stats strip, waitlist,
   why cards, class grid, chronicles, FAQ).
   ============================================ */

/* ---------- Hero ---------- */

.lp-hero[b-1rpnkthxdm] {
    position: relative;
    height: 100vh;
    min-height: 680px;
    overflow: hidden;
    background: #070b16;
    display: flex;
    flex-direction: column;
    padding-top: 70px;
    box-sizing: border-box;
}

.lp-hero-media[b-1rpnkthxdm] {
    position: relative;
    flex: 1;
    min-height: 0;
}

.lp-hero-still[b-1rpnkthxdm],
.lp-hero-video[b-1rpnkthxdm] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lp-hero-video[b-1rpnkthxdm] {
    background: #070b16;
    opacity: 1;
    transition: opacity 1.4s ease;
}

.lp-hero-video-fade[b-1rpnkthxdm] {
    opacity: 0;
}

.lp-hero-video-gone[b-1rpnkthxdm] {
    display: none;
}

.lp-hero-copy[b-1rpnkthxdm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 24px 56px;
    gap: 18px;
}

.lp-kicker[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .34em;
    color: #e8c352;
}

.lp-hero-title[b-1rpnkthxdm] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(40px, 5.5vw, 76px);
    line-height: 1.05;
    color: #f4ecd8;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .6);
}

.lp-hero-sub[b-1rpnkthxdm] {
    margin: 0;
    max-width: 680px;
    font-size: 20px;
    line-height: 1.55;
    color: #aeb7c9;
}

.lp-hero-ctas[b-1rpnkthxdm] {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.lp-hero-microcopy[b-1rpnkthxdm] {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: .16em;
    color: #7b8499;
}

.lp-micro-sep[b-1rpnkthxdm] {
    width: 5px;
    height: 5px;
    background: #4a5268;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ---------- Stats strip ---------- */

.lp-stats-strip[b-1rpnkthxdm] {
    border-top: 1px solid rgba(218, 165, 32, .18);
    border-bottom: 1px solid rgba(218, 165, 32, .18);
    background: var(--color-bg-base);
}

.lp-stats-inner[b-1rpnkthxdm] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px 8px;
    padding: 34px 24px;
}

.lp-stat-item[b-1rpnkthxdm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.lp-stat-number[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    color: var(--color-primary);
}

.lp-stat-label[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    color: #8b93a7;
}

/* ---------- Waitlist ---------- */

.lp-waitlist-section[b-1rpnkthxdm] {
    position: relative;
    scroll-margin-top: 72px;
    padding: clamp(56px, 10vw, 110px) 24px;
    background: radial-gradient(ellipse 60% 70% at 50% 30%, rgba(30, 41, 59, .55), transparent), #070b16;
}

.lp-waitlist-inner[b-1rpnkthxdm] {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.lp-waitlist-title[b-1rpnkthxdm] {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #f4ecd8;
}

.lp-waitlist-body[b-1rpnkthxdm] {
    margin: 0;
    font-size: 19px;
    line-height: 1.6;
    color: #aeb7c9;
}

.lp-waitlist-form[b-1rpnkthxdm] {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    margin-top: 8px;
}

.lp-waitlist-input[b-1rpnkthxdm] {
    flex: 1;
    min-width: 0;
    background: #0d1322;
    border: 1px solid rgba(218, 165, 32, .35);
    border-radius: 3px;
    padding: 14px 18px;
    color: #f4ecd8;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 17px;
    outline: none;
    transition: border-color .2s ease;
}

.lp-waitlist-input:focus[b-1rpnkthxdm] {
    border-color: var(--color-primary);
}

.lp-waitlist-btn[b-1rpnkthxdm] {
    font-size: 14px;
    letter-spacing: .1em;
    padding: 14px 28px;
    box-shadow: 0 0 20px rgba(218, 165, 32, .35);
}

.lp-waitlist-btn:hover[b-1rpnkthxdm] {
    box-shadow: 0 0 32px rgba(255, 215, 0, .6);
}

.lp-waitlist-btn:disabled[b-1rpnkthxdm] {
    opacity: .7;
    cursor: default;
}

.lp-waitlist-confirm[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
    border: 1px solid rgba(218, 165, 32, .5);
    padding: 14px 28px;
    border-radius: 3px;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ::deep - the glyph is rendered by the shared Icon component, so it carries that
   component's scope id rather than this page's. */
.lp-waitlist-confirm[b-1rpnkthxdm]  .material-icons {
    font-size: 17px;
}

.lp-waitlist-error[b-1rpnkthxdm] {
    margin: 4px 0 0;
    font-size: 15px;
    color: #f87171;
}

.lp-waitlist-cadence[b-1rpnkthxdm] {
    margin: 10px 0 0;
    font-size: 15px;
    color: #8b93a7;
}

.lp-waitlist-trust[b-1rpnkthxdm] {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
    font-size: 16px;
    color: #8b93a7;
}

.lp-waitlist-trust > span[b-1rpnkthxdm] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.lp-trust-diamond[b-1rpnkthxdm] {
    width: 7px;
    height: 7px;
    background: #8b93a7;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ---------- Why Lourdin ---------- */

.lp-why-grid[b-1rpnkthxdm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.lp-why-card[b-1rpnkthxdm] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    background: radial-gradient(ellipse 90% 45% at 50% 0%, rgba(218, 165, 32, .12), transparent), #0d1322;
    border: 1px solid rgba(218, 165, 32, .25);
    border-top: 2px solid rgba(218, 165, 32, .55);
    border-radius: 6px;
    padding: 30px 26px 26px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.lp-why-card:hover[b-1rpnkthxdm] {
    border-color: rgba(255, 215, 0, .7);
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 24px rgba(218, 165, 32, .18);
}

.lp-why-watermark[b-1rpnkthxdm] {
    position: absolute;
    top: -34px;
    right: -22px;
    font-family: var(--font-display);
    font-size: 130px;
    font-weight: 800;
    color: rgba(218, 165, 32, .07);
    pointer-events: none;
    line-height: 1;
}

/* ::deep - rendered by the shared Icon component, so it carries that component's scope id. */
.lp-why-watermark[b-1rpnkthxdm]  .lp-why-watermark-icon {
    font-size: 130px;
}

/* Cards whose glyph is text ("d20", "X") draw it from the attribute rather than a
   child text node, so the same glyph is not repeated into the crawlable text layer
   by both the watermark and the hex emblem. */
.lp-why-watermark[data-glyph][b-1rpnkthxdm]::before,
.lp-hex-inner[data-glyph][b-1rpnkthxdm]::before {
    content: attr(data-glyph);
}

.lp-hex-emblem[b-1rpnkthxdm] {
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-darker));
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-hex-inner[b-1rpnkthxdm] {
    width: 52px;
    height: 52px;
    background: #0b1120;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    color: var(--color-primary);
}

/* ::deep - rendered by the shared Icon component, so it carries that component's scope id. */
.lp-hex-inner[b-1rpnkthxdm]  .lp-hex-icon {
    font-size: 24px;
    color: var(--color-primary);
}

/* h3 for the document outline; margin/line-height are neutralized so the card
   renders exactly as it did when this was a div. */
.lp-why-title[b-1rpnkthxdm] {
    margin: 0;
    line-height: inherit;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: #f4ecd8;
}

.lp-why-body[b-1rpnkthxdm] {
    font-size: 16px;
    line-height: 1.55;
    color: #98a1b5;
}

.lp-more-grid[b-1rpnkthxdm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

/* ---------- Combat ---------- */

.lp-combat-grid[b-1rpnkthxdm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 40px;
    align-items: start;
}

.lp-combat-zones[b-1rpnkthxdm] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-combat-col-title[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: #f4ecd8;
    margin-bottom: 4px;
}

.lp-zone-row[b-1rpnkthxdm] {
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px solid rgba(218, 165, 32, .25);
    border-radius: 6px;
    padding: 18px 22px;
    background: linear-gradient(90deg, rgba(30, 41, 59, .5), rgba(13, 19, 34, .4));
}

.lp-zone-text[b-1rpnkthxdm] {
    flex: 1;
}

.lp-zone-name[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--color-primary);
}

.lp-zone-desc[b-1rpnkthxdm] {
    font-size: 15px;
    color: #98a1b5;
    margin-top: 4px;
}

.lp-zone-chips[b-1rpnkthxdm] {
    display: flex;
    gap: 8px;
}

.lp-zone-chip[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: #0b1120;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-archetype-row[b-1rpnkthxdm] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.lp-archetype-label[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #8b93a7;
}

.lp-archetype-pill[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: #e8c352;
    border: 1px solid rgba(218, 165, 32, .35);
    padding: 6px 14px;
    border-radius: 20px;
}

.lp-mechanics-grid[b-1rpnkthxdm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.lp-mechanic-card[b-1rpnkthxdm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #0d1322;
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    padding: 22px 20px;
}

.lp-mechanic-tag[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    color: #0b1120;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 3px;
}

/* h3 for the document outline - see .lp-why-title. */
.lp-mechanic-title[b-1rpnkthxdm] {
    margin: 0;
    line-height: inherit;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #f4ecd8;
}

.lp-mechanic-body[b-1rpnkthxdm] {
    font-size: 15px;
    line-height: 1.5;
    color: #98a1b5;
}

/* ---------- Classes ---------- */

.lp-class-grid[b-1rpnkthxdm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: 14px;
}

.lp-class-card[b-1rpnkthxdm] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #0d1322;
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
}

.lp-class-card:hover[b-1rpnkthxdm] {
    border-color: rgba(255, 215, 0, .65);
    transform: translateY(-3px);
}

.lp-class-art[b-1rpnkthxdm] {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
}

.lp-class-art img[b-1rpnkthxdm] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}

.lp-premium-badge[b-1rpnkthxdm] {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    color: #0b1120;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    padding: 4px 9px;
    border-radius: 3px;
    pointer-events: none;
}

.lp-class-info[b-1rpnkthxdm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 16px 18px;
}

/* h3 for the document outline - see .lp-why-title. */
.lp-class-name[b-1rpnkthxdm] {
    margin: 0;
    line-height: inherit;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #f4ecd8;
    text-transform: uppercase;
}

.lp-class-tagline[b-1rpnkthxdm] {
    font-size: 14.5px;
    line-height: 1.45;
    color: #98a1b5;
}

.lp-class-meta[b-1rpnkthxdm] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
    font-size: 13px;
    color: #7b8499;
}

.lp-meta-label[b-1rpnkthxdm] {
    color: #e8c352;
}

/* ---------- Guilds ---------- */

.lp-guild-grid[b-1rpnkthxdm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}

.lp-guild-card[b-1rpnkthxdm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #0d1322;
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    padding: 26px 24px;
}

/* h3 for the document outline - see .lp-why-title. */
.lp-guild-title[b-1rpnkthxdm] {
    margin: 0;
    line-height: inherit;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--color-primary);
}

.lp-guild-body[b-1rpnkthxdm] {
    font-size: 15.5px;
    line-height: 1.55;
    color: #98a1b5;
}

/* ---------- Chronicles ---------- */

.lp-chronicles-inner[b-1rpnkthxdm] {
    max-width: 1000px;
    margin: 0 auto;
}

.lp-chronicles-header[b-1rpnkthxdm] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.lp-chronicles-title[b-1rpnkthxdm] {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    color: #f4ecd8;
}

.lp-chronicles-viewall[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    color: #e8c352;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .2s ease;
}

.lp-chronicles-viewall:hover[b-1rpnkthxdm] {
    color: var(--color-primary);
}

.lp-chronicle-card[b-1rpnkthxdm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid rgba(218, 165, 32, .25);
    border-radius: 6px;
    padding: 32px 30px;
    background: linear-gradient(120deg, rgba(30, 41, 59, .45), rgba(13, 19, 34, .5));
    transition: border-color .25s ease;
}

.lp-chronicle-card:hover[b-1rpnkthxdm] {
    border-color: rgba(255, 215, 0, .6);
}

.lp-chronicle-meta-row[b-1rpnkthxdm] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lp-chronicle-badge[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    color: #0b1120;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    padding: 4px 10px;
    border-radius: 3px;
}

.lp-chronicle-meta[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: .12em;
    color: #7b8499;
}

.lp-chronicle-headline[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #f4ecd8;
}

.lp-chronicle-excerpt[b-1rpnkthxdm] {
    font-size: 16.5px;
    line-height: 1.55;
    color: #98a1b5;
}

/* ---------- FAQ ---------- */

.lp-faq-inner[b-1rpnkthxdm] {
    max-width: 820px;
    margin: 0 auto;
}

.lp-faq-inner .lp-section-header[b-1rpnkthxdm] {
    margin-bottom: 48px;
}

.lp-faq-title[b-1rpnkthxdm] {
    font-size: clamp(28px, 3.4vw, 42px);
}

.lp-faq-list[b-1rpnkthxdm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp-faq-item[b-1rpnkthxdm] {
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    background: #0d1322;
    overflow: hidden;
}

/* Accessible accordion pattern: the h3 exists only for the document outline and
   must contribute no box, spacing, or typography of its own. */
.lp-faq-q-heading[b-1rpnkthxdm] {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.lp-faq-question[b-1rpnkthxdm] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 20px 24px;
    text-align: left;
    transition: background .2s ease;
}

.lp-faq-question:hover[b-1rpnkthxdm] {
    background: rgba(218, 165, 32, .06);
}

.lp-faq-q-text[b-1rpnkthxdm] {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #f4ecd8;
}

/* ::deep - rendered by the shared Icon component, so it carries that component's scope id. */
.lp-faq-question[b-1rpnkthxdm]  .lp-faq-mark {
    font-size: 18px;
    color: #e8c352;
    flex-shrink: 0;
}

.lp-faq-answer[b-1rpnkthxdm] {
    display: none;
    padding: 0 24px 22px;
    font-size: 16.5px;
    line-height: 1.6;
    color: #98a1b5;
}

.lp-faq-answer.open[b-1rpnkthxdm] {
    display: block;
}

/* ---------- Responsive (canonical breakpoints only) ---------- */

@media (max-width: 768px) {
    .lp-hero[b-1rpnkthxdm] {
        height: auto;
        min-height: 0;
    }

    .lp-hero-media[b-1rpnkthxdm] {
        flex: none;
        aspect-ratio: 16 / 9;
    }
}
/* /Components/Pets/PetCard.razor.rz.scp.css */
.pet-card[b-wtc4tum2bp] {
    background: linear-gradient(145deg, rgba(30,41,59,0.9), rgba(15,23,42,0.95));
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
}

    .pet-card:hover:not(.pet-card-locked)[b-wtc4tum2bp] {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    }

    .pet-card.pet-card-selected[b-wtc4tum2bp] {
        border-width: 2px;
    }

    .pet-card.pet-card-locked[b-wtc4tum2bp] {
        cursor: default;
        opacity: 0.7;
    }

/* Image area */
.pet-card-image-wrapper[b-wtc4tum2bp] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.pet-card-fallback[b-wtc4tum2bp] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pet-card-img[b-wtc4tum2bp] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pet-card-img-silhouette[b-wtc4tum2bp] {
    filter: brightness(0.4) saturate(0);
}

.img-locked[b-wtc4tum2bp] {
    filter: brightness(0.35);
}

/* Rarity badge */
.pet-card-rarity-badge[b-wtc4tum2bp] {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid;
    color: white;
    background: rgba(0,0,0,0.6);
}

/* Lock overlay */
.pet-card-lock-overlay[b-wtc4tum2bp] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(0,0,0,0.4);
}

.lock-label[b-wtc4tum2bp] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-warning-bright);
    letter-spacing: 0.05em;
}

/* Selected check */
.pet-card-selected-check[b-wtc4tum2bp] {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

/* Info area */
.pet-card-info[b-wtc4tum2bp] {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.pet-card-name[b-wtc4tum2bp] {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pet-card-level[b-wtc4tum2bp] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
}

.pet-level-badge[b-wtc4tum2bp] {
    color: #94a3b8;
    font-weight: 600;
}

.pet-stage-gem[b-wtc4tum2bp] {
    font-size: 0.6rem;
}

.pet-stage-gem.stage-1[b-wtc4tum2bp] { color: #94a3b8; }
.pet-stage-gem.stage-2[b-wtc4tum2bp] { color: #22d3ee; }
.pet-stage-gem.stage-3[b-wtc4tum2bp] { color: var(--color-warning-bright); }

.pet-card-mood[b-wtc4tum2bp] {
    font-size: 0.65rem;
    color: #64748b;
    font-style: italic;
}

.pet-card-acquire-hint[b-wtc4tum2bp] {
    font-size: 0.65rem;
    color: #64748b;
}
/* /Components/Pets/PetSelectionModal.razor.rz.scp.css */
.pet-selection-modal[b-6o23ajs7k9] {
    min-width: 560px;
    max-width: 780px;
}

.pet-modal-filters[b-6o23ajs7k9] {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.pet-search[b-6o23ajs7k9] { flex: 1; }
.pet-rarity-filter[b-6o23ajs7k9] { width: 160px; }

.pet-modal-grid[b-6o23ajs7k9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--space-md);
    max-height: 380px;
    overflow-y: auto;
    padding-right: var(--space-xs);
    margin-bottom: var(--space-lg);
}

.pet-modal-none[b-6o23ajs7k9] {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    aspect-ratio: 1;
    cursor: pointer;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    transition: border-color 0.15s, background 0.15s;
}

    .pet-modal-none:hover[b-6o23ajs7k9] {
        border-color: rgba(148, 163, 184, 0.5);
        background: rgba(255, 255, 255, 0.03);
    }

    .pet-modal-none.selected[b-6o23ajs7k9] {
        border-color: var(--color-info);
        box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
    }

/* Stat preview */
.pet-modal-preview[b-6o23ajs7k9] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.preview-pet-name[b-6o23ajs7k9] {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    color: var(--color-text-lighter);
    font-weight: 600;
}

.preview-stats-grid[b-6o23ajs7k9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.preview-stat[b-6o23ajs7k9] {
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: var(--radius-sm);
    padding: 3px var(--space-sm);
    font-size: var(--font-size-xs);
    color: #93c5fd;
    font-weight: 600;
}

.preview-affinity[b-6o23ajs7k9] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    color: #fde68a;
    margin-top: var(--space-xs);
}
/* /Components/Shared/ActiveAdventureBanner.razor.rz.scp.css */
/* ActiveAdventureBanner scoped styles - Uses Design System Tokens */

.adventure-banner-container[b-393f9jd6m1] {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    padding: var(--space-md) var(--space-xl);
    box-shadow: var(--shadow-gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    z-index: var(--z-fixed);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    flex-shrink: 0;
}

.adventure-banner-content[b-393f9jd6m1] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    min-width: 0;
}

.adventure-banner-icon[b-393f9jd6m1] {
    font-size: var(--font-size-2xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.adventure-banner-text[b-393f9jd6m1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.adventure-banner-label[b-393f9jd6m1] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.adventure-banner-title[b-393f9jd6m1] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: #1a1a1a;
    font-family: var(--font-display);
}

.adventure-banner-return[b-393f9jd6m1] {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: var(--color-primary);
    border: 1px solid var(--color-border-hover);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    transition: all var(--transition-base);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
    height: fit-content;
}

.adventure-banner-return:hover[b-393f9jd6m1] {
    background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
    border-color: var(--color-border-active);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.adventure-banner-return:active[b-393f9jd6m1] {
    transform: translateY(0);
}

.adventure-banner-icon-small[b-393f9jd6m1] {
    font-size: var(--font-size-lg);
}
/* /Components/Shared/BackToTavernBar.razor.rz.scp.css */
.back-to-tavern-bar[b-gcae3birlb] {
    padding: var(--space-sm) var(--space-lg) 0;
}
/* /Components/Shared/CharacterHeroStrip.razor.rz.scp.css */
/* ============================================
   CHARACTER HERO STRIP
   Shared horizontal character band (portrait + identity + vitals + side actions).
   The side-slot contents are styled by the host (parent CSS scope); everything
   rendered here is owned by this file.
   ============================================ */

.hero-strip[b-ro7l4tmym0] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-left: 3px solid var(--color-primary);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
}

/* Class accent on the strip's left edge */
.hero-strip.warrior[b-ro7l4tmym0]   { border-left-color: var(--color-warrior); }
.hero-strip.wizard[b-ro7l4tmym0]    { border-left-color: var(--color-wizard); }
.hero-strip.ranger[b-ro7l4tmym0]    { border-left-color: var(--color-ranger); }
.hero-strip.rogue[b-ro7l4tmym0]     { border-left-color: var(--color-rogue); }
.hero-strip.paladin[b-ro7l4tmym0]   { border-left-color: var(--color-paladin); }
.hero-strip.bard[b-ro7l4tmym0]      { border-left-color: var(--color-bard); }
.hero-strip.cleric[b-ro7l4tmym0]    { border-left-color: var(--color-cleric); }
.hero-strip.monk[b-ro7l4tmym0]      { border-left-color: var(--color-monk); }
.hero-strip.barbarian[b-ro7l4tmym0] { border-left-color: var(--color-barbarian); }
.hero-strip.pirate[b-ro7l4tmym0]    { border-left-color: var(--color-pirate); }

/* Framed portrait — the CharacterPortrait primitive (::deep pierces its isolation). */
.hero-strip[b-ro7l4tmym0]  .character-portrait {
    width: 76px;
    height: 76px;
    border: 2px solid var(--color-border-hover);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.hero-strip[b-ro7l4tmym0]  a.character-portrait:hover,
.hero-strip[b-ro7l4tmym0]  .character-portrait.clickable:hover {
    border-color: var(--color-border-active);
    transform: scale(1.04);
}

.hero-strip[b-ro7l4tmym0]  .character-portrait-img {
    object-position: top center;
}

.hero-strip[b-ro7l4tmym0]  .character-portrait-fallback .mud-icon-root {
    opacity: 0.45;
    font-size: 2.2rem;
}

.hero-strip-identity[b-ro7l4tmym0] {
    min-width: 0;
    flex: 1 1 220px;
}

.hero-strip-name-row[b-ro7l4tmym0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hero-strip-name[b-ro7l4tmym0] {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-strip-level[b-ro7l4tmym0] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-gray-900);
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.78rem;
    white-space: nowrap;
}

.hero-strip-subtitle[b-ro7l4tmym0] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0.15rem 0 0.4rem;
    min-width: 0;
}

.hero-strip-title[b-ro7l4tmym0] {
    font-size: 0.8rem;
    color: var(--color-text-primary);
    font-style: italic;
}

.hero-strip-info[b-ro7l4tmym0] {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.hero-strip-vitals[b-ro7l4tmym0] {
    flex: 1 1 260px;
    min-width: 220px;
    max-width: 380px;
}

/* Bars are <ResourceBar> child components; ::deep tightens the inter-bar spacing.
   The bar look itself comes from the canonical .stat-bar + slim hero treatment. */
.hero-strip-vitals[b-ro7l4tmym0]  .stat-bar-container {
    margin-bottom: 0.45rem;
}

.hero-strip-vitals[b-ro7l4tmym0]  .stat-bar-container:last-child {
    margin-bottom: 0;
}

.hero-strip-side[b-ro7l4tmym0] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    flex-shrink: 0;
}

/* ============================================
   COMBAT READINESS GRADE BADGE
   ============================================ */

.readiness-badge[b-ro7l4tmym0] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.74rem;
    border: 1px solid currentColor;
    background: rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

.readiness-badge .mud-icon-root[b-ro7l4tmym0] {
    font-size: 0.95rem;
}

.readiness-a[b-ro7l4tmym0] { color: var(--color-success); }
.readiness-b[b-ro7l4tmym0] { color: #84cc16; }
.readiness-c[b-ro7l4tmym0] { color: #eab308; }
.readiness-d[b-ro7l4tmym0] { color: var(--color-warning); }
.readiness-f[b-ro7l4tmym0] { color: var(--color-danger); }

/* ============================================
   MICRO-STATS
   ============================================ */

.micro-stats[b-ro7l4tmym0] {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.micro-stat[b-ro7l4tmym0] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--color-text-light);
    font-weight: 600;
}

.micro-stat .mud-icon-root[b-ro7l4tmym0] {
    color: var(--color-warning-light);
    font-size: 0.95rem;
}

/* Max Level Badge (replaces the XP bar at level cap) */
.max-level-badge[b-ro7l4tmym0] {
    background: linear-gradient(135deg, var(--color-border-hover), rgba(218, 165, 32, 0.1));
    border: 1px solid var(--color-border-active);
    border-radius: 8px;
    padding: 0.4rem;
    text-align: center;
}

.max-level-text[b-ro7l4tmym0] {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-border-active);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .hero-strip[b-ro7l4tmym0] {
        flex-wrap: wrap;
    }

    .hero-strip-vitals[b-ro7l4tmym0] {
        flex-basis: 100%;
        max-width: none;
        order: 4;
    }

    .hero-strip-side[b-ro7l4tmym0] {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        order: 5;
        flex-basis: 100%;
    }
}

@media (max-width: 768px) {
    .hero-strip[b-ro7l4tmym0] {
        gap: 0.85rem;
        padding: 0.85rem 1rem;
    }

    .hero-strip[b-ro7l4tmym0]  .character-portrait {
        width: 60px;
        height: 60px;
    }

    .hero-strip-name[b-ro7l4tmym0] {
        font-size: 1rem;
    }
}
/* /Components/Shared/CombatReadinessModal.razor.rz.scp.css */
/* Combat Readiness Modal */
.combat-readiness-modal[b-oorfsw9xg1] {
    padding: 0;
}

/* Header Section */
.modal-header-section[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-700) 100%);
    border-radius: 8px 8px 0 0;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
}

.modal-header-section .header-icon[b-oorfsw9xg1] {
    color: var(--color-primary);
}

.modal-header-section .header-text[b-oorfsw9xg1] {
    flex: 1;
}

.modal-header-section .header-title[b-oorfsw9xg1] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

.modal-header-section .header-subtitle[b-oorfsw9xg1] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0.25rem 0 0 0;
}

/* Info Section */
.info-section[b-oorfsw9xg1] {
    background: var(--color-gray-800);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.info-header[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1rem;
}

.info-text[b-oorfsw9xg1] {
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0;
    font-size: 0.9rem;
}

/* Current Score Section */
.current-score-section[b-oorfsw9xg1] {
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 2px solid var(--color-gray-700);
}

.score-display[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-gray-700);
}

.score-grade[b-oorfsw9xg1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.score-grade .grade-letter[b-oorfsw9xg1] {
    font-size: 4rem;
    font-weight: 700;
    font-family: 'Cinzel', serif;
    line-height: 1;
}

.score-grade .grade-label[b-oorfsw9xg1] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.score-percentage[b-oorfsw9xg1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.score-percentage .percentage-value[b-oorfsw9xg1] {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.score-percentage .percentage-label[b-oorfsw9xg1] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* Grade Classes */
.score-grade.grade-a .grade-letter[b-oorfsw9xg1],
.score-grade.grade-a + .score-percentage .percentage-value[b-oorfsw9xg1] {
    color: var(--color-success);
}

.score-grade.grade-b .grade-letter[b-oorfsw9xg1],
.score-grade.grade-b + .score-percentage .percentage-value[b-oorfsw9xg1] {
    color: var(--color-info);
}

.score-grade.grade-c .grade-letter[b-oorfsw9xg1],
.score-grade.grade-c + .score-percentage .percentage-value[b-oorfsw9xg1] {
    color: var(--color-warning);
}

.score-grade.grade-d .grade-letter[b-oorfsw9xg1],
.score-grade.grade-d + .score-percentage .percentage-value[b-oorfsw9xg1] {
    color: #f97316;
}

.score-grade.grade-f .grade-letter[b-oorfsw9xg1],
.score-grade.grade-f + .score-percentage .percentage-value[b-oorfsw9xg1] {
    color: var(--color-danger);
}

/* Grade Scale */
.grade-scale[b-oorfsw9xg1] {
    display: flex;
    gap: 0.5rem;
}

.grade-item[b-oorfsw9xg1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    background: var(--color-gray-900);
    border-radius: 6px;
    border: 2px solid var(--color-gray-800);
    transition: all 0.3s ease;
}

.grade-item.active[b-oorfsw9xg1] {
    border-color: currentColor;
    box-shadow: 0 0 12px currentColor;
}

.grade-item .grade-range[b-oorfsw9xg1] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.grade-item .grade-mark[b-oorfsw9xg1] {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'Cinzel', serif;
}

.grade-item .grade-status[b-oorfsw9xg1] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.grade-item:nth-child(1) .grade-mark[b-oorfsw9xg1] { color: var(--color-success); }
.grade-item:nth-child(2) .grade-mark[b-oorfsw9xg1] { color: var(--color-info); }
.grade-item:nth-child(3) .grade-mark[b-oorfsw9xg1] { color: var(--color-warning); }
.grade-item:nth-child(4) .grade-mark[b-oorfsw9xg1] { color: #f97316; }
.grade-item:nth-child(5) .grade-mark[b-oorfsw9xg1] { color: var(--color-danger); }

/* Breakdown Section */
.breakdown-section[b-oorfsw9xg1] {
    margin-bottom: 1.5rem;
}

.breakdown-header[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1rem;
}

.breakdown-items[b-oorfsw9xg1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.breakdown-item[b-oorfsw9xg1] {
    background: var(--color-gray-800);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--color-gray-700);
}

.breakdown-item-header[b-oorfsw9xg1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.item-title-group[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-title[b-oorfsw9xg1] {
    font-weight: 600;
    color: var(--color-text-lighter);
}

.item-status[b-oorfsw9xg1] {
    font-size: 0.875rem;
    font-weight: 500;
}

.item-score-group[b-oorfsw9xg1] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.item-score[b-oorfsw9xg1] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.item-max-score[b-oorfsw9xg1] {
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
}

.breakdown-progress[b-oorfsw9xg1] {
    margin-bottom: 0.5rem;
}

.breakdown-progress .progress-bar[b-oorfsw9xg1] {
    width: 100%;
    height: 8px;
    background: var(--color-gray-900);
    border-radius: 4px;
    overflow: hidden;
}

.breakdown-progress .progress-fill[b-oorfsw9xg1] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.breakdown-detail[b-oorfsw9xg1] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.equipment-details-list[b-oorfsw9xg1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.equipment-detail-item[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--color-gray-900);
    border-radius: 4px;
    font-size: 0.875rem;
}

.equipment-detail-item.equipped[b-oorfsw9xg1] {
    color: var(--color-success);
}

.equipment-detail-item.equipped .equipment-icon[b-oorfsw9xg1] {
    color: var(--color-success);
}

.equipment-detail-item.empty[b-oorfsw9xg1] {
    color: var(--color-text-tertiary);
}

.equipment-detail-item.empty .equipment-icon[b-oorfsw9xg1] {
    color: var(--color-danger);
}

.breakdown-improvement[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--color-gray-900);
    border-radius: 4px;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-warning-bright);
}

/* Categories Section */
.categories-section[b-oorfsw9xg1] {
    margin-bottom: 1.5rem;
}

.categories-header[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1rem;
}

.category-cards[b-oorfsw9xg1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.category-card[b-oorfsw9xg1] {
    background: var(--color-gray-800);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--color-gray-700);
}

.category-icon-wrapper[b-oorfsw9xg1] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.category-icon-wrapper.primary[b-oorfsw9xg1] {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
    color: white;
}

.category-icon-wrapper.hp[b-oorfsw9xg1] {
    background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-barbarian) 100%);
    color: white;
}

.category-icon-wrapper.equipment[b-oorfsw9xg1] {
    background: linear-gradient(135deg, var(--color-monk) 0%, #7c3aed 100%);
    color: white;
}

.category-icon-wrapper.level[b-oorfsw9xg1] {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    color: white;
}

.category-title[b-oorfsw9xg1] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-lighter);
    margin: 0 0 0.5rem 0;
}

.category-description[b-oorfsw9xg1] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Tips Section */
.tips-section[b-oorfsw9xg1] {
    background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-700) 100%);
    border-radius: 8px;
    padding: 1rem;
    border: 2px solid var(--color-primary);
}

.tips-header[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1rem;
}

.tips-list[b-oorfsw9xg1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tip-item[b-oorfsw9xg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--color-gray-900);
    border-radius: 4px;
    color: var(--color-text-light);
    font-size: 0.875rem;
}

.tip-item .tip-arrow[b-oorfsw9xg1] {
    color: var(--color-warning-bright);
}

/* Responsive Design */
@media (max-width: 768px) {
    .category-cards[b-oorfsw9xg1] {
        grid-template-columns: 1fr;
    }

    .grade-scale[b-oorfsw9xg1] {
        flex-wrap: wrap;
    }

    .score-display[b-oorfsw9xg1] {
        flex-direction: column;
        gap: 1rem;
    }

    .modal-header-section .header-title[b-oorfsw9xg1] {
        font-size: 1.25rem;
    }
}
/* /Components/Shared/Filters/CompareTooltip.razor.rz.scp.css */
/* Compare Tooltip Component Styles */

.compare-tooltip[b-tn4085v97q] {
    background: linear-gradient(145deg, var(--color-bg-elevated-alt), var(--color-bg-elevated));
    border: 2px solid rgba(139, 92, 246, 0.4);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-top: var(--space-sm);
}

.compare-header[b-tn4085v97q] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    color: var(--color-monk-lighter);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.compare-content[b-tn4085v97q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.no-equipped[b-tn4085v97q] {
    text-align: center;
    padding: var(--space-sm);
}

.empty-indicator[b-tn4085v97q] {
    color: var(--color-text-tertiary);
    font-style: italic;
    font-size: var(--font-size-sm);
}

.compare-row[b-tn4085v97q] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.compare-row.upgrade[b-tn4085v97q] {
    background: rgba(34, 197, 94, 0.1);
}

.compare-row.downgrade[b-tn4085v97q] {
    background: rgba(239, 68, 68, 0.1);
}

.compare-row.sidegrade[b-tn4085v97q] {
    background: rgba(245, 158, 11, 0.1);
}

.compare-label[b-tn4085v97q] {
    color: var(--color-text-tertiary);
    min-width: 70px;
}

.compare-value.equipped[b-tn4085v97q] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.compare-current[b-tn4085v97q] {
    color: var(--color-text-secondary);
}

.compare-arrow[b-tn4085v97q] {
    color: var(--color-text-tertiary);
    padding: 0 var(--space-xs);
}

.compare-new[b-tn4085v97q] {
    font-weight: var(--font-weight-semibold);
}

.upgrade .compare-new[b-tn4085v97q] {
    color: var(--color-success-light);
}

.downgrade .compare-new[b-tn4085v97q] {
    color: var(--color-danger-light);
}

.sidegrade .compare-new[b-tn4085v97q] {
    color: var(--color-warning-light);
}

.compare-diff[b-tn4085v97q] {
    margin-left: auto;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.upgrade .compare-diff[b-tn4085v97q] {
    color: var(--color-success-light);
}

.downgrade .compare-diff[b-tn4085v97q] {
    color: var(--color-danger-light);
}

.sidegrade .compare-diff[b-tn4085v97q] {
    color: var(--color-warning-light);
}
/* /Components/Shared/Filters/EquipableFilter.razor.rz.scp.css */
/* EquipableFilter Component Styles - Fantasy RPG Theme */

.equipable-filter[b-5uhar1bnoj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.equipable-filter-checkbox[b-5uhar1bnoj] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    user-select: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.equipable-filter-checkbox:hover[b-5uhar1bnoj] {
    background: rgba(34, 197, 94, 0.1);
}

.equipable-filter-checkbox input[type="checkbox"][b-5uhar1bnoj] {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(34, 197, 94, 0.4);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated-alt);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.equipable-filter-checkbox input[type="checkbox"]:hover[b-5uhar1bnoj] {
    border-color: var(--color-success);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}

.equipable-filter-checkbox input[type="checkbox"]:checked[b-5uhar1bnoj] {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    border-color: var(--color-success);
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}

.equipable-filter-checkbox input[type="checkbox"]:checked[b-5uhar1bnoj]::after {
    content: '?';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

/* Focus state for accessibility */
.equipable-filter-checkbox input[type="checkbox"]:focus-visible[b-5uhar1bnoj] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-border-hover);
}

.equipable-filter-label[b-5uhar1bnoj] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color var(--transition-base);
}

.equipable-filter-checkbox:hover .equipable-filter-label[b-5uhar1bnoj] {
    color: var(--color-success-light);
}

.equipable-filter-label .mud-icon[b-5uhar1bnoj] {
    color: var(--color-success);
    transition: opacity var(--transition-base);
}

.equipable-filter-checkbox:not(:has(input:checked)) .equipable-filter-label .mud-icon[b-5uhar1bnoj] {
    color: var(--color-text-tertiary);
    opacity: 0.5;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden[b-5uhar1bnoj] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive */
@media (max-width: 640px) {
    .equipable-filter[b-5uhar1bnoj] {
        justify-content: center;
    }

    .equipable-filter-label[b-5uhar1bnoj] {
        font-size: var(--font-size-xs);
    }
}
/* /Components/Shared/Filters/PriceDisplay.razor.rz.scp.css */
/* PriceDisplay Component Styles - Fantasy RPG Theme */

.price-display[b-yasrxod4ez] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.price-label[b-yasrxod4ez] {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--font-weight-semibold);
}

.price-value[b-yasrxod4ez] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
}

.price-value.can-afford[b-yasrxod4ez] {
    color: var(--color-success-light);
}

.price-value.cannot-afford[b-yasrxod4ez] {
    color: var(--color-danger-light);
}

.price-gold[b-yasrxod4ez] {
    color: var(--color-primary);
    text-shadow: 0 0 4px var(--color-border-active);
}

.price-silver[b-yasrxod4ez] {
    color: var(--color-silver);
}

.price-copper[b-yasrxod4ez] {
    color: var(--color-bronze);
}
/* /Components/Shared/Filters/SearchFilter.razor.rz.scp.css */
/* Search Filter Component Styles */

.search-filter-container[b-nf51x8f4fg] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.search-input-wrapper[b-nf51x8f4fg] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.search-icon[b-nf51x8f4fg] {
    position: absolute;
    left: var(--space-md);
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.search-input[b-nf51x8f4fg] {
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    padding-left: calc(var(--space-md) + 24px + var(--space-sm));
    padding-right: calc(var(--space-md) + 24px);
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    transition: all var(--transition-base);
}

.search-input[b-nf51x8f4fg]::placeholder {
    color: var(--color-text-tertiary);
}

.search-input:focus[b-nf51x8f4fg] {
    outline: none;
    border-color: var(--color-border-active);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}

.search-clear[b-nf51x8f4fg] {
    position: absolute;
    right: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-clear:hover[b-nf51x8f4fg] {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}

.search-results-count[b-nf51x8f4fg] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 640px) {
    .search-input-wrapper[b-nf51x8f4fg] {
        min-width: 100%;
        max-width: 100%;
    }

    .search-filter-container[b-nf51x8f4fg] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Shared/Filters/SecondaryFilters.razor.rz.scp.css */
/* SecondaryFilters Component Styles - Fantasy RPG Theme */

.secondary-filters[b-9tp3vtk2al] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.secondary-filter[b-9tp3vtk2al] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.secondary-filter:hover[b-9tp3vtk2al] {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
    border-color: var(--color-border-hover);
    transform: translateY(-1px);
}

.secondary-filter.active[b-9tp3vtk2al] {
    background: linear-gradient(135deg, var(--color-border-base), rgba(255, 215, 0, 0.08));
    border-color: var(--color-border-active);
    color: var(--color-primary);
    box-shadow: 0 0 12px var(--color-border-base);
}

.filter-count[b-9tp3vtk2al] {
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    min-width: 24px;
    text-align: center;
}

.secondary-filter.active .filter-count[b-9tp3vtk2al] {
    background: var(--color-border-hover);
}

/* Rarity Color Classes */
.rarity-common[b-9tp3vtk2al] { color: var(--color-rarity-common); }
.rarity-uncommon[b-9tp3vtk2al] { color: var(--color-rarity-uncommon); }
.rarity-rare[b-9tp3vtk2al] { color: var(--color-rarity-rare); }
.rarity-epic[b-9tp3vtk2al] { color: var(--color-rarity-epic); }
.rarity-legendary[b-9tp3vtk2al] { 
    color: var(--color-rarity-legendary);
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

/* Responsive */
@media (max-width: 640px) {
    .secondary-filters[b-9tp3vtk2al] {
        gap: var(--space-xs);
        padding: var(--space-sm);
    }

    .secondary-filter[b-9tp3vtk2al] {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.65rem;
    }
}
/* /Components/Shared/Filters/SkeletonCard.razor.rz.scp.css */
/* Skeleton Card - Loading Placeholder */

.skeleton-card[b-vapm1s6b2s] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    overflow: hidden;
}

/* Skeleton shimmer animation */
@keyframes skeleton-shimmer-b-vapm1s6b2s {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton-line[b-vapm1s6b2s],
.skeleton-badge[b-vapm1s6b2s],
.skeleton-chip[b-vapm1s6b2s],
.skeleton-price[b-vapm1s6b2s],
.skeleton-qty[b-vapm1s6b2s],
.skeleton-button[b-vapm1s6b2s] {
    background: linear-gradient(
        90deg,
        var(--color-border-subtle) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        var(--color-border-subtle) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-vapm1s6b2s 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

.skeleton-header[b-vapm1s6b2s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.skeleton-name[b-vapm1s6b2s] {
    height: 20px;
    flex: 1;
    max-width: 60%;
}

.skeleton-badge[b-vapm1s6b2s] {
    height: 24px;
    width: 70px;
    border-radius: var(--radius-lg);
}

.skeleton-stats[b-vapm1s6b2s] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.skeleton-chip[b-vapm1s6b2s] {
    height: 32px;
    width: 80px;
    border-radius: var(--radius-lg);
}

.skeleton-chip-short[b-vapm1s6b2s] {
    width: 50px;
}

.skeleton-price[b-vapm1s6b2s] {
    height: 40px;
    width: 100%;
    border-radius: var(--radius-lg);
}

.skeleton-footer[b-vapm1s6b2s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
    margin-top: auto;
}

.skeleton-qty[b-vapm1s6b2s] {
    height: 16px;
    width: 50px;
}

.skeleton-button[b-vapm1s6b2s] {
    height: 36px;
    width: 80px;
    border-radius: var(--radius-lg);
}

/* Responsive */
@media (max-width: 640px) {
    .skeleton-card[b-vapm1s6b2s] {
        padding: var(--space-md);
    }

    .skeleton-footer[b-vapm1s6b2s] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .skeleton-button[b-vapm1s6b2s] {
        width: 100%;
    }
}
/* /Components/Shared/Filters/SkeletonGrid.razor.rz.scp.css */
/* Skeleton Grid - Loading Placeholder Container */

.skeleton-grid-container[b-z029ewxaqz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.skeleton-section-header[b-z029ewxaqz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.skeleton-title[b-z029ewxaqz] {
    height: 24px;
    width: 150px;
}

.skeleton-subtitle[b-z029ewxaqz] {
    height: 16px;
    width: 200px;
}

.skeleton-filters[b-z029ewxaqz] {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.skeleton-filter[b-z029ewxaqz] {
    height: 36px;
    width: 120px;
    background: linear-gradient(
        90deg,
        var(--color-border-subtle) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        var(--color-border-subtle) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-z029ewxaqz 1.5s ease-in-out infinite;
    border-radius: var(--radius-lg);
}

.skeleton-filter-short[b-z029ewxaqz] {
    width: 80px;
}

@keyframes skeleton-shimmer-b-z029ewxaqz {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Use shared item-grid styling from merchant-shared.css */
/* /Components/Shared/Filters/SortChips.razor.rz.scp.css */
.sort-chips[b-014qp395la] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

.sort-label[b-014qp395la] {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-right: 0.125rem;
}

.sort-chip[b-014qp395la] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: var(--surface-dark, rgba(255, 255, 255, 0.04));
    color: var(--text-secondary, #aaa);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.4;
}

.sort-chip:hover[b-014qp395la] {
    background: var(--surface-hover, rgba(255, 255, 255, 0.08));
    color: var(--text-primary, #fff);
    border-color: var(--border-hover, rgba(255, 255, 255, 0.2));
}

.sort-chip.active[b-014qp395la] {
    background: var(--primary-surface, rgba(33, 150, 243, 0.15));
    color: var(--primary-color, #42a5f5);
    border-color: var(--primary-color, #42a5f5);
    font-weight: 600;
}

.sort-chip.active:hover[b-014qp395la] {
    background: var(--primary-surface-hover, rgba(33, 150, 243, 0.25));
}

.sort-arrow[b-014qp395la] {
    font-size: 0.875rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.sort-chip.asc .sort-arrow[b-014qp395la] {
    color: var(--primary-color, #42a5f5);
}

.sort-chip.desc .sort-arrow[b-014qp395la] {
    color: var(--primary-color, #42a5f5);
}

@media (max-width: 768px) {
    .sort-chips[b-014qp395la] {
        gap: 0.25rem;
    }

    .sort-chip[b-014qp395la] {
        padding: 0.2rem 0.5rem;
        font-size: 0.6875rem;
    }

    .sort-label[b-014qp395la] {
        font-size: 0.6875rem;
    }
}
/* /Components/Shared/Items/ArmorCard.razor.rz.scp.css */
/* ArmorCard Component Styles */

.item-card[b-wgh695ilcm] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid var(--color-border-base);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: relative;
    overflow: hidden;
}

    .item-card[b-wgh695ilcm]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), transparent);
        opacity: 0;
        transition: opacity var(--transition-base);
    }

    .item-card:hover[b-wgh695ilcm] {
        transform: translateY(-3px);
        border-color: rgba(59, 130, 246, 0.35);
        box-shadow: var(--shadow-lg), 0 0 20px rgba(59, 130, 246, 0.12);
    }

        .item-card:hover[b-wgh695ilcm]::before {
            opacity: 1;
        }

    .item-card.item-card-can-equip[b-wgh695ilcm] {
        border-color: rgba(34, 197, 94, 0.55) !important;
        box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2), 0 4px 16px rgba(34, 197, 94, 0.15) !important;
    }

        .item-card.item-card-can-equip[b-wgh695ilcm]::before {
            background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent);
            opacity: 1;
        }

    .item-card.item-card-cannot-afford[b-wgh695ilcm] {
        opacity: 0.48 !important;
        filter: grayscale(0.4) !important;
        border-color: rgba(239, 68, 68, 0.25) !important;
    }

        .item-card.item-card-cannot-afford:hover[b-wgh695ilcm] {
            transform: none !important;
            box-shadow: none !important;
        }

    .item-card.item-card-owned[b-wgh695ilcm] {
        border-color: rgba(99, 102, 241, 0.55) !important;
        box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.15) !important;
    }

        .item-card.item-card-owned[b-wgh695ilcm]::before {
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent);
            opacity: 1;
        }

    .item-card.equipped[b-wgh695ilcm] {
        border-color: rgba(34, 197, 94, 0.5) !important;
        background: linear-gradient(145deg, rgba(34, 197, 94, 0.1), var(--color-bg-elevated-alt)) !important;
    }

        .item-card.equipped[b-wgh695ilcm]::before {
            background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent);
            opacity: 1;
        }

    .item-card.level-restricted[b-wgh695ilcm] {
        opacity: 0.7;
    }

.item-art-zone[b-wgh695ilcm] {
    position: relative;
    width: 100%;
    height: 72px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.09) 0%, rgba(99, 102, 241, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.item-art-zone-inner[b-wgh695ilcm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

    .item-art-zone-inner .mud-icon-root[b-wgh695ilcm] {
        font-size: 2.25rem !important;
        opacity: 0.75;
        filter: drop-shadow(0 2px 8px rgba(59, 130, 246, 0.35));
        color: rgba(96, 165, 250, 0.85) !important;
    }

.item-art-img[b-wgh695ilcm] {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
}

.rarity-badge[b-wgh695ilcm] {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rarity-uncommon[b-wgh695ilcm] {
    background: rgba(34,197,94,0.22);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
}

.rarity-rare[b-wgh695ilcm] {
    background: rgba(59,130,246,0.22);
    color: #60a5fa;
    border: 1px solid rgba(59,130,246,0.3);
}

.rarity-epic[b-wgh695ilcm] {
    background: rgba(168,85,247,0.22);
    color: #c084fc;
    border: 1px solid rgba(168,85,247,0.3);
}

.rarity-legendary[b-wgh695ilcm] {
    background: rgba(255,215,0,0.22);
    color: #fcd34d;
    border: 1px solid rgba(255,215,0,0.35);
}

/* ===== STATUS BADGE (art-zone overlay, top-right) ===== */
.item-status-badge[b-wgh695ilcm] {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 2;
    white-space: nowrap;
}

.badge-status-equip[b-wgh695ilcm] {
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.badge-status-poor[b-wgh695ilcm] {
    background: rgba(245, 158, 11, 0.22);
    color: var(--color-warning-bright);
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.badge-status-owned[b-wgh695ilcm] {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-status-equipped[b-wgh695ilcm] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-light);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.badge-status-restricted[b-wgh695ilcm] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger-light);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.badge-status-hidden[b-wgh695ilcm] {
    display: none;
}

.item-header[b-wgh695ilcm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
}

.item-name[b-wgh695ilcm] {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    flex: 1;
    line-height: 1.3;
}

.item-badges[b-wgh695ilcm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: flex-end;
}

.item-type-badge[b-wgh695ilcm] {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-equipped[b-wgh695ilcm] {
    background: rgba(34,197,94,0.2);
    color: var(--color-success-light);
    border: 1px solid rgba(34,197,94,0.4);
}

.item-stats[b-wgh695ilcm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.stat-chip[b-wgh695ilcm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.07);
    color: var(--color-text-secondary);
}

.stat-ac[b-wgh695ilcm] {
    color: var(--color-info-light);
    border-color: rgba(59,130,246,0.2);
}

.stat-type[b-wgh695ilcm] {
    color: var(--color-text-tertiary);
}

.stat-level[b-wgh695ilcm] {
    color: var(--color-warning-light);
    border-color: rgba(245,158,11,0.2);
}

/* Who may use the item ("Ranger only"), beside its level on every card; amber when it isn't the viewer's class. */
.stat-class[b-wgh695ilcm] {
    color: var(--color-text-secondary);
    border-color: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
}

.stat-class.is-locked[b-wgh695ilcm] {
    color: var(--color-warning-light);
    background: color-mix(in srgb, var(--color-warning-light) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-warning-light) 45%, transparent);
}

.stat-bonus[b-wgh695ilcm] {
    color: var(--color-monk-lighter);
    border-color: rgba(139,92,246,0.2);
}

.armor-light[b-wgh695ilcm] {
    background: rgba(34,197,94,0.15);
    color: var(--color-success-light);
    border-color: rgba(34,197,94,0.2);
}

.armor-medium[b-wgh695ilcm] {
    background: rgba(245,158,11,0.15);
    color: var(--color-warning-light);
    border-color: rgba(245,158,11,0.2);
}

.armor-heavy[b-wgh695ilcm] {
    background: rgba(239,68,68,0.15);
    color: var(--color-danger-light);
    border-color: rgba(239,68,68,0.2);
}

.item-lore-preview[b-wgh695ilcm] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(139,92,246,0.08);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: var(--radius-lg);
    cursor: default;
    transition: background var(--transition-base);
}

    .item-lore-preview:hover[b-wgh695ilcm], .item-lore-preview:focus[b-wgh695ilcm] {
        background: rgba(139,92,246,0.14);
    }

[b-wgh695ilcm] .lore-icon {
    color: var(--color-monk-lighter);
    flex-shrink: 0;
    margin-top: 2px;
}

.lore-text[b-wgh695ilcm] {
    font-size: var(--font-size-sm);
    color: var(--color-monk-lighter);
    font-style: italic;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all var(--transition-base);
}

.item-lore-preview:hover .lore-text[b-wgh695ilcm], .item-lore-preview:focus .lore-text[b-wgh695ilcm] {
    -webkit-line-clamp: unset;
}

/* ===== AVG / COMPARISON LINE ===== */
.item-avg-line[b-wgh695ilcm] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    min-height: 1.3em;
}

.avg-label[b-wgh695ilcm] {
    color: var(--color-text-tertiary);
}

.avg-value.upgrade[b-wgh695ilcm] {
    color: var(--color-success-light);
}

.avg-value.downgrade[b-wgh695ilcm] {
    color: var(--color-text-tertiary);
}

/* ===== FOOTER (price + actions in one row) ===== */
.item-footer[b-wgh695ilcm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
    flex-wrap: wrap;
}

.footer-price[b-wgh695ilcm] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-display);
    white-space: nowrap;
}

    .footer-price.affordable[b-wgh695ilcm] {
        color: var(--color-success-light);
    }

    .footer-price.unaffordable[b-wgh695ilcm] {
        color: var(--color-danger-light);
    }

    .footer-price.sell-price[b-wgh695ilcm] {
        color: var(--color-warning-light);
    }

.shortfall-hint[b-wgh695ilcm] {
    font-size: 0.7rem;
    color: #6b7280;
    white-space: nowrap;
}

.item-warning[b-wgh695ilcm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

    .item-warning.level-warning[b-wgh695ilcm] {
        background: rgba(239,68,68,0.15);
        border: 1px solid rgba(239,68,68,0.35);
        color: var(--color-danger-light);
    }

    .item-warning.class-warning[b-wgh695ilcm] {
        background: rgba(245,158,11,0.1);
        border: 1px solid rgba(245,158,11,0.25);
        color: var(--color-warning-light);
    }

[b-wgh695ilcm] .btn-equip {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)) !important;
    color: var(--color-gray-900) !important;
    font-family: var(--font-display) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: var(--space-sm) var(--space-xl) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-base) !important;
    box-shadow: 0 4px 12px rgba(255,215,0,0.25) !important;
    min-height: 36px !important;
}

    [b-wgh695ilcm] .btn-equip:hover:not(:disabled) {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(255,215,0,0.35) !important;
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
    }

    [b-wgh695ilcm] .btn-equip:disabled {
        opacity: 0.35 !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
        transform: none !important;
    }

@media (max-width: 640px) {
    .item-card[b-wgh695ilcm] {
        padding: var(--space-md);
    }

    .item-name[b-wgh695ilcm] {
        font-size: var(--font-size-base);
    }

    .stat-chip[b-wgh695ilcm] {
        font-size: var(--font-size-xs);
        padding: var(--space-xs);
    }

    .item-footer[b-wgh695ilcm] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-wgh695ilcm] .btn-equip {
        width: 100% !important;
        justify-content: center !important;
    }
}
/* /Components/Shared/Items/ConsumableCard.razor.rz.scp.css */
/* ConsumableCard Component Styles - Fantasy RPG Theme */

.item-card[b-70xaujb2vo] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid var(--color-border-base);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    transition: all var(--transition-slow);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: relative;
    overflow: hidden;
}

    .item-card[b-70xaujb2vo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(var(--color-success), 0.3), transparent);
        opacity: 0;
        transition: opacity var(--transition-base);
    }

    .item-card:hover[b-70xaujb2vo] {
        transform: translateY(-3px);
        border-color: rgba(34, 197, 94, 0.3);
        box-shadow: var(--shadow-lg), 0 0 20px rgba(34, 197, 94, 0.1);
    }

        .item-card:hover[b-70xaujb2vo]::before {
            opacity: 1;
        }

    /* Unaffordable state */
    .item-card.unaffordable[b-70xaujb2vo] {
        opacity: 0.6;
        border-color: rgba(239, 68, 68, 0.3);
    }

    /* Level restricted state */
    .item-card.level-restricted[b-70xaujb2vo] {
        opacity: 0.7;
    }

    /* Phase 1 - can equip/use (affordable + meets requirements) */
    .item-card.item-card-can-equip[b-70xaujb2vo] {
        border: 1px solid rgba(34, 197, 94, 0.45) !important;
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.12);
    }

    /* Phase 1 - cannot afford */
    .item-card.item-card-cannot-afford[b-70xaujb2vo] {
        opacity: 0.52;
        filter: grayscale(0.3);
    }

/* Header */
.item-header[b-70xaujb2vo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
}

.item-name[b-70xaujb2vo] {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    flex: 1;
    line-height: 1.3;
}

/* Rarity colors */
.rarity-common[b-70xaujb2vo] {
    color: var(--color-rarity-common);
}

.rarity-uncommon[b-70xaujb2vo] {
    color: var(--color-rarity-uncommon);
}

.rarity-rare[b-70xaujb2vo] {
    color: var(--color-rarity-rare);
}

.rarity-epic[b-70xaujb2vo] {
    color: var(--color-rarity-epic);
}

.rarity-legendary[b-70xaujb2vo] {
    color: var(--color-rarity-legendary);
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
}

.item-badges[b-70xaujb2vo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: flex-end;
}

/* Badges */
.item-type-badge[b-70xaujb2vo] {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-consumable[b-70xaujb2vo] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-light);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

/* Description */
.item-description[b-70xaujb2vo] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-style: italic;
    line-height: 1.5;
}

/* Description Hover Preview */
.item-lore-preview[b-70xaujb2vo] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-lg);
    cursor: default;
    transition: all var(--transition-base);
}

    .item-lore-preview:hover[b-70xaujb2vo],
    .item-lore-preview:focus[b-70xaujb2vo] {
        background: rgba(139, 92, 246, 0.14);
    }

[b-70xaujb2vo] .lore-icon {
    color: var(--badge-purple);
    flex-shrink: 0;
    margin-top: 2px;
}

.lore-text[b-70xaujb2vo] {
    font-size: var(--font-size-sm);
    color: var(--color-monk-lighter);
    font-style: italic;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all var(--transition-base);
}

.item-lore-preview:hover .lore-text[b-70xaujb2vo],
.item-lore-preview:focus .lore-text[b-70xaujb2vo] {
    -webkit-line-clamp: unset;
}

/* Effects */
.item-effects[b-70xaujb2vo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.effect-chip[b-70xaujb2vo] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.effect-hp[b-70xaujb2vo] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: var(--color-danger-light);
}

.effect-mana[b-70xaujb2vo] {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: var(--color-info-light);
}

.effect-buff[b-70xaujb2vo] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: var(--color-warning-light);
}

.effect-damage[b-70xaujb2vo] {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: var(--color-monk-lighter);
}

.effect-full[b-70xaujb2vo] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: var(--color-success-light);
}

.effect-more[b-70xaujb2vo] {
    background: var(--color-border-subtle);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-tertiary);
}

/* Price */
.item-price[b-70xaujb2vo] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-display);
}

    .item-price.affordable[b-70xaujb2vo] {
        background: rgba(34, 197, 94, 0.1);
        color: var(--color-success-light);
        border: 1px solid rgba(34, 197, 94, 0.25);
    }

    .item-price.unaffordable[b-70xaujb2vo] {
        background: rgba(239, 68, 68, 0.1);
        color: var(--color-danger-light);
        border: 1px solid rgba(239, 68, 68, 0.25);
        flex-wrap: wrap;
    }

/* Shortfall badge - shows how much gold is needed (inside price row) */
.shortfall-badge[b-70xaujb2vo] {
    margin-left: auto;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

/* Shortfall hint - shown below the price row */
.shortfall-hint[b-70xaujb2vo] {
    font-size: 0.7rem;
    color: #6b7280;
    text-align: center;
    margin-top: 2px;
}

/* Warning - base styles */
.item-warning[b-70xaujb2vo] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

    /* Level requirement warning - more prominent */
    .item-warning.level-warning[b-70xaujb2vo] {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.35);
        color: var(--color-danger-light);
    }

    /* Class restriction warning */
    .item-warning.class-warning[b-70xaujb2vo] {
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.25);
        color: var(--color-warning-light);
    }

/* Footer */
.item-footer[b-70xaujb2vo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
}

.item-quantity[b-70xaujb2vo] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-semibold);
}

/* Pouch Full Message */
.pouch-full-message[b-70xaujb2vo] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-lg);
    color: var(--color-danger-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Button Styling */
[b-70xaujb2vo] .btn-equip {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: var(--color-gray-900) !important;
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    box-shadow: 0 4px 12px var(--color-border-active);
}

    [b-70xaujb2vo] .btn-equip:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px var(--color-border-active);
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    }

    [b-70xaujb2vo] .btn-equip:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Responsive */
@media (max-width: 640px) {
    .item-card[b-70xaujb2vo] {
        padding: var(--space-md);
    }

    .item-name[b-70xaujb2vo] {
        font-size: var(--font-size-base);
    }

    .effect-chip[b-70xaujb2vo] {
        font-size: var(--font-size-xs);
        padding: var(--space-xs) var(--space-sm);
    }

    .item-description[b-70xaujb2vo] {
        font-size: var(--font-size-xs);
    }

    .item-footer[b-70xaujb2vo] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-70xaujb2vo] .btn-equip {
        width: 100%;
        justify-content: center;
    }
}

/* ===== ITEM ART ZONE (Phase 2B) ===== */
.item-art-zone[b-70xaujb2vo] {
    position: relative; width: 100%; height: 64px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,215,0,0.07) 0%, rgba(99,102,241,0.05) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.item-art-zone-inner[b-70xaujb2vo] {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.item-art-img[b-70xaujb2vo] {
    width: 64px; height: 64px;
    object-fit: contain; image-rendering: pixelated;
}
.rarity-badge[b-70xaujb2vo] {
    position: absolute; top: 5px; left: 5px;
    font-size: 0.6rem; font-weight: 700; padding: 2px 6px;
    border-radius: 4px; text-transform: uppercase; letter-spacing: 0.06em;
}
.rarity-uncommon[b-70xaujb2vo] { background: rgba(34,197,94,0.18); color: #15803d; }
.rarity-rare[b-70xaujb2vo]     { background: rgba(59,130,246,0.18); color: #1d4ed8; }
.rarity-epic[b-70xaujb2vo]     { background: rgba(168,85,247,0.18); color: #7e22ce; }
.rarity-legendary[b-70xaujb2vo]{ background: rgba(255,215,0,0.18);  color: #92400e; }

/* ===== STATUS BADGE (art-zone overlay, top-right) ===== */
.item-status-badge[b-70xaujb2vo] {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 2;
    white-space: nowrap;
}

.badge-status-equip[b-70xaujb2vo] {
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.badge-status-poor[b-70xaujb2vo] {
    background: rgba(245, 158, 11, 0.22);
    color: var(--color-warning-bright);
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.badge-status-owned[b-70xaujb2vo] {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-status-restricted[b-70xaujb2vo] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger-light);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.badge-status-hidden[b-70xaujb2vo] {
    display: none;
}
/* /Components/Shared/Items/WeaponCard.razor.rz.scp.css */
/* WeaponCard Component Styles */

/* ===== BASE CARD ===== */
.item-card[b-n2iv4hz2mu] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid var(--color-border-base);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: relative;
    overflow: hidden;
}

    .item-card[b-n2iv4hz2mu]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--color-border-active), transparent);
        opacity: 0;
        transition: opacity var(--transition-base);
    }

    .item-card:hover[b-n2iv4hz2mu] {
        transform: translateY(-3px);
        border-color: var(--color-border-hover);
        box-shadow: var(--shadow-lg), var(--shadow-gold);
    }

        .item-card:hover[b-n2iv4hz2mu]::before {
            opacity: 1;
        }

    /* ===== AFFORDABILITY STATES ===== */
    /* Can equip: green border + glow */
    .item-card.item-card-can-equip[b-n2iv4hz2mu] {
        border-color: rgba(34, 197, 94, 0.55) !important;
        box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2), 0 4px 16px rgba(34, 197, 94, 0.15) !important;
    }

        .item-card.item-card-can-equip[b-n2iv4hz2mu]::before {
            background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent);
            opacity: 1;
        }

    /* Cannot afford: dim + desaturate + red tint */
    .item-card.item-card-cannot-afford[b-n2iv4hz2mu] {
        opacity: 0.48 !important;
        filter: grayscale(0.4) !important;
        border-color: rgba(239, 68, 68, 0.25) !important;
    }

        .item-card.item-card-cannot-afford:hover[b-n2iv4hz2mu] {
            transform: none !important;
            box-shadow: none !important;
        }

    /* Already owned: indigo border */
    .item-card.item-card-owned[b-n2iv4hz2mu] {
        border-color: rgba(99, 102, 241, 0.55) !important;
        box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.15) !important;
    }

        .item-card.item-card-owned[b-n2iv4hz2mu]::before {
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent);
            opacity: 1;
        }

    /* Equipped: green background tint */
    .item-card.equipped[b-n2iv4hz2mu] {
        border-color: rgba(34, 197, 94, 0.5) !important;
        background: linear-gradient(145deg, rgba(34, 197, 94, 0.1), var(--color-bg-elevated-alt)) !important;
    }

        .item-card.equipped[b-n2iv4hz2mu]::before {
            background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent);
            opacity: 1;
        }

    /* Level restricted: dim */
    .item-card.level-restricted[b-n2iv4hz2mu] {
        opacity: 0.7;
    }

/* ===== ITEM ART ZONE ===== */
.item-art-zone[b-n2iv4hz2mu] {
    position: relative;
    width: 100%;
    height: 72px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.09) 0%, rgba(99, 102, 241, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.item-art-zone-inner[b-n2iv4hz2mu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

    /* Art zone icon sizing - explicit override */
    .item-art-zone-inner .mud-icon-root[b-n2iv4hz2mu] {
        font-size: 2.25rem !important;
        opacity: 0.75;
        filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.3));
    }

.item-art-img[b-n2iv4hz2mu] {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Rarity badge overlay */
.rarity-badge[b-n2iv4hz2mu] {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rarity-uncommon[b-n2iv4hz2mu] {
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.rarity-rare[b-n2iv4hz2mu] {
    background: rgba(59, 130, 246, 0.22);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.rarity-epic[b-n2iv4hz2mu] {
    background: rgba(168, 85, 247, 0.22);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.rarity-legendary[b-n2iv4hz2mu] {
    background: rgba(255, 215, 0, 0.22);
    color: #fcd34d;
    border: 1px solid rgba(255, 215, 0, 0.35);
}

/* ===== STATUS BADGE (art-zone overlay, top-right) ===== */
.item-status-badge[b-n2iv4hz2mu] {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 2;
    white-space: nowrap;
}

.badge-status-equip[b-n2iv4hz2mu] {
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.badge-status-poor[b-n2iv4hz2mu] {
    background: rgba(245, 158, 11, 0.22);
    color: var(--color-warning-bright);
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.badge-status-owned[b-n2iv4hz2mu] {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-status-equipped[b-n2iv4hz2mu] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-light);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.badge-status-restricted[b-n2iv4hz2mu] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger-light);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.badge-status-hidden[b-n2iv4hz2mu] {
    display: none;
}

/* ===== HEADER ===== */
.item-header[b-n2iv4hz2mu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
}

.item-name[b-n2iv4hz2mu] {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    flex: 1;
    line-height: 1.3;
}

.item-badges[b-n2iv4hz2mu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: flex-end;
}

.item-type-badge[b-n2iv4hz2mu] {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-equipped[b-n2iv4hz2mu] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-light);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

/* ===== STATS ===== */
.item-stats[b-n2iv4hz2mu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.stat-chip[b-n2iv4hz2mu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--color-text-secondary);
}

.stat-damage[b-n2iv4hz2mu] {
    color: var(--color-danger-light);
    border-color: rgba(239, 68, 68, 0.2);
}

.stat-type[b-n2iv4hz2mu] {
    color: var(--color-text-tertiary);
}

.stat-level[b-n2iv4hz2mu] {
    color: var(--color-warning-light);
    border-color: rgba(245, 158, 11, 0.2);
}

/* Who may use the item ("Ranger only"), beside its level on every card; amber when it isn't the viewer's class. */
.stat-class[b-n2iv4hz2mu] {
    color: var(--color-text-secondary);
    border-color: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
}

.stat-class.is-locked[b-n2iv4hz2mu] {
    color: var(--color-warning-light);
    background: color-mix(in srgb, var(--color-warning-light) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-warning-light) 45%, transparent);
}

.stat-bonus[b-n2iv4hz2mu] {
    color: var(--color-monk-lighter);
    border-color: rgba(139, 92, 246, 0.2);
}

/* ===== LORE PREVIEW ===== */
.item-lore-preview[b-n2iv4hz2mu] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-lg);
    cursor: default;
    transition: background var(--transition-base);
}

    .item-lore-preview:hover[b-n2iv4hz2mu],
    .item-lore-preview:focus[b-n2iv4hz2mu] {
        background: rgba(139, 92, 246, 0.14);
    }

[b-n2iv4hz2mu] .lore-icon {
    color: var(--color-monk-lighter);
    flex-shrink: 0;
    margin-top: 2px;
}

.lore-text[b-n2iv4hz2mu] {
    font-size: var(--font-size-sm);
    color: var(--color-monk-lighter);
    font-style: italic;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all var(--transition-base);
}

.item-lore-preview:hover .lore-text[b-n2iv4hz2mu],
.item-lore-preview:focus .lore-text[b-n2iv4hz2mu] {
    -webkit-line-clamp: unset;
}

/* ===== AVG DAMAGE LINE ===== */
.item-avg-line[b-n2iv4hz2mu] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    min-height: 1.3em;
}

.avg-label[b-n2iv4hz2mu] {
    color: var(--color-text-tertiary);
}

.avg-value.upgrade[b-n2iv4hz2mu] {
    color: var(--color-success-light);
}

.avg-value.downgrade[b-n2iv4hz2mu] {
    color: var(--color-text-tertiary);
}

/* ===== FOOTER (price + actions in one row) ===== */
.item-footer[b-n2iv4hz2mu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
    flex-wrap: wrap;
}

.footer-price[b-n2iv4hz2mu] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-display);
    white-space: nowrap;
}

    .footer-price.affordable[b-n2iv4hz2mu] {
        color: var(--color-success-light);
    }

    .footer-price.unaffordable[b-n2iv4hz2mu] {
        color: var(--color-danger-light);
    }

    .footer-price.sell-price[b-n2iv4hz2mu] {
        color: var(--color-warning-light);
    }

.shortfall-hint[b-n2iv4hz2mu] {
    font-size: 0.7rem;
    color: #6b7280;
    white-space: nowrap;
}

/* ===== WARNING ===== */
.item-warning[b-n2iv4hz2mu] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

    .item-warning.level-warning[b-n2iv4hz2mu] {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.35);
        color: var(--color-danger-light);
    }

    .item-warning.class-warning[b-n2iv4hz2mu] {
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.25);
        color: var(--color-warning-light);
    }

/* ===== BUY BUTTON ===== */
[b-n2iv4hz2mu] .btn-equip {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)) !important;
    color: var(--color-gray-900) !important;
    font-family: var(--font-display) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: var(--space-sm) var(--space-xl) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-base) !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.25) !important;
    min-height: 36px !important;
}

    [b-n2iv4hz2mu] .btn-equip:hover:not(:disabled) {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.35) !important;
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
    }

    [b-n2iv4hz2mu] .btn-equip:disabled {
        opacity: 0.35 !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
        transform: none !important;
    }

/* P3.3b — dual-wield off-hand equip button: a secondary, slate-toned variant of the gold
   primary equip button so the two reads as "main hand" (gold) vs "off hand" (secondary). */
[b-n2iv4hz2mu] .btn-equip-offhand {
    background: linear-gradient(135deg, var(--color-gray-700), var(--color-gray-600)) !important;
    color: var(--color-gray-100) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25) !important;
}

    [b-n2iv4hz2mu] .btn-equip-offhand:hover:not(:disabled) {
        background: linear-gradient(135deg, var(--color-gray-600), var(--color-gray-500)) !important;
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.35) !important;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    .item-card[b-n2iv4hz2mu] {
        padding: var(--space-md);
    }

    .item-name[b-n2iv4hz2mu] {
        font-size: var(--font-size-base);
    }

    .stat-chip[b-n2iv4hz2mu] {
        font-size: var(--font-size-xs);
        padding: var(--space-xs);
    }

    .item-footer[b-n2iv4hz2mu] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-n2iv4hz2mu] .btn-equip {
        width: 100% !important;
        justify-content: center !important;
    }
}
/* /Components/Shared/LoadoutDrawer.razor.rz.scp.css */
/* LoadoutDrawer - scoped styles */
/* Global hide/show rules live in game-shared.css to guarantee desktop hiding */

/* ===== FAB BUTTON ===== */

@media (max-width: 1100px) {
    .loadout-fab[b-i5rxh8rpdz] {
        align-items: center;
        gap: var(--space-sm);
        position: fixed;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--space-md));
        right: var(--space-lg);
        z-index: 150;
        padding: var(--space-sm) var(--space-lg);
        background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
        color: var(--color-gray-900);
        border: none;
        border-radius: var(--radius-xl);
        font-family: var(--font-display);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(255, 215, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4);
        transition: all var(--transition-base);
        white-space: nowrap;
    }

    .loadout-fab:hover[b-i5rxh8rpdz] {
        transform: translateY(-2px);
        box-shadow: 0 6px 28px rgba(255, 215, 0, 0.5), 0 3px 12px rgba(0, 0, 0, 0.4);
    }

    .loadout-fab.fab-active[b-i5rxh8rpdz] {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.08));
        color: var(--color-primary);
        border: 1px solid var(--color-border-active);
        box-shadow: 0 0 20px var(--color-border-active);
    }

    /* ===== OVERLAY ===== */

    .loadout-overlay[b-i5rxh8rpdz] {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        z-index: 190;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-slow);
        backdrop-filter: blur(2px);
    }

    .loadout-overlay.open[b-i5rxh8rpdz] {
        opacity: 1;
        pointer-events: auto;
    }

    /* ===== BOTTOM SHEET ===== */

    .loadout-sheet[b-i5rxh8rpdz] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 195;
        max-height: 78vh;
        overflow-y: auto;
        background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-elevated-alt) 100%);
        border-top: 2px solid var(--color-border-active);
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    }

    .loadout-sheet.open[b-i5rxh8rpdz] {
        transform: translateY(0);
    }

    .loadout-sheet-handle[b-i5rxh8rpdz] {
        width: 48px;
        height: 4px;
        background: var(--color-border-hover);
        border-radius: 2px;
        margin: var(--space-md) auto var(--space-sm);
        cursor: pointer;
        transition: background var(--transition-fast);
    }

    .loadout-sheet-handle:hover[b-i5rxh8rpdz] {
        background: var(--color-border-active);
    }

    .loadout-sheet-content[b-i5rxh8rpdz] {
        padding: 0 var(--space-lg) var(--space-lg);
    }
}
/* /Components/Shared/NotificationDrawer.razor.rz.scp.css */
/* NotificationDrawer scoped styles - Uses Design System Tokens */

/* Notification Wrapper - ensures CSS isolation works with fixed elements */
.notification-wrapper[b-jvst0g8l77] {
    display: contents;
}

/* Notification Bell Button */
.notification-bell-container[b-jvst0g8l77] {
    position: relative;
    margin: 0 var(--space-sm);
}

.notification-bell-button[b-jvst0g8l77] {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    transition: all var(--transition-slow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-bell-button:hover[b-jvst0g8l77] {
    background: rgba(255, 215, 0, 0.1);
}

.bell-icon[b-jvst0g8l77] {
    font-size: var(--font-size-2xl);
    color: var(--color-text-secondary);
    transition: color var(--transition-slow);
}

.notification-bell-button:hover .bell-icon[b-jvst0g8l77] {
    color: var(--color-primary);
}

.notification-badge[b-jvst0g8l77] {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark));
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: 0.15rem 0.35rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    animation: pulse-badge-b-jvst0g8l77 2s infinite;
}

@keyframes pulse-badge-b-jvst0g8l77 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Notification Drawer Overlay */
.notification-drawer-overlay[b-jvst0g8l77] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    animation: fadeIn-b-jvst0g8l77 var(--transition-slow);
}

@keyframes fadeIn-b-jvst0g8l77 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Notification Drawer */
.notification-drawer[b-jvst0g8l77] {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 100%);
    border-left: 1px solid var(--color-border-base);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    transition: right var(--transition-slow);
}

.notification-drawer.open[b-jvst0g8l77] {
    right: 0;
}

/* Drawer Header */
.notification-drawer-header[b-jvst0g8l77] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xl);
    border-bottom: 1px solid var(--color-border-base);
    background: rgba(255, 215, 0, 0.05);
}

.notification-drawer-header h3[b-jvst0g8l77] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0;
}

.close-button[b-jvst0g8l77] {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-3xl);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    line-height: 1;
}

.close-button:hover[b-jvst0g8l77] {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
}

/* Drawer Actions */
.notification-drawer-actions[b-jvst0g8l77] {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--color-border-base);
}

.mark-all-read-button[b-jvst0g8l77] {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--color-border-hover);
    color: var(--color-primary);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
    width: 100%;
}

.mark-all-read-button:hover[b-jvst0g8l77] {
    background: var(--color-border-base);
    border-color: var(--color-border-active);
}

/* Notification List */
.notification-list[b-jvst0g8l77] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
}

.notification-list[b-jvst0g8l77]::-webkit-scrollbar {
    width: 8px;
}

.notification-list[b-jvst0g8l77]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
}

.notification-list[b-jvst0g8l77]::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: var(--radius-sm);
}

.notification-list[b-jvst0g8l77]::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-active);
}

/* Loading State */
.notification-loading[b-jvst0g8l77] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-lg);
    color: var(--color-text-secondary);
}

.loading-spinner[b-jvst0g8l77] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 215, 0, 0.1);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-round);
    animation: spin-b-jvst0g8l77 1s linear infinite;
    margin-bottom: var(--space-lg);
}

@keyframes spin-b-jvst0g8l77 {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.notification-empty[b-jvst0g8l77] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
    color: var(--color-text-tertiary);
}

.empty-icon[b-jvst0g8l77] {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-lg);
    opacity: 0.5;
}

.notification-empty p[b-jvst0g8l77] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    margin: 0 0 var(--space-sm) 0;
    color: var(--color-text-secondary);
}

.empty-subtitle[b-jvst0g8l77] {
    font-size: var(--font-size-base);
    color: var(--color-text-tertiary);
}

/* Notification Item */
.notification-item[b-jvst0g8l77] {
    display: flex;
    align-items: flex-start;
    padding: var(--space-lg);
    margin: var(--space-sm) 0;
    border-radius: var(--radius-lg);
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--color-border-base);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
}

.notification-item:hover[b-jvst0g8l77] {
    background: rgba(30, 41, 59, 0.8);
    border-color: var(--color-border-hover);
    transform: translateX(-4px);
}

.notification-item.unread[b-jvst0g8l77] {
    background: rgba(255, 215, 0, 0.05);
    border-color: var(--color-border-hover);
}

.notification-icon-container[b-jvst0g8l77] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: rgba(255, 215, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-md);
}

.notification-type-icon[b-jvst0g8l77] {
    font-size: var(--font-size-xl);
}

.notification-content[b-jvst0g8l77] {
    flex: 1;
    min-width: 0;
}

.notification-header[b-jvst0g8l77] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.notification-title[b-jvst0g8l77] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unread-indicator[b-jvst0g8l77] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-round);
    background: var(--color-primary);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.notification-message[b-jvst0g8l77] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notification-time[b-jvst0g8l77] {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.notification-delete-button[b-jvst0g8l77] {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-2xl);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    margin-left: var(--space-sm);
    opacity: 0;
}

.notification-item:hover .notification-delete-button[b-jvst0g8l77] {
    opacity: 1;
}

.notification-delete-button:hover[b-jvst0g8l77] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .notification-drawer[b-jvst0g8l77] {
        width: 100vw;
        right: -100vw;
    }

    .notification-bell-container[b-jvst0g8l77] {
        margin: 0 var(--space-sm);
    }
}
/* /Components/Shared/Spells/SpellCard.razor.rz.scp.css */
/* SpellCard Component Styles */

/* ===== BASE CARD ===== */
.spell-card[b-tcjzryg1oj] {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 2px solid var(--color-border-base);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: relative;
    overflow: hidden;
}

    .spell-card[b-tcjzryg1oj]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--color-border-active), transparent);
        opacity: 0;
        transition: opacity var(--transition-base);
    }

    .spell-card:hover[b-tcjzryg1oj] {
        transform: translateY(-3px);
        border-color: var(--color-border-hover);
        box-shadow: var(--shadow-lg), var(--shadow-gold);
    }

        .spell-card:hover[b-tcjzryg1oj]::before {
            opacity: 1;
        }

/* ===== STATE VARIANTS ===== */
.spell-card.spell-card-prepared[b-tcjzryg1oj] {
    border-color: rgba(34, 197, 94, 0.55) !important;
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.08), var(--color-bg-elevated-alt)) !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2), 0 4px 16px rgba(34, 197, 94, 0.12) !important;
}

    .spell-card.spell-card-prepared[b-tcjzryg1oj]::before {
        background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent);
        opacity: 1;
    }

.spell-card.spell-card-unprepared[b-tcjzryg1oj] {
    opacity: 0.85;
}

.spell-card.spell-card-locked[b-tcjzryg1oj] {
    opacity: 0.45;
    filter: grayscale(0.5);
    cursor: not-allowed;
}

    .spell-card.spell-card-locked:hover[b-tcjzryg1oj] {
        transform: none;
        box-shadow: none;
    }

/* ===== ART ZONE ===== */
.spell-art-zone[b-tcjzryg1oj] {
    position: relative;
    width: 100%;
    height: 72px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.07) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.spell-art-zone-inner[b-tcjzryg1oj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

    .spell-art-zone-inner .mud-icon-root[b-tcjzryg1oj] {
        font-size: 2.25rem !important;
        opacity: 0.75;
        filter: drop-shadow(0 2px 8px rgba(139, 92, 246, 0.4));
    }

/* Circle badge (top-left) */
.spell-circle-badge[b-tcjzryg1oj] {
    position: absolute;
    top: 5px;
    left: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(139, 92, 246, 0.25);
    color: var(--color-monk-lighter);
    border: 1px solid rgba(139, 92, 246, 0.35);
}

/* Damage-type icon (top-right) */
.spell-dmgtype-badge[b-tcjzryg1oj] {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.4);
}

/* ===== HEADER ===== */
.spell-header[b-tcjzryg1oj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
}

.spell-name[b-tcjzryg1oj] {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    flex: 1;
    line-height: 1.3;
}

/* ===== STATS ROW ===== */
.spell-stats[b-tcjzryg1oj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.stat-mana[b-tcjzryg1oj] {
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.2);
}

.stat-range[b-tcjzryg1oj] {
    color: var(--color-text-tertiary);
}

.stat-cooldown[b-tcjzryg1oj] {
    color: var(--color-warning-light);
    border-color: rgba(245, 158, 11, 0.2);
}

.stat-damage[b-tcjzryg1oj] {
    color: var(--color-danger-light);
    border-color: rgba(239, 68, 68, 0.2);
}

.stat-aoe[b-tcjzryg1oj] {
    color: var(--color-monk-lighter);
    border-color: rgba(139, 92, 246, 0.2);
}

/* ===== BADGE ROW ===== */
.spell-badge-row[b-tcjzryg1oj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    min-height: 1.4em;
}

/* ===== DESCRIPTION ===== */
.spell-description[b-tcjzryg1oj] {
    display: flex;
    align-items: flex-start;
    padding: var(--space-sm) var(--space-md);
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: var(--radius-lg);
    cursor: default;
    transition: background var(--transition-base);
}

    .spell-description:hover[b-tcjzryg1oj],
    .spell-description:focus[b-tcjzryg1oj] {
        background: rgba(139, 92, 246, 0.12);
    }

.spell-description-text[b-tcjzryg1oj] {
    font-size: var(--font-size-sm);
    color: var(--color-monk-lighter);
    font-style: italic;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all var(--transition-base);
}

.spell-description:hover .spell-description-text[b-tcjzryg1oj],
.spell-description:focus .spell-description-text[b-tcjzryg1oj] {
    -webkit-line-clamp: unset;
}

/* ===== FOOTER ===== */
.spell-footer[b-tcjzryg1oj] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: auto;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
    flex-wrap: wrap;
}

[b-tcjzryg1oj] .spell-action-btn {
    min-width: 90px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    .spell-card[b-tcjzryg1oj] {
        padding: var(--space-md);
    }

    .spell-name[b-tcjzryg1oj] {
        font-size: var(--font-size-base);
    }

    .spell-footer[b-tcjzryg1oj] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-tcjzryg1oj] .spell-action-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}
/* /Components/Shared/TavernCardChip.razor.rz.scp.css */
.tavern-card-chip[b-l1vjavs27t] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
    line-height: 1;
    white-space: nowrap;
}

.tavern-card-chip .mud-icon-root[b-l1vjavs27t] {
    font-size: 0.85rem;
}

.chip-upgrade[b-l1vjavs27t] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.12));
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
    animation: chip-pulse-red-b-l1vjavs27t 2.4s infinite;
}

.chip-new[b-l1vjavs27t] {
    background: rgba(251, 146, 60, 0.18);
    border-color: rgba(251, 146, 60, 0.45);
    color: #fdba74;
}

.chip-recommended[b-l1vjavs27t] {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.22), rgba(167, 139, 250, 0.1));
    border-color: rgba(167, 139, 250, 0.5);
    color: #c4b5fd;
}

.chip-gold[b-l1vjavs27t] {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.4);
    color: var(--color-warning-bright);
}

.chip-ready[b-l1vjavs27t] {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.5);
    color: #86efac;
    animation: chip-pulse-green-b-l1vjavs27t 2.4s infinite;
}

.chip-info[b-l1vjavs27t] {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
}

@keyframes chip-pulse-red-b-l1vjavs27t {
    0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.25); }
    50%      { box-shadow: 0 0 16px rgba(239, 68, 68, 0.45); }
}

@keyframes chip-pulse-green-b-l1vjavs27t {
    0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.2); }
    50%      { box-shadow: 0 0 14px rgba(34, 197, 94, 0.4); }
}
/* /Components/Tavern/GarrickBar.razor.rz.scp.css */
/* GarrickBar (owner: W1). Canvas boards A-1920 / A-1366 / A-1280 (one row), A-1024 and A-768 (replies on a second
   row; short labels on portrait), A-390 (replies scroll sideways). Tokens only, canonical breakpoints only
   (base = portrait 481-959), and the hearth glow and button fades stop under reduced motion. */

.garrick-bar[b-rxue6999vt] {
    /* Local shades, mixed from tokens: the in-world gold text and the parchment cream of Garrick's voice. */
    --gb-gold: color-mix(in srgb, var(--color-primary-dark) 75%, var(--color-text-primary));
    --gb-cream: color-mix(in srgb, var(--color-warning-lightest) 30%, var(--color-text-primary));
    --gb-accent: var(--color-primary);
    --gb-medallion: 52px;

    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "medal speech"
        "replies replies";
    align-items: center;
    gap: var(--space-md) 14px;
    padding: 14px var(--space-lg);
    border: 1px solid color-mix(in srgb, var(--gb-accent) 26%, transparent);
    border-radius: var(--radius-3xl);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--color-warning-dark) 38%, var(--color-bg-base)),
        color-mix(in srgb, var(--color-gray-900) 94%, transparent) 40%,
        color-mix(in srgb, var(--color-bg-base) 96%, transparent));
    box-shadow: 0 16px 40px color-mix(in srgb, black 40%, transparent);
}

/* Mood tints the frame. */
.garrick-bar--concerned[b-rxue6999vt] { --gb-accent: var(--color-danger-light); }
.garrick-bar--excited[b-rxue6999vt] { --gb-accent: var(--color-primary-light); }
.garrick-bar--somber[b-rxue6999vt] { --gb-accent: var(--color-text-tertiary); }
.garrick-bar--mysterious[b-rxue6999vt] { --gb-accent: var(--color-monk-light); }

/* ---- Medallion (D1: the G monogram until a portrait exists) ---- */

.gb-medallion[b-rxue6999vt] {
    grid-area: medal;
    position: relative;
    width: var(--gb-medallion);
    height: var(--gb-medallion);
    flex: none;
}

.gb-glow[b-rxue6999vt] {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-warning) 45%, transparent), transparent 70%);
    animation: gb-flicker-b-rxue6999vt 4s ease-in-out infinite;
}

.gb-monogram[b-rxue6999vt] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-primary-dark);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%,
        color-mix(in srgb, var(--color-warning-dark) 55%, var(--color-bg-base)),
        color-mix(in srgb, var(--color-warning-dark) 12%, var(--color-bg-base)));
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: calc(var(--gb-medallion) * 0.43);
    font-weight: 900;
    line-height: 1;
}

@keyframes gb-flicker-b-rxue6999vt {
    0%, 100% { opacity: 0.8; }
    45% { opacity: 1; }
    65% { opacity: 0.65; }
}

/* ---- The greeting ---- */

.gb-speech[b-rxue6999vt] {
    grid-area: speech;
    min-width: 0;
}

.gb-speaker[b-rxue6999vt] {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin: 0;
}

.gb-name[b-rxue6999vt] {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

.gb-speaker-title[b-rxue6999vt] {
    color: var(--color-text-secondary);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 13.5px;
    font-style: italic;
}

.gb-line[b-rxue6999vt] {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--gb-cream);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 19px;
    font-style: italic;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* ---- Replies ---- */

.gb-replies[b-rxue6999vt] {
    grid-area: replies;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.gb-new[b-rxue6999vt] {
    display: inline-flex;
    flex: none;
    align-items: center;
    order: 1;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    background: var(--color-success-lighter);
    color: var(--color-bg-base);
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.gb-reply[b-rxue6999vt] {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--gb-gold) 38%, transparent);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--gb-gold) 7%, transparent);
    color: var(--gb-cream);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.gb-reply:hover[b-rxue6999vt],
.gb-reply.is-active[b-rxue6999vt] {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.gb-reply:focus-visible[b-rxue6999vt] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.gb-kbd[b-rxue6999vt] {
    display: none;
    padding: 1px 6px;
    border: 1px solid color-mix(in srgb, var(--gb-gold) 50%, transparent);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--color-gray-900) 60%, transparent);
    color: var(--gb-gold);
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.gb-reply-icon[b-rxue6999vt] {
    display: inline-flex;
    flex: none;
    color: var(--gb-gold);
}

.gb-reply-icon[b-rxue6999vt]  .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.gb-label[b-rxue6999vt] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Portrait: the short labels ("Any work?") keep three equal buttons on one row. */
.gb-label--full[b-rxue6999vt] {
    display: none;
}

/* ---- Phone (camp mode): compact medallion, replies scroll sideways with full labels ---- */
@media (max-width: 480px) {
    .garrick-bar[b-rxue6999vt] {
        --gb-medallion: 40px;

        align-items: start;
        gap: 10px var(--space-md);
        padding: var(--space-md);
        overflow: hidden;
        border-radius: 14px;
        background: linear-gradient(110deg,
            color-mix(in srgb, var(--color-warning-dark) 38%, var(--color-bg-base)),
            color-mix(in srgb, var(--color-gray-900) 94%, transparent) 45%,
            color-mix(in srgb, var(--color-bg-base) 96%, transparent));
    }

    .gb-glow[b-rxue6999vt] {
        inset: -6px;
    }

    .gb-name[b-rxue6999vt] {
        font-size: 13px;
    }

    .gb-speaker-title[b-rxue6999vt] {
        display: none;
    }

    .gb-line[b-rxue6999vt] {
        font-size: 16.5px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .gb-replies[b-rxue6999vt] {
        margin-right: calc(-1 * var(--space-md));
        padding-right: var(--space-md);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .gb-reply[b-rxue6999vt] {
        flex: none;
        font-size: 13px;
        padding: 0 14px 0 10px;
    }

    .gb-new[b-rxue6999vt] {
        display: none;
    }

    .gb-label--full[b-rxue6999vt] {
        display: inline;
    }

    .gb-label--short[b-rxue6999vt] {
        display: none;
    }
}

/* ---- Tablet (960-1279): replies on a second row under the line, three equal buttons with full labels ---- */
@media (min-width: 960px) {
    .gb-replies[b-rxue6999vt] {
        padding-left: calc(var(--gb-medallion) + 14px);
    }

    .gb-label--full[b-rxue6999vt] {
        display: inline;
    }

    .gb-label--short[b-rxue6999vt] {
        display: none;
    }

    .gb--keys .gb-kbd[b-rxue6999vt] {
        display: inline-block;
    }
}

/* ---- Desktop (1280 and up): one row, the NEW badge before the replies ---- */
@media (min-width: 1280px) {
    .garrick-bar[b-rxue6999vt] {
        --gb-medallion: 58px;

        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "medal speech replies";
        gap: 18px;
        min-height: 88px;
        padding: var(--space-sm) 18px;
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--color-warning-dark) 38%, var(--color-bg-base)),
            color-mix(in srgb, var(--color-gray-900) 94%, transparent) 30%,
            color-mix(in srgb, var(--color-bg-base) 96%, transparent));
    }

    .gb-glow[b-rxue6999vt] {
        inset: -14px;
    }

    .gb-name[b-rxue6999vt] {
        font-size: 15px;
    }

    .gb-speaker-title[b-rxue6999vt] {
        font-size: 14px;
    }

    .gb-line[b-rxue6999vt] {
        font-size: clamp(18px, 1.1vw + 4px, 21px);
    }

    .gb-replies[b-rxue6999vt] {
        gap: 10px;
        padding-left: 0;
    }

    .gb-new[b-rxue6999vt] {
        order: 0;
    }

    .gb-reply[b-rxue6999vt] {
        flex: none;
        order: 1;
        justify-content: flex-start;
        padding: 0 14px 0 var(--space-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gb-glow[b-rxue6999vt] {
        animation: none;
        opacity: 0.85;
    }

    .gb-reply[b-rxue6999vt] {
        transition: none;
    }
}
/* /Components/Tavern/GarrickConversation.razor.rz.scp.css */
/* GarrickConversation (owner: W1). Canvas board A-Talk: from the 960 tier the panel rises from the Garrick bar over
   the stage, above a scrim; below 960 it opens in place under the bar. Tokens only, canonical breakpoints only
   (base = portrait and phone), and the hearth glow stops under reduced motion. */

.garrick-conversation[b-742rrqlscm] {
    --gc-gold: color-mix(in srgb, var(--color-primary-dark) 75%, var(--color-text-primary));
    --gc-cream: color-mix(in srgb, var(--color-warning-lightest) 30%, var(--color-text-primary));
    --gc-medallion: 44px;

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    border-radius: 18px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-gray-800) 70%, var(--color-bg-base)),
        color-mix(in srgb, var(--color-gray-900) 60%, var(--color-bg-base)));
    box-shadow: 0 30px 80px color-mix(in srgb, black 70%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent);
    /* Revealed by a hotkey while scrolled away (tavernFocus.reveal), the panel stops clear of the fixed app bar (64px)
       instead of under it, so its "You" line and close button show. */
    scroll-margin-top: calc(var(--space-4xl) + var(--space-lg));
}

.garrick-conversation:focus:not(:focus-visible)[b-742rrqlscm] {
    outline: none;
}

.garrick-conversation:focus-visible[b-742rrqlscm] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* The scrim belongs to the overlay layout (960 and up). */
.gc-scrim[b-742rrqlscm] {
    display: none;
}

/* ---- Garrick ---- */

.gc-speaker[b-742rrqlscm] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.gc-medallion[b-742rrqlscm] {
    position: relative;
    flex: none;
    width: var(--gc-medallion);
    height: var(--gc-medallion);
}

.gc-glow[b-742rrqlscm] {
    position: absolute;
    inset: calc(var(--gc-medallion) * -0.17);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-warning) 40%, transparent), transparent 68%);
    animation: gc-flicker-b-742rrqlscm 4s ease-in-out infinite;
}

.gc-monogram[b-742rrqlscm] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-primary-dark);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%,
        color-mix(in srgb, var(--color-warning-dark) 55%, var(--color-bg-base)),
        color-mix(in srgb, var(--color-warning-dark) 12%, var(--color-bg-base)));
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: calc(var(--gc-medallion) * 0.42);
    font-weight: 900;
    line-height: 1;
}

.gc-speaker-name[b-742rrqlscm] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gc-name[b-742rrqlscm] {
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
}

.gc-speaker-title[b-742rrqlscm] {
    color: var(--color-text-secondary);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 14px;
    font-style: italic;
}

.gc-new[b-742rrqlscm] {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    background: var(--color-success-lighter);
    color: var(--color-bg-base);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@keyframes gc-flicker-b-742rrqlscm {
    0%, 100% { opacity: 0.8; }
    45% { opacity: 1; }
    65% { opacity: 0.65; }
}

/* ---- The exchange ---- */

.gc-main[b-742rrqlscm] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.gc-you-row[b-742rrqlscm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.gc-you[b-742rrqlscm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm);
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.gc-you-tag[b-742rrqlscm] {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.gc-you-line[b-742rrqlscm] {
    color: var(--gc-gold);
}

.gc-close[b-742rrqlscm] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-xl);
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
}

.gc-close:hover[b-742rrqlscm] {
    background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
}

.gc-close:focus-visible[b-742rrqlscm] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.gc-close[b-742rrqlscm]  .mud-icon-root {
    width: 22px;
    height: 22px;
}

.gc-line[b-742rrqlscm] {
    max-width: 900px;
    margin: 0;
    color: var(--gc-cream);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 19px;
    font-style: italic;
    line-height: 1.35;
}

/* ---- Topic content ---- */

.gc-contracts[b-742rrqlscm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}

.gc-news[b-742rrqlscm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-md) var(--space-xl);
}

.gc-news-col[b-742rrqlscm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

.gc-news-title[b-742rrqlscm] {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.gc-news-list[b-742rrqlscm],
.gc-people[b-742rrqlscm],
.gc-steps[b-742rrqlscm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gc-news-item[b-742rrqlscm],
.gc-person[b-742rrqlscm] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}

.gc-news-icon[b-742rrqlscm] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--gc-tone, var(--color-text-secondary)) 16%, transparent);
    color: var(--gc-tone, var(--color-text-secondary));
}

.gc-news-icon[b-742rrqlscm]  .mud-icon-root {
    width: 19px;
    height: 19px;
}

.gc-tone--gold[b-742rrqlscm] { --gc-tone: var(--color-primary); }
.gc-tone--success[b-742rrqlscm] { --gc-tone: var(--color-success-light); }
.gc-tone--danger[b-742rrqlscm] { --gc-tone: var(--color-danger-light); }
.gc-tone--info[b-742rrqlscm] { --gc-tone: var(--color-info-light); }
.gc-tone--epic[b-742rrqlscm] { --gc-tone: var(--color-rarity-epic); }

.gc-tone-text--epic[b-742rrqlscm] { color: var(--color-monk-light); }
.gc-tone-text--gold[b-742rrqlscm] { color: var(--color-primary); }
.gc-tone-text--success[b-742rrqlscm] { color: var(--color-success-lighter); }
.gc-tone-text--danger[b-742rrqlscm] { color: var(--color-danger-lighter); }
.gc-tone-text--info[b-742rrqlscm] { color: var(--color-info-lighter); }

.gc-news-text[b-742rrqlscm],
.gc-person-text[b-742rrqlscm] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--color-text-lighter);
    font-size: 13px;
    line-height: 1.4;
}

.gc-news-text a[b-742rrqlscm] {
    color: var(--color-text-lighter);
    text-decoration: none;
}

.gc-news-text a:hover[b-742rrqlscm] {
    color: var(--color-primary);
}

.gc-news-text small[b-742rrqlscm],
.gc-person-text small[b-742rrqlscm] {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.gc-news-link[b-742rrqlscm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    align-self: flex-start;
    color: var(--gc-gold);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

/* Touch screens: a 44px hit area for the "All posts" / "Friends" links (spec section 3). */
@media (pointer: coarse) {
    .gc-news-link[b-742rrqlscm] {
        min-height: 44px;
    }
}

.gc-news-link[b-742rrqlscm]  .mud-icon-root {
    width: 16px;
    height: 16px;
}

.gc-person-text[b-742rrqlscm] {
    flex: 1;
}

.gc-join[b-742rrqlscm] {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 45%, var(--color-primary-dark));
    color: var(--color-bg-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.gc-join:disabled[b-742rrqlscm] {
    background: var(--color-gray-700);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

.gc-steps[b-742rrqlscm] {
    counter-reset: gc-step;
    gap: 10px;
}

.gc-step[b-742rrqlscm] {
    position: relative;
    padding-left: 38px;
    color: var(--color-text-lighter);
    font-size: 14px;
    line-height: 1.45;
    counter-increment: gc-step;
}

.gc-step[b-742rrqlscm]::before {
    position: absolute;
    top: -2px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 30px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 50%, var(--color-primary-dark));
    color: var(--color-bg-base);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 900;
    content: counter(gc-step);
}

/* ---- Replies ---- */

.gc-replies[b-742rrqlscm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.gc-reply[b-742rrqlscm] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px 0 10px;
    border: 1px solid color-mix(in srgb, var(--gc-gold) 38%, transparent);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--gc-gold) 7%, transparent);
    color: var(--gc-cream);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    touch-action: manipulation;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.gc-reply:hover[b-742rrqlscm] {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.gc-reply:focus-visible[b-742rrqlscm] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.gc-reply--primary[b-742rrqlscm] {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.gc-reply--quiet[b-742rrqlscm] {
    border-color: color-mix(in srgb, var(--color-text-secondary) 35%, transparent);
    background: transparent;
    color: var(--color-text-light);
}

.gc-kbd[b-742rrqlscm] {
    display: none;
    padding: 1px 6px;
    border: 1px solid color-mix(in srgb, var(--gc-gold) 50%, transparent);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--color-gray-900) 60%, transparent);
    color: var(--gc-gold);
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.gc-reply--quiet .gc-kbd[b-742rrqlscm] {
    border-color: color-mix(in srgb, var(--color-text-secondary) 45%, transparent);
    color: var(--color-text-light);
}

.gc--keys .gc-kbd[b-742rrqlscm] {
    display: inline-block;
}

/* ---- Phone: tighter, the replies stack full width ---- */
@media (max-width: 480px) {
    .garrick-conversation[b-742rrqlscm] {
        padding: 14px;
        border-radius: 14px;
        /* The hub dock (fixed at the bottom) covers the last 72px of the screen. */
        scroll-margin-bottom: calc(var(--tavern-dock-height, 72px) + var(--space-lg));
    }

    .gc-line[b-742rrqlscm] {
        font-size: 17px;
    }

    .gc-replies[b-742rrqlscm] {
        flex-direction: column;
        align-items: stretch;
    }

    .gc--keys .gc-kbd[b-742rrqlscm] {
        display: none;
    }
}

/* ---- 960 and up: the panel rises from the bar over the stage, above a scrim ---- */
@media (min-width: 960px) {
    .gc-scrim[b-742rrqlscm] {
        position: fixed;
        inset: 0;
        z-index: 0;
        display: block;
        background: color-mix(in srgb, var(--color-bg-base) 62%, transparent);
    }

    .garrick-conversation[b-742rrqlscm] {
        --gc-medallion: 96px;

        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        grid-template-columns: 140px minmax(0, 1fr);
        gap: var(--space-xl);
        max-height: calc(var(--tavern-stage-height, 520px) + 60px);
        margin-top: 0;
        padding: var(--space-xl) 28px;
        overflow-y: auto;
        border-radius: 20px;
    }

    .gc-speaker[b-742rrqlscm] {
        flex-direction: column;
        justify-content: flex-start;
        gap: 10px;
        padding-top: 6px;
        text-align: center;
    }

    .gc-speaker-name[b-742rrqlscm] {
        align-items: center;
    }

    .gc-name[b-742rrqlscm] {
        font-size: 18px;
    }

    .gc-speaker-title[b-742rrqlscm] {
        font-size: 15px;
    }

    .gc-line[b-742rrqlscm] {
        font-size: 21px;
    }
}

@media (min-width: 1280px) {
    .garrick-conversation[b-742rrqlscm] {
        --gc-medallion: 132px;

        grid-template-columns: 180px minmax(0, 1fr);
        gap: 28px;
    }

    .gc-line[b-742rrqlscm] {
        font-size: 23px;
    }

    .gc-contracts[b-742rrqlscm] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .gc-glow[b-742rrqlscm] {
        animation: none;
        opacity: 0.85;
    }

    .gc-reply[b-742rrqlscm] {
        transition: none;
    }
}
/* /Components/Tavern/TavernActionButton.razor.rz.scp.css */
/* Tavern action button (owner: F). Intentionally unstyled: callers style it through CssClass. */
/* /Components/Tavern/TavernCommonRoom.razor.rz.scp.css */
/* TavernCommonRoom (owner: W3). Design tokens only; translucent shades are color-mix() of a token. Canonical
   breakpoints only (480 / 1280). No animation or transition.
   Presence reads by shape as well as color: Online is a solid dot, Away a hollow ring (HUD WP12h rule). */

.tavern-common-room[b-nrv80z4clk] {
    --tcr-card-bg: var(--color-gray-800);
    --tcr-line: color-mix(in srgb, var(--color-text-secondary) 15%, transparent);

    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 20px;
    border-radius: var(--radius-3xl);
    background: linear-gradient(180deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 16%, transparent);
}

.tcr-here[b-nrv80z4clk] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.tcr-here-short[b-nrv80z4clk] {
    display: none;
}

.tcr-empty[b-nrv80z4clk] {
    margin: 0;
    padding: var(--space-xs) 0 var(--space-sm);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.tcr-list[b-nrv80z4clk] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tcr-row[b-nrv80z4clk] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 56px;
    min-width: 0;
}

.tcr-tx[b-nrv80z4clk] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.tcr-name[b-nrv80z4clk] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcr-sub[b-nrv80z4clk] {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.tcr-status[b-nrv80z4clk] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcr-sep[b-nrv80z4clk] {
    display: inline-block;
    flex: none;
    width: 4px;
    height: 4px;
    margin: 0 var(--space-sm);
    border-radius: 50%;
    background: var(--color-text-tertiary);
}

/* Class and level ride the status line from 1280 up (canvas A-1366 / A-1920); narrower rows show the status alone. */
.tcr-class-level[b-nrv80z4clk],
.tcr-class-sep[b-nrv80z4clk] {
    display: none;
}

@media (min-width: 1280px) {
    .tcr-class-level[b-nrv80z4clk] {
        display: inline;
        flex: none;
    }

    .tcr-class-sep[b-nrv80z4clk] {
        display: inline-block;
    }
}

/* ===== Avatar: portrait or letter in the class-colored ring, the presence mark on its corner ===== */

.tcr-ava[b-nrv80z4clk] {
    --tcr-ring: var(--color-text-tertiary);

    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
}

.tcr-ava-frame[b-nrv80z4clk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--tcr-ring);
    background: var(--color-gray-800);
}

.tcr-ava-frame img[b-nrv80z4clk] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 10%;
}

.tcr-initial[b-nrv80z4clk] {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
}

.tcr-presence[b-nrv80z4clk] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--tcr-card-bg);
}

.tcr-presence--online[b-nrv80z4clk] {
    background: var(--color-success-light);
}

.tcr-presence--away[b-nrv80z4clk] {
    background: var(--tcr-card-bg);
    box-shadow: inset 0 0 0 3px var(--color-warning);
}

/* ===== Invite rows (an invite no friend row carries) ===== */

.tcr-invites[b-nrv80z4clk] {
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.tcr-invite[b-nrv80z4clk] {
    flex-wrap: wrap;
    padding: var(--space-sm) 10px;
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-gray-900) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.tcr-invite-icon[b-nrv80z4clk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

.tcr-invite-icon[b-nrv80z4clk]  .tcr-invite-glyph {
    width: 22px;
    height: 22px;
    font-size: 22px;
}

.tcr-timer[b-nrv80z4clk] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: none;
    font-weight: var(--font-weight-bold);
    color: var(--color-danger-lighter);
}

.tcr-timer[b-nrv80z4clk]  .tcr-timer-glyph {
    width: 15px;
    height: 15px;
    font-size: 15px;
}

.tcr-invite-actions[b-nrv80z4clk] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;
}

.tcr-blocked[b-nrv80z4clk] {
    font-size: var(--font-size-sm);
    color: var(--color-primary-light);
    white-space: nowrap;
}

/* ===== Buttons ===== */

.tcr-btn[b-nrv80z4clk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: none;
    min-height: 36px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tcr-btn[b-nrv80z4clk]  .tcr-btn-glyph {
    width: 17px;
    height: 17px;
    font-size: 17px;
}

.tcr-btn--gold[b-nrv80z4clk] {
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 45%, var(--color-primary-dark));
    color: var(--color-bg-base);
    font-weight: var(--font-weight-bold);
}

.tcr-btn--quiet[b-nrv80z4clk] {
    background: color-mix(in srgb, var(--color-gray-900) 65%, transparent);
    border-color: color-mix(in srgb, var(--color-text-secondary) 32%, transparent);
    color: var(--color-text-lighter);
}

.tcr-btn--gold:hover[b-nrv80z4clk] {
    filter: brightness(1.06);
}

.tcr-btn--quiet:hover[b-nrv80z4clk] {
    border-color: var(--color-border-active);
    color: var(--color-text-primary);
}

.tcr-icon-btn[b-nrv80z4clk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xl);
    color: var(--color-text-light);
}

.tcr-icon-btn:hover[b-nrv80z4clk] {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.tcr-icon-btn[b-nrv80z4clk]  .tcr-icon-glyph {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.tcr-btn:focus-visible[b-nrv80z4clk],
.tcr-icon-btn:focus-visible[b-nrv80z4clk] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.tcr-count[b-nrv80z4clk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-danger);
    color: var(--color-text-primary);
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
}

.tcr-foot[b-nrv80z4clk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
    padding-top: var(--space-md);
    border-top: 1px solid var(--tcr-line);
}

.tcr-foot--empty[b-nrv80z4clk] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Touch screens: 44px targets (spec section 3, tablet). */
@media (pointer: coarse) {
    .tcr-btn[b-nrv80z4clk] {
        min-height: 44px;
    }
}

/* ===== Phone (camp mode, canvas A-390): "4 here", status lines only, no footer (the hub dock carries Friends) ===== */
@media (max-width: 480px) {
    .tavern-common-room[b-nrv80z4clk] {
        gap: 2px;
        padding: 14px;
    }

    .tcr-here-long[b-nrv80z4clk] {
        display: none;
    }

    .tcr-here-short[b-nrv80z4clk] {
        display: inline;
    }

    .tcr-foot:not(.tcr-foot--empty)[b-nrv80z4clk] {
        display: none;
    }

    .tcr-invite-actions[b-nrv80z4clk] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Components/Tavern/TavernContractCard.razor.rz.scp.css */
/* TavernContractCard (owner: W3; shared with GarrickConversation). Design tokens only; translucent shades are
   color-mix() of a token. Canonical breakpoints only (480). No animation or transition.
   Rows inside TavernContractsPanel read the panel's "tavern-contracts" container: below 600px wide (the 1024 tier,
   the wide tier's narrow column) the reward chips drop under the text, as on canvas boards A-1024 and A-1920. */

.tcc[b-cjfz4vlrvg] {
    --tcc-gold: var(--color-primary);
    --tcc-line: color-mix(in srgb, var(--color-text-secondary) 14%, transparent);

    min-width: 0;
    border-radius: var(--radius-2xl);
    background: color-mix(in srgb, var(--color-gray-900) 60%, transparent);
    border: 1px solid var(--tcc-line);
    color: var(--color-text-primary);
}

.tcc.is-weekly[b-cjfz4vlrvg] {
    border-color: color-mix(in srgb, var(--color-info-light) 35%, transparent);
}

/* ===== Shared pieces ===== */

.tcc-icon[b-cjfz4vlrvg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
    color: var(--tcc-gold);
}

.tcc-icon[b-cjfz4vlrvg]  .tcc-icon-glyph {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

.tcc.is-weekly .tcc-icon[b-cjfz4vlrvg] {
    background: color-mix(in srgb, var(--color-info) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-info-light) 45%, transparent);
    color: var(--color-info-lighter);
}

.tcc-title[b-cjfz4vlrvg] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
}

.tcc-period[b-cjfz4vlrvg] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-info-lighter);
}

.tcc-description[b-cjfz4vlrvg] {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--color-text-secondary);
}

.tcc-progress[b-cjfz4vlrvg] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.tcc-bar[b-cjfz4vlrvg] {
    position: relative;
    flex: 1;
    min-width: 48px;
    height: 7px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    overflow: hidden;
}

.tcc-fill[b-cjfz4vlrvg] {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--tcc-fill, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
}

.tcc.is-done .tcc-fill[b-cjfz4vlrvg] {
    background: linear-gradient(90deg, var(--color-success-dark), var(--color-success-light));
}

.tcc-tally[b-cjfz4vlrvg] {
    display: inline-flex;
    color: var(--color-text-tertiary);
}

.tcc-tally.is-done[b-cjfz4vlrvg] {
    color: var(--color-success-light);
}

.tcc-tally[b-cjfz4vlrvg]  .tcc-tally-glyph {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.tcc-count[b-cjfz4vlrvg],
.tcc-count-compact[b-cjfz4vlrvg] {
    flex: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-lighter);
    white-space: nowrap;
}

.tcc-count-compact[b-cjfz4vlrvg],
.tcc-reward-text[b-cjfz4vlrvg] {
    display: none;
}

.tcc-chip[b-cjfz4vlrvg] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
    background: color-mix(in srgb, var(--color-gray-900) 72%, transparent);
    color: var(--color-text-lighter);
}

.tcc-chip[b-cjfz4vlrvg]  .tcc-chip-glyph {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.tcc-chip--gold[b-cjfz4vlrvg] {
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
    background: color-mix(in srgb, var(--color-primary-darker) 38%, transparent);
    color: var(--color-primary-light);
}

.tcc-chip--coin[b-cjfz4vlrvg] {
    color: var(--color-primary-light);
}

.tcc-chip--success[b-cjfz4vlrvg] {
    border-color: color-mix(in srgb, var(--color-success-light) 50%, transparent);
    background: color-mix(in srgb, var(--color-success-dark) 35%, transparent);
    color: var(--color-success-lighter);
}

.tcc-chip--info[b-cjfz4vlrvg] {
    border-color: color-mix(in srgb, var(--color-info-light) 50%, transparent);
    background: color-mix(in srgb, var(--color-info-dark) 35%, transparent);
    color: var(--color-info-lightest);
}

.tcc-chip--epic[b-cjfz4vlrvg] {
    border-color: color-mix(in srgb, var(--color-rarity-epic) 55%, transparent);
    background: color-mix(in srgb, var(--color-rarity-epic) 25%, transparent);
    color: var(--color-monk-lightest);
}

.tcc-chip--danger[b-cjfz4vlrvg] {
    border-color: color-mix(in srgb, var(--color-danger-light) 55%, transparent);
    background: color-mix(in srgb, var(--color-danger-dark) 35%, transparent);
    color: var(--color-danger-lightest);
}

.tcc-take[b-cjfz4vlrvg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 var(--space-md);
    border: none;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 45%, var(--color-primary-dark));
    color: var(--color-bg-base);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    cursor: pointer;
}

.tcc-take:hover[b-cjfz4vlrvg] {
    filter: brightness(1.06);
}

.tcc-take:focus-visible[b-cjfz4vlrvg] {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

.tcc-status[b-cjfz4vlrvg] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-success-lighter);
    white-space: nowrap;
}

.tcc-status[b-cjfz4vlrvg]  .tcc-status-glyph {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* ===== Row (contracts panel) ===== */

.tcc--row[b-cjfz4vlrvg] {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-md) 14px;
    padding: 14px var(--space-lg);
}

.tcc-body[b-cjfz4vlrvg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tcc-line[b-cjfz4vlrvg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-sm);
    row-gap: 2px;
    min-width: 0;
}

.tcc--row .tcc-description[b-cjfz4vlrvg] {
    min-width: 0;
}

.tcc-sep[b-cjfz4vlrvg] {
    width: 4px;
    height: 4px;
    flex: none;
    border-radius: 50%;
    background: var(--color-text-tertiary);
}

.tcc-rewards[b-cjfz4vlrvg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-width: 220px;
}

/* A narrow panel (the 1024 tier, the wide tier's column): title over description, chips under the text. */
@container tavern-contracts (max-width: 599px) {
    .tcc--row[b-cjfz4vlrvg] {
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: start;
        row-gap: 10px;
    }

    .tcc--row .tcc-icon[b-cjfz4vlrvg] {
        width: 44px;
        height: 44px;
    }

    .tcc--row .tcc-line[b-cjfz4vlrvg] {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 6px;
    }

    .tcc--row .tcc-sep[b-cjfz4vlrvg] {
        display: none;
    }

    .tcc--row .tcc-rewards[b-cjfz4vlrvg] {
        grid-column: 2;
        justify-content: flex-start;
        max-width: none;
    }
}

/* ===== Compact (phone): title and reward on one line, then the bar and "7/12 undead" ===== */

.tcc--compact[b-cjfz4vlrvg] {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--space-md);
    padding: var(--space-md);
}

.tcc--compact .tcc-icon[b-cjfz4vlrvg] {
    width: 40px;
    height: 40px;
}

.tcc--compact .tcc-icon[b-cjfz4vlrvg]  .tcc-icon-glyph {
    width: 21px;
    height: 21px;
    font-size: 21px;
}

.tcc--compact .tcc-line[b-cjfz4vlrvg] {
    flex-wrap: nowrap;
}

.tcc--compact .tcc-title[b-cjfz4vlrvg] {
    font-size: 0.84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tcc--compact .tcc-sep[b-cjfz4vlrvg],
.tcc--compact .tcc-description[b-cjfz4vlrvg],
.tcc--compact .tcc-count[b-cjfz4vlrvg],
.tcc--compact .tcc-chip[b-cjfz4vlrvg] {
    display: none;
}

.tcc--compact .tcc-reward-text[b-cjfz4vlrvg] {
    display: inline;
    margin-left: auto;
    padding-left: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-light);
    white-space: nowrap;
}

.tcc--compact .tcc-reward-text.is-info[b-cjfz4vlrvg] {
    color: var(--color-info-lighter);
}

.tcc--compact .tcc-count-compact[b-cjfz4vlrvg] {
    display: inline;
    font-size: 0.72rem;
}

.tcc--compact .tcc-bar[b-cjfz4vlrvg] {
    height: 6px;
}

.tcc--compact .tcc-rewards[b-cjfz4vlrvg] {
    grid-column: 1 / -1;
    justify-content: flex-end;
    max-width: none;
}

.tcc--compact .tcc-rewards:not(:has(.tcc-take, .tcc-status))[b-cjfz4vlrvg] {
    display: none;
}

@media (max-width: 480px) {
    .tcc--row[b-cjfz4vlrvg] {
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-md);
    }

    .tcc--row .tcc-icon[b-cjfz4vlrvg] {
        width: 40px;
        height: 40px;
    }

    .tcc--row .tcc-line[b-cjfz4vlrvg] {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    .tcc--row .tcc-title[b-cjfz4vlrvg] {
        font-size: 0.84rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tcc--row .tcc-sep[b-cjfz4vlrvg],
    .tcc--row .tcc-description[b-cjfz4vlrvg],
    .tcc--row .tcc-count[b-cjfz4vlrvg],
    .tcc--row .tcc-chip[b-cjfz4vlrvg] {
        display: none;
    }

    .tcc--row .tcc-reward-text[b-cjfz4vlrvg] {
        display: inline;
        margin-left: auto;
        padding-left: var(--space-sm);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary-light);
        white-space: nowrap;
    }

    .tcc--row .tcc-reward-text.is-info[b-cjfz4vlrvg] {
        color: var(--color-info-lighter);
    }

    .tcc--row .tcc-count-compact[b-cjfz4vlrvg] {
        display: inline;
        font-size: 0.72rem;
    }

    .tcc--row .tcc-bar[b-cjfz4vlrvg] {
        height: 6px;
    }

    .tcc--row .tcc-rewards[b-cjfz4vlrvg] {
        grid-column: 1 / -1;
        justify-content: flex-end;
        max-width: none;
    }

    .tcc--row .tcc-rewards:not(:has(.tcc-take, .tcc-status))[b-cjfz4vlrvg] {
        display: none;
    }
}

/* ===== Card (Garrick's conversation, canvas board A-Talk) ===== */

.tcc--card[b-cjfz4vlrvg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: 14px;
    background: color-mix(in srgb, var(--color-gray-900) 75%, transparent);
    border-color: color-mix(in srgb, var(--color-text-secondary) 20%, transparent);
}

.tcc--card.is-offered[b-cjfz4vlrvg] {
    border-color: var(--color-primary);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-primary) 12%, transparent),
        color-mix(in srgb, var(--color-gray-900) 85%, transparent));
    box-shadow: 0 0 30px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.tcc-head[b-cjfz4vlrvg] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tcc--card .tcc-icon[b-cjfz4vlrvg] {
    width: 38px;
    height: 38px;
    border-radius: 9px;
}

.tcc--card .tcc-icon[b-cjfz4vlrvg]  .tcc-icon-glyph {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.tcc-titles[b-cjfz4vlrvg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tcc--card .tcc-period[b-cjfz4vlrvg] {
    font-size: 0.66rem;
}

.tcc--card .tcc-bar[b-cjfz4vlrvg] {
    height: 6px;
}

.tcc-foot[b-cjfz4vlrvg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: auto;
}

.tcc--card .tcc-chip[b-cjfz4vlrvg] {
    height: 24px;
}

.tcc--card.is-offered .tcc-foot[b-cjfz4vlrvg] {
    flex-direction: column;
    align-items: stretch;
}

.tcc--card.is-offered .tcc-chip[b-cjfz4vlrvg] {
    align-self: flex-start;
}

/* Touch screens: 44px targets (spec section 3, tablet). */
@media (pointer: coarse) {
    .tcc-take[b-cjfz4vlrvg] {
        min-height: 44px;
    }
}
/* /Components/Tavern/TavernContractsPanel.razor.rz.scp.css */
/* TavernContractsPanel (owner: W3). Design tokens only; canonical breakpoints only (480). No animation.
   The frame is a size container ("tavern-contracts"): the heading and the rows (TavernContractCard) follow the
   column's width, so one component serves the 820px column at 1366, the full width at 768 and the narrow columns of
   the 1024 and wide tiers (canvas boards A-1366, A-768, A-1024, A-1920). */

.tavern-contracts-panel[b-y35kkegm6k] {
    min-width: 0;
    border-radius: var(--radius-3xl);
    background: linear-gradient(180deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 16%, transparent);
}

.tcp-frame[b-y35kkegm6k] {
    container: tavern-contracts / inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: 20px;
}

/* The section header brings its own bottom margin; the frame's gap spaces the panel instead. */
.tcp-head[b-y35kkegm6k]  .tavern-section-header {
    margin-bottom: 0;
}

.tcp-head--short[b-y35kkegm6k] {
    display: none;
}

.tcp-reset[b-y35kkegm6k] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.tcp-reset[b-y35kkegm6k]  .tcp-reset-glyph {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.tcp-reset-short[b-y35kkegm6k] {
    display: none;
}

.tcp-group[b-y35kkegm6k] {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin: 2px 0 0;
    font-family: var(--font-display);
    font-size: 0.69rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.tcp-group-note[b-y35kkegm6k] {
    font-family: var(--font-primary);
    font-size: 0.69rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    text-transform: none;
    /* Secondary, not tertiary: 11px text needs 4.5:1, and tertiary is about 3.1-3.75:1 on the panel. */
    color: var(--color-text-secondary);
}

.tcp-list[b-y35kkegm6k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* While the "This week" group label shows, the weekly row doesn't repeat it (canvas A-1366). */
.tcp-list[b-y35kkegm6k]  .tcc--row .tcc-period {
    display: none;
}

/* Between 520 and 639px: the long title, the short countdown (canvas A-768 keeps "Garrick's contracts"). */
@container tavern-contracts (max-width: 639px) {
    .tcp-reset-long[b-y35kkegm6k] {
        display: none;
    }

    .tcp-reset-short[b-y35kkegm6k] {
        display: inline;
    }
}

/* Under 520px: the short title ("Contracts") and no group labels; a weekly row carries its own WEEKLY label. */
@container tavern-contracts (max-width: 519px) {
    .tcp-head--long[b-y35kkegm6k] {
        display: none;
    }

    .tcp-head--short[b-y35kkegm6k] {
        display: block;
    }

    .tcp-group[b-y35kkegm6k] {
        display: none;
    }

    .tcp-list[b-y35kkegm6k]  .tcc--row .tcc-period {
        display: inline;
    }
}

@media (max-width: 480px) {
    .tcp-frame[b-y35kkegm6k] {
        gap: 10px;
        padding: 14px;
    }

    .tcp-list[b-y35kkegm6k] {
        gap: 10px;
    }
}
/* /Components/Tavern/TavernFirstSteps.razor.rz.scp.css */
/* TavernFirstSteps (owner: W2). Design tokens only; canonical breakpoints only (480 / 768 / 960 / 1024 / 1280).
   One card per step: 2x2 on portrait, one row from 960, a list at 480 and down. D7: no reward line. */

.tavern-first-steps[b-h45z826gco] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tfs-progress[b-h45z826gco] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.tfs-steps[b-h45z826gco] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tfs-step[b-h45z826gco] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: var(--space-lg);
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-gray-800) 94%, transparent),
        color-mix(in srgb, var(--color-gray-900) 97%, transparent));
}

.tfs-step--done[b-h45z826gco] {
    border-color: color-mix(in srgb, var(--color-success-light) 40%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-success-dark) 22%, transparent),
        color-mix(in srgb, var(--color-gray-900) 97%, transparent));
}

.tfs-top[b-h45z826gco] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tfs-check[b-h45z826gco] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--color-text-secondary) 50%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
}

.tfs-check[b-h45z826gco]  .mud-icon-root {
    width: 18px;
    height: 18px;
}

.tfs-step--done .tfs-check[b-h45z826gco] {
    border-color: var(--color-success);
    background: var(--color-success);
    color: var(--color-bg-base);
}

.tfs-title[b-h45z826gco] {
    min-width: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.tfs-sr[b-h45z826gco] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.tfs-bottom[b-h45z826gco] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-width: 0;
}

.tfs-detail[b-h45z826gco] {
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.tfs-action[b-h45z826gco] {
    display: flex;
    flex: none;
}

.tfs-action[b-h45z826gco]  .tfs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    transition: filter var(--transition-fast), background-color var(--transition-fast);
}

.tfs-action[b-h45z826gco]  .tfs-btn--gold {
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 45%, var(--color-primary-dark));
    color: var(--color-bg-base);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.tfs-action[b-h45z826gco]  .tfs-btn--gold:hover {
    filter: brightness(1.06);
}

.tfs-action[b-h45z826gco]  .tfs-btn--ghost {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    color: var(--color-primary);
}

.tfs-action[b-h45z826gco]  .tfs-btn--ghost:hover {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.tfs-action[b-h45z826gco]  .tfs-btn:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .tfs-steps[b-h45z826gco] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .tfs-step[b-h45z826gco] {
        padding: var(--space-md);
    }
}

@media (min-width: 960px) {
    .tfs-steps--n3[b-h45z826gco] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tfs-steps--n4[b-h45z826gco] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) and (pointer: fine) {
    .tfs-action[b-h45z826gco]  .tfs-btn {
        min-height: 36px;
        padding: 0 var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tfs-action[b-h45z826gco]  .tfs-btn {
        transition: none;
    }
}
/* /Components/Tavern/TavernHeroPlate.razor.rz.scp.css */
/* TavernHeroPlate (owner: W1). One markup, three looks (canvas boards):
     base (portrait 481-959, A-768)  the header band: portrait, grade, purse chip, vitals in three columns
     max-width 480 (A-390)           the compact band: race dropped, grade as a letter, short labels and values
     min-width 960 (A-1024)          the glass plate on the stage, a 64px portrait, quiet Sheet / Change hero buttons
     min-width 1280 (A-1920..1280)   the glass plate beside the standee: the level hex alone, text links
   Tokens only (the class ring reads --color-{class} through --thp-class), canonical breakpoints only. */

.tavern-hero-plate[b-nxg9uhd6qs] {
    --thp-gold: color-mix(in srgb, var(--color-primary-dark) 75%, var(--color-text-primary));
    --thp-portrait: 72px;
    --thp-level-w: 30px;
    --thp-level-h: 34px;

    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Below 960 the page bleeds the band over its gutters (Game.razor.css): the band's background runs edge to edge
       and its content pads back in by the gutter (A-768, A-390). */
    padding: var(--space-lg) var(--tavern-gutter, var(--space-xl));
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-secondary) 12%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-gray-800) 55%, transparent), transparent);
    color: var(--color-text-primary);
}

/* ---- Identity row ---- */

.thp-head[b-nxg9uhd6qs] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.thp-badge[b-nxg9uhd6qs] {
    position: relative;
    flex: none;
}

.thp-portrait[b-nxg9uhd6qs] {
    display: block;
    width: var(--thp-portrait);
    height: var(--thp-portrait);
    overflow: hidden;
    border: 3px solid var(--thp-class, var(--color-text-tertiary));
    border-radius: 50%;
    background: var(--color-gray-800);
}

.thp-portrait img[b-nxg9uhd6qs] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 10%;
}

.thp-portrait:focus-visible[b-nxg9uhd6qs] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.thp-level[b-nxg9uhd6qs] {
    position: absolute;
    right: -8px;
    bottom: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--thp-level-w);
    height: var(--thp-level-h);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 50%, var(--color-primary-dark));
    color: var(--color-bg-base);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.thp-ident[b-nxg9uhd6qs] {
    flex: 1;
    min-width: 0;
}

.thp-name[b-nxg9uhd6qs] {
    margin: 0;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thp-sub[b-nxg9uhd6qs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.thp-title[b-nxg9uhd6qs] {
    color: var(--thp-gold);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    font-style: italic;
}

.thp-sep[b-nxg9uhd6qs] {
    display: inline-block;
    flex: none;
    width: 4px;
    height: 4px;
    margin: 0 var(--space-sm);
    border-radius: 50%;
    background: var(--color-text-tertiary);
}

.thp-class[b-nxg9uhd6qs],
.thp-grade-sep[b-nxg9uhd6qs],
.thp-grade-letter[b-nxg9uhd6qs] {
    display: none;
}

/* Readiness grade: shape (shield chip) plus a word-free letter, toned by the builder. */
.thp-grade[b-nxg9uhd6qs] {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--space-xs);
    height: 26px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--thp-tone) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--thp-tone) 18%, var(--color-bg-base));
    color: var(--thp-tone-text);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.thp-grade[b-nxg9uhd6qs]  .mud-icon-root {
    width: 15px;
    height: 15px;
}

.thp-tone--success[b-nxg9uhd6qs] { --thp-tone: var(--color-success-light); --thp-tone-text: var(--color-success-lighter); }
.thp-tone--gold[b-nxg9uhd6qs] { --thp-tone: var(--color-warning); --thp-tone-text: var(--color-warning-lightest); }
.thp-tone--danger[b-nxg9uhd6qs] { --thp-tone: var(--color-danger-light); --thp-tone-text: var(--color-danger-lighter); }
.thp-tone--neutral[b-nxg9uhd6qs] { --thp-tone: var(--color-text-secondary); --thp-tone-text: var(--color-text-light); }

.thp-grade-letter[b-nxg9uhd6qs] {
    color: var(--thp-tone-text);
    font-weight: var(--font-weight-bold);
}

.thp-purse[b-nxg9uhd6qs] {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 var(--space-md);
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 7%, transparent);
    color: var(--color-primary-light);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.thp-purse[b-nxg9uhd6qs]  .mud-icon-root {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

/* ---- Vitals ---- */

.thp-vitals[b-nxg9uhd6qs] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.thp-vital[b-nxg9uhd6qs] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label value"
        "bar bar";
    align-items: center;
    gap: 5px var(--space-sm);
    min-width: 0;
}

.thp-vital-label[b-nxg9uhd6qs] {
    grid-area: label;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.thp-vital-value[b-nxg9uhd6qs] {
    grid-area: value;
    color: var(--color-text-lighter);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.thp-short[b-nxg9uhd6qs] {
    display: none;
}

.thp-bar[b-nxg9uhd6qs] {
    position: relative;
    grid-area: bar;
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 5px;
    background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
}

.thp-bar i[b-nxg9uhd6qs] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 5px;
    background: var(--thp-fill);
}

.thp-vital--health[b-nxg9uhd6qs] { --thp-fill: linear-gradient(90deg, var(--color-success-dark), var(--color-success-light)); }
.thp-vital--mana[b-nxg9uhd6qs] { --thp-fill: linear-gradient(90deg, var(--color-info-dark), var(--color-info-light)); }
.thp-vital--ki[b-nxg9uhd6qs] { --thp-fill: linear-gradient(90deg, var(--color-monk), var(--color-ki)); }
.thp-vital--swagger[b-nxg9uhd6qs] { --thp-fill: linear-gradient(90deg, var(--color-swagger), var(--color-pirate-light)); }
.thp-vital--xp[b-nxg9uhd6qs] { --thp-fill: linear-gradient(90deg, var(--color-primary-darker), var(--color-primary)); }

/* ---- Record, note, links (the plate only) ---- */

.thp-record[b-nxg9uhd6qs],
.thp-note[b-nxg9uhd6qs],
.thp-links[b-nxg9uhd6qs] {
    display: none;
}

.thp-record[b-nxg9uhd6qs] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
    margin: 0;
    padding: 11px 0;
    border-top: 1px solid color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
}

.thp-record > div[b-nxg9uhd6qs] {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    min-width: 0;
    text-align: center;
}

.thp-record dd[b-nxg9uhd6qs] {
    margin: 0;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.thp-record dt[b-nxg9uhd6qs] {
    color: var(--color-text-secondary);
    font-size: 11px;
}

.thp-record-purse dd[b-nxg9uhd6qs] {
    color: var(--color-primary-light);
}

.thp-note[b-nxg9uhd6qs] {
    gap: 6px;
    margin: 0;
    padding: 10px var(--space-md);
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-gray-900) 70%, transparent);
    color: var(--color-text-light);
    font-size: 12.5px;
    line-height: 1.45;
}

.thp-note-icon[b-nxg9uhd6qs] {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
}

.thp-note-icon[b-nxg9uhd6qs]  .mud-icon-root {
    width: 16px;
    height: 16px;
}

.thp-links[b-nxg9uhd6qs] {
    justify-content: space-between;
    gap: var(--space-sm);
}

.thp-link[b-nxg9uhd6qs] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--thp-gold);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.thp-link--quiet[b-nxg9uhd6qs] {
    color: var(--color-text-light);
}

.thp-link:hover[b-nxg9uhd6qs] {
    color: var(--color-primary);
}

.thp-link:focus-visible[b-nxg9uhd6qs] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.thp-link[b-nxg9uhd6qs]  .mud-icon-root {
    width: 17px;
    height: 17px;
}

/* ---- Phone (A-390): compact band ---- */
@media (max-width: 480px) {
    .tavern-hero-plate[b-nxg9uhd6qs] {
        --thp-portrait: 56px;
        --thp-level-w: 26px;
        --thp-level-h: 30px;

        gap: var(--space-md);
        padding: var(--space-md) var(--tavern-gutter, var(--space-lg));
    }

    .thp-head[b-nxg9uhd6qs] {
        gap: var(--space-md);
    }

    .thp-level[b-nxg9uhd6qs] {
        right: -7px;
        bottom: -7px;
        font-size: 12px;
    }

    /* The band shares the row with the purse chip: a long name takes a second line rather than an ellipsis. */
    .thp-name[b-nxg9uhd6qs] {
        display: -webkit-box;
        font-size: 17px;
        line-height: 1.2;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .thp-sub[b-nxg9uhd6qs] {
        font-size: 12px;
    }

    .thp-title[b-nxg9uhd6qs] {
        font-size: 14px;
    }

    .thp-sep[b-nxg9uhd6qs] {
        margin: 0 6px;
    }

    .thp-race-class[b-nxg9uhd6qs],
    .thp-grade[b-nxg9uhd6qs] {
        display: none;
    }

    .thp-class[b-nxg9uhd6qs],
    .thp-grade-sep[b-nxg9uhd6qs] {
        display: inline-block;
    }

    .thp-grade-letter[b-nxg9uhd6qs] {
        display: inline;
    }

    .thp-purse[b-nxg9uhd6qs] {
        height: 30px;
        padding: 0 10px;
        font-size: 12px;
    }

    .thp-purse[b-nxg9uhd6qs]  .mud-icon-root {
        width: 16px;
        height: 16px;
    }

    .thp-vitals[b-nxg9uhd6qs] {
        gap: var(--space-md);
    }

    .thp-vital[b-nxg9uhd6qs] {
        gap: var(--space-xs);
    }

    .thp-vital-label[b-nxg9uhd6qs],
    .thp-vital-value[b-nxg9uhd6qs] {
        font-size: 10.5px;
    }

    .thp-vital-label[b-nxg9uhd6qs] {
        letter-spacing: 0.06em;
    }

    .thp-bar[b-nxg9uhd6qs] {
        height: 6px;
    }

    .thp-full[b-nxg9uhd6qs] {
        display: none;
    }

    .thp-short[b-nxg9uhd6qs] {
        display: inline;
    }
}

/* ---- Tablet (A-1024): the glass plate on the stage, 64px portrait ---- */
@media (min-width: 960px) {
    .tavern-hero-plate[b-nxg9uhd6qs] {
        --thp-portrait: 64px;
        --thp-level-w: 28px;
        --thp-level-h: 32px;

        gap: 13px;
        padding: 18px;
        border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
        border-radius: var(--radius-3xl);
        background: color-mix(in srgb, var(--color-bg-base) 80%, transparent);
        box-shadow: 0 20px 50px color-mix(in srgb, black 45%, transparent);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .thp-head[b-nxg9uhd6qs] {
        gap: var(--space-md);
    }

    .thp-level[b-nxg9uhd6qs] {
        font-size: 13px;
    }

    .thp-name[b-nxg9uhd6qs] {
        font-size: 16px;
    }

    .thp-sub[b-nxg9uhd6qs] {
        font-size: 12.5px;
    }

    .thp-title[b-nxg9uhd6qs] {
        font-size: 14.5px;
    }

    .thp-race-class[b-nxg9uhd6qs],
    .thp-purse[b-nxg9uhd6qs] {
        display: none;
    }

    .thp-class[b-nxg9uhd6qs] {
        display: inline;
    }

    .thp-vitals[b-nxg9uhd6qs] {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .thp-vital[b-nxg9uhd6qs] {
        grid-template-columns: 58px minmax(0, 1fr) auto;
        grid-template-areas: "label bar value";
        gap: 10px;
    }

    .thp-vital-label[b-nxg9uhd6qs] {
        font-size: 10.5px;
    }

    .thp-vital-value[b-nxg9uhd6qs] {
        font-size: 12px;
    }

    /* The tablet plate shows the XP percent ("68%"), not the XP to go. */
    .thp-vital-value--xp .thp-full[b-nxg9uhd6qs] {
        display: none;
    }

    .thp-vital-value--xp .thp-short[b-nxg9uhd6qs] {
        display: inline;
    }

    .thp-record[b-nxg9uhd6qs] {
        display: grid;
        gap: 6px;
        padding: 9px 0;
    }

    .thp-record dd[b-nxg9uhd6qs] {
        font-size: 14px;
    }

    .thp-record dt[b-nxg9uhd6qs] {
        font-size: 10.5px;
    }

    .thp-note[b-nxg9uhd6qs] {
        display: flex;
        align-items: flex-start;
    }

    .thp-links[b-nxg9uhd6qs] {
        display: flex;
    }

    .thp-link[b-nxg9uhd6qs] {
        flex: 1;
        justify-content: center;
        min-height: 36px;
        padding: 0 var(--space-md);
        border: 1px solid color-mix(in srgb, var(--color-text-secondary) 32%, transparent);
        border-radius: var(--radius-lg);
        background: color-mix(in srgb, var(--color-gray-900) 65%, transparent);
        color: var(--color-text-lighter);
    }

    .thp-full[b-nxg9uhd6qs] {
        display: none;
    }

    .thp-short[b-nxg9uhd6qs] {
        display: inline;
    }

    .thp-vital-label .thp-full[b-nxg9uhd6qs],
    .thp-vital-value:not(.thp-vital-value--xp) .thp-full[b-nxg9uhd6qs] {
        display: inline;
    }

    .thp-vital-label .thp-short[b-nxg9uhd6qs],
    .thp-vital-value:not(.thp-vital-value--xp) .thp-short[b-nxg9uhd6qs] {
        display: none;
    }
}

/* ---- Desktop (A-1920 / A-1366 / A-1280): beside the standee, the level hex alone ---- */
/* Touch screens on the tablet tier: 44px Sheet / Change hero buttons (spec section 3). Before the desktop block,
   which turns them back into text links. */
@media (min-width: 960px) and (pointer: coarse) {
    .thp-link[b-nxg9uhd6qs] {
        min-height: 44px;
    }
}

@media (min-width: 1280px) {
    .tavern-hero-plate[b-nxg9uhd6qs] {
        --thp-level-w: 44px;
        --thp-level-h: 50px;

        gap: 15px;
        padding: 22px;
    }

    .thp-portrait[b-nxg9uhd6qs] {
        display: none;
    }

    .thp-level[b-nxg9uhd6qs] {
        position: static;
        font-size: 19px;
    }

    .thp-name[b-nxg9uhd6qs] {
        font-size: clamp(19px, 0.6vw + 12px, 23px);
        white-space: normal;
    }

    .thp-sub[b-nxg9uhd6qs] {
        font-size: 13px;
    }

    .thp-title[b-nxg9uhd6qs] {
        font-size: 16px;
    }

    .thp-race-class[b-nxg9uhd6qs] {
        display: inline;
    }

    .thp-class[b-nxg9uhd6qs] {
        display: none;
    }

    .thp-vitals[b-nxg9uhd6qs] {
        gap: 10px;
    }

    .thp-vital-value--xp .thp-full[b-nxg9uhd6qs] {
        display: inline;
    }

    .thp-vital-value--xp .thp-short[b-nxg9uhd6qs] {
        display: none;
    }

    .thp-record[b-nxg9uhd6qs] {
        gap: var(--space-sm);
        padding: 11px 0;
    }

    .thp-record dd[b-nxg9uhd6qs] {
        font-size: 16px;
    }

    .thp-record dt[b-nxg9uhd6qs] {
        font-size: 11px;
    }

    .thp-links[b-nxg9uhd6qs] {
        justify-content: space-between;
    }

    .thp-link[b-nxg9uhd6qs] {
        flex: none;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--thp-gold);
    }

    .thp-link--quiet[b-nxg9uhd6qs] {
        color: var(--color-text-light);
    }

    .thp-link .thp-full[b-nxg9uhd6qs] {
        display: inline;
    }

    .thp-link .thp-short[b-nxg9uhd6qs] {
        display: none;
    }
}
/* /Components/Tavern/TavernHubDock.razor.rz.scp.css */
/* TavernHubDock (owner: W4; canvas A-390, A-Sheet). Design tokens only, canonical breakpoints only.
   Hidden above the phone tier; at 480 and down a fixed 72px bar over the safe-area inset. The page reserves the
   same height at the bottom of the page (game-hub.css), and the bottom sheet stops at the dock's top edge so the
   dock stays usable while a sheet is open. --tavern-dock-height comes from the page (.tavern-page). */

.tavern-hub-dock[b-d3aa440m5r] {
    display: none;
}

@media (max-width: 480px) {
    .tavern-hub-dock[b-d3aa440m5r] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* Below MudBlazor's popovers, snackbars and the hamburger's drawer; above the page. */
        z-index: var(--mud-zindex-drawer, 1100);
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        height: calc(var(--tavern-dock-height, 72px) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        /* Opaque: even a 97% fill let the sections scrolling underneath read through the labels. */
        background: var(--color-bg-base);
        border-top: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
        box-shadow: 0 -12px 30px color-mix(in srgb, black 55%, transparent);
    }
}

.thd-item[b-d3aa440m5r] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0 var(--space-xs);
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-light);
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms ease;
}

.thd-item:focus-visible[b-d3aa440m5r] {
    outline: 2px solid var(--color-primary);
    outline-offset: -4px;
}

.thd-item:active[b-d3aa440m5r] {
    color: var(--color-primary-light);
}

@media (hover: hover) {
    .thd-item:hover[b-d3aa440m5r] {
        color: var(--color-text-primary);
    }
}

/* The open sheet's button: gold, with the comp's short bar on the dock's top edge. */
.thd-item--active[b-d3aa440m5r],
.thd-item--active:hover[b-d3aa440m5r] {
    color: var(--color-primary);
}

.thd-item--active[b-d3aa440m5r]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30%;
    right: 30%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--color-primary);
}

.thd-icon[b-d3aa440m5r] {
    position: relative;
    display: inline-flex;
}

.thd-icon[b-d3aa440m5r]  .thd-glyph {
    font-size: 24px;
}

.thd-label[b-d3aa440m5r] {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Count pips (the count is in the button's accessible name; the pip itself is aria-hidden). */
.thd-pip[b-d3aa440m5r] {
    position: absolute;
    top: -6px;
    left: calc(100% - 8px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid var(--color-bg-base);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.thd-pip--success[b-d3aa440m5r] {
    background: var(--color-success);
    color: var(--color-bg-base);
}

.thd-pip--gold[b-d3aa440m5r] {
    background: var(--color-primary);
    color: var(--color-bg-base);
}

.thd-pip--danger[b-d3aa440m5r] {
    background: var(--color-danger);
    color: var(--color-text-primary);
}

@media (prefers-reduced-motion: reduce) {
    .thd-item[b-d3aa440m5r] {
        transition: none;
    }
}
/* /Components/Tavern/TavernHubPanels.razor.rz.scp.css */
/* TavernHubPanels (owner: F). Hiding uses the global game-hub-panel-hidden class (wwwroot/css/game-hub.css). */
/* /Components/Tavern/TavernNoticeBoard.razor.rz.scp.css */
/* TavernNoticeBoard (owner: W3). Design tokens only; translucent shades are color-mix() of a token. Canonical
   breakpoints only (480). No animation or transition.
   Two columns by default (canvas A-1366, A-1024, A-768); .tnb--combined is the wide tier's single list (A-1920);
   at 480 and down a switch shows one column at a time (A-390). */

.tavern-notice-board[b-pzsnbgllrx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 36px;
    min-width: 0;
    padding: 20px var(--space-xl);
    border-radius: var(--radius-3xl);
    background: linear-gradient(180deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 16%, transparent);
}

.tnb-column[b-pzsnbgllrx] {
    min-width: 0;
}

.tnb-column[b-pzsnbgllrx]  .tavern-section-header {
    margin-bottom: var(--space-xs);
}

.tnb-link[b-pzsnbgllrx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-light);
    text-decoration: none;
    white-space: nowrap;
}

.tnb-link:hover[b-pzsnbgllrx] {
    color: var(--color-primary);
}

.tnb-link[b-pzsnbgllrx]  .tnb-link-glyph {
    width: 17px;
    height: 17px;
    font-size: 17px;
}

.tnb-empty[b-pzsnbgllrx] {
    margin: 0;
    padding: 10px 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.tnb-feed[b-pzsnbgllrx] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tnb-item[b-pzsnbgllrx] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: 10px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-secondary) 12%, transparent);
}

.tnb-item:last-child[b-pzsnbgllrx] {
    border-bottom: none;
}

.tnb-tile[b-pzsnbgllrx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.tnb-tile[b-pzsnbgllrx]  .tnb-tile-glyph {
    width: 19px;
    height: 19px;
    font-size: 19px;
}

.tnb-tile--danger[b-pzsnbgllrx] {
    background: color-mix(in srgb, var(--color-danger-dark) 35%, transparent);
    color: var(--color-danger-lighter);
}

.tnb-tile--epic[b-pzsnbgllrx] {
    background: color-mix(in srgb, var(--color-rarity-epic) 30%, transparent);
    color: var(--color-monk-lightest);
}

.tnb-tile--gold[b-pzsnbgllrx] {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

.tnb-tile--info[b-pzsnbgllrx] {
    background: color-mix(in srgb, var(--color-info) 14%, transparent);
    color: var(--color-info-lighter);
}

.tnb-tile--success[b-pzsnbgllrx] {
    background: color-mix(in srgb, var(--color-cleric) 14%, transparent);
    color: var(--color-cleric-light);
}

.tnb-tile--neutral[b-pzsnbgllrx] {
    background: color-mix(in srgb, var(--color-text-secondary) 12%, transparent);
    color: var(--color-text-light);
}

.tnb-tx[b-pzsnbgllrx] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tnb-text[b-pzsnbgllrx] {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--color-text-lighter);
    overflow-wrap: anywhere;
}

.tnb-actor[b-pzsnbgllrx] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.tnb-highlight[b-pzsnbgllrx] {
    font-weight: var(--font-weight-semibold);
}

.tnb-highlight--epic[b-pzsnbgllrx] {
    color: var(--color-monk-light);
}

.tnb-highlight--gold[b-pzsnbgllrx] {
    color: var(--color-primary-light);
}

.tnb-highlight--neutral[b-pzsnbgllrx] {
    color: var(--color-text-light);
}

.tnb-post[b-pzsnbgllrx] {
    text-decoration: none;
}

.tnb-post:hover[b-pzsnbgllrx] {
    color: var(--color-primary-light);
    text-decoration: underline;
}

.tnb-post:focus-visible[b-pzsnbgllrx],
.tnb-link:focus-visible[b-pzsnbgllrx],
.tnb-switch-btn:focus-visible[b-pzsnbgllrx] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.tnb-meta[b-pzsnbgllrx] {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.tnb-sep[b-pzsnbgllrx] {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 var(--space-sm);
    border-radius: 50%;
    background: var(--color-text-tertiary);
}

/* ===== The phone switch (hidden until 480) ===== */

.tnb-switch[b-pzsnbgllrx] {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-xs);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-gray-900) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 18%, transparent);
}

.tnb-switch-btn[b-pzsnbgllrx] {
    min-height: 40px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

/* Touch screens: 44px targets (spec section 3); the text links grow their hit area, not their type. */
@media (pointer: coarse) {
    .tnb-switch-btn[b-pzsnbgllrx],
    .tnb-link[b-pzsnbgllrx] {
        min-height: 44px;
    }
}

.tnb-switch-btn[aria-pressed="true"][b-pzsnbgllrx] {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

/* ===== Wide tier: one list ===== */

.tavern-notice-board.tnb--combined[b-pzsnbgllrx] {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
}

/* The dispatches run on under the rumors as one list: the seam gets the same rule as the rows. */
.tnb--combined .tnb-column--rumors:has(.tnb-feed) + .tnb-column--dispatches:has(.tnb-feed)[b-pzsnbgllrx] {
    border-top: 1px solid color-mix(in srgb, var(--color-text-secondary) 12%, transparent);
}

/* ===== Phone (camp mode): the switch, one column at a time, no column headings ===== */
@media (max-width: 480px) {
    .tavern-notice-board[b-pzsnbgllrx] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
        padding: 14px;
    }

    .tnb-switch[b-pzsnbgllrx] {
        display: grid;
    }

    .tnb-column[b-pzsnbgllrx]  .tavern-section-header {
        display: none;
    }

    .tnb--show-rumors .tnb-column--dispatches[b-pzsnbgllrx],
    .tnb--show-dispatches .tnb-column--rumors[b-pzsnbgllrx] {
        display: none;
    }

    .tnb--combined .tnb-column[b-pzsnbgllrx]  .tavern-section-header {
        display: flex;
    }
}
/* /Components/Tavern/TavernQuestStage.razor.rz.scp.css */
/* TavernQuestStage (owner: W1). Canvas boards A-1920 / A-1366 / A-1280 (stage, standee, chips beside the CTA),
   A-1024 (no standee), A-768 (the quest card), A-390 (the "Where you left off" card), A-New (first adventure).
   Base = portrait (481-959); max-width 480 = phone; min-width 960 = the stage under the plate; min-width 1280 =
   the standee. Reads the page tokens (Game.razor.css, 0 where they don't apply): --tavern-stage-bleed (from 960 the
   stage runs over the page gutters, so the text pads back in by it), --tavern-stage-clear-end (the room the text keeps
   clear for the plate), --tavern-standee-width / --tavern-standee-end (the standee's box), --tavern-plate-width.
   Tokens only, canonical breakpoints only; the live dot and the CTA lift stop under reduced motion. */

.tavern-quest-stage[b-5u7ovev2wa] {
    --tqs-gold: color-mix(in srgb, var(--color-primary-dark) 75%, var(--color-text-primary));
    --tqs-cream: color-mix(in srgb, var(--color-warning-lightest) 30%, var(--color-text-primary));
    --tqs-ink: var(--color-bg-base);

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    border-radius: 18px;
    background: var(--tqs-ink);
    color: var(--color-text-primary);
}

.tavern-quest-stage.tqs--boss[b-5u7ovev2wa] {
    border-color: color-mix(in srgb, var(--color-danger-light) 40%, transparent);
}

/* ---- Art, shade, standee ---- */

.tqs-art[b-5u7ovev2wa] {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.tqs-art-img[b-5u7ovev2wa] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 40%;
}

.tqs-shade[b-5u7ovev2wa] {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--tqs-ink) 92%, transparent) 100%),
        linear-gradient(90deg,
            color-mix(in srgb, var(--tqs-ink) 95%, transparent) 0%,
            color-mix(in srgb, var(--tqs-ink) 80%, transparent) 55%,
            color-mix(in srgb, var(--tqs-ink) 45%, transparent) 100%);
}

.tqs-standee[b-5u7ovev2wa] {
    display: none;
}

/* ---- Body ---- */

.tqs-body[b-5u7ovev2wa] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-xl);
}

.tqs-eyebrow-row[b-5u7ovev2wa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-height: 32px;
}

.tqs-live-dot[b-5u7ovev2wa] {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary);
    animation: tqs-blink-b-5u7ovev2wa 1.8s ease-in-out infinite;
}

.tqs-eyebrow-icon[b-5u7ovev2wa] {
    display: inline-flex;
    color: var(--color-primary);
}

.tqs-eyebrow-icon[b-5u7ovev2wa]  .mud-icon-root {
    width: 18px;
    height: 18px;
}

.tqs-eyebrow[b-5u7ovev2wa] {
    color: var(--tqs-gold);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.tqs-eyebrow--compact[b-5u7ovev2wa] {
    display: none;
}

.tqs-sep[b-5u7ovev2wa] {
    display: inline-block;
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-text-tertiary);
}

.tqs-eyebrow-detail-text[b-5u7ovev2wa] {
    color: var(--color-text-light);
    font-size: 13px;
}

/* With a switcher the button names the count below 1280 (desktop shows both). */
.tqs--switch .tqs-eyebrow-detail[b-5u7ovev2wa] {
    display: none;
}

.tqs-eyebrow-row[b-5u7ovev2wa]  .tqs-switch-menu {
    margin-left: auto;
}

.tqs-eyebrow-row[b-5u7ovev2wa]  .tqs-switch-menu [role="button"]:focus-visible {
    border-radius: var(--radius-lg);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.tqs-switch[b-5u7ovev2wa] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 var(--space-md);
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 32%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-gray-900) 65%, transparent);
    color: var(--color-text-lighter);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.tqs-switch[b-5u7ovev2wa]  .mud-icon-root {
    width: 17px;
    height: 17px;
}

.tqs-switch-label--full[b-5u7ovev2wa],
.tqs-switch-label--mid[b-5u7ovev2wa] {
    display: none;
}

.tqs-switch-item[b-5u7ovev2wa] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tqs-switch-item small[b-5u7ovev2wa] {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.tqs-title[b-5u7ovev2wa] {
    margin: 6px 0 0;
    color: var(--tqs-cream);
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 4px 24px color-mix(in srgb, black 70%, transparent);
    overflow-wrap: anywhere;
}

.tqs-meta[b-5u7ovev2wa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: var(--space-sm) 0 0;
    padding: 0;
    color: var(--color-text-light);
    font-size: 14px;
    list-style: none;
}

.tqs-meta li[b-5u7ovev2wa] {
    display: inline-flex;
    align-items: center;
}

.tqs-meta li + li[b-5u7ovev2wa]::before {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 var(--space-sm);
    border-radius: 50%;
    background: var(--color-text-tertiary);
    content: "";
}

.tqs-meta-icon[b-5u7ovev2wa] {
    display: inline-flex;
    margin-right: var(--space-xs);
    color: var(--color-text-secondary);
}

.tqs-meta-icon[b-5u7ovev2wa]  .mud-icon-root {
    width: 17px;
    height: 17px;
}

.tqs-meta-highlight[b-5u7ovev2wa] {
    color: var(--color-success-lighter);
}

.tqs-meta .tqs-meta-mode[b-5u7ovev2wa],
.tqs-meta .tqs-meta-boss[b-5u7ovev2wa] {
    display: none;
}

.tqs-trail[b-5u7ovev2wa] {
    margin-top: 18px;
}

.tqs-next-stop[b-5u7ovev2wa] {
    display: none;
    margin: 0;
    color: var(--color-text-primary);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
}

.tqs-teaser[b-5u7ovev2wa] {
    display: -webkit-box;
    max-width: 680px;
    margin: 14px 0 0;
    overflow: hidden;
    color: var(--tqs-cream);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 17px;
    font-style: italic;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* ---- Stakes ---- */

.tqs-stakes[b-5u7ovev2wa] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tqs-stakes--above[b-5u7ovev2wa] {
    margin-top: var(--space-md);
}

.tqs-chip[b-5u7ovev2wa] {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-gray-900) 72%, transparent);
    color: var(--color-text-lighter);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.tqs-chip[b-5u7ovev2wa]  .mud-icon-root {
    width: 16px;
    height: 16px;
}

.tqs-chip--gold[b-5u7ovev2wa] {
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
    background: color-mix(in srgb, var(--color-primary-darker) 38%, transparent);
    color: var(--color-primary-light);
}

.tqs-chip--danger[b-5u7ovev2wa] {
    border-color: color-mix(in srgb, var(--color-danger-light) 55%, transparent);
    background: color-mix(in srgb, var(--color-danger-dark) 40%, var(--tqs-ink));
    color: var(--color-danger-lightest);
}

.tqs-chip-short[b-5u7ovev2wa] {
    display: none;
}

/* ---- The one primary action ---- */

.tqs-action-row[b-5u7ovev2wa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-top: 20px;
}

.tqs-cta[b-5u7ovev2wa] {
    display: inline-flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--radius-2xl);
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 45%, var(--color-primary-dark));
    box-shadow: 0 12px 34px color-mix(in srgb, var(--color-primary) 30%, transparent);
    color: var(--tqs-ink);
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.tqs-cta:hover[b-5u7ovev2wa] {
    transform: translateY(-1px);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--color-primary) 42%, transparent);
}

.tqs-cta:focus-visible[b-5u7ovev2wa] {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 3px;
}

.tqs-cta b[b-5u7ovev2wa] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tqs-cta b[b-5u7ovev2wa]  .mud-icon-root {
    width: 24px;
    height: 24px;
}

.tqs-cta small[b-5u7ovev2wa] {
    color: color-mix(in srgb, var(--color-primary-darker) 30%, var(--tqs-ink));
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
}

.tqs-stakes-col[b-5u7ovev2wa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

.tqs-enter-hint[b-5u7ovev2wa] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.tqs-kbd[b-5u7ovev2wa] {
    padding: 1px 6px;
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 45%, transparent);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--color-gray-900) 60%, transparent);
    color: var(--color-text-light);
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
}

/* Where combat can't load (D3): the status in the CTA's place, and "Get ready first" beside it. */
.tqs-blocked[b-5u7ovev2wa] {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 64px;
    padding: var(--space-sm) 20px;
    border: 1px dashed color-mix(in srgb, var(--color-primary) 50%, transparent);
    border-radius: var(--radius-2xl);
    background: color-mix(in srgb, var(--color-gray-900) 75%, transparent);
    color: var(--color-primary-light);
    text-align: center;
}

.tqs-blocked-icon[b-5u7ovev2wa] {
    display: none;
}

.tqs-blocked-text[b-5u7ovev2wa] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tqs-blocked-text b[b-5u7ovev2wa] {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tqs-blocked-text small[b-5u7ovev2wa] {
    color: var(--color-text-light);
    font-size: 12px;
}

.tqs-get-ready[b-5u7ovev2wa] {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--space-sm);
    min-height: 64px;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
    border-radius: var(--radius-2xl);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    touch-action: manipulation;
}

.tqs-get-ready[b-5u7ovev2wa]  .mud-icon-root {
    width: 19px;
    height: 19px;
}

.tqs-get-ready:focus-visible[b-5u7ovev2wa] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---- Also in progress (wide tier) ---- */

.tqs-also[b-5u7ovev2wa] {
    position: absolute;
    /* Under the plate, its right edge at the plate's middle (A-1920). */
    right: calc(var(--tavern-stage-clear-end, 0px) - var(--tavern-plate-width, 0px) / 2);
    bottom: 54px;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(420px, 30%);
    padding: 10px var(--space-md) 10px 10px;
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 28%, transparent);
    border-radius: var(--radius-2xl);
    background: color-mix(in srgb, var(--tqs-ink) 80%, transparent);
    color: var(--color-text-primary);
    text-decoration: none;
}

.tqs-also:hover[b-5u7ovev2wa] {
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.tqs-also:focus-visible[b-5u7ovev2wa] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.tqs-also-art[b-5u7ovev2wa] {
    flex: none;
    width: 88px;
    height: 52px;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.tqs-also-text[b-5u7ovev2wa] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.tqs-also-eyebrow[b-5u7ovev2wa] {
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tqs-also-name[b-5u7ovev2wa] {
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tqs-also-waypoint[b-5u7ovev2wa] {
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tqs-also-arrow[b-5u7ovev2wa] {
    display: inline-flex;
    color: var(--tqs-gold);
}

@keyframes tqs-blink-b-5u7ovev2wa {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ---- Phone (A-390): "Where you left off", the art as a banner ---- */
@media (max-width: 480px) {
    .tavern-quest-stage[b-5u7ovev2wa] {
        border-radius: var(--radius-3xl);
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--color-gray-800) 70%, var(--tqs-ink)),
            color-mix(in srgb, var(--color-gray-900) 60%, var(--tqs-ink)));
    }

    .tqs-art[b-5u7ovev2wa],
    .tqs-shade[b-5u7ovev2wa] {
        bottom: auto;
        height: 120px;
    }

    .tqs-art-img[b-5u7ovev2wa] {
        object-position: 50% 45%;
    }

    .tqs-shade[b-5u7ovev2wa] {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--tqs-ink) 20%, transparent),
            color-mix(in srgb, var(--color-gray-900) 97%, var(--tqs-ink)));
    }

    .tqs-body[b-5u7ovev2wa] {
        gap: var(--space-md);
        padding: 64px 14px 14px;
    }

    .tqs-eyebrow-row[b-5u7ovev2wa] {
        gap: var(--space-sm);
        min-height: 0;
    }

    .tqs-live-dot[b-5u7ovev2wa],
    .tqs-eyebrow-icon[b-5u7ovev2wa],
    .tqs-eyebrow--full[b-5u7ovev2wa] {
        display: none;
    }

    .tqs-eyebrow--compact[b-5u7ovev2wa] {
        display: inline;
        font-size: 10.5px;
    }

    .tqs-switch[b-5u7ovev2wa] {
        min-height: 32px;
        padding: 0 10px;
    }

    .tqs-title[b-5u7ovev2wa] {
        margin-top: -6px;
        font-size: 23px;
        line-height: 1.15;
    }

    .tqs-meta[b-5u7ovev2wa] {
        margin-top: 0;
        font-size: 12.5px;
    }

    .tqs-meta .tqs-meta-icon[b-5u7ovev2wa],
    .tqs-meta .tqs-meta-levels[b-5u7ovev2wa] {
        display: none;
    }

    .tqs-meta .tqs-meta-boss[b-5u7ovev2wa] {
        display: inline-flex;
    }

    .tqs-trail[b-5u7ovev2wa] {
        margin-top: 0;
    }

    .tqs-next-stop[b-5u7ovev2wa] {
        display: block;
        margin-top: -4px;
    }

    .tqs-teaser[b-5u7ovev2wa] {
        margin-top: 0;
        font-size: 15.5px;
        color: var(--color-text-lighter);
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    /* The phone card states where to fight; the stakes are in the meta line. */
    .tqs-stakes--above[b-5u7ovev2wa],
    .tqs-stakes-col[b-5u7ovev2wa] {
        display: none;
    }

    .tqs-action-row[b-5u7ovev2wa] {
        margin-top: 0;
    }

    .tqs-cta[b-5u7ovev2wa] {
        flex: 1;
        padding: 0 var(--space-lg);
    }

    .tqs-blocked[b-5u7ovev2wa] {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--space-md);
        padding: var(--space-md);
        background: color-mix(in srgb, var(--color-primary) 5%, transparent);
        text-align: left;
    }

    .tqs-blocked-icon[b-5u7ovev2wa] {
        display: inline-flex;
        flex: none;
        color: var(--color-primary);
    }

    .tqs-blocked-icon[b-5u7ovev2wa]  .mud-icon-root {
        width: 26px;
        height: 26px;
    }

    .tqs-blocked-text b[b-5u7ovev2wa] {
        color: var(--color-primary-light);
        font-family: var(--font-primary);
        font-size: 13.5px;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0;
        text-transform: none;
    }

    .tqs-blocked-text small[b-5u7ovev2wa] {
        color: var(--color-text-lighter);
        font-size: 12.5px;
        line-height: 1.4;
    }

    .tqs-get-ready[b-5u7ovev2wa] {
        flex: 1;
        justify-content: center;
        min-height: 48px;
    }
}

/* ---- Tablet (A-1024): the stage under the plate; no standee, chips beside the CTA ---- */
@media (min-width: 960px) {
    /* The stage runs edge to edge here (the page bleeds it over the gutters): no frame, as the comps draw it, and the
       art and its shade fade into the page's own background at the bottom instead of ending on a line. */
    .tavern-quest-stage[b-5u7ovev2wa] {
        flex: 1;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .tqs-art[b-5u7ovev2wa],
    .tqs-shade[b-5u7ovev2wa] {
        -webkit-mask-image: linear-gradient(180deg, black 60%, transparent 100%);
        mask-image: linear-gradient(180deg, black 60%, transparent 100%);
    }

    .tqs-art-img[b-5u7ovev2wa] {
        object-position: 62% 40%;
    }

    .tqs-shade[b-5u7ovev2wa] {
        background:
            linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--tqs-ink) 96%, transparent) 100%),
            linear-gradient(90deg,
                color-mix(in srgb, var(--tqs-ink) 97%, transparent) 0%,
                color-mix(in srgb, var(--tqs-ink) 86%, transparent) 48%,
                color-mix(in srgb, var(--tqs-ink) 45%, transparent) 72%,
                color-mix(in srgb, var(--tqs-ink) 70%, transparent) 100%);
    }

    .tqs-body[b-5u7ovev2wa] {
        flex: 1;
        width: 100%;
        max-width: min(calc(760px + var(--tavern-stage-bleed, 0px)), calc(100% - var(--tavern-stage-clear-end, 0px) - var(--space-2xl)));
        padding: 26px var(--space-2xl) calc(30px + var(--space-xl)) var(--tavern-stage-bleed, var(--space-2xl));
    }

    .tqs-eyebrow-row[b-5u7ovev2wa] {
        min-height: 44px;
    }

    .tqs-eyebrow-row[b-5u7ovev2wa]  .tqs-switch-menu {
        margin-left: 6px;
    }

    .tqs-switch-label--short[b-5u7ovev2wa] {
        display: none;
    }

    .tqs-switch-label--mid[b-5u7ovev2wa] {
        display: inline;
    }

    .tqs-title[b-5u7ovev2wa] {
        font-size: clamp(2.6rem, 2vw + 1.3rem, 3.9rem);
        line-height: 1.06;
    }

    .tqs-meta .tqs-meta-progress[b-5u7ovev2wa] {
        display: none;
    }

    .tqs-meta .tqs-meta-mode[b-5u7ovev2wa] {
        display: inline-flex;
    }

    .tqs-meta[b-5u7ovev2wa] {
        font-size: 14px;
    }

    .tqs-teaser[b-5u7ovev2wa] {
        font-size: 17px;
    }

    .tqs-action-row[b-5u7ovev2wa] {
        flex-wrap: nowrap;
        gap: 14px;
        margin-top: 18px;
    }

    .tqs-cta[b-5u7ovev2wa] {
        padding: 0 26px;
    }

    .tqs-stakes[b-5u7ovev2wa] {
        max-width: 290px;
    }

    /* Tighter stages show the short chip text ("+1,000 XP", "Boss in 2"); the wide tier has room for the full. */
    .tqs-chip-full[b-5u7ovev2wa] {
        display: none;
    }

    .tqs-chip-short[b-5u7ovev2wa] {
        display: inline;
    }
}

/* ---- Desktop (A-1366 / A-1280) and wide (A-1920): the standee beside the plate ---- */
@media (min-width: 1280px) {
    .tqs-art-img[b-5u7ovev2wa] {
        object-position: 50% 45%;
    }

    .tqs-shade[b-5u7ovev2wa] {
        background:
            linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--tqs-ink) 96%, transparent) 100%),
            linear-gradient(90deg,
                color-mix(in srgb, var(--tqs-ink) 97%, transparent) 0%,
                color-mix(in srgb, var(--tqs-ink) 85%, transparent) 36%,
                color-mix(in srgb, var(--tqs-ink) 30%, transparent) 60%,
                color-mix(in srgb, var(--tqs-ink) 55%, transparent) 100%);
    }

    .tqs-standee[b-5u7ovev2wa] {
        position: absolute;
        right: var(--tavern-standee-end, 0px);
        bottom: 0;
        z-index: -1;
        display: block;
        width: var(--tavern-standee-width, 0px);
        height: 100%;
        object-fit: cover;
        object-position: 50% 0;
        -webkit-mask-image:
            linear-gradient(90deg, transparent, black 24%),
            linear-gradient(180deg, black 74%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(90deg, transparent, black 24%),
            linear-gradient(180deg, black 74%, transparent 100%);
        mask-composite: intersect;
    }

    /* Vertical rhythm follows the window height, so the stage stays inside its D5 height down to the 1280x720
       floor (where the ready check must still clear the fold). */
    .tqs-body[b-5u7ovev2wa] {
        max-width: min(calc(780px + var(--tavern-stage-bleed, 0px)), calc(100% - var(--tavern-stage-clear-end, 0px) - var(--space-2xl)));
        padding: clamp(18px, 3vh, var(--space-2xl)) 40px calc(30px + clamp(10px, 2vh, var(--space-xl))) var(--tavern-stage-bleed, 40px);
    }

    .tqs-eyebrow-row[b-5u7ovev2wa] {
        min-height: 36px;
    }

    .tqs--switch .tqs-eyebrow-detail[b-5u7ovev2wa] {
        display: inline-block;
    }

    .tqs--switch .tqs-eyebrow-detail-text[b-5u7ovev2wa] {
        display: inline;
    }

    .tqs-switch-label--mid[b-5u7ovev2wa] {
        display: none;
    }

    .tqs-switch-label--full[b-5u7ovev2wa] {
        display: inline;
    }

    .tqs-meta[b-5u7ovev2wa] {
        margin-top: clamp(6px, 1vh, 10px);
        font-size: 15px;
    }

    .tqs-trail[b-5u7ovev2wa] {
        margin-top: clamp(12px, 2.2vh, var(--space-xl));
    }

    .tqs-teaser[b-5u7ovev2wa] {
        margin-top: clamp(8px, 1.5vh, var(--space-lg));
        font-size: clamp(17px, 0.6vw + 9px, 21px);
    }

    .tqs-action-row[b-5u7ovev2wa] {
        gap: 18px;
        margin-top: clamp(12px, 2.4vh, var(--space-xl));
    }

    .tqs-cta[b-5u7ovev2wa] {
        padding: 0 34px;
    }

    .tqs-stakes[b-5u7ovev2wa] {
        max-width: none;
    }

    .tqs--wide .tqs-stakes[b-5u7ovev2wa] {
        flex-wrap: nowrap;
    }

    .tqs--wide .tqs-chip-full[b-5u7ovev2wa] {
        display: inline;
    }

    .tqs--wide .tqs-chip-short[b-5u7ovev2wa] {
        display: none;
    }
}

/* Touch screens: 44px targets (spec section 3), after the phone's 32px switch so this one wins. */
@media (pointer: coarse) {
    .tqs-switch[b-5u7ovev2wa] {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tqs-live-dot[b-5u7ovev2wa] {
        animation: none;
    }

    .tqs-cta[b-5u7ovev2wa] {
        transition: none;
    }

    .tqs-cta:hover[b-5u7ovev2wa] {
        transform: none;
    }
}
/* /Components/Tavern/TavernReadyCheck.razor.rz.scp.css */
/* TavernReadyCheck (owner: W2). Design tokens only; canonical breakpoints only (480 / 768 / 960 / 1024 / 1280).
   Mobile first: the 2x2 grid of portrait and tablet is the base, 4-up from 1280, a list at 480 and down.
   The card's copy length is a container query on the card itself (compact, short or long by its width). */

.tavern-ready-check[b-xf2an26l7v] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ===== Heading: "Before you set out" (480+), "Get ready" (phone) ===== */

.trc-head--phone[b-xf2an26l7v] {
    display: none;
}

.trc-sort[b-xf2an26l7v] {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 var(--space-md);
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
    background: color-mix(in srgb, var(--color-primary-darker) 38%, transparent);
    color: var(--color-primary-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

/* The readiness link reads only on desktop (the canvas drops it from 1279 down to keep the heading on one line). */
.trc-readiness[b-xf2an26l7v] {
    display: none;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-text-light);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.trc-readiness:hover[b-xf2an26l7v] {
    color: var(--color-primary-light);
}

.trc-readiness:focus-visible[b-xf2an26l7v] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.trc-readiness[b-xf2an26l7v]  .trc-readiness-icon {
    width: 17px;
    height: 17px;
}

/* ===== Task grid ===== */

.trc-tasks[b-xf2an26l7v] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trc-task[b-xf2an26l7v] {
    container: trc-task / inline-size;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px var(--space-lg);
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-gray-800) 94%, transparent),
        color-mix(in srgb, var(--color-gray-900) 97%, transparent));
}

/* ===== Icon tile (tone) ===== */

.trc-icon[b-xf2an26l7v] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.trc-icon[b-xf2an26l7v]  .mud-icon-root {
    width: 26px;
    height: 26px;
}

.trc-icon img[b-xf2an26l7v] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trc-icon--image[b-xf2an26l7v] {
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--color-info-light);
}

.trc-tone--gold[b-xf2an26l7v] {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
}

.trc-tone--info[b-xf2an26l7v] {
    background: color-mix(in srgb, var(--color-info) 18%, transparent);
    color: var(--color-info-lighter);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-info-light) 60%, transparent);
}

.trc-tone--success[b-xf2an26l7v] {
    background: color-mix(in srgb, var(--color-success) 16%, transparent);
    color: var(--color-success-light);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-success-light) 50%, transparent);
}

.trc-tone--epic[b-xf2an26l7v] {
    background: color-mix(in srgb, var(--color-rarity-epic) 18%, transparent);
    color: var(--color-monk-light);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-monk-light) 55%, transparent);
}

.trc-tone--danger[b-xf2an26l7v] {
    background: color-mix(in srgb, var(--color-danger) 16%, transparent);
    color: var(--color-danger-light);
}

.trc-tone--neutral[b-xf2an26l7v] {
    background: color-mix(in srgb, var(--color-text-secondary) 14%, transparent);
    color: var(--color-text-light);
}

/* The image tile keeps its ring whatever the tone. */
.trc-icon--image.trc-tone--gold[b-xf2an26l7v],
.trc-icon--image.trc-tone--neutral[b-xf2an26l7v] {
    background: var(--color-gray-800);
}

/* ===== Copy ===== */

.trc-text[b-xf2an26l7v] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.trc-title[b-xf2an26l7v] {
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trc-detail[b-xf2an26l7v] {
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trc-detail--success[b-xf2an26l7v] {
    color: var(--color-success-lighter);
}

.trc-detail--gold[b-xf2an26l7v] {
    color: var(--color-primary-light);
}

.trc-detail--danger[b-xf2an26l7v] {
    color: var(--color-danger-lighter);
}

/* Three lengths by the card's content width: compact under 262px (the 1280 floor's 4-up), short to 330px (desktop
   and portrait), long from 330px (wide, the tablet's 2x2, the phone list). */
.trc-copy-short[b-xf2an26l7v],
.trc-copy-long[b-xf2an26l7v] {
    display: none;
}

@container trc-task (min-width: 262px) {
    .trc-copy-compact[b-xf2an26l7v] {
        display: none;
    }

    .trc-copy-short[b-xf2an26l7v] {
        display: block;
    }
}

@container trc-task (min-width: 330px) {
    .trc-copy-short[b-xf2an26l7v] {
        display: none;
    }

    .trc-copy-long[b-xf2an26l7v] {
        display: block;
    }
}

/* ===== Buttons (rendered by TavernActionButton, so reached with ::deep) ===== */

.trc-action[b-xf2an26l7v] {
    display: flex;
    flex: none;
}

.trc-action[b-xf2an26l7v]  .trc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    transition: filter var(--transition-fast), background-color var(--transition-fast);
}

.trc-action[b-xf2an26l7v]  .trc-btn--gold {
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 45%, var(--color-primary-dark));
    color: var(--color-bg-base);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.trc-action[b-xf2an26l7v]  .trc-btn--gold:hover {
    filter: brightness(1.06);
}

.trc-action[b-xf2an26l7v]  .trc-btn--ghost {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    color: var(--color-primary);
}

.trc-action[b-xf2an26l7v]  .trc-btn--ghost:hover {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.trc-action[b-xf2an26l7v]  .trc-btn:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

/* ===== Phone (480 and down): "Get ready", a list ===== */
@media (max-width: 480px) {
    .trc-head--full[b-xf2an26l7v] {
        display: none;
    }

    .trc-head--phone[b-xf2an26l7v] {
        display: block;
    }

    .trc-tasks[b-xf2an26l7v] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .trc-task[b-xf2an26l7v] {
        gap: var(--space-md);
        min-height: 68px;
        padding: 10px var(--space-md);
        border-radius: var(--radius-2xl);
    }

    .trc-icon[b-xf2an26l7v] {
        width: 44px;
        height: 44px;
        border-radius: 11px;
    }

    .trc-icon[b-xf2an26l7v]  .mud-icon-root {
        width: 24px;
        height: 24px;
    }
}

/* ===== Desktop (1280 and up): one row, smaller buttons for a mouse, the readiness link ===== */
@media (min-width: 1280px) {
    .trc-readiness[b-xf2an26l7v] {
        display: inline-flex;
    }

    .trc-tasks--n2[b-xf2an26l7v] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trc-tasks--n3[b-xf2an26l7v] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .trc-tasks--n4[b-xf2an26l7v] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) and (pointer: fine) {
    .trc-action[b-xf2an26l7v]  .trc-btn {
        min-height: 36px;
        padding: 0 var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .trc-action[b-xf2an26l7v]  .trc-btn {
        transition: none;
    }
}
/* /Components/Tavern/TavernRoadAhead.razor.rz.scp.css */
/* TavernRoadAhead (owner: W2). Design tokens only; canonical breakpoints only (480 / 768 / 960 / 1024 / 1280).
   Base (959 and down): a vertical timeline, hexes on a line at the left. From 960: hexes left to right on one line,
   gold up to "You are here", slate after it. */

.tavern-road-ahead[b-5o55a9sjoa] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px var(--space-xl);
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 16%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-gray-800) 92%, transparent),
        color-mix(in srgb, var(--color-gray-900) 95%, transparent));
}

.tra-caption[b-5o55a9sjoa] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* ===== Timeline (base: vertical) ===== */

.tra-milestones[b-5o55a9sjoa] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin: var(--space-xs) 0 0;
    padding: 0;
    list-style: none;
}

/* The line behind the hexes (decorative, empty content). */
.tra-milestones[b-5o55a9sjoa]::before {
    content: '';
    position: absolute;
    top: 26px;
    bottom: 26px;
    left: 22px;
    width: 3px;
    border-radius: 2px;
    background: var(--color-text-dark);
}

.tra-milestone[b-5o55a9sjoa] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.tra-hex[b-5o55a9sjoa] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 52px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--color-gray-800);
    color: var(--color-text-light);
}

.tra-hex[b-5o55a9sjoa]  .mud-icon-root {
    width: 22px;
    height: 22px;
}

.tra-tone--info .tra-hex[b-5o55a9sjoa] {
    color: var(--color-info-lighter);
    box-shadow: inset 0 0 0 2px var(--color-info);
}

.tra-tone--success .tra-hex[b-5o55a9sjoa] {
    color: var(--color-cleric-light);
    box-shadow: inset 0 0 0 2px var(--color-cleric);
}

.tra-tone--gold .tra-hex[b-5o55a9sjoa] {
    color: var(--color-primary);
    box-shadow: inset 0 0 0 2px var(--color-primary-dark);
}

.tra-tone--danger .tra-hex[b-5o55a9sjoa] {
    color: var(--color-danger-lighter);
    box-shadow: inset 0 0 0 2px var(--combat-bad-deep);
}

.tra-milestone--current .tra-hex[b-5o55a9sjoa] {
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 50%, var(--color-primary-dark));
    box-shadow: none;
    color: var(--color-bg-base);
}

.tra-hex-level[b-5o55a9sjoa] {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 900;
}

.tra-copy[b-5o55a9sjoa] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tra-level[b-5o55a9sjoa] {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
}

.tra-text[b-5o55a9sjoa] {
    color: var(--color-text-light);
    font-size: 0.78rem;
    line-height: 1.4;
}

@media (max-width: 480px) {
    .tavern-road-ahead[b-5o55a9sjoa] {
        padding: 14px;
    }

    /* The heading needs the whole row on a phone (the timeline says the same thing). */
    .tra-caption[b-5o55a9sjoa] {
        display: none;
    }
}

/* ===== From 960: one row ===== */
@media (min-width: 960px) {
    .tra-milestones[b-5o55a9sjoa] {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-lg);
    }

    /* Gold through the first stop ("You are here"), slate beyond it. */
    .tra-milestones[b-5o55a9sjoa]::before {
        top: 25px;
        bottom: auto;
        left: calc(50% / var(--tra-count, 5));
        right: calc(50% / var(--tra-count, 5));
        width: auto;
        height: 3px;
        background: linear-gradient(90deg, var(--color-primary) 0, var(--color-primary) 4%, var(--color-text-dark) 4%);
    }

    .tra-milestone[b-5o55a9sjoa] {
        flex: 1 1 0;
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    .tra-copy[b-5o55a9sjoa] {
        align-items: center;
    }

    .tra-text[b-5o55a9sjoa] {
        max-width: 220px;
    }
}
/* /Components/Tavern/TavernRoads.razor.rz.scp.css */
/* TavernRoads (owner: W2). Design tokens only; canonical breakpoints only (480 / 768 / 960 / 1024 / 1280).
   Mobile first: portrait rows (art left, body, action right) are the base; 3-up art cards from 960 (200px tall,
   210px from 1280, 240px on the wide tier via .tr--wide from TavernCapabilities.IsWide); compact rows at 480 and down.
   Each card picks its short or long copy by its own width (container query: short under 360px). */

.tavern-roads[b-x46zlqzagh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tr-head--phone[b-x46zlqzagh] {
    display: none;
}

.tr-cards[b-x46zlqzagh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ===== Card (base: a portrait row) ===== */

.tr-card[b-x46zlqzagh] {
    container: tr-card / inline-size;
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 110px;
    min-width: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 20%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-gray-800) 92%, transparent),
        color-mix(in srgb, var(--color-gray-900) 95%, transparent));
    color: var(--color-text-primary);
    text-decoration: none;
    transition: border-color var(--transition-fast);
}

a.tr-card[href]:hover[b-x46zlqzagh] {
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}

a.tr-card[href]:focus-visible[b-x46zlqzagh] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.tr-card--invite[b-x46zlqzagh] {
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.tr-art[b-x46zlqzagh] {
    position: relative;
    flex: none;
    width: 170px;
    overflow: hidden;
}

.tr-art img[b-x46zlqzagh] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

a.tr-card[href]:hover .tr-art img[b-x46zlqzagh] {
    transform: scale(1.03);
}

/* Row mode: the art fades into the card on its right edge. */
.tr-shade[b-x46zlqzagh] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 170px;
    background: linear-gradient(90deg, transparent 40%, var(--color-gray-900) 100%);
    pointer-events: none;
}

.tr-body[b-x46zlqzagh] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    gap: var(--space-xs);
    min-width: 0;
    padding: 14px var(--space-lg);
}

.tr-name[b-x46zlqzagh] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.tr-name[b-x46zlqzagh]  .tr-name-icon {
    flex: none;
    width: 21px;
    height: 21px;
    color: var(--color-primary);
}

.tr-line[b-x46zlqzagh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0;
    min-width: 0;
    color: var(--color-text-lighter);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.tr-line--phone[b-x46zlqzagh] {
    display: none;
}

.tr-sep[b-x46zlqzagh] {
    display: inline-block;
    flex: none;
    width: 4px;
    height: 4px;
    margin: 0 var(--space-sm);
    border-radius: 50%;
    background: var(--color-text-tertiary);
}

.tr-note[b-x46zlqzagh] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.tr-note[b-x46zlqzagh]  .tr-note-icon {
    flex: none;
    width: 16px;
    height: 16px;
}

.tr-note--gold[b-x46zlqzagh] {
    color: var(--color-primary-light);
}

.tr-note--contracts[b-x46zlqzagh] {
    color: var(--color-cleric-light);
}

.tr-note--muted[b-x46zlqzagh] {
    color: var(--color-text-light);
}

.tr-new[b-x46zlqzagh] {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    background: var(--color-cleric-light);
    color: var(--color-bg-base);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Short copy on narrow cards (the 1024 tier's three-up), long copy elsewhere. */
@container tr-card (min-width: 360px) {
    .tr-copy-short[b-x46zlqzagh] {
        display: none;
    }
}

@container tr-card (max-width: 359.98px) {
    .tr-copy-long[b-x46zlqzagh] {
        display: none;
    }
}

/* ===== Action side (rows) ===== */

.tr-act[b-x46zlqzagh] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: none;
    padding-right: var(--space-lg);
}

.tr-act[b-x46zlqzagh]  .tr-act-arrow {
    display: none;
    width: 22px;
    height: 22px;
    color: var(--color-primary-dark);
}

.tr-act[b-x46zlqzagh]  .tr-act-arrow--muted {
    color: var(--color-text-tertiary);
}

.tr-chip[b-x46zlqzagh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 var(--space-md);
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
    background: color-mix(in srgb, var(--color-gray-900) 72%, transparent);
    color: var(--color-text-lighter);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.tr-chip[b-x46zlqzagh]  .tr-chip-icon {
    width: 16px;
    height: 16px;
}

.tr-chip--quiet[b-x46zlqzagh] {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    border-color: color-mix(in srgb, var(--color-text-secondary) 32%, transparent);
    background: color-mix(in srgb, var(--color-gray-900) 65%, transparent);
    color: var(--color-text-lighter);
    font-size: var(--font-size-base);
}

/* ===== Multiplayer invite ===== */

.tr-invite[b-x46zlqzagh] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: var(--space-sm) 10px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    background: color-mix(in srgb, var(--color-bg-base) 82%, transparent);
}

.tr-invite-avatar[b-x46zlqzagh] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--color-rogue);
    background: var(--color-gray-800);
    color: var(--color-text-light);
}

.tr-invite-avatar[b-x46zlqzagh]  .mud-icon-root {
    width: 20px;
    height: 20px;
}

.tr-invite-text[b-x46zlqzagh] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    line-height: 1.35;
}

.tr-invite-text b[b-x46zlqzagh] {
    overflow: hidden;
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tr-invite-sub[b-x46zlqzagh] {
    overflow: hidden;
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tr-invite-timer[b-x46zlqzagh] {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: none;
    color: var(--color-danger-lighter);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.tr-invite-timer[b-x46zlqzagh]  .tr-note-icon {
    width: 15px;
    height: 15px;
}

.tr-blocked-text[b-x46zlqzagh] {
    flex: none;
    max-width: 12em;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    line-height: 1.3;
}

.tr-btn[b-x46zlqzagh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: none;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    transition: filter var(--transition-fast), background-color var(--transition-fast);
}

.tr-btn:focus-visible[b-x46zlqzagh] {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

.tr-btn[b-x46zlqzagh]  .tr-btn-icon {
    width: 17px;
    height: 17px;
}

.tr-btn--gold[b-x46zlqzagh] {
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary) 45%, var(--color-primary-dark));
    color: var(--color-bg-base);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.tr-btn--gold:hover[b-x46zlqzagh] {
    filter: brightness(1.06);
}

.tr-btn--ghost[b-x46zlqzagh] {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    color: var(--color-primary);
}

.tr-btn--quiet[b-x46zlqzagh] {
    background: color-mix(in srgb, var(--color-gray-900) 65%, transparent);
    border-color: color-mix(in srgb, var(--color-text-secondary) 32%, transparent);
    color: var(--color-text-lighter);
}

/* Decline and the invite's level range fit only the roomy invite (the wide tier's cards and portrait rows); the
   common room offers Decline everywhere. After .tr-btn, which would otherwise show the button again. */
.tr-btn.tr-decline[b-x46zlqzagh],
.tr-invite-sub--wide[b-x46zlqzagh] {
    display: none;
}

@container tr-card (min-width: 480px) {
    .tr-btn.tr-decline[b-x46zlqzagh] {
        display: inline-flex;
    }

    .tr-invite-sub--wide[b-x46zlqzagh] {
        display: block;
    }

    .tr-invite-sub--narrow[b-x46zlqzagh] {
        display: none;
    }
}

/* A narrow invite keeps its words: the avatar gives way first (after the avatar's own rule, so this one wins). */
@container tr-card (max-width: 359.98px) {
    .tr-invite-avatar[b-x46zlqzagh] {
        display: none;
    }
}

/* ===== Phone (480 and down): "Roads", compact rows with a thumbnail ===== */
@media (max-width: 480px) {
    .tr-head--full[b-x46zlqzagh] {
        display: none;
    }

    .tr-head--phone[b-x46zlqzagh] {
        display: block;
    }

    .tr-cards[b-x46zlqzagh] {
        gap: 10px;
    }

    .tr-card[b-x46zlqzagh] {
        align-items: center;
        min-height: 72px;
        padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
        gap: var(--space-md);
        border-radius: var(--radius-2xl);
    }

    .tr-art[b-x46zlqzagh] {
        width: 72px;
        height: 56px;
        border-radius: var(--radius-lg);
    }

    .tr-shade[b-x46zlqzagh],
    .tr-note[b-x46zlqzagh],
    .tr-line[b-x46zlqzagh],
    .tr-act .tr-chip[b-x46zlqzagh] {
        display: none;
    }

    .tr-line--phone[b-x46zlqzagh],
    .tr-line--always[b-x46zlqzagh] {
        display: block;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
    }

    .tr-body[b-x46zlqzagh] {
        gap: 2px;
        padding: 0;
    }

    .tr-name[b-x46zlqzagh] {
        font-size: 0.9375rem;
        font-weight: var(--font-weight-bold);
    }

    .tr-name[b-x46zlqzagh]  .tr-name-icon {
        display: none;
    }

    .tr-act[b-x46zlqzagh] {
        padding-right: 0;
    }

    .tr-act[b-x46zlqzagh]  .tr-act-arrow {
        display: block;
    }

    .tr-invite[b-x46zlqzagh] {
        flex-wrap: wrap;
        gap: 6px var(--space-sm);
        padding: 0;
        border: none;
        background: none;
    }

    .tr-invite-avatar[b-x46zlqzagh],
    .tr-invite-sub[b-x46zlqzagh] {
        display: none;
    }

    .tr-invite-text[b-x46zlqzagh] {
        flex: 0 1 auto;
    }
}

/* ===== Tablet and up (960+): three art cards ===== */
@media (min-width: 960px) {
    .tr-cards[b-x46zlqzagh] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .tr-card[b-x46zlqzagh] {
        flex-direction: column;
        justify-content: flex-end;
        height: 200px;
        min-height: 0;
        padding: var(--space-lg);
        border-radius: var(--radius-3xl);
    }

    .tr-art[b-x46zlqzagh] {
        position: absolute;
        inset: 0;
        width: auto;
    }

    .tr-shade[b-x46zlqzagh] {
        right: 0;
        width: auto;
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--color-bg-base) 10%, transparent) 0%,
            color-mix(in srgb, var(--color-bg-base) 70%, transparent) 45%,
            color-mix(in srgb, var(--color-bg-base) 97%, transparent) 100%);
    }

    .tr-body[b-x46zlqzagh] {
        flex: none;
        justify-content: flex-end;
        gap: 6px;
        padding: 0;
    }

    .tr-name[b-x46zlqzagh] {
        gap: 10px;
        font-size: 1.25rem;
    }

    .tr-name[b-x46zlqzagh]  .tr-name-icon {
        width: 22px;
        height: 22px;
    }

    /* The whole card is the link from here up; only a blocked card keeps its reason badge (top right). */
    .tr-act[b-x46zlqzagh] {
        display: none;
    }

    .tr-card--blocked .tr-act[b-x46zlqzagh] {
        position: absolute;
        top: var(--space-lg);
        right: var(--space-lg);
        display: flex;
        padding: 0;
    }
}

/* ===== Desktop (1280+): 210px cards, mouse-sized buttons ===== */
@media (min-width: 1280px) {
    .tr-cards[b-x46zlqzagh] {
        gap: var(--space-lg);
    }

    .tr-card[b-x46zlqzagh] {
        height: 210px;
        padding: 18px 20px;
    }

    .tr-name[b-x46zlqzagh] {
        font-size: 1.375rem;
    }

    .tr-name[b-x46zlqzagh]  .tr-name-icon {
        width: 24px;
        height: 24px;
    }

    .tavern-roads.tr--wide .tr-card[b-x46zlqzagh] {
        height: 240px;
        padding: 20px 22px;
    }

    .tavern-roads.tr--wide .tr-name[b-x46zlqzagh] {
        font-size: 1.5rem;
    }
}

@media (min-width: 1280px) and (pointer: fine) {
    .tr-btn[b-x46zlqzagh] {
        min-height: 36px;
        padding: 0 var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tr-card[b-x46zlqzagh],
    .tr-art img[b-x46zlqzagh],
    .tr-btn[b-x46zlqzagh] {
        transition: none;
    }

    a.tr-card[href]:hover .tr-art img[b-x46zlqzagh] {
        transform: none;
    }
}
/* /Components/Tavern/TavernSectionHeader.razor.rz.scp.css */
/* Tavern section heading (owner: F). Tokens only; no animation. */

.tavern-section-header[b-0lwd3kw4qv] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
    margin-bottom: var(--space-md);
}

.tavern-section-diamond[b-0lwd3kw4qv] {
    width: 8px;
    height: 8px;
    flex: none;
    background: var(--color-primary-dark);
    transform: rotate(45deg);
}

.tavern-section-title[b-0lwd3kw4qv] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
    white-space: nowrap;
}

.tavern-new-badge[b-0lwd3kw4qv] {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--color-success-lighter);
    color: var(--color-bg-base);
    font-family: var(--font-primary);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tavern-section-rule[b-0lwd3kw4qv] {
    flex: 1;
    min-width: var(--space-lg);
    height: 1px;
    background: linear-gradient(90deg, var(--color-border-active), transparent);
}

/* The aside may shrink and wrap (a long one such as "What each level opens up" on a phone), so the header never
   pushes the page wider than the screen. */
.tavern-section-aside[b-0lwd3kw4qv] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-sm);
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

@media (max-width: 480px) {
    .tavern-section-title[b-0lwd3kw4qv] {
        font-size: 0.8rem;
        letter-spacing: 0.16em;
    }
}
/* /Components/Tavern/TavernSheet.razor.rz.scp.css */
/* TavernSheet (owner: W4; canvas A-Sheet). Design tokens only, canonical breakpoints only, reduced motion honored.
   Layers: the scrim and the sheet sit just above the app bar (the bar dims, as in the comp), the same layer as
   MudBlazor's temporary drawers; MudBlazor popovers opened inside the sheet place themselves above it, and dialogs
   and snackbars sit higher still. On the phone tier both stop at the hub dock's top edge (--tsh-bottom), so the dock
   stays lit and usable while a sheet is open. Closed, the sheet keeps its content mounted: it slides out of view and
   turns hidden (and inert, in the markup), never display: none. The page's scroll lock lives in game-hub.css. */

.tavern-sheet-layer[b-yt9or7oity] {
    --tsh-bottom: 0px;
    --tsh-duration: 260ms;
}

@media (max-width: 480px) {
    .tavern-sheet-layer[b-yt9or7oity] {
        --tsh-bottom: calc(var(--tavern-dock-height, 72px) + env(safe-area-inset-bottom, 0px));
    }
}

.tsh-scrim[b-yt9or7oity] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--tsh-bottom);
    z-index: calc(var(--mud-zindex-appbar, 1300) + 1);
    background: color-mix(in srgb, var(--color-bg-base) 66%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.is-open .tsh-scrim[b-yt9or7oity] {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease;
}

.tavern-sheet[b-yt9or7oity] {
    position: fixed;
    left: 0;
    right: 0;
    top: 7.5rem;
    top: clamp(4.5rem, 14dvh, 7.5rem);
    bottom: var(--tsh-bottom);
    z-index: calc(var(--mud-zindex-appbar, 1300) + 2);
    display: flex;
    flex-direction: column;
    /* Clips the panels' own fixed layers (contained by the transform below) to the sheet, so one parked off its
       bottom edge, such as the inventory's closed gear drawer, can't sit over the hub dock and swallow its taps. */
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    background: linear-gradient(180deg, var(--color-bg-elevated-alt), var(--color-bg-base));
    box-shadow: 0 -20px 50px color-mix(in srgb, black 60%, transparent);
    color: var(--color-text-primary);
    outline: none;
    transform: translate3d(0, calc(100% + var(--tsh-bottom) + 24px), 0);
    visibility: hidden;
    transition: transform var(--tsh-duration) cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear var(--tsh-duration);
}

/* Open, the sheet keeps an (identity) transform on purpose: a transformed box is the containing block of its
   position: fixed descendants, so a panel's own fixed bar (the inventory's phone tab bar, its gear button) stays inside
   the sheet instead of escaping over the hub dock. */
.is-open .tavern-sheet[b-yt9or7oity] {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition: transform var(--tsh-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* A finger is on the grab strip: follow it with no easing. */
.tavern-sheet.is-dragging[b-yt9or7oity] {
    transition: none;
}

/* ===== Grab strip and header (both start a swipe-down) ===== */

.tsh-grab[b-yt9or7oity] {
    display: flex;
    justify-content: center;
    flex: none;
    padding: var(--space-sm) 0 var(--space-xs);
    cursor: grab;
    touch-action: none;
}

.tsh-handle[b-yt9or7oity] {
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--color-text-secondary) 50%, transparent);
}

.tsh-header[b-yt9or7oity] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: var(--space-sm) var(--space-sm) 6px 18px;
    touch-action: none;
}

.tsh-header[b-yt9or7oity]  .tsh-icon {
    flex: none;
    color: var(--color-warning-bright);
}

.tsh-title[b-yt9or7oity] {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.tsh-aside[b-yt9or7oity] {
    flex: none;
    display: flex;
    align-items: center;
}

/* An aside fragment that rendered nothing for this panel takes no room (and no header gap). */
.tsh-aside:empty[b-yt9or7oity] {
    display: none;
}

.tsh-header[b-yt9or7oity]  .tsh-close {
    flex: none;
    width: 44px;
    height: 44px;
    color: var(--color-text-light);
}

/* ===== Body: the mounted panels scroll here, never the page behind ===== */

.tsh-body[b-yt9or7oity] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* With no dock under it (481-959) the sheet reaches the screen's bottom edge: clear the home indicator. */
    padding: var(--space-md) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
}

/* On the phone tier the dock below already clears it. */
@media (max-width: 480px) {
    .tsh-body[b-yt9or7oity] {
        padding-bottom: var(--space-lg);
    }
}

/* ===== The Bag inside the sheet (canvas A-Sheet: the dock is the only bottom bar) =====
   InventoryPanel is built for its own page, where under 768px its category tabs are a bar fixed to the screen's bottom
   and the loadout's "My Gear" button floats over the list. In the sheet those two would stack over the hub dock (the
   open sheet contains fixed layers) and cover the list, so here, and only here: the tabs sit in the flow at the top of
   the list, the "My Gear" button sits in the flow under the panel's header, and the 72px the page reserves under the
   list for its tab bar goes. Scoped to .tavern-sheet; the inventory page and the character sheet keep their layout. */
.tavern-sheet[b-yt9or7oity]  .tavern-hub-panel--inventory:not(.game-hub-panel-hidden) {
    display: flex;
    flex-direction: column;
}

.tavern-sheet[b-yt9or7oity]  .tavern-hub-panel--inventory > .inventory-main-layout {
    order: 2;
    padding-bottom: var(--space-lg);
}

.tavern-sheet[b-yt9or7oity]  .tavern-hub-panel--inventory > .loadout-fab {
    position: static;
    order: 1;
    align-self: flex-end;
    margin: 0 0 var(--space-md);
    box-shadow: none;
}

.tavern-sheet[b-yt9or7oity]  .inventory-tabs-container {
    position: static;
    margin: 0 0 var(--space-md);
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 18%, transparent);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-gray-900) 80%, transparent);
    box-shadow: none;
    backdrop-filter: none;
}

/* Nested bottom layers (item and spell details, the loadout sheet) are sized against the screen (80vh / 78vh) but
   contained and clipped by the open sheet, which is shorter: cap them to the sheet so their handle and title show. */
.tavern-sheet[b-yt9or7oity]  .item-detail-drawer.mud-drawer--bottom,
.tavern-sheet[b-yt9or7oity]  .loadout-sheet {
    max-height: calc(100% - var(--space-sm)) !important;
}

@media (prefers-reduced-motion: reduce) {
    .tsh-scrim[b-yt9or7oity],
    .is-open .tsh-scrim[b-yt9or7oity],
    .tavern-sheet[b-yt9or7oity],
    .is-open .tavern-sheet[b-yt9or7oity] {
        transition: none;
    }
}
/* /Components/Tavern/TavernStations.razor.rz.scp.css */
/* TavernStations (owner: W2). Design tokens only; canonical breakpoints only (480 / 768 / 960 / 1024 / 1280).
   Columns follow the section's own width (4, or 2 in a column under 640px such as the wide tier's third), each tile's
   layout its own width (under 186px the icon sits above the text, as on portrait), and the phone (480 and down) is a
   4-column icon grid with short labels. The tile element is TavernActionButton's, so it is reached with ::deep. */

.tavern-stations[b-h6e4gmp2ec] {
    container: ts-section / inline-size;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ts-grid[b-h6e4gmp2ec] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Component-local width (the section's own column, not the viewport; open owner call, LRPG_TAVERN_HUB.md 10). */
@container ts-section (max-width: 640px) {
    .ts-grid[b-h6e4gmp2ec] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ts-item[b-h6e4gmp2ec] {
    container: ts-tile / inline-size;
    display: flex;
    min-width: 0;
}

/* ===== Tile ===== */

.ts-item[b-h6e4gmp2ec]  .ts-station {
    display: flex;
    width: 100%;
    min-height: 72px;
    min-width: 0;
    padding: var(--space-md) 14px;
    border-radius: var(--radius-2xl);
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 16%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-gray-800) 90%, transparent),
        color-mix(in srgb, var(--color-gray-900) 96%, transparent));
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.ts-item[b-h6e4gmp2ec]  .ts-station:hover {
    border-color: color-mix(in srgb, var(--color-primary) 38%, transparent);
}

.ts-item[b-h6e4gmp2ec]  .ts-station:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.ts-item--locked[b-h6e4gmp2ec]  .ts-station {
    cursor: help;
}

.ts-face[b-h6e4gmp2ec] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    min-width: 0;
}

.ts-item--locked .ts-face[b-h6e4gmp2ec] {
    opacity: 0.6;
}

/* ===== Icon and pip ===== */

.ts-icon[b-h6e4gmp2ec] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-2xl);
    background: color-mix(in srgb, var(--color-text-secondary) 12%, transparent);
    color: var(--color-text-light);
}

.ts-icon[b-h6e4gmp2ec]  .mud-icon-root {
    width: 24px;
    height: 24px;
}

.ts-kind--bag .ts-icon[b-h6e4gmp2ec] {
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
    color: var(--color-warning-bright);
}

.ts-kind--merchant .ts-icon[b-h6e4gmp2ec] {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

.ts-kind--spellbook .ts-icon[b-h6e4gmp2ec] {
    background: color-mix(in srgb, var(--color-info) 14%, transparent);
    color: var(--color-info-light);
}

.ts-kind--stables .ts-icon[b-h6e4gmp2ec] {
    background: color-mix(in srgb, var(--color-cleric) 14%, transparent);
    color: var(--color-cleric-light);
}

.ts-kind--petshop .ts-icon[b-h6e4gmp2ec] {
    background: color-mix(in srgb, var(--color-bard) 13%, transparent);
    color: var(--color-bard-light);
}

.ts-item--locked .ts-icon[b-h6e4gmp2ec] {
    background: color-mix(in srgb, var(--color-text-secondary) 12%, transparent);
    color: var(--color-text-secondary);
}

.ts-pip[b-h6e4gmp2ec] {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    border: 2px solid var(--color-gray-900);
    background: var(--color-success);
    color: var(--color-bg-base);
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1;
}

.ts-pip--gold[b-h6e4gmp2ec] {
    background: var(--color-primary);
}

.ts-pip--compact-only[b-h6e4gmp2ec] {
    display: none;
}

/* ===== Text ===== */

.ts-text[b-h6e4gmp2ec] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.ts-label[b-h6e4gmp2ec] {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.ts-label-short[b-h6e4gmp2ec] {
    display: none;
}

.ts-status[b-h6e4gmp2ec] {
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-status--success[b-h6e4gmp2ec] {
    color: var(--color-success-lighter);
}

.ts-status--gold[b-h6e4gmp2ec] {
    color: var(--color-primary-light);
}

.ts-copy-short[b-h6e4gmp2ec] {
    display: none;
}

/* A narrow tile (portrait's four-up) stacks the icon over the text and takes the short status. */
@container ts-tile (max-width: 185.98px) {
    .ts-face[b-h6e4gmp2ec] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .ts-copy-long[b-h6e4gmp2ec] {
        display: none;
    }

    .ts-copy-short[b-h6e4gmp2ec] {
        display: block;
    }
}

/* ===== Phone (480 and down): a 4-column icon grid with short labels ===== */
@media (max-width: 480px) {
    .ts-grid[b-h6e4gmp2ec] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-sm);
    }

    .ts-item[b-h6e4gmp2ec]  .ts-station {
        min-height: 88px;
        padding: 10px var(--space-xs);
        text-align: center;
    }

    .ts-face[b-h6e4gmp2ec] {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .ts-label[b-h6e4gmp2ec],
    .ts-status[b-h6e4gmp2ec] {
        display: none;
    }

    .ts-copy-short[b-h6e4gmp2ec],
    .ts-copy-long[b-h6e4gmp2ec] {
        display: none;
    }

    .ts-label-short[b-h6e4gmp2ec] {
        display: block;
        overflow: hidden;
        max-width: 100%;
        font-size: 0.72rem;
        font-weight: var(--font-weight-semibold);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ts-pip--compact-only[b-h6e4gmp2ec] {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ts-item[b-h6e4gmp2ec]  .ts-station {
        transition: none;
    }
}
/* /Components/Tavern/TavernTrophyMantle.razor.rz.scp.css */
/* TavernTrophyMantle (owner: W2). Design tokens only; canonical breakpoints only (480 / 768 / 960 / 1024 / 1280).
   A card of hex-badged rows; "Trophies" under 960; the phone swaps the boss and rank rows for two stat tiles. Row
   copy picks short or long by the card's width (container query: short under 380px). */

.tavern-trophy-mantle[b-x4m19lkvoc] {
    container: ttm / inline-size;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 16%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-gray-800) 92%, transparent),
        color-mix(in srgb, var(--color-gray-900) 95%, transparent));
}

/* The shared header brings its own bottom margin; the card's gap spaces the rows. */
.ttm-head[b-x4m19lkvoc] {
    margin-bottom: calc(-1 * var(--space-md));
}

.ttm-head--short[b-x4m19lkvoc] {
    display: none;
}

/* ===== Rows ===== */

.ttm-row[b-x4m19lkvoc] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-md);
}

.ttm-hex[b-x4m19lkvoc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 50px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.ttm-hex[b-x4m19lkvoc]  .mud-icon-root {
    width: 22px;
    height: 22px;
}

.ttm-hex--gold[b-x4m19lkvoc] {
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-darker));
    color: var(--color-bg-base);
}

.ttm-hex--boss[b-x4m19lkvoc] {
    background: var(--color-gray-800);
    color: var(--color-danger-light);
    box-shadow: inset 0 0 0 2px var(--combat-bad-deep);
}

.ttm-hex--rank[b-x4m19lkvoc] {
    background: var(--color-gray-800);
    color: var(--color-primary);
    box-shadow: inset 0 0 0 2px var(--color-primary-darker);
}

.ttm-body[b-x4m19lkvoc] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.ttm-body--split[b-x4m19lkvoc] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.ttm-body--split > div[b-x4m19lkvoc] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ttm-top[b-x4m19lkvoc] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
}

.ttm-name[b-x4m19lkvoc] {
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ttm-count[b-x4m19lkvoc] {
    flex: none;
    color: var(--color-text-lighter);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ttm-detail[b-x4m19lkvoc] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.ttm-bar[b-x4m19lkvoc] {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 5px;
    background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
}

.ttm-bar i[b-x4m19lkvoc] {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
}

.ttm-link[b-x4m19lkvoc] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    flex: none;
    min-height: 44px;
    color: var(--color-primary-light);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.ttm-link:hover[b-x4m19lkvoc] {
    color: var(--color-primary);
}

.ttm-link:focus-visible[b-x4m19lkvoc],
.ttm-tile:focus-visible[b-x4m19lkvoc] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.ttm-link[b-x4m19lkvoc]  .ttm-link-icon {
    width: 17px;
    height: 17px;
}

.ttm-copy-short[b-x4m19lkvoc] {
    display: none;
}

/* A narrow mantle (the tablet's and the wide tier's columns) takes the short copy. Component-local width, not the
   viewport (open owner call, LRPG_TAVERN_HUB.md 10). */
@container ttm (max-width: 379.98px) {
    .ttm-copy-long[b-x4m19lkvoc] {
        display: none;
    }

    .ttm-copy-short[b-x4m19lkvoc] {
        display: block;
    }
}

/* ===== Phone tiles (hidden until 480 and down) ===== */

.ttm-tiles[b-x4m19lkvoc] {
    display: none;
}

.ttm-tile[b-x4m19lkvoc] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 10px var(--space-md);
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--color-text-secondary) 14%, transparent);
    background: color-mix(in srgb, var(--color-gray-900) 60%, transparent);
    color: inherit;
    text-decoration: none;
}

.ttm-tile-value[b-x4m19lkvoc] {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-primary);
}

.ttm-tile-value--boss[b-x4m19lkvoc] {
    color: var(--color-danger-lighter);
}

.ttm-tile-label[b-x4m19lkvoc] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* ===== Portrait (959 and down): "Trophies" ===== */
@media not all and (min-width: 960px) {
    .ttm-head--full[b-x4m19lkvoc] {
        display: none;
    }

    .ttm-head--short[b-x4m19lkvoc] {
        display: block;
    }
}

/* ===== Phone (480 and down): stat tiles ===== */
@media (max-width: 480px) {
    .tavern-trophy-mantle[b-x4m19lkvoc] {
        gap: var(--space-md);
        padding: 14px;
    }

    .ttm-row--bosses[b-x4m19lkvoc],
    .ttm-row--rank[b-x4m19lkvoc] {
        display: none;
    }

    .ttm-tiles[b-x4m19lkvoc] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}
/* /Components/Tavern/TavernWaypointTrail.razor.rz.scp.css */
/* TavernWaypointTrail (owner: W1). Hex nodes joined by links; the hex language the victory screen trail uses.
   Tokens only, canonical breakpoints only, and the current node's pulse stops under reduced motion. */

.tavern-waypoint-trail[b-jtoder4i6s] {
    --twt-node-w: 90px;
    --twt-hex-w: 34px;
    --twt-hex-h: 39px;
    --twt-icon: 18px;

    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 680px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.twt-node[b-jtoder4i6s] {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: var(--twt-node-w);
}

.twt-hex[b-jtoder4i6s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--twt-hex-w);
    height: var(--twt-hex-h);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--color-gray-800);
    color: var(--color-text-tertiary);
}

.twt-hex[b-jtoder4i6s]  .mud-icon-root {
    width: var(--twt-icon);
    height: var(--twt-icon);
    font-size: var(--twt-icon);
}

.twt-label[b-jtoder4i6s] {
    color: var(--color-text-secondary);
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Screen-reader only: the node's state ("cleared", "you are here"). */
.twt-sr[b-jtoder4i6s] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.twt-node--done .twt-hex[b-jtoder4i6s] {
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-darker));
    color: var(--color-bg-base);
}

.twt-node--current .twt-hex[b-jtoder4i6s] {
    background: var(--color-bg-base);
    color: var(--color-primary);
    box-shadow: inset 0 0 0 3px var(--color-primary);
}

.twt-node--current .twt-label[b-jtoder4i6s] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
}

.twt-node--boss .twt-hex[b-jtoder4i6s] {
    background: color-mix(in srgb, var(--color-danger-dark) 32%, var(--color-bg-base));
    color: var(--color-danger-light);
}

.twt-node--boss .twt-label[b-jtoder4i6s] {
    color: var(--color-danger-lighter);
}

.twt-hex--count[b-jtoder4i6s] {
    color: var(--color-text-light);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
}

/* The pulsing ring around where the hero stands. */
.twt-ring[b-jtoder4i6s] {
    position: absolute;
    top: -5px;
    left: 50%;
    width: calc(var(--twt-hex-w) + 10px);
    height: calc(var(--twt-hex-h) + 10px);
    margin-left: calc((var(--twt-hex-w) + 10px) / -2);
    border-radius: 50%;
    pointer-events: none;
    animation: twt-pulse-b-jtoder4i6s 2.4s ease-out infinite;
}

.twt-link[b-jtoder4i6s] {
    flex: 1;
    min-width: 16px;
    height: 3px;
    margin-top: calc(var(--twt-hex-h) / 2 - 1px);
    border-radius: 2px;
    background: var(--color-gray-700);
}

.twt-link--done[b-jtoder4i6s] {
    background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
}

.twt-link--into-current[b-jtoder4i6s] {
    background: linear-gradient(90deg, var(--color-primary), var(--color-gray-700));
}

@keyframes twt-pulse-b-jtoder4i6s {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 60%, transparent); }
    70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-primary) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent); }
}

/* Compact: the phone card (and any caller that asks). Smaller hexes; labels stay for screen readers only. */
.twt--compact[b-jtoder4i6s] {
    --twt-hex-w: 28px;
    --twt-hex-h: 32px;
    --twt-icon: 15px;
    max-width: none;
}

.twt--compact .twt-node[b-jtoder4i6s] {
    width: auto;
}

.twt--compact .twt-label[b-jtoder4i6s] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The desktop stage is wider. */
@media (min-width: 1280px) {
    .tavern-waypoint-trail[b-jtoder4i6s] {
        --twt-node-w: 100px;
    }
}

/* Phone: the compact trail, always (canvas board A-390). */
@media (max-width: 480px) {
    .tavern-waypoint-trail[b-jtoder4i6s] {
        --twt-hex-w: 28px;
        --twt-hex-h: 32px;
        --twt-icon: 15px;
        max-width: none;
    }

    .twt-node[b-jtoder4i6s] {
        width: auto;
    }

    .twt-label[b-jtoder4i6s] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .twt-ring[b-jtoder4i6s] {
        animation: none;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 35%, transparent);
    }
}